/* ==========================================================================
   Performance Racing & Collision — Design foundation
   Tokens, reset, typography, buttons, motifs, placeholders, utilities.
   Visual direction: BRIGHT. White / light gray / silver with graphite type
   and restrained motorsport blue-cyan-red accents. Original identity —
   no OEM or BMW M trade dress.
   ========================================================================== */

:root{
  /* --- Light foundation --- */
  --c-white:      #ffffff;
  --c-paper:      #f7f9fc;   /* cool white */
  --c-warm:       #faf9f7;   /* warm white */
  --c-mist:       #eef1f6;
  --c-silver:     #e2e7ee;
  --c-line:       #e5e9f0;
  --c-line-2:     #d2d9e3;

  /* --- Graphite typography --- */
  --c-graphite:   #0a0a0b;   /* black */
  --c-ink:        #191c20;
  --c-slate:      #545b64;
  --c-slate-2:    #79818c;

  /* --- Brand palette --- */
  --c-cyan:       #81c4ff;   /* light performance blue */
  --c-cyan-2:     #a9d7ff;
  --c-cyan-wash:  #eaf4ff;
  --c-blue:       #16588e;   /* deep racing blue */
  --c-blue-2:     #1d74b8;
  --c-blue-dk:    #0c3a5e;
  --c-red:        #e7222e;   /* accent red */

  --grad-speed: linear-gradient(90deg, var(--c-cyan) 0%, var(--c-blue-2) 34%, var(--c-blue) 62%, var(--c-red) 100%);
  --grad-blue:  linear-gradient(135deg, var(--c-blue-2) 0%, var(--c-blue) 58%, var(--c-blue-dk) 100%);
  --grad-steel: linear-gradient(135deg,#ffffff 0%,#eef2f7 42%,#dfe5ed 60%,#f4f7fa 100%);

  --sh-1: 0 1px 2px rgba(15,20,25,.06), 0 2px 8px rgba(15,20,25,.04);
  --sh-2: 0 2px 6px rgba(15,20,25,.06), 0 12px 30px rgba(15,20,25,.07);
  --sh-3: 0 4px 12px rgba(15,20,25,.08), 0 28px 60px rgba(15,20,25,.10);
  --sh-blue: 0 10px 30px rgba(22,88,142,.26);

  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 5px;

  --container: 1290px;
  --gutter: clamp(18px, 4vw, 46px);
  --section-y: clamp(62px, 7.6vw, 116px);

  --f-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-cond: "Barlow Condensed", "Archivo Narrow", "Helvetica Neue", Arial, sans-serif;

  --header-h: 78px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ 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;
  font-family:var(--f-sans);
  font-size:clamp(15.5px,.4vw + 14.6px,17px);
  line-height:1.62;
  color:var(--c-slate);
  background:var(--c-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }

h1,h2,h3,h4,h5{
  margin:0 0 .5em;
  font-family:var(--f-sans);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.022em;
  color:var(--c-graphite);
  text-wrap:balance;
}
h1{ font-size:clamp(2.35rem,4.6vw,3.95rem); }
h2{ font-size:clamp(1.95rem,3.5vw,3.05rem); }
h3{ font-size:clamp(1.18rem,1.5vw,1.5rem); font-weight:700; letter-spacing:-.014em; }
h4{ font-size:1.02rem; font-weight:700; letter-spacing:-.008em; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--c-blue); text-decoration:none; transition:color .18s var(--ease); }
a:hover{ color:var(--c-blue-2); }

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

:focus-visible{
  outline:3px solid var(--c-cyan);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container--wide{ max-width:1520px; }
.section{ padding-block:var(--section-y); position:relative; }
.section--paper{ background:var(--c-paper); }
.section--mist{ background:linear-gradient(180deg,var(--c-white) 0%,var(--c-paper) 48%,var(--c-mist) 100%); }
.section--tight{ padding-block:clamp(44px,4.6vw,68px); }

.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:14px; top:-70px; z-index:200;
  background:var(--c-graphite); color:#fff; padding:12px 18px;
  font-family:var(--f-cond); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:14px; color:#fff; }

/* ---------- Motorsport motifs ---------- */

/* thin multi-stop racing rule */
.speed-rule{ height:3px; width:96px; background:var(--grad-speed); border-radius:2px; }
.speed-rule--full{ width:100%; height:2px; opacity:.85; }

/* precision grid wash */
.grid-wash{ position:relative; }
.grid-wash::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, rgba(15,20,25,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,20,25,.045) 1px, transparent 1px);
  background-size:86px 86px;
  mask-image:radial-gradient(ellipse 84% 74% at 50% 42%, #000 20%, transparent 78%);
}
.grid-wash > *{ position:relative; z-index:1; }

/* diagonal speed-line texture */
.speed-lines{ position:relative; overflow:hidden; }
.speed-lines::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(112deg, rgba(22,88,142,.06) 0 2px, transparent 2px 15px);
  mask-image:linear-gradient(100deg, #000 0%, transparent 58%);
}

/* eyebrow label */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-cond); font-weight:600; font-size:.93rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--c-blue);
  margin:0 0 16px;
}
.eyebrow::before{
  content:""; width:26px; height:3px; background:var(--grad-speed); border-radius:2px; flex:none;
}
.eyebrow--plain::before{ display:none; }

