/* Music To Heal — warm ivory paper, warm dark ink, a calm teal accent.
   The palette is meant to read as a recital programme rather than a clinic:
   nothing pure white, nothing pure black, and no alarm colour anywhere near
   the interface. Every pair below is verified against WCAG — body text clears
   7:1 (AAA) and borders clear 3:1, because a good share of this audience is
   elderly or on treatment that affects their sight. */
:root{
  color-scheme: light;

  --paper:   #faf7f1;
  --paper-2: #f0eade;
  --paper-3: #fdfbf7;
  --paper-4: #e3dacb;

  --ink:       #241f1a;
  --ink-soft:  #4f4740;
  --ink-faint: #6d635a;

  --signal:      #2b6a63;
  --signal-text: #1f544e;
  --signal-fg:   #fdfbf7;

  --rule:      #241f1a;
  --rule-soft: #948877;

  --danger:  #a3341f;
  --success: #2c6b43;
  --warn:    #8a5a12;

  --plate:      #241f1a;
  --plate-fg:   #faf7f1;
  --plate-soft: rgba(250,247,241,.72);
  --plate-rule: rgba(250,247,241,.26);

  --scrim: rgba(36,31,26,.9);
  --shutter: var(--signal);
  --shutter-bg: var(--paper);

  --cell-line:   rgba(36,31,26,.07);
  --cell-fill:   rgba(36,31,26,.10);
  --cell-strike: #2b6a63;

  /* Softened corners. Sharp edges read as severe, which is the wrong note. */
  --radius:    10px;
  --radius-sm: 7px;

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --step--2: .705rem;
  --step--1: .8125rem;
  --step-0:  1rem;
  --step-1:  clamp(1.05rem, .99rem + .28vw, 1.2rem);
  --step-2:  clamp(1.2rem,  1.09rem + .5vw,  1.45rem);
  --step-3:  clamp(1.4rem,  1.2rem + .9vw,   1.95rem);
  --step-4:  clamp(1.7rem,  1.32rem + 1.7vw, 2.7rem);
  --step-5:  clamp(2.05rem, 1.35rem + 3.1vw, 4rem);
  --step-6:  clamp(2.5rem,  1.4rem + 4.9vw,  5.5rem);
  --step-7:  clamp(3.4rem,  .3rem + 13.4vw,  11rem);

  --wd-tight: 96;
  --wd-norm: 100;

  --label-size: var(--step--2);
  --label-track: .10em;

  --ease: cubic-bezier(.2,.7,.3,1);
  --ease-snap: cubic-bezier(.3,1,.4,1);
  --t-fast: .14s;
  --t-med: .26s;

  --nav-h: 64px;
  --maxw: 1440px;
  --gutter: clamp(1.1rem, 3.4vw, 2.75rem);
  --section-y: clamp(4rem, 8vw, 8.5rem);
  --col-gap: clamp(1rem, 2.2vw, 2rem);

  --footer-bg: #241f1a;
  --footer-fg: #faf7f1;
}

/* A warm dark, lit like a hall after hours rather than switched off. Pure
   black on pure white is the harshest thing a screen can do to tired eyes. */
[data-theme="dark"]{
  color-scheme: dark;

  --paper:   #16130f;
  --paper-2: #1d1a15;
  --paper-3: #232019;
  --paper-4: #2f2b23;

  --ink:       #f2ece1;
  --ink-soft:  #bfb5a6;
  --ink-faint: #9a8f80;

  --signal:      #5fa89e;
  --signal-text: #7cc0b5;
  --signal-fg:   #16130f;

  --rule:      #f2ece1;
  --rule-soft: #6b6354;

  --danger:  #e8836a;
  --success: #6fc08d;
  --warn:    #d9a94e;

  --plate:      #1d1a15;
  --plate-fg:   #f2ece1;
  --plate-soft: rgba(242,236,225,.72);
  --plate-rule: rgba(242,236,225,.24);

  --scrim: rgba(10,8,6,.92);

  --cell-line:   rgba(242,236,225,.07);
  --cell-fill:   rgba(242,236,225,.11);
  --cell-strike: #5fa89e;

  --footer-bg: #16130f;
  --footer-fg: #f2ece1;
}

@media (prefers-contrast: more){
  :root{
    --ink-soft:  #362f28;
    --ink-faint: #4a423a;
    --rule-soft: #6f6558;
  }
  [data-theme="dark"]{
    --ink-soft:  #e8e1d5;
    --ink-faint: #cdc4b5;
    --rule-soft: #8d8574;
  }
}

@media (max-width:640px){
  :root{ --nav-h: 56px; }
}

*{ box-sizing:border-box; }
::selection{ background: var(--signal); color: var(--signal-fg); }

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust:100%;
  scrollbar-color: var(--ink-faint) transparent;
  scrollbar-gutter: stable;
}

body{
  margin:0;
  min-height:100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size:17px;
  line-height:1.58;
  font-variation-settings: "wdth" var(--wd-norm);
  font-feature-settings: "kern" 1, "liga" 1;
  font-optical-sizing: auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  accent-color: var(--signal);
  caret-color: var(--signal);
}
body.no-scroll{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-underline-offset:.18em; text-decoration-thickness:from-font; }
button{ font:inherit; color:inherit; }
svg{ display:block; }

/* Sentence case, normal width, room to breathe. The old settings — 800 weight,
   condensed to 88, uppercase, line-height .92 — were a poster shouting across
   a room. This is a programme note read at arm's length. */
h1,h2,h3,h4{
  margin:0;
  font-family: var(--sans);
  font-weight:620;
  font-variation-settings: "wdth" var(--wd-norm);
  line-height:1.12;
  letter-spacing:-.012em;
  text-wrap: balance;
}
h1{ font-size: var(--step-6); line-height:1.06; }
h2{ font-size: var(--step-5); line-height:1.08; }
h3{
  font-size: var(--step-2);
  font-weight:600; line-height:1.24; letter-spacing:-.006em;
}
h4{ font-size: var(--step-0); font-weight:650; letter-spacing:0; }

p{ margin:0; text-wrap: pretty; }

/* Monospace is kept only where it earns its keep — references, codes, counts,
   tabular data, section numbering. Buttons, navigation, form labels and helper
   text were monospaced too, which made ordinary instructions read like console
   output. Those are plain sans now, and the interface sounds human again. */
.eyebrow, .footer-col h4, .gallery-ph-label, .kpi .k,
table.data th, .intro-fact span, .badge, .movement-num,
.timeline-at, .wstep, .step-num, .slider-labels,
.colophon, .footer-bottom, .success-code, .mono,
.gallery-caption h3::before, .feature h3::before, .intro-meta,
.ticker{
  font-family: var(--mono);
  font-variation-settings: normal;
  font-feature-settings: "kern" 1;
}

.kpi .v, table.data td, .review-row dd, .slider-value{
  font-variant-numeric: tabular-nums;
}

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background: var(--ink-faint); border-radius:0; }
::-webkit-scrollbar-thumb:hover{ background: var(--signal); }
::-webkit-scrollbar-corner{ background:transparent; }

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

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background: var(--signal); color: var(--signal-fg);
  padding:.75rem 1.25rem;
  font-family: var(--mono); font-size: var(--label-size);
  font-weight:600; text-transform:uppercase; letter-spacing: var(--label-track);
}
.skip-link:focus{ left:0; }

[hidden]{ display:none !important; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .intro-late{ opacity:1 !important; transform:none !important; }
  .intro-title span{ opacity:1 !important; clip-path:none !important; }
  .ticker-track{ animation:none !important; }
  .timeline li:hover{ padding-left:0 !important; }
  .success-wave path{ stroke-dashoffset:0 !important; }
  .reveal h1::before, .reveal h2::before,
  .reveal h1::after, .reveal h2::after{ display:none !important; }
  .intro-title span:hover{ font-variation-settings: "wdth" 82 !important; }
  .email-link:hover, .email-link:focus-visible,
  .mobile-menu a:not(.btn):hover{
    font-variation-settings: "wdth" var(--wd-tight) !important;
  }
}

.intro-hold, .intro-hold body{
  overflow:hidden; height:100%;
  overscroll-behavior:none;
  touch-action:none;
}
.intro-hold .nav,
.intro-hold .scroll-progress,
.intro-hold .site-footer,
.intro-hold .mobile-menu,
.intro-hold .back-to-top,
.intro-hold .running-head,
.intro-hold .intro-late{ visibility:hidden; opacity:0; pointer-events:none; }

.intro-hold .intro-late{ transform: translateY(12px); }

.site-footer{ transition: opacity .6s var(--ease), visibility 0s; }
.intro-late{
  transition: opacity .7s var(--ease), transform .7s var(--ease), visibility 0s;
}
.intro-late[data-late="1"]{ transition-delay:.00s; }
.intro-late[data-late="2"]{ transition-delay:.10s; }
.intro-late[data-late="3"]{ transition-delay:.20s; }

