/*
 * Page-level layout for the 7 service pages and the 2 case studies.
 * Composition only: shared components keep their look from components.css; nothing here restyles them.
 * Sections: 1 shared (breadcrumbs), 2 service pages (.sv*, .ui*), 3 case studies (.case-*, .flow, .live).
 */

/* 1. Shared */
body{overflow-x:clip}
.crumbs{margin:0 0 var(--s-6);font-size:var(--fs-meta);color:var(--text-3)}
ol.crumbs,.crumbs ol{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;margin:0;padding:0}
ol.crumbs{margin-bottom:var(--s-6)}
.crumbs a{color:var(--text-2)}
/* Case-study crumbs draw their own separators; service crumbs carry them in the markup. */
nav.crumbs{font-size:var(--fs-small)}
nav.crumbs li + li::before{content:"/";margin-right:var(--s-2)}

/* 2. Service pages */
.sv{position:relative;isolation:isolate;overflow:hidden;padding-block:var(--sec-y)}
.sv > .container{position:relative;z-index:1}
.sv-hero .hero__metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6)}
.sv-hero .hero__copy h1{max-width:16ch;line-height:.98;letter-spacing:-.035em}
.sv-split{display:grid;gap:var(--s-7);align-items:center}
.sv-split .sec-head{margin:0}
.sv-split .sec-head h2{font-size:clamp(1.375rem,1rem + 1.2vw,2.25rem)}
.sv-checks{list-style:none;margin:0;padding:var(--s-2) var(--s-6)}
.sv-checks li{display:flex;gap:var(--s-4);align-items:flex-start;padding:var(--s-5) 0;border-bottom:1px solid var(--ix-hair);color:var(--text-1);font-size:var(--fs-lead);line-height:1.45}
.sv-checks li:last-child{border-bottom:0}
.sv-checks__ico{flex:none;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--ix-hair);color:var(--accent-text)}
.sv-foot{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-6);color:var(--text-2)}
.sv-foot .icon{color:var(--accent-text);flex:none}
.sv-tools{display:flex;flex-direction:column;gap:var(--s-6);padding:var(--s-7) var(--s-6)}
.sv-tools__head{display:flex;align-items:center;gap:var(--s-3);color:var(--text-1);font-size:var(--fs-h4);font-weight:600}
.sv-tools .chips{gap:var(--s-3)}
.sv-tools .chip{padding:10px 18px;font-size:var(--fs-body);color:var(--text-1)}
.sv-tools .chip--accent{color:var(--accent-text)}
.sv-tools__note{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-small);color:var(--text-3)}
.sv-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--success)}
.tech{margin-top:var(--s-6);color:var(--text-2);font-size:var(--fs-small)}
.tech summary{cursor:pointer;color:var(--text-1);font-weight:500}
.tech p{margin-top:var(--s-3)}
.sv-faq{display:grid;gap:var(--s-7);align-items:start}
.sv-faq .sec-head{margin:0;gap:0}
.sv-faq .sec-head .btn{margin-top:var(--s-6)}
.sv-faq .faq{max-width:none;margin:0}
.sv-faq .faq__item:last-child{border-bottom:0}
/* Interface fragment drawn in CSS: what the finished service looks like on screen. A lit bone-paper screen in both themes, so it never reads as a dark box on a dark page. */
/* Paper tokens only inside the panel: --text-* and --bg-* follow the page theme and would turn it dark. */
figure.ui{position:relative;padding:var(--s-5);border-radius:var(--r-xl);background:var(--paper);color:var(--paper-ink)}
/* Floating cards are siblings of the figure in most pages, so they are targeted by class, with figure-level specificity against the band panel rule. */
div.ui__float,figure.ui .wm__google{background:var(--paper);border-radius:var(--r-xl)}
figure.ui .wm__toast{background:var(--paper-2);border-radius:var(--r-xl)}
.ui__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-4);margin:calc(-1 * var(--s-2)) calc(-1 * var(--s-2)) var(--s-4);border-radius:var(--r-md);background:var(--paper-2);color:var(--paper-ink);font-size:var(--fs-small);font-weight:600}
.ui__live{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--paper-muted);font-size:var(--fs-meta);font-weight:500}
.ui__rows{display:grid;gap:var(--s-2);margin:0;padding:0;list-style:none}
.ui__row{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3);border-radius:var(--r-md);background:var(--paper-2)}
.ui__ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:color-mix(in srgb,var(--accent-solid) 12%,var(--paper));color:var(--accent-solid)}
.ui__txt{flex:1;min-width:0;display:grid;gap:2px}
.ui__t{overflow:hidden;color:var(--paper-ink);font-size:var(--fs-small);font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.ui__s{color:var(--paper-muted);font-size:var(--fs-meta)}
.ui__pill{flex:none;padding:3px 10px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--accent-solid) 12%,var(--paper));color:var(--accent-solid);font-size:var(--fs-meta);font-weight:600;white-space:nowrap}
.ui__pill--ok{background:color-mix(in srgb,var(--success) 18%,var(--paper));color:color-mix(in srgb,var(--success) 55%,var(--paper-ink))}
.ui__pill--muted{background:var(--paper-3);color:var(--paper-muted)}
.ui__sk{display:block;width:var(--w,100%);height:8px;border-radius:4px;background:var(--paper-3)}
/* Website mock: a browser window with the Google result and enquiry toast overlapping its lower edge. */
.ui.wm{padding-bottom:calc(var(--s-5) + 136px)}
.wm__win{border-radius:var(--r-lg);background:var(--paper-2);overflow:hidden}
.wm__chrome{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3);background:var(--paper-3)}
.wm__dots{display:flex;gap:5px}
.wm__dots i{width:8px;height:8px;border-radius:50%;background:var(--paper-muted);opacity:.5}
.wm__url{flex:1;min-width:0;padding:3px 10px;border-radius:var(--r-pill);background:var(--paper);color:var(--paper-muted);font-size:var(--fs-meta)}
.wm__site{display:grid;gap:var(--s-4);margin:0;padding:var(--s-4);list-style:none}
.wm__nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);font-size:var(--fs-meta);color:var(--paper-muted)}
.wm__brand{color:var(--paper-ink);font-weight:700;font-size:var(--fs-small)}
.wm__links{display:flex;gap:var(--s-3)}
.wm__hero{display:grid;gap:var(--s-3)}
.wm__h{color:var(--paper-ink);font-size:clamp(1.1rem,3.4vw,1.5rem);font-weight:700;line-height:1.2}
.wm__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.wm__btn,.wm__wa{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--r-pill);font-size:var(--fs-meta);font-weight:600}
.wm__btn{background:var(--accent-solid);color:var(--on-accent)}
.wm__wa{background:color-mix(in srgb,var(--success) 18%,var(--paper));color:color-mix(in srgb,var(--success) 55%,var(--paper-ink))}
.wm__google,.wm__toast{position:absolute;margin:0;z-index:2}
.wm__google{display:grid;gap:6px;right:var(--s-4);bottom:calc(var(--s-4) + 52px);width:min(64%,300px);padding:var(--s-3) var(--s-4)}
.wm__gl{color:var(--paper-muted);font-size:var(--fs-meta)}
.wm__rt{color:var(--accent-solid);font-size:var(--fs-small);font-weight:600}
.wm__ru{color:color-mix(in srgb,var(--success) 55%,var(--paper-ink));font-size:var(--fs-meta)}
.wm__toast{display:flex;align-items:center;gap:var(--s-3);left:var(--s-4);bottom:var(--s-4);padding:var(--s-2) var(--s-4)}
@media (max-width:639px){.ui.wm{padding-bottom:calc(var(--s-5) + 196px)}}
.ui__float{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-4);padding:var(--s-3) var(--s-4)}
.ui__msgs{display:flex;flex-direction:column;gap:var(--s-3)}
.ui__msg{max-width:82%;padding:10px 14px;border-radius:16px;font-size:var(--fs-small);line-height:1.45}
.ui__msg--in{background:var(--paper-2);color:var(--paper-ink);border-bottom-left-radius:4px}
.ui__msg--out{align-self:flex-end;background:var(--accent-solid);color:var(--on-accent);border-bottom-right-radius:4px}
.ui__note{align-self:center;display:inline-flex;align-items:center;gap:var(--s-2)}
.ui__split{display:grid;gap:var(--s-4)}
.ui__paper{display:grid;gap:10px;align-content:start;padding:var(--s-4);border-radius:var(--r-md);background:var(--paper-2)}
.ui__label{color:var(--paper-muted);font-size:var(--fs-meta)}
.ui__search{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--paper-2);color:var(--paper-ink);font-size:var(--fs-small)}
.ui__search .icon{color:var(--accent-solid);flex:none}
.ui__answer{display:grid;gap:var(--s-3);margin-top:var(--s-3);padding:var(--s-4);border-radius:var(--r-md);background:var(--paper-2);color:var(--paper-ink);font-size:var(--fs-small);line-height:1.55}
.ui__src{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.ui__src span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);background:var(--paper-3);color:var(--paper-muted);font-size:var(--fs-meta)}
.ui__app{display:grid;gap:var(--s-4)}
.ui__nav{display:none;margin:0;padding:0;list-style:none}
.ui__nav li{display:flex;align-items:center;gap:var(--s-2);padding:8px 10px;border-radius:var(--r-sm);color:var(--paper-muted);font-size:var(--fs-small)}
.ui__nav li[aria-current]{background:color-mix(in srgb,var(--accent-solid) 12%,var(--paper));color:var(--accent-solid);font-weight:600}
.ui__bars{display:flex;align-items:flex-end;gap:6px;height:72px;padding:var(--s-3);border-radius:var(--r-md);background:var(--paper-2)}
.ui__bars i{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:var(--accent-solid)}
.ui__bars--ok i{background:color-mix(in srgb,var(--success) 55%,var(--paper-ink))}
/* Slate dashboard panel (custom business software): flat navy, fixed in both themes. */
figure.ui.ui--dash{background:var(--slate);color:var(--slate-ink)}
.ui--dash .ui__bar{background:var(--slate-2);color:var(--slate-ink)}
.ui--dash .ui__live,.ui--dash .ui__nav li{color:var(--slate-muted)}
.ui--dash .ui__nav li[aria-current]{background:var(--slate-3);color:var(--slate-ink)}
.dash__main{display:grid;gap:var(--s-3);min-width:0}
.dash__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
.dash__title{color:var(--slate-ink);font-size:var(--fs-small);font-weight:600}
.dash__sync,.dash__lbl,.dash__cell--mute{color:var(--slate-muted);font-size:var(--fs-meta)}
.dash__kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2);margin:0;padding:0;list-style:none}
.dash__kpi{display:grid;gap:2px;align-content:start;padding:var(--s-3);border-radius:var(--r-md);background:var(--slate-2)}
.dash__num{color:var(--slate-ink);font-size:var(--fs-h3);line-height:1.1;font-style:italic}
.dash__bars{display:flex;align-items:flex-end;gap:6px;height:64px;padding:var(--s-3);border-radius:var(--r-md);background:var(--slate-2)}
.dash__bars i{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:var(--accent-solid)}
.dash__bars i.is-today{background:var(--success)}
.dash__table{display:grid;gap:var(--s-1);margin:0;padding:0;list-style:none}
.dash__table li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);background:var(--slate-2)}
.dash__cell{overflow:hidden;color:var(--slate-ink);font-size:var(--fs-meta);white-space:nowrap;text-overflow:ellipsis}
.dash__tag{padding:2px 10px;border-radius:var(--r-pill);background:var(--slate-3);color:var(--slate-ink);font-size:var(--fs-meta);font-weight:600}
div.ui__float.ui__float--slate{background:var(--slate-2)}
.ui__float--slate .ui__ico{background:var(--slate-3);color:var(--slate-ink)}
.ui__float--slate .ui__t{color:var(--slate-ink)}
.ui__float--slate .ui__s{color:var(--slate-muted)}
/* Sand workflow panel (sales follow-up): five paper nodes joined by 4px bars; vertical on phones, 3 + 2 snake from 640px. */
figure.ui.ui--flow{--wf-gap:var(--s-5);background:var(--field-warm);color:var(--field-warm-ink)}
.ui--flow .ui__bar{background:var(--field-warm-2);color:var(--field-warm-ink)}
/* Run log: timestamps down the left, one continuous rail with a filled dot per event, the event card on the right.
   Reads top to bottom as time passing, which is what an automation does. */
