/* Thermarate: site styles
   Tokens, base, layout, components, then page-specific pieces. */

/* Fonts, self-hosted from Fontsource (SIL Open Font License), latin and latin-ext subsets: Geist and Geist Mono,
   and the italic accent, Source Serif 4, as a variable font whose optical size follows the type size. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/geist-latin-ext-400-normal.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: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/geist-latin-400-normal.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: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/geist-latin-ext-500-normal.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: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/geist-latin-500-normal.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: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/geist-latin-ext-600-normal.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: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/geist-latin-600-normal.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: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/geist-mono-latin-ext-400-normal.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: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/geist-mono-latin-400-normal.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: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/geist-mono-latin-ext-500-normal.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: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/geist-mono-latin-500-normal.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: 'Source Serif 4';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url(../fonts/source-serif-4-latin-ext-opsz-italic.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url(../fonts/source-serif-4-latin-opsz-italic.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 {
  --night: #0a0b0d;
  --night-2: #111317;
  --night-3: #191c21;
  --night-line: rgba(242, 239, 232, 0.12);
  --night-line-2: rgba(242, 239, 232, 0.24);
  --night-text: #f2efe8;
  --night-soft: #cfccc5;
  --night-muted: #a09d96;

  --paper: #f3f1ec;
  --paper-2: #ebe8e1;
  --paper-3: #dfdbd2;
  --sheet: #fdfcfa;
  --ink: #0e0f11;
  --ink-2: #34373b;
  --muted: #65676a;
  --line: rgba(14, 15, 17, 0.13);
  --line-2: rgba(14, 15, 17, 0.26);

  /* Brand, taken from the Thermarate leaf */
  --leaf-deep: #1d6434;
  --leaf: #27953c;
  --spring: #64b431;
  --lime: #b2db23;
  --lime-bright: #cce310;
  --brand: linear-gradient(90deg, #1e6d36 0%, #27953c 45%, #64b431 60%, #87c52b 71%, #9fd127 82%, #b2db23 100%);
  --brand-text: linear-gradient(92deg, #43b05c 0%, #64b431 30%, #9fd127 62%, #cce310 100%);

  /* Data: temperature from cold to warm. A viridis-family scale (colour-blind safe)
     whose warm half is the brand's own green-to-lime. The same stops are in site.js. */
  --thermal: linear-gradient(90deg, #0b1030 0%, #1b2a6b 13%, #22479b 27%, #1f6d9e 41%, #138a7c 54%, #27953c 64%, #64b431 74%, #9fd127 84%, #cce310 92%, #eef39a 100%);
  --cooling: #4f7be0;
  --heating: #b2db23;
  --months: 31fr 28fr 31fr 30fr 31fr 30fr 31fr 31fr 30fr 31fr 30fr 31fr;   /* the months' widths, in days */

  --tbc: #b57c00;
  --danger: #b42318;

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1360px;
  --gutter: clamp(20px, 4vw, 56px);
  --section: clamp(88px, 10.5vw, 152px);
  --radius: 3px;
  --header-h: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, canvas { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 em, h2 em, h3 em, .manifesto em, .footer-tag em, .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1em;
  letter-spacing: -0.02em;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }
strong { font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--leaf-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
.dark :focus-visible { outline-color: var(--lime); }

::selection { background: var(--ink); color: var(--paper); }
.dark ::selection { background: var(--night-text); color: var(--night); }

.skip {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 14px;
}
.skip:focus { top: 12px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Type ---------- */

.display {
  font-size: clamp(3rem, 7.6vw, 7.6rem);
  line-height: 0.92;
  letter-spacing: -0.052em;
  font-weight: 500;
}

.h2 {
  font-size: clamp(2.2rem, 4.6vw, 4.3rem);
  line-height: 1;
  letter-spacing: -0.042em;
}

.h3 {
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
}

.lead {
  font-size: clamp(1.125rem, 1.45vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink-2);
  max-width: 46ch;
}
.dark .lead { color: var(--night-soft); }

.body-lg {
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
  line-height: 1.62;
  color: var(--ink-2);
}
.dark .body-lg { color: var(--night-muted); }

.eyebrow, .mono {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.dark .eyebrow, .dark .mono { color: var(--night-muted); }

.muted { color: var(--muted); }
.dark .muted { color: var(--night-muted); }

/* Clause reference chip: every claim names its source */
.ref {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.03em;
  padding: 5px 7px 4px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  color: var(--ink-2);
  white-space: nowrap;
  vertical-align: 2px;
}
.dark .ref { border-color: var(--night-line-2); color: var(--night-soft); }
.refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
@media (max-width: 480px) { .ref { white-space: normal; line-height: 1.35; } }

/* Placeholder for facts only Thermarate can supply. See CONTENT_CHECKLIST.md */
.tbc {
  background: linear-gradient(transparent 62%, rgba(181, 124, 0, 0.18) 0);
  border-bottom: 1px dotted var(--tbc);
}
.dark .tbc { background: none; border-bottom-color: #d4a648; }

/* ---------- Layout ---------- */

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

.section {
  position: relative;
  padding-block: var(--section);
}
.section + .section:not(.dark):not(.tint) { border-top: 1px solid var(--line); }
.section.tight { padding-block: clamp(72px, 9vw, 128px); }

.dark {
  position: relative;
  background: var(--night);
  color: var(--night-text);
  isolation: isolate;
}
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: 0.07;
  pointer-events: none;
}
.tint { background: var(--paper-2); }
html:not(.js) .thermal, html:not(.js) .thermal-meta, html:not(.js) .band { display: none; }

.section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(36px, 5vw, 64px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-label span:first-child { color: var(--ink); }
.section-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.dark .section-label { color: var(--night-muted); }
.dark .section-label span:first-child { color: var(--night-text); }
.dark .section-label::after { background: var(--night-line); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 112px);
  align-items: start;
}
.split.wide-left { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.wide-right { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split > .sticky { position: sticky; top: calc(var(--header-h) + 40px); }
.split .body-lg { padding-top: 0.6em; }

.grid { display: grid; gap: var(--gap, 24px); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1080px) {
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .split, .split.wide-left, .split.wide-right { grid-template-columns: minmax(0, 1fr); }
  .split > .sticky { position: static; }
  .split .body-lg { padding-top: 0; }
  .cols-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cols-2, .cols-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Buttons and links ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 16px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: 500 15px/1 var(--font-sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.btn .arr { display: inline-block; transition: transform 0.35s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }
/* On hover the pill itself fills with lime, so nothing darker can show at its curved edge, and a
   1px spring-green keyline keeps the edge crisp on paper as well as on night */
.btn:hover { background-color: var(--lime); border-color: var(--spring); color: var(--ink); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background-color: var(--ink); color: var(--paper); border-color: var(--ink); }

.dark .btn, .btn-light { background: var(--night-text); color: var(--night); border-color: var(--night-text); }
.dark .btn:hover, .btn-light:hover { background-color: var(--lime); color: var(--ink); border-color: var(--spring); }
.dark .btn-ghost { background: transparent; color: var(--night-text); border-color: var(--night-line-2); }
.dark .btn-ghost:hover { background-color: var(--night-text); color: var(--night); border-color: var(--night-text); }

.btn-sm { padding: 11px 16px; font-size: 14px; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--line-2);
  transition: text-decoration-color 0.2s;
}
.link:hover { text-decoration-color: currentColor; }

.more {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding-bottom: 4px;
  font-size: 15px;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.4s var(--ease-out);
}
.more:hover { background-size: 0% 1px; background-position: 100% 100%; }
.more .arr { display: inline-block; transition: transform 0.35s var(--ease-out); }
.more:hover .arr { transform: translateX(4px); }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(243, 241, 236, 0.82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--line);
}
.site-header.is-dark { color: var(--night-text); }
.site-header.is-dark.is-scrolled { background: rgba(10, 11, 13, 0.7); border-bottom-color: var(--night-line); }

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.04em;
  flex: none;
}
.brand img { display: block; height: 40px; width: auto; }

.nav { display: flex; align-items: center; gap: 32px; }
.nav-list { display: flex; gap: 28px; list-style: none; }
.nav-list a {
  position: relative;
  color: inherit;
  opacity: 0.78;
  text-decoration: none;
  font-size: 15px;
  transition: opacity 0.2s;
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.nav-list a:hover { opacity: 1; }
.nav-list a:hover::after, .nav-list a[aria-current="page"]::after, .nav-list a.is-section::after { transform: scaleX(1); transform-origin: left; }
.nav-list a[aria-current="page"], .nav-list a.is-section { opacity: 1; }
.nav-list .only-mobile, .nav-list .only-drawer { display: none; }
.nav-actions { display: flex; align-items: center; gap: 24px; }

.site-header .btn { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.site-header.is-dark .btn { background: var(--night-text); color: var(--night); border-color: var(--night-text); }
.site-header .btn:hover { background-color: var(--lime); color: var(--ink); border-color: var(--spring); }
/* Client login: a quiet utility link like the menu's, set apart from it by a thin rule */
.nav-login { display: inline-flex; align-items: center; gap: 7px; padding: 2px 0 2px 24px; white-space: nowrap; border-left: 1px solid var(--line-2); color: inherit; opacity: 0.78; font-size: 15px; text-decoration: none; transition: opacity 0.2s; }
.site-header.is-dark .nav-login { border-left-color: var(--night-line-2); }
.nav-login span { position: relative; }
.nav-login span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease-out); }
.nav-login:hover { opacity: 1; }
.nav-login:hover span::after { transform: scaleX(1); transform-origin: left; }
.nav-lock { flex: none; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 2px 10px 10px;
  background: none;
  border: 0;
  color: inherit;
  font: 500 14px/1 var(--font-sans);
  cursor: pointer;
}
.nav-toggle-icon { position: relative; width: 18px; height: 10px; }
.nav-toggle-icon::before, .nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}
.nav-toggle-icon::before { top: 1px; }
.nav-toggle-icon::after { top: 7.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { top: 4.25px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { top: 4.25px; transform: rotate(-45deg); }

/* The menu folds away below 900 px, where the links, the client login and the quote button no longer fit on one line */
@media (max-width: 900px) {
  .nav { gap: 14px; }
  .nav-toggle { display: inline-flex; }
  .nav-list {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px var(--gutter) 28px;
    background: var(--paper);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 50px -30px rgba(14, 15, 17, 0.35);
  }
  .site-header.is-dark .nav-list { background: var(--night); color: var(--night-text); border-bottom-color: var(--night-line); }
  .nav-list.is-open { display: flex; }
  .nav-list a {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    font-size: 22px;
    letter-spacing: -0.025em;
    opacity: 1;
  }
  .site-header.is-dark .nav-list a { border-bottom-color: var(--night-line); }
  .nav-list a::after { display: none; }
  .nav-list a[aria-current="page"]::before, .nav-list a.is-section::before {
    content: "";
    display: inline-block;
    width: 8px; height: 8px;
    margin-right: 12px;
    border-radius: 50%;
    background: var(--leaf);
    vertical-align: 3px;
  }
  .site-header.is-open { background: var(--paper); color: var(--ink); }
  .site-header.is-dark.is-open { background: var(--night); color: var(--night-text); }
  .nav-actions .nav-login { display: none; }
  .nav-list .only-drawer { display: block; }
}
@media (max-width: 480px) {
  .nav-actions { display: none; }
  .nav-list .only-mobile { display: block; }
}

/* ---------- Home hero: live wall simulation ---------- */

.hero {
  padding-top: calc(var(--header-h) + clamp(24px, 4.6vh, 72px));
  overflow: hidden;
}
.hero-meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--night-muted);
}
.hero-meta span:last-child { text-align: right; }
.hero-title {
  margin: clamp(18px, 3vh, 36px) 0 0;
  font-size: clamp(3.2rem, 8.7vw, 9rem);
  line-height: 0.9;
  letter-spacing: -0.058em;
  font-weight: 500;
}
.hero-title em {
  font-size: 1.02em;
  letter-spacing: -0.035em;
  padding-right: 0.08em;
  background: var(--brand-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px 56px;
  align-items: end;
  margin-top: clamp(24px, 3.6vh, 44px);
}
.hero-lead {
  max-width: 58ch;
  margin: 0;
  font-size: clamp(1.08rem, 1.35vw, 1.28rem);
  line-height: 1.52;
  color: var(--night-soft);
}
@media (max-width: 860px) {
  .hero-row { grid-template-columns: minmax(0, 1fr); }
  .hero-meta span:last-child { display: none; }
}

.thermal {
  position: relative;
  height: clamp(270px, 42vh, 480px);
  margin-top: clamp(20px, 3.6vh, 48px);
  touch-action: pan-y;
  cursor: crosshair;
}
.thermal canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.thermal-labels { position: absolute; inset: 0; pointer-events: none; }
.t-label {
  position: absolute;
  left: var(--gutter);
  top: var(--y, 50%);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(10, 11, 13, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 2px;
  white-space: nowrap;
}
.t-label.is-air { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--night-muted); }
.t-label.is-air b { color: var(--night-text); font-weight: 500; margin-left: 6px; }

/* The colour key, in the outside air opposite the Outside label, clear of the wall it explains */
.t-key {
  position: absolute;
  right: var(--gutter);
  top: var(--y, 8%);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--night-muted);
  white-space: nowrap;
}
.t-key b { color: var(--night-text); font-weight: 500; }
.t-key b:first-of-type { margin-left: 6px; }
.t-key i { width: clamp(56px, 7vw, 104px); height: 4px; border-radius: 2px; background: var(--thermal); }

.t-probe {
  position: absolute;
  left: 0; top: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.t-probe.is-on { opacity: 1; }
.t-probe::before {
  content: "";
  position: absolute;
  left: -9px; top: -9px;
  width: 18px; height: 18px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.t-probe-card {
  position: absolute;
  left: 16px; top: -46px;
  min-width: 132px;
  padding: 9px 11px 10px;
  background: rgba(10, 11, 13, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--night-line-2);
  border-radius: 4px;
  white-space: nowrap;
}
.t-probe.flip .t-probe-card { left: auto; right: 16px; }
.t-probe-t { display: block; font-size: 20px; font-weight: 500; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.t-probe-m { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-muted); }

.thermal-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  padding-block: 18px 30px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--night-muted);
}
.thermal-meta b { color: var(--night-text); font-weight: 500; font-variant-numeric: tabular-nums; }
.thermal-meta .status::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--lime);
  vertical-align: 1px;
  animation: pulse 1.1s ease-in-out infinite;
}
.thermal-meta .status.is-done::before { background: var(--spring); animation: none; }
.thermal-meta .hint { color: var(--night-muted); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

@media (max-width: 760px) {
  .thermal-meta .hint { display: none; }
}
@media (max-width: 560px) {
  .t-key { font-size: 0; gap: 6px; }
  .t-key b { font-size: 10.5px; }
}

/* ---------- Credential band ---------- */

.credential { padding-block: clamp(80px, 10vw, 136px) clamp(72px, 9vw, 120px); }
.credential-label { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(28px, 3.5vw, 44px); }
.credential-label img { width: 34px; height: auto; }
.credential-claim {
  max-width: 21ch;
  margin: 0;
  font-size: clamp(2.3rem, 5.2vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.048em;
  font-weight: 500;
  text-wrap: balance;
}
.credential-claim em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1em; letter-spacing: -0.02em; color: var(--leaf); white-space: nowrap; }
.credential-sub { max-width: 46ch; margin: clamp(24px, 3vw, 36px) 0 0; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.5; color: var(--ink-2); }
.credential-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--ink); }
.credential-points > div { padding: 22px 28px 0; border-left: 1px solid var(--line); }
.credential-points > div:first-child { padding-left: 0; border-left: 0; }
.credential-points p { margin-top: 12px; font-size: 16px; color: var(--ink-2); }
@media (max-width: 860px) {
  .credential-points { grid-template-columns: minmax(0, 1fr); }
  .credential-points > div, .credential-points > div:first-child { padding: 20px 0 22px; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* ---------- Manifesto ---------- */

.manifesto {
  max-width: 30ch;
  margin: 0;
  font-size: clamp(1.9rem, 3.9vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.04em;
  font-weight: 500;
}
.manifesto em { font-size: 1.08em; }
.js .manifesto .w { color: rgba(14, 15, 17, 0.14); transition: color 0.45s var(--ease); }
.js .manifesto .w.is-lit { color: var(--ink); }

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(72px, 9vw, 128px);
  border-top: 1px solid var(--ink);
}
.stat { padding: 26px 24px 0; border-left: 1px solid var(--line); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat-num {
  font-size: clamp(2.8rem, 5vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.05em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.stat-label { margin-top: 14px; font-size: 14.5px; line-height: 1.45; color: var(--muted); max-width: 25ch; }
@media (max-width: 820px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n + 3) { padding-top: 32px; }
}

/* ---------- Route map: three pathways, one requirement ---------- */

.routemap { margin-top: clamp(48px, 6vw, 88px); }
.routemap svg { width: 100%; height: auto; overflow: visible; }
.routemap .rm-small { display: none; }
@media (max-width: 760px) {
  .routemap .rm-large { display: none; }
  .routemap .rm-small { display: block; }
}
.rm-lane { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.rm-lane.is-ours { stroke: url(#rm-grad); stroke-width: 3; }
.rm-small .rm-lane.is-ours { stroke: url(#rm-grad-s); }
.rm-node { fill: var(--ink); }
.rm-node-ring { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0.35; }
.rm-cp { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.rm-cp.is-ours { stroke: var(--leaf); }
.rm-cp-label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; fill: var(--muted); }
.rm-title { font-family: var(--font-sans); font-size: 17px; font-weight: 500; letter-spacing: -0.01em; fill: var(--ink); }
.rm-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; fill: var(--muted); }
.rm-end { font-family: var(--font-sans); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; fill: var(--ink); }
.rm-small .rm-title { font-size: 22px; }
.rm-small .rm-sub { font-size: 15px; }
.rm-small .rm-end { font-size: 24px; }
.rm-group { transition: opacity 0.35s var(--ease); }
.rm-hit { fill: none; stroke: transparent; stroke-width: 28; pointer-events: stroke; }
.js .rm-group { cursor: pointer; }
/* The selected pathway (the one the dot follows) stays bright; hovering previews another */
.routemap[data-selected] .rm-group { opacity: 0.32; }
.routemap[data-selected="nathers"] .rm-group[data-lane="nathers"],
.routemap[data-selected="elemental"] .rm-group[data-lane="elemental"],
.routemap[data-selected="h6v2"] .rm-group[data-lane="h6v2"] { opacity: 1; }
.routemap[data-active] .rm-group { opacity: 0.16; }
.routemap[data-active="nathers"] .rm-group[data-lane="nathers"],
.routemap[data-active="elemental"] .rm-group[data-lane="elemental"],
.routemap[data-active="h6v2"] .rm-group[data-lane="h6v2"] { opacity: 1; }
.rm-pulse { fill: var(--leaf); transition: opacity 0.2s var(--ease); }

.js .routemap .rm-lane { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); }
.js .routemap .rm-cp, .js .routemap .rm-cp-label, .js .routemap .rm-title, .js .routemap .rm-sub { opacity: 0; transition: opacity 0.6s var(--ease); }
.js .routemap.is-in .rm-lane { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease-out); }
.js .routemap.is-in .rm-group:nth-child(2) .rm-lane { transition-delay: 0.15s; }
.js .routemap.is-in .rm-group:nth-child(3) .rm-lane { transition-delay: 0.3s; }
.js .routemap.is-in .rm-cp, .js .routemap.is-in .rm-cp-label, .js .routemap.is-in .rm-title, .js .routemap.is-in .rm-sub { opacity: 1; transition-delay: 1s; }

.routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(40px, 5vw, 64px);
}
.route {
  display: flex;
  flex-direction: column;
  padding: 26px 28px 30px;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--line);
  transition: background-color 0.35s var(--ease);
}
.route:first-child { padding-left: 0; border-left: 0; }
.route:last-child { padding-right: 0; }
.route { position: relative; }
/* The bar marks the pathway the dot is following, in the brand colour for the Performance Solution */
.route::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--ink); opacity: 0; transition: opacity 0.35s var(--ease); }
.route.is-ours::before { background: var(--brand); }
.route.is-selected::before { opacity: 1; }
.js .route:not(.is-selected):hover::before { opacity: 0.3; }
.js .route { cursor: pointer; }
.route-pick { appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; line-height: inherit; color: inherit; text-align: left; cursor: default; }
.js .route-pick { cursor: pointer; }
.route-pick::before { content: ""; position: absolute; inset: 0; }
.route-pick:focus-visible { outline: 2px solid var(--leaf-deep); outline-offset: 4px; border-radius: 2px; }
.rm-hint { display: none; margin-top: clamp(28px, 3vw, 40px); }
.js .rm-hint { display: block; }
.route .tag { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.route h3 { margin: 18px 0 12px; font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: -0.03em; }
.route p { font-size: 16px; color: var(--ink-2); }
.route .suits { margin-top: auto; padding-top: 18px; font-size: 15px; color: var(--muted); }
.route .suits b { display: block; margin-bottom: 6px; font: 400 11px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 900px) {
  .routes { grid-template-columns: minmax(0, 1fr); }
  .route, .route:first-child, .route:last-child { padding: 26px 0 30px; border-left: 0; }
}
.route-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.route-foot p { margin: 0; font-size: 16px; color: var(--ink-2); }

/* ---------- Story: scroll-driven H6V2 explainer ---------- */

.story-head { max-width: 900px; }
.story {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 104px);
  margin-top: clamp(24px, 4vw, 48px);
}
.story-steps { padding-bottom: 24vh; }
.story-step {
  min-height: 48vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.28;
  transition: opacity 0.5s var(--ease);
}
.story-step.is-active { opacity: 1; }
.no-story .story-step { opacity: 1; }
.story-step .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--lime); }
.story-step h3 { margin: 18px 0 18px; font-size: clamp(1.7rem, 2.8vw, 2.6rem); line-height: 1.04; letter-spacing: -0.04em; }
.story-step p { max-width: 44ch; font-size: 17px; color: var(--night-soft); }

.story-figure {
  position: sticky;
  top: calc(var(--header-h) + 5vh);
  align-self: start;
  height: min(78vh, 680px);
  margin: 0;
}
.story-stage {
  position: relative;
  height: 100%;
  border: 1px solid var(--night-line);
  border-radius: 10px;
  background: radial-gradient(120% 80% at 50% 0%, #15181e 0%, var(--night-2) 60%);
  overflow: hidden;
}
.story-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2.4vw, 32px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.7s var(--ease-out), visibility 0s linear 0.6s;
}
.story-figure[data-step="1"] [data-layer="1"],
.story-figure[data-step="2"] [data-layer="2"],
.story-figure[data-step="3"] [data-layer="3"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.layer-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--night-line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--night-muted);
}
.layer-head b { color: var(--night-text); font-weight: 500; }
.layer-head span:last-child, .doc-head span { text-transform: none; letter-spacing: 0.04em; }
.layer-head span:last-child { flex-shrink: 0; white-space: nowrap; }
.layer-body { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; padding-block: 18px; }
.layer-body svg { width: 100%; height: 100%; max-height: 100%; }
.layer-foot { padding-top: 14px; border-top: 1px solid var(--night-line); font-size: 13px; line-height: 1.5; color: var(--night-muted); }
.layer-foot strong { color: var(--night-text); font-weight: 500; }

@media (max-width: 960px) {
  .story { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .story-figure { order: -1; top: calc(var(--header-h) + 10px); height: 46vh; min-height: 320px; z-index: 2; }
  .story-step { min-height: 48vh; justify-content: flex-start; padding-top: 4vh; }
  .story-steps { position: relative; z-index: 1; padding-bottom: 8vh; }
}

/* Carpet plot (inside the story stage and the building physics hero): one cell per hour, days
   across and hours down, with ticks on the exact hour and month boundaries */
.carpet, .legend { --carpet-axis: calc(5ch + 12px); font-family: var(--font-mono); font-size: 10px; line-height: 1; color: var(--night-muted); }
.carpet { display: grid; grid-template-columns: var(--carpet-axis) minmax(0, 1fr); }
.carpet canvas { grid-column: 2; grid-row: 1; width: 100%; height: 100%; min-height: 0; background: #15171b; }
.carpet-y { grid-column: 1; grid-row: 1; position: relative; }
.carpet-y span { position: absolute; right: 0; padding-right: 12px; transform: translateY(-50%); }
.carpet-y span::after { content: ""; position: absolute; right: 0; top: 50%; width: 6px; border-top: 1px solid var(--night-line-2); }
.carpet-x { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: var(--months); }
.carpet-x span, .band-months span { position: relative; padding-top: 11px; text-align: center; }
.carpet-x span::before, .band-months span::before,
.carpet-x span:last-child::after, .band-months span:last-child::after { content: ""; position: absolute; top: 0; left: 0; height: 6px; border-left: 1px solid var(--night-line-2); }
.carpet-x span:last-child::after, .band-months span:last-child::after { left: auto; right: 0; }
.layer-body .carpet { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
/* The colour scale, with a tick at each label */
.legend { display: grid; grid-template-columns: var(--carpet-axis) minmax(0, 1fr); margin-top: 20px; }
.legend-unit { align-self: end; padding-right: 12px; text-align: right; }
.legend-bar { position: relative; height: 5px; margin-bottom: 16px; background: var(--thermal); }
.legend-bar span { position: absolute; top: 5px; padding-top: 6px; transform: translateX(-50%); }
.legend-bar span::before { content: ""; position: absolute; top: 0; left: 50%; height: 4px; border-left: 1px solid var(--night-line-2); }
.legend-bar i { position: absolute; top: 5px; height: 2px; border-left: 1px solid var(--night-line-2); }

/* Story diagrams, each drawn twice: a large version, and a small one for narrow figures, chosen
   by the width the figure has. Lines stay one pixel at any size. */
.layer-body, .figure-panel { container-type: inline-size; }
.dg text { font-family: var(--font-mono); }
.dg path, .dg rect, .dg circle { vector-effect: non-scaling-stroke; }
.dg-small { display: none; }
@container (max-width: 480px) {
  .dg-large { display: none; }
  .dg-small { display: block; }
}
/* Two models */
.tw-label { fill: var(--night-text); letter-spacing: 0.08em; }
.tw-sub, .tw-head, .tw-foot { fill: var(--night-muted); letter-spacing: 0.08em; }
.tw-sub { letter-spacing: 0.04em; }
.tw-line { fill: none; stroke: var(--night-soft); stroke-width: 1.2; }
.tw-solid, .tw-roof { fill: rgba(242, 239, 232, 0.07); stroke: var(--night-soft); stroke-width: 1.2; stroke-linejoin: miter; }
.tw-batt { fill: none; stroke-width: 1; }
.tw-glass { fill: none; stroke-width: 1.4; }
.tw-batt.is-ours, .tw-glass.is-ours { stroke: var(--lime); }
.tw-batt.is-ref, .tw-glass.is-ref { stroke: var(--night-muted); }
.tw-hood.is-ours { fill: var(--lime); }
.tw-hood.is-ref { fill: var(--night-muted); }
.tw-ground { stroke: var(--night-line-2); stroke-width: 1; }
.tw-rule { stroke: var(--night-line); stroke-width: 1; }
.tw-equals { stroke: var(--night-muted); stroke-width: 1.4; }
.tw-key { fill: none; stroke: var(--night-soft); stroke-width: 1; }
.tw-key-n { fill: var(--night-text); }
.tw-leader { stroke: var(--night-soft); stroke-width: 1; }
.tw-leader-dot { fill: var(--night-soft); }
.tw-item { fill: var(--night-soft); letter-spacing: 0.02em; }
.tw-item.is-diff { fill: var(--lime); }
/* Two tests */
.ld-text { fill: var(--night-muted); letter-spacing: 0.08em; }
.ld-pass { fill: var(--lime); letter-spacing: 0.08em; }
.ld-heat { fill: var(--heating); }
.ld-cool { fill: var(--cooling); }
.ld-refbox { fill: none; stroke: var(--night-muted); stroke-width: 1; }
.ld-axis { stroke: var(--night-line-2); stroke-width: 1; }
.ld-zero { stroke: var(--night-soft); stroke-width: 1; }
.ld-rule { stroke: var(--night-line); stroke-width: 1; }

.story-layer .grow { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform 1.1s var(--ease-out) 0.25s; }
.story-layer .grow-y { transform-box: fill-box; transform-origin: center bottom; transform: scaleY(0); transition: transform 0.9s var(--ease-out); }
.story-layer .grow-y.down { transform-origin: center top; }
.story-figure[data-step="3"] [data-layer="3"] .grow,
.story-figure[data-step="3"] [data-layer="3"] .grow-y { transform: none; }
.static-figure .grow, .static-figure .grow-y { transform: none; }

/* ---------- Index list (services) ---------- */

.index-list { list-style: none; border-top: 1px solid var(--ink); counter-reset: idx; }
.index-list li {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1.15fr) minmax(0, 1.3fr) 130px;
  gap: 28px;
  align-items: baseline;
  padding: 30px 0 32px;
  border-bottom: 1px solid var(--line);
  counter-increment: idx;
}
.index-list li::before {
  content: counter(idx, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.index-list li::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}
.index-list.links li:hover::after, .index-list.links li:focus-within::after { transform: scaleX(1); }
.index-list h3 {
  font-size: clamp(1.45rem, 2.3vw, 2.1rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  transition: transform 0.5s var(--ease-out);
}
.index-list.links li:hover h3 { transform: translateX(10px); }
.index-list p { font-size: 16px; color: var(--ink-2); }
.index-list .tag { justify-self: end; text-align: right; }
.dark .index-list { border-top-color: var(--night-line-2); }
.dark .index-list li { border-bottom-color: var(--night-line); }
.dark .index-list p { color: var(--night-muted); }
@media (max-width: 900px) {
  .index-list li { grid-template-columns: 44px minmax(0, 1fr); gap: 10px 16px; }
  .index-list p, .index-list .tag { grid-column: 2; }
  .index-list .tag { justify-self: start; text-align: left; }
}

/* ---------- Research and development ---------- */

.rnd { overflow: hidden; padding-bottom: calc(var(--section) + clamp(180px, 22vw, 300px)); }
.rnd-lines {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(240px, 28vw, 380px);
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent);
  mask-image: linear-gradient(to top, #000 55%, transparent);
}
.page-hero .rnd-lines, .rnd-lines.is-full { top: 0; height: auto; -webkit-mask-image: linear-gradient(to left, #000 30%, transparent 85%); mask-image: linear-gradient(to left, #000 30%, transparent 85%); }
.rnd-lines canvas { width: 100%; height: 100%; }
.rnd-themes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(56px, 7vw, 104px);
  border-top: 1px solid var(--night-line-2);
}
.rnd-theme { padding: 28px 32px 0; border-left: 1px solid var(--night-line); }
.rnd-theme:first-child { padding-left: 0; border-left: 0; }
.rnd-theme h3 { margin: 18px 0 12px; font-size: clamp(1.25rem, 1.8vw, 1.55rem); letter-spacing: -0.03em; }
.rnd-theme p { font-size: 15.5px; color: var(--night-muted); }
.rnd-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 18px 40px;
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 24px;
  border-top: 1px solid var(--night-line);
}
.rnd-note p { margin: 0; max-width: 60ch; font-size: 15px; color: var(--night-muted); }
@media (max-width: 900px) {
  .rnd-themes { grid-template-columns: minmax(0, 1fr); }
  .rnd-theme, .rnd-theme:first-child { padding: 26px 0 30px; border-left: 0; border-bottom: 1px solid var(--night-line); }
}

/* Named partners (switched off until each company approves) */
.partners { margin-top: clamp(48px, 6vw, 80px); padding-top: 20px; border-top: 1px solid var(--night-line-2); }
.partner-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.partner-list li { display: flex; align-items: center; min-height: 112px; padding-right: 24px; }
.partner-list li + li { padding-left: 28px; border-left: 1px solid var(--night-line); }
.wm { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.wm-caps { font-size: clamp(1.3rem, 2.2vw, 1.85rem); letter-spacing: 0.05em; }
.wm sup { font-size: 0.4em; font-weight: 400; }
.partners-note { margin-top: 14px; font-size: 12.5px; color: var(--night-muted); }

/* ---------- Documents (design brief and report) ---------- */

/* Two A4 sheets drawn to scale. Every size inside is a share of the figure's width (cqw),
   so the pair keeps the same composition from a wide column down to a phone. */
.docs {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 100 / 131;
}
.doc {
  position: absolute;
  width: 74cqw;
  aspect-ratio: 210 / 297;
  padding: 5.4cqw 5.4cqw 0;
  overflow: hidden;
  background: var(--sheet);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(14, 15, 17, 0.04), 0 40px 70px -36px rgba(14, 15, 17, 0.42), 0 14px 28px -16px rgba(14, 15, 17, 0.16);
  transition: transform 0.8s var(--ease-out);
}
/* Square to the page and offset, so the report's title shows above the brief, and they part a little on hover */
.doc-back { right: 0; top: 0; }
.doc-front { left: 0; top: 26cqw; }
.docs:hover .doc-back { transform: translate(1.2cqw, -1cqw); }
.docs:hover .doc-front { transform: translate(-1.2cqw, 1cqw); }
.doc-head { display: flex; justify-content: space-between; gap: 2cqw; padding-bottom: 2.5cqw; border-bottom: 1.5px solid var(--ink); font-family: var(--font-mono); font-size: 1.9cqw; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.doc-head b { color: var(--ink); font-weight: 500; }
.doc-title { margin: 3.2cqw 0; font-size: 3.9cqw; line-height: 1.15; letter-spacing: -0.025em; }
.doc dl { margin: 0; }
.doc-row { display: grid; grid-template-columns: 19cqw minmax(0, 1fr); gap: 2cqw; padding: 1.55cqw 0; border-top: 1px solid var(--line); font-size: 2.3cqw; line-height: 1.45; }
.doc-row dt { font-family: var(--font-mono); font-size: 1.8cqw; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 0.35cqw; }
.doc-row dd { margin: 0; color: var(--ink-2); }
.doc-bars { display: grid; gap: 1.4cqw; margin-top: 3.2cqw; }
.doc-bars span { display: block; height: 1.25cqw; border-radius: 2px; background: var(--paper-3); }
.doc-foot { position: absolute; left: 5.4cqw; right: 5.4cqw; bottom: 3.6cqw; display: flex; justify-content: space-between; padding-top: 1.4cqw; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 1.6cqw; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.doc-stamp {
  position: absolute;
  right: 4.6cqw; bottom: 10cqw;
  padding: 1.4cqw 2cqw 1.25cqw;
  font-family: var(--font-mono);
  font-size: 1.9cqw;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--leaf-deep);
  border: 1.5px solid var(--leaf-deep);
  border-radius: 2px;
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce) {
  .docs:hover .doc-back, .docs:hover .doc-front { transform: none; }
}

/* ---------- Checklist ---------- */

.checklist { list-style: none; border-top: 1px solid var(--ink); counter-reset: k; }
.checklist li {
  counter-increment: k;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  padding: 17px 0 18px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  line-height: 1.42;
  letter-spacing: -0.01em;
}
.checklist li::before { content: counter(k, decimal-leading-zero); font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); padding-top: 4px; }
.checklist li span { display: block; margin-top: 4px; font-size: 14.5px; letter-spacing: 0; color: var(--muted); }
.checklist.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; border-top: 0; }
.checklist.cols li { border-top: 1px solid var(--ink); border-bottom: 0; padding-bottom: 28px; }
@media (max-width: 900px) { .checklist.cols { grid-template-columns: minmax(0, 1fr); } .checklist.cols li { border-top: 1px solid var(--line); } }
.dark .checklist { border-top-color: var(--night-line-2); }
.dark .checklist li { border-bottom-color: var(--night-line); }
.dark .checklist li span, .dark .checklist li::before { color: var(--night-muted); }

/* ---------- Quote ---------- */

.quote { margin: 0; padding-left: 24px; border-left: 2px solid var(--leaf); }
.quote p { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.5rem, 2.5vw, 2.15rem); line-height: 1.2; letter-spacing: -0.01em; }
.quote cite { display: block; margin-top: 16px; font-style: normal; }

/* ---------- Principles ---------- */

.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(56px, 7vw, 96px); }
.principle { padding: 0 28px 0 0; }
.principle + .principle { padding-left: 28px; border-left: 1px solid var(--line); }
.principle .num { display: block; font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: 1; font-weight: 500; letter-spacing: -0.05em; color: var(--paper-2); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.principle h3 { margin: 26px 0 12px; font-size: 19px; letter-spacing: -0.02em; }
.principle p { font-size: 15.5px; color: var(--ink-2); }
@media (max-width: 1080px) {
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .principle:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
  .principles { grid-template-columns: minmax(0, 1fr); }
  .principle + .principle { padding-left: 0; border-left: 0; }
}

/* ---------- Insights index ---------- */

.insight-list { list-style: none; border-top: 1px solid var(--ink); }
.insight-list a {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) minmax(0, 0.9fr) 40px;
  gap: 28px;
  align-items: baseline;
  padding: 30px 0 32px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.insight-list .t { font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.1; letter-spacing: -0.035em; transition: transform 0.5s var(--ease-out); }
.insight-list .d { font-size: 15.5px; color: var(--muted); }
.insight-list .mono span { display: block; }
.insight-list .go { justify-self: end; font-size: 22px; transition: transform 0.4s var(--ease-out); }
.insight-list a:hover .t { transform: translateX(10px); }
.insight-list a:hover .go { transform: translateX(6px); }
/* The same brand line sweeps along the row as on the numbered lists */
.insight-list a { position: relative; }
.insight-list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}
.insight-list a:hover::after, .insight-list a:focus-visible::after { transform: scaleX(1); }
@media (max-width: 900px) {
  .insight-list a { grid-template-columns: minmax(0, 1fr) 32px; gap: 10px 16px; }
  .insight-list .mono { grid-column: 1 / -1; }
  .insight-list .mono span { display: inline; }
  .insight-list .mono span + span::before { content: " · "; }
  .insight-list .d { grid-column: 1; }
  .insight-list .go { grid-row: 2; grid-column: 2; }
}

/* ---------- CTA ---------- */

.cta { overflow: hidden; padding-block: clamp(112px, 15vw, 220px); }
.cta::before {
  content: "";
  position: absolute;
  left: 68%; top: 60%;
  z-index: -1;
  width: min(1200px, 110vw); height: 760px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(100, 180, 49, 0.3), rgba(39, 149, 60, 0.22) 36%, rgba(30, 109, 54, 0.1) 62%, transparent);
  pointer-events: none;
}
.cta-title { max-width: 15ch; font-size: clamp(2.7rem, 6.8vw, 6.6rem); line-height: 0.94; letter-spacing: -0.055em; }
.cta-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 64px; align-items: end; margin-top: clamp(36px, 5vw, 64px); }
.cta-row p { max-width: 50ch; margin: 0; font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: var(--night-soft); }
@media (max-width: 760px) { .cta-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Page heroes (inner pages) ---------- */

.page-hero { padding-top: calc(var(--header-h) + clamp(56px, 10vw, 140px)); padding-bottom: clamp(64px, 8vw, 112px); }
.page-hero .display { margin: 26px 0 30px; max-width: 14ch; }
.page-hero .display.wide { max-width: none; }
.page-hero .lead { max-width: 54ch; }
.page-hero .actions { margin-top: 40px; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (max-width: 960px) { .page-hero-grid { grid-template-columns: minmax(0, 1fr); } }
.page-hero.dark { overflow: hidden; }

/* H6V2 decoded */
.clause {
  position: relative;
  padding-bottom: 92px;
}
.clause-code {
  display: flex;
  font-size: clamp(5.5rem, 15vw, 15rem);
  line-height: 0.8;
  font-weight: 500;
  letter-spacing: -0.06em;
}
/* Outlined lettering. The font's letters are built from overlapping parts and a text stroke traces
   every part, which leaves stray lines inside letters such as H and 4. So the stroke is painted first
   and the letter filled over it in the background colour: only the outer half of the stroke shows,
   hence the doubled width. The fill must match the background behind it. */
.clause-code span { position: relative; color: var(--paper); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.clause-code span.is-key { color: var(--ink); -webkit-text-stroke: 0; }
.clause-notes { display: grid; grid-template-columns: 2fr 1fr 1fr; margin-top: 22px; border-top: 1px solid var(--ink); }
.clause-notes p { margin: 0; padding: 12px 14px 0 0; font-family: var(--font-mono); font-size: 11px; line-height: 1.45; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.clause-notes p + p { padding-left: 14px; border-left: 1px solid var(--line); }
.clause-notes b { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 500; }

/* H6V2 and J1V3 side by side (home) */
.pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: clamp(16px, 3vw, 48px);
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 28px;
  border-top: 1px solid var(--ink);
}
.pair-item { display: flex; flex-direction: column; gap: 16px; }
.pair-item:last-child { align-items: flex-end; text-align: right; }
.pair-code {
  font-size: clamp(3.6rem, 11.5vw, 11rem);
  line-height: 0.8;
  font-weight: 500;
  letter-spacing: -0.06em;
  /* Outlined lettering: see the note on .clause-code span */
  color: var(--paper);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
}
.pair-code.is-solid { color: var(--ink); -webkit-text-stroke: 0; }
.pair-eq {
  align-self: center;
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  line-height: 1;
  background: var(--brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pair-caption { margin-top: 22px; text-align: center; }
@media (max-width: 700px) {
  .pair { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pair-item:last-child { align-items: flex-start; text-align: left; }
  .pair-eq { display: none; }
  .pair-code { -webkit-text-stroke-width: 2.4px; }
  .pair-caption { text-align: left; }
}

/* NatHERS scale (NatHERS page hero): a plain 0-10 ruler, deliberately not star artwork */
.scale-fig { margin: 0; padding: clamp(22px, 3vw, 36px); background: var(--night); color: var(--night-text); border-radius: 10px; }
.scale-head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--night-line); color: var(--night-muted); }
.scale-ruler { position: relative; margin: 92px 0 6px; }
/* A ruler: the scale's band, then a tick at every star and half star, numbered on the stars */
.scale-fill {
  display: block;
  height: 8px;
  background: linear-gradient(90deg, #24272c 0 70%, transparent 70%), linear-gradient(90deg, #27953c 70%, #9fd127 88%, #cce310 100%);
}
.scale-svg { display: block; width: 100%; height: 12px; overflow: visible; }
.scale-svg path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
.scale-major { stroke: var(--night-soft); }
.scale-minor { stroke: var(--night-muted); }
.scale-ticks { position: relative; display: block; height: 1em; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; line-height: 1; color: var(--night-muted); }
.scale-ticks i { position: absolute; top: 0; font-style: normal; transform: translateX(-50%); }
.scale-mark { position: absolute; left: 70%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.scale-mark b { font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; font-weight: 500; letter-spacing: -0.05em; color: var(--lime); }
.scale-mark::after { content: ""; width: 1px; height: 30px; margin-top: 8px; background: var(--night-text); }
.scale-fig figcaption { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--night-line); font-size: 14px; line-height: 1.5; color: var(--night-muted); }
.scale-fig figcaption b { color: var(--night-text); font-weight: 500; }

/* One design in eight orientations (Modular page) */
.orient-fig svg { display: block; width: 100%; max-width: 380px; height: auto; margin: 22px auto 0; overflow: visible; }
.orient-fig svg :is(path, rect, circle) { vector-effect: non-scaling-stroke; }
.or-ring { fill: none; stroke: var(--night-line-2); stroke-width: 1; }
.or-tick { stroke: var(--night-line-2); stroke-width: 1; }
.or-tick.is-mid { stroke: var(--night-muted); }
.or-tick.is-major { stroke: var(--night-soft); }
.or-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; fill: var(--night-muted); text-anchor: middle; dominant-baseline: central; }
/* The module in plan: double-line walls, partitions, and the window as a gap with its glass */
.or-out { fill: rgba(242, 239, 232, 0.04); stroke: var(--night-text); stroke-width: 1.2; }
.or-in, .or-wall { fill: none; stroke: var(--night-muted); stroke-width: 1; }
.or-gap { fill: var(--night); }
.or-sill { stroke: var(--night-text); stroke-width: 1; }
.or-glaze { stroke: var(--leaf); stroke-width: 2; }
.or-hub { fill: none; stroke: var(--night-line-2); stroke-width: 1; }
.or-north { fill: var(--night-text); }
.or-north-half { fill: none; stroke: var(--night-text); stroke-width: 1; stroke-linejoin: miter; }
@media (prefers-reduced-motion: no-preference) {
  .or-glaze { animation: or-glaze 8s calc(var(--i) * 1s) infinite; }
}
@keyframes or-glaze { 0%, 9% { stroke: var(--lime-bright); } 13%, 100% { stroke: var(--leaf); } }

/* Project stages (Planning page) */
.stages-list { list-style: none; margin: 8px 0 0; padding: 0; }
.stages-list li { position: relative; padding: 16px 0 16px 30px; }
.stages-list li + li { border-top: 1px solid var(--night-line); }
.stages-list li::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 1px; background: var(--night-line-2); }
.stages-list li:first-child::before { top: 23px; }
.stages-list li:last-child::before { bottom: auto; height: 23px; }
.stages-list li::after { content: ""; position: absolute; left: 0; top: 18px; width: 11px; height: 11px; border-radius: 50%; background: var(--night); box-shadow: inset 0 0 0 1px var(--night-muted); }
.stages-list li.is-now::after { background: var(--lime); box-shadow: none; }
.stages-list .mono { display: block; color: var(--night-muted); }
.stages-list li.is-now .mono { color: var(--lime); }
.stages-list b { display: block; margin-top: 6px; font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 500; letter-spacing: -0.02em; color: var(--night-text); }

/* Building physics hero band */
.band { position: relative; height: clamp(220px, 34vh, 380px); margin-top: clamp(40px, 6vh, 72px); }
.band canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.band-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-block: 18px 32px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-muted); }
.band-months { display: grid; grid-template-columns: var(--months); font-family: var(--font-mono); font-size: 10px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; color: var(--night-muted); }
.band-scale { display: inline-flex; align-items: center; gap: 10px; }
.band-scale i { display: inline-block; width: 120px; height: 5px; background: var(--thermal); }

/* ---------- Tables ---------- */

.table-wrap { border-top: 1px solid var(--ink); }
.table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.table th, .table td { text-align: left; vertical-align: top; padding: 20px 24px 22px 0; border-bottom: 1px solid var(--line); }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table thead th { padding-block: 16px; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.table tbody th { font-weight: 500; letter-spacing: -0.01em; width: 20%; }
.table td { color: var(--ink-2); }
.table .is-ours { background: rgba(39, 149, 60, 0.06); padding-left: 18px; padding-right: 18px; }
.table thead .is-ours { color: var(--ink); box-shadow: inset 0 3px 0 var(--leaf); }
.table .belief { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); width: 30%; }
.table td .ref { margin: 0 4px 6px 0; }
@media (max-width: 820px) {
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table, .table tbody, .table tr, .table th, .table td { display: block; width: 100% !important; }
  .table tr { padding: 22px 0 24px; border-bottom: 1px solid var(--line); }
  .table th, .table td { padding: 0; border: 0; }
  .table tbody th { margin-bottom: 14px; font-size: 19px; }
  .table td + td { margin-top: 14px; }
  .table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .table td.is-ours { padding: 12px 14px; }
}

/* ---------- Callout ---------- */

.callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; padding: 28px 30px; background: var(--ink); color: var(--night-text); border-radius: 6px; }
.callout .glyph { font-size: 30px; line-height: 1; background: var(--brand-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.callout p { font-size: 17px; color: var(--night-soft); }
.callout p strong { color: #fff; font-weight: 500; }

/* ---------- Same / differ lists ---------- */

.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.compare h3 { display: flex; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); font-size: 18px; letter-spacing: -0.015em; }
.compare h3 .glyph { font-family: var(--font-mono); font-size: 18px; color: var(--muted); }
.compare ul { list-style: none; }
.compare li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--ink-2); }
.compare .note { margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.compare .is-diff h3 { border-bottom-color: var(--leaf); }
.compare .is-diff h3 .glyph { color: var(--leaf-deep); }
@media (max-width: 680px) { .compare { grid-template-columns: minmax(0, 1fr); } }

.figure-panel { margin: 0; padding: clamp(18px, 2.4vw, 32px); background: var(--night); color: var(--night-text); border-radius: 10px; }
.figure-panel svg { width: 100%; height: auto; }
.figure-panel figcaption { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--night-line); font-size: 13px; color: var(--night-muted); }

/* ---------- Process ---------- */

.process { list-style: none; border-top: 1px solid var(--ink); }
.process li {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 24px;
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--line);
}
.process .n { font-family: var(--font-mono); font-size: 12px; color: var(--muted); padding-top: 6px; }
.process h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); letter-spacing: -0.025em; }
.process p { font-size: 16px; color: var(--ink-2); }
.process .is-branch { background: var(--paper-2); margin-inline: -18px; padding-inline: 18px; }
.process .is-optional h3::after { content: "Optional"; margin-left: 12px; padding: 4px 7px 3px; font: 400 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); border-radius: 2px; vertical-align: 4px; }
@media (max-width: 760px) {
  .process li { grid-template-columns: 44px minmax(0, 1fr); gap: 8px 12px; }
  .process p { grid-column: 2; }
}

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 24px 0;
  list-style: none;
  cursor: pointer;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: color 0.2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--font-mono); font-size: 20px; font-weight: 400; color: var(--muted); transition: transform 0.35s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--ink-2); }
