/* ==========================================================================
   Alcudia's Auto Detailing — demo site
   Palette is pulled from the brand: deep black, pearl white, and the logo's
   electric blue. Type pairs a wide automotive face (Michroma) with an
   editorial serif italic (Instrument Serif) and a quiet grotesk (Manrope).
   ========================================================================== */

:root {
  --ink: #050608;
  --ink-2: #0a0c10;
  --graphite: #111419;
  --line: rgba(233, 237, 242, 0.12);
  --line-strong: rgba(233, 237, 242, 0.24);
  --pearl: #eef1f5;
  --mist: #a3abb7;
  --steel: #6b7380;
  --blue: #2b9be6;
  --blue-hi: #6cc4ff;
  --ice: #cdeaff;
  --glow: rgba(43, 155, 230, 0.45);

  --f-wide: "Michroma", "Eurostile", "Microgramma", system-ui, sans-serif;
  --f-serif: "Instrument Serif", "Times New Roman", serif;
  --f-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: "Syne", "Manrope", system-ui, sans-serif; /* every title */

  --gutter: clamp(16px, 4vw, 56px);
  --radius: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* never let a sideways swipe turn into browser back/forward navigation */
html, body { overscroll-behavior-x: none; }
/* WebKit (iOS Safari/Brave/Chrome) only blocks sideways panning when the root is
   clipped too — body alone isn't enough. hidden/clip on html propagates to the
   viewport and does not create a scroll container, so position: sticky still works. */
html { overflow-x: hidden; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--pearl);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body.is-loading { overflow: hidden; }

img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 1.5px solid var(--blue-hi); outline-offset: 4px; border-radius: 6px; }

.eyebrow {
  font-family: var(--f-wide);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
  margin: 0 0 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.75em;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(43,155,230,.18), 0 0 18px var(--blue); flex: none; }

.display {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 4.9rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 1.5rem;
}
.display em { font-size: 1.12em; color: var(--ice); letter-spacing: -0.01em; }

/* ---------- buttons ---------- */
.btn {
  --h: 54px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: var(--h);
  padding: 0 26px;
  border-radius: 999px;
  font-family: var(--f-wide);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .5s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--primary { background: var(--pearl); color: var(--ink); }
.btn--primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--blue), var(--blue-hi));
  transform: translateY(101%); border-radius: inherit;
  transition: transform .55s var(--ease);
}
.btn--primary:hover { color: #fff; }
.btn--primary:hover::before { transform: translateY(0); }
.btn--ghost { border: 1px solid var(--line-strong); color: var(--pearl); }
.btn--ghost:hover { border-color: var(--pearl); background: rgba(255,255,255,.06); }
.btn--glass { background: rgba(14,17,22,.72); border: 1px solid var(--line); height: 44px; padding: 0 22px; }
.btn--glass:hover { background: var(--pearl); color: var(--ink); }
.btn[disabled] { opacity: .3; pointer-events: none; }

.link-arrow { display: inline-flex; gap: .6em; align-items: center; font-family: var(--f-wide); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-hi); padding-bottom: 6px; border-bottom: 1px solid currentColor; }
.link-arrow span { transition: transform .4s var(--ease); }
.link-arrow:hover span { transform: translateX(5px); }

/* ==========================================================================
   LOADER
   ========================================================================== */
.loader {
  position: fixed; inset: 0; z-index: 1000; touch-action: none; overscroll-behavior: none;
  background: radial-gradient(120% 80% at 50% 110%, #0b2236 0%, #06090d 55%, #040507 100%);
  display: grid; place-items: center;
  will-change: clip-path;
}
.loader__foam { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.loader__inner { position: relative; width: min(440px, 78vw); text-align: center; }
.loader__logo { width: min(300px, 62vw); margin: 0 auto 34px; position: relative; }
.loader__logo svg { width: 100%; height: auto; overflow: visible; }
.loader__logo .logo-emblem,
.loader__logo .logo-wordmark {
  fill-opacity: 0;
  stroke-width: 4;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.loader__logo .logo-emblem { stroke: var(--pearl); fill: var(--pearl); }
.loader__logo .logo-wordmark { stroke: var(--blue); fill: var(--blue); }
.loader__logo .logo-sheen { fill: url(#loaderSheen); pointer-events: none; }

.loader__meta { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--f-wide); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--mist); margin-bottom: 12px; }
.loader__count { font-size: 13px; color: var(--pearl); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.loader__count i { font-style: normal; color: var(--blue-hi); margin-left: 2px; }
.loader__bar { height: 1px; background: var(--line); position: relative; overflow: hidden; }
.loader__bar span { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--blue), var(--ice)); box-shadow: 0 0 12px var(--blue); }
.loader__stages { list-style: none; padding: 0; margin: 18px 0 0; display: flex; justify-content: space-between; font-family: var(--f-wide); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(233,237,242,.25); }
.loader__stages li { position: relative; transition: color .3s; }
.loader__stages li::before { content: ""; position: absolute; left: 50%; top: -11px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: currentColor; }
.loader__stages li.is-done { color: var(--mist); }
.loader__stages li.is-on { color: var(--blue-hi); text-shadow: 0 0 10px var(--blue); }
.loader__blade {
  position: absolute; left: -5%; right: -5%; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ice) 20%, #fff 50%, var(--ice) 80%, transparent);
  box-shadow: 0 0 24px 4px var(--glow), 0 -30px 60px rgba(108,196,255,.25);
  opacity: 0; transform: translateY(0);
}

/* ==========================================================================
   CURSOR
   ========================================================================== */
.cursor { position: fixed; left: 0; top: 0; z-index: 900; pointer-events: none; mix-blend-mode: normal; display: none; }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }
.cursor__dot, .cursor__ring { position: fixed; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor__dot { width: 6px; height: 6px; background: var(--pearl); }
.cursor__ring { width: 38px; height: 38px; border: 1px solid rgba(233,237,242,.4); display: grid; place-items: center; transition: width .45s var(--ease), height .45s var(--ease), background-color .45s, border-color .45s; }
.cursor__label { font-style: normal; font-family: var(--f-wide); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity .3s; }
.cursor.is-link .cursor__ring { width: 58px; height: 58px; border-color: var(--blue-hi); background: rgba(43,155,230,.12); }
.cursor.is-media .cursor__ring { width: 92px; height: 92px; background: var(--pearl); border-color: var(--pearl); }
.cursor.is-media .cursor__label { opacity: 1; }
.cursor.is-media .cursor__dot { opacity: 0; }



/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; gap: 24px;
  padding: 18px var(--gutter);
  transition: transform .6s var(--ease), background-color .5s, padding .5s var(--ease);
}
.nav.is-scrolled { background: rgba(5,6,8,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav.is-hidden { transform: translateY(-110%); }
.nav__brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.nav__emblem { width: 40px; }
.nav__emblem svg { width: 100%; height: auto; }
.nav__emblem .logo-emblem { fill: var(--pearl); }
.nav__word { font-family: var(--f-wide); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; line-height: 1.1; }
.nav__word small { display: block; font-size: 7.5px; letter-spacing: .38em; color: var(--blue-hi); margin-top: 4px; }
.nav__links { display: flex; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 999px; background: rgba(8,10,13,.62); }
.nav__links a { font-size: 13px; font-weight: 500; padding: 8px 16px; border-radius: 999px; color: var(--mist); transition: color .3s, background-color .3s; }
.nav__links a:hover, .nav__links a.is-active { color: var(--pearl); background: rgba(255,255,255,.08); }
.nav__burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); position: relative; }
.nav__burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--pearl); transition: transform .5s var(--ease), top .5s var(--ease); }
.nav__burger span:nth-child(1) { top: 17px; }
.nav__burger span:nth-child(2) { top: 25px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { top: 21px; transform: rotate(-45deg); }
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 600; pointer-events: none; transform: translateZ(0); }
.scroll-progress span { display: block; height: 100%; transform-origin: left; transform: scaleX(0); border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, #2b9be6, #4cc2ff 70%, #9fe0ff);
  box-shadow: 0 0 6px rgba(76,194,255,.95), 0 0 16px rgba(43,155,230,.7); }
/* Where supported (incl. recent Safari), the browser drives the bar from the scroll
   position itself — no JS, so iOS keeps it in step even mid-momentum-scroll. */
@keyframes scroll-progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: scroll()) {
  .scroll-progress span { animation: scroll-progress-grow linear both; animation-timeline: scroll(root block); }
}

.menu {
  position: fixed; inset: 0; z-index: 450; background: rgba(5,6,8,.96);
  display: flex; flex-direction: column; justify-content: center; padding: 96px var(--gutter) 40px;
  clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease-io); visibility: hidden;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.menu__links { display: flex; flex-direction: column; }