.wf{--wf-time:56px;--wf-rail:24px;--wf-ink:var(--field-warm-ink);position:relative;display:grid;gap:var(--s-3);margin:0;padding:0;list-style:none}
.wf::before{content:"";position:absolute;top:10px;bottom:10px;left:calc(var(--wf-time) + var(--s-3) + var(--wf-rail) / 2 - 2px);width:4px;border-radius:2px;background:var(--wf-ink)}
.wf__node{display:grid;grid-template-columns:var(--wf-time) var(--wf-rail) minmax(0,1fr);column-gap:var(--s-3);align-items:center}
.wf__time{color:var(--field-warm-muted);font-size:var(--fs-meta);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.wf__dot{position:relative;z-index:1;justify-self:center;box-sizing:content-box;width:14px;height:14px;border:4px solid var(--field-warm);border-radius:50%;background:var(--field-warm-2)}
.wf__dot--auto{background:var(--wf-ink)}
.wf__dot--done{background:color-mix(in srgb,var(--success) 55%,var(--wf-ink))}
.wf__card{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--paper);color:var(--wf-ink)}
.wf__card--done{background:var(--wf-ink);color:var(--paper)}
.wf__card--done .wf__t{color:var(--paper)}
.wf__card--done .wf__s{color:color-mix(in srgb,var(--paper) 72%,var(--wf-ink))}
.wf__txt{display:grid;gap:2px;min-width:0}
.wf__t{color:var(--wf-ink);font-size:var(--fs-small);font-weight:600}
.wf__s{color:var(--field-warm-muted);font-size:var(--fs-meta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf__chip{flex:none;padding:2px 10px;border-radius:var(--r-pill);background:var(--field-warm);color:var(--wf-ink);font-size:var(--fs-meta);font-weight:600;white-space:nowrap}
.wf__chip--in{background:var(--field-warm-2)}
.wf__chip--auto{background:var(--wf-ink);color:var(--paper)}
.wf__chip--done{background:color-mix(in srgb,var(--success) 55%,var(--wf-ink));color:var(--paper)}
@media (max-width:479px){.wf{--wf-time:40px}.wf__chip{display:none}.wf__s{white-space:normal}}
div.ui__float.ui__float--sand{background:var(--paper)}
.ui__float--sand .ui__t{color:var(--field-warm-ink)}
.ui__float--sand .ui__s{color:var(--field-warm-muted)}
@media (min-width:640px){
  .ui__split{grid-template-columns:0.9fr 1.1fr}
  .ui__app{grid-template-columns:150px 1fr}
  .ui__nav{display:grid;gap:var(--s-1);align-content:start}
}
@media (min-width:1024px){
  .sv-split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-8)}
  .sv-split--rev{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
      .sv-faq{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-8)}
  .sv-faq .sec-head{position:sticky;top:calc(var(--nav-h) + var(--s-6))}
  .sv-hero .hero__stage{width:108%}
  .sv-hero .hero__metrics{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}
  .ui{padding:var(--s-6)}
  .ui__float{position:absolute;left:calc(-1 * var(--s-7));bottom:calc(-1 * var(--s-6));margin:0;z-index:2}
}
@media (max-width:479px){.hero__actions .btn{width:100%}.sv-checks{padding-inline:var(--s-5)}}

