@import url("fonts.css");

/* ============================================================
   MERCURY PLUS — design tokens
   Concept: dark surfaces = the ad account. Light section = the
   board report. Mono numerals thread both together.
   ============================================================ */

:root {
  /* The account (dark) */
  --ink:        #08090a;
  --ink-2:      #0e1013;
  --ink-3:      #14171a;
  --hair:       #1e2327;
  --hair-2:     #2b3238;
  --fg:         #e9eaeb;
  --fg-dim:     #939aa1;
  /* 4.79:1 on --ink. Do not darken: this carries every mono label on the
     site, and small text needs 4.5:1 to pass WCAG AA. */
  --fg-mute:    #767d85;
  /* Display-size only, where the 3:1 large-text threshold applies (3.42:1). */
  --fg-quiet:   #5f666d;

  /* Accents — functional only */
  --signal:     #c6f24e;
  --signal-ink: #0a0d02;
  --alert:      #ff6a44;
  --caution:    #f2c94c;

  /* The report (light) */
  --paper:      #f1f1ec;
  --paper-2:    #fbfbf8;
  --paper-hair: #d9d9d1;
  --paper-ink:  #121309;
  --paper-dim:  #595c4e;

  /* Type */
  --sans:  "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* Fluid scale */
  --t-display: clamp(2.5rem, 1.35rem + 5.1vw, 5.1rem);
  --t-h2:      clamp(1.85rem, 1.25rem + 2.5vw, 3rem);
  --t-h3:      clamp(1.16rem, 1.03rem + 0.55vw, 1.44rem);
  --t-lead:    clamp(1.03rem, 0.96rem + 0.34vw, 1.2rem);
  --t-body:    1rem;
  --t-small:   0.875rem;
  --t-micro:   0.72rem;

  /* Rhythm */
  --gutter: clamp(1.15rem, 0.5rem + 2.8vw, 3.5rem);
  --bay:    clamp(4rem, 2.2rem + 7vw, 8.5rem);
  --max:    76rem;

  --ease: cubic-bezier(0.22, 0.7, 0.24, 1);
}

/* ============================================================
   Reset / base
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

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

::selection { background: var(--signal); color: var(--signal-ink); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--signal);
  color: var(--signal-ink);
  padding: 0.7rem 1.1rem;
  font: 600 var(--t-small)/1 var(--sans);
}
.skip:focus { left: 0.6rem; top: 0.6rem; }

/* ============================================================
   Primitives
   ============================================================ */

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

.bay { padding-block: var(--bay); }
.bay-tight { padding-block: calc(var(--bay) * 0.62); }

/* Small uppercase mono label — used for every eyebrow and data key */
.key {
  display: block;
  font: 500 var(--t-micro)/1.35 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.key-signal { color: var(--signal); }

.num {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--fg-dim);
  max-width: 56ch;
}

.dim  { color: var(--fg-dim); }
.mute { color: var(--fg-mute); }

.rule {
  border: 0;
  border-top: 1px solid var(--hair);
  margin: 0;
}

/* Section heading pattern: mono eyebrow above a tight display line */
.head { margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.4rem); }
.head .key { margin-bottom: 1.1rem; }

.h2 {
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.032em;
  max-width: 30ch;
}
.h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.018em;
}

.link-out {
  color: var(--signal);
  border-bottom: 1px solid color-mix(in srgb, var(--signal) 35%, transparent);
  transition: border-color 0.18s var(--ease);
}
.link-out:hover { border-bottom-color: var(--signal); }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.82rem 1.3rem;
  border: 1px solid var(--hair-2);
  border-radius: 3px;
  background: transparent;
  color: var(--fg);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.btn:hover { border-color: var(--fg-mute); background: var(--ink-3); }

.btn-signal {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--signal-ink);
}
.btn-signal:hover {
  background: color-mix(in srgb, var(--signal) 84%, white);
  border-color: color-mix(in srgb, var(--signal) 84%, white);
  color: var(--signal-ink);
}

.btn-lg { padding: 1rem 1.5rem; font-size: var(--t-body); }

/* ============================================================
   Masthead
   ============================================================ */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--hair);
}

