/* Self-hosted fonts (was Google Fonts) — latin + latin-ext, variable woff2. */
@font-face{font-family:'Hanken Grotesk';font-style:italic;font-weight:300 800;font-display:swap;src:url('/assets/fonts/hanken-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:'Hanken Grotesk';font-style:italic;font-weight:300 800;font-display:swap;src:url('/assets/fonts/hanken-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:'Hanken Grotesk';font-style:normal;font-weight:300 800;font-display:swap;src:url('/assets/fonts/hanken-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:'Hanken Grotesk';font-style:normal;font-weight:300 800;font-display:swap;src:url('/assets/fonts/hanken-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;}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:300 800;font-display:swap;src:url('/assets/fonts/source-serif-4-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:'Source Serif 4';font-style:italic;font-weight:300 800;font-display:swap;src:url('/assets/fonts/source-serif-4-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:'Source Serif 4';font-style:normal;font-weight:300 800;font-display:swap;src:url('/assets/fonts/source-serif-4-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:'Source Serif 4';font-style:normal;font-weight:300 800;font-display:swap;src:url('/assets/fonts/source-serif-4-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;}
/* Quiet Side Garage Doors — Morisset. Evening on still water, from the bush shoreline.
   Tokens are the brand kit's, verbatim (brand-kit/brand-kit.md). */

:root {
  /* text */
  --ink:          oklch(25.1% 0.013 180);  /* #1B2422 dusk near-black — headings, body */
  --ink-soft:     oklch(41.9% 0.017 173);  /* #44504C secondary text, captions (AAA) */

  /* grounds */
  --paper:        oklch(95.3% 0.018 86);   /* #F5EFE2 paperbark page ground */
  --paper-shade:  oklch(91.2% 0.027 86);   /* #EAE1CE cards, alternating sections */

  /* brand */
  --primary:      oklch(34.7% 0.038 193);  /* #20403F dusk-water — book-a-repair CTA, links */
  --primary-deep: oklch(25.1% 0.026 187);  /* #122624 dark sections: hero, signature tool, footer */
  --accent:       oklch(52.1% 0.066 92);   /* #77683B casuarina bronze — >=18px/graphics on light */
  --accent-ink:   oklch(43.4% 0.059 93);   /* #5C5029 bronze as body-size TEXT on light */
  --accent-light: oklch(79.8% 0.064 90);   /* #CDBC8E warm glint on dark = what we found is good */
  --water-light:  oklch(80.7% 0.035 183);  /* #A8C8C2 cool glint on dark = links / where to go */

  /* support */
  --timber:       oklch(43.8% 0.065 64);   /* #6B4A2A oiled jetty hardwood — trim, never cladding */
  --steel:        oklch(65.8% 0.011 174);  /* #8B9491 dark-section secondary text + rules */
  --fault:        oklch(48.4% 0.098 42);   /* #8C4A30 worn-fixing rust — verdict stamp ONLY */
  --hairline:     oklch(85.9% 0.026 87);   /* #D8D0BE 1px rules on light grounds */

  --font-display: "Source Serif 4", "Georgia", serif;
  --font-body: "Hanken Grotesk", "Gill Sans", "Helvetica Neue", sans-serif;

  --measure: 66ch;
  --pad: clamp(1.1rem, 4vw, 2.5rem);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img, svg { max-width: 100%; height: auto; }
::placeholder { color: color-mix(in oklab, var(--ink-soft) 35%, transparent); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 640; line-height: 1.16; letter-spacing: -0.005em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 5.2vw, 3.3rem); font-weight: 600; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.15rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); }
p { margin: 0 0 1em; max-width: var(--measure); }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }
strong { font-weight: 600; }
figure { margin: 0; }
figcaption { font-size: 0.85rem; color: var(--ink-soft); padding-top: 0.55rem; }

/* tracked uppercase label — the "quiet scale" voice */
.lbl {
  font-family: var(--font-body); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 0.78rem; color: var(--accent-ink);
}
.on-dark .lbl, .lbl.on-dark { color: var(--accent-light); }

.num { font-variant-numeric: tabular-nums; }

/* the brand hr: coil feeding a level track */
hr.settle {
  border: 0; height: 32px; margin: 2.6rem auto;
  background: url("/assets/micro/divider.svg") no-repeat center / contain;
  max-width: 420px;
}
.on-dark hr.settle { background-image: url("/assets/micro/divider-reversed.svg"); }

/* coil bullets */
ul.coil { list-style: none; padding: 0; margin: 0 0 1.2em; max-width: var(--measure); }
ul.coil li { padding-left: 1.7em; position: relative; margin-bottom: 0.55em; }
ul.coil li::before {
  content: ""; position: absolute; left: 0; top: 0.38em; width: 1em; height: 1em;
  background: url("/assets/micro/bullet.svg") no-repeat center / contain;
}
.on-dark ul.coil li::before { background-image: url("/assets/micro/bullet-reversed.svg"); }

blockquote {
  margin: 1.8rem 0; padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 3px solid var(--accent); max-width: 56ch;
  font-family: var(--font-display); font-size: 1.15rem; font-style: italic; color: var(--ink);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font-family: var(--font-body); font-weight: 600;
  font-size: 0.95rem; letter-spacing: 0.015em; text-decoration: none;
  padding: 0.78rem 1.5rem; border-radius: 3px; border: 1.5px solid transparent;
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* urgent path — the single highest-contrast object per view */
.btn-repair { background: var(--primary); color: var(--paper); border-color: var(--primary); }
.btn-repair:hover { background: var(--primary-deep); border-color: var(--primary-deep); color: var(--paper); }
/* considered path — ruled outline */
.btn-quote { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-quote:hover { background: color-mix(in oklab, var(--primary) 8%, transparent); color: var(--primary); }
/* dark-ground variants */
.on-dark .btn-repair { background: var(--paper); color: var(--primary-deep); border-color: var(--paper); }
.on-dark .btn-repair:hover { background: var(--accent-light); border-color: var(--accent-light); color: var(--primary-deep); }
.on-dark .btn-quote { color: var(--water-light); border-color: var(--water-light); }
.on-dark .btn-quote:hover { background: color-mix(in oklab, var(--water-light) 12%, transparent); color: var(--water-light); }

/* ---------- masthead ---------- */
.patchline {
  background: var(--paper-shade); border-bottom: 1px solid var(--hairline);
  text-align: center; padding: 0.42rem var(--pad);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em;
  font-size: 0.68rem; color: var(--ink-soft);
}
.patchline .dot { color: var(--accent); }
header.mast {
  background: var(--paper); border-bottom: 1px solid var(--hairline);
  position: relative;
}
.mast-row {
  max-width: 1160px; margin: 0 auto; padding: 0.9rem var(--pad);
  display: flex; align-items: center; gap: 1.4rem;
}
.mast-logo img { display: block; height: 46px; width: auto; }
nav.mainnav { margin-left: auto; display: flex; align-items: center; gap: 1.35rem; }
nav.mainnav a {
  text-decoration: none; color: var(--ink); font-weight: 500; font-size: 0.95rem;
  padding: 0.2rem 0; border-bottom: 2px solid transparent;
}
nav.mainnav a:hover { color: var(--primary); }
nav.mainnav a.cta { margin-left: 0.4rem; color: var(--paper); border-bottom: 1.5px solid var(--primary); }
nav.mainnav a.cta:hover { color: var(--paper); }
/* active page underline via body data-page */
body[data-page="services"] nav a[href="/services/"],
body[data-page="areas"] nav a[href="/areas/"],
body[data-page="guides"] nav a[href="/guides/"],
body[data-page="about"] nav a[href="/about/"] { border-bottom-color: var(--accent); color: var(--primary); }

/* mobile nav: checkbox reveal — input, label and nav are true siblings of .mast-row */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
label.nav-burger { display: none; margin-left: auto; cursor: pointer; padding: 0.4rem; }
label.nav-burger span { display: block; width: 24px; height: 2.5px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
@media (max-width: 860px) {
  nav.mainnav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
    background: var(--primary-deep); flex-direction: column; align-items: flex-start;
    gap: 0; padding: 0.6rem 0 1.1rem; border-bottom: 3px solid var(--accent);
  }
  nav.mainnav a { color: var(--paper); width: 100%; padding: 0.7rem var(--pad); font-size: 1.05rem; border-bottom: 0; }
  nav.mainnav a:hover { color: var(--accent-light); }
  body[data-page] nav.mainnav a { border-bottom: 0; }
  nav.mainnav a.cta { margin: 0.6rem var(--pad) 0; width: auto; background: var(--paper); color: var(--primary-deep); border-color: var(--paper); padding: 0.78rem 1.5rem; }
  label.nav-burger { display: block; }
  .nav-toggle:checked ~ nav.mainnav { display: flex; }
  .nav-toggle:checked ~ label.nav-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle:checked ~ label.nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ label.nav-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .mast-logo img { height: 38px; }
}

/* ---------- sections ---------- */
.wrap { max-width: 1160px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.band { padding: clamp(2.6rem, 7vw, 4.6rem) 0; }
.band-shade { background: var(--paper-shade) url("/assets/textures/section-paperbark-ripple.webp") center / cover; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.on-dark {
  background: var(--primary-deep) url("/assets/textures/section-duskwater.webp") center / cover;
  color: var(--paper);
}
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--paper); }
.on-dark p { color: color-mix(in oklab, var(--paper) 92%, var(--steel)); }
.on-dark a { color: var(--water-light); }
.on-dark a:hover { color: var(--accent-light); }
.on-dark .muted { color: var(--steel); }
.muted { color: var(--ink-soft); }

/* the page hook: H1 orients (what+where), the hook keeps its line right below */
p.hook {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  max-width: 54ch;
  margin: -0.1em 0 0.8em;
}
.on-dark p.hook { color: color-mix(in oklab, var(--paper) 78%, var(--steel)); }

/* kicker + settle rule (three decaying bumps running flat) */
.kicker { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.1rem; }
.kicker svg { flex: 0 0 auto; }

/* framed photo — mounted print, bronze hairline */
.frame { position: relative; display: block; }
.frame img { display: block; width: 100%; border: 1px solid var(--accent); }
.frame::after {
  content: ""; position: absolute; inset: 10px -10px -10px 10px;
  border: 1px solid color-mix(in oklab, var(--accent) 55%, transparent);
  pointer-events: none; z-index: -1;
}
.on-dark .frame img { border-color: color-mix(in oklab, var(--accent-light) 65%, transparent); }
.on-dark .frame::after { border-color: color-mix(in oklab, var(--accent-light) 30%, transparent); }

/* ---------- hero ---------- */
.hero { padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2.8rem, 7vw, 5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.8rem, 5vw, 4rem); align-items: center; }
.hero .lede { font-size: 1.14rem; max-width: 54ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.7rem; }
.hero-foot { margin-top: 1.6rem; font-size: 0.86rem; color: var(--steel); max-width: 54ch; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid .frame { order: -1; max-width: 560px; }
}

/* ---------- world cards / sorter ---------- */
.worlds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2rem; }
@media (max-width: 860px) { .worlds { grid-template-columns: 1fr; } }
.world-card {
  background: var(--paper); color: var(--ink); border: 1px solid var(--hairline);
  border-top: 3px solid var(--accent); padding: 1.4rem 1.3rem 1.2rem; text-align: left;
  font: inherit; cursor: pointer; border-radius: 3px; display: flex; flex-direction: column; gap: 0.5rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.world-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgb(4 14 13 / 0.35); }
.world-card img { width: 52px; height: 52px; }
.world-card h3 { margin: 0.2rem 0 0; }
.world-card p { font-size: 0.94rem; color: var(--ink-soft); margin: 0; }
.world-card .go { margin-top: auto; padding-top: 0.7rem; font-weight: 600; font-size: 0.88rem; color: var(--primary); }

.sorter-panel { max-width: 760px; margin: 0 auto; }
.q-group { margin-top: 1.6rem; }
.q-group .lbl { display: block; margin-bottom: 0.7rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chips label {
  border: 1.5px solid var(--steel); color: var(--paper); border-radius: 999px;
  padding: 0.5rem 1.05rem; cursor: pointer; font-size: 0.95rem; font-weight: 500;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label:hover { border-color: var(--water-light); }
.chips label.on { background: var(--paper); color: var(--primary-deep); border-color: var(--paper); font-weight: 600; }
.sorter-back { background: none; border: 0; color: var(--water-light); font: inherit; font-size: 0.9rem; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.sorter-back:hover { color: var(--accent-light); }

/* verdict docket — a written finding on paperbark */
.docket {
  background: var(--paper); color: var(--ink); border-radius: 3px; padding: 1.7rem 1.6rem 1.5rem;
  border-left: 4px solid var(--accent); margin-top: 1.8rem; position: relative;
  background-image: url("/assets/textures/watermark.svg"); background-repeat: no-repeat;
  background-position: right -40px bottom -60px; background-size: 260px;
}
.docket .row { padding: 0.85rem 0; border-bottom: 1px solid var(--hairline); }
.docket .row:last-child { border-bottom: 0; }
.docket .lbl { display: block; margin-bottom: 0.3rem; }
.docket p { margin: 0; font-size: 0.99rem; }
.stamp {
  position: absolute; top: 1.15rem; right: 1.2rem; color: var(--fault);
  border: 2px solid var(--fault); border-radius: 2px; padding: 0.12rem 0.5rem;
  font-weight: 600; letter-spacing: 0.1em; font-size: 0.75rem; text-transform: uppercase;
  transform: rotate(3deg);
}
.docket .next-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.9rem; }

/* ---------- service ledger ---------- */
.ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.1rem; margin: 2rem 0; }
.ledger-card {
  background: var(--paper); border: 1px solid var(--hairline); border-radius: 3px;
  padding: 1.5rem 1.4rem 1.3rem; display: flex; flex-direction: column; gap: 0.55rem;
}
.band-shade .ledger-card { box-shadow: 0 1px 0 var(--hairline); }
.ledger-card img { width: 54px; height: 54px; }
.ledger-card h3 { margin: 0.4rem 0 0; font-size: 1.22rem; }
.ledger-card p { font-size: 0.95rem; margin: 0; color: var(--ink-soft); }
.ledger-card .go { margin-top: auto; padding-top: 0.8rem; font-weight: 600; font-size: 0.9rem; }

/* findings ledger blocks (services page) */
.finding { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 1.3rem; padding: 2rem 0; border-top: 1px solid var(--hairline); }
.finding:last-of-type { border-bottom: 1px solid var(--hairline); }
.finding img { width: 56px; height: 56px; margin-top: 0.3rem; }
.finding h3 { margin-bottom: 0.35em; }
.finding .safety { font-size: 0.92rem; color: var(--accent-ink); border-left: 3px solid var(--accent); padding-left: 0.85rem; margin: 0.9rem 0; max-width: 60ch; }
.finding .go { font-weight: 600; }
@media (max-width: 640px) { .finding { grid-template-columns: 1fr; gap: 0.5rem; } }

/* ---------- distance board ---------- */
.board { margin: 2.2rem 0; }
.board-row {
  display: grid; grid-template-columns: minmax(110px, 200px) minmax(0, 1fr) 84px;
  gap: 1rem; align-items: center; padding: 0.68rem 0; border-bottom: 1px solid var(--hairline);
}
.board-row:first-child { border-top: 1px solid var(--hairline); }
.board-row .sub { font-weight: 500; }
.board-row .sub a { text-decoration: none; }
.board-row .sub a:hover { text-decoration: underline; }
.board-track { position: relative; height: 14px; }
.board-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--hairline); }
.board-track i {
  position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); transform: translate(-50%, -50%);
}
.board-row .mins { text-align: right; font-size: 0.95rem; color: var(--ink-soft); }
.board-row .mins b { color: var(--ink); font-weight: 600; }
.board-method { font-size: 0.84rem; color: var(--ink-soft); margin-top: 0.7rem; }
.board-home .board-track i { background: var(--primary); }
@media (max-width: 640px) {
  .board-row { grid-template-columns: minmax(90px, 1fr) 84px; }
  .board-track { display: none; }
}

