/* Concept F — Future Systems. Premium technology: hued navy (dark-first), luminous cyan with periwinkle, mint and a rare
   magenta; a live canvas system graph as the hero, engineering detail rendered as light. Tokens: kenzal-future-systems. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--colour-paper); color: var(--colour-ink); font-family: var(--font-text); font-size: var(--text-s2); line-height: 1.62; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--colour-paper); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; text-wrap: balance; line-height: 1.1; letter-spacing: -0.025em; font-weight: 600; }
p { margin: 0; }
a { color: var(--colour-brand); text-underline-offset: 0.22em; }
a:hover { color: var(--colour-brand-hover); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: 1300px; margin-inline: auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
@media (max-width: 600px) { .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } }

.review-band { background: var(--colour-paper-raised); color: var(--colour-ink-soft); font-size: var(--text-s0); border-bottom: 1px solid var(--colour-rule); }
.review-band .wrap { padding-block: 7px; }
.review-band p { max-width: 72ch; }

/* Masthead */
.masthead { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--colour-paper); border-bottom: 1px solid var(--colour-rule); }
.masthead__inner { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--colour-ink); margin-right: auto; }
.brand__mark { width: 42px; height: 42px; overflow: visible; }
.hx { fill: var(--colour-support-soft); stroke: var(--colour-glow); stroke-width: 1.6; filter: drop-shadow(0 0 6px var(--colour-glow)); }
.hk { fill: none; stroke: var(--colour-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hd { fill: var(--colour-mint); }
.brand__word { font-family: var(--font-display); font-weight: 700; font-size: var(--text-s4); letter-spacing: 0.24em; line-height: 1; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.site-nav ul a { display: inline-block; padding: 10px 14px; border-radius: 8px; color: var(--colour-ink-soft); text-decoration: none; font-weight: 500; font-size: var(--text-s1); }
.site-nav ul a:hover { color: var(--colour-ink); background: var(--colour-paper-raised); }
.site-nav__actions { display: flex; align-items: center; gap: 10px; }
.ghost-btn, .nav-toggle { min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--colour-rule-strong); background: var(--colour-paper); color: var(--colour-ink); font: inherit; font-size: var(--text-s1); cursor: pointer; }
.ghost-btn--small { min-height: 40px; font-size: var(--text-s0); font-family: var(--font-mono); }
.ghost-btn:hover, .nav-toggle:hover { border-color: var(--colour-glow); color: var(--colour-brand); }
.masthead .nav-toggle { display: none; }
@media (max-width: 980px) {
  .masthead .nav-toggle { display: inline-block; }
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 16px; background: var(--colour-paper); border-bottom: 1px solid var(--colour-rule);
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); }
  .site-nav[data-open="false"] { display: none; }
  .site-nav ul { flex-direction: column; }
  .site-nav ul a { display: block; padding: 14px 8px; font-size: var(--text-s3); color: var(--colour-ink); border-bottom: 1px solid var(--colour-rule); border-radius: 0; }
  .site-nav__actions { justify-content: space-between; }
}

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 26px; border-radius: 12px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: box-shadow 200ms, background-color 200ms, border-color 200ms, color 200ms; }
.btn--small { min-height: 44px; padding: 8px 16px; font-size: var(--text-s1); }
.btn--glow { background: var(--colour-brand); color: var(--colour-brand-ink); box-shadow: 0 0 0 1px var(--colour-brand), 0 8px 30px -10px var(--colour-glow); }
.btn--glow:hover { background: var(--colour-brand-hover); color: var(--colour-brand-ink); box-shadow: 0 0 0 1px var(--colour-brand-hover), 0 10px 40px -6px var(--colour-glow); }
.btn--outline { border-color: var(--colour-rule-strong); color: var(--colour-ink); }
.btn--outline:hover { border-color: var(--colour-glow); color: var(--colour-brand); }

