/* ==========================================================================
   HAYES MOBILE MECHANIC
   Punk / neubrutalist. Hard borders, hard shadows, zero radius, no gradients.
   Palette is contrast-validated — see the rules block below before changing it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS  —  black & yellow
   Contrast (WCAG AA needs 4.5:1 normal text, 3:1 large bold):
     ink   on paper .. 15.84  AAA      paper on ink ... 15.84  AAA
     ink   on gold ... 12.85  AAA      gold  on ink ... 12.85  AAA
     ink   on white .. 17.89  AAA      gold  on steel . 12.21  AAA
     chalk on ink ....  9.41  AAA      chalk on steel .  8.94  AAA
     paper on steel .. 15.06  AAA      smoke on paper .  5.31  AA
   RULE: gold is a BACKGROUND for ink text, or LARGE display text on ink.
         Never gold for small text on paper (1.23:1 — invisible).
         White on gold is 1.39:1 and must never be used.
   -------------------------------------------------------------------------- */
:root {
  --ink:    #101820;   /* Steelers black (PMS Black 6 C)      */
  --steel:  #141D27;   /* raised dark surface                */
  --grease: #1E2D3B;   /* dark borders on dark               */
  --paper:  #F4F1E8;   /* newsprint / photocopy stock        */
  --white:  #FFFFFF;   /* card stock                         */
  --gold:   #FFD800;   /* brand yellow                       */
                       /* the ONLY accent — logo matches it exactly */
  --smoke:  #5A6472;   /* muted text on paper                */
  --chalk:  #B4BDC7;   /* muted text on ink                  */
  --ghost:  #7C8698;   /* placeholder text only — never real content */

  /* colours as channels, so rgba() overlays stay on-palette */
  --ink-rgb:  16, 24, 32;
  --gold-rgb: 255, 216, 0;

  /* Halftone grain. Defined once so every ink surface that uses it stays
     identical — a flat panel next to a grained one reads as a colour mismatch
     even when both are exactly --ink. */
  --grain: radial-gradient(rgba(var(--gold-rgb), .09) 1px, transparent 1.1px);
  --grain-size: 14px 14px;

  --bd:      3px;                    /* standard border weight   */
  --bd-thick: 4px;
  --sh:      5px  5px 0 var(--ink);  /* hard offset shadow       */
  --sh-lg:   8px  8px 0 var(--ink);
  --sh-gd:   5px  5px 0 var(--gold);
  --sh-pp:   5px  5px 0 var(--paper);

  --wrap: 1200px;
  --hdr-h: 64px;

  /* 4/8pt spacing rhythm */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --fast: 140ms;
  --med:  220ms;
  --ease: cubic-bezier(.22,.61,.36,1);

  --f-disp: 'Anton', Impact, 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --f-body: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 24px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--f-body);
  overflow-x: hidden;           /* belt-and-braces: rotated stickers */
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

/* Any explicit display: value beats the UA stylesheet's [hidden] rule, so the
   hidden attribute silently stops working. Restore it globally, once. */
[hidden] { display: none !important; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, blockquote, figure { margin: 0; }
button { font: inherit; color: inherit; }
a { color: inherit; }

/* Focus: always visible, always on-brand */
:focus-visible {
  outline: var(--bd) solid var(--gold);
  outline-offset: 3px;
}
.sec--gold :focus-visible,
.btn--gold:focus-visible { outline-color: var(--ink); }

.skip-link {
  position: absolute; left: var(--s4); top: -100px;
  z-index: 200;
  background: var(--gold); color: var(--ink);
  border: var(--bd) solid var(--ink);
  padding: var(--s3) var(--s5);
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none;
  transition: top var(--fast) var(--ease);
}
.skip-link:focus { top: var(--s4); }

.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s5);
}

/* --------------------------------------------------------------------------
   TYPE
   -------------------------------------------------------------------------- */
