/* ==========================================================================
   DDN TRUCKING LLC — Design System
   AMOLED black · crystal glassmorphism · liquid glass · gold accents
   ========================================================================== */

/* -------------------------------------------------- 1. Tokens */
:root{
  /* Surfaces — true AMOLED black base */
  --black:#000000;
  --ink-950:#030304;
  --ink-900:#060608;
  --ink-800:#0B0B0E;
  --ink-700:#111116;

  /* Lines & glass */
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.12);
  --line-gold:rgba(217,183,90,.28);
  --glass-1:rgba(255,255,255,.038);
  --glass-2:rgba(255,255,255,.065);
  --glass-3:rgba(255,255,255,.10);

  /* Type */
  --txt:#F4F5F7;
  --txt-dim:rgba(244,245,247,.64);           /* 7.7:1 on black */
  --txt-mute:rgba(244,245,247,.52);          /* 5.3:1 — small print, labels, legal copy */
  --txt-placeholder:rgba(244,245,247,.56);   /* 5.9:1 — form placeholders carry real hints */
  --txt-faint:rgba(244,245,247,.38);         /* decorative counters and timestamps only */

  /* Gold */
  /* Brand palette, from the DDN Trucking Gold Sweep kit */
  --gold-100:#FFFBEE;
  --gold-200:#FFF6D8;   /* Gold White  — highest highlight */
  --gold-300:#F2DC9B;   /* Gold Light */
  --gold-400:#D9B75A;   /* Gold        — primary */
  --gold-500:#C9A227;   /* Gold Mid    — glow */
  --gold-600:#6E4E14;   /* Gold Deep   — shadow */
  /* The logo's own sweep runs light -> deep -> light. This variant keeps the
     darkest stop at #A8811F so #120E02 button text still clears AA (5.3:1). */
  --gold-grad:linear-gradient(118deg,#FFF6D8 0%,#F2DC9B 24%,#D9B75A 52%,#A8811F 74%,#F2DC9B 100%);
  --gold-line:linear-gradient(90deg,transparent 0%,rgba(217,183,90,.10) 12%,rgba(242,220,155,.85) 50%,rgba(217,183,90,.10) 88%,transparent 100%);

  /* Effects */
  --shadow-deep:0 40px 80px -40px rgba(0,0,0,1);
  --shadow-card:0 30px 70px -34px rgba(0,0,0,.95);
  --glow-gold:0 0 34px -6px rgba(217,183,90,.42);
  --sheen:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.55);

  /* Geometry */
  --r-xl:28px; --r-lg:22px; --r-md:14px; --r-sm:9px; --r-pill:999px;
  --pad:clamp(20px,4.6vw,68px);
  --maxw:1300px;
  --nav-h:76px;

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.62,.02,.24,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  /* Fonts */
  --f-display:"Sora","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono","SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
}

/* -------------------------------------------------- 2. Reset */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--f-body);
  background:var(--black);
  color:var(--txt);
  font-size:16px;
  line-height:1.65;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}

img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:rgba(217,183,90,.30);color:#fff}

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

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2a2412,#5a4a15);border-radius:99px;border:2px solid #000}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#5a4a15,#8A6318)}
html{scrollbar-color:#4a3d12 #000;scrollbar-width:thin}

/* -------------------------------------------------- 3. Typography */
h1,h2,h3,h4,h5{font-family:var(--f-display);font-weight:600;line-height:1.06;letter-spacing:-.035em}
h1{font-size:clamp(2.5rem,6.2vw,5rem)}
h2{font-size:clamp(1.95rem,4.2vw,3.45rem)}
h3{font-size:clamp(1.22rem,1.9vw,1.58rem);letter-spacing:-.025em}
h4{font-size:1.05rem;letter-spacing:-.02em}
p{color:var(--txt-dim)}

.t-gold{
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.t-outline{
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px rgba(217,183,90,.5);
  color:transparent;
}
.lead{font-size:clamp(1.02rem,1.35vw,1.18rem);color:var(--txt-dim);max-width:62ch}
.mono{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}

/* -------------------------------------------------- 4. Layout */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{position:relative;padding-block:clamp(76px,10.5vw,155px)}
.section--tight{padding-block:clamp(54px,7vw,94px)}
.hr-gold{height:1px;background:var(--gold-line);border:0;opacity:.5}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{
  position:fixed;top:10px;left:10px;z-index:10001;transform:translateY(-160%);
  padding:12px 20px;border-radius:var(--r-pill);background:var(--gold-grad);color:#120E02;font-weight:600;
  transition:transform .3s var(--ease);
}
.skip:focus{transform:translateY(0)}

/* -------------------------------------------------- 5. Ambient background */
/* z-index:-1 keeps the whole ambient stack behind page content. At z-index:0 a
   fixed layer paints *above* static inline text, which would fog every headline. */
.fx{position:fixed;inset:0;pointer-events:none;z-index:-1}
.fx__grid{
  position:absolute;inset:-2px;
  background-image:
    linear-gradient(rgba(217,183,90,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(217,183,90,.055) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(125% 82% at 50% 0%,#000 0%,transparent 72%);
  mask-image:radial-gradient(125% 82% at 50% 0%,#000 0%,transparent 72%);
  opacity:.5;
}
.fx__aurora{position:absolute;inset:0;overflow:hidden;filter:blur(90px);opacity:.5}
.fx__blob{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.fx__blob--a{width:52vw;height:52vw;left:-14vw;top:-16vw;background:radial-gradient(circle,rgba(217,183,90,.30),transparent 66%);animation:drift-a 26s var(--ease-soft) infinite alternate}
.fx__blob--b{width:44vw;height:44vw;right:-10vw;top:6vh;background:radial-gradient(circle,rgba(150,120,40,.26),transparent 66%);animation:drift-b 32s var(--ease-soft) infinite alternate}
.fx__blob--c{width:60vw;height:38vw;left:22vw;bottom:-22vw;background:radial-gradient(circle,rgba(255,246,216,.10),transparent 68%);animation:drift-c 38s var(--ease-soft) infinite alternate}
@keyframes drift-a{to{transform:translate3d(9vw,7vh,0) scale(1.16)}}
@keyframes drift-b{to{transform:translate3d(-11vw,10vh,0) scale(1.1)}}
@keyframes drift-c{to{transform:translate3d(6vw,-8vh,0) scale(1.2)}}

.fx__noise{
  position:absolute;inset:-40px;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 16%{transform:translate(-3%,2%)} 33%{transform:translate(2%,-3%)}
  50%{transform:translate(-2%,-2%)} 66%{transform:translate(3%,1%)} 83%{transform:translate(-1%,3%)}
}
.fx__vignette{position:absolute;inset:0;background:radial-gradient(125% 92% at 50% 42%,transparent 38%,rgba(0,0,0,.88) 100%)}

/* -------------------------------------------------- 6. Cursor & progress */
.cursor{
  position:fixed;top:0;left:0;width:340px;height:340px;margin:-170px 0 0 -170px;
  border-radius:50%;pointer-events:none;z-index:2;opacity:0;
  background:radial-gradient(circle,rgba(217,183,90,.13),rgba(217,183,90,.045) 42%,transparent 68%);
  transition:opacity .5s var(--ease);will-change:transform;
}
.cursor.is-on{opacity:1}
.cursor-dot{
  position:fixed;top:0;left:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:var(--gold-300);box-shadow:0 0 14px rgba(242,220,155,.9);
  pointer-events:none;z-index:9998;opacity:0;
  transition:opacity .3s,width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),background .25s,border-color .25s;
  will-change:transform;
}
.cursor-dot.is-on{opacity:.95}
.cursor-dot.is-hot{width:38px;height:38px;margin:-19px 0 0 -19px;background:rgba(242,220,155,.14);border:1px solid rgba(242,220,155,.6);box-shadow:none}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}

.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:9997;transform-origin:0 50%;transform:scaleX(0);background:var(--gold-grad);box-shadow:0 0 16px rgba(217,183,90,.7)}

/* -------------------------------------------------- 7. Preloader */
.loader{
  position:fixed;inset:0;z-index:10000;background:#000;
  display:grid;place-items:center;
  transition:opacity .7s var(--ease),visibility .7s;
}
.loader.is-done{opacity:0;visibility:hidden}
.loader__inner{display:grid;gap:20px;justify-items:center}
.loader__mark{display:block;width:clamp(104px,22vw,139px);height:auto;aspect-ratio:2.176}
.loader__bar{width:min(240px,52vw);height:1px;background:rgba(255,255,255,.1);overflow:hidden;position:relative}
.loader__bar span{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:var(--gold-grad);animation:load 1.4s var(--ease) forwards}
@keyframes load{0%{transform:scaleX(0)}62%{transform:scaleX(.72)}100%{transform:scaleX(1)}}
.loader__note{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.34em;color:var(--txt-mute);text-transform:uppercase}

/* -------------------------------------------------- 8. Glass primitives */
.glass{
  position:relative;
  background:linear-gradient(160deg,rgba(255,255,255,.072),rgba(255,255,255,.018) 46%,rgba(255,255,255,.032));
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sheen),var(--shadow-card);
  isolation:isolate;
}
/* liquid specular highlight that tracks the pointer */
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(217,183,90,.16),transparent 62%);
  opacity:0;transition:opacity .45s var(--ease);
}
.glass:hover::before{opacity:1}
/* crystal top edge */
.glass::after{
  content:"";position:absolute;left:12%;right:12%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),rgba(242,220,155,.75),rgba(255,255,255,.4),transparent);
  opacity:.55;
}
.glass--flat::after{display:none}

.chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px 7px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line-gold);
  background:linear-gradient(180deg,rgba(217,183,90,.12),rgba(217,183,90,.03));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-200);
}
.chip__dot{width:6px;height:6px;border-radius:50%;background:var(--gold-300);box-shadow:0 0 0 0 rgba(217,183,90,.7);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,183,90,.6)}70%{box-shadow:0 0 0 10px rgba(217,183,90,0)}100%{box-shadow:0 0 0 0 rgba(217,183,90,0)}}

/* -------------------------------------------------- 9. Buttons */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 27px;border-radius:var(--r-pill);
  font-weight:600;font-size:.9rem;letter-spacing:-.01em;white-space:nowrap;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .35s,color .35s,border-color .35s;
  will-change:transform;overflow:hidden;
}
.btn svg{width:17px;height:17px;flex:none;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(4px)}

.btn--gold{background:var(--gold-grad);color:#120E02;box-shadow:0 10px 34px -14px rgba(217,183,90,.85),inset 0 1px 0 rgba(255,255,255,.5)}
.btn--gold:hover{box-shadow:0 16px 46px -12px rgba(217,183,90,.95),inset 0 1px 0 rgba(255,255,255,.6)}
.btn--gold::after{
  content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
}
.btn--gold:hover::after{animation:sweep .9s var(--ease)}
@keyframes sweep{to{transform:translateX(130%) skewX(-18deg)}}

.btn--ghost{
  border:1px solid var(--line-2);color:var(--txt);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.btn--ghost:hover{border-color:var(--line-gold);color:var(--gold-100);background:linear-gradient(180deg,rgba(217,183,90,.12),rgba(217,183,90,.02))}
.btn--sm{padding:11px 19px;font-size:.82rem}
.btn--lg{padding:18px 34px;font-size:.98rem}
.btn--wide{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

/* -------------------------------------------------- 10. Navigation */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  transition:transform .55s var(--ease),background .5s,border-color .5s,backdrop-filter .5s,padding .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(4,4,6,.72);
  -webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
  border-bottom-color:var(--line);
  box-shadow:0 18px 50px -30px #000;
}
.nav.is-hidden{transform:translateY(-105%)}
.nav__bar{display:flex;align-items:center;justify-content:space-between;gap:22px;height:var(--nav-h)}

/* ---- Brand lockup ----
   Sizes follow the kit's own rules: the horizontal lockup is never shown below
   180px wide, and under that the mark takes over (minimum 32px). Width and
   height are both explicit so the logo reserves its box before the SVG lands.
   The <picture> means only the file that will actually render is fetched. */
.logo{display:inline-flex;align-items:center;flex:none;line-height:0}
.logo img{display:block;height:36px;width:183px;transition:opacity .35s var(--ease)}
.logo:hover img{opacity:.82}
.footer__brand .logo img{height:46px;width:233px}
@media (max-width:640px){
  .logo img{height:34px;width:74px}                  /* mark, 2.176:1 */
  .footer__brand .logo img{height:40px;width:87px}
}

.nav__links{display:flex;align-items:center;gap:4px}
.nav__link{
  position:relative;padding:9px 14px;border-radius:var(--r-pill);
  font-size:.875rem;color:var(--txt-dim);transition:color .3s,background .3s;
}
.nav__link:hover,.nav__link.is-active{color:var(--txt);background:rgba(255,255,255,.05)}
.nav__link::after{
  content:"";position:absolute;left:50%;bottom:3px;width:0;height:1px;background:var(--gold-300);
  transform:translateX(-50%);transition:width .4s var(--ease);
}
.nav__link:hover::after,.nav__link.is-active::after{width:22px}

.nav__cta{display:flex;align-items:center;gap:12px;flex:none}
.nav__tel{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;color:var(--gold-200);padding:9px 14px;border-radius:var(--r-pill);border:1px solid var(--line);transition:border-color .3s,background .3s}
.nav__tel:hover{border-color:var(--line-gold);background:rgba(217,183,90,.08)}
.nav__tel svg{width:14px;height:14px}

.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);place-items:center;flex:none}
.burger span{display:block;width:18px;height:1.5px;background:var(--txt);border-radius:2px;transition:transform .4s var(--ease),opacity .3s}
.burger span+span{margin-top:5px}
.burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:899;background:rgba(0,0,0,.85);
  -webkit-backdrop-filter:blur(30px) saturate(150%);backdrop-filter:blur(30px) saturate(150%);
  padding:calc(var(--nav-h) + 28px) var(--pad) 40px;
  display:grid;align-content:start;gap:6px;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.drawer.is-open{opacity:1;visibility:visible}
