/* ============================================================
   ARMANDO — Page & section components (shared across pages)
   ============================================================ */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* portrait size variants */
.portrait-sm { aspect-ratio: 1; width: 52px; flex: 0 0 52px; border-radius: 50%; }
.portrait-sm .mono { width: 100%; height: 100%; border: 0; font-size: 1.1rem; }
.portrait-xs { aspect-ratio: 1; width: 34px; flex: 0 0 34px; border-radius: 50%; }
.portrait-xs .mono { width: 100%; height: 100%; border: 0; font-size: 0.8rem; }

/* ---------- Section head (shared) ---------- */
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; margin-bottom: 56px;
}
.section-head h2 { margin: 0; }
@media (max-width: 760px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 40px; }
}

/* ============ HERO ============ */
.hero { background: var(--cream); padding-block: clamp(56px, 8vw, 104px); position: relative; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center;
}
.hero-copy h1 { margin: 22px 0 26px; }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 14px; }
.hero-micro { margin-top: 26px; font-size: 0.9rem; color: var(--muted); }
.hero-visual { position: relative; }
.hero-ph { aspect-ratio: 4/5; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.hero-media { position: relative; aspect-ratio: 4/5; border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; background: var(--navy); }
.hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-badge {
  position: absolute; left: -28px; bottom: 40px;
  background: var(--paper); padding: 22px 26px; border-radius: var(--radius);
  box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 8px;
  max-width: 220px; border-top: 2px solid var(--gold);
}
.hero-badge-label { font-size: 0.82rem; color: var(--muted); line-height: 1.45; }

/* Toronto skyline motif (subtle, editorial) */
.skyline {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background:
    linear-gradient(to top, rgba(14,27,45,0.55), transparent),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='280' preserveAspectRatio='xMidYMax meet'%3E%3Cg fill='%230e1b2d' fill-opacity='0.85'%3E%3Crect x='20' y='150' width='34' height='130'/%3E%3Crect x='60' y='110' width='40' height='170'/%3E%3Crect x='106' y='170' width='30' height='110'/%3E%3Crect x='150' y='90' width='46' height='190'/%3E%3Crect x='205' y='140' width='28' height='140'/%3E%3Crect x='240' y='60' width='10' height='220'/%3E%3Cpolygon points='235,60 245,30 255,60'/%3E%3Crect x='262' y='120' width='44' height='160'/%3E%3Crect x='314' y='168' width='30' height='112'/%3E%3Crect x='352' y='100' width='42' height='180'/%3E%3Crect x='402' y='150' width='30' height='130'/%3E%3Crect x='440' y='124' width='40' height='156'/%3E%3Crect x='488' y='176' width='30' height='104'/%3E%3Crect x='526' y='138' width='44' height='142'/%3E%3C/g%3E%3C/svg%3E") bottom center / contain no-repeat;
  z-index: 0;
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { max-width: 460px; }
  .hero-badge { left: auto; right: 0; }
}

/* ============ TRUST BAR ============ */
.trust-bar { background: var(--navy); padding-block: 30px; }
.trust-grid {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.trust-item { display: flex; flex-direction: column; gap: 3px; }
.trust-top { font-family: var(--serif); font-size: 1.18rem; color: #fff; font-weight: 500; }
.trust-sub { font-size: 0.78rem; color: #8f9bab; letter-spacing: 0.01em; }
.trust-assoc { display: flex; gap: 22px; align-items: center; padding-left: 8px; border-left: 1px solid rgba(255,255,255,0.12); }
.assoc-mark { font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--gold-soft); opacity: 0.92; }
@media (max-width: 820px) {
  .trust-grid { gap: 22px 32px; }
  .trust-assoc { border-left: 0; padding-left: 0; width: 100%; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.12); }
}

/* ============ PERSONA LIST ============ */
.persona-list { list-style: none; counter-reset: p; border-top: 1px solid var(--line); }
.persona {
  display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 32px;
  padding: 30px 8px; border-bottom: 1px solid var(--line);
  transition: background .3s ease, padding .3s ease;
}
.persona:hover { background: var(--card); }
.persona-num { font-family: var(--serif); font-size: 1.5rem; color: var(--gold); font-weight: 500; }
.persona-body h3 { margin-bottom: 4px; }
.persona-body p { color: var(--muted); max-width: 60ch; margin: 0; }
.persona-link {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  color: var(--gold-dark); transition: all .25s ease;
}
.persona:hover .persona-link { background: var(--navy); color: #fff; border-color: var(--navy); transform: translateX(4px); }
.persona-feature { background: linear-gradient(100deg, rgba(176,141,79,0.07), transparent 60%); }
.persona-feature .pill { margin-bottom: 8px; }
@media (max-width: 640px) {
  .persona { grid-template-columns: 54px 1fr; gap: 16px 18px; padding: 24px 4px; }
  .persona-link { grid-row: 1; grid-column: 2; justify-self: end; width: 40px; height: 40px; }
  .persona-body { grid-column: 1 / -1; }
  .persona-num { grid-row: 1; }
}

/* ============ SERVICES ============ */
.services-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 28px; }
.svc-card {
  background: rgba(255,255,255,0.035); border: 1px solid rgba(216,196,155,0.16);
  padding: 40px; border-radius: var(--radius); position: relative; transition: border-color .3s, background .3s;
}
.svc-card:hover { border-color: rgba(216,196,155,0.4); background: rgba(255,255,255,0.06); }
.svc-card--lead h3 { color: #fff; margin: 18px 0 12px; }
.svc-card--lead p { color: #9aa6b6; margin-bottom: 22px; }
.svc-index { font-family: var(--serif); font-size: 0.95rem; color: var(--gold-soft); letter-spacing: 0.1em; }
.services-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(216,196,155,0.16); border: 1px solid rgba(216,196,155,0.16); border-radius: var(--radius); overflow: hidden; }
.pillar { background: var(--navy); padding: 28px 26px; }
.pillar-i { font-family: var(--serif); font-size: 1.2rem; color: #fff; display: block; margin-bottom: 8px; }
.pillar p { color: #8f9bab; font-size: 0.9rem; margin: 0; }
@media (max-width: 820px) {
  .services-feature { grid-template-columns: 1fr; }
  .services-pillars { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .services-pillars { grid-template-columns: 1fr; } }

/* ============ COMPARE ============ */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 940px; margin-inline: auto; }
.compare-col { padding: 40px; border-radius: var(--radius); }
.compare-col h4 { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 22px; font-weight: 600; }
.compare-col ul { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.compare-col li { position: relative; padding-left: 30px; line-height: 1.5; }
.compare-them { background: var(--paper); border: 1px solid var(--line); }
.compare-them h4 { color: var(--muted); }
.compare-them li { color: var(--muted); }
.compare-them li::before { content: "—"; position: absolute; left: 0; color: var(--muted-light); }
.compare-us { background: var(--navy); }
.compare-us h4 { color: var(--gold-soft); }
.compare-us li { color: #d4d8df; }
.compare-us li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 600; }
@media (max-width: 720px) { .compare { grid-template-columns: 1fr; } }

/* ============ TEAM ============ */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.team-card figcaption { padding-top: 18px; }
.team-card h4 { font-size: 1.15rem; margin-bottom: 4px; }
.team-card .role { display: block; font-size: 0.88rem; color: var(--body); }
.team-card .creds { display: block; font-size: 0.78rem; color: var(--gold-dark); letter-spacing: 0.06em; margin-top: 4px; font-weight: 600; }
.team-card .portrait { border-radius: var(--radius); }
@media (max-width: 820px) { .team-grid { grid-template-columns: 1fr 1fr; } }

/* ============ SOCIAL PROOF ============ */
.proof-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 50px; flex-wrap: wrap; }
.google-rating { display: flex; align-items: center; gap: 14px; color: #fff; }
.google-rating .stars { color: var(--gold); font-size: 1.1rem; letter-spacing: 2px; }
.google-rating strong { font-size: 1.1rem; }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.quote { background: rgba(255,255,255,0.04); border: 1px solid rgba(216,196,155,0.14); border-radius: var(--radius); padding: 34px; display: flex; flex-direction: column; }
.quote p { font-family: var(--serif); font-size: 1.16rem; line-height: 1.55; color: #eef1f5; font-weight: 400; font-style: italic; margin-bottom: 26px; flex: 1; }
.quote footer { display: flex; align-items: center; gap: 14px; }
.quote cite { font-style: normal; font-weight: 600; color: #fff; display: block; font-size: 0.95rem; }
.quote footer span { font-size: 0.82rem; color: #8f9bab; }
.awards { margin-top: 60px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.1); text-align: center; }
.awards-label { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: #8f9bab; }
.awards-row { display: flex; justify-content: center; gap: 44px; flex-wrap: wrap; margin-top: 22px; }
.award-mark { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: #c8d0db; opacity: 0.8; }
@media (max-width: 860px) { .proof-grid { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; } }

/* ============ INSIGHTS ============ */
.insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.post-card { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post-thumb { aspect-ratio: 16/10; }
.post-body { padding: 26px 26px 28px; }
.post-cat { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark); }
.post-body h3 { font-size: 1.25rem; line-height: 1.25; margin: 12px 0 12px; }
.post-body h3 a { transition: color .2s; }
.post-card:hover h3 a { color: var(--gold-dark); }
.post-excerpt { color: var(--muted); font-size: 0.95rem; margin-bottom: 20px; }
.byline { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--body); padding-top: 16px; border-top: 1px solid var(--line-soft); }
.byline em { color: var(--gold-dark); font-style: normal; }
@media (max-width: 860px) { .insights-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* ============ LEAD MAGNET ============ */
.lead-magnet { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.lm-form { display: flex; gap: 12px; flex: 1; min-width: 320px; max-width: 480px; }
.lm-form input { flex: 1; padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--sans); font-size: 0.95rem; background: var(--paper); color: var(--ink); }
.lm-form input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
@media (max-width: 600px) { .lm-form { flex-direction: column; max-width: none; } }

/* ============ FINAL CTA ============ */
.final-cta { background: var(--navy-900); color: #fff; padding-block: clamp(80px, 10vw, 140px); position: relative; overflow: hidden; }
.final-cta h2 { color: #fff; }
.final-cta::before {
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background: radial-gradient(70% 120% at 50% -10%, rgba(176,141,79,0.22), transparent 60%);
}
.final-cta .wrap-narrow { position: relative; }
.final-nap { margin-top: 40px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: 0.9rem; color: #9aa6b6; }
.final-nap a { color: var(--gold-soft); }
.final-nap a:hover { color: #fff; }
.final-nap .dot { color: #56616f; }

/* ============ PAGE HERO (interior pages) ============ */
.page-hero { background: var(--navy); color: #fff; padding-block: clamp(64px, 8vw, 110px); position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; opacity: 0.6; background: radial-gradient(60% 110% at 85% 0%, rgba(176,141,79,0.2), transparent 55%); }
.page-hero .wrap { position: relative; }
.page-hero h1 { color: #fff; max-width: 18ch; }
.page-hero .lead { color: #c2cad6; margin-top: 22px; max-width: 56ch; }
.breadcrumb { font-size: 0.82rem; color: #8f9bab; margin-bottom: 26px; letter-spacing: 0.04em; }
.breadcrumb a:hover { color: var(--gold-soft); }
.breadcrumb span { color: #56616f; margin: 0 8px; }

/* ============ PROSE (article/body content) ============ */
.prose { max-width: 70ch; }
.prose p { margin-bottom: 1.3em; font-size: 1.08rem; line-height: 1.75; }
.prose h3 { margin: 1.6em 0 0.6em; }
.prose ul { margin: 0 0 1.4em; padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 28px; margin-bottom: 12px; line-height: 1.6; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }
.prose em { font-style: italic; color: var(--ink); }

/* ============ ABOUT: story / stats / values ============ */
.story-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.story-grid h2 { margin-top: 16px; }
@media (max-width: 820px) { .story-grid { grid-template-columns: 1fr; gap: 28px; } }

.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat-label { font-size: 0.86rem; color: #9aa6b6; letter-spacing: 0.02em; }
@media (max-width: 700px) { .stats-band { grid-template-columns: 1fr 1fr; gap: 32px 24px; } }

.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.value-card { padding: 36px 32px; border-right: 1px solid var(--line); background: var(--card); }
.value-card:last-child { border-right: 0; }
.value-i { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); display: block; margin-bottom: 14px; }
.value-card p { color: var(--muted); font-size: 0.95rem; margin: 0; }
@media (max-width: 900px) {
  .values-grid { grid-template-columns: 1fr 1fr; }
  .value-card:nth-child(2) { border-right: 0; }
  .value-card:nth-child(1), .value-card:nth-child(2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .values-grid { grid-template-columns: 1fr; }
  .value-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .value-card:last-child { border-bottom: 0; }
}

.team-grid--full { row-gap: 44px; }

/* ============ ABOUT: principal + bio cards ============ */
.principal { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 44px; align-items: center; margin-bottom: 56px; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.principal-portrait { aspect-ratio: 4/5; border-radius: var(--radius); max-width: 360px; }
.principal-body .role { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark); font-weight: 600; display: block; margin-bottom: 12px; }
.principal-body h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 20px; }
.creds-inline { font-size: 0.62em; color: var(--gold-dark); font-style: italic; letter-spacing: 0.04em; }
.principal-body p { color: var(--body); margin-bottom: 1em; line-height: 1.7; }
@media (max-width: 760px) { .principal { grid-template-columns: 1fr; gap: 28px; } .principal-portrait { max-width: 300px; } }

.team-bio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 48px; }
.bio-card { display: grid; grid-template-columns: 110px 1fr; gap: 24px; align-items: start; }
.bio-card .portrait { aspect-ratio: 4/5; border-radius: var(--radius); }
.bio-card .role { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dark); font-weight: 600; display: block; margin-bottom: 6px; }
.bio-card h4 { font-size: 1.2rem; margin-bottom: 10px; }
.bio-card p { color: var(--muted); font-size: 0.92rem; line-height: 1.6; margin: 0; }
@media (max-width: 1000px) { .team-bio-grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 440px) { .bio-card { grid-template-columns: 84px 1fr; gap: 16px; } }

/* ============ SERVICES: spec blocks / pillars / process ============ */
.spec-block {
  display: grid; grid-template-columns: 1.12fr 0.88fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "meta visual" "body visual";
  gap: 6px 56px; align-items: start;
}
.spec-meta { grid-area: meta; display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.spec-num { font-family: var(--serif); font-size: 1.4rem; color: var(--gold); }
.spec-body { grid-area: body; }
.spec-visual { grid-area: visual; position: sticky; top: 100px; }
.spec-visual .ph { aspect-ratio: 4/5; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.spec-list { list-style: none; display: flex; flex-direction: column; gap: 16px; margin: 0 0 30px; }
.spec-list li { position: relative; padding-left: 30px; line-height: 1.55; color: var(--body); }
.spec-list li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 7px; height: 7px; background: var(--gold); border-radius: 50%; }
.spec-list strong { color: var(--ink); font-weight: 600; }
@media (max-width: 860px) {
  .spec-block { grid-template-columns: 1fr; grid-template-areas: "meta" "body" "visual"; gap: 8px; }
  .spec-visual { position: static; margin-top: 12px; max-width: 440px; }
}

.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pillar-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(216,196,155,0.16); border-radius: var(--radius); padding: 32px 28px; transition: border-color .3s, transform .3s; }
.pillar-card:hover { border-color: rgba(216,196,155,0.4); transform: translateY(-4px); }
.pillar-card h3 { color: #fff; font-size: 1.3rem; margin-bottom: 12px; }
.pillar-card p { color: #9aa6b6; font-size: 0.94rem; margin: 0; }
@media (max-width: 860px) { .pillar-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pillar-grid { grid-template-columns: 1fr; } }
.pillar-grid--six { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .pillar-grid--six { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pillar-grid--six { grid-template-columns: 1fr; } }

.process-list { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; counter-reset: pr; }
.process-list li { display: flex; flex-direction: column; gap: 14px; position: relative; padding-top: 28px; border-top: 2px solid var(--line); }
.process-num { font-family: var(--serif); font-size: 1.1rem; color: var(--gold-dark); letter-spacing: 0.08em; }
.process-list h4 { margin-bottom: 6px; }
.process-list p { color: var(--muted); font-size: 0.95rem; margin: 0; }
@media (max-width: 860px) { .process-list { grid-template-columns: 1fr 1fr; gap: 32px 28px; } }
@media (max-width: 480px) { .process-list { grid-template-columns: 1fr; } }

/* ============ WHO WE SERVE: persona blocks ============ */
.persona-blocks { display: flex; flex-direction: column; }
.persona-block { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; padding: 52px 0; border-top: 1px solid var(--line); }
.persona-block:last-child { border-bottom: 1px solid var(--line); }
.persona-block-head { display: flex; gap: 20px; align-items: baseline; }
.persona-block-head .persona-num { font-family: var(--serif); font-size: 2rem; color: var(--gold); line-height: 1; }
.persona-block-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.persona-block-body .lead { margin-bottom: 24px; }
.persona-block--feature { background: linear-gradient(120deg, rgba(176,141,79,0.08), transparent 55%); margin-top: 8px; padding: 52px 36px; border-radius: var(--radius); border-top: 1px solid var(--line); }
.check-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin: 0 0 8px; }
.check-list li { position: relative; padding-left: 28px; line-height: 1.5; color: var(--body); }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--gold-dark); font-weight: 600; }
.persona-block--feature .check-list { margin-bottom: 28px; }
@media (max-width: 820px) {
  .persona-block { grid-template-columns: 1fr; gap: 22px; padding: 40px 0; }
  .persona-block--feature { padding: 40px 24px; }
  .check-list { grid-template-columns: 1fr; }
}

/* ============ INSIGHTS: featured / filter ============ */
.featured { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.featured-media .ph { aspect-ratio: 4/3; height: 100%; }
.featured-body { padding: 44px 48px 44px 8px; }
@media (max-width: 820px) {
  .featured { grid-template-columns: 1fr; }
  .featured-media .ph { aspect-ratio: 16/9; }
  .featured-body { padding: 32px 28px 36px; }
}
.filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.filter-pill { font-family: var(--sans); font-size: 0.85rem; font-weight: 500; color: var(--body); background: transparent; border: 1px solid var(--line); padding: 9px 18px; border-radius: 100px; transition: all .2s ease; }
.filter-pill:hover { border-color: var(--navy); color: var(--ink); }
.filter-pill.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ============ PREC niche page ============ */
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.problem-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(216,196,155,0.16); border-left: 2px solid var(--gold); border-radius: var(--radius); padding: 30px 28px; }
.problem-card h4 { color: #fff; font-size: 1.18rem; margin-bottom: 10px; }
.problem-card p { color: #9aa6b6; font-size: 0.94rem; margin: 0; }
@media (max-width: 800px) { .problem-grid { grid-template-columns: 1fr; } }

.benefit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.benefit-card { background: var(--card); padding: 38px 36px; }
.benefit-num { font-family: var(--serif); font-size: 1rem; color: var(--gold-dark); letter-spacing: 0.1em; }
.benefit-card h3 { font-size: 1.4rem; margin: 12px 0 10px; }
.benefit-card p { color: var(--muted); margin: 0; }
@media (max-width: 640px) { .benefit-grid { grid-template-columns: 1fr; } }

.criteria { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px 48px; align-items: start; }
.criteria h2 { margin-top: 16px; }
@media (max-width: 820px) { .criteria { grid-template-columns: 1fr; gap: 24px; } .criteria .check-list { grid-template-columns: 1fr !important; } }

.quote-mark { font-family: var(--serif); font-size: 5rem; color: var(--gold); line-height: 0.5; display: block; height: 40px; }
.big-quote { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.4; color: #fff; font-weight: 400; margin: 24px auto 32px; max-width: 26ch; text-wrap: balance; }
.big-quote-foot { display: inline-flex; align-items: center; gap: 14px; }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); padding: 24px 40px 24px 0; cursor: pointer; position: relative; list-style: none; transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--gold-dark); font-family: var(--sans); transition: transform .25s ease; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--gold-dark); }
.faq-a { padding: 0 40px 26px 0; }
.faq-a p { color: var(--body); margin: 0; line-height: 1.7; }

/* ============ CONTACT ============ */
.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }

.scheduler { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-sm); margin-bottom: 28px; }
.scheduler-head h3 { font-size: 1.45rem; }
.scheduler-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; margin-top: 26px; }
@media (max-width: 560px) { .scheduler-body { grid-template-columns: 1fr; } .scheduler { padding: 24px; } }
.sched-month { display: flex; justify-content: space-between; align-items: center; font-family: var(--serif); font-size: 1.1rem; color: var(--ink); margin-bottom: 16px; }
.sched-month span:first-child { white-space: nowrap; }
.sched-arrows { white-space: nowrap; }
.sched-arrows span,
.sched-arrows button { display: inline-block; width: 28px; height: 28px; line-height: 26px; text-align: center; border: 1px solid var(--line); border-radius: 50%; margin-left: 6px; color: var(--muted); cursor: pointer; background: none; font: inherit; padding: 0; transition: all .2s; }
.sched-arrows button:hover:not(:disabled) { border-color: var(--gold-soft); color: var(--ink); }
.sched-arrows button:disabled { opacity: 0.3; cursor: not-allowed; }
.sched-day.is-avail { background: none; font: inherit; padding: 0; }
.sched-day.is-avail:focus-visible,
.slot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sched-slots-col { display: flex; flex-direction: column; gap: 10px; }
.sched-summary { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 0.85rem; color: var(--ink); font-weight: 600; }
.sched-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sched-dow { font-size: 0.7rem; color: var(--muted-light); text-align: center; font-weight: 600; padding-bottom: 6px; }
.sched-day, .sched-pad { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; border-radius: 50%; color: var(--muted-light); }
.sched-day.is-avail { color: var(--ink); border: 1px solid var(--gold-soft); cursor: pointer; transition: all .2s; }
.sched-day.is-avail:hover { background: rgba(176,141,79,0.12); }
.sched-day.is-sel { background: var(--navy); color: #fff; cursor: pointer; }
.sched-slots { display: flex; flex-direction: column; gap: 10px; }
.sched-slots-label { font-size: 0.8rem; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 2px; }
.slot { text-align: center; padding: 11px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); font-size: 0.9rem; font-weight: 500; color: var(--ink); transition: all .2s; }
.slot:hover { border-color: var(--gold); }
.slot.is-sel { background: var(--gold); border-color: var(--gold); color: var(--navy-900); font-weight: 600; }
.sched-note { font-size: 0.74rem; color: var(--muted-light); margin-top: 4px; }
.scheduler-placeholder { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line); font-size: 0.78rem; color: var(--muted-light); font-style: italic; }

.contact-form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-sm); }
@media (max-width: 560px) { .contact-form { padding: 24px; } }
.contact-form h3 { font-size: 1.45rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field-row .field { margin-bottom: 0; }
.field label { font-size: 0.8rem; font-weight: 600; color: var(--ink); letter-spacing: 0.02em; }
.field input, .field select, .field textarea { font-family: var(--sans); font-size: 0.95rem; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); color: var(--ink); width: 100%; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); background: var(--paper); }
.form-reassure { font-size: 0.82rem; color: var(--muted); margin-top: 16px; text-align: center; }

.contact-aside { display: flex; flex-direction: column; gap: 22px; }
.contact-card { background: var(--card); border: 1px solid var(--line-soft); border-left: 2px solid var(--gold); border-radius: var(--radius); padding: 24px 26px; }
.contact-card h4 { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 12px; font-weight: 600; }
.contact-line { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); line-height: 1.45; }
.contact-line a:hover { color: var(--gold-dark); }
.contact-line + .contact-line { margin-top: 6px; }
.contact-muted { font-size: 0.88rem; color: var(--muted); margin-top: 8px; }
.map-ph { aspect-ratio: 4/3; border-radius: var(--radius); }
.map-embed { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: var(--cream-deep); }
.map-embed iframe { display: block; width: 100%; height: 100%; }
.map-card { padding: 10px; }
.map-card .contact-map { display: block; width: 100%; }
.map-card .btn { margin-left: 10px; width: calc(100% - 20px) !important; }