/* ══════════════════════════════════════════════════════════════
   WILD DAD OUTDOOR — Sur-Ron electric off-road, Malaysia
   Palette sampled from the brand's own photographs:
     amber   hue ~45°  — Sur-Ron dealership signage + Ultra Bee graphics
     laterite hue ~24° — the Malaysian dirt they actually ride
     ink              — forest canopy shadow (faint green cast)
   Chamfer motif       — the cut corners of the Sur-Ron wordmark
   ══════════════════════════════════════════════════════════════ */

/* ── tokens ─────────────────────────────────────────────── */
:root{
  --ink:#0A0B09;
  --ink-2:#101210;
  --ink-3:#171A16;
  --ink-4:#23271F;

  --amber:#F4C025;
  --amber-hi:#FFD84D;
  --amber-dim:#8A6D14;

  --laterite:#B4501F;
  --laterite-hi:#D9682E;

  --bone:#EDE7DA;
  --ash:#95938A;          /* 6.4:1 on --ink */
  --ash-dim:#87857D;      /* >=4.5:1 on ink AND on the lighter ink-3 cards it sits on */

  --hh:74px;
  --pad:clamp(20px,5vw,64px);
  --max:1280px;
  --chamf:14px;

  --ff-d:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff-m:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --e:cubic-bezier(.2,.7,.2,1);
  --e-out:cubic-bezier(.16,1,.3,1);
}
@media (max-width:760px){ :root{ --hh:60px; --chamf:10px; } }

/* ── reset ──────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:var(--ff-d); font-optical-sizing:auto;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,p,figure,blockquote,dl,dd{ 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; cursor:pointer; }
.sprite{ display:none; }
.ic{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2;
     stroke-linecap:round; stroke-linejoin:round; flex:none; }

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

.skip{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--amber); color:var(--ink); font-weight:700;
  padding-block:10px; padding-inline:16px; transition:top .2s;
}
.skip:focus{ top:12px; }

/* chamfer — the signature shape, from the Sur-Ron wordmark's cut corners */
.chamf,.btn,.tile,.step,.spec__i,.ct__r a{
  clip-path:polygon(0 0, calc(100% - var(--chamf)) 0, 100% var(--chamf),
                    100% 100%, var(--chamf) 100%, 0 calc(100% - var(--chamf)));
}

/* ── type scale ─────────────────────────────────────────── */
.h2{
  font-size:clamp(2rem,5.2vw,3.9rem); line-height:.94; letter-spacing:-.02em;
  font-variation-settings:'wdth' 112,'wght' 800; text-transform:uppercase;
  display:flex; gap:.5em; align-items:flex-start;
}
.h2__n{
  font-family:var(--ff-m); font-size:.26em; font-weight:700; letter-spacing:.1em;
  color:var(--amber); padding-top:.5em; flex:none;
}
.h2--light{ color:var(--bone); }

.eyebrow{
  font-family:var(--ff-m); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--amber); display:flex; align-items:center; gap:.7em;
}
.eyebrow__dot{
  width:6px; height:6px; background:var(--amber); flex:none;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}

/* ── buttons ────────────────────────────────────────────── */
.btn{
  --chamf:11px;
  display:inline-flex; align-items:center; gap:.6em;
  padding-block:15px; padding-inline:24px;
  font-size:.86rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  font-variation-settings:'wdth' 105;
  position:relative; isolation:isolate; transition:color .25s var(--e), transform .25s var(--e);
  will-change:transform;
}
.btn .ic{ width:1.05em; height:1.05em; transition:transform .3s var(--e); }
.btn::before{ content:''; position:absolute; inset:0; z-index:-1; transition:transform .35s var(--e); }
.btn:hover .ic{ transform:translateX(3px); }
.btn--sm{ padding-block:11px; padding-inline:17px; font-size:.75rem; }
.btn--big{ padding-block:19px; padding-inline:32px; font-size:.95rem; }

.btn--amber{ color:var(--ink); }
.btn--amber::before{ background:var(--amber); }
.btn--amber:hover{ color:var(--ink); }
.btn--amber:hover::before{ background:var(--amber-hi); transform:scale(1.04); }

