/* =============================================================================
   Sawaf Services — "Index"

   Editorial grotesk. The distinctiveness comes from typographic scale,
   a numbered index as the primary structural device, hairline rules,
   and exactly one saturated accent. No cards with shadows, no rounded
   corners, no gradient, no icon set, no illustration.

   Deliberately avoids: centred hero + three icon cards, SaaS violet,
   cream/serif/terracotta, dark-mode-only dev portfolio, glassmorphism.

   Type   Instrument Sans (grotesk) + Instrument Serif italic (pull quotes)
   Accent Cobalt #1B34D8 — 9.0:1 on the paper ground
   Grid   12 columns, asymmetric placement, nothing centred except the 404
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  color-scheme: light dark;

  --paper:    #f3f3f1;   /* page ground                                  */
  --paper-2:  #e8e8e4;   /* recessed band                                */
  --card:     #ffffff;   /* raised surface, inputs                       */

  --ink:      #111112;   /* headings                                     */
  --ink-2:    #43434a;   /* body prose — 8.8:1 on paper, 8.0:1 on band   */
  --ink-3:    #63636d;   /* muted labels — 5.4:1 on paper, 4.8:1 on band */

  --rule:     #d6d6d2;   /* structural hairline                          */
  --rule-2:   #e4e4e0;   /* light divider                                */

  --accent:   #1b34d8;   /* the one accent — 9.0:1 on paper              */
  --accent-2: #0f1f9e;   /* hover                                        */
  --on-accent:#ffffff;   /* 7.6:1 on accent                              */
  --wash:     #eceefb;   /* accent tint                                  */

  --sans:  "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
           "Segoe UI", Helvetica, Arial, sans-serif;
  --quote: "Instrument Serif", Georgia, "Times New Roman", serif;

  --gut: clamp(20px, 4.5vw, 64px);
  --max: 1320px;

  --step: clamp(56px, 9vw, 132px);   /* vertical section rhythm */
  --hair: 1px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #101013;
    --paper-2:  #17171b;
    --card:     #1c1c22;

    --ink:      #f5f5f3;
    --ink-2:    #b6b6be;   /* 8.9:1 on paper */
    --ink-3:    #8a8a94;   /* 5.4:1 on paper */

    --rule:     #2d2d35;
    --rule-2:   #23232a;

    --accent:   #8b9cff;   /* 7.5:1 on paper */
    --accent-2: #b3bfff;
    --on-accent:#0a0a1e;
    --wash:     #191a2c;
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.62;
  font-feature-settings: "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  font-weight: 600;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; height: auto; display: block; }
strong { color: var(--ink); font-weight: 600; }

a { color: var(--accent); text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
::selection { background: var(--accent); color: var(--on-accent); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--on-accent);
  padding: 14px 22px; font-size: 14px; font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------- structure */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}

.sec  { padding: var(--step) 0; }
.sec-sm { padding: clamp(44px, 6vw, 84px) 0; }
.band { background: var(--paper-2); }
.rule-top { border-top: var(--hair) solid var(--rule); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}

/* column helpers — only the few placements the site actually uses */
.c-1-7  { grid-column: 1 / 8;  }
.c-1-8  { grid-column: 1 / 9;  }
.c-1-5  { grid-column: 1 / 6;  }
.c-6-13 { grid-column: 6 / 13; }
.c-9-13 { grid-column: 9 / 13; }
.c-7-13 { grid-column: 7 / 13; }
.c-8-13 { grid-column: 8 / 13; }
.c-1-13 { grid-column: 1 / 13; }

@media (max-width: 900px) {
  .c-1-7, .c-1-8, .c-1-5, .c-6-13, .c-9-13, .c-7-13, .c-8-13 { grid-column: 1 / 13; }
}

/* ------------------------------------------------------------------- type */
.display {
  font-size: clamp(46px, 9.4vw, 132px);
  line-height: 0.93;
  letter-spacing: -0.045em;
  font-weight: 600;
}
.display .soft { color: var(--ink-3); }

