/* =========================================================================
   Helix Recovery and Longevity
   Visual system: Dark Biohacking Lab
   Red dominant on near-black, cool-cyan used sparingly.
   No em dashes or en dashes anywhere, including these comments.
   ========================================================================= */

:root {
  /* Core palette */
  --bg:        #0E1114;
  --bg-2:      #181C20;
  --bg-3:      #20262C;
  --red:       #DC4A52;
  --red-deep:  #8E2A30;
  --red-glow:  rgba(220, 74, 82, 0.55);
  --cool:      #4FB8D8;
  --text:      #ECEFF2;
  --text-dim:  #9AA3AB;
  --line:      rgba(236, 239, 242, 0.10);
  --line-2:    rgba(236, 239, 242, 0.06);

  /* Type */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* Rhythm */
  --maxw: 1280px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(5rem, 12vh, 10rem);
  --radius: 4px;
  --radius-lg: 10px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  letter-spacing: 0.005em;
  /* clip, never hidden: hidden would break position: sticky (the stacked sheets). */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Atmospheric base: a faint vignette and a low red ember bottom glow */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,0.03), transparent 60%),
    radial-gradient(90% 60% at 50% 120%, rgba(220,74,82,0.06), transparent 60%);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; }

/* ----- Typography helpers ----- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}

.section-title {
  font-size: clamp(1.75rem, 1.2rem + 3vw, 3.4rem);
  text-wrap: balance;
}
p, blockquote { text-wrap: pretty; }
.nb { white-space: nowrap; }
.proto-step__body, .foot-blurb, .contact-lead, .member-lead, .gal-tile figcaption, .tst-card blockquote, .member-points span { text-wrap: balance; }

/* ----- Layout ----- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.section {
  position: relative;
  z-index: 1;
  padding-block: var(--section-y);
  scroll-margin-top: 84px;
}
.section + .section { border-top: 1px solid var(--line-2); }

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-head .section-title { margin-top: 1.1rem; }
.section-head .section-sub { color: var(--text-dim); margin-top: 1rem; max-width: 48ch; text-wrap: balance; }
/* Centered head: title and subtext centered on screen, each on one line where the width allows. */
.section-head--center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.section-head--center .section-sub { max-width: none; }

/* Depth: faint topographic contour arcs from one corner (Helix motif). */
.contour { position: absolute; top: 0; right: 0; width: min(46vw, 620px); height: auto; color: rgba(220, 74, 82, 0.16); pointer-events: none; z-index: 0; }
.section > .wrap { position: relative; z-index: 1; }

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.95em 1.6em;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease), color 0.3s var(--ease);
  will-change: transform;
}
.btn--primary {
  background: var(--red);
  color: #fff;
  box-shadow: 0 0 0 rgba(220,74,82,0);
}
.btn--primary:hover {
  background: #e85a62;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px -8px var(--red-glow);
}
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--red); color: #fff; transform: translateY(-2px); }

.btn__arrow { transition: transform 0.3s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Focus visibility */
:focus-visible { outline: 2px solid var(--cool); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--red); color: #fff; padding: 0.7em 1.2em; border-radius: var(--radius);
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--gutter);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), padding 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(14, 17, 20, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  padding-block: 0.8rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.brand__mark {
  width: 22px; height: 22px;
  color: var(--red);
  flex: none;
}
.brand__sub {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav__links { display: flex; gap: clamp(1rem, 2vw, 1.9rem); }
.nav__links a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  position: relative;
  padding-block: 0.3rem;
  transition: color 0.25s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--red);
  transition: width 0.3s var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { width: 100%; }

.nav__cta { display: inline-flex; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.nav-toggle span {
  display: block; height: 1.5px; width: 18px; margin-inline: auto;
  background: var(--text); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

/* Mobile nav overlay */
.mobile-nav {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(14,17,20,0.97);
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  gap: 0.4rem;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
}
.mobile-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 9vw, 3rem);
  letter-spacing: -0.02em;
  padding-block: 0.35rem;
  color: var(--text);
  border-bottom: 1px solid var(--line-2);
}
.mobile-nav a .idx { font-family: var(--font-mono); font-size: 0.8rem; color: var(--red); margin-right: 0.8rem; vertical-align: middle; }
.mobile-nav .mobile-cta { margin-top: 2rem; }

/* =========================================================================
   HERO (scroll-scrub red-light bloom)
   ========================================================================= */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  z-index: 1;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Slightly cool the dormant frame so the bloom reads as a shift */
  filter: saturate(1.05) contrast(1.04);
}
/* Scrim keeps overlay text readable across the dark to red shift */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(14,17,20,0.92) 0%, rgba(14,17,20,0.35) 38%, rgba(14,17,20,0.10) 60%, rgba(14,17,20,0.55) 100%),
    radial-gradient(120% 90% at 80% 30%, transparent 40%, rgba(14,17,20,0.5) 100%);
}

