/* ============================================================
   APEX AUTO WORKS — shared design system
   Palette: logo (glossy black / racing red / studio grey), tinted neutrals.
   Red = conversion. One easing. Two durations. Mono = fact.
   Signature: the REDLINE — scroll writes --signature (0→1), driving the
   rev bar, the RPM readout, headline wipes and media saturation.
   ============================================================ */
:root{
  --ink:        #0b0b12;
  --ink-600:    #15151d;
  --paper:      #f1f1f2;
  --paper-2:    #e5e5e8;
  --red:        #e4032e;
  --grey-500:   #63636b;
  --grey-400:   #9b9ba3;
  --line:       rgba(11,11,18,.14);
  --line-dark:  rgba(241,241,242,.16);

  --ease: cubic-bezier(.38,.005,.215,1);
  --t-ui: .2s;
  --t-world: .6s;

  --cut: 10px 0 10px 0;
  --cut-r: 0 10px 0 10px;

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --pad: clamp(20px, 5vw, 72px);

  --signature: 0;   /* the scroll writes 0 → 1 into this */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---- registers ------------------------------------------- */
.display{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:0;
}
.mono{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:400;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--grey-500);
}
.on-dark .eyebrow{color:var(--grey-400)}

/* ---- SIGNATURE: headline wipe (grey → red → ink), scroll-driven ----
   Each [data-wipe] gets --p (0→1) from js/main.js as it crosses the viewport. */
[data-wipe]{
  --p: 0;
  background-image:linear-gradient(90deg,
    var(--ink) 0 33.2%, var(--red) 33.4% 66.2%, var(--grey-400) 66.4% 100%);
  background-size:300% 100%;
  background-position:calc((1 - var(--p)) * 100%) 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.on-dark [data-wipe]{
  background-image:linear-gradient(90deg,
    var(--paper) 0 33.2%, var(--red) 33.4% 66.2%, var(--grey-500) 66.4% 100%);
}
@supports not (background-clip: text){
  [data-wipe]{background-image:none;color:var(--ink)}
  .on-dark [data-wipe]{color:var(--paper)}
}

/* ---- SIGNATURE: media saturation, scroll-driven ---- */
.grade{--p:0; filter:grayscale(calc(1 - var(--p)))}

/* ---- SIGNATURE: the rev line (under the header, every page) ---- */
.rev-line{
  position:fixed;top:0;left:0;z-index:60;height:3px;width:100%;
  transform:scaleX(var(--signature));
  transform-origin:left;
  background:var(--red);
}

/* ---- texture: telemetry graph paper ----------------------- */
.grid-paper{position:relative}
.grid-paper::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:.35;
}
.on-dark.grid-paper::before{
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  opacity:.22;
}

/* ---- texture: the checkered seam (from the logo) ---------- */
.checker{
  height:36px;
  background-image:conic-gradient(var(--ink) 25%, transparent 0 50%, var(--ink) 0 75%, transparent 0);
  background-size:36px 36px;
}
.checker.on-red{
  background-image:conic-gradient(var(--ink) 25%, var(--red) 0 50%, var(--ink) 0 75%, var(--red) 0);
}

/* ---- buttons ---------------------------------------------- */
.btn{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  padding:16px 28px;
  border-radius:var(--cut);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform var(--t-ui) var(--ease), background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#c40328}
.btn-ghost{border-color:var(--line-dark);color:var(--paper)}
.btn-ghost:hover{border-color:var(--paper)}
.btn-ghost-ink{border-color:var(--line);color:var(--ink)}
.btn-ghost-ink:hover{border-color:var(--ink)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--ink-600)}

/* ---- header ------------------------------------------------ */
header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--pad);
  transition:padding var(--t-ui) var(--ease), background-color var(--t-ui) var(--ease);
}
header.scrolled,header.solid{
  padding:8px var(--pad);
  background:rgba(11,11,18,.9);
  backdrop-filter:blur(10px);
}
.logo-tab{line-height:0}
.logo-tab img{
  height:60px;width:auto;
  border-radius:var(--cut-r);           /* the speed-cut, on the plate itself */
  transition:height var(--t-ui) var(--ease);
}
header.scrolled .logo-tab img{height:44px}
@media (max-width:860px){ .logo-tab img{height:48px} }
nav{display:flex;align-items:center;gap:28px}
nav a.navlink{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--paper);
  opacity:.85;transition:opacity var(--t-ui) var(--ease);
}
nav a.navlink:hover,nav a.navlink[aria-current="page"]{opacity:1}
nav a.navlink[aria-current="page"]{border-bottom:2px solid var(--red);padding-bottom:2px}
nav .btn{padding:11px 20px}
@media (max-width:860px){ nav a.navlink{display:none} }

