/* ==========================================================================
   DGY GROUP — MAIN STYLESHEET
   Structure: 01 base · 02 layout · 03 type · 04 actions · 05 nav ·
              06 hero + network · 07 sections · 08 cards · 09 bands ·
              10 footer · 11 motion · 12 responsive
   All values derive from tokens.css.
   ========================================================================== */

/* ==========================================================================
   01 · BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
  color: var(--text-strong);
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--dgy-amber);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--dgy-amber);
  color: var(--dgy-ink);
  font-size: var(--step-small);
  font-weight: 600;
  border-radius: var(--r-pill);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ==========================================================================
   02 · LAYOUT
   ========================================================================== */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band-y); position: relative; }
.band--tight { padding-block: var(--band-y-tight); }
.band--flush-top { padding-block-start: 0; }

.band--paper  { background: var(--surface-1); }
.band--warm   { background: var(--surface-2); }
.band--cool   { background: var(--surface-3); }
.band--sage   { background: var(--surface-sage); }

.band--dark {
  background: var(--dgy-ink);
  color: var(--text-on-dark);
}
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 { color: var(--text-on-dark); }

.band--plum {
  background: linear-gradient(150deg, var(--dgy-plum) 0%, #2b0a24 62%, var(--dgy-ink) 100%);
  color: var(--text-on-dark);
}
.band--plum h1, .band--plum h2, .band--plum h3 { color: var(--text-on-dark); }

.band__rule { border-top: 1px solid var(--rule); }

/* section header block */
.sec-head { max-width: 60ch; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head > * + * { margin-top: var(--sp-4); }
.sec-head + * { margin-top: var(--sp-8); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }

/* ==========================================================================
   03 · TYPE
   ========================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-body);
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
  font-variation-settings: "wdth" 92;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.eyebrow--center { justify-content: center; }
.band--dark .eyebrow, .band--plum .eyebrow { color: var(--dgy-sage); }
.eyebrow--amber { color: var(--dgy-amber) !important; }
.eyebrow--vortx { color: var(--dgy-vortx) !important; }
.eyebrow--gold  { color: var(--dgy-gold) !important; }

.display-1 { font-size: var(--step-display-1); }
.display-2 { font-size: var(--step-display-2); }
.display-3 { font-size: var(--step-display-3); }

.lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 58ch;
}
.band--dark .lede, .band--plum .lede { color: var(--text-on-dark-muted); }
.lede--center { margin-inline: auto; }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--sp-5); }
.prose p { font-size: var(--step-body-lg); }
.prose strong { color: var(--text-strong); font-weight: 600; }
.band--dark .prose p { color: var(--text-on-dark-muted); }
.band--dark .prose strong { color: var(--text-on-dark); }

.mono-note {
  font-family: var(--font-mono);
  font-size: var(--step-tiny);
  letter-spacing: var(--track-mono);
  color: var(--text-faint);
}

/* ==========================================================================
   04 · ACTIONS
   ========================================================================== */
.btn {
  --btn-bg: var(--dgy-amber);
  --btn-fg: var(--dgy-ink);
  --btn-bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9375rem 1.5rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.btn > span { position: relative; z-index: 1; }
.btn__arrow {
  position: relative;
  z-index: 1;
  display: block;
  width: 1em;
  height: 1em;
  flex: none;
  transition: transform var(--dur-mid) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

/* fill sweep */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--dgy-ink);
  transform: translateX(-101%);
  transition: transform var(--dur-mid) var(--ease-out);
}
.btn:hover::after { transform: translateX(0); }
.btn:hover { color: var(--dgy-amber); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-strong);
  --btn-bd: var(--rule-strong);
}
.btn--ghost:hover { color: var(--dgy-amber); border-color: var(--dgy-ink); }

.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: var(--text-on-dark);
  --btn-bd: var(--rule-on-dark-2);
}
.btn--ghost-light::after { background: var(--text-on-dark); }
.btn--ghost-light:hover { color: var(--dgy-ink); border-color: var(--text-on-dark); }

