/* ============================================================================
   A1 AUTO STUDIOS
   ----------------------------------------------------------------------------
   Design language is taken from the shop itself, not from a template:

     · the zig-zag LED strips on the bay walls  ->  the chevron rule motif
     · the black/white diamond floor tiles      ->  section background texture
     · plotter-cut vinyl film                   ->  the angled "knife-cut" corner
     · black walls, brand flags, metal          ->  the palette

   Two typefaces, each doing a distinct job:
     Teko         — display. Tall, condensed, motorsport signage. h1/h2, big numbers.
     Chakra Petch — everything else. Angular, squared terminals that echo the
                    knife-cut corners. Body, labels, buttons, nav, card titles.
   Swap either in ONE place: --display / --font, below.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  /* palette */
  --black:      #0a0a0a;
  --surface:    #141414;
  --surface-2:  #1c1c1c;
  --surface-3:  #232323;
  --accent:     #d9d9d9;
  --accent-deep:#4a4a4a;
  --white:      #f3f1ee;
  --muted:      #9a9a9a;
  --line:       rgba(243, 241, 238, 0.10);
  --line-strong:rgba(243, 241, 238, 0.22);

  /* type */
  --font:    "Chakra Petch", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Teko", "Chakra Petch", system-ui, sans-serif;

  /* rhythm */
  --pad-x: clamp(20px, 5vw, 88px);
  --pad-y: clamp(64px, 9vw, 140px);
  --maxw: 1280px;
  --gap: clamp(16px, 2vw, 28px);

  /* the signature cut — one number controls every knife-cut corner */
  --cut: 22px;

  --ease: cubic-bezier(.22, 1, .36, 1);

  /* Gold is used for star ratings only — it is NOT a general accent colour.
     Two values because the ticker sits on a light background. */
  --gold:      #f0b429;
  --gold-dark: #9a6f05;

  /* Film tier ramp: dimmest = entry level, brightest = best product. */
  --tier-1: #7e7e7e;
  --tier-2: #a8a8a8;
  --tier-3: #d2d2d2;
  --tier-4: #ffffff;
}

/* ------------------------------------------------------------- 2. RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.68;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--accent); color: var(--black); }

/* ------------------------------------------------------------- 3. TYPE */
/* Teko carries the big statements. It is very condensed and optically small for
   its point size, so it is set larger and tighter than a normal grotesque. */
h1, h2, .display {
  font-family: var(--display);
  font-weight: 600;
  line-height: .92;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Chakra Petch takes the smaller headings — it stays readable at card size
   where Teko would get cramped, and its squared terminals do the tech work. */
h3, h4 {
  font-family: var(--font);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: .015em;
  text-transform: uppercase;
  text-wrap: balance;
}

h1 { font-size: clamp(3.1rem, 9.4vw, 7.8rem); }
h2 { font-size: clamp(2.3rem, 5.6vw, 4.5rem); }
h3 { font-size: clamp(1.02rem, 1.5vw, 1.24rem); }
h4 { font-size: .92rem; }

p { text-wrap: pretty; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--muted); max-width: 62ch; }
.muted { color: var(--muted); }
.fine  { font-size: .82rem; line-height: 1.55; color: #6f6f6f; }

/* small caps label with the chevron tick */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: .7rem;
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 7px;
  /* the LED zig-zag, in miniature */
  background: linear-gradient(currentColor, currentColor) no-repeat;
  clip-path: polygon(0 100%, 25% 0, 50% 100%, 75% 0, 100% 100%, 100% 100%, 75% 22%, 50% 100%, 25% 22%, 0 100%);
}

/* ------------------------------------------------------- 4. LAYOUT HELPERS */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; }
section { padding: var(--pad-y) var(--pad-x); position: relative; }
/* Eyebrow and heading form one horizontal lockup: the small label sits to the
   LEFT of the big heading, with the supporting line spanning underneath. They
   used to collide on a shared baseline because .eyebrow is inline-flex and
   .rise-words is inline-block. */
