/* ============================================================
   QANOPY GROUP — Homepage v1
   Palette: deep forest-navy · warm gold · circuit cyan
   Type: Spectral (display serif) · Archivo (UI/body)
   ============================================================ */

:root{
  --ink:        #0A1424;
  --ink-deep:   #071019;
  --surface:    rgba(255,255,255,.032);
  --surface-2:  rgba(255,255,255,.055);
  --hairline:   rgba(255,255,255,.09);
  --text:       #EAF1F8;
  --muted:      #A9B8CB;
  --faint:      #7E8FA6;
  --gold:       #E2A44B;
  --gold-hi:    #F2BC6C;
  --gold-soft:  rgba(226,164,75,.35);
  --cyan:       #5FD3E4;
  --cyan-soft:  rgba(95,211,228,.45);
  --serif:      'Spectral', Georgia, 'Times New Roman', serif;
  --sans:       'Archivo', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --shell:      1180px;
  --radius:     18px;
  --ease:       cubic-bezier(.22,.61,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--ink);
  color:var(--text);
  font:400 1.02rem/1.75 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* film-grain overlay */
body::after{
  content:'';
  position:fixed; inset:0;
  pointer-events:none; z-index:60;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection{ background:var(--gold); color:#14100A; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
sup{ font-size:.55em; }

.shell{ max-width:var(--shell); margin-inline:auto; padding-inline:26px; }

/* ---------- type ---------- */
h1,h2{ font-family:var(--serif); font-weight:300; letter-spacing:.005em; }
h1{ font-size:clamp(2.55rem, 5vw, 4.15rem); line-height:1.12; }
h1 em{ font-style:italic; color:var(--gold-hi); }
h2{ font-size:clamp(1.95rem, 3.4vw, 2.9rem); line-height:1.18; }
h3{ font-family:var(--serif); font-weight:500; }

.kicker{
  display:flex; align-items:center; gap:13px;
  font:600 .76rem/1 var(--sans);
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold); margin-bottom:22px;
}
.kicker-rule{ width:34px; height:1px; background:var(--gold); }
.arc{ width:44px; flex:none; }
.arc path{ fill:none; stroke:var(--gold); stroke-width:2.6; stroke-linecap:round; }

.section{ padding:clamp(84px, 9.5vw, 128px) 0; position:relative; }
.section-head{ max-width:720px; margin-bottom:clamp(44px, 5vw, 64px); }
.section-sub{ color:var(--muted); margin-top:18px; font-size:1.06rem; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font:600 .95rem/1 var(--sans); letter-spacing:.01em;
  padding:16px 30px; border-radius:999px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease),
             border-color .3s, color .3s, background-color .3s;
  will-change:transform;
}
.btn .arrow{ font-family:var(--sans); transition:transform .3s var(--ease); }
.btn:hover .arrow{ transform:translateX(3px); }
.btn-ghost:hover .arrow{ transform:translateY(3px); }

.btn-gold{
  background:linear-gradient(135deg, var(--gold-hi), #D8912E);
  color:#171106;
  box-shadow:0 10px 28px rgba(216,145,46,.22);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(216,145,46,.32); }

.btn-ghost{ color:var(--text); border:1px solid var(--hairline); }
.btn-ghost:hover{ border-color:var(--gold-soft); color:var(--gold-hi); }

.btn-outline{ color:var(--gold-hi); border:1px solid var(--gold-soft); }
.btn-outline:hover{ background:rgba(226,164,75,.09); transform:translateY(-2px); }

.btn-sm{ padding:12px 22px; font-size:.86rem; }
.btn-lg{ padding:19px 40px; font-size:1.04rem; }

a:focus-visible,button:focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color .35s, backdrop-filter .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(7,16,25,.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom-color:var(--hairline);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.brand img{ height:42px; width:auto; }

.main-nav{ display:flex; align-items:center; gap:34px; }
.main-nav > a{
  font:500 .93rem/1 var(--sans); color:#C6D2E2;
  text-shadow:0 1px 12px rgba(7,16,25,.8);
  padding:8px 0; position:relative; transition:color .25s;
}
.main-nav > a::after{
  content:''; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.main-nav > a:hover{ color:var(--text); }
.main-nav > a:hover::after{ transform:scaleX(1); }

.nav-extra{ display:flex; align-items:center; gap:16px; margin-left:10px; }
.lang-pill{
  font:600 .8rem/1 var(--sans); color:var(--muted);
  border:1px solid var(--hairline); border-radius:999px;
  padding:9px 14px; transition:border-color .25s, color .25s;
}
.lang-pill:hover{ border-color:var(--gold-soft); color:var(--gold-hi); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; padding:10px; cursor:pointer; z-index:120;
}
.nav-toggle span{
  width:24px; height:2px; background:var(--text);
  transition:transform .3s var(--ease), opacity .3s;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:140px 0 90px;
  overflow:hidden;
  background:
    radial-gradient(1100px 520px at 86% -10%, rgba(95,211,228,.07), transparent 60%),
    var(--ink);
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{
  position:absolute; top:-4%; right:-4%;
  height:110%; width:auto; min-width:52%;
  object-fit:cover; object-position:center;
  -webkit-mask-image:linear-gradient(to left, #000 58%, transparent 97%);
          mask-image:linear-gradient(to left, #000 58%, transparent 97%);
  animation:heroDrift 26s var(--ease) infinite alternate;
}
@keyframes heroDrift{
  from{ transform:scale(1) translateY(0); }
  to{   transform:scale(1.055) translateY(-1.4%); }
}
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(7,16,25,.92), rgba(7,16,25,.38) 12%, transparent 24%),
    linear-gradient(90deg, var(--ink) 12%, rgba(10,20,36,.82) 34%, rgba(10,20,36,.12) 62%, rgba(10,20,36,.30) 100%),
    linear-gradient(to top, rgba(10,20,36,.55), transparent 34%);
}
.hero-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(620px 420px at 71% 30%, rgba(242,188,108,.10), transparent 65%),
    radial-gradient(700px 420px at 62% 96%, rgba(95,211,228,.10), transparent 60%);
}
.hero-fade{
  position:absolute; left:0; right:0; bottom:0; height:160px;
  background:linear-gradient(to bottom, transparent, var(--ink));
}
.hero-inner{ position:relative; z-index:2; width:100%; }
.hero-copy{ max-width:648px; }
.hero .lede{
  color:var(--muted); font-size:1.13rem; line-height:1.8;
  margin-top:26px; max-width:600px;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:38px; }

.hero-stats{
  list-style:none; display:flex; flex-wrap:wrap; gap:18px 46px;
  margin-top:52px; padding-top:30px;
  border-top:1px solid var(--hairline);
}
.hero-stats strong{
  display:block; font:500 1.42rem/1.2 var(--serif); color:var(--text);
}
.hero-stats span{
  display:block; margin-top:5px;
  font-size:.82rem; color:var(--faint); letter-spacing:.02em;
}

/* ============================================================
   LOGO STRIP
   ============================================================ */
.logostrip{
  padding:46px 0 42px;
  border-block:1px solid var(--hairline);
  background:rgba(255,255,255,.014);
}
.strip-label{
  text-align:center; font:600 .72rem/1 var(--sans);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--faint); margin-bottom:30px;
}
.logo-grid{
  list-style:none;
  display:flex; flex-wrap:wrap; justify-content:center;
  align-items:center; gap:26px 54px;
}
.logo-grid img{
  height:26px; width:auto;
  opacity:.52; transition:opacity .3s;
}
.logo-grid li:hover img{ opacity:.95; }
/* per-mark optical sizing */
.logo-grid img[src*="yanmar"]{ height:15px; }
.logo-grid img[src*="sony"]{ height:17px; }
.logo-grid img[src*="honda"]{ height:30px; }
.logo-grid img[src*="sri"]{ height:30px; }
.logo-grid img[src*="hortifrut"]{ height:32px; }
.logo-grid img[src*="logtrade"]{ height:20px; }
.logo-grid img[src*="ditto"]{ height:18px; }
.logo-grid img[src*="synapse"]{ height:22px; }

/* ============================================================
   ABOUT
   ============================================================ */
.grid-2{
  display:grid; grid-template-columns:1.12fr .88fr;
  gap:clamp(44px, 6vw, 84px); align-items:start;
}
.about p{ color:var(--muted); margin-top:18px; max-width:56ch; }
.about h2 + p{ color:var(--text); font-size:1.1rem; margin-top:24px; }
.gold-em{ font-family:var(--serif); font-style:italic; color:var(--gold-hi); font-size:1.05em; }

.who-panel{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--hairline); border-radius:var(--radius);
  padding:34px 36px 28px;
  position:relative; overflow:hidden;
}
.who-panel::before{
  content:''; position:absolute; top:0; left:36px; right:36px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}
.panel-title{
  font:600 .74rem/1 var(--sans); letter-spacing:.19em;
  text-transform:uppercase; color:var(--gold); margin-bottom:20px;
}
.panel-block + .panel-block{ margin-top:28px; }
.panel-block h3{
  font:600 .74rem/1 var(--sans); letter-spacing:.15em;
  text-transform:uppercase; color:var(--faint); margin-bottom:6px;
}
.who-panel ul{ list-style:none; }
.who-panel li{
  display:flex; align-items:baseline; gap:12px;
  padding:10px 0; color:var(--muted);
  border-top:1px solid rgba(255,255,255,.055);
  font-size:.98rem;
}
.who-panel li:first-child{ border-top:0; }
.who-panel li::before{
  content:''; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--gold); transform:translateY(-2px);
}

/* ============================================================
   METHOD — THE QANOPY MODEL
   ============================================================ */
.method{
  background:
    radial-gradient(900px 480px at 50% 8%, rgba(95,211,228,.05), transparent 62%),
    var(--ink-deep);
  border-block:1px solid var(--hairline);
}
.method .section-head{ margin-inline:auto; text-align:center; }
.method .kicker{ justify-content:center; }

.model-flow{
  display:grid;
  grid-template-columns:1fr 84px 1fr 84px 1fr;
  align-items:stretch; gap:6px;
}
.model-stage{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--hairline); border-radius:var(--radius);
  padding:30px 28px 26px;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.model-stage:hover{
  transform:translateY(-5px);
  border-color:rgba(95,211,228,.35);
  box-shadow:0 22px 48px rgba(0,0,0,.35);
}
.model-stage.is-core{ border-color:var(--gold-soft); }
.model-stage.is-core:hover{ border-color:var(--gold); }
.model-stage > p{ color:var(--muted); font-size:.95rem; margin-top:14px; }

.stage-head{ display:grid; grid-template-columns:auto 1fr; gap:4px 16px; align-items:center; }
.stage-num{
  grid-column:1 / -1;
  font:500 .8rem/1 var(--sans); letter-spacing:.22em;
  color:var(--gold); margin-bottom:14px;
}
.stage-icon{ width:46px; height:46px; }
.stage-icon .ln{ fill:none; stroke:var(--cyan); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.stage-icon .nd{ fill:var(--cyan); }
.is-core .stage-icon .ln{ stroke:var(--gold-hi); }
.stage-head h3{ font-size:1.3rem; line-height:1.15; }
.stage-head h3 span{
  display:block; margin-top:5px;
  font:600 .72rem/1.3 var(--sans); letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint);
}

.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.chips li{
  font:500 .8rem/1 var(--sans); color:var(--muted);
  border:1px solid var(--hairline); border-radius:999px;
  padding:8px 13px; background:rgba(255,255,255,.02);
}

.trunk-steps{ list-style:none; margin-top:18px; counter-reset:step; }
.trunk-steps li{
  counter-increment:step;
  display:flex; align-items:center; gap:14px;
  padding:11px 0; border-top:1px solid rgba(255,255,255,.055);
}
.trunk-steps li::before{
  content:counter(step, decimal-leading-zero);
  font:500 .78rem/1 var(--sans); letter-spacing:.08em; color:var(--gold);
}
.trunk-steps a{
  font:500 1.02rem/1.3 var(--serif); color:var(--text);
  transition:color .25s;
}
.trunk-steps a:hover{ color:var(--gold-hi); }

.model-link{ display:flex; align-items:center; }
.model-link svg{ width:100%; overflow:visible; }
.model-link .trace{
  fill:none; stroke:var(--cyan-soft); stroke-width:1.5;
  stroke-dasharray:5 7; stroke-linecap:round;
}
.model-link .pulse{ fill:var(--cyan); opacity:.9; animation:pulse 2.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.25; r:2.4; } 50%{ opacity:1; r:3.6; } }

.pull-line{
  margin:clamp(48px, 6vw, 64px) auto 0; max-width:840px;
  text-align:center;
  font:300 clamp(1.3rem, 2.2vw, 1.62rem)/1.55 var(--serif);
}
.pull-line em{ color:var(--gold-hi); }

/* ============================================================
   SERVICES
   ============================================================ */
.cards-3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
.card{
  position:relative;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--hairline); border-radius:var(--radius);
  padding:36px 32px 30px;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.card::before{
  content:''; position:absolute; top:0; left:32px;
  width:46px; height:2px;
  background:linear-gradient(90deg, var(--gold), transparent);
}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--gold-soft);
  box-shadow:0 24px 52px rgba(0,0,0,.38);
}
.card-num{
  font:300 2.4rem/1 var(--serif); color:transparent;
  -webkit-text-stroke:1px rgba(226,164,75,.55);
}
.card h3{ font-size:1.42rem; margin-top:16px; }
.card p{ color:var(--muted); font-size:.98rem; margin-top:14px; }
.card-foot{
  margin-top:24px; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.055);
  font-size:.8rem !important; color:var(--faint) !important;
  letter-spacing:.02em;
}

/* ============================================================
   CASE STUDIES
   ============================================================ */
.cases{
  background:
    radial-gradient(820px 420px at 12% 100%, rgba(95,211,228,.05), transparent 62%),
    var(--ink);
}
.case-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.case-card{
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--hairline); border-radius:20px;
  padding:42px 40px 36px;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.case-card:hover{
  transform:translateY(-6px);
  border-color:rgba(95,211,228,.35);
  box-shadow:0 24px 52px rgba(0,0,0,.38);
}
.case-tag{
  font:600 .73rem/1 var(--sans); letter-spacing:.17em;
  text-transform:uppercase; color:var(--cyan);
}
.case-card h3{ font-size:2rem; font-weight:400; margin:14px 0 12px; }
.case-sum{ color:var(--muted); font-size:.99rem; }
.case-metrics{
  display:flex; gap:52px;
  margin-top:30px; padding-top:26px;
  border-top:1px solid rgba(255,255,255,.055);
}
.case-metrics dt{ font:500 1.85rem/1.1 var(--serif); color:var(--gold-hi); white-space:nowrap; }
.case-metrics dd{ font-size:.8rem; color:var(--faint); margin-top:6px; }