.faq .answer { max-width: 66ch; padding: 0 0 28px; color: var(--ink-2); }

/* ---------- Now band (home): a timely pointer, in the brand lime ---------- */

.now-band { background: var(--lime); color: var(--ink); }
.now-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding-block: 18px; }
.now-tag { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: rgba(14, 15, 17, 0.75); }
/* A live dot: a soft ring goes out from it every few seconds, so the banner reads as current */
.now-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.now-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ink); animation: now-ping 2.6s cubic-bezier(0.2, 0.6, 0.35, 1) infinite; }
@keyframes now-ping { 0% { transform: scale(1); opacity: 0.45; } 75%, 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .now-dot::after { display: none; } }
.now-text { flex: 1 1 360px; margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.now-link { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; white-space: nowrap; }
.now-link:hover { text-decoration-thickness: 2.5px; }
.now-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.table-note { max-width: 90ch; margin-top: 18px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.table-note b { color: var(--ink); font-weight: 500; }
.scale-fig figcaption a.link { color: var(--night-text); }

/* ---------- Wall lab (wall systems page) ---------- */

.lab { margin-top: clamp(40px, 5vw, 64px); }
.lab-controls { display: grid; justify-items: start; gap: 22px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 4px; border: 1px solid var(--night-line-2); border-radius: 999px; }
.seg[hidden] { display: none; }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: block; padding: 9px 16px; border-radius: 999px; font-size: 15px; line-height: 1.2; color: var(--night-soft); transition: background-color 0.2s, color 0.2s; }
.seg label:hover span { color: var(--night-text); }
.seg input:checked + span { background: var(--night-text); color: var(--night); }
.seg input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 2px; }
.seg input:disabled { cursor: not-allowed; }
.seg input:disabled + span { opacity: 0.32; text-decoration: line-through; }
/* The wall lab's month bar, locked to the month of the hottest or coldest day: shown, not crossed out */
.lab-opt.is-locked .seg label { pointer-events: none; }
.lab-opt.is-locked .seg input:disabled + span { opacity: 0.45; text-decoration: none; }
.lab-opt.is-locked .seg input:checked + span { opacity: 1; }
.seg-sub { border-color: var(--night-line); }
.seg-sub span { padding: 7px 14px; font-size: 14px; }
.seg-sub input:checked + span { background: rgba(178, 219, 35, 0.16); color: var(--lime); }
/* The options for the chosen wall, each a small labelled group */
.lab-opts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 22px; }
.lab-opt { min-width: 0; margin: 0; padding: 0; border: 0; }
.lab-opt[hidden] { display: none; }
.lab-opt legend { float: left; width: 100%; margin: 0 0 8px; padding: 0 0 0 2px; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-muted); }
/* Block-level, so the group is as wide as its widest part, not the label and the buttons side by side */
.lab-opt .seg { display: flex; width: fit-content; clear: both; }
/* Where and when: the climate zone, the way the wall faces and the day, under the wall's own options */
.lab-where { padding-top: 18px; border-top: 1px solid var(--night-line); }
.lab-legend { display: block; margin: 0 0 8px; padding: 0 0 0 2px; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-muted); }
.lab-select {
  display: block; min-width: 240px; padding: 8px 40px 8px 16px; border: 1px solid var(--night-line); border-radius: 999px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a09d96' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 15px center / 11px 8px;
  font: 400 14px/1.3 var(--font-sans); color: var(--night-text); cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: border-color 0.2s;
}
.lab-select:hover { border-color: var(--night-line-2); }
.lab-select:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.lab-select option, .lab-select optgroup { background: #121418; color: var(--night-text); }
/* The time across the day, under the chart */
.lab-time { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 16px; margin-top: 16px; }
.lab-time .lab-legend { margin: 0; }
.lab-time input[type="range"] { width: 100%; margin: 0; accent-color: var(--lime); cursor: pointer; }
.lab-now { grid-column: 1 / -1; font-size: 14px; line-height: 1.55; color: var(--night-soft); font-variant-numeric: tabular-nums; }
.lab-now b { color: var(--night-text); font-weight: 500; }
.lc-now { stroke: var(--night-text); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.55; }
.lc-now-dot { fill: var(--night); stroke: var(--lime); stroke-width: 2; }
.lab-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 3vw, 48px); margin-top: 24px; }
.lab-fig { margin: 0; }
.lab-canvas { position: relative; height: clamp(320px, 33vw, 440px); border: 1px solid var(--night-line); border-radius: 10px; overflow: hidden; background: #0b0d12; }
.lab-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.lab-labels { position: absolute; inset: 0; pointer-events: none; }
.lab-tag { position: absolute; left: 12px; transform: translateY(-50%); padding: 3px 7px 2px; font: 10.5px/1.25 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--night-text); white-space: nowrap; background: rgba(10, 11, 13, 0.74); border-radius: 3px; }
/* Thermal break strips have their own soft pink, outside the temperature scale, on the canvas and
   as a swatch on their label */
