/* ==========================================================================
   PFAS Endpoint — pfas.com.au
   One stylesheet for every page. Plain CSS, no build step.

   Layout: a 1200px column on a mineral-white page; graphite bands for the
   evidence section and the footer; the borehole log and the pathway are the
   only pictures. Colours come only from the tokens below.

   Default colourway — the PFAS Endpoint identity: mineral white, graphite,
   criterion red (#C8102E, Pantone 186 C) as the one accent, slate greys. The
   red is the cap in the mark, the criterion line a result must get under. The
   earlier blue colourway is kept in full under [data-colourway="a"] for
   reference. Never mix the two.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Default: graphite, mineral white, criterion red ------------------- */
  --accent: #C8102E;        /* criterion red: 5.9:1 on white, so it may carry text */
  --ink: #13191B;           /* graphite: text, rules, dark band, the mark */
  --ink-2: #4B5559;         /* slate: secondary text */
  --ink-3: #4B5559;         /* captions, labels */
  --ground: #F2F4F3;        /* mineral white: page */
  --surface: #FFFFFF;       /* white bands (pathway, contact) */
  --card: #FFFFFF;
  --rule: #C4CCCC;
  --field: #8E989B;         /* form borders */
  --band: #13191B;          /* dark band */
  --band-fg: #F2F4F3;
  --band-fg-2: #C4CCCC;
  --band-rule: #3A4448;
  --band-eyebrow: #C4CCCC;  /* eyebrow text on the dark band */
  --band-eyebrow-dash: #E03A4E; /* a lighter red for the dash on graphite */
  --eyebrow-fg: #13191B;    /* eyebrows on light grounds: graphite text, red dash */
  --eyebrow-dash: #C8102E;
  --btn-bg: #13191B;        /* standard button: graphite */
  --btn-fg: #FFFFFF;
  --cta-bg: #C8102E;        /* the main calls to action: red */
  --cta-fg: #FFFFFF;
  --sel-bg: #13191B;        /* selected pathway option */
  --sel-fg: #FFFFFF;
  --sel-fg-2: #C4CCCC;
  --pill-avail-bg: #13191B;
  --pill-avail-fg: #FFFFFF;
  --pill-arr: #13191B;
  --pill-pilot: #C8102E;
  --pill-dev: #4B5559;
  --endpoint: #C8102E;      /* the end-of-hole bar in the borehole log: the criterion line */
  --mark: #13191B;          /* the mark's frame and arrow */
  --mark-cap: #C8102E;      /* the mark's cap */
  --focus: #C8102E;

  --tint: #F5F0E6;         /* field tint: the flow panel and figure grounds */
  --tint-rule: #DED3BE;
  --tint-ink: #6F5B47;     /* clay: rules and secondary marks on the tint */

  /* soil tones: the mark's field family */
  --soil-fill: #8F8471;
  --soil-clay: #6F5B47;
  --soil-clayey-sand: #A89272;
  --soil-sand: #CDBB95;

  /* --- type ------------------------------------------------------------- */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --radius: 2px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}

/* --- Self-hosted fonts (Google Fonts, SIL Open Font Licence) ----------------
   Latin subsets, variable where the family is variable. No third-party request
   at page load: faster first paint and nothing sent to Google. ---------------- */
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-var.woff2") format("woff2"); font-weight: 400 800; font-stretch: 100% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("assets/fonts/source-serif-4-var.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* --- Colourway A: groundwater blue — reference only ----------------------- */
:root[data-colourway="a"] {
  --accent: #23479E;
  --band-eyebrow: #AFC0E8;
  --band-eyebrow-dash: #AFC0E8;
  --eyebrow-fg: #23479E;
  --eyebrow-dash: #23479E;
  --btn-bg: #23479E;
  --cta-bg: #23479E;
  --sel-bg: #23479E;
  --sel-fg-2: rgba(255, 255, 255, 0.84);
  --pill-avail-bg: #23479E;
  --pill-arr: #23479E;
  --pill-pilot: #23479E;
  --endpoint: #13191B;
  --mark-cap: #13191B;
  --focus: #23479E;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  overflow-x: clip; /* clip, not hidden: hidden would make body the scroll container and break the sticky header */
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--accent); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

[hidden] { display: none !important; }

/* --- Proof strip (home) and the visually-hidden helper -------------------- */
.accent-word { color: var(--accent); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.proof { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 22px 32px; }
.proof > div { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--band-rule); }
.proof dt { font-family: var(--display); font-stretch: 108%; font-weight: 600; font-size: 18px; line-height: 1.3; }
.proof dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--band-fg-2); }

