/* ==========================================================================
   Gatelanes — shared tokens, chrome, and primitives used across all 6 pages
   Voice: quiet authority. Gold used like leaf, not paint.
   ========================================================================== */

:root{
  /* Brand */
  --teal:          #004D3D;
  --teal-deep:     #00382C;
  --teal-ink:      #0A1F1A;
  --teal-black:    #061611;

  --gold:          #C9A84C;   /* base */
  --gold-light:    #D4AF37;   /* hover */
  --gold-pale:     #E8CF80;   /* on-dark text */
  --gold-ink:      #7C621C;   /* on-cream text (AA on cream) */

  --cream:         #F5F0E8;
  --cream-warm:    #EFE6D3;
  --bone:          #FAF5EA;

  --ink:           #223730;
  --ink-soft:      #5A6B5D;
  --ink-mute:      #8E9280;

  --warm-gray:     #E8E2D6;

  /* Motion */
  --ease:          cubic-bezier(.25,.46,.45,.94);
  --ease-strong:   cubic-bezier(.7,.1,.2,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-weight:400;
  font-size:19.5px;
  line-height:1.65;
}
::selection{background:var(--gold);color:var(--teal-ink)}
img,svg{display:block;max-width:100%}
a{color:inherit}

/* ---------- Typography primitives ---------- */
.serif    { font-family:'Playfair Display', serif; font-weight:400; letter-spacing:-0.015em }
.serif-it { font-family:'Playfair Display', serif; font-style:italic; font-weight:400 }
.mono     { font-family:'Be Vietnam Pro', system-ui, sans-serif }

.eyebrow{
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:12.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-ink);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:18px; height:1px; background:var(--gold);}
.eyebrow.on-dark{ color:var(--gold-pale) }
.eyebrow.on-dark::before{ background:var(--gold) }

h1.display, h2.display, h3.display{
  font-family:'Playfair Display', serif; font-weight:300;
  letter-spacing:-0.02em; color:var(--teal); margin:0;
  text-wrap:balance;
}
h1.display{ font-size:clamp(44px, 6vw, 92px); line-height:1.02 }
h2.display{ font-size:clamp(36px, 4.2vw, 60px); line-height:1.06 }
h3.display{ font-size:clamp(27.5px, 2vw, 30px); line-height:1.2; font-weight:400 }

