/* ==========================================================================
   Consultana
   Static site stylesheet. No build step, no frameworks, no external requests.
   System fonts only, so nothing is fetched from a third party and no cookie
   or consent banner is needed.

   House style matches the review report PDFs: navy #1F3A5F on warm white,
   serif headings, numbered sections, thin rules.
   ========================================================================== */

:root {
  --navy:      #1f3a5f;
  --navy-deep: #16283f;
  --ink:       #16181d;
  --muted:     #5a6472;
  --rule:      #d7dbe1;
  --rule-soft: #e8ebee;
  --band:      #f3f6f8;
  --ground:    #fdfdfb;
  --accent:    #9a6b1f;   /* restrained ochre, used sparingly */

  --sev-1: #8f2626;
  --sev-2: #955e0f;
  --sev-3: #4a6b8a;
  --sev-4: #5f6675;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --wrap: 1080px;
  --prose: 68ch;
  --step: clamp(1.5rem, 4vw, 3rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --navy:      #a8c4e6;
    --navy-deep: #cfe0f5;
    --ink:       #e6e8ec;
    --muted:     #9aa3b0;
    --rule:      #363b45;
    --rule-soft: #262a32;
    --band:      #1c2027;
    --ground:    #14171c;
    --accent:    #d8a94f;

    --sev-1: #e08585;
    --sev-2: #dfae63;
    --sev-3: #93b4d4;
    --sev-4: #9aa3b0;
  }
}

/* --------------------------------------------------------------- reset */

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

/* The hidden attribute must win over any display rule set by a class,
   otherwise elements JS hides (the form fallback, the unconfigured contact
   rows) stay on screen because .form-grid sets display:grid. */
[hidden] { display: none !important; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

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

/* --------------------------------------------------------------- layout */

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.prose > p,
.prose > ul,
.prose > ol { max-width: var(--prose); }

section {
  padding-block: var(--step);
}

section.tinted {
  background: var(--band);
  border-block: 1px solid var(--rule-soft);
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: 2rem;
}

/* --------------------------------------------------------------- type */

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--navy);
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.15rem); }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.32rem); }
h4 {
  font-family: var(--sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 0.5em;
}

p { margin: 0 0 1.05em; }
p.lead {
  font-size: clamp(1.1rem, 2.3vw, 1.32rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 60ch;
}

/* section number, the "01" marker above a heading */
.num {
  display: block;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-bottom: 0.9rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--rule);
}
.num span { color: var(--navy); font-weight: 600; }

.kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

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

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

strong { font-weight: 650; }

ul, ol { padding-left: 1.15rem; margin: 0 0 1.05em; }
li { margin-bottom: 0.4rem; }

ul.ticks { list-style: none; padding-left: 0; }
ul.ticks li {
  padding-left: 1.6rem;
  position: relative;
}
ul.ticks li::before {
  /* a short navy rule as the marker, drawn rather than typed, so no dash
     character ends up in the copy */
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.85rem;
  height: 2px;
  background: var(--navy);
}

blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--band);
  border-left: 3px solid var(--navy);
  font-family: var(--serif);
  font-size: 1.05rem;
}
blockquote p:last-child { margin-bottom: 0; }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--band);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}

/* --------------------------------------------------------------- header */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  /* Fixed colours rather than theme variables: in the dark theme --navy is a
     light blue, and white on it fails AA. This pair passes in both themes. */
  background: #1f3a5f;
  color: #ffffff;
  padding: 0.75rem 1.15rem;
  z-index: 100;
  text-decoration: none;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

.site-head {
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}

