/* ============================================================
   Webisoft sales deck  ·  playbook.webisoft.com design system
   ------------------------------------------------------------
   One stylesheet. Tokens, base, utilities and idioms are the
   playbook's own (src/styles/global.css), verbatim. The deck
   layout below follows the same rules at presentation scale:
   square corners, hairline rules instead of boxes, off-white
   ground, one coral per slide, and three coral moments per deck
   carried by scale and a full-bleed band, not ornament.
   ============================================================ */

@font-face{font-family:"HN Display";src:url("../fonts/HelveticaNowDisplay-Md.woff2") format("woff2");font-weight:500 900;font-style:normal;font-display:swap}
@font-face{font-family:"HN Text";src:url("../fonts/HelveticaNowText-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Suisse Mono";src:url("../fonts/SuisseIntlMono.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* color */
  --coral:#de5849;--coral-deep:#b8402f;--coral-08:rgba(222,88,73,.08);--coral-14:rgba(222,88,73,.14);
  --ink:#0a0a0a;--ink-90:rgba(10,10,10,.92);--ink-80:rgba(10,10,10,.84);--ink-70:rgba(10,10,10,.74);--ink-55:rgba(10,10,10,.62);
  --field:#f0f1f4;--field-75:rgba(240,241,244,.84);--field-50:rgba(240,241,244,.6);
  --panel:#ededed;--paper:#ffffff;
  --line:rgba(10,10,10,.16);--line-strong:rgba(10,10,10,.34);--line-light:rgba(240,241,244,.24);
  /* type */
  --font-display:"HN Display","Helvetica Neue",helvetica,arial,sans-serif;
  --font-text:"HN Text","Helvetica Neue",helvetica,arial,sans-serif;
  --font-mono:"Suisse Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --t-hero:clamp(2.65rem,1rem + 7vw,7.2rem);--t-1:clamp(2.15rem,1.15rem + 4vw,4.6rem);
  --t-2:clamp(1.75rem,1.2rem + 2.3vw,3.1rem);--t-3:clamp(1.4rem,1.18rem + 1vw,1.95rem);
  --t-4:clamp(1.2rem,1.1rem + .5vw,1.45rem);--t-lede:clamp(1.15rem,1.05rem + .55vw,1.45rem);
  --t-body:1.0625rem;--t-sm:.9375rem;--t-mono:.72rem;
  /* layout */
  --wrap:1400px;--read:620px;
  /* deck only */
  --bar:60px;--ease:cubic-bezier(.22,.9,.24,1);--gutter:clamp(2.4rem,3.4vw,3.5rem);
  --col:clamp(1rem,1.8vw,1.8rem); /* inner padding of a ruled column */
  --gap-y:clamp(1.1rem,2.8vh,2rem); /* vertical rhythm between meta, heading, body */
  --progress:0%;--mx:50%;--my:50%;
}

/* ---- reset ---- */
*,*:before,*:after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;background:var(--field)}
body{font-family:var(--font-text);font-size:var(--t-body);line-height:1.62;color:var(--ink);background:var(--field);overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.on-dark{background:var(--ink)}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:.97;letter-spacing:-.028em}
a{color:inherit;text-underline-offset:.2em;transition:color .15s ease,opacity .15s ease}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;border-radius:0}
ul,ol{padding:0}
::selection{background:var(--coral);color:var(--ink)}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

/* ---- mono utility ---- */
.mono{font-family:var(--font-mono);font-size:var(--t-mono);font-weight:400;letter-spacing:.09em;text-transform:uppercase;line-height:1.7}
.tint{color:var(--coral)}

/* meta row: hairline on top, mono coordinates under it. Opens every section. */
.meta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-top:1px solid var(--line-strong);padding-top:.7rem;font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.09em;text-transform:uppercase}
.meta--light{border-top-color:var(--line-light);color:var(--field-75)}
@media (max-width:640px){.meta span:nth-child(2){display:none}}

/* small labels above spec text: coral square + mono */
.lbl{display:block;font-family:var(--font-mono);font-size:.68rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;line-height:1.7;color:var(--ink-55);margin-bottom:.55rem}
.lbl:before{content:"";display:inline-block;width:.5em;height:.5em;background:var(--coral);margin-right:.7em;transform:translateY(-.05em)}
.is-dark .lbl{color:var(--field-75)}

