/* =====================================================================
   ETRYUM — Phase 0 landing
   Design tokens → base → components → sections → responsive
   ===================================================================== */

/* ---------------------------------------------------------------------
   FONTS — self-hosted, no third-party requests
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/hankengrotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/hankengrotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------
   DESIGN TOKENS
   --------------------------------------------------------------------- */
:root {
  /* --- BRAND COLOUR ------------------------------------------------
     Values sampled from the official ETRYUM Brand Identity document
     (Summa, 2026 — "The Language of Color", pp. 18–20). The document
     names the colours but does not publish HEX values; these are the
     measured screen equivalents. Replace here if the brand team issues
     official HEX / Pantone references — nothing else needs to change. */
  --etryum-black:        #000000;
  --etryum-first-light:  #EFCC86;  /* PRIMARY   · Health */
  --etryum-terracotta:   #C96543;  /* PRIMARY   · Human  */
  --etryum-coral:        #F37F45;  /* SECONDARY · Vitality */
  --etryum-ocher:        #B66E05;  /* SECONDARY · Origin */
  --etryum-garnet:       #310000;  /* SECONDARY · Center */
  --etryum-golden:       #D89A00;  /* SECONDARY · Golden */

  /* Derived working tones (NOT official brand colours — safe to tune) */
  --ink:            #080706;   /* warm near-black page ground   */
  --ink-raised:     #12100E;   /* raised dark surface            */
  --bone:           #F2E9DC;   /* text on dark                   */
  --bone-dim:       rgba(242, 233, 220, .62);
  --first-light-t:  #F8EFDF;   /* light section ground (tint)    */
  --ink-on-light:   #17120E;   /* text on light                  */
  --ink-on-light-d: rgba(23, 18, 14, .66);
  --terracotta-dk:  #A9482B;   /* terracotta hover / depth       */
  --hairline:       rgba(242, 233, 220, .16);
  --hairline-dark:  rgba(23, 18, 14, .16);

  /* --- TYPOGRAPHY --------------------------------------------------- */
  --font-display: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --fs-micro:   clamp(.625rem, .34vw + .55rem, .72rem);
  --fs-body:    clamp(1rem, .18vw + .96rem, 1.0625rem);
  --fs-body-lg: clamp(1.0625rem, .5vw + .95rem, 1.3125rem);
  --fs-sub:     clamp(1.375rem, 1.6vw + .9rem, 2.375rem);
  --fs-display: clamp(2.125rem, 4.1vw + .6rem, 4.5rem);
  --fs-hero:    clamp(2.625rem, 7vw + .3rem, 7rem);

  /* --- SPACE -------------------------------------------------------- */
  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs:  .875rem;
  --space-sm:  1.5rem;
  --space-md:  2.5rem;
  --space-lg:  clamp(3rem, 6vw, 5rem);
  --space-xl:  clamp(4.5rem, 9vw, 8rem);
  --space-2xl: clamp(6rem, 13vw, 11rem);

  /* --- LAYOUT ------------------------------------------------------- */
  --container: 1440px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 44ch;
  --nav-h: 4.75rem;

  /* --- MOTION ------------------------------------------------------- */
  --ease-premium: cubic-bezier(.16, .84, .28, 1);
  --ease-soft:    cubic-bezier(.32, .72, 0, 1);
  --dur-fast:   .28s;
  --dur-normal: .55s;
  --dur-slow:   1.1s;
}

/* ---------------------------------------------------------------------
   RESET / BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4 { margin: 0; font-weight: 300; letter-spacing: -.018em; }
p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
abbr[title] { text-decoration: none; border: 0; }

:focus-visible {
  outline: 2px solid var(--etryum-first-light);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed; top: .75rem; left: .75rem; z-index: 999;
  padding: .7rem 1.1rem;
  background: var(--etryum-first-light); color: var(--ink);
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-premium);
}
.skip-link:focus { transform: none; }

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

/* ---------------------------------------------------------------------
   TYPE UTILITIES
   --------------------------------------------------------------------- */