.masthead-in {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.6rem);
  min-height: 4.1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin-right: auto;
}
.brand-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--signal);
  flex: none;
}
.brand-plus { color: var(--fg-mute); font-weight: 500; }

.mainnav { display: flex; gap: clamp(1rem, 2vw, 1.9rem); }
.mainnav a {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--fg-dim);
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.mainnav a:hover { color: var(--fg); border-bottom-color: var(--signal); }

.masthead-tel {
  font: 500 var(--t-small)/1 var(--mono);
  color: var(--fg-dim);
  white-space: nowrap;
  transition: color 0.16s var(--ease);
}
.masthead-tel:hover { color: var(--signal); }

.masthead-cta { flex: none; }

@media (max-width: 62rem) {
  .mainnav, .masthead-tel { display: none; }
}

/* At 320px the brand and the CTA together exceed the viewport. Tighten both
   rather than dropping either — the CTA is the only navigation on mobile. */
@media (max-width: 24rem) {
  .masthead-in { gap: 0.55rem; min-height: 3.7rem; }
  .brand { font-size: 0.82rem; letter-spacing: 0; gap: 0.45rem; }
  .masthead-cta { padding: 0.65rem 0.8rem; font-size: 0.78rem; }
}

/* ============================================================
   Hero
   ============================================================ */

.hero { padding-block: clamp(3.2rem, 1.6rem + 6vw, 6.6rem) 0; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.6rem);
  align-items: end;
}

.hero h1 {
  font-size: var(--t-display);
  font-weight: 600;
  line-height: 0.99;
  letter-spacing: -0.042em;
  margin-block: 1.4rem 1.6rem;
  text-wrap: balance;
}
.hero h1 .quiet { color: var(--fg-quiet); }

.readout-cap {
  display: block;
  margin-bottom: 0.9rem;
  padding-bottom: 0.55rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2rem;
}

/* Facts readout — deliberately styled as an instrument panel, not cards */
.readout { border-top: 1px solid var(--hair-2); }
.readout-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.72rem;
  border-bottom: 1px solid var(--hair);
}
.readout-row dt {
  font: 500 var(--t-micro)/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.readout-row dd {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--signal);
  white-space: nowrap;
}

@media (max-width: 56rem) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Credentials strip
   ============================================================ */

.creds {
  border-block: 1px solid var(--hair);
  margin-top: clamp(3rem, 1.6rem + 5vw, 5.5rem);
  background: var(--ink-2);
}
.creds-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem clamp(1.2rem, 3vw, 2.4rem);
  padding-block: 1.05rem;
  font: 500 var(--t-micro)/1.5 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.creds-in b { color: var(--fg-dim); font-weight: 500; }

/* ============================================================
   SIGNATURE — attribution gap calculator
   ============================================================ */

.gap-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}

.calc {
  border: 1px solid var(--hair-2);
  border-radius: 4px;
  background: var(--ink-2);
  overflow: hidden;
}

.calc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.15rem;
  border-bottom: 1px solid var(--hair-2);
  background: var(--ink-3);
}
.calc-bar .key { color: var(--fg-dim); }
.calc-privacy { display: flex; align-items: center; gap: 0.4rem; }

.calc-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hair);
}
.field { background: var(--ink-2); padding: 0.95rem 1.15rem; }
.field label {
  display: block;
  font: 500 var(--t-micro)/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 0.5rem;
}
.field-in {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  border-bottom: 1px solid var(--hair-2);
  transition: border-color 0.18s var(--ease);
}
.field-in:focus-within { border-bottom-color: var(--signal); }
.field-in .affix {
  font: 500 0.95rem/1 var(--mono);
  color: var(--fg-mute);
  flex: none;
}
.field-in input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.25rem 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1.12rem;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  appearance: textfield;
}
.field-in input::-webkit-outer-spin-button,
.field-in input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.field-in input:focus { outline: none; }

.calc-out { border-top: 1px solid var(--hair-2); }

