/* Self-hosted fonts (was Google Fonts) — latin + latin-ext, variable woff2. */
@font-face{font-family:'Chivo';font-style:italic;font-weight:100 900;font-display:swap;src:url('/assets/fonts/chivo-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:'Chivo';font-style:italic;font-weight:100 900;font-display:swap;src:url('/assets/fonts/chivo-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:'Chivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/chivo-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:'Chivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/chivo-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:'Work Sans';font-style:italic;font-weight:100 900;font-display:swap;src:url('/assets/fonts/work-sans-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:'Work Sans';font-style:italic;font-weight:100 900;font-display:swap;src:url('/assets/fonts/work-sans-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:'Work Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/work-sans-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:'Work Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/work-sans-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;}
/* Bord & Pillar Garage Doors — Kurri Kurri NSW
   The assessment register: coal ink as line and letter, miner's-lamp brass as the
   single point of trust, on the creams of the 1902 grid. Tokens + rules are the
   decided brand kit (brand-kit/brand-kit.md) — don't re-derive. */

:root {
  --ink:         oklch(21.5% 0.009 75);   /* #1c1915 */
  --ink-soft:    oklch(43.1% 0.023 80);   /* #574f42 */
  --paper:       oklch(97.7% 0.010 87);   /* #faf7f0 */
  --paper-cream: oklch(93.7% 0.025 83);   /* #f2e9d8 */
  --brass:       oklch(63.7% 0.118 86);   /* #ab8524 — CTA surface, ink text only */
  --brass-ink:   oklch(46.6% 0.087 88);   /* #6e5613 — brass as text on light */
  --lamp:        oklch(75.9% 0.127 87);   /* #d3ab45 — dark grounds only */
  --seam:        oklch(23.0% 0.017 79);   /* #211c14 — bounded dark bands */
  --gum:         oklch(48.1% 0.028 126);  /* #5a6150 — the keep-tick, quiet only */
  --hairline:    oklch(87.5% 0.025 86);   /* #ddd5c4 */
  --font-display: "Chivo", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body: "Work Sans", "Segoe UI", "Helvetica Neue", sans-serif;
  --pad: clamp(1.1rem, 4vw, 2rem);
  --measure: 62ch;
}

/* ── base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem; /* 17px — older readers in original cottages */
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; } /* kernel: never let a display rule defeat hidden */
img { max-width: 100%; height: auto; display: block; }
::placeholder { color: color-mix(in oklch, var(--ink-soft) 32%, transparent); }
::selection { background: var(--brass); color: var(--ink); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 0.6em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.15rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); font-weight: 700; letter-spacing: -0.005em; }
p { margin: 0 0 1em; max-width: var(--measure); }
strong { font-weight: 600; }
.num, td.num, .vrow dd { font-variant-numeric: tabular-nums; }

a { color: var(--brass-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brass-ink); outline-offset: 2px;
}

/* the seam divider = the site's hr (kit micro-asset) */
hr { border: 0; height: 12px; margin: 2.6rem auto; background: url(/assets/micro/divider.svg) center / auto 12px no-repeat; }
.on-seam hr { background-image: url(/assets/micro/divider-reversed.svg); }

ul.tally { list-style: none; padding-left: 0; }
ul.tally li { padding-left: 1.35rem; position: relative; margin-bottom: 0.45rem; max-width: var(--measure); }
ul.tally li::before { content: ""; position: absolute; left: 0; top: 0.52em; width: 9px; height: 9px; background: url(/assets/micro/bullet.svg) center / contain no-repeat; }

blockquote {
  margin: 2rem 0; padding: 0 0 0 3.2rem; position: relative; max-width: var(--measure);
  font-size: 1.15rem; line-height: 1.55;
}
blockquote::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 38px; height: 25px; background: url(/assets/micro/quote-mark.svg) center / contain no-repeat; }
.on-seam blockquote::before { background-image: url(/assets/micro/quote-mark-reversed.svg); }

.eyebrow {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.78rem; color: var(--ink-soft); margin: 0 0 0.9rem;
}
.on-seam .eyebrow { color: var(--lamp); }
.lede { font-size: 1.18rem; line-height: 1.6; color: var(--ink-soft); max-width: 56ch; }
.on-seam .lede { color: oklch(88% 0.02 85); }

/* the page hook: the H1 orients (what + where); the node's own line keeps its
   place right below it — display type, quieter, no extra brass budget. */
