/* Scratch Marketing & Solutions — one stylesheet for the whole site.
   Look: Signal's colours (dark navy) with Poster's hero and type (Libre Franklin 900, square corners),
   Geist Mono for small labels. Colour is applied per section with a tone class (.t-dark, .t-deep,
   .t-white); components only ever read --bg, --fg, --muted, --accent, --surface, --line, etc. */

:root{
  --navy:#1a2a3a; --navy-deep:#111d29; --navy-2:#22364b; --blue:#5ab4d6; --deep:#3a8fb5;
  --mist:#b8dff0; --off:#f4f8fb; --ink:#3a5060; --blue-text:#27698a;
  --wrap:1200px; --gutter:clamp(16px,4vw,40px); --sec-y:clamp(96px,12vw,168px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --h-font:'Libre Franklin',system-ui,sans-serif; --h-wght:900; --h-track:-.04em; --h-lh:.98;
  --b-font:'Libre Franklin',system-ui,sans-serif;
  --l-font:'Geist Mono',ui-monospace,monospace; --l-wght:500; --l-track:.08em; --l-size:12.5px;
  --h1:clamp(42px,7.2vw,100px); --h1-page:clamp(40px,6.4vw,88px); --h2:clamp(34px,5vw,64px);
}

/* ---------- tones ---------- */
.t-dark{
  --bg:var(--navy); --fg:#fff; --muted:#c3d3df; --accent:var(--blue);
  --surface:var(--navy-2); --surface-fg:#fff; --field:#16242f; --line:rgba(184,223,240,.17);
  --btn-bg:var(--blue); --btn-fg:var(--navy); --on-bg:var(--blue); --on-fg:var(--navy);
  --flow-line:rgba(90,180,214,.38); --flow-dot:rgba(184,223,240,.09); --pulse:var(--blue);
  --logo-word:#fff; --logo-desc:#7ecbe8; color-scheme:dark;
}
.t-deep{
  --bg:var(--navy-deep); --fg:#fff; --muted:#c3d3df; --accent:var(--blue);
  --surface:#1a2a3a; --surface-fg:#fff; --field:#111d29; --line:rgba(184,223,240,.15);
  --btn-bg:var(--blue); --btn-fg:var(--navy); --on-bg:var(--blue); --on-fg:var(--navy);
  --logo-word:#fff; --logo-desc:#7ecbe8; color-scheme:dark;
}
.t-white{
  --bg:#fff; --fg:var(--navy); --muted:var(--ink); --accent:var(--blue-text);
  --surface:#fff; --surface-fg:var(--navy); --field:var(--off); --line:rgba(26,42,58,.13);
  --btn-bg:var(--navy); --btn-fg:#fff; --on-bg:var(--navy); --on-fg:#fff; color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{font-family:var(--b-font);font-size:18px;line-height:1.6;color:#fff;background:var(--navy-deep);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
section,.site-footer{background:var(--bg);color:var(--fg)}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,select,input,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--h-font);font-weight:var(--h-wght);letter-spacing:var(--h-track);line-height:var(--h-lh);
  text-wrap:balance;overflow-wrap:normal;word-break:normal;hyphens:manual}
h3,h4{letter-spacing:-.02em;line-height:1.15;font-weight:800}
:focus-visible{outline:3px solid var(--accent,var(--blue));outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important} /* author display rules must never un-hide */
.hidden-field{display:none}
.nw{white-space:nowrap} /* hyphenated words never split across lines */
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy);color:#fff;padding:10px 16px;text-decoration:none}
.skip-link:focus{top:12px}

.eyebrow,.label{font-family:var(--l-font);font-weight:var(--l-wght);font-size:var(--l-size);letter-spacing:var(--l-track);
  text-transform:uppercase;color:var(--accent);line-height:1.4}
.soft{color:var(--accent)}
.lead{font-size:clamp(18px,1.4vw,21px);line-height:1.6;color:var(--muted);max-width:56ch}
p a{color:var(--accent);text-underline-offset:3px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;
  background:var(--btn-bg);color:var(--btn-fg);border:0;cursor:pointer;
  font-family:var(--b-font);font-weight:700;font-size:16px;line-height:1.2;text-decoration:none;text-align:center;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px -12px var(--btn-bg)}
.btn-sm{min-height:44px;padding:0 20px;font-size:15px}
.link-arrow{display:inline-block;color:var(--accent);font-weight:700;text-decoration:none;line-height:44px}
.link-arrow::after{content:"";display:inline-block;margin:0 0 2px 10px;vertical-align:middle;width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .2s var(--ease)}
.link-arrow:hover::after{transform:translateX(3px) rotate(45deg)}
.link-arrow:hover{text-decoration:underline;text-underline-offset:4px}
.link-btn{background:none;border:0;color:var(--muted);text-decoration:underline;text-underline-offset:4px;cursor:pointer;font-size:15.5px;min-height:44px}
.link-btn:hover{color:var(--fg)}

/* section heads */
.section{padding:var(--sec-y) 0}
.section-head{display:grid;gap:18px;margin-bottom:clamp(44px,6vw,80px);max-width:820px}
.section-head h2{font-size:var(--h2)}

