/* ==========================================================================
   Water Filtration Sydney: Sydney
   Shared stylesheet. Mobile-first, plain CSS, no frameworks.
   1. Tokens        5. Header / nav
   2. Base          6. Sections & components
   3. Utilities     7. Forms
   4. Buttons       8. Footer
   ========================================================================== */

/* 1. TOKENS ============================================================== */
:root {
  /* Brand palette taken from the Water Filtration Sydney logo and site */
  --navy: #123c68;
  --navy-deep: #0c2c4d;
  --brand: #1571c4;
  --brand-dark: #10609f;
  --brand-light: #3b93de;
  --brand-pale: #eaf4fb;

  --ink: #3d4b58;
  --muted: #667a8c;
  --line: #e0ecf5;

  --bg: #ffffff;
  --bg-soft: #eaf4fb;
  --bg-footer: #dcedfa;

  --ok: #1e8f5e;

  --radius-lg: 18px;
  --radius: 14px;
  --radius-sm: 9px;
  --pill: 999px;

  --shadow-sm: 0 4px 14px rgba(16, 60, 107, .07);
  --shadow: 0 12px 34px rgba(16, 60, 107, .10);
  --shadow-lg: 0 22px 55px rgba(16, 60, 107, .16);

  --container: 1180px;
  --gutter: 1.25rem;
  --section-y: clamp(3.25rem, 7vw, 6rem);

  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
}

/* 2. BASE ================================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

/* Type scale.
   Everything in this sheet is rem-based off the root, so the whole system,
   type, spacing and rhythm together, scales from this one place rather than
   from forty individual font-size declarations.

   Percentages, not pixels: 106.25% is 17px against a default 16px browser
   setting, but it still multiplies a larger setting for anyone who has raised
   their default. A px value here would silently override that preference.

   The audience is homeowners, skewing 35 to 65, often reading on a phone in a
   kitchen. 16px body copy is the floor, not the target. */
html {
  font-size: 106.25%;          /* 17px */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (min-width: 1400px) {
  html { font-size: 112.5%; }  /* 18px on large desktop */
}

section[id], div[id] { scroll-margin-top: 5.5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.68;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  color: var(--navy);
  line-height: 1.18;
  letter-spacing: -.02em;
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.05rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--navy); }

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

ul, ol { margin: 0 0 1.1em; padding-left: 1.15rem; }
li { margin-bottom: .4em; }

strong { color: var(--navy); font-weight: 700; }

