/* Blinds GP, direction A: The House Call. One typeface, 18px floor, sage surfaces, gold and brick as small accents only. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("/assets/fonts/atkinson-hyperlegible-next-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;
}
:root {
  --paper: #F7F6F2;
  --panel: #FFFFFF;
  --ink: #2A2A2A;
  --ink-2: #4A4A4A;
  --sage: #5A6650;        /* text-safe deep sage: 5.6:1 on paper, 6.0:1 under white */
  --sage-2: #6C7A5E;      /* brand sage, surfaces and rules only */
  --sage-light: #B2CBB9;  /* panels with ink text, 7.3:1 */
  --sage-tint: #E9EEE7;
  --charcoal: #333333;
  --black: #0B0B0B;      /* header, footer and logo panels: the logo is drawn on black */
  --board-text: #F7F6F2;
  --gold: #F0C43C;
  --brick: #A32620;
  --line: #D9D9D1;
  --focus: #2A2A2A;
  --radius: 6px;
  --wrap: 1160px;
  --space: 56px;
}
html[data-contrast="high"] {
  --paper: #FFFFFF; --panel: #FFFFFF; --ink: #000000; --ink-2: #000000; --sage: #2F3A2A; --sage-2: #2F3A2A;
  --sage-light: #FFFFFF; --sage-tint: #FFFFFF; --charcoal: #000000; --black: #000000; --board-text: #FFFFFF; --gold: #8A6A00; --brick: #7A0F0F; --line: #000000; --focus: #0000EE;
}
html { font-size: 18px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html[data-text="big"] { font-size: 21px; }
@media (min-width: 900px) { html { font-size: 19px; } html[data-text="big"] { font-size: 22px; } }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Atkinson Hyperlegible Next", Arial, Helvetica, sans-serif; font-size: 1rem; line-height: 1.55; color: var(--ink); background: var(--paper); font-variant-numeric: tabular-nums; }
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { line-height: 1.12; margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p, ul, ol, dl { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--sage); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
strong { font-weight: 700; }
small, .small { font-size: 0.89rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
@media (min-width: 900px) { .wrap { padding: 0 28px; } }
.skip { position: absolute; left: 12px; top: -60px; background: var(--charcoal); color: var(--board-text); padding: 10px 16px; z-index: 100; border-radius: var(--radius); }
.skip:focus { top: 12px; }
.todo { color: var(--ink-2); font-style: italic; }
.lede { font-size: 1.2rem; max-width: 34em; }
.eyebrow { font-weight: 700; color: var(--sage); margin-bottom: 0.6em; }
.section { padding: var(--space) 0; }
.section-tint { background: var(--sage-tint); }
.section-panel { background: var(--panel); }
.section-head { max-width: 40em; margin-bottom: 1.6rem; }
.section-head p { color: var(--ink-2); }
@media (min-width: 900px) { :root { --space: 84px; } }
.grid-2 { display: grid; gap: 28px; }
.grid-3 { display: grid; gap: 24px; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: 40px; } .grid-2.wide-left { grid-template-columns: 1.15fr 1fr; } .grid-2.center { align-items: center; } .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 20px; border: 2px solid var(--sage); border-radius: 999px; background: var(--panel); color: var(--sage); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1.2; }
.btn:hover { background: var(--sage-tint); color: var(--ink); border-color: var(--ink); }
.btn-primary { background: var(--sage); color: #FFFFFF; }
.btn-primary:hover { background: var(--charcoal); border-color: var(--charcoal); color: #FFFFFF; }
.btn-lg { min-height: 56px; padding: 12px 26px; font-size: 1.1rem; }
.btn-phone { border-color: var(--charcoal); color: var(--charcoal); }
.site-header .btn-phone { border-color: var(--board-text); color: var(--board-text); background: transparent; }
.site-header .btn-phone:hover { background: var(--board-text); color: var(--ink); }
.site-header .btn-primary { border-color: var(--sage-2); }
.site-header .btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn .ico { flex: none; width: 20px; height: 20px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.2rem; }
.textlink { font-weight: 700; }

/* Utility bar and header */
.util { background: var(--charcoal); color: var(--board-text); font-size: 0.89rem; }
.util-row { display: flex; justify-content: space-between; align-items: center; min-height: 44px; gap: 12px; }
.util-line { margin: 0; }
.modes { display: flex; gap: 8px; }
.mode { min-height: 40px; padding: 4px 12px; border: 2px solid var(--board-text); border-radius: 999px; background: transparent; color: var(--board-text); font: inherit; font-size: 0.89rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.mode[aria-pressed="true"] { background: var(--gold); color: var(--charcoal); border-color: var(--gold); }
.mode .hc { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 50%); border: 2px solid currentColor; }
.util .modes { display: none; }
@media (min-width: 760px) { .util .modes { display: flex; } }
.site-header { background: var(--black); color: var(--board-text); border-bottom: 2px solid var(--black); position: sticky; top: 0; z-index: 50; }
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; min-height: 72px; padding-top: 10px; padding-bottom: 10px; }
.brand { display: flex; align-items: center; text-decoration: none; line-height: 0; }
.brand-logo { width: 116px; height: auto; }
@media (min-width: 900px) { .brand-logo { width: 200px; } }
.brand:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
.header-quick { display: flex; align-items: center; gap: 8px; }
.nav-list a, .header-quick .btn, .menu-btn { white-space: nowrap; }
@media (max-width: 479px) { .header-quick .call-num { display: none; } }
@media (min-width: 480px) and (max-width: 1239px) { .menu-btn .menu-label { position: static; width: auto; height: auto; clip: auto; } }
@media (max-width: 1239px) { .header-quick .btn-primary { padding: 8px 12px; min-height: 44px; } .menu-btn { padding: 8px 12px; } .menu-btn .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .util { display: none; } /* the fact lives in the hero and footer; the reading modes live in the menu panel */ .header-row { min-height: 64px; padding-top: 8px; padding-bottom: 8px; } }
.header-quick .btn-phone { display: none; }
.menu-btn { min-height: 48px; min-width: 48px; padding: 8px 14px; border: 2px solid var(--board-text); border-radius: 999px; background: transparent; color: var(--board-text); font: inherit; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.menu-bars { width: 20px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.menu-btn[aria-expanded="true"] .menu-bars { box-shadow: none; transform: rotate(45deg); }
.nav { flex-basis: 100%; }
.nav[hidden] { display: none; }
html:not(.js) .nav[hidden] { display: block; } /* no JS: the full list shows, since nothing could open it */
.nav-list { list-style: none; margin: 0; padding: 8px 0 0; display: flex; flex-direction: column; gap: 4px; }
.nav-list a { display: block; padding: 12px 8px; text-decoration: none; font-weight: 700; color: var(--board-text); border-radius: var(--radius); min-height: 48px; }
.nav-list a:hover, .nav-list a[aria-current="page"] { background: var(--sage-light); color: var(--ink); }
.nav-list a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.nav-mobile-only { display: flex; flex-direction: column; gap: 10px; padding: 12px 8px 16px; }
.nav-mobile-only .modes { flex-wrap: wrap; }
.nav-mobile-only .mode { border-color: var(--board-text); color: var(--board-text); background: transparent; }
.nav-mobile-only .mode[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--charcoal); }
@media (min-width: 1240px) {
  .header-row { flex-wrap: nowrap; }
  .menu-btn { display: none; }
  .nav { flex-basis: auto; order: 2; }
  .nav[hidden] { display: block; }
  .header-quick { order: 3; }
  .header-quick .btn-phone { display: inline-flex; }
  .nav-list { flex-direction: row; gap: 2px; padding: 0; }
  .nav-list a { padding: 10px 12px; }
  .nav-mobile-only { display: none; }
}

/* Hero */
.hero { padding: 40px 0 var(--space); }
.hero h1 { margin-top: 0.2em; }
.facts { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); }
.facts li { display: flex; align-items: center; gap: 10px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid var(--charcoal); flex: none; }
.photo { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--sage-light); }
.photo img { width: 100%; height: auto; }
.photo figcaption { font-size: 0.89rem; color: var(--ink-2); padding: 8px 2px 0; }
.photo.frame { border: 2px solid var(--line); background: var(--panel); padding: 8px; }
.grid-2:not(.center) > .photo, .grid-3 > .photo { align-self: start; } /* a landscape photo beside a portrait one must not stretch into a tall sage block */
.photo.frame img { border-radius: 3px; }

/* Home hero with the brand film behind the copy. The poster paints first (it is the LCP image); on screens 760 px and wider,
   without reduced motion or Save-Data, site.js starts the muted loop and fades it in over the poster. "Watch the film" turns the
   same frame into a theatre: full film, sound, controls, copy hidden, Close button; the end of the film or Escape brings the loop back. */
.hero-film { position: relative; padding: 0; background: var(--black); color: var(--board-text); overflow: hidden; isolation: isolate; }
.hero-film h1 { color: #FFFFFF; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media picture { display: contents; }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.hero-media video { opacity: 0; transition: opacity 0.9s ease; }
.hero-media video.is-on { opacity: 1; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 11, 0.42) 0%, rgba(11, 11, 11, 0.6) 50%, rgba(11, 11, 11, 0.84) 100%); }
.hero-film .hero-content { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: min(78vh, 720px); padding-top: clamp(56px, 12vw, 120px); padding-bottom: clamp(44px, 8vw, 84px); }
.hero-film .eyebrow { color: var(--gold); }
.hero-film .lede { color: var(--board-text); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.hero-film h1 { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); }
.hero-film .facts { color: var(--board-text); }
.hero-film .dot { border-color: var(--board-text); }
.hero-film .btn { background: transparent; color: var(--board-text); border-color: var(--board-text); }
.hero-film .btn:hover { background: var(--board-text); color: var(--ink); border-color: var(--board-text); }
.hero-film .btn-primary { background: var(--sage); border-color: var(--sage); color: #FFFFFF; }
.hero-film .btn-primary:hover { background: var(--gold); border-color: var(--gold); color: var(--charcoal); }
.hero-film .btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.hero-watch .small { font-weight: 400; opacity: 0.9; }
.hero-close { position: absolute; right: 16px; top: 16px; z-index: 3; background: rgba(11, 11, 11, 0.8); }
.hero-close[hidden] { display: none; }
.hero-film.is-theatre .hero-content { display: none; }
.hero-film.is-theatre .hero-media { position: relative; inset: auto; z-index: 0; width: 100%; aspect-ratio: 16 / 9; max-height: 84vh; }
.hero-film.is-theatre .hero-media::after { display: none; }
.hero-film.is-theatre .hero-media img { display: none; }
.hero-film.is-theatre .hero-media video { opacity: 1; object-fit: contain; background: var(--black); }
.hero-film.compact .hero-content { min-height: min(54vh, 500px); padding-top: clamp(44px, 9vw, 88px); padding-bottom: clamp(36px, 6vw, 64px); }
.hero-film a:not(.btn) { color: var(--gold); }
.hero-film a:not(.btn):hover { color: #FFFFFF; }
.hero-film .mark { margin-bottom: 0.7rem; align-self: flex-start; }
.has-hero-film .crumbs { background: var(--black); color: var(--board-text); padding-bottom: 12px; } /* the breadcrumb strip joins the header and the film hero into one dark block */
.has-hero-film .crumbs a { color: var(--gold); }
.has-hero-film .crumbs li + li::before, .has-hero-film .crumbs [aria-current="page"] { color: var(--board-text); }
@media (max-width: 759px) {
  /* phones: the loop is a 9:16 cut, so let more of it through at the top and keep the copy legible with a heavier foot */
  .hero-media::after { background: linear-gradient(180deg, rgba(11, 11, 11, 0.34) 0%, rgba(11, 11, 11, 0.5) 40%, rgba(11, 11, 11, 0.84) 100%); }
  .hero-film .hero-content { min-height: min(80vh, 760px); }
  .hero-film.compact .hero-content { min-height: min(66vh, 620px); }
  .hero-film .lede { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
}
@media (prefers-reduced-motion: reduce) { .hero-media video { transition: none; } }

/* Fee board */
.board { background: var(--charcoal); color: var(--board-text); border-radius: var(--radius); padding: 8px 24px 20px; position: relative; }
.board-tag { display: inline-block; background: var(--gold); color: var(--charcoal); font-weight: 700; font-size: 0.89rem; padding: 4px 12px; border-radius: 0 0 6px 6px; margin-bottom: 12px; }
.board-row { display: grid; gap: 6px 24px; padding: 20px 0; border-top: 1px solid rgba(240, 196, 60, 0.55); }
.board-row:first-of-type { border-top: 0; }
.board-row h3 { margin: 0 0 0.2em; color: var(--board-text); }
.board-row p { margin: 0; color: var(--board-text); }
.board-svc p { opacity: .92; max-width: 34em; }
.board-price { display: flex; flex-direction: column; align-items: flex-start; }
.board-price .amt { font-size: 1.9rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.board-price .unit { font-size: 0.89rem; opacity: .92; }
.board-foot { font-size: 0.89rem; opacity: .92; border-top: 1px solid rgba(240, 196, 60, 0.55); padding-top: 14px; margin: 0; }
.board a { color: var(--gold); }
.board a:hover { color: #FFFFFF; }
@media (min-width: 760px) { .board { padding: 8px 32px 24px; } .board-row { grid-template-columns: 1fr auto; align-items: start; } .board-price { align-items: flex-end; text-align: right; } }
html[data-contrast="high"] .board-row, html[data-contrast="high"] .board-foot { border-color: #FFFFFF; }

/* Call-out card */
.callout-card { background: var(--panel); border: 2px solid var(--sage-2); border-radius: var(--radius); padding: 20px; }
.callout-row { display: flex; flex-wrap: wrap; gap: 10px; }
.callout-row input { flex: 1 1 200px; }
.callout-result { margin: 12px 0 0; font-weight: 700; min-height: 1.4em; }
.callout-result.is-yes { color: var(--sage); }
.callout-result.is-far, .callout-result.is-none { color: var(--brick); }
.band-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.band-table th, .band-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.band-table thead th { background: var(--sage-tint); }
.band-table tbody th { font-weight: 700; white-space: nowrap; }
.band-table tr:last-child td, .band-table tr:last-child th { border-bottom: 0; }
.band-table td:nth-child(2) { font-weight: 700; color: var(--sage); white-space: nowrap; }
@media (max-width: 559px) { .band-table td:nth-child(3) { display: none; } .band-table thead th:nth-child(3) { display: none; } }

/* Doors and cards */
.door { background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.door .photo { border-radius: 0; aspect-ratio: 4 / 3; }
.door .photo img { width: 100%; height: 100%; object-fit: cover; }
.door-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.door-body h3 { margin: 0; }
.door-body p { margin: 0; color: var(--ink-2); }
.door-body .textlink { margin-top: auto; padding-top: 8px; }

/* Curtain: an indoor photo sits behind two sage curtain panels that a real button draws apart (ported from direction B).
   Without JS the rod, panels and button never render and the photo is just a photo. Reduced motion collapses the slide via the global rule. */
.curtain { position: relative; overflow: hidden; border-radius: inherit; }
.curtain .photo { margin: 0; }
.curtain.photo-radius { border-radius: var(--radius); }
.curtain-rod, .curtain-panels, .curtain-btn { display: none; }
.js .curtain-rod { display: block; position: absolute; top: 0; left: 0; right: 0; height: 9px; background: var(--charcoal); z-index: 2; }
.js .curtain-panels { display: block; position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.curtain-panel { position: absolute; top: 0; bottom: 0; width: 51%; background-color: var(--sage-2); background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0 14px, rgba(0, 0, 0, 0.11) 14px 28px); box-shadow: inset 0 -40px 40px -34px rgba(0, 0, 0, 0.35); transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1); }
.curtain-panel-l { left: 0; border-right: 3px solid var(--paper); }
.curtain-panel-r { right: 0; border-left: 3px solid var(--paper); }
.curtain.is-open .curtain-panel-l { transform: translateX(-103%); }
.curtain.is-open .curtain-panel-r { transform: translateX(103%); }
.js .curtain-btn { display: inline-flex; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; background: var(--charcoal); color: var(--board-text); border-color: var(--charcoal); white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.js .curtain-btn:hover { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.js .curtain-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.curtain-btn .ico { flex: none; }
.curtain-card { border-radius: var(--radius); }
.photo-cap { font-size: 0.89rem; color: var(--ink-2); padding: 8px 2px 0; margin: 0; }

/* On the job: phone clips, poster only until tapped. Markup comes from build.mjs ({{clips:...}}), data from data/clips.json. */
.clips { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (min-width: 760px) { .clips { grid-template-columns: repeat(4, 1fr); gap: 24px; } .clips.two { grid-template-columns: repeat(2, minmax(0, 300px)); } }
.clip { margin: 0; background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.clip-play { position: relative; display: block; aspect-ratio: 9 / 16; background: var(--charcoal); }
.clip-play img, .clip video { display: block; width: 100%; height: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--charcoal); }
.clip-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 8px 18px 8px 14px; border-radius: 999px; background: rgba(42, 42, 42, 0.88); color: var(--board-text); font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.clip-play:hover .clip-btn { background: var(--sage); }
.clip-play:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.clip-dur { position: absolute; right: 8px; bottom: 8px; font-size: 0.78rem; font-weight: 700; background: rgba(11, 11, 11, 0.8); color: var(--board-text); padding: 2px 8px; border-radius: 4px; }
.clip-sound { font-weight: 400; }
.clip figcaption { font-size: 0.89rem; color: var(--ink-2); padding: 8px 10px 10px; }

/* Films: landscape, with sound, the same poster-then-player pattern ({{film:...}}). Labelled "Brand film" so nobody mistakes them for job footage. */
.film { margin: 0; background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.film-play { aspect-ratio: 16 / 9; }
.film-play img, .film video { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--charcoal); }
.film-tag { position: absolute; left: 10px; top: 10px; background: var(--gold); color: var(--charcoal); font-weight: 700; font-size: 0.78rem; padding: 3px 10px; border-radius: 999px; }
.film figcaption { font-size: 0.89rem; color: var(--ink-2); padding: 10px 14px 14px; }
.film-row { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .film-row { grid-template-columns: 1.6fr 1fr; gap: 36px; } }
.film-row .clips { grid-template-columns: 1fr 1fr; gap: 16px; }
.film + .clips { margin-top: 24px; }

.logo-panel { margin: 1.2rem 0 0; background: var(--black); border-radius: var(--radius); padding: 18px; }
.logo-panel img { width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.logo-panel figcaption { color: var(--board-text); font-size: 0.89rem; text-align: center; padding-top: 10px; }

/* Services hub: text-only routes to the three service pages (no photos, so nothing competes with the hero) */
.kinds { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .kinds { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.kind { background: var(--panel); border: 2px solid var(--line); border-left: 6px solid var(--sage); border-radius: var(--radius); padding: 16px 18px; position: relative; }
.kind h3 { margin: 0 0 0.35em; }
.kind h3 a { color: var(--ink); text-decoration-color: var(--sage); text-underline-offset: 4px; }
.kind h3 a::after { content: ""; position: absolute; inset: 0; } /* whole card is the link target */
.kind h3 a::before { content: "\2192\00a0"; color: var(--sage); }
.kind p { margin: 0; color: var(--ink-2); }
.kind:hover { border-color: var(--sage); }
.kind:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Breadcrumbs (level-2 pages only) */
.crumbs { font-size: 0.89rem; padding: 12px 0 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.crumbs li + li::before { content: "/"; padding: 0 8px; color: var(--ink-2); }
.crumbs a { color: var(--sage); font-weight: 700; }
.crumbs [aria-current="page"] { color: var(--ink-2); }
.nav-home { display: none; }
@media (max-width: 1239px) { .nav-home { display: block; } }

/* Areas */
.area-groups { display: grid; gap: 24px; }
@media (min-width: 760px) { .area-groups { grid-template-columns: repeat(2, 1fr); } }
.area-group h3 { margin: 0 0 0.4em; }
.area-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.area-list li { break-inside: avoid; padding: 4px 0; }
.area-list .small { color: var(--ink-2); }
.rings { width: 100%; max-width: 420px; height: auto; margin: 0 auto; display: block; }
.rings .ring { fill: none; stroke: var(--line); stroke-width: 2; }
.rings .ring.is-band { fill: var(--sage-light); fill-opacity: 0.55; stroke: var(--sage); stroke-width: 3; }
.rings .lbl { font-size: 13px; fill: var(--ink-2); paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; }
.rings .base { fill: var(--brick); }
.rings .ring-suburb { fill: none; stroke: var(--brick); stroke-width: 2.5; stroke-dasharray: 6 5; }
.ring-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 10px 0 0; padding: 0; font-size: 0.89rem; font-weight: 700; }
.ring-legend li { display: inline-flex; align-items: center; gap: 8px; }
.ring-legend .key { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.ring-legend .key-base { background: var(--brick); transform: scale(0.6); }
.ring-legend .key-suburb { border: 2.5px dashed var(--brick); }
.ring-legend .key-band { background: var(--sage-light); border: 2px solid var(--sage); }
.area-map { align-self: start; }
.page-faq aside h2:not(:first-child) { margin-top: 1.6em; }
.area-facts { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin: 1rem 0; }
.area-fact { background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.area-fact .val { display: block; font-size: clamp(1.1rem, 0.85rem + 1.3vw, 1.6rem); line-height: 1.2; font-weight: 700; color: var(--sage); }
.area-fact .lbl { font-size: 0.89rem; color: var(--ink-2); }

/* FAQ */
.faq-item { border-top: 2px solid var(--line); padding: 12px 0; }
.faq-item:last-child { border-bottom: 2px solid var(--line); }
.faq-item summary { font-weight: 700; cursor: pointer; padding: 6px 0; }
.faq-a { padding: 4px 0 8px; color: var(--ink); }
.faq-a p { margin: 0 0 0.6em; }

/* Reviews (renders only when site.json has testimonials) */
.reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 760px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.review { background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.review blockquote { margin: 0 0 0.6em; }
.review-by { margin: 0; font-weight: 700; color: var(--sage); }

/* Jobs and records */
.jobs { display: grid; gap: 28px; }
@media (min-width: 760px) { .jobs { grid-template-columns: repeat(3, 1fr); } .jobs.two { grid-template-columns: 1fr 1fr; gap: 36px; } }
.job { background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.job-after { margin: 0; position: relative; }
.job-after img { width: 100%; height: auto; }
.job-after figcaption, .job-before figcaption { position: absolute; left: 10px; top: 10px; background: var(--charcoal); color: var(--board-text); font-weight: 700; font-size: 0.89rem; padding: 3px 10px; border-radius: 999px; }
.job-meta { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 14px; align-items: start; }
.job-before { margin: 0; position: relative; border-radius: 4px; overflow: hidden; }
.job-before figcaption { left: 6px; top: 6px; font-size: 0.78rem; padding: 2px 8px; }

/* Before and after in one frame. Without JS the frame shows the after photo and the small before thumbnail stays (the old layout).
   With JS the frame shows the before photo: a mouse hovering over it shows the after, a tap on a touch screen toggles, and the
   button that covers the frame gives keyboards the same toggle. The thumbnail is then redundant and hidden. */
.ba { background: var(--sage-light); overflow: hidden; }
.ba .ba-after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity 0.35s ease; }
.js .ba .ba-after { opacity: 0; }
.js .ba.is-after .ba-after { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .js .ba:hover .ba-after { opacity: 1; } }
.ba-tag { position: absolute; left: 10px; top: 10px; z-index: 2; background: var(--charcoal); color: var(--board-text); font-weight: 700; font-size: 0.89rem; padding: 3px 10px; border-radius: 999px; pointer-events: none; }
.ba-tag-before { display: none; }
.js .ba-tag-before { display: inline; }
.js .ba-tag-after { display: none; }
.js .ba.is-after .ba-tag-before { display: none; }
.js .ba.is-after .ba-tag-after { display: inline; }
@media (hover: hover) and (pointer: fine) { .js .ba:hover .ba-tag-before { display: none; } .js .ba:hover .ba-tag-after { display: inline; } .js .ba:hover .ba-hint { opacity: 0; } }
.ba-btn { display: none; }
.js .ba-btn { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.js .ba-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; border-radius: 0; }
.ba-hint { position: absolute; right: 8px; bottom: 8px; transition: opacity 0.2s; font-size: 0.78rem; font-weight: 700; background: rgba(11, 11, 11, 0.8); color: var(--board-text); padding: 3px 10px; border-radius: 999px; }
.js .job-ba .job-before { display: none; }
.js .job-ba .job-meta { grid-template-columns: 1fr; }
.record { font-size: 0.89rem; }
.record-tag { display: inline-block; border: 2px solid var(--gold); background: var(--gold); color: var(--charcoal); border-radius: 999px; font-weight: 700; padding: 2px 10px; margin-bottom: 8px; font-size: 0.78rem; }
.record dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.record dt { font-weight: 700; color: var(--ink-2); }
.record dd { margin: 0; }
.record-explain { background: var(--panel); border: 2px solid var(--gold); border-radius: var(--radius); padding: 20px 22px; font-size: 1rem; }
.record-explain h3 { margin-top: 4px; }
.single { margin: 0; }
.single figcaption { padding: 10px 14px 14px; }

/* Brick mark and repair block */
.mark { display: inline-block; background: var(--brick); color: #FFFFFF; font-weight: 700; padding: 6px 14px; border-radius: 4px; margin-bottom: 0.9rem; }
.repair-cta { background: var(--panel); border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }

/* Lists */
.checks { list-style: none; padding: 0; margin: 0 0 1em; }
.checks li { padding-left: 32px; position: relative; margin-bottom: 8px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 12px; height: 7px; border-left: 3px solid var(--sage); border-bottom: 3px solid var(--sage); transform: rotate(-45deg); }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.steps li::before { content: counter(step); width: 40px; height: 40px; border-radius: 50%; background: var(--sage); color: #FFFFFF; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.steps h3 { margin: 6px 0 4px; }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { margin-bottom: 8px; }
.faq details { border-top: 2px solid var(--line); padding: 6px 0; }
.faq details:last-child { border-bottom: 2px solid var(--line); }
.faq summary { font-weight: 700; padding: 12px 4px; cursor: pointer; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--sage); }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { padding: 0 4px 12px; max-width: 46em; }

/* Forms */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label, .fieldset legend { font-weight: 700; }
.field .hint { color: var(--ink-2); font-size: 0.89rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea { font: inherit; width: 100%; min-height: 52px; padding: 10px 14px; border: 2px solid var(--charcoal); border-radius: var(--radius); background: var(--panel); color: var(--ink); }
textarea { min-height: 140px; resize: vertical; }
input[type="file"] { font: inherit; }
.fieldset { border: 2px solid var(--line); border-radius: var(--radius); padding: 12px 16px 6px; margin: 0; }
.choice { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; min-height: 44px; }
.choice input { width: 24px; height: 24px; margin: 2px 0 0; flex: none; accent-color: var(--sage); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.form-status { font-weight: 700; margin: 0; }
.form-status.is-error { color: var(--brick); }
.form-status.is-ok { color: var(--sage); }
.notice { border-left: 6px solid var(--gold); background: var(--panel); padding: 14px 18px; border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 1.2rem; }
.notice.warn { border-color: var(--brick); }
.notice p:last-child { margin-bottom: 0; }

/* Contact and area */
.area-map { background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius); padding: 8px; }
.area-map svg { width: 100%; height: auto; }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.contact-list li { padding: 16px 18px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.contact-list .lbl { display: block; font-weight: 700; color: var(--ink-2); font-size: 0.89rem; }
.contact-list .val { font-size: 1.2rem; font-weight: 700; }

/* Footer */
.site-footer { background: var(--black); color: var(--board-text); margin-top: var(--space); padding: 40px 0 20px; }
.foot-logo { width: 220px; height: auto; }
@media (min-width: 760px) { .foot-logo { width: 320px; } }
.foot-tagline { font-weight: 700; color: var(--gold); margin: 0 0 0.6em; }
.site-footer a { color: var(--board-text); }
.site-footer a:hover { color: var(--gold); }
.foot-grid { display: grid; gap: 28px; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 36px; } }
.foot-brand { margin: 0 0 0.6em; line-height: 0; }
.foot-h { font-size: 1rem; margin: 0 0 0.6em; color: var(--gold); font-weight: 700; }
.foot-nav ul { list-style: none; padding: 0; margin: 0; }
.foot-nav li, .foot-contact li { margin-bottom: 8px; }
.foot-fact { font-size: 0.89rem; }
.site-footer .todo { color: var(--board-text); opacity: .85; }
.foot-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-top: 1px solid rgba(247, 246, 242, 0.25); margin-top: 32px; padding-top: 16px; font-size: 0.89rem; }
.foot-bar p { margin: 0; }

/* 404 */
.page-404 .hero { min-height: 50vh; }

/* Motion, print */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
@media print { .util, .site-header .header-quick, .skip, .site-footer .foot-nav, .modes { display: none !important; } .nav { display: none !important; } body { background: #fff; color: #000; } .board { background: #fff; color: #000; border: 2px solid #000; } .board-row h3, .board-row p, .board-foot { color: #000; } a { color: #000; } }