/* ============================================================
   Harrimont — homepage (all language versions)
   Loaded AFTER css/styles.css. Only the modules the homepage
   sections need; every token, button, card and rhythm rule comes
   from styles.css (.section, .section-head, .eyebrow, .snum, .btn,
   .svc-row, .value, .apill, .case, .partner, .faq, .contact-form).
   ============================================================ */

/* ---------- hero: copy + approval-chain panel ---------- */
.hero-inner{
  max-width:var(--maxw);
  display:grid;grid-template-columns:1.06fr .94fr;align-items:center;
  gap:clamp(36px,5vw,72px);
  padding-bottom:140px;
}
.hero-copy{min-width:0;}
.hero-copy .eyebrow{margin-bottom:24px;font-size:.68rem;letter-spacing:.15em;}
/* German compounds run longer: slightly tighter tracking keeps the hero eyebrow
   on one line on wide screens, and balances the break where it must wrap. */
html[lang="de"] .hero-copy .eyebrow{letter-spacing:.12em;text-wrap:balance;}
.hero-copy h1{font-size:clamp(2.35rem,4.5vw,3.85rem);max-width:15ch;margin-bottom:22px;}
.hero-copy .hero-sub{max-width:52ch;margin-top:0;}
.hero-copy .hero-cta{margin-bottom:38px;}
.hero-copy .hero-locations{gap:10px 18px;font-size:.76rem;letter-spacing:.14em;}
.hero-copy .hero-locations .lbl{gap:7px;}
.hero-copy .hero-locations .dot{display:none;}
.hero-copy .hero-trust{margin-top:20px;letter-spacing:.12em;text-wrap:balance;}
.hero-motif{right:-16vw;opacity:.32;}

.hero-panel{
  position:relative;z-index:2;
  background:rgba(27,38,56,.66);
  border:1px solid rgba(200,164,106,.28);border-radius:6px;
  padding:clamp(20px,2.4vw,28px) clamp(20px,2.4vw,30px) clamp(16px,2vw,22px);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.02) inset;
  justify-self:end;width:100%;max-width:520px;
}
.hero-panel::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent 70%);opacity:.9;
}
.panel-bar,.panel-foot{
  display:flex;justify-content:space-between;gap:12px;margin:0;
  font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gray-100);opacity:.62;
}
.panel-bar{padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12);}
.panel-foot{padding-top:14px;border-top:1px solid rgba(255,255,255,.12);letter-spacing:.14em;}
.panel-foot span{text-wrap:balance;}

.chain{list-style:none;margin:0;padding:0;counter-reset:none;}
.chain-row{
  display:grid;grid-template-columns:14px 1fr auto;gap:14px;align-items:start;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08);
}
.chain-row:last-child{border-bottom:0;}
.chain-dot{
  width:10px;height:10px;border-radius:50%;margin-top:7px;
  border:1px solid rgba(230,230,232,.35);background:transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.chain-label{font-size:.9rem;font-weight:500;line-height:1.4;color:var(--white);}
.chain-note{display:block;margin-top:4px;font-size:.74rem;font-weight:500;line-height:1.45;color:var(--gold);opacity:.9;}
.chain-time{font-size:.74rem;color:var(--gray-100);opacity:.6;margin-top:3px;font-variant-numeric:tabular-nums;letter-spacing:.04em;}

/* on-state: filled gold dot; flagged row keeps a hollow gold ring (pending);
   final row gets the gold halo and a gold label */
.chain-row.is-on .chain-dot{background:var(--gold);border-color:var(--gold);}
.chain-row-flag.is-on .chain-dot{background:transparent;border:2px solid var(--gold);box-shadow:0 0 0 3px rgba(200,164,106,.18);}
.chain-row-final.is-on .chain-dot{box-shadow:0 0 0 4px rgba(200,164,106,.22);}
.chain-row-final .chain-label{color:var(--gold);}
.chain-row-flag .chain-label{color:#EDE1C7;}

/* rows are visible without JS; hidden only once js/home.js has
   taken control of the panel (.chain-ready), mirroring .js .reveal */
.chain-ready .chain-row{opacity:0;transform:translateY(6px);}
.chain-ready .chain-row.is-on{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease);}

/* ---------- figures strip: label above the four stats ---------- */
.stats .wrap{position:relative;}
.stats-label{
  margin:0 0 clamp(26px,3vw,38px);text-align:center;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--gold);
}
.stats-grid{margin-inline:auto;}
.stat-fig{display:inline-flex;align-items:baseline;}
.stat-prefix{margin-right:.04em;}
/* German writes the unit and currency after the figure ("150 Mio. €"), so that
   span trails the number, sits on the same baseline at a smaller size and keeps
   the pair on one line inside the column. */
html[lang="de"] .stat-fig,html[lang="de"] .stat-fig .stat-num{white-space:nowrap;}
html[lang="de"] .stat-prefix{
  margin-right:0;margin-left:0;font-size:clamp(1.25rem,2.3vw,1.8rem);
}

