/* ============================================================
   Automotive / Panelbeater Template — dark industrial premium
   Fonts: Barlow Condensed (headings) + Barlow (body), Google Fonts

   RE-SKIN NOTE: to rebrand for a client, edit the VALUES in
   :root below and nothing else. Keep every variable NAME.
   ============================================================ */

:root {
  /* --- surfaces: charcoal / graphite --- */
  --bg: #0b0d10;
  --surface: #12151a;
  --surface-2: #191d24;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* --- text --- */
  --text: #f2f4f7;
  --muted: #9aa3af;

  /* --- accents: action red (urgency) + silver steel (precision) --- */
  --accent: #dc2626;
  --accent-dark: #b91c1c;
  --accent-2: #a9bccd;
  --accent-soft: rgba(220, 38, 38, 0.13);
  --accent-line: rgba(220, 38, 38, 0.45);
  /* text colour that sits ON --accent — must stay AA (4.5:1) */
  --on-accent: #ffffff;

  --font-head: 'Barlow Condensed', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, sans-serif;
  --wrap: 1180px;
  --radius: 14px;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html:focus-within { scroll-behavior: smooth; }

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.04;
  letter-spacing: -0.005em;
  font-weight: 700;
  text-transform: uppercase;
  text-wrap: balance;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

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

/* ---------- skip link ---------- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--on-accent); padding: 10px 18px; border-radius: 0 0 10px 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- reveal animations ----------
   $10k spec: transform/opacity only, 150-300ms band, ease-out,
   stagger set per-element with inline --d (30-50ms steps, capped). */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none !important; }
  .hero__bg img { animation: none !important; transform: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: 1.05rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 14px 30px; border-radius: 6px; border: 1px solid transparent;
  cursor: pointer; transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s, color 0.2s;
  min-height: 48px;
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-dark); transform: translateY(-2px); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: rgba(255, 255, 255, 0.03); }
.btn--ghost:hover { border-color: rgba(255, 255, 255, 0.4); transform: translateY(-2px); background: rgba(255, 255, 255, 0.07); }
.btn--lg { padding: 17px 36px; font-size: 1.14rem; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent-2); outline-offset: 3px; border-radius: 6px;
}

/* ---------- header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
  border-bottom: 1px solid transparent;
}
.header.scrolled {
  background: rgba(11, 13, 16, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px 24px; max-width: 1320px; margin: 0 auto;
}

/* ---------- brand: Apex Auto Body logo lockup ----------
   Supplied brand artwork. The black field it shipped on has been knocked out
   to transparency (alpha taken from max(R,G,B), colour un-premultiplied) so
   the chrome and red read cleanly on --bg.
   The header uses the short lockup with the "AUTO BODY" strapline cropped off
   — at header size the strapline is too small to resolve. */
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand__logo { display: block; height: 56px; width: auto; flex-shrink: 0; }
.footer__brand .brand__logo { height: 104px; }
@media (max-width: 380px) { .brand__logo { height: 46px; } }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  font-family: var(--font-head); font-weight: 600; font-size: 1.02rem;
  letter-spacing: 0.03em; text-transform: uppercase;
  padding: 10px 13px; border-radius: 6px; color: var(--text);
  position: relative; transition: color 0.2s;
}
.nav a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 2px;
  background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: #fff; }
.header__cta { display: flex; align-items: center; gap: 18px; }
.header__phone {
  font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; white-space: nowrap;
  color: var(--text); transition: color 0.2s;
}
.header__phone:hover { color: var(--accent-2); }
.header__cta .btn { padding: 11px 20px; min-height: 44px; font-size: 0.98rem; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-strong); border-radius: 8px;
  width: 46px; height: 44px; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text); transition: transform 0.25s var(--ease), opacity 0.2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  /* anchored to the header rather than a fixed offset, so it stays put when the
     logo steps down at the 380px breakpoint */
  .nav {
    position: absolute; top: 100%; left: 16px; right: 16px; z-index: 99;
    margin-top: 8px;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: rgba(18, 21, 26, 0.98); border: 1px solid var(--line); border-radius: 14px;
    padding: 12px; box-shadow: var(--shadow);
    opacity: 0; transform: translateY(-10px); pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .nav.open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: 13px 16px; }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { background: var(--accent-soft); color: #fff; }
  .nav-toggle { display: inline-flex; }
  .header__phone { display: none; }
}
@media (max-width: 560px) {
  .header__cta .btn { display: none; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: min(92dvh, 900px); padding: 160px 0 90px; overflow: hidden; isolation: isolate;
}
.hero--page { min-height: min(62dvh, 640px); padding-bottom: 70px; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom 9s var(--ease) forwards; }
@keyframes heroZoom { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(11, 13, 16, 0.66) 0%, rgba(11, 13, 16, 0.34) 38%, rgba(11, 13, 16, 0.94) 100%),
    linear-gradient(100deg, rgba(11, 13, 16, 0.92) 8%, rgba(11, 13, 16, 0.22) 68%);
}
.hero__content { max-width: 820px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-head); font-weight: 600; font-size: 0.96rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-2);
  margin-bottom: 20px;
}
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--accent); border-radius: 2px; flex-shrink: 0; }
.hero h1 { font-size: clamp(2.9rem, 7.4vw, 5.6rem); margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: rgba(242, 244, 247, 0.86); max-width: 620px; margin-bottom: 34px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 42px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 12px 30px; padding-top: 26px; border-top: 1px solid var(--line-strong); }
.hero__trust li { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; color: rgba(242, 244, 247, 0.86); }
.hero__trust svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

