/* ============================================================
   Colab4Growth — page built on the Toyota Land Cruiser FJ
   vehicle-page layout system.
   Brand tokens sampled from colab4growth.com.
   ============================================================ */

:root{
  --ink:          #051521;   /* darkest text / dark panels      */
  --ink-2:        #0d2233;
  --deep-green:   #022601;   /* brand deep green                */
  --lime:         #84BF04;   /* brand accent                    */
  --lime-dk:      #6da003;
  --orange:       #F2780C;   /* secondary accent                */
  --grey:         #5A676F;   /* body copy                       */
  --grey-2:       #8B8C90;
  --ghost:        #CCD1D9;   /* oversized eyebrow labels        */
  --light:        #EFF0F0;   /* light section background        */
  --line:         #dfe3e6;
  --white:        #fff;

  --gutter: 40px;
  --maxw: 1280px;

  --f-head: 'Outfit', system-ui, sans-serif;
  --f-body: 'DM Sans', system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--f-head); font-weight:700; margin:0; line-height:1.1}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}
.section{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}

/* --- shared type scale lifted from the reference page --- */
.h-section{font-size:40px; letter-spacing:-.01em}
.lede{font-size:24px; line-height:1.45; color:var(--grey-2); font-weight:400; margin:16px 0 0}
.eyebrow-ghost{
  font-family:var(--f-head); font-size:32px; font-weight:700;
  color:var(--ghost); margin:0 0 4px; letter-spacing:-.01em;
}

/* --- buttons: pill outline / pill solid, as per reference --- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  height:48px; padding:0 26px; border-radius:999px;
  font-family:var(--f-body); font-size:16px; font-weight:500;
  border:1px solid var(--ink); background:var(--white); color:var(--ink);
  cursor:pointer; transition:.2s ease; white-space:nowrap;
}
.btn:hover{background:var(--ink); color:var(--white)}
.btn--solid{background:var(--ink); color:var(--white)}
.btn--solid:hover{background:var(--lime); border-color:var(--lime); color:var(--ink)}
.btn--lime{background:var(--lime); border-color:var(--lime); color:var(--ink); font-weight:700}
.btn--lime:hover{background:var(--lime-dk); border-color:var(--lime-dk)}
.btn--light{border-color:#fff; background:transparent; color:#fff}
.btn--light:hover{background:#fff; color:var(--ink)}
.btn .chev{font-size:13px; opacity:.7}

/* ============================================================
   1. UTILITY HEADER
   ============================================================ */
.util{
  position:sticky; top:0; z-index:200;
  background:var(--white); border-bottom:1px solid var(--line);
}
.util__in{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  height:62px; display:flex; align-items:center; gap:28px;
}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--f-head); font-weight:800; font-size:19px; letter-spacing:-.02em}
.util__nav{display:flex; align-items:center; gap:24px; font-size:15px; margin-right:auto}
.util__nav > a{
  display:flex; align-items:center; gap:6px; padding:20px 0;
  border-bottom:2px solid transparent;
}
.util__nav > a:hover{border-bottom-color:var(--lime)}
.util__nav .is-active{color:var(--lime-dk); border-bottom-color:var(--lime)}
.util__nav .caret{font-size:9px; opacity:.55}
.util__icons{display:flex; align-items:center; gap:8px}
.icon-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; background:#fff; cursor:pointer; font-size:15px;
}
.icon-btn:hover{border-color:var(--ink)}
.util .btn{height:40px; padding:0 20px; font-size:14px}

/* ============================================================
   2. STICKY MODEL SUB-NAV  (dark bar)
   ============================================================ */
