/* ============================================================
   NERO MANAGEMENT — core stylesheet
   Tokens live in :root and are shared with the future /portal.
   Do not hard-code colour or spacing values outside this block.
   ============================================================ */

/* ---------- 1. Tokens ---------- */

:root {
  /* Surfaces — deliberately never pure #000 (banding + OLED smear) */
  --ink:        #0a0a0b;
  --ink-raised: #111112;
  --ink-sunk:   #060607;

  /* Type — alpha steps are set by contrast, not by eye.
     Measured on --ink: bone 16.5:1, bone-2 7.9:1, bone-3 5.8:1, champagne 8.7:1.
     bone-3 is the floor and still clears 4.5:1 for 11px labels. */
  --bone:       #ece7de;
  --bone-2:     rgba(236, 231, 222, 0.70);
  --bone-3:     rgba(236, 231, 222, 0.56);
  --champagne:  #c2a97e;

  /* Lines */
  --line:       rgba(236, 231, 222, 0.13);
  --line-2:     rgba(236, 231, 222, 0.28);

  /* Families */
  --display: "Bodoni Moda", Didot, "Playfair Display", Georgia, serif;
  --text:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Spacing — spacious editorial rhythm */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6rem;
  --section: clamp(5.5rem, 11vw, 10.5rem);

  --shell: 1320px;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 220ms;
  --t-med: 480ms;
  --t-slow: 900ms;

  --nav-h: 84px;
}

/* ---------- 2. Reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--text);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--champagne); color: var(--ink); }

:focus-visible {
  outline: 1px solid var(--champagne);
  outline-offset: 3px;
}

/* ---------- 3. Typography primitives ---------- */

.display {
  font-family: var(--display);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.018em;
  font-optical-sizing: auto;
}

.d-xl { font-size: clamp(3.1rem, 10.5vw, 8.5rem); }
.d-lg { font-size: clamp(2.4rem, 6.2vw, 5rem); }
.d-md { font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.06; }

.italic { font-style: italic; }

/* Small tracked label — the workhorse of the whole layout */
.eyebrow {
  font-family: var(--text);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-3);
  line-height: 1;
}
.eyebrow--accent { color: var(--champagne); }

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.55;
  color: var(--bone-2);
  font-weight: 300;
}

.body-sm { font-size: 0.9375rem; line-height: 1.65; color: var(--bone-2); }
.measure { max-width: 46ch; }
.measure-wide { max-width: 62ch; }

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- 4. Layout ---------- */

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

.section { padding-block: var(--section); position: relative; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- 5. Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 1.05rem 1.9rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--solid { background: var(--bone); color: var(--ink); }
.btn--solid:hover { background: #fff; }

.btn--ghost { border-color: var(--line-2); color: var(--bone); }
.btn--ghost:hover { border-color: var(--bone); background: rgba(236, 231, 222, 0.06); }

.btn__arrow { transition: transform var(--t-fast) var(--ease); flex: none; }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Text link with a rule that draws in */
.link-rule {
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
}
.link-rule::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-med) var(--ease);
}
.link-rule:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 6. Nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(10, 10, 11, 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
}

/* --- Logo slot: swap in the real mark, see README --- */
.logo { display: flex; align-items: baseline; gap: 0.6rem; flex: none; }
.logo__mark {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  line-height: 1;
}
.logo__img { height: 26px; width: auto; }
.logo__sub {
  font-size: 0.5625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-3);
  transform: translateY(-1px);
}

.nav__links { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.4rem); }
.nav__link {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--bone-2);
  position: relative;
  padding-block: 0.4rem;
  transition: color var(--t-fast) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
.nav__link:hover { color: var(--bone); }
.nav__link[aria-current="true"] { color: var(--bone); }
.nav__link[aria-current="true"]::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.nav .btn { padding: 0.72rem 1.35rem; font-size: 0.6875rem; }

/* Burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  flex: none;
}
.burger__box { width: 22px; height: 10px; position: relative; }
.burger__bar {
  position: absolute; left: 0;
  width: 100%; height: 1px;
  background: var(--bone);
  transition: transform var(--t-med) var(--ease);
}
.burger__bar:nth-child(1) { top: 0; }
.burger__bar:nth-child(2) { bottom: 0; }
.is-open .burger__bar:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.is-open .burger__bar:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--ink);
  padding: calc(var(--nav-h) + var(--s-4)) var(--gutter) var(--s-5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  /* visibility flips instantly on open so the panel is focusable straight
     away, and is deferred on close so the fade-out is still seen. */
  transition: opacity var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-med) var(--ease), visibility 0s linear 0s;
}
.drawer__links { display: flex; flex-direction: column; gap: 0.35rem; }
.drawer__link {
  font-family: var(--display);
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 400;
  line-height: 1.25;
  border-bottom: 1px solid var(--line);
  padding-block: 0.55rem;
  opacity: 0;
  transform: translateY(14px);
}
.drawer.is-open .drawer__link {
  opacity: 1;
  transform: none;
  transition: opacity var(--t-med) var(--ease) calc(var(--i) * 55ms),
              transform var(--t-med) var(--ease) calc(var(--i) * 55ms);
}
.drawer__foot { display: flex; flex-direction: column; gap: var(--s-3); }