/* ---------- article / guide layout ---------- */
.article { max-width: 720px; }
.article .lede { font-size: 1.16rem; color: var(--ink-soft); max-width: 58ch; }
.pagehead { padding: clamp(2.4rem, 6vw, 3.8rem) 0 clamp(1.6rem, 4vw, 2.6rem); }
.pagehead .crumb { font-size: 0.85rem; margin-bottom: 1rem; }
.pagehead .crumb a { text-decoration: none; color: var(--ink-soft); }
.pagehead .crumb a:hover { color: var(--primary); text-decoration: underline; }

/* sound index (noisy-door guide) */
.sound { border-top: 1px solid var(--hairline); padding: 1.9rem 0; }
.sound:last-of-type { border-bottom: 1px solid var(--hairline); }
.sound h3 { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.sound h3 .points { font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-ink); }
.sound svg.wave { display: block; margin: 0.3rem 0 0.9rem; }

/* references block */
.refs { background: var(--paper-shade); border: 1px solid var(--hairline); border-radius: 3px; padding: 1.4rem 1.5rem; margin: 2.4rem 0 0; }
.refs h2 { font-size: 1.15rem; }
.refs ul { list-style: none; margin: 0; padding: 0; }
.refs li { padding: 0.5rem 0; border-top: 1px solid var(--hairline); font-size: 0.92rem; color: var(--ink-soft); }
.refs li:first-of-type { border-top: 0; }