.subnav{
  position:sticky; top:62px; z-index:190;
  background:var(--ink); color:#fff;
}
.subnav__in{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  height:86px; display:flex; align-items:center; gap:32px;
}
.subnav a{
  font-size:15px; padding:31px 0; border-bottom:3px solid transparent;
  display:flex; align-items:center; gap:8px; color:#cfd6db; white-space:nowrap;
}
.subnav a:hover{color:#fff}
.subnav a.is-active{color:#fff; border-bottom-color:#fff}
.subnav .spacer{margin-left:auto; flex:1 1 auto; min-width:12px}
.subnav .btn{height:44px; padding:0 22px; font-size:15px; flex:none; border-bottom-width:1px}

/* ============================================================
   3. HERO
   ============================================================ */
.hero{
  position:relative; min-height:660px; display:flex; flex-direction:column;
  color:#fff; overflow:hidden;
}
.hero__media{position:absolute; inset:0; z-index:0}
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(5,21,33,.82) 0%, rgba(5,21,33,.45) 45%, rgba(5,21,33,.15) 100%);
}
.crumbs{
  position:relative; z-index:2; max-width:var(--maxw); width:100%;
  margin:0 auto; padding:26px var(--gutter) 0;
  display:flex; align-items:center; gap:10px; font-size:14px; color:#e6ebee;
}
.crumbs .sep{opacity:.5}
.crumbs b{font-weight:700}
.hero__body{
  position:relative; z-index:2; max-width:var(--maxw); width:100%;
  margin:auto auto 0; padding:0 var(--gutter) 72px;
}
.hero h1{
  font-size:clamp(44px,5.6vw,72px); font-weight:800; text-transform:uppercase;
  letter-spacing:-.02em; line-height:.96; max-width:16ch;
}
.hero__tag{font-size:20px; margin:16px 0 30px; color:#e9eef1}
.hero__cta{display:flex; gap:16px; flex-wrap:wrap}
.hero .btn{background:#fff; border-color:#fff; color:var(--ink)}
.hero .btn:hover{background:var(--lime); border-color:var(--lime)}

/* ============================================================
   4. INTRO
   ============================================================ */
.intro{padding:64px 0 8px}
.intro .lede{max-width:none}

/* ============================================================
   5. TRACK SELECTOR  (reference: VX / GX model switcher)
   ============================================================ */
.selector{display:flex; flex-direction:column; gap:0; padding:56px 0 24px}
.tabs{display:flex; gap:38px; border-bottom:1px solid var(--line)}
.tab{
  background:none; border:0; padding:0 0 14px; cursor:pointer;
  font-family:var(--f-body); font-size:16px; color:var(--grey-2);
  border-bottom:3px solid transparent; margin-bottom:-1px;
}
.tab[aria-selected="true"]{color:var(--ink); font-weight:700; border-bottom-color:var(--lime)}

.selector__grid{display:grid; grid-template-columns:1fr 400px; gap:56px; padding-top:34px}
.selector__stage{position:relative}
.stage-img{
  aspect-ratio:16/10; border-radius:4px; overflow:hidden;
  background:linear-gradient(135deg,#dfe6ea,#c3ced6);
  display:grid; place-items:center;
}
.swatches{display:flex; align-items:center; gap:12px; margin-top:22px}
.swatch{width:26px; height:26px; border-radius:50%; border:1px solid var(--line); cursor:pointer}
.swatch[aria-checked="true"]{outline:2px solid var(--ink); outline-offset:3px}
.swatch-label{font-size:14px; font-weight:700; color:#6A6B70; margin-left:8px}

.pricecard{background:var(--ink); color:#fff; border-radius:6px; padding:34px 28px; align-self:start}
.pricecard h3{font-size:18px; font-weight:500}
.pricecard .amount{font-family:var(--f-head); font-size:34px; font-weight:700; margin:14px 0 2px}
.pricecard .amount small{font-size:14px; font-weight:400; color:#9fb0bb; display:block; margin-bottom:4px}
.pricecard ul{list-style:none; margin:22px 0 26px; padding:0; display:grid; gap:11px; font-size:14px; color:#c3ced6}
.pricecard li{display:flex; gap:10px}
.pricecard li::before{content:'—'; color:var(--lime)}
.pricecard .row{display:flex; gap:12px; flex-wrap:wrap}
.pricecard .btn{height:44px; font-size:15px}

/* ============================================================
   6. SUMMARY STATS  (reference: Specification Summary)
   ============================================================ */
.summary{padding:56px 0 12px}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:30px}
.stat__v{font-family:var(--f-head); font-size:30px; font-weight:700; line-height:1.15}
.stat__v span{font-size:18px; font-weight:500; color:var(--grey-2)}
.stat__l{font-size:12px; color:var(--grey-2); margin-top:6px; line-height:1.4}
.finePrint{font-size:10.5px; color:var(--grey-2); margin-top:26px}
.summary__cta{display:flex; gap:16px; flex-wrap:wrap; margin-top:26px}

/* ============================================================
   7. FEATURE SECTIONS  (the five steps)
   ============================================================ */
.feature{padding:74px 0 0}
.feature .lede{max-width:none}
.feature__media{
  margin-top:44px; aspect-ratio:16/9; border-radius:4px; overflow:hidden;
  display:grid; place-items:center;
}
.step-badge{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
  font-family:var(--f-body); font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--lime-dk);
}
.step-badge::before{content:''; width:26px; height:2px; background:var(--lime)}

/* image placeholders — swap these for real photography */
.ph{
  width:100%; height:100%; display:grid; place-items:center; text-align:center;
  font-family:var(--f-body); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.85);
}
.ph--1{background:linear-gradient(135deg,#0d2233,#2e5c3a)}
.ph--2{background:linear-gradient(135deg,#123020,#84BF04)}
.ph--3{background:linear-gradient(135deg,#022601,#5A676F)}
.ph--4{background:linear-gradient(135deg,#0d2233,#F2780C)}
.ph--5{background:linear-gradient(135deg,#1f3d2a,#CCD1D9)}
.ph--hero{
  background:linear-gradient(120deg,#04121d 0%,#123020 45%,#2c4a35 100%);
  height:100%; place-items:start end; padding:26px 32px 0 0; text-align:right;
}
.ph--soft{background:linear-gradient(135deg,#e3e9ec,#c8d3da); color:var(--grey)}

/* ============================================================
   8. GALLERY  (reference: Feature Picture Gallery)
   ============================================================ */
.gallery{padding:80px 0 0}
.gallery__head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap}
.gallery__tabs{display:flex; gap:30px; margin-top:26px; border-bottom:1px solid var(--line)}
.gal-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px}
.gal-item{position:relative; border-radius:4px; overflow:hidden}
.gal-item--tall{aspect-ratio:16/10}
.gal-item--short{aspect-ratio:16/8}
.gal-item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:18px 20px;
  background:linear-gradient(transparent,rgba(5,21,33,.85));
  color:#fff; font-size:15px; font-weight:500;
}
.hot{
  position:absolute; width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--ink);
  display:grid; place-items:center; font-size:13px; font-style:italic; font-weight:700;
  cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.hot:hover{background:var(--lime)}

/* ============================================================
   9. DISCLAIMER
   ============================================================ */
.disclaimer{padding:52px 0 0}
.disclaimer p{font-size:11px; line-height:1.7; color:var(--grey-2); margin:0}

/* ============================================================
   10. INCLUDED CARD  (reference: Owner Benefits, dark)
   ============================================================ */
.included-wrap{padding:60px 0 0; display:flex; justify-content:center}
.included{
  background:#282830; color:#fff; border-radius:6px;
  max-width:768px; width:100%; padding:48px 54px;
}
.included h2{font-size:30px; margin-bottom:8px}
.included p.sub{color:#b9bec6; font-size:15px; margin:0 0 22px}
.included ul{list-style:none; margin:0; padding:0; display:grid; gap:14px; font-size:16px}
.included li{display:flex; gap:14px; align-items:flex-start}
.included li::before{content:'✓'; color:var(--lime); font-weight:700}

/* ============================================================
   11. READY-TO block  (reference: Change Derivative panel)
   ============================================================ */
.ready{padding:70px 0 0}
.ready__bar{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; padding-bottom:22px; border-bottom:1px solid var(--line);
}
.ready__bar .name{font-family:var(--f-head); font-size:20px; font-weight:700; text-transform:uppercase}
.ready__bar .price{font-family:var(--f-head); font-size:26px; font-weight:700}
.ready h2{font-size:30px; margin:30px 0 26px}
.ready__cols{display:grid; grid-template-columns:1fr 1fr; gap:40px}
.ready__cols h4{font-size:19px; margin-bottom:8px}
.ready__cols p{margin:0; color:var(--grey); font-size:15px}
.ready__cta{display:flex; gap:16px; flex-wrap:wrap; margin-top:34px}

/* ============================================================
   12. WAYS TO WORK  (reference: Finance & Subscription tabs)
   ============================================================ */
.ways{padding:80px 0 0}
.ways__panel{border:1px solid var(--line); border-radius:6px; margin-top:26px; overflow:hidden}
.acc__head{
  width:100%; background:#fff; border:0; border-bottom:1px solid var(--line);
  padding:26px 28px; display:flex; align-items:center; gap:16px; cursor:pointer; text-align:left;
  font-family:var(--f-head); font-size:20px; font-weight:700; color:var(--ink);
}
.acc__head .plus{
  margin-left:auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; font-size:17px; color:var(--grey); flex:none;
}
.acc[open] .plus{background:var(--ink); border-color:var(--ink); color:#fff}
.acc__body{padding:30px 28px 34px; display:grid; grid-template-columns:1.35fr 1fr; gap:44px}
.acc__body p.blurb{margin:0 0 22px; color:var(--grey); font-size:15px}
.spec-row{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px}
.spec-row span:first-child{color:var(--grey); display:flex; align-items:center; gap:7px}
.spec-row span:last-child{font-weight:700}
.info{
  width:15px; height:15px; border-radius:50%; background:var(--light); color:var(--grey);
  display:inline-grid; place-items:center; font-size:9px; font-style:italic; font-weight:700;
}
.quote-box{background:var(--light); border-radius:6px; padding:28px; align-self:start}
.quote-box .k{font-size:13px; color:var(--grey); text-transform:uppercase; letter-spacing:.1em; font-weight:700}
.quote-box .big{font-family:var(--f-head); font-size:30px; font-weight:700; margin:10px 0 4px}
.quote-box .note{font-size:12px; color:var(--grey); margin:16px 0 20px; line-height:1.6}
.glossary{margin-top:34px}
.glossary h4{font-size:17px; margin-bottom:12px}
.glossary .g{padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; display:flex; justify-content:space-between; cursor:pointer}

/* ============================================================
   13. PARTNER STRIP  (reference: insurance promo, light grey)
   ============================================================ */
.promo{background:var(--light); margin-top:70px}
.promo__in{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch;
}
.promo__copy{padding:56px 60px 56px 0}
.promo__copy h2{font-size:30px; margin-bottom:16px; max-width:16ch}
.promo__copy p{color:var(--grey); font-size:15px; margin:0 0 26px}
.promo__img{min-height:342px; border-radius:4px; overflow:hidden}

/* ============================================================
   14. FIND US  (reference: Find A Dealer)
   ============================================================ */
.finder{padding:62px 0}
.finder__box{
  border-radius:6px; overflow:hidden; min-height:230px;
  display:grid; grid-template-columns:360px 1fr;
}
.finder__form{background:var(--ink); color:#fff; padding:36px 30px}
.finder__form h3{font-size:22px; margin-bottom:8px}
.finder__form p{color:#9fb0bb; font-size:14px; margin:0 0 20px}
.finder__form .line{display:block; font-size:16px; margin-bottom:10px}
.finder__map{background:linear-gradient(135deg,#dde5e9,#c2ced6); display:grid; place-items:center}

/* ============================================================
   15. CLIENT STORY CARDS  (reference: Related Vehicles)
   ============================================================ */
.stories{padding:20px 0 0}
.story-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:34px}
.story{border-radius:6px; overflow:hidden; position:relative; min-height:430px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff}
.story__bg{position:absolute; inset:0}
.story__bg::after{content:''; position:absolute; inset:0; background:linear-gradient(transparent 35%, rgba(5,21,33,.9))}
.story__in{position:relative; z-index:2; padding:0 26px 26px}
.story h3{font-family:var(--f-head); font-size:30px; font-weight:600}
.story .metric{font-family:var(--f-head); font-size:20px; font-weight:600; margin:4px 0 18px; color:var(--lime)}
.story .btn{background:#fff; border-color:#fff}

/* ============================================================
   16. STICKY SECTION PILL NAV
   ============================================================ */
.pillnav{
  position:sticky; bottom:0; z-index:150; background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px); border-top:1px solid var(--line);
}
.pillnav__in{
  max-width:var(--maxw); margin:0 auto; padding:12px var(--gutter);
  display:flex; align-items:center; gap:10px; overflow-x:auto;
}
.pillnav a{
  padding:8px 18px; border-radius:999px; border:1px solid var(--line);
  font-size:14px; white-space:nowrap; color:var(--grey);
}
.pillnav a:hover{border-color:var(--ink); color:var(--ink)}
.pillnav a.is-active{background:var(--ink); border-color:var(--ink); color:#fff}
.pillnav .top{margin-left:auto; border:0; font-weight:700; color:var(--ink)}

/* ============================================================
   17. ARTICLES  (reference: Read Related Articles)
   ============================================================ */
.articles{padding:78px 0 100px}
.articles__k{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-2)}
.articles blockquote{
  font-family:var(--f-head); font-size:34px; font-weight:600; line-height:1.25;
  margin:18px 0 44px; max-width:24ch;
}
.art-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px}
.art{display:grid; grid-template-columns:200px 1fr; gap:22px; align-items:start}
.art__img{aspect-ratio:4/3; border-radius:4px; overflow:hidden}
.art__k{font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--lime-dk); font-weight:700}
.art h4{font-family:var(--f-head); font-size:19px; font-weight:700; text-transform:uppercase; margin:8px 0 10px; line-height:1.25}
.art p{margin:0; font-size:14px; color:var(--grey)}

/* ============================================================
   18. FOOTER
   ============================================================ */
footer{background:var(--ink); color:#c3ced6; padding:64px 0 30px}
.foot-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:34px}
footer .foot-title{font-family:var(--f-head); font-size:15px; line-height:1.1; color:#fff; margin:0 0 14px; font-weight:700}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:14px}
footer a:hover{color:var(--lime)}
.news input{
  width:100%; height:44px; border-radius:999px; border:1px solid #2a3d4c;
  background:#0b1e2c; color:#fff; padding:0 18px; font-family:var(--f-body); font-size:14px;
}
.news .btn{margin-top:12px; height:44px}
.foot-bottom{
  margin-top:48px; padding-top:22px; border-top:1px solid #1c2f3c;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13px;
}
.foot-bottom nav{display:flex; gap:22px; flex-wrap:wrap}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .selector__grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .acc__body{grid-template-columns:1fr}
  .story-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:repeat(3,1fr)}
  /* header wraps to two rows; the nav becomes a scrollable rail
     rather than disappearing with no replacement */
  .util__in{height:auto; flex-wrap:wrap; padding-block:12px; row-gap:0}
  .util__nav{
    order:3; width:100%; margin-right:0; gap:22px;
    overflow-x:auto; border-top:1px solid var(--line);
  }
  .util__nav > a{padding:12px 0; white-space:nowrap; font-size:14px}
  .logo{margin-right:auto}
}
@media (max-width:860px){
  :root{--gutter:20px}
  /* header collapses to: logo · CTA, nav on the row beneath */
  .util__in{gap:10px}
  .logo img{width:140px}
  .util__icons{display:none}
  .util .btn{padding:0 14px; font-size:13px; height:38px}
  .ph--hero{font-size:0}            /* placeholder label would collide with the breadcrumb */
  .ph{font-size:11px; padding:12px}
  /* long CTA labels must wrap rather than push the page sideways */
  .btn{white-space:normal; max-width:100%; height:auto; min-height:46px; padding-block:11px; text-align:center}
  .util .btn{white-space:nowrap; min-height:38px}
  .h-section{font-size:30px}
  .lede{font-size:19px}
  .eyebrow-ghost{font-size:26px}
  .subnav__in{gap:26px; overflow-x:auto; height:64px}
  .subnav a{padding:20px 0; white-space:nowrap}
  .subnav .spacer, .subnav .btn{display:none}
  .gal-grid, .ready__cols, .art-grid, .promo__in, .story-grid{grid-template-columns:1fr}
  .promo__copy{padding:44px 0}
  .finder__box{grid-template-columns:1fr}
  .art{grid-template-columns:1fr}
  .included{padding:34px 26px}
  .foot-grid{grid-template-columns:1fr 1fr}
}

/* ============================================================
   MULTI-PAGE ADDITIONS
   Components introduced by the Website Experience Blueprint
   (narrative journey, pillars, case studies, insights hub).
   ============================================================ */

/* --- page hero: typography-led, per blueprint designer notes --- */
.phero{position:relative; background:var(--ink); color:#fff; overflow:hidden}
.phero__media{position:absolute; inset:0}
/* Directional scrim: keeps the headline legible while the photograph stays visible. */
.phero__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(5,21,33,.95) 0%, rgba(5,21,33,.88) 34%, rgba(5,21,33,.62) 68%, rgba(5,21,33,.34) 100%);
}
.phero__media .ph{place-items:start end; padding:22px 28px 0 0; text-align:right}
.phero__in{
  position:relative; z-index:2; max-width:var(--maxw); margin:0 auto;
  padding:96px var(--gutter) 88px;
}
.phero__stage{
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--lime); margin-bottom:20px; display:flex; align-items:center; gap:12px;
}
.phero__stage::after{content:''; height:1px; width:56px; background:rgba(255,255,255,.28)}
.phero h1{font-size:clamp(38px,4.6vw,60px); font-weight:800; letter-spacing:-.02em; max-width:20ch}
.phero__copy{font-size:20px; line-height:1.55; color:#d3dbe0; max-width:62ch; margin:22px 0 0}
.phero__copy p{margin:0 0 12px}
.phero__cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}

/* --- section shell --- */
.band{padding:78px 0}
.band--tint{background:var(--light)}
.band--ink{background:var(--ink); color:#fff}
.band--ink .lede{color:#aab7c0}
.band--ink .h-section{color:#fff}
.band__head{max-width:none}
.kicker{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lime-dk); margin:0 0 14px;
}
.band--ink .kicker{color:var(--lime)}

/* --- three-column value / pillar cards --- */
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px}
.card{
  border:1px solid var(--line); border-radius:6px; padding:34px 30px; background:#fff;
  display:flex; flex-direction:column; gap:12px;
}
.band--ink .card{background:#0c2131; border-color:#1c3040}
.card__n{
  font-family:var(--f-head); font-size:13px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--lime-dk);
}
.band--ink .card__n{color:var(--lime)}
.card h3{font-size:22px; letter-spacing:-.01em}
.card p{margin:0; color:var(--grey); font-size:15px; line-height:1.6}
.band--ink .card p{color:#aab7c0}

/* --- numbered journey / framework stages --- */
.stages{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:44px; border-top:2px solid var(--ink)}
.band--ink .stages{border-top-color:var(--lime)}
.stage{padding:28px 30px 34px 0; border-right:1px solid var(--line)}
.stage:last-child{border-right:0}
.band--ink .stage{border-right-color:#1c3040}
.stage__n{font-family:var(--f-head); font-size:44px; font-weight:800; color:var(--ghost); line-height:1}
.band--ink .stage__n{color:#24445b}
.stage h3{font-size:21px; margin:12px 0 10px}
.stage p{margin:0; color:var(--grey); font-size:15px; line-height:1.6}
.band--ink .stage p{color:#aab7c0}
.stages__foot{
  margin-top:30px; font-family:var(--f-head); font-size:18px; font-weight:700;
  display:flex; align-items:center; gap:12px;
}
.stages__foot::before{content:''; width:30px; height:2px; background:var(--lime)}

/* --- split: copy beside media --- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
.split--flip .split__copy{order:2}
.split__media{aspect-ratio:4/3; border-radius:6px; overflow:hidden}
.split p{color:var(--grey); font-size:17px; line-height:1.65}
.band--ink .split p{color:#aab7c0}

/* --- case study (Enterprise Stories) --- */
.case{border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#fff; margin-top:26px}
.case__top{display:grid; grid-template-columns:300px 1fr; gap:0}
.case__img{min-height:230px}
.case__body{padding:32px 34px}
.case__body h3{font-size:26px; margin-bottom:6px}
.case__sector{font-size:13px; color:var(--grey-2); text-transform:uppercase; letter-spacing:.12em; font-weight:700}
.case__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:24px}
.case__grid h4{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--lime-dk);
  margin-bottom:8px; font-family:var(--f-body); font-weight:700;
}
.case__grid p{margin:0; font-size:15px; color:var(--grey); line-height:1.6}
.case__metrics{
  display:flex; gap:40px; flex-wrap:wrap; padding:22px 34px;
  border-top:1px solid var(--line); background:var(--light);
}
.case__metric .v{font-family:var(--f-head); font-size:26px; font-weight:700}
.case__metric .l{font-size:12px; color:var(--grey); margin-top:2px}

/* --- partner logo strip --- */
.logos{display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:38px}
.logo-slot{
  height:88px; border:1px solid var(--line); border-radius:4px;
  display:grid; place-items:center; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grey-2); background:#fff; text-align:center; padding:8px;
}

/* --- outcome metric row --- */
.outcomes{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:44px}
.outcome{border-top:2px solid var(--lime); padding-top:18px}
.outcome .v{font-family:var(--f-head); font-size:40px; font-weight:800; line-height:1}
.outcome .l{font-size:13px; color:var(--grey); margin-top:8px; line-height:1.45}
.band--ink .outcome .l{color:#aab7c0}

/* --- insights hub --- */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-top:30px}
.chip{
  padding:8px 18px; border-radius:999px; border:1px solid var(--line);
  background:#fff; font-family:var(--f-body); font-size:14px; color:var(--grey); cursor:pointer;
}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.search{
  margin-top:18px; display:flex; align-items:center; gap:10px; max-width:420px;
  border:1px solid var(--line); border-radius:999px; padding:0 18px; height:46px;
}
.search input{border:0; outline:0; flex:1; font-family:var(--f-body); font-size:15px; background:transparent}
.insight-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:34px}
.insight{display:flex; flex-direction:column; gap:14px}
.insight__img{aspect-ratio:3/2; border-radius:6px; overflow:hidden}
.insight__theme{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--lime-dk); font-weight:700}
.insight h3{font-size:19px; line-height:1.3}
.insight p{margin:0; font-size:14px; color:var(--grey); line-height:1.6}
.insight .more{font-size:14px; font-weight:700; margin-top:auto; padding-top:6px}

/* --- resource list --- */
.resources{display:grid; gap:0; margin-top:34px; border-top:1px solid var(--line)}
.resource{
  display:grid; grid-template-columns:130px 1fr auto; gap:26px; align-items:center;
  padding:24px 0; border-bottom:1px solid var(--line);
}
.resource__img{aspect-ratio:3/4; border-radius:4px; overflow:hidden; max-height:150px}
.resource h3{font-size:20px; margin-bottom:6px}
.resource p{margin:0; color:var(--grey); font-size:15px; line-height:1.6; max-width:70ch}

/* --- narrative cross-link ("next in the journey") --- */
.next{background:var(--deep-green); color:#fff}
.next__in{
  max-width:var(--maxw); margin:0 auto; padding:52px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.next__k{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--lime); font-weight:700}
.next h2{font-size:30px; margin-top:10px; max-width:24ch}
.next p{margin:8px 0 0; color:#c6d6c4; font-size:16px; max-width:52ch}

/* --- conversation-led contact (not a generic form) --- */
.convo{display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:start}
.convo__routes{display:grid; gap:16px; margin-top:34px}
.route{
  border:1px solid var(--line); border-radius:6px; padding:26px 28px;
  display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; background:#fff;
}
.route h3{font-size:19px; margin-bottom:6px}
.route p{margin:0; color:var(--grey); font-size:15px}
.convo__panel{background:var(--ink); color:#fff; border-radius:6px; padding:38px 34px}
.convo__panel h3{font-size:22px; margin-bottom:14px}
.convo__panel .line{display:block; font-size:17px; margin-bottom:12px}
.convo__panel p{color:#9fb0bb; font-size:15px; margin:0 0 22px}

/* --- editorial note flagging copy that still needs sign-off --- */
.todo{
  border-left:3px solid var(--orange); background:#fff7f0;
  padding:14px 18px; margin-top:20px; font-size:13.5px; color:#7a4416; border-radius:0 4px 4px 0;
}
.todo b{color:var(--orange)}

@media (max-width:1100px){
  .trio, .stages, .insight-grid, .outcomes{grid-template-columns:repeat(2,1fr)}
  .stage{border-right:0}
  .logos{grid-template-columns:repeat(3,1fr)}
  .convo{grid-template-columns:1fr}
}
@media (max-width:860px){
  .band{padding:54px 0}
  .phero__in{padding:60px var(--gutter) 56px}
  .phero h1{font-size:34px}
  .phero__copy{font-size:17px}
  .trio, .stages, .insight-grid, .outcomes, .split, .case__top, .case__grid{grid-template-columns:1fr}
  .split--flip .split__copy{order:0}
  .resource{grid-template-columns:90px 1fr}
  .resource .btn{grid-column:1/-1}
  .logos{grid-template-columns:repeat(2,1fr)}
  .case__metrics{gap:22px; padding:18px 22px}
  .case__body{padding:24px 22px}
}

/* ============================================================
   PHOTOGRAPHY
   Supplied set: 9 images at 800w / 1600w, served via srcset.
   ============================================================ */
.media-img{width:100%; height:100%; object-fit:cover; display:block}
.phero__media .media-img{object-position:center 35%}
.split__media, .feature__media, .case__img, .insight__img, .resource__img, .stage-img{background:var(--light)}

/* ============================================================
   IMPACT FIGURES + PARTNER LOGOS
   Stat treatment matches the Colab4Growth brand asset:
   deep-green numeral, orange label.
   ============================================================ */
.outcome .v{color:var(--deep-green); letter-spacing:-.02em}
.outcome .l{
  color:var(--orange); font-weight:700; font-size:14px;
  letter-spacing:.01em; margin-top:6px;
}
.band--ink .outcome .v{color:#fff}
.band--ink .outcome .l{color:var(--orange)}
.outcomes--3{grid-template-columns:repeat(3,1fr)}

.logos{grid-template-columns:repeat(6,1fr); gap:14px; align-items:stretch}
.logo-slot{height:92px; padding:14px}
/* Absolute cap rather than a percentage: percentage heights on a centred
   grid item do not clamp reliably, and the logo set has mixed aspect ratios. */
.logo-slot img{
  max-height:64px; max-width:100%; width:auto; height:auto; object-fit:contain;
  filter:grayscale(1); opacity:.72; transition:.25s ease;
}
.logo-slot:hover img{filter:none; opacity:1}

@media (max-width:1100px){
  .outcomes--3{grid-template-columns:repeat(3,1fr)}
  .logos{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:860px){
  .outcomes--3{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,1fr)}
  .outcome .v{font-size:32px}
}

/* ============================================================
   BRAND LOGO
   ============================================================ */
.logo{display:flex; align-items:center; gap:0}
.logo img{width:180px; height:auto; display:block}
.foot-brand{margin-top:44px}
.foot-brand img{width:190px; height:auto; display:block}

/* ============================================================
   PARALLAX
   The image is oversized inside an overflow-hidden frame so it can
   translate without exposing an edge. Movement is applied by site.js,
   which opts out under prefers-reduced-motion and on small screens.
   ============================================================ */
[data-parallax]{overflow:hidden}
[data-parallax] > .media-img{
  position:absolute; left:0; width:100%;
  top:-12%; height:124%;
  will-change:transform;
}
.feature__media[data-parallax]{position:relative}
/* Until JS runs (or when it opts out) the oversized image simply sits
   centred — no layout shift, no dependency on the script. */
@media (max-width:860px){
  [data-parallax] > .media-img{top:0; height:100%; transform:none !important}
}
@media (prefers-reduced-motion: reduce){
  [data-parallax] > .media-img{top:0; height:100%; transform:none !important}
}

/* Mobile logo sizing — declared last so it wins over the base .logo img rule. */
@media (max-width:860px){
  .logo img{width:140px}
  .foot-brand img{width:160px}
}

/* ============================================================
   COMPONENTS ADDED FOR THE CLIENT REVIEW (Aug 2026)
   ============================================================ */

/* sub-heading used inside a band, below the h-section */
.h-sub{font-family:var(--f-head); font-size:26px; font-weight:700; margin-bottom:14px; letter-spacing:-.01em}
.band--ink .h-sub{color:#fff}

/* five-across impact figures */
.outcomes--5{grid-template-columns:repeat(5,1fr)}

/* two-across cards (For Institutions / For Founders) */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:40px}
.card--cta{gap:16px}
.card--cta .btn{align-self:flex-start; margin-top:6px}
.card__lead{font-weight:700; color:var(--ink); margin:0}
.band--ink .card__lead{color:#fff}

/* journey stages carry more copy now */
.stage{padding-right:26px}
.stage p{margin:0 0 10px}
.stage__lead{font-weight:700; color:var(--ink)}
.band--ink .stage__lead{color:#fff}
.stages__foot{
  font-family:var(--f-head); font-size:20px; font-weight:700; margin:30px 0 0;
  display:flex; align-items:center; gap:12px;
}
.stages__foot::before{content:''; width:30px; height:2px; background:var(--lime); flex:none}

/* numbered principles (About — How We Build Differently) */
.principles{display:grid; gap:0; margin-top:44px; border-top:1px solid var(--line)}
.principle{
  display:grid; grid-template-columns:92px 1fr; gap:30px;
  padding:34px 0; border-bottom:1px solid var(--line);
}
.principle__n{font-family:var(--f-head); font-size:40px; font-weight:800; color:var(--ghost); line-height:1}
.principle h3{font-size:24px; margin-bottom:12px}
.principle p{margin:0 0 10px; color:var(--grey); font-size:16px; line-height:1.65}

/* GEAM five-step list */
.steps{display:grid; gap:0; margin-top:44px; border-top:2px solid var(--ink)}
.step{
  display:grid; grid-template-columns:92px 1fr; gap:30px;
  padding:34px 0; border-bottom:1px solid var(--line);
}
.step__n{font-family:var(--f-head); font-size:40px; font-weight:800; color:var(--lime); line-height:1}
.step h3{font-size:24px; margin-bottom:6px}
.step__lead{font-weight:700; color:var(--ink); margin:0 0 12px}
.step p{margin:0 0 10px; color:var(--grey); font-size:16px; line-height:1.65}
.step__out{
  margin-top:14px !important; padding-top:12px; border-top:1px dashed var(--line);
  font-size:14px; color:var(--ink) !important;
}
.step__out span{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--lime-dk); margin-right:10px;
}

/* compact horizontal step flow (About page) */
.flow{list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:0 0 30px; padding:0}
.flow__step{
  display:flex; align-items:center; gap:10px; padding:12px 18px;
  border:1px solid var(--line); border-radius:999px; font-size:15px; background:#fff;
}
.flow__n{font-family:var(--f-head); font-weight:800; color:var(--lime-dk); font-size:13px}

/* named lists (enterprises, institutional partners) */
.namelist{list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:34px 0 0; padding:0}
.namelist li{
  padding:12px 20px; border:1px solid var(--line); border-radius:6px;
  background:#fff; font-size:16px; font-family:var(--f-head); font-weight:500;
}
.namelist--lg li{font-size:19px; font-weight:700; padding:16px 26px}

/* four-part enterprise story grid */
.case__grid--4{grid-template-columns:repeat(4,1fr); gap:22px}
.case__grid--4 p{font-size:14px}

@media (max-width:1100px){
  .outcomes--5{grid-template-columns:repeat(3,1fr)}
  .case__grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .h-sub{font-size:21px}
  .outcomes--5, .duo, .case__grid--4{grid-template-columns:1fr}
  .principle, .step{grid-template-columns:56px 1fr; gap:18px}
  .principle__n, .step__n{font-size:28px}
  .principle h3, .step h3{font-size:20px}
  .stages__foot{font-size:17px}
  .namelist li{font-size:15px; padding:10px 16px}
  .namelist--lg li{font-size:17px; padding:12px 20px}
  .stage{padding-right:0}
}

/* ============================================================
   FULL-WIDTH SECTION LAYOUT
   The sticky sub-nav has been removed, and section copy no longer
   sits in a narrow left-hand column with dead space beside it.

   Where a band has a heading, the heading holds the left column and
   the copy runs down the right, so the block spans the full grid while
   each line stays at a readable measure. Bands without a heading simply
   run full width.
   ============================================================ */
.band__head:has(> h2), .band__head:has(> h3),
.feature{
  display:grid;
  grid-template-columns:minmax(280px, 33%) 1fr;
  column-gap:64px;
  align-items:start;
}
.band__head:has(> h2) > .kicker,
.band__head:has(> h2) > h2,
.band__head:has(> h3) > .kicker,
.band__head:has(> h3) > h3,
.feature > .eyebrow-ghost,
.feature > .step-badge,
.feature > h2{grid-column:1}

.band__head:has(> h2) > p,
.band__head:has(> h2) > div,
.band__head:has(> h3) > p,
.band__head:has(> h3) > div,
.feature > p{grid-column:2}

/* first paragraph aligns with the top of the heading block */
.band__head > p:first-of-type, .feature > p.lede:first-of-type{margin-top:0}
/* media and full-bleed children still span the whole grid */
.feature > .feature__media,
.band__head > .stages__foot{grid-column:1 / -1}

/* the heading column stays with the reader on longer sections */
@media (min-width:1101px){
  .band__head:has(> h2) > h2, .feature > h2{position:sticky; top:110px}
}

/* copy sitting outside a band__head keeps a comfortable measure.
   (Uses --measure, not `ch`: 72ch resolves to ~1200px with these faces.) */
.band > .section > .lede,
.band > .section > .finePrint{max-width:var(--measure)}

@media (max-width:1100px){
  .band__head:has(> h2), .band__head:has(> h3), .feature{
    display:block;
  }
  .band__head:has(> h2) > h2, .feature > h2{position:static}
  .band__head > p:first-of-type, .feature > p.lede:first-of-type{margin-top:16px}
}

/* ============================================================
   MEASURE
   `ch` proved unreliable with these faces (78ch resolved to ~1300px,
   so the old caps never applied). These are explicit pixel measures.
   ============================================================ */
:root{--measure:760px}

/* a closing statement under a card row — held to a readable measure */
.lede--close{max-width:var(--measure); margin-top:34px}

/* numbered rows fill the grid: number | heading | copy */
.principle{grid-template-columns:92px minmax(220px, 26%) 1fr; column-gap:40px}
.principle > div{display:contents}
.principle h3{grid-column:2; margin-bottom:0; align-self:start}
.principle p{grid-column:3; max-width:640px}
.principle p ~ p{grid-column:3}

.step{grid-template-columns:92px minmax(220px, 26%) 1fr; column-gap:40px}
.step__body{display:contents}
.step h3{grid-column:2; align-self:start; margin-bottom:8px}
.step__lead{grid-column:2; margin:0}
.step p:not(.step__lead), .step__out{grid-column:3; max-width:640px}

@media (max-width:1100px){
  .principle, .step{grid-template-columns:56px 1fr; column-gap:18px}
  .principle > div, .step__body{display:block}
  .principle h3, .principle p, .step h3, .step__lead,
  .step p:not(.step__lead), .step__out{grid-column:2; max-width:none}
}

/* a band__head with no heading has no left column to sit beside,
   so its copy keeps the standard measure rather than running the full grid */
.band__head:not(:has(> h2)):not(:has(> h3)) > p{max-width:var(--measure)}


/* =====================================================================
   GEAM™ "Rising cycles" — home page, The Enterprise Building Journey
   Markup: build-site.py (#geam-cycles) · Motion + SVG: assets/geam-cycles.js
   Wide (>1100px): text blocks sit on a 1248 x 870 canvas, positions are % of it,
   so the whole composition scales with the container. Fonts stay in px.
   Narrow (<=1100px): stacked, the line runs down the left edge.
   ===================================================================== */
#journey{overflow:hidden}                     /* the line bleeds off both sides of the band */

.gc{
  --gc-1:#fff; --gc-2:#aab7c0; --gc-3:#8a9aa8;
  position:relative; margin-top:56px;
}
.gc__canvas{position:relative; aspect-ratio:1248/870}
.gc__svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.gc .vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* --- the drawing (classes are applied by geam-cycles.js) --- */
.gc-line{fill:none; stroke:rgba(255,255,255,.4); stroke-width:1}
.gc-ring{fill:none; stroke:rgba(255,255,255,.32); stroke-width:1}
.gc-ring--in1{stroke:rgba(255,255,255,.14)}
.gc-ring--in2{stroke:rgba(255,255,255,.09)}
.gc__svg text{font-family:var(--f-body); font-weight:700; fill:var(--gc-3)}
.gc-center{font-size:12px; letter-spacing:.12em}
.gc-num{font-size:11px; letter-spacing:.06em}
.gc-cont{font-size:11px; letter-spacing:.14em}
.gc-node{fill:var(--ink); stroke:rgba(255,255,255,.5); stroke-width:1}
.gc-node--on{fill:#fff; stroke:none}
.gc-node--five{stroke:var(--lime)}
.gc-node--on.gc-node--five{fill:var(--lime)}
.gc-halo{fill:none; stroke:var(--lime); stroke-width:1}
.gc-trail{fill:none; stroke:var(--lime); stroke-width:1.5}
.gc-dot__halo{fill:var(--lime); opacity:.18}
.gc-dot__core{fill:var(--lime)}

/* --- stage text blocks --- */
.gc__statement{
  position:absolute; left:0; top:5.5%; width:44.9%; margin:0;
  font:300 clamp(30px,3.3vw,40px)/1.15 var(--f-head); letter-spacing:-.015em; color:var(--gc-1);
}
.gc__stage{position:absolute}
.gc__stage--1{left:0;        bottom:29.2%; width:28.85%}
.gc__stage--2{left:32.7%;    bottom:40.7%; width:31.25%}
.gc__stage--3{left:69.87%;   bottom:55.4%; width:30.13%}

.gc__idx{display:flex; align-items:center; gap:10px; font-size:12px; font-weight:700; letter-spacing:.12em}
.gc__num{color:var(--gc-3); transition:color .5s}
.gc__bar{display:block; width:24px; height:1px; background:rgba(255,255,255,.3); transition:width .6s, background .5s}
.gc__idx.on .gc__num{color:var(--lime)}
.gc__idx.on .gc__bar{width:48px; background:var(--lime)}

.gc__title{margin:0; font-weight:400}
.gc__verb{
  display:block; margin-top:18px;
  font:300 clamp(42px,4.6vw,60px)/1 var(--f-head); letter-spacing:-.03em; color:var(--gc-1);
}
.gc__name{display:block; margin-top:14px; font:600 20px/1.3 var(--f-head); color:var(--gc-1)}
.gc__one{margin:6px 0 0; font-size:15px; line-height:1.5; color:var(--gc-2)}
.gc__lbl{
  margin:16px 0 0; font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gc-3);
}
.gc__em{margin:6px 0 0; font-size:13.5px; line-height:1.5; color:var(--gc-2)}
.gc__slot{display:none}                          /* narrow mode only: reserves room for the circle */

/* --- "funded programme ends" marker, crossing the line between stages 1 and 2 --- */
.gc__prog{position:absolute; left:25.2%; top:94%; width:15.2%}
.gc__prog-line{position:absolute; left:-12px; top:-64px; height:88px; border-left:1px dashed rgba(255,255,255,.35)}
.gc__prog-lbl{margin:0; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gc-3)}
.gc__prog-txt{margin:4px 0 0; font-size:13px; line-height:1.4; color:var(--gc-2)}

/* --- GEAM key --- */
.gc__key{
  display:grid; grid-template-columns:240px minmax(0,1fr); gap:24px;
  margin-top:38px; padding-top:28px; border-top:1px solid rgba(255,255,255,.12);
}
.gc__key-title{margin:0; font:600 20px/1.2 var(--f-head); color:var(--gc-1)}
.gc__key-sub{margin:6px 0 0; font-size:13.5px; line-height:1.5; color:var(--gc-2)}
.gc__legend{display:flex; align-items:center; gap:8px; margin:12px 0 0; font-size:12px; color:var(--gc-3)}
.gc__legend-dot{width:8px; height:8px; border-radius:50%; background:#fff}
.gc__steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px}
.gc__kn{display:block; font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--gc-3)}
.gc__steps li:last-child .gc__kn{color:var(--lime)}
.gc__kt{display:block; margin-top:8px; font:600 15px/1.3 var(--f-head); color:var(--gc-1)}
.gc__kd{display:block; margin-top:4px; font-size:13px; line-height:1.45; color:var(--gc-2)}

/* --- narrow: stacked, line down the left edge (JS measures the slots) --- */
@media (max-width:1100px){
  .gc{margin-top:44px}
  .gc__canvas{aspect-ratio:auto; display:flex; flex-direction:column; padding:0 0 46px 44px}
  .gc__statement{position:static; width:auto; font-size:30px; margin:0 0 36px -44px; padding-left:44px}
  .gc__stage{position:static; width:auto; max-width:560px; margin-bottom:18px}
  .gc__stage--1,.gc__stage--2,.gc__stage--3{left:auto; bottom:auto; width:auto}
  .gc__verb{font-size:44px}
  .gc__slot{display:block}
  .gc__stage--1 .gc__slot{height:152px}
  .gc__stage--2 .gc__slot{height:176px}
  .gc__stage--3 .gc__slot{height:200px}
  .gc__stage .gc__lbl{margin-top:14px}
  .gc__prog{position:relative; left:auto; top:auto; width:auto; max-width:560px; margin:2px 0 30px}
  .gc__prog-line{left:-44px; top:9px; width:36px; height:0; border-left:0; border-top:1px dashed rgba(255,255,255,.4)}
  .gc__key{grid-template-columns:1fr; gap:22px; margin-top:12px}
}
@media (max-width:860px){
  .gc__steps{grid-template-columns:1fr; gap:18px}
  .gc__steps li{display:grid; grid-template-columns:34px 1fr; column-gap:6px}
  .gc__steps .gc__kn{grid-row:1 / span 3; padding-top:3px}
  .gc__kt{margin-top:0}
}
@media (max-width:480px){
  .gc__statement{font-size:26px}
  .gc__verb{font-size:40px}
}


/* =====================================================================
   PROOF — "Lead with value" (home page, #proof)
   Markup: build-site.py proof_section() · Optional motion: assets/proof.js
   One large figure, four ranked supporting numbers, and the three
   measurement dimensions on a rising curve (echoing the GEAM cycles).
   The section is complete without JS; proof.js only adds the reveal.
   ===================================================================== */
.pf,.pf-strip{--pf-2:#4A5566; --pf-3:#5E6B7C; --pf-acc:#4E7A0C; --pf-hair:rgba(5,21,33,.12)}
.pf{padding:88px 0 104px}
.pf .kicker{color:var(--pf-acc); margin:0}
.pf .vh,.pf-strip .vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* 1 · intro */
.pf__intro{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px); gap:64px}
.pf__h2{margin:20px 0 0; font:400 44px/1.12 var(--f-head); letter-spacing:-.02em; color:var(--ink); text-wrap:balance}
.pf__copy{padding-top:34px; display:flex; flex-direction:column; gap:16px}
.pf__copy p{margin:0; font-size:16.5px; line-height:1.6; color:var(--pf-2); text-wrap:pretty}

/* 2 · evidence: lead figure + ranked list */
.pf__evidence{margin-top:104px; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,520px); gap:64px; align-items:end}
.pf__lead{border-top:2px solid var(--lime); padding-top:28px; container-type:inline-size}
.pf__lbl{margin:0; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--pf-acc)}
.pf__big{margin:20px 0 0; font:200 clamp(112px,14vw,208px)/.82 var(--f-head); letter-spacing:-.055em; color:var(--ink); white-space:nowrap}
.pf__list{list-style:none; margin:0; padding:0}
.pf__list li{
  display:grid; grid-template-columns:136px minmax(0,1fr) auto; gap:16px; align-items:baseline;
  padding:20px 0; border-top:1px solid var(--pf-hair);
}
.pf__list li:first-child{border-top-color:rgba(5,21,33,.22)}
.pf__list li:last-child{border-bottom:1px solid var(--pf-hair)}
.pf__n{font:300 44px/1 var(--f-head); letter-spacing:-.03em; color:var(--ink)}
.pf__t{font-size:15px; color:var(--pf-2)}
.pf__list li.is-lead .pf__t{color:var(--ink)}
.pf__tag{font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--pf-3)}

/* 3 · what we measure */
.pf__measure{margin-top:128px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px); gap:64px}
.pf__h3{margin:0; font:400 32px/1.2 var(--f-head); letter-spacing:-.015em; color:var(--ink); text-wrap:balance}
.pf__measure p{margin:0; font-size:16.5px; line-height:1.6; color:var(--pf-2); text-wrap:pretty}

/* 4 · the three dimensions on a rising curve.
   The SVG scales with the container; the text blocks start 28 design-px below
   their node, expressed as % of column width so they scale with it. */
.pf__curve{position:relative; margin-top:72px}
.pf__svg{position:absolute; left:0; top:0; width:100%; height:auto; overflow:visible; pointer-events:none}
.pf__line{fill:none; stroke:rgba(5,21,33,.22); stroke-width:1}
.pf__lime{fill:none; stroke:var(--lime); stroke-width:2}
.pf__core{fill:#fff; stroke:var(--ink); stroke-width:1.2}
.pf__ring1{fill:none; stroke:rgba(5,21,33,.35)}
.pf__ring2{fill:none; stroke:rgba(78,122,12,.3)}
.pf__node--val .pf__core{fill:var(--lime); stroke:var(--pf-acc)}
.pf__node--val .pf__ring1{stroke:rgba(78,122,12,.55)}
.pf__dims{position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
.pf__dim{padding-right:13.5%}
.pf__dim:nth-child(1){padding-top:47.1%}
.pf__dim:nth-child(2){padding-top:37.5%}
.pf__dim:nth-child(3){padding-top:27.9%}
.pf__dn{display:block; font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--pf-3)}
.pf__dim:last-child .pf__dn{color:var(--pf-acc)}
.pf__dname{margin:8px 0 0; font:500 20px/1.3 var(--f-head); color:var(--ink)}
.pf__dtxt{margin:8px 0 0; font-size:15px; line-height:1.55; color:var(--pf-2)}
.pf__dot{display:none}

/* 5 · closing statement */
.pf__close{
  margin-top:112px; padding-top:48px; border-top:1px solid rgba(5,21,33,.14);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:64px; align-items:end;
}
.pf__stmt{margin:0; max-width:880px; font:300 36px/1.25 var(--f-head); letter-spacing:-.02em; color:var(--ink); text-wrap:pretty}

/* motion (classes added by proof.js; absent = fully visible) */
[data-figures].is-armed .pf__list li{opacity:0; transform:translateY(14px)}
[data-figures].is-in .pf__list li{
  opacity:1; transform:none;
  transition:opacity .6s ease, transform .6s ease; transition-delay:calc(1s + var(--i,0) * 80ms);
}
.pf--anim .pf__line,.pf--anim .pf__lime{stroke-dasharray:var(--len); stroke-dashoffset:var(--len)}
.pf__curve.is-in .pf__line{stroke-dashoffset:0; transition:stroke-dashoffset 1.4s linear}
.pf__curve.is-in .pf__lime{stroke-dashoffset:0; transition:stroke-dashoffset var(--dur,.5s) linear var(--delay,1s)}
.pf--anim .pf__svg .pf__node,.pf--anim .pf__dim{opacity:0}
.pf__curve.is-in .pf__svg .pf__node,.pf__curve.is-in .pf__dim{opacity:1; transition:opacity .5s ease var(--d,0s)}

/* stacked: the curve becomes a vertical line down the left, nodes keep their rings */
@media (max-width:1023px){
  .pf{padding:64px 0 76px}
  .pf__intro,.pf__evidence,.pf__measure,.pf__close{grid-template-columns:minmax(0,1fr); gap:32px}
  .pf__h2{font-size:34px}
  .pf__copy{padding-top:0}
  .pf__evidence{margin-top:64px; align-items:start}
  .pf__big{font-size:clamp(84px,28vw,168px)}
  .pf__measure{margin-top:80px}
  .pf__h3{font-size:28px}
  .pf__curve{margin-top:44px}
  .pf__svg{display:none}
  .pf__dims{display:block}
  .pf__dims .pf__dim:nth-child(n){position:relative; padding:6px 0 40px 52px}
  .pf__dims .pf__dim:last-child{padding-bottom:0}
  .pf__dim::before{content:''; position:absolute; left:15.5px; top:16px; bottom:-16px; width:1px; background:rgba(5,21,33,.22)}
  .pf__dim:last-child::before{left:15px; width:2px; bottom:-34px; background:var(--lime)}
  .pf__dot{display:block; position:absolute; left:0; top:0; width:32px; height:32px; z-index:1}
  .pf__close{margin-top:76px; padding-top:36px}
  .pf__stmt{font-size:28px}
  .pf__close .btn{width:100%}
}
@media (max-width:480px){
  .pf__list li{grid-template-columns:112px minmax(0,1fr) auto; gap:12px}
  .pf__n{font-size:38px}
  .pf__stmt{font-size:25px}
}


/* =====================================================================
   FIGURES STRIP — the "wide" layout of the impact figures
   Used where the figures run as a band (Enterprise Impact). Same pieces as the
   home Proof evidence block: one lead figure, ranked rows, one emphasised row.
   Markup: build-site.py figures_strip() · motion: assets/figures.js (shared)
   ===================================================================== */
.pf-strip{
  display:grid; grid-template-columns:minmax(0,.77fr) minmax(0,1fr) minmax(0,1fr);
  gap:0 clamp(32px,4.4vw,56px); align-items:start;
}
.pf-strip .pf__big{font-size:clamp(64px,8.6vw,108px)}
.band__head + .pf-strip{margin-top:44px}                          /* under a section heading */

/* on the dark bands */
.pf-strip--dark{--pf-2:#aab7c0; --pf-3:#8a9aa8; --pf-acc:var(--lime); --pf-hair:rgba(255,255,255,.14)}
.pf-strip--dark .pf__big,.pf-strip--dark .pf__n{color:#fff}
.pf-strip--dark .pf__list li:first-child{border-top-color:rgba(255,255,255,.28)}
.pf-strip--dark .pf__list li.is-lead .pf__t{color:#fff}

@media (max-width:1023px){
  .pf-strip{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px 40px}
  .pf-strip .pf__lead{grid-column:1 / -1}
  .pf-strip .pf__big{font-size:clamp(84px,18vw,132px)}
}
@media (max-width:680px){
  .pf-strip{grid-template-columns:minmax(0,1fr); gap:24px}
  .pf-strip .pf__big{font-size:clamp(84px,28vw,140px)}
  .pf-strip .pf__list:first-of-type li:last-child{border-bottom:0}   /* the two lists read as one */
}

/* Size the lead figure from its own column so "R60m+" always fits under its rule
   (the glyphs run about 2.96 x the font size wide). Side-by-side layouts only; the
   stacked layouts keep their viewport-based sizes above. Older browsers keep those too. */
@media (min-width:1024px){
  @supports (width:1cqw){
    .pf__big{font-size:min(208px,32cqw)}
    .pf-strip .pf__big{font-size:min(120px,32cqw)}
  }
}


/* =====================================================================
   LOGOS — story-card tiles and the logo walls (Enterprise Impact)
   Markup: build-site.py story_logo() / story_name() / logo_wall()
   Walls reuse .logo-slot (muted by default, colour on hover). A tile with no
   logo yet shows the name as type; tiles with logos are listed first.
   ===================================================================== */
ul.logos{list-style:none; margin-bottom:0; padding:0}
.logos--wall{margin-top:34px}
/* a touch more contrast than the founding-partner strip so pale logos (e.g. light blue) stay legible */
.logos--wall .logo-slot img{filter:grayscale(1) contrast(1.35) brightness(.85); opacity:.9}
.logos--wall .logo-slot:hover img{filter:none; opacity:1}
.logo-slot--name{
  font-family:var(--f-head); font-size:15px; font-weight:700; line-height:1.25;
  letter-spacing:0; text-transform:none; color:var(--ink);
}
.logos--lg{grid-template-columns:repeat(3,1fr)}
.logos--lg .logo-slot{height:124px; padding:20px}
.logos--lg .logo-slot img{max-height:80px}

/* story cards: the enterprise's logo in place of a stock photo */
.case__img.case__img--logo{
  position:relative; display:grid; place-items:center; padding:32px;
  background:#fff; border-right:1px solid var(--line);
}
.case__img--logo img{max-width:100%; max-height:170px; width:auto; height:auto; object-fit:contain}
.case__img.case__img--cover{padding:0; min-height:230px}
.case__img--cover img{position:absolute; inset:0; width:100%; height:100%; max-height:none; object-fit:cover; object-position:100% 50%}   /* keep the text at the right edge */
.case__img--name span{font:700 28px/1.15 var(--f-head); letter-spacing:-.01em; color:var(--ink); text-align:center}

@media (max-width:860px){
  .logos--lg{grid-template-columns:repeat(2,1fr)}
  .case__img.case__img--logo{border-right:0; border-bottom:1px solid var(--line); min-height:190px}
  .case__img.case__img--cover{min-height:240px}
}


/* =====================================================================
   BOOK COVER — Insights (resource entry + the book's card)
   The cover is portrait (2:3), so it gets its own proportions instead of the
   landscape/3:4 slots used for photography. The card tile takes the cover's own
   background colour so the portrait sits on it without a visible edge.
   ===================================================================== */
.resource__img--book{aspect-ratio:2/3; max-height:none; border-radius:3px; box-shadow:0 8px 22px rgba(5,21,33,.22)}
.insight__img--cover{background:#0b0c17}
.insight__img--cover .media-img{object-fit:contain}



/* =====================================================================
   404 PAGE — served by the host for any URL that does not exist (404.html)
   ===================================================================== */
.nf{min-height:100vh; display:grid; place-items:center; padding:48px 24px; text-align:center; background:var(--white)}
.nf__in{max-width:560px}
.nf__logo img{width:170px; height:auto; margin:0 auto 34px}
.nf__code{margin:0; font:300 clamp(96px,22vw,168px)/1 var(--f-head); letter-spacing:-.04em; color:var(--ink)}
.nf h1{margin:6px 0 12px; font-size:clamp(24px,4vw,32px)}
.nf__text{margin:0 auto 28px; color:var(--grey); font-size:17px; line-height:1.6}
.nf__links{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 22px; margin-top:34px; font-size:15px; color:var(--grey)}
.nf__links a{padding:4px 0; border-bottom:1px solid transparent}
.nf__links a:hover{color:var(--ink); border-bottom-color:var(--lime)}


/* "Skip to main content": invisible until a keyboard user tabs to it */
.skip{
  position:absolute; left:16px; top:-64px; z-index:200; padding:12px 18px;
  background:var(--ink); color:#fff; border-radius:0 0 6px 6px; font-weight:600; font-size:15px;
  transition:top .15s ease;
}
.skip:focus{top:0}


/* =====================================================================
   LEGAL PAGES — Privacy Policy, Terms of Use (long-form reading text)
   ===================================================================== */
.legal{padding:72px 0 110px}
.legal h1{font:700 clamp(34px,4.6vw,52px)/1.08 var(--f-head); letter-spacing:-.02em; margin:0 0 10px}
.legal__meta{margin:0 0 34px; font-size:14px; color:var(--grey-2)}
.prose{max-width:72ch}
.prose h2{font:700 24px/1.2 var(--f-head); letter-spacing:-.01em; margin:46px 0 12px; scroll-margin-top:96px}
.prose p,.prose li{font-size:17px; line-height:1.72; color:var(--grey)}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 16px; padding-left:22px}
.prose li{margin:0 0 9px}
.prose strong{color:var(--ink)}
.prose a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--lime); text-decoration-thickness:2px; text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--ink)}
.prose .lede{font-size:21px; line-height:1.55; color:var(--ink); margin:0 0 6px}
@media (max-width:860px){ .legal{padding:48px 0 80px} .prose h2{font-size:21px; margin-top:38px} .prose p,.prose li{font-size:16px} }

.prose a[href^="tel:"],.prose a[href^="mailto:"]{white-space:nowrap}


/* =====================================================================
   CONTACT FORM — Start the Conversation (#conversation)
   Works without JavaScript; assets/contact.js adds the in-place sending.
   ===================================================================== */
.cf{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:60px; align-items:start}
.cf__alt{margin:22px 0 0; font-size:16px; color:var(--grey)}
.cf__alt a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--lime); text-decoration-thickness:2px; text-underline-offset:3px; white-space:nowrap}
.cf__form{background:#fff; border:1px solid var(--line); border-radius:8px; padding:34px 34px 30px}
.cf__form label{display:block; font-weight:600; font-size:15px; margin:0 0 18px}
.cf__form input[type="text"],.cf__form input[type="email"],.cf__form input[type="tel"],.cf__form textarea{
  display:block; width:100%; margin-top:7px; padding:12px 14px; font:400 16px/1.4 var(--f-body); color:var(--ink);
  background:#fff; border:1px solid #c3cbd0; border-radius:6px;
}
.cf__form textarea{resize:vertical; min-height:140px}
.cf__form input:focus,.cf__form textarea:focus{outline:2px solid var(--lime); outline-offset:1px; border-color:var(--lime-dk)}
.cf__row{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
.cf__opt{font-weight:400; color:var(--grey-2)}
.cf__audience{border:0; padding:0; margin:0 0 22px; display:flex; flex-wrap:wrap; gap:10px}
.cf__audience legend{font-weight:600; font-size:15px; margin:0 0 10px; padding:0; width:100%}
.cf__form .cf__choice{display:inline-block; margin:0; font-weight:500; position:relative}
.cf__choice input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer}
.cf__choice span{display:inline-block; padding:10px 18px; border:1px solid #c3cbd0; border-radius:999px; background:#fff; transition:.15s ease}
.cf__choice:hover span{border-color:var(--ink)}
.cf__choice input:checked + span{background:var(--ink); border-color:var(--ink); color:#fff}
.cf__choice input:focus-visible + span{outline:2px solid var(--lime); outline-offset:2px}
.cf__form .cf__consent{display:flex; gap:12px; align-items:flex-start; font-weight:400; font-size:14.5px; color:var(--grey); margin:6px 0 24px}
.cf__consent input{margin-top:4px; width:18px; height:18px; flex:none; accent-color:var(--ink)}
.cf__consent a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--lime); text-underline-offset:3px}
.cf__hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}   /* spam trap: people never see it */
.cf__actions{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.cf__status{margin:0; font-size:15px; color:var(--grey)}
.cf__status--bad{color:#b3261e}
.cf__err{display:block; margin-top:6px; font-size:14px; font-weight:500; color:#b3261e}
.cf__form [aria-invalid="true"]{border-color:#b3261e}
.cf__done{background:#fff; border:1px solid var(--line); border-top:3px solid var(--lime); border-radius:8px; padding:40px 34px}
.cf__done h3{font-size:26px; margin:0 0 10px}
.cf__done p{margin:0; color:var(--grey); font-size:17px}
@media (max-width:900px){ .cf{grid-template-columns:minmax(0,1fr); gap:30px} .cf__form{padding:26px 20px 24px} .cf__row{grid-template-columns:1fr} }