/* Self-hosted fonts (was Google Fonts) — latin + latin-ext, variable woff2. */
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:italic;font-weight:200 800;font-display:swap;src:url('/assets/fonts/atkinson-hyperlegible-next-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:italic;font-weight:200 800;font-display:swap;src:url('/assets/fonts/atkinson-hyperlegible-next-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/atkinson-hyperlegible-next-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Atkinson Hyperlegible Next';font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/atkinson-hyperlegible-next-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Familjen Grotesk';font-style:italic;font-weight:400 700;font-display:swap;src:url('/assets/fonts/familjen-grotesk-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Familjen Grotesk';font-style:italic;font-weight:400 700;font-display:swap;src:url('/assets/fonts/familjen-grotesk-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/familjen-grotesk-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/familjen-grotesk-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Steady Garage Doors Belmont — "the level page".
   One idea executed strictly: level water over pale ground. The page is the
   glass-off scene: pale sky (paper), dead-level waterlines (hairlines + contact
   edges), deep water (the footer, the one dark surface). All UI colour comes
   from the twelve brand tokens; artwork carries its own baked colours. */

:root {
  --ink:          oklch(27.1% 0.014 230);
  --ink-soft:     oklch(45.9% 0.018 229);
  --paper:        oklch(98.3% 0.003 210);
  --paper-calm:   oklch(95.3% 0.008 207);
  --primary:      oklch(44%   0.048 218);
  --primary-deep: oklch(33%   0.04  222);
  --lake:         oklch(73.9% 0.03  213);
  --sand:         oklch(90.9% 0.02  80);
  --steel:        oklch(80%   0.011 229);
  --steel-deep:   oklch(50.9% 0.018 229);
  --horizon:      oklch(89.9% 0.008 217);
  --success:      oklch(47.9% 0.048 148);

  --font-display: "Familjen Grotesk", "Trebuchet MS", sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Verdana", sans-serif;

  --wrap: 1120px;
  --pad: clamp(20px, 4vw, 44px);
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
img, svg { max-width: 100%; height: auto; display: block; }
::placeholder { color: color-mix(in oklab, var(--ink-soft) 30%, transparent); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1em; max-width: 70ch; }
/* page hook: the H1 orients (what + where); the node's voice line keeps its place right below */
.hook {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--steel-deep);
  margin: -0.15em 0 0.8em;
  max-width: 36ch;
}
a { color: var(--primary); }
a:hover { color: var(--primary-deep); }
main a:not(.btn):not(.card-link):not(.tile) { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 2px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.wrap-narrow { max-width: 800px; margin-inline: auto; padding-inline: var(--pad); }

/* the site rule — the mark's dead-level horizon */
hr {
  border: 0;
  height: 16px;
  margin: clamp(2.2rem, 5vw, 3.4rem) auto;
  background: url("/assets/brand/hr-glassoff.svg") center / 320px auto no-repeat;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel-deep);
  margin: 0 0 0.9em;
}

/* brand bullet list */
ul.level { list-style: none; padding: 0; margin: 0 0 1.2em; }
ul.level li { position: relative; padding-left: 30px; margin-bottom: 0.55em; max-width: 68ch; }
ul.level li::before {
  content: ""; position: absolute; left: 0; top: 0.36em;
  width: 15px; height: 15px;
  background: url("/assets/brand/bullet-horizon.svg") center / contain no-repeat;
}

/* ---------- buttons: hierarchy through weight, never temperature ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  padding: 15px 28px;
  border-radius: 8px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.btn-repair { background: var(--primary-deep); color: var(--paper); }
.btn-repair:hover { background: oklch(28% 0.04 222); color: var(--paper); }
.btn-quote { background: var(--primary); color: var(--paper); }
.btn-quote:hover { background: var(--primary-deep); color: var(--paper); }
.btn-quote-outline { background: transparent; color: var(--primary-deep); border-color: var(--primary-deep); }
.btn-quote-outline:hover { background: var(--primary-deep); color: var(--paper); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- header ---------- */
.masthead { background: var(--paper); border-bottom: 1px solid var(--horizon); }
.masthead-inner {
  display: flex; align-items: center; gap: 26px;
  padding-block: 16px;
}
.brand-link { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-link img { height: 46px; width: auto; }
.brand-link .brand-stacked { display: none; height: 56px; }
.site-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.site-nav a.nav-item {
  font-weight: 700; font-size: 1rem; text-decoration: none; color: var(--ink);
  padding: 6px 2px; border-bottom: 3px solid transparent;
}
.site-nav a.nav-item:hover { color: var(--primary-deep); border-bottom-color: var(--lake); }
.masthead .btn { padding: 11px 20px; font-size: 0.98rem; }

/* active page: dead-level underline in lake */
body[data-page="services"] a[data-nav="services"],
body[data-page="areas"]    a[data-nav="areas"],
body[data-page="guides"]   a[data-nav="guides"],
body[data-page="about"]    a[data-nav="about"] { border-bottom-color: var(--primary); }

/* mobile drawer — <details>, no JS needed */
.nav-drawer { display: none; position: relative; margin-left: auto; }
.nav-drawer summary {
  list-style: none; cursor: pointer; font-weight: 700; color: var(--ink);
  padding: 10px 14px; border: 1.5px solid var(--steel); border-radius: 8px;
  display: flex; align-items: center; gap: 9px; user-select: none;
}
.nav-drawer summary::-webkit-details-marker { display: none; }
.nav-drawer .burger { display: inline-block; width: 18px; }
.nav-drawer .burger span { display: block; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; }
.nav-drawer[open] summary { background: var(--paper-calm); }
.nav-drawer ul {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 230px; margin: 0; padding: 10px;
  list-style: none; background: var(--paper);
  border: 1px solid var(--horizon); border-radius: 12px;
  box-shadow: 0 14px 34px oklch(27.1% 0.014 230 / 0.14);
}
.nav-drawer li a {
  display: block; padding: 12px 14px; border-radius: 8px;
  font-weight: 700; text-decoration: none; color: var(--ink);
}
.nav-drawer li a:hover { background: var(--paper-calm); color: var(--primary-deep); }
.nav-drawer li.drawer-cta { margin-top: 6px; border-top: 1px solid var(--horizon); padding-top: 10px; }
.nav-drawer li.drawer-cta a { background: var(--primary-deep); color: var(--paper); text-align: center; }

/* ---------- hero: sky then water ---------- */
.hero-sky { padding-block: clamp(2.6rem, 7vw, 5rem) clamp(2rem, 5vw, 3.2rem); }
.hero-sky h1 { max-width: 17ch; }
.hero-lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 58ch; margin-bottom: 1.6em; }
.hero-note { font-size: 0.95rem; color: var(--steel-deep); margin-top: 1.1em; }
.hero-water { border-top: 3px solid var(--primary-deep); }
.hero-water img { width: 100%; height: min(52vh, 560px); object-fit: cover; }

/* photo band for inner pages (suburb/guide openers) */
.photo-band { border-top: 3px solid var(--primary-deep); border-bottom: 1px solid var(--horizon); }
.photo-band img { width: 100%; height: min(40vh, 420px); object-fit: cover; }

/* ---------- sections ---------- */
.section { padding-block: clamp(2.6rem, 6vw, 4.2rem); }
.section-calm { background: var(--paper-calm); }
.section-textured {
  background: var(--paper-calm) url("/assets/brand/pattern-glassoff-light.webp") center / cover;
}
.section-sand { background: var(--sand); }
.section-head { max-width: 720px; margin-bottom: 2rem; }
.section-head .icon { object-fit: contain; }
.section-head p { color: var(--ink-soft); }

/* ---------- cards ---------- */
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; }
.card {
  background: var(--paper); border: 1px solid var(--horizon); border-radius: 14px;
  padding: 26px 26px 22px;
}
.card .icon { width: 64px; height: 64px; margin-bottom: 14px; object-fit: contain; }
.card h3 { margin-bottom: 0.4em; }
.card p { color: var(--ink-soft); font-size: 0.99rem; margin-bottom: 0.8em; }
.card-link { font-weight: 700; text-decoration: none; }
.card-link::after { content: " \2192"; }

/* service rows */
.service-row {
  display: grid; grid-template-columns: 72px 1fr auto; gap: 22px; align-items: start;
  padding-block: 26px; border-top: 1px solid var(--horizon);
}
.service-row:last-of-type { border-bottom: 1px solid var(--horizon); }
.service-row .icon { width: 64px; height: 64px; object-fit: contain; }
.service-row h3 { margin-bottom: 0.25em; }
.service-row p { color: var(--ink-soft); margin: 0; max-width: 62ch; }
.service-row .btn { white-space: nowrap; margin-top: 4px; }

/* pull-quote set-piece: OUR voice, never a testimonial */
.setpiece { text-align: center; padding-block: clamp(2.4rem, 6vw, 4rem); }
.setpiece blockquote {
  margin: 0 auto; max-width: 24ch;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; color: var(--primary-deep);
}
.setpiece blockquote::before {
  content: ""; display: block; width: 46px; height: 38px; margin: 0 auto 18px;
  background: url("/assets/brand/quote-glassoff.svg") center / contain no-repeat;
}
.setpiece .setpiece-note { color: var(--ink-soft); max-width: 52ch; margin: 1.2em auto 0; }

/* ---------- checker (signature) ---------- */
.checker-shell {
  background: var(--paper); border: 1px solid var(--horizon); border-radius: 16px;
  padding: clamp(22px, 4vw, 38px); max-width: 780px;
}
.checker-q { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; margin: 0 0 1em; }
.checker-opts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.chip {
  font: inherit; font-weight: 700; text-align: left; cursor: pointer;
  background: var(--paper-calm); color: var(--ink);
  border: 2px solid var(--steel); border-radius: 10px;
  padding: 16px 18px; line-height: 1.35;
}
.chip:hover { border-color: var(--primary); background: var(--paper); }
.checker-dots { display: flex; gap: 8px; margin-bottom: 20px; }
.checker-dots span { width: 34px; height: 5px; border-radius: 3px; background: var(--horizon); }
.checker-dots span.done { background: var(--primary); }
.checker-back {
  background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700;
  color: var(--steel-deep); padding: 4px 0; margin-top: 18px; text-decoration: underline;
  text-underline-offset: 3px;
}
.checker-back:hover { color: var(--primary-deep); }
.checker-result h3 { font-size: 1.5rem; }
.checker-result .verdict-kicker { color: var(--steel-deep); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.7em; }
.checker-safety {
  border-left: 4px solid var(--primary-deep); background: var(--paper-calm);
  padding: 14px 18px; border-radius: 0 10px 10px 0; margin: 1.2em 0; max-width: 62ch;
}
.checker-safety p { margin: 0; color: var(--ink); font-size: 0.99rem; }
.checker-firstread { color: var(--steel-deep); font-size: 0.92rem; margin-top: 1.1em; }

/* JS-off symptom table */
.symptom-table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.symptom-table th, .symptom-table td { text-align: left; padding: 12px 14px; border-top: 1px solid var(--horizon); vertical-align: top; }
.symptom-table th { font-family: var(--font-display); }

/* ---------- foreshore ladder viz ---------- */
.ladder { background: var(--paper); border: 1px solid var(--horizon); border-radius: 16px; padding: clamp(20px, 4vw, 34px); margin: 0; }
.ladder .ladder-scroll { overflow-x: auto; }
.ladder svg { min-width: 620px; }
.ladder svg text { font-family: var(--font-body); }
.ladder-note { color: var(--steel-deep); font-size: 0.88rem; margin: 12px 0 0; }
/* The SVG keeps a readable min-width (620px) and scrolls inside .ladder-scroll on small
   screens, so two suburbs start off-screen there. The hint only shows below the width
   where the whole chart fits, so nobody misses them. */
.ladder-swipe { display: none; }
@media (max-width: 719px) {
  .ladder-swipe { display: block; color: var(--steel-deep); font-size: 0.88rem; font-weight: 700; margin: 10px 0 0; }
}

/* ---------- clearance helper ---------- */
.helper {
  background: var(--paper); border: 1px solid var(--horizon); border-radius: 16px;
  padding: clamp(22px, 4vw, 34px); margin-block: 1.6rem;
}
.helper .fields { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 8px; }
.helper label { font-weight: 700; display: block; margin-bottom: 6px; }
.helper .hint { display: block; font-weight: 400; font-size: 0.88rem; color: var(--steel-deep); }
.helper input[type="number"] {
  font: inherit; width: 100%; padding: 13px 14px;
  border: 1.5px solid var(--steel); border-radius: 8px; background: var(--paper);
  color: var(--ink);
}
.helper-verdict { border-radius: 10px; padding: 18px 20px; margin-top: 14px; background: var(--paper-calm); border: 1px solid var(--horizon); }
.helper-verdict strong { font-family: var(--font-display); font-size: 1.12rem; }
.helper-verdict p { margin: 0.35em 0 0.8em; color: var(--ink-soft); font-size: 0.98rem; }

/* ---------- enquiry form ---------- */
.lead-form { max-width: 660px; }
.lead-form .field { margin-bottom: 20px; }
.lead-form label { display: block; font-weight: 700; margin-bottom: 7px; }
.lead-form .optional { font-weight: 400; color: var(--steel-deep); font-size: 0.9rem; }
.lead-form input[type="text"], .lead-form input[type="tel"], .lead-form input[type="email"],
.lead-form select, .lead-form textarea {
  font: inherit; width: 100%; padding: 14px 15px; color: var(--ink);
  border: 1.5px solid var(--steel); border-radius: 8px; background: var(--paper);
}
.lead-form textarea { min-height: 130px; resize: vertical; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: 0;
}
.form-result { border-radius: 12px; padding: 22px 24px; margin-top: 18px; }
.form-result.ok { background: var(--paper-calm); border: 1.5px solid var(--success); }
.form-result.ok h3 { color: var(--success); display: flex; align-items: center; gap: 12px; }
.form-result.ok img { width: 64px; }
.form-result.err { background: var(--paper-calm); border: 1.5px solid var(--primary-deep); color: var(--ink); font-weight: 700; }

/* ---------- suburb stat line ---------- */
.stat-line {
  display: flex; flex-wrap: wrap; gap: 12px 34px;
  border-block: 1px solid var(--horizon); padding-block: 16px; margin-block: 1.6rem;
}
.stat-line div { min-width: 130px; }
.stat-line .n { font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; display: block; }
.stat-line .l { color: var(--steel-deep); font-size: 0.88rem; }

/* ---------- guide article ---------- */
.article { padding-block: clamp(2.2rem, 5vw, 3.4rem); }
.article h2 { margin-top: 1.8em; }
.article figure { margin: 2em 0; }
.article figcaption { font-size: 0.88rem; color: var(--steel-deep); padding-top: 8px; }
.article img { border-radius: 12px; border: 1px solid var(--horizon); }
.refs { border-top: 1px solid var(--horizon); margin-top: 2.6em; padding-top: 1.4em; }
.refs h2 { font-size: 1.2rem; margin-top: 0; }
.refs li { margin-bottom: 0.7em; font-size: 0.95rem; color: var(--ink-soft); }

/* glossary: each dt+dd pair stays one block so pairing is never ambiguous */
.glossary { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 26px 34px; margin: 0; }
.glossary dt { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.glossary dd { margin: 0.3em 0 0; color: var(--ink-soft); font-size: 0.97rem; max-width: 60ch; }

/* tiles (guides index / areas index) */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; }
.tile {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--horizon); border-radius: 14px; overflow: hidden;
}
.tile img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.tile .tile-body { padding: 20px 22px 22px; }
.tile h3 { margin-bottom: 0.35em; }
.tile p { color: var(--ink-soft); font-size: 0.96rem; margin: 0; }
.tile:hover { border-color: var(--primary); }
.tile:hover h3 { color: var(--primary-deep); }

/* FAQ */
.faq details { border-top: 1px solid var(--horizon); }
.faq details:last-of-type { border-bottom: 1px solid var(--horizon); }
.faq summary {
  cursor: pointer; font-weight: 700; font-size: 1.05rem; padding: 18px 4px;
  list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-size: 1.4rem; color: var(--primary); line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq .faq-a { padding: 0 4px 20px; color: var(--ink-soft); max-width: 66ch; }

/* ---------- enquiry CTA band (partial) ---------- */
.cta-band { background: var(--sand); border-top: 3px solid var(--primary-deep); }
.cta-band .cta-inner {
  display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: space-between;
  padding-block: clamp(2.2rem, 5vw, 3.4rem);
}
.cta-band h2 { margin: 0 0 0.3em; }
.cta-band p { margin: 0; color: var(--ink-soft); max-width: 46ch; }

/* ---------- footer: the deep water ---------- */
.site-footer {
  background: var(--primary-deep) url("/assets/brand/pattern-lake-dark.webp") center / cover;
  color: var(--paper);
  border-top: 3px solid var(--primary-deep);
  position: relative;
}
.footer-inner { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding-block: clamp(2.6rem, 6vw, 4rem) 1.6rem; }
.footer-brand img { height: 92px; width: auto; margin-bottom: 18px; }
.footer-brand p { color: oklch(93% 0.008 217); font-size: 0.96rem; max-width: 34ch; }
.foot-h { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--paper); margin: 0 0 0.8em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.55em; }
.site-footer a { color: oklch(93% 0.008 217); text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover { color: #ffffff; }
.footer-fine {
  border-top: 1px solid oklch(45% 0.03 222);
  padding-block: 18px 26px; font-size: 0.88rem; color: oklch(88% 0.01 217);
}
.footer-fine p { margin: 0 0 0.4em; max-width: none; }

/* ---------- 404 / utility pages ---------- */
.spot-page { text-align: center; padding-block: clamp(3rem, 9vw, 6rem); }
.spot-page img { width: 220px; margin: 0 auto 24px; }
.spot-page p { margin-inline: auto; color: var(--ink-soft); }

/* breadcrumb */
.crumb { font-size: 0.88rem; color: var(--steel-deep); padding-top: 20px; }
.crumb a { color: var(--steel-deep); }
.crumb span { padding-inline: 6px; }

/* ---------- responsive ---------- */
@media (max-width: 880px) {
  .site-nav { display: none; }
  .nav-drawer { display: block; }
  .masthead .btn-repair-head { display: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .service-row { grid-template-columns: 56px 1fr; }
  .service-row .icon { width: 52px; height: 52px; }
  .service-row .btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 560px) {
  .brand-link img.brand-wide { display: none; }
  .brand-link .brand-stacked { display: block; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .hero-water img { height: 42vh; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .masthead .btn { width: auto; }
  .checker-opts { grid-template-columns: 1fr; }
}

/* ============================================================
   MOTION LAYER (added post-build, behaviour only)
   The resting design is untouched. Every element rests fully
   visible; motion.js adds the reveal state at runtime and declines
   entirely under reduced motion. Nothing here changes how the page
   LOOKS AT REST, only how it BEHAVES on interaction and on scroll.
   Signature: "finds its level" -- a dead-level waterline in lake
   tone settles in flush along the base of a primary enquiry CTA,
   the brand's own thesis (water finding its level, doors coming
   squarely to rest) made tactile at the exact click that matters.
   ============================================================ */

/* 1. Ease the snapping hovers. Only the properties the resting
      styles already swap on hover, plus transform for the settle. */
.btn,
.site-nav a.nav-item,
.nav-drawer summary,
.nav-drawer li a,
.card,
.card-link,
.tile,
.tile h3,
.chip,
.faq summary,
.faq summary::after,
.checker-back,
.crumb a,
main a:not(.btn):not(.card-link):not(.tile):not(.nav-item),
.lead-form input, .lead-form select, .lead-form textarea,
.helper input[type="number"] {
  transition: transform .16s cubic-bezier(.2, .7, .3, 1),
              box-shadow .18s ease,
              border-color .16s ease,
              background-color .16s ease,
              color .16s ease,
              outline-color .12s ease;
}

/* 2. The weighted settle -- cards and tiles ease up a hair on
      hover/focus, like a balanced door lifting cleanly off the
      floor, then settle square on press. Never a bounce. */
.card:hover, .card:focus-within,
.tile:hover, .tile:focus-within {
  transform: translateY(-2px);
}
.card:active, .tile:active { transform: translateY(0); }
.card:hover, .card:focus-within,
.tile:focus-within { border-color: var(--primary); }
.tile:focus-within h3 { color: var(--primary-deep); }

/* SIGNATURE -- "finds its level". A hairline waterline draws in
   dead-level along the base of a primary CTA and settles flush.
   scaleX + translateY only, so it stays on the compositor. The line
   rests at scaleX(0), so the button looks exactly as designed until
   touched. */
.btn-repair, .btn-quote, .btn-quote-outline { position: relative; }
.btn-repair::after, .btn-quote::after, .btn-quote-outline::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 7px;
  height: 2px; border-radius: 2px; background: var(--lake);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .18s cubic-bezier(.2, .7, .3, 1);
  pointer-events: none;
}
.btn-repair:hover, .btn-quote:hover, .btn-quote-outline:hover { transform: translateY(-1px); }
.btn-repair:active, .btn-quote:active, .btn-quote-outline:active { transform: translateY(1px); }
.btn-repair:hover::after, .btn-repair:focus-visible::after,
.btn-quote:hover::after, .btn-quote:focus-visible::after,
.btn-quote-outline:hover::after, .btn-quote-outline:focus-visible::after {
  transform: scaleX(1);
}

/* 4. Focus-visible parity -- keyboard users get the same nav cue as
      hover, alongside (never replacing) the global focus outline. */
.site-nav a.nav-item:focus-visible { border-bottom-color: var(--lake); }

/* 3. Scroll-reveal. The .reveal class is added by motion.js ONLY to
      blocks below the fold, so on-screen content never flashes, and
      no-JS / crawler visitors never see it at all (fully visible). */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2, .7, .3, 1);
}
.reveal.revealed { opacity: 1; transform: none; }

/* THE MOTION FLOOR (non-negotiable). Reduced-motion visitors get the
   resting design with everything simply appearing; motion.js also
   declines to hide anything in this mode. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}