.brand {
  font-family: var(--serif);
  /* Eases from 1.35rem on a phone to 1.55rem once there is room, so the
     wordmark holds its own against the nav without crowding a narrow header. */
  font-size: clamp(1.35rem, 1.16rem + 0.6vw, 1.55rem);
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
/* The TLD sits back a shade so "consultana" still reads as the name. */
.brand .tld {
  color: var(--muted);
  font-weight: 400;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.45rem 0.7rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
}

.site-nav > ul {
  display: flex;
  gap: 1.4rem;
  list-style: none;
  margin: 0; padding: 0;
  align-items: center;
}
/* Every top-level item is a flex box of the same content height, so the ul's
   align-items:center lines their text baselines up.

   Mixing an inline <a> with a block-level <button> in a flex row does NOT work:
   the anchors get positioned by their line box baseline and the button by its
   box centre, and the two land 6px apart. Keep these display values in step if
   another control ever joins the nav. */
.site-nav > ul > li > a,
.site-nav > ul > li > .sub-toggle {
  display: inline-flex;
  align-items: center;
}

.site-nav a {
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--ink);
  padding-block: 0.35rem;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  line-height: 1.62;
}
.site-nav a:hover { border-bottom-color: var(--rule); }
.site-nav a[aria-current="page"] {
  color: var(--navy);
  border-bottom-color: var(--navy);
  font-weight: 600;
}
/* ---- Reviews submenu ---- */

.site-nav .has-sub { position: relative; }

.site-nav .sub-toggle {
  font: inherit;
  font-size: 0.92rem;
  font-family: var(--sans);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink);
  padding: 0.35rem 0;
  cursor: pointer;
  gap: 0.4rem;
  line-height: 1.62;
  border-top: 2px solid transparent;
}
.site-nav .sub-toggle:hover { border-bottom-color: var(--rule); }
.site-nav .sub-toggle.is-current {
  color: var(--navy);
  border-bottom-color: var(--navy);
  font-weight: 600;
}

.site-nav .caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.65;
  transition: transform 0.15s ease;
}
.site-nav .has-sub.is-open .caret { transform: rotate(180deg); }

.subnav { list-style: none; margin: 0; padding: 0; }

.subnav a {
  display: block;
  text-decoration: none;
  color: var(--ink);
  border: 0;
}
.subnav a[aria-current="page"] {
  color: var(--navy);
  font-weight: 600;
}

@media (min-width: 861px) {
  .subnav {
    display: none;
    position: absolute;
    top: calc(100% + 0.4rem);
    left: -0.75rem;
    min-width: 17rem;
    background: var(--ground);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: 0 10px 28px rgba(22, 24, 29, 0.12);
    padding: 0.3rem;
    z-index: 60;
  }
  .has-sub.is-open .subnav { display: block; }
  .subnav a { padding: 0.55rem 0.7rem; border-radius: 3px; }
  .subnav a:hover { background: var(--band); }
}

@media (max-width: 860px) {
  .site-nav .sub-toggle {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0.8rem 0;
  }
  .subnav { display: none; padding: 0 0 0.6rem 0.2rem; }
  .has-sub.is-open .subnav { display: block; }
  .subnav li { border-bottom: 0; }
  .subnav a { padding: 0.55rem 0; }
}

.site-nav .btn-sm {
  border: 1px solid var(--navy);
  border-radius: 3px;
  padding: 0.4rem 0.85rem;
  color: var(--navy);
  font-weight: 600;
}
.site-nav .btn-sm:hover {
  background: var(--navy);
  color: var(--ground);
  border-bottom-color: var(--navy);
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--ground);
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem 0 1rem;
  }
  .site-nav.open { display: block; }
  .site-nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(100% - 2.5rem, var(--wrap));
    margin-inline: auto;
  }
  .site-nav > ul > li { margin: 0; border-bottom: 1px solid var(--rule-soft); }
  .site-nav > ul > li > a { display: block; padding: 0.8rem 0; border-bottom: 0; }
  .site-nav .btn-sm { display: inline-block; margin-top: 0.8rem; }
  .site-head .wrap { position: relative; }
}

/* --------------------------------------------------------------- hero */

.hero {
  padding-block: clamp(3rem, 9vw, 6rem) clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--rule);
}
.hero h1 { max-width: 20ch; }
.hero .rule {
  width: 76px;
  height: 3px;
  background: var(--navy);
  margin-bottom: 1.9rem;
}
.hero .lead { margin-bottom: 1.9rem; }

.page-head {
  padding-block: clamp(2.2rem, 6vw, 3.6rem) clamp(1.4rem, 3vw, 2rem);
  border-bottom: 1px solid var(--rule);
}
.page-head h1 { max-width: 22ch; margin-bottom: 0.5rem; }
.page-head .lead { margin-bottom: 0; }

/* --------------------------------------------------------------- buttons */

