/* Self-hosted fonts (was Google Fonts) — latin + latin-ext, variable woff2. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:62% 125%;font-display:swap;src:url('/assets/fonts/archivo-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:'Archivo';font-style:normal;font-weight:400 700;font-stretch:62% 125%;font-display:swap;src:url('/assets/fonts/archivo-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-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:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-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;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-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:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-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;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-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:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-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;}
/* Essential Blinds — spec-book design system.
   Ink + paper + one disciplined yellow-gold (brand-kit/system.md, adopted verbatim).
   Rules, borders and weight do the separating: no gradients, no glass, no decorative
   shadows. Gold discipline: free on ink; on paper/canvas anything meaningful uses
   gold-deep. Squint test: ink-and-white with gold punctuation. */

:root {
  --ink:        oklch(20.8% 0.007 258.4);  /* #16181B */
  --ink-raised: oklch(27.2% 0.010 260.7);  /* #24272C */
  --paper:      oklch(98.8% 0.004 91.4);   /* #FCFBF8 */
  --canvas:     oklch(95.0% 0.010 87.5);   /* #F1EEE7 */
  --gold:       oklch(82.6% 0.165 86.4);   /* #F5BD18 */
  --gold-deep:  oklch(49.6% 0.101 88.3);   /* #7A5E00 */
  --grey-warm:  oklch(44.3% 0.017 88.8);   /* #575349 */
  --grey-line:  oklch(87.4% 0.015 84.6);   /* #DAD5CB */
  --white:      oklch(100% 0 0);

  --font-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1160px;
  --gutter: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(.33, 1, .48, 1);
}

/* ── Reset-ish ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* never let a display rule defeat the hidden attr */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
::placeholder { color: color-mix(in oklab, var(--grey-warm) 35%, transparent); }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.surface-dark :focus-visible { outline-color: var(--gold); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p { margin: 0 0 1em; }
a { color: var(--gold-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
.surface-dark a:not(.btn) { color: var(--gold); }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--grey-line); margin: 2rem 0; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 820px; margin-inline: auto; padding-inline: var(--gutter); }

/* ── The gold topline — the brand's page edge (echoes the OG card) ─────── */
.topline { height: 6px; background: var(--gold); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--white); padding: .7rem 1.2rem;
  font-family: var(--font-mono); font-size: .85rem;
}
.skip-link:focus { left: 0; }

.btn-disabled { opacity: .45; pointer-events: none; }

/* ── Index labels — the recurring spec-book register ───────────────────── */
.index-label {
  display: flex; align-items: center; gap: .65rem;
  font-family: var(--font-display);
  font-stretch: 115%;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey-warm);
  margin: 0 0 1rem;
}
.index-label .num { font-family: var(--font-mono); font-weight: 500; color: var(--gold-deep); letter-spacing: 0; }
.index-label::after { content: ""; flex: 1; height: 1px; background: var(--grey-line); }
.surface-dark .index-label { color: var(--grey-line); }
.surface-dark .index-label .num { color: var(--gold); }
.surface-dark .index-label::after { background: color-mix(in oklab, var(--white) 22%, transparent); }

.kicker {
  font-family: var(--font-mono); font-size: .85rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep);
  margin: 0 0 .9rem;
}
.surface-dark .kicker { color: var(--gold); }

.lede { font-size: 1.12rem; line-height: 1.65; color: var(--grey-warm); max-width: 58ch; }
.surface-dark .lede { color: var(--grey-line); }

/* ── Surfaces ──────────────────────────────────────────────────────────── */
.surface-dark { background: var(--ink); color: var(--white); }
.surface-canvas { background: var(--canvas); }
.band { padding-block: clamp(3rem, 7vw, 5.5rem); }
.band-tight { padding-block: clamp(2.2rem, 5vw, 3.5rem); }

/* schedule-grid whisper on ink panels (brand texture) */
.grid-texture {
  background-image: url("/assets/brand/pattern-schedule-grid-whisper-dark.svg");
  background-size: 128px 128px;
}
.grid-texture-light {
  background-image: url("/assets/brand/pattern-schedule-grid-whisper-light.svg");
  background-size: 128px 128px;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 600; font-size: .98rem;
  line-height: 1.2; text-decoration: none; cursor: pointer;
  padding: .85rem 1.5rem; border-radius: 2px; border: 1.5px solid transparent;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: color-mix(in oklab, var(--gold) 88%, var(--ink)); color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink:hover { background: var(--ink-raised); color: var(--white); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--white); }