/* Hero */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(50% 60% at 78% 40%, color-mix(in srgb, var(--colour-glow) 16%, transparent), transparent 70%),
  linear-gradient(var(--colour-rule) 1px, transparent 1px) 0 0 / 56px 56px,
  linear-gradient(90deg, var(--colour-rule) 1px, transparent 1px) 0 0 / 56px 56px;
  mask-image: radial-gradient(80% 80% at 60% 40%, #000 30%, transparent 85%); opacity: 0.9; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; padding-block: 72px 88px; }
.hero h1 { font-size: clamp(var(--text-s6), 4.4vw, var(--text-s8)); line-height: 1.04; letter-spacing: -0.035em; }
.hero__lede { margin-top: 24px; font-size: var(--text-s3); line-height: 1.55; color: var(--colour-ink-soft); max-width: 42ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
@media (max-width: 1040px) { .hero__grid { grid-template-columns: minmax(0, 1fr); padding-block: 48px 64px; } .hero__lede { max-width: 56ch; } }

.system { position: relative; display: flex; flex-direction: column; }
.system__controls { order: -1; }
.system__graph { position: relative; margin: 0; aspect-ratio: 1.35; border-radius: 20px; border: 1px solid var(--colour-rule); background: color-mix(in srgb, var(--colour-paper-raised) 70%, transparent); overflow: hidden; }
.system__graph canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.node-labels span { position: absolute; transform: translate(-50%, 22px); white-space: nowrap; font-family: var(--font-mono); font-size: 12px; padding: 3px 9px; border-radius: 6px; background: var(--colour-paper); border: 1px solid var(--colour-rule-strong); color: var(--colour-ink); }
.node-labels span.core { transform: translate(-50%, 32px); border-color: var(--colour-glow); color: var(--colour-brand); }
.code { position: absolute; left: -32px; bottom: -40px; width: min(440px, 78%); border-radius: 14px; background: var(--colour-paper); border: 1px solid var(--colour-rule-strong); box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.7), 0 0 0 1px color-mix(in srgb, var(--colour-glow) 25%, transparent); overflow: hidden; }
.code__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--colour-rule); }
.code__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--colour-rule-strong); }
.code__bar span { margin-left: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--colour-ink-mute); }
.code pre { margin: 0; padding: 14px 16px 16px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; color: var(--colour-ink-soft); }
.code .k { color: var(--colour-support); } .code .s { color: var(--colour-mint); } .code .f { color: var(--colour-brand); }
.system__controls { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-bottom: 14px; font-size: var(--text-s0); color: var(--colour-ink-mute); }
@media (max-width: 1040px) { .code { position: relative; left: auto; bottom: auto; width: 100%; margin-top: -32px; margin-left: 0; } .system__controls { justify-content: space-between; } }
@media (max-width: 600px) { .system__graph { aspect-ratio: 0.95; } .node-labels span { font-size: 11px; padding: 2px 6px; } }

/* Sections */
.section { padding-block: 104px; }
.section--raised { background: var(--colour-paper-raised); }
@media (max-width: 700px) { .section { padding-block: 64px; } }
.section-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: end; margin-bottom: 48px; }
.section-head h2 { font-size: var(--text-s7); letter-spacing: -0.035em; line-height: 1.02; }
.section-head p { color: var(--colour-ink-soft); font-size: var(--text-s3); line-height: 1.5; max-width: 50ch; }
@media (max-width: 800px) { .section-head { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 32px; } .section-head h2 { font-size: var(--text-s6); } }

