/* Self-hosted fonts (was Google Fonts) — latin + latin-ext, variable woff2. */
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:500 700;font-display:swap;src:url('/assets/fonts/bodoni-moda-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:'Bodoni Moda';font-style:italic;font-weight:500 700;font-display:swap;src:url('/assets/fonts/bodoni-moda-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:'Bodoni Moda';font-style:normal;font-weight:500 700;font-display:swap;src:url('/assets/fonts/bodoni-moda-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:'Bodoni Moda';font-style:normal;font-weight:500 700;font-display:swap;src:url('/assets/fonts/bodoni-moda-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:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-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:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-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:'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;}
/* Burwood Removals — site system.
   Brand law: brand-kit/brand-kit.md. Palette + type tokens verbatim from the kit.
   Registers: ink on paper/wash by day, paper on dusk by evening (the signature).
   Never madder on dusk (use lantern). No blue, no navy, no neutral grey. */

:root {
  --bwd-ink: #29241F;
  --bwd-ink-soft: #5A5248;
  --bwd-paper: #F6F1E8;
  --bwd-wash: #F0E3DA;
  --bwd-dusk: #211C17;
  --bwd-madder: #9E2B33;
  --bwd-madder-deep: #7C1F29;
  --bwd-lantern: #DC8378;      /* dark grounds only */
  --bwd-evergreen: #2F5943;
  --bwd-brass: #8A6B2F;        /* decorative on light; on dusk use --bwd-brass-lift */
  --bwd-brass-lift: #C9A45C;

  --bwd-font-display: "Bodoni Moda", "Bodoni MT", Didot, serif;
  --bwd-font-body: "IBM Plex Sans", system-ui, sans-serif;
  --bwd-font-instrument: "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1160px;
  --gutter: clamp(1.1rem, 4vw, 2rem);
  --band-y: clamp(3.2rem, 7vw, 5.5rem);
  --ease: cubic-bezier(.33, .8, .35, 1);
}

/* ─── Reset-ish ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--bwd-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--bwd-ink);
  background: var(--bwd-paper);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
::placeholder { color: rgba(41, 36, 31, .3); }
::selection { background: var(--bwd-madder); color: var(--bwd-paper); }

h1, h2, h3 {
  font-family: var(--bwd-font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  line-height: 1.12;
  margin: 0 0 .6em;
  letter-spacing: .002em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 5.4vw, 3.7rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.42rem, 2.4vw, 1.7rem); } /* Bodoni floor ~22px holds */
h4 { font-family: var(--bwd-font-body); font-weight: 600; font-size: 1.05rem; margin: 0 0 .5em; letter-spacing: .01em; }
p { margin: 0 0 1.1em; }
a { color: var(--bwd-madder); text-decoration-color: rgba(158, 43, 51, .4); text-underline-offset: .16em; }
a:hover { color: var(--bwd-madder-deep); }
strong { font-weight: 600; }
small { font-size: .85rem; }

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

/* Kickers: Plex Mono caps. Madder on light (AA at small size); brass-lift on dusk. */
.kicker {
  display: block;
  font-family: var(--bwd-font-instrument);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bwd-madder);
  margin-bottom: 1rem;
}
.lede { font-size: 1.18rem; line-height: 1.6; max-width: 60ch; }
.muted { color: var(--bwd-ink-soft); }

/* Measurement voice: mono callouts; the numbers ARE the brand. */
.mono, .m { font-family: var(--bwd-font-instrument); font-weight: 500; }
.m-num { font-family: var(--bwd-font-instrument); color: var(--bwd-madder-deep); font-weight: 500; }
.band--dusk .m-num { color: var(--bwd-lantern); }

/* ─── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--bwd-font-body); font-weight: 600; font-size: 1rem;
  color: var(--bwd-paper); background: var(--bwd-madder);
  border: 1.5px solid var(--bwd-madder); border-radius: 3px;
  padding: .78rem 1.55rem; text-decoration: none; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--bwd-madder-deep); border-color: var(--bwd-madder-deep); color: var(--bwd-paper); transform: translateY(-1px); }
.btn svg, .btn img { width: 16px; height: 16px; flex: 0 0 auto; }
/* On dusk: the lit-lantern move. Never madder on dusk. */
.btn-lantern {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--bwd-font-body); font-weight: 600; font-size: 1rem;
  color: var(--bwd-lantern); background: transparent;
  border: 1.5px solid var(--bwd-lantern); border-radius: 3px;
  padding: .78rem 1.55rem; text-decoration: none; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn-lantern:hover { background: var(--bwd-lantern); color: var(--bwd-dusk); transform: translateY(-1px); }
.btn-quiet {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .98rem; color: var(--bwd-madder);
  text-decoration: none; border-bottom: 1.5px solid rgba(158, 43, 51, .35);
  padding-bottom: .1rem; transition: border-color .2s var(--ease);
}
.btn-quiet:hover { border-color: var(--bwd-madder); }

/* ─── Graduation strip: the caliper over the door ───────────── */
.grad-strip {
  height: 12px; background-color: var(--bwd-dusk);
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0, transparent 11px,
      rgba(201, 164, 92, .55) 11px, rgba(201, 164, 92, .55) 12.5px,
      transparent 12.5px, transparent 59px,
      rgba(201, 164, 92, .85) 59px, rgba(201, 164, 92, .85) 60.5px);
  background-size: 60px 100%;
  background-position: bottom;
}

