/* Self-hosted fonts (was Google Fonts) — latin + latin-ext, variable woff2. */
@font-face{font-family:'Besley';font-style:italic;font-weight:400 900;font-display:swap;src:url('/assets/fonts/besley-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:'Besley';font-style:italic;font-weight:400 900;font-display:swap;src:url('/assets/fonts/besley-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:'Besley';font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/fonts/besley-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:'Besley';font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/fonts/besley-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:'Public Sans';font-style:italic;font-weight:100 900;font-display:swap;src:url('/assets/fonts/public-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:'Public Sans';font-style:italic;font-weight:100 900;font-display:swap;src:url('/assets/fonts/public-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:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/public-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:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/public-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;}
/* Gatehouse Garage Doors — Cessnock. One stylesheet, tokens from brand-kit/brand-kit.md §3.
   Register: job-sheet / gate-board. Besley does the guarding; Public Sans does the telling. */

:root {
  --ink:           #20251F;
  --ink-soft:      #4C564D;
  --paper:         #F1F2E8;
  --paper-deep:    #E3E6D5;
  --slate:         #2C3540;
  --ironbark:      #3B4A3E;
  --ironbark-deep: #2C382F;
  --oxide:         #9C4732;
  --oxide-deep:    #7E3524;
  --zinc:          #A9B0B2;
  --zinc-deep:     #586460;
  --paddock:       #77754F;

  --font-display: "Besley", "Georgia", serif;
  --font-body: "Public Sans", "Helvetica Neue", sans-serif;

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

/* ── base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17.5px;              /* read on a phone in a dark shed */
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}
[hidden] { display: none !important; }  /* kernel gotcha: never let a display rule defeat hidden */
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; color: var(--ink); margin: 0 0 .5em; }
h1 { font-weight: 800; font-size: clamp(2.1rem, 4.6vw, 3.3rem); letter-spacing: -0.01em; }
h2 { font-weight: 700; font-size: clamp(1.55rem, 3vw, 2.15rem); }
h3 { font-weight: 700; font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
/* page hook: the H1 orients (what + where); the node's voice line keeps its place right below */
.hook {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 2.3vw, 1.5rem);
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  margin: -0.2em 0 0.85em;
  max-width: 46ch;
}
.on-dark .hook { color: var(--paper); }
p { margin: 0 0 1em; }
a { color: var(--ironbark); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
strong { font-weight: 700; }
::placeholder { color: color-mix(in srgb, var(--ink-soft) 32%, transparent); }
:focus-visible { outline: 2px solid var(--oxide); outline-offset: 2px; border-radius: 2px; }
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper);
  padding: 10px 16px; z-index: 99; text-decoration: none;
}
.skip:focus { left: 8px; top: 8px; color: var(--paper); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
main { display: block; }

/* brass-plate label: the spec voice */
.plate {
  font-family: var(--font-body); font-weight: 600; font-size: .82rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--zinc-deep);
}
.plate--oxide { color: var(--oxide-deep); }
.on-dark .plate, .plate--dark { color: var(--zinc); }

/* the latched-opening motif: a heavy rule interrupted by a gap holding a small element */
.latch { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.latch::before, .latch::after { content: ""; height: 3px; background: var(--ironbark); }
.latch::before { width: 44px; }
.latch::after { flex: 1; }
.latch .plate { white-space: nowrap; }
.on-dark .latch::before, .on-dark .latch::after { background: var(--zinc); }

/* section rest: the bolt run laid flat */
.rest { width: min(280px, 60%); margin: clamp(40px, 7vw, 72px) auto; }
.rest img { width: 100%; }

/* bolt-nose list markers */
ul.bolts { list-style: none; padding: 0; margin: 0 0 1em; }
ul.bolts li { padding-left: 34px; position: relative; margin-bottom: .55em; }
ul.bolts li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 22px; height: 13px;
  background: url("/assets/micro/bullet.svg") no-repeat center / contain;
}
.on-dark ul.bolts li::before { background-image: url("/assets/micro/bullet-reversed.svg"); }