.micro {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: .24em;
  font-weight: 500;
  line-height: 1.5;
}
.h-hero {
  font-size: var(--fs-hero);
  line-height: .97;
  letter-spacing: -.028em;
  font-weight: 250;
  text-wrap: balance;
}
.h-display {
  font-size: var(--fs-display);
  line-height: 1.04;
  letter-spacing: -.022em;
  font-weight: 250;
  text-wrap: balance;
}
.h-display--muted { color: var(--ink-on-light-d); margin-top: .18em; }
.h-sub {
  font-size: var(--fs-sub);
  line-height: 1.18;
  letter-spacing: -.018em;
  font-weight: 300;
  text-wrap: balance;
}
.h-sub--accent { color: var(--etryum-terracotta); }
.h-sub--tight { margin-top: var(--space-sm); }
.body-lg {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  max-width: var(--measure);
  color: var(--bone-dim);
}
.sec-label { margin-bottom: var(--space-md); }
.is-accent { color: var(--etryum-first-light); }

/* ---------------------------------------------------------------------
   BUTTONS / LINKS
   --------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--etryum-first-light);
  --btn-fg: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.05rem 1.9rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-weight: 600;
  border: 1px solid var(--btn-bg);
  overflow: hidden;
  transition: background var(--dur-fast) var(--ease-premium),
              color var(--dur-fast) var(--ease-premium),
              border-color var(--dur-fast) var(--ease-premium);
}
.btn:hover { --btn-bg: var(--etryum-terracotta); color: var(--first-light-t); }
.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--first-light-t); }
.btn--dark:hover { --btn-bg: var(--etryum-terracotta); border-color: var(--etryum-terracotta); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btn__spinner {
  width: .85em; height: .85em;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  display: none;
}
.btn.is-loading .btn__spinner { display: block; animation: spin .7s linear infinite; }
.btn.is-loading { pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: .7em;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-weight: 500;
  padding-bottom: .35em;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-premium), gap var(--dur-fast) var(--ease-premium);
}
.link-arrow::after { content: '→'; letter-spacing: 0; }
.link-arrow:hover { gap: 1.1em; color: var(--etryum-first-light); }
.link-arrow--sm { margin-top: var(--space-sm); }

/* ---------------------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background var(--dur-normal) var(--ease-premium),
              backdrop-filter var(--dur-normal) var(--ease-premium),
              border-color var(--dur-normal) var(--ease-premium);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(8, 7, 6, .74);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border-bottom-color: var(--hairline);
}
/* The bar reads the section beneath it and inverts when needed. */
.nav.is-light { color: var(--ink-on-light); }
.nav.is-light.is-scrolled {
  background: rgba(248, 239, 223, .8);
  border-bottom-color: var(--hairline-dark);
}
.nav.is-light .nav__links a { color: rgba(23, 18, 14, .62); }
.nav.is-light .nav__links a:hover { color: var(--ink-on-light); }
.nav.is-light .nav__cta { background: var(--ink); color: var(--first-light-t) !important; }
.nav.is-light .nav__cta:hover { background: var(--etryum-terracotta); }
.nav.is-light .nav__symbol,
.nav.is-light .nav__wordmark { filter: brightness(0) saturate(100%); opacity: .92; }
.nav.is-hidden { transform: translateY(-100%); }
.nav { transition-property: background, backdrop-filter, border-color, transform; }

.nav__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.nav__brand { display: flex; align-items: center; gap: .7rem; }
.nav__symbol { width: 30px; height: auto; opacity: .95; }
.nav__wordmark { width: 104px; height: auto; }

.nav__links { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.25rem); }
.nav__links a {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 500;
  color: var(--bone-dim);
  transition: color var(--dur-fast) var(--ease-premium);
}
.nav__links a:hover { color: var(--bone); }
.nav__cta {
  color: var(--ink) !important;
  background: var(--etryum-first-light);
  padding: .7rem 1.15rem;
  transition: background var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-premium);
}
.nav__cta:hover { background: var(--etryum-terracotta); color: var(--first-light-t) !important; }