.out-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--hair);
}
.out-row:last-of-type { border-bottom: 0; }
.out-label { font-size: var(--t-small); color: var(--fg-dim); }
.out-label small {
  display: block;
  font-size: var(--t-micro);
  color: var(--fg-mute);
  line-height: 1.45;
  margin-top: 0.15rem;
}
.out-val {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.out-val[data-state="good"]  { color: var(--signal); }
.out-val[data-state="warn"]  { color: var(--caution); }
.out-val[data-state="bad"]   { color: var(--alert); }
.out-val[data-state="idle"]  { color: var(--fg-mute); }

.verdict {
  display: flex;
  gap: 0.7rem;
  padding: 1.05rem 1.15rem;
  border-top: 1px solid var(--hair-2);
  background: var(--ink-3);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--fg-dim);
}
.verdict-flag {
  flex: none;
  width: 0.4rem;
  align-self: stretch;
  border-radius: 2px;
  background: var(--fg-mute);
  transition: background 0.2s var(--ease);
}
.verdict[data-state="good"] .verdict-flag { background: var(--signal); }
.verdict[data-state="warn"] .verdict-flag { background: var(--caution); }
.verdict[data-state="bad"]  .verdict-flag { background: var(--alert); }
.verdict strong { color: var(--fg); font-weight: 600; }

/* Sits with the explanation, not inside the instrument — it describes what the
   four inputs cannot see, which is commentary rather than readout. */
.note-inline {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hair);
  font-size: var(--t-small);
  line-height: 1.62;
  color: var(--fg-mute);
  max-width: 54ch;
}
.note-inline em { color: var(--fg-dim); font-style: italic; }

@media (max-width: 60rem) {
  .gap-grid { grid-template-columns: 1fr; }
}
@media (max-width: 30rem) {
  .calc-fields { grid-template-columns: 1fr; }
}

/* ============================================================
   Failure modes — no numbering: this is not a sequence
   ============================================================ */

.modes { border-top: 1px solid var(--hair-2); }
.mode {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.6rem, 1rem + 1.6vw, 2.4rem);
  border-bottom: 1px solid var(--hair);
}
.mode-name { align-self: start; }
.mode-name .h3 { margin-top: 0.55rem; }
.mode p { color: var(--fg-dim); max-width: 62ch; }
.mode p + p { margin-top: 0.85rem; }
.mode em { color: var(--fg); font-style: normal; font-weight: 500; }

@media (max-width: 52rem) {
  .mode { grid-template-columns: 1fr; gap: 0.9rem; }
}

/* ============================================================
   Method — an actual sequence, so the timeline is earned
   ============================================================ */

.method { display: grid; gap: 1px; background: var(--hair); border-block: 1px solid var(--hair); }

.stage {
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 3vw, 2.6rem);
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.2rem) 0;
  background: var(--ink);
}
.stage-when {
  font: 500 var(--t-micro)/1.5 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal);
  padding-top: 0.35rem;
}
.stage p { color: var(--fg-dim); }
.stage-out { align-self: start; }
.stage-out .key { margin-bottom: 0.7rem; }
.stage-out li {
  font-size: var(--t-small);
  color: var(--fg-dim);
  padding-block: 0.42rem;
  border-bottom: 1px solid var(--hair);
  display: flex;
  gap: 0.6rem;
}
.stage-out li::before { content: "→"; color: var(--fg-mute); flex: none; }
.stage-out li:last-child { border-bottom: 0; }

@media (max-width: 62rem) {
  .stage { grid-template-columns: 1fr; gap: 1rem; }
  .stage-when { padding-top: 0; }
}

/* ============================================================
   THE REPORT — light editorial register
   ============================================================ */

.report {
  background: var(--paper);
  color: var(--paper-ink);
}
.report .key { color: var(--paper-dim); }
.report .rule { border-top-color: var(--paper-hair); }

.report-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 1rem + 3vw, 4rem);
  align-items: end;
  padding-bottom: clamp(2rem, 1.2rem + 2vw, 3rem);
  border-bottom: 1px solid var(--paper-hair);
}
.report-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 1.35rem + 3.2vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.018em;
  max-width: 24ch;
  text-wrap: balance;
}
.report-head h2 i { font-style: italic; }
.report-lead {
  font-size: var(--t-lead);
  line-height: 1.66;
  color: var(--paper-dim);
  max-width: 46ch;
}
.report-lead + .report-lead { margin-top: 0.9rem; }

