/* ============================================================
   PX98 — design system
   Lifted from the pack: black plastic, one yellow, white type,
   an angled chevron cut, and specification data set in mono.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --ink:        #08090a;
  --ink-1:      #0d0f11;
  --ink-2:      #131619;
  --ink-3:      #1b1f23;
  --bone:       #f2f0eb;
  --bone-2:     #e6e3db;
  --bone-3:     #d5d1c7;
  --y:          #ffd200;
  --y-deep:     #e0b400;
  --y-dim:      #6b5900;
  --white:      #ffffff;
  --grey:       #8b9299;
  --grey-2:     #5d646b;
  --slate:      #3a4046;

  --hair-d:     rgba(255,255,255,.09);
  --hair-d-2:   rgba(255,255,255,.16);
  --hair-l:     rgba(8,9,10,.12);
  --hair-l-2:   rgba(8,9,10,.22);

  --fd: 'Archivo', 'Arial Narrow', sans-serif;   /* display */
  --fb: 'IBM Plex Sans', system-ui, sans-serif;  /* body */
  --fm: 'IBM Plex Mono', ui-monospace, monospace;/* data */

  --e-out:  cubic-bezier(.16,1,.3,1);
  --e-in:   cubic-bezier(.7,0,.84,0);
  --e-both: cubic-bezier(.76,0,.24,1);

  --pad-x: 44px;
  --max: 1400px;
  --notch: 26px;
  /* The height #top-nav settles at once it takes .stuck. Anything that has to park
     under the bar, or scroll something clear of it, reads this rather than its own
     copy of the number. */
  --stick: 84px;

  --hatch: repeating-linear-gradient(-45deg,
            rgba(255,255,255,.035) 0 1px, transparent 1px 9px);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* The bar is fixed, so a jump to #sustainability or #quality has to stop clear of
   it or the heading it landed on sits behind the nav. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 104px; }
body {
  background: var(--ink);
  color: var(--white);
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 350;
  /* clip does what hidden did here without turning the body into a scrollport, which
     is what a position:sticky descendant needs. hidden stays as the fallback. */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; }
::selection { background: var(--y); color: #000; }

:focus-visible {
  outline: 2px solid var(--y);
  outline-offset: 3px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #2a2f34; }
::-webkit-scrollbar-thumb:hover { background: var(--y-deep); }

/* ---------- layout primitives ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad-x); }
.sect { padding-block: clamp(72px, 9vw, 132px); position: relative; }
.sect--tight { padding-block: clamp(56px, 6vw, 88px); }
.sect--bone { background: var(--bone); color: var(--ink); }
.sect--ink1 { background: var(--ink-1); }

.grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .28; mix-blend-mode: overlay;
}

/* ---------- photographic section grounds ----------
   Set --shot (and optionally --shot-pos / --shot-fade) on the section.
   The photo is atmosphere: it never competes with the type sitting on it. */
.sect--photo { isolation: isolate; overflow: hidden; }
.sect--photo::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: var(--shot) var(--shot-pos, center) / cover no-repeat;
  opacity: var(--shot-op, .92);
  filter: saturate(1.02) contrast(1.02) brightness(.86);
  transform: scale(1.02);
}
/* the ink is spent on the left, under the headline — the rest of the frame stays open */
.sect--photo::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--shot-fade,
    linear-gradient(90deg, rgba(8,9,10,.93) 0%, rgba(8,9,10,.7) 32%,
                           rgba(8,9,10,.3) 58%, rgba(8,9,10,.12) 80%, rgba(8,9,10,.4) 100%));
}
/* a black-ground plate drops straight in with screen blending */
.sect--photo.is-screen::before { mix-blend-mode: screen; opacity: var(--shot-op, .78); filter: none; }

/* Type over a car: the fade alone cannot hold every crop, because the bright part
   of the subject moves with the photograph and with the viewport. A soft ink halo
   travels with the headline instead of a panel being dropped over the picture. */
.sect--photo .d1, .sect--photo .d2 { text-shadow: 0 6px 44px rgba(8,9,10,.62), 0 2px 10px rgba(8,9,10,.52); }

/* A landscape photograph behind a portrait phone is cropped to its middle third,
   which is rarely where the subject is. --shot-pos-m re-aims the same file for the
   narrow viewport; sections that do not set it keep their desktop framing. */
@media (max-width: 720px) {
  .sect--photo::before { background-position: var(--shot-pos-m, var(--shot-pos, center)); }

  /* A landscape frame behind a section that runs several phone screens tall gets
     cropped to a tenth of its own width, which is no longer a picture of anything.
     On a phone the photograph becomes a band at the head of the section and hands
     the rest back to the ink, so what sits below lands on black rather than on a
     smear of wall. Page headers and full-screen sections are already the right
     shape for a crop, so they keep it. */
  .sect--photo:not(.phead):not(.sect--screen)::before { inset: 0 0 auto; height: 46svh; }
  .sect--photo:not(.phead):not(.sect--screen)::after {
    inset: 0 0 auto; height: 46svh;
    background: var(--shot-fade-m,
      linear-gradient(180deg, rgba(8,9,10,.72) 0%, rgba(8,9,10,.38) 34%,
                              rgba(8,9,10,.62) 74%, var(--ink) 100%));
  }
}

/* ---------- full-screen photographic statements ----------
   A section that hands the whole viewport to one photograph and sets the copy on
   it, instead of boxing the picture into a column beside the type. */
.sect--screen {
  min-height: 100svh; display: flex; align-items: center;
  padding-block: clamp(116px, 13vh, 164px);
  border-block: 1px solid var(--hair-d);
}
.screen-in { position: relative; z-index: 1; width: 100%; }
.screen-copy { max-width: 46ch; }
/* the ink halo travels with the type, as on the page headers: a fade alone cannot
   hold every crop once the bright part of the picture moves */
.screen-copy .d2 { margin-bottom: 22px; text-shadow: 0 6px 44px rgba(8,9,10,.68), 0 2px 10px rgba(8,9,10,.56); }
.screen-copy .lede { color: rgba(255,255,255,.88); margin-bottom: 18px; }
.screen-copy .body-c { color: rgba(255,255,255,.76); }
.screen-copy .lede, .screen-copy .body-c { text-shadow: 0 1px 16px rgba(8,9,10,.95), 0 1px 4px rgba(8,9,10,.82); }

/* claims running across the foot of a full-screen photograph get a plate of their
   own rather than trusting the picture to stay dark behind them */
.spec-plate {
  margin-top: clamp(30px, 5vh, 54px);
  padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.6vw, 34px);
  background: rgba(8,9,10,.66);
  backdrop-filter: blur(11px) saturate(1.15);
  -webkit-backdrop-filter: blur(11px) saturate(1.15);
  box-shadow: inset 0 0 0 1px var(--hair-d);
}
.spec-plate .spec-group { border-top-color: var(--hair-d-2); }

/* The horizontal fade holds because the copy sits in the dark left of the frame.
   Stacked on a phone the copy runs the full width, so the ink has to come down the
   picture instead of across it. */