.btn--ghost{ color:var(--bone); box-shadow:inset 0 0 0 1.5px rgba(237,231,218,.32); }
.btn--ghost::before{ background:var(--bone); transform:scaleY(0); transform-origin:bottom; }
.btn--ghost:hover{ color:var(--ink); }
.btn--ghost:hover::before{ transform:scaleY(1); }

/* ══ HEADER ═════════════════════════════════════════════ */
.hdr{
  position:sticky; top:0; z-index:90; height:var(--hh);
  display:flex; align-items:center;
  transition:background .4s var(--e), box-shadow .4s var(--e), backdrop-filter .4s;
}
.hdr.is-stuck{
  background:rgba(10,11,9,.82); backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 rgba(237,231,218,.09);
}
.hdr__in{
  width:100%; max-width:var(--max); margin-inline:auto;
  padding-inline:var(--pad); display:flex; align-items:center; gap:28px;
}
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand__mark{ width:30px; height:30px; color:var(--amber); flex:none; }
.brand__mark svg{ width:100%; height:100%; fill:none; stroke:currentColor;
                  stroke-width:2.1; stroke-linejoin:round; }
.brand__txt{
  font-size:.98rem; font-weight:800; letter-spacing:-.01em; line-height:1;
  font-variation-settings:'wdth' 108,'wght' 800; text-transform:uppercase;
}
.brand__txt em{ font-style:normal; color:var(--amber); display:block;
                font-size:.66em; letter-spacing:.16em; font-variation-settings:'wght' 600; }

.nav{ display:flex; gap:4px; }
.nav__l{
  font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding-block:8px; padding-inline:12px; color:var(--ash); position:relative;
  transition:color .25s var(--e);
}
.nav__l::after{
  content:''; position:absolute; left:12px; right:12px; bottom:2px; height:1.5px;
  background:var(--amber); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--e);
}
.nav__l:hover{ color:var(--bone); }
.nav__l:hover::after,.nav__l.is-on::after{ transform:scaleX(1); }
.nav__l.is-on{ color:var(--bone); }

.burger{ display:none; font-size:1.4rem; padding:6px; color:var(--bone); }

/* ══ 1 · HERO ═══════════════════════════════════════════ */
.hero{
  position:relative; min-height:calc(100svh - var(--hh));
  margin-top:calc(var(--hh) * -1); padding-top:var(--hh);
  display:flex; flex-direction:column; justify-content:center;
  padding-inline:var(--pad); overflow:hidden;
}
.hero__media{ position:absolute; inset:-8% 0 -8%; z-index:-3; will-change:transform; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:58% 62%; }
.hero__scrim{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(to top, var(--ink) 1%, rgba(10,11,9,.62) 26%, rgba(10,11,9,.22) 58%, rgba(10,11,9,.72) 100%),
    linear-gradient(100deg, rgba(10,11,9,.94) 0 26%, rgba(10,11,9,.66) 50%, rgba(10,11,9,.12) 82%);
}
.hero__grain{
  position:absolute; inset:0; z-index:-1; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.hero__in{ width:100%; max-width:var(--max); margin-inline:auto; padding-block:40px 0; }

.hero__h1{
  font-size:clamp(2.9rem,8.4vw,7.2rem); line-height:.86; letter-spacing:-.035em;
  text-transform:uppercase; font-variation-settings:'wdth' 112,'wght' 900;
  margin-block:.2em .16em;
}
/* .hln, not .line — the lineup section owns .line and would set height:460vh here */
.hero__h1 .hln{ display:block; overflow:hidden; }
.hero__h1 .w{ display:inline-block; }
/* amber only on the final line ("Outdoor") — :last-child alone also caught "Dad" */
.hero__h1 .hln:last-child .w{ color:var(--amber); }

.hero__tag{ display:flex; align-items:center; gap:14px; margin-bottom:1.1em; }
.hero__tag span{
  font-family:var(--ff-m); font-size:clamp(.72rem,1.5vw,.92rem);
  letter-spacing:.34em; text-transform:uppercase; color:var(--ink);
  background:var(--amber); padding-block:7px; padding-inline:14px; font-weight:700;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.hero__lede{
  max-width:38ch; font-size:clamp(1rem,1.55vw,1.2rem); line-height:1.5;
  color:var(--bone); opacity:.92; margin-bottom:2em; text-wrap:pretty;
}
.hero__act{ display:flex; flex-wrap:wrap; gap:12px; }

.hero__cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--ash); font-size:1rem; z-index:2;
}
.hero__cue-l{ width:1px; height:38px; background:linear-gradient(var(--amber),transparent); }
.hero__cue .ic{ animation:bob 2.4s var(--e) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.5 } 50%{ transform:translateY(5px); opacity:1 } }

