/* =====================================================================
   FK design system v2 — Lora + Geist
   One source of truth for the homepage (dark) and the case studies (light).
   Pages opt in with <html class="ds-home"> or <html class="ds-case">.
   Load this LAST in <head>. Fonts (one request):
   https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Lora:ital,wght@0,500;0,600;1,400;1,500;1,600&display=swap
   ===================================================================== */
:root{
  /* ---------- type families */
  --ds-display:'Lora',Georgia,'Times New Roman',serif;   /* titles, numbers, italic accent words */
  --ds-body:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;   /* everything people read or click */
  --ds-mono:'Geist Mono',ui-monospace,'SF Mono',monospace;   /* card numbers and data only */
  --ds-accent:var(--ds-display);                          /* accent words are Lora italic, never a third face */

  /* ---------- type scale (desktop) */
  --ds-fs-hero:clamp(44px,5vw,72px);   /* homepage headline only */
  --ds-fs-display:48px;                /* case-study title, closing CTA */
  --ds-fs-h2:40px;                     /* every section title */
  --ds-fs-h3:24px;                     /* sub-section title, journey stop */
  --ds-fs-card:26px;                   /* project card title */
  --ds-fs-h4:18px;                     /* card / block title */
  --ds-fs-lede:18px;                   /* intro paragraph under a title */
  --ds-fs-body:16px;                   /* running text */
  --ds-fs-sm:15px;                     /* text inside cards, tables */
  --ds-fs-caption:13px;                /* captions, meta, legends */
  --ds-fs-label:12px;                  /* uppercase labels, mono details */
  --ds-fs-stat:56px;                   /* headline numbers */
  --ds-fs-stat-sm:32px;                /* numbers inside cards */

  /* weights: Lora 500/600, Geist 400/500/600 — nothing else */
  --ds-fw-display:600; --ds-fw-accent:500; --ds-fw-body:400; --ds-fw-ui:500; --ds-fw-strong:600;

  --ds-lh-tight:1.15; --ds-lh-snug:1.3; --ds-lh-body:1.6;
  --ds-ls-display:-.01em;   /* Lora is already compact; tighten lightly */
  --ds-ls-hero:-.02em;
  --ds-ls-label:.08em;

  /* ---------- spacing scale, 4px base */
  --ds-1:4px; --ds-2:8px; --ds-3:12px; --ds-4:16px; --ds-5:24px; --ds-6:32px; --ds-7:48px; --ds-8:64px; --ds-9:96px; --ds-10:128px;
  --ds-section:128px;                  /* between top-level sections */
  --ds-sub:96px;                       /* between sub-sections inside a part */
  --ds-head-gap:16px;                  /* label -> title, title -> lede */
  --ds-head-to-content:48px;           /* header block -> its content */

  /* ---------- radius */
  --ds-r-sm:8px; --ds-r-md:12px; --ds-r-lg:16px; --ds-r-xl:24px; --ds-r-pill:999px;

  /* ---------- motion */
  --ds-ease-out:cubic-bezier(0.23,1,0.32,1);
  --ds-ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ds-dur-fast:160ms; --ds-dur-ui:240ms; --ds-dur-reveal:800ms;

  --ds-tap:44px;
}
/* ---------- colour: dark theme (homepage) */
.ds-home{
  --ds-bg:#0A0C10; --ds-surface:#10131A; --ds-surface-2:#151925;
  --ds-line:rgba(255,255,255,.08); --ds-line-strong:rgba(255,255,255,.14);
  --ds-text:#F3F5FA;        /* 18.5:1 */
  --ds-text-2:#A3ABBD;      /* 8.5:1 body */
  --ds-text-3:#8A93A6;      /* 6.3:1 meta */
  --ds-accent-c:#5B7BFF;    /* marks, links: 5.3:1 */
  --ds-accent-soft:#8CA3FF; /* italic accent words, focus ring */
  --ds-fill:#4A63E6;        /* button fill, white label 5.0:1 */
  --ds-fill-hover:#4259D4;
}
/* ---------- colour: light theme (case studies) */
.ds-case{
  --ds-bg:#FFFFFF; --ds-surface:#F2F4F7; --ds-surface-2:#F8F9FA;
  --ds-line:#EAECF0; --ds-line-strong:#D0D5DD;
  --ds-text:#101828; --ds-text-2:#5F6470; --ds-text-3:#626B7A;
  --ds-accent-c:#0750A4; --ds-accent-soft:#0750A4; --ds-fill:#0750A4; --ds-fill-hover:#053B7A;
}
@media (max-width:760px){
  :root{--ds-fs-display:34px;--ds-fs-h2:30px;--ds-fs-h3:21px;--ds-fs-card:22px;--ds-fs-lede:17px;--ds-fs-stat:44px;--ds-fs-stat-sm:26px;--ds-section:88px;--ds-sub:64px;--ds-head-to-content:32px}
}