.section-head {
  margin-bottom: clamp(34px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: clamp(14px, 1.8vw, 26px);
  row-gap: 0;
}
/* No `order` here on purpose — source order decides. An eyebrow written before
   the heading sits to its LEFT; one written after it (the reviews block, which
   the owner wanted underneath) gets .eyebrow-below and takes a full row. */
.section-head .eyebrow { flex: none; }
.section-head h2       { margin: 0; }
.section-head .lead    { flex-basis: 100%; margin-top: 18px; }
.section-head .eyebrow-below { flex-basis: 100%; margin-top: 14px; }

/* On phones the heading needs the full width, so the label drops above it. */
@media (max-width: 700px) {
  .section-head { align-items: flex-start; }
  .section-head .eyebrow { flex-basis: 100%; margin-bottom: 12px; }
}

.grid { display: grid; gap: var(--gap); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* the knife-cut silhouette — the repeated signature shape */
.cut {
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.cut-tr { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }

/* ---------------------------------------------------------------------------
   The client asked for the diamond floor texture on every black block, not
   just the one section that had it. This applies it to each full-width band.
   The pseudo-element sits at z-index 0, so band contents are lifted to 1.
   --------------------------------------------------------------------------- */
section, .cred, .reviewbar, .brandstrip, .site-footer, .page-head, .ticker {
  position: relative;
}
section::before, .cred::before, .reviewbar::before,
.brandstrip::before, .site-footer::before, .page-head::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
  background:
    repeating-linear-gradient( 45deg, rgba(255,255,255,.015) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.015) 0 14px, transparent 14px 28px);
}
section > *, .cred > *, .reviewbar > *,
.brandstrip > *, .site-footer > *, .page-head > * {
  position: relative;
  z-index: 1;
}
/* the hero paints its own photo, so it must not get the tile pattern */
.hero::before { content: none; }

/* stronger variant, kept for the sections that had it explicitly */
.tex-floor::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .5;
  background:
    repeating-linear-gradient( 45deg, rgba(255,255,255,.014) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.014) 0 14px, transparent 14px 28px);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

/* full-bleed chevron divider — the LED strip as a rule */
.chevron-rule {
  height: 14px;
  width: 100%;
  background: var(--accent-deep);
  clip-path: polygon(0 100%, 5% 0, 10% 100%, 15% 0, 20% 100%, 25% 0, 30% 100%, 35% 0, 40% 100%, 45% 0, 50% 100%, 55% 0, 60% 100%, 65% 0, 70% 100%, 75% 0, 80% 100%, 85% 0, 90% 100%, 95% 0, 100% 100%, 100% 100%, 0 100%);
  opacity: .32;
}