.menu__links a { font-family: var(--f-display); font-size: clamp(1.8rem, 8vw, 3rem); font-weight: 700; letter-spacing: -.03em; padding: 6px 0; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 16px; }
.menu__links i { font-style: normal; font-family: var(--f-wide); font-size: 10px; color: var(--blue-hi); letter-spacing: .2em; }
.menu__foot { margin-top: auto; font-family: var(--f-wide); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; overflow: clip; }
.hero__panels { position: absolute; inset: 12px; display: grid; grid-template-columns: 1fr; }
.hero__panel { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--graphite); clip-path: inset(100% 0 0 0 round var(--radius)); will-change: transform; }
.hero__video { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 42%; transform: scale(1.08); }
.hero__panel figcaption {
  position: absolute; left: 18px; top: 86px; font-family: var(--f-wide); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.75);
  display: flex; align-items: center; gap: 10px; opacity: 0;
}
.hero__dim { position: absolute; inset: 0; pointer-events: none; background: var(--ink); opacity: 0; }
/* Spotlight the car: the C8 is gloss black and white type reads on it unaided, so the
   shade frames the film instead of dimming its centre. A top fade for the nav, a floor
   for the scroll cue and buttons, a vignette that pulls down the bright house and
   driveway at the edges, and only a light veil behind the headline. */
.hero__shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, rgba(5,6,8,.5) 0%, rgba(5,6,8,0) 16%, rgba(5,6,8,0) 70%, rgba(5,6,8,.75) 100%),
  radial-gradient(46% 28% at 50% 50%, rgba(5,6,8,.36), transparent 100%),
  radial-gradient(120% 90% at 50% 55%, transparent 55%, rgba(5,6,8,.5) 100%); }
/* desktop Porsche film: bright sky, a blue car and a yellow towel all sit behind the copy,
   so the film gets a soft veil and a deeper pool of shade where the words are (the old
   black C8 carried white type unaided; this footage can't) */
.hero--porsche .hero__shade { background:
  linear-gradient(180deg, rgba(5,6,8,.5) 0%, rgba(5,6,8,.12) 16%, rgba(5,6,8,.28) 40%, rgba(5,6,8,.4) 70%, rgba(5,6,8,.82) 100%),
  radial-gradient(44% 40% at 50% 60%, rgba(5,6,8,.66), rgba(5,6,8,.32) 62%, transparent 100%),
  radial-gradient(34% 30% at 0% 0%, rgba(5,6,8,.55), transparent 100%),
  radial-gradient(120% 90% at 50% 55%, transparent 55%, rgba(5,6,8,.5) 100%); }
/* the accent word would sit on blue paint here, so it takes the light (ice) end of the brand blue */
.hero--porsche .hero__title em { background-image: linear-gradient(100deg, #d6eeff 0%, var(--blue-hi) 38%, #eef8ff 55%, var(--blue-hi) 78%, #d6eeff 100%); }
/* phones: the copy spans the full width; a light band sits behind it and the top
   third of the film stays fully vivid */
@media (max-width: 860px) {
  .hero__shade { background:
    linear-gradient(180deg, rgba(5,6,8,.4) 0%, rgba(5,6,8,0) 13%, rgba(5,6,8,0) 32%, rgba(5,6,8,.3) 44%, rgba(5,6,8,.38) 72%, rgba(5,6,8,.78) 100%); }
  /* the phone film (white car, foam, sunlit driveway) is far brighter than the black C8:
     the sky stays vivid, and a deeper floor starts where the copy does */
  .hero--foam .hero__shade { background:
    linear-gradient(180deg, rgba(5,6,8,.42) 0%, rgba(5,6,8,0) 12%, rgba(5,6,8,0) 22%, rgba(5,6,8,.42) 34%, rgba(5,6,8,.62) 48%, rgba(5,6,8,.68) 72%, rgba(5,6,8,.9) 100%); }
}

.hero__content { position: absolute; left: 0; right: 0; bottom: clamp(88px, 13vh, 140px); padding: 0 var(--gutter); text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero__eyebrow { opacity: 0; color: var(--pearl); }
.hero__title { margin: 0 0 1.4rem; font-family: var(--f-display); font-weight: 700; font-size: clamp(2.5rem, 7.2vw, 7.6rem); line-height: .94; letter-spacing: -.022em; word-spacing: .06em; text-shadow: 0 10px 60px rgba(0,0,0,.45); }
.hero__title .line { display: block; overflow: hidden; padding: 0 .05em .06em; }
.hero__title .line > * { display: inline-block; transform: translateY(110%); }
.hero__title em { font-size: 1.12em; line-height: .82; background: linear-gradient(100deg, #fff 10%, var(--ice) 40%, var(--blue-hi) 60%, #fff 85%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: chrome 2.6s var(--ease-io) 3.4s 1 both; padding-right: .06em; }
@keyframes chrome { to { background-position: -200% 0; } }
.hero__sub { max-width: 520px; color: rgba(238,241,245,.82); margin: 0 0 2rem; font-size: clamp(15px, 1.15vw, 17px); opacity: 0; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; opacity: 0; }
.hero__foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 30px; display: flex; justify-content: space-between; align-items: flex-end; opacity: 0; }
.scrollcue { display: flex; align-items: center; gap: 14px; font-family: var(--f-wide); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--mist); }
.scrollcue__line { width: 1px; height: 42px; background: var(--line-strong); position: relative; overflow: hidden; }
.scrollcue__line::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: var(--blue-hi); transform: translateY(-100%); animation: drip 2s var(--ease-io) infinite; }
@keyframes drip { to { transform: translateY(250%); } }
.hero__tag { margin: 0; text-align: right; font-size: 13px; color: var(--mist); line-height: 1.4; }
.hero__tag em { font-size: 1.35em; color: var(--pearl); }

/* Hero legibility, done the way luxury automotive sites do it: grade the footage
   (a dark "floor" under the copy, in .hero__shade), set the words in white, and
   spend the logo blue only on accents — the eyebrow dot and hairline, the caption
   numerals, the italic accent word, the scroll cue. Mid-blue text over moving
   footage can never be reliably legible; white over a graded floor always is. */
.hero { --halo: 0 0 2px rgba(5,6,8,.55), 0 2px 16px rgba(5,6,8,.65); }
.hero__eyebrow, .hero__title, .hero__sub, .hero__panel figcaption, .scrollcue, .hero__tag, .hero .btn--ghost { text-shadow: var(--halo); }
.hero__title { color: #f6f8fb; text-shadow: 0 2px 4px rgba(5,6,8,.45), 0 8px 40px rgba(5,6,8,.6); }
.hero__sub { color: rgba(240,243,247,.9); font-weight: 500; }
.hero__eyebrow { color: var(--pearl); background: rgba(5,6,8,.5); border: 1px solid rgba(43,155,230,.55); border-radius: 16px; padding: 8px 16px; line-height: 1.6; text-shadow: none; }
.hero__panel figcaption { color: rgba(240,243,247,.88); background: rgba(5,6,8,.6); border: 1px solid rgba(43,155,230,.45); padding: 8px 14px; border-radius: 99px; text-shadow: none; }
.scrollcue { color: rgba(240,243,247,.75); }
.hero .btn--ghost { color: var(--pearl); border-color: rgba(240,243,247,.38); background: rgba(5,6,8,.35); }
.hero .btn--ghost:hover { border-color: var(--blue); background: rgba(43,155,230,.14); }
/* lines clip only while they slide in; afterwards the halo must not be cut into boxes */
.hero__title.is-in .line { overflow: visible; }
/* the accent word: logo blue, lifted toward ice so it glows rather than sinks, with
   a one-time sweep. drop-shadow (not text-shadow, which would paint over
   gradient-clipped text) adds a dark edge and a faint blue bloom. */
.hero__title em { background-image: linear-gradient(100deg, var(--blue-hi) 0%, var(--blue) 30%, #4fb3f2 45%, var(--blue-hi) 60%, var(--ice) 68%, var(--blue-hi) 76%, var(--blue) 95%); text-shadow: none; filter: drop-shadow(0 2px 6px rgba(5,6,8,.7)) drop-shadow(0 0 22px rgba(43,155,230,.35)); }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; padding: 26px 0; background: var(--ink); position: relative; z-index: 2; }
.marquee__track { display: flex; width: max-content; align-items: center; gap: 40px; font-family: var(--f-wide); font-size: clamp(18px, 2.4vw, 34px); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; will-change: transform; }
.marquee__track span { color: transparent; -webkit-text-stroke: 1px rgba(233,237,242,.55); transition: color .4s; }
.marquee__track span:nth-of-type(odd) { color: var(--pearl); -webkit-text-stroke: 0; }
.marquee__track b { color: var(--blue); font-weight: 400; font-size: .7em; }

/* ==========================================================================
   MANIFESTO
   ========================================================================== */
.manifesto { position: relative; padding: clamp(96px, 15vh, 170px) var(--gutter) clamp(80px, 12vh, 140px); max-width: 1320px; margin: 0 auto; }
/* reading-progress rail: fills as the words reveal (transform only) */
.manifesto__rail { position: absolute; left: max(8px, calc(var(--gutter) - 24px)); top: clamp(96px, 15vh, 170px); bottom: clamp(80px, 12vh, 140px); width: 1px; background: var(--line); }
.manifesto__rail span { position: absolute; inset: 0; background: linear-gradient(var(--blue-hi), var(--blue)); transform-origin: top; transform: scaleY(0); box-shadow: 0 0 10px var(--blue); }
.manifesto__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: clamp(1.6rem, 4vh, 2.6rem); }
.manifesto__head .eyebrow { margin: 0; }
.manifesto__emblem { width: 48px; flex: none; }
.manifesto__emblem .logo-emblem { fill: var(--blue); }
.manifesto__text { font-family: var(--f-display); font-size: clamp(1.8rem, 4.2vw, 4rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 600; margin: 0; max-width: 18ch; }
.manifesto__text em { color: var(--ice); font-size: 1.06em; }
.manifesto .w { opacity: .14; }
.manifesto__trio { list-style: none; margin: clamp(3rem, 8vh, 5.5rem) 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.manifesto__trio li { padding: clamp(22px, 3.4vh, 34px) clamp(16px, 2vw, 28px); display: grid; gap: 10px; align-content: start; }
.manifesto__trio li + li { border-left: 1px solid var(--line); }
.trio__n { font-family: var(--f-wide); font-size: 10px; letter-spacing: .2em; color: var(--blue-hi); }
.manifesto__trio em { font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1; color: var(--pearl); }
.manifesto__trio small { font-size: 14.5px; line-height: 1.5; color: var(--mist); max-width: 28ch; }
.manifesto__close { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.manifesto__line { margin: 0; font-size: clamp(1.4rem, 2.4vw, 2.2rem); font-weight: 300; line-height: 1.25; letter-spacing: -.02em; max-width: 26ch; }
.manifesto__line em { color: var(--ice); }
.manifesto__sig { margin: 0; flex: none; text-align: right; color: var(--mist); font-size: 14px; line-height: 1.5; }
.manifesto__sig small { display: block; font-family: var(--f-wide); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--steel); margin-top: 4px; }

/* ==========================================================================
   EVERY ANGLE — the photo in a glowing card
   ========================================================================== */
.angle { position: relative; height: 400vh; height: 400lvh; }
@media (max-width: 860px) { .angle { height: 300vh; height: 300lvh; } }
/* 100lvh = the full screen even with Safari's toolbar collapsed, so the next
   section can never peek in underneath while the stage is stuck. Content is laid
   out against the *visible* height (svh) instead. */
.angle__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; overflow: clip; background: radial-gradient(60% 70% at 50% 50%, #0d1622 0%, var(--ink) 70%); }
/* Desktop: centred in the visible height; main.js scales the card (0.8 → 1), the aura's
   opacity and the photo's zoom from scroll position. The centring uses the separate
   `translate` property so it never fights GSAP's transform. */
.angle__card { position: absolute; left: 50%; top: 50vh; top: 50svh; translate: -50% -50%; height: min(80vh, 42vw); height: min(80svh, 42vw); aspect-ratio: 3 / 4; will-change: transform; }
.angle__frame { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; background: #0b0f15; }
.angle__frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(205,234,255,.26), inset 0 1px 0 rgba(255,255,255,.32);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 24%); }
.angle__img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 58%; transform-origin: 50% 58%; }
/* the aura: a crisp blue edge, a close glow, and a wide soft bloom, all static shadows on a layer
   whose opacity is the only thing that changes */
.angle__aura { position: absolute; inset: 0; border-radius: 24px; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(108,196,255,.6), 0 0 18px 1px rgba(108,196,255,.45), 0 0 60px 6px rgba(43,155,230,.32), 0 0 130px 10px rgba(43,155,230,.16); }
.angle__aura::before { content: ""; position: absolute; inset: -16%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(43,155,230,.26), rgba(43,155,230,.07) 62%, rgba(43,155,230,0)); }
.angle__copy { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); width: min(30vw, 420px); pointer-events: none; }
.angle__h { margin: 0 0 1.6rem; position: relative; height: 1.1em; font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 3.9vw, 3.9rem); letter-spacing: -.03em; line-height: 1; }
.angle__word { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; }
.angle__word em { color: var(--ice); font-size: 1.1em; }
.angle__p { color: var(--mist); max-width: 340px; margin: 0; opacity: 0; }

.angle__hud { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: 200px; font-family: var(--f-wide); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--mist); display: grid; gap: 14px; }
.angle__hud { width: 230px; }
.hud__row { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.hud__row b { font-weight: 400; color: var(--pearl); font-size: 18px; letter-spacing: .06em; font-variant-numeric: tabular-nums; margin-left: auto; }
.hud__row i { font-style: normal; }
.hud__row sup { font-family: var(--f-sans); font-size: .7em; vertical-align: top; position: relative; top: -.1em; margin-left: 1px; }
.hud__row--sm b { font-size: 9px; letter-spacing: .14em; color: var(--blue-hi); }
.hud__row--txt b, .hud__row--sm b { white-space: nowrap; }
.hud__row--txt b { font-size: 12px; letter-spacing: .12em; }
.hud__dial { position: relative; width: 120px; height: 120px; margin: 8px 0 4px auto; }
.hud__dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hud__track { fill: none; stroke: var(--line); stroke-width: 1; }
.hud__fill { fill: none; stroke: var(--blue-hi); stroke-width: 2; stroke-dasharray: 1 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px var(--blue)); }
.hud__dial span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: var(--pearl); }

