/* ==========================================================================
   OMNI Capital – stylesheet
   No build step. Edit this file directly.

   Colour is a three-layer token system, ported from the internal
   application's palette so the site and the tooling read as one house:
     layer 0  global ramps          (neutrals, accent families)
     layer 1  system tokens         (fills, strokes, texts, semantic roles)
     layer 2  component tokens      (fields, buttons, surfaces)
   Layer 0 is never referenced directly. Layer 1 changes with the scheme.
   ========================================================================== */

/* ===== Fonts ============================================================= */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ===== Layer 0 – global ramps ============================================
   Neutrals are generated in OKLCH: lightness is the step itself, hue a
   constant 250, chroma tapering to zero within 20% of either end of the
   ramp. Not grey – the surfaces carry a bluish cast – but the cast fades
   out near white and near black, so a near-white panel does not read as a
   blue wash on a white page. Only the steps used are listed.
   ======================================================================== */

:root {
  --n-100: #FFFFFF;  --n-96: #F0F2F4;  --n-92: #E1E5E9;  --n-88: #D3D8DE;
  --n-86:  #CBD2D8;  --n-76: #A9B2BB;  --n-64: #858D96;  --n-60: #79818A;
  --n-82:  #C0C7CE;  --n-56: #6D757E;  --n-46: #515961;  --n-42: #464E56;
  --n-38:  #3C434B;  --n-36: #373E46;  --n-34: #323940;  --n-30: #282F36;
  --n-24:  #192027;  --n-18: #0D1218;

  /* Accent families – only the steps the site uses. */
  --blue-50:  #EEF6FF;  --blue-400: #8AC3FF;  --blue-500: #5EACFF;
  --blue-600: #1B8FFF;  --blue-700: #0072DC;  --blue-800: #0057B3;
  --green-500: #00C687; --green-600: #00A976; --green-700: #008A62;
  --green-750: #006C4E; --green-50:  #DDFFE9;
  --amber-500: #FA8300; --amber-600: #E06700; --amber-700: #C14800;
  --amber-750: #A32700; --amber-50:  #FFF3E4;
  --violet-500: #CA82FF; --violet-600: #B855FF; --violet-700: #A000F5;
  --violet-750: #7C00C5; --violet-50: #FAF1FF;
  --cyan-500: #00BCD7;  --cyan-600: #00A1B7;  --cyan-700: #008395;
  --cyan-750: #006774;  --cyan-50:  #E5FAFF;
  --orange-400: #FF7B52; --orange-500: #F74900;

  --radius: 10px;
  --radius-lg: 16px;
  --measure: 68ch;
  --page: 1080px;
  --gutter: clamp(20px, 5vw, 40px);
  --band: clamp(72px, 11vh, 128px);
  --header-h: 67px;
  --land: calc(var(--header-h) + 32px);
}

/* ===== Layer 1 – system tokens, dark scheme (default) ==================== */

:root,
[data-scheme='dark'] {
  color-scheme: dark;

  --fill-1: var(--n-18);      /* page                                */
  --fill-2: var(--n-24);      /* panel, card                         */
  --fill-3: var(--n-30);      /* raised: header, field               */
  --fill-4: var(--n-36);      /* highest surface                     */
  --stroke-1: var(--n-34);    /* card edge, divider                  */
  --stroke-2: var(--n-42);    /* input border                        */
  --stroke-3: var(--n-56);    /* emphasis border                     */
  --text-1: var(--n-92);      /* primary        14.9:1 on the page   */
  --text-2: var(--n-76);      /* secondary       8.8:1               */
  --text-3: var(--n-60);      /* tertiary        4.8:1               */

  --alt-1: rgba(255, 255, 255, 0.04);   /* hover    */
  --alt-2: rgba(255, 255, 255, 0.08);   /* pressed  */
  --shade: rgba(0, 0, 0, 0.55);

  --accent-text: var(--blue-500);
  --accent-mark: var(--blue-600);
  --success-text: var(--green-600);
  --success-mark: var(--green-700);
  --warning-text: var(--amber-500);
  --warning-mark: var(--amber-600);
  --provenance-text: var(--violet-500);
  --info-text: var(--cyan-600);

  --on-accent: var(--fill-1);

  /* Layer 2 – components */
  --field-fill: var(--fill-2);
  --field-stroke: var(--stroke-2);
  --btn-primary-fill: var(--accent-mark);
  --btn-primary-text: var(--fill-1);

  --photo-scrim:
    linear-gradient(100deg, rgba(13,18,24,0.94) 0%, rgba(13,18,24,0.80) 34%,
                            rgba(13,18,24,0.28) 62%, rgba(13,18,24,0.10) 100%),
    linear-gradient(180deg, rgba(13,18,24,0.20) 0%, rgba(13,18,24,0.00) 30%,
                            rgba(13,18,24,0.55) 82%, rgba(13,18,24,0.96) 100%);
  --photo-brightness: 0.92;

  /* Calendar day cells, as the application declares them for this scheme. */
  --heat-regular: var(--green-500);
  --heat-holiday: var(--orange-500);
  --heat-override: var(--violet-600);
  --heat-closed: var(--n-38);
  --heat-blend: 68%;

  --contact-scrim: linear-gradient(180deg, rgba(13,18,24,0.93) 0%, rgba(13,18,24,0.86) 60%, rgba(13,18,24,0.90) 100%);
}

