/* HSWNZ site styles.
   Layout: full-bleed bands with a 1180px inner column; sticky header; hero pairs the headline with the
   tank-roof mark drawn large, as if seen from above on a site plan. Cards only where a thing is a thing
   (a service, a person). Type: Barlow for headings and body (self-hosted, latin subset), chosen
   30 Oct 2026 so HSWNZ no longer shares a typeface with Laughing Penguin. */
:root {
  --slate: #24222e;        /* Slate: wordmark, headings, dark bands */
  --slate-2: #4a4857;
  --orange: #e8642c;       /* Hazard Orange: NZ, hatch, graphics, large text on dark */
  --orange-ink: #b4461b;   /* Orange for text and buttons on light grounds (5.5:1 on white) */
  --blue: #13668f;         /* Tank Blue (30 Oct 2026, was #1f5fbf): the roof disc, links */
  --concrete: #c8c9c3;     /* Concrete: rules, quiet graphics */
  --pale: #edeeea;         /* Pale Concrete: alternate section ground */
  --tank: #13668f;         /* Tank Blue band, fixed in both themes so white text on it always passes */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #edeeea;
  --ink: #24222e;
  --ink-2: #4f4d5a;
  --line: #dcddd7;
  --band: #24222e;         /* dark band behind CTAs and footer */
  --band-ink: #f4f3f7;
  --band-ink-2: #c9c6d6;
  --ph-bg: #fff4ec;
  --ph-line: #f0b48f;
  --ph-ink: #8a3a12;
  --link: var(--blue);
  --f-head: "Barlow", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --f-body: "Barlow", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --r: 14px;
  --wrap: 1180px;
  --gut: max(20px, env(safe-area-inset-left, 0px));
  --gut-r: max(20px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --slate: #d9d6e4; --slate-2: #b5b1c6; --orange: #f07a45; --orange-ink: #f39a6c; --blue: #6cb2d8;
  --concrete: #5b5a62; --pale: #24222e; --bg: #17161d; --surface: #201e28; --surface-2: #2a2833; --ink: #edeeea; --ink-2: #bdbcc6; --line: #37353f;
  --band: #0f0e14; --band-ink: #f4f3f7; --band-ink-2: #b5b1c6;
  --ph-bg: #3a2418; --ph-line: #8a4a26; --ph-ink: #f6c3a2; color-scheme: dark;
}}
:root[data-theme="dark"] {
  --slate: #d9d6e4; --slate-2: #b5b1c6; --orange: #f07a45; --orange-ink: #f39a6c; --blue: #6cb2d8;
  --concrete: #5b5a62; --pale: #24222e; --bg: #17161d; --surface: #201e28; --surface-2: #2a2833; --ink: #edeeea; --ink-2: #bdbcc6; --line: #37353f;
  --band: #0f0e14; --band-ink: #f4f3f7; --band-ink-2: #b5b1c6;
  --ph-bg: #3a2418; --ph-line: #8a4a26; --ph-ink: #f6c3a2; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--f-head); color: var(--slate); line-height: 1.06; text-wrap: balance; margin: 0; font-weight: 600; letter-spacing: -0.02em; }
.lt { font-weight: 300; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); font-weight: 600; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); letter-spacing: -0.022em; }
h3 { font-size: 1.3rem; letter-spacing: -0.01em; }
p { margin: 0; }
.prose { display: flex; flex-direction: column; gap: 1em; max-width: 66ch; }
.prose h2 { margin-top: .9em; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.prose h3 { margin-top: .6em; }
.prose ul, .prose ol { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: .45em; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-2); line-height: 1.55; max-width: 60ch; }
.eyebrow { font-family: var(--f-body); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-ink); }
.muted { color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut-r); }
.band { padding-block: clamp(56px, 8vw, 104px); }
.band.tight { padding-block: clamp(40px, 5vw, 64px); }
.band.alt { background: var(--pale); }
.band.dark { background: var(--band); color: var(--band-ink); }
.band.dark h2, .band.dark h3 { color: var(--band-ink); }
.band.dark .lede, .band.dark .muted { color: var(--band-ink-2); }
.stack { display: flex; flex-direction: column; gap: 18px; }
.head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 40px; margin-bottom: clamp(28px, 4vw, 48px); }
.head-row > * { min-width: 0; }

/* Header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--surface); }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--slate); flex: none; }
.brand svg { width: 38px; height: 38px; flex: none; }
.brand .wm { font-family: var(--f-head); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.01em; line-height: 1; }
.brand .wm b { color: var(--orange); font-weight: 600; }
.brand .tag { display: block; font-family: var(--f-body); font-size: .8rem; font-weight: 500; color: var(--ink-2); margin-top: 3px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; padding: 10px 12px; border-radius: 8px; }
.nav a:hover { background: var(--surface-2); }
.nav a[aria-current="page"], .nav a.in-section { color: var(--orange-ink); }
.nav .btn { margin-left: 8px; }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; }
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: 8px var(--gut-r) 16px var(--gut); }
  .nav.open { display: flex; }
  .nav a { padding: 14px 8px; border-radius: 0; border-bottom: 1px solid var(--line); }
  .nav .btn { margin: 14px 0 0; justify-content: center; border-bottom: 0; }
  .brand .tag { display: none; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-body); font-weight: 700; font-size: 1rem; text-decoration: none; border-radius: 999px; padding: 13px 22px; border: 2px solid transparent; cursor: pointer; line-height: 1.1; }
.btn-primary { background: var(--orange-ink); color: #fff; }
.btn-primary:hover { background: color-mix(in srgb, var(--orange-ink) 86%, #000); }
:root[data-theme="dark"] .btn-primary { color: #1a1013; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary { color: #1a1013; } }
.btn-ghost { border-color: currentColor; color: var(--slate); background: transparent; }
.band.dark .btn-ghost { color: var(--band-ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Hero */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(56px, 8vw, 110px); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 22px; }
.hero-copy h1 .lt { color: var(--slate-2); }
.hero-art { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: end; }
.hero-art svg.plan { width: 100%; height: 100%; overflow: visible; }
.plan .ring-faint { fill: none; stroke: var(--line); stroke-width: 1; stroke-linejoin: round; }
.plan .ring { fill: none; stroke: var(--slate); stroke-width: 18; stroke-linejoin: round; }
.plan .disc { fill: var(--blue); }
.plan .hatch { fill: var(--orange); }
.plan .dim { stroke: var(--ink-2); stroke-width: 1.2; fill: none; }
.plan text { font-family: var(--f-body); font-size: 13px; fill: var(--ink-2); letter-spacing: .06em; }
.spec { position: absolute; left: -6%; bottom: 2%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: 0 18px 40px -22px rgba(30, 28, 40, .45); width: min(300px, 78%); display: flex; flex-direction: column; gap: 8px; }
.spec .spec-title { font-family: var(--f-head); font-weight: 700; font-size: 1.05rem; color: var(--slate); }
.spec dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .92rem; }
.spec dt { font-family: var(--f-head); font-weight: 700; color: var(--slate); font-variant-numeric: tabular-nums; }
.spec dd { margin: 0; color: var(--ink-2); }
.spec small { font-size: .74rem; color: var(--ink-2); }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero-art { justify-self: center; max-width: 400px; margin-top: 8px; }
  .spec { left: 0; }
}