/* Language switch — quiet, sits after the CTA */
.lang {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 500;
}
.lang a { color: var(--bone-dim); transition: color var(--dur-fast) var(--ease-premium); }
.lang a:hover { color: var(--bone); }
.lang [aria-current="true"] { color: var(--etryum-first-light); }
.lang__sep { color: rgba(242, 233, 220, .3); }
.nav.is-light .lang a { color: rgba(23, 18, 14, .5); }
.nav.is-light .lang a:hover { color: var(--ink-on-light); }
.nav.is-light .lang [aria-current="true"] { color: var(--etryum-terracotta); }
.nav.is-light .lang__sep { color: rgba(23, 18, 14, .28); }

.nav__toggle { display: none; align-items: center; gap: .6rem; padding: .5rem 0; }
.nav__toggle-label {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .18em; font-weight: 500;
}
.nav__toggle-bars { display: block; width: 22px; }
.nav__toggle-bars i {
  display: block; height: 1px; background: currentColor; margin: 5px 0;
  transition: transform var(--dur-fast) var(--ease-premium), opacity var(--dur-fast) var(--ease-premium);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:first-child { transform: translateY(3px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:last-child { transform: translateY(-3px) rotate(-45deg); }

/* Mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ink);
  padding: calc(var(--nav-h) + var(--space-lg)) var(--gutter) var(--space-lg);
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease-premium);
}
.menu.is-open { opacity: 1; }
.menu__nav { display: flex; flex-direction: column; gap: .35em; }
.menu__nav a {
  display: flex; align-items: baseline; gap: 1rem;
  font-size: clamp(1.9rem, 8vw, 3rem);
  line-height: 1.1; letter-spacing: -.025em; font-weight: 250;
  padding: .18em 0;
  border-bottom: 1px solid var(--hairline);
}
.menu__idx { font-size: var(--fs-micro); letter-spacing: .2em; color: var(--etryum-first-light); }
.menu__foot { display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start; }
.menu__meta { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .22em; color: var(--bone-dim); }
.menu__foot .lang { letter-spacing: .2em; }

/* ---------------------------------------------------------------------
   SECTION SHELLS
   --------------------------------------------------------------------- */
.section {
  position: relative;
  padding-block: var(--space-2xl);
  overflow: clip;
}
.section--dark { background: var(--ink); color: var(--bone); }
.section--light {
  background: var(--first-light-t);
  color: var(--ink-on-light);
}
.section--light .body-lg { color: var(--ink-on-light-d); }
.section--light .sec-label { color: var(--etryum-terracotta); }
.section--terracotta {
  background: var(--etryum-terracotta);
  color: var(--first-light-t);
}
.section--terracotta .body-lg { color: rgba(248, 239, 223, .82); }
.section--terracotta .sec-label { color: rgba(248, 239, 223, .7); }
.section--garnet {
  background: var(--etryum-garnet);
  color: var(--first-light-t);
}
.section--garnet .body-lg { color: rgba(248, 239, 223, .72); }
.section--garnet .sec-label { color: var(--etryum-first-light); }
.section--dark .sec-label { color: var(--etryum-first-light); }

/* Shared image mask — images are framed, never bare */
.img-mask { position: relative; overflow: hidden; background: #100D0B; }
.img-mask img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  transition: transform var(--dur-slow) var(--ease-soft);
}
.img-mask.is-in img { transform: scale(1); }
.img-mask--wide { aspect-ratio: 21 / 9; }
.img-mask--bleed { aspect-ratio: 21 / 9; }

/* ---------------------------------------------------------------------
   01 · HERO
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(var(--nav-h) + var(--space-lg)) 0 var(--space-md);
  background: #000;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__poster, .hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__video { opacity: 0; transition: opacity 1.2s var(--ease-soft); }
.hero__video.is-playing { opacity: 1; }
.hero__poster { transform: scale(1.04); animation: heroDrift 14s var(--ease-soft) forwards; }
@keyframes heroDrift { to { transform: scale(1); } }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.42) 38%, rgba(0,0,0,.12) 68%, rgba(0,0,0,.45) 100%),
    linear-gradient(to right, rgba(0,0,0,.55) 0%, rgba(0,0,0,.05) 55%);
}

.hero__body {
  align-self: end;
  max-width: var(--container);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero__eyebrow { color: var(--etryum-first-light); margin-bottom: var(--space-sm); }
.hero__title { font-size: var(--fs-hero); line-height: .93; letter-spacing: -.035em; font-weight: 250; }
.hero__lead {
  margin-top: var(--space-sm);
  font-size: var(--fs-body-lg);
  max-width: 34ch;
  color: rgba(242, 233, 220, .8);
}
.hero__actions {
  margin-top: var(--space-md);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-sm) var(--space-md);
}

.hero__foot {
  max-width: var(--container);
  width: 100%;
  margin-inline: auto;
  padding: var(--space-lg) var(--gutter) 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm);
  color: var(--bone-dim);
}
.hero__tagline { color: var(--etryum-first-light); }

.sound { display: inline-flex; align-items: center; gap: .7rem; color: var(--bone-dim); transition: color var(--dur-fast); }
.sound:hover { color: var(--bone); }
.sound__label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .2em; font-weight: 500; }
.sound__bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.sound__bars i { width: 2px; height: 4px; background: currentColor; }
.sound[aria-pressed="true"] .sound__bars i { animation: eq .9s ease-in-out infinite alternate; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(2) { animation-delay: .15s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(3) { animation-delay: .3s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { from { height: 3px; } to { height: 12px; } }

/* ---------------------------------------------------------------------
   02 · PROBLEM
   --------------------------------------------------------------------- */
.problem__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: var(--space-lg) clamp(2rem, 6vw, 6rem);
  align-items: end;
}
.problem__text .h-sub { margin-top: var(--space-md); color: var(--etryum-first-light); }
.problem__text .body-lg { margin-top: var(--space-sm); }
.problem__figure .img-mask { aspect-ratio: 4 / 5; }

/* ---------------------------------------------------------------------
   03 · DEPARTMENTS
   --------------------------------------------------------------------- */
.departments__grid {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  gap: var(--space-lg) clamp(2rem, 7vw, 7rem);
  align-items: start;
}
.departments__lead { max-width: 40ch; }

.flows { display: flex; flex-direction: column; gap: var(--space-sm); }
.flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(.6rem, 1.4vw, 1.25rem);
  padding-block: var(--space-xs);
  border-top: 1px solid var(--hairline-dark);
  font-size: clamp(.95rem, 1.2vw, 1.15rem);
}
.flow:last-child { border-bottom: 1px solid var(--hairline-dark); }
.flow__from { color: var(--ink-on-light-d); }
.flow__to { color: var(--ink-on-light); }
.flow__line { width: clamp(52px, 8vw, 96px); height: auto; overflow: visible; }
.flow__line path {
  fill: none;
  stroke: var(--etryum-terracotta);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset 1.4s var(--ease-soft);
}
.flow.is-in .flow__line path { stroke-dashoffset: 0; }

.departments__figure { margin-top: var(--space-xl); }

/* ---------------------------------------------------------------------
   04 · METHOD
   --------------------------------------------------------------------- */
.method__title { margin-bottom: var(--space-xl); }
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg) clamp(1.5rem, 3vw, 3rem);
}
.step { padding-top: var(--space-sm); border-top: 1px solid var(--hairline); }
.step__idx { display: block; color: var(--etryum-golden); }
.step__name {
  margin-top: var(--space-sm);
  font-size: clamp(1.5rem, 2.1vw, 2.125rem);
  letter-spacing: -.02em;
}
.step__copy { margin-top: var(--space-2xs); color: var(--bone-dim); font-size: var(--fs-body); }

