/* src/styles/01-fonts-tokens.css */
/* IBM Plex Sans / Mono — SIL Open Font License 1.1, self-hosted (Latin subset).
   Source: @fontsource/ibm-plex-sans@5.3.0, @fontsource/ibm-plex-mono@5.3.0.
   Licence text: /assets/fonts/OFL-IBM-Plex-Sans.txt and OFL-IBM-Plex-Mono.txt */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

/* Metric-matched fallbacks, so text occupies the same space before and after
   the web fonts arrive (prevents layout shift on swap). Values measured in
   Chromium against Plex: Arial width ratio 100.3% (400), 97.2% (600), 98.5% (700);
   Plex ascent 1.03em / descent 0.28em. Courier New matches Plex Mono's width. */
@font-face { font-family: "Plex Sans Fallback"; font-weight: 400 500; src: local("Arial"), local("ArialMT"); size-adjust: 100.3%; ascent-override: 102.7%; descent-override: 27.9%; line-gap-override: 0%; }
@font-face { font-family: "Plex Sans Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 97.2%; ascent-override: 106%; descent-override: 28.8%; line-gap-override: 0%; }
@font-face { font-family: "Plex Sans Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 98.5%; ascent-override: 104.6%; descent-override: 28.4%; line-gap-override: 0%; }
@font-face { font-family: "Plex Mono Fallback"; src: local("Courier New"), local("CourierNewPSMT"); size-adjust: 100%; ascent-override: 103%; descent-override: 28%; line-gap-override: 0%; }

/* Design tokens. Contrast ratios are measured by scripts/qa/contrast.mjs (table in content-and-design.md)
   and re-checked by scripts/qa/e2e.mjs against rendered pages. */
:root {
  /* Surfaces */
  --bg: #F3F0E9;            /* warm mineral page background */
  --bg-band: #EAE6DC;       /* quiet band for alternating sections */
  --surface: #FAF9F6;       /* light surface: panels, inputs, fragments */
  --surface-sunk: #ECE8DF;  /* thumbnails, wells */
  --drawing: #E6E1D5;       /* technical drawing sheet */
  --grid-major: rgba(18, 61, 58, 0.09);   /* drafting-grid lines (brand at low alpha) */
  --grid-minor: rgba(18, 61, 58, 0.045);

  /* Ink */
  --ink: #172126;           /* main text — 14.4:1 on --bg */
  --ink-2: #3D484C;         /* secondary text — 8.3:1 on --bg */
  --ink-3: #5A6468;         /* meta text — 5.3:1 on --bg, 4.9:1 on --bg-band */

  /* Brand */
  --brand: #123D3A;         /* deep blue-green — --surface text on it 11.4:1 */
  --brand-strong: #0B2927;
  --brand-tint: #DDE7E3;

  /* Copper accent: decorative lines, junctions, large type only.
     --accent-ink is the darkened copper for small text (5.3:1 on --bg). */
  --accent: #B95832;
  --accent-ink: #A04826;
  --accent-on-dark: #E39A76; /* copper text on --brand (5.2:1) */

  /* Lines */
  --rule: #D6D0C4;          /* decorative dividers only */
  --rule-strong: #857E72;   /* control borders — 3.5:1 on --bg, 3.8:1 on --surface */

  /* Status (always paired with an icon and text, never colour alone) */
  --ok: #2E6A45;
  --ok-tint: #E2EDE5;
  --missing: #A04826;
  --missing-tint: #F6E6DC;
  --danger: #A3222B;
  --danger-tint: #F7E3E2;

  /* On dark (brand) sections */
  --on-dark: #F3F0E9;
  --on-dark-2: #BFCCC8;     /* 7.2:1 on --brand */
  --rule-on-dark: rgba(243, 240, 233, 0.22);

  --focus: #A04826;
  --focus-on-dark: #F3F0E9;

  /* Type */
  --font-sans: "IBM Plex Sans", "Plex Sans Fallback", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --step--2: 0.8125rem;                                   /* 13px mono labels */
  --step--1: 0.9375rem;                                   /* 15px small text */
  --step-0: 1.125rem;                                     /* 18px body */
  --step-1: 1.25rem;
  --step-2: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --step-3: clamp(1.5rem, 1.22rem + 1.2vw, 2.125rem);
  --step-4: clamp(2rem, 1.45rem + 2.3vw, 3.25rem);
  --step-page: clamp(2.375rem, 1.5rem + 3.6vw, 4.25rem);
  --step-hero: clamp(2.375rem, 1.35rem + 4.4vw, 4.875rem);
  --lead: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);

  /* Layout */
  --content-max: 77.5rem;   /* 1240px */
  --gutter: clamp(1rem, 4vw, 3rem);
  --section-y: clamp(4rem, 8vw, 7rem);
  --radius: 2px;
  --radius-panel: 4px;
  --shadow-panel: 0 1px 0 rgba(23, 33, 38, 0.04), 0 22px 44px -28px rgba(23, 33, 38, 0.45);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* src/styles/02-base.css */
/* Base: reset, typography, links, focus, utilities */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--step-page); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; }
h2 { font-size: var(--step-4); line-height: 1.06; letter-spacing: -0.028em; }
h3 { font-size: var(--step-2); line-height: 1.25; letter-spacing: -0.012em; }
h4 { font-size: var(--step-1); line-height: 1.3; }
p { margin: 0; }
p, li, dd, figcaption { text-wrap: pretty; }
p + p { margin-top: 1em; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 600; }
small { font-size: var(--step--1); }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 1px; }
.on-dark :focus-visible { outline-color: var(--focus-on-dark); }

::selection { background: var(--brand); color: var(--surface); }

.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}

.skip-link {
  position: absolute; left: var(--gutter); top: 0.75rem; z-index: 100;
  padding: 0.75rem 1rem; background: var(--brand); color: var(--surface);
  font-weight: 600; text-decoration: none; transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

/* Fine technical labels */
.mono { font-family: var(--font-mono); }
.label {
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}

.lead { font-size: var(--lead); line-height: 1.55; color: var(--ink-2); max-width: 40rem; }
.measure { max-width: 40rem; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  /* `none`, not a tiny duration: a near-zero duration still turns every
     style change into a transition and delays state changes by a frame. */
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header nav, .nav-toggle, .skip-link, .closing, .site-footer__nav { display: none !important; }
  body { background: #fff; }
}

/* src/styles/03-layout-shell.css */
/* Layout primitives, header, navigation, buttons, footer */
.wrap { width: min(100% - (2 * var(--gutter)), var(--content-max)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--band { background: var(--bg-band); border-block: 1px solid var(--rule); }
.section--flush-top { padding-top: 0; }
.stack > * + * { margin-top: var(--stack, 1rem); }

/* ---------- Eyebrow + section heads ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.25rem;
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.eyebrow__num { color: var(--accent-ink); }
.eyebrow > span:last-child { text-wrap: balance; }
.eyebrow__num::after {
  content: ""; display: inline-block; width: 1.5rem; height: 1px; margin-left: 0.75rem;
  vertical-align: middle; background: var(--accent);
}
.on-dark .eyebrow { color: var(--on-dark-2); }
.on-dark .eyebrow__num { color: var(--accent-on-dark); }

.section-head {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1.25rem 4rem; align-items: end; margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}
.section-head__intro { color: var(--ink-2); max-width: 32rem; padding-bottom: 0.35rem; }
.section-head--stacked { grid-template-columns: minmax(0, 1fr); }
.section-head--stacked .section-head__intro { max-width: 42rem; }
@media (max-width: 900px) {
  .section-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* ---------- Buttons & links ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  min-height: 3rem; padding: 0.75rem 1.375rem;
  font: 500 1rem/1.2 var(--font-sans); letter-spacing: 0.005em;
  border: 1px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.button svg { flex: none; transition: transform 0.2s var(--ease); }
.button:hover svg, .link-arrow:hover svg { transform: translateX(3px); }
.button--primary { background: var(--brand); color: var(--surface); }
.button--primary:hover { background: var(--brand-strong); }
.button--light { background: var(--surface); color: var(--brand); }
.button--light:hover { background: #fff; }
.button--quiet { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.button--quiet:hover { border-color: var(--ink); background: var(--surface); }
.button[disabled], .button[aria-disabled="true"] { cursor: progress; opacity: 0.72; }

/* Inline-block (not flex) so a wrapped label keeps its arrow after the last word;
   the vertical padding keeps the target about 44px tall. */
.link-arrow {
  display: inline-block; padding-block: 0.55rem; line-height: 1.5;
  color: var(--ink); font-weight: 500; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 0.3em;
}
.link-arrow:hover { color: var(--brand); text-decoration-thickness: 2px; }
.link-arrow svg { display: inline-block; margin-left: 0.45rem; vertical-align: -0.2em; transition: transform 0.2s var(--ease); }
.on-dark .link-arrow { color: var(--on-dark); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--rule); }
.site-header__inner { display: flex; align-items: center; gap: 1.5rem 2rem; min-height: 4.5rem; }
.wordmark {
  display: inline-flex; align-items: center; gap: 0.6rem; flex: none; min-height: 2.75rem;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.375rem; letter-spacing: -0.02em;
}
.wordmark svg { width: 1.75rem; height: 1.75rem; }
.site-nav { display: flex; align-items: center; flex: 1; gap: 1.5rem; }
.site-nav__list { display: flex; align-items: center; gap: 0.25rem; margin-inline: auto; list-style: none; }
.site-nav__item { position: relative; }
.site-nav__link {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; padding: 0.5rem 0.8rem;
  color: var(--ink); font: 500 0.9375rem/1.2 var(--font-sans); text-decoration: none;
  background: none; border: 0; cursor: pointer;
}
.site-nav__link:hover { text-decoration: underline; text-underline-offset: 0.35em; }
.site-nav__link[aria-current] {
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.45em;
}
.site-nav__chevron { transition: transform 0.2s var(--ease); }
.site-nav__link[aria-expanded="true"] .site-nav__chevron { transform: rotate(180deg); }
.site-nav__sub {
  display: none; list-style: none; position: absolute; top: calc(100% + 0.25rem); left: 0; min-width: 15rem;
  padding: 0.4rem; background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-panel);
}
.site-nav__sub.is-open { display: block; }
.site-nav__sub a {
  display: block; padding: 0.7rem 0.85rem; color: var(--ink); text-decoration: none; font-size: 0.9375rem;
}
.site-nav__sub a:hover, .site-nav__sub a[aria-current="page"] { background: var(--bg); text-decoration: underline; }
.site-nav__cta { flex: none; }
/* On /contact the header button keeps its slot (so the navigation does not shift) but is not shown or focusable. */
.site-nav__cta--placeholder { visibility: hidden; }

.nav-toggle {
  display: none; align-items: center; gap: 0.5rem; margin-left: auto; min-height: 2.75rem; padding: 0.5rem 0.9rem;
  font: 500 0.9375rem/1 var(--font-sans); color: var(--ink); background: transparent;
  border: 1px solid var(--rule-strong); border-radius: var(--radius); cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 1.1rem; height: 0.75rem; }
.nav-toggle__bars::before, .nav-toggle__bars::after, .nav-toggle__bars span {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform 0.2s var(--ease), opacity 0.2s;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span { top: calc(50% - 0.75px); }
.nav-toggle__bars::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-5.25px) rotate(-45deg); }

@media (max-width: 960px) {
  .site-header__inner { flex-wrap: wrap; }
  /* Keyed to the js class, which the inline boot script sets before first paint, so the
     menu is already collapsed when the page first renders (no layout shift). If site.js
     fails, every page is still listed in the footer. */
  .js .nav-toggle { display: inline-flex; }
  /* Without JS the navigation is simply listed below the wordmark. */
  .site-nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0.75rem; padding-bottom: 1rem; }
  .js .site-nav { display: none; }
  .js .site-header.is-open .site-nav {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    padding: 0.5rem var(--gutter) 1.5rem; background: var(--surface);
    border-bottom: 1px solid var(--rule); box-shadow: 0 24px 40px -30px rgba(23, 33, 38, 0.5);
  }
  .site-nav__list { flex-direction: column; align-items: stretch; margin: 0; gap: 0; }
  .site-nav__item { border-bottom: 1px solid var(--rule); }
  .site-nav__link { width: 100%; justify-content: space-between; padding: 0.85rem 0; font-size: 1.0625rem; }
  .site-nav__sub { position: static; min-width: 0; box-shadow: none; border: 0; padding: 0 0 0.75rem 1rem; background: transparent; }
  .site-nav__sub a { padding: 0.65rem 0; font-size: 1rem; }
  .site-nav__cta { align-self: flex-start; margin-top: 0.5rem; }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--rule); background: var(--bg); }
.site-footer__nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; list-style: none; padding-block: 1.75rem 1rem; }
.site-footer__nav a {
  display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--ink); text-decoration: none; font-size: var(--step--1);
}
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer__base {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding-block: 1rem 2rem; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: var(--step--1);
}

/* ---------- Draft banner (previews only) ---------- */
.draft-banner { margin: 0; padding: 0.5rem var(--gutter); background: var(--missing-tint); color: var(--ink); font: 500 var(--step--1)/1.4 var(--font-sans); text-align: center; }

/* src/styles/04-components.css */
/* Shared content components */

/* ---------- Status tags (icon + text, never colour alone) ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 0.3rem; flex: none; max-width: 100%;
  padding: 0.28rem 0.45rem; border: 1px solid currentColor; border-radius: var(--radius);
  font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
.tag svg { width: 0.75rem; height: 0.75rem; }
.tag--ok { color: var(--ok); background: var(--ok-tint); }
.tag--missing { color: var(--missing); background: var(--missing-tint); }
.tag--review { color: var(--brand); background: var(--brand-tint); }
.tag--pending { color: var(--ink-3); background: var(--surface); }
.tag--example { color: var(--ink-3); border-style: dashed; background: transparent; }

/* ---------- Hero ---------- */
.hero { position: relative; border-bottom: 1px solid var(--rule); overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [content-start] minmax(0, calc(var(--content-max) * 0.47))
    [split] minmax(0, calc(var(--content-max) * 0.53))
    [content-end] minmax(var(--gutter), 1fr) [full-end];
}
.hero__copy {
  grid-column: content-start / split; position: relative; z-index: 1;
  padding-block: clamp(3rem, 5.5vw, 5rem) clamp(2.25rem, 4vw, 3.25rem); padding-right: clamp(1.5rem, 4vw, 4.5rem);
}
.hero__title { font-size: var(--step-hero); line-height: 0.97; letter-spacing: -0.045em; font-weight: 700; max-width: 11ch; }
.hero__title span { display: block; }
.hero__body { margin-top: 1.5rem; font-size: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 34rem; }
.hero__support { margin-top: 0.85rem; color: var(--ink-2); max-width: 34rem; font-size: 1.0625rem; }
.hero .actions { margin-top: 1.85rem; }
.hero__micro { margin-top: 0.85rem; font-size: var(--step--1); color: var(--ink-3); max-width: 30rem; }
.hero__visual { grid-column: split / full-end; position: relative; min-height: 100%; }
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: [full-start] var(--gutter) [content-start] minmax(0, 1fr) [content-end] var(--gutter) [full-end]; }
  .hero__copy { grid-column: content-start / content-end; padding-right: 0; }
  .hero__visual { grid-column: full-start / full-end; }
}