/* reveal (only hides when JS is running) */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.visible{opacity:1;transform:none}
.js .hero-in{animation:heroIn .9s var(--ease) both;animation-delay:calc(var(--i,0)*90ms)}
@keyframes heroIn{from{opacity:0;transform:translateY(16px)}}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:50;background:transparent;transition:background-color .3s,box-shadow .3s}
.site-header nav{max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;color:var(--fg)}
.site-header.scrolled{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 1px 0 var(--line)}
/* a backdrop-filter makes the header the containing block for the fixed menu, so drop it while open */
.site-header.menu-open{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
.brand{display:block;flex-shrink:0;text-decoration:none}
.brand-logo{height:42px;width:auto;aspect-ratio:531.2/108}
.nav-links{display:flex;align-items:center;gap:clamp(20px,2.6vw,36px);list-style:none}
.nav-links a:not(.btn){text-decoration:none;font-size:15.5px;font-weight:600;color:var(--fg);padding:10px 0;position:relative}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav-links a:not(.btn):hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-burger{display:none;width:48px;height:48px;border:0;background:transparent;cursor:pointer;position:relative;color:var(--fg);flex-shrink:0}
.nav-burger span{position:absolute;left:12px;right:12px;height:2px;background:currentColor;transition:transform .25s var(--ease),top .25s var(--ease)}
.nav-burger span:nth-child(1){top:19px}.nav-burger span:nth-child(2){top:27px}
.nav-burger.open span:nth-child(1){top:23px;transform:rotate(45deg)}
.nav-burger.open span:nth-child(2){top:23px;transform:rotate(-45deg)}
@media (max-width:860px){
  .brand-logo{height:36px}
  .nav-burger{display:block;z-index:2}
  .nav-links{position:fixed;inset:0;z-index:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;
    padding:96px var(--gutter) 48px;background:var(--bg);visibility:hidden;opacity:0;transition:opacity .25s,visibility .25s}
  .nav-links.open{visibility:visible;opacity:1}
  .nav-links a:not(.btn){font-family:var(--h-font);font-weight:var(--h-wght);letter-spacing:var(--h-track);font-size:36px;line-height:1.2}
  .nav-links .btn{margin-top:20px}
}

/* ---------- home hero: headline full width, sentence + button left, diagram right ---------- */
.hero{position:relative;overflow:clip;padding:clamp(120px,14vw,168px) 0 clamp(72px,9vw,120px);
  background:radial-gradient(60% 55% at 78% 62%,rgba(90,180,214,.14),transparent 70%),var(--bg)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;
  grid-template-areas:"eyebrow eyebrow" "title title" "sub visual" "pick visual";gap:26px clamp(36px,5vw,72px);align-items:start}
.hero-copy{display:contents}
.hero-copy .eyebrow{grid-area:eyebrow}
.hero-title{grid-area:title;font-size:var(--h1);margin-bottom:clamp(8px,2vw,28px)}
.hero-sub{grid-area:sub;font-size:clamp(18px,1.4vw,21px);color:var(--muted);max-width:54ch}
.hero-actions{grid-area:pick;display:flex;flex-wrap:wrap;gap:12px}
.hero-visual{grid-area:visual;position:relative}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"eyebrow" "title" "sub" "pick" "visual"}
}
@media (max-width:520px){.hero-actions .btn{width:100%}}

/* flow diagram */
.flow{position:relative;width:100%;aspect-ratio:640/400}
.flow svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow-lines path{fill:none;stroke:var(--flow-line);stroke-width:1.6;vector-effect:non-scaling-stroke}
.flow-pulse{fill:var(--pulse)}
.flow-glow{fill:var(--pulse);opacity:.22}
.flow-node{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;padding:9px 13px;
  background:var(--surface);color:var(--surface-fg);border:1px solid var(--line);
  font-family:var(--l-font);font-weight:500;font-size:13px;line-height:1;letter-spacing:.01em;white-space:nowrap;box-shadow:0 8px 20px -12px rgba(0,0,0,.35)}
.flow-node::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid var(--accent)}
.flow-node.hub{background:var(--btn-bg);color:var(--btn-fg);border-color:transparent;padding:12px 18px;font-weight:600}
.flow-node.hub::before{border-color:currentColor;background:currentColor}
.flow-node.hub::after{content:"";position:absolute;inset:-6px;border:1.5px solid var(--btn-bg);opacity:0;animation:ping 2.6s var(--ease) infinite}
@keyframes ping{0%{opacity:.7;transform:scale(.92)}70%,100%{opacity:0;transform:scale(1.18)}}
.flow-node .s{display:none}
@media (max-width:520px){
  .flow-node{font-size:11.5px;padding:7px 9px;gap:5px}
  .flow-node.hub{padding:9px 12px}
  .flow-node .l{display:none}.flow-node .s{display:inline}
}
.motion-paused .flow-node.hub::after{animation-play-state:paused;opacity:0}