/* --------------------------------------------------------------- 5. BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-family: var(--font);
  white-space: nowrap;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  will-change: transform;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }

.btn-primary {
  background: linear-gradient(145deg, #ffffff 0%, var(--accent) 55%, #a9a9a9 100%);
  color: var(--black);
}
.btn-primary:hover { background: #fff; }

.btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--white);
  clip-path: none;
}
.btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,.04); }

.btn-sm { padding: 12px 22px; font-size: .74rem; }

/* arrow that slides on hover */
.btn .arw { transition: transform .25s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

/* ---------------------------------------------------------------- 6. HEADER */
.site-header {
  position: fixed; inset: 0 0 auto 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 14px var(--pad-x);
  background: rgba(10,10,10,.72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  transition: background .3s ease, padding .3s ease;
}
.site-header.scrolled { background: rgba(10,10,10,.94); padding-block: 9px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(.95rem, 1.5vw, 1.12rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand .a1 { color: var(--white); }
.brand .auto { color: var(--accent); }

.site-nav ul { display: flex; align-items: center; gap: clamp(11px, 1.5vw, 24px); }
.site-nav a {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  color: #c9c9c9;
  padding: 6px 0;
  position: relative;
  transition: color .2s;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--ease);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--white); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.header-right { display: flex; align-items: center; gap: 16px; }
.es-tag { font-size: .72rem; color: var(--muted); letter-spacing: .06em; white-space: nowrap; }

.menu-btn { display: none; width: 42px; height: 42px; position: relative; }
.menu-btn span {
  position: absolute; left: 10px; right: 10px; height: 2px;
  background: var(--white);
  transition: transform .3s var(--ease), opacity .2s;
}
.menu-btn span:nth-child(1) { top: 15px; }
.menu-btn span:nth-child(2) { top: 21px; }
.menu-btn span:nth-child(3) { top: 27px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1180px) {
  .menu-btn { display: block; }
  .es-tag { display: none; }
  .site-nav {
    position: fixed; inset: 62px 0 auto 0;
    background: rgba(10,10,10,.985);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    max-height: 0; overflow: hidden;
    transition: max-height .42s var(--ease);
  }
  .site-nav.open { max-height: 82vh; overflow-y: auto; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 20px; }
  .site-nav li { border-top: 1px solid var(--line); }
  .site-nav a { display: block; padding: 17px var(--pad-x); font-size: .84rem; }
  .site-nav a::after { display: none; }
}

/* --------------------------------------------------- 6b. LOGO WATERMARK */
/* The A1 mark, top-right of every page header, dropped right back in opacity
   and gradient-faded so it reads as a watermark rather than a second logo. */
.page-watermark {
  position: absolute;
  top: clamp(58px, 8vw, 104px);
  right: clamp(-30px, 0vw, 24px);
  width: clamp(150px, 24vw, 380px);
  z-index: 1;
  pointer-events: none;
  user-select: none;
  opacity: .13;
  -webkit-mask-image: linear-gradient(205deg, #000 5%, rgba(0,0,0,.4) 50%, transparent 82%);
          mask-image: linear-gradient(205deg, #000 5%, rgba(0,0,0,.4) 50%, transparent 82%);
}
.hero .page-watermark { opacity: .17; }
@media (max-width: 700px) {
  .page-watermark { width: 46vw; top: 64px; right: -8vw; opacity: .1; }
}

/* ------------------------------------------------------------------ 7. HERO */
.hero {
  /* Deliberately under a full viewport: the client wants the stats, the review
     bar and the brand logos reachable almost immediately, so the hero stops
     short and the credibility strip breaks the fold on most screens. */
  min-height: 84svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 128px;
  padding-bottom: clamp(30px, 3.4vw, 52px);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
  will-change: opacity;
}
.hero-slide.active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }

/* scrim: heavy on the left so left-aligned type always reads */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(95deg, rgba(10,10,10,.95) 0%, rgba(10,10,10,.82) 34%, rgba(10,10,10,.35) 64%, rgba(10,10,10,.55) 100%),
    linear-gradient(180deg, rgba(10,10,10,.75) 0%, transparent 26%, transparent 52%, rgba(10,10,10,.94) 100%);
}

.hero-inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin-inline: auto; }

/* The owner asked for the shop name as the H1 and the service line beneath. */
.hero h1 { margin: 14px 0 0; }
.hero h1 .l2 { display: block; color: var(--accent); }
.hero-sub {
  margin-top: 16px;
  font-family: var(--font);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(.95rem, 2.1vw, 1.6rem);
  line-height: 1.25;
  margin-top: 20px;
  max-width: 20ch;
}
.hero-promise { margin-top: 18px; max-width: 50ch; color: #b9b9b9; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero-note { margin-top: 16px; }

/* the three things the landing page must establish, sitting on the hero */
.hero-proof {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 24px;
}
/* Client explicitly did not want these in blocks — no background, no border,
   just the numbers sitting on the photo. */
.hero-stats {
  display: flex; flex-wrap: wrap;
  gap: clamp(22px, 4vw, 64px);
  margin-top: clamp(24px, 3vw, 38px);
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid rgba(243,241,238,.14);
}
.hero-stats div { min-width: 0; }
.hero-stats b {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1;
  margin-bottom: 5px;
  text-shadow: 0 2px 18px rgba(0,0,0,.65);
}
.hero-stats span {
  display: block;
  font-size: .64rem; letter-spacing: .15em; text-transform: uppercase;
  color: #bdbdbd; line-height: 1.35;
}
.hero-stats .stars { color: var(--gold); letter-spacing: .04em; font-size: .8rem; }
@media (max-width: 700px) {
  .hero-stats { gap: 18px 26px; margin-top: 20px; padding-top: 16px; }
  .hero-stats b { font-size: 1.6rem; }
  .hero-stats span { font-size: .58rem; letter-spacing: .12em; }
}

.scroll-cue {
  position: absolute; left: var(--pad-x); bottom: 10px; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  font-size: .66rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted);
}
.scroll-cue i {
  display: block; width: 1px; height: 26px;
  background: linear-gradient(var(--accent), transparent);
  animation: cue 2.1s ease-in-out infinite;
}
@keyframes cue { 0%,100% { transform: scaleY(.4); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* On phones the hero content stacks tall enough to fill the screen on its own,
   which would bury the stats. Tighten everything so the credibility strip
   always breaks the fold and the proof is visible without a deliberate scroll. */
@media (max-width: 700px) {
  .hero { padding-top: 92px; padding-bottom: 22px; }
  .hero h1 { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .hero-sub { font-size: 1rem; margin-top: 12px; }
  .hero-promise { margin-top: 14px; font-size: .95rem; line-height: 1.55; }
  .hero-proof { margin-top: 18px; gap: 7px; }
  .hero-proof li { padding: 7px 12px; font-size: .68rem; }
  .hero-ctas { margin-top: 20px; gap: 10px; }
  .hero-ctas .btn { padding: 14px 22px; font-size: .74rem; }
  .hero-note { margin-top: 12px; font-size: .74rem; }
  .scroll-cue { display: none; }

  /* stats read better as a tighter 2x2 on small screens */
  .cred div { padding: 20px 12px; }
  .cred b { font-size: 2rem; }
}

@media (max-width: 430px) {
  .site-header { gap: 10px; padding-inline: 16px; }
  .header-right { gap: 8px; }
  .site-header .btn-sm { padding: 10px 13px; font-size: .66rem; letter-spacing: .08em; }
  .brand { font-size: .84rem; letter-spacing: .02em; }
}

/* --------------------------------------------------------- 8. CREDIBILITY */
.cred {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.cred div {
  padding: clamp(24px, 3.4vw, 44px) 18px;
  text-align: center;
  border-right: 1px solid var(--line);
}
.cred div:last-child { border-right: 0; }
.cred b {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.4vw, 3.7rem);
  line-height: 1;
  color: var(--white);
  margin-bottom: 9px;
}
.cred span {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); line-height: 1.4; display: block;
}
@media (max-width: 780px) {
  .cred { grid-template-columns: repeat(2, 1fr); }
  .cred div:nth-child(2) { border-right: 0; }
  .cred div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ---------------------------------------------------------- 9. MARQUEES */
.ticker {
  background: var(--accent);
  color: var(--black);
  overflow: hidden;
  padding: 14px 0;
  white-space: nowrap;
  border-bottom: 1px solid var(--accent-deep);
  /* fade both ends so items appear to dissolve rather than get clipped */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.ticker-track { display: inline-flex; animation: marquee 95s linear infinite; }
.ticker-track > span {
  display: inline-flex; align-items: center; gap: 30px;
  padding-right: 30px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.ticker-track > span::after { content: "◢"; font-size: .55rem; opacity: .55; }

/* real customer quotes riding in the same ticker as the proof statements */
.ticker-track > span.tick-review { font-style: italic; font-weight: 600; }
.ticker-track > span.tick-review i {
  font-style: normal; letter-spacing: .05em; font-size: .68rem;
  color: var(--gold-dark);
}

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.reviews-strip { overflow: hidden; position: relative; }
.reviews-track { display: flex; gap: var(--gap); width: max-content; animation: marquee 125s linear infinite; }
/* Deliberately NOT paused on hover — the client wants it to keep moving at a
   constant speed even while the cursor is over a review. */
.reviews-strip {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.review-card {
  width: clamp(280px, 34vw, 400px);
  padding: 30px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.review-card .stars { color: var(--gold); letter-spacing: .18em; font-size: .95rem; }
.review-card blockquote { margin: 15px 0 20px; color: #ddd; font-size: .98rem; line-height: 1.6; }
.review-card cite {
  font-style: normal; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.review-card cite b { color: var(--white); font-weight: 600; display: block; margin-bottom: 3px; }

/* ------------------------------------------------- 9b. GOOGLE REVIEW BAR */
.reviewbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 3.5vw, 54px);
  padding: clamp(22px, 3vw, 34px) var(--pad-x);
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.reviewbar-score { display: flex; align-items: center; gap: 16px; }
.reviewbar-score .num {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.8rem, 5.4vw, 4.1rem);
  line-height: 1;
}
.reviewbar-score .meta .stars {
  color: var(--gold); font-size: 1.05rem; letter-spacing: .16em; display: block;
}
.reviewbar-score .meta small {
  display: block; margin-top: 5px;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

/* Rotating pull-quotes. All quotes occupy the SAME grid cell so the container
   sizes itself to the tallest one — absolute positioning couldn't, which let
   longer quotes overlap each other once they wrapped on narrow screens. */
.reviewbar-quotes { display: grid; }
.reviewbar-quotes q {
  grid-area: 1 / 1;
  quotes: "\201C" "\201D";
  font-size: clamp(.94rem, 1.35vw, 1.15rem);
  line-height: 1.55; color: #d3d3d3;
  opacity: 0; transform: translateY(8px);
  pointer-events: none;
  /* Quotes share one grid cell, so a symmetric crossfade would double-expose
     two different blocks of text. The outgoing one clears out first, then the
     incoming one arrives. */
  transition: opacity .3s ease, transform .3s ease;
}
.reviewbar-quotes q.on {
  opacity: 1; transform: none;
  pointer-events: auto;
  transition-delay: .32s;
}
.reviewbar-quotes q b {
  display: block; margin-top: 6px;
  font-size: .68rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}

.reviewbar-cta { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.g-mark {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  background: #fff; border-radius: 50%;
}
.g-mark svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .reviewbar { grid-template-columns: 1fr; gap: 20px; text-align: left; }
}

/* ------------------------------------------------- 9c. BRANDS WE USE */
.brandstrip { padding: clamp(38px, 5vw, 62px) var(--pad-x); border-bottom: 1px solid var(--line); }
.brandstrip .lbl {
  text-align: center; font-size: .68rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--muted); margin-bottom: clamp(22px, 3vw, 34px);
}
.brands {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(30px, 6vw, 84px);
}
.brands figure { text-align: center; }
/* Rendered as a CSS mask rather than an <img> so the mark can be recoloured
   on hover — the client wants HiTek to go brand-red. */
.brands .mark {
  display: block;
  height: var(--h);
  width: calc(var(--h) * var(--ar));
  background: #c9c9c9;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.brands figure:hover .mark { background: var(--hover); transform: translateY(-2px); }
.brands figcaption {
  margin-top: 12px; font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: #6f6f6f;
}

/* ------------------------------------------------------------ 10. CARDS */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: clamp(24px, 2.6vw, 36px);
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
  overflow: hidden;
}
.card:hover { border-color: var(--line-strong); transform: translateY(-4px); background: var(--surface-2); }

/* thin chevron accent that draws in on hover */
.card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.card:hover::after { transform: scaleX(1); }

.card h3 { margin-bottom: 12px; }
.card p  { color: var(--muted); font-size: .95rem; }

.card-list { margin-top: 20px; display: grid; gap: 9px; }
.card-list li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: .89rem; color: #c4c4c4;
}
.card-list li::before {
  content: ""; flex: none; margin-top: .55em;
  width: 9px; height: 5px; background: var(--accent);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

/* service card with photo */
.svc {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.svc:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.svc-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.svc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .5s; filter: grayscale(.25) contrast(1.04); }
.svc:hover .svc-media img { transform: scale(1.06); filter: grayscale(0) contrast(1.08); }
.svc-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,10,10,.85));
}
.svc-body { padding: clamp(22px, 2.4vw, 32px); flex: 1; display: flex; flex-direction: column; }
.svc-body h3 { margin-bottom: 10px; }
.svc-body p { color: var(--muted); font-size: .93rem; flex: 1; }
.svc-go {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 9px;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.svc-go .arw { transition: transform .3s var(--ease); }
.svc:hover .svc-go .arw { transform: translateX(5px); }

.badge-off {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 6px 12px; font-size: .64rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  background: rgba(10,10,10,.9); border: 1px solid var(--accent-deep); color: var(--muted);
}

/* -------------------------------------------------------- 11. FILM TABLE */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; min-width: 660px; background: var(--surface); }
caption { text-align: left; padding: 18px 20px; color: var(--muted); font-size: .84rem; border-bottom: 1px solid var(--line); }
th, td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: .92rem; }
thead th {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; background: var(--surface-2);
  position: sticky; top: 0;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .2s; }
tbody tr:hover { background: var(--surface-2); }
td:first-child, th:first-child { font-weight: 600; }
tr.is-popular { background: rgba(217,217,217,.045); }
tr.is-popular td:first-child::after {
  content: "Most chosen";
  display: inline-block; margin-left: 10px; padding: 3px 9px;
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--accent); color: var(--black); font-weight: 700;
  vertical-align: middle;
}

/* ------------------------------------------------------------- 12. FAQ */
.faq-group + .faq-group { margin-top: 46px; }
.faq-group > h3 {
  font-size: .74rem; letter-spacing: .2em; color: var(--accent);
  padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 22px;
  padding: 22px 0; text-align: left;
  font-size: clamp(.98rem, 1.3vw, 1.1rem); font-weight: 600;
  transition: color .2s;
}
.faq-q:hover { color: var(--accent); }
.faq-ico {
  flex: none; width: 20px; height: 20px; position: relative; margin-top: 4px;
}
.faq-ico::before, .faq-ico::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 2px; background: var(--accent);
  transition: transform .35s var(--ease);
}
.faq-ico::after { transform: rotate(90deg); }
.faq-item.open .faq-ico::after { transform: rotate(0deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.faq-a > div { padding-bottom: 24px; color: var(--muted); max-width: 78ch; }

/* --------------------------------------------------------- 13. CALLOUT */
.callout {
  border: 1px solid var(--accent-deep);
  background: var(--surface-2);
  padding: clamp(26px, 3.4vw, 46px);
  position: relative;
}
.callout::before {
  content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: var(--accent);
}
.callout h3 { margin-bottom: 14px; }
.callout p + p { margin-top: 13px; }

/* ------------------------------------------------------- 14. GALLERY */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.filters button {
  padding: 10px 20px; font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--line-strong); color: var(--muted);
  transition: all .25s var(--ease);
}
.filters button:hover { color: var(--white); border-color: var(--white); }
.filters button[aria-pressed="true"] { background: var(--accent); color: var(--black); border-color: var(--accent); }

.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.gal figure {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: var(--surface-2); cursor: zoom-in;
}
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .4s; filter: grayscale(.3); }
.gal figure:hover img { transform: scale(1.07); filter: grayscale(0); }
.gal figure[hidden] { display: none; }

/* lightbox */
.lb {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(6,6,6,.96);
  display: grid; place-items: center;
  padding: 4vw;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.lb.open { opacity: 1; pointer-events: auto; }
.lb img { max-width: 100%; max-height: 88vh; object-fit: contain; }
.lb-close { position: absolute; top: 18px; right: 22px; font-size: 2rem; line-height: 1; color: var(--white); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2.4rem; color: var(--white); padding: 20px; opacity: .6; transition: opacity .2s; }
.lb-nav:hover { opacity: 1; }
.lb-prev { left: 6px; } .lb-next { right: 6px; }
.lb-cap { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: .8rem; color: var(--muted); padding: 0 20px; }

/* ------------------------------------------------------------ 15. FORM */
.field { display: grid; gap: 8px; }
.field label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.field label .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--white); font: inherit; font-size: .95rem;
  transition: border-color .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); background: var(--surface-3);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input[type="file"] { padding: 11px; cursor: pointer; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .89rem; color: #c2c2c2; cursor: pointer; }
.check input { width: 19px; height: 19px; flex: none; margin-top: 2px; accent-color: var(--accent); }
.form-note { font-size: .78rem; color: #6f6f6f; margin-top: 4px; }

/* ---------------------------------------------------------- 16. FOOTER */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 84px) var(--pad-x) 32px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(26px, 4vw, 60px); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.site-footer h4 { font-size: .7rem; letter-spacing: .2em; color: var(--accent); margin-bottom: 18px; }
.site-footer a { color: var(--muted); font-size: .9rem; transition: color .2s; }
.site-footer a:hover { color: var(--white); }
.site-footer li + li { margin-top: 10px; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  transition: all .25s var(--ease);
}
.socials a:hover { background: var(--accent); border-color: var(--accent); color: var(--black); transform: translateY(-2px); }
.socials svg { width: 17px; height: 17px; fill: currentColor; }
.foot-base {
  margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: .78rem; color: #6f6f6f;
}
.foot-base nav { display: flex; flex-wrap: wrap; gap: 20px; }

/* hours table in footer/contact */
.hours { width: 100%; min-width: 0; background: none; }
.hours td { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .87rem; }
.hours td:last-child { text-align: right; color: var(--muted); }
.hours tr.today td { color: var(--accent); font-weight: 600; }
.hours tr.today td:last-child { color: var(--accent); }

/* --------------------------------------------------- 17. SCROLL REVEAL */
/* Elements start shifted + transparent, then settle when scrolled into view.
   Stagger is set per-element with --d.  See site.js. */
[data-rise] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-rise].in { opacity: 1; transform: none; }

/* headline words pop up one after another */
.rise-words { display: inline-block; }
.rise-words .w { display: inline-block; overflow: hidden; vertical-align: top; }
.rise-words .w > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.rise-words.in .w > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-rise], .rise-words .w > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-slide { transition: none; }
  .scroll-cue i { animation: none; }
  /* Brief: marquees should keep looping rather than vanish — just slow them. */
  .ticker-track { animation-duration: 200s; }
  .reviews-track { animation-duration: 260s; }
  .svc-media img, .gal img { transition: none; }
}