/* Aims strip */
.aims__caption { margin-top: clamp(2rem, 4vw, 2.75rem); margin-bottom: 0.75rem; }
.aims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; }
.aims li { padding: 0 1.25rem; border-left: 1px solid var(--rule); }
.aims li:first-child { padding-left: 0; border-left: 0; }
.aims__label { display: block; font: 600 0.9375rem/1.35 var(--font-sans); color: var(--ink); }
.aims__text { display: block; margin-top: 0.35rem; font-size: var(--step--1); line-height: 1.45; color: var(--ink-3); }
@media (max-width: 560px) {
  .aims { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .aims li, .aims li:first-child { padding: 0.8rem 0; border-left: 0; border-top: 1px solid var(--rule); }
}

/* ---------- Drawing sheet (hero visual without photography) ---------- */
.sheet {
  position: relative; height: 100%; min-height: clamp(26rem, 44vw, 40rem);
  background-color: var(--drawing);
  background-image:
    linear-gradient(to right, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to right, var(--grid-minor) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-minor) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  border-left: 1px solid var(--rule);
}
.sheet__drawing { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; max-height: 100%; pointer-events: none; }
.sheet__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sheet__note {
  position: absolute; top: clamp(1.25rem, 3vw, 2.25rem); left: clamp(1.25rem, 3vw, 2.5rem);
  font: 500 0.75rem/1.5 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
  pointer-events: none;
}
.sheet__note::after { content: ""; display: block; width: 2.5rem; height: 1px; margin-top: 0.6rem; background: var(--accent); }
.sheet .wf-panel { position: absolute; top: clamp(1.25rem, 3vw, 2.5rem); right: clamp(1.25rem, 4vw, 3.5rem); }
/* Between 1001 and 1180px the panel would sit over the sheet note; the note is decorative. */
@media (min-width: 1001px) and (max-width: 1180px) {
  .sheet__note { display: none; }
}
/* Up to 1000px the panel joins the normal flow, so it never covers the drawing. */
@media (max-width: 1000px) {
  .sheet { border-left: 0; border-top: 1px solid var(--rule); min-height: 0; display: flex; flex-direction: column; padding: 1.25rem var(--gutter) 0; }
  .sheet .wf-panel { position: relative; top: auto; right: auto; order: 2; margin: 2rem 0 1.5rem; width: 100%; max-width: 24rem; }
  .sheet__drawing { position: relative; order: 3; margin-top: -1rem; }
  .sheet__note { position: static; order: 1; }
}
@media (min-width: 641px) and (max-width: 1000px) {
  .sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); column-gap: var(--gutter); align-items: start; }
  .sheet__note { grid-column: 1; }
  .sheet .wf-panel { grid-column: 2; grid-row: 1 / span 2; margin: 0 0 1.5rem; }
  .sheet__drawing { grid-column: 1 / -1; margin-top: 0; }
}
/* On phones the drawing is small, so its callout text would be unreadable texture. */
@media (max-width: 640px) {
  .sheet__drawing .txt { display: none; }
}

/* Line-drawing styles (SVG classes, so no inline styles are needed under the CSP) */
.drawing .ln { fill: none; stroke: var(--brand); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.drawing .ln-thin { stroke-width: 0.9; }
.drawing .ln-heavy { stroke-width: 2; }
.drawing .ln-dash { stroke-dasharray: 4 4; }
.drawing .solid { fill: var(--surface); }
.drawing .ground { fill: url(#dw-hatch); }
.drawing .hatch-line { stroke: var(--brand); stroke-width: 0.8; opacity: 0.28; }
.drawing .dot { fill: var(--brand); opacity: 0.55; }
.drawing .bedding { fill: url(#dw-dots); stroke: var(--brand); stroke-width: 0.9; }
.drawing .spoil { fill: url(#dw-dots); }
.drawing .acc { stroke: var(--accent); stroke-width: 1; }
.drawing .accf { fill: var(--accent); stroke: none; }
.drawing .txt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; fill: var(--ink-2); }
.drawing .txt-faint { fill: var(--ink-3); }

/* ---------- Workflow panel ---------- */
.wf-panel {
  width: min(21.5rem, 100%); margin: 0; padding: 1rem 1.1rem 1.1rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel); font-size: 0.875rem;
}
.wf-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--rule); }
.wf-panel__job { font-weight: 600; line-height: 1.3; }
.wf-panel__job span { display: block; font-weight: 400; color: var(--ink-3); font-size: 0.8125rem; }
.wf-panel__steps { list-style: none; position: relative; margin-top: 0.4rem; }
.wf-panel__steps::before {
  content: ""; position: absolute; left: 0.5rem; top: 1.6rem; bottom: 1.6rem; width: 1px; background: var(--brand); opacity: 0.35;
}
.wf-step { position: relative; display: grid; grid-template-columns: 1rem minmax(0, 1fr) 2.75rem; gap: 0.8rem; align-items: center; padding: 0.6rem 0; }
.wf-step + .wf-step { border-top: 1px dashed var(--rule); }
.wf-step__node { position: relative; z-index: 1; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--brand); background: var(--surface); }
.wf-step--done .wf-step__node { background: var(--brand); box-shadow: inset 0 0 0 2px var(--surface); }
.wf-step--current .wf-step__node { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(185, 88, 50, 0.18); }
.wf-step__title { display: block; font-weight: 600; line-height: 1.3; }
.wf-step__meta { display: block; color: var(--ink-3); font-size: 0.8125rem; line-height: 1.35; }
.wf-step__thumb { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: var(--surface-sunk); border: 1px solid var(--rule); color: var(--brand); }
.wf-step__thumb svg { width: 1.5rem; height: 1.5rem; }

/* ---------- Problem panels ---------- */
.panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; list-style: none; }
.panel {
  display: flex; flex-direction: column; gap: 0.75rem; padding: 1.75rem 1.6rem 1.25rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
}
.panel__icon { width: 2.5rem; height: 2.5rem; color: var(--brand); margin-bottom: 0.5rem; }
.panel h3 { font-size: 1.3125rem; }
.panel p { color: var(--ink-2); font-size: 1.0625rem; }
.panel .link-arrow { margin-top: auto; padding-top: 0.75rem; font-size: 1rem; }
@media (max-width: 900px) { .panels { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Route (the connected line with numbered junctions) ---------- */
.route { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1.5rem; counter-reset: route; }
.route__stage { position: relative; counter-increment: route; }
.route__marker {
  position: relative; z-index: 1; display: grid; place-items: center; width: 3.25rem; height: 3.25rem;
  border: 1.5px solid var(--brand); border-radius: 50%; background: var(--surface); color: var(--brand);
}
.route__marker svg { width: 1.4rem; height: 1.4rem; }
.route__stage::after {
  content: ""; position: absolute; top: 1.625rem; left: 4rem; right: -0.75rem; height: 1.5px; background: var(--brand);
}
.route__stage:last-child::after { right: 0.25rem; }
.route__stage:last-child::before {
  content: ""; position: absolute; top: calc(1.625rem - 4px); right: 0; width: 9px; height: 9px;
  border-top: 1.5px solid var(--brand); border-right: 1.5px solid var(--brand); transform: rotate(45deg);
}
.route__title { margin-top: 1.25rem; font-size: 1.1875rem; }
.route__title::before { content: counter(route) ". "; }
.route__text { margin-top: 0.4rem; color: var(--ink-2); font-size: 1rem; max-width: 17rem; }
.route__label { display: block; margin-top: 0.9rem; }
@media (max-width: 900px) {
  .route { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .route__stage { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: 1.25rem; padding-bottom: 2rem; }
  .route__stage > :not(.route__marker) { grid-column: 2; }
  .route__marker { grid-row: 1 / span 3; }
  .route__stage::after { top: 3.25rem; bottom: 0; left: 1.625rem; right: auto; width: 1.5px; height: auto; }
  .route__stage:last-child::after, .route__stage:last-child::before { display: none; }
  .route__title { margin-top: 0.6rem; }
  .route__label { margin-top: 0.2rem; grid-row: 1; }
}

/* ---------- Interface fragments (illustrative, never functional) ---------- */
.frag {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel); font-size: 0.875rem; overflow: hidden;
}
.frag__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.35rem 0.75rem; padding: 0.75rem 0.95rem; border-bottom: 1px solid var(--rule); }
.frag__title { font-weight: 600; font-size: 0.9375rem; }
.frag__meta { font: 400 0.75rem/1.3 var(--font-mono); color: var(--ink-3); letter-spacing: 0.04em; white-space: nowrap; }
.frag__body { padding: 0.35rem 0.95rem 0.8rem; }
.frag__rows { list-style: none; }
.frag__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); }
.frag__row:last-child { border-bottom: 0; }
.frag__row--flag { margin-inline: -0.95rem; padding-inline: 0.95rem; background: var(--missing-tint); border-bottom-color: transparent; }
.frag__row--stack { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.frag__row--stack .frag__value { text-align: left; }
.frag__key { color: var(--ink-3); font-size: 0.8125rem; }
.frag__value { font-weight: 500; text-align: right; }
.frag__item { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.frag__item svg { flex: none; width: 1rem; height: 1rem; color: var(--brand); }
.frag__photos { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; list-style: none; }
.frag__photo {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.45rem;
  background: var(--surface-sunk); border: 1px solid var(--rule); font: 400 0.75rem/1.2 var(--font-mono); color: var(--ink-2);
}
.frag__photo svg { width: 0.85rem; height: 0.85rem; color: var(--brand); }
.frag__photo--more { background: transparent; border-style: dashed; color: var(--ink-3); }
.frag__note { margin-top: 0.5rem; padding: 0.55rem 0.65rem; border-left: 2px solid var(--accent); background: var(--bg); color: var(--ink-2); font-size: 0.8125rem; line-height: 1.45; }
.frag__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.65rem 0.95rem; border-top: 1px solid var(--rule); background: var(--bg); font-size: 0.8125rem; color: var(--ink-2); }
.meter { display: block; flex: none; width: 5rem; height: 0.3rem; }
.meter__track { fill: var(--rule); }
.meter__fill { fill: var(--brand); }

/* Example sequence: three fragments joined by arrows */
.sequence { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; align-items: start; list-style: none; }
.sequence__step { display: flex; flex-direction: column; gap: 1rem; margin: 0; }
.sequence__arrow { align-self: center; color: var(--ink-3); margin-top: -3rem; }
.sequence__caption { padding-top: 0.25rem; }
.sequence__caption strong { display: block; font-size: 1.0625rem; }
.sequence__caption span { display: block; color: var(--ink-2); font-size: 1rem; }
.caption { margin-top: 1.75rem; font-size: var(--step--1); color: var(--ink-3); display: flex; gap: 0.6rem; align-items: baseline; }
@media (max-width: 960px) {
  .sequence { grid-template-columns: minmax(0, 1fr); max-width: 30rem; }
  .sequence__arrow { justify-self: center; margin: 0; transform: rotate(90deg); }
}

/* ---------- Editorial split (sectors) ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.split__half { padding: 2.25rem 3rem 0.5rem 0; }
.split__half + .split__half { padding-left: 3rem; padding-right: 0; border-left: 1px solid var(--rule); }
.split__half h3 { font-size: var(--step-3); letter-spacing: -0.025em; }
.split__half > .label + h3 { margin-top: 0.5rem; }
.split__half > p { margin-top: 1rem; color: var(--ink-2); max-width: 32rem; }
.split__list { list-style: none; margin-top: 1.75rem; border-top: 1px solid var(--rule); }
.split__list li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.75rem; padding: 0.95rem 0; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; }
.split__list li span:first-child { font: 500 var(--step--2)/1.9 var(--font-mono); color: var(--accent-ink); }
.split .link-arrow { margin-top: 1.25rem; }
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split__half, .split__half + .split__half { padding: 2rem 0 1rem; border-left: 0; }
  .split__half + .split__half { border-top: 1px solid var(--rule); margin-top: 1.5rem; }
}

/* ---------- Dark band (one substantial dark section) ---------- */
.band-dark { position: relative; overflow: hidden; background: var(--brand); color: var(--on-dark); }
.band-dark h2, .band-dark h3 { color: var(--on-dark); }
.band-dark .section-head__intro, .band-dark p { color: var(--on-dark-2); }
.band-dark__contours { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: var(--on-dark); opacity: 0.09; }
.band-dark .wrap { position: relative; }
.stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; border-top: 1px solid var(--rule-on-dark); }
.stages li { padding: 1.75rem 2rem 0 0; }
.stages li + li { padding-left: 2rem; border-left: 1px solid var(--rule-on-dark); }
.stages__icon { width: 2.25rem; height: 2.25rem; color: var(--accent-on-dark); margin-bottom: 1rem; }
.stages__num { display: block; font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-on-dark); }
.stages h3 { margin-top: 0.35rem; font-size: 1.375rem; }
.stages p { margin-top: 0.6rem; font-size: 1.0625rem; }
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); list-style: none; }
.notes li { padding-top: 1rem; border-top: 1px solid var(--accent-on-dark); font-size: 1rem; }
.notes strong { display: block; color: var(--on-dark); margin-bottom: 0.3rem; }
.band-dark .actions { margin-top: 2.75rem; }
/* Homepage: the three notes sit on the same columns as the three stages above. */
@media (min-width: 901px) {
  .stages + .notes { gap: 0; }
  .stages + .notes li { position: relative; border-top: 0; padding: 1rem 2rem 0 0; }
  .stages + .notes li + li { padding-left: 2rem; }
  .stages + .notes li::before { content: ""; position: absolute; top: 0; left: 0; right: 2rem; height: 1px; background: var(--accent-on-dark); }
  .stages + .notes li + li::before { left: 2rem; }
  .stages + .notes li:last-child::before { right: 0; }
}
@media (max-width: 900px) {
  .stages, .notes { grid-template-columns: minmax(0, 1fr); }
  .stages li, .stages li + li { padding: 1.5rem 0; border-left: 0; }
  .stages li + li { border-top: 1px solid var(--rule-on-dark); }
}

/* ---------- Trust ---------- */
.trust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem 5rem; align-items: start; }
.trust__body > * + * { margin-top: 1rem; }
.trust__body p { color: var(--ink-2); }
.principles { list-style: none; counter-reset: principle; border-top: 1px solid var(--ink); }
.principles li { counter-increment: principle; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--rule); }
.principles li::before { content: counter(principle, decimal-leading-zero); font: 500 var(--step--2)/1.9 var(--font-mono); color: var(--accent-ink); }
.principles strong { display: block; font-size: 1.125rem; }
.principles span { display: block; margin-top: 0.2rem; color: var(--ink-2); font-size: 1rem; }
@media (max-width: 900px) { .trust { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Closing call to action ---------- */
.closing { border-top: 1px solid var(--rule); }
.closing__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; }
.closing h2 { font-size: var(--step-4); max-width: 20ch; }
.closing__body > * + * { margin-top: 1.25rem; }
.closing__body p { color: var(--ink-2); }
.closing__alt { font-size: var(--step--1); color: var(--ink-3); }
.closing__alt a { color: var(--ink); }
@media (max-width: 860px) { .closing__inner { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Inner page hero ---------- */
.page-hero { border-bottom: 1px solid var(--rule); }
.page-hero__inner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); }
.page-hero h1 { max-width: 16ch; }
.page-hero .lead { margin-top: 1.5rem; }
.page-hero .actions { margin-top: 2rem; }
.page-hero__aside { padding-bottom: 0.5rem; }
@media (max-width: 900px) { .page-hero__inner { grid-template-columns: minmax(0, 1fr); } }

/* Compact route motif (SITE RECORD › OFFICE REVIEW › …) */
.route-mini { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0; font: 500 0.75rem/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.route-mini li { display: inline-flex; align-items: center; }
.route-mini li + li::before { content: ""; order: -2; width: 1.25rem; height: 1px; margin: 0 0.5rem; background: var(--accent); }
.route-mini li::after { content: ""; order: -1; width: 0.45rem; height: 0.45rem; margin-right: 0.45rem; border: 1.5px solid var(--brand); border-radius: 50%; }
/* Narrow screens: the route runs down the page instead of wrapping mid-line. */
@media (max-width: 560px) {
  .route-mini { flex-direction: column; align-items: flex-start; gap: 0; }
  .route-mini li { position: relative; }
  .route-mini li + li { padding-top: 0.55rem; }
  .route-mini li + li::before { position: absolute; left: calc(0.225rem - 0.5px); top: -0.3rem; width: 1px; height: 1.15rem; margin: 0; }
}

/* ---------- FAQ (native details/summary) ---------- */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 3.5rem; padding: 1.1rem 0;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: var(--step-1); font-weight: 600; }
.faq summary::after {
  content: ""; flex: none; width: 0.75rem; height: 0.75rem; margin-right: 0.25rem;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq summary:hover h3 { text-decoration: underline; text-underline-offset: 0.3em; }
.faq__answer { padding: 0 0 1.5rem; max-width: 46rem; color: var(--ink-2); }
.faq__answer > * + * { margin-top: 0.8rem; }

/* ---------- Prose (privacy etc.) ---------- */
.prose { max-width: 44rem; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 3rem; font-size: var(--step-3); }
.prose h3 { margin-top: 2rem; font-size: var(--step-1); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.4rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 0.7rem 0.75rem 0.7rem 0; border-bottom: 1px solid var(--rule); }
.prose th { font-weight: 600; }

/* ---------- Notices ---------- */
.notice { padding: 1rem 1.25rem; border-left: 3px solid var(--brand); background: var(--surface); }
.notice--caution { border-left-color: var(--accent); }
.notice > * + * { margin-top: 0.5rem; }

/* Generic two-column content blocks used by inner pages */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 4rem; }
.cols--wide-left { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 860px) { .cols, .cols--wide-left { grid-template-columns: minmax(0, 1fr); } }
.rule-list { list-style: none; border-top: 1px solid var(--rule); }
.rule-list li { padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
.check-list { list-style: none; }
.check-list li { position: relative; padding-left: 1.75rem; }
.check-list li + li { margin-top: 0.6rem; }
.check-list li::before { content: ""; position: absolute; left: 0.1rem; top: 0.55em; width: 0.8rem; height: 0.45rem; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); }

/* ---------- Shared blocks (src/components/blocks.mjs) ---------- */
.section--tight { padding-block: calc(var(--section-y) * 0.6); }

/* Breadcrumb: sits where the eyebrow used to, in the same mono style */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; margin: 0 0 1.25rem; list-style: none; font: 500 var(--step--2)/1.6 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.breadcrumb li + li::before { content: "/"; margin-right: 0.6rem; color: var(--accent-ink); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 1.5rem; color: var(--ink-3); text-decoration: underline; text-underline-offset: 0.25em; }
.breadcrumb a:hover { color: var(--ink); }

/* The engagement in one line */
.engagement-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; max-width: 60rem; margin-top: 1.5rem; font-size: 1.125rem; }

