/* Self-hosted fonts (was Google Fonts) — latin + latin-ext, variable woff2. */
@font-face{font-family:'Bitter';font-style:normal;font-weight:500 700;font-display:swap;src:url('/assets/fonts/bitter-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:'Bitter';font-style:normal;font-weight:500 700;font-display:swap;src:url('/assets/fonts/bitter-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:'Commissioner';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/commissioner-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:'Commissioner';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/commissioner-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:'Commissioner';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/commissioner-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:'Commissioner';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/commissioner-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:'Spline Sans Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/spline-sans-mono-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:'Spline Sans Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/spline-sans-mono-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;}
/* Slipway Garage Doors — Port Stephens (Nelson Bay / Salamander Bay)
   Design tokens verbatim from brand-kit/system.md. The one drawn device is the
   waterline: a thin antifoul horizontal rule (content "hull" above it). Aqua is
   the interactivity contract only. No yellow/amber/orange anywhere. */

:root {
  /* text */
  --ink:          #232A30;
  --ink-soft:     #49565C;

  /* grounds */
  --paper:        #F4F6F5;
  --paper-raised: #E7EBE9;
  --gelcoat:      #FBFCFA;

  /* structure — the considered path */
  --rail:         #4A5258;
  --rail-deep:    #31383D;
  --galv:         #B9C0C2;

  /* the urgent path */
  --antifoul:      #8A3B2E;
  --antifoul-deep: #6E2E23;

  /* the one live note */
  --shoal:        #1F7A87;
  --shoal-bright: #7AC2CD;
  --shoal-wash:   #DEEDEF;

  /* warm trim */
  --spar:         #8A6134;

  --font-display: "Bitter", "Rockwell", "Georgia", serif;
  --font-body: "Commissioner", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono: "Spline Sans Mono", "Menlo", monospace;

  --wrap: 1120px;
  --radius: 10px;
}

/* ── reset-ish ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; } /* kernel rule: never let a display value defeat `hidden` */
::placeholder { color: rgb(73 86 92 / 0.35); }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 0.6em; }
h1 { font-weight: 680; font-size: clamp(2.05rem, 4.6vw, 3.3rem); letter-spacing: -0.01em; }
/* the page hook: H1 orients (what+where), the personality line keeps its place right below in the Bitter display face, a quiet notch under the H1 */
.hook { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.18rem, 2.2vw, 1.5rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-soft); margin: 0 0 0.7em; max-width: 34em; }
h2 { font-weight: 640; font-size: clamp(1.55rem, 3vw, 2.15rem); }
h3 { font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.35rem); }
p  { margin: 0 0 1em; }
a  { color: var(--shoal); text-underline-offset: 3px; }
a:hover { color: var(--antifoul); }
:focus-visible { outline: 3px solid var(--shoal); outline-offset: 2px; border-radius: 2px; }
strong { font-weight: 600; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.lede { font-size: clamp(1.1rem, 1.9vw, 1.3rem); color: var(--ink-soft); max-width: 46em; }
.kicker {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.8rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--antifoul);
  display: block; margin-bottom: 0.9rem;
}
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
[id] { scroll-margin-top: 128px; } /* sticky yard board */

/* the brand's one drawn device — always thin, always horizontal */
.waterline-rule { border: 0; height: 3px; background: var(--antifoul); margin: 0; }

.slip-divider { display: flex; justify-content: center; padding-block: 0.4rem; }
.slip-divider img { width: min(320px, 60vw); height: auto; }

