/* ==========================================================================
   House Removalists Melbourne — PPC landing pages
   Brand tokens extracted from the client's live site CSS.
   Static CSS only. No frameworks.
   ========================================================================== */

/* ---------- Self-hosted brand fonts (no external requests) ---------- */
@font-face {
  font-family: 'Bebas Neue';
  src: url('/assets/fonts/BebasNeue-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2192, U+2212;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2192, U+2212;
}

/* ---------- Tokens ---------- */
:root {
  --blue: #1652a8;
  --blue-dark: #0d3a7d;
  --blue-deep: #0a2a5e;
  --blue-light: #eef4fc;
  --blue-accent: #a8c5ec;
  --navy: #0d1320;
  --navy-800: #1c2434;
  /* Brand coral, for marks and non-text accents only */
  --coral: #ff6b5b;
  --coral-dark: #cf4433;
  /* White text on #ff6b5b is only 2.8:1 — it can never carry label text.
     Text-bearing Call surfaces use this darker coral: white on it = 4.96:1. */
  --coral-cta: #c8402f;
  --coral-cta-dark: #a5301f;
  --yellow: #ffc83d;
  --white: #fff;
  --g50: #f8f9fb;
  --g100: #f1f3f7;
  --g200: #e3e7ee;
  --g300: #cdd4e0;
  --g500: #6b7688;
  --g600: #4a5468;
  --g700: #3c4658;
  --g800: #1c2434;
  --g900: #0d1320;

  --radius: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(13, 58, 125, .10);
  --shadow: 0 4px 24px rgba(13, 58, 125, .10);
  --shadow-lg: 0 18px 50px rgba(10, 25, 55, .18);

  --display: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---------- Type scale (Inter) ----------
     Six steps, and only six. This page had accumulated ELEVEN sizes between
     12.5px and 17.5px — half-pixel steps a reader cannot perceive but which
     guarantee that two related elements end up subtly mismatched.

       --fs-lead   18   section intros, final-CTA paragraph
       --fs-body   17   default body, FAQ, checklists, large buttons
       --fs-form   16   FORM CONTROLS AND BUTTONS ONLY — see the warning below
       --fs-meta   15   secondary text, table cells, captions, footer, nav
       --fs-label  13   field labels, eyebrows, fine print
       --fs-micro  11   tiny uppercase tags

     ⚠️ --fs-form must never drop below 16px. iOS Safari zooms the viewport when
     a focused input is under 16px, which on a phone throws the visitor out of
     the layout mid-form. This is a functional constraint, not a style choice.

     Headings use the display face and their own clamps, but every h2 shares the
     same 32px minimum — only the maximum varies, and only where the column
     width genuinely differs. */
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-form: 16px;
  --fs-meta: 14px;
  --fs-label: 13px;
  --fs-micro: 11px;

  --container: 1180px;
  --header-h: 76px;
  --gutter: 20px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--g800);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }
/* balance keeps headings from dropping a one-word last line; pretty stops
   paragraphs orphaning a word. Both degrade to normal wrapping if unsupported. */
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.14; color: var(--g900); text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
/* Measure: long lines are the single biggest readability cost on desktop. */
.section-head p, .split-body p, .card p, .step p, .faq .faq-body p { max-width: 68ch; }
ul { margin: 0 0 1em; padding-left: 1.15em; }
strong { font-weight: 700; }

/* Sticky header offset for every anchor target */
[id] { scroll-margin-top: calc(var(--header-h) + 18px); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* Bebas is a condensed all-caps face: it needs looser tracking and a little
   more leading than a lowercase face, or multi-line headings become a wall. */
.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.02;
}

/* Section rhythm */
.section { padding: 76px 0; }
.section--tint { background: var(--blue-light); }
.section--g50 { background: var(--g50); }
.section--dark { background: var(--navy); color: #e8edf6; }
.section--dark h2, .section--dark h3 { color: #fff; }

.section-head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.eyebrow, .section-head .eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--blue); margin-bottom: 12px;
}
/* Eyebrow inside a split body (was six repeated inline styles) */
.eyebrow--inline { display: block; }
.section--dark .eyebrow, .section--dark .section-head .eyebrow { color: var(--blue-accent); }
.section-head h2 { font-size: clamp(30px, 4vw, 42px); }
.section-head h2.display { font-size: clamp(30px, 4.2vw, 44px); }
.section-head p { font-size: var(--fs-lead); color: var(--g600); margin: 0 auto; }
.section--dark .section-head p { color: #c3cee2; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--body); font-size: 16px; font-weight: 700; line-height: 1;
  padding: 15px 26px; border: 0; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn:active { transform: translateY(1px); }
/* Blue = the "get a quote" action, everywhere */
.btn--primary { background: var(--blue); color: #fff; box-shadow: 0 2px 10px rgba(22, 82, 168, .28); }
.btn--primary:hover { background: var(--blue-dark); }
/* Coral = the Call action, only */
.btn--call { background: var(--coral-cta); color: #fff; box-shadow: 0 2px 10px rgba(200, 64, 47, .34); }
.btn--call:hover { background: var(--coral-cta-dark); }
.btn--lg { font-size: var(--fs-body); padding: 18px 34px; }
.btn--block { width: 100%; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--g200);
}
.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: 18px;
}
.brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.brand svg { width: 132px; height: auto; }

.nav { display: none; margin-left: auto; gap: 22px; }
.nav a {
  font-size: var(--fs-meta); font-weight: 600; color: var(--g700); text-decoration: none;
  white-space: nowrap; padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--blue); border-bottom-color: var(--blue); }