/* Prices (hidden until confirmed) */
.prices { margin-top: 2rem; max-width: 48rem; }
.prices__title { font-size: var(--step-1, 1.25rem); }
.prices__list { margin-top: 0.75rem; border-top: 1px solid var(--rule); }
.prices__list > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.prices__list dd strong { display: block; }
.prices__list dd span { display: block; color: var(--ink-2); font-size: var(--step--1); }
.on-dark .prices__list, .on-dark .prices__list > div { border-color: rgba(243, 240, 233, 0.25); }
.on-dark .prices__list dd span { color: var(--on-dark-2); }
.prices__note { margin-top: 0.5rem; font-size: var(--step--1); color: var(--ink-3); }
.on-dark .prices__note { color: var(--on-dark-2); }

/* Sources line on pages that cite the fact bank */
.sources { margin-block: 1.5rem 2rem; font-size: var(--step--1); color: var(--ink-3); }
.sources__label { font: 500 var(--step--2)/1.6 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; margin-right: 0.5rem; }
.sources a { color: var(--ink-2); }

/* Sector tiles (home and the /sectors hub) */
.sector-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; list-style: none; }
.sector-tile__link { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; padding: 1.5rem; background: var(--surface); border: 1px solid var(--rule); border-top: 2px solid var(--accent); color: var(--ink); text-decoration: none; }
.sector-tile__link:hover { border-color: var(--rule-strong); }
.sector-tile__link:hover .sector-tile__name { text-decoration: underline; }
.sector-tile__name { font-size: 1.25rem; font-weight: 600; }
.sector-tile__text { color: var(--ink-2); }
.sector-group + .sector-group { margin-top: 2.5rem; }
.sector-group__title { margin-bottom: 1rem; font: 500 var(--step--2)/1.6 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }

.home-walkthrough { margin-top: 1rem; }
.principles--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
@media (max-width: 760px) { .principles--grid { grid-template-columns: minmax(0, 1fr); } }

/* src/styles/05-forms.css */
/* Contact page and enquiry forms */
.page-hero--compact .page-hero__inner { padding-block: clamp(2.75rem, 5.5vw, 4.5rem) clamp(1.75rem, 3.5vw, 2.75rem); }
.contact { padding-top: clamp(2rem, 4vw, 3.5rem); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 3rem clamp(2rem, 5vw, 5rem); align-items: start; }
.contact__main { background: var(--surface); border: 1px solid var(--rule); padding: clamp(1.25rem, 4vw, 2.75rem); }
.contact__aside { display: grid; gap: 2.25rem; }
.contact__aside-title { font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.75rem; }
.contact__steps { list-style: none; counter-reset: step; border-top: 1px solid var(--ink); }
.contact__steps li { counter-increment: step; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.contact__steps li::before { content: counter(step, decimal-leading-zero); grid-row: 1 / span 2; font: 500 var(--step--2)/1.9 var(--font-mono); color: var(--accent-ink); }
.contact__steps strong { display: block; }
.contact__steps span { color: var(--ink-2); font-size: 1rem; }
.contact__alt p { font-size: 1rem; color: var(--ink-2); }
.contact__alt a { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } }

.enquiry__title, .received__title { font-size: var(--step-3); letter-spacing: -0.02em; }
.enquiry__intro { margin-top: 0.75rem; color: var(--ink-2); font-size: var(--step--1); }
.enquiry__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
@media (max-width: 640px) { .enquiry__row { grid-template-columns: minmax(0, 1fr); } }

.field { margin: 1.6rem 0 0; padding: 0; border: 0; min-width: 0; }
.field__label { display: block; margin-bottom: 0.35rem; padding: 0; font-weight: 600; font-size: 1.0625rem; line-height: 1.4; color: var(--ink); }
.field__optional { font-weight: 400; color: var(--ink-3); }
.field__hint { margin-bottom: 0.55rem; max-width: 40rem; font-size: var(--step--1); line-height: 1.5; color: var(--ink-3); }
.field__error { margin-bottom: 0.45rem; font-size: var(--step--1); font-weight: 600; color: var(--danger); }
.field--error { padding-left: 1rem; border-left: 4px solid var(--danger); }
.field__count { margin-top: 0.4rem; font-size: var(--step--1); color: var(--ink-3); }
.field__count--over { color: var(--danger); font-weight: 600; }

.input {
  display: block; width: 100%; min-height: 3rem; padding: 0.7rem 0.85rem;
  font: inherit; font-size: 1.0625rem; line-height: 1.4; color: var(--ink);
  background: #fff; border: 1px solid var(--rule-strong); border-radius: var(--radius);
}
.input:hover { border-color: var(--ink-2); }
.input:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
.field--error .input { border: 2px solid var(--danger); }
.input--area { min-height: 9.5rem; resize: vertical; }

/* Checkbox / radio: real inputs, restyled, with visible checked marks */
.chip input, .option input {
  -webkit-appearance: none; appearance: none; flex: none; display: grid; place-content: center;
  width: 1.5rem; height: 1.5rem; margin: 0; background: #fff; border: 1.5px solid var(--ink-2); border-radius: 2px; cursor: pointer;
}
.option input[type="radio"] { border-radius: 50%; }
.chip input:checked, .option input[type="checkbox"]:checked { background: var(--brand); border-color: var(--brand); }
.chip input:checked::before, .option input[type="checkbox"]:checked::before {
  content: ""; width: 0.8rem; height: 0.42rem; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg);
}
.option input[type="radio"]:checked { border-color: var(--brand); }
.option input[type="radio"]:checked::before { content: ""; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--brand); }
.chip input:focus-visible, .option input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.chips__list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0.45rem 0.95rem 0.45rem 0.7rem;
  background: #fff; border: 1px solid var(--rule-strong); border-radius: var(--radius); cursor: pointer; font-size: 1rem; line-height: 1.3;
}
.chip:hover { border-color: var(--ink); }
.chip:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }

.options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.15rem 1.25rem; }
.option { display: flex; align-items: center; gap: 0.7rem; min-height: 2.75rem; cursor: pointer; font-size: 1rem; line-height: 1.35; }

.hp { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

.enquiry__privacy { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); max-width: 40rem; font-size: var(--step--1); color: var(--ink-2); }
.enquiry__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.5rem; }
.enquiry__submit .field__hint { margin: 0; }

.form-alert { margin-top: 1.5rem; padding: 1rem 1.25rem; border-left: 4px solid var(--danger); background: var(--danger-tint); color: var(--ink); }
.form-alert--static { margin: 0 0 1.5rem; }
.form-alert a { color: var(--ink); font-weight: 600; }
.form-status { margin-top: 0.75rem; min-height: 1.5em; font-size: var(--step--1); color: var(--ink-2); }

.error-summary { margin: 1.25rem 0 0.5rem; padding: 1.1rem 1.35rem; background: #fff; border: 3px solid var(--danger); }
.error-summary:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.error-summary__title { font-size: 1.1875rem; }
.error-summary__list { list-style: none; margin-top: 0.6rem; }
.error-summary__list li + li { margin-top: 0.3rem; }
.error-summary__list a { color: var(--danger); font-weight: 600; }

.received > * + * { margin-top: 1rem; }
.received:focus { outline: none; }
.received__mark span {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--brand);
}
.received__mark span::before { content: ""; width: 0.95rem; height: 0.5rem; border-left: 2.5px solid var(--surface); border-bottom: 2.5px solid var(--surface); transform: translateY(-2px) rotate(-45deg); }
.received--error { border-left: 4px solid var(--danger); padding-left: 1.25rem; }
.received__actions { margin-top: 1.25rem; }
.received__done { margin-top: 1.75rem; padding: 1.25rem 1.35rem; background: var(--bg); border-left: 3px solid var(--brand); }
.received__done:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.received__done h3 { font-size: var(--step-1); }
.received__done p { margin-top: 0.4rem; color: var(--ink-2); }

.details { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--rule); }
.details__title { font-size: var(--step-2); }
.details__title:focus { outline: none; }
.details__intro { margin-top: 0.5rem; color: var(--ink-2); font-size: var(--step--1); }
.details__actions { margin-top: 2rem; }
.button[aria-disabled="true"] { cursor: progress; opacity: 0.72; }

/* Windows contrast themes: keep checked states visible. */
@media (forced-colors: active) {
  .option input[type="radio"]:checked::before { forced-color-adjust: none; background: CanvasText; }
  .chip input:checked, .option input[type="checkbox"]:checked { forced-color-adjust: none; background: CanvasText; border-color: CanvasText; }
  .chip input:checked::before, .option input[type="checkbox"]:checked::before { border-color: Canvas; }
}

/* src/styles/pages/about.css */
/* About page (src/pages/about.mjs). Every selector is scoped to .pg-about. */

/* ---------- Hero: "at a glance" title block ---------- */
.pg-about .pg-about__card {
  background: var(--surface); border: 1px solid var(--ink); border-radius: var(--radius);
}
.pg-about .pg-about__card-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem;
  padding: 0.75rem 1.1rem; border-bottom: 1px solid var(--ink);
  font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
}
.pg-about .pg-about__card-head span + span { color: var(--accent-ink); }
.pg-about .pg-about__facts { margin: 0; }
.pg-about .pg-about__facts div {
  display: grid; grid-template-columns: 7.25rem minmax(0, 1fr); gap: 0.2rem 1rem; padding: 0.9rem 1.1rem;
}
.pg-about .pg-about__facts div + div { border-top: 1px solid var(--rule); }
.pg-about .pg-about__facts dt {
  font: 500 var(--step--2)/1.75 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
.pg-about .pg-about__facts dd { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink); }

/* ---------- 01 What we do: editorial prose + focus list ---------- */
.pg-about .pg-about__what {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 3rem clamp(2.5rem, 6vw, 6rem); align-items: start;
}
.pg-about .pg-about__prose h2 { max-width: 13ch; }
.pg-about .pg-about__prose p { color: var(--ink-2); max-width: 36rem; }
.pg-about .pg-about__prose .pg-about__first {
  margin-top: clamp(1.75rem, 3vw, 2.5rem); font-size: var(--lead); line-height: 1.5; color: var(--ink);
}
.pg-about .pg-about__focus-wrap { padding-top: 0.35rem; }
.pg-about .pg-about__focus-wrap > .label { margin-bottom: 0.9rem; }
.pg-about .pg-about__focus { list-style: none; border-top: 1px solid var(--ink); }
.pg-about .pg-about__focus li {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.35rem 1.1rem;
  padding: 1.4rem 0 0.9rem; border-bottom: 1px solid var(--rule);
}
.pg-about .pg-about__focus li > svg { grid-row: 1 / span 3; width: 2rem; height: 2rem; color: var(--brand); }
.pg-about .pg-about__focus li > :not(svg) { grid-column: 2; }
.pg-about .pg-about__focus h3 { font-size: 1.25rem; }
.pg-about .pg-about__focus p { color: var(--ink-2); font-size: 1rem; }
.pg-about .pg-about__focus .link-arrow { justify-self: start; font-size: 1rem; }

/* ---------- 02 Who and where ---------- */
.pg-about .split__half > .pg-about__roles { margin-top: 1.5rem; font-size: 1.0625rem; }

/* ---------- 03 How we work: principles + engagement card ---------- */
.pg-about .pg-about__how {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem clamp(2.5rem, 5vw, 5rem); align-items: start;
}
.pg-about .pg-about__engagement {
  padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--surface);
  border: 1px solid var(--rule); border-top: 2px solid var(--accent); border-radius: var(--radius);
}
.pg-about .pg-about__engagement h3 { font-size: var(--step-2); }
.pg-about .pg-about__steps { list-style: none; margin-top: 1.25rem; border-top: 1px solid var(--rule); }
.pg-about .pg-about__steps li {
  display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: 0.2rem 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--rule);
}
.pg-about .pg-about__step-num {
  font: 500 var(--step--2)/1.9 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-ink); white-space: nowrap;
}
.pg-about .pg-about__steps strong { display: block; font-size: 1.0625rem; }
.pg-about .pg-about__step-text { display: block; margin-top: 0.2rem; color: var(--ink-2); font-size: 1rem; }
.pg-about .pg-about__engagement .link-arrow { margin-top: 1rem; font-size: 1rem; }

/* ---------- 04 Dark statement band ---------- */
.pg-about .pg-about__boundary {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem clamp(2.5rem, 6vw, 6rem); align-items: start;
}
.pg-about .pg-about__boundary h2 { max-width: 14ch; }
.pg-about .pg-about__nowrap { white-space: nowrap; }
.pg-about .pg-about__boundary-intro { margin-top: 1.5rem; max-width: 30rem; font-size: var(--lead); line-height: 1.5; }
.pg-about .pg-about__boundary .notes { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; margin-top: 0.35rem; }
.pg-about .pg-about__boundary .notes li { font-size: 1.0625rem; color: var(--on-dark-2); }
.pg-about .pg-about__boundary .notes strong { font-size: var(--step-1); line-height: 1.3; margin-bottom: 0.5rem; }

/* ---------- 05 Technology ---------- */
/* Source order is intro, stack, caveat, so narrow screens read the building
   blocks before the licensing note; wide screens put the stack on the right. */
.pg-about .pg-about__tech {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  grid-template-areas: "intro stack" "caveat stack";
  grid-template-rows: auto 1fr;
  gap: 1.5rem clamp(2.5rem, 5vw, 5rem); align-items: start;
}
.pg-about .pg-about__tech-intro { grid-area: intro; color: var(--ink-2); }
.pg-about .pg-about__stack { grid-area: stack; }
.pg-about .pg-about__tech-caveat { grid-area: caveat; }
.pg-about .pg-about__tech-caveat > * + * { margin-top: 1.25rem; }
.pg-about .pg-about__tech-caveat > .link-arrow { font-size: 1rem; }
.pg-about .pg-about__tech-caveat .notice p { font-size: 1rem; color: var(--ink-2); }
.pg-about .pg-about__tech-caveat .notice p:first-child { color: var(--ink); }
.pg-about .pg-about__stack { margin: 0; border-top: 1px solid var(--ink); }
.pg-about .pg-about__stack div {
  display: grid; grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); gap: 0.3rem 1.75rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--rule);
}
.pg-about .pg-about__stack dt { font-weight: 600; font-size: 1.0625rem; line-height: 1.45; }
.pg-about .pg-about__stack dd { margin: 0; color: var(--ink-2); font-size: 1rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .pg-about .pg-about__tech {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "stack" "caveat"; grid-template-rows: none;
    row-gap: 2rem;
  }
  .pg-about .pg-about__tech-intro { max-width: 40rem; }
  .pg-about .pg-about__tech-caveat { max-width: 40rem; }
}
@media (max-width: 900px) {
  .pg-about .pg-about__what,
  .pg-about .pg-about__how,
  .pg-about .pg-about__boundary { grid-template-columns: minmax(0, 1fr); }
  .pg-about .page-hero__aside { max-width: 34rem; }
}
@media (max-width: 600px) {
  .pg-about .pg-about__stack div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .pg-about .pg-about__facts div,
  .pg-about .pg-about__steps li { grid-template-columns: minmax(0, 1fr); }
  /* Give the focus-list links the full width so their arrow stays beside the text. */
  .pg-about .pg-about__focus li { grid-template-columns: minmax(0, 1fr); }
  .pg-about .pg-about__focus li > svg { grid-row: auto; margin-bottom: 0.35rem; }
  .pg-about .pg-about__focus li > :not(svg) { grid-column: 1; }
}