/* ---------- what we do: section lede ---------- */
.lede{
  font-size:clamp(1.04rem,1.9vw,1.18rem);color:var(--ink-soft);line-height:1.72;max-width:66ch;
  margin:calc(-1 * clamp(14px,3vw,40px)) 0 clamp(34px,5vw,54px);
}
.section-dark .lede,.contact .lede{color:var(--gray-100);opacity:.88;}
.contact .lede{margin:0 0 34px;font-size:1.02rem;max-width:44ch;}

/* ---------- section-head variants (EN differentiation pass) ----------
   The default head (eyebrow + chapter number + h2, left) stays the
   baseline; these two variants break the repetition between chapters. */
.section-head.head-center{align-items:center;text-align:center;}
.section-head.head-center .row{justify-content:center;}
.lede-center{margin-inline:auto;text-align:center;}
.section-head.head-split{display:grid;grid-template-columns:1.05fr .95fr;align-items:end;gap:clamp(24px,4vw,72px);}
.head-split .head-main{display:flex;flex-direction:column;gap:22px;}
.head-split .lede{margin:0 0 6px;font-size:1rem;line-height:1.7;}
@media(max-width:960px){
  .section-head.head-split{grid-template-columns:1fr;align-items:start;gap:20px;}
  .head-split .lede{margin-bottom:0;}
}
@media(max-width:620px){
  .section-head.head-center .row{align-items:center;}
}

/* ---------- Business Systems & AI anchor card ---------- */
.anchor{
  background:var(--white);border:1px solid var(--line);border-radius:6px;
  padding:clamp(26px,4vw,48px);box-shadow:var(--shadow);position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,60px);
  margin-bottom:clamp(44px,6vw,72px);
}
.anchor::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),rgba(200,164,106,.25));}
.anchor-k{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;display:block;margin-bottom:14px;}
.anchor h3{font-size:clamp(1.5rem,2.8vw,2.15rem);margin-bottom:16px;color:var(--ink);}
.anchor p{margin:0 0 18px;color:var(--ink-soft);font-size:1rem;line-height:1.7;max-width:54ch;}
.anchor-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);
  border-bottom:1px solid var(--line-gold);padding-bottom:4px;transition:color .25s var(--ease),border-color .25s var(--ease);
}
.anchor-link:hover{color:var(--ink);border-color:var(--ink);}
.anchor-link .arr{transition:transform .25s var(--ease);}
.anchor-link:hover .arr{transform:translateX(4px);}
.anchor-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.anchor-list li{
  position:relative;padding:11px 0 11px 24px;border-bottom:1px solid var(--line);
  font-size:.92rem;font-weight:500;color:var(--ink);line-height:1.45;
}
.anchor-list li::before{content:"";position:absolute;left:2px;top:1.05em;width:7px;height:7px;border:1px solid var(--gold);transform:rotate(45deg);}

/* ---------- advisory rows: label above the .svc-list ---------- */
.svc-label{display:flex;align-items:center;gap:18px;margin-bottom:18px;}
.svc-label .eyebrow{margin:0;}
#advisory{scroll-margin-top:96px;}

/* ---------- case study (dark) ---------- */
.case-lede{
  font-family:"Playfair Display",serif;font-weight:400;font-style:italic;
  font-size:clamp(1.25rem,2.5vw,1.7rem);line-height:1.38;color:var(--gray-100);
  max-width:60ch;margin:calc(-1 * clamp(14px,3vw,40px)) 0 clamp(36px,5vw,56px);
}
/* the scale line sits directly under the case heading; the lede that follows it
   gives up its negative top margin, which was designed to hug the heading */
.case-scale{
  margin:calc(-1 * clamp(10px,2.5vw,30px)) 0 clamp(18px,2.5vw,26px);
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--gold);line-height:1.7;
}
.case-scale + .case-lede{margin-top:0;}
.case-study .section-head h2{max-width:20ch;}
.case-cols{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.12);}
.case-cols .value{position:relative;}
.case-cols .vn{font-family:"Playfair Display",serif;font-style:italic;font-size:1.15rem;letter-spacing:0;text-transform:none;}
.case-cols .value:last-child{border-right:0;}
.case-cols .value h3{font-size:1.3rem;margin-bottom:12px;}
.case-cols .value p{font-size:.95rem;line-height:1.7;}
.case-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);
  margin-top:clamp(40px,5vw,60px);padding-top:clamp(28px,4vw,40px);border-top:1px solid rgba(255,255,255,.12);
}
.case-n{
  display:block;font-family:"Playfair Display",serif;font-weight:500;letter-spacing:-.01em;line-height:1;
  font-size:clamp(1.7rem,3vw,2.4rem);color:var(--gold);
}
.case-l{display:block;margin-top:10px;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--gray-100);opacity:.72;line-height:1.55;max-width:22ch;}
.case-note{margin:clamp(28px,4vw,40px) 0 0;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-100);opacity:.55;font-weight:500;}
.apill-k{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;margin-bottom:14px;}
.ai-grid .apill{padding:clamp(24px,3vw,34px);}
.ai-grid .apill h3{font-size:1.3rem;margin-bottom:12px;line-height:1.2;}
.ai-grid .apill p{font-size:.95rem;line-height:1.65;}
.ai-close{
  margin:clamp(36px,5vw,56px) 0 0;padding-top:clamp(24px,3vw,34px);border-top:1px solid var(--line);
  font-family:"Playfair Display",serif;font-style:italic;font-weight:400;
  font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.4;color:var(--ink);
}
.ai-close>span{display:block;max-width:48ch;}