/* big zero-padded numeral: display face, as the playbook sets its numerals */
.num{display:block;font-family:var(--font-display);font-weight:500;font-size:var(--t-2);line-height:1;letter-spacing:-.02em;color:var(--ink-55);transition:color .2s ease}

/* ---- buttons: square, mono, decisive ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.9em;font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.11em;text-transform:uppercase;padding:1.1em 1.8em;border:1px solid var(--ink);border-radius:0;background:var(--ink);color:var(--field);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .2s ease,color .2s ease,border-color .2s ease}
.btn span{display:inline-block;transition:transform .2s ease}
.btn:hover{background:transparent;color:var(--ink)}
.btn:hover span{transform:translateX(.35em)}
.btn:active{transform:translate(1px,1px)}
.btn--coral{background:var(--coral);border-color:var(--coral);color:var(--ink)}
.btn--coral:hover{background:transparent;border-color:var(--field);color:var(--field)}

/* the coral rule under a heading always reserves its space */
.drawline:after{content:"";display:block;width:2.4em;height:3px;margin-top:.32em;background:var(--coral);transform-origin:left center}

/* ---- lists ---- */
.quick-list{list-style:none;display:grid;gap:.5rem;font-size:var(--t-body);line-height:1.5;color:var(--ink-80)}
.quick-list li{position:relative;padding-left:1.1rem}
.quick-list li:before{content:"";position:absolute;left:0;top:.6em;width:.36em;height:.36em;background:var(--ink-55)}
.is-dark .quick-list{color:var(--field-75)}
.is-dark .quick-list li:before{background:var(--field-50)}

/* ============================================================
   DECK MECHANICS + THE VERTICAL GRID
   .slide-inner: [meta] [body]  ·  .body: [heading] [content] ([tail])
   Every track that can stretch does, so the content runs from
   just under the masthead to a baseline near the bottom.
   ============================================================ */
.deck{height:100svh;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scrollbar-width:none}
.deck::-webkit-scrollbar{display:none}
.slide{position:relative;display:flex;flex-direction:column;width:100%;min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always;background:var(--field);color:var(--ink)}
.slide.is-dark{background:var(--ink);color:var(--field)}
.slide-inner{position:relative;flex:1;display:grid;grid-template-rows:auto minmax(0,1fr);row-gap:var(--gap-y);width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);padding-block:calc(var(--bar) + clamp(.9rem,2.4vh,1.6rem)) clamp(1.4rem,3.6vh,2.6rem)}
.body{display:grid;grid-template-rows:auto minmax(0,1fr);row-gap:var(--gap-y);min-height:0}
.body--tail{grid-template-rows:auto minmax(0,1fr) auto}
.body--split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:minmax(0,1fr);column-gap:clamp(2rem,5vw,5rem)}
.body--pillars{grid-template-columns:minmax(0,1.45fr) repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}
.body--pillars h2{font-size:calc(var(--t-1)*.86)} /* "development" has to clear the first rule */

/* masthead: hairline + mono */
.deck-bar{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--bar);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-inline:var(--gutter);background:var(--field);color:var(--ink);border-bottom:1px solid var(--line);transition:background .35s ease,color .35s ease,border-color .35s ease}
body.on-dark .deck-bar{background:var(--ink);color:var(--field);border-bottom-color:var(--line-light)}
/* the wordmark is inline SVG on currentColor, so it takes the masthead's colour on every ground */
.brand-button{justify-self:start;display:block;width:clamp(120px,9vw,150px);padding:0;border:0;background:none;color:inherit;cursor:pointer}
.brand-button svg{display:block;width:100%;height:auto}
.deck-meta{display:flex;align-items:center;gap:.9rem;font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.09em;text-transform:uppercase}
.deck-rule{position:relative;display:block;width:clamp(56px,7vw,110px);height:1px;background:var(--line-strong)}
body.on-dark .deck-rule{background:var(--line-light)}
.deck-rule:after{content:"";position:absolute;left:0;top:-1px;height:3px;width:var(--progress);background:var(--coral);transition:width .45s var(--ease)}
.deck-actions{justify-self:end;display:flex;gap:.4rem}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:1px solid var(--line-strong);border-radius:0;background:transparent;color:inherit;cursor:pointer;font-family:var(--font-mono);font-size:.95rem;transition:background .2s ease,color .2s ease,border-color .2s ease}
body.on-dark .icon-button{border-color:var(--line-light)}
.icon-button span{display:inline-block;transition:transform .2s ease}
.icon-button:hover{background:var(--ink);border-color:var(--ink);color:var(--field)}
body.on-dark .icon-button:hover{background:var(--field);border-color:var(--field);color:var(--ink)}
.icon-button[data-direction="next"]:hover span{transform:translateX(.2em)}
.icon-button[data-direction="prev"]:hover span{transform:translateX(-.2em)}
/* the masthead goes coral over the coral divider (no JS: :has reads the active slide) */
body:has(.slide-case-cover.is-visible) .deck-bar{background:var(--coral);color:var(--ink);border-bottom-color:var(--line-strong)}
body:has(.slide-case-cover.is-visible) .deck-rule{background:var(--line-strong)}
body:has(.slide-case-cover.is-visible) .deck-rule:after{background:var(--ink)}
body:has(.slide-case-cover.is-visible) .icon-button{border-color:var(--ink)}