.btn--sm { padding: 0.6875rem 1.125rem; font-size: var(--step-small); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.btn-row--center { justify-content: center; }

/* quiet inline link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--dgy-ink);
  padding-block: 0.25rem;
  border-bottom: 1px solid var(--rule-strong);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.link-arrow svg { width: 0.9em; height: 0.9em; transition: transform var(--dur-mid) var(--ease-out); }
.link-arrow:hover { color: var(--dgy-ink); border-color: var(--dgy-amber); }
.link-arrow:hover svg { transform: translateX(4px); }
.band--dark .link-arrow, .band--plum .link-arrow {
  color: var(--text-on-dark);
  border-color: var(--rule-on-dark-2);
}
.band--dark .link-arrow:hover { border-color: var(--dgy-amber); }

/* ==========================================================================
   05 · NAV
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: color-mix(in srgb, var(--dgy-ink) 92%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--rule-on-dark);
  transition: background var(--dur-mid) var(--ease);
}
.nav__in {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 4.5rem;
  transition: min-height var(--dur-mid) var(--ease);
}
.nav.is-scrolled .nav__in { min-height: 3.75rem; }

.nav__brand { display: flex; align-items: center; flex: none; }
.nav__brand img { height: 2.125rem; width: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin-inline-start: auto;
}
.nav__link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-on-dark-muted);
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.125rem;
  height: 1px;
  background: var(--dgy-amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}
.nav__link:hover { color: var(--text-on-dark); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--text-on-dark); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__right { display: flex; align-items: center; gap: var(--sp-4); flex: none; }

.lang {
  display: flex;
  align-items: center;
  border: 1px solid var(--rule-on-dark-2);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.lang a {
  padding: 0.375rem 0.6875rem;
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-on-dark-faint);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lang a:hover { color: var(--text-on-dark); }
.lang a[aria-current="true"] { background: var(--dgy-sage); color: var(--dgy-ink); }

.nav__burger {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--rule-on-dark-2);
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  place-items: center;
}
.nav__burger span {
  display: block;
  width: 1.125rem;
  height: 1.5px;
  background: var(--text-on-dark);
  transition: transform var(--dur-mid) var(--ease), opacity var(--dur-fast) linear;
}
.nav__burger span + span { margin-top: 4px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 4.5rem 0 auto 0;
  z-index: var(--z-drawer);
  background: var(--dgy-ink-deep);
  border-bottom: 1px solid var(--rule-on-dark);
  padding: var(--sp-5) 0 var(--sp-6);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease-out),
              visibility var(--dur-mid) linear;
}
.drawer.is-open { opacity: 1; transform: none; visibility: visible; }
.drawer a {
  display: block;
  padding: 0.8125rem 0;
  font-size: 1.125rem;
  color: var(--text-on-dark);
  border-bottom: 1px solid var(--rule-on-dark);
}
.drawer .btn { margin-top: var(--sp-5); width: 100%; justify-content: center; }

/* ==========================================================================
   06 · HERO + NETWORK DIAGRAM  (the signature)
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--dgy-ink);
  color: var(--text-on-dark);
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem);
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 140%;
  background:
    radial-gradient(46% 52% at 78% 22%, rgba(185, 205, 190, 0.16), transparent 68%),
    radial-gradient(40% 48% at 12% 88%, rgba(70, 6, 43, 0.55), transparent 70%),
    radial-gradient(30% 34% at 62% 78%, rgba(255, 188, 75, 0.08), transparent 72%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(185, 205, 190, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185, 205, 190, 0.045) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(78% 72% at 50% 26%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(78% 72% at 50% 26%, #000, transparent 78%);
  pointer-events: none;
}
.hero .shell { position: relative; z-index: 1; }
.hero h1 { color: var(--text-on-dark); max-width: 17ch; }
.hero h1 + .lede { margin-top: var(--sp-5); }
.hero .eyebrow + h1 { margin-top: var(--sp-5); }
.hero .lede + .btn-row { margin-top: var(--sp-7); }

/* headline word reveal */
.reveal-line { display: block; overflow: hidden; }
.reveal-word { display: inline-block; }

/* --- network diagram --- */
.network { width: 100%; height: auto; overflow: visible; }
.network__edge {
  fill: none;
  stroke: var(--dgy-sage);
  stroke-opacity: 0.42;
  stroke-width: 1.15;
  transition: stroke var(--dur-mid) var(--ease), stroke-opacity var(--dur-mid) var(--ease);
}
.network__pulse {
  fill: none;
  stroke: var(--dgy-amber);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 10 620;
}
.network__hub-ring {
  fill: none;
  stroke: var(--dgy-amber);
  stroke-opacity: 0.5;
  stroke-width: 1;
}
.network__hub-core { fill: var(--dgy-amber); }
.network__node {
  fill: var(--dgy-ink);
  stroke: var(--dgy-sage);
  stroke-width: 1.4;
  transition: fill var(--dur-fast) var(--ease), stroke var(--dur-fast) var(--ease);
}
.network__label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  fill: var(--text-on-dark-muted);
  letter-spacing: 0.01em;
  transition: fill var(--dur-fast) var(--ease);
}
.network__hub-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--dgy-amber);
}
.network__item:hover .network__node,
.network__item:focus-visible .network__node { fill: var(--dgy-amber); stroke: var(--dgy-amber); }
.network__item:hover .network__label,
.network__item:focus-visible .network__label { fill: var(--text-on-dark); }

