/* =========================================================
   Font faces
   Porsche Next is self-hosted from /fonts so the page renders the same on
   every device. local() stays first in each src list: visitors who already
   have the family installed use it and skip the download entirely.

   Only 400 and 700 upright ship. The family also has Thin, Italic and
   BoldItalic, but nothing on the site renders them: no rule sets weight 100,
   no rule sets font-style:italic, and the two <i> elements in the markup are
   a decorative bar (.cap__bar i, no text) and a ticker unit that is explicitly
   font-style:normal. Shipping them cost 471 KB for glyphs no one ever sees.
   Should italic text ever appear, the engine synthesises an oblique from 400.

   Asking for weight 600 (which does not exist) let each engine decide for
   itself. Chrome synthesised an intermediate, Safari jumped to real Bold, so
   the page rendered differently in each. Mapping the real faces explicitly,
   and only ever asking for 400/700, makes both engines resolve identically.
   Single weight values (not ranges) keep older Safari happy too.
   ========================================================= */
@font-face{
  font-family:"SSM Sans";
  src:local("PorscheNext-Regular"),local("Porsche Next"),
      url("../fonts/PorscheNext-Regular.otf") format("opentype");
  font-weight:400;font-style:normal;font-display:swap
}
@font-face{
  font-family:"SSM Sans";
  src:local("PorscheNext-Bold"),local("Porsche Next Bold"),
      url("../fonts/PorscheNext-Bold.otf") format("opentype");
  font-weight:700;font-style:normal;font-display:swap
}
/* =========================================================
   Superstars Motorsport
   1. tokens / reset      6. series showcase
   2. utilities           7. gallery rail
   3. header + panel      8. partners + contact
   4. hero                9. footer + modal
   5. about + milestones  10. reduced motion  11. responsive
   ========================================================= */

/* ---------- 1. tokens / reset ---------- */
:root{
  --ink:#0a0a0b;
  --ink-2:#121315;
  --paper:#fff;
  --paper-2:#f4f4f5;
  --line:rgba(255,255,255,.14);
  --line-dark:rgba(10,10,11,.12);
  --accent:218 2 2;              /* sampled from the Superstars logo */
  --glass:rgba(10,10,11,.66);

  --f:"SSM Sans","Porsche Next","Arial Narrow",Arial,Helvetica,sans-serif;
  --fs-nav:1rem;
  --fs-h1:clamp(1.6rem,1rem + 2.3vw,3.25rem);
  --fs-h2:clamp(1.5rem,1rem + 2vw,3rem);
  --fs-statement:clamp(2rem,1rem + 5.4vw,6rem);
  --fs-odo:clamp(4rem,2rem + 11vw,13rem);

  --ease:cubic-bezier(.22,.61,.24,1);
  --t1:.25s; --t2:.5s; --t3:.9s;

  --pad:clamp(16px,3vw,40px);
  /* tallest thing in the bar is 44px (nav links, team pill), so 72 leaves an
     even 14px above and below */
  --nav-h:72px;
  --wrap:1600px;
  --r:6px;                     /* buttons and small controls */
  --r-img:calc(var(--r) * 2);  /* photo surfaces */

  /* Soft edges. --line from style.css is rgba(255,255,255,.14), which is
     right for a single rule across a page but too hard once dozens of them
     are drawn as rectangles next to each other — the page turns into a
     wireframe. These are about half that, so a card reads as a surface with
     an edge rather than as a drawn box, and the fill does most of the
     separating. */
  --edge:rgba(255,255,255,.07);
  --edge-hover:rgba(255,255,255,.15);
  --surf:#101216;
  --surf-hover:#14171c;
  --r-card:10px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:#fff;
  font-family:var(--f);font-size:1rem;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden
}
body.is-locked{overflow:hidden}
h1,h2,h3,p,dl,dd,dt,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid rgb(var(--accent));outline-offset:3px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
main > section{scroll-margin-top:calc(var(--nav-h) + 8px)}

/* ---------- image lock ----------
   Pairs with js/protect-images.js. Deterrence only: the files are still
   reachable through the network panel or a direct URL. These rules just close
   the drag-to-desktop path and the iOS long-press sheet, and stop an image
   being swept into a text selection and copied with it. */
img{
  -webkit-user-drag:none;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none
}

/* ---------- 2. utilities ---------- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;top:8px;left:8px;z-index:300;padding:10px 16px;background:#fff;color:var(--ink);transform:translateY(-200%);transition:transform var(--t1)}
.skip:focus{transform:none}
.ico{width:1.15em;height:1.15em;fill:currentColor;flex:none}
.ico--flip{transform:rotate(180deg)}

.eyebrow{
  font-size:.6875rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(10,10,11,.5);margin-bottom:14px
}
.eyebrow--light{color:rgba(255,255,255,.6)}

.pill{
  background:var(--glass);
  -webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);
  border-radius:8px;display:flex;align-items:center
}

.arrowlink{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:700;
  padding-bottom:2px;
  background-image:linear-gradient(rgb(var(--accent)),rgb(var(--accent)));
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--t2) var(--ease),color var(--t1)
}
.arrowlink .ico{transition:transform var(--t2) var(--ease)}
.arrowlink:hover{color:rgb(var(--accent));background-size:100% 1px}
.arrowlink:hover .ico{transform:translateX(5px)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 30px;border-radius:var(--r);
  background:rgb(var(--accent));color:#fff;
  font-weight:700;letter-spacing:.02em;
  transition:filter var(--t1),transform var(--t1)
}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(1px)}

/* Quieter siblings of .btn: a ghost, a small solid, and a danger variant.
   These started in css/parts.css and moved here once join.html needed them
   too — a public conversion page should not load the whole team-area
   stylesheet to get a ghost button. */
