/* =========================================================================
   AutoVault — cinematic collector-car vault. Design system.
   Palette locked to brand: near-black canvas, warm off-white, crimson accent,
   orange used ONLY as sparing warm gradient highlight.
   ========================================================================= */

:root {
  /* --- canvas & surfaces --- */
  --black:        #0A0A0B;
  --charcoal:     #111315;
  --surface:      #16181B;
  --surface-2:    #1C1F23;
  --hair:         rgba(242, 239, 233, 0.09);
  --hair-strong:  rgba(242, 239, 233, 0.16);

  /* --- ink --- */
  --ink:          #F2EFE9;
  --ink-2:        rgba(242, 239, 233, 0.66);
  --ink-3:        rgba(242, 239, 233, 0.40);
  --ink-4:        rgba(242, 239, 233, 0.22);

  /* --- brand accents --- */
  --crimson:      #CC2C24;
  --crimson-soft: rgba(204, 44, 36, 0.55);
  --crimson-hair: rgba(204, 44, 36, 0.34);
  --crimson-glow: rgba(204, 44, 36, 0.30);
  --orange:       #ED6B21;

  /* warm hero light streak — orange→crimson, used only as gradient */
  --warm-streak:  linear-gradient(105deg, var(--orange) 0%, var(--crimson) 60%, transparent 100%);

  /* --- type --- */
  /* display face is now a HEAVY grotesque (muscular, assertive) — var name kept */
  --serif: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* --- motion (scaled by --motion 0..1 via JS) --- */
  --motion: 0.7;
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);

  /* --- layout --- */
  --pad:    clamp(20px, 5vw, 96px);
  --maxw:   1320px;
}

/* accent overridable via tweak */
:root[data-accent="crimson"] { --crimson: #CC2C24; }
:root[data-accent="ember"]   { --crimson: #E0412B; }
:root[data-accent="oxblood"] { --crimson: #A8221C; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--crimson); color: #fff; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- film-grain / vignette atmosphere ---------- */
body::before {
  /* faint warm vignette so the canvas never reads as flat black */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(204,44,36,0.06), transparent 55%),
    radial-gradient(140% 120% at 50% 120%, rgba(237,107,33,0.035), transparent 60%);
}
body::after {
  /* subtle grain */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ========================================================================
   Layout helpers
   ======================================================================== */
.shell { position: relative; z-index: 1; }
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.section { position: relative; padding-block: clamp(72px, 11vw, 160px); }
.section--tight { padding-block: clamp(56px, 8vw, 104px); }

.hair { height: 1px; background: var(--hair); border: 0; margin: 0; }
.hair--crimson { background: linear-gradient(90deg, transparent, var(--crimson-hair) 18%, var(--crimson-hair) 82%, transparent); }

/* ========================================================================
   Type primitives
   ======================================================================== */
.label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.label--crimson { color: var(--crimson); }
.label .tick { width: 18px; height: 1px; background: currentColor; display: inline-block; opacity: 0.7; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 28px;
}
.eyebrow .num { color: var(--crimson); }

h1, h2, h3 { font-family: var(--serif); font-weight: 800; margin: 0; line-height: 0.98; letter-spacing: -0.015em; }

.display {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(40px, 6.6vw, 94px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.display em { font-style: normal; font-weight: 800; color: var(--crimson); }

.h2 {
  font-size: clamp(34px, 5.4vw, 74px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  font-weight: 800;
}
.h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.lede {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.62;
  color: var(--ink-2);
  font-weight: 400;
  max-width: 56ch;
  text-wrap: pretty;
}
.muted { color: var(--ink-3); }
.serif-accent { font-family: var(--serif); font-style: normal; font-weight: 800; color: var(--crimson); }

/* oversized ghost section number */
.ghost-num {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(120px, 22vw, 320px);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px var(--hair-strong);
  letter-spacing: -0.02em;
  user-select: none;
  pointer-events: none;
}

/* ========================================================================
   Buttons
   ======================================================================== */
.btn {
  --bg: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--hair-strong);
  border-radius: 2px;
  transition: border-color .4s var(--ease), background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
  --bg: var(--crimson);
  border-color: var(--crimson);
  color: #fff;
  box-shadow: 0 0 0 0 var(--crimson-glow);
}
.btn--primary:hover {
  box-shadow: 0 14px 40px -12px var(--crimson-glow), 0 0 30px -6px var(--crimson-glow);
  background: #d8352d;
  border-color: #d8352d;
}
.btn--ghost:hover { border-color: var(--ink-3); }
.btn--wa { gap: 11px; }
.btn--wa:hover { border-color: var(--ink-3); color: var(--ink); }
.btn .ico { width: 16px; height: 16px; display: inline-block; }
.btn--lg { padding: 18px 32px; font-size: 13px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  transition: gap .35s var(--ease), color .35s var(--ease);
}
.link-arrow .ar { transition: transform .35s var(--ease); }
.link-arrow:hover { color: var(--crimson); gap: 14px; }
.link-arrow:hover .ar { transform: translateX(4px); }

/* ========================================================================
   Image placeholders — intentional, not lazy
   ======================================================================== */
.ph {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(242,239,233,0.018) 0 2px, transparent 2px 11px),
    linear-gradient(160deg, #15181c 0%, #0d0f11 55%, #0a0b0d 100%);
  border: 1px solid var(--hair);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.ph::after {
  /* low-key cinematic light pooling */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(80% 60% at 70% 18%, rgba(237,107,33,0.10), transparent 60%),
              radial-gradient(70% 90% at 18% 100%, rgba(204,44,36,0.10), transparent 65%);
  pointer-events: none;
}
.ph__tag {
  position: relative;
  z-index: 1;
  margin: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(10,10,11,0.5);
  border: 1px solid var(--hair);
  padding: 6px 10px;
  border-radius: 2px;
  backdrop-filter: blur(4px);
}
.ph__tag b { color: var(--ink-2); font-weight: 500; }

/* ========================================================================
   Scroll reveal
   ======================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(calc(26px * var(--motion)));
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* shield watermark */
.crest-mark { color: var(--crimson); opacity: 0.9; }
.crest-watermark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0.025;
  z-index: 0;
}
.crest-watermark svg { width: min(60vw, 720px); height: auto; }