.hook {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.55rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  max-width: 34ch;
  margin: 0 0 0.7rem;
}
.on-seam .hook { color: oklch(78% 0.02 85); }

.wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--pad); }
.wrap-narrow { max-width: 820px; margin-inline: auto; padding-inline: var(--pad); }
section { padding-block: clamp(3rem, 7vw, 5rem); }

/* ── grounds ──────────────────────────────────────────────────────────────── */
.on-cream { background: var(--paper-cream) url(/assets/textures/workings-grid-light.svg); }
.on-seam {
  background: var(--seam) url(/assets/textures/workings-grid-dark.svg);
  color: var(--paper);
}
.on-seam h1, .on-seam h2, .on-seam h3 { color: var(--paper); }
.on-seam a { color: var(--lamp); }
.on-seam a:hover { color: var(--paper); }
.on-paper-tex { background: var(--paper) url(/assets/textures/workings-grid-light.svg); }
.on-survey { background: var(--paper-cream) url(/assets/textures/survey-paper.webp); background-size: 720px auto; }

/* ── buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: 0.78rem 1.5rem; text-decoration: none; border: 2px solid transparent;
  cursor: pointer; line-height: 1.25; text-align: center;
}
.btn-brass { background: var(--brass); color: var(--ink); border-color: var(--brass); }
.btn-brass:hover { background: oklch(58% 0.118 86); border-color: oklch(58% 0.118 86); color: var(--ink); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
/* re-assert ink text on the brass CTA inside seam sections — the blanket
   `.on-seam a { color: --lamp }` link rule otherwise wins over .btn-brass and
   drops the primary CTA to light-brass-on-brass (~2:1). Brass CTA = ink text, always. */
.on-seam .btn-brass, .on-seam .btn-brass:hover { color: var(--ink); }
.on-seam .btn-line { color: var(--paper); border-color: var(--paper); }
.on-seam .btn-line:hover { background: var(--paper); color: var(--ink); }
.cta-pair { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; margin-top: 1.6rem; }
.cta-note { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.7rem; }
.on-seam .cta-note { color: oklch(75% 0.02 85); }

/* ── header: the survey title-block ──────────────────────────────────────── */
.tb-meta {
  border-bottom: 1px solid var(--hairline); background: var(--paper);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.66rem; color: var(--ink-soft);
}
.tb-meta .wrap { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.42rem; }
.tb-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header.tb { background: var(--paper); border-bottom: 2px solid var(--ink); position: relative; }
.tb-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding-block: 0.95rem; }
.tb-logo { display: block; flex: 0 0 auto; }
.tb-logo img { height: 46px; width: auto; }
nav.tb-nav { display: flex; align-items: center; gap: 1.5rem; }
nav.tb-nav a.nl {
  font-weight: 600; font-size: 0.98rem; color: var(--ink); text-decoration: none;
  padding: 0.2rem 0; border-bottom: 2px solid transparent;
}
nav.tb-nav a.nl:hover { border-bottom-color: var(--brass); }
/* active state via body data-page */
body[data-page="services"] a.nl[href="/services/"],
body[data-page="areas"] a.nl[href="/areas/"],
body[data-page="guides"] a.nl[href="/guides/"],
body[data-page="about"] a.nl[href="/about"] { border-bottom-color: var(--ink); }
nav.tb-nav .btn { padding: 0.55rem 1.1rem; font-size: 0.94rem; }
.nav-toggle-box { display: none; }
label.nav-toggle { display: none; }

@media (max-width: 880px) {
  .tb-logo img { height: 38px; }
  /* keyboard path: the box is sr-only (not display:none) so Tab + Space toggles the menu */
  .nav-toggle-box { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav-toggle-box:focus-visible + label.nav-toggle { outline: 2px solid var(--ink); outline-offset: 2px; }
  label.nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; cursor: pointer; border: 1px solid var(--hairline);
  }
  label.nav-toggle span { display: block; height: 2px; background: var(--ink); }
  nav.tb-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 2px solid var(--ink);
    box-shadow: 0 14px 24px oklch(21.5% 0.009 75 / 0.12);
  }
  .nav-toggle-box:checked ~ nav.tb-nav { display: flex; }
  nav.tb-nav a.nl { padding: 0.9rem var(--pad); border-bottom: 1px solid var(--hairline); }
  nav.tb-nav a.nl:hover { border-bottom-color: var(--hairline); background: var(--paper-cream); }
  nav.tb-nav .btn { margin: 0.9rem var(--pad) 1.1rem; }
  .tb-meta span.tb-meta-r { display: none; }
}