/* mono ledger figures — kept records made visible */
.ledger { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ── buttons: work, not signage (Commissioner 600) ─────────────────────── */
.btn {
  display: inline-block; font-family: var(--font-body); font-weight: 600;
  font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  padding: 0.85rem 1.5rem; border-radius: 7px; border: 0;
  transition: background-color 140ms ease, transform 140ms ease;
}
.btn:active { transform: translateY(1px); }
.btn-antifoul { background: var(--antifoul); color: var(--gelcoat); }
.btn-antifoul:hover { background: var(--antifoul-deep); color: var(--gelcoat); }
.btn-rail { background: var(--rail); color: var(--gelcoat); }
.btn-rail:hover { background: var(--rail-deep); color: var(--gelcoat); }
.btn-quiet {
  background: transparent; color: var(--rail);
  box-shadow: inset 0 0 0 2px var(--galv);
}
.btn-quiet:hover { box-shadow: inset 0 0 0 2px var(--rail); color: var(--rail-deep); }

/* ── header: the yard board ────────────────────────────────────────────── */
.board { position: sticky; top: 0; z-index: 50; }
.board-strip {
  background: var(--rail-deep); color: var(--galv);
  font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.board-strip .wrap { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.45rem; }
.board-strip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-main { background: var(--gelcoat); border-bottom: 1px solid var(--galv); }
.board-main .wrap { display: flex; align-items: center; gap: 1.6rem; padding-block: 0.7rem; }
.board-logo { flex: 0 0 auto; display: block; }
.board-logo img { height: 52px; width: auto; }
.board-nav { display: flex; gap: 1.35rem; margin-left: auto; }
.board-nav a {
  font-weight: 600; font-size: 0.98rem; color: var(--ink); text-decoration: none;
  padding-block: 0.35rem; border-bottom: 3px solid transparent;
}
.board-nav a:hover { color: var(--shoal); }
.board-cta { display: flex; gap: 0.6rem; }
.board-cta .btn { padding: 0.6rem 1.05rem; font-size: 0.92rem; }
.board-burger {
  display: none; margin-left: auto; background: none; border: 2px solid var(--rail);
  border-radius: 7px; padding: 0.45rem 0.6rem; cursor: pointer; color: var(--rail-deep);
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.1em;
}
/* active page marker: <body data-page="services"> etc. */
body[data-page="services"] .board-nav a[href="/services/"],
body[data-page="areas"]    .board-nav a[href="/areas/"],
body[data-page="guides"]   .board-nav a[href="/guides/"],
body[data-page="about"]    .board-nav a[href="/about/"] {
  border-bottom-color: var(--antifoul); color: var(--ink);
}

/* mobile slip-log panel */
.board-panel { display: none; }
@media (max-width: 900px) {
  .board-nav, .board-cta { display: none; }
  .board-burger { display: inline-block; }
  .board-panel[data-open] {
    display: block; background: var(--rail-deep); color: var(--gelcoat);
    border-bottom: 3px solid var(--antifoul);
  }
  .board-panel .wrap { padding-block: 1.2rem 1.5rem; display: grid; gap: 0.15rem; }
  .board-panel a.panel-link {
    color: var(--gelcoat); text-decoration: none; font-weight: 600; font-size: 1.15rem;
    padding-block: 0.55rem; border-bottom: 1px solid rgb(185 192 194 / 0.25);
  }
  .board-panel a.panel-link:hover { color: var(--shoal-bright); }
  .board-panel .panel-ctas { display: grid; gap: 0.6rem; margin-top: 1.1rem; }
  .board-strip span:last-child { display: none; }
}

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero { background: var(--gelcoat) url("/assets/brand/section-gelcoat.webp"); background-size: 1280px auto; }
.hero .wrap {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center; padding-block: clamp(2.6rem, 6vw, 4.6rem);
}
.hero-copy .lede { margin-bottom: 1.6rem; }
.hero-figure { position: relative; }
.hero-figure img.photo {
  border-radius: var(--radius); border: 1px solid var(--galv);
  box-shadow: 0 14px 34px rgb(35 42 48 / 0.16);
  width: 100%; aspect-ratio: 8 / 7; object-fit: cover; object-position: 32% center;
}
.hero-figure figcaption {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  margin-top: 0.7rem;
}
.hero-paths { display: grid; gap: 0.9rem; grid-template-columns: 1fr 1fr; margin-top: 1.9rem; }
.path-card {
  display: block; text-decoration: none; border-radius: var(--radius);
  padding: 1.05rem 1.15rem 1.15rem; color: var(--gelcoat);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.path-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgb(35 42 48 / 0.22); color: var(--gelcoat); }
.path-card.urgent { background: var(--antifoul); }
.path-card.urgent:hover { background: var(--antifoul-deep); }
.path-card.considered { background: var(--rail); }
.path-card.considered:hover { background: var(--rail-deep); }
.path-card .path-tag {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; display: block; margin-bottom: 0.35rem;
}
.path-card strong { font-family: var(--font-display); font-weight: 620; font-size: 1.18rem; display: block; margin-bottom: 0.3rem; }
.path-card span.path-note { font-size: 0.92rem; opacity: 0.92; line-height: 1.45; display: block; }

/* ── truth strip (the three truths) ────────────────────────────────────── */
.truths { background: var(--paper); }
.truths-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.2rem); }
.truth {
  background: var(--gelcoat); border: 1px solid var(--galv); border-bottom: 3px solid var(--antifoul);
  border-radius: var(--radius); padding: 1.5rem 1.4rem 1.35rem;
  display: flex; flex-direction: column;
}
.truth img.truth-icon { width: 74px; height: 74px; object-fit: contain; margin-bottom: 0.9rem; }
.truth h3 { margin-bottom: 0.45em; }
.truth p { color: var(--ink-soft); font-size: 0.98rem; margin-bottom: 1rem; }
.truth .truth-more { margin-top: auto; font-weight: 600; font-size: 0.95rem; }