.wrap{
  max-width: var(--maxw); margin-inline:auto;
  padding-inline: var(--gutter); width:100%;
}
.wrap-narrow{
  max-width: 820px; margin-inline:auto;
  padding-inline: var(--gutter); width:100%;
}
.grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  column-gap: var(--col-gap);
}

.section{ padding-block: var(--section-y); position:relative; }
.section-tight{ padding-block: calc(var(--section-y) * .55); }

.section-alt{
  background: var(--paper-2);
  border-block:1px solid var(--rule);
  --shutter-bg: var(--paper-2);
}

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

.eyebrow{
  margin:0 0 1.5rem;
  display:flex; align-items:center; gap:.7rem;
  font-size: var(--label-size); font-weight:600;
  letter-spacing: var(--label-track); text-transform:uppercase;
  color: var(--ink-faint);
  line-height:1.2;
}
.eyebrow.centered{ justify-content:center; }

.movement-num{
  flex:none;
  font-size: var(--label-size); font-weight:700;
  letter-spacing: .04em;
  color: var(--signal-text);
}

.movement-num::after{
  content:""; display:inline-block;
  width:1.4rem; height:1px; margin-left:.7rem;
  background: currentColor; vertical-align:.22em;
}

.section-head{
  display:grid;
  grid-template-columns: minmax(0,3fr) minmax(0,9fr);
  column-gap: var(--col-gap);
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
}
.section-head .eyebrow{
  grid-column:1; grid-row:1 / span 2; margin:0;
  position:sticky; top: calc(var(--nav-h) + 1.75rem);
  align-self:start;
}
.section-head h1, .section-head h2{ grid-column:2; grid-row:1; max-width:26ch; }
.section-head .section-sub{ grid-column:2; grid-row:2; max-width:60ch; }
.section-sub{
  margin-top:1.5rem; color: var(--ink-soft);
  font-size: var(--step-1); line-height:1.6;
}

.section-head.centered{
  display:block; text-align:center;
  max-width:900px; margin-inline:auto;
  border-top:0; padding-top:0;
}
.section-head.centered .eyebrow{ justify-content:center; margin:0 0 1.75rem; }
.section-head.centered h2{ max-width:24ch; margin-inline:auto; }
.section-head.centered .section-sub{ max-width:56ch; margin-inline:auto; }

@media (max-width:860px){
  .section-head{ grid-template-columns:1fr; row-gap:1.1rem; }
  .section-head .eyebrow{ grid-column:1; grid-row:1; position:static; }
  .section-head h1, .section-head h2{ grid-column:1; grid-row:2; max-width:none; }
  .section-head .section-sub{ grid-column:1; grid-row:3; }
}

.wrap-narrow .section-head{ display:block; }
.wrap-narrow .section-head .eyebrow{ margin-bottom:1.2rem; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap: var(--col-gap); align-items:start; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:2rem; } }

.mission .wrap{
  display:grid;
  grid-template-columns: minmax(0,7fr) minmax(0,5fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items:start;
}
.mission h2{ max-width:18ch; margin-bottom:2rem; }
.mission .section-sub{ max-width:48ch; }
.mission .section-sub + .section-sub{ margin-top:1.2rem; }
@media (max-width:980px){ .mission .wrap{ grid-template-columns:1fr; row-gap:3.5rem; } }

.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .3s linear, transform .42s var(--ease-snap);
}
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.05s; }
.reveal[data-delay="2"]{ transition-delay:.10s; }
.reveal[data-delay="3"]{ transition-delay:.15s; }
.reveal[data-delay="4"]{ transition-delay:.20s; }
.reveal[data-delay="5"]{ transition-delay:.25s; }
.reveal[data-delay="6"]{ transition-delay:.30s; }

@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes riseIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

.reveal h1, .reveal h2{ position:relative; isolation:isolate; }
.reveal h1::before, .reveal h2::before,
.reveal h1::after, .reveal h2::after{
  content:""; position:absolute; inset:-.12em -.06em; z-index:2;
  pointer-events:none;
  transform: scaleX(0); transform-origin:right center;
}
.reveal h1::before, .reveal h2::before{ background: var(--shutter-bg); }
.reveal h1::after, .reveal h2::after{ background: var(--shutter); }

.reveal.in h1::before, .reveal.in h2::before{ animation: shutterMask .66s var(--ease-snap) both; }
.reveal.in h1::after, .reveal.in h2::after{ animation: shutterBar .66s var(--ease-snap) both; }

@keyframes shutterMask{
  0%, 40%{ transform: scaleX(1); }
  100%{ transform: scaleX(0); }
}
@keyframes shutterBar{
  0%{ transform: scaleX(0); transform-origin:left center; }
  40%{ transform: scaleX(1); transform-origin:left center; }
  41%{ transform: scaleX(1); transform-origin:right center; }
  100%{ transform: scaleX(0); transform-origin:right center; }
}

.btn{
  --btn-face: transparent;
  --btn-fg: var(--ink);
  --btn-edge: var(--ink);
  --btn-wipe: var(--signal);
  --btn-wipe-fg: var(--signal-fg);

  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.6rem;
  border-radius: var(--radius-sm);
  font-size: var(--step--1); font-weight:600;
  letter-spacing:.005em; line-height:1.15;
  text-decoration:none; cursor:pointer;
  background: var(--btn-face);
  color: var(--btn-fg);
  border:1px solid var(--btn-edge);
  white-space:nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--t-fast) linear, border-color var(--t-med) var(--ease-snap),
              background var(--t-fast) linear;
}
.btn svg{ flex:none; }

.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: var(--btn-wipe);
  transform: scaleX(0); transform-origin:left center;
  transition: transform var(--t-med) var(--ease-snap);
}
.btn:hover:not(:disabled)::before,
.btn:focus-visible:not(:disabled)::before{ transform: scaleX(1); }
.btn:hover:not(:disabled),
.btn:focus-visible:not(:disabled){
  color: var(--btn-wipe-fg);
  border-color: var(--btn-wipe);
}
.btn:active:not(:disabled)::before{ transform: scaleX(1); transition-duration: 0s; }
.btn:focus-visible{ outline-color: var(--ink); }

.btn-primary{
  --btn-face: var(--ink);
  --btn-fg: var(--paper);
  --btn-edge: var(--ink);
  --btn-wipe: var(--signal);
  --btn-wipe-fg: var(--signal-fg);
}
.btn-ghost{
  --btn-face: transparent;
  --btn-fg: var(--ink);
  --btn-edge: var(--ink);
  --btn-wipe: var(--ink);
  --btn-wipe-fg: var(--paper);
}
.btn-amber{
  --btn-face: var(--signal);
  --btn-fg: var(--signal-fg);
  --btn-edge: var(--signal);
  --btn-wipe: var(--ink);
  --btn-wipe-fg: var(--paper);
}

.btn-sm{ padding:.55rem .95rem; font-size:.78rem; }
.btn-lg{ padding:1.15rem 2.1rem; font-size:.95rem; }
.btn-block, .btn-submit{ width:100%; }
.btn:disabled{ opacity:.4; cursor:not-allowed; }

.actions{ display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; }

.icon-btn{
  display:inline-grid; place-items:center;
  width:38px; height:38px; border-radius: var(--radius-sm);
  background:transparent; border:1px solid var(--rule);
  color: var(--ink); cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast) linear, color var(--t-fast) linear,
              border-color var(--t-fast) linear;
}
.icon-btn:hover{ background: var(--signal); border-color: var(--signal); color: var(--signal-fg); }
.icon-btn:active{ background: var(--ink); border-color: var(--ink); color: var(--paper); }

.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:100%;
  background: var(--signal); z-index:300;
  transform: scaleX(0); transform-origin:left center;
  will-change: transform;
  transition: opacity .6s var(--ease), visibility 0s;
}

.nav{
  position:sticky; top:0; z-index:200;
  background: var(--paper);
  border-bottom:1px solid var(--rule);
  transition: opacity .6s var(--ease), visibility 0s;
}
.nav::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background: var(--ink);
  transform: scaleY(0); transform-origin:bottom;
  transition: transform var(--t-med) var(--ease-snap);
}
.nav.stuck::after{ transform: scaleY(1); }
.nav-inner{
  max-width: var(--maxw); margin-inline:auto; padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  min-height: var(--nav-h);
}
.brand{
  display:flex; align-items:center; gap:.6rem; flex:none;
  text-decoration:none; color: var(--ink);
  font-weight:650; font-size:1rem;
  font-variation-settings: "wdth" var(--wd-norm);
  letter-spacing:-.005em;
}

.brand-mark{
  width:14px; height:14px; flex:none; border-radius:50%;
  background: var(--signal); color:transparent;
  font-size:0; line-height:0; overflow:hidden;
  transition: background var(--t-fast) linear, transform var(--t-med) var(--ease-snap);
}
.brand:hover .brand-mark{ background: var(--ink); transform: rotate(45deg); }