.lab { --lab-break: #f4b6c9; --lab-break-edge: #e48fae; }
.lab-tag.is-break { display: inline-flex; align-items: center; gap: 7px; }
.lab-tag.is-break::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--lab-break); box-shadow: inset 0 0 0 1px var(--lab-break-edge); }
.lab-lock { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; color: var(--lime); letter-spacing: 0.06em; }
.lab-lock[hidden] { display: none; }
.lab-lock svg { width: 9px; height: 11px; fill: currentColor; flex: none; }
.lab-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-top: 10px; color: var(--night-muted); }
.lab-scale { display: inline-flex; align-items: center; gap: 8px; }
.lab-scale i { width: 72px; height: 4px; background: var(--thermal); }
.lab-tag.is-air { color: var(--night-muted); }
.lab-tag.is-air b { margin-left: 8px; color: var(--night-text); font-weight: 500; }
.lab-read { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.lab-name { margin: 0; }
.lab-name b { display: block; font-size: clamp(1.45rem, 2.2vw, 1.9rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; color: var(--night-text); }
.lab-name > span { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lime); }
.lab-name .nw, .wall-table .nw { white-space: nowrap; }
.lab-stats { margin: 0; border-top: 1px solid var(--night-line-2); }
.lab-stats > div { padding: 14px 0 16px; border-bottom: 1px solid var(--night-line); }
.lab-stats dt { font-family: var(--font-mono); font-size: 11px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-muted); }
.lab-stats dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 6px 0 0; font-size: 14px; color: var(--night-muted); }
.lab-stats dd b { font-size: 28px; font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; color: var(--night-text); font-variant-numeric: tabular-nums; }
.lab-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* Gauges: the bar cut at each unit of its scale (R1, R2, R3; every 50 kJ/m²K), numbered beneath */
.lab-bar { position: relative; display: block; height: 6px; margin-top: 10px; overflow: hidden; background: var(--night-line); }
.lab-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(var(--step) - 1px), var(--night) calc(var(--step) - 1px) var(--step)); pointer-events: none; }
.lab-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; transition: width 0.6s var(--ease-out); }
.lab-ticks { position: relative; display: block; height: 10px; margin-top: 5px; font-family: var(--font-mono); font-size: 9.5px; line-height: 1; letter-spacing: 0.04em; color: var(--night-muted); }
.lab-ticks i { position: absolute; top: 0; font-style: normal; transform: translateX(-50%); }
.lab-bar .is-clear { background: rgba(242, 239, 232, 0.22); }
.lab-bar .is-val { background: linear-gradient(90deg, var(--leaf), var(--lime)); }
.lab-note { margin: 0; font-size: 15px; line-height: 1.55; color: var(--night-soft); }
/* Ask about the wall or home on screen, or copy a link to it */
.lab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.lab-actions .btn { padding: 13px 18px; font-size: 14.5px; }
.lab-copy { padding: 6px 0; border: 0; background: none; font: 400 11px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-soft); text-decoration: underline; text-decoration-color: var(--night-line-2); text-underline-offset: 4px; cursor: pointer; transition: color 0.2s, text-decoration-color 0.2s; }
.lab-copy:hover { color: var(--night-text); text-decoration-color: currentColor; }
.lab-day { margin: clamp(28px, 4vw, 44px) 0 0; padding: clamp(16px, 2.2vw, 26px); border: 1px solid var(--night-line); border-radius: 10px; }
.lab-day-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; color: var(--night-muted); }
.lab-key { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.lab-key [hidden] { display: none; }
.lab-key i { display: inline-block; width: 18px; margin-right: 7px; vertical-align: middle; border-top: 2px solid; }
.lab-key .k-wall { border-color: var(--lime); }
.lab-key .k-base { border-top-style: dashed; border-color: var(--night-soft); }
.lab-key .k-out { border-top-width: 1px; border-color: var(--night-muted); }
.lab-key .k-sun { border-top-style: dotted; border-color: #eef39a; }
.lab-day svg { display: block; width: 100%; height: auto; margin-top: 14px; overflow: visible; }
.lc-grid { stroke: var(--night-line); stroke-width: 1; }
.lc-zero { stroke: var(--night-line-2); stroke-width: 1; }
.lc-hot { stroke: var(--night-line-2); stroke-width: 1; stroke-dasharray: 2 4; }
.lc-text { fill: var(--night-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }
.lc-axis { fill: none; stroke: var(--night-line-2); stroke-width: 1; }
.lc-title { fill: var(--night-muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; }
.lc-note { fill: var(--night-soft); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }
.lc-lag { fill: none; stroke: var(--night-soft); stroke-width: 1; transition: opacity 0.2s; }
.lc-lag-label { fill: var(--night-text); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; transition: opacity 0.2s; }
.lc-out { fill: none; stroke: var(--night-muted); stroke-width: 1.2; opacity: 0.75; }
.lc-sun { fill: none; stroke: #eef39a; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.5 4.5; opacity: 0.7; }
.lc-base { fill: none; stroke: var(--night-soft); stroke-width: 1.6; stroke-dasharray: 5 5; }
.lc-wall { fill: none; stroke: var(--lime); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.lc-peak { fill: var(--lime); transition: opacity 0.2s; }
.lc-peak-label { fill: var(--night-text); font-family: var(--font-mono); font-size: 12px; font-weight: 500; transition: opacity 0.2s; }
.lab-day figcaption { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--night-line); font-size: 13px; line-height: 1.5; color: var(--night-muted); }
.lab-day figcaption b { color: var(--night-text); font-weight: 500; }
.wall-table .tsub { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
/* The result bar for phones: shown while the controls are in view and the readout isn't */
.lab-sticky { display: none; }
@media (max-width: 900px) {
  .lab-grid { grid-template-columns: minmax(0, 1fr); }
  .lab-canvas { height: 300px; }
  .lab-sticky {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 50;
    display: flex; align-items: baseline; gap: 10px; padding: 11px 16px 12px;
    border: 1px solid var(--night-line-2); border-radius: 14px; background: #121418;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34); color: var(--night-muted); font: 400 13px/1.3 var(--font-sans); text-align: left; cursor: pointer;
    opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 0.25s, transform 0.3s var(--ease-out);
  }
  .lab-sticky.is-on { opacity: 1; transform: none; pointer-events: auto; }
  .lab-sticky b { flex: none; font-size: 22px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--night-text); font-variant-numeric: tabular-nums; }
  .lab-sticky span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) { .lab-sticky { transition: none; transform: none; } }
@media (max-width: 560px) {
  .seg[data-control="system"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: 16px; }
  .seg[data-control="system"] span { display: flex; align-items: center; justify-content: center; height: 100%; padding: 8px 6px; border-radius: 12px; font-size: 14px; text-align: center; }
  .seg-sub span { padding: 7px 12px; }
  .lab-controls { justify-items: stretch; }
  .lab-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .lab-opt.is-wide { grid-column: 1 / -1; }
  .lab-opt .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; border-radius: 14px; }
  .lab-opt .seg span { padding: 7px 4px; border-radius: 10px; text-align: center; }
  .lab-opt .seg.seg-face { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lab-opt .seg.seg-month { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lab-zone { grid-column: 1 / -1; }
  .lab-select { width: 100%; min-width: 0; }
  .lc-text { font-size: 10.5px; }
}

/* ---------- Carbon lab (embodied carbon page) ---------- */

/* One colour per element, in the validated categorical order for the lab's dark surface */
.carbon-lab { --c-floor: #3987e5; --c-walls: #d95926; --c-internal: #199e70; --c-roof: #c98500; --c-windows: #d55181; --c-surface: #0b0d12; }
.carbon-lab .is-floor { --c: var(--c-floor); }
.carbon-lab .is-walls { --c: var(--c-walls); }
.carbon-lab .is-internal { --c: var(--c-internal); }
.carbon-lab .is-roof { --c: var(--c-roof); }
.carbon-lab .is-windows { --c: var(--c-windows); }
.carbon-house { position: relative; border: 1px solid var(--night-line); border-radius: 10px; overflow: hidden; background: var(--c-surface); }
.carbon-house svg { --u: 1; display: block; width: 100%; height: auto; }
/* The section, drawn as a technical section. --u is drawing units per screen pixel, so lines and
   text keep one size on screen at any width. What the section cuts is outlined and tinted, with its
   hatch; what lies beyond the cut is in finer line. */
.ch-layer { transition: opacity 0.3s var(--ease-out); }
.ch-layer.is-entering, .ch-layer.is-leaving { opacity: 0; }
.ch-layer.is-leaving { pointer-events: none; }
.ch-part, .ch-call { transition: opacity 0.2s; }
.ch-part:focus { outline: none; }
.carbon-house.is-spot .ch-part:not(.is-on), .carbon-house.is-spot .ch-call:not(.is-on) { opacity: 0.16; }
.ch-hit { fill: transparent; }
.ch-cut { fill: var(--c); fill-opacity: 0.16; stroke: var(--c); stroke-width: calc(var(--u) * 1px); stroke-linejoin: round; }
.ch-cut.is-board, .ch-cut.is-plaster { fill-opacity: 0.5; stroke-opacity: 0.85; }
.ch-cut.is-sheet { fill-opacity: 0.55; }
.ch-cut.is-skin { fill-opacity: 0.9; }
.ch-cut.is-tile { fill-opacity: 0.4; }
.ch-cut.is-eps { fill-opacity: 0.06; }
.ch-hatch { stroke: none; pointer-events: none; }
.ch-void { fill: var(--c-surface); }
.ch-member { fill: var(--c); fill-opacity: 0.22; stroke: var(--c); stroke-width: calc(var(--u) * 0.9px); }
.ch-x { fill: none; stroke: var(--c); stroke-width: calc(var(--u) * 0.6px); stroke-opacity: 0.85; }
.ch-steel { fill: none; stroke: var(--c); stroke-width: calc(var(--u) * 1.15px); }
.ch-steel-box { fill: none; stroke: var(--c); stroke-width: calc(var(--u) * 0.8px); }
.ch-hollow { fill: none; stroke: var(--c); stroke-width: calc(var(--u) * 0.6px); stroke-opacity: 0.7; }
.ch-beyond { fill: none; stroke: var(--c); stroke-width: calc(var(--u) * 0.6px); stroke-opacity: 0.55; }
.ch-batt { fill: var(--c); fill-opacity: 0.07; }
.ch-wave { fill: none; stroke: var(--c); stroke-width: calc(var(--u) * 0.8px); stroke-opacity: 0.9; }
.ch-mesh { stroke: var(--c); stroke-width: calc(var(--u) * 0.7px); stroke-dasharray: calc(var(--u) * 3px) calc(var(--u) * 2px); }
.ch-bar { fill: var(--c); }
.ch-membrane { fill: none; stroke: var(--c); stroke-width: calc(var(--u) * 0.8px); stroke-dasharray: calc(var(--u) * 5px) calc(var(--u) * 2px) calc(var(--u) * 1px) calc(var(--u) * 2px); }
.ch-post { fill: var(--c); fill-opacity: 0.18; stroke: var(--c); stroke-width: calc(var(--u) * 0.7px); stroke-opacity: 0.7; }
.ch-truss { fill: var(--c); fill-opacity: 0.12; stroke: var(--c); stroke-width: calc(var(--u) * 0.7px); stroke-opacity: 0.8; stroke-linejoin: round; }
.ch-truss.is-steel { fill-opacity: 0.04; }
.ch-sheet { fill: none; stroke: var(--c); stroke-width: calc(var(--u) * 1.8px); stroke-linejoin: round; }
.ch-lintel { fill: none; stroke: var(--c); stroke-width: calc(var(--u) * 1.4px); }
.ch-glass { stroke: var(--c); stroke-width: calc(var(--u) * 1.1px); }
.ch-earth { pointer-events: none; }
.ch-ground { stroke: rgba(242, 239, 232, 0.5); stroke-width: calc(var(--u) * 1px); }
.ch-ext { stroke: rgba(242, 239, 232, 0.28); stroke-width: calc(var(--u) * 0.6px); }
.ch-dim { stroke: rgba(242, 239, 232, 0.55); stroke-width: calc(var(--u) * 0.8px); }
.ch-tick { stroke: rgba(242, 239, 232, 0.7); stroke-width: calc(var(--u) * 1.3px); }
.ch-datum { fill: none; stroke: rgba(242, 239, 232, 0.6); stroke-width: calc(var(--u) * 0.9px); }
.ch-t-dim { font-family: var(--font-mono); font-size: calc(var(--u) * 9.5px); letter-spacing: 0.05em; fill: var(--night-muted); }
.ch-t-title { font-family: var(--font-mono); font-size: calc(var(--u) * 10.5px); font-weight: 500; letter-spacing: 0.1em; fill: var(--night-soft); }
.ch-t-name { font-family: var(--font-mono); font-size: calc(var(--u) * 9.5px); letter-spacing: 0.05em; fill: var(--night-soft); }
.ch-t-val { font-family: var(--font-sans); font-size: calc(var(--u) * 14px); font-weight: 500; fill: var(--night-text); }
.ch-t-note { font-family: var(--font-sans); font-size: calc(var(--u) * 10.5px); fill: var(--night-muted); }
.ch-t-key { font-family: var(--font-sans); font-size: calc(var(--u) * 10px); font-weight: 600; fill: var(--night-text); }
.ch-call-bg { fill: var(--c-surface); fill-opacity: 0.88; }
.ch-label-bg { fill: var(--c-surface); fill-opacity: 0.9; }
.ch-swatch { fill: var(--c); }
.ch-leader { stroke: var(--c); stroke-width: calc(var(--u) * 0.9px); }
.ch-leader-dot { fill: var(--c); }
.ch-key-ring { fill: var(--c-surface); stroke: var(--c); stroke-width: calc(var(--u) * 1.4px); }
/* On a narrow drawing, numbered keys point to this list */
.carbon-keys { display: grid; margin: 12px 0 0; list-style: none; }
.carbon-keys[hidden] { display: none; }
.carbon-keys li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: baseline; column-gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--night-line); transition: opacity 0.2s; }
.carbon-keys-n { display: inline-grid; place-items: center; width: 19px; height: 19px; align-self: center; border: 1.5px solid var(--c); border-radius: 50%; font-size: 10.5px; font-weight: 600; color: var(--night-text); }
.carbon-keys-name { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--night-text); }
.carbon-keys-name i { flex: none; width: 9px; height: 9px; border-radius: 2px; background: var(--c); }
.carbon-keys b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--night-text); }
.carbon-keys-spec { grid-column: 2 / -1; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--night-muted); }
.carbon-house.is-spot + .carbon-keys li:not(.is-on) { opacity: 0.4; }
/* What an element is made of, beside the pointer */
.carbon-house-tip { max-width: 260px; }
.carbon-tip-spec { margin: -2px 0 8px; font-size: 12px; line-height: 1.45; color: var(--night-muted); }
.carbon-tip-val { text-transform: none; letter-spacing: 0; color: var(--night-text); }
.carbon-tip li.is-mat i { border-top: 0; }
/* Walls, roof and floor: each a row of choices with its timber or steel frame beside it, greyed out
   where there's no frame to choose */
.carbon-controls { gap: 16px; }
.carbon-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; }
.carbon-controls .lab-opts { margin-top: 6px; }
.carbon-controls .lab-opt[data-c="area"] { flex-basis: 100%; }   /* the size of the house, on a line of its own */
.carbon-frame { transition: opacity 0.2s; }
.carbon-frame.is-off { opacity: 0.38; }
.carbon-frame.is-off .seg input:disabled + span { opacity: 1; text-decoration: none; }
.carbon-sw { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--c); }
/* The reference is a tick on the per m² bar, so the bar can run past it */
.carbon-bar { overflow: visible; margin-bottom: 20px; }
.carbon-bar .is-ref { top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--night-text); transition: left 0.6s var(--ease-out); }
.carbon-bar .is-ref b { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); font: 400 10.5px/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--night-muted); white-space: nowrap; }
.carbon-bar .is-ref.is-end b { left: auto; right: 0; transform: none; }
.carbon-key { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.carbon-key span { display: inline-flex; align-items: center; gap: 7px; }
.carbon-chart { position: relative; margin-top: 16px; }
.carbon-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.cc-label { fill: var(--night-soft); font-size: 13.5px; }
.cc-total { fill: var(--night-text); font-family: var(--font-mono); font-size: 12px; font-weight: 500; }
.cc-seg { fill: var(--c); transition: opacity 0.15s; }
.cc-row.is-hover .cc-seg { opacity: 0.45; }
.cc-row.is-hover .cc-seg.is-on { opacity: 1; }
.cc-hit { fill: transparent; }
.cc-row:focus { outline: none; }
.cc-focus { fill: none; stroke: var(--lime); stroke-width: 2; opacity: 0; }
.cc-row:focus-visible .cc-focus { opacity: 1; }
.carbon-tip { position: absolute; top: 0; left: 0; z-index: 2; min-width: 200px; padding: 10px 12px 11px; border: 1px solid var(--night-line-2); border-radius: 8px; background: rgba(17, 19, 23, 0.97); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); pointer-events: none; }
.carbon-tip[hidden] { display: none; }
.carbon-tip-head { margin: 0 0 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-muted); }
.carbon-tip ul { display: grid; grid-template-columns: 12px auto 1fr; align-items: center; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.carbon-tip li { display: contents; font-size: 13px; color: var(--night-muted); }
.carbon-tip li i { width: 12px; height: 0; border-top: 2px solid var(--c); }
.carbon-tip li b { font-weight: 500; color: var(--night-soft); font-variant-numeric: tabular-nums; text-align: right; }
.carbon-tip li span { color: var(--night-muted); }
.carbon-tip li.is-on b, .carbon-tip li.is-on span { color: var(--night-text); }
.carbon-tip li.is-rule { display: block; grid-column: 1 / -1; height: 1px; margin: 3px 0 1px; background: var(--night-line); }
.carbon-tip li.is-total i { border-top: 0; }
.carbon-tip li.is-total b { color: var(--night-text); }
.carbon-more { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--night-line); }
.carbon-more summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-soft); cursor: pointer; list-style: none; }
.carbon-more summary::-webkit-details-marker { display: none; }
.carbon-more summary::after { content: "+"; font-size: 16px; color: var(--night-muted); transition: transform 0.3s var(--ease-out); }
.carbon-more[open] summary::after { transform: rotate(45deg); }
.carbon-more summary:hover { color: var(--night-text); }
.carbon-table-wrap { margin-top: 10px; overflow-x: auto; }
.carbon-table { width: 100%; border-collapse: collapse; font-size: 13.5px; color: var(--night-soft); }
.carbon-table th, .carbon-table td { padding: 8px 14px 8px 0; border-bottom: 1px solid var(--night-line); text-align: left; vertical-align: top; }
.carbon-table thead th { font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-muted); vertical-align: bottom; }
.carbon-table tbody th { font-weight: 400; color: var(--night-text); }
.carbon-table td { font-variant-numeric: tabular-nums; }
.carbon-table tfoot th, .carbon-table tfoot td { color: var(--night-text); font-weight: 500; }
.carbon-table .carbon-sw { margin-right: 9px; vertical-align: -1px; }
[data-c-table] { max-width: 620px; }
[data-c-table] td, [data-c-table] thead th + th { text-align: right; }
[data-c-factors] td:nth-child(3), [data-c-factors] td:nth-child(4), [data-c-factors] thead th:nth-child(3), [data-c-factors] thead th:nth-child(4) { text-align: right; }
[data-c-factors] td:nth-child(5) { min-width: 15em; color: var(--night-muted); }
[data-c-factors][data-mode="typ"] td:nth-child(3), [data-c-factors][data-mode="def"] td:nth-child(4) { color: var(--night-text); font-weight: 500; }
[data-c-factors] tr.is-unused > * { opacity: 0.42; }
.carbon-more-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--night-muted); }
[data-c-table] tfoot tr:last-child > * { color: var(--night-muted); font-weight: 400; }   /* stored carbon: beside the total, not in it */
[data-c-materials] { max-width: 620px; }
[data-c-materials] td, [data-c-materials] thead th + th { text-align: right; }
/* The three materials carrying the most carbon, each with its share of the home's total */
.carbon-mats { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--night-line); }
.carbon-mats-head { margin: 0; }
.carbon-mats ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; margin: 0; list-style: none; }
.carbon-mats li { position: relative; display: grid; align-content: start; gap: 3px; min-width: 0; padding: 10px 0 13px; }
.carbon-mats li span { font-size: 14.5px; line-height: 1.3; color: var(--night-text); }
.carbon-mats li b { font-size: 13px; font-weight: 400; color: var(--night-muted); font-variant-numeric: tabular-nums; }
.carbon-mats li::after, .carbon-mats li i { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 2px; }
.carbon-mats li::after { right: 0; background: var(--night-line); }
.carbon-mats li i { z-index: 1; background: var(--night-soft); transition: width 0.6s var(--ease-out); }
@media (max-width: 560px) {
  .carbon-mats ol { grid-template-columns: minmax(0, 1fr); }
  .carbon-mats li { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 9px 0 11px; }
  .carbon-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .carbon-main .seg { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carbon-main .seg span { display: flex; align-items: center; justify-content: center; height: 100%; }
  .carbon-table { font-size: 12.5px; }
}

/* ---------- Service groups (services page) ---------- */

.svc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 22px; }
.svc-head h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.04em; }
.svc-head h2 em { color: var(--muted); }
.dark .svc-head h2 em { color: var(--night-muted); }
@media (max-width: 640px) { .svc-head { flex-direction: column; align-items: flex-start; gap: 6px; } }

