@charset "utf-8";
/* ==========================================================================
   QORION
   Hand-written CSS. No framework, no build step, no preprocessor.

   The design is deliberately plain: one typeface, white pages, one deep navy,
   one warm accent, and no decoration. Whatever character the site has comes
   from what the words say, not from ornament around them.

   Contents
     01  Font
     02  Tokens
     03  Reset and base
     04  Typography
     05  Layout
     06  Masthead and navigation
     07  Buttons
     08  Hero
     09  Cards, lists, tables
     10  Process steps
     11  Forms
     12  Footer
     13  Motion, reduced motion, print
   ========================================================================== */

/* ==========================================================================
   01  FONT
   Public Sans (SIL OFL 1.1), one variable file, latin subset, 26 KB.
   The licence ships in /assets/fonts/.
   ========================================================================== */

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/public-sans-var-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;
}
/* Metric-matched fallback so the swap causes no layout shift. */
@font-face {
  font-family: "Public Sans Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 101%;
  ascent-override: 93%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* ==========================================================================
   02  TOKENS
   ========================================================================== */

:root {
  color-scheme: light;

  --bg: #ffffff;
  --bg-2: #f6f7f9;        /* form fields, table heads, soft panels */
  --ink: #16181d;         /* 17.8:1 on white */
  --muted: #575e68;       /*  6.6:1 on white */
  --line: #d8dade;        /* borders. decorative only */
  --line-strong: #8f96a0; /* borders that separate meaning. 3.2:1 */

  --navy: #101f3c;        /* the one brand colour */
  --on-navy: #f2f4f8;     /* 14.9:1 on navy */
  --navy-muted: #aab6cd;  /*  8.0:1 on navy */
  --navy-line: #35476b;

  --accent: #ff6b3d;      /* buttons on navy; small highlights. 5.8:1 vs navy */
  --link: #1a44a3;        /* links on white. 8.75:1 */

  --f: "Public Sans", "Public Sans Fallback", -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  --s-1: 4px;  --s0: 8px;  --s1: 12px; --s2: 16px; --s3: 24px;
  --s4: 32px;  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --w-page: 1120px;
  --w-text: 44rem;
  --gutter: clamp(1.25rem, 4.5vw, 3rem);
  --section-y: clamp(3.5rem, 7vw, 7rem);
  --header-h: 64px;

  --r: 6px;

  --z-content: 10;
  --z-header: 40;
  --z-menu: 30;
  --z-skip: 60;

  --t-fast: 120ms ease;
  --t-med: 200ms ease;

  --text-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);  /* 14 - 15 */
  --text-0: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);        /* 16 - 18 */
  --text-1: clamp(1.125rem, 1.07rem + 0.26vw, 1.3125rem);   /* 18 - 21 */
  --text-2: clamp(1.375rem, 1.3rem + 0.36vw, 1.625rem);     /* 22 - 26 */
  --text-3: clamp(1.75rem, 1.6rem + 0.7vw, 2.25rem);        /* 28 - 36 */
  --text-4: clamp(2.25rem, 2rem + 1.2vw, 3.125rem);         /* 36 - 50 */
  --text-5: clamp(2.5rem, 2.1rem + 2vw, 4rem);              /* 40 - 64 */
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0e1013;
    --bg-2: #16191e;
    --ink: #e7e9ec;
    --muted: #9aa2ad;
    --line: #272b31;
    --line-strong: #6b7480;
    --navy: #13233f;
    --navy-line: #2c3d5f;
    --accent: #ff7b50;
    --link: #8fb0ff;
  }
}


@media (min-width: 900px) {
  :root { --header-h: 72px; }
}

/* ==========================================================================
   03  RESET AND BASE
   ========================================================================== */

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

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f);
  font-size: var(--text-0);
  line-height: 1.6;
  min-height: 100svh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { padding-left: 1.2em; }
ul.plain, ol.plain { padding: 0; list-style: none; }

[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
::selection { background: var(--navy); color: var(--on-navy); }

:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: var(--s2); top: var(--s2); z-index: var(--z-skip);
  padding: 10px 18px; background: var(--navy); color: var(--on-navy);
  font-weight: 600; text-decoration: none; border-radius: var(--r);
  transform: translateY(-300%);
}
.skip-link:focus-visible { transform: none; }

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