h1.display em, h2.display em, h3.display em{
  font-style:italic; font-weight:400;
  color:var(--gold-ink);
}
.on-dark h1.display, .on-dark h2.display, .on-dark h3.display,
h1.display.on-dark, h2.display.on-dark, h3.display.on-dark{ color:#fff }
.on-dark h1.display em, .on-dark h2.display em,
h1.display.on-dark em, h2.display.on-dark em{ color:var(--gold-pale) }

p.lede{
  font-size:20.5px; line-height:1.65; color:var(--ink-soft);
  max-width:58ch; margin:0;
}
p.lede.on-dark{ color:rgba(255,255,255,.72) }

/* ---------- Layout ---------- */
section{ position:relative }
.wrap{ max-width:1320px; margin:0 auto; padding:0 40px }
.wrap-narrow{ max-width:960px; margin:0 auto; padding:0 40px }
.sec{ padding:140px 0 }
.sec-sm{ padding:96px 0 }

.section-label{
  display:flex; align-items:center; gap:14px; margin-bottom:28px;
}
.section-label .idx{
  font-family:'Be Vietnam Pro', system-ui, sans-serif; color:var(--gold-ink);
  font-size:12.5px; letter-spacing:.24em; text-transform:uppercase;
}
.section-label .bar{ height:1px; flex:1; background:linear-gradient(90deg, rgba(201,168,76,.55), transparent) }
.section-label.on-dark .idx{ color:var(--gold-pale) }
.section-label.on-dark .bar{ background:linear-gradient(90deg, rgba(201,168,76,.45), transparent) }

/* ---------- Nav (dark teal, consistent across all pages) ---------- */
/* The chrome is a masthead, not a bar. A plate across the top of a picture
   shows its own ground and a hard bottom edge, which is exactly what makes it
   read as furniture pasted onto the page. Here the type sits straight on
   whatever is underneath, and legibility comes from a wash INSIDE the frame —
   the same device as the hero's own scrim — which dies to nothing and so has
   no edge to see. */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 44px;
  background:none; border-bottom:0;
  transition:padding .3s var(--ease);
}
.nav.scrolled{ padding:18px 44px }
.nav::before{
  content:""; position:absolute; left:0; right:0; top:0; height:170px; z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(6,20,15,.64) 0%, rgba(6,20,15,.28) 46%, rgba(6,20,15,0) 100%);
  transition:opacity .45s var(--ease);
}
/* over a light ground the wash would be a smear, and the ink turns over instead */
.nav.light::before{ opacity:0 }
.brand{ display:flex; align-items:center; gap:14px; color:#fff; text-decoration:none }
.brand .brand-line{ font-family:'Be Vietnam Pro', system-ui, sans-serif; font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:rgba(247,244,236,.55); font-weight:500; white-space:nowrap; padding-left:14px; border-left:1px solid rgba(201,168,76,.35) }
body.on-light .brand .brand-line, .nav.on-light .brand-line{ color:rgba(34,55,48,.55); border-left-color:rgba(154,123,63,.4) }
@media (max-width:760px){ .brand .brand-line{ display:none } }
.brand .mark{
  width:28px; height:38px;
  background-image: url('logo_brand.png');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  /* subtle lift so gold reads against dark nav */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.brand .wordmark{
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-weight:500;
  font-size:20.5px; letter-spacing:.02em; color:#fff;
}
.nav-links{ display:flex; align-items:center; gap:0 }
/* The language control. Last thing on the bar, set smaller than the
   destinations and behind a hairline, so it reads as a utility rather than a
   fifth place to go. It is a link, not a toggle: each language is a real URL. */
.nav-lang{
  margin-left:16px; padding:7px 0 7px 18px;
  border-left:1px solid rgba(232,207,128,.26);
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:rgba(232,207,128,.78); text-decoration:none; white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav-lang:hover{ color:#E8CF80 }
.nav.light .nav-lang{ color:var(--gold-ink); border-left-color:rgba(154,123,63,.26) }
.nav.light .nav-lang:hover{ color:var(--teal) }
/* In the phone overlay it is a row like the others, held apart at the end. */
.nav-overlay .nav-lang{
  margin:22px 0 0; padding:18px 0 0; border-left:0;
  border-top:1px solid rgba(232,207,128,.20); align-self:stretch; text-align:center;
}
.nav-links a{
  position:relative; text-decoration:none;
  color:rgba(255,255,255,.78);
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  padding:7px 20px; font-weight:400;
  transition:color .3s var(--ease);
}
.nav-links a:not(.nav-cta){ display:inline-flex; align-items:baseline }
.nav-links a:hover{ color:#fff }
/* Index numerals in the same Playfair italic the Alignment ledger uses, so the
   chrome speaks the page's own grammar instead of a generic one. The numeral
   sits outside the slide-up mask, so it holds while the label moves. */
.nav-links a:not(.nav-cta):not(.nav-lang)::before{
  font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
  font-size:12.5px; letter-spacing:0; text-transform:none;
  color:rgba(232,207,128,.50); margin-right:9px;
  transition:color .3s var(--ease);
}
.nav-links a:nth-child(1)::before{ content:"01" }
.nav-links a:nth-child(2)::before{ content:"02" }
.nav-links a:nth-child(3)::before{ content:"03" }
.nav-links a:not(.nav-cta):hover::before{ color:rgba(232,207,128,.92) }
.nav-links a::after{
  content:""; position:absolute; left:20px; right:20px; bottom:4px;
  height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .4s var(--ease-strong);
}
.nav-links a:hover::after,
.nav-links a.active::after{ transform:scaleX(1) }

/* Client Login — a hairline, not a pill. An outlined gold button announces the
   one thing a private office would never announce. */
.nav-links a.nav-cta{
  margin-left:28px;
  padding:7px 0 7px 28px;
  border:0; border-left:1px solid rgba(201,168,76,.32); border-radius:0;
  color:rgba(232,207,128,.82);
  background:none;
  font-size:12px; letter-spacing:.24em;
  display:inline-flex; align-items:center; gap:8px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.nav-links a.nav-cta::after{ display:none; }         /* no underline sweep on the client door */
.nav-links a.nav-cta:hover{ background:none; color:#F3E4B4 }
.nav-links a.nav-cta .nav-cta-arr{
  font-size:12px; line-height:1; opacity:.72; transform:translateY(-1px);
  transition:transform .3s var(--ease);
}
.nav-links a.nav-cta:hover .nav-cta-arr{ transform:translate(2px,-3px) }

/* Mobile overlay variant */
.nav-overlay a.nav-cta{
  margin-top:12px;
  padding:12px 22px;
  border:1px solid rgba(201,168,76,.6);
  border-radius:999px;
  color:var(--gold-pale, #E8D8A6);
  display:inline-flex; align-items:center; gap:10px;
}

/* 44px is the smallest reliable finger target. The bars stay 22px wide and
   the box grows around them, so nothing moves visually. */
.nav-mobile{ display:none; background:none; border:0; cursor:pointer;
  width:44px; height:44px; padding:0; margin-right:-5px;
  align-items:center; justify-content:center; flex-direction:column }
.nav-mobile span{ display:block; width:22px; height:1px; background:#fff; margin:5px auto; transition:transform .3s, opacity .3s }

/* Mobile nav overlay */
.nav-overlay{
  position:fixed; inset:0; z-index:190; background:rgba(6,22,17,.98);
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:60px 24px;
}
.nav-overlay.open{ display:flex }
.nav-overlay a{
  font-family:'Playfair Display', serif; font-size:32px; font-weight:400;
  color:#fff; text-decoration:none; letter-spacing:-0.01em;
  opacity:0; transform:translateY(16px);
  animation:navIn .5s var(--ease) forwards;
}
.nav-overlay a:nth-child(1){ animation-delay:.05s }
.nav-overlay a:nth-child(2){ animation-delay:.10s }
.nav-overlay a:nth-child(3){ animation-delay:.15s }
.nav-overlay a:nth-child(4){ animation-delay:.20s }
.nav-overlay a:nth-child(5){ animation-delay:.25s }
@keyframes navIn{ to{ opacity:1; transform:none } }

/* ---------- Page hero (interior pages) ---------- */
.page-hero{
  position:relative; padding:200px 0 100px;
  background:radial-gradient(120% 80% at 50% 35%, #0F2A22 0%, #071612 60%, #030908 100%);
  color:#fff; overflow:hidden;
}
.page-hero .crumbs{
  display:flex; gap:10px; align-items:center; margin-bottom:24px;
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(232,207,128,.7);
}
.page-hero .crumbs a{ color:inherit; text-decoration:none; opacity:.7; transition:opacity .3s, color .3s }
.page-hero .crumbs a:hover{ color:var(--gold); opacity:1 }
.page-hero .crumbs .sep{ opacity:.35 }
.page-hero h1{
  font-family:'Playfair Display', serif; font-weight:300;
  font-size:clamp(44px, 5.6vw, 88px); line-height:1.02; letter-spacing:-0.02em;
  color:#fff; margin:0; max-width:22ch; text-wrap:balance;
}
.page-hero h1 em{
  font-style:italic; font-weight:400; color:var(--gold-pale);
}
.page-hero p.sub{
  margin-top:28px; color:rgba(255,255,255,.72); max-width:62ch;
  font-size:19.5px; line-height:1.65;
}

/* Decorative hero side graphic (styled SVG, per answers) */
.page-hero .aside{
  position:absolute; right:-40px; top:50%; transform:translateY(-50%);
  width:38%; height:80%; pointer-events:none; opacity:.8;
}
.page-hero::after{
  content:""; position:absolute; inset:auto 0 -1px 0; height:120px;
  background:linear-gradient(180deg, transparent, var(--cream));
  pointer-events:none;
}

/* ---------- Buttons / links ---------- */
.cta-btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:16px 28px; background:var(--gold); color:var(--teal-ink);
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:13px; letter-spacing:.22em; text-transform:uppercase; font-weight:500;
  border:none; border-radius:999px; cursor:pointer; text-decoration:none;
  transition:box-shadow .4s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.cta-btn:hover{
  box-shadow:0 0 36px rgba(201,168,76,.55), 0 0 80px rgba(201,168,76,.25);
  transform:translateY(-2px);
  background:var(--gold-light);
}
.cta-btn.ghost{
  background:transparent; color:var(--gold); border:1px solid rgba(201,168,76,.5);
}
.cta-btn.ghost:hover{ background:var(--gold); color:var(--teal-ink) }

.link-gold{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--gold-ink); text-decoration:none; position:relative;
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:13px; letter-spacing:.22em; text-transform:uppercase; font-weight:500;
  padding-bottom:3px;
}
.link-gold::after{
  content:""; position:absolute; left:0; right:26px; bottom:0; height:1px;
  background:var(--gold); transform-origin:left; transform:scaleX(0);
  transition:transform .4s var(--ease-strong);
}
.link-gold:hover::after{ transform:scaleX(1) }
.link-gold .arr{ transition:transform .4s var(--ease-strong) }
.link-gold:hover .arr{ transform:translateX(6px) }
.link-gold.on-dark{ color:var(--gold-pale) }
.link-gold.on-dark::after{ background:var(--gold-pale) }

/* ---------- Footer (expanded) ---------- */
footer.ft{
  background:#0A1612; color:#fff; padding:72px 40px 32px;
}
.ft-top{
  display:grid;
  grid-template-columns: .9fr 3.6fr;
  gap:80px;
  padding-bottom:64px;
  align-items:start;
}
.ft-word{
  display:flex; align-items:center; gap:16px;
  text-decoration:none;
}
.ft-brandline{
  margin-top:16px;
  padding-bottom:28px;
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-weight:600; font-size:25.5px;
  letter-spacing:.16em; text-transform:uppercase;
  color:#fff;
}
.ft-word .ft-mark{
  width:29px; height:auto;
  opacity:.95;
}
.ft-word .ft-wordmark{
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-weight:600; font-size:25.5px;
  letter-spacing:.16em; text-transform:uppercase;
  color:#fff;
}
/* Deep links land under the fixed masthead without this. Scoped to the team
   cards on purpose: the film sections are their own anchor targets and want to
   land flush at the top of the viewport, where their sticky stage pins. */
article.lead[id], article.member[id]{ scroll-margin-top:112px }

.ft-cols{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr)) auto;
  gap:32px 28px;
}
.ft-col{ min-width:0 }
.ft-col .ft-addr br{ display:inline }
.ft-col h4{
  margin:0 0 18px;
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:12.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-pale); font-weight:500;
}
.ft-col a{
  display:block;
  color:rgba(255,255,255,.6);
  font-size:16px; line-height:1.9;
  text-decoration:none;
  transition:color .3s var(--ease);
}
.ft-col a:hover{ color:var(--gold-pale) }
.ft-col .ft-addr{
  margin:0 0 14px;
  color:rgba(255,255,255,.6);
  font-size:15.5px; line-height:1.65;
  font-style:normal;
}
/* Licence colophon — an SFC licence is a credibility asset for this firm, so it
   is set as a ruled colophon line rather than buried in the disclaimer. */
.ft-licence{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 34px;
  margin-top:64px; padding-top:22px;
  border-top:1px solid rgba(201,168,76,.28);
}
.ft-lic-k{
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-pale);
}
.ft-lic-v{
  font-family:'Playfair Display', serif; font-style:italic;
  font-size:16px; color:rgba(255,255,255,.62);
}
.ft-licence + .ft-disc{ margin-top:34px; padding-top:0; border-top:0 }
@media (max-width:720px){ .ft-licence{ gap:6px 20px; margin-top:44px } }

.ft-disc{
  margin-top:0; padding-top:40px;
  border-top:1px solid rgba(201,168,76,.14);
  color:rgba(255,255,255,.55);
  font-size:13px; line-height:1.7; max-width:108ch;
}
.ft-row{
  margin-top:28px; padding-top:20px;
  border-top:1px solid rgba(201,168,76,.08);
  display:flex; justify-content:space-between; align-items:center;
  color:rgba(255,255,255,.4);
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  flex-wrap:wrap; gap:12px;
}
.ft-row a{ color:inherit; text-decoration:none; transition:color .3s }
.ft-row a:hover{ color:var(--gold-pale) }
@media (max-width: 1120px) {
  .ft-cols { grid-template-columns: repeat(2, minmax(0,1fr)); gap:36px 40px; }
  .ft-col .ft-addr{ margin-bottom:14px }
}
@media (max-width: 980px) {
  .ft-top { grid-template-columns: 1fr; gap:40px; padding-bottom:40px; }
}

/* ==========================================================================
   POSITIONING SECTION — cream, editorial, hairline gold line draws in
   ========================================================================== */
.positioning{
  position:relative;
  background:var(--cream);
  padding:180px 0 200px;
  overflow:hidden;
}
.positioning .wrap-narrow{ max-width:880px; position:relative; z-index:2 }
.positioning .gold-line{
  position:absolute; left:0; top:180px;
  height:1px; width:0;
  background:linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
  transition:width 2.4s var(--ease-strong) .3s;
}
.positioning.in .gold-line{ width:100% }
.positioning .eyebrow{ margin-bottom:48px }
.positioning .p-line{
  display:block;
  font-family:'Playfair Display', serif; font-weight:300;
  font-size:clamp(32px, 3vw, 44px); line-height:1.28;
  letter-spacing:-.018em; color:var(--teal);
  margin:0 0 28px; max-width:36ch;
  text-wrap:balance;
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.positioning .p-line em{ font-style:italic; color:var(--gold-ink); font-weight:400 }
.positioning .p-line.accent{ color:var(--gold-ink); font-style:italic; font-weight:400 }
.positioning.in .p-line{ opacity:1; transform:none }
.positioning.in .p-line:nth-of-type(1){ transition-delay:.25s }
.positioning.in .p-line:nth-of-type(2){ transition-delay:.55s }
.positioning.in .p-line:nth-of-type(3){ transition-delay:.85s }
.positioning.in .p-line:nth-of-type(4){ transition-delay:1.20s }
.positioning .p-rule{
  width:60px; height:1px; background:var(--gold);
  margin:56px 0 24px; opacity:0;
  transition:opacity .8s var(--ease) 1.5s, width 1s var(--ease-strong) 1.5s;
}
.positioning.in .p-rule{ opacity:1; width:120px }
.positioning .p-attrib{
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:12.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-mute); opacity:0;
  transition:opacity .8s var(--ease) 1.7s;
}
.positioning.in .p-attrib{ opacity:1 }

/* ==========================================================================
   PEDIGREE — institutional credibility anchor
   Dark teal, count-up numbers, prior-firm logo grid.
   ========================================================================== */
.pedigree{
  background:linear-gradient(180deg, #061611 0%, #08231B 60%, #0A2C22 100%);
  color:#fff; padding:160px 0 180px;
  position:relative; overflow:hidden;
}
.pedigree::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(100% 60% at 50% 0%, rgba(201,168,76,.05), transparent 60%);
  pointer-events:none;
}
.pedigree .wrap{ position:relative; z-index:2 }
.pedigree .ped-head{
  display:grid; grid-template-columns: 1fr 1.2fr;
  gap:80px; align-items:end;
  margin-bottom:100px;
}
.pedigree .ped-head h2{
  font-family:'Playfair Display', serif; font-weight:300;
  font-size:clamp(40px, 4.4vw, 64px); line-height:1.08;
  letter-spacing:-.02em; color:#fff;
  margin:24px 0 0; max-width:16ch;
}
.pedigree .ped-head h2 em{
  font-style:italic; font-weight:400; color:var(--gold-pale);
}
.pedigree .ped-head p{
  margin:0 0 20px; color:rgba(255,255,255,.68);
  font-size:19px; line-height:1.65; max-width:52ch;
}
.pedigree .ped-head p:last-child{ margin-bottom:0 }

/* Count-up number grid */
.ped-stats{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap:1px;
  background:rgba(201,168,76,.14);
  border-top:1px solid rgba(201,168,76,.18);
  border-bottom:1px solid rgba(201,168,76,.18);
}
.ped-stat{
  background:#061611;
  padding:56px 36px 52px;
  position:relative;
}
.ped-stat .tag{
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); margin-bottom:32px;
}
.ped-stat .num{
  font-family:'Playfair Display', serif; font-weight:300;
  font-size:clamp(56px, 6vw, 88px); line-height:1;
  color:#fff; letter-spacing:-.03em;
  display:block; margin-bottom:20px;
}
.ped-stat .num .unit{
  font-style:italic; font-weight:400;
  font-size:.48em; color:var(--gold-pale);
  margin-left:6px; letter-spacing:-.01em;
}
.ped-stat .lbl{
  font-size:19px; line-height:1.7;
  color:rgba(255,255,255,.58);
  max-width:32ch;
}

/* Lineage — combined roster (firms + institutions in one block) */
.ped-firms{ margin-top:140px }

.ped-firms .rost-eye{
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:12px; letter-spacing:.32em; text-transform:uppercase;
  color:rgba(232,207,128,.7);
  padding-bottom:24px;
  border-bottom:1px solid rgba(201,168,76,.22);
  margin-bottom:88px;
  display:flex; align-items:center; gap:14px;
}
.ped-firms .rost-eye::before{
  content:""; width:32px; height:1px; background:var(--gold);
}

.ped-firms .rost-head{
  display:grid; grid-template-columns: 1.4fr 1fr;
  gap:48px; align-items:end;
  margin-bottom:72px;
  padding-bottom:32px;
  border-bottom:1px solid rgba(201,168,76,.22);
}
.ped-firms .rost-head h3{
  font-family:'Playfair Display', serif; font-weight:300;
  font-size:clamp(34px, 4.2vw, 60px); line-height:1.05;
  color:#fff; margin:0; letter-spacing:-.025em;
  display:flex; align-items:baseline; gap:32px;
  flex-wrap:wrap;
}
.ped-firms .rost-num{
  font-family:'Playfair Display', serif; font-weight:300;
  font-size:clamp(56px, 7vw, 96px); line-height:1;
  color:var(--gold-pale); letter-spacing:-.04em;
  white-space:nowrap;
}
.ped-firms .rost-num .rost-x{
  font-style:italic; font-size:.62em; color:rgba(232,207,128,.5);
  margin:0 .12em; vertical-align:.08em;
}
.ped-firms .rost-num sup{
  font-size:.42em; font-weight:400; font-style:italic;
  vertical-align:0.55em; margin-left:2px; color:var(--gold);
}
.ped-firms .rost-stem{
  font-style:normal; max-width:24ch; text-wrap:balance;
}
.ped-firms .rost-stem em{
  font-style:italic; font-weight:400; color:var(--gold-pale);
}
.ped-firms .rost-note{
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:12.5px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(232,207,128,.62);
  text-align:right;
  padding-bottom:12px;
  line-height:1.6;
}

.ped-firms .rost-sub{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:0 0 28px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(201,168,76,.16);
}
.ped-firms .rost-sub--served{ margin-top:72px }
.ped-firms .rost-sub-lbl{
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:13px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(232,207,128,.85); font-weight:500;
}
.ped-firms .rost-sub-ct{
  font-family:'Playfair Display', serif; font-weight:300;
  font-style:italic;
  font-size:20.5px; color:rgba(255,255,255,.55);
  letter-spacing:-.005em;
}
.ped-firms .rost-sub-ct sup{
  font-size:.7em; vertical-align:.4em; margin-left:1px; color:var(--gold);
}

.ped-firms .rost-grid{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap:1px;
  background:rgba(201,168,76,.18);
  border:1px solid rgba(201,168,76,.18);
}
.ped-firms .rost-col{
  background:#08231B;
  padding:32px 28px 36px;
  display:flex; flex-direction:column;
}

.ped-firms .rost-cat{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-bottom:18px;
  border-bottom:1px solid rgba(201,168,76,.22);
  margin-bottom:24px;
}
.ped-firms .rost-cat .cat-lbl{
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(232,207,128,.78); font-weight:500;
}
.ped-firms .rost-cat .cat-ct{
  font-family:'Playfair Display', serif; font-weight:300;
  font-style:italic;
  font-size:20.5px; color:rgba(255,255,255,.55);
  letter-spacing:-.01em;
}
.ped-firms .rost-cat .cat-ct sup{
  font-size:.7em; font-style:italic; vertical-align:0.4em;
  margin-left:1px; color:var(--gold);
}

.ped-firms .rost-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column;
}
.ped-firms .rost-list li{
  font-family:'Playfair Display', serif; font-weight:400;
  font-size:19.5px; line-height:1.35;
  color:rgba(255,255,255,.92);
  letter-spacing:-.005em;
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:color .3s var(--ease, ease), padding-left .35s var(--ease, ease);
  position:relative;
}
.ped-firms .rost-list li:last-child{ border-bottom:none }
.ped-firms .rost-list li::before{
  content:""; position:absolute; left:0; top:50%;
  width:0; height:1px; background:var(--gold);
  transform:translateY(-50%);
  transition:width .35s var(--ease, ease);
}
.ped-firms .rost-list li:hover{
  color:var(--gold-pale);
  padding-left:18px;
}
.ped-firms .rost-list li:hover::before{ width:12px }

.ped-firms .rost-col--more p.rost-rest{
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:15.5px; line-height:1.65; font-style:italic;
  color:rgba(255,255,255,.6);
  margin:0;
  letter-spacing:.005em;
}

.ped-firms .rost-foot{
  margin:48px 0 0;
  padding-top:24px;
  border-top:1px solid rgba(201,168,76,.18);
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:14px; line-height:1.7; font-style:italic;
  color:rgba(255,255,255,.45); letter-spacing:.005em;
  max-width:none; white-space:nowrap;
}

@media (max-width: 980px) {
  .pedigree .ped-head { grid-template-columns: 1fr; gap:32px; margin-bottom:60px; }
  .ped-stats { grid-template-columns: repeat(2, 1fr); }
  .ped-stat { padding:40px 24px; }
  .ped-firms .rost-head{ grid-template-columns:1fr; gap:18px; align-items:start }
  .ped-firms .rost-note{ text-align:left }
  .ped-firms .rost-grid{ grid-template-columns:repeat(2, 1fr) }
}
@media (max-width: 600px) {
  .ped-firms .rost-grid{ grid-template-columns:1fr }
  .ped-firms .rost-head h3{ flex-direction:column; gap:12px; align-items:flex-start }
}

/* ==========================================================================
   PARTNER WITH US — three tiers
   ========================================================================== */
.partner{
  background:var(--cream);
  padding:160px 0 180px;
  position:relative;
}
.partner .wrap{ position:relative; z-index:2 }
.partner .p-head{
  max-width:720px; margin:0 auto 88px; text-align:center;
}
.partner .p-head .eyebrow{ margin-bottom:22px; justify-content:center }
.partner .p-head .eyebrow::before{ display:none }
.partner .p-head h2{
  font-family:'Playfair Display', serif; font-weight:300;
  font-size:clamp(36px, 4vw, 56px); line-height:1.08;
  letter-spacing:-.02em; color:var(--teal);
  margin:0 0 22px; text-wrap:balance;
}
.partner .p-head h2 em{ font-style:italic; font-weight:400; color:var(--gold-ink) }
.partner .p-head p{
  color:var(--ink-soft); font-size:19.5px; line-height:1.65;
  margin:32px 0 0; max-width:56ch; margin-inline:auto;
}
.tier-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:24px; margin-bottom:80px;
}
.tier{
  background:#FBF8F1;
  padding:48px 38px 40px;
  border-top:1px solid rgba(201,168,76,.55);
  position:relative;
  display:flex; flex-direction:column;
  transition:transform .45s var(--ease-strong), box-shadow .45s var(--ease-strong);
}
.tier:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 60px -32px rgba(0,77,61,.28);
}
.tier.featured{
  background:var(--teal);
  color:#fff;
  border-top-color:var(--gold);
}
.tier .tier-n{
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-ink); margin-bottom:20px; font-weight:500;
}
.tier.featured .tier-n{ color:var(--gold-pale) }
.tier h3{
  font-family:'Playfair Display', serif; font-weight:400;
  font-size:32px; line-height:1.18;
  color:var(--teal); margin:0 0 18px; letter-spacing:-.008em;
}
.tier.featured h3{ color:#fff }
.tier .desc{
  font-size:19px; line-height:1.65; color:var(--ink-soft);
  margin:0 0 26px; flex:1;
}
.tier.featured .desc{ color:rgba(255,255,255,.75) }
.tier ul{
  list-style:none; padding:0; margin:0 0 32px;
  font-size:19px; line-height:1.75;
  color:var(--ink);
}
.tier.featured ul{ color:rgba(255,255,255,.85) }
.tier ul li{
  padding-left:18px; position:relative;
  margin-bottom:6px;
}
.tier ul li::before{
  content:""; position:absolute; left:0; top:11px;
  width:8px; height:1px; background:var(--gold);
}
.tier.featured ul li::before{ background:var(--gold-pale) }
.tier .tier-cta{
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:12.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-ink); font-weight:500;
  padding-top:20px; border-top:1px solid rgba(201,168,76,.3);
  text-decoration:none;
  display:flex; justify-content:space-between; align-items:center;
  transition:color .3s var(--ease);
}
.tier .tier-cta .arr{ transition:transform .4s var(--ease-strong) }
.tier:hover .tier-cta .arr{ transform:translateX(6px) }
.tier.featured .tier-cta{
  color:var(--gold-pale);
  border-top-color:rgba(232,207,128,.28);
}