/* pause/play: a small square icon button */
.round-btn{width:48px;height:48px;border:1.5px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;display:grid;place-items:center;transition:border-color .2s,background-color .2s}
.round-btn:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.round-btn svg{width:18px;height:18px}
.hero-visual > .motion-btn{position:absolute;right:0;bottom:0;width:40px;height:40px;opacity:.75}
.hero-visual > .motion-btn:hover,.hero-visual > .motion-btn:focus-visible{opacity:1}
.motion-icon{display:block;width:10px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.motion-btn[aria-pressed="true"] .motion-icon{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}

/* ---------- clients ---------- */
.clients{padding:clamp(40px,5vw,56px) 0}
.clients .eyebrow{text-align:center;color:var(--muted)}
.logo-marquee{overflow:hidden;width:100%;margin-top:22px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logo-track{display:flex;width:max-content;animation:logoScroll 44s linear infinite}
.logo-marquee:hover .logo-track,.motion-paused .logo-track{animation-play-state:paused}
.logo-set{display:flex;align-items:center;gap:64px;padding-right:64px;flex-shrink:0}
@keyframes logoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:760px){.logo-track{animation-duration:80s}.logo-set{gap:44px;padding-right:44px}}
.logo-set img{height:31px;width:auto;max-width:166px;object-fit:contain;filter:grayscale(100%);opacity:.62;transition:filter .35s,opacity .35s}
.logo-set img.logo-sq{height:62px;max-width:96px}
.logo-set img.logo-badge{height:46px;max-width:132px}
.logo-set img.logo-fine{height:54px;max-width:154px;opacity:.82}
.logo-set img:hover{filter:none;opacity:1}
.client-logo-lockup{display:inline-flex;align-items:center;gap:9px;filter:grayscale(100%);opacity:.62;transition:filter .35s,opacity .35s}
.client-logo-lockup:hover{filter:none;opacity:1}
.client-logo-word--pillar{font-family:'Libre Baskerville',Georgia,serif!important;font-size:22px!important;letter-spacing:.01em!important;color:#0E1B2E!important}
.client-logo-word{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--navy);white-space:nowrap}
@media (max-width:760px){
  .logo-set img{height:24px;max-width:126px}
  .logo-set img.logo-sq{height:48px;max-width:74px}
  .logo-set img.logo-badge{height:36px;max-width:104px}
  .logo-set img.logo-fine{height:42px;max-width:120px}
  .client-logo-lockup svg{width:24px;height:24px}
  .client-logo-word{font-size:15px}
  .client-logo-word--pillar{font-size:17px!important}
}
@media (prefers-reduced-motion:reduce){
  .logo-marquee{-webkit-mask-image:none;mask-image:none}
  .logo-track{animation:none;width:auto;justify-content:center}
  .logo-set{flex-wrap:wrap;justify-content:center;gap:24px 48px;padding:0 var(--gutter)}
  .logo-set[aria-hidden="true"]{display:none}
}

/* ---------- services orbit ---------- */
.services{overflow:clip;padding-bottom:calc(var(--sec-y) * .8)}
.orbit{--card-w:clamp(270px,24vw,330px)}
.orbit-stage{position:relative;max-width:1360px;margin:0 auto;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.orbit-list{list-style:none}
.orbit:not(.is-ready) .orbit-stage{-webkit-mask-image:none;mask-image:none}
.orbit:not(.is-ready) .orbit-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.orbit-card{--dim:0;--text:1;position:relative;display:flex;flex-direction:column;gap:12px;width:var(--card-w);min-height:300px;padding:28px 26px 22px;
  background:var(--surface);color:var(--surface-fg);border:1px solid var(--line);user-select:none;-webkit-user-select:none}
.orbit:not(.is-ready) .orbit-card{width:auto}
.orbit.is-ready .orbit-stage{overflow:hidden}
.orbit.is-ready .orbit-card{position:absolute;left:50%;top:var(--orbit-lift,64px);transform-origin:50% 100%;will-change:transform;cursor:pointer}
.orbit.is-ready .orbit-card.is-front{cursor:default}
.orbit-stage.is-dragging .orbit-card{cursor:grabbing}
.orbit-card::after{content:"";position:absolute;inset:-1px;background:var(--bg);opacity:var(--dim);pointer-events:none}
.orbit-card.is-front{border-color:var(--accent);box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.orbit-top{display:flex;align-items:center;gap:12px}
.orbit-practice{font-family:var(--l-font);font-weight:var(--l-wght);font-size:11.5px;letter-spacing:var(--l-track);text-transform:uppercase;
  padding:6px 10px;border:1px solid var(--accent);color:var(--accent);line-height:1.2}
.orbit-card[data-practice="systems"] .orbit-practice{background:var(--accent);color:var(--surface)}
.orbit-title{font-size:clamp(23px,2vw,28px);margin-top:6px}
.orbit-desc{color:var(--muted);font-size:16.5px;line-height:1.55}
.orbit-link{margin-top:auto}
.orbit-card > *{opacity:var(--text)}
.orbit-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 14px;margin-top:36px}
.orbit:not(.is-ready) .orbit-controls{display:none}
.orbit-count{font-family:var(--l-font);font-weight:var(--l-wght);font-size:14px;letter-spacing:.06em;min-width:72px;text-align:center;color:var(--muted)}
.orbit-controls .motion-btn{margin-left:10px;width:40px;height:40px}
@media (max-width:640px){
  .orbit{--card-w:min(80vw,320px)}
  .orbit-card{min-height:280px;padding:24px 22px 18px}
  .orbit-stage{-webkit-mask-image:none;mask-image:none}
}

/* ---------- automate tool ---------- */
.auto-panel{max-width:860px;padding:clamp(24px,4vw,48px);background:var(--surface);color:var(--surface-fg);border:1px solid var(--line);min-height:340px}
.auto-view{display:grid;gap:22px;align-content:start}
.js .auto-view:not([hidden]){animation:viewIn .4s var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}}
.auto-step{font-family:var(--l-font);font-weight:var(--l-wght);font-size:var(--l-size);letter-spacing:var(--l-track);text-transform:uppercase;color:var(--accent)}
.auto-view .auto-step + .auto-q{margin-top:-10px}
.auto-q{font-size:clamp(24px,2.4vw,32px);display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;outline-offset:6px}
.auto-q:focus{outline:none}
.auto-q:focus-visible{outline:3px solid var(--accent)}
.auto-q-note{font-family:var(--b-font);font-weight:400;font-size:16px;letter-spacing:0;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips--ind{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.chip{display:flex;align-items:center;min-height:54px;padding:12px 18px;text-align:left;cursor:pointer;
  border:1.5px solid var(--line);background:transparent;color:var(--surface-fg);
  font-weight:500;font-size:16px;line-height:1.3;transition:border-color .15s,background-color .15s,color .15s,transform .15s}
.chip:hover{border-color:var(--accent)}
.chip:active{transform:scale(.98)}
.chip[aria-pressed="true"]{background:var(--on-bg);color:var(--on-fg);border-color:var(--on-bg)}
.chips--pains .chip{min-height:48px}
.auto-ask{display:grid;gap:10px;margin-top:6px;padding-top:22px;border-top:1px solid var(--line)}
.auto-ask label{font-weight:700;font-size:16.5px}
.auto-ask-row{display:flex;gap:10px}
.auto-ask-row input{flex:1;min-width:0;min-height:52px;padding:12px 14px;border:1.5px solid var(--line);background:var(--field);color:var(--surface-fg);font-size:16px}
.auto-ask-row input::placeholder{color:var(--muted);opacity:.85}
.auto-ask-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.auto-ask-row .btn{flex-shrink:0;min-width:150px}
.auto-ask.is-busy .btn::after{content:"";width:18px;text-align:left;animation:dots 1.2s steps(4,end) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%,100%{content:"..."}}
.auto-ask-msg{font-size:15.5px;color:var(--fg);padding:10px 14px;border-left:3px solid var(--accent);background:var(--field)}
.auto-note{font-size:15px;color:var(--muted);padding:12px 0 4px}
@media (max-width:520px){.auto-ask-row{flex-direction:column}.auto-ask-row .btn{width:100%}}
.auto-nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.auto-list{display:grid}
.auto-card{display:grid;gap:6px;padding:20px 0;border-top:1px solid var(--line);animation:cardIn .45s var(--ease) both;animation-delay:calc(var(--k,0)*70ms)}
.auto-card:last-child{border-bottom:1px solid var(--line)}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}}
.auto-card h4{font-size:21px;line-height:1.25}
.auto-card h4 a{color:inherit;text-decoration:none}
.auto-card h4 a:hover{text-decoration:underline;text-underline-offset:4px}
.auto-tag{display:inline-block;vertical-align:middle;margin-left:6px;font-family:var(--l-font);font-weight:var(--l-wght);font-size:11px;letter-spacing:var(--l-track);text-transform:uppercase;
  padding:4px 8px;border:1px solid var(--accent);color:var(--accent);line-height:1.2}
.auto-card p{font-size:16px;line-height:1.55;color:var(--muted);max-width:60ch}
.auto-card .auto-proof{display:flex;gap:9px;align-items:baseline;font-size:14.5px;color:var(--surface-fg);font-weight:500}
.auto-proof::before,.ticks li::before{content:"";flex-shrink:0;width:5px;height:10px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(40deg) translateY(-2px)}
.auto-send{display:grid;gap:16px}
.auto-send-note{font-size:15.5px;color:var(--muted)}
.auto-send-note a{font-weight:700}
.auto-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.auto-empty{padding:24px;border:1.5px dashed var(--line);color:var(--muted)}
@media (max-width:820px){.chips--ind{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){
  .auto-fields{grid-template-columns:minmax(0,1fr)}
  .auto-nav .btn{width:100%}
}

/* fields */
.field{display:grid;gap:6px}
.field label{font-size:14.5px;font-weight:600}
.field input,.field textarea{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--line);
  background:var(--field);color:var(--surface-fg);font-size:16px}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}