/* ---------------------------------------------------------------------
   05 · CLINICAL ECOSYSTEM (editorial index)
   --------------------------------------------------------------------- */
.ecosystem__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg) clamp(2rem, 7vw, 7rem);
  align-items: end;
  margin-bottom: var(--space-xl);
}
.ecosystem__head .body-lg { max-width: 38ch; }

.index { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); gap: clamp(2rem, 5vw, 5rem); }
.index__stage {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-md));
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-raised);
  order: 2;
}
.index__stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity var(--dur-normal) var(--ease-soft), transform var(--dur-slow) var(--ease-soft);
}
.index__stage img.is-active { opacity: 1; transform: scale(1); }

.index__list { order: 1; }
.disc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding-block: clamp(1.75rem, 3.4vw, 2.75rem);
  border-top: 1px solid var(--hairline);
  transition: opacity var(--dur-normal) var(--ease-premium);
}
.index__list .disc:last-child { border-bottom: 1px solid var(--hairline); }
.disc__idx { color: var(--etryum-golden); padding-top: .55em; }
.disc__title {
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -.024em;
  transition: color var(--dur-fast) var(--ease-premium);
}
.disc__abbr { color: var(--bone-dim); }
.disc__kicker { margin-top: .9em; color: var(--etryum-first-light); }
.disc__copy { margin-top: var(--space-2xs); color: var(--bone-dim); max-width: 46ch; }
/* The sports-medicine photograph is daylight-cool; a light warm pass
   settles it alongside the golden-hour frames around it. */