.nav-links{ display:flex; align-items:center; gap:1.6rem; }
.nav-links a{
  text-decoration:none;
  font-size: var(--label-size); font-weight:600;
  letter-spacing: var(--label-track); text-transform:uppercase;
  color: var(--ink-soft);
  padding-block:4px; position:relative;
  transition: color var(--t-fast) linear;
}
.nav-links a:hover{ color: var(--ink); }

.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: var(--signal);
  transform: scaleX(0); transform-origin:left center;
  transition: transform var(--t-med) var(--ease-snap);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a[aria-current="page"]::after{ transform: scaleX(1); }
.nav-links a[aria-current="page"]{ color: var(--ink); }

.nav-links a.nav-cta{
  background: var(--signal); color: var(--signal-fg);
  padding:.6rem 1.1rem; border-radius: var(--radius-sm);
  transition: background var(--t-fast) linear, color var(--t-fast) linear;
}
.nav-links a.nav-cta::after{ display:none; }
.nav-links a.nav-cta:hover{ background: var(--ink); color: var(--paper); }

/* Sign in. Outlined rather than filled, so Register stays the loudest thing
   in the bar — most visitors are applying, not returning. */
.nav-links a.nav-login{
  border:1px solid var(--rule-soft);
  padding:.6rem 1.1rem; border-radius: var(--radius-sm);
  color: var(--ink);
  transition: background var(--t-fast) linear, color var(--t-fast) linear,
              border-color var(--t-fast) linear;
}
.nav-links a.nav-login::after{ display:none; }
.nav-links a.nav-login:hover{
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.nav-links a.nav-login[aria-current="page"]{ border-color: var(--ink); }

.nav-tools{ display:flex; align-items:center; gap:.5rem; }
.theme-toggle svg{ width:16px; height:16px; }
.theme-toggle .sun{ display:none; }
[data-theme="dark"] .theme-toggle .sun{ display:block; }
[data-theme="dark"] .theme-toggle .moon{ display:none; }

.nav-burger{
  display:none; background:none; border:none; cursor:pointer; padding:10px;
  color: var(--ink); -webkit-tap-highlight-color: transparent;
}
.nav-burger span{
  display:block; width:22px; height:2px; background:currentColor;
  transition: transform var(--t-med) var(--ease-snap), opacity var(--t-fast) linear;
}
.nav-burger span + span{ margin-top:5px; }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset: var(--nav-h) 0 0; z-index:190;
  background: var(--paper); padding: 1.5rem var(--gutter) 2.5rem;
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none; visibility:hidden;
  clip-path: inset(0 0 100% 0);
  transition: opacity .2s linear, clip-path .34s var(--ease-snap),
              visibility 0s linear .34s;
  overflow-y:auto; overscroll-behavior:contain;
}
.mobile-menu.open{
  opacity:1; pointer-events:auto; visibility:visible;
  clip-path: inset(0 0 0 0);
  transition-delay: 0s, 0s, 0s;
}
.mobile-menu{ counter-reset: menu; }
.mobile-menu a{
  text-decoration:none; color: var(--ink);
  font-weight:600; font-size: clamp(1.6rem, 6.5vw, 2.3rem);
  font-variation-settings: "wdth" var(--wd-norm);
  letter-spacing:-.012em; line-height:1.15;
  padding:1.1rem 0; border-bottom:1px solid var(--rule);
  display:flex; align-items:center; gap:1rem;
  transition: color var(--t-fast) linear,
              font-variation-settings .4s var(--ease-snap);
}

.mobile-menu a::after{
  counter-increment: menu; content: counter(menu, decimal-leading-zero);
  order:-1;
  font-family: var(--mono); font-size: var(--label-size); font-weight:600;
  letter-spacing: var(--label-track); color: var(--signal-text);
  flex:none;
}
.mobile-menu a:not(.btn):hover{
  color: var(--signal-text);
  font-variation-settings: "wdth" 118;
}
.mobile-menu a.btn{
  margin-top:2rem; justify-content:center;
  color: var(--btn-fg);
  padding:1.15rem 1.5rem;
  font-family: var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.09em; line-height:1;
  font-variation-settings: normal;
}
.mobile-menu a.btn::after{ content:none; }
.mobile-menu a.btn + a.btn{ margin-top:.75rem; }

@media (max-width:940px){
  .nav-links{ display:none; }
  .nav-burger{ display:block; }
}

.intro{
  position:relative;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display:grid; align-content: safe center;
  padding: clamp(2.5rem, 6vh, 5rem) 0 0;
  background: var(--paper);
  color: var(--ink);
  overflow:hidden;
  border-bottom:1px solid var(--rule);
  isolation:isolate;
  width:100%;
  cursor:crosshair;
}

.intro-wave{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
}

.intro-glow, .intro-lamp{ display:none; }

.intro-inner{
  position:relative; z-index:2; width:100%; cursor:auto;
  max-width: var(--maxw); margin-inline:auto;
  padding-inline: var(--gutter);
}

.intro-meta{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  font-size: var(--label-size); font-weight:600;
  letter-spacing: var(--label-track); text-transform:uppercase;
  color: var(--ink-faint);
  margin:0 0 clamp(1.5rem, 3vh, 2.5rem);
  padding-bottom:1rem; border-bottom:1px solid var(--rule);
}
.intro-meta b{ color: var(--signal-text); font-weight:700; }
.intro-meta span{ margin-left:auto; }
@media (max-width:640px){ .intro-meta span{ margin-left:0; } }

.intro-title{
  font-size: var(--step-6);
  font-weight:600;
  font-variation-settings: "wdth" var(--wd-norm);
  line-height:1.08;
  letter-spacing:-.018em;
  margin:0;
  color: var(--ink);
  text-wrap: balance;
}
.intro-title span{
  display:block;
  opacity:0;
  font-variation-settings: "wdth" var(--wd-norm);
  animation: introLine .7s var(--ease-snap) forwards;
  transition: color var(--t-fast) linear;
}
/* The old rule stretched each line to wdth 124 on hover. A clever trick, and
   entirely wrong here — the headline is a statement, not a toy. */
.intro-title span:nth-child(1){ animation-delay:.10s; }
.intro-title span:nth-child(2){ animation-delay:.20s; }
.intro-title span:nth-child(3){ animation-delay:.30s; color: var(--signal); }

@keyframes introLine{
  from{ opacity:0; clip-path: inset(0 100% 0 0); }
  to{ opacity:1; clip-path: inset(0 0 0 0); }
}

.intro-lede{
  margin: clamp(2rem, 4vh, 3rem) 0 0;
  max-width:52ch;
  font-size: var(--step-1); line-height:1.55;
  color: var(--ink-soft);
}
.intro-actions{
  display:flex; gap:.75rem; flex-wrap:wrap;
  margin-top: clamp(1.75rem, 3.5vh, 2.5rem);
}

.intro-facts{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  margin: clamp(2.5rem, 6vh, 4.5rem) 0 0;
  border-top:1px solid var(--rule);
}
.intro-fact{ padding:1.25rem 1.5rem 1.25rem 0; }
.intro-fact + .intro-fact{ border-left:1px solid var(--rule-soft); padding-left:1.5rem; }
.intro-fact span{
  display:block; color: var(--ink-faint); margin-bottom:.6rem;
  font-size: var(--label-size); font-weight:600;
  letter-spacing: var(--label-track); text-transform:uppercase;
}
.intro-fact strong{
  display:block; font-weight:700;
  font-size: var(--step-1); line-height:1.2;
  letter-spacing:-.01em; color: var(--ink);
}
@media (max-height:740px){
  .intro-title{ font-size: clamp(2.8rem, 9vw, 6rem); }
}
@media (max-width:760px){
  .intro-facts{ grid-template-columns:1fr; }
  .intro-fact{ padding:1rem 0; border-top:1px solid var(--rule-soft); }
  .intro-fact:first-child{ border-top:0; }
  .intro-fact + .intro-fact{ border-left:0; padding-left:0; }
}
@media (max-width:560px){
  .intro-actions{ flex-direction:column; align-items:stretch; }
  .intro-actions .btn{ width:100%; }
}

/* This was a scrolling marquee on a black band — a fashion-site device that
   moves constantly and cannot be read at a glance. It is now a still strip of
   facts on tinted paper. Nothing here needs to demand attention, and moving
   text is genuinely hard going for anyone tired or unwell. */
.ticker{
  background: var(--paper-2); color: var(--ink-soft);
  border-block:1px solid var(--rule-soft);
  padding-block:1.05rem;
  font-size: var(--label-size); font-weight:600;
  letter-spacing:.04em;
}
.ticker-track{
  display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center;
  gap:.6rem 1.6rem;
  max-width: var(--maxw); margin-inline:auto;
  padding-inline: var(--gutter);
  text-align:center;
}
.ticker-track > span{
  display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center;
  gap:.6rem 1.6rem;
}
/* The duplicate copy only existed to make the loop seamless. */
.ticker-track > span + span{ display:none; }
.ticker-track i{
  font-style:normal; color: var(--signal-text);
  flex:none;
}

