/* ========== NexGen — home page ========== */
/* Brand colors & type from Business Info.md → "10. TONE & DESIGN" */
:root {
  --teal: #01A29E;                 /* primary — CTA buttons */
  --blue: #399CE8;                 /* secondary / accent — links, icons, highlights */
  --grad: linear-gradient(90deg, #01A29E 0%, #399CE8 100%);
  --nav-ink: #fff;                 /* text on the dark glass nav */
  --shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --f-display: "Montserrat", sans-serif;  /* Light/Thin — large headings */
  --f-body: "Montserrat", sans-serif;     /* Regular — body */
  --f-mono: "Montserrat", sans-serif;     /* Bold, wide-tracked caps — eyebrows/labels */
  --head-gap: 48px;
}

/* Section tones: black sections alternating with white sections for readability. */
:root, [data-tone="dark"] {
  --bg: #000; --card: #0e0f10; --panel: #17191a;
  --ink: #fff; --grey: #9ca3af; --line: #2a2d30;
  color-scheme: dark;
}
[data-tone="light"] {
  --bg: #fff; --card: #fff; --panel: #f3f6f6;
  --ink: #000; --grey: #6b7280; --line: #e5e7eb;
  color-scheme: light;
}
[data-tone] { color: var(--ink); }
section[data-tone], footer[data-tone] { background-color: var(--bg); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* never allow sideways scrolling (e.g. while boxes turn in from the side on phones);
   `clip` on body keeps position: sticky working */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
ul { list-style: none; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; }

/* ---------- type ---------- */
.mono, .pill, .btn, .btn-apply, .link-underline, .link-green, .scroll-hint {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
}
.green { color: var(--blue) !important; }

.h-display {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 52px;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--ink);
}
.lead {
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 0;
  color: var(--grey);
}
.card-title {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--ink);
}
.card-desc {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--grey);
}

/* ---------- pills / buttons ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 99px;
  box-shadow: var(--shadow);
  color: var(--ink);
  white-space: nowrap;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--grad); flex: none; }
.pill-dark { border-color: rgba(255, 255, 255, 0.25); color: #fff; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border-radius: 100px;
  white-space: nowrap;
  transition: background-color .3s, transform .3s var(--ease);
}

/* ---------- CTA buttons: dimensional teal → blue ---------- */
.btn-navy, .btn-apply {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background-color: var(--teal);
  background-image: linear-gradient(120deg, #01A29E 0%, #0AB3AD 38%, #2FA3E0 72%, #399CE8 100%);
  background-size: 180% 100%;
  background-position: 0% 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),      /* top highlight */
    inset 0 -2px 0 rgba(0, 0, 0, .12),           /* bottom edge */
    0 1px 2px rgba(0, 0, 0, .25),
    0 10px 24px -10px rgba(1, 162, 158, .75);    /* teal glow */
  transition:
    transform .35s var(--ease),
    box-shadow .35s var(--ease),
    background-position .6s var(--ease);
}
/* glossy top half */
.btn-navy::before, .btn-apply::before {
  content: "";
  position: absolute; inset: 0 0 50% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0));
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}
/* light sheen that sweeps across on hover */
.btn-navy::after, .btn-apply::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent);
  transform: skewX(-20deg) translateX(0);
  pointer-events: none;
  transition: transform .8s var(--ease);
}
.btn-navy:hover, .btn-apply:hover {
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    inset 0 -2px 0 rgba(0, 0, 0, .12),
    0 2px 4px rgba(0, 0, 0, .25),
    0 16px 32px -12px rgba(57, 156, 232, .8);
}
.btn-navy:hover::after, .btn-apply:hover::after { transform: skewX(-20deg) translateX(420%); }
.btn-navy:active, .btn-apply:active {
  transform: translateY(0) scale(.98);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .18),
    0 1px 2px rgba(0, 0, 0, .25),
    0 6px 14px -8px rgba(1, 162, 158, .7);
}
.btn-navy:focus-visible, .btn-apply:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.btn-block { display: flex; width: 100%; padding-left: 12px; padding-right: 12px; }

.link-underline {
  color: #fff;
  padding-bottom: 3px;
  border-bottom: 1px solid #fff;
}
.link-green {
  color: var(--blue);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--blue);
}

.arrow-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  transition: background-color .3s, border-color .3s;
  background: var(--card);
}
.arrow-btn svg { width: 12px; height: 12px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }

/* ---------- NAV ---------- */
.nav-wrap {
  position: fixed;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: max-content;
}
.nav {
  height: 61px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 500px;
  background: rgba(10, 12, 13, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  animation: navBreath 5.5s ease-in-out infinite;
}
.nav > a, .nav > div, .nav > button { position: relative; z-index: 2; }

/* ---- Living capsule: orbiting light + drifting cells (echoes the hero video) ---- */
@property --nav-angle { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
/* bio-scanner light travelling around the capsule edge */
.nav::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--nav-angle),
    transparent 0deg, transparent 200deg,
    rgba(1, 162, 158, .15) 250deg, #01A29E 300deg, #399CE8 335deg, rgba(57, 156, 232, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: navOrbit 7s linear infinite;
  pointer-events: none;
  z-index: 1;
}
/* faint moving sheen across the glass, like light passing through a cell membrane */
.nav::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(120px 60px at var(--sheen-x, 20%) 50%, rgba(1, 162, 158, .16), transparent 70%);
  animation: navSheen 11s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@property --sheen-x { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
.nav-cells { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.nav-cells i {
  position: absolute; top: 50%;
  width: var(--s); height: var(--s);
  margin-top: calc(var(--s) / -2);
  border-radius: 50%;
  left: var(--x);
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .22), rgba(120, 225, 220, .05) 45%, rgba(57, 156, 232, .14) 70%, rgba(255, 255, 255, .28) 100%);
  box-shadow: inset 0 0 4px rgba(255, 255, 255, .18);
  opacity: 0;
  animation: navCell var(--d) ease-in-out var(--delay) infinite;
}
.nav-cells i:nth-child(1) { --s: 22px; --x: 18%; --d: 13s; --delay: 0s; }
.nav-cells i:nth-child(2) { --s: 10px; --x: 34%; --d: 9s;  --delay: -3s; }
.nav-cells i:nth-child(3) { --s: 30px; --x: 52%; --d: 16s; --delay: -7s; }
.nav-cells i:nth-child(4) { --s: 14px; --x: 70%; --d: 11s; --delay: -2s; }
.nav-cells i:nth-child(5) { --s: 8px;  --x: 86%; --d: 8s;  --delay: -5s; }
.nav-cells i:nth-child(6) { --s: 18px; --x: 6%;  --d: 12s; --delay: -9s; }
@keyframes navOrbit { to { --nav-angle: 360deg; } }
@keyframes navSheen { from { --sheen-x: 8%; } to { --sheen-x: 92%; } }
@keyframes navCell {
  0%   { opacity: 0;   transform: translate(0, 18px) scale(.7); }
  25%  { opacity: .55; }
  50%  { opacity: .45; transform: translate(26px, -2px) scale(1); }
  75%  { opacity: .5; }
  100% { opacity: 0;   transform: translate(48px, -20px) scale(.85); }
}
@keyframes navBreath {
  0%, 100% { box-shadow: 0 8px 20px rgba(0, 0, 0, .25), 0 0 0 rgba(1, 162, 158, 0); }
  50%      { box-shadow: 0 8px 20px rgba(0, 0, 0, .25), 0 0 26px rgba(1, 162, 158, .22); }
}
.nav-logo { display: flex; align-items: center; height: 61px; padding: 0 6px 0 14px; flex: none; }
.nav-logo img { display: block; height: 46px; width: auto; }
.nav-links {
  display: flex; align-items: center; gap: 16px;
  margin-left: 40px;
  font-size: 16px; line-height: 25.6px; letter-spacing: 0;
  color: var(--nav-ink);
}
.nav-links a { white-space: nowrap; }
.nav-links a[aria-current="page"]:not(.btn-apply) { box-shadow: inset 0 -1px 0 var(--blue); }
.nav-links .btn-apply { margin-left: 8px; }
.btn-apply {
  padding: 12px 20px; border-radius: 500px;
  line-height: 19.6px;
}
.nav-burger, .nav-menu { display: none; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  z-index: 2;
  height: 100vh;
  background: #050505;
  overflow: hidden;
  padding: 0 60px;
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
  position: absolute; inset: 0;
  background: rgb(18, 18, 18);
  opacity: .5;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 32px;
  text-align: center;
  padding: 0 20px;
  z-index: 2;
}
.hero-title {
  font-family: var(--f-display);
  font-weight: 200;
  font-size: 80px;
  line-height: 1;
  letter-spacing: -1px;
  color: #fff;
}
.hero-sub {
  max-width: 600px;
  font-size: 18px; line-height: 27px; letter-spacing: 0;
  color: var(--grey);
}
.hero-ctas { display: flex; align-items: center; gap: 32px; }
.partners {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 68px;
  padding: 0 60px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 2;
}
.partners-label { font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.partners-logos { display: flex; gap: 40px; }
.partners-logos span {
  font-family: var(--f-display); font-weight: 600;
  font-size: 14px; line-height: 18px; letter-spacing: .18em;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

/* hero load animation (matches Framer appear config) */
.appear { opacity: 0; animation: appearUp 1.2s var(--ease) forwards; }
.a1 { --y: 40px; animation-delay: 0s; }
.a2 { --y: 40px; animation-delay: .15s; }
.a3 { --y: 24px; animation-delay: .35s; }
.a4 { --y: 24px; animation-delay: .55s; }
.a5 { --y: 16px; animation-delay: .75s; }
@keyframes appearUp {
  from { opacity: 0; transform: translateY(var(--y)); }
  to   { opacity: 1; transform: none; }
}

/* ---------- THESIS / CURTAIN REVEAL ---------- */
.thesis {
  /* sizes scale with the viewport like the original (120vh / 80vh / 50vh) */
  --frame: 80vh;
  --curtain: 50vh;
  position: relative;
  z-index: 1;
  height: 120vh;
  background: var(--bg);
}
.thesis-sticky {
  position: sticky; top: 0;
  height: var(--frame);
  overflow: hidden; /* clip the curtains + text to the image frame, like the original */
}
.thesis-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thesis-move { will-change: transform; }
.curtain {
  position: absolute; left: 0; right: 0;
  height: var(--curtain);
  background: var(--bg);
  will-change: transform;
}
.curtain-top { top: calc(50% - var(--curtain)); }
.curtain-bottom { top: 50%; }
.thesis-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  padding: 0 20px 8px;
}
.thesis-h { max-width: 900px; text-align: center; }
.thesis-clip-pill { overflow: hidden; display: flex; }
/* Stationary clip box: as the text slides up it disappears at this edge (as in the original) */
.thesis-clip {
  width: 100%;
  display: flex; justify-content: center;
  overflow: hidden;
  padding: 51px 0 9px;
  margin: -51px 0 -9px;
}

/* ---------- SECTIONS ---------- */
.sec { padding: 120px 40px; }
.sec-cream, .sec-grey, .sec-white { background: var(--bg); }
.sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: var(--head-gap); }
.sec-head-row { flex-direction: row; justify-content: space-between; align-items: flex-end; }
.sec-head-row > div { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.sec-head-row .link-green { margin-bottom: 4px; }

.card {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 19px;
}
a.card { transition: transform .5s var(--ease); }
a.card:hover { transform: scale(1.02); }
a.card:hover .arrow-btn { background: var(--teal); border-color: var(--teal); }
a.card:hover .arrow-btn svg { stroke: #fff; }

/* How it works */
.how { display: flex; justify-content: space-between; align-items: flex-start; }
.how-left {
  position: sticky; top: 100px;
  width: 480px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.how-right { width: 640px; display: flex; flex-direction: column; gap: 24px; }
.step .mono { display: block; margin-bottom: 16px; }
.step .card-title { margin-bottom: 16px; }

/* Treatments */
.treat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.tcard { border-radius: 16px; display: flex; flex-direction: column; }
.tcard.big { grid-column: span 2; }
.tcard-img { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.tcard-img img { width: 100%; height: 100%; object-fit: cover; }
.tcard .card-title { margin-bottom: 10px; }
.tcard .arrow-btn { align-self: flex-end; margin-top: 14px; }

/* Products */
.prod-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pcard-img { aspect-ratio: 1; background: var(--panel); border-radius: 8px; padding: 20px; margin-bottom: 16px; }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.pcard-row { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }

/* Sanctuary */
.scroll-hint { font-size: 12px; color: var(--grey); text-align: right; margin: 0 0 9px; }
.sanct-track {
  display: flex; gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  cursor: grab;
}
.sanct-track::-webkit-scrollbar { display: none; }
.sanct-track.dragging { cursor: grabbing; scroll-behavior: auto; }
.scard {
  position: relative; flex: none;
  width: 600px; height: 640px;
  border-radius: 12px; overflow: hidden;
  background: var(--card);
}
.scard img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); pointer-events: none; }
.scard:hover img { transform: scale(1.04); }
.scard-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .2); }
.scard-txt { position: absolute; left: 20px; bottom: 39px; }
.scard .card-title { color: #fff; margin-bottom: 8px; }
.scard .card-desc { color: rgba(255, 255, 255, .72); }

/* Medical board */
.board-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }
.dcard { display: flex; flex-direction: column; }
.dcard-img { aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; margin-bottom: 20px; }
.dcard-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .92; }
.dcard .card-title { margin-bottom: 8px; }
.dcard .card-desc + .card-desc { margin-top: 8px; }
.dcard .arrow-btn { align-self: flex-end; margin-top: 12px; }

/* Membership */
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.price { border-radius: 16px; }
.price-amt {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 40px; line-height: 1.1; letter-spacing: -0.8px;
  color: var(--ink);
  margin: 16px 0;
}
.price-amt.sm { font-size: 30px; letter-spacing: -0.6px; }
.checks { margin: 32px 0; display: flex; flex-direction: column; gap: 16px; }
.checks li {
  position: relative; padding-left: 28px;
  font-size: 16px; line-height: 1.6; letter-spacing: 0; color: var(--ink);
}
.checks li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px;
  background: var(--teal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* gradient outline for the recommended plan */
.featured {
  border: 2px solid transparent; padding: 18px;
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box;
}
.featured .checks { margin: 24px 0; }
.badge {
  display: inline-block;
  background: var(--grad); color: #fff;
  padding: 6px 14px; border-radius: 100px;
  font-size: 16px; line-height: 25.6px; letter-spacing: 0;
  margin-bottom: 25px;
}

/* ---------- FOOTER ---------- */
.footer { background: var(--bg); border-top: 1px solid var(--line); padding: 120px 40px 40px; }

.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 0; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; }
.foot-col h4 { color: var(--ink); margin-bottom: 19px; }
.foot-col a {
  font-size: 16px; line-height: 20px; letter-spacing: 0;
  color: var(--grey); margin-bottom: 21.5px;
  transition: color .25s;
}
.foot-col a:hover, .contact a:hover { color: var(--blue); }
.cookie-link { letter-spacing: 0 !important; }

.foot-mid { margin-top: 90px; }
.contact { padding-top: 9px; }
.contact p { display: flex; align-items: baseline; gap: 6px; margin-bottom: 16px; font-size: 16px; letter-spacing: 0; }
.contact p .mono { color: var(--ink); }
.contact a { color: var(--grey); transition: color .25s; }
.socials { display: flex; gap: 14px; margin-top: 31px; }
.socials a {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: background-color .25s, color .25s;
}
.socials a:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.socials svg { width: 18px; height: 18px; }

.disclaimer { margin-top: 110px; border-top: 1px solid var(--line); padding: 40px 0; }
.disclaimer p { font-size: 12px; line-height: 20.4px; color: var(--grey); margin-bottom: 20px; }
.disclaimer p:last-child { margin-bottom: 0; }
.disclaimer p:nth-last-child(2) { margin-bottom: 0; }
.disclaimer .copy-bold { margin-top: 0; font-weight: 600; color: var(--ink); line-height: 15px; }