/* slide rail: hairline ticks, coral for the active one */
.slide-rail{position:fixed;right:.6rem;top:50%;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:5px;transform:translateY(-50%)}
.slide-rail button{position:relative;width:22px;height:9px;padding:0;border:0;background:transparent;cursor:pointer}
.slide-rail button:before{content:"";position:absolute;right:0;top:4px;width:10px;height:1px;background:var(--line-strong);transition:width .25s var(--ease),background .25s ease,height .25s ease,top .25s ease}
body.on-dark .slide-rail button:before{background:var(--line-light)}
.slide-rail button:hover:before{width:16px;background:var(--ink)}
body.on-dark .slide-rail button:hover:before{background:var(--field)}
.slide-rail button.is-active:before,body.on-dark .slide-rail button.is-active:before{width:22px;height:3px;top:3px;background:var(--coral)}
body:has(.slide-case-cover.is-visible) .slide-rail button.is-active:before{background:var(--ink)}

/* ============================================================
   TYPE ON SLIDES · headings at document --t-1, names at --t-hero
   ============================================================ */
.slide h2{font-size:var(--t-1);max-width:16ch;text-wrap:balance}
.slide h3{font-size:var(--t-3);line-height:1.05}
.lead,.suite-heading>p,.case-study-heading>p{font-size:var(--t-lede);line-height:1.45;color:var(--ink-70);max-width:var(--read)}
.is-dark .lead,.is-dark .suite-heading>p{color:var(--field-75)}
/* full-width heading block: h2 with its lede stacked beneath, left aligned */
.wide-heading,.suite-heading{display:grid;gap:1rem;align-content:start}
/* the suite table is tall, so its heading runs side by side, lede on the h2 baseline */
.suite-heading{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:1rem clamp(1.5rem,3vw,3rem);align-items:end}
.suite-heading>p{padding-bottom:.2em}
/* split heading: the left column of a two-column body */
.slide-heading{align-self:start;padding-right:clamp(1rem,2vw,2rem)}
.slide-heading .lead{margin-top:1.2rem}

/* ============================================================
   01 COVER · kicker, the wordmark across the frame, a coral rule,
   then the offer and the proof set in display type
   ============================================================ */
.cover{grid-template-rows:auto minmax(0,1fr) auto;row-gap:0}
.cover-kicker{color:var(--ink-55)}
.cover-title{align-self:center;padding-block:clamp(1rem,3vh,2rem)}
.cover-title svg{display:block;width:100%;height:auto}
.visually-hidden{position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden}
.cover-deck{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:clamp(1.6rem,3.5vw,4rem);border-top:3px solid var(--coral);padding-top:clamp(1.2rem,3vh,2.2rem)}
.cover-lead{font-family:var(--font-display);font-weight:500;font-size:var(--t-2);line-height:1.02;letter-spacing:-.028em;max-width:22ch;color:var(--ink)}
.cover-fact{font-family:var(--font-display);font-weight:500;font-size:var(--t-3);line-height:1.12;letter-spacing:-.02em;color:var(--ink-70);max-width:24ch;justify-self:end;text-align:right}