.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav + .header-actions { margin-left: 22px; }

/* Header phone — must read as "call us now", never as faint grey text.
   Coral pill on white = 4.6:1. */
.header-phone {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--coral-cta); color: #fff;
  font-size: 16px; font-weight: 700; letter-spacing: .2px;
  padding: 12px 18px; border-radius: var(--radius); text-decoration: none;
  white-space: nowrap; box-shadow: 0 2px 10px rgba(200, 64, 47, .32);
}
.header-phone:hover { background: var(--coral-cta-dark); }
.header-phone svg { width: 17px; height: 17px; flex: 0 0 auto; }
.header-phone .hp-label { display: none; }

/* Header quote CTA — hidden while the hero form is on screen (it would be a no-op),
   revealed by JS once the form scrolls out of view. Kept out of the tab order until then. */
.header-cta {
  display: none;
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}
.header-cta.is-visible { opacity: 1; visibility: visible; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; background: var(--navy); overflow: hidden; }

/* --- Phone / tablet: the photo sits BEHIND the hero copy, not above it. ---
   It used to be a 16:9 band stacked on top, which cost 219px — 26% of a
   390x844 screen — before a single word of the offer, and pushed the first
   form control to 867px, well below the fold. As a backdrop it costs nothing:
   the copy has to occupy that space anyway.

   Not full-bleed on mobile: covering the whole ~1500px stacked hero from a
   900x506 source is a ~3x upscale (the blur this was originally fixed for).
   Capped at 340px it renders 587x340 from that source — downscaled, sharp —
   and the gradient resolves to solid navy so a shorter or longer DKI headline
   can't expose a hard edge. */
.hero-media {
  position: absolute; top: 0; left: 0; right: 0; height: 340px;
  line-height: 0; z-index: 0;
}
.hero-bg {
  width: 100%; height: 100%; aspect-ratio: auto;
  object-fit: cover; object-position: 50% 42%;
}
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  /* Light at the top so the photo still reads, decisively dark by the time it
     reaches the headline. White on the H1 band measures >12:1. */
  background: linear-gradient(180deg,
    rgba(9, 18, 38, .50) 0%,
    rgba(9, 18, 38, .70) 30%,
    rgba(9, 18, 38, .90) 60%,
    var(--navy) 88%);
}
.hero::after { content: ''; display: none; }

.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr; gap: 22px;
  /* Keep .container's horizontal gutter — a `padding: x 0 y` shorthand here
     silently zeroes it and the copy ends up flush against the screen edge. */
  padding: 22px var(--gutter) 44px;
}
/* Phones: headline → FORM → supporting proof. Stacked, the three bullets and
   the call line sat between the headline and the form and pushed the first
   field ~240px further down the screen — on paid traffic that is pure cost. */
.hero-copy { order: 1; color: #fff; max-width: 620px; }
.quote-card { order: 2; }
.hero-aside { order: 3; color: #fff; max-width: 620px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  /* Dark tint, not white: over a photo a white scrim lightens exactly the area
     the text needs dark. This was measured at 3.13:1 before the change. */
  background: rgba(9, 18, 38, .80); border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 7px 14px; border-radius: 100px; margin-bottom: 14px;
}
/* The badge wrapped to two lines at 390px, costing 59px of the first screen
   for one line of proof. Drop a word rather than shrink the type. */
@media (max-width: 559px) { .hero-eyebrow .he-trim { display: none; } }
.hero h1 {
  color: #fff; font-size: clamp(34px, 6.8vw, 58px);
  margin-bottom: 12px; text-shadow: 0 2px 20px rgba(0, 0, 0, .45);
}
.hero h1 .accent { color: var(--coral); }
.hero-sub {
  font-size: clamp(17px, 2.1vw, 18px); color: #dbe4f2;
  margin-bottom: 0; max-width: 560px;
}
.hero-points { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 11px; }
.hero-points li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 16px; font-weight: 600; color: #fff;
}
.hero-points svg { width: 21px; height: 21px; flex: 0 0 auto; margin-top: 1px; color: var(--coral); }
.hero-points strong { color: #fff; }

/* Desktop callers need to READ the number — tel: alone is useless on a desktop.
   Own tokens, because light-background tokens drop to ~2.5:1 on a dark hero. */
.hero-call { display: none; font-size: 16px; color: #cdd9ec; margin: 0; }
.hero-call a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--coral); }
.hero-call a:hover { color: var(--coral); }

/* ==========================================================================
   QUOTE FORM
   ========================================================================== */