.page-head{
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom:1px solid var(--rule);
  background: var(--paper);
}
.page-head .wrap{
  display:grid;
  grid-template-columns: minmax(0,3fr) minmax(0,9fr);
  column-gap: var(--col-gap);
}
.page-head .eyebrow{ grid-column:1; grid-row:1; margin:0; }
.page-head h1{ grid-column:2; grid-row:1; max-width:18ch; }
.page-head .section-sub{ grid-column:2; grid-row:2; }
.page-head .gallery-nav{ grid-column:2; grid-row:3; }
@media (max-width:860px){
  .page-head .wrap{ grid-template-columns:1fr; row-gap:1.1rem; }
  .page-head .eyebrow{ grid-row:1; }
  .page-head h1{ grid-column:1; grid-row:2; max-width:none; }
  .page-head .section-sub{ grid-column:1; grid-row:3; }
  .page-head .gallery-nav{ grid-column:1; grid-row:4; }
}

.card{
  background: var(--paper-3); border:1px solid var(--rule-soft);
  border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.15rem);
  position:relative;
}
.section-alt .card{ background: var(--paper); }

.badge{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:0; border:0; border-radius:0;
  background:transparent; color: var(--ink-soft);
  font-size: var(--label-size); font-weight:600;
  letter-spacing: var(--label-track); text-transform:uppercase;
  white-space:nowrap;
}
.badge::before{
  content:""; width:7px; height:7px; flex:none;
  background: currentColor;
}
.badge-blue{ color: var(--signal-text); }
.badge-amber{ color: var(--warn); }
.badge-rose{ color: var(--danger); }
.badge-green{ color: var(--success); }

.steps{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top:1px solid var(--rule);
}
.step{
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem) clamp(2rem, 4vw, 3rem) 0;
  background:transparent; border-radius:0;
  position:relative;
  transition: background var(--t-med) linear;
}
.step + .step{
  border-left:1px solid var(--rule-soft);
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
}
.step:hover{ background: var(--ink); }
.step:hover h3{ color: var(--paper); }
.step:hover p{ color: var(--paper); opacity:.76; }

.step::before{
  content:""; position:absolute; left:0; top:0; right:0; height:3px;
  background: var(--signal);
  transform: scaleX(0); transform-origin:left;
  transition: transform .32s var(--ease-snap);
}
.step:hover::before{ transform: scaleX(1); }
.step-num{
  display:block;
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  font-weight:700; line-height:.9;
  letter-spacing:-.04em;
  color: var(--ink);
  margin-bottom:1.25rem;
  transition: color var(--t-med) linear;
}
.step:hover .step-num{ color: var(--signal); }
.step h3{ max-width:22ch; transition: color var(--t-med) linear; }
.step p{
  margin-top:.8rem; color: var(--ink-soft);
  font-size:.94rem; line-height:1.62; max-width:42ch;
  transition: color var(--t-med) linear, opacity var(--t-med) linear;
}
@media (max-width:900px){
  .steps{ grid-template-columns:1fr; }
  .step{ padding: 1.5rem 0; border-bottom:1px solid var(--rule-soft); }
  .step + .step{ border-left:0; padding-left:0; }
  .step-num{ font-size:2.4rem; margin-bottom:.75rem; }
}

.feature-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  margin-top: clamp(2.5rem, 5vw, 4rem);
  counter-reset: standard;
  border-top:1px solid var(--rule);
}
.feature{
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom:1px solid var(--rule-soft);
  background:transparent; border-radius:0; position:relative;
  transition: background var(--t-med) linear;
}
.feature:hover{ background: var(--ink); }
.feature:hover h3{ color: var(--paper); }
.feature:hover h3::before{ color: var(--signal); }
.feature:hover p{ color: var(--paper); opacity:.76; }
.feature:nth-child(even){
  border-left:1px solid var(--rule-soft);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
}

.feature::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background: var(--signal);
  transform: scaleX(0); transform-origin:left;
  transition: transform .32s var(--ease-snap);
}
.feature:hover::after{ transform: scaleX(1); }
.feature h3{
  display:flex; align-items:baseline; gap:.8rem;
  transition: color var(--t-med) linear;
}
.feature h3::before{
  counter-increment: standard;
  content: counter(standard, decimal-leading-zero);
  font-size: var(--label-size); font-weight:700;
  letter-spacing:.04em; color: var(--signal-text);
  flex:none;
  transition: color var(--t-med) linear;
}
.feature p{
  margin-top:.7rem; padding-left:2.5rem;
  font-size:.94rem; line-height:1.62;
  color: var(--ink-soft); max-width:46ch;
  transition: color var(--t-med) linear, opacity var(--t-med) linear;
}
@media (max-width:760px){
  .feature-grid{ grid-template-columns:1fr; }
  .feature{ padding-inline:0 !important; border-left:0 !important; }
  .feature p{ padding-left:2.5rem; }
}

.email-link{
  display:inline-block; margin:1.75rem 0 1rem;
  font-weight:800;
  font-variation-settings: "wdth" var(--wd-norm);
  font-size: clamp(1.15rem, 3.4vw, 1.9rem);
  letter-spacing:-.012em; text-decoration:none; color: var(--ink);
  padding-bottom:.35rem; position:relative;
  transition: color var(--t-fast) linear,
              font-variation-settings .45s var(--ease-snap);
  word-break:break-word;
}
.email-link:hover, .email-link:focus-visible{ font-variation-settings: "wdth" 118; }
.email-link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background: var(--ink);
  transition: background var(--t-fast) linear;
}
.email-link:hover{ color: var(--signal-text); }
.email-link:hover::after{ background: var(--signal); }

.timeline-card{
  border:1px solid var(--rule); border-radius:0;
  background: var(--paper-3);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.timeline-card h3{
  color: var(--ink-faint);
  font-size: var(--label-size); font-weight:600;
  letter-spacing: var(--label-track); text-transform:uppercase;
  padding-bottom:1rem; border-bottom:1px solid var(--rule);
}
.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{
  display:grid;
  grid-template-columns: minmax(6.5rem, 7.5rem) minmax(0,1fr);
  column-gap:1.25rem;
  padding:1rem 0;
  border-bottom:1px solid var(--rule-soft);
  position:relative;
  transition: padding-left var(--t-med) var(--ease-snap);
}
.timeline li::before{
  content:""; position:absolute; left:0; top:.65rem; bottom:.65rem; width:2px;
  background: var(--signal);
  transform: scaleY(0); transform-origin:top;
  transition: transform var(--t-med) var(--ease-snap);
}
.timeline li:hover{ padding-left:.9rem; }
.timeline li:hover::before{ transform: scaleY(1); }
.timeline li:last-child{ border-bottom:none; padding-bottom:0; }
.timeline-at{
  display:block; color: var(--signal-text);
  font-size: var(--label-size); font-weight:600;
  letter-spacing: var(--label-track); text-transform:uppercase;
  padding-top:.2rem;
}
.timeline p{ font-size:.92rem; color: var(--ink-soft); line-height:1.6; }
@media (max-width:520px){
  .timeline li{ grid-template-columns:1fr; row-gap:.3rem; }
  .timeline-at{ padding-top:0; }
}

.gallery-nav{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.75rem; }

body{ counter-reset: plate; }

.gallery-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(1.75rem, 3vw, 2.75rem) var(--col-gap);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (max-width:900px){ .gallery-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .gallery-grid{ grid-template-columns:1fr; } }
.gallery-item{
  border:0; border-radius:0; background:transparent;
  cursor:pointer;
}
.gallery-media{
  aspect-ratio: 4/3; overflow:hidden;
  border:1px solid var(--rule); background: var(--paper-2);
  position:relative;
}
.gallery-media img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .5s var(--ease-snap);
}
.gallery-item:hover .gallery-media img{ transform: scale(1.04); }

.gallery-media::after{
  content:""; position:absolute; inset:auto 0 0 0; height:4px; z-index:2;
  background: var(--signal);
  transform: scaleX(0); transform-origin:left;
  transition: transform var(--t-med) var(--ease-snap);
}
.gallery-item:hover .gallery-media::after,
.gallery-item:focus-visible .gallery-media::after{ transform: scaleX(1); }

.gallery-media::before{
  content:"View";
  position:absolute; left:0; bottom:4px; z-index:3;
  background: var(--signal); color: var(--signal-fg);
  font-family: var(--mono); font-size:.64rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.45rem .75rem;
  transform: translateY(110%);
  transition: transform var(--t-med) var(--ease-snap);
}
.gallery-item:hover .gallery-media::before,
.gallery-item:focus-visible .gallery-media::before{ transform: translateY(0); }