.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cap { position: relative; display: grid; gap: 14px; align-content: start; padding: 32px; border-radius: var(--radius-ceiling); border: 1px solid var(--colour-rule); background: var(--colour-paper-raised); }
.cap::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 2px; border-radius: 2px; background: var(--colour-glow); opacity: 0.9; }
.cap:nth-child(3n+2)::before { background: var(--colour-support); } .cap:nth-child(3n)::before { background: var(--colour-mint); }
.cap__icon { width: 56px; height: 56px; fill: none; stroke: var(--colour-glow); stroke-width: 1.8; stroke-linecap: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--colour-glow) 60%, transparent)); }
.cap__icon .fill { fill: color-mix(in srgb, var(--colour-glow) 20%, transparent); }
.cap__icon .warm { stroke: var(--colour-accent); } .cap__icon .dot { fill: var(--colour-glow); }
.cap h3 { font-size: var(--text-s4); }
.cap p { color: var(--colour-ink-soft); }
.spec { list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--colour-rule); display: grid; gap: 6px; font-family: var(--font-mono); font-size: var(--text-s0); color: var(--colour-ink-soft); }
.spec li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--colour-mint); vertical-align: middle; }
.advice { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px; margin-top: 20px; padding: 28px 32px; border-radius: var(--radius-ceiling); border: 1px dashed var(--colour-rule-strong); }
.advice h3 { font-size: var(--text-s3); }
.advice p { color: var(--colour-ink-soft); }
@media (max-width: 960px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .advice { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
@media (max-width: 600px) { .cap { padding: 24px; } .advice { padding: 22px; } }

/* Work */
.work { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.case { display: grid; gap: 20px; align-content: start; padding: 20px; border-radius: var(--radius-ceiling); border: 1px solid var(--colour-rule); background: var(--colour-paper); }
.case--lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; gap: 40px; padding: 28px; }
.case__frame { border-radius: 10px; overflow: hidden; border: 1px solid var(--colour-rule-strong); box-shadow: 0 0 0 1px color-mix(in srgb, var(--colour-glow) 18%, transparent), 0 20px 50px -30px var(--colour-glow); }
.case__frame--brand { aspect-ratio: 16 / 10; display: grid; place-items: center; background:
  radial-gradient(60% 60% at 50% 120%, color-mix(in srgb, var(--colour-glow) 45%, transparent), transparent 70%), var(--colour-inverse-bg); }
.case__frame--brand span { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.3em; font-size: clamp(20px, 3.4vw, 36px); color: #e6ecff; }
.case__text h3 { font-size: var(--text-s5); margin: 10px 0 8px; }
.case__text > p:not(.label):not(.case__meta) { color: var(--colour-ink-soft); }
.case__meta { margin-top: 10px; font-family: var(--font-mono); font-size: var(--text-s0); color: var(--colour-ink-mute); }
.label { display: inline-block; font-family: var(--font-mono); font-size: var(--text-s0); padding: 3px 10px; border-radius: 6px; border: 1px solid var(--colour-rule-strong); color: var(--colour-ink-soft); }
.label--client { border-color: var(--colour-accent); color: var(--colour-accent); }
@media (max-width: 900px) { .work { grid-template-columns: minmax(0, 1fr); } .case--lead { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 20px; } }

/* Lab */
.lab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lab__item { display: grid; gap: 12px; align-content: start; padding: 28px; border-radius: var(--radius-ceiling); border: 1px solid var(--colour-rule); background: var(--colour-paper-raised); }
.lab__item h3 { font-size: var(--text-s4); }
.lab__stage { font-family: var(--font-mono); font-size: var(--text-s0); color: var(--colour-brand); }
.lab__stage--rc { color: var(--colour-mint); }
.lab__item > p:not(.lab__stage) { color: var(--colour-ink-soft); }
.lab__item a { font-weight: 600; width: fit-content; padding-block: 4px; }
.meter { height: 6px; border-radius: 99px; background: var(--colour-rule); overflow: hidden; margin-top: 6px; }
.meter i { display: block; height: 100%; width: var(--w); border-radius: 99px; background: var(--colour-glow); box-shadow: 0 0 12px var(--colour-glow); }
.meter-key { display: grid; grid-template-columns: repeat(4, 1fr); max-width: min(calc((100% - 20px) / 2), 420px); margin-top: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--colour-ink-mute); }
@media (max-width: 900px) { .lab { grid-template-columns: minmax(0, 1fr); } .meter-key { max-width: none; } }

/* Circuit (a real sequence) */
.circuit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; counter-reset: c; position: relative; }
.circuit::before { content: ""; position: absolute; top: 20px; left: 20px; right: 20px; height: 2px; background: linear-gradient(90deg, var(--colour-glow), var(--colour-support), var(--colour-mint)); box-shadow: 0 0 12px var(--colour-glow); }
.circuit li { counter-increment: c; position: relative; padding-top: 64px; }
.circuit li::before { content: counter(c, decimal-leading-zero); position: absolute; top: 0; left: 0; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--text-s0); color: var(--colour-brand); background: var(--colour-paper-raised); border: 1px solid var(--colour-glow); }
.circuit h3 { font-size: var(--text-s3); margin-bottom: 6px; }
.circuit p { color: var(--colour-ink-soft); font-size: var(--text-s1); }
@media (max-width: 900px) { .circuit { grid-template-columns: minmax(0, 1fr); gap: 0; } .circuit::before { top: 20px; bottom: 20px; left: 20px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--colour-glow), var(--colour-mint)); } .circuit li { padding: 8px 0 28px 64px; } }

/* Contact console */
.console { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; padding: 48px; border-radius: 24px; border: 1px solid var(--colour-rule-strong); background:
  radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--colour-glow) 14%, transparent), transparent 70%), var(--colour-paper-raised); }
