/* ==========================================================================
   Formula Mobile Car Detailing — design system
   Architecture follows the Premier Mobile Detailing build (dark premium,
   Bebas display / DM Sans body, token-driven). Palette is Formula's own
   racing red #F5342D lifted from the existing brand mark.
   ========================================================================== */

@font-face {
  font-family: 'Syne';
  src: url('/assets/fonts/syne-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  /* Basic Latin only. Google serves latin-ext first and that subset carries no
     A-Z, so taking the first block silently falls back to the system stack. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bebas Neue';
  src: url('/assets/fonts/bebas-neue-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/dm-sans-latin.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* surfaces */
  --bg: #0a0a0d;
  --bg-raise: #101015;
  --surface: #16161c;
  --surface-2: #1d1d25;
  --border: #2a2a33;
  --border-soft: #1f1f27;

  /* brand — Formula racing red */
  --brand: #f5342d;
  --brand-hot: #ff5049;
  --brand-deep: #c3251f;
  --brand-rgb: 245, 52, 45;

  /* type */
  --fg: #ffffff;
  --fg-muted: #9ba1ae;
  --fg-dim: #6b7280;

  --font-display: 'Bebas Neue', Impact, sans-serif;
  /* second display face, used only for the hero statement */
  --font-hero: 'Syne', 'Bebas Neue', Impact, sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  --radius: 10px;
  --radius-lg: 16px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shell: 1240px;
  --nav-h: 92px;
  --logo-h: 72px;      /* the mark is the brand; it earns the space */
  --logo-w: 216px;     /* 3:1 artwork — the centre track reserves this */

  /* ---- glass ----
     Tuned against Glossedout's heaviest treatment (blur 24 / saturate 185).
     The saturation boost is what stops a dark backdrop reading as flat grey
     behind the blur — it pulls the ambient colour through the panel. */
  --glass-bg: rgba(255, 255, 255, 0.075);
  --glass-bg-hi: rgba(255, 255, 255, 0.115);
  --glass-brd: rgba(255, 255, 255, 0.17);
  --glass-brd-hi: rgba(255, 255, 255, 0.3);
  --glass-blur: blur(22px) saturate(180%);
  --glass-blur-lite: blur(12px) saturate(150%);
  /* top-edge catch-light + a faint bottom bounce: what reads as "thickness" */
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.17),
                 inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  --glass-drop: 0 26px 60px -24px rgba(0, 0, 0, 0.88);
}

/* ==========================================================================
   Ambient light field.
   Glass is a refraction effect — over flat black it renders as a slightly
   lighter rectangle and nothing more. These fixed, heavily-blurred pools give
   every panel something to bend, and are why the blur reads as glass rather
   than as opacity. Fixed rather than scrolling, so panels shift against the
   light as the page moves.
   ========================================================================== */
body::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(46% 38% at 80% 6%, rgba(var(--brand-rgb), 0.42), transparent 68%),
    radial-gradient(42% 34% at 8% 28%, rgba(64, 116, 214, 0.34), transparent 70%),
    radial-gradient(50% 42% at 66% 70%, rgba(var(--brand-rgb), 0.24), transparent 72%),
    radial-gradient(38% 32% at 16% 92%, rgba(104, 88, 200, 0.30), transparent 70%),
    radial-gradient(34% 28% at 94% 52%, rgba(0, 168, 176, 0.16), transparent 70%);
  filter: blur(36px);
  animation: aurora 34s ease-in-out infinite alternate;
}

@keyframes aurora {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(1.5%, 1%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }

/* The UA rule for [hidden] is display:none, but any author rule that sets
   display — .btn is inline-flex — beats it on specificity, so hidden elements
   keep showing. This is the fix for the whole document, not just buttons. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--brand); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.95;
  margin: 0 0 0.4em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.75rem, 7vw, 5.25rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); }
h4 { font-size: 1.15rem; }
p  { margin: 0 0 1.1em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 1rem;
  display: block;
}
.lede { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--fg-muted); max-width: 62ch; }
.muted { color: var(--fg-muted); }

/* the brand mark is italic — echo that on display accents */
.slant { font-style: italic; transform: skewX(-6deg); display: inline-block; }
.hl { color: var(--brand); }

/* ---------- layout ---------- */
.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}
section { position: relative; }
.band { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.band--tight { padding: clamp(3rem, 6vw, 5rem) 0; }
.band--raise {
  background: rgba(255, 255, 255, 0.022);
  backdrop-filter: var(--glass-blur-lite);
  -webkit-backdrop-filter: var(--glass-blur-lite);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* carbon-fibre hex mesh, Premier's texture treatment */
.mesh{position:relative;isolation:isolate}
.mesh::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--hex);opacity:.5;
}
.mesh > * { position: relative; z-index: 1; }

.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  border: 0;
  margin: 0;
}

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.9rem;
  background: var(--btn-bg);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    background 0.25s var(--ease);
  will-change: transform;
}
.btn:hover {
  background: var(--brand-hot);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(var(--brand-rgb), 0.55);
}
.btn:active { transform: translateY(0); }

/* sheen sweep — Premier's premium interaction cue */
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: skewX(-20deg);
  transition: left 0.75s var(--ease);
}
.btn:hover::after { left: 140%; }

.btn--ghost {
  --btn-bg: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  color: var(--fg);
  backdrop-filter: var(--glass-blur-lite);
  -webkit-backdrop-filter: var(--glass-blur-lite);
  box-shadow: var(--glass-inset);
}
.btn--ghost:hover {
  background: var(--glass-bg-hi);
  border-color: rgba(var(--brand-rgb), 0.6);
  box-shadow: none;
}
.btn--lg { padding: 1.1rem 2.4rem; font-size: 0.88rem; }
.btn--block { width: 100%; }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  height: var(--nav-h);
  z-index: 90;
  display: flex;
  align-items: center;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
    backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
/* the bar itself is only a positioning frame now; the pill carries the glass */
.nav.is-stuck { background: transparent; border-bottom-color: transparent; }
.nav__in {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav__logo img{height:var(--logo-h);width:auto;display:block}
.nav__links {
  display: flex;
  gap: 1.9rem;
  margin-left: auto;
  align-items: center;
  list-style: none;
  padding: 0;
}
.nav__links a {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  position: relative;
  padding: 0.35rem 0;
  transition: color 0.25s var(--ease);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--brand);
  transition: width 0.35s var(--ease);
}
.nav__links a:hover,
.nav__links a[aria-current='page'] { color: var(--fg); }
.nav__links a:hover::after,
.nav__links a[aria-current='page']::after { width: 100%; }

.nav__call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--fg);
  transition: color 0.25s var(--ease);
}
.nav__call:hover { color: var(--brand); }

.nav__burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  color: var(--fg);
  align-items: center;
  justify-content: center;
}

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(10, 10, 13, 0.97);
  backdrop-filter: blur(18px);
  display: none;
  flex-direction: column;
  padding: 6rem 2rem 2rem;
  gap: 0.4rem;
}
.drawer[data-open='true'] { display: flex; }
.drawer a {
  font-family: var(--font-display);
  font-size: 2rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.drawer__close {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  background: none;
  border: 1px solid var(--border);
  color: var(--fg);
  width: 42px;
  height: 42px;
  border-radius: 8px;
  font-size: 1.3rem;
  cursor: pointer;
}

/* ==========================================================================
   SPLASH — the Tesla `dx-splash` mechanic, rebuilt.
   Two full-viewport slides stacked at identical coordinates inside a sticky
   wrapper. A ~20px scroll runway (or the switch button) flips one state class
   on the wrapper; only opacity animates, so the car swaps without moving.
   ========================================================================== */
.splash {
  position: relative;
  /* one viewport of stage + a runway per extra slide. The runway is a TRIGGER
     track (discrete state flips), not a scrub track — exactly as Tesla does it. */
  height: calc(100vh + 140vh);
  min-height: 640px;
}
.splash__wrap {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
}
.splash__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.5s ease-in-out;
  display: grid;
  align-items: center;
  pointer-events: none;
}
/* only the active slide is visible and interactive — everything else is a
   stacked, pixel-identical layer underneath. Nothing translates: opacity only. */
.splash[data-active='1'] .splash__slide[data-slide='1'],
.splash[data-active='2'] .splash__slide[data-slide='2'],
.splash[data-active='3'] .splash__slide[data-slide='3'] {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}

.splash__media { position: absolute; inset: 0; }
.splash__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.splash__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      100deg,
      rgba(10, 10, 13, 0.94) 0%,
      rgba(10, 10, 13, 0.72) 38%,
      rgba(10, 10, 13, 0.15) 68%,
      transparent 100%
    ),
    linear-gradient(to top, var(--bg) 2%, transparent 45%);
}
.splash__body {
  position: relative;
  z-index: 2;
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
  max-width: var(--shell);
  padding-top: var(--nav-h);
}
.splash__inner { max-width: 34rem; }
.splash__title { margin-bottom: 0.1em; }
.splash__tier {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  color: var(--brand);
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 0.9rem;
}
.splash__copy { color: var(--fg-muted); max-width: 34ch; margin-bottom: 1.9rem; }
.splash__cta { display: flex; gap: 0.8rem; flex-wrap: wrap; }

.splash__switch {
  margin-top: 2.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 0;
  padding: 0.4rem 0;
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s var(--ease);
}
.splash__switch:hover { color: var(--fg); }
.splash__switch svg { transition: transform 0.35s var(--ease); }
.splash__switch:hover svg { transform: translateY(3px); }

