/* ==========================================================================
   Montavera Holding Limited: shared stylesheet (index, privacy, 404)
   Newsreader (display) + Archivo (body), both self-hosted variable fonts.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Google serves one variable file per family across every weight, so each is
   declared once with a weight RANGE rather than as separate static faces.
   Ranges are the real axis limits: Newsreader 200-800, Archivo 100-900. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens ---------------------------------------------------------------
   Changing --accent restyles every accent on the site: the hero rule and CTA,
   eyebrow rules, the service ticks, the step numerals, the email link, focus
   rings. It is the whole premium signal, so it is used sparingly by design —
   never as a large fill. Contrast against --bg: text 16.15:1, muted 7.25:1,
   accent 7.21:1, all AAA. --hairline is 1.29:1: decorative only, and never
   the sole indicator of state or of an interactive boundary. */
:root {
  --accent:        #B99B5E;
  --accent-soft:   #D0B680;   /* hover + focus ring */

  --bg:            #0A0F1C;
  --raised:        #111829;
  --sunken:        #060A12;
  --text:          #E8ECF4;
  --muted:         #93A0B8;
  --hairline:      #1E2740;
  --hairline-soft: #161D30;

  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Every min and preferred term carries a rem component so the scale still
     responds to text-only zoom, not just page zoom. */
  --fs-display: clamp(2rem, 0.6rem + 6.6vw, 6.5rem);
  --fs-h2:      clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --fs-h3:      clamp(1.1875rem, 1.12rem + 0.3vw, 1.4375rem);
  --fs-numeral: clamp(2.5rem, 1.9rem + 2.2vw, 3.5rem);
  --fs-lede:    clamp(1.125rem, 1.04rem + 0.34vw, 1.375rem);
  --fs-body:    clamp(1rem, 0.975rem + 0.1vw, 1.0625rem);
  --fs-sm:      0.9375rem;
  --fs-label:   0.75rem;

  --max:      1140px;
  --narrow:   736px;
  --gutter:   clamp(1.25rem, 5vw, 3rem);
  --band:     clamp(4.5rem, 11vw, 9rem);   /* vertical rhythm between sections */
  --header-h: 76px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: dark;
}

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

html {
  /* Clears the fixed header for every in-page anchor, so a new section can
     never be added without it. */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  font-synthesis: none;            /* no faux-bolding of the variable faces */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.85rem 1.25rem;
  background: var(--accent);
  color: var(--bg);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus {
  left: var(--gutter);
  top: 0.75rem;
}

/* A visible focus ring everywhere, legible against the navy. --accent-soft is
   9.07:1 at worst against any ground on the site. */
:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-wrap: balance;
}

/* The display treatment belongs to the hero wordmark specifically — interior
   pages get an ordinary page title, not a tracked uppercase logotype. */
.hero h1 {
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Cancels the trailing tracking so the wordmark still aligns to the grid. */
  margin-right: -0.2em;
}

.page-head h1 {
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.018em;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.018em;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.3;
}

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1.25rem; }

a { color: var(--accent); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  flex: none;
  background: currentColor;
}

.lede {
  max-width: 46ch;
  color: var(--muted);
  font-size: var(--fs-lede);
  line-height: 1.55;
}

.prose p { max-width: 62ch; color: var(--muted); }
.prose p:first-child { color: var(--text); font-size: var(--fs-lede); line-height: 1.55; }

.num { font-variant-numeric: lining-nums tabular-nums; }

/* --- Wordmark ------------------------------------------------------------- */
/* The display serif, matching the hero h1 — one logotype across nav, footer and
   the OG card, rather than the same word set in two different faces. */
.wordmark {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  margin-right: -0.2em;
  white-space: nowrap;
}

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  transition: background 320ms var(--ease), border-color 320ms var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(10, 15, 28, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--hairline);
}

/* Transparency is decorative; where it is unsupported or unwanted, go solid
   rather than leaving unreadable text over the hero. */
