/* ==========================================================================
   Fairmile — site chrome.
   Imports tokens + components from ../colors_and_type.css.
   Site-specific: top nav, footer, page header, section primitives.
   ========================================================================== */

@import url('colors_and_type.css');

/* ---------- Base ---------- */
body { background: var(--paper); }
.container { max-width: 1240px; margin: 0 auto; padding: 0 48px; }

/* ---------- Utility bar ---------- */
.util {
  display:flex; justify-content:space-between; align-items:center;
  padding: 12px 48px; border-bottom: var(--hair-soft);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--soft-ink);
}
.util .right { display:flex; gap: 28px; }

/* ---------- Top nav ---------- */
nav.main {
  display:flex; justify-content:space-between; align-items:center;
  padding: 24px 48px; border-bottom: var(--hair);
  position: sticky; top: 0; background: var(--paper); z-index: 10;
}
.logo { display:flex; align-items:center; gap: 12px; text-decoration: none; border: 0; }
.logo .mark {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  letter-spacing: -0.025em; color: var(--ink); line-height: 1;
}
nav.main ul { display:flex; gap: 36px; list-style: none; padding: 0; margin: 0; }
nav.main a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink); border: 0;
}
nav.main a:hover { color: var(--brass); }
nav.main a.here { color: var(--brass); }

/* ---------- Page header ---------- */
.page-header { padding: 72px 48px 48px; border-bottom: var(--hair); }
.page-header .breadcrumb {
  display:flex; gap: 14px; align-items:baseline;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--soft-ink); margin-bottom: 24px;
}
.page-header .breadcrumb a { color: var(--soft-ink); border: 0; }
.page-header .breadcrumb a:hover { color: var(--brass); }
.page-header .breadcrumb .here { color: var(--brass); }
.page-header h1 {
  font-family: var(--font-display); font-size: clamp(56px, 8vw, 108px);
  line-height: 0.95; letter-spacing: -0.035em; font-weight: 500;
  max-width: 16ch; margin: 0;
}
.page-header h1 em { font-style: normal; color: var(--brass); }
.page-header .lede {
  font-size: 20px; line-height: 1.45; color: var(--ink);
  max-width: 56ch; margin-top: 32px;
}

/* ---------- Section heading ---------- */
.sec-head {
  display:flex; justify-content:space-between; align-items:baseline;
  padding: 56px 48px 20px; border-bottom: var(--hair);
}
.sec-head .eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--soft-ink);
}
.sec-head .title {
  font-family: var(--font-display); font-size: 40px; letter-spacing: -0.02em;
  font-weight: 500;
}

/* ---------- Footer ---------- */
footer {
  background: var(--ink); color: var(--paper);
  padding: 72px 48px 32px; margin-top: 96px;
}
footer .head {
  display:flex; justify-content:space-between; align-items:flex-start;
  border-bottom: 1px solid rgba(242,238,230,0.18); padding-bottom: 48px; gap: 64px;
}
footer .lockup { display:flex; flex-direction: column; gap: 18px; }
footer .lockup .top { display:flex; align-items:center; gap: 18px; }
footer .lockup .tick { width: 32px; height: 32px; background-color: var(--brass); }
footer .lockup .mark {
  font-family: var(--font-display); font-size: 64px; font-weight: 500;
  letter-spacing: -0.03em; color: var(--paper); line-height: 1;
}
footer .lockup .tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(242,238,230,0.65);
}
footer .cols {
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 48px; flex: 1;
}
footer .cols h4 {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(242,238,230,0.65); font-weight: 400;
  margin: 0 0 16px;
}
footer .cols ul { list-style: none; padding: 0; margin: 0;
                  display:flex; flex-direction: column; gap: 8px; }
footer .cols a { color: var(--paper); border: 0; font-size: 14px; }
footer .cols a:hover { color: var(--brass); }
footer .baseline {
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 28px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(242,238,230,0.55);
}
footer .baseline .motif--fathom { background-color: rgba(242,238,230,0.55); }

/* ---------- Common section primitives ---------- */