/* stat chips (real, cited figures only) */
.stat { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.4rem; }
.stat .stat-num { font-family: var(--font-mono); font-weight: 500; font-size: 1.5rem; color: var(--antifoul); }
.stat .stat-what { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.35; }

/* ── the Haul-Out Check (signature tool) ───────────────────────────────── */
.haulout { background: var(--rail-deep) url("/assets/brand/section-ink.webp"); background-size: 1280px auto; color: var(--gelcoat); }
.haulout .kicker { color: var(--shoal-bright); }
.haulout h2 { color: var(--gelcoat); }
.haulout .lede { color: var(--galv); }
.haulout-sheet {
  background: var(--gelcoat); color: var(--ink); border-radius: var(--radius);
  border-bottom: 4px solid var(--antifoul);
  padding: clamp(1.3rem, 3vw, 2.2rem); margin-top: 2rem;
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.28);
}
.haulout-sheet .sheet-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  border-bottom: 1px solid var(--galv); padding-bottom: 0.8rem; margin-bottom: 1.4rem;
}
.haulout-sheet .sheet-head h3 { margin: 0; }
.haulout-sheet .sheet-no {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
}
.ho-q { margin-bottom: 1.5rem; }
.ho-q > legend, .ho-q > .ho-label {
  font-family: var(--font-display); font-weight: 620; font-size: 1.05rem;
  padding: 0; margin-bottom: 0.65rem; display: block;
}
.ho-q .ho-hint { font-size: 0.85rem; color: var(--ink-soft); margin: -0.35rem 0 0.65rem; }
fieldset.ho-q { border: 0; padding: 0; margin-inline: 0; }
.ho-opts { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.ho-opt { position: relative; }
.ho-opt input { position: absolute; opacity: 0; inset: 0; pointer-events: none; }
.ho-opt label {
  display: inline-block; cursor: pointer; font-size: 0.95rem; font-weight: 600;
  color: var(--rail-deep); background: var(--paper); border: 1.5px solid var(--galv);
  border-radius: 7px; padding: 0.5rem 0.85rem; transition: all 120ms ease;
}
.ho-opt label:hover { border-color: var(--rail); }
.ho-opt input:checked + label { background: var(--shoal); border-color: var(--shoal); color: var(--gelcoat); }
.ho-opt input:focus-visible + label { outline: 3px solid var(--shoal); outline-offset: 2px; }
.ho-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ho-actions .ho-fine { font-size: 0.85rem; color: var(--ink-soft); max-width: 30em; margin: 0; }

/* the report the tool returns */
.ho-report { border-top: 3px solid var(--antifoul); margin-top: 1.6rem; padding-top: 1.4rem; }
.ho-report .report-tag {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--shoal); display: block; margin-bottom: 0.6rem;
}
.ho-report h4 { font-family: var(--font-display); font-weight: 640; font-size: 1.25rem; margin: 0 0 0.7rem; }
.ho-report ul.checks { list-style: none; margin: 0 0 1rem; padding: 0; }
.ho-report ul.checks li {
  padding-left: 1.5rem; margin-bottom: 0.55rem;
  background: url("/assets/brand/bullet.svg") no-repeat left 0.42em / 11px 11px;
}
.ho-safety {
  background: var(--paper); border-left: 4px solid var(--antifoul); border-radius: 0 7px 7px 0;
  padding: 0.85rem 1.05rem; margin-bottom: 1.2rem; font-size: 0.97rem;
}
.ho-safety strong { color: var(--antifoul); }
.ho-report .report-ctas { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }
.ho-report .report-rail {
  font-size: 0.82rem; color: var(--ink-soft); margin: 1rem 0 0;
}