.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.btn {
  display: inline-block;
  background: var(--navy);
  color: var(--ground);
  border: 1px solid var(--navy);
  border-radius: 3px;
  padding: 0.72rem 1.4rem;
  font-family: var(--sans);
  font-size: 0.97rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--navy-deep); border-color: var(--navy-deep); text-decoration: none; }

.btn.ghost {
  background: transparent;
  color: var(--navy);
}
.btn.ghost:hover { background: var(--band); }

/* --------------------------------------------------------------- grids */

.grid {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr));
}
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }

/* Exactly four items. auto-fit gives 3 + 1 orphan at common widths, so pin
   these to a 2 x 2 block instead. */
.grid.quad { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .grid.quad { grid-template-columns: 1fr 1fr; }
}

.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.2rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
  .split.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* --------------------------------------------------------------- cards */

.card {
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.5rem 1.5rem 1.35rem;
  display: flex;
  flex-direction: column;
}
.card h3 { margin-bottom: 0.45rem; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card p { color: var(--ink); font-size: 0.96rem; }
.card p:last-child { margin-bottom: 0; }
.card .code {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 0.7rem;
}
.card .more {
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.tinted .card { background: var(--ground); }

/* tier cards */
.tier {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.6rem 1.5rem;
  background: var(--ground);
  display: flex;
  flex-direction: column;
}
.tier.feature { border-color: var(--navy); border-width: 2px; }
.tier .flag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.6rem;
}
.tier h3 { margin-bottom: 0.2rem; }
.tier .price {
  font-family: var(--serif);
  font-size: 2.1rem;
  color: var(--navy);
  line-height: 1.1;
  margin: 0.5rem 0 0.1rem;
}
.tier .price .from {
  display: block;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.15rem;
}
.tier .vat {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 0.9rem;
}
.tier .meta {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule-soft);
}
.tier ul { font-size: 0.94rem; margin-bottom: 1.1rem; }
.tier .btn { margin-top: auto; text-align: center; }

.sibling-nav {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}
.sibling-nav a {
  display: block;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.95rem 1.1rem;
  text-decoration: none;
  background: var(--ground);
  height: 100%;
}
.sibling-nav a:hover { border-color: var(--navy); background: var(--band); }
.sibling-nav .c {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.sibling-nav .t {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--navy);
}

/* --------------------------------------------------------------- steps */

.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 3.2rem;
  padding-bottom: 1.6rem;
  margin-bottom: 0;
  border-left: 1px solid var(--rule);
  margin-left: 1.05rem;
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: -1.05rem;
  top: 0;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  background: var(--ground);
  border: 1px solid var(--navy);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--navy);
  font-weight: 600;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps h3 { margin-bottom: 0.3rem; font-size: 1.12rem; }
.steps p { font-size: 0.96rem; margin-bottom: 0; }
.steps .when {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  display: block;
  margin-top: 0.35rem;
}

/* --------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; margin-bottom: 1.4rem; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}
caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 0.6rem;
}
th {
  text-align: left;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ground);
  background: var(--navy);
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--navy);
  font-weight: 600;
}
td {
  padding: 0.62rem 0.8rem;
  border: 1px solid var(--rule);
  vertical-align: top;
}
tbody tr:nth-child(even) td { background: var(--band); }

.sev-cell { white-space: nowrap; }

.sev {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.86rem;
  white-space: nowrap;
}
.sev.s1 { color: var(--sev-1); }
.sev.s2 { color: var(--sev-2); }
.sev.s3 { color: var(--sev-3); }
.sev.s4 { color: var(--sev-4); }

/* --------------------------------------------------------------- callout */

.callout {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--navy);
  border-radius: 3px;
  background: var(--band);
  padding: 1.15rem 1.35rem;
  margin-bottom: 1.4rem;
}
.callout :last-child { margin-bottom: 0; }
.callout h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }

.stat-row {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  margin-block: 1.6rem;
}
.stat {
  border-top: 2px solid var(--navy);
  padding-top: 0.8rem;
}
.stat .n {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--navy);
  line-height: 1;
  display: block;
  margin-bottom: 0.3rem;
}
.stat .l { font-size: 0.9rem; color: var(--muted); }

/* --------------------------------------------------------------- forms */

.form-grid { display: grid; gap: 1.1rem; max-width: 42rem; }
@media (min-width: 700px) {
  .form-grid .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
}