/* ------------------------------------------------------------------ homepage */
.ds-home body{font-family:var(--ds-body)}
/* section labels */
.ds-home #work .section-title,.ds-home #about h2:first-of-type,.ds-home .jy-eyebrow,.ds-home #testimonials h2.reveal{
  font:700 var(--ds-fs-caption)/1.4 var(--ds-body)!important;letter-spacing:.1em!important;text-transform:uppercase;margin:0 0 var(--ds-head-gap)!important}
/* section titles */
.ds-home .selected-work-sub,.ds-home .about-sub,.ds-home #experience h2,.ds-home .experience-subtitle{
  font:600 var(--ds-fs-h2)/var(--ds-lh-tight) var(--ds-display)!important;letter-spacing:var(--ds-ls-display)!important;margin:0 0 var(--ds-head-to-content)!important;max-width:820px}
.ds-home #work .section-header{margin-bottom:0!important}
.ds-home #work .case-studies{padding-bottom:0!important}
.ds-home .x-contact h2{font:600 var(--ds-fs-display)/var(--ds-lh-tight) var(--ds-display)!important;letter-spacing:var(--ds-ls-display)!important}
/* one vertical rhythm between sections */
.ds-home .x-hero{padding-bottom:0!important}
.ds-home #work .case-studies,.ds-home #about>.about,.ds-home #about>div:first-child{padding-top:var(--ds-section)!important}
.ds-home #testimonials,.ds-home #contact{padding-top:var(--ds-section)!important;padding-bottom:0!important}
.ds-home #about{padding-bottom:0!important}
/* card titles and text inside cards */
.ds-home .case-headline{font-family:var(--ds-display)!important}
.ds-home .case-summary{font-size:var(--ds-fs-sm)!important;line-height:var(--ds-lh-body)!important}