/* Page header for inner pages */
.page-head { padding-block: clamp(44px, 6vw, 84px) clamp(28px, 4vw, 48px); }
.page-head .wrap { display: flex; flex-direction: column; gap: 18px; }
.crumbs { font-size: .85rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--ink-2); }
.crumbs span[aria-hidden] { font-size: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); align-self: center; margin-inline: 4px; }

/* Cards and grids */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.band.alt .card { background: var(--surface); }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a::after { content: " \2192"; color: var(--orange-ink); }
.card h3 a:hover { color: var(--orange-ink); }
.card .meta { font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.card p { color: var(--ink-2); }
.card .more { margin-top: auto; font-weight: 700; }

/* Steps: a real sequence, so numbered */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; counter-reset: s; }
.steps li { counter-increment: s; display: flex; flex-direction: column; gap: 10px; border-top: 2px solid var(--slate); padding-top: 18px; min-width: 0; }
.steps li::before { content: counter(s); font-family: var(--f-head); font-weight: 800; font-size: 1.1rem; color: var(--orange-ink); }
.band.dark .steps li { border-top-color: var(--band-ink-2); }
.band.dark .steps li p { color: var(--band-ink-2); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* Threshold table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .97rem; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .9rem; color: var(--slate); font-weight: 700; background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }
td.n { font-family: var(--f-head); font-weight: 700; color: var(--slate); white-space: nowrap; font-variant-numeric: tabular-nums; }
.source { font-size: .85rem; color: var(--ink-2); }

/* Split blocks */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.split.top { align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* People */
.person { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.person .photo { aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.person .photo img { width: 100%; height: 100%; object-fit: cover; }
.person .role, .bio .role { font-size: 1.02rem; font-weight: 600; color: var(--ink-2); margin-top: -6px; }
.person p { color: var(--ink-2); }
.bio { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding-block: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.bio:first-child { border-top: 0; padding-top: 0; }
.bio .person { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); }
@media (max-width: 760px) { .bio { grid-template-columns: minmax(0, 1fr); } .bio .person { position: static; } .bio .photo { max-width: 340px; } }
.creds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.creds li { font-size: .85rem; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); color: var(--ink); }

/* Placeholders: obvious on the test site, so nothing ships unconfirmed */
.ph { background: var(--ph-bg); color: var(--ph-ink); border-bottom: 1px dashed var(--ph-line); padding: 0 3px; border-radius: 3px; font-weight: 600; }
.img-ph { aspect-ratio: var(--ar, 4 / 3); border: 2px dashed var(--ph-line); background: repeating-linear-gradient(135deg, var(--ph-bg) 0 14px, color-mix(in srgb, var(--ph-bg) 70%, var(--surface)) 14px 28px); border-radius: var(--r); display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--ph-ink); font-size: .9rem; font-weight: 600; width: 100%; }
.img-ph span { max-width: 26ch; }

/* FAQ */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative; font-family: var(--f-head); font-weight: 700; font-size: 1.2rem; color: var(--slate); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 18px; font-size: 1.6rem; color: var(--orange-ink); font-weight: 600; }
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 0 24px; display: flex; flex-direction: column; gap: .8em; max-width: 68ch; color: var(--ink); }

/* Forms */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.form .full { grid-column: 1 / -1; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .92rem; color: var(--slate); }
.form label span.opt { font-weight: 400; color: var(--ink-2); }
.form input, .form select, .form textarea { font: inherit; font-weight: 400; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; min-height: 48px; width: 100%; }
.form textarea { min-height: 130px; resize: vertical; }
#enquiry-form textarea { min-height: 330px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 3px solid color-mix(in srgb, var(--orange) 45%, transparent); border-color: var(--orange); }
.form .hp { position: absolute; left: -9999px; }
.form-note { font-size: .88rem; color: var(--ink-2); }
.form-status { grid-column: 1 / -1; padding: 14px 16px; border-radius: 10px; background: var(--surface-2); font-weight: 600; }
@media (max-width: 640px) { .form { grid-template-columns: minmax(0, 1fr); } }
.contact-list { display: flex; flex-direction: column; gap: 22px; }
/* The photo fills the rest of the details column so it ends level with the form, within limits
   (the form grows when renewal and upload sections open). */