/* two-col with aside */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.8rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ---------- enquiry form ---------- */
.enq-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .enq-grid { grid-template-columns: 1fr; } }
form.enquiry { display: grid; gap: 1.05rem; }
form.enquiry .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
@media (max-width: 560px) { form.enquiry .duo { grid-template-columns: 1fr; } }
form.enquiry label.field { display: block; }
form.enquiry label.field span { display: block; font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 0.35rem; }
form.enquiry input, form.enquiry select, form.enquiry textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid color-mix(in oklab, var(--ink-soft) 50%, var(--hairline));
  border-radius: 3px; padding: 0.7rem 0.85rem;
}
form.enquiry input:focus, form.enquiry select:focus, form.enquiry textarea:focus {
  outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary);
}
form.enquiry textarea { min-height: 130px; resize: vertical; }
form.enquiry input[type="file"] { padding: 0.55rem 0.85rem; background: var(--paper-shade); cursor: pointer; }
form.enquiry input[type="file"]::file-selector-button {
  font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--ink);
  background: var(--paper); border: 1px solid color-mix(in oklab, var(--ink-soft) 50%, var(--hairline));
  border-radius: 3px; padding: 0.35rem 0.8rem; margin-right: 0.8rem; cursor: pointer;
}
form.enquiry label.field span.field-hint {
  font-weight: 400; font-size: 0.82rem; text-transform: none; letter-spacing: normal;
  color: var(--ink-soft); margin: 0.4rem 0 0;
}
.form-note { font-size: 0.86rem; color: var(--ink-soft); }
.lead-result { border-radius: 3px; padding: 1.3rem 1.4rem; margin-top: 0.4rem; }
.lead-result.ok { background: var(--paper-shade); border: 1px solid var(--accent); text-align: center; }
.lead-result.ok img { width: 220px; margin: 0 auto 0.6rem; display: block; }
.lead-result.err { background: color-mix(in oklab, var(--fault) 9%, var(--paper)); border: 1px solid var(--fault); color: var(--ink); }
.next-steps { counter-reset: step; list-style: none; margin: 1.2rem 0 0; padding: 0; }
.next-steps li { counter-increment: step; position: relative; padding: 0 0 1.1rem 2.6rem; }
.next-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0.05rem;
  width: 1.7rem; height: 1.7rem; border: 1.5px solid var(--accent); border-radius: 50%;
  display: grid; place-items: center; font-weight: 600; font-size: 0.85rem; color: var(--accent-ink);
}