/* ==========================================================================
   HORIZONTAL SCROLL SECTIONS
   ========================================================================== */
/* Two mutually exclusive modes, selected by complementary media queries
   (mirrored in main.js via gsap.matchMedia):
   - SWIPE (default; phones, tablets, any touch-first device): a native
     horizontal carousel with scroll-snap. Vertical page scroll is never
     intercepted, so it behaves exactly like Safari/Chrome expect.
   - STICKY (mouse/trackpad desktops >860px): the stage is CSS-sticky and
     vertical scroll drives the track sideways. */
.hscroll { position: relative; background: var(--ink); }
main > section, main > .marquee { position: relative; isolation: isolate; background-color: var(--ink); }
.hscroll__pin { position: relative; padding: clamp(96px, 12vh, 130px) 0 clamp(56px, 8vh, 90px); }
.hscroll__head { position: relative; margin: 0 var(--gutter) 22px; display: flex; align-items: center; gap: 28px; }
.hscroll__head .eyebrow { margin: 0; white-space: nowrap; }
.hscroll__progress { flex: 1; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.hscroll__progress span { position: absolute; inset: 0; background: var(--blue-hi); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 10px var(--blue); }
.hscroll__hint { margin: 0; font-family: var(--f-wide); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); white-space: nowrap; }
.hint__arrow { display: inline-block; margin-right: 8px; color: var(--blue-hi); animation: nudge 1.6s var(--ease-io) infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }
.hscroll__track {
  --edge: 56px;
  display: flex; align-items: flex-start; gap: 16px;
  padding: 8px var(--gutter) 28px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hscroll__track::-webkit-scrollbar { display: none; }
/* Free-floating (no snap). Runways before the first and after the last card mean
   the carousel never rests at a hard edge: a swipe past either end is absorbed and
   eased back (main.js) instead of escaping to the browser's swipe navigation. */
.hscroll__track::before, .hscroll__track::after { content: ""; flex: 0 0 var(--edge); }
.hscroll__track > * { scroll-margin-inline: var(--gutter); }
.hint--desk { display: none; }
.hscroll__intro { display: none; }

@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  .hscroll { height: calc(var(--hdist, 0px) + 100vh); height: calc(var(--hdist, 0px) + 100svh); }
  .hscroll__pin { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; overflow: hidden; overflow: clip; display: flex; flex-direction: column; justify-content: center; }
  .hscroll__head { position: absolute; top: 96px; left: var(--gutter); right: var(--gutter); margin: 0; }
  .hscroll__track { align-items: center; gap: clamp(16px, 2vw, 28px); padding: 64px var(--gutter) 0; width: max-content; overflow: visible; will-change: transform; }
  .hscroll__track::before, .hscroll__track::after { content: none; }
  .shot--offset { transform: translateY(6vh); }
  .hint--desk { display: inline; }
  .hint--touch { display: none; }
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
  /* intro sits above the carousel (not a mostly-empty first slide) */
  .hscroll__intro { display: block; padding: 0 var(--gutter); margin: 2px 0 24px; }
  .hscroll__intro .display { font-size: clamp(2.1rem, 9.2vw, 3.2rem); margin-bottom: .7rem; }
  .hscroll__intro p { color: var(--mist); margin: 0 0 1.1rem; max-width: 38ch; }
  .hscroll__intro p:last-child { margin-bottom: 0; }
  .hscroll__track > .panel-intro { display: none; }
  /* header row wraps instead of pushing past the screen edge: label + hint on the
     first line, full-width progress line underneath */
  .hscroll__head { flex-wrap: wrap; gap: 12px 16px; }
  .hscroll__head .eyebrow { white-space: normal; flex: 1 1 0; min-width: 0; }
  .hscroll__hint { flex: none; }
  .hscroll__progress { order: 3; flex: 1 0 100%; }
  .panel-intro { width: min(80vw, 420px); padding-right: 0; align-self: center; }
  .svc { width: min(80vw, 380px); height: auto; min-height: 470px; }
  .panel-end { width: min(80vw, 400px); padding-left: 0; align-self: center; }
  .shot--tall .shot__media { height: min(60svh, 520px); }
  .shot--offset { width: min(72vw, 360px); }
  .shot--offset .shot__media { max-height: none; }
}