.section-head{ max-width:760px; margin-bottom:clamp(34px,3.8vw,58px); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .eyebrow{ justify-content:center; }
.lede{ font-size:clamp(1.02rem,.46vw + .96rem,1.2rem); color:var(--c-slate); max-width:62ch; margin:0; }
.section-head--center .lede{ margin-inline:auto; }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--c-white);
  --btn-fg:var(--c-graphite);
  --btn-bd:var(--c-line-2);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; min-height:52px;
  font-family:var(--f-cond); font-weight:600; font-size:1.02rem;
  letter-spacing:.12em; text-transform:uppercase; line-height:1;
  color:var(--btn-fg); background:var(--btn-bg);
  border:1px solid var(--btn-bd); border-radius:var(--r-xs);
  cursor:pointer; overflow:hidden; text-align:center;
  transition:transform .2s var(--ease), box-shadow .24s var(--ease), background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--grad-speed); transform:scaleX(0); transform-origin:left;
  transition:transform .32s var(--ease);
}
.btn:hover::after,.btn:focus-visible::after{ transform:scaleX(1); }
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); }
.btn:active{ transform:translateY(0); }

.btn--primary{ --btn-fg:#fff; --btn-bd:transparent; background:var(--grad-blue); box-shadow:var(--sh-blue); }
.btn--primary:hover{ color:#fff; box-shadow:0 14px 36px rgba(22,88,142,.34); }
.btn--primary::after{ background:linear-gradient(90deg,var(--c-cyan),#fff); }

.btn--dark{ --btn-fg:#fff; --btn-bd:var(--c-graphite); background:var(--c-graphite); }
.btn--dark:hover{ color:#fff; background:#1c242d; }

.btn--ghost{ --btn-bg:transparent; --btn-bd:rgba(15,20,25,.28); }
.btn--ghost:hover{ border-color:var(--c-graphite); background:rgba(255,255,255,.6); }

.btn--light{ --btn-bg:#fff; --btn-bd:var(--c-line-2); box-shadow:var(--sh-1); }

.btn--cyan{ --btn-fg:var(--c-blue-dk); --btn-bd:var(--c-cyan); background:var(--c-cyan-wash); }
.btn--cyan:hover{ background:#d7f0fc; }

.btn--sm{ padding:11px 18px; min-height:42px; font-size:.93rem; }
.btn--lg{ padding:18px 34px; min-height:60px; font-size:1.1rem; }
.btn--block{ width:100%; }
.btn .ico{ width:19px; height:19px; flex:none; }

.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* text link with arrow */
.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-cond); font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--c-blue); font-size:.97rem;
}
.link-arrow svg{ width:16px; height:16px; transition:transform .22s var(--ease); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ---------- Chips / pills ---------- */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; background:rgba(255,255,255,.9);
  border:1px solid var(--c-line); border-radius:var(--r-xs);
  font-family:var(--f-cond); font-weight:600; font-size:.92rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--c-ink);
  white-space:nowrap;
}
.chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--c-cyan); flex:none; }
.chip--solid{ background:var(--c-graphite); color:#fff; border-color:var(--c-graphite); }

/* ---------- Image placeholders ----------
   Real photography is supplied later. Until a path is registered in
   js/site-data.js, these render as tasteful neutral blocks that hold the
   exact final composition and aspect ratio. No broken image boxes.
------------------------------------------------------------------ */
.ph{
  position:relative; overflow:hidden; margin:0;
  background:
    linear-gradient(135deg,#f3f6fa 0%,#e7ecf3 48%,#eef2f7 100%);
  isolation:isolate;
}
.ph[data-ratio]{ aspect-ratio:var(--ratio, 4/3); }
.ph::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(15,20,25,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,20,25,.055) 1px, transparent 1px);
  background-size:34px 34px;
}
.ph::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(118deg, rgba(129,196,255,.16) 0%, rgba(129,196,255,0) 42%),
    linear-gradient(300deg, rgba(22,88,142,.09) 0%, rgba(22,88,142,0) 46%);
}
.ph__tag{
  position:absolute; left:10px; bottom:10px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 9px; max-width:calc(100% - 20px);
  background:rgba(255,255,255,.82); border:1px solid rgba(15,20,25,.09);
  font-family:var(--f-cond); font-size:.72rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--c-slate-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  backdrop-filter:blur(3px);
}
.ph__tag::before{ content:""; width:5px; height:5px; background:var(--c-cyan); flex:none; }
/* Images are taken out of flow so a photo's intrinsic height can never
   inflate the box it was placed in — the layout owns the geometry, the
   photograph fills it. */
.ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:3; }
/* a real photograph is in — drop the placeholder grid and tint */
.ph.has-img{ background:none; }
.ph.has-img::before,.ph.has-img::after{ display:none; }
.ph--dark{ background:linear-gradient(135deg,#e4e9f0 0%,#d8dfe8 52%,#e9eef4 100%); }

/* ---------- Scroll reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(20px); }
[data-reveal].is-in{ opacity:1; transform:none; transition:opacity .72s var(--ease), transform .72s var(--ease); }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1!important; transform:none!important; transition:none!important; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}