/* ===== Layer 1 – light scheme ============================================
   Pure white page, panels 4% apart, strokes darkening with intensity.
   Every role's text is its 700 step and its mark the 600.
   ======================================================================== */

[data-scheme='light'] {
  color-scheme: light;

  --fill-1: var(--n-100);
  --fill-2: var(--n-96);
  --fill-3: var(--n-92);
  --fill-4: var(--n-88);
  --stroke-1: var(--n-86);
  --stroke-2: var(--n-76);
  --stroke-3: var(--n-64);
  --text-1: var(--n-24);      /* 16.4:1 on the page */
  --text-2: var(--n-46);      /*  7.1:1             */
  --text-3: var(--n-56);      /*  4.7:1             */

  --alt-1: rgba(0, 0, 0, 0.03);
  --alt-2: rgba(0, 0, 0, 0.06);
  --shade: rgba(0, 0, 0, 0.28);

  --accent-text: var(--blue-800);
  --accent-mark: var(--blue-700);
  --success-text: var(--green-750);
  --success-mark: var(--green-700);
  --warning-text: var(--amber-750);
  --warning-mark: var(--amber-700);
  --provenance-text: var(--violet-750);
  --info-text: var(--cyan-750);

  --on-accent: var(--n-100);

  --field-fill: var(--fill-1);
  --field-stroke: var(--stroke-2);
  --btn-primary-fill: var(--accent-mark);
  --btn-primary-text: var(--n-100);

  --photo-scrim:
    linear-gradient(100deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.86) 36%,
                            rgba(255,255,255,0.30) 64%, rgba(255,255,255,0.06) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.00) 40%,
                            rgba(255,255,255,0.55) 84%, rgba(255,255,255,0.99) 100%);
  --photo-brightness: 1.02;

  --heat-regular: var(--green-600);
  --heat-holiday: var(--orange-400);
  --heat-override: var(--violet-500);
  --heat-closed: var(--n-82);
  --heat-blend: 74%;

  --contact-scrim: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.88) 60%, rgba(255,255,255,0.92) 100%);
}

/* ===== Base ============================================================== */

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

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

body {
  margin: 0;
  background: var(--fill-1);
  color: var(--text-1);
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

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

a { color: inherit; }

::selection { background: var(--accent-mark); color: var(--on-accent); }

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

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

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--gutter);
  top: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--btn-primary-fill);
  color: var(--btn-primary-text);
  border-radius: var(--radius);
  font-weight: 500;
}

/* ===== Typography ======================================================== */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 550;
  letter-spacing: -0.018em;
  line-height: 1.15;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 1.3rem + 3.8vw, 3.9rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.4rem); }
h3 { font-size: clamp(1.06rem, 0.98rem + 0.36vw, 1.24rem); letter-spacing: -0.01em; }
h4 { font-size: 0.95rem; font-weight: 550; letter-spacing: 0; }

p { margin: 0 0 1.05em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.06rem, 0.98rem + 0.42vw, 1.28rem);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 58ch;
}

.dim { color: var(--text-2); }
.faint { color: var(--text-3); }