/* --------------------------------------------------------- 18. UTILITIES */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; top: -60px; left: var(--pad-x); z-index: 999;
  background: var(--accent); color: var(--black);
  padding: 12px 22px; font-weight: 700; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase;
  transition: top .2s;
}
.skip:focus { top: 10px; }

.page-head { padding-top: calc(var(--pad-y) + 76px); border-bottom: 1px solid var(--line); }
.crumb { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.crumb a:hover { color: var(--white); }

.band     { background: var(--surface-2); }
.band-alt { background: var(--surface); }

.stack   { display: grid; gap: 18px; }
.split   { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.media-frame { position: relative; overflow: hidden; background: var(--surface-2); aspect-ratio: 4 / 3; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }

/* map embed */
.map-frame { position: relative; aspect-ratio: 16/9; border: 1px solid var(--line); overflow: hidden; background: var(--surface-2); }
/* Client asked for the map in full colour rather than desaturated. */
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===========================================================================
   19. PAGE HEADERS  (added in the final-changes round)
   Client wanted every inner page to read like the home hero: a photo behind
   it, the H1 hard left, and the eyebrow/description moved BELOW the heading
   instead of above it.
   =========================================================================== */
.page-head {
  overflow: hidden;
  padding-top: calc(var(--pad-y) + 96px);
  padding-bottom: clamp(46px, 6vw, 90px);
  text-align: left;
}
.page-head-bg { position: absolute; inset: 0; z-index: 0; }
.page-head-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.page-head-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(95deg, rgba(10,10,10,.95) 0%, rgba(10,10,10,.86) 38%, rgba(10,10,10,.5) 72%, rgba(10,10,10,.7) 100%),
    linear-gradient(180deg, rgba(10,10,10,.9) 0%, transparent 34%, transparent 55%, rgba(10,10,10,.96) 100%);
}
/* the tile texture would fight the photo */
.page-head:has(.page-head-bg)::before { content: none; }

.page-head h1 { margin: 0; }
/* eyebrow now sits under the H1 */
.page-head .eyebrow { margin-top: 20px; }
.page-head .lead { margin-top: 14px; }

/* ===========================================================================
   20. FILM TIERS
   Colour signals product level: dim = entry, bright = best.
   =========================================================================== */
.film-name { font-weight: 700; }
.tier-1 .film-name { color: var(--tier-1); }
.tier-2 .film-name { color: var(--tier-2); }
.tier-3 .film-name { color: var(--tier-3); }
.tier-4 .film-name { color: var(--tier-4); }

.verdict {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 9px;
  font-size: .58rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid currentColor;
  vertical-align: middle;
  white-space: nowrap;
}
.tier-1 .verdict { color: var(--tier-1); }
.tier-2 .verdict { color: var(--tier-2); }
.tier-3 .verdict { color: var(--tier-3); }
.tier-4 .verdict { color: var(--tier-4); background: rgba(255,255,255,.08); }

.film-card.tier-1 { border-left: 3px solid var(--tier-1); }
.film-card.tier-2 { border-left: 3px solid var(--tier-2); }
.film-card.tier-3 { border-left: 3px solid var(--tier-3); }
.film-card.tier-4 { border-left: 3px solid var(--tier-4); }

/* ===========================================================================
   21. TSER / IRR COMPARISON SLIDER
   Drag across the four tiers and watch the two heat-rejection bars move.
   =========================================================================== */
.compare {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: clamp(24px, 3vw, 40px);
}
.compare-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 18px;
  margin-bottom: 26px;
}
.compare-head .film-name {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1;
  text-transform: uppercase;
}