/* Service rows that link to a page: the whole row is the link, and like every list of links on the
   site it ends in an arrow that's always there, which moves along on hover. Lists that aren't links
   don't move at all */
.index-list.links li { cursor: pointer; grid-template-columns: 72px minmax(0, 1.15fr) minmax(0, 1.3fr) 130px 40px; }
.index-list.links h3 a { color: inherit; text-decoration: none; }
.index-list.links h3 a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.index-list.links .go { justify-self: end; font-size: 22px; transition: transform 0.4s var(--ease-out); }
.index-list.links li:hover .go, .index-list.links li:focus-within .go { transform: translateX(6px); }
@media (max-width: 900px) {
  .index-list.links li { grid-template-columns: 44px minmax(0, 1fr) 32px; }
  .index-list.links p, .index-list.links .tag { grid-column: 2 / -1; }
  .index-list.links .go { grid-row: 1; grid-column: 3; }
}
.index-list.links h3 a:focus-visible { outline: none; }
.index-list.links li:focus-within { outline: 2px solid var(--leaf-deep); outline-offset: 4px; }
.dark .index-list.links li:focus-within { outline-color: var(--lime); }

/* Quick links in the services hero */
.jump { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.jump a { padding: 9px 14px; font-size: 14px; color: var(--ink); text-decoration: none; border: 1px solid var(--line-2); border-radius: 999px; transition: border-color 0.2s, background-color 0.2s; }
.jump a:hover { border-color: var(--ink); background: var(--sheet); }
@media (max-width: 960px) { .jump { justify-content: flex-start; margin-top: 8px; } }

/* Audience list */
.audiences { border-top: 1px solid var(--ink); }
.audience { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.audience h3 { font-size: 19px; letter-spacing: -0.02em; }
.audience p { font-size: 16px; color: var(--ink-2); }
@media (max-width: 680px) { .audience { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* ---------- People ---------- */

.person { border-top: 1px solid var(--ink); padding-top: 24px; }
.person .portrait {
  position: relative;
  display: grid;
  place-items: end start;
  aspect-ratio: 16 / 10;
  margin-bottom: 22px;
  padding: 22px;
  background: var(--night);
  border-radius: 6px;
  overflow: hidden;
  color: var(--night-text);
}
.person .portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 70% at 70% 110%, rgba(178, 219, 35, 0.45), rgba(39, 149, 60, 0.3) 45%, rgba(30, 109, 54, 0.12) 70%, transparent);
}
.person .portrait span { position: relative; font-size: clamp(5rem, 10vw, 8.5rem); line-height: 0.8; font-weight: 500; letter-spacing: -0.07em; }
.person .portrait small { position: absolute; top: 18px; left: 22px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-muted); }
.person h3 { font-size: 26px; letter-spacing: -0.03em; }
.person .role { margin: 6px 0 14px; }
.person p { color: var(--ink-2); font-size: 16px; }

/* ---------- Articles (insights) ---------- */

/* Each article on its own page: a breadcrumb, the title and its summary, then the prose and sources */
.article-hero .eyebrow a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
.article-hero .eyebrow a:hover { text-decoration-color: currentColor; }
.article-title { margin: 24px 0 28px; max-width: 20ch; font-size: clamp(2.5rem, 5.4vw, 4.75rem); line-height: 0.98; letter-spacing: -0.048em; font-weight: 500; }
.article-body { padding-top: 0; padding-bottom: clamp(72px, 9vw, 120px); }
.article .prose { max-width: 64ch; }
.prose p, .prose li { font-size: 18px; line-height: 1.66; color: var(--ink-2); }
.prose ol, .prose ul { padding-left: 1.2em; margin: 0 0 1em; }
.prose li + li { margin-top: 0.45em; }
.prose blockquote { margin: 1.5em 0; padding-left: 22px; border-left: 2px solid var(--leaf); }
.prose blockquote p { font-family: var(--font-serif); font-style: italic; font-size: 24px; line-height: 1.3; color: var(--ink); }
.sources { margin-top: 26px; padding-top: 14px; border-top: 1px dashed var(--line-2); font-size: 13.5px; color: var(--muted); max-width: 64ch; }
.sources b { margin-right: 8px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.more-insights .insight-list { margin-top: clamp(28px, 3vw, 40px); }
.more-all { margin-top: 28px; }
/* Old links to insights.html#anchor land on the article's item, clear of the header */
.insight-list li { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ---------- Form ---------- */

.form-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
@media (max-width: 960px) { .form-layout { grid-template-columns: minmax(0, 1fr); } }

.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
.form .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.field label, .field legend { padding: 0; font-size: 14.5px; font-weight: 500; letter-spacing: -0.005em; }
.field .opt { font-weight: 400; color: var(--muted); }
.field .hint { font-size: 13px; color: var(--muted); }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="url"], .form input[type="number"], .form select, .form textarea {
  width: 100%;
  padding: 14px 15px;
  font: 16px/1.4 var(--font-sans);
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}
.form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 54%, calc(100% - 15px) 54%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 42px;
}
.form textarea { min-height: 150px; resize: vertical; }
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--ink-2); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: none; border-color: var(--leaf-deep); box-shadow: 0 0 0 3px rgba(39, 149, 60, 0.22); }
.form input[type="file"] { width: 100%; padding: 20px 16px; font: 14.5px/1.4 var(--font-sans); color: var(--muted); background: var(--sheet); border: 1px dashed var(--line-2); border-radius: 6px; }
.form input[type="file"]::file-selector-button { margin-right: 14px; padding: 10px 14px; font: 500 13.5px/1 var(--font-sans); color: var(--paper); background: var(--ink); border: 0; border-radius: 999px; cursor: pointer; }
fieldset.field { margin: 0; padding: 0; border: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 10px 15px; font-size: 14.5px; background: var(--sheet); border: 1px solid var(--line-2); border-radius: 999px; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.chip input:hover + span { border-color: var(--ink-2); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip input:focus-visible + span { outline: 2px solid var(--leaf-deep); outline-offset: 2px; }
.chip-tag { margin-left: 6px; padding: 2px 6px 1px; font: 500 10px/1.2 var(--font-mono); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 1px; color: var(--leaf-deep); background: rgba(178, 219, 35, 0.28); border-radius: 999px; }
.chip input:checked + span .chip-tag { color: var(--ink); background: var(--lime); }
/* The form in three short steps, each under a numbered rule */
.form-step { display: flex; align-items: baseline; gap: 14px; padding-top: 16px; border-top: 1px solid var(--ink); }
.form-step:not(:first-of-type) { margin-top: 20px; }
.form-step-n { font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--muted); }
.form-step h2 { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -0.02em; }
.form .field.is-invalid .chip span { border-color: var(--danger); }

/* Plans and documents: drop files on the box, or click it to browse */
.drop { position: relative; display: grid; justify-items: center; gap: 6px; padding: 26px 18px 24px; text-align: center; background: var(--sheet); border: 1px dashed var(--line-2); border-radius: 8px; transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s; }
.form .drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.drop:hover, .drop.is-over { border-color: var(--leaf); background: rgba(178, 219, 35, 0.08); }
.drop.is-over { border-style: solid; }
.drop:focus-within { border-color: var(--leaf-deep); box-shadow: 0 0 0 3px rgba(39, 149, 60, 0.22); }
.drop-icon { width: 24px; height: 24px; color: var(--leaf-deep); }
.drop-text { font-size: 15px; color: var(--ink-2); }
.drop-text b { font-weight: 500; color: var(--ink); }
.drop-text u { text-decoration-color: var(--spring); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.drop-text .for-touch { display: none; }
@media (hover: none) { .drop-text .for-mouse { display: none; } .drop-text .for-touch { display: inline; } }
.drop-sub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.drop-files { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.drop-files:empty { display: none; }
.drop-files li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 13px; font-size: 14.5px; background: var(--paper-2); border-radius: 6px; }
.drop-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-size { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.drop-files li.is-too-big { display: block; color: var(--danger); background: rgba(180, 35, 24, 0.06); line-height: 1.45; }
.drop-files li .drop-name { flex: 1; }
.drop-remove { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin: -4px -6px -4px -2px; padding: 0; font: 400 18px/1 var(--font-sans); color: var(--muted); background: none; border: 0; border-radius: 50%; cursor: pointer; transition: color 0.15s, background-color 0.15s; }
.drop-remove:hover { color: var(--ink); background: var(--paper-3); }
.drop-total { margin: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--muted); text-align: right; }
/* The upload slots Netlify reads: filled from the drop box, or shown plainly without it */
.drop-slots { display: grid; gap: 10px; }
.js .drop-slots:not(.is-plain) { display: none; }
html:not(.js) .drop, html:not(.js) .drop-files, html:not(.js) .drop-total { display: none; }
/* Questions that don't fit what's needed step aside, and ease back in when they do */
.form [hidden] { display: none; }
.form .is-shown { animation: field-in 0.3s var(--ease-out); }
@keyframes field-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .form .is-shown { animation: none; } }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form-foot p { font-size: 13.5px; color: var(--muted); max-width: 50ch; }
.honeypot { display: none; }

/* Site location: type a suburb or postcode and choose from the list */
.combo { position: relative; }
.form .combo input { padding-right: 48px; }
.combo-tick { position: absolute; top: 50%; right: 15px; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--leaf); opacity: 0; transform: scale(0.5); transition: opacity 0.2s var(--ease), transform 0.3s var(--ease-out); pointer-events: none; }
.combo-tick::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.suburb.is-verified .combo-tick { opacity: 1; transform: none; }
.combo-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; overflow: hidden; background: var(--sheet); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 24px 48px -24px rgba(14, 15, 17, 0.4), 0 2px 6px rgba(14, 15, 17, 0.06); animation: combo-in 0.16s var(--ease-out); }
.combo-pop[hidden] { display: none; }
@keyframes combo-in { from { opacity: 0; transform: translateY(-4px); } }
.combo-list { max-height: min(312px, 46vh); margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.combo-list:empty { display: none; }
.combo-opt { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 12px; border-radius: 6px; font-size: 15.5px; line-height: 1.3; color: var(--ink-2); cursor: pointer; }
.combo-opt.is-active { background: var(--paper-2); color: var(--ink); }
.combo-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-name b { font-weight: 600; color: var(--ink); }
.combo-meta { flex: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); }
.combo-opt.is-active .combo-meta { color: var(--ink-2); }
.combo-note { margin: 0; padding: 12px 18px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.combo-list:not(:empty) + .combo-note { border-top: 1px solid var(--line); }
.combo-foot { margin: 0; padding: 8px 18px 9px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--paper); border-top: 1px solid var(--line); }