/* ---- hero (home: video · subpages: wedge) ------------------- */
.hero{
  background:var(--ink);
  color:var(--paper);
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--pad) + 80px) var(--pad) 0;
  position:relative;overflow:hidden;
}
@supports not (min-height:100svh){ .hero{min-height:100vh} }
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{           /* legibility scrim — lighting, not decoration */
  content:"";position:absolute;inset:0;
  background:linear-gradient(78deg, rgba(11,11,18,.95) 0 36%, rgba(11,11,18,.62) 62%, rgba(11,11,18,.28) 100%);
}
.hero-media ~ .hero-inner p.lead{color:var(--paper)}   /* grey lead fails over bright video frames */
.hero .wedge{
  position:absolute;top:0;right:-12%;width:38%;height:100%;
  background:var(--red);
  transform:skewX(-14deg);
  transform-origin:top;
  opacity:.96;
}
.hero .wedge::after{
  content:"";position:absolute;left:-64px;top:0;bottom:0;width:20px;
  background:var(--red);
}
@media (max-width:860px){
  .hero .wedge{right:-58%;width:62%}
  .hero .wedge::after{display:none}
  .hero p.lead{color:var(--paper)}
}
.hero-inner{position:relative;z-index:2;max-width:1280px}
.hero h1{
  font-size:clamp(52px, 10.5vw, 152px);
  margin:16px 0 24px;
}
.hero h1 .w{
  display:inline-block;
  transform:translateY(.35em) scale(.94);
  opacity:0;
  transition:transform var(--t-world) var(--ease), opacity var(--t-world) var(--ease);
}
body.loaded .hero h1 .w{transform:none;opacity:1}
.hero p.lead{
  max-width:520px;color:var(--grey-400);
  font-size:17px;margin-bottom:34px;
}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:52px}
.hero.short{min-height:64svh}
@supports not (min-height:64svh){ .hero.short{min-height:64vh} }

/* plate strip */
.plate-strip{
  position:relative;z-index:2;
  display:flex;justify-content:space-between;gap:24px;
  border-top:1px solid var(--line-dark);
  padding:16px 24px 20px;
  margin:0 calc(var(--pad) * -1);
  background:var(--ink);
  color:var(--grey-400);
}
.plate-strip span{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.plate-strip .rpm{color:var(--paper)}
.plate-strip .rpm em{font-style:normal;color:var(--red)}
@media (max-width:860px){ .plate-strip span:nth-child(3){display:none} }

/* ---- scrub signature (home) --------------------------------- */
.scrub-sec{height:220vh;position:relative}
.scrub-sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
}
@supports not (height:100svh){ .scrub-sticky{height:100vh} }
.scrub-line{
  white-space:nowrap;
  font-size:clamp(90px, 17vw, 260px);
  will-change:transform;
}
.scrub-line .ghost{
  -webkit-text-stroke:1.5px var(--ink);
  color:transparent;
}
.scrub-caption{padding:0 var(--pad);margin-top:20px}

/* ---- sections ----------------------------------------------- */
section{padding:clamp(72px,10vw,140px) var(--pad)}
section.flush{padding:0}
.sec-head{max-width:1280px;margin:0 auto 56px}
.sec-head h2{font-size:clamp(40px,6vw,84px);margin-top:14px}
.wrap{max-width:1280px;margin:0 auto}
.on-dark{background:var(--ink);color:var(--paper)}

/* ---- service cards (home teaser) ------------------------------ */
.svc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  max-width:1280px;margin:0 auto;
}
@media (max-width:1000px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.svc-grid{grid-template-columns:1fr}}
.svc{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--cut);
  padding:26px 26px 22px;
  display:flex;flex-direction:column;gap:14px;
  text-decoration:none;
  transition:transform var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease);
}
.svc:hover{transform:translateY(-3px);border-color:var(--ink)}
.svc .num{color:var(--grey-500)}
.svc h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:26px;line-height:1;letter-spacing:.01em}
.svc p{font-size:15px;color:var(--grey-500);flex:1}
.svc .fact{
  border-top:1px solid var(--line);padding-top:12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}