.num {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ===== Layout ============================================================ */

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

.band { padding-block: var(--band); }

/* A nav jump lands the section title on --land, not the section's padding.
   The margin is negative whenever the band padding exceeds --land. */
section[id] { scroll-margin-top: calc(var(--land) - var(--band)); }
#home { scroll-margin-top: 0; }

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

/* Two-column section: sticky title on the left, content on the right. */
.split {
  --split-gap: clamp(28px, 5vw, 72px);
  display: grid;
  gap: var(--split-gap);
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(230px, 1fr) minmax(0, 1.85fr); }
  .split > .split-head {
    position: sticky;
    top: var(--land);
    align-self: start;
  }
}
.split-head h2 { margin-bottom: 14px; }
.split-head p { color: var(--text-2); max-width: 34ch; }

/* Full-width section: title and standfirst on one line, content beneath. */
.section-head {
  display: grid;
  gap: 16px clamp(32px, 6vw, 80px);
  margin-bottom: clamp(32px, 5vh, 52px);
}
@media (min-width: 820px) {
  .section-head {
    grid-template-columns: minmax(220px, 1fr) minmax(0, 1.55fr);
    align-items: start;
  }
}
.section-head p { color: var(--text-2); max-width: 56ch; margin: 0; }

@supports (text-box: trim-start cap alphabetic) {
  .section-head > *,
  .split > .split-head > :first-child,
  .split > :last-child > :first-child {
    text-box: trim-start cap alphabetic;
  }
}

/* A label that introduces a block inside a section. */
.block-label {
  font-size: 0.95rem;
  font-weight: 550;
  letter-spacing: 0;
  padding-bottom: 12px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--stroke-1);
  max-width: none;
}

/* ===== Header ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--fill-1) 86%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, padding 0.25s ease;
}
.site-header[data-scrolled='true'] { border-bottom-color: var(--stroke-1); }

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 66px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-weight: 550;
  letter-spacing: 0.11em;
  font-size: 0.9rem;
  white-space: nowrap;
}
.brand svg { width: 26px; height: 26px; flex: none; }
.brand .thin { font-weight: 350; color: var(--text-2); }

.site-nav {
  display: none;
  margin-left: auto;
  gap: clamp(16px, 2.4vw, 30px);
}
@media (min-width: 860px) { .site-nav { display: flex; } }

.site-nav a {
  font-size: 0.875rem;
  color: var(--text-2);
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.site-nav a:hover { color: var(--text-1); border-bottom-color: var(--stroke-3); }
.site-nav a[aria-current='true'] { color: var(--text-1); border-bottom-color: var(--accent-mark); }

.header-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (min-width: 860px) { .header-tools { margin-left: 26px; } }

/* Scheme control – system / light / dark, mirroring the application. */
.scheme {
  display: inline-flex;
  padding: 2px;
  gap: 1px;
  background: var(--fill-2);
  border: 1px solid var(--stroke-1);
  border-radius: 999px;
}
.scheme button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.scheme button:hover { background: var(--alt-1); color: var(--text-2); }
.scheme button[aria-pressed='true'] { background: var(--fill-4); color: var(--text-1); }
.scheme svg { width: 14px; height: 14px; }

.menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 34px;
  border: 1px solid var(--stroke-1);
  border-radius: var(--radius);
  background: var(--fill-2);
  color: var(--text-2);
  cursor: pointer;
}
@media (min-width: 860px) { .menu-toggle { display: none; } }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--stroke-1);
  background: var(--fill-1);
}
.mobile-nav[data-open='true'] { display: block; }
@media (min-width: 860px) { .mobile-nav { display: none !important; } }
.mobile-nav a {
  display: block;
  padding: 13px 0;
  font-size: 0.95rem;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--stroke-1);
}
.mobile-nav a:last-child { border-bottom: 0; }

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

.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(76px, 15vh, 168px) clamp(52px, 9vh, 104px);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('../img/matterhorn.webp') center 32% / cover no-repeat;
  filter: brightness(var(--photo-brightness));
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--photo-scrim);
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px 5px 10px;
  border: 1px solid color-mix(in srgb, var(--warning-mark) 50%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning-mark) 14%, transparent);
  color: var(--warning-text);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.status-chip::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--warning-mark);
  flex: none;
}

.status-chip-lg {
  padding: 9px 20px 9px 16px;
  font-size: 0.95rem;
  gap: 10px;
  border-width: 1.5px;
}
.status-chip-lg::before { width: 8px; height: 8px; }

.hero h1 { margin-block: 26px 20px; }
.hero .lede { max-width: 46ch; color: var(--text-1); opacity: 0.86; }

.lede-note {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--text-1) 18%, transparent);
  max-width: 46ch;
  font-size: 0.92rem;
  color: var(--text-2);
}