.pg-about .pg-about__notice-title { font-size: var(--step-1); }
/* Two principles only (the engagement card carries the sequence), so no numbering. */
.pg-about .pg-about__how .principles li { grid-template-columns: minmax(0, 1fr); }
.pg-about .pg-about__how .principles li::before { content: none; }

/* src/styles/pages/construction.css */
/* Construction & civils sector page (src/pages/construction.mjs).
   Every selector is scoped to .pg-construction. Tokens only, no new colours. */

/* ---------- Hero ---------- */
.pg-construction .cx-hero .page-hero__inner { align-items: center; }
.pg-construction .cx-hero h1 { max-width: 17ch; }
.pg-construction .cx-hero__note { margin-top: 1.1rem; max-width: 30rem; font-size: var(--step--1); color: var(--ink-3); }

/* Drawing-register style list of the records the page covers */
.pg-construction .cx-register {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}
.pg-construction .cx-register__head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--rule);
}
.pg-construction .cx-register__icon { flex: none; color: var(--brand); }
.pg-construction .cx-register__list { list-style: none; padding: 0.2rem 1.1rem; }
.pg-construction .cx-register__list li {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.5rem;
  padding: 0.62rem 0; border-bottom: 1px dashed var(--rule); font-size: 0.9375rem; line-height: 1.45;
}
.pg-construction .cx-register__list li:last-child { border-bottom: 0; }
.pg-construction .cx-register__num { font: 500 var(--step--2)/1.75 var(--font-mono); color: var(--accent-ink); }
.pg-construction .cx-register__foot {
  display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--rule); background: var(--bg);
  font: 500 0.75rem/1.5 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
}
.pg-construction .cx-register__foot::before { content: ""; flex: none; width: 1.75rem; height: 1px; margin-top: 0.75em; background: var(--accent); }

/* ---------- 01: common situations ---------- */
.pg-construction .cx-issues { list-style: none; border-top: 1px solid var(--ink); counter-reset: cx-issue; }
.pg-construction .cx-issues > li {
  counter-increment: cx-issue;
  display: grid; grid-template-columns: 3.5rem minmax(0, 1.15fr) minmax(0, 1fr); gap: 0.9rem 0;
  padding: 1.6rem 0; border-bottom: 1px solid var(--rule);
}
.pg-construction .cx-issues > li::before {
  content: counter(cx-issue, decimal-leading-zero);
  font: 500 var(--step--2)/2.1 var(--font-mono); color: var(--accent-ink);
}
.pg-construction .cx-issues h3 { font-size: 1.25rem; max-width: 30rem; }
.pg-construction .cx-issues__what { margin-top: 0.45rem; color: var(--ink-2); font-size: 1.0625rem; max-width: 34rem; }
.pg-construction .cx-issues__later { align-self: start; margin-left: 3rem; padding-left: 1.25rem; border-left: 1px solid var(--accent); }
.pg-construction .cx-issues__later p + p { margin-top: 0.35rem; color: var(--ink-2); font-size: 1rem; }
@media (max-width: 860px) {
  .pg-construction .cx-issues > li { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem 0.75rem; }
  .pg-construction .cx-issues > li::before { grid-column: 1; grid-row: 1 / span 2; }
  .pg-construction .cx-issues > li > * { grid-column: 2; }
  .pg-construction .cx-issues__later { margin-left: 0; }
}

/* ---------- 02: what changes for each team ---------- */
.pg-construction .cx-teams {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
}
.pg-construction .cx-teams > li { padding: 2rem 2.25rem 0 0; }
.pg-construction .cx-teams > li + li { padding-left: 2.25rem; border-left: 1px solid var(--rule); }
.pg-construction .cx-teams__head { padding-bottom: 1.25rem; }
.pg-construction .cx-teams__icon { width: 2.25rem; height: 2.25rem; color: var(--brand); }
.pg-construction .cx-teams h3 { margin-top: 1rem; font-size: var(--step-2); }
.pg-construction .cx-teams__who { margin-top: 0.3rem; font-size: var(--step--1); color: var(--ink-3); }
.pg-construction .cx-teams .rule-list li { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
/* Wide screens: line the four rows up across the three columns, so the layout
   reads like a table. Browsers without subgrid keep independent columns. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .pg-construction .cx-teams { grid-template-rows: auto repeat(4, auto); row-gap: 0; }
    .pg-construction .cx-teams > li { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
    .pg-construction .cx-teams .rule-list { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  }
}
.pg-construction .cx-teams__note { margin-top: clamp(2.5rem, 5vw, 3.25rem); max-width: 54rem; }
.pg-construction .cx-teams__note p { color: var(--ink-2); font-size: 1.0625rem; }
.pg-construction .cx-teams__note strong { color: var(--ink); }
@media (max-width: 900px) {
  .pg-construction .cx-teams { grid-template-columns: minmax(0, 1fr); }
  .pg-construction .cx-teams > li, .pg-construction .cx-teams > li + li { padding: 1.75rem 0 0.5rem; border-left: 0; }
  /* The rule list above already ends with a rule, so no second border here. */
  .pg-construction .cx-teams > li + li { margin-top: 1.25rem; border-top: 0; }
}

/* ---------- 03: worked example ---------- */
.pg-construction .cx-example {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
  gap: 3rem clamp(3rem, 6vw, 5.5rem); align-items: start;
}
.pg-construction .cx-trace { list-style: none; }
.pg-construction .cx-trace > li { position: relative; padding: 0 0 2.25rem 2.75rem; }
.pg-construction .cx-trace > li:last-child { padding-bottom: 0; }
.pg-construction .cx-trace > li::before {
  content: ""; position: absolute; z-index: 1; left: 0; top: 0.2rem; width: 1rem; height: 1rem;
  border: 2px solid var(--brand); border-radius: 50%; background: var(--bg);
}
.pg-construction .cx-trace > li::after {
  content: ""; position: absolute; left: calc(0.5rem - 0.75px); top: 1.2rem; bottom: -0.2rem;
  width: 1.5px; background: var(--brand); opacity: 0.35;
}
.pg-construction .cx-trace > li:last-child::after { display: none; }
.pg-construction .cx-trace > li:last-child::before { background: var(--brand); box-shadow: inset 0 0 0 2px var(--bg); }
.pg-construction .cx-trace__when {
  font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink);
}
.pg-construction .cx-trace h3 { margin-top: 0.4rem; font-size: 1.25rem; }
.pg-construction .cx-trace__text { margin-top: 0.4rem; color: var(--ink-2); max-width: 36rem; }
.pg-construction .cx-example__frags { display: grid; gap: 1.75rem; }
.pg-construction .cx-example__label { margin-bottom: 0.6rem; }
.pg-construction .cx-example__more { margin-top: 0.5rem; }
/* Keep the job reference on one line; the fragment title wraps instead. */
.pg-construction .cx-example__frags .frag__meta { white-space: nowrap; }
@media (max-width: 960px) {
  .pg-construction .cx-example { grid-template-columns: minmax(0, 1fr); }
  .pg-construction .cx-example__frags { max-width: 30rem; }
}

/* ---------- 04: where to start (dark band) ---------- */
.pg-construction .band-dark .label { color: var(--on-dark-2); }
.pg-construction .cx-routes { list-style: none; border-top: 1px solid var(--rule-on-dark); counter-reset: cx-route; }
.pg-construction .cx-routes > li {
  counter-increment: cx-route;
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 18rem); gap: 0.75rem 2.5rem;
  padding: 1.6rem 0; border-bottom: 1px solid var(--rule-on-dark);
}
.pg-construction .cx-routes > li::before {
  content: counter(cx-route, decimal-leading-zero);
  font: 500 var(--step--2)/2.3 var(--font-mono); color: var(--accent-on-dark);
}
.pg-construction .cx-routes h3 { font-size: var(--step-2); }
.pg-construction .cx-routes__when { margin-top: 0.45rem; font-size: 1.0625rem; max-width: 38rem; }
.pg-construction .cx-routes__links { display: flex; flex-direction: column; align-items: flex-start; }
.pg-construction .cx-routes .link-arrow { font-size: 1rem; }
.pg-construction .cx-routes__aside { margin-top: 1.5rem; max-width: 46rem; }
.pg-construction .cx-routes__aside p { font-size: 1.0625rem; }
.pg-construction .cx-routes__aside .link-arrow { margin-top: 0.35rem; }
.pg-construction .cx-steps__label { margin-top: clamp(3rem, 6vw, 4.25rem); margin-bottom: 1.25rem; }
.pg-construction .cx-steps {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.75rem;
}
.pg-construction .cx-steps > li { padding-top: 1rem; border-top: 1px solid var(--accent-on-dark); }
.pg-construction .cx-steps__num {
  display: block; font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-on-dark);
}
.pg-construction .cx-steps h4 { margin-top: 0.4rem; font-size: 1.1875rem; color: var(--on-dark); }
.pg-construction .cx-steps p { margin-top: 0.45rem; font-size: 1rem; }
@media (max-width: 1000px) {
  .pg-construction .cx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pg-construction .cx-routes > li { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.75rem; }
  .pg-construction .cx-routes > li::before { grid-column: 1; grid-row: 1 / span 2; }
  .pg-construction .cx-routes > li > * { grid-column: 2; }
}
@media (max-width: 560px) {
  .pg-construction .cx-steps { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  /* Number above the title so the links get the full width at 320px. */
  .pg-construction .cx-routes > li { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .pg-construction .cx-routes > li::before { grid-row: auto; line-height: 1.4; }
  .pg-construction .cx-routes > li > * { grid-column: 1; }
}

/* ---------- 05: practical questions ---------- */
.pg-construction .cx-faq {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
  gap: 2rem clamp(3rem, 6vw, 5.5rem); align-items: start;
}
.pg-construction .cx-faq__lead { margin-top: 1.1rem; max-width: 26rem; color: var(--ink-2); }
.pg-construction .cx-faq__intro .link-arrow { margin-top: 0.75rem; }
@media (max-width: 900px) {
  .pg-construction .cx-faq { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Cross-link to utilities ---------- */
.pg-construction .cx-cross { padding-block: clamp(2.75rem, 5vw, 3.75rem); }
.pg-construction .cx-cross__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem 4rem; align-items: end;
}
.pg-construction .cx-cross h2 { margin-top: 0.6rem; font-size: var(--step-3); max-width: 22ch; }
.pg-construction .cx-cross__inner p:not(.label) { color: var(--ink-2); max-width: 34rem; }
.pg-construction .cx-cross .link-arrow { margin-top: 0.6rem; }
.pg-construction .cx-cross + .closing { border-top: 0; }
@media (max-width: 860px) {
  .pg-construction .cx-cross__inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* First workflow: the three teams as one compact column */
.pg-construction .cx-teams.cx-teams--compact { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; margin-bottom: 1.5rem; }
.pg-construction .cx-teams--compact > li,
.pg-construction .cx-teams--compact > li + li { display: block; grid-row: auto; padding: 1.25rem 0; border-left: 0; border-bottom: 1px solid var(--rule); }
.pg-construction .cx-teams--compact .cx-teams__head { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.5rem; }
.pg-construction .cx-teams--compact h3 { margin-top: 0; font-size: var(--step-1); }
.pg-construction .cx-teams--compact p { color: var(--ink-2); }
.pg-construction .cx-routes__more { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1.5rem; }

/* src/styles/pages/in-action.css */
/* "A working day. Connected." (/in-action).
   Every selector is scoped to .pg-in-action, except the entry tile (.ia-tile), which is used on
   the homepage and on Work & examples. No background images here: this bundle loads on every
   page, and ordinary pages must not fetch anything for the walkthrough. */

/* ---------- Containers ---------- */
.pg-in-action .ia-wide {
  width: min(
    100% - max(var(--gutter), env(safe-area-inset-left, 0px)) - max(var(--gutter), env(safe-area-inset-right, 0px)),
    100rem
  );
  margin-inline: auto;
}

/* ---------- Compact intro ---------- */
.pg-in-action .ia-intro { border-bottom: 1px solid var(--rule); }
.pg-in-action .ia-intro__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); gap: 0.75rem 3rem; align-items: end;
  padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.4vw, 1.75rem);
}
.pg-in-action .ia-intro .eyebrow { margin-bottom: 0.75rem; }
.pg-in-action .ia-intro h1 { font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.035em; }
.pg-in-action .ia-intro .lead { font-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem); max-width: 36rem; }
.pg-in-action .ia-label {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin-top: 0.8rem;
  font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-3);
}
@media (max-width: 900px) {
  .pg-in-action .ia-intro__inner { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Experience: stage + side column ---------- */
.pg-in-action .ia-experience { padding-block: clamp(1rem, 2vw, 1.5rem) clamp(2.5rem, 5vw, 4rem); }
.pg-in-action .ia-shell {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 25rem); gap: 1.25rem 1.5rem; align-items: start;
}
.pg-in-action .ia-main { min-width: 0; }

.pg-in-action .ia-stage { position: relative; }
.pg-in-action .ia-stage__viewport {
  position: relative; height: clamp(22rem, 68vh, 56rem); overflow: hidden;
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-panel);
  touch-action: pan-y pinch-zoom; /* the scene takes no gestures: page scrolling always works */
}
/* `contain`: the poster's background is the page colour, so the whole model stays in view at any
   stage aspect ratio without visible bars. */
.pg-in-action .ia-stage__poster { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
.pg-in-action .ia-stage__canvas {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  pointer-events: none; touch-action: pan-y pinch-zoom;
}
.pg-in-action .is-running .ia-stage__poster { visibility: hidden; }
.pg-in-action .is-context-lost .ia-stage__poster { visibility: visible; }
.pg-in-action .is-context-lost .ia-stage__canvas { visibility: hidden; }

/* Start strip: sits in the empty top-left corner of the composition, beside the model, not on it. */
.pg-in-action .ia-stage__overlay {
  position: absolute; top: clamp(0.75rem, 2vw, 1.5rem); left: clamp(0.75rem, 2vw, 1.5rem); z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; max-width: min(26rem, calc(100% - 1.5rem));
  pointer-events: none;
}
.pg-in-action .ia-stage__overlay > * { pointer-events: auto; }
.pg-in-action .ia-launch {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem;
  padding: 0.85rem 1rem 0.5rem; background: rgba(243, 240, 233, 0.9); border-radius: var(--radius-panel);
}
.pg-in-action .ia-launch__start .ia-icon { width: 1.125rem; height: 1.125rem; }
.pg-in-action .ia-launch__start[aria-disabled="true"] { cursor: progress; opacity: 0.8; }
.pg-in-action .ia-launch__read { font-size: 1rem; }
.pg-in-action .is-running .ia-launch { display: none; }

/* The single polite live region. Visible while loading; otherwise present for screen readers only. */
.pg-in-action .ia-status {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pg-in-action .is-loading .ia-status {
  position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.8rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
}
.pg-in-action .is-loading .ia-status::before {
  content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent);
  animation: ia-breathe 1.4s ease-in-out infinite;
}
@keyframes ia-breathe { 50% { opacity: 0.25; } }

/* Fallback message (no WebGL, failed load, context loss). */
.pg-in-action .ia-notice {
  display: grid; gap: 0.6rem; padding: 1rem 1.1rem; background: var(--surface);
  border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}
.pg-in-action .ia-notice__text { font-size: 1rem; line-height: 1.5; color: var(--ink); }
.pg-in-action .ia-notice__text:focus { outline: none; }
.pg-in-action .ia-notice__text:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.pg-in-action .ia-notice__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }

/* ---------- Controls under the stage ---------- */
.pg-in-action .ia-controls { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.pg-in-action .ia-chapters__list { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.375rem; }
.pg-in-action .ia-chapters__list li { display: flex; }
.pg-in-action .ia-chapter {
  position: relative; display: flex; align-items: flex-start; gap: 0.5rem; width: 100%; min-height: 3.25rem;
  padding: 0.6rem 0.7rem 0.55rem; text-align: left; cursor: pointer;
  font: 500 0.875rem/1.3 var(--font-sans); color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.pg-in-action .ia-chapter::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: transparent;
}
.pg-in-action .ia-chapter:hover { border-color: var(--rule-strong); color: var(--ink); }
.pg-in-action .ia-chapter__num { flex: none; font: 500 0.75rem/1.55 var(--font-mono); color: var(--accent-ink); }
.pg-in-action .ia-chapter.is-done { color: var(--ink); }
.pg-in-action .ia-chapter.is-done::before { background: var(--brand); }
.pg-in-action .ia-chapter[aria-current="step"] { background: var(--brand); border-color: var(--brand); color: var(--surface); }
.pg-in-action .ia-chapter[aria-current="step"] .ia-chapter__num { color: var(--accent-on-dark); }
.pg-in-action .ia-chapter[aria-current="step"]::before { background: var(--accent); }

.pg-in-action .ia-transport { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.pg-in-action .ia-progress { flex: 1 1 11rem; min-width: 10rem; }
.pg-in-action .ia-progress__text {
  display: flex; justify-content: space-between; gap: 1rem;
  font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}
.pg-in-action .ia-progress__mode { color: var(--ink-3); }
.pg-in-action .ia-progress__track { position: relative; height: 3px; margin-top: 0.5rem; background: var(--rule); overflow: hidden; }
.pg-in-action .ia-progress__fill {
  position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0);
}

.pg-in-action .ia-transport__buttons { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.pg-in-action .ia-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.75rem;
  padding: 0.5rem 0.85rem; cursor: pointer;
  font: 500 0.9375rem/1.2 var(--font-sans); color: var(--ink);
  background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--radius);
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.pg-in-action .ia-btn:hover { background: var(--surface); border-color: var(--ink); }
.pg-in-action .ia-btn--primary { min-width: 7.25rem; background: var(--brand); border-color: var(--brand); color: var(--surface); }
.pg-in-action .ia-btn--primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.pg-in-action .ia-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.pg-in-action .ia-btn[aria-disabled="true"]:hover { background: transparent; border-color: var(--rule-strong); }
.pg-in-action .ia-icon { flex: none; width: 1.125rem; height: 1.125rem; }
.pg-in-action .ia-btn--primary .ia-icon--pause,
.pg-in-action .ia-btn--primary .ia-icon--replay { display: none; }
.pg-in-action .ia-btn--primary[data-state="playing"] .ia-icon--play { display: none; }
.pg-in-action .ia-btn--primary[data-state="playing"] .ia-icon--pause { display: block; }
.pg-in-action .ia-btn--primary[data-state="replay"] .ia-icon--play { display: none; }
.pg-in-action .ia-btn--primary[data-state="replay"] .ia-icon--replay { display: block; }

.pg-in-action .ia-toggles { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.pg-in-action .ia-toggle {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding: 0.5rem 0.7rem; cursor: pointer;
  font: 500 0.875rem/1.2 var(--font-sans); color: var(--ink-2);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius);
}
.pg-in-action .ia-toggle:hover { color: var(--ink); background: var(--surface); border-color: var(--rule); }
.pg-in-action .ia-toggle__box {
  position: relative; flex: none; width: 1.125rem; height: 1.125rem;
  background: var(--surface); border: 1.5px solid var(--rule-strong); border-radius: 2px;
}
.pg-in-action .ia-toggle[aria-pressed="true"] { color: var(--ink); }
.pg-in-action .ia-toggle[aria-pressed="true"] .ia-toggle__box { background: var(--brand); border-color: var(--brand); }
.pg-in-action .ia-toggle[aria-pressed="true"] .ia-toggle__box::after {
  content: ""; position: absolute; left: 0.28rem; top: 0.1rem; width: 0.32rem; height: 0.6rem;
  border-right: 2px solid var(--surface); border-bottom: 2px solid var(--surface); transform: rotate(45deg);
}

/* ---------- Side column: intro, caption, device panel ---------- */
.pg-in-action .ia-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.pg-in-action .ia-side__label {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem;
  font: 500 0.75rem/1.4 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-3);
}

.pg-in-action .ia-about {
  padding: 1.25rem 1.25rem 1.15rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel);
}
.pg-in-action .ia-about__title { font-size: 1.1875rem; }
.pg-in-action .ia-about p { margin-top: 0.6rem; font-size: 0.9375rem; color: var(--ink-2); }
.pg-in-action .ia-about__list { list-style: none; margin-top: 0.9rem; border-top: 1px solid var(--rule); }
.pg-in-action .ia-about__list li {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.5rem; padding: 0.45rem 0;
  border-bottom: 1px solid var(--rule); font-size: 0.9375rem;
}
.pg-in-action .ia-about__num { font: 500 0.75rem/1.9 var(--font-mono); color: var(--accent-ink); }
.pg-in-action .ia-about p.ia-about__read { margin-top: 0.9rem; }

.pg-in-action .ia-panel { display: flex; flex-direction: column; gap: 1rem; }
.pg-in-action .ia-caption { padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.pg-in-action .ia-caption__meta {
  font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink);
}
.pg-in-action .ia-caption__title { margin-top: 0.35rem; font-size: 1.375rem; line-height: 1.2; }
.pg-in-action .ia-caption__text { margin-top: 0.5rem; font-size: 1.125rem; line-height: 1.5; color: var(--ink-2); }
.pg-in-action .ia-caption__hint {
  margin-top: 0.8rem; padding: 0.55rem 0.75rem; background: var(--surface); border-left: 2px solid var(--accent);
  font-size: 0.9375rem; line-height: 1.45; color: var(--ink);
}
.pg-in-action .ia-caption__transit {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem;
  font: 500 0.75rem/1.4 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-3);
}
.pg-in-action .ia-caption__transit::before { content: ""; flex: none; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent); }

.pg-in-action .ia-device-panel__zone {
  font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.pg-in-action .ia-device-panel__title { margin: 0.15rem 0 0.6rem; font-size: 1.1875rem; }
.pg-in-action .ia-device-panel__title:focus { outline: none; }
.pg-in-action .ia-device-panel__title:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* The device itself: a bezel around the same interface that is painted on the screen in the scene. */
.pg-in-action .ia-device-panel__frame {
  padding: 0.55rem; background: #1E2629; border-radius: 0.9rem;
  box-shadow: 0 1px 0 rgba(23, 33, 38, 0.06), 0 18px 36px -26px rgba(23, 33, 38, 0.6);
}
.pg-in-action [data-ia-frame="monitor"],
.pg-in-action .ia-static-device--monitor .ia-device-panel__frame { padding: 0.4rem; border-radius: 0.35rem; background: #232B2E; }

/* ---------- Device interface (device-html.js markup; used live and in the illustrated version) ---------- */
.pg-in-action .ia-device {
  overflow: hidden; background: var(--surface); border-radius: 0.45rem;
  font-size: 0.875rem; line-height: 1.45; color: var(--ink);
}
.pg-in-action .ia-device--monitor { border-radius: 0.15rem; }
.pg-in-action .ia-device__header {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.75rem; align-items: center;
  padding: 0.7rem 0.9rem 0.8rem; background: var(--brand); color: #fff;
}
.pg-in-action .ia-device__header > * { min-width: 0; }
.pg-in-action .ia-device--monitor .ia-device__header { background: var(--ink); }
.pg-in-action .ia-device__app {
  grid-column: 1; font: 500 0.6875rem/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #A9C3BD;
}
.pg-in-action .ia-device--monitor .ia-device__app { color: #AEB8BA; }
.pg-in-action .ia-device h4,
.pg-in-action .ia-device h5,
.pg-in-action .ia-device h6 { margin: 0; }
.pg-in-action .ia-device__title { grid-column: 1 / -1; font: 500 1.25rem/1.25 var(--font-mono); letter-spacing: 0.01em; color: #fff; }
.pg-in-action .ia-device__project { grid-column: 2; grid-row: 1; justify-self: end; font-size: 0.75rem; color: var(--brand-tint); }
.pg-in-action .ia-device__status {
  grid-column: 1 / -1; justify-self: start; margin-top: 0.35rem;
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.55rem;
  font: 600 0.75rem/1.3 var(--font-sans); border-radius: 999px;
  color: var(--ink-2); background: #ECE8DF; border: 1px solid #D4CEC2;
}
.pg-in-action .ia-device__status::before {
  content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1.5px solid currentColor;
}
.pg-in-action .ia-device__status--sent,
.pg-in-action .ia-device__status--update-sent,
.pg-in-action .ia-device__status--review-pending,
.pg-in-action .ia-device__status--check-pending { color: var(--brand); background: var(--brand-tint); border-color: #BCD0CA; }
.pg-in-action .ia-device__status--evidence-requested,
.pg-in-action .ia-device__status--photo-added { color: var(--missing); background: var(--missing-tint); border-color: #E7C5B3; }
.pg-in-action .ia-device__status--checked,
.pg-in-action .ia-device__status--ready-for-client-review { color: var(--brand); background: #fff; border-color: #fff; }
.pg-in-action .ia-device__status--checked::before,
.pg-in-action .ia-device__status--ready-for-client-review::before {
  width: 0.55rem; height: 0.3rem; border: 0; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  border-radius: 0; transform: rotate(-45deg) translate(1px, -1px);
}
.pg-in-action .ia-device__status-prefix {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.pg-in-action .ia-device__task { padding: 0.75rem 0.9rem 0; font-weight: 600; font-size: 0.9375rem; }
.pg-in-action .ia-device__request {
  margin: 0.7rem 0.9rem 0; padding: 0.6rem 0.75rem; background: var(--missing-tint); border-left: 3px solid var(--accent);
  border-radius: 0.2rem;
}
.pg-in-action .ia-device__request--answered { background: var(--brand-tint); border-left-color: var(--brand); }
.pg-in-action .ia-device__request-meta {
  font: 500 0.6875rem/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink);
}
.pg-in-action .ia-device__request--answered .ia-device__request-meta { color: var(--brand); }
.pg-in-action .ia-device__request-message { margin-top: 0.2rem; font-size: 0.9375rem; font-weight: 500; }

.pg-in-action .ia-device__section { padding: 0.7rem 0.9rem 0; }
.pg-in-action .ia-device__subheading {
  font: 500 0.6875rem/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.pg-in-action .ia-device__note { margin-top: 0.25rem; color: var(--ink-2); }
.pg-in-action .ia-device__photos { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; margin-top: 0.35rem; }
.pg-in-action .ia-device__photo { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.pg-in-action .ia-device__img,
.pg-in-action .ia-device__slot {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.2rem; background: var(--surface-sunk);
  border: 1px solid rgba(23, 33, 38, 0.12);
}
.pg-in-action .ia-device__slot { position: relative; background: #FBF3EE; border: 1.5px dashed var(--accent); }
/* A small camera outline, as on the painted screen (drawn with borders: no image request). */
.pg-in-action .ia-device__slot::before,
.pg-in-action .ia-device__slot::after {
  content: ""; position: absolute; left: 50%; top: 50%; border: 1.5px solid var(--accent-ink); transform: translate(-50%, -50%);
}
.pg-in-action .ia-device__slot::before { width: 1.3rem; height: 0.9rem; border-radius: 0.2rem; }
.pg-in-action .ia-device__slot::after { width: 0.45rem; height: 0.45rem; border-radius: 50%; }
.pg-in-action .ia-device__caption { font-size: 0.75rem; line-height: 1.3; color: var(--ink-2); }
.pg-in-action .ia-device__photo-state { font: 500 0.6875rem/1.3 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-3); }
.pg-in-action .ia-device__photo--outstanding .ia-device__photo-state,
.pg-in-action .ia-device__photo--requested .ia-device__photo-state { color: var(--accent-ink); }
.pg-in-action .ia-device__photo--added .ia-device__photo-state { color: var(--brand); }
.pg-in-action .ia-device__photo--checked .ia-device__photo-state { color: var(--ok); }
.pg-in-action .ia-device__outstanding { list-style: none; margin-top: 0.3rem; }
.pg-in-action .ia-device__item { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--accent-ink); }
.pg-in-action .ia-device__item::before { content: ""; flex: none; width: 0.6rem; height: 0.6rem; border: 2px solid currentColor; border-radius: 50%; }
.pg-in-action .ia-device__item--added { color: var(--brand); }

.pg-in-action .ia-device__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; padding: 0.8rem 0.9rem 0; }
.pg-in-action .ia-device__action {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem;
  padding: 0.55rem 1.2rem; cursor: pointer;
  font: 600 0.9375rem/1.2 var(--font-sans); color: #fff; background: var(--brand);
  border: 0; border-radius: 999px; box-shadow: 0 3px 0 rgba(18, 61, 58, 0.18);
}
.pg-in-action .ia-device__action:hover { background: var(--brand-strong); }
.pg-in-action .ia-device__action:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* Guided playback shows the button being pressed before the story fires it. */
.pg-in-action .ia-device__action.is-pressing {
  background: var(--brand-strong); box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--accent);
}
.pg-in-action .ia-device__action.is-pressing::after {
  content: ""; position: absolute; right: 22%; top: 50%; width: 1.4rem; height: 1.4rem; margin-top: -0.7rem;
  border-radius: 50%; background: rgba(185, 88, 50, 0.45);
}
.pg-in-action .ia-device__action-note { font-size: 0.875rem; font-style: italic; color: var(--ink-2); text-align: right; }

.pg-in-action .ia-device__history { list-style: none; margin-top: 0.3rem; border-top: 1px solid var(--rule); }
.pg-in-action .ia-device__event {
  display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); column-gap: 0.5rem; padding: 0.3rem 0;
  border-bottom: 1px solid var(--rule); font-size: 0.8125rem; line-height: 1.35;
}
.pg-in-action .ia-device__event .ia-device__time { grid-row: 1 / span 2; font: 500 0.75rem/1.5 var(--font-mono); color: var(--ink-3); }
.pg-in-action .ia-device__actor { font-weight: 600; color: var(--ink-2); font-size: 0.75rem; }
.pg-in-action .ia-device__text { grid-column: 2; color: var(--ink); }
.pg-in-action .ia-device__pack { margin: 0.35rem 0 0; border-top: 1px solid var(--rule); }
.pg-in-action .ia-device__pack-item {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid var(--rule);
}
.pg-in-action .ia-device__pack dt { color: var(--ink-3); font-size: 0.8125rem; }
.pg-in-action .ia-device__pack dd { margin: 0; font-weight: 500; }
.pg-in-action .ia-device__pack-note { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--ink-2); }
.pg-in-action .ia-device__empty { padding: 1.5rem 0.9rem; color: var(--ink-3); text-align: center; }
.pg-in-action .ia-device__notice {
  display: flex; align-items: center; gap: 0.45rem; margin-top: 0.8rem; padding: 0.55rem 0.9rem;
  background: var(--bg); border-top: 1px solid var(--rule);
  font: 500 0.6875rem/1.4 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-3);
}
.pg-in-action .ia-device__notice::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--accent); }
.pg-in-action .ia-device > :last-child:not(.ia-device__notice):not(.ia-device__header) { padding-bottom: 0.9rem; }
.pg-in-action .ia-device__label { padding: 0.5rem 0.9rem 0.8rem; font: 500 0.6875rem/1.4 var(--font-mono); color: var(--ink-3); }

/* ---------- Final chapter call to action ---------- */
.pg-in-action .ia-final {
  padding: 1rem 1.1rem 1.1rem; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--accent);
  border-radius: var(--radius-panel);
}
.pg-in-action .ia-final__text { font-size: 1rem; color: var(--ink-2); }
.pg-in-action .ia-final__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.85rem; }
.pg-in-action .ia-final__actions .button { min-height: 2.75rem; }
.pg-in-action .ia-final__actions .ia-icon { width: 1.125rem; height: 1.125rem; }