/* Direct children only — the pill buttons live inside .drawer__foot and must
   keep their own .btn sizing, padding and colour. */
.drawer>a{
  font-family:var(--f-display);font-size:1.6rem;font-weight:600;letter-spacing:-.03em;
  padding:14px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s;
}
.drawer.is-open>a{opacity:1;transform:none}
.drawer>a:hover{color:var(--gold-200)}
.drawer__foot{margin-top:26px;display:grid;gap:12px}

@media (max-width:1080px){
  .nav__links{display:none}
  .burger{display:grid}
  .nav__tel span{display:none}
}
@media (max-width:640px){
  .nav__cta .btn{display:none}
}

/* -------------------------------------------------- 11. Hero */
.hero{
  position:relative;overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(48px,8vw,96px));padding-bottom:clamp(60px,8vw,110px);
  display:grid;align-content:center;min-height:min(88vh,880px);
}
.hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,4.5vw,64px);align-items:center}

/* ---- Hero film: the gold rig, blended into the page ----
   No z-index here on purpose. A stacking context would isolate the video and
   its mix-blend-mode would have nothing to blend against, leaving a faint black
   rectangle over the ambient grid. Without one, screen-blend drops the clip's
   black background entirely and the aurora shows through it. */
.hero__media{position:absolute;inset:0;overflow:hidden;pointer-events:none;--v-op:.72}
.hero__video{
  position:absolute;top:0;left:18%;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;
  mix-blend-mode:screen;
  opacity:0;transition:opacity 1.4s var(--ease);
}
.hero__video.is-live{opacity:var(--v-op)}
/* Black scrim so the headline column keeps its contrast over the footage */
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.72) 30%,rgba(0,0,0,.42) 50%,rgba(0,0,0,.08) 70%,transparent 84%);
}
.hero__floor{
  position:absolute;left:0;right:0;bottom:0;height:36%;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.85) 62%,#000 96%);
}

/* WCAG 2.2.2 — anything that moves on its own for more than five seconds needs
   a way to stop it. */
.media-toggle{
  position:absolute;right:clamp(14px,2.6vw,32px);bottom:clamp(14px,2.6vw,28px);z-index:3;
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(6,6,8,.68);border:1px solid var(--line-gold);color:var(--gold-200);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:box-shadow .4s var(--ease),transform .4s var(--ease),background .4s;
}
.media-toggle:hover{box-shadow:0 0 24px -6px rgba(217,183,90,.85);transform:translateY(-2px);background:rgba(217,183,90,.14)}
.media-toggle svg{width:14px;height:14px}
.media-toggle .ico-play{display:none}
.media-toggle.is-paused .ico-play{display:block}
.media-toggle.is-paused .ico-pause{display:none}
.hero__eyebrow{margin-bottom:26px}
.hero h1{margin-bottom:26px}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line>span{display:block;transform:translateY(105%);animation:riseIn 1.05s var(--ease) forwards}
.hero h1 .line:nth-child(2)>span{animation-delay:.1s}
.hero h1 .line:nth-child(3)>span{animation-delay:.2s}
@keyframes riseIn{to{transform:translateY(0)}}

.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero__meta{display:flex;flex-wrap:wrap;gap:26px;margin-top:38px;padding-top:28px;border-top:1px solid var(--line)}
.hero__meta div{display:grid;gap:2px}
.hero__meta b{font-family:var(--f-display);font-size:1.5rem;font-weight:600;letter-spacing:-.03em}
.hero__meta span{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.18em;color:var(--txt-mute);text-transform:uppercase}

/* Live-load glass panel. It used to sit in the hero, but the rig in the film
   moves across the frame, so any card pinned over it covers the cab in part of
   the loop. It now lives in the Why DDN column, where it illustrates the
   documented-check-call claim next to it. */
.panel{padding:24px;display:grid;gap:18px;border-radius:var(--r-xl)}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel__title{display:grid;gap:3px}
.panel__title b{font-family:var(--f-display);font-size:1.02rem;letter-spacing:-.02em}
.panel__title span{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.2em;color:var(--txt-mute);text-transform:uppercase}
.panel__badge{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-pill);background:rgba(217,183,90,.12);border:1px solid var(--line-gold);font-family:var(--f-mono);font-size:.56rem;letter-spacing:.18em;color:var(--gold-200);text-transform:uppercase}