@media (max-width: 720px) {
  .sect--screen.sect--photo::after {
    background: var(--shot-fade-m,
      linear-gradient(180deg, rgba(8,9,10,.74) 0%, rgba(8,9,10,.55) 26%,
                              rgba(8,9,10,.8) 58%, rgba(8,9,10,.95) 100%));
  }
  /* stacked on a phone the plate is one long column rather than a band, so it stops
     being a plate and goes back to plain rules on the ink the vertical fade lays
     down. Kept on the same breakpoint as that fade, so the two never disagree. */
  .spec-plate { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; padding: 0; }
}

@media (max-width: 900px) {
  .sect--screen { min-height: 94svh; align-items: flex-end; padding-block: clamp(104px, 15vh, 140px) clamp(44px, 7vh, 68px); }
  .screen-copy { max-width: none; }
}

/* The image URL lives here, not in an inline style: a url() inside a custom
   property resolves against the stylesheet that consumes it, so an HTML-relative
   path would 404. Swap a photo by editing one line below. */
/* Each frame is cut to the shape of the section that shows it and composed with the
   car clear of whatever sits over the foot of it, so these want no --shot-pos beyond
   the centre. tools/build-images.py holds the crops. */
.shot--about        { --shot: url("../img/about-defender.jpg"); }
.shot--about-speed  { --shot: url("../img/about-tunnel-speed.jpg"); }
.shot--technology   { --shot: url("../img/technology-roadster.jpg"); }
.shot--products     { --shot: url("../img/products-sedan-highway.jpg"); }
.shot--why98        { --shot: url("../img/why-supercar-98.jpg"); }
.shot--tech-city    { --shot: url("../img/tech-supra-city.jpg"); }
.shot--coastal98    { --shot: url("../img/distributors-coastal-98.jpg"); }

/* ---------- drawn section grounds ----------
   Stands in for the four car photographs the client asked us to replace but has
   not supplied yet. Same two-layer structure as .sect--photo, so a licensed
   photograph drops in by swapping the class back and setting --shot.

   Both grounds come out of the pack label's own vocabulary rather than being
   invented: --streak is the warm light band running behind the PX98 logo on
   every label, --lattice is the molecular field the technology copy describes. */
.sect--ground { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); }
.sect--ground::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.sect--ground::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--shot-fade,
    linear-gradient(90deg, rgba(8,9,10,.9) 0%, rgba(8,9,10,.6) 34%,
                           rgba(8,9,10,.32) 64%, rgba(8,9,10,.52) 100%));
}
.ground--streak::before {
  background:
    repeating-linear-gradient(107deg, rgba(255,210,0,.055) 0 1px, transparent 1px 46px),
    radial-gradient(115% 85% at 82% 14%, rgba(255,210,0,.1), transparent 58%),
    linear-gradient(168deg, #12151b, var(--ink) 60%, #06080b);
}
.ground--lattice::before {
  background:
    radial-gradient(circle, rgba(255,210,0,.16) 0 1.4px, transparent 1.9px),
    radial-gradient(118% 88% at 74% 26%, rgba(255,210,0,.11), transparent 60%),
    linear-gradient(170deg, #101319, var(--ink) 62%, #06080b);
  background-size: 32px 32px, 100% 100%, 100% 100%;
}

/* ---------- type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fm); font-size: 11px; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--y);
}
.eyebrow::before {
  content: ''; width: 20px; height: 8px; flex: none; background: var(--y);
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
}
.sect--bone .eyebrow { color: var(--slate); }
.sect--bone .eyebrow::before { background: var(--ink); }

.d1, .d2, .d3, .d4 {
  font-family: var(--fd); font-weight: 800; font-stretch: 88%;
  text-transform: uppercase; line-height: .92; letter-spacing: -.012em;
}
.d1 { font-size: clamp(46px, 8.2vw, 118px); line-height: .88; letter-spacing: -.022em; }
.d2 { font-size: clamp(34px, 4.6vw, 66px); }
.d3 { font-size: clamp(26px, 2.9vw, 40px); }
.d4 { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.05; }
.d1 i, .d2 i, .d3 i {
  font-style: italic; font-weight: 900; color: var(--y);
  font-stretch: 82%; letter-spacing: -.03em;
}

.lede { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.72; color: rgba(255,255,255,.7); max-width: 62ch; }
.sect--bone .lede { color: #454b51; }
.body-c { color: rgba(255,255,255,.62); max-width: 66ch; }
.sect--bone .body-c { color: #4d5359; }

.mono { font-family: var(--fm); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); }

.hr { height: 1px; background: var(--hair-d); border: 0; }
.sect--bone .hr { background: var(--hair-l); }

/* The section index plate that used to live here is gone. It sat in the top-right
   of a section header as a small grey caption, which the client could not read on
   a photographic ground, and it was carrying no information the section headline
   and its own content did not already give. */

/* ---------- the chevron notch (signature) ---------- */
.notch   { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%); }
.notch-s { --notch: 12px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%); }
.notch-tl{ clip-path: polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch)); }

/* ---------- buttons ---------- */
.btn {
  --notch: 13px;
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 26px; border: 0; cursor: pointer;
  font-family: var(--fm); font-size: 11.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
  transition: transform .4s var(--e-out), color .3s;
  overflow: hidden; isolation: isolate; text-align: left;
}
.btn > * { position: relative; z-index: 2; }
.btn::before { content: ''; position: absolute; inset: 0; z-index: 1; transition: transform .45s var(--e-out); }
.btn:hover { transform: translateY(-2px); }
.btn .chev { width: 16px; height: 9px; flex: none; transition: transform .4s var(--e-out); }
.btn:hover .chev { transform: translateX(5px); }

.btn--y { background: var(--y); color: #000; }
.btn--y::before { background: var(--white); transform: translateY(101%); }
.btn--y:hover::before { transform: translateY(0); }

.btn--ghost { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1px var(--hair-d-2); }
.btn--ghost::before { background: var(--y); transform: translateY(101%); }
.btn--ghost:hover { color: #000; }
.btn--ghost:hover::before { transform: translateY(0); }

.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink::before { background: var(--y); transform: translateY(101%); }
.btn--ink:hover { color: #000; }
.btn--ink:hover::before { transform: translateY(0); }

/* ---------- reveals ---------- */
[data-rv] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--e-out), transform .9s var(--e-out); }
[data-rv="l"] { transform: translateX(-30px); }
[data-rv="r"] { transform: translateX(30px); }
[data-rv="s"] { transform: scale(.965); }
[data-rv].in { opacity: 1; transform: none; }

.mask { display: block; overflow: hidden; }
.mask > span { display: block; transform: translateY(105%); transition: transform 1s var(--e-out); }
.mask.in > span, .in .mask > span { transform: none; }

/* ============================================================
   NAV
   ============================================================ */
#top-nav {
  position: fixed; inset: 0 0 auto; z-index: 900;
  transition: background .45s var(--e-out), backdrop-filter .45s, border-color .45s;
  border-bottom: 1px solid transparent;
}
/* Until it sticks the bar is transparent, and it now sits over a photograph on
   every inner page. A short scrim off the top edge keeps the links off the sky. */
#top-nav::before {
  content: ''; position: absolute; inset: -1px 0 auto; height: 190%; z-index: -1;
  pointer-events: none; opacity: 1; transition: opacity .45s var(--e-out);
  background: linear-gradient(180deg, rgba(8,9,10,.78) 0%, rgba(8,9,10,.5) 46%, rgba(8,9,10,0) 100%);
}
#top-nav.stuck::before { opacity: 0; }
#top-nav.stuck {
  background: rgba(8,9,10,.82);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--hair-d);
}
.nav-in {
  max-width: var(--max); margin-inline: auto; padding-inline: var(--pad-x);
  height: 100px; display: flex; align-items: center; gap: 32px;
  transition: height .45s var(--e-out);
}
#top-nav.stuck .nav-in { height: 84px; }

