/* ==========================================================================
   HerNext Network
   Creating Opportunity. Building Legacy.

   Design system built on the brand logo palette.
   Colours were sampled directly from "HNN Logo Light Background.svg", which
   contains exactly four fills: #3e2557 (51 uses), #d4af37 (7 uses),
   #6b1fad (1 use) and #ffffff. That usage frequency sets the hierarchy.

   Colour balance follows a 50:30:20 rule measured across a full page scroll:
     50%  white       page ground, cards, fields, negative space
     30%  plum        type, footer, dark statement bands, image fills
     20%  gold        rules, numerals, marks, borders, hover states

   No gradients are used anywhere in the interface.
   ========================================================================== */

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

:root {
  /* Brand, sampled from the logo */
  --white: #ffffff;
  --plum: #3e2557;
  --plum-deep: #2a1a3c;
  --plum-mid: #5c3f7a;
  --plum-soft: #786190;   /* 5.37:1 on white, 4.89:1 on --plum-tint, passes AA */
  --plum-tint: #f6f3f9;
  --plum-line: #e6e0ee;
  --gold: #d4af37;
  --gold-text: #806515;   /* 5.54:1 on white, 5.04:1 on tint, 4.74:1 on gold tint */
  --gold-tint: #f5edd6;
  --violet: #6b1fad;
  --ink: #1c1420;

  /* Semantic */
  --bg: var(--white);
  --bg-alt: var(--plum-tint);
  --bg-invert: var(--plum);
  --text: var(--ink);
  --text-muted: #5f5468;
  --text-invert: var(--white);
  --rule: var(--plum-line);
  --accent: var(--gold);
  --danger: #a3262b;

  /* Type */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --step-display: clamp(2.75rem, 6vw, 5.5rem);
  --step-h2: clamp(2rem, 4vw, 3.5rem);
  --step-h3: clamp(1.35rem, 2vw, 1.75rem);
  --step-h4: clamp(1.125rem, 1.4vw, 1.3rem);
  --step-lead: clamp(1.05rem, 1.4vw, 1.3rem);
  --step-body: 1rem;
  --step-small: 0.875rem;
  --step-label: 0.72rem;

  /* Space */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --container: 1280px;
  --measure: 62ch;
  --section-y: clamp(5rem, 12vh, 9rem);
  --space-2xs: 0.375rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.5rem;
  --space-xl: 5rem;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* A near-exponential ease out. It decelerates over a long tail, which is
     what makes the reveal read as unhurried rather than as a slide. */
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-duration: 1100ms;
  --reveal-stagger: 115ms;
  --reveal-shift: 32px;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

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

::selection { background: var(--gold-tint); color: var(--plum); }

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--plum);
  color: var(--white);
  font-size: var(--step-small);
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--plum);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1, .display {
  font-size: var(--step-display);
  line-height: 1.03;
  letter-spacing: -0.025em;
}

h2 { font-size: var(--step-h2); line-height: 1.08; }
h3 { font-size: var(--step-h3); font-weight: 500; }
h4 { font-size: var(--step-h4); font-weight: 600; letter-spacing: -0.005em; }

/* The single italicised emphasis word inside a headline */
h1 em, h2 em, h3 em, .display em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-text);
}

p { text-wrap: pretty; }

.lead {
  font-size: var(--step-lead);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: var(--measure);
}

.prose > * + * { margin-top: 1.15em; }
.prose { max-width: var(--measure); color: var(--text-muted); }
.prose strong { color: var(--plum); font-weight: 600; }

.label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.label::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--gold);
  flex: none;
}
.label--plain::before { display: none; }

.small { font-size: var(--step-small); }
.muted { color: var(--text-muted); }

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

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

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3.5rem, 8vh, 6rem); }
.section--alt { background: var(--bg-alt); }
.section--invert { background: var(--bg-invert); color: var(--text-invert); }