@supports not (backdrop-filter: blur(1px)) {
  .site-header.is-scrolled { background: var(--bg); }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header.is-scrolled { background: var(--bg); backdrop-filter: none; }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
  transition: height 320ms var(--ease);
}
.site-header.is-scrolled .header-inner { height: 60px; }

.nav ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.85rem;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 200ms var(--ease);
}
.nav a:hover { color: var(--text); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle:hover { color: var(--text); }

/* Two bars, not three — it reads more refined at this scale. */
.nav-bars {
  display: block;
  position: relative;
  width: 22px;
  height: 9px;
  flex: none;
}
.nav-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 260ms var(--ease), opacity 200ms var(--ease);
}
.nav-bars span:first-child { top: 0; }
.nav-bars span:last-child  { bottom: 0; }

.nav-toggle[aria-expanded="true"] .nav-bars span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-bars span:last-child  { transform: translateY(-4px) rotate(-45deg); }

/* --- Hero ----------------------------------------------------------------
   Four generated layers, no photography. The architectural read comes from
   vertical rhythm plus a single warm light source plus grain — never from a
   gradient alone. The lightest achievable pixel stays below --raised, so
   headline contrast is >=14.9:1 everywhere and needs no scrim. */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: var(--header-h) 1fr auto;
  min-height: 100vh;
  /* svh so mobile browser chrome cannot crop it. Capped, because the content
     block is a fixed ~440px: past about 1040px the extra height is pure void,
     and letting it fill a 1400px display leaves half a screen of nothing. At
     that size the hero still covers ~75% of the view and lets the next section
     peek, which reads better than a dead band. */
  min-height: min(100svh, 1040px);
  overflow: hidden;
  /* L1 base field. 176deg, not 180, so the tonal seam is never exactly level. */
  background: linear-gradient(176deg, #0A0F1C 0%, #0E141D 58%, #0A0F1C 100%);
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* L2 raking light: a warm ellipse as the source, a cool one as sky bounce.
     Alphas stay <=.06 — above that it becomes a glow and reads crypto. */
  background:
    radial-gradient(78% 56% at 21% 6%,   rgba(185, 155, 94, 0.055) 0%, rgba(185, 155, 94, 0) 58%),
    radial-gradient(120% 80% at 86% 30%, rgba(122, 146, 178, 0.040) 0%, rgba(122, 146, 178, 0) 55%);
}

/* L3 the colonnade. Two periods, 181px and 43px — coprime, so the beat between
   them breaks the mechanical single-period look that gives cheap CSS patterns
   away. Lines are 1px hard-edged; blurred verticals read as a tech scanline.
   The radial mask makes the mullions emerge from the lower right and dissolve
   into shadow: a facade receding, not wallpaper. */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(232, 236, 244, 0.042) 0 1px, rgba(232, 236, 244, 0) 1px 181px),
    repeating-linear-gradient(90deg, rgba(232, 236, 244, 0.018) 0 1px, rgba(232, 236, 244, 0) 1px 43px);
  -webkit-mask-image: radial-gradient(118% 92% at 74% 112%, #000 0%, rgba(0, 0, 0, 0.45) 38%, transparent 66%);
          mask-image: radial-gradient(118% 92% at 74% 112%, #000 0%, rgba(0, 0, 0, 0.45) 38%, transparent 66%);
}

/* L4 grain. Kills the banding that large dark gradients show on 8-bit panels
   and gives the surface a printed quality. The tile is stitched, so repeating
   it leaves no seam. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/media/grain.svg');
  background-size: 160px 160px;
  background-repeat: repeat;
  opacity: 0.038;
  mix-blend-mode: overlay;
}

/* Centred with a downward bias rather than pinned to the bottom. Bottom-anchoring
   holds up at 900px but opens a dead half-screen above the wordmark on a tall
   display; centring keeps the proportion at any height, and the heavier top
   padding keeps the block below the optical centre. */
.hero-inner {
  position: relative;
  grid-row: 2;
  /* start, not center: centring splits the slack evenly, so on a tall display
     both gaps grow and the wordmark drifts past the halfway mark. Anchoring to
     the top with a capped padding holds the gap under the nav steady at every
     height, and the remaining space collects below the CTA where it reads as
     air rather than as a hole. */
  align-self: start;
  padding-top: clamp(3rem, 14vh, 10rem);
  padding-bottom: clamp(2rem, 6vh, 5rem);
}

.hero-content { max-width: 46ch; }

.hero-rule {
  width: 48px;
  height: 1px;
  margin-bottom: 1.5rem;
  background: var(--accent);
}

.hero-tagline {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: 0.02em;
  color: var(--text);
}

.hero-lede { margin-top: 1.25rem; }

.hero-foot {
  grid-row: 3;
  border-top: 1px solid var(--hairline);
}

/* --- CTA -----------------------------------------------------------------
   A bordered link, not a pill button. The border IS this control's boundary,
   so it uses --accent (7.21:1) rather than a hairline, which would fail 1.4.11. */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 2.5rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--accent);
  border-radius: 2px;
  color: var(--accent);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 220ms var(--ease), color 220ms var(--ease);
}
.cta:hover { background: rgba(185, 155, 94, 0.08); color: var(--accent-soft); }
.cta svg { flex: none; transition: transform 260ms var(--ease); }
.cta:hover svg { transform: translateY(3px); }