/* The supplied PX98 logo, now built from PX98-02 at the client's request: white PX
   over the yellow 98, no black keyline. It is a stacked two-row lockup, so it needs
   more height than a single-line wordmark to hold the same presence. Set 40% larger
   than the previous 44px/37px pair, with the bar grown to match so the clearance
   around the mark is preserved. */
.mark { display: flex; align-items: center; flex: none; }
.mark img { height: 62px; width: auto; transition: height .45s var(--e-out); }
#top-nav.stuck .mark img { height: 52px; }

.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a {
  position: relative; padding: 9px 14px;
  font-family: var(--fm); font-size: 11px; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase; color: rgba(255,255,255,.66);
  transition: color .3s;
}
.nav-links a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 1.5px;
  background: var(--y); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .45s var(--e-out);
}
.nav-links a:hover, .nav-links a[aria-current] { color: var(--white); }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav-cta { flex: none; }

.burger { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; position: relative; z-index: 1001; }
.burger i { position: absolute; left: 11px; width: 22px; height: 1.5px; background: var(--white); transition: transform .4s var(--e-out), opacity .25s; }
.burger i:nth-child(1) { top: 17px; }
.burger i:nth-child(2) { top: 22px; }
.burger i:nth-child(3) { top: 27px; }
.burger.on i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger.on i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.burger.on i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

#drawer {
  position: fixed; inset: 0; z-index: 899; background: var(--ink-1);
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 96px var(--pad-x) 40px;
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--e-both);
}
#drawer.on { clip-path: inset(0 0 0 0); }
#drawer a {
  font-family: var(--fd); font-weight: 800; font-stretch: 88%; text-transform: uppercase;
  font-size: clamp(30px, 8vw, 52px); line-height: 1.14; color: var(--white);
  border-bottom: 1px solid var(--hair-d); padding: 10px 0;
  display: flex; justify-content: space-between; align-items: center;
}
#drawer a span { font-family: var(--fm); font-size: 10px; letter-spacing: .2em; color: var(--y); font-weight: 500; }

/* Read progress. Driven by a scroll timeline rather than a scroll listener, so the
   browser animates it off the main thread and nothing recalculates per frame.
   Where scroll timelines are unsupported the bar simply never shows. */
#scan {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--y); z-index: 950;
  transform: scaleX(0); transform-origin: 0 50%;
}
@supports (animation-timeline: scroll()) {
  #scan { animation: scan-progress linear both; animation-timeline: scroll(root block); }
  @keyframes scan-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ============================================================
   HERO
   ============================================================ */
/* bottom padding keeps the grade rail clear of the fixed corner widgets */
#hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding: 116px 0 62px; overflow: hidden; background: var(--ink); }
/* The photograph is back but the scroll parallax is not: nothing in the hero is
   driven by scroll position, so there is still no scroll listener behind it. */
/* the ground the photograph stands on, and what shows if it never loads */
.hero-field {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background:
    repeating-linear-gradient(107deg, rgba(255,210,0,.06) 0 1px, transparent 1px 52px),
    radial-gradient(105% 80% at 74% 16%, rgba(255,210,0,.13), transparent 60%),
    linear-gradient(166deg, #14181f, var(--ink) 58%, #05070a);
}

/* The car is back in the hero, stretched full bleed. What read as blur before was
   a 740px file behind a 2560px hero; this cut is 2400px wide, so it holds the
   stretch. The pack group still stands in front of it on its own pool of light. */
.hero-ground {
  position: absolute; inset: 0;
  background: url("../img/hero-supercar-98.jpg") var(--hero-pos, 50% 44%) / cover no-repeat;
  filter: saturate(1.04) contrast(1.03) brightness(.84);
  transform: scale(1.02);
}

/* left-weighted: enough ink under the headline, then it opens right up so the car reads */
.hero-vig {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(95deg, rgba(6,7,8,.92) 0%, rgba(6,7,8,.8) 22%,
                           rgba(6,7,8,.5) 40%, rgba(6,7,8,.16) 60%,
                           rgba(6,7,8,.06) 76%, rgba(6,7,8,.34) 100%),
    linear-gradient(180deg, rgba(6,7,8,.8) 0%, rgba(6,7,8,.02) 20%,
                            rgba(6,7,8,.04) 56%, rgba(6,7,8,.88) 100%);
}
.hero-grain {
  position: absolute; inset: 0; z-index: 2; opacity: .3; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.hero-in { position: relative; z-index: 3; width: 100%; padding-bottom: 0; }
/* copy holds the dark left; the pack group sits over the car on the right */
.hero-cols { display: grid; grid-template-columns: minmax(0, 54%) 1fr; gap: 20px; align-items: end; }
.hero-copy { max-width: 740px; padding-bottom: 8px; }

.hero-pack { position: relative; justify-self: end; align-self: end; width: 100%; }
.hero-pack img {
  position: relative; width: 100%; max-width: 596px; height: auto; margin-left: auto; margin-right: 26px;
  filter: drop-shadow(0 30px 55px rgba(0,0,0,.8));
  animation: bob 8s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }
/* pool of light so the black packs separate from the black car behind them */
.hero-pack::before {
  content: ''; position: absolute; z-index: 0; right: -4%; bottom: -6%;
  width: 92%; max-width: 700px; aspect-ratio: 1.5; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,210,0,.2) 0%, rgba(8,9,10,.86) 40%,
                                                rgba(8,9,10,.55) 58%, transparent 74%);
  filter: blur(22px);
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 11px; margin-bottom: 20px;
  padding: 7px 15px 7px 12px; background: rgba(255,210,0,.07);
  box-shadow: inset 0 0 0 1px rgba(255,210,0,.25);
  font-family: var(--fm); font-size: 10px; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--y);
  --notch: 9px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
}
.pulse { width: 6px; height: 6px; background: var(--y); border-radius: 50%; animation: pulse 2s var(--e-out) infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,210,0,.55); } 60% { box-shadow: 0 0 0 9px rgba(255,210,0,0); } }

#hero h1 { font-family: var(--fd); font-weight: 800; font-stretch: 86%; text-transform: uppercase;
  font-size: clamp(42px, 6.9vw, 100px); line-height: .88; letter-spacing: -.028em; margin-bottom: 24px;
  text-shadow: 0 6px 42px rgba(6,7,8,.72), 0 2px 12px rgba(6,7,8,.55); }
#hero h1 i { font-style: italic; font-weight: 900; color: var(--y); font-stretch: 80%; }
.hero-sub { max-width: 46ch; color: rgba(255,255,255,.72); font-size: clamp(15px,1.1vw,17px); line-height: 1.7; margin-bottom: 26px;
  text-shadow: 0 1px 16px rgba(6,7,8,.92), 0 1px 4px rgba(6,7,8,.8); }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* the grade rail — PX98's actual viscosity coverage, doubles as a jump-off.
   Scrolls continuously, holds on hover, arrows nudge it by a step. */