.surface-dark .btn-line { color: var(--white); border-color: color-mix(in oklab, var(--white) 55%, transparent); }
.surface-dark .btn-line:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

/* ── Header ────────────────────────────────────────────────────────────── */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--grey-line);
  position: relative; z-index: 60;
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: .95rem;
}
.site-header .logo img { height: 40px; width: auto; }
.nav-primary { display: flex; align-items: center; gap: 1.4rem; }
.nav-primary a:not(.btn) {
  font-weight: 500; font-size: .95rem; color: var(--ink); text-decoration: none;
  padding-block: .3rem; border-bottom: 2px solid transparent;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.nav-primary a:not(.btn):hover { border-bottom-color: var(--grey-line); }
/* active nav — data-page contract */
body[data-page="range"]    .nav-primary a[href="/range/"],
body[data-page="schedule"] .nav-primary a[href="/schedule/"],
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(--gold-deep); color: var(--ink);
}
.nav-toggle {
  display: none; background: none; border: 1px solid var(--grey-line); border-radius: 2px;
  padding: .5rem .6rem; min-width: 44px; min-height: 44px; justify-content: center;
  cursor: pointer; color: var(--ink);
}
.nav-toggle .lines { display: block; width: 22px; height: 16px; position: relative; }
.nav-toggle .lines::before, .nav-toggle .lines::after, .nav-toggle .lines span {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink);
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle .lines::before { top: 0; }
.nav-toggle .lines span { top: 7px; }
.nav-toggle .lines::after { top: 14px; }

/* mobile drawer — a dark spec-page */
.nav-drawer {
  position: fixed; inset: 0; z-index: 70; background: var(--ink); color: var(--white);
  padding: 1.2rem var(--gutter) 2.5rem; overflow-y: auto;
  display: none; flex-direction: column;
  background-image: url("/assets/brand/pattern-schedule-grid-whisper-dark.svg");
  background-size: 128px 128px;
}
.nav-drawer.open { display: flex; }
.nav-drawer .drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.nav-drawer .drawer-top img { height: 38px; width: auto; }
.nav-drawer .drawer-close {
  background: none; border: 1px solid color-mix(in oklab, var(--white) 35%, transparent);
  color: var(--white); border-radius: 2px; padding: .45rem .8rem; cursor: pointer;
  font-family: var(--font-mono); font-size: .85rem;
}
.nav-drawer nav { display: flex; flex-direction: column; }
.nav-drawer nav a:not(.btn) {
  display: flex; align-items: baseline; gap: .9rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.7rem;
  color: var(--white); text-decoration: none; padding: .85rem 0;
  border-bottom: 1px solid color-mix(in oklab, var(--white) 14%, transparent);
}
.nav-drawer nav a:not(.btn) .num { font-family: var(--font-mono); font-size: .9rem; font-weight: 500; color: var(--gold); }
.nav-drawer .btn { margin-top: 2rem; align-self: flex-start; }

@media (max-width: 880px) {
  .nav-primary { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(2.6rem, 6vw, 5rem); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } }

/* framed figure — spec-book plate */
.plate { position: relative; }
.plate img { border: 1px solid var(--grey-line); }
.plate::before {
  content: ""; position: absolute; inset: 10px -10px -10px 10px;
  border: 1px solid var(--grey-line); z-index: -1;
}
.plate figcaption {
  font-family: var(--font-mono); font-size: .78rem; color: var(--grey-warm);
  padding-top: .55rem; display: flex; gap: .6rem; align-items: baseline;
}
.plate figcaption .num { color: var(--gold-deep); }
.surface-dark .plate img { border-color: color-mix(in oklab, var(--white) 25%, transparent); }
.surface-dark .plate::before { border-color: color-mix(in oklab, var(--white) 18%, transparent); }
.surface-dark .plate figcaption { color: var(--grey-line); }
.surface-dark .plate figcaption .num { color: var(--gold); }