/* ============================================================
   02 WHO WE ARE · heading left, three ruled rows right, big numerals
   ============================================================ */
.metric-stack{display:grid;grid-auto-rows:auto;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}
.metric-card{display:grid;grid-template-columns:5rem minmax(0,.9fr) minmax(0,1.1fr);gap:1rem 1.6rem;align-items:start;align-content:center;padding:1.3rem 0;border-top:1px solid var(--line)}
.metric-card:first-child{border-top:0}
.metric-top{display:contents}
.metric-top strong{font-family:var(--font-display);font-weight:500;font-size:var(--t-2);line-height:1;letter-spacing:-.02em}

/* ============================================================
   03 WHAT WE DO · four ruled columns, full height
   ============================================================ */
.practice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);min-height:0}
.practice-card{display:flex;flex-direction:column;gap:1.1rem;padding:1.4rem var(--col);border-left:1px solid var(--line);outline-offset:-2px}
.practice-card:first-child{border-left:0;padding-left:0}
.practice-card .num{margin-bottom:.4rem}
.practice-card:hover .num,.practice-card:focus-visible .num{color:var(--coral)}
.practice-card h3{font-size:var(--t-2)}
.practice-card p{font-size:var(--t-body);line-height:1.5;color:var(--ink-80)}

/* ============================================================
   04 TYPICAL ENGAGEMENTS · ruled index left, stage right, one huge numeral
   ============================================================ */
.engagement-board{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);min-height:0}
.engagement-list{display:grid;grid-auto-rows:auto;border-right:1px solid var(--line)}
.engagement-tab{display:flex;flex-direction:column;justify-content:center;gap:.15rem;text-align:left;padding:.7rem var(--col) .7rem 0;border:0;border-top:1px solid var(--line);background:transparent;cursor:pointer;outline-offset:-2px;color:var(--ink)}
.engagement-tab:first-child{border-top:0}
.engagement-tab .lbl{margin-bottom:.15rem}
.engagement-tab strong{font-family:var(--font-display);font-weight:500;font-size:var(--t-3);line-height:1.05;letter-spacing:-.02em;transition:color .2s ease}
.engagement-tab small{display:none;font-size:var(--t-sm);line-height:1.5;color:var(--ink-80)}
.engagement-tab:hover strong{color:var(--ink-55)}
.engagement-tab.is-selected strong,.engagement-tab.is-selected:hover strong{color:var(--coral)}
.case-stage{display:grid;grid-template-rows:auto minmax(0,1fr);padding-left:clamp(1.5rem,3vw,3rem);min-height:0}
.case-index{display:flex;font-family:var(--font-display);font-weight:500;font-size:var(--t-hero);line-height:.9;letter-spacing:-.03em;color:var(--ink);padding-top:.4rem}
.case-index span{color:var(--ink-55)}
.case-copy{grid-column:1;grid-row:2;align-self:end;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s ease,transform .45s var(--ease),visibility 0s .35s}
.case-copy.is-active{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.case-copy h3{font-size:var(--t-1);max-width:14ch;text-wrap:balance}
.case-copy p{margin-top:1.2rem;max-width:var(--read);font-size:var(--t-lede);line-height:1.45;color:var(--ink-80)}

/* ============================================================
   05 CUSTOM SOFTWARE · statement column + three ruled columns
   ============================================================ */
.custom-system{display:contents}
.pillar{display:flex;flex-direction:column;gap:1.1rem;padding:1.4rem var(--col);border-left:1px solid var(--line);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}
.pillar .num{margin-bottom:.4rem}
.pillar h3{font-size:var(--t-2)}
.pillar p{font-size:var(--t-body);line-height:1.5;color:var(--ink-80)}

/* ============================================================
   06 TEAM EXTENSION · heading left, ruled 2x2 right
   ============================================================ */
.team-tracks{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);min-height:0}
.team-row{display:flex;flex-direction:column;justify-content:center;gap:.9rem;padding:1.3rem var(--col) 1.3rem 0}
.team-row:nth-child(even){border-left:1px solid var(--line);padding-left:var(--col)}
.team-row:nth-child(n+3){border-top:1px solid var(--line)}
.team-row .num{margin-bottom:.2rem}
.team-row h3{font-size:var(--t-3)}
.team-row p{font-size:var(--t-body);line-height:1.5;color:var(--ink-80)}

