/* Runverra v3.1 (home): site menu (v3.6.2: no floating bar; the real header is the sticky nav), Apple-style card carousels (services + portfolio). Original code. Loaded after fx3d.css. */
:root{--v31-dark:#0B0B0C;--v31-paper:#FAF8F4;--v31-ease:cubic-bezier(.22,.8,.24,1)}
/* ---------- header menu button (all widths) ---------- */
.nav__menu{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--bone);border:1px solid var(--bone);border-radius:999px;padding:7px 14px;font:500 14px/1 Sans,sans-serif;cursor:pointer}
.nav__menu i{display:block;width:14px;height:1.5px;background:currentColor;box-shadow:0 -4.5px 0 currentColor,0 4.5px 0 currentColor}
.nav__menu:hover{background:var(--bone);color:var(--ink)}
.nav__cta{white-space:nowrap}
@media (max-width:860px){.nav nav{gap:10px}}
@media (max-width:359px){.nav__menu{padding:7px 11px}.nav__cta{padding:8px 12px}}
/* ---------- site menu (modal dialog) ---------- */
dialog.rvm{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;border:0;padding:0;background:var(--v31-dark);color:var(--v31-paper);overflow:auto;overscroll-behavior:contain}
dialog.rvm::backdrop{background:rgba(11,11,12,.6)}
.rvm__in{max-width:1180px;margin:0 auto;padding:18px var(--pad) 40px;min-height:100%;display:flex;flex-direction:column}
.rvm__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.rvm__brand{font:400 22px/1 Display,Impact,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.rvm__x{background:transparent;color:inherit;border:1px solid currentColor;border-radius:999px;font:500 14px/1 Sans,sans-serif;padding:10px 16px;cursor:pointer}
.rvm ul{list-style:none}
.rvm__main a{display:block;font:400 clamp(36px,10vw,76px)/1.04 Display,Impact,sans-serif;text-transform:uppercase;text-decoration:none;padding:6px 0;border-bottom:1px solid rgba(250,248,244,.16)}
.rvm__main a:hover,.rvm__sub a:hover{color:var(--ember)}
.rvm__sub{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-top:32px}
.rvm__sub .mono{color:rgba(250,248,244,.6);margin-bottom:8px}
.rvm__sub a{display:inline-block;padding:6px 0;font:400 16px/1.3 Sans,sans-serif;text-decoration:none}
.rvm__sub small{color:rgba(250,248,244,.6);font-size:13px}
/* ---------- carousels ---------- */
.car{position:relative;margin:0 calc(var(--pad) * -1)}
.car__track{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);padding:4px var(--pad) 8px;
 list-style:none;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-behavior:smooth}