.hero__content {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: clamp(3rem, 9vh, 7rem);
  padding-inline: var(--gutter);
  max-width: var(--maxw);
  margin-inline: auto;
}
.hero__eyebrow { margin-bottom: 1.3rem; color: var(--text); text-wrap: balance; }
.hero__title {
  font-size: clamp(2.7rem, 1.2rem + 8vw, 7rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.92;
  max-width: none;
  text-shadow: 0 2px 40px rgba(0,0,0,0.4);
}
.hero__sub {
  margin-top: 1.5rem;
  max-width: 46ch;
  color: var(--text);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
  opacity: 0.9;
}
.hero__actions { margin-top: 2.2rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* Scroll hint */
.scroll-hint {
  position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(3rem, 9vh, 7rem);
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-dim);
  writing-mode: vertical-rl;
}
.scroll-hint .bar { width: 1px; height: 48px; background: linear-gradient(var(--red), transparent); }

/* =========================================================================
   GENERIC SECTION SHELLS (fleshed out in the next build pass)
   ========================================================================= */
.shell-min .section-title { margin-top: 1.1rem; }

/* Intro statement. The left column carries the eyebrow and a small
   "protocol inputs" readout so the column is not an empty void beside the
   statement; the readout mirrors the four inputs the statement names. */
.intro { overflow: hidden; }
.intro .statement {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1rem + 2.6vw, 2.75rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  max-width: 24ch;
  text-wrap: pretty;
}
.intro .statement .hl { color: var(--red); white-space: nowrap; }
.intro__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.intro__side { display: flex; flex-direction: column; gap: 2rem; }

.readout {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(24,28,32,0.85), rgba(14,17,20,0.6));
  padding: 1.3rem 1.4rem 0.6rem;
  max-width: 420px;
}
.readout__label {
  display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--red); margin-bottom: 0.4rem;
}
.readout__row {
  display: grid; grid-template-columns: 2rem 4.6rem 1fr; align-items: center; gap: 0.2rem 0.6rem;
  padding: 0.85rem 0; border-top: 1px solid var(--line-2);
}
.readout__row:first-child { border-top: 0; }
.readout__n { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-dim); }
.readout__k { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.readout__v { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--text-dim); text-align: right; }
.readout__bar { grid-column: 2 / -1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.readout__bar i { display: block; height: 100%; width: calc(var(--lv) * 100%); background: linear-gradient(90deg, var(--red-deep), var(--red)); box-shadow: 0 0 10px var(--red-glow); }

@media (min-width: 900px) {
  .intro__grid { grid-template-columns: 0.8fr 1.2fr; align-items: start; gap: clamp(3rem, 6vw, 6rem); }
  .intro .statement { padding-top: 2.4rem; }
}

/* =========================================================================
   SERVICES
   ========================================================================= */
/* Pattern C, Stacked Sheets, in the Helix skin: near-black sheets, a crimson
   lit ring, mono index and tags. Sticky tops step down 14px per sheet so the
   edges of the settled stack read like pages laid on top of each other. */
.services .section-head { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
/* The hold below the stack (10vh) counts as bottom space, so hold + padding = the site's section rhythm. */
.services.section { padding-bottom: max(1rem, calc(var(--section-y) - 10vh)); }
.sheets {
  /* Sticky stop sits well clear of the fixed nav (about 74px tall once scrolled). */
  --sheet-top: 132px;
  --sheet-h: min(520px, calc(100vh - var(--sheet-top) - 110px));
  position: relative;
  /* Hold: after the last sheet lands, the settled stack stays put for this
     much scroll before the section moves on. */
  padding-bottom: 10vh;
}
.sheet {
  position: sticky;
  top: calc(var(--sheet-top) + var(--i) * 14px);
  height: var(--sheet-h);
  min-height: 400px;
  margin-bottom: 7vh;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: 0 -22px 50px -10px rgba(0, 0, 0, 0.6);
  transform-origin: 50% 0;
  will-change: transform;
}
.sheet:last-child { margin-bottom: 0; }
.sheet:nth-child(even) { grid-template-columns: 1fr 1.15fr; }
.sheet:nth-child(even) .sheet__media { order: 2; }
.sheet__media { position: relative; overflow: hidden; }
.sheet__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.95) brightness(0.88); }
.sheet__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 60%, rgba(24,28,32,0.55));
}
.sheet:nth-child(even) .sheet__media::after { background: linear-gradient(270deg, transparent 60%, rgba(24,28,32,0.55)); }
.sheet__txt {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(1.8rem, 3vw, 3rem);
  background: radial-gradient(circle at 50% 28%, rgba(220,74,82,0.12), transparent 62%), var(--bg-2);
}
.sheet__txt::before {
  content: ""; position: absolute; inset: 16px; border: 1px solid rgba(220,74,82,0.13);
  border-radius: 9px; pointer-events: none;
}
.sheet__ico {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--red);
  border: 1px solid rgba(220,74,82,0.5);
  box-shadow: 0 0 30px -4px var(--red-glow), inset 0 0 18px -6px var(--red-glow);
  margin-bottom: 1.3rem;
}
.sheet__ico svg { width: 26px; height: 26px; }
.sheet__idx { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.24em; color: var(--text-dim); margin-bottom: 0.7rem; }
.sheet__name { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); text-wrap: balance; }
.sheet__blurb { color: var(--text-dim); margin-top: 0.9rem; max-width: 36ch; text-wrap: balance; }
.sheet__tag {
  margin-top: 1.4rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--red);
}
@media (max-width: 820px) {
  .sheets { --sheet-top: 100px; --sheet-h: min(560px, calc(100svh - var(--sheet-top) - 40px)); padding-bottom: 8vh; }
  .services.section { padding-bottom: max(1rem, calc(var(--section-y) - 8vh)); }
  .sheet { top: calc(var(--sheet-top) + var(--i) * 8px); grid-template-columns: 1fr; grid-template-rows: 38% 1fr; min-height: 480px; }
  .sheet:nth-child(even) { grid-template-columns: 1fr; }
  .sheet:nth-child(even) .sheet__media { order: 0; }
  .sheet__media::after, .sheet:nth-child(even) .sheet__media::after { background: linear-gradient(180deg, transparent 55%, rgba(24,28,32,0.7)); }
  .sheet__txt { padding: 1.4rem 1.4rem 1.6rem; }
  .sheet__txt::before { inset: 10px; }
  .sheet__ico { width: 50px; height: 50px; margin-bottom: 0.9rem; }
  .sheet__tag { margin-top: 1rem; }
}