/* ============================================================
   07 OPERATING SUITE (dark) · a ruled table
   ============================================================ */
.suite-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,26%);border:1px solid var(--line-light);min-height:0}
.suite-stack{display:grid;grid-auto-rows:auto;border-right:1px solid var(--line-light)}
.suite-layer{display:grid;grid-template-columns:minmax(170px,26%) minmax(0,1fr);gap:.8rem 1.5rem;align-items:center;padding:1.1rem 1.4rem;border-top:1px solid var(--line-light);outline-offset:-2px;transition:background .2s ease}
.suite-layer:first-child{border-top:0}
.suite-layer:hover,.suite-custom:hover{background:rgba(240,241,244,.05)}
.suite-layer h3{display:flex;align-items:center;gap:.7em;font-size:var(--t-3);line-height:1.05}
.suite-layer h3>i{display:inline-block;flex:none;width:.5em;height:.5em;background:var(--coral)}
.suite-layer>p{font-size:var(--t-body);line-height:1.5;color:var(--field-75)}
.suite-automation{align-items:start}
.suite-modules{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.6rem}
.suite-modules p{padding-top:.6rem;border-top:1px solid var(--line-light);font-size:var(--t-sm);line-height:1.45;color:var(--field-75)}
.suite-modules strong{display:block;font-family:var(--font-display);font-weight:500;font-size:var(--t-4);letter-spacing:-.01em;color:var(--field);margin-bottom:.15rem}
.suite-modules span{display:block}
.suite-custom{display:flex;flex-direction:column;padding:1.1rem 1.4rem;outline-offset:-2px;transition:background .2s ease}
.suite-custom h3{font-size:var(--t-3)}
.suite-custom>div{margin-top:1.2rem;display:grid}
.suite-custom>div p{padding:.65rem 0;border-top:1px solid var(--line-light);font-size:var(--t-body);color:var(--field)}
.suite-custom>div p:last-child{border-bottom:1px solid var(--line-light)}
.suite-custom small{display:block;margin-top:auto;padding-top:1rem;font-size:var(--t-sm);line-height:1.45;color:var(--field-50)}
.suite-connect{padding-top:.7rem;border-top:1px solid var(--line-light);color:var(--field-50)}

/* ============================================================
   08 HOW A PROJECT RUNS · one rule, coral progress, four ruled columns
   ============================================================ */
.process-rail{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line);min-height:0}
.process-line{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-strong)}
.process-line i{display:block;width:25%;height:3px;margin-top:-1px;background:var(--coral);transition:width .5s var(--ease)}
.process-step{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;text-align:left;padding:1.6rem var(--col) 1.4rem;border:0;border-left:1px solid var(--line);background:transparent;cursor:pointer;color:var(--ink-55);transition:color .25s ease}
.process-step:first-child{border-left:0;padding-left:0}
.process-step strong{font-family:var(--font-display);font-weight:500;font-size:var(--t-2);line-height:1;letter-spacing:-.02em;color:inherit}
.process-step small{font-size:var(--t-body);line-height:1.5;color:inherit}
.process-step:hover,.process-step.is-selected{color:var(--ink)}
.process-step.is-selected .mono{color:var(--coral)}
.process-copy{display:none} /* repeats the copy already visible in each step; the rail carries it */

/* ============================================================
   09 HOW WE WORK · heading left, accordion on rules right
   ============================================================ */
.commitment-list{display:grid;grid-auto-rows:auto;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}
.commitment{border-top:1px solid var(--line)}
.commitment:first-child{border-top:0}
.commitment button{width:100%;display:grid;grid-template-columns:4rem minmax(0,1fr) auto;align-items:center;gap:1.2rem;padding:1.15rem 0;text-align:left;border:0;background:transparent;cursor:pointer;outline-offset:-2px}
.commitment button strong{font-family:var(--font-display);font-weight:500;font-size:var(--t-3);line-height:1.05;letter-spacing:-.02em}
.commitment button i{font-family:var(--font-mono);font-style:normal;font-size:1.4rem;line-height:1;color:var(--ink-55);transition:transform .3s var(--ease),color .2s ease}
.commitment.is-open button i{transform:rotate(45deg);color:var(--coral)}
.commitment>ul,.commitment>p{max-height:0;overflow:hidden;padding-left:5.2rem;padding-right:3rem;font-size:var(--t-body);line-height:1.5;color:var(--ink-80);transition:max-height .4s var(--ease),padding-bottom .4s var(--ease)}
.commitment.is-open>ul,.commitment.is-open>p{max-height:24rem;padding-bottom:1.3rem}