/* A field that needs attention: a short message under it, and a red edge */
.field-error { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--danger); }
.field-error::before { content: "!"; flex: none; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--danger); color: #fff; font: 700 11px/1 var(--font-sans); }
.form .field.is-invalid input, .form .field.is-invalid select { border-color: var(--danger); }
.form .field.is-invalid input:focus-visible, .form .field.is-invalid select:focus-visible { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.16); }
@media (prefers-reduced-motion: reduce) { .combo-pop { animation: none; } .combo-tick { transition: none; } }

/* ---------- Climate zone finder ----------
   The eight NCC zones run from tropical to alpine, so they take the thermal scale in order, warm to
   cool: zone 1 at its pale end, zone 8 at 0.3 of it. Neighbouring zones are close in colour, so the
   map separates them with a light hairline, the legend numbers them, and the chosen zone is lit */
:root { --z1: #eef39a; --z2: #c1df16; --z3: #87c52b; --z4: #4ca835; --z5: #1f9156; --z6: #178186; --z7: #1f6a9e; --z8: #214f9c; }
.zf-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(32px, 4.5vw, 72px); align-items: start; }
.form.zf { margin-top: clamp(32px, 4vw, 44px); max-width: 36rem; }
.zf-result { padding: 20px 22px 24px; background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; }
.zf-place { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.zf-place b { font-size: 21px; font-weight: 500; letter-spacing: -0.02em; }
/* The two zones share rows, so their numbers line up when one label wraps */
.zf-zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; column-gap: 20px; margin-top: 18px; }
.zf-zone { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
.zf-zone + .zf-zone { padding-left: 20px; border-left: 1px solid var(--line); }
.zf-num { margin: 8px 0 6px; font-size: clamp(3rem, 5.4vw, 4.4rem); font-weight: 500; line-height: 0.95; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--ink); }
.zf-name { font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.zf-note { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.zf-check { margin-top: 18px; padding: 12px 14px; border-radius: 8px; background: var(--paper-2); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.zf-result .btn { margin-top: 22px; }
.zf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 22px; }
.zf-actions .btn { margin-top: 0; }

/* The map (zonemap.js): a canvas edge to edge in the panel, the controls over it */
.zm { --pad: clamp(22px, 3vw, 36px); }
.zm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-bottom: 16px; }
.zm-modes { display: inline-flex; padding: 3px; border: 1px solid var(--night-line-2); border-radius: 999px; }
.zm-modes button { padding: 8px 15px; border: 0; border-radius: 999px; background: none; color: var(--night-muted); font: 500 13.5px/1 var(--font-sans); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.zm-modes button:hover { color: var(--night-text); }
.zm-modes button[aria-checked="true"] { background: var(--night-text); color: var(--night); }
.zm-modes button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.zm-stage {
  position: relative; margin: 0 calc(-1 * var(--pad)); aspect-ratio: 1 / 0.94; overflow: hidden;
  background: var(--night); border-block: 1px solid var(--night-line);
  touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: grab;
}
.zm-stage.is-dragging { cursor: grabbing; }
.zm-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.zm-canvas:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.zm:not(.is-ready) .zm-stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 55% 50%, var(--night-3), transparent); animation: zm-wait 1.4s ease-in-out infinite alternate; }
@keyframes zm-wait { from { opacity: 0.4; } to { opacity: 1; } }
.zm-ctrl { position: absolute; top: 12px; right: 12px; display: grid; gap: 1px; overflow: hidden; border-radius: 8px; background: var(--night-line-2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.zm-ctrl button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; background: rgba(17, 19, 23, 0.94); color: var(--night-text); cursor: pointer; transition: background-color 0.2s; }
.zm-ctrl button:hover { background: var(--night-3); }
.zm-ctrl button:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.zm-ctrl button[hidden] { display: none; }
.zm-ctrl svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.zm-ctrl svg .dot { fill: currentColor; stroke: none; }
.zm-scale { position: absolute; left: 14px; bottom: 12px; display: grid; gap: 5px; justify-items: start; color: var(--night-soft); font: 400 11px/1 var(--font-mono); letter-spacing: 0.02em; pointer-events: none; }
.zm-scale i { display: block; height: 6px; border: 1.5px solid var(--night-soft); border-top: 0; }
.zm-tip { position: absolute; left: 0; top: 0; z-index: 2; display: grid; gap: 3px; min-width: 190px; max-width: 270px; padding: 11px 13px 10px; border-radius: 8px; background: rgba(253, 252, 250, 0.97); color: var(--ink); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); font-size: 13.5px; line-height: 1.35; pointer-events: none; }
.zm-tip b { font-weight: 600; }
.zm-tip span { color: var(--ink-2); }
.zm-tip em { margin-top: 5px; color: var(--muted); font: 400 10.5px/1.3 var(--font-mono); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; }
.zm-hint { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; margin: 0; padding: 24px; background: rgba(10, 11, 13, 0.6); color: var(--night-text); font: 500 15.5px/1.4 var(--font-sans); text-align: center; opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.zm-hint.is-on { opacity: 1; }
.zm-tip[hidden], .zm-hint[hidden] { display: none; }
/* The picked suburb: a pin that pulses, its name beside it */
.zm-pin { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; }
.zm-pin i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border: 2.5px solid var(--night); border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1.5px var(--night-text); }
.zm-pin i::after { content: ""; position: absolute; inset: -10px; border: 2px solid var(--lime); border-radius: 50%; animation: zm-pulse 2.2s var(--ease-out) infinite; }
@keyframes zm-pulse { from { transform: scale(0.35); opacity: 0.95; } to { transform: scale(1.9); opacity: 0; } }
.zm-pin span { position: absolute; left: 14px; top: -11px; padding: 3px 8px; border-radius: 6px; background: var(--night-text); color: var(--night); font: 600 12.5px/16px var(--font-sans); white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }
.zm-keys { display: grid; gap: 16px; margin-top: 22px; }
.zf-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 20px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.35; color: var(--night-muted); transition: opacity 0.3s; }
.zf-legend li { display: grid; grid-template-columns: 16px 14px minmax(0, 1fr); gap: 8px; align-items: baseline; transition: color 0.3s; }
.zf-legend i { width: 16px; height: 10px; border-radius: 2px; transform: translateY(1px); }
.zf-legend i.zm-1 { background: var(--z1); } .zf-legend i.zm-2 { background: var(--z2); } .zf-legend i.zm-3 { background: var(--z3); } .zf-legend i.zm-4 { background: var(--z4); }
.zf-legend i.zm-5 { background: var(--z5); } .zf-legend i.zm-6 { background: var(--z6); } .zf-legend i.zm-7 { background: var(--z7); } .zf-legend i.zm-8 { background: var(--z8); }
.zf-legend b { font-family: var(--font-mono); font-weight: 400; color: var(--night-text); }
.zf-legend li.is-on { color: var(--night-text); }
.zm-natkey { display: flex; flex-wrap: wrap; gap: 9px 22px; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--night-line); list-style: none; font-size: 13px; line-height: 1.35; color: var(--night-muted); transition: opacity 0.3s; }
.zm-natkey li { display: flex; align-items: center; gap: 8px; }
.zm-natkey i { flex: none; font-style: normal; }
.zm-k-num { display: inline-grid; place-items: center; min-width: 26px; height: 18px; padding: 0 6px; border-radius: 9px; background: rgba(10, 11, 13, 0.82); box-shadow: inset 0 0 0 1px var(--night-line-2); color: var(--night-text); font: 500 11px/1 var(--font-mono); }
.zm-k-line, .zm-k-pc, .zm-k-hatch { width: 24px; height: 12px; border-radius: 2px; }
.zm-k-line { background: linear-gradient(90deg, var(--z5) calc(50% - 1px), rgba(10, 11, 13, 0.85) 0 calc(50% + 1px), var(--z5) 0); }
.zm-k-pc { background: linear-gradient(90deg, var(--z5) calc(50% - 0.5px), rgba(10, 11, 13, 0.4) 0 calc(50% + 0.5px), var(--z5) 0); }
.zm-k-hatch { background: repeating-linear-gradient(135deg, rgba(242, 239, 232, 0.4) 0 1px, transparent 1px 5px), var(--night-3); }
.zm-k-multi { display: none !important; }
.zm[data-mode="ncc"] .zm-natkey { opacity: 0.35; }
.zm[data-mode="nat"] .zf-legend { opacity: 0.35; }
.zm[data-mode="nat"] .zm-k-num { background: rgba(242, 239, 232, 0.92); color: var(--night); }
.zm[data-mode="nat"] .zm-k-line { background: linear-gradient(90deg, var(--night-3) calc(50% - 0.75px), rgba(242, 239, 232, 0.65) 0 calc(50% + 0.75px), var(--night-3) 0); }
.zm[data-mode="nat"] .zm-k-pc { background: linear-gradient(90deg, var(--night-3) calc(50% - 0.5px), rgba(242, 239, 232, 0.25) 0 calc(50% + 0.5px), var(--night-3) 0); }
.zm[data-mode="nat"] .zm-k-multi { display: flex !important; }
@media (max-width: 960px) { .zf-grid { grid-template-columns: minmax(0, 1fr); } .form.zf { max-width: none; } }
@media (max-width: 480px) { .zf-legend { grid-template-columns: minmax(0, 1fr); } .zm-stage { aspect-ratio: 1 / 1.05; } .zm-head .mono { display: none; } }
@media (prefers-reduced-motion: reduce) { .zf-legend li, .zf-legend, .zm-natkey, .zm-hint { transition: none; } .zm-pin i::after, .zm:not(.is-ready) .zm-stage::after { animation: none; } }