/* ─── Header ────────────────────────────────────────────────── */
.site-head {
  background: var(--bwd-paper);
  border-bottom: 1px solid rgba(41, 36, 31, .14);
  position: relative; z-index: 40;
}
.site-head .wrap { display: flex; align-items: center; gap: 1.4rem; min-height: 76px; }
.brand-link { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand-link img { height: 52px; width: auto; display: block; }
.nav-primary { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }
.nav-primary a:not(.btn) {
  font-size: .98rem; font-weight: 500; color: var(--bwd-ink);
  text-decoration: none; letter-spacing: .01em;
  border-bottom: 2px solid transparent; padding: .2rem 0;
  transition: border-color .2s var(--ease);
}
.nav-primary a:not(.btn):hover { border-bottom-color: var(--bwd-madder); color: var(--bwd-ink); }
/* 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="measure-up"] .nav-primary a[href="/measure-up/"],
body[data-page="faq"] .nav-primary a[href="/faq/"],
body[data-page="about"] .nav-primary a[href="/about/"] { border-bottom-color: var(--bwd-madder); }
.nav-primary .btn { padding: .6rem 1.15rem; font-size: .95rem; }

.nav-toggle {
  margin-left: auto; display: none; background: none; border: none; cursor: pointer;
  min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
  padding: .55rem .5rem; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 26px; height: 2.5px; background: var(--bwd-ink); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile drawer: the evening register. Link rules scoped with :not(.btn*): buttons keep their own colour. */
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(21rem, 88vw); z-index: 60;
  background: var(--bwd-dusk); color: var(--bwd-paper);
  padding: 1.4rem 1.6rem 2rem; overflow-y: auto;
  transform: translateX(102%); transition: transform .28s var(--ease);
  box-shadow: -18px 0 48px rgba(33, 28, 23, .45);
}
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem; }
.drawer-head img { height: 44px; width: auto; }
.drawer-close { background: none; border: none; color: var(--bwd-paper); font-size: 1.9rem; line-height: 1; cursor: pointer; padding: .2rem .4rem; }
.drawer nav { display: flex; flex-direction: column; }
.drawer nav a:not(.btn):not(.btn-lantern) {
  color: var(--bwd-paper); text-decoration: none; font-size: 1.12rem; font-weight: 500;
  padding: .78rem 0; border-bottom: 1px solid rgba(246, 241, 232, .12);
}
.drawer nav a:not(.btn):not(.btn-lantern):hover { color: var(--bwd-lantern); }
.drawer .btn { margin-top: 1.5rem; width: 100%; }
.drawer .drawer-note { font-size: .84rem; color: rgba(246, 241, 232, .6); margin-top: 1.1rem; }
.scrim { position: fixed; inset: 0; z-index: 55; background: rgba(33, 28, 23, .55); opacity: 0; pointer-events: none; transition: opacity .25s; }
.scrim.show { opacity: 1; pointer-events: auto; }

@media (max-width: 920px) {
  .nav-primary { display: none; }
  .nav-toggle { display: flex; }
}