/* ── services board ────────────────────────────────────────────────────── */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-top: 2rem; }
.svc {
  background: var(--gelcoat); border: 1px solid var(--galv); border-radius: var(--radius);
  padding: 1.35rem 1.3rem 1.2rem; border-bottom: 3px solid var(--antifoul);
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
a.svc:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(35 42 48 / 0.14); color: var(--ink); }
.svc img.svc-icon { width: 64px; height: 64px; object-fit: contain; margin-bottom: 0.8rem; }
.svc h3 { font-size: 1.12rem; margin-bottom: 0.4em; }
.svc p { font-size: 0.94rem; color: var(--ink-soft); margin-bottom: 0.7rem; }
.svc .svc-go { margin-top: auto; font-weight: 600; font-size: 0.92rem; color: var(--shoal); }
a.svc:hover .svc-go { color: var(--antifoul); }

/* ── the slip schedule (shoal-wash — the ritual gets brand ground) ─────── */
.schedule { background: var(--shoal-wash); }
.schedule-table { width: 100%; min-width: 660px; border-collapse: collapse; margin-top: 1.6rem; background: var(--gelcoat); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--galv); }
.schedule-table th, .schedule-table td { text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--paper-raised); vertical-align: top; }
.schedule-table thead th {
  background: var(--rail-deep); color: var(--gelcoat); font-family: var(--font-mono);
  font-weight: 500; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.schedule-table td:first-child { font-weight: 600; white-space: nowrap; }
.schedule-table td.ledger { color: var(--rail-deep); font-size: 0.92rem; white-space: nowrap; }
.schedule-table tbody tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

/* ── the run (areas / drive times) ─────────────────────────────────────── */
.run-list { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 2.4rem; }
.run-list li {
  display: flex; align-items: baseline; gap: 0.65rem;
  border-bottom: 1px dashed var(--galv); padding-block: 0.55rem;
}
.run-list a { font-weight: 600; text-decoration: none; color: var(--ink); }
.run-list a:hover { color: var(--shoal); }
.run-list .run-dots { flex: 1; }
.run-list .run-min { font-family: var(--font-mono); font-weight: 500; font-size: 0.9rem; color: var(--rail); white-space: nowrap; }

/* ── enquiry band + form ───────────────────────────────────────────────── */
.enquiry-band { background: var(--rail-deep) url("/assets/brand/section-ink.webp"); background-size: 1280px auto; color: var(--gelcoat); }
.enquiry-band h2 { color: var(--gelcoat); }
.enquiry-band .lede { color: var(--galv); }
.enquiry-band .kicker { color: var(--shoal-bright); }
.enquiry-band a { color: var(--shoal-bright); }

.lead-form { display: grid; gap: 1.05rem; margin-top: 1.8rem; }
.lead-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
.lead-form label.fld { display: block; }
.lead-form .fld > span {
  display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.35rem;
}
.lead-form .fld .opt-note { font-weight: 400; color: var(--ink-soft); font-size: 0.85rem; }
.lead-form input[type="text"], .lead-form input[type="tel"], .lead-form input[type="email"],
.lead-form select, .lead-form textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--gelcoat);
  border: 1.5px solid var(--galv); border-radius: 7px; padding: 0.7rem 0.85rem;
}
.lead-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--rail) 50%), linear-gradient(135deg, var(--rail) 50%, transparent 50%); background-position: calc(100% - 19px) 1.25em, calc(100% - 13px) 1.25em; background-size: 6px 6px; background-repeat: no-repeat; }
.lead-form textarea { min-height: 8.5em; resize: vertical; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  outline: 3px solid var(--shoal); outline-offset: 0; border-color: var(--shoal);
}
.lead-form .form-actions { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.lead-form .form-note { font-size: 0.85rem; color: var(--ink-soft); margin: 0; max-width: 26em; }

/* form result states — aqua is the confirmation moment */
.lead-result { border-radius: var(--radius); padding: 1.3rem 1.4rem; margin-top: 1.4rem; }
.lead-result.ok { background: var(--shoal-wash); border: 1px solid var(--shoal); color: var(--ink); display: flex; gap: 1.1rem; align-items: center; }
.lead-result.ok img { width: 92px; flex: 0 0 auto; }
.lead-result.ok strong { font-family: var(--font-display); font-size: 1.15rem; display: block; margin-bottom: 0.2rem; }
.lead-result.err { background: #F7E9E6; border: 1px solid var(--antifoul); color: var(--antifoul-deep); font-weight: 600; }

/* the form gets a light card when it sits on a dark band */
.form-card {
  background: var(--gelcoat); color: var(--ink); border-radius: var(--radius);
  border-bottom: 4px solid var(--antifoul); padding: clamp(1.3rem, 3vw, 2rem);
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.28);
}

/* ── page hero (inner pages) ───────────────────────────────────────────── */
.page-head { background: var(--gelcoat) url("/assets/brand/section-gelcoat.webp"); background-size: 1280px auto; border-bottom: 3px solid var(--antifoul); }
.page-head .wrap { padding-block: clamp(2.4rem, 5vw, 3.6rem); }
.page-head .lede { margin-bottom: 0; }
.crumbs { font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.1rem; color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--shoal); }