/* ---------- Climate lab: what usually works, element by element ----------
   The place and its climate on top, then a row for each element: its stops, lit where they usually
   work in this climate, and why */
.ww { margin-top: clamp(40px, 5vw, 64px); }
.ww-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.ww-where { display: grid; gap: 16px; min-width: 0; }
.ww-place { margin: 0; }
.ww-place b { display: block; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: var(--night-text); }
.ww-place span { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lime); }
.ww-aim { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--night-soft); max-width: 46ch; }
.ww-aim .mono { display: block; margin-bottom: 6px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.ww-hint { margin: 0; font-size: 14px; line-height: 1.5; color: var(--night-muted); }
.ww-hint[hidden] { display: none; }
.ww-hint .lab-copy { margin-left: 4px; padding: 0; }
.ww-opts { margin-top: 6px; }
.ww-try { display: flex; flex-wrap: wrap; gap: 6px; clear: both; }
.ww-try button {
  padding: 7px 13px; border: 1px solid var(--night-line); border-radius: 999px;
  background: none; font: 400 14px/1.2 var(--font-sans); color: var(--night-soft); cursor: pointer; transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.ww-try button:hover { border-color: var(--night-line-2); color: var(--night-text); }
.ww-try button[aria-pressed="true"] { border-color: rgba(178, 219, 35, 0.45); background: rgba(178, 219, 35, 0.12); color: var(--lime); }
.ww-try button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.ww-try-note { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--night-muted); }
.ww-climate { min-width: 0; }
.ww-k { margin: 0 0 12px; font-size: 11px; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; }
.ww-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--night-line); border: 1px solid var(--night-line); border-radius: 10px; overflow: hidden; }
.ww-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 14px 16px; background: var(--night); }
.ww-tile dt { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-muted); }
.ww-tile dd { margin: 0; }
.ww-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.ww-v b { font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; color: var(--night-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ww-v span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--night-muted); }
.ww-sub { font-size: 12.5px; line-height: 1.4; color: var(--night-muted); }
.ww-scales { margin: clamp(36px, 4.5vw, 56px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--night-line-2); }
.ww-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 4.8fr) minmax(0, 5fr); gap: 10px clamp(20px, 2.6vw, 40px); align-items: start; padding: 18px 0 20px; border-bottom: 1px solid var(--night-line); }
.ww-name { margin: 0; padding-top: 8px; font-size: 15.5px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--night-text); }
.ww-track { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; }
.ww-stop {
  display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 6px; border-radius: 6px;
  background: var(--night-2); box-shadow: inset 0 0 0 1px var(--night-line);
  font-size: 12.5px; line-height: 1.2; text-align: center; color: var(--night-muted);
  transition: background-color 0.45s var(--ease-out), color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.ww-stop.is-on { background: rgba(178, 219, 35, 0.16); box-shadow: inset 0 0 0 1px rgba(178, 219, 35, 0.55); color: var(--lime); }
/* A row whose answer turns on how the wall or floor is built: one labelled track for each */
.ww-parts { display: grid; gap: 20px; min-width: 0; padding-top: 11px; }
.ww-part { display: grid; gap: 6px; min-width: 0; }
.ww-part-name { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-soft); }
.ww-why { margin: 0; padding-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--night-soft); }
.ww-foot { display: grid; gap: 22px; margin-top: clamp(28px, 3.5vw, 44px); max-width: 78ch; }
.ww-foot .lab-note { color: var(--night-muted); }
.ww .sources { margin-top: 4px; border-top-color: var(--night-line-2); color: var(--night-muted); max-width: none; }
.ww .sources b { color: var(--night-text); }
@media (max-width: 1100px) {
  .ww-row { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); }
  .ww-why { grid-column: 2; padding-top: 0; }
  /* Under two scales, a little more room, so the reason reads as the row's, not the second scale's */
  .ww-row.has-parts .ww-why { padding-top: 14px; }
}
@media (max-width: 900px) {
  .ww-top { grid-template-columns: minmax(0, 1fr); }
  .ww-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ww-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ww-name { padding-top: 0; }
  .ww-parts { padding-top: 2px; gap: 18px; }
  .ww-why { grid-column: auto; }
}
@media (max-width: 480px) {
  .ww-stop { min-height: 40px; padding: 5px 3px; font-size: 11.5px; }
  .ww-tile { padding: 12px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) { .ww-stop, .ww-try button { transition: none; } }
@media (max-width: 600px) { .form { grid-template-columns: minmax(0, 1fr); } }

.aside-block + .aside-block { margin-top: 44px; }
.aside-block h2 { margin-bottom: 14px; font-size: 20px; letter-spacing: -0.02em; }
.aside-block ul { list-style: none; border-top: 1px solid var(--ink); }
.aside-block li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--ink-2); }