.rail { position: relative; z-index: 3; border-top: 1px solid var(--hair-d); margin-top: clamp(22px,3vw,38px); }
.rail-head { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 8px; gap: 20px; flex-wrap: wrap; }
.rail-head .mono { font-size: 10px; letter-spacing: .22em; }

.rail-marquee { position: relative; }
.rail-viewport { overflow: hidden; padding-bottom: 20px;
  mask-image: linear-gradient(90deg, transparent, #000 46px, #000 calc(100% - 46px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 46px, #000 calc(100% - 46px), transparent); }
.rail-track { display: flex; width: max-content; will-change: transform; }

.rail-step {
  position: relative; flex: 0 0 auto; min-width: 178px; padding: 18px 30px 0 0; background: none; border: 0;
  border-top: 1px solid var(--hair-d); cursor: pointer; text-align: left;
  font-family: var(--fd); font-weight: 900; font-stretch: 84%; font-style: italic;
  font-size: clamp(28px, 2.7vw, 42px); line-height: 1; letter-spacing: -.02em;
  color: rgba(255,255,255,.5);
  transition: color .35s var(--e-out);
}
.rail-step::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 30px; height: 2px;
  background: var(--y); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s var(--e-out);
}
.rail-step em { display: block; font: 500 11px/1 var(--fm); font-style: normal; letter-spacing: .16em;
  text-transform: uppercase; color: var(--grey-2); margin-top: 10px; }
.rail-step:hover, .rail-step:focus-visible { color: var(--white); }
.rail-step:hover::before, .rail-step:focus-visible::before { transform: scaleX(1); }
.rail-step:hover em { color: var(--y); }

.rail-nav {
  position: absolute; top: 50%; translate: 0 -60%; z-index: 4;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(8,9,10,.86); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px var(--hair-d-2); color: var(--white);
  border: 0; cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity .3s, background .3s, color .3s, transform .3s var(--e-out);
  --notch: 10px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
}
.rail-nav svg { width: 15px; height: 9px; }
.rail-nav--prev { left: -8px; }
.rail-nav--next { right: -8px; }
.rail-marquee:hover .rail-nav, .rail-nav:focus-visible { opacity: 1; pointer-events: auto; }
.rail-nav:hover { background: var(--y); color: #000; box-shadow: none; }
.rail-nav--prev:hover { transform: translateX(-3px); }
.rail-nav--next:hover { transform: translateX(3px); }

/* ============================================================
   STAT ROW
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 30px 30px 30px 0; border-right: 1px solid var(--hair-l); }
.stat:last-child { border-right: 0; }
.stat:not(:first-child) { padding-left: 30px; }
.stat-n { font-family: var(--fd); font-weight: 900; font-stretch: 84%; font-style: italic;
  font-size: clamp(44px, 5vw, 70px); line-height: .9; letter-spacing: -.035em; color: var(--ink); }
.stat-n sup { font-size: .44em; vertical-align: super; color: var(--y-deep); font-style: normal; }
/* One of the four tiles carries a phrase rather than a figure, so it needs its own
   size: at the numeral scale "Europe to Asia" would not fit the column. */
.stat-n--t { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.05; letter-spacing: -.02em; }
.stat-k { font-family: var(--fm); font-size: 10.5px; letter-spacing: .19em; text-transform: uppercase; color: var(--grey-2); margin-top: 10px; }
.stat-d { font-size: 13.5px; color: #5c6268; margin-top: 6px; line-height: 1.5; max-width: 26ch; }

/* ============================================================
   GENERIC SPLIT + FEATURE CARDS
   ============================================================ */
.split { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.split--rev .split-a { order: 2; }
.split-head { max-width: 46ch; }

/* ---------- stacked wide figure ----------
   For an image that carries its own labelling and has to be read, not glanced at.
   The client's sustainability diagram is 3:2 with five callouts in it; in a split
   column its type would land under 9px. Headline and copy go above, full width
   below, which also breaks the run of left-image / right-text splits. */
/* ---------- side figure ----------
   The sustainability diagram used to run full width under its headline, which
   pushed the section over a screen and a half. The client asked for it beside the
   copy and inside one page, so the figure takes the wider column and is capped
   against the viewport; the copy column carries the callout list as text, which is
   what keeps the diagram's own labelling from having to be read at this size. */
.side-fig {
  display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr);
  gap: clamp(30px, 4vw, 60px); align-items: center;
}
.side-fig-head { display: grid; gap: 20px; align-content: center; }
.side-fig figure { margin: 0; }
.side-fig img { width: 100%; height: auto; max-height: min(60svh, 540px); object-fit: contain; }
@media (max-width: 900px) { .side-fig { grid-template-columns: 1fr; } }

.stack-fig { display: grid; gap: clamp(30px, 4vw, 52px); }
.stack-fig-head { display: grid; gap: 20px; max-width: 72ch; }
.stack-fig figure { margin: 0; max-width: 1080px; width: 100%; }
.stack-fig img { width: 100%; height: auto; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1px; background: var(--hair-d); border: 1px solid var(--hair-d); }
.card {
  background: var(--ink-1); padding: 36px 30px 34px; position: relative;
  transition: background .5s var(--e-out); overflow: hidden;
}
.card::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--y); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .6s var(--e-out);
}
.card:hover { background: var(--ink-2); }
.card:hover::after { transform: scaleX(1); }
/* The tag reads at a distance now. At 9.5px with .22em tracking the client could
   not make these out against the card. */
.card-tag { font-family: var(--fm); font-size: 10.5px; font-weight: 500; letter-spacing: .15em;
  line-height: 1.5; text-transform: uppercase; color: var(--y); margin-bottom: 22px; display: block; }
.card-icon { width: 34px; height: 34px; margin-bottom: 20px; stroke: var(--y); fill: none; stroke-width: 1.3; }
.card h3 { font-family: var(--fd); font-weight: 700; font-stretch: 90%; text-transform: uppercase; font-size: 19px; line-height: 1.12; margin-bottom: 12px; letter-spacing: -.005em; }
.card p { font-size: 14px; line-height: 1.62; color: rgba(255,255,255,.56); }

/* Six benefit boxes want three even columns. Left to auto-fit they land as five
   across and one orphan on a wide screen, which is what the client was looking at.
   The ghost numeral gives the boxes something to hold in place of an icon. */
.cards--3 { grid-template-columns: repeat(3, minmax(0,1fr)); counter-reset: box; }
.cards--3 .card { counter-increment: box; padding-right: 68px; }
.cards--3 .card::before {
  content: counter(box, decimal-leading-zero);
  position: absolute; top: 26px; right: 24px; pointer-events: none;
  font-family: var(--fm); font-weight: 600; font-size: 44px; line-height: 1;
  letter-spacing: -.03em; color: rgba(255,255,255,.055);
  transition: color .5s var(--e-out);
}
.cards--3 .card:hover::before { color: rgba(255,210,0,.17); }
@media (max-width: 900px) { .cards--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .cards--3 { grid-template-columns: 1fr; } }

.sect--bone .cards { background: var(--hair-l); border-color: var(--hair-l); }
.sect--bone .card { background: var(--bone); }
.sect--bone .card:hover { background: #fff; }
.sect--bone .card-tag { color: var(--slate); }
.sect--bone .card-icon { stroke: var(--ink); }
.sect--bone .card p { color: #5c6268; }

/* ---------- grouped capability rows ----------
   Replaces the nine-chip cluster the client rejected on the home page. Nine flat
   items want grouping, not nine hairlines: three clusters, one rule each, so the
   eye lands on the argument instead of counting tags. */
.spec-groups { display: grid; }
.spec-group { border-top: 1px solid var(--hair-d); padding-top: 17px; margin-top: 20px; }
.spec-group:first-child { margin-top: 0; }
/* the same three groups running across the foot of a section instead of down a
   column, which is what keeps the home technology section inside one screen */
.spec-groups--row { grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(24px,3vw,52px); margin-top: clamp(24px,2.6vw,38px); }
.spec-groups--row .spec-group { margin-top: 0; }
@media (max-width: 900px) { .spec-groups--row { grid-template-columns: 1fr; gap: 0; } .spec-groups--row .spec-group { margin-top: 20px; } }
.spec-group dt {
  font-family: var(--fm); font-size: 10px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--y); margin-bottom: 11px;
}
.spec-group dd { display: grid; gap: 7px; }
.spec-group li { position: relative; padding-left: 17px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.72); }
.spec-group li::before {
  content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 1.5px; background: var(--y-deep);
}
.sect--bone .spec-group { border-color: var(--hair-l); }
.sect--bone .spec-group dt { color: var(--slate); }
.sect--bone .spec-group li { color: #4d5359; }

/* chip list — technology highlights, brake specs, benefits */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--fm); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 14px; background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px var(--hair-d); color: rgba(255,255,255,.75);
  --notch: 8px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
  transition: background .35s, color .35s, box-shadow .35s;
}
.chip:hover { background: var(--y); color: #000; box-shadow: none; }
.sect--bone .chip { background: rgba(8,9,10,.04); box-shadow: inset 0 0 0 1px var(--hair-l); color: #3f454b; }

/* spec rows — reads like the data panel on the back of the pack */
.spec-list { border-top: 1px solid var(--hair-d); }
.spec-row { display: grid; grid-template-columns: 190px 1fr; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--hair-d); align-items: baseline; }
.spec-row dt { font-family: var(--fm); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--grey-2); }
.spec-row dd { font-size: 14.5px; color: rgba(255,255,255,.86); line-height: 1.55; }
.sect--bone .spec-list, .sect--bone .spec-row { border-color: var(--hair-l); }
.sect--bone .spec-row dd { color: #23282d; }

/* supplied photography, filling slots the placeholders used to hold */
.shot-img { width: 100%; height: auto; object-fit: cover; background: var(--ink-2); }
.shot-img--4x3 { aspect-ratio: 4/3; }
.shot-img--3x2 { aspect-ratio: 3/2; }
.shot-img--16x9 { aspect-ratio: 16/9; }
/* a photograph that must not be the thing that decides how tall a section is */
.shot-img--cap { aspect-ratio: 16/9; max-height: min(40svh, 360px); object-fit: cover; }

/* a section asked to land inside one screen: the padding gives way first, and the
   photograph is capped above, so the copy never has to be cut to make it fit. The
   split is rebalanced towards the copy, because a capped photograph no longer needs
   the wider column and the headline was ragging to four lines inside the narrow one. */
.fit-screen { padding-block: clamp(34px, 3.4vw, 58px); }
.fit-screen .split { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); align-items: start; }