/* Three-column sub-brand grid */
.arch { display:grid; grid-template-columns: repeat(3, 1fr); border-bottom: var(--hair); }
.arch .col {
  padding: 48px 36px 56px; border-right: var(--hair-soft);
  display:flex; flex-direction: column; gap: 20px; min-height: 360px;
  text-decoration: none; color: var(--ink); border-bottom: 0;
}
.arch .col:last-child { border-right: 0; }
.arch .col:hover { background: var(--paper-alt); }
.arch .col .idx {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--brass);
}
.arch .col .mode {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--soft-ink); margin-top: -10px;
}
.arch .col .name {
  font-family: var(--font-display); font-size: 42px; font-weight: 500;
  letter-spacing: -0.02em; line-height: 1;
}
.arch .col .name .sub {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.28em;
  display: block; margin-top: 14px; color: var(--ink);
}
.arch .col .desc {
  font-size: 15px; color: var(--soft-ink); max-width: 38ch; line-height: 1.55;
}
.arch .col ul { list-style: none; padding: 0; margin: auto 0 0; }
.arch .col li {
  border-top: var(--hair-soft); padding: 10px 0;
  display: flex; justify-content: space-between; font-size: 13px;
}
.arch .col li .lab {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--soft-ink);
}

/* Voice / pull-quote block */
.voice { padding: 96px 48px; border-bottom: var(--hair); }
.voice .q {
  font-family: var(--font-display); font-size: 64px; line-height: 1.05;
  letter-spacing: -0.025em; font-weight: 500; max-width: 22ch; margin: 0;
}
.voice .q em { font-style: normal; color: var(--brass); }
.voice .attr { display:flex; gap: 16px; margin-top: 40px; }
.voice .attr span {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--soft-ink);
}

/* Featured plate (image + body) */
.feature {
  display:grid; grid-template-columns: 1.3fr 1fr; gap: 0;
  border-top: var(--hair); border-bottom: var(--hair);
}
.feature .plate {
  position: relative; min-height: 380px; overflow: hidden;
  background: var(--paper); border-right: var(--hair-soft);
}
.feature .plate img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(0.92);
  mix-blend-mode: multiply; opacity: 0.62;
}
.feature .plate::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(242,238,230,0.35) 0%, rgba(242,238,230,0.65) 100%);
}
.feature .plate .tag {
  position: absolute; left: 24px; top: 24px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--brass-deep); z-index: 1;
}
.feature .body {
  padding: 48px 40px; background: var(--paper-alt);
  display:flex; flex-direction: column; justify-content: space-between; gap: 24px;
}
.feature .eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--brass);
}
.feature h2 {
  font-family: var(--font-display); font-size: 40px; line-height: 1.05;
  letter-spacing: -0.02em; font-weight: 500; margin: 12px 0 0; max-width: 18ch;
}
.feature .stat { display:flex; align-items:baseline; gap: 14px; }
.feature .stat .n {
  font-family: var(--font-display); font-size: 64px; font-weight: 500;
  letter-spacing: -0.02em; line-height: 1;
}
.feature .stat .n small {
  font-family: var(--font-mono); font-size: 18px; color: var(--soft-ink); margin-left: 6px;
}
.feature .stat .lab {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--soft-ink);
}
.feature .desc {
  font-size: 15px; color: var(--soft-ink); line-height: 1.55; max-width: 38ch;
}
.feature .foot {
  display:flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--soft-ink);
  border-top: var(--hair-soft); padding-top: 16px;
}

