/* Layout: a car in a studio. Black "pit" fields alternate with the light grey of the iRacing showroom renders,
   so the cars sit straight on the page. The door number board and the windscreen banner are the only devices. */
:root {
  --pit: #050506;        /* ground: the dark studio the hero car is lit in */
  --pit-2: #131418;      /* one tone step up, for surfaces on the ground */
  --pit-3: #202228;
  --studio: #e6e6eb;     /* the showroom grey behind every render */
  --studio-2: #d9d9e0;
  --chalk: #f4f4f6;      /* ink on dark, number-board white */
  --ink: #0c0d10;        /* ink on light */
  --banner: #2353f5;     /* the windscreen-banner blue off the hero Mustang */
  --banner-press: #1a40c4;
  --muted-d: #a9acb6;    /* secondary notes on dark */
  --muted-l: #4b4e58;    /* secondary notes on light */

  --face: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 2.4vw, 36px);
  --gap: clamp(96px, 14vw, 200px);
  --t-hero: clamp(64px, 12.4vw, 210px);
  --t-h2: clamp(44px, 6.6vw, 104px);
  --t-h3: clamp(24px, 2.2vw, 32px);
  --t-body: clamp(17px, 1.15vw, 19px);
  --t-small: 15px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--pit); color: var(--chalk);
  font-family: var(--font, var(--face)); font-size: var(--t-body); line-height: 1.5;
  font-variation-settings: "wdth" 100; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--banner); color: #fff; }
:focus-visible { outline: 3px solid var(--banner); outline-offset: 3px; }

