/* ==========================================================================
   Fazey Automotive — critical.less  (above the fold: tokens, base, header, hero)
   Stack: Eleventy · LESS · CodeStitch. Mobile-first. Nesting ≤ 1 level.
   ========================================================================== */

:root {
  /* Palette */
  --cs-primary: #16181D;
  --cs-primary-light: #23262E;
  --cs-surface: #F4F2ED;
  --cs-white: #FBFAF7;

  /* Accent (hi-vis amber — use sparingly) */
  --cs-accent: #F5A623;
  --cs-accent-dark: #D9880B;
  --cs-accent-soft: #FBE4B8;
  --cs-steel: #5C6672;
  --cs-steel-light: #8A93A0;

  /* Text */
  --cs-text-body: #2A2D34;
  --cs-text-muted: #5F6570;
  --cs-on-dark: rgba(251, 250, 247, 0.72);
  --cs-on-dark-strong: #FBFAF7;
  --cs-border: #E2DED5;
  --cs-border-dark: rgba(251, 250, 247, 0.14);

  /* Type stacks */
  --cs-font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --cs-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --cs-font-mono: 'DM Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Layout */
  --cs-section-padding: clamp(3.75rem, 8vw, 7rem);
  --cs-container-max: 80rem;
  --cs-content-max: 46rem;
  --cs-radius: 4px;
  --cs-chamfer: 14px;
  --cs-ease: 0.3s ease;
  --cs-shadow: 0 18px 40px -18px rgba(22, 24, 29, 0.35);
  color-scheme: light;
}

/* ---- Reset ---- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cs-white);
  color: var(--cs-text-body);
  font-family: var(--cs-font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--cs-accent); outline-offset: 3px; }

/* ==========================================================================
   Base (mobile-first)
   ========================================================================== */