.h1 {
  font-size: clamp(38px, 6.4vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.038em;
}

.h2 {
  font-size: clamp(28px, 4vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.032em;
  max-width: 24ch;
}

.h3 {
  font-size: clamp(19px, 1.55vw, 23px);
  line-height: 1.25;
  letter-spacing: -0.014em;
}

.h4 {
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.lede {
  font-size: clamp(19px, 1.85vw, 23px);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink-2);
  max-width: 34ch;
}
.lede-wide { max-width: 52ch; }

.prose { max-width: 60ch; }
.prose p { font-size: 17.5px; line-height: 1.68; }

.small { font-size: 15px; line-height: 1.6; color: var(--ink-3); }

/* the recurring micro-label: uppercase, wide-tracked, tabular */
.tag {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.tag-accent { color: var(--accent); }

/* section opener: rule, then number, then label */
.opener {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: clamp(30px, 4vw, 54px);
  border-bottom: var(--hair) solid var(--rule);
}
.opener .n {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.opener .t {
  font-size: 11px; font-weight: 600; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--ink-3);
}
.opener .t::before {
  content: ""; display: inline-block;
  width: 38px; height: var(--hair);
  background: var(--rule); vertical-align: middle;
  margin-right: 16px;
}

/* spacing utilities keep inline styles out of the markup */
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 18px; }
.mt-3 { margin-top: 28px; }
.mt-4 { margin-top: clamp(34px, 4vw, 52px); }
.mt-5 { margin-top: clamp(44px, 5.5vw, 76px); }

/* ----------------------------------------------------------------- header */
.top {
  position: sticky; top: 0; z-index: 90;
  background: var(--paper); /* fallback where color-mix is unsupported */
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: var(--hair) solid transparent;
  transition: border-color .2s ease;
}
.top.stuck { border-bottom-color: var(--rule); }

.top-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 18px; padding-bottom: 18px;
}

.brand { display: flex; align-items: baseline; gap: 11px; text-decoration: none; }
.brand .bn {
  font-size: 19px; font-weight: 600; letter-spacing: -0.032em; color: var(--ink);
}
.brand .bl {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-3);
}
.brand:hover .bn { color: var(--accent); }
@media (max-width: 520px) { .brand .bl { display: none; } }

.menu { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); }
.menu-links { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); }

.menu-links a {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-size: 14.5px; font-weight: 500; letter-spacing: -0.008em;
  color: var(--ink-2); padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
}
.menu-links a .ix {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.menu-links a:hover { color: var(--accent); border-bottom-color: var(--rule); }
.menu-links a:hover .ix { color: var(--accent); }
.menu-links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.menu-links a[aria-current="page"] .ix { color: var(--accent); }

.burger {
  display: none;
  background: none; border: var(--hair) solid var(--rule);
  color: var(--ink); font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 10px 14px; cursor: pointer;
}
.burger:hover { border-color: var(--accent); color: var(--accent); }

/* 920px, not 860: the nav carries five items since /rates was promoted into it,
   and the row starts crowding the brand before the old breakpoint arrives. */
@media (max-width: 920px) {
  .burger { display: inline-block; }
  .menu-links {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-top: var(--hair) solid var(--rule);
    border-bottom: var(--hair) solid var(--rule);
    padding: 6px var(--gut) 18px;
  }
  .menu-links.open { display: flex; }
  .menu-links a {
    padding: 15px 0; border-bottom: var(--hair) solid var(--rule-2);
    font-size: 17px;
  }
  .menu-links a[aria-current="page"] { border-bottom-color: var(--accent); }
  .menu-links .btn-in-menu {
    margin-top: 16px; border: 0; color: var(--on-accent);
    background: var(--accent); justify-content: center; padding: 15px;
  }
  .menu-links .btn-in-menu .ix { color: var(--on-accent); opacity: .7; }
  .menu-links .btn-in-menu:hover { background: var(--accent-2); color: var(--on-accent); }
}
@media (max-width: 640px) { .menu .btn-sm { display: none; } }
@media (min-width: 921px) { .menu-links .btn-in-menu { display: none; } }

/* ------------------------------------------------------------------- hero */
.hero { padding-top: clamp(48px, 7.5vw, 116px); padding-bottom: clamp(40px, 5vw, 76px); }
.hero .display { margin-bottom: 0; }
.hero-sub { margin-top: clamp(26px, 3vw, 40px); }

/* a stacked key/value list, hairline-separated */
.spec { border-top: var(--hair) solid var(--rule); }
.spec > div {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  padding: 16px 0; border-bottom: var(--hair) solid var(--rule-2);
}
.spec dt {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
}
.spec dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }

/* a horizontal strip of facts, vertical hairlines between */
.strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: var(--hair) solid var(--rule);
  border-bottom: var(--hair) solid var(--rule);
}
.strip > div {
  padding: 24px clamp(14px, 2vw, 28px) 26px;
  border-left: var(--hair) solid var(--rule-2);
}
.strip > div:first-child { border-left: 0; padding-left: 0; }
.strip .k {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3);
}
.strip .v {
  display: block; margin-top: 9px; font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.28; letter-spacing: -0.022em; color: var(--ink); font-weight: 600;
}
@media (max-width: 860px) {
  .strip { grid-template-columns: repeat(2, 1fr); }
  .strip > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .strip > div:nth-child(-n+2) { border-bottom: var(--hair) solid var(--rule-2); }
}
@media (max-width: 480px) {
  .strip { grid-template-columns: 1fr; }
  .strip > div { border-left: 0; padding-left: 0;
                 border-bottom: var(--hair) solid var(--rule-2); }
  .strip > div:last-child { border-bottom: 0; }
}

/* ------------------------------------------------------- the numbered index
   The primary structural device of the site: a rule-separated list where
   the number is the ornament. Used for services and for commitments.       */
.index { border-top: var(--hair) solid var(--rule); }

.index > li { border-bottom: var(--hair) solid var(--rule); }

.row {
  display: grid;
  grid-template-columns: 68px minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(12px, 2.6vw, 44px);
  align-items: start;
  padding: clamp(24px, 2.8vw, 38px) 0;
  transition: padding-left .28s cubic-bezier(.2,.7,.3,1);
}
.index > li:hover .row { padding-left: 12px; }

.row .num {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
  padding-top: 6px; transition: color .2s ease;
}
.index > li:hover .row .num { color: var(--accent); }

.row h3 { margin: 0; }
.row p { margin: 0; font-size: 16.5px; line-height: 1.62; color: var(--ink-2); }

@media (max-width: 760px) {
  .row {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 6px 14px; padding: 22px 0;
  }
  .row p { grid-column: 2; margin-top: 8px; }
  .index > li:hover .row { padding-left: 0; }
}

/* ------------------------------------------------------------------ ledger
   The second structural device, and the only one added since launch. Where
   .index is a numbered list of things I do, .ledger is a two-column statement
   of terms — item on the left, the plain answer on the right, hairline between.

   It is deliberately shaped like an invoice, because an invoice with no
   surprises on it is the thing this business is actually selling. Used on
   /rates, /faq and /areas. No hover state: it is a document, not a menu.      */
.ledger {
  border-top: var(--hair) solid var(--rule);
  margin: 0;
}

.ledger > div {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(10px, 3vw, 44px);
  align-items: baseline;
  padding: clamp(18px, 2.2vw, 26px) 0;
  border-bottom: var(--hair) solid var(--rule-2);
}
.ledger > div:last-child { border-bottom: var(--hair) solid var(--rule); }