.quote-card {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; width: 100%;
}
.quote-head { background: linear-gradient(135deg, var(--blue-dark), var(--blue)); color: #fff; padding: 20px 24px 18px; }
.quote-head h2 { color: #fff; font-size: 22px; margin: 0 0 5px; }
.quote-head p { margin: 0; font-size: var(--fs-meta); color: #d5e2f6; }
.quote-body { padding: 22px 24px 24px; }

/* ---- Stepper -------------------------------------------------------------
   A named three-stop stepper rather than a bar + "Step 1 of 2": naming the
   steps tells the visitor what is still coming, which is what stops the
   "how long is this going to be?" abandon. */
.progress {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  list-style: none; padding: 0; margin: 0 0 18px;
}
.pstep { position: relative; display: flex; align-items: center; gap: 7px; padding-top: 12px; min-width: 0; }
.pstep::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--g200); border-radius: 100px; transition: background-color .3s ease;
}
.pstep.is-current::before, .pstep.is-done::before { background: var(--blue); }
.pdot {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800; line-height: 1;
  background: var(--g200); color: var(--g600);
  transition: background-color .3s ease, color .3s ease;
}
.pstep.is-current .pdot { background: var(--blue); color: #fff; }
.pstep.is-done .pdot { background: var(--blue-light); color: var(--blue-dark); }
/* Swap the numeral for a tick once a step is behind you */
.pstep.is-done .pdot { font-size: 0; }
.pstep.is-done .pdot::after { content: '✓'; font-size: 11px; }
/* Never let a step name wrap: a two-line label makes the stepper look broken
   and pushes the first question further down the phone screen. */
.pname { font-size: var(--fs-label); font-weight: 700; color: var(--g500); line-height: 1.2; white-space: nowrap; }
@media (max-width: 479px) { .pname { font-size: 11px; letter-spacing: -.1px; } .pstep { gap: 5px; } }
.pstep.is-current .pname { color: var(--g900); }
.pstep.is-done .pname { color: var(--g600); }

/* Answers carried forward, so later steps read as progress */
.form-recap {
  display: flex; align-items: center; gap: 8px;
  background: var(--blue-light); border-radius: var(--radius);
  padding: 9px 12px; margin: 0 0 16px;
  font-size: 13px; font-weight: 700; color: var(--blue-dark);
}
.form-recap[hidden] { display: none; }
.form-recap::before {
  content: '✓'; font-size: 11px; color: #fff; background: var(--blue);
  width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
}

/* flex-start, not center: if the legend ever wraps, a vertically-centred Back
   pill floats in the middle of it and the row looks broken. */
.step-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.step-head .step-legend { padding-top: 4px; }
.step-legend { font-size: 16px; font-weight: 700; color: var(--g900); margin: 0 0 14px; display: block; }
.step-head .step-legend { margin: 0; }

/* Back belongs BEFORE the primary action, not after it — a back control sitting
   under the submit button competes with the thing you want them to press. */
.btn-back {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--g100); border: 0; border-radius: 100px; padding: 7px 13px 7px 9px;
  cursor: pointer; flex: 0 0 auto;
  font-family: var(--body); font-size: 13px; font-weight: 700; color: var(--g600);
  transition: background-color .14s, color .14s;
}
.btn-back svg { width: 15px; height: 15px; }
.btn-back:hover { background: var(--g200); color: var(--g900); }
.btn-back:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Big self-select tiles — the commitment-builder first step.
   The visually-hidden radio stays focusable; the label is the tap target. */
.tiles-fieldset { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tile { position: relative; }
.tile input {
  position: absolute; width: 1px; height: 1px; margin: 0;
  opacity: 0; pointer-events: none;
}
.tile label {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 92px; padding: 13px 8px; text-align: center; cursor: pointer;
  border: 2px solid var(--g200); border-radius: var(--radius); background: #fff;
  font-size: var(--fs-form); font-weight: 700; color: var(--g800); line-height: 1.25;
  transition: border-color .14s, background-color .14s, box-shadow .14s, transform .14s;
}
.tile label svg { width: 24px; height: 24px; color: var(--g500); margin-bottom: 3px; transition: color .14s; }
.tile label small { display: block; font-size: 13px; font-weight: 500; color: var(--g500); }
.tile label:hover { border-color: var(--blue-accent); background: var(--blue-light); }
.tile label:hover svg { color: var(--blue); }
.tile label:active { transform: scale(.98); }
.tile input:focus-visible + label { outline: 3px solid var(--blue); outline-offset: 2px; }
.tile input:checked + label {
  border-color: var(--blue); background: var(--blue-light);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.tile input:checked + label svg { color: var(--blue); }
.tile input:checked + label small { color: var(--blue-dark); }

.field { margin-bottom: 15px; }
.field label { display: block; font-size: var(--fs-meta); font-weight: 700; color: var(--g800); margin-bottom: 6px; }
.field label .opt { font-weight: 500; color: var(--g500); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--body); font-size: 16px; color: var(--g900);
  padding: 13px 14px; border: 1.5px solid var(--g300); border-radius: var(--radius);
  background: #fff; transition: border-color .14s, box-shadow .14s;
}
.field input::placeholder, .field textarea::placeholder { color: #8d97a8; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(22, 82, 168, .16);
}
.field textarea { min-height: 78px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-hint { font-size: 13px; color: var(--g500); margin: 6px 0 0; }

/* Inline validation. A native bubble alone is easy to miss on a phone, and a
   Continue button that silently does nothing is a hard abandon. */
.field input.is-invalid, .field textarea.is-invalid { border-color: var(--coral-dark); }
.field-error { font-size: 13px; font-weight: 600; color: var(--coral-dark); margin: 6px 0 0; }

.form-microcopy { font-size: 13px; color: var(--g500); text-align: center; margin: 10px 0 0; }

.form-step[hidden] { display: none; }
/* A short slide-in so an advance reads as forward motion, not a flicker */
.form-step.is-entering { animation: stepIn .26s ease both; }
@keyframes stepIn { from { opacity: 0; transform: translateX(9px); } to { opacity: 1; transform: none; } }

/* Trust cue inside the form — lifts completion at the point of action.
   Real faces beat another line of reassurance copy here: the visitor's actual
   question is "who is going to ring me?" */
.form-trust {
  display: flex; align-items: center; gap: 11px;
  background: var(--g50); border: 1px solid var(--g200); border-radius: var(--radius);
  padding: 11px 13px; margin-bottom: 16px; font-size: 13px; font-weight: 500; color: var(--g600);
  line-height: 1.5;
}
.form-trust strong { color: var(--g900); font-weight: 700; }
.form-trust .stars { color: #c88a00; letter-spacing: 1px; font-size: var(--fs-meta); }
.faces { display: flex; flex: 0 0 auto; }
.faces img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(10, 25, 55, .22); background: var(--g200);
}
.faces img + img { margin-left: -11px; }
.form-reassure { font-size: 13px; color: var(--g600); margin: 12px 0 0; line-height: 1.55; }
.form-reassure a { color: var(--g700); }
.hp { position: absolute; left: -9999px; }

/* ==========================================================================
   TRUST BAR
   ========================================================================== */
.trustbar { background: var(--navy-800); color: #fff; padding: 22px 0; }
.trustbar-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 16px;
  text-align: center;
}
.trust-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
/* 5 items in 2 columns leaves the last one orphaned in the left cell */
@media (max-width: 559px) { .trustbar-grid .trust-item:last-child { grid-column: 1 / -1; } }
.trust-item .tnum { font-family: var(--display); font-size: 30px; line-height: 1; color: #fff; letter-spacing: .5px; }
.trust-item .tnum .stars { color: var(--yellow); font-size: 19px; }
.trust-item .tlabel { font-size: 13px; font-weight: 600; color: #b3c1d6; letter-spacing: .3px; }

/* ==========================================================================
   GENERIC CARD GRIDS
   ========================================================================== */
.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }

.card {
  background: #fff; border: 1px solid var(--g200); border-radius: var(--radius-lg);
  padding: 26px 24px; box-shadow: var(--shadow-sm);
}
.card h3 { font-size: 18px; margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }
.card-icon {
  width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center;
  background: var(--blue-light); color: var(--blue); margin-bottom: 15px;
}
.card-icon svg { width: 24px; height: 24px; }
/* The two photo cards in #services came from sources with different aspect
   ratios (1.45 vs 1.77), so their images rendered 241px and 197px tall and the
   headings beneath them sat 45px apart. Pin one ratio for both. */
.card > img { aspect-ratio: 16 / 10; object-fit: cover; }

/* Problem → answer pairs.
   The risk lines used to sit in quotation marks with no attribution, on a page
   where real reviews ARE quoted with names — a reader could not tell a
   rhetorical device from a testimonial. Now explicitly tagged. */
.fear { border-left: 4px solid var(--coral); }
/* --coral-dark is only 4.1:1 on white — not enough for 15px label text */
.fear .fear-q { font-size: var(--fs-meta); font-weight: 700; color: var(--coral-cta); margin-bottom: 8px; display: block; }
.fear-tag {
  display: block; margin-bottom: 5px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--g500);
}
.fear h3 { font-size: 18px; }

/* ==========================================================================
   PRICING
   ========================================================================== */
.price-note {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border: 1px solid var(--g200); border-left: 4px solid var(--blue);
  border-radius: var(--radius); padding: 16px 18px; margin: 0 0 28px;
  font-size: var(--fs-meta); color: var(--g600);
}
.price-note svg { width: 22px; height: 22px; color: var(--blue); flex: 0 0 auto; margin-top: 2px; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); background: #fff; }
table.price {
  width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--fs-meta); background: #fff;
}
table.price caption { text-align: left; padding: 0 0 12px; font-size: var(--fs-meta); color: var(--g600); }
table.price th, table.price td { padding: 15px 16px; text-align: left; border-bottom: 1px solid var(--g200); }
table.price thead th {
  background: var(--navy-800); color: #fff; font-size: 13px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; border-bottom: 0;
}
table.price tbody tr:last-child td { border-bottom: 0; }
table.price tbody tr:nth-child(even) { background: var(--g50); }
table.price .truck { font-weight: 700; color: var(--g900); }
table.price .from { font-family: var(--display); font-size: 25px; color: var(--blue); white-space: nowrap; letter-spacing: .5px; }

/* ---- Phones: no horizontal scroll --------------------------------------
   A 620px-wide table inside an overflow container meant a phone saw a
   truncated table with no swipe affordance, AND the <caption> was clipped
   because it inherited the table's min-width. Each row becomes its own card
   with the column heading carried in a data-label, so nothing scrolls. */
@media (max-width: 759px) {
  .table-wrap { overflow-x: visible; box-shadow: none; background: none; }
  table.price { min-width: 0; display: block; background: none; }
  /* display:block on the table makes the caption shrink-to-fit, which wrapped
     it one word per line */
  table.price caption { display: block; width: 100%; padding-bottom: 16px; }
  table.price thead { display: none; }
  table.price tbody { display: grid; gap: 14px; }
  table.price tr {
    display: block; background: #fff;
    border: 1px solid var(--g200); border-radius: var(--radius-lg);
    padding: 6px 16px 12px; box-shadow: var(--shadow-sm);
  }
  table.price tbody tr:nth-child(even) { background: #fff; }
  table.price th[scope="row"] {
    display: block; padding: 12px 0 10px; border-bottom: 1px solid var(--g200);
    font-family: var(--display); font-size: 26px; letter-spacing: 1px;
    text-transform: uppercase; color: var(--blue-dark);
  }
  table.price td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
    padding: 9px 0; border-bottom: 1px solid var(--g100); text-align: right;
  }
  table.price tr td:last-child { border-bottom: 0; padding-bottom: 2px; }
  table.price td::before {
    content: attr(data-label);
    flex: 0 0 auto; text-align: left;
    /* the From cell sets the display face; the label must not inherit it */
    font-family: var(--body);
    font-size: 13px; font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase; color: var(--g500);
  }
  table.price .from { font-size: 30px; }
}

/* Replaced the three price cards, which restated the table in a second,
   bedroom-based frame while the table was truck-based — same numbers, two
   mental models, and the largest single block of scroll on the page. */
.price-typical {
  margin: 24px auto 0; max-width: 720px; text-align: center;
  font-size: var(--fs-body); color: var(--g600);
}
.price-typical strong { color: var(--g900); }


.incl-lists { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 30px; }
.incl-box { background: #fff; border: 1px solid var(--g200); border-radius: var(--radius-lg); padding: 24px; }
.incl-box h3 { font-size: 18px; display: flex; align-items: center; gap: 9px; }
.incl-box ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.incl-box li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-body); color: var(--g600); }
.incl-box li svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 3px; }
.incl-add li svg { color: var(--blue); }