/* ============================================================
   BOOK
   ============================================================ */
.book{ background:var(--ink-deep); border-block:1px solid var(--hairline); }
.book-grid{
  display:grid; grid-template-columns:290px 1fr;
  gap:clamp(44px, 6vw, 84px); align-items:center;
}
.book-cover{ position:relative; }
.book-cover::before{
  content:''; position:absolute; inset:-12% -18%;
  background:radial-gradient(closest-side, rgba(226,164,75,.16), transparent 72%);
}
.book-cover img{
  position:relative; width:100%; border-radius:5px;
  transform:rotate(-2.5deg);
  box-shadow:24px 34px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
}
.book-copy h2{ margin-bottom:18px; }
.book-copy > p{ color:var(--muted); max-width:56ch; }
.byline{
  margin:22px 0 30px !important;
  padding-left:18px; border-left:2px solid var(--gold);
  font-size:.92rem !important; color:var(--faint) !important;
}
.book-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.edition-chip{
  font:500 .85rem/1 var(--sans); color:var(--muted);
  border:1px dashed var(--hairline); border-radius:999px;
  padding:13px 20px;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes{ text-align:center; }
.quote-slider{ max-width:860px; margin-inline:auto; }
.quote-track{ display:grid; }
.quote{
  grid-area:1 / 1;
  opacity:0; transform:translateY(14px);
  transition:opacity .65s var(--ease), transform .65s var(--ease);
  pointer-events:none;
  visibility:hidden;
}
.quote.is-active{ opacity:1; transform:none; pointer-events:auto; visibility:visible; }
.qmark{ width:34px; margin:0 auto 22px; fill:var(--gold); opacity:.55; }
.quote p{
  font:300 clamp(1.22rem, 2.1vw, 1.5rem)/1.6 var(--serif);
  color:var(--text);
}
.quote footer{ margin-top:26px; }
.quote footer strong{ font:600 .95rem/1 var(--sans); }
.quote footer span{ display:block; margin-top:7px; font-size:.83rem; color:var(--faint); }
.quote-dots{ display:flex; justify-content:center; gap:10px; margin-top:34px; }
.quote-dots button{
  width:9px; height:9px; border-radius:999px; border:0; cursor:pointer;
  background:rgba(255,255,255,.18);
  transition:background-color .3s, width .3s var(--ease);
}
.quote-dots button.is-active{ width:26px; background:var(--gold); }

/* ============================================================
   CTA
   ============================================================ */
.cta{ overflow:hidden; text-align:center; padding-block:clamp(96px, 11vw, 150px); }
.cta-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(760px 420px at 50% 118%, rgba(226,164,75,.16), transparent 65%),
    radial-gradient(560px 320px at 8% -10%, rgba(95,211,228,.07), transparent 60%);
}
.cta-inner{ position:relative; }
.cta h2{ font-size:clamp(1.9rem, 3.3vw, 2.85rem); }
.cta h2 em{ color:var(--gold-hi); }
.cta-actions{ margin-top:40px; }
.cta-meta{
  margin-top:30px; font-size:.95rem; color:var(--faint);
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
}
.cta-meta a{ color:var(--muted); transition:color .25s; }
.cta-meta a:hover{ color:var(--gold-hi); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ border-top:1px solid var(--hairline); background:var(--ink-deep); }
.footer-grid{
  display:grid; grid-template-columns:1.25fr .55fr .65fr;
  gap:clamp(40px, 5vw, 70px);
  padding-block:72px 0;
}
.f-brand img{ height:48px; width:auto; }
.f-brand p{ color:var(--faint); font-size:.94rem; margin-top:20px; max-width:340px; }
.f-title{
  font:600 .73rem/1 var(--sans); letter-spacing:.19em;
  text-transform:uppercase; color:var(--gold); margin-bottom:14px;
}
.f-col a{ display:block; padding:7px 0; color:var(--muted); font-size:.95rem; transition:color .25s; }
.f-col a:hover{ color:var(--text); }
.f-col .lang-pill{ display:inline-block; margin-top:14px; padding:9px 14px; }
.footer-bar{
  margin-top:56px; padding-block:26px;
  border-top:1px solid rgba(255,255,255,.055);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  font-size:.82rem; color:var(--faint);
}
.footer-bar p:last-child{ font-family:var(--serif); font-style:italic; }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }
.cards-3 .reveal:nth-child(2), .model-flow .reveal:nth-child(3){ transition-delay:.12s; }
.cards-3 .reveal:nth-child(3), .model-flow .reveal:nth-child(5){ transition-delay:.24s; }
.case-grid .reveal:nth-child(2){ transition-delay:.14s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .model-flow{ grid-template-columns:1fr 56px 1fr 56px 1fr; }
}

@media (max-width:980px){
  .main-nav{
    position:fixed; inset:0; z-index:110;
    flex-direction:column; justify-content:center; gap:10px;
    background:rgba(7,16,25,.97);
    opacity:0; visibility:hidden; transition:opacity .35s;
  }
  .main-nav.open{ opacity:1; visibility:visible; }
  .main-nav > a{ font-size:1.35rem; padding:14px 0; }
  .nav-extra{ flex-direction:column; gap:20px; margin:26px 0 0; }
  .nav-toggle{ display:flex; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .hero{ padding-top:120px; }
  .hero-media img{
    right:-24%; height:104%;
    -webkit-mask-image:linear-gradient(to left, #000 40%, transparent 92%);
            mask-image:linear-gradient(to left, #000 40%, transparent 92%);
    opacity:.62;
  }
  .hero-media::after{
    background:
      linear-gradient(90deg, var(--ink) 4%, rgba(10,20,36,.86) 40%, rgba(10,20,36,.42) 100%),
      linear-gradient(to top, rgba(10,20,36,.6), transparent 40%);
  }

  .grid-2{ grid-template-columns:1fr; }
  .model-flow{ grid-template-columns:1fr; }
  .model-link{ justify-content:center; height:56px; }
  .model-link svg{ width:24px; transform:rotate(90deg); }
  .cards-3{ grid-template-columns:1fr; }
  .case-grid{ grid-template-columns:1fr; }
  .book-grid{ grid-template-columns:1fr; }
  .book-cover{ max-width:250px; margin-inline:auto; }
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
}

@media (max-width:560px){
  .hero-stats{ gap:16px 30px; }
  .hero-stats strong{ font-size:1.2rem; }
  .logo-grid{ gap:20px 34px; }
  .logo-grid img{ height:20px; }
  .case-card, .card{ padding:30px 24px; }
  .case-metrics{ gap:34px; }
  .btn-lg{ padding:17px 30px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero-media img{ animation:none; }
}

/* ============================================================
   V2 COMPONENTS
   ============================================================ */

/* bigger brand logo (client request) */
.brand img{ height:50px; }
.main-nav > a.active{ color:var(--text); }
.main-nav > a.active::after{ transform:scaleX(1); }

/* ---------- logo marquee ---------- */
.logostrip .strip-label{ margin-bottom:34px; }
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track{
  display:flex; align-items:center; gap:72px;
  width:max-content; padding-right:72px;
  animation:marq 34s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%); } }
.m-item{ flex:none; display:flex; align-items:center; }
.m-item img{ height:26px; width:auto; opacity:.55; transition:opacity .3s; }
.m-item:hover img{ opacity:.95; }
.m-item img[src*="yanmar"]{ height:15px; }
.m-item img[src*="sony"]{ height:17px; }
.m-item img[src*="honda"]{ height:30px; }
.m-item img[src*="sri"]{ height:30px; }
.m-item img[src*="logtrade"]{ height:20px; }
.m-item img[src*="ditto"]{ height:18px; }
.m-item img[src*="synapse"]{ height:22px; }

/* ---------- section head with side controls ---------- */
.split-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:30px; max-width:none;
}
.head-side{ display:flex; align-items:center; gap:26px; padding-bottom:6px; }
.text-link{
  font:600 .92rem/1 var(--sans); color:var(--gold-hi);
  display:inline-flex; align-items:center; gap:8px;
}
.text-link .arrow{ transition:transform .3s var(--ease); }
.text-link:hover .arrow{ transform:translateX(3px); }
.rail-nav{ display:flex; gap:10px; }
.rail-btn{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--hairline); background:none;
  color:var(--text); font-size:1.05rem; cursor:pointer;
  transition:border-color .25s, color .25s, background-color .25s;
}
.rail-btn:hover{ border-color:var(--gold-soft); color:var(--gold-hi); }

/* ---------- case rail / tiles ---------- */
.case-rail{
  display:flex; gap:24px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 4px 26px;
  scrollbar-width:none; cursor:grab;
}
.case-rail::-webkit-scrollbar{ display:none; }
.case-rail.dragging{ cursor:grabbing; scroll-snap-type:none; }
.case-rail .case-tile{ flex:0 0 clamp(300px, 30.5%, 372px); scroll-snap-align:start; }

.tile-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
.case-tile{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--hairline); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.case-tile:hover{
  transform:translateY(-6px);
  border-color:rgba(95,211,228,.35);
  box-shadow:0 24px 52px rgba(0,0,0,.38);
}
.tile-media{ display:block; position:relative; overflow:hidden; }
.tile-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,20,36,.42), transparent 45%);
}
.tile-media img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform .6s var(--ease);
}
.case-tile:hover .tile-media img{ transform:scale(1.05); }
.tile-body{ display:flex; flex-direction:column; flex:1; padding:24px 26px 24px; }
.tile-tag{
  font:600 .7rem/1.4 var(--sans); letter-spacing:.16em;
  text-transform:uppercase; color:var(--cyan);
}
.tile-body h3{ font-size:1.34rem; font-weight:500; margin-top:10px; }
.tile-body h3 a{ transition:color .25s; }
.tile-body h3 a:hover{ color:var(--gold-hi); }
.tile-sum{ color:var(--muted); font-size:.92rem; line-height:1.65; margin-top:10px; }
.tile-metrics{
  display:flex; gap:34px;
  margin-top:18px; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.055);
}
.tile-metrics dt{ font:500 1.28rem/1.1 var(--serif); color:var(--gold-hi); white-space:nowrap; }
.tile-metrics dd{ font-size:.74rem; color:var(--faint); margin-top:4px; }
.tile-link{
  margin-top:auto; padding-top:18px;
  font:600 .88rem/1 var(--sans); color:var(--gold-hi);
  display:inline-flex; align-items:center; gap:8px;
}
.tile-link .arrow{ transition:transform .3s var(--ease); }
.case-tile:hover .tile-link .arrow{ transform:translateX(4px); }

/* ---------- industries ---------- */
.ind-grid{
  display:grid; grid-template-columns:repeat(8, 1fr); gap:12px;
}
.ind-item{
  border:1px solid var(--hairline); border-radius:14px;
  background:var(--surface);
  padding:24px 8px 18px; text-align:center;
  transition:border-color .3s, transform .3s var(--ease), background-color .3s;
}
.ind-item:hover{ border-color:var(--gold-soft); transform:translateY(-4px); background:var(--surface-2); }
.ind-item svg{
  width:38px; height:38px; margin-inline:auto;
  fill:none; stroke:var(--gold); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.ind-item span{
  display:block; margin-top:12px;
  font:500 .78rem/1.35 var(--sans); color:var(--muted);
}

/* ---------- book + Carlson duo ---------- */
.duo{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(44px, 5.5vw, 80px); align-items:center;
}
.duo .book-grid{ grid-template-columns:218px 1fr; gap:40px; }
.duo .book-copy h2{ font-size:2.1rem; }
.carlson{
  border-left:1px solid var(--hairline);
  padding-left:clamp(34px, 4vw, 64px);
}
.carlson .qmark{ width:34px; fill:var(--gold); opacity:.55; margin-bottom:20px; }
.carlson p{
  font:300 clamp(1.18rem, 1.9vw, 1.42rem)/1.62 var(--serif);
  color:var(--text);
}
.carlson footer{ margin-top:24px; }
.carlson footer strong{ font:600 .95rem/1 var(--sans); }
.carlson footer span{ display:block; margin-top:7px; font-size:.83rem; color:var(--faint); }

/* ---------- interior pages ---------- */
.page-hero{
  padding:168px 0 64px;
  background:
    radial-gradient(900px 420px at 82% -30%, rgba(95,211,228,.07), transparent 62%),
    radial-gradient(700px 380px at 8% 120%, rgba(226,164,75,.06), transparent 60%),
    var(--ink);
  border-bottom:1px solid var(--hairline);
}
.page-hero h1{ font-size:clamp(2.2rem, 4vw, 3.4rem); max-width:850px; }
.page-hero .section-sub{ max-width:640px; }
.crumb{
  font:500 .82rem/1 var(--sans); color:var(--faint);
  margin-bottom:26px;
}
.crumb a{ color:var(--muted); transition:color .25s; }
.crumb a:hover{ color:var(--gold-hi); }

.wip{
  margin-top:26px;
  font:500 .84rem/1.6 var(--sans); color:var(--faint);
  border:1px dashed var(--hairline); border-radius:12px;
  padding:14px 20px; text-align:center;
}

/* ---------- case detail ---------- */
.case-detail{ padding-top:56px; }
.detail-metrics{
  border-top:0; padding-top:0; margin:0 0 40px;
  display:flex; flex-wrap:wrap; gap:20px 56px;
}
.detail-metrics .metric-tag dt{
  font:600 .78rem/1.5 var(--sans); letter-spacing:.16em;
  text-transform:uppercase; color:var(--cyan);
  padding-top:10px;
}
.onepager{
  max-width:880px; margin-inline:auto;
  border-radius:14px; overflow:hidden;
  border:1px solid var(--hairline);
  box-shadow:0 34px 80px rgba(0,0,0,.5);
  background:#fff;
}
.onepager img{ width:100%; display:block; }
.case-detail .wip{ max-width:880px; margin-inline:auto; }
.case-pager{
  max-width:880px; margin:36px auto 0;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  font:500 .9rem/1.4 var(--sans);
}
.case-pager a{ color:var(--muted); transition:color .25s; }
.case-pager a:hover{ color:var(--gold-hi); }
.case-pager .all{ color:var(--gold-hi); font-weight:600; }
.case-pager span{ color:var(--gold); }

/* ---------- about / knowledge extras ---------- */
.about-page h2{ margin-bottom:6px; }
.about-page .section-sub{ margin-top:0; margin-bottom:8px; color:var(--gold-hi); font-size:.95rem; letter-spacing:.04em; }
.about-stats{ margin-top:40px; }
.portrait{ position:relative; max-width:360px; margin-inline:auto; }
.portrait::before{
  content:''; position:absolute; inset:8% -6% -4% -6%;
  background:radial-gradient(closest-side, rgba(95,211,228,.12), transparent 70%);
}
.portrait img{
  position:relative; width:100%;
  border-radius:var(--radius);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--hairline);
  padding:18px 18px 0;
}
.post-list{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--hairline); border-radius:var(--radius);
  padding:30px 34px;
}
.post-list ul{ list-style:none; }
.post-list li{
  padding:13px 0; color:var(--muted); font-size:.96rem;
  border-top:1px solid rgba(255,255,255,.055);
}
.post-list li:first-child{ border-top:0; }