/* =========================================================================
   PROTOCOL
   ========================================================================= */
/* Title row spans the grid; the image sits in the second row beside the
   lead and steps, and stretches to exactly their height. */
.proto-grid { display: grid; grid-template-columns: 1fr; gap: 0 clamp(2.5rem, 6vw, 5rem); }
.proto-head { margin-bottom: 1.6rem; }
.proto-head .section-title { margin-top: 1.1rem; }
.proto-lead { color: var(--text-dim); max-width: 46ch; margin-bottom: 2.5rem; }
.proto-copy { padding-bottom: 0.2rem; }
.proto-steps { display: grid; gap: 1.6rem; }
.proto-step { display: flex; gap: 1.2rem; align-items: flex-start; }
.proto-step__n {
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--red);
  border: 1px solid rgba(220,74,82,0.4); border-radius: 50%;
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center; flex: none;
}
.proto-step__title { font-size: 1.15rem; margin-bottom: 0.3rem; }
.proto-step__body { color: var(--text-dim); font-size: 0.95rem; }

.proto-media { position: relative; margin-top: 2.5rem; margin-bottom: 1.5rem; }
.proto-media__main {
  width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--line);
  aspect-ratio: 5 / 4; object-fit: cover;
}
.proto-media__accent {
  position: absolute; bottom: -1.5rem; left: -1.5rem;
  width: 42%; max-width: 200px; border-radius: var(--radius);
  border: 1px solid rgba(220,74,82,0.4);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.7);
  aspect-ratio: 1 / 1; object-fit: cover;
}
.proto-media__glow {
  position: absolute; inset: -10% 30% 40% -10%; z-index: -1;
  background: radial-gradient(circle, var(--red-glow), transparent 70%);
  filter: blur(40px); opacity: 0.5;
}
@media (min-width: 900px) {
  .proto-grid { grid-template-columns: 0.85fr 1.15fr; }
  .proto-head { grid-column: 1 / -1; }
  .proto-copy { grid-column: 1; grid-row: 2; }
  .proto-media { grid-column: 2; grid-row: 2; margin: 0; align-self: stretch; min-height: 0; }
  .proto-media__main { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}

/* =========================================================================
   WHY HELIX
   ========================================================================= */
.why-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.why-card {
  position: relative;
  background: var(--bg);
  padding: clamp(2rem, 3vw, 2.8rem) clamp(1.4rem, 2.2vw, 2rem);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: background 0.4s var(--ease);
}
.why-card:hover { background: var(--bg-2); }
/* Red accent bar that scales in from the left on hover. */
.why-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.why-card:hover::before { transform: scaleX(1); }

/* Icon in a lit double ring, centered at the top of the card. */
.why-card__icon {
  position: relative;
  display: grid; place-items: center;
  width: 4.2rem; height: 4.2rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220,74,82,0.14), rgba(24,28,32,0.9) 70%);
  border: 1px solid rgba(220,74,82,0.35);
  color: var(--red);
  margin-bottom: 1.5rem;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease);
}
.why-card__icon::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px dashed rgba(236,239,242,0.12); }
.why-card__icon svg { width: 30px; height: 30px; }
.why-card:hover .why-card__icon {
  color: var(--red);
  border-color: rgba(220, 74, 82, 0.5);
  box-shadow: 0 0 24px -6px var(--red-glow);
}
.why-card__n {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.22em;
  color: var(--red); display: block; margin-bottom: 0.6rem;
}
.why-card__title { font-size: 1.25rem; margin-bottom: 0.7rem; }
.why-card__body { color: var(--text-dim); font-size: 0.95rem; max-width: 28ch; text-wrap: balance; }
@media (min-width: 640px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .why-grid { grid-template-columns: repeat(4, 1fr); } }