/* Visible focus for every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* 3. UTILITIES =========================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; overflow: hidden; overflow: clip; }
.section--soft { background: var(--bg-soft); }
.section--tight { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }

.section-head { max-width: 720px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.section-head p { color: var(--muted); font-size: 1.03rem; }

.eyebrow {
  display: block;
  margin-bottom: .55rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
}

.grid { display: grid; gap: clamp(1.1rem, 2.4vw, 1.75rem); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }

@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.center { text-align: center; }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.cta-row--center { justify-content: center; }

.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: 1rem; top: -100px; z-index: 200;
  background: var(--navy); color: #fff; padding: .7rem 1.1rem;
  border-radius: var(--radius-sm); text-decoration: none;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* 4. BUTTONS ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .8rem 1.7rem;
  border: 2px solid transparent;
  border-radius: var(--pill);
  font: inherit;
  font-weight: 700;
  font-size: .97rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn--primary { background: var(--brand); color: #fff; box-shadow: 0 8px 20px rgba(21, 113, 196, .28); }
.btn--primary:hover { background: var(--brand-dark); color: #fff; }

.btn--outline { background: #fff; color: var(--brand-dark); border-color: #cfe3f4; }
.btn--outline:hover { background: var(--brand-pale); color: var(--navy); border-color: var(--brand-light); }

.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .75); }
.btn--ghost:hover { background: #fff; color: var(--brand-dark); }

.btn--white { background: #fff; color: var(--brand-dark); }
.btn--white:hover { background: var(--brand-pale); color: var(--navy); }

.btn--block { width: 100%; }

.btn .icon { width: 18px; height: 18px; flex: none; fill: currentColor; }

/* 5. HEADER / NAV ======================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-block: .7rem;
  background: transparent;
}
.site-header::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.site-header.is-stuck::before { opacity: 1; }

.header-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .55rem .65rem .55rem 1.1rem;
  background: #fff;
  border-radius: var(--pill);
  box-shadow: var(--shadow);
  position: relative;
}

.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.brand img { width: 168px; height: auto; }

.primary-nav { margin-left: auto; }
.primary-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 1.5vw, 1.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-nav li { margin: 0; }
.primary-nav a {
  color: var(--navy);
  font-weight: 600;
  font-size: clamp(.86rem, .95vw, .93rem);
  white-space: nowrap;
  text-decoration: none;
  padding: .4rem 0;
  border-bottom: 2px solid transparent;
}
.primary-nav a:hover { color: var(--brand); border-bottom-color: var(--brand); }
.primary-nav a[aria-current="page"] { color: var(--brand); border-bottom-color: var(--brand); }

.header-cta { flex: none; }
.header-cta .btn { min-height: 44px; padding-inline: 1.3rem; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-left: auto;
  padding: 0;
  background: var(--brand-pale);
  border: 0;
  border-radius: var(--pill);
  color: var(--navy);
  cursor: pointer;
}
.nav-toggle .icon { width: 22px; height: 22px; fill: currentColor; }
.nav-toggle .icon--close,
.nav-toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; }

/* Mobile drawer */
@media (max-width: 1119px) {
  .brand img { width: 142px; }
  .primary-nav {
    display: none;
    position: absolute;
    top: calc(100% + .6rem);
    left: 0; right: 0;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: .9rem 1.1rem 1.2rem;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav li + li { border-top: 1px solid var(--line); }
  .primary-nav a { display: block; padding: .85rem .2rem; border-bottom: 0; }
  .primary-nav .nav-cta { margin-top: .9rem; border-top: 0; }
  .primary-nav .nav-cta .btn { width: 100%; }
}
/* The pill phone button stays in the bar on tablets; only phones lose it,
   where the sticky mobile call bar takes over. */
@media (max-width: 979px) {
  .header-cta { display: none; }
}
@media (min-width: 1120px) {
  .nav-toggle { display: none; }
  .primary-nav .nav-cta { display: none; }
}

/* 6. SECTIONS & COMPONENTS =============================================== */

/* --- Hero --- */
.hero {
  position: relative;
  margin-top: 0;
  padding-top: 7.5rem;
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  background: #0c2c4d; /* fallback: keeps white copy readable if the photo fails */
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: saturate(1.18) contrast(1.06);
  z-index: 0;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* Dark scrim behind the copy. Holds the photograph's detail instead of
     bleaching it, and carries white text. Lightest weight that clears AA on
     the real glyph pixels: measured, not guessed. */
  background: linear-gradient(96deg,
    rgba(8, 28, 48, 0.28) 0%,
    rgba(8, 28, 48, 0.64) 30%,
    rgba(8, 28, 48, 0.72) 60%,
    rgba(8, 28, 48, 0.64) 85%,
    rgba(8, 28, 48, 0.44) 100%);
}

.hero > .container { position: relative; z-index: 2; max-width: 1340px; }

.hero__inner {
  display: grid;
  gap: clamp(1.5rem, 4vw, 1.75rem);
  align-items: center;
}
@media (min-width: 900px) {
  /* Copy and form stack on the left; the right of the frame stays open so the
     subject and the glass are never behind a card. */
  .hero__inner {
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 1.5rem clamp(2rem, 4vw, 3.25rem);
    align-items: start;
  }
  /* Every item placed explicitly: auto-placement would push rows around. */
  .hero__form { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .hero__text { grid-column: 2; grid-row: 1; max-width: 34rem; }
  .hero-proof { grid-column: 2; grid-row: 2; justify-self: start; max-width: 24rem; margin-top: 0; }
}
@media (max-width: 899px) {
  /* A tall, narrow hero crops a standing portrait into a giant face, so below
     900px the photo becomes a banner above the copy instead of a backdrop. */
  .hero {
    padding-top: 5.2rem;
    background: linear-gradient(180deg, #f4fafe 0%, #e9f4fb 100%);
  }
  .hero__bg {
    position: relative;
    width: 100%; height: auto;
    aspect-ratio: 16 / 10;
    object-position: 50% 12%;
    border-radius: var(--radius-lg);
    margin-bottom: clamp(1.25rem, 4vw, 1.75rem);
  }
  .hero::after { display: none; }
}

.hero h1 { margin-bottom: .5rem; font-size: clamp(1.85rem, 3vw, 2.4rem); }
.hero__text > p:not(.hero-badge) { color: #33475c; font-size: 1.02rem; }

/* Above 900px the copy sits on the dark scrim, so it flips to light. Declared
   after the base colours: an earlier media block loses on source order. */
@media (min-width: 900px) {
  .hero h1 { color: #fff; }
  .hero__text > p:not(.hero-badge) { color: #edf3f8; }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.1rem;
  padding: .5rem 1.05rem;
  background: #fff;
  border-radius: var(--pill);
  box-shadow: var(--shadow-sm);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--brand-dark);
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }

.hero .cta-row { margin-top: 1.6rem; }

/* --- Recent installations --- */
.recent-installs { background: #fff; }
.recent-installs .section-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.recent-installs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.85rem, 2vw, 1.25rem);
}
.recent-install {
  position: relative;
  min-width: 0;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--brand-pale);
  box-shadow: var(--shadow-sm);
}
.recent-install img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.recent-install:hover img { transform: scale(1.025); }
.recent-install__chip {
  position: absolute;
  left: .85rem;
  bottom: .85rem;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem .55rem;
  max-width: calc(100% - 1.7rem);
  padding: .55rem .8rem;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: var(--pill);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(8, 28, 48, .18);
  color: var(--navy);
  font-size: .78rem;
  line-height: 1.3;
}
.recent-install__chip strong { color: var(--brand-dark); }
.recent-install__chip span::before { content: "\2022"; margin-right: .55rem; color: var(--brand); }

@media (max-width: 619px) {
  .recent-install--baulkham-hills img { object-position: 50% 20%; }
  .recent-install--rose-bay img { object-position: 50% 35%; }
  .recent-install--cronulla img { object-position: 50% 30%; }
  .recent-install--parramatta img { object-position: 50% 45%; }
}
@media (min-width: 620px) {
  .recent-installs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recent-install { aspect-ratio: 3 / 4; }
  .recent-install--featured {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 8;
  }
}
@media (min-width: 980px) {
  .recent-installs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .recent-install--featured { aspect-ratio: 16 / 6.5; }
}



/* --- Wave divider --- */
.wave { display: block; width: 100%; height: auto; }
.wave--top { margin-bottom: -1px; }

/* --- Offer band --- */
.offer {
  /* Horizontal so the wave above can match it stop for stop. */
  background: linear-gradient(90deg, #0e4c8a 0%, #1568b4 52%, #1e8ed6 100%);
  color: #fff;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.offer__inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) { .offer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.offer__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.offer__body { text-align: center; }
.offer h2 { color: #fff; }
.offer p { color: rgba(255, 255, 255, .9); max-width: 46ch; margin-inline: auto; }

.price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 1.35rem 0 1.5rem;
}
.price-was { font-size: 1.15rem; color: rgba(255, 255, 255, .72); text-decoration: line-through; }
.price-now { font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 700; color: #fff; letter-spacing: -.02em; }
.price-note { font-size: 1.05rem; color: rgba(255, 255, 255, .92); }

/* --- Cards --- */
.card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--muted); font-size: .97rem; }
.card .btn { margin-top: auto; align-self: center; }
.card--flat:hover { transform: none; box-shadow: var(--shadow-sm); }


.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: 1rem;
  border-radius: var(--radius);
  background: var(--brand-pale);
}
.card__icon .icon { width: 26px; height: 26px; fill: var(--brand); }
.card--center { text-align: center; align-items: center; }
.card--center .card__icon { margin-inline: auto; }

/* --- Tick lists --- */
.tick-list { list-style: none; margin: 0 0 1.35rem; padding: 0; display: grid; gap: .55rem; }
.tick-list li {
  position: relative;
  margin: 0;
  padding-left: 1.75rem;
  font-size: .95rem;
  color: var(--ink);
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .35em;
  width: 1.05rem; height: 1.05rem;
  background: var(--brand);
  border-radius: 50%;
  /* white tick drawn with a mask-free inline SVG background */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
  background-size: 74%;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- Split feature rows --- */
.split { display: grid; gap: clamp(1.75rem, 4vw, 3.25rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.split + .split { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.split__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--brand-pale); }
.split__media img { width: 100%; }

/* --- Numbered process --- */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li {
  counter-increment: step;
  margin: 0;
  padding: 1.5rem 1.25rem 1.35rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-bottom: .85rem;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.02rem;
}
.steps h3 { font-size: 1.06rem; margin-bottom: .35rem; }
.steps p { font-size: .95rem; color: var(--muted); margin: 0; }

/* --- Comparison table --- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: #fff; }
table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: .96rem; }
caption { padding: 1rem 1.15rem; text-align: left; color: var(--muted); font-size: .9rem; }
th, td { padding: .95rem 1.15rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--brand-pale); color: var(--navy); font-weight: 700; white-space: nowrap; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: 600; color: var(--navy); }


/* --- Logo strips --- */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 3.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.logo-strip li { margin: 0; }
.logo-strip img { height: 54px; width: auto; opacity: .85; }

/* --- FAQ (native details, no JS) --- */
.faq { display: grid; gap: .75rem; max-width: 860px; margin-inline: auto; }
.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  font-weight: 700;
  color: var(--navy);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 13px; height: 13px;
  border-right: 2.5px solid var(--brand);
  border-bottom: 2.5px solid var(--brand);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq .faq__body { padding: 0 1.25rem 1.15rem; }
.faq .faq__body p { font-size: .96rem; color: var(--muted); }

/* --- CTA band --- */
.cta-band { background: var(--brand-pale); text-align: center; }
.cta-band .container { max-width: 760px; }
.cta-band p { color: var(--muted); }

.cta-band--dark {
  background: linear-gradient(105deg, #0e4c8a 0%, #1568b4 52%, #1e8ed6 100%);
  color: #fff;
}
.cta-band--dark h2 { color: #fff; }
.cta-band--dark p { color: rgba(255, 255, 255, .9); }


/* --- Decorative page-side blobs (matches reference softness) --- */
.blob {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(59, 147, 222, .16), rgba(59, 147, 222, 0) 70%);
  pointer-events: none;
}
.blob--right { width: 460px; height: 460px; right: -180px; top: 12%; }
.blob--left { width: 380px; height: 380px; left: -170px; bottom: 6%; }
@media (max-width: 899px) { .blob { display: none; } }

/* 7. FORMS =============================================================== */
.form-grid { display: grid; gap: 1rem; }
@media (min-width: 620px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field--full { grid-column: 1 / -1; }

.field label { font-weight: 600; font-size: .92rem; color: var(--navy); }
.field .hint { font-size: .82rem; color: var(--muted); font-weight: 400; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid #cfdfec;
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 128px; resize: vertical; }
.field select { appearance: none; padding-right: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23123c68' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; background-size: 15px; }

.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(21, 113, 196, .16); outline: none; }

.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid { border-color: #c0392b; }

.field .error { display: none; font-size: .84rem; font-weight: 600; color: #b0301f; }
.field.has-error .error { display: block; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #c0392b; }

.form-note { margin-top: 1rem; font-size: .86rem; color: var(--muted); }

.form-status {
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: .94rem;
  font-weight: 600;
}
.form-status[hidden] { display: none; }
.form-status--ok { background: #e7f6ee; color: #146643; border: 1px solid #b7e3cd; }
.form-status--error { background: #fdecea; color: #96271a; border: 1px solid #f3c4bd; }

/* 8. FOOTER ============================================================== */
.site-footer { background: var(--bg-footer); padding-block: clamp(2.5rem, 5vw, 3.75rem) 1.75rem; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1.2fr; } }

.site-footer h2 { font-size: 1.05rem; margin-bottom: .9rem; }
.site-footer img.footer-logo { width: 190px; margin-bottom: 1rem; }
.site-footer p { font-size: .95rem; color: #4c5f70; }

.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-list li { margin: 0; }
.footer-list a { display: inline-flex; align-items: center; gap: .55rem; color: var(--navy); font-size: .95rem; text-decoration: none; }
.footer-list a:hover { color: var(--brand); text-decoration: underline; }
.footer-list .icon { width: 16px; height: 16px; flex: none; fill: var(--brand); }

.footer-bottom {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(18, 60, 104, .13);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  justify-content: space-between;
  font-size: .84rem;
  color: #55697a;
}
.footer-bottom a { color: #55697a; }

/* Sticky mobile call/quote bar */
.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  gap: .6rem;
  padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(16, 60, 107, .08);
}
.mobile-bar .btn { flex: 1; min-height: 50px; padding-inline: .75rem; font-size: .93rem; }
@media (min-width: 980px) { .mobile-bar { display: none; } }
@media (max-width: 979px) { body { padding-bottom: 4.6rem; } }

/* 9. LANDING-PAGE CONVERSION BLOCKS ====================================== */

/* Lead form sitting in the hero (above the fold for ad traffic) */
.hero__form { padding: clamp(1.25rem, 2.5vw, 1.6rem); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.hero__form h2 { font-size: 1.15rem; margin-bottom: .2rem; }
.hero__form .form-lede { margin-bottom: 1rem; font-size: .88rem; color: var(--muted); }
.hero__form .form-grid { gap: .75rem; }
.hero__form .field input,
.hero__form .field select { min-height: 44px; }

/* Proof bar directly under the hero */
.proof-bar { background: #fff; border-block: 1px solid var(--line); padding-block: 1.6rem; }

/* Suburb chips: replaces long service-area card lists */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.chips li { margin: 0; }
.chips span { display: inline-block; padding: .45rem .95rem; background: #fff; border: 1px solid var(--line); border-radius: var(--pill); font-size: .85rem; font-weight: 600; color: var(--navy); }

/* Self-select "what do you want to change" cards */
.pick { text-align: left; }
.pick .card__icon { margin-bottom: .8rem; }
.pick h3 { margin-bottom: .35rem; }
.pick .tick-list { margin-bottom: 0; }
.pick .tick-list li { font-size: .9rem; }

/* 10. MARKETING BLOCKS ==================================================== */
/* All reuse the existing tokens: no new colours, fonts or radii. */

/* Problem / pain recognition */
.pain .card__icon { background: #fdeeea; }
.pain .card__icon .icon { fill: #c0562f; }

/* Offer scope: what's in / what's not */
.scope { display: grid; gap: 1.25rem 2.5rem; margin: 1.5rem 0 0; text-align: left; }
@media (min-width: 620px) { .scope { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.scope h3 { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: .6rem; }
.scope ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.scope li { position: relative; margin: 0; padding-left: 1.6rem; font-size: .9rem; color: rgba(255, 255, 255, .92); }
.scope li::before { position: absolute; left: 0; top: -.05em; font-weight: 700; }
.scope .in li::before { content: "\2713"; color: #8fd4ff; }
.scope .out li::before { content: "\2013"; color: rgba(255, 255, 255, .55); }

/* Risk reversal strip */
.reversal {
  display: flex; align-items: flex-start; gap: .85rem;
  max-width: 680px; margin: 1.75rem auto 0;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius);
  text-align: left;
}
.reversal .icon { width: 22px; height: 22px; flex: none; fill: #fff; margin-top: .15rem; }
.reversal p { font-size: .93rem; color: rgba(255, 255, 255, .95); }

/* Completed-work gallery */
.gallery { display: grid; gap: 1rem; }
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.gallery figcaption { margin-top: .6rem; font-size: .88rem; color: var(--muted); }

/* Testimonial cards: fill with real, attributed reviews only */
.quote {
  display: flex; flex-direction: column; gap: .9rem;
  padding: clamp(1.35rem, 2.5vw, 1.75rem);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.quote__rating { width: auto; height: 36px; align-self: flex-start; }
.quote blockquote { margin: 0; font-size: 1rem; color: var(--ink); }
.quote blockquote::before { content: "\201C"; display: block; font-size: 2.4rem; line-height: .6; color: var(--brand-light); margin-bottom: .35rem; }
.quote cite { margin-top: auto; font-style: normal; font-size: .88rem; font-weight: 700; color: var(--navy); }
.quote cite span { display: block; font-weight: 400; color: var(--muted); }

/* Micro-reassurance under a CTA */
.microcopy { margin-top: .85rem; font-size: .85rem; color: var(--muted); }
.cta-band--dark .microcopy { color: rgba(255, 255, 255, .8); }

/* 11. HERO PROOF CARD ==================================================== */
/* One job: social proof. Rating, review, link. Nothing else. */
.hero-proof {
  margin-top: 1.5rem;
  padding: 1.15rem 1.3rem 1.2rem;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  max-width: 30rem;
}
.hero-proof__rating { height: 48px; width: auto; }
.hero-proof blockquote {
  margin: .95rem 0 0;
  font-size: .96rem;
  line-height: 1.55;
  color: var(--ink);
}
.hero-proof cite {
  display: block; margin-top: .5rem;
  font-style: normal; font-size: .86rem; font-weight: 700; color: var(--navy);
}
.hero-proof cite span { font-weight: 400; color: var(--muted); }
.hero-proof .more { display: inline-flex; align-items: center; min-height: 24px; margin-top: .6rem; font-size: .86rem; font-weight: 600; }
@media (max-width: 899px) { .hero-proof { max-width: none; } }

/* Credential bar under the hero: logos at a size you can actually read */
.proof-logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1rem 1.5rem; list-style: none; margin: 0; padding: 0;
}
.proof-logos li {
  display: flex; align-items: center; justify-content: center;
  margin: 0;
  padding: .7rem 1.1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.proof-logos img { height: 78px; width: auto; }
.proof-logos li.sq img { height: 87px; }   /* square 1:1 badges read small at 78px */

.proof-chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem 1.6rem; list-style: none;
  margin: 1.4rem 0 0; padding: 1.1rem 0 0;
  border-top: 1px solid var(--line);
}
.proof-chips li {
  display: flex; align-items: center; gap: .45rem; margin: 0;
  font-size: .82rem; font-weight: 600; color: var(--navy);
}
.proof-chips .icon { width: 16px; height: 16px; flex: none; fill: var(--brand); }

@media (max-width: 719px) {
  .proof-logos { gap: .75rem; }
  .proof-logos li { padding: .55rem .8rem; }
  .proof-logos img,
  .proof-logos li:nth-child(3) img { height: 60px; }
}

/* Footer secondary navigation: the informational row and the legal row.
   Both sit between the compliance band and the copyright bar, so they share
   one separator and one rhythm rather than each carrying its own margin. */
.footer-nav {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(18, 60, 104, .13);
}
.footer-list--inline {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  line-height: 1.4;
}
.footer-list--inline li { margin: 0; }
.footer-list--inline a { display: inline; }

/* The legal row is secondary to the row above it. */
.footer-legal { margin-top: 1rem; }
.footer-legal a { font-size: .89rem; color: var(--muted); }
.footer-legal a:hover { color: var(--brand); }

/* Footer compliance band: licence, entity and insurance details. */
.footer-compliance {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(18, 60, 104, .13);
}
.footer-compliance h2 { margin-bottom: 1.1rem; }
.compliance-grid {
  display: grid;
  gap: 1.15rem 2rem;
  margin: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .compliance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .compliance-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.compliance-grid dt {
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b7c8c;
  margin-bottom: .3rem;
  line-height: 1.35;
}
.compliance-grid dd { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--navy); }
.compliance-grid a { color: var(--brand); text-decoration: none; }
.compliance-grid a:hover { text-decoration: underline; }

/* Long-form text pages (legal, FAQs, support). The 1180px container is far
   too wide to read a paragraph across, so these get a prose measure.

   The cap is on the children, not the wrapper. Capping the wrapper also traps
   tables and data grids at 74ch, which is what broke the transparency page: a
   grid asking for four columns had about 630px to do it in. Text stays at a
   readable measure; tables and fact grids opt out and use the full container. */
/* Two false starts are worth recording here.

   .prose sits on the same element as .container. Setting `max-width: none` on
   it cancelled the container's 1180px cap and auto margins, because both are
   single-class selectors and .prose comes later, so the page collapsed to the
   left edge of the viewport.

   Capping each child at 74ch and centring it went ragged instead: ch is
   relative to the element's own font-size, so 74ch on the h1 is far wider than
   74ch on a paragraph, and centring boxes of different widths staggers their
   left edges.

   The fix is a three-column grid. Text sits in a centred column of a single
   fixed width whatever its font-size, and tables and fact grids span the lot.
   .prose sets no max-width, so the container's still applies. */
.prose {
  display: grid;
  grid-template-columns: 1fr min(74ch, 100%) 1fr;
}
.prose > * { grid-column: 2; min-width: 0; }
.prose > .table-wrap,
.prose > .facts-grid { grid-column: 1 / -1; }
.prose h1 { margin-bottom: 1.25rem; }
.prose h2 { margin-top: 2.5rem; margin-bottom: .85rem; font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.prose h3 { margin-top: 1.75rem; margin-bottom: .5rem; font-size: 1.12rem; }
.prose p { margin-bottom: 1rem; line-height: 1.7; }
.prose ul, .prose ol { margin: 0 0 1.25rem; padding-left: 1.35rem; }
.prose li { margin-bottom: .5rem; line-height: 1.65; }
.prose li::marker { color: var(--brand); }
.prose a { color: var(--brand); }
.prose > p:first-of-type { font-size: 1.05rem; color: var(--muted); }

/* --- Compliance / trust bar -------------------------------------------------
   Sits between the fixed header and the page content on every page. It owns the
   clearance for the fixed header, which the first .section on inner pages did
   not reliably provide: section padding bottoms out at 3.25rem on small
   viewports, which is less than the header is tall, so headings were sliding
   under it. */
/* The fixed header is a pill: .site-header padding-block .7rem, .header-bar
   padding .55rem, and a ~42px tall row inside it. That comes to roughly 5.2rem,
   so the clearance is expressed as a token rather than a guessed magic number.
   Change the header padding or the logo size and this is the one value to
   revisit. */
.trust-bar {
  --header-h: 5.2rem;
  padding-top: calc(var(--header-h) + .95rem + env(safe-area-inset-top, 0px));
  padding-bottom: 1rem;
  background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%);
  border-bottom: 1px solid var(--line);
}
.trust-bar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem 1.6rem;
}
.trust-bar__list li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--muted);
  white-space: nowrap;
}
.trust-bar__list strong { color: var(--navy); font-weight: 600; }
.trust-bar__list .icon { width: 15px; height: 15px; flex: none; fill: var(--ok); }
.trust-bar__list a {
  margin-left: .4rem;
  color: var(--brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.trust-bar__list a:hover { color: var(--navy); }

/* Mobile: show fewer signals rather than scrolling them.
   The sideways-scrolling version cut the second item mid-word with no
   affordance that anything followed, so four of the five claims were invisible
   to the majority of visitors. A trust strip that has to be swiped is not a
   trust strip. Below the desktop nav breakpoint the weakest items are dropped
   instead, so what remains is fully readable without interaction. Nothing is
   lost: every claim here also appears in the footer compliance band on every
   page, and WaterMark and the labour warranty are in the homepage proof bar. */
@media (max-width: 899px) {
  /* Smaller logo (142px) and no inline nav, so the pill is shorter. */
  .trust-bar { --header-h: 4.75rem; padding-bottom: .85rem; }
  .trust-bar__list { justify-content: center; gap: .35rem 1.15rem; }
  .trust-bar__list li { font-size: .79rem; }
  /* Drop WaterMark and the labour warranty; keep licence, insurance, police. */
  .trust-bar__list li:nth-child(n+4) { display: none; }
}

/* Narrow phones: the licence alone, which is the only claim a visitor can
   actually verify. "NSW Licensed Water Filter Plumber No. 358626C  Verify" is
   about 320px of text, which will not sit on one line beside anything else on a
   360px screen, and the items are nowrap, so a second item would be clipped
   rather than wrapped. Wrapping is allowed here so the label breaks cleanly over
   two lines instead. The insurance figure stays in the footer compliance band. */
@media (max-width: 559px) {
  .trust-bar__list li:nth-child(n+2) { display: none; }
  .trust-bar__list li {
    font-size: .78rem;
    white-space: normal;
    text-align: center;
  }
  .trust-bar__list a { margin-left: .35rem; white-space: nowrap; }
}

/* The bar now provides the fixed-header clearance the hero used to carry. */
.hero { padding-top: clamp(1.75rem, 3.5vw, 2.75rem); }
@media (max-width: 899px) { .hero { padding-top: clamp(1.25rem, 3vw, 2rem); } }


/* --- In-page fact grid --------------------------------------------------
   The transparency page previously borrowed .compliance-grid from the footer.
   That coupled a content page to footer chrome, and the footer's four-column
   breakpoint made no sense inside a prose column. This is the page-level
   version: hairline-separated cells on white, three across at most so values
   like a full service-area sentence have room to sit on one or two lines. */
.facts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 1.5rem 0 2rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 560px) { .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .facts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Inset shadow rather than gap-over-background, so a row that does not fill
   every column leaves white space instead of a stray coloured cell. */
.facts-grid > div {
  background: #fff;
  padding: .95rem 1.15rem;
  box-shadow: inset -1px -1px 0 var(--line);
}
.facts-grid dt {
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b7c8c;
  margin-bottom: .35rem;
  line-height: 1.35;
}
.facts-grid dd { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--navy); font-weight: 600; }
.facts-grid a { color: var(--brand); font-weight: 600; }

/* Tables on prose pages: full container width, and the caption reads as a note
   under the heading rather than as part of the grid. */
.prose .table-wrap { margin: 1.25rem 0 1rem; }
.prose .table-wrap caption { caption-side: top; }

/* Links inside the dark CTA band inherit var(--brand-dark), which is close to
   unreadable on the blue gradient. Scoped to paragraphs so .btn--white, whose
   text is deliberately dark on white, is untouched. */
.cta-band--dark p a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cta-band--dark p a:hover { color: rgba(255, 255, 255, .82); }

/* --- Information entity layer -------------------------------------------
   Minimal brutalism on purpose: this block is a machine-readable business
   record, so it is deliberately set apart from the soft rounded blue system
   used everywhere else. Square corners, hard 2px rules, high contrast ink on
   white. Markup is kept flat, so .entity-grid carries the container width
   itself rather than nesting another wrapper inside the section. */
.entity {
  --entity-ink: #101820;
  --entity-rule: #101820;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  padding-inline: var(--gutter);
  background: #fff;
  border-top: 2px solid var(--entity-rule);
  border-bottom: 2px solid var(--entity-rule);
  color: var(--entity-ink);
}
.entity-grid {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .entity-grid { grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; }
}
.entity .eyebrow { color: var(--entity-ink); letter-spacing: .18em; }
.entity h2 {
  margin: 0 0 1.1rem;
  color: var(--entity-ink);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -.02em;
}
.entity p { margin: 0 0 .9rem; font-size: .95rem; line-height: 1.65; color: #26313c; max-width: 70ch; }
.entity p:last-child { margin-bottom: 0; }
.entity strong, .entity b { color: var(--entity-ink); }
.entity a { color: var(--entity-ink); text-decoration: underline; text-underline-offset: 2px; }
.entity a:hover { color: var(--brand); }

.factbox { border: 2px solid var(--entity-rule); padding: 1.1rem 1.2rem; align-self: start; }
.factbox > strong {
  display: block;
  margin-bottom: .9rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--entity-rule);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.factbox p {
  margin: 0 0 .7rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid #d7dde3;
  font-size: .9rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.factbox p:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.factbox b {
  display: block;
  margin-bottom: .15rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5a6875;
}

/* --- Logo marquee ---------------------------------------------------------
   Progressive enhancement over .proof-logos. With no JS the row stays exactly
   as it was: centred, wrapped, static. main.js adds .is-scrolling only once it
   has cloned the badges and measured the shift distance, so a half-built
   marquee never renders. */
.marquee { position: relative; }
.marquee.is-scrolling {
  overflow: hidden;
  /* Mask rather than gradient overlays, so it works on any section background. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5rem, #000 calc(100% - 3.5rem), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3.5rem, #000 calc(100% - 3.5rem), transparent);
}
.marquee.is-scrolling .proof-logos {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration, 40s) linear infinite;
  will-change: transform;
}
/* Readable on demand: stop for a pointer, and for anyone tabbing through. */
.marquee.is-scrolling:hover .proof-logos,
.marquee.is-scrolling:focus-within .proof-logos { animation-play-state: paused; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-shift, 50%))); }
}

/* No motion: never animate. The row scrolls by hand instead, so nothing is
   unreachable on a narrow screen. */
@media (prefers-reduced-motion: reduce) {
  .marquee.is-scrolling { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee.is-scrolling .proof-logos { animation: none; }
}

/* Certification marks under the installation quality section. Taller than the
   accreditation badges because AS 3498 is a narrow portrait mark whose standard
   numbers are unreadable at 78px. */
.proof-logos--cert img { height: 92px; }