/* ---------- enquiry band (site-wide close) ---------- */
.enq-band { text-align: center; }
.enq-band h2 { max-width: 26ch; margin-left: auto; margin-right: auto; }
.enq-band p { margin-left: auto; margin-right: auto; }
.enq-band .hero-ctas { justify-content: center; }

/* ---------- footer ---------- */
footer.site {
  background: var(--primary-deep) url("/assets/textures/section-duskwater.webp") center / cover;
  color: var(--steel); padding: 3.2rem 0 2.2rem; border-top: 3px solid var(--accent);
}
footer.site .cols { display: grid; grid-template-columns: minmax(200px, 1.3fr) repeat(3, minmax(120px, 1fr)); gap: 2rem; }
@media (max-width: 860px) { footer.site .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { footer.site .cols { grid-template-columns: 1fr; } }
footer.site img.foot-logo { width: 168px; height: auto; margin-bottom: 0.9rem; }
footer.site h4 { color: var(--accent-light); font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; margin: 0 0 0.7rem; }
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { margin-bottom: 0.45rem; font-size: 0.92rem; }
footer.site a { color: color-mix(in oklab, var(--paper) 85%, var(--steel)); text-decoration: none; }
footer.site a:hover { color: var(--water-light); text-decoration: underline; }
footer.site .foot-note { border-top: 1px solid color-mix(in oklab, var(--steel) 35%, transparent); margin-top: 2.4rem; padding-top: 1.4rem; font-size: 0.82rem; color: var(--steel); }
footer.site .foot-note p { color: var(--steel); max-width: none; margin-bottom: 0.4rem; }

/* ---------- light islands on dark grounds ----------
   .world-card and .docket are paperbark surfaces that can sit INSIDE .on-dark
   bands; re-assert the light-ground palette so .on-dark's reversed text rules
   never bleed into them. */
a.world-card, .world-card { text-decoration: none; }
.on-dark .world-card h3, .world-card h3 { color: var(--ink); }
.on-dark .world-card p, .world-card p { color: var(--ink-soft); }
.on-dark .world-card .go, .world-card .go { color: var(--primary); }
.on-dark .docket h3, .docket h3 { color: var(--ink); }
.on-dark .docket p, .docket p { color: var(--ink); }
.on-dark .docket .lbl, .docket .lbl { color: var(--accent-ink); }
.on-dark .docket a { color: var(--primary); }
.on-dark .docket .btn-repair, .docket .btn-repair { background: var(--primary); color: var(--paper); border-color: var(--primary); }
.on-dark .docket .btn-repair:hover, .docket .btn-repair:hover { background: var(--primary-deep); border-color: var(--primary-deep); color: var(--paper); }

/* ============================================================================
   MOTION LAYER — additive only. Nothing here changes how the page looks at
   REST; it only governs how it BEHAVES on interaction and on scroll. The
   personality is a well-balanced door on its counterbalance: a quick, weighted
   settle to level. Nothing floaty, nothing bouncy. See MOTION.md.
   ============================================================================ */
:root { --settle: cubic-bezier(0.2, 0.7, 0.2, 1); }

/* 1) EASE THE SNAPPING HOVERS — a short eased transition on the properties that
   actually change, so no hover or focus jumps. */
a { transition: color 0.15s ease; }
nav.mainnav a { transition: color 0.15s ease; }
.go, .board-row .sub a, footer.site a, .pagehead .crumb a { transition: color 0.15s ease; }
.ledger-card { transition: transform 0.16s var(--settle), box-shadow 0.16s var(--settle); }
.finding { transition: transform 0.16s var(--settle); }
.mast-logo img { transition: opacity 0.15s ease; }
.mast-logo:hover img { opacity: 0.86; }
/* a card of content that carries a "next" link earns a gentle, weighted lift */
.ledger-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgb(4 14 13 / 0.12); }
/* the settle curve suits the world-card lift better than plain ease */
.world-card { transition: transform 0.16s var(--settle), box-shadow 0.16s var(--settle); }
/* the CTAs press with intent — a small tactile give, no bounce */
.btn:active { transform: translateY(1px); }
.btn { transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s var(--settle); }