/* ─── Bands ─────────────────────────────────────────────────── */
.band { padding-block: var(--band-y); position: relative; }
.band--wash { background-color: var(--bwd-wash); }
.band--dusk { background-color: var(--bwd-dusk); color: var(--bwd-paper); }
.band--dusk h1, .band--dusk h2, .band--dusk h3 { color: var(--bwd-paper); }
.band--dusk .kicker { color: var(--bwd-brass-lift); }
.band--dusk .muted { color: rgba(246, 241, 232, .68); }
.band--dusk a:not(.btn):not(.btn-lantern) { color: var(--bwd-lantern); text-decoration-color: rgba(220, 131, 120, .45); }
.band--dusk a:not(.btn):not(.btn-lantern):hover { color: var(--bwd-paper); }
/* pattern grounds: opacity baked into the tiles, place as-is */
.bg-quarry { background-image: url(/assets/brand/textures/pattern-quarry-whisper.svg); }
.bg-rule { background-image: url(/assets/brand/textures/pattern-rule-whisper.svg); }
.bg-brick { background-image: url(/assets/brand/textures/pattern-brick-whisper.svg); }
.bg-paper-tex { background-image: url(/assets/brand/textures/texture-paper-cream.webp); background-size: cover; }
.bg-plaster { background-image: url(/assets/brand/textures/texture-plaster-charcoal.webp); background-size: cover; }

/* seam motifs: band furniture, one per seam */
.seam { display: block; line-height: 0; }
.seam img { width: min(960px, 92%); display: block; margin-inline: auto; }

/* dusk watermark (footer only: one watermark per contiguous dusk region) */
.has-watermark { overflow: clip; position: relative; }
.has-watermark .watermark {
  position: absolute; width: 640px; right: -120px; bottom: -150px;
  pointer-events: none; user-select: none;
}

/* ─── Brand furniture ───────────────────────────────────────── */
hr, .rule-divider { border: none; margin: 2.6rem auto; height: 14px; width: 150px;
  background: url(/assets/brand/micro/divider.svg) center / contain no-repeat; }
ul.riveted { list-style: none; padding-left: 0; margin: 0 0 1.2em; }
ul.riveted li { padding-left: 1.5em; position: relative; margin-bottom: .55em; }
ul.riveted li::before {
  content: ""; position: absolute; left: .1em; top: .48em; width: 10px; height: 10px;
  background: url(/assets/brand/micro/bullet.svg) center / contain no-repeat;
}
blockquote.tassel {
  margin: 2rem 0; padding: .4rem 0 .4rem 3.2rem; position: relative;
  font-family: var(--bwd-font-display); font-size: 1.3rem; line-height: 1.45;
}
blockquote.tassel::before {
  content: ""; position: absolute; left: 0; top: .5rem; width: 30px; height: 30px;
  background: url(/assets/brand/micro/quote.svg) center / contain no-repeat;
}

/* photo frames with a dimension-line caption: the measured photograph */
figure.frame { margin: 0; }
figure.frame img { display: block; width: 100%; border-radius: 4px; box-shadow: 0 10px 34px rgba(33, 28, 23, .18); }
figure.frame figcaption {
  display: flex; align-items: center; gap: .7rem; margin-top: .7rem;
  font-family: var(--bwd-font-instrument); font-size: .8rem; letter-spacing: .04em;
  color: var(--bwd-ink-soft);
}
figure.frame figcaption::before, figure.frame figcaption::after {
  content: ""; flex: 1; height: 7px; min-width: 26px;
  background:
    linear-gradient(currentColor, currentColor) left center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) left center / 1px 7px no-repeat,
    linear-gradient(currentColor, currentColor) right center / 1px 7px no-repeat;
  opacity: .55;
}
.band--dusk figure.frame figcaption { color: rgba(246, 241, 232, .62); }
.band--dusk figure.frame img { box-shadow: 0 14px 44px rgba(0, 0, 0, .5); }

/* ─── Hero (home) ───────────────────────────────────────────── */
.hero { padding-block: clamp(3rem, 7vw, 5.2rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.8rem, 4.5vw, 4rem); align-items: center; }
.hero h1 { margin-bottom: .35em; }
.hero .tagline {
  font-family: var(--bwd-font-display); font-style: italic; font-size: 1.45rem;
  color: var(--bwd-lantern); margin: 0 0 .9rem;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.7rem; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem; margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid rgba(246, 241, 232, .16); }