/* buttons — the two paths */
.btn {
  display: inline-block; font-family: var(--font-body); font-weight: 600;
  font-size: 1rem; letter-spacing: .02em; text-decoration: none; cursor: pointer;
  padding: 13px 26px; border: 2px solid transparent; border-radius: 3px;
  transition: background .15s ease, color .15s ease;
}
.btn-repair { background: var(--oxide); color: var(--paper); }         /* the viewport's ONE strike */
.btn-repair:hover { background: var(--oxide-deep); color: var(--paper); }
.btn-quote { background: var(--ironbark); color: var(--paper); }
.btn-quote:hover { background: var(--ironbark-deep); color: var(--paper); }
.btn-plate { background: var(--paper); color: var(--ink); }             /* urgent CTA on dark grounds */
.btn-plate:hover { background: var(--paper-deep); color: var(--ink); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink-soft); }
.btn-line:hover { border-color: var(--ink); color: var(--ink); }
.on-dark .btn-line { color: var(--paper); border-color: var(--zinc); }
.on-dark .btn-line:hover { border-color: var(--paper); color: var(--paper); }

/* ── header: the gate board ───────────────────────────────────────────────── */
.gate-head { border-top: 4px solid var(--ironbark); background: var(--paper); border-bottom: 1px solid color-mix(in srgb, var(--zinc-deep) 40%, transparent); }
.gate-head .bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 16px; }
.gate-head .logo { display: block; text-decoration: none; }
.gate-head .logo img.full { height: 52px; width: auto; }
.gate-head .logo img.mark { display: none; height: 44px; width: auto; }
.gate-nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }
.gate-nav > a:not(.btn) {
  font-weight: 600; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; position: relative; padding-block: 6px;
}
.gate-nav > a:not(.btn):hover { color: var(--ironbark); }
/* active page: the small functional oxide marker */
body[data-page="services"] .gate-nav a[data-nav="services"]::after,
body[data-page="areas"]    .gate-nav a[data-nav="areas"]::after,
body[data-page="guides"]   .gate-nav a[data-nav="guides"]::after,
body[data-page="about"]    .gate-nav a[data-nav="about"]::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -4px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--oxide);
}
.gate-nav .btn { padding: 10px 20px; font-size: .92rem; }

/* mobile drawer: native <details>, works with JS off */
.drawer { display: none; position: relative; }
.drawer > summary {
  list-style: none; cursor: pointer; padding: 10px; margin: -10px;
  display: flex; flex-direction: column; gap: 5px;
}
.drawer > summary::-webkit-details-marker { display: none; }
.drawer > summary span { width: 26px; height: 3px; background: var(--ink); border-radius: 2px; transition: transform .15s ease, opacity .15s ease; }
.drawer[open] > summary span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.drawer[open] > summary span:nth-child(2) { opacity: 0; }
.drawer[open] > summary span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.drawer .panel {
  position: absolute; right: calc(-1 * var(--pad)); top: calc(100% + 17px);
  width: 100vw; background: var(--slate); color: var(--paper);
  padding: 26px var(--pad) 30px; z-index: 60;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 18px 30px rgba(0,0,0,.28);
}
.drawer .panel a:not(.btn) {
  color: var(--paper); text-decoration: none; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; font-size: 1rem; padding: 13px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--zinc) 30%, transparent);
}
.drawer .panel a:not(.btn):hover { color: var(--zinc); }
.drawer .panel .drawer-ctas { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.drawer .panel .btn-line { color: var(--paper); border-color: var(--zinc); }
.drawer .panel img { height: 40px; width: auto; margin-bottom: 14px; }

@media (max-width: 800px) {
  .gate-nav { display: none; }
  .drawer { display: block; }
  .gate-head .logo img.full { display: none; }
  .gate-head .logo img.mark { display: block; }
}

/* ── hero (home) ──────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(36px, 6vw, 76px) clamp(30px, 5vw, 60px); }
.hero .cols { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: clamp(28px, 4.5vw, 60px); align-items: center; }
.hero .lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 56ch; }
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
.path {
  display: block; text-decoration: none; padding: 20px 20px 18px; border-radius: 4px;
  border: 2px solid var(--ironbark); color: var(--ink); background: var(--paper);
}
.path .plate { display: block; margin-bottom: 6px; }
.path strong { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; display: block; margin-bottom: 4px; }
.path span.sub { color: var(--ink-soft); font-size: .95rem; }
.path.urgent { background: var(--oxide); border-color: var(--oxide); color: var(--paper); }
.path.urgent .plate, .path.urgent span.sub, .path.urgent strong { color: var(--paper); }
.path.urgent:hover { background: var(--oxide-deep); border-color: var(--oxide-deep); }
.path.calm:hover { background: var(--paper-deep); }
.path .go { font-weight: 600; font-size: .92rem; letter-spacing: .06em; text-transform: uppercase; display: block; margin-top: 10px; }
.path.urgent .go { color: var(--paper); }
.path.calm .go { color: var(--ironbark); }

/* photo frames: a jamb and a caption plate; the frame hugs the image */
.frame { margin: 0; }
.frame .ph { border-top: 6px solid var(--ironbark); background: var(--ink); }
.frame img { width: 100%; }
.frame figcaption {
  font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--zinc-deep); padding: 9px 2px 0;
}
.on-dark .frame figcaption { color: var(--zinc); }