/* progress pips */
.splash__pips {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.55rem;
  z-index: 3;
}
.splash__pip {
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.35s var(--ease);
}
.splash__pip[aria-selected='true'] { background: var(--brand); }

/* ---------- cards / grids ---------- */
.grid { display: grid; gap: 1.4rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg);
  padding: 1.9rem;
  overflow: hidden;
  box-shadow: var(--glass-inset), var(--glass-drop);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease),
    background 0.4s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-brd-hi);
  background: var(--glass-bg-hi);
}

/* cursor-tracking spotlight, Premier's card treatment */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  background: radial-gradient(
    360px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--brand-rgb), 0.13),
    transparent 62%
  );
  pointer-events: none;
}
.card:hover::before { opacity: 1; }
.card > * { position: relative; z-index: 1; }

/* Vertical falloff across the pane. A flat fill reads as a translucent box;
   the gradient is what makes it read as a sheet of glass catching light. */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0.02) 28%,
    transparent 60%
  );
}

.card__num {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--brand);
  letter-spacing: 0.18em;
  display: block;
  margin-bottom: 0.6rem;
}
.card__title { margin-bottom: 0.5rem; }
.card p { color: var(--fg-muted); font-size: 0.95rem; margin-bottom: 0; }

.card--media { padding: 0; }
.card--media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.card--media .card__pad { padding: 1.5rem 1.7rem 1.8rem; }

/* service list ticks */
.ticks { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.5rem; }
.ticks li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--fg-muted);
  font-size: 0.93rem;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}

/* ---------- stats ---------- */
.stat { text-align: center; }
.stat__n {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.5vw, 4rem);
  color: var(--fg);
  line-height: 1;
  display: block;
}
.stat__l {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* ---------- gallery ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.1rem; }
.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-brd);
  aspect-ratio: 4 / 3;
  background: var(--glass-bg);
  box-shadow: var(--glass-inset), var(--glass-drop);
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.tile:hover img { transform: scale(1.07); }
.tile figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 2.4rem 1.2rem 1rem;
  background: linear-gradient(to top, rgba(10, 10, 13, 0.92), transparent);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------- quotes ---------- */
.quote {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  padding: 1.9rem;
  box-shadow: var(--glass-inset), var(--glass-drop);
}
.quote p { font-size: 1.02rem; color: #e6e8ec; }
.quote cite {
  font-style: normal;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand);
}

/* ---------- forms ---------- */
.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 0.45rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: var(--glass-blur-lite);
  -webkit-backdrop-filter: var(--glass-blur-lite);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.15);
}
.field textarea { min-height: 140px; resize: vertical; }
.field--split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ---------- footer ---------- */
.foot {
  background: rgba(7, 7, 10, 0.55);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-brd);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 4rem 0 2rem;
}
.foot__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
}
.foot h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 1.1rem;
}
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.foot a { color: var(--fg-muted); font-size: 0.92rem; transition: color 0.25s var(--ease); }
.foot a:hover { color: var(--brand); }
/* width:auto is load-bearing — without it the img's width="900" attribute
   wins over the CSS height and the mark renders 900x58, badly stretched. */
.foot__logo img { height: 54px; width: auto; margin-bottom: 1.1rem; }
.foot__base {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--fg-dim);
}

/* ---------- sticky mobile call bar ---------- */
.callbar {
  position: fixed;
  inset: auto 0 0;
  z-index: 80;
  display: none;
  gap: 1px;
  background: var(--glass-brd);
  border-top: 1px solid var(--glass-brd);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.callbar a {
  flex: 1;
  padding: 0.95rem;
  text-align: center;
  background: rgba(16, 16, 21, 0.72);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.callbar a.is-brand { background: var(--brand); color: #fff; }

/* ---------- scroll reveal ----------
   Scoped to .js so the hidden start state only applies when JS can undo it.
   Without JS (or if enhance.js fails) every section renders normally. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- breadcrumbs ---------- */
.crumbs {
  font-size: 0.78rem;
  color: var(--fg-dim);
  padding-top: calc(var(--nav-h) + 2rem);
}
.crumbs a { color: var(--fg-muted); }
.crumbs a:hover { color: var(--brand); }

/* page header for interior pages */
.phead {
  padding: calc(var(--nav-h) + 3.5rem) 0 3rem;
  border-bottom: 1px solid var(--border-soft);
  position: relative;
  overflow: hidden;
}
.phead--img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--bg) 30%, rgba(10, 10, 13, 0.5)),
    var(--phead-img) center / cover;
  z-index: -1;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1240px) {
  .nav__links, .nav__call { display: none; }
  .nav__burger { display: inline-flex; }
  .callbar { display: flex; }
  body { padding-bottom: 52px; }
  .splash__pips { bottom: 4.6rem; }
  .field--split { grid-template-columns: 1fr; }
  .splash__scrim {
    background: linear-gradient(to top, var(--bg) 6%, rgba(10, 10, 13, 0.55) 45%, rgba(10, 10, 13, 0.75));
  }
}
@media (max-width: 560px) {
  .foot__grid { grid-template-columns: 1fr; }
  .foot__base { flex-direction: column; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* match Tesla: the crossfade is disabled outright, states still switch */
  .splash__slide { transition: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- print ---------- */
@media print {
  .nav, .callbar, .splash__switch, .splash__pips { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- lightbox (enhance.js) ---------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: rgba(6, 6, 9, 0.94);
  backdrop-filter: blur(8px);
}
.lb[data-open] { display: flex; }
.lb img {
  max-width: 100%;
  max-height: 92vh;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9);
}
.lb__x {
  position: absolute;
  top: 1.4rem;
  right: 1.6rem;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.lb__x:hover { background: var(--brand); border-color: var(--brand); }

/* ---------- suburb link cloud ---------- */
.arealinks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.arealinks a {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--glass-brd);
  border-radius: 999px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-lite);
  -webkit-backdrop-filter: var(--glass-blur-lite);
  box-shadow: var(--glass-inset);
  font-size: 0.84rem;
  color: var(--fg-muted);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
    background 0.25s var(--ease), transform 0.25s var(--ease);
}
.arealinks a:hover {
  color: #fff;
  background: var(--surface-2);
  border-color: rgba(var(--brand-rgb), 0.55);
  transform: translateY(-2px);
}

/* ---------- selector pitch (homepage -> /services/select/) ---------- */
.pitch {
  margin-top: 2.5rem;
  padding: 1.9rem 2.1rem;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  flex-wrap: wrap;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-inset), var(--glass-drop);
  position: relative;
  overflow: hidden;
}
.pitch::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 140% at 8% 50%, rgba(var(--brand-rgb), 0.16), transparent 70%);
}
.pitch > * { position: relative; }
.pitch h3 { margin: 0 0 0.3rem; }
.pitch p { margin: 0; font-size: 0.92rem; }
.pitch .eyebrow { margin-bottom: 0.5rem; }
.pitch .btn { margin-left: auto; flex-shrink: 0; }

/* a miniature of the coverflow, so the CTA shows what it opens */
.pitch__art {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  perspective: 300px;
}
.pitch__art span {
  width: 26px;
  height: 62px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  transition: transform 0.5s var(--ease), background 0.5s var(--ease);
}
.pitch__art span:nth-child(1) { transform: rotateY(26deg) scale(0.82); }
.pitch__art span:nth-child(2) {
  background: rgba(var(--brand-rgb), 0.5);
  border-color: rgba(var(--brand-rgb), 0.75);
  height: 76px;
}
.pitch__art span:nth-child(3) { transform: rotateY(-26deg) scale(0.82); }
.pitch:hover .pitch__art span:nth-child(1) { transform: rotateY(30deg) scale(0.78) translateX(-3px); }
.pitch:hover .pitch__art span:nth-child(3) { transform: rotateY(-30deg) scale(0.78) translateX(3px); }

@media (max-width: 700px) {
  .pitch { flex-direction: column; align-items: flex-start; text-align: left; }
  .pitch .btn { margin-left: 0; width: 100%; }
}

/* ---------- form error (lead-form.js) ---------- */
.formerr {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  font-size: 0.88rem;
  color: #ffd9d7;
  background: rgba(var(--brand-rgb), 0.12);
  border: 1px solid rgba(var(--brand-rgb), 0.45);
  border-radius: var(--radius);
}

/* ==========================================================================
   FAQ accordion — ports the FAQAccordion pattern from Glossedout.
   Built on native <details>/<summary>: keyboard-operable and fully usable
   with JS disabled, which a div-plus-onclick implementation is not.
   ========================================================================== */
.faq { display: grid; gap: 0.7rem; }