/* ==========================================================================
   INLINE CTA BANDS
   Two of these plus a CTA folded into the dark Insurance section close what
   was a 16,211px (19 phone-screen) run with no in-page action between the
   hero form and the footer — the sticky bar was the only path, and a sticky
   bar is passive furniture people stop seeing.
   ========================================================================== */
.ctaband { background: var(--navy); color: #fff; }
.ctaband--light { background: var(--blue-light); color: var(--g900); }
.ctaband-inner {
  display: grid; gap: 22px; align-items: center;
  padding: 40px var(--gutter);
}
.ctaband-lead { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; }
.ctaband-lead em { font-style: normal; color: var(--coral); }
.ctaband--light .ctaband-lead em { color: var(--coral-cta); }
.ctaband-lead span {
  display: block; margin-top: 7px;
  font-size: 16px; font-weight: 400; line-height: 1.55; color: #c3cee2;
}
.ctaband--light .ctaband-lead span { color: var(--g600); }
.ctaband-actions { display: grid; gap: 12px; }
.ctaband-actions .btn { width: 100%; }

/* CTA inside the dark Insurance band */
.split-cta { display: grid; gap: 12px; margin-top: 26px; }
.split-cta .btn { width: 100%; }

/* Call buttons pair a "Call" label with the number in its own element so the
   number stays a clean call-swap target; the default 9px flex gap reads as a
   double space between two words. */
.btn--call { gap: 6px; }

/* Arriving at the form from a mid-page CTA is a long scroll — flash the card
   so it is obvious where you landed. Motion-safe: no animation if reduced. */
@keyframes quoteArrive {
  0%   { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(22, 82, 168, 0); }
  25%  { box-shadow: var(--shadow-lg), 0 0 0 6px rgba(22, 82, 168, .35); }
  100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(22, 82, 168, 0); }
}
.quote-card.is-arrived { animation: quoteArrive 1.4s ease-out 1; }