/* 2b. Art scenes on the hub and service pages: dark painted hero and closing band, editorial lists */
/* The paintings are dark, so these scenes keep dark tokens in both site themes (data-theme="dark" on the section). */
.art-scene[data-theme="dark"]{--art-scrim:10,11,16;--art-scrim-a:.6;--art-veil:rgba(10,11,16,.38);--art-mist:.9;color:var(--text-1)}
.sv-hero{background:var(--bg-0);padding-bottom:var(--s-9)}
/* The painting covers the whole hero: it never shrinks with the width, it crops instead. */
.sv-hero .art-bg{inset:0}
.sv-hero .art-bg img{object-position:100% 60%}
.sv-hero .art-bg::after{background:linear-gradient(90deg,rgba(var(--art-scrim),.35) 0%,rgba(var(--art-scrim),.14) 45%,transparent 70%)}
[data-theme="light"] .sv-hero :is(.crumbs,.crumbs a,.hero__metrics dt,.hero__metrics dd,.hero__metrics p,.hero__metrics span){color:var(--text-1);font-weight:600;text-shadow:var(--hero-shadow)}
[data-theme="light"] .sv-hero .art-bg::after{background:linear-gradient(90deg,rgba(var(--art-scrim),.66) 0%,rgba(var(--art-scrim),.5) 45%,rgba(var(--art-scrim),.14) 75%,transparent 100%)}
.sv-hero h1,.sv-hero .hero__copy h1{max-width:none;margin-bottom:var(--s-5);font-size:clamp(1.5rem,.6rem + 3.6vw,4.25rem);line-height:1.02;letter-spacing:-.035em;text-shadow:var(--hero-shadow)}
.sv-hero .crumbs,.sv-hero .crumbs a,.sv-hero .eyebrow{text-shadow:var(--hero-shadow)}
.sv-hero .crumbs a{color:var(--text-1)}
.sv-hero .lead,.sv-hero .reassure{color:var(--text-1);text-shadow:var(--hero-shadow)}
.sv-hero .hero__copy .lead{max-width:44ch}
.sv-cta{background:var(--bg-0)}
.sv-cta h2,.sv-cta .lead,.sv-cta .reassure{color:var(--text-1);text-shadow:var(--hero-shadow)}
@media (min-width:1024px){
  .sv-hero .hero__inner{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);row-gap:0;align-items:start;grid-template-rows:auto auto auto auto auto 1fr auto}
  .sv-hero .hero__copy{display:contents}
  .sv-hero .hero__copy>nav,.sv-hero .hero__copy>.eyebrow,.sv-hero h1{grid-column:1/-1}
  .sv-hero .hero__copy>.lead,.sv-hero .hero__copy>.hero__actions,.sv-hero .hero__copy>.reassure{grid-column:1}
  .sv-hero .hero__stage{grid-column:2;grid-row:4/7;align-self:center}
  .sv-hero .hero__metrics{margin-top:var(--s-8)}
}

