/* lower4/base.css - shared tokens and primitives for the sections below #engine (below-v4).
   Every section class is prefixed l4-; brand sections use their own prefixes inside (thg-, tak-). */
:root {
  --l4-silver: #DCE0E4;      /* hero silver */
  --l4-wall: #E9ECEF;        /* studio wall */
  --l4-floor: #D5DAE0;       /* studio floor */
  --l4-plate: #D2D7DC;       /* footer plate */
  --l4-ink: #0F1215;
  --l4-ink-2: #4B545C;
  --l4-hair: rgba(15, 18, 21, .14);
  --l4-navy: #10305C;        /* Auto Life navy: never inside a brand section */
  --l4-gold: #E3B341;        /* Auto Life gold: logo and map ring only */
  --thg-cyan: #00C9DF;
  --thg-navy: #1D2088;       /* THG navy: ink only, never leaves THG */
  --thg-red: #E60012;
  --tak-red: #FF030D;        /* Takoma red: never swapped with THG red */
  --tak-green: #00A008;
  --l4-wrap: 1360px;
  --l4-pad: 48px;
  --l4-sec: 128px;           /* section padding */
  --l4-ease: cubic-bezier(.2, .7, .2, 1);
}
@media (max-width: 760px) { :root { --l4-pad: 20px; --l4-sec: 72px; } }

.l4 { position: relative; overflow: clip; color: var(--l4-ink); font: 400 18px/1.55 var(--body); isolation: isolate; }
.l4-in { position: relative; max-width: var(--l4-wrap); margin: 0 auto; padding: 0 var(--l4-pad); width: 100%; }
.l4-title { font: 600 clamp(44px, 6vw, 88px)/.92 var(--display); text-transform: uppercase; letter-spacing: -.005em; margin: 0; }
.l4-body { font: 400 18px/1.55 var(--body); color: var(--l4-ink-2); max-width: 44ch; margin: 0; }
.l4-mono { font: 500 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
/* codes and part numbers are written as the trade prints them: never transformed, never broken */
.l4-code { text-transform: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
[lang="ar"] { letter-spacing: 0 !important; text-transform: none !important; }
.l4 :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.l4-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.l4-brands { position: relative; }