/* ==========================================================================
   EDITORIAL SPLIT
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.split-media { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.split-media img { width: 100%; height: auto; }
/* Caption sits inside the frame — it names the photo as a real job, which is
   the whole point of having swapped the commissioned stock out. */
.media-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 16px 12px; font-size: 13px; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, rgba(9, 18, 38, 0), rgba(9, 18, 38, .82));
}
.split-body h2 { font-size: clamp(30px, 3.6vw, 38px); }
/* Same minimum as .section-head; smaller maximum only because this one
   sits in a half-width column, not the full centred measure. */
.split-body h2.display { font-size: clamp(30px, 3.8vw, 40px); }
.split-lead { color: #c3cee2; }
.checklist { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-body); }
.checklist svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; color: var(--blue); }
.section--dark .checklist svg { color: var(--coral); }
.section--dark .checklist li { color: #dbe4f2; }
.section--dark .checklist strong { color: #fff; }

/* ==========================================================================
   PROCESS
   ========================================================================== */
.steps { display: grid; grid-template-columns: 1fr; gap: 22px; counter-reset: s; }
.step {
  background: #fff; border: 1px solid var(--g200); border-radius: var(--radius-lg);
  padding: 28px 24px 24px; position: relative; box-shadow: var(--shadow-sm);
}
.step-num {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--blue); color: #fff; display: grid; place-items: center;
  font-family: var(--display); font-size: 25px; line-height: 1; margin-bottom: 14px; letter-spacing: 1px;
}
.step h3 { font-size: 18px; }
.step p { margin: 0; color: var(--g600); font-size: var(--fs-body); }
/* Puts a face on "a real person" — the promise every removalist makes */
.step-who {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 0; padding-top: 15px; border-top: 1px solid var(--g200);
  font-size: 15px; color: var(--g600);
}
.step-who img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(10, 25, 55, .2); background: var(--g200);
}
.step-who strong { color: var(--g900); }