.stencil, .hero__h1 .line, .vs__h3, .badge__big, .step__n {
  font-family: var(--f-disp);
  font-weight: 400;              /* Anton ships one weight */
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: .005em;
}

.sec__h2 {
  font-size: clamp(2.1rem, 7vw, 4rem);
  margin-bottom: var(--s4);
}
.stencil {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  border: var(--bd) solid var(--ink);
  box-shadow: var(--sh);
  padding: var(--s2) var(--s4) var(--s1);
  transform: rotate(-1.2deg);
}
.stencil--light { box-shadow: var(--sh-pp); }

.sec__lead {
  font-size: 1.06rem;
  max-width: 62ch;
  color: var(--smoke);
  margin-bottom: var(--s7);
}
.sec__lead--light { color: var(--chalk); }
.sec__h2--light   { color: var(--paper); }

.kicker {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
}
.kicker--gold { color: var(--gold); }
.dot {
  width: 9px; height: 9px;
  background: var(--gold);
  border: 2px solid var(--ink);
}
.kicker--gold .dot { border-color: var(--gold); background: var(--gold); }

.ilink {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold);
  font-weight: 700;
}
.ilink:hover { background: var(--gold); text-decoration-color: var(--ink); }
.sec--ink .ilink, .sec__lead--light .ilink { color: var(--paper); }
.sec--ink .ilink:hover { color: var(--ink); }
/* On a gold section a gold underline is invisible, which leaves the link
   indistinguishable from bold body text. Swap it to ink. */
.sec--gold .ilink { text-decoration-color: var(--ink); }
.sec--gold .ilink:hover { background: var(--ink); color: var(--gold); text-decoration-color: var(--gold); }

/* --------------------------------------------------------------------------
   SECTIONS
   -------------------------------------------------------------------------- */
.sec { padding: var(--s9) 0; }
.sec--paper { background: var(--paper); color: var(--ink); }
.sec--ink   { background: var(--ink);   color: var(--paper); }
.sec--gold { background: var(--gold); color: var(--ink); }
.sec--gold .sec__lead { color: var(--ink); }

/* section seams: hard rules, never soft */
.sec--ink, .sec--gold { border-block: var(--bd-thick) solid var(--ink); }

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  min-height: 48px;                      /* touch target */
  padding: var(--s3) var(--s5);
  background: var(--btn-bg); color: var(--btn-fg);
  border: var(--bd) solid var(--ink);
  box-shadow: var(--sh);
  font-weight: 700; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              background var(--fast) var(--ease);
}
/* press = shadow collapses into the button. No layout shift: transform only. */
.btn:hover  { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }

.btn--gold { --btn-bg: var(--gold); --btn-fg: var(--ink); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--paper);
  border-color: var(--paper);
  box-shadow: var(--sh-pp);
}
.btn--ghost:hover {
  --btn-bg: var(--paper); --btn-fg: var(--ink);
  box-shadow: 3px 3px 0 var(--paper);
}

.btn--lg    { min-height: 56px; padding: var(--s4) var(--s6); font-size: 1.02rem; }
.btn--block { width: 100%; }

.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: var(--sh); }

/* --------------------------------------------------------------------------
   HAZARD TICKER
   -------------------------------------------------------------------------- */
.ticker {
  background: var(--gold);
  border-bottom: var(--bd) solid var(--ink);
  overflow: hidden;
  padding: 6px 0;
}
.ticker__track {
  display: flex; width: max-content;
  animation: slide 38s linear infinite;
}
.ticker__set {
  display: flex; align-items: center; gap: var(--s4);
  padding-right: var(--s4);
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  white-space: nowrap;
  color: var(--ink);
}
.ticker__set i { font-style: normal; opacity: .55; }
@keyframes slide { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 100;
  /* Same grain as the hero — without it the flat header reads as a slightly
     different black against the grained hero directly below it. */
  background-color: var(--ink);
  background-image: var(--grain);
  background-size: var(--grain-size);
  border-bottom: var(--bd) solid var(--gold);
}
.hdr__in {
  display: flex; align-items: center; gap: var(--s4);
  min-height: var(--hdr-h);
}