.foot-bottom {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 40px;
  display: flex; justify-content: space-between; align-items: flex-end;
}
.foot-legal { display: flex; gap: 12px; color: var(--grey); padding-bottom: 0; }
.wordmark { height: 144px; opacity: .1; }
.wordmark img { display: block; height: 100%; width: auto; }

/* ---------- scroll reveals ---------- */
.split-words .w { display: inline-block; opacity: 0; transform: translateY(10px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.split-words.in .w { opacity: 1; transform: none; }
.reveal-sub { opacity: 0; transform: translateY(4px); transition: opacity 1s var(--ease-out) .4s, transform 1s var(--ease-out) .4s; }
.reveal-sub.in { opacity: 1; transform: none; }

/* ================= TABLET (810–1199) ================= */
.tablet-only { display: none !important; }
@media (max-width: 1199.98px) {
  .tablet-only { display: block !important; }
  .mono, .pill, .btn, .btn-apply, .link-underline, .link-green, .partners-label { font-size: 11px; }
  .h-display { font-size: 34px; letter-spacing: 0; }
  .lead { font-size: 16px; line-height: 24px; letter-spacing: 0; }
  .card-title { font-size: 24px; letter-spacing: 0; }
  .card-desc { font-size: 14px; line-height: 22.4px; letter-spacing: 0; }

  /* nav */
  .nav-wrap { max-width: calc(100% - 40px); }
  .nav-links { font-size: 14px; line-height: 22px; }
  .btn-apply { padding: 12px 20px; line-height: 16.8px; }

  /* hero */
  .hero { padding: 0 40px; }
  .hero-title { font-size: 56px; letter-spacing: 0; }
  .hero-sub { font-size: 16px; line-height: 24px; letter-spacing: 0; }
  .partners { height: auto; padding: 20px 40px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .partners-logos { gap: 28px; }

  /* thesis */
  .thesis-h { max-width: 820px; }

  /* sections */
  .sec { padding: 80px 32px; }
  .how { gap: 48px; }
  .how-left { width: auto; flex: 0 1 384px; }
  .how-right { width: auto; flex: 0 1 528px; }
  .treat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .pcard-row { margin-top: 16px; min-height: 36px; }
  .scard { width: 400px; height: 400px; }
  .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .dcard-img { border-radius: 4px; }
  .price-grid { gap: 24px; }
  .checks li { font-size: 14px; line-height: 22.4px; letter-spacing: 0; }
  .checks li::before { top: 3px; }

  /* footer */
  .foot-cols { margin-top: 0; }
  .foot-col h4 { margin-bottom: 19px; }
  .foot-col a { font-size: 14px; line-height: 17px; margin-bottom: 21.5px; letter-spacing: 0; }
  .foot-mid { display: flex; flex-direction: column; margin-top: 90px; gap: 48px; }
  .contact { order: -1; padding-top: 0; }
  .contact p { font-size: 14px; margin-bottom: 15px; }
  .socials { margin-top: 31px; }
  .disclaimer { margin-top: 90px; }
  .foot-legal { flex-direction: column; gap: 12px; width: 50%; }
  .foot-legal span { font-size: 11px; }
  .wordmark { height: 136px; }
}

/* ================= MOBILE (<810) ================= */
@media (max-width: 809.98px) {
  :root { --head-gap: 32px; }
  .br-d { display: none; }
  .mono, .pill, .btn, .btn-apply, .link-underline, .link-green { font-size: 11px; }
  .pill { padding: 7px 15px; }
  .h-display { font-size: 27px; letter-spacing: -0.5px; }
  .lead { font-size: 16px; line-height: 24px; letter-spacing: 0; }
  .card-title { font-size: 22px; letter-spacing: 0; }
  .card-desc { font-size: 14px; letter-spacing: 0; }

  /* nav */
  .nav-wrap { top: 12px; width: calc(100% - 40px); pointer-events: none; } /* closed menu must not block taps below */
  .nav-wrap .nav { pointer-events: auto; }
  .nav { height: 58px; padding: 0 10px 0 6px; gap: 0; }
  .nav-logo { height: 56px; padding: 0 4px 0 12px; }
  .nav-logo img { height: 40px; }
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; color: var(--nav-ink); margin-left: auto; }
  .nav-menu {
    display: flex; flex-direction: column; gap: 4px;
    margin-top: 8px; padding: 12px;
    border-radius: 20px;
    background: rgba(10, 12, 13, .92);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
    opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity .3s, transform .3s var(--ease);
  }
  .nav-menu a { padding: 10px 12px; color: var(--nav-ink); font-size: 16px; }
  .nav-menu .btn-apply { text-align: center; margin-top: 4px; font-size: 11px; color: #fff; }
  .nav-wrap.open .nav-menu { opacity: 1; transform: none; pointer-events: auto; }

  /* hero */
  .hero { padding: 0 20px; }
  .hero-content { gap: 24px; padding: 0 20px; }
  .hero-title { font-size: 40px; letter-spacing: -1px; }
  .hero-sub { font-size: 16px; line-height: 24px; letter-spacing: 0; }
  .hero-ctas { flex-direction: column; gap: 20px; }
  .hero-ctas .btn { padding: 16px 32px; }
  .partners { height: auto; padding: 22px 20px 19px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .partners-label { font-size: 11px; }
  .partners-logos { display: grid; grid-template-columns: auto auto; column-gap: 12px; row-gap: 13px; }
  .partners-logos span { font-size: 11px; line-height: 14.4px; letter-spacing: .14em; }

  /* thesis */
  .thesis { --frame: 70vh; --curtain: 50vh; height: 110vh; }
  .thesis-text { align-items: flex-start; padding: 0 24px 20px; }
  .thesis-h { text-align: left; }

  /* sections */
  .sec { padding: 64px 20px; }
  .how { flex-direction: column; gap: 40px; }
  .how-left, .how-right { width: 100%; flex: none; position: static; }
  .treat-grid, .prod-grid, .board-grid, .price-grid { grid-template-columns: 1fr; gap: 20px; }
  .tcard.big { grid-column: auto; }
  #treatments .treat-grid .tcard:nth-child(n+4) { display: none; }
  #treatments .sec-head .svc-all { display: none; }
  #treatments .svc-all-mobile { display: inline-flex; margin-top: 8px; }
  .sec-head-row { flex-direction: column; align-items: stretch; gap: 16px; }
  .sec-head-row .link-green { align-self: flex-end; margin-bottom: 0; }
  .scroll-hint { font-size: 9px; margin-bottom: 11px; }
  .scard { width: 400px; height: 350px; }
  .price-amt.sm { font-size: 30px; }
  .checks li { font-size: 14px; line-height: 22.4px; letter-spacing: 0; }
  .checks li::before { top: 3px; }
  .checks { gap: 16px; margin-bottom: 36px; }
  .featured .checks { margin-bottom: 27px; }
  .badge { font-size: 14px; line-height: 22.4px; }

  /* footer */
  .footer { padding: 100px 24px 32px; }
  .foot-cols { grid-template-columns: 1fr; gap: 24px; margin-top: 0; }
  .foot-col h4 { margin-bottom: 18px; }
  .foot-col a { font-size: 14px; line-height: 17px; margin-bottom: 21px; letter-spacing: 0; }
  .foot-mid { grid-template-columns: 1fr; margin-top: 52px; gap: 56px; }
  .socials { margin-top: 18px; }
  .tablet-only { display: none !important; }
  .pcard-row { margin-top: 20px; min-height: 0; }
  .dcard-img { border-radius: 8px; }
  .foot-legal { width: auto; }
  .contact { order: -1; padding-top: 0; }
  .contact p { font-size: 14px; margin-bottom: 12px; }
  .disclaimer { margin-top: 58px; padding: 32px 0; }
  .foot-bottom { flex-direction: column-reverse; align-items: flex-start; gap: 33px; }
  .wordmark { height: 98px; }
  .how-left .reveal-sub { max-width: 270px; }
  .foot-col a.cookie-link { font-size: 16px; }
  .foot-legal { flex-direction: column; gap: 12px; }
  .foot-legal span { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav, .nav::before, .nav::after, .nav-cells i { animation: none; }
  .nav-cells { display: none; }
  .btn-navy, .btn-apply, .btn-navy::after, .btn-apply::after { transition: none; }
  .appear { animation: none; opacity: 1; }
  .split-words .w, .reveal-sub { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   INNER PAGES — Treatments & Products
   (layout measured from the original's /treatments and /products)
   ===================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page-title {
  font-family: var(--f-display); font-weight: 300;
  font-size: 80px; line-height: 1; letter-spacing: -1px;
  color: var(--ink);
}

/* Category sections */
.cat-first { padding: 120px 40px 80px; }
.cat-last  { padding: 60px 40px 120px; }

/* Image band with frosted card and white corner brackets */
.standard { position: relative; overflow: hidden; }
.standard-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.standard-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 66px 30px; }
.bracket { position: absolute; left: 30px; right: 30px; height: 50px; border: 1px solid #fff; pointer-events: none; }
.bracket-top { top: 0; border-top: 0; border-radius: 0 0 4px 4px; }
.bracket-bottom { bottom: 0; border-bottom: 0; border-radius: 4px 4px 0 0; }
.glass-card {
  width: 500px; height: 600px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding: 40px 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  box-shadow: var(--shadow);
}
.standard-exec .glass-card { width: 400px; }
.glass-card .h-display { color: #000; }
.glass-text { font-size: 18px; line-height: 27px; color: #000; }

/* Centered CTA */
.cta-sec { background: var(--bg); border-top: 1px solid var(--line); padding: 120px 40px; }
.cta-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cta-inner .h-display { max-width: 600px; }
.cta-inner .lead { max-width: 600px; margin-top: 20px; }
.cta-inner .btn { margin-top: 32px; }

/* Products: filter bar */
.shop-sec { padding: 80px 40px; }
.shop-filters { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 48px; }
.field {
  position: relative; display: flex; align-items: center;
  width: 180px; height: 40px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); box-shadow: var(--shadow);
  color: var(--ink);
}
.field select, .field input {
  width: 100%; height: 100%;
  border: 0; outline: none; background: transparent;
  font: 14px/1 var(--f-body); color: var(--ink);
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.field select { padding: 0 32px 0 12px; }
.field select option { color: #000; }
.field input { padding: 0 12px 0 32px; cursor: text; }
.field input::placeholder { color: var(--grey); }
.field-icon { position: absolute; left: 12px; color: var(--grey); pointer-events: none; }
.field-icon-end { position: absolute; right: 12px; pointer-events: none; }
.field:focus-within { border-color: var(--teal); }
.shop-grid .pcard[hidden] { display: none; }
.shop-empty { padding: 40px 0; text-align: center; color: var(--grey); }

@media (max-width: 1199.98px) {
  .page-title { font-size: 56px; letter-spacing: 0; max-width: 350px; }
      .cat-first, .cat-last { padding: 80px 32px; }
  .cta-inner .h-display { max-width: 400px; }
  .tcard.big.t-half { grid-column: auto; }
  .standard-inner { max-width: none; }
  .glass-card, .standard-exec .glass-card { width: 400px; height: 400px; }
  .standard-exec .glass-card { width: 350px; }
  .glass-text { font-size: 16px; line-height: 24px; }
  .shop-sec { padding: 80px 32px; }
}

@media (max-width: 809.98px) {
  .page-title { font-size: 40px; letter-spacing: -1px; max-width: none; }
      .cat-first, .cat-last { padding: 64px 20px; }
  .cat-first { padding-bottom: 84px; }
  .standard-inner { padding: 46px 20px; }
  .bracket { left: 20px; right: 20px; height: 30px; }
  .glass-card, .standard-exec .glass-card { width: 100%; height: 350px; padding: 40px 20px; }
  .cta-sec { padding: 80px 24px; }
  .cta-inner .h-display { max-width: 300px; }
  .cta-inner .lead { max-width: 240px; }
  .shop-sec { padding: 64px 20px; }
  .shop-filters { flex-direction: column; margin-bottom: 32px; }
  .field { width: 100%; }
}

/* =====================================================================
   Membership, Insights, Apply / Intake
   (layout measured from the original's /membership, /insights, /apply-intake → contact.html)
   ===================================================================== */
.page-title { max-width: 750px; }

/* Membership — Clinical Initiation timeline: pinned image cross-fades per step */
/* margin collapses with the section head's 48px, so this sets the full 98px gap */
.tl-sec { padding: 80px 40px; }
.timeline { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 98px; }
.tl-frame {
  position: sticky; top: 100px;
  width: 660px; aspect-ratio: 1; flex: none;
  border-radius: 8px; overflow: hidden;
  background: var(--panel);
}
.tl-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .7s var(--ease);
}
.tl-frame img.on { opacity: 1; }
.tl-steps { width: 460px; }
.tl-step { min-height: 730px; }
.tl-step:last-child { min-height: 0; }
.tl-step .card-title { margin-top: 15px; }
.tl-text { margin-top: 16px; font-size: 18px; line-height: 27px; color: var(--grey); }
.tl-step-img { display: none; }

/* Membership — FAQ */
.faq-sec { padding: 80px 40px; }
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 15px; }
.faq-item { border-top: 1px solid var(--line); padding-top: 24px; }
.faq-item .card-desc { margin-top: 13px; }

/* Insights */
.feat-sec { padding: 120px 40px 60px; }
.treat-grid.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Apply / Intake — two-step form */
.intake {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 125px 20px 100px;
}
.intake-wrap { width: 100%; max-width: 800px; }
.intake-step[hidden] { display: none; }
.intake-step:not([hidden]) { animation: intakeIn .5s var(--ease) both; }
@keyframes intakeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.intake-count { text-align: right; margin-bottom: 20px; color: var(--ink); }
.page-title.intake-title { max-width: none; text-align: center; }
.intake-sub { margin-top: 20px; text-align: center; }
.intake-fields { margin-top: 52px; padding: 0 20px; display: flex; flex-direction: column; gap: 20px; }
.intake-field { display: flex; flex-direction: column; gap: 10px; cursor: text; }
.intake-field .mono { color: var(--ink); }
.intake-input { display: block; padding: 12px 12px 11px 0; border-bottom: 1px solid var(--line); transition: border-color .25s; }
.intake-input:focus-within { border-color: var(--teal); }
.intake-input input {
  display: block; width: 100%; height: 16px; padding: 0;
  border: 0; outline: none; background: transparent;
  font: 14px/16px var(--f-body); color: var(--ink);
}
.intake-input input::placeholder { color: var(--grey); }
.intake-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding: 0 20px; }
.intake-actions-center { justify-content: center; }
.intake-back { visibility: hidden; }
.intake-actions button { cursor: pointer; }

.intake-group { border: 0; margin: 52px 0 0; padding: 0 20px; min-width: 0; }
.intake-group legend { float: left; width: 100%; padding: 0; color: var(--ink); }
.intake-options { clear: both; padding-top: 19px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 10px; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; line-height: 15.5px; color: var(--ink); }
.check span { opacity: .8; }
.check input {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex: none; margin: 0;
  border: 1px solid var(--line); border-radius: 3px;
  background: var(--card) center / 11px no-repeat;
  cursor: pointer; transition: background-color .2s, border-color .2s;
}
.check input:checked {
  background-color: var(--teal); border-color: var(--teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.check input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.check-consent { margin-top: 35px; padding: 0 20px; font-size: 12px; line-height: 19px; font-style: italic; color: var(--grey); }
.check-consent span { opacity: 1; }
.intake-error { margin-top: 10px; font-size: 12px; color: #ff6b6b; }
.intake-submit { display: flex; width: calc(100% - 40px); height: 40px; margin: 20px 20px 0; padding: 0 12px; }
.intake-note { margin-top: 10px; text-align: center; font-size: 12px; line-height: 13px; color: var(--grey); }
.intake-step[data-step="2"] .intake-actions { justify-content: flex-start; }

@media (max-width: 1199.98px) {
  .page-title { max-width: 350px; }
  .tl-sec { padding: 80px 32px; }
  .timeline { margin-top: 98px; }
  .tl-frame { width: 384px; }
  .tl-steps { width: auto; flex: 0 1 516px; margin-left: 60px; }
  .tl-step { min-height: 618px; }
  .tl-step:last-child { min-height: 0; }
  .tl-text { font-size: 16px; line-height: 24px; }
  .faq-sec { padding: 80px 40px; }
  .feat-sec { padding: 80px 32px; }
  .intake { padding: 100px 32px; }
  .intake-wrap { max-width: 600px; }
  .intake-fields, .intake-actions, .intake-group, .check-consent { padding-left: 8px; padding-right: 8px; }
  .intake-fields, .intake-group { margin-top: 32px; }
  .intake-submit { width: calc(100% - 16px); margin-left: 8px; margin-right: 8px; }
  .intake-input input { font-size: 12px; }
}

@media (max-width: 809.98px) {
  .page-title { max-width: none; }
  .tl-sec { padding: 64px 20px; }
  .timeline { display: block; margin-top: 0; }
  .tl-frame { display: none; }
  .tl-steps { width: 100%; margin-left: 0; }
  .tl-step, .tl-step:last-child { min-height: 0; }
  .tl-step + .tl-step { margin-top: 40px; }
  .tl-text { line-height: 19.2px; }
  .tl-step-img { display: block; margin-top: 20px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
  .tl-step-img img { width: 100%; height: 100%; object-fit: cover; }
  .faq-sec { padding: 80px 24px; }
  .faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .feat-sec { padding: 64px 20px; }
  .intake { padding: 80px 20px 120px; }
  .treat-grid.two-col { grid-template-columns: 1fr; }
  .intake-wrap { max-width: 350px; }
  .intake-options { grid-template-columns: 1fr; }
}

/* =====================================================================
   LIVING DETAILS — the nav capsule's language applied site-wide
   (classes are added by script.js; everything is decorative)
   ===================================================================== */

/* 1. Orbiting light on boxes ------------------------------------------ */
@property --orb { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.orbit { position: relative; }
.tl-frame.orbit { position: sticky; } /* keep the pinned timeline image pinned */
.orbit::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--orb),
    transparent 0deg, transparent 215deg,
    rgba(1, 162, 158, .18) 260deg, #01A29E 305deg, #399CE8 338deg, rgba(57, 156, 232, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .75;
  animation: orbSpin 7s linear infinite;          /* continuous, same pace as the nav */
  animation-delay: var(--orb-delay, 0s);
  transition: opacity .5s var(--ease);
  pointer-events: none;
  z-index: 3;
}
.orbit:hover::after { opacity: 1; }
/* featured elements: a touch brighter and slower */
.orbit.orbit-always::after { opacity: .9; animation-duration: 8s; }
@keyframes orbSpin { to { --orb: 360deg; } }

/* 2. Live-monitor pulse on section-label dots --------------------------- */
.dot { position: relative; }
.dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(1, 162, 158, .55);
  animation: dotPulse 2.6s ease-out infinite;
}
@keyframes dotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(1, 162, 158, .55); }
  70%  { box-shadow: 0 0 0 6px rgba(1, 162, 158, 0); }
  100% { box-shadow: 0 0 0 0 rgba(1, 162, 158, 0); }
}

/* 3. Scanner glint travelling along divider lines ------------------------ */
.line-scan { position: relative; }
.line-scan::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, #01A29E 40%, #399CE8 60%, transparent) no-repeat;
  background-size: 28% 100%;
  background-position: -40% 0;
  opacity: 0;
  pointer-events: none;
}
.line-scan.is-in::before { animation: lineScan 9s ease-in-out var(--scan-delay, 0s) infinite; }
@keyframes lineScan {
  0%   { background-position: -40% 0; opacity: 0; }
  4%   { opacity: 1; }
  30%  { background-position: 140% 0; opacity: 1; }
  34%, 100% { background-position: 140% 0; opacity: 0; }
}

/* 4. Slow image drift inside cards on hover ------------------------------ */
.tcard-img img, .dcard-img img, .pcard-img img { transition: transform 1.1s var(--ease); }
.tcard-img, .dcard-img, .pcard-img { overflow: hidden; }
a.card:hover .tcard-img img,
a.card:hover .dcard-img img,
a.card:hover .pcard-img img { transform: scale(1.045); }

@media (prefers-reduced-motion: reduce) {
  .orbit::after { animation: none; opacity: .4; }
  .orbit.orbit-always::after { opacity: .6; animation: none; }
  .dot::after, .line-scan::before { animation: none !important; }
  a.card:hover .tcard-img img, a.card:hover .dcard-img img, a.card:hover .pcard-img img { transform: none; }
}

/* =====================================================================
   MOBILE — DNA-helix entrance for boxes (plays once per box)
   Each box travels on the surface of a slowly turning cylinder, like a
   point on a double helix: it turns around an axis that sits BEHIND it,
   sweeping in from the side and from depth while
   rising slightly (the helix pitch). Alternate boxes are the opposite
   strand, so they arrive from the opposite side. Phones only.
   ===================================================================== */
@media (max-width: 809.98px) {
  .helix { opacity: 0; will-change: transform, opacity; }
  .helix.helix-a { --hr:  26deg; }
  .helix.helix-b { --hr: -26deg; }
  .helix.helix-play {
    animation:
      helixTurn 2.4s cubic-bezier(.33, 1, .68, 1) var(--helix-delay, 0s) both,
      helixFade 1.6s ease-out var(--helix-delay, 0s) both;
  }
}
/* Orbit around an axis 420px behind the box: move back to the axis, rotate,
   move forward again. At 0deg the two translateZ steps cancel exactly, so the
   box finishes at its true size and position (no enlargement, no snap). While
   turning it only ever sits at or behind its resting plane. */
@keyframes helixTurn {
  from { transform: perspective(2000px) translateY(30px) translateZ(-420px) rotateY(var(--hr)) translateZ(420px); }
  to   { transform: perspective(2000px) translateY(0)    translateZ(-420px) rotateY(0deg)      translateZ(420px); }
}
@keyframes helixFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .helix { opacity: 1 !important; animation: none !important; transform: none !important; }
}

/* =====================================================================
   NEXGEN COPY — fit-only tweaks so the copy sits inside the existing components
   ===================================================================== */
/* problem → solution: the H2 runs inline inside the curtain statement */
.thesis-inline { display: inline; font: inherit; letter-spacing: inherit; color: inherit; }
.thesis-h strong { font-weight: 500; }
/* what you get: longer descriptions than the sanctuary captions — same 20px inset on the right */
.scard-txt { right: 20px; }
/* FAQ on Contact: each topic group is the membership FAQ pattern (pill + grid), stacked */
.faq-group + .faq-group { margin-top: 56px; }

/* ---------- Services dropdown (desktop) — same dark glass as the mobile menu panel ---------- */
.nav-svc { display: inline-flex; align-items: center; gap: 6px; }
.nav-chev { transition: transform .3s var(--ease); }
.nav-svc[aria-expanded="true"] .nav-chev, .nav-sub-toggle[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }
.nav-drop {
  position: absolute; top: calc(100% + 8px); left: 0;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 250px; padding: 12px;
  border-radius: 20px;
  background: rgba(10, 12, 13, .92);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
  transition: opacity .3s, transform .3s var(--ease), visibility 0s linear .3s;
}
.nav-drop[hidden] { display: flex; } /* keep it in layout so it can fade; hidden state = invisible + inert */
.nav-drop.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.nav-drop a { padding: 9px 12px; border-radius: 10px; font-size: 15px; line-height: 22px; color: var(--nav-ink); white-space: nowrap; transition: color .25s, background-color .25s; }
.nav-drop a:hover, .nav-drop a:focus-visible { color: var(--teal); background: rgba(255, 255, 255, .04); }
.nav-drop a[aria-current="page"] { color: var(--blue); }
.nav-drop .nav-drop-all { margin-top: 6px; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, .12); border-radius: 0 0 10px 10px; }

/* ---------- Services sub-list (mobile menu) ---------- */
.nav-menu-svc { display: flex; align-items: center; justify-content: space-between; }
.nav-menu-svc a { flex: 1; }
.nav-sub-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--nav-ink); cursor: pointer; }
.nav-sub-toggle .nav-chev { width: 14px; height: 14px; }
.nav-sub { display: flex; flex-direction: column; margin: 0 0 4px 12px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .12); }
.nav-sub[hidden] { display: none; }
.nav-menu .nav-sub a { padding: 8px 12px; font-size: 14px; color: var(--grey); }
.nav-menu .nav-sub a[aria-current="page"] { color: var(--blue); }
@media (max-width: 809.98px) {
  .nav-drop { display: none !important; }
  .nav-menu { max-height: calc(100vh - 96px); overflow-y: auto; }
}

/* Real clinic photos are portrait — keep faces in frame when the cards crop them */
img[src$="nexgen/clinician.jpg"] { object-position: 50% 12%; }
img[src$="use/client-on-phone-lounge.jpg"] { object-position: 50% 45%; }
img[src$="use/vo2-max-test-bike.jpg"] { object-position: 50% 30%; }
img[src$="nexgen/iv-nurse.jpg"] { object-position: 50% 30%; }
img[src$="use/treatment-device-welcome-sign.jpg"] { object-position: 50% 35%; }
/* real clinic photos are brighter than the original stock — deepen the existing shade behind the caption so it stays readable */
.scard-shade { background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .45) 38%, rgba(0, 0, 0, .2) 65%); }

