/* =================================================================
   Capability showcase. Light reading sections alternate with dark,
   full-bleed chapters, the way a product page alternates detail with
   moments. Type stays light; emphasis comes from size.
   ================================================================= */
.dark{--ink:#ffffff; --ink-2:rgba(255,255,255,.8); --ink-3:rgba(255,255,255,.62); --deep:#86d3d8; --hair:rgba(255,255,255,.16);
  --mist:#16224a; --tint:#1d2b57; background:#0b1430; color:#fff}
.dark .eyebrow{color:#86d3d8}
.xl{font-size:clamp(2.8rem, 7vw, 6.4rem); font-weight:300; line-height:1.04; letter-spacing:-.012em; text-wrap:balance}
.big-p{font-size:clamp(1.3rem, 2.1vw, 1.85rem); font-weight:300; line-height:1.42; color:var(--ink-2)}
.left{align-items:flex-start; text-align:left}
.cols-2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(24px,4vw,64px)}
.cols-2 p + p{margin-top:16px}
.cols-2 p{color:var(--ink-2)}
@media (max-width:820px){ .cols-2{grid-template-columns:minmax(0,1fr)} }
.sp-top{margin-top:clamp(48px,6vw,88px)}
.sp-top-s{margin-top:clamp(28px,3.5vw,48px)}
.note{font-size:var(--t-small); color:var(--ink-3); max-width:80ch; margin-top:20px}
.sub-h{font-size:clamp(1.8rem,3.4vw,3rem); font-weight:300; line-height:1.1; letter-spacing:-.008em}

/* ---------- hero: full-bleed cover that settles into a card ---------- */
.cs-hero{position:relative; height:170vh; background:#0b1430}
.cs-hero-pin{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:grid}
.cs-hero-media{position:absolute; inset:0; overflow:hidden;
  clip-path:inset(calc(var(--p,0) * 6%) calc(var(--p,0) * 5%) calc(var(--p,0) * 14%) round calc(var(--p,0) * 36px))}
.cs-hero-media img{width:100%; height:100%; object-fit:cover; object-position:30% 50%; transform:scale(calc(1.08 - var(--p,0) * .08))}
.cs-hero-media::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,22,44,.62) 0%, rgba(8,22,44,.34) 42%, rgba(8,22,44,0) 70%), linear-gradient(180deg, rgba(8,18,40,0) 45%, rgba(8,18,40,.6) 100%)}
.cs-hero-copy{position:relative; z-index:1; align-self:end; padding-bottom:clamp(64px, 12vh, 140px); color:#fff;
  opacity:calc(1 - var(--p,0) * 1.6); transform:translateY(calc(var(--p,0) * -60px))}