.ledger dt {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.014em;
  color: var(--ink);
}

.ledger dd {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink-2);
}
.ledger dd p { margin: 0 0 0.7em; }
.ledger dd p:last-child { margin-bottom: 0; }

/* A figure in the right-hand column: tabular, so a column of them lines up. */
.ledger .fig {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}

/* "Free", "Included", "None" — the answers worth reading first. */
.ledger .yes { color: var(--accent); font-weight: 600; }

@media (max-width: 760px) {
  .ledger > div { grid-template-columns: 1fr; gap: 7px; padding: 18px 0; }
  .ledger dt {
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--accent);
  }
  .ledger dd { font-size: 16px; }
}

/* ------------------------------------------------------------- pull quote */
.quote {
  font-family: var(--quote);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(27px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.quote-who {
  display: block; margin-top: 22px;
  font-family: var(--sans); font-style: normal;
  font-size: 11px; font-weight: 600; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--ink-3);
}
blockquote { margin: 0; }

/* inline pull quote inside prose */
.prose .quote {
  font-size: clamp(23px, 2.9vw, 34px);
  margin: clamp(30px, 3.5vw, 44px) 0;
  padding-left: 24px;
  border-left: 2px solid var(--accent);
}

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  letter-spacing: -0.008em;
  background: var(--accent); color: var(--on-accent);
  border: 1.5px solid var(--accent);
  padding: 15px 24px; cursor: pointer; text-align: left; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); }
.btn:disabled { opacity: .5; cursor: default; }
.btn .arw { transition: transform .22s cubic-bezier(.2,.7,.3,1); }
.btn:hover .arw { transform: translateX(4px); }

.btn-ghost {
  background: transparent; color: var(--ink);
  border-color: var(--rule);
}
.btn-ghost:hover { background: transparent; color: var(--accent); border-color: var(--accent); }

.btn-sm { padding: 11px 17px; font-size: 13.5px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* a text link that reads as editorial rather than as a button */
.tlink {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-size: 15.5px; font-weight: 600; color: var(--accent);
  border-bottom: 1.5px solid var(--rule); padding-bottom: 3px;
  transition: border-color .18s ease;
}
.tlink:hover { border-bottom-color: var(--accent); }
.tlink .arw { transition: transform .22s cubic-bezier(.2,.7,.3,1); }
.tlink:hover .arw { transform: translateX(4px); }

/* ------------------------------------------------------------------ panel */
.panel {
  background: var(--card);
  border: var(--hair) solid var(--rule);
  padding: clamp(22px, 2.4vw, 32px);
}
.panel .h3 { margin-bottom: 8px; }
.panel .spec { border-top: 0; }
.panel .spec > div:first-child { padding-top: 0; }
.panel .spec > div:last-child { border-bottom: 0; padding-bottom: 0; }

.note {
  background: var(--wash);
  border-left: 2px solid var(--accent);
  padding: 20px 22px;
}
.note .h4 { margin-bottom: 6px; }
.note p { font-size: 16px; margin: 0; }

/* ---------------------------------------------------------------- process */
.steps { counter-reset: st; border-top: var(--hair) solid var(--rule); }
.steps > li {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
  gap: clamp(14px, 3vw, 48px);
  padding: clamp(26px, 3vw, 42px) 0;
  border-bottom: var(--hair) solid var(--rule);
}
.steps .st-h { display: flex; gap: 18px; align-items: baseline; }
.steps .st-n {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 600; letter-spacing: -0.05em;
  line-height: 0.9; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.steps p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }
@media (max-width: 860px) {
  .steps > li { grid-template-columns: 1fr; gap: 14px; }
}

/* -------------------------------------------------------------------- cta */
.cta { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
       gap: clamp(26px, 4vw, 64px); align-items: end; }
@media (max-width: 820px) { .cta { grid-template-columns: 1fr; align-items: start; gap: 28px; } }
.cta-side { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }

/* ------------------------------------------------------------------- form */
.form-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
@media (max-width: 940px) { .form-grid { grid-template-columns: 1fr; gap: 40px; } }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 560px) { .pair { grid-template-columns: 1fr; gap: 0; } }