/* --- Section shell -------------------------------------------------------- */
.band { padding-block: var(--band); }
.band-raised { background: var(--raised); }

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* --- About ---------------------------------------------------------------
   Asymmetric: a short heading column against the prose. The sticky heading
   holds while the paragraphs scroll past it. */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
}
.about-head { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }

/* --- Services: ruled columns, not cards --------------------------------
   Filled, rounded, shadowed cards are the strongest "SaaS landing page" tell.
   The whole treatment here is a hairline with a short accent segment at its
   left — that single detail carries the premium read. */
.three-up {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 4rem);
  row-gap: 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.three-up > li {
  position: relative;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}
.three-up > li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.three-up h3 { margin-bottom: 0.75rem; font-weight: 500; }
.three-up p { color: var(--muted); }

/* --- Approach: a 4-step register ---------------------------------------
   The borders abut into one unbroken rule across the row, so the row reads as
   a graduated scale rather than four separate things. Numerals sit above the
   rule; a short accent tick descends from it at each step. */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps > li { position: relative; }
.step-num {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: var(--fs-numeral);
  font-weight: 300;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}
/* The inset is padding INSIDE the border box, so the rules still meet edge to
   edge across the row and read as one graduated scale. */
.step-body {
  padding-top: 1.25rem;
  padding-right: clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid var(--hairline);
}
.step-body::before {
  content: "";
  position: absolute;
  left: 0;
  width: 2px;
  height: 10px;
  margin-top: -1.25rem;
  background: var(--accent);
}
/* Uppercase sans here, rather than the serif used for service headings, so a
   process step never reads as a service. */
.steps h3 {
  margin-bottom: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}
.steps p { font-size: var(--fs-sm); color: var(--muted); }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  background: var(--sunken);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: 4rem;
}

/* Registered particulars, folded in from what used to be its own band. It is
   statutory detail rather than a selling point, and the footer is where a
   reader looks for it. */
.footer-corp {
  margin: 0;
  max-width: 24rem;
}
.footer-corp dt {
  margin-bottom: 0.25rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-corp dd {
  margin: 0 0 1.25rem;
  color: var(--text);
}
.footer-corp dd:last-child { margin-bottom: 0; }
.footer-corp address { font-style: normal; }
.site-footer .wordmark { font-size: var(--fs-body); }
.footer-tagline { margin-top: 0.6rem; }

.footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}
.footer-nav a {
  color: var(--muted);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 200ms var(--ease);
}
.footer-nav a:hover { color: var(--text); }

/* Two columns: the disclaimer was leaving the right half of this row empty, and
   the registered particulars are the same register of cold statutory text. */
.footer-legal {
  display: flex;
  justify-content: space-between;
  /* The particulars column is the taller of the two, so centre the disclaimer
     against it rather than leaving it hanging from the top. */
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding-block: 2.5rem;
  border-top: 1px solid var(--hairline-soft);
}
.footer-legal p { max-width: 62ch; margin: 0; }

