/* =========================================================
   Hamilton's Tile & Stone - Sydney landing page
   Stylesheet
   =========================================================
   1.  Fonts
   2.  Tokens
   3.  Reset and base
   4.  Layout helpers
   5.  Buttons
   6.  Media slots (image placeholders)
   7.  Ticker
   8.  Header
   9.  Hero
   10. Quote form
   11. Social proof
   12. How it works
   13. Services
   14. Service area
   15. Trust signals
   16. Case study / before and after
   17. Risk reversal
   18. FAQ
   19. Bottom CTA
   20. Footer
   21. Sticky mobile bar
   22. Privacy page
   23. Motion and accessibility
   ========================================================= */


/* ---------------------------------------------------------
   1. Fonts
   Drop the woff2 files listed in /assets/fonts/fonts-required.md
   into /assets/fonts/. Until then the fallback stack is used.
   --------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ---------------------------------------------------------
   2. Tokens
   --------------------------------------------------------- */
:root {
  /* Colour. Replace with exact brand hex values if they exist. */
  --ink:          #0B0B0B;
  --ink-soft:     #1A1A1A;
  --ink-line:     #2A2A2A;
  --lime:         #8CC63E;
  --lime-bright:  #A0DC4A;
  --lime-dark:    #6FA82C;
  --paper:        #FFFFFF;
  --paper-alt:    #F4F4F2;
  --line:         #E3E3DF;
  --muted:        #6E6E6B;
  --muted-dark:   #A6A6A1;
  --slot:         #DEDEDA;
  --slot-dark:    #232323;
  --star:         #F5B301;
  --error:        #C0392B;

  /* Type */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0:  clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
  --step-1:  clamp(1.0625rem, 1.02rem + 0.23vw, 1.1875rem);
  --step-2:  clamp(1.25rem, 1.17rem + 0.4vw, 1.5rem);
  --step-3:  clamp(1.5rem, 1.36rem + 0.7vw, 1.9375rem);
  --step-4:  clamp(1.8125rem, 1.58rem + 1.16vw, 2.5rem);
  --step-5:  clamp(2.125rem, 1.7rem + 2.13vw, 3.4375rem);

  /* Space */
  --gap-xs: 8px;
  --gap-sm: 14px;
  --gap:    22px;
  --gap-lg: 36px;
  --gap-xl: 60px;

  /* Shape */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.06);
  --shadow:    0 10px 30px rgba(11, 11, 11, 0.08);
  --shadow-lg: 0 24px 60px rgba(11, 11, 11, 0.18);

  --header-h: 68px;
}


/* ---------------------------------------------------------
   3. Reset and base
   --------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--gap-sm);
  line-height: 1.14;
  letter-spacing: -0.022em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--gap-sm); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

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

ul, ol { margin: 0; padding: 0; list-style: none; }

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

.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;
}


/* ---------------------------------------------------------
   4. Layout helpers
   --------------------------------------------------------- */
.wrap {
  width: min(1120px, 100% - 40px);
  margin-inline: auto;
}
.wrap--narrow { width: min(760px, 100% - 40px); }

.band { padding-block: clamp(56px, 7.5vw, 100px); }
.band--alt { background: var(--paper-alt); }
.band--dark { background: var(--ink); color: var(--paper); }
.band--tight { padding-block: clamp(40px, 5vw, 64px); }

.band-head {
  text-align: center;
  max-width: 660px;
  margin: 0 auto clamp(32px, 4vw, 52px);
}
.band-head p {
  color: var(--muted);
  font-size: var(--step-1);
}
.band--dark .band-head p { color: var(--muted-dark); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--lime-dark);
  margin-bottom: var(--gap-xs);
}
.band--dark .eyebrow { color: var(--lime); }


/* ---------------------------------------------------------
   5. Buttons
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease,
              border-color 0.16s ease, transform 0.16s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--lime);
  color: var(--ink);
}
.btn--primary:hover { background: var(--lime-bright); }

.btn--dark {
  background: var(--ink);
  color: var(--paper);
}
.btn--dark:hover { background: var(--ink-soft); }

.btn--ghost {
  background: transparent;
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.35);
  font-weight: 600;
}
.btn--ghost:hover { border-color: var(--paper); }

.btn--ghost-dark {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
  font-weight: 600;
}
.btn--ghost-dark:hover { border-color: var(--ink); }

.btn--block { width: 100%; }
.btn--lg { padding: 18px 32px; font-size: var(--step-1); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  align-items: center;
}
.btn-row--centre { justify-content: center; }


/* ---------------------------------------------------------
   6. Media slots (image placeholders)
   Every slot keeps its aspect ratio whether or not the real
   file exists. main.js adds .is-empty when an image 404s.
   --------------------------------------------------------- */