.logo {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px;                    /* touch target */
  text-decoration: none; color: var(--paper);
  margin-right: auto;
}
.logo__mark {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  background: var(--gold); color: var(--ink);
  border: var(--bd) solid var(--gold);
}
.logo__txt { display: flex; flex-direction: column; line-height: 1; }
.logo__txt b {
  font-family: var(--f-disp); font-weight: 400;
  font-size: 1.35rem; letter-spacing: .02em;
  text-transform: uppercase;
}
.logo__txt small {
  font-size: .56rem; font-weight: 700;
  letter-spacing: .17em; color: var(--gold);
  text-transform: uppercase;
  margin-top: 2px;
}

.nav__list { display: flex; align-items: center; gap: var(--s1); }
.nav__list a {
  display: flex; align-items: center;
  min-height: 44px;                    /* touch target */
  padding: var(--s2) var(--s3);
  font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--paper);
  text-decoration: none;
  border: 2px solid transparent;
}
.nav__list a:hover { background: var(--gold); color: var(--ink); }
.nav__list a[aria-current="true"] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.hdr__call {
  box-shadow: 3px 3px 0 var(--gold);
  border-color: var(--gold);
  white-space: nowrap;        /* never let the number break across two lines */
  flex: none;
}
.hdr__call:hover { box-shadow: 1px 1px 0 var(--gold); }

.burger {
  display: none;
  width: 48px; height: 48px; flex: none;
  background: transparent;
  border: var(--bd) solid var(--gold);
  cursor: pointer;
  padding: 12px 10px;
}
.burger span {
  display: block; height: 3px; background: var(--gold);
  transition: transform var(--med) var(--ease), opacity var(--fast) linear;
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink); color: var(--paper);
  padding: var(--s9) 0 var(--s8);
  overflow: hidden;
  border-bottom: var(--bd-thick) solid var(--gold);
}
/* halftone dot grain — pure CSS, no image request.
   Alpha lives in --grain itself, so no opacity here or it would compound. */
.hero__grain {
  position: absolute; inset: 0;
  background-image: var(--grain);
  background-size: var(--grain-size);
  pointer-events: none;
}
/* Two columns on desktop: type left, logo right. The logo column is sized in
   fr rather than a fixed px so the headline always wins the space it needs. */
.hero__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .38fr);
  align-items: center;
  gap: var(--s8);
}
/* Makes the headline size against THIS column rather than the viewport, so it
   can't wrap when the logo takes width away from it. */
.hero__copy { min-width: 0; container-type: inline-size; }

/* The client's logo is an illustrative mark — it needs real size to read, so it
   sits here at size rather than being crushed into the 44px header bar. */
.hero__logo {
  width: 100%;
  height: auto;
  max-height: 430px;
  object-fit: contain;
  justify-self: center;
}

/* The longest line — WE COME TO YOU — must stay on ONE line at every width.
   In Anton it needs roughly 6.4x its font-size in width, so the ceiling is
   ~15.5cqi of the copy column; 14.5 leaves margin. Do not raise it.
   The vw line is the fallback for engines without container query units. */
.hero__h1 {
  font-size: clamp(2.9rem, 11vw, 7.2rem);
  font-size: clamp(2.9rem, 14.5cqi, 7.2rem);
  margin: var(--s4) 0 var(--s5);
  letter-spacing: -.01em;
}
.hero__h1 .line { display: block; }
.hero__h1 .line--gold { color: var(--gold); }

/* Struck-through DEALERSHIP — the whole thesis in one gesture.
   Uses the native line-through rather than a positioned pseudo-element: the
   browser places it on the font's own strikeout metric, so it stays optically
   centred at every clamp() size instead of needing a magic % per breakpoint. */