.faq__item {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-inset), var(--glass-drop);
  overflow: hidden;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.faq__item[open] {
  border-color: rgba(var(--brand-rgb), 0.42);
  background: var(--glass-bg-hi);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.15rem 1.5rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.18rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
  transition: color 0.25s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: #fff; }
.faq__item[open] .faq__q { color: #fff; }

.faq__ic {
  flex-shrink: 0;
  color: var(--brand);
  transition: transform 0.4s var(--ease);
}
.faq__item[open] .faq__ic { transform: rotate(135deg); }

.faq__a {
  padding: 0 1.5rem 1.35rem;
  color: var(--fg-muted);
  font-size: 0.96rem;
  max-width: 78ch;
}
.faq__a p { margin: 0; }

/* details has no transitionable height; animate the content instead */
.faq__item[open] .faq__a { animation: faqIn 0.4s var(--ease); }
@keyframes faqIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__item[open] .faq__a { animation: none; }
  .faq__ic { transition: none; }
}

/* the hero is a logo splash and a carousel; the page still needs one H1 */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   BOOKING WIZARD — adopts the 4-step flow from
   premiermobiledetailing.com.au/booking, in Formula's glass language.
   ========================================================================== */
.bk { max-width: 860px; }

.bk__rail {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  flex-wrap: wrap;
}
.bk__dot {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-width: 130px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--border-soft);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.bk__dot span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 0.66rem;
  flex-shrink: 0;
}
.bk__dot[data-state='now']  { color: var(--brand); border-bottom-color: var(--brand); }
.bk__dot[data-state='done'] { color: #fff; border-bottom-color: rgba(var(--brand-rgb), 0.5); }
.bk__dot[data-state='done'] span { background: var(--brand); border-color: var(--brand); color: #fff; }

.bk__form { padding: 2rem; }
.bk__step { border: 0; margin: 0; padding: 0; }
.bk__legend {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0;
  margin-bottom: 0.35rem;
}
.bk__hint { color: var(--fg-muted); font-size: 0.92rem; margin-bottom: 1.4rem; }
.bk__sublabel {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 1.6rem 0 0.7rem;
}

.bk__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.7rem; }
.bk__tiles--2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bk__tiles--4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.bk__tile {
  position: relative;
  display: block;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--glass-brd);
  cursor: pointer;
  transition: border-color 0.28s var(--ease), background 0.28s var(--ease),
    transform 0.28s var(--ease);
}
.bk__tile:hover { background: var(--glass-bg-hi); transform: translateY(-2px); }
.bk__tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* :has drives the selected state where supported; .is-on is the JS fallback */
.bk__tile:has(input:checked),
.bk__tile.is-on {
  border-color: var(--brand);
  background: rgba(var(--brand-rgb), 0.13);
  box-shadow: 0 0 0 1px rgba(var(--brand-rgb), 0.35), 0 0 30px -10px rgba(var(--brand-rgb), 0.5);
}
.bk__tile:focus-within { outline: 2px solid var(--brand); outline-offset: 3px; }

.bk__tiletitle {
  display: block;
  font-family: var(--font-display);
  font-size: 1.12rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 0.25rem;
}
.bk__tilesub { display: block; font-size: 0.8rem; color: var(--fg-muted); line-height: 1.45; }

.bk__nav {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin-top: 1.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--glass-brd);
}
.bk__nav [data-next-step],
.bk__nav [data-submit] { margin-left: auto; }

.bk__alt { margin-top: 1.4rem; font-size: 0.9rem; text-align: center; }
.bk__alt a { color: var(--brand); }

/* Without JS every step stays visible and the form posts natively — a wizard
   that hides four fifths of itself and then fails to run is worse than a long
   form. The step buttons are meaningless in that state, so they go. */
.bk__form:not(.is-wizard) .bk__step + .bk__step { margin-top: 2.6rem; }
.bk__form:not(.is-wizard) .bk__nav [data-back],
.bk__form:not(.is-wizard) .bk__nav [data-next-step] { display: none; }
.bk__form:not(.is-wizard) [data-submit] { display: inline-flex !important; }

@media (max-width: 560px) {
  .bk__form { padding: 1.4rem; }
  .bk__dot { min-width: 0; font-size: 0; gap: 0; justify-content: center; }
  .bk__dot span { font-size: 0.66rem; }
  .bk__nav { flex-wrap: wrap; }
  .bk__nav .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   FILM GRAIN
   A fixed, very low-opacity noise plate over the whole page. Large flat dark
   areas band badly on 8-bit displays and read as plastic; grain breaks the
   gradient steps up and gives the surface something to hold. Colour scheme is
   untouched — this is luminance only, at 3.5%.
   ========================================================================== */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.035;
  background-image: var(--hex);
}

/* the hex mesh reads too faint now the grain carries the fine detail */

.band > * { position: relative; z-index: 1; }

/* ==========================================================================
   MARQUEE — one seamless loop, no JS.
   The track holds its children TWICE and translates exactly -50%, so the
   second copy lands where the first began and the seam is invisible. Duration
   is set per-instance from the item count so speed stays constant whatever
   the content length.
   ========================================================================== */
.mq { overflow: hidden; position: relative; }
.mq::before,
.mq::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 8vw, 140px);
  z-index: 2;
  pointer-events: none;
}
.mq::before { left: 0;  background: linear-gradient(to right, var(--bg), transparent); }
.mq::after  { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }
.band--raise .mq::before { background: linear-gradient(to right, #0e0e13, transparent); }
.band--raise .mq::after  { background: linear-gradient(to left,  #0e0e13, transparent); }

.mq__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: mqrun var(--mq-dur, 60s) linear infinite;
  will-change: transform;
}
.mq--rev .mq__track { animation-direction: reverse; }
@keyframes mqrun { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* hovering to read a review shouldn't be a chase */
.mq:hover .mq__track,
.mq:focus-within .mq__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .mq__track { animation: none; }
  .mq { overflow-x: auto; }   /* still reachable, just scrolled by hand */
}

/* ---- review cards in the marquee ---- */
.mq .quote {
  width: min(78vw, 420px);
  flex: 0 0 auto;
  margin: 0;
  white-space: normal;
}
.mq .quote p {
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rev__stars { color: var(--brand); letter-spacing: 0.16em; font-size: 0.82rem; margin-bottom: 0.6rem; }

/* ---- gallery marquee tiles ---- */
.mq--tiles .mq__track { gap: 0.9rem; }
.mq__tile {
  flex: 0 0 auto;
  width: clamp(220px, 26vw, 330px);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-inset), var(--glass-drop);
  position: relative;
}
.mq__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.mq__tile:hover img { transform: scale(1.06); }
.mq__rows { display: grid; gap: 0.9rem; }

/* ==========================================================================
   CERAMIC COATING SCROLL FILM
   Sticky viewport-height canvas; the stage panels scrolling past it are what
   drive the camera. Their heights ARE the pacing.
   ========================================================================== */
.coat { position: relative; background: #07070a; }

.coat__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  /* NO position:relative on inner wrappers below — sticky is already
     positioned, and adding a containing block silently un-sticks the frame. */
}
.coat[data-mode='live'] .coat[data-mode='live'] .coat__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(7,7,10,.97) 0%, rgba(7,7,10,.9) 30%, rgba(7,7,10,.45) 48%, transparent 66%),
    linear-gradient(to top, rgba(7,7,10,.9) 0%, transparent 30%);
}

/* the copy rail rides on top of the sticky frame */
.coat__panels { position: relative; }
.coat__panel {
  min-height: 100vh;      /* this IS the per-stage duration */
  display: flex;
  align-items: center;
}
.coat__panel.is-on .coat__pips {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.55rem;
  z-index: 3;
}
.coat__pip {
  width: 34px; height: 3px;
  border: 0; padding: 0; border-radius: 2px;
  background: rgba(255,255,255,.2);
  transition: background .4s var(--ease);
}
.coat__pip[aria-selected='true'] { background: var(--brand); }

.coat[data-mode='loading'] @media (max-width: 820px) {
  .coat__scrim {
    background:
      linear-gradient(to top, rgba(7,7,10,.95) 8%, rgba(7,7,10,.55) 45%, rgba(7,7,10,.8));
  }
  .coat__panel { min-height: 92vh; }
  }

/* ---------- script face ----------
   Yellowtail echoes the brush script in the logo's "Paint Correction and
   Coatings" lockup, so the hero subheading reads as part of the same mark. */
@font-face {
  font-family: 'Yellowtail';
  src: url('/assets/fonts/yellowtail-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Basic Latin. Google serves latin-ext FIRST in its CSS, and that subset has
     no A-Z at all — take it by mistake and every glyph silently falls back to
     `cursive`, which on Windows is Comic Sans. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ---------- coating film background ----------
   Held at 50% so it reads as texture behind the copy rather than competing
   with it. The footage is already desaturated in the encode; the grayscale
   filter is a guard in case a source clip is ever swapped in with colour. */
.coat__vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:grayscale(1);
  opacity:0;transition:opacity 1s var(--ease);
}
/* one film per stage, stacked and crossfaded — the same opacity-only swap the
   hero uses. Only the active one is ever playing. */
.coat__vid.is-on{opacity:.5}
@media (prefers-reduced-motion: reduce){ .coat__vid{transition:none} }

/* ==========================================================================
   Footer — tightened up
   ========================================================================== */
.foot{padding:5rem 0 2rem;position:relative}
/* a hairline of brand colour to close the page rather than a flat edge */
.foot::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--brand-rgb),.55),transparent);
}
.foot__grid{grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:3rem 2.5rem;align-items:start}
.foot__logo{margin-bottom:.2rem}
.foot h4{
  font-size:.68rem;letter-spacing:.2em;color:var(--fg-dim);
  padding-bottom:.7rem;margin-bottom:1.1rem;
  border-bottom:1px solid var(--border-soft);
}
.foot ul{gap:.65rem}
.foot a{position:relative;display:inline-block}
.foot a:not(.btn)::after{
  content:'';position:absolute;left:0;bottom:-2px;height:1px;width:0;
  background:var(--brand);transition:width .3s var(--ease);
}
.foot a:not(.btn):hover::after{width:100%}