/* Hub */
.hub-sec{position:relative;isolation:isolate;overflow:hidden;padding-block:var(--sec-y)}
.hub-sec>.container{position:relative;z-index:1}
.hub-head{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start}
.hub-head .metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6);width:100%;max-width:640px;margin-top:var(--s-8);text-align:left}
.hub-unsure{display:flex;flex-direction:column;align-items:flex-start;margin-top:var(--s-8);padding-top:var(--s-7);border-top:1px solid var(--line-1)}
.hub-more{margin-top:var(--s-3);font-size:var(--fs-small)}
@media (max-width:479px){.hero__actions .btn{width:100%}}
.art-scene.hub-hero .hub-head .lead.lead{max-width:64ch;text-wrap:balance}

/* Offer rows on the hub: numeral, linked title, one sentence, optional mock panel. */
.sv-cta .sv-built{margin-top:var(--s-4);text-shadow:var(--hero-shadow)}
.sv-cta .sv-built .link{color:var(--text-1);text-decoration:underline;text-underline-offset:.2em}
.hub-offers{overflow:clip}
.hub-offers__grid{display:grid;gap:var(--s-7)}
.hub-index{display:none}
.offer{display:grid;grid-template-columns:3.25rem minmax(0,1fr);column-gap:var(--s-5);padding-block:var(--s-7);border-top:1px solid var(--line-1);scroll-margin-top:calc(var(--nav-h) + var(--s-5))}
.offer__num{}
.offer__body{display:grid;gap:var(--s-3);justify-items:start}
.offer h3{font-size:var(--fs-h3)}
.offer h3 a{color:inherit;text-decoration:none}
.offer h3 .icon{display:inline-block;vertical-align:-.05em;width:.7em;height:.7em;margin-left:.2em;color:var(--accent-text);transition:transform var(--dur-2) var(--ease-out)}
.offer h3 a:hover .icon{transform:translateX(4px)}
.offer h3 a:focus-visible{box-shadow:var(--ring);border-radius:var(--r-sm)}
.offer p{max-width:52ch;color:var(--text-2)}
.offer__visual{width:100%;max-width:560px;margin:var(--s-4) 0 0;border:1px solid var(--ix-hair);overflow:hidden}
.offer__visual img{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:reduce){.offer h3 .icon{transition:none}}