.hero__h1 .strike {
  display: inline-block;
  text-decoration: line-through;
  text-decoration-color: var(--gold);
  text-decoration-thickness: clamp(6px, 1.1vw, 14px);
  text-decoration-skip-ink: none;
}

.hero__sub {
  font-size: clamp(1.02rem, 2.4vw, 1.28rem);
  max-width: 56ch;
  color: var(--chalk);
  margin-bottom: var(--s7);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s4); margin-bottom: var(--s8); }

.hero__proof {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: var(--bd) solid var(--grease);
  padding-top: var(--s5);
}
.hero__proof li {
  display: flex; align-items: flex-start; gap: var(--s2);
  font-size: .92rem; font-weight: 500;
}
.hero__proof svg { flex: none; color: var(--gold); margin-top: 2px; }

/* --------------------------------------------------------------------------
   THE RACKET (vs. table)
   -------------------------------------------------------------------------- */
.racket {
  background: var(--paper);
  padding: var(--s9) 0;
}
.vs {
  display: grid; gap: var(--s5);
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
}
.vs__col {
  border: var(--bd) solid var(--ink);
  padding: var(--s5);
  box-shadow: var(--sh);
}
.vs__col--bad  { background: var(--white); }
.vs__col--good { background: var(--gold); }

.vs__h3 {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: var(--bd) solid var(--ink);
}
.vs__list li {
  position: relative;
  padding-left: var(--s6);
  padding-block: var(--s3);
  font-size: .98rem;
  border-bottom: 2px dashed rgba(var(--ink-rgb), .22);
}
.vs__list li:last-child { border-bottom: 0; padding-bottom: 0; }

/* bad column gets ✗, good column gets ✓ — icon, not just colour */
.vs__col--bad .vs__list li::before,
.vs__col--good .vs__list li::before {
  position: absolute; left: 0; top: var(--s3);
  font-family: var(--f-body); font-weight: 700; font-size: 1.15rem;
  line-height: 1.4;
}
.vs__col--bad  .vs__list li::before { content: '✗'; color: var(--smoke); }
.vs__col--good .vs__list li::before { content: '✓'; color: var(--ink); }

.vs__slash {
  align-self: center;
  font-family: var(--f-disp); font-size: 2.2rem;
  background: var(--ink); color: var(--gold);
  border: var(--bd) solid var(--ink);
  padding: var(--s3) var(--s4) var(--s2);
  transform: rotate(-6deg);
}

/* --------------------------------------------------------------------------
   SERVICE CARDS
   -------------------------------------------------------------------------- */