.btnq{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:0 18px;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.16);background:transparent;
  font-size:.875rem;color:rgba(255,255,255,.82);
  transition:color var(--t1),border-color var(--t1),background-color var(--t1)
}
.btnq:hover:not(:disabled){color:#fff;border-color:rgba(255,255,255,.36);background:rgba(255,255,255,.05)}
.btnq:disabled,.btn:disabled{opacity:.4;cursor:not-allowed}
.btn--sm{min-height:42px;padding:0 20px;font-size:.875rem}
.btn--danger{background:#8d1414}
.btn--block{width:100%}

/* a one-line advisory, used for the localStorage fallback and the fitment note */
.notice{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:13px 16px;border-radius:var(--r-card);
  background:rgba(255,255,255,.035);border:1px solid var(--edge);
  font-size:.8125rem;color:rgba(255,255,255,.62)
}
.notice--warn{background:rgba(243,190,0,.07);border-color:rgba(243,190,0,.22);color:#F3BE00}
.notice__act{margin-left:auto}
.linkish{
  color:#fff;border-bottom:1px solid rgba(255,255,255,.35);
  transition:color var(--t1),border-color var(--t1)
}
.linkish:hover{color:rgb(var(--accent));border-color:rgb(var(--accent))}

/* scroll-revealed blocks */
[data-in]{
  opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:var(--d,0ms)
}
[data-in].is-in{opacity:1;transform:none}

/* ---------- 3. header + panel ---------- */
/* Height is --nav-h, full stop.

   It used to be padding-driven — calc(var(--pad) * .55) top and bottom on a
   44px row — which rendered 86px at desktop while --nav-h still claimed 64px.
   Everything that positions against the navbar reads that token: the top
   padding of .ppage / .rpage / .tpage, the sticky tab rails, the racing
   ticker. So all of them sat 22px too high and the navbar covered them.
   js/racing.js worked around it by measuring the element and rewriting the
   token at runtime, but only on racing.html, which is why the collision
   showed up on the team area and not there.

   Setting the height here makes the token true on every page, with no JS and
   no per-page workaround. align-items:center keeps the row centred, so the
   space above and below the content is equal by construction. */
.nav{
  position:fixed;inset:0 0 auto;z-index:200;height:var(--nav-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:0 var(--pad);
  isolation:isolate;
  transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)
}
/* blurred bar behind the navbar, faded out at the bottom so there is no hard edge */
.nav__bg{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,11,.84) 0%,rgba(8,9,11,.46) 62%,rgba(8,9,11,0) 100%);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%)
}
.nav.is-tucked{opacity:0;transform:translateY(-12px);pointer-events:none}

.brand{
  grid-column:1;justify-self:start;
  display:flex;align-items:center;gap:12px;color:#fff;
  transition:color var(--t2) var(--ease)
}
.brand__mark{width:auto;height:34px;flex:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.brand__text{display:grid;gap:3px}
.brand__word{font-size:.875rem;font-weight:700;letter-spacing:.22em;line-height:1}
.brand__sub{font-size:.5625rem;letter-spacing:.3em;color:rgba(255,255,255,.7);line-height:1;transition:color var(--t2)}

.pill--nav{grid-column:2;justify-self:center;min-width:0}
/* every ancestor of the scroller must be allowed to shrink, otherwise the
   pill's max-width is ignored and the list overflows the screen */
.pill--nav > nav{min-width:0;max-width:100%;display:flex}
.quick{display:flex;gap:clamp(14px,1.8vw,26px);padding:0 22px}
.quick__link{
  position:relative;display:inline-flex;align-items:center;height:44px;
  font-size:var(--fs-nav);color:#fff;white-space:nowrap
}
.quick__link::after{
  content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform var(--t2) var(--ease)
}
.quick__link:hover::after,.quick__link[aria-expanded="true"]::after{transform:scaleX(1)}

.nav__right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:8px;min-width:0}
/* Nothing in this cluster may shrink. */
.nav__right > *{flex:none}
.burger{
  display:none;position:relative;width:42px;height:42px;flex:none;
  border-radius:var(--r);background:var(--glass);
  -webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px)
}
.burger span{
  position:absolute;left:11px;width:20px;height:1.5px;background:#fff;
  transition:transform var(--t2) var(--ease),opacity var(--t1)
}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:20.5px}
.burger span:nth-child(3){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.scrim{
  position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.6);
  opacity:0;transition:opacity var(--t2)
}
.scrim.is-on{opacity:1}
.drawer{
  position:fixed;inset:0 0 0 auto;z-index:220;
  width:min(360px,86vw);background:#0e1013;border-left:1px solid var(--line);
  display:flex;flex-direction:column;overflow-y:auto;
  transform:translateX(100%);transition:transform var(--t3) var(--ease)
}
.drawer.is-on{transform:none}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--line)
}
.drawer__label{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.drawer__close{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r)}
.drawer__close:hover{background:rgba(255,255,255,.1)}
.drawer__nav{flex:1;padding:8px 0}
.drawer__nav a{
  display:block;padding:16px 22px;font-size:1.125rem;
  border-bottom:1px solid var(--line);
  transition:color var(--t1),padding-left var(--t1) var(--ease)
}
.drawer__nav a:hover{color:rgb(var(--accent));padding-left:28px}
/* The team area is not a fourth section, so it is set below a rule rather
   than in the run of three. Same treatment as the nav pill: participants
   only, reached from a different place than the public sections. */