/* 2) SIGNATURE — "runs level". A hairline runs in from the left along the
   baseline and settles flush, the way a well-set door finds its level on the
   track. It rides currentColor, so it reads on both grounds, and answers the
   node's own coil-feeding-a-level-track divider. It marks the eye's next step
   toward the enquiry: nav items and every "->" go-link. */
nav.mainnav a, .go, .board-row .sub a { position: relative; }
nav.mainnav a::after, .go::after, .board-row .sub a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform 0.18s var(--settle); pointer-events: none;
}
nav.mainnav a:hover::after, nav.mainnav a:focus-visible::after,
.go:hover::after, .go:focus-visible::after,
.board-row .sub a:hover::after, .board-row .sub a:focus-visible::after,
.world-card:hover .go::after, .world-card:focus-visible .go::after {
  transform: scaleX(1);
}
/* the active-page nav item already carries a resting rule, so hold its track set */
body[data-page="services"] nav a[href="/services/"]::after,
body[data-page="areas"] nav a[href="/areas/"]::after,
body[data-page="guides"] nav a[href="/guides/"]::after,
body[data-page="about"] nav a[href="/about/"]::after { transform: scaleX(1); }

/* 4) FOCUS-VISIBLE PARITY — keyboard users get the same affordance as hover.
   The global form-field focus outline is left exactly as authored. */