/* stat strip beneath hero */
.statstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--rule-on-dark);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--sp-5);
}
.statstrip__item {
  flex: 1 1 9rem;
  padding-right: var(--sp-5);
}
.statstrip__num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--dgy-sage);
}
.statstrip__lbl {
  display: block;
  margin-top: 0.4375rem;
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
}

/* compact page hero for interior pages */
.pagehead {
  position: relative;
  overflow: hidden;
  background: var(--dgy-ink);
  color: var(--text-on-dark);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(3rem, 6vw, 4.5rem);
}
.pagehead::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 60% at 82% 14%, rgba(185, 205, 190, 0.14), transparent 70%),
    radial-gradient(44% 52% at 6% 96%, rgba(70, 6, 43, 0.5), transparent 72%);
  pointer-events: none;
}
.pagehead .shell { position: relative; z-index: 1; }
.pagehead h1 { color: var(--text-on-dark); max-width: 22ch; }
.pagehead .eyebrow + h1 { margin-top: var(--sp-4); }
.pagehead h1 + .lede { margin-top: var(--sp-5); }
/* the hero is dark, but only h1 was lightened — anything else inherited the
   ink heading colour and disappeared into the background. */
.pagehead h2, .pagehead h3 { color: var(--text-on-dark); }
.pagehead .link-arrow { color: var(--text-on-dark); border-color: var(--rule-on-dark-2); }
.pagehead .link-arrow:hover { color: var(--dgy-amber); border-color: var(--dgy-amber); }

/* ==========================================================================
   07 · SECTIONS
   ========================================================================== */
/* the model: three principles, hairline separated */
.principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
}
.principle {
  padding: var(--sp-6) var(--sp-5) 0 0;
  border-right: 1px solid var(--rule);
}
.principle:last-child { border-right: 0; padding-right: 0; }
.principle:not(:first-child) { padding-left: var(--sp-5); }
.principle__mark {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dgy-amber);
}
.principle h3 { margin-top: var(--sp-3); font-size: var(--step-title); }
.principle p { margin-top: var(--sp-3); color: var(--text-muted); font-size: var(--step-small); }

/* ==========================================================================
   08 · CARDS
   ========================================================================== */
/* --- member card --- */
.member {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--surface-0);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease),
              border-color var(--dur-mid) var(--ease);
}
.member::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  background: var(--dgy-amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.member:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
  border-color: var(--rule-strong);
}
.member:hover::before { transform: scaleX(1); }