/* Editorial list: serif numeral, title, sentence, a hairline between rows. */
.ed-list,ol.stepper{display:block;max-width:1040px;margin:0;padding:0;list-style:none}
.ed__row{display:grid;grid-template-columns:3.25rem minmax(0,1fr);column-gap:var(--s-5);row-gap:var(--s-2);padding-block:var(--s-6);border-top:1px solid var(--line-1)}
.ed__row:last-child{border-bottom:1px solid var(--line-1)}
.ed__row>:not(.ed__num){grid-column:2}
.ed__num{grid-column:1;grid-row:1/span 3;}
.ed__row h3{font-size:var(--fs-h3)}
.ed__row p{max-width:56ch;color:var(--text-2)}
@media (min-width:768px){
  .ed__row{grid-template-columns:5rem minmax(0,.9fr) minmax(0,1.1fr);column-gap:var(--s-7);align-items:center}
  .ed__row>:not(.ed__num){grid-column:auto}
  .ed__num{grid-row:auto}
}

/* Rail gutter: at desktop the progress line runs down the left edge and the numerals sit beside it; the fill comes from art.css. */
.rail{position:relative}
.rail>.rail__line{display:none}
@media (min-width:1024px){
  .rail>.rail__line{display:block;position:absolute;left:0;top:0;bottom:0}
  .rail .ed__row,.rail .offer{padding-left:var(--s-7)}
  .hub-offers__grid{grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:var(--s-9);align-items:start}
  .hub-index{display:block;position:sticky;top:calc(var(--nav-h) + var(--s-6));align-self:start}
  .hub-index ol{display:grid;gap:var(--s-1);margin:0;padding:0;list-style:none}
  .hub-index a{display:block;padding:var(--s-2) var(--s-3);border-left:2px solid var(--line-1);color:var(--text-3);font-size:var(--fs-small);text-decoration:none}
  .hub-index a:hover,.hub-index a.is-current,.hub-index a[aria-current]{border-left-color:var(--accent);color:var(--text-1)}
  .offer{grid-template-columns:5rem minmax(0,1fr)}
}