.section--invert h1,
.section--invert h2,
.section--invert h3,
.section--invert h4 { color: var(--white); }
.section--invert .lead,
.section--invert .prose,
.section--invert .muted { color: rgba(255, 255, 255, 0.76); }
.section--invert .label { color: var(--gold); }
.section--invert h2 em,
.section--invert h3 em { color: var(--gold); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .label { margin-bottom: var(--space-sm); }
.section-head .lead { margin-top: var(--space-sm); }

.grid { display: grid; gap: var(--space-md); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Split: headline column plus content column */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--media { align-items: center; }

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

hr.rule {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin-block: var(--space-lg);
}
.section--invert hr.rule { background: rgba(212, 175, 55, 0.35); }

/* --------------------------------------------------------------------------
   5. Header and navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--ease-out);
}
.site-header.is-scrolled { border-bottom-color: var(--rule); }

/* While the mobile menu is open the header and the panel below it are one
   continuous white sheet, so the header hairline is dropped and the panel's
   own bottom border closes the shape. This also avoids the sub-pixel overlap
   that a border on both edges would produce at fractional device ratios. */
.site-header:has(.nav.is-open) { border-bottom-color: transparent; }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 5rem;
}

.brand { display: flex; align-items: center; gap: 0.75rem; flex: none; }
.brand img { width: auto; height: 2.75rem; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--plum);
  letter-spacing: 0.01em;
}
.brand__motto {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plum-soft);
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); }

.nav__link {
  position: relative;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plum);
  padding-block: 0.5rem;
  transition: color 200ms var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15rem;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease-out);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--gold-text); }

.nav__cta { margin-left: 0.5rem; }

.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  flex: none;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.15rem;
  height: 1px;
  background: var(--plum);
  transition: transform 300ms var(--ease-out), opacity 200ms var(--ease-out);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -0.35rem; }
.nav-toggle__bars::after { top: 0.35rem; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(0.35rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-0.35rem) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Buttons and links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 2.875rem;
  padding: 0.8rem 1.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--plum);
  color: var(--plum);
  background: var(--white);
  transition: background-color 260ms var(--ease-out),
              color 260ms var(--ease-out),
              border-color 260ms var(--ease-out);
}
.btn:hover { background: var(--plum); color: var(--white); }

.btn--primary { background: var(--plum); color: var(--white); }
.btn--primary:hover { background: var(--gold); border-color: var(--gold); color: var(--plum); }

.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--plum); }
.btn--gold:hover { background: var(--plum); border-color: var(--plum); color: var(--white); }

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

.section--invert .btn {
  border-color: rgba(255, 255, 255, 0.4);
  background: transparent;
  color: var(--white);
}
.section--invert .btn:hover { background: var(--gold); border-color: var(--gold); color: var(--plum); }
.section--invert .btn--gold { background: var(--gold); border-color: var(--gold); color: var(--plum); }
.section--invert .btn--gold:hover { background: var(--white); border-color: var(--white); color: var(--plum); }

.btn__arrow { font-size: 0.95em; line-height: 1; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-text);
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--gold);
  transition: color 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.link:hover { color: var(--plum); border-color: var(--plum); }
.section--invert .link { color: var(--gold); border-color: rgba(212, 175, 55, 0.5); }
.section--invert .link:hover { color: var(--white); border-color: var(--white); }

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

.hero { padding-top: clamp(3.5rem, 8vh, 6rem); padding-bottom: 0; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

/* Headline column, held short of the full container so the line lengths
   stay readable and the white space around them does the work. */
.hero__intro { max-width: 58rem; }
.hero__title { margin-block: var(--space-sm) var(--space-md); }
.hero__lead { margin-bottom: var(--space-md); }
.hero__meta {
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  font-size: var(--step-small);
  color: var(--text-muted);
}

/* Full-bleed hero photograph. Sits outside .container so it runs edge to
   edge, and is capped by viewport height so it never swallows the fold on
   short, wide screens. */
.hero__figure {
  margin-top: clamp(3rem, 7vw, 5.5rem);
  width: 100%;
}
.hero__figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 78dvh;
  object-fit: cover;
  object-position: center 40%;
}

.page-hero { padding-block: clamp(4rem, 10vh, 7.5rem) clamp(2.5rem, 6vh, 4.5rem); }
.page-hero__title { margin-block: var(--space-sm) var(--space-md); }

/* --------------------------------------------------------------------------
   8. Media and image placeholders
   -------------------------------------------------------------------------- */

.media { position: relative; }
.media img { width: 100%; height: auto; }
.media--portrait img { aspect-ratio: 4 / 5; object-fit: cover; }
.media--landscape img { aspect-ratio: 3 / 2; object-fit: cover; }
.media--wide img { aspect-ratio: 16 / 7; object-fit: cover; }
.media--169 img { aspect-ratio: 16 / 9; object-fit: cover; }
.media__caption {
  margin-top: var(--space-xs);
  font-size: var(--step-small);
  color: var(--plum-soft);
}