/* ===== Prose blocks ====================================================== */

.pillars {
  display: grid;
  gap: 1px;
  background: var(--stroke-1);
  border: 1px solid var(--stroke-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 680px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pillars { grid-template-columns: repeat(4, 1fr); } }

.pillar {
  background: var(--fill-1);
  padding: clamp(22px, 3vw, 32px);
}
.pillar h3 { margin-bottom: 9px; }
@media (min-width: 1000px) { .pillar h3 { min-height: 2.3em; } }
.pillar p { font-size: 0.925rem; color: var(--text-2); margin: 0; }
.pillar .mark {
  display: block;
  width: 22px;
  height: 2px;
  margin-bottom: 16px;
  background: var(--accent-mark);
  border-radius: 2px;
}

/* Client-facing prose, two columns on a wide screen. */
.prose-cols { display: grid; gap: clamp(26px, 4vw, 64px); }
@media (min-width: 900px) {
  .prose-cols { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
@media (min-width: 900px) {
  .prose-cols--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.prose-cols h3 { margin-bottom: 12px; }

/* Expandable detail: technical material behind a button, closed by default. */
.more > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--stroke-3);
  border-radius: 999px;
  color: var(--text-1);
  font-size: 0.88rem;
  font-weight: 550;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s, border-color 0.15s;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary:hover { background: var(--fill-2); border-color: var(--text-2); }
.more > summary svg { transition: transform 0.2s; }
.more[open] > summary svg { transform: rotate(180deg); }
.more:not([open]) .when-open,
.more[open] .when-closed { display: none; }
.more[open] > summary { margin-bottom: clamp(32px, 5vh, 52px); }
/* Inside a split section the button lines up with the text column it extends. */
.more--in-split { margin-top: clamp(28px, 4vh, 40px); }
@media (min-width: 900px) {
  .more--in-split {
    --split-gap: clamp(28px, 5vw, 72px);
    --split-head: max(230px, (100% - var(--split-gap)) / 2.85);
  }
  .more--in-split > summary { margin-left: calc(var(--split-head) + var(--split-gap)); }
}
/* Standard space between blocks inside a section. */
.block-gap { margin-top: clamp(56px, 8vh, 88px); }
.more[open] > summary + * { animation: more-in 0.35s ease-out; }
@keyframes more-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .more > summary svg { transition: none; }
  .more[open] > summary + * { animation: none; }
}
@media print {
  .more > summary { display: none; }
  .more > :not(summary) { display: block !important; }
}
.prose-cols p { color: var(--text-2); }

/* Labelled points: a short list where each item opens with its name. */
.points {
  list-style: none;
  margin: 4px 0 1.25em;
  padding: 0;
  max-width: var(--measure);
}
.points li {
  padding: 11px 0;
  border-top: 1px solid var(--stroke-1);
  color: var(--text-2);
}
.points li:last-child { border-bottom: 1px solid var(--stroke-1); }
.points strong { color: var(--text-1); font-weight: 550; }

/* Running text with subheadings, in the right-hand column of a split. */
.prose > h3 { margin: 0 0 11px; }
.prose > * + h3 { margin-top: clamp(30px, 4.5vh, 44px); }
.prose p { color: var(--text-2); }
.prose > .panel { margin: 26px 0 0; }

/* ===== Instrument panels =================================================
   Static illustrations of the internal working environment. Same tokens
   the application paints with, so they are a true likeness rather than a
   decorative mock-up.
   ======================================================================== */

.panel {
  background: var(--fill-2);
  border: 1px solid var(--stroke-1);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.8rem;
}
.panel-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  background: var(--fill-3);
  border-bottom: 1px solid var(--stroke-1);
}
.panel-bar strong { font-size: 0.76rem; font-weight: 550; }
.panel-bar .spacer { margin-left: auto; }

figure.panel { margin: 0; }
.limits {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.limits th,
.limits td {
  padding: 7px 13px;
  border-bottom: 1px solid var(--stroke-1);
  text-align: right;
  white-space: nowrap;
}
.limits th {
  padding-block: 8px 6px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-3);
}
.limits td {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}
.limits th:first-child,
.limits td:first-child {
  text-align: left;
  white-space: normal;
}
.limits td:first-child {
  font-family: inherit;
  color: var(--text-2);
}
.limits td.none { color: var(--text-3); }
.limits tbody tr:last-child td { border-bottom: 0; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 550;
  letter-spacing: 0.01em;
  border: 1px solid currentColor;
}
.tag::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.tag.ok { color: var(--success-text); }

/* ===== Timeline ========================================================== */

.timeline { position: relative; padding-left: 30px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, var(--stroke-3), var(--stroke-1));
}
.timeline li { position: relative; list-style: none; padding-bottom: 34px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline .step { position: relative; outline-offset: 4px; }
.timeline .step::before {
  content: '';
  position: absolute;
  left: -30px;
  top: 8px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--stroke-3);
}
.timeline li[data-now] .step::before {
  background: var(--accent-mark);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-mark) 22%, transparent);
}
.timeline li[data-next] .step::before {
  background: var(--fill-1);
  border: 1.5px solid var(--stroke-2);
}
.timeline ul { margin: 0; padding: 0; }
.timeline .when {
  font-size: 0.78rem;
  color: var(--text-3);
  margin-bottom: 3px;
}
.timeline li[data-now] .when { color: var(--accent-text); }
.timeline h3 { font-size: 1.02rem; margin-bottom: 5px; }
.timeline p { color: var(--text-2); font-size: 0.925rem; margin: 0; max-width: 58ch; }