/* ---------- sections ---------- */
.section { padding: clamp(72px, 9vw, 120px) 0; position: relative; }
.section--tint { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section__head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.section__head h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); margin-bottom: 16px; }
.section__head p { color: var(--muted); font-size: 1.08rem; }
.section__head--row {
  max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.section__head--row > div { max-width: 640px; }

/* ---------- accreditation badge strip ----------
   Sector-specific: RMI / SAMBRA / insurer approval is THE trust signal
   in South African panel repair, so it sits directly under the hero.
   Badges are typographic lockups drawn here in CSS — no third-party
   logo artwork is used or implied. */
.badge-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 900px) { .badge-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .badge-strip { grid-template-columns: 1fr; } }
.badge {
  display: flex; align-items: center; gap: 15px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px;
  transition: transform 0.2s var(--ease), border-color 0.2s;
}
.badge:hover { transform: translateY(-3px); border-color: var(--accent-line); }
.badge__mark {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line);
}
.badge__mark svg { width: 24px; height: 24px; }
.badge strong {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 1.16rem; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.15;
}
.badge span { font-size: 0.85rem; color: var(--muted); line-height: 1.4; }

/* ---------- service pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pillars--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1020px) { .pillars, .pillars--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pillars, .pillars--4 { grid-template-columns: 1fr; } }
.pillar {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 440px; border-radius: var(--radius); overflow: hidden; isolation: isolate;
  border: 1px solid var(--line);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s;
}
.pillar img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.pillar::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(185deg, rgba(11, 13, 16, 0.12) 28%, rgba(11, 13, 16, 0.95) 88%);
  transition: background 0.3s;
}
.pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--accent-line); }
.pillar:hover img { transform: scale(1.05); }
.pillar__body { padding: 26px 24px; }
.pillar__num { font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.16em; color: var(--accent-2); display: block; margin-bottom: 10px; }
.pillar h3 { font-size: 1.72rem; margin-bottom: 10px; }
.pillar p { font-size: 0.94rem; color: rgba(242, 244, 247, 0.8); margin-bottom: 16px; }
.pillar__link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
.pillar__link svg { width: 17px; height: 17px; color: var(--accent); transition: transform 0.25s var(--ease); }
.pillar:hover .pillar__link svg { transform: translateX(5px); }

/* ---------- marquee ---------- */
.marquee {
  overflow: hidden; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; gap: 0; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__track span {
  font-family: var(--font-head); font-weight: 600; font-size: 1.14rem; letter-spacing: 0.05em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--muted); display: inline-flex; align-items: center;
}
.marquee__track span::after { content: "•"; margin: 0 26px; color: var(--accent); }

/* ---------- about / why ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split__media { position: relative; }
.split__media img { border-radius: var(--radius); border: 1px solid var(--line); width: 100%; height: 100%; object-fit: cover; }
.split__media--stack { display: grid; gap: 16px; }
.split__badge {
  position: absolute; left: -18px; bottom: 28px;
  background: var(--accent); color: var(--on-accent); border-radius: 10px; padding: 18px 22px;
  font-family: var(--font-head); box-shadow: var(--shadow);
}
.split__badge strong { display: block; font-size: 2.2rem; font-weight: 700; line-height: 1; }
.split__badge small { font-size: 0.88rem; font-weight: 600; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.05em; }
@media (max-width: 560px) { .split__badge { left: 12px; } }
.split__content h2 { font-size: clamp(2.1rem, 4vw, 3.1rem); margin-bottom: 20px; }
.split__content > p { color: var(--muted); margin-bottom: 18px; font-size: 1.04rem; }
.ticklist { margin-top: 26px; display: grid; gap: 14px; }
.ticklist li { display: flex; gap: 14px; align-items: flex-start; }
.ticklist svg { width: 21px; height: 21px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.ticklist strong { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.02em; text-transform: uppercase; }
.ticklist span { color: var(--muted); }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr 1fr; } }
.stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; }
.stat strong { display: block; font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; color: var(--accent-2); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { font-size: 0.9rem; color: var(--muted); }

/* ---------- claims process strip (sector-specific) ---------- */
.claims-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: claimstep; }
@media (max-width: 1020px) { .claims-steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .claims-steps { grid-template-columns: 1fr; } }
.claims-steps li {
  counter-increment: claimstep; position: relative;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 20px 22px;
  transition: transform 0.2s var(--ease), border-color 0.2s;
}
.claims-steps li:hover { transform: translateY(-3px); border-color: var(--accent-line); }
.claims-steps li::before {
  content: "0" counter(claimstep);
  font-family: var(--font-head); font-weight: 700; font-size: 2rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--accent);
  display: block; margin-bottom: 12px;
}
.claims-steps h3 { font-size: 1.16rem; margin-bottom: 7px; }
.claims-steps p { font-size: 0.9rem; color: var(--muted); }