/* ---------- law, data and evidence ---------- */
.law-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.law-grid .apill{padding:clamp(24px,3vw,34px);background:rgba(255,255,255,.6);}
.law-grid .apill h3{font-size:1.28rem;line-height:1.25;margin-bottom:12px;}
.law-grid .apill p{font-size:.95rem;line-height:1.66;}
.law-caveat{
  margin:26px 0 0;padding:18px 22px;border-left:3px solid var(--gold);border-radius:0 4px 4px 0;
  background:var(--gold-soft);font-size:.9rem;color:var(--ink-soft);line-height:1.66;max-width:80ch;
}

/* ---------- how it works: four-step rail ---------- */
.how-rail{
  list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,36px);
}
.how-rail::before{
  content:"";position:absolute;left:0;right:0;top:22px;height:1px;
  background:linear-gradient(90deg,var(--gold),rgba(200,164,106,.25));
}
.how-step{position:relative;min-width:0;}
.how-n{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);background:var(--paper-2);
  font-family:"Playfair Display",serif;font-style:italic;font-size:1.25rem;color:var(--gold-ink);
  margin-bottom:22px;
}
.how-body h3{font-size:1.22rem;line-height:1.25;margin-bottom:14px;color:var(--ink);}
.how-list{list-style:none;margin:0;padding:0;}
.how-list li{
  position:relative;padding:8px 0 8px 20px;font-size:.9rem;line-height:1.6;color:var(--ink-soft);
}
.how-list li+li{border-top:1px solid var(--line);}
.how-list li::before{content:"";position:absolute;left:1px;top:1.05em;width:6px;height:6px;border:1px solid var(--gold);transform:rotate(45deg);}
.how-close{
  margin:clamp(36px,5vw,56px) 0 0;padding-top:clamp(24px,3vw,34px);border-top:1px solid var(--line);
  font-family:"Playfair Display",serif;font-style:italic;font-weight:400;
  font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.4;color:var(--ink);
}
.how-close>span{display:block;max-width:52ch;}

/* ---------- three levels of automation ---------- */
.levels-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.levels-grid .apill{padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;}
.levels-grid .apill-k{line-height:1.6;min-height:3.2em;}
.levels-grid .apill h3{font-size:1.5rem;margin-bottom:12px;line-height:1.2;}
.levels-grid .apill p{font-size:.95rem;line-height:1.65;}
.level-ex{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--line);}
.level-ex li{
  position:relative;padding:6px 0 6px 20px;font-size:.88rem;line-height:1.55;color:var(--ink);
}
.level-ex li::before{content:"";position:absolute;left:1px;top:1em;width:6px;height:6px;border:1px solid var(--gold);transform:rotate(45deg);}

/* ---------- sectors: six cards ---------- */
.sector-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,28px);}
.sector-grid .case{padding:clamp(24px,3vw,34px);}
.sector-grid .case h3{font-size:1.28rem;}
.sector-grid .case-detail{gap:14px;}
.sector-grid .case-detail dt{color:var(--gold-ink);}
.sector-grid .case-detail dd{font-size:.9rem;}
#sectors .section-cta p{max-width:44ch;}

/* ---------- law: definition rows (EN thinning pass;
   .law-grid above stays for the DE/FR/SQ homepages) ---------- */
.law-list{border-top:1px solid var(--line);}
.law-row{display:grid;grid-template-columns:minmax(180px,250px) 1fr;gap:clamp(16px,3vw,48px);padding:clamp(16px,2.4vw,26px) 0;border-bottom:1px solid var(--line);align-items:baseline;}
.law-row h3{font-size:1.08rem;color:var(--ink);}
.law-row p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.62;}

/* ---------- how we work: five stages ---------- */
.stages{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);}
.stage{
  padding:clamp(24px,3vw,34px) clamp(18px,2.4vw,28px) clamp(28px,3.5vw,38px);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.35);position:relative;
  transition:background .35s var(--ease);
}
.stage::before{content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--gold);transition:width .4s var(--ease);}
.stage:hover{background:rgba(255,255,255,.7);}
.stage:hover::before{width:100%;}
.stage .snum{font-size:clamp(1.9rem,3vw,2.4rem);display:block;margin-bottom:16px;}
.stage h3{font-size:1.2rem;margin-bottom:10px;color:var(--ink);}
.stage p{margin:0;color:var(--ink-soft);font-size:.92rem;line-height:1.62;}

