/* ===========================================================================
   CERAMIC COATING LANDING PAGE
   assets/css/styles.css

   CONTENTS
     01  Design tokens
     02  Reset & base
     03  Utilities
     04  Buttons
     05  Header
     06  Hero
     07  Enquiry form
     08  Section shell
     09  Comparison
     10  Visual proof + CTA
     11  Testimonials
     12  Footer
     13  Motion & reveal
   =========================================================================== */


/* ---------------------------------------------------------------------------
   01 · DESIGN TOKENS
   Change the brand colours here and they propagate through the whole page.
   --------------------------------------------------------------------------- */
:root {
  /* Surfaces — a near-black base with three lifts, so panels read as depth
     rather than as stacked grey boxes. */
  --bg:          #08090A;
  --bg-alt:      #0B0C0E;
  --panel:       #101214;
  --panel-2:     #16191C;
  --line:        rgba(255,255,255,.085);
  --line-strong: rgba(255,255,255,.16);

  /* Brand */
  --red:       #E11D22;
  --red-dark:  #B8141A;
  --red-soft:  rgba(225,29,34,.13);
  --red-glow:  rgba(225,29,34,.28);

  /* Type */
  --text:    #F5F6F7;
  --muted:   #9BA2A9;
  --dim:     #6E767D;

  /* States */
  --ok:    #34C77B;
  --warn:  #E0A63C;

  /* Font stack. No webfont is loaded: it costs a request, a licence and a
     render delay on an ad landing page. To use a licensed brand font, self-host
     it in assets/fonts/, add an @font-face here, and prepend it to --font. */
  --font: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Arial, sans-serif;

  /* Restrained radii. Automotive brands read as engineered, not friendly —
     buttons are near-square, panels only gently softened. */
  --radius:    12px;
  --radius-sm: 5px;
  --shadow:    0 18px 48px rgba(0,0,0,.55);
  --wrap:      1200px;
  --gutter:    clamp(16px, 4vw, 40px);
}


/* ---------------------------------------------------------------------------
   02 · RESET & BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keeps the form title clear of the fixed-ish header when the CTA jumps here. */
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Guarantees no sideways scroll at any of the tested widths. */
  overflow-x: hidden;
}

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

h1, h2, h3 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 700;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

/* One consistent, clearly visible focus ring everywhere. */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ic {
  width: 1em; height: 1em;
  flex: none;
  fill: currentColor;
}


/* ---------------------------------------------------------------------------
   03 · UTILITIES
   --------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.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-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--red); color: #fff;
  padding: 10px 18px; border-radius: 0 0 8px 8px;
  font-weight: 700; text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 0; }

/* Small uppercase label that sits above a heading. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 14px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--red);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px;
  background: var(--red); flex: none;
}
.eyebrow--google { color: var(--muted); }
.eyebrow--google::before { display: none; }
.ic--google { width: 17px; height: 17px; }


/* ---------------------------------------------------------------------------
   04 · BUTTONS
   --------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--red);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px;
  border: 0; border-radius: var(--radius-sm);
  background: var(--btn-bg); color: #fff;
  font: inherit; font-weight: 700;
  font-size: .95rem; letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, transform .12s ease, box-shadow .2s ease;
}
.btn:hover  { --btn-bg: var(--red-dark); box-shadow: 0 10px 26px var(--red-glow); }
.btn:active { transform: translateY(1px); }

.btn--block { width: 100%; }
.btn--lg    { padding: 18px 36px; font-size: 1rem; }

/* Disabled = a submission is already in flight. Also the duplicate-submit guard. */
.btn[disabled] { opacity: .62; cursor: not-allowed; box-shadow: none; }
.btn[disabled]:hover { --btn-bg: var(--red); }