/* ---------- Footer ---------- */

.site-footer { padding-top: clamp(80px, 10vw, 128px); overflow: hidden; border-top: 1px solid var(--night-line); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: clamp(40px, 6vw, 96px); }
.footer-tag { margin: 0; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.04; letter-spacing: -0.045em; }
.footer-sub { margin-top: 18px; font-size: 15px; color: var(--night-muted); max-width: 36ch; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.footer-cols h2 { margin-bottom: 16px; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-muted); }
.footer-cols ul { list-style: none; }
.footer-cols li + li { margin-top: 11px; }
.footer-cols a { color: var(--night-text); text-decoration: none; font-size: 15px; background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat; transition: background-size 0.4s var(--ease-out); }
.footer-cols a:hover { background-size: 100% 1px; }
.footer-cols p { font-size: 15px; color: var(--night-muted); }
.footer-logo { display: block; width: 188px; height: auto; margin-bottom: 30px; }
.footer-mark {
  display: block;
  width: 100%;
  height: auto;
  margin: clamp(64px, 9vw, 120px) 0 0;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.05) 95%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.05) 95%);
  transform: translateY(16%);
  user-select: none;
  pointer-events: none;
}
.footer-bottom { position: relative; border-top: 1px solid var(--night-line); font-size: 13px; color: var(--night-muted); background: var(--night); }
.footer-bottom .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-block: 22px 26px; }
.footer-bottom p { margin: 0; }
.footer-bottom a { color: var(--night-text); text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 900px) { .footer-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Motion ---------- */

.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease), transform 1s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: 0.08s; }
.js .reveal.d2 { transition-delay: 0.16s; }
.js .reveal.d3 { transition-delay: 0.24s; }
.js .reveal.d4 { transition-delay: 0.32s; }