/* ---------- 7. Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--nav-h) + var(--s-3)) var(--s-4);
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__still { z-index: 1; }
.hero__clip {
  z-index: 2;
  opacity: 0;
  transition: opacity 1400ms linear;
}
.hero__clip.is-live { opacity: 1; }

/* Scrim must guarantee legibility against EVERY clip in the rotation, not
   just the darkest one. The horizontal wash keeps the copy column reliably
   dark while leaving the right of the frame open for the image to read. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(to right,
      rgba(10, 10, 11, 0.94) 0%,
      rgba(10, 10, 11, 0.86) 30%,
      rgba(10, 10, 11, 0.45) 62%,
      rgba(10, 10, 11, 0.22) 82%,
      rgba(10, 10, 11, 0.42) 100%),
    linear-gradient(to top,
      rgba(10, 10, 11, 0.88) 0%,
      rgba(10, 10, 11, 0.42) 38%,
      rgba(10, 10, 11, 0.34) 66%,
      rgba(10, 10, 11, 0.72) 100%);
}

/* On narrow screens the copy spans the full width, so the wash must too. */
@media (max-width: 860px) {
  .hero__scrim {
    background: linear-gradient(to top,
      rgba(10, 10, 11, 0.92) 0%,
      rgba(10, 10, 11, 0.74) 45%,
      rgba(10, 10, 11, 0.66) 75%,
      rgba(10, 10, 11, 0.82) 100%);
  }
}

/* Fine film grain, drawn not downloaded */
.hero__grain {
  position: absolute;
  inset: -50%;
  z-index: 4;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 1%); }
}

.hero__body { position: relative; z-index: 5; width: 100%; }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: var(--s-3);
}
.hero__eyebrow .dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--champagne);
  flex: none;
}

/* Height-aware so the meta row and scroll cue stay above the fold on
   short laptop viewports, where a purely width-based clamp overflows. */
.hero__title {
  font-size: clamp(3rem, min(10vw, 13vh), 7.75rem);
  margin-bottom: var(--s-3);
  max-width: 15ch;
}
.hero__title .thin { font-weight: 400; opacity: 0.85; }

.hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.hero__cta { display: flex; gap: var(--s-2); flex-wrap: wrap; }

.hero__meta {
  display: flex;
  gap: var(--s-4);
  padding-top: var(--s-3);
}
.hero__meta dt { margin-bottom: 0.4rem; }
.hero__meta dd { margin: 0; font-size: 0.8125rem; color: var(--bone-2); }

.hero__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

.scroll-cue { display: flex; align-items: center; gap: 0.7rem; }
.scroll-cue__line {
  width: 44px; height: 1px;
  background: var(--line-2);
  position: relative;
  overflow: hidden;
}
.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--champagne);
  transform-origin: left;
  animation: cue 2.6s var(--ease-io) infinite;
}
@keyframes cue {
  0%   { transform: scaleX(0); transform-origin: left; }
  45%  { transform: scaleX(1); transform-origin: left; }
  55%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* ---------- 8. Ticker ---------- */

.ticker {
  border-block: 1px solid var(--line);
  overflow: hidden;
  padding-block: 1.15rem;
  background: var(--ink-sunk);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; flex: none; }
.ticker__item {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  padding-inline: 1.2rem;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-3);
  white-space: nowrap;
}
.ticker__item::after {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--champagne);
  opacity: 0.7;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 9. Section head ---------- */

.head { margin-bottom: var(--s-5); }
.head__index {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: var(--s-3);
}
.head__index .rule { flex: 1; }

/* ---------- 10. Thesis ---------- */