label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
label .opt { font-weight: 400; color: var(--muted); }

input[type="text"], input[type="email"], select, textarea {
  width: 100%;
  min-width: 0;   /* form controls carry an intrinsic width that overflows narrow grids */
  font: inherit;
  font-size: 0.97rem;
  padding: 0.62rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--ground);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--navy); }
textarea { min-height: 8.5rem; resize: vertical; }

.hint { font-size: 0.84rem; color: var(--muted); margin-top: 0.3rem; }

.hp { position: absolute; left: -9999px; }

.form-status {
  padding: 0.9rem 1.1rem;
  border-radius: 3px;
  border: 1px solid var(--rule);
  background: var(--band);
  font-size: 0.94rem;
}
.form-status[hidden] { display: none; }
.form-status.ok { border-left: 3px solid var(--navy); }
.form-status.err { border-left: 3px solid var(--sev-1); }

/* --------------------------------------------------------------- contact list */

.contact-methods { list-style: none; padding: 0; margin: 0 0 1.6rem; }
.contact-methods li {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
  flex-wrap: wrap;
}
.contact-methods .lbl {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 0 0 8.5rem;
}
.contact-methods .val { flex: 1 1 12rem; min-width: 0; }
.contact-methods .val a { overflow-wrap: anywhere; }

/* Below about 360px the label and value cannot sit side by side, so stack. */
@media (max-width: 380px) {
  .contact-methods .lbl { flex-basis: 100%; margin-bottom: 0.2rem; }
}
.contact-methods .val small { display: block; color: var(--muted); font-size: 0.86rem; }

/* --------------------------------------------------------------- faq */

details {
  border-bottom: 1px solid var(--rule);
  padding: 0.9rem 0;
}
summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--navy);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  font-family: var(--mono);
  color: var(--muted);
  flex: none;
}
details[open] summary::after { content: "\2212"; }
details > *:not(summary) { margin-top: 0.8rem; }
details p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- cta band */

.cta {
  background: var(--navy);
  color: #fff;
  padding-block: clamp(2.4rem, 6vw, 3.8rem);
}
.cta h2, .cta a { color: #fff; }
.cta p { color: rgba(255,255,255,0.88); max-width: 52ch; }
.cta .btn {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}
.cta .btn:hover { background: rgba(255,255,255,0.86); border-color: rgba(255,255,255,0.86); }
.cta .btn.ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}
.cta .btn.ghost:hover { background: rgba(255,255,255,0.12); }

@media (prefers-color-scheme: dark) {
  .cta { background: #1b2432; border-block: 1px solid var(--rule); }
  .cta h2, .cta a { color: var(--navy-deep); }
  .cta p { color: var(--ink); }
  .cta .btn { background: var(--navy); color: #14171c; border-color: var(--navy); }
  .cta .btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
}

/* --------------------------------------------------------------- footer */

.site-foot {
  border-top: 1px solid var(--rule);
  background: var(--band);
  padding-block: 2.4rem 1.6rem;
  font-size: 0.92rem;
}
.site-foot .cols {
  display: grid;
  gap: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  margin-bottom: 1.8rem;
}
.site-foot h2 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 0.7rem;
}
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-bottom: 0.4rem; }
.site-foot a { text-decoration: none; color: var(--ink); }
.site-foot a:hover { text-decoration: underline; }

/* the title block, a nod to a drawing sheet without overdoing it */
.title-block {
  border: 1px solid var(--rule);
  border-radius: 3px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--ground);
}
.title-block div {
  padding: 0.6rem 0.8rem;
  border-right: 1px solid var(--rule);
}
.title-block div:last-child { border-right: 0; }
.title-block b {
  display: block;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 0.12rem;
}

.legal {
  margin: 1.2rem auto 0;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  max-width: 92ch;   /* stops the centred lines running the full width on a wide screen */
}
/* Clearly more than the line gap inside each paragraph, so the two read as
   separate statements rather than one wrapped block. */
.legal.disclaimer { margin-top: 1.5rem; }

/* --------------------------------------------------------------- reveal */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- print */

@media print {
  .site-head, .site-nav, .cta, .nav-toggle, .skip { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; }
  .reveal { opacity: 1; transform: none; }
}