img[src*="pillar-trauma"] { filter: sepia(.14) saturate(1.02) contrast(1.04) brightness(.98); }
.disc__thumb { display: none; margin-top: var(--space-sm); width: 100%; }

@media (hover: hover) and (min-width: 901px) {
  .index:hover .disc { opacity: .42; }
  .index .disc.is-active,
  .index:hover .disc:hover { opacity: 1; }
  .disc.is-active .disc__title { color: var(--etryum-first-light); }
}

/* ---------------------------------------------------------------------
   06 · RECOVERY & PERFORMANCE
   --------------------------------------------------------------------- */
.recovery__grid {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr);
  gap: var(--space-lg) clamp(2rem, 7vw, 7rem);
  align-items: start;
}
.recovery__text .body-lg { max-width: 46ch; }
.recovery .h-sub--tight { color: var(--first-light-t); }

.track { position: relative; display: flex; flex-direction: column; }
.track::before {
  content: '';
  position: absolute;
  left: 3px; top: 1.5rem; bottom: 1.5rem;
  width: 1px;
  background: rgba(248, 239, 223, .35);
}
.track li {
  position: relative;
  display: flex; align-items: center; gap: 1rem;
  padding-block: .85rem;
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  border-bottom: 1px solid rgba(248, 239, 223, .22);
}
.track li:first-child { border-top: 1px solid rgba(248, 239, 223, .22); }
.track__dot { position: relative; z-index: 1; }
.track__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--first-light-t);
  flex: none;
}
.track li:last-child .track__dot { background: var(--etryum-first-light); box-shadow: 0 0 0 4px rgba(239, 204, 134, .22); }

.recovery__figure { margin-top: var(--space-xl); }
.recovery__figure figcaption {
  max-width: var(--container);
  margin: var(--space-sm) auto 0;
  padding-inline: var(--gutter);
  color: rgba(248, 239, 223, .7);
}

/* ---------------------------------------------------------------------
   07 · PERFORMANCE × LONGEVITY
   --------------------------------------------------------------------- */
.bridge__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  gap: var(--space-lg) clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.bridge__text .body-lg { margin-top: var(--space-md); }
.bridge__figure .img-mask { aspect-ratio: 3 / 4; }

/* ---------------------------------------------------------------------
   08 · LOCATION
   --------------------------------------------------------------------- */
.location__lead { margin-top: var(--space-md); max-width: 52ch; }
.location__figure { margin-top: var(--space-xl); }
/* The dossier aerial is a cool daylight photograph; a restrained warm grade
   pulls it into the ETRYUM palette without turning it into a filter. */