/* ==========================================================================
   04  TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 { line-height: 1.12; font-weight: 800; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: var(--text-5); }
.h1-interior { font-size: var(--text-4); }
h2 { font-size: var(--text-3); }
h3 { font-size: var(--text-2); line-height: 1.2; }
h4 { font-size: var(--text-1); line-height: 1.3; }

p, li { max-width: 66ch; text-wrap: pretty; }
p + p { margin-top: var(--s3); }

.lede { font-size: var(--text-1); line-height: 1.5; color: var(--muted); max-width: 54ch; }
.prose > p + p { margin-top: var(--s3); }

strong, b { font-weight: 700; }

a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Leftover utility classes from earlier markup render as ordinary text. */
.mono, .mono-value, .eyebrow, .aside { font-family: inherit; font-size: inherit; }
.mono-value, .aside { color: var(--muted); font-size: var(--text-sm); }

/* ==========================================================================
   05  LAYOUT
   ========================================================================== */

.sheet { width: min(100% - (var(--gutter) * 2), var(--w-page)); margin-inline: auto; }
main { position: relative; z-index: var(--z-content); }

.section { padding-block: var(--section-y); border-top: 1px solid var(--line); }
.section:first-of-type { border-top: 0; }
.section__grid { display: block; }
.section__head { margin-bottom: var(--s4); max-width: var(--w-text); }
.section__head h2 + .lede, h1 + .lede { margin-top: var(--s2); }
.section__body { margin-top: var(--s4); }

.stack > * + * { margin-top: var(--s3); }
.stack-lg > * + * { margin-top: var(--s4); }

.plate-grid { display: grid; gap: var(--s3); }
@media (min-width: 900px) { .plate-grid--2 { grid-template-columns: 1fr 1fr; gap: var(--s4); } }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* ==========================================================================
   06  MASTHEAD AND NAVIGATION
   ========================================================================== */

.masthead {
  position: sticky; top: 0; z-index: var(--z-header);
  height: var(--header-h);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.masthead[data-scrolled="true"] { box-shadow: 0 1px 8px rgb(0 0 0 / 7%); }

.masthead__inner { display: flex; align-items: center; gap: var(--s3); height: 100%; }

.wordmark {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  padding: 10px 0; margin-right: auto;
}
.wordmark__mark { width: 27px; height: 27px; flex: none; }
.wordmark__mark .belt-dot { fill: currentColor; }
.wordmark__mark .belt-dot--lit { fill: var(--accent); }
.wordmark__text { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.01em; line-height: 1; }
.wordmark__sub { display: none; font-size: 0.8125rem; color: var(--muted); margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--line); }
@media (min-width: 1280px) { .wordmark__sub { display: inline; } }

.nav { display: none; gap: var(--s3); align-items: center; }
@media (min-width: 900px) { .nav { display: flex; } }