.gallery-placeholder{
  width:100%; height:100%;
  display:grid; place-items:center; gap:.5rem; align-content:center;
  background:
    repeating-linear-gradient(-45deg, transparent 0 10px, var(--rule-soft) 10px 11px);
  color: var(--ink-faint);
}
.gallery-ph-icon{ font-size:1.5rem; line-height:1; opacity:.5; }
.gallery-ph-label{
  font-size: var(--label-size); font-weight:600;
  letter-spacing: var(--label-track); text-transform:uppercase;
  color: var(--ink-faint);
}
.gallery-placeholder-full{
  width:100%; min-height:280px; border-radius:0;
  border:1px solid var(--rule);
  display:grid; place-items:center;
  background:
    repeating-linear-gradient(-45deg, transparent 0 12px, var(--rule-soft) 12px 13px);
  color: var(--ink-faint);
}
.gallery-placeholder-full .gallery-ph-icon{ font-size:2.4rem; }

.gallery-caption{ padding:1.1rem 0 0; }
.gallery-caption h3{
  display:block; position:relative; padding-left:2.8rem;
  font-size: var(--step-1);
}
.gallery-caption h3::before{
  counter-increment: plate; content: counter(plate, decimal-leading-zero);
  position:absolute; left:0; top:.18em;
  font-size: var(--label-size); font-weight:700;
  letter-spacing:.04em; color: var(--ink-faint);
  transition: color var(--t-fast) linear;
}
.gallery-item:hover .gallery-caption h3::before{ color: var(--signal-text); }
.gallery-caption p{
  margin-top:.4rem; padding-left:2.8rem;
  font-size:.9rem; color: var(--ink-soft); line-height:1.6;
}
@media (max-width:420px){
  .gallery-caption h3, .gallery-caption p{ padding-left:2.3rem; }
}
#galleryModalMedia img{
  max-width:100%; max-height:56svh; object-fit:contain;
  border:1px solid var(--rule);
}

@media (hover: none){
  .gallery-media::before{ transform: translateY(0); }
  .step:hover, .feature:hover, table.data tbody tr:hover{ background:transparent; }
  .step:hover .step-num{ color: var(--signal); }
  .step:hover h3, .feature:hover h3{ color: var(--ink); }
  .step:hover p, .feature:hover p{ color: var(--ink-soft); opacity:1; }
  .feature:hover h3::before{ color: var(--signal-text); }
  .timeline li:hover{ padding-left:0; }
  .ticker:hover .ticker-track{ animation-play-state:running; }
}

.form-row{ display:flex; flex-direction:column; gap:.5rem; position:relative; }
/* Form labels were small, uppercase and letter-spaced — legible, but they read
   as a government form. People fill this in while unwell; plain words are kinder. */
.form-row > label, .field-label{
  font-size:.92rem; font-weight:600;
  letter-spacing:0;
  color: var(--ink);
}
.label-hint{
  font-weight:400; color: var(--ink-faint);
  letter-spacing:0; text-transform:none; font-size:.95em;
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media (max-width:620px){ .form-grid{ grid-template-columns:1fr; } }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], input[type="date"], input[type="time"],
select, textarea{
  font-family: var(--sans); font-size:1rem;
  padding:.85rem .95rem;
  border:1px solid var(--rule-soft); border-radius: var(--radius-sm);
  background: var(--paper-3); color: var(--ink);
  outline:none; width:100%;
  transition: border-color var(--t-fast) linear, box-shadow var(--t-fast) linear;
}
textarea{ resize:vertical; min-height:130px; line-height:1.6; }
select{
  cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23241f1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .85rem center; padding-right:2.4rem;
}

[data-theme="dark"] select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23f2ece1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
input::placeholder, textarea::placeholder{ color: var(--ink-faint); opacity:1; }
input:hover, textarea:hover, select:hover{ border-color: var(--signal); }

input:focus, textarea:focus, select:focus{
  border-color: var(--signal);
  box-shadow: inset 0 0 0 2px var(--signal);
}
input:focus-visible, textarea:focus-visible, select:focus-visible{ outline:none; }
input.invalid, textarea.invalid, select.invalid{ border-color: var(--danger); }
input.invalid:focus, textarea.invalid:focus{ box-shadow: inset 0 0 0 2px var(--danger); }

input:-webkit-autofill,
input:-webkit-autofill:hover{
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: inset 0 0 0 100px var(--paper-3);
  caret-color: var(--signal);
}
input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: inset 0 0 0 2px var(--signal), inset 0 0 0 100px var(--paper-3);
}
input:autofill{ -webkit-text-fill-color: var(--ink); }
input[type="number"]{ appearance:textfield; -moz-appearance:textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator{ filter: invert(1); opacity:.7; }

.field-error{
  font-family: var(--mono);
  font-size:.74rem; letter-spacing:.03em;
  color: var(--danger); min-height:1em;
  display:flex; align-items:baseline; gap:.4rem;
}
.field-error:not(:empty)::before{ content:"!"; font-weight:700; flex:none; }

.password-wrap{ position:relative; display:flex; }
.password-wrap input{ padding-right:4.2rem; }
.pw-toggle{
  position:absolute; right:1px; top:1px; bottom:1px;
  background: var(--paper-4); border:none; cursor:pointer;
  color: var(--ink); padding:0 .75rem;
  font-size: var(--label-size); font-weight:600;
  letter-spacing: var(--label-track); text-transform:uppercase;
  transition: background var(--t-fast) linear, color var(--t-fast) linear;
}
.pw-toggle:hover{ background: var(--ink); color: var(--paper); }
.pw-meter{ display:flex; gap:2px; margin-top:.3rem; }
.pw-meter i{
  height:4px; flex:1; background: var(--paper-4);
  transition: background var(--t-fast) linear;
}
.pw-meter[data-score="1"] i:nth-child(-n+1){ background: var(--danger); }
.pw-meter[data-score="2"] i:nth-child(-n+2){ background: var(--warn); }
.pw-meter[data-score="3"] i:nth-child(-n+3){ background: var(--signal); }
.pw-meter[data-score="4"] i{ background: var(--success); }
.pw-hint{ font-size:.74rem; color: var(--ink-faint); letter-spacing:.02em; }

.chip-grid{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.3rem; }
.chip{
  position:relative;
  font-family: var(--sans); font-size:.86rem; font-weight:500;
  padding:.5rem .9rem; border-radius:999px;
  border:1px solid var(--rule-soft); background:transparent; color: var(--ink-soft);
  cursor:pointer; user-select:none; -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast) linear, border-color var(--t-fast) linear,
              color var(--t-fast) linear;
}
.chip:hover{ border-color: var(--ink); color: var(--ink); }
.chip.active{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip.active:hover{ background: var(--signal); border-color: var(--signal); color: var(--signal-fg); }
.chip.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background: var(--signal);
}

.slider{
  -webkit-appearance:none; appearance:none; width:100%; height:4px;
  background: var(--paper-4);
  background-image: linear-gradient(var(--signal), var(--signal));
  background-repeat:no-repeat;
  background-size: var(--fill, 12%) 100%;
  outline:none; margin:1.1rem 0 .5rem; cursor:pointer;
}
.slider::-webkit-slider-runnable-track{ height:4px; background:transparent; border:0; }
.slider::-moz-range-track{ height:4px; background:transparent; border:0; }
.slider::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:20px; border-radius:0;
  margin-top:-8px;
  background: var(--ink); border:0; cursor:pointer;
  transition: background var(--t-fast) linear;
}
.slider::-webkit-slider-thumb:hover{ background: var(--signal); }
.slider:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--signal); outline-offset:2px; }
.slider::-moz-range-thumb{
  width:14px; height:20px; border-radius:0;
  background: var(--ink); border:0; cursor:pointer;
  transition: background var(--t-fast) linear;
}
.slider::-moz-range-thumb:hover{ background: var(--signal); }
.slider:focus-visible::-moz-range-thumb{ outline:2px solid var(--signal); outline-offset:2px; }
.slider-labels{
  display:flex; justify-content:space-between; gap:1rem;
  font-size:.7rem; color: var(--ink-faint);
  letter-spacing:.04em; text-transform:uppercase;
}
.slider-value{ color: var(--signal-text); font-weight:700; }

.check{
  display:flex; gap:.7rem; align-items:flex-start; cursor:pointer;
  font-size:.9rem; color: var(--ink-soft); line-height:1.5;
  transition: color var(--t-fast) linear;
}
.check:hover{ color: var(--ink); }
.check input{
  margin-top:.28rem; width:16px; height:16px; accent-color: var(--signal);
  flex:none; cursor:pointer; border-radius:0;
}

.dropzone{
  border:2px dashed var(--rule-soft); border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem; text-align:center; cursor:pointer;
  transition: border-color var(--t-fast) linear, background var(--t-fast) linear,
              color var(--t-fast) linear;
  color: var(--ink-soft); background:transparent;
}
.dropzone svg{ color: var(--ink-faint); margin:0 auto .75rem; transition: color var(--t-fast) linear; }
.dropzone:hover svg, .dropzone.dragover svg{ color: var(--signal); }
.dropzone p{ margin:.2rem 0; font-size:.92rem; }
.dropzone .dz-note{ font-size:.72rem; color: var(--ink-faint); letter-spacing:.03em; }
.dropzone:hover, .dropzone.dragover{ border-color: var(--signal); background: var(--paper-2); }
.dropzone.dragover{ border-style:solid; }
.dropzone.has-file{ border-style:solid; border-color: var(--ink); background:transparent; color: var(--ink); }
.dz-preview{
  max-height:180px; max-width:100%; margin:0 auto .85rem;
  border:1px solid var(--rule); background:#000;
}