/* ==========================================================================
   BEFORE / AFTER — drag-to-compare slider over the client's real job photo.
   No-JS fallback: .ba-clip has no clip-path until JS sets --ba, so the BEFORE
   frame simply covers the AFTER one and the section still shows a real photo.
   ========================================================================== */
.ba-media { display: block; align-self: center; box-shadow: none; border-radius: 0; overflow: visible; }
.ba {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background: var(--g100);
  /* pan-y keeps vertical page scrolling working over the image on a phone
     while leaving horizontal drags to us */
  touch-action: pan-y;
  cursor: ew-resize; user-select: none; -webkit-user-select: none;
}
.ba-img { display: block; width: 100%; height: auto; pointer-events: none; }
.ba-clip {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--ba, 52%)) 0 0);
}
.ba-clip .ba-img { width: 100%; height: 100%; object-fit: cover; }

.ba-tag {
  position: absolute; top: 14px; z-index: 3;
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 6px 12px; border-radius: 100px; color: #fff;
  background: rgba(13, 19, 32, .78); backdrop-filter: blur(4px);
  pointer-events: none;
}
.ba-tag--before { left: 14px; }
.ba-tag--after { right: 14px; background: var(--coral-cta); }

/* The divider line and grip. Positioned from the same --ba the clip uses, so
   the handle can never drift out of sync with the wipe. */
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--ba, 52%); z-index: 4;
  width: 44px; margin-left: -22px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; cursor: ew-resize;
  color: var(--blue-dark);
}
.ba-handle::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 10px rgba(10, 25, 55, .45);
}
.ba-handle svg {
  position: relative; width: 22px; height: 22px;
  background: #fff; border-radius: 50%; padding: 8px; box-sizing: content-box;
  box-shadow: 0 4px 14px rgba(10, 25, 55, .35);
}
.ba-handle:focus-visible { outline: 0; }
.ba-handle:focus-visible svg { outline: 3px solid var(--blue); outline-offset: 3px; }
.ba.is-dragging { cursor: grabbing; }
.ba.is-dragging .ba-handle { cursor: grabbing; }

.ba-hint {
  margin: 12px 0 0; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--g600);
}

/* ==========================================================================
   TEAM
   ========================================================================== */