/* Loading spinner, revealed by main.js via .is-loading. */
.btn__spinner { display: none; width: 17px; height: 17px; }
.btn.is-loading .btn__spinner {
  display: block;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ---------------------------------------------------------------------------
   05 · HEADER
   Logo only, top-left. No navigation menu — this is a single-goal page.
   --------------------------------------------------------------------------- */
.site-header {
  position: relative; z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(8,9,10,.92);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}
.site-logo-link { display: inline-flex; text-decoration: none; }
/* Logo size is controlled here, so any replacement file just works. */
.site-logo { width: auto; height: 34px; }

.header-cta {
  padding: 9px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--text);
  white-space: nowrap;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.header-cta:hover { border-color: var(--red); background: var(--red-soft); color: #fff; }
/* Hidden on small phones: the form is already a few hundred pixels away. */
@media (max-width: 599px) { .header-cta { display: none; } }


/* ---------------------------------------------------------------------------
   06 · HERO
   --------------------------------------------------------------------------- */
/* The vehicle fills the section edge to edge and the content sits on top of it,
   rather than the image being parked in a bordered card beside the text. This
   is what stops the hero reading as a two-column template block. */
.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(28px, 5vw, 68px) 0 clamp(40px, 6vw, 76px);
  background: var(--bg);
}

.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% 50%;   /* keeps the car body in frame as the box narrows */
  /* Slight lift so the car is easier to read through the scrim. Deliberately
     small — the scrims below still do the contrast work for the headline. */
  filter: brightness(1.14) saturate(1.04);
}

/* Two stacked scrims: one pulls the left side to near-black so the headline
   always has contrast, one fades the base into the page below so the section
   ends without a hard seam. */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(8,9,10,.93) 0%, rgba(8,9,10,.70) 30%,
      rgba(8,9,10,.20) 54%, rgba(8,9,10,.34) 100%),
    linear-gradient(180deg,
      rgba(8,9,10,.42) 0%, rgba(8,9,10,0) 26%,
      rgba(8,9,10,.30) 72%, var(--bg) 100%);
}

.hero__grid { display: grid; gap: clamp(20px, 3vw, 30px); }

/* Hero copy sits directly on photography, so it carries its own soft shadow
   rather than relying on the scrim alone to stay legible over highlights. */
.hero__copy { text-shadow: 0 1px 16px rgba(0,0,0,.5); }

.hero__copy .hero__sub {
  margin-top: 14px;
  max-width: 46ch;
  font-size: clamp(.98rem, 1.6vw, 1.1rem);
  color: var(--muted);
}

.hero h1 {
  font-size: clamp(1.6rem, 6.2vw, 3rem);
  letter-spacing: -.028em;
}
/* "Ceramic Coating" — the one emphasised phrase in the headline.
   Brand red, held together on one line, and underscored by a rule that sits in
   the descender space. The rule is what makes it read as a deliberate highlight
   rather than just recoloured text, without resorting to a glow or a badge. */
.hero h1 em {
  position: relative;
  display: inline-block;
  font-style: normal;
  color: var(--red);
  white-space: nowrap;
}
.hero h1 em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.06em;
  height: 3px;
  background: var(--red);
  border-radius: 2px;
  opacity: .55;
}

/* ============================================================
   MOBILE HERO — car in background, heading top, full form below
   ─────────────────────────────────────────────────────────────
   • Hero is auto height — no fixed viewport lock
   • Car image sits in the gap between heading and form
   • Form is fully visible, no internal scroll
   ============================================================ */