.panel-intro { width: clamp(300px, 34vw, 520px); flex: none; padding-right: clamp(10px, 4vw, 70px); }
.panel-intro p { color: var(--mist); max-width: 400px; margin: 0 0 2rem; }

/* service cards */
.svc {
  --mx: 50%; --my: 50%;
  position: relative; flex: none; width: clamp(290px, 27vw, 400px); height: min(70vh, 640px); min-height: 480px;
  border-radius: var(--radius); overflow: hidden; background: var(--graphite); border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate;
  transition: border-color .5s;
}
.svc::after { /* paint glare that follows the pointer */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(205,234,255,.12), transparent 45%);
}
.svc:hover::after { opacity: 1; }
.svc:hover { border-color: rgba(108,196,255,.4); }
.svc__media { position: absolute; inset: 0; z-index: -1; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.4s var(--ease); filter: saturate(.92); }
.svc:hover .svc__media img { transform: scale(1.14); }
.svc__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,8,.15) 0%, rgba(5,6,8,.35) 35%, rgba(5,6,8,.92) 68%, rgba(5,6,8,.98) 100%); }
.svc__body { padding: 26px; position: relative; z-index: 3; }
.svc__top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-family: var(--f-wide); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.svc__num { color: var(--blue-hi); font-size: 11px; }
.svc__time { margin-left: auto; color: var(--mist); }
.svc__badge { padding: 4px 9px; border-radius: 99px; background: var(--blue); color: #fff; font-size: 8px; }
.svc h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.35rem, 1.8vw, 1.7rem); letter-spacing: -.02em; margin: 0 0 .25rem; line-height: 1.1; }
.svc__tag { font-family: var(--f-serif); font-style: italic; font-size: 1.15rem; color: var(--ice); margin: 0 0 1rem; }
.svc ul { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 7px; font-size: 13.5px; color: rgba(238,241,245,.8); }
.svc li { display: flex; gap: 10px; align-items: baseline; }
.svc li::before { content: ""; flex: none; width: 10px; height: 1px; background: var(--blue-hi); transform: translateY(-4px); }
.svc__add { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 14px 0 0; border-top: 1px solid var(--line); font-family: var(--f-wide); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.svc__add i { font-style: normal; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 16px; transition: transform .5s var(--ease), background-color .3s, border-color .3s; }
.svc__add:hover i { border-color: var(--pearl); }
.svc__add.is-added { color: var(--blue-hi); }
.svc__add.is-added i { transform: rotate(45deg); background: var(--blue); border-color: var(--blue); color: #fff; }
.svc--feature { border-color: rgba(108,196,255,.35); box-shadow: 0 0 0 1px rgba(43,155,230,.15), 0 30px 80px -30px rgba(43,155,230,.45); }

.panel-end { flex: none; width: clamp(300px, 32vw, 480px); padding-left: clamp(10px, 3vw, 50px); }
.panel-end__emblem { display: block; width: 72px; margin-bottom: 28px; }
.panel-end__emblem .logo-emblem { fill: var(--blue); }
.panel-end p { color: var(--mist); max-width: 360px; margin: 0 0 2rem; }

/* work gallery */
.shot { position: relative; flex: none; margin: 0; width: clamp(240px, 22vw, 340px); }
.shot--tall .shot__media { aspect-ratio: 9 / 16; }
.shot--offset { width: clamp(260px, 25vw, 380px); }
.shot--offset .shot__media { aspect-ratio: 4 / 5; }
.shot__media { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--graphite); max-height: 66vh; }
.shot--tall .shot__media { height: min(66vh, 600px); width: auto; aspect-ratio: 9/16; }
.shot--tall { width: auto; }
.shot__media img, .shot__media video { position: absolute; top: 0; left: -12%; width: 124%; max-width: none; height: 100%; object-fit: cover; }
.shot figcaption { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding-top: 16px; position: relative; }
.shot__idx { grid-row: span 2; font-family: var(--f-wide); font-size: 9px; letter-spacing: .14em; color: var(--blue-hi); padding-top: 5px; }
.shot figcaption b { font-weight: 500; font-size: 15px; }
.shot figcaption span:not(.shot__idx) { font-size: 13px; color: var(--mist); }
.shot__play { position: absolute; right: 0; top: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); }
.shot__play::after { content: ""; position: absolute; left: 13px; top: 11px; border-left: 9px solid var(--pearl); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
[data-film] { cursor: pointer; }
.panel-intro--work .display { font-size: clamp(2.7rem, 6.2vw, 6.2rem); }

/* ==========================================================================
   METHOD
   ========================================================================== */
.method { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 110px); padding: clamp(100px, 14vh, 160px) var(--gutter); max-width: 1440px; margin: 0 auto; }
.method__media { position: relative; }
/* Decorative films never take touches: scrolling over them always scrolls the page
   (and iOS can't surface its own play button on them in Low Power Mode). Only the
   gallery's figures and the lightbox player are interactive. */