/* ============================================================
   PRODUCT RANGE / CATALOGUE CARDS
   ============================================================ */
.range { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 18px; }
.rcard {
  --notch: 24px;
  position: relative; display: flex; flex-direction: column; padding: 26px 24px 24px;
  background: linear-gradient(170deg, var(--ink-2), var(--ink-1) 62%);
  box-shadow: inset 0 0 0 1px var(--hair-d);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
  transition: transform .55s var(--e-out), background .55s;
  overflow: hidden; min-height: 350px;
}
.rcard::before {
  content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--y);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--e-out);
}
.rcard:hover { transform: translateY(-6px); background: linear-gradient(170deg, #1a1e22, var(--ink-2) 62%); }
.rcard:hover::before { transform: scaleX(1); }
/* flex + max-height, not grid + height:100% — a centred grid item auto-sizes its
   track, which leaves a percentage height indefinite and the pack overflows */
/* Article thumbnails. The client has no editorial photography yet, so these are the
   approved packs on the house ink; they drop straight out when pictures arrive. */
/* height:auto or the width/height attributes on the tag win over the aspect ratio
   and the thumbnail lands 900px tall in a 380px column. */
.news-shot { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block;
  margin-bottom: 20px; border: 1px solid var(--hair-d); }

.rcard-shot { height: 176px; display: flex; align-items: center; justify-content: center; margin: 6px 0 20px; }
.rcard-shot img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 16px 26px rgba(0,0,0,.6));
  transition: transform .6s var(--e-out); }
.rcard:hover .rcard-shot img { transform: translateY(-7px) scale(1.04); }
.rcard-k { font-family: var(--fm); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--y); }
.rcard h3 { font-family: var(--fd); font-weight: 800; font-stretch: 88%; text-transform: uppercase; font-size: 20px; line-height: 1.06; margin: 10px 0 9px; }
.rcard p { font-size: 13px; line-height: 1.58; color: rgba(255,255,255,.55); margin-bottom: 18px; }
.rcard-go { margin-top: auto; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--fm); font-size: 10px; letter-spacing: .19em; text-transform: uppercase; color: var(--white); }
.rcard-go svg { width: 15px; height: 8px; transition: transform .45s var(--e-out); }
.rcard:hover .rcard-go svg { transform: translateX(5px); }

/* ---------- catalogue grid ---------- */
/* The filter bar follows the catalogue down and parks under the nav, so a category is
   always one click away however far into the grid you are. It stops at --stick, the
   height #top-nav settles at once it takes .stuck, which it always has by the time the
   bar reaches it. The bar is the same width as the grid beneath it, so its own ground
   covers the cards passing under without needing to bleed past the wrap. */
.cat-bar {
  position: sticky; top: var(--stick); z-index: 40;
  display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-end; justify-content: space-between;
  padding-block: 16px 18px; border-bottom: 1px solid var(--hair-d);
  background: rgba(8,9,10,.92);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
.filters { display: flex; flex-wrap: wrap; gap: 7px; }
.filter {
  --notch: 8px; background: transparent; border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--hair-d);
  padding: 9px 14px; font-family: var(--fm); font-size: 10.5px; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255,255,255,.62);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
  transition: background .3s, color .3s, box-shadow .3s;
}
.filter:hover { color: var(--white); box-shadow: inset 0 0 0 1px var(--hair-d-2); }
.filter[aria-pressed="true"] { background: var(--y); color: #000; box-shadow: none; }

.search { position: relative; }
.search input {
  width: 250px; max-width: 100%; background: rgba(255,255,255,.04); border: 0;
  box-shadow: inset 0 0 0 1px var(--hair-d); padding: 11px 14px 11px 36px;
  font-family: var(--fm); font-size: 11.5px; letter-spacing: .08em; color: var(--white);
  --notch: 9px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
}
.search input::placeholder { color: var(--grey-2); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; }
.search svg { position: absolute; left: 13px; top: 50%; translate: 0 -50%; width: 14px; height: 14px; stroke: var(--grey-2); fill: none; stroke-width: 1.6; }

.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; margin-top: 30px; }
.pcard {
  --notch: 22px; position: relative; display: flex; flex-direction: column;
  background: var(--ink-1); box-shadow: inset 0 0 0 1px var(--hair-d);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
  padding: 22px 22px 20px; overflow: hidden;
  transition: transform .5s var(--e-out), background .5s;
  animation: pop .55s var(--e-out) both;
}
@keyframes pop { from { opacity: 0; transform: translateY(14px); } }
.pcard::before { content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--y); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--e-out); }
.pcard:hover { transform: translateY(-5px); background: var(--ink-2); }
.pcard:hover::before { transform: scaleX(1); }
.pcard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pcard-cat { font-family: var(--fm); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--grey-2); }
.pcard-euro { font-family: var(--fm); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #000; background: var(--y); padding: 3px 7px; white-space: nowrap; }
/* Taller than before so the approved label artwork is actually readable in the grid */
.pcard-shot { height: 184px; display: flex; align-items: center; justify-content: center; margin: 14px 0 16px; }
.pcard-shot img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0,0,0,.55)); transition: transform .55s var(--e-out); }
.pcard:hover .pcard-shot img { transform: scale(1.05) translateY(-4px); }
/* The client's naming order: the family reads first and small, the product's own
   name carries the card underneath it. SHIFT FORCE, then ATF LV. */