.cs-hero-copy .eyebrow{color:#e4f6f7; text-shadow:0 1px 12px rgba(0,0,0,.25); letter-spacing:.14em; text-transform:uppercase; font-size:.875rem; font-weight:400}
.cs-hero-copy h1{text-shadow:0 2px 30px rgba(6,16,36,.25); font-size:clamp(3.2rem, 9vw, 8.6rem); font-weight:300; line-height:.98; letter-spacing:-.015em; margin-top:18px}
.cs-hero-copy h1 .b{display:block; font-size:1.18em}
.cs-hero-copy .lede{color:rgba(255,255,255,.88); margin-top:24px; max-width:44ch}
.cs-hero .amark{position:absolute; top:calc(var(--stick, var(--nav-h)) + 6vh); right:max(var(--gut-r), calc((100% - 1180px)/2 + 20px)); width:clamp(64px, 8vw, 120px); z-index:1; opacity:calc(1 - var(--p,0) * 1.6)}
.cs-hero-after{position:absolute; left:0; right:0; bottom:4vh; z-index:1; text-align:center; color:#fff; opacity:clamp(0, calc(var(--p,0) * 2 - .8), 1)}
.cs-hero-after p{font-size:clamp(1.4rem,2.6vw,2.4rem); font-weight:300}

/* ---------- product bar under the site navigation ---------- */
:root:has(.subnav){--stick:calc(var(--nav-h) + 48px); scroll-padding-top:calc(var(--nav-h) + 56px)}
.subnav{position:sticky; top:calc(var(--nav-h) + env(safe-area-inset-top,0px)); z-index:49; height:48px;
  background:rgba(255,255,255,.72); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hair); margin-bottom:-48px}
.subnav-in{height:100%; display:flex; align-items:center; gap:24px}
.sub-title{font-size:1.2rem; font-weight:300; color:var(--ink); margin-right:auto; white-space:nowrap}
.sub-title:hover{text-decoration:none}
.sub-links{display:flex; gap:22px; list-style:none; margin:0; padding:0}
.sub-links a{font-size:.8125rem; color:var(--ink-2)}
.sub-links a:hover{color:var(--ink); text-decoration:none}
.sub-links a[aria-current="true"]{color:var(--ink); font-weight:500}
.sub-cta{font-size:.8125rem; padding:4px 12px; border-radius:var(--r-pill); background:#2f8f96; color:#fff; white-space:nowrap}
.sub-cta:hover{background:#185b6c; text-decoration:none}
@media (max-width:820px){ .sub-links{display:none} }

/* ---------- count-up figures ---------- */
.figs{list-style:none; padding:0; margin:clamp(48px,6vw,80px) 0 0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(24px,3vw,40px)}
.figs li{display:flex; flex-direction:column; gap:10px; min-width:0; padding-top:22px; border-top:1px solid var(--hair)}
.fig-n{font-size:clamp(3.2rem,6.4vw,5.8rem); font-weight:300; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap}
.fig-n small{font-size:.42em; font-weight:300; margin-left:.18em; letter-spacing:0}
.fig-l{color:var(--ink-2); font-size:1.02rem}
@media (max-width:900px){ .figs{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:480px){ .figs{grid-template-columns:minmax(0,1fr)} }

/* ---------- proposition: sticky title, points light up in turn ---------- */
.prop{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,6vw,96px); align-items:start}
.prop-h{position:sticky; top:calc(var(--stick, var(--nav-h)) + 12vh)}
.prop-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(40px,8vh,96px); padding-block:6vh 12vh}
.prop-list li{opacity:.22; transition:opacity .6s var(--ease), transform .6s var(--ease); transform:translateY(8px)}
.prop-list li.lit{opacity:1; transform:none}
.prop-list h3{font-size:clamp(1.8rem,3.2vw,2.8rem); font-weight:300; line-height:1.1}
.prop-list p{font-size:clamp(1.1rem,1.5vw,1.3rem); color:var(--ink-2); margin-top:12px; max-width:44ch}
@media (max-width:860px){ .prop{grid-template-columns:minmax(0,1fr)} .prop-h{position:static} .prop-list li{opacity:1; transform:none} }

/* ---------- card row with paddles ---------- */
.row-wrap{margin-top:clamp(40px,5vw,64px)}
.card-row{list-style:none; margin:0; display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain;
  padding-block:4px 10px; padding-left:max(var(--gut), calc((100% - 1180px)/2 + 20px)); padding-right:max(var(--gut-r), calc((100% - 1180px)/2 + 20px));
  scroll-padding-inline:max(var(--gut), calc((100% - 1180px)/2 + 20px)); scroll-behavior:smooth}
.card-row::-webkit-scrollbar{display:none}
.card-row > li{flex:0 0 clamp(260px, 30vw, 360px); scroll-snap-align:start; background:var(--paper); border-radius:var(--r-xl); padding:clamp(24px,2.6vw,34px); display:flex; flex-direction:column; gap:12px; min-width:0}
.band:not(.mist) .card-row > li{background:var(--mist)}
.dark .card-row > li{background:var(--mist)}
.card-row h3{font-size:1.55rem; font-weight:300; line-height:1.18}
.card-row p{color:var(--ink-2); font-size:1rem}
.card-row .tag{font-size:.8125rem; color:var(--deep); font-weight:500}
.row-ctrl{display:flex; justify-content:flex-end; gap:12px; margin-top:20px}
.row-ctrl button{width:44px; height:44px; border-radius:50%; border:0; background:rgba(27,41,85,.07); color:var(--ink); font:inherit; font-size:1.6rem; cursor:pointer}
.dark .row-ctrl button{background:rgba(255,255,255,.12)}
.row-ctrl button:disabled{opacity:.35; cursor:default}

.callout{margin-top:clamp(40px,5vw,64px); padding:clamp(24px,3vw,40px); border-radius:var(--r-xl); background:var(--mist); font-size:clamp(1.15rem,1.7vw,1.45rem); font-weight:300; line-height:1.45; color:var(--ink-2)}
.band.mist .callout{background:var(--paper)}
.callout b{font-weight:400; color:var(--ink)}
.callout.navy{background:var(--navy); color:#dfe4f2}
.callout.navy b{color:#fff}

/* ---------- chapter dividers ---------- */
.chapter{position:relative; height:170vh; background:#0b1430; color:#fff}
.chapter-pin{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:grid}
.chapter-pin > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(calc(1.18 - var(--p,0) * .18)); filter:brightness(calc(.62 + var(--p,0) * .2))}
.chapter-copy{position:relative; z-index:1; align-self:end; padding-bottom:clamp(64px,14vh,160px)}
.chapter-n{font-size:clamp(5rem,16vw,14rem); font-weight:300; line-height:.85; color:rgba(255,255,255,.72); opacity:clamp(0, calc(var(--p,0) * 3), 1); transform:translateY(calc((1 - min(var(--p,0) * 2, 1)) * 40px))}
.chapter-t{font-size:clamp(2.6rem,6vw,5.6rem); font-weight:300; line-height:1.04; margin-top:14px; opacity:clamp(0, calc(var(--p,0) * 3 - .5), 1); transform:translateY(calc((1 - min(var(--p,0) * 2.2, 1)) * 40px))}
.chapter-s{font-size:clamp(1.15rem,1.8vw,1.5rem); font-weight:300; color:rgba(255,255,255,.86); max-width:46ch; margin-top:18px; opacity:clamp(0, calc(var(--p,0) * 3 - 1), 1)}
.chapter .amark{position:absolute; top:calc(var(--stick, var(--nav-h)) + 6vh); right:max(var(--gut-r), calc((100% - 1180px)/2 + 20px)); width:clamp(56px,7vw,104px); z-index:1}

/* ---------- Build, Operate, Transfer: pinned 12-month timeline ---------- */
.bot{position:relative; height:320vh}
.bot-pin{position:sticky; top:var(--stick, var(--nav-h)); height:calc(100vh - var(--stick, var(--nav-h))); height:calc(100svh - var(--stick, var(--nav-h))); display:flex; flex-direction:column; justify-content:center; gap:clamp(20px,4vh,44px)}
.bot-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 32px}
.bot-month{font-size:clamp(1rem,1.4vw,1.2rem); color:var(--ink-3); font-variant-numeric:tabular-nums}
.bot-month b{font-weight:300; font-size:2.4em; color:var(--ink); margin-left:6px}
.track{position:relative}
.ticks{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); font-size:.8125rem; color:var(--ink-3); font-variant-numeric:tabular-nums; margin-bottom:10px}
.ticks span{border-left:1px solid var(--hair); padding-left:6px}
.lanes{display:flex; flex-direction:column; gap:10px}
.lane{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); align-items:center}
.lane .bar{position:relative; height:clamp(34px,5vh,46px); border-radius:var(--r-pill); background:var(--tint); overflow:hidden; display:flex; align-items:center}
.lane .bar i{position:absolute; inset:0; transform-origin:left; transform:scaleX(var(--f,0)); border-radius:inherit}
.lane .bar span{position:relative; z-index:1; padding-left:16px; font-size:.95rem; color:var(--ink); white-space:nowrap; transition:color .4s}
.lane.build i{background:var(--navy)} .lane.operate i{background:#2f8f96} .lane.transfer i{background:var(--slate)}
.lane .bar.on span{color:#fff}
.mark6{position:absolute; top:0; bottom:0; left:50%; border-left:1px dashed var(--slate); opacity:.55}
.mark6 span{position:absolute; top:-26px; left:6px; font-size:.75rem; color:var(--ink-3); white-space:nowrap}
.bot-phases{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
.bot-phases > div{padding:clamp(18px,2vw,26px); border-radius:var(--r-lg); background:var(--mist); opacity:.38; transition:opacity .5s var(--ease), background-color .5s}
.bot-phases > div.on{opacity:1}
.bot-phases h3{font-size:1.6rem; font-weight:300}
.bot-phases .when{font-size:.875rem; color:var(--deep); margin-top:2px}
.bot-phases p{font-size:.98rem; color:var(--ink-2); margin-top:10px}
@media (max-width:860px){
  .bot{height:auto} .bot-pin{position:static; height:auto; padding-block:12px}
  .bot-phases{grid-template-columns:minmax(0,1fr)} .bot-phases > div{opacity:1}
  .ticks span:nth-child(even){visibility:hidden}
}

/* ---------- pillars ---------- */
.pillar-cards{list-style:none; padding:0; margin:clamp(40px,5vw,64px) 0 0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
.pillar-cards li{border-radius:var(--r-xl); padding:clamp(26px,2.8vw,40px); color:#fff; display:flex; flex-direction:column; gap:12px; min-height:300px; position:relative; overflow:hidden}
.pillar-cards li:nth-child(1){background:linear-gradient(150deg, #1b2955, #263a72)}
.pillar-cards li:nth-child(2){background:linear-gradient(150deg, #1e6f78, #2f8f96)}
.pillar-cards li:nth-child(3){background:linear-gradient(150deg, #3d3f8f, #4f5f8d)}
.pillar-cards .k{font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; opacity:.8}
.pillar-cards h3{font-size:clamp(2rem,3.4vw,2.8rem); font-weight:300}
.pillar-cards p{color:rgba(255,255,255,.88)}
.pillar-cards .amark{position:absolute; right:-18%; bottom:-22%; width:62%; opacity:.18}
@media (max-width:860px){ .pillar-cards{grid-template-columns:minmax(0,1fr)} }

/* ---------- segmented control (maturity, platforms) ---------- */
.seg{position:relative; display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; padding:4px; border-radius:var(--r-pill); background:rgba(27,41,85,.07); max-width:100%}
.dark .seg{background:rgba(255,255,255,.1)}
.seg button{position:relative; z-index:1; font:inherit; font-size:clamp(.85rem,1.2vw,1rem); padding:10px clamp(12px,2vw,24px); border:0; background:none; color:var(--ink-2); cursor:pointer; border-radius:var(--r-pill); white-space:nowrap; transition:color .3s}
.seg button[aria-selected="true"]{color:#fff}
.seg .pill{position:absolute; z-index:0; top:4px; bottom:4px; left:4px; border-radius:var(--r-pill); background:var(--navy); transition:transform .5s var(--ease), width .5s var(--ease)}
.seg-wrap{overflow-x:auto; scrollbar-width:none; padding-bottom:4px}
.seg-wrap::-webkit-scrollbar{display:none}

.maturity{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,88px); align-items:center; margin-top:clamp(36px,4vw,56px)}
.meter{display:flex; flex-direction:column; gap:10px}
.meter .row{display:grid; grid-template-columns:9ch minmax(0,1fr); gap:16px; align-items:center; font-size:.9rem; color:var(--ink-3)}
.meter .bar{height:12px; border-radius:var(--r-pill); background:var(--tint); overflow:hidden}
.meter .bar i{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--navy), #2f8f96); transition:width .8s var(--ease)}
.mat-stage{font-size:clamp(4rem,10vw,8rem); font-weight:300; line-height:1; color:var(--ink)}
.mat-panels{display:grid}
.mat-panels > div{grid-area:1/1; opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease); pointer-events:none}
.mat-panels > div.on{opacity:1; transform:none; pointer-events:auto}
.mat-panels h3{font-size:clamp(1.8rem,3vw,2.6rem); font-weight:300}
.mat-panels p{font-size:clamp(1.1rem,1.5vw,1.3rem); color:var(--ink-2); margin-top:12px}
@media (max-width:860px){ .maturity{grid-template-columns:minmax(0,1fr)} }

/* platform comparison */
.plat{margin-top:clamp(32px,4vw,48px); border-top:1px solid var(--hair)}
.plat-row{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:24px; padding:18px 0; border-bottom:1px solid var(--hair); align-items:baseline}
.plat-row dt{color:var(--ink-3); font-size:1rem}
.plat-row dd{margin:0; display:grid; font-size:clamp(1.15rem,1.8vw,1.5rem); font-weight:300; color:var(--ink)}
.plat-row dd span{grid-area:1/1; opacity:0; transform:translateY(8px); transition:opacity .45s var(--ease), transform .45s var(--ease)}
.plat[data-active="0"] dd span:nth-child(1), .plat[data-active="1"] dd span:nth-child(2), .plat[data-active="2"] dd span:nth-child(3){opacity:1; transform:none}
@media (max-width:600px){ .plat-row{grid-template-columns:minmax(0,1fr); gap:4px} }

/* ---------- sequential steps ---------- */
.steps-h{list-style:none; padding:0; margin:clamp(36px,4vw,56px) 0 0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; position:relative}
.steps-h li{position:relative; padding-top:30px; opacity:.3; transition:opacity .6s var(--ease)}
.steps-h li.lit{opacity:1}
.steps-h li::before{content:""; position:absolute; top:7px; left:0; right:-20px; height:2px; background:var(--tint)}
.steps-h li::after{content:""; position:absolute; top:0; left:0; width:16px; height:16px; border-radius:50%; background:var(--paper); border:2px solid var(--slate); transition:background-color .4s, border-color .4s}
.steps-h li.lit::after{background:#2f8f96; border-color:#2f8f96}
.steps-h li:last-child::before{right:0}
.steps-h .n{font-size:.8125rem; color:var(--deep)}
.steps-h h3{font-size:1.4rem; font-weight:300; margin-top:4px}
.steps-h p{font-size:.98rem; color:var(--ink-2); margin-top:8px}
@media (max-width:900px){ .steps-h{grid-template-columns:minmax(0,1fr)} .steps-h li::before{top:16px; left:7px; right:auto; width:2px; bottom:-20px; height:auto} .steps-h li{padding:0 0 0 34px} .steps-h li:last-child::before{display:none} }

/* before / after bars */
.evidence{display:flex; flex-direction:column; gap:clamp(28px,4vw,44px); margin-top:clamp(32px,4vw,48px)}
.ev h3{font-size:1.35rem; font-weight:300}
.ev .rows{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.ev .r{display:grid; grid-template-columns:9ch minmax(0,1fr); gap:14px; align-items:center; font-size:.9rem; color:var(--ink-3)}
.ev .bar{height:28px; border-radius:var(--r-pill); background:transparent; position:relative}
.ev .bar i{position:absolute; left:0; top:0; bottom:0; border-radius:inherit; width:0; transition:width 1.4s var(--ease); display:flex; align-items:center; justify-content:flex-end; padding-right:12px; font-style:normal; font-size:.9rem; color:#fff; white-space:nowrap; overflow:hidden}
.ev .before i{background:var(--slate)}
.ev .after i{background:#2f8f96; transition-delay:.4s}
.evidence.in .ev .bar i{width:var(--w)}

/* check list */
.checks{list-style:none; padding:0; margin:20px 0 0; display:flex; flex-direction:column; gap:14px}
.checks li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:14px; align-items:start; font-size:1.1rem; color:var(--ink-2); opacity:.35; transition:opacity .5s var(--ease)}
.checks li::before{content:""; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--slate); margin-top:2px; transition:background-color .4s, border-color .4s; box-sizing:border-box}
.checks.in li{opacity:1}
.checks.in li::before{background:#2f8f96; border-color:#2f8f96; box-shadow:inset 0 0 0 5px var(--paper)}
.band.mist .checks.in li::before{box-shadow:inset 0 0 0 5px var(--mist)}
.checks li:nth-child(2){transition-delay:.15s} .checks li:nth-child(3){transition-delay:.3s} .checks li:nth-child(4){transition-delay:.45s} .checks li:nth-child(5){transition-delay:.6s}
.checks li:nth-child(2)::before{transition-delay:.15s} .checks li:nth-child(3)::before{transition-delay:.3s} .checks li:nth-child(4)::before{transition-delay:.45s} .checks li:nth-child(5)::before{transition-delay:.6s}

/* ---------- engagements with filters ---------- */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(32px,4vw,48px)}
.chips button{font:inherit; font-size:.95rem; padding:8px 18px; border-radius:var(--r-pill); border:1px solid var(--hair); background:none; color:var(--ink-2); cursor:pointer; transition:background-color .3s, color .3s}
.chips button[aria-pressed="true"]{background:var(--ink); color:#0b1430; border-color:var(--ink)}
.eng{list-style:none; padding:0; margin:24px 0 0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px}
.eng li{background:var(--mist); border-radius:var(--r-xl); padding:clamp(24px,2.6vw,36px); display:flex; flex-direction:column; gap:12px; min-width:0; transition:opacity .4s var(--ease), transform .4s var(--ease)}
.eng li[hidden]{display:none!important}
.eng .tag{font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase; color:var(--deep)}
.eng h3{font-size:1.6rem; font-weight:300; line-height:1.15}
.eng .ctx{font-size:.9rem; color:var(--ink-3)}
.eng .k{font-size:.8125rem; color:var(--ink-3); margin-top:6px}
.eng p{color:var(--ink-2); font-size:1rem}
.eng .out{color:var(--ink); font-size:1.08rem}
@media (max-width:860px){ .eng{grid-template-columns:minmax(0,1fr)} }

/* ---------- case study flow ---------- */
.flow{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(14px,2vw,28px); margin-top:clamp(32px,4vw,48px); position:relative}
.flow-col{display:flex; flex-direction:column; gap:12px; opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); position:relative}
.flow.in .flow-col{opacity:1; transform:none}
.flow-col:nth-child(2){transition-delay:.2s} .flow-col:nth-child(3){transition-delay:.4s} .flow-col:nth-child(4){transition-delay:.6s}
.flow-col h4{font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase; color:var(--deep); font-weight:400}
.flow-col .node{background:var(--paper); border-radius:var(--r-lg); padding:16px 18px; display:flex; flex-direction:column; gap:4px; flex:1; justify-content:center}
.flow-col .node b{font-weight:400; color:var(--ink); font-size:1.08rem}
.flow-col .node span{font-size:.9rem; color:var(--ink-2)}
.flow-col:not(:last-child)::after{content:"\2192"; position:absolute; right:calc(clamp(14px,2vw,28px) / -2 - .5em); top:55%; color:var(--slate); font-size:1.2rem}
@media (max-width:900px){ .flow{grid-template-columns:minmax(0,1fr)} .flow-col:not(:last-child)::after{content:"\2193"; position:static; text-align:center} }
.dgrid{list-style:none; padding:0; margin:clamp(32px,4vw,48px) 0 0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
.dgrid li{background:var(--mist); border-radius:var(--r-xl); padding:clamp(22px,2.4vw,32px); display:flex; flex-direction:column; gap:10px; min-width:0}
.band.mist .dgrid li{background:var(--paper)}
.dgrid h3{font-size:1.4rem; font-weight:300}
.dgrid .tech{font-size:.875rem; color:var(--deep)}
.dgrid p{font-size:.98rem; color:var(--ink-2)}
@media (max-width:980px){ .dgrid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:620px){ .dgrid{grid-template-columns:minmax(0,1fr)} }

/* ---------- product shot ---------- */
.shot{position:relative; margin-top:clamp(40px,5vw,72px)}
.shot img{width:min(100%, 1100px); margin-inline:auto; transform:scale(calc(.82 + var(--p,0) * .18)); opacity:calc(.3 + var(--p,0) * .7); transform-origin:50% 60%}
.shot figcaption{text-align:center; color:var(--ink-3); font-size:.95rem; margin-top:8px; max-width:60ch; margin-inline:auto}

/* ---------- people ---------- */
.leads{list-style:none; padding:0; margin:clamp(40px,5vw,64px) 0 0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
.leads li{background:var(--mist); border-radius:var(--r-xl); padding:clamp(26px,2.8vw,40px); display:flex; flex-direction:column; gap:12px; min-width:0}
.leads .badge{align-self:flex-start; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; padding:5px 12px; border-radius:var(--r-pill)}
.leads .badge.trust{background:var(--navy)} .leads .badge.people{background:#1e6f78} .leads .badge.platforms{background:#3d3f8f}
.leads h3{font-size:clamp(1.8rem,2.6vw,2.4rem); font-weight:300}
.leads .role{color:var(--deep); font-size:.95rem}
.leads p{color:var(--ink-2); font-size:1rem}
.leads .skills{font-size:.875rem; color:var(--ink-3); border-top:1px solid var(--hair); padding-top:12px; margin-top:auto}
@media (max-width:980px){ .leads{grid-template-columns:minmax(0,1fr)} }
.bench{list-style:none; padding:0; margin:clamp(32px,4vw,48px) 0 0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
.bench li{border-top:1px solid var(--hair); padding-top:18px; display:flex; flex-direction:column; gap:8px; min-width:0}
.bench h3{font-size:1.4rem; font-weight:300}
.bench .role{font-size:.9rem; color:var(--deep)}
.bench p{font-size:.98rem; color:var(--ink-2)}
.bench .skills{font-size:.85rem; color:var(--ink-3)}
@media (max-width:900px){ .bench{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:560px){ .bench{grid-template-columns:minmax(0,1fr)} }

/* ---------- ways to engage: durations on a 12-month scale ---------- */
.dur{margin-top:clamp(36px,4vw,56px)}
.dur-scale{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:24px; font-size:.8125rem; color:var(--ink-3); padding-bottom:8px; border-bottom:1px solid var(--hair)}
.dur-scale .s{display:flex; justify-content:space-between}
.dur-item{border-bottom:1px solid var(--hair)}
.dur-btn{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:24px; align-items:center; width:100%; padding:18px 0; font:inherit; color:inherit; background:none; border:0; cursor:pointer; text-align:left}
.dur-btn .nm{font-size:clamp(1.15rem,1.7vw,1.45rem); font-weight:300; color:var(--ink); display:flex; align-items:center; gap:12px}
.dur-btn .nm::after{content:"+"; font-size:1.3rem; color:var(--slate); margin-left:auto; padding-right:8px; transition:transform .4s var(--ease)}
.dur-btn[aria-expanded="true"] .nm::after{transform:rotate(45deg)}
.dur-btn .lane2{position:relative; height:30px}
.dur-btn .lane2 i{position:absolute; top:0; bottom:0; left:var(--a); width:0; border-radius:var(--r-pill); background:linear-gradient(90deg, var(--navy), #2f8f96); transition:width 1.1s var(--ease)}
.dur.in .dur-btn .lane2 i{width:var(--w)}
.dur-btn .lane2 i.open{background:linear-gradient(90deg, var(--navy), rgba(47,143,150,.15))}
.dur-btn .lane2 em{position:absolute; top:50%; transform:translateY(-50%); left:calc(var(--a) + var(--w) + 10px); font-style:normal; font-size:.9rem; color:var(--ink-2); white-space:nowrap}
.dur-btn .lane2 em.inside{left:calc(var(--a) + 12px); color:#fff}
.dur-panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease)}
.dur-panel > div{overflow:hidden}
.dur-panel p{padding:0 0 22px; max-width:62ch; color:var(--ink-2); font-size:1.08rem}
.dur-item.open .dur-panel{grid-template-rows:1fr}
@media (max-width:700px){
  .dur-scale{grid-template-columns:minmax(0,1fr)} .dur-scale > span:first-child{display:none}
  .dur-btn{grid-template-columns:minmax(0,1fr); gap:10px}
}
.company{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; margin-top:clamp(40px,5vw,64px)}
.company > div{border-radius:var(--r-xl); padding:clamp(24px,2.8vw,40px)}
.company .models{background:var(--mist)}
.company .models ul{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:12px}
.company .models li{color:var(--ink-2)}
.company .models li b{font-weight:400; color:var(--ink)}
.company .details{background:var(--navy); color:#fff}
.company .details dl{margin:14px 0 0; display:flex; flex-direction:column}
.company .details dl > div{display:grid; grid-template-columns:10ch minmax(0,1fr); gap:16px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.14)}
.company .details dt{color:rgba(255,255,255,.66); font-size:.9rem}
.company .details dd{margin:0; color:#fff}
.company h3{font-size:1.6rem; font-weight:300}
@media (max-width:860px){ .company{grid-template-columns:minmax(0,1fr)} }

/* closing */
.cs-close{position:relative; overflow:hidden; background:#e9edf3}
.cs-close > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 70%}
.cs-close .wrap{position:relative; z-index:1; padding-block:clamp(120px,22vh,240px) clamp(80px,14vh,160px)}
.cs-close .amark{width:clamp(64px,7vw,96px); margin:0 auto 32px}
.cs-close .xl{font-size:clamp(2.2rem,5vw,4.4rem); max-width:24ch; margin-inline:auto; text-align:center; color:var(--navy)}
.cs-close .actions{justify-content:center; margin-top:36px}

@media (prefers-reduced-motion:reduce){
  .prop-list li, .steps-h li, .flow-col, .checks li{opacity:1!important; transform:none!important}
  .chapter-n, .chapter-t, .chapter-s{opacity:1!important; transform:none!important}
  .ev .bar i, .dur-btn .lane2 i{transition:none}
}

/* capability highlight on the home page */
.head.left .actions{justify-content:flex-start}
.cap-hl{position:relative; overflow:hidden}
.cap-hl > .amark{position:absolute; top:clamp(48px,8vw,104px); right:max(var(--gut-r), calc((100% - 1180px)/2 + 20px)); width:clamp(64px,9vw,132px)}
.dark .btn{background:#ffffff; color:var(--navy)}
.dark .btn:hover{background:#dfe6f3}
.dark .link{color:#86d3d8}
.cap-row > li{padding:0; overflow:hidden; flex-basis:clamp(260px, 34vw, 420px)}
.cap-row a{display:flex; flex-direction:column; height:100%; color:inherit}
.cap-row a:hover{text-decoration:none}
.cap-img{aspect-ratio:16/10; overflow:hidden}
.cap-img img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.cap-row a:hover .cap-img img{transform:scale(1.04)}
.cap-txt{display:flex; flex-direction:column; gap:8px; padding:22px 26px 26px; flex:1}
.cap-n{font-size:.875rem; color:#86d3d8}
.cap-txt h3{font-size:1.6rem; font-weight:300}
.cap-txt p{color:var(--ink-2); font-size:1rem}
.cap-txt .hl-more{margin-top:auto; padding-top:8px; color:#86d3d8}