/* ---------- v2 responsive ---------- */
@media (max-width:1080px){
  .ind-grid{ grid-template-columns:repeat(4, 1fr); }
  .tile-grid{ grid-template-columns:repeat(2, 1fr); }
  .duo{ grid-template-columns:1fr; }
  .carlson{ border-left:0; padding-left:0; border-top:1px solid var(--hairline); padding-top:40px; }
}
@media (max-width:980px){
  .case-rail .case-tile{ flex-basis:min(76vw, 340px); }
  .split-head{ flex-direction:column; align-items:flex-start; }
  .page-hero{ padding-top:140px; }
}
@media (max-width:640px){
  .ind-grid{ grid-template-columns:repeat(2, 1fr); }
  .tile-grid{ grid-template-columns:1fr; }
  .duo .book-grid{ grid-template-columns:1fr; }
  .duo .book-cover{ max-width:210px; margin-inline:auto; }
  .marquee-track{ gap:48px; padding-right:48px; }
  .case-pager{ flex-direction:column; align-items:flex-start; }
}

/* ---------- coming-soon pages ---------- */
.soon{
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:140px 0 100px; text-align:center;
  background:
    radial-gradient(820px 460px at 50% -20%, rgba(95,211,228,.08), transparent 62%),
    radial-gradient(700px 420px at 50% 130%, rgba(226,164,75,.09), transparent 62%),
    var(--ink);
}
.soon .shell{ max-width:760px; }
.soon .kicker{ justify-content:center; }
.soon h1{ font-size:clamp(2.3rem, 4.4vw, 3.6rem); }
.soon .section-sub{ margin-inline:auto; max-width:540px; }
.soon-note{
  margin:30px auto 38px; display:inline-block;
  font:500 .84rem/1.6 var(--sans); color:var(--faint);
  border:1px dashed var(--hairline); border-radius:999px;
  padding:12px 24px;
}
.soon .btn .arrow{ transition:transform .3s var(--ease); }
.soon .btn:hover .arrow{ transform:translateX(-3px); }

/* ============================================================
   V3 — RP round-2 edits
   ============================================================ */

/* ---------- gold-arc QANOPY GROUP lockup ---------- */
.brand{ display:inline-flex; align-items:center; gap:15px; }
.brand-arc{ width:60px; flex:none; overflow:visible; }
.brand-arc path{ fill:var(--gold); }
.brand-word{
  font:600 1.04rem/1 var(--sans);
  letter-spacing:.24em; text-transform:uppercase;
  color:#CDD8E6; white-space:nowrap;
  transition:color .25s;
}
a.brand:hover .brand-word{ color:#fff; }
.f-lockup{ gap:12px; }
.f-lockup .brand-arc{ width:48px; }
.f-lockup .brand-word{ font-size:.88rem; }

/* ---------- light color logo marquee ---------- */
.logostrip{
  background:#FFFFFF;
  border-block:1px solid #E7EAF0;
  padding:42px 0 38px;
}
.logostrip .strip-label{ color:#8A97A8; margin-bottom:30px; }
.marquee-track{ gap:82px; padding-right:82px; animation-duration:80s; }
.m-item img{ opacity:1; height:30px; }
.m-item:hover img{ opacity:1; }

/* ---------- industries band inside guide section ---------- */
.ind-band{ margin-top:clamp(60px, 7.5vw, 92px); }
.band-label{
  font:600 .78rem/1 var(--sans); letter-spacing:.19em;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:34px; display:flex; align-items:center; gap:13px;
}
.band-label::after{ content:''; flex:1; height:1px; background:var(--hairline); }
.ind-row{ display:grid; grid-template-columns:repeat(8, 1fr); }
.ind-row .ind-item{
  border:0; border-left:1px solid var(--hairline);
  border-radius:0; background:none;
  padding:8px 10px; text-align:center;
  transition:none; transform:none;
}
.ind-row .ind-item:first-child{ border-left:0; }
.ind-row .ind-item:hover{ transform:none; background:none; border-color:var(--hairline); }
.ind-row .ind-item svg{
  width:54px; height:54px; margin-inline:auto;
  stroke:var(--gold); stroke-width:1.55;
}
.ind-row .ind-item span{
  margin-top:15px; font:500 .84rem/1.35 var(--sans); color:var(--muted);
}

/* ---------- book: straight + wider ---------- */
.duo .book-grid{ grid-template-columns:272px 1fr; }
.book-cover img{ transform:none; border-radius:8px; }

/* ---------- v3 responsive ---------- */
@media (max-width:1080px){
  .ind-row{ grid-template-columns:repeat(4, 1fr); row-gap:38px; }
  .ind-row .ind-item:nth-child(5){ border-left:0; }
}
@media (max-width:640px){
  .ind-row{ grid-template-columns:repeat(2, 1fr); row-gap:30px; }
  .ind-row .ind-item{ border-left:0; }
  .ind-row .ind-item:nth-child(even){ border-left:1px solid var(--hairline); }
  .brand-arc{ width:46px; }
  .brand-word{ font-size:.9rem; letter-spacing:.18em; }
  .marquee-track{ gap:52px; padding-right:52px; }
  .m-item img{ transform:scale(.82); transform-origin:center; }
}

/* ============================================================
   V4 — green arcs, About page
   ============================================================ */
:root{ --green:#71BF6F; }

/* arcs go brand-green (RP round-3) */
.arc path{ stroke:var(--green); }
.kicker-rule{ background:var(--green); }
.band-label{ color:var(--gold); }

/* ---------- about hero ---------- */
.hero--about{
  background:
    radial-gradient(1100px 520px at 84% -10%, rgba(226,164,75,.08), transparent 60%),
    var(--ink);
}
.hero--about .hero-media img{ top:auto; bottom:-6%; height:112%; }
.hero-glow--gold{
  background:
    radial-gradient(640px 420px at 72% 42%, rgba(242,188,108,.13), transparent 65%),
    radial-gradient(700px 420px at 58% 100%, rgba(242,188,108,.07), transparent 60%);
}

/* ---------- questions band ---------- */
.qband{
  padding:54px 0 58px;
  border-block:1px solid var(--hairline);
  background:rgba(255,255,255,.014);
}
.q-row{ display:grid; grid-template-columns:repeat(5,1fr); }
.q-item{
  padding:6px 22px 0; text-align:left;
  border-left:1px solid var(--hairline);
}
.q-item:first-child{ border-left:0; padding-left:0; }
.q-item svg{
  width:34px; height:34px; margin-bottom:14px;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.q-item .ln{ fill:none; stroke:var(--gold); stroke-width:1.7; }
.q-item .nd{ fill:var(--gold); }
.q-item p{ font:500 .88rem/1.55 var(--sans); color:var(--muted); }

/* ---------- founder ---------- */
.founder-grid{
  display:grid; grid-template-columns:340px 1fr;
  gap:clamp(44px, 6vw, 84px); align-items:center;
}
.founder .portrait{ max-width:340px; }
.founder h2{ margin-bottom:16px; }
.founder-lede{ color:var(--text); font-size:1.09rem; max-width:58ch; }
.cred-list{
  list-style:none; margin-top:26px;
  display:grid; grid-template-columns:1fr 1fr; gap:0 34px;
}
.cred-list li{
  display:flex; gap:12px; align-items:baseline;
  padding:10px 0; font-size:.94rem; color:var(--muted);
  border-top:1px solid rgba(255,255,255,.055);
}
.cred-list li::before{
  content:''; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--green); transform:translateY(-2px);
}
.founder-note{ margin-top:24px; color:var(--muted); font-size:.97rem; max-width:62ch; }
.founder-note em{ font-family:var(--serif); color:var(--gold-hi); }

/* ---------- network line ---------- */
.network{ padding-block:clamp(40px,5vw,64px); }
.network .pull-line{ margin:0 auto; }

/* ---------- team ---------- */
.team{ background:var(--ink-deep); border-block:1px solid var(--hairline); }
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.member{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--hairline); border-radius:var(--radius);
  overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.member:hover{
  transform:translateY(-5px);
  border-color:var(--gold-soft);
  box-shadow:0 22px 48px rgba(0,0,0,.38);
}
.member figure{ position:relative; overflow:hidden; }
.member figure::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,20,36,.34), transparent 40%);
}
.member img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  filter:saturate(.88);
}
.member h3{ font-size:1.28rem; font-weight:500; margin:20px 24px 0; }
.m-role{ font:600 .8rem/1.5 var(--sans); color:var(--gold); margin:7px 24px 0; }
.m-past{ font:400 .84rem/1.5 var(--sans); color:var(--faint); margin:6px 24px 22px; }

/* ---------- stats band ---------- */
.stats-band{
  padding:clamp(52px,6vw,72px) 0;
  border-bottom:1px solid var(--hairline);
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(113,191,111,.05), transparent 70%),
    var(--ink);
}
.stats-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:30px;
  text-align:center;
}
.stats-row strong{
  display:block; font:500 clamp(1.9rem,3vw,2.5rem)/1.1 var(--serif);
  color:var(--gold-hi);
}
.stats-row span{
  display:block; margin-top:10px;
  font-size:.84rem; color:var(--faint); line-height:1.5;
  max-width:200px; margin-inline:auto;
}

/* ---------- why tiles ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.why-tile{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--hairline); border-radius:var(--radius);
  padding:30px 28px 26px;
  transition:transform .35s var(--ease), border-color .35s;
}
.why-tile:hover{ transform:translateY(-5px); border-color:var(--gold-soft); }
.why-tile svg{
  width:40px; height:40px;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.why-tile .ln{ fill:none; stroke:var(--gold); stroke-width:1.7; }
.why-tile .nd{ fill:var(--gold); }
.why-tile h3{ font-size:1.18rem; margin-top:16px; }
.why-tile p{ color:var(--muted); font-size:.92rem; margin-top:10px; }

/* ---------- v4 responsive ---------- */
@media (max-width:1080px){
  .q-row{ grid-template-columns:1fr 1fr; gap:22px 0; }
  .q-item:nth-child(odd){ border-left:0; padding-left:0; }
  .q-item:nth-child(even){ padding-right:0; }
  .team-grid{ grid-template-columns:1fr 1fr; }
  .why-grid{ grid-template-columns:1fr 1fr; }
  .stats-row{ grid-template-columns:1fr 1fr; gap:38px 20px; }
  .founder-grid{ grid-template-columns:1fr; }
  .founder .portrait{ margin-inline:auto; }
}
@media (max-width:640px){
  .q-row{ grid-template-columns:1fr; }
  .q-item{ border-left:0; padding-inline:0; }
  .team-grid{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr; }
  .cred-list{ grid-template-columns:1fr; }
}

/* ============================================================
   V5 — tagline lockup, Services page
   ============================================================ */

/* ---------- brand tagline ---------- */
.header-inner{ height:88px; }
.brand{ flex-direction:column; align-items:flex-start; gap:5px; }
.brand img{ height:54px; }
.brand-tag{
  font:600 .565rem/1 var(--sans);
  letter-spacing:.155em; text-transform:uppercase;
  color:var(--green); white-space:nowrap;
  padding-left:2px;
}
.f-brand .f-tag{
  font:600 .58rem/1 var(--sans);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--green); margin-top:10px;
}
.f-brand .f-tag + p{ margin-top:14px; }