/* On a wide screen with a mouse, the timeline becomes a list of steps with a
   single reading pane beside it. 'Now' is shown by default; pointing at (or
   tabbing to) any other step swaps the pane to that step. The list itself
   never moves, so nothing jumps under the pointer. Touch screens and narrow
   windows keep the plain list with every description visible. */
@supports selector(:has(a)) {
  @media (hover: hover) and (pointer: fine) and (min-width: 900px) {
    .timeline {
      display: grid;
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
      column-gap: clamp(28px, 4vw, 56px);
      align-items: start;
    }
    .timeline li { display: contents; }
    .timeline .step {
      grid-column: 1;
      padding-bottom: 26px;
      cursor: default;
    }
    .timeline li:last-child .step { padding-bottom: 0; }
    .timeline .step h3 { transition: color 0.2s; }
    .timeline .step::before { transition: background-color 0.2s, box-shadow 0.2s; }
    .timeline .desc {
      grid-column: 2;
      grid-row: 1 / span 5;
      padding: 2px 0 0 clamp(20px, 2.4vw, 32px);
      border-left: 1px solid var(--stroke-1);
      opacity: 0;
      visibility: hidden;
      transform: translateY(6px);
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
    }
    .timeline .desc p { max-width: 52ch; }

    /* which step is showing: the one pointed at or focused, otherwise 'Now' */
    .timeline li:hover .desc,
    .timeline li:focus-within .desc,
    .timeline:not(:has(li:hover, li:focus-within)) li[data-now] .desc {
      opacity: 1;
      visibility: visible;
      transform: none;
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
    }

    /* the other steps recede a little */
    .timeline:has(li:hover, li:focus-within) li:not(:hover, :focus-within) h3,
    .timeline:not(:has(li:hover, li:focus-within)) li:not([data-now]) h3 { color: var(--text-2); }
    .timeline li:not([data-now]):is(:hover, :focus-within) .step::before {
      background: var(--text-1);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--text-1) 14%, transparent);
    }
    .timeline .step:focus-visible { outline: 2px solid var(--accent-text); border-radius: 4px; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .timeline .desc { transform: none !important; transition: none !important; }
}
@media print {
  .timeline { display: block !important; }
  .timeline li { display: list-item !important; }
  .timeline .desc { opacity: 1 !important; visibility: visible !important; border: 0 !important; padding: 0 !important; }
}

/* ===== Contact =========================================================== */

.contact-grid { display: grid; gap: clamp(30px, 5vw, 64px); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.25fr; } }

.contact-direct a {
  font-size: 1.06rem;
  font-weight: 500;
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-text) 40%, transparent);
}
.contact-direct a:hover { border-bottom-color: currentColor; }