/* contact column reads as data, not as links in a list */
.foot__line{display:flex;gap:.6rem;align-items:baseline;color:var(--fg-muted);font-size:.92rem}
.foot__line b{
  font-family:var(--font-body);font-weight:700;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-dim);min-width:3.6rem;flex:0 0 auto;
}
.foot__phone{
  font-family:var(--font-display);font-size:1.55rem;letter-spacing:.03em;
  color:var(--fg);display:inline-block;margin-bottom:.9rem;
  transition:color .25s var(--ease);
}
.foot__phone:hover{color:var(--brand)}

.foot__base{
  margin-top:3.5rem;padding-top:1.5rem;
  border-top:1px solid var(--border-soft);
  font-size:.8rem;align-items:center;
}
.foot__base a{color:var(--fg-dim)}
.foot__base a:hover{color:var(--brand)}

@media (max-width:900px){ .foot__grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .foot{padding-top:3.5rem} }

/* ==========================================================================
   COATING STAGES — display word + numbered glass card
   Scale comes from the word, detail from the card. The word is allowed to
   bleed past the viewport exactly as it does in the reference layout; that
   clipping is the point, not an accident.
   ========================================================================== */
.coat__panel{
  min-height:100vh;display:grid;align-content:center;
  width:min(100% - 2.5rem,var(--shell));margin-inline:auto;
  position:relative;
}

.coat__word{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(4.5rem,15vw,13rem);
  line-height:.82;
  letter-spacing:.005em;
  text-transform:uppercase;
  color:rgba(255,255,255,.93);
  white-space:nowrap;
  margin-left:-.06em;
  margin-bottom:-.06em;
  text-shadow:0 24px 70px rgba(0,0,0,.75);
  /* parallax: coating.js writes --p (-1..1) as the panel crosses the viewport */
  transform:translate3d(calc(var(--p,0) * -5%),calc(var(--p,0) * -26px),0);
  will-change:transform;
}

.coat__card{
  display:flex;align-items:flex-start;gap:1.5rem;
  max-width:44rem;padding:1.7rem 1.9rem;
  border-radius:20px;
  background:rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),inset 0 -1px 0 rgba(255,255,255,.04),
             0 30px 70px -28px rgba(0,0,0,.9);
  position:relative;overflow:hidden;
  /* the card rides the opposite way to the word — that separation IS the depth */
  transform:translate3d(0,calc(var(--p,0) * 34px),0);
  will-change:transform;
}
.coat__card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.08),rgba(255,255,255,.015) 34%,transparent 66%);
}
.coat__card > *{position:relative;z-index:1}

.coat__n{
  flex:0 0 auto;display:grid;place-items:center;
  width:56px;height:56px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  font-family:var(--font-display);font-size:1.5rem;letter-spacing:.04em;
  color:#fff;
}
.coat__div{
  flex:0 0 auto;width:1px;align-self:stretch;
  background:linear-gradient(to bottom,rgba(255,255,255,.35),rgba(255,255,255,.06));
}
.coat__txt{min-width:0}
.coat__h{
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  margin:0 0 .5rem;line-height:1;
}
.coat__panel p{
  color:rgba(255,255,255,.74);
  font-size:clamp(.92rem,1.15vw,1.02rem);
  line-height:1.62;margin:0;max-width:46ch;
}

/* the whole panel eases in as it becomes the active stage */
.coat__panel{opacity:.28;transition:opacity .6s var(--ease)}
.coat__panel.is-on{opacity:1}

@media (max-width:820px){
  .coat__word{font-size:clamp(3.2rem,17vw,6rem)}
  .coat__card{flex-direction:row;gap:1rem;padding:1.3rem 1.3rem;border-radius:16px}
  .coat__n{width:44px;height:44px;font-size:1.2rem}
  .coat__panel{min-height:92vh}
}
@media (prefers-reduced-motion: reduce){
  .coat__word,.coat__card{transform:none!important}
}

/* The display word is nowrap and deliberately oversized, so on a phone it
   runs past the viewport and widens the document. Clip it at the section.
   `clip` NOT `hidden`: hidden makes this a scroll container, which kills the
   sticky video frame above it. */
.coat{overflow-x:clip}
.coat__panel{overflow-x:clip}

/* ==========================================================================
   TEN REASONS — ceramic coating page
   Numbered chip, icon, title, body in glass; the same card language as the
   coating stages so the two read as one system.
   ========================================================================== */
.rsn-band{position:relative;isolation:isolate}
.rsn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.1rem}
.rsn{
  position:relative;overflow:hidden;
  padding:1.7rem 1.6rem 1.5rem;border-radius:18px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-inset),var(--glass-drop);
  transition:transform .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.rsn::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.075),rgba(255,255,255,.012) 32%,transparent 64%);
}
.rsn > *{position:relative;z-index:1}
.rsn:hover{transform:translateY(-4px);border-color:var(--glass-brd-hi);background:var(--glass-bg-hi)}

.rsn__n{
  position:absolute;top:1.15rem;right:1.3rem;z-index:2;
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  font-family:var(--font-display);font-size:.9rem;letter-spacing:.05em;
  color:rgba(255,255,255,.62);
}
.rsn__ic{width:30px;height:30px;color:var(--brand);margin-bottom:1rem;display:block}
.rsn__t{
  font-family:var(--font-display);font-size:1.32rem;line-height:1.05;
  text-transform:uppercase;letter-spacing:.02em;margin:0 0 .55rem;padding-right:2.6rem;
}
.rsn__d{color:var(--fg-muted);font-size:.93rem;line-height:1.6;margin:0}

@media (max-width:560px){ .rsn{padding:1.4rem 1.3rem} }

/* ==========================================================================
   SITEMAP — every page, one place
   The page is an internal-link hub, so density matters more than whitespace:
   columns that fill, and suburb chips that wrap rather than stacking 44 deep.
   ========================================================================== */
.sm__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2.2rem 2rem;
}
.sm__col{min-width:0}
.sm__h{
  font-size:1.15rem;letter-spacing:.03em;margin:0 0 .9rem;padding-bottom:.7rem;
  border-bottom:1px solid var(--glass-brd);color:#fff;
}
.sm__list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.sm__list a{
  color:var(--fg-muted);font-size:.93rem;position:relative;display:inline-block;
  transition:color .22s var(--ease),padding-left .22s var(--ease);
}
.sm__list a::before{
  content:'';position:absolute;left:0;top:.62em;width:0;height:1px;
  background:var(--brand);transition:width .22s var(--ease);
}
.sm__list a:hover{color:#fff;padding-left:14px}
.sm__list a:hover::before{width:9px}

.sm__subs{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem;
}
.sm__subs a{
  display:inline-block;padding:.5rem 1rem;border-radius:999px;
  border:1px solid var(--glass-brd);background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur-lite);backdrop-filter:var(--glass-blur-lite);
  font-size:.84rem;color:var(--fg-muted);
  transition:color .22s var(--ease),border-color .22s var(--ease),
             background .22s var(--ease),transform .22s var(--ease);
}
.sm__subs a:hover{
  color:#fff;background:var(--surface-2);
  border-color:rgba(var(--brand-rgb),.55);transform:translateY(-2px);
}

/* ==========================================================================
   HEXAGON MESH — the single background texture for the whole site
   Replaces the diagonal "carbon fibre" weave, which read as stripes at any
   real size. One honeycomb, one opacity scale, applied through .hexbg so
   there is one place to change it.
   ========================================================================== */