/* ── hero ─────────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(3rem, 6.5vw, 5.5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; }
.hero h1 { max-width: none; }
.hero .verdict-line {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.8rem; color: var(--lamp);
  display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.hero .verdict-line i { font-style: normal; color: oklch(60% 0.02 85); }
figure.frame { margin: 0; position: relative; }
figure.frame img { border: 1px solid oklch(35% 0.03 82); }
figure.frame::after {
  content: ""; position: absolute; inset: 10px -10px -10px 10px;
  border: 1px solid var(--brass); z-index: -1;
}
figure.frame figcaption { font-size: 0.82rem; color: oklch(72% 0.02 85); margin-top: 0.9rem; }
.on-paper figure.frame figcaption, section:not(.on-seam) figure.frame figcaption { color: var(--ink-soft); }
section:not(.on-seam) figure.frame img { border-color: var(--hairline); }

/* ── verdict rows: the typographic signature ─────────────────────────────── */
.vsheet { border-top: 2px solid var(--ink); }
.vrow {
  display: grid; grid-template-columns: minmax(9rem, 2fr) minmax(0, 5fr) minmax(0, 4fr);
  gap: 0.6rem 1.6rem; padding: 1.05rem 0; border-bottom: 1px solid var(--hairline);
  margin: 0; align-items: baseline;
}
.vrow dt, .vrow .vt {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.8rem; color: var(--ink); padding-top: 0.15em;
}
.vrow dd, .vrow .vd { margin: 0; }
.vrow dd p, .vrow .vd p { margin: 0; }
.vrow .call { font-weight: 600; }
.vrow .call .keep { color: var(--gum); }
.vhead {
  display: grid; grid-template-columns: minmax(9rem, 2fr) minmax(0, 5fr) minmax(0, 4fr);
  gap: 0.6rem 1.6rem; padding: 0.5rem 0 0.55rem;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.68rem; color: var(--ink-soft);
  border-bottom: 1px solid var(--hairline);
}
.tick-keep { color: var(--gum); font-weight: 700; }
.strike-go { text-decoration: line-through; text-decoration-thickness: 1.5px; }
@media (max-width: 720px) {
  .vhead { display: none; }
  .vrow { grid-template-columns: 1fr; gap: 0.28rem; padding: 0.95rem 0; }
  .vrow dt { font-size: 0.74rem; }
}

/* ── service lanes ────────────────────────────────────────────────────────── */
.lane { border: 1px solid var(--hairline); background: var(--paper); padding: clamp(1.3rem, 3vw, 2.2rem); }
.on-cream .lane { box-shadow: 0 1px 0 oklch(21.5% 0.009 75 / 0.05); }
.lane + .lane { margin-top: 1.6rem; }
.lane-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.lane-head img { width: 52px; height: 52px; flex: 0 0 auto; }
.lane-head h3, .lane-head h2 { margin: 0; }
.lane-kicker { font-size: 0.85rem; color: var(--ink-soft); margin: 0.15rem 0 0; }

/* digest rows on home */
.digest a.vrow { text-decoration: none; color: inherit; }
.digest a.vrow:hover { background: oklch(93.7% 0.025 83 / 0.55); }
.digest a.vrow .call { color: var(--brass-ink); }
.digest a.vrow:hover .call { color: var(--ink); }

/* ── two populations (home) ───────────────────────────────────────────────── */
.pops { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3vw, 2.4rem); }
.pop { background: var(--paper); border: 1px solid var(--hairline); display: flex; flex-direction: column; }
.pop img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-bottom: 1px solid var(--hairline); }
.pop-body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.pop-body p { flex: 1; }
.pop .eyebrow { margin-bottom: 0.5rem; }
.pop .btn { align-self: flex-start; margin-top: 1rem; }
@media (max-width: 760px) { .pops { grid-template-columns: 1fr; } }