/* =========================================================================
   MEMBERSHIP (image band)
   ========================================================================= */
.membership { padding: 0; border-top: none; }
.member-band {
  position: relative;
  background-size: cover; background-position: center;
  padding-block: var(--section-y);
}
.member-band__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(14,17,20,0.95) 0%, rgba(14,17,20,0.82) 45%, rgba(14,17,20,0.55) 100%),
    radial-gradient(80% 120% at 0% 50%, rgba(220,74,82,0.16), transparent 60%);
}
/* Wide layout: title across the top, copy on the left, the included list
   in a glass panel on the right. */
.member-inner { position: relative; display: grid; grid-template-columns: 1fr; gap: 2rem; }
.member-inner .section-title { margin-top: 1.1rem; }
.member-lead { color: var(--text); opacity: 0.9; max-width: 54ch; }
.member-lead--2 { color: var(--text-dim); opacity: 1; margin-top: 1.2rem; }
.member-copy .btn { margin-top: 2.2rem; }
.member-panel {
  background: rgba(24, 28, 32, 0.5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(236,239,242,0.12);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  align-self: start;
}
.member-panel__label {
  display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--red); margin-bottom: 1.2rem;
}
.member-points { display: grid; gap: 0; }
.member-points li { display: flex; gap: 0.9rem; align-items: center; padding: 0.9rem 0; border-top: 1px solid var(--line-2); }
.member-points li:first-child { border-top: 0; padding-top: 0; }
.member-points li:last-child { padding-bottom: 0; }
.member-points .ic-check {
  color: var(--red); flex: none;
  background: rgba(220,74,82,0.12); border-radius: 50%; padding: 0.45rem; width: 1.9rem; height: 1.9rem;
}
@media (min-width: 900px) {
  .member-inner { grid-template-columns: 1.1fr 0.9fr; gap: 2.4rem clamp(3rem, 6vw, 6rem); align-items: stretch; }
  .member-head { grid-column: 1 / -1; }
  /* Copy column and inclusions card share one height; the button sits on the
     column floor so its bottom edge lines up with the card's bottom edge. */
  .member-copy { display: flex; flex-direction: column; align-items: flex-start; }
  .member-lead { font-size: 1.125rem; line-height: 1.75; }
  .member-lead--2 { margin-top: 1.5rem; }
  .member-copy .btn { margin-top: auto; }
  .member-lead--2 { margin-bottom: 2.4rem; }
  .member-panel { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .member-points li { padding-block: 0.8rem; }
}

/* =========================================================================
   GALLERY
   ========================================================================= */
/* Every tile is forced to 16:9 so the source images never crop. On mobile the
   tiles stack one per row; on wider screens each row pairs a big tile with a
   vertical stack of two small tiles, alternating sides for an editorial bento. */
.gal-grid { display: flex; flex-direction: column; gap: 0.9rem; }
.gal-row { display: flex; flex-direction: column; gap: 0.9rem; }
.gal-stack { display: flex; flex-direction: column; gap: 0.9rem; }

.gal-tile {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
}
.gal-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
  filter: saturate(0.95) brightness(0.82);
}
.gal-tile:hover img { transform: scale(1.06); filter: saturate(1.1) brightness(1); }
.gal-tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1rem 0.9rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
  color: var(--text);
  background: linear-gradient(to top, rgba(14,17,20,0.9), transparent);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.gal-tile:hover figcaption { opacity: 1; transform: none; }