/* ── three doors, one town ────────────────────────────────────────────────── */
.doors { padding-block: clamp(30px, 5vw, 56px); }
.doors .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 30px); margin-top: 26px; }
.door-plate { background: var(--paper); border: 1px solid color-mix(in srgb, var(--zinc-deep) 45%, transparent); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.door-plate .ph { background: var(--ink); }
.door-plate .body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.door-plate h3 { margin: 0; }
.door-plate p { margin: 0; color: var(--ink-soft); font-size: .99rem; }
.door-plate .wear { margin-top: 2px; }
.door-plate .wear ul { margin: 6px 0 0; }
.door-plate .wear li { font-size: .95rem; margin-bottom: .35em; }
.door-plate .foot { margin-top: auto; padding-top: 10px; }

/* ── the signature tool ───────────────────────────────────────────────────── */
.tool-band { background: var(--paper-deep) url("/assets/textures/zinc-light.webp") center / cover; padding-block: clamp(44px, 7vw, 84px); }
.tool-card {
  background: var(--paper); border: 2px solid var(--ironbark); border-radius: 5px;
  padding: clamp(24px, 4vw, 44px);
  position: relative; overflow: hidden;
}
.tool-card::after {
  content: ""; position: absolute; right: -60px; bottom: -40px; width: 380px; height: 260px;
  background: url("/assets/textures/watermark.svg") no-repeat center / contain; pointer-events: none;
}
.tool-card > * { position: relative; z-index: 1; }
.tool-intro { max-width: 62ch; color: var(--ink-soft); }
.tq { margin-top: 26px; }
.tq .plate { display: block; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; pointer-events: none; }
.chip span {
  display: inline-block; cursor: pointer; user-select: none;
  border: 1.5px solid var(--zinc-deep); border-radius: 3px; background: var(--paper);
  padding: 9px 16px; font-weight: 600; font-size: .96rem; color: var(--ink);
}
.chip:hover span { border-color: var(--ironbark); }
.chip:has(input:checked) span { background: var(--ironbark); border-color: var(--ironbark); color: var(--paper); }
.chip:has(input:focus-visible) span { outline: 2px solid var(--oxide); outline-offset: 2px; }
.chip .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--paddock); margin-right: 8px; vertical-align: baseline; }
.chip:has(input:checked) .dot { background: var(--paper); }
.tool-result { margin-top: 30px; border-top: 3px solid var(--ironbark); padding-top: 22px; }
.tool-result .read { max-width: 68ch; }
.tool-result .safety {
  border-left: 4px solid var(--oxide-deep); background: var(--paper-deep);
  padding: 12px 16px; margin: 14px 0 18px; font-size: .98rem;
}
.tool-result .act { margin-top: 8px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tool-hint { color: var(--zinc-deep); font-size: .92rem; margin-top: 22px; }

/* ── services router (home) + job sheets (/services/) ─────────────────────── */
.svc-router { padding-block: clamp(30px, 5vw, 56px); }
.svc-router .grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 24px; }
.svc-tile {
  text-decoration: none; background: var(--paper); border: 1px solid color-mix(in srgb, var(--zinc-deep) 45%, transparent);
  border-radius: 4px; padding: 20px 18px; display: flex; flex-direction: column; gap: 8px; color: var(--ink);
}
.svc-tile:hover { border-color: var(--ironbark); background: var(--paper-deep); }
.svc-tile img { width: 56px; height: 56px; }
.svc-tile strong { font-family: var(--font-display); font-size: 1.08rem; }
.svc-tile span { color: var(--ink-soft); font-size: .92rem; }

.sheet {
  background: var(--paper); border: 1px solid color-mix(in srgb, var(--zinc-deep) 45%, transparent);
  border-radius: 4px; padding: clamp(22px, 3.4vw, 38px); margin-bottom: clamp(22px, 3vw, 34px);
}
.sheet .head { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.sheet .head img { width: 64px; height: 64px; flex: none; }
.sheet .head .plate { display: block; margin-bottom: 2px; }
.sheet .head h2 { margin: 0; }
.sheet .cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 40px); margin-top: 10px; }
.sheet .safety {
  border-left: 4px solid var(--oxide-deep); background: var(--paper-deep);
  padding: 14px 18px; margin: 16px 0; font-size: .98rem;
}
.sheet .foot { margin-top: 16px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sheet .foot .note { color: var(--ink-soft); font-size: .95rem; }

/* ── dark bands (areas board, enquiry band, footer) ───────────────────────── */
.band-dark {
  background: var(--ironbark-deep) url("/assets/textures/ink-weatherboard.webp") center / cover;
  color: var(--paper);
}
.band-dark h2, .band-dark h3 { color: var(--paper); }
.band-dark p { color: color-mix(in srgb, var(--paper) 88%, transparent); }
.band-dark a { color: var(--paper); }
.band-dark a:hover { color: var(--zinc); }
/* .band-dark a outranks .btn-plate — restate the plate button's ink label on dark bands */
.band-dark a.btn-plate { color: var(--ink); }
.band-dark a.btn-plate:hover { color: var(--ink); background: var(--paper-deep); }

.areas-board { padding-block: clamp(44px, 7vw, 84px); }
.areas-board .rings { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(20px, 3vw, 40px); margin-top: 30px; }
.ring { border-top: 2px solid var(--zinc); padding-top: 16px; }
.ring .plate { display: block; margin-bottom: 8px; }
.ring h3 { margin-bottom: 6px; }
.ring h3 a { text-decoration: none; }
.ring h3 a:hover { text-decoration: underline; color: var(--paper); }
.ring p.suburbs { font-size: .98rem; line-height: 1.8; }
.ring .go { font-weight: 600; font-size: .9rem; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--zinc); padding-bottom: 2px; }

/* ── guide feature (home) + guide pages ───────────────────────────────────── */
.guide-feature { padding-block: clamp(30px, 5vw, 56px); }
.guide-feature .cols { display: grid; grid-template-columns: minmax(0, 10fr) minmax(0, 9fr); gap: clamp(26px, 4vw, 56px); align-items: center; }

.prose { max-width: 70ch; }
.prose p, .prose li { font-size: 1.03rem; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.3em; }
.prose .frame { margin-block: 28px; }
.anecdote {
  margin: 34px 0; padding: 6px 0 6px 62px; position: relative;
  font-family: var(--font-display); font-style: italic; font-size: 1.12rem; color: var(--ink);
}
.anecdote::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 42px; height: 32px;
  background: url("/assets/micro/quote.svg") no-repeat center / contain;
}
.refs { border-top: 3px solid var(--ironbark); margin-top: 44px; padding-top: 18px; }
.refs li { margin-bottom: .6em; font-size: .95rem; color: var(--ink-soft); }