/* ── the Reading (signature tool) ─────────────────────────────────────────── */
.reading-panel { border: 1px solid var(--hairline); border-top: 3px solid var(--ink); background: var(--paper-cream) url(/assets/textures/survey-paper.webp); background-size: 720px auto; padding: clamp(1.4rem, 3.5vw, 2.6rem); }
.reading-step { margin-bottom: 1.7rem; }
.reading-step .rlabel {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.72rem; color: var(--ink-soft); margin-bottom: 0.7rem;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.chip {
  font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; line-height: 1.3;
  padding: 0.55rem 0.95rem; background: var(--paper); border: 1px solid var(--ink);
  color: var(--ink); cursor: pointer;
}
.chip:hover { background: var(--paper-cream); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.rsheet { margin-top: 2rem; }
.rsheet-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  border-bottom: 2px solid var(--ink); padding-bottom: 0.5rem; margin-bottom: 0;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.72rem; color: var(--ink);
}
.rsafety {
  background: var(--seam) url(/assets/textures/workings-grid-dark.svg); color: var(--paper);
  padding: 1.1rem 1.3rem; margin-top: 1.4rem; display: flex; gap: 0.9rem; align-items: flex-start;
}
.rsafety img { width: 40px; height: 40px; flex: 0 0 auto; margin-top: 0.15rem; }
.rsafety p { margin: 0; font-size: 0.98rem; }
.rsafety strong { color: var(--lamp); font-weight: 600; }
.rfoot { font-size: 0.88rem; color: var(--ink-soft); margin-top: 1.3rem; max-width: none; }
.rcta { margin-top: 1.4rem; display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* ── safety band ──────────────────────────────────────────────────────────── */
.safety-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
.safety-items { border-top: 1px solid oklch(40% 0.03 82); }
.safety-items .vrow { grid-template-columns: minmax(8rem, 1fr) 2fr; border-bottom-color: oklch(40% 0.03 82); }
.safety-items .vrow dt { color: var(--lamp); }
@media (max-width: 820px) { .safety-grid { grid-template-columns: 1fr; } }

/* ── areas: the workings plan ─────────────────────────────────────────────── */
.plan-wrap { border: 1px solid var(--hairline); background: var(--paper-cream) url(/assets/textures/survey-paper.webp); background-size: 720px auto; padding: clamp(1rem, 3vw, 2rem); }
.plan-wrap svg { width: 100%; height: auto; display: block; }
.plan-cell { cursor: pointer; text-decoration: none; }
.plan-wrap a { text-decoration: none; }
.plan-cell rect { fill: oklch(21.5% 0.009 75 / 0.06); stroke: var(--ink); stroke-width: 1; transition: fill 120ms; }
.plan-cell:hover rect, .plan-cell:focus rect { fill: oklch(21.5% 0.009 75 / 0.16); }
.plan-cell.is-kept rect { fill: var(--brass); stroke: var(--ink); }
.plan-cell text { fill: var(--ink); }
.plan-cell .pc-name { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.plan-cell .pc-meta { font-family: var(--font-body); font-size: 11.5px; font-variant-numeric: tabular-nums; fill: var(--ink-soft); }
.plan-cell.is-kept .pc-meta { fill: oklch(30% 0.04 82); }
.plan-caption { font-size: 0.88rem; color: var(--ink-soft); margin-top: 1rem; max-width: none; }

table.register { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
table.register caption { text-align: left; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: var(--ink-soft); padding-bottom: 0.6rem; }
table.register th { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; text-align: left; color: var(--ink-soft); border-bottom: 2px solid var(--ink); padding: 0.5rem 0.9rem 0.5rem 0; }
table.register td { border-bottom: 1px solid var(--hairline); padding: 0.68rem 0.9rem 0.68rem 0; vertical-align: top; }
table.register td.num, table.register th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }

/* ── figures + photo strips ───────────────────────────────────────────────── */
.photo-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-block: 2rem; }
.photo-duo figure { margin: 0; }
.photo-duo img { border: 1px solid var(--hairline); width: 100%; }
.photo-duo figcaption, figure.plain figcaption { font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.6rem; }
figure.plain { margin: 2rem 0; }
figure.plain img { border: 1px solid var(--hairline); }
@media (max-width: 640px) { .photo-duo { grid-template-columns: 1fr; } }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem 2.2rem 1.05rem 0; position: relative;
  font-weight: 600; font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 11px; height: 11px;
  transform: translateY(-50%); background: url(/assets/micro/bullet.svg) center / contain no-repeat;
  transition: transform 140ms;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .faq-a { padding: 0 0 1.2rem; }
.faq .faq-a p { margin-bottom: 0.6em; }

/* ── enquiry form ─────────────────────────────────────────────────────────── */
form.assessment { border: 1px solid var(--hairline); border-top: 3px solid var(--ink); background: var(--paper); padding: clamp(1.4rem, 3.5vw, 2.4rem); }
.f-row { margin-bottom: 1.25rem; }
.f-row label {
  display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; font-size: 0.72rem; color: var(--ink); margin-bottom: 0.45rem;
}
.f-row label .opt { color: var(--ink-soft); font-weight: 700; }
.f-row input, .f-row select, .f-row textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--ink-soft); padding: 0.7rem 0.85rem;
  border-radius: 0;
}
.f-row select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231c1915' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.4rem; }
.f-row textarea { min-height: 7.5rem; resize: vertical; }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; }
@media (max-width: 640px) { .f-grid { grid-template-columns: 1fr; } }
.f-fine { font-size: 0.85rem; color: var(--ink-soft); }
.lead-result { margin-top: 1.3rem; padding: 1.2rem 1.4rem; }
.lead-result.ok { border: 1px solid var(--gum); display: flex; gap: 1.1rem; align-items: center; }
.lead-result.ok img { width: 64px; height: 64px; flex: 0 0 auto; }
.lead-result.ok p { margin: 0; }
.lead-result.err { border: 1px solid var(--brass-ink); color: var(--ink); }
.next-steps .vrow { grid-template-columns: minmax(7rem, 1fr) 4fr; }