.console__intro h2 { font-size: var(--text-s7); letter-spacing: -0.035em; line-height: 1.02; }
.console__intro p { margin-top: 18px; color: var(--colour-ink-soft); font-size: var(--text-s3); line-height: 1.5; max-width: 38ch; }
@media (max-width: 900px) { .console { grid-template-columns: minmax(0, 1fr); padding: 28px 20px; gap: 28px; } .console__intro h2 { font-size: var(--text-s6); } }
.form { display: grid; gap: 22px; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field--wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .form__grid { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-weight: 600; font-size: var(--text-s1); }
.field__opt { font-weight: 400; color: var(--colour-ink-mute); }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 10px 14px; font: inherit; color: var(--colour-ink); background: var(--colour-paper); border: 1px solid var(--colour-rule-strong); border-radius: 10px; appearance: none; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--colour-ink) 50%), linear-gradient(135deg, var(--colour-ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field select option { background: var(--colour-paper); color: var(--colour-ink); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--colour-glow); }
.field [aria-invalid="true"] { border-color: var(--colour-accent); border-width: 2px; }
.field__hint { font-size: var(--text-s0); color: var(--colour-ink-mute); max-width: 60ch; }
.field__error { font-size: var(--text-s1); font-weight: 600; color: var(--colour-accent); }
.form__summary { border: 1px solid var(--colour-accent); border-left-width: 4px; border-radius: 10px; padding: 14px 18px; background: var(--colour-paper); }
.form__summary h3 { font-size: var(--text-s3); margin-bottom: 6px; }
.form__summary ul { margin: 0; padding-left: 18px; }
.form__summary a { color: var(--colour-accent); font-weight: 600; }
.form__notice { border-left: 4px solid var(--colour-mint); background: var(--colour-paper); padding: 14px 16px; border-radius: 8px; }
.form > .btn { justify-self: start; }

/* Footer */
.footer { background: var(--colour-inverse-bg); color: var(--colour-inverse-ink); padding-block: 64px 28px; border-top: 1px solid var(--colour-rule); }
.footer a { color: var(--colour-inverse-ink); text-decoration: none; } .footer a:hover { text-decoration: underline; color: var(--colour-inverse-ink); }
.footer :focus-visible { outline-color: var(--focus-ring-inverse); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 6fr) repeat(2, minmax(0, 3fr)); gap: 40px; }
.footer__word { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.3em; font-size: var(--text-s5); margin-bottom: 14px; }
.footer__brand p:not(.footer__word) { color: var(--colour-inverse-mute); margin-top: 6px; max-width: 42ch; }
.footer__h { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-s0); color: var(--colour-inverse-mute); margin-bottom: 10px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; } .footer ul a { display: inline-block; padding-block: 6px; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--colour-inverse-mute); color: var(--colour-inverse-mute); font-size: var(--text-s1); }
@media (max-width: 760px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } }

.legal-dialog { max-width: min(480px, calc(100vw - 32px)); border: 1px solid var(--colour-rule-strong); border-radius: var(--radius-ceiling); background: var(--colour-paper-raised); color: var(--colour-ink); padding: 28px; }
.legal-dialog::backdrop { background: rgb(3 7 26 / 0.7); }
.legal-dialog h2 { font-size: var(--text-s4); margin-bottom: 12px; }
.legal-dialog p { color: var(--colour-ink-soft); margin-bottom: 20px; }

/* Production (owner finalisation commission, 2026-11-04): six service areas, planned-integration notes, direct
   contact details, skip link. Same tokens and idiom as above; no new colours. */
@media (max-width: 640px) { .caps { grid-template-columns: minmax(0, 1fr); } }
.cap--lead { border-color: color-mix(in srgb, var(--colour-glow) 45%, var(--colour-rule)); }
.cap__icon .warm-stroke { stroke: var(--colour-accent); }
.case__next { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--colour-rule); font-size: var(--text-s1); color: var(--colour-ink-soft); }
.case__next span { display: inline-block; margin-right: 8px; font-family: var(--font-mono); font-size: var(--text-s0); color: var(--colour-support); }
.direct { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.direct li { display: grid; gap: 2px; }
.direct__label { font-family: var(--font-mono); font-size: var(--text-s0); color: var(--colour-ink-mute); }
.direct a { font-size: var(--text-s3); font-weight: 600; overflow-wrap: anywhere; width: fit-content; padding-block: 2px; }
.form__how { font-size: var(--text-s0); color: var(--colour-ink-mute); max-width: 60ch; }
.footer .footer__contact { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.footer .footer__contact a { display: inline-block; padding-block: 2px; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--colour-brand); color: var(--colour-brand-ink); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; color: var(--colour-brand-ink); }
main:focus { outline: none; }
/* Legal page (privacy, cookies, accessibility) */
.masthead__end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.legal { padding-block: 56px 88px; }
.legal__wrap { max-width: 78ch; }
.legal h1 { font-size: var(--text-s7); letter-spacing: -0.035em; line-height: 1.05; }
.legal__lede { margin-top: 16px; color: var(--colour-ink-soft); font-size: var(--text-s3); }
.legal__toc { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.legal__toc a { display: inline-block; padding-block: 4px; font-weight: 600; }
.legal section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--colour-rule); scroll-margin-top: 96px; }
.legal h2 { font-size: var(--text-s5); }
.legal h3 { font-size: var(--text-s3); margin-top: 24px; }
.legal p { margin-top: 12px; color: var(--colour-ink-soft); }
.legal code { font-family: var(--font-mono); font-size: 0.92em; }
.footer__base--solo { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 600px) { .legal h1 { font-size: var(--text-s6); } .masthead__end .ghost-btn { display: none; } }