/* The four fields every published result must carry */
.standard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  background: var(--paper-hair);
  border: 1px solid var(--paper-hair);
  border-radius: 4px;
  margin-top: clamp(2.4rem, 1.4rem + 2.4vw, 3.6rem);
}
.standard-cell { background: var(--paper-2); padding: 1.25rem 1.3rem; }
.standard-cell .key { margin-bottom: 0.6rem; }
.standard-cell p { font-size: var(--t-small); color: var(--paper-dim); line-height: 1.55; }

/* Worked example — must always read as illustrative */
.worked {
  margin-top: clamp(2.4rem, 1.4rem + 2.4vw, 3.6rem);
  border: 1px solid var(--paper-hair);
  border-radius: 4px;
  background: var(--paper-2);
  overflow: hidden;
}
.worked-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1rem;
  padding: 0.8rem 1.3rem;
  border-bottom: 1px solid var(--paper-hair);
  background: color-mix(in srgb, var(--caution) 17%, var(--paper-2));
}
.stamp {
  font: 500 var(--t-micro)/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-ink);
  background: var(--caution);
  padding: 0.35rem 0.55rem;
  border-radius: 2px;
}
.worked-bar span { font-size: var(--t-small); color: var(--paper-dim); }

/* Published client results get the signal colour; the illustrative example keeps
   the caution colour. Used by the ready-to-fill case template in index.html. */
.stamp-real { background: var(--signal); }
.worked-bar:has(.stamp-real) { background: color-mix(in srgb, var(--signal) 15%, var(--paper-2)); }

.worked-row {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(0.8rem, 2.5vw, 2.2rem);
  padding: 1.15rem 1.3rem;
  border-bottom: 1px solid var(--paper-hair);
}
.worked-row:last-child { border-bottom: 0; }
.worked-when {
  font: 500 var(--t-micro)/1.5 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.worked-row p { font-size: var(--t-small); line-height: 1.62; color: var(--paper-dim); }
.worked-row p strong { color: var(--paper-ink); font-weight: 600; }
.worked-fig {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  color: var(--paper-ink);
  align-self: start;
}
.worked-fig span { display: block; padding-block: 0.2rem; }
.worked-fig b { font-weight: 500; color: var(--paper-dim); }

@media (max-width: 56rem) {
  .report-head { grid-template-columns: 1fr; }
  .worked-row { grid-template-columns: 1fr; gap: 0.7rem; }
}

/* ============================================================
   Pricing
   ============================================================ */

.price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}

.price-figure {
  border: 1px solid var(--hair-2);
  border-radius: 4px;
  background: var(--ink-2);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
}
.price-amount {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-block: 0.9rem 0.4rem;
}
.price-amount .num { font-size: clamp(2.5rem, 1.7rem + 2.6vw, 3.6rem); letter-spacing: -0.04em; color: var(--signal); }
.price-amount .per { font-size: var(--t-small); color: var(--fg-mute); font-family: var(--mono); }
.price-figure > p { font-size: var(--t-small); color: var(--fg-dim); }

.terms { margin-top: 1.4rem; border-top: 1px solid var(--hair); }
.terms div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--hair);
  font-size: var(--t-small);
}
.terms dt { color: var(--fg-mute); }
.terms dd { color: var(--fg); font-family: var(--mono); font-weight: 500; text-align: right; }

.scope { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: clamp(1.5rem, 3vw, 2.6rem); }
.scope-col .key { margin-bottom: 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--hair-2); }
.scope-col li {
  display: flex;
  gap: 0.65rem;
  padding-block: 0.55rem;
  font-size: var(--t-small);
  color: var(--fg-dim);
  border-bottom: 1px solid var(--hair);
}
.scope-col li::before { flex: none; font-family: var(--mono); }
.scope-in li::before  { content: "+"; color: var(--signal); }
.scope-out li::before { content: "−"; color: var(--fg-mute); }

@media (max-width: 58rem) { .price-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FAQ
   ============================================================ */

.faq { border-top: 1px solid var(--hair-2); max-width: 60rem; }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.1rem;
  cursor: pointer;
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.014em;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--mono);
  color: var(--signal);
  flex: none;
  transition: transform 0.2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--signal); }