/* ---------- Illustrated version ---------- */
.pg-in-action .ia-illustrated__label { margin: -1rem 0 0; }
.pg-in-action .ia-stories { list-style: none; display: grid; gap: clamp(2.5rem, 5vw, 4rem); margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.pg-in-action .ia-story__inner {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 4vw, 3.5rem); align-items: start;
  padding-top: 1.5rem; border-top: 1px solid var(--ink);
}
.pg-in-action .ia-story__num {
  font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink);
}
.pg-in-action .ia-story h3 { margin-top: 0.35rem; font-size: var(--step-3); letter-spacing: -0.02em; }
.pg-in-action .ia-story__figure { margin: 1.25rem 0 0; }
.pg-in-action .ia-story__still { width: 100%; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-panel); }
.pg-in-action .ia-story__caption {
  margin-top: 0.9rem; padding-left: 0.9rem; border-left: 2px solid var(--accent);
  font-size: var(--step-1); font-weight: 500; line-height: 1.4; color: var(--ink);
}
.pg-in-action .ia-story__transcript { margin-top: 1rem; max-width: 42rem; color: var(--ink-2); }
.pg-in-action .ia-story__devices { display: grid; gap: 1.5rem; }
.pg-in-action .ia-static-device__label {
  margin-bottom: 0.5rem; font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
.pg-in-action .ia-static-device__note { margin-top: 0.5rem; font-size: var(--step--1); color: var(--ink-3); }
.pg-in-action .ia-illustrated__back { margin-top: clamp(2rem, 4vw, 3rem); font-size: var(--step--1); }

/* ---------- Closing ---------- */
.pg-in-action .ia-closing .actions { margin-top: 1.5rem; }

/* ---------- Responsive ---------- */
/* Below 1180px the side column moves under the stage: caption beside the device panel. */
@media (max-width: 1179px) {
  .pg-in-action .ia-shell { grid-template-columns: minmax(0, 1fr); }
  .pg-in-action .ia-stage__viewport { height: auto; aspect-ratio: 16 / 10; max-height: 80vh; }
  .pg-in-action .ia-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem 1.75rem; align-items: start; }
  .pg-in-action .ia-caption { grid-column: 1; }
  .pg-in-action .ia-device-panel { grid-column: 2; grid-row: 1 / span 3; }
  .pg-in-action .ia-final { grid-column: 1; }
  .pg-in-action .ia-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2rem; }
  .pg-in-action .ia-about__list { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
}
@media (max-width: 960px) {
  .pg-in-action .ia-story__inner { grid-template-columns: minmax(0, 1fr); }
  .pg-in-action .ia-story__devices { max-width: 34rem; }
}

/* Phones: a stable 4:3 stage, full-width controls, caption and device panel below it. */
@media (max-width: 699px) {
  .pg-in-action .ia-stage__viewport { aspect-ratio: 4 / 3; }
  .pg-in-action .ia-stage__overlay { position: static; max-width: none; margin-top: 0.75rem; }
  .pg-in-action .ia-launch { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; padding: 0; background: none; }
  .pg-in-action .ia-notice { box-shadow: none; }
  .pg-in-action .ia-panel,
  .pg-in-action .ia-about { display: flex; flex-direction: column; }
  .pg-in-action .ia-about__list { margin-top: 0.9rem; }

  .pg-in-action .ia-chapter { justify-content: center; align-items: center; min-height: 2.75rem; padding: 0.4rem 0.2rem; }
  .pg-in-action .ia-chapter__num { font-size: 0.875rem; line-height: 1; }
  .pg-in-action .ia-chapter__title {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .pg-in-action .ia-transport { gap: 0.75rem; }
  .pg-in-action .ia-progress { flex-basis: 100%; }
  .pg-in-action .ia-transport__buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .pg-in-action .ia-btn { padding: 0.45rem 0.35rem; font-size: 0.875rem; }
  .pg-in-action .ia-btn--primary { min-width: 0; }
  .pg-in-action .ia-toggles { width: 100%; }
  .pg-in-action .ia-toggle { flex: 1 1 auto; }
}
@media (max-width: 380px) {
  .pg-in-action .ia-btn { flex-direction: column; gap: 0.15rem; font-size: 0.8125rem; }
}

@media print {
  .pg-in-action .ia-experience { display: none; }
}

/* ---------- Entry tile (homepage and Work & examples) ---------- */
.ia-tile {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  margin-top: clamp(2rem, 4vw, 3rem); overflow: hidden;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel);
}
.ia-tile__img { width: 100%; height: 100%; min-height: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--bg); }
.ia-tile__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.7rem; padding: clamp(1.25rem, 3vw, 2.25rem); }
.ia-tile__kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem;
  font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.04em; color: var(--ink-3);
}
.ia-tile__title { font-size: var(--step-3); letter-spacing: -0.02em; }
.ia-tile__text { color: var(--ink-2); font-size: 1.0625rem; max-width: 30rem; }
/* One link, stretched over the whole tile. */
.ia-tile__link::after { content: ""; position: absolute; inset: 0; }
.ia-tile:hover .ia-tile__link { color: var(--brand); text-decoration-thickness: 2px; }
.ia-tile:hover .ia-tile__link svg { transform: translateX(3px); }
@media (max-width: 760px) {
  .ia-tile { grid-template-columns: minmax(0, 1fr); }
  .ia-tile__img { height: auto; }
}

/* Illustrated version: each chapter's static screens sit in a disclosure (works without JS). */
.pg-in-action .ia-story__screens > summary {
  display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer;
  color: var(--brand); font-weight: 500; text-decoration: underline; text-underline-offset: 0.3em;
}
.pg-in-action .ia-story__screens[open] > summary { margin-bottom: 1rem; }

/* ---------- Shared walkthrough template and generic panels (runtime/kit/panel-html.js) ---------- */
.pg-in-action .ia-page-note { margin-top: 0.75rem; max-width: 46rem; font-size: var(--step--1); color: var(--ink-2); }
.pg-in-action .ia-others { margin-top: 1.5rem; }
.pg-in-action .ia-others__title { font: 500 var(--step--2)/1.6 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.pg-in-action .ia-others ul { list-style: none; margin-top: 0.4rem; display: grid; gap: 0.25rem; }
.pg-in-action .ia-device__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: 0.4rem; margin-top: 0.35rem; }
.pg-in-action .ia-device__stat { display: flex; flex-direction: column-reverse; padding: 0.45rem 0.55rem; background: var(--bg); border-radius: 0.25rem; }
.pg-in-action .ia-device__stat dd { font: 500 1.25rem/1.2 var(--font-mono); color: var(--ink); }
.pg-in-action .ia-device__stat dt { font-size: 0.75rem; color: var(--ink-2); }
.pg-in-action .ia-device__list .ia-device__item { justify-content: flex-start; font-weight: 500; color: var(--ink); padding: 0.15rem 0; }
.pg-in-action .ia-device__item-meta { margin-left: auto; font: 500 0.6875rem/1.4 var(--font-mono); color: var(--ink-3); }
.pg-in-action .ia-device__item--ok::before { border-radius: 0; width: 0.6rem; height: 0.32rem; border-width: 0 0 2px 2px; border-color: var(--ok); transform: rotate(-45deg) translate(1px, -2px); }
.pg-in-action .ia-device__item--open::before,
.pg-in-action .ia-device__item--pending::before { border-color: var(--brand); }
.pg-in-action .ia-device__item--open::before { background: var(--brand); }
.pg-in-action .ia-device__item--due::before { border-color: var(--ink-3); border-style: dotted; }
.pg-in-action .ia-device__item--overdue { color: var(--missing); font-weight: 600; }
.pg-in-action .ia-device__item--overdue::before { border-color: var(--missing); }
.pg-in-action .ia-device__status--ok { color: var(--ok); background: var(--ok-tint); border-color: #C3D9C9; }
.pg-in-action .ia-device__status--open,
.pg-in-action .ia-device__status--pending { color: var(--brand); background: var(--brand-tint); border-color: #BCD0CA; }
.pg-in-action .ia-device__status--due { color: var(--ink-2); }
.pg-in-action .ia-device__status--overdue { color: var(--missing); background: var(--missing-tint); border-color: #E7C5B3; }
.pg-in-action .ia-device__status--ready { color: var(--brand); background: #fff; border-color: #fff; }
.pg-in-action .ia-device__slot--ok { background: var(--surface-sunk); border: 1px solid rgba(23, 33, 38, 0.12); }
.pg-in-action .ia-device__slot--ok::before,
.pg-in-action .ia-device__slot--ok::after { border-color: var(--ink-3); }

/* Walkthrough cards (/work): a grid of compact tiles, image on top. */
.ia-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; list-style: none; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.ia-tiles .ia-tile--card { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.ia-tiles .ia-tile--card .ia-tile__img { height: auto; }
.ia-tiles .ia-tile--card .ia-tile__body { justify-content: flex-start; padding: 1.1rem 1.25rem 1.3rem; gap: 0.5rem; }
.ia-tiles .ia-tile--card .ia-tile__title { font-size: var(--step-2); }
.ia-tiles .ia-tile--card .ia-tile__text { font-size: 1rem; }

/* src/styles/pages/solutions.css */
/* Solutions overview (src/pages/solutions.mjs, /solutions).
   Every selector is scoped to .pg-solutions. Tokens only, no new colours. */

/* ---------- Hero ---------- */
.pg-solutions .pg-solutions__hero h1 { max-width: 13ch; }
.pg-solutions .pg-solutions__route { margin-top: clamp(2rem, 4vw, 2.75rem); }

.pg-solutions .pg-solutions__index ol { list-style: none; margin-top: 0.85rem; border-top: 1px solid var(--ink); }
.pg-solutions .pg-solutions__index li { border-bottom: 1px solid var(--rule); }
.pg-solutions .pg-solutions__index a {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: start;
  min-height: 2.75rem; padding: 1rem 0; color: var(--ink); text-decoration: none;
}
.pg-solutions .pg-solutions__index-num { font: 500 var(--step--2)/1.9 var(--font-mono); color: var(--accent-ink); }
.pg-solutions .pg-solutions__index strong { display: block; font-size: 1.0625rem; line-height: 1.35; }
.pg-solutions .pg-solutions__index-text { display: block; margin-top: 0.25rem; font-size: var(--step--1); line-height: 1.45; color: var(--ink-3); }
.pg-solutions .pg-solutions__index-arrow { margin-top: 0.15rem; color: var(--ink-3); transform: rotate(90deg); transition: transform 0.2s var(--ease); }
.pg-solutions .pg-solutions__index a:hover strong { text-decoration: underline; text-underline-offset: 0.25em; }
.pg-solutions .pg-solutions__index a:hover .pg-solutions__index-arrow { color: var(--brand); transform: rotate(90deg) translateX(3px); }

/* ---------- Process sections: numbered head with a rule ---------- */
.pg-solutions .pg-solutions__head {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1.25rem 3rem; align-items: start;
  padding-top: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--ink);
}
.pg-solutions .pg-solutions__num {
  align-self: start; font: 500 var(--step-4)/0.9 var(--font-mono); letter-spacing: -0.04em; color: var(--accent);
}
.pg-solutions .pg-solutions__head h2 { max-width: 18ch; }
.pg-solutions .pg-solutions__intro { max-width: 32rem; padding-top: 0.35rem; color: var(--ink-2); }
@media (max-width: 1000px) {
  .pg-solutions .pg-solutions__head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1rem; }
  .pg-solutions .pg-solutions__num { font-size: var(--step-3); }
}

/* Body: text column beside an illustration; section 02 flips on wide screens */
.pg-solutions .pg-solutions__body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 3rem clamp(2.5rem, 6vw, 6rem); align-items: start;
}
.pg-solutions .pg-solutions__body--flip { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); }
.pg-solutions .pg-solutions__body--flip > .pg-solutions__figure { order: -1; }
@media (max-width: 1000px) {
  .pg-solutions .pg-solutions__body,
  .pg-solutions .pg-solutions__body--flip { grid-template-columns: minmax(0, 1fr); }
  .pg-solutions .pg-solutions__body--flip > .pg-solutions__figure { order: 0; }
}

/* What goes wrong / what better looks like */
.pg-solutions .pg-solutions__contrast > div + div { margin-top: 2.5rem; }
.pg-solutions .pg-solutions__subhead { font-size: var(--step-1); margin-bottom: 0.9rem; }
.pg-solutions .pg-solutions__list { list-style: none; border-top: 1px solid var(--rule); }
.pg-solutions .pg-solutions__list li {
  position: relative; padding: 0.8rem 0 0.8rem 1.9rem; border-bottom: 1px solid var(--rule);
  font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2);
}
.pg-solutions .pg-solutions__list.check-list li + li { margin-top: 0; }
.pg-solutions .pg-solutions__list.check-list li::before { top: calc(0.8rem + 0.5em); }
.pg-solutions .pg-solutions__list--wrong li::before {
  content: ""; position: absolute; left: 0.1rem; top: calc(0.8rem + 0.78em); width: 0.85rem; height: 1.5px; background: var(--accent);
}

/* Illustration on a drafting sheet */
.pg-solutions .pg-solutions__figure { margin: 0; width: 100%; max-width: 34rem; }
.pg-solutions .pg-solutions__body:not(.pg-solutions__body--flip) > .pg-solutions__figure { justify-self: end; }
.pg-solutions .pg-solutions__sheet {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background-color: var(--drawing);
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 48px 48px;
  border: 1px solid var(--rule);
}
.pg-solutions .pg-solutions__frag + .pg-solutions__frag { margin-top: 1.75rem; }
.pg-solutions .pg-solutions__frag--offset { margin-left: clamp(0rem, 3vw, 2.5rem); }
.pg-solutions .pg-solutions__frag .frag { max-width: 26rem; }
.pg-solutions .pg-solutions__frag-caption { margin-top: 0.75rem; max-width: 26rem; font-size: var(--step--1); line-height: 1.5; color: var(--ink-2); }
.pg-solutions .pg-solutions__frag-caption strong { color: var(--ink); }
.pg-solutions .pg-solutions__figure .caption { margin-top: 1rem; }
.pg-solutions .pg-solutions__sys { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
@media (max-width: 1000px) {
  .pg-solutions .pg-solutions__figure,
  .pg-solutions .pg-solutions__body:not(.pg-solutions__body--flip) > .pg-solutions__figure { justify-self: start; }
}
@media (max-width: 560px) {
  .pg-solutions .pg-solutions__frag--offset { margin-left: 0; }
}

/* Approaches block under each process */
.pg-solutions .pg-solutions__approach { margin-top: clamp(3rem, 6vw, 4.5rem); }
.pg-solutions .pg-solutions__approach-title { font-size: var(--step-2); margin-bottom: 1.25rem; }
.pg-solutions .pg-solutions__approach-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 2rem; margin-bottom: 1.5rem; }
.pg-solutions .pg-solutions__approach-head .pg-solutions__approach-title { margin-bottom: 0; }
.pg-solutions .pg-solutions__approach-head p { color: var(--ink-2); max-width: 32rem; }

.pg-solutions .pg-solutions__close {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 3rem;
  margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
}
.pg-solutions .pg-solutions__close > p { flex: 1 1 28rem; max-width: 44rem; font-size: 1rem; color: var(--ink-2); }