.drawer__nav--team{
  margin-top:10px;border-top:1px solid var(--line);
  color:rgba(255,255,255,.72)
}
.drawer__nav--team::after{
  content:"Participants";display:block;margin-top:4px;
  font-size:.5625rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.35)
}
.drawer__foot{padding:22px;display:grid;gap:16px;justify-items:start;border-top:1px solid var(--line)}
.drawer__foot .btn{width:100%}
.drawer__ig{display:inline-flex;align-items:center;gap:8px;font-size:.9375rem;color:rgba(255,255,255,.75)}
.drawer__ig:hover{color:#fff}

/* ---------- 3b. join CTA + homepage band ----------
   Lives here rather than in css/join.css because the button is in the header
   of every page and the band is on the homepage, neither of which loads the
   join stylesheet.

   --join is #E00000, not the logo red (--accent, 218 2 2). The two are close
   but not the same, and that is the point: --accent is the brand mark, this
   is the one action token. It is the only solid fill in the header and the
   only red fill above the fold on the homepage, so the highest-intent action
   on the site has nothing competing with it.

   The label is 15px/700 white on #E00000, which clears 4.5:1. Do not shrink
   it below 15px — white on this red is marginal at small sizes. */
:root{ --join:224 0 0 }

.btn--join{
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;
  border-radius:8px;background:rgb(var(--join));color:#fff;
  font-size:.9375rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  transition:filter var(--t1),transform var(--t1),opacity var(--t1)
}
.btn--join:hover{filter:brightness(1.14)}
.btn--join:active{transform:translateY(1px)}
.btn--join .ico{transition:transform var(--t2) var(--ease)}
.btn--join:hover .ico{transform:translateX(4px)}
/* An arrow on its own is not a recognisable "join" glyph the way the padlock
   is a recognisable "sign in", so this button keeps its label at every width
   it fits — down to 520px, where brand + label + pill + burger still add up
   to less than the viewport. Below that it leaves the header rather than
   shrinking to an unlabelled square: the drawer, the hero, and the sticky bar
   each carry the same action on a phone, so nothing is lost.
   Scoped to .nav__right so the drawer, band, hero, package and sticky
   instances of .btn--join are untouched. */
@media (max-width:520px){
  .nav__right .btn--join{display:none}
}
/* The signed-in pill carries a livery dot and a count badge either side of the
   name, so it runs about 30px wider than the signed-out one and is the state
   that decides how small this can go. Measured against the longest short name
   in teams-data.js ("Merah Putih") with a two-digit count: it needs 361px to
   clear the wordmark, so below 380px the name takes a tighter cap. Nine
   characters keeps every other team intact and truncates only that one, and
   the aria-label still spells the full name out. */
@media (max-width:379px){
  .tpill--in .tpill__name{max-width:9ch}
}
/* Below 340px nothing more can be given back, so the wordmark goes and the
   disc carries the brand on its own — the <a> keeps its aria-label, so it is
   still "Superstars Motorsport, home". The padlock goes with it: "Team Login"
   says what the control does, the padlock only decorates it. */
@media (max-width:339px){
  .brand__text{display:none}
  .tpill .ico{display:none}
  .tpill{padding:0 10px}
}

/* full-width button at the top of the mobile drawer, above the section links */
.drawer__cta{padding:18px 22px 8px}
.drawer__cta .btn--join{width:100%;height:50px;padding:0 18px;justify-content:center}

/* ---- homepage interruption band ----
   Deliberately image-free and full-bleed. It sits between the series
   showcase and the gallery, where a reader has just learned what the series
   is, and it should read as an interruption rather than as another content
   section — hence no photograph, one line of display type, and a hard rule
   top and bottom. */
.jband{
  background:#08090b;border-block:1px solid var(--line);
  padding:clamp(44px,7vw,96px) var(--pad)
}
.jband__in{
  max-width:var(--wrap);margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,3vw,48px)
}
.jband__copy{min-width:0}
.jband__t{
  font-size:clamp(1.75rem,1rem + 3.2vw,3.5rem);font-weight:400;line-height:1.02;
  letter-spacing:-.02em;text-wrap:balance
}
.jband__t b{font-weight:700;display:block}
.jband__s{margin-top:14px;color:rgba(255,255,255,.55);font-size:.9375rem}
.jband__acts{display:flex;flex-wrap:wrap;gap:12px;flex:none}
.jband__acts .btn--join{height:50px;padding:0 26px;font-size:1rem}
@media (max-width:820px){
  .jband__in{flex-direction:column;align-items:stretch}
  .jband__acts .btn--join,.jband__acts .btnq{width:100%;justify-content:center}
  .jband__acts .btn--join{padding:0 26px}
  .jband__acts .btnq{min-height:50px}
}

/* ---------- team-area pill ----------
   Sits in .nav__right, left of Follow, on every page. The main nav stays
   public; this is the only entry point to the participant area, so it is
   deliberately a different shape from a nav link.

   Signed out it is a lock and a label. Signed in it wears the team's livery
   colour as a dot and carries the unpaid-invoice count. The count is a
   number on a red field, which is colour plus shape plus text — the link's
   aria-label spells the whole thing out, because "2" alone says nothing.

   Painted by js/team-pill.js from the `sss.pill` summary that js/parts.js
   keeps up to date. The public pages never load the parts catalogue. */
.tpill{
  display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 15px;
  border-radius:8px;background:var(--glass);
  -webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);
  font-size:.875rem;letter-spacing:.04em;color:#fff;
  border:1px solid rgba(255,255,255,.12);
  transition:background-color var(--t1),border-color var(--t1)
}
.tpill:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
.tpill[aria-current="page"]{border-color:rgba(255,255,255,.4)}
.tpill__name{max-width:15ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* two livery colours in one 10px disc: the team is recognisable at a glance
   without printing a second swatch into a 44px control */
.tpill__dot{
  width:10px;height:10px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,rgb(var(--c)) 50%,rgb(var(--c2)) 50%);
  box-shadow:0 0 0 1px rgba(255,255,255,.25)
}
.tpill__badge{
  display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;
  border-radius:10px;background:rgb(var(--accent));color:#fff;
  font-size:.6875rem;font-weight:700;font-variant-numeric:tabular-nums
}
.tpill .ico{width:1rem;height:1rem;opacity:.7}

.panels{
  position:fixed;top:calc(var(--nav-h) + 12px);left:50%;translate:-50% 0;z-index:190;
  width:min(560px,calc(100vw - 2 * var(--pad)));
  background:var(--glass);
  -webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);
  border-radius:8px;padding:26px 30px;
  opacity:0;transform:translateY(-10px);
  transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)
}
.panels.is-open{opacity:1;transform:none}
.panel{display:none}
.panel.is-active{display:block}
.panel__label{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:16px}
.panel__list a{
  display:block;padding:11px 0;font-size:1.0625rem;color:rgba(255,255,255,.88);
  border-bottom:1px solid var(--line);
  transition:color var(--t1),padding-left var(--t1) var(--ease)
}
.panel__list a:hover{color:#fff;padding-left:6px}
.panel__more{margin-top:18px;font-size:.9375rem}

/* ---------- 4. hero ---------- */
.stage{height:320vh;position:relative}
.stage__sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:#07080a}
.scene{
  position:absolute;inset:0;overflow:hidden;
  transform:scale(var(--cam,1.06)) translateY(calc(var(--pan,0) * 1px));
  transform-origin:50% 58%;will-change:transform
}
.scene__img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.scene__vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(80% 66% at 50% 44%,transparent 34%,rgba(0,0,0,.5) 100%),
    linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.06) 26%,rgba(0,0,0,.3) 58%,rgba(0,0,0,.92) 100%)
}
.stage__copy{
  position:absolute;left:var(--pad);bottom:clamp(56px,9vh,110px);
  max-width:min(880px,86vw);
  opacity:var(--copy-o,1);transform:translateY(calc((1 - var(--copy-o,1)) * 22px))
}
.stage__eyebrow{
  font-size:.6875rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgb(var(--accent));margin-bottom:14px
}
.stage__title{font-size:var(--fs-h1);font-weight:400;line-height:1.12;letter-spacing:-.01em}
/* each clause is its own block and breaks into even lines instead of
   leaving a single word stranded on the last line */