.member__logo {
  display: flex;
  align-items: center;
  height: 2.5rem;
  margin-bottom: var(--sp-5);
}
.member__logo img { max-height: 2.5rem; width: auto; max-width: 12.5rem; }
.member__name { font-size: var(--step-title); }
.member__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: var(--sp-4);
}
.tag {
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-xs);
  background: var(--surface-sage);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-body);
  line-height: 1.3;
}
.member__blurb {
  margin-top: var(--sp-4);
  flex: 1;
  font-size: var(--step-small);
  color: var(--text-muted);
}
.member__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}
.member__domain {
  font-family: var(--font-mono);
  font-size: var(--step-tiny);
  letter-spacing: var(--track-mono);
  color: var(--text-faint);
}

/* --- partner card: credential, never a destination (no links) --- */
.partner {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  background: var(--surface-0);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.partner:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-2); }
.partner__logo {
  display: flex;
  align-items: center;
  height: 3rem;
  margin-bottom: var(--sp-4);
}
.partner__logo img {
  max-height: 2.625rem;
  width: auto;
  max-width: 9.5rem;
  filter: grayscale(1);
  opacity: 0.68;
  transition: filter var(--dur-mid) var(--ease), opacity var(--dur-mid) var(--ease);
}
.partner:hover .partner__logo img { filter: grayscale(0); opacity: 1; }
.partner__name {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: 0.005em;
}
.partner__desc { margin-top: var(--sp-2); font-size: var(--step-small); color: var(--text-muted); }

/* --- partner marquee (home) --- */
.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--rule);
  padding-block: var(--sp-5);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__item { flex: none; }
.marquee__item img {
  height: 2.125rem;
  width: auto;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter var(--dur-mid) var(--ease), opacity var(--dur-mid) var(--ease);
}
.marquee__item:hover img { filter: grayscale(0); opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --- step card (rewards how it works) --- */
.steps { counter-reset: step; display: grid; gap: 0; border-top: 1px solid var(--rule-on-dark); }
.step {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--rule-on-dark);
}
.step__num {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--dgy-gold);
}
.step h3 { font-size: var(--step-title); }
.step p { margin-top: var(--sp-3); color: var(--text-on-dark-muted); max-width: 62ch; }

/* --- audience / path card --- */
.pathcard {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--surface-0);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease),
              transform var(--dur-mid) var(--ease-out);
}
.pathcard:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.pathcard__mark {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dgy-amber);
}
.pathcard h3 { margin-top: var(--sp-3); font-size: var(--step-title); }
.pathcard p { margin-top: var(--sp-3); flex: 1; font-size: var(--step-small); color: var(--text-muted); }
.pathcard .btn, .pathcard .link-arrow { margin-top: var(--sp-5); align-self: flex-start; }

/* --- benefit tile (rewards) --- */
.benefit {
  padding: var(--sp-5);
  border: 1px solid var(--rule-on-dark);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.028);
}
.benefit h3 { font-size: 1.0625rem; }
.benefit p { margin-top: var(--sp-2); font-size: var(--step-small); color: var(--text-on-dark-muted); }

/* --- rewards lockup ---
   sized by width, not height: the wordmark and tagline are unreadable
   below ~450px, so the logo claims that width and shrinks only when the
   column genuinely cannot hold it. */
.rewards-logo {
  width: 28.125rem;   /* 450px */
  max-width: 100%;
  height: auto;
}

/* --- pointrate callout --- */
.pointrate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--dgy-gold);
  border-radius: var(--r-sm);
  background: rgba(197, 160, 89, 0.08);
}
.pointrate__big {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1;
  color: var(--dgy-gold);
}
.pointrate p { font-size: var(--step-small); color: var(--text-on-dark-muted); max-width: 44ch; }

/* ==========================================================================
   09 · BANDS
   ========================================================================== */