.scenario {
  background: var(--paper-deep); border-radius: 4px; padding: 20px 22px; margin: 18px 0;
}
.scenario .plate { display: block; margin-bottom: 6px; }
.scenario p { margin: 0; font-size: .99rem; }

/* guide index cards */
.guide-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 30px); margin-top: 26px; }
.guide-card { text-decoration: none; border: 1px solid color-mix(in srgb, var(--zinc-deep) 45%, transparent); border-radius: 4px; overflow: hidden; background: var(--paper); color: var(--ink); display: flex; flex-direction: column; }
.guide-card:hover { border-color: var(--ironbark); }
.guide-card .ph { background: var(--ink); }
.guide-card .body { padding: 20px; }
.guide-card h3 { margin-bottom: 6px; }
.guide-card p { color: var(--ink-soft); margin: 0; font-size: .98rem; }

/* ── page headers (inner pages) ───────────────────────────────────────────── */
.page-head { padding-block: clamp(34px, 5.5vw, 64px) clamp(8px, 2vw, 18px); }
.page-head .lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 62ch; }
.crumb { font-size: .88rem; color: var(--zinc-deep); margin-bottom: 18px; }
.crumb a { color: var(--zinc-deep); }
.crumb a:hover { color: var(--ink); }

/* area pages */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; }
@media (max-width: 800px) { .duo { grid-template-columns: 1fr; } }
.area-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin: 26px 0; }
.fact { border-top: 2px solid var(--ironbark); padding-top: 10px; }
.fact .plate { display: block; margin-bottom: 4px; }
.fact p { margin: 0; font-size: .97rem; color: var(--ink-soft); }
.fact strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); display: block; }

/* ── enquiry ──────────────────────────────────────────────────────────────── */
.enq { padding-block: clamp(30px, 5vw, 56px); }
.enq .cols { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 70px); align-items: start; }
.lead-form { background: var(--paper); border: 2px solid var(--ironbark); border-radius: 5px; padding: clamp(22px, 3.4vw, 36px); }
.lead-form .row { margin-bottom: 18px; }
.lead-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lead-form label { display: block; font-weight: 600; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--zinc-deep); margin-bottom: 6px; }
.lead-form label em { text-transform: none; letter-spacing: 0; font-style: normal; font-weight: 400; color: var(--zinc-deep); }
.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(--paper);
  border: 1.5px solid var(--zinc-deep); border-radius: 3px; padding: 11px 12px;
}
.lead-form textarea { min-height: 120px; resize: vertical; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline: 2px solid var(--oxide); outline-offset: 1px; border-color: var(--ironbark); }
.lead-form input[type="file"] { font-size: .92rem; color: var(--ink-soft); }
.lead-form .fine { font-size: .88rem; color: var(--zinc-deep); margin: 4px 0 0; }
.lead-form button { width: 100%; margin-top: 4px; }
.lead-result { margin-top: 18px; }
.lead-result.ok { display: flex; gap: 18px; align-items: flex-start; border: 2px solid var(--ironbark); border-radius: 4px; padding: 18px; background: var(--paper-deep); }
.lead-result.ok img { width: 110px; flex: none; }
.lead-result.err { border-left: 4px solid var(--oxide-deep); background: var(--paper-deep); padding: 12px 16px; }

/* the enquiry band partial (pre-footer) */
.enq-band { padding-block: clamp(44px, 7vw, 80px); }
.enq-band .inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.enq-band h2 { margin: 0 0 6px; }
.enq-band p { margin: 0; max-width: 52ch; }
.enq-band .ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── footer ───────────────────────────────────────────────────────────────── */
.foot { padding-block: clamp(44px, 6vw, 70px) 34px; }
.foot .top { display: grid; grid-template-columns: minmax(0, 7fr) repeat(3, minmax(0, 4fr)); gap: clamp(24px, 4vw, 48px); }
.foot .brand img { height: 88px; width: auto; margin-bottom: 14px; }
.foot .brand p { font-size: .95rem; color: color-mix(in srgb, var(--paper) 80%, transparent); max-width: 34ch; }
.foot .col p.fh { font-weight: 600; font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; color: var(--zinc); margin: 0 0 12px; }
.foot .col a { display: block; text-decoration: none; padding: 4px 0; font-size: .97rem; }
.foot .col a:hover { text-decoration: underline; }
.foot .rest-dark { width: min(280px, 60%); margin: 38px auto 26px; }
.foot .legal { font-size: .86rem; color: color-mix(in srgb, var(--paper) 72%, transparent); text-align: center; }
.foot .legal a { font-size: inherit; }