.stage__title span{display:block;text-wrap:balance}
.stage__meta{margin-top:18px;font-size:.875rem;color:rgba(255,255,255,.7)}
.thumbchip{
  position:absolute;right:var(--pad);bottom:clamp(56px,9vh,110px);
  width:clamp(72px,7.5vw,104px);aspect-ratio:3/2;
  border:1px solid rgba(255,255,255,.4);border-radius:var(--r-img);
  background:#0d1012;overflow:hidden;
  transition:transform var(--t2) var(--ease),border-color var(--t1)
}
.thumbchip:hover{transform:scale(1.06);border-color:#fff}
.thumbchip__art,.thumbchip img{display:block;width:100%;height:100%}
.thumbchip img{object-fit:cover}
.stage__cue{
  position:absolute;left:50%;bottom:20px;translate:-50% 0;
  display:flex;align-items:center;gap:8px;
  font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.6);
  opacity:var(--copy-o,1)
}
.stage__cue span{width:1px;height:26px;background:linear-gradient(#fff,transparent);animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:scaleY(.2)}40%{opacity:1}100%{opacity:0;transform:scaleY(1) translateY(10px)}}

/* ---------- 5. about + milestones ---------- */
.about{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--paper);color:var(--ink);
  display:grid;grid-template-columns:1.05fr 1fr;align-items:center;
  gap:clamp(28px,5vw,84px);
  /* the white background runs edge to edge; only the content is capped at
     --wrap, so wide monitors don't show it as a floating card */
  --gutter:max(var(--pad),calc((100% - var(--wrap)) / 2));
  padding:clamp(64px,9vw,140px) var(--gutter);
  max-width:none;margin-inline:0
}
/* oversized founding year drifting against the scroll, for depth */
.about__ghost{
  position:absolute;right:calc(var(--gutter) - .05em);bottom:-.16em;z-index:-1;pointer-events:none;
  font-size:clamp(5rem,16vw,16rem);font-weight:700;line-height:.8;letter-spacing:-.04em;
  color:rgba(10,10,11,.055);white-space:nowrap;
  transform:translate3d(0,calc(var(--gp,0) * 1px),0);will-change:transform
}
.about__media{
  position:relative;overflow:hidden;background:var(--paper-2);
  border-radius:var(--r-img);aspect-ratio:3/2
}
.about__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover
}
.about__media figcaption{
  position:absolute;left:0;bottom:0;padding:14px 18px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  color:#fff;display:grid;gap:2px
}
.about__media figcaption b{font-size:.9375rem;font-weight:700}
.about__media figcaption span{font-size:.75rem;color:rgba(255,255,255,.7)}
.about__title{font-size:var(--fs-h2);font-weight:400;line-height:1.08;letter-spacing:-.02em;margin-bottom:24px}
.about__text{display:grid;gap:16px;color:rgba(10,10,11,.68);max-width:52ch;margin-bottom:32px}
.about .arrowlink{color:var(--ink)}

.heritage{position:relative;height:440vh;background:var(--paper);color:var(--ink)}
.heritage__sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.statement{
  position:absolute;left:var(--pad);right:var(--pad);top:50%;translate:0 -50%;
  display:grid;gap:.02em;text-align:center;
  font-size:var(--fs-statement);font-weight:400;line-height:.98;letter-spacing:-.02em;
  color:var(--ink);pointer-events:none;
  opacity:var(--stmt-o,1);
  filter:blur(calc(var(--stmt-blur,0) * 1px));
  will-change:opacity,filter
}
.statement span:nth-child(2){padding-left:.08em}

.odo{
  position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:3;
  display:flex;pointer-events:none;color:#fff;
  font-size:var(--fs-odo);font-weight:400;line-height:1;letter-spacing:-.03em;
  opacity:var(--ui-o,1)
}
/* --- year treatments; switch with data-odo on #odo --- */
/* solid: plain white numerals, as on racing.porsche.com. The default. */
.odo[data-odo="solid"]{
  color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.5),0 0 70px rgba(0,0,0,.3)
}
/* plate: numerals on a blurred dark slab, most legible over busy photos */
.odo[data-odo="plate"]{
  padding:.04em .16em .08em;border-radius:var(--r);
  background:rgba(6,7,9,.42);
  -webkit-backdrop-filter:blur(16px) saturate(.85);backdrop-filter:blur(16px) saturate(.85);
  text-shadow:0 2px 30px rgba(0,0,0,.45)
}
/* outline: hollow numerals with a soft shadow */
.odo[data-odo="outline"]{
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.95);
  filter:drop-shadow(0 3px 16px rgba(0,0,0,.7))
}
/* corner: smaller, bottom-left, sitting on the frame's own gradient */
.odo[data-odo="corner"]{
  top:auto;left:auto;right:calc(50% + var(--frame-w,60vw) / 2 * -1 + 22px);
  bottom:clamp(74px,13vh,124px);translate:0 0;
  font-size:clamp(2.5rem,7vw,6rem);
  text-shadow:0 4px 28px rgba(0,0,0,.8)
}
/* difference: the original blend-mode look */
.odo[data-odo="difference"]{mix-blend-mode:difference}
.odo__digit{height:1em;overflow:hidden}
.odo__reel{
  display:grid;transform:translateY(calc(var(--d,0) * -10%));
  transition:transform 1s var(--ease);transition-delay:var(--delay,0ms)
}
.odo__reel span{height:1em;display:grid;place-items:center;width:.62em}