/* ── The category index (ink panel rows) ───────────────────────────────── */
.index-rows { border-top: 1px solid color-mix(in oklab, var(--white) 25%, transparent); }
.index-row {
  display: grid; grid-template-columns: 4.2rem minmax(0, 2fr) minmax(0, 3fr) auto;
  gap: 1.2rem; align-items: center;
  padding: 1.35rem 0;
  border-bottom: 1px solid color-mix(in oklab, var(--white) 25%, transparent);
  text-decoration: none; color: var(--white);
}
.index-row .num {
  font-family: var(--font-mono); font-size: 1.6rem; font-weight: 500; color: var(--gold);
  transition: transform .2s var(--ease);
}
.index-row .name { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.01em; }
.index-row .spec { color: var(--grey-line); font-size: .95rem; line-height: 1.5; }
.index-row .go {
  font-family: var(--font-mono); font-size: .85rem; color: var(--gold);
  border: 1px solid color-mix(in oklab, var(--gold) 55%, transparent);
  border-radius: 2px; padding: .4rem .8rem; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.index-row:hover .num { transform: translateX(6px); }
.index-row:hover .go { background: var(--gold); color: var(--ink); }
@media (max-width: 760px) {
  .index-row { grid-template-columns: 3rem minmax(0, 1fr); grid-template-rows: auto auto; }
  .index-row .spec { grid-column: 2; }
  .index-row .go { display: none; }
}

/* ── Cards / listings ──────────────────────────────────────────────────── */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.card-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 940px) { .card-grid, .card-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .card-grid, .card-grid.two { grid-template-columns: 1fr; } }

.card {
  border: 1px solid var(--grey-line); border-radius: 2px; background: var(--paper);
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.card:hover { border-color: var(--grey-warm); transform: translateY(-2px); }
.card img { border-bottom: 1px solid var(--grey-line); aspect-ratio: 16/10; object-fit: cover; }
.card .pad { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.card .card-kicker { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); }
.card h3 { margin: 0; font-size: 1.15rem; }
.card p { margin: 0; color: var(--grey-warm); font-size: .95rem; }
.card .cta { margin-top: auto; padding-top: .8rem; font-family: var(--font-mono); font-size: .82rem; color: var(--gold-deep); }

/* ── Spec table (the schedule register everywhere) ─────────────────────── */
.spec-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.spec-table th {
  font-family: var(--font-display); font-stretch: 112%; font-weight: 600; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--grey-warm);
  text-align: left; padding: .6rem .8rem; border-bottom: 2px solid var(--ink);
}
.spec-table td { padding: .75rem .8rem; border-bottom: 1px solid var(--grey-line); vertical-align: top; }
.spec-table td.mono, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.spec-table tr:hover td { background: color-mix(in oklab, var(--canvas) 55%, transparent); }
.table-scroll { overflow-x: auto; }

/* ── Steps (the method) ────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; counter-reset: step; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step { border-top: 2px solid var(--ink); padding-top: 1rem; position: relative; }
.step .step-num { font-family: var(--font-mono); font-weight: 500; color: var(--gold-deep); font-size: .9rem; }
.step h3 { margin: .35rem 0 .4rem; font-size: 1.15rem; }
.step p { color: var(--grey-warm); font-size: .95rem; margin: 0; }

/* ── FAQ (details) ─────────────────────────────────────────────────────── */
.faq details { border-bottom: 1px solid var(--grey-line); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; padding: 1.05rem 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--gold-deep); transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--grey-warm); margin: 0 0 1.1rem; max-width: 62ch; }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-display); font-stretch: 110%; font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-warm); }
.field label .opt { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; color: var(--grey-warm); font-weight: 400; }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--white); border: 1px solid var(--grey-line); border-radius: 2px;
  padding: .75rem .85rem; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--gold-deep); outline-offset: 0; border-color: var(--gold-deep);
}
.field input[type="file"] { padding: .55rem .65rem; font-size: .92rem; color: var(--grey-warm); }
.field input[type="file"]::file-selector-button {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: color-mix(in oklab, var(--gold) 20%, var(--white));
  border: 1px solid var(--gold-deep); border-radius: 2px; padding: .45rem .8rem; margin-right: .85rem; cursor: pointer;
}
.form-note { font-size: .88rem; color: var(--grey-warm); }
.lead-alert { border-radius: 2px; padding: 1rem 1.2rem; margin-top: 1.2rem; font-size: .98rem; }
[data-lead-success].lead-alert { border: 1.5px solid var(--gold-deep); background: color-mix(in oklab, var(--gold) 14%, var(--paper)); }
[data-lead-error].lead-alert { border: 1.5px solid #a33; background: #fdf3f2; }

/* ── Enquiry page ──────────────────────────────────────────────────────── */
.enquiry-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1.8rem, 4vw, 3.2rem); align-items: start; }
@media (max-width: 880px) { .enquiry-grid { grid-template-columns: 1fr; } }
.enquiry-card {
  border: 1px solid var(--grey-line); border-radius: 2px; background: var(--white);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.enquiry-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; margin-top: 1.4rem; }
.enquiry-actions .form-note { margin: 0; max-width: 42ch; }
/* after a successful send the form yields the card to the success panel */
.enquiry-form[data-sent] { display: none; }
.lead-success { text-align: center; padding: 1.2rem 0 .4rem; }
.lead-success img { margin: 0 auto 1.4rem; }
.lead-success p { max-width: 46ch; margin-inline: auto; }
.enquiry-side .side-step { border-top: 2px solid var(--ink); padding: 1rem 0 .4rem; }
.enquiry-side .side-step .step-num { color: var(--gold-deep); font-weight: 500; font-size: .9rem; }
.enquiry-side .side-step h3 { margin: .3rem 0 .4rem; font-size: 1.1rem; }
.enquiry-side .side-step p { color: var(--grey-warm); font-size: .95rem; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: var(--white); border-top: 6px solid var(--gold); }
.site-footer .cols {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: 2.2rem; padding-block: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 940px) { .site-footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .site-footer .cols { grid-template-columns: 1fr; } }
.site-footer .brand-col img { height: 66px; width: auto; margin-bottom: 1rem; }
.site-footer .brand-col p { color: var(--grey-line); font-size: .92rem; max-width: 34ch; }
.site-footer h4 {
  font-family: var(--font-display); font-stretch: 112%; font-size: .76rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--grey-line); margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.site-footer ul a:not(.btn) { color: var(--white); text-decoration: none; font-size: .95rem; }
.site-footer ul a:not(.btn):hover { color: var(--gold); }
.site-footer ul .num { font-family: var(--font-mono); font-size: .8rem; color: var(--gold); margin-right: .5rem; }
.site-footer .foot-cta p { color: var(--grey-line); font-size: .95rem; }
.site-footer .bottom {
  border-top: 1px solid color-mix(in oklab, var(--white) 18%, transparent);
  padding-block: 1.3rem; display: flex; flex-wrap: wrap; gap: .8rem 2rem;
  align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: .78rem; color: var(--grey-line);
}
.site-footer .bottom .strip { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.site-footer .bottom .strip .num { color: var(--gold); margin-right: .35rem; }
.site-footer .bottom a:not(.btn) { color: var(--grey-line); }
.site-footer .disclosure {
  font-size: .8rem; color: color-mix(in oklab, var(--grey-line) 75%, transparent);
  border-top: 1px solid color-mix(in oklab, var(--white) 12%, transparent);
  padding-block: 1rem; margin: 0;
}

/* ── Enquiry CTA band (partial) ────────────────────────────────────────── */
.cta-band { border-top: 6px solid var(--gold); }
.cta-band .inner {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem; align-items: center;
}
@media (max-width: 820px) { .cta-band .inner { grid-template-columns: 1fr; } }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: flex-end; }
@media (max-width: 820px) { .cta-band .actions { justify-content: flex-start; } }

/* ── The Whole-House Schedule (signature) ──────────────────────────────── */
.sched-builder { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2rem; align-items: start; }
@media (max-width: 940px) { .sched-builder { grid-template-columns: 1fr; } }
.sched-controls {
  border: 1px solid var(--grey-line); border-radius: 2px; background: var(--paper);
  padding: 1.4rem; position: sticky; top: 1rem;
}
@media (max-width: 940px) { .sched-controls { position: static; } }
.sched-controls h3 { font-size: 1.05rem; }
.chip-set { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1.1rem; }
.chip {
  font-family: var(--font-body); font-size: .9rem; font-weight: 500; color: var(--ink);
  background: var(--white); border: 1px solid var(--grey-line); border-radius: 2px;
  padding: .5rem .8rem; cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.chip:hover { border-color: var(--grey-warm); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.sched-sheet {
  background: var(--white); border: 1px solid var(--grey-line); border-radius: 2px;
  padding: clamp(1.2rem, 3vw, 2rem);
}
.sched-sheet .sheet-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  border-bottom: 2px solid var(--ink); padding-bottom: .8rem; margin-bottom: .4rem;
}
.sched-sheet .sheet-head .title { font-family: var(--font-display); font-stretch: 112%; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; }
.sched-sheet .sheet-head .mono { font-size: .78rem; color: var(--grey-warm); }
.sched-row {
  display: grid; grid-template-columns: 2.4rem minmax(0, 5fr) minmax(0, 7fr) auto;
  gap: .9rem; padding: .9rem 0; border-bottom: 1px solid var(--grey-line); align-items: start;
}
@media (max-width: 640px) { .sched-row { grid-template-columns: 2rem minmax(0, 1fr) auto; } .sched-row .rec { grid-column: 2 / -1; } }
.sched-row .idx { font-family: var(--font-mono); color: var(--gold-deep); font-weight: 500; padding-top: .1rem; }
.sched-row .opening .o-name { font-weight: 600; }
.sched-row .opening .o-job { font-size: .85rem; color: var(--grey-warm); font-family: var(--font-mono); }
.sched-row .rec .r-cat { font-family: var(--font-mono); font-size: .8rem; color: var(--gold-deep); letter-spacing: .04em; }
.sched-row .rec .r-what { font-weight: 600; }
.sched-row .rec .r-why { font-size: .9rem; color: var(--grey-warm); }
.sched-row .remove {
  background: none; border: 1px solid var(--grey-line); border-radius: 2px; color: var(--grey-warm);
  font-family: var(--font-mono); font-size: .8rem; padding: .25rem .55rem; cursor: pointer;
}
.sched-row .remove:hover { border-color: var(--grey-warm); color: var(--ink); }
.sched-tick { width: 20px; height: 20px; }
.sched-tick .box { fill: none; stroke: var(--ink); stroke-width: 2; }
.sched-tick .tick { fill: none; stroke: var(--gold-deep); stroke-width: 2.6; stroke-linecap: square; }
.sched-empty { padding: 2.2rem 0; color: var(--grey-warm); text-align: center; }
.sched-empty img { margin: 0 auto 1.1rem; }
.sched-empty p { max-width: 44ch; margin-inline: auto; }
.sched-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1.4rem; }
.sched-foot { font-family: var(--font-mono); font-size: .78rem; color: var(--grey-warm); margin-top: 1.2rem; }

/* draw the tick when a row lands */
@keyframes tick-draw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
.sched-row.fresh .sched-tick .tick { stroke-dasharray: 30; animation: tick-draw .5s var(--ease) .15s both; }

/* ── Guide article layout ──────────────────────────────────────────────── */
.article { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.article .body { max-width: 720px; }
.article .body h2 { margin-top: 2.2rem; }
.article .body h3 { margin-top: 1.6rem; }
.article .body ul { padding-left: 1.2rem; }
.article .body li { margin-bottom: .45rem; }
.article .refs {
  border-top: 2px solid var(--ink); margin-top: 3rem; padding-top: 1.2rem; max-width: 720px;
}
.article .refs h2 { font-size: 1rem; font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; }
.article .refs ol { padding-left: 1.2rem; font-size: .92rem; color: var(--grey-warm); }
.article .refs li { margin-bottom: .6rem; }

/* callout — the spec-book note */
.note {
  border-left: 3px solid var(--gold-deep); background: var(--canvas);
  padding: 1rem 1.2rem; margin: 1.4rem 0; font-size: .96rem;
}
.note .n-label { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); display: block; margin-bottom: .3rem; }

/* dimension-line divider */
.dim-rule { height: 18px; background: url("/assets/brand/motif-dimension-line-light.svg") center / auto 18px repeat-x; margin: 2.4rem 0; border: 0; }