/* Contact form */
.partner-form{
  max-width:780px; margin:0 auto;
  padding:64px 0 0;
  border-top:1px solid rgba(201,168,76,.25);
}
.partner-form .form-head{
  text-align:center; margin-bottom:48px;
}
.partner-form .form-head h3{
  font-family:'Playfair Display', serif; font-weight:400;
  font-size:clamp(27.5px,2.2vw,32px); color:var(--teal);
  margin:0 0 10px; letter-spacing:-.01em;
}
.partner-form .form-head p{
  color:var(--ink-soft); font-size:19px; margin:0;
}
.form-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:22px 28px;
}
.form-grid .full{ grid-column: 1 / -1 }
.form-grid label{
  display:block;
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:#686452; margin-bottom:8px; font-weight:500;
}
.form-grid input,
.form-grid textarea,
.form-grid select{
  width:100%; padding:14px 16px;
  background:#FBF8F1;
  border:1px solid rgba(201,168,76,.32);
  border-radius:2px;
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:17.5px; color:var(--ink);
  outline:none; transition:border-color .3s var(--ease), background .3s var(--ease);
}
.form-grid input:focus,
.form-grid textarea:focus,
.form-grid select:focus{
  border-color:var(--gold);
  background:#fff;
}
.form-grid textarea{ min-height:120px; resize:vertical }
.form-compliance{
  display:flex; gap:12px; align-items:flex-start;
  padding:18px; background:rgba(201,168,76,.06);
  border:1px solid rgba(201,168,76,.18);
  margin:28px 0 32px;
}
.form-compliance input{ flex-shrink:0; margin-top:3px }
.form-compliance label{
  margin:0; text-transform:none; letter-spacing:.01em;
  font-size:15px; color:var(--ink-soft); line-height:1.65;
  font-family:'Be Vietnam Pro', system-ui, sans-serif; font-weight:400;
}
.form-submit{
  display:flex; justify-content:center;
}
@media (max-width: 980px) {
  .tier-grid { grid-template-columns: 1fr; gap:20px; margin-bottom:48px; }
  .form-grid { grid-template-columns: 1fr; gap:18px; }
}