.rail{position:relative;width:100%;overflow:hidden;z-index:2}
.strip{
  --frame-w:min(55vh,78vw,720px);
  display:flex;gap:clamp(20px,2.4vw,44px);
  padding-inline:calc((100vw - var(--frame-w)) / 2);
  transform:translate3d(calc(var(--x,0) * -1px),0,0);will-change:transform
}
.frame{
  position:relative;flex:0 0 var(--frame-w);aspect-ratio:3/4;
  overflow:hidden;background:#111;border-radius:var(--r-img)
}
.frame img{width:100%;height:100%;object-fit:cover}
.frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55) 100%)
}

.cap{
  position:absolute;right:0;bottom:0;z-index:2;display:flex;align-items:stretch;
  background:var(--glass);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  color:#fff;max-width:min(92%,460px)
}
.cap__body{display:block;padding:11px 15px;min-width:0}
.cap__car{display:block;font-size:.875rem;line-height:1.3}
.cap__event{display:block;font-size:.6875rem;color:rgba(255,255,255,.65)}
.cap__bar{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.2)}
.cap__bar i{display:block;height:100%;width:0;background:rgb(var(--accent));transition:width var(--t2) linear}
.cap__x{width:46px;flex:none;display:grid;place-items:center;border-left:1px solid var(--line);transition:background var(--t1)}
.cap__x:hover{background:rgb(var(--accent))}

.railnav{
  position:absolute;left:50%;bottom:clamp(20px,5vh,60px);translate:-50% 0;z-index:4;
  display:flex;align-items:center;gap:18px;
  opacity:var(--ui-o,1)
}
.railnav__arrow{width:32px;height:32px;display:grid;place-items:center;color:var(--ink);transition:opacity var(--t1),transform var(--t1) var(--ease)}
.railnav__arrow:hover:not(:disabled){transform:scale(1.15)}
.railnav__arrow:disabled{opacity:.25;cursor:default}
.dots{display:flex;align-items:center;gap:10px}
.dots button{width:6px;height:6px;border-radius:50%;background:rgba(10,10,11,.25);transition:background var(--t1),transform var(--t1) var(--ease)}
.dots button:hover{background:rgba(10,10,11,.6)}
.dots button[aria-current="true"]{background:rgb(var(--accent));transform:scale(1.7)}

/* ---------- 6. series showcase ---------- */
.showcase{position:relative;height:260vh;background:#07080a}
.showcase__sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  /* two rows so the heading and the photo never overlap */
  display:grid;grid-template-rows:auto minmax(0,1fr);align-items:center;justify-items:center;
  gap:clamp(24px,4.5vh,56px);
  padding:calc(var(--nav-h) + clamp(30px,6.5vh,84px)) var(--pad) clamp(82px,12vh,124px)
}
.glow{
  position:absolute;inset:0;
  background:
    radial-gradient(58% 44% at 50% 44%,rgb(var(--accent) / .5),rgb(var(--accent) / .12) 56%,transparent 78%),
    radial-gradient(120% 90% at 50% 100%,rgb(var(--accent) / .16),transparent 62%),
    #07080a;
  opacity:var(--lit,.2);transition:opacity .2s linear
}
.showcase__head{
  justify-self:center;text-align:center;max-width:min(1120px,100%);
  opacity:var(--title-o,0);transform:translateY(calc((1 - var(--title-o,0)) * 16px));
  transition:opacity .2s linear,transform .2s linear
}
.showcase__title{font-size:clamp(1.75rem,4.2vw,4rem);font-weight:400;line-height:1.08;letter-spacing:-.02em}
.showcase__title span{display:block}
.showcase__lede{margin:14px auto 0;font-size:.9375rem;color:rgba(255,255,255,.7);max-width:44ch}

.podium{
  position:relative;isolation:isolate;
  aspect-ratio:3/2;width:min(52vw,750px);height:auto;
  max-height:100%;max-width:100%;margin-inline:auto;border-radius:var(--r-img)
}
.podium__img{
  width:100%;height:100%;object-fit:cover;border-radius:var(--r-img);
  opacity:calc(.25 + var(--lit,0) * .75);
  transition:opacity .2s linear
}
.hotspots{position:absolute;inset:0;opacity:var(--hot-o,0);transition:opacity var(--t2) var(--ease)}
.hotspots[hidden]{display:none}
.hot{
  position:absolute;left:var(--hx);top:var(--hy);translate:-50% -50%;
  display:flex;align-items:stretch;
  background:var(--glass);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  border-radius:4px;overflow:hidden;text-align:left;
  transition:transform var(--t2) var(--ease)
}
.hot:hover{transform:translate(-50%,-50%) scale(1.04)}
.hot__body{display:block;padding:10px 14px}
.hot__t{display:block;font-size:.8125rem;line-height:1.3}
.hot__s{display:block;font-size:.6875rem;color:rgba(255,255,255,.65)}
.hot__x{width:40px;flex:none;display:grid;place-items:center;border-left:1px solid var(--line);transition:background var(--t1)}
.hot__x:hover{background:rgb(var(--accent))}