/* ============================================================
   10 CASE STUDIES DIVIDER · the gateband: full-bleed coral, type at scale
   ============================================================ */
.slide-case-cover{background:var(--coral);color:var(--ink)}
.slide-case-cover :focus-visible{outline-color:var(--ink)}
.slide-case-cover .meta{border-top-color:var(--ink);color:var(--ink)}
.slide-case-cover .drawline:after{background:var(--ink);width:3.2em}
.slide-case-cover .tint{color:var(--field)}
.body--gate{grid-template-rows:minmax(0,1fr);align-items:end}
.case-cover-layout h2{font-size:calc(var(--t-hero)*1.6);line-height:.9;max-width:none;margin-bottom:clamp(1.4rem,3.5vh,2.4rem)}
.case-cover-layout>p:last-child{font-size:var(--t-lede);line-height:1.45;color:var(--ink);max-width:40ch}

/* ============================================================
   11 to 15 CASE STUDIES · huge name, three ruled columns, result baseline
   ============================================================ */
.case-study-heading{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:1rem clamp(1.5rem,3vw,3rem);align-items:end}
.case-study-heading h2{font-size:var(--t-hero);max-width:12ch}
.case-study-heading>p{padding-bottom:.2em}
.case-study-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);min-height:0}
.case-study-grid article{padding:1.3rem var(--col);border-left:1px solid var(--line)}
.case-study-grid article:first-child{border-left:0;padding-left:0}
.case-result{padding-top:.9rem;border-top:1px solid var(--line-strong);font-size:var(--t-lede);line-height:1.4;color:var(--ink-70);max-width:60rem}
.case-result strong{display:block;font-family:var(--font-display);font-weight:500;font-size:var(--t-2);line-height:1.02;letter-spacing:-.02em;color:var(--ink);margin-bottom:.35rem}

/* ============================================================
   16 MANUFACTURING AND INDUSTRIAL · ruled 3x2
   ============================================================ */
.industrial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);min-height:0}
.industrial-grid article{padding:1.2rem var(--col);border-left:1px solid var(--line)}
.industrial-grid article:nth-child(3n+1){border-left:0;padding-left:0}
.industrial-grid article:nth-child(n+4){border-top:1px solid var(--line)}
.industrial-grid h3{margin:.15rem 0 .7rem}

/* ============================================================
   17 CLOSE (dark) · one statement across the frame, then a ruled row
   ============================================================ */
.body--close{grid-template-rows:minmax(0,1fr) auto;row-gap:clamp(1.5rem,4vh,3rem)}
.closing-copy{align-self:end}
.closing-copy h2{font-size:calc(var(--t-hero)*.85);max-width:none} /* two lines, broken where the copy's <br> puts the break */
.closing-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,4rem);align-items:end;border-top:1px solid var(--line-light);padding-top:clamp(1.2rem,3vh,2rem)}
.close-points{font-size:var(--t-lede);line-height:1.4;max-width:var(--read)}
.closing-contact p{display:flex;flex-direction:column;gap:.2rem;color:var(--field-75)}
.closing-contact strong{font-family:var(--font-display);font-weight:500;font-size:var(--t-2);line-height:1;letter-spacing:-.02em;color:var(--field);margin-bottom:.4rem}
.closing-contact .mono{margin-top:.5rem;color:var(--field-50)}
.closing-contact .btn{margin-top:1.6rem}