.contact-list { align-self: stretch; }
.contact-list .photo-fig { flex: 1 1 auto; margin-top: 6px; max-height: 600px; }
.contact-list .photo-fig .pic { position: relative; flex: 1 1 auto; min-height: 220px; max-height: 540px; }
.contact-list .photo-fig .pic img { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 860px) { .contact-list .photo-fig { max-height: none; } .contact-list .photo-fig .pic { flex: none; aspect-ratio: 4 / 3; min-height: 0; } }
.contact-list .who { font-family: var(--f-head); font-weight: 700; color: var(--slate); font-size: 1.15rem; }
.contact-list p { color: var(--ink-2); }

/* CTA and footer */
.cta .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.cta h2 { max-width: 18ch; font-size: clamp(2rem, 4vw, 3.2rem); }
.site-footer { background: var(--band); color: var(--band-ink-2); padding-block: 56px 40px; font-size: .93rem; }
.site-footer a { color: var(--band-ink); }
.site-footer .cols { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 28px; }
.site-footer h4 { color: var(--band-ink); font-size: 1.05rem; margin-bottom: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer .brand { color: var(--band-ink); }
.site-footer .brand .tag { color: var(--band-ink-2); }
.site-footer .brand .mk-ring { stroke: var(--pale); }
.site-footer .legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .82rem; }
@media (max-width: 860px) { .site-footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .site-footer .cols { grid-template-columns: minmax(0, 1fr); } }