/* --------------------------------------------------------------------------
   9. Cards and lists
   -------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: var(--white);
  border: 1px solid var(--rule);
  transition: border-color 300ms var(--ease-out);
}
.card:hover { border-color: var(--gold); }
.card__title { color: var(--plum); }
.card__text { color: var(--text-muted); font-size: 0.95rem; }
.card__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold-text);
  letter-spacing: 0.02em;
}

.section--invert .card { background: transparent; border-color: rgba(255, 255, 255, 0.18); }
.section--invert .card:hover { border-color: var(--gold); }
.section--invert .card__title { color: var(--white); }
.section--invert .card__text { color: rgba(255, 255, 255, 0.72); }
.section--invert .card__num { color: var(--gold); }

.numbered { border-top: 1px solid var(--rule); }
.numbered__item {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid var(--rule);
  align-items: start;
  transition: background-color 320ms var(--ease-out);
}
.numbered__item:hover { background: var(--plum-tint); }
.numbered__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold-text);
  padding-top: 0.15rem;
}
.numbered__text { color: var(--text-muted); font-size: 0.98rem; }

.section--invert .numbered,
.section--invert .numbered__item { border-color: rgba(255, 255, 255, 0.18); }
.section--invert .numbered__item:hover { background: rgba(255, 255, 255, 0.04); }
.section--invert .numbered__num { color: var(--gold); }
.section--invert .numbered__text { color: rgba(255, 255, 255, 0.72); }

.term-list { border-top: 1px solid var(--rule); }
.term-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(0.5rem, 3vw, 3rem);
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.term-list__term {
  font-family: var(--font-display);
  font-size: var(--step-h4);
  color: var(--plum);
  font-weight: 500;
}
.term-list__desc { color: var(--text-muted); font-size: 0.98rem; }

.section--invert .term-list,
.section--invert .term-list__item { border-color: rgba(255, 255, 255, 0.18); }
.section--invert .term-list__term { color: var(--white); }
.section--invert .term-list__desc { color: rgba(255, 255, 255, 0.72); }

.tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tag {
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--plum);
  transition: border-color 260ms var(--ease-out), background-color 260ms var(--ease-out);
}
.tag:hover { border-color: var(--gold); background: var(--gold-tint); }
.section--invert .tag { border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.85); }
.section--invert .tag:hover { border-color: var(--gold); background: rgba(212, 175, 55, 0.12); }

.marks { display: grid; gap: 0.85rem; }
.marks li { position: relative; padding-left: 1.6rem; color: var(--text-muted); }
.marks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.5rem;
  height: 1px;
  background: var(--gold);
}
.section--invert .marks li { color: rgba(255, 255, 255, 0.76); }

/* --------------------------------------------------------------------------
   10. Statement bands, quotes and figures
   -------------------------------------------------------------------------- */

.statement {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.85rem);
  line-height: 1.28;
  font-weight: 300;
  color: var(--plum);
  max-width: 24ch;
  text-wrap: balance;
}
.statement--wide { max-width: 34ch; }
.statement em { font-style: italic; color: var(--gold-text); }
.section--invert .statement { color: var(--white); }
.section--invert .statement em { color: var(--gold); }

.quote { display: grid; gap: var(--space-sm); }
.quote__attrib {
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.section--invert .quote__attrib { color: var(--gold); }

.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.figure__value {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1;
  color: var(--plum);
}
.figure__label { margin-top: 0.5rem; font-size: var(--step-small); color: var(--text-muted); }
.section--invert .figure__value { color: var(--gold); }
.section--invert .figure__label { color: rgba(255, 255, 255, 0.72); }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--plum-deep);
  color: rgba(255, 255, 255, 0.72);
  padding-block: clamp(3.5rem, 8vh, 5.5rem) 2rem;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}
.site-footer h3 {
  font-family: var(--font-body);
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}
.site-footer a { transition: color 200ms var(--ease-out); }
.site-footer a:hover { color: var(--gold); }
.site-footer__links { display: grid; gap: 0.6rem; font-size: 0.95rem; }
.site-footer__brand img { height: 3.25rem; width: auto; margin-bottom: var(--space-sm); }
.site-footer__motto {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--white);
}
.site-footer__bottom {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs);
  font-size: var(--step-small);
  color: rgba(255, 255, 255, 0.55);
}

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */

.form { max-width: 46rem; }
.field { display: grid; gap: 0.45rem; margin-bottom: var(--space-sm); }
.field__label {
  font-size: var(--step-small);
  font-weight: 500;
  color: var(--plum);
}
.field__label .req { color: var(--gold-text); }
.field__hint { font-size: 0.8rem; color: var(--plum-soft); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field select,
.field textarea {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.7rem 0.9rem;
  background: var(--white);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-size: 0.95rem;
  transition: border-color 220ms var(--ease-out);
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.field select { appearance: none; padding-right: 2.5rem; cursor: pointer; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--plum-soft); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--gold-text); outline: none; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--danger); }
.field__error {
  font-size: 0.8rem;
  color: var(--danger);
  min-height: 0;
}

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }

/* Radio and checkbox options rendered as selectable cards */
.option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: border-color 240ms var(--ease-out), background-color 240ms var(--ease-out);
}
.option:hover { border-color: var(--plum-soft); }
.option input { margin-top: 0.3rem; accent-color: var(--plum); width: 1rem; height: 1rem; }
.option:has(input:checked) { border-color: var(--gold); background: var(--gold-tint); }
.option__title { font-weight: 600; font-size: 0.95rem; color: var(--plum); }
.option__desc { font-size: 0.875rem; color: var(--text-muted); margin-top: 0.15rem; }
.option-grid { display: grid; gap: 0.75rem; }

.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.consent input { margin-top: 0.35rem; accent-color: var(--plum); width: 1rem; height: 1rem; }
.consent label { font-size: 0.9rem; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   13. Multi-step application flow
   -------------------------------------------------------------------------- */

.steps { display: grid; gap: var(--space-lg); }

.steps__progress { display: grid; gap: var(--space-sm); }
.steps__track { display: flex; gap: 0.5rem; }
.steps__bar {
  flex: 1;
  height: 2px;
  background: var(--rule);
  transition: background-color 400ms var(--ease-out);
}
.steps__bar.is-done { background: var(--gold); }
.steps__count {
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.step { border: 0; padding: 0; margin: 0; }
.step[hidden] { display: none; }
.step__legend {
  font-family: var(--font-display);
  font-size: var(--step-h2);
  color: var(--plum);
  line-height: 1.1;
  padding: 0;
  margin-bottom: var(--space-xs);
}
.step__intro { color: var(--text-muted); margin-bottom: var(--space-md); max-width: var(--measure); }

.steps__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: space-between;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--rule);
}

/* Review summary on the final step */
.review { border-top: 1px solid var(--rule); margin-bottom: var(--space-md); }
.review__group { padding-block: var(--space-sm); border-bottom: 1px solid var(--rule); }
.review__group-title {
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 0.75rem;
}
.review__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 1rem;
  padding-block: 0.35rem;
  font-size: 0.925rem;
}
.review__key { color: var(--plum-soft); }
.review__value { color: var(--ink); overflow-wrap: anywhere; }
.review__value:empty::after { content: "Not provided"; color: var(--plum-soft); font-style: italic; }

/* Submission result states */
.form-status { margin-top: var(--space-sm); font-size: 0.925rem; }
.form-status:empty { margin-top: 0; }
.form-status[data-state="error"] { color: var(--danger); }

.confirmation { max-width: 40rem; }
.confirmation__mark {
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  color: var(--gold-text);
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}
.confirmation h2 { margin-bottom: var(--space-xs); }
.confirmation p { color: var(--text-muted); margin-bottom: var(--space-md); }

/* --------------------------------------------------------------------------
   14. Staggered reveal on scroll
   -------------------------------------------------------------------------- */

/* Everything here is scoped to .js, which an inline script in the document
   head adds immediately. If scripting is unavailable the content is simply
   never hidden, so a reveal animation can never swallow the page. */

.js [data-reveal] > * {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition:
    opacity var(--reveal-duration) var(--ease-reveal),
    transform var(--reveal-duration) var(--ease-reveal);
  transition-delay: calc(var(--i, 0) * var(--reveal-stagger));
  will-change: opacity, transform;
}
.js [data-reveal].is-visible > * {
  opacity: 1;
  transform: none;
}
/* Release the compositor hint once the animation has finished. */
.js [data-reveal].is-settled > * { will-change: auto; }

