/* AUTAPLATE — shared stylesheet
   Structure pass: tokens, type scale, layout, motion, placeholders.
   ------------------------------------------------------------------ */

:root {
  /* Colour — exactly five values */
  --bg:     #080808;
  --ink:    #F6F6F6;
  --muted:  #9C9C9C;  /* 7.3:1 on --bg — passes. Fails on --paper (≈2.4:1): paper sections use --bg for text. */
  --paper:  #F5F3EF;
  --accent: #FF0000;  /* 5.0:1 on --bg. ≈3.6:1 on --paper: rules and large numbers only there. */

  /* Type */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-h1: clamp(2.6rem, 1.6rem + 4.2vw, 5.2rem);
  --fs-h2: clamp(2rem, 1.3rem + 2.8vw, 3.4rem);
  --fs-h3: clamp(1.25rem, 1.05rem + .9vw, 1.7rem);
  --fs-lede: clamp(1.05rem, .98rem + .4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-eyebrow: 11px;
  --fs-btn: 12px;

  /* Spacing — 8px base, these values only */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-6: 48px; --s-8: 64px; --s-12: 96px; --s-16: 128px;

  --section-y: clamp(64px, 9vw, 128px);
  --gutter: clamp(20px, 5vw, 48px);
  --max: 1280px;
  --header-h: 88px;
  --header-h-condensed: 64px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-reveal: 700ms;

  /* Hairlines — derived from the five colours, not new colours */
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --line-paper: color-mix(in srgb, var(--bg) 18%, transparent);

  /* Set by main.js for the logo page transition */
  --vt-dx: 0px; --vt-dy: 0px; --vt-s: 2.4;

  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h-condensed); }
/* overflow-x: clip, never hidden — hidden on an ancestor silently breaks position: sticky (case study). */
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--fs-body)/1.75 var(--f-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
p, ul, ol, dl, figure, h1, h2, h3 { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
p { max-width: 68ch; }
main:focus { outline: none; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.paper :focus-visible { outline-color: var(--bg); }

.skip {
  position: absolute; left: var(--s-2); top: -100px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: var(--s-1) var(--s-2);
  font: 500 var(--fs-btn)/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase;
}
.skip:focus { top: var(--s-2); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ type */
.h1, .h2 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; max-width: 18ch; text-wrap: balance; }
/* Manual breaks are set for desktop measure; on phones let balance do it */
@media (max-width: 699px) { .h1 br, .h2 br { display: none; } }
.h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.03em; }
.h2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.02em; }
.h3 { font: 700 var(--fs-h3)/1.15 var(--f-display); letter-spacing: -.01em; display: block; }
.lede { font-size: var(--fs-lede); line-height: 1.6; max-width: 52ch; color: var(--muted); }
.small { font-size: var(--fs-small); line-height: 1.6; }
.muted { color: var(--muted); }
.eyebrow, .mono-index {
  font: 500 var(--fs-eyebrow)/1.4 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.eyebrow { margin-bottom: var(--s-2); }

/* H2 hairline draw — the only draw-in on the site, H2 only */
.h2::after {
  content: ""; display: block; width: 96px; height: 1px; margin-top: var(--s-3);
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 500ms var(--ease) 150ms;
}
.h2.is-in::after, html:not(.js) .h2::after, .case .h2::after { transform: scaleX(1); }
.h2.no-rule::after { display: none; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  min-height: 48px; padding: 0 var(--s-3); border: 1px solid currentColor; border-radius: 0;
  font: 500 var(--fs-btn)/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; background: transparent; cursor: pointer;
  transition: background-color 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease);
}
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn-accent:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-line:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.paper .btn-line:hover { background: var(--bg); color: var(--paper); border-color: var(--bg); }
.link-arrow {
  display: inline-flex; gap: var(--s-1); margin-top: var(--s-2);
  font: 500 var(--fs-btn)/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
}
.link-arrow span { transition: transform 300ms var(--ease); }
a:hover > .link-arrow span, .link-arrow:hover span { transform: translateX(4px); }

/* ------------------------------------------------------------------ layout */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section-tight { padding-block: calc(var(--section-y) * .5); }
.section-head { margin-bottom: var(--s-8); }
.section-head.split, .split-1585 { display: grid; gap: var(--s-6); }
.stack-24 > * + * { margin-top: var(--s-3); }
.mt-48 { margin-top: var(--s-6); }
@media (min-width: 900px) {
  .section-head.split, .split-1585 { grid-template-columns: 1.15fr .85fr; gap: var(--s-8); align-items: end; }
  .split-1585 { align-items: start; }
}

/* Inverted sections — max two per page */
.paper { background: var(--paper); color: var(--bg); }
.paper .lede, .paper .muted, .paper .eyebrow, .paper .mono-index { color: var(--bg); }
.paper .eyebrow, .paper .mono-index { opacity: .72; }

/* ------------------------------------------------------------------ placeholders (structure pass) */
.ph {
  position: relative; aspect-ratio: var(--ar, 16/9); width: 100%;
  border: 1px solid color-mix(in srgb, var(--paper) 42%, transparent);
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), var(--line) 50%, transparent calc(50% + .5px)),
    linear-gradient(to top left, transparent calc(50% - .5px), var(--line) 50%, transparent calc(50% + .5px));
  display: flex; align-items: flex-end; padding: var(--s-2);
  color: var(--paper);
}
.ph span {
  background: var(--bg); padding: 4px var(--s-1);
  font: 500 var(--fs-eyebrow)/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
}
.paper .ph { border-color: var(--bg); color: var(--bg); background:
  linear-gradient(to top right, transparent calc(50% - .5px), var(--line-paper) 50%, transparent calc(50% + .5px)),
  linear-gradient(to top left, transparent calc(50% - .5px), var(--line-paper) 50%, transparent calc(50% + .5px)); }
.paper .ph span { background: var(--paper); }
.ph-copy {
  margin-block: var(--s-2); padding: var(--s-2); border: 1px dashed var(--line);
  font: 400 12px/1.6 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.paper .ph-copy { border-color: var(--line-paper); color: var(--bg); }

/* Real images: one look across mixed sources */
.card img, .gallery img, .hero-media img, .svc-hero-media img, .case-media img, .ba img {
  width: 100%; height: 100%; object-fit: cover; filter: saturate(.95) contrast(1.05);
}

/* Card push-in: image scales, card stays still */
.card { overflow: hidden; }
.card-media { display: block; overflow: hidden; }
.card-media > *, .card > .ph, .card > img { transition: transform 700ms var(--ease); }
@media (hover: hover) {
  .card:hover .card-media > *, .card:hover > .ph, .card:hover > img { transform: scale(1.04); }
}

/* ------------------------------------------------------------------ header */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: height 300ms var(--ease), background-color 300ms var(--ease), border-color 300ms var(--ease), backdrop-filter 300ms var(--ease);
}
.site-header.is-condensed {
  height: var(--header-h-condensed);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.brand { text-decoration: none; }
.wordmark { font: 800 20px/1 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: var(--s-4); }
.nav-list { display: flex; gap: var(--s-3); }
.nav-list a, .tel, .lang {
  font: 500 var(--fs-btn)/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--muted);
}
.nav-list a:hover, .nav-list a[aria-current="page"], .tel:hover { color: var(--ink); }
.nav-list a[aria-current="page"] { text-decoration: underline; }
.nav-tools { display: flex; align-items: center; gap: var(--s-3); }
.lang { display: flex; gap: 4px; }
.lang a { text-decoration: none; }
.lang a[aria-current="true"] { color: var(--ink); }
.menu-toggle { display: none; }

@media (max-width: 1080px) {
  .menu-toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-2); background: none; border: 1px solid var(--line);
    font: 500 var(--fs-btn)/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
  }
  .site-nav {
    position: fixed; inset: var(--header-h-condensed) 0 0; z-index: -1; flex-direction: column; align-items: flex-start;
    gap: var(--s-6); padding: var(--s-6) var(--gutter); background: var(--bg);
    visibility: hidden; opacity: 0; transition: opacity 300ms var(--ease), visibility 0s 300ms;
  }
  .nav-open .site-nav { visibility: visible; opacity: 1; transition: opacity 300ms var(--ease); }
  .nav-open { overflow: hidden; }
  .nav-list { flex-direction: column; gap: var(--s-3); }
  .nav-list a { font: 800 var(--fs-h2)/1.06 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
  .nav-tools { flex-wrap: wrap; }
}

/* ------------------------------------------------------------------ home: hero */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; }
.hero-media { position: absolute; inset: 0; }
.hero-media .ph-hero { aspect-ratio: auto; height: 100%; border: 0; border-bottom: 1px solid var(--line); }
.hero-media::after { /* scrim so the headline reads over any photo — no text-shadow */
  content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, var(--bg), transparent);
  pointer-events: none;
}
.hero-copy { position: relative; z-index: 1; padding-block: calc(var(--header-h) + var(--s-8)) var(--s-12); }
.hero-copy .lede { margin-block: var(--s-3) var(--s-4); color: var(--ink); }
.hero .ph-hero span { position: absolute; top: calc(var(--header-h) + var(--s-2)); right: var(--gutter); }

/* proof strip */
.proof { border-bottom: 1px solid var(--line); }
.proof-list { display: grid; }
.proof-list li { padding-block: var(--s-4); border-top: 1px solid var(--line); }
.proof-list li:first-child { border-top: 0; }
.proof-stmt { font: 700 var(--fs-h3)/1.15 var(--f-display); letter-spacing: -.01em; }
@media (min-width: 900px) {
  .proof-list { grid-template-columns: repeat(3, 1fr); }
  .proof-list li { border-top: 0; padding: var(--s-6) var(--s-4) var(--s-6) 0; }
  .proof-list li + li { border-left: 1px solid var(--line); padding-left: var(--s-4); }
}

/* services grid — asymmetric 7/5, 5/7, 7/5 */
.svc-grid { display: grid; gap: var(--s-6) var(--s-4); }
.svc-card a { display: block; text-decoration: none; }
.svc-card .mono-index { margin-top: var(--s-3); }
.svc-card .h3 { margin-block: var(--s-1); }
@media (min-width: 700px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .svc-grid { grid-template-columns: repeat(12, 1fr); }
  .svc-1, .svc-4, .svc-5 { grid-column: span 7; }
  .svc-2, .svc-3, .svc-6 { grid-column: span 5; }
  .svc-2, .svc-6 { margin-top: var(--s-12); }
}

/* case study — scroll-pinned, the only pin on the site */
.case { border-block: 1px solid var(--line); }
.case-track { position: relative; height: 300vh; }
.case-sticky { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; padding-top: var(--header-h-condensed); }
.case-grid { display: grid; gap: var(--s-4); align-items: center; }
.case-media { position: relative; }
.cs-frame { transition: opacity 600ms var(--ease); }
.cs-frame + .cs-frame { position: absolute; inset: 0; }
.js .cs-frame { opacity: 0; }
.js .cs-frame.is-active { opacity: 1; }
.cs-states { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.cs-state { padding-left: var(--s-2); border-left: 1px solid var(--line); transition: opacity 600ms var(--ease), border-color 600ms var(--ease); }
.js .cs-state { opacity: .28; }
.js .cs-state.is-active { opacity: 1; border-left-color: var(--ink); }
@media (max-width: 899px) {
  .case-media .ph { aspect-ratio: 4/3; }
  .case-grid { gap: var(--s-2); }
  .case .h2 { font-size: 1.75rem; }
  .js .cs-state:not(.is-active) .cs-copy { display: none; }
}
@media (min-width: 900px) { .case-grid { grid-template-columns: .85fr 1.15fr; gap: var(--s-8); } }

/* before / after */
.ba { position: relative; overflow: hidden; user-select: none; touch-action: pan-y; }
.ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.ba-after .ph { background-color: var(--bg); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1px; background: var(--ink); pointer-events: none; }
.ba-handle::after {
  content: "↔"; position: absolute; top: 50%; left: 0; translate: -50% -50%;
  width: 48px; height: 48px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--ink);
  font: 500 14px/1 var(--f-mono);
}
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba-range:focus-visible ~ .ba-handle::after, .ba:has(.ba-range:focus-visible) .ba-handle::after { outline: 2px solid var(--ink); outline-offset: 3px; }
.ba-tag { position: absolute; top: var(--s-2); font: 500 var(--fs-eyebrow)/1.4 var(--f-mono); letter-spacing: .22em; background: var(--bg); padding: 4px var(--s-1); pointer-events: none; }
.ba-tag-l { left: var(--s-2); } .ba-tag-r { right: var(--s-2); }

/* steps (process, pricing logic) */
.steps { display: grid; }
.step { display: grid; gap: var(--s-2); padding-block: var(--s-4); border-top: 1px solid var(--line-paper); }
.step:last-child { border-bottom: 1px solid var(--line-paper); }
.step-num { font: 800 var(--fs-h2)/1 var(--f-display); letter-spacing: -.02em; }
.step-dur { margin: 0; }
@media (min-width: 900px) {
  .step { grid-template-columns: 1fr 5fr 2fr; gap: var(--s-4); align-items: start; }
  .steps-3 .step { grid-template-columns: 1fr 7fr; }
  .step-dur { text-align: right; }
}

/* materials */
.mat-grid { display: grid; gap: var(--s-4); }
.mat { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.mat .h3 { margin-top: var(--s-1); }
@media (min-width: 900px) { .mat-grid { grid-template-columns: repeat(3, 1fr); } }

/* material passport */
.passport { border: 1px solid var(--bg); padding: var(--s-4); }
.passport-fields { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line-paper); }
.passport-fields div { padding: var(--s-2) 0; border-bottom: 1px solid var(--line-paper); }
.passport-fields div:nth-child(odd) { padding-right: var(--s-2); }
.passport-fields dt, .record dt { font: 500 var(--fs-eyebrow)/1.4 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; opacity: .72; }
.passport-fields dd { margin: var(--s-1) 0 0; font: 500 var(--fs-h3)/1.15 var(--f-mono); }

/* reviews */
.review-list { display: grid; gap: var(--s-4); }
.review { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.review blockquote { margin: var(--s-2) 0; }
.review-source { margin-top: var(--s-4); }
@media (min-width: 900px) { .review-list { grid-template-columns: 1.15fr .85fr; } }

/* CTA band */
.cta-band { border-top: 1px solid var(--line); }
.cta-grid { display: grid; gap: var(--s-4); align-items: end; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
@media (min-width: 900px) { .cta-grid { grid-template-columns: 1.15fr .85fr; gap: var(--s-8); } }

/* ------------------------------------------------------------------ inner pages */
.page-hero { padding-block: calc(var(--header-h) + var(--s-12)) var(--s-8); border-bottom: 1px solid var(--line); }
.page-hero .lede { margin-top: var(--s-3); }

.svc-rows { display: grid; gap: var(--s-16); }
.svc-row { display: grid; gap: var(--s-4); scroll-margin-top: var(--s-12); }
.svc-row .h2 { margin-block: var(--s-1) var(--s-3); }
.svc-row-cols { display: grid; gap: var(--s-4); margin-block: var(--s-4); }
@media (min-width: 900px) {
  .svc-row { grid-template-columns: .85fr 1.15fr; gap: var(--s-8); align-items: start; }
  .svc-row:nth-child(even) .svc-row-media { order: 2; }
  .svc-row-media { position: sticky; top: calc(var(--header-h-condensed) + var(--s-4)); }
  .svc-row-cols { grid-template-columns: 1fr 1fr; }
}
.ticks li { position: relative; padding: var(--s-1) 0 var(--s-1) var(--s-4); border-top: 1px solid var(--line); }
.ticks li::before { content: "—"; position: absolute; left: 0; color: var(--muted); font-family: var(--f-mono); }
.ticks-lg li { font-size: var(--fs-lede); padding-block: var(--s-2); }

.svc-hero { padding-top: calc(var(--header-h) + var(--s-6)); padding-bottom: var(--s-8); }
.svc-hero-grid { display: grid; gap: var(--s-6); }
.svc-hero-text .lede { margin-block: var(--s-3) var(--s-4); }
@media (min-width: 900px) {
  .svc-hero { min-height: 100svh; display: grid; align-items: center; }
  .svc-hero-grid { grid-template-columns: 1.15fr .85fr; gap: var(--s-8); align-items: end; }
}
.from-price { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.from-price-val { font: 800 var(--fs-h2)/1 var(--f-display); letter-spacing: -.02em; }

.versus { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.versus > div { padding-top: var(--s-3); border-top: 1px solid var(--bg); }
@media (min-width: 900px) { .versus { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }

.gallery { display: grid; gap: var(--s-2); margin-top: var(--s-6); }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .gallery-3 { grid-template-columns: repeat(3, 1fr); }
  .gallery-4 { grid-template-columns: repeat(4, 1fr); }
  .gallery-5 { grid-template-columns: repeat(6, 1fr); }
  .gallery-5 > :nth-child(-n+2) { grid-column: span 3; }
  .gallery-5 > :nth-child(n+3) { grid-column: span 2; }
}

.faqs { border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-3); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq-mark { position: relative; flex: 0 0 16px; height: 16px; margin-top: 6px; }
.faq-mark::before, .faq-mark::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform 300ms var(--ease); }
.faq-mark::after { transform: rotate(90deg); }
.faq[open] .faq-mark::after { transform: rotate(0); }
.faq-a { padding-bottom: var(--s-3); }

.other-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.other-list a { display: flex; gap: var(--s-2); align-items: baseline; padding-block: var(--s-2); border-bottom: 1px solid var(--line); text-decoration: none; font: 700 var(--fs-h3)/1.15 var(--f-display); }
.other-list a:hover { color: var(--muted); }
@media (min-width: 900px) { .other-list { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); } }

/* work */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-6); }
.chip {
  min-height: 40px; padding: 0 var(--s-2); background: none; border: 1px solid var(--line); cursor: pointer;
  font: 500 var(--fs-eyebrow)/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  transition: color 300ms var(--ease), border-color 300ms var(--ease);
}
.chip:hover { color: var(--ink); }
.chip[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.job-grid { display: grid; gap: var(--s-6) var(--s-4); }
.job[hidden] { display: none; }
.job-open { display: block; width: 100%; padding: 0; background: none; border: 0; text-align: left; cursor: pointer; }
.job-meta { display: block; margin-top: var(--s-2); }
.job-meta .h3 { margin-top: 4px; }
.record { margin-top: var(--s-2); }
.record div { display: grid; grid-template-columns: 12ch 1fr; gap: var(--s-2); padding-block: var(--s-1); border-top: 1px solid var(--line); }
.record dd { margin: 0; font-size: var(--fs-small); }
.js .job > .record { display: none; }
@media (min-width: 700px) { .job-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .job-grid { grid-template-columns: repeat(3, 1fr); } }

.job-dialog { width: min(100% - 2 * var(--gutter), 960px); max-height: 90svh; padding: 0; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.job-dialog::backdrop { background: color-mix(in srgb, var(--bg) 88%, transparent); }
.job-dialog-inner { padding: var(--s-4); display: grid; gap: var(--s-3); }
.job-close { justify-self: end; }
.job-dialog-media { display: grid; gap: var(--s-2); }
@media (min-width: 700px) { .job-dialog-media { grid-template-columns: 1fr 1fr; } }

/* about */
.rules { display: grid; gap: var(--s-6); }
.rule { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.rule-num { font: 800 var(--fs-h2)/1 var(--f-display); letter-spacing: -.02em; color: var(--muted); margin-bottom: var(--s-2); }
@media (min-width: 900px) { .rules { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
.wont li { border-top: 1px solid var(--line-paper); }

/* contact + quote form */
.contact-grid { display: grid; gap: var(--s-8); }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: 1.15fr .85fr; gap: var(--s-12); align-items: start; } }
.quote-progress { margin-bottom: var(--s-3); }
.q-step { border: 0; margin: 0; padding: 0; }
.q-step + .q-step { margin-top: var(--s-8); }
.js .q-step { display: none; }
.js .q-step.is-active { display: block; }
.js .q-step + .q-step { margin-top: 0; }
.q-step legend { padding: 0; margin-bottom: var(--s-4); }
.field { margin-bottom: var(--s-3); }
.field label { display: block; margin-bottom: var(--s-1); font: 500 var(--fs-eyebrow)/1.4 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.field input:not([type="file"]), .field select, .field textarea {
  width: 100%; min-height: 48px; padding: var(--s-1) 0; background: transparent; border: 0; border-bottom: 1px solid var(--muted); border-radius: 0;
  font-size: var(--fs-lede);
}
.field select { background: var(--bg); }
.field textarea { resize: vertical; line-height: 1.6; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); }
.field input[type="file"] { width: 100%; padding: var(--s-3); border: 1px dashed var(--muted); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-bottom-color: var(--accent); }
.q-nav { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.q-status { margin-top: var(--s-3); min-height: 1.75em; }
.hp { position: absolute; left: -9999px; }
.contact-aside .record div { grid-template-columns: 10ch 1fr; }
.map { position: relative; margin-top: var(--s-4); }
.map iframe { display: block; width: 100%; aspect-ratio: 4/3; border: 0; filter: grayscale(1) invert(.92) contrast(.9); }
.map-btn { position: absolute; left: var(--s-2); top: var(--s-2); background: var(--bg); }

/* ------------------------------------------------------------------ footer */
.site-footer { border-top: 1px solid var(--line); padding-block: var(--s-12) var(--s-4); }
.footer-grid { display: grid; gap: var(--s-6); }
.footer-brand .wordmark { font-size: var(--fs-h2); line-height: 1; margin-bottom: var(--s-2); }
.footer-list li { padding-block: 4px; }
.footer-list a { text-decoration: none; color: var(--muted); }
.footer-list a:hover { color: var(--ink); }
.footer-base { display: flex; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-12); padding-top: var(--s-3); border-top: 1px solid var(--line); color: var(--muted); }
.footer-base a { text-decoration: none; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.15fr .85fr .6fr .85fr; gap: var(--s-4); } }

/* ------------------------------------------------------------------ scroll reveal */
.js [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--t-reveal) var(--ease) var(--d, 0ms), transform var(--t-reveal) var(--ease) var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal].is-now { transition: none; }

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .h2::after { transform: none; }
  .case-track { height: auto; }
  .case-sticky { position: static; height: auto; padding-block: var(--section-y); }
  .js .cs-state { opacity: 1; }
  .js .cs-frame { opacity: 0; } .js .cs-frame:first-child { opacity: 1; }
  .cs-state .cs-copy { display: block !important; }
}