.faq-a { padding-bottom: 1.3rem; color: var(--fg-dim); max-width: 62ch; }
.faq-a p + p { margin-top: 0.8rem; }
.faq-a strong { color: var(--fg); font-weight: 600; }

/* ============================================================
   Enquiry form
   ============================================================ */

.enquire { background: var(--ink-2); border-top: 1px solid var(--hair-2); }

.enquire-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-row { display: flex; flex-direction: column; gap: 0.5rem; }
.form-row-wide { grid-column: 1 / -1; }

.form-row > label {
  font: 500 var(--t-micro)/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.form-row .req { color: var(--signal); }

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="url"],
.form-row select,
.form-row textarea {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--hair-2);
  border-radius: 3px;
  padding: 0.72rem 0.85rem;
  font-size: var(--t-small);
  transition: border-color 0.18s var(--ease);
}
.form-row textarea { resize: vertical; min-height: 6.5rem; line-height: 1.6; }
.form-row select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-mute) 50%), linear-gradient(135deg, var(--fg-mute) 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 55%, calc(100% - 0.72rem) 55%;
  background-size: 0.33rem 0.33rem;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--signal);
}
.form-row input::placeholder, .form-row textarea::placeholder { color: var(--fg-mute); }

.field-help {
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--fg-mute);
}

.consent {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--t-small);
  color: var(--fg-dim);
  line-height: 1.55;
  cursor: pointer;
}

/* The optional opt-in is set back visually so it never reads as part of the
   required block — a marketing tick-box that looks mandatory isn't freely given.
   The eyebrow carries the "optional" signal so the carrier-mandated sentence
   inside the label can stay word-for-word untouched. */
.consent-block {
  grid-column: 1 / -1;
  padding-top: 0.95rem;
  border-top: 1px solid var(--hair);
}
.consent-eyebrow {
  display: block;
  margin-bottom: 0.7rem;
  text-transform: none;
  letter-spacing: 0.02em;
}
/* Kept at body-small rather than micro: this is a 395-character legal sentence that
   a carrier reviewer reads off a screenshot during campaign registration, and that a
   visitor is being asked to agree to. Too small to read comfortably is too small. */
.consent-optional {
  color: var(--fg-dim);
  font-size: var(--t-small);
  line-height: 1.58;
}
.consent-optional b { color: var(--fg-dim); font-weight: 600; }
.consent input {
  flex: none;
  margin-top: 0.22rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--signal);
}

.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.3rem; }
.form-aside {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--fg-mute);
  max-width: 26ch;
}

.form-status {
  grid-column: 1 / -1;
  padding: 0.85rem 1rem;
  border: 1px solid var(--hair-2);
  border-left-width: 3px;
  border-radius: 3px;
  font-size: var(--t-small);
  line-height: 1.55;
}
.form-status[hidden] { display: none; }
.form-status[data-state="ok"]   { border-left-color: var(--signal); color: var(--fg); }
.form-status[data-state="err"]  { border-left-color: var(--alert); color: var(--fg); }
.form-status[data-state="busy"] { border-left-color: var(--caution); color: var(--fg-dim); }

.contact-block { border-top: 1px solid var(--hair-2); }
.contact-block > div { padding-block: 1rem; border-bottom: 1px solid var(--hair); }
.contact-block .key { margin-bottom: 0.45rem; }
.contact-block address { font-style: normal; font-size: var(--t-small); line-height: 1.65; color: var(--fg-dim); }
.contact-block a { color: var(--fg); }
.contact-block a:hover { color: var(--signal); }