/* Index list (work / posts) */
.index-list { padding: 0 48px 64px; }
.index-list .row {
  display: grid; grid-template-columns: 60px 1.4fr 1fr 0.7fr 0.6fr;
  gap: 28px; padding: 22px 0; border-top: var(--hair-soft);
  align-items: baseline; text-decoration: none; color: var(--ink); border-bottom: 0;
}
.index-list .row:hover { background: var(--paper-alt); }
.index-list .row.head-row {
  border-top: var(--hair); padding: 14px 0;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--soft-ink);
}
.index-list .no {
  font-family: var(--font-mono); font-size: 14px; color: var(--brass);
  letter-spacing: 0.12em;
}
.index-list .client {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.15;
}
.index-list .client small {
  display:block;
  font-family: var(--font-mono); font-size: 11px; color: var(--soft-ink);
  letter-spacing: 0.18em; text-transform: uppercase; margin-top: 6px;
}
.index-list .meta {
  font-family: var(--font-mono); font-size: 11px; color: var(--soft-ink);
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* CTA strip — small dark band */
.cta-strip {
  background: var(--ink); color: var(--paper);
  padding: 40px 48px;
  display:flex; justify-content:space-between; align-items:center; gap: 32px;
}
.cta-strip .copy {
  font-family: var(--font-display); font-size: 28px; letter-spacing: -0.015em;
  font-weight: 500; max-width: 32ch;
}
.cta-strip .copy em { font-style: normal; color: var(--brass); }
.cta-strip .btn { background: var(--brass); border-color: var(--brass); color: var(--paper); }
.cta-strip .btn:hover { background: #9d7635; border-color: #9d7635; }


/* ==========================================================================
   Responsive — tablet + mobile.
   Targets shared chrome AND most page-local patterns by class name.
   ========================================================================== */

@media (max-width: 1024px) {
  .container { padding: 0 32px; }
  .util { padding: 10px 32px; }
  nav.main { padding: 18px 32px; }
  nav.main ul { gap: 24px; }
  .page-header { padding: 56px 32px 40px; }
  .page-header h1 { font-size: clamp(44px, 7vw, 80px); }
  .sec-head { padding: 40px 32px 18px; }
  .voice { padding: 64px 32px; }
  .voice .q { font-size: 44px; }
  .arch .col { padding: 36px 24px 40px; min-height: auto; }
  footer { padding: 56px 32px 24px; }
  footer .lockup .mark { font-size: 52px; }
  footer .cols { gap: 32px; }
  .cta-strip { padding: 36px 32px; }
  .cta-strip .copy { font-size: 24px; }
  .feature .plate { min-height: 320px; }
  .feature .body { padding: 36px 28px; }
  .feature h2 { font-size: 32px; }
  .index-list { padding: 0 32px 48px; }
  .index-list .row { gap: 18px; padding: 18px 0; }
  .index-list .client { font-size: 18px; }
}

@media (max-width: 768px) {
  body { font-size: 15px; }

  /* ---- Utility + Nav ---- */
  .util {
    padding: 10px 20px; font-size: 9px; flex-wrap: wrap; gap: 6px 14px;
    letter-spacing: 0.12em;
  }
  .util .right { gap: 14px; }

  nav.main {
    padding: 16px 20px; flex-direction: column;
    align-items: flex-start; gap: 14px;
    position: static;        /* sticky stacks awkwardly on mobile */
  }
  nav.main ul {
    width: 100%; flex-wrap: wrap; gap: 12px 22px;
  }
  nav.main a { font-size: 10px; letter-spacing: 0.18em; }
  .logo .mark { font-size: 20px; }

  /* ---- Page header ---- */
  .page-header { padding: 36px 20px 28px; }
  .page-header .breadcrumb { font-size: 9px; letter-spacing: 0.18em; margin-bottom: 18px; flex-wrap: wrap; gap: 8px; }
  .page-header h1 { font-size: clamp(36px, 10vw, 52px); line-height: 1; }
  .page-header .lede { font-size: 16px; margin-top: 22px; }

  /* ---- Section heads ---- */
  .sec-head {
    padding: 32px 20px 14px; flex-direction: column;
    align-items: flex-start; gap: 6px;
  }
  .sec-head .title { font-size: 26px; line-height: 1.15; }

  /* ---- Architecture: 3-col → stack ---- */
  .arch { grid-template-columns: 1fr; }
  .arch .col {
    border-right: 0; border-bottom: var(--hair-soft);
    padding: 32px 20px;
  }
  .arch .col:last-child { border-bottom: 0; }
  .arch .col .name { font-size: 36px; }

  /* ---- Voice / pull quote ---- */
  .voice { padding: 48px 20px; }
  .voice .q { font-size: 30px; line-height: 1.15; }
  .voice .attr { flex-wrap: wrap; gap: 8px 14px; margin-top: 24px; }

  /* ---- Featured plate ---- */
  .feature { grid-template-columns: 1fr; }
  .feature .plate { min-height: 220px; border-right: 0; border-bottom: var(--hair-soft); }
  .feature .body { padding: 28px 20px; gap: 18px; }
  .feature h2 { font-size: 26px; }

  /* ---- Index list / Work rows / Insights rows ---- */
  .index-list { padding: 0 20px 32px; }
  .index-list .row {
    grid-template-columns: 1fr;
    gap: 4px; padding: 16px 0;
  }
  .index-list .row.head-row { display: none; }
  .index-list .client { font-size: 16px; }
  .index-list .client small { font-size: 10px; }

  /* ---- CTA strip ---- */
  .cta-strip {
    flex-direction: column; align-items: flex-start;
    gap: 18px; padding: 28px 20px;
  }
  .cta-strip .copy { font-size: 20px; }

  /* ---- Footer ---- */
  footer { padding: 40px 20px 20px; margin-top: 56px; }
  footer .head { flex-direction: column; gap: 32px; padding-bottom: 32px; }
  footer .lockup .mark { font-size: 40px; }
  footer .cols { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  footer .baseline {
    flex-direction: column; align-items: flex-start; gap: 10px;
    font-size: 9px; letter-spacing: 0.14em; padding-top: 20px;
  }

  /* ---- Page-local: .services (advisory/projects/labs) ---- */
  .services { padding: 0 20px 40px; }
  .service {
    grid-template-columns: 50px 1fr !important;
    gap: 14px 18px;
    padding: 24px 0;
  }
  .service > div:nth-child(3),
  .service > p {
    grid-column: 1 / -1;
  }
  .service .meta { grid-column: 1 / -1; text-align: left; }
  .service h3 { font-size: 24px; }

  /* ---- Page-local: .principles / 3-col grids ---- */
  .principles { padding: 40px 20px; }
  .principles .head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .principles .head h2 { font-size: 26px; }
  .principles .grid { grid-template-columns: 1fr; gap: 28px; }
  .principles .item,
  .principles .item + .item {
    border-right: 0; padding: 0;
    border-top: var(--hair-soft); padding-top: 20px;
  }
  .principles .item:first-child { border-top: 0; padding-top: 0; }
  .principles .item h4 { font-size: 22px; }

  /* ---- Page-local: .process (advisory) ---- */
  .process { padding: 40px 20px; }
  .process .head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .process .head h2 { font-size: 26px; }
  .process .steps { grid-template-columns: 1fr; gap: 24px; }
  .process .step,
  .process .step + .step {
    border-right: 0; padding: 0;
    border-top: var(--hair-soft); padding-top: 20px;
  }
  .process .step:first-child { border-top: 0; padding-top: 0; }

  /* ---- Page-local: .timeline (projects/hartwell) ---- */
  .timeline { padding: 48px 20px; }
  .timeline .head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 32px; }
  .timeline .head h2 { font-size: 26px; }
  .timeline .grid { grid-template-columns: 1fr !important; gap: 28px; padding-top: 16px; }
  .timeline .phase,
  .timeline .phase + .phase {
    border-right: 0; padding: 0;
    border-top: var(--hair-soft); padding-top: 24px;
  }
  .timeline .phase:first-child { border-top: 0; padding-top: 8px; }
  .timeline .phase::before { left: 0; top: -10px; width: 8px; height: 8px; }

  /* ---- Page-local: .stats-row (projects) / .outcome (hartwell) / .facts (about) ---- */
  .stats-row,
  .outcome,
  .facts {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 16px !important;
    padding: 36px 20px !important;
  }
  .stats-row .stat,
  .outcome .stat,
  .facts .stat {
    border-right: 0 !important;
    padding: 0 !important;
  }
  .stats-row .stat .n,
  .outcome .stat .n,
  .facts .stat .n { font-size: 40px; }
  .stats-row .stat .n small,
  .outcome .stat .n small,
  .facts .stat .n small { font-size: 12px; }

  /* ---- Page-local: .siblings (advisory/projects/labs) ---- */
  .siblings { padding: 40px 20px; }
  .siblings .pair { grid-template-columns: 1fr; }
  .siblings .sib,
  .siblings .sib + .sib {
    border-right: 0; padding: 24px 0;
    border-top: var(--hair-soft);
  }
  .siblings .sib:first-child { border-top: 0; padding-top: 0; }

  /* ---- Page-local: .intro (about) ---- */
  .intro { padding: 36px 20px; grid-template-columns: 1fr; gap: 18px; }
  .intro h2 { font-size: 28px; margin: 8px 0 16px; }

  /* ---- Page-local: .principal / .founder (about) ---- */
  .principal { padding: 40px 20px; }
  .principal .head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 28px; }
  .principal .head h2 { font-size: 24px; }
  .principal .row { grid-template-columns: 1fr; gap: 24px; }
  .principal .av { width: 160px; height: 160px; font-size: 44px; }
  .principal .meta .name { font-size: 40px; }
  .principal .meta .bio { margin-top: 18px; font-size: 15px; }
  .principal .meta .past { grid-template-columns: 100px 1fr; gap: 6px 14px; }
  .principal .meta .contact { flex-direction: column; gap: 8px; }

  /* ---- Page-local: .dl-section (about) ---- */
  .dl-section { padding: 36px 20px; }
  dl { grid-template-columns: 100px 1fr; gap: 10px 14px; }

  /* ---- Page-local: .pilot (labs) ---- */
  .pilot { padding: 40px 20px; grid-template-columns: 1fr; gap: 24px; }
  .pilot .copy h2 { font-size: 26px; }
  .pilot .doc { padding: 20px; font-size: 11px; }

  /* ---- Page-local: .header-row (labs) ---- */
  .header-row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .header-row .accent { width: 64px; height: 64px; }

  /* ---- Page-local: Home hero ---- */
  .hero { padding: 48px 20px 56px; }
  .hero-meta { margin-bottom: 28px; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 9px; }
  .hero h1 { font-size: clamp(44px, 11vw, 64px); }
  .hero .foot {
    grid-template-columns: 1fr 1fr; gap: 24px;
    margin-top: 36px; padding-top: 20px;
  }
  .hero .lede {
    grid-column: 1 / -1;
    font-size: 16px; max-width: 100%;
  }
  .hero .stat .num { font-size: 36px; }

  /* ---- Page-local: Filter bars (work + insights) ---- */
  .filter-bar, .topics {
    padding: 16px 20px;
    flex-wrap: wrap; gap: 14px 20px;
    font-size: 10px; letter-spacing: 0.18em;
  }
  .filter-bar span[style*='margin-left:auto'],
  .topics span[style*='margin-left:auto'] { display: none; }

  /* ---- Page-local: Featured (work) / Lead (insights) ---- */
  .featured, .lead { padding: 36px 20px; }
  .featured .row, .lead .row { grid-template-columns: 1fr; }
  .featured .plate, .lead .plate {
    min-height: 220px;
    border-right: 0; border-bottom: var(--hair-soft);
  }
  .featured .body, .lead .body { padding: 28px 20px; gap: 18px; }
  .featured h2, .lead h2 { font-size: 28px; }
  .featured .stat-row { gap: 18px; flex-wrap: wrap; }
  .featured .stat .n { font-size: 32px; }

  /* ---- Page-local: Work list (work index) ---- */
  .work-list { padding: 0 20px 32px; }
  .work-list .head-row { display: none; }
  .work-list .row {
    grid-template-columns: 1fr;
    gap: 6px; padding: 16px 0;
  }
  .work-list .arrow { display: none; }
  .work-list .client { font-size: 18px; }

  /* ---- Page-local: Article list (insights) ---- */
  .list { padding: 0 20px 32px; }
  .list .head-row { display: none; }
  .list a.article {
    grid-template-columns: 1fr;
    gap: 8px; padding: 22px 0;
  }
  .list .arrow { display: none; }
  .list .ttl { font-size: 18px; }
  .list .ttl small { font-size: 13px; }

  /* ---- Page-local: Subscribe (insights) ---- */
  .subscribe {
    grid-template-columns: 1fr; gap: 24px;
    padding: 40px 20px;
  }
  .subscribe h3 { font-size: 26px; }
  .subscribe form { flex-direction: column; }

  /* ---- Page-local: Article body (insight detail) ---- */
  .article-wrap { padding: 0 20px; }
  .article-body {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 32px 0 !important;
  }
  .sidenotes {
    order: 2;
    padding-top: 24px; border-top: var(--hair-soft);
  }
  .prose { max-width: 100%; }
  .prose h2 { font-size: 22px; margin: 32px 0 12px; }
  .prose p { font-size: 16px; }
  .prose blockquote { font-size: 18px; margin: 20px 0; }
  .bio { grid-template-columns: 60px 1fr; gap: 14px; padding: 24px 0; }
  .bio .av { width: 48px; height: 48px; font-size: 13px; }
  .bio .more { grid-column: 1 / -1; text-align: left; }
  .article-meta { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 10px; }
  .article-meta .l { flex-direction: column; gap: 4px; }
  .related .row {
    grid-template-columns: 50px 1fr;
    gap: 12px; padding: 16px 0;
  }
  .related .row > .meta, .related .row > .arrow { display: none; }

  /* ---- Page-local: Contact split + form ---- */
  .contact-split {
    grid-template-columns: 1fr;
  }
  .contact-split .form-col, .contact-split .meta-col {
    padding: 36px 20px;
    border-right: 0;
  }
  .form h2 { font-size: 28px; }
  .form .row { grid-template-columns: 1fr; gap: 18px; }
  .form .radio-row { flex-direction: column; gap: 10px; }
  .form .actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .form .actions .note { font-size: 9px; }
  .meta-col h3 { font-size: 10px; }
  .office-card { margin-top: 20px; }

  /* ---- Page-local: FAQ ---- */
  .faq { padding: 40px 20px; }
  .faq .head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .faq .head h2 { font-size: 24px; }
  .faq .q {
    grid-template-columns: 1fr;
    gap: 6px; padding: 20px 0;
  }
  .faq .q .no { font-size: 11px; }
  .faq .q h4 { font-size: 18px; }
}

@media (max-width: 480px) {
  /* Tiniest devices — squeeze hero more, stats to single column */
  .page-header h1 { font-size: clamp(34px, 11vw, 44px); }
  .hero h1 { font-size: clamp(38px, 12vw, 48px); }
  .hero .foot { grid-template-columns: 1fr; }
  .stats-row, .outcome, .facts {
    grid-template-columns: 1fr !important;
  }
  footer .cols { grid-template-columns: 1fr; }
}