.compare-bars { display: grid; gap: 22px; margin-bottom: 30px; }
.bar-row { display: grid; gap: 9px; }
.bar-label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.bar-label b {
  font-family: var(--display); font-weight: 600;
  font-size: 1.5rem; color: var(--white); letter-spacing: .01em;
}
.bar-track {
  height: 12px; background: var(--surface-3);
  border: 1px solid var(--line);
  overflow: hidden;
}
.bar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #6d6d6d, var(--accent) 70%, #fff);
  transition: width .55s var(--ease);
}
.bar-row.irr .bar-fill { background: linear-gradient(90deg, #5c5c5c, #cfcfcf 65%, var(--gold)); }

/* the range control itself */
.compare-slider { margin-top: 8px; }
.compare-slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 34px; background: transparent; cursor: grab;
}
.compare-slider input[type="range"]:active { cursor: grabbing; }
.compare-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: var(--line-strong);
}
.compare-slider input[type="range"]::-moz-range-track {
  height: 2px; background: var(--line-strong);
}
.compare-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -9px;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  border: 0;
}
.compare-slider input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px;
  background: var(--accent); border: 0;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.compare-ticks {
  display: flex; justify-content: space-between;
  margin-top: 2px;
}
.compare-ticks button {
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: #6f6f6f; padding: 4px 0; transition: color .2s;
  text-align: center; flex: 1;
}
.compare-ticks button:first-child { text-align: left; }
.compare-ticks button:last-child  { text-align: right; }
.compare-ticks button[aria-current="true"] { color: var(--white); font-weight: 700; }
.compare-note { margin-top: 20px; }