.hero-facts div { font-size: .86rem; color: rgba(246, 241, 232, .72); }
.hero-facts .m { display: block; font-size: 1.06rem; color: var(--bwd-brass-lift); margin-bottom: .1rem; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }

/* ─── Door panels (the two grammars) ────────────────────────── */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2.6vw, 2rem); }
.door {
  background: var(--bwd-paper); border: 1px solid rgba(41, 36, 31, .16); border-radius: 5px;
  padding: clamp(1.4rem, 3vw, 2.2rem); position: relative; overflow: clip;
  display: flex; flex-direction: column; gap: .4rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.door:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(33, 28, 23, .14); }
.door .door-icon { width: 72px; height: 72px; margin-bottom: .9rem; }
.door .door-kicker { font-family: var(--bwd-font-instrument); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bwd-madder); margin-bottom: .4rem; }
.door h3 { margin-bottom: .4rem; }
.door ul.riveted { margin-top: .5rem; }
.door .door-foot { margin-top: auto; padding-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }
.door--tower { background-image: url(/assets/brand/textures/pattern-rule-firm.svg); }
.door--federation { background-image: url(/assets/brand/textures/pattern-brick-firm.svg); }
@media (max-width: 760px) { .doors { grid-template-columns: 1fr; } }

/* ─── Tier cards ────────────────────────────────────────────── */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 1.8rem); }
.tier {
  background: var(--bwd-paper); border: 1px solid rgba(41, 36, 31, .16); border-radius: 5px;
  padding: 1.6rem 1.5rem 1.5rem; display: flex; flex-direction: column;
}
.tier.tier--lead { border-color: var(--bwd-madder); border-width: 1.5px; }
.tier .tier-name { font-family: var(--bwd-font-display); font-size: 1.45rem; font-weight: 600; margin-bottom: .2rem; }
.tier .tier-crew { font-family: var(--bwd-font-instrument); font-size: .84rem; color: var(--bwd-ink-soft); letter-spacing: .03em; margin-bottom: 1rem; }
.tier .tier-rate { font-family: var(--bwd-font-instrument); font-weight: 500; font-size: 2rem; color: var(--bwd-madder-deep); line-height: 1; margin-bottom: .2rem; }
.tier .tier-rate small { font-size: .95rem; color: var(--bwd-ink-soft); font-weight: 400; }
.tier p { font-size: .95rem; color: var(--bwd-ink-soft); margin: .8rem 0 0; }
.tier .tier-foot { margin-top: auto; padding-top: 1.1rem; }
@media (max-width: 820px) { .tiers { grid-template-columns: 1fr; } }

/* ─── Spec list (supporting services, measured rows) ────────── */
.spec-rows { border-top: 1px solid rgba(41, 36, 31, .18); }
.spec-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 1.2rem; align-items: center;
  padding: 1.05rem 0; border-bottom: 1px solid rgba(41, 36, 31, .18);
  text-decoration: none; color: var(--bwd-ink);
  transition: background .2s var(--ease);
}
.spec-row:hover { background: rgba(240, 227, 218, .5); color: var(--bwd-ink); }
.spec-row img { width: 52px; height: 52px; }
.spec-row .spec-name { font-weight: 600; font-size: 1.06rem; }
.spec-row .spec-sub { font-size: .9rem; color: var(--bwd-ink-soft); }
.spec-row .spec-go { font-family: var(--bwd-font-instrument); font-size: .84rem; color: var(--bwd-madder); white-space: nowrap; }
@media (max-width: 640px) {
  .spec-row { grid-template-columns: 44px minmax(0, 1fr); }
  .spec-row img { width: 40px; height: 40px; }
  .spec-row .spec-go { display: none; }
}

/* ─── Steps (how the day runs) ──────────────────────────────── */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.step { counter-increment: step; position: relative; padding-top: .4rem; }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--bwd-font-display); font-size: 2.6rem; font-weight: 600;
  color: var(--bwd-brass); display: block; line-height: 1; margin-bottom: .55rem;
}
.step h4 { margin-bottom: .3em; }
.step p { font-size: .94rem; color: var(--bwd-ink-soft); margin: 0; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }

/* ─── Rail diagram ──────────────────────────────────────────── */
.rail-diagram { margin: 2.2rem 0 1.4rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* edge fades signal the strip pans — without them a cut tick at the viewport edge reads as a rendering bug */
  mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent); }
.rail-diagram svg { width: 100%; height: auto; display: block; }
/* Below ~800px the uniform SVG scale makes the station labels illegible;
   keep the diagram at a readable width and let it scroll sideways instead
   (same furniture as .table-scroll — the page itself never scrolls). */
@media (max-width: 800px) { .rail-diagram svg { min-width: 760px; } }
.area-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 1.8rem); }
.area-card {
  background: var(--bwd-paper); border: 1px solid rgba(41, 36, 31, .16); border-radius: 5px;
  overflow: clip; text-decoration: none; color: var(--bwd-ink); display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.area-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(33, 28, 23, .14); color: var(--bwd-ink); }
.area-card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.area-card .area-body { padding: 1.15rem 1.3rem 1.3rem; }
.area-card .area-line { font-family: var(--bwd-font-instrument); font-size: .78rem; letter-spacing: .06em; color: var(--bwd-madder); display: block; margin-bottom: .35rem; }
.area-card h3 { margin-bottom: .3rem; }
.area-card p { font-size: .93rem; color: var(--bwd-ink-soft); margin: 0; }
.area-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.8rem; }
.area-chips span {
  font-family: var(--bwd-font-instrument); font-size: .8rem; letter-spacing: .04em;
  border: 1px solid rgba(41, 36, 31, .25); border-radius: 999px; padding: .28rem .8rem;
  color: var(--bwd-ink-soft);
}
@media (max-width: 820px) { .area-cards { grid-template-columns: 1fr; } }

/* ─── Tables: measurements align to the millimetre ──────────── */
.table-scroll { overflow-x: auto; }
table.spec { border-collapse: collapse; width: 100%; font-feature-settings: "tnum"; min-width: 520px; }
table.spec th, table.spec td { text-align: left; padding: .7rem .9rem .7rem 0; border-bottom: 1px solid rgba(41, 36, 31, .16); vertical-align: top; }
table.spec th { font-family: var(--bwd-font-instrument); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bwd-ink-soft); font-weight: 500; }
table.spec td.num { font-family: var(--bwd-font-instrument); text-align: right; padding-right: 1.6rem; white-space: nowrap; }
table.spec td.num:last-child { padding-right: 0; }

/* ─── Guide/long-form pages ─────────────────────────────────── */
.article { max-width: 760px; }
.article h2 { margin-top: 2.4rem; }
.article h3 { margin-top: 1.9rem; }
.article figure.frame { margin: 2.2rem 0; }
.refs { border-top: 1px solid rgba(41, 36, 31, .18); margin-top: 3rem; padding-top: 1.4rem; }
.refs h2 { font-size: 1.42rem; }
.refs li { margin-bottom: .7em; font-size: .95rem; }
.crumbs { font-family: var(--bwd-font-instrument); font-size: .78rem; letter-spacing: .05em; color: var(--bwd-ink-soft); margin-bottom: 1.6rem; }
.crumbs a { color: var(--bwd-ink-soft); }
.crumbs a:hover { color: var(--bwd-madder); }

/* guide cards on the index */
.guide-list { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2.6vw, 2rem); }
.guide-card {
  border: 1px solid rgba(41, 36, 31, .16); border-radius: 5px; background: var(--bwd-paper);
  padding: 1.7rem 1.7rem 1.5rem; text-decoration: none; color: var(--bwd-ink);
  display: flex; flex-direction: column; gap: .3rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.guide-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(33, 28, 23, .14); color: var(--bwd-ink); }
.guide-card .door-kicker { font-family: var(--bwd-font-instrument); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bwd-madder); }
.guide-card p { font-size: .95rem; color: var(--bwd-ink-soft); margin: .3rem 0 0; }
.guide-card .spec-go { margin-top: 1rem; font-family: var(--bwd-font-instrument); font-size: .84rem; color: var(--bwd-madder); }
@media (max-width: 720px) { .guide-list { grid-template-columns: 1fr; } }