.progress{
  height:4px; background: var(--paper-4); overflow:hidden; margin-top:.75rem;
  border:0;
}
.progress i{
  display:block; height:100%; width:0; background: var(--signal);
  transition: width .2s linear;
}

.reg-form{
  margin-top: clamp(2rem, 4vw, 3rem);
  background:transparent;
  border:0; border-top:2px solid var(--rule);
  border-radius:0; padding: clamp(1.5rem, 3.5vw, 2.5rem) 0 0;
  display:flex; flex-direction:column; gap:1.6rem;
}

.wizard-steps{
  display:flex; align-items:center; gap:.75rem;
  padding-bottom:1.25rem; border-bottom:1px solid var(--rule-soft);
  font-size: var(--label-size); font-weight:600;
  letter-spacing: var(--label-track); text-transform:uppercase;
}
.wstep{
  display:flex; align-items:center; gap:.5rem; flex:none; cursor:pointer;
  background:none; border:0; padding:.25rem 0; margin:0;
  font-size:inherit; letter-spacing:inherit; text-transform:inherit;
  -webkit-tap-highlight-color: transparent;
}
.wstep .dot{
  width:auto; height:auto; border-radius:0; border:0; background:none;
  font-weight:700; color: var(--ink-faint);
  transition: color var(--t-fast) linear;
}
.wstep .name{
  font-family: var(--mono); font-weight:600;
  color: var(--ink-faint); transition: color var(--t-fast) linear;
}
.wstep:hover .dot, .wstep:hover .name{ color: var(--ink); }
.wstep.active .dot{ color: var(--signal-text); }
.wstep.active .name{ color: var(--ink); }
.wstep.done .dot, .wstep.done .name{ color: var(--ink-soft); }
.wstep-line{ flex:1; height:2px; background: var(--paper-4); position:relative; overflow:hidden; }
.wstep-line::after{
  content:""; position:absolute; inset:0; width:0; background: var(--signal);
  transition: width .4s var(--ease-snap);
}
.wstep-line.done::after{ width:100%; }
@media (max-width:680px){
  .wstep .name{ display:none; }
  .wizard-steps{ gap:.5rem; }
}

.wpanel{ display:none; flex-direction:column; gap:1.5rem; }
.wpanel.active{ display:flex; animation: riseIn .3s var(--ease-snap); }
.wizard-nav{ display:flex; gap:.7rem; justify-content:space-between; margin-top:.5rem; flex-wrap:wrap; }
.wizard-nav .btn{ flex:1 1 auto; }
@media (max-width:420px){
  .wizard-nav .btn{ flex:1 1 100%; }
}

.review-list{ display:flex; flex-direction:column; margin:0; border-top:1px solid var(--rule); }
.review-row{
  display:flex; justify-content:space-between; gap:1.5rem; padding:.8rem 0;
  border-bottom:1px solid var(--rule-soft); font-size:.9rem;
}
.review-row:last-child{ border-bottom:none; }
.review-row dt{
  color: var(--ink-faint); flex:none;
  font-size:.9rem; font-weight:600;
  letter-spacing:0;
  padding-top:.15rem;
}
.review-row dd{
  margin:0; text-align:right; font-weight:500;
  overflow-wrap:anywhere; min-width:0;
}
@media (max-width:520px){
  .review-row{ flex-direction:column; gap:.25rem; }
  .review-row dd{ text-align:left; }
}

.form-footnote{
  text-align:center; font-size:.72rem; color: var(--ink-faint);
  letter-spacing:.03em; line-height:1.6;
}

.success-state{
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--plate); color: var(--plate-fg);
  border:1px solid var(--rule); border-radius:0;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 3.5vw, 2.5rem);
  animation: fadeIn .3s var(--ease) forwards;
}
.success-wave{ width:110px; margin:0 0 1.5rem; color: var(--signal); }
.success-wave svg{ width:100%; }
.success-wave path{ stroke-dasharray:400; stroke-dashoffset:400; animation: drawWave 1.2s var(--ease-snap) .15s forwards; }
@keyframes drawWave{ to{ stroke-dashoffset:0; } }
.success-state h3{
  font-size: var(--step-4); font-weight:620;
  font-variation-settings: "wdth" var(--wd-norm);
  letter-spacing:-.014em;
  line-height:1.14; margin-bottom:1rem;
}
.success-state p{ color: var(--plate-soft); max-width:48ch; font-size:.94rem; }
.success-state a:not(.btn){ color: var(--signal); text-decoration:underline; }
.success-code{
  display:inline-block; margin-top:1.5rem; padding:.6rem 1rem;
  font-size:.8rem; letter-spacing:.1em; font-weight:600;
  background: var(--signal); color: var(--signal-fg);
}
.success-state .btn-ghost{
  --btn-face: transparent;
  --btn-fg: var(--plate-fg);
  --btn-edge: var(--plate-fg);
  --btn-wipe: var(--plate-fg);
  --btn-wipe-fg: var(--plate);
}
.success-state .btn-amber{
  --btn-face: var(--signal);
  --btn-fg: var(--signal-fg);
  --btn-edge: var(--signal);
  --btn-wipe: var(--plate-fg);
  --btn-wipe-fg: var(--plate);
}
.success-state .btn:focus-visible{ outline-color: var(--plate-fg); }

.modal{
  position:fixed; inset:0; z-index:500; display:none;
  background: var(--scrim);
  align-items:center; justify-content:center; padding: var(--gutter);
}
.modal.open{ display:flex; animation: fadeIn .16s linear; }
.modal-inner{
  max-width:680px; width:100%; position:relative;
  background: var(--paper); color: var(--ink);
  border:1px solid var(--rule-soft); border-radius: var(--radius);
  animation: riseIn .24s var(--ease-snap);
  max-height: min(90svh, 900px); display:flex; flex-direction:column;
}
.modal-body{ padding: clamp(1.25rem, 3.5vw, 2rem); overflow-y:auto; overscroll-behavior:contain; }
.modal-body h3{ font-size: var(--step-3); margin-bottom:.5rem; padding-right:2.5rem; }
.modal-body p{ color: var(--ink-soft); font-size:.94rem; }
.modal-meta{ display:flex; gap:1.25rem; flex-wrap:wrap; margin:1rem 0 1.5rem; }
.modal-close{
  position:absolute; top:0; right:0; z-index:3;
  width:44px; height:44px; border-radius:0; cursor:pointer;
  background: var(--ink); border:0;
  color: var(--paper); display:grid; place-items:center;
  font-size:.85rem; line-height:1;
  transition: background var(--t-fast) linear, color var(--t-fast) linear;
}
.modal-close:hover{ background: var(--signal); color: var(--signal-fg); }

.accept-panel{
  margin-top:1.5rem; padding:1.25rem;
  border:0; border-left:4px solid var(--signal); border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper-2);
  display:flex; flex-direction:column; gap:1rem;
  animation: riseIn .24s var(--ease-snap);
}
.accept-panel h4{
  color: var(--signal-text);
  font-size: var(--label-size); font-weight:700;
  letter-spacing: var(--label-track); text-transform:uppercase;
}
.accept-panel .form-grid{ gap:1rem; }
.accept-note{ font-size:.85rem; color: var(--ink-soft); }

.sched{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap:1.25rem; align-items:start;
}
.sched-col{ display:flex; flex-direction:column; gap:.6rem; min-width:0; }
@media (max-width:620px){ .sched{ grid-template-columns:1fr; } }

.cal{ border:1px solid var(--rule); background: var(--paper); }
.cal-head{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.45rem .5rem; border-bottom:1px solid var(--rule);
}
.cal-title{
  font-family: var(--mono); font-size: var(--label-size); font-weight:700;
  letter-spacing: var(--label-track); text-transform:uppercase;
}
.cal-nav{
  width:28px; height:28px; flex:none;
  display:grid; place-items:center;
  background:transparent; border:1px solid var(--rule-soft);
  color: var(--ink); cursor:pointer; font-size:.75rem; line-height:1;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast) linear, color var(--t-fast) linear,
              border-color var(--t-fast) linear;
}
.cal-nav:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }

.cal-dow{
  display:grid; grid-template-columns: repeat(7, minmax(0,1fr));
  border-bottom:1px solid var(--rule-soft);
}
.cal-dow span{
  padding:.4rem 0; text-align:center;
  font-family: var(--mono); font-size:.58rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color: var(--ink-faint);
}