.pcard-fam { font-family: var(--fd); font-weight: 700; font-stretch: 92%; text-transform: uppercase;
  font-size: 12.5px; line-height: 1.2; letter-spacing: .04em; color: rgba(255,255,255,.62); }
.pcard-name { font-family: var(--fd); font-weight: 900; font-style: italic; font-stretch: 82%;
  font-size: 26px; line-height: .98; letter-spacing: -.012em; word-spacing: .14em;
  text-transform: uppercase; color: var(--y); margin: 5px 0 14px; }
/* A name that runs to several words is a sentence, not a badge, so it drops the
   italic and sets smaller: COOL XTRA reads, RED COOLANT -15C reads. */
.pcard-name.long { font-size: 18px; font-style: normal; font-weight: 800; line-height: 1.12; letter-spacing: -.01em; }

/* Base type and performance level, labelled. They used to run together as one
   unlabelled mono block, which the client could not read as two separate facts. */
.pcard-meta { margin-top: auto; border-top: 1px solid var(--hair-d); padding-top: 12px; display: grid; gap: 9px; }
.pcard-meta dt { font-family: var(--fm); font-size: 9px; letter-spacing: .17em; text-transform: uppercase; color: var(--grey-2); }
.pcard-meta dd { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.82); margin-top: 3px; }

/* CSS pack plate. Thirty-six of the thirty-seven products now carry the client's own
   pack render; this stands in for the one that has none yet, 4X4 DIESEL POWER 15W-40. */
.plate-pack {
  position: relative; width: 96px; height: 150px; background: linear-gradient(155deg, #1d2126, #0b0d0f 70%);
  box-shadow: inset 0 0 0 1px var(--hair-d-2); border-radius: 5px 5px 3px 3px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 8px;
}
.plate-pack::before { content: ''; position: absolute; top: 0; left: 50%; translate: -50% 0; width: 34%; height: 13px; background: var(--y); border-radius: 2px 2px 0 0; }
.plate-pack-mark { text-align: center; font-family: var(--fd); font-weight: 900; font-size: 22px; line-height: .9; letter-spacing: -.04em; margin-bottom: 8px; }
.plate-pack-mark .px { color: var(--white); display: block; }
.plate-pack-mark .n98 { color: var(--y); font-style: italic; display: block; }
.plate-pack-band { background: var(--y); color: #000; font-family: var(--fm); font-size: 6.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; padding: 3px 6px; text-align: center;
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%); }

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pd { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); gap: clamp(36px,5vw,72px); align-items: start; }
.pd-shot { position: sticky; top: 108px; }
.pd-stage {
  position: relative; display: flex; align-items: center; justify-content: center; padding: 44px 24px;
  background: radial-gradient(75% 62% at 50% 42%, rgba(255,210,0,.13), transparent 68%), var(--ink-1);
  box-shadow: inset 0 0 0 1px var(--hair-d); overflow: hidden;
  --notch: 30px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
}
.pd-stage img { height: clamp(280px, 42vh, 430px); width: auto; filter: drop-shadow(0 32px 44px rgba(0,0,0,.7)); }
.pd-stage .plate-pack { width: 190px; height: 300px; }

/* ---------- two pack stages side by side ----------
   Built for the diesel comparison the client asked for: 4X4 TURBO POWER in 5W-30
   and 10W-40, both carrying their own approved label. */
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.two-up .pd-stage { padding: 30px 16px; --notch: 22px; }
.two-up .pd-stage img { height: clamp(190px, 26vh, 290px); }
.two-up figure { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.two-up figcaption { font-family: var(--fm); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--grey); }
.two-up figcaption b { display: block; font-family: var(--fd); font-size: 21px; font-weight: 900;
  font-style: italic; font-stretch: 82%; letter-spacing: -.03em; color: var(--y); margin-bottom: 4px; }
.pd-grade { font-family: var(--fd); font-weight: 900; font-style: italic; font-stretch: 80%;
  font-size: clamp(44px, 6vw, 82px); line-height: .9; letter-spacing: -.04em; color: var(--y); margin: 4px 0 6px; }
.pd h1 { font-family: var(--fd); font-weight: 800; font-stretch: 88%; text-transform: uppercase;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.06; margin-bottom: 18px; }
.pd-desc { color: rgba(255,255,255,.7); font-size: 15.5px; line-height: 1.75; margin-bottom: 32px; max-width: 62ch; }
.pd-back { display: flex; width: fit-content; align-items: center; gap: 9px; font-family: var(--fm); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--grey); margin-bottom: 22px; transition: color .3s; }
.pd-back:hover { color: var(--y); }
.pd-back svg { width: 15px; height: 8px; rotate: 180deg; }

/* ============================================================
   FORMS
   ============================================================ */