.btn:focus-visible, .go:focus-visible, nav.mainnav a:focus-visible,
.board-row .sub a:focus-visible, .world-card:focus-visible, .sorter-back:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px;
}
.on-dark .btn:focus-visible, .on-dark .go:focus-visible,
.on-dark .sorter-back:focus-visible { outline-color: var(--accent-light); }

/* 3) SCROLL REVEAL — sections settle up into view as the reader arrives. The
   hidden state is added at RUNTIME by motion.js and ONLY to elements below the
   fold, so no-JS visitors, crawlers, and everything above the fold rest fully
   visible. Never author reveal-init in the markup. */
.reveal-init { opacity: 0; transform: translateY(14px); }
.reveal-in {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.55s var(--settle);
}

/* THE MOTION FLOOR — reduced-motion neutralises every transition, the press,
   the reveal and smooth scroll. motion.js also declines to hide anything. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  .reveal-init { opacity: 1 !important; transform: none !important; }
  .btn:active { transform: none; }
}

/* ---------- misc ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 4vw, 3rem); align-items: center; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }
.tick-table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.tick-table th { text-align: left; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; color: var(--ink-soft); padding: 0.5rem 0.8rem 0.5rem 0; border-bottom: 1.5px solid var(--ink-soft); }
.tick-table td { padding: 0.62rem 0.8rem 0.62rem 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.spot { display: block; margin: 0 auto; }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }