/* Self-hosted fonts (was Google Fonts) — latin + latin-ext, variable woff2. */
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 600;font-display:swap;src:url('/assets/fonts/newsreader-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:'Newsreader';font-style:italic;font-weight:400 600;font-display:swap;src:url('/assets/fonts/newsreader-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:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/newsreader-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:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/newsreader-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:'Schibsted Grotesk';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/schibsted-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:'Schibsted Grotesk';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/schibsted-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:'Schibsted Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/schibsted-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:'Schibsted Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/schibsted-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;}
/* Balmoral Removals — site system.
   Brand kit: brand-kit/brand-kit.md (tokens pasted verbatim, do not re-derive).
   Scene: Balmoral at 7am. Paper = pavilion stucco, tile = the terracotta roof
   (the only thing that shouts), two tinted grounds (warm sand / cool morning),
   one dark surface (harbour-deep). No neutral grey anywhere. */

:root {
  --bal-ink: #1B2C2A;          /* oklch(0.277 0.023 186.7) — all text; never #000 */
  --bal-ink-soft: #44605B;     /* oklch(0.465 0.034 182.5) — captions, meta, asides */
  --bal-paper: #FBF7EF;        /* oklch(0.977 0.011 84.6) — page ground */
  --bal-sand: #F1E7D3;         /* oklch(0.931 0.029 84.6) — warm tinted ground */
  --bal-morning: #DDEBE6;      /* oklch(0.928 0.016 172.6) — cool tinted ground; SURFACE ONLY */
  --bal-harbour-deep: #1E403F; /* oklch(0.346 0.040 193.0) — the one dark surface */
  --bal-tile: #B04A26;         /* oklch(0.537 0.142 39.1) — PRIMARY: buttons, links (5.10:1 AA) */
  --bal-tile-deep: #8A3717;    /* oklch(0.447 0.122 39.9) — hover/pressed; small tile text (7.45:1 AAA) */
  --bal-tile-sun: #E29A73;     /* oklch(0.748 0.102 49.1) — ON-DARK accent ONLY (4.89:1 AA on deep) */
  --bal-harbour: #2A6660;      /* oklch(0.469 0.063 186.4) — text-capable accent (6.20:1) */
  --bal-fig: #3E5F45;          /* oklch(0.452 0.057 150.3) — success/settled (6.71:1) */
  --bal-sandstone: #C9B795;    /* oklch(0.786 0.050 83.3) — STROKES ONLY, never text */

  --bal-font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --bal-font-body: "Newsreader", Georgia, "Times New Roman", serif;

  --wrap: 1140px;
  --gutter: clamp(20px, 4vw, 44px);
  --radius: 10px;
  --shadow: 0 1px 2px rgba(27, 44, 42, 0.06), 0 10px 30px -18px rgba(27, 44, 42, 0.28);
  --ease: cubic-bezier(0.33, 1, 0.5, 1);
}

/* ── Reset-ish ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--bal-font-body);
  font-optical-sizing: auto;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--bal-ink);
  background-color: var(--bal-paper);
  background-image: url("/assets/brand/stucco-whisper.webp"); /* pavilion render grain, quietest texture */
  background-size: 512px;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; } /* guards data-lead-success/error against any display rule */

h1, h2, h3, h4 {
  font-family: var(--bal-font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0 0 0.55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.18rem, 2vw, 1.4rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
em, .place { font-style: italic; } /* Newsreader true italic: place names, asides */
small, .meta { font-size: 0.86rem; color: var(--bal-ink-soft); }

a { color: var(--bal-tile-deep); text-decoration-color: rgba(176, 74, 38, 0.4); text-underline-offset: 3px; transition: color 0.18s var(--ease), text-decoration-color 0.18s var(--ease); }
a:hover { color: var(--bal-tile); text-decoration-color: var(--bal-tile); }

/* Section rule: the footbridge divider IS the site's <hr> */
hr {
  border: 0;
  height: 20px;
  margin: 2.6rem auto;
  width: min(280px, 70%);
  background: url("/assets/brand/divider.svg") center / contain no-repeat;
}

/* Branded lists (the footbridge at glyph scale) */
ul.bal { list-style: none; padding-left: 0; margin: 0 0 1.2em; }
ul.bal li { padding-left: 1.65rem; position: relative; margin-bottom: 0.55em; }
ul.bal li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 13px; height: 13px;
  background: url("/assets/brand/bullet.svg") center / contain no-repeat;
}
ul.bal ul { list-style: none; padding-left: 0.4rem; margin: 0.5em 0 0; }
ul.bal ul li::before { background-image: url("/assets/brand/bullet-sub.svg"); }

blockquote {
  margin: 2rem 0; padding: 0.2rem 0 0.2rem 3.4rem; position: relative;
  font-size: 1.12rem; font-style: italic; color: var(--bal-ink);
}
blockquote::before {
  content: ""; position: absolute; left: 0; top: 0.1rem; width: 34px; height: 31px;
  background: url("/assets/brand/quote.svg") center / contain no-repeat;
}

/* ── Layout primitives ─────────────────────────────────────────────────── */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 820px; margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: clamp(3rem, 7vw, 5.5rem); position: relative; }
.band-tight { padding-block: clamp(2.2rem, 5vw, 3.6rem); }

/* Surfaces. One texture per surface, whisper weights behind text. */
.on-sand { background-color: var(--bal-sand); }
.on-sand.tx-scallop { background-image: url("/assets/brand/roof-scallop-whisper.svg"); background-size: 72px 40px; }
.on-morning { background-color: var(--bal-morning); }
.on-morning.tx-water { background-image: url("/assets/brand/still-water-whisper.svg"); background-size: 240px 96px; }
.on-paper-water { background-image: url("/assets/brand/still-water-whisper.svg"); background-size: 240px 96px; }
.tx-grade { background-image: url("/assets/brand/grade-30-whisper.svg"); background-size: 80px 24px; } /* steep-street content ONLY */
.on-deep {
  background-color: var(--bal-harbour-deep);
  color: var(--bal-paper);
}
.on-deep h1, .on-deep h2, .on-deep h3 { color: var(--bal-paper); }
.on-deep .meta, .on-deep small { color: var(--bal-sand); }
.on-deep a:not(.btn) { color: var(--bal-tile-sun); text-decoration-color: rgba(226, 154, 115, 0.5); }
.on-deep a:not(.btn):hover { color: var(--bal-tile-sun); text-decoration-color: var(--bal-tile-sun); }
.on-deep ul.bal li::before { background-image: url("/assets/brand/bullet-reversed.svg"); }

/* Terrace edge: the amphitheatre-in-section band divider */
.terrace-top { position: relative; }
.terrace-top::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 64px;
  background: url("/assets/brand/terrace-edge.svg") center top / 640px 128px repeat-x;
  pointer-events: none;
}

/* Datum tag: the climb-sheet elevation marker that structures the pages */
.datum {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.7rem;
  font-family: var(--bal-font-display); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.05em; color: var(--bal-tile-deep); margin-bottom: 1rem;
}
.datum::before { content: ""; width: 34px; height: 2px; background: var(--bal-harbour); border-radius: 2px; }
.datum .alt { color: var(--bal-ink-soft); font-weight: 500; }
.on-deep .datum { color: var(--bal-tile-sun); }
.on-deep .datum::before { background: var(--bal-tile-sun); }

.kicker {
  font-family: var(--bal-font-display); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.03em; color: var(--bal-harbour); margin: 0 0 0.7rem;
}
.on-deep .kicker { color: var(--bal-tile-sun); }
.lede { font-size: 1.16rem; line-height: 1.6; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--bal-font-display); font-weight: 600; font-size: 1rem;
  padding: 0.78rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn-primary { background: var(--bal-tile); color: var(--bal-paper); }
.btn-primary:hover { background: var(--bal-tile-deep); color: var(--bal-paper); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-quiet { background: transparent; color: var(--bal-tile-deep); border-color: var(--bal-tile); }
.btn-quiet:hover { background: rgba(176, 74, 38, 0.08); color: var(--bal-tile-deep); transform: translateY(-1px); }
/* On the dark surface the primary stays tile-filled; the quiet variant re-inks to survive */
.on-deep .btn-quiet { color: var(--bal-paper); border-color: rgba(251, 247, 239, 0.55); }
.on-deep .btn-quiet:hover { background: rgba(251, 247, 239, 0.1); color: var(--bal-paper); }
.btn-lg { padding: 0.95rem 1.9rem; font-size: 1.08rem; }
/* On the hero photo (dark overlay) the quiet button re-inks like on-deep */
.hero .btn-quiet { color: var(--bal-paper); border-color: rgba(251, 247, 239, 0.6); }
.hero .btn-quiet:hover { background: rgba(251, 247, 239, 0.12); color: var(--bal-paper); }

/* ── Header ────────────────────────────────────────────────────────────── */
.strip {
  background: var(--bal-morning);
  border-bottom: 1px solid var(--bal-sandstone);
  font-family: var(--bal-font-display); font-size: 0.8rem; font-weight: 500;
  color: var(--bal-ink-soft);
}
.strip .wrap { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.42rem; }
.strip strong { color: var(--bal-ink); font-weight: 600; }
.site-head {
  background: rgba(251, 247, 239, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bal-sandstone);
  position: sticky; top: 0; z-index: 60;
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  padding-block: 0.8rem;
}
.brand-lockup { display: block; flex: 0 0 auto; }
.brand-lockup img { height: 44px; width: auto; }
.nav-primary { display: flex; align-items: center; gap: 1.5rem; }
.nav-primary a:not(.btn) {
  font-family: var(--bal-font-display); font-weight: 500; font-size: 0.98rem;
  color: var(--bal-ink); text-decoration: none; padding: 0.3rem 0.1rem;
  border-bottom: 2px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.nav-primary a:not(.btn):hover { color: var(--bal-tile-deep); border-bottom-color: var(--bal-tile); }
/* active page: <body data-page="x"> */
body[data-page="services"] .nav-primary a[href="/services/"],
body[data-page="areas"] .nav-primary a[href="/areas/"],
body[data-page="guides"] .nav-primary a[href="/guides/"],
body[data-page="about"] .nav-primary a[href="/about/"] {
  border-bottom-color: var(--bal-tile); color: var(--bal-tile-deep);
}
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  color: var(--bal-ink);
  /* 44px minimum tap target */
  width: 44px; height: 44px; align-items: center; justify-content: center;
}
.nav-toggle svg { width: 28px; height: 28px; }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(340px, 88vw); z-index: 80;
  background: var(--bal-harbour-deep); color: var(--bal-paper);
  padding: 1.4rem 1.6rem 2rem;
  transform: translateX(102%); transition: transform 0.3s var(--ease);
  display: flex; flex-direction: column; gap: 0.4rem; overflow-y: auto;
}
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.drawer-head img { height: 60px; width: auto; }
.drawer-close { background: none; border: 0; color: var(--bal-paper); cursor: pointer; padding: 0.4rem; }
.drawer-close svg { width: 24px; height: 24px; }
.drawer nav { display: flex; flex-direction: column; }
.drawer nav a:not(.btn) {
  font-family: var(--bal-font-display); font-weight: 500; font-size: 1.15rem;
  color: var(--bal-paper); text-decoration: none; padding: 0.7rem 0.2rem;
  border-bottom: 1px solid rgba(251, 247, 239, 0.14);
}
.drawer nav a:not(.btn):hover { color: var(--bal-tile-sun); }
.drawer .btn { margin-top: 1.3rem; }
.drawer .meta { margin-top: auto; padding-top: 1.5rem; color: var(--bal-sand); }
.scrim {
  position: fixed; inset: 0; z-index: 70; background: rgba(27, 44, 42, 0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease);
}
.scrim.show { opacity: 1; pointer-events: auto; }

/* ── Hero (home) ───────────────────────────────────────────────────────── */
.hero { position: relative; overflow: clip; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(30, 64, 63, 0.88) 0%, rgba(30, 64, 63, 0.72) 42%, rgba(30, 64, 63, 0.28) 100%);
}
.hero-inner { position: relative; z-index: 1; color: var(--bal-paper); padding-block: clamp(4rem, 9vw, 7.5rem); }
.hero-inner h1 { color: var(--bal-paper); max-width: 15ch; }
.hero-inner .lede { max-width: 52ch; color: rgba(251, 247, 239, 0.94); }
.hero-inner .kicker { color: var(--bal-tile-sun); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.8rem; }
.hero-foot {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(251, 247, 239, 0.22);
  background: rgba(30, 64, 63, 0.55); backdrop-filter: blur(4px);
}
.hero-foot .wrap { display: flex; flex-wrap: wrap; gap: 0.4rem 2.4rem; padding-block: 0.75rem; }
.hero-foot span {
  font-family: var(--bal-font-display); font-size: 0.85rem; font-weight: 500;
  color: var(--bal-sand); display: inline-flex; align-items: center; gap: 0.5rem;
}
.hero-foot span::before { content: ""; width: 14px; height: 2px; background: var(--bal-tile-sun); border-radius: 2px; }