/* --- Questions ----------------------------------------------------------- */
.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 30px 44px; }
.faq > div { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 2px solid var(--ink); }
.faq h2, .faq h3 { font-size: 20px; line-height: 1.25; }
.faq p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* anchors land below the sticky header */
main section[id], .outcome, .service[id], .start-group[id] { scroll-margin-top: 120px; }
@media (max-width: 900px) { main section[id], .outcome, .service[id], .start-group[id] { scroll-margin-top: 150px; } }
#top, .jump-anchors span { scroll-margin-top: 200px; }
.jump-anchors { position: relative; height: 0; overflow: visible; }
.jump-anchors span { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 650;
  line-height: 1.08;
  text-wrap: balance;
}
h1 { font-size: clamp(40px, 5.4vw, 70px); line-height: 1.03; letter-spacing: -0.012em; }
h2 { font-size: clamp(30px, 3.4vw, 44px); }
h3 { font-size: 24px; line-height: 1.15; }
h4 { font-size: 19px; font-stretch: 108%; font-weight: 600; line-height: 1.3; }

p { margin: 0; }
p + p { margin-top: 1em; }

.lead { font-size: 21px; line-height: 1.55; color: var(--ink-2); max-width: 34em; }
.muted { color: var(--ink-2); }
.small { font-size: 15px; line-height: 1.5; }
.measure { max-width: 46em; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eyebrow-fg);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 22px;
  height: 2px;
  background: var(--eyebrow-dash);
}
.band .eyebrow { color: var(--band-eyebrow); }
.band .eyebrow::before { background: var(--band-eyebrow-dash); }