/* ============================================================
   MOTION · all opt-in. presentation.js marks the active slide
   .is-visible; .rise children of a slide rise in with --d.
   body:has(.slide.is-visible) is the "JS ran" guard, so without
   JS nothing is ever hidden.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .rise{transition:opacity .55s ease,transform .55s ease;transition-delay:var(--d,0s)}
  .engagement-tab.rise{transition:opacity .55s ease,transform .55s ease,color .2s ease}
  .suite-layer.rise,.suite-custom.rise{transition:opacity .55s ease,transform .55s ease,background .25s ease}
  .process-step.rise{transition:opacity .55s ease,transform .55s ease,color .25s ease}
  body:has(.slide.is-visible) .slide:not(.is-visible) .rise{opacity:0;transform:translateY(14px)}
  .drawline:after{transition:transform .8s var(--ease) .25s}
  body:has(.slide.is-visible) .slide:not(.is-visible) .drawline:after{transform:scaleX(0)}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .deck{scroll-snap-type:none}
}

/* ============================================================
   SHORT VIEWPORTS · 1080p laptops with browser chrome, presented
   ============================================================ */
@media (min-width:721px) and (max-height:700px){
  :root{--bar:52px;--gap-y:.9rem;--col:1rem;
    --t-hero:clamp(2.6rem,1rem + 4.6vw,4.6rem);--t-1:clamp(1.9rem,1rem + 2.6vw,3.2rem);--t-2:clamp(1.5rem,1rem + 1.4vw,2.1rem);--t-3:clamp(1.2rem,1.05rem + .5vw,1.4rem);--t-4:1.05rem;--t-lede:1rem;--t-body:.92rem;--t-sm:.84rem}
  .slide-inner{padding-block:calc(var(--bar) + .8rem) 1rem}
  .quick-list{gap:.3rem;line-height:1.42}
  .slide-heading .lead{margin-top:.7rem}
  .cover-deck{padding-top:.9rem}
  .cover-title{padding-block:.6rem}
  .metric-card{padding:.8rem 0;grid-template-columns:3.6rem minmax(0,.9fr) minmax(0,1.1fr)}
  .practice-card,.pillar,.case-study-grid article{padding-top:.9rem;padding-bottom:.9rem;gap:.6rem}
  .team-row{padding-top:.8rem;padding-bottom:.8rem;gap:.5rem}
  .engagement-tab{padding-top:.4rem;padding-bottom:.4rem}
  .case-copy p{margin-top:.7rem}
  .suite-layer{padding:.6rem 1rem}
  .suite-modules{gap:.5rem 1rem}
  .suite-custom{padding:.8rem 1rem}
  .suite-custom>div{margin-top:.7rem}
  .suite-custom>div p{padding:.35rem 0}
  .suite-connect{padding-top:.5rem}
  .process-step{padding-top:1rem;padding-bottom:.8rem;gap:.5rem}
  .commitment button{padding:.7rem 0;grid-template-columns:3.2rem minmax(0,1fr) auto}
  .commitment>ul,.commitment>p{padding-left:4.4rem}
  .commitment.is-open>ul,.commitment.is-open>p{padding-bottom:.8rem}
  .industrial-grid article{padding-top:.8rem;padding-bottom:.8rem}
  .industrial-grid h3{margin-bottom:.4rem}
  .case-result{padding-top:.6rem}
  .case-cover-layout h2{margin-bottom:.9rem}
  .body--close{row-gap:1rem}
  .closing-row{padding-top:.9rem}
  .closing-contact .btn{margin-top:.9rem}
}

/* ============================================================
   NARROWER SCREENS
   ============================================================ */
@media (max-width:1050px){
  .body--split{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);row-gap:var(--gap-y)}
  .slide-heading{padding-right:0}
  .body--pillars{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr)}
  .body--pillars .slide-heading{grid-column:1/-1}
  .pillar:first-of-type{border-left:0;padding-left:0}
  .metric-card{grid-template-columns:4rem minmax(0,.9fr) minmax(0,1.1fr)}
  .practice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .practice-card:nth-child(3){border-left:0;padding-left:0}
  .practice-card:nth-child(n+3){border-top:1px solid var(--line)}
  .suite-board{grid-template-columns:1fr}
  .suite-stack{border-right:0;border-bottom:1px solid var(--line-light)}
  .industrial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .industrial-grid article:nth-child(3n+1){border-left:1px solid var(--line);padding-left:var(--col)}
  .industrial-grid article:nth-child(odd){border-left:0;padding-left:0}
  .industrial-grid article:nth-child(n+3){border-top:1px solid var(--line)}
  .process-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-step:nth-child(4){border-left:0;padding-left:0}
  .process-step:nth-child(n+4){border-top:1px solid var(--line)}
  .case-study-heading{grid-template-columns:1fr;align-items:start}
}