/* ===========================================================================
   22. INLINE VIDEO BLOCKS
   =========================================================================== */
.video-frame { position: relative; overflow: hidden; background: var(--surface-2); }
.video-frame video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.video-frame::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,10,.25), transparent 40%, rgba(10,10,10,.35));
}
.video-tag {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--white); text-shadow: 0 1px 6px rgba(0,0,0,.8);
}
.video-tag i {
  width: 6px; height: 6px; background: var(--gold); border-radius: 50%;
  animation: rec 2s ease-in-out infinite;
}
@keyframes rec { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
  .bar-fill { transition: none; }
  .video-tag i { animation: none; }
}


/* ===========================================================================
   23. LANDING-PAGE TOWN HIGHLIGHT
   Client asked for the town name to read in a different colour from the rest
   of the subhead. Gold matches the star rating and stays off the silver ramp.
   =========================================================================== */
.hl-town { color: var(--gold); }

/* ===========================================================================
   24. OWNER CARDS & SERVICE-AREA BLOCKS
   Both carry an optional photo slot. Until the client supplies headshots and
   town photos, they fall back to a clean monogram / flat block rather than a
   broken image.
   =========================================================================== */
.owner-card { display: flex; flex-direction: column; }
.owner-shot {
  width: clamp(96px, 20vw, 132px);
  aspect-ratio: 1;
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--surface-3);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.owner-shot img { width: 100%; height: 100%; object-fit: cover; }
.owner-shot--empty {
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
}
.owner-shot--empty span {
  font-family: var(--display); font-weight: 600;
  font-size: 3rem; line-height: 1; color: var(--accent-deep);
}