/* ---------- contact: phone next to company ---------- */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;}
.contact .field label .opt{color:rgba(230,230,232,.6);}

/* ---------- contrast on light and dark surfaces (WCAG AA) ---------- */
#team .partner-top .role{color:var(--gold-ink);}
.section-tint .eyebrow{color:#7F6129;}
.section-tint .eyebrow::before{background:#7F6129;}

/* ---------- heading outline: offices use h3 ---------- */
.office h3{font-family:"Playfair Display",serif;font-size:1.2rem;color:var(--white);margin-bottom:8px;display:flex;align-items:center;gap:10px;}
.office h3::before{content:"";width:7px;height:7px;border:1px solid var(--gold);transform:rotate(45deg);}

/* ============================================================
   SECTION UPGRADE PASS (picks 1A·2A·3C·4B·5B·6C·7A·8AB·9B·10B·11C·12B·13A)
   ============================================================ */

/* ---- 1A hero: photo depth ----
   The photo carries the right-hand third of the hero; the gradient is angled
   so the copy column stays near-solid navy (AA contrast on the sub-line)
   while the architecture stays readable behind the panel. */
.hero--photo .hero-photo{position:absolute;inset:0;z-index:0;}
.hero--photo .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:68% 45%;opacity:.9;}
.hero--photo .hero-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(13,19,33,.97) 0%,rgba(13,19,33,.94) 28%,rgba(13,19,33,.78) 52%,rgba(13,19,33,.52) 78%,rgba(10,15,26,.5) 100%);
}
.hero--photo .hero-motif{z-index:1;opacity:.22;}
@media(max-width:1000px){
  /* stacked hero: the copy runs the full width, so the photo steps back */
  .hero--photo .hero-photo img{opacity:.4;object-position:60% 40%;}
  .hero--photo .hero-photo::after{
    background:linear-gradient(rgba(13,19,33,.9),rgba(13,19,33,.94) 45%,rgba(10,15,26,.97));}
}

/* ---- 2A stats: source line ---- */
.stats-src{margin:clamp(24px,3vw,34px) 0 0;text-align:center;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray-100);opacity:.75;font-weight:500;}
.stats-src a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;}

/* ---- 3C advisory proof chips ---- */
.proof{display:inline-flex;margin-top:10px;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--gold-ink);border:1px solid var(--line-gold);border-radius:20px;padding:4px 12px;}

/* ---- 4B "one night" timeline ---- */
.night{background:var(--navy-900);color:var(--white);position:relative;overflow:hidden;}
.night::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 20% 0%,rgba(200,164,106,.1),transparent 55%);}
.night .section-head h2{color:var(--white);}
.night-rail{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);}
.night-rail::before{content:"";position:absolute;left:0;right:0;top:10px;height:1px;
  background:linear-gradient(90deg,var(--gold),rgba(200,164,106,.2));}
.night-step{position:relative;padding-top:34px;}
.night-step::before{content:"";position:absolute;top:4px;left:0;width:13px;height:13px;border-radius:50%;
  border:1px solid var(--gold);background:var(--navy-900);transition:background .5s var(--ease);}
.night-step.reveal.in::before{background:var(--gold);}
.night-t{display:block;font-family:"Playfair Display",serif;font-style:italic;font-size:1.5rem;color:var(--gold);margin-bottom:10px;}
/* The four steps arrive in sequence, so the motion reads as the night passing
   rather than as decoration: 23:00 -> 02:00 -> 04:30 -> 06:00. The dot fills as
   each step lands. Content is never hidden without JS (.js scopes the reveal),
   and the delays are removed for anyone who asks for reduced motion. */
.js .night-step.reveal:nth-child(1){transition-delay:.00s;}
.js .night-step.reveal:nth-child(2){transition-delay:.22s;}
.js .night-step.reveal:nth-child(3){transition-delay:.44s;}
.js .night-step.reveal:nth-child(4){transition-delay:.66s;}
.night-step::before{transition:background .5s var(--ease);}
.js .night-step.reveal:nth-child(2)::before{transition-delay:.22s;}
.js .night-step.reveal:nth-child(3)::before{transition-delay:.44s;}
.js .night-step.reveal:nth-child(4)::before{transition-delay:.66s;}
@media(prefers-reduced-motion:reduce){
  .js .night-step.reveal,
  .js .night-step.reveal::before{transition-delay:0s!important;}
}

.night-step h3{font-size:1.15rem;color:var(--white);margin-bottom:8px;}
.night-step p{margin:0;font-size:.88rem;color:var(--gray-100);opacity:.8;line-height:1.6;}
.night .how-close{color:var(--white);border-color:rgba(255,255,255,.14);}
.night .eyebrow{color:var(--gold);}
.night .eyebrow::before{background:var(--gold);}
.night .lede{color:var(--gray-100);opacity:.88;}

/* ---- 5B featured level ---- */
.level--dark{background:var(--navy-900);border-color:var(--navy-900);}
.level--dark h3{color:var(--white);}
.level--dark p{color:var(--gray-100);}
.level--dark .apill-k{color:var(--gold);}
.level--dark .level-ex{border-color:rgba(255,255,255,.15);}
.level--dark .level-ex li{color:var(--gray-100);}
.level--dark:hover{border-color:var(--line-gold);}