/* ══ 2 · TICKER ═════════════════════════════════════════ */
.tick{
  border-block:1px solid rgba(237,231,218,.12);
  background:var(--ink-2); overflow:hidden; padding-block:16px;
}
/* Seamless loop: the track scrolls left by EXACTLY one row's width (--unit, set in
   px by JS) and JS clones enough rows to always span unit + viewport. Animating a
   row by -100% instead only works when one row is wider than the screen — ours is
   1257px, so anything above that left a visible gap at the loop point. */
.tick__track{ display:flex; width:max-content; }
.tick__track.is-rolling{ animation:roll var(--dur,30s) linear infinite; }
.tick__row{ display:flex; align-items:center; }
.tick__i{
  display:inline-flex; align-items:baseline; gap:.6em;
  padding-inline:2.2rem; white-space:nowrap; position:relative;
}
.tick__i::after{
  content:''; position:absolute; right:0; top:50%; transform:translateY(-50%) rotate(18deg);
  width:1px; height:14px; background:rgba(237,231,218,.24);
}
.tick__i b{
  font-size:1rem; font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  font-variation-settings:'wdth' 108,'wght' 800;
}
.tick__i i{ font-family:var(--ff-m); font-style:normal; font-size:.82rem; color:var(--amber); }
.tick__i--x b{ color:var(--ash); }
.tick__i--x i{ color:var(--laterite-hi); }
@keyframes roll{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(calc(-1 * var(--unit,100%)),0,0); }
}

/* ══ 3 · LINEUP (pinned) ════════════════════════════════ */
.line{ position:relative; height:460vh; background:var(--ink); }
.line__pin{
  position:sticky; top:var(--hh); height:calc(100svh - var(--hh));
  display:grid; align-content:center;
  grid-template-columns:170px minmax(0,1fr) minmax(280px,25.5rem);
  grid-template-areas:'hd hd hd' 'rail stage pane';
  gap:clamp(10px,2vw,34px) clamp(14px,2.4vw,40px);
  max-width:var(--max); margin-inline:auto; padding-inline:var(--pad);
  padding-block:clamp(12px,3vh,30px); overflow:hidden;
}
.line__hd{ grid-area:hd; display:flex; align-items:baseline; gap:20px; flex-wrap:wrap; }
.line__sub{ font-family:var(--ff-m); font-size:.76rem; color:var(--ash); letter-spacing:.06em; }

.line__rail{ grid-area:rail; display:flex; flex-direction:column; gap:2px; align-self:center; }
.rail__b{
  display:flex; align-items:center; gap:10px; width:100%;
  padding-block:11px; padding-inline:12px; text-align:left;
  border-left:2px solid rgba(237,231,218,.13);
  color:var(--ash-dim); transition:color .3s var(--e), border-color .3s var(--e), background .3s var(--e);
}
/* no opacity here: it dragged --ash-dim down to an effective #6E6D66 (3.79:1) and
   failed AA even though the token itself passes */
.rail__n{ font-family:var(--ff-m); font-size:.66rem; }
.rail__t{
  font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  font-variation-settings:'wdth' 100,'wght' 700; white-space:nowrap;
}
.rail__b:hover{ color:var(--ash); }
.rail__b.is-on{
  color:var(--bone); border-left-color:var(--amber);
  background:linear-gradient(to right, rgba(244,192,37,.11), transparent 85%);
}
.rail__b.is-on .rail__n{ color:var(--amber); }

.line__stage{ grid-area:stage; position:relative; display:grid; place-items:center; min-height:0; height:100%; }
.line__glow{
  position:absolute; left:50%; top:56%; transform:translate(-50%,-50%);
  width:105%; aspect-ratio:1.5/1;
  background:radial-gradient(ellipse at center,
    rgba(244,192,37,.30) 0%, rgba(180,80,31,.13) 38%, transparent 70%);
  filter:blur(22px); pointer-events:none;
  transition:opacity .5s var(--e);
}
/* sized to sit INSIDE the stage — at 13vw it overflowed into the rail and read as
   stray outline fragments instead of a word */