/* ------------------------------------------------------------------ case studies */
/* case studies: page-level --serif/--sans point at the system families */
.ds-case{--serif:var(--ds-display);--sans:var(--ds-body)}
.ds-case body{font-family:var(--ds-body)}
.ds-case main h1{font:600 var(--ds-fs-display)/1.12 var(--ds-display)!important;letter-spacing:-.01em!important}
.ds-case main h2,.ds-case main h2.map-title{font:600 var(--ds-fs-h2)/1.2 var(--ds-display)!important;letter-spacing:-.01em!important;margin:0!important}
.ds-case main h1 .accent{font-family:inherit!important}
.ds-case main h2 .hl,.ds-case main h2 .accent{font-family:inherit!important}
.ds-case main h3,.ds-case main h3.h3,.ds-case .sys-t,.ds-case .next-body h3{font:600 var(--ds-fs-h3)/var(--ds-lh-snug) var(--ds-display)!important;letter-spacing:-.01em!important}
.ds-case .q h3,.ds-case .tradeoff h3,.ds-case .chart :is(h3,h4){font:600 var(--ds-fs-h4)/var(--ds-lh-snug) var(--ds-display)!important;letter-spacing:0!important;text-transform:none!important}
/* intro paragraphs */
.ds-case p.lede,.ds-case .map-take{font-size:var(--ds-fs-lede)!important;line-height:var(--ds-lh-body)!important;margin-top:var(--ds-head-gap)!important;max-width:720px}
.ds-case .hero-sub{font-size:19px!important;line-height:1.55!important}
/* text inside cards, tables, captions */
.ds-case .q p,.ds-case .cons-card p,.ds-case .sys-card p,.ds-case .tradeoff p,.ds-case .principle p,.ds-case .ours p,.ds-case .next-body p,
.ds-case .spot-label p,.ds-case .duo-cap,.ds-case .seam,.ds-case td,.ds-case .caveat,.ds-case .trust,.ds-case .callout,.ds-case .pick,
.ds-case section.cs div>p:not(.lede):not(.hero-sub){font-size:var(--ds-fs-sm)!important;line-height:1.55!important}
.ds-case .metric small,.ds-case figcaption,.ds-case .legend span,.ds-case .ia-legend span,.ds-case .bar-x span,.ds-case .next-meta,
.ds-case .chart p,.ds-case .lane-label small,.ds-case span.chip{font-size:var(--ds-fs-caption)!important;line-height:1.45!important}
/* uppercase labels */
.ds-case .eyebrow,.ds-case .kicker,.ds-case .sys-k,.ds-case .spot-label .own,.ds-case .next-k,.ds-case .ih span,.ds-case th,
.ds-case .caveat>b,.ds-case .trust>b,.ds-case .seam>b,.ds-case .part{font-family:var(--ds-body)!important;font-size:var(--ds-fs-label)!important;font-weight:600!important;letter-spacing:.08em!important;text-transform:uppercase}
.ds-case .kicker{margin:0 0 var(--ds-3)!important}
/* numbers */
.ds-case .metric b,.ds-case .out-list b,.ds-case .os-card b,.ds-case .next-metric b{font-family:var(--ds-display)!important;letter-spacing:-.02em}
/* one vertical rhythm */
.ds-case .part{margin-top:var(--ds-section)!important}
.ds-case section.cs{padding-top:var(--ds-sub)!important}
.ds-case .part+section.cs{padding-top:var(--ds-6)!important}
.ds-case section.cs>h2+*:not(p),.ds-case section.cs>p.lede+*,.ds-case section.cs>.h3+*{margin-top:var(--ds-6)!important}
/* corners */
.ds-case .q,.ds-case .cons-card,.ds-case .sys-card,.ds-case .tradeoff,.ds-case .callout,.ds-case .os-card{border-radius:var(--ds-r-lg)!important}

/* ---- snap the one-off sizes in case-study widgets onto the scale (app UI mock-ups keep their own) ---- */
.ds-case :is(.ic-f b,.comp-tag,.jm-start span,.hv-pv b,.hv-took b,.os-kicker,.meta h4,.persona h4,.pc h4,.jg-t,.ic-top .t,.ic-top em,.ins-legend .t,.jhmw span,.jm-entry span,
  .cn-tag,.cn-r span,.frm-t,.frm-n,.gbl,.lc-s,.lc-t,.tf-w,.shipped>span,.canvas-h span,.dh span,.gl-meet span,.gl-m span,.learn span,.lane-label small,.tbs .tb span){
  font-size:var(--ds-fs-label)!important;line-height:1.4!important}
.ds-case :is(.bar-col .v,.stat-grid span,.nh span,.jm-note span,.gb-facts b,.gb-facts span,.frm .sticky b,.gbl em,.cn-r,.gl-m,main small){font-size:var(--ds-fs-caption)!important;line-height:1.45!important}
.ds-case :is(.tbs .tb b,.jg-m,.cmp-take b,.tf-more b,.shipped b,.shipped p,.decision .ticks li,.gl ul li,.gsp strong,section.cs li){font-size:var(--ds-fs-sm)!important;line-height:1.5!important}
.ds-case :is(.gb-card b,.lc-n b,.tf-b b){font-size:var(--ds-fs-h4)!important;font-family:var(--ds-display)!important}
.ds-case .out-list b{font:600 var(--ds-fs-stat)/1 var(--ds-display)!important;letter-spacing:-.03em!important}
.ds-case :is(.btn,.next-cta,.next-metric){font-size:var(--ds-fs-sm)!important}