/* Off-screen but readable by search engines and screen readers. Used where a
   decorative marquee carries content that must still exist as text. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* ---- 6C sectors: drifting band ---- */
.drift{background:var(--navy-700);color:var(--white);overflow:hidden;padding:clamp(56px,8vw,96px) 0;position:relative;}
.drift .section-head{margin-bottom:clamp(30px,4vw,52px);}
.drift .section-head h2{color:var(--white);}
.drift-rows{
  overflow:hidden;
  /* the rows run edge to edge; fading the ends stops labels being sliced off
     mid-word at the viewport edge, which is what made the band look misaligned */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
/* Each row holds the sequence twice, so translating by exactly -50% loops
   seamlessly. Durations are tuned per row so both travel at the same visual
   speed despite holding different amounts of text. */
.drift-row{
  display:flex;align-items:center;gap:clamp(38px,5vw,64px);width:max-content;
  animation:driftMove 54s linear infinite;
  will-change:transform;backface-visibility:hidden;
}
.drift-row + .drift-row{margin-top:clamp(10px,1.4vw,18px);}
.drift-row.rev{animation-name:driftMoveRev;animation-duration:44s;}
/* Pause only while the cursor is actually over the moving rows, not the
   whole section: entering the chapter should not freeze the band. */
.drift-rows:hover .drift-row{animation-play-state:paused;}
.drift-item{display:flex;align-items:center;gap:16px;white-space:nowrap;font-family:"Playfair Display",serif;
  font-size:clamp(1.2rem,2.4vw,1.7rem);color:var(--gray-100);}
.drift-item.g{color:var(--gold);}
.drift-item::after{content:"";width:6px;height:6px;border:1px solid var(--gold);transform:rotate(45deg);margin-left:clamp(28px,4vw,48px);flex:none;opacity:.8;}
.drift-cta{margin:clamp(34px,4.5vw,54px) 0 0;display:flex;align-items:center;gap:18px 30px;flex-wrap:wrap;}
.drift-cta p{margin:0;font-family:"Playfair Display",serif;font-style:italic;font-size:clamp(1.05rem,2vw,1.35rem);color:var(--gray-100);}
@keyframes driftMove{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
@keyframes driftMoveRev{from{transform:translate3d(-50%,0,0);}to{transform:translate3d(0,0,0);}}

/* ---- 7A case study: photo backdrop ---- */
.case-photo-bg{position:absolute;inset:0;z-index:0;}
.case-photo-bg img{width:100%;height:100%;object-fit:cover;opacity:.16;}
.case-photo-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(13,19,33,.55),rgba(13,19,33,.94));}
.case-rel{position:relative;z-index:1;}

/* ---- 8A+8B AI: was→is ledger with drawn icons ---- */
.wasis{border-top:1px solid var(--line);}
.wasis-row{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:clamp(14px,2.6vw,40px);align-items:center;
  padding:clamp(18px,2.6vw,28px) 0;border-bottom:1px solid var(--line);}
.wi{width:34px;height:34px;stroke:var(--gold-ink);flex:none;}
.wasis-row.reveal.in .wi path,.wasis-row.reveal.in .wi circle{
  stroke-dasharray:120;stroke-dashoffset:120;animation:wiDraw 1.4s var(--ease) forwards;}
@keyframes wiDraw{to{stroke-dashoffset:0;}}
.wasis-row .was{color:var(--ink-soft);opacity:.6;font-size:.95rem;
  text-decoration:line-through;text-decoration-color:rgba(138,106,46,.5);text-decoration-thickness:1px;}
.wasis-row .arr2{color:var(--gold-ink);font-size:1.2rem;}
.wasis-row .is{color:var(--ink);font-size:1rem;font-weight:500;}
.wasis-row .is b{color:var(--gold-ink);font-weight:600;}

/* ---- 9B law: ledger + pull-quote ---- */
.law-2col{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,56px);align-items:start;}
.law-pull{background:var(--gold-soft);border-left:3px solid var(--gold);border-radius:0 4px 4px 0;padding:clamp(24px,3vw,36px);
  position:sticky;top:96px;}
.law-pull p{margin:0;font-family:"Playfair Display",serif;font-style:italic;font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.4;color:var(--ink);}
.law-pull p b{color:var(--gold-ink);font-weight:500;}

/* ---- 10B stages: swipe deck ---- */
.deck{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 18px;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  /* keep a sideways swipe inside the deck instead of triggering the
     browser's back-navigation gesture */
  overscroll-behavior-x:contain;}
.deck::-webkit-scrollbar{display:none;}
.deck .stage{flex:0 0 min(320px,80vw);scroll-snap-align:start;border:1px solid var(--line);border-radius:6px;
  background:rgba(255,255,255,.6);padding:clamp(24px,2.6vw,32px);display:block;position:relative;overflow:hidden;}