.form { display: grid; gap: 16px; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { display: block; font-family: var(--fm); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--grey-2); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; background: rgba(255,255,255,.03); border: 0;
  box-shadow: inset 0 0 0 1px var(--hair-d); padding: 13px 15px; font-size: 14.5px; color: var(--white);
  transition: box-shadow .3s, background .3s;
  --notch: 10px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; background: rgba(255,255,255,.055); box-shadow: inset 0 0 0 1px var(--y);
}
.field input::placeholder, .field textarea::placeholder { color: #4b5157; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b9299' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 11px; padding-right: 40px; }
.field select option { background: var(--ink-2); }
.form-note { font-family: var(--fm); font-size: 10px; letter-spacing: .12em; color: var(--grey-2); text-transform: uppercase; }

/* fields sitting on a bone section need the palette inverted */
.sect--bone .field label { color: var(--slate); }
/* background-color, not the shorthand — the shorthand would reset the select
   arrow's repeat/position/size and tile it across the field */
.sect--bone .field input,
.sect--bone .field select,
.sect--bone .field textarea {
  background-color: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px var(--hair-l-2); color: var(--ink);
}
.sect--bone .field input:focus,
.sect--bone .field select:focus,
.sect--bone .field textarea:focus { background-color: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.sect--bone .field input::placeholder,
.sect--bone .field textarea::placeholder { color: #979da3; }
.sect--bone .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233a4046' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
}
.sect--bone .field select option { background: #fff; color: var(--ink); }

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.cta-band { background: var(--y); color: #000; position: relative; overflow: hidden; }
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, rgba(0,0,0,.045) 0 2px, transparent 2px 14px);
}
.cta-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.cta-in h2 { font-family: var(--fd); font-weight: 900; font-stretch: 86%; text-transform: uppercase;
  font-size: clamp(30px, 4.4vw, 62px); line-height: .92; letter-spacing: -.025em; max-width: 16ch; }
.cta-in p { font-size: 15px; max-width: 44ch; color: rgba(0,0,0,.72); margin-top: 14px; }

footer { background: var(--ink-1); border-top: 1px solid var(--hair-d); padding-top: 72px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; }
.foot-about p { font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,.5); max-width: 34ch; margin-top: 22px; }
/* The footer endorses the parent company, so it carries the Prince mark on its
   own. The PX98 lockup that used to sit beside it has been removed. */
.foot-mark { display: inline-block; }
.foot-mark img { height: 44px; width: auto; }
.foot-col h4 { font-family: var(--fm); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--y); margin-bottom: 20px; }
.foot-col li { margin-bottom: 11px; }
.foot-col a { font-size: 13.5px; color: rgba(255,255,255,.6); transition: color .28s, padding-left .35s var(--e-out); display: inline-block; }
.foot-col a:hover { color: var(--y); padding-left: 5px; }
.foot-base { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 22px 0 18px; border-top: 1px solid var(--hair-d); }
.foot-base p, .foot-base a { font-family: var(--fm); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--grey-2); }
.foot-social { display: flex; gap: 8px; }
.foot-social a { width: 34px; height: 34px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--hair-d);
  font-size: 9.5px; transition: background .3s, color .3s; }
.foot-social a:hover { background: var(--y); color: #000; }

/* The studio credit. The copyright row above it is deliberately quiet - 10px, and
   the dimmest grey in the set - and the client asked for this line to be clearly
   visible, so it does not inherit that treatment. Its own rule above it, a step up
   in size, the brighter grey, and the studio name carrying the brand yellow so the
   eye lands on the name rather than on "designed and developed by". */
.foot-credit { border-top: 1px solid var(--hair-d); padding: 16px 0 26px; text-align: center; }
.foot-credit p {
  font-family: var(--fm); font-size: 11.5px; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase; color: var(--grey);
}
.foot-credit a {
  color: var(--y); font-weight: 600;
  border-bottom: 1px solid rgba(255, 210, 0, .38); padding-bottom: 2px;
  transition: border-color .3s, color .3s;
}
.foot-credit a:hover, .foot-credit a:focus-visible { border-bottom-color: var(--y); color: #ffe14d; }

#totop {
  position: fixed; right: 22px; bottom: 86px; z-index: 800; width: 44px; height: 44px;
  background: var(--y); color: #000; border: 0; cursor: pointer; display: grid; place-items: center;
  opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity .4s, transform .4s var(--e-out);
  --notch: 11px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
}
#totop.on { opacity: 1; pointer-events: auto; transform: none; }
#totop svg { width: 15px; height: 9px; rotate: -90deg; }

/* ============================================================
   ASSISTANT — two-way product finder, runs against the catalogue
   ============================================================ */
#chat-launch {
  position: fixed; right: 22px; bottom: 22px; z-index: 880;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--y); color: #000; border: 0; cursor: pointer;
  padding: 14px 20px; font-family: var(--fm); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
  transition: transform .4s var(--e-out), opacity .3s;
  --notch: 12px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
}
#chat-launch:hover { transform: translateY(-3px); }
#chat-launch.hide { opacity: 0; pointer-events: none; transform: translateY(10px); }
#chat-launch .dot { width: 7px; height: 7px; border-radius: 50%; background: #000; animation: pulse-b 2.2s var(--e-out) infinite; }
@keyframes pulse-b { 0%,100% { box-shadow: 0 0 0 0 rgba(0,0,0,.4); } 60% { box-shadow: 0 0 0 8px rgba(0,0,0,0); } }

#chat-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 881;
  width: 392px; height: min(640px, calc(100vh - 120px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ink-1); box-shadow: inset 0 0 0 1px var(--hair-d-2), 0 30px 70px rgba(0,0,0,.66);
  opacity: 0; pointer-events: none; transform: translateY(18px) scale(.97);
  transform-origin: 100% 100%;
  transition: opacity .35s var(--e-out), transform .45s var(--e-out);
  --notch: 18px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
}
#chat-panel.on { opacity: 1; pointer-events: auto; transform: none; }

.chat-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-bottom: 1px solid var(--hair-d); background: var(--ink-2); flex: none;
}
.chat-head-mark { font-family: var(--fd); font-weight: 900; font-size: 19px; letter-spacing: -.03em; line-height: 1; }
.chat-head-mark .px { color: var(--white); }
.chat-head-mark .n98 { color: var(--y); font-style: italic; }
.chat-head-t { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.chat-head-t b { font-family: var(--fm); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--white); }
.chat-head-t span { font-family: var(--fm); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--y); display: flex; align-items: center; gap: 6px; }
.chat-head-t span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--y); }
.chat-x { background: none; border: 0; cursor: pointer; color: var(--grey); font-size: 20px; line-height: 1; padding: 6px; transition: color .25s; }
.chat-x:hover { color: var(--y); }

.chat-log { flex: 1 1 auto; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; }
.chat-log::-webkit-scrollbar { width: 6px; }
.chat-log::-webkit-scrollbar-thumb { background: #2c3136; }

.msg { max-width: 88%; font-size: 13.5px; line-height: 1.62; animation: msgIn .4s var(--e-out) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }
.msg--bot { align-self: flex-start; background: var(--ink-3); color: rgba(255,255,255,.86); padding: 12px 15px;
  --notch: 10px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%); }
.msg--me { align-self: flex-end; background: var(--y); color: #000; padding: 12px 15px; font-weight: 400;
  --notch: 10px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%); }
.msg b { color: var(--y); font-weight: 600; }
.msg--me b { color: #000; }
.msg a { color: var(--y); text-decoration: underline; text-underline-offset: 2px; }

.chat-typing { align-self: flex-start; display: flex; gap: 5px; padding: 14px 15px; background: var(--ink-3); }
.chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--grey); animation: blink 1.3s infinite; }
.chat-typing i:nth-child(2) { animation-delay: .18s; }
.chat-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%,60%,100% { opacity: .28; } 30% { opacity: 1; } }