.nav__link {
  display: flex; align-items: center; min-height: 44px;
  padding-inline: 3px; /* keeps the shortest label's hit area at 44px+ */
  font-weight: 600; font-size: 0.9375rem;
  color: var(--muted); text-decoration: none;
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

/* With scripting off the hamburger can't open anything, so show the real nav
   and drop the sticky header. theme.js adds `.js` before first paint. */
html:not(.js) .nav { display: flex; flex-wrap: wrap; gap: var(--s2); row-gap: 0; }
html:not(.js) .menu-btn { display: none; }
html:not(.js) .masthead { position: static; height: auto; padding-block: var(--s0); }
html:not(.js) .masthead__inner { flex-wrap: wrap; }

.masthead__end { display: flex; align-items: center; gap: var(--s0); }


.menu-btn { display: grid; place-items: center; width: 44px; height: 44px; }
@media (min-width: 900px) { .menu-btn { display: none; } }
.menu-btn__bars { width: 20px; height: 14px; position: relative; }
.menu-btn__bars span {
  position: absolute; left: 0; width: 20px; height: 2px; border-radius: 1px;
  background: var(--ink); transition: transform var(--t-med), opacity var(--t-fast);
}
.menu-btn__bars span:nth-child(1) { top: 0; }
.menu-btn__bars span:nth-child(2) { top: 6px; }
.menu-btn__bars span:nth-child(3) { top: 12px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu {
  position: fixed; inset: var(--header-h) 0 0; z-index: var(--z-menu);
  background: var(--bg);
  padding: var(--s4) var(--gutter) var(--s5);
  overflow-y: auto;
  opacity: 0; transition: opacity var(--t-med);
}
.menu[hidden] { display: none; }
.menu[data-open="true"] { opacity: 1; }
.menu__link {
  display: flex; align-items: center; min-height: 56px;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-1); font-weight: 700;
  color: var(--ink); text-decoration: none;
}
.menu__link[aria-current="page"] { color: var(--link); }
.menu__direct { margin-top: var(--s4); display: grid; gap: var(--s1); color: var(--muted); font-size: var(--text-sm); }

/* ==========================================================================
   07  BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s0);
  min-height: 48px; padding: 0 22px;
  border: 1.5px solid transparent; border-radius: var(--r);
  font-weight: 700; font-size: 0.9375rem;
  text-decoration: none;
  flex: 0 0 auto; max-width: 100%;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:active { translate: 0 1px; }
.btn:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

.btn--primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--primary:hover { filter: brightness(1.25); }

.btn--secondary { color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { border-color: var(--ink); }

.btn--ghost { color: var(--link); padding-inline: var(--s0); text-decoration: underline; text-underline-offset: 3px; }
.btn--ghost .arrow { display: none; }

.btn:disabled { background: var(--bg-2); color: var(--muted); border-color: var(--line); cursor: not-allowed; }

/* ==========================================================================
   08  HERO
   The one place the brand colour is used at full size. A flat band, no
   texture, no imagery: the night is a colour here, not a picture.
   ========================================================================== */

.hero { background: var(--navy); color: var(--on-navy); border-bottom: 1px solid var(--navy-line); }
/* Padding is capped so the whole constellation clears the fold on a 1366px
   laptop with browser chrome eating ~100px of the screen. The sky should be
   visible the moment the page opens, not after a scroll. */
.hero__inner { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
.hero__grid { display: block; max-width: 46rem; }
@media (min-width: 1024px) {
  .hero__grid {
    display: grid; max-width: none;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s7); align-items: center;
  }
}

/* Orion, plotted from catalogue J2000 coordinates at an equal scale on both
   axes (tools/orion.py). Decorative: the honesty note carries the meaning in
   words. Solid marks what exists; the hollow circle is a bearing.

   On narrow screens there is no room beside the text, so the constellation
   hangs faint behind it instead, like sky behind a window. It is absolutely
   positioned, so it adds no height to the hero. */
.hero { position: relative; overflow: hidden; }
.hero__art {
  position: absolute;
  top: 50%; left: 50%;
  width: min(118vw, 560px);
  translate: -50% -50%;
  opacity: 0.32;
  pointer-events: none;
}
.hero__grid > div:first-child { position: relative; z-index: 1; }
@media (min-width: 1024px) {
  .hero__art { position: static; translate: none; width: auto; opacity: 1; }
}
.orion { width: 100%; height: auto; max-height: min(60vh, 460px); margin-inline: auto; }
.orion__seg { stroke: var(--navy-muted); stroke-width: 1; opacity: 0.45; }
.orion__belt { stroke: var(--navy-muted); stroke-width: 1.5; opacity: 0.8; }
.orion__ring { stroke: var(--navy-muted); stroke-width: 1; opacity: 0.6; }
.orion__star { fill: #fff; }
.orion__bearing { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 5; }
.orion__origin { fill: var(--accent); }
.orion__target { stroke: var(--accent); stroke-width: 1.5; }

/* --- The dusk sequence -----------------------------------------------------
   The entrance replays how Orion actually appears as the sky darkens: stars
   emerge brightest-first (Rigel, then Betelgeuse ... faint Mintaka last),
   each with a brief atmospheric flicker; then the Belt draws, because the
   Belt is what people recognise first; then the figure; then the bearing.
   Delays are stamped on each element as --d by tools/orion.py.

   Everything above this comment is the finished state, so with reduced
   motion, old browsers, or JS disabled the constellation is simply there. */
@media (prefers-reduced-motion: no-preference) {
  .orion__star {
    transform-box: fill-box; transform-origin: center;
    animation:
      orion-star-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--d) both,
      orion-twinkle 6.5s ease-in-out calc(var(--d) + 4s) infinite;
  }
  .orion__seg, .orion__belt {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: orion-draw 0.5s ease-out var(--d) both;
  }
  .orion__ring {
    transform-box: fill-box; transform-origin: center;
    animation: orion-ring-in 0.45s ease-out var(--d) both;
  }
  .orion__bearing {
    clip-path: inset(-30% 100% -30% -10%);
    animation: orion-wipe 0.75s ease-in-out var(--d) forwards;
  }
  .orion__origin {
    transform-box: fill-box; transform-origin: center;
    animation: orion-star-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--d) both;
  }
  .orion__target {
    transform-box: fill-box; transform-origin: center;
    animation: orion-ring-in 0.5s ease-out var(--d) both;
  }

  /* a star does not switch on; it flickers through the atmosphere, then holds */
  @keyframes orion-star-in {
    0%   { opacity: 0; transform: scale(0.3); }
    40%  { opacity: 1; transform: scale(1.15); }
    55%  { opacity: 0.35; }
    70%  { opacity: 1; }
    82%  { opacity: 0.55; }
    100% { opacity: 1; transform: scale(1); }
  }
  /* after settling, the faintest possible shimmer keeps the sky alive */
  @keyframes orion-twinkle {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.72; }
  }
  @keyframes orion-draw { to { stroke-dashoffset: 0; } }
  @keyframes orion-ring-in {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
  }
  @keyframes orion-wipe { to { clip-path: inset(-30% -10% -30% -10%); } }
}