/* ---------- cards: recent builds, features ---------- */
.card{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,3vw,36px);background:var(--surface);color:var(--surface-fg);border:1px solid var(--line)}
.card h3{font-size:clamp(24px,2.3vw,30px)}
.card p{color:var(--muted);font-size:17px}
.card .label{color:var(--accent)}
.card > .more{margin-top:auto} /* rows of cards line up their details */
.card > .link-arrow{align-self:flex-start}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid-2 > :last-child:nth-child(odd){grid-column:1/-1} /* an odd card out spans the row instead of sitting alone */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.grid-3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.grid-2{grid-template-columns:minmax(0,1fr)}}

/* "What's included" — the detail lives one click away so the card stays short */
.more{border-top:1px solid var(--line);margin-top:6px}
.more summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;cursor:pointer;
  font-family:var(--l-font);font-weight:var(--l-wght);font-size:var(--l-size);letter-spacing:var(--l-track);text-transform:uppercase;color:var(--accent)}
.more summary::-webkit-details-marker{display:none}
.more summary::after,.faq summary::after{content:"";width:12px;height:12px;flex-shrink:0;
  background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 12px no-repeat;transition:transform .2s var(--ease)}
.more[open] summary::after,.faq details[open] summary::after{transform:rotate(45deg)}
.ticks{list-style:none;display:grid;gap:8px;padding:2px 0 8px}
.ticks li{position:relative;padding-left:20px;color:var(--surface-fg,var(--fg));font-size:16px}
.ticks li::before{position:absolute;left:2px;top:.45em}
.crossref{font-size:15.5px;color:var(--muted)}