.slot {
  position: relative;
  overflow: hidden;
  background: var(--slot);
  border-radius: var(--radius);
  aspect-ratio: var(--ratio, 4 / 3);
}
.slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slot.is-empty img { display: none; }
.band--dark .slot,
.slot--dark { background: var(--slot-dark); }

.slot--round { border-radius: var(--radius-pill); }


/* ---------------------------------------------------------
   7. Ticker
   --------------------------------------------------------- */
.ticker {
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 7px 0;
  overflow: hidden;
  white-space: nowrap;
}
.ticker__track {
  display: inline-flex;
  gap: 46px;
  padding-left: 46px;
  animation: ticker-scroll 34s linear infinite;
}
.ticker span { flex: none; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ---------------------------------------------------------
   8. Header
   --------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: auto;
}
.brand { min-width: 0; }

/* Logo files: hamiltonslogo_icon.jpg is 275x275, hamiltonslogo_text.png is
   1972x141 (ratio 13.99:1). The <img> tags carry those intrinsic values so the
   browser reserves the right box; the rules below set the rendered size. */
.brand__icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 0;   /* the mark is a square, no rounding */
}
.brand__lockup { min-width: 0; }
.brand__wordmark {
  width: 308px;      /* 22px tall at the natural ratio */
  height: auto;
  max-width: 100%;   /* shrinks proportionally on narrow screens */
}
.brand__sub {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav { display: flex; gap: 26px; }
.nav a {
  font-size: var(--step-0);
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  padding: 4px 0;
}
.nav a:hover { color: var(--lime-dark); }

.header__call {
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  font-size: var(--step-0);
}

@media (max-width: 860px) {
  .nav { display: none; }
}
@media (max-width: 520px) {
  .header__inner { gap: 12px; }
  .brand { gap: 8px; }
  .brand__icon { width: 30px; height: 30px; }
  .brand__wordmark { width: 176px; }
  .brand__sub { margin-top: 3px; font-size: 8.5px; letter-spacing: 0.1em; }
  .header__call { padding: 10px 13px; font-size: var(--step--1); }
}


/* ---------------------------------------------------------
   9. Hero
   --------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(40px, 6vw, 72px) clamp(56px, 7vw, 88px);
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: 0;
  background: var(--slot-dark);
  overflow: hidden;
  aspect-ratio: auto;   /* .slot's 4/3 would otherwise size this off the width */
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;      /* was 0.42 */
}
.hero__bg.is-empty img { display: none; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Two numbers control how dark the hero reads: this gradient and the
     .hero__bg img opacity above. Raise these values to darken again. */
  background: linear-gradient(
    180deg,
    rgba(11, 11, 11, 0.46) 0%,
    rgba(11, 11, 11, 0.6) 55%,
    rgba(11, 11, 11, 0.79) 100%
  );
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--lime);
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--gap);
}
.hero__pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
}

.hero h1 { margin-bottom: var(--gap-sm); }
.hero h1 em {
  display: block;
  font-style: normal;
  color: var(--lime);
}

.hero__sub {
  font-size: var(--step-1);
  color: rgba(255, 255, 255, 0.86);
  max-width: 46ch;
}
.hero__areas {
  font-size: var(--step-0);
  /* Lifted from --muted-dark now that the hero background shows through. */
  color: rgba(255, 255, 255, 0.78);
  max-width: 46ch;
  margin-bottom: var(--gap-lg);
}

.hero__actions { margin-bottom: var(--gap-lg); }

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: var(--gap);
}
.stat {
  background: rgba(11, 11, 11, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 16px 12px;
  text-align: center;
}
.stat__icon { color: var(--lime); margin: 0 auto 8px; }
.stat__value {
  display: block;
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
}
.stat__label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin-top: 2px;
}

.hero__trust {
  text-align: center;
  color: var(--lime);
  font-weight: 700;
  font-size: var(--step-1);
  margin-bottom: var(--gap);
}