@media only screen and (min-width: 0rem) {

  h1, h2, h3 {
    margin: 0;
    font-family: var(--cs-font-display);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--cs-primary);
  }

  .cs-container {
    width: 100%;
    max-width: var(--cs-container-max);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
  }

  .cs-section { position: relative; padding-block: var(--cs-section-padding); }

  .cs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    font-family: var(--cs-font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cs-accent-dark);
  }
  .cs-eyebrow::before { content: ""; width: 2rem; height: 1px; background: var(--cs-accent); }
  .cs-eyebrow.cs-on-dark { color: var(--cs-accent); }

  .cs-h2 { font-size: clamp(2rem, 4.6vw, 3.25rem); }
  .cs-lead { max-width: var(--cs-content-max); font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--cs-text-muted); }

  /* Buttons */
  .cs-button-solid,
  .cs-button-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 1.6rem;
    border: 2px solid transparent;
    font-family: var(--cs-font-mono);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--cs-ease);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  }
  .cs-button-solid { background: var(--cs-accent); color: var(--cs-primary); }
  .cs-button-solid:hover { background: var(--cs-accent-dark); transform: translateY(-2px); }
  .cs-button-ghost { background: transparent; color: var(--cs-primary); border-color: var(--cs-border); }
  .cs-button-ghost:hover { background: var(--cs-primary); color: var(--cs-white); border-color: var(--cs-primary); }
  .cs-button-ghost.cs-on-dark { color: var(--cs-on-dark-strong); border-color: var(--cs-border-dark); }
  .cs-button-ghost.cs-on-dark:hover { background: var(--cs-white); color: var(--cs-primary); border-color: var(--cs-white); }

  .cs-cut { clip-path: polygon(var(--cs-chamfer) 0, 100% 0, 100% calc(100% - var(--cs-chamfer)), calc(100% - var(--cs-chamfer)) 100%, 0 100%, 0 var(--cs-chamfer)); }

  /* Header */
  .cs-header {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid transparent;
    transition: background var(--cs-ease), box-shadow var(--cs-ease), border-color var(--cs-ease);
  }
  .cs-header.cs-scrolled { background: var(--cs-primary); border-bottom-color: var(--cs-border-dark); box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.6); }

  .cs-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.85rem; }
  .cs-logo { display: flex; align-items: center; gap: 0.65rem; }
  .cs-logo img { width: 40px; height: 40px; }
  .cs-logo-word { font-family: var(--cs-font-display); text-transform: uppercase; line-height: 0.95; color: var(--cs-white); }
  .cs-logo-word b { display: block; font-size: 1.15rem; font-weight: 600; font-style: italic; letter-spacing: 0.04em; }
  .cs-logo-word span { display: block; font-family: var(--cs-font-mono); font-size: 0.6rem; font-weight: 400; letter-spacing: 0.42em; color: var(--cs-on-dark); }

  .cs-nav-links { display: none; }
  .cs-nav-actions { display: flex; align-items: center; gap: 0.75rem; }
  .cs-nav-phone { display: none; font-family: var(--cs-font-mono); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.04em; color: var(--cs-white); }
  .cs-nav-phone:hover { color: var(--cs-accent); }

  .cs-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0 11px; background: var(--cs-primary-light); border: 1px solid var(--cs-border-dark); cursor: pointer; }
  .cs-toggle span { display: block; height: 2px; background: var(--cs-white); transition: transform var(--cs-ease), opacity var(--cs-ease); }
  .cs-nav.cs-open .cs-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .cs-nav.cs-open .cs-toggle span:nth-child(2) { opacity: 0; }
  .cs-nav.cs-open .cs-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .cs-mobile { position: fixed; inset: 0; z-index: 999; display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; padding: 2rem clamp(1rem, 6vw, 3rem); background: var(--cs-primary); transform: translateY(-100%); visibility: hidden; transition: transform 0.35s ease; }
  .cs-mobile.cs-open { transform: translateY(0); visibility: visible; }
  .cs-mobile a { padding-block: 0.4rem; border-bottom: 1px solid var(--cs-border-dark); font-family: var(--cs-font-display); font-size: 2rem; text-transform: uppercase; color: var(--cs-on-dark-strong); }
  .cs-mobile a:hover { color: var(--cs-accent); }
  .cs-mobile .cs-mobile-call { margin-top: 1.25rem; border: none; font-family: var(--cs-font-mono); font-size: 1rem; letter-spacing: 0.1em; color: var(--cs-accent); }

  /* Hero */
  .cs-hero { position: relative; overflow: hidden; padding-top: calc(6.5rem + env(safe-area-inset-top, 0px)); padding-bottom: clamp(3.5rem, 7vw, 6rem); background: var(--cs-primary); color: var(--cs-on-dark); }
  .cs-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-image: linear-gradient(var(--cs-border-dark) 1px, transparent 1px), linear-gradient(90deg, var(--cs-border-dark) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 70%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 70%); }
  .cs-hero-grid { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
  .cs-hero h1 { margin: 0.4rem 0 1.25rem; font-size: clamp(2.6rem, 8.5vw, 5rem); color: var(--cs-white); }
  .cs-hero h1 em { font-style: normal; color: var(--cs-accent); }
  .cs-hero-sub { max-width: 38ch; margin-bottom: 2rem; font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--cs-on-dark); }
  .cs-hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 2.25rem; }
  .cs-chips { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin: 0; padding: 0; list-style: none; font-family: var(--cs-font-mono); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--cs-on-dark-strong); }
  .cs-chips li { display: flex; align-items: center; gap: 0.5rem; }
  .cs-chips li::before { content: ""; width: 8px; height: 8px; background: var(--cs-accent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
  .cs-hero-media { position: relative; }
  .cs-hero-media::before { content: ""; position: absolute; left: -14px; top: -14px; width: 42%; height: 42%; z-index: 0; background: var(--cs-accent); clip-path: polygon(0 0, 100% 0, 0 100%); }
  .cs-hero-media img { position: relative; z-index: 1; width: 100%; clip-path: polygon(var(--cs-chamfer) 0, 100% 0, 100% calc(100% - var(--cs-chamfer)), calc(100% - var(--cs-chamfer)) 100%, 0 100%, 0 var(--cs-chamfer)); }
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media only screen and (min-width: 48rem) {
  .cs-hero-cta { gap: 1rem; }
  .cs-nav-phone { display: inline-flex; }
}

/* ==========================================================================
   Desktop
   ========================================================================== */
@media only screen and (min-width: 64rem) {
  .cs-nav-links { display: flex; gap: 2rem; font-family: var(--cs-font-mono); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; }
  .cs-nav-links a { position: relative; padding-block: 0.3rem; color: var(--cs-on-dark-strong); }
  .cs-nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--cs-accent); transition: width var(--cs-ease); }
  .cs-nav-links a:hover::after { width: 100%; }
  .cs-toggle { display: none; }
  .cs-hero-grid { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
}