.f { margin-bottom: 22px; }
.f > label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;
}
.f > label .req { color: var(--accent); }
.f > label .opt { font-weight: 500; letter-spacing: 0.13em; opacity: .72; }
.f input, .f textarea, .f select {
  width: 100%; font-family: var(--sans); font-size: 16.5px;
  color: var(--ink); background: var(--card);
  border: var(--hair) solid var(--rule);
  border-radius: 0; padding: 13px 14px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.f textarea { min-height: 168px; resize: vertical; line-height: 1.6; }
.f input:focus, .f textarea:focus, .f select:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.f input::placeholder, .f textarea::placeholder { color: var(--ink-3); opacity: .75; }
.f [aria-invalid="true"] { border-color: #b3341b; }
@media (prefers-color-scheme: dark) { .f [aria-invalid="true"] { border-color: #f08163; } }
.f .err {
  display: none; margin-top: 7px;
  font-size: 13.5px; color: #97301a; font-weight: 500;
}
@media (prefers-color-scheme: dark) { .f .err { color: #f4a48c; } }
.f .err.on { display: block; }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fineprint { font-size: 13.5px; line-height: 1.6; color: var(--ink-3);
             margin: 18px 0 0; max-width: 54ch; }

.flash { display: none; padding: 18px 20px; margin-bottom: 26px;
         border-left: 2px solid; font-size: 16px; line-height: 1.6; }
.flash.on { display: block; }
.flash .h4 { margin-bottom: 4px; }
.flash.good { border-color: var(--accent); background: var(--wash); }
.flash.bad  { border-color: #b3341b; background: #f9eeeb; color: #6d2415; }
.flash.bad .h4 { color: #6d2415; }
@media (prefers-color-scheme: dark) {
  .flash.bad { background: #2a1512; color: #f3b3a1; }
  .flash.bad .h4 { color: #f7cec1; }
}

/* ----------------------------------------------------------------- footer */
.foot { border-top: var(--hair) solid var(--rule);
        padding: clamp(48px, 6vw, 84px) 0 36px; background: var(--paper-2); }
.foot-grid {
  display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; gap: 32px; } }

.foot .fh {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px;
}
.foot-links { display: flex; flex-direction: column; gap: 11px; }
.foot-links a { font-size: 15.5px; color: var(--ink-2); }
.foot-links a:hover { color: var(--accent); }
.foot p { font-size: 15.5px; color: var(--ink-2); max-width: 40ch; }

.foot-base {
  margin-top: clamp(40px, 5vw, 64px); padding-top: 24px;
  border-top: var(--hair) solid var(--rule);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-3);
}
.foot-base a { color: var(--ink-3); }
.foot-base a:hover { color: var(--accent); }

/* -------------------------------------------------------------------- 404 */
.void { text-align: center; padding-top: clamp(80px, 13vw, 190px);
        padding-bottom: clamp(80px, 13vw, 190px); }
.void .display { font-size: clamp(72px, 20vw, 240px); letter-spacing: -0.055em; }
.void .lede { margin-left: auto; margin-right: auto; max-width: 44ch; }

/* ----------------------------------------------------------------- reveal */
/* Visible by default. The hiding only happens once the one-line inline
   script in <head> has added `.js`, so a reader without JavaScript — or
   before the deferred bundle runs — never sees a blank page. */
.js [data-rise] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
  transition-delay: var(--d, 0ms);
}
.js [data-rise].in { opacity: 1; transform: none; }
.rm [data-rise] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-rise] { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------------ print */
@media print {
  .top, .foot-base, .btn, .burger { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sec { padding: 18pt 0; }
  a { color: #000; }
}