/* ── Cards & grids ─────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); }
.card {
  background: var(--bal-paper); border: 1px solid var(--bal-sandstone);
  border-radius: var(--radius); padding: 1.6rem 1.5rem;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
a.card { text-decoration: none; color: var(--bal-ink); display: block; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--bal-ink); }
.card .icon { width: 64px; height: 64px; margin-bottom: 1rem; }
.card h3 a { color: var(--bal-ink); text-decoration: none; }
.card h3 a:hover { color: var(--bal-tile-deep); }
.card .more {
  font-family: var(--bal-font-display); font-weight: 600; font-size: 0.92rem;
  color: var(--bal-tile-deep);
}
.card-photo { padding: 0; overflow: clip; }
.card-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card-photo .card-body { padding: 1.4rem 1.5rem 1.6rem; }

/* Split feature rows (image + text) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
.split > figure { margin: 0; }
.split img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; object-fit: cover; }
.split figcaption { font-size: 0.84rem; color: var(--bal-ink-soft); margin-top: 0.6rem; font-style: italic; }

/* ── Rates table ───────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }
table.rates { border-collapse: collapse; width: 100%; min-width: 560px; background: var(--bal-paper); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--bal-sandstone); }
table.rates caption { caption-side: bottom; text-align: left; font-size: 0.84rem; color: var(--bal-ink-soft); padding-top: 0.7rem; }
table.rates th, table.rates td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--bal-sandstone); }
table.rates thead th {
  font-family: var(--bal-font-display); font-weight: 600; font-size: 0.88rem;
  background: var(--bal-sand); color: var(--bal-ink);
}
table.rates tbody tr:last-child td { border-bottom: 0; }
table.rates .num { text-align: right; font-family: var(--bal-font-display); font-weight: 600; padding-right: 1.6rem; }
table.rates .num:last-child { padding-right: 1rem; }
table.rates .rate-strong { color: var(--bal-tile-deep); font-size: 1.06rem; }
table.rates td small { display: block; font-weight: 400; }
/* Phones: compress instead of scroll — the rate column and the caption must
   never sit off-screen (they're the honesty core of the page). */
@media (max-width: 640px) {
  table.rates { min-width: 0; }
  table.rates th, table.rates td { padding: 0.7rem 0.55rem; font-size: 0.95rem; }
  table.rates .num, table.rates .num:last-child { padding-right: 0.55rem; }
  table.rates .rate-strong { font-size: 1rem; }
}

/* ── Climb Sheet (signature) ───────────────────────────────────────────── */
.climb-sheet {
  background: var(--bal-paper); border: 1px solid var(--bal-sandstone);
  border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow);
  overflow: clip;
}
.climb-controls { padding: 1.6rem clamp(1.2rem, 3vw, 2.2rem) 0.4rem; }
.climb-controls fieldset { border: 0; padding: 0; margin: 0 0 1.1rem; }
.climb-controls legend {
  font-family: var(--bal-font-display); font-weight: 600; font-size: 0.92rem;
  color: var(--bal-ink); margin-bottom: 0.55rem; padding: 0;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: inline-block; padding: 0.45rem 0.95rem; border-radius: 999px;
  border: 1.5px solid var(--bal-sandstone); background: var(--bal-paper);
  font-family: var(--bal-font-display); font-weight: 500; font-size: 0.9rem;
  color: var(--bal-ink); cursor: pointer;
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease);
}
.chip input:hover + span { border-color: var(--bal-harbour); }
.chip input:checked + span { background: var(--bal-harbour); border-color: var(--bal-harbour); color: var(--bal-paper); }
.chip input:focus-visible + span { outline: 2px solid var(--bal-tile); outline-offset: 2px; }
.climb-stage { background: var(--bal-morning); border-block: 1px solid var(--bal-sandstone); padding: 0.6rem 0 0.2rem; }
.climb-stage svg { display: block; width: 100%; max-width: 820px; height: auto; margin-inline: auto; }
.climb-result { padding: 1.5rem clamp(1.2rem, 3vw, 2.2rem) 1.8rem; }
.climb-result h3 { margin-bottom: 0.8rem; }
.plan-lines { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.55rem; }
.plan-lines li { display: grid; grid-template-columns: 118px 1fr; gap: 0.9rem; align-items: baseline; }
.plan-lines .k {
  font-family: var(--bal-font-display); font-weight: 600; font-size: 0.8rem;
  color: var(--bal-harbour); letter-spacing: 0.04em;
}
.plan-tier {
  background: var(--bal-sand); border-radius: var(--radius); padding: 1rem 1.2rem;
  margin-bottom: 1.3rem; display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; align-items: baseline;
}
.plan-tier strong { font-family: var(--bal-font-display); }
.plan-tier .rate { font-family: var(--bal-font-display); font-weight: 700; color: var(--bal-tile-deep); font-size: 1.15rem; }
.climb-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.climb-note { font-size: 0.84rem; color: var(--bal-ink-soft); margin-top: 1rem; }