.mono {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}
@media (min-width: 700px) {
  .wrap { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
}

.stack { display: flex; flex-direction: column; }
.stack-s { gap: 8px; }
.stack-m { gap: 14px; }
.stack-l { gap: 28px; }

.section-head { display: flex; flex-direction: column; gap: 14px; max-width: 46em; }
.section-head .muted { color: var(--ink-2); }

section.plain { padding-block: 88px; }
section.surface { background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
section.surface > .wrap { padding-block: 80px; }
.band { background: var(--band); color: var(--band-fg); }
.band > .wrap { padding-block: 88px; }
.band .muted { color: var(--band-fg-2); }
.band a { color: var(--band-fg); }
.band a:hover { color: var(--band-eyebrow); }

@media (max-width: 700px) {
  section.plain { padding-block: 56px; }
  section.surface > .wrap, .band > .wrap { padding-block: 56px; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 20px;
  border: 1.5px solid var(--btn-bg);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  cursor: pointer;
  font-family: var(--display);
  font-stretch: 108%;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn:hover { color: var(--btn-fg); border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.btn-cta {
  min-height: 56px;
  padding: 0 26px;
  border-color: var(--cta-bg);
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: 19px;
  font-weight: 700;
  font-stretch: 110%;
}
.btn-cta:hover { color: var(--cta-fg); border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); }
.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover { color: var(--ink); border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.btn-small { min-height: 44px; padding: 0 16px; font-size: 15px; }

.textlink {
  font-family: var(--display);
  font-stretch: 105%;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; border-bottom: 1px solid var(--rule); background: var(--ground); }
.site-header .wrap {
  padding-block: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

.lockup { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.lockup:hover { color: var(--ink); }
.mark { display: block; flex: none; width: 54px; height: 54px; color: var(--mark); }
.mark .cap { fill: var(--mark-cap); }
.site-footer .mark { color: var(--band-fg); }
.site-footer .mark .cap { fill: var(--band-fg); }
.wordmark { display: flex; flex-direction: column; gap: 2px; }
.wordmark .name {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 25px;
  letter-spacing: 0.06em;
  line-height: 1.1;
}
.wordmark .descriptor {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--ink-3);
  line-height: 1.2;
}
.lockup { gap: 16px; }
@media (max-width: 900px) {
  .mark { width: 44px; height: 44px; }
  .wordmark .name { font-size: 21px; }
  .wordmark .descriptor { font-size: 10.5px; }
}

.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-links a { color: var(--ink); text-decoration: none; padding-block: 6px; border-bottom: 2px solid transparent; }
.nav-links a:hover, .nav-links a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--ink); }
.menu-btn { display: none; }

@media (max-width: 900px) {
  .site-header .wrap { align-items: center; }
  .site-nav { gap: 12px; }
  .menu-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border: 1.5px solid var(--ink);
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .js .nav-links { display: none; }
  .js .nav-links.open {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    order: 3;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
  }
  .js .nav-links.open a { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .site-nav { flex-wrap: wrap; width: 100%; justify-content: space-between; }
  .header-cta { order: 2; }
}

/* ==========================================================================
   Hero and the process flow
   ========================================================================== */
.hero { padding-block: 64px 72px; }
.hero .wrap { display: flex; flex-direction: column; gap: 48px; }
.hero-copy { display: flex; flex-direction: column; gap: 28px; max-width: 52em; min-width: 0; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 20px 0 0;
  list-style: none;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.trust li { display: flex; align-items: center; gap: 8px; }
.trust li::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex: none; }

.flow {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 28px 28px;
  background: var(--tint);
  border: 1px solid var(--tint-rule);
  border-radius: var(--radius);
}
.flow-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }
.flow-head .label { color: var(--tint-ink); }
.flow-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.flow-steps::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 17px;
  border-top: 2px solid var(--ink);
}
.flow-steps li { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.flow-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
  border-radius: 18px;
  background: var(--ink);
  color: #FFFFFF;
  font-family: var(--mono);
  font-size: 14px;
  box-shadow: 0 0 0 4px var(--tint);
}
.flow-name { font-family: var(--display); font-stretch: 110%; font-weight: 650; font-size: 20px; line-height: 1.15; }
.flow-time { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.flow-note { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.flow-end {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 22px;
  background: #FFFFFF;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
}
.flow-end .mark { width: 56px; height: 56px; }
.flow-end-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.flow-end-text .flow-note { max-width: 60em; }

@media (max-width: 900px) {
  .hero { padding-block: 48px 56px; }
  .flow { padding: 20px 18px 22px; }
  .flow-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .flow-steps::before { left: 17px; right: auto; top: 18px; bottom: 18px; border-top: 0; border-left: 2px solid var(--ink); }
  .flow-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; }
  .flow-dot { grid-row: 1 / span 3; margin: 0; }
  .flow-end { align-items: flex-start; }
}

/* ==========================================================================
   Start here (home page)
   ========================================================================== */
.clicks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--display);
  font-stretch: 106%;
  font-weight: 600;
  font-size: 16px;
}
.clicks li { display: flex; align-items: center; gap: 12px; }
.clicks .k {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  background: var(--accent);
  color: #FFFFFF;
  font-family: var(--mono);
  font-size: 13px;
}
.start-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 56px;
  align-items: start;
}
.start-list { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.start-group { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 2px solid var(--ink); }
.start-group-title { font-size: 20px; line-height: 1.25; font-stretch: 108%; font-weight: 600; }
.start-group-sub { margin: 0 0 4px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.pw-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  text-align: left;
  text-decoration: none;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.pw-opt::after {
  content: "→";
  margin-left: auto;
  flex: none;
  font-family: var(--display);
  font-weight: 600;
  color: var(--accent);
  opacity: 0;
  transition: opacity 160ms ease;
}
.pw-opt:hover { border-color: var(--ink); color: var(--ink); }
.pw-opt:hover::after { opacity: 1; }
.pw-opt .opt-label { font-family: var(--display); font-stretch: 104%; font-weight: 500; font-size: 16px; line-height: 1.35; }
.pw-opt[aria-current="true"] { background: var(--sel-bg); color: var(--sel-fg); border-color: var(--sel-bg); }
.pw-opt[aria-current="true"]::after { opacity: 1; color: var(--sel-fg); }
.start-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; position: sticky; top: 124px; }

.outcome {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  background: var(--ground);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
}
.outcome-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.outcome h3 { font-size: 30px; line-height: 1.1; }
.outcome dl { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.outcome dl > div { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--rule); }
.outcome dt { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.outcome dd { margin: 0; font-size: 17px; line-height: 1.55; }
.outcome-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }

@media (max-width: 900px) {
  .start-grid { grid-template-columns: minmax(0, 1fr); }
  .start-card { position: static; }
}

/* Status pills */
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px solid currentColor;
  color: var(--pill-arr);
}
.pill-avail { background: var(--pill-avail-bg); color: var(--pill-avail-fg); border-color: var(--pill-avail-bg); }
.pill-arrange { color: var(--pill-arr); }
.pill-pilot { color: var(--pill-pilot); border-style: dashed; }
.pill-dev { color: var(--pill-dev); border-style: dashed; }

/* ==========================================================================
   How we work
   ========================================================================== */
.how { display: flex; flex-direction: column; gap: 48px; }
.promises {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 32px 28px;
}
.promise { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 2px solid var(--accent); }
.promise p { font-size: 17px; line-height: 1.55; color: var(--ink-2); }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 32px 28px;
}
.steps li { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 2px solid var(--ink); }
.steps .n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.steps h3 { font-size: 22px; }
.steps p { font-size: 16px; line-height: 1.55; color: var(--ink-2); }