video:not(#filmVideo) { pointer-events: none; -webkit-touch-callout: none; }
.hero__panel { pointer-events: none; -webkit-user-select: none; user-select: none; }
/* Films open on a deliberate double-tap on touch (single click with a mouse).
   touch-action: manipulation stops iOS treating the double-tap as zoom. */
[data-film] { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.film-hint { position: absolute; left: 16px; bottom: 16px; padding: 7px 12px; border-radius: 99px; background: rgba(5,6,8,.66); font-family: var(--f-wide); font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--pearl); white-space: nowrap; transition: background-color .25s, box-shadow .25s; }
@media (max-width: 380px) { .film-hint .hint-more { display: none; } }
[data-film].is-armed .film-hint { background: var(--blue); box-shadow: 0 0 0 4px rgba(43,155,230,.25); }
[data-film].is-armed .shot__media { outline: 1.5px solid var(--blue-hi); outline-offset: 3px; }
.method__frame { position: sticky; top: 11vh; height: 78vh; aspect-ratio: 9 / 16; max-width: 100%; margin-left: auto; border-radius: 26px; overflow: hidden; background: var(--graphite); box-shadow: 0 50px 120px -40px rgba(43,155,230,.35); }
.method__frame video, .method__frame .video-still { width: 100%; height: 100%; object-fit: cover; }
.method__rec { position: absolute; top: 18px; left: 18px; display: flex; align-items: center; gap: 8px; font-family: var(--f-wide); font-size: 9px; letter-spacing: .2em; padding: 7px 12px; border-radius: 99px; background: rgba(5,6,8,.66); }
.method__rec b { font-weight: 400; font-variant-numeric: tabular-nums; }
.rec-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff3b3b; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.method__step-ind { position: absolute; bottom: 18px; right: 20px; font-family: var(--f-wide); font-size: 34px; line-height: 1; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.method__step-ind i { font-style: normal; font-size: 11px; color: var(--mist); margin-left: 4px; }
.method__corners i { position: absolute; width: 18px; height: 18px; border: 1.5px solid rgba(255,255,255,.7); }
.method__corners i:nth-child(1) { top: 56px; left: 18px; border-right: 0; border-bottom: 0; }
.method__corners i:nth-child(2) { top: 56px; right: 18px; border-left: 0; border-bottom: 0; }
.method__corners i:nth-child(3) { bottom: 66px; left: 18px; border-right: 0; border-top: 0; }
.method__corners i:nth-child(4) { bottom: 66px; right: 18px; border-left: 0; border-top: 0; }
.method__head { margin-bottom: 10vh; text-align: center; }
.method__head .eyebrow { justify-content: center; }
.method__head p:not(.eyebrow) { color: var(--mist); max-width: 440px; margin-inline: auto; }

/* ---------- the steps: a centred laser timeline ----------
   A ruled track runs down the middle of the column. The beam fills it with scroll and
   its head is held at 55% of the viewport like a scanner; it passes behind the cards
   and shows in the gaps. Each step is a numbered node on the line above a card. As the
   head reaches a node the step ignites: the node flares, and the laser splits at the
   top of the card and traces both sides of its outline until they meet at the bottom.
   Scroll-position-derived (transforms + class toggles; the outline is a one-off
   stroke transition), so scrolling up untraces it. */
.steps { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.step { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 5vh 0; min-height: 34vh; }
.step__n { position: relative; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; box-sizing: border-box; border-radius: 50%;
  background: var(--ink); border: 1px solid rgba(108,196,255,.35); font-family: var(--f-wide); font-size: 11px; letter-spacing: .04em; color: var(--blue-hi);
  transition: border-color .5s, color .5s, background-color .5s, box-shadow .5s, text-shadow .5s; }
.step.is-lit .step__n { border-color: #4cc2ff; color: #fff; background-color: #0b2233;
  box-shadow: 0 0 0 5px rgba(43,155,230,.12), 0 0 18px #4cc2ff, 0 0 38px rgba(43,155,230,.5); text-shadow: 0 0 10px #4cc2ff; }
.step__card { position: relative; width: 100%; max-width: 520px; padding: 30px 28px 28px; border-radius: 18px; background: var(--ink-2); text-align: center; }
.step__card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--line); pointer-events: none; }
.step__card > :not(svg) { position: relative; opacity: .4; transition: opacity .6s var(--ease); }
.step.is-lit .step__card > :not(svg) { opacity: .78; }
.step.is-active .step__card > :not(svg) { opacity: 1; }
.step h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.45rem, 2.5vw, 2.3rem); letter-spacing: -.025em; margin: 0 0 .7rem; line-height: 1.1; }
.step p { color: var(--mist); margin: 0 auto; max-width: 440px; }
/* the outline trace (two paths from top-centre, built in main.js) */
.step__trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(76,194,255,.9)) drop-shadow(0 0 10px rgba(43,155,230,.5)); }
.step__trace path { fill: none; stroke: #4cc2ff; stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); transition: stroke-dashoffset 1.4s cubic-bezier(.65, 0, .35, 1); }
.step.is-lit .step__trace path { stroke-dashoffset: 0; }

/* the laser itself, centred on the column */
.steps-wrap { position: relative; }
.laser { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.laser__track { position: absolute; left: calc(50% - .5px); top: 0; bottom: 0; width: 1px; background: rgba(233,237,242,.1); }
.laser__track::before { content: ""; position: absolute; left: -3px; top: 0; bottom: 0; width: 7px;
  background: repeating-linear-gradient(180deg, rgba(108,196,255,.28) 0 1px, transparent 1px 22px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
.laser__beam { position: absolute; left: calc(50% - 1px); top: 0; width: 2px; height: 100%; transform-origin: 50% 0; transform: scaleY(0); will-change: transform; border-radius: 2px;
  background: linear-gradient(180deg, rgba(43,155,230,.1), #2b9be6 55%, #4cc2ff 88%, #dff4ff);
  box-shadow: 0 0 6px rgba(76,194,255,.85), 0 0 16px rgba(43,155,230,.55); }
.laser__head { position: absolute; left: 50%; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle, #fff 0 22%, #9fe0ff 40%, rgba(76,194,255,.35) 70%, transparent 72%);
  box-shadow: 0 0 10px #4cc2ff, 0 0 26px rgba(43,155,230,.7); opacity: .35; transition: opacity .4s; }
/* the laser "plane": a faint horizontal flare through the head, both ways */
.laser__head::before { content: ""; position: absolute; left: 50%; top: 50%; width: 180px; height: 1px; margin: -.5px 0 0 -90px;
  background: linear-gradient(90deg, transparent, rgba(76,194,255,.4) 30%, rgba(223,244,255,.95) 50%, rgba(76,194,255,.4) 70%, transparent); opacity: 0; transition: opacity .4s; }
.steps-wrap.is-scanning .laser__head { opacity: 1; }
.steps-wrap.is-scanning .laser__head::before { opacity: .8; }

/* ==========================================================================
   STANDARD
   ========================================================================== */
.standard { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 6vw, 100px); padding: clamp(80px, 14vh, 160px) var(--gutter); max-width: 1440px; margin: 0 auto; align-items: center; }
.standard__visual { position: relative; }
.standard__img { border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 5; position: relative; }
.standard__img img { position: absolute; inset: -10% 0; width: 100%; max-width: none; height: 120%; object-fit: cover; }
.standard__caption { position: absolute; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 99px; background: rgba(5,6,8,.7); font-size: 13px; }
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 2.6rem; border-top: 1px solid var(--line); }
.pillar { padding: 28px 24px 28px 0; border-bottom: 1px solid var(--line); }
.pillar:nth-child(odd) { border-right: 1px solid var(--line); }
.pillar:nth-child(even) { padding-left: 24px; padding-right: 0; }
.pillar svg { width: 34px; height: 34px; fill: none; stroke: var(--blue-hi); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 18px; }
.pillar h3 { font-family: var(--f-display); font-weight: 700; font-size: 17px; margin: 0 0 .4rem; }
.pillar p { margin: 0; color: var(--mist); font-size: 14.5px; }

/* ==========================================================================
   COVERAGE
   ========================================================================== */
.coverage { padding: clamp(60px, 10vh, 120px) var(--gutter); max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(30px, 6vw, 100px); align-items: start; }
.coverage__head p:not(.eyebrow) { color: var(--mist); max-width: 380px; }
.coverage__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.coverage__list li { font-family: var(--f-display); font-size: clamp(1.45rem, 3vw, 2.9rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; color: rgba(238,241,245,.40); transition: color .4s; cursor: default; }
.coverage__list li::after { content: "/"; margin: 0 .35em; color: rgba(43,155,230,.5); font-family: var(--f-serif); font-style: italic; }
.coverage__list li:last-child::after { content: ""; }
.coverage__list li:hover, .coverage__list li.is-lit { color: var(--pearl); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { padding: clamp(60px, 10vh, 120px) var(--gutter) clamp(100px, 16vh, 180px); max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(30px, 6vw, 100px); }
.faq__list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0; cursor: pointer; font-size: clamp(1.05rem, 1.6vw, 1.35rem); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); transition: transform .5s var(--ease), background-color .3s; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--pearl); }
.qa summary i::after { transform: rotate(90deg); transition: transform .5s var(--ease); }
.qa[open] summary i { background: var(--blue); border-color: var(--blue); }
.qa[open] summary i::after { transform: rotate(0); }
.qa__a { overflow: hidden; }
.qa__a p { margin: 0; padding: 0 60px 28px 0; color: var(--mist); max-width: 640px; }

/* ==========================================================================
   RESERVE / QUOTE
   ========================================================================== */
.reserve { position: relative; padding: clamp(90px, 14vh, 160px) var(--gutter); overflow: hidden; overflow: clip; border-top: 1px solid var(--line); }
.reserve__bg { position: absolute; inset: 0; opacity: .22; }
.reserve__bg img { width: 100%; height: 100%; object-fit: cover; }
.reserve::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 80% 40%, rgba(43,155,230,.18), transparent 70%), linear-gradient(180deg, var(--ink), rgba(5,6,8,.6) 40%, var(--ink)); z-index: 1; }
.reserve__wrap { position: relative; z-index: 2; max-width: 1340px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px, 6vw, 100px); align-items: start; }
.reserve__wrap > *, .standard > *, .coverage > *, .faq > *, .method > * { min-width: 0; }
.reserve__intro p:not(.eyebrow) { color: var(--mist); max-width: 420px; }
.reserve__contact { list-style: none; padding: 0; margin: 2.5rem 0 0; border-top: 1px solid var(--line); }
.reserve__contact li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.reserve__contact span { font-family: var(--f-wide); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--steel); padding-top: 4px; }
.reserve__contact b { font-weight: 500; }
.reserve__contact a { color: var(--blue-hi); }