/* Real at-work photo above the portraits — evidence first, headshots second */
.crew-band {
  position: relative; margin: 0 0 26px; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow);
}
.crew-band img { width: 100%; height: auto; }
.crew-band figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px 20px 14px; font-size: var(--fs-meta); font-weight: 600; color: #fff;
  background: linear-gradient(180deg, rgba(9, 18, 38, 0), rgba(9, 18, 38, .8));
}
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.team-card { background: #fff; border: 1px solid var(--g200); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.team-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--g100); }
.team-meta { padding: 14px 16px 16px; }
.team-meta .tname { font-size: var(--fs-form); font-weight: 700; color: var(--g900); }
.team-meta .trole { font-size: 13px; font-weight: 600; color: var(--blue); }

/* ==========================================================================
   ON THE JOB — real crew mosaic
   Small tiles on purpose. The sources are ~250–450px photos lifted out of the
   client's branded social posts, so a 180px tile renders at ~2x and stays
   crisp, where a big hero-sized crop would be visibly soft. The density does
   the work: ten real jobs reads as "we do this every day".
   ========================================================================== */
.mosaic {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.mosaic li { margin: 0; }
.mosaic img {
  width: 100%; height: auto; aspect-ratio: 1;
  object-fit: cover; border-radius: var(--radius);
  background: var(--g200); box-shadow: var(--shadow-sm);
}
.mosaic-note {
  display: grid; gap: 10px; justify-items: center; text-align: center;
  margin: 22px auto 0; max-width: 700px; font-size: var(--fs-meta); color: var(--g600);
}

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.rating-head { text-align: center; margin-bottom: 34px; }
.rating-big { font-family: var(--display); font-size: 56px; line-height: 1; color: var(--g900); }
.rating-stars { color: var(--yellow); font-size: 25px; letter-spacing: 3px; }
.rating-meta { font-size: var(--fs-meta); color: var(--g600); margin: 6px 0 0; }
.reviews { display: grid; grid-template-columns: 1fr; gap: 20px; }
.review {
  background: #fff; border: 1px solid var(--g200); border-radius: var(--radius-lg);
  padding: 24px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.review .stars { color: var(--yellow); font-size: 16px; letter-spacing: 2px; margin-bottom: 12px; }
.review blockquote { margin: 0 0 16px; font-size: var(--fs-body); color: var(--g700); line-height: 1.62; }
.review figcaption { margin-top: auto; font-size: var(--fs-meta); display: flex; align-items: center; gap: 11px; }
.review .rmeta { display: grid; }
.review .rname { font-weight: 700; color: var(--g900); }
.review .rsrc { color: var(--g600); }
/* A lettered avatar, deliberately not a photo — we have no reviewer portraits
   and will not invent faces. It still gives the card a human anchor. */
.ravatar {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--blue-light); color: var(--blue-dark);
  font-family: var(--display); font-size: 21px; line-height: 1; letter-spacing: 1px;
}

/* ==========================================================================
   AREAS
   ========================================================================== */
.suburbs { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin: 0; padding: 0; list-style: none; }
.suburbs li {
  background: #fff; border: 1px solid var(--g200); border-radius: 100px;
  padding: 8px 15px; font-size: var(--fs-meta); font-weight: 600; color: var(--g700);
}
.areas-note { text-align: center; margin: 24px auto 0; max-width: 640px; color: var(--g600); font-size: var(--fs-meta); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  background: #fff; border: 1px solid var(--g200); border-radius: var(--radius);
  margin-bottom: 12px; box-shadow: var(--shadow-sm);
}
.faq details[open] { border-color: var(--blue-accent); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 52px 18px 20px; position: relative;
  font-size: var(--fs-body); font-weight: 700; color: var(--g900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; border-radius: var(--radius); }
.faq summary::after {
  content: ''; position: absolute; right: 20px; top: 50%; width: 11px; height: 11px;
  border-right: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq .faq-body { padding: 0 20px 20px; color: var(--g700); font-size: var(--fs-body); }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   FINAL CTA (photo-backed)
   ========================================================================== */
.finalcta { position: relative; background: var(--navy); overflow: hidden; }
.finalcta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.finalcta::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9, 18, 38, .82), rgba(9, 18, 38, .9));
}
.finalcta-inner { position: relative; z-index: 2; padding: 78px var(--gutter) 80px; text-align: center; color: #fff; }
.finalcta h2 { color: #fff; font-size: clamp(30px, 4.2vw, 44px); margin-bottom: 20px; }
/* Scoped away from .finalcta-note: `.finalcta p` (0,1,1) was beating the note's
   own class rule (0,1,0), so the note inherited an 18px size, a 620px cap and a
   28px BOTTOM margin — which is why it sat flush against the buttons and broke
   mid-phrase across two lines. */
.finalcta p { color: #d3ddee; font-size: var(--fs-lead); max-width: 620px; margin: 0 auto 32px; }
.finalcta-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.finalcta-actions .btn { width: 100%; max-width: 340px; }
/* "Call" and the number are separate elements so the number stays a clean
   call-swap target — but the button's 9px flex gap reads as a double space
   between two words. Tighten it to a normal word space. */
.finalcta-actions .btn--call { gap: 5px; }
/* Three separate facts, marked up as three items, so they wrap item-by-item
   instead of orphaning "excess ·" onto its own line. */
.finalcta-note {
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px 20px; margin: 30px auto 0; max-width: 860px;
  font-size: var(--fs-meta); color: #c3cfe2;
}
.finalcta-note li { position: relative; }
.finalcta-note li + li::before {
  content: ''; position: absolute; left: -11px; top: 50%;
  width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #6e7f9c;
}

/* Footer fine print and the thank-you page notes were inline font-size
   overrides in the markup (14px / 14.5px / 15px) — invisible to the scale
   and the first things to drift. */
.footer-fineprint { margin-top: 18px; font-size: var(--fs-label); color: #9aa8c0; }
.ty-hours { margin: 16px 0 0; font-size: var(--fs-meta); color: var(--g600); }
.ty-note { margin-top: 28px; font-size: var(--fs-meta); color: var(--g600); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--navy); color: #a9b6cc; padding: 54px 0 0; font-size: var(--fs-meta); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 30px; padding-bottom: 34px; }
.footer .brand svg { width: 128px; }
.footer h3 { color: #fff; font-size: var(--fs-meta); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 14px; }
.footer p { margin: 0 0 10px; line-height: 1.6; }
.footer a { color: #cfd9ea; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
/* A link sitting inside a run of text must be distinguishable by more than
   colour alone, so underline those (standalone nav-style links are exempt). */
.footer p a, .footer-bottom a, .legal p a, .legal li a { text-decoration: underline; }
.footer-contact { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 11px; color: var(--blue-accent); }
.footer-legal-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
/* Footer links were 19–25px tall — well under a comfortable thumb target.
   Padding rather than font size, so the type scale is untouched. */
.footer-contact a, .footer-contact span, .footer-legal-links a {
  display: inline-block; padding: 8px 0; line-height: 1.5;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12); padding: 20px 0 30px;
  display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-meta); color: #9aa8c0;
}
.footer-bottom p { margin: 0; }

/* ==========================================================================
   STICKY MOBILE BAR
   One persistent surface per action: Call (coral) + Get Quote (blue).
   ========================================================================== */
.mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(180%) blur(8px);
  border-top: 1px solid var(--g200);
  box-shadow: 0 -4px 20px rgba(10, 25, 55, .12);
}
.mobilebar .btn { font-size: var(--fs-meta); padding: 14px 6px; gap: 7px; }
body { padding-bottom: 74px; }

/* ==========================================================================
   DRAFT VERIFICATION LABEL — preview only, must be gone before production.
   Dark enough to clear 4.5:1 (a thin pale flag costs real Lighthouse points).
   ========================================================================== */

/* ==========================================================================
   SCROLL REVEAL — no-JS safe: only hidden once <html class="js"> is set.
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal.is-in { transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   LEGAL / CONTENT PAGES
   ========================================================================== */
.legal { padding: 54px 0 70px; }
.legal-inner { max-width: 780px; margin: 0 auto; }
.legal h1 { font-size: clamp(30px, 5vw, 44px); margin-bottom: 6px; }
.legal .updated { color: var(--g500); font-size: var(--fs-meta); margin-bottom: 32px; }
.legal h2 { font-size: 22px; margin-top: 34px; }
.legal h3 { font-size: 18px; margin-top: 24px; }
.legal ul { margin-bottom: 1em; }
.legal li { margin-bottom: .45em; }

/* ==========================================================================
   THANK YOU
   ========================================================================== */
.ty { padding: 60px 0 76px; }
.ty-inner { max-width: 680px; margin: 0 auto; text-align: center; }
.ty-tick {
  width: 78px; height: 78px; border-radius: 50%; margin: 0 auto 24px;
  background: #e7f7ee; color: #157f4b; display: grid; place-items: center;
}
.ty-tick svg { width: 40px; height: 40px; }
.ty h1 { font-size: clamp(32px, 5.6vw, 50px); }
.ty-lead { font-size: 18px; color: var(--g600); margin-bottom: 30px; }
.ty-next { text-align: left; background: var(--blue-light); border-radius: var(--radius-lg); padding: 26px 24px; margin-bottom: 28px; }
.ty-next h2 { font-size: 22px; margin-bottom: 14px; }
.ty-next ol { margin: 0; padding-left: 1.2em; }
.ty-next li { margin-bottom: 10px; color: var(--g600); }
.ty-next li strong { color: var(--g900); }
.ty-call { background: #fff; border: 1px solid var(--g200); border-radius: var(--radius-lg); padding: 24px; }
.ty-call p { margin-bottom: 14px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 560px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .trustbar-grid { grid-template-columns: repeat(3, 1fr); }
  .mosaic { grid-template-columns: repeat(3, 1fr); }
  .finalcta-actions { flex-direction: row; justify-content: center; }
  .finalcta-actions .btn { width: auto; }
  .ctaband-actions { grid-auto-flow: column; justify-content: start; }
  .ctaband-actions .btn { width: auto; }
  .split-cta { grid-auto-flow: column; justify-content: start; }
  .split-cta .btn { width: auto; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 800px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .ctaband-inner { grid-template-columns: 1fr auto; gap: 34px; padding: 46px var(--gutter); }
  .ctaband-lead { font-size: 22px; }
  .reviews { grid-template-columns: repeat(3, 1fr); }
  .incl-lists { grid-template-columns: repeat(2, 1fr); }
  .team { grid-template-columns: repeat(4, 1fr); }
  .mosaic { grid-template-columns: repeat(5, 1fr); gap: 12px; }
  /* Stretch the photo to the text column's height. Centre-aligning a short
     photo next to a tall list leaves a dead band of whitespace above and
     below it, which is what makes an editorial split look unfinished. */
  .split { grid-template-columns: 1fr 1fr; gap: 46px; align-items: stretch; }
  /* The compare slider is excluded: it is a fixed-aspect widget with its own
     caption below it, so stretching it would squash both frames and push the
     hint into the column beside the image. */
  .split-media:not(.ba-media) { display: flex; }
  .split-media:not(.ba-media) img { width: 100%; height: 100%; object-fit: cover; }
  /* Keep the removalist, not the curtains, in frame when this one is cropped */
  .split-media img[src*="included"] { object-position: 62% 50%; }
  .split-body { align-self: center; }
  .split--flip .split-media { order: 2; }
  .trustbar-grid { grid-template-columns: repeat(5, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
  .section { padding: 92px 0; }
}

@media (min-width: 1000px) {
  /* Desktop: photo becomes a true full-bleed background behind copy + form,
     with the gradient weighted LEFT where the copy sits — so the lake, palms
     and skyline stay visible on the right behind the form. Never a flat wash. */
  /* `height: auto` is load-bearing: the mobile rule caps .hero-media at 340px,
     and `inset: 0` does NOT reset an explicit height — so without this the
     desktop hero photo silently renders as a 340px strip instead of full-bleed. */
  .hero-media { position: absolute; inset: 0; height: auto; }
  .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-position: 50% 58%; }
  .hero-media::after { display: none; }
  .hero::after {
    display: block; position: absolute; inset: 0;
    background:
      linear-gradient(100deg, rgba(9, 18, 38, .94) 0%, rgba(9, 18, 38, .88) 32%, rgba(9, 18, 38, .58) 58%, rgba(9, 18, 38, .42) 100%),
      linear-gradient(180deg, rgba(9, 18, 38, .45) 0%, rgba(9, 18, 38, 0) 30%);
  }

  /* The form sits beside the copy, so the hero needs no jump-to-form button
     and no bare "Call Now" — the number is shown to be read instead. */
  /* Desktop: copy and proof stack back into one column beside the form, and
     the form spans both rows so it stays vertically centred. */
  .hero-inner {
    grid-template-columns: 1.06fr .94fr;
    grid-template-areas: "copy form" "aside form";
    grid-template-rows: auto 1fr;
    gap: 24px 48px; align-items: start; padding: 62px var(--gutter) 74px;
  }
  .hero-copy { grid-area: copy; align-self: end; }
  .hero-aside { grid-area: aside; }
  .quote-card { grid-area: form; align-self: center; }
  .hero-call { display: block; }
  .nav { display: flex; }
  .header-cta { display: inline-flex; }
  .header-phone .hp-label { display: inline; }
  .mobilebar { display: none; }
  body { padding-bottom: 0; }
}

@media (min-width: 1120px) {
  .hero h1 { font-size: 56px; }
}