.area-card { position: relative; overflow: hidden; text-align: center; }
.area-bg { position: absolute; inset: 0; z-index: 0; }
.area-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.5); }
.area-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.72), rgba(10,10,10,.88));
}
.area-card h3 { position: relative; z-index: 1; }
.area-card:hover .area-bg img { filter: grayscale(0); }

/* ===========================================================================
   25. BOOKING / INSPECTION CALLOUTS WITH A PHOTO BEHIND
   =========================================================================== */
.callout { overflow: hidden; }
.callout-bg { position: absolute; inset: 0; z-index: 0; }
.callout-bg img { width: 100%; height: 100%; object-fit: cover; }
.callout-bg::after {
  content: ""; position: absolute; inset: 0;
  /* darkened hard so the copy still pops, per the owner's note */
  background: linear-gradient(115deg, rgba(10,10,10,.94), rgba(10,10,10,.82) 55%, rgba(10,10,10,.9));
}
.callout > *:not(.callout-bg) { position: relative; z-index: 1; }

/* ===========================================================================
   26. SHOP SLIDESHOW
   Replaces the small tile grid that used to sit under "Out Of Our Bay" — the
   client found it too small to earn its place. Full-width cross-fade with
   arrows, dots and a caption.
   =========================================================================== */
.slideshow { position: relative; }
.slideshow-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-2);
}
@media (max-width: 700px) { .slideshow-stage { aspect-ratio: 4 / 3; } }