.route{display:grid;gap:14px;padding:18px;border-radius:var(--r-md);background:rgba(255,255,255,.028);border:1px solid var(--line)}
.route__row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.route__pt{display:grid;gap:2px}
.route__pt b{font-family:var(--f-display);font-size:1.16rem;letter-spacing:-.02em}
.route__pt span{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.16em;color:var(--txt-mute);text-transform:uppercase}
.route__pt--to{text-align:right}
.route__track{position:relative;height:2px;border-radius:2px;background:rgba(255,255,255,.09);overflow:visible}
.route__fill{position:absolute;inset:0;width:0;border-radius:2px;background:var(--gold-grad);box-shadow:0 0 14px rgba(217,183,90,.6);transition:width 2.4s var(--ease)}
.route__truck{
  position:absolute;top:50%;left:0;width:26px;height:26px;margin-top:-13px;margin-left:-13px;border-radius:50%;
  display:grid;place-items:center;background:#0A0A0C;border:1px solid var(--line-gold);
  box-shadow:0 0 18px rgba(217,183,90,.5);transition:left 2.4s var(--ease);
}
.route__truck svg{width:13px;height:13px}
.route__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.route__stat{display:grid;gap:2px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.route__stat b{font-family:var(--f-mono);font-size:.9rem;color:var(--gold-200);letter-spacing:.02em}
.route__stat span{font-family:var(--f-mono);font-size:.52rem;letter-spacing:.16em;color:var(--txt-mute);text-transform:uppercase}

.panel__log{display:grid;gap:9px}
.log{display:flex;align-items:flex-start;gap:11px;font-size:.79rem;color:var(--txt-dim)}
.log__dot{width:7px;height:7px;border-radius:50%;margin-top:7px;flex:none;background:rgba(255,255,255,.2)}
.log.is-live .log__dot{background:var(--gold-300);box-shadow:0 0 10px rgba(242,220,155,.9)}
.log time{margin-left:auto;font-family:var(--f-mono);font-size:.6rem;color:var(--txt-faint);white-space:nowrap}

@media (max-width:980px){
  .hero__inner{grid-template-columns:1fr}
  .hero{padding-top:calc(var(--nav-h) + 44px);min-height:0}
  /* One column: the rig sits centred and much further back, with a vertical
     scrim instead of a horizontal one. */
  .hero__media{--v-op:.32}
  .hero__video{left:0;object-position:50% 34%}
  .hero__scrim{background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.82) 52%,rgba(0,0,0,.94) 100%)}
  .hero__floor{height:26%}
}

/* -------------------------------------------------- 12. Marquee */
.marquee{position:relative;padding:20px 0;border-block:1px solid var(--line);overflow:hidden;background:rgba(255,255,255,.012)}
.marquee__track{display:flex;width:max-content;gap:0;animation:slide 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{display:inline-flex;align-items:center;gap:14px;padding-inline:28px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-mute);white-space:nowrap}
.marquee__item i{width:5px;height:5px;border-radius:50%;background:var(--gold-400);opacity:.75;flex:none}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:16%;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,#000,transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,#000,transparent)}

/* -------------------------------------------------- 13. Section headers */
.sec-head{display:grid;gap:18px;margin-bottom:clamp(38px,4.6vw,64px);max-width:74ch}
.sec-head--split{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:26px;max-width:none}
.sec-head--split .sec-head{margin-bottom:0}
.sec-head__num{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.28em;color:var(--gold-300);text-transform:uppercase;display:flex;align-items:center;gap:12px}
.sec-head__num::after{content:"";width:54px;height:1px;background:linear-gradient(90deg,var(--gold-400),transparent)}

/* -------------------------------------------------- 14. Services */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.card{
  padding:30px 28px 32px;display:flex;flex-direction:column;gap:15px;min-height:270px;
  transition:transform .6s var(--ease),border-color .5s;transform-style:preserve-3d;
}
.card:hover{border-color:var(--line-gold)}
.card__ico{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(217,183,90,.16),rgba(255,255,255,.03));
  border:1px solid var(--line-gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .6s var(--ease),box-shadow .5s;
}
.card:hover .card__ico{transform:translateZ(34px) scale(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 30px -16px rgba(217,183,90,.9)}
.card__ico svg{width:24px;height:24px;stroke:var(--gold-200)}
.card h3{transition:transform .6s var(--ease)}
.card:hover h3{transform:translateZ(22px)}
.card p{font-size:.9rem}
.card__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:8px}
.card__tag{font-family:var(--f-mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-mute);padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--line);background:rgba(255,255,255,.02)}
.card__idx{position:absolute;top:22px;right:24px;font-family:var(--f-mono);font-size:.6rem;color:var(--txt-faint);letter-spacing:.16em}
@media (max-width:940px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cards{grid-template-columns:1fr}}

/* -------------------------------------------------- 15. Metrics / Why */
.why{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,4vw,60px);align-items:center}
.why__side{display:grid;gap:clamp(12px,1.4vw,18px);align-content:start}
.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.4vw,18px)}
.metric{padding:26px 24px;display:grid;gap:6px;border-radius:var(--r-lg)}
.metric b{font-family:var(--f-display);font-size:clamp(2rem,3.4vw,2.9rem);font-weight:600;letter-spacing:-.045em;line-height:1}
.metric span{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.18em;color:var(--txt-mute);text-transform:uppercase}
.metric small{font-size:.8rem;color:var(--txt-dim);line-height:1.5}

.feats{display:grid;gap:2px;margin-top:30px}
.feat{display:flex;gap:16px;padding:19px 4px;border-bottom:1px solid var(--line);transition:padding-left .45s var(--ease),border-color .4s}
.feat:hover{padding-left:14px;border-color:var(--line-gold)}
.feat__ico{width:22px;height:22px;flex:none;margin-top:3px;color:var(--gold-300)}
.feat__ico svg{width:22px;height:22px}
.feat h4{margin-bottom:4px}
.feat p{font-size:.87rem}
@media (max-width:940px){.why{grid-template-columns:1fr}}
@media (max-width:520px){.metrics{grid-template-columns:1fr}}