/* ------------------------------------------------------------------ copy pass: text blocks */
.prose p + p { margin-top: var(--s-2); }
.prose { margin-top: var(--s-3); }
.split-1585 > div > .prose:first-child { margin-top: 0; }
.proof-list .small { margin-top: var(--s-1); max-width: 40ch; }
.cs-copy { margin-top: var(--s-1); color: var(--muted); max-width: 52ch; }
/* (mobile only: inactive captions collapse — see case study block) */
.step p:not(.step-num):not(.step-dur) { margin-top: var(--s-1); }
.mat p, .rule p { margin-top: var(--s-2); }
.versus p { max-width: 52ch; }
.svc-row-cols p { color: var(--muted); }
.faq-a p { color: var(--muted); }
.wont li { display: grid; grid-template-columns: 48px 1fr; gap: var(--s-2); padding-block: var(--s-3); font: 700 var(--fs-h3)/1.15 var(--f-display); letter-spacing: -.01em; }
.wont li:last-child { border-bottom: 1px solid var(--line-paper); }
.wont .mono-index { padding-top: 6px; }

/* ------------------------------------------------------------------ image pass */
/* One look across mixed sources: same fit, same filter, ratio set per slot */
.pic {
  display: block; width: 100%; height: auto; aspect-ratio: var(--ar, 4/3);
  object-fit: cover; filter: saturate(.95) contrast(1.05);
  background: color-mix(in srgb, var(--ink) 4%, var(--bg));
}
.card-media > .pic, .card > .pic { transition: transform 700ms var(--ease); }
@media (hover: hover) { .card:hover .card-media > .pic, .card:hover > .pic { transform: scale(1.04); } }

.hero-media .hero-pic { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-position: 50% 60%; }
.hero-media::before { /* keeps the header legible over bright ceilings */
  content: ""; position: absolute; inset: 0 0 auto; height: 200px; z-index: 1;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 80%, transparent), transparent); pointer-events: none;
}
.hero-media::after { inset: 25% 0 0; background: linear-gradient(to top, var(--bg) 8%, color-mix(in srgb, var(--bg) 55%, transparent) 55%, transparent); }


.job-dialog-media .pic { aspect-ratio: 4/3; }
.cs-frame .pic { max-height: 70svh; }
@media (max-width: 899px) { .case-media .pic { aspect-ratio: 4/3; max-height: 40svh; } }
.ph-map span { position: static; }
@media (min-width: 900px) {
  .hero-media::after { inset: 0; background:
    linear-gradient(to right, color-mix(in srgb, var(--bg) 78%, transparent) 0%, color-mix(in srgb, var(--bg) 35%, transparent) 50%, transparent 75%),
    linear-gradient(to top, var(--bg) 4%, transparent 45%); }
}

/* ================================================================== motion & layout upgrade */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }

/* Film grain — tactile, photographic; no new colour (greyscale noise at low opacity) */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* Masked line reveal for H1/H2 (lines built by main.js) */
.js .split[data-reveal] { opacity: 1; transform: none; }
.split .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.js .split .line > span { display: block; transform: translateY(108%); transition: transform 800ms var(--ease-out) calc(var(--d, 0ms) + var(--i, 0) * 90ms); }
.js .split.is-in .line > span { transform: none; }
.js .split.is-now .line > span { transition: none; }

/* Image wipe: container uncovers bottom-up, image settles from 1.12 */
/* clip sits on the image, not the observed frame: a fully clipped target never intersects */
.js .wipe .pic { clip-path: inset(100% 0 0 0); transform: scale(1.12); transition: clip-path 800ms var(--ease-out) var(--d, 0ms), transform 800ms var(--ease-out) var(--d, 0ms); }
.js .wipe.is-in .pic { clip-path: inset(0 0 0 0); transform: none; }
.js .wipe.is-now .pic { transition: none; }
@media (hover: hover) { .card:hover .wipe.is-in .pic { transform: scale(1.04); transition-duration: 700ms; transition-delay: 0ms; } }

/* Hero: settle-in, parallax drift (var set by JS), scroll cue */
.hero { overflow: clip; }
.hero-media { overflow: hidden; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.hero-media .hero-pic { animation: hero-settle 1600ms var(--ease-out) both; }
@keyframes hero-settle { from { transform: scale(1.14); opacity: .2; } to { transform: scale(1.04); opacity: 1; } }
.scroll-cue {
  position: absolute; right: var(--gutter); bottom: var(--s-6); z-index: 2; display: flex; align-items: center; gap: var(--s-2);
  font: 500 var(--fs-eyebrow)/1 var(--f-mono); letter-spacing: .22em; color: var(--ink); text-decoration: none; min-height: 44px;
}
.scroll-cue i { position: relative; display: block; width: 1px; height: 48px; background: var(--line); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateY(-100%); animation: cue 2.4s var(--ease-out) infinite 1.2s; }
@keyframes cue { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } }
@media (max-width: 699px) { .scroll-cue { display: none; } }

/* Header hides on scroll down, returns on scroll up */
.site-header { transition: height 300ms var(--ease), background-color 300ms var(--ease), border-color 300ms var(--ease), transform 400ms var(--ease-out); }
.site-header.is-hidden { transform: translateY(-100%); }
.nav-open .site-header { transform: none; }
.nav-list a { position: relative; text-decoration: none !important; }
.nav-list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 300ms var(--ease-out); }
.nav-list a:hover::after, .nav-list a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 1080px) { .nav-list a::after { display: none; } }

/* Buttons: fill sweeps in from the left (inset shadow, no layout change) */
.btn { transition: box-shadow 450ms var(--ease-out), color 300ms var(--ease), border-color 300ms var(--ease); }
.btn-accent:hover, .btn-line:hover { background: transparent; box-shadow: inset 24em 0 0 0 var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-accent:hover { background: var(--accent); }
.paper .btn-line:hover { background: transparent; box-shadow: inset 24em 0 0 0 var(--bg); color: var(--paper); }
.btn:active { transform: scale(.98); }

/* Outline numerals: process steps and rules */
.step-num, .rule-num { color: transparent; -webkit-text-stroke: 1px var(--muted); font-size: clamp(2.6rem, 1.8rem + 3vw, 4.4rem); line-height: .9; }
.paper .step-num { -webkit-text-stroke-color: var(--bg); }
.step:hover .step-num { color: var(--bg); transition: color 400ms var(--ease); }

/* Services grid: index + arrow motion */
.svc-card .link-arrow { color: var(--muted); transition: color 300ms var(--ease); }
.svc-card a:hover .link-arrow { color: var(--ink); }
.svc-card .h3 { transition: transform 400ms var(--ease-out); }
@media (hover: hover) { .svc-card a:hover .h3 { transform: translateX(8px); } }

/* Recent work rail — contained horizontal scroll, snap, no page overflow */
.rail-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-6); }
.rail-ctrl { display: flex; align-items: center; gap: var(--s-1); }
.rail-ctrl .link-arrow { margin: 0 0 0 var(--s-3); }
.rail-btn { width: 48px; height: 48px; display: grid; place-items: center; background: none; border: 1px solid var(--line); color: var(--ink); font: 500 16px/1 var(--f-mono); cursor: pointer; transition: border-color 300ms var(--ease), background-color 300ms var(--ease); }
.rail-btn:hover { border-color: var(--ink); }
ul.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 360px); gap: var(--s-3);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), (100vw - var(--max)) / 2);
  padding-inline: max(var(--gutter), (100vw - var(--max)) / 2); padding-bottom: var(--s-3);
  scrollbar-width: thin; scrollbar-color: var(--muted) transparent; overscroll-behavior-x: contain;
}
.rail-item { scroll-snap-align: start; }
.rail-item a { display: block; text-decoration: none; }
.rail-cap { display: block; margin-top: var(--s-2); }
.rail-cap .h3 { margin-top: 4px; font-size: 1.25rem; }
@media (max-width: 699px) { .rail-ctrl .rail-btn { display: none; } .rail-ctrl .link-arrow { margin: 0; } }

/* Cursor label (desktop pointers only, built by main.js) */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 95; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: var(--bg); pointer-events: none;
  font: 500 var(--fs-eyebrow)/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase;
  transform: translate3d(var(--cx, -200px), var(--cy, -200px), 0) scale(0); transition: transform 350ms var(--ease-out); will-change: transform;
}
.cursor.is-on { transform: translate3d(var(--cx), var(--cy), 0) scale(1); }

/* Breadcrumb */
.crumbs a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.crumbs a:hover { border-bottom-color: var(--ink); }

/* Work cards: caption lifts on hover */
@media (hover: hover) { .job-open:hover .job-meta .h3 { transform: translateX(8px); } }
.job-meta .h3 { transition: transform 400ms var(--ease-out); }

/* Dialog entry from its trigger area */
.job-dialog[open] { animation: dlg-in 400ms var(--ease-out); }
.job-dialog[open]::backdrop { animation: fade-in 300ms var(--ease); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }

/* Back to top */
.to-top { font: 500 var(--fs-eyebrow)/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.to-top:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .js .split .line > span, .js .wipe .pic { transform: none !important; }
  .js .wipe .pic { clip-path: none !important; }
  .hero-media .hero-pic { animation: none; }
  .hero-media { transform: none; }
  .scroll-cue i::after { animation: none; transform: none; }
  .site-header.is-hidden { transform: none; }
  .cursor { display: none; }
}

/* ================================================================== brand mark */
.mark { display: block; overflow: visible; }
.mark .m-a { fill: var(--ink); }
.mark .m-p { fill: var(--accent); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.brand-mark { height: 30px; width: auto; }
.brand-word { font: 800 17px/1 var(--f-display); letter-spacing: .06em; color: var(--ink); }
@media (hover: hover) {
  .brand .m-p { transition: transform 500ms var(--ease-out); transform-box: fill-box; }
  .brand:hover .m-p { transform: translateX(6%); }
}
@media (max-width: 420px) { .brand-word { display: none; } }
.footer-logo { display: flex; align-items: center; gap: 16px; margin-bottom: var(--s-2); }
.footer-mark { height: 56px; width: auto; }
.footer-logo .brand-word { font-size: 28px; }

/* ================================================================== loader / page transition
   Every page carries the loader. A head script picks the mode before first paint:
   full  = first page of the visit (A draws, P slides in, word rises, panel lifts) ~1.7s
   short = every following page (A and P snap together, panel lifts)              ~0.95s
   none  = reduced motion, or no JS (loader never shown)                                  */
.loader { display: none; }
[data-loader="full"] .loader, [data-loader="short"] .loader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--bg);
  pointer-events: none; animation: loader-out 480ms var(--ease-out) var(--out) both;
}
[data-loader="full"] { --out: 1300ms; }
[data-loader="short"] { --out: 600ms; }
.loader-inner { display: grid; justify-items: center; gap: 28px; animation: loader-inner-out 420ms var(--ease) var(--out) both; }
.loader-mark { width: min(46vw, 260px); height: auto; }
.loader-mark .m-a, .loader-mark .m-p { transform-box: fill-box; }
.loader-word { display: flex; overflow: hidden; font: 800 clamp(14px, 1rem + .4vw, 20px)/1.2 var(--f-display); letter-spacing: .32em; color: var(--ink); margin-right: -.32em; }
.loader-word span { display: block; }
.loader-bar { position: relative; display: block; width: min(46vw, 260px); height: 1px; background: var(--line); overflow: hidden; }
.loader-bar i { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }

/* full: draw the A, fill it, slide the P in, raise the word, fill the bar */
[data-loader="full"] .loader-mark .m-a { fill-opacity: 0; stroke: var(--ink); stroke-width: 7; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: a-draw 700ms var(--ease) 80ms forwards, a-fill 320ms var(--ease) 620ms forwards; }
[data-loader="full"] .loader-mark .m-a2 { animation-delay: 260ms, 720ms; }
[data-loader="full"] .loader-mark .m-p { opacity: 0; animation: p-slide 640ms cubic-bezier(.34, 1.56, .64, 1) 480ms forwards; }
[data-loader="full"] .loader-word span { transform: translateY(110%); animation: word-up 520ms var(--ease-out) calc(820ms + var(--k) * 32ms) forwards; }
[data-loader="full"] .loader-bar i { animation: bar-fill 620ms var(--ease) 640ms forwards; }

/* short: pieces snap together from opposite sides */
[data-loader="short"] .loader-mark .m-a { opacity: 0; animation: a-in 420ms var(--ease-out) 60ms forwards; }
[data-loader="short"] .loader-mark .m-p { opacity: 0; animation: p-in 460ms var(--ease-out) 100ms forwards; }
[data-loader="short"] .loader-word, [data-loader="short"] .loader-bar { display: none; }

@keyframes a-draw { to { stroke-dashoffset: 0; } }
@keyframes a-fill { to { fill-opacity: 1; stroke-width: 0; } }
@keyframes p-slide { from { opacity: 0; transform: translateX(28%); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes a-in { from { opacity: 0; transform: translateX(-22%); } to { opacity: 1; transform: none; } }
@keyframes p-in { from { opacity: 0; transform: translateX(22%); } to { opacity: 1; transform: none; } }
@keyframes word-up { to { transform: none; } }
@keyframes bar-fill { to { transform: scaleX(1); } }
@keyframes loader-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@keyframes loader-inner-out { to { opacity: 0; transform: translateY(-48px) scale(.96); } }

/* hero starts moving as the panel lifts */
[data-loader="full"] .hero-media .hero-pic { animation-delay: 1150ms; }
[data-loader="short"] .hero-media .hero-pic { animation-delay: 450ms; }

/* Cross-document View Transition: old page sinks and dims while the new page
   (its loader panel) sweeps up over it. No click interception, no added latency. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition { background: var(--bg); }
::view-transition-old(root) { animation: vt-sink 520ms var(--ease) both; transform-origin: 50% 30%; }
::view-transition-new(root) { animation: vt-sweep 520ms var(--ease-out) both; }
@keyframes vt-sink { to { transform: scale(.92) translateY(-3%); opacity: .25; filter: brightness(.5); } }
@keyframes vt-sweep { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  .loader { display: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
.footer-base { flex-wrap: wrap; align-items: center; row-gap: var(--s-2); }
.footer-base > * { white-space: nowrap; }
/* mark only — no wordmark text */
.brand-mark { height: 34px; }

/* ================================================================== proof cards (three rules) */
.proof { border-bottom: 0; padding-block: var(--s-4) var(--s-8); }
.proof-list { display: grid; gap: var(--s-2); }
.proof-list .proof-card {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 340px; padding: var(--s-3); border: 1px solid var(--line); border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 4%, var(--bg));
}
.proof-bg { position: absolute; inset: 0; z-index: -1; }
.proof-bg .pic { height: 100%; aspect-ratio: auto; opacity: .34; transform: scale(1.02); transition: opacity 600ms var(--ease), transform 900ms var(--ease-out); }
.proof-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 18%, color-mix(in srgb, var(--bg) 55%, transparent) 60%, color-mix(in srgb, var(--bg) 20%, transparent)); }
.proof-num {
  position: absolute; top: var(--s-2); right: var(--s-3); font: 800 clamp(5rem, 3rem + 8vw, 8.5rem)/.9 var(--f-display); letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--ink) 55%, transparent); transition: color 500ms var(--ease), transform 600ms var(--ease-out);
}
.proof-body { display: grid; gap: var(--s-1); }
.proof-body .eyebrow { margin: 0; color: var(--ink); opacity: .8; }
.proof-stmt { display: block; font: 800 clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem)/1.05 var(--f-display); letter-spacing: -.02em; }
.proof-text { color: var(--muted); max-width: 40ch; }
.proof-list .proof-card { transform: scale(calc(1 - var(--cover, 0) * .06)); filter: brightness(calc(1 - var(--cover, 0) * .55)); transform-origin: 50% 0; }
.js .proof-list .proof-card.is-in { transform: scale(calc(1 - var(--cover, 0) * .06)); }
@media (max-width: 899px) {
  /* stacking cards: each sticks a little lower than the last and the next one slides over it */
  .proof-list .proof-card { position: sticky; top: calc(84px + var(--i) * 14px); min-height: 58svh; }
  .proof-list { gap: var(--s-3); }
}
@media (min-width: 900px) {
  .proof-list { grid-template-columns: repeat(3, 1fr); padding-top: var(--s-4); }
  .proof-list .proof-card { min-height: 440px; padding: var(--s-4); }
  .proof-list .proof-card + .proof-card { padding-left: var(--s-4); border-left: 1px solid var(--line); }
}
@media (hover: hover) {
  .proof-card:hover .proof-bg .pic { opacity: .6; transform: scale(1.07); }
  .proof-card:hover .proof-num { color: color-mix(in srgb, var(--ink) 12%, transparent); transform: translateY(-6px); }
}

/* ================================================================== recent work rail */
.rail-item { transform: scale(var(--rs, 1)); opacity: var(--ro, 1); transition: transform 500ms var(--ease-out), opacity 500ms var(--ease); transform-origin: 50% 60%; }
.rail-item a { position: relative; overflow: hidden; }
.rail-item .pic { aspect-ratio: 4/5; }
.rail-idx { position: absolute; top: var(--s-2); left: var(--s-2); padding: 6px 10px; background: color-mix(in srgb, var(--bg) 70%, transparent); font: 500 var(--fs-eyebrow)/1 var(--f-mono); letter-spacing: .2em; }
.rail-item .rail-cap {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: var(--s-6) var(--s-3) var(--s-3);
  background: linear-gradient(to top, var(--bg) 10%, color-mix(in srgb, var(--bg) 70%, transparent) 55%, transparent);
}
.rail-item .rail-cap .mono-index { color: var(--ink); opacity: .75; }
.rail-item .rail-cap .h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); padding-right: 56px; }
.rail-go {
  position: absolute; right: var(--s-3); bottom: var(--s-3); width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--ink) 50%, transparent); font: 500 16px/1 var(--f-mono); color: var(--ink);
  transition: background-color 300ms var(--ease), color 300ms var(--ease), transform 400ms var(--ease-out);
}
@media (hover: hover) { a:hover .rail-go, .job-open:hover .rail-go { background: var(--ink); color: var(--bg); transform: rotate(-45deg); } }
.job-open .rail-go { transition: background-color 300ms var(--ease), color 300ms var(--ease), transform 400ms var(--ease-out); }
@media (hover: hover) { .job-open:hover .rail-go { transform: rotate(90deg); } }
.rail-progress { height: 1px; margin-top: var(--s-3); background: var(--line); overflow: hidden; }
.rail-progress i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, .12)); transition: transform 200ms linear; }
ul.rail { grid-auto-columns: min(80vw, 380px); padding-bottom: var(--s-1); scrollbar-width: none; }
ul.rail::-webkit-scrollbar { display: none; }

/* ================================================================== work page */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.stat-n { display: block; font: 800 clamp(2.4rem, 1.4rem + 4vw, 4.4rem)/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stats .eyebrow { display: block; margin: var(--s-1) 0 0; }
.page-hero { position: relative; overflow: clip; }

.filter-bar {
  position: sticky; top: var(--header-h-condensed); z-index: 20; margin-bottom: var(--s-4); padding-block: var(--s-1);
  background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); transition: top 400ms var(--ease-out);
}
.site-header.is-hidden ~ main .filter-bar { top: 0; }
.work-list { padding-top: 0; }
ul.filters {
  flex-wrap: nowrap; overflow-x: auto; margin: 0; padding-block: var(--s-1); gap: var(--s-1); scrollbar-width: none; scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent);
}
ul.filters::-webkit-scrollbar { display: none; }
ul.filters li { flex: none; scroll-snap-align: start; }
.chip { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; white-space: nowrap; transition: color 300ms var(--ease), border-color 300ms var(--ease), background-color 300ms var(--ease); }
.chip-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--line); font-size: 10px; letter-spacing: 0; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip[aria-pressed="true"] .chip-n { border-color: color-mix(in srgb, var(--bg) 40%, transparent); }
@media (min-width: 1000px) { ul.filters { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; } }