/* 3. Case studies */
/* Glow positions live here, not inline, so percentages stay out of the visible markup. */
.case-hero { --glow-x: 72%; --glow-y: 46%; }
#cta-final { --glow-x: 50%; --glow-y: 60%; }
.section { position: relative; padding-block: var(--sec-y); scroll-margin-top: calc(var(--nav-h) + var(--s-5)); }
.case-hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); }
.case-hero__tags .eyebrow { margin: 0; }

/* Project facts strip under the hero. */
.case-facts { display: grid; grid-template-columns: 1fr; gap: var(--s-5); margin: 0; padding: var(--s-6); }
.case-facts dt { margin-bottom: var(--s-1); font-size: var(--fs-meta); color: var(--text-3); }
.case-facts dd { margin: 0; color: var(--text-1); font-weight: 500; }

/* Problem: statement left, context right. */
.split { display: grid; gap: var(--s-7); align-items: start; }
/* Half-width column: the default h2 scale wraps to four lines at 1440. */
.split h2 { max-width: none; font-size: clamp(1.75rem, 1rem + 1.75vw, 2.25rem); }
.split__body { display: flex; flex-direction: column; gap: var(--s-5); }
.split__body p { color: var(--text-2); max-width: 58ch; }
.musts { padding: var(--s-6); }
.musts ul { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.musts__title { margin-bottom: var(--s-4); font-size: var(--fs-small); color: var(--text-3); }
.musts li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--text-1); }
.musts .icon { margin-top: 0.3em; color: var(--accent-text); }