/* ---------- lighter questions band (About) ---------- */
.qband--light{
  background:#F4F6F9;
  border-block-color:#E3E7EE;
}
.qband--light .band-label{ color:#7A6428; }
.qband--light .q-item{ border-left-color:#DFE4EC; }
.qband--light .q-item p{ color:#3D4B5E; }
.qband--light .q-item .ln{ stroke:#B8862F; }
.qband--light .q-item .nd{ fill:#B8862F; }

/* founder portrait: photo has its own background now */
.founder .portrait img{ padding:0; background:none; }

/* ============================================================
   SERVICES
   ============================================================ */
.hero--services{
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(113,191,111,.08), transparent 60%),
    var(--ink);
}
.hero--services .hero-media img{ top:auto; bottom:-4%; height:112%; }
.hero-glow--green{
  background:
    radial-gradient(640px 430px at 70% 30%, rgba(240,214,140,.10), transparent 65%),
    radial-gradient(700px 420px at 60% 100%, rgba(113,191,111,.09), transparent 60%);
}
.hero--services h1{ font-size:clamp(2.1rem, 3.9vw, 3.35rem); }
.tagline-line{
  margin-top:22px;
  font:400 clamp(1.05rem,1.7vw,1.28rem)/1.5 var(--serif);
  font-style:italic; color:var(--green);
}

/* ---------- journey steps ---------- */
.journey{ background:var(--ink-deep); border-block:1px solid var(--hairline); }
.journey .section-head{ margin-inline:auto; text-align:center; }
.journey .kicker{ justify-content:center; }
.step-flow{
  display:grid;
  grid-template-columns:1fr 56px 1fr 56px 1fr 56px 1fr;
  align-items:stretch; gap:4px;
}
.step{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--hairline); border-radius:var(--radius);
  padding:26px 24px 24px;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.step:hover{
  transform:translateY(-5px);
  border-color:rgba(113,191,111,.4);
  box-shadow:0 22px 48px rgba(0,0,0,.36);
}
.step-top{ display:flex; align-items:center; justify-content:space-between; }
.step-num{
  font:500 .78rem/1 var(--sans); letter-spacing:.22em; color:var(--gold);
}
.step-icon{ width:40px; height:40px; }
.step-icon .ln{ fill:none; stroke:var(--green); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.step-icon .nd{ fill:var(--green); }
.step h3{ font-size:1.34rem; margin-top:16px; }
.step-desc{ color:var(--muted); font-size:.93rem; margin-top:9px; }
.step-list{ list-style:none; margin-top:18px; }
.step-list li{
  display:flex; gap:11px; align-items:baseline;
  padding:9px 0; font-size:.86rem; color:var(--muted);
  border-top:1px solid rgba(255,255,255,.055);
}
.step-list li::before{
  content:''; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--green); transform:translateY(-2px);
}
.step-link{ display:flex; align-items:center; }
.step-link svg{ width:100%; overflow:visible; }
.step-link .trace{
  fill:none; stroke:rgba(113,191,111,.45); stroke-width:1.5;
  stroke-dasharray:5 7; stroke-linecap:round;
}
.step-link .pulse{ fill:var(--green); animation:pulse 2.6s ease-in-out infinite; }

/* ---------- phase bar ---------- */
.phase-bar{
  margin-top:clamp(42px,5vw,60px);
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,4vw,56px); align-items:center;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--hairline); border-radius:var(--radius);
  padding:30px 34px;
}
.phase-main{
  font:300 clamp(1.05rem,1.6vw,1.24rem)/1.6 var(--serif); color:var(--text);
}
.phase-side{ font-size:.9rem; color:var(--muted); }
.phase-side .text-link{ display:inline-flex; margin-top:8px; }

/* ---------- engagement programs ---------- */
.prog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.prog{
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--hairline); border-radius:var(--radius);
  padding:34px 30px 28px;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.prog::before{
  content:''; position:absolute; top:0; left:30px;
  width:46px; height:2px;
  background:linear-gradient(90deg, var(--green), transparent);
}
.prog:hover{
  transform:translateY(-6px); border-color:var(--gold-soft);
  box-shadow:0 24px 52px rgba(0,0,0,.38);
}
.prog-num{
  font:300 2.2rem/1 var(--serif); color:transparent;
  -webkit-text-stroke:1px rgba(113,191,111,.55);
}
.prog h3{ font-size:1.26rem; line-height:1.3; margin-top:14px; }
.prog-desc{ color:var(--muted); font-size:.93rem; margin-top:12px; }
.prog-list{ list-style:none; margin-top:20px; }
.prog-list li{
  display:flex; gap:11px; align-items:baseline;
  padding:9px 0; font-size:.86rem; color:var(--muted);
  border-top:1px solid rgba(255,255,255,.055);
}
.prog-list li::before{
  content:''; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--gold); transform:translateY(-2px);
}
.prog-foot{
  margin-top:auto; padding-top:24px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.dur-chip{
  font:600 .74rem/1 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:var(--green);
  border:1px solid rgba(113,191,111,.35); border-radius:999px;
  padding:9px 13px; white-space:nowrap;
}

/* ---------- industries section on services ---------- */
.ind-section{ padding-block:clamp(60px,7vw,92px); }
.ind-section .ind-band{ margin-top:0; }

/* ---------- single centred quote ---------- */
.single-quote{ padding-top:0; }
.carlson.centered{
  border:0; padding:0; text-align:center;
  max-width:840px; margin-inline:auto;
}
.carlson.centered .qmark{ margin-inline:auto; }

/* ---------- v5 responsive ---------- */
@media (max-width:1080px){
  .step-flow{ grid-template-columns:1fr 1fr; gap:22px; }
  .step-link{ display:none; }
  .prog-grid{ grid-template-columns:1fr; }
  .phase-bar{ grid-template-columns:1fr; }
}
@media (max-width:980px){
  .brand-tag{ font-size:.53rem; letter-spacing:.13em; }
}
@media (max-width:640px){
  .step-flow{ grid-template-columns:1fr; }
  .header-inner{ height:80px; }
  .brand img{ height:44px; }
  .brand-tag{ font-size:.48rem; }
  .prog-foot{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   V6 — tagline removed, Method page
   ============================================================ */
.header-inner{ height:88px; }
.brand{ gap:0; }

/* ---------- method hero ---------- */
.hero--method{
  background:
    radial-gradient(1100px 520px at 84% -10%, rgba(226,164,75,.09), transparent 60%),
    var(--ink);
}
.hero--method .hero-media img{ top:-4%; height:112%; }
.hero--method h1{ font-size:clamp(2.2rem, 4.2vw, 3.55rem); }

/* ---------- six steps (light band) ---------- */
.msteps{
  background:#F4F6F9;
  border-block:1px solid #E3E7EE;
  padding:clamp(72px, 8vw, 104px) 0;
}
.msteps-head{ text-align:center; max-width:760px; margin:0 auto clamp(44px,5vw,60px); }
.msteps-head h2{ color:#17253A; }
.msteps-head p{ color:#5A6B80; margin-top:14px; font-size:1.02rem; }
.msteps-row{
  position:relative;
  display:grid; grid-template-columns:repeat(6, 1fr); gap:8px;
}
.msteps-row::before{
  content:''; position:absolute; top:78px; left:7%; right:7%;
  border-top:2px dotted #C6CEDA;
}
.mstep{ position:relative; text-align:center; padding:0 10px; }
.mstep-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:#2E7D32; color:#fff;
  font:600 .8rem/1 var(--sans);
  margin-bottom:14px;
}
.mstep-ic{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:76px; height:76px; margin:0 auto;
  background:#FFFFFF; border:1px solid #DDE3EC; border-radius:50%;
  box-shadow:0 6px 18px rgba(23,37,58,.06);
}
.mstep-ic svg{ width:38px; height:38px; }
.mstep .ln{ fill:none; stroke:#B8862F; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.mstep .nd{ fill:#B8862F; }
.mstep h3{
  font:600 .82rem/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:#17253A; margin-top:18px;
}
.mstep p{ font-size:.86rem; line-height:1.55; color:#5A6B80; margin-top:9px; }

/* ---------- decision band (dark) ---------- */
.decide{
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(113,191,111,.06), transparent 65%),
    #0B1712;
  border-block:1px solid var(--hairline);
  padding:clamp(72px, 8vw, 100px) 0;
  text-align:center;
}
.decide h2{ margin-bottom:clamp(36px, 4vw, 50px); }
.decide-row{
  display:flex; justify-content:center; gap:clamp(18px, 3vw, 30px);
  flex-wrap:wrap;
}
.verdict{
  display:flex; align-items:center; gap:16px;
  min-width:216px; justify-content:center;
  padding:24px 34px;
  border:1px solid var(--hairline); border-radius:14px;
  background:rgba(255,255,255,.025);
  transition:transform .3s var(--ease), border-color .3s;
}
.verdict:hover{ transform:translateY(-4px); }
.verdict svg{ width:42px; height:42px; flex:none; }
.verdict .ln{ fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.verdict span{
  font:500 1.15rem/1 var(--serif); letter-spacing:.14em; text-transform:uppercase;
}
.v-invest{ border-color:rgba(113,191,111,.4); }
.v-invest .ln{ stroke:var(--green); } .v-invest span{ color:var(--green); }
.v-invest:hover{ border-color:var(--green); }
.v-pivot{ border-color:rgba(226,164,75,.4); }
.v-pivot .ln{ stroke:var(--gold); } .v-pivot span{ color:var(--gold-hi); }
.v-pivot:hover{ border-color:var(--gold); }
.v-kill{ border-color:rgba(214,106,106,.4); }
.v-kill .ln{ stroke:#D66A6A; } .v-kill span{ color:#DE8383; }
.v-kill:hover{ border-color:#D66A6A; }
.decide-line{
  margin:clamp(32px,4vw,44px) auto 0; max-width:640px;
  font:300 1.12rem/1.65 var(--serif); color:var(--muted);
}

/* ---------- two stories ---------- */
.story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; max-width:1000px; margin-inline:auto; }
.story{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--hairline); border-radius:var(--radius);
  padding:36px 34px 30px;
  transition:transform .35s var(--ease), border-color .35s;
}
.story:hover{ transform:translateY(-5px); border-color:var(--gold-soft); }
.story-tag{
  font:600 .72rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
}
.story h3{ font-size:1.5rem; margin-top:12px; }
.story-sum{ color:var(--muted); font-size:.96rem; margin-top:12px; }
.story-list{ list-style:none; margin-top:20px; }
.story-list li{
  display:flex; gap:12px; align-items:baseline;
  padding:10px 0; font-size:.9rem; color:var(--muted);
  border-top:1px solid rgba(255,255,255,.055);
}
.story-list li::before{
  content:''; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--green); transform:translateY(-2px);
}

/* ---------- roots foundation band ---------- */
.roots-band{
  position:relative; overflow:hidden;
  padding:clamp(84px, 9vw, 120px) 0;
  border-block:1px solid var(--hairline);
  background:var(--ink-deep);
}
.roots-bg{
  position:absolute; inset:0;
  background:url('../assets/img/roots_band.jpg') center bottom / cover no-repeat;
  opacity:.34;
}
.roots-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, var(--ink-deep) 4%, rgba(7,16,25,.55) 45%, rgba(7,16,25,.82) 100%);
}
.roots-inner{ position:relative; }
.tech-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:34px 26px; margin-top:clamp(40px,5vw,56px);
}
.tech-item{ text-align:center; padding:0 6px; }
.tech-item svg{
  width:46px; height:46px; margin-inline:auto;
}
.tech-item .ln{ fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.tech-item .nd{ fill:var(--gold); }
.tech-item h3{
  font:600 .86rem/1.35 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--text); margin-top:15px;
}
.tech-item p{ font-size:.8rem; line-height:1.55; color:var(--faint); margin-top:8px; max-width:230px; margin-inline:auto; }

/* ---------- v6 responsive ---------- */
@media (max-width:1080px){
  .msteps-row{ grid-template-columns:repeat(3, 1fr); gap:34px 8px; }
  .msteps-row::before{ display:none; }
  .tech-grid{ grid-template-columns:1fr 1fr; }
  .story-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .msteps-row{ grid-template-columns:1fr 1fr; }
  .decide-row{ flex-direction:column; align-items:center; }
  .verdict{ width:min(100%, 320px); }
  .tech-grid{ grid-template-columns:1fr; gap:30px; }
}

/* ============================================================
   V7 — centered nav, Case Studies grid
   ============================================================ */

/* ---------- consistent centered navigation ---------- */
.header-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}
.brand{ justify-self:start; }
.main-nav{ justify-self:center; }
.header-inner > .nav-extra{
  justify-self:end;
  display:flex; align-items:center; gap:16px; margin-left:0;
}
.nav-mobile-extra{ display:none; }

/* ---------- case studies grid ---------- */
.cs-head{ padding-bottom:46px; }
.cs-head .section-sub{ max-width:640px; }
.cs-listing{ padding-top:56px; }
.cs-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
.cs-card{
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--hairline); border-radius:var(--radius);
  overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.cs-card:hover{
  transform:translateY(-6px);
  border-color:var(--gold-soft);
  box-shadow:0 24px 52px rgba(0,0,0,.38);
}
.cs-media{ display:block; overflow:hidden; position:relative; background:#fff; }
.cs-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,20,36,.28), transparent 40%);
}
.cs-media img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform .6s var(--ease);
}
.cs-card:hover .cs-media img{ transform:scale(1.05); }
.cs-body{ display:flex; flex-direction:column; flex:1; padding:24px 26px 26px; }
.cs-body h3{ font-size:1.22rem; font-weight:500; line-height:1.35; }
.cs-body h3 a{ transition:color .25s; }
.cs-body h3 a:hover{ color:var(--gold-hi); }
.cs-body p{ color:var(--muted); font-size:.9rem; line-height:1.65; margin:12px 0 20px; flex:1; }
.cs-body .btn{ align-self:flex-start; }