.owner {
  display: flex;
  align-items: center;
  gap: var(--gap);
  background: rgba(11, 11, 11, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
}
.owner__photo {
  --ratio: 1 / 1;
  flex: none;
  width: 84px;
  border-radius: var(--radius-pill);
}
.owner h2 {
  font-size: var(--step-1);
  margin-bottom: 4px;
}
.owner p {
  font-size: var(--step--1);
  color: var(--muted-dark);
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__form { order: 3; }

  /* The photo fills the top of the hero only, zoomed in, then fades into
     the solid --ink background that carries the rest of the section. */
  .hero__bg {
    bottom: auto;
    height: clamp(340px, 60vh, 580px);
    aspect-ratio: auto;   /* .slot's 4/3 would otherwise force the width */
  }
  .hero__bg img {
    transform: scale(1.35);
    transform-origin: 50% 45%;
  }
  .hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(11, 11, 11, 0.5) 0%,
      rgba(11, 11, 11, 0.62) 45%,
      rgba(11, 11, 11, 0.92) 82%,
      var(--ink) 100%
    );
  }
  .hero::after { background: none; }
}
@media (max-width: 460px) {
  .hero__actions .btn { width: 100%; }
  .owner { flex-direction: column; text-align: center; }
}


/* ---------------------------------------------------------
   10. Quote form
   --------------------------------------------------------- */
.quote-card {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 30px);
  box-shadow: var(--shadow-lg);
}
.quote-card h2 {
  font-size: var(--step-2);
  margin-bottom: 4px;
}
.quote-card__lede {
  color: var(--muted);
  font-size: var(--step--1);
  margin-bottom: var(--gap);
}

.field { margin-bottom: 14px; }
.field > label,
.fieldset__legend {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  margin-bottom: 6px;
}
.req { color: var(--lime-dark); }

.field > input,
.field > textarea {
  width: 100%;
  font: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}
.field > textarea { min-height: 84px; resize: vertical; }
.field > input::placeholder,
.field > textarea::placeholder { color: #9C9C98; }
.field > input:focus,
.field > textarea:focus {
  background: var(--paper);
  border-color: var(--ink);
}
.field > input[aria-invalid="true"],
.field > textarea[aria-invalid="true"] { border-color: var(--error); }

.field__error {
  display: none;
  color: var(--error);
  font-size: var(--step--1);
  font-weight: 500;
  margin-top: 5px;
}
.field.has-error .field__error { display: block; }

.fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 14px;
}
/* Eight stone options would run the form very long in a single column,
   so pair them up from 360px and let the "not sure" option span both. */
.choices { display: grid; gap: 7px; }
@media (min-width: 360px) {
  .choices { grid-template-columns: 1fr 1fr; }
}
.choice--wide { grid-column: 1 / -1; }
.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--step-0);
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}
.choice:hover { border-color: var(--ink); }
.choice input { accent-color: var(--lime-dark); flex: none; margin: 0; }
.choice:has(input:checked) {
  border-color: var(--ink);
  background: var(--paper-alt);
}

.form__submit { margin-top: 4px; }
.form__safe {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin-top: 10px;
}
.form__promise {
  text-align: center;
  color: var(--lime-dark);
  font-weight: 700;
  font-size: var(--step--1);
  margin-top: 4px;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  display: none;
  text-align: center;
  padding: 34px 10px;
}
.form__status svg { margin: 0 auto 14px; color: var(--lime-dark); }
.form__status h2 { font-size: var(--step-2); }
.form__status p { color: var(--muted); }
.quote-card.is-sent .form__status { display: block; }
.quote-card.is-sent .quote-card__head,
.quote-card.is-sent form { display: none; }


/* ---------------------------------------------------------
   11. Social proof
   --------------------------------------------------------- */