.pill--tools{
  position:absolute;left:50%;bottom:clamp(18px,4vh,42px);translate:-50% 0;z-index:5;
  gap:0;padding:4px;max-width:calc(100vw - 2 * var(--pad));
  opacity:var(--tools-o,0);pointer-events:var(--tools-p,none);
  transition:opacity var(--t2) var(--ease)
}
.tool{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:var(--r);transition:background var(--t1)}
.tool:hover{background:rgba(255,255,255,.12)}
.tool--wide{width:auto;flex:none;white-space:nowrap;display:flex;gap:8px;padding:0 14px;font-size:.8125rem;color:rgba(255,255,255,.85)}
.tool__sep{width:1px;align-self:stretch;background:var(--line);margin:6px}
.models{display:flex;gap:2px;min-width:0;flex:0 1 auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.models::-webkit-scrollbar{display:none}
.model{
  height:36px;padding:0 14px;border-radius:var(--r);white-space:nowrap;
  font-size:.8125rem;color:rgba(255,255,255,.7);
  transition:background var(--t1),color var(--t1)
}
.model:hover{color:#fff;background:rgba(255,255,255,.1)}
.model.is-active{background:rgb(var(--accent));color:#fff}

/* ---------- 7. gallery rail ---------- */
.teams{
  /* pinned like the series section above: the panel holds the full viewport
     while you scroll past it (overflow:hidden here would break the sticky) */
  position:relative;isolation:isolate;height:170vh;
  background:var(--ink)
}
.teams__sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;align-content:center;
  padding:calc(var(--nav-h) + 24px) 0 clamp(32px,6vh,72px)
}
.teams__glow{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(68% 52% at 50% 6%,rgb(var(--accent) / .3),transparent 70%),
    radial-gradient(100% 70% at 50% 100%,rgba(255,255,255,.05),transparent 70%)
}
.teams__statement{
  display:grid;gap:.02em;text-align:center;
  padding-inline:var(--pad);margin-bottom:clamp(24px,4vh,56px);
  font-size:var(--fs-statement);font-weight:400;line-height:1;letter-spacing:-.02em;
  color:rgba(255,255,255,.4)
}
.teams__statement span:nth-child(2){color:#fff}

.pill--teams{
  width:max-content;max-width:calc(100vw - 2 * var(--pad));
  margin:0 auto clamp(22px,3.4vh,44px);
  padding:4px;gap:2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none
}
.pill--teams::-webkit-scrollbar{display:none}
.team{
  height:40px;padding:0 18px;border-radius:var(--r);white-space:nowrap;
  font-size:.9375rem;color:rgba(255,255,255,.7);
  transition:background var(--t1),color var(--t1)
}
.team:hover{color:#fff;background:rgba(255,255,255,.1)}
.team.is-active{background:rgb(var(--accent));color:#fff}

.teamrail{
  display:flex;gap:clamp(14px,2vw,32px);
  padding-inline:max(var(--pad),calc((100vw - var(--wrap)) / 2));
  scroll-padding-left:max(var(--pad),calc((100vw - var(--wrap)) / 2));
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;
  /* the animation must come from CSS: a JS behavior:'smooth' is swallowed
     by mandatory snapping on this container */
  scroll-behavior:smooth
}
.teamrail::-webkit-scrollbar{display:none}
.teamrail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.teamrail.is-dragging *{pointer-events:none}
.tcard{
  position:relative;flex:0 0 clamp(240px,32vw,560px);aspect-ratio:3/2;
  border-radius:var(--r-img);overflow:hidden;scroll-snap-align:start;background:rgba(255,255,255,.05);
  opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--d,0ms)
}
.tcard.is-in{opacity:1;transform:none}
.tcard img{width:100%;height:100%;object-fit:cover;transition:transform var(--t3) var(--ease)}
.tcard:hover img{transform:scale(1.05)}
.tcard figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  font-size:.875rem;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.75))
}
.tcard__x{
  position:absolute;top:10px;right:10px;width:38px;height:38px;
  display:grid;place-items:center;border-radius:3px;
  border:1px solid rgba(255,255,255,.35);background:var(--glass);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;transform:scale(.9);
  transition:opacity var(--t1),transform var(--t1) var(--ease),background var(--t1)
}
.tcard:hover .tcard__x,.tcard__x:focus-visible{opacity:1;transform:none}
.tcard__x:hover{background:rgb(var(--accent))}

/* ---------- 8. partners + contact ---------- */
.brands{background:var(--paper);color:var(--ink);padding:clamp(56px,8vw,120px) var(--pad)}
.brands__head{max-width:var(--wrap);margin:0 auto clamp(32px,5vw,64px);text-align:center}
.brands__title{font-size:var(--fs-h2);font-weight:400;letter-spacing:-.02em;line-height:1}
.brands__note{margin-top:10px;color:rgba(10,10,11,.55)}
.brands__wall{
  /* a tight centred row rather than a full-width grid: four logos should read
     as one group, not sit at opposite ends of the page */
  max-width:min(var(--wrap),860px);margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(22px,3.4vw,54px)
}
.brands__wall li{display:grid;place-items:center;min-width:0;flex:0 0 auto}
.brands__wall img{
  /* normalise by height so logos of different proportions read the same size */
  height:clamp(22px,2.4vw,34px);width:auto;max-width:100%;object-fit:contain;
  filter:grayscale(1) brightness(var(--bfix,1));opacity:.62;
  /* multiply drops the white plate some logo files are exported with */
  mix-blend-mode:multiply;
  transition:filter var(--t2) var(--ease),opacity var(--t2) var(--ease),transform var(--t2) var(--ease)
}
.brands__wall li:hover img{filter:brightness(var(--bfix,1));opacity:1;transform:scale(1.04)}
/* this logo ships with a solid light box baked in: lift it to pure white so
   multiply erases it against the white section */
.brands__wall li.is-boxed img{--bfix:1.16}

.contact{background:var(--ink-2);padding:clamp(64px,9vw,140px) var(--pad)}
.contact__inner{
  /* bounded two-column block: an info panel beside a compact form, rather than
     two loose columns stretched across the full page width */
  max-width:min(var(--wrap),1060px);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(20px,3vw,44px);align-items:start
}
.contact .eyebrow{color:rgba(255,255,255,.5)}
.contact__head{max-width:var(--wrap);margin:0 auto clamp(32px,5vw,64px);text-align:center}
.contact__title{font-size:var(--fs-h2);font-weight:400;line-height:1.08;letter-spacing:-.02em}
.contact__info{
  text-align:left;
  border:1px solid var(--line);border-radius:var(--r);
  background:rgba(255,255,255,.025);
  padding:clamp(18px,2vw,26px)
}
.contact__list{display:grid}
.cinfo{padding:16px 0;border-bottom:1px solid var(--line)}
.cinfo:first-child{padding-top:0}
.cinfo:last-child{padding-bottom:0;border-bottom:0}
.cinfo dt{
  display:flex;align-items:center;gap:8px;
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:8px
}
.cinfo dd{font-size:.9375rem;line-height:1.6;color:rgba(255,255,255,.85)}
.cinfo dd a{border-bottom:1px solid rgba(255,255,255,.3);transition:color var(--t1),border-color var(--t1)}
.cinfo dd a:hover{color:rgb(var(--accent));border-color:rgb(var(--accent))}

.contact__form{display:grid;gap:14px;align-content:start}
.field{display:grid;gap:8px}
.field label{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.contact input,.contact textarea{
  width:100%;padding:12px 14px;background:rgba(255,255,255,.02);color:#fff;
  border:1px solid var(--line);border-radius:var(--r);resize:vertical;
  transition:border-color var(--t1),background var(--t1)
}
.contact input:focus,.contact textarea:focus{background:rgba(255,255,255,.05)}
.contact input:hover,.contact textarea:hover,
.contact input:focus,.contact textarea:focus{border-color:#fff}
.contact [aria-invalid="true"]{border-color:rgb(var(--accent))}
.contact__form .btn{justify-self:start}
.contact__hint{font-size:.875rem;color:rgba(255,255,255,.7);min-height:1.2em}
.contact__hint a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}

/* ---------- 8b. news bento ---------- */
.journal{
  background:var(--ink);color:#fff;
  padding:clamp(56px,8vw,120px) var(--pad) clamp(48px,6vw,90px)
}
.journal__head{max-width:var(--wrap);margin:0 auto clamp(28px,4vw,52px);text-align:center}
.journal__title{font-size:var(--fs-h2);font-weight:400;letter-spacing:-.02em;line-height:1}
.journal__note{margin-top:10px;color:rgba(255,255,255,.55)}
.bento{
  max-width:var(--wrap);margin-inline:auto;
  display:grid;gap:clamp(8px,1vw,14px);
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(180px,26vh));
  grid-template-areas:
    "a a b b e f"
    "a a c d e f"
}
.story{
  position:relative;grid-area:var(--area);overflow:hidden;min-width:0;
  border-radius:var(--r-img);background:#0c0f12;
  display:flex;flex-direction:column;justify-content:flex-end
}
.story__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--t3) var(--ease)
}
.story:hover .story__img{transform:scale(1.045)}
.story::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.14) 0%,transparent 34%,rgba(0,0,0,.84) 100%)
}
.story__body{position:relative;z-index:1;padding:clamp(14px,1.4vw,22px)}
.story__cat{
  font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-bottom:6px
}
.story__t{font-size:clamp(.9375rem,.85rem + .35vw,1.1875rem);font-weight:400;line-height:1.25}
.story__x{
  position:absolute;top:12px;right:12px;z-index:2;
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.35);border-radius:var(--r);
  background:var(--glass);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background var(--t1),transform var(--t1) var(--ease)
}
.story__x .ico{transform:rotate(-45deg)}
.story__x:hover{background:rgb(var(--accent));transform:scale(1.06)}