.cal-grid{ display:grid; grid-template-columns: repeat(7, minmax(0,1fr)); }
.cal-day{
  aspect-ratio:1; min-height:32px;
  display:grid; place-items:center; position:relative;
  background:transparent; border:0;
  border-right:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);
  font-family: var(--mono); font-size:.76rem; font-weight:600;
  color: var(--ink); cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast) linear, color var(--t-fast) linear;
}
.cal-day:nth-child(7n){ border-right:0; }
.cal-grid > :nth-last-child(-n+7){ border-bottom:0; }
.cal-day.empty{ cursor:default; }
.cal-day.past{ color: var(--ink-faint); opacity:.4; cursor:not-allowed; }
.cal-day:not(.empty):not(.past):hover{ background: var(--ink); color: var(--paper); }
.cal-day.today::after{
  content:""; position:absolute; left:50%; bottom:4px;
  width:5px; height:5px; margin-left:-2.5px;
  background: var(--signal);
}
.cal-day.sel{ background: var(--signal); color: var(--signal-fg); }
.cal-day.sel:hover{ background: var(--signal); color: var(--signal-fg); }
.cal-day.sel::after{ background: var(--signal-fg); }

.slot-list{ display:flex; flex-direction:column; gap:.6rem; }
.slot{
  border:1px solid var(--rule); background: var(--paper);
  padding:.6rem .7rem;
}
.slot-head{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  margin-bottom:.5rem;
}
.slot-date{
  font-family: var(--mono); font-size:.7rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color: var(--signal-text);
}
.slot-drop{
  width:22px; height:22px; flex:none;
  display:grid; place-items:center;
  background:transparent; border:1px solid var(--rule-soft);
  color: var(--ink-faint); cursor:pointer; font-size:.6rem; line-height:1;
  transition: background var(--t-fast) linear, color var(--t-fast) linear,
              border-color var(--t-fast) linear;
}
.slot-drop:hover{ background: var(--danger); border-color: var(--danger); color: var(--paper); }
.slot-times{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
.slot-times select{ font-size:.82rem; padding:.5rem .6rem; }
@media (max-width:420px){ .slot-times{ grid-template-columns:1fr; } }

.sched-summary{
  margin-top:auto; padding-top:.6rem;
  border-top:1px solid var(--rule-soft);
  font-family: var(--mono); font-size:.72rem; line-height:1.5;
  letter-spacing:.03em; color: var(--ink-soft);
}
.sched-summary b{ color: var(--signal-text); font-weight:700; }

.cta-band{
  --shutter: var(--signal-fg);
  --shutter-bg: var(--signal);
  border-radius:0;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem);
  background: var(--signal); color: var(--signal-fg);
  border:0;
  position:relative;
  display:grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr);
  column-gap: clamp(2rem, 5vw, 4rem); align-items:end;
}
.cta-band h2{ max-width:20ch; margin:0; }
.cta-band p{
  margin:0; max-width:44ch;
  color: var(--signal-fg); opacity:.8;
  font-size:.95rem; line-height:1.62;
}
.cta-band .actions{ margin-top:1.5rem; }
.cta-band .btn{
  --btn-face: transparent;
  --btn-fg: var(--signal-fg);
  --btn-edge: var(--signal-fg);
  --btn-wipe: var(--signal-fg);
  --btn-wipe-fg: var(--signal);
}
/* Inside the accent band, the solid button is the accent pair inverted:
   face and text are --signal-fg and --signal, which are guaranteed to contrast
   with each other in both themes because that is what the pair is for. The old
   rule put --plate-fg on --signal-fg — two near-identical ivories once the
   accent went from dark-on-bright to light-on-deep, so the label vanished. */
.cta-band .btn-amber,
.cta-band .btn-primary{
  --btn-face: var(--signal-fg);
  --btn-fg: var(--signal);
  --btn-edge: var(--signal-fg);
  --btn-wipe: var(--ink);
  --btn-wipe-fg: var(--paper);
}
.cta-band .btn:focus-visible{ outline-color: var(--signal-fg); }
@media (max-width:860px){
  .cta-band{ grid-template-columns:1fr; row-gap:1.5rem; align-items:start; }
}

.site-footer{
  background: var(--footer-bg); color: var(--footer-fg);
  border-top:1px solid var(--rule);
  padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
}
.footer-grid{
  display:grid; grid-template-columns: minmax(0,4fr) repeat(3, minmax(0,2.66fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
  max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter);
}
.site-footer .brand{ color: var(--footer-fg); }
.site-footer .brand:hover .brand-mark{ background: var(--footer-fg); }
.footer-about p{
  color: var(--plate-soft); font-size:.86rem; margin-top:1rem; max-width:32ch;
  line-height:1.6;
}
.footer-col h4{
  color: var(--signal); margin-bottom:1.1rem;
  font-size: var(--label-size); font-weight:600;
  letter-spacing: var(--label-track); text-transform:uppercase;
}
.footer-col a{
  position:relative;
  display:block; text-decoration:none;
  color: rgba(255,255,255,.76); font-size:.88rem;
  padding:.32rem 0; width:fit-content;
  transition: color var(--t-fast) linear;
}
.footer-col a::after{
  content:""; position:absolute; left:0; right:0; bottom:.18rem; height:1px;
  background: var(--signal);
  transform: scaleX(0); transform-origin:left;
  transition: transform var(--t-med) var(--ease-snap);
}
.footer-col a:hover, .footer-col a:focus-visible{ color: var(--signal); }
.footer-col a:hover::after, .footer-col a:focus-visible::after{ transform: scaleX(1); }
.footer-bottom{
  max-width: var(--maxw); margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding: 1.25rem var(--gutter) 0;
  border-top:1px solid var(--plate-rule);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.8rem; letter-spacing:0;
  color: var(--plate-soft);
}
.footer-bottom p{ margin:0; }

.footer-stave, .stave{ display:none; }
.colophon{
  max-width: var(--maxw); margin:.75rem auto 0;
  padding-inline: var(--gutter);
  font-size:.7rem; letter-spacing:.04em; text-transform:uppercase;
  color: rgba(255,255,255,.55);
}
@media (max-width:880px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .footer-grid{ grid-template-columns:1fr; gap:1.75rem; } }

.toast-stack{
  position:fixed;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  left:50%; transform:translateX(-50%);
  z-index:600; display:flex; flex-direction:column; gap:.4rem; align-items:center;
  pointer-events:none; width:min(440px, calc(100vw - 2rem));
}
@media (max-width:640px){
  .toast-stack{ bottom: max(5.25rem, env(safe-area-inset-bottom)); }
}
.toast{
  display:flex; align-items:center; gap:.75rem; width:100%;
  padding:.9rem 1rem .9rem .85rem; border-radius:0;
  background: var(--plate); color: var(--plate-fg);
  border:0; border-left:4px solid var(--signal);
  font-size:.86rem; pointer-events:auto;
  position:relative;
  animation: toastIn .2s var(--ease-snap);
}
.toast.error{ border-left-color: var(--danger); }
.toast.info{ border-left-color: var(--signal); }
.toast.out{ animation: toastOut .18s linear forwards; }
.toast .dot{ width:7px; height:7px; background: var(--signal); flex:none; }
.toast.error .dot{ background: var(--danger); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(5px); } }