/* -------------------------------------------------- 16. Lane network */
.net{position:relative;border-radius:var(--r-xl);padding:clamp(22px,3vw,40px);overflow:hidden}
.net__canvas{position:relative;width:100%;aspect-ratio:16/8.4;min-height:300px}
.net__plot{position:absolute;inset:0}
.net__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.net__dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);background-size:24px 24px;opacity:.6;
  -webkit-mask-image:radial-gradient(85% 75% at 50% 50%,#000,transparent 78%);mask-image:radial-gradient(85% 75% at 50% 50%,#000,transparent 78%)}
.net__link{stroke:rgba(217,183,90,.32);stroke-width:1;fill:none;stroke-dasharray:5 7;vector-effect:non-scaling-stroke;animation:dash 2.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-24}}
.net__link--hot{stroke:rgba(242,220,155,.75);stroke-width:1.4}
.net__pulse{fill:var(--gold-200);filter:drop-shadow(0 0 6px rgba(242,220,155,.95))}
.net__node{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:8px;cursor:default}
.net__ring{position:relative;width:13px;height:13px;border-radius:50%;background:var(--gold-300);box-shadow:0 0 0 4px rgba(217,183,90,.14),0 0 16px rgba(242,220,155,.75)}
.net__ring::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(217,183,90,.5);animation:ripple 3s ease-out infinite}
@keyframes ripple{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.3);opacity:0}}
.net__label{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-dim);white-space:nowrap;padding:4px 9px;border-radius:var(--r-pill);background:rgba(0,0,0,.5);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.net__node--hub .net__ring{width:17px;height:17px;background:var(--gold-100)}
.net__node--hub .net__label{color:var(--gold-200);border-color:var(--line-gold)}
.net__legend{display:flex;flex-wrap:wrap;gap:22px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.net__legend div{display:flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-mute)}
.net__legend i{width:8px;height:8px;border-radius:50%;background:var(--gold-300);flex:none}
@media (max-width:760px){
  .net__canvas{aspect-ratio:16/13}
  .net__plot{inset:4% 8%}
  .net__label{font-size:.48rem;padding:3px 7px;letter-spacing:.1em}
  .net__ring{width:10px;height:10px}
  .net__node--hub .net__ring{width:13px;height:13px}
}

/* -------------------------------------------------- 17. Process */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)}
.steps::before{content:"";position:absolute;top:31px;left:6%;right:6%;height:1px;background:rgba(255,255,255,.09)}
.steps__fill{position:absolute;top:31px;left:6%;height:1px;width:0;background:var(--gold-grad);box-shadow:0 0 12px rgba(217,183,90,.7);transition:width 1.4s var(--ease)}
.step{position:relative;display:grid;gap:14px;padding-top:0}
.step__no{
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;position:relative;z-index:2;
  background:#050506;border:1px solid var(--line-gold);
  font-family:var(--f-mono);font-size:.82rem;color:var(--gold-200);letter-spacing:.06em;
  box-shadow:0 0 0 8px #000,inset 0 1px 0 rgba(255,255,255,.16);
  transition:box-shadow .5s,transform .5s var(--ease),background .5s;
}
.step:hover .step__no{transform:translateY(-4px);box-shadow:0 0 0 8px #000,0 0 26px -4px rgba(217,183,90,.8);background:linear-gradient(160deg,rgba(217,183,90,.2),#050506)}
.step h4{font-size:1.08rem}
.step p{font-size:.87rem}
@media (max-width:900px){
  .steps{grid-template-columns:repeat(2,1fr);gap:32px}
  .steps::before,.steps__fill{display:none}
}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* -------------------------------------------------- 17b. Cinematic band
   Full-bleed film between Process and Equipment. Same screen-blend trick as the
   hero, so the clip has no visible rectangle: it fades out of black at the top
   and back into black at the bottom. */
.reel{
  position:relative;overflow:hidden;
  min-height:clamp(430px,62vh,740px);
  display:grid;align-content:center;
  padding-block:clamp(46px,7vw,92px);
  --v-op:.88;
}
.reel__media{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.reel__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 46%;
  mix-blend-mode:screen;
  opacity:0;transition:opacity 1.4s var(--ease);
}
/* --v-fade is driven per frame by the script to dissolve the loop seam */
.reel__video.is-live{opacity:calc(var(--v-op) * var(--v-fade,1))}
.reel__scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(78% 62% at 20% 50%,rgba(0,0,0,.80),transparent 72%),
    linear-gradient(180deg,#000 0%,rgba(0,0,0,.42) 16%,rgba(0,0,0,.26) 48%,rgba(0,0,0,.52) 80%,#000 100%);
}
.reel__inner{position:relative;z-index:1;display:grid;gap:19px;justify-items:start}
.reel__inner h2{max-width:13ch}
.reel__inner .lead{max-width:50ch}
.reel__inner .btn{margin-top:8px}
@media (max-width:760px){
  .reel{min-height:clamp(380px,58vh,540px);--v-op:.62}
  .reel__scrim{background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.62) 20%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.8) 84%,#000 100%)}
}

/* -------------------------------------------------- 18. Equipment */
.equip{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px)}
.equip__i{padding:24px 22px;display:grid;gap:10px;border-radius:var(--r-lg)}
.equip__i b{font-family:var(--f-display);font-size:1.05rem;letter-spacing:-.02em}
.equip__i ul{display:grid;gap:7px;margin-top:4px}
.equip__i li{display:flex;gap:9px;font-size:.82rem;color:var(--txt-dim)}
.equip__i li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold-400);margin-top:9px;flex:none}
@media (max-width:900px){.equip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.equip{grid-template-columns:1fr}}

/* -------------------------------------------------- 19. Testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.quote{padding:30px 28px;display:flex;flex-direction:column;gap:18px}
.quote__stars{display:flex;gap:4px;color:var(--gold-300)}
.quote__stars svg{width:15px;height:15px}
.quote p{font-size:.95rem;color:var(--txt);line-height:1.7}
.quote__by{display:flex;align-items:center;gap:13px;margin-top:auto;padding-top:8px;border-top:1px solid var(--line)}
.quote__av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;font-family:var(--f-display);font-weight:600;font-size:.86rem;color:var(--gold-100);background:linear-gradient(150deg,rgba(217,183,90,.24),rgba(255,255,255,.04));border:1px solid var(--line-gold)}
.quote__by div{display:grid;gap:1px}
.quote__by b{font-size:.88rem;font-family:var(--f-body);font-weight:600}
.quote__by span{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.14em;color:var(--txt-mute);text-transform:uppercase}
@media (max-width:940px){.quotes{grid-template-columns:1fr}}

/* -------------------------------------------------- 20. FAQ */
.faq{display:grid;gap:12px;max-width:940px;margin-inline:auto}
/* No overflow:hidden here — it clipped the :focus-visible ring on every FAQ
   button. The collapse is handled by .acc__body>div instead. */
.acc{border-radius:var(--r-md)}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;
  padding:22px 24px;font-family:var(--f-display);font-size:1.02rem;font-weight:500;letter-spacing:-.02em;
  transition:color .3s;
}
.acc__btn:hover{color:var(--gold-100)}
.acc__ico{width:26px;height:26px;flex:none;border-radius:50%;border:1px solid var(--line-gold);display:grid;place-items:center;position:relative;transition:transform .45s var(--ease),background .35s}
.acc__ico::before,.acc__ico::after{content:"";position:absolute;background:var(--gold-200);border-radius:2px;transition:transform .45s var(--ease),opacity .35s}
.acc__ico::before{width:10px;height:1.5px}
.acc__ico::after{width:1.5px;height:10px}
.acc.is-open .acc__ico{transform:rotate(180deg);background:rgba(217,183,90,.16)}
.acc.is-open .acc__ico::after{transform:scaleY(0);opacity:0}
.acc__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc.is-open .acc__body{grid-template-rows:1fr}
/* visibility (not just zero height) keeps the links inside a closed answer out
   of the tab order and out of the accessibility tree; the delayed transition
   lets the collapse animation finish before it hides. */