.job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); grid-auto-flow: dense; }
.job-open { position: relative; overflow: hidden; height: 100%; }
.job-open .card-media { height: 100%; }
.job .pic { aspect-ratio: 4/5; height: 100%; }
.job:nth-child(5n+1) { grid-column: 1 / -1; }
.job:nth-child(5n+1) .pic { aspect-ratio: 4/3; }
.job-tag { position: absolute; top: var(--s-1); left: var(--s-1); padding: 5px 8px; background: color-mix(in srgb, var(--bg) 70%, transparent); font: 500 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }
.job-open .job-meta {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: var(--s-6) var(--s-2) var(--s-2);
  background: linear-gradient(to top, var(--bg) 12%, color-mix(in srgb, var(--bg) 65%, transparent) 60%, transparent);
}
.job-open .job-meta .mono-index { display: block; color: var(--ink); opacity: .7; font-size: 10px; letter-spacing: .14em; }
.job-open .job-meta .h3 { font-size: 1.05rem; margin-top: 4px; padding-right: 40px; }
.job-open .rail-go { right: var(--s-2); bottom: var(--s-2); width: 32px; height: 32px; font-size: 14px; }
.job:nth-child(5n+1) .job-meta .h3 { font-size: 1.5rem; }
@media (min-width: 1000px) {
  .job-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
  .job:nth-child(5n+1) { grid-column: auto; }
  .job:nth-child(5n+1) .pic { aspect-ratio: 4/5; }
  .job:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; }
  .job:nth-child(7n+1) .pic { aspect-ratio: auto; }
  .job:nth-child(7n+1) .job-meta .h3 { font-size: 2rem; }
  .job-open .job-meta { padding: var(--s-8) var(--s-3) var(--s-3); }
  .job-open .job-meta .h3 { font-size: 1.3rem; }
  .job-open .rail-go { right: var(--s-3); bottom: var(--s-3); width: 44px; height: 44px; }
}
/* filter transitions */
.job { transition: opacity 260ms var(--ease), transform 360ms var(--ease-out); }
.job.is-out, .job.is-pre { opacity: 0; transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  .proof-list .proof-card { position: relative; top: auto; transform: none !important; filter: none !important; }
  .rail-item { transform: none !important; opacity: 1 !important; }
}
@media (max-width: 999px) {
  /* small phone cards: car name only, service shows in the feature cards and the detail view */
  .job:not(:nth-child(5n+1)) .job-meta .mono-index { display: none; }
  .job:not(:nth-child(5n+1)) .job-meta { padding-top: var(--s-4); }
}

/* ================================================================== AUTAPLATE showcase (giant word + car) */
.showcase {
  position: relative; overflow: clip; isolation: isolate; padding-block: clamp(64px, 9vw, 128px) var(--s-6);
  background:
    radial-gradient(ellipse 70% 60% at 50% 58%, color-mix(in srgb, var(--accent) 46%, var(--bg)) 0%, color-mix(in srgb, var(--accent) 24%, var(--bg)) 45%, transparent 80%),
    color-mix(in srgb, var(--accent) 10%, var(--bg));
}
.showcase::before, .showcase::after { content: ""; position: absolute; left: 0; right: 0; height: 120px; z-index: -1; pointer-events: none; }
.showcase::before { top: 0; background: linear-gradient(var(--bg), transparent); }
.showcase::after { bottom: 0; background: linear-gradient(transparent, var(--bg)); }
.showcase-stage { position: relative; min-height: calc(var(--wh, 28vw) * 1.38); }
.showcase-word {
  display: flex; justify-content: center; margin: 0; max-width: none; white-space: nowrap; color: var(--ink);
  font-family: var(--f-display); font-weight: 800; font-stretch: 62%; font-variation-settings: "wdth" 62;
  font-size: 26vw; line-height: .78; letter-spacing: -.005em; text-transform: uppercase;
  transform: translate3d(var(--wx, 0%), 0, 0); will-change: transform;
}
.showcase-word span { display: block; }
.js .showcase-word span { opacity: 0; transform: translateY(45%); transition: transform 800ms var(--ease-out) calc(var(--k) * 45ms), opacity 500ms var(--ease) calc(var(--k) * 45ms); }
.js .showcase.is-in .showcase-word span { opacity: 1; transform: none; }
.showcase-car {
  position: absolute; left: 50%; bottom: 0; z-index: 2; width: min(112vw, 1180px);
  transform: translate3d(calc(-50% + var(--cx, 0%)), 0, 0); will-change: transform;
}
@media (min-width: 900px) { .showcase-car { width: min(78vw, 1180px); } }
.showcase-car img { position: relative; z-index: 2; display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 30px color-mix(in srgb, var(--bg) 70%, transparent)); }
.showcase-shadow { position: absolute; left: 6%; right: 4%; bottom: -3%; height: 16%; z-index: 1; background: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 90%, transparent), transparent); }
.showcase-glow { position: absolute; inset: 0 12% 18%; z-index: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, transparent), transparent); filter: blur(40px); opacity: .55; animation: show-glow 7s var(--ease) infinite alternate; }
@keyframes show-glow { to { opacity: .85; transform: scale(1.1); } }
.showcase-cap { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-4); }
.showcase-cap .eyebrow { margin: 0; color: var(--ink); }
.showcase-cap .link-arrow { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .showcase-word { transform: none; }
  .showcase-car { transform: translateX(-50%); }
  .showcase-glow { animation: none; }
}
.showcase-word { width: max-content; margin-inline: auto; justify-content: flex-start; }
/* proportions: tall condensed word at the top, car overlaps its lower half */
.showcase { --sy: 1.9; }
@media (min-width: 900px) { .showcase { --sy: 1.55; } }
.showcase-stage { min-height: var(--sh, 60vw); }
.showcase-word { position: absolute; top: 0; left: 50%; margin: 0; transform-origin: 50% 0; transform: translate3d(calc(-50% + var(--wx, 0%)), 0, 0) scaleY(var(--sy)); }
.showcase-car { width: 100vw; }
@media (min-width: 900px) { .showcase-car { width: min(64vw, 1060px); } }
@media (prefers-reduced-motion: reduce) { .showcase-word { transform: translateX(-50%) scaleY(var(--sy)); } }

/* ================================================================== PREMIUM AUTOMOTIVE LAYER
   Wide Archivo (wdth 125) at light weights for display type, red as the single
   accent, glows and diagonal slashes as the signature. Overrides earlier rules. */
:root {
  --fs-h1: clamp(1.6rem, .55rem + 5.1vw, 5rem);
  --fs-h2: clamp(1.45rem, .6rem + 3.3vw, 3.2rem);
  --surface: color-mix(in srgb, var(--ink) 4%, var(--bg));
  --glow: color-mix(in srgb, var(--accent) 38%, transparent);
}
.h1, .h2 {
  font-family: var(--f-display); font-stretch: 125%; font-variation-settings: "wdth" 125;
  font-weight: 300; letter-spacing: .01em; line-height: 1.06; max-width: none; text-transform: uppercase;
}
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-stretch: 112%; font-variation-settings: "wdth" 112; font-weight: 600; letter-spacing: 0; }
.eyebrow, .mono-index, .chip, .nav-list a, .tel, .lang, .link-arrow, .field label, .record dt, .passport-fields dt, .to-top, .rail-idx, .job-tag {
  font-family: var(--f-display); font-stretch: 125%; font-variation-settings: "wdth" 125; font-weight: 600;
}
.eyebrow { letter-spacing: .3em; }
.eyebrow-accent { color: var(--accent) !important; opacity: 1 !important; }
.h2::after { width: 64px; height: 2px; }

/* buttons: wide caps + arrow */
.btn {
  min-height: 54px; padding: 0 26px; gap: 14px; border-radius: 0;
  font-family: var(--f-display); font-stretch: 115%; font-variation-settings: "wdth" 115; font-weight: 600; font-size: 11px; letter-spacing: .22em;
}
.btn::after { content: "→"; font-family: var(--f-mono); font-size: 14px; letter-spacing: 0; transition: transform 300ms var(--ease-out); }
.btn:hover::after { transform: translateX(4px); }
.btn-line { border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.menu-toggle::after, .job-close::after, .map-btn::after, .rail-btn::after { content: none; }
.q-nav .btn[data-back]::after { content: "←"; order: -1; }

/* ---------- hero */
.hero-x .hero-copy { padding-bottom: clamp(64px, 10vw, 128px); }
.hero-x .h1-x { max-width: 16ch; margin-top: var(--s-2); }
.hero-x .lede { color: color-mix(in srgb, var(--ink) 80%, transparent); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hero-x .hero-media::after {
  inset: 0; background:
    radial-gradient(ellipse 60% 50% at 18% 85%, var(--glow), transparent 70%),
    linear-gradient(to right, color-mix(in srgb, var(--bg) 88%, transparent) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 55%, transparent 80%),
    linear-gradient(to top, var(--bg) 2%, transparent 40%);
}
.slash { position: absolute; z-index: 1; pointer-events: none; transform: skewX(-22deg); }
.slash-1 { top: -10%; bottom: -10%; right: -6vw; width: 9vw; background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 70%, transparent), color-mix(in srgb, var(--accent) 15%, transparent)); opacity: .55; }
.slash-2 { top: -10%; bottom: -10%; right: 6vw; width: 2px; background: color-mix(in srgb, var(--accent) 80%, transparent); opacity: .7; }
@media (max-width: 699px) { .slash-1 { width: 14vw; right: -10vw; } .slash-2 { right: 8vw; } }

/* ---------- specs strip */
.specs { background: var(--surface); border-block: 1px solid var(--line); }
/* three numbers: one row of three at every width */
.spec-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spec-row li { padding: var(--s-4) var(--s-1); border-left: 1px solid var(--line); text-align: center; }
.spec-row li:first-child { border-left: 0; }
.spec-row .spec-n { justify-content: center; }
.spec-n { display: flex; align-items: baseline; gap: 6px; font: 200 clamp(2.4rem, 1.5rem + 3.4vw, 4.4rem)/1 var(--f-display); font-stretch: 125%; font-variation-settings: "wdth" 125; font-variant-numeric: tabular-nums; }
.spec-n small { font-size: .32em; font-weight: 500; color: var(--muted); letter-spacing: .1em; }
.spec-l { display: block; margin-top: var(--s-1); font: 600 10px/1.4 var(--f-display); font-stretch: 125%; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 900px) {
  .spec-row li, .spec-row li:nth-child(odd) { padding: var(--s-6) var(--s-4); border-left: 1px solid var(--line); border-top: 0; text-align: center; }
  .spec-row li:first-child { border-left: 0; }
  .spec-n { justify-content: center; }
}

/* ---------- services: intro + overlay cards */
.svc-x { display: grid; gap: var(--s-6); }
.svc-intro .muted { margin-block: var(--s-3); max-width: 40ch; }
.xcard-grid { display: grid; gap: var(--s-2); grid-auto-flow: column; grid-auto-columns: 74vw; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.xcard-grid::-webkit-scrollbar { display: none; }
.xcard { scroll-snap-align: start; }
.xcard a { position: relative; display: block; overflow: hidden; text-decoration: none; background: var(--surface); }
.xcard .pic { aspect-ratio: 3/4; }
.xcard-cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: var(--s-8) var(--s-3) var(--s-3); padding-right: 76px; background: linear-gradient(to top, var(--bg) 8%, color-mix(in srgb, var(--bg) 70%, transparent) 55%, transparent); }
.xcard-i { font: 600 10px/1 var(--f-display); font-stretch: 125%; letter-spacing: .3em; color: var(--accent); }
.xcard-t { font: 500 1.05rem/1.2 var(--f-display); font-stretch: 125%; font-variation-settings: "wdth" 125; text-transform: uppercase; letter-spacing: .02em; }
.xcard-s { font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }
.xcard .rail-go { right: var(--s-3); bottom: var(--s-3); }
@media (min-width: 1000px) {
  .svc-x { grid-template-columns: .8fr 2.2fr; gap: var(--s-8); align-items: start; }
  .svc-intro { position: sticky; top: calc(var(--header-h-condensed) + var(--s-6)); }
  .xcard-grid { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0; }
  .xcard:nth-child(3n+2) { transform: translateY(var(--s-8)); }
  .xcard-s { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 500ms var(--ease-out), opacity 400ms var(--ease); }
  .xcard a:hover .xcard-s { max-height: 6em; opacity: 1; }
}
.svc-x + * { margin-top: 0; }

/* ---------- materials: dark tech panel */
.tech { position: relative; overflow: clip; background:
  radial-gradient(ellipse 50% 60% at 78% 55%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
  linear-gradient(180deg, var(--bg), var(--surface) 50%, var(--bg)); }
.tech-grid { display: grid; gap: var(--s-6); align-items: center; }
.tech-list { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.tech-item { display: grid; grid-template-columns: 52px 1fr; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.tech-item .h3 { font-size: 1.1rem; margin-bottom: var(--s-1); }
.tech-ico { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); color: var(--ink); }
.tech-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.tech-media { position: relative; }
.tech-media .pic { aspect-ratio: 4/5; }
.tech-floor { position: absolute; left: 10%; right: 10%; bottom: -24px; height: 48px; background: radial-gradient(closest-side, var(--glow), transparent); filter: blur(8px); }
@media (min-width: 900px) { .tech-grid { grid-template-columns: 1fr 1fr; gap: var(--s-12); } }

/* ---------- enquiry block (all pages) */
.inquiry { position: relative; overflow: clip; background: radial-gradient(ellipse 50% 70% at 0% 100%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), var(--surface); border-top: 1px solid var(--line); }
.slash-3 { top: -20%; bottom: -20%; right: 4vw; width: 1px; background: color-mix(in srgb, var(--accent) 70%, transparent); }
.inquiry-grid { display: grid; gap: var(--s-6); position: relative; z-index: 2; }
.inquiry .muted { margin-top: var(--s-2); max-width: 44ch; }
.quick { display: grid; grid-template-columns: 1fr; gap: 0 var(--s-3); align-content: start; }
.quick .field input { font-size: 1rem; }
.quick-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.quick-foot .link-arrow { margin: 0; }
.q-status { min-height: 1.6em; margin-top: var(--s-2); }
@media (min-width: 700px) { .quick { grid-template-columns: 1fr 1fr; } .quick .field-wide, .quick-foot, .q-status { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .inquiry-grid { grid-template-columns: 1fr 1.1fr; gap: var(--s-12); align-items: end; } }

/* ---------- inner page heroes get the glow */
.page-hero, .svc-hero { position: relative; overflow: clip; background: radial-gradient(ellipse 55% 70% at 92% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%); }
.page-hero::after, .svc-hero::after { content: ""; position: absolute; top: -20%; bottom: -20%; right: 7vw; width: 1px; transform: skewX(-22deg); background: color-mix(in srgb, var(--accent) 60%, transparent); pointer-events: none; }
.svc-hero .h1, .page-hero .h1 { max-width: 18ch; }

/* paper sections: light, Zenith-style */
.paper .h2, .paper .h3 { color: var(--bg); }
.paper .h2::after { background: var(--accent); }
.wipe { overflow: hidden; }
.nocase { text-transform: none; }
.xcard-t { font-size: .95rem; }
@media (max-width: 899px) { .slash-1 { display: none; } .slash-2 { right: 3vw; opacity: .5; } }
.stat-n { font-weight: 200; font-stretch: 125%; font-variation-settings: "wdth" 125; }

/* ================================================================== REFERENCE LAYOUT (Ferrari / BMW M / wrap studio) */
.h1 em, .h2 em { font-style: normal; font-weight: 600; color: var(--accent); }

/* ---------- hero: red diagonal panel, outline word, car cutout */
.hx { position: relative; overflow: clip; isolation: isolate; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--header-h) + var(--s-6)) 0 var(--s-8); background: radial-gradient(ellipse 50% 60% at 20% 30%, color-mix(in srgb, var(--ink) 6%, transparent), transparent 70%), var(--bg); }
.hx-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hx-panel { position: absolute; top: 0; bottom: 0; right: 0; width: 52%; clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(150deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 55%, var(--bg)) 55%, color-mix(in srgb, var(--accent) 22%, var(--bg)) 100%); }
.hx-stripe { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--accent); transform: skewX(-17deg); transform-origin: top; }
.hs-1 { right: 55%; opacity: .9; }
.hs-2 { right: 57.5%; width: 1px; opacity: .5; }
.hx-word {
  position: absolute; right: -1vw; top: 50%; translate: 0 -62%; white-space: nowrap;
  font: 800 19vw/.8 var(--f-display); font-stretch: 62%; font-variation-settings: "wdth" 62; letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 30%, transparent);
}
.hx-grid { display: grid; gap: var(--s-4); align-items: center; position: relative; }
.hx-h1 { margin-block: var(--s-2) var(--s-3); max-width: 15ch; }
.hx-copy .lede { color: color-mix(in srgb, var(--ink) 80%, transparent); max-width: 44ch; margin-bottom: var(--s-4); }
.hx-feats { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.hx-feats li { display: flex; align-items: center; gap: 12px; font: 600 11px/1.3 var(--f-display); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; }
.hx-ico, .tcard-ico { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.hx-ico svg, .tcard-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.hx-car { position: relative; }
.hx-car img { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 34px color-mix(in srgb, var(--bg) 80%, transparent)); }
.js .hx-car img { animation: car-in 1100ms var(--ease-out) both; animation-delay: var(--car-delay, 200ms); }
[data-loader="full"] .hx-car img { --car-delay: 1300ms; } [data-loader="short"] .hx-car img { --car-delay: 600ms; }
@keyframes car-in { from { opacity: 0; transform: translateX(14%) scale(.96); } to { opacity: 1; transform: none; } }
.hx-floor { position: absolute; left: 6%; right: 6%; bottom: -2%; height: 14%; z-index: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 95%, transparent), transparent); }
@media (max-width: 899px) {
  .hx { align-items: start; }
  .hx-panel { width: 100%; top: auto; height: 46%; clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 100%); }
  .hs-1, .hs-2 { display: none; }
  .hx-word { top: auto; bottom: 22%; translate: 0 0; font-size: 34vw; right: -4vw; }
  .hx-car { margin-top: var(--s-2); margin-inline: calc(var(--gutter) * -0.5); }
}
@media (min-width: 900px) {
  .hx-grid { grid-template-columns: .95fr 1.25fr; gap: 0; }
  .hx-car { margin-right: calc(var(--gutter) * -1.5); margin-left: -6%; }
}

/* ---------- service product cards (BMW style) */
.pc-section { position: relative; overflow: clip; isolation: isolate; }
.diag { position: absolute; z-index: -1; pointer-events: none; }
.diag-a { left: -10%; right: 40%; bottom: -30%; height: 70%; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); transform: skewY(-8deg); }
.pc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-6); }
.pcard-grid { display: grid; gap: var(--s-2); grid-auto-flow: column; grid-auto-columns: 78vw; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--s-2); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.pcard-grid::-webkit-scrollbar { display: none; }
.pcard { scroll-snap-align: start; }
.pcard a { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--surface); border: 1px solid var(--line); transition: border-color 300ms var(--ease), transform 400ms var(--ease-out); }
.pcard .pic { aspect-ratio: 16/10; }
.pcard-body { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); flex: 1; }
.pcard-i { font: 600 10px/1 var(--f-display); font-stretch: 125%; letter-spacing: .3em; color: var(--accent); }
.pcard-t { font: 500 1.05rem/1.25 var(--f-display); font-stretch: 125%; font-variation-settings: "wdth" 125; text-transform: uppercase; }
.pcard-s { color: var(--muted); font-size: var(--fs-small); flex: 1; }
.pcard-btn { margin-top: var(--s-2); display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 48px; border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  font: 600 11px/1 var(--f-display); font-stretch: 115%; letter-spacing: .22em; text-transform: uppercase; transition: background-color 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease); }
@media (hover: hover) {
  .pcard a:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); transform: translateY(-4px); }
  .pcard a:hover .pcard-btn { background: var(--accent); border-color: var(--accent); }
}
@media (min-width: 1000px) { .pcard-grid { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0; gap: var(--s-3); } }

/* ---------- Ferrari diagonal rows */
.fx { position: relative; overflow: clip; isolation: isolate; background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--ink) 3%, var(--bg)) 50%, var(--bg)); }
.fx-band { position: absolute; z-index: -1; pointer-events: none; transform: skewY(-24deg); }
.fb-1 { left: -20%; width: 60%; top: 18%; height: 120px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent)); opacity: .55; }
.fb-2 { right: -20%; width: 55%; top: 52%; height: 180px; background: linear-gradient(270deg, color-mix(in srgb, var(--accent) 80%, transparent), transparent); opacity: .45; }
.fb-3 { left: -10%; width: 45%; bottom: 6%; height: 60px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.fx-head { margin-bottom: var(--s-8); text-align: center; }
.fx-head .h2 { margin-inline: auto; }
.fx-row { display: grid; gap: var(--s-3); align-items: center; margin-bottom: var(--s-8); }
.fx-frame { clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%); }
.fx-frame .pic { aspect-ratio: 16/10; }
.fx-n { font: 200 clamp(3rem, 2rem + 4vw, 6rem)/1 var(--f-display); font-stretch: 125%; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--ink) 45%, transparent); }
.fx-t { margin: var(--s-1) 0 var(--s-2); font: 300 clamp(1.4rem, 1rem + 1.6vw, 2.2rem)/1.1 var(--f-display); font-stretch: 125%; font-variation-settings: "wdth" 125; text-transform: uppercase; letter-spacing: .02em; }
.fx-t b { font-weight: 700; }
.fx-text .muted { max-width: 46ch; }
@media (min-width: 900px) {
  .fx-row { grid-template-columns: 1.35fr 1fr; gap: var(--s-8); }
  .fx-flip { grid-template-columns: 1fr 1.35fr; }
  .fx-flip .fx-frame { order: 2; clip-path: polygon(0 0, 93% 0, 100% 100%, 7% 100%); }
  .fx-row:last-child { margin-bottom: 0; }
}

/* ---------- why trust us: bento */
.trust-head { margin-bottom: var(--s-6); }
.trust-head.center { text-align: center; }
.trust-head.center .h2 { margin-inline: auto; }
.tgrid { display: grid; gap: var(--s-2); }
.tcard { position: relative; overflow: hidden; isolation: isolate; min-height: 280px; padding: var(--s-4); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-1); border: 1px solid var(--line); background: var(--surface); }
.tcard-bg { position: absolute; inset: 0; z-index: -1; }
.tcard-bg .pic { height: 100%; aspect-ratio: auto; opacity: .38; transition: transform 900ms var(--ease-out), opacity 500ms var(--ease); }
.tcard-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 15%, color-mix(in srgb, var(--bg) 40%, transparent)); }
.tcard-ico { position: absolute; top: var(--s-3); left: var(--s-3); background: color-mix(in srgb, var(--bg) 60%, transparent); }
.tcard-t { font: 600 1.15rem/1.2 var(--f-display); font-stretch: 125%; font-variation-settings: "wdth" 125; text-transform: uppercase; }
.tcard-p { color: color-mix(in srgb, var(--ink) 72%, transparent); font-size: var(--fs-small); max-width: 48ch; }
@media (hover: hover) { .tcard:hover .tcard-bg .pic { transform: scale(1.05); opacity: .55; } }
@media (min-width: 900px) {
  .tgrid { grid-template-columns: 1.2fr 1fr 1fr; grid-auto-rows: minmax(260px, auto); gap: var(--s-3); }
  .t-tall { grid-row: span 2; }
  .t-wide { grid-column: span 2; }
}