/* Reveal the element itself rather than its children */
.js [data-reveal="self"] {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition:
    opacity var(--reveal-duration) var(--ease-reveal),
    transform var(--reveal-duration) var(--ease-reveal);
  will-change: opacity, transform;
}
.js [data-reveal="self"].is-settled { will-change: auto; }
.js [data-reveal="self"] > * { opacity: 1; transform: none; transition: none; }
.js [data-reveal="self"].is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .figures { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-md); }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --section-y: clamp(4rem, 9vh, 6rem); }

  .nav-toggle { display: inline-flex; }

  /* A full-screen panel. It is pinned to the viewport at the full dynamic
     viewport height, so it covers the screen exactly as mobile browser
     chrome grows and shrinks, and sits below the header in the stacking
     order so the logo and close control stay visible on top of it. */
  .nav {
    position: fixed;
    inset: 0;
    z-index: 90;
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: var(--white);
    padding: calc(5rem + var(--space-md)) var(--gutter) var(--space-xl);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-1rem);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 340ms var(--ease-out),
      transform 340ms var(--ease-out),
      visibility 340ms;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  /* The panel is a child of the header, so it shares the header's stacking
     context. Lift the brand and the toggle above it, otherwise the open
     panel paints over the logo and its own close control. */
  .brand,
  .nav-toggle { position: relative; z-index: 95; }

  .nav__link {
    font-size: 1.35rem;
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding-block: 1rem;
    border-bottom: 1px solid var(--rule);
  }
  .nav__link::after { display: none; }
  .nav__cta { margin: var(--space-sm) 0 0; }
  .nav__cta .btn { width: 100%; }

  .hero__grid,
  .split,
  .split--even { grid-template-columns: minmax(0, 1fr); }
  .hero__media { order: -1; }

  .grid--3 { grid-template-columns: repeat(2, 1fr); }

  .numbered__item { grid-template-columns: 3rem minmax(0, 1fr); }
  .numbered__text { grid-column: 2; }

  .term-list__item { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }

  .statement, .statement--wide { max-width: none; }
}

@media (max-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .review__row { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; padding-block: 0.5rem; }
  .steps__actions .btn { flex: 1 1 100%; }
  .brand__text { display: none; }
  .btn-row .btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   16. 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;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] > *,
  [data-reveal="self"] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   17. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .nav-toggle, .btn { display: none !important; }
  body { color: #000; }
  [data-reveal] > *, [data-reveal="self"] { opacity: 1 !important; transform: none !important; }
}

/* A heading that must sit at h2 in the document outline but read at h3 size,
   used where the visual hierarchy and the semantic one differ. */
.h-minor { font-size: var(--step-h3); font-weight: 500; }

/* Legal links in the footer base line */
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.site-footer__legal a { border-bottom: 1px solid transparent; }
.site-footer__legal a:hover { border-bottom-color: var(--gold); }

/* --------------------------------------------------------------------------
   18. Long-form legal pages
   -------------------------------------------------------------------------- */

.legal { max-width: 46rem; }
.legal__meta {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--rule);
  font-size: var(--step-small);
  color: var(--text-muted);
}
.legal h2 {
  font-size: var(--step-h3);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}
.legal h3 {
  font-size: var(--step-h4);
  font-weight: 600;
  margin-top: var(--space-md);
  margin-bottom: var(--space-2xs);
}
.legal p,
.legal li { color: var(--text-muted); }
.legal p + p { margin-top: 0.9em; }
.legal ul { margin-top: 0.75rem; display: grid; gap: 0.6rem; }
.legal ul li { position: relative; padding-left: 1.5rem; }
.legal ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.5rem;
  height: 1px;
  background: var(--gold);
}
.legal a:not(.btn) {
  color: var(--gold-text);
  border-bottom: 1px solid var(--gold);
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.legal a:not(.btn):hover { color: var(--plum); border-color: var(--plum); }
.legal dl { display: grid; gap: 0.75rem; margin-top: 0.9rem; }
.legal dt { font-weight: 600; color: var(--plum); font-size: 0.95rem; }
.legal dd { margin: 0; color: var(--text-muted); }

/* A boxed note for anything the reader should not miss */
.callout {
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid var(--gold);
  background: var(--plum-tint);
}
.callout p { color: var(--text-muted); }
.callout p + p { margin-top: 0.75em; }
.callout strong { color: var(--plum); }