.deck .stage::before{top:0;}
.deck-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:6px;}
.deck-dots{display:flex;gap:2px;}
/* the visible dot is 9px; the button around it is a 44px touch target */
.deck-dots button{
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;
}
.deck-dots button::before{
  content:"";width:9px;height:9px;border-radius:50%;border:1px solid var(--gold-ink);background:transparent;
  transition:background .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease);
}
.deck-dots button[aria-current="true"]::before{background:var(--gold);border-color:var(--gold);transform:scale(1.25);}
.deck-dots button:active::before{transform:scale(1.4);}
.deck-arr{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-gold);background:transparent;color:var(--gold-ink);
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);}
.deck-arr:hover{background:var(--navy-900);border-color:var(--navy-900);color:var(--gold);}

/* ---- 11C leadership band ---- */
.team-band{background:var(--navy-700);color:var(--white);padding:clamp(48px,7vw,84px) 0;position:relative;overflow:hidden;}
.team-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 140% at 82% 10%,rgba(200,164,106,.12),transparent 55%);}
.team-band .wrap{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;}
.band-faces{display:flex;}
.band-faces span{width:64px;height:64px;border-radius:50%;overflow:hidden;border:2px solid var(--navy-700);position:relative;
  background:radial-gradient(circle at 30% 25%,#e7cd9c,var(--gold));display:flex;align-items:center;justify-content:center;
  font-family:"Playfair Display",serif;font-weight:600;font-size:1.3rem;color:var(--navy-900);}
.band-faces span+span{margin-left:-14px;}
.band-faces img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.team-band h2{color:var(--white);font-size:clamp(1.5rem,3.2vw,2.4rem);max-width:22ch;}

/* ---- 12B FAQ: head beside list ---- */
.faq-aside{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,72px);align-items:start;}
.faq-aside .section-head{margin-bottom:0;}
.faq-aside .faq-list{border-top:1px solid var(--line);margin:0;}
.faq-aside-note{color:var(--ink-soft);font-size:.98rem;margin:20px 0 0;max-width:36ch;line-height:1.7;}
.faq-aside-note a{color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px;font-weight:600;}

/* ---- 13A contact: one question ---- */
.contact-one{max-width:42rem;margin-inline:auto;}
.contact .head-center h2{max-width:20ch;}
.c-one textarea{min-height:120px;}
.contact-mini{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center;
  gap:10px 26px;margin:clamp(26px,4vw,38px) 0 0;font-size:.85rem;color:var(--gray-100);opacity:.75;
}
.contact-mini a{white-space:nowrap;}
/* keep the two contact details together on one line even when the offices
   line wraps above them */
.contact-mini .cm-pair{display:flex;align-items:center;gap:10px 26px;flex-wrap:nowrap;}
.contact-mini a{color:var(--gray-100);text-decoration:underline;text-underline-offset:3px;}
.contact-mini a:hover{color:var(--gold);}

/* ---- upgrade pass: responsive ---- */
@media(max-width:880px){
  .night-rail{grid-template-columns:1fr;gap:0;}
  .night-rail::before{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto;
    background:linear-gradient(var(--gold),rgba(200,164,106,.2));}
  .night-step{padding:0 0 26px 32px;}
  .night-step::before{top:6px;}
  .night-step:last-child{padding-bottom:0;}
  .law-2col{grid-template-columns:1fr;}
  .law-pull{position:static;}
  .faq-aside{grid-template-columns:1fr;}
}
@media(max-width:700px){
  .wasis-row{grid-template-columns:auto 1fr;row-gap:8px;}
  .wasis-row .arr2{grid-column:1;transform:rotate(90deg);width:min-content;justify-self:center;}
  .wasis-row .is{grid-column:2;}
  /* the arrows stay on phones: dots alone did not read as 'this slides' */
  .deck-arr{width:40px;height:40px;font-size:1rem;}
}
/* Touch cannot hover-to-pause the marquee, so it runs a little slower there.
   Not too slow: at 74s the band looked frozen on a phone rather than calm. */
@media(hover:none){
  .drift-row{animation-duration:46s;}
  .drift-row.rev{animation-duration:38s;}
}
@media(prefers-reduced-motion:reduce){
  .drift-row{animation:none;}
  .wasis-row.reveal.in .wi path,.wasis-row.reveal.in .wi circle{animation:none;stroke-dasharray:none;stroke-dashoffset:0;}
}