@media (min-width: 760px) {
  .gal-row { flex-direction: row; align-items: stretch; }
  .gal-row--rev { flex-direction: row; }
  /* Big tile takes two thirds and keeps 16:9, which sets the row height.
     The stack of two smalls takes one third and stretches to match; each small
     fills half the stack, landing at ~16:9 (a 2x-width 16:9 tile equals two
     stacked 16:9 tiles in height). */
  .gal-row .gal-tile--big { flex: 2 1 0; }
  .gal-row .gal-stack { flex: 1 1 0; }
  .gal-stack .gal-tile--sm { flex: 1 1 0; aspect-ratio: auto; min-height: 0; }
}

/* =========================================================================
   TESTIMONIALS
   ========================================================================= */
.testimonials { overflow: hidden; }
.testimonials .contour { top: auto; bottom: 0; right: auto; left: 0; transform: scale(-1, -1); }
.tst-watermark { position: absolute; bottom: -6%; right: -6vw; width: min(34vw, 440px); opacity: 0.035; pointer-events: none; z-index: 0; }
.tst-watermark .brand__mark { width: 100%; height: auto; }
.tst-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.tst-card {
  position: relative;
  background: linear-gradient(180deg, rgba(32,38,44,0.92), rgba(24,28,32,0.92));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 2rem 1.9rem;
  display: flex; flex-direction: column; gap: 1.1rem;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7);
  overflow: hidden;
}
.tst-card::before {
  content: ""; position: absolute; top: -40%; right: -30%; width: 80%; height: 80%;
  background: radial-gradient(circle, rgba(220,74,82,0.10), transparent 65%); pointer-events: none;
}
.tst-card__top { display: flex; align-items: center; justify-content: space-between; }
.tst-card .ic-quote { color: var(--red); opacity: 0.7; }
/* A small five-bar level, the site's data motif. */
.tst-pulse { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.tst-pulse i { width: 3px; background: var(--red); opacity: 0.55; border-radius: 1px; }
.tst-pulse i:nth-child(1) { height: 30%; } .tst-pulse i:nth-child(2) { height: 55%; }
.tst-pulse i:nth-child(3) { height: 80%; } .tst-pulse i:nth-child(4) { height: 100%; }
.tst-pulse i:nth-child(5) { height: 70%; }
.tst-card blockquote { font-size: 1.02rem; line-height: 1.62; flex: 1; position: relative; }
.tst-card figcaption { display: flex; flex-direction: column; gap: 0.15rem; padding-top: 0.9rem; border-top: 1px solid var(--line-2); position: relative; }
.tst-name { font-family: var(--font-display); font-weight: 700; }
.tst-role { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--text-dim); }
@media (min-width: 820px) { .tst-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .tst-card { padding: 1.7rem 1.4rem; } .tst-card blockquote { font-size: 0.98rem; } }

/* =========================================================================
   CONTACT
   ========================================================================= */
/* Full-bleed image band behind the whole section. Copy runs down the left, so
   the scrim stays near opaque there and opens toward the right where the only
   thing over the image is the opaque form card. The red bloom is layered on top
   of the scrim (first in the stack) and sits upper right, mirroring the
   membership band's left-side bloom so the two image moments read as a pair
   rather than a repeat. */
.contact { overflow: hidden; padding-block: var(--section-y); }
.contact-bg {
  position: absolute; inset: 0;
  background-color: var(--bg);
  background-size: cover; background-position: center;
}
.contact-bg__overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(62% 95% at 100% 8%, rgba(220,74,82,0.18), transparent 58%),
    linear-gradient(100deg, rgba(14,17,20,0.98) 0%, rgba(14,17,20,0.9) 46%, rgba(14,17,20,0.55) 100%);
}