:root{
  --hex: url("/assets/images/carbon-mesh.png");
}
.hexbg{position:relative;isolation:isolate}
.hexbg::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-color:#08080c;
  background-image:var(--hex);
  opacity:.5;
}
/* denser, dimmer variant for large fills like the sitemap columns */
.hexbg--deep::before{background-color:#07070b;opacity:.85}


/* header, footer, reviews and the reasons/sitemap bands all take the hex */
.nav.is-stuck::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:transparent}
.nav{isolation:isolate}
.foot{background:transparent}
.foot.hexbg::before{background-color:#07070b}
.rev-band{position:relative;isolation:isolate}
.rev-band::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-color:#08080c;background-image:var(--hex);opacity:.5}
.rev-band .mq::before{background:linear-gradient(to right,#08080c,transparent)}
.rev-band .mq::after{background:linear-gradient(to left,#08080c,transparent)}
.rsn-band{position:relative;isolation:isolate}
.rsn-band::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-color:#08080c;background-image:var(--hex);opacity:.5}

/* ---------- spray overlay (spray.js) ----------
   Sits behind the glyphs, not over them, so the heading stays readable while
   the mist builds. mix-blend screen keeps it reading as light rather than as
   a flat wash. */
.spray{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  mix-blend-mode:screen;
}
h1,h2,.coat__word,.sm__h,.rsn__t{isolation:auto}

/* ---------- centred logo ----------
   The mark is the strongest thing in the header; sitting it hard-left with a
   burger opposite reads as a template. Centred it anchors the bar. */
@media (max-width: 820px){
  .nav__in{position:relative;justify-content:center}
  .nav__logo{margin:0 auto}
  .nav__logo img{height:var(--logo-h);width:auto;display:block}
  .nav__burger{position:absolute;right:0;top:50%;transform:translateY(-50%);margin-left:0}
  .nav__call{position:absolute;left:0;top:50%;transform:translateY(-50%)}
}

/* ---------- centred logo, all viewports ----------
   Three tracks with the outer two equal, so the logo lands on the true centre
   of the bar regardless of how wide the links or the actions are. */
.nav__in{
  display:grid;
  grid-template-columns:1fr auto 1fr auto;
  align-items:center;
  gap:1rem;
}
.nav__links{margin:0;justify-self:start}
.nav__logo{justify-self:center}
.nav__logo img{height:var(--logo-h);width:auto;display:block}
.nav__act{display:flex;align-items:center;gap:.7rem;justify-self:end}
@media (max-width:820px){
  .nav__in{grid-template-columns:1fr auto 1fr auto}
  .nav__links{display:none}
  .nav__logo img{height:var(--logo-h);width:auto;display:block}
  .nav__burger{position:static;transform:none}
  .nav__call{position:static;transform:none}
}

/* display:none removes an item from the grid entirely, so hiding the links on
   mobile shifted the logo into column 1. Pin all three explicitly. */
.nav__links--l{grid-column:1}
.nav__logo{grid-column:2}
.nav__links--r{grid-column:3}
.nav__act{grid-column:4}

/* The actions column outgrows its 1fr share once the phone and burger are in
   it, which pushes the auto track off true centre. Absolute centring is exact
   regardless of what either side weighs. */
.nav__in{position:relative}
.nav__logo{position:static;transform:none;justify-self:center}

/* ==========================================================================
   COATING — DECK MODE (homepage)
   One viewport, four slides side by side. Four full screens between the hero
   and the work is too much to ask of someone still deciding, so the same
   content runs horizontally here and vertically on the service page.
   ========================================================================== */
.coat--deck{height:auto}
.coat--deck .coat__stage{
  position:relative;top:auto;height:min(80vh,700px);min-height:540px;overflow:hidden;
}
/* Slides are stacked and crossfaded rather than translated — the same
   opacity-only swap the hero and the films use, so the whole site changes
   state one way. */
.coat--deck .coat__panels{position:absolute;inset:0;display:block}
.coat--deck .coat__panel{
  position:absolute;inset:0;min-height:0;height:100%;
  display:grid;align-content:center;margin:0;
  width:100%;padding-inline:max(2.5rem,calc((100vw - var(--shell))/2 + 1.25rem));
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .7s var(--ease),visibility .7s;
}
.coat--deck .coat__panel.is-on{opacity:1;visibility:visible;pointer-events:auto}
/* in deck mode the parallax offset is meaningless — the track does the moving */
.coat--deck .coat__word,.coat--deck .coat__card{transform:none}
.coat--deck .coat__panel .coat__card{transition:transform .7s var(--ease) .1s}
.coat--deck .coat__panel:not(.is-on) .coat__card{transform:translateY(16px)}

.coat__arrow{
  position:absolute;top:50%;margin-top:-24px;z-index:6;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--glass-bg);border:1px solid var(--glass-brd);color:#fff;cursor:pointer;
  -webkit-backdrop-filter:var(--glass-blur-lite);backdrop-filter:var(--glass-blur-lite);
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.coat__arrow:hover{background:rgba(var(--brand-rgb),.28);border-color:rgba(var(--brand-rgb),.6);transform:scale(1.07)}
.coat__arrow--prev{left:clamp(.7rem,2.5vw,2rem)}
.coat__arrow--next{right:clamp(.7rem,2.5vw,2rem)}
.coat--deck .coat__pips{bottom:1.6rem}
@media (max-width:820px){
  .coat--deck .coat__stage{height:min(76vh,620px)}
  .coat--deck .coat__panel{padding-inline:1.25rem}
  /* Swipe alone is invisible: nothing on a phone said the four stages could
     be moved through at all, so most of the process was never seen. The
     arrows drop to the control row beside the pips, clear of the copy, and
     stay a 44px touch target. Swipe still works for anyone who tries it. */
  .coat__arrow{
    top:auto;bottom:1rem;margin-top:0;
    width:44px;height:44px;
  }
  .coat__arrow--prev{left:1rem}
  .coat__arrow--next{right:1rem}
  .coat--deck .coat__pips{bottom:1.85rem}
}

/* ==========================================================================
   BEAM OUTLINE — gallery tiles
   A brand-coloured light travels the border on hover. The @property angle is
   what makes it animatable; without registering it the conic gradient cannot
   be transitioned at all.
   ========================================================================== */
@property --beam{syntax:'<angle>';initial-value:0deg;inherits:false}
.mq__tile,.tile{position:relative}
.mq__tile::after,.tile::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--beam),
    transparent 0turn,transparent .58turn,
    rgba(var(--brand-rgb),.95) .74turn,
    rgba(255,255,255,.85) .78turn,
    rgba(var(--brand-rgb),.95) .82turn,
    transparent .96turn,transparent 1turn);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s var(--ease);pointer-events:none;z-index:3;
}
.mq__tile:hover::after,.tile:hover::after{
  opacity:1;animation:beamspin 2.4s linear infinite;
}
@keyframes beamspin{to{--beam:1turn}}
@media (prefers-reduced-motion: reduce){
  .mq__tile:hover::after,.tile:hover::after{animation:none;opacity:.7}
  .coat--deck .coat__panels{transition:none}
}

/* ---------- service buttons ----------
   A row of destinations rather than a second card grid — the deck above
   already carries the visual weight, so this just needs to be clickable. */
.svcbtns{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.svcbtn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.5rem;border-radius:999px;
  background:var(--glass-bg);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:var(--glass-blur-lite);backdrop-filter:var(--glass-blur-lite);
  box-shadow:var(--glass-inset);
  font-family:var(--font-display);font-size:1.02rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--fg);
  transition:border-color .25s var(--ease),background .25s var(--ease),
             transform .25s var(--ease),color .25s var(--ease);
}
.svcbtn:hover{
  background:rgba(var(--brand-rgb),.14);border-color:rgba(var(--brand-rgb),.6);
  transform:translateY(-3px);
}
.svcbtn svg{opacity:.55;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.svcbtn:hover svg{opacity:1;transform:translateX(3px)}

/* ---------- service area: map + suburb marquee ----------
   44 suburbs stacked as a wall of chips reads as filler. A map answers the
   real question ("do you come to me?") and the marquee keeps every suburb
   crawlable without owning half the page. */
.area{display:grid;grid-template-columns:1.05fr .95fr;gap:2.4rem;align-items:center}
.area__map{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--glass-brd);box-shadow:var(--glass-inset),var(--glass-drop);
  aspect-ratio:16/11;background:var(--surface);
}
.area__map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) invert(.92) hue-rotate(180deg) contrast(.92)}
@media (max-width:860px){ .area{grid-template-columns:1fr;gap:1.6rem} }

/* suburb chips inside the marquee */
.mq__chip{
  flex:0 0 auto;display:inline-block;
  padding:.55rem 1.15rem;border-radius:999px;
  border:1px solid var(--glass-brd);background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur-lite);backdrop-filter:var(--glass-blur-lite);
  font-size:.85rem;color:var(--fg-muted);white-space:nowrap;
  transition:color .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease);
}
.mq__chip:hover{color:#fff;border-color:rgba(var(--brand-rgb),.55);background:var(--surface-2)}
.mq .mq__track{align-items:center}

/* ==========================================================================
   PHOTO BAND — a real car out of Formula's own album behind a section.
   The photo sits at the 50% the brief asked for; the house hex mesh and a
   vignette ride over it so centred type keeps its contrast on a busy frame.
   Set --band-img (and optionally --band-img-sm) per instance.
   ========================================================================== */
.band--photo{
  position:relative;isolation:isolate;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.band--photo::before{
  content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:#08080c var(--band-img) center/cover no-repeat;
  opacity:.5;
}
.band--photo::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(120% 88% at 50% 50%, rgba(8,8,12,.14) 0%, rgba(8,8,12,.76) 100%);
  opacity:.72;
}
/* The phone gets its own crop — the wide one zooms straight into a wheel arch
   on a narrow band. Swap the VARIABLE, not the background-image: a second
   background-image declaration makes Chrome fetch both files on every viewport.
   !important is what lets an author rule beat the inline custom property. */
@media (max-width:720px){
  .band--photo{--band-img:var(--band-img-sm) !important}
}

/* ==========================================================================
   SHINE — a specular sweep across a headline, for the premium read.
   Guarded behind @supports because the effect works by clipping a moving
   gradient to the glyphs; without background-clip:text a transparent fill
   would leave the words invisible rather than merely unanimated.
   ========================================================================== */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .shine{
    background-image:linear-gradient(100deg,
      var(--brand) 0%, var(--brand) 36%,
      #ffb3ae 45%, #fff6f5 50%, #ffb3ae 55%,
      var(--brand) 64%, var(--brand) 100%);
    background-size:300% 100%;
    background-position:135% 0;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    /* text-shadow paints through a transparent fill and reads as grime;
       a drop-shadow on the glyph shape gives the same lift cleanly */
    text-shadow:none;
    filter:drop-shadow(0 10px 26px rgba(0,0,0,.6));
    animation:shine 6s var(--ease) infinite;
  }
  /* sweep once, then hold — a continuously travelling highlight reads as a
     loading state rather than as polish */
  @keyframes shine{
    0%{background-position:135% 0}
    42%{background-position:-35% 0}
    100%{background-position:-35% 0}
  }
}
@media (prefers-reduced-motion: reduce){
  .shine{animation:none;background-position:-35% 0}
}