/* ─── FAQ ───────────────────────────────────────────────────── */
details.faq {
  border-bottom: 1px solid rgba(41, 36, 31, .18); padding: .3rem 0;
}
details.faq summary {
  cursor: pointer; font-weight: 600; font-size: 1.08rem; padding: 1rem 2.2rem 1rem 0;
  list-style: none; position: relative;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: ""; position: absolute; right: .3rem; top: 50%; width: 12px; height: 12px;
  border-right: 2px solid var(--bwd-madder); border-bottom: 2px solid var(--bwd-madder);
  transform: translateY(-70%) rotate(45deg); transition: transform .22s var(--ease);
}
details.faq[open] summary::after { transform: translateY(-30%) rotate(225deg); }
details.faq .faq-body { padding: 0 0 1.2rem; max-width: 68ch; color: var(--bwd-ink-soft); }

/* ─── Forms ─────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.4rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } /* two-up on phone clips the service select's option text */
.form-grid .full { grid-column: 1 / -1; }
label.f { display: block; font-weight: 600; font-size: .92rem; }
label.f .opt { font-weight: 400; color: var(--bwd-ink-soft); }
label.f input, label.f select, label.f textarea {
  display: block; width: 100%; margin-top: .35rem;
  font: inherit; color: var(--bwd-ink);
  background: var(--bwd-paper); border: 1px solid rgba(41, 36, 31, .3); border-radius: 3px;
  padding: .68rem .8rem;
}
label.f textarea { min-height: 8.5rem; resize: vertical; }
label.f input:focus, label.f select:focus, label.f textarea:focus {
  outline: 2px solid var(--bwd-madder); outline-offset: 1px; border-color: var(--bwd-madder);
}
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.lead-result { border-radius: 4px; padding: 1.3rem 1.5rem; margin-top: 1.4rem; }
.lead-result.ok { background: var(--bwd-evergreen); color: var(--bwd-paper); display: flex; gap: 1.1rem; align-items: center; }
.lead-result.ok img { width: 64px; height: 64px; flex: 0 0 auto; }
.lead-result.err { background: var(--bwd-madder-deep); color: var(--bwd-paper); }

/* ─── Measure-Up tool ───────────────────────────────────────── */
.mu-frame {
  background: var(--bwd-dusk); color: var(--bwd-paper); border-radius: 6px;
  padding: clamp(1.5rem, 3.6vw, 2.8rem); position: relative; overflow: clip;
  background-image: url(/assets/brand/textures/texture-plaster-charcoal.webp); background-size: cover;
}
.mu-frame .kicker { color: var(--bwd-brass-lift); }
.mu-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.mu-door {
  background: rgba(246, 241, 232, .045); border: 1px solid rgba(246, 241, 232, .22); border-radius: 5px;
  padding: 1.6rem; text-align: left; color: var(--bwd-paper); cursor: pointer; font: inherit;
  display: flex; flex-direction: column; gap: .3rem; text-decoration: none;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.mu-door:hover { border-color: var(--bwd-lantern); background: rgba(246, 241, 232, .08); transform: translateY(-2px); color: var(--bwd-paper); }
.mu-door img { width: 64px; height: 64px; margin-bottom: .7rem; }
.mu-door .mu-door-name { font-family: var(--bwd-font-display); font-size: 1.5rem; font-weight: 600; }
.mu-door p { font-size: .92rem; color: rgba(246, 241, 232, .7); margin: 0; }
@media (max-width: 700px) { .mu-doors { grid-template-columns: 1fr; } }

.mu-rule { margin: 1.8rem 0 1.4rem; }
.mu-rule svg { width: 100%; max-width: 560px; height: auto; display: block; }
.mu-q h3 { margin-bottom: 1.1rem; }
.mu-opts { display: grid; gap: .7rem; }
.mu-opt {
  text-align: left; font: inherit; color: var(--bwd-paper); cursor: pointer;
  background: rgba(246, 241, 232, .05); border: 1px solid rgba(246, 241, 232, .25); border-radius: 4px;
  padding: .85rem 1.1rem; transition: border-color .18s var(--ease), background .18s var(--ease);
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
}
.mu-opt:hover { border-color: var(--bwd-lantern); background: rgba(246, 241, 232, .09); }
.mu-opt .mu-opt-note { font-family: var(--bwd-font-instrument); font-size: .78rem; color: rgba(246, 241, 232, .55); }
.mu-skip { background: none; border: none; color: rgba(246, 241, 232, .6); font: inherit; font-size: .88rem; cursor: pointer; margin-top: 1rem; text-decoration: underline; text-underline-offset: .16em; }
.mu-skip:hover { color: var(--bwd-lantern); }
.mu-back { background: none; border: none; color: rgba(246, 241, 232, .6); font: inherit; font-size: .88rem; cursor: pointer; text-decoration: underline; text-underline-offset: .16em; padding: 0; }
.mu-back:hover { color: var(--bwd-lantern); }

.mu-result .mu-tier {
  border: 1px solid var(--bwd-brass-lift); border-radius: 5px; padding: 1.3rem 1.5rem; margin: 1.4rem 0;
  display: flex; flex-wrap: wrap; gap: .4rem 2rem; align-items: baseline;
}
.mu-result .mu-tier .m { font-size: 1.6rem; color: var(--bwd-brass-lift); }
.mu-result .mu-tier .mu-tier-crew { font-family: var(--bwd-font-instrument); font-size: .9rem; color: rgba(246, 241, 232, .7); }
.mu-runsheet { list-style: none; padding: 0; margin: 1.2rem 0; }
.mu-runsheet li { padding: .6rem 0 .6rem 2rem; position: relative; border-bottom: 1px solid rgba(246, 241, 232, .12); font-size: .97rem; }
.mu-runsheet li::before {
  content: ""; position: absolute; left: .2rem; top: .95rem; width: 12px; height: 12px;
  border: 1.5px solid var(--bwd-brass-lift); border-radius: 2px;
}
.mu-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; }
.mu-fineprint { font-size: .82rem; color: rgba(246, 241, 232, .55); margin-top: 1.3rem; max-width: 62ch; }