/* ---------- responsive (same breakpoints as styles.css) ---------- */
@media(max-width:1180px) and (min-width:1001px){
  /* narrow laptops and tablets in landscape keep the two-column hero */
  .hero-inner{grid-template-columns:minmax(0,1.1fr) minmax(0,420px);gap:36px;}
  .hero-copy h1{font-size:clamp(2.2rem,4vw,3.2rem);}
  .hero-copy .eyebrow{font-size:.62rem;letter-spacing:.12em;text-wrap:balance;}
  .hero-copy .hero-locations{font-size:.64rem;letter-spacing:.08em;gap:8px 12px;}
  .hero-copy .hero-trust{max-width:56ch;}
  .hero-panel{padding:20px 20px 16px;}
}
@media(max-width:1000px){
  .hero-inner{grid-template-columns:minmax(0,1fr);align-items:start;gap:40px;padding-bottom:80px;}
  .hero-panel{justify-self:start;max-width:560px;}
  .hero-copy h1{max-width:18ch;}
}
@media(max-width:1080px){
  .anchor{grid-template-columns:1fr;}
  .how-rail{grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,36px) clamp(20px,2.6vw,36px);}
  .how-rail::before{content:none;}
  .levels-grid{grid-template-columns:1fr;}
  .sector-grid{grid-template-columns:1fr 1fr;}
  .stages{grid-template-columns:1fr;border-left:0;}
  .stage{display:grid;grid-template-columns:auto 1fr;gap:0 clamp(20px,4vw,40px);border-right:0;padding-inline:0;background:transparent;align-items:start;}
  .stage .snum{margin-bottom:0;grid-row:1 / span 2;min-width:2.6em;}
  .stage p{max-width:62ch;}
  .stage:hover{background:transparent;}
}
@media(max-width:880px){
  .case-cols{grid-template-columns:1fr;}
  .case-cols .value{border-right:0;}
  .case-strip{grid-template-columns:1fr 1fr;}
  .law-grid{grid-template-columns:1fr;}
  .law-row{grid-template-columns:1fr;gap:6px;}
}
@media(max-width:700px){
  .how-rail{grid-template-columns:1fr;gap:0;}
  .how-rail::before{content:"";left:22px;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(var(--gold),rgba(200,164,106,.25));}
  .how-step{display:grid;grid-template-columns:44px 1fr;gap:0 18px;align-items:start;padding-bottom:28px;}
  .how-step:last-child{padding-bottom:0;}
  .how-n{margin-bottom:0;}
  .how-body{padding-top:8px;}
  .sector-grid{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .hero{min-height:0;}
  .hero-inner{padding-top:104px;padding-bottom:54px;}
  .hero-copy .hero-cta{margin-bottom:32px;}
  .hero-copy .hero-trust{letter-spacing:.08em;line-height:1.75;}
  .hero-panel{max-width:none;}
  .anchor{margin-bottom:40px;}
  .stage{padding-block:20px 22px;}
}
@media(max-width:620px){
  .field-row{grid-template-columns:1fr;}
  /* styles.css gives .cookie-text a 420px flex-basis; in the column layout that became a height */
  .cookie-text{flex-basis:auto;}
  .chain-row{grid-template-columns:14px 1fr auto;gap:12px;padding:11px 0;}
  .chain-label{font-size:.86rem;}
  .chain-time{font-size:.8rem;}
  .chain-note{font-size:.79rem;}
}
@media(max-width:420px){
  .case-strip{grid-template-columns:1fr;gap:22px;}
  .panel-bar{flex-wrap:wrap;gap:4px 12px;}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .chain-ready .chain-row{opacity:1;transform:none;transition:none;}
  .chain-dot{transition:none;}
  .stage::before,.anchor-link .arr{transition:none;}
}
@media(hover:none){
  .stage:hover::before{width:0;}
}

/* ============================================================
   MOBILE DENSITY PASS
   On a phone the page ran to 17+ screens, and the length was not in the
   copy but in stacked cards and a very tall footer. Two devices fix that
   without hiding anything:
     1. .m-deck turns a stacked grid into a horizontal swipe deck
     2. the footer columns collapse into accordions (see js/main.js)
   Both are mobile-only; the desktop layouts are untouched.
   ============================================================ */
@media(max-width:700px){
  /* ---- 1. stacked grid -> swipe deck ---- */
  .m-deck{
    display:flex !important;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    padding:2px 2px 14px;
    margin-inline:-2px;
    scrollbar-width:none;-ms-overflow-style:none;
    border-top:0;
  }
  .m-deck::-webkit-scrollbar{display:none;}
  .m-deck > *{
    flex:0 0 min(300px,82vw);
    scroll-snap-align:start;
    min-width:0;
  }
  /* the levels cards keep their own frame; the case columns need one back,
     since on desktop they are separated by the grid's borders alone */
  .case-cols.m-deck > .value{
    border:1px solid rgba(255,255,255,.14);border-radius:6px;
    padding:24px 20px 26px;background:rgba(255,255,255,.03);
  }
  .case-cols.m-deck > .value:last-child{border-right:1px solid rgba(255,255,255,.14);}

  /* shared controls for every mobile deck */
  .deck-controls{margin-top:2px;}
}
/* controls only exist for the phone decks; the stage deck brings its own */
@media(min-width:701px){
  .m-deck-controls{display:none !important;}
}

/* ---- 2. footer accordions (mobile only) ---- */
@media(max-width:700px){
  .footer-grid{gap:0;margin-bottom:14px;}
  .footer-col.is-collapsible{border-bottom:1px solid rgba(255,255,255,.1);}
  .footer-col.is-collapsible:first-of-type{border-top:1px solid rgba(255,255,255,.1);}
  .footer-col.is-collapsible > .footer-toggle{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;min-height:52px;padding:0;background:none;border:0;cursor:pointer;
    font-family:"Montserrat",sans-serif;font-size:.7rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--gold);font-weight:600;text-align:left;
  }
  .footer-col.is-collapsible > .footer-toggle .fchev{
    width:11px;height:11px;flex:none;stroke:currentColor;fill:none;stroke-width:2;
    transition:transform .3s var(--ease);
  }
  .footer-col.is-collapsible > .footer-toggle[aria-expanded="true"] .fchev{transform:rotate(180deg);}
  .footer-col.is-collapsible > .footer-panel[hidden]{display:none;}
  .footer-col.is-collapsible > .footer-panel{padding-bottom:14px;}
  /* the toggle replaces the heading on mobile */
  .footer-col.is-collapsible > h3{display:none;}
  /* the brand column is never collapsed */
  .footer-col-brand{padding-bottom:22px;}
  .footer-col.is-collapsible + .footer-col.is-collapsible{margin-top:0;}
  .footer .footer-bottom{padding-top:22px;}
}