/* ── prose / article ───────────────────────────────────────────────────── */
.prose { max-width: 46em; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { padding-left: 1.55rem; margin-bottom: 0.5rem; background: url("/assets/brand/bullet.svg") no-repeat left 0.45em / 11px 11px; }
.prose ul.oxide li { background-image: url("/assets/brand/bullet-oxide.svg"); }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.5em; }
.prose figure { margin: 2rem 0; }
.prose figure img { border-radius: var(--radius); border: 1px solid var(--galv); }
.prose figcaption { font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.6rem; }
blockquote {
  margin: 2rem 0; padding: 0.4rem 0 0.4rem 3.4rem; font-family: var(--font-display);
  font-weight: 550; font-size: 1.2rem; line-height: 1.45; color: var(--rail-deep);
  background: url("/assets/brand/blockquote.svg") no-repeat left 0.35em / 34px auto;
}
.callout {
  background: var(--shoal-wash); border-radius: var(--radius); padding: 1.2rem 1.35rem;
  margin: 1.8rem 0; border: 1px solid rgb(31 122 135 / 0.25);
}
.callout.oxide { background: #F3E9E6; border: 1px solid rgb(138 59 46 / 0.3); }
.callout p:last-child { margin-bottom: 0; }
.refs { border-top: 1px solid var(--galv); margin-top: 2.6rem; padding-top: 1.4rem; }
.refs h2 { font-size: 1.2rem; }
.refs ol { padding-left: 1.2rem; }
.refs li { margin-bottom: 0.8rem; font-size: 0.93rem; color: var(--ink-soft); }

/* two-column article + aside */
.article-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(2rem, 5vw, 3.6rem); align-items: start; }
.aside-card {
  background: var(--paper-raised); border-radius: var(--radius); padding: 1.35rem 1.3rem;
  border-bottom: 3px solid var(--antifoul); position: sticky; top: 130px;
}
.aside-card h3 { font-size: 1.05rem; }
.aside-card p { font-size: 0.93rem; color: var(--ink-soft); }
.aside-card .btn { width: 100%; text-align: center; margin-top: 0.4rem; }

/* ── area pages: fact ledger strip ─────────────────────────────────────── */
.fact-strip { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.6rem 0; }
.fact-chip {
  background: var(--paper-raised); border: 1px solid var(--galv); border-radius: 7px;
  padding: 0.55rem 0.9rem; font-size: 0.85rem; color: var(--ink-soft);
}
.fact-chip .ledger { display: block; font-size: 1.15rem; color: var(--ink); }

