/* ========== APEX TRAILER RENTALS — TOKENS & BASE ========== */
:root{
  /* type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);

  /* spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;

  --font-d:'Archivo', system-ui, sans-serif;
  --font-b:'Barlow', system-ui, sans-serif;

  --r-sm:4px; --r-md:8px; --r-lg:14px;
  --ease: cubic-bezier(.16,1,.3,1);
  --maxw: 1240px;
}

/* ---- DARK (default: matches the banner artwork) ---- */
:root, [data-theme="dark"]{
  --bg:        oklch(17% .008 60);
  --bg-2:      oklch(21% .010 60);
  --surface:   oklch(24% .012 60);
  --surface-2: oklch(28% .014 60);
  --line:      oklch(34% .014 60);
  --line-2:    oklch(44% .016 60);
  --text:      oklch(96% .006 70);
  --text-2:    oklch(76% .010 70);
  --text-3:    oklch(60% .012 70);
  --accent:    #FC6404;                 /* sampled from the logo lockup */
  --accent-2:  #FE9305;                 /* logo gradient highlight */
  --accent-ink: oklch(16% .02 50);
  --steel:     oklch(78% .012 250);
  --shadow-sm: 0 1px 2px oklch(0% 0 0/.5);
  --shadow-md: 0 8px 24px -8px oklch(0% 0 0/.65);
  --shadow-lg: 0 28px 60px -20px oklch(0% 0 0/.8);
  --glow: 0 0 0 1px rgb(252 100 4/.35), 0 12px 40px -12px rgb(252 100 4/.4);
}

/* ---- LIGHT ---- */
[data-theme="light"]{
  --bg:        oklch(98.5% .004 80);
  --bg-2:      oklch(96% .006 80);
  --surface:   oklch(100% 0 0);
  --surface-2: oklch(97% .005 80);
  --line:      oklch(89% .008 80);
  --line-2:    oklch(80% .010 80);
  --text:      oklch(21% .012 60);
  --text-2:    oklch(42% .014 60);
  --text-3:    oklch(55% .014 60);
  --accent:    #FC6404;                 /* identical to the logo in both themes */
  --accent-2:  #FE9305;
  --accent-ink: oklch(17% .02 50);
  --steel:     oklch(45% .012 250);
  --shadow-sm: 0 1px 2px oklch(20% .02 60/.08);
  --shadow-md: 0 8px 24px -8px oklch(20% .02 60/.14);
  --shadow-lg: 0 28px 60px -20px oklch(20% .02 60/.20);
  --glow: 0 0 0 1px oklch(58% .205 42/.25), 0 12px 36px -14px oklch(58% .205 42/.3);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font-b);
  font-size:var(--text-base);
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:var(--font-d); line-height:1.04; letter-spacing:-.022em; text-wrap:balance}
h1{font-size:var(--text-2xl); font-weight:900; text-transform:uppercase; letter-spacing:-.03em}
h2{font-size:var(--text-xl); font-weight:800; text-transform:uppercase}
h3{font-size:var(--text-lg); font-weight:700}
p{text-wrap:pretty}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
table{border-collapse:collapse; width:100%}

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

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(var(--space-5), 4vw, var(--space-10))}

.vh, .skip{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.skip:focus{position:fixed; top:var(--space-3); left:var(--space-3); width:auto; height:auto; clip-path:none;
  padding:var(--space-3) var(--space-5); background:var(--accent); color:var(--accent-ink); border-radius:var(--r-md); z-index:200; font-weight:700}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-d); font-size:var(--text-sm); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; white-space:nowrap;
  padding:var(--space-3) var(--space-6); border:1px solid transparent; border-radius:var(--r-md);
  cursor:pointer; transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn svg{width:1.05em; height:1.05em; flex:none}
.btn--pri{background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow-sm)}
.btn--pri:hover{background:var(--accent-2); transform:translateY(-2px); box-shadow:var(--shadow-md)}
.btn--ghost{background:transparent; color:var(--text); border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px)}
.btn--lg{padding:var(--space-4) var(--space-8); font-size:var(--text-base)}
.btn--full{width:100%}
.btn:active{transform:translateY(0)}
@media (prefers-reduced-motion: reduce){.btn:hover{transform:none}}

/* ---------- shared bits ---------- */
.eyebrow{
  font-family:var(--font-d); font-size:var(--text-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.2em; color:var(--accent); margin-bottom:var(--space-4);
}
.lede{font-size:var(--text-lg); color:var(--text-2); line-height:1.5; max-width:52ch}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1; transform:none; transition:none}}