/* =====================================================================
   SERVICE SUBPAGES — layout of the reference service page (label + title + photo,
   sticky details column beside the text), in the NexGen black / teal system.
   Sits below the hero video.
   ===================================================================== */
.mod-head { padding-bottom: 80px; }
.mod-label { font-size: 12px; }
.mod-title {
  margin: 16px 0 32px;
  font-family: var(--f-display); font-weight: 300;
  font-size: 80px; line-height: 1; letter-spacing: -1px;
  color: var(--ink);
}
.mod-img { aspect-ratio: 2 / 1; border-radius: 12px; overflow: hidden; background: var(--card); }
.mod-img img { width: 100%; height: 100%; object-fit: cover; }

.mod-detail { padding-top: 80px; border-top: 1px solid var(--line); }
.mod-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 80px; align-items: start; }
.mod-meta { position: sticky; top: 120px; display: flex; flex-direction: column; }
.mod-row { display: flex; flex-direction: column; gap: 8px; padding: 20px 0; border-top: 1px solid var(--line); }
.mod-row:last-child { border-bottom: 1px solid var(--line); }
.mod-k { font-size: 16px; line-height: 25.6px; color: var(--grey); }
.mod-v { font-size: 12px; line-height: 18px; color: var(--ink); }
.mod-block + .mod-block { margin-top: 64px; }
.mod-block .h-display { margin-bottom: 20px; }
.mod-text { font-size: 18px; line-height: 27px; color: var(--ink); opacity: .86; }
.mod-text + .mod-text { margin-top: 16px; }
.mod-block .checks { margin: 24px 0 0; }
.mod-note .mod-text { font-size: 14px; line-height: 22px; color: var(--grey); opacity: 1; }