.thesis__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.thesis__statement { margin-bottom: var(--s-4); }
.thesis__statement .dim { color: var(--bone-3); }
.thesis__figure { position: relative; }
.thesis__figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.thesis__caption {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  padding-top: 0.85rem;
  margin-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.thesis__copy > p + p { margin-top: 1.1rem; }

/* ---------- 11. Practice (services) ---------- */

.practice__list { border-top: 1px solid var(--line); }

.row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.05fr) 2rem;
  align-items: baseline;
  gap: var(--s-3);
  padding-block: clamp(1.6rem, 3.2vw, 2.6rem);
  border-bottom: 1px solid var(--line);
  position: relative;
  isolation: isolate;
  transition: opacity var(--t-med) var(--ease);
}
.row::before {
  content: "";
  position: absolute;
  left: calc(var(--gutter) * -0.5);
  right: calc(var(--gutter) * -0.5);
  top: 0; bottom: -1px;
  background: rgba(236, 231, 222, 0.035);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
  pointer-events: none;
  z-index: -1;
}
@media (hover: hover) {
  .practice__list:hover .row { opacity: 0.45; }
  .practice__list:hover .row:hover { opacity: 1; }
  .row:hover::before { opacity: 1; }
}
.row__num { color: var(--champagne); font-size: 0.75rem; letter-spacing: 0.14em; }
.row__title {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
}
.row__desc { font-size: 0.9375rem; line-height: 1.6; color: var(--bone-2); }
.row__mark {
  justify-self: end;
  color: var(--bone-3);
  transition: transform var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
.row:hover .row__mark { transform: translateX(5px); color: var(--champagne); }

/* Cursor-following preview, desktop only */
/* Position is driven by rAF in JS, so only opacity is transitioned here —
   transitioning transform as well would fight the animation loop. */
.peek {
  position: fixed;
  top: 0; left: 0;
  width: 230px;
  aspect-ratio: 3 / 4;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 320ms var(--ease);
  overflow: hidden;
  will-change: transform, opacity;
}
.peek.is-on { opacity: 1; }
.peek img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 12. Criteria ---------- */

.criteria { position: relative; overflow: hidden; }
.criteria__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.16;
}
.criteria__bg img { width: 100%; height: 100%; object-fit: cover; }
.criteria__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--ink) 0%, transparent 30%, transparent 70%, var(--ink) 100%);
}
.criteria > .shell { position: relative; z-index: 1; }

.gate {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.gate__item {
  background: var(--ink);
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 15rem;
  transition: background var(--t-med) var(--ease);
}
.gate__item:hover { background: var(--ink-raised); }
.gate__value {
  font-family: var(--display);
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
.gate__label { margin-top: auto; }
.gate__note { font-size: 0.875rem; color: var(--bone-2); line-height: 1.55; }

.fineprint {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin-top: var(--s-3);
  font-size: 0.8125rem;
  color: var(--bone-3);
  line-height: 1.6;
}
.fineprint svg { flex: none; margin-top: 3px; }

/* ---------- 13. Ledger ---------- */

.ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ledger__cell {
  padding: clamp(1.8rem, 3.4vw, 3rem) clamp(1rem, 2.4vw, 2rem);
  border-left: 1px solid var(--line);
}
.ledger__cell:first-child { border-left: 0; padding-left: 0; }
.ledger__value {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
}
.ledger__value .unit {
  font-size: 0.42em;
  vertical-align: super;
  letter-spacing: 0;
  color: var(--champagne);
}

/* ---------- 14. Process ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
}
.step { padding-top: var(--s-3); border-top: 1px solid var(--line-2); }
.step__num {
  font-family: var(--display);
  font-size: 0.9375rem;
  color: var(--champagne);
  margin-bottom: var(--s-3);
}
.step__title {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 400;
  margin-bottom: 0.6rem;
}

/* ---------- 15. Apply ---------- */

.apply { background: var(--ink-sunk); border-top: 1px solid var(--line); }
.apply__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}
.apply__aside { position: sticky; top: calc(var(--nav-h) + var(--s-4)); }
.apply__list { margin-top: var(--s-4); }
.apply__list li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.9rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--bone-2);
}
.apply__list li span:first-child {
  color: var(--champagne);
  font-size: 0.75rem;
  padding-top: 0.25rem;
}

/* Form */
.form { display: grid; gap: var(--s-3); }
.form__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }

.field { display: flex; flex-direction: column; gap: 0.55rem; }
.field > label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-3);
}
.field .req { color: var(--champagne); }
.field__hint { font-size: 0.8125rem; color: var(--bone-3); }

.control {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  padding: 0.85rem 0;
  font-size: 1rem;
  font-weight: 300;
  color: var(--bone);
  border-radius: 0;
  transition: border-color var(--t-fast) var(--ease);
  width: 100%;
}
/* Light enough to read as a hint, dim enough not to be mistaken for a value. */
.control::placeholder { color: rgba(236, 231, 222, 0.34); }
.control:hover { border-bottom-color: rgba(236, 231, 222, 0.42); }
.control:focus { outline: none; border-bottom-color: var(--champagne); }
.control:focus-visible { outline: none; }
textarea.control { resize: vertical; min-height: 5.5rem; line-height: 1.6; }

select.control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c2a97e' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 1.6rem;
  cursor: pointer;
}
select.control option { background: var(--ink-raised); color: var(--bone); }