/* ---------- mobile header: stop the actions eating the logo ----------
   The logo is absolutely centred, so it does not reserve width and the Book
   button was printing straight over it. The fixed call bar at the foot of the
   viewport already carries CALL and BOOK NOW on these widths, so the header
   copy of it is redundant rather than merely tight. */
@media (max-width:820px){
  .nav__cta{display:none}
  .nav__logo img{height:var(--logo-h);width:auto;display:block}
}
@media (max-width:380px){
  .nav__logo img{height:var(--logo-h);width:auto;display:block}
}

/* tighter tracking on the links just above the drawer breakpoint */
/* applies wherever the links are shown at all */
.nav__links{gap:1.05rem}
.nav__links a{font-size:.7rem;letter-spacing:.09em}
@media (max-width:820px){
  :root{--nav-h:74px;--logo-h:52px;--logo-w:156px}
}
@media (max-width:380px){
  :root{--logo-h:44px;--logo-w:132px}
}

/* ==========================================================================
   MOBILE SCALE LOCK
   The hero's off-stage carousel art extended the scrollable canvas to 486px on
   a 390px phone. Chrome answers that by widening the layout viewport and
   zooming out, which is why the page felt loose AND why the fixed call bar
   sat above the bottom of the screen: `fixed` pins to the LAYOUT viewport, and
   the layout viewport was taller than the glass. Clip the canvas and both go.
   ========================================================================== */
html{overflow-x:clip}
body{max-width:100%}
.hero,.sel,.sel__bgs,.sel__stage{overflow-x:clip}

/* The old off-canvas skip-link trick (left:-9999px) is itself unclippable
   overflow. Same accessibility, no canvas. */
.skip{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;left:auto!important;
}
.skip:focus{
  width:auto;height:auto;margin:0;clip-path:none;
  left:1rem!important;top:1rem;z-index:200;padding:.7rem 1rem;
  background:var(--brand);color:#fff;border-radius:.4rem;
}

/* horizontal drags belong to the deck, vertical scrolling to the page */
.coat--deck .coat__stage{touch-action:pan-y}

/* the bar owns the bottom of the screen, home indicator included */
.callbar{padding-bottom:env(safe-area-inset-bottom,0px)}

/* labelled step controls: an arrow alone did not read as "there is more" */
.coat__arrowlbl{display:none}
@media (max-width:820px){
  .coat__arrow{
    width:auto;min-width:44px;height:44px;border-radius:999px;
    padding:0 .95rem;gap:.45rem;grid-auto-flow:column;place-items:center;
    font-family:var(--font-display);font-size:.95rem;letter-spacing:.06em;
    text-transform:uppercase;
  }
  .coat__arrowlbl{display:inline}
}

/* the phone stays an icon-only affordance at every width it is shown */
.nav__call{width:40px;height:40px;justify-content:center;border-radius:50%;
  border:1px solid var(--glass-brd);background:var(--glass-bg);gap:0}
.nav__call svg{width:18px;height:18px}
.nav__call span{display:none}
/* a longer label needs a tighter button so the bar still balances */
.nav__cta{font-size:.72rem;letter-spacing:.1em;padding:.72rem 1.05rem;white-space:nowrap}

/* ==========================================================================
   COATING DECK — controls below the card, stage titles centred
   The arrows were pinned to the stage corners, which read as page furniture
   rather than as "there are three more of these". In a real row under the
   card they belong to the content they move.
   ========================================================================== */
.coat--deck .coat__stage{display:flex;flex-direction:column}
/* the panels keep crossfading stacked; only their WRAPPER joins the column */
.coat--deck .coat__panels{position:relative;inset:auto;flex:1 1 auto;min-height:0}

.coat__ctrls{
  display:flex;align-items:center;justify-content:center;gap:1.1rem;
  padding:0 1.25rem 1.5rem;z-index:6;
}
/* the pips were absolutely placed against the stage; in the row they sit in flow */
.coat--deck .coat__ctrls .coat__pips{position:static;inset:auto;bottom:auto;transform:none;margin:0}
.coat--deck .coat__arrow{position:static;top:auto;bottom:auto;margin:0;transform:none}
.coat--deck .coat__arrow:hover{transform:scale(1.07)}

/* centred titles: the -.06em optical pull only makes sense flush left */
.coat--deck .coat__word{text-align:center;margin-left:0;margin-bottom:0}
.coat--deck .coat__card{margin-inline:auto}
/* air between the statement and the box it explains */
.coat--deck .coat__panel{row-gap:clamp(1.9rem,4vw,3.6rem)}

@media (max-width:820px){
  .coat__ctrls{gap:.7rem;padding-bottom:1.15rem}
  .coat--deck .coat__panel{row-gap:1.9rem}
}

/* ==========================================================================
   TEXTMONO — the brushed-metal fill, taken verbatim from
   nextlvlprotection.com.au's .hero-text-mono (9 stops, 200% wide, 6s sweep).
   Guarded: without background-clip:text a transparent fill is invisible text.
   ========================================================================== */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .textmono{
    background-image:linear-gradient(90deg,#bfc2c7,#fff 5%,#fafbfc 15%,#cfd2d6 30%,
      #fff 65%,#bfc2c7 80%,#f8f9fa 90%,#fff,#bfc2c7);
    background-size:200% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:shineSweep 6s ease-in-out infinite;
  }
  .hero__l2 .textmono{display:inline}
  @keyframes shineSweep{0%{background-position:200% 0}100%{background-position:-200% 0}}
}
@media (prefers-reduced-motion: reduce){ .textmono{animation:none} }

/* ==========================================================================
   PILL HEADER
   A floating capsule rather than a full-width bar: at the top of the page it
   is barely there, and as the visitor scrolls it fills in as opaque glass.
   The texture lives inside the capsule so the radius clips it.
   ========================================================================== */
:root{--pill-h:76px}
.nav{height:calc(var(--pill-h) + 42px);border-bottom:0}
.nav__in{
  position:relative;
  height:var(--pill-h);
  padding-inline:clamp(1rem,2vw,1.6rem);
  border-radius:999px;
  border:1px solid transparent;
  transition:background .45s var(--ease),border-color .45s var(--ease),
             box-shadow .45s var(--ease),backdrop-filter .45s var(--ease);
}
.nav__in::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity .45s var(--ease);
  background-color:rgba(10,10,14,.55);
  background-image:url('/assets/images/carbon-fibre.jpg');
  background-size:110px;background-blend-mode:overlay;
}
.nav.is-stuck .nav__in{
  background:rgba(11,11,15,.60);
  -webkit-backdrop-filter:blur(26px) saturate(175%);
  backdrop-filter:blur(26px) saturate(175%);
  border-color:rgba(255,255,255,.15);
  box-shadow:0 22px 48px -24px rgba(0,0,0,.9),
             inset 0 1px 0 rgba(255,255,255,.12),
             inset 0 -1px 0 rgba(255,255,255,.04);
}
.nav.is-stuck .nav__in::before{opacity:.85}

:root{--logo-h:56px;--logo-w:168px}
@media (max-width:820px){
  :root{--pill-h:62px;--logo-h:44px;--logo-w:132px}
}
@media (max-width:380px){
  :root{--logo-h:38px;--logo-w:114px}
}

/* the studio band takes the red carbon weave instead of the hex mesh */
.cf2{position:relative;isolation:isolate}
.cf2::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url('/assets/images/carbon-fibre-2.jpg');
  background-size:300px;opacity:.5;
}
/* the panel now holds a photograph rather than an embedded map */
.area__map img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- footer: stop the columns collapsing to slivers ----------
   A max-width:900px two-column rule sat LATER in this sheet than the
   single-column rule, so it won on a phone and squeezed the brand column to
   88px - the blurb wrapped two words to a line and the logo was crushed to a
   1.63 ratio because the global img max-width:100% beat its width:auto.
   Size the mark from its WIDTH so its ratio cannot be overridden. */
@media (max-width:640px){
  .foot__grid{grid-template-columns:1fr;gap:2rem}
}
@media (max-width:900px){
  .foot__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.foot__logo img{width:min(196px,100%);height:auto;margin-bottom:1.1rem}

/* ── product data + warranties ──────────────────────────────────────────── */
/* Both card types are flex columns so the spec block and the warranty term
   sit flush with the bottom of the card regardless of how long the blurb
   above them runs — otherwise a short description leaves the figures
   floating mid-card and the grid reads as ragged. */
.tds__card,
.wty__card { display: flex; flex-direction: column; }

.tds__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap;
}
.tds__flag {
  font-family: var(--font-body); font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--brand);
  border: 1px solid rgba(var(--brand-rgb), .45);
  background: rgba(var(--brand-rgb), .1);
  border-radius: 999px; padding: .25rem .6rem;
  white-space: nowrap; margin-bottom: .6rem;
}
.tds__sub {
  font-family: var(--font-display); letter-spacing: .06em; font-size: 1.05rem;
  color: var(--fg); margin: 0 0 .8rem;
}

/* The flagship sits alone in its section, so it gets a wide two-column
   treatment instead of one card stretched across the whole grid — which
   would strand every spec value a full shell-width from its label. */