/* ---------- process grid around the car */
.proc-x { position: relative; overflow: clip; background: radial-gradient(ellipse 45% 40% at 50% 72%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%); }
.pgrid { display: grid; gap: var(--s-2); }
.pstep { padding: var(--s-3); border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 70%, transparent); }
.pstep-n { display: block; font: 600 11px/1 var(--f-display); font-stretch: 125%; letter-spacing: .3em; color: var(--accent); margin-bottom: var(--s-2); }
.pstep-t { font: 600 1rem/1.25 var(--f-display); font-stretch: 125%; font-variation-settings: "wdth" 125; text-transform: uppercase; margin-bottom: var(--s-1); }
.pcar { position: relative; padding: var(--s-4) 0; }
.pcar img { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 24px color-mix(in srgb, var(--bg) 80%, transparent)); }
.center-cta { text-align: center; margin-top: var(--s-6); }
@media (min-width: 900px) {
  .pgrid { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); align-items: stretch; }
  .ps-4 { grid-column: 1; grid-row: 2; }
  .pcar { grid-column: 2; grid-row: 2; align-self: center; padding: 0; }
  .ps-5 { grid-column: 3; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { .js .hx-car img { animation: none; } }
.hx-h1 { font-size: clamp(1.6rem, .45rem + 3.7vw, 3.9rem); }
@media (min-width: 900px) {
  .hs-1, .hs-2 { top: 0; bottom: 0; width: 52%; transform: none; background: var(--accent); }
  .hs-1 { right: 2.6%; clip-path: polygon(34% 0, 34.9% 0, .9% 100%, 0 100%); opacity: .9; }
  .hs-2 { right: 4.6%; clip-path: polygon(34% 0, 34.35% 0, .35% 100%, 0 100%); opacity: .55; }
}
.trust-head.center .eyebrow, .fx-head .eyebrow, .center-cta { max-width: none; margin-inline: auto; }
.tcard-bg .pic { opacity: .5; }
@media (min-width: 900px) { .hx-h1 { max-width: none; white-space: nowrap; } }
@media (max-width: 899px) {
  .hx-feats { display: none; }
  .hx-panel { height: 40%; }
  .hx { min-height: auto; padding-bottom: var(--s-4); }
}

/* ================================================================== 360° scroll turntable */
.spin { position: relative; height: 420vh; background: var(--paper); color: var(--bg); --p: 0; }
.spin-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto auto; padding: calc(var(--header-h-condensed) + var(--s-3)) 0 var(--s-4); }
.spin .eyebrow-accent { margin-bottom: var(--s-1); }
.spin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); }
.spin .h2 { color: var(--bg); }
.spin-deg { font: 200 clamp(2.4rem, 1.5rem + 3.5vw, 4.6rem)/1 var(--f-display); font-stretch: 125%; font-variant-numeric: tabular-nums; color: var(--bg); }
.spin-stage { position: relative; display: grid; place-items: center; min-height: 0; perspective: 1400px; }
.spin-canvas {
  position: relative; z-index: 1; width: min(100%, calc((100svh - 300px) * 16 / 9)); height: auto; aspect-ratio: 16/9;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 52% 56% at 50% 54%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 52% 56% at 50% 54%, #000 62%, transparent 100%);
  transform: rotateX(calc((1 - min(var(--p) * 6, 1)) * 28deg)) scale(calc(.82 + min(var(--p) * 6, 1) * .18)) translateY(calc((1 - min(var(--p) * 6, 1)) * 40px));
  transform-origin: 50% 70%; will-change: transform;
}
.spin-word {
  position: absolute; left: 50%; top: 50%; translate: calc(-50% + (0.5 - var(--p)) * 18%) -58%; white-space: nowrap; z-index: 0;
  font: 800 22vw/.8 var(--f-display); font-stretch: 62%; font-variation-settings: "wdth" 62;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--bg) 14%, transparent);
}
.spin-ring { position: absolute; z-index: 2; left: 50%; bottom: 8%; width: min(70%, 900px); height: 1px; translate: -50% 0; background: linear-gradient(90deg, transparent, var(--accent), transparent); transform: scaleX(calc(.2 + var(--p) * .8)); opacity: .7; }
.spin-notes { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.spin-notes li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line-paper); opacity: .32; transition: opacity 500ms var(--ease), border-color 500ms var(--ease); }
.spin-notes li.is-active { opacity: 1; border-top-color: var(--accent); }
.spin-n { grid-row: span 2; font: 600 11px/1.6 var(--f-display); font-stretch: 125%; letter-spacing: .26em; color: var(--accent); }
.spin-notes b { font: 600 .95rem/1.3 var(--f-display); font-stretch: 125%; font-variation-settings: "wdth" 125; text-transform: uppercase; }
.spin-notes li > span:last-child { font-size: var(--fs-small); color: color-mix(in srgb, var(--bg) 70%, transparent); max-width: 44ch; }
.spin-bar { height: 2px; margin-top: var(--s-3); background: var(--line-paper); }
.spin-bar i { display: block; height: 100%; background: var(--bg); transform-origin: left; transform: scaleX(var(--p)); }
@media (max-width: 899px) {
  .spin-notes li { display: none; }
  .spin-notes li.is-active { display: grid; }
  .spin-canvas { width: 118%; max-width: none; }
}
@media (min-width: 900px) { .spin-notes { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
@media (prefers-reduced-motion: reduce) {
  .spin { height: auto; }
  .spin-sticky { position: relative; height: auto; }
  .spin-canvas { transform: none; }
  .spin-notes li { opacity: 1; display: grid; }
}
/* the source video has wide studio margins: zoom in on the car */
.spin-canvas { width: min(135%, calc((100svh - 260px) * 16 / 9 * 1.35)); max-width: none;
  -webkit-mask-image: radial-gradient(ellipse 44% 50% at 50% 55%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 44% 50% at 50% 55%, #000 60%, transparent 100%); }
@media (max-width: 899px) { .spin-canvas { width: 185%; } .spin-stage { margin-block: calc(var(--s-6) * -1); } }
@media (min-width: 900px) { .spin-canvas { width: min(118%, calc((100svh - 340px) * 16 / 9 * 1.06)); } .spin-notes { position: relative; z-index: 3; } }

/* ================================================================== service pages (reference layout) */
.sx { position: relative; overflow: clip; isolation: isolate; min-height: 92svh; display: grid; align-items: end; padding: calc(var(--header-h) + var(--s-8)) 0 var(--s-8); }
.sx-media { position: absolute; inset: 0; z-index: -2; }
.sx-media .sx-pic { width: 100%; height: 100%; aspect-ratio: auto; object-position: 60% 50%; }
.sx-media::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(to right, var(--bg) 0%, color-mix(in srgb, var(--bg) 85%, transparent) 38%, color-mix(in srgb, var(--bg) 20%, transparent) 75%),
  linear-gradient(to top, var(--bg) 0%, transparent 45%),
  radial-gradient(ellipse 50% 60% at 15% 90%, var(--glow), transparent 70%); }
.sx-panel { position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; width: 22%; clip-path: polygon(55% 0, 100% 0, 100% 100%, 0 100%); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 85%, transparent), color-mix(in srgb, var(--accent) 20%, transparent)); opacity: .75; }
.sx .slash-2 { right: 21%; }
.sx-h1 { max-width: 16ch; margin-block: var(--s-2) var(--s-3); }
.sx .lede { color: color-mix(in srgb, var(--ink) 82%, transparent); margin-bottom: var(--s-4); }
@media (max-width: 899px) { .sx-panel { width: 34%; opacity: .55; } .sx .slash-2 { display: none; } .sx { min-height: 86svh; } }

/* included: numbered cards */
.incl-x { display: grid; gap: var(--s-6); }
.icard-grid { display: grid; gap: var(--s-2); }
.icard { position: relative; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: var(--s-2); padding: var(--s-3); background: var(--surface); border: 1px solid var(--line); transition: border-color 300ms var(--ease), transform 400ms var(--ease-out); }
.icard-ico { grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center; background: var(--accent); color: var(--ink); }
.icard-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icard-n { font: 600 10px/1.6 var(--f-display); font-stretch: 125%; letter-spacing: .3em; color: var(--muted); }
.icard-t { font: 500 .98rem/1.35 var(--f-display); font-stretch: 112%; }
@media (hover: hover) { .icard:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(-3px); } }
@media (min-width: 700px) { .icard-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .incl-x { grid-template-columns: .8fr 2fr; gap: var(--s-8); align-items: start; } .incl-head { position: sticky; top: calc(var(--header-h-condensed) + var(--s-6)); } }

/* what it is */
.what-x .fx-row { margin-bottom: 0; }
.what-x .fx-t { font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); }
.who-box { margin-top: var(--s-4); padding: var(--s-3); border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.who-box .eyebrow { margin-bottom: var(--s-1); }

/* versus */
.vs-x { display: grid; gap: var(--s-2); align-items: stretch; }
.vs-card { position: relative; padding: var(--s-6) var(--s-4) var(--s-4); border: 1px solid var(--line); background: var(--surface); }
.vs-card p:last-child { color: color-mix(in srgb, var(--ink) 78%, transparent); }
.vs-ico { position: absolute; top: calc(var(--s-3) * -1); left: var(--s-4); width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--bg); }
.vs-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.vs-bad { opacity: .78; }
.vs-bad .vs-ico { color: var(--muted); }
.vs-good { border-color: color-mix(in srgb, var(--accent) 65%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface) 60%); }
.vs-good .vs-ico { background: var(--accent); border-color: var(--accent); }
.vs-mid { align-self: center; justify-self: center; font: 200 2rem/1 var(--f-display); font-stretch: 125%; color: var(--muted); }
.vs-x { margin-top: var(--s-6); }
@media (min-width: 900px) { .vs-x { grid-template-columns: 1fr auto 1fr; gap: var(--s-4); } }

/* gallery mosaic */
.mosaic { display: grid; gap: var(--s-2); grid-template-columns: 1fr 1fr; }
.mz .pic { height: 100%; aspect-ratio: 4/5; }
.mz-big { grid-column: 1 / -1; }
.mz-big .pic { aspect-ratio: 16/10; }
@media (min-width: 1000px) {
  .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 260px; gap: var(--s-3); }
  .mz .pic, .mz-big .pic { aspect-ratio: auto; height: 100%; }
  .mz-big { grid-column: span 2; grid-row: span 2; }
  .mosaic-2 .mz:not(.mz-big) { grid-column: span 2; grid-row: span 2; }
}

/* FAQ */
.faq-grid { display: grid; gap: var(--s-6); }
.faq-side .muted { margin-top: var(--s-3); }
.faq-x summary { align-items: baseline; }
.faq-n { flex: none; width: 3ch; font: 600 11px/1 var(--f-display); font-stretch: 125%; letter-spacing: .2em; color: var(--accent); }
.faq-x summary .h3 { flex: 1; font-size: 1.05rem; }
.faq-x .faq-a { padding-left: calc(3ch + var(--s-3)); }
.faq-x[open] { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.faq-x summary { padding-inline: var(--s-2); }
@media (min-width: 1000px) { .faq-grid { grid-template-columns: .8fr 1.6fr; gap: var(--s-8); align-items: start; } .faq-side { position: sticky; top: calc(var(--header-h-condensed) + var(--s-6)); } }

/* other services row */
.ocard-grid { grid-auto-columns: 62vw; }
.ocard .pcard-body { padding: var(--s-2); }
.ocard .pcard-t { font-size: .85rem; }
@media (min-width: 1000px) { .ocard-grid { grid-template-columns: repeat(5, 1fr); } }
/* ================================================================== shop */
/* header cart button */
.site-nav { margin-left: auto; }
.cart-link { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; color: var(--ink); text-decoration: none;
  font: 500 var(--fs-btn)/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; }
.cart-link svg { width: 22px; height: 22px; }
.cart-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: var(--ink); font: 600 11px/1 var(--f-mono); letter-spacing: 0; }
.cart-count[hidden] { display: none; }
.cart-link.bump .cart-count { animation: cart-bump 600ms var(--ease-out); }
@keyframes cart-bump { 0% { transform: scale(1); } 35% { transform: scale(1.5); } 100% { transform: scale(1); } }
@media (max-width: 1080px) { .site-nav { margin-left: 0; } .cart-link { margin-left: auto; } .cart-word { display: none; } }

/* test banner */
.shop-test { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: var(--s-4); padding: 10px 14px; border: 1px dashed color-mix(in srgb, var(--accent) 70%, transparent); font-size: 13px; color: var(--muted); width: fit-content; max-width: 100%; }
.shop-test span { font: 600 10px/1 var(--f-mono); letter-spacing: .22em; color: var(--accent); }

/* grid */
.shop-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.shop-bar .eyebrow { margin: 0; }
ul.shop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); padding: 0; list-style: none; }
ul.shop-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1099px) { ul.shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { ul.shop-grid, ul.shop-grid-3 { grid-template-columns: minmax(0, 1fr); } }
.shop-card { transition-delay: var(--d, 0ms); }
.shop-card a { position: relative; display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; border: 1px solid var(--line); background: #0d0d0d; overflow: hidden;
  transition: border-color 400ms var(--ease), transform 500ms var(--ease-out); }
.shop-card-media { display: block; aspect-ratio: 1; overflow: hidden; }
.shop-card-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 900ms var(--ease-out), filter 600ms var(--ease); filter: saturate(.92); }
.shop-card-body { display: grid; gap: 6px; padding: var(--s-3) var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
.shop-card-name { font: 600 clamp(1rem, .9rem + .4vw, 1.2rem)/1.2 var(--f-display); font-stretch: 125%; text-transform: uppercase; letter-spacing: .01em; }
.shop-card-short { font-size: 14px; line-height: 1.5; color: var(--muted); }
.shop-card-price { margin-top: 6px; font: 500 15px/1 var(--f-mono); }
.shop-card-price small { color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-right: 4px; }
.shop-card-cta { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; background: var(--accent); color: var(--ink);
  transform: translate(8px, -8px) scale(.6); opacity: 0; transition: transform 450ms var(--ease-out), opacity 300ms var(--ease); }
.shop-card a:hover, .shop-card a:focus-visible { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.shop-card a:hover img, .shop-card a:focus-visible img { transform: scale(1.09); filter: saturate(1.1); }
.shop-card a:hover .shop-card-cta, .shop-card a:focus-visible .shop-card-cta { transform: none; opacity: 1; }
.shop-custom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); margin-top: var(--s-8); padding: var(--s-4); border: 1px solid var(--line);
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%); }
.shop-custom .h3 { margin-top: 6px; max-width: 30ch; }

/* product page */
.pd { padding-block: calc(var(--header-h) + var(--s-6)) var(--s-8); }
.pd-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
@media (max-width: 899px) { .pd-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } }
.pd-media { position: sticky; top: calc(var(--header-h-condensed) + var(--s-3)); margin: 0; border: 1px solid var(--line); overflow: hidden; background: #0d0d0d; }
@media (max-width: 899px) { .pd-media { position: relative; top: 0; } }
.pd-media img { width: 100%; height: auto; display: block; }
.pd-info .crumbs { margin-bottom: var(--s-2); color: var(--muted); }
.pd-title { margin: 0; }
.pd-price { margin: var(--s-2) 0 var(--s-3); font: 500 clamp(1.6rem, 1.3rem + 1vw, 2.2rem)/1 var(--f-mono); color: var(--ink); }
.pd-desc { color: var(--muted); max-width: 52ch; }
.pd-form { margin-top: var(--s-4); }
.pd-opt { margin: 0 0 var(--s-3); padding: 0; border: 0; }
.pd-opt legend { margin-bottom: var(--s-1); font: 500 var(--fs-eyebrow)/1.4 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.opt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-chip { position: relative; cursor: pointer; }
.opt-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); font: 500 14px/1 var(--f-mono); transition: border-color 250ms var(--ease), background-color 250ms var(--ease), color 250ms var(--ease); }
.opt-chip:hover span { border-color: var(--muted); }
.opt-chip input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.opt-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.pd-buy { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.pd-add { flex: 1 1 200px; justify-content: center; }
.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--line); min-height: 48px; }
.qty button { width: 44px; background: none; border: 0; color: var(--ink); font: 400 20px/1 var(--f-mono); cursor: pointer; }
.qty button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.qty input, .qty output { width: 48px; display: grid; place-items: center; text-align: center; background: none; border: 0; border-inline: 1px solid var(--line); color: var(--ink); font: 500 15px/1 var(--f-mono); -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-sm { min-height: 38px; } .qty-sm button { width: 34px; font-size: 16px; } .qty-sm output { width: 38px; }
.pd-status { min-height: 1.6em; margin-top: var(--s-2); }
.pd-status a { color: var(--ink); }
.pd-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-6); border-top: 1px solid var(--line); }
.pd-specs div { padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.pd-specs dt { font: 500 10px/1.4 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.pd-specs dd { margin: 4px 0 0; font-size: 15px; }
.shop-more { border-top: 1px solid var(--line); }
.shop-more .h3 { margin-bottom: var(--s-4); }

/* cart + checkout */
.cart-hero { padding-bottom: var(--s-4); }
.cart-state { display: grid; justify-items: start; gap: var(--s-3); padding-block: var(--s-6); }
.cart-state[hidden], .cart-grid[hidden], [data-need][hidden] { display: none; }
.cart-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: var(--s-8); align-items: start; }
@media (max-width: 899px) { .cart-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }
ul.cart-list { padding: 0; margin: 0 0 var(--s-6); list-style: none; border-top: 1px solid var(--line); }
.cart-line { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto 36px; align-items: center; gap: var(--s-2); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.cart-line img { width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--line); }
.cart-line-info { display: grid; gap: 4px; min-width: 0; }
.cart-line-info a { color: var(--ink); text-decoration: none; font: 600 15px/1.25 var(--f-display); font-stretch: 125%; text-transform: uppercase; }
.cart-line-total { font: 500 15px/1 var(--f-mono); min-width: 72px; text-align: right; }
.cart-x { width: 36px; height: 36px; background: none; border: 1px solid transparent; color: var(--muted); font-size: 20px; cursor: pointer; }
.cart-x:hover { color: var(--accent); border-color: var(--line); }
@media (max-width: 599px) {
  .cart-line { grid-template-columns: 64px minmax(0, 1fr) auto 36px; grid-template-areas: "img info info x" "img qty total total"; row-gap: 10px; }
  .cart-line img { grid-area: img; width: 64px; height: 64px; align-self: start; }
  .cart-line-info { grid-area: info; } .cart-x { grid-area: x; align-self: start; }
  .cart-line .qty { grid-area: qty; justify-self: start; } .cart-line-total { grid-area: total; }
}
.co-step { margin: 0 0 var(--s-6); padding: 0; border: 0; }
.co-step legend { display: flex; align-items: baseline; gap: 12px; margin-bottom: var(--s-3); }
.co-step legend span { font: 500 12px/1 var(--f-mono); color: var(--accent); letter-spacing: .1em; }
.co-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-3); }
.co-row .field-wide { grid-column: 1 / -1; }
@media (max-width: 699px) { .co-row { grid-template-columns: minmax(0, 1fr); } }
.ships { display: grid; gap: 8px; margin-bottom: var(--s-3); }
.ship { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); min-height: 56px; padding: 0 var(--s-3) 0 52px; border: 1px solid var(--line); cursor: pointer; transition: border-color 250ms var(--ease), background-color 250ms var(--ease); }
.ship input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ship::before { content: ""; position: absolute; left: 18px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 1px solid var(--muted); border-radius: 50%; }
.ship:has(input:checked) { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.ship:has(input:checked)::before { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 10px var(--accent); }
.ship:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ship-name { font-size: 15px; } .ship-price { font: 500 14px/1 var(--f-mono); color: var(--muted); }
.cart-sum { position: sticky; top: calc(var(--header-h-condensed) + var(--s-3)); padding: var(--s-4); border: 1px solid var(--line); background: #0d0d0d; }
@media (max-width: 899px) { .cart-sum { position: relative; top: 0; } }
.cart-sum dl { margin: var(--s-2) 0; }
.cart-sum dl div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cart-sum dt { color: var(--muted); } .cart-sum dd { margin: 0; font-family: var(--f-mono); }
.cart-sum .sum-total { border-bottom: 0; padding-top: var(--s-2); }
.cart-sum .sum-total dt { color: var(--ink); font-weight: 500; } .cart-sum .sum-total dd { font-size: 1.4rem; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin: var(--s-2) 0; cursor: pointer; color: var(--muted); }
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.consent input[aria-invalid="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.cart-pay { width: 100%; justify-content: center; margin-top: var(--s-1); }
.cart-secure { margin-top: var(--s-2); }
/* header with the shop item: keep every label on one line, cart sits at the far right */
.nav-list a, .tel, .lang, .nav-tools .btn { white-space: nowrap; }
.site-nav { order: 2; }
.cart-link { order: 3; }
.menu-toggle { order: 4; }
@media (min-width: 1081px) and (max-width: 1380px) {
  .header-inner { gap: var(--s-3); }
  .site-nav, .nav-tools { gap: var(--s-2); }
  .nav-list { gap: var(--s-2); }
  .tel { display: none; }
}
.brand, .cart-link, .cart-link svg { flex-shrink: 0; }
@media (min-width: 1081px) and (max-width: 1240px) { .cart-word { display: none; } .nav-list a, .lang { letter-spacing: .14em; } }

/* ================================================================== drive-in: scroll scrubs the studio clip (Demon 170) */
/* --p: 0→1 through the pinned scroll (set by main.js). The page colour matches the clip's studio grey, so the video has no visible edge. */
.dv { --p: 0; --bgv: #dedede; position: relative; height: 330vh; background: var(--bgv); color: var(--bg); }
.dv-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; isolation: isolate; }
.dv-canvas { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.dv-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); padding-top: calc(var(--header-h-condensed) + var(--s-4)); }
.dv-eyebrow { margin: 0 0 var(--s-1); font: 600 11px/1.2 var(--f-display); font-stretch: 125%; font-variation-settings: "wdth" 125; letter-spacing: .32em; text-transform: uppercase; color: var(--accent);
  opacity: calc(var(--p) * 8); }
.dv-big { display: flex; flex-wrap: wrap; gap: 0 .14em; margin: 0; line-height: .84; font-family: var(--f-display); font-weight: 800; font-stretch: 62%; font-variation-settings: "wdth" 62;
  font-size: clamp(4rem, 1.5rem + 8.5vw, 10.5rem); letter-spacing: -.01em; text-transform: uppercase; }
.dv-solid { color: var(--bg); transform: translateX(calc((1 - min(1, var(--p) * 4)) * -18%)); opacity: calc(.12 + var(--p) * 4); }
.dv-out { color: transparent; -webkit-text-stroke: 2px var(--accent); transform: translateX(calc((1 - min(1, var(--p) * 4)) * 40%)); opacity: calc(.12 + var(--p) * 4); }
.dv-info { max-width: 330px; padding-left: var(--s-3); border-left: 2px solid var(--accent);
  opacity: calc((var(--p) - .5) * 4); transform: translateY(calc((1 - min(1, max(0, (var(--p) - .5) * 4))) * 24px)); }
.dv-h { margin: 0 0 var(--s-2); font: 600 clamp(1.1rem, .9rem + .7vw, 1.5rem)/1.15 var(--f-display); font-stretch: 125%; font-variation-settings: "wdth" 125; text-transform: uppercase; color: var(--bg); }
.dv-info p { margin: 0 0 var(--s-2); font-size: 14px; line-height: 1.6; color: #3b3b3b; }
.dv-info .link-arrow { color: var(--bg); }
.dv-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-3); padding-bottom: var(--s-6);
  grid-row: 3; opacity: calc((var(--p) - .62) * 4); }
ul.dv-specs { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin: 0; padding: 0; list-style: none; }
.dv-specs li > span { display: block; font: 600 10px/1.4 var(--f-display); font-stretch: 125%; letter-spacing: .24em; text-transform: uppercase; color: #555; }
.dv-specs b { font: 600 clamp(1.2rem, 1rem + 1vw, 1.7rem)/1.2 var(--f-display); font-stretch: 125%; font-variation-settings: "wdth" 125; text-transform: uppercase; color: var(--bg); }
.dv-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
.dv .btn-line { color: var(--bg); border-color: color-mix(in srgb, var(--bg) 45%, transparent); }
.dv .btn-line:hover { box-shadow: inset 24em 0 0 0 var(--bg); color: var(--ink); border-color: var(--bg); }
.dv-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--bg) 10%, transparent); }
.dv-bar i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p)); }
/* below the pinned area the next (dark) section starts: soften the join */
.dv::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }

/* phones and portrait screens: the clip sits full-width in the middle band, faded top and bottom into the page grey */
@media (max-width: 799px), (max-aspect-ratio: 6/5) {
  .dv { height: 300vh; }
  .dv-canvas { position: relative; inset: auto; grid-row: 2; align-self: center; width: 116%; height: auto; margin-left: -8%; aspect-ratio: 16 / 9;
    -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
  .dv-top { flex-direction: column; gap: var(--s-3); padding-top: calc(var(--header-h-condensed) + var(--s-3)); }
  .dv-info { max-width: 46ch; }
  .dv-info p { display: none; }
  .dv-big { font-size: clamp(3.6rem, 1rem + 15vw, 7rem); }
  .dv-bottom { padding-bottom: var(--s-4); }
  ul.dv-specs { gap: var(--s-2) var(--s-4); }
}
@media (max-width: 799px) and (max-height: 700px) { .dv-specs { display: none; } }
@media (prefers-reduced-motion: reduce) { .dv { --p: 1; height: auto; } .dv-sticky { position: relative; } }

/* ================================================================== TYPE: Montserrat (BMW M reference)
   One geometric sans for everything: heavy caps for display, regular for body. Montserrat has no
   width axis, so the font-stretch / "wdth" settings above are simply ignored; the giant outline
   words that relied on condensed Archivo are resized below. */
:root {
  --f-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --fs-h1: clamp(1.9rem, .7rem + 5.4vw, 5.4rem);
  --fs-h2: clamp(1.6rem, .7rem + 3.4vw, 3.4rem);
}
body { font-size: 15px; line-height: 1.7; }
.h1, .h2 { font-weight: 800; letter-spacing: -.015em; line-height: 1.02; }
.h1 em, .h2 em { font-weight: 800; }
.h3 { font-weight: 700; letter-spacing: -.005em; }
.eyebrow, .mono-index, .chip, .nav-list a, .tel, .lang, .link-arrow, .field label, .record dt, .passport-fields dt, .to-top, .rail-idx, .job-tag { font-weight: 600; }
.btn { font-weight: 700; letter-spacing: .16em; }
.btn::after { font-family: var(--f-display); }
.lede { line-height: 1.65; }
/* numbers and figures: bold like the reference spec row (510 hp / 300 km/h) */
.spec-n, .stat-n, .spin-deg, .vs-mid { font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fx-n { font-weight: 800; }
.fx-t, .xcard-t, .pcard-t, .tcard-t, .pstep-t, .spin-notes b, .shop-card-name, .cart-line-info a, .dv-h, .dv-specs b { font-weight: 700; letter-spacing: 0; }
.pd-price, .shop-card-price, .cart-line-total, .cart-sum dd, .ship-price { font-variant-numeric: tabular-nums; font-weight: 600; }
/* giant outline / background words: normal-width caps need less size than condensed ones did */
.hx-word { font-size: 12vw; font-weight: 900; }
.spin-word { font-size: 14vw; font-weight: 900; }
.showcase-word { font-size: 16vw; font-weight: 900; }
.dv-big { font-weight: 900; font-size: clamp(3rem, .8rem + 6.4vw, 7.6rem); line-height: .9; letter-spacing: -.02em; }
.dv-out { -webkit-text-stroke-width: 2px; }
@media (max-width: 799px), (max-aspect-ratio: 6/5) { .dv-big { font-size: clamp(2.6rem, .6rem + 11vw, 5rem); } }
.nav-list a { letter-spacing: .14em; }
@media (max-width: 1080px) { .nav-list a { letter-spacing: -.01em; font-weight: 800; } }
/* Montserrat has no arrow glyph: draw "→" from a system font so it sits on the text line at full size */
.btn::after, .link-arrow > span[aria-hidden], .shop-card-cta, .pd-status a, .to-top { font-family: "Helvetica Neue", Arial, "Segoe UI Symbol", sans-serif; }
.btn::after { font-size: 15px; line-height: 1; }
:root { --fs-h1: clamp(2.05rem, .75rem + 5.6vw, 5.4rem); }
/* arrows as a vector shape in the text colour: same size and position on every device, whatever fonts it has */
:root { --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); }
.btn::after, .link-arrow > span[aria-hidden], .shop-card-cta::before {
  content: ""; display: inline-block; width: 15px; height: 10px; flex: none; font-size: 0; vertical-align: middle;
  background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
}
.shop-card-cta { font-size: 0; }
.menu-toggle::after, .job-close::after, .map-btn::after, .rail-btn::after { content: none; display: none; }

/* ================================================================== stripes: scroll lays blue stripes onto the white Challenger */
/* Page colour = the clip's studio white, edges of the clip faded into it, so there is no visible frame. */
.st { --p: 0; --bgs: #eff0f3; position: relative; height: 320vh; background: var(--bgs); color: var(--bg); }
.st-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-items: center; isolation: isolate; }
.st-canvas { position: absolute; z-index: -1; top: 50%; left: 33vw; width: min(65vw, calc((100svh - 60px) * 16 / 9)); height: auto; aspect-ratio: 16 / 9; translate: 0 -46%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 94%, transparent), linear-gradient(transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 94%, transparent), linear-gradient(transparent, #000 7%, #000 93%, transparent); mask-composite: intersect; }
.st-copy { max-width: min(400px, 30vw); padding-top: var(--header-h-condensed); }
.st-copy .eyebrow { margin-bottom: var(--s-2); }
.st-h { margin: 0 0 var(--s-4); font: 800 clamp(2.2rem, 1rem + 3.4vw, 4.2rem)/.95 var(--f-display); letter-spacing: -.02em; text-transform: uppercase; color: var(--bg); }
.st-h em { font-style: normal; color: var(--accent); }
ol.st-steps { margin: 0 0 var(--s-4); padding: 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--bg) 14%, transparent); }
.st-steps li { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 0 var(--s-1); padding: var(--s-2) 0 var(--s-2) var(--s-2); border-bottom: 1px solid color-mix(in srgb, var(--bg) 14%, transparent);
  opacity: .38; transition: opacity 400ms var(--ease); }
.st-steps li::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: 50% 0; transition: transform 500ms var(--ease-out); }
.st-steps li.is-done { opacity: .62; }
.st-steps li.is-on { opacity: 1; }
.st-steps li.is-on::before { transform: scaleY(1); }
.st-n { font: 700 11px/1.7 var(--f-display); letter-spacing: .14em; color: var(--accent); }
.st-steps b { display: block; font: 700 .95rem/1.3 var(--f-display); text-transform: uppercase; color: var(--bg); }
.st-steps p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: #45474d; }
.st-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0; opacity: calc((var(--p) - .6) * 4); }
.st-actions .link-arrow { color: var(--bg); }
.st-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--bg) 8%, transparent); }
.st-bar i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p)); }

/* phones and portrait screens: title, clip, the current step, buttons, stacked */
@media (max-width: 799px), (max-aspect-ratio: 6/5) {
  .st { height: 300vh; }
  .st-sticky { align-items: stretch; align-content: center; grid-template-rows: auto auto auto auto auto; row-gap: var(--s-2); padding-top: var(--header-h-condensed); }
  .st-grid, .st-copy { display: contents; }
  .st-copy > * { padding-inline: var(--gutter); max-width: none; }
  .st-copy .eyebrow { grid-row: 1; margin: 0; }
  .st-h { grid-row: 2; margin: 0; font-size: clamp(2rem, .6rem + 8vw, 3.4rem); }
  .st-canvas { grid-row: 3; position: relative; top: auto; left: auto; translate: none; width: 116%; margin-left: -8%;
    -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); }
  ol.st-steps { grid-row: 4; margin: 0; border: 0; display: grid; }
  .st-steps li { grid-area: 1 / 1; opacity: 0; border: 0; padding-block: 0; transition: opacity 350ms var(--ease); }
  .st-steps li.is-done { opacity: 0; }
  .st-steps li.is-on { opacity: 1; }
  .st-actions { grid-row: 5; }
}
@media (max-width: 799px) and (max-height: 700px) { .st-steps p { display: none; } }
@media (prefers-reduced-motion: reduce) { .st { --p: 1; height: auto; } .st-sticky { position: relative; min-height: 100svh; } }
/* stripes: blend the clip into the page — matching tone, a studio glow behind the car, longer edge fades */
.st { --bgs: #f0f2f3; background: radial-gradient(ellipse 48% 60% at 66% 56%, #f6f7f8 0%, #f3f4f5 45%, var(--bgs) 75%), var(--bgs); }
.st-canvas {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 91%, transparent), linear-gradient(transparent, #000 15%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 91%, transparent), linear-gradient(transparent, #000 15%, #000 86%, transparent);
}
@media (max-width: 799px), (max-aspect-ratio: 6/5) {
  .st { background: radial-gradient(ellipse 80% 30% at 50% 50%, #f6f7f8, var(--bgs) 80%), var(--bgs); }
  .st-canvas { -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 88%, transparent); }
}

/* ================================================================== CLEANUP PASS: less text, more motion */
/* ---- hero: one-line intro, outline word kept low and out of the headline, car follows the pointer */
.hx-lede { max-width: 34ch; }
.hx-word { top: auto; bottom: 2%; translate: calc(var(--mx, 0) * 18px) 0; -webkit-text-stroke-color: color-mix(in srgb, var(--ink) 9%, transparent); transition: translate 900ms var(--ease-out); }
.hx-car { transform: translate3d(calc(var(--mx, 0) * -18px), calc(var(--my, 0) * -10px), 0) rotate(calc(var(--mx, 0) * -.6deg)); transition: transform 700ms var(--ease-out); }
.hx-stripe { transform: translateX(calc(var(--mx, 0) * 10px)); transition: transform 900ms var(--ease-out); }
@media (max-width: 899px) { .hx-word { bottom: 30%; } }

/* ---- 360°: one short caption that changes with the angle, no paragraphs */
.spin-notes { display: grid; grid-template-columns: minmax(0, 1fr) !important; justify-items: center; gap: 0; }
.spin-notes li { grid-area: 1 / 1; display: flex !important; align-items: center; gap: 14px; padding: 12px 22px; border: 1px solid transparent; border-radius: 999px;
  opacity: 0; transform: translateY(10px); transition: opacity 450ms var(--ease), transform 600ms var(--ease-out), border-color 450ms var(--ease); }
.spin-notes li.is-active { opacity: 1; transform: none; border-color: color-mix(in srgb, var(--bg) 14%, transparent); }
.spin-notes li > span:last-child { display: none; }
.spin-notes .spin-n { grid-row: auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--ink); font-size: 10px; letter-spacing: 0; }
.spin-notes b { font-size: clamp(.95rem, .85rem + .4vw, 1.15rem); letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) {
  .spin-notes { gap: var(--s-1); }
  .spin-notes li { grid-area: auto; opacity: 1; transform: none; }
}

/* ---- materials: three tabs, one open at a time; the photo zooms out as it scrolls through */
.mat-list { margin-top: var(--s-6); border-top: 1px solid var(--line); }
.mat { border-bottom: 1px solid var(--line); }
.mat summary { list-style: none; display: grid; grid-template-columns: clamp(118px, 13vw, 200px) minmax(0, 1fr) 44px; align-items: center; gap: var(--s-2); padding: var(--s-3) 0; cursor: pointer; }
.mat summary::-webkit-details-marker { display: none; }
.mat-k { font: 900 clamp(1.7rem, 1rem + 2.2vw, 2.8rem)/1 var(--f-display); letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 45%, transparent); transition: color 400ms var(--ease), -webkit-text-stroke-color 400ms var(--ease); }
.mat-t { font: 700 .9rem/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); transition: color 400ms var(--ease); }
.mat-ico { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); color: var(--ink); transition: background-color 400ms var(--ease), border-color 400ms var(--ease); }
.mat-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.mat summary:hover .mat-k { -webkit-text-stroke-color: var(--ink); }
.mat[open] .mat-k { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
.mat[open] .mat-t { color: var(--ink); }
.mat[open] .mat-ico { background: var(--accent); border-color: var(--accent); }
.mat summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.mat-a { margin: 0 0 var(--s-3); padding-left: calc(clamp(118px, 13vw, 200px) + var(--s-2)); padding-right: 56px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.mat[open] .mat-a { animation: mat-in 550ms var(--ease-out) both; }
@keyframes mat-in { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 599px) { .mat summary { grid-template-columns: auto minmax(0, 1fr) 40px; } .mat-a { padding: 0; } }
[data-zoom] .pic img { transform: scale(calc(1.16 - var(--z, 0) * .16)); transform-origin: 50% 60%; will-change: transform; }

/* ---- process: counter + car stay put on the left, steps light up on the right */
.pt { position: relative; overflow: clip; background: radial-gradient(ellipse 50% 40% at 22% 55%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--bg); }
.pt-grid { display: grid; gap: var(--s-6); }
.pt-count { display: flex; align-items: baseline; gap: 10px; margin: var(--s-4) 0 var(--s-2); }
.pt-cur { display: inline-block; font: 900 clamp(4.4rem, 2rem + 7vw, 8.6rem)/.85 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 2px var(--accent); }
.pt-cur.flip { animation: pt-flip 520ms var(--ease-out); }
@keyframes pt-flip { from { opacity: 0; transform: translateY(30%); } }
.pt-of { font: 700 1rem/1 var(--f-display); letter-spacing: .12em; color: var(--muted); }
.pt-car { position: relative; width: min(100%, 540px); }
.pt-car img { display: block; width: 100%; height: auto; transform: translateX(calc((1 - var(--pp, 0)) * 16%)); filter: drop-shadow(0 22px 24px color-mix(in srgb, #000 70%, transparent)); }
.pt-road { position: relative; display: block; height: 2px; margin-top: 4px; background: var(--line); }
.pt-road i { position: absolute; inset: 0; background: var(--accent); transform-origin: 100% 50%; transform: scaleX(var(--pp, 0)); box-shadow: 0 0 14px var(--accent); }
.pt-cta { margin-top: var(--s-4); }
ol.pt-steps { position: relative; margin: 0; padding: 0; list-style: none; }
.pt-steps::before, .pt-steps::after { content: ""; position: absolute; left: 17px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.pt-steps::after { background: var(--accent); transform-origin: 50% 0; transform: scaleY(var(--pp, 0)); box-shadow: 0 0 12px var(--accent); }
.pt-step { position: relative; z-index: 1; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s-3); padding-block: var(--s-4); opacity: .3; transition: opacity 500ms var(--ease); }
.pt-step.is-done { opacity: .6; }
.pt-step.is-on { opacity: 1; }
.pt-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); font: 700 11px/1 var(--f-display); letter-spacing: .06em; color: var(--muted);
  transition: background-color 400ms var(--ease), color 400ms var(--ease), border-color 400ms var(--ease), box-shadow 400ms var(--ease); }
.pt-step.is-done .pt-n { border-color: var(--accent); color: var(--ink); }
.pt-step.is-on .pt-n { background: var(--accent); border-color: var(--accent); color: var(--ink); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); }
.pt-t { margin: 4px 0 8px; font: 800 clamp(1.25rem, 1rem + 1.3vw, 2rem)/1.1 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; }
.pt-p { margin: 0; color: var(--muted); font-size: 15px; }
.pt-step.is-on .pt-t { transform: none; }
@media (min-width: 900px) {
  .pt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-12); align-items: start; }
  .pt-stage { position: sticky; top: calc(var(--header-h-condensed) + 6vh); }
  .pt-step { padding-block: 11vh; }
  .pt-step:first-child { padding-top: 6vh; }
  .pt-step:last-child { padding-bottom: 22vh; }
}
@media (max-width: 899px) { .pt-car { width: min(100%, 420px); } .pt-count { margin-top: var(--s-3); } }
@media (prefers-reduced-motion: reduce) { .pt { --pp: 1; } .pt-step { opacity: 1; } .pt-car img { transform: none; } }

/* Montserrat (variable) builds letters from overlapping shapes, so outlined text shows stray inner lines.
   Every outline becomes a solid fill instead. */
.step-num, .rule-num { -webkit-text-stroke: 0; color: color-mix(in srgb, var(--muted) 45%, transparent); }
.paper .step-num { color: color-mix(in srgb, var(--bg) 25%, transparent); }
.proof-num { -webkit-text-stroke: 0; color: color-mix(in srgb, var(--ink) 9%, transparent); }
.hx-word { -webkit-text-stroke: 0; color: color-mix(in srgb, var(--ink) 4%, transparent); }
.spin-word { -webkit-text-stroke: 0; color: color-mix(in srgb, var(--bg) 5%, transparent); }
.fx-n { -webkit-text-stroke: 0; font-weight: 900; color: color-mix(in srgb, var(--ink) 14%, transparent); }
.dv-out { -webkit-text-stroke: 0; color: var(--accent); }
.pt-cur { -webkit-text-stroke: 0; color: var(--accent); }

/* materials tabs: big keyword on top, small title under it, icon on the right */
.mat summary { grid-template-columns: minmax(0, 1fr) 44px; grid-template-rows: auto auto; row-gap: 6px; }
.mat-k { grid-column: 1; text-transform: none; -webkit-text-stroke: 0; color: color-mix(in srgb, var(--ink) 22%, transparent); font-size: clamp(1.8rem, 1.1rem + 2vw, 2.8rem); transition: color 400ms var(--ease); }
.mat-t { grid-column: 1; grid-row: 2; }
.mat-ico { grid-column: 2; grid-row: 1 / span 2; }
.mat summary:hover .mat-k { color: color-mix(in srgb, var(--ink) 55%, transparent); }
.mat[open] .mat-k { color: var(--accent); }
.mat-a { padding: 0 56px 0 0; margin-top: -6px; }
@media (max-width: 599px) { .mat summary { grid-template-columns: minmax(0, 1fr) 40px; } .mat-a { padding-right: 0; } }

/* hero: the headline never runs under the car */
.hx-h1 { font-size: clamp(2.05rem, .6rem + 4.4vw, 5rem); }
.hx-copy { position: relative; z-index: 2; }
@media (min-width: 900px) { .hx-car { margin-left: 2%; } }

/* ================================================================== the three scroll-video sections on black
   Frames are transparent cut-outs (car + a faint floor reflection), so the page colour shows through. */