.acc__body>div{overflow:hidden;visibility:hidden;transition:visibility 0s linear .5s}
.acc.is-open .acc__body>div{visibility:visible;transition:visibility 0s}
.acc__body p{padding:0 24px 24px;font-size:.91rem;max-width:78ch}
.acc__body p+p{padding-top:0}
.acc__body a{color:var(--gold-200);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(242,220,155,.4)}
.acc__body a:hover{text-decoration-color:var(--gold-200)}

/* -------------------------------------------------- 21. Quote form */
.quote-sec{position:relative}
.form-shell{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(20px,2.4vw,34px);align-items:start}
.form-aside{padding:32px 30px;display:grid;gap:24px;align-content:start;border-radius:var(--r-xl);position:sticky;top:calc(var(--nav-h) + 22px)}
.form-aside__list{display:grid;gap:16px}
.form-aside__list li{display:flex;gap:13px;font-size:.87rem;color:var(--txt-dim)}
.form-aside__list svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--gold-300)}
.form-aside__box{padding:18px 18px;border-radius:var(--r-md);background:rgba(217,183,90,.055);border:1px solid var(--line-gold)}
.form-aside__box b{display:block;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-200);margin-bottom:8px}
.form-aside__box p{font-size:.81rem;line-height:1.6}

.form{padding:clamp(24px,2.6vw,38px);border-radius:var(--r-xl);display:grid;gap:22px}
.form__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.field{position:relative;display:grid;gap:8px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-mute);display:flex;gap:7px;align-items:center}
.field label .req{color:var(--gold-300)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border-radius:var(--r-md);
  background:rgba(255,255,255,.028);border:1px solid var(--line);
  color:var(--txt);font-size:.93rem;
  transition:border-color .35s,background .35s,box-shadow .35s;
  -webkit-appearance:none;appearance:none;
}
.field textarea{min-height:112px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--txt-placeholder)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--line-gold);background:rgba(217,183,90,.05);
  box-shadow:0 0 0 3px rgba(217,183,90,.10),inset 0 1px 0 rgba(255,255,255,.06);
}
.field select{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2DC9B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:15px;padding-right:42px;
}
.field select option{background:#0B0B0E;color:var(--txt)}
.field input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(85%) sepia(46%) saturate(548%) hue-rotate(1deg) brightness(96%);cursor:pointer;opacity:.85}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:rgba(255,120,110,.6);background:rgba(255,90,80,.05)}
.field__err{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.1em;color:#FF9A92;text-transform:uppercase;display:none}
.field.has-error .field__err{display:block}

/* ---- SMS consent block (RingCentral / TCR compliance) ---- */
.consent{
  grid-column:1/-1;margin-top:2px;padding:18px 20px;border-radius:var(--r-md);
  background:linear-gradient(160deg,rgba(217,183,90,.075),rgba(255,255,255,.015));
  border:1px solid var(--line-gold);
  display:grid;gap:12px;
  transition:box-shadow .4s,border-color .4s;
}
.consent:focus-within{box-shadow:0 0 0 3px rgba(217,183,90,.12)}
.consent__row{display:flex;align-items:flex-start;gap:14px}
.consent__box{position:relative;flex:none;margin-top:2px}
.consent__box input{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;
}
.consent__mark{
  display:grid;place-items:center;width:22px;height:22px;border-radius:7px;pointer-events:none;
  border:1.5px solid rgba(217,183,90,.5);background:rgba(0,0,0,.5);
  transition:background .3s,border-color .3s,transform .3s var(--ease);
}
.consent__mark svg{width:13px;height:13px;stroke:#120E02;stroke-width:3.2;opacity:0;transform:scale(.5);transition:opacity .25s,transform .3s var(--ease)}
.consent__box input:checked+.consent__mark{background:var(--gold-grad);border-color:transparent}
.consent__box input:checked+.consent__mark svg{opacity:1;transform:scale(1)}
.consent__box input:focus-visible+.consent__mark{outline:2px solid var(--gold-300);outline-offset:3px}
.consent__box input:hover+.consent__mark{border-color:var(--gold-300)}
.consent__txt{font-size:.83rem;line-height:1.62;color:var(--txt-dim);cursor:pointer}
.consent__txt a{color:var(--gold-200);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(242,220,155,.45)}
.consent__txt a:hover{text-decoration-color:var(--gold-200)}
.consent__opt{font-family:var(--f-mono);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-300);border:1px solid var(--line-gold);border-radius:var(--r-pill);padding:3px 9px;display:inline-block;margin-left:6px;vertical-align:1px}
.consent__legal{display:flex;flex-wrap:wrap;gap:6px 16px;padding-top:11px;border-top:1px solid rgba(217,183,90,.18)}
.consent__legal span{font-family:var(--f-mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-mute)}

.form__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:6px}
.form__note{font-size:.76rem;color:var(--txt-mute);max-width:52ch;line-height:1.6}
.form__note a{color:var(--gold-200);text-decoration:underline;text-underline-offset:3px}
.form__ok{
  display:none;gap:13px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-md);
  background:rgba(217,183,90,.09);border:1px solid var(--line-gold);font-size:.86rem;color:var(--gold-100);
}
.form__ok.is-on{display:flex;animation:riseFade .6s var(--ease)}
.form__ok svg{width:19px;height:19px;flex:none;margin-top:2px;stroke:var(--gold-200)}
@keyframes riseFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (max-width:980px){
  .form-shell{grid-template-columns:1fr}
  .form-aside{position:static}
}
@media (max-width:560px){
  .form__grid{grid-template-columns:1fr}
}

/* -------------------------------------------------- 22. Contact strip */
.contact{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,20px)}
.contact__i{padding:28px 26px;display:grid;gap:9px;border-radius:var(--r-lg);transition:border-color .4s}
.contact__i:hover{border-color:var(--line-gold)}
.contact__i span{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-300)}
.contact__i b{font-family:var(--f-display);font-size:1.16rem;font-weight:600;letter-spacing:-.025em;word-break:break-word}
.contact__i small{font-size:.8rem;color:var(--txt-mute)}
@media (max-width:820px){.contact{grid-template-columns:1fr}}