/* ---- media bands (services page) ------------------------------ */
.band{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);
  max-width:1280px;margin:0 auto clamp(64px,8vw,110px);
  align-items:center;
}
.band.flip{direction:rtl}
.band > *{direction:ltr}
@media (max-width:900px){.band{grid-template-columns:1fr}.band.flip{direction:ltr}}
.band figure{
  border-radius:var(--cut);overflow:hidden;
  border:1px solid var(--line);
}
.band h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,4vw,52px);line-height:.95;margin:10px 0 16px}
.band p{color:var(--grey-500);max-width:52ch}
.band ul{list-style:none;margin:18px 0 22px}
.band li{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 0;border-top:1px solid var(--line);
}
.band li:last-child{border-bottom:1px solid var(--line)}
.band .fact{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  display:inline-block;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--cut);padding:10px 16px}

/* ---- the number ---------------------------------------------- */
.big-number{text-align:center;padding:clamp(90px,14vw,180px) var(--pad)}
.big-number .n{
  font-size:clamp(140px, 28vw, 420px);
  line-height:.85;
  display:block;
}
.big-number .n em{font-style:normal;color:var(--red)}
.big-number .starrow{
  display:block;color:var(--red);
  font-size:clamp(20px,3vw,34px);
  letter-spacing:.45em;text-indent:.45em;   /* re-centre the tracked row */
  margin-top:26px;
}
.big-number .mono{color:var(--grey-400);display:block;margin-top:22px}

/* ---- process steps -------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1280px;margin:0 auto}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{
  border:1px solid var(--line);
  border-radius:var(--cut);
  padding:26px;
  background:var(--paper);
}
.step .num{
  font-family:var(--font-display);font-size:56px;line-height:1;
  -webkit-text-stroke:1.5px var(--ink);color:transparent;
  display:block;margin-bottom:18px;
}
.step:last-child .num{-webkit-text-stroke:0;color:var(--red)}
.step h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:22px;margin-bottom:10px}
.step p{font-size:14.5px;color:var(--grey-500)}

/* ---- stats data-cards (about) ---------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1280px;margin:0 auto}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--cut);
  padding:22px;
  /* the card is light but sits inside .on-dark, which sets a near-white
     inherited colour — reset to ink here or the numbers vanish */
  color:var(--ink);
}
.stat .n{
  font-family:var(--font-display);font-size:clamp(44px,5vw,72px);line-height:1;display:block;
  color:var(--ink);
}
.stat .n .unit{color:var(--red)}
.stat .mono{color:var(--grey-500);display:block;margin-top:10px}

/* ---- brands marquee ------------------------------------------- */
.brands{overflow:hidden;padding:22px 0;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.brands .track{
  display:flex;gap:56px;width:max-content;
  animation:marquee 36s linear infinite;
}
.brands span{font-family:var(--font-mono);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey-400);white-space:nowrap}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---- reviews ---------------------------------------------------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1280px;margin:0 auto}
@media (max-width:1000px){.reviews{grid-template-columns:1fr}}
.review{
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--cut);padding:28px;
  display:flex;flex-direction:column;gap:18px;
}
.review p{font-size:15.5px}
.review .who{border-top:1px solid var(--line);padding-top:14px;display:flex;justify-content:space-between;align-items:baseline}
.review .who b{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.review .who span{font-family:var(--font-mono);font-size:11px;color:var(--grey-500)}

/* ---- forms (booking) -------------------------------------------- */
form.book-form{max-width:640px}
.field{margin-bottom:22px}
.field label{
  display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey-500);margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--font-body);font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--cut);
  padding:14px 16px;
  transition:border-color var(--t-ui) var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--red);outline-offset:1px;border-color:var(--red);
}
.field .err{
  display:none;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  color:var(--red);margin-top:6px;
}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--red)}
.field.invalid .err{display:block}
.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}   /* honeypot */
.form-note{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--grey-500);margin-top:14px}

/* ---- full service board (services page) ---------------------------- */
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 40px;max-width:1280px;margin:0 auto}
@media (max-width:1000px){.board{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.board{grid-template-columns:1fr}}
.board-col h3{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);font-weight:500;margin-bottom:12px;
}
.board-col ul{list-style:none}
.board-col li{font-size:14.5px;padding:8px 0;border-top:1px solid var(--line-dark)}
.board-col li:last-child{border-bottom:1px solid var(--line-dark)}

/* ---- FAQ ------------------------------------------------------------- */
.faq details{border-top:1px solid var(--line);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  padding:16px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq summary::after{content:"+";color:var(--red);font-size:18px}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--grey-500);max-width:64ch;padding:0 0 18px;font-size:15px}