/* ── footer: the yard at dusk ──────────────────────────────────────────── */
.yard-foot {
  background: var(--rail-deep) url("/assets/brand/section-ink.webp"); background-size: 1280px auto;
  color: var(--galv); border-top: 4px solid var(--antifoul); position: relative; overflow: hidden;
}
.yard-foot::after {
  content: ""; position: absolute; right: -60px; bottom: -80px; width: 380px; height: 380px;
  background: url("/assets/brand/watermark-reversed.svg") no-repeat center / contain; pointer-events: none;
}
.yard-foot .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.3fr; gap: 2.2rem; padding-block: 3rem 1.6rem; }
.yard-foot img.foot-logo { width: 168px; margin-bottom: 0.9rem; }
.yard-foot h4 {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--shoal-bright); margin: 0 0 0.8rem;
}
.yard-foot ul { list-style: none; margin: 0; padding: 0; }
.yard-foot li { margin-bottom: 0.45rem; }
.yard-foot a { color: var(--gelcoat); text-decoration: none; font-size: 0.95rem; }
.yard-foot a:hover { color: var(--shoal-bright); }
.yard-foot p { font-size: 0.9rem; }
.foot-line {
  border-top: 1px solid rgb(185 192 194 / 0.25); position: relative; z-index: 1;
}
.foot-line .wrap {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  padding-block: 1rem 1.3rem; font-size: 0.8rem; color: var(--galv);
}
.foot-line a { color: var(--galv); }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .truths-grid, .services-grid { grid-template-columns: 1fr 1fr; }
  .article-cols { grid-template-columns: 1fr; }
  .aside-card { position: static; }
  .yard-foot .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .truths-grid, .services-grid, .run-list, .lead-form .row { grid-template-columns: 1fr; }
  .hero-paths { grid-template-columns: 1fr; }
  .yard-foot .wrap { grid-template-columns: 1fr; gap: 1.6rem; }
  .board-logo img { height: 44px; }
  .lead-result.ok { flex-direction: column; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION LAYER — added after the build. Additive only: nothing here changes the
   resting design, only how it behaves on interaction and scroll. Rationale in
   MOTION.md. Signature: "the waterline rises" — a shoal underline that lifts in
   under any link that carries you deeper, echoing the tide reaching its mark.
   Transform/opacity only; ~.14-.2s; crisp, never floaty.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 ── Ease the snapping hovers ──────────────────────────────────────────── */
/* Most :hover states here recolour with no transition, so they snap. Give the
   interactive text a short eased colour change. Buttons and cards already carry
   their own transitions, so they are left as authored. */
a { transition: color 150ms ease; }
.board-nav a { transition: color 150ms ease, border-color 150ms ease; }
.panel-link, .yard-foot a, .foot-line a, .crumbs a,
.aside-card a:not(.btn) { transition: color 150ms ease; }
.lead-form input[type="text"], .lead-form input[type="tel"], .lead-form input[type="email"],
.lead-form select, .lead-form textarea {
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
/* keyboard parity: focus gets the same steer hover gives, on the deeper paths */
.board-nav a:focus-visible { color: var(--shoal); }

/* 2 ── Signature: the waterline rises ────────────────────────────────────── */
/* A 2px shoal rule that scales in from the left under the "go deeper" links
   (truth cards, service board, the run sheet). Aqua is the site's interactivity
   contract and the waterline is its one drawn device, so the interaction IS the
   brand: touch a link and the tide comes up to the mark. Transform-only. */
.truth-more, .svc .svc-go, .run-list a {
  position: relative;
  width: max-content;
  max-width: 100%;
}
.truth-more::after, .svc .svc-go::after, .run-list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--shoal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms ease;
}
.truth-more:hover::after, .truth-more:focus-visible::after,
a.svc:hover .svc-go::after, a.svc:focus-visible .svc-go::after,
.run-list a:hover::after, .run-list a:focus-visible::after {
  transform: scaleX(1);
}

/* 3 ── Scroll-reveal ─────────────────────────────────────────────────────── */
/* The hidden-then-in state is applied by motion.js at runtime (class js-reveal),
   never authored at rest, so no-JS visitors and crawlers see everything and the
   fold never flashes. A gentle weighted rise, like a door settling on balance. */
.js-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 440ms ease, transform 440ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js-reveal.is-in { opacity: 1; transform: none; }

/* 4 ── The motion floor (non-negotiable) ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* if JS still armed anything, force it visible and settled */
  .js-reveal { opacity: 1 !important; transform: none !important; }
  .truth-more::after, .svc .svc-go::after, .run-list a::after { transition: none !important; }
}