.footer-base {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--hairline-soft);
}
/* The global `p + p` prose spacing would otherwise push the second item of this
   flex row 1.25rem below the first. */
.footer-base p { margin: 0; }

/* --- Interior pages (privacy, 404) --------------------------------------- */
.page-head {
  padding-top: calc(var(--header-h) + var(--band));
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.page-body { max-width: var(--narrow); padding-bottom: var(--band); }
.page-body h2 { margin-top: 3rem; font-size: var(--fs-h3); }
.page-body h2:first-child { margin-top: 0; }
.page-body p,
.page-body li { color: var(--muted); }
.page-body ul { padding-left: 1.25rem; }
.page-body li + li { margin-top: 0.5rem; }
.page-body a { color: var(--accent); }

.error-code {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 1;
  color: var(--accent);
}

/* --- Scroll reveal -------------------------------------------------------
   Gated on .js, which main.js sets on <html> before first paint. With JS off
   the class never lands, so nothing is ever hidden and no inline <style> or
   CSP hash is needed. */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Staggered by nth-child rather than an inline custom property, so the strict
   CSP needs no 'unsafe-inline' for style attributes. */
.js .three-up > li:nth-child(2) { transition-delay: 90ms; }
.js .three-up > li:nth-child(3) { transition-delay: 180ms; }
.js .steps > li:nth-child(2) { transition-delay: 90ms; }
.js .steps > li:nth-child(3) { transition-delay: 180ms; }
.js .steps > li:nth-child(4) { transition-delay: 270ms; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .about-head { position: static; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .steps .step-body { padding-right: 0; }
}

@media (max-width: 760px) {
  :root { --header-h: 60px; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    display: grid;
    align-content: start;
    padding: 1rem var(--gutter) 2rem;
    background: var(--raised);
    border-top: 1px solid var(--hairline);
    visibility: hidden;
    opacity: 0;
    transition: opacity 240ms var(--ease), visibility 240ms var(--ease);
  }
  .nav.is-open { visibility: visible; opacity: 1; }

  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a {
    /* flex, not inline-flex: the divider under each link should run the full
       width of the panel rather than stopping at the end of the word. */
    display: flex;
    min-height: 56px;
    padding-inline: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text);
    border-bottom: 1px solid var(--hairline);
  }

  .nav-toggle { display: inline-flex; }

  .three-up { grid-template-columns: minmax(0, 1fr); }
  .corp { grid-template-columns: minmax(0, 1fr); }
  .corp dt { padding-bottom: 0.35rem; }
  .corp dd { padding-top: 0; border-top: 0; }

  .footer-top { flex-direction: column; gap: 2.5rem; }
  .footer-legal { flex-direction: column; align-items: stretch; gap: 2rem; }
  .footer-corp { max-width: none; }
  .footer-nav ul { text-align: left; }
  .footer-nav ul { flex-direction: row; flex-wrap: wrap; gap: 1rem 1.5rem; text-align: left; }
}

@media (max-width: 620px) {
  /* Tracking costs ~0.2em per character; at nine characters that is most of a
     narrow screen, so the wordmark tightens rather than overflowing. */
  .hero h1 { letter-spacing: 0.14em; margin-right: -0.14em; }
  .hero { grid-template-rows: var(--header-h) 1fr auto; }
  .hero-inner { padding-bottom: 2.5rem; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .footer-base { flex-direction: column; gap: 0.5rem; }
}

/* Landscape phones are short enough that the hero stack can exceed the
   viewport; let it grow rather than clipping the CTA. */
@media (max-height: 520px) {
  .hero { min-height: auto; padding-bottom: 3rem; }
  .hero-inner { padding-bottom: 2rem; }
}

/* --- Reduced motion -----------------------------------------------------
   Kills the reveal, the smooth scroll, the hero entrance and every transition. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  .site-header, .nav-toggle, .hero-bg, .cta { display: none !important; }
  body { background: #fff; color: #000; }
  .band-raised, .site-footer { background: none; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  a { color: #000; text-decoration: underline; }
}