.quote { background: rgba(13,16,21,.9); border: 1px solid var(--line); border-radius: 26px; padding: clamp(22px, 3vw, 40px); box-shadow: 0 40px 120px -50px rgba(0,0,0,.8); }
.quote__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 30px; font-family: var(--f-wide); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.quote__steps span { padding-top: 12px; border-top: 2px solid var(--line); transition: color .4s, border-color .4s; }
.quote__steps span.is-active { color: var(--pearl); border-color: var(--blue-hi); }
.quote__steps span.is-done { color: var(--mist); border-color: rgba(108,196,255,.45); }
.quote__viewport { overflow: hidden; overflow: clip; transition: height .6s var(--ease); }
.quote__rail { display: flex; transition: transform .7s var(--ease); align-items: flex-start; }
.qstep { flex: 0 0 100%; min-width: 0; border: 0; margin: 0; padding: 0 2px; }
.qstep legend { font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 300; letter-spacing: -.02em; margin-bottom: 22px; padding: 0; }
.vehicles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.vehicle input, .chip input { position: absolute; opacity: 0; pointer-events: none; }
.vehicle span { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 8px 14px; border: 1px solid var(--line); border-radius: 14px; font-size: 12.5px; color: var(--mist); cursor: pointer; transition: border-color .3s, background-color .3s, color .3s; text-align: center; }
.vehicle svg { width: 80%; max-width: 110px; height: auto; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.vehicle:hover span { border-color: var(--line-strong); color: var(--pearl); }
.vehicle input:checked + span { border-color: var(--blue-hi); background: rgba(43,155,230,.1); color: var(--pearl); }
.vehicle input:checked + span svg { stroke: var(--blue-hi); }
.vehicle input:focus-visible + span, .chip input:focus-visible + span { outline: 1.5px solid var(--blue-hi); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip span { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 99px; border: 1px solid var(--line); font-size: 13.5px; color: var(--mist); cursor: pointer; transition: all .3s; }
.chip span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; transition: all .3s; }
.chip:hover span { border-color: var(--line-strong); color: var(--pearl); }
.chip input:checked + span { border-color: var(--blue-hi); color: var(--pearl); background: rgba(43,155,230,.12); }
.chip input:checked + span::before { background: var(--blue-hi); border-color: var(--blue-hi); box-shadow: 0 0 8px var(--blue); }
.chips--sm span { padding: 9px 14px; font-size: 12.5px; }
.field { display: block; margin-bottom: 18px; }
.field > span { display: block; font-family: var(--f-wide); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--steel); margin-bottom: 8px; }
.field em { font-family: var(--f-sans); font-style: normal; text-transform: none; letter-spacing: 0; font-size: 11px; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 16px; color: var(--pearl); background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; transition: border-color .3s, background-color .3s; color-scheme: dark; resize: vertical;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mist) 50%), linear-gradient(135deg, var(--mist) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 17px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--blue-hi); background: rgba(43,155,230,.06); }
.field.is-invalid input { border-color: #ff6b6b; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.summary { margin-top: 6px; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px dashed var(--line-strong); font-size: 13.5px; color: var(--mist); line-height: 1.7; }
.summary b { color: var(--pearl); font-weight: 500; }
.quote__nav { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.quote__nav #quoteNext { margin-left: auto; }
.quote__err { margin: 0; font-size: 13px; color: #ff8f8f; }
.quote.is-done .quote__nav, .quote.is-done .quote__steps { display: none; }
.qdone { text-align: center; padding: 30px 0 10px; }
.qdone__mark { width: 96px; margin: 0 auto 24px; }
.qdone__mark svg { overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.qdone__shield { stroke: var(--blue-hi); stroke-width: 1.5; stroke-dasharray: 1 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 10px var(--blue)); }
.qdone__tick { stroke: var(--pearl); stroke-width: 3; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.quote.is-done .qdone__shield { animation: draw 1.2s var(--ease) .2s forwards; }
.quote.is-done .qdone__tick { animation: draw .7s var(--ease) 1.1s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.qdone h3 { font-family: var(--f-display); font-weight: 700; font-size: 2rem; letter-spacing: -.03em; margin: 0 0 .6rem; }
.qdone p { color: var(--mist); max-width: 380px; margin: 0 auto 1.6rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { padding: 90px var(--gutter) 30px; border-top: 1px solid var(--line); position: relative; overflow: hidden; overflow: clip; background: radial-gradient(70% 90% at 50% 120%, rgba(43,155,230,.22), transparent 70%), var(--ink); }
.footer__top { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 34px; margin-bottom: 64px; }
.footer__top .eyebrow { justify-content: center; }
.footer__lead { font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.25; margin: 0; }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; }
.footer__nav a, .footer__social a { color: var(--mist); transition: color .3s; width: fit-content; }
.footer__nav a:hover, .footer__social a:hover { color: var(--pearl); }
.footer__social { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.footer__social a { display: flex; align-items: center; gap: 12px; }
.footer__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.footer__social svg .fill { fill: currentColor; stroke: none; }
.quote__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.quote__human { margin-top: 12px; min-height: 0; }
.quote__legal { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: #8a929e; }
.quote__legal a { color: var(--mist); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Add to Home Screen ---------- */
.a2hs { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: -16px auto 64px; text-align: center; }
.a2hs[hidden] { display: none; }
.a2hs__note { margin: 0; font-family: var(--f-wide); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--mist); }
.a2hs__btn { display: inline-flex; align-items: center; gap: 14px; padding: 8px 22px 8px 8px; border-radius: 999px; color: var(--pearl);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015)), #07090c; border: 1px solid rgba(108,196,255,.34);
  font-family: var(--f-wide); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 36px -14px rgba(43,155,230,.55); transition: border-color .3s, box-shadow .3s; }
.a2hs__btn img { width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
.a2hs__plus { width: 14px; height: 14px; fill: none; stroke: var(--blue-hi); stroke-width: 2; stroke-linecap: round; }
.a2hs__btn:hover, .a2hs__btn:focus-visible { border-color: #4cc2ff; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 26px rgba(76,194,255,.38), 0 14px 36px -14px rgba(43,155,230,.6); }

.a2hs-sheet { position: fixed; inset: 0; z-index: 900; visibility: hidden; pointer-events: none; transition: visibility 0s .55s; }
.a2hs-sheet.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.a2hs-sheet__backdrop { position: absolute; inset: 0; background: rgba(2,3,5,.74); opacity: 0; transition: opacity .45s; }
.a2hs-sheet.is-open .a2hs-sheet__backdrop { opacity: 1; }
.a2hs-sheet__panel { position: absolute; left: 50%; bottom: 0; width: min(560px, 100%); max-height: 88vh; max-height: 88svh; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 22px calc(26px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0; outline: none;
  background: radial-gradient(90% 60% at 50% 0%, rgba(43,155,230,.14), transparent 70%), linear-gradient(180deg, #0c1016, #06080b 45%);
  border: 1px solid rgba(108,196,255,.24); border-bottom: 0; box-shadow: 0 -30px 80px rgba(0,0,0,.65);
  transform: translate(-50%, 104%); transition: transform .55s var(--ease); }
.a2hs-sheet.is-open .a2hs-sheet__panel { transform: translate(-50%, 0); }
.a2hs-sheet__grab { display: block; width: 42px; height: 4px; margin: 0 auto 16px; border-radius: 4px; background: rgba(233,237,242,.22); }
.a2hs-sheet__head { display: grid; grid-template-columns: 58px 1fr 44px; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.a2hs-sheet__head img { width: 58px; height: 58px; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 10px 26px -8px rgba(43,155,230,.6); }
.a2hs-sheet__kicker { margin: 0 0 6px; font-family: var(--f-wide); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-hi); }
.a2hs-sheet__title { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 21px; letter-spacing: -.02em; line-height: 1.1; color: var(--pearl); }
.a2hs-sheet__close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--pearl); font-size: 22px; line-height: 1; }
.a2hs-steps { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: a2hs; }
.a2hs-steps li { position: relative; display: grid; grid-template-columns: 34px 1fr; column-gap: 16px; padding: 16px 0; }
.a2hs-steps li::before { counter-increment: a2hs; content: counter(a2hs, decimal-leading-zero); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; box-sizing: border-box;
  display: grid; place-items: center; font-family: var(--f-wide); font-size: 10px; color: #fff; background: #0b2233; border: 1px solid #4cc2ff;
  box-shadow: 0 0 0 4px rgba(43,155,230,.12), 0 0 16px rgba(76,194,255,.5); }
.a2hs-steps li:not(:last-child)::after { content: ""; position: absolute; left: 16.5px; top: 54px; bottom: -14px; width: 1px; background: linear-gradient(#4cc2ff, rgba(76,194,255,.12)); }
.a2hs-steps b { display: block; margin: 6px 0 6px; font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: var(--pearl); }
.a2hs-steps span { display: block; font-size: 14px; line-height: 1.55; color: var(--mist); }
.a2hs-ico { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: 0 2px; vertical-align: -6px; border-radius: 7px; background: rgba(255,255,255,.08); color: var(--blue-hi); }
.a2hs-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.a2hs-ico circle { fill: currentColor; stroke: none; }
.a2hs-copy { display: flex; width: fit-content; max-width: 100%; margin-top: 12px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(108,196,255,.4); color: var(--pearl);
  font-family: var(--f-wide); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; word-break: break-all; text-align: left; }
.a2hs-copy.is-done { border-color: #4cc2ff; color: #9fe0ff; }
.a2hs-sheet__foot { margin: 6px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--steel); text-align: center; }
.a2hs-toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 950; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 999px;
  background: #0b1520; border: 1px solid rgba(108,196,255,.4); color: var(--pearl); font-size: 13px; text-align: center;
  opacity: 0; transform: translate(-50%, 12px); transition: opacity .35s, transform .35s var(--ease); pointer-events: none; }
.a2hs-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.footer__mark { display: block; position: relative; }
.footer__mark svg { width: 100%; height: auto; }
.footer__mark .logo-wordmark { fill: url(#chromeFill); }
.footer__base { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12.5px; color: #8a929e; }
.totop:hover { color: var(--pearl); }
.footer__legal { display: inline-flex; gap: 18px; }
.footer__legal a { color: var(--mist); text-decoration: none; padding: 6px 2px; }
.footer__legal a:hover, .footer__legal a:focus-visible { color: var(--pearl); }

/* ==========================================================================
   FILM LIGHTBOX
   ========================================================================== */
.film { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; visibility: hidden; pointer-events: none; }
.film.is-open { visibility: visible; pointer-events: auto; }
.film__backdrop { position: absolute; inset: 0; background: rgba(3,4,6,.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; transition: opacity .5s; }
.film.is-open .film__backdrop { opacity: 1; }
.film__box { position: relative; height: min(86vh, 900px); aspect-ratio: 9 / 16; max-width: 92vw; opacity: 0; transform: translateY(30px) scale(.96); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.film.is-open .film__box { opacity: 1; transform: none; }
.film__box video { width: 100%; height: calc(100% - 48px); object-fit: cover; border-radius: 20px; background: #000; }
.film__bar { display: flex; justify-content: space-between; align-items: center; height: 48px; font-family: var(--f-wide); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mist); }
.film__close { display: flex; align-items: center; gap: 8px; font-family: var(--f-wide); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; }
.film__close i { font-style: normal; font-size: 20px; line-height: 1; color: var(--pearl); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__cta { display: none; }
  .angle__hud { width: 200px; }
  .angle__copy { width: min(34vw, 380px); }
}

@media (max-width: 860px) {
  .hero__panels { inset: 10px; }
  .hero__panel figcaption { top: 78px; left: 14px; font-size: 8px; }
  .hero__foot .hero__tag { display: none; }

  .angle__copy { left: var(--gutter); right: var(--gutter); top: auto; bottom: 7vh; bottom: calc(100lvh - 100svh + 5svh); transform: none; width: auto; text-align: center; }
  .angle__h { margin-bottom: .8rem; }
  .angle__word { left: 0; right: 0; }
  .angle__p { margin: 0 auto; font-size: 14px; max-width: 320px; }
  .angle__hud { top: 84px; transform: none; right: var(--gutter); left: var(--gutter); width: auto; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
  .hud__dial, .hud__row--sm { display: none; }
  .hud__row b { font-size: 14px; }


  .method { grid-template-columns: 1fr; padding-top: 90px; gap: 40px; }
  .method__media { order: 2; }
  .method__frame { position: relative; top: 0; height: auto; width: 100%; aspect-ratio: 4 / 5; margin: 0; border-radius: 20px; }
  .method__steps { display: contents; }
  .method__head { order: 1; margin-bottom: 0; }
  .steps-wrap { order: 3; }
  .step { min-height: 0; padding: 22px 0; gap: 14px; }
  .step__card { padding: 24px 20px 22px; }
  .step__card > :not(svg) { opacity: .5; }
  .laser__head::before { width: 120px; margin-left: -60px; }
  .standard, .coverage, .faq, .reserve__wrap { grid-template-columns: 1fr; }
  .standard__visual { order: 2; }
  .pillars { grid-template-columns: 1fr; }
  .pillar, .pillar:nth-child(even) { padding: 22px 0; border-right: 0 !important; }
  .vehicles { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 520px) {
  .grid2 { grid-template-columns: 1fr; }
  .hero__ctas .btn { --h: 50px; padding: 0 20px; }
  .nav__word small { display: none; }
  .manifesto__sig { margin-top: 44px; }
}

/* ==========================================================================
   TOUCH (swipe mode) — nothing holds the page, nothing repaints per scroll frame
   ========================================================================== */
@media (max-width: 860px), (hover: none), (pointer: coarse) {
  /* garage: every card the same height, so captions line up and nothing sits empty
     under the photo cards (this block is last in the file, so it wins) */
  .shot--tall .shot__media { height: min(60svh, 520px); }
  .shot--offset .shot__media { aspect-ratio: auto; height: min(60svh, 520px); }

  /* Every angle: a normal-flowing section; the photo sits in its glowing card */
  .angle { height: auto; }
  .angle__stage { position: relative; height: auto; padding: 44px var(--gutter) 48px; display: flex; flex-direction: column; align-items: center; overflow: visible; }
  .angle__hud { display: none; }
  .angle__card { position: relative; left: auto; top: auto; translate: none; height: auto; width: min(84vw, 420px); aspect-ratio: 4 / 5; will-change: auto; }
  .angle__frame, .angle__aura { border-radius: 20px; }
  .angle__copy { position: static; transform: none; width: auto; max-width: 420px; margin: 26px auto 0; text-align: center; }
  .angle__h { height: auto; margin-bottom: 1.1rem; }
  .angle__word { position: static; display: block; opacity: 1 !important; transform: none !important; }
  .angle__p { opacity: 1 !important; margin: 0 auto; }

  .manifesto { padding-top: 84px; padding-bottom: 40px; }
  .manifesto__rail { top: 84px; bottom: 40px; }
  .manifesto__trio { grid-template-columns: 1fr; margin: 2.4rem 0; }
  .manifesto__trio li { grid-template-columns: 34px 1fr; column-gap: 12px; row-gap: 6px; padding: 20px 0; }
  .manifesto__trio li + li { border-left: 0; border-top: 1px solid var(--line); }
  .trio__n { grid-row: span 2; padding-top: .55em; }
  .manifesto__close { flex-direction: column; align-items: flex-start; gap: 22px; }
  .manifesto__sig { text-align: left; }

  /* no live blur behind the nav while scrolling */
  .nav.is-scrolled { background: rgb(5,6,8); backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* Phones: iOS browsers (Brave, Safari) collapse their address bar on scroll-down and it
     overlaps the very top of the page, hiding anything pinned at top: 0. So on touch the
     nav stays put (slimmer once scrolled) and the progress bar rides its bottom edge,
     a spot that is always on screen. --nav-h is measured in main.js. */
  .nav.is-scrolled { padding-top: 10px; padding-bottom: 10px; }
  .scroll-progress { top: var(--nav-h, 64px); }
}

/* Phones: the two-line headline can run larger; the eyebrow tightens to one line */
@media (max-width: 860px) {
  .hero__title { font-size: clamp(2rem, 10.2vw, 3.8rem); }
  .hero__eyebrow { font-size: 9.5px; letter-spacing: .14em; }
}

/* Short phone screens (iPhone SE, or any phone with its toolbars showing): the
   centred copy would run into the panel captions and the nav. Drop the captions
   and the scroll cue and let the copy sit lower. */
@media (max-width: 860px) and (max-height: 700px) {
  .hero__panel figcaption, .hero__foot { display: none; }
  .hero__content { bottom: 30px; }
  .hero__title { margin-bottom: 1rem; }
  .hero__sub { margin-bottom: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   OCT 2026 — client brief: section CTAs, before/after, photo picker,
   sticky quote bar (phones), footer credit
   ========================================================================== */
.section-cta { margin-top: 2.2rem; }
.manifesto__close .section-cta { margin-top: 2.6rem; }
.method__steps > .section-cta { display: table; margin: 3rem auto 0; }
.faq__head .section-cta { margin-top: 1.6rem; }
a.svc__add { color: inherit; text-decoration: none; }
a.svc__add:hover span { color: var(--blue-hi); }
.svc__add i { font-size: 14px; }
.hscroll__intro p b, .panel-intro p b, .qa__a b { color: var(--pearl); font-weight: 600; }

/* before / after */
.ba { padding: clamp(70px, 12vh, 140px) var(--gutter); max-width: 1180px; margin: 0 auto; text-align: center; }
.ba__head { max-width: 640px; margin: 0 auto clamp(28px, 5vh, 52px); }
.ba__head .eyebrow { justify-content: center; }
.ba__head p:not(.eyebrow) { color: var(--mist); margin: 1rem auto 0; max-width: 520px; }
.ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 2vw, 24px); }
.ba__shot { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--graphite); aspect-ratio: 4 / 5; border: 1px solid var(--line); }
.ba__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba__shot--after { border-color: rgba(108,196,255,.45); box-shadow: 0 0 0 1px rgba(108,196,255,.12), 0 30px 70px -30px rgba(43,155,230,.55); }
.ba__shot figcaption { position: absolute; left: 12px; top: 12px; }
.ba__tag { display: inline-block; font-family: var(--f-wide); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; padding: 8px 12px; border-radius: 99px; background: rgba(5,6,8,.78); color: var(--pearl); border: 1px solid var(--line-strong); }
.ba__shot--after .ba__tag { background: var(--pearl); border-color: var(--pearl); color: var(--ink); }
.ba .section-cta { margin-top: 2.4rem; }

/* quote form additions */
.field__label { font-family: var(--f-wide); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--steel); margin: 4px 0 10px; }
.grid2--car { grid-template-columns: .7fr 1.3fr; }
.chip--wide span { border-style: dashed; }
.photos { margin: 4px 0 16px; }
.photos__add { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 16px 18px; border: 1px dashed var(--line-strong); border-radius: 14px; cursor: pointer; transition: border-color .3s, background-color .3s; }
.photos__add:hover, .photos__add:focus-within { border-color: var(--blue-hi); background: rgba(43,155,230,.06); }
/* the file input is visually hidden and the label opens the picker; an invisible input laid
   over the button can still be drawn by some browsers as a stray box, so it's taken out of view */
.photos__add { -webkit-tap-highlight-color: transparent; }
.photos__add input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; -webkit-appearance: none; appearance: none; }
.photos__add svg { grid-row: span 2; width: 26px; height: 26px; fill: none; stroke: var(--blue-hi); stroke-width: 1.5; stroke-linejoin: round; }
.photos__add span { font-size: 15px; color: var(--pearl); }
.photos__add small { font-size: 12px; color: #8a929e; }
.photos__add.is-full { opacity: .45; pointer-events: none; }
.photos__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.photos__list:empty { display: none; }
.photos__list li { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--graphite); }
.photos__list img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photos__list button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(5,6,8,.82); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }

/* footer */
.footer__phone { margin: .9rem 0 0; }
.footer__phone a { font-family: var(--f-wide); font-size: 13px; letter-spacing: .14em; color: var(--blue-hi); }
.footer__email { margin: .5rem 0 0; }
.footer__email a { color: var(--mist); font-size: 14px; overflow-wrap: break-word; }
.footer__email a:hover, .footer__email a:focus-visible { color: var(--pearl); }
.footer__hours { margin: .5rem 0 0; color: #8a929e; font-size: 13px; }
.reserve__contact b, .reserve__contact a { text-align: right; min-width: 0; overflow-wrap: break-word; }

/* sticky quote bar — phones only; slides in once the hero has scrolled away */
.qbar { display: none; }
@media (max-width: 860px), (hover: none), (pointer: coarse) {
  .qbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 80; display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 6px; border-radius: 99px; background: rgba(10,12,16,.94); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px -12px rgba(0,0,0,.8); transform: translateY(calc(100% + 30px)); opacity: 0; transition: transform .45s var(--ease), opacity .3s; pointer-events: none; }
  .qbar.is-on { transform: none; opacity: 1; pointer-events: auto; }
  body.is-loading .qbar { display: none; }
  .qbar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 99px; font-family: var(--f-wide); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
  .qbar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .qbar__call { padding: 0 18px; color: var(--pearl); border: 1px solid var(--line-strong); }
  .qbar__quote { color: var(--ink); background: var(--pearl); box-shadow: 0 8px 26px -8px rgba(43,155,230,.7); }
  .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (max-width: 860px) {
  .grid2--car { grid-template-columns: .7fr 1.3fr; }
}
@media (max-width: 420px) {
  .ba__tag { font-size: 8.5px; padding: 6px 9px; }
}

/* ==========================================================================
   ENGLISH / ESPAÑOL — the switch in the hero (top-right, under the nav) and in
   the footer. i18n.js swaps the copy in place; aria-pressed marks the active one.
   ========================================================================== */
.lang { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(5,6,8,.62); border: 1px solid rgba(43,155,230,.45); }
.lang button { font-family: var(--f-wide); font-size: 10px; letter-spacing: .16em; line-height: 1; min-width: 44px; height: 32px; padding: 0 12px 0 calc(12px + .16em); border-radius: 999px; color: rgba(238,241,245,.78); background: transparent; border: 0; cursor: pointer; transition: background-color .25s, color .25s; }
.lang button:hover { color: var(--pearl); }
.lang button[aria-pressed="true"] { background: var(--pearl); color: var(--ink); }
.hero__lang { position: absolute; z-index: 3; top: 82px; right: 30px; }
.footer__lang { margin: 4px 0; }
@media (max-width: 860px) {
  .hero__lang { top: 76px; right: 22px; }
  .lang button { height: 36px; }
}

/* ==========================================================================
   REVIEWS — real Google reviews in a free-scrolling native row (no snap,
   no scroll-linked effects). main.js adds mouse drag and the edge-swipe guard.
   ========================================================================== */
.reviews { position: relative; padding: clamp(72px, 10vw, 128px) 0 clamp(64px, 8vw, 104px); background: linear-gradient(180deg, var(--ink) 0%, #080b10 100%); }
.reviews__head { padding: 0 var(--gutter); display: grid; gap: 14px; justify-items: start; margin-bottom: clamp(28px, 4vw, 48px); }
.reviews__head .display { margin: 0; }
.reviews__score { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 0; font-family: var(--f-wide); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.reviews__score b { font-family: var(--f-display); font-size: 22px; letter-spacing: 0; color: var(--pearl); }
/* five stars from one mask, so they stay crisp at any size and colour */
.stars { --s: 16px; display: inline-block; width: calc(var(--s) * 5); height: var(--s); flex: none; background: #f5c451;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") 0 0 / var(--s) var(--s) repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") 0 0 / var(--s) var(--s) repeat-x; }
.reviews__score .stars { --s: 18px; }
.reviews__track { display: flex; align-items: stretch; gap: clamp(14px, 1.6vw, 22px); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  padding: 6px var(--gutter) 10px; scroll-padding-inline: var(--gutter); scrollbar-width: none; cursor: grab; }
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.reviews__track:focus-visible { outline-offset: -2px; }
.review { flex: 0 0 auto; width: min(380px, 80vw); margin: 0; display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 2.4vw, 30px);
  background: linear-gradient(180deg, #10151d 0%, #0b0f15 100%); border: 1px solid var(--line); border-radius: 20px; position: relative; }
.review::before { content: "\201C"; position: absolute; top: 6px; right: 22px; font-family: var(--f-display); font-size: 84px; line-height: 1; color: rgba(108,196,255,.16); pointer-events: none; }
.review blockquote { margin: 0; flex: 1; }
.review blockquote p { margin: 0; font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.6; color: rgba(238,241,245,.88); }
.review__more { color: var(--mist); }
.review figcaption { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.review figcaption b { font-weight: 600; color: var(--pearl); }
.review figcaption span { font-family: var(--f-wide); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #8a929e; }
.reviews__foot { padding: clamp(28px, 4vw, 44px) var(--gutter) 0; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
@media (max-width: 860px) {
  .reviews__track { cursor: auto; }
  .reviews__foot { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   SOCIAL — a slim band of the three profiles, right above the reviews
   ========================================================================== */
.social { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: clamp(40px, 5vw, 64px) var(--gutter) 0; background: var(--ink); }
.social__label { margin: 0; }
.social__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; flex: 1 1 560px; max-width: 760px; }
.social__link { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 18px; border: 1px solid var(--line-strong); border-radius: 16px; background: #0d1117; color: var(--pearl); text-decoration: none; transition: border-color .3s, background-color .3s; }
.social__link:hover, .social__link:focus-visible { border-color: var(--blue); background: rgba(43,155,230,.08); }
.social__link svg { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--blue-hi); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.social__link svg .fill { fill: var(--blue-hi); stroke: none; }
.social__link span { display: flex; flex-direction: column; min-width: 0; }
.social__link b { font-weight: 600; font-size: 15px; }
.social__link small { font-size: 12.5px; color: var(--mist); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social + .reviews { padding-top: clamp(48px, 7vw, 96px); }
@media (max-width: 640px) {
  .social { flex-direction: column; align-items: flex-start; }
  .social__links { width: 100%; flex-basis: auto; gap: 8px; }
  .social__link { flex-direction: column; justify-content: center; gap: 8px; padding: 14px 6px; text-align: center; }
  .social__link span { align-items: center; }
  .social__link b { font-size: 13.5px; }
  .social__link small { display: none; }
}

/* ==========================================================================
   ABOUT — Manuel's story, at the end of the page before the footer
   ========================================================================== */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center;
  padding: clamp(80px, 10vw, 140px) var(--gutter); background: linear-gradient(180deg, #080b10 0%, var(--ink) 100%); }
.about__photo { position: relative; margin: 0; border-radius: 24px; overflow: hidden; background: #0b0f15;
  box-shadow: 0 0 0 1px rgba(108,196,255,.35), 0 0 40px 2px rgba(43,155,230,.18), 0 30px 80px rgba(0,0,0,.5); }
.about__photo img { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: cover; object-position: 60% 50%; }
.about__photo figcaption { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 99px;
  background: rgba(5,6,8,.72); border: 1px solid rgba(43,155,230,.45); font-family: var(--f-wide); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--pearl); }
.about__copy { max-width: 600px; }
.about__copy .display { margin: .6rem 0 1.6rem; }
.about__copy p { color: rgba(238,241,245,.82); line-height: 1.7; margin: 0 0 1rem; }
.about__copy .eyebrow { margin: 0; }
.about__lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--pearl) !important; }
.about__mission { margin: 2.2rem 0 0; padding-top: 2rem; border-top: 1px solid var(--line); }
.about__mission h3 { margin: .7rem 0 1rem; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.35rem, 2.2vw, 1.9rem); letter-spacing: -.02em; line-height: 1.15; color: var(--pearl); }
.about__sign { margin: 2rem 0 1.6rem !important; font-family: var(--f-wide); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-hi) !important; }
@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; }
  .about__photo img { max-height: none; }
}
.about__copy .display em { white-space: nowrap; }
@media (min-width: 861px) { .about__photo img { max-height: 76vh; max-height: 76svh; } }
/* the sticky quote bar keeps its labels on one line on the narrowest phones (Spanish runs longer) */
@media (max-width: 860px) { .qbar a { white-space: nowrap; } }
@media (max-width: 360px) { .qbar a { font-size: 9.5px; letter-spacing: .06em; gap: 6px; } .qbar__call { padding: 0 14px; } .qbar__quote { padding: 0 10px; } }
/* About: centred copy (owner's call, 15 Oct 2026) */
.about__copy { text-align: center; margin-inline: auto; }
.about__mission { border-top: 0; position: relative; }
.about__mission::before { content: ""; display: block; width: 64px; height: 1px; margin: 0 auto 2rem; background: var(--line-strong); }
.about__copy .eyebrow { justify-content: center; }
/* vehicle-type tiles (restored 15 Oct 2026): three across on phones keeps the step short */
@media (max-width: 860px) {
  .vehicles { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
  .vehicle span { padding: 12px 4px 10px; gap: 6px; font-size: 11.5px; line-height: 1.25; }
}
@media (max-width: 359px) { .vehicles { grid-template-columns: repeat(2, 1fr); } }