.chat-hits { display: flex; flex-direction: column; gap: 7px; align-self: stretch; }
.chat-hit {
  display: flex; align-items: center; gap: 12px; padding: 9px 11px;
  background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hair-d);
  transition: background .3s, box-shadow .3s; animation: msgIn .4s var(--e-out) both;
}
.chat-hit:hover { background: var(--ink-3); box-shadow: inset 0 0 0 1px rgba(255,210,0,.4); }
.chat-hit-img { width: 30px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; }
.chat-hit-img img { max-height: 100%; max-width: 100%; width: auto; }
.chat-hit-fallback { width: 20px; height: 34px; background: linear-gradient(160deg,#232830,#0d0f11); box-shadow: inset 0 0 0 1px var(--hair-d); border-radius: 3px; }
.chat-hit-txt { min-width: 0; flex: 1 1 auto; }
.chat-hit-g { display: block; font-family: var(--fd); font-weight: 900; font-style: italic; font-stretch: 84%; font-size: 15px; color: var(--y); line-height: 1; letter-spacing: -.02em; }
.chat-hit-n { display: block; font-size: 12px; color: rgba(255,255,255,.86); line-height: 1.35; margin-top: 3px; }
.chat-hit-s { display: block; font-family: var(--fm); font-size: 9px; letter-spacing: .1em; color: var(--grey-2); margin-top: 4px; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chat-chips { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; }
.chat-chip {
  background: transparent; border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,210,0,.4); color: var(--y);
  font-family: var(--fm); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 12px; transition: background .28s, color .28s;
  --notch: 7px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
}
.chat-chip:hover { background: var(--y); color: #000; }

.chat-form { flex: none; display: flex; gap: 8px; padding: 14px; border-top: 1px solid var(--hair-d); background: var(--ink-2); }
.chat-form input {
  flex: 1 1 auto; min-width: 0; background: rgba(255,255,255,.04); border: 0;
  box-shadow: inset 0 0 0 1px var(--hair-d); padding: 12px 14px; font-size: 13.5px; color: var(--white);
  --notch: 9px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
}
.chat-form input:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--y); }
.chat-form input::placeholder { color: #4b5157; }
.chat-send {
  flex: none; width: 46px; background: var(--y); color: #000; border: 0; cursor: pointer;
  display: grid; place-items: center; transition: transform .3s var(--e-out);
  --notch: 9px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
}
.chat-send:hover { transform: translateY(-2px); }
.chat-send svg { width: 16px; height: 9px; }
.chat-foot { flex: none; padding: 0 14px 12px; font-family: var(--fm); font-size: 8.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grey-2); background: var(--ink-2); }

@media (max-width: 560px) {
  #chat-panel { right: 12px; left: 12px; width: auto; bottom: 12px; height: min(560px, calc(100vh - 90px)); }
  #chat-launch { right: 12px; bottom: 12px; }
}

/* page transition wipe */
#wipe {
  position: fixed; inset: 0; z-index: 9999; background: var(--y); pointer-events: none;
  transform: translateY(-101%); transition: transform .45s var(--e-both);
}
#wipe.out { transform: translateY(0); }
#wipe.done { transform: translateY(101%); transition-duration: .55s; }

/* ============================================================
   PAGE HEADERS (inner pages)
   ============================================================ */
/* page headers carry a photographic ground via .sect--photo (see tokens above) */
.phead { position: relative; padding: 188px 0 clamp(52px,5.5vw,84px); overflow: hidden; border-bottom: 1px solid var(--hair-d); }
/* a photographic header earns the extra height: the car needs room to read beside
   the headline instead of being cropped to a band */
.phead.sect--photo { min-height: 64svh; display: flex; align-items: flex-end; }
.phead-in { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; width: 100%; }

/* Type over a car: the fade alone cannot hold every crop, because the bright part
   of the subject moves with the photograph. A soft ink halo travels with the type
   instead, so the headline and standfirst stay readable over sky, chrome, a
   headlight or yellow bodywork without dropping a panel over the picture. */
.phead.sect--photo .d1 { text-shadow: 0 6px 44px rgba(8,9,10,.62), 0 2px 10px rgba(8,9,10,.5); }
.phead.sect--photo .lede {
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 16px rgba(8,9,10,.96), 0 1px 4px rgba(8,9,10,.9);
}
/* The standfirst on the products header sits in the open right of the frame over a
   sunset, where it was disappearing into the sky. Yellow, on the client's note. */
.lede--pop {
  color: var(--y); font-weight: 500;
  padding-left: 18px; border-left: 2px solid var(--y);
}
.phead.sect--photo .lede--pop { color: var(--y); }
.crumb { display: flex; gap: 9px; align-items: center; font-family: var(--fm); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--grey-2); margin-bottom: 18px; }
.crumb a:hover { color: var(--y); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--hair-l); padding-inline: 0 !important; padding-block: 24px; }
  .stat:nth-child(odd) { padding-right: 24px !important; border-right: 1px solid var(--hair-l); }
  .pd { grid-template-columns: 1fr; }
  .pd-shot { position: static; }
}
@media (max-width: 900px) {
  :root { --pad-x: 24px; }
  .nav-links, .nav-cta { display: none; }
  .burger { display: block; margin-left: auto; }
  .hero-cols { grid-template-columns: 1fr; gap: 8px; }
  /* a portrait viewport only ever sees a quarter of a 16:9 frame. On centre that
     quarter is the windscreen; at 25% it is the striped bonnet and the badge, which
     is the part that still reads as the car behind the packs */
  #hero { padding-top: 124px; align-items: center; --hero-pos: 25% 50%; }
  .split, .split--rev .split-a { grid-template-columns: 1fr; order: 0; }
  .spec-row { grid-template-columns: 1fr; gap: 4px; }
  .form-2 { grid-template-columns: 1fr; }
  .cta-in { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
  .foot-grid { grid-template-columns: 1fr; }
  /* Two fixed controls own the bottom-right of a narrow viewport: #chat-launch
     (bottom 12px, 46 tall) and #totop above it (bottom 86px, 44 tall), so the
     lowest 130px is spoken for and both were landing on the credit. The tail
     below clears the pair of them, and the line loses a little tracking so it
     stops wrapping at 390px. The space is not dead - it is what the two buttons
     float over. */
  .foot-credit { padding: 16px 0 148px; }
  .foot-credit p { font-size: 11px; letter-spacing: .1em; }
  .stats { grid-template-columns: 1fr; }
  .stat, .stat:nth-child(odd) { border-right: 0 !important; padding-right: 0 !important; }
  .pgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pcard { padding: 16px 14px 15px; }
  .pcard-shot { height: 110px; }
  .pcard-grade { font-size: 23px; }
}

/* ============================================================
   FAQ
   Question-and-answer copy, set as running text rather than an accordion.
   An answer engine quotes what it can read, and a collapsed panel is one more
   thing between the question and the answer for no gain on a page this short.
   ============================================================ */
.faq-group { margin: 56px 0 20px; }
.faq-group:first-of-type { margin-top: 0; }
.faq-group h2 { color: var(--white); }

.faq { border-top: 1px solid var(--hair-d); }
.faq-item { padding: 26px 0; border-bottom: 1px solid var(--hair-d); }
.faq-item h3 {
  font-family: var(--fd); font-weight: 700; font-stretch: 92%;
  font-size: clamp(17px, 1.35vw, 21px); line-height: 1.2;
  letter-spacing: -.008em; color: var(--white);
  margin-bottom: 12px; max-width: 46ch;
}
.faq-item p { color: rgba(255,255,255,.66); max-width: 74ch; font-size: 15.5px; }
.faq-item a { color: var(--y); text-decoration: none; border-bottom: 1px solid rgba(255,210,0,.34); }
.faq-item a:hover { border-bottom-color: var(--y); }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-rv] { opacity: 1 !important; transform: none !important; }
  .mask > span { transform: none !important; }
  #wipe { display: none; }
  /* the blanket animation-duration override above would collapse a scroll-timeline
     animation to its end state, so the progress bar is withdrawn instead */
  #scan { display: none; }
}