.cards {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.card {
  background: var(--white);
  border: var(--bd) solid var(--ink);
  box-shadow: var(--sh);
  padding: var(--s5);
  transition: transform var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.card:hover { transform: translate(-2px, -2px); box-shadow: var(--sh-lg); }
.card__ico {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  background: var(--gold); color: var(--ink);
  border: var(--bd) solid var(--ink);
  margin-bottom: var(--s4);
}
.card__ico svg { width: 26px; height: 26px; }
.card h3 {
  font-family: var(--f-disp); font-weight: 400;
  text-transform: uppercase;
  font-size: 1.4rem; line-height: 1.05;
  margin-bottom: var(--s2);
}
.card p { font-size: .94rem; color: var(--smoke); }

/* honesty block */
.honest {
  margin-top: var(--s7);
  background: var(--ink); color: var(--paper);
  border: var(--bd) solid var(--ink);
  box-shadow: var(--sh);
  padding: var(--s6);
}
.honest__h3 {
  font-family: var(--f-disp); font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  color: var(--gold);
  margin-bottom: var(--s3);
}
.honest p { color: var(--chalk); max-width: 70ch; font-size: 1rem; }
.honest strong { color: var(--paper); }

/* --------------------------------------------------------------------------
   STEPS
   -------------------------------------------------------------------------- */
.steps {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  counter-reset: step;
}
.step {
  position: relative;
  background: var(--steel);
  border: var(--bd) solid var(--gold);
  padding: var(--s6) var(--s5) var(--s5);
}
.step__n {
  position: absolute; top: calc(var(--s5) * -1); left: var(--s5);
  font-size: 2.4rem;
  background: var(--gold); color: var(--ink);
  border: var(--bd) solid var(--ink);
  padding: var(--s1) var(--s3) 0;
}
.step h3 {
  font-family: var(--f-disp); font-weight: 400;
  text-transform: uppercase;
  font-size: 1.45rem; line-height: 1.05;
  color: var(--paper);
  margin: var(--s4) 0 var(--s2);
}
.step p { color: var(--chalk); font-size: .95rem; }

/* --------------------------------------------------------------------------
   GALLERY
   -------------------------------------------------------------------------- */
.gal {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.gal__btn {
  display: block; width: 100%; padding: 0;
  background: var(--white);
  border: var(--bd) solid var(--ink);
  box-shadow: var(--sh);
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.gal__btn:hover { transform: translate(-2px, -2px); box-shadow: var(--sh-lg); }
.gal__btn img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-bottom: var(--bd) solid var(--ink);
}
.gal__cap {
  display: block;
  padding: var(--s3) var(--s4);
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  text-align: left;
}

/* --------------------------------------------------------------------------
   REVIEWS
   -------------------------------------------------------------------------- */
.revs {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.rev {
  background: var(--white);
  border: var(--bd) solid var(--ink);
  box-shadow: var(--sh);
  padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
}
.rev__stars { display: flex; gap: 2px; color: var(--ink); }
.rev blockquote {
  font-size: 1.02rem; line-height: 1.55;
  flex: 1;
}
.rev blockquote::before { content: '“'; }
.rev blockquote::after  { content: '”'; }
.rev cite {
  font-style: normal; font-weight: 700;
  font-size: .88rem; text-transform: uppercase; letter-spacing: .08em;
  padding-top: var(--s3);
  border-top: 2px solid var(--ink);
}
.rev cite span {
  display: block;
  font-weight: 400; letter-spacing: .04em;
  color: var(--smoke); text-transform: none;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   SERVICE AREA
   -------------------------------------------------------------------------- */
.area {
  display: grid; gap: var(--s8);
  grid-template-columns: 1.4fr .9fr;
  align-items: start;
}
.towns {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-bottom: var(--s5);
}
.towns li {
  background: var(--white);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: var(--s2) var(--s3);
  font-size: .84rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.area__note {
  font-size: .95rem; color: var(--smoke);
  border-left: var(--bd) solid var(--gold);
  padding-left: var(--s4);
}
.area__note strong { color: var(--ink); }

.area__badge { display: grid; place-items: center; }
.badge {
  display: grid; place-items: center; gap: var(--s1);
  aspect-ratio: 1;
  width: 100%; max-width: 300px;
  background: var(--gold);
  border: var(--bd-thick) solid var(--ink);
  box-shadow: var(--sh-lg);
  padding: var(--s5);
  text-align: center;
  transform: rotate(-3.5deg);
}
.badge__top, .badge__bot {
  font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
}
.badge__big { font-size: clamp(2.6rem, 8vw, 4rem); }
.badge__bot { border-top: 2px solid var(--ink); padding-top: var(--s2); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--s3); max-width: 860px; }
.faq__i {
  background: var(--steel);
  border: var(--bd) solid var(--grease);
}
.faq__i[open] { border-color: var(--gold); }
.faq__i summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  min-height: 56px;
  padding: var(--s4) var(--s5);
  cursor: pointer;
  font-weight: 700; font-size: 1rem;
  color: var(--paper);
  list-style: none;
}
.faq__i summary::-webkit-details-marker { display: none; }
/* Anton's '+' and '–' glyphs are tiny relative to its caps, so this uses the
   body face at a heavier weight to keep the affordance readable. */
.faq__i summary::after {
  content: '+';
  flex: none;
  width: 22px; text-align: center;
  font-family: var(--f-body); font-weight: 700;
  font-size: 1.9rem; line-height: 1;
  color: var(--gold);
}
.faq__i[open] summary::after { content: '–'; }
.faq__i summary:hover { background: var(--grease); }
.faq__a {
  padding: 0 var(--s5) var(--s5);
  color: var(--chalk);
  font-size: .97rem;
  max-width: 66ch;
}

/* --------------------------------------------------------------------------
   CONTACT + FORM
   -------------------------------------------------------------------------- */
/* minmax(0,…) not plain fr: a long unbreakable token (the email address) has a
   min-content width that otherwise forces the track wider than the container
   and pushes the whole page into horizontal scroll on narrow phones. */
.contact {
  display: grid; gap: var(--s8);
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: start;
}

.contact__direct { display: grid; gap: var(--s4); }
.contact__direct li {
  display: flex; align-items: center; gap: var(--s3);
  min-width: 0;
  font-size: 1.06rem; font-weight: 700;
}
/* Client email length is a placeholder — let it break rather than blow out. */
.contact__direct a { min-width: 0; overflow-wrap: anywhere; }
.contact__ico {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  background: var(--gold); color: var(--ink);
  border: var(--bd) solid var(--ink);
}
/* These are the primary conversion path, not inline prose links — give them a
   full 44px target rather than the 27px a bare text link would get. */
.contact__direct a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.contact__direct a:hover { text-decoration: underline; text-decoration-thickness: 3px; }

.form {
  background: var(--white);
  border: var(--bd-thick) solid var(--ink);
  box-shadow: var(--sh-lg);
  padding: var(--s6);
  display: grid; gap: var(--s5);
}
.form__req { font-size: .84rem; color: var(--smoke); margin: 0; }
.req { color: var(--ink); background: var(--gold); padding: 0 4px; font-weight: 700; }

.field { display: grid; gap: var(--s2); }
.field-row { display: grid; gap: var(--s5); grid-template-columns: 1fr 1fr; }

.field label {
  font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;                 /* touch target */
  padding: var(--s3) var(--s4);
  font: 400 16px/1.5 var(--f-body); /* 16px stops iOS zoom-on-focus */
  color: var(--ink);
  background: var(--paper);
  border: var(--bd) solid var(--ink);
  transition: box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101820' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s4) center;
  background-size: 18px;
  padding-right: var(--s8);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  background: var(--white);
  box-shadow: var(--sh-gd);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ghost); }

.hint { font-size: .8rem; color: var(--smoke); margin: 0; }

/* errors carry an icon + text, never colour alone */
.err {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: .84rem; font-weight: 700;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
  padding: var(--s2) var(--s3);
  margin: 0;
}
.err::before { content: '!'; flex: none; font-weight: 700; }
.field[data-invalid] input,
.field[data-invalid] select,
.field[data-invalid] textarea {
  border-width: var(--bd-thick);
  background: #FDF6E6;   /* warm-neutral invalid tint, keyed to gold */
}

.form__fine { font-size: .82rem; color: var(--smoke); margin: 0; }

/* submit spinner */
.btn.is-busy .btn__label { opacity: .55; }
.btn.is-busy::after {
  content: ''; width: 17px; height: 17px;
  border: 3px solid currentColor; border-top-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.ftr {
  background: var(--ink); color: var(--paper);
  border-top: var(--bd-thick) solid var(--gold);
  padding-top: var(--s8);
}
.ftr__in {
  display: grid; gap: var(--s7);
  grid-template-columns: 1.7fr 1fr 1fr;
  padding-bottom: var(--s7);
}
.ftr__logo { width: auto; height: 168px; margin-bottom: var(--s5); }
.ftr__blurb { color: var(--chalk); font-size: .93rem; max-width: 42ch; }

.ftr h2 {
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--gold);
  margin-bottom: var(--s4);
}
.ftr__nav ul, .ftr__contact ul { display: grid; gap: var(--s2); }
.ftr__nav a, .ftr__contact a {
  text-decoration: none; font-size: .93rem; color: var(--chalk);
  display: inline-block; padding: 3px 0;
  overflow-wrap: anywhere;          /* same long-email guard as .contact */
}
.ftr__nav a:hover, .ftr__contact a:hover { color: var(--gold); }
.ftr__contact li { font-size: .93rem; color: var(--chalk); min-width: 0; }

.ftr__social { display: flex !important; gap: var(--s3); margin-top: var(--s4); }
.ftr__social a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 2px solid var(--chalk); color: var(--chalk);
}
.ftr__social a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.ftr__base {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  justify-content: space-between;
  border-top: 2px solid var(--grease);
  padding-block: var(--s5);
  font-size: .82rem; color: var(--smoke);
}
.ftr__by a { color: var(--chalk); text-decoration-color: var(--gold); }

/* --------------------------------------------------------------------------
   MOBILE CALL BAR
   -------------------------------------------------------------------------- */
.callbar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: var(--ink);
  border-top: var(--bd) solid var(--gold);
  padding: var(--s2);
  padding-bottom: max(var(--s2), env(safe-area-inset-bottom));
  gap: var(--s2);
}
.callbar a {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 52px;
  font-size: .92rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none;
  border: var(--bd) solid var(--gold);
}
.callbar__call  { background: var(--gold); color: var(--ink); }
.callbar__quote { background: transparent;  color: var(--gold); }

/* --------------------------------------------------------------------------
   LIGHTBOX
   -------------------------------------------------------------------------- */
.lb { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; }
.lb[hidden] { display: none; }
.lb__scrim { position: absolute; inset: 0; background: rgba(var(--ink-rgb), .93); }
.lb__panel {
  position: relative;
  display: grid; place-items: center;
  gap: var(--s4);
  width: min(94vw, 1000px);
  padding: var(--s4);
}
.lb__img {
  max-width: 100%; max-height: 74vh;
  border: var(--bd-thick) solid var(--gold);
  background: var(--steel);
}
.lb__cap {
  font-size: .88rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--gold);
  text-align: center;
}
.lb__x, .lb__nav {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  background: var(--ink); color: var(--gold);
  border: var(--bd) solid var(--gold);
  cursor: pointer;
}
.lb__x { top: calc(var(--s6) * -1); right: 0; }
.lb__nav--prev { left: calc(var(--s7) * -1); top: 50%; transform: translateY(-50%); }
.lb__nav--next { right: calc(var(--s7) * -1); top: 50%; transform: translateY(-50%); }
.lb__x:hover, .lb__nav:hover { background: var(--gold); color: var(--ink); }