.reviews {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  margin-inline: -4px;
  padding-inline: 4px;
  scrollbar-width: thin;
}
.review {
  flex: 0 0 min(360px, 82%);
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.review__stars {
  color: var(--star);
  letter-spacing: 2px;
  font-size: var(--step-0);
  margin-bottom: 12px;
}
.review__text {
  font-size: var(--step-0);
  color: #333330;
  flex: 1;
}
.review__who {
  font-weight: 700;
  font-size: var(--step--1);
  margin-top: 16px;
}
.review__who span {
  display: block;
  font-weight: 500;
  color: var(--muted);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: var(--gap-lg);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  font-size: var(--step--1);
  font-weight: 600;
}
.badge svg { color: var(--lime-dark); flex: none; }


/* ---------------------------------------------------------
   12. How it works
   --------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  counter-reset: step;
}
.step {
  text-align: center;
  padding: 0 8px;
}
.step__num {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--lime);
  font-weight: 700;
  font-size: var(--step-2);
}
.step h3 { font-size: var(--step-1); }
.step p { color: var(--muted); font-size: var(--step-0); }

@media (max-width: 760px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--gap-lg); }
}


/* ---------------------------------------------------------
   13. Services
   --------------------------------------------------------- */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap);
}
.service {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.service .slot { --ratio: 4 / 3; border-radius: 0; }
.service__body { padding: 20px; }
.service h3 { font-size: var(--step-1); }
.service p { color: var(--muted); font-size: var(--step-0); }


/* ---------------------------------------------------------
   13b. Stone types
   Square swatches, two across on mobile, four from 720px.
   --------------------------------------------------------- */
.stones {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.stone { text-align: center; }
.stone__swatch {
  --ratio: 1 / 1;
  border: 1px solid var(--line);
  margin-bottom: var(--gap-sm);
}
.stone__name {
  font-size: var(--step-1);
  margin: 0 0 4px;
}
.stone__note {
  color: var(--muted);
  font-size: var(--step--1);
  margin: 0;
}
.stones__note {
  text-align: center;
  color: var(--muted);
  font-size: var(--step-0);
  margin: var(--gap-lg) auto 0;
  max-width: 46ch;
}
.stones__note strong { color: var(--ink); }

@media (min-width: 720px) {
  .stones { grid-template-columns: repeat(4, 1fr); }
}


/* ---------------------------------------------------------
   14. Service area
   --------------------------------------------------------- */
.areas__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.suburbs {
  font-size: var(--step-1);
  line-height: 2;
  color: var(--paper);
  overflow-wrap: break-word;
}
.suburbs b {
  font-weight: 600;
  white-space: nowrap;
}
.suburbs .dot { color: var(--lime); padding: 0 6px; }

.areas__note {
  margin-top: var(--gap);
  color: var(--muted-dark);
}
.areas__map {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--slot-dark);
  aspect-ratio: 5 / 4;
}
.areas__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- Postcode checker ---- */
.pc-check {
  margin-top: var(--gap);
  padding: 22px;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  background: var(--slot-dark);
}
.pc-check__title {
  font-size: var(--step-1);
  color: var(--paper);
  margin-bottom: 6px;
}
.pc-check__lede {
  font-size: var(--step--1);
  color: var(--muted-dark);
  margin-bottom: var(--gap-sm);
}
.pc-check__label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.pc-check__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pc-check__row input {
  flex: 1 1 130px;
  min-width: 0;
  padding: 14px 16px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pc-check__row .btn { flex: 0 0 auto; }
.pc-check__result {
  margin-top: var(--gap-sm);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--paper);
}
.pc-check__result:empty { display: none; }
.pc-check__result a { color: inherit; text-underline-offset: 3px; }
.pc-check__result.is-in { color: var(--lime-bright); }
.pc-check__result.is-error { font-weight: 500; color: var(--muted-dark); }

@media (max-width: 420px) {
  .pc-check__row .btn { width: 100%; }
}

@media (max-width: 800px) {
  .areas__grid { grid-template-columns: minmax(0, 1fr); }
  .areas__map { order: -1; }
}


/* ---------------------------------------------------------
   15. Trust signals
   --------------------------------------------------------- */
.trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.trust__item {
  background: var(--paper);
  padding: 26px 22px;
}
/* Team photo. Spans every column of the grid so it reads as part of the
   same bordered block, shown at its full frame at every width. */
.trust__photo {
  grid-column: 1 / -1;
  background: var(--slot);
}
.trust__photo img {
  width: 100%;
  height: auto;        /* full frame, never cropped */
}

.trust__item svg { color: var(--lime-dark); margin-bottom: 12px; }
.trust__item h3 { font-size: var(--step-0); margin-bottom: 5px; }
.trust__item p { color: var(--muted); font-size: var(--step--1); }

/* Two up on mobile, which halves the height of the section. */
@media (max-width: 900px) {
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust__item { padding: 20px 13px; }
  .trust__item svg { width: 22px; height: 22px; margin-bottom: 9px; }
  .trust__item h3 { font-size: var(--step--1); line-height: 1.3; }
  .trust__item p { font-size: 12px; line-height: 1.45; }
}


/* ---------------------------------------------------------
   16. Case study / before and after
   --------------------------------------------------------- */
.compare {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  max-width: 860px;
  margin: 0 auto;
  background: var(--slot-dark);
  touch-action: pan-y;
  user-select: none;
}
.compare__pane {
  position: absolute;
  inset: 0;
}
.compare__pane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.compare__pane.is-empty img { display: none; }
.compare__pane--after {
  clip-path: inset(0 0 0 var(--pos, 50%));
}
.compare__tag {
  position: absolute;
  bottom: 14px;
  z-index: 3;
  background: rgba(11, 11, 11, 0.78);
  color: var(--paper);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  pointer-events: none;
}
.compare__tag--before { left: 14px; }
.compare__tag--after { right: 14px; }

.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 3px;
  margin-left: -1.5px;
  background: var(--lime);
  z-index: 4;
  cursor: ew-resize;
  border: 0;
  padding: 0;
}
.compare__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.compare__handle svg {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 20px;
  height: 12px;
  max-width: none; /* the handle itself is only 3px wide */
  transform: translate(-50%, -50%);
  color: var(--ink);
  pointer-events: none;
}