/* Headline lines rise into place */
/* The mask reaches past the line on every side, so italic overhangs and the tails of letters such
   as p and y show in full; each line starts far enough down to sit wholly below it */
.js .rise { display: block; clip-path: inset(-0.25em -0.4em -0.34em -0.4em); }
.js .rise > span { display: block; transform: translateY(142%); transition: transform 1.2s var(--ease-out); }
.js .is-in .rise > span, .js .rise.is-in > span { transform: none; }
.js .rise:nth-child(2) > span { transition-delay: 0.08s; }
@media (max-width: 640px) {
  .js .rise, .js .rise > span { display: inline; }
  .js .rise { clip-path: none; }
  .js .rise > span { transform: none; }
  .js [data-rise] { opacity: 0; transition: opacity 1s var(--ease); }
  .js [data-rise].is-in { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .rise > span { opacity: 1; transform: none; transition: none; }
  .thermal-meta .status::before { animation: none; }
  .js .manifesto .w { color: var(--ink); }
  .story-layer, .story-layer .grow, .story-layer .grow-y, .lab-bar i { transition: none; }
  .js .routemap .rm-lane { stroke-dashoffset: 0; }
  .js .routemap .rm-cp, .js .routemap .rm-cp-label, .js .routemap .rm-title, .js .routemap .rm-sub { opacity: 1; }
}