.wrap { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); max-width: 1680px; margin: 0 auto; }
.field { padding-block: var(--gap); }
.field.studio { background: var(--studio); color: var(--ink); }
.field.blue { background: var(--banner); color: #fff; }

.display { font-family: var(--face); font-style: italic; font-weight: 860; font-variation-settings: "wdth" 112; letter-spacing: -0.035em; line-height: .9; margin: 0; text-wrap: balance; }
h2.display { font-size: var(--t-h2); }
h3 { font-family: var(--face); font-size: var(--t-h3); font-weight: 760; font-style: italic; font-variation-settings: "wdth" 108; letter-spacing: -0.02em; line-height: 1.05; margin: 0; }
p { margin: 0; }
.lede { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.4; max-width: 34ch; }
.note { font-size: var(--t-small); color: var(--muted-d); }
.studio .note { color: var(--muted-l); }

.btn {
  display: inline-flex; align-items: center; gap: .6em; min-height: 52px; padding: 0 26px;
  font: inherit; font-weight: 760; font-style: italic; font-variation-settings: "wdth" 108; font-size: 18px;
  background: var(--banner); color: #fff; border: 0; border-radius: 0; text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease-out), background-color .18s;
}
.btn:hover { background: var(--banner-press); }
.btn:active { transform: scale(.97); }
.btn .arrow { transition: transform .2s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn.ghost { background: var(--pit-3); color: var(--chalk); }
.btn.ghost:hover { background: #30343d; }
.studio .btn.ghost { background: var(--studio-2); color: var(--ink); }
.studio .btn.ghost:hover { background: #c9c9d2; }
.textlink { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .15s; }
.textlink:hover { color: var(--banner); }
.blue .textlink:hover { color: var(--pit); }

/* ---------- Header ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--pit); }
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: var(--pit); }
.bar .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.bar .logo img { height: 22px; width: auto; }
.bar nav { display: flex; gap: 26px; margin-left: auto; }
.bar nav a { text-decoration: none; font-weight: 600; font-size: 16px; color: var(--muted-d); transition: color .15s; }
.bar nav a:hover { color: var(--chalk); }
.bar .btn { min-height: 44px; font-size: 16px; padding: 0 18px; }
@media (max-width: 860px) { .bar nav { display: none; } .bar .btn { margin-left: auto; } }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(28px, 4vw, 56px); overflow: hidden; }
.hero h1 { font-size: var(--t-hero); white-space: nowrap; margin-left: -0.04em; }
.hero-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 48px; align-items: end; margin-top: clamp(24px, 3vw, 40px); }
.hero-row .lede { max-width: 40ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-car { margin-top: clamp(8px, 1vw, 16px); position: relative; }
.hero-car img { width: 100%; height: auto; aspect-ratio: 1665 / 944; object-fit: cover; transform-origin: 50% 70%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 88%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 88%, transparent); }
.hero-car figcaption { position: absolute; left: 0; bottom: 18px; font-size: var(--t-small); color: var(--muted-d); }
@media (max-width: 760px) {
  .hero h1 { white-space: normal; font-size: clamp(64px, 20vw, 120px); line-height: .86; }
  .hero-row { grid-template-columns: 1fr; }
  .hero-car { margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px))); }
  .hero-car figcaption { position: static; padding: 0 16px; margin-top: -8px; }
}

/* ---------- Grid (proof) ---------- */
.grid-sec { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.grid-sec .lede { margin-top: 28px; }
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; margin: 56px 0 0; }
.figures div { margin: 0; }
.figures dt { font-size: var(--t-small); color: var(--muted-d); margin-top: 6px; }
.figures dd { margin: 0; order: -1; font-family: var(--face); font-style: italic; font-weight: 860; font-variation-settings: "wdth" 115; font-size: clamp(44px, 4.6vw, 72px); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.figures div { display: flex; flex-direction: column; }
.startgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.startgrid li { background: var(--pit-2); aspect-ratio: 16 / 9; min-width: 0; position: relative; transition: background-color .2s, transform .25s var(--ease-out); }
.startgrid li:nth-child(even) { transform: translateY(50%); }
.startgrid li:hover { background: var(--pit-3); }
.startgrid li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--pit-3); }
.startgrid img { position: absolute; left: 16%; top: 14%; width: 68%; height: 66%; object-fit: contain; }
@media (max-width: 900px) { .grid-sec { grid-template-columns: 1fr; } .startgrid { margin-bottom: 18%; } }

/* ---------- Work ---------- */
.work-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
.work-head .lede { margin-top: 24px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button {
  font: inherit; font-size: 16px; font-weight: 650; padding: 10px 16px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--studio-2); color: var(--ink); transition: background-color .15s, color .15s, transform .15s var(--ease-out);
}
.filters button:hover { background: #cdcdd5; }
.filters button:active { transform: scale(.96); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--chalk); }
.filters button span { font-variant-numeric: tabular-nums; opacity: .6; margin-left: 4px; }
.works { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 88px 32px; }
.work { grid-column: span 6; display: flex; flex-direction: column; gap: 18px; }
.work.wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px; align-items: end; }
.work.small { grid-column: span 3; }
.work.offset { margin-top: 120px; }
.work .pic { overflow: hidden; background: var(--studio-2); }
.work .pic img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .7s var(--ease-out); }
.work.small .pic img { aspect-ratio: 4 / 5; object-fit: contain; background: #e3e0e2; }
.work:hover .pic img { transform: scale(1.035); }
.work .meta { display: grid; gap: 8px; }
.work .meta p { max-width: 46ch; }
.work .facts { font-size: var(--t-small); color: var(--muted-l); display: flex; flex-wrap: wrap; gap: 4px 18px; }
.work[hidden] { display: none; }
@media (max-width: 900px) {
  .work-head { grid-template-columns: 1fr; }
  .works { gap: 64px 20px; }
  .work, .work.wide { grid-column: 1 / -1; display: flex; }
  .work.small { grid-column: span 6; }
  .work.offset { margin-top: 0; }
}

/* ---------- Prices: number boards ---------- */
.prices { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.prices .lede { margin-top: 28px; }
.prices .aside { position: sticky; top: 110px; }
.price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.price-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 28px; align-items: center; background: var(--pit-2); padding: 18px 24px 18px 18px; transition: background-color .2s; }
.price-row:hover { background: var(--pit-3); }
.board {
  background: var(--chalk); color: var(--ink); border-radius: 10px; height: 104px; display: grid; place-items: center;
  font-family: var(--face); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 118; letter-spacing: -0.04em;
  font-size: 58px; line-height: 1; font-variant-numeric: tabular-nums; position: relative;
}
.board small { position: absolute; top: 8px; left: 12px; font-size: 13px; font-style: normal; font-weight: 700; letter-spacing: 0; font-variation-settings: "wdth" 100; color: var(--muted-l); }
.board.ask { font-size: 30px; letter-spacing: -0.02em; background: var(--pit-3); color: var(--chalk); }
.board.ask small { color: var(--muted-d); }
.price-row h3 { margin-bottom: 6px; }
.price-row p { color: var(--muted-d); font-size: 17px; }
.price-row .pick { font: inherit; font-size: 15px; font-weight: 700; background: none; color: var(--chalk); border: 0; padding: 10px 0 10px 8px; cursor: pointer; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .15s; }
.price-row .pick:hover { color: #8fa6ff; }
.price-row .tag { display: inline-block; background: var(--banner); color: #fff; font-size: 14px; font-weight: 700; padding: 2px 8px; margin-left: 10px; vertical-align: 4px; font-style: normal; font-variation-settings: "wdth" 100; letter-spacing: 0; }
@media (max-width: 900px) {
  .prices { grid-template-columns: 1fr; }
  .prices .aside { position: static; }
  .price-row { grid-template-columns: 120px minmax(0, 1fr); gap: 18px; padding: 14px; }
  .price-row .pick { grid-column: 2; justify-self: start; padding-left: 0; }
  .board { height: 78px; font-size: 40px; }
  .board.ask { font-size: 21px; }
}

/* ---------- Brief builder ---------- */
.builder-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.builder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 64px; margin-top: 64px; align-items: start; }
.form { display: grid; gap: 26px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form label, .form legend { display: block; font-weight: 700; font-size: 16px; margin-bottom: 8px; padding: 0; }
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form input[type="text"], .form textarea {
  width: 100%; font: inherit; font-size: 17px; color: var(--ink); background: #f4f4f7; border: 2px solid transparent; border-radius: 0;
  padding: 13px 14px; transition: border-color .15s, background-color .15s;
}
.form input[type="text"]:focus, .form textarea:focus { outline: none; border-color: var(--banner); background: #fff; }
.form textarea { min-height: 110px; resize: vertical; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label { margin: 0; font-weight: 650; font-size: 15px; padding: 10px 14px; background: var(--studio-2); cursor: pointer; transition: background-color .15s, color .15s, transform .15s var(--ease-out); }
.chips label:hover { background: #cdcdd5; }
.chips label:active { transform: scale(.96); }
.chips input:checked + label { background: var(--ink); color: var(--chalk); }
.chips input:focus-visible + label { outline: 3px solid var(--banner); outline-offset: 2px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swatches button { width: 40px; height: 40px; border: 0; border-radius: 0; cursor: pointer; background: var(--c); transition: transform .15s var(--ease-out); box-shadow: inset 0 0 0 2px rgba(12,13,16,.12); }
.swatches button:hover { transform: scale(1.08); }
.swatches button[aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 3px; }
.swatches input[type="color"] { width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }

.preview { position: sticky; top: 100px; display: grid; gap: 22px; }
.door { background: var(--pit); width: 100%; aspect-ratio: 16 / 10; display: block; }
.door text { font-family: var(--face); }
.ticket { background: var(--pit); color: var(--chalk); padding: 24px; display: grid; gap: 18px; }
.ticket .sum { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; align-items: baseline; }
.ticket .sum strong { font-family: var(--face); font-style: italic; font-weight: 860; font-variation-settings: "wdth" 112; font-size: clamp(30px, 3vw, 42px); letter-spacing: -0.03em; line-height: 1; }
.ticket pre { margin: 0; white-space: pre-wrap; font-family: var(--face); font-size: 15px; line-height: 1.55; color: var(--muted-d); max-height: 220px; overflow: auto; background: var(--pit-2); padding: 14px 16px; }
.ticket .acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ticket .status { font-size: 15px; color: var(--chalk); min-height: 1.5em; }
@media (max-width: 960px) {
  .builder-head, .builder { grid-template-columns: 1fr; }
  .preview { position: static; order: -1; }
}
@media (max-width: 480px) { .form .row { grid-template-columns: 1fr; } }

/* ---------- Process ---------- */
.steps { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 8px; background: var(--pit-3); }
.steps li { position: relative; padding-top: 64px; display: grid; gap: 16px; align-content: start; }
.steps li::before { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 34px; background: var(--chalk); }
.steps li:last-child::before { background: var(--banner); }
.steps .word { font-family: var(--face); font-style: italic; font-weight: 860; font-variation-settings: "wdth" 112; font-size: clamp(48px, 5.4vw, 88px); line-height: .9; letter-spacing: -0.035em; }
.steps p { max-width: 32ch; }
.steps .when { font-size: var(--t-small); color: var(--muted-d); }
.process-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
@media (max-width: 860px) {
  .process-head { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 48px; padding-left: 56px; }
  .steps::before { left: 13px; right: auto; top: 0; bottom: 0; width: 8px; height: auto; }
  .steps li { padding-top: 0; }
  .steps li::before { left: -56px; }
}

/* ---------- Reviews ---------- */
.reviews { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; margin-top: 64px; }
.reviews blockquote { margin: 0; display: grid; gap: 18px; }
.reviews blockquote p { font-family: var(--face); font-weight: 700; font-style: italic; font-variation-settings: "wdth" 104; letter-spacing: -0.015em; }
.reviews .big p { font-size: clamp(26px, 2.5vw, 36px); line-height: 1.18; max-width: 26ch; }
.reviews .side { display: grid; gap: 56px; }
.reviews .side p { font-size: clamp(21px, 1.7vw, 25px); line-height: 1.25; }
.reviews cite { font-style: normal; font-weight: 600; font-size: 16px; }
.stars { letter-spacing: 3px; font-size: 18px; }
@media (max-width: 860px) { .reviews { grid-template-columns: 1fr; } }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.about-pics { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; }
.about-pics .main { grid-column: 1 / -1; }
.about-pics img { width: 100%; height: 100%; object-fit: cover; }
.about-pics .main img { aspect-ratio: 1012 / 736; height: auto; }
.about-pics .h img, .about-pics .s img { aspect-ratio: 4 / 5; }
.about-pics .s img { object-fit: contain; background: #e3e1e5; }
.about-pics figcaption { font-size: 14px; color: var(--muted-l); margin-top: 8px; }
.about .text { display: grid; gap: 24px; }
.about .text p { max-width: 52ch; }
.spec { margin: 24px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.spec div { padding: 18px 0; display: grid; gap: 2px; }
.spec div:nth-child(odd) { padding-right: 20px; }
.spec dt { font-size: var(--t-small); color: var(--muted-l); }
.spec dd { margin: 0; font-weight: 700; font-size: 19px; }
.open { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.open i { width: 12px; height: 12px; background: #1fb85a; display: inline-block; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.faq .lede { margin-top: 28px; }
.faq .guide { margin-top: 32px; display: inline-flex; }
.qa { display: grid; gap: 10px; }
.qa details { background: var(--pit-2); transition: background-color .2s; }
.qa details:hover, .qa details[open] { background: var(--pit-3); }
.qa summary { list-style: none; cursor: pointer; padding: 22px 64px 22px 24px; position: relative; font-weight: 700; font-size: 19px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 400; transition: transform .25s var(--ease-out); }
.qa details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.qa .a { padding: 0 24px 24px; color: var(--muted-d); max-width: 60ch; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } }

/* ---------- Footer: the windscreen banner ---------- */
.foot-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; padding-block: clamp(96px, 9vw, 140px) 64px; }
.windscreen { background: var(--banner); padding-block: clamp(22px, 3vw, 44px); }
.windscreen img { width: 100%; height: auto; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; padding-block: 28px 40px; font-size: 16px; color: var(--muted-d); }
.foot-links nav { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.foot-links a { text-decoration: none; font-weight: 600; color: var(--chalk); transition: color .15s; }
.foot-links a:hover { color: #8fa6ff; }
@media (max-width: 760px) { .foot-cta { grid-template-columns: 1fr; } }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 { animation: drive-in .9s var(--ease-out) both; }
  .hero-row { animation: nudge .8s .12s var(--ease-out) both; }
  .hero-car img { animation: settle 2.4s .1s var(--ease-out) both; }
  .js .reveal > * { transform: translateY(28px); transition: transform .8s var(--ease-out); }
  .js .reveal > *:nth-child(2) { transition-delay: .07s; }
  .js .reveal > *:nth-child(3) { transition-delay: .14s; }
  .js .reveal > *:nth-child(4) { transition-delay: .21s; }
  .js .reveal.in > * { transform: none; }
  .js .startgrid li:nth-child(even) { transition: transform .9s var(--ease-out); }
}
@keyframes drive-in { from { transform: translateX(-6vw); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nudge { from { transform: translateY(24px); } to { transform: none; } }
@keyframes settle { from { transform: scale(1.08) translateX(2%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

/* ---------- Shared across subpages ---------- */
.bar nav a[aria-current="page"] { color: var(--chalk); }
.page-hero { padding-block: clamp(40px, 6vw, 96px) clamp(64px, 8vw, 120px); }
.page-hero h1 { font-size: clamp(64px, 12vw, 200px); margin-left: -0.04em; }
.page-hero .lede { margin-top: 28px; }

/* ---------- Work page ---------- */
.work-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: end; }
.controls { display: grid; gap: 16px; justify-items: start; }
.segment { display: inline-flex; background: var(--pit-2); padding: 4px; }
.segment button { font: inherit; font-size: 16px; font-weight: 700; border: 0; border-radius: 0; padding: 12px 18px; cursor: pointer; background: none; color: var(--muted-d); transition: background-color .15s, color .15s, transform .15s var(--ease-out); }
.segment button:active { transform: scale(.97); }
.segment button[aria-pressed="true"] { background: var(--chalk); color: var(--ink); }
.field:not(.studio) .filters button { background: var(--pit-2); color: var(--chalk); }
.field:not(.studio) .filters button:hover { background: var(--pit-3); }
.field:not(.studio) .filters button[aria-pressed="true"] { background: var(--chalk); color: var(--ink); }
.entries { display: grid; gap: clamp(96px, 10vw, 160px); }
.entries .group-title { font-size: clamp(36px, 4.4vw, 64px); margin-bottom: calc(-1 * clamp(40px, 5vw, 96px)); }
.entry { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px 48px; align-items: end; }
.entry.flip { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.entry.flip .pic { order: 2; }
.entry .pic { overflow: hidden; background: var(--studio-2); }
.entry .pic img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .7s var(--ease-out); }
.entry:hover .pic img { transform: scale(1.03); }
.entry.gear { grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); }
.entry.gear .pic img { aspect-ratio: 4 / 5; object-fit: contain; background: #e3e0e2; }
.entry.gear .meta { grid-column: span 2; }
.entry .meta { display: grid; gap: 14px; }
.entry h2 { font-family: var(--face); font-style: italic; font-weight: 860; font-variation-settings: "wdth" 110; font-size: clamp(30px, 2.8vw, 44px); letter-spacing: -0.03em; line-height: 1; margin: 0; text-wrap: balance; }
.entry .meta p { max-width: 40ch; }
.entry dl { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; font-size: 16px; }
.entry dt { color: var(--muted-l); }
.entry dd { margin: 0; font-weight: 650; }
.entry[hidden], .group-title[hidden] { display: none; }
.empty-note { font-size: 19px; }
.cta-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.cta-band .lede { margin-top: 24px; }
.cta-band .btns { display: flex; flex-wrap: wrap; gap: 12px; }
.blue .btn { background: var(--pit); }
.blue .btn:hover { background: #000; }
.blue .btn.ghost { background: rgba(255,255,255,.16); color: #fff; }
.blue .btn.ghost:hover { background: rgba(255,255,255,.26); }
@media (max-width: 900px) {
  .work-hero, .cta-band { grid-template-columns: 1fr; }
  .entry, .entry.flip, .entry.gear { grid-template-columns: 1fr; gap: 20px; }
  .entry.flip .pic { order: 0; }
  .entry.gear .meta { grid-column: auto; }
  .entry.gear .pic img { max-width: 320px; }
}

/* ---------- Guide page ---------- */
.guide-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 64px; align-items: end; }
.idcard { background: var(--pit-2); padding: 24px; display: grid; gap: 14px; }
.idcard label { font-weight: 700; font-size: 16px; }
.idcard input { width: 100%; font: inherit; font-size: 28px; font-weight: 800; font-style: italic; font-variation-settings: "wdth" 112; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--chalk); border: 2px solid transparent; border-radius: 0; padding: 10px 14px; transition: border-color .15s; }
.idcard input:focus { outline: none; border-color: var(--banner); }
.idcard .note { font-size: 15px; }
.files { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.files li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--pit-3); padding: 10px 10px 10px 14px; }
.files code, .path code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 15px; overflow-wrap: anywhere; }
.files span { display: block; font-size: 14px; color: var(--muted-d); margin-top: 2px; }
.copy { font: inherit; font-size: 14px; font-weight: 700; border: 0; border-radius: 0; padding: 8px 12px; cursor: pointer; background: var(--chalk); color: var(--ink); transition: transform .15s var(--ease-out), background-color .15s; }
.copy:hover { background: #fff; }
.copy:active { transform: scale(.95); }
.guide-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
.guide-body .aside { position: sticky; top: 110px; display: grid; gap: 24px; }
.track { list-style: none; margin: 0; padding: 0 0 0 64px; display: grid; gap: 72px; position: relative; }
.track::before { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 8px; background: var(--studio-2); }
.track > li { position: relative; display: grid; gap: 16px; }
.track > li::before { content: ""; position: absolute; left: -64px; top: 4px; width: 34px; height: 34px; background: var(--ink); }
.track > li:last-child::before { background: var(--banner); }
.track h3 { font-size: clamp(28px, 2.6vw, 40px); font-weight: 860; font-variation-settings: "wdth" 110; letter-spacing: -0.03em; }
.track p { max-width: 58ch; }
.path { background: var(--pit); color: var(--chalk); padding: 18px 20px; margin: 0; overflow-x: auto; display: grid; gap: 6px; }
.path .c { color: var(--muted-d); }
.inline-code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9em; background: var(--studio-2); padding: 1px 6px; }
@media (max-width: 900px) {
  .guide-hero, .guide-body { grid-template-columns: 1fr; }
  .guide-body .aside { position: static; }
  .track { padding-left: 52px; }
  .track > li::before { left: -52px; width: 28px; height: 28px; }
  .track::before { left: 10px; }
}
.guide-hero h1 { font-size: clamp(46px, 7vw, 124px); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn:disabled { opacity: .6; cursor: progress; }

/* ---------- Hidden staff sign-in ---------- */
.staff { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: default; transition: color .3s; }
.staff:hover, .staff:focus-visible { color: var(--banner); }
.pitlane { border: 0; padding: 0; background: var(--pit-2); color: var(--chalk); width: min(440px, calc(100vw - 32px)); max-width: none;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6); }
.pitlane::backdrop { background: rgba(5, 5, 6, .78); }
.pitlane form { display: grid; gap: 18px; padding: 28px; border-top: 8px solid var(--banner); }
.pitlane h2 { font-size: clamp(44px, 6vw, 64px); }
.pitlane .f label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.pitlane input { width: 100%; font: inherit; font-size: 17px; color: var(--ink); background: var(--chalk); border: 2px solid transparent; border-radius: 0; padding: 12px 14px; }
.pitlane input:focus { outline: none; border-color: var(--banner); }
.pitlane .status { font-size: 15px; min-height: 1.4em; color: var(--muted-d); }
.pitlane .status.err { color: #ff9b9e; }
.pl-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .pitlane[open] { animation: pl-in .35s var(--ease-out); }
}
@keyframes pl-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* =========================================================
   Race layer: slanted buttons, start lights, timing ticker,
   lap bar, kerbs and the chequered finish.
   ========================================================= */
:root { --light: #ff2a1a; --light-off: #2a1414; }

/* Slanted buttons, cut like a livery stripe. The fill is a skewed layer so text and focus stay upright. */
.btn { --btn-bg: var(--banner); background: none !important; position: relative; isolation: isolate; padding: 0 30px; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-bg); transform: skewX(-14deg); transition: background-color .18s; }
.btn:hover { --btn-bg: var(--banner-press); }
.btn.ghost { --btn-bg: var(--pit-3); }
.btn.ghost:hover { --btn-bg: #30343d; }
.studio .btn.ghost { --btn-bg: var(--studio-2); }
.studio .btn.ghost:hover { --btn-bg: #c9c9d2; }
.blue .btn { --btn-bg: var(--pit); }
.blue .btn:hover { --btn-bg: #000; }
.blue .btn.ghost { --btn-bg: rgba(255, 255, 255, .16); }
.blue .btn.ghost:hover { --btn-bg: rgba(255, 255, 255, .26); }
.btn.danger { --btn-bg: #3a1d20; }
.btn.danger:hover { --btn-bg: #55252a; }
.btn:focus-visible { outline: none; }
.btn:focus-visible::before { outline: 3px solid var(--chalk); outline-offset: 3px; }
.bar .btn { padding: 0 22px; }

/* Lap bar under the header */
.bar { position: sticky; }
.lap { position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; pointer-events: none; }
.lap i { display: block; height: 100%; background: var(--banner); transform-origin: 0 50%; transform: scaleX(0); }

/* Start lights over the dark top of the hero picture */
.lights { position: absolute; top: 9%; right: 0; z-index: 2; display: grid; justify-items: end; gap: 10px;
  background: none; border: 0; padding: 0; color: var(--chalk); font: inherit; cursor: pointer; touch-action: manipulation; }
.pods { display: flex; gap: 10px; }
.pods i { width: clamp(30px, 3.4vw, 54px); aspect-ratio: 1 / 2.1; background: #101114; display: grid; place-items: start center; padding-top: 18%; position: relative; }
.pods i::before, .pods i::after { content: ""; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--light-off); position: absolute; left: 15%; transition: background-color .08s, box-shadow .08s; }
.pods i::before { top: 8%; }
.pods i::after { bottom: 8%; }
.pods i.on::before, .pods i.on::after { background: var(--light); box-shadow: 0 0 18px rgba(255, 42, 26, .55); }
.lights-read { font-size: 15px; font-weight: 700; font-style: italic; font-variation-settings: "wdth" 108; font-variant-numeric: tabular-nums; }
.lights:hover .lights-read { color: #8fa6ff; }
.lights:focus-visible { outline: 3px solid var(--banner); outline-offset: 8px; }
@media (max-width: 760px) { .lights { right: 16px; top: 4%; } .pods { gap: 5px; } .lights-read { font-size: 13px; } }

@media (prefers-reduced-motion: no-preference) {
  .hero-car img.launch { animation: launch .9s var(--ease-out); }
}
@keyframes launch {
  0% { transform: none; }
  12% { transform: translate(-.4%, .2%) scale(1.005); }
  45% { transform: translate(2.2%, 0) scale(1.035); }
  100% { transform: none; }
}

/* Live-timing ticker */
.ticker { background: var(--chalk); color: var(--ink); overflow: hidden; padding-block: 14px; }
.ticker-track { display: flex; width: max-content; }
.ticker ul { display: flex; list-style: none; margin: 0; padding: 0; }
.ticker li { display: flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap;
  font-family: var(--face); font-style: italic; font-weight: 820; font-variation-settings: "wdth" 110; font-size: clamp(16px, 1.4vw, 21px); letter-spacing: -0.01em; }
.ticker li::after { content: ""; width: 18px; height: 12px; background: var(--banner); transform: skewX(-14deg); }
@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: ticker 48s linear infinite; }
  .ticker:hover .ticker-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .ticker ul[aria-hidden] { display: none; } .ticker-track { width: auto; } .ticker ul { flex-wrap: wrap; padding-inline: 16px; } }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Kerb along the top of the windscreen banner */
.windscreen { position: relative; }
.windscreen::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
  background: repeating-linear-gradient(90deg, var(--chalk) 0 44px, var(--banner) 44px 88px); }

/* Chequered finish on the last step */
.steps li:last-child::before { background: conic-gradient(var(--chalk) 25%, #000 0 50%, var(--chalk) 0 75%, #000 0) 0 0 / 17px 17px; }
.track > li:last-child::before { background: conic-gradient(var(--ink) 25%, var(--chalk) 0 50%, var(--ink) 0 75%, var(--chalk) 0) 0 0 / 17px 17px; }

/* =========================================================
   Race layer 2: carbon, livery cuts, 3D track, gauges, cards.
   ========================================================= */

/* Carbon fibre weave on every dark field. */
body {
  background-color: var(--pit);
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25% 75%, rgba(255,255,255,.03) 75%),
    linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25% 75%, rgba(255,255,255,.03) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  overflow-x: clip;
}

/* Light and blue fields are cut on the diagonal, like a livery panel. */
.field.studio, .field.blue {
  --cut: clamp(28px, 4.5vw, 72px);
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
  padding-block: calc(var(--gap) + var(--cut) * .6);
}

/* Hero: livery stripes behind the title, extruded 3D lettering. */
.hero { position: relative; }
.livery { position: absolute; top: 0; right: 0; width: min(72vw, 1150px); height: clamp(220px, 34vw, 500px); z-index: 0; pointer-events: none; }
.livery polygon { fill: var(--banner); }
.livery .w { fill: var(--chalk); }
.livery .t { fill: var(--banner); opacity: .55; }
.hero h1, .hero-row { position: relative; z-index: 1; }
.hero h1 {
  color: var(--chalk);
  text-shadow:
    .006em .006em 0 #2a5bff, .012em .012em 0 #2353f5, .018em .018em 0 #1d47d9, .024em .024em 0 #1a40c4,
    .03em .03em 0 #15349f, .036em .036em 0 #10287a, .042em .042em 0 #0b1c57, .06em .08em .12em rgba(0,0,0,.7);
}

/* Hero car on a moving track, tilting with the pointer. */
.hero-car { perspective: 1400px; }
.stage {
  position: relative;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .7s var(--ease-out);
  -webkit-mask-image: radial-gradient(ellipse 74% 80% at 50% 54%, #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 74% 80% at 50% 54%, #000 60%, transparent 100%);
}
.stage .track { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-car .stage img { position: relative; mix-blend-mode: lighten; -webkit-mask-image: none; mask-image: none; }
.hero-car figcaption { z-index: 2; }

/* Ticker tilted across the page like a banner on a pit wall. */
.ticker { position: relative; z-index: 2; transform: rotate(-2deg); margin: clamp(8px, 2vw, 28px) -4vw 0; width: calc(100% + 8vw); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.ticker::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: var(--banner); }

/* Giant outline race numbers behind sections. */
.has-num { position: relative; overflow: clip; }
.has-num > .wrap { position: relative; z-index: 1; }
.deco-num {
  position: absolute; right: -2vw; top: 1vw; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--face); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 125;
  font-size: clamp(220px, 34vw, 600px); line-height: .8; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 2px rgba(244, 244, 246, .08);
}
.deco-num.left { left: -3vw; right: auto; top: auto; bottom: 0; }

/* Rev gauges for the figures. */
.figures { gap: 20px; }
.gauge { position: relative; align-items: center; text-align: center; padding: 16px 12px 18px; background: rgba(255,255,255,.035); }
.gauge svg { width: 100%; max-width: 220px; display: block; overflow: visible; }
.gauge .g-track, .gauge .g-red, .gauge .g-fill { fill: none; stroke-width: 13; }
.gauge .g-track { stroke: var(--pit-3); }
.gauge .g-red { stroke: var(--light); opacity: .9; }
.gauge .g-fill { stroke: var(--banner); stroke-dashoffset: 377; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1); }
.gauge.rev .g-fill { stroke-dashoffset: var(--off); }
.gauge .g-ticks line { stroke: var(--muted-d); stroke-width: 2.5; }
.gauge .g-needle { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(135deg); transition: transform 1.7s cubic-bezier(.3,1.35,.4,1); }
.gauge.rev .g-needle { transform: rotate(var(--angle)); }
.gauge .g-needle line { stroke: var(--chalk); stroke-width: 4; stroke-linecap: round; }
.gauge .g-needle circle { fill: var(--chalk); }
.gauge dd { order: 0; margin-top: -1.15em; font-size: clamp(28px, 2.8vw, 44px); position: relative; }
.gauge dt { order: 1; margin-top: 4px; max-width: 20ch; }

/* Team logos in painted starting-grid boxes, all at the same visual size. */
.startgrid li { background: #0c0d10; border: 3px solid rgba(244, 244, 246, .85); border-bottom: 0; }
.startgrid li::after { display: none; }
.startgrid img { left: 15%; top: 17%; width: 70%; height: 66%; object-fit: contain; transition: opacity .3s; }
.js .startgrid img:not(.trimmed) { opacity: 0; }

/* Portfolio cards: whole cars, one size, 3D tilt. */
.rgrid { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; perspective: 1400px; }
.rcard {
  position: relative; display: flex; flex-direction: column; background: var(--pit); color: var(--chalk);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
  transition: transform .6s var(--ease-out), box-shadow .3s;
}
.rcard:hover { transition: transform .1s linear, box-shadow .3s; box-shadow: 0 34px 60px -24px rgba(5, 5, 6, .6); }
.rcard::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.2), transparent 45%);
}
.rcard:hover::after { opacity: 1; }
.rcard-pic, .entry .pic { position: relative; overflow: hidden; background: #e6e6eb; }
.rcard-pic { aspect-ratio: 16 / 9; }
.rcard-pic img { position: relative; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.rcard-pic.studio-shot img, .entry .pic.studio-shot img { object-fit: contain; }
.rcard:hover .rcard-pic img { transform: scale(1.06); }
.rcard-body { position: relative; display: grid; gap: 8px; align-content: start; padding: 22px 22px 24px; flex: 1; }
.rcard-body::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, var(--banner) 0 58%, transparent 58% 61%, var(--chalk) 61% 66%, transparent 66%);
}
.rtag { justify-self: start; background: var(--banner); color: #fff; font-size: 13px; font-weight: 800; font-style: italic; padding: 3px 12px; transform: skewX(-14deg); }
.rcard h3 { font-size: clamp(20px, 1.6vw, 26px); }
.rdesc { font-size: 15px; color: #c3c6cf; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rmeta { font-size: 14px; color: var(--muted-d); }
@media (max-width: 1000px) { .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 620px) { .rgrid { grid-template-columns: 1fr; } }

/* Work page pictures: whole cars over a soft copy of themselves. */
.entry .pic img { position: relative; object-fit: cover; }

/* Price boards stuck on at an angle, straightening on hover. */
.board { transform: rotate(-3deg); transition: transform .3s var(--ease-out); }
.price-row:hover .board { transform: rotate(0) scale(1.03); }

/* The process bar in timing-screen sector colours. */
.steps::before { background: linear-gradient(90deg, #f2c94c 0 33.3%, #27c46b 33.3% 66.6%, #a86bff 66.6%); }
@media (max-width: 860px) { .steps::before { background: linear-gradient(180deg, #f2c94c 0 33.3%, #27c46b 33.3% 66.6%, #a86bff 66.6%); } }
@media (max-width: 760px) { .lights { top: -6px; right: 12px; gap: 6px; } .pods { gap: 4px; } .pods i { width: 20px; } .lights-read { font-size: 12px; } }

/* ---------- Start-light gantry over the hero car (decoration) ---------- */
.gantry { position: absolute; top: 3%; left: 50%; transform: translateX(-50%); width: min(540px, 46%); z-index: 2; pointer-events: none; }
.gantry .beam { height: clamp(10px, 1.2vw, 16px); background: #15161b; box-shadow: inset 0 -4px 0 var(--banner); }
.gantry .pods { display: flex; justify-content: space-between; padding: 0 5%; }
.pod { width: 15.5%; display: grid; grid-template-columns: 1fr 1fr; gap: 10%; padding: 9% 7% 11%; background: #0d0e11; box-shadow: 0 12px 26px rgba(0, 0, 0, .55); }
.pod b { aspect-ratio: 1; border-radius: 50%; background: var(--light-off); transition: background-color .07s, box-shadow .07s; }
.pod.on b:nth-child(n + 3) { background: var(--light); box-shadow: 0 0 12px rgba(255, 42, 26, .75), 0 0 30px rgba(255, 42, 26, .35); }
@media (max-width: 760px) { .gantry { width: 72%; top: 2%; } }

/* ---------- Process markers as start lights: red, red, then green on Files ---------- */
.steps li::before, .steps li:last-child::before {
  border-radius: 50%; background: var(--light-off); box-shadow: 0 0 0 6px #0d0e11;
  transition: background-color .15s, box-shadow .15s;
}
.steps.in li:nth-child(1)::before { background: var(--light); box-shadow: 0 0 0 6px #0d0e11, 0 0 22px rgba(255, 42, 26, .6); transition-delay: .25s; }
.steps.in li:nth-child(2)::before { background: var(--light); box-shadow: 0 0 0 6px #0d0e11, 0 0 22px rgba(255, 42, 26, .6); transition-delay: .75s; }
.steps.in li:nth-child(3)::before { background: #27e06f; box-shadow: 0 0 0 6px #0d0e11, 0 0 26px rgba(39, 224, 111, .6); transition-delay: 1.35s; }
.pod { background: #1a1b21; box-shadow: inset 0 0 0 2px #262830, 0 12px 26px rgba(0, 0, 0, .55); }
.pod b { background: #3a1c1c; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6); }
.gantry .beam { background: #1a1b21; }
.pod { padding: clamp(5px, .6vw, 9px); gap: clamp(4px, .45vw, 7px); }
.startgrid li a { position: absolute; inset: 0; }
.startgrid li a:focus-visible { outline: 3px solid var(--banner); outline-offset: 3px; }

/* ---------- Fixes: process line runs light to light; gauge values sit under the dial ---------- */
.steps::before {
  background: #2a2c33; top: 13px; height: 8px;
  left: 17px; right: calc(33.333% - 38px);
}
@media (max-width: 860px) {
  .steps::before { display: none; }
  .steps li::before { z-index: 1; }
  .steps li:not(:last-child)::after { content: ""; position: absolute; left: -43px; top: 17px; width: 8px; height: calc(100% + 48px); background: #2a2c33; }
}
.gauge svg { max-width: 190px; }
.gauge dd { margin-top: 2px; font-size: clamp(26px, 2.4vw, 38px); line-height: 1; }
.gauge dt { margin-top: 8px; }

/* Gantry: five columns of two lights, both red when on. */
.pod { width: 11%; grid-template-columns: 1fr; gap: clamp(5px, .5vw, 8px); padding: clamp(6px, .6vw, 9px); }
.pod.on b { background: var(--light); box-shadow: 0 0 12px rgba(255, 42, 26, .75), 0 0 30px rgba(255, 42, 26, .35); }
@media (max-width: 760px) { .pod { width: 13%; } }

/* =========================================================
   Work page and livery viewer
   ========================================================= */
[hidden] { display: none !important; }

/* Cards are whole links; the grid's items stretch so every card is the same height. */
.rgrid > li { display: flex; }
.rgrid > li > .rcard { flex: 1; text-decoration: none; cursor: pointer; }
.rcard:focus-visible { outline: 3px solid var(--banner); outline-offset: 4px; }
.rbadges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rbadge { font-size: 12px; font-weight: 700; padding: 3px 8px; background: var(--pit-3); color: var(--chalk); }
.rbadge.tp { background: var(--chalk); color: var(--ink); }

/* Top of the Work page */
.work-top { padding-bottom: clamp(56px, 6vw, 88px); }
.work-top .wrap { position: relative; z-index: 1; }
.work-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px 48px; align-items: end; margin-top: 24px; }
.work-intro .lede { margin: 0; }
.work-intro .controls { justify-items: end; }
.work-intro .filters { justify-content: flex-end; }
@media (max-width: 900px) {
  .work-intro { grid-template-columns: 1fr; }
  .work-intro .controls { justify-items: start; }
  .work-intro .filters { justify-content: flex-start; }
}

/* The list */
.work-list .wrap { display: grid; gap: clamp(64px, 7vw, 110px); }
.work-list .rgrid { margin: 0; }
.wgroup { display: grid; gap: 24px; }
.wgroup .group-title { font-size: clamp(30px, 3.4vw, 50px); margin: 0; }

/* The viewer */
.viewer {
  border: 0; padding: 0; margin: auto; width: min(1320px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  background: var(--pit); color: var(--chalk); overflow: hidden; box-shadow: 0 40px 120px rgba(0, 0, 0, .7);
}
.viewer[open] { display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
.viewer::backdrop { background: rgba(5, 5, 6, .88); }
@media (prefers-reduced-motion: no-preference) {
  .viewer[open] { animation: v-in .35s var(--ease-out); }
}
@keyframes v-in { from { transform: translateY(18px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
.v-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #111216; }
.v-frame { position: relative; aspect-ratio: 16 / 10; max-height: calc(100dvh - 140px); background: #111216; overflow: hidden; touch-action: pan-y; }
.v-frame.studio-shot { background: #e6e6eb; }
.v-frame img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
.v-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: 0; cursor: pointer;
  background: rgba(12, 13, 16, .78); color: #fff; font: 700 32px/1 var(--face); display: grid; place-items: center;
  transition: background-color .15s, transform .15s var(--ease-out);
}
.v-nav:hover { background: var(--banner); }
.v-nav:active { transform: translateY(-50%) scale(.94); }
.v-nav.prev { left: 14px; }
.v-nav.next { right: 14px; }
.v-count { position: absolute; left: 14px; top: 14px; background: rgba(12, 13, 16, .78); color: #fff; font-size: 13px; font-weight: 700; padding: 5px 10px; font-variant-numeric: tabular-nums; }
.v-thumbs { display: flex; gap: 8px; padding: 10px; background: var(--pit-2); overflow-x: auto; }
.v-thumbs button { flex: 0 0 auto; width: 104px; aspect-ratio: 16 / 10; padding: 0; border: 0; background: #e6e6eb; cursor: pointer; opacity: .5; transition: opacity .15s; position: relative; }
.v-thumbs button:hover, .v-thumbs button[aria-current="true"] { opacity: 1; }
.v-thumbs button[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--banner); }
.v-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-info { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 30px 28px 24px; overflow-y: auto; min-height: 0; }
.v-info::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--banner) 0 58%, transparent 58% 61%, var(--chalk) 61% 66%, transparent 66%); }
.v-info h2 { font-family: var(--face); font-style: italic; font-weight: 860; font-variation-settings: "wdth" 110; font-size: clamp(26px, 2.3vw, 36px); line-height: 1; letter-spacing: -0.03em; margin: 0; padding-right: 36px; text-wrap: balance; }
.v-info p { color: #c9ccd4; }
.v-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; background: var(--pit-3); color: var(--chalk); font-size: 18px; cursor: pointer; }
.v-close:hover { background: #30343d; }
.v-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; font-size: 15px; }
.v-facts dt { color: var(--muted-d); }
.v-facts dd { margin: 0; font-weight: 650; }
.v-actions { display: grid; gap: 10px; margin-top: auto; padding-top: 8px; }
.v-actions .btn { justify-content: center; }
.v-step { display: flex; justify-content: space-between; gap: 12px; }
.v-step button { font: inherit; font-size: 14px; font-weight: 700; color: var(--muted-d); background: none; border: 0; padding: 8px 0; cursor: pointer; }
.v-step button:hover { color: var(--chalk); }
.v-step button:disabled { visibility: hidden; }
@media (max-width: 900px) {
  .viewer { width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; }
  .viewer[open] { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .v-frame { max-height: 52dvh; }
  .v-nav { width: 44px; height: 44px; font-size: 28px; }
  .v-thumbs button { width: 84px; }
  .v-info { padding: 24px 18px 20px; }
}

/* Work page controls: one row under the intro, styled for the dark band. */
.work-intro { grid-template-columns: 1fr; gap: 28px; }
.work-intro .lede { max-width: 52ch; }
.work-intro .controls { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: flex-start; }
.work-intro .filters { justify-content: flex-start; }
.work-top .filters button { background: var(--pit-2); color: var(--chalk); }
.work-top .filters button:hover { background: var(--pit-3); }
.work-top .filters button[aria-pressed="true"] { background: var(--chalk); color: var(--ink); }
.work-list { padding-top: calc(var(--cut) + clamp(40px, 5vw, 72px)); }

/* Hero stage: an oval fade that hugs the car, so the dark studio box disappears just past the car. */
.stage {
  -webkit-mask-image: radial-gradient(ellipse 50% 52% at 51% 55%, #000 58%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image: radial-gradient(ellipse 50% 52% at 51% 55%, #000 58%, transparent 100%);
  mask-composite: add;
}

/* =========================================================
   QA pass fixes
   ========================================================= */

/* Tighter rhythm: sections were separated by too much empty space, worst around the angled panels. */
:root { --gap: clamp(72px, 8vw, 128px); }
.field.studio, .field.blue { padding-block: calc(var(--gap) + var(--cut) * .35); }
.foot-cta { padding-block: clamp(56px, 6vw, 96px) 56px; }
.grid-sec .startgrid { margin-bottom: 9%; }
@media (max-width: 900px) { .startgrid { margin-bottom: 14%; } }

/* Hero stripes stop above the start-light gantry instead of running behind it. */
.livery { height: clamp(200px, 25vw, 360px); }
@media (max-width: 760px) {
  .hero h1 { font-size: clamp(56px, 17.5vw, 110px); }
  .livery { width: 70vw; height: 190px; opacity: .85; }
}

/* Phone header: keep the order button on one line next to the menu button; stripes stay behind the title only. */
.bar .btn { white-space: nowrap; }
@media (max-width: 480px) {
  .bar .wrap { gap: 12px; }
  .bar .logo img { height: 19px; }
  .bar .btn { font-size: 14px; padding: 0 14px; min-height: 40px; }
  .livery { height: 150px; }
}

/* Phone menu */
.menu-btn { display: none; }
@media (max-width: 860px) {
  .menu-btn {
    display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: var(--pit-3); color: var(--chalk);
    cursor: pointer; margin-left: 10px; padding: 0;
  }
  .menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: transform .2s var(--ease-out), opacity .2s; }
  .menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; }
  .menu-btn span::before { top: -6px; }
  .menu-btn span::after { top: 6px; }
  .menu-btn[aria-expanded="true"] span { background: transparent; }
  .menu-btn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
  .bar nav.open {
    display: grid; position: absolute; left: 0; right: 0; top: 100%; margin: 0; gap: 0; z-index: 20;
    background: var(--pit-2); padding: 8px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px));
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  }
  .bar nav.open a { padding: 14px 4px; font-size: 18px; color: var(--chalk); }
  .bar nav.open a + a { box-shadow: inset 0 1px 0 var(--pit-3); }
}

/* Brief builder on phones: door preview, then the form, then the summary and Send button. */
@media (max-width: 960px) {
  .builder .preview { display: contents; }
  .builder .door { order: -1; }
  .builder .ticket { order: 2; }
}

/* "Any colour" picker, labelled so it isn't mistaken for another swatch. */
.anycol { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 6px; padding: 0 10px 0 4px; height: 40px; background: var(--studio-2); font-size: 14px; font-weight: 700; cursor: pointer; }
.anycol input[type="color"] { width: 32px; height: 32px; }
.form .anycol { display: inline-flex; margin-bottom: 0; }

/* A blue band that ends the page runs straight into the footer banner, with no dark wedge between. */
main > .field.blue:last-child { clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); padding-bottom: calc(var(--gap) + 14px); }

/* Price rows: "Choose" is a real button, not a small underlined word. */
.price-row .pick {
  text-decoration: none; background: var(--chalk); color: var(--ink); font-style: italic; font-weight: 800; font-size: 15px;
  padding: 11px 18px; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); transition: background-color .15s, transform .15s var(--ease-out);
}
.price-row .pick:hover { background: var(--banner); color: #fff; }
.price-row .pick:active { transform: scale(.96); }
.price-row .pick:focus-visible { outline: 3px solid var(--banner); outline-offset: 3px; clip-path: none; }
@media (max-width: 900px) { .price-row .pick { padding: 9px 16px; } }

/* Keyboard users can jump past the header straight to the content. */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--banner); color: #fff; font-weight: 800; padding: 10px 16px; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 12px; }

/* Work page search */
.work-search { position: relative; flex: 1 1 260px; max-width: 360px; }
.work-search input {
  width: 100%; font: inherit; font-size: 16px; color: var(--chalk); background: var(--pit-2); border: 2px solid transparent; border-radius: 0;
  padding: 11px 14px 11px 40px; transition: border-color .15s;
}
.work-search input::placeholder { color: var(--muted-d); }
.work-search input:focus { outline: none; border-color: var(--banner); }
.work-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; stroke: var(--muted-d); fill: none; stroke-width: 2.4; pointer-events: none; }

/* On phones, long filter rows scroll sideways instead of stacking into a wall of buttons. */
@media (max-width: 760px) {
  .work-intro .filters {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px))); padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px));
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent);
  }
  .work-intro > *, .work-intro .controls { min-width: 0; max-width: 100%; }
  .work-intro .filters { flex: 1 1 100%; width: calc(100% + 2 * max(var(--gutter), env(safe-area-inset-left, 0px))); min-width: 0; }
  .work-intro .filters::-webkit-scrollbar { display: none; }
  .work-intro .filters button { flex: 0 0 auto; white-space: nowrap; }
  .work-search { max-width: none; flex-basis: 100%; }
}

/* Not-found page */
.lost { min-height: 70vh; display: grid; align-content: center; gap: 24px; padding-block: 80px; }
.lost h1 { font-size: clamp(56px, 11vw, 168px); }
.lost .btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* Show more on the Work page */
.more-row { display: flex; justify-content: center; margin-top: 40px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Install guide steps as start lights too: red, red, red, red, then green. */
.track > li::before, .track > li:last-child::before { border-radius: 50%; background: var(--light-off); box-shadow: 0 0 0 5px var(--studio-2); transition: background-color .15s, box-shadow .15s; }
.track.in > li::before { background: var(--light); box-shadow: 0 0 0 5px var(--studio-2), 0 0 18px rgba(255, 42, 26, .55); }
.track.in > li:last-child::before { background: #27e06f; box-shadow: 0 0 0 5px var(--studio-2), 0 0 20px rgba(39, 224, 111, .55); }
.track.in > li:nth-child(1)::before { transition-delay: .2s; }
.track.in > li:nth-child(2)::before { transition-delay: .5s; }
.track.in > li:nth-child(3)::before { transition-delay: .8s; }
.track.in > li:nth-child(4)::before { transition-delay: 1.1s; }
.track.in > li:nth-child(5)::before { transition-delay: 1.5s; }

/* "Pay once you love it": the no-risk promise, lit with the green start light. */
.norisk { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; background: var(--pit-2); padding: 18px 20px; margin: 28px 0 18px; box-shadow: inset 4px 0 0 #27e06f; }
.norisk i, .norisk-line i { width: 14px; height: 14px; border-radius: 50%; background: #27e06f; box-shadow: 0 0 14px rgba(39, 224, 111, .6); margin-top: 6px; }
.norisk strong { display: block; font-style: italic; font-weight: 860; font-variation-settings: "wdth" 112; font-size: 22px; letter-spacing: -0.02em; margin-bottom: 4px; }
.norisk p { color: var(--muted-d); font-size: 16px; }
.norisk-line { display: flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 650; color: var(--chalk); }
.norisk-line i { width: 10px; height: 10px; margin: 0; flex: none; }

/* Instagram: header icon, phone-menu link and the follow band before the footer. */
.bar .ig { display: grid; place-items: center; width: 40px; height: 40px; color: var(--muted-d); transition: color .15s; margin-right: -12px; }
.bar .ig:hover { color: var(--chalk); }
.bar .ig svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.bar .ig .dot { fill: currentColor; stroke: none; }
.bar nav .nav-ig { display: none; }
@media (max-width: 860px) { .bar .ig { margin-left: auto; margin-right: 0; } .bar .ig + .btn { margin-left: 0; } .bar nav.open .nav-ig { display: block; } }
@media (max-width: 480px) { .bar .ig { display: none; } .bar .ig + .btn { margin-left: auto; } }
.ig-sec { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.ig-sec .lede { margin: 24px 0 32px; }
.ig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ig-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .25s var(--ease-out), filter .25s; }
.ig-grid:hover img { filter: brightness(.85); }
.ig-grid img:hover { transform: scale(1.03); filter: none; }
@media (max-width: 860px) { .ig-sec { grid-template-columns: 1fr; gap: 40px; } }