form { display: grid; gap: 17px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 0.83rem; color: var(--text-2); }
.field .hint { font-size: 0.76rem; color: var(--text-3); }

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.94rem;
  color: var(--text-1);
  background: var(--field-fill);
  border: 1px solid var(--field-stroke);
  border-radius: var(--radius);
  transition: border-color 0.15s ease;
}
textarea { resize: vertical; min-height: 118px; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-mark);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-mark) 18%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--text-3); }

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.83rem;
  color: var(--text-2);
}
.consent input { width: 16px; height: 16px; margin-top: 2px; flex: none; accent-color: var(--accent-mark); }
.consent label { max-width: 62ch; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.btn-primary { background: var(--btn-primary-fill); color: var(--btn-primary-text); }
.btn-primary:hover { opacity: 0.9; }
.btn-quiet {
  background: transparent;
  color: var(--text-1);
  border-color: var(--stroke-2);
}
.btn-quiet:hover { background: var(--alt-1); }
.btn:disabled { opacity: 0.5; cursor: default; }

.form-status { font-size: 0.86rem; margin: 0; }
.form-status[data-state='ok'] { color: var(--success-text); }
.form-status[data-state='error'] { color: var(--warning-text); }

/* ===== Notice / callout ================================================== */

.notice {
  padding: 16px 18px;
  border: 1px solid var(--stroke-1);
  border-left: 2px solid var(--warning-mark);
  border-radius: var(--radius);
  background: var(--fill-2);
  font-size: 0.88rem;
  color: var(--text-2);
  max-width: none;
}
.notice strong { color: var(--text-1); font-weight: 550; }
.prose .notice { margin-top: 22px; }

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

.site-footer {
  border-top: 1px solid var(--stroke-1);
  padding-block: 48px 34px;
  font-size: 0.86rem;
  color: var(--text-2);
}
.footer-top {
  display: grid;
  gap: 28px;
  margin-bottom: 34px;
}
@media (min-width: 760px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h4 { margin-bottom: 11px; color: var(--text-1); }
.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.site-footer a { color: var(--text-2); text-decoration: none; }
.site-footer a:hover { color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; }
.site-footer address { font-style: normal; color: var(--text-2); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding-top: 22px;
  border-top: 1px solid var(--stroke-1);
  font-size: 0.8rem;
  color: var(--text-3);
}
.footer-bottom p { margin: 0; }

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

.doc { padding-block: clamp(46px, 8vh, 78px) var(--band); }
.doc-head { max-width: var(--measure); margin-bottom: 42px; }
.doc-head h1 { font-size: clamp(1.85rem, 1.4rem + 1.9vw, 2.7rem); margin-bottom: 12px; }
.doc-head .updated { font-size: 0.83rem; color: var(--text-3); }

.doc-body { max-width: var(--measure); }
.doc-body h2 {
  font-size: 1.22rem;
  margin-top: 40px;
  margin-bottom: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--stroke-1);
}
.doc-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-body h3 { font-size: 1rem; margin-top: 24px; margin-bottom: 7px; }
.doc-body p, .doc-body li { color: var(--text-2); }
.doc-body ul, .doc-body ol { padding-left: 20px; margin: 0 0 1.05em; }
.doc-body li { margin-bottom: 7px; max-width: var(--measure); }
.doc-body dl { margin: 0 0 1.05em; }
.doc-body dt { font-weight: 550; color: var(--text-1); margin-top: 12px; }
.doc-body dd { margin: 3px 0 0; color: var(--text-2); }
.doc-body a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.86rem;
  color: var(--text-2);
  text-decoration: none;
  margin-bottom: 26px;
}
.back-link:hover { color: var(--text-1); }

/* ===== Error page ======================================================== */

.error-page {
  min-height: 62vh;
  display: grid;
  align-content: center;
  gap: 18px;
  padding-block: var(--band);
}

/* ===== Motion ============================================================
   One reveal per section, and nothing else moves on its own.
   ======================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.reveal.is-in { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  * { animation: none !important; }
}

/* ===== Print ============================================================= */

@media print {
  .site-header, .site-footer, .scheme, .menu-toggle, form { display: none !important; }
  body { background: #fff; color: #000; }
  .doc-body { max-width: none; }
  a { text-decoration: underline; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.85em; }
}


/* ===== Contact band ======================================================
   The second and last photograph on the page: a horizontal, atmospheric
   counterpart to the hero, so the page closes rather than stops.
   ======================================================================== */

.contact-band {
  position: relative;
  isolation: isolate;
  border-top: 1px solid var(--stroke-1);
  overflow: hidden;
}
.contact-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../img/cloud-inversion.webp") center 62% / cover no-repeat;
  filter: brightness(var(--photo-brightness));
}
.contact-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--contact-scrim);
}

/* Keeps a date from breaking between the day and the month. */
.doc-head .updated .num { white-space: nowrap; }