@media (max-width:900px){
  .cover-deck{grid-template-columns:1fr;align-items:start}
  .cover-fact{justify-self:start;text-align:left}
}

@media (max-width:720px){
  :root{--gutter:1.25rem;--col:0px}
  body{overflow:auto}
  .deck{height:auto;overflow:visible;scroll-snap-type:none}
  .slide{min-height:100svh}
  .slide-inner{grid-template-rows:auto auto;align-content:start;padding-block:calc(var(--bar) + 1.2rem) 2.5rem}
  .body,.body--tail,.body--split,.body--pillars,.body--gate,.body--close{grid-template-columns:1fr;grid-template-rows:auto}
  /* on-dark tracking is unreliable once the body scrolls, so the bar is ink throughout */
  .deck-bar,body.on-dark .deck-bar,body:has(.slide-case-cover.is-visible) .deck-bar{grid-template-columns:1fr auto;background:var(--ink);color:var(--field);border-bottom-color:var(--line-light)}
  .deck-rule,body.on-dark .deck-rule{background:var(--line-light)}
  .icon-button,body.on-dark .icon-button,body:has(.slide-case-cover.is-visible) .icon-button{border-color:var(--line-light)}
  .icon-button:hover,body.on-dark .icon-button:hover{background:var(--field);border-color:var(--field);color:var(--ink)}
  .deck-meta{display:none}
  .brand-button{width:120px}
  .slide-rail{display:none}
  .slide h2{max-width:none}
  .cover{grid-template-rows:auto auto auto}
  .cover-kicker{display:none}
  .cover-title{padding-block:2rem 2.5rem}
  .cover-lead{font-size:var(--t-3)}
  .cover-fact{font-size:var(--t-4)}
  .metric-card{grid-template-columns:3rem minmax(0,1fr)}
  .metric-card .quick-list{grid-column:2}
  .practice-grid,.team-tracks,.case-study-grid,.industrial-grid,.process-rail{grid-template-columns:1fr}
  .practice-card,.pillar,.team-row,.case-study-grid article,.industrial-grid article,.process-step{border-left:0!important;padding-left:0!important;padding-right:0}
  .practice-card:nth-child(n+2),.pillar+.pillar,.team-row:nth-child(n+2),.case-study-grid article:nth-child(n+2),.industrial-grid article:nth-child(n+2),.process-step:nth-child(n+3){border-top:1px solid var(--line)}
  .pillar{border-top:1px solid var(--line-strong);border-bottom:0}
  .pillar:last-child{border-bottom:1px solid var(--line)}
  .engagement-board{grid-template-columns:1fr;border:0}
  .engagement-list{gap:.6rem;border-right:0}
  .engagement-tab{padding:1rem 1.1rem;border:1px solid var(--line);gap:.35rem}
  .engagement-tab:first-child{border-top:1px solid var(--line)}
  .engagement-tab small{display:block}
  .case-stage{display:none}
  .suite-layer{grid-template-columns:1fr;align-items:start;padding:.9rem 1rem}
  .suite-modules{grid-template-columns:1fr}
  .suite-custom{padding:.9rem 1rem}
  .process-line i{display:none}
  .process-step{color:var(--ink)}
  .commitment button{grid-template-columns:2.8rem minmax(0,1fr) auto;gap:.8rem}
  .commitment>ul,.commitment>p{padding-left:3.6rem;padding-right:1rem}
  .case-cover-layout h2{font-size:var(--t-hero)}
  .closing-copy h2 br{display:none}
  .closing-copy h2{font-size:var(--t-1)}
  .closing-row{grid-template-columns:1fr}
  .closing-contact .btn{width:100%}
  .btn{white-space:normal;text-align:center}
}

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  body,.deck{overflow:visible;height:auto}
  .deck{scroll-snap-type:none}
  .deck-bar,.slide-rail{display:none}
  .slide{min-height:100vh;break-after:page;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .slide-inner{padding-top:2rem}
  .engagement-tab small{display:block}
  .case-stage{display:none}
  .commitment>ul,.commitment>p{max-height:none;padding-bottom:1rem}
  .commitment button i{display:none}
  .rise,.drawline:after{opacity:1!important;transform:none!important}
}