/* ---- final CTA — the red wall ------------------------------------ */
.book{
  background:var(--red);color:#fff;
  text-align:center;
  padding:clamp(90px,12vw,170px) var(--pad);
}
.book h2{
  font-size:clamp(64px, 13vw, 200px);
  color:var(--ink);
  margin-bottom:22px;
}
.book p{max-width:520px;margin:0 auto 40px;font-size:17px}
.book .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.book .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.book .btn-ghost:hover{border-color:#fff}

/* ---- footer -------------------------------------------------------- */
footer{background:var(--ink);color:var(--paper);padding:clamp(56px,8vw,90px) var(--pad) 120px}
.foot-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;
  max-width:1280px;margin:0 auto;
}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
footer h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-400);margin-bottom:18px;font-weight:400}
footer ul{list-style:none}
footer li{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;line-height:2.2}
footer a{text-decoration:none;opacity:.9}
footer a:hover{opacity:1;text-decoration:underline}
.foot-mark{max-width:1280px;margin:64px auto 0;border-top:1px solid var(--line-dark);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-mark span{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-400)}

/* ---- mobile menu ------------------------------------------------------ */
.menu-btn{
  display:none;
  width:46px;height:46px;
  background:none;border:1px solid var(--line-dark);border-radius:var(--cut);
  cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.menu-btn span{
  display:block;width:20px;height:2px;background:var(--paper);
  transition:transform var(--t-ui) var(--ease), opacity var(--t-ui) var(--ease);
}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:860px){ .menu-btn{display:flex} }

.mobile-menu{
  position:fixed;inset:0;z-index:45;
  background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;gap:40px;
  padding:calc(var(--pad) + 70px) var(--pad) calc(var(--pad) + 80px);
}
.mobile-menu[hidden]{display:none}                       /* hidden attr must win over display:flex */
@media (min-width:861px){ .mobile-menu{display:none} }   /* never on desktop */
.mm-links{display:flex;flex-direction:column}
.mm-links a{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(38px, 10vw, 56px);line-height:1.15;
  color:var(--paper);text-decoration:none;
  padding:10px 0;border-top:1px solid var(--line-dark);
  transition:color var(--t-ui) var(--ease);
}
.mm-links a:last-child{border-bottom:1px solid var(--line-dark);color:var(--red)}
.mm-links a:active{color:var(--red)}
.mm-foot{text-align:center}
.mm-foot a{color:var(--grey-400);text-decoration:none}
body.menu-open .mobile-bar,
body.menu-open .wa-widget{display:none}

/* ---- Arabic accents -------------------------------------------------- */
[lang="ar"]{font-family:"IBM Plex Sans Arabic", var(--font-body)}

/* ---- WhatsApp widget ------------------------------------------------- */
.wa-widget{
  position:fixed;right:22px;bottom:22px;z-index:70;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
}
.wa-btn{
  width:58px;height:58px;border-radius:50%;border:none;   /* circles = interaction */
  background:var(--red);color:#fff;
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 8px 24px rgba(11,11,18,.35);
  transition:transform var(--t-ui) var(--ease), background-color var(--t-ui) var(--ease);
}
.wa-btn:hover{transform:translateY(-2px);background:#c40328}
.wa-card{
  width:300px;background:var(--ink);color:var(--paper);
  border:1px solid var(--line-dark);border-radius:var(--cut);overflow:hidden;
  box-shadow:0 18px 48px rgba(11,11,18,.45);
}
.wa-card-body{padding:20px}
.wa-card-body p{font-size:14.5px;margin:12px 0 16px}
.wa-card-body p.mono{margin:0;font-size:11px}
@media (max-width:860px){ .wa-widget{display:none} }   /* mobile funnel bar covers this job */

/* ---- mobile sticky funnel ------------------------------------------ */
.mobile-bar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  gap:10px;padding:12px 14px;
  background:rgba(11,11,18,.92);backdrop-filter:blur(10px);
  border-top:1px solid var(--line-dark);
}
.mobile-bar .btn{flex:1;text-align:center;padding:14px 10px}
@media (max-width:860px){ .mobile-bar{display:flex} }

/* ---- 404 ------------------------------------------------------------ */
.err-page{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:var(--pad);
}
@supports not (min-height:100svh){ .err-page{min-height:100vh} }
.err-page .code{font-size:clamp(120px,30vw,360px);line-height:.85}
.err-page .code em{font-style:normal;color:var(--red)}

/* ---- reveals -------------------------------------------------------- */
.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity var(--t-world) var(--ease), transform var(--t-world) var(--ease);
}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.hero h1 .w{opacity:1!important;transform:none!important}
  [data-wipe]{background-image:none!important;color:var(--ink)!important}
  .on-dark [data-wipe]{color:var(--paper)!important}
  .grade{filter:none!important}
  .rev-line{display:none}
  html{scroll-behavior:auto}
}