.contact-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 5rem); }
.contact-copy .section-title { margin-block: 1.1rem 1.3rem; }
.contact-lead { color: var(--text-dim); max-width: 42ch; margin-bottom: 2.2rem; }
.contact-details { display: grid; gap: 1.1rem; }
.contact-details li { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; align-items: baseline; }
.contact-details .lbl {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--red);
}
.contact-details a { border-bottom: 1px solid var(--line); }
.contact-details a:hover { color: var(--red); border-color: var(--red); }

/* Glass card: translucent, blurred backdrop, subtle border and top sheen. */
.contact-form {
  position: relative;
  background: linear-gradient(160deg, rgba(36,42,48,0.55), rgba(18,21,24,0.42));
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(236,239,242,0.14);
  border-radius: 14px; padding: clamp(1.6rem, 3vw, 2.4rem);
  display: grid; gap: 1.1rem;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
}
.field { display: grid; gap: 0.5rem; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
.field label {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-dim);
}
.field input, .field select, .field textarea {
  background: rgba(14,17,20,0.55); color: var(--text);
  border: 1px solid rgba(236,239,242,0.12); border-radius: var(--radius);
  padding: 0.85em 0.95em; font: inherit; width: 100%;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(220,74,82,0.16);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(154,163,171,0.6); }
.contact-submit { justify-self: start; margin-top: 0.4rem; }
.contact-note { color: var(--cool); font-size: 0.85rem; min-height: 1px; opacity: 0; transition: opacity 0.3s var(--ease); }
.contact-note.is-shown { opacity: 1; }

@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
@media (min-width: 1100px) { .contact-copy .section-title { font-size: clamp(2.4rem, 1.2rem + 2vw, 2.9rem); white-space: nowrap; } }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
  position: relative;
  z-index: 1;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding-top: clamp(3.5rem, 7vw, 6rem);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.foot-brand .brand { font-size: 1.3rem; margin-bottom: 1.1rem; }
.foot-brand .brand__mark { width: 24px; height: 24px; }
.foot-blurb { color: var(--text-dim); max-width: 38ch; }
.foot-nap { color: var(--text-dim); font-size: 0.9rem; margin-top: 1.3rem; line-height: 1.8; }
.foot-nap a { color: var(--text); border-bottom: 1px solid var(--line); }
.foot-nap a:hover { color: var(--red); border-color: var(--red); }

.foot-nav { display: flex; gap: clamp(2rem, 6vw, 5rem); }
.foot-col h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 1.1rem;
}
.foot-col ul { display: grid; gap: 0.7rem; }
.foot-col a { color: var(--text); transition: color 0.25s var(--ease); }
.foot-col a:hover { color: var(--red); }

.foot-bottom {
  border-top: 1px solid var(--line-2);
  padding-block: 1.6rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem;
}
/* Bottom row: fiction line left, "Built by Summit Oak AI" + mark right. Each stays on one line. */
.foot-fiction, .foot-credit { white-space: nowrap; color: var(--text-dim); font-size: clamp(0.7rem, 0.62rem + 0.25vw, 0.78rem); font-family: var(--font-mono); letter-spacing: 0.03em; }
.foot-credit { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: color 0.2s ease; }
.foot-credit:hover { color: var(--text); }
@media (max-width: 640px) {
  .foot-bottom { flex-direction: column; justify-content: center; text-align: center; gap: 0.7rem; padding-block: 1.6rem 1.8rem; }
  .foot-fiction, .foot-credit { font-family: var(--font-body); font-size: 0.76rem; letter-spacing: 0; }
}
.foot-credit .soak-mark { display: inline-block; width: 20px; height: 20px; flex: none; background-color: var(--red); -webkit-mask: url(../assets/images/summitoak-mark.png) center / contain no-repeat; mask: url(../assets/images/summitoak-mark.png) center / contain no-repeat; opacity: 0.9; transition: opacity 0.2s ease; }
.foot-credit:hover .soak-mark { opacity: 1; }
.foot-credit:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }

@media (min-width: 820px) {
  .foot-grid { grid-template-columns: 1.4fr 1fr; align-items: start; }
}

/* =========================================================================
   MOTION SAFETY
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================================
   RESPONSIVE: header
   ========================================================================= */
@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav-toggle { display: flex; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* Reveal primitive used by main.js (GSAP toggles these where supported) */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* Mobile reframe: reveal more of the right so the two red-light pads center. */
@media (max-width: 768px) {
  .hero__video { object-position: 70% 50%; }
}