/* ── Enquiry form ──────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field-full { grid-column: 1 / -1; }
.field label { font-family: var(--bal-font-display); font-weight: 600; font-size: 0.9rem; }
.field label .opt { font-weight: 400; color: var(--bal-ink-soft); }
.field input, .field select, .field textarea {
  font-family: var(--bal-font-body); font-size: 1rem; color: var(--bal-ink);
  background: var(--bal-paper); border: 1.5px solid var(--bal-sandstone);
  border-radius: 8px; padding: 0.7rem 0.85rem; width: 100%;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--bal-harbour); box-shadow: 0 0 0 3px rgba(42, 102, 96, 0.16);
}
::placeholder { color: rgba(27, 44, 42, 0.32); }
.form-note { font-size: 0.86rem; color: var(--bal-ink-soft); }
.lead-result { border-radius: var(--radius); padding: 1.3rem 1.4rem; margin-top: 1.2rem; }
.lead-result.ok { background: rgba(62, 95, 69, 0.1); border: 1px solid var(--bal-fig); color: var(--bal-ink); }
.lead-result.err { background: rgba(176, 74, 38, 0.08); border: 1px solid var(--bal-tile); color: var(--bal-tile-deep); }
.lead-result.ok img { width: 150px; margin-bottom: 0.6rem; }

/* ── Guide article furniture ───────────────────────────────────────────── */
.article { max-width: 760px; }
.article h2 { margin-top: 2.4rem; }
.article h3 { margin-top: 1.8rem; }
.article figure { margin: 2rem 0; }
.article figure img { border-radius: var(--radius); box-shadow: var(--shadow); }
.article figcaption { font-size: 0.84rem; color: var(--bal-ink-soft); margin-top: 0.6rem; font-style: italic; }
.callout {
  background: var(--bal-morning); border-radius: var(--radius);
  padding: 1.3rem 1.5rem; margin: 1.8rem 0;
  background-image: url("/assets/brand/still-water-whisper.svg"); background-size: 240px 96px;
}
.callout-sand { background-color: var(--bal-sand); background-image: url("/assets/brand/roof-scallop-whisper.svg"); background-size: 72px 40px; }
.callout .k {
  display: block; font-family: var(--bal-font-display); font-weight: 600;
  font-size: 0.88rem; color: var(--bal-harbour); margin-bottom: 0.4rem;
}
.refs { border-top: 1px solid var(--bal-sandstone); margin-top: 3rem; padding-top: 1.4rem; }
.refs h2 { font-size: 1.1rem; }
.refs ol { padding-left: 1.2rem; margin: 0; }
.refs li { font-size: 0.92rem; margin-bottom: 0.6rem; }
.crumbs { font-family: var(--bal-font-display); font-size: 0.85rem; margin: 1.4rem 0 0; color: var(--bal-ink-soft); }
.crumbs a { color: var(--bal-harbour); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* Stat callouts: Schibsted 600, the numerals do the persuading */
.stat-row { display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 4vw, 3.2rem); margin: 2rem 0; }
.stat { min-width: 130px; }
.stat b { display: block; font-family: var(--bal-font-display); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--bal-tile-deep); line-height: 1.05; }
.stat span { font-size: 0.9rem; color: var(--bal-ink-soft); }
.on-deep .stat b { color: var(--bal-tile-sun); }
.on-deep .stat span { color: var(--bal-sand); }