.location__figure .img-mask { position: relative; }
.location__figure img { filter: saturate(.86) contrast(1.06) brightness(.9); }
.location__figure .img-mask::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(8, 7, 6, .34) 0%, rgba(8, 7, 6, 0) 42%, rgba(8, 7, 6, .5) 100%),
    linear-gradient(105deg, rgba(201, 101, 67, .16), rgba(182, 110, 5, .12));
  pointer-events: none;
}
.facts {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md) clamp(1.5rem, 4vw, 4rem);
}
.fact { padding-top: var(--space-sm); border-top: 1px solid var(--hairline); }
.fact dt { color: var(--etryum-golden); margin-bottom: var(--space-2xs); }
.fact dd {
  margin: 0;
  font-size: clamp(1.125rem, 1.5vw, 1.4375rem);
  line-height: 1.25;
  letter-spacing: -.015em;
}

/* ---------------------------------------------------------------------
   09 · PHASE 0 NODE
   --------------------------------------------------------------------- */
.node__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: var(--space-lg) clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.node__text .body-lg { margin-top: var(--space-md); }
.pull {
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(239, 204, 134, .3);
  font-size: var(--fs-sub);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--etryum-first-light);
  max-width: 22ch;
}
.node__figure .img-mask { aspect-ratio: 4 / 3; }

/* ---------------------------------------------------------------------
   MID-PAGE CONVERSION BAND
   A single pause between the recovery story and the longevity bridge.
   --------------------------------------------------------------------- */
.midcta {
  padding-block: var(--space-xl);
  background: var(--ink);
  color: var(--bone);
  text-align: center;
}
.midcta__date {
  color: var(--etryum-first-light);
  margin-bottom: var(--space-sm);
}
.midcta__title {
  font-size: clamp(1.75rem, 3.2vw + .5rem, 3.25rem);
  line-height: 1.06;
  letter-spacing: -.024em;
  font-weight: 250;
  max-width: 26ch;
  margin-inline: auto;
  text-wrap: balance;
}
.midcta__copy {
  margin: var(--space-sm) auto 0;
  max-width: 44ch;
  color: var(--bone-dim);
  font-size: var(--fs-body-lg);
}
.midcta__actions {
  margin-top: var(--space-md);
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md);
  align-items: center; justify-content: center;
}

/* ---------------------------------------------------------------------
   CLINICAL TEAM
   --------------------------------------------------------------------- */
.team__head { margin-bottom: var(--space-xl); }
.team__head .body-lg { margin-top: var(--space-md); max-width: 52ch; }
.team__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg) clamp(1.5rem, 3.5vw, 3.5rem);
}
.member__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-raised);
  margin-bottom: var(--space-sm);
}
.member__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform var(--dur-slow) var(--ease-soft);
}
.member.is-in .member__photo img { transform: scale(1); }
.member__name {
  font-size: clamp(1.25rem, 1.7vw, 1.625rem);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.member__role {
  margin-top: .5rem;
  color: var(--etryum-first-light);
  line-height: 1.6;
}
.member__bio {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--hairline);
  color: var(--bone-dim);
  font-size: var(--fs-body);
}
.team__note {
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--hairline);
  color: rgba(242, 233, 220, .45);
  max-width: 60ch;
}

/* ---------------------------------------------------------------------
   A FIRST VISIT — the model as a sequence of real appointments
   --------------------------------------------------------------------- */
.visit__head { margin-bottom: var(--space-xl); }
.visit__head .body-lg { margin-top: var(--space-md); max-width: 52ch; }