@media (max-width: 979px) {
  .hero {
    height: auto;
    padding: 0 0 clamp(24px, 5vw, 40px);
    display: block;
    overflow: visible;
  }

  /* Car positioned in the middle gap zone — shifted up slightly */
  .hero__bg {
    position: absolute;
    top: clamp(195px, 34dvh, 250px);
    left: 0;
    right: 0;
    height: clamp(180px, 28dvh, 240px);
    z-index: -2;
    overflow: hidden;
  }
  .hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 50%;
    filter: brightness(1.08) saturate(1.04);   /* matches the desktop lift */
  }

  /* Scrim — solid dark at top & bottom, 100% clear in the middle for the car. */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      180deg,
      var(--bg)         0%,
      var(--bg)        22%,    /* solid behind text */
      rgba(8,9,10,.25) 30%,    /* quick fade */
      rgba(8,9,10,0)   36%,    /* completely clear over the car */
      rgba(8,9,10,0)   58%,    /* still completely clear */
      rgba(8,9,10,.60) 65%,    /* fade to dark */
      var(--bg)        72%     /* solid behind form */
    );
  }

  /* Grid — normal block flow */
  .hero__grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
  }

  /* Heading — at top, over the dark scrim */
  .hero__copy {
    flex: 0 0 auto;
    padding: clamp(16px, 4vw, 24px) clamp(16px, 5vw, 24px) clamp(12px, 3vw, 18px);
    text-shadow: 0 2px 20px rgba(0,0,0,.95), 0 0 40px rgba(0,0,0,.8);
    position: relative;
    z-index: 2;
  }
  .hero h1 {
    font-size: clamp(2rem, 9vw, 2.35rem);     /* Large font size for mobile */
    line-height: 1.15;
    /* Removed max-width so it flows naturally into 3 lines */
  }
  .hero__copy .hero__sub {
    margin-top: 12px;
    font-size: 1rem;
    line-height: 1.5;
    color: #C9CED3;
  }
  .eyebrow { margin-bottom: 8px; }

  /* Spacer gap — car shows through here */
  .hero__form {
    margin-top: clamp(180px, 28dvh, 250px);  /* increased slightly to match the shifted car */
    padding: 0 clamp(16px, 4vw, 24px) clamp(16px, 5vw, 24px);
    position: relative;
    z-index: 2;
  }

  /* Benefits — hidden on mobile */
  .hero__benefits { display: none; }
}

/* Phones: keep the eyebrow on one line. */
@media (max-width: 599px) {
  .hero .eyebrow { font-size: .66rem; letter-spacing: .13em; }
  .hero .eyebrow::before { width: 16px; }
}

/* Narrowest phones — slightly smaller headline */
@media (max-width: 360px) {
  .hero h1 { font-size: 1.45rem; }
}

/* Benefits ------------------------------------------------------------------ */
.benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}
.benefits li {
  display: flex; align-items: center; gap: 9px;
  font-size: .9rem; color: #DCE0E4;
}
.benefits .ic {
  width: 18px; height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: var(--red-soft);
  color: var(--red);
}

/* A ruled note rather than a floating pill. Pills read as UI chrome; a rule
   reads as a stated term of business, which is what this is. */
.finance-badge {
  display: inline-flex; align-items: center; gap: 11px;
  margin-top: 22px;
  padding: 9px 16px 9px 14px;
  border-left: 2px solid var(--red);
  background: rgba(225,29,34,.09);
  font-size: .86rem; color: #EBD4D5;
}
.finance-badge .ic { width: 19px; height: 19px; color: var(--red); }
.finance-badge strong { color: #fff; }

/* Desktop hero: visual left, open form right --------------------------------- */
@media (min-width: 980px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) 424px;
    grid-template-areas:
      "copy     form"
      "benefits form";
    align-items: start;
    column-gap: clamp(40px, 5vw, 80px);
    min-height: 560px;
  }
  .hero__copy     { grid-area: copy; }
  .hero__form     { grid-area: form; }
  /* Lifted clear of the section floor so the left column reads as one balanced
     block (headline → benefits → financing) instead of copy at the top and
     bullets stranded at the bottom. */
  .hero__benefits {
    grid-area: benefits;
    align-self: end;
    margin-bottom: clamp(18px, 5vh, 58px);
  }

  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
}


/* ---------------------------------------------------------------------------
   07 · ENQUIRY FORM
   Always open — never a popup or a modal.
   --------------------------------------------------------------------------- */