/* ================================================================== case studies on v2 (light only) */
/* page colour tokens now come from the system: body and meta text pass AA on white */
html.ds-case{--para:var(--ds-text-2);--muted:var(--ds-text-3);color-scheme:light}
html.ds-case body{background:var(--ds-bg)}
.ds-case :is(button,input,select,textarea){font-family:inherit}
.ds-case .hero-sub{font-size:var(--ds-fs-lede)!important;line-height:var(--ds-lh-body)!important}
/* role / worked-with / timeline are labels, not headings */
.ds-case .meta .meta-k{margin:0 0 var(--ds-2);font:var(--ds-fw-strong) var(--ds-fs-label)/1.4 var(--ds-body);letter-spacing:var(--ds-ls-label);text-transform:uppercase;color:var(--ds-text-3)}
/* sizes onto the scale */
.ds-case :is(.metric>span,.part .num){font-size:var(--ds-fs-caption)!important}
.ds-case :is(.duo-cap b,.principle b,.hv-h b,.ld-row span,.ld-big span,.ld-nudge,.qw b,.mp b,.tl b){font-size:var(--ds-fs-sm)!important}
.ds-case :is(.cn-tag,.cn-r span,.gl-m span,.ap-s .ap-ph,.ap-s .ap-o,.bf-hint span,.bf-min span,.af-reset,.jg-m span,.lc-t,.af-path li){font-size:var(--ds-fs-label)!important}
.ds-case .ap-s p{font-size:var(--ds-fs-caption)!important}
.ds-case :is(.dh b,.comp-head b){font-size:var(--ds-fs-h4)!important}
.ds-case .next-metric b{font-size:var(--ds-fs-h3)!important}
.ds-case .cn .cn-v{font-size:var(--ds-fs-stat-sm)!important}
.ds-case .os-card b{font-size:var(--ds-fs-stat)!important}
/* coloured category tags keep their hue, darkened enough to read on white */
.ds-case :is(.cn-tag,.cn-r span,.gl-m span,.jg-t){color:color-mix(in srgb,var(--c) 62%,#000)!important}
.ds-case .af-path li:not(.on):not(.done){color:var(--ds-text-3)!important}
/* corners onto the scale: figures 24, cards 16, inner parts 12, thumbnails 8 */
.ds-case :is(figure.fig){border-radius:var(--ds-r-xl)!important}
.ds-case :is(.jg,.jhmw,.persona,.chart,.kpi-wrap,.gb-card,.cn,.ap-rule,.gl,.gl-meet>div,.matrix,.ideas,.decision,.ex-layers>div,.tf,.learn,.ld-card,.ld-out){border-radius:var(--ds-r-lg)!important}
.ds-case :is(.jm-start,.jm-end,.gb-ic,.spot-label){border-radius:var(--ds-r-md)!important}
.ds-case :is(.frm-shot,.frm-shot img,.tf-img img,tr.on td,.canvas-h span,.bf-min img,.next-meta img){border-radius:var(--ds-r-sm)!important}
.ds-case .ld-chips button{border-radius:var(--ds-r-pill)!important}
/* closing call-to-action stays on the white page */
.ds-case .closing{background:var(--ds-surface)!important;border:1px solid var(--ds-line);color:var(--ds-text-2)!important}
.ds-case .closing h3{color:var(--ds-text)!important}
.ds-case .closing p{color:var(--ds-text-2)!important}
.ds-case .closing .btn{min-height:var(--ds-tap);font-weight:var(--ds-fw-strong)}
.ds-case .closing .btn.primary{background:var(--ds-fill)!important;color:#fff!important}
.ds-case .closing .btn.ghost{color:var(--ds-text)!important;border-color:var(--ds-line-strong)!important}
@media (hover:hover) and (pointer:fine){.ds-case .closing .btn.primary:hover{background:var(--ds-fill-hover)!important}.ds-case .closing .btn.ghost:hover{border-color:var(--ds-accent-c)!important}}
/* small fills that carried white or grey text below AA */
.ds-case a.shipped>span{background:#067647!important}            /* white 5.9:1 */
.ds-case .canvas-h span{color:var(--ds-text-3)!important}

/* ---------- in-section rhythm: every gap between blocks comes from the spacing scale ---------- */
/* blocks stop pushing from below; the block after decides the gap */
.ds-case section.cs > :is(.lede,.hero-img,.metrics,.meta,.spot,.fig,.fig-pair,.chart,.out-list,.out-split,.kpi-wrap,.feature,.ladder-demo,.goals,.gl3,.ie,.ap,.ap-rule,.jhmw,.jg3,.jmap,.screens-band,.tabset,.ins-legend,.comp-head,.spec,.spec-cap,.sol-notes,.compare,.push-fig,.lane-scroll,.map-anchor,.next-k){margin-bottom:0!important}
/* hero: label 16 title 16 intro, then 32 between image, metrics and meta */
.ds-case section.hero .eyebrow{margin-bottom:0!important}
.ds-case section.hero .hero-head{margin-top:var(--ds-head-gap)!important;margin-bottom:0!important}
.ds-case section.hero .hero-sub{margin-top:var(--ds-head-gap)!important}
.ds-case section.hero > :is(.metrics,.meta){margin-top:var(--ds-6)!important}
/* content block to content block: 32 */
.ds-case section.cs > * + :is(.lane-scroll,.map-anchor,.spot,.chart,.out-list,.out-split,.kpi-wrap,.feature,.ladder-demo,.goals,.gl3,.ie,.ap-rule,.jhmw,.screens-band){margin-top:var(--ds-6)!important}
/* stacked figures, a chart's own figures, and the footnote under data: 24 */
.ds-case section.cs > :is(.spot + .spot,.fig + .fig,.chart + .kpi-wrap,.jg3 + .jhmw,.jmap + .screens-band){margin-top:var(--ds-5)!important}
.ds-case section.cs > * + .honest{margin-top:var(--ds-5)!important}
/* a caption or header sits close to what it labels: 12 / 16 */
.ds-case section.cs > .spec + .spec-cap{margin-top:var(--ds-3)!important}
.ds-case .next-k + .next-card{margin-top:var(--ds-3)!important}
.ds-case section.cs > :is(.comp-head,.ins-legend) + .tabset{margin-top:var(--ds-4)!important}
/* a new sub-heading after content opens a new block: 48 */
.ds-case section.cs > :not(.kicker):not(.part) + :is(h3,.comp-head){margin-top:var(--ds-7)!important}
/* "Up next" sits one sub-section below the closing card */
.ds-case .next{margin-top:var(--ds-9)!important}
/* the Approach wrapper (sticky step bar) must not undo the tight label-to-title gap every other part has */
.ds-case .part + .ap-run > section.cs:first-child{padding-top:var(--ds-6)!important}
.ds-case .next-k{margin-bottom:0!important}
.ds-case section.cs > .ex-wrap{margin-bottom:0!important}
.ds-case section.cs > .ex-wrap + .hscroll{margin-top:var(--ds-3)!important}
/* spot callouts are small labels on the screen art: caption size keeps them compact */
html.ds-case section.cs div.spot div.spot-label > p{font-size:var(--ds-fs-caption)!important;line-height:1.5!important}
/* hero metrics: the headline numbers read as the headline */
html.ds-case section.hero .metrics .metric{padding:var(--ds-5)!important}
html.ds-case section.hero .metrics .metric b{font-size:var(--ds-fs-stat)!important;line-height:1!important;letter-spacing:-.03em!important}
html.ds-case section.hero .metrics .metric > span{margin-top:var(--ds-3)!important;font-size:var(--ds-fs-sm)!important;line-height:1.45!important}
html.ds-case section.hero .metrics .metric small{margin-top:var(--ds-1)!important}
/* the count-up wrapper inside a number must not pick up the label's ".metric span" size */
html.ds-case .metric b .fx-num,html.ds-case .metric b span{font-size:inherit!important;line-height:inherit!important;margin:0!important;color:inherit!important;display:inline-block}
/* landing: the title starts one step below the top bar, not a whole sub-section down */
html.ds-case main{padding-top:var(--ds-7)!important}
html.ds-case main > section.hero:first-child{padding-top:0!important}
html.ds-case aside.toc{padding-top:var(--ds-6)!important}   /* START lines up with the title eyebrow */
@media (max-width:760px){html.ds-case main{padding-top:var(--ds-6)!important}}

/* ================================================================== homepage components (v2) */
/* =====================================================================
   Home design system, v2 prototype (dark only).
   Type, spacing and radius come from fk-ds.css (--ds-*). This block adds
   the colour, tap and motion tokens the homepage needs, then the few rules
   that consume them. Nothing here reaches the case studies.
   ===================================================================== */
html.ds-home{color-scheme:dark}
html.ds-home ::selection{background:rgba(91,123,255,.4);color:#fff}

/* ---------- section titles: the heading carries the section, no kicker */
html.ds-home #work h2.x-title,html.ds-home #about h2.x-title,html.ds-home #testimonials h2.x-title{
  font:600 var(--ds-fs-h2)/var(--ds-lh-tight) var(--ds-display)!important;letter-spacing:-.02em!important;
  text-transform:none!important;color:var(--ds-text)!important;margin:0 0 var(--ds-head-to-content)!important;max-width:820px;text-wrap:balance}

/* ---------- hero subtext (becomes the meteor) */
.x-lede{margin:var(--ds-head-gap) 0 0;max-width:34em;font:400 var(--ds-fs-lede)/1.7 var(--ds-body);color:var(--ds-text-2);transition:opacity .5s var(--ds-ease-out)}
.x-lede .pill-shake-wrap{display:inline-flex;vertical-align:middle;margin:0 2px}
.x-lede .pill-separator,.x-lede .pill-year,.x-lede .pill-click-hint{display:none}
.x-lede.is-spent{opacity:0!important;transition:none}
.x-lede-ghost{position:fixed;z-index:41;pointer-events:none;margin:0!important;opacity:1!important;transform:none!important}
.x-lede-ghost .gw{display:inline-block;will-change:transform,opacity}
.x-meteor-core{position:fixed;z-index:42;width:44px;height:44px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff 0,#DCE3FF 22%,rgba(140,163,255,.55) 45%,rgba(91,123,255,0) 70%);transform:translate(-50%,-50%) scale(.2);opacity:0}
.x-hero .x-cta{margin-top:32px}
.x-shock{position:fixed;z-index:43;border:1.5px solid;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(.15);opacity:0}
.x-impact-flash{position:fixed;inset:0;z-index:44;pointer-events:none;mix-blend-mode:screen;opacity:0}

/* ---------- hero headline: exactly two lines beside the card, sized to the space it has */
@media (min-width:981px){
  html.ds-home .x-hero-copy{flex:1 1 auto!important;max-width:none!important;min-width:0}
  html.ds-home .x-hero .x-h1{font-size:clamp(34px,calc((100vw - 540px) / 12.4),72px)!important;max-width:none!important}
  html.ds-home .x-h1-l{display:block;white-space:nowrap}
}
@media (min-width:1024px){html.ds-home .x-hero .x-h1{font-size:clamp(40px,calc((100vw - 540px) / 12.4),72px)!important}}  /* never smaller than a section title */
/* ---------- sealed card: an affordance that asks for the tap */
.x-cc.cc-sealed{cursor:pointer}
.x-cc.cc-sealed::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
  box-shadow:0 0 0 1px rgba(140,163,255,.55);opacity:0;animation:ccBeckon 2.8s var(--ds-ease-out) 1.2s infinite}
.x-cc.cc-armed::after{animation:none;opacity:0}
@keyframes ccBeckon{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.045)}}
.x-cc-wrap{padding-bottom:4px}
.x-cc-nudge{position:absolute;left:0;right:0;bottom:-6px;margin:0;display:flex;align-items:center;justify-content:center;gap:8px;
  font:500 14px/1.4 var(--ds-body);color:var(--ds-text-2);opacity:0;pointer-events:none;transition:opacity .4s var(--ds-ease-out)}
.x-cc-nudge svg{color:var(--ds-accent-soft);animation:ccTap 2.8s var(--ds-ease-out) 1.2s infinite}
.x-cc.cc-sealed:not(.cc-armed) ~ .x-cc-nudge{opacity:1}
html.ds-home .x-cc.cc-sealed ~ .x-cc-hint{opacity:0!important;transition:none}
@keyframes ccTap{0%,60%,100%{transform:translateY(0) scale(1)}68%{transform:translateY(2px) scale(.9)}78%{transform:translateY(0) scale(1)}}
@media (hover:hover) and (pointer:fine){.x-cc.cc-sealed:not(.cc-armed):hover ~ .x-cc-nudge{color:var(--ds-text)}}
@media (prefers-reduced-motion:reduce){.x-cc.cc-sealed::after,.x-cc-nudge svg{animation:none}.x-cc.cc-sealed::after{opacity:.6}}

/* ---------- buttons: AA labels, neutral depth instead of coloured glow */
html.ds-home .x-btn.primary,html.ds-home .x-contact .x-btn.light,html.ds-home .jy-teaser-cta{
  background:var(--ds-fill)!important;color:#fff!important;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 8px 20px -12px rgba(0,0,0,.8)!important}
@media (hover:hover) and (pointer:fine){
  html.ds-home .x-btn.primary:hover,html.ds-home .x-contact .x-btn.light:hover,html.ds-home .jy-teaser-cta:hover{background:var(--ds-fill-hover)!important}}
html.ds-home .x-btn{transition:transform .15s var(--ds-ease-out),background-color .2s ease,border-color .2s ease}
html.ds-home .x-btn:active{transform:scale(.97)}
html.ds-home button.x-btn{background:none;font-family:var(--ds-body);cursor:pointer}

/* ---------- the first project card peeks above the fold, so the hero hands off to the work */
@media (min-width:761px){html.ds-home #work .case-studies{padding-top:var(--ds-8)!important}html.ds-home #work h2.x-title{margin-bottom:var(--ds-6)!important}}
/* ---------- case cards: one headline style for all three */
html.ds-home #work .case-grid>.case-card .case-headline,html.ds-home #work .case-grid>.case-card:first-child .case-headline{
  font-size:var(--ds-fs-card)!important;line-height:var(--ds-lh-snug)!important;letter-spacing:-.01em!important;font-weight:600!important}

/* ---------- case cards: title, metrics and details always; the description joins on hover / focus */
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  html.ds-home #work .case-card .case-timeline{opacity:1;transform:none}
  html.ds-home #work .case-card .case-metrics-list,
  html.ds-home #work .case-card:is(:hover,:focus-within) .case-metrics-list{max-height:none;opacity:1;transform:none;overflow:visible;margin:24px 0 28px;padding-top:24px;border-top-color:var(--border-color,#1E2430);transition:none}
  html.ds-home #work .case-card .case-ctas-row,
  html.ds-home #work .case-card:is(:hover,:focus-within) .case-ctas-row{max-height:none;opacity:1;transform:none;overflow:visible;padding-top:0;margin-top:auto;transition:none}
  html.ds-home #work .case-card:is(:hover,:focus-within) .case-summary{margin-bottom:0}
  /* fixed heights leave room for the description, so opening it never moves the page */
  html.ds-home #work .case-grid>.case-card:first-child{height:var(--h-case-feature-h,540px)}
  html.ds-home #work .case-grid>.case-card:first-child .case-ctas-row{margin-top:0}
  html.ds-home #work .case-grid>.case-card:not(:first-child){height:var(--h-case-side-h,840px);grid-template-rows:auto minmax(0,1fr)}
  html.ds-home #work .case-grid>.case-card:not(:first-child)>.case-visual-wrapper{grid-row:auto;grid-column:auto;height:auto;aspect-ratio:16/9}
  html.ds-home #work .case-grid>.case-card:not(:first-child)>.case-card-body{grid-row:auto;grid-column:auto;align-self:stretch;background:none;padding-top:36px;justify-content:flex-start}
}

/* ---------- homepage rhythm: title 16 text, text 32 action, card 128 footer */
html.ds-home .about-left .about-desc{margin-bottom:0!important}
html.ds-home .x-contact h2 + p{margin-top:var(--ds-head-gap)!important}
html.ds-home #contact .x-footer{margin-top:var(--ds-10)!important}
/* ---------- About: journey entry point */
.x-jy-entry{display:flex;align-items:center;flex-wrap:wrap;gap:16px 20px;margin-top:var(--ds-6)}
.x-jy-entry p{margin:0;max-width:30em;font:400 var(--ds-fs-sm)/1.5 var(--ds-body);color:var(--ds-text-3)}


/* hero subtext after impact: its row closes and the CTAs rise into the space */
.x-lede.is-gone{margin-top:0!important;overflow:hidden;transition:height .7s var(--ds-ease-in-out),margin-top .7s var(--ds-ease-in-out)}

/* ---------- journey polish (behaviour unchanged) */
html.ds-home #journeySection.jy-engaged .jy-teaser{opacity:0;filter:blur(12px);pointer-events:none}
html.ds-home #journeySection #cHeading{font-size:24px!important;line-height:1.25!important;letter-spacing:-.01em!important;margin:0 0 8px!important}
/* the track starts where the stage starts, so stop 1 lands flush with the top */
html.ds-home #journeySection .jy-track{margin-top:calc(-1 * max(100vh,560px))}
@media (max-width:860px){
  html.ds-home #journeySection .jy-track{margin-top:calc(-1 * max(84vh,540px))}
  html.ds-home #journeySection #cHeading{font-size:22px!important}
}
/* desktop at rest: the starter card sits under the intro and the stage hugs it */
@media (min-width:761px){
  html.ds-home #journeySection .jy-teaser{top:272px;transform:translate(-50%,0)}
  html.ds-home #journeySection.jy-live .jy-teaser,html.ds-home #journeySection.jy-engaged .jy-teaser,html.ds-home #journeySection .jy-teaser.jy-dissolve{transform:translate(-50%,0) scale(1.04)}
  html.ds-home #journeySection.jy-frozen:not(.jy-live) .jy-stage{height:600px;min-height:0}
}

/* ---------- tap targets: 44px on anything a thumb hits */
html.ds-home .nav-toggle{position:relative}
html.ds-home .nav-toggle::after{content:"";position:absolute;inset:-4px}  /* 36px icon, 44px hit area */
@media (max-width:768px){html.ds-home .nav-links{gap:0;flex:0 1 auto!important;margin-left:auto!important}html.ds-home .nav-toggle{flex:none;margin-left:12px}}  /* the hidden links kept their 36px gaps and squeezed the menu button */
html.ds-home .nav-contact{min-height:40px;display:inline-flex;align-items:center}
html.ds-home #journeySection .jy-exit-btn{width:40px;height:40px}
html.ds-home .nav-logo{display:inline-flex;align-items:center;min-height:var(--ds-tap);min-width:var(--ds-tap)}
html.ds-home #journeySection .jy-card-nav{width:40px!important;height:40px!important}
@media (pointer:coarse){html.ds-home #journeySection .jy-card-nav{width:var(--ds-tap)!important;height:var(--ds-tap)!important}}
html.ds-home #journeySection .jy-replay-btn{min-height:var(--ds-tap);padding:0 8px}
html.ds-home .x-footer a{display:inline-flex;align-items:center;min-height:var(--ds-tap)}

/* ---------- homepage on Lora + Geist */
.ds-home{--font-sans:var(--ds-body);--font-serif:var(--ds-display)}
html.ds-home .x-hero .x-h1{font-family:var(--ds-display)!important;font-weight:var(--ds-fw-display)!important;letter-spacing:var(--ds-ls-hero)!important;line-height:1.06!important}
html.ds-home :is(.x-h1,.x-title,.x-contact h2,#journeySection .jy-intro h2) em{font-family:var(--ds-display)!important;font-style:italic;font-weight:var(--ds-fw-accent)!important;letter-spacing:0!important;color:var(--ds-accent-soft)}
html.ds-home #work .case-headline,html.ds-home #work .case-headline a{font-family:var(--ds-display)!important}
html.ds-home :is(.stat-value,#work .case-metric-item strong,.sm-big,.sm-total b){font-family:var(--ds-display)!important;letter-spacing:-.02em}
html.ds-home #journeySection #cHeading{font-family:var(--ds-display)!important}
/* the featured testimonial is a pull quote: Lora, shorter measure */
html.ds-home #testimonials .x-big blockquote{font:var(--ds-fw-accent) 24px/1.45 var(--ds-display)!important;letter-spacing:-.005em;max-width:40em;color:var(--ds-text)}
@media (max-width:760px){html.ds-home #testimonials .x-big blockquote{font-size:20px!important}}