/* How it works: numbered steps beside a tabbed stage. */
.flow { display: grid; gap: var(--s-7); align-items: center; }
.flow__steps { display: grid; gap: var(--s-6); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.flow__steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-4); }
.flow__num { grid-row: span 2; font-size: var(--fs-meta); font-weight: 600; color: var(--accent-text); font-variant-numeric: tabular-nums; padding-top: 0.35em; }
.flow__steps h3 { font-size: var(--fs-h4); }
.flow__steps p { color: var(--text-2); }

/* Live site: the address set as display type. */
.live { text-align: left; }
.live__url {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.2em; margin-top: var(--s-4);
  font-size: clamp(2.25rem, 1rem + 6vw, 6.5rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em;
  color: var(--text-1); text-decoration: none; overflow-wrap: anywhere;
}
.live__url .icon { width: 0.6em; height: 0.6em; color: var(--accent-text); transition: transform var(--dur-2) var(--ease-out); }
.live__url:hover .icon { transform: translate(4px, -4px); }
.live__url:focus-visible { box-shadow: var(--ring); border-radius: var(--r-md); }
.live__note { margin-top: var(--s-4); color: var(--text-2); max-width: 56ch; }
.tools { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--line-1); }
.tools__title { margin-bottom: var(--s-3); font-size: var(--fs-small); color: var(--text-3); }

/* Next case study teaser. */
.next-case { display: grid; gap: var(--s-5); align-items: center; padding: var(--s-5); color: inherit; text-decoration: none; }
.next-case .frame img { aspect-ratio: 16 / 9; }
.next-case__label { font-size: var(--fs-small); color: var(--text-3); }
.next-case h2 { margin-top: var(--s-1); font-size: var(--fs-h2); }
.next-case .lead { margin-top: var(--s-3); max-width: 40ch; }
.next-case .link { margin-top: var(--s-3); }
.next-case:focus-visible { box-shadow: var(--ring); }

@media (min-width: 640px) {
  .case-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .next-case { grid-template-columns: 1.1fr 1fr; padding: var(--s-6); }
}
@media (min-width: 1024px) {
  .case-facts { grid-template-columns: repeat(4, 1fr); padding: var(--s-6) var(--s-7); }
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .flow { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--s-8); }
}
@media (max-width: 479px) { .hero__actions .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .live__url .icon { transition: none; } }