/* 01: four options in a ruled row */
.pg-solutions .pg-solutions__options { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.pg-solutions .pg-solutions__options li { padding: 1.25rem 1.5rem 0.5rem; border-left: 1px solid var(--rule); }
.pg-solutions .pg-solutions__options li:first-child { padding-left: 0; border-left: 0; }
.pg-solutions .pg-solutions__options strong { display: block; font-size: 1.125rem; line-height: 1.3; }
.pg-solutions .pg-solutions__options p { margin-top: 0.45rem; font-size: 1rem; color: var(--ink-2); }
@media (max-width: 1000px) {
  .pg-solutions .pg-solutions__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-solutions .pg-solutions__options li { padding: 1.25rem 0 1.25rem 1.5rem; border-bottom: 1px solid var(--rule); }
  .pg-solutions .pg-solutions__options li:nth-child(odd) { padding-left: 0; padding-right: 1.5rem; border-left: 0; }
}
@media (max-width: 600px) {
  .pg-solutions .pg-solutions__options { grid-template-columns: minmax(0, 1fr); }
  .pg-solutions .pg-solutions__options li,
  .pg-solutions .pg-solutions__options li:nth-child(odd) { padding: 1.1rem 0; border-left: 0; }
}

/* 02: definitions beside the limits notice */
.pg-solutions .pg-solutions__approach--split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.5rem clamp(2.5rem, 5vw, 5rem); align-items: start; }
.pg-solutions .pg-solutions__defs { list-style: none; border-top: 1px solid var(--ink); }
.pg-solutions .pg-solutions__defs li { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 0.3rem 2rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.pg-solutions .pg-solutions__defs strong { font-size: 1.0625rem; line-height: 1.45; }
.pg-solutions .pg-solutions__defs span { font-size: 1rem; color: var(--ink-2); }
.pg-solutions .pg-solutions__limits { padding-top: 3.1rem; }
.pg-solutions .pg-solutions__limits .notice { padding: 1.25rem 1.5rem; }
.pg-solutions .pg-solutions__limits .notice h3 { font-size: var(--step-1); }
.pg-solutions .pg-solutions__limits .notice p { font-size: 1rem; color: var(--ink-2); }
.pg-solutions .pg-solutions__limits .notice > * + * { margin-top: 0.75rem; }
.pg-solutions .pg-solutions__limits .actions { margin-top: 1.75rem; }
@media (max-width: 1000px) {
  .pg-solutions .pg-solutions__approach--split { grid-template-columns: minmax(0, 1fr); }
  .pg-solutions .pg-solutions__limits { padding-top: 0; }
}
@media (max-width: 600px) {
  .pg-solutions .pg-solutions__defs li { grid-template-columns: minmax(0, 1fr); }
}

/* 03: ordered ladder, joined like the route motif */
.pg-solutions .pg-solutions__ladder { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1.75rem; counter-reset: pg-ladder; }
.pg-solutions .pg-solutions__ladder li { position: relative; padding-top: 3rem; counter-increment: pg-ladder; }
.pg-solutions .pg-solutions__ladder li::before {
  content: counter(pg-ladder); position: absolute; top: 0; left: 0; z-index: 1;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border: 1.5px solid var(--brand); border-radius: 50%; background: var(--surface);
  font: 500 0.875rem/1 var(--font-mono); color: var(--brand);
}
.pg-solutions .pg-solutions__ladder li::after {
  content: ""; position: absolute; top: calc(1.125rem - 0.75px); left: 2.75rem; right: -1.25rem; height: 1.5px; background: var(--brand);
}
.pg-solutions .pg-solutions__ladder li:last-child::after { display: none; }
.pg-solutions .pg-solutions__ladder .label { display: block; color: var(--accent-ink); }
.pg-solutions .pg-solutions__ladder strong { display: block; margin-top: 0.35rem; font-size: 1.125rem; line-height: 1.3; }
.pg-solutions .pg-solutions__ladder p { margin-top: 0.45rem; font-size: 1rem; color: var(--ink-2); }
@media (max-width: 1000px) {
  .pg-solutions .pg-solutions__ladder { grid-template-columns: minmax(0, 1fr); }
  .pg-solutions .pg-solutions__ladder li { padding: 0.35rem 0 1.75rem 3.5rem; }
  .pg-solutions .pg-solutions__ladder li:last-child { padding-bottom: 0; }
  .pg-solutions .pg-solutions__ladder li::after { top: 2.5rem; bottom: 0.25rem; left: calc(1.125rem - 0.75px); right: auto; width: 1.5px; height: auto; }
}

/* ---------- Engagement (dark band): vertical sequence ---------- */
.pg-solutions .pg-solutions__steps { list-style: none; }
.pg-solutions .pg-solutions__step { position: relative; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0 1.75rem; padding-bottom: 2.5rem; }
.pg-solutions .pg-solutions__step:last-child { padding-bottom: 0; }
.pg-solutions .pg-solutions__step:not(:last-child)::before {
  content: ""; position: absolute; left: calc(1.625rem - 0.75px); top: 3.25rem; bottom: 0; width: 1.5px; background: var(--accent-on-dark); opacity: 0.55;
}
.pg-solutions .pg-solutions__marker {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem;
  border: 1.5px solid var(--accent-on-dark); border-radius: 50%; color: var(--accent-on-dark);
}
.pg-solutions .pg-solutions__marker svg { width: 1.4rem; height: 1.4rem; }
.pg-solutions .pg-solutions__step-body {
  display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); gap: 0.75rem 3rem;
  padding-top: 0.9rem; border-top: 1px solid var(--rule-on-dark);
}
.pg-solutions .pg-solutions__step-label { display: block; font: 500 var(--step--2)/1.5 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-on-dark); }
.pg-solutions .pg-solutions__step h3 { margin-top: 0.4rem; font-size: 1.375rem; }
.pg-solutions .pg-solutions__step-text { max-width: 42rem; }
.pg-solutions .pg-solutions__step-text p { font-size: 1.0625rem; }
.pg-solutions .pg-solutions__step-text p + p { margin-top: 0.75rem; }
@media (max-width: 860px) {
  .pg-solutions .pg-solutions__step { grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0 1.1rem; }
  .pg-solutions .pg-solutions__marker { width: 2.75rem; height: 2.75rem; }
  .pg-solutions .pg-solutions__marker svg { width: 1.2rem; height: 1.2rem; }
  .pg-solutions .pg-solutions__step:not(:last-child)::before { left: calc(1.375rem - 0.75px); top: 2.75rem; }
  .pg-solutions .pg-solutions__step-body { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Early advice: a modest boxed aside ---------- */
.pg-solutions .pg-solutions__advice { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.pg-solutions .pg-solutions__advice-box {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2.5rem, 5vw, 5rem);
  padding: clamp(1.5rem, 4vw, 3rem); background: var(--surface); border: 1px solid var(--rule); border-top: 2px solid var(--brand);
}
.pg-solutions .pg-solutions__advice h2 { font-size: var(--step-3); max-width: 20ch; }
.pg-solutions .pg-solutions__advice-intro p { margin-top: 1rem; color: var(--ink-2); }
.pg-solutions .pg-solutions__advice-intro .link-arrow { margin-top: 1rem; }
.pg-solutions .pg-solutions__advice h3 { font-size: var(--step-1); margin-bottom: 1rem; }
.pg-solutions .pg-solutions__advice .check-list li { font-size: 1.0625rem; color: var(--ink-2); }
.pg-solutions .pg-solutions__advice .notice { margin-top: 1.75rem; background: var(--bg); font-size: var(--step--1); color: var(--ink-2); }
@media (max-width: 860px) {
  .pg-solutions .pg-solutions__advice-box { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- FAQ ---------- */
.pg-solutions .pg-solutions__faq-grid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr); gap: 2.5rem clamp(2.5rem, 5vw, 5rem); align-items: start; }
.pg-solutions .pg-solutions__faq-head p { margin-top: 1.25rem; max-width: 24rem; color: var(--ink-2); }
.pg-solutions .pg-solutions__faq-head .link-arrow { margin-top: 1rem; }
@media (min-width: 1001px) {
  .pg-solutions .pg-solutions__faq-head { position: sticky; top: 2rem; }
}
@media (max-width: 1000px) {
  .pg-solutions .pg-solutions__faq-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Local fixes ---------- */
/* "Usually felt by" label sits on its own line above the roles. */
.pg-solutions .pg-solutions__felt .label { display: block; margin-bottom: 0.3rem; }
.pg-solutions .pg-solutions__felt > span:last-child { display: block; }

/* The options row is followed by a ruled close, so its last row needs no rule of its own. */
@media (max-width: 1000px) {
  .pg-solutions .pg-solutions__options li:nth-last-child(-n+2):nth-child(odd),
  .pg-solutions .pg-solutions__options li:last-child { border-bottom: 0; }
}
@media (max-width: 600px) {
  .pg-solutions .pg-solutions__options li:nth-last-child(-n+2):nth-child(odd) { border-bottom: 1px solid var(--rule); }
  .pg-solutions .pg-solutions__options li:last-child { border-bottom: 0; }
}

/* src/styles/pages/utilities.css */
/* Utilities sector page (/sectors/utilities). Every selector is scoped to .pg-utilities. */

/* ---------- Hero ---------- */
.pg-utilities .pg-utilities__support { margin-top: 1rem; max-width: 36rem; color: var(--ink-2); font-size: 1.0625rem; }
.pg-utilities .page-hero__aside .label { margin-bottom: 0.75rem; }
.pg-utilities .pg-utilities__for { margin-top: 0; }
.pg-utilities .pg-utilities__for li { font-size: 1rem; line-height: 1.45; }

/* ---------- 01: completion evidence ---------- */
.pg-utilities .pg-utilities__evidence { align-items: start; }
.pg-utilities .pg-utilities__evidence-copy > p:not(.label) { color: var(--ink-2); max-width: 38rem; }
.pg-utilities .pg-utilities__list-label { margin-top: 2.25rem; margin-bottom: 0.9rem; }
.pg-utilities .pg-utilities__figure { margin: 0; position: sticky; top: 1.5rem; }
.pg-utilities .pg-utilities__figure .caption { margin-top: 1rem; }
@media (max-width: 860px) {
  .pg-utilities .pg-utilities__figure { position: static; max-width: 30rem; }
}

/* ---------- 02: job-type matrix ---------- */
.pg-utilities .pg-utilities__matrix {
  width: 100%; border-collapse: collapse; border-top: 1px solid var(--ink);
  font-size: var(--step--1); line-height: 1.45;
}
.pg-utilities .pg-utilities__matrix thead th {
  padding: 0.95rem 1.25rem 0.95rem 0; text-align: left; vertical-align: bottom;
  font: 500 var(--step--2)/1.35 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--rule-strong);
}
.pg-utilities .pg-utilities__matrix tbody th,
.pg-utilities .pg-utilities__matrix td {
  padding: 1.35rem 1.25rem 1.4rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule);
}
.pg-utilities .pg-utilities__matrix tbody th { width: 15rem; padding-right: 2rem; font-weight: 400; }
.pg-utilities .pg-utilities__matrix td:last-child { padding-right: 0; }
.pg-utilities .pg-utilities__job-num { display: block; font: 500 var(--step--2)/1.4 var(--font-mono); color: var(--accent-ink); letter-spacing: 0.08em; }
.pg-utilities .pg-utilities__job-name { display: block; margin-top: 0.35rem; font-size: var(--step-1); font-weight: 600; line-height: 1.25; letter-spacing: -0.012em; color: var(--ink); }
.pg-utilities .pg-utilities__job-note { display: block; margin-top: 0.3rem; color: var(--ink-3); }
.pg-utilities .pg-utilities__matrix ul { list-style: none; }
.pg-utilities .pg-utilities__matrix li { position: relative; padding-left: 1rem; color: var(--ink-2); }
.pg-utilities .pg-utilities__matrix li + li { margin-top: 0.45rem; }
.pg-utilities .pg-utilities__matrix li::before {
  content: ""; position: absolute; left: 0; top: 0.72em; width: 0.45rem; height: 1px; background: var(--accent);
}
.pg-utilities .pg-utilities__cell-label { display: none; }
.pg-utilities .pg-utilities__matrix-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; margin-top: 1.5rem;
}
.pg-utilities .pg-utilities__matrix-foot .caption { margin-top: 0; max-width: 46rem; }

@media (max-width: 960px) {
  .pg-utilities .pg-utilities__matrix,
  .pg-utilities .pg-utilities__matrix tbody,
  .pg-utilities .pg-utilities__matrix tr,
  .pg-utilities .pg-utilities__matrix th,
  .pg-utilities .pg-utilities__matrix td { display: block; width: auto; }
  /* Column headers stay available to assistive technology, but each cell shows its own label. */
  .pg-utilities .pg-utilities__matrix thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .pg-utilities .pg-utilities__matrix tbody tr { padding: 1.5rem 0 0.75rem; border-bottom: 1px solid var(--rule-strong); }
  .pg-utilities .pg-utilities__matrix tbody th { width: auto; padding: 0 0 0.9rem; border-bottom: 0; }
  .pg-utilities .pg-utilities__matrix td {
    display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.4rem 1.5rem;
    padding: 0.85rem 0; border-bottom: 0; border-top: 1px dashed var(--rule);
  }
  .pg-utilities .pg-utilities__cell-label {
    display: block; font: 500 var(--step--2)/1.6 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
  }
  .pg-utilities .pg-utilities__job-num { display: inline; margin-right: 0.6rem; }
  .pg-utilities .pg-utilities__job-name { display: inline; margin-top: 0; }
}
@media (max-width: 560px) {
  .pg-utilities .pg-utilities__matrix td { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; padding: 0.7rem 0; }
  .pg-utilities .pg-utilities__matrix li + li { margin-top: 0.3rem; }
}

/* ---------- 03: re-keying chain ---------- */
.pg-utilities .pg-utilities__chain {
  list-style: none; display: grid; align-items: stretch; gap: 0.5rem;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
}
.pg-utilities .pg-utilities__node {
  display: flex; flex-direction: column; gap: 0.55rem; padding: 1.35rem 1.3rem 1.25rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
}
.pg-utilities .pg-utilities__node--first { border-top: 2px solid var(--brand); }
.pg-utilities .pg-utilities__node:not(.pg-utilities__node--first) { border-top: 2px solid var(--accent); }
.pg-utilities .pg-utilities__where { font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.pg-utilities .pg-utilities__node h3, .pg-utilities .pg-utilities__node h4 { font-size: 1.1875rem; }
.pg-utilities .pg-utilities__entry { margin-top: auto; padding-top: 0.75rem; border-top: 1px dashed var(--rule); font-size: var(--step--1); color: var(--ink-2); line-height: 1.45; }
.pg-utilities .pg-utilities__entry > span:last-child { display: block; margin-top: 0.45rem; }
.pg-utilities .pg-utilities__flag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font: 500 0.75rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink);
}
.pg-utilities .pg-utilities__flag--first { color: var(--brand); }
.pg-utilities .pg-utilities__flag svg { flex: none; }
.pg-utilities .pg-utilities__hop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; padding-inline: 0.15rem;
  color: var(--ink-3); font: 500 0.6875rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.pg-utilities .pg-utilities__hop svg { color: var(--accent); }
.pg-utilities .pg-utilities__rekey-detail { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--rule); }
.pg-utilities .pg-utilities__rekey-detail h3 { font-size: var(--step-2); }
.pg-utilities .pg-utilities__rekey-detail h3 + p { margin-top: 0.75rem; color: var(--ink-2); }
.pg-utilities .pg-utilities__rekey-detail .check-list { margin-top: 1.25rem; }
.pg-utilities .pg-utilities__rekey-detail .check-list li { font-size: 1.0625rem; color: var(--ink-2); }
.pg-utilities .pg-utilities__rekey-aside > * + * { margin-top: 1.25rem; }
.pg-utilities .pg-utilities__rekey-aside > p { color: var(--ink-2); }
.pg-utilities .pg-utilities__rekey-aside .notice p { font-size: 1.0625rem; }
.pg-utilities .pg-utilities__rekey-aside .notice p:not(:first-child) { color: var(--ink-2); }

/* Side by side, the cards share row tracks (subgrid) so each dashed divider and
   flag sits on the same line whatever the length of the text above or below it. */
@media (min-width: 1061px) {
  @supports (grid-template-rows: subgrid) {
    .pg-utilities .pg-utilities__chain { grid-template-rows: auto auto auto; row-gap: 0; }
    .pg-utilities .pg-utilities__node { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0.55rem; }
    .pg-utilities .pg-utilities__hop { grid-row: span 3; }
    .pg-utilities .pg-utilities__entry { margin-top: 0.2rem; }
  }
}
@media (max-width: 1060px) {
  .pg-utilities .pg-utilities__chain { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 34rem; }
  .pg-utilities .pg-utilities__hop { flex-direction: row-reverse; justify-content: flex-end; gap: 0.6rem; padding: 0.55rem 0 0.55rem 1.1rem; }
  .pg-utilities .pg-utilities__hop svg { transform: rotate(90deg); }
}