/* ── article (guides) ─────────────────────────────────────────────────────── */
article.guide h2 { margin-top: 2.4rem; }
article.guide h3 { margin-top: 1.8rem; }
.refs { border-top: 2px solid var(--ink); padding-top: 1.2rem; font-size: 0.92rem; }
.refs li { margin-bottom: 0.7rem; }
.deflist dt { font-family: var(--font-display); font-weight: 700; margin-top: 1.1rem; }
.deflist dd { margin: 0.2rem 0 0; max-width: var(--measure); }

/* a verdict sheet living inside a lane's split column: stack rows (3 columns can't breathe at half width) */
.lane .split .vrow { grid-template-columns: 1fr; gap: 0.3rem; padding: 0.95rem 0; }
.split > div > .vsheet:not(.next-steps) .vrow { grid-template-columns: 1fr; gap: 0.3rem; padding: 0.95rem 0; }

/* card grid for guide/area indexes */
.index-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.4rem; }
.index-cards a.icard {
  display: flex; flex-direction: column; gap: 0.4rem; text-decoration: none; color: inherit;
  border: 1px solid var(--hairline); background: var(--paper); padding: 1.4rem 1.5rem 1.5rem;
  border-top: 3px solid var(--ink);
}
.index-cards a.icard:hover { border-top-color: var(--brass); background: var(--paper-cream); }
.index-cards a.icard h3 { margin: 0; }
.index-cards a.icard p { margin: 0; font-size: 0.96rem; color: var(--ink-soft); }
.index-cards a.icard .go { font-weight: 600; color: var(--brass-ink); font-size: 0.92rem; margin-top: 0.5rem; }

/* ── enquiry CTA band (partial) ───────────────────────────────────────────── */
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.cta-band h2 { margin-bottom: 0.4rem; }
.cta-band .cta-pair { justify-content: flex-start; }
@media (max-width: 760px) { .cta-band .wrap { grid-template-columns: 1fr; } }

/* ── footer ───────────────────────────────────────────────────────────────── */
footer.seam {
  background: var(--seam) url(/assets/textures/workings-grid-dark.svg); color: oklch(88% 0.02 85);
  position: relative; overflow: hidden; padding-block: 3.2rem 2.2rem; font-size: 0.95rem;
}
footer.seam::after {
  content: ""; position: absolute; right: -60px; bottom: -40px; width: 420px; height: 310px;
  background: url(/assets/textures/watermark-reversed.svg) center / contain no-repeat; pointer-events: none;
}
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) 1fr 1fr 1fr; gap: 2.2rem; position: relative; z-index: 1; }
.foot-grid img.foot-logo { width: 168px; height: auto; margin-bottom: 1rem; }
.foot-h { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; color: var(--lamp); margin: 0 0 0.8rem; }
footer.seam ul { list-style: none; margin: 0; padding: 0; }
footer.seam ul li { margin-bottom: 0.45rem; }
footer.seam a { color: oklch(88% 0.02 85); text-decoration: none; }
footer.seam a:hover { color: var(--paper); text-decoration: underline; }
.foot-line { border-top: 1px solid oklch(40% 0.03 82); margin-top: 2.4rem; padding-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; font-size: 0.82rem; color: oklch(72% 0.02 85); position: relative; z-index: 1; }
.foot-line p { margin: 0; max-width: none; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .foot-grid { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ── page head band (inner pages) ─────────────────────────────────────────── */
.page-head { border-bottom: 1px solid var(--hairline); padding-block: clamp(2.2rem, 5vw, 3.6rem); }
.page-head h1 { max-width: 22ch; margin-bottom: 0.4rem; }
.page-head .lede { margin-bottom: 0; }
.crumb { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 1.1rem; }
.crumb a { color: var(--ink-soft); }
.crumb a:hover { color: var(--ink); }

/* misc */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3.2rem); align-items: start; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.stat {
  font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat small { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.4rem; letter-spacing: 0.02em; }
.on-seam .stat small { color: oklch(75% 0.02 85); }
.spot-figure { text-align: center; padding-block: 2rem; }
.spot-figure img { margin-inline: auto; width: 180px; height: auto; }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: none; }
}