.slideshow-stage .slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
  will-change: opacity;
}
.slideshow-stage .slide.on { opacity: 1; }
.slideshow-stage .slide img { width: 100%; height: 100%; object-fit: cover; }
.slideshow-stage::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(10,10,10,.3) 0%, transparent 28%,
                              transparent 52%, rgba(10,10,10,.88) 100%);
}

.slide-caption {
  position: absolute; left: clamp(18px, 3vw, 40px); right: clamp(70px, 12vw, 150px);
  bottom: clamp(16px, 2.6vw, 32px); z-index: 3;
  font-size: clamp(.86rem, 1.15vw, 1.05rem);
  color: var(--white);
  text-shadow: 0 2px 14px rgba(0,0,0,.9);
  max-width: 60ch;
}

/* arrows */
.slide-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: rgba(10,10,10,.55);
  border: 1px solid var(--line-strong);
  color: var(--white);
  font-size: 1.5rem; line-height: 1;
  backdrop-filter: blur(6px);
  transition: background .25s var(--ease), border-color .25s var(--ease);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.slide-nav:hover { background: var(--accent); color: var(--black); border-color: var(--accent); }
.slide-prev { left: clamp(10px, 1.6vw, 20px); }
.slide-next { right: clamp(10px, 1.6vw, 20px); }

/* dots */
.slide-dots {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 16px;
}
.slide-dots button {
  width: 30px; height: 4px;
  background: var(--accent-deep);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.slide-dots button:hover { background: var(--muted); }
.slide-dots button[aria-current="true"] { background: var(--accent); transform: scaleY(1.8); }

@media (prefers-reduced-motion: reduce) {
  .slideshow-stage .slide { transition: none; }
}


/* ===========================================================================
   27. BRAND LOCKUP  (replaces the old text-only wordmark)
   The owner's logo is a stacked mark + wordmark. Only the mark is used as an
   image; "Auto Studios" is live text so it stays legible at header size.
   =========================================================================== */
.brand-mark {
  width: auto;
  flex: none;
  /* the supplied PNG is dark-on-transparent; invert to read on black */
  filter: brightness(0) invert(1);
  transition: opacity .25s var(--ease);
}
.brand:hover .brand-mark { opacity: .85; }

.brand-word {
  white-space: nowrap;
  letter-spacing: .05em;
  line-height: 1;
}

@media (max-width: 430px) {
  .brand-mark { height: 24px !important; }
  .brand-word { font-size: .78rem; letter-spacing: .03em; }
}

/* The faded corner watermark is gone — the logo now sits in the header. */
.page-watermark { display: none; }

/* ===========================================================================
   28. HERO TAGLINE
   "Precision • Protection • Prestige" reads as a strapline, not body copy, so
   it gets its own weight and tracking with the follow-on line beneath it.
   =========================================================================== */
.hero-promise .tagline {
  display: block;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
  font-size: clamp(.92rem, 1.5vw, 1.12rem);
  margin-bottom: 8px;
}
@media (max-width: 700px) {
  .hero-promise .tagline { letter-spacing: .07em; font-size: .88rem; }
}