/* ---------- reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } }
.review {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; display: flex; flex-direction: column; gap: 16px;
  transition: transform 0.2s var(--ease), border-color 0.2s;
}
.review:hover { transform: translateY(-5px); border-color: var(--accent-line); }
.review__stars { display: flex; gap: 3px; }
.review__stars svg { width: 18px; height: 18px; color: var(--accent); }
.review blockquote { font-size: 1.02rem; color: rgba(242, 244, 247, 0.9); flex-grow: 1; }
.review figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; border-top: 1px solid var(--line); }
.review figcaption strong { font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; letter-spacing: 0.03em; text-transform: uppercase; padding-top: 14px; }
.review figcaption span { font-size: 0.88rem; color: var(--muted); }

.ratings-bar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 44px;
  margin-top: 34px; padding: 24px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface-2);
}
.ratings-bar div { text-align: center; }
.ratings-bar strong {
  display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.8rem;
  color: var(--accent-2); line-height: 1.2; font-variant-numeric: tabular-nums;
}
.ratings-bar span { font-size: 0.86rem; color: var(--muted); }

/* ---------- gallery mosaic ---------- */
.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .mosaic { grid-template-columns: repeat(2, 1fr); } }
.mosaic figure {
  position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  aspect-ratio: 4 / 3; margin: 0;
}
.mosaic figure.tall { grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 560px) { .mosaic figure.tall { grid-row: span 1; aspect-ratio: 4 / 3; } }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.mosaic figure:hover img { transform: scale(1.04); }
.mosaic figcaption {
  position: absolute; inset: auto 0 0 0; padding: 40px 18px 14px;
  background: linear-gradient(180deg, transparent, rgba(11, 13, 16, 0.92));
  font-size: 0.88rem; font-weight: 500; color: rgba(242, 244, 247, 0.94);
  opacity: 0; transform: translateY(8px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.mosaic figure:hover figcaption, .mosaic figure:focus-within figcaption { opacity: 1; transform: none; }

/* ---------- feature cards (service pages) ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .features { grid-template-columns: 1fr; } }
.feature {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; transition: transform 0.2s var(--ease), border-color 0.2s;
}
.feature:hover { transform: translateY(-5px); border-color: var(--accent-line); }
.feature__icon {
  width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 20px;
}
.feature__icon svg { width: 26px; height: 26px; }
.feature h3 { font-size: 1.36rem; margin-bottom: 10px; }
.feature p { color: var(--muted); font-size: 0.96rem; }

/* ---------- process ---------- */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; }
@media (max-width: 900px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .process { grid-template-columns: 1fr; } }
.process li {
  counter-increment: step; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 22px; position: relative;
}
.process li::before {
  content: "0" counter(step); font-family: var(--font-head); font-weight: 700; font-size: 2.3rem;
  color: transparent; -webkit-text-stroke: 1.5px var(--accent); display: block; margin-bottom: 14px;
}
.process h3 { font-size: 1.26rem; margin-bottom: 8px; }
.process p { font-size: 0.92rem; color: var(--muted); }

/* ---------- pill list ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pills li {
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 9px 18px;
  font-size: 0.92rem; font-weight: 500; color: rgba(242, 244, 247, 0.9);
  transition: border-color 0.2s, background 0.2s;
}
.pills li:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- price cards ---------- */
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .prices { grid-template-columns: 1fr; } }
.price {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; display: flex; flex-direction: column; gap: 10px;
}
.price--flag { border-color: var(--accent-line); }
.price h3 { font-size: 1.32rem; }
.price strong {
  font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; color: var(--accent);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.price p { color: var(--muted); font-size: 0.94rem; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--accent-line);
  border-radius: 18px; padding: clamp(44px, 6vw, 72px); text-align: center;
}
.cta-band::before {
  content: ""; position: absolute; inset: -50%;
  background:
    radial-gradient(circle at 78% 18%, rgba(220, 38, 38, 0.3), transparent 42%),
    radial-gradient(circle at 18% 82%, rgba(169, 188, 205, 0.16), transparent 46%);
}
.cta-band > * { position: relative; }
.cta-band h2 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); margin-bottom: 14px; }
.cta-band p { color: rgba(242, 244, 247, 0.86); max-width: 560px; margin: 0 auto 30px; font-size: 1.06rem; }
.cta-band__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; }
.contact-card h3 { font-size: 1.5rem; margin-bottom: 20px; }
.contact-card ul { display: grid; gap: 18px; }
.contact-card li { display: flex; gap: 16px; align-items: flex-start; }
.contact-card li svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.contact-card li strong { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.06rem; letter-spacing: 0.03em; text-transform: uppercase; }
.contact-card li a, .contact-card li span { color: var(--muted); font-size: 0.97rem; }
.contact-card li a:hover { color: var(--accent-2); }
.contact-card__socials { display: flex; gap: 12px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.contact-card__socials a {
  width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line-strong);
  display: grid; place-items: center; color: var(--text); transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.contact-card__socials a:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-3px); }