/* teaser: two-column with a vertical accent rule */
.teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
.teaser__body > * + * { margin-top: var(--sp-4); }
.teaser__aside {
  padding-left: var(--sp-5);
  border-left: 2px solid var(--dgy-vortx);
}
.teaser__aside--gold { border-left-color: var(--dgy-gold); }
.teaser__aside p { font-size: var(--step-small); color: var(--text-on-dark-muted); }
.teaser__aside > * + * { margin-top: var(--sp-4); }

/* closing band: three routes */
.routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule-on-dark); margin-top: var(--sp-8); }
.route {
  padding: var(--sp-6) var(--sp-5) var(--sp-6) 0;
  border-right: 1px solid var(--rule-on-dark);
}
.route:last-child { border-right: 0; padding-right: 0; }
.route:not(:first-child) { padding-left: var(--sp-5); }
.route h3 { font-size: 1.125rem; }
.route p { margin-top: var(--sp-2); margin-bottom: var(--sp-5); font-size: var(--step-small); color: var(--text-on-dark-muted); }

/* apply band: single centred invitation */
.invite { text-align: center; max-width: 54ch; margin-inline: auto; }
.invite > * + * { margin-top: var(--sp-4); }
.invite .btn-row { margin-top: var(--sp-6); justify-content: center; }

/* ==========================================================================
   09b · EMAIL SHIELD
   Address is drawn as SVG glyph runs in scrambled DOM order: correct on
   screen, meaningless to a scraper, and not selectable or copyable.
   ========================================================================== */
.mailshield {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--rule-on-dark-2);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.03);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  cursor: default;
}
.mailshield svg { height: 1.5rem; width: auto; pointer-events: none; }
.mailshield svg * { pointer-events: none; }
.mailshield__glyphs { fill: var(--text-on-dark); }
.contactblock { display: grid; gap: var(--sp-5); }
.contactblock__hint { font-size: var(--step-small); color: var(--text-on-dark-muted); max-width: 46ch; }

/* ==========================================================================
   10 · FOOTER
   ========================================================================== */
.footer {
  background: var(--dgy-slate);
  color: var(--text-on-dark);
  padding-block: var(--sp-9) var(--sp-5);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.footer__brand img { height: 2.25rem; width: auto; }
.footer__tagline { margin-top: var(--sp-4); font-size: var(--step-small); color: var(--text-on-dark-muted); max-width: 30ch; }
.footer__social { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.footer__social a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--rule-on-dark-2);
  border-radius: var(--r-sm);
  color: var(--text-on-dark-muted);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.footer__social a:hover { color: var(--dgy-amber); border-color: var(--dgy-amber); }
.footer__social svg { width: 1.0625rem; height: 1.0625rem; }

.footer h2 {
  font-family: var(--font-body);
  font-size: var(--step-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
  margin-bottom: var(--sp-4);
}
.footer__list li + li { margin-top: 0.625rem; }
.footer__list a {
  font-size: var(--step-small);
  color: var(--text-on-dark-muted);
  transition: color var(--dur-fast) var(--ease);
}
.footer__list a:hover { color: var(--dgy-amber); }
.footer__ext::after { content: " ↗"; font-size: 0.75em; opacity: 0.7; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-9);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule-on-dark);
}
.footer__legalline {
  font-size: var(--step-tiny);
  color: var(--text-on-dark-faint);
  line-height: 1.7;
}
.footer__legalline a { color: var(--text-on-dark-muted); border-bottom: 1px solid var(--rule-on-dark-2); }
.footer__legalline a:hover { color: var(--dgy-amber); border-color: var(--dgy-amber); }
.footer__legalnav { display: flex; gap: var(--sp-4); }
.footer__legalnav a {
  font-size: 0.75rem;
  color: var(--text-on-dark-faint);
  transition: color var(--dur-fast) var(--ease);
}
.footer__legalnav a:hover { color: var(--dgy-amber); }

/* ==========================================================================
   10b · LEGAL / PROSE PAGE
   ========================================================================== */