/* ─── Enquiry CTA band + footer ─────────────────────────────── */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 22ch; margin-inline: auto; }
.cta-band .lede { margin-inline: auto; }
.cta-band .hero-ctas { justify-content: center; }

.site-foot { background: var(--bwd-dusk); color: rgba(246, 241, 232, .78); font-size: .95rem; }
.site-foot .foot-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: 2.4rem; padding-block: 3.4rem 2.6rem;
}
.site-foot .foot-brand img { width: 190px; height: auto; margin-bottom: 1rem; }
.site-foot .foot-brand p { margin: 0 0 .5em; }
.site-foot h4 { color: var(--bwd-brass-lift); font-family: var(--bwd-font-instrument); font-weight: 500; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: .9em; }
.site-foot nav { display: flex; flex-direction: column; gap: .45rem; }
.site-foot a:not(.btn):not(.btn-lantern) { color: rgba(246, 241, 232, .78); text-decoration: none; }
.site-foot a:not(.btn):not(.btn-lantern):hover { color: var(--bwd-lantern); }
.site-foot .foot-bottom {
  border-top: 1px solid rgba(246, 241, 232, .14); padding-block: 1.3rem 1.6rem;
  display: flex; flex-wrap: wrap; gap: .8rem 2rem; justify-content: space-between;
  font-size: .8rem; color: rgba(246, 241, 232, .55);
}
.site-foot .foot-bottom nav { flex-direction: row; gap: 1.4rem; }
.site-foot .foot-bottom a { color: rgba(246, 241, 232, .55); }
@media (max-width: 900px) { .site-foot .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-foot .foot-grid { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ─── Page heads (inner pages) ──────────────────────────────── */
.page-head { padding-block: clamp(2.6rem, 5.5vw, 4rem) clamp(1.8rem, 4vw, 2.6rem); }
.page-head .lede { margin-top: .4rem; }

/* split feature: text + framed photo */
.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(1.8rem, 4vw, 3.6rem); align-items: center; }
.split.flip > figure { order: -1; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split.flip > figure { order: 0; } }

/* 404 */
.notfound { text-align: center; padding-block: clamp(3rem, 8vw, 6rem); }
.notfound img { width: min(320px, 70%); margin-bottom: 1.6rem; }

/* utility */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.maxw { max-width: 68ch; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3vw, 2.6rem); }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }
.enquiry-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; }
@media (max-width: 820px) { .enquiry-grid { grid-template-columns: 1fr; } }

/* ─── Motion floor ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}