/* ── 404 / utility pages ──────────────────────────────────────────────────── */
.spot-page { text-align: center; padding-block: clamp(50px, 9vw, 110px); }
.spot-page img { width: min(380px, 70%); margin: 0 auto 28px; }
.spot-page .act { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero .cols { grid-template-columns: 1fr; }
  .doors .grid { grid-template-columns: 1fr; }
  .svc-router .grid { grid-template-columns: 1fr 1fr; }
  .areas-board .rings { grid-template-columns: 1fr; }
  .guide-feature .cols { grid-template-columns: 1fr; }
  .enq .cols { grid-template-columns: 1fr; }
  .sheet .cols { grid-template-columns: 1fr; }
  .foot .top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .paths { grid-template-columns: 1fr; }
  .svc-router .grid { grid-template-columns: 1fr; }
  .guide-cards { grid-template-columns: 1fr; }
  .area-facts { grid-template-columns: 1fr; }
  .lead-form .row2 { grid-template-columns: 1fr; }
  .foot .top { grid-template-columns: 1fr; }
}

/* ═══ MOTION LAYER ══════════════════════════════════════════════════════════
   Post-build interaction pass. Additive only, transform/opacity for movement.
   Personality: the weighted settle of a well-balanced door and the latch bar
   thrown home. Crisp and mechanical, never floaty. Rationale lives in MOTION.md. */

/* 1 — ease the snapping hovers (transitions only; resting look unchanged) */
.path { transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.svc-tile,
.guide-card { transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.door-plate { transition: border-color .16s ease; }
.chip span { transition: transform .14s ease, background .15s ease, border-color .15s ease, color .15s ease; }
.gate-nav > a:not(.btn),
.drawer .panel a:not(.btn),
.foot .col a,
.ring h3 a,
.ring .go,
.crumb a,
.path .go,
.guide-feature a { transition: color .15s 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 .15s ease, outline-color .15s ease; }
a { transition: color .14s ease; }
.btn { transition: background .15s ease, color .15s ease, transform .14s ease; }
.svc-tile img { transition: transform .16s ease; }

/* 2 — the weighted settle: clickable cards lift a touch, press settles home */
.path:hover,
.svc-tile:hover,
.guide-card:hover { transform: translateY(-3px); }
.svc-tile:hover img { transform: translateY(-1px); }
.door-plate:hover { border-color: color-mix(in srgb, var(--ironbark) 70%, transparent); }
.chip:hover span { transform: translateY(-1px); }
.btn:active,
.path:active,
.svc-tile:active,
.guide-card:active { transform: translateY(1px); }

/* SIGNATURE — "the latch throw": an oxide latch bar thrown home from the left
   under the primary nav, the same latch these doors are described by. It rests
   fully retracted (invisible, no layout), so it only ever adds on interaction. */
.gate-nav > a:not(.btn)::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--oxide); transform: scaleX(0); transform-origin: left center;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1); pointer-events: none;
}
.gate-nav > a:not(.btn):hover::before,
.gate-nav > a:not(.btn):focus-visible::before { transform: scaleX(1); }

/* 3 — scroll reveal. JS adds .reveal-init at runtime, so no-JS visitors and
   crawlers rest fully visible; above-the-fold elements are never hidden. */
.reveal-init { opacity: 0; transform: translateY(14px); }
.reveal-in {
  opacity: 1; transform: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}

/* THE MOTION FLOOR — reduced motion neutralises every transition, the latch
   throw and the reveal; elements simply appear. motion.js also declines to
   hide anything when this is set. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal-init { opacity: 1 !important; transform: none !important; }
  .gate-nav > a:not(.btn)::before { display: none; }
}