.spin, .dv, .st { --bgv: #050505; --bgs: #050505; background: radial-gradient(ellipse 60% 45% at 50% 62%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%), #050505; color: var(--ink); }
/* 360° */
.spin .h2, .spin-deg { color: var(--ink); }
.spin-canvas { mix-blend-mode: normal; -webkit-mask-image: none; mask-image: none; }
.spin-word { color: color-mix(in srgb, var(--ink) 4%, transparent); }
.spin-notes li.is-active { border-color: color-mix(in srgb, var(--ink) 18%, transparent); }
.spin-bar { background: var(--line); }
.spin-bar i { background: var(--accent); }
/* drive-in */
.dv-solid, .dv-h, .dv-specs b, .dv-info .link-arrow { color: var(--ink); }
.dv-info p { color: var(--muted); }
.dv-specs li > span { color: var(--muted); }
.dv .btn-line { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.dv .btn-line:hover { box-shadow: inset 24em 0 0 0 var(--ink); color: var(--bg); border-color: var(--ink); }
.dv-bar { background: var(--line); }
@media (max-width: 799px), (max-aspect-ratio: 6/5) { .dv { background: radial-gradient(ellipse 90% 30% at 50% 52%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 75%), #050505; } }
/* stripes */
.st-h, .st-steps b, .st-actions .link-arrow { color: var(--ink); }
.st-steps p { color: var(--muted); }
ol.st-steps, .st-steps li { border-color: var(--line); }
.st-bar { background: var(--line); }
.st-canvas { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 799px), (max-aspect-ratio: 6/5) { .st { background: radial-gradient(ellipse 90% 30% at 50% 50%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 75%), #050505; } }
@media (max-width: 899px) { .spin-canvas { width: 122%; } .spin-stage { margin-block: 0; } }
/* stripes come in from above the frame: fade the clip's top edge so they appear out of the dark */
.st-canvas { -webkit-mask-image: linear-gradient(transparent, #000 16%); mask-image: linear-gradient(transparent, #000 16%); }
@media (max-width: 899px) { .spin-canvas { width: 110%; } }

/* ================================================================== RECENT WORK (home): pinned horizontal gallery
   Phones and reduced motion: a swipeable row. Desktop: main.js adds .is-pin, the section grows by the
   track's overflow and vertical scrolling slides the cards sideways, with a little inertia and lean. */
.wk { position: relative; padding-block: var(--section-y); overflow-x: clip; background: var(--bg); }
.wk-sticky { position: relative; }
.wk-word {
  position: absolute; left: 0; top: 56%; z-index: 0; pointer-events: none; white-space: nowrap;
  font: 900 clamp(8rem, 26vw, 26rem)/.8 var(--f-display); letter-spacing: -.05em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 3.5%, transparent); transform: translate3d(calc(var(--wx, 0) * 1px), -50%, 0);
}
.wk-head { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-2); }
.wk-head .h2 { margin: 0; }
.wk-meta { display: flex; align-items: flex-end; gap: var(--s-4); }
.wk-count { display: flex; align-items: baseline; gap: 10px; margin: 0; font: 800 clamp(2.6rem, 1.8rem + 2.4vw, 4rem)/.9 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.wk-cur { display: inline-block; color: var(--accent); }
.wk-cur.flip { animation: wk-flip 520ms var(--ease-out); }
@keyframes wk-flip { from { transform: translateY(45%); opacity: 0; } }
.wk-of { font-size: .34em; font-weight: 600; letter-spacing: .14em; color: var(--muted); }
.wk-view {
  --pad: max(var(--gutter), calc((100% - var(--max)) / 2));
  position: relative; z-index: 1; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: var(--pad); scroll-padding-inline: var(--pad);
}
.wk-view::-webkit-scrollbar { display: none; }
ul.wk-track { display: flex; gap: clamp(16px, 2.2vw, 36px); width: max-content; margin: 0; padding: var(--s-8) 0 calc(var(--s-4) + 4vh); }
.wk-card { --oy: 0px; flex: none; width: clamp(240px, 70vw, 330px); scroll-snap-align: start; translate: 0 var(--oy); opacity: calc(1 - min(var(--ad, 0), 1) * .5); }
.wk-card:nth-child(even) { --oy: 4vh; }
.wk-card > a { position: relative; display: block; color: var(--ink); text-decoration: none; }
.wk-media { position: relative; display: block; overflow: hidden; aspect-ratio: 4/5; background: color-mix(in srgb, var(--ink) 4%, var(--bg)); }
.wk-media .pic { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; scale: 1.22; translate: calc(var(--d, 0) * -8%) 0; transition: scale 900ms var(--ease-out); }
.wk-go {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--s-3);
  background: linear-gradient(to top, color-mix(in srgb, var(--accent) 90%, transparent), transparent 62%); opacity: 0; transition: opacity 450ms var(--ease);
}
.wk-go > span { display: inline-flex; align-items: center; gap: 12px; font: 700 12px/1 var(--f-display); letter-spacing: .2em; text-transform: uppercase; translate: 0 14px; transition: translate 500ms var(--ease-out); }
.wk-go > span::after, .wk-all-go::after, .wk-hint::after, .ct-go {
  content: ""; width: 18px; height: 12px; background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
}
.wk-n {
  position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; transform: translate(-.04em, -60%);
  font: 900 clamp(3.2rem, 2.2rem + 3vw, 5.4rem)/1 var(--f-display); letter-spacing: -.06em; color: var(--ink); text-shadow: 0 8px 28px rgb(0 0 0 / .55);
}
.wk-cap { position: relative; display: grid; gap: 6px; margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }
.wk-cap::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-out); }
.wk-svc { font: 600 10px/1.3 var(--f-display); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.wk-car { font: 800 clamp(1.1rem, .95rem + .6vw, 1.45rem)/1.1 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; }
@media (hover: hover) {
  .wk-card > a:hover .pic { scale: 1.3; }
  .wk-card > a:hover .wk-go, .wk-card > a:focus-visible .wk-go { opacity: 1; }
  .wk-card > a:hover .wk-go > span { translate: 0 0; }
  .wk-card > a:hover .wk-cap::before { transform: scaleX(1); }
}
/* last card: everything */
.wk-all-in { position: relative; display: flex; flex-direction: column; aspect-ratio: 4/5; padding: var(--s-4); overflow: hidden; background: var(--accent); color: var(--ink); }
.wk-all-in::before { content: ""; position: absolute; right: -35%; bottom: -35%; width: 95%; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--bg) 16%, transparent); transition: transform 800ms var(--ease-out); }
.wk-all-n { position: relative; font: 900 clamp(5rem, 3.6rem + 4vw, 8rem)/.85 var(--f-display); letter-spacing: -.06em; }
.wk-all-t { position: relative; margin-top: auto; font: 800 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1 var(--f-display); text-transform: uppercase; }
.wk-all-go { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-top: var(--s-3); border: 1px solid currentColor; border-radius: 50%; transition: background-color 400ms var(--ease), color 400ms var(--ease), transform 500ms var(--ease-out); }
.wk-all-go::after { width: 22px; height: 14px; }
@media (hover: hover) { .wk-all > a:hover .wk-all-in::before { transform: scale(1.6); } .wk-all > a:hover .wk-all-go { background: var(--ink); color: var(--accent); transform: rotate(-45deg); } }
.wk-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--s-3); }
.wk-bar { flex: 1; height: 2px; background: var(--line); overflow: hidden; }
.wk-bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--wp, .08)); }
.wk-hint { display: inline-flex; align-items: center; gap: 10px; font: 600 10px/1 var(--f-display); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.wk-hint::after { animation: wk-nudge 1.6s var(--ease) infinite; }
@keyframes wk-nudge { 50% { transform: translateX(6px); } }
/* pinned (desktop) */
.wk.is-pin { height: var(--wk-h, 300vh); padding-block: 0; }
.wk.is-pin .wk-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 32px; }
.wk.is-pin .wk-view { overflow: visible; scroll-snap-type: none; }
.wk.is-pin .wk-track { padding-block: var(--s-6) calc(var(--s-2) + 4vh); transform: translate3d(calc(var(--tx, 0) * -1px), 0, 0) skewX(calc(var(--sk, 0) * 1deg)); will-change: transform; }
.wk.is-pin .wk-card { width: max(230px, min(22vw, calc((100svh - 400px) * .8))); }
@media (max-width: 599px) { .wk-meta .btn { display: none; } }
@media (prefers-reduced-motion: reduce) { .wk-media .pic { translate: none; } .wk-card { opacity: 1; } .wk-hint::after { animation: none; } }

/* ================================================================== WORK page: hero with stat tiles + filter panel */
.wh, .ab-hero, .ct-hero { position: relative; overflow: clip; isolation: isolate; padding-block: calc(var(--header-h) + var(--s-8)) var(--s-8); border-bottom: 1px solid var(--line); }
.wh-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.wh-bg .pic { width: 100%; height: 100%; aspect-ratio: auto; opacity: .42; translate: 0 calc(var(--py, 0) * .35px); animation: wh-zoom 2.6s var(--ease-out) both; }
@keyframes wh-zoom { from { scale: 1.2; opacity: 0; } }
.wh::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--bg) 22%, color-mix(in srgb, var(--bg) 55%, transparent) 62%, color-mix(in srgb, var(--bg) 25%, transparent)), linear-gradient(to top, var(--bg) 4%, transparent 45%); }
.wh-word, .ab-word, .ct-word {
  position: absolute; z-index: -1; pointer-events: none; white-space: nowrap; text-transform: uppercase;
  font: 900 clamp(6rem, 22vw, 22rem)/.8 var(--f-display); letter-spacing: -.05em; color: color-mix(in srgb, var(--ink) 5%, transparent);
  translate: calc(var(--py, 0) * -.5px) 0;
}
.wh-word { right: -2vw; bottom: -.1em; }
.wh-grid, .ct-grid { display: grid; gap: var(--s-6); align-items: end; }
@media (min-width: 1000px) { .wh-grid, .ct-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s-12); } }
.wh-copy .lede, .ab-copy .lede, .ct-copy .lede { margin-block: var(--s-3) 0; color: color-mix(in srgb, var(--ink) 78%, transparent); }
.wh-stats { display: grid; margin: 0; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.wh-stat { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); overflow: hidden; transition: background-color 400ms var(--ease); }
.wh-stat + .wh-stat { border-top: 1px solid var(--line); }
.wh-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform 500ms var(--ease-out); }
.wh-stat::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); }
.wh-stat.is-in::after { animation: wh-scan 1500ms var(--ease-out) calc(var(--d, 0ms) + 150ms) both; }
@keyframes wh-scan { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 50.1% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
.wh-ico, .ab-ico, .ct-ico { position: relative; display: grid; place-items: center; flex: none; width: 46px; height: 46px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); color: var(--ink); transition: background-color 400ms var(--ease), border-color 400ms var(--ease); }
.wh-ico svg, .ab-ico svg, .ct-ico svg, .ab-card-ico svg, .ab-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.wh-l { font: 600 11px/1.35 var(--f-display); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.wh-stat .stat-n { font: 800 clamp(2.4rem, 1.6rem + 2.6vw, 3.8rem)/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .wh-stat:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); } .wh-stat:hover::before { transform: scaleY(1); } .wh-stat:hover .wh-ico { background: var(--accent); border-color: var(--accent); } }
@media (max-width: 599px) { .wh-stat { gap: var(--s-2); padding: var(--s-2) var(--s-3); } .wh-ico { width: 40px; height: 40px; } }

.fl { padding-block: var(--s-2); }
.fl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--s-2); max-height: 60px; margin-bottom: var(--s-2); overflow: hidden; transition: max-height 400ms var(--ease-out), opacity 300ms var(--ease), margin 400ms var(--ease-out); }
.fl-head .eyebrow { margin: 0; }
.fl-count { margin: 0; font: 600 11px/1 var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.fl-count b { display: inline-block; min-width: 2ch; font-size: 15px; font-weight: 800; letter-spacing: 0; text-align: center; color: var(--accent); font-variant-numeric: tabular-nums; }
ul.fl-grid {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(172px, 46vw); gap: 0; margin: 0; padding: 0;
  overflow-x: auto; border: 1px solid var(--line); scroll-snap-type: x proximity; -webkit-mask-image: none; mask-image: none;
}
ul.fl-grid li { display: flex; scroll-snap-align: start; }
ul.fl-grid li + li { border-left: 1px solid var(--line); }
ul.fl-grid::after { content: ""; position: absolute; left: 0; bottom: 0; width: var(--iw, 0); height: 3px; background: var(--accent); transform: translateX(var(--ix, 0)); transition: transform 550ms var(--ease-out), width 550ms var(--ease-out); pointer-events: none; }
.chip.fl-chip {
  position: relative; display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: start; gap: 10px 12px;
  width: 100%; min-height: 104px; margin: 0; padding: 14px 16px 18px; border: 0; border-radius: 0; background: transparent; color: var(--muted);
  font: 700 13px/1.25 var(--f-display); letter-spacing: .01em; text-transform: none; text-align: left; white-space: normal; cursor: pointer;
  transition: background-color 350ms var(--ease), color 350ms var(--ease), min-height 400ms var(--ease-out), padding 400ms var(--ease-out);
}
.fl-i { font: 800 11px/1 var(--f-display); letter-spacing: .2em; color: color-mix(in srgb, var(--ink) 32%, transparent); transition: color 350ms var(--ease); }
.fl-t { grid-column: 1 / -1; grid-row: 2; align-self: end; }
.fl-chip .chip-n { grid-column: 2; grid-row: 1; min-width: 26px; height: 22px; border-color: var(--line); color: var(--ink); font: 700 11px/1 var(--f-display); transition: background-color 350ms var(--ease), border-color 350ms var(--ease); }
.chip.fl-chip:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.chip.fl-chip[aria-pressed="true"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.fl-chip[aria-pressed="true"] .fl-i { color: var(--accent); }
.fl-chip[aria-pressed="true"] .chip-n { background: var(--accent); border-color: var(--accent); color: var(--ink); }
@media (min-width: 1000px) { ul.fl-grid { grid-auto-columns: minmax(0, 1fr); overflow: visible; } }
/* once the panel sticks, its top (heading, index numbers, counts) slides up under the header and only
   the row of service names stays in view: the sticky offset is negative by --fold (set by main.js), so
   nothing changes size and the page never jumps */
.fl { top: calc(var(--header-h-condensed) - var(--fold, 0px)); }
/* filtering hides cards: keep the browser from re-anchoring the scroll position on a card that moved */
.job-grid { overflow-anchor: none; }
.site-header.is-hidden ~ main .fl { top: calc(0px - var(--fold, 0px)); }

/* ================================================================== ABOUT page */
.ab-hero::before, .ct-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 50% 60% at 80% 42%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%); }
.ab-word { left: -1vw; top: calc(var(--header-h) + 8px); font-size: clamp(5rem, 17vw, 17rem); }
.ab-grid { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 900px) { .ab-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.ab-copy .h1 { max-width: none; font-size: clamp(2rem, .9rem + 3.4vw, 4rem); }
.ab-copy .hero-actions { margin-top: var(--s-4); }
.ab-media { position: relative; margin: 0 4% 4% 0; }
.ab-media::before { content: ""; position: absolute; inset: 9% -4% -4% 12%; z-index: -1; background: var(--accent); translate: 0 calc(var(--py, 0) * -.12px); }
.ab-media-in { position: relative; display: block; overflow: hidden; }
.ab-media-in .pic { scale: 1.12; translate: 0 calc(var(--py, 0) * .07px); }
.ab-media-tag { position: absolute; left: var(--s-3); bottom: var(--s-3); padding: 9px 12px; background: var(--bg); font: 700 10px/1 var(--f-display); letter-spacing: .26em; }
.js .ab-media::before { clip-path: inset(0 0 100% 0); transition: clip-path 1200ms var(--ease-out) 450ms; }
.js .ab-media-in { clip-path: inset(100% 0 0 0); transition: clip-path 1300ms var(--ease-out) 100ms; }
.js .ab-media-in .pic { scale: 1.4; transition: scale 1900ms var(--ease-out) 100ms; }
.js .ab-media.is-in::before { clip-path: inset(0); }
.js .ab-media.is-in .ab-media-in { clip-path: inset(0); }
.js .ab-media.is-in .ab-media-in .pic { scale: 1.12; }
.ab-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-8); border-top: 1px solid var(--line); }
.ab-facts li { position: relative; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-2) var(--s-3) 0; }
.ab-facts li::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease-out) calc(var(--d, 0ms) + 150ms); }
.ab-facts li.is-in::before, html:not(.js) .ab-facts li::before { transform: scaleX(1); }
.ab-facts li:nth-child(even) { padding-left: var(--s-2); border-left: 1px solid var(--line); }
.ab-facts li:nth-child(n+3) { border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .ab-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ab-facts li + li { padding-left: var(--s-3); border-left: 1px solid var(--line); }
  .ab-facts li:nth-child(n+3) { border-top: 0; }
}
.ab-fact { display: grid; gap: 2px; min-width: 0; }
.ab-fact b { font: 800 clamp(1rem, .9rem + .5vw, 1.35rem)/1.1 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; }
.ab-fact small { font-size: 12px; line-height: 1.35; color: var(--muted); }
@media (max-width: 599px) { .ab-ico { width: 38px; height: 38px; } .ab-facts li { gap: 12px; } }

.ab-say { padding-block: var(--section-y) calc(var(--section-y) * .35); }
.ab-say-t { max-width: 30ch; font: 700 clamp(1.6rem, .9rem + 2.7vw, 3.3rem)/1.18 var(--f-display); letter-spacing: -.025em; }
.js .ab-say .w { color: color-mix(in srgb, var(--ink) 15%, transparent); transition: color 450ms var(--ease); }
.js .ab-say .w.is-lit { color: var(--ink); }
.ab-say .w-em, .js .ab-say .w-em.is-lit { color: var(--accent); }
.js .ab-say .w-em:not(.is-lit) { color: color-mix(in srgb, var(--accent) 20%, transparent); }

.ab-who { padding-bottom: 0; overflow: clip; }
.ab-who-grid { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .ab-who-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-12); align-items: end; } }
.ab-who-text p { font-size: var(--fs-lede); line-height: 1.65; color: color-mix(in srgb, var(--ink) 80%, transparent); }
.ab-mq { margin-top: var(--s-8); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
ul.ab-mq-track { display: flex; align-items: flex-start; gap: var(--s-2); width: max-content; margin: 0; padding: 0 var(--s-2) var(--s-4) 0; animation: ab-mq 70s linear infinite; }
.ab-mq:hover .ab-mq-track { animation-play-state: paused; }
.ab-mq-track li { flex: none; height: clamp(220px, 26vw, 360px); overflow: hidden; }
.ab-mq-track li:nth-child(even) { margin-top: var(--s-4); }
.ab-mq-track .pic { width: auto; height: 100%; transition: scale 900ms var(--ease-out); }
.ab-mq-track li:hover .pic { scale: 1.06; }
@keyframes ab-mq { to { transform: translateX(-50%); } }

.ab-pr-head { margin-bottom: var(--s-6); }
.ab-pr-grid { display: grid; gap: var(--s-2); }
@media (min-width: 900px) { .ab-pr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); } }
.ab-card { perspective: 900px; }
.ab-card-in {
  position: relative; display: flex; flex-direction: column; height: 100%; min-height: clamp(290px, 25vw, 360px); padding: var(--s-4); overflow: hidden;
  border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--ink) 6%, transparent), transparent 55%), var(--bg);
  transform: rotateX(calc(var(--ty, 0) * -5deg)) rotateY(calc(var(--tx, 0) * 5deg)); transition: transform 600ms var(--ease-out), border-color 400ms var(--ease);
}
.ab-card-in::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at calc(50% + var(--tx, 0) * 50%) calc(50% + var(--ty, 0) * 50%), color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%); opacity: 0; transition: opacity 400ms var(--ease); pointer-events: none; }
.ab-card-in::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 1000ms var(--ease-out) calc(var(--d, 0ms) + 300ms); }
.ab-card.is-in .ab-card-in::after, html:not(.js) .ab-card-in::after { transform: scaleX(1); }
.ab-card-n { position: absolute; top: -.16em; right: -.02em; font: 900 clamp(7rem, 5rem + 6vw, 11rem)/1 var(--f-display); letter-spacing: -.06em; color: color-mix(in srgb, var(--ink) 6%, transparent); pointer-events: none; transition: color 500ms var(--ease), transform 700ms var(--ease-out); }
.ab-card-ico { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); transition: background-color 400ms var(--ease), border-color 400ms var(--ease); }
.ab-card-ico svg { width: 22px; height: 22px; }
.ab-card-t { position: relative; margin-top: auto; padding-top: var(--s-6); font: 800 clamp(1.25rem, 1.05rem + .8vw, 1.7rem)/1.1 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; }
.ab-card-in p { position: relative; margin-top: var(--s-2); font-size: .95rem; line-height: 1.65; color: var(--muted); }
@media (hover: hover) {
  .ab-card-in:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
  .ab-card-in:hover::before { opacity: 1; }
  .ab-card-in:hover .ab-card-n { color: color-mix(in srgb, var(--accent) 32%, transparent); transform: translateY(10px); }
  .ab-card-in:hover .ab-card-ico { background: var(--accent); border-color: var(--accent); }
}