.line__ghost{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  font-size:clamp(2.6rem,6.4vw,5.4rem); font-variation-settings:'wdth' 118,'wght' 900;
  letter-spacing:-.03em; text-transform:uppercase; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1.5px rgba(237,231,218,.14);
  pointer-events:none; user-select:none; z-index:0; max-width:100%;
}
.bike{
  grid-area:1/1; position:relative; z-index:1;
  max-width:min(100%,34rem); width:100%;
  opacity:0; transform:translateX(9%) scale(.92); pointer-events:none;
  transition:opacity .55s var(--e), transform .7s var(--e-out);
  will-change:opacity,transform;
}
.bike img{
  width:100%; height:auto; max-height:clamp(210px,44vh,430px); object-fit:contain;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.7));
}
.bike.is-on{ opacity:1; transform:none; }
.bike.is-prev{ opacity:0; transform:translateX(-9%) scale(.92); }

.line__pane{ grid-area:pane; align-self:center; }
.line__tagx{
  font-family:var(--ff-m); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink); background:var(--amber); display:inline-block;
  padding-block:4px; padding-inline:9px; font-weight:700; margin-bottom:.9em;
}
.line__name{
  font-size:clamp(1.7rem,3.3vw,2.7rem); line-height:.95; letter-spacing:-.025em;
  text-transform:uppercase; font-variation-settings:'wdth' 112,'wght' 800;
  margin-bottom:.35em;
}
.line__blurb{ color:var(--ash); font-size:.94rem; line-height:1.45; margin-bottom:1.5em; max-width:28ch; }

.spec{ display:flex; flex-direction:column; gap:7px; margin-bottom:1.5em; }
.spec__i{
  --chamf:8px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--ink-3); padding-block:12px; padding-inline:15px;
}
.spec__i dt{
  display:flex; align-items:center; gap:.55em; color:var(--ash);
  font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; font-weight:600;
}
.spec__i dt .ic{ width:.95em; height:.95em; color:var(--amber); }
.spec__i dd{ display:flex; align-items:baseline; gap:.24em; }
.spec__i dd .num{
  font-family:var(--ff-m); font-size:1.4rem; font-weight:700; color:var(--bone);
  font-variant-numeric:tabular-nums;
}
.spec__i dd i{ font-style:normal; font-size:.74rem; color:var(--ash); }

.line__foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.price{ display:flex; flex-direction:column; gap:1px; }
.price__k{ font-family:var(--ff-m); font-size:.64rem; letter-spacing:.16em;
           text-transform:uppercase; color:var(--ash-dim); }
.price__v{
  font-size:1.5rem; font-weight:800; letter-spacing:-.02em; color:var(--amber);
  font-variation-settings:'wdth' 105,'wght' 800; font-variant-numeric:tabular-nums;
}
.line__bar{ margin-top:1.4em; height:2px; background:rgba(237,231,218,.12); overflow:hidden; }
.line__bar span{ display:block; height:100%; width:25%; background:var(--amber);
                 transition:transform .4s var(--e); transform-origin:left; }

/* ══ 4 · STORY ══════════════════════════════════════════ */
.story{ padding-block:clamp(90px,13vw,170px); padding-inline:var(--pad);
        background:linear-gradient(var(--ink),var(--ink-2)); overflow:hidden; }
.story__wrap{
  max-width:var(--max); margin-inline:auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,80px);
  align-items:center;
}
.story__imgs{ position:relative; padding-bottom:16%; }
.story__a{ position:relative; width:88%; }
.story__a img{ width:100%; }
.story__a figcaption{
  position:absolute; left:0; bottom:-30px;
  font-family:var(--ff-m); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ash-dim);
  border-left:2px solid var(--laterite); padding-left:9px;
}
.story__b{
  position:absolute; right:0; bottom:0; width:46%;
  box-shadow:0 24px 60px rgba(0,0,0,.6); outline:6px solid var(--ink-2);
}
.pull{ margin-block:1.4em; border-left:2px solid var(--amber); padding-left:20px; }
.pull p{
  font-size:clamp(1.15rem,2.1vw,1.6rem); line-height:1.28; letter-spacing:-.015em;
  font-variation-settings:'wdth' 100,'wght' 600; text-wrap:balance;
}
.story__p p{ color:var(--ash); line-height:1.62; font-size:.98rem; max-width:44ch; }
.story__p p + p{ margin-top:.85em; }