body.lb-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   SCROLL REVEAL (opacity+transform only — no reflow)
   -------------------------------------------------------------------------- */
/* Uses the independent `translate` property, NOT `transform` — several reveal
   targets (.badge) carry a `transform: rotate()` sticker angle, and animating
   `transform` here would flatten it back to square on reveal. */
.reveal { opacity: 0; translate: 0 18px; }
.reveal.in {
  opacity: 1; translate: 0 0;
  transition: opacity 420ms var(--ease), translate 420ms var(--ease);
}

/* ==========================================================================
   BREAKPOINTS — 1024 / 768 / 480
   ========================================================================== */
/* Six nav items + logo + a full phone number stop fitting well before the
   mobile breakpoint, so the header call button goes icon-only here. */
@media (min-width: 769px) and (max-width: 1150px) {
  .hdr__in { gap: var(--s3); }
  .hdr__call span { display: none; }
  .hdr__call { padding: var(--s3); min-width: 48px; }
  .nav__list a { padding: var(--s2) var(--s2); font-size: .78rem; }
}

@media (max-width: 1024px) {
  .area, .contact { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  /* 4 trust points across 3 columns leaves an orphan — force a clean 2×2 */
  .hero__proof { grid-template-columns: repeat(2, 1fr); }

  /* Hero stacks: logo goes back above the headline, sized to not eat the fold */
  .hero__in { grid-template-columns: 1fr; gap: var(--s6); }
  .hero__logo {
    grid-row: 1;
    width: auto;
    height: clamp(120px, 22vw, 210px);
    justify-self: start;
  }
  .area__badge { justify-items: start; }
  .ftr__in { grid-template-columns: 1fr 1fr; }
  .ftr__brand { grid-column: 1 / -1; }
  .lb__nav--prev { left: var(--s2); }
  .lb__nav--next { right: var(--s2); }
  .lb__x { top: calc(var(--s5) * -1); right: var(--s2); }
}

@media (max-width: 880px) {
  /* VS stack: slash becomes a divider chip */
  .vs { grid-template-columns: 1fr; gap: var(--s4); }
  .vs__slash { justify-self: center; transform: rotate(-4deg); }
}

@media (max-width: 768px) {
  :root { --s9: 64px; --s8: 48px; }

  .burger { display: block; }
  .hdr__call span { display: none; }              /* icon-only, label via aria */
  .hdr__call { padding: var(--s3); min-width: 48px; }

  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--ink);
    border-bottom: var(--bd) solid var(--gold);
    display: none;
  }
  .nav.open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--s2); }
  .nav__list a {
    padding: var(--s4);
    font-size: 1rem;
    border-bottom: 2px solid var(--grease);
  }
  .nav__list li:last-child a { border-bottom: 0; }

  .callbar { display: flex; }
  body { padding-bottom: 76px; }                  /* clear the fixed call bar */

  .hero { padding-top: var(--s8); }
  .hero__cta .btn { width: 100%; }
  .field-row { grid-template-columns: 1fr; gap: var(--s5); }
  .form { padding: var(--s5); }
  .ftr__in { grid-template-columns: 1fr; gap: var(--s6); }
  .ftr__base { justify-content: flex-start; }
}