@media (max-width: 1199.98px) {
  .mod-title { font-size: 64px; }
  .mod-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 809.98px) {
  .mod-head { padding-bottom: 56px; }
  .mod-title { font-size: 40px; margin: 12px 0 24px; }
  .mod-img { aspect-ratio: 8 / 7; }
  .mod-detail { padding-top: 56px; }
  .mod-grid { grid-template-columns: 1fr; gap: 48px; }
  .mod-meta { position: static; }
  .mod-block + .mod-block { margin-top: 48px; }
  .mod-text { font-size: 16px; line-height: 24px; }
}

/* service subpages use a clinic photo in the hero instead of the video — photos are brighter, so the same overlay is deeper */
.hero:has(> img.hero-video) .hero-overlay { opacity: .74; }
.hero:has(> img.hero-video) .hero-sub { color: rgba(255, 255, 255, .82); }

/* ---------- Nav capsule: DNA strands (replace the floating cells) ---------- */
.nav-dna {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.nav-dna .dna { position: absolute; top: 0; left: 0; height: 100%; width: auto; overflow: visible; }
.nav-dna .dna g { fill: none; stroke: url(#dnaGrad); stroke-width: 1.2; stroke-linecap: round; }
.nav-dna .dna-a { opacity: .34; animation: dnaDrift 38s linear infinite; }
.nav-dna .dna-b { opacity: .16; animation: dnaDrift 26s linear infinite reverse; }
.nav-dna .dna-b g { stroke-width: 1; }
.nav-dna .rungs line { stroke-width: 1; }
@keyframes dnaDrift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .nav-dna .dna { animation: none; } }

/* hero buttons scroll to the form on the page — land it just below the floating nav */
#lead-form, #intake { scroll-margin-top: 90px; }

/* "Feel like you again" curtain reveal: NexGen's own lobby photo — it's bright, so it's dimmed to keep the white statement readable as the curtains open */
.thesis-facility { object-position: 50% 58%; filter: brightness(.5) saturate(.9); }

/* =====================================================================
   HOME EDITS (2026-09-28)
   ===================================================================== */
/* Core services: "See all services" sits on the left under the heading, with a proper tap area */
.svc-all { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; }
.svc-all-mobile { display: none; }

/* One-step form: service dropdown (same underline field as the inputs) + consent */
.intake-select { position: relative; padding-right: 28px; }
.intake-select select {
  display: block; width: 100%; height: 16px; padding: 0;
  border: 0; outline: none; background: transparent;
  font: 14px/16px var(--f-body); color: var(--ink);
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.intake-select select:invalid { color: var(--grey); }
.intake-select select option { color: #000; }
.intake-chev { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--grey); pointer-events: none; }
.intake-wrap .check-consent { display: flex; margin-top: 32px; font-style: normal; font-size: 13px; line-height: 20px; }
.intake-wrap .check-consent span { color: var(--grey); }
.intake-wrap .intake-fields { margin-top: 40px; }

/* FAQ accordion: question rows, answer slides open on click */
.faq-acc { padding-top: 0; }
.faq-acc .card-title { margin: 0; }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 24px 0; text-align: left; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit;
}
.faq-icon { position: relative; flex: none; width: 14px; height: 14px; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1.5px; margin-top: -.75px; background: var(--blue); transition: transform .35s var(--ease); }
.faq-icon::after { transform: rotate(90deg); }
.faq-acc.is-open .faq-icon::after { transform: rotate(0deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq-a > div { overflow: hidden; min-height: 0; }
.faq-a .card-desc { margin: 0; padding-bottom: 24px; }
.faq-acc.is-open .faq-a { grid-template-rows: 1fr; }
.faq-grid:has(.faq-acc) { row-gap: 0; align-items: start; }

/* Footer on phones: compact (two link columns, legal links in one row, tighter spacing) */
@media (max-width: 809.98px) {
  .footer { padding: 64px 20px 28px; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .foot-col h4 { margin-bottom: 14px; }
  .foot-col a { font-size: 14px; line-height: 18px; margin-bottom: 11px; }
  .foot-col:nth-child(3) { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
  .foot-col:nth-child(3) h4 { width: 100%; margin-bottom: 4px; }
  .foot-col:nth-child(3) a { margin-bottom: 0; font-size: 13px; }
  .foot-mid { margin-top: 36px; gap: 0; }
  .contact p { font-size: 13px; line-height: 19px; margin-bottom: 8px; }
  .socials { margin-top: 14px; }
  .disclaimer { margin-top: 32px; padding: 20px 0; }
  .disclaimer p { margin-bottom: 10px; }
  .foot-bottom { flex-direction: row; align-items: center; gap: 16px; padding-top: 20px; }
  .wordmark { height: 52px; }
}
@media (max-width: 1199.98px) { .intake-select select { font-size: 12px; } }

/* What You Get carousel on phones: each card fits the screen (next one peeks in), nothing cut off */
@media (max-width: 809.98px) {
  .scard { width: calc(100vw - 72px); max-width: 400px; height: 380px; scroll-snap-align: start; }
  .sanct-track { scroll-snap-type: x mandatory; scroll-padding-left: 0; }
  .scard-txt { left: 20px; right: 20px; bottom: 28px; }
}
/* provider headshots: keep faces in the portrait crop */
img[src$="use/amanda-alba-founder.jpg"] { object-position: 50% 20%; }
img[src$="use/jesus-garza-pa.jpg"] { object-position: 45% 20%; }
/* provider headshots are shown in colour (graded to match the clinic's own photo style), not the board's black & white */
.dcard-img img[src$="use/amanda-alba-founder.jpg"], .dcard-img img[src$="use/jesus-garza-pa.jpg"] { filter: none; opacity: 1; }

/* =====================================================================
   SERVICES PAGE EDITS (2026-09-29)
   ===================================================================== */
/* Core services cards: arrow beside the title, so the card doesn't grow at the bottom */
.tcard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tcard .tcard-head .card-title { margin-bottom: 0; }
.tcard .tcard-head .arrow-btn { flex: none; align-self: center; margin-top: 0; }
.tcard .checks { margin: 20px 0 0; }

/* Getting started: one box, three steps joined by a thin teal→blue line */
.steps-card { padding: 8px 32px; }
.steps-list { list-style: none; margin: 0; padding: 0; }
.steps-list li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; padding: 28px 0; }
.steps-list li + li { border-top: 1px solid var(--line); }
.steps-list li:not(:last-child)::after {
  content: ""; position: absolute; left: 22px; top: 80px; bottom: -28px; width: 1px;
  background: linear-gradient(var(--teal), var(--blue)); opacity: .55;
}
.step-num {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14); background: var(--panel);
  font-size: 12px; color: var(--blue);
}
.steps-list .card-title { margin: 10px 0 8px; }

/* Reviews: What You Get carousel design, with the Google mark and five stars */
.g-badge { display: inline-flex; align-items: center; gap: 14px; margin-top: 8px; padding: 10px 18px 10px 12px; border-radius: 500px; border: 1px solid rgba(255, 255, 255, .12); background: var(--card); transition: border-color .25s; }
.g-badge:hover { border-color: var(--teal); }
.g-logo { width: 28px; height: 28px; flex: none; }
.g-badge-txt { display: inline-flex; align-items: center; gap: 10px; }
.g-score { font-family: var(--f-display); font-size: 20px; font-weight: 500; color: var(--ink); }
.g-count { font-size: 13px; color: var(--grey); }
.g-stars { display: inline-flex; gap: 2px; }
.g-stars svg { width: 15px; height: 15px; fill: #FBBC04; }
.review-card { margin: 0; }
.review-card .scard-txt { display: flex; flex-direction: column; gap: 12px; }
.review-q { margin: 0; font-size: 17px; line-height: 26px; color: #fff !important; }
.review-name { margin: 0 !important; font-size: 15px; }
.review-src { color: rgba(255, 255, 255, .6); font-weight: 400; }
.reviews-all { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; }
@media (max-width: 809.98px) {
  .steps-card { padding: 4px 20px; }
  .steps-list li { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 24px 0; }
  .steps-list li:not(:last-child)::after { left: 20px; top: 70px; bottom: -24px; }
  .step-num { width: 40px; height: 40px; }
  .steps-list .card-title { margin-top: 8px; }
  .review-q { font-size: 15px; line-height: 23px; }
  .g-badge { gap: 10px; padding: 8px 14px 8px 10px; }
}
/* lead form on phones: no forced full-screen height, much less space before the footer */
@media (max-width: 809.98px) {
  .intake { min-height: 0; padding: 64px 20px 48px; }
}

/* service subpages: booking button under the service photo and at the bottom of "Why NexGen" */
.sec-cta-row { display: flex; justify-content: flex-start; margin-top: 40px; }
@media (max-width: 809.98px) { .sec-cta-row { margin-top: 32px; } .sec-cta-row .btn { width: 100%; justify-content: center; } }

/* hero pill on phones: never wider than the screen — tighter tracking, and it may wrap if a line is still too long */
@media (max-width: 809.98px) {
  .hero .pill { max-width: 100%; letter-spacing: .1em; white-space: normal; text-align: center; line-height: 1.35; }
}
@media (max-width: 809.98px) {
  .hero .pill { text-wrap: balance; }
  .review-card { height: 440px; }
}
/* hero pill: always one line (the text is kept short enough to fit on small phones) */
@media (max-width: 809.98px) { .hero .pill { white-space: nowrap; } }

/* Footer on phones: contact details first, then the menus, then legal links; no disclaimer paragraphs */
@media (max-width: 809.98px) {
  .footer > .container { display: flex; flex-direction: column; }
  .footer .foot-mid { order: 1; margin-top: 0; }
  .footer .foot-cols { order: 2; margin-top: 36px; }
  .footer .disclaimer { display: none; }
  .footer .foot-bottom { order: 4; margin-top: 32px; }
}

/* Footer credit: "Athena Solutions" links to the studio */
.foot-credit a { color: inherit; border-bottom: 1px solid currentColor; transition: color .25s; }
.foot-credit a:hover { color: var(--blue); }
/* Address: full on desktop, a one-line short form on phones */
.addr-short { display: none; }
@media (max-width: 809.98px) {
  .footer .contact p { font-size: 12px; white-space: nowrap; }
  .footer .contact p.contact-addr .mono, .footer .contact p .mono { letter-spacing: .1em; }
  .addr-full { display: none; }
  .addr-short { display: inline; }
  /* bottom row: logo on its own line, then © and the credit each on one line */
  .footer .foot-bottom { flex-direction: column-reverse; align-items: flex-start; gap: 20px; }
  .foot-legal { flex-direction: column; gap: 10px; }
  .foot-legal span { white-space: nowrap; letter-spacing: .12em; }
}
@media (max-width: 359.98px) {
  .footer .contact p { font-size: 11px; }
  .foot-legal span { font-size: 10px; letter-spacing: .1em; }
}
@media (max-width: 809.98px) {
  .footer .contact p { white-space: normal; }              /* hours may wrap as before */
  .footer .contact p:not(:last-of-type) { white-space: nowrap; }   /* address, phone, email: one line */
}
@media (max-width: 359.98px) {
  .addr-tx { display: none; }
  .footer .contact p .mono { letter-spacing: .06em; }
}

/* =====================================================================
   CTA buttons: glass finish (same teal→blue colour, now translucent + frosted)
   ===================================================================== */
.btn-navy, .btn-apply {
  background-color: rgba(1, 162, 158, .28);
  background-image: linear-gradient(120deg, rgba(1, 162, 158, .88) 0%, rgba(10, 179, 173, .82) 38%, rgba(47, 163, 224, .80) 72%, rgba(57, 156, 232, .86) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
          backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),        /* bright rim along the top edge */
    inset 0 -10px 18px -10px rgba(255, 255, 255, .28), /* light bouncing up from the bottom, like thick glass */
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 1px 2px rgba(0, 0, 0, .25),
    0 10px 26px -10px rgba(1, 162, 158, .75);       /* same teal glow */
}
/* curved reflection across the top half */
.btn-navy::before, .btn-apply::before {
  inset: 1px 6% 48% 6%;
  border-radius: 100px 100px 60% 60% / 100px 100px 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .06));
  opacity: .85;
}
.btn-navy:hover, .btn-apply:hover {
  background-image: linear-gradient(120deg, rgba(1, 162, 158, .94) 0%, rgba(10, 179, 173, .9) 38%, rgba(47, 163, 224, .88) 72%, rgba(57, 156, 232, .92) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .65),
    inset 0 -10px 18px -10px rgba(255, 255, 255, .34),
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 2px 4px rgba(0, 0, 0, .25),
    0 16px 34px -12px rgba(57, 156, 232, .8);
}
.btn-navy:active, .btn-apply:active {
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 1px 2px rgba(0, 0, 0, .25),
    0 6px 14px -8px rgba(1, 162, 158, .7);
}

/* new clinic photos: keep the subject in frame when cards crop them */
img[src$="nexgen/iv-lounge.jpg"] { object-position: 50% 80%; }
img[src$="use/vitamin-shot-injection.jpg"] { object-position: 50% 40%; }
img[src$="use/staff-members.jpg"], img[src$="use/team-at-logo-wall.jpg"] { object-position: 50% 25%; }
img[src$="use/lobby-lounge-chairs.jpg"] { object-position: 50% 70%; }
img[src$="use/client-receiving-iv.jpg"] { object-position: 50% 70%; }

img[src$="use/iv-line-in-arm.jpg"] { object-position: 50% 40%; }

/* Touch screens (iPhone/Android): the orbit lights and DNA strands are driven frame-by-frame by script.js
   (works on older iOS without @property animation, and keeps them repainting inside the frosted nav capsule) */
.js-motion .nav::before, .js-motion .orbit::after, .js-motion .nav-dna .dna { animation: none !important; }
.js-motion .nav-dna .dna { will-change: transform; }

/* =====================================================================
   IV DRIP MENU (IV Therapy page) — Apothecary product boxes, with a line icon in the image panel
   ===================================================================== */
.drip { display: flex; flex-direction: column; }
.drip-art {
  aspect-ratio: 16 / 10; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(1, 162, 158, .16), rgba(57, 156, 232, .05) 45%, transparent 70%), var(--panel);
}
.drip-art svg { width: 64px; height: 64px; color: #2FA3E0; transition: transform .8s var(--ease); }
a.drip:hover .drip-art svg { transform: scale(1.08); }
.drip .card-title { margin-bottom: 8px; }
.drip-eyebrow { font-size: 11px; color: var(--grey); margin-bottom: 6px; }
.drip-sub { font-size: 11px; color: var(--blue); margin: -2px 0 10px; }
.drip-ing { margin-top: 14px; font-family: var(--f-mono); font-weight: 600; font-size: 10.5px; line-height: 1.8; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); opacity: .9; }
.drip .pcard-row { margin-top: auto; padding-top: 20px; }
.drip-price { font-size: 15px; color: var(--ink); }
.drip-signature .drip-eyebrow { color: var(--teal); }
/* NAD+: one wide box — icon, text, dose pricing */
.drip-nad { grid-column: 1 / -1; display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px; gap: 32px; align-items: center; }
.drip-nad .drip-art { margin-bottom: 0; }
.nad-doses { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin: 8px 0 0; }
.nad-doses div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.nad-doses dt { color: var(--grey); font-size: 14px; }
.nad-doses dd { margin: 0; color: var(--ink); font-size: 14px; }
.drip-nad .pcard-row { padding-top: 16px; }
@media (max-width: 1199.98px) {
  .drip-nad { grid-template-columns: 200px minmax(0, 1fr); }
  .drip-nad-doses { grid-column: 1 / -1; }
}
@media (max-width: 809.98px) {
  .drip-art { aspect-ratio: 16 / 9; }
  .drip-art svg { width: 52px; height: 52px; }
  .drip-nad { grid-template-columns: 1fr; gap: 16px; }
}
.drip-ing .ing { white-space: nowrap; }

/* drip boxes show a NexGen IV bag on no background (like a product shot) */
.drip-art { background: none !important; aspect-ratio: 4 / 3; padding: 8px 0 0; }
.drip-art .iv-bag { width: auto; height: 100%; max-height: 240px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); transition: transform .8s var(--ease); }
a.drip:hover .drip-art .iv-bag { transform: translateY(-4px) rotate(-1.5deg); }
@media (max-width: 809.98px) { .drip-art { aspect-ratio: 4 / 3; } .drip-art .iv-bag { max-height: 220px; } }
.drip-art img.iv-bag { object-fit: contain; border-radius: 0; }

/* IV drip menu on phones: a swipeable carousel (one box per view, the next one peeking in) */
.drip-hint { display: none; }
@media (max-width: 809.98px) {
  .drip-hint { display: block; }
  .drip-grid {
    display: flex; gap: 16px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-left: 20px;
    margin: 0 -20px; padding: 4px 20px 8px;
    scrollbar-width: none;
  }
  .drip-grid::-webkit-scrollbar { display: none; }
  .drip-grid > .drip { flex: 0 0 calc(100vw - 72px); max-width: 400px; scroll-snap-align: start; }
}
/* phone carousel: every drip box stretches to the same height, price pinned to the bottom */
@media (max-width: 809.98px) {
  .drip-grid { align-items: stretch; }
  .drip-grid > .drip .pcard-row { margin-top: auto; padding-top: 20px; }
}

/* Vitamin shots & add-ons menu (Vitamin Shots page): icon from the ADD-ONS menu on a soft glow */
.shot-art { aspect-ratio: 16 / 10; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, rgba(15, 195, 190, .16), rgba(57, 156, 232, .05) 42%, transparent 68%) !important; }
.shot-art svg { width: 76px; height: 76px; filter: drop-shadow(0 0 10px rgba(15, 195, 190, .35)); transition: transform .8s var(--ease); }
a.shot:hover .shot-art svg { transform: scale(1.06); }
@media (min-width: 1200px) { .shot-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 809.98px) { .shot-art svg { width: 64px; height: 64px; } }
.shot-art svg { width: 96px; height: 96px; }
@media (max-width: 809.98px) { .shot-art svg { width: 92px; height: 92px; } }

/* Weight management program (Medical Weight Loss page): weekly dose units + what's included */
.dose-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.dose { display: flex; flex-direction: column; gap: 12px; padding: 24px 20px; }
.dose-label { font-size: 11px; color: var(--grey); }
.dose-num { font-family: var(--f-display); font-weight: 300; font-size: 44px; line-height: 1; letter-spacing: -1px; color: var(--ink); }
.dose-num span { font-size: 16px; letter-spacing: 0; color: var(--grey); }
.dose-meter { display: block; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.dose-meter i { display: block; height: 100%; border-radius: inherit; background: var(--grad); box-shadow: 0 0 10px rgba(15, 195, 190, .45); }
.wl-includes { margin-top: 24px; padding: 32px; }
.wl-includes-title { font-size: 12px; color: var(--teal); margin-bottom: 24px; }
.incl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.incl { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 8px 12px; }
.incl + .incl { border-left: 1px solid var(--line); }
.incl svg { width: 48px; height: 48px; filter: drop-shadow(0 0 8px rgba(15, 195, 190, .3)); }
.incl .mono { font-size: 11px; line-height: 1.5; color: var(--ink); }
.wl-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.wl-checks { margin: 0; flex-direction: row; flex-wrap: wrap; gap: 10px 28px; }
.wl-note { max-width: 420px; font-size: 12px; line-height: 18px; color: var(--grey); text-align: right; }
@media (max-width: 1199.98px) {
  .dose-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wl-foot { flex-direction: column; align-items: flex-start; }
  .wl-note { text-align: left; }
}
@media (max-width: 809.98px) {
  .dose-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .dose { padding: 18px 16px; }
  .dose-num { font-size: 34px; }
  .wl-includes { padding: 24px 20px; }
  .incl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; }
  .incl + .incl { border-left: 0; }
  .incl:last-child { grid-column: 1 / -1; }
  .wl-checks { flex-direction: column; }
}

/* Home "Your First Consultation Is Free" on phones: headline, text and button span the membership boxes' width,
   lines stretched edge to edge (owner, 2026-09-30) */
@media (max-width: 809.98px) {
  #free-consult { padding-left: 20px; padding-right: 20px; }
  #free-consult .cta-inner > * { width: 100%; max-width: none; }
  #free-consult .h-display { text-align: center; text-wrap: balance; font-size: 36px; line-height: 1.1; }
  #free-consult .lead { text-align: justify; text-align-last: center; }
}

/* Touch devices: form fields at 16px so phones don't auto-zoom when a field is tapped */
@media (hover: none) and (pointer: coarse) {
  .intake-input input, .intake-select select, .intake-wrap textarea, .shop-filters input, .shop-filters select { font-size: 16px !important; }
}