.creed{ display:flex; gap:8px; margin-top:2em; flex-wrap:wrap; }
.creed li{
  flex:1 1 8rem; display:flex; flex-direction:column; gap:5px;
  border-top:1.5px solid rgba(237,231,218,.16); padding-top:13px;
}
.creed .ic{ width:1.1rem; height:1.1rem; color:var(--amber); margin-bottom:3px; }
.creed b{ font-size:.9rem; text-transform:uppercase; letter-spacing:.04em;
          font-variation-settings:'wdth' 105,'wght' 700; }
.creed span{ font-size:.76rem; color:var(--ash-dim); line-height:1.35; }

/* ══ 5 · TEST RIDE ══════════════════════════════════════ */
.tr{ position:relative; padding-block:clamp(90px,13vw,160px); padding-inline:var(--pad); overflow:hidden; }
.tr__media{ position:absolute; inset:0; z-index:-2; }
.tr__media img{ width:100%; height:100%; object-fit:cover; object-position:60% 60%; }
.tr__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(105deg, var(--ink) 0 34%, rgba(10,11,9,.88) 48%, rgba(10,11,9,.62) 68%, rgba(10,11,9,.8) 100%),
    linear-gradient(to bottom, var(--ink-2), transparent 22%, transparent 78%, var(--ink));
}
.tr__in{ max-width:var(--max); margin-inline:auto; }
.tr__hd{ margin-bottom:clamp(34px,5vw,60px); }
.tr__sub{ margin-top:1em; color:var(--ash); font-size:1rem; max-width:36ch; text-wrap:pretty; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:clamp(30px,4vw,48px); max-width:60rem; }
.step{
  background:rgba(23,26,22,.78); backdrop-filter:blur(6px);
  padding-block:24px; padding-inline:22px; position:relative;
  border-top:1.5px solid rgba(244,192,37,.35);
  transition:background .35s var(--e), transform .35s var(--e);
}
.step:hover{ background:rgba(35,39,31,.9); transform:translateY(-3px); }
.step__n{
  font-family:var(--ff-m); font-size:.66rem; color:var(--amber); letter-spacing:.14em;
  position:absolute; top:18px; right:20px;
}
.step__i{ width:1.5rem; height:1.5rem; color:var(--amber); margin-bottom:14px; }
.step h3{ font-size:1.06rem; text-transform:uppercase; letter-spacing:-.005em;
          font-variation-settings:'wdth' 108,'wght' 800; margin-bottom:6px; }
.step p{ color:var(--ash); font-size:.86rem; line-height:1.45; }

/* ══ 6 · TRAILS ═════════════════════════════════════════ */
.tg{ padding-block:clamp(90px,13vw,160px); padding-inline:var(--pad); background:var(--ink-2); }
.tg__hd{ max-width:var(--max); margin-inline:auto; margin-bottom:clamp(28px,4vw,46px);
         display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.tg__sub{ font-family:var(--ff-m); font-size:.78rem; color:var(--ash); letter-spacing:.05em; }
.tg__grid{
  max-width:var(--max); margin-inline:auto;
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:15.5rem; gap:10px;
}
.tile{ position:relative; overflow:hidden; background:var(--ink-3); display:block; }
.tile--tall{ grid-row:span 2; }
.tile--wide{ grid-column:span 2; }
.tile img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--e), filter .5s var(--e);
  filter:saturate(.85) contrast(1.05);
}
.tile::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,11,9,.9) 0%, rgba(10,11,9,.15) 45%, transparent 70%);
  transition:opacity .45s var(--e);
}
.tile:hover img{ transform:scale(1.07); filter:saturate(1.05) contrast(1.05); }
.tile:hover::after{ opacity:.72; }
.tile__cap{
  position:absolute; left:16px; right:16px; bottom:14px; z-index:2;
  display:flex; flex-direction:column; gap:2px; text-align:left;
  transform:translateY(4px); transition:transform .4s var(--e);
}
.tile:hover .tile__cap{ transform:none; }
.tile__cap i{
  font-family:var(--ff-m); font-style:normal; font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--amber);
}
.tile__cap b{ font-size:1rem; font-variation-settings:'wdth' 108,'wght' 700;
              text-transform:uppercase; letter-spacing:.01em; }