/* ── Page hero (inner pages) ───────────────────────────────────────────── */
.page-head { padding-block: clamp(2.2rem, 5vw, 3.8rem); border-bottom: 1px solid var(--grey-line); }
.page-head .lede { margin-top: .4rem; }
.breadcrumb { font-family: var(--font-mono); font-size: .78rem; color: var(--grey-warm); margin-bottom: 1.1rem; }
.breadcrumb a { color: var(--grey-warm); }
.breadcrumb .sep { margin-inline: .45rem; color: var(--grey-line); }

/* two-col media/text section */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.8rem, 4vw, 3.2rem); align-items: center; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

/* ── Reveal on scroll (subtle) ─────────────────────────────────────────────
   No-JS-safe: the resting state is fully visible. motion.js adds html.motion
   ONLY when motion is welcome, and only after marking anything already in view
   as .in, so the hidden state never applies without JS and nothing above the
   fold can flash out. Crawlers and no-JS visitors see the whole page. */
.reveal { transition: opacity .5s var(--ease), transform .5s var(--ease); }
html.motion .reveal:not(.in) { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; }
/* capped stagger for reveals that arrive as a row (schedule-assembling feel) */
html.motion .card-grid .card.reveal:nth-child(2),
html.motion .index-rows .index-row.reveal:nth-child(2) { transition-delay: 70ms; }
html.motion .card-grid .card.reveal:nth-child(3),
html.motion .index-rows .index-row.reveal:nth-child(3) { transition-delay: 140ms; }
html.motion .index-rows .index-row.reveal:nth-child(4) { transition-delay: 210ms; }

/* ── Print: the schedule sheet is a real document ──────────────────────── */
@media print {
  .no-print, .site-header, .site-footer, .cta-band, .nav-drawer, .topline, .sched-controls, .sched-actions, .sched-row .remove { display: none !important; }
  body { background: #fff; }
  .sched-sheet { border: none; padding: 0; }
  .sched-builder { display: block; }
  a { color: inherit; text-decoration: none; }
}

/* ═══ node-motion pass: interaction layer (additive, behaviour only) ═══════
   Ease the hovers that were still snapping, one named signature, and
   focus-visible parity so a keyboard reads the page like a pointer does.
   Every effect lives on :hover / :focus-visible; the resting design is
   untouched, and only transform/opacity/colour move (no layout thrash). */

/* Ease the remaining snapping hovers */
a:not(.btn) { transition: color .15s var(--ease); }
.site-footer ul a:not(.btn),
.breadcrumb a,
.sched-row .remove,
.article .refs a,
.card .cta { transition: color .16s var(--ease), border-color .16s var(--ease); }
.spec-table tr { transition: background-color .16s var(--ease); }

/* ── SIGNATURE: the measure-line ────────────────────────────────────────────
   A tape-measure rule that draws left to right under a navigation label on
   hover or focus, echoing the dimension-line motif the brand already carries.
   GPU-only (scaleX from a left origin); at rest it sits at scaleX(0), so the
   resting look never changes. It reads as a measurement being pulled to a mark,
   guiding the eye to the range, the schedule and the enquiry. */
.nav-primary a:not(.btn),
.nav-drawer nav a:not(.btn),
.site-footer ul a:not(.btn) { position: relative; }
.nav-primary a:not(.btn)::after,
.nav-drawer nav a:not(.btn)::after,
.site-footer ul a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gold-deep);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .18s var(--ease);
}
.nav-drawer nav a:not(.btn)::after,
.site-footer ul a:not(.btn)::after { background: var(--gold); }
.nav-primary a:not(.btn):hover::after,
.nav-primary a:not(.btn):focus-visible::after,
.nav-drawer nav a:not(.btn):hover::after,
.nav-drawer nav a:not(.btn):focus-visible::after,
.site-footer ul a:not(.btn):hover::after,
.site-footer ul a:not(.btn):focus-visible::after { transform: scaleX(1); }

/* ── Focus-visible parity: keyboard gets the same read as the pointer ──────── */
.btn:focus-visible { transform: translateY(-1px); }
.card:focus-visible { border-color: var(--grey-warm); transform: translateY(-2px); }
.index-row:focus-visible { outline-offset: 4px; }
.index-row:focus-visible .num { transform: translateX(6px); }
.index-row:focus-visible .go { background: var(--gold); color: var(--ink); }
.chip:focus-visible { border-color: var(--grey-warm); }

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