/* ---------- 04: teams ledger ---------- */
.pg-utilities .pg-utilities__teams { list-style: none; border-top: 1px solid var(--ink); }
.pg-utilities .pg-utilities__team {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.25rem 2.5rem;
  padding: 2rem 0; border-bottom: 1px solid var(--rule);
}
.pg-utilities .pg-utilities__team-icon { width: 2.25rem; height: 2.25rem; color: var(--brand); margin-bottom: 0.9rem; }
.pg-utilities .pg-utilities__team-role h3 { font-size: var(--step-2); }
.pg-utilities .pg-utilities__question {
  margin-top: 0.75rem; padding-left: 0.85rem; border-left: 2px solid var(--accent);
  font-size: 1.0625rem; line-height: 1.45; color: var(--ink-2);
}
.pg-utilities .pg-utilities__team .label { margin-bottom: 0.5rem; }
.pg-utilities .pg-utilities__team-today { padding-top: calc(1.1rem + 1px); } /* lines up with the label inside the aim panel */
.pg-utilities .pg-utilities__team-today p:not(.label) { color: var(--ink-2); font-size: 1.0625rem; }
.pg-utilities .pg-utilities__team-aim {
  padding: 1.1rem 1.25rem 1.2rem; background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--brand);
}
.pg-utilities .pg-utilities__team-aim .label { color: var(--brand); }
.pg-utilities .pg-utilities__team-aim p:not(.label) { font-size: 1.0625rem; }
@media (max-width: 1000px) {
  .pg-utilities .pg-utilities__team { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pg-utilities .pg-utilities__team-role { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: center; }
  .pg-utilities .pg-utilities__team-icon { margin-bottom: 0; }
  .pg-utilities .pg-utilities__question { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .pg-utilities .pg-utilities__team { grid-template-columns: minmax(0, 1fr); }
  .pg-utilities .pg-utilities__team-today { padding-top: 0; }
}

/* ---------- 05: where to start (dark band) ---------- */
.pg-utilities .pg-utilities__start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 5rem; }
.pg-utilities .pg-utilities__start-head {
  margin-bottom: 1rem; font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-on-dark);
}
.pg-utilities .pg-utilities__entries { list-style: none; border-top: 1px solid var(--rule-on-dark); }
.pg-utilities .pg-utilities__entries li { padding: 1.1rem 0 0.6rem; border-bottom: 1px solid var(--rule-on-dark); }
.pg-utilities .pg-utilities__entries p { color: var(--on-dark); font-size: 1.125rem; line-height: 1.45; }
.pg-utilities .pg-utilities__entries .link-arrow { margin-top: 0.15rem; font-size: 1rem; color: var(--on-dark-2); }
.pg-utilities .pg-utilities__entries .link-arrow:hover { color: var(--on-dark); }
.pg-utilities .pg-utilities__steps { list-style: none; counter-reset: pgu-step; border-top: 1px solid var(--rule-on-dark); }
.pg-utilities .pg-utilities__steps li {
  counter-increment: pgu-step; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 0.75rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--rule-on-dark);
}
.pg-utilities .pg-utilities__steps li::before {
  content: counter(pgu-step, decimal-leading-zero); grid-row: 1 / span 2;
  font: 500 var(--step--2)/1.9 var(--font-mono); color: var(--accent-on-dark);
}
.pg-utilities .pg-utilities__steps strong { display: block; color: var(--on-dark); font-size: 1.125rem; }
.pg-utilities .pg-utilities__steps span { display: block; margin-top: 0.25rem; color: var(--on-dark-2); font-size: 1rem; }
@media (max-width: 900px) {
  .pg-utilities .pg-utilities__start { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Cross-link to construction ---------- */
.pg-utilities .pg-utilities__cross { padding-block: clamp(3rem, 6vw, 4.5rem); }
.pg-utilities .pg-utilities__cross-inner {
  display: grid; grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.25rem 3rem; align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel);
}
.pg-utilities .pg-utilities__cross-icon { width: 2.75rem; height: 2.75rem; color: var(--brand); }
.pg-utilities .pg-utilities__cross .eyebrow { margin-bottom: 0.75rem; }
.pg-utilities .pg-utilities__cross h2 { font-size: var(--step-3); max-width: 22ch; }
.pg-utilities .pg-utilities__cross-body p { color: var(--ink-2); max-width: 32rem; font-size: 1.0625rem; }
.pg-utilities .pg-utilities__cross-body .link-arrow { margin-top: 0.5rem; }
@media (max-width: 860px) {
  .pg-utilities .pg-utilities__cross-inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 420px) {
  .pg-utilities .pg-utilities__cross-inner { padding: 1.25rem 1rem; }
}



.pg-utilities .pg-utilities__notice-title { font-size: var(--step-1); }
.pg-utilities .pg-utilities__then { margin: 2.5rem 0 1.25rem; font-size: var(--step-2); }

/* src/styles/pages/work.css */
/* Work & examples page (/work). Every selector is scoped to .pg-work. */

/* ---------- Hero ---------- */
.pg-work .page-hero__aside { display: grid; gap: 1.5rem; }
.pg-work .work-note p:not(.label) { color: var(--ink-2); font-size: 1rem; }
.pg-work .work-contents .label { margin-bottom: 0.6rem; }
.pg-work .work-contents ol { list-style: none; border-top: 1px solid var(--ink); }
.pg-work .work-contents a {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; min-height: 2.75rem;
  padding: 0.45rem 0; border-bottom: 1px solid var(--rule);
  color: var(--ink); font-size: 1rem; font-weight: 500; text-decoration: none;
}
.pg-work .work-contents a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.pg-work .work-contents a span { font: 500 var(--step--2)/1 var(--font-mono); color: var(--accent-ink); }

/* ---------- Demonstration frame ---------- */
.pg-work .demo {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel);
  overflow: hidden;
}
.pg-work .demo__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 2rem;
  padding: 0.9rem clamp(1rem, 3vw, 1.75rem); background: var(--bg); border-bottom: 1px solid var(--rule);
}
.pg-work .demo__head > p { margin: 0; }
.pg-work .demo__job { font-weight: 600; font-size: 1rem; line-height: 1.4; }
.pg-work .demo__job-id { margin-right: 0.35rem; font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.04em; }
.pg-work .demo__job span + span { color: var(--ink-3); font-weight: 400; }
.pg-work .demo__notice { display: flex; align-items: center; gap: 0.6rem; font-size: var(--step--1); line-height: 1.45; color: var(--ink-2); }

/* Tabs (only shown once demo.js has run) */
.pg-work .demo__tabs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--bg); border-bottom: 1px solid var(--rule);
}
.pg-work .demo__tab {
  position: relative; display: flex; align-items: center; gap: 0.75rem; min-height: 4rem;
  padding: 0.85rem clamp(0.75rem, 2vw, 1.5rem);
  font: 500 1rem/1.25 var(--font-sans); color: var(--ink-2); text-align: left;
  background: transparent; border: 0; border-left: 1px solid var(--rule); border-radius: 0; cursor: pointer;
}
.pg-work .demo__tab:first-child { border-left: 0; }
.pg-work .demo__tab-num {
  flex: none; display: grid; place-items: center; width: 2rem; height: 2rem;
  border: 1.5px solid var(--brand); border-radius: 50%; background: var(--surface);
  font: 500 0.8125rem/1 var(--font-mono); color: var(--brand);
}
.pg-work .demo__tab-label { min-width: 0; }
.pg-work .demo__tab:hover .demo__tab-label { text-decoration: underline; text-underline-offset: 0.3em; }
.pg-work .demo__tab[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 600; }
.pg-work .demo__tab[aria-selected="true"]::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent);
}
.pg-work .demo__tab[aria-selected="true"] .demo__tab-num { background: var(--brand); color: var(--surface); }
.pg-work .demo__tab:focus-visible { outline-offset: -4px; }
@media (max-width: 760px) {
  .pg-work .demo__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-work .demo__tab:nth-child(odd) { border-left: 0; }
  .pg-work .demo__tab:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .pg-work .demo__tab { min-height: 3.5rem; font-size: 0.9375rem; }
}

/* Stages: stacked without JavaScript, one tab panel at a time with it */
.pg-work .demo__stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.pg-work .demo__stage + .demo__stage { border-top: 1px solid var(--rule); }
.pg-work .demo--tabs .demo__stage + .demo__stage { border-top: 0; }
.pg-work .demo__stage:focus-visible { outline-offset: -4px; }

.pg-work .demo__copy { padding: clamp(1.5rem, 3.5vw, 2.75rem) clamp(1.25rem, 3vw, 2.5rem); }
.pg-work .demo__step {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1rem;
  font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.pg-work .demo__step span:first-child { color: var(--accent-ink); }
.pg-work .demo__copy h3 { margin-top: 0.75rem; font-size: var(--step-3); letter-spacing: -0.02em; }
.pg-work .demo__lede { margin-top: 0.9rem; color: var(--ink-2); }
.pg-work .demo__points { margin-top: 1.25rem; font-size: 1rem; }
.pg-work .demo__aside {
  margin-top: 1.25rem; padding: 0.7rem 0.9rem; border-left: 2px solid var(--accent); background: var(--bg);
  font-size: var(--step--1); line-height: 1.5; color: var(--ink-2);
}
.pg-work .demo__aside strong { color: var(--ink); }
.pg-work .demo__meta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem;
  margin: 1.75rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule);
}
.pg-work .demo__meta dt { font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.pg-work .demo__meta dd { margin: 0.25rem 0 0; font-size: 1rem; line-height: 1.45; }
/* Footer row under both columns, after the illustration in reading and focus order. */
.pg-work .demo__next { grid-column: 1 / -1; padding: 0.4rem clamp(1.25rem, 3vw, 2.5rem); border-top: 1px solid var(--rule); background: var(--surface); }
.pg-work .demo__next-btn {
  padding-inline: 0; background: none; border: 0; cursor: pointer; text-align: left;
  font: 500 1rem/1.5 var(--font-sans);
}

/* Office review toggle (sits above the fragments it changes) */
.pg-work .demo__try {
  flex: 1 1 100%; max-width: 47.5rem; padding: 1rem 1.1rem 1.1rem;
  background: var(--surface); border: 1px dashed var(--rule-strong); border-radius: var(--radius);
}
.pg-work .demo__try .label { margin-bottom: 0.6rem; }
.pg-work .demo__try-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem; }
.pg-work .demo__toggle { flex: 0 1 auto; justify-content: flex-start; gap: 0.75rem; text-align: left; background: var(--surface); }
.pg-work .demo__toggle-box {
  position: relative; flex: none; width: 1.25rem; height: 1.25rem;
  border: 1.5px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface);
}
.pg-work .demo__toggle[aria-pressed="true"] { border-color: var(--ok); background: var(--ok-tint); }
.pg-work .demo__toggle[aria-pressed="true"] .demo__toggle-box { border-color: var(--ok); background: var(--ok); }
.pg-work .demo__toggle[aria-pressed="true"] .demo__toggle-box::after {
  content: ""; position: absolute; left: 0.32rem; top: 0.08rem; width: 0.38rem; height: 0.7rem;
  border-right: 2px solid var(--surface); border-bottom: 2px solid var(--surface); transform: rotate(45deg);
}
.pg-work .demo__hint { flex: 1 1 12rem; font-size: var(--step--1); line-height: 1.45; color: var(--ink-3); }
/* Space is reserved for the message so the button never moves under the pointer. */
.pg-work .demo__status { margin-top: 0.75rem; min-height: 3em; font-size: var(--step--1); line-height: 1.5; color: var(--ink); }
.pg-work .demo__tab-label { overflow-wrap: anywhere; hyphens: auto; }
@media (forced-colors: active) {
  .pg-work .demo__tab[aria-selected="true"] { border: 2px solid Highlight; }
}

/* Visual column: fragments on a drafting sheet */
.pg-work .demo__visual {
  display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-content: center; gap: 1.5rem 1.25rem;
  padding: clamp(1.25rem, 3.5vw, 2.75rem) clamp(1rem, 3vw, 2.25rem);
  background-color: var(--drawing);
  background-image:
    linear-gradient(to right, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to right, var(--grid-minor) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-minor) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  border-left: 1px solid var(--rule);
}
.pg-work .demo__frag { flex: 1 1 16.5rem; min-width: 0; max-width: 23rem; }
.pg-work .demo__frag--solo { flex-basis: 20rem; max-width: 25rem; }
.pg-work .demo__frag-label {
  margin-bottom: 0.6rem; font: 500 0.75rem/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
}
.pg-work .demo__frag-label::before {
  content: ""; display: inline-block; width: 1rem; height: 1px; margin-right: 0.5rem; vertical-align: middle; background: var(--accent);
}
/* Stacked sheets behind the completion pack */
.pg-work .demo__stack { position: relative; isolation: isolate; margin: 0 0.75rem 0.75rem 0; }
.pg-work .demo__stack::before,
.pg-work .demo__stack::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel);
}
.pg-work .demo__stack::before { transform: translate(0.75rem, 0.75rem); }
.pg-work .demo__stack::after { transform: translate(0.375rem, 0.375rem); }

/* Keep the frame a steady height while switching tabs on wide screens */
@media (min-width: 901px) {
  .pg-work .demo--tabs .demo__stage { min-height: 45rem; }
}
@media (max-width: 900px) {
  .pg-work .demo__stage { grid-template-columns: minmax(0, 1fr); }
  .pg-work .demo__visual { border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 420px) {
  .pg-work .demo__meta { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- What changes for each team ---------- */
.pg-work .teams { list-style: none; border-top: 1px solid var(--ink); }
.pg-work .teams__row {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 3rem;
  padding: 1.75rem 0; border-bottom: 1px solid var(--rule);
}
.pg-work .teams__who { display: flex; align-items: center; gap: 1rem; align-self: start; }
.pg-work .teams__icon {
  flex: none; display: grid; place-items: center; width: 3rem; height: 3rem;
  border: 1.5px solid var(--brand); border-radius: 50%; background: var(--surface); color: var(--brand);
}
.pg-work .teams__icon svg { width: 1.4rem; height: 1.4rem; }
.pg-work .teams__who h3 { font-size: 1.3125rem; }
.pg-work .teams__col p:not(.label) { font-size: 1.0625rem; color: var(--ink-2); }
.pg-work .teams__col p + p { margin-top: 0.35rem; }
.pg-work .teams__col--example { padding-left: 1.25rem; border-left: 2px solid var(--accent); }
.pg-work .teams__col--example .label { color: var(--accent-ink); }
.pg-work .teams__col--example p:not(.label) { color: var(--ink); }
@media (max-width: 860px) {
  .pg-work .teams__row { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
}

/* ---------- How we deliver work like this ---------- */
.pg-work .method { list-style: none; }
.pg-work .method__step {
  position: relative; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: 1.5rem;
  padding-bottom: 2.5rem;
}
.pg-work .method__step:last-child { padding-bottom: 0; }
.pg-work .method__step::before {
  content: ""; position: absolute; left: calc(1.625rem - 0.75px); top: 3.25rem; bottom: 0; width: 1.5px; background: var(--brand);
}
.pg-work .method__step:last-child::before { display: none; }
.pg-work .method__marker {
  position: relative; z-index: 1; display: grid; place-items: center; width: 3.25rem; height: 3.25rem;
  border: 1.5px solid var(--brand); border-radius: 50%; background: var(--surface);
  font: 500 0.9375rem/1 var(--font-mono); color: var(--brand);
}
.pg-work .method__step:last-child .method__marker { background: var(--brand); color: var(--surface); }
.pg-work .method__label {
  padding-top: 0.2rem; font: 500 var(--step--2)/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink);
}
.pg-work .method__body h3 { margin-top: 0.4rem; font-size: var(--step-2); }
.pg-work .method__body > p:not(.method__label) { margin-top: 0.6rem; color: var(--ink-2); max-width: 40rem; }
.pg-work .method__look {
  margin-top: 1.25rem; padding: 1.1rem 1.25rem 1.2rem; max-width: 40rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
}
.pg-work .method__look-title { font-weight: 600; font-size: 1rem; }
.pg-work .method__look .check-list { margin-top: 0.75rem; font-size: 1rem; color: var(--ink-2); }

@media (max-width: 560px) {
  .pg-work .method__step { grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.9rem; }
  .pg-work .method__step::before { left: calc(1.125rem - 0.75px); top: 2.25rem; }
  .pg-work .method__marker { width: 2.25rem; height: 2.25rem; font-size: 0.8125rem; }
  .pg-work .method__look { padding: 0.9rem 0.9rem 1rem; }
}

.pg-work .options {
  align-self: start; padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--brand); border-radius: var(--radius);
}
.pg-work .options h3 { font-size: var(--step-2); }
.pg-work .options__intro { margin-top: 0.5rem; font-size: 1rem; color: var(--ink-2); }
.pg-work .options__list { list-style: none; counter-reset: option; margin-top: 1.25rem; }
.pg-work .options__list li {
  counter-increment: option; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.75rem;
  padding: 1rem 0; border-top: 1px solid var(--rule);
}
.pg-work .options__list li::before { content: counter(option, upper-alpha); font: 500 var(--step--2)/1.9 var(--font-mono); color: var(--accent-ink); }
.pg-work .options__list strong { display: block; font-size: 1.0625rem; line-height: 1.35; }
.pg-work .options__list span { display: block; margin-top: 0.3rem; font-size: 1rem; color: var(--ink-2); }
.pg-work .options__links { display: flex; flex-direction: column; align-items: flex-start; padding-top: 0.75rem; border-top: 1px solid var(--rule); }
@media (min-width: 861px) {
  .pg-work .options { position: sticky; top: 1.5rem; }
}