.people { display: flex; flex-direction: column; gap: 24px; padding-top: 32px; border-top: 1px solid var(--rule); }
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap: 0 56px;
  margin: 0;
}
.people-grid > div {
  display: grid;
  grid-template-columns: minmax(0, 11em) minmax(0, 1fr);
  gap: 4px 20px;
  padding-block: 16px;
  border-top: 1px solid var(--rule);
}
.people-grid dt { font-family: var(--display); font-stretch: 108%; font-weight: 600; font-size: 17px; line-height: 1.35; }
.people-grid dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 520px) {
  .people-grid > div { grid-template-columns: minmax(0, 1fr); }
}

.why {
  max-width: 38em;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  font-size: 18px;
  line-height: 1.6;
}
.why b { font-family: var(--display); font-stretch: 108%; font-weight: 600; }

/* ==========================================================================
   Evidence (dark band)
   ========================================================================== */
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 48px 72px;
}
.two-col > * { min-width: 0; }
@media (max-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

.refs { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--band-rule); }
.refs .label { color: var(--band-fg-2); }
.refs ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.45; }

.commitments { margin: 0; display: flex; flex-direction: column; }
.commitments > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 6px 32px;
  padding-block: 20px;
  border-top: 1px solid var(--band-rule);
}
.commitments > div:last-child { border-bottom: 1px solid var(--band-rule); }
.commitments dt { font-family: var(--display); font-stretch: 108%; font-weight: 600; font-size: 19px; line-height: 1.3; }
.commitments dd { margin: 0; font-size: 17px; line-height: 1.55; color: var(--band-fg-2); }

/* ==========================================================================
   Status register
   ========================================================================== */
.register-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
.table-wrap { overflow-x: auto; border: 1.5px solid var(--ink); background: var(--card); }
table.register { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
table.register thead tr {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
}
table.register th, table.register td { padding: 16px 20px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.register thead th { padding-block: 14px; font-weight: 500; }
table.register tbody th { text-align: left; font-family: var(--display); font-stretch: 104%; font-weight: 600; font-size: 16px; }
table.register tbody tr:last-child th, table.register tbody tr:last-child td { border-bottom: 0; }
table.register td.detail { color: var(--ink-2); }
table.reg-table { min-width: 880px; font-size: 15px; }
table.reg-table tbody th { white-space: nowrap; }
table.reg-table td.detail { min-width: 200px; }
table.reg-table a { color: var(--ink); }
table.reg-table a:hover { color: var(--accent); }

/* ==========================================================================
   Stats (enquiry and services pages)
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 24px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stats li { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 2px solid var(--ink); }
.stats .num {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  color: var(--accent);
}
.stats .num small { font-size: 20px; font-weight: 600; margin-left: 4px; color: var(--ink); }
.stats .what { font-size: 16px; line-height: 1.5; color: var(--ink-2); }

/* ==========================================================================
   Services page
   ========================================================================== */
.service-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.service-index a {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
  padding: 18px 20px;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  text-decoration: none;
  color: var(--ink);
}
.service-index a:hover { border-color: var(--ink); color: var(--ink); }
.service-index .t { font-family: var(--display); font-stretch: 108%; font-weight: 600; font-size: 18px; line-height: 1.3; }
.service-index .for { font-size: 15px; line-height: 1.45; color: var(--ink-2); }

.services { display: flex; flex-direction: column; }
.service {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 24px 72px;
  padding-block: 48px;
  border-top: 1px solid var(--rule);
}
.service > * { min-width: 0; }
.service .intro { display: flex; flex-direction: column; gap: 14px; }
.service h2 { font-size: 30px; line-height: 1.1; }
.service .for { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.service dl { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.service dl > div { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--rule); }
.service dl > div:first-child { padding-top: 0; border-top: 0; }
.service dt { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.service dd { margin: 0; font-size: 17px; line-height: 1.55; }
.service .actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding-top: 6px; }
@media (max-width: 900px) { .service { grid-template-columns: minmax(0, 1fr); padding-block: 40px; } }

.fees { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 28px; }
.fees h3 { font-size: 19px; font-stretch: 108%; font-weight: 600; line-height: 1.3; }
.fees > div { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 2px solid var(--accent); }
.fees p { font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* ==========================================================================
   Contact and enquiry form
   ========================================================================== */
.contact-aside { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.next-steps { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; font-size: 17px; line-height: 1.5; }
.send-aside { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--rule); }
.send-list { margin: 0; display: flex; flex-direction: column; }
.send-list > div { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); gap: 2px 16px; padding-block: 10px; border-top: 1px solid var(--rule); }
.send-list > div:first-child { border-top: 0; padding-top: 0; }
.send-list dt { font-family: var(--display); font-stretch: 108%; font-weight: 600; font-size: 16px; line-height: 1.35; }
.send-list dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 520px) { .send-list > div { grid-template-columns: minmax(0, 1fr); } }
.talk { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--rule); }
.talk .t { font-family: var(--display); font-stretch: 108%; font-weight: 600; font-size: 17px; }
.talk .mono { font-size: 14px; line-height: 1.6; letter-spacing: 0.02em; }
.talk .small { color: var(--ink-2); }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.copy-btn {
  display: none;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--field);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.js .copy-btn { display: inline-flex; align-items: center; }
.copy-btn:hover { border-color: var(--ink); }

form.enquiry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px 24px;
  min-width: 0;
}
form.enquiry .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
form.enquiry .field.full, form.enquiry fieldset, form.enquiry .form-foot { grid-column: 1 / -1; }
form.enquiry label, form.enquiry legend {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
form.enquiry label .req { color: var(--ink); }
form.enquiry input[type="text"],
form.enquiry input[type="email"],
form.enquiry input[type="tel"],
form.enquiry select,
form.enquiry textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1.5px solid var(--field);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
}
form.enquiry textarea { padding: 12px; resize: vertical; min-height: 120px; }
form.enquiry select { appearance: auto; }
form.enquiry fieldset {
  margin: 0;
  padding: 16px 18px;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}
