/* ==========================================================================
   oscarthompson.co.uk — stylesheet
   Light, clean and readable, in the same family as the Show Works hire shop:
   white space, dark grey type, Space Grotesk, one red accent, soft-bordered cards.
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin subsets) ---------- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/space-grotesk-normal-300-700-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/inter-normal-300-800-latin.woff2) format('woff2')}

/* ---------- Tokens ---------- */
:root{
  --bg:#ffffff;
  --bg-soft:#f8f7f5;
  --bg-warm:#f3efe9;
  --ink:#20222a;
  --text:#2b2f36;
  --text-2:#4b5563;
  --muted:#6b7280;
  --line:#e5e7eb;
  --line-2:#d1d5db;
  --red:#d02b2b;
  --red-dark:#b12323;
  --red-soft:#fdf3f3;
  --green:#15803d;
  --font-head:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wrap:1180px;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --section:clamp(2.75rem,6vw,4.75rem);
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(20,22,30,.04),0 8px 24px -12px rgba(20,22,30,.12);
  --shadow-lg:0 2px 4px rgba(20,22,30,.05),0 24px 48px -20px rgba(20,22,30,.22);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
html:focus-within{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
.hero__card picture,.tile picture,.project__media picture{height:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.1;letter-spacing:-.015em;margin:0;color:var(--ink);text-wrap:balance}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
::selection{background:var(--red);color:#fff}

.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.section{padding-block:var(--section)}
.section--soft{background:var(--bg-soft)}
.section--tight{padding-block:calc(var(--section)*.7)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-3rem;z-index:100;background:var(--red);color:#fff;padding:.5rem .9rem;border-radius:8px;font-weight:600}
.skip:focus{top:1rem}

/* ---------- Type ---------- */
.eyebrow{font-family:var(--font-head);font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin:0 0 .9rem}
.h-display{font-size:clamp(2.4rem,5.2vw,4rem);font-weight:600;line-height:1.05}
.h-1{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.h-2{font-size:clamp(1.5rem,2.4vw,2rem)}
.lede{font-family:var(--font-head);font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.5;color:var(--text-2);max-width:60ch;text-wrap:pretty}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.prose{max-width:68ch;color:var(--text);line-height:1.75}
.prose p+p{margin-top:1.1em}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:.2em;text-decoration-thickness:1.5px}
.prose a:hover{color:var(--red)}
.prose em{font-style:italic}
.section-head{display:grid;gap:1rem;margin-bottom:clamp(1.75rem,4vw,3rem);align-items:end}
@media (min-width:860px){.section-head{grid-template-columns:1.3fr 1fr}.section-head .lede{margin:0 0 .35rem}.section-head--single{grid-template-columns:1fr}}
.underline{position:relative;padding-bottom:.9rem}
.underline::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:3px;border-radius:2px;background:var(--red)}

/* ---------- Buttons, links, chips ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.3rem;border-radius:10px;font-family:var(--font-head);font-weight:600;font-size:.98rem;line-height:1;border:1px solid transparent;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s;white-space:nowrap}
.btn--primary{background:var(--red);color:#fff;box-shadow:0 6px 16px -8px rgba(208,43,43,.6)}
.btn--primary:hover{background:var(--red-dark);transform:translateY(-1px)}
.btn--secondary{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn--secondary:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn--sm{padding:.65rem 1rem;font-size:.9rem}
.btn .arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
.link{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-head);font-weight:600;color:var(--ink);border-bottom:2px solid var(--red);padding-bottom:.1rem;transition:color .2s}
.link:hover{color:var(--red)}
.link .arrow{transition:transform .25s var(--ease)}
.link:hover .arrow{transform:translate(2px,-2px)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .8rem;border:1px solid var(--line);border-radius:999px;background:#fff;font-family:var(--font-head);font-size:.85rem;font-weight:500;color:var(--text-2)}
.chip b{color:var(--ink);font-weight:600}
.ticks{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1.5rem}
.ticks li{display:flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-size:.95rem;color:var(--text-2)}
.ticks li::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat;flex:none}

/* ---------- Top strip + nav (as on the hire shop) ---------- */
.strip{background:var(--ink);color:#fff;font-family:var(--font-head);font-size:.85rem;font-weight:500;padding:.55rem 0}
.strip ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 2.5rem}
.strip li{white-space:nowrap}
@media (max-width:640px){.strip li:nth-child(n+2){display:none}}
.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .3s}
.nav.is-scrolled{box-shadow:0 6px 24px -16px rgba(20,22,30,.25)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-head);font-weight:700;font-size:1.2rem;letter-spacing:-.01em;color:var(--ink)}
.brand__dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--red)}
.nav__links{display:flex;align-items:center;gap:.15rem}
.nav__links a{padding:.55rem .85rem;border-radius:8px;font-family:var(--font-head);font-size:.98rem;font-weight:500;color:var(--text);transition:color .2s,background .2s}
.nav__links a:hover{color:var(--ink);background:var(--bg-soft)}
.nav__cta{margin-left:.5rem;color:#fff!important}
.nav__cta:hover{background:var(--red-dark)!important}
.nav__toggle{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line-2);position:relative;z-index:60;background:#fff}
.nav__toggle span{display:block;width:18px;height:2px;background:var(--ink);position:absolute;left:12px;transition:transform .3s var(--ease),opacity .2s}
.nav__toggle span:nth-child(1){top:15px}.nav__toggle span:nth-child(2){top:21px}.nav__toggle span:nth-child(3){top:27px}
.nav.is-open .nav__toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.is-open .nav__toggle span:nth-child(2){opacity:0}
.nav.is-open .nav__toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:860px){
  .nav__toggle{display:block}
  .nav__links{position:fixed;inset:0;background:#fff;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:5.5rem var(--gutter) 3rem;gap:.25rem;overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility 0s .25s}
  .nav.is-open .nav__links{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
  .nav__links a{font-size:1.5rem;font-weight:600;padding:.9rem .25rem;border-bottom:1px solid var(--line);border-radius:0;color:var(--ink)}
  .nav__links a:hover{background:none;color:var(--red)}
  .nav__cta{margin:1.5rem 0 0;border-bottom:0!important;background:var(--red);border-radius:10px!important;text-align:center;font-size:1.1rem!important;padding:1rem!important}
  body.menu-open{overflow:hidden}
}

/* ---------- Hero ---------- */
.hero{padding:clamp(2.5rem,6vw,5rem) 0 clamp(2rem,4vw,3rem);background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%)}
.hero__grid{display:grid;gap:2.5rem;align-items:center}
@media (min-width:960px){.hero__grid{grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem)}}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.2rem);line-height:1.04;letter-spacing:-.02em;max-width:14ch}
.hero .lede{margin-top:1.25rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.hero__card{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line);aspect-ratio:5/4;background:var(--bg-warm);position:relative}
.hero__card img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero__card figcaption{position:absolute;left:1rem;bottom:1rem;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:.5rem .8rem;border-radius:8px;font-family:var(--font-head);font-size:.82rem;font-weight:500;color:var(--ink);box-shadow:var(--shadow)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:clamp(2rem,5vw,3.5rem)}
@media (min-width:700px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.1rem 1.25rem;box-shadow:var(--shadow)}
.stat__n{font-family:var(--font-head);font-size:clamp(1.7rem,2.6vw,2.2rem);font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;min-width:2.2ch}
.stat__n small{font-size:.6em;color:var(--red);margin-left:.1em}
.stat__l{font-family:var(--font-head);font-size:.85rem;color:var(--muted);margin-top:.4rem}