.car__track::-webkit-scrollbar{display:none}
.car__track:focus-visible{outline:2px solid var(--ember);outline-offset:-2px}
.car__item{flex:0 0 min(84vw,380px);scroll-snap-align:start;display:flex;flex-direction:column;min-width:0}
.car__media{position:relative;display:grid;place-items:center;aspect-ratio:4/3.2;border-radius:28px;overflow:hidden;isolation:isolate;
 background:radial-gradient(120% 90% at 20% 0%,#FFE8DC,transparent 60%),linear-gradient(160deg,#fff,#F2EEE8);border:1px solid var(--line)}
.car__media .fx-obj{margin:0;transform:scale(var(--s,2))}
.car__body{padding:20px 6px 0 6px;display:flex;flex-direction:column;align-items:flex-start;flex:1}
.car__body .eyebrow{margin-bottom:8px}
.car__body h3{font-size:clamp(26px,2.2vw,32px)}
.car__body>p:not(.eyebrow):not(.tiers-h):not(.price){font-size:15px;color:#3b3732;margin-top:10px;max-width:42ch}
.car__body .btn{margin-top:20px}
.car__body .tiers--mini+.btn{margin-top:4px}
.car__body .tiers--mini{margin-bottom:18px}
.car__body .tiers--mini li{padding:6px 0;gap:12px}.car__body .tiers--mini b{font-size:22px;min-width:3.6ch}.car__body .tiers--mini span{font-size:13.5px}
.car__body .tiers-h{margin-top:14px!important}
.car__arrow{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:rgba(20,20,20,.08);color:#141414;cursor:pointer;transition:background .2s,opacity .2s}
.car__arrow svg{width:18px;height:18px}
.car__arrow:hover:not(:disabled){background:rgba(20,20,20,.16)}
.car__arrow:disabled{opacity:.38;cursor:default}
/* services: FDE card gets the dark Ink panel so the featured service reads first */
.car__item--feat .car__media{background:radial-gradient(110% 90% at 80% 10%,rgba(255,90,31,.35),transparent 60%),var(--v31-dark);border-color:var(--v31-dark)}
/* portfolio cards: real screenshots, top of page */
.work31{padding:clamp(90px,12vw,160px) var(--pad) clamp(60px,8vw,110px);border-top:1px solid var(--line)}
.work31 h2{margin-bottom:clamp(28px,4vw,56px)}
.car__media--shot{aspect-ratio:16/11;background:#141414}
.car__media--shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.car__cat{font-size:15px;color:#3b3732;margin-top:8px}
.car__link{margin-top:14px;font:600 15px/1.2 Sans,sans-serif;color:var(--ember-text,#B33E14);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.car__link:hover{color:#141414}
.offers h2{margin-bottom:0}
.offers .car{margin-top:8px}
@media (min-width:861px){.car__item{flex-basis:clamp(320px,29vw,420px)}.car__track{gap:22px}.car__media .fx-obj{--s:2.4}}
/* ---------- FDE icon: an engineer block drops into your existing tools (same --t system as the other paper pieces) ---------- */
.fx-obj--fde .fx-win{inset:0;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 18px rgba(20,20,20,.08);transform:rotateX(calc((1 - var(--t))*62deg));transform-origin:50% 100%}
.fx-obj--fde .fx-bar{left:8%;right:8%;top:9%;height:10%;background:#141414;border-radius:3px;opacity:var(--t);transform:translateZ(calc(var(--t)*10px))}
.fx-obj--fde .fx-link{left:16px;right:16px;top:43px;height:3px;background:linear-gradient(90deg,var(--ember),#B14BFF);transform:translateZ(6px) scaleX(var(--t));transform-origin:left}
.fx-obj--fde .fx-tool{width:22px;height:22px;top:34px;background:#fff;border:1px solid rgba(20,20,20,.28);border-radius:4px;
 transform:translate3d(0,calc((1 - var(--t))*var(--dy)),calc(var(--t)*12px)) rotate(calc((1 - var(--t))*var(--rz)))}
.fx-obj--fde .fx-tool0{left:8px;--dy:22px;--rz:-24deg}.fx-obj--fde .fx-tool2{left:66px;--dy:22px;--rz:24deg}
.fx-obj--fde .fx-dock{width:22px;height:22px;left:37px;top:34px;background:var(--ember);border-radius:4px;box-shadow:0 0 calc(var(--t)*16px) var(--ember);
 transform:translate3d(0,calc((1 - var(--t))*-56px),calc(var(--t)*18px)) rotate(calc((1 - var(--t))*135deg))}
.car__item--feat .fx-win{background:#F2EEE8}
/* ---------- reduced motion: everything static and readable ---------- */
@media (prefers-reduced-motion:reduce){
  .car__track{scroll-behavior:auto}
}
/* ---------- v3.2 footer: 'Find us' profile links (same link style as the legal row); footer grows with its content, mark space kept ---------- */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.foot{height:auto;min-height:clamp(260px,34vw,520px);padding-bottom:calc(16vw + 14px)}
.foot__find{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;margin-top:14px;font-size:14px}
.foot__find .mono{color:var(--mute)}
.foot__find a{color:var(--bone)}
.foot__find a:hover{color:var(--ember-text,#B33E14)}
@media (max-width:860px){.foot{height:auto;min-height:calc(clamp(260px,34vw,520px) + 24px)}}
.foot__find a{display:inline-block;min-width:24px;min-height:24px;text-align:center}
/* v3.3: text price line on a service card (home .price--q style, as the r5 FDE Custom build line) */
.car__body .price--q{margin:12px 0 0}
/* v3.4: short cards + 'See more' text link, centred Apple-style control row (arrows either side of a chip row) */
.car__more{position:relative;margin-top:16px;font:600 15px/1.2 Sans,sans-serif;color:var(--ember-text,#B33E14);text-decoration:none;display:inline-flex;align-items:center;gap:4px;min-height:24px}
.car__more:hover{color:#0B0B0C;text-decoration:underline;text-underline-offset:3px}
.car__more:focus-visible{outline:2px solid #FF5A1F;outline-offset:3px;border-radius:4px}
.car__body .price--q+.car__more{margin-top:10px}
.car__ctl{display:flex;align-items:center;justify-content:center;gap:10px;padding:26px var(--pad) 0;max-width:100%;box-sizing:border-box}
.car__ctl .car__arrow{flex:0 0 auto;width:40px;height:40px;background:#0B0B0C;color:#F7F4EF}
.car__ctl .car__arrow:hover:not(:disabled){background:#2a2826}
.car__ctl .car__arrow:disabled{opacity:.25}
.car__arrow:focus-visible,.car__chip:focus-visible{outline:2px solid #FF5A1F;outline-offset:2px}
.car__chips{display:flex;gap:6px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:4px;border-radius:999px;background:rgba(11,11,12,.06);justify-content:safe center}
.car__chips::-webkit-scrollbar{display:none}
.car__chip{flex:0 0 auto;position:relative;display:grid;place-items:center;width:44px;height:36px;padding:0;border:0;border-radius:999px;background:transparent;color:#0B0B0C;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.car__chip:hover{background:rgba(11,11,12,.08)}
.car__chip[aria-current="true"]{background:#0B0B0C;color:#fff;box-shadow:inset 0 0 0 2px #FF5A1F}
.car__chip .fx-obj{position:absolute;left:50%;top:50%;margin:-36px 0 0 -48px;transform:scale(.34);transform-origin:50% 50%;pointer-events:none}
.car__chip>span{font:700 14px/1 Sans,sans-serif}
.car__chips[data-chips="initial"] .car__chip{width:36px}
@media (max-width:420px){.car__ctl{gap:8px}.car__ctl .car__arrow{width:36px;height:36px}}
@media (prefers-reduced-motion:reduce){.car__chip{transition:none}.car__chips{scroll-behavior:auto}}
/* v3.4 (QA P3): on wide screens the closing Get a quote button sat against the foot of the R; drop it into the floor space below */
@media (min-aspect-ratio:4/3) and (min-height:600px){.fx-close__btn{bottom:5%}}
/* v3.5: chip glyphs are inline SVG (no cloned card icons); rows padded so the lit ring / focus ring is never clipped; rows only with JS */
html:not(.js) .car__ctl{display:none}
.car__chips{padding:8px;scroll-padding-inline:8px}
.car__chip svg{width:22px;height:22px;display:block;overflow:visible}
.car__chip[aria-current="true"] svg [fill="#FF5A1F"]{filter:drop-shadow(0 0 3px rgba(255,90,31,.55))}
/* v3.6: shared footer link set on home (same groups as every subpage footer), 'See all services' link, Our Work = arrows only */
.foot__cols{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px;margin-top:30px}
@media (min-width:720px){.foot__cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1080px){.foot__cols{grid-template-columns:repeat(5,minmax(0,1fr))}}
.foot__cols h2{color:var(--mute);margin:0 0 10px;font-weight:400}
.foot__cols ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.foot__cols a{color:var(--bone);font-size:14px;text-decoration:none;display:inline-block;min-height:24px;min-width:24px}
.foot__cols a:hover{color:var(--ember-text,#B33E14);text-decoration:underline;text-underline-offset:3px}
.foot__legal{margin-top:26px}
.offers__all{margin:10px 0 0}
.offers__all .car__more{margin-top:0}
.work31 .car__ctl{gap:14px}
/* ---------- v3.6.2 shared sticky header (same block in v31.css and chrome.css, from tools/chrome36.py) ---------- */
html{scroll-padding-top:80px}
.nav{transform:none!important;visibility:visible!important;transition:background-color .3s,border-color .3s,box-shadow .3s}
.nav.scrolled{background:#0B0B0C!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom-color:rgba(250,248,244,.12)!important;box-shadow:0 6px 20px rgba(11,11,12,.18);color:#FAF8F4}
.nav.scrolled .nav__logo,.nav.scrolled nav a,.nav.scrolled .nav__menu,.nav.scrolled .snd{color:#FAF8F4!important}
.nav.scrolled .nav__cta,.nav.scrolled .nav__menu,.nav.scrolled .snd{border-color:rgba(250,248,244,.7)!important;background:transparent}
.nav.scrolled .nav__cta:hover,.nav.scrolled .nav__menu:hover{background:#FAF8F4!important;color:#0B0B0C!important}
.nav.scrolled nav a:not(.nav__cta):hover,.nav.scrolled nav a[aria-current="page"]:not(.nav__cta){border-bottom-color:#FF5A1F}
.nav.scrolled :focus-visible{outline:2px solid #FF5A1F;outline-offset:3px;box-shadow:none}
/* v3.6.3 (RUN-QA D1) + v3.6.4: with JS off (.scrolled is never set) the pinned header is always solid Ink; scoped to scripting:none so
   there is no Ink flash over the hero while JS is still loading */
@media (scripting:none){html:not(.js) .nav{background:#0B0B0C!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom-color:rgba(250,248,244,.12)!important;box-shadow:0 6px 20px rgba(11,11,12,.18);color:#FAF8F4}html:not(.js) .nav .nav__logo,html:not(.js) .nav nav a,html:not(.js) .nav .nav__menu,html:not(.js) .nav .snd{color:#FAF8F4!important}html:not(.js) .nav .nav__cta,html:not(.js) .nav .nav__menu,html:not(.js) .nav .snd{border-color:rgba(250,248,244,.7)!important;background:transparent}html:not(.js) .nav .nav__cta:hover,html:not(.js) .nav .nav__menu:hover{background:#FAF8F4!important;color:#0B0B0C!important}html:not(.js) .nav nav a:not(.nav__cta):hover,html:not(.js) .nav nav a[aria-current="page"]:not(.nav__cta){border-bottom-color:#FF5A1F}html:not(.js) .nav :focus-visible{outline:2px solid #FF5A1F;outline-offset:3px;box-shadow:none}}
@media (prefers-reduced-motion:reduce){.nav{transition:none!important}}

/* v4.0 hero critters: canvas layer above the hero frames and veil, below the copy, top bar and RUNVERRA mark; never takes input */
.rvk{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* 2026-10 revenue pass: second hero call to action (Book a 15-minute call), next to Get a quote */
.hero__ctas{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.hero__ctas .btn--call{background:transparent;color:#141414;border:1px solid rgba(20,20,20,.45)}
.hero__ctas .btn--call:hover{background:#141414;color:#FAF8F4;border-color:#141414}

/* 2026-10 clarity pass: plain hero (headline, subline with prices, two buttons, small links), and the "Built by Matt" band */
.hero__copy .hero__line{font-size:clamp(30px,3.6vw,52px);line-height:1.05;margin-bottom:14px}
.hero__sub{font-size:clamp(16px,1.25vw,19px);line-height:1.45;margin:0 0 20px;max-width:46ch}
.hero__more{display:flex;flex-wrap:wrap;gap:6px 20px;margin:14px 0 0;font-size:15px}
.hero__more a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.founder{padding:clamp(80px,10vw,140px) var(--pad);border-top:1px solid var(--line)}
.founder h2{max-width:18ch}
.founder p{max-width:60ch;font-size:clamp(17px,1.4vw,21px);line-height:1.5;margin:18px 0 0}
.founder__links{display:flex;flex-wrap:wrap;gap:8px 28px}
.founder__quote{margin:22px 0 0;padding-left:18px;border-left:3px solid var(--ember,#FF5A1F);max-width:60ch}
.founder__quote p{margin:0;font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:clamp(22px,2.2vw,30px);line-height:1.25}
.founder__quote footer{margin-top:14px;font-size:14px;display:flex;align-items:center;gap:12px;color:rgba(11,11,12,.75)}
.founder__face{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 6px 18px rgba(11,11,12,.18)}
.offers__else{margin:22px 0 0;font-size:15px;opacity:.85}
.offers__else a{font-weight:600;white-space:nowrap}
@media (orientation:landscape) and (max-height:500px){.hero__copy .eyebrow,.hero__more{display:none}.hero__sub{margin-bottom:12px}}
/* 2026-10 polish: chapter scenes built from real work (CSS 3D, driven by the chapter's --t; --t is 1 for reduced motion) */
.ch__job{margin:12px 0 0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ember,#FF5A1F)}
.stage--scene{background:radial-gradient(circle at 50% 40%,#fff 0%,#f6f1ea 70%);overflow:hidden}
.sc{position:absolute;inset:0;perspective:1100px;--u:calc(1 - var(--t,0))}
.sc img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
/* websites: laptop turns to face you, phone slides in */
.sc-laptop{position:absolute;left:8%;top:20%;width:74%;transform-style:preserve-3d;transform:rotateY(calc(var(--u) * -34deg)) rotateX(calc(var(--u) * 16deg)) translateZ(calc(var(--u) * -120px));transition:transform .08s linear}
.sc-lid{aspect-ratio:16/10;border:7px solid #141416;border-radius:12px 12px 4px 4px;overflow:hidden;background:#fff;box-shadow:0 30px 60px rgba(11,11,12,.22)}
.sc-deck{display:block;height:10px;margin:0 -7%;border-radius:0 0 12px 12px;background:linear-gradient(#d9d6d2,#b9b5b0)}
.sc-phone{position:absolute;right:7%;bottom:12%;width:24%;aspect-ratio:500/1080;border:5px solid #141416;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 24px 50px rgba(11,11,12,.28);
  opacity:clamp(0,calc(var(--t,0) * 2.2 - .3),1);transform:translateX(calc(var(--u) * 70%)) translateY(calc(var(--u) * 20%)) rotateY(calc(var(--u) * -28deg))}
/* care plans: the site settles flat, checks tick in one by one */
.sc-browser{position:absolute;left:7%;top:13%;width:70%;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 26px 60px rgba(11,11,12,.2);
  transform:rotateX(calc(var(--u) * 24deg)) rotateZ(calc(var(--u) * -6deg)) scale(calc(1 - var(--u) * .08))}
.sc-browser img{aspect-ratio:16/10;height:auto}
.sc-bar{display:flex;gap:5px;padding:7px 9px;background:#ece8e3}.sc-bar b{width:7px;height:7px;border-radius:50%;background:#c9c4be}
.sc-checks{position:absolute;right:6%;bottom:10%;margin:0;padding:0;list-style:none;display:grid;gap:8px;width:52%}
.sc-checks li{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;background:#fff;box-shadow:0 10px 26px rgba(11,11,12,.14);font:600 clamp(10px,1.05vw,13px)/1.2 var(--sans,sans-serif);color:#0B0B0C;text-transform:none;letter-spacing:0;
  opacity:clamp(0,calc((var(--t,0) - var(--k) * .2) * 6),1);transform:translateX(calc((1 - clamp(0,calc((var(--t,0) - var(--k) * .2) * 6),1)) * 40px))}
.sc-checks li::before{content:"✓";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#1F9D55;color:#fff;font-size:11px;flex:none}
/* automations: the four real steps fly into a stack */
.sc--auto{display:grid;align-content:center;gap:clamp(8px,1.4vw,14px);padding:0 11%}
.sc-line{position:absolute;left:calc(11% + 22px);top:18%;bottom:18%;width:2px;background:linear-gradient(var(--ember,#FF5A1F),#FFB38A);transform-origin:top;transform:scaleY(var(--t,0))}
.sc-card{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:12px 16px;border-radius:14px;background:#fff;box-shadow:0 14px 34px rgba(11,11,12,.14);text-transform:none;letter-spacing:0;
  --v:clamp(0,calc((var(--t,0) - var(--k) * .2) * 5),1);opacity:var(--v);transform:translateZ(calc((1 - var(--v)) * -260px)) rotateX(calc((1 - var(--v)) * 50deg)) translateY(calc((1 - var(--v)) * 30px))}
.sc-card span{grid-row:span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#0B0B0C;color:#fff;font:600 11px/1 var(--mono,monospace)}
.sc-card b{font:700 clamp(12px,1.3vw,16px)/1.2 var(--sans,sans-serif);color:#0B0B0C}
.sc-card em{font:400 clamp(10px,1vw,13px)/1.3 var(--sans,sans-serif);font-style:normal;color:#6b6762}
.sc-card--win{background:#0B0B0C}.sc-card--win b{color:#fff}.sc-card--win em{color:#FFB38A}.sc-card--win span{background:var(--ember,#FF5A1F)}
@media (max-width:860px){.sc-checks{width:60%}.sc-card{padding:9px 12px}.sc--auto{padding:0 7%}.sc-line{left:calc(7% + 18px)}}
/* 2026-10 polish: the three service cards sit in a fixed grid (no carousel) and their 3D icons play on a loop */
@property --loop{syntax:'<number>';inherits:true;initial-value:1}
.car--grid{margin:0}
.car--grid .car__track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;overflow:visible;padding:4px 0 8px;scroll-snap-type:none}
.car--grid .car__item{flex:none}
.car--grid .fx-obj{--t:var(--loop);animation:fx-loop 5.2s cubic-bezier(.6,0,.3,1) infinite,fx-float 6s ease-in-out infinite}
.car--grid .car__item:nth-child(2) .fx-obj{animation-delay:-1.7s,-2s}
.car--grid .car__item:nth-child(3) .fx-obj{animation-delay:-3.4s,-4s}
.car--grid .fx-gear{animation:fx-spin 6s linear infinite}
.car--grid .fx-gear1{animation-direction:reverse}
@keyframes fx-loop{0%,8%{--loop:0}40%,82%{--loop:1}100%{--loop:0}}
@keyframes fx-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes fx-spin{to{rotate:360deg}}
@media (max-width:860px){.car--grid .car__track{grid-template-columns:1fr;gap:28px}}
@media (prefers-reduced-motion:reduce){.car--grid .fx-obj,.car--grid .fx-gear{animation:none;--loop:1}}
/* websites scene: today's site wipes into the 3D redesign as you scroll (--w runs 0 to 1 over the middle of the chapter) */
.sc--web{--w:clamp(0,calc((var(--t,0) - .3) * 1.8),1)}
.sc-lid{position:relative}
.sc-lid img,.sc-phone img{position:absolute;inset:0}
.sc-new{clip-path:inset(0 calc((1 - var(--w)) * 100%) 0 0)}
.sc-wipe{position:absolute;top:0;bottom:0;left:calc(var(--w) * 100%);width:3px;margin-left:-1px;background:#fff;box-shadow:0 0 18px 4px rgba(255,90,31,.85);opacity:calc(min(var(--w), 1 - var(--w)) * 8)}
.sc-tags{position:absolute;left:8%;top:9%;margin:0;display:flex;gap:6px;font:600 11px/1 var(--sans,sans-serif);letter-spacing:.04em;text-transform:uppercase}
.sc-tag{padding:6px 10px;border-radius:999px;background:#fff;color:#0B0B0C;box-shadow:0 6px 16px rgba(11,11,12,.12);transition:background .3s,color .3s}
.sc-tag--old{opacity:calc(1 - var(--w) * .6)}
.sc-tag--new{opacity:calc(.4 + var(--w) * .6);background:color-mix(in srgb,#0B0B0C calc(var(--w) * 100%),#fff);color:color-mix(in srgb,#fff calc(var(--w) * 100%),#0B0B0C)}
/* 2026-10 round 3: the service cards show the real-work scenes, playing on a loop (no scroll chapters on the home page) */
@property --lt{syntax:'<number>';inherits:true;initial-value:1}
.car__media--scene{background:none;border:0;padding:0;aspect-ratio:4/3.3}
.car__media--scene .stage--scene{position:absolute;inset:0;border-radius:inherit}
.sc-loop{--t:var(--lt);animation:sc-loop 7s cubic-bezier(.55,0,.35,1) infinite}
.car__item:nth-child(2) .sc-loop{animation-delay:-2.3s}
.car__item:nth-child(3) .sc-loop{animation-delay:-4.6s}
@keyframes sc-loop{0%,6%{--lt:0}55%,90%{--lt:1}100%{--lt:0}}
.car__media--scene .sc-tags{top:7%;left:6%}
.car__media--scene .sc-checks li{padding:7px 10px;font-size:12px}
.car__media--scene .sc-card{padding:8px 12px}.car__media--scene .sc-card b{font-size:14px}.car__media--scene .sc-card em{font-size:12px}
@media (prefers-reduced-motion:reduce){.sc-loop{animation:none;--lt:1}}