.hero h1 { color: #fff; }
.hero .lede { color: var(--navy-muted); margin-top: var(--s3); max-width: 44ch; }
.hero .btn-row { margin-top: var(--s4); }

.hero .btn--primary { background: var(--accent); color: var(--navy); border-color: var(--accent); }
.hero .btn--primary:hover { filter: brightness(1.08); }
.hero .btn--secondary { color: #fff; border-color: var(--navy-muted); }
.hero .btn--secondary:hover { border-color: #fff; }
.hero a { color: #fff; }
.hero :focus-visible { outline-color: var(--accent); }

.honesty {
  margin-top: var(--s4);
  padding: var(--s2) var(--s3);
  border-left: 3px solid var(--accent);
  color: var(--on-navy);
  font-size: var(--text-sm);
  line-height: 1.55;
  max-width: 54ch;
}

/* ==========================================================================
   09  CARDS, LISTS, TABLES
   ========================================================================== */

.plate {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 32px);
}
.plate--accent { background: var(--bg-2); border-color: var(--line-strong); }
.plate--flush { background: transparent; }

.card__label {
  font-size: var(--text-sm); font-weight: 700; color: var(--muted);
  padding-bottom: var(--s1); margin-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}

/* The services / questions list. Plain rows, a number, a disclosure. */
.spec { border-top: 1px solid var(--line-strong); padding: 0; list-style: none; }
.spec__row { border-bottom: 1px solid var(--line); }

.spec__btn {
  display: grid; grid-template-columns: 2.5ch minmax(0, 1fr) auto;
  gap: var(--s2); align-items: baseline;
  width: 100%; min-height: 44px; padding: 18px 4px;
  text-align: left;
  transition: background-color var(--t-fast);
}
/* Rows that disclose have a fourth child - the plus - which needs its own track,
   or the grid wraps it onto a lonely second row. */
[data-disclosure] .spec__btn { grid-template-columns: 2.5ch minmax(0, 1fr) auto 18px; }
@media (min-width: 700px) {
  .spec__btn { grid-template-columns: 3.5ch minmax(0, 1fr) auto; gap: var(--s3); }
  [data-disclosure] .spec__btn { grid-template-columns: 3.5ch minmax(0, 1fr) auto 18px; }
}
button.spec__btn:hover { background: var(--bg-2); }

.spec__idx { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.spec__name { display: block; font-size: var(--text-2); font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.spec__desc { display: block; margin-top: var(--s-1); color: var(--muted); max-width: 56ch; }
.spec__meta { display: none; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; }
@media (min-width: 700px) { .spec__meta { display: block; } }

.spec__plus { position: relative; width: 14px; height: 14px; flex: none; align-self: center; transition: transform var(--t-med); }
.spec__plus::before, .spec__plus::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 2px; border-radius: 1px; background: var(--ink);
}
.spec__plus::after { transform: rotate(90deg); }
.spec__btn[aria-expanded="true"] .spec__plus { transform: rotate(45deg); }

.spec__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-med); }
.spec__row[data-open="true"] .spec__panel { grid-template-rows: 1fr; }
.spec__panel > div { overflow: hidden; }
.spec__panel-inner { padding: 0 4px var(--s3); display: grid; gap: var(--s1); list-style: none; }
@media (min-width: 700px) { .spec__panel-inner { padding-left: calc(3.5ch + var(--s3)); } }
.spec__panel li, .spec__panel-inner li {
  color: var(--muted); max-width: 62ch;
  padding-left: 1em; position: relative;
}
.spec__panel-inner li::before { content: "–"; position: absolute; left: 0; color: var(--line-strong); }

/* Tables: engagements, the log, fact blocks. */
.ledger { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ledger caption { text-align: left; color: var(--muted); padding-bottom: var(--s2); }
.ledger th, .ledger td {
  text-align: left; padding: 12px var(--s2) 12px 0;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.ledger th { font-weight: 700; border-bottom-color: var(--line-strong); white-space: nowrap; }
.ledger thead th { color: var(--muted); font-size: 0.8125rem; }
.ledger td { font-variant-numeric: tabular-nums; }
.ledger td.is-prose { color: var(--muted); }

.status { font-weight: 600; white-space: nowrap; }

.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.table-scroll table { min-width: 34rem; }
.scroll-hint { display: block; margin-top: var(--s0); color: var(--muted); font-size: var(--text-sm); }
@media (min-width: 700px) { .scroll-hint { display: none; } }

/* ==========================================================================
   10  PROCESS STEPS
   ========================================================================== */

.track { display: grid; gap: var(--s4); padding: 0; list-style: none; }
@media (min-width: 900px) { .track { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); } }
/* Inside a card the track is a sidebar summary, not a wall chart: stack it. */
.plate .track { grid-template-columns: 1fr; gap: var(--s3); }

.track__stage { padding-top: var(--s2); border-top: 3px solid var(--navy); }
.track__dur { font-size: var(--text-sm); font-weight: 600; color: var(--muted); }
.track__name { margin-top: var(--s-1); font-size: var(--text-2); }
.track__body { margin-top: var(--s1); color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.track__gets { margin-top: var(--s1); padding-top: var(--s1); border-top: 1px solid var(--line); font-size: var(--text-sm); }
.track__gets span { font-weight: 700; color: var(--muted); }

.track-client { margin-top: var(--s4); font-weight: 600; }
.track-client em { font-style: normal; font-weight: 400; color: var(--muted); }

/* ==========================================================================
   11  FORMS
   ========================================================================== */

.form { display: grid; gap: var(--s3); }
.field { display: grid; gap: var(--s0); }
.field > label { font-weight: 700; font-size: var(--text-sm); }
.field__help { color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
.field input, .field select, .field textarea {
  min-height: 50px; padding: 12px 14px; width: 100%;
  color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--line-strong); border-radius: var(--r);
  transition: border-color var(--t-fast);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--link); outline-offset: 2px;
}
.field [aria-invalid="true"] { border-color: #b3261e; }

.field__error { display: none; gap: var(--s0); align-items: baseline; font-size: var(--text-sm); }
.field__error b { color: #b3261e; }
@media (prefers-color-scheme: dark) {
  .field__error b, .field [aria-invalid="true"] { color: #ff8a80; border-color: #ff8a80; }
}
.field[data-invalid="true"] .field__error { display: flex; }

.field--check { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--s1); }
.field--check input { min-height: 0; width: 20px; height: 20px; padding: 0; margin-top: 3px; accent-color: var(--navy); }
.field--check label { font-weight: 400; font-size: var(--text-sm); }

.form__note { color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.form__status:empty { display: none; }
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ==========================================================================
   12  FOOTER
   ========================================================================== */

.colophon { background: var(--bg-2); border-top: 1px solid var(--line); padding-block: var(--s6) var(--s4); margin-top: var(--section-y); }
.colophon__grid { display: grid; gap: var(--s4); }
@media (min-width: 700px) { .colophon__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .colophon__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }

.colophon__head { font-weight: 700; font-size: var(--text-sm); padding-bottom: var(--s0); margin-bottom: var(--s1); border-bottom: 1px solid var(--line-strong); }
.colophon__list { display: grid; gap: 6px; padding: 0; list-style: none; }
.footer__link { display: inline-flex; align-items: center; min-height: 30px; color: var(--muted); text-decoration: none; }
.footer__link:hover { color: var(--link); text-decoration: underline; }

.colophon__legal { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); display: grid; gap: var(--s0); color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
.colophon__sign { display: none; }

/* ==========================================================================
   13  MOTION, REDUCED MOTION, PRINT
   Two kinds of motion exist: state feedback (hover, focus, disclosure), and
   the one-time dusk sequence on the hero constellation above. Nothing moves
   on scroll, and nothing loops except the sub-perceptual star shimmer.
   ========================================================================== */

.preload, .preload * { transition: none !important; animation: none !important; }

.theming, .theming * {
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease !important;
}

/* Old reveal classes may linger in markup; they must never hide anything. */
.reveal, .draw-rule { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn, .nav__link, .spec__btn, .field input, .field select, .field textarea {
    transition-duration: 120ms !important;
  }
}

@media print {
  .masthead, .menu, .btn, .menu-btn { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { background: #fff; color: #000; border-bottom: 2px solid #000; }
  .hero h1 { color: #000; }
}