/* ---------- Reveal animations — FAIL OPEN: content is visible by default; JS adds .pre only to
   below-fold elements right before observing them, so a dead observer costs an animation, never content ---------- */
.reveal{
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.pre{ opacity:0; transform:translateY(30px) }
.reveal.in{ opacity:1; transform:none }

.stagger > *{
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.stagger.pre > *{ opacity:0; transform:translateY(22px) }
.stagger.in > *{ opacity:1; transform:none }
.stagger.in > *:nth-child(1){ transition-delay:.05s }
.stagger.in > *:nth-child(2){ transition-delay:.12s }
.stagger.in > *:nth-child(3){ transition-delay:.19s }
.stagger.in > *:nth-child(4){ transition-delay:.26s }
.stagger.in > *:nth-child(5){ transition-delay:.33s }
.stagger.in > *:nth-child(6){ transition-delay:.40s }
.stagger.in > *:nth-child(7){ transition-delay:.47s }
.stagger.in > *:nth-child(8){ transition-delay:.54s }

/* ---------- Shared heritage band (home + other pages) ---------- */
.heritage-band{
  background:var(--teal-deep); color:#fff; padding:76px 0;
  border-top:1px solid rgba(201,168,76,.15);
  border-bottom:1px solid rgba(201,168,76,.15);
}
.heritage-band .head{
  display:flex; justify-content:space-between; align-items:end;
  gap:40px; margin-bottom:40px; flex-wrap:wrap;
}
.heritage-band .head p{
  max-width:42ch; color:rgba(255,255,255,.62); font-size:16.5px; line-height:1.7; margin:0;
}
.heritage-grid{
  display:grid; grid-template-columns:repeat(5, 1fr);
  gap:1px; background:rgba(201,168,76,.14);
  border:1px solid rgba(201,168,76,.14);
}
.heritage-grid .cell{
  background:var(--teal-deep); padding:26px 22px;
  display:grid; place-items:center; min-height:92px;
  color:rgba(255,255,255,.78);
  font-family:'Playfair Display', serif; font-weight:400;
  font-size:18px; letter-spacing:.02em; text-align:center;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.heritage-grid .cell:hover{ background:#003328; color:var(--gold-pale) }

/* ==========================================================================
   HOME — Capabilities ("What We Do") · Asia tech tilt
   ========================================================================== */
.capabilities{
  background:var(--cream);
  padding:140px 0 130px;
  position:relative;
}
.capabilities::before{
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:1px; height:64px; background:var(--gold); opacity:.55;
}
.cap-head{ max-width:920px; margin:0 auto 70px; text-align:left }
.cap-head h2{ margin:18px 0 0; color:var(--teal) }
.cap-head .cap-lede{
  margin-top:28px; max-width:64ch;
  font-size:20.5px; line-height:1.65; color:var(--ink-soft);
  text-wrap:pretty;
}
.cap-head .cap-lede em{
  font-family:'Playfair Display', serif; font-style:italic;
  color:var(--gold-ink); font-weight:500;
}
.cap-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:1px;
  background:rgba(0,77,61,.14);
  border:1px solid rgba(0,77,61,.14);
}
.cap-card{
  background:var(--bone);
  padding:36px 32px 38px;
  position:relative;
  display:flex; flex-direction:column;
}
.cap-card .cap-num{
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:12.5px; letter-spacing:.3em; color:var(--gold-ink);
  margin-bottom:18px;
}
.cap-card .cap-tag{
  position:absolute; top:36px; right:32px;
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-ink);
  padding:4px 10px; border:1px solid rgba(201,168,76,.5);
  border-radius:2px;
}
.cap-card h3{
  font-family:'Playfair Display', serif; font-weight:400;
  font-size:27.5px; line-height:1.2; color:var(--teal);
  margin:0 0 14px; letter-spacing:-0.01em;
}
.cap-card p{
  font-size:17.5px; line-height:1.65; color:var(--ink-soft);
  margin:0 0 14px; text-wrap:pretty;
}
.cap-card--lead{
  background:#FBF6EB;
  border-left:3px solid var(--gold);
  padding-left:36px;
}
.cap-card--lead h3{ font-size:32px }
.cap-points{
  list-style:none; padding:0; margin:14px 0 0;
  border-top:1px solid rgba(0,77,61,.12);
}
.cap-points li{
  padding:11px 0;
  border-bottom:1px solid rgba(0,77,61,.08);
  font-size:16px; color:var(--ink-soft);
  display:flex; align-items:baseline; gap:10px;
}
.cap-points li::before{
  content:"·"; color:var(--gold); font-weight:700; font-size:20.5px; line-height:1;
}

.cap-tech-strip{
  margin-top:60px;
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1px; background:rgba(0,77,61,.14);
  border:1px solid rgba(0,77,61,.14);
}
.cts-stat{
  background:var(--cream);
  padding:34px 30px;
  display:flex; flex-direction:column; gap:10px;
}
.cts-num{
  font-family:'Playfair Display', serif; font-weight:300;
  font-size:54px; line-height:1; color:var(--teal);
  letter-spacing:-0.02em;
}
.cts-num .cts-unit{
  font-size:27.5px; color:var(--gold-ink); margin-left:2px;
  font-style:italic; font-weight:400;
}
.cts-lbl{
  font-size:15.5px; line-height:1.65; color:var(--ink-soft);
  max-width:36ch;
}

/* ==========================================================================
   HOME — Contrast ("What we are / What we are not")
   ========================================================================== */
.contrast{
  background:var(--bone);
  padding:140px 0 130px;
  position:relative;
}
.contrast::before{
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:1px; height:64px; background:var(--gold); opacity:.55;
}
.ctr-head{ max-width:920px; margin:0 auto 64px }
.ctr-head h2{ margin:18px 0 0; color:var(--teal) }
.ctr-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:0;
  border-top:1px solid rgba(0,77,61,.18);
  border-bottom:1px solid rgba(0,77,61,.18);
}
.ctr-col{
  padding:48px 44px 52px;
}
.ctr-are{ border-right:1px solid rgba(0,77,61,.18) }
.ctr-not{ background:#F1ECE0 }
.ctr-tag{
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:12.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-ink);
  margin-bottom:30px;
}
.ctr-not .ctr-tag{ color:var(--ink-mute) }
.ctr-col ul{
  list-style:none; padding:0; margin:0;
}
@media (min-width:981px){
  .ctr-col{ display:flex; flex-direction:column }
  .ctr-col .ctr-tag{ flex:0 0 auto }
  .ctr-col ul{ flex:1; display:grid; grid-auto-rows:1fr }
}
.ctr-col li{
  padding:22px 0;
  border-top:1px dashed rgba(0,77,61,.16);
}
.ctr-col li:last-child{ border-bottom:1px dashed rgba(0,77,61,.16) }
.ctr-not li{ border-top-color:rgba(74,74,68,.22) }
.ctr-not li:last-child{ border-bottom-color:rgba(74,74,68,.22) }
.ctr-lead{
  font-family:'Playfair Display', serif; font-weight:400;
  font-size:24px; line-height:1.25; color:var(--teal);
  letter-spacing:-0.01em; margin-bottom:6px;
}
.ctr-not .ctr-lead{ color:var(--ink); font-style:italic; opacity:.7 }
.ctr-col li p{
  margin:0; font-size:19px; line-height:1.7; color:var(--ink-soft);
}
.ctr-not li p{ color:var(--ink-mute) }

/* ==========================================================================
   HOME — Quarterly Note
   ========================================================================== */
.qnote{
  background:var(--teal-ink);
  color:#fff;
  padding:140px 0 130px;
  position:relative;
}
.qnote::before{
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:1px; height:64px; background:var(--gold);
}
.qn-head{ max-width:920px; margin:0 auto 56px }
.qn-head h2{ margin:18px 0 0; color:#fff }
.qn-head h2 em{ color:var(--gold-pale) }
.qn-lede{
  margin-top:24px; max-width:60ch;
  font-size:19.5px; line-height:1.65; color:rgba(255,255,255,.7);
}
.qn-card{
  background:linear-gradient(180deg, #0E2A22 0%, #0A2017 100%);
  border:1px solid rgba(201,168,76,.22);
  padding:54px 56px;
  position:relative;
  max-width:1080px; margin:0 auto;
}
.qn-card::before{
  content:""; position:absolute; left:0; top:0;
  width:3px; height:64px; background:var(--gold);
}
.qn-meta{
  display:flex; align-items:center; gap:14px;
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-pale);
  margin-bottom:24px;
}
.qn-meta .qn-dot{ color:rgba(201,168,76,.5) }
.qn-meta span{ white-space:nowrap }
.qn-title{
  font-family:'Playfair Display', serif; font-weight:300;
  font-size:clamp(32px, 3.2vw, 40px); line-height:1.15;
  letter-spacing:-0.02em;
  color:#fff; margin:0 0 22px;
  max-width:24ch; text-wrap:balance;
}
.qn-excerpt{
  font-size:19.5px; line-height:1.7; color:rgba(255,255,255,.78);
  max-width:64ch; margin:0 0 32px; text-wrap:pretty;
}
.qn-foot{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
  padding-top:24px; border-top:1px solid rgba(201,168,76,.18);
}
.qn-cta{
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:15px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-pale);
  text-decoration:none;
  display:inline-flex; align-items:center; gap:10px;
  padding-bottom:4px;
  border-bottom:1px solid var(--gold);
  transition:color .3s var(--ease), gap .3s var(--ease);
}
.qn-cta:hover{ color:#fff; gap:14px }
.qn-cta .arr{ transition:transform .3s var(--ease) }
.qn-cta:hover .arr{ transform:translateX(4px) }
.qn-pages{
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:12.5px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.qn-archive{
  margin-top:36px; max-width:1080px; margin-left:auto; margin-right:auto;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:rgba(201,168,76,.18);
  border:1px solid rgba(201,168,76,.18);
}
.qn-arch-item{
  display:block; padding:24px 26px; text-decoration:none;
  background:rgba(255,255,255,.02);
  transition:background .3s var(--ease);
}
.qn-arch-item:hover{ background:rgba(201,168,76,.06) }
.qn-arch-vol{
  display:block;
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:11.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-pale); opacity:.7;
  margin-bottom:8px;
}
.qn-arch-title{
  display:block;
  font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
  font-size:18.5px; line-height:1.35; color:rgba(255,255,255,.86);
  letter-spacing:-0.005em;
}

/* ---------- Nav: roll-up link labels, progress hairline, light theme ---------- */
.nav-links a .nl{
  display:block; position:relative; overflow:hidden; line-height:1.6;
}
.nav-links a .nl-a, .nav-links a .nl-b{
  display:block;
  transition:transform .45s var(--ease-strong);
}
.nav-links a .nl-b{
  position:absolute; inset:0;
  transform:translateY(115%);
  color:var(--gold-pale);
}
.nav-links a:hover .nl-a{ transform:translateY(-115%) }
.nav-links a:hover .nl-b{ transform:translateY(0) }

.nav-progress{
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  pointer-events:none;
}
.nav-progress i{
  display:block; height:100%;
  background:linear-gradient(90deg, var(--gold), var(--gold-pale));
  transform:scaleX(0); transform-origin:left;
}

.brand .mark{ transition:filter .4s var(--ease) }
.brand:hover .mark{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)) drop-shadow(0 0 12px rgba(201,168,76,.55));
}