/* ══ 7 · NUMBERS ════════════════════════════════════════ */
.nb{ border-block:1px solid rgba(237,231,218,.12); background:var(--ink); }
.nb__in{
  max-width:var(--max); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr);
}
.nb__i{ padding-block:clamp(40px,6vw,68px); padding-inline:0; text-align:center; position:relative; }
.nb__i + .nb__i::before{
  content:''; position:absolute; left:0; top:22%; bottom:22%; width:1px;
  background:rgba(237,231,218,.14);
}
.nb__v{ display:flex; align-items:baseline; justify-content:center; gap:.04em; }
.nb__v .num{
  font-size:clamp(2.6rem,7vw,5rem); line-height:1; letter-spacing:-.045em;
  font-variation-settings:'wdth' 118,'wght' 900; font-variant-numeric:tabular-nums;
}
.nb__v i{ font-style:normal; font-size:clamp(1.4rem,3.2vw,2.2rem); color:var(--amber);
          font-variation-settings:'wdth' 110,'wght' 800; }
.nb__k{ margin-top:.7em; font-family:var(--ff-m); font-size:.72rem; letter-spacing:.12em;
        text-transform:uppercase; color:var(--ash); }

/* ══ 8 · CONTACT ════════════════════════════════════════ */
.ct{ padding-block:clamp(90px,13vw,160px); padding-inline:var(--pad);
     background:linear-gradient(var(--ink),var(--ink-2)); }
.ct__in{ max-width:var(--max); margin-inline:auto;
         display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); align-items:center; }
.ct__lede{ margin-block:1.1em 2em; color:var(--ash); font-size:1.05rem; }
.ct__r{ display:flex; flex-direction:column; gap:8px; }
.ct__r a{
  --chamf:10px;
  display:flex; align-items:center; gap:14px; background:var(--ink-3);
  padding-block:19px; padding-inline:20px;
  transition:background .3s var(--e), transform .3s var(--e);
}
.ct__r a > .ic:first-child{ width:1.15rem; height:1.15rem; color:var(--amber); }
.ct__r span{ display:flex; flex-direction:column; gap:2px; margin-right:auto; }
.ct__r i{ font-family:var(--ff-m); font-style:normal; font-size:.62rem; letter-spacing:.16em;
          text-transform:uppercase; color:var(--ash-dim); }
.ct__r b{ font-size:.98rem; font-variation-settings:'wdth' 102,'wght' 600; }
.ct__go{ width:1rem; height:1rem; color:var(--ash-dim); transition:transform .3s var(--e), color .3s var(--e); }
.ct__r a:hover{ background:var(--ink-4); transform:translateX(4px); }
.ct__r a:hover .ct__go{ transform:translateX(3px); color:var(--amber); }
/* ink-4 is the lightest surface here: ash-dim would drop to 4.11:1 on hover, so the
   label steps up to --ash (4.94:1) and keeps AA in every state */
.ct__r a:hover i{ color:var(--ash); }

/* ══ FOOTER ═════════════════════════════════════════════ */
.ft{ border-top:1px solid rgba(237,231,218,.12); background:var(--ink);
     padding-block:44px 34px; padding-inline:var(--pad); }
.ft__in{ max-width:var(--max); margin-inline:auto; display:grid; gap:18px;
         grid-template-columns:auto 1fr; align-items:center; }
.brand--ft{ margin-right:0; }
.ft__nav{ display:flex; gap:20px; flex-wrap:wrap; justify-content:flex-end; }
.ft__nav a{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
            color:var(--ash); transition:color .25s var(--e); }
.ft__nav a:hover{ color:var(--amber); }
.ft__legal{ grid-column:1/-1; font-size:.75rem; color:var(--ash-dim);
            border-top:1px solid rgba(237,231,218,.09); padding-top:18px; }
.ft__sig{ grid-column:1/-1; font-family:var(--ff-m); font-size:.74rem; color:var(--ash); margin-top:-8px; }
.ft__sig a{ color:var(--amber); border-bottom:1px solid rgba(244,192,37,.4); }
.ft__sig a:hover{ color:var(--amber-hi); }