.admin-shell{ max-width:1560px; margin-inline:auto; padding: clamp(1.5rem, 4vw, 2.75rem) var(--gutter) 5rem; }
.admin-bar{
  display:flex; gap:1.5rem; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  padding-bottom:1.25rem; margin-bottom:2rem; border-bottom:2px solid var(--rule);
}
.admin-tools{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.admin-tools input[type="search"]{ min-width:220px; width:auto; }
.admin-tools select{ width:auto; }
@media (max-width:560px){
  .admin-tools{ width:100%; }
  .admin-tools input[type="search"], .admin-tools select{ min-width:0; width:100%; }
}

.kpi-grid{
  display:grid; grid-template-columns: repeat(4,1fr);
  margin-bottom:2rem;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.kpi{
  padding:1.25rem clamp(.85rem, 2vw, 1.5rem);
  background:transparent; border:0; border-radius:0;
  position:relative;
}
.kpi::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background: var(--signal);
  transform: scaleX(0); transform-origin:left;
  transition: transform var(--t-med) var(--ease-snap);
}
.kpi:hover::before{ transform: scaleX(1); }
.kpi + .kpi{ border-left:1px solid var(--rule-soft); }
.kpi .k{
  color: var(--ink-faint);
  font-size: var(--label-size); font-weight:600;
  letter-spacing: var(--label-track); text-transform:uppercase;
}
.kpi .v{
  font-weight:700; font-variation-settings: "wdth" var(--wd-tight);
  font-size: clamp(1.9rem, 3.4vw, 3rem); line-height:1; margin-top:.6rem;
  letter-spacing:-.035em;
}
@media (max-width:900px){
  .kpi-grid{ grid-template-columns: repeat(2,1fr); }
  .kpi:nth-child(odd){ border-left:0; }
  .kpi:nth-child(n+3){ border-top:1px solid var(--rule-soft); }
}

.table-wrap{
  overflow:auto; max-height: min(72svh, 900px);
  overscroll-behavior:contain;
  border-top:2px solid var(--rule); border-bottom:1px solid var(--rule);
}
table.data{ width:100%; border-collapse:separate; border-spacing:0; font-size:.88rem; min-width:860px; }
table.data th{
  text-align:left; padding:.8rem 1rem .8rem 0;
  color: var(--ink-faint);
  font-size: var(--label-size); font-weight:600;
  letter-spacing: var(--label-track); text-transform:uppercase;
  box-shadow: inset 0 -1px 0 var(--rule); white-space:nowrap;
  background: var(--paper);
  position:sticky; top:0; z-index:2; cursor:pointer; user-select:none;
  transition: color var(--t-fast) linear;
}
table.data th:hover{ color: var(--ink); }
table.data th[aria-sort]{ color: var(--signal-text); }
table.data th[aria-sort="ascending"]::after{ content:" \2191"; }
table.data th[aria-sort="descending"]::after{ content:" \2193"; }
table.data td{
  padding:.9rem 1rem .9rem 0;
  box-shadow: inset 0 -1px 0 var(--rule-soft);
  vertical-align:top;
}
table.data th:last-child, table.data td:last-child{ padding-right:0; }
table.data tbody tr:last-child td{ box-shadow:none; }
table.data tbody tr{ transition: background var(--t-fast) linear; }
table.data tbody tr:hover{ background: var(--paper-2); }
table.data td strong{ font-weight:700; }
.mono{ font-size:.8em; color: var(--ink-faint); letter-spacing:.02em; }

.breakdown{ display:flex; flex-direction:column; gap:1rem; margin-top:1.5rem; }
.breakdown-row .breakdown-head{
  display:flex; justify-content:space-between; font-size:.85rem; margin-bottom:.5rem;
}
.breakdown .progress{ height:6px; margin-top:0; }
.breakdown-row .breakdown-head span:last-child{
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
  font-family: var(--mono); font-size:.78rem;
}

.status-line{
  display:flex; flex-wrap:wrap; gap:.75rem; align-items:center;
}

.storage-head{
  display:flex; flex-wrap:wrap; gap:1rem;
  align-items:flex-start; justify-content:space-between;
}
.storage-stats{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap:1px; margin:1.5rem 0 1.25rem;
  background: var(--rule-soft);
  border-block:1px solid var(--rule-soft);
}
.storage-stats > div{
  display:flex; flex-direction:column; gap:.4rem;
  padding:.9rem 1rem .9rem 0;
  background: var(--paper);
}
.storage-stats > div + div{ padding-left:1rem; }
.storage-stats .k{
  color: var(--ink-faint);
  font-size: var(--label-size); font-weight:600;
  letter-spacing: var(--label-track); text-transform:uppercase;
}
.storage-stats .v{
  font-weight:700; font-size:1.15rem; line-height:1.1;
  font-variant-numeric: tabular-nums;
}
.progress.storage-bar{ height:6px; margin-bottom:.75rem; }
.progress.storage-bar.warn i{ background: var(--warn); }
.progress.storage-bar.danger i{ background: var(--danger); }
.storage-risk{ margin-top:.75rem; color: var(--warn); }

@media (max-width:760px){
  .storage-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .storage-stats > div:nth-child(odd){ padding-left:0; }
  .storage-stats > div:nth-child(even){ padding-left:1rem; }
}

.lock-screen{ max-width:440px; margin:12vh auto; padding-inline: var(--gutter); }
.lock-screen .card{ padding: clamp(1.5rem, 4vw, 2.25rem); border-width:1px; }

.empty-state{
  text-align:center; padding:3.5rem 2rem; color: var(--ink-faint);
  border:2px dashed var(--rule-soft); border-radius: var(--radius); margin-top:2rem;
}
.empty-state p{ max-width:44ch; margin-inline:auto; font-size:.94rem; }
.empty-state .big{
  font-size:2.5rem; display:block; margin-bottom:.6rem; line-height:1;
  color: var(--rule-soft); font-weight:700;
  font-variation-settings: "wdth" var(--wd-tight);
}

.running-head{
  position:fixed; z-index:150;
  top:50%; left: clamp(.6rem, 1.6vw, 1.5rem);
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  display:none; align-items:center; gap:.8rem;
  font-family: var(--mono);
  font-size:.66rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--ink-faint);
  white-space:nowrap; pointer-events:none;
  transition: opacity .4s var(--ease), visibility 0s;
}
.running-head::before, .running-head::after{
  content:""; width:1px; height:2rem; flex:none; background: var(--rule-soft);
}
.running-head .rh-text{ transition: opacity .25s linear; min-height:1px; }
.running-head.fading .rh-text{ opacity:0; }
@media (min-width:1400px){ .running-head{ display:flex; } }

.cursor-block{
  position:fixed; top:0; left:0; z-index:900;
  width:13px; height:13px;
  pointer-events:none; opacity:0;
  will-change: transform;
  backdrop-filter: grayscale(1) invert(1);
  -webkit-backdrop-filter: grayscale(1) invert(1);
  transition: width .22s var(--ease-snap), height .22s var(--ease-snap),
              opacity .18s linear;
}
@supports not ((backdrop-filter: invert(1)) or (-webkit-backdrop-filter: invert(1))){
  .cursor-block{ background:#ffffff; mix-blend-mode:difference; }
}
.cursor-block.on{ opacity:1; }
.cursor-block.hot{ width:44px; height:44px; }
.cursor-block.press{ width:9px; height:9px; }
@media (pointer: coarse){ .cursor-block{ display:none; } }

.back-to-top{
  position:fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index:340;
  background: var(--paper);
  opacity:0; pointer-events:none; transform:translateY(6px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease),
              visibility 0s, background var(--t-fast) linear,
              border-color var(--t-fast) linear, color var(--t-fast) linear;
}
.back-to-top.show{ opacity:1; pointer-events:auto; transform:none; }

.notfound{ min-height:70vh; display:grid; place-items:center; text-align:center; padding:4rem var(--gutter); }
.notfound h1{
  font-weight:800; font-variation-settings: "wdth" 78;
  font-size: var(--step-7); line-height:.85;
  color: var(--signal); letter-spacing:-.05em;
}
.notfound h2{ margin-top:1.25rem; }
.notfound .section-sub{ margin-inline:auto; }

.mini-note{ font-size:.7rem; color: var(--ink-faint); letter-spacing:.04em; }
.center{ text-align:center; }
.mt-2{ margin-top:2rem; } .mt-3{ margin-top:3rem; }
.hidden{ display:none !important; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .intro-inner{
      animation: heroDrift linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    @keyframes heroDrift{ to{ transform: translateY(-72px); opacity:.25; } }

    .gallery-media{
      animation: tileRise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    .gallery-grid > :nth-child(3n+2) .gallery-media{ animation-range: entry 0% cover 64%; }
    .gallery-grid > :nth-child(3n+3) .gallery-media{ animation-range: entry 0% cover 52%; }
    @keyframes tileRise{ from{ transform: translateY(52px); } to{ transform: translateY(0); } }
  }
}

@view-transition{ navigation: auto; }
.nav .brand{ view-transition-name: brand; }
::view-transition-old(root), ::view-transition-new(root){
  animation-duration:.24s; animation-timing-function: var(--ease-snap);
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important; }
}

@page{ margin: 16mm 14mm; }

@media print{
  .nav, .back-to-top, .scroll-progress, .site-footer, .intro-wave,
  .skip-link, .toast-stack, .running-head, .mobile-menu, .ticker,
  .cursor-block{
    display:none !important;
  }
  .intro-inner, .gallery-media{ animation:none !important; transform:none !important; opacity:1 !important; }
  .reveal h1::before, .reveal h2::before,
  .reveal h1::after, .reveal h2::after{ display:none !important; }
  body{ background:#fff; color:#000; font-size:10pt; line-height:1.45; }
  .intro, .cta-band, .success-state, .toast{
    background:#fff !important; color:#000 !important;
    min-height:auto !important; border:1px solid #999 !important;
  }
  .intro{ padding-block: 8mm; break-after: page; }
  .intro-title{ font-size: 42pt; }
  .intro-title span:nth-child(3){ color:#000 !important; }

  .intro-title span, .intro-late, .reveal{
    opacity:1 !important; transform:none !important;
    clip-path:none !important; animation:none !important;
  }
  .step-num, .empty-state .big{ color:#666 !important; }
  .movement-num, .timeline-at, .feature h3::before{ color:#000 !important; }
  .cta-band p{ opacity:1 !important; }

  .btn::before, .nav::after, .kpi::before, .timeline li::before,
  .step::before, .feature::after, .gallery-media::before,
  .gallery-media::after, .footer-col a::after{ display:none !important; }
  .btn{ color:#000 !important; background:#fff !important; border-color:#000 !important; }
  .table-wrap{ max-height:none !important; overflow:visible !important; }
  table.data th{ position:static !important; }

  .section{ padding-block: 7mm; }
  .step, .feature, .timeline li, .gallery-item{ break-inside: avoid; }
  h1,h2,h3{ break-after: avoid; }
  p{ orphans:3; widows:3; }
  a[href]::after{ content:""; }
}