/* ---------- v7 responsive ---------- */
@media (max-width:1080px){
  .cs-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:980px){
  .header-inner{ display:flex; justify-content:space-between; }
  .header-inner > .nav-extra{ display:none; }
  .main-nav .nav-mobile-extra{
    display:flex; flex-direction:column; align-items:center;
    gap:20px; margin-top:26px;
  }
}
@media (max-width:640px){
  .cs-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   V7.1 — gated case article (template)
   ============================================================ */
.article{ padding-top:56px; }
.article-grid{
  display:grid; grid-template-columns:1fr 360px;
  gap:clamp(36px, 5vw, 64px); align-items:start;
}
.article-main .detail-metrics{ margin-bottom:34px; }
.article-lede{ font-size:1.13rem; line-height:1.8; color:var(--text); }
.article-main > p{ color:var(--muted); margin-top:18px; max-width:62ch; }
.article-main > p.article-lede{ color:var(--text); margin-top:0; }
.article-quote{
  margin:32px 0 8px; padding:26px 30px;
  border-left:2px solid var(--gold);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border-radius:0 14px 14px 0;
}
.article-quote p{ font:300 1.12rem/1.65 var(--serif); font-style:italic; color:var(--text); }
.article-quote footer{ margin-top:12px; font:600 .82rem/1 var(--sans); color:var(--faint); }
.unlock-note{
  margin-top:34px; padding:16px 22px;
  border:1px solid rgba(113,191,111,.4); border-radius:12px;
  background:rgba(113,191,111,.08);
  font-size:.94rem; color:var(--text);
}
.article-main .onepager{ margin-top:26px; max-width:none; }

/* gate form card */
.gate-card{
  position:sticky; top:104px;
  background:#F4F6F9; border:1px solid #E3E7EE; border-radius:var(--radius);
  padding:30px 30px 26px;
  color:#22314A;
}
.gate-title{ font:500 1.35rem/1.3 var(--serif); color:#17253A; }
.gate-sub{ font-size:.88rem; line-height:1.6; color:#5A6B80; margin-top:10px; }
.gate-card form{ margin-top:22px; display:flex; flex-direction:column; gap:14px; }
.gate-card label{
  font:600 .78rem/1.4 var(--sans); color:#3D4B5E;
  display:flex; flex-direction:column; gap:6px;
}
.gate-card label span{ color:#C0392B; }
.gate-card input{
  font:400 .95rem/1.4 var(--sans); color:#17253A;
  padding:12px 14px; border:1px solid #C9D2DF; border-radius:10px;
  background:#fff; outline:none;
  transition:border-color .25s, box-shadow .25s;
}
.gate-card input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(226,164,75,.18); }
.gate-card input.err{ border-color:#C0392B; }
.gate-card .btn{ margin-top:6px; width:100%; }
.gate-fine{ font-size:.74rem; color:#8A97A8; text-align:center; }
.gate-card.done{ display:none; }

@media (max-width:1080px){
  .article-grid{ grid-template-columns:1fr; }
  .gate-card{ position:static; max-width:460px; }
}

/* v7.1 fix: keep required asterisk inline with the label text */
.gate-card label{ display:block; }
.gate-card input{ width:100%; margin-top:6px; display:block; }

/* ============================================================
   V10 — program detail pages
   ============================================================ */
.prog-hero{ padding-bottom:clamp(48px,6vw,72px); }
.prog-hero-grid{
  display:grid; grid-template-columns:1.25fr .75fr;
  gap:clamp(36px,5vw,64px); align-items:start;
}
.prog-hero h1{ font-size:clamp(1.9rem,3.4vw,2.95rem); }
.prog-hero .hero-cta{ margin-top:30px; }
.what-card{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--hairline); border-radius:var(--radius);
  padding:28px 30px; margin-top:12px;
}
.what-title{
  font:600 .76rem/1 var(--sans); letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px;
}
.what-card p{ color:var(--muted); font-size:.95rem; }

/* facts band */
.pfacts-band{
  padding:34px 0; border-block:1px solid var(--hairline);
  background:rgba(255,255,255,.016);
}
.pfacts{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.pfacts .pfact{ padding:0 24px; border-left:1px solid var(--hairline); }
.pfacts .pfact:first-child{ border-left:0; padding-left:0; }
.pfacts dt{
  font:600 .72rem/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold);
}
.pfacts dd{ margin-top:9px; font-size:.95rem; line-height:1.55; color:var(--text); }

/* journey steps */
.pjourney{ background:var(--ink-deep); border-bottom:1px solid var(--hairline); }
.pstep-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.pstep{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--hairline); border-radius:var(--radius);
  padding:26px 26px 24px;
  transition:transform .35s var(--ease), border-color .35s;
}
.pstep:hover{ transform:translateY(-5px); border-color:rgba(113,191,111,.4); }
.pstep-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pstep-num{ font:500 .8rem/1 var(--sans); letter-spacing:.2em; color:var(--gold); }
.pstep-dur{
  font:600 .68rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  color:var(--green); border:1px solid rgba(113,191,111,.3); border-radius:999px;
  padding:7px 11px; white-space:nowrap;
}
.pstep h3{ font-size:1.2rem; margin-top:14px; line-height:1.3; }
.pstep p{ color:var(--muted); font-size:.9rem; margin-top:10px; }
.pstep-list{ list-style:none; margin-top:16px; }
.pstep-list li{
  display:flex; gap:10px; align-items:baseline;
  padding:8px 0; font-size:.85rem; color:var(--muted);
  border-top:1px solid rgba(255,255,255,.055);
}
.pstep-list li::before{
  content:''; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--green); transform:translateY(-2px);
}

/* feature block */
.pfeat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,60px); align-items:center; }
.pfeature .kicker{ margin-bottom:18px; }
.pfeat-body{ color:var(--muted); margin-top:16px; }
.pfeat-list{ list-style:none; margin-top:20px; }
.pfeat-list li{
  display:flex; gap:12px; align-items:baseline;
  padding:11px 0; font-size:.92rem; color:var(--muted);
  border-top:1px solid rgba(255,255,255,.055);
}
.pfeat-list li::before{
  content:''; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--gold); transform:translateY(-2px);
}
.pfeat-del{
  margin-top:22px; padding:14px 20px;
  border:1px solid var(--gold-soft); border-radius:12px;
  background:rgba(226,164,75,.07);
  font-size:.9rem; color:var(--text);
}
.pfeat-img img{
  width:100%; border-radius:var(--radius);
  border:1px solid var(--hairline);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}

/* deep questions grid */
.deepq{ background:var(--ink-deep); border-block:1px solid var(--hairline); }
.dgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px 30px; }
.dcol h3{
  font:600 .8rem/1.4 var(--sans); letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold); padding-bottom:12px; border-bottom:1px solid var(--hairline);
}
.dcol ul{ list-style:none; margin-top:6px; }
.dcol li{ padding:9px 0; font-size:.9rem; color:var(--muted); }

/* what we do cards */
.wgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.wcard{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--hairline); border-radius:var(--radius);
  padding:28px 26px;
  transition:transform .35s var(--ease), border-color .35s;
}
.wcard:hover{ transform:translateY(-5px); border-color:var(--gold-soft); }
.wcard h3{ font-size:1.14rem; }
.wcard p{ color:var(--muted); font-size:.9rem; margin-top:11px; }

/* benefits + closer */
.pben-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.pben h3{
  font:600 .84rem/1.4 var(--sans); letter-spacing:.11em; text-transform:uppercase;
  color:var(--text);
}
.pben p{ color:var(--muted); font-size:.9rem; margin-top:11px; }
.pcloser{
  margin-top:clamp(48px,6vw,70px);
  border:1px solid rgba(113,191,111,.3); border-radius:var(--radius);
  background:
    radial-gradient(700px 240px at 50% 0%, rgba(113,191,111,.08), transparent 70%),
    rgba(255,255,255,.02);
  padding:clamp(34px,4vw,46px); text-align:center;
}
.pcloser-lead{
  font:300 clamp(1.35rem,2.4vw,1.85rem)/1.4 var(--serif); color:var(--text);
}
.pcloser p + p{ margin-top:16px; color:var(--muted); max-width:70ch; margin-inline:auto; font-size:.98rem; }

@media (max-width:1080px){
  .prog-hero-grid{ grid-template-columns:1fr; }
  .pfacts{ grid-template-columns:1fr 1fr; row-gap:26px; }
  .pfacts .pfact:nth-child(3){ border-left:0; padding-left:0; }
  .pstep-grid{ grid-template-columns:1fr 1fr; }
  .pfeat-grid{ grid-template-columns:1fr; }
  .dgrid{ grid-template-columns:1fr 1fr; }
  .wgrid{ grid-template-columns:1fr 1fr; }
  .pben-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .pfacts{ grid-template-columns:1fr; }
  .pfacts .pfact{ border-left:0; padding-left:0; }
  .pstep-grid{ grid-template-columns:1fr; }
  .dgrid{ grid-template-columns:1fr; }
  .wgrid{ grid-template-columns:1fr; }
  .pben-grid{ grid-template-columns:1fr; }
}

/* v10 fix: tighten the registered mark inside kicker eyebrows */
.kicker sup{ font-size:.6em; letter-spacing:0; margin-left:-.08em; }

/* v10 fix: feature block without an image becomes a balanced two-column text block */
.pfeat-grid--solo{ display:block; max-width:920px; }
.pfeat-grid--solo .pfeat-list{
  columns:2; column-gap:44px; margin-top:26px;
}
.pfeat-grid--solo .pfeat-list li{ break-inside:avoid; }
@media (max-width:760px){ .pfeat-grid--solo .pfeat-list{ columns:1; } }

/* ============================================================
   V11 — Knowledge page
   ============================================================ */