.legal { max-width: 74ch; }
.legal h2 {
  margin-top: var(--sp-8);
  font-size: var(--step-display-3);
}
.legal h3 { margin-top: var(--sp-6); font-size: var(--step-title); }
.legal p, .legal li { margin-top: var(--sp-4); font-size: var(--step-body); color: var(--text-body); }
.legal ul { margin-top: var(--sp-4); }
.legal li { position: relative; padding-left: var(--sp-5); }
.legal li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.5rem;
  height: 1px;
  background: var(--dgy-amber);
}
.legal__meta {
  font-family: var(--font-mono);
  font-size: var(--step-tiny);
  color: var(--text-faint);
  letter-spacing: var(--track-mono);
}

/* 404 */
.notfound { text-align: center; max-width: 46ch; margin-inline: auto; }
.notfound__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 8rem);
  line-height: 1;
  color: var(--dgy-sage);
}
.notfound > * + * { margin-top: var(--sp-4); }
.notfound .btn-row { margin-top: var(--sp-6); justify-content: center; }

/* ==========================================================================
   11 · MOTION
   Reveals only engage when JS is present, so content is always visible
   for crawlers and no-JS visitors.
   ========================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js .hero [data-hero-word] {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 520ms var(--ease), transform 620ms var(--ease-out);
  transition-delay: calc(var(--w, 0) * 45ms);
}
.js .hero.is-ready [data-hero-word] { opacity: 1; transform: none; }

.js .network__edge, .js .network__pulse { stroke-dasharray: 620; stroke-dashoffset: 620; }
.js .network.is-ready .network__edge {
  animation: draw var(--dur-draw) var(--ease-out) forwards;
  animation-delay: calc(240ms + var(--n, 0) * 90ms);
}
.js .network.is-ready .network__pulse {
  stroke-dasharray: 10 620;
  animation: pulse 3.6s linear infinite;
  animation-delay: calc(1.5s + var(--n, 0) * 420ms);
}
.js .network__hub-core, .js .network__hub-ring, .js .network__item {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}
.js .network.is-ready .network__hub-core,
.js .network.is-ready .network__hub-ring { opacity: 1; transition-delay: 120ms; }
.js .network.is-ready .network__item { opacity: 1; transition-delay: calc(560ms + var(--n, 0) * 90ms); }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pulse { from { stroke-dashoffset: 630; } to { stroke-dashoffset: 0; } }

.js .network.is-ready .network__hub-ring {
  animation: hubBreathe 4.5s var(--ease) 1.4s infinite;
}
@keyframes hubBreathe {
  0%, 100% { transform: scale(1); stroke-opacity: 0.5; }
  50%      { transform: scale(1.16); stroke-opacity: 0.16; }
}

.counter { font-variant-numeric: tabular-nums; }

@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;
  }
  .js [data-reveal],
  .js .hero [data-hero-word],
  .js .network__hub-core,
  .js .network__hub-ring,
  .js .network__item { opacity: 1 !important; transform: none !important; }
  .js .network__edge, .js .network__pulse { stroke-dashoffset: 0 !important; stroke-dasharray: none !important; }
  .js .network__pulse { display: none; }
  .marquee__track { animation: none !important; }
}

/* ==========================================================================
   12 · RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .footer__top { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__right > .btn { display: none; } /* the drawer carries the CTA */
  .nav__burger { display: grid; }
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .teaser { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principles, .routes { grid-template-columns: minmax(0, 1fr); }
  .principle, .route {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding: var(--sp-5) 0;
  }
  .route { border-bottom-color: var(--rule-on-dark); }
  .principle:not(:first-child), .route:not(:first-child) { padding-left: 0; }
  .principle:last-child, .route:last-child { border-bottom: 0; }
  .hero h1 { max-width: 20ch; }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .statstrip__num { font-size: 1.875rem; }
  .step { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .network__label { font-size: 12px; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row > .btn { width: 100%; justify-content: center; }
  .pathcard .btn { width: auto; }
}

@media print {
  .nav, .drawer, .footer__social, .marquee { display: none; }
  body { background: #fff; color: #000; }
}