/* ══ WHATSAPP FLOAT ═════════════════════════════════════ */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:95;
  width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
  display:grid; place-items:center; font-size:1.6rem;
  box-shadow:0 10px 28px rgba(37,211,102,.36); transition:transform .3s var(--e);
}
.wa .ic{ stroke:none; fill:currentColor; position:relative; z-index:1; }
.wa:hover{ transform:scale(1.09); }
.wa__pulse{
  position:absolute; inset:0; border-radius:50%; background:#25D366;
  animation:pulse 2.6s var(--e) infinite; z-index:0;
}
@keyframes pulse{ 0%{ transform:scale(1); opacity:.55 } 70%,100%{ transform:scale(1.9); opacity:0 } }

/* ══ LIGHTBOX ═══════════════════════════════════════════ */
.lb{
  position:fixed; inset:0; z-index:120; background:rgba(6,7,6,.95);
  backdrop-filter:blur(8px); display:grid; place-items:center;
  grid-template-columns:auto 1fr auto; gap:10px; padding:clamp(14px,4vw,46px);
  opacity:0; transition:opacity .3s var(--e);
}
.lb[hidden]{ display:none; }
.lb.is-on{ opacity:1; }
.lb__fig{ grid-column:2; display:flex; flex-direction:column; gap:14px;
          align-items:center; max-height:100%; min-width:0; }
.lb__fig img{
  max-width:100%; max-height:78svh; object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
}
.lb__fig figcaption{ font-family:var(--ff-m); font-size:.76rem; letter-spacing:.12em;
                     text-transform:uppercase; color:var(--ash); text-align:center; }
.lb__x{ position:absolute; top:clamp(12px,3vw,26px); right:clamp(12px,3vw,26px);
        font-size:1.5rem; color:var(--bone); padding:10px; }
.lb__p,.lb__n{ font-size:1.9rem; color:var(--bone); padding:12px; opacity:.6;
               transition:opacity .25s var(--e), transform .25s var(--e); }
.lb__p{ grid-column:1; } .lb__n{ grid-column:3; }
.lb__p:hover,.lb__n:hover{ opacity:1; }
.lb__p:hover{ transform:translateX(-3px); } .lb__n:hover{ transform:translateX(3px); }
body.lb-open{ overflow:hidden; }

/* ══ SCROLL ANIMATION ═══════════════════════════════════ */
.js [data-reveal]{ opacity:0; transform:translateY(26px); }
.js [data-reveal].is-in{
  opacity:1; transform:none;
  transition:opacity .75s var(--e-out), transform .75s var(--e-out);
  transition-delay:calc(var(--d,0) * 110ms);
}
.js [data-rise]{ opacity:0; transform:translateY(18px); }
.js [data-rise].is-in{
  opacity:1; transform:none;
  transition:opacity .8s var(--e-out) calc(var(--d,0) * 110ms + 180ms),
             transform .8s var(--e-out) calc(var(--d,0) * 110ms + 180ms);
}
.js .hero__h1 .w{ transform:translateY(105%); }
.js .hero__h1.is-in .w{
  transform:none;
  transition:transform 1s var(--e-out);
  transition-delay:calc(var(--i,0) * 90ms);
}