@media (max-width: 480px) {
  .wrap { padding-inline: var(--s4); }
  body { font-size: 16px; }
  .stencil { transform: rotate(-1deg); box-shadow: 4px 4px 0 var(--ink); }
  .badge { transform: rotate(-2deg); }
  .cards, .gal, .revs, .steps, .hero__proof { grid-template-columns: 1fr; }
  .honest { padding: var(--s5); }
  .step__n { font-size: 2rem; }
}

/* ==========================================================================
   REDUCED MOTION — kill the ticker, the reveals, the lot
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ticker__track { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .btn:hover, .card:hover, .gal__btn:hover { transform: none; }
}

/* ==========================================================================
   PRINT — flatten to ink on white, surface the phone number
   ========================================================================== */
@media print {
  .ticker, .hdr, .callbar, .lb, .hero__grain, .btn, .form { display: none !important; }
  body { background: #fff; color: #000; padding: 0; font-size: 11pt; }
  .sec, .hero, .racket { padding: 12pt 0; border: 0; background: #fff !important; color: #000 !important; }
  .sec--ink, .sec--gold { background: #fff !important; color: #000 !important; }
  .stencil, .card, .vs__col, .rev, .step, .badge, .honest {
    box-shadow: none !important; background: #fff !important; color: #000 !important;
    border: 1pt solid #000;
  }
  .sec__lead, .card p, .step p, .honest p, .faq__a { color: #000 !important; }
  .faq__i { border: 1pt solid #000; }
  .faq__a { display: block !important; }
  a[href^="tel:"]::after { content: ' (' attr(href) ')'; }
}