.hero--knowledge{
  background:
    radial-gradient(1100px 520px at 80% -10%, rgba(95,211,228,.10), transparent 60%),
    #050A12;
}
.hero--knowledge .hero-media img{
  top:-2%; right:-6%; height:106%; min-width:62%;
  -webkit-mask-image:linear-gradient(to left, #000 66%, transparent 99%);
          mask-image:linear-gradient(to left, #000 66%, transparent 99%);
}
.hero--knowledge .hero-media::after{
  background:
    linear-gradient(to bottom, rgba(5,10,18,.92), rgba(5,10,18,.30) 12%, transparent 24%),
    linear-gradient(90deg, #050A12 30%, rgba(5,10,18,.94) 42%, rgba(5,10,18,.35) 56%, rgba(5,10,18,.02) 70%, rgba(5,10,18,.22) 100%);
}
.hero--knowledge .hero-fade{ background:linear-gradient(to bottom, transparent, var(--ink)); }
.hero-glow--cool{
  background:
    radial-gradient(600px 400px at 68% 40%, rgba(95,211,228,.12), transparent 65%),
    radial-gradient(680px 400px at 58% 100%, rgba(113,191,111,.08), transparent 60%);
}
.hero--knowledge h1{ font-size:clamp(2.05rem, 3.8vw, 3.3rem); }

/* resource cards */
.kgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.kcard{
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--hairline); border-radius:var(--radius);
  padding:32px 30px 28px;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.kcard:hover{
  transform:translateY(-6px); border-color:var(--gold-soft);
  box-shadow:0 24px 52px rgba(0,0,0,.38);
}
.kcard-ic{
  display:flex; align-items:center; justify-content:center;
  width:62px; height:62px; border-radius:50%;
  border:1px solid var(--hairline); background:rgba(255,255,255,.03);
}
.kcard-ic svg{ width:32px; height:32px; }
.kcard-ic .ln{ fill:none; stroke:var(--gold); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.kcard h3{ font-size:1.42rem; margin-top:20px; }
.kcard > p{ color:var(--muted); font-size:.93rem; margin-top:12px; }
.kcard ul{ list-style:none; margin-top:20px; }
.kcard li{
  display:flex; gap:11px; align-items:baseline;
  padding:9px 0; font-size:.87rem; color:var(--muted);
  border-top:1px solid rgba(255,255,255,.055);
}
.kcard li::before{
  content:''; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--green); transform:translateY(-2px);
}
.kcard .tile-link{ margin-top:auto; padding-top:22px; }

/* frameworks */
.frameworks{ background:var(--ink-deep); border-block:1px solid var(--hairline); }
.fwgrid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.fwcard{
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--hairline); border-radius:var(--radius);
  overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.fwcard:hover{
  transform:translateY(-5px); border-color:rgba(113,191,111,.4);
  box-shadow:0 24px 52px rgba(0,0,0,.38);
}
.fwcard figure{ background:#fff; overflow:hidden; }
.fwcard img{ width:100%; display:block; transition:transform .6s var(--ease); }
.fwcard:hover img{ transform:scale(1.03); }
.fwcard-body{ display:flex; flex-direction:column; flex:1; padding:26px 28px 26px; }
.fwcard h3{ font-size:1.24rem; line-height:1.35; }
.fwcard p{ color:var(--muted); font-size:.91rem; margin:12px 0 20px; flex:1; }
.fwcard .btn{ align-self:flex-start; }
.fw-note{
  margin-top:34px; text-align:center;
  font-size:.88rem; color:var(--faint);
}

/* knowledge quote */
.kquote{ text-align:center; padding-block:clamp(72px,8vw,104px); }
.kquote blockquote p{
  font:300 clamp(1.5rem,3vw,2.3rem)/1.45 var(--serif);
  color:var(--text); max-width:900px; margin-inline:auto;
}
.kquote blockquote em{ color:var(--gold-hi); }
.kquote-sub{ margin-top:24px; color:var(--muted); font-size:1rem; }

/* framework gate modal */
.fw-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; }
.fw-modal[hidden]{ display:none; }
.fw-backdrop{ position:absolute; inset:0; background:rgba(4,9,16,.78); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.fw-dialog{
  position:relative; width:min(100%, 430px);
  background:#F4F6F9; border:1px solid #E3E7EE; border-radius:var(--radius);
  padding:32px 32px 26px; color:#22314A;
  box-shadow:0 40px 90px rgba(0,0,0,.5);
  max-height:90vh; overflow:auto;
}
.fw-dialog .gate-title{ padding-right:30px; }
.fw-dialog form{ margin-top:20px; display:flex; flex-direction:column; gap:14px; }
.fw-x{
  position:absolute; top:14px; right:16px;
  background:none; border:0; cursor:pointer;
  font-size:1.6rem; line-height:1; color:#7A8798;
  padding:4px 8px; border-radius:8px;
}
.fw-x:hover{ color:#22314A; }

@media (max-width:1080px){
  .kgrid{ grid-template-columns:1fr; }
  .fwgrid{ grid-template-columns:1fr; }
}

/* ============================================================
   V12 — AI tools, access code, advisor bios
   ============================================================ */

/* inactive / coming-soon affordance */
.is-soon{
  opacity:.62; cursor:default; pointer-events:none;
  display:inline-flex; align-items:center; gap:9px;
}
.soon-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--green); flex:none;
  box-shadow:0 0 0 3px rgba(113,191,111,.16);
  animation:soonPulse 2.4s ease-in-out infinite;
}
@keyframes soonPulse{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
.kcard .tile-link.is-soon{ color:var(--faint); }
.btn.is-soon{ border-style:dashed; }

/* knowledge: 4-up resource grid */
.kgrid{ grid-template-columns:repeat(4,1fr); gap:22px; }
.kcard{ padding:28px 24px 24px; }
.kcard h3{ font-size:1.24rem; }

/* AI tools */
.aitools{ background:var(--ink-deep); border-block:1px solid var(--hairline); }
.aigrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.aicard{
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--hairline); border-radius:var(--radius);
  padding:28px 24px 24px;
  transition:transform .35s var(--ease), border-color .35s;
}
.aicard:hover{ transform:translateY(-5px); border-color:rgba(95,211,228,.32); }
.aicard-ic{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:16px;
  border:1px solid var(--hairline); background:rgba(95,211,228,.05);
}
.aicard-ic svg{ width:30px; height:30px; }
.aicard-ic .ln{ fill:none; stroke:var(--cyan); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.aicard h3{ font-size:1.14rem; margin-top:18px; line-height:1.3; }
.aicard > p{ color:var(--muted); font-size:.88rem; margin-top:10px; }
.aicard ul{ list-style:none; margin-top:16px; }
.aicard li{
  display:flex; gap:10px; align-items:baseline;
  padding:8px 0; font-size:.82rem; color:var(--muted);
  border-top:1px solid rgba(255,255,255,.055);
}
.aicard li::before{
  content:''; flex:none; width:5px; height:5px; border-radius:50%;
  background:var(--cyan); transform:translateY(-2px);
}
.aicard .btn{ margin-top:auto; align-self:flex-start; margin-top:20px; }

/* frameworks access code */
.fw-access{
  margin-top:34px;
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(24px,4vw,50px); align-items:center;
  border:1px solid var(--hairline); border-radius:var(--radius);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  padding:30px 34px;
}
.fw-access-title{ font:500 1.16rem/1.3 var(--serif); color:var(--text); }
.fw-access-sub{ font-size:.9rem; color:var(--muted); margin-top:8px; }
.fw-code-form{ display:flex; gap:10px; }
.fw-code-form input{
  flex:1; min-width:0;
  font:400 .95rem/1.4 var(--sans); color:var(--text);
  padding:13px 16px; border-radius:10px;
  border:1px solid var(--hairline); background:rgba(255,255,255,.04);
  outline:none; transition:border-color .25s, box-shadow .25s;
}
.fw-code-form input::placeholder{ color:var(--faint); }
.fw-code-form input:focus{ border-color:var(--gold-soft); box-shadow:0 0 0 3px rgba(226,164,75,.14); }
.fw-code-form input.err{ border-color:#D66A6A; }
.fw-code-msg{ font-size:.85rem; margin-top:10px; min-height:1.2em; }
.fw-code-msg.bad{ color:#DE8383; }
.fw-code-msg.good{ color:var(--green); }
.fw-request{ font-size:.85rem; color:var(--faint); margin-top:8px; }
.fw-request a{ color:var(--gold-hi); }

/* advisor card read-bio */
.member figure{ position:relative; }
.read-bio{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 10px;
  font:600 .8rem/1 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:var(--text);
  background:linear-gradient(to top, rgba(7,16,25,.92), rgba(7,16,25,.55));
  opacity:0; transform:translateY(8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), color .25s;
}
.member:hover .read-bio, .read-bio:focus-visible{ opacity:1; transform:none; }
.read-bio:hover{ color:var(--gold-hi); }
.member h3 a{ transition:color .25s; }
.member h3 a:hover{ color:var(--gold-hi); }
@media (hover:none){ .read-bio{ opacity:1; transform:none; } }

/* bio page */
.bio-hero{ padding:150px 0 0; border-bottom:0; background:var(--ink); }
.bio{ padding-top:34px; }
.bio-grid{
  display:grid; grid-template-columns:360px 1fr;
  gap:clamp(36px,5vw,70px); align-items:start;
}
.bio-photo img{
  width:100%; border-radius:var(--radius);
  border:1px solid var(--hairline);
  box-shadow:0 26px 60px rgba(0,0,0,.42);
}
.bio-copy h1{ font-size:clamp(2.1rem,3.6vw,3rem); }
.bio-role{
  margin-top:12px;
  font:600 .84rem/1.4 var(--sans); letter-spacing:.11em; text-transform:uppercase;
  color:var(--gold);
}
.bio-past{ margin-top:8px; font-size:.92rem; color:var(--faint); }
.bio-copy > p:not(.bio-role):not(.bio-past){
  color:var(--muted); margin-top:20px; max-width:64ch; line-height:1.8;
}
.bio-pending{ font-style:italic; }
.bio-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.bio-actions .arrow{ transition:transform .3s var(--ease); }
.bio-actions .btn-outline:hover .arrow{ transform:translateX(-3px); }
.bio-more{ border-top:1px solid var(--hairline); padding-block:clamp(48px,6vw,70px); }
.bio-links{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.bio-links a{
  font:500 .9rem/1 var(--sans); color:var(--muted);
  border:1px solid var(--hairline); border-radius:999px;
  padding:12px 20px; transition:border-color .25s, color .25s;
}
.bio-links a:hover{ border-color:var(--gold-soft); color:var(--gold-hi); }

@media (max-width:1080px){
  .kgrid{ grid-template-columns:1fr 1fr; }
  .aigrid{ grid-template-columns:1fr 1fr; }
  .fw-access{ grid-template-columns:1fr; }
  .bio-grid{ grid-template-columns:1fr; }
  .bio-photo{ max-width:320px; }
}
@media (max-width:640px){
  .kgrid{ grid-template-columns:1fr; }
  .aigrid{ grid-template-columns:1fr; }
  .fw-code-form{ flex-direction:column; }
}

/* ============================================================
   V13 — read-bio affordance, legal pages, footer legal links
   ============================================================ */

/* ---------- advisor card: whole photo is the link ---------- */
.member figure{ position:relative; overflow:hidden; }
.member img{ transition:transform .6s var(--ease), filter .4s var(--ease); }
.member:hover img{ transform:scale(1.045); filter:saturate(1); }

.read-bio{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:flex-end; justify-content:center;
  padding:20px 14px;
  background:linear-gradient(to top,
    rgba(7,16,25,.92) 0%, rgba(7,16,25,.62) 32%, rgba(7,16,25,.06) 74%, transparent 100%);
  opacity:0;
  transition:opacity .32s var(--ease);
}
.rb-pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 22px; border-radius:999px;
  border:1px solid var(--gold-soft);
  background:rgba(7,16,25,.72);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  font:600 .78rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-hi); white-space:nowrap;
  transform:translateY(10px);
  transition:transform .32s var(--ease), background .25s, color .25s, border-color .25s;
}
.rb-pill .arrow{ transition:transform .25s var(--ease); }
.member:hover .read-bio,
.member:focus-within .read-bio{ opacity:1; }
.member:hover .rb-pill,
.member:focus-within .rb-pill{ transform:none; }
.read-bio:hover .rb-pill{
  background:var(--gold); border-color:var(--gold); color:var(--ink-deep);
}
.read-bio:hover .rb-pill .arrow{ transform:translateX(4px); }
.read-bio:focus-visible{
  opacity:1; outline:2px solid var(--gold-hi); outline-offset:-5px;
}
@media (hover:none){
  .read-bio{
    opacity:1;
    background:linear-gradient(to top, rgba(7,16,25,.88) 0%, rgba(7,16,25,.35) 40%, transparent 78%);
  }
  .rb-pill{ transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .member:hover img{ transform:none; }
  .rb-pill{ transform:none; }
}

/* ---------- footer legal links ---------- */
.footer-bar{ align-items:baseline; }
.footer-legal{ display:flex; align-items:center; gap:10px; }
.footer-legal a{ color:var(--muted); transition:color .25s; }
.footer-legal a:hover{ color:var(--gold-hi); }
.footer-legal span{ color:rgba(255,255,255,.22); }
.footer-bar p:last-child{ font-family:var(--serif); font-style:italic; }
.footer-tag{ font-family:var(--serif); font-style:italic; }

/* ---------- legal pages ---------- */
.legal-hero{ padding-bottom:8px; }
.legal-eff{
  margin-top:20px;
  font:600 .8rem/1 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint);
}
.legal{ padding-top:clamp(34px,4vw,52px); }
.legal-body{ max-width:var(--shell); }
.legal-body > *{ max-width:820px; }
.legal-body > p{
  color:var(--muted); line-height:1.85; margin-top:18px; font-size:1.01rem;
}
.legal-body > p:first-child{
  margin-top:0; font-size:1.1rem; color:var(--text);
}
.legal-body h2{
  margin-top:52px; padding-top:26px;
  border-top:1px solid var(--hairline);
  font-size:clamp(1.25rem,2vw,1.55rem); font-weight:500;
  letter-spacing:-.01em;
}
.legal-body h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.legal-body h3{
  margin-top:32px; font-size:1.06rem; font-weight:500; color:var(--text);
}
.legal-body strong{ color:var(--text); font-weight:600; }
.legal-list{
  list-style:none; margin:18px 0 0; padding:0;
  display:grid; gap:13px;
}
.legal-list li{
  position:relative; padding-left:26px;
  color:var(--muted); line-height:1.8;
}
.legal-list li::before{
  content:''; position:absolute; left:2px; top:.72em;
  width:7px; height:7px; border-radius:50%;
  background:var(--gold); opacity:.85;
}
.legal-contact{
  margin-top:22px; padding:24px 26px;
  border:1px solid var(--hairline); border-left:2px solid var(--gold-soft);
  border-radius:var(--radius);
  background:var(--surface);
  font-style:normal; line-height:2; color:var(--muted); font-size:.97rem;
}
.legal-contact a{ color:var(--gold-hi); }
.legal-contact a:hover{ text-decoration:underline; }

@media (max-width:640px){
  .footer-bar{ flex-direction:column; align-items:flex-start; gap:12px; }
  .legal-body h2{ margin-top:40px; }
}

/* ============================================================
   V14 — Let's Connect page
   ============================================================ */
.connect-hero{
  position:relative; overflow:hidden;
  padding:clamp(140px,13vw,178px) 0 clamp(70px,8vw,110px);
  border-bottom:1px solid var(--hairline);
  background:
    radial-gradient(900px 520px at 12% 6%, rgba(113,191,111,.07), transparent 62%),
    radial-gradient(900px 620px at 88% 82%, rgba(226,164,75,.075), transparent 64%),
    var(--ink);
}
.connect-veil{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.055) 1px, transparent 0);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(680px 480px at 20% 30%, #000, transparent 72%);
          mask-image:radial-gradient(680px 480px at 20% 30%, #000, transparent 72%);
}
.connect-grid{
  position:relative;
  display:grid; grid-template-columns:1fr 1.02fr; gap:clamp(40px,5vw,76px);
  align-items:start;
}
.connect-copy h1{ margin-top:20px; font-size:clamp(2.4rem,4.4vw,3.7rem); }
.connect-copy .lede{ margin-top:22px; max-width:44ch; }

.connect-direct{
  display:flex; flex-wrap:wrap; gap:44px;
  margin-top:44px; padding-top:32px;
  border-top:1px solid var(--hairline);
}
.cd-label{
  font:600 .72rem/1 var(--sans); letter-spacing:.19em; text-transform:uppercase;
  color:var(--faint);
}
.cd-value{
  display:inline-block; margin-top:12px;
  font-family:var(--serif); font-size:1.32rem; color:var(--text);
  transition:color .25s;
}
.cd-value:hover{ color:var(--gold-hi); }

.connect-book{
  margin-top:38px; padding:26px 28px;
  border:1px solid var(--hairline); border-left:2px solid var(--gold-soft);
  border-radius:var(--radius);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
}
.cb-title{ font-family:var(--serif); font-size:1.12rem; color:var(--text); }
.cb-sub{ margin-top:7px; font-size:.9rem; color:var(--faint); }
.connect-book .btn{ margin-top:18px; }

/* ---- form card ---- */
.connect-card{
  background:linear-gradient(180deg, rgba(20,32,50,.96), rgba(12,22,37,.96));
  border:1px solid var(--hairline); border-radius:calc(var(--radius) + 6px);
  box-shadow:0 34px 90px rgba(0,0,0,.46);
  padding:clamp(30px,3.4vw,46px);
}
.cc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
.cc-head h2{ font-size:clamp(1.5rem,2.2vw,1.95rem); }
.cc-step{
  font:600 .72rem/1 var(--sans); letter-spacing:.2em; color:var(--faint); white-space:nowrap;
}
#connectForm{ margin-top:30px; display:grid; gap:20px; }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cf-field{ display:block; }
.cf-field > span{
  display:block; margin-bottom:9px;
  font:600 .72rem/1 var(--sans); letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted);
}
.cf-field > span i{ color:var(--gold); font-style:normal; margin-left:3px; }
.cf-field input, .cf-field textarea{
  width:100%; background:transparent;
  border:0; border-bottom:1px solid rgba(255,255,255,.14);
  padding:11px 2px; color:var(--text);
  font:400 1rem/1.5 var(--sans);
  transition:border-color .25s, background .25s;
}
.cf-field textarea{ resize:vertical; min-height:104px; }
.cf-field input::placeholder, .cf-field textarea::placeholder{ color:rgba(198,210,226,.34); }
.cf-field input:focus, .cf-field textarea:focus{
  outline:none; border-bottom-color:var(--gold);
}
.cf-field input.err, .cf-field textarea.err{ border-bottom-color:#DE8383; }
.cf-foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:18px; margin-top:6px;
}
.cf-note{ font-size:.84rem; color:var(--faint); }
.cf-legal{ font-size:.78rem; color:var(--faint); }
.cf-legal a{ color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.cf-legal a:hover{ color:var(--gold-hi); }

/* ---- success state ---- */
.cc-done{ text-align:left; }
.cc-done.in{ animation:ccIn .5s var(--ease) both; }
@keyframes ccIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.cc-tick{
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; margin-bottom:24px;
  background:rgba(113,191,111,.13); border:1px solid rgba(113,191,111,.42);
}
.cc-tick svg{ width:26px; height:26px; fill:none; stroke:var(--green); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.cc-done h2{ margin-top:14px; font-size:clamp(1.5rem,2.2vw,2rem); }
.cc-done-sub{ margin-top:16px; color:var(--muted); max-width:46ch; line-height:1.75; }
.cc-done .btn{ margin-top:28px; }
.cc-done-meta{ margin-top:16px; font-size:.82rem; color:var(--faint); }

@media (max-width:980px){
  .connect-grid{ grid-template-columns:1fr; gap:24px; }
  .connect-copy .lede{ max-width:none; }
  .connect-copy h1{ margin-top:0; }
  /* on a phone the form is the point of the page — lift it above the
     contact details instead of making people scroll past them */
  .connect-copy{ display:contents; }
  .connect-copy .kicker{ order:1; }
  .connect-copy h1{ order:2; }
  .connect-copy .lede{ order:3; margin-top:0; margin-bottom:8px; }
  .connect-card{ order:4; }
  .connect-direct{ order:5; margin-top:14px; padding-top:26px; }
  .connect-book{ order:6; margin-top:0; }
}
@media (max-width:560px){
  .cf-row{ grid-template-columns:1fr; }
  .connect-direct{ gap:26px; }
  .cf-foot{ flex-direction:column; align-items:stretch; }
  .cf-foot .btn{ justify-content:center; }
}

/* hidden must win over component display rules (e.g. #connectForm's grid) */
[hidden]{ display:none !important; }
.cc-head{ align-items:flex-start; }
.cc-head h2{ max-width:16ch; }

/* ============================================================
   V15 — Services hero legibility (RP: headline overlapped the path)
   ============================================================ */
/* The glowing path swept in far enough left to run behind "find", "deep",
   "market" and the lede. Push the picture right and deepen the scrim under
   the copy column so the type always sits on dark ground. */
.hero--services .hero-media img{
  top:auto; bottom:-4%; height:112%;
  right:-13%;
  -webkit-mask-image:linear-gradient(to left, #000 66%, transparent 99%);
          mask-image:linear-gradient(to left, #000 66%, transparent 99%);
}
.hero--services .hero-media::after{
  background:
    linear-gradient(to bottom, rgba(7,16,25,.92), rgba(7,16,25,.38) 12%, transparent 24%),
    linear-gradient(90deg,
      var(--ink) 20%,
      rgba(8,17,29,.94) 38%,
      rgba(9,19,32,.62) 52%,
      rgba(10,20,36,.14) 70%,
      rgba(10,20,36,.30) 100%),
    linear-gradient(to top, rgba(10,20,36,.55), transparent 34%);
}
.hero--services .hero-copy{ max-width:620px; }
@media (max-width:1180px){
  .hero--services .hero-media img{ right:-26%; }
}

/* ============================================================
   V15 — Articles: index + light reading pages
   ============================================================ */

/* ---------- index ---------- */
.art-hero{ padding-bottom:10px; }
.art-hero h1{ max-width:16ch; }
.art-list{ padding-top:clamp(34px,4vw,54px); }
.art-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.art-card{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--hairline); border-radius:var(--radius);
  padding:clamp(26px,2.6vw,36px);
  display:flex; flex-direction:column;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.art-card:not(.is-soon):hover{
  transform:translateY(-5px); border-color:var(--gold-soft);
  box-shadow:0 22px 48px rgba(0,0,0,.36);
}
.ac-cat{
  font:600 .71rem/1 var(--sans); letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold);
}
.art-card h2{ margin-top:16px; font-size:clamp(1.35rem,1.9vw,1.7rem); line-height:1.25; }
.ac-teaser{ margin-top:14px; color:var(--muted); line-height:1.72; flex:1; }
.ac-link{
  margin-top:24px; align-self:flex-start;
  font:600 .84rem/1 var(--sans); letter-spacing:.03em; color:var(--gold-hi);
  display:inline-flex; align-items:center; gap:9px;
}
.ac-link .arrow{ transition:transform .25s var(--ease); }
.ac-link:hover .arrow{ transform:translateX(5px); }
.ac-soon{
  margin-top:24px; font:600 .74rem/1 var(--sans); letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint);
  display:inline-flex; align-items:center; gap:9px;
}
.ac-soon::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--gold); opacity:.55; animation:soonPulse 2.4s ease-in-out infinite;
}
@keyframes soonPulse{ 0%,100%{ opacity:.25; } 50%{ opacity:.8; } }
.art-card.is-soon{ opacity:.72; }

/* ---------- the reading page (light) ---------- */
.post-hero{
  padding:clamp(138px,13vw,172px) 0 clamp(40px,4.6vw,62px);
  background:
    radial-gradient(900px 420px at 16% 0%, rgba(113,191,111,.08), transparent 62%),
    var(--ink);
  border-bottom:1px solid var(--hairline);
}
.post-cat{
  margin-top:22px;
  font:600 .73rem/1 var(--sans); letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold);
}
.post-hero h1{
  margin-top:18px; max-width:19ch;
  font-size:clamp(2.3rem,4.4vw,3.5rem); line-height:1.13;
}
.post-sub{
  margin-top:20px; max-width:52ch;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.1rem,1.7vw,1.35rem); color:var(--gold-hi);
}
.post-meta{
  margin-top:26px; display:flex; align-items:center; gap:12px;
  font:500 .86rem/1 var(--sans); color:var(--faint);
}
.post-meta .dot{ opacity:.5; }

.post-wrap{
  background:#F7F5F0;
  color:#1B2430;
  padding:clamp(52px,6vw,84px) 0 clamp(46px,5vw,72px);
}
.post-body{ max-width:var(--shell); }
.post-body > *{ max-width:680px; }
.post-body > p{
  font-size:1.08rem; line-height:1.85; color:#2B3644; margin-top:22px;
}
.post-body > p:first-child{
  font-size:1.24rem; line-height:1.72; color:#141C27;
}
.post-body h2{
  margin-top:54px; font-size:clamp(1.5rem,2.4vw,2rem);
  color:#101922; font-weight:400; letter-spacing:-.005em;
}
.post-body h2 + p{ margin-top:16px; }
.post-body em{ font-style:italic; }
.post-body a{ color:#1F6B4E; text-decoration:underline; text-underline-offset:3px; }

.post-quote{
  max-width:760px; margin:44px 0 0;
  padding:6px 0 6px 28px; border-left:3px solid var(--gold);
}
.post-quote p{
  font-family:var(--serif); font-size:clamp(1.3rem,2.2vw,1.72rem);
  line-height:1.4; color:#0F1821;
}
.post-lead{
  margin-top:34px; padding:24px 26px;
  background:#FFFFFF; border:1px solid #E4DFD4; border-left:2px solid var(--green);
  border-radius:10px;
}
.post-lead h3{
  font:600 .82rem/1.4 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:#2F6535;
}
.post-lead p{ margin-top:11px; color:#39424F; line-height:1.78; }

.post-fig{
  max-width:760px; margin:46px 0 0;
  padding:30px 26px 22px; background:#FFFFFF;
  border:1px solid #E4DFD4; border-radius:14px;
}
.post-fig .dia{ display:block; width:100%; height:auto; }
.post-fig figcaption{
  margin-top:18px; padding-top:16px; border-top:1px solid #EDE8DE;
  font-size:.87rem; line-height:1.6; color:#5A6474;
}

.post-cta{
  max-width:760px; margin-top:56px; padding:32px 34px;
  border-radius:14px; background:var(--ink);
  box-shadow:0 24px 60px rgba(10,20,36,.22);
}
.pc-title{ font-family:var(--serif); font-size:1.42rem; color:#F2F5F9; }
.pc-sub{ margin-top:10px; color:#9FB0C4; line-height:1.7; }
.post-cta .btn{ margin-top:22px; }
.post-back{ margin-top:38px; }
.post-back a{
  font:600 .84rem/1 var(--sans); color:#5A6474;
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
}
.post-back a:hover{ color:#1F6B4E; }
.post-back .arrow{ transition:transform .25s var(--ease); }
.post-back a:hover .arrow{ transform:translateX(-4px); }

/* ---------- keep reading ---------- */
.post-more{ background:var(--ink-deep); border-top:1px solid var(--hairline); }
.more-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:26px; }
.more-card{
  display:block; padding:28px 30px;
  border:1px solid var(--hairline); border-radius:var(--radius);
  background:var(--surface);
  transition:border-color .3s, transform .3s var(--ease);
}
.more-card:not(.is-soon):hover{ border-color:var(--gold-soft); transform:translateY(-4px); }
.mc-cat{
  font:600 .7rem/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.mc-title{ margin-top:13px; font-family:var(--serif); font-size:1.22rem; color:var(--text); line-height:1.32; }
.mc-go{
  margin-top:18px; display:inline-flex; align-items:center; gap:8px;
  font:600 .8rem/1 var(--sans); color:var(--muted);
}
.more-card:not(.is-soon):hover .mc-go{ color:var(--gold-hi); }
.more-card.is-soon{ opacity:.66; }

@media (max-width:900px){
  .art-grid{ grid-template-columns:1fr; }
  .more-grid{ grid-template-columns:1fr; }
  .post-body > p:first-child{ font-size:1.14rem; }
}

/* On the light article pages the translucent header let body text show
   through as it scrolled underneath. Solid there, unchanged elsewhere. */
body:has(.post-wrap) .site-header.scrolled{
  background:rgba(7,16,25,.97);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
@supports not selector(:has(*)){
  .site-header.scrolled{ background:rgba(7,16,25,.94); }
}

/* ---------- V16: article lists and the two-role compare block ---------- */
.post-list{
  list-style:none; margin:20px 0 0; padding:0;
  display:grid; gap:11px; max-width:680px;
}
.post-list li{
  position:relative; padding-left:26px;
  color:#39424F; line-height:1.75; font-size:1.02rem;
}
.post-list li::before{
  content:''; position:absolute; left:3px; top:.68em;
  width:7px; height:7px; border-radius:50%; background:var(--gold);
}
.post-pair{
  max-width:760px; margin-top:34px;
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.post-pair > div{
  padding:26px 26px 28px; background:#FFFFFF;
  border:1px solid #E4DFD4; border-radius:12px;
}
.post-pair > div:first-child{ border-top:2px solid var(--green); }
.post-pair > div:last-child{ border-top:2px solid var(--gold); }
.post-pair h3{
  font-family:var(--serif); font-size:1.28rem; color:#101922; font-weight:400;
}
.post-pair p{ margin-top:12px; color:#39424F; line-height:1.75; font-size:.99rem; }
@media (max-width:900px){
  .post-pair{ grid-template-columns:1fr; }
}

/* three-need cards — real markup so they stack on a phone */
.post-fig--cards{ padding:28px 24px 20px; }
.needs-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.nc{
  padding:22px 20px 24px; border-radius:12px; text-align:center;
  border:1px solid transparent;
}
.nc--u1{ background:rgba(113,191,111,.13); border-color:rgba(113,191,111,.45); }
.nc--u2{ background:rgba(226,164,75,.15);  border-color:rgba(226,164,75,.5); }
.nc--u3{ background:rgba(95,211,228,.14);  border-color:rgba(95,211,228,.45); }
.nc-n{
  display:grid; place-items:center; width:34px; height:34px; margin:0 auto 14px;
  border-radius:50%; font:600 .95rem/1 var(--sans);
}
.nc--u1 .nc-n{ background:rgba(113,191,111,.32); color:#2A5C2E; }
.nc--u2 .nc-n{ background:rgba(226,164,75,.34);  color:#6E4A11; }
.nc--u3 .nc-n{ background:rgba(95,211,228,.32);  color:#13525F; }
.nc-t{ font:600 .84rem/1 var(--sans); letter-spacing:.13em; text-transform:uppercase; }
.nc--u1 .nc-t{ color:#2A5C2E; } .nc--u2 .nc-t{ color:#6E4A11; } .nc--u3 .nc-t{ color:#13525F; }
.nc-d{ margin-top:11px; font-size:.9rem; line-height:1.5; color:#4A5462; }
@media (max-width:620px){
  .needs-3{ grid-template-columns:1fr; gap:12px; }
  .nc{ display:grid; grid-template-columns:34px 1fr; gap:0 16px; text-align:left; align-items:center; }
  .nc-n{ margin:0; grid-row:span 2; }
  .nc-d{ margin-top:4px; }
}

/* ---------- V17: article photographs ---------- */
.post-photo{
  max-width:680px; margin:38px 0 0;
}
.post-photo img{
  display:block; width:100%; height:auto;
  border-radius:12px; border:1px solid #E4DFD4;
  background:#FFFFFF;
}
.post-photo figcaption{
  margin-top:12px; font-size:.85rem; line-height:1.55; color:#5A6474;
}
@media (max-width:620px){
  .post-photo{ max-width:100% !important; }
}

/* ============================================================
   V17 — flag language switcher, accessibility, performance
   ============================================================ */

/* ---------- screen-reader-only text ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:200;
  background:var(--gold); color:var(--ink-deep);
  font:600 .88rem/1 var(--sans); padding:14px 20px; border-radius:0 0 10px 10px;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:0; }

/* ---------- flags ---------- */
.lang-switch{ display:inline-flex; align-items:center; gap:7px; }
.lang-flag{
  display:grid; place-items:center;
  width:42px; height:30px; border-radius:5px; overflow:hidden;
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  opacity:1; transition:opacity .25s, border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.lang-flag svg{ width:100%; height:100%; display:block; }
a.lang-flag:hover{ border-color:var(--gold); transform:translateY(-1px) scale(1.04);
  box-shadow:0 4px 14px rgba(0,0,0,.45); }
a.lang-flag:focus-visible{ opacity:1; outline:2px solid var(--gold-hi); outline-offset:2px; }
.lang-flag.is-on{ opacity:1; border-color:var(--gold); }
.lang-flag.is-soon{ opacity:.92; cursor:default; }
.f-col .lang-switch{ margin-top:16px; }

/* ---------- visible focus everywhere (WCAG 2.4.7 / 2.4.11) ---------- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--gold-hi); outline-offset:3px; border-radius:3px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--gold-hi); outline-offset:2px;
}
/* form fields: a resting edge you can actually see, and an unmistakable focus */
.cf-field input, .cf-field textarea,
.gate-form input, #fwForm input, #fwCode{
  border-bottom-color:rgba(255,255,255,.34) !important;
}
.cf-field input:focus, .cf-field textarea:focus,
.gate-form input:focus, #fwForm input:focus, #fwCode:focus{
  border-bottom-color:var(--gold) !important;
  background:rgba(226,164,75,.06);
}
.cf-field input.err, .cf-field textarea.err,
.gate-form input.err, #fwForm input.err, #fwCode.err{
  border-bottom-color:#F0908A !important;
}
/* error text, so a mistake is not signalled by colour alone (WCAG 1.4.1 / 3.3.1) */
.field-err,
.cf-field > span.field-err{
  display:block; margin:7px 0 0;
  font:500 .8rem/1.4 var(--sans) !important;
  letter-spacing:normal !important; text-transform:none !important;
  color:#F0908A;
}
.field-err::before{ content:'\26A0\FE0E'; margin-right:6px; }

/* ---------- marquee: pause control + reduced motion ---------- */
.logo-strip{ position:relative; }
.marquee{ position:relative; }
.marquee-pause{
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  z-index:4; display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  background:rgba(10,20,36,.08); border:1px solid rgba(10,20,36,.16);
  color:#20304A; cursor:pointer; transition:background .25s, border-color .25s;
}
.marquee-pause:hover{ background:rgba(10,20,36,.14); border-color:rgba(10,20,36,.3); }
.marquee-pause svg{ width:13px; height:13px; fill:currentColor; }
.marquee.is-paused .marquee-track{ animation-play-state:paused !important; }
@media (prefers-reduced-motion:reduce){
  .marquee-track{ animation:none !important; }
}

/* ---------- bigger slider dots (WCAG 2.5.8 target size) ---------- */
.quote-dots button{
  width:24px !important; height:24px !important;
  display:grid; place-items:center; background:none; border:0; padding:0; cursor:pointer;
}
.quote-dots button::after{
  content:''; width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.26); transition:background .25s, transform .25s;
}
.quote-dots button.is-active::after{ background:var(--gold); transform:scale(1.15); }
.quote-pause{
  margin-left:10px; width:24px; height:24px; display:grid; place-items:center;
  background:none; border:0; color:var(--faint); cursor:pointer; transition:color .25s;
}
.quote-pause:hover{ color:var(--gold-hi); }
.quote-pause svg{ width:11px; height:11px; fill:currentColor; }

/* visible label on the access-code field (was placeholder-only) */
.fw-code-label{
  display:block; margin-bottom:9px;
  font:600 .72rem/1 var(--sans); letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted);
}
.fw-code-form{ align-items:flex-end; }

/* header height must flex once labels are Japanese (J-05 / R-04) */
.header-inner{ height:auto !important; min-height:88px; }
@media (max-width:640px){ .header-inner{ min-height:80px; } }

/* ---------- 320px reflow (WCAG 1.4.10) ----------
   The hero headline uses non-breaking spaces to keep phrases together, which
   at 320px produced a single unbreakable 332px word and scrolled the page
   sideways. Below 420px the type steps down and long tokens may break. */
@media (max-width:420px){
  h1{ font-size:clamp(1.95rem, 9.2vw, 2.4rem); }
  h1, h2, .post-hero h1, .hero h1{ overflow-wrap:break-word; }
  .hero-copy .lede, .section-sub{ overflow-wrap:break-word; }
}
html, body{ overflow-x:hidden; }

/* header spacing now that flags sit beside the nav */
.header-inner{ gap:20px; }
.nav-extra{ display:flex; align-items:center; gap:13px; margin-left:6px; }
.nav-extra .btn-sm{ white-space:nowrap; }
@media (max-width:1500px){
  .main-nav{ gap:26px; }
  .lang-flag{ width:38px; height:27px; }
}
@media (max-width:1240px){
  .main-nav{ gap:20px; }
  .main-nav > a{ font-size:.88rem; }
}

/* ---------- V18: stop images being stretched by their width/height attributes ----------
   .bio-photo img and .book-cover img set width:100% in CSS but carried literal
   width/height attributes, so the browser held the attribute height and squashed
   the picture (RP reported this on the bios; the book cover had it too). */
.bio-photo img, .book-cover img{ height:auto; }

/* ============================================================
   V18 — tree circuit animation
   The overlay is masked by a trace map extracted from the hero image itself,
   so the light always sits exactly on the circuitry no matter how the picture
   is cropped or scaled. Two layers at different speeds give the flow depth.
   ============================================================ */
.hero-media--tree{ position:absolute; inset:0; }
.tree-flow{
  position:absolute; top:-4%; right:-4%;
  height:110%; width:auto; aspect-ratio:2005 / 2400;
  min-width:52%; max-width:100%;
  pointer-events:none;
  /* mask-size:cover mirrors the image's object-fit:cover, so the traces stay
     registered to the photo even when min-width forces a wider box */
  -webkit-mask-image:url('../assets/img/hero_tree_traces.png');
          mask-image:url('../assets/img/hero_tree_traces.png');
  -webkit-mask-size:cover; mask-size:cover;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  mix-blend-mode:screen;
  opacity:0;
  animation:treeFade 1.6s var(--ease) 1.1s forwards,
            heroDrift 26s var(--ease) infinite alternate;
}
.tree-flow--b{ animation-delay:1.4s, 0s; }
@keyframes treeFade{ to{ opacity:1; } }

/* the light itself: bands of glow sweeping from the roots up into the crown */
/* the moving light sits on an inner element and travels with transform, which
   the compositor can handle without repainting the layer every frame */
.tree-flow{ overflow:hidden; }
.tree-flow > i{
  position:absolute; left:0; right:0; bottom:0;
  height:300%; display:block;
  will-change:transform;
}
.tree-flow--a > i{
  background:linear-gradient(to top,
    transparent 0%, rgba(95,211,228,0) 9%, rgba(95,211,228,.85) 14%, rgba(160,238,248,.95) 16%,
    rgba(95,211,228,0) 22%, transparent 40%,
    rgba(226,214,110,0) 55%, rgba(233,226,130,.8) 60%, rgba(247,242,180,.92) 62%,
    rgba(226,214,110,0) 68%, transparent 100%);
  animation:treeRise 7.5s linear 1.1s infinite;
}
.tree-flow--b > i{
  background:linear-gradient(to top,
    transparent 0%, rgba(113,191,111,0) 20%, rgba(113,191,111,.5) 26%, rgba(170,230,160,.62) 28%,
    rgba(113,191,111,0) 34%, transparent 100%);
  animation:treeRise 11s linear 1.4s infinite;
}
.tree-flow--b{ opacity:0; }
@keyframes treeRise{
  from{ transform:translate3d(0, 0, 0); }
  to{   transform:translate3d(0, -66.666%, 0); }
}
/* a faint always-on lift so the circuitry reads as powered, not just lit in passes */
.hero-media--tree::after{
  content:''; position:absolute; top:-4%; right:-4%;
  height:110%; width:auto; aspect-ratio:2005 / 2400; min-width:52%; max-width:100%;
  -webkit-mask-image:url('../assets/img/hero_tree_traces.png');
          mask-image:url('../assets/img/hero_tree_traces.png');
  -webkit-mask-size:cover; mask-size:cover;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  animation:heroDrift 26s var(--ease) infinite alternate;
  background:rgba(140,225,240,.10);
  mix-blend-mode:screen; pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .tree-flow, .tree-flow > i{ animation:none !important; }
  .tree-flow{ opacity:0 !important; }
  .hero-media--tree::after{ background:rgba(140,225,240,.07); }
}
@media (max-width:900px){
  .tree-flow, .hero-media--tree::after{ right:-24%; height:104%; }
}

/* ============================================================
   V19 — Services and Method hero animations
   Same technique as the tree: the light trails were extracted from each
   photograph into an alpha mask, so the glow can never drift off the artwork.
   Each hero positions its picture differently, so each flow layer repeats
   that hero's own geometry.
   ============================================================ */
.hero-media--path, .hero-media--river{ position:absolute; inset:0; }
.hero-flow{
  position:absolute; pointer-events:none; overflow:hidden;
  -webkit-mask-size:cover; mask-size:cover;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  mix-blend-mode:screen;
  opacity:0;
  animation:treeFade 1.6s var(--ease) 1.1s forwards,
            heroDrift 26s var(--ease) infinite alternate;
}
.hero-flow > i{
  position:absolute; left:0; right:0; bottom:0;
  height:300%; display:block; will-change:transform;
}

/* Services — the green data trail winding up the jungle path */
.hero-flow--path{
  top:auto; bottom:-4%; right:-13%;
  height:112%; width:auto; aspect-ratio:2367 / 1800; min-width:52%; max-width:100%;
  -webkit-mask-image:url('../assets/img/hero_jungle_traces.png');
          mask-image:url('../assets/img/hero_jungle_traces.png');
}
.hero-flow--path > i{
  background:linear-gradient(to top,
    transparent 0%, rgba(113,191,111,0) 10%, rgba(120,235,150,.9) 15%, rgba(190,255,205,.98) 17%,
    rgba(113,191,111,0) 24%, transparent 100%);
  animation:treeRise 6.5s linear 1.1s infinite;
}

/* Method — light running along the river and its tributaries */
.hero-flow--river{
  top:-4%; right:-4%;
  height:112%; width:auto; aspect-ratio:2537 / 1800; min-width:52%; max-width:100%;
  -webkit-mask-image:url('../assets/img/hero_river_traces.png');
          mask-image:url('../assets/img/hero_river_traces.png');
}
.hero-flow--river > i{
  background:linear-gradient(to top,
    transparent 0%, rgba(255,214,150,0) 12%, rgba(255,222,160,.85) 17%, rgba(255,244,215,.95) 19%,
    rgba(255,214,150,0) 26%, transparent 100%);
  animation:treeRise 8.5s linear 1.3s infinite;
}

@media (prefers-reduced-motion:reduce){
  .hero-flow, .hero-flow > i{ animation:none !important; }
  .hero-flow{ opacity:0 !important; }
}
@media (max-width:1180px){
  .hero-flow--path{ right:-26%; }
}
@media (max-width:900px){
  /* the river photo picks up the generic mobile offset; the overlay must too */
  .hero-flow--river{ right:-24%; }
}


/* ============================================================
   V20 — Japanese typography
   Japanese is not Latin type at a different size. It needs its own line
   breaking, its own leading, no letter-spacing, and no italics — a browser
   faking an oblique from a Japanese face looks wrong to a Japanese reader.
   ============================================================ */
:lang(ja){
  /* kinsoku shori: never start a line with 。or 」, never end with 「 */
  line-break:strict;
  word-break:normal;
  overflow-wrap:anywhere;
  /* proportional metrics tighten the gaps around Japanese punctuation */
  font-feature-settings:"palt" 1;
  /* never let the browser synthesise a bold or an oblique from a JP face */
  font-synthesis:none;
  -webkit-font-synthesis:none;
}
html[lang="ja"] body{
  font-family:'Noto Sans JP', var(--sans);
  letter-spacing:normal;
  line-height:1.9;
}
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3,
html[lang="ja"] .mc-title,
html[lang="ja"] .cd-value{
  font-family:'Noto Serif JP', var(--serif);
  font-weight:400;
  letter-spacing:.01em;
  line-height:1.45;
}
html[lang="ja"] h1{ line-height:1.38; }
/* Latin tracking must not carry over — it looks like broken spacing in kana */
html[lang="ja"] .kicker,
html[lang="ja"] .f-title,
html[lang="ja"] .btn,
html[lang="ja"] .main-nav > a,
html[lang="ja"] .cd-label{
  letter-spacing:.04em; text-transform:none;
}
html[lang="ja"] .lede,
html[lang="ja"] .section-sub,
html[lang="ja"] p{ line-height:1.95; }

/* Japanese has no italic. Emphasis becomes colour and a heavier weight,
   which is what RP's own Japanese concept does. */
html[lang="ja"] em,
html[lang="ja"] h1 em,
html[lang="ja"] i{
  font-style:normal;
  font-weight:600;
  color:var(--gold-hi);
}
/* the type floor: 11.8px kanji is not readable */
html[lang="ja"] .kicker,
html[lang="ja"] .f-title,
html[lang="ja"] .footer-bar,
html[lang="ja"] .cd-label,
html[lang="ja"] .post-meta{ font-size:.82rem; }
html[lang="ja"] .brand-tag, html[lang="ja"] .m-past{ font-size:.85rem; }

/* labels get longer in Japanese; nothing may be pinned to a fixed height
   or forbidden from wrapping */
html[lang="ja"] .header-inner{ height:auto; min-height:88px; }
html[lang="ja"] .nav-extra .btn-sm{ white-space:normal; }
html[lang="ja"] .btn{ height:auto; min-height:44px; padding-block:12px; }

.hero--jp .hero-copy{ max-width:660px; }
.jp-note{
  margin-top:28px; padding:16px 20px;
  border:1px solid var(--hairline); border-left:2px solid var(--gold-soft);
  border-radius:var(--radius);
  background:rgba(20,32,50,.5);
  font-size:.95rem; color:var(--muted); max-width:52ch;
}

/* Japanese headlines need a smaller step on narrow screens — kanji carry more
   weight per character than Latin, so the same size runs long and strands a
   fragment on its own line */
@media (max-width:560px){
  html[lang="ja"] h1{ font-size:clamp(1.65rem, 7.4vw, 2.1rem); line-height:1.42; }
  html[lang="ja"] .lede{ font-size:1rem; }
  html[lang="ja"] .kicker{ font-size:.74rem; }
}

/* ---------- V21: Japanese small labels ----------
   Latin tracking and the small Latin sizes carry over into every label class,
   and in kana that reads as broken spacing at an unreadable size. */
html[lang="ja"] .panel-title,
html[lang="ja"] .band-label,
html[lang="ja"] .tile-tag,
html[lang="ja"] .strip-label,
html[lang="ja"] .text-link,
html[lang="ja"] .tile-link,
html[lang="ja"] .who-panel h3,
html[lang="ja"] .tile-metrics dd,
html[lang="ja"] .byline,
html[lang="ja"] .cta-meta,
html[lang="ja"] .edition-chip,
html[lang="ja"] .carlson footer span{
  letter-spacing:.03em; text-transform:none;
}
html[lang="ja"] .panel-title,
html[lang="ja"] .band-label,
html[lang="ja"] .strip-label,
html[lang="ja"] .tile-tag{ font-size:.8rem; }
html[lang="ja"] .who-panel h3{ font-size:1.02rem; }
html[lang="ja"] .tile-metrics dd{ font-size:.8rem; line-height:1.5; }
html[lang="ja"] .tile-sum{ line-height:1.8; }
html[lang="ja"] .byline, html[lang="ja"] .cta-meta{ font-size:.88rem; }

/* the Japanese CTA carries two full sentences where the English carries one */
html[lang="ja"] .cta-inner h2{ font-size:clamp(1.5rem,2.6vw,2.15rem); line-height:1.6; }
html[lang="ja"] .carlson p{ font-size:clamp(1.05rem,1.7vw,1.3rem); line-height:1.9; }

/* ---------- V22: Japanese phrase-unit line breaking (文節改行) ----------
   Browsers break Japanese wherever the line runs out, which strands fragments
   like へ。 on a line of their own. Wrapping each phrase unit in .nw makes the
   break fall at a natural boundary instead. Scoped to headings so it cannot
   cause the overflow that a blanket nowrap would.
   To adjust a headline, change which units are wrapped — nothing else. */
h1 .nw, h2 .nw, h3 .nw, .lede .nw{
  display:inline-block;      /* keeps the unit whole */
  white-space:nowrap;
}
@media (max-width:420px){
  /* on the narrowest screens a long unit must still be allowed to break
     rather than push the page sideways */
  h1 .nw, h2 .nw, h3 .nw, .lede .nw{ white-space:normal; }
}

/* Honeypot: a field no person ever sees, and most bots cannot resist filling.
   Kept out of the layout and out of the tab order, and never announced. */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px;
     overflow:hidden; opacity:0; pointer-events:none; }