/* light theme — applied over light sections by the adaptive background */
/* On a dark ground the ::before gradient is what keeps the masthead legible as
   content scrolls beneath it. On a light ground that gradient is switched off —
   which left the nav completely transparent, so cream-page content ran straight
   under the wordmark and links. It needs its own scrim, in cream. */
.nav.light{ border-bottom-color:transparent;
  background:linear-gradient(180deg,
    rgba(245,240,232,.97) 0%, rgba(245,240,232,.94) 58%, rgba(245,240,232,.78) 100%);
  -webkit-backdrop-filter:saturate(150%) blur(9px);
  backdrop-filter:saturate(150%) blur(9px) }
.nav.light.scrolled{ background:linear-gradient(180deg,
    rgba(245,240,232,.98) 0%, rgba(245,240,232,.96) 62%, rgba(245,240,232,.86) 100%) }
.nav.light .nav-links a{ color:rgba(24,38,32,.62) }
.nav.light .nav-links a:hover{ color:#101C18 }
.nav.light .nav-links a .nl-b{ color:var(--gold-ink) }
.nav.light .nav-links a::after{ background:#9A7B3F }
.nav.light .nav-links a:not(.nav-cta)::before{ color:rgba(154,123,63,.72) }
.nav.light .nav-mobile span{ background:#1A1A1A }
.nav.light .brand .brand-line{
  color:rgba(24,38,32,.55); border-left-color:rgba(154,123,63,.42) }
.nav.light .brand .mark{ filter:brightness(.66) }
.nav.light .nav-links a.nav-cta{
  color:#7A6224; border-left-color:rgba(154,123,63,.42);
}
.nav.light .nav-links a.nav-cta:hover{ background:none; color:#4A3A12 }

/* ---------- Footer: quiet imprint ----------
   Understated by intent. The name sits at reading scale — a firm that shouts
   its own name reads as one that needs to be remembered. Hierarchy comes from
   space and hairlines, never from scale. */
footer.ft{ position:relative; overflow:hidden }
.ft-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:48px;
  padding-bottom:40px; margin-bottom:48px;
  border-bottom:1px solid rgba(201,168,76,.14);
}
/* The house wordmark: Be Vietnam Pro, bold, wide-tracked, uppercase — how the
   name is actually set (cf. gatelanes.com). Not the display serif. */
.ft-name{
  font-family:'Be Vietnam Pro', system-ui, sans-serif; font-weight:700;
  font-size:17px; letter-spacing:.3em; text-transform:uppercase;
  color:#F7F4EC;
}
.ft-tag{
  margin-top:12px;
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:11.5px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,255,255,.40);
}
.ft-desks{ display:flex; flex-direction:column; align-items:flex-end; gap:16px }
.ft-clocks{ display:flex; gap:30px; flex-wrap:wrap }
.ft-clock{ display:flex; align-items:baseline; gap:12px }
.ft-clock .c{
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:11.5px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(232,207,128,.75);
}
.ft-clock .t{
  font-family:'Playfair Display', serif; font-style:italic;
  font-size:16px; color:rgba(255,255,255,.78);
  font-variant-numeric:tabular-nums;
}
.ft-top-btn{
  background:none; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:14px;
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,255,255,.55); padding:6px 0;
  transition:color .3s var(--ease);
}
.ft-top-btn:hover{ color:#fff }
.ft-top-btn .arrline{
  width:36px; height:1px; background:var(--gold);
  position:relative;
  transition:width .4s var(--ease-strong);
}
.ft-top-btn .arrline::after{
  content:""; position:absolute; right:-1px; top:-3.5px;
  width:7px; height:7px;
  border-top:1px solid var(--gold); border-right:1px solid var(--gold);
  transform:rotate(-45deg);
}
.ft-top-btn:hover .arrline{ width:58px }
@media (max-width:980px){
  .ft-head{ flex-direction:column; align-items:flex-start; gap:28px; padding-bottom:32px; margin-bottom:34px }
  .ft-desks{ align-items:flex-start }
  .ft-meta{ margin-bottom:44px }
  .ft-clocks{ gap:22px }
}



/* ---------- Responsive ---------- */
@media (max-width:980px){
  .nav-links{ display:none }
  .nav-mobile{ display:flex }
  .wrap, .wrap-narrow{ padding:0 22px }
  .nav{ padding:18px 22px }
  .nav.scrolled{ padding:14px 22px }
  .sec{ padding:96px 0 }
  .page-hero{ padding:140px 0 70px }
  .heritage-grid{ grid-template-columns:repeat(2, 1fr) }
  footer.ft{ padding:60px 24px 32px }

  .capabilities, .contrast, .qnote{ padding:90px 0 80px }
  .cap-grid{ grid-template-columns:1fr }
  .cap-card--lead{ border-left:none; border-top:3px solid var(--gold) }
  .cap-card .cap-tag{ position:static; margin-bottom:12px; align-self:flex-start }
  .cap-tech-strip{ grid-template-columns:1fr; margin-top:36px }
  .ctr-grid{ grid-template-columns:1fr }
  .ctr-are{ border-right:none; border-bottom:1px solid rgba(0,77,61,.18) }
  .ctr-col{ padding:36px 24px }
  .qn-card{ padding:36px 28px }
  .qn-archive{ grid-template-columns:1fr }
}

/* ---- Legibility floors (type scale-up) ---- */
.lg-k,.al-k,.cw-plabel,.mp-k,.dl-tag,.p-tag,.pf-label{font-size:12.5px !important}
.lg-note,.aud-note,.cw-selcap,.cw-dealk,.regband p,.form-compliance{font-size:13px !important;letter-spacing:.18em}
#posMatrix .sub-lbl,#posMatrix .gl-sub{font-size:13px !important}


/* ---------- Nav: the imprint variant  (html[data-nav="imprint"]) ------------
   The aloof reading, kept switchable. The chrome names the firm and offers one
   word; everything else lives behind a full-frame index, revealed only when
   asked for. A firm that lists three destinations across the top of a film is
   selling; one that says "Index" is not. */
[data-nav="imprint"] .nav-links{ display:none }
[data-nav="imprint"] .nav-mobile{
  display:inline-flex; align-items:center; width:auto; height:auto; padding:8px 0;
}
[data-nav="imprint"] .nav-mobile span{ display:none }
[data-nav="imprint"] .nav-mobile::after{
  content:"Index";
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(247,244,236,.80);
  padding-bottom:7px; border-bottom:1px solid rgba(201,168,76,.55);
  transition:color .3s var(--ease), border-color .3s var(--ease), letter-spacing .4s var(--ease-strong);
}
[data-nav="imprint"] .nav-mobile:hover::after{
  color:#fff; border-bottom-color:var(--gold); letter-spacing:.34em }
[data-nav="imprint"].menu-open .nav-mobile::after{ content:"Close" }
[data-nav="imprint"] .nav.light .nav-mobile::after{
  color:rgba(24,38,32,.78); border-bottom-color:rgba(154,123,63,.55) }

/* the index itself — left-set, at display scale, the page still a presence behind */
[data-nav="imprint"] .nav-overlay{
  /* deep enough that the picture reads but the type underneath does not ghost
     through and muddy the index */
  background:rgba(6,20,15,.945);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  align-items:flex-start; justify-content:center; gap:0; padding:0 44px;
}
[data-nav="imprint"] .nav-overlay a{
  font-weight:300; font-size:clamp(32px,4.2vw,60px); line-height:1.3;
  color:rgba(247,244,236,.90); transition:color .3s var(--ease);
}
[data-nav="imprint"] .nav-overlay a:hover{ color:#E8CF80 }
[data-nav="imprint"] .nav-overlay a.nav-cta{
  margin:38px 0 0; padding:0; border:0; border-radius:0;
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(232,207,128,.80);
}
[data-nav="imprint"] .nav-overlay a.nav-cta:hover{ color:#F3E4B4 }
@media (max-width:760px){
  [data-nav="imprint"] .nav-overlay{ padding:0 24px }
}

/* ---------- Touch targets ----------
   44px is a finger guideline, not a pointer one, so this is scoped to touch:
   the desktop layout keeps the spacing it was designed with. Measured at
   390x844 -- footer links were 30px, the brand 38, "Back to top" 27.
   Inline links inside a sentence are left alone on purpose; padding those
   would break the line they sit in. */
@media (hover:none) and (pointer:coarse){
  .ft-col a{ min-height:44px; display:flex; align-items:center }
  .brand{ min-height:44px }
  .ft-top-btn{ min-height:44px }
}

/* ---------- Phones: a smaller bar ----------
   80px of fixed chrome on an 812px screen is a tenth of the page given to a
   mark and a menu button, and it is subtracted from every held frame beneath
   it. 18px of padding around a 38px mark becomes 11px around 28px: 50px, a
   saving of 30. The mark keeps its 28:38 proportion, and the menu button keeps
   a 44px tap target while drawing smaller. */
@media (max-width:640px){
  .nav{ padding:6px 22px }
  .nav.scrolled{ padding:6px 22px }
  .brand .mark{ width:21px; height:28px }
  .nav-mobile{ width:44px; height:44px; margin-right:-10px;
    align-items:center; justify-content:center }

  /* Solid, not a wash. On a desktop the bar floats over film with a gradient
     scrim under it, which works because there is room for the gradient to fade
     out. On a phone the bar is 56px tall and the film runs straight through it:
     the mark and the menu button sat on whatever happened to be behind them --
     a sail, a bright sky, a face. A flat ground with a hairline under it is
     what a phone expects anyway, and it stops the chrome competing with the
     picture it sits on. */
  .nav{ background:var(--teal-black);
    border-bottom:1px solid rgba(201,168,76,.16) }
  .nav.scrolled{ background:var(--teal-black) }
  .nav::before{ display:none }

  /* the same, in reverse, over the cream sections */
  .nav.light, .nav.light.scrolled{
    background:var(--cream);
    border-bottom-color:rgba(154,123,63,.20);
    -webkit-backdrop-filter:none; backdrop-filter:none }
}


/* ---- Simplified Chinese: chrome-level corrections -------------------------
   Scoped to the CN edition by document language, so the English pages are
   untouched. Page-level Chinese typography still lives in each /cn/ page.

   .26em is tracking tuned for Latin caps, which are narrow and need opening
   up. Han glyphs are full-width and carry their own sidebearings, so the same
   value sets 返回顶部 too loose. uppercase is a no-op on Han. */
html[lang^="zh"] .ft-top-btn{ letter-spacing:.14em; text-transform:none }

/* The wordmark is set as tracked-out Latin caps. 阁丰 is two full-width
   glyphs with their own sidebearings, so .3em drives them apart; uppercase
   does nothing to Han. The footer's name is the same mark at a larger size. */
html[lang^="zh"] .brand-line{ letter-spacing:.16em; text-transform:none; font-size:12px }
html[lang^="zh"] .ft-name{ letter-spacing:.08em; text-transform:none }