.tds__card--hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, .6fr);
  gap: 1.4rem 2.4rem; align-items: start;
}
.tds__card--hero .tds__head { grid-column: 1 / -1; }
.tds__card--hero .tds__specs {
  margin: 0; padding: 0 0 0 2rem;
  border-top: 0; border-left: 1px solid var(--border-soft);
}

/* Four warranty tiers: .grid--2 auto-fits to three columns at shell width,
   which leaves the fourth card orphaned on its own row. Pin it to two. */
@media (min-width: 781px) {
  .wty__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .tds__card--hero { grid-template-columns: 1fr; }
  .tds__card--hero .tds__specs {
    padding: 1.1rem 0 0; border-left: 0;
    border-top: 1px solid var(--border-soft);
  }
}

.tds__specs {
  margin: auto 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--border-soft);
  display: grid; gap: .55rem;
}
.tds__spec { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.tds__spec dt {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-dim);
}
.tds__spec dd {
  margin: 0; font-family: var(--font-display); font-size: 1.15rem;
  letter-spacing: .04em; color: var(--fg); text-align: right;
}

.wty__term {
  margin: auto 0 1rem; padding: 1.1rem 0 .9rem;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
}
.wty__term .stat__n { font-size: clamp(2.2rem, 4.4vw, 3.1rem); color: var(--brand); }

/* .svcbtns centres by default, which is right under a centred hero but wrong
   under the left-aligned copy on these two pages. */
.svcbtns--start { justify-content: flex-start; }

@media (max-width: 520px) {
  .tds__spec { flex-direction: column; gap: .15rem; }
  .tds__spec dd { text-align: left; }
}

/* ── the slanted photo band ─────────────────────────────────── */
/* Photo panels sheared into diagonal strips, running as a seamless marquee.
   The panel is skewed and the image inside is counter-skewed by the same angle,
   so the car stays upright while its frame runs on the diagonal. The image is
   also scaled up, because a skewed box exposes the corners of whatever it
   contains — at scale 1 you get bare triangles at the leading and trailing
   edges. */
.gal { overflow: hidden; }
.gal__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.6rem; flex-wrap: wrap; margin-bottom: 1.8rem;
}
.gal__head h2 { margin: 0; }
.gal__tags {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .9rem; list-style: none; margin: 0; padding: 0;
}
.gal__tags li {
  font-size: .66rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--fg-dim);
}
.gal__tags li + li::before {
  content: '/'; margin-right: .9rem; color: var(--border); font-weight: 400;
}
.gal__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.4rem; flex-wrap: wrap; margin-top: 1.6rem;
}
.gal__note {
  display: flex; align-items: center; gap: 1rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--fg-dim);
}
.gal__note::after {
  content: ''; width: clamp(40px, 7vw, 90px); height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}
.gal__more {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--fg-muted);
  text-decoration: none; transition: color .3s var(--ease);
}
.gal__more:hover { color: var(--brand); }
.gal__more svg { transition: transform .3s var(--ease); }
.gal__more:hover svg { transform: translateX(4px); }

.mq--slant {
  --slant: -11deg;
  --panel: clamp(180px, 21vw, 286px);
  --striph: clamp(290px, 36vw, 430px);
  /* the strip's own edges run off-level too, which is what makes the band
     read as cut rather than stacked */
  clip-path: polygon(0 4.5%, 100% 0, 100% 95.5%, 0 100%);
}
.mq--slant .mq__track { gap: 14px; align-items: stretch; height: var(--striph); }

.slantile {
  flex: 0 0 var(--panel);
  position: relative; overflow: hidden;
  transform: skewX(var(--slant));
  background: #0b0b0f;
}
.slantile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: skewX(calc(var(--slant) * -1)) scale(1.3);
  filter: saturate(.96) contrast(1.04);
  transition: transform .9s var(--ease), filter .5s var(--ease);
}
.slantile:hover img {
  transform: skewX(calc(var(--slant) * -1)) scale(1.38);
  filter: saturate(1.12) contrast(1.06);
}
.slantile::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(var(--brand-rgb), .28), transparent 34%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.slantile:hover::after { opacity: 1; }

@media (max-width: 760px) {
  .mq--slant {
    --panel: clamp(140px, 44vw, 200px);
    --striph: clamp(220px, 58vw, 300px);
    --slant: -9deg;
  }
}

/* ── gallery page: three bands stacked ──────────────────────────── */
.galrows { display: grid; gap: clamp(12px, 1.8vw, 22px); }

/* Mirror every second band so the cut edges chevron into each other instead of
   sitting as three parallel bars. */
.galrows .mq--slant:nth-of-type(even) {
  --slant: 11deg;
  clip-path: polygon(0 0, 100% 4.5%, 100% 100%, 0 95.5%);
}

/* On a page whose whole purpose is opening a photo, a strip that keeps moving
   under the cursor is hostile. Scoped here so the home band and the review
   marquee keep the behaviour they were designed with. */
.galrows .mq:hover .mq__track,
.galrows .mq:focus-within .mq__track { animation-play-state: paused; }

/* The mirrored bands need their own mobile step-down: the nth-of-type
   selector above outranks the plain .mq--slant media override, so without
   this the odd rows shear at 9deg while the even ones stay at 11deg. */
@media (max-width: 760px) {
  .galrows .mq--slant:nth-of-type(even) { --slant: 9deg; }
}

@media (prefers-reduced-motion: reduce) {
  .galrows .mq__track { animation: none; }
}

/* ── footer brand strip ────────────────────────────────────── */
.foot__brands {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: clamp(18px, 3.5vw, 42px);
  margin-top: 2.6rem; padding: 1.5rem 0 1.3rem;
  border-top: 1px solid var(--border-soft);
}
.foot__brandlbl {
  font-size: .64rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--fg-dim);
}
.foot__brand {
  display: inline-flex; align-items: center;
  opacity: .58; transition: opacity .3s var(--ease);
}
.foot__brand:hover, .foot__brand:focus-visible { opacity: 1; }
.foot__brand img { width: auto; display: block; }
/* Optical sizing, not equal heights: GYEON is a single word, ONYX stacks a
   second line under it, so matching their box heights would leave the ONYX
   wordmark visibly smaller than the GYEON one. */
.foot__brand:nth-of-type(1) img { height: clamp(16px, 1.9vw, 21px); }
.foot__brand:nth-of-type(2) img { height: clamp(25px, 3vw, 33px); }

/* ==========================================================================
   HERO — the studio itself
   The coverflow moved to /services/select/. What is left is the room the work
   happens in, which is the whole positioning, so it is treated as a full-bleed
   plate with a scrim heavy enough to carry the headline.
   ========================================================================== */
.hero--photo{position:relative;isolation:isolate;min-height:min(100svh,860px);
  display:grid;align-items:center}
.hero--photo .hero__bg{position:absolute;inset:0;z-index:-2;display:block}
.hero--photo .hero__bg img{width:100%;height:100%;object-fit:cover;display:block}
.hero--photo .hero__scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,8,12,.82) 0%,rgba(8,8,12,.46) 34%,rgba(8,8,12,.72) 78%,var(--bg) 100%),
    radial-gradient(120% 78% at 50% 42%,transparent 0%,rgba(8,8,12,.62) 100%);
}
/* the statement is no longer pinned above a carousel, so it centres in the frame */
.hero--photo .hero__say{
  position:static;transform:none;left:auto;top:auto;
  width:min(100% - 2rem,1100px);margin-inline:auto;
  padding-top:var(--nav-h);text-align:center;pointer-events:auto;
}
.hero__cta{
  display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:2rem;
}
@media (max-width:720px){
  .hero--photo{min-height:min(100svh,720px)}
  .hero__cta{margin-top:1.5rem}
  .hero__cta .btn{padding:.9rem 1.4rem;font-size:.78rem}
}

/* ---------- nav: links either side of the mark ----------
   Six links bunched hard left against a centred logo reads as unbalanced.
   Three and three, with the logo between them. */
.nav__links--l{justify-self:end}
.nav__links--r{justify-self:start}

/* ---------- nav: true centre, links hung symmetrically off it ----------
   A grid track cannot centre the mark here: the actions column carries real
   width and drags the middle track 112px left of the viewport centre. So the
   mark is centred absolutely (as it was before the split) and each link group
   is pinned the same distance from that centre, which makes the two sides
   mirror each other regardless of what the labels or the buttons weigh. */
.nav__in{position:relative}
.nav__logo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  grid-column:auto;justify-self:auto;z-index:2;
}
.nav__links--l,.nav__links--r{position:absolute;top:50%;transform:translateY(-50%)}
.nav__links--l{right:calc(50% + var(--logo-w) / 2 + 1.6rem);left:auto}
.nav__links--r{left:calc(50% + var(--logo-w) / 2 + 1.6rem);right:auto}

/* Absolute link groups cleared the mark but ran under the actions. Two equal
   half-columns instead: with the mark taken out of flow, the boundary between
   them IS the viewport centre, so the left group ends before it and the right
   group starts after it, while the actions stay pinned to the far edge. */
.nav__in{grid-template-columns:1fr 1fr}
.nav__links--l,.nav__links--r{position:static;transform:none;left:auto;right:auto}
.nav__links--l{grid-column:1;justify-self:end;padding-right:calc(var(--logo-w) / 2 + 1.4rem)}
.nav__links--r{grid-column:2;justify-self:start;padding-left:calc(var(--logo-w) / 2 + 1.4rem)}
.nav__act{grid-column:2;justify-self:end}