/* ---------- 9. footer + modal ---------- */
.ftr{background:var(--ink);padding:clamp(48px,7vw,90px) var(--pad) 30px;border-top:1px solid var(--line)}
.ftr__grid{
  max-width:var(--wrap);margin-inline:auto;
  display:grid;grid-template-columns:1.1fr repeat(4,minmax(0,1fr));
  gap:clamp(28px,4vw,64px)
}
.ftr__col{min-width:0}
.ftr__mark{width:auto;height:56px;margin-bottom:16px}
.ftr__legal-name{font-size:.8125rem;letter-spacing:.06em;color:rgba(255,255,255,.55)}
.ftr__label{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:16px}
.ftr__col li+li{margin-top:10px}
.ftr__col ul a,.ftr__col ul span{font-size:.875rem;color:rgba(255,255,255,.7)}
/* social row: icon-only, so each link carries an aria-label */
.ftr__social{display:flex;gap:10px}
.ftr__social li+li{margin-top:0}
.ftr__social a{
  display:grid;place-items:center;width:42px;height:42px;
  border:1px solid var(--line);border-radius:var(--r);
  color:rgba(255,255,255,.75);
  transition:color var(--t1),border-color var(--t1),background var(--t1),transform var(--t1) var(--ease)
}
.ftr__social a:hover{
  color:#fff;background:rgb(var(--accent));border-color:rgb(var(--accent));
  transform:translateY(-2px)
}
.ftr__social .ico{width:1.15rem;height:1.15rem}
.ftr__col ul a{transition:color var(--t1)}
.ftr__col ul a:hover{color:rgb(var(--accent))}
.ftr__legal{
  max-width:var(--wrap);margin:clamp(40px,6vw,72px) auto 0;padding-top:22px;
  border-top:1px solid var(--line);
  font-size:.75rem;line-height:1.6;color:rgba(255,255,255,.45)
}
.ftr__note{margin-top:6px}