/* ---------- inner page hero ---------- */
.page-hero{position:relative;overflow:clip;padding:clamp(140px,16vw,200px) 0 clamp(72px,9vw,120px);
  background:radial-gradient(55% 60% at 85% 30%,rgba(90,180,214,.13),transparent 70%),var(--bg)}
.page-hero h1{font-size:var(--h1-page);max-width:16ch}
.page-hero .lead{margin-top:clamp(22px,3vw,32px)}
.page-hero .hero-actions{margin-top:32px}

/* headline left, words right */
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,96px);align-items:start}
.split h2{font-size:var(--h2)}
.split .copy{display:grid;gap:18px;font-size:clamp(18px,1.35vw,20px);color:var(--muted);max-width:60ch}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}}

/* steps (numbered only when they really are a sequence) and points */
.points{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))!important}
.steps,.points{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,36px);margin-top:clamp(48px,6vw,80px)}
.steps li,.points li{display:grid;align-content:start;gap:10px;padding-top:20px;border-top:2px solid var(--line)}
.steps .num{font-family:var(--l-font);font-weight:var(--l-wght);font-size:14px;letter-spacing:.06em;color:var(--accent)}
.steps h3,.points h3{font-size:21px}
.steps p,.points p{color:var(--muted);font-size:16.5px}
@media (max-width:1000px){.steps,.points{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps,.points{grid-template-columns:minmax(0,1fr)}}

/* faq */
.faq{max-width:900px;border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;cursor:pointer;color:var(--fg)}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:clamp(20px,1.8vw,24px)}
.faq summary::after{color:var(--accent)}
.faq details p{color:var(--muted);max-width:66ch;padding:0 0 26px}