.case__notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap);
  max-width: 860px;
  margin: var(--gap-lg) auto 0;
}
.case__note h3 {
  color: var(--lime);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  margin-bottom: 7px;
}
.case__note p { color: var(--muted-dark); font-size: var(--step-0); }


/* ---------------------------------------------------------
   17. Risk reversal
   --------------------------------------------------------- */
.reversal { text-align: center; }
.reversal h2 { color: var(--lime); }
.reversal p { color: rgba(255, 255, 255, 0.86); max-width: 58ch; margin-inline: auto; }
.reversal__promise {
  display: inline-block;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-pill);
  padding: 9px 20px;
  margin: var(--gap) 0 var(--gap-lg);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--paper);
}


/* ---------------------------------------------------------
   18. FAQ
   --------------------------------------------------------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  background: none;
  border: 0;
  padding: 22px 4px;
  font: inherit;
  font-size: var(--step-1);
  font-weight: 600;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.faq__q:hover { color: var(--lime-dark); }
.faq__icon {
  flex: none;
  transition: transform 0.2s ease;
  color: var(--muted);
}
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(90deg); }

.faq__a {
  display: none;
  padding: 0 4px 24px;
  max-width: 68ch;
  color: var(--muted);
  font-size: var(--step-0);
}
.faq__q[aria-expanded="true"] + .faq__a { display: block; }


/* ---------------------------------------------------------
   19. Bottom CTA
   --------------------------------------------------------- */
.final { text-align: center; }
.final h2 { max-width: 18ch; margin-inline: auto; }
.final p {
  color: var(--muted-dark);
  font-size: var(--step-1);
  max-width: 52ch;
  margin: 0 auto var(--gap-lg);
}


/* ---------------------------------------------------------
   20. Footer
   --------------------------------------------------------- */
.footer {
  background: var(--ink);
  color: var(--muted-dark);
  padding-block: clamp(40px, 5vw, 64px) 0;
  font-size: var(--step--1);
  border-top: 1px solid var(--ink-line);
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap-lg);
  padding-bottom: var(--gap-lg);
}
.footer h3 {
  color: var(--paper);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.footer a { color: var(--muted-dark); }
.footer a:hover { color: var(--lime); }

.footer .social a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.footer .social a:hover { text-decoration: underline; }
.footer .social svg { flex: none; }
.footer li { margin-bottom: 7px; }
/* Both logo files are black artwork, so they are inverted to read on the
   near-black footer. Swap in white versions and drop the filter if you have
   them. */
.brand--footer { display: flex; }
.brand--footer .brand__icon,
.brand--footer .brand__wordmark { filter: invert(1); }
.brand--footer .brand__icon { width: 36px; height: 36px; }
.brand--footer .brand__wordmark { width: 252px; }
.brand--footer .brand__sub { color: var(--muted-dark); }

.footer__bar {
  border-top: 1px solid var(--ink-line);
  padding-block: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm) var(--gap);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}