.visit__list { counter-reset: visit; }
.step-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding-block: clamp(1.6rem, 3vw, 2.5rem);
  border-top: 1px solid var(--hairline-dark);
}
.visit__list .step-row:last-child { border-bottom: 1px solid var(--hairline-dark); }
.step-row__idx { color: var(--etryum-terracotta); padding-top: .35em; }
.step-row__name {
  font-size: clamp(1.375rem, 2.2vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: -.022em;
}
.step-row__copy {
  margin-top: var(--space-2xs);
  color: var(--ink-on-light-d);
  max-width: 54ch;
}
.step-row__time {
  color: var(--etryum-terracotta);
  white-space: nowrap;
  padding-top: .55em;
}
.step-row--feature .step-row__name { color: var(--etryum-terracotta); }

.visit__note {
  margin-top: var(--space-lg);
  color: var(--ink-on-light-d);
  max-width: 62ch;
}

/* ---------------------------------------------------------------------
   LOCATION — getting here
   --------------------------------------------------------------------- */
.travel {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.travel__list { display: flex; flex-direction: column; }
.travel__list li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-sm);
  padding-block: .8rem;
  border-bottom: 1px solid var(--hairline);
}
.travel__list li:first-child { border-top: 1px solid var(--hairline); }
.travel__place { color: var(--bone); }
.travel__time { color: var(--etryum-golden); font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.travel__langs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--space-sm); }
.travel__langs span {
  padding: .45rem .85rem;
  border: 1px solid var(--hairline);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: .18em;
}

/* ---------------------------------------------------------------------
   10 · AUDIENCES
   --------------------------------------------------------------------- */
.aud { margin-top: var(--space-xl); }
.aud__item {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: var(--space-2xs) clamp(1.5rem, 5vw, 5rem);
  padding-block: clamp(1.4rem, 2.6vw, 2.25rem);
  border-top: 1px solid var(--hairline);
  transition: background var(--dur-normal) var(--ease-premium);
}
.aud__item:last-child { border-bottom: 1px solid var(--hairline); }
.aud__name {
  font-size: clamp(1.25rem, 2vw, 1.875rem);
  letter-spacing: -.022em;
  line-height: 1.12;
}
.aud__copy { color: var(--bone-dim); align-self: center; }

/* ---------------------------------------------------------------------
   11 · HUMAN + SCIENCE
   --------------------------------------------------------------------- */
.science { padding-top: 0; }
.science__figure { margin-bottom: var(--space-xl); }
.science__title { display: flex; flex-direction: column; gap: .1em; max-width: 22ch; }
.science__title span { display: block; }
.science__copy { margin-top: var(--space-lg); }

/* ---------------------------------------------------------------------
   12 · EARLY ACCESS
   --------------------------------------------------------------------- */
.access { padding-top: 0; }
.access__band { line-height: 0; }
.access__band img { width: 100%; height: clamp(180px, 26vw, 340px); object-fit: cover; }
.access__grid {
  padding-top: var(--space-xl);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg) clamp(2.5rem, 8vw, 8rem);
  align-items: start;
}
.access__intro .body-lg { margin-top: var(--space-md); }