.ab-no { background: #050505; border-block: 1px solid var(--line); }
.ab-no-grid { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .ab-no-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-12); } .ab-no-head { position: sticky; top: calc(var(--header-h-condensed) + var(--s-4)); align-self: start; } }
.ab-no-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-3); align-items: start; padding-block: var(--s-4); border-top: 1px solid var(--line); }
.ab-no-list li:last-child { border-bottom: 1px solid var(--line); }
.ab-x { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 50%; color: var(--accent); }
.ab-x svg { width: 22px; height: 22px; stroke-width: 1.8; }
.js .ab-x svg { opacity: 0; transform: rotate(-90deg) scale(.3); transition: transform 700ms var(--ease-out) calc(var(--d, 0ms) + 250ms), opacity 400ms var(--ease) calc(var(--d, 0ms) + 250ms); }
.js .ab-no-list li.is-in .ab-x svg { opacity: 1; transform: none; }
.ab-no-body { display: block; min-width: 0; padding-top: 6px; }
.ab-no-t {
  font: 800 clamp(1.35rem, 1rem + 1.7vw, 2.4rem)/1.12 var(--f-display); letter-spacing: -.02em; text-transform: uppercase; text-decoration: none;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 55% / 100% 4px;
}
.js .ab-no-t { background-size: 0% 4px; transition: background-size 1000ms var(--ease-out) calc(var(--d, 0ms) + 500ms); }
.js .ab-no-list li.is-in .ab-no-t { background-size: 100% 4px; }
.ab-no-s { display: block; margin-top: 10px; color: var(--ink); }

.ab-visit-card { position: relative; display: grid; align-items: end; min-height: clamp(400px, 42vw, 560px); padding: clamp(24px, 4vw, 56px); overflow: hidden; isolation: isolate; border: 1px solid var(--line); }
.ab-visit-bg { position: absolute; inset: 0; z-index: -2; }
.ab-visit-bg .pic { width: 100%; height: 100%; aspect-ratio: auto; scale: 1.12; transition: scale 1800ms var(--ease-out); }
.ab-visit-card.is-in .ab-visit-bg .pic { scale: 1; }
.ab-visit-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--bg) 18%, color-mix(in srgb, var(--bg) 35%, transparent) 78%), linear-gradient(to top, var(--bg), transparent 55%); }
.ab-visit-copy { max-width: 46ch; }
.ab-visit-copy .h2 { margin-bottom: var(--s-2); }
.ab-visit-copy p:not(.eyebrow) { color: color-mix(in srgb, var(--ink) 82%, transparent); }
.ab-visit-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.ab-visit-pin { display: inline-flex; align-items: center; gap: 12px; font: 700 11px/1 var(--f-display); letter-spacing: .26em; }
.ab-visit-pin { position: absolute; top: clamp(20px, 3vw, 40px); right: clamp(20px, 3vw, 40px); margin: 0; padding: 10px 14px; background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ab-visit-pin i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.ab-visit-pin i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: ping 1.8s var(--ease-out) infinite; }
@keyframes ping { from { transform: scale(1); opacity: .7; } to { transform: scale(3.4); opacity: 0; } }

/* ================================================================== CONTACT page */
.ct-word { left: -1vw; bottom: -.12em; font-size: clamp(5rem, 16vw, 16rem); }
.ct-copy .hero-actions { margin-top: var(--s-4); }
.ct-cards { display: grid; gap: var(--s-2); margin: 0; }
.ct-card, .ct-card > a { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: var(--s-3); row-gap: 4px; align-items: center; }
.ct-card { position: relative; padding: var(--s-3); border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 60%, transparent); transition: border-color 400ms var(--ease), background-color 400ms var(--ease); }
.ct-card > a { grid-column: 1 / -1; margin: calc(var(--s-3) * -1); padding: var(--s-3) calc(var(--s-3) + 40px) var(--s-3) var(--s-3); color: inherit; text-decoration: none; }
.ct-card .ct-ico { grid-row: 1 / span 3; width: 52px; height: 52px; }
.ct-k { font: 600 10px/1.2 var(--f-display); letter-spacing: .26em; color: var(--muted); }
.ct-v { font: 800 clamp(1.05rem, .95rem + .5vw, 1.35rem)/1.2 var(--f-display); letter-spacing: -.01em; }
.ct-card small { font-size: 12px; color: var(--muted); }
.ct-phone { border-color: var(--accent); background: var(--accent); }
.ct-phone .ct-ico { border-color: color-mix(in srgb, var(--ink) 65%, transparent); }
.ct-phone .ct-k { color: color-mix(in srgb, var(--ink) 85%, transparent); }
.ct-phone .ct-v { font-size: clamp(1.35rem, 1.05rem + 1.2vw, 2rem); }
.ct-phone svg { animation: ct-ring 2.4s var(--ease) infinite; transform-origin: 50% 50%; }
@keyframes ct-ring { 0%, 18%, 100% { transform: none; } 3%, 9%, 15% { transform: rotate(-12deg); } 6%, 12% { transform: rotate(12deg); } }
.ct-pulse { position: absolute; inset: -1px; border: 1px solid var(--ink); animation: ct-pulse 2.4s var(--ease-out) infinite; pointer-events: none; }
@keyframes ct-pulse { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
.ct-go { position: absolute; right: var(--s-3); top: 50%; width: 22px; height: 14px; translate: 0 -50%; transition: translate 400ms var(--ease-out); }
@media (hover: hover) {
  .ct-phone:hover { background: color-mix(in srgb, var(--accent) 86%, var(--bg)); }
  .ct-phone:hover .ct-go { translate: 8px -50%; }
  .ct-card:not(.ct-phone):hover { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
  .ct-card:not(.ct-phone):hover .ct-ico { background: var(--accent); border-color: var(--accent); }
}
.ct-main-grid { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) { .ct-main-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: var(--s-8); align-items: start; } .ct-aside { position: sticky; top: calc(var(--header-h-condensed) + var(--s-3)); } }
.ct-form { position: relative; padding: clamp(20px, 4vw, 48px); border: 1px solid var(--line); background: linear-gradient(170deg, color-mix(in srgb, var(--ink) 5%, transparent), transparent 45%); }
.ct-form::before { content: ""; position: absolute; left: -1px; top: -1px; width: 72px; height: 3px; background: var(--accent); }
.q-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-6); }
.q-top .quote-progress { margin: 0; font: 900 clamp(2rem, 1.6rem + 1.4vw, 2.8rem)/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; text-transform: none; color: var(--ink); }
.q-dots { display: flex; justify-content: space-between; gap: var(--s-1); margin: 0; }
.q-dots li { display: flex; align-items: center; gap: 8px; font: 600 10px/1.2 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); transition: color 400ms var(--ease); }
.q-dots li span { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; font-size: 10px; letter-spacing: 0; transition: background-color 400ms var(--ease), border-color 400ms var(--ease), color 400ms var(--ease); }
.q-dots li.is-on { color: var(--ink); }
.q-dots li.is-on span { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.q-dots li.is-done span { border-color: var(--accent); color: var(--accent); }
.q-bar { grid-column: 1 / -1; height: 2px; background: var(--line); overflow: hidden; }
.q-bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--qp, .333)); transition: transform 700ms var(--ease-out); }
@media (max-width: 699px) { .q-top { grid-template-columns: minmax(0, 1fr); } }
.js .ct-form .q-step.is-active { animation: q-in 560ms var(--ease-out) both; }
.js .ct-form[data-dir="b"] .q-step.is-active { animation-name: q-in-b; }
@keyframes q-in { from { opacity: 0; transform: translateX(28px); } }
@keyframes q-in-b { from { opacity: 0; transform: translateX(-28px); } }
.ct-next { padding: var(--s-4); border: 1px solid var(--line); }
.ct-next .eyebrow { margin-bottom: var(--s-1); }
.ct-steps { position: relative; margin: 0; }
.ct-steps::before { content: ""; position: absolute; left: 19px; top: 34px; bottom: 34px; width: 1px; background: linear-gradient(var(--accent), var(--line)); }
.ct-steps li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-2); padding-block: var(--s-2); }
.ct-sn { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 50%; background: var(--bg); font: 800 12px/1 var(--f-display); }
.ct-steps b { display: block; font: 800 1rem/1.25 var(--f-display); letter-spacing: .01em; text-transform: uppercase; }
.ct-steps small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.js .ct-steps li.is-in .ct-sn { animation: ct-pop 700ms var(--ease-out) calc(var(--d, 0ms) + 150ms) both; }
@keyframes ct-pop { from { transform: scale(.3); background: var(--accent); } }
.ct-map { margin-top: var(--s-2); }

@media (prefers-reduced-motion: reduce) {
  .wh-bg .pic, .ab-mq-track, .ct-phone svg, .ct-pulse, .ab-visit-pin i::after { animation: none; }
  .ab-mq { overflow-x: auto; }
}
@media (max-width: 699px) { .ab-visit-pin { position: static; order: -1; justify-self: start; margin-bottom: var(--s-6); } }
/* contact: the click-to-load map placeholder drawn as a dark street grid with a pulsing pin (the real map replaces it on click) */
.ct-map .ph-map {
  border-color: var(--line);
  background:
    radial-gradient(circle at 56% 46%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 30%),
    linear-gradient(72deg, transparent 49.6%, color-mix(in srgb, var(--ink) 14%, transparent) 50%, transparent 50.4%),
    linear-gradient(-16deg, transparent 49.7%, color-mix(in srgb, var(--ink) 10%, transparent) 50%, transparent 50.3%),
    linear-gradient(90deg, #050505 0 17%, color-mix(in srgb, var(--ink) 12%, transparent) 17% calc(17% + 1px), transparent 0),
    repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--ink) 5%, transparent) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, color-mix(in srgb, var(--ink) 5%, transparent) 31px 32px),
    #0d0d0d;
}
.ct-map .ph-map::after { content: ""; position: absolute; left: 56%; top: 46%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 3px solid var(--ink); border-radius: 50%; background: var(--accent); animation: ct-map-ping 2s var(--ease-out) infinite; }
@keyframes ct-map-ping { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); } to { box-shadow: 0 0 0 30px transparent; } }
@media (prefers-reduced-motion: reduce) { .ct-map .ph-map::after { animation: none; } }
@media (max-width: 699px) { .q-dots li:not(.is-on) { gap: 0; font-size: 0; letter-spacing: 0; } }
/* the arrow is drawn from one right-pointing mask: flip it for Back */
.q-nav .btn[data-back]::after { scale: -1 1; }
/* quote form: where photos go while uploads are off (Web3Forms free plan) */
.q-note { margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3); border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--ink) 4%, transparent); font-size: var(--fs-small); line-height: 1.6; color: color-mix(in srgb, var(--ink) 82%, transparent); }
/* Instagram / Facebook (footer on every page, contact card) */
ul.social { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: var(--s-2) 0; }
.social a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px 8px 10px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 600 11px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; transition: background-color 300ms var(--ease), border-color 300ms var(--ease); }
.social svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.social a:hover, .social a:focus-visible { background: var(--accent); border-color: var(--accent); }
ul.ct-soc { margin: 6px 0 0; }

/* ================================================================== hero: the AUTAPLATE logo as a faint watermark (replaces the outlined word) */
.hx-logo {
  position: absolute; right: -2vw; bottom: 3%; width: min(74vw, 1320px); height: auto; max-width: none;
  opacity: .065; pointer-events: none; user-select: none;
  translate: calc(var(--mx, 0) * 18px) 0; transition: translate 900ms var(--ease-out);
}
@media (max-width: 899px) { .hx-logo { width: 118vw; right: -10vw; bottom: 30%; opacity: .07; } }

/* ================================================================== home: numbers as two crossing tape bands */
.tape { position: relative; height: clamp(150px, 15vw, 210px); overflow: hidden; background: var(--bg); border-block: 1px solid var(--line); }
.tape-band { position: absolute; left: -5%; right: -5%; top: 50%; overflow: hidden; }
.tape-a { z-index: 2; background: var(--accent); transform: translateY(-50%) rotate(-2.2deg); box-shadow: 0 18px 40px rgb(0 0 0 / .45); }
.tape-b { z-index: 1; background: #141414; border-block: 1px solid var(--line); transform: translateY(-50%) rotate(2.6deg); }
.tape-run { display: flex; width: max-content; animation: tape-l 38s linear infinite; }
.tape-b .tape-run { animation: tape-r 52s linear infinite; }
.tape:hover .tape-run { animation-play-state: paused; }
ul.tape-set { display: flex; margin: 0; padding: 0; }
.tape-set li { display: flex; align-items: center; gap: 14px; padding: 18px 0 18px 0; white-space: nowrap; }
.tape-set b { font: 900 clamp(1.8rem, 1.2rem + 2vw, 3.1rem)/1 var(--f-display); letter-spacing: -.03em; text-transform: uppercase; color: var(--ink); }
.tape-set span { font: 700 11px/1.25 var(--f-display); letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 82%, transparent); max-width: 11ch; white-space: normal; }
.tape-b .tape-run > span { padding: 12px 0; font: 800 clamp(1rem, .8rem + .8vw, 1.5rem)/1 var(--f-display); letter-spacing: .08em; color: color-mix(in srgb, var(--ink) 30%, transparent); white-space: nowrap; }
/* separator: two slanted racing bars, like the hero stripes */
.tape-sep { position: relative; display: inline-block; flex: none; width: 34px; height: 30px; margin: 0 clamp(22px, 3vw, 44px); }
.tape-sep::before, .tape-sep::after { content: ""; position: absolute; top: 0; bottom: 0; width: 6px; background: var(--ink); transform: skewX(-20deg); }
.tape-sep::before { left: 8px; } .tape-sep::after { left: 20px; width: 3px; opacity: .6; }
.tape-b .tape-sep { height: 20px; } .tape-b .tape-sep::before, .tape-b .tape-sep::after { background: var(--accent); }
@keyframes tape-l { to { transform: translateX(-50%); } }
@keyframes tape-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .tape-run { animation: none !important; } }