/* -------------------------------------------------- 23. CTA band */
.band{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  padding:clamp(38px,5.4vw,74px);text-align:center;display:grid;gap:22px;justify-items:center;
  background:
    radial-gradient(70% 130% at 50% 0%,rgba(217,183,90,.20),transparent 62%),
    linear-gradient(160deg,rgba(255,255,255,.072),rgba(255,255,255,.018) 46%,rgba(255,255,255,.032));
}
.band h2{max-width:16ch}
.band p{max-width:56ch}
.band__row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:8px}

/* -------------------------------------------------- 24. Footer */
.footer{position:relative;border-top:1px solid var(--line);padding-top:clamp(52px,6vw,84px);background:linear-gradient(180deg,rgba(255,255,255,.014),transparent 40%)}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:clamp(26px,3vw,48px);padding-bottom:clamp(40px,5vw,64px)}
.footer__brand{display:grid;gap:18px;align-content:start;max-width:38ch}
.footer__brand p{font-size:.87rem}
.footer__col{display:grid;gap:14px;align-content:start}
.footer__h{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-300)}
/* Direct children only: this used to outrank .footer__h and render every
   footer heading as grey 14px body text, and it also hit the inline link
   inside .footer__legalbox. */
.footer__col>a{font-size:.87rem;color:var(--txt-dim);transition:color .3s,transform .3s var(--ease);display:inline-block}
.footer__col>a:hover{color:var(--gold-100);transform:translateX(4px)}
.footer__legalbox{padding:16px 18px;border-radius:var(--r-md);border:1px solid var(--line);background:rgba(255,255,255,.02)}
.footer__legalbox p{font-size:.76rem;line-height:1.6;color:var(--txt-mute)}
.footer__legalbox a{color:var(--gold-200);text-decoration:underline;text-underline-offset:3px}

.footer__word{
  font-family:var(--f-display);font-weight:700;text-align:center;line-height:.86;
  font-size:clamp(3.6rem,17vw,15rem);letter-spacing:-.05em;
  -webkit-text-fill-color:transparent;-webkit-text-stroke:1px rgba(217,183,90,.22);color:transparent;
  -webkit-mask-image:linear-gradient(180deg,#000 12%,transparent 92%);mask-image:linear-gradient(180deg,#000 12%,transparent 92%);
  user-select:none;pointer-events:none;margin-bottom:-.06em;
}
.footer__bar{
  border-top:1px solid var(--line);padding-block:24px 30px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
}
.footer__copy{font-size:.79rem;color:var(--txt-mute);display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.footer__copy a{color:var(--txt-dim);transition:color .3s}
.footer__copy a:hover{color:var(--gold-200)}
.footer__copy i{width:3px;height:3px;border-radius:50%;background:var(--gold-400);opacity:.6;display:inline-block}
.footer__socials{display:flex;gap:9px}
.footer__socials a{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;border:1px solid var(--line);color:var(--txt-mute);transition:border-color .35s,color .35s,transform .35s var(--ease),background .35s}
.footer__socials a:hover{border-color:var(--line-gold);color:var(--gold-200);transform:translateY(-3px);background:rgba(217,183,90,.08)}
.footer__socials svg{width:16px;height:16px}
@media (max-width:940px){.footer__top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__top{grid-template-columns:1fr}}

/* -------------------------------------------------- 25. Legal pages */
.legal-hero{padding-top:calc(var(--nav-h) + clamp(46px,7vw,86px));padding-bottom:clamp(30px,4vw,52px)}
.legal-hero h1{font-size:clamp(2.1rem,5vw,3.7rem);margin-block:20px 18px}
.legal-hero .lead{max-width:70ch}
.legal-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.legal-meta span{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-mute);padding:7px 13px;border-radius:var(--r-pill);border:1px solid var(--line);background:rgba(255,255,255,.02)}

.legal-shell{display:grid;grid-template-columns:262px 1fr;gap:clamp(24px,3.4vw,56px);align-items:start;padding-bottom:clamp(60px,8vw,120px)}
.toc{position:sticky;top:calc(var(--nav-h) + 20px);padding:22px 20px;border-radius:var(--r-lg);display:grid;gap:12px}
.toc b{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-300)}
.toc ol{display:grid;gap:2px;counter-reset:toc}
.toc a{
  display:flex;gap:10px;font-size:.83rem;color:var(--txt-mute);padding:7px 10px;border-radius:8px;
  transition:color .3s,background .3s;line-height:1.4;
}
.toc a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);font-family:var(--f-mono);font-size:.62rem;color:var(--txt-faint);flex:none;padding-top:2px}
.toc a:hover{color:var(--txt);background:rgba(255,255,255,.04)}
.toc a.is-active{color:var(--gold-100);background:rgba(217,183,90,.10)}
.toc a.is-active::before{color:var(--gold-300)}

.doc{display:grid;gap:clamp(24px,2.6vw,38px);max-width:82ch}
.doc__block{padding:clamp(22px,2.4vw,34px);border-radius:var(--r-lg);display:grid;gap:14px;scroll-margin-top:calc(var(--nav-h) + 24px)}
.doc__block h2{font-size:clamp(1.24rem,2.1vw,1.6rem);display:flex;gap:14px;align-items:baseline}
.doc__block h2 em{font-family:var(--f-mono);font-style:normal;font-size:.62rem;letter-spacing:.16em;color:var(--gold-300);flex:none;padding-top:2px}
.doc p{font-size:.93rem;line-height:1.75}
.doc ul{display:grid;gap:9px}
.doc li{display:flex;gap:12px;font-size:.9rem;color:var(--txt-dim);line-height:1.65}
.doc li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold-400);flex:none;margin-top:10px}
.doc a{color:var(--gold-200);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(242,220,155,.4);word-break:break-word}
.doc a:hover{text-decoration-color:var(--gold-200)}
.doc strong{color:var(--txt);font-weight:600}
.doc__key{
  padding:18px 20px;border-radius:var(--r-md);
  background:linear-gradient(160deg,rgba(217,183,90,.10),rgba(255,255,255,.015));
  border:1px solid var(--line-gold);display:flex;gap:14px;align-items:flex-start;
}
.doc__key svg{width:19px;height:19px;flex:none;margin-top:3px;stroke:var(--gold-200)}
.doc__key p{font-size:.89rem;color:var(--gold-100)}
.doc__contact{display:grid;gap:8px;font-size:.92rem}
.doc__contact div{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
.doc__contact b{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-mute);min-width:88px}
@media (max-width:920px){
  .legal-shell{grid-template-columns:1fr}
  .toc{position:static;order:-1}
}