/* ── Enquiry band (pre-footer, on morning w/ sun-arc) ──────────────────── */
.enquiry-band { background-color: var(--bal-morning); border-top: 1px solid var(--bal-sandstone); position: relative; overflow: clip; }
.enquiry-band .sun-arc {
  position: absolute; right: -40px; top: 50%; transform: translateY(-50%);
  width: min(520px, 60vw); opacity: 0.9; pointer-events: none;
}
.enquiry-band .wrap { position: relative; z-index: 1; }
.enquiry-band h2 { max-width: 18ch; }
.enquiry-band .lede { max-width: 48ch; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-foot { background: var(--bal-harbour-deep); color: var(--bal-paper); position: relative; overflow: clip; }
.site-foot .watermark {
  position: absolute; right: -120px; bottom: -140px; width: 560px; pointer-events: none;
}
.site-foot .wrap { position: relative; z-index: 1; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.4rem; padding-block: 3.4rem 2.4rem; }
.foot-grid img { height: 104px; width: auto; margin-bottom: 1rem; }
.foot-grid p { color: var(--bal-sand); font-size: 0.95rem; max-width: 30ch; }
.foot-grid h4 { color: var(--bal-paper); font-size: 0.92rem; margin-bottom: 0.9rem; }
.foot-grid nav { display: flex; flex-direction: column; gap: 0.45rem; }
.site-foot a:not(.btn) { color: var(--bal-sand); text-decoration: none; font-size: 0.95rem; }
.site-foot a:not(.btn):hover { color: var(--bal-tile-sun); }
.foot-rule { border: 0; width: 100%; max-width: none; height: 20px; margin: 0 auto 0.2rem; background: url("/assets/brand/divider-reversed.svg") center / 280px 20px no-repeat; }
.foot-legal { padding-bottom: 2rem; }
.foot-legal p { color: rgba(251, 247, 239, 0.72); font-size: 0.82rem; max-width: none; }
.foot-legal .util { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 0.5rem; }
.foot-legal .util a { font-size: 0.82rem; color: var(--bal-sand); }

/* ── Reveal motion ─────────────────────────────────────────────────────
   Rests FULLY VISIBLE: no-JS visitors and crawlers see everything. site.js
   applies the hidden .pre state only to elements still below the fold, then
   removes it on entry, so nothing already painted flashes out and back. */
.rise { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.rise.pre { opacity: 0; transform: translateY(18px); }
/* Footbridge divider draws itself when it enters (site.js swaps to inline svg) */
.hr-draw path { transition: stroke-dashoffset 0.9s var(--ease); }

/* ── Focus-visible parity ──────────────────────────────────────────────
   Keyboard users get the same lift/affordance as hover on the enquiry path,
   plus a clear on-brand ring. Additive only: no global outline is removed. */
.btn-primary:focus-visible { background: var(--bal-tile-deep); color: var(--bal-paper); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-quiet:focus-visible { transform: translateY(-1px); }
a.card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); }
.nav-primary a:not(.btn):focus-visible { color: var(--bal-tile-deep); border-bottom-color: var(--bal-tile); }
.btn:focus-visible, a.card:focus-visible { outline: 2px solid var(--bal-tile); outline-offset: 3px; }

/* ── Page-specific helpers ─────────────────────────────────────────────── */
.page-head { padding-block: clamp(2.6rem, 6vw, 4.4rem) clamp(1.8rem, 4vw, 3rem); }
.page-head .lede { max-width: 62ch; }
.index-list { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); }
.zone-strip { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin-top: 1rem; }
.zone-strip span { font-family: var(--bal-font-display); font-size: 0.88rem; font-weight: 500; color: var(--bal-ink-soft); }

.notfound { text-align: center; padding-block: clamp(4rem, 10vw, 7rem); }
.notfound img { width: 230px; margin: 0 auto 1.6rem; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .nav-primary { display: none; }
  .nav-toggle { display: inline-flex; }
  .split { grid-template-columns: 1fr; }
  .split.split-flip > figure { order: -1; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .strip .wrap { justify-content: center; }
  .strip .strip-right { display: none; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .plan-lines li { grid-template-columns: 1fr; gap: 0.1rem; }
  .brand-lockup img { height: 40px; }
  .enquiry-band .sun-arc { opacity: 0.45; }
}

/* ── Reduced motion floor ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .rise, .rise.pre { opacity: 1; transform: none; }
}