/* ---------- Clients ---------- */
.clients{border-block:1px solid var(--line);padding:1.5rem 0;background:#fff}
.clients__in{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:baseline}
.clients__label{font-family:var(--font-head);font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 .5rem 0 0}
.clients__list{display:flex;flex-wrap:wrap;gap:.4rem .5rem;flex:1}
.clients__list li{font-family:var(--font-head);font-size:.92rem;font-weight:500;color:var(--text-2);padding:.25rem .6rem;border-radius:6px;background:var(--bg-soft)}

/* ---------- About ---------- */
.about{display:grid;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (min-width:900px){.about{grid-template-columns:1.4fr .9fr}.about__side{position:sticky;top:92px}}
.about__side{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)}
.now{display:grid}
.now li{display:grid;gap:.2rem;padding:.9rem 0;border-top:1px solid var(--line)}
.now li:first-child{border-top:0;padding-top:.25rem}
.now .k{font-family:var(--font-head);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.now .v{font-family:var(--font-head);font-weight:600;color:var(--ink)}
.now .v small{display:block;font-family:var(--font-body);color:var(--muted);font-weight:400;font-size:.9rem;margin-top:.15rem}

/* ---------- Services ---------- */
.services{display:grid;gap:1rem}
@media (min-width:640px){.services{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.services{grid-template-columns:repeat(4,1fr)}}
.service{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.75rem;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.service:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.service__icon{width:48px;height:48px;border-radius:12px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;margin-bottom:.25rem}
.service__icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.service h3{font-size:1.35rem}
.service p{color:var(--text-2);font-size:.97rem;line-height:1.55}
.service ul{margin-top:auto;display:flex;flex-wrap:wrap;gap:.35rem;padding-top:.5rem}
.service ul li{font-family:var(--font-head);font-size:.78rem;font-weight:500;padding:.3rem .55rem;border-radius:6px;background:var(--bg-soft);color:var(--text-2)}
.roles{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;padding:1.25rem 1.5rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff}
.roles .k{font-family:var(--font-head);font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.roles ul{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem}
.roles li{font-family:var(--font-head);font-weight:500;font-size:1rem;color:var(--ink);display:flex;align-items:center;gap:.6rem}
.roles li::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--red)}

/* ---------- Credits ---------- */
.credits-layout{display:grid;gap:2.5rem;align-items:start}
@media (min-width:1000px){.credits-layout{grid-template-columns:minmax(280px,.7fr) 1.6fr}.credits-side{position:sticky;top:92px}}
.credits-side{display:grid;gap:1rem;align-content:start}
.credits-side__actions{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center}
.tile{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--bg-warm);margin:0;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.tile img{width:100%;height:100%;object-fit:cover}
.tile__cap{position:absolute;left:1rem;right:1rem;bottom:1rem;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:10px;padding:.9rem 1rem;display:grid;gap:.25rem;box-shadow:var(--shadow)}
.tile__cap .k{font-family:var(--font-head);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.tile__cap h3{font-size:1.15rem}
.tile__cap p{color:var(--text-2);font-size:.88rem;line-height:1.45}
@media (max-width:640px){.tile{aspect-ratio:4/5}.tile__cap p{display:none}}
.toolbar{display:grid;grid-template-columns:1fr auto;grid-template-areas:"f f" "s c";gap:.6rem .75rem;align-items:center;margin:0 0 .5rem;position:sticky;top:68px;z-index:5;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:.7rem 0;border-bottom:1px solid var(--line)}
.filters{grid-area:f;display:flex;flex-wrap:nowrap;gap:.4rem;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.filters::-webkit-scrollbar{display:none}
.filter{flex:none;padding:.45rem .9rem;border:1px solid var(--line-2);border-radius:999px;font-family:var(--font-head);font-size:.85rem;font-weight:500;color:var(--text);background:#fff;transition:all .2s}
.filter:hover{border-color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.search{grid-area:s;position:relative;max-width:320px}
.search input{width:100%;padding:.6rem .9rem .6rem 2.4rem;border:1px solid var(--line-2);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:16px;-webkit-appearance:none;appearance:none}
.search input:focus{outline:2px solid var(--red);outline-offset:1px;border-color:transparent}
.search input::placeholder{color:var(--muted)}
.search input::-webkit-search-decoration,.search input::-webkit-search-cancel-button{-webkit-appearance:none}
@media (hover:hover) and (pointer:fine){.search input{font-size:.92rem}}
.search svg{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)}
[data-credit-count]{grid-area:c;white-space:nowrap;font-family:var(--font-head);font-size:.85rem;color:var(--muted)}
@media (max-height:760px){.toolbar{position:static}}
.credits{display:grid}
.credits__head,.credit{display:grid;grid-template-columns:2fr 1.3fr 1.5fr .6fr;gap:1rem;align-items:start}
.credits__head{font-family:var(--font-head);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:.75rem 0;border-bottom:1px solid var(--line-2)}
.credit{padding:.85rem 0;border-bottom:1px solid var(--line);transition:background .2s}
.credit:hover{background:var(--bg-soft)}
.credit.is-hidden{display:none}
.credit__t{font-family:var(--font-head);font-weight:600;font-size:1.02rem;line-height:1.3;color:var(--ink)}
.credit__r{color:var(--text);font-size:.92rem;line-height:1.4}
.credit__cv{display:grid;gap:.1rem;color:var(--muted);font-size:.88rem;line-height:1.4}
.credit__c:empty,.credit__v:empty{display:none}
.credit__y{font-family:var(--font-head);font-size:.85rem;font-weight:500;color:var(--text-2);text-align:right;white-space:nowrap}
@media (max-width:820px){
  .credits__head{display:none}
  .toolbar{position:static;backdrop-filter:none;-webkit-backdrop-filter:none;grid-template-columns:1fr;grid-template-areas:"f" "s" "c"}
  .credit{grid-template-columns:1fr auto;grid-template-areas:"t y" "r r" "c c";gap:.2rem 1rem;padding:1rem 0}
  .credit__t{grid-area:t}.credit__y{grid-area:y}.credit__r{grid-area:r}
  .credit__cv{grid-area:c;display:block}
  .credit__c,.credit__v{display:inline}
  .credit__c:not(:empty)+.credit__v:not(:empty)::before{content:" · "}
}
.empty{display:none;padding:2.5rem 0;color:var(--muted);text-align:center}
.credits.is-empty + .empty{display:block}
.credits__more{display:flex;justify-content:center;padding:1.5rem 0 0}
.credits__more .btn .arrow{transform:none}
.credits__more .btn:hover .arrow{transform:translateY(3px)}
.group{margin-top:.5rem;margin-bottom:2rem}
.group__h{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.25rem}
.group__h h2{font-size:1.25rem}
.group__h .count{font-family:var(--font-head);font-size:.8rem;color:var(--muted)}

/* ---------- Software ---------- */
.feature{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
.feature>*{min-width:0}
@media (min-width:1000px){.feature{grid-template-columns:1fr 1.15fr}.feature--flip>.feature__text{order:2}}
.feature__logo{height:1.9rem;width:auto;margin-bottom:1.25rem}
.feature__logo--tall{height:3rem}
.feature__logo--dark{filter:invert(1) brightness(.15)}
.feature h3{font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:.9rem}
.feature__list{display:grid;gap:.55rem;margin:1.5rem 0;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.feature__list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.96rem;color:var(--text);line-height:1.45}
.feature__list li::before{content:"";flex:none;width:18px;height:18px;margin-top:.15rem;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat}
.feature__actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1.5rem}
.stack{position:relative;aspect-ratio:16/11;perspective:1600px}
.browser{position:absolute;border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--shadow-lg),0 0 0 1px var(--line);transition:transform .8s var(--ease)}
.browser__bar{height:26px;background:#f1efec;display:flex;align-items:center;gap:6px;padding:0 10px;border-bottom:1px solid #e3dfda;overflow:hidden}
.browser__bar i{width:8px;height:8px;border-radius:50%;background:#d6d2cc;flex:none}
.browser__bar i:first-child{background:#ef6b5e}.browser__bar i:nth-child(2){background:#f5bf4f}.browser__bar i:nth-child(3){background:#61c554}
.browser__bar span{margin-left:8px;font-family:var(--font-head);font-size:9px;color:#8d8781;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:600px){.browser__bar span{display:none}.stack{aspect-ratio:16/12}}
.browser img{width:100%;height:auto}
.stack .b1{width:74%;left:0;top:14%;z-index:3;transform:rotateY(6deg) rotateX(2deg)}
.stack .b2{width:58%;right:0;top:0;z-index:2;transform:rotateY(-6deg) translateZ(-40px)}
.stack .b3{width:60%;right:2%;bottom:0;z-index:4;transform:rotateY(-4deg) rotateX(-2deg)}
.stack:hover .b1{transform:rotateY(2deg) translateX(-6px)}
.stack:hover .b2{transform:rotateY(-2deg) translateY(-6px)}
.stack:hover .b3{transform:rotateY(0) translateY(6px)}
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;margin-top:clamp(2rem,5vw,3.5rem);padding:1.5rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-soft)}
.proof__item{display:grid;gap:.25rem;padding:.25rem .5rem}
.proof__n{font-family:var(--font-head);font-size:clamp(1.8rem,3vw,2.5rem);font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.proof__l{font-family:var(--font-head);font-size:.85rem;color:var(--muted)}
.proof__note{grid-column:1/-1;font-size:.88rem;color:var(--muted);margin:0;padding:.6rem .5rem 0;border-top:1px solid var(--line)}
.shop{margin-top:clamp(3rem,7vw,5.5rem)}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.75rem;margin-top:1.5rem}
.prod{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;display:grid;box-shadow:var(--shadow)}
.prod:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.prod__img{aspect-ratio:1;display:grid;place-items:center;padding:12%;border-bottom:1px solid var(--line)}
.prod__img img{width:100%;height:100%;object-fit:contain}
.prod__body{padding:.7rem .8rem .85rem;display:grid;gap:.2rem}
.prod__n{font-family:var(--font-head);font-size:.86rem;font-weight:600;line-height:1.3;color:var(--ink)}
.prod__p{font-size:.8rem;color:var(--muted)}
.prod__p b{color:var(--ink);font-weight:600}
.cats{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.25rem}
.cats li{font-family:var(--font-head);font-size:.82rem;font-weight:500;padding:.4rem .7rem;border:1px solid var(--line);border-radius:8px;color:var(--text);background:#fff}
.cats li b{color:var(--muted);font-weight:400;margin-left:.35rem}

/* ---------- Projects ---------- */
.projects{display:grid;gap:1.25rem}
@media (min-width:960px){.projects{grid-template-columns:1fr 1fr}}
.project{border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line);display:grid;grid-template-rows:auto 1fr;box-shadow:var(--shadow);transition:transform .25s var(--ease),box-shadow .25s}
.project:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.project__media{aspect-ratio:16/9;overflow:hidden;background:var(--bg-warm);display:block}
.project__media img{width:100%;height:100%;object-fit:cover}
.project__body{padding:clamp(1.25rem,3vw,1.75rem);display:grid;gap:.9rem;align-content:start}
.project h3{font-size:clamp(1.35rem,2.2vw,1.7rem)}
.project p{color:var(--text);font-size:.97rem}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:.6rem;margin-top:.25rem}
.spec{padding:.7rem .8rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-soft)}
.spec__n{font-family:var(--font-head);font-weight:600;font-size:1.35rem;letter-spacing:-.02em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.spec__n small{font-size:.6em;color:var(--red)}
.spec__l{font-family:var(--font-head);font-size:.72rem;color:var(--muted);margin-top:.3rem}
.project__foot{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;margin-top:.25rem}

/* ---------- Press ---------- */
.press{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.press a{display:grid;gap:.5rem;padding:1.25rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;box-shadow:var(--shadow);transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.press a:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.press .k{font-family:var(--font-head);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.press .t{font-family:var(--font-head);font-weight:600;font-size:1.08rem;line-height:1.25;color:var(--ink)}
.press .d{color:var(--muted);font-size:.88rem}

/* ---------- Contact ---------- */
.contact{background:var(--bg-warm)}
.contact__grid{display:grid;gap:2.5rem;align-items:end}
@media (min-width:900px){.contact__grid{grid-template-columns:1.3fr 1fr}}
.contact__email{font-family:var(--font-head);font-weight:600;font-size:clamp(1.4rem,3.6vw,2.6rem);letter-spacing:-.02em;line-height:1.1;color:var(--ink);display:inline-block;border-bottom:3px solid var(--red);padding-bottom:.15em;word-break:break-word;transition:color .2s}
.contact__email:hover{color:var(--red)}
.contact__meta{display:grid;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.5rem 1.5rem;box-shadow:var(--shadow)}
.contact__meta li{display:grid;gap:.15rem;padding:.9rem 0;border-top:1px solid var(--line)}
.contact__meta li:first-child{border-top:0}
.contact__meta .k{font-family:var(--font-head);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.contact__meta .v{font-family:var(--font-head);font-weight:500;color:var(--ink)}
.contact__meta a.v:hover{color:var(--red)}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#c8ccd4;padding:2.5rem 0 3rem;font-size:.9rem}
.footer__in{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;justify-content:space-between;align-items:center}
.footer .brand{color:#fff;font-size:1.05rem}
.footer__links{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;font-family:var(--font-head);font-weight:500}
.footer__links a:hover{color:#fff}

/* ---------- 404 ---------- */
.notfound{min-height:70vh;min-height:70svh;display:grid;place-items:center;text-align:center;padding:4rem 0}
.notfound .big{font-family:var(--font-head);font-size:clamp(5rem,18vw,12rem);font-weight:700;letter-spacing:-.04em;line-height:.9;color:var(--ink)}

/* ---------- Reveal & motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
html:not(.no-js) [data-reveal]:not(.is-in),html:not(.no-js) [data-reveal-stagger]:not(.is-in)>*{opacity:0}
html:not(.no-js) [data-reveal].is-in{animation:rise .7s var(--ease) backwards}
html:not(.no-js) [data-reveal-stagger].is-in>*{animation:rise .6s var(--ease) backwards}
html:not(.no-js) [data-reveal-stagger].is-in>*:nth-child(2){animation-delay:.06s}
html:not(.no-js) [data-reveal-stagger].is-in>*:nth-child(3){animation-delay:.12s}
html:not(.no-js) [data-reveal-stagger].is-in>*:nth-child(4){animation-delay:.18s}
html:not(.no-js) [data-reveal-stagger].is-in>*:nth-child(5){animation-delay:.24s}
html:not(.no-js) [data-reveal-stagger].is-in>*:nth-child(n+6){animation-delay:.3s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html:not(.no-js) [data-reveal]:not(.is-in),html:not(.no-js) [data-reveal-stagger]:not(.is-in)>*{opacity:1}
}
@media print{
  .strip,.nav,.toolbar,.credits__more,.footer,.stack,.hero__actions{display:none!important}
  html:not(.no-js) [data-reveal]:not(.is-in),html:not(.no-js) [data-reveal-stagger]:not(.is-in)>*{opacity:1!important}
  .credit.is-hidden{display:grid!important}
  .hero,.section,.contact{background:#fff;padding:1.25rem 0}
  .service,.project,.press a,.prod,.stat,.about__side,.contact__meta{box-shadow:none;break-inside:avoid}
  a{color:inherit}
}

/* ==========================================================================
   Interactive additions
   ========================================================================== */
/* nav: current section */
.nav__links a.is-active{color:var(--red)}
@media (min-width:861px){.nav__links a.is-active{background:var(--red-soft)}}
/* hero stats as links */
a.stat{transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
a.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
/* clients as buttons */
.clients__hint{font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.clients__list button{font:inherit;font-family:var(--font-head);font-size:.92rem;font-weight:500;color:var(--text-2);padding:.3rem .65rem;border-radius:6px;background:var(--bg-soft);border:1px solid transparent;transition:background .2s,color .2s,border-color .2s}
.clients__list button:hover{background:var(--red-soft);color:var(--red);border-color:#f3c7c3}
.clients__list li{padding:0;background:none}
/* discipline tabs */
.tabs{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.tablist{display:flex;gap:.25rem;padding:.5rem;border-bottom:1px solid var(--line);background:var(--bg-soft);overflow-x:auto;scrollbar-width:none}
.tablist::-webkit-scrollbar{display:none}
.tab{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1rem;border-radius:10px;font-family:var(--font-head);font-weight:600;font-size:.98rem;color:var(--text-2);white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.tab svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:#fff;color:var(--red);box-shadow:var(--shadow)}
.tabpanel{display:grid;gap:1.5rem;padding:clamp(1.25rem,3vw,2rem)}
@media (min-width:860px){.tabpanel{grid-template-columns:1.1fr 1fr;gap:clamp(1.5rem,4vw,3rem)}}
.tabpanel[hidden]{display:none}
.tabpanel h3{font-size:clamp(1.35rem,2.2vw,1.7rem);margin-bottom:.6rem}
.tabpanel p{color:var(--text);font-size:1rem}
.tags{display:flex;flex-wrap:wrap;gap:.35rem;margin:1rem 0 1.25rem}
.tags li{font-family:var(--font-head);font-size:.8rem;font-weight:500;padding:.3rem .6rem;border-radius:6px;background:var(--bg-soft);color:var(--text-2)}
.samples{display:grid;gap:0;align-content:start;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-soft)}
.samples li{display:grid;gap:.1rem;padding:.8rem 1rem;border-top:1px solid var(--line);background:#fff}
.samples li:first-child{border-top:0}
.samples li::before{content:"Recent credit";font-family:var(--font-head);font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.samples li:nth-child(n+2)::before{content:none}
.sample__t{font-family:var(--font-head);font-weight:600;color:var(--ink);line-height:1.3}
.sample__m{font-size:.86rem;color:var(--muted)}
.tabpanel.is-entering{animation:rise .35s var(--ease) backwards}
/* Rental Rodeo screenshot tabs */
.shots{display:grid;gap:.75rem}
.shots__tabs{display:flex;gap:.35rem}
.shots__tab{padding:.5rem .9rem;border-radius:999px;border:1px solid var(--line-2);background:#fff;font-family:var(--font-head);font-size:.88rem;font-weight:600;color:var(--text-2);transition:all .2s}
.shots__tab:hover{border-color:var(--ink);color:var(--ink)}
.shots__tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.shots__frame{border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--shadow-lg),0 0 0 1px var(--line)}
.shots__stage{position:relative;background:#fff}
.shot{margin:0}
.shot[hidden]{display:none}
.shot img{width:100%;height:auto;display:block}
.shot figcaption{padding:.7rem .9rem;font-family:var(--font-head);font-size:.86rem;color:var(--text-2);border-top:1px solid var(--line);background:var(--bg-soft)}
.shot.is-entering{animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* product scroller */
.scroller{min-width:0}
.scroller__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.25rem}
.scroller__nav{display:flex;gap:.35rem}
.scroller__btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);background:#fff;font-size:1rem;color:var(--ink);display:grid;place-items:center;transition:all .2s}
.scroller__btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.scroller__btn[disabled]{opacity:.35;pointer-events:none}
.scroller .products{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.25rem .25rem .75rem;margin:.75rem -.25rem 0;scrollbar-width:none}
.scroller .products::-webkit-scrollbar{display:none}
.scroller .prod{flex:0 0 150px;scroll-snap-align:start}
/* copy email */
.contact__row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
[data-copy].is-done{border-color:var(--green);color:var(--green)}
/* credits: empty-state clear button */
.empty .link{border:0;border-bottom:2px solid var(--red);padding:0 0 .1rem;font:inherit;font-family:var(--font-head);font-weight:600}

/* ==========================================================================
   Credits explorer
   ========================================================================== */
.cstats{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1.5rem}
@media (min-width:700px){.cstats{grid-template-columns:repeat(4,1fr)}}
.cstat{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:1rem 1.15rem;box-shadow:var(--shadow);display:grid;gap:.2rem;transition:border-color .3s}
.cstat b{font-family:var(--font-head);font-size:clamp(1.5rem,2.4vw,2rem);font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;transition:color .3s}
.cstat span{font-family:var(--font-head);font-size:.82rem;color:var(--muted)}
.cstat.is-filtered{border-color:#f3c7c3}
.cstat.is-filtered b{color:var(--red)}
.explore{display:grid;gap:1rem;margin-bottom:1rem}
@media (min-width:960px){.explore{grid-template-columns:minmax(260px,.9fr) 1.6fr}}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem 1.25rem;display:grid;gap:.75rem;align-content:start;min-width:0}
.panel__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1rem}
.panel__head .eyebrow{margin:0}
.panel__hint{font-family:var(--font-head);font-size:.8rem;color:var(--muted)}
/* timeline */
.chart{position:relative}
.chart__bars{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.4rem;align-items:end;height:150px;padding-top:1.4rem}
.bar{position:relative;height:100%;display:grid;align-items:end;border:0;padding:0;border-radius:6px;cursor:pointer;background:none}
.bar__total,.bar__hit{position:absolute;left:0;right:0;bottom:1.5rem;border-radius:6px 6px 3px 3px;transition:height .6s var(--ease),background .3s}
.bar__total{background:var(--line);height:0}
.bar__hit{background:var(--red);height:0}
.bar__n{position:absolute;left:0;right:0;text-align:center;font-family:var(--font-head);font-size:.78rem;font-weight:600;color:var(--ink);transition:bottom .6s var(--ease),opacity .3s;pointer-events:none}
.bar__y{position:absolute;left:0;right:0;bottom:0;text-align:center;font-family:var(--font-head);font-size:.78rem;color:var(--muted)}
.bar:hover .bar__total{background:var(--line-2)}
.bar[aria-pressed="true"] .bar__y{color:var(--red);font-weight:700}
.bar[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-.35rem;height:3px;border-radius:2px;background:var(--red)}
.bar:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.chart__note{font-size:.82rem;color:var(--muted);margin:0}
/* map */
.map{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem 1.25rem .75rem;margin-bottom:1.25rem;position:relative}
.map__svg{width:100%;height:auto;display:block;margin-top:.5rem;background:linear-gradient(180deg,#f8fafc,#f3f6f9);border-radius:12px;border:1px solid var(--line)}
.map__land{fill:#e3e7ec;stroke:#d5dae1;stroke-width:.6}
.map__land--uk{stroke-width:.8}
.map__inset-bg{fill:#fbfcfd}
.map__inset-ring{fill:none;stroke:#c9ced6;stroke-width:1.2}
.map__inset-label{font-family:var(--font-head);font-size:13px;fill:var(--muted)}
.map__leader{stroke:#c9ced6;stroke-width:1.2;stroke-dasharray:4 4}
.map__ukmark{fill:none;stroke:var(--red);stroke-width:2}
.map__views{display:none;gap:.3rem}
.map__view{font-family:var(--font-head);font-size:.78rem;font-weight:600;padding:.3rem .6rem;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--text-2)}
.map__view[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
@media (max-width:759px){.map__views{display:flex}.map__svg{aspect-ratio:1}.map__inset-label{display:none}}
.pin{cursor:pointer;outline:none}
.pin__halo{fill:rgba(208,43,43,.14);transform-box:fill-box;transform-origin:center;animation:halo 2.4s ease-out infinite}
.pin__dot{fill:var(--red);stroke:#fff;stroke-width:2;transition:r .25s var(--ease),fill .25s}
.pin__label{font-family:var(--font-head);font-size:11px;font-weight:600;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;opacity:0;transition:opacity .2s}
.pin:hover .pin__label,.pin:focus-visible .pin__label,.pin[aria-pressed="true"] .pin__label{opacity:1}
.pin:hover .pin__dot,.pin:focus-visible .pin__dot{fill:var(--red-dark)}
.pin[aria-pressed="true"] .pin__dot{fill:var(--ink)}
.pin.is-dim .pin__dot{fill:#c9ced6}
.pin.is-dim .pin__halo{animation:none;fill:transparent}
.pin--home path{fill:var(--ink);stroke:#fff;stroke-width:1}
@keyframes halo{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.pin__halo{animation:none}}
.map__badges{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem}
.badge{font-family:var(--font-head);font-size:.8rem;font-weight:500;padding:.35rem .65rem;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--text);transition:all .2s}
.badge b{color:var(--muted);font-weight:500;margin-left:.2rem}
.badge:hover{border-color:var(--ink)}
.badge[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.badge[aria-pressed="true"] b{color:#fff}
.map__tip{position:absolute;z-index:6;pointer-events:none;background:var(--ink);color:#fff;font-family:var(--font-head);font-size:.8rem;padding:.4rem .6rem;border-radius:6px;white-space:nowrap;transform:translate(-50%,-125%);box-shadow:var(--shadow-lg)}
/* toolbar extras */
.toolbar{grid-template-columns:1fr auto auto;grid-template-areas:"f f f" "s o c"}
.sort{grid-area:o}
.sort select{font:inherit;font-family:var(--font-head);font-size:.88rem;font-weight:500;color:var(--ink);padding:.55rem 2rem .55rem .8rem;border:1px solid var(--line-2);border-radius:999px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320222a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .6rem center/14px no-repeat;-webkit-appearance:none;appearance:none}
[data-credit-count]{display:inline-flex;align-items:center;gap:.5rem}
.clear{display:none;font-family:var(--font-head);font-size:.8rem;font-weight:600;color:var(--red);border-bottom:1px solid currentColor}
.toolbar.is-active .clear{display:inline}
@media (max-width:820px){.toolbar{grid-template-columns:1fr 1fr;grid-template-areas:"f f" "s s" "o c"}}
/* rows: expand + highlight + refresh animation */
.credit{cursor:pointer;position:relative}
.credit:focus-visible{outline:2px solid var(--red);outline-offset:-2px;border-radius:6px}
.credit.is-open{background:var(--bg-soft)}
.credit__x{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.4rem;padding:.4rem 0 .35rem}
.credit__x[hidden]{display:none}
.xchip{font-family:var(--font-head);font-size:.8rem;font-weight:500;padding:.35rem .7rem;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--ink);transition:all .2s}
.xchip:hover{border-color:var(--red);color:var(--red)}
.xchip--share{margin-left:auto}
.xchip.is-done{border-color:var(--green);color:var(--green)}
mark{background:#fde68a;color:inherit;border-radius:3px;padding:0 .1em}
.credits.is-refresh .credit:not(.is-hidden){animation:rise .45s var(--ease) both;animation-delay:calc(var(--i,0) * 28ms)}
@media (max-width:820px){.credit__x{grid-area:auto;grid-column:1/-1}.credit{grid-template-areas:"t y" "r r" "c c" "x x"}.credit__x{grid-area:x}}
.credit.is-peek{background:var(--red-soft)}

/* ==========================================================================
   Flow: running-order rail, hero motion, stacking deck, scroll stories, parallax
   ========================================================================== */
/* --- rail --- */
.rail{display:none;position:fixed;left:max(14px,calc((100vw - var(--wrap)) / 2 - 150px));top:50%;transform:translateY(-50%);z-index:40;width:130px}
@media (min-width:1380px){.rail{display:block}}
.rail__list a span{opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s;white-space:nowrap}
.rail__list a.is-active span,.rail:hover .rail__list a span,.rail__list a:focus-visible span{opacity:1;transform:none}
.rail__line{position:absolute;left:5px;top:0;bottom:0;width:2px;background:var(--line);border-radius:2px}
.rail__fill{position:absolute;left:0;top:0;width:100%;height:0;background:var(--red);border-radius:2px;transition:height .15s linear}
.rail__list{display:grid;gap:1.1rem;padding-left:1.2rem}
.rail__list a{display:grid;grid-template-columns:auto 1fr;gap:.5rem;align-items:baseline;font-family:var(--font-head);font-size:.78rem;color:var(--muted);position:relative;transition:color .2s}
.rail__list a::before{content:"";position:absolute;left:-1.2rem;top:.35em;width:8px;height:8px;margin-left:-3px;border-radius:50%;background:#fff;border:2px solid var(--line-2);transition:background .2s,border-color .2s,transform .2s}
.rail__list a b{font-weight:600;color:var(--line-2);transition:color .2s}
.rail__list a:hover{color:var(--ink)}
.rail__list a.is-active{color:var(--ink)}
.rail__list a.is-active b{color:var(--red)}
.rail__list a.is-active::before{background:var(--red);border-color:var(--red);transform:scale(1.25)}
.rail__list a.is-done::before{background:var(--red);border-color:var(--red)}
/* --- hero motion --- */
.hero{position:relative;min-height:calc(100vh - 68px);min-height:calc(100svh - 68px);display:grid;align-content:center}
.hero__title .w{display:inline-block;animation:wordUp .9s var(--ease) both;animation-delay:calc(var(--n,0) * 90ms + 80ms)}
@keyframes wordUp{from{opacity:0;transform:translateY(.6em) rotate(1.5deg)}to{opacity:1;transform:none}}
.hero .eyebrow,.hero .lede,.hero__actions,.hero .ticks{animation:rise .8s var(--ease) both}
.hero .lede{animation-delay:.5s}.hero__actions{animation-delay:.6s}.hero .ticks{animation-delay:.7s}
.hero__card{animation:cardIn 1.1s var(--ease) both;animation-delay:.25s;transform-style:preserve-3d;will-change:transform}
@keyframes cardIn{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
.hero__text{will-change:transform,opacity}
html.js-motion .hero__text{transform:translateY(calc(var(--hero-p,0) * -70px));opacity:calc(1 - var(--hero-p,0) * 1.1)}
html.js-motion .hero__card{transform:perspective(1200px) rotateX(calc(var(--tx,0) * 1deg)) rotateY(calc(var(--ty,0) * 1deg)) translateY(calc(var(--hero-p,0) * 40px)) scale(calc(1 - var(--hero-p,0) * .08))}
html.js-motion [data-hero-stats]{transform:translateY(calc(var(--hero-p,0) * 20px));opacity:calc(1 - var(--hero-p,0) * .9)}
.scroll-cue{position:absolute;left:50%;bottom:1.25rem;transform:translateX(-50%);width:26px;height:42px;border:2px solid var(--line-2);border-radius:14px;display:none}
@media (min-width:960px){.scroll-cue{display:block}}
.scroll-cue span{position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--red);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}
html.js-motion .scroll-cue{opacity:calc(1 - var(--hero-p,0) * 3)}
/* --- underline draws itself --- */
.underline::after{transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .2s}
.is-in .underline::after,.underline.is-in::after{transform:scaleX(1)}
html.no-js .underline::after{transform:none}
/* --- deck (stacking discipline cards) --- */
.deck{display:grid;gap:1.25rem}
.deck__card{position:sticky;top:calc(84px + var(--i,0) * 18px);background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:clamp(1.25rem,3vw,2rem);display:grid;gap:1.5rem;min-height:min(56vh,520px);align-content:start;transform-origin:top center;transition:transform .2s linear,filter .2s linear}
@media (min-width:860px){.deck__card{grid-template-columns:1.1fr 1fr;gap:clamp(1.5rem,4vw,3rem)}}
html.js-motion .deck__card{transform:scale(calc(1 - var(--dp,0) * .04)) translateY(calc(var(--dp,0) * -6px));filter:brightness(calc(1 - var(--dp,0) * .06))}
.deck__num{font-family:var(--font-head);font-size:.8rem;font-weight:600;letter-spacing:.08em;color:var(--red);display:block;margin-bottom:.6rem}
.deck__text h3{font-size:clamp(1.6rem,2.8vw,2.2rem);margin-bottom:.6rem}
.deck__text p{color:var(--text);font-size:1rem}
.deck__spacer{height:20vh}
/* --- scroll stories (sticky visual + steps) --- */
.story{display:grid;gap:1.5rem;align-items:start;margin-bottom:2rem}
@media (min-width:960px){.story{grid-template-columns:1.25fr .85fr;gap:clamp(1.5rem,4vw,3.5rem)}}
.story__sticky{position:sticky;top:84px;display:grid;gap:.75rem;max-height:calc(100vh - 100px);min-width:0}
.story__sticky .map{margin-bottom:0;padding:.9rem 1rem .6rem}
.story__sticky .map__svg{margin-top:.35rem}
.story__sticky .cstats{margin-bottom:0;gap:.5rem}
.story__sticky .cstat{padding:.7rem .9rem}
.story__sticky .cstat b{font-size:clamp(1.2rem,1.8vw,1.6rem)}
.story__sticky .cstat span{font-size:.74rem}
.story__sticky .chart{padding:.9rem 1rem}
.story__sticky .chart__bars{height:110px;padding-top:1.2rem}
.story__steps{display:grid}
.step{min-height:70vh;display:grid;align-content:center;gap:.6rem;padding:2rem 0;opacity:.35;transition:opacity .4s var(--ease),transform .5s var(--ease);transform:translateY(12px)}
.step.is-active{opacity:1;transform:none}
.step h3{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.step p{color:var(--text-2);font-size:1.02rem}
.step__year{font-family:var(--font-head);font-size:clamp(2.6rem,5vw,4rem);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--red)}
.step__meta{font-family:var(--font-head);font-size:.85rem;color:var(--muted)}
.step__list{display:grid;gap:.35rem;margin:.5rem 0}
.step__list li{display:grid;gap:.05rem;padding:.55rem .8rem;background:#fff;border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:border-color .2s,transform .2s}
.step__list li:hover{border-color:var(--red);transform:translateX(3px)}
.step__list .t{font-family:var(--font-head);font-weight:600;color:var(--ink);line-height:1.3}
.step__list .m{font-size:.84rem;color:var(--muted)}
.step__more{font-family:var(--font-head);font-size:.85rem;color:var(--muted)}
.step--intro,.step--outro{min-height:60vh}
.step--intro h3 span,.step--outro h3{color:var(--ink)}
.step--outro .btn{justify-self:start;margin-top:.5rem}
kbd{font-family:var(--font-head);font-size:.85em;padding:.1em .4em;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;background:#fff}
.story__steps--short .step{min-height:60vh}
.step__logo{height:1.8rem;width:auto;margin-bottom:.5rem}
@media (max-width:959px){
  .story__sticky{top:68px;z-index:3;background:var(--bg);padding-bottom:.5rem;max-height:none}
  .story__sticky .chart{display:none}
  .story__sticky .cstats{grid-template-columns:repeat(4,1fr)}
  .story__sticky .cstat{padding:.5rem .6rem}
  .story__sticky .cstat b{font-size:1.05rem}
  .story__sticky .cstat span{font-size:.62rem}
  .story__sticky .map__svg{aspect-ratio:1.5}
  .story__sticky .map__badges{display:none}
  .section--soft .story__sticky{background:var(--bg-soft)}
  .step{min-height:55vh}
  .story__steps--short .step{min-height:50vh}
}
/* journey mode on the pinned visuals */
.pin.is-now .pin__dot{fill:var(--red-dark)}
.pin.is-now .pin__halo{animation-duration:1.2s}
.pin.is-later .pin__dot{fill:#d5dae1}
.pin.is-later .pin__halo{animation:none;fill:transparent}
.pin.is-later .pin__label{display:none}
.bar.is-later .bar__hit{background:#e5e7eb}
.bar.is-now .bar__hit{background:var(--red-dark)}
.bar.is-now .bar__y{color:var(--red);font-weight:700}
/* --- parallax --- */
[data-parallax]{overflow:hidden}
html.js-motion [data-parallax] img,html.js-motion [data-parallax] picture{transform:translateY(calc(var(--py,0) * 1px)) scale(1.12);will-change:transform}
/* --- section entrance: heading slides --- */
html:not(.no-js) .section-head:not(.is-in) h2{opacity:0;transform:translateX(-14px)}
.section-head h2{transition:opacity .7s var(--ease),transform .7s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .hero__title .w,.hero .eyebrow,.hero .lede,.hero__actions,.hero .ticks,.hero__card{animation:none}
  .step{opacity:1;transform:none}
  .underline::after{transform:none;transition:none}
}

/* ---------- tighter rhythm ---------- */
.section-head{margin-bottom:clamp(1.25rem,3vw,2rem)}
.deck__card{min-height:min(44vh,420px);padding:clamp(1.1rem,2.5vw,1.6rem)}
.deck__text h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:.4rem}
.deck__text p{font-size:.96rem}
.samples li{padding:.6rem .85rem}
.step{min-height:46vh;padding:1.25rem 0}
.step--intro,.step--outro{min-height:40vh}
.step__year{font-size:clamp(2.2rem,4vw,3.2rem)}
.step h3{font-size:clamp(1.25rem,2.1vw,1.7rem)}
.step__list li{padding:.45rem .7rem}
.story__steps--short .step{min-height:44vh}
.story{margin-bottom:1.25rem}
.proof{margin-top:clamp(1.5rem,3vw,2.25rem);padding:1.1rem 1.25rem}
.shop{margin-top:clamp(2rem,4vw,3rem)}
.hero{min-height:calc(88vh - 68px);min-height:calc(88svh - 68px)}
.stats{margin-top:clamp(1.5rem,3vw,2.25rem)}
@media (max-width:959px){.step{min-height:42vh}.story__steps--short .step{min-height:40vh}.deck__card{min-height:0}}

/* ---------- shorter journey / deck / story ---------- */
.step{min-height:36vh;padding:1rem 0}
.step--intro{min-height:16vh;padding:.5rem 0}
.step--outro{min-height:28vh}
.step__list li{padding:.4rem .7rem}
.story__steps--short .step{min-height:38vh}
.deck__card{min-height:0}
.deck__card .samples li{padding:.5rem .8rem}
.deck__card .samples li::before{display:none}
.deck__card .samples{background:#fff}
@media (max-width:959px){.step{min-height:34vh}.story__steps--short .step{min-height:34vh}}
/* final pacing */
.step{min-height:30vh}
.step--intro{min-height:12vh}
.step--outro{min-height:22vh}
.story__steps--short .step{min-height:32vh}
@media (max-width:959px){.step{min-height:30vh}.story__steps--short .step{min-height:30vh}}