.quote-card {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* Red rule across the top — the one piece of brand colour on the panel. */
.quote-card__head {
  position: relative;
  padding: 22px clamp(18px, 4vw, 26px) 16px;
  border-bottom: 1px solid var(--line);
}
.quote-card__head::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--red), rgba(225,29,34,0));
}
.quote-card__title {
  font-size: clamp(1.18rem, 3.4vw, 1.42rem);
  letter-spacing: .06em; text-transform: uppercase;
}
.quote-card__note { margin-top: 7px; font-size: .84rem; color: var(--muted); }

.quote-form { padding: clamp(16px, 4vw, 24px); }

.field + .field { margin-top: 14px; }

.field label {
  display: block;
  margin-bottom: 7px;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #C6CBD0;
}
.field .req { color: var(--red); }

.field input,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #0A0C0D;
  color: var(--text);
  font: inherit;
  /* 16px on mobile prevents iOS Safari from zooming when a field is focused. */
  font-size: 16px;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.field textarea { resize: vertical; min-height: 84px; line-height: 1.5; }

.field input::placeholder,
.field textarea::placeholder { color: var(--dim); }

.field input:hover,
.field textarea:hover { border-color: rgba(255,255,255,.26); }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red);
  background: #0D0F10;
  box-shadow: 0 0 0 3px var(--red-soft);
}

/* Invalid state, applied by main.js only after a submit or a blur. */
.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--red); }

.field__error {
  display: none;
  margin-top: 6px;
  font-size: .78rem;
  color: #FF8A8E;
}
.field.is-invalid .field__error { display: block; }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

#lead-submit { margin-top: 18px; }