/* Test-site banner */
.test-banner { background: var(--orange-ink); color: #fff; font-size: .85rem; font-weight: 600; text-align: center; padding: 8px var(--gut-r) 8px var(--gut); }
.test-banner a { color: #fff; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

/* Brand device (30 Oct 2026, matches the X3 logo): the diamond frame, drawn large and cropped by the edge of a band, with an orange or blue dot sitting on its edge (upper left on page heads, lower left on the call to action). The class keeps its old name, ring-band, so the page templates don't change. */
.ring-band { position: relative; overflow: hidden; isolation: isolate;
  --rw: min(70vw, 760px); --rb: clamp(36px, 5.2vw, 70px); --rr: max(-22vw, -260px);
  --ring: var(--orange); --dot: var(--blue); --dot-gap: var(--band); --dd: calc(var(--rb) * 1.15); --kx: .7; --ky: -.3; }
.ring-band::after { content: ""; position: absolute; z-index: -2; width: var(--rw); aspect-ratio: 1; border-radius: 3%; border: var(--rb) solid var(--ring); right: var(--rr); top: 50%; transform: translateY(-50%) rotate(45deg); pointer-events: none; }
.ring-band::before { content: ""; position: absolute; z-index: -1; width: var(--dd); height: var(--dd); border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 calc(var(--rb) * .28) var(--dot-gap); pointer-events: none;
  right: calc(var(--rr) + var(--rw) / 2 + var(--kx) * (var(--rw) - var(--rb)) * .7071 - var(--dd) / 2);
  top: calc(50% - var(--ky) * (var(--rw) - var(--rb)) * .7071 - var(--dd) / 2); }
/* The dot sits on the diamond's border: --kx + |--ky| = 1 (0.5/0.5 is the middle of an edge). */
.page-head.ring-band { --rw: min(60vw, 620px); --rb: clamp(28px, 3.8vw, 52px); --rr: max(-24vw, -240px); --ring: var(--pale); --dot: var(--orange); --dot-gap: var(--bg); --dd: calc(var(--rb) * .9); --kx: .5; --ky: .5; }
@media (max-width: 760px) { .ring-band, .page-head.ring-band { --rw: 92vw; --rr: -60vw; } }
.band.dark .btn-primary { background: var(--orange); color: #1a1013; }

/* Articles */
.article .prose { max-width: 70ch; }
.article .prose .table-wrap { margin-block: .4em; }
.article-aside { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); }
.article-aside .related { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.article-aside .btn { align-self: flex-start; }
.disclaimer { font-size: .9rem; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 14px; margin-top: .6em; }
.sources-h { font-size: 1.1rem !important; margin-top: .4em !important; }
.sources { font-size: .85rem; color: var(--ink-2); overflow-wrap: anywhere; }
@media (max-width: 860px) { .article-aside { position: static; } }
.split.article { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
@media (max-width: 860px) { .split.article { grid-template-columns: minmax(0, 1fr); } }

/* Resources */
.res-group { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 20px 48px; border-top: 2px solid var(--slate); padding-top: 22px; }
.res-group h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.res-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.res-list li { display: flex; flex-direction: column; gap: 3px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.res-list li:first-child { padding-top: 0; }
.res-list > li > a { font-weight: 600; font-size: 1.05rem; }
.res-list span { color: var(--ink-2); font-size: .95rem; }
@media (max-width: 760px) { .res-group { grid-template-columns: minmax(0, 1fr); } }

/* Official logo files in header and footer (never retyped) */
.brand.logo svg { width: 196px; height: auto; display: block; }
.site-footer .brand.logo svg { width: 210px; }
@media (max-width: 520px) { .brand.logo svg { width: 168px; } }
.person .photo img { filter: none; }
.lg-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-header .lg-light { display: none; } :root:not([data-theme="light"]) .site-header .lg-dark { display: block; } }
:root[data-theme="dark"] .site-header .lg-light { display: none; }
:root[data-theme="dark"] .site-header .lg-dark { display: block; }

.photo-fig { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.photo-fig .pic { border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.photo-fig img { width: 100%; object-fit: cover; }
.photo-fig figcaption, .head-photo figcaption, .band-cap { position: relative; padding-left: 16px; font-size: .8rem; letter-spacing: .01em; color: var(--ink-2); line-height: 1.5; max-width: 60ch; }
.photo-fig figcaption::before, .head-photo figcaption::before, .band-cap::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }

/* Page head with a photo: crumbs across the top, then headline and photo side by side.
   The photo's top lines up with the headline and it fills the height of the text beside it. */
.head-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: stretch; }
.head-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.head-photo { position: relative; margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.head-photo .pic { position: relative; flex: 1 0 auto; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.head-photo .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.head-photo::before { content: ""; position: absolute; top: -14px; right: -14px; width: 48px; height: 48px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 9px var(--bg); z-index: 1; }
/* Side by side down to tablet width. On a phone the photo comes first, then the headline (picture, headline, copy). */
@media (max-width: 640px) {
  .head-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .head-photo { order: -1; }
  .head-photo .pic { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
  .head-photo::before { right: -8px; width: 40px; height: 40px; }
}

/* Large orange figures for the numbers that matter */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.stat { border-top: 2px solid var(--slate); padding-top: 16px; min-width: 0; }
.stat .n { font-family: var(--f-head); font-weight: 600; font-size: clamp(2.6rem, 5.5vw, 4.4rem); line-height: 1; letter-spacing: -0.03em; color: var(--orange); font-variant-numeric: tabular-nums; }
.stat p { margin-top: 8px; color: var(--ink-2); }
@media (max-width: 640px) { .stats { grid-template-columns: minmax(0, 1fr); } }

/* One Tank Blue band per page, for short lists and key points (never long reading) */
.band.blue { background: var(--tank); color: #fff; }
.band.blue h2, .band.blue h3 { color: #fff; }
.band.blue h2 .lt { color: rgba(255, 255, 255, .82); }
.band.blue p, .band.blue li { color: rgba(255, 255, 255, .94); }
.band.blue a { color: #fff; }
.band.blue a:hover { color: #fff; text-decoration-color: var(--orange); }
.band.blue .prose ul > li::before { background: #fff; }
.band.blue .steps li { border-top-color: rgba(255, 255, 255, .5); }
.band.blue .steps li::before { color: #fff; }
.band.blue .steps li p { color: rgba(255, 255, 255, .88); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.ticks li { position: relative; padding: 14px 0 14px 1.6em; border-top: 1px solid rgba(255, 255, 255, .3); font-weight: 600; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 1.3em; width: .6em; height: .6em; border-radius: 50%; background: #fff; }
.ticks.one { grid-template-columns: minmax(0, 1fr); }
.ticks li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .3); }
@media (max-width: 640px) { .ticks { grid-template-columns: minmax(0, 1fr); } }
.card.blue { background: var(--tank); border-color: var(--tank); color: #fff; }
.card.blue h3, .card.blue p { color: #fff; }
.band-cap { margin: 12px 0 0; }
/* Full-width photo band between sections: edge to edge, no caption (credits live on /photo-credits/). */
.photo-band { width: 100vw; max-width: none; margin: 0 calc(50% - 50vw); line-height: 0; background: var(--surface-2); }
.photo-band img { display: block; width: 100%; max-width: none; height: clamp(200px, 24vw, 360px); object-fit: cover; }
.stack > .photo-fig { margin-top: 12px; }
.nav a.btn-primary, .nav a.btn-primary:hover { color: #fff; background: var(--orange-ink); }
.nav a.btn-primary:hover { background: color-mix(in srgb, var(--orange-ink) 86%, #000); }

/* Hover: any link or text control turns orange */
a:hover, a:focus-visible { color: var(--orange-ink); }
.nav a:not(.btn):hover { color: var(--orange-ink); background: transparent; }
.crumbs a:hover, .card .more:hover, .res-list a:hover, .related a:hover { color: var(--orange-ink); }
.btn-ghost:hover { color: var(--orange-ink); border-color: var(--orange-ink); }
.band.dark a:not(.btn):hover, .site-footer a:hover { color: var(--orange); }
.band.dark .btn-ghost:hover { color: var(--orange); border-color: var(--orange); }
.faq summary:hover { color: var(--orange-ink); }
.brand.logo:hover { opacity: .85; }
a, .btn, .faq summary { transition: color .15s ease, border-color .15s ease, background-color .15s ease; }

/* Cost estimator */
.estimator { align-items: start; }
.est-result { gap: 14px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); }
.est-h { font-size: 1.2rem; }
.est-figure { font-family: var(--f-head); font-weight: 600; font-size: clamp(2rem, 4.4vw, 2.8rem); color: var(--slate); letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.est-sub { color: var(--ink-2); font-size: .95rem; }
.est-table table { font-size: .92rem; }
.est-result .btn { align-self: flex-start; }
.est-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.est-cta > div { display: flex; flex-direction: column; gap: 8px; max-width: 60ch; }
@media (max-width: 860px) { .est-result { position: static; } }

/* Keep inputs on the same line when labels wrap to different heights */
.form label { justify-content: space-between; }

/* Lists: orange markers sitting on the text column's left edge */
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: 1.25em; }
.prose ul > li::before { content: ""; position: absolute; left: .1em; top: .68em; width: .42em; height: .42em; border-radius: 50%; background: var(--orange); }

/* Estimator result: the one dark focal panel on the page */
.est-result { background: var(--tank); border-color: var(--tank); color: #fff; }
.est-result .est-h { color: rgba(255,255,255,.85); }
.est-result .est-figure { color: #fff; }
.est-result .est-sub { color: rgba(255,255,255,.85); }
.est-result .table-wrap { background: transparent; border-color: rgba(255,255,255,.14); }
.est-result th { background: rgba(255,255,255,.1); color: rgba(255,255,255,.88); }
.est-result td { color: #fff; border-color: rgba(255,255,255,.2); }
.est-result td.n { color: #fff; }
.est-result .btn-primary { background: #fff; color: var(--tank); }
.est-result .btn-primary:hover { background: var(--pale); color: var(--tank); }
.card.blue .btn-ghost, .band.blue .btn-ghost { color: #fff; }
.card.blue .btn-ghost:hover, .band.blue .btn-ghost:hover { color: #fff; border-color: var(--orange); }

.card.blue .btn-primary { background: #fff; color: var(--tank); }
.card.blue .btn-primary:hover { background: var(--pale); color: var(--tank); }
.card.blue a:not(.btn) { color: #fff; }
.res-group.blue { background: var(--tank); color: #fff; border-top: 0; border-radius: var(--r); padding: clamp(22px, 3vw, 34px); }
.res-group.blue h2, .res-group.blue a { color: #fff; }
.res-group.blue .res-list span { color: rgba(255, 255, 255, .88); }
.res-group.blue .res-list li { border-color: rgba(255, 255, 255, .25); }
.res-group.blue a:hover, .card.blue a:not(.btn):hover, .band.blue a:not(.btn):hover { color: #fff; text-decoration-color: var(--orange); }
/* Space between a band caption and the section that follows */
.photo-band + .wrap { padding-bottom: clamp(32px, 4vw, 56px); }

/* Dropdowns on Services and Guides. The label goes to the overview page; the arrow opens the list. */
.nav-item { position: relative; display: flex; align-items: center; }
.sub-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 36px; margin-left: -8px; padding: 0; border: 0; background: none; color: var(--ink); border-radius: 6px; cursor: pointer; }
.sub-toggle svg { transition: transform .15s ease; }
.nav-item.open .sub-toggle svg { transform: rotate(180deg); }
.sub-toggle:hover, .nav-item.open .sub-toggle { color: var(--orange-ink); }
.sub { list-style: none; margin: 0; padding: 8px; position: absolute; top: calc(100% + 8px); left: -4px; min-width: 300px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(36, 34, 46, .35); z-index: 40;
  visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .2s; }
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* bridges the gap so the menu stays open on the way down */
.nav-item.open .sub { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
@media (hover: hover) and (min-width: 901px) {
  .nav-item:hover .sub { visibility: visible; opacity: 1; transform: none; transition-delay: .08s; }
  .nav-item:hover .sub-toggle svg { transform: rotate(180deg); }
}
.nav .sub a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 8px; font-weight: 600; font-size: .95rem; color: var(--ink); border: 0; }
.nav .sub a::after { content: "\2192"; color: var(--orange-ink); opacity: 0; transform: translateX(-4px); transition: opacity .12s ease, transform .12s ease; }
.nav .sub a:hover, .nav .sub a:focus-visible { background: color-mix(in srgb, var(--orange) 14%, var(--surface)); color: var(--orange-ink); }
.nav .sub a:hover::after, .nav .sub a:focus-visible::after { opacity: 1; transform: none; }
.nav .sub a[aria-current="page"] { color: var(--orange-ink); }
@media (max-width: 900px) {
  .nav-item { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .nav-item > a { flex: 1; border-bottom: 0 !important; }
  .sub-toggle { width: 48px; height: 48px; margin: 0; }
  .sub { position: static; display: none; min-width: 0; width: 100%; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 10px 12px; visibility: visible; opacity: 1; transform: none; transition: none; }
  .sub::before { display: none; }
  .nav-item.open .sub { display: block; }
  .nav .sub a { padding: 12px 8px; border-bottom: 0; font-weight: 500; }
}

/* Linked cards: the whole card is clickable and turns orange on hover */
.card:has(h3 a) { position: relative; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background-color .15s ease; }
.card h3 a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card:has(h3 a) .more, .card:has(h3 a) .btn { position: relative; z-index: 1; }
.card:has(h3 a):hover { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange), 0 14px 30px -18px rgba(36, 34, 46, .4); transform: translateY(-2px); background-color: color-mix(in srgb, var(--orange) 5%, var(--surface)); }
.card:has(h3 a):hover h3 a { color: var(--orange-ink); }
.card:has(h3 a):hover .more { color: var(--orange-ink); }
.card:has(h3 a:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 55%, transparent); }
.card h3 a:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .card:has(h3 a):hover { transform: none; } }

/* Enquiry form: sections that appear for the chosen service */
.form [hidden] { display: none !important; }
.form fieldset.form-group { grid-column: 1 / -1; margin: 0; padding: 14px 18px 18px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--pale) 55%, var(--surface)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.form fieldset legend { font-family: var(--f-head); font-weight: 600; font-size: 1rem; color: var(--slate); padding: 0 6px; }
.form .checks { display: flex; flex-direction: column; gap: 8px; }
.form .checks-h { font-weight: 600; font-size: .92rem; color: var(--slate); }
.form label.check { flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 10px; font-weight: 400; font-size: .95rem; color: var(--ink); }
.form label.check input { flex: none; width: 18px; height: 18px; min-height: 0; margin: 3px 0 0; padding: 0; accent-color: var(--orange-ink); }
.form input[type="file"] { padding: 10px; }
.form .reminder-opt { background: color-mix(in srgb, var(--tank) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tank) 30%, transparent); border-radius: 10px; padding: 12px 14px; }
@media (max-width: 640px) { .form fieldset.form-group { grid-template-columns: minmax(0, 1fr); } }

/* Logo strips: clients and professional bodies, single-tone and evenly sized */
.logo-band .logo-h { text-align: center; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-2); margin-bottom: 26px; }
.logo-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 26px 48px; }
.logo-row img { width: auto; height: auto; max-height: 50px; max-width: 170px; opacity: .72; transition: opacity .15s ease; }
.logo-row li:hover img { opacity: 1; }
.logo-row.bodies img { max-height: 64px; max-width: 210px; }
.logo-note { text-align: center; margin: 18px 0 0; font-size: .85rem; color: var(--ink-2); }
.foot-bodies { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); }
.foot-bodies .fb-h { font-size: .85rem; color: var(--band-ink-2); }
.logo-row.bodies-small { justify-content: flex-start; gap: 16px 32px; }
.logo-row.bodies-small img { max-height: 34px; max-width: 140px; filter: brightness(0) invert(1); opacity: .7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-band .logo-row img { filter: brightness(0) invert(1); } }
:root[data-theme="dark"] .logo-band .logo-row img { filter: brightness(0) invert(1); }
.foot-bodies .logo-row { flex: 1 1 auto; }
.contact-list .photo-fig { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); }
@media (max-width: 860px) { .contact-list .photo-fig { position: static; } }
.site-footer .foot-bodies .logo-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin: 0; }
@media (max-width: 640px) { #enquiry-form textarea { min-height: 160px; } }

/* Field note: one short line from the certifier per page, styled after an inspection tag (eyelet, orange band). Added 30 Oct 2026. */
.field-note { position: relative; background: var(--surface-2); border-radius: 6px 6px var(--r) var(--r); border-top: 6px solid var(--orange); padding: 30px 26px 22px 26px; margin: 8px 0 4px; max-width: 46ch; }
.field-note::before { content: ""; position: absolute; top: 14px; right: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 3px var(--line); }
.field-note .fn-quote { font-family: var(--f-head); font-weight: 600; font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.4; color: var(--ink); margin: 0 0 12px; }
.field-note .fn-who { font-weight: 700; color: var(--ink-2); margin: 0; }
.field-note .fn-check { font-size: .9rem; margin: 12px 0 0; }
.band.blue .field-note, .band.dark .field-note { background: rgba(255, 255, 255, .08); }
.band.blue .field-note .fn-quote, .band.dark .field-note .fn-quote { color: var(--band-ink); }

/* In brief: the answer first, at the top of every guide. */
.in-brief { border: 2px solid var(--ink); border-radius: var(--r); padding: 22px 26px 10px; margin: 0 0 32px; }
.prose .in-brief .ib-h { margin: 0 0 8px; font-size: 1.25rem; }
.in-brief ul { margin: 0 0 12px; padding-left: 1.2em; }
.in-brief li { margin-bottom: 8px; }

/* Price line under the hero buttons */
.price-line { margin-top: 18px; color: var(--ink-2); max-width: 52ch; }

/* ===== Design language, 30 Oct 2026 =====
   1. The tank roof from the logo is a window: a round frame for a photo toned in Tank Blue, with the orange hatch on its rim.
   2. The diamond frame from the logo runs underneath as a faint watermark, in three sizes, crossing from one section into the next and alternating sides.
   3. Beyond the logo's hatch, orange marks only where you act or where something falls due.
   4. Figures and labels are set in Barlow Condensed, so they read like tank labels and site signs. */
:root { --f-cond: "Barlow Condensed", "Barlow", "Arial Narrow", sans-serif;
  --wm-l: clamp(520px, 72vw, 1000px); --wm-m: clamp(320px, 44vw, 620px); --wm-sm: clamp(190px, 24vw, 330px); }

/* 1. Photo window */
.window { position: relative; aspect-ratio: 1; width: 100%; }
.window .disc { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--tank); }
.window .disc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.window .hatch { position: absolute; left: 85.36%; top: 14.64%; width: 9.5%; aspect-ratio: 1; border-radius: 50%; background: var(--orange); transform: translate(-50%, -50%); box-shadow: 0 0 0 clamp(5px, 1.3vw, 12px) var(--bg); z-index: 1; }
.hero { overflow: visible; overflow-x: clip; }
.hero-art { max-width: 640px; width: 112%; justify-self: start; }
.hero-art .window { width: 100%; }
.spec { left: -12%; bottom: -3%; width: min(360px, 76%); background: var(--band); border: 0; color: var(--band-ink); padding: 20px 24px 18px; gap: 6px; z-index: 2; box-shadow: 0 22px 44px -26px rgba(15, 14, 20, .6); }
.spec .spec-title { font-family: var(--f-cond); font-weight: 600; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: #a9cde0; }
.spec .figs { display: flex; gap: clamp(20px, 3vw, 34px); margin: 2px 0 6px; }
.spec .fig { margin: 0; display: flex; flex-direction: column; }
.spec .fig .pre { font-size: .8rem; color: var(--band-ink-2); line-height: 1.2; }
.spec .fig b { font-family: var(--f-cond); font-weight: 700; font-size: clamp(3rem, 5.6vw, 4.4rem); line-height: .92; color: var(--band-ink); font-variant-numeric: tabular-nums; }
.spec .fig b small { font-size: .42em; font-weight: 600; margin-left: 4px; color: var(--band-ink); }
.spec .fig > span:last-child { color: var(--band-ink-2); font-size: .92rem; }
.spec > small { color: var(--band-ink-2); line-height: 1.4; }
@media (max-width: 860px) {
  .hero-art { width: 100%; max-width: 460px; justify-self: center; margin: 8px 0 44px; }
  .spec { left: -2%; bottom: -12%; width: min(330px, 86%); }
}
.head-photo::before { content: none; }
.head-photo { justify-content: center; align-items: center; }
.head-photo .window { max-width: 430px; }
.head-photo figcaption { align-self: stretch; max-width: 46ch; margin-inline: auto; }
@media (max-width: 640px) { .head-photo .window { max-width: 300px; } }

/* 2. Diamond watermark across sections: every odd section in main, plus the last one, carries one at its lower edge. */
main > section, .cta, .site-footer { position: relative; }
main > section > *, main > .photo-band, main > .wrap, .cta > .wrap, .site-footer > .wrap { position: relative; z-index: 2; }
main > section:is(:nth-of-type(odd), :last-of-type) { --wms: var(--wm-l); --wmx: -2vw; }
main > section:nth-of-type(12n+3) { --wms: var(--wm-m); --wmx: calc(100% - 3vw); }
main > section:nth-of-type(12n+5) { --wms: var(--wm-sm); --wmx: 12%; }
main > section:nth-of-type(12n+7) { --wms: var(--wm-l); --wmx: 88%; }
main > section:nth-of-type(12n+9) { --wms: var(--wm-m); --wmx: 3vw; }
main > section:nth-of-type(12n+11) { --wms: var(--wm-sm); --wmx: 88%; }
main > section:nth-of-type(even):last-of-type { --wms: var(--wm-l); --wmx: 88%; }
main > section:is(:nth-of-type(odd), :last-of-type)::before,
main > section:is(:nth-of-type(odd), :last-of-type)::after { content: ""; position: absolute; left: var(--wmx); top: 100%; width: var(--wms); height: var(--wms);
  border: calc(var(--wms) * .046) solid; border-radius: 3%; transform: translate(-50%, -50%) rotate(45deg); pointer-events: none; z-index: 1; }
main > section:is(:nth-of-type(odd), :last-of-type)::after { border-color: rgba(36, 34, 46, .065); mix-blend-mode: multiply; }
main > section:is(:nth-of-type(odd), :last-of-type)::before { border-color: rgba(255, 255, 255, .075); mix-blend-mode: screen; }
/* Each section clips sideways only, so the diamonds can cross into the next section but never widen the page. */
main > section, .cta, .site-footer { overflow-x: clip; overflow-y: visible; }

/* 3. Orange only where you act or something falls due */
.crumbs span[aria-hidden] { border-radius: 1px; background: var(--blue); transform: rotate(45deg); }
.photo-fig figcaption::before, .head-photo figcaption::before, .band-cap::before { background: var(--blue); }
.card h3 a::after { color: var(--blue); }
.field-note { border-top-color: var(--blue); }
.prose ul > li::before { background: var(--blue); }
.steps li.due { border-top-color: var(--orange) !important; position: relative; }
.steps li.due::after { content: ""; position: absolute; left: clamp(3.4rem, 5.6vw, 4.2rem); top: clamp(30px, 3.4vw, 38px); width: 14px; height: 14px; border-radius: 50%; background: var(--orange); }

/* 4. Barlow Condensed for figures and labels */
.eyebrow { margin: 0; font-family: var(--f-cond); font-weight: 600; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.card .meta { font-family: var(--f-cond); font-weight: 600; font-size: .92rem; letter-spacing: .1em; color: var(--blue); }
.person .role, .bio .role { font-family: var(--f-cond); font-weight: 600; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--f-cond); font-weight: 700; font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1; color: var(--blue); }
.band.blue .steps li::before { color: #cfe2ec; }
.band.dark .steps li::before { color: var(--band-ink-2); }
.stat .n { font-family: var(--f-cond); font-weight: 700; letter-spacing: 0; color: var(--blue); }

/* Design language, all pages (30 Oct 2026) */
td.n, .est-result .est-figure { font-family: var(--f-cond); font-weight: 700; letter-spacing: 0; }
td.n { font-size: 1.12rem; }
.card.due { box-shadow: inset 0 5px 0 var(--orange); }
.brand.logo svg { width: auto; height: 54px; }
.site-footer .brand.logo svg { width: auto; height: 58px; }
@media (max-width: 520px) { .brand.logo svg { width: auto; height: 46px; } }

/* 30 Oct 2026: each watermark still crosses a section join, but off-centre, by a different amount each time,
   so the diamond's corners never sit exactly on the join. */
main > section:nth-of-type(12n+1) { --wmy: calc(var(--wms) * -.16); }
main > section:nth-of-type(12n+3) { --wmy: calc(var(--wms) * .14); }
main > section:nth-of-type(12n+5) { --wmy: calc(var(--wms) * -.24); }
main > section:nth-of-type(12n+7) { --wmy: calc(var(--wms) * .2); }
main > section:nth-of-type(12n+9) { --wmy: calc(var(--wms) * -.1); }
main > section:nth-of-type(12n+11) { --wmy: calc(var(--wms) * .22); }
main > section:nth-of-type(even):last-of-type { --wmy: calc(var(--wms) * -.18); }
main > section:is(:nth-of-type(odd), :last-of-type)::before,
main > section:is(:nth-of-type(odd), :last-of-type)::after { top: calc(100% + var(--wmy, 0px)); }
/* Threshold box sits lower and centred on the hero photo */
.spec { left: 50%; bottom: -9%; transform: translateX(-50%); }
@media (max-width: 860px) { .spec { left: 50%; bottom: -14%; } }

/* ===== Audit fixes, 31 October 2026 (HSWNZ Website Audit 2026-10-31.md) ===== */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Headings. Inner-page H1s are sized for the copy column, the copy column takes more of the head, and the head stacks below 900px.
   The light half of a two-tone heading starts its own line, as in the design language. */
.page-head h1 { font-size: clamp(2.2rem, 4vw, 3.3rem); }
.head-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .75fr); }
@media (max-width: 900px) {
  .head-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .head-photo { order: 0; }
  .head-photo .window { max-width: 340px; }
}
@media (min-width: 640px) { h1 .lt, h2 .lt { display: block; } }
.cta h2 { max-width: 24ch; }

/* Captions, ledes and quotes avoid a single word on the last line. */
figcaption, .lede, .fn-quote, .card p, .prose p { text-wrap: pretty; }

/* Orange only where you act or something falls due: current page, hovers and toggles move to blue. */
.nav a[aria-current="page"], .nav a.in-section, .nav .sub a[aria-current="page"] { color: var(--blue); }
.nav a:not(.btn):hover, .crumbs a:hover, .card .more:hover, .res-list a:hover, .related a:hover, .card h3 a:hover, .card:has(h3 a):hover .more { color: var(--blue); }
.btn-ghost:hover { color: var(--blue); border-color: var(--blue); }
.band.dark a:not(.btn):hover, .site-footer a:hover { color: #a9cde0; }
.band.dark .btn-ghost:hover { color: #a9cde0; border-color: #a9cde0; }
.card.blue .btn-ghost:hover, .band.blue .btn-ghost:hover { border-color: #fff; }
.nav .sub a::after, .faq summary::after { color: var(--blue); }

/* One booking button: orange with white text on every ground. */
.band.dark .btn-primary, .card.blue .btn-primary, .est-result .btn-primary { background: var(--orange-ink); color: #fff; }
.band.dark .btn-primary:hover, .card.blue .btn-primary:hover, .est-result .btn-primary:hover { background: color-mix(in srgb, var(--orange-ink) 86%, #000); color: #fff; }
:root[data-theme="dark"] :is(.band.dark, .card.blue, .est-result) .btn-primary { color: #1a1013; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.band.dark, .card.blue, .est-result) .btn-primary { color: #1a1013; } }

/* Watermark fainter, so it doesn't sit heavily behind text. */
main > section:is(:nth-of-type(odd), :last-of-type)::after { border-color: rgba(36, 34, 46, .045); }
main > section:is(:nth-of-type(odd), :last-of-type)::before { border-color: rgba(255, 255, 255, .05); }

/* Field note: the old tag hole read as a stray dot on the blue version. */
.field-note::before { content: none; }

/* In brief: hairline box with a blue rule, like the other panels. */
.in-brief { border: 1px solid var(--line); border-left: 5px solid var(--blue); background: var(--surface); }

/* Lists: regular weight in the scope band; the Useful links line in More guides matches its siblings. */
.ticks li { font-weight: 400; }
.article-aside .card .more { font-weight: 400; }

/* Card grids: two columns from 1100px down, so card titles keep to two lines. */
@media (max-width: 1100px) and (min-width: 641px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Logo strips: the marks are normalised to one colour and balanced weight, so only the height cap applies. */
.logo-row img { max-width: 240px; opacity: .8; }

/* Line length for notes and sources. */
.sources, .disclaimer, .form-note { max-width: 70ch; }

/* Guide tables on a phone: each row stacks as the quantity over what applies. */
@media (max-width: 600px) {
  .prose .table-wrap table, .prose .table-wrap tbody, .prose .table-wrap tr, .prose .table-wrap td, .prose .table-wrap th { display: block; width: auto; }
  .prose .table-wrap thead { position: absolute; left: -9999px; }
  .prose .table-wrap tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .prose .table-wrap tr:last-child { border-bottom: 0; }
  .prose .table-wrap td, .prose .table-wrap th { padding: 2px 0; border: 0; }
  .prose .table-wrap td:first-child, .prose .table-wrap th:first-child { font-weight: 700; }
  .sources { font-size: .8rem; }
}

/* Card arrow stays with the last word of the title. */
.card h3 a::after { content: "\00a0\2192"; }

/* Design pass, 31 Oct 2026 */
/* One H1 size across the site: the home hero matches the inner pages, so it runs three or four lines. */
.hero-copy h1 { font-size: clamp(2.2rem, 4vw, 3.3rem); }
/* Inner-page photo windows run larger, borrowing the page margin on wide screens. */
.head-photo .window { --bleed: clamp(0px, calc((100vw - 1240px) / 2), 90px); align-self: flex-start; max-width: none; width: calc(100% + var(--bleed)); margin-right: calc(-1 * var(--bleed)); }
@media (max-width: 900px) { .head-photo .window { width: 100%; max-width: 340px; margin-right: 0; align-self: center; } }
/* Articles: In brief as a tinted block, and every second section as a pale colour block. */
.in-brief { background: color-mix(in srgb, var(--tank) 8%, var(--bg)); border: 0; border-left: 5px solid var(--blue); }
.prose .art-sec { display: flex; flex-direction: column; gap: 1em; }
.prose .art-sec:nth-of-type(even) { background: var(--pale); border-radius: var(--r); padding: 30px 30px 32px; margin: 18px -30px; }
.prose .art-sec:nth-of-type(even) > h2:first-child { margin-top: 0; }
.prose .art-sec:nth-of-type(even) .table-wrap { background: var(--surface); }
@media (max-width: 640px) { .prose .art-sec:nth-of-type(even) { margin-inline: -20px; padding: 26px 20px 28px; border-radius: 0; } }
/* Matt's garden photo is framed wider than Kelvin's and Rosanna's; scale it so the three heads match. */
.photo img[src*="/assets/img/matt.jpg"] { transform: scale(1.32); transform-origin: 52% 26%; }
/* No eyebrow above the home H1 (31 Oct 2026); the hero sits higher on the page. */
.hero { padding-top: clamp(28px, 4vw, 56px); }
/* Every watermark sits half off the page, centred on the left or right edge (31 Oct 2026). */
main > section:nth-of-type(12n+1) { --wmx: 0px; }
main > section:nth-of-type(12n+3) { --wmx: 100%; }
main > section:nth-of-type(12n+5) { --wmx: 0px; }
main > section:nth-of-type(12n+7) { --wmx: 100%; }
main > section:nth-of-type(12n+9) { --wmx: 0px; }
main > section:nth-of-type(12n+11) { --wmx: 100%; }
main > section:nth-of-type(even):last-of-type { --wmx: 100%; }
/* Articles: the sidebar sits close beside the text and both keep the page's left edge, so the guide reads as one unit (31 Oct 2026). */
@media (min-width: 861px) { .split.article { grid-template-columns: minmax(0, 70ch) minmax(0, 380px); gap: 48px; justify-content: start; } }
/* Boxes carry an even border all round, never a one-sided accent stripe (31 Oct 2026). */
.in-brief { border: 2px solid var(--blue); border-radius: var(--r); }
.field-note { border: 2px solid var(--blue); border-radius: var(--r); }
.band.blue .field-note, .band.dark .field-note { border-color: rgba(255, 255, 255, .45); }
/* Captions under the round photos are centred under the circle, without the leading dot. */
.head-photo figcaption { text-align: center; padding-left: 0; max-width: 40ch; margin-inline: auto; align-self: center; }
.head-photo figcaption::before { content: none; }
/* Caption spans exactly the width of the round photo above it, so its centre lines up with the photo's centre. */
.head-photo { --bleed: clamp(0px, calc((100vw - 1240px) / 2), 90px); }
.head-photo figcaption { align-self: flex-start; box-sizing: border-box; width: calc(100% + var(--bleed)); max-width: none; margin: 0 calc(-1 * var(--bleed)) 0 0; padding-inline: 9%; }
@media (max-width: 900px) { .head-photo figcaption { align-self: center; width: 100%; max-width: 340px; margin: 0 auto; padding-inline: 4%; } }