/* ══ RESPONSIVE ═════════════════════════════════════════ */
@media (max-width:1100px){
  .line__pin{ grid-template-columns:140px minmax(0,1fr) minmax(250px,20rem); }
  .rail__t{ font-size:.78rem; }
}
@media (max-width:900px){
  .story__wrap{ grid-template-columns:1fr; gap:56px; }
  .story__imgs{ order:2; padding-bottom:14%; }
  .ct__in{ grid-template-columns:1fr; }
  .tg__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:12.5rem; }
  .tile--wide{ grid-column:span 2; }
  .tile--tall{ grid-row:span 1; }
}
@media (max-width:760px){
  .nav{
    position:fixed; inset:var(--hh) 0 auto; flex-direction:column; gap:0;
    background:rgba(10,11,9,.97); backdrop-filter:blur(16px);
    padding-block:8px 18px; padding-inline:var(--pad);
    border-bottom:1px solid rgba(237,231,218,.12);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .3s var(--e), transform .3s var(--e);
  }
  .nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav__l{ padding-block:14px; font-size:1rem; border-bottom:1px solid rgba(237,231,218,.07); }
  .nav__l::after{ display:none; }
  .burger{ display:grid; place-items:center; }
  .hdr__cta{ display:none; }
  .hdr{ background:rgba(10,11,9,.72); backdrop-filter:blur(10px); }

  /* the pin is desktop-only — on mobile the lineup becomes an honest stack */
  .line{ height:auto; }
  .line__pin{
    position:static; height:auto; display:block;
    padding-block:clamp(70px,12vw,110px);
  }
  .line__hd{ margin-bottom:26px; }
  .line__rail{
    flex-direction:row; overflow-x:auto; gap:6px; margin-bottom:22px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .line__rail::-webkit-scrollbar{ display:none; }
  .rail__b{ border-left:0; border-bottom:2px solid rgba(237,231,218,.13); white-space:nowrap; width:auto; }
  .rail__b.is-on{ border-left:0; border-bottom-color:var(--amber);
                  background:linear-gradient(to top, rgba(244,192,37,.11), transparent 85%); }
  .line__stage{ height:auto; margin-bottom:24px; }
  .bike{ max-width:100%; }
  .bike img{ max-height:38svh; }
  .line__ghost{ font-size:23vw; }
  .steps{ grid-template-columns:1fr; }
  .nb__in{ grid-template-columns:1fr; }
  .nb__i + .nb__i::before{ left:12%; right:12%; top:0; bottom:auto; width:auto; height:1px; }
  .nb__i{ padding-block:34px; }
  .ft__in{ grid-template-columns:1fr; }
  .ft__nav{ justify-content:flex-start; }
  .tg__grid{ grid-auto-rows:11rem; }
  .lb{ grid-template-columns:1fr; }
  .lb__fig{ grid-column:1; grid-row:1; }
  .lb__p,.lb__n{ position:absolute; bottom:16px; grid-column:auto;
                 background:rgba(23,26,22,.85); border-radius:50%; }
  .lb__p{ left:26%; } .lb__n{ right:26%; }
  .wa{ right:14px; bottom:14px; width:52px; height:52px; }
}
@media (max-width:560px){
  .hero__lede{ max-width:100%; }
  .hero__act{ flex-direction:column; align-items:flex-start; }
  .hero__act .btn{ width:100%; justify-content:center; }
  /* the full eyebrow wraps and orphans "Malaysia" on a phone — tighten it */
  .eyebrow{ font-size:.64rem; letter-spacing:.16em; }
  .hero__cue{ display:none; }
  .tg__grid{ grid-template-columns:1fr; grid-auto-rows:13rem; }
  .tile--wide{ grid-column:span 1; }
  .story__b{ width:52%; }
  .creed li{ flex-basis:100%; }
  .line__foot{ flex-direction:column; align-items:stretch; }
  .line__foot .btn{ justify-content:center; }
}

/* ══ 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; scroll-behavior:auto !important;
  }
  .js [data-reveal],.js [data-rise],.js .hero__h1 .w{ opacity:1; transform:none; }
  .tick__track.is-rolling{ animation:none; }
  .wa__pulse{ display:none; }
  .hero__cue .ic{ animation:none; }
  .hero__media{ transform:none !important; inset:0; }
  /* unpin: the pinned stage depends on scroll motion, so fall back to a stack */
  .line{ height:auto; }
  .line__pin{ position:static; height:auto; display:block; padding-block:110px; }
  .line__rail{ flex-direction:row; flex-wrap:wrap; margin-bottom:22px; }
  .rail__b{ border-left:0; border-bottom:2px solid rgba(237,231,218,.13); width:auto; }
  .line__stage{ height:auto; margin-bottom:24px; }
  .bike{ opacity:1; transform:none; }
  .bike:not(.is-on){ display:none; }
}

/* ══ NO-JS FALLBACK ═════════════════════════════════════ */
.no-js .line{ height:auto; }
.no-js .line__pin{ position:static; height:auto; display:block; padding-block:110px; }
.no-js .line__rail{ display:none; }
.no-js .line__stage{ height:auto; margin-bottom:24px; }
.no-js .bike{ opacity:1; transform:none; }
.no-js .bike:not([data-i="0"]){ display:none; }
.no-js .lb{ display:none; }
.no-js .tile{ cursor:default; }