/* ==========================================================================
   COATING DECK — contained, not full bleed
   The deck was a full-width video plate running the site's background off the
   page for 700px, with a 208px word on it. Framed inside the shell instead:
   the page background carries straight through, and the film becomes an
   element in the section rather than the section itself.
   ========================================================================== */
.coat--deck{background:transparent}
.coat--deck .coat__stage{
  width:min(100% - 2.5rem,var(--shell));
  margin-inline:auto;
  height:min(62vh,540px);
  min-height:420px;
  border-radius:var(--radius-lg);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-inset),0 40px 80px -46px rgba(0,0,0,.95);
  overflow:hidden;
  background:#07070a;
}
/* the display word was sized for a full-bleed plate and is far too loud inside
   a framed one */
.coat--deck .coat__word{font-size:clamp(2.6rem,7vw,6rem)}
.coat--deck .coat__card{max-width:min(100%,38rem)}
.coat--deck .coat__panel{padding-inline:clamp(1.25rem,4vw,3rem)}

/* controls sit under the frame, on the page background */
.coat--deck .coat__ctrls{padding-top:1.3rem;padding-bottom:0}

@media (max-width:820px){
  .coat--deck .coat__stage{height:min(66vh,470px);min-height:380px;
    width:min(100% - 1.6rem,var(--shell))}
  .coat--deck .coat__word{font-size:clamp(2rem,11vw,3.2rem)}
}

/* ==========================================================================
   SERVICE PANELS — diagonal, opening on hover
   Same parallelogram trick as the gallery: the skew is on the panel and an
   equal and opposite skew on its contents, so the frame is angled and the type
   is not. Hovering grows one panel's flex share and the others give it back,
   which is what reveals the line of copy.
   ========================================================================== */
.svcslant{
  --slant:-11deg;
  display:flex;gap:14px;
  height:clamp(300px,34vw,420px);
  margin-top:2.6rem;
  padding-inline:clamp(.6rem,2vw,1.4rem);
  clip-path:polygon(0 3.5%,100% 0,100% 96.5%,0 100%);
}
.svcslant__i{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;
  transform:skewX(var(--slant));
  background:#0b0b0f;
  display:flex;align-items:flex-end;
  transition:flex-grow .55s var(--ease);
}
.svcslant__i::before{
  content:'';position:absolute;inset:0;
  background:var(--img) center/cover no-repeat;
  transform:skewX(calc(var(--slant) * -1)) scale(1.3);
  filter:saturate(.9) brightness(.5);
  transition:filter .5s var(--ease),transform .8s var(--ease);
}
.svcslant__i::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(6,6,9,.9) 100%);
}
.svcslant__in{
  position:relative;z-index:1;
  transform:skewX(calc(var(--slant) * -1));
  padding:1.4rem 1.2rem;width:100%;
}
.svcslant__name{
  display:block;font-family:var(--font-display);
  font-size:clamp(1rem,1.5vw,1.35rem);letter-spacing:.04em;
  text-transform:uppercase;color:#fff;
}
.svcslant__blurb{
  display:block;margin-top:.5rem;max-width:26rem;
  font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.72);
  opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.svcslant__i:hover{flex-grow:2.4}
.svcslant__i:hover::before{filter:saturate(1.05) brightness(.72);transform:skewX(calc(var(--slant) * -1)) scale(1.36)}
.svcslant__i:hover .svcslant__blurb{opacity:1;transform:none}
/* keyboard reaches it too */
.svcslant__i:focus-visible{flex-grow:2.4;outline:2px solid var(--brand);outline-offset:-4px}
.svcslant__i:focus-visible .svcslant__blurb{opacity:1;transform:none}

@media (max-width:820px){
  .svcslant{height:auto;flex-direction:column;gap:10px;clip-path:none;--slant:0deg}
  .svcslant__i{height:132px;flex:0 0 auto;border-radius:var(--radius)}
  .svcslant__i:hover{flex-grow:0}
  .svcslant__blurb{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
  .svcslant__i,.svcslant__i::before,.svcslant__blurb{transition:none}
}

/* ---------- header: one row, and clear of the top edge ----------
   .nav__links--r and .nav__act both sat in column 2 with no row set, so grid
   auto-placement gave them a row each: the actions were being pushed onto a
   second row and hanging out the bottom of the pill (act bottom 98px against
   a pill bottom of 89px). Pin everything to row 1. */
.nav__in{grid-template-rows:1fr}
.nav__links--l,.nav__links--r,.nav__act,.nav__logo{grid-row:1}
.nav__act{align-self:center}
/* the capsule should read as floating, not as clipped to the top edge */
:root{--nav-h:112px}
@media (max-width:820px){ :root{--nav-h:88px} }

/* the statement sits high in the frame rather than dead centre - the studio
   floor below it is the part of the photograph worth seeing */
.hero--photo .hero__say{transform:translateY(-100px)}
@media (max-width:820px){ .hero--photo .hero__say{transform:translateY(-56px)} }

/* ---------- gallery strip: rounded rectangles, near-touching ----------
   The diagonal blades read well but the client wants the panels upright with
   rounded corners and almost no gap, so the strip reads as one continuous
   band of work. The counter-skew on the image goes with the panel skew. */
.mq--slant{--slant:0deg;--panel:clamp(190px,16vw,250px);clip-path:none}
.mq--slant .mq__track{gap:6px}
.slantile{border-radius:14px}
.slantile img{transform:none;filter:saturate(.98) contrast(1.03)}
.slantile:hover img{transform:scale(1.06)}
@media (max-width:820px){
  .mq--slant{--panel:clamp(140px,42vw,190px)}
  .mq--slant .mq__track{gap:5px}
  .slantile{border-radius:11px}
}

/* ---------- coating deck: room around and inside the frame ----------
   The section carried no padding at all, so the framed panel ended on the
   section boundary and the next band began at the same pixel. Inside it, the
   control row sat 1px off the bottom edge. Both need air. */
.coat--deck{
  padding-top:clamp(1rem,2.5vw,2rem);
  padding-bottom:clamp(2.6rem,5.5vw,4.8rem);
}
.coat--deck .coat__ctrls{padding-bottom:clamp(1.1rem,2.2vw,1.7rem)}
/* the panel content keeps clear of the controls beneath it */
.coat--deck .coat__panel{padding-bottom:clamp(3.2rem,6vw,4.6rem)}

/* the homepage copy of the wizard gets its own heading block above the rail */
.bk__head{max-width:56ch;margin:0 auto 2.2rem;text-align:center}
.bk__head h2{margin:.2rem 0 .6rem}
.bk__head .lede{margin:0 auto}

/* ---------- hero: keep the copy off the client's own signage ----------
   The wall mark sat at ~43% of the plate, which is exactly where the
   subheading falls, so the type printed straight over his signage. Re-cropping
   alone could not fix the phone plate - it is already full height, so the mark
   cannot move within it. Oversizing the image inside the frame and anchoring
   it to the top pushes the mark down the VISIBLE window instead, and works the
   same on both plates because it is proportional. */
.hero--photo{overflow:hidden}
.hero--photo .hero__bg img{height:170%;object-position:center top}

/* ---------- deck: the word was jammed against the frame edge ---------- */
.coat--deck .coat__panel{padding-top:clamp(1.6rem,4vw,2.8rem)}

/* the phone card was eating 77% of the frame, which is what read as fat */
@media (max-width:820px){
  .coat--deck .coat__stage{height:min(74vh,560px);min-height:470px}
  .coat--deck .coat__card{padding:1rem 1.05rem;gap:.85rem;border-radius:15px}
  .coat--deck .coat__card p{font-size:.8rem;line-height:1.5}
  .coat--deck .coat__h{font-size:.98rem;line-height:1.25}
  .coat--deck .coat__n{width:34px;height:34px;font-size:.8rem}
}

/* ---------- gallery: panels touching ---------- */
.mq--slant .mq__track{gap:0}
.slantile{border-radius:0}
@media (max-width:820px){ .mq--slant .mq__track{gap:0} .slantile{border-radius:0} }

/* ==========================================================================
   GALLERY STRIP — the panels genuinely touch, and slant again
   The space between panels was never the flex gap: that was already 0. The
   panels are <figure> elements, and the UA stylesheet gives figure
   `margin: 1em 40px` - 80px between neighbours - which was never reset. Every
   previous attempt was tuning a property that was already zero.
   ========================================================================== */
.slantile{margin:0}
.mq--slant{--slant:-11deg}
.mq--slant .mq__track{gap:0}
.slantile{border-radius:0;transform:skewX(var(--slant))}
/* counter-skew so the frame is angled and the car is not, and overscale so the
   counter-skew cannot pull its own corners into view */
.slantile img{transform:skewX(calc(var(--slant) * -1)) scale(1.3)}
.slantile:hover img{transform:skewX(calc(var(--slant) * -1)) scale(1.36)}
/* with no gap the parallelograms interlock; a hairline keeps them readable */
.slantile + .slantile{box-shadow:-1px 0 0 rgba(255,255,255,.10)}
@media (max-width:820px){
  .mq--slant{--slant:-9deg}
  .mq--slant .mq__track{gap:0}
  .slantile{border-radius:0}
}