.modal{position:fixed;inset:0;z-index:250;display:grid;place-items:center;padding:var(--pad)}
.modal__scrim{position:absolute;inset:0;background:rgba(5,5,6,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity var(--t2)}
.modal__box{
  position:relative;width:min(680px,100%);max-height:calc(100vh - 2 * var(--pad));overflow-y:auto;
  background:#0e1013;border:1px solid var(--line);border-radius:6px;
  padding:clamp(20px,3vw,34px);
  opacity:0;transform:translateY(16px) scale(.98);
  transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)
}
.modal.is-on .modal__scrim{opacity:1}
.modal.is-on .modal__box{opacity:1;transform:none}
.modal__x{position:absolute;right:10px;top:10px;width:40px;height:40px;display:grid;place-items:center;border-radius:4px;background:var(--glass)}
.modal__x:hover{background:rgb(var(--accent))}
.modal__art{aspect-ratio:16/9;margin-bottom:22px;border-radius:var(--r-img);overflow:hidden;background:#181b1f}
.modal__art img{width:100%;height:100%;object-fit:cover}
.modal__eyebrow{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:8px}
.modal__title{font-size:clamp(1.25rem,1rem + 1vw,1.75rem);font-weight:400;margin-bottom:10px}
.modal__text{font-size:.9375rem;color:rgba(255,255,255,.72);max-width:56ch}

/* ---------- 10. reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
html.no-motion .stage,
html.no-motion .heritage,
html.no-motion .showcase,
html.no-motion .teams{height:auto}
html.no-motion .stage__sticky,
html.no-motion .heritage__sticky,
html.no-motion .showcase__sticky,
html.no-motion .teams__sticky{position:static;height:auto;min-height:100svh}
html.no-motion .scene{transform:none}
html.no-motion .rail{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory}
html.no-motion .teamrail{scroll-behavior:auto}
html.no-motion .strip{transform:none}
/* the scroll engine never runs here, so lay the statement and year out in flow
   instead of leaving them stacked on top of the photos */
html.no-motion .statement{
  position:static;translate:none;opacity:1;filter:none;
  margin:0 auto clamp(24px,5vh,56px)
}
html.no-motion .odo{
  position:static;translate:none;opacity:1;justify-content:center;
  mix-blend-mode:normal;color:var(--ink);margin-bottom:clamp(12px,3vh,32px)
}
html.no-motion .railnav{position:static;translate:none;opacity:1;justify-content:center;margin-top:24px}
html.no-motion .heritage__sticky{display:block;padding:clamp(48px,8vh,96px) 0}
html.no-motion .frame{scroll-snap-align:center}
html.no-motion .stage__copy,
html.no-motion .showcase__head,
html.no-motion .pill--tools,
html.no-motion .hotspots{opacity:1!important;pointer-events:auto!important}
html.no-motion .glow{opacity:1}
html.no-motion .podium__img{opacity:1}
html.no-motion .stage__cue{display:none}
html.no-motion [data-in],
html.no-motion .tcard,
html.no-motion .story{opacity:1;transform:none}

/* ---------- 11. responsive ---------- */
@media (max-width:1100px){
  .quick{gap:14px;padding:0 16px}
  /* five columns stop fitting well before the 2-up break below */
  .ftr__grid{grid-template-columns:1.1fr repeat(2,minmax(0,1fr))}
  .strip{--frame-w:min(84vw,900px)}
  .about{grid-template-columns:1fr}
  .about__media{order:-1}
}
@media (max-width:820px){
  :root{--nav-h:60px}
  /* The pill keeps its label here. It used to drop to a bare padlock once the
     burger appeared, which left the single most consequential control in the
     header — the way in to a team's invoices — as an unlabelled icon that read
     as "locked" rather than "sign in". A padlock is not a word.

     The room is there: the nav pill is gone at this width and the Join CTA
     leaves the header below 520px, so brand + pill + burger fit inside 375px
     with the label shown. 11ch is the longest short name in teams-data.js
     ("Merah Putih"), so nothing real truncates; anything longer ellipses. */
  .tpill{padding:0 12px;gap:7px}
  .tpill__name{max-width:11ch}
  .nav{gap:8px}
  .brand__mark{height:30px}
  .brand__word{font-size:.75rem;letter-spacing:.18em}
  .brand__sub{font-size:.5rem}
  /* the bottom bar is replaced by the side menu */
  .pill--nav{display:none}
  .burger{display:block}
  .quick::-webkit-scrollbar{display:none}
  .panels{top:calc(var(--nav-h) + 10px);bottom:auto;width:calc(100vw - 2 * var(--pad));padding:20px}
  /* hero reads as one bottom-left block: thumbnail, then the headline */
  .stage__sticky{
    display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
    gap:16px;padding:0 var(--pad) clamp(52px,9vh,96px)
  }
  .thumbchip{position:static;order:1;width:clamp(76px,22vw,104px)}
  .stage__copy{
    position:static;order:2;left:auto;right:auto;bottom:auto;
    max-width:none;text-align:left
  }
  /* one flowing sentence rather than two stacked clauses */
  .stage__title{font-size:clamp(1.9rem,7.8vw,2.75rem);line-height:1.16;text-wrap:normal}
  .stage__title span{display:inline}
  .stage__eyebrow,.stage__meta{display:none}
  .thumbchip{bottom:auto;top:calc(var(--nav-h) + 16px);width:clamp(60px,18vw,84px)}
  .scene__img{object-position:50% 58%}
  .stage__cue{display:none}
  .strip{--frame-w:82vw;gap:clamp(14px,4vw,24px)}
  /* one type size for every section title, matching the reference */
  .statement,.teams__statement,
  .showcase__title,.brands__title,.contact__title,.journal__title,.about__title{
    font-size:clamp(2rem,9.6vw,3rem);line-height:1.06
  }
  .railnav{bottom:clamp(16px,4vh,32px)}
  .showcase__head{max-width:none;right:var(--pad)}
  /* portrait, but not filling the row: it needs air above and below */
  .podium{
    width:calc(100vw - 2 * var(--pad));aspect-ratio:4/5;
    height:auto;max-height:100%;margin-block:auto
  }
  .showcase__sticky{
    gap:clamp(16px,2.6vh,26px);
    padding:calc(var(--nav-h) + 40px) var(--pad) clamp(74px,11vh,100px)
  }
  .showcase__lede{margin-top:10px}
  .pill--tools{bottom:clamp(14px,3vh,26px);flex-wrap:nowrap}
  .tool--wide span{display:none}
  .tool__sep{display:none}
  .model{padding:0 10px;font-size:.75rem}
  /* hotspots are hidden on phones: the photo is small and the markers only got
     in the way. To bring them back, drop the display:none below. The ring now
     has pointer-events:none so the tap actually reaches the button. */
  .hotspots{display:none}
  #hotToggle{display:none}          /* nothing left for it to toggle */
  .hot__body{display:none}
  .hot{width:30px;height:30px;border-radius:50%;background:rgba(10,10,11,.85)}
  .hot::after{
    content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
    border:1px solid rgba(255,255,255,.35);animation:ping 2.4s var(--ease) infinite
  }
  .hot__x{width:100%;border-left:0}
  /* narrower than the viewport so the next photo clearly peeks in, hinting
     that the rail can be swiped */
  .tcard{flex-basis:74vw;aspect-ratio:3/4}
  .tcard__x{opacity:1;transform:none}
  .bento{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(4,minmax(150px,22vh));
    grid-template-areas:"a a" "b b" "c d" "e f"
  }
  .contact__inner{grid-template-columns:1fr}
  .contact__form .btn{width:100%;justify-self:stretch}
  .ftr__grid{grid-template-columns:1fr 1fr}
}
@keyframes ping{0%{transform:scale(.85);opacity:.9}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
@media (max-width:520px){
  .ftr__grid{grid-template-columns:1fr}
  .brands__wall{gap:26px 32px}
}