/* Auto-glass Repair Wellington — shared stylesheet */

:root {
  --brand: #0f66b8;
  --brand-dark: #0a4d8c;
  --brand-darker: #072f57;
  --brand-light: #e4effa;
  --brand-pale: #f3f8fd;
  --amber: #f2a900;
  --amber-dark: #b87a00;
  --ink: #000000;
  --ink-soft: #000000;
  --border: #d8e2ec;
  --white: #ffffff;
  --font-head: 'Manrope', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --shadow: 0 10px 30px rgba(7, 47, 87, 0.12);
  --radius: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.02em;
  word-spacing: 0.1em;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: #000000;
  line-height: 1.2;
  margin: 0 0 0.6em;
  letter-spacing: 0.008em;
}

h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
p { margin: 0 0 1em; color: var(--ink-soft); }

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 88px 0; }
.section-sm { padding: 56px 0; }
.section-alt { background: var(--brand-pale); }
.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-light);
  padding: 6px 14px;
  border-radius: 0;
  margin-bottom: 16px;
}
.section-head { max-width: 680px; margin: 0 auto 44px; text-align: center; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Full-width running text — ported from the redesign, for sections where the
   copy should span the section rather than being held to a narrow measure */
.prose { max-width: none; }
.prose p { font-size: 1.02rem; }
/* Same size as body copy, still bold via the default h3 weight, so it reads
   as a heading without stepping up in size — ported from the redesign */
.sub-head { font-family: var(--font-body); font-size: 1.02rem; font-weight: 700; letter-spacing: 0.02em; margin: 34px 0 0; text-align: center; }
.terms-list { list-style: disc; padding-left: 1.3em; margin: 0 0 1em; }
.terms-list li { margin-bottom: 8px; color: var(--ink-soft); font-size: 1.02rem; }
.prose u { font-weight: 700; text-decoration: none; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 14px 26px;
  border-radius: 0;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-primary { background: transparent; border-color: #000000; color: #000000; font-size: calc(0.78rem + 2px); }
.btn-primary:hover { background: transparent; border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
button[type="submit"].btn-primary { display: flex; width: auto; min-width: 180px; margin: 44px auto 0; }
.btn-outline-brand { background: transparent; border-color: var(--brand); color: var(--brand); }
.btn-outline-brand:hover { background: var(--brand-light); transform: translateY(-2px); }
.btn-outline-dark { border-color: transparent; color: #000000; }
.btn-outline-dark:hover { background: transparent; border-color: transparent; color: var(--brand); }
.btn-block { width: 100%; justify-content: center; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

/* Header */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px;
  max-width: none;
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.12rem;
  color: #000000;
}
.brand .brand-icon {
  width: 38px; height: 38px;
  border-radius: 0;
  background: var(--brand);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.brand span.sub { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.68rem; color: var(--ink-soft); letter-spacing: 0.03em; }

/* Nav-bar identity, matching the redesign — phone number stands in for the
   logo/wordmark. .brand is left untouched above since the footer still uses it. */
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Barlow Semi Condensed', var(--font-head);
  font-size: clamp(calc(1.23rem + 5px), calc(2.2vw + 5px), calc(1.58rem + 5px));
  font-weight: 800;
  color: var(--brand-darker);
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.header-phone:hover { color: var(--brand); }

.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav ul { display: flex; gap: 26px; }
.main-nav ul { align-items: center; }
.main-nav a {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-head);
  font-size: calc(0.92rem + 2px);
  font-weight: 500;
  color: var(--ink);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.main-nav a.active { color: var(--brand); border-color: var(--brand); }
@media (hover: hover) {
  .main-nav a:hover { color: var(--brand); border-color: var(--brand); }
}

.has-dropdown { position: relative; }
.has-dropdown > a { display: flex; align-items: center; gap: 6px; }
.has-dropdown > a i { font-size: 0.7rem; transition: transform 0.15s; }
.dropdown-menu {
  position: absolute;
  top: 100%; left: -14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: var(--shadow);
  min-width: 230px;
  width: max-content;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:has(:focus-visible) .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
@media (hover: hover) {
  .has-dropdown:hover > a i { transform: rotate(180deg); }
}
/* Stack the dropdown items vertically — .main-nav ul (above) is a horizontal
   flex row and would otherwise also catch this nested list */
.main-nav .dropdown-menu { flex-direction: column; align-items: stretch; gap: 2px; }
.dropdown-all { display: none; }
.dropdown-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 0;
  border-bottom: none;
  font-size: calc(0.9rem + 1px);
  white-space: nowrap;
}
.dropdown-menu a:hover { background: var(--brand-light); border-color: transparent; }

/* .header-cta / .call-btn removed with the nav-bar redesign — .header-phone above replaces both */

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border: 2px solid #000000;
  background: transparent;
  border-radius: 0;
  color: #000000;
  font-size: 1.1rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
/* Menu icon drawn with 2px lines so it matches the 2px button border;
   it turns into an X while the menu is open */
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 20px; height: 2px; background: currentColor;
  transition: transform 0.2s ease, background 0.2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }
/* Menu button styled like the Call button: black outline, blue on hover */
@media (hover: hover) {
  .nav-toggle:hover { border-color: var(--brand); color: var(--brand); }
}

/* Mobile nav */
@media (max-width: 900px) {
  .dropdown-all { display: block; }
  .footer-bottom .disclosure { text-align: left; max-width: none; }
  .main-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    padding: 18px 24px 24px;
    gap: 18px;
    box-shadow: var(--shadow);
    transform: translateY(-140%);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  }
  .main-nav.open { transform: translateY(0); opacity: 1; }
  .main-nav ul { flex-direction: column; gap: 14px; align-items: stretch; text-align: left; }
  .nav-toggle { display: flex; align-items: center; justify-content: center; }
  .main-nav .dropdown-menu {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; padding: 6px 0 0 14px;
    margin-top: 8px; display: none;
  }
  .main-nav .has-dropdown.open .dropdown-menu { display: flex; flex-direction: column; }
  .has-dropdown > a i { margin-left: auto; }
  .has-dropdown.open > a i { transform: rotate(180deg); }
  .has-dropdown:not(.open) > a i { transform: none; }
  .has-dropdown:not(.open) > a.dropdown-toggle { border-color: transparent; }
  .main-nav .dropdown-menu { width: auto; }
  .dropdown-menu a { white-space: normal; }
}

/* Hero (experimental redesign treatment, 2026-09-08 — light/bordered, mounted
   photo, quote-badge form framing, ported from the team's redesign draft) */
.hero {
  padding: 150px 0 90px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.hero-inner {
  width: 100%;
  display: grid;
  grid-template-columns: 2.05fr 1fr;
  gap: 40px;
  align-items: start;
}
.hero-copy { text-align: center; }
.hero-copy h1 { font-weight: 700; letter-spacing: 0; font-size: clamp(1.38rem, 5vw, 2.48rem); padding: 0 0 26px; }
/* Line the quote form up with the hero heading text, which sits below its own top padding */
.hero-inner > .hero-form-card { margin-top: 0; }
.hero-copy .cta-row { justify-content: center; }
.hours-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.hours-note i { color: var(--brand); }

/* Call button — greyed out and relabelled outside business hours by main.js */
.btn-primary.btn-closed {
  background: var(--border);
  color: var(--ink-soft);
  cursor: not-allowed;
  box-shadow: none;
}
.btn-primary.btn-closed:hover { background: var(--border); transform: none; box-shadow: none; }

.hero-media {
  margin: 26px 0 0;
  border: 1px solid var(--ink);
  background: var(--white);
  padding: 10px;
  aspect-ratio: 3 / 2;
}
.hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero/quote form card — plain, no box; the quote-badge below does the framing */
.hero-form-card, .form-card {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.hero-form-card h3 { margin-bottom: 4px; }
.form-sub { color: var(--ink-soft); font-size: 0.86rem; margin-bottom: 18px; }
.hero-form-card .form-row { margin-bottom: 12px; }
.hero-form-card .form-row input,
.hero-form-card .form-row select { padding: 11px 13px; }
.hero-form-card .form-note { text-align: center; }
.hero-form-card .form-note a { color: var(--brand); font-weight: 600; }
.form-card .form-note { text-align: center; }

/* Quote badge — replaces the old amber urgency pill + "Get a Free Quote"
   heading on every quote form. Drawn as an SVG outline with real HTML text
   on top so it stays sharp and uses the site font. */
/* Quote badge is now a single image (shield, heading, sub-line and arrow are baked in) */
.quote-badge { max-width: 400px; margin: 0 auto 16px; }
.quote-badge img { display: block; width: 100%; height: auto; }
.req { color: #d32f2f; }

.form-reassure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin-top: 10px;
  margin-bottom: 0;
  text-align: center;
}
.form-reassure i { color: var(--brand); flex-shrink: 0; }
/* Hero isn't full-viewport in this treatment, so the scroll cue has nothing
   below it to point at. */
.scroll-cue { display: none; }

/* Page header (non-home hero, shorter) — same light/bordered treatment as
   the home hero, left-aligned since a centred title reads badly under a
   breadcrumb */
.page-hero {
  padding: 150px 0 64px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.page-hero:not(.confirm-hero) h1 { font-size: clamp(1.375rem, 5vw, 2.475rem); }
/* hero headings: original brand navy (the global heading colour is black), weight 700 */
.hero-copy h1, .page-hero h1 { color: var(--brand-darker); font-weight: 700; }
.page-hero p.lead { max-width: 640px; font-size: 1.05rem; margin-bottom: 0; }
.breadcrumb { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 14px; }
.breadcrumb a { color: var(--brand); font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.page-hero-inner {
  display: grid;
  grid-template-columns: 2.05fr 1fr;
  gap: 40px;
  align-items: start;
}
.page-hero-copy p.lead { max-width: none; }

/* Thank-you / confirmation page */
.confirm-hero { padding-bottom: 90px; }
.confirm-hero .section-head.center { margin-bottom: 64px; }
.confirm-hero h1 { font-size: clamp(calc(2rem - 20px), calc(5vw - 20px), calc(3.1rem - 20px)); margin-bottom: 1.2em; }
.confirm-hero .btn { text-decoration: none; }
.confirm-hero .btn span { text-decoration: underline; text-underline-offset: 3px; }
.confirm-icon {
  width: 64px; height: 64px;
  background: var(--brand-light);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem;
  margin: 0 auto 40px;
}

/* Cards / grid */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.card .icon {
  width: 46px; height: 46px;
  border-radius: 0;
  background: var(--brand-light);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 16px;
}
.card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.card-head .icon { margin-bottom: 0; flex-shrink: 0; }
.card-head h3 { margin-bottom: 0; }

/* Image-to-text service rows — ported from the redesign, alternating figure
   side each row via .reverse */
.service-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 34px;
  align-items: center;
  padding: 34px 0;
  border-top: 1px solid var(--border);
}
.service-row:last-child { border-bottom: 1px solid var(--border); }
.service-row.reverse { grid-template-columns: 1.6fr 1fr; }
.service-row.reverse .service-figure { order: 2; }
/* Homepage service tiles: double the space above each photo and below each button */
.service-row.service-row-spaced { padding-top: 68px; padding-bottom: 68px; }
.service-figure {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--brand-pale);
  border: 1px solid var(--border);
  color: var(--brand);
  font-size: 3.2rem;
  overflow: hidden;
}
.service-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-text h3 { font-size: 1.35rem; }
.service-text .btn { margin-top: 32px; min-width: 180px; justify-content: center; }
.card p:last-child { margin-bottom: 0; }
.card ul { margin-top: 10px; }
.card ul li { display: flex; gap: 10px; margin-bottom: 8px; color: var(--ink-soft); font-size: 0.95rem; }
.card ul li i { color: var(--brand); margin-top: 4px; }

/* Photo between the page title and the text on service pages */
.hero-photo { margin: 6px 0 24px; border: 1px solid var(--border); aspect-ratio: 3 / 2; overflow: hidden; background: var(--brand-pale); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Homepage hero photo: same faint border as the other page photos */
.hero-photo-framed { margin-bottom: 48px; }

/* Pricing block */
.price-box {
  background: var(--brand-darker);
  color: var(--white);
  border-radius: var(--radius);
  padding: 34px;
}
.price-box .amount { font-family: var(--font-head); font-size: 2.4rem; font-weight: 700; }
.price-box .amount span { font-size: 1rem; font-weight: 500; color: rgba(255,255,255,0.7); }
.price-box ul { margin-top: 18px; }
.price-box ul li { display: flex; gap: 10px; margin-bottom: 10px; color: rgba(255,255,255,0.85); font-size: 0.92rem; }
.price-box ul li i { color: var(--amber); margin-top: 3px; }

/* FAQ accordion */
.faq-item {
  border: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--white);
}
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: calc(1rem + 3px);
  color: #000000;
  cursor: pointer;
}
.faq-q i { color: var(--brand); transition: transform 0.2s ease; flex-shrink: 0; }
.faq-item.open .faq-q i { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  padding: 0 22px;
}
.faq-item.open .faq-a { max-height: 400px; padding: 0 22px 20px; }
.faq-a p { margin-bottom: 0; font-size: calc(1rem - 0.5px); }

/* Suburb sections */
.suburb-block {
  border-top: 1px solid var(--border);
  padding: 44px 0 64px;
  display: grid;
  /* fixed title column, just wider than the longest title (Lower Hutt & Wainuiomata),
     so every text column lines up and titles stay on one line */
  grid-template-columns: 310px 1fr;
  gap: 34px;
  align-items: start;
}
.suburb-block { scroll-margin-top: 130px; }
.suburb-photo { margin: 0; border: 1px solid var(--border); }
/* Heading runs across the top; the photo and text sit side by side under it,
   so the text starts level with the top of the photo */
.suburb-block { row-gap: 16px; }
.suburb-block > div:first-child { display: contents; }
.suburb-block h3 { grid-column: 1 / -1; margin: 0; }
.suburb-block .suburb-photo { grid-column: 1; }
.suburb-block > div:last-child { grid-column: 2; }
.suburb-photo img { width: 100%; max-width: 100%; height: auto; display: block; }
.suburb-block > div { min-width: 0; }
/* Divider above Wellington City, evenly spaced from the Submit button above and the heading below */
.suburb-block:first-of-type { border-top: 1px solid var(--border); padding-top: 56px; }
.suburb-block h3 { display: flex; align-items: center; gap: 10px; }
.suburb-block h3 i { color: var(--brand); }

/* Form */
.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}
.form-row { margin-bottom: 16px; }
/* First / Last name side by side */
.form-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.form-split .form-row { margin-bottom: 0; min-width: 0; }
.hero-form-card .form-split { margin-bottom: 12px; }
.form-row label {
  display: block;
  font-family: var(--font-head);
  font-size: calc(0.85rem + 1px);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 2px;
}
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #000000;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: calc(0.95rem - 1px);
  color: var(--ink);
  background: var(--white);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--white);
}
.form-note { font-size: 0.78rem; color: var(--ink-soft); margin-top: 10px; }

.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  height: 320px;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* Home coverage section: map + stacked area list */
.coverage-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: stretch;
}
.coverage-map { height: 100%; min-height: 340px; }
/* Area groups: underlined, capitalised group link with dash-bulleted suburbs under it */
.area-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-content: start;
}
/* Location group links styled like the button text */
.area-group > a { font-family: var(--font-head); font-weight: 600; font-size: 0.98rem; color: #000000; text-transform: uppercase; }
.area-group > a:hover { color: var(--brand); }
.area-group ul { margin: 8px 0 0; padding-left: 26px; }
.area-group li { list-style: none; position: relative; padding-left: 22px; margin-bottom: 4px; color: var(--ink); }
.area-group li::before { content: "-"; position: absolute; left: 0; }

/* Bottom CTA band */

/* Footer */
.site-footer { background: #16222e; color: rgba(255,255,255,0.72); padding: 60px 0 26px; }
/* footer content as wide as the hero, so the edges line up */
.site-footer .container { max-width: 1320px; }
.footer-grid {
  display: grid;
  /* five identical columns: logo plus Services / Locations / About / Contact */
  grid-template-columns: repeat(5, 1fr);
  column-gap: 32px;
  row-gap: 32px;
  margin-bottom: 40px;
}
/* Optical spacing on desktop: the columns are equal widths but the heading words differ in length,
   so nudge Services and Locations right (clear of the logo) and About further right to even out the visible gaps. */
@media (min-width: 901px) {
  .footer-grid > div:nth-child(2) { position: relative; left: 32px; }
  .footer-grid > div:nth-child(3) { position: relative; left: 25px; }
  .footer-grid > div:nth-child(4) { position: relative; left: 33px; }
}
.footer-brand .brand { color: var(--white); }
.footer-logo { display: inline-block; }
.footer-logo img { width: 280px; max-width: 100%; height: auto; display: block; }
.footer-brand p { color: rgba(255,255,255,0.6); font-size: 0.9rem; margin-top: 12px; }
.site-footer h4 { color: var(--white); font-size: calc(0.9rem + 2px); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; }
.site-footer h4 a { color: inherit; }
.site-footer h4 a:hover { text-decoration: underline; }
.site-footer ul li { margin-bottom: 10px; font-size: 0.92rem; }
.footer-locations li { text-transform: uppercase; letter-spacing: 0.04em; }
.site-footer a:hover { color: var(--white); }
/* Footer links underlined, same thin style and offset as the other links */
.site-footer a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.site-footer .footer-logo { text-decoration: none; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}
/* disclosure now sits in the footer-bottom row, opposite the copyright line */
.footer-bottom .disclosure { margin: 0; max-width: 560px; text-align: right; }
.disclosure {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  max-width: 780px;
  margin-top: 14px;
  line-height: 1.6;
}

/* Placeholder marker for content pending real details */
.pending { color: var(--amber-dark); font-style: italic; }

/* Responsive */
@media (max-width: 900px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .suburb-block { grid-template-columns: 1fr; }
  .suburb-block > div:last-child { grid-column: 1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-inner { grid-template-columns: 1fr; gap: 60px; }
  .hero-copy { max-width: none; }
  .hero-inner > .hero-form-card { margin-top: 0; }
  .page-hero-inner { grid-template-columns: 1fr; gap: 30px; }
  .coverage-grid { grid-template-columns: 1fr; }
  .coverage-map { min-height: 260px; }
  .service-row, .service-row.reverse { grid-template-columns: 1fr; gap: 44px; padding: 28px 0; }
  .service-row.service-row-spaced { padding-top: 56px; padding-bottom: 56px; }
  .service-row.reverse .service-figure { order: 0; }
  .service-figure { aspect-ratio: 4 / 3; font-size: 2.4rem; }
}
@media (max-width: 560px) {
  /* 16px stops iOS Safari zooming in when a field is tapped */
  .form-row input, .form-row select, .form-row textarea { font-size: 16px; }
  .header-inner { padding: 14px 24px; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
  .hero { padding-top: 110px; }
  .hero-copy .cta-row { margin-top: 30px; }
  .page-hero { padding: 110px 0 48px; }
}

/* Buttons and content links: one continuous underline, spaces included */
.btn, .link-u { text-decoration: underline; text-underline-offset: 3px; }
/* Text links turn the same blue as the buttons on hover */
.link-u { transition: color 0.15s; }
.link-u:hover { color: var(--brand); }

/* Contact page: halve the gap under the intro copy and the padding above the locations heading */
.page-hero.contact-hero { padding-bottom: 24px; }
.section.contact-locations { padding-top: 44px; }
@media (max-width: 560px) {
  .page-hero.contact-hero { padding-bottom: 24px; }
  .section.contact-locations { padding-top: 30px; }
}

/* Double the space between the last page section and the footer */
.page-hero:has(+ .site-footer) { padding-bottom: 128px; }
.page-hero.confirm-hero:has(+ .site-footer) { padding-bottom: 90px; }
.section:has(+ .site-footer) { padding-bottom: 176px; }
/* Extra space at the top of the footer, above the logo and columns */
.site-footer { padding-top: 120px; }
@media (max-width: 560px) {
  .page-hero:has(+ .site-footer) { padding-bottom: 96px; }
  .section:has(+ .site-footer) { padding-bottom: 120px; }
  .site-footer { padding-top: 120px; }
}