@media (max-width: 58rem) { .enquire-grid { grid-template-columns: 1fr; } }
@media (max-width: 34rem) { .form-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Footer
   ============================================================ */

.footer { border-top: 1px solid var(--hair); background: var(--ink); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.6rem, 3vw, 3rem);
  padding-block: clamp(2.6rem, 1.6rem + 3vw, 4rem);
}
.footer .key { margin-bottom: 0.7rem; }
.footer-tag { font-size: var(--t-small); line-height: 1.6; color: var(--fg-dim); max-width: 24ch; }
.footer address { font-style: normal; font-size: var(--t-small); line-height: 1.7; color: var(--fg-dim); }
.footer li { padding-block: 0.28rem; font-size: var(--t-small); }
.footer li a { color: var(--fg-dim); }
.footer li a:hover { color: var(--signal); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  padding-block: 1.2rem;
  border-top: 1px solid var(--hair);
  font: 500 var(--t-micro)/1.6 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* ============================================================
   Cookie notice
   ============================================================ */

.cookie {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 150;
  background: var(--ink-3);
  border-top: 1px solid var(--hair-2);
}
.cookie[hidden] { display: none; }
.cookie-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem clamp(1rem, 3vw, 2.4rem);
  padding-block: 1rem;
}
.cookie p { font-size: var(--t-small); color: var(--fg-dim); flex: 1 1 24rem; margin: 0; }
.cookie-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ============================================================
   Legal pages
   ============================================================ */

.legal { max-width: 46rem; }
.legal h1 {
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-bottom: 0.9rem;
}
.legal .updated { margin-bottom: 2.6rem; }
.legal h2 {
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.016em;
  margin-top: 2.6rem;
  margin-bottom: 0.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hair);
}
.legal p, .legal li { color: var(--fg-dim); }
.legal p + p { margin-top: 0.85rem; }
.legal ul { margin-top: 0.8rem; }
.legal ul li {
  display: flex;
  gap: 0.7rem;
  padding-block: 0.32rem;
  font-size: var(--t-small);
}
.legal ul li::before { content: "—"; color: var(--fg-mute); flex: none; }
.legal dl { margin-top: 1rem; border-top: 1px solid var(--hair); }
.legal dl > div {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--hair);
  font-size: var(--t-small);
}
.legal dt { color: var(--fg); font-weight: 500; }
.legal dd { color: var(--fg-dim); }
.legal strong { color: var(--fg); font-weight: 600; }

.notice {
  border: 1px solid var(--hair-2);
  border-left: 3px solid var(--caution);
  border-radius: 3px;
  background: var(--ink-2);
  padding: 1.1rem 1.2rem;
  margin-bottom: 2.4rem;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--fg-dim);
}
.notice strong { color: var(--fg); }

@media (max-width: 40rem) {
  .legal dl > div { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ============================================================
   Motion — one orchestrated entrance, restrained reveals
   ============================================================ */

/* The hero enters as one orchestrated sequence, driven entirely by CSS.
   No JavaScript is involved on purpose: an opacity:0 default that waits for a
   script means one script failure hides the whole headline. `both` fill mode
   holds the from-state through the delay and the to-state afterwards, so the
   sequence works on first paint and degrades to plain visible text if this
   stylesheet never arrives.

   Delays live here rather than in style attributes so the deployed
   Content-Security-Policy can forbid inline styles outright — see _headers. */

@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.rise { animation: rise-in 0.62s var(--ease) both; }

.step-1 { animation-delay: 0ms; }
.step-2 { animation-delay: 85ms; }
.step-3 { animation-delay: 170ms; }
.step-4 { animation-delay: 255ms; }
.step-5 { animation-delay: 340ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Land on the finished state immediately rather than racing through it. */
  .rise { animation: none; }
}

@media print {
  .masthead, .cookie, .hero-actions, .enquire { display: none; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   Spacing that used to sit in style attributes
   Kept together so the relationship to the CSP is obvious.
   ============================================================ */

.head .lead { margin-top: 1.2rem; }
.lead + .lead { margin-top: 1rem; }

.defs-label { margin-top: 1.8rem; }
.defs { margin-top: 0.7rem; }

.stage .h3 + p { margin-top: 0.6rem; }

.report-note { margin-top: 1.6rem; max-width: 70ch; }

.enquire .h2 { margin-block: 1.1rem 1.2rem; }
.contact-block { margin-top: 2.4rem; }

.footer .brand { margin-bottom: 0.9rem; }

/* FormSubmit honeypot: off-canvas, never focusable, invisible to humans. */
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.legal .key + h1 { margin-top: 1rem; }
.legal .rule { margin-top: 3rem; }
.legal-foot {
  margin-top: 1.4rem;
  font: 500 var(--t-micro)/1.7 var(--mono);
  letter-spacing: 0.02em;
  color: var(--fg-mute);
}