/* ══ MOTION LAYER - post-build interaction pass ═══════════════════════════════
   Additive only. Eases the snapping hovers, adds one signature (the brass
   "Straight Call" line struck under a routing verdict row), and a below-fold
   scroll-reveal. Nothing here changes the resting design - only how it behaves
   on hover, focus and entry. GPU-only (transform + opacity). The why lives in
   MOTION.md. The reduced-motion floor is the last block in this file. */

/* 1 - ease every snapping hover onto the properties that actually change.
   The trade feel to reach for: a well-balanced door - quick, weighted, no bounce. */
a { transition: color .15s ease; }
.btn {
  transition: background-color .16s ease, border-color .16s ease,
              color .16s ease, transform .12s ease;
}
.btn-brass:active, .btn-line:active { transform: translateY(1px); }
.chip { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
nav.tb-nav a.nl { transition: color .15s ease, border-color .16s ease; }
.faq summary { transition: color .15s ease; }
.digest a.vrow { transition: background-color .16s ease; }
.f-row input, .f-row select, .f-row textarea {
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* the brass is the site's one point of trust - let a field earn it on focus,
   without disturbing the global focus-visible outline */
.f-row input:focus, .f-row select:focus, .f-row textarea:focus {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--brass);
}

/* 2 - weighted card lift: the counter-sprung settle of a door that lifts true.
   Cards that route to the enquiry rise a hair and gain shadow, on hover AND on
   keyboard focus (parity). Small, fast, no float. */
.pop {
  transition: border-color .18s ease, transform .18s cubic-bezier(.2, .7, .3, 1),
              box-shadow .18s ease;
}
.pop:hover, .pop:focus-within {
  transform: translateY(-3px);
  border-color: var(--ink);
  box-shadow: 0 12px 26px oklch(21.5% 0.009 75 / 0.11);
}
.index-cards a.icard {
  transition: background-color .18s ease, border-color .18s ease,
              transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease;
}
.index-cards a.icard:hover,
.index-cards a.icard:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px oklch(21.5% 0.009 75 / 0.11);
}

/* 3 - THE SIGNATURE: "The Straight Call".
   On a routing verdict row, a brass rule wipes in from the left as you settle on
   it - the surveyor drawing the line under the item at the moment the call is made.
   It runs left to right, toward the "The call / Book a repair" column, so the eye
   is pulled the way the click should go. It appears on interaction only; at rest
   the row is untouched, so no-JS and print see the plain sheet. */
.digest a.vrow { position: relative; }
.digest a.vrow::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--brass);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .17s cubic-bezier(.3, .7, .3, 1);
  pointer-events: none;
}
.digest a.vrow:hover::after,
.digest a.vrow:focus-visible::after { transform: scaleX(1); }

/* 4 - scroll-reveal. The hidden state is added by motion.js at runtime and ONLY
   to elements sitting below the fold, so the resting page (no-JS, crawlers, the
   whole hero) is fully visible and nothing above the fold flashes. Hiding carries
   no transition (instant, off-screen); only the entrance animates. */
.motion-reveal { opacity: 0; transform: translateY(16px); }
.motion-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .2s ease, transform .2s cubic-bezier(.2, .7, .3, 1);
}

/* 5 - THE MOTION FLOOR. If the visitor asks for reduced motion, everything above
   is neutralised and every element simply appears. motion.js also declines to
   hide anything, so this is belt and braces. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .motion-reveal, .motion-reveal.is-in { opacity: 1 !important; transform: none !important; }
}