.footer__links { display: flex; flex-wrap: wrap; gap: var(--gap); }

.placeholder {
  color: var(--lime);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}


/* ---------------------------------------------------------
   20b. Mobile: centre everything
   The audience skews older, so on small screens the page runs
   as a single centred column rather than a left-aligned one.
   Form labels and inputs stay left aligned, because typed text
   is left aligned and centred labels are harder to scan.
   --------------------------------------------------------- */
@media (max-width: 900px) {
  .hero__copy,
  .hero h1,
  .hero__sub,
  .hero__areas { text-align: center; }
  .hero__sub,
  .hero__areas { margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .owner { flex-direction: column; text-align: center; }

  .quote-card__head { text-align: center; }

  .btn-row { justify-content: center; }

  .review { text-align: center; }
  .review__text { margin-inline: auto; }

  .service__body { text-align: center; }

  .areas__grid > div { text-align: center; }
  .suburbs { text-align: center; }

  .pc-check { text-align: center; }
  .pc-check__label { text-align: center; }
  .pc-check__row { justify-content: center; }

  .trust__item { text-align: center; }
  .trust__item svg { margin-inline: auto; }

  .case__note { text-align: center; }

  /* Centre the question text and pin the chevron to the right, so the
     text stays on the optical centre line. */
  .faq__q {
    position: relative;
    justify-content: center;
    text-align: center;
    padding-inline: 34px;
  }
  .faq__icon {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
  }
  .faq__q[aria-expanded="true"] .faq__icon {
    transform: translateY(-50%) rotate(90deg);
  }
  .faq__a { text-align: center; margin-inline: auto; }

  .footer__grid { text-align: center; }
  .footer .brand--footer { justify-content: center; }
  .footer__bar { justify-content: center; text-align: center; }
  .footer__links { justify-content: center; }
}

/* The three proof points under the hero buttons stay side by side on
   mobile. Type and padding tighten so all three fit on one line at 320px. */
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stat {
    display: block;
    text-align: center;
    padding: 14px 6px;
  }
  .stat__icon { width: 22px; height: 22px; margin: 0 auto 7px; }
  .stat__value { font-size: var(--step--1); line-height: 1.25; }
  .stat__label {
    font-size: 8.5px;
    letter-spacing: 0.05em;
    line-height: 1.3;
    margin-top: 4px;
  }
}

/* ---- Footer: icon only socials on mobile, tighter grid ---- */
@media (max-width: 900px) {
  .footer__grid { gap: var(--gap); }
  .footer .social {
    display: flex;
    justify-content: center;
    gap: 12px;
  }
  .footer .social li { margin-bottom: 0; }
  .footer .social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    gap: 0;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-pill);
    text-decoration: none;
  }
  .footer .social a:hover {
    border-color: var(--lime);
    text-decoration: none;
  }
  .social__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}


/* ---------------------------------------------------------
   21. Sticky mobile bar
   --------------------------------------------------------- */
.stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(11, 11, 11, 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--ink-line);
  transform: translateY(110%);
  transition: transform 0.24s ease;
}
.stickybar.is-visible { transform: translateY(0); }
.stickybar .btn { flex: 1; padding: 14px 10px; font-size: var(--step--1); }
.stickybar .btn--primary { flex: 1.15; }

@media (max-width: 860px) {
  .stickybar { display: flex; }
  body { padding-bottom: 76px; }
}


/* ---------------------------------------------------------
   22. Privacy page
   --------------------------------------------------------- */
.doc { max-width: 720px; }
.doc h1 { font-size: var(--step-4); margin-bottom: var(--gap-xs); }
.doc__meta { color: var(--muted); margin-bottom: var(--gap-lg); }
.doc h2 {
  font-size: var(--step-2);
  margin-top: var(--gap-xl);
  margin-bottom: var(--gap-sm);
}
.doc h2:first-of-type { margin-top: var(--gap-lg); }
.doc p, .doc li { color: #33332F; }
.doc ul {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: var(--gap-sm);
}
.doc li { margin-bottom: 7px; }


/* ---------------------------------------------------------
   23. Motion and accessibility
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__track { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .ticker, .stickybar, .header__call { display: none; }
}