/* Chip multi-select — real checkboxes underneath */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; display: inline-flex; }
.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.chip span {
  display: block;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--bone-2);
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
  user-select: none;
}
.chip input:hover + span { border-color: var(--bone-3); }
.chip input:checked + span {
  border-color: var(--champagne);
  color: var(--ink);
  background: var(--champagne);
}
.chip input:focus-visible + span { outline: 1px solid var(--champagne); outline-offset: 3px; }

/* Consent checkbox */
.consent {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.85rem;
  align-items: start;
  cursor: pointer;
  position: relative;
}
.consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.consent__box {
  width: 18px; height: 18px;
  margin-top: 2px;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.consent__box svg {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.consent input:checked + .consent__box { background: var(--champagne); border-color: var(--champagne); }
.consent input:checked + .consent__box svg { opacity: 1; transform: scale(1); }
.consent input:focus-visible + .consent__box { outline: 1px solid var(--champagne); outline-offset: 3px; }
.consent__text { font-size: 0.875rem; color: var(--bone-2); line-height: 1.55; }

/* Validation + status */
.field__error {
  font-size: 0.8125rem;
  color: #e0796b;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.field.has-error .control { border-bottom-color: #e0796b; }
.field.has-error .field__error,
.field__error.is-shown { opacity: 1; transform: none; }

.form__foot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-2);
}
.form__status { font-size: 0.875rem; color: var(--bone-2); }
.form__status[data-state="error"] { color: #e0796b; }
.form__status[data-state="ok"] { color: var(--champagne); }

.btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

.form-done {
  border: 1px solid var(--line-2);
  padding: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}
.form-done__mark {
  width: 46px; height: 46px;
  border: 1px solid var(--champagne);
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto var(--s-3);
  color: var(--champagne);
}

/* ---------- 16. Footer ---------- */

.foot { border-top: 1px solid var(--line); padding-block: var(--s-5) var(--s-4); }
.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  padding-bottom: var(--s-5);
}
.foot__col h4 { margin-bottom: var(--s-3); }
.foot__col li + li { margin-top: 0.7rem; }
.foot__col a, .foot__col p { font-size: 0.9375rem; color: var(--bone-2); }
.foot__col a:hover { color: var(--bone); }
.foot__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.foot__bottom p, .foot__bottom a { font-size: 0.75rem; color: var(--bone-3); }

.wordmark {
  font-family: var(--display);
  font-size: clamp(4rem, 20vw, 17rem);
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(236, 231, 222, 0.14);
  text-align: center;
  padding-block: var(--s-4) 0;
  user-select: none;
}

/* ---------- 17. Scroll reveal ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  transition-delay: var(--delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Touch targets ----------
   Every interactive element clears 44x44 on touch pointers. Padding is used
   rather than min-height alone so the hit area grows without moving type. */

@media (pointer: coarse) {
  .logo,
  .drawer__foot .eyebrow,
  .foot__col a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .nav .btn { padding-block: 0.85rem; }
  .chip span { padding-block: 0.72rem; }
  .foot__col li + li { margin-top: 0.15rem; }
}

/* Screen-reader only */
.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;
}

/* Skip link */
.skip {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 100;
  background: var(--bone);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: transform var(--t-fast) var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

/* ---------- 18. Responsive ---------- */

@media (max-width: 1080px) {
  .thesis__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .thesis__figure { max-width: 30rem; }
  .gate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apply__grid { grid-template-columns: minmax(0, 1fr); }
  .apply__aside { position: static; }
  .foot__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 860px) {
  :root { --nav-h: 68px; }
  .nav__links, .nav__actions .btn--ghost { display: none; }
  .burger { display: flex; }
  .row {
    grid-template-columns: 3rem minmax(0, 1fr) 1.5rem;
    row-gap: 0.65rem;
  }
  .row__desc { grid-column: 2 / -1; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .ledger { grid-template-columns: minmax(0, 1fr); }
  .ledger__cell { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .ledger__cell:first-child { border-top: 0; }
  .hero__meta { flex-wrap: wrap; gap: var(--s-3); }
  .peek { display: none; }
}

@media (max-width: 600px) {
  .gate { grid-template-columns: minmax(0, 1fr); }
  .gate__item { min-height: 0; }
  .form__pair { grid-template-columns: minmax(0, 1fr); }
  .foot__top { grid-template-columns: minmax(0, 1fr); }
  .hero__foot { flex-direction: column; align-items: flex-start; }
  .hero__cta { width: 100%; }
  .hero__cta .btn { width: 100%; justify-content: center; }
}

/* ---------- 19. Reduced motion ---------- */

@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;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__grain { animation: none; }
  .ticker__track { animation: none; }
  .hero__clip { display: none; }
}