form.enquiry legend { padding: 0 6px; }
form.enquiry .check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--text); font-size: 17px; text-transform: none; letter-spacing: 0; color: var(--ink); }
form.enquiry .check input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }
form.enquiry .form-foot { display: flex; flex-direction: column; gap: 14px; }
form.enquiry .submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
form.enquiry .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form.enquiry .chosen { margin: 0; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--surface); font-size: 16px; line-height: 1.5; }
.form-error { font-size: 16px; line-height: 1.5; color: var(--ink); border-left: 3px solid var(--accent); padding-left: 12px; }
.form-status { font-size: 16px; line-height: 1.5; }
.form-status .t { font-family: var(--display); font-stretch: 108%; font-weight: 600; font-size: 19px; display: block; margin-bottom: 6px; }
.fallback { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--card); }
.fallback textarea { width: 100%; min-height: 160px; padding: 12px; border: 1.5px solid var(--field); border-radius: var(--radius); font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--ink); background: var(--ground); }

.send-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px 32px; margin: 0; }
.send-guide > div { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 2px solid var(--ink); }
.send-guide dt { font-family: var(--display); font-stretch: 108%; font-weight: 600; font-size: 18px; line-height: 1.3; }
.send-guide dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--band); color: var(--band-fg-2); }
.site-footer .wrap {
  padding-block: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px 48px;
  font-size: 15px;
  line-height: 1.6;
}
.site-footer .entity { display: flex; flex-direction: column; gap: 6px; max-width: 44em; }
.site-footer .brand {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--band-fg);
}
.site-footer .note { color: #8E989B; }
.site-footer .links { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; }
.site-footer .links a { color: var(--band-fg); text-decoration: none; }
.site-footer .links a:hover { color: var(--band-eyebrow); }

/* ==========================================================================
   Page intro (services, enquiry, 404)
   ========================================================================== */
.page-intro { padding-block: 64px 48px; display: flex; flex-direction: column; gap: 18px; }
.page-intro h1 { font-size: clamp(36px, 4.6vw, 58px); }
.page-intro .lead { max-width: 38em; }
.breadcrumb { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }

/* ==========================================================================
   Quick-action bar (phones only)
   ========================================================================== */
.action-bar { display: none; }
@media (max-width: 700px) {
  .action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    background: var(--ground);
    border-top: 1px solid var(--rule);
  }
  .action-bar .btn { flex: 1; min-height: 48px; font-size: 16px; padding: 0 12px; }
  .action-bar .btn-outline { flex: 0 0 auto; min-width: 92px; }
  body.has-bar { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}