/* founder */
.founder{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,88px);align-items:start}
.founder-photo{aspect-ratio:4/5;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.founder-photo img{width:100%;height:100%;object-fit:cover} /* the photo file is already framed 4:5 */
.founder-initials{font-family:var(--h-font);font-weight:900;font-size:clamp(64px,9vw,120px);letter-spacing:-.04em;color:var(--accent)}
.founder-name{font-size:clamp(30px,3vw,40px)}
.founder .label{margin-top:8px}
.founder-bio{display:grid;gap:18px;margin-top:28px;color:var(--muted);font-size:clamp(17px,1.3vw,19px);max-width:62ch}
@media (max-width:820px){.founder{grid-template-columns:minmax(0,1fr)}.founder-photo{max-width:340px}}

/* phone screenshots of sites we built */
.sites{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.site-shot{display:grid;gap:12px;text-decoration:none;color:var(--fg)}
.site-shot img{width:100%;height:auto;aspect-ratio:600/932;object-fit:cover;object-position:top;border:6px solid #fff;box-shadow:0 24px 50px -24px rgba(0,0,0,.6);transition:transform .25s var(--ease)}
.site-shot:hover img{transform:translateY(-4px)}
.site-shot strong{display:block;font-size:17px}
.site-shot span{display:block;color:var(--muted);font-size:15px}
@media (max-width:860px){.sites{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* contact page */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:16px;align-items:start}
.calendly-card{background:#fff;padding:8px;border:1px solid var(--line)}
.calendly-inline-widget{min-width:0;width:100%;height:720px}
@media (max-width:640px){
  .calendly-inline-widget{height:900px}
  .contact-grid .cta-card{padding:20px 16px}
  .calendly-card{padding:0;border:0}
}
.contact-side{display:grid;gap:16px}
.contact-details{list-style:none;display:grid;gap:14px}
.contact-details a{color:var(--fg);font-weight:700;text-decoration:none;font-size:18px}
.contact-details a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr)}}

/* offer page */
.offer-hero h1 .big{display:block;white-space:nowrap;font-size:clamp(64px,10.5vw,150px);line-height:.85;color:var(--accent)}
.offer-when{display:inline-block;margin-bottom:24px;padding:8px 12px;border:1px solid var(--accent)}

/* ---------- the logo's path, drawn once in each page hero (about 3s, so no pause control is needed) ---------- */
.motif{position:absolute;right:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));top:50%;width:clamp(220px,26vw,340px);height:auto;transform:translateY(-38%);pointer-events:none;overflow:visible}
.motif .m-path,.motif .m-ring{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.motif .m-path{stroke-dasharray:420;stroke-dashoffset:0}
.motif .m-flag{fill:var(--accent);opacity:.75}
.motif .m-dot{fill:#fff}
.motif .m-glow{fill:var(--accent);opacity:.25}
.js .motif .m-ring{animation:mFade .5s var(--ease) both}
.js .motif .m-path{animation:mDraw 1.4s .2s var(--ease) both}
.js .motif .m-flag{animation:mFade .4s 1.5s var(--ease) both}
@keyframes mDraw{from{stroke-dashoffset:420}}
@keyframes mFade{from{opacity:0}}
/* the hero text stops short of the mark, so the two can never meet */
@media (min-width:1000px){.page-hero:has(.motif) .wrap{padding-right:calc(var(--gutter) + clamp(220px,26vw,340px) + 56px)}}
@media (max-width:999px){.motif{display:none}}
@media (prefers-reduced-motion:reduce){.js .motif *{animation:none}.motif .m-dot,.motif .m-glow{display:none}}

/* ---------- widgets (shared) ---------- */
.widget{background:var(--surface);color:var(--surface-fg);border:1px solid var(--line);padding:clamp(22px,3.5vw,44px)}
.widget .label{color:var(--accent)}
.widget-note{font-size:14.5px;color:var(--muted)}
.big-number{font-family:var(--h-font);font-weight:900;letter-spacing:-.04em;line-height:1.08;font-size:clamp(48px,7vw,88px);color:var(--accent);font-variant-numeric:tabular-nums}
.range{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:6px 12px}
.range label{font-weight:600;font-size:16px}
.range output{font-family:var(--l-font);font-weight:var(--l-wght);font-size:16px;color:var(--accent);font-variant-numeric:tabular-nums}
.range input{grid-column:1/-1}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;--p:50%}
input[type=range]::-webkit-slider-runnable-track{height:6px;background:linear-gradient(90deg,var(--accent) var(--p),var(--line) var(--p))}
input[type=range]::-moz-range-track{height:6px;background:var(--line)}
input[type=range]::-moz-range-progress{height:6px;background:var(--accent)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;background:#fff;border:3px solid var(--accent)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:0;background:#fff;border:3px solid var(--accent)}
input[type=range]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* cost of manual work */
.cost{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.cost-inputs{display:grid;gap:18px}
.cost-result{display:grid;gap:14px;align-content:start}
.cost-sub{font-size:clamp(18px,1.5vw,21px)}
.cost-sub strong{color:var(--surface-fg)}
@media (max-width:820px){.cost{grid-template-columns:minmax(0,1fr)}}

/* automation switch */
.switch-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}
.toggle{display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:0 4px;background:none;border:0;color:var(--surface-fg);font-weight:700;font-size:17px;cursor:pointer}
.toggle-track{position:relative;width:64px;height:34px;border:2px solid var(--line);background:var(--field);transition:background-color .25s,border-color .25s}
.toggle-thumb{position:absolute;top:4px;left:4px;width:22px;height:22px;background:var(--muted);transition:transform .3s var(--ease),background-color .25s}
.is-on .toggle-track{background:var(--accent);border-color:var(--accent)}
.is-on .toggle-thumb{transform:translateX(30px);background:var(--navy)}
.job-steps{list-style:none;display:grid;border-top:1px solid var(--line)}
.job-steps li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 16px;padding:14px 0;border-bottom:1px solid var(--line);transition:opacity .35s}
.job-steps .js-step{font-size:16.5px}
.job-steps .js-time{font-family:var(--l-font);font-weight:var(--l-wght);font-size:14px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.job-steps .js-auto{grid-column:1/-1;justify-self:start;font-family:var(--l-font);font-size:11.5px;letter-spacing:var(--l-track);text-transform:uppercase;color:var(--accent);
  max-height:0;opacity:0;overflow:hidden;transition:max-height .35s var(--ease),opacity .35s}
.is-on .job-steps li[data-auto] .js-auto{max-height:24px;opacity:1}
.is-on .job-steps li[data-auto] .js-step{color:var(--muted)}
.is-on .job-steps li[data-auto] .js-time{color:var(--accent)}
.switch-total{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 48px;margin-top:28px;align-items:end}
.switch-total .big-number{font-size:clamp(40px,5vw,64px)}
.switch-total > div:first-child{display:grid;gap:10px}
@media (max-width:760px){.switch-total{grid-template-columns:minmax(0,1fr)}}

/* AI document reader */
.reader{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.doc{position:relative;overflow:hidden;background:#fff;color:#1a2a3a;padding:clamp(18px,2.5vw,28px);font-size:14.5px;line-height:1.45;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.doc-from{font-weight:900;letter-spacing:.04em;font-size:16px}
.doc-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin:10px 0 14px;color:#3a5060}
.doc table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.doc th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;text-align:left;color:#3a5060;border-bottom:1.5px solid #1a2a3a;padding:6px 4px}
.doc td{padding:7px 4px;border-bottom:1px solid #dbe5ec;vertical-align:top}
.doc .n{text-align:right;white-space:nowrap}
.doc tfoot td{border:0;padding-top:6px}
.doc tfoot tr:last-child td{font-weight:800;font-size:16px}
.doc .is-hit{background:rgba(90,180,214,.28);transition:background-color .3s}
.doc-scan{position:absolute;left:0;right:0;top:-12%;height:12%;background:linear-gradient(180deg,transparent,rgba(90,180,214,.45),transparent);opacity:0;pointer-events:none}
.is-reading .doc-scan{animation:scan 1.6s var(--ease) 2}
@keyframes scan{0%{top:-12%;opacity:1}100%{top:100%;opacity:1}}
.extract{display:grid;gap:16px}
.fields{display:grid;border-top:1px solid var(--line)}
.fields div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.fields dt{font-family:var(--l-font);font-size:12px;letter-spacing:var(--l-track);text-transform:uppercase;color:var(--muted);align-self:center}
.fields dd{font-weight:700;font-variant-numeric:tabular-nums}
.js .reader .fields dd{opacity:0;transform:translateX(-8px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.js .reader .fields .is-in dd{opacity:1;transform:none}
.fields .ok dd{color:var(--accent)}
@media (max-width:860px){.reader{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.is-reading .doc-scan{animation:none}}

/* CRM pipeline */
.pipe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pipe-col{display:grid;align-content:start;gap:10px;padding:12px;background:var(--field);border:1px solid var(--line);min-height:260px}
.stage-name{width:100%;min-height:40px;padding:6px 8px;background:transparent;border:1.5px dashed transparent;color:var(--surface-fg);font-weight:800;font-size:16px}
.stage-name:hover{border-color:var(--line)}
.stage-name:focus{outline:none;border-color:var(--accent);border-style:solid}
.pipe-total{font-family:var(--l-font);font-size:12.5px;color:var(--muted);padding:0 8px}
.pipe-jobs{display:grid;gap:8px;align-content:start}
.job{display:grid;gap:6px;padding:12px;background:var(--surface);border:1px solid var(--line);outline-offset:2px}
.job strong{font-size:15.5px;line-height:1.3}
.job .val{font-family:var(--l-font);font-size:13px;color:var(--accent)}
.job button{justify-self:start;min-height:36px;padding:6px 10px;background:transparent;border:1px solid var(--accent);color:var(--accent);font-weight:700;font-size:13.5px;cursor:pointer;text-align:left}
.job button:hover{background:var(--accent);color:var(--navy)}
.pipe-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;margin-top:20px}
.pipe-sums{display:flex;flex-wrap:wrap;gap:8px 32px}
.pipe-sums strong{font-family:var(--h-font);font-weight:900;font-size:clamp(26px,3vw,36px);color:var(--accent);display:block;font-variant-numeric:tabular-nums}
@media (max-width:900px){.pipe{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.pipe{grid-template-columns:minmax(0,1fr)}.pipe-col{min-height:0}}

/* quote generator demo */
.quote{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.quote-form{display:grid;gap:14px}
.stepper{display:flex;align-items:center;gap:12px}
.stepper > span{font-weight:600;margin-right:auto}
.stepper button{width:48px;height:48px;border:1.5px solid var(--line);background:transparent;color:var(--surface-fg);font-size:22px;cursor:pointer}
.stepper button:hover:not(:disabled){border-color:var(--accent)}
.stepper button:disabled{opacity:.35;cursor:not-allowed}
.stepper output{min-width:36px;text-align:center;font-family:var(--l-font);font-size:20px;font-variant-numeric:tabular-nums}
.check{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 14px;border:1.5px solid var(--line);cursor:pointer;font-weight:500}
.check input{width:20px;height:20px;accent-color:var(--blue)}
.check:has(input:checked){border-color:var(--accent)}
.quote-out{display:grid;gap:16px;justify-items:start}
.quote-msg{padding:14px 16px;border-left:3px solid var(--accent);background:var(--field);color:var(--muted);font-size:15.5px}
@media (max-width:820px){.quote{grid-template-columns:minmax(0,1fr)}}

/* marketing project picker */
.pick{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:auto;padding:8px 14px;border:1.5px solid var(--line);background:transparent;color:var(--surface-fg);font-weight:700;font-size:15px;cursor:pointer;align-self:flex-start}
.pick::before{content:"";width:12px;height:12px;flex-shrink:0;background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 12px no-repeat;transition:transform .2s var(--ease)}
.pick[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--navy)}
.pick[aria-pressed="true"]::before{transform:rotate(45deg)}
.card.is-picked{border-color:var(--accent)}
.pick-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:20px;padding:20px 24px;border:1px solid var(--accent);background:var(--surface);animation:viewIn .35s var(--ease) both}
.pick-summary p{font-size:17px}
.pick-summary strong{color:var(--accent)}

/* about: who we've built for — a client list beside the selected client's details (any count fits, no orphan tiles) */
.tabs-ui{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px 24px;align-items:start}
.tab-list{display:grid;gap:8px}
.tab-list [role="tab"]{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:16px;padding:8px 14px 8px 8px;background:transparent;border:1.5px solid var(--line);color:var(--fg);cursor:pointer;text-align:left;transition:border-color .2s,background-color .2s}
.tab-list [role="tab"]:hover{border-color:var(--accent)}
.tab-list [role="tab"][aria-selected="true"]{border-color:var(--accent);background:var(--surface)}
.tab-logo{display:grid;place-items:center;width:104px;height:52px;background:#fff;padding:6px 8px}
.tab-logo img{max-height:40px;width:auto;max-width:100%;object-fit:contain}
.tab-logo svg{max-height:40px;width:auto}
.tab-list [role="tab"] > span:last-child{font-weight:700;font-size:15.5px;line-height:1.3}
.pillar-lockup{display:inline-flex;align-items:center;gap:6px;font-family:'Libre Baskerville',Georgia,serif;font-weight:700;font-size:17px;color:#0E1B2E;letter-spacing:.01em}
.tab-panel{position:sticky;top:96px;padding:clamp(22px,3.5vw,40px);background:var(--surface);border:1px solid var(--accent);display:grid;gap:12px}
.tab-panel:not([hidden]){animation:viewIn .35s var(--ease) both}
.tab-panel h3{font-size:clamp(26px,2.6vw,34px)}
.tab-panel p:not(.label){color:var(--muted);max-width:62ch}
@media (max-width:860px){.tabs-ui{grid-template-columns:minmax(0,1fr)}.tab-panel{position:static}}

/* ---------- call to action ---------- */
.cta .section-head{max-width:none}
.cta-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.cta-card{display:flex;flex-direction:column;gap:14px;padding:clamp(26px,3vw,40px);background:var(--surface);color:var(--surface-fg);border:1px solid var(--line)}
.cta-card h2,.cta-card h3{font-size:clamp(24px,2.3vw,32px)}
.cta-card > p{color:var(--muted)}
.cta-card .btn{margin-top:auto;align-self:flex-start}
.cta-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cta-form .full{grid-column:1/-1}
.cta-form button{grid-column:1/-1;justify-self:start}
@media (max-width:820px){.cta-cards{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){
  .cta-form{grid-template-columns:minmax(0,1fr)}
  .cta-card .btn,.cta-form button{align-self:stretch;justify-self:stretch;width:100%}
}

/* ---------- footer ---------- */
.site-footer{padding:clamp(56px,7vw,88px) 0 28px}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:40px}
@media (max-width:1000px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.footer-brand .brand-logo{height:46px}
.footer-tagline{margin-top:14px;color:var(--muted);font-size:16px}
.footer-col h2{font-family:var(--l-font);font-weight:var(--l-wght);font-size:var(--l-size);letter-spacing:var(--l-track);text-transform:uppercase;color:var(--accent);margin-bottom:12px;line-height:1.4}
.footer-col ul{list-style:none;display:grid;gap:2px}
.footer-col a{display:inline-block;padding:6px 0;color:var(--muted);text-decoration:none;font-size:16px}
.footer-col a:hover{color:var(--fg);text-decoration:underline;text-underline-offset:4px}
.footer-bottom{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
@media (max-width:760px){.footer-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .js .hero-in,.auto-card,.js .auto-view:not([hidden]){animation:none}
  .flow-node.hub::after{animation:none;opacity:0}
  .tab-panel:not([hidden]),.pick-summary,.auto-ask.is-busy .btn::after{animation:none}
  *{scroll-behavior:auto !important}
}

/* Case studies (/work/) */
.page-hero .label a{color:inherit;text-decoration:underline;text-underline-offset:4px}
.page-hero .label + h1{margin-top:18px}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 32px;margin-top:clamp(36px,4vw,52px);max-width:960px}
@media (max-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}}
.facts > div{display:grid;gap:6px;padding-top:14px;border-top:2px solid var(--line)}
.facts dd{margin:0;font-weight:600;font-size:17px}
.case-status{grid-template-columns:minmax(0,1fr) minmax(0,280px)}
.case-status .copy h2{font-size:var(--h2);color:var(--fg);margin-bottom:6px}
.case-next{margin-top:clamp(56px,7vw,96px)}
.case-links{list-style:none;display:grid;gap:4px}
.case-links a{display:inline-block;line-height:44px;font-weight:700;font-size:19px;color:var(--fg)}
.card h3 a{text-decoration:none;color:inherit}
.card h3 a:hover{text-decoration:underline;text-underline-offset:5px}
@media (max-width:860px){.case-status{grid-template-columns:minmax(0,1fr)}.case-shot{max-width:280px}}
@media (min-width:561px){.facts:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr));max-width:720px}}