/* ================================================================== about: drawn symbols for the fact strip */
.ab-sym { position: relative; flex: none; display: grid; place-items: center; width: 58px; height: 58px; }
/* Klaipėda: a crosshair with the coordinates */
.ab-geo { border: 1px solid var(--line); border-radius: 50%; }
.ab-geo::before, .ab-geo::after { content: ""; position: absolute; background: color-mix(in srgb, var(--accent) 70%, transparent); }
.ab-geo::before { left: 50%; top: -6px; bottom: -6px; width: 1px; }
.ab-geo::after { top: 50%; left: -6px; right: -6px; height: 1px; }
.ab-geo i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); animation: ab-blip 2.4s var(--ease-out) infinite; }
.ab-geo span { position: absolute; left: calc(100% + 6px); top: -4px; font: 700 8px/1.35 var(--f-display); letter-spacing: .08em; color: var(--muted); display: none; }
@keyframes ab-blip { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
/* ORAFOL: a fanned vinyl swatch deck */
.ab-swatch i { position: absolute; left: 14px; bottom: 8px; width: 16px; height: 42px; border-radius: 3px; transform-origin: 50% 90%; box-shadow: 0 2px 6px rgb(0 0 0 / .5); transition: transform 700ms var(--ease-out); }
.ab-swatch i:nth-child(1) { background: #2b2b2b; border: 1px solid var(--line); transform: rotate(-24deg); }
.ab-swatch i:nth-child(2) { background: var(--paper); transform: rotate(0deg); }
.ab-swatch i:nth-child(3) { background: var(--accent); transform: rotate(24deg); }
.ab-swatch i::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 5px; height: 4px; border-radius: 50%; background: rgb(0 0 0 / .35); }
.js li:not(.is-in) > .ab-swatch i { transform: rotate(0); }
li:hover > .ab-swatch i:nth-child(1) { transform: rotate(-34deg); } li:hover > .ab-swatch i:nth-child(3) { transform: rotate(34deg); }
/* written price: a rubber stamp */
.ab-stamp { border: 2px dashed var(--accent); border-radius: 50%; transform: rotate(-14deg); }
.ab-stamp::before { content: ""; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 50%; }
.ab-stamp b { font: 900 22px/1 var(--f-display); color: var(--accent); }
.js li.is-in > .ab-stamp { animation: ab-stamp 700ms cubic-bezier(.3, 1.6, .5, 1) calc(var(--d, 0ms) + 350ms) both; }
@keyframes ab-stamp { from { transform: rotate(-14deg) scale(1.9); opacity: 0; } }
/* jobs: split-flap counter */
.ab-flap { display: flex; gap: 3px; width: auto; }
.ab-flap b { position: relative; display: grid; place-items: center; width: 26px; height: 40px; border-radius: 3px; background: linear-gradient(#202020 50%, #161616 50%); font: 800 24px/1 var(--f-display); color: var(--ink); overflow: hidden; }
.ab-flap b::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgb(0 0 0 / .8); }
.js li.is-in > .ab-flap b { animation: ab-flip 520ms var(--ease-out) both; }
.js li.is-in > .ab-flap b:nth-child(1) { animation-delay: calc(var(--d, 0ms) + 300ms); }
.js li.is-in > .ab-flap b:nth-child(2) { animation-delay: calc(var(--d, 0ms) + 420ms); }
@keyframes ab-flip { 0% { transform: perspective(200px) rotateX(90deg); } 70% { transform: perspective(200px) rotateX(-12deg); } }
@media (max-width: 599px) { .ab-sym { transform: scale(.82); transform-origin: left center; margin-right: -8px; } .ab-stamp { transform: rotate(-14deg) scale(.82); } }
@media (prefers-reduced-motion: reduce) { .ab-geo i, .js li.is-in > .ab-stamp, .js li.is-in > .ab-flap b { animation: none; } }

/* ================================================================== contact: number-plate phone card + bracket tiles */
.ct-side { display: grid; gap: var(--s-2); }
.plate-cap { margin: 0; font: 700 10px/1 var(--f-display); letter-spacing: .3em; color: var(--muted); }
.plate {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: stretch; min-height: 96px;
  border-radius: 10px; background: var(--paper); color: #111; text-decoration: none; padding: 5px;
  box-shadow: inset 0 0 0 3px #111, inset 0 0 0 5px var(--paper), 0 24px 50px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .08);
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
}
.plate-eu { display: grid; align-content: center; justify-items: center; gap: 4px; width: 52px; border-radius: 6px 0 0 6px; background: #1d3fa5; color: #fff; }
.plate-eu svg { width: 26px; height: 26px; fill: #f7d117; }
.plate-eu b { font: 800 15px/1 var(--f-display); letter-spacing: .04em; }
.plate-num { align-self: center; justify-self: center; padding: 0 14px; font: 800 clamp(1.45rem, .9rem + 1.9vw, 2.45rem)/1 var(--f-display); letter-spacing: .05em; white-space: nowrap; }
.plate-go { align-self: center; width: 44px; height: 44px; margin-right: 12px; border-radius: 50%; background: var(--accent); position: relative; transition: transform 400ms var(--ease-out); }
.plate-go::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 12px; background: var(--ink); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; }
.plate::before, .plate::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ddd, #777); }
.plate::before { left: 66px; } .plate::after { right: 64px; display: none; }
@media (hover: hover) { .plate:hover { transform: translateY(-4px) rotate(-1.2deg); box-shadow: inset 0 0 0 3px #111, inset 0 0 0 5px var(--paper), 0 34px 60px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .1); } .plate:hover .plate-go { transform: rotate(-45deg); } }
@media (max-width: 459px) { .plate-num { font-size: 1.25rem; padding: 0 8px; letter-spacing: .02em; } .plate-go { width: 34px; height: 34px; margin-right: 6px; } .plate-eu { width: 40px; } .plate::before { left: 52px; } }
ul.ct-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin: var(--s-1) 0 0; }
.ct-tile {
  --c: var(--accent); position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 176px; padding: 18px;
  background:
    linear-gradient(var(--c), var(--c)) top left / 16px 2px no-repeat, linear-gradient(var(--c), var(--c)) top left / 2px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 16px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 2px 16px no-repeat,
    color-mix(in srgb, var(--ink) 4%, var(--bg));
  transition: background-size 400ms var(--ease-out);
}
@media (hover: hover) { .ct-tile:hover { background-size: 34px 2px, 2px 34px, 34px 2px, 2px 34px, auto; } }
.ct-tile-k { font: 700 9px/1 var(--f-display); letter-spacing: .28em; color: var(--muted); }
.ct-tile b { margin-top: auto; font: 800 1rem/1.2 var(--f-display); letter-spacing: -.005em; }
.ct-tile small { font-size: 12px; color: var(--muted); }
.ct-clock { width: 46px; height: 46px; margin-top: 12px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.ct-clock .ct-ticks { stroke: var(--muted); stroke-width: 1.2; }
.ct-clock .ct-m { stroke: var(--accent); transform-origin: 24px 24px; animation: ct-spin 6s linear infinite; }
.ct-clock .ct-h { transform-origin: 24px 24px; animation: ct-spin 72s linear infinite; }
.ct-clock circle:last-child { fill: var(--accent); stroke: none; }
@keyframes ct-spin { to { transform: rotate(360deg); } }
.ct-geo { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 700 10px/1.35 var(--f-display); letter-spacing: .08em; color: var(--ink); }
.ct-geo i { position: relative; flex: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background:
  linear-gradient(color-mix(in srgb, var(--accent) 70%, transparent), color-mix(in srgb, var(--accent) 70%, transparent)) center / 1px 100% no-repeat,
  linear-gradient(color-mix(in srgb, var(--accent) 70%, transparent), color-mix(in srgb, var(--accent) 70%, transparent)) center / 100% 1px no-repeat; }
.ct-geo i::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: ab-blip 2.4s var(--ease-out) infinite; }
.ct-soc2 { display: flex; gap: 8px; margin-top: 12px; }
.ct-soc2 a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); color: var(--ink); transition: background-color 300ms var(--ease), border-color 300ms var(--ease), transform 300ms var(--ease-out); }
.ct-soc2 svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.ct-soc2 a:hover, .ct-soc2 a:focus-visible { background: var(--accent); border-color: var(--accent); transform: translateY(-3px); }
@media (max-width: 599px) { ul.ct-tiles { grid-template-columns: 1fr 1fr; } .ct-tile:last-child { grid-column: 1 / -1; min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .ct-clock .ct-m, .ct-clock .ct-h, .ct-geo i::after { animation: none; } }

/* ================================================================== contact form v2 */
.ct-form { padding: clamp(22px, 4vw, 52px); }
.q-top { display: flex; align-items: flex-end; gap: var(--s-4); margin-bottom: var(--s-6); }
.q-top .quote-progress { flex: none; }
.q-dots { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.q-dots li { display: grid; gap: 8px; align-content: end; color: var(--muted); font: 700 10px/1.2 var(--f-display); letter-spacing: .18em; }
.q-dots li span { width: auto; height: auto; border: 0; border-radius: 0; place-items: start; background: none !important; color: inherit !important; font-size: 10px; }
.q-dots li em { font-style: normal; }
.q-dots li::after { content: ""; height: 3px; background: linear-gradient(var(--accent), var(--accent)) left / 0% 100% no-repeat, var(--line); transition: background-size 700ms var(--ease-out); }
.q-dots li.is-on, .q-dots li.is-done { color: var(--ink); }
.q-dots li.is-on::after { background-size: 50% 100%, auto; }
.q-dots li.is-done::after { background-size: 100% 100%, auto; }
.q-dots li.is-on span { color: var(--accent) !important; }
@media (max-width: 699px) { .q-top { flex-direction: column; align-items: stretch; gap: var(--s-2); } .q-dots li:not(.is-on) { font-size: 10px; } .q-dots li em { display: none; } .q-dots li.is-on em { display: inline; } }
.q-legend { position: relative; display: block; padding: 0; margin: 0 0 var(--s-4); font: 800 clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem)/1.1 var(--f-display); letter-spacing: -.02em; text-transform: uppercase; }
.q-legend span { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: .3em; color: var(--accent); }
.q-sub { margin: var(--s-4) 0 var(--s-2); font: 700 10px/1.3 var(--f-display); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
/* floating-label fields with a red line that draws in on focus */
.q-fl { position: relative; margin-bottom: var(--s-3); }
.q-fl input, .q-fl textarea { display: block; width: 100%; padding: 26px 0 10px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); background: transparent; color: var(--ink); font: 600 1.15rem/1.4 var(--f-display); outline: none; border-radius: 0; }
.q-fl textarea { resize: vertical; min-height: 140px; font-weight: 500; font-size: 1rem; line-height: 1.6; }
.q-fl label { position: absolute; left: 0; top: 24px; color: var(--muted); font: 500 1rem/1.3 var(--f-body); pointer-events: none; transform-origin: left top; transition: transform 300ms var(--ease-out), color 300ms var(--ease); }
.q-fl input:focus + label, .q-fl input:not(:placeholder-shown) + label, .q-fl textarea:focus + label, .q-fl textarea:not(:placeholder-shown) + label { transform: translateY(-22px) scale(.72); color: var(--ink); letter-spacing: .04em; }
.q-fl i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease-out); }
.q-fl input:focus ~ i, .q-fl textarea:focus ~ i { transform: scaleX(1); }
.q-fl input[aria-invalid="true"] { border-bottom-color: var(--accent); }
.q-fl-area textarea { padding-top: 30px; }
.q-grid2 { display: grid; gap: 0 var(--s-4); }
@media (min-width: 700px) { .q-grid2 { grid-template-columns: 1fr 1fr; } }
/* service tiles */
.q-svcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .q-svcs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.q-svc { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 3%, var(--bg)); cursor: pointer; overflow: hidden; transition: border-color 300ms var(--ease), transform 300ms var(--ease-out), box-shadow 300ms var(--ease); }
.q-svc input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.q-svc-media { display: block; overflow: hidden; aspect-ratio: 16/10; background: #121212; }
.q-svc-media .pic { width: 100%; height: 100%; aspect-ratio: auto; filter: grayscale(.85) brightness(.75); transition: filter 400ms var(--ease), scale 600ms var(--ease-out); }
.q-svc-q { display: grid; place-items: center; height: 100%; font: 900 2.4rem/1 var(--f-display); color: color-mix(in srgb, var(--ink) 25%, transparent); }
.q-svc-name { padding: 10px 12px 12px; font: 700 12px/1.3 var(--f-display); color: color-mix(in srgb, var(--ink) 82%, transparent); }
.q-svc-tick { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / .7); background: rgb(0 0 0 / .45); transition: background-color 250ms var(--ease), border-color 250ms var(--ease); }
.q-svc-tick::after { content: ""; position: absolute; left: 6px; top: 3px; width: 6px; height: 10px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 300ms cubic-bezier(.3, 1.6, .5, 1); }
@media (hover: hover) { .q-svc:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ink) 35%, transparent); } .q-svc:hover .pic { filter: grayscale(.3) brightness(.9); scale: 1.06; } }
.q-svc:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 14px 30px color-mix(in srgb, var(--accent) 22%, transparent); }
.q-svc:has(input:checked) .pic { filter: none; }
.q-svc:has(input:checked) .q-svc-name { color: var(--ink); }
.q-svc:has(input:checked) .q-svc-tick { background: var(--accent); border-color: var(--accent); }
.q-svc:has(input:checked) .q-svc-tick::after { transform: rotate(45deg) scale(1); }
.q-svc:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.q-svcs:has(input[aria-invalid="true"]) .q-svc { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
/* interest chips */
.q-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-3); }
.q-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: color-mix(in srgb, var(--ink) 80%, transparent); font: 600 13px/1 var(--f-display); cursor: pointer; transition: background-color 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease); }
.q-chip::before { content: "+"; font-weight: 800; color: var(--accent); transition: transform 300ms var(--ease-out); }
.q-chip:hover { border-color: color-mix(in srgb, var(--ink) 40%, transparent); color: var(--ink); }
.q-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.q-chip[aria-pressed="true"]::before { color: var(--ink); transform: rotate(45deg); }
/* send button + nav */
.ct-form .q-nav { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.ct-form .q-send { flex: 1; justify-content: center; min-height: 56px; font-size: 13px; }
/* sent: the steps give way to a confirmation */
.q-done { display: none; text-align: center; padding: var(--s-6) 0 var(--s-4); }
.q-done svg { width: 84px; height: 84px; margin: 0 auto var(--s-3); fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.q-done circle { stroke-dasharray: 183; stroke-dashoffset: 183; }
.q-done path { stroke: var(--ink); stroke-dasharray: 44; stroke-dashoffset: 44; }
.q-done-h { margin: 0 0 var(--s-1); font: 900 clamp(2rem, 1.4rem + 2vw, 3.2rem)/1 var(--f-display); text-transform: uppercase; }
.q-done p:not(.q-done-h) { margin: 0 auto var(--s-4); color: var(--muted); max-width: 44ch; }
.ct-form.is-sent .q-top, .ct-form.is-sent .q-step { display: none !important; }
.ct-form.is-sent .q-done { display: block; animation: q-in 600ms var(--ease-out) both; }
.ct-form.is-sent .q-done circle { animation: q-draw 900ms var(--ease-out) 150ms forwards; }
.ct-form.is-sent .q-done path { animation: q-draw 500ms var(--ease-out) 800ms forwards; }
.ct-form.is-sent .q-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@keyframes q-draw { to { stroke-dashoffset: 0; } }

/* ================================================================== contact: live Google map of Klaipėda */
.ct-mapsec { position: relative; min-height: clamp(460px, 48vw, 620px); display: flex; align-items: center; overflow: hidden; border-top: 1px solid var(--line); background: #111; }
.ct-mapframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: invert(.9) hue-rotate(180deg) saturate(.7) contrast(.95); }
.ct-mapwrap { position: relative; pointer-events: none; padding-block: var(--s-6); }
.ct-mapcard { pointer-events: auto; max-width: 440px; padding: clamp(22px, 3vw, 36px); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); box-shadow: 0 24px 60px rgb(0 0 0 / .5); }
.ct-mapcard::before { content: ""; display: block; width: 56px; height: 3px; margin-bottom: var(--s-3); background: var(--accent); }
.ct-mapcard .h2 { margin-bottom: var(--s-2); }
.ct-mapcard p:not(.eyebrow):not(.ct-mapact) { color: color-mix(in srgb, var(--ink) 80%, transparent); }
.ct-mapact { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
@media (max-width: 699px) { .ct-mapsec { display: block; min-height: 0; } .ct-mapframe { position: relative; height: 340px; } .ct-mapwrap { padding-block: 0 var(--s-6); margin-top: -60px; } }

/* ================================================================== SERVICES page: one scannable card per service */
ul.svj { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: var(--s-6) 0 0; }
@media (min-width: 900px) { ul.svj { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.svj a { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; gap: 10px 12px; height: 100%; min-height: 96px; padding: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 3%, var(--bg)); color: var(--ink); text-decoration: none; transition: border-color 300ms var(--ease), background-color 300ms var(--ease), transform 300ms var(--ease-out); }
.svj-n { font: 800 11px/1 var(--f-display); letter-spacing: .2em; color: var(--accent); }
.svj-ico { justify-self: end; color: var(--muted); transition: color 300ms var(--ease); }
.svj-ico svg, .sv-tag-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.svj-t { grid-column: 1 / -1; align-self: end; font: 700 13px/1.25 var(--f-display); }
.svj a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--ease-out); }
.svj a:hover { border-color: color-mix(in srgb, var(--ink) 30%, transparent); transform: translateY(-3px); }
.svj a:hover::after { transform: scaleX(1); }
.svj a:hover .svj-ico { color: var(--accent); }

.sv-list { display: grid; gap: clamp(56px, 8vw, 120px); }
.sv { position: relative; display: grid; gap: var(--s-4); align-items: center; scroll-margin-top: calc(var(--header-h-condensed) + 24px); }
@media (min-width: 900px) {
  .sv { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 5vw, 80px); }
  .sv-flip .sv-media { order: 2; }
}
.sv::before { content: ""; position: absolute; inset: 10% -4% 10% 30%; z-index: -1; background: radial-gradient(ellipse at 30% 50%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 65%); pointer-events: none; }
.sv-flip::before { inset: 10% 30% 10% -4%; background: radial-gradient(ellipse at 70% 50%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 65%); }
.sv-media { position: relative; display: block; overflow: hidden; aspect-ratio: 4/3; background: #111; }
.sv-media .pic { width: 100%; height: 100%; aspect-ratio: auto; transition: scale 900ms var(--ease-out); }
.sv-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .75), transparent 45%), linear-gradient(135deg, rgb(0 0 0 / .45), transparent 40%); pointer-events: none; }
.sv:hover .sv-media .pic { scale: 1.05; }
.sv-num { position: absolute; z-index: 1; top: 10px; left: 16px; font: 900 clamp(4rem, 3rem + 4vw, 7.5rem)/1 var(--f-display); letter-spacing: -.06em; color: var(--ink); text-shadow: 0 6px 30px rgb(0 0 0 / .5); }
.sv-tag { position: absolute; z-index: 1; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; background: var(--accent); color: var(--ink); font: 800 11px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; }
.sv-tag-ico { display: grid; place-items: center; width: 28px; height: 28px; background: rgb(0 0 0 / .22); }
.sv-tag-ico svg { width: 16px; height: 16px; }
.sv-idx { margin: 0 0 6px; font: 700 11px/1 var(--f-display); letter-spacing: .3em; color: var(--muted); }
.sv-h { margin: 0; font: 800 clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem)/1.02 var(--f-display); letter-spacing: -.025em; text-transform: uppercase; }
.sv-lede { margin: var(--s-3) 0 var(--s-4); padding: 14px 18px; border-left: 3px solid var(--accent); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 85%); font: 600 clamp(1.02rem, .95rem + .35vw, 1.2rem)/1.5 var(--f-display); color: var(--ink); max-width: none; }
ul.sv-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 var(--s-3); }
.sv-keys li { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 104px; padding: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 4%, var(--bg)); overflow: hidden; transition: border-color 300ms var(--ease); }
.sv-keys li::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 800ms var(--ease-out) calc(var(--d, 0ms) + 200ms); }
.sv-keys li.is-in::before, html:not(.js) .sv-keys li::before { transform: scaleX(1); }
.sv-keys li:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.sv-k-n { font: 800 11px/1 var(--f-display); letter-spacing: .2em; color: var(--accent); }
.sv-keys b { margin-top: auto; font: 800 14px/1.25 var(--f-display); }
.sv-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: var(--s-4); }
.sv-who-k { font: 700 10px/1 var(--f-display); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.sv-who ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sv-who li { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font: 600 12px/1 var(--f-display); color: color-mix(in srgb, var(--ink) 85%, transparent); }
.sv-act { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
@media (max-width: 599px) { ul.sv-keys { grid-template-columns: 1fr; } .sv-keys li { min-height: 0; flex-direction: row; align-items: center; gap: 14px; } .sv-keys b { margin-top: 0; } }

/* ================================================================== OEM labels: restoration-only notice */
.legal-note { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent) 7%, transparent) 0 10px, transparent 10px 20px), color-mix(in srgb, var(--ink) 3%, var(--bg)); }
.legal-ico { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--accent); border-radius: 50%; font: 800 20px/1 var(--f-display); color: var(--accent); }
.legal-h { margin: 0 0 6px; font: 800 13px/1.3 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.legal-note p:not(.legal-h) { margin: 0; font-size: 14px; line-height: 1.6; color: color-mix(in srgb, var(--ink) 80%, transparent); }
.legal-sm { margin-bottom: var(--s-3); }
.legal-wrap { margin-top: var(--s-6); }

/* ================================================================== Work page: drawn stat symbols */
.wh-sym { position: relative; flex: none; display: block; width: 46px; height: 46px; }
/* finished jobs: a chequered flag */
.wh-flag { background: conic-gradient(var(--ink) 25%, transparent 0 50%, var(--ink) 0 75%, transparent 0) 0 0 / 15.33px 15.33px; border: 1px solid var(--ink); transform: perspective(120px) rotateY(-18deg) skewY(-4deg); transform-origin: left; }
.wh-flag::before { content: ""; position: absolute; left: -5px; top: -4px; bottom: -10px; width: 2px; background: var(--accent); }
.js .wh-stat.is-in .wh-flag { animation: wh-wave 2.6s var(--ease) infinite alternate; }
@keyframes wh-wave { to { transform: perspective(120px) rotateY(-30deg) skewY(3deg); } }
/* services: a six on a die */
.wh-dice { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 7px 11px; border: 1.5px solid var(--ink); border-radius: 8px; transform: rotate(-8deg); }
.wh-dice i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.wh-dice i:nth-child(1) { background: var(--accent); }
/* photos: two stacked prints */
.wh-snap i { position: absolute; inset: 5px 7px 9px 5px; border: 1.5px solid var(--ink); border-bottom-width: 7px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 50%, transparent), transparent 70%); }
.wh-snap i:first-child { transform: rotate(-12deg) translate(-3px, 2px); opacity: .45; background: none; }
.wh-snap i:last-child { transform: rotate(6deg) translate(3px, 0); }
.wh-stat:hover .wh-snap i:first-child { transform: rotate(-20deg) translate(-6px, 3px); transition: transform 400ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .js .wh-stat.is-in .wh-flag { animation: none; } }

/* ================================================================== Emblems showcase */
.shop-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: var(--s-6) 0 0; padding: 0; list-style: none; max-width: 820px; }
.shop-steps li { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-top: 3px solid var(--accent); background: color-mix(in srgb, var(--ink) 3%, var(--bg)); }
.shop-steps span { font: 800 11px/1 var(--f-display); letter-spacing: .2em; color: var(--accent); }
.shop-steps b { font: 800 15px/1.2 var(--f-display); text-transform: uppercase; }
.shop-steps small { font-size: 12px; color: var(--muted); }
@media (max-width: 599px) { .shop-steps { grid-template-columns: 1fr; } }
.shop-card-media { position: relative; }
.shop-card-no { position: absolute; left: 12px; top: 8px; font: 900 2.2rem/1 var(--f-display); letter-spacing: -.05em; color: color-mix(in srgb, var(--ink) 85%, transparent); text-shadow: 0 4px 20px rgb(0 0 0 / .6); }
.shop-card-sizes { display: block; margin-top: 8px; font: 700 10px/1.3 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.pd-order { display: block; margin-top: var(--s-4); padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); border-top: 3px solid var(--accent); background: color-mix(in srgb, var(--ink) 3%, var(--bg)); }
.pd-order-h { margin: 0 0 var(--s-2); font: 800 1.2rem/1.1 var(--f-display); text-transform: uppercase; }
.pd-order-fields { display: grid; gap: 0 var(--s-3); margin-top: var(--s-2); }
@media (min-width: 600px) { .pd-order-fields { grid-template-columns: 1fr 1fr; } }
.pd-send { width: 100%; justify-content: center; min-height: 52px; }
.pd-or { margin: var(--s-3) 0 10px; text-align: center; font: 700 10px/1 var(--f-display); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.pd-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pd-way { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color 300ms var(--ease), background-color 300ms var(--ease); }
.pd-way svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.pd-way b { display: block; font: 800 12px/1.2 var(--f-display); }
.pd-way small { display: block; font-size: 11px; color: var(--muted); }
.pd-way:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
@media (max-width: 699px) { .pd-ways { grid-template-columns: 1fr; } }
.pd-specs { margin-top: var(--s-3); }
.ab-map { margin-top: 0; }

/* ================================================================== enquiry block on every page: car, service tiles, contact, comment */
@media (min-width: 1000px) { .inquiry-grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: start; } }
.inq-steps { display: grid; gap: 8px; margin: var(--s-4) 0; padding: 0; list-style: none; }
.inq-steps li { display: flex; align-items: center; gap: 12px; font: 700 13px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .08em; }
.inq-steps span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 50%; font-size: 11px; color: var(--accent); }
.quick.inq-form { display: block; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--line); border-top: 3px solid var(--accent); background: color-mix(in srgb, var(--bg) 70%, transparent); }
.inq-k { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 700 10px/1 var(--f-display); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.inq-k span { color: var(--accent); }
.inq-k:not(:first-of-type) { margin-top: var(--s-4); }
.inq-car { display: grid; grid-template-columns: 1.2fr 1.2fr .7fr; gap: 0 var(--s-3); }
.inq-two { grid-template-columns: 1fr 1fr; }
.inq-form .q-fl { margin-bottom: var(--s-1); }
.inq-form .q-fl input { font-size: 1.05rem; }
.inq-svcs { margin-top: var(--s-1); }
.inq-svcs .q-svc-name { font-size: 11px; padding: 8px 10px 10px; }
.inq-form .q-fl-area textarea { min-height: 96px; }
.inq-form .quick-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }
.inq-send { min-height: 54px; padding-inline: 32px; }
@media (max-width: 599px) { .inq-car { grid-template-columns: 1fr 1fr; } .inq-car .q-fl:last-child:nth-child(3) { grid-column: 1 / -1; } .inq-two { grid-template-columns: 1fr; } .inq-send { width: 100%; justify-content: center; } }

/* ================================================================== production pass: contrast, tap targets, small labels, 404 */
/* white text on pure #FF0000 is 3.7:1; filled red surfaces that carry text use a deeper red (4.7:1). Red text on black keeps #FF0000 (5:1). */
:root { --accent-fill: #E00000; }
.btn-accent, .btn-accent:hover { background: var(--accent-fill); border-color: var(--accent-fill); }
.spin-notes li.is-active .spin-n, .is-active > .spin-n { background: var(--accent-fill); }
.tape-a, .sv-tag, .wk-all-in, .ct-phone, .q-chip[aria-pressed="true"], .fl-chip[aria-pressed="true"] .chip-n, .q-dots li.is-on span, .plate-go, .social a:hover, .social a:focus-visible, .ct-soc2 a:hover, .ct-soc2 a:focus-visible, .pd-way:hover { background-color: var(--accent-fill); border-color: var(--accent-fill); }
.tape-set span { color: var(--ink); font-weight: 800; }
/* tap targets: text links get at least 24px of height */
.to-top { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; }
.link-arrow { min-height: 32px; display: inline-flex; align-items: center; }
.footer-list a { display: inline-block; padding-block: 4px; }
.ct-tile-k { font-size: 10px; }
/* 404 */
.nf { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(ellipse 60% 50% at 50% 40%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), var(--bg); }
.nf-main { width: min(100% - 2 * var(--gutter), 640px); padding-block: var(--s-8); text-align: center; }
.nf-brand { display: inline-block; width: 92px; margin-bottom: var(--s-4); }
.nf-code { margin: 0; font: 900 clamp(6rem, 4rem + 10vw, 12rem)/.85 var(--f-display); letter-spacing: -.06em; color: var(--accent); }
.nf-main .h2 { margin: var(--s-2) auto var(--s-1); max-width: none; }
.nf-main p { margin-inline: auto; }
.nf-main .hero-actions { justify-content: center; margin-top: var(--s-4); }
/* keyboard focus on custom radio chips (size / finish) */
.opt-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.opt-chip input:checked + span { border-color: var(--accent); }
/* About statement: unlit words stay readable (≥3:1 for this large text), the lighting-up still shows */
.js .ab-say .w { color: color-mix(in srgb, var(--ink) 40%, var(--bg)); }
.js .ab-say .w-em:not(.is-lit) { color: color-mix(in srgb, var(--accent) 78%, var(--bg)); }

/* two phone lines: number + what it is for */
.f-tel a { display: inline-block; padding-block: 4px 0; color: var(--ink); }
.f-tel small { display: block; font-size: 11px; color: var(--muted); padding-bottom: 6px; }
ul.inq-tels { display: grid; gap: 10px; margin: 0 0 var(--s-2); padding: 0; list-style: none; }
.inq-tels li { display: grid; padding-left: 14px; border-left: 2px solid var(--accent); }
.inq-tels a { font: 800 1.1rem/1.3 var(--f-display); color: var(--ink); text-decoration: none; display: inline-flex; min-height: 28px; align-items: center; }
.inq-tels a:hover { color: var(--accent); }
.inq-tels small { font-size: 12px; color: var(--muted); }
.plate-2 { margin-bottom: var(--s-1); }