/* ---- 3. collapsible blocks on phones ----
   Marked up with [data-collapse] + [data-collapse-panel]; js/home.js builds
   the toggle only below 700px, so with JS off, or on desktop, everything is
   simply open. Used for the capability list and the advisory rows, which
   together were the tallest section on the page. */
@media(max-width:700px){
  [data-collapse] .m-toggle{
    display:inline-flex;align-items:center;gap:9px;
    background:none;border:0;padding:6px 0;margin:0;cursor:pointer;
    font-family:"Montserrat",sans-serif;font-size:.72rem;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);
    min-height:44px;
  }
  [data-collapse] .m-toggle .mchev{
    width:12px;height:12px;flex:none;stroke:currentColor;fill:none;stroke-width:2;
    transition:transform .3s var(--ease);
  }
  [data-collapse] .m-toggle[aria-expanded="true"] .mchev{transform:rotate(180deg);}
  [data-collapse-panel][hidden]{display:none;}

  /* the advisory rows: the heading itself is the control, so the row reads as
     one tappable unit rather than a title with a stray button beside it */
  .svc-row[data-collapse] .svc-main{cursor:pointer;}
  .svc-row[data-collapse] h3{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-height:48px;  /* the heading is the control, so it needs the tap box */
  }
  .svc-row[data-collapse] h3::after{
    content:"";width:11px;height:11px;flex:none;
    border-right:2px solid var(--gold-ink);border-bottom:2px solid var(--gold-ink);
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .3s var(--ease);
  }
  .svc-row[data-collapse].is-open h3::after{transform:rotate(-135deg) translate(-3px,-3px);}
  .svc-row[data-collapse]{padding-block:6px;}

  /* the law ledger uses the same heading-as-control pattern */
  .law-row[data-collapse]{grid-template-columns:1fr;cursor:pointer;padding-block:4px;}
  .law-row[data-collapse] h3{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-height:48px;margin:0;
  }
  .law-row[data-collapse] h3::after{
    content:"";width:10px;height:10px;flex:none;
    border-right:2px solid var(--gold-ink);border-bottom:2px solid var(--gold-ink);
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .3s var(--ease);
  }
  .law-row[data-collapse].is-open h3::after{transform:rotate(-135deg) translate(-3px,-3px);}
  .law-row[data-collapse] [data-collapse-panel]{padding-bottom:14px;}
  .svc-row[data-collapse] [data-collapse-panel]{padding-bottom:14px;}
}

/* ============================================================
   PHONE: recover vertical space without losing anything
   Measured on a 390x844 phone. The page was 13.2 screens; the
   height sat in rhythm and in blocks that stack one item per row
   where two fit. Nothing here hides content — the swipe decks and
   collapsible blocks above already handle the genuinely long lists.
   ============================================================ */
@media(max-width:620px){
  /* four proof figures stacked one per row cost four rows for eight lines of
     text. Two by two keeps every figure visible and halves the block. */
  .case-strip{grid-template-columns:1fr 1fr;gap:18px 16px;}
  .case-strip .case-n{font-size:1.35rem;}
  .case-strip .case-l{font-size:.78rem;line-height:1.45;}

  /* the three AI rows: the gap between them was doing more work than the
     rows themselves */
  .wasis{gap:14px;}
  .wasis-row{padding-block:12px;}
  .was{line-height:1.55;}

  /* the nightly timeline reads as time passing, so it stays a vertical rail —
     it just does not need this much air between the four steps */
  .night-rail{gap:18px;}
  .night-step h3{margin-bottom:5px;}
  .night-step p{line-height:1.55;}

  /* the hero is the tallest section on the page and most of the excess is
     padding above and below the copy */
  .hero-inner{padding-top:88px;padding-bottom:38px;}
  .hero-copy .hero-cta{margin-bottom:24px;}
}