/* =========================================================
   CANADA MOTOR HOUSE — core design system
   Dark cinematic export-house: graphite + signal red + steel
   ========================================================= */
@import url('fonts.css');

:root{
  /* base / surfaces */
  --bg:        #0a0c0e;
  --bg-2:      #0e1114;
  --surface:   #14181d;
  --surface-2: #1a2026;
  --line:      #262e36;
  --line-soft: #1c232a;

  /* ink */
  --ink:       #eef1f3;
  --ink-soft:  #b6bfc8;
  --ink-mute:  #7d8893;
  --ink-faint: #515b65;

  /* brand */
  --red:       #e4151c;
  --red-bright:#ff2a31;
  --red-deep:  #a50f15;
  --maple:     #e4151c;

  /* chrome / steel for big type */
  --chrome-1:  #ffffff;
  --chrome-2:  #c6cdd4;
  --chrome-3:  #7b858f;

  --radius:    4px;
  --radius-lg: 8px;
  --maxw:      1280px;
  --gutter:    clamp(20px, 5vw, 64px);

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* film grain + vignette overlay */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  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)' opacity='0.035'/%3E%3C/svg%3E");
  opacity:.36;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--red);color:#fff}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:.98;
  text-transform:uppercase;letter-spacing:-.01em;margin:0}
.h-xxl{font-size:clamp(2.6rem,6.8vw,5.9rem)}
.h-xl{font-size:clamp(2.3rem,5.5vw,4.6rem)}
.h-l{font-size:clamp(1.8rem,3.4vw,3rem)}
.h-m{font-size:clamp(1.35rem,2.2vw,1.9rem)}

.chrome{
  background:linear-gradient(176deg,var(--chrome-1) 0%,var(--chrome-2) 38%,var(--chrome-3) 78%,#525c66 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
}
.text-red{color:var(--red)}

.eyebrow{
  font-family:var(--font-mono);font-weight:500;text-transform:uppercase;
  letter-spacing:.34em;font-size:.72rem;color:var(--red);
  display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--red);display:inline-block}
.eyebrow.center::after{content:"";width:26px;height:1px;background:var(--red);display:inline-block}

.lead{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--ink-soft);line-height:1.6;font-weight:400;max-width:60ch}
.muted{color:var(--ink-mute)}
.mono{font-family:var(--font-mono)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);position:relative;z-index:2}
.section{padding-block:clamp(64px,9vw,128px);position:relative}
.section-tight{padding-block:clamp(48px,6vw,84px)}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}

.grid{display:grid;gap:clamp(18px,2.4vw,32px)}

/* technical corner ticks on framed elements */
.framed{position:relative;border:1px solid var(--line)}
.framed::before,.framed::after{content:"";position:absolute;width:9px;height:9px;border:1.5px solid var(--red);opacity:.85}
.framed::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.framed::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ---------- buttons ---------- */
.btn{
  --bd:var(--line);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-mono);font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;font-size:.78rem;
  padding:1.02em 1.7em;border:1px solid var(--bd);border-radius:var(--radius);
  background:transparent;color:var(--ink);cursor:pointer;
  transition:transform .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
  position:relative;overflow:hidden;
}
.btn svg{width:1.05em;height:1.05em}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red:hover{background:var(--red-bright);border-color:var(--red-bright);transform:translateY(-2px)}
.btn-ghost:hover{border-color:var(--ink-soft);background:rgba(255,255,255,.04);transform:translateY(-2px)}
.btn-block{width:100%}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--red);outline-offset:3px}

/* ---------- header ---------- */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding:14px var(--gutter);
  background:linear-gradient(180deg,rgba(8,10,12,.85),rgba(8,10,12,0));
  transition:background .4s var(--ease),border-color .4s var(--ease),padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-head.scrolled{background:rgba(8,10,12,.96);
  border-bottom-color:var(--line-soft);padding-block:9px}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand img{height:66px;width:auto;transition:height .4s var(--ease)}
.scrolled .brand img{height:52px}
.nav{display:flex;align-items:center;gap:clamp(.5rem,2vw,2rem)}
.nav a{font-family:var(--font-mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-soft);padding:.4em 0;position:relative;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--red);transition:width .35s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.head-cta{display:flex;align-items:center;gap:.8rem}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius);
  width:46px;height:46px;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger span{width:20px;height:2px;background:var(--ink);transition:.3s}

/* ---------- footer ---------- */
.site-foot{background:var(--bg-2);border-top:1px solid var(--line-soft);padding-block:clamp(54px,7vw,88px) 28px;position:relative;z-index:2}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(24px,4vw,48px)}
.foot-col h4{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.2em;color:var(--ink-mute);
  text-transform:uppercase;font-weight:500;margin-bottom:1.1rem}
.foot-col a{display:block;color:var(--ink-soft);padding:.28rem 0;font-size:.95rem;transition:color .25s}
.foot-col a:hover{color:var(--red)}
.foot-brand img{height:64px;margin-bottom:1.1rem}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  margin-top:clamp(36px,5vw,56px);padding-top:24px;border-top:1px solid var(--line-soft);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--ink-faint)}

/* ---------- reveal anim ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* pills / tags */
.pill{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-mono);font-size:.68rem;
  text-transform:uppercase;letter-spacing:.12em;padding:.42em .8em;border:1px solid var(--line);
  border-radius:100px;color:var(--ink-soft);background:rgba(255,255,255,.02)}
.pill.red{border-color:rgba(228,21,28,.5);color:#ff7a7e;background:rgba(228,21,28,.08)}
.pill.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red)}

.maple{color:var(--red)}

/* utility */
.stack-sm>*+*{margin-top:.6rem}
.center{text-align:center}
.mx-auto{margin-inline:auto}
.flex{display:flex}
.between{justify-content:space-between}
.items-center{align-items:center}
.gap-sm{gap:.6rem}.gap-md{gap:1rem}.gap-lg{gap:2rem}
.wrap-flex{flex-wrap:wrap}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.4rem}
.hidden{display:none}