/* Status message: success / error / preview-mode ---------------------------- */
.form-status {
  display: none;
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: .87rem;
  line-height: 1.5;
}
.form-status.is-shown { display: block; }
.form-status strong { display: block; margin-bottom: 3px; color: #fff; }

.form-status--ok      { border-color: rgba(52,199,123,.42); background: rgba(52,199,123,.09); color: #BFEBD3; }
.form-status--error   { border-color: rgba(225,29,34,.45);  background: var(--red-soft);      color: #FBC9CB; }
.form-status--preview { border-color: rgba(224,166,60,.45); background: rgba(224,166,60,.09); color: #EFD9AE; }

.quote-form__legal {
  margin-top: 13px;
  font-size: .74rem; line-height: 1.5;
  color: var(--dim);
}
.quote-form__legal a { color: var(--muted); }


/* ---------------------------------------------------------------------------
   08 · SECTION SHELL
   --------------------------------------------------------------------------- */
/* Section rhythm is deliberately UNEVEN. A page where every band has identical
   padding reads as generated; a designed page paces itself — a roomy
   information section, a tighter conversion band, a compact proof strip. */
.section { padding: clamp(52px, 8vw, 104px) 0; }
.section--compare { background: var(--bg-alt); border-block: 1px solid var(--line); }

.section__head { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 44px); }
.section__head--center {
  max-width: 54ch;
  margin-inline: auto;
  text-align: center;
}
.section__head--center .section__sub { max-width: 48ch; margin-inline: auto; }
/* Lighter weight at a larger size reads editorial rather than shouty. The hero
   H1 keeps its bold; section headings deliberately do not compete with it. */
.section__head h2 {
  font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  font-weight: 500;
  letter-spacing: -.015em;
}
.section__head h2 em { font-style: normal; color: var(--red); }
.section__sub { margin-top: 14px; color: var(--muted); font-size: clamp(.94rem, 1.5vw, 1.03rem); }


/* ---------------------------------------------------------------------------
   09 · COMPARISON
   Real table markup. Tablet/desktop show it as a table; phones restack the
   same cells into readable cards (see the max-width block below).
   --------------------------------------------------------------------------- */
/* Narrower than the page container. A comparison is a focused, readable block —
   letting it run the full 1200px would make it feel like a data dump. */
.compare {
  max-width: 1000px;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
}
.compare__table { width: 100%; border-collapse: collapse; }

.compare__table th,
.compare__table td {
  padding: 17px clamp(14px, 2.2vw, 24px);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
.compare__table tbody tr:last-child th,
.compare__table tbody tr:last-child td { border-bottom: 0; }

.compare__table thead th {
  font-size: .74rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
  background: #0C0E10;
  border-bottom-color: var(--line-strong);
}
.compare__table tbody th {
  font-size: .95rem; font-weight: 600;
  color: #E3E6E9;
}

.compare__table td { font-size: .93rem; color: var(--muted); }
.compare__table td strong { color: #fff; font-weight: 600; }

/* Winning column: the HEADER carries solid red, the body cells stay clean.
   Washing the whole column in red muddies the values and makes the table look
   like a pricing card. A decisive header plus clean rows reads as a spec sheet. */
.compare__table thead th.c-ours {
  background: var(--red);
  color: #fff;
  /* Slightly wider than the alternative column — the eye reads width as weight. */
  width: 38%;
}
.compare__table thead th.c-theirs { width: 32%; }

.c-ours { position: relative; }
tbody .c-ours {
  background: rgba(225,29,34,.045);
  box-shadow: inset 1px 0 0 rgba(225,29,34,.22), inset -1px 0 0 rgba(225,29,34,.22);
}

/* Losing column gets a flat, lifeless wash — no colour, which is the point. */
.compare__table .c-theirs { background: rgba(255,255,255,.022); }

.c-ours__tag {
  display: block;
  width: max-content;
  margin-bottom: 6px;
  font-size: .58rem; letter-spacing: .16em;
  color: rgba(255,255,255,.75);
}

.compare__table td.c-ours { color: #D9DDE1; }

.stars { display: inline-flex; gap: 2px; color: var(--red); vertical-align: middle; }
.stars .ic { width: 13px; height: 13px; }
.compare__table .stars { margin-right: 9px; }

/* RATING STARS in the comparison table.
   Every row is scored out of five on both sides, so the reader compares two
   ratings rather than a tick against a cross. Unearned stars stay in place but
   drop back to a hairline outline — the gap is what carries the message. */
.stars--rate { display: flex; gap: 3px; margin-bottom: 7px; }
.stars--rate .ic { width: 14px; height: 14px; }
.ic--dim { color: rgba(255,255,255,.16); }
/* The losing column's earned stars are muted too, so red always reads as ours. */
.c-theirs .stars--rate { color: var(--dim); }

/* Phone view: Keep the tabular layout, but tighten paddings and fonts to fit on small screens. */
@media (max-width: 767px) {
  .compare {
    border-radius: 8px;
    overflow: hidden;
  }
  
  .compare__table { table-layout: fixed; }

  .compare__table th,
  .compare__table td {
    padding: 10px 8px;
    font-size: 0.72rem;
    line-height: 1.35;
    word-wrap: break-word;
    hyphens: auto;
  }
  
  .compare__table thead th {
    font-size: 0.6rem;
    padding: 10px 8px;
    letter-spacing: 0;
  }
  
  .compare__table tbody th {
    font-size: 0.72rem;
  }

  .compare__table td strong {
    font-size: 0.72rem;
  }

  .c-ours__tag {
    display: none; /* Hide 'Recommended' tag on mobile to save horizontal space */
  }

  /* Distribute widths */
  .compare__table thead th.c-feature { width: 28%; }
  .compare__table thead th.c-ours { width: 36%; }
  .compare__table thead th.c-theirs { width: 36%; }
  
  .stars .ic { width: 10px; height: 10px; }
  .compare__table .stars { margin-right: 2px; }

  /* Ratings sit on their own line above the wording in the narrow columns. */
  .compare__table td.has-stars { display: table-cell; }
  .stars--rate { gap: 2px; margin-bottom: 4px; }
  .stars--rate .ic { width: 11px; height: 11px; }
  .compare__table td.has-stars strong,
  .compare__table td.has-stars span:not(.stars) { display: block; }
}


/* ---------------------------------------------------------------------------
   10 · VISUAL PROOF + CTA
   --------------------------------------------------------------------------- */
/* THE CONVERSION BLOCK
   Stays dark like the rest of the page — the brand direction is black surfaces
   with controlled red accents, and a full-bleed red band overwhelms that on
   mobile, where it fills the entire screen.
   This section is set apart from the comparison above it by SHAPE rather than
   colour: a split image/text layout against that section's centred table, and
   a noticeably tighter vertical rhythm. */
.section--proof {
  background: var(--bg);
  padding: clamp(44px, 6vw, 72px) 0;   /* tighter than the information sections */
}
.proof__grid { display: grid; gap: clamp(28px, 5vw, 60px); align-items: center; }

@media (min-width: 980px) {
  .proof__grid { grid-template-columns: 1.05fr .95fr; }
}

/* Single combined before/after image ---------------------------------------- */
.proof-img {
  margin: 0;
  position: relative;
  /* Square corners and a hard shadow: this is evidence, presented like a photograph. */
  border-radius: 2px;
  overflow: hidden;
  background: #0C0E10;
  box-shadow: 0 16px 34px rgba(0,0,0,.34);
}
.proof-img img {
  width: 100%;
  height: auto;
  display: block;
}
.proof-img__caption {
  margin-top: 10px;
  font-size: .78rem; line-height: 1.5;
  color: var(--dim);
}

/* CTA block ----------------------------------------------------------------- */
.proof__cta h2 {
  font-size: clamp(1.6rem, 3.8vw, 2.5rem);
  font-weight: 500;
}
.proof__cta p {
  margin-top: 16px;
  max-width: 46ch;
  color: var(--muted);
  font-size: clamp(.96rem, 1.5vw, 1.06rem);
}
/* The one red button below the fold — this is the second ask for the enquiry. */
.proof__cta .btn { margin-top: 28px; }

.proof__finance {
  display: flex; align-items: center; gap: 9px;
  margin-top: 18px !important;
  font-size: .84rem;
  color: var(--muted) !important;
}
.proof__finance .ic { width: 18px; height: 18px; color: var(--red); }




/* ---------------------------------------------------------------------------
   11 · TESTIMONIALS
   --------------------------------------------------------------------------- */
/* REVIEWS
   Presented as a slow, continuously moving rail rather than a static grid of
   six equal boxes. Two reasons, both borrowed from how the reference handles
   social proof:
     · a moving rail reads as "there are many of these", where a 3x2 grid reads
       as "someone placed exactly six cards";
     · small, dense cards that run past the edge of the viewport imply the list
       continues, which a neatly-closed grid cannot do.
   Card order is review text FIRST, then stars, then the name — the way a real
   Google review is scanned. Leading with five red stars on every card is the
   tell of a generated testimonial section.
   Implemented as a pure CSS marquee: no carousel library, no JS. */
.section--reviews {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: clamp(48px, 6vw, 84px) 0 clamp(52px, 7vw, 92px);
  overflow: hidden;
}

.reviews__head { margin-bottom: clamp(26px, 3.5vw, 38px); }
.reviews__source {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px;
  font-size: .84rem; color: var(--dim);
}

.reviews-rail {
  position: relative;
  /* Bleeds past the container so cards are cut off at both edges. */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.reviews {
  display: flex;
  gap: 14px;
  padding-inline: 14px;
}
/* The rail only animates once main.js has cloned the card list, so the loop can
   never show a gap. Without JS it degrades to a normal horizontal scroller. */
.reviews.is-looping {
  width: max-content;
  padding-inline: 0;
  animation: review-scroll 68s linear infinite;
}
.reviews-rail:hover .reviews,
.reviews-rail:focus-within .reviews { animation-play-state: paused; }

/* Cards are cloned once, so shifting by exactly -50% loops seamlessly. */
@keyframes review-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.review {
  display: flex; flex-direction: column;
  flex: 0 0 300px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.review blockquote { margin: 0; flex: 1; }
.review blockquote p {
  color: #D7DBDF;
  font-size: .92rem; font-weight: 300; line-height: 1.6;
}

.review__meta { margin-top: 16px; }
.stars--lg .ic { width: 14px; height: 14px; }

/* No avatar circle — a made-up initial in a coloured disc is the tell of a
   generated testimonial. Stars, the quote and a name is all a real review needs. */
.review__by {
  display: block;
  margin-top: 10px;
  font-style: normal; font-weight: 600;
  font-size: .87rem; color: #E8EBED;
}

/* Never animate for people who asked not to; fall back to a normal scroller. */
@media (prefers-reduced-motion: reduce) {
  .reviews.is-looping { animation: none; }
  .reviews-rail { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
/* No JS: the rail is still fully usable by swiping/scrolling it. */
.reviews-rail { overflow-x: auto; scrollbar-width: none; }
.reviews-rail::-webkit-scrollbar { display: none; }
.reviews-rail:has(.is-looping) { overflow-x: hidden; }


/* ---------------------------------------------------------------------------
   11b · OUR SERVICES
   Full-bleed image cards: the photo fills the card, the title sits over a dark
   gradient at the bottom-left, and an arrow marks the card as tappable. Matches
   the client's reference section. Eight cards, 4 / 2 / 1 columns.
   --------------------------------------------------------------------------- */
.section--services {
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.services {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: repeat(2, 1fr);   /* phones: 2-up, like the reference */
}
@media (min-width: 700px)  { .services { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .services { grid-template-columns: repeat(4, 1fr); } }

.service { min-width: 0; }

/* The whole card is one link. Fixed 5:6 ratio + explicit img width/height means
   the grid never shifts as the lazy images arrive. */
.service__card {
  position: relative;
  display: block;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--panel);
  text-decoration: none;
  border: 1px solid var(--line);
}
.service__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}
.service__card:hover .service__img { transform: scale(1.045); }

/* Dark wash rising from the base so the title is legible over any photo. */
.service__card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(6,7,8,0) 38%, rgba(6,7,8,.55) 70%, rgba(6,7,8,.92) 100%);
  pointer-events: none;
}

.service__title {
  position: absolute;
  left: clamp(12px, 1.4vw, 18px);
  right: clamp(12px, 1.4vw, 18px);
  bottom: clamp(12px, 1.4vw, 16px);
  z-index: 1;
  margin: 0;
  color: #fff;
  font-size: clamp(.95rem, 1.5vw, 1.12rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
}

/* Arrow chip, top-right — the reference's affordance that the card is tappable. */
.service__arrow {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 1;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 7px;
  background: rgba(10,11,12,.55);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  backdrop-filter: blur(4px);
  transition: background-color .2s ease, transform .2s ease;
}
.service__arrow .ic { width: 17px; height: 17px; }
.service__card:hover .service__arrow { background: var(--red); border-color: var(--red); transform: translateX(2px); }

.service__card:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .service__img { transition: none; }
  .service__card:hover .service__img { transform: none; }
  .service__card:hover .service__arrow { transform: none; }
}


/* ---------------------------------------------------------------------------
   12 · FOOTER
   --------------------------------------------------------------------------- */
.site-footer {
  padding: 34px 0;
  border-top: 1px solid var(--line);
  background: #060708;
}
.site-footer__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px;
}

.site-footer__links { display: flex; align-items: center; gap: 18px; }
.site-footer__links a {
  font-size: .85rem; color: var(--muted); text-decoration: none;
  transition: color .18s ease;
}
.site-footer__links a:hover { color: #fff; }

.site-footer__copy { font-size: .82rem; color: var(--dim); }

@media (max-width: 620px) {
  .site-footer__inner { flex-direction: column; text-align: center; }
}


/* ---------------------------------------------------------------------------
   13 · MOTION & REVEAL
   Subtle only. Elements are visible by default and main.js adds .reveal to
   opt them in, so the page is never blank if JavaScript fails.
   --------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Respect the OS "reduce motion" setting: no reveals, no smooth scroll, no spin. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}