.form { display: flex; flex-direction: column; gap: var(--space-sm); }
[hidden] { display: none !important; }
/* Honeypot — off-screen rather than display:none so bots still fill it. */
.hp {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field label {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 500;
  color: var(--ink-on-light-d);
}
.field abbr { color: var(--etryum-terracotta); }
.field__opt { text-transform: none; letter-spacing: .04em; opacity: .6; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select {
  width: 100%;
  padding: .85rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline-dark);
  border-radius: 0;
  font-size: var(--fs-body);
  color: var(--ink-on-light);
  transition: border-color var(--dur-fast) var(--ease-premium);
  appearance: none;
}
.field input:focus, .field select:focus { outline: none; border-bottom-color: var(--etryum-terracotta); }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--etryum-terracotta); outline-offset: 4px; }
.field.is-invalid input, .field.is-invalid select { border-bottom-color: #A9482B; }
.field__err { font-size: .8125rem; color: #A9482B; }

.select { position: relative; }
.select__chev {
  position: absolute; right: .2rem; top: 50%;
  width: 8px; height: 8px;
  border-right: 1px solid var(--ink-on-light-d);
  border-bottom: 1px solid var(--ink-on-light-d);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.field--check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  margin-top: var(--space-2xs);
}
.field--check input { width: 1.05rem; height: 1.05rem; margin-top: .28rem; accent-color: var(--etryum-terracotta); }
.field--check label {
  text-transform: none; letter-spacing: .01em; font-size: .875rem; line-height: 1.5;
  font-weight: 300; color: var(--ink-on-light-d);
}
.field--check label a { text-decoration: underline; text-underline-offset: 3px; }
.field--check .field__err { grid-column: 1 / -1; }

.form__submit { align-self: flex-start; margin-top: var(--space-2xs); }
.form__note { color: var(--ink-on-light-d); letter-spacing: .1em; }
.form__status { font-size: .875rem; }
.form__status--error { color: #A9482B; }

.form__success { padding-top: var(--space-sm); }
.form__success:focus { outline: none; }
.form__success-mark { width: 88px; height: auto; overflow: visible; margin-bottom: var(--space-sm); }
.form__success-mark path { fill: none; stroke: var(--etryum-terracotta); stroke-width: 7; stroke-linecap: round; }
.form__success h3 { font-size: var(--fs-sub); letter-spacing: -.02em; }
.form__success p { margin-top: var(--space-2xs); max-width: 38ch; color: var(--ink-on-light-d); }

/* ---------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------- */
.footer { background: #000; color: var(--bone); padding-block: var(--space-xl) var(--space-lg); }
.footer__top {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--hairline);
}
.footer__wordmark { width: clamp(160px, 26vw, 300px); }
.footer__tagline {
  margin-top: .9rem;
  font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: .28em; font-weight: 500;
  color: var(--etryum-first-light);
}
.footer__claim { font-size: var(--fs-sub); letter-spacing: -.02em; line-height: 1.15; max-width: 16ch; color: var(--bone-dim); }

.footer__grid {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md) clamp(1.5rem, 4vw, 4rem);
}
.footer__col .micro { color: var(--etryum-golden); margin-bottom: var(--space-2xs); }
.footer__col p,
.footer__col address {
  color: var(--bone-dim);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-style: normal;
}
.footer__links { display: flex; flex-direction: column; gap: .3rem; }
.footer__links a { color: var(--bone-dim); transition: color var(--dur-fast) var(--ease-premium); }
.footer__links a:hover { color: var(--etryum-first-light); }
.footer__bottom {
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md);
  justify-content: space-between;
  color: rgba(242, 233, 220, .45);
}

/* ---------------------------------------------------------------------
   REVEAL SYSTEM
   --------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-slow) var(--ease-soft), transform var(--dur-slow) var(--ease-soft);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .09s; }
[data-reveal-delay="2"] { transition-delay: .18s; }
[data-reveal-delay="3"] { transition-delay: .27s; }

/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --nav-h: 4.25rem; }

  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__inner > .lang { display: none; }

  .problem__grid,
  .departments__grid,
  .recovery__grid,
  .bridge__grid,
  .node__grid,
  .ecosystem__head,
  .access__grid,
  .index { grid-template-columns: minmax(0, 1fr); }

  .index__stage { display: none; }
  .disc { grid-template-columns: auto minmax(0, 1fr); }
  .disc__thumb { display: block; grid-column: 1 / -1; aspect-ratio: 16 / 10; object-fit: cover; }

  .aud__item { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .travel { grid-template-columns: minmax(0, 1fr); }
  .step-row { grid-template-columns: auto minmax(0, 1fr); }
  .step-row__time { grid-column: 2; padding-top: .8rem; }
  .img-mask--wide, .img-mask--bleed { aspect-ratio: 16 / 10; }
  .bridge__figure .img-mask,
  .problem__figure .img-mask { aspect-ratio: 4 / 3; }

  .hero__foot { flex-wrap: wrap; row-gap: var(--space-xs); }
  .hero__tagline { order: 3; }
  .science__title { max-width: none; }
}

@media (max-width: 560px) {
  .team__grid { grid-template-columns: minmax(0, 1fr); }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .flow { grid-template-columns: 1fr; gap: .35rem; }
  .flow__line { width: 76px; }
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; }
  .nav__wordmark { width: 88px; }
  .footer__top { align-items: flex-start; }
}

/* Ultra-wide: keep measures under control */
@media (min-width: 1800px) {
  :root { --container: 1560px; }
}

/* ---------------------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .img-mask img { transform: none; }
  .flow__line path { stroke-dashoffset: 0; }
  .hero__poster { animation: none; transform: none; }
}