/* -------------------------------------------------- 26. Reveal animations */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-28px)}
[data-reveal="right"]{transform:translateX(28px)}
[data-reveal="scale"]{transform:scale(.965)}

/* -------------------------------------------------- 27. Back to top */
.totop{
  position:fixed;right:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px);z-index:880;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:rgba(6,6,8,.7);border:1px solid var(--line-gold);color:var(--gold-200);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s,box-shadow .4s;
}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{box-shadow:0 0 26px -6px rgba(217,183,90,.8)}
.totop svg{width:17px;height:17px}

/* -------------------------------------------------- 28. Route rail — the rig that travels with you
   A gold semi seen from above, driving down a dashed highway pinned to the left
   edge. Its position is the scroll position; its headlights throw a soft gold
   wash onto the page behind the content. */
.rail{
  position:fixed;left:clamp(12px,1.7vw,28px);top:50%;transform:translateY(-50%);
  height:min(58vh,520px);width:2px;z-index:850;pointer-events:none;
  opacity:0;transition:opacity .9s var(--ease) .5s;
}
.rail.is-ready{opacity:1}
@media (max-width:1279px){.rail{display:none}}

.rail__road{
  position:absolute;inset:0;border-radius:2px;
  background:repeating-linear-gradient(180deg,rgba(217,183,90,.30) 0 5px,rgba(255,255,255,.035) 5px 13px);
}
.rail__fill{
  position:absolute;left:0;top:0;width:100%;height:0;border-radius:2px;
  background:var(--gold-grad);box-shadow:0 0 13px rgba(217,183,90,.65);
}
.rail__start{
  position:absolute;left:50%;top:-15px;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;background:#050506;border:1px solid rgba(217,183,90,.55);
}
.rail__end{
  position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);
  width:12px;height:12px;border-radius:2px;opacity:.5;
  background:repeating-conic-gradient(#F2DC9B 0% 25%,#0A0A0C 0% 50%) 0 0/6px 6px;
  box-shadow:0 0 0 1px rgba(217,183,90,.35);
  transition:opacity .6s var(--ease),box-shadow .6s var(--ease),transform .6s var(--ease);
}
.rail.is-done .rail__end{opacity:1;transform:translateX(-50%) scale(1.16);box-shadow:0 0 20px -2px rgba(242,220,155,.95)}

.rail__stops{position:absolute;inset:0}
.rail__stop{position:absolute;left:50%;transform:translate(-50%,-50%)}
.rail__stop i{
  display:block;width:7px;height:7px;border-radius:50%;background:#050506;
  border:1px solid rgba(217,183,90,.45);
  transition:background .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease);
}
.rail__stop b{
  position:absolute;left:16px;top:50%;transform:translateY(-50%) translateX(-6px);
  font-family:var(--f-mono);font-weight:400;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--txt-faint);white-space:nowrap;opacity:0;
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .5s;
}
.rail__stop.is-passed i{background:var(--gold-300);box-shadow:0 0 13px rgba(242,220,155,.9);transform:scale(1.12)}
.rail__stop.is-near b{opacity:1;transform:translateY(-50%) translateX(0);color:var(--gold-200)}

.rail__rig{
  position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  transition:transform .7s var(--ease);will-change:top;
}
.rail__rig.is-rev{transform:translate(-50%,-50%) rotate(180deg)}
.rail__truck{
  width:23px;height:41px;overflow:visible;
  filter:drop-shadow(0 0 10px rgba(217,183,90,.55));
  animation:sway 5s var(--ease-soft) infinite;
}
@keyframes sway{
  0%,100%{transform:translateX(0) rotate(0deg)}
  25%{transform:translateX(-.7px) rotate(-.8deg)}
  75%{transform:translateX(.7px) rotate(.8deg)}
}
.rail__beam{
  position:absolute;left:50%;top:calc(100% - 7px);width:58px;height:82px;transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(252,246,222,.32),rgba(217,183,90,.07) 55%,transparent 86%);
  clip-path:polygon(37% 0,63% 0,100% 100%,0 100%);
  filter:blur(3px);opacity:.7;
}
.rail__trail{
  position:absolute;left:50%;bottom:calc(100% - 9px);width:3px;height:88px;transform:translateX(-50%);
  border-radius:3px;opacity:0;transition:opacity .4s var(--ease);
  background:linear-gradient(0deg,rgba(242,220,155,.6),transparent);
}
/* Sits outside .rail__rig so it never inherits the 180° turnaround */
.rail__pct{
  position:absolute;left:21px;top:0;transform:translateY(-50%);
  font-family:var(--f-mono);font-size:.55rem;letter-spacing:.14em;color:var(--gold-200);
  white-space:nowrap;opacity:0;transition:opacity .45s var(--ease);
}
.rail.is-moving .rail__pct{opacity:.85}
@media (max-width:1499px){.rail__stop b,.rail__pct{display:none}}

/* Headlight wash on the page behind the content */
.rail-glow{
  position:fixed;left:0;top:50%;z-index:-1;pointer-events:none;
  width:min(44vw,600px);height:min(44vw,600px);transform:translate(-47%,-50%);
  border-radius:50%;filter:blur(30px);
  background:radial-gradient(circle,rgba(217,183,90,.15),rgba(217,183,90,.045) 44%,transparent 70%);
}
@media (max-width:1279px){.rail-glow{display:none}}

/* -------------------------------------------------- 29. Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important}
  .hero h1 .line>span{transform:none}
  .fx__noise,.fx__blob{animation:none}
  .marquee__track{animation:none}
  .rail__truck{animation:none}
  .rail__beam,.rail__trail{display:none}
}

/* -------------------------------------------------- 30. Print */
@media print{
  .fx,.cursor,.cursor-dot,.progress,.loader,.nav,.drawer,.totop,.footer__word,.rail,.rail-glow{display:none !important}
  body{background:#fff;color:#000}
  .glass,.doc__block,.toc{background:none;border:1px solid #ccc;box-shadow:none;backdrop-filter:none}
  p,li{color:#222}
  a{color:#000;text-decoration:underline}
}