.contact-card__socials svg { width: 20px; height: 20px; }

.form { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; }
.form h3 { font-size: 1.5rem; margin-bottom: 8px; }
.form > p { color: var(--muted); font-size: 0.96rem; margin-bottom: 24px; }
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-family: var(--font-head); font-weight: 600; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 14px 16px; min-height: 48px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 8px;
  font-family: var(--font-body); font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-row textarea { min-height: 130px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}
.form-row small { display: block; margin-top: 7px; font-size: 0.85rem; color: var(--muted); }
.form-row--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-row--pair { grid-template-columns: 1fr; } }
.form-note { margin-top: 16px; font-size: 0.95rem; color: var(--accent-2); min-height: 1.4em; }

/* ---------- page hero breadcrumbs ---------- */
.crumbs { display: flex; gap: 10px; align-items: center; font-size: 0.9rem; color: var(--muted); margin-bottom: 18px; }
.crumbs a:hover { color: var(--accent-2); }
.crumbs span { color: var(--accent); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--surface); padding: 64px 0 34px; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 36px; margin-bottom: 44px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand .brand { margin-bottom: 18px; }
.footer__brand p { color: var(--muted); font-size: 0.95rem; max-width: 300px; }
.footer h4 { font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 18px; }
.footer ul { display: grid; gap: 11px; }
.footer ul a, .footer ul span { color: var(--muted); font-size: 0.96rem; transition: color 0.2s; }
.footer ul a:hover { color: var(--text); }
.footer__bottom {
  border-top: 1px solid var(--line); padding-top: 26px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  color: var(--muted); font-size: 0.88rem;
}

/* ---------- floating call button (mobile) ---------- */
.call-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); display: none; place-items: center;
  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.45);
  transition: transform 0.2s var(--ease);
}
.call-fab:hover { transform: scale(1.06); }
.call-fab svg { width: 24px; height: 24px; }

/* ---------- WhatsApp ---------- */
/* WhatsApp is the default customer channel in South Africa, so this float shows
   on every breakpoint, not just mobile. The green is WhatsApp's own brand colour
   and is deliberately NOT driven from the :root accent tokens — leave it alone
   when re-skinning. */
.wa-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 91;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #04240f; display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.42);
  transition: transform 0.2s var(--ease);
}
.wa-fab:hover { transform: scale(1.06); }
.wa-fab svg { width: 28px; height: 28px; }

.btn--whatsapp { background: #25d366; color: #04240f; border-color: #25d366; }
.btn--whatsapp:hover { background: #1fbe5b; border-color: #1fbe5b; color: #04240f; }
.btn--whatsapp svg { width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; }

@media (max-width: 700px) {
  /* stack the call button above the WhatsApp float so they never overlap */
  .call-fab { display: grid; bottom: 86px; }
  /* comfortable tap targets + clearance so the FABs never sit on the last line.
     Padding is set so every inline link clears 44px measured, not nominally. */
  .footer ul { gap: 2px; }
  .footer ul a, .footer ul span { display: inline-block; padding: 10px 0; }
  .contact-card li a { display: inline-block; padding: 10px 0; }
  .crumbs a, .crumbs { padding: 10px 0; }
  .demo-note { padding-bottom: 152px; }
}

/* ---------- demo ribbon (remove when handing a real site over) ---------- */
.demo-note {
  background: var(--surface-2); border-top: 1px solid var(--line);
  padding: 14px 24px; text-align: center; font-size: 0.84rem; color: var(--muted);
}
.demo-note strong { color: var(--accent-2); font-weight: 700; }