/* ===========================================================
   Nu Wave PEMF — design system
   Light-dominant rebuild. White is the default surface; colour
   arrives as soft sky tints and gold accents, never as heavy
   dark slabs. The only dark areas are video banners and the footer.
   =========================================================== */

:root{
  /* ---- Brand core ----
     Sampled from Becky's own photos of the room. Confirmed palette. */
  --ink:#14213B;         /* Pulse XL Pro machine body — headings + body text */
  --denim:#44536A;       /* chair cushion — secondary accent, source of the sky tints */
  --gold:#8C6538;        /* Buddha wall art — PRIMARY accent */
  --gold-light:#E8D3AE;  /* light tint of the same gold — soft fills, tags */
  --paper:#FBF8F2;       /* warm cream — alternate light surface */

  /* ---- Sky tints ----
     Desaturated steps down from --denim. These replace the old navy
     slabs: same structural job, a fraction of the visual weight. */
  --sky-50:#F5F8FB;
  --sky-100:#EAF0F7;
  --sky-200:#D9E3EF;
  --sky-300:#C2D2E4;

  --white:#FFFFFF;

  /* ---- Derived gold steps ---- */
  --gold-soft:#C39A63;   /* mid gold — accent text on dark banners */
  --gold-deep:#6F4F2A;   /* deepened gold — hover on gold fills */

  /* ---- Alpha channels ---- */
  --ink-rgb:20 33 59;
  --paper-rgb:251 248 242;
  --white-rgb:255 255 255;
  --gold-rgb:140 101 56;
  --denim-rgb:68 83 106;

  --line: rgb(var(--ink-rgb) / 0.10);
  --line-strong: rgb(var(--ink-rgb) / 0.18);
  --line-light: rgb(var(--white-rgb) / 0.22);

  --radius:4px;
  --shadow-soft: 0 2px 20px rgb(var(--ink-rgb) / 0.05);
  --shadow-lift: 0 10px 34px rgb(var(--ink-rgb) / 0.10);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--white);
  color:var(--ink);
  font-family:'Quicksand', system-ui, sans-serif;
  font-weight:400;
  font-size:1.02rem;
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold-light); color:var(--ink);}

/* ---------- TYPE ---------- */
h1,h2,h3,h4{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:400;
  letter-spacing:0;
  line-height:1.14;
  color:var(--ink);
}
h1{ font-size:clamp(2.8rem, 6vw, 5rem); font-weight:300; }
h2{ font-size:clamp(2rem, 3.8vw, 3.2rem); }
h3{ font-size:clamp(1.5rem, 2.4vw, 2rem); }
h4{ font-size:1.3rem; font-weight:500; }
p{ color:rgb(var(--ink-rgb) / 0.78); }

/* .mono is on ~60 elements across the site (prices, numbers, tags).
   Repointed to tracked Quicksand so all that markup keeps working
   without the old technical monospace look. */
.mono{ font-family:'Quicksand', sans-serif; font-weight:500; letter-spacing:0.04em; }

.eyebrow{
  font-family:'Quicksand', sans-serif;
  font-size:0.74rem;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--gold);
  opacity:1;
}
a{color:inherit;}
img{max-width:100%; display:block;}
section{position:relative;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

/* ---------- SECTION SURFACES ----------
   Swap a section's surface without touching its component styles. */
.tint-sky{ background:linear-gradient(170deg, var(--sky-50), var(--sky-200)); }
.tint-sky-soft{ background:var(--sky-50); }
.tint-cream{ background:var(--paper); }
/* legacy hooks kept alive so inner pages don't break mid-rollout */
.section-light{ background:var(--white); color:var(--ink); }
.section-dark{ background:linear-gradient(170deg, var(--sky-100), var(--sky-300)); color:var(--ink); }

/* ---------- NAV ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgb(var(--white-rgb) / 0.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
nav{
  max-width:1180px; margin:0 auto; padding:16px 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; }
.brand a{ display:flex; }

/* ---------- BRAND LOCKUP ----------
   Becky's logo: dot-matrix soundwave mark + NU WAVE / PEMF wordmark.
   Supplied as a single mauve artwork, recoloured into two web versions —
   the original's own light/dark modelling was mapped onto a new colour ramp
   so the dots keep their depth rather than flattening to a silhouette:
     logo-wave-blue.png   — navy, for light backgrounds (header)
     logo-wave-light.png  — warm ivory, for the navy footer
   Masters kept alongside as *-src.png. This lockup is wide (4.6:1), so it
   steps down at 560px or it crowds the burger and Book now button. */
.brand-lockup{ display:inline-flex; align-items:center; text-decoration:none; }
.logo-lockup-img{ height:44px; width:auto; display:block; }
/* legacy badge slot, still used anywhere not yet migrated */
.logo-badge{ display:block; width:46px; height:46px; flex-shrink:0; }
.logo-badge img{ width:100%; height:100%; object-fit:contain; }
.nav-links{ display:flex; gap:28px; align-items:center; font-size:0.85rem; font-weight:500; }
.nav-links a{ text-decoration:none; position:relative; padding:4px 0; color:rgb(var(--ink-rgb) / 0.75); transition:color .2s; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--gold); transition:width .25s ease;
}
.nav-links a:hover::after{width:100%;}
.nav-cta{
  background:var(--gold); color:var(--white);
  padding:12px 22px; border-radius:var(--radius);
  font-size:0.72rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  transition:background .2s ease;
}
.nav-cta:hover{ background:var(--gold-deep); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:32px; height:32px; padding:0; background:none; border:none; cursor:pointer;
}
.nav-toggle span{ width:100%; height:2px; background:var(--ink); border-radius:1px; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  display:none; flex-direction:column; gap:4px;
  position:absolute; top:100%; left:0; right:0;
  background:var(--white); border-bottom:1px solid var(--line);
  padding:12px 32px 20px;
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{
  text-decoration:none; color:var(--ink);
  padding:13px 0; border-bottom:1px solid var(--line);
  font-size:0.98rem; font-weight:500;
}
.mobile-menu a:last-child{ border-bottom:none; margin-top:10px; }
.mobile-menu a.nav-cta{ text-align:center; padding:14px 20px; color:var(--white); }

/* ===========================================================
   VIDEO BANNERS
   The rhythm-setter for the new design. A banner is a full-bleed
   video with a still image underneath; the video fades in only
   once it has actually loaded, so a missing file degrades to the
   photo rather than a black box.
   =========================================================== */
.banner{
  position:relative; overflow:hidden;
  display:flex; align-items:center;
  background:var(--ink);
}
.banner-media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
}
.banner-media-img{
  animation:banner-breathe 26s ease-in-out infinite;
  transform-origin:center;
}
@keyframes banner-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
.banner-video{ opacity:0; transition:opacity 1.4s ease; z-index:1; }
.banner-video.is-playing{ opacity:1; }
/* scrim keeps overlaid text legible whatever the footage does */
.banner-scrim{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(100deg, rgb(var(--ink-rgb) / 0.78) 0%, rgb(var(--ink-rgb) / 0.52) 45%, rgb(var(--ink-rgb) / 0.28) 100%);
}
.banner-content{ position:relative; z-index:3; width:100%; }
.banner-content h1, .banner-content h2{ color:var(--white); }
.banner-content p{ color:rgb(var(--white-rgb) / 0.86); }
.banner-content .eyebrow{ color:var(--gold-light); }

/* full-height homepage hero */
.banner-hero{ min-height:92vh; padding-top:80px; }
.banner-hero h1 em{ font-style:italic; color:var(--gold-light); font-weight:300; }
.banner-hero .lede{ margin-top:26px; max-width:520px; font-size:1.1rem; }
.banner-hero .hero-cta-row{ margin-top:38px; }

/* mid-page moving strip — a thin full-width band, letterboxed.
   object-fit:cover crops the 16:9 footage to this band, so the clips need
   their action in the vertical middle of the frame. */
.banner-strip{ min-height:300px; text-align:center; justify-content:center; padding:62px 0; }
.banner-strip h2{ font-size:clamp(1.7rem, 3vw, 2.6rem); }
.banner-strip p{ font-size:0.98rem; }

/* Banners running video with no photo underneath: this gradient is what shows
   while the file loads, and what remains if it ever fails to. Reads as an
   intentional brand band rather than a hole in the page. */
.banner-gradient{ background:linear-gradient(115deg, var(--ink) 0%, #24406B 55%, var(--denim) 100%); }

/* ---- Light banner (unused right now) ----
   Kept for bright footage (the water/bubbles clips). Darkening light, airy video
   with the standard ink scrim throws away exactly what makes it good, so this
   variant veils it in white and runs the text dark instead. The band then
   stays as bright as the rest of the page rather than punching a hole in it. */
.banner-light.banner-gradient{ background:linear-gradient(115deg, var(--sky-100), var(--sky-300)); }
/* Just enough veil to seat the text — the footage is already light, so a
   heavy wash flattens it into a plain panel and wastes the movement. */
.banner-light .banner-scrim{
  background:
    radial-gradient(ellipse 66% 78% at 50% 50%, rgb(var(--white-rgb) / 0.55), rgb(var(--white-rgb) / 0.12) 72%),
    linear-gradient(180deg, rgb(var(--white-rgb) / 0.2), rgb(var(--white-rgb) / 0.14));
}
/* a whisper of text shadow does the rest, so the veil can stay light */
.banner-light .banner-content h2{ text-shadow:0 1px 18px rgb(var(--white-rgb) / 0.9); }
.banner-light .banner-content p,
.banner-light .banner-content .eyebrow{ text-shadow:0 1px 12px rgb(var(--white-rgb) / 0.95); }
.banner-light .banner-content h1,
.banner-light .banner-content h2{ color:var(--ink); }
.banner-light .banner-content p{ color:rgb(var(--ink-rgb) / 0.82); }
.banner-light .banner-content .eyebrow{ color:var(--gold); }
/* Centred text sits over the busiest part of the frame, so the scrim pools in
   the middle and thins at the edges. Tuned against the bubbles footage, which
   is already dark navy — a heavy wash just flattened it into a plain panel and
   hid the movement, which is the whole point of using video here. */
.banner-strip .banner-scrim{
  background:
    radial-gradient(ellipse 68% 78% at 50% 50%, rgb(var(--ink-rgb) / 0.5), transparent 74%),
    linear-gradient(180deg, rgb(var(--ink-rgb) / 0.38), rgb(var(--ink-rgb) / 0.3));
}
/* lets the veil stay light without the text softening at the edges */
.banner-strip .banner-content h2{ text-shadow:0 2px 22px rgb(var(--ink-rgb) / 0.75); }
.banner-strip .banner-content p{ text-shadow:0 1px 16px rgb(var(--ink-rgb) / 0.8); }
.banner-strip h2{ max-width:840px; margin:16px auto 0; }
.banner-strip p{ max-width:620px; margin:20px auto 0; }
.banner-strip .hero-cta-row{ justify-content:center; margin-top:32px; }

/* inner-page header band */
.banner-page{ min-height:330px; padding-top:80px; }
.banner-page h1{ font-size:clamp(2.4rem,4.6vw,3.6rem); margin-top:14px; }
.banner-page p{ margin-top:16px; max-width:620px; }

/* legacy .hero kept as an alias so un-migrated pages still render */
.hero{ min-height:92vh; display:flex; align-items:center; background:var(--ink); color:var(--white); position:relative; overflow:hidden; padding-top:80px; }
.hero-grid{ width:100%; display:grid; grid-template-columns:1.2fr 0.8fr; gap:56px; align-items:center; position:relative; z-index:3; }
.hero h1{ color:var(--white); }
.hero h1 em{ font-style:italic; color:var(--gold-light); font-weight:300; }
.hero p.lede{ margin-top:24px; max-width:480px; font-size:1.08rem; color:rgb(var(--white-rgb) / 0.84); }
.hero-eyebrow{ color:var(--gold-light); margin-bottom:20px; }

/* ---------- BUTTONS ---------- */
.hero-cta-row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border-radius:var(--radius); text-decoration:none;
  font-family:'Quicksand', sans-serif;
  font-size:0.76rem; font-weight:600; letter-spacing:0.13em; text-transform:uppercase;
  transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  border:1.5px solid transparent; cursor:pointer;
}
.btn-primary{ background:var(--gold); color:var(--white); }
.btn-primary:hover{ background:var(--gold-deep); transform:translateY(-2px); }
.btn-ghost{ border-color:rgb(var(--white-rgb) / 0.45); color:var(--white); }
.btn-ghost:hover{ border-color:var(--white); background:rgb(var(--white-rgb) / 0.12); }
.btn-ghost-dark{ border-color:var(--line-strong); color:var(--ink); }
.btn-ghost-dark:hover{ border-color:var(--gold); color:var(--gold); }

/* ---------- HERO DECORATION (legacy) ---------- */
.hero-photo{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:1/1; width:100%; max-width:400px; justify-self:end; }
.hero-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-media-img{ animation:banner-breathe 26s ease-in-out infinite; transform-origin:center; }
.hero-media-video{ opacity:0; transition:opacity 1.2s ease; z-index:1; }
.hero-media-video.is-playing{ opacity:1; }
.hero-photo::after{ content:''; position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, rgb(var(--ink-rgb) / 0.04), rgb(var(--ink-rgb) / 0.3)); }

.freq-tag{
  position:absolute; z-index:3;
  font-family:'Quicksand', sans-serif; font-weight:500;
  font-size:0.7rem; color:var(--white);
  letter-spacing:0.08em; background:rgb(var(--ink-rgb) / 0.5); backdrop-filter:blur(6px);
  padding:7px 13px; border-radius:30px; border:1px solid rgb(var(--white-rgb) / 0.2);
}
.freq-tag.f1{top:22px; left:22px;}
.freq-tag.f2{bottom:22px; left:22px;}

/* Animated waveform strip — removed from the hero (the moving video now
   carries that job, and the two together were fighting each other). Styles
   kept because the markup is a drop-in if the motif is ever wanted again:
   <div class="wave-strip"><svg viewBox="0 0 500 60" preserveAspectRatio="none">
   <path class="wave-path" d="…"/></svg></div> */
.wave-strip{ height:60px; margin-top:14px; max-width:520px; }
.wave-strip svg{ width:100%; height:100%; }
.wave-path{
  fill:none; stroke:var(--gold-light); stroke-width:1.4;
  stroke-linecap:round; stroke-dasharray:7 11;
  animation:dash 20s linear infinite; opacity:0.6;
}
@keyframes dash{ to{ stroke-dashoffset:-1000; } }

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  font-family:'Quicksand', sans-serif; font-size:0.66rem; font-weight:600;
  color:rgb(var(--white-rgb) / 0.6); letter-spacing:0.18em; text-transform:uppercase;
  z-index:4; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-cue .line{width:1px; height:26px; background:rgb(var(--white-rgb) / 0.45); animation:pulse-line 2s ease-in-out infinite;}
@keyframes pulse-line{0%,100%{opacity:0.3;} 50%{opacity:1;}}

/* ---------- INNER PAGE HEAD / CTA ---------- */
.page-head{ padding:160px 32px 40px; max-width:820px; }
.page-head h1{ font-size:clamp(2.4rem,4.6vw,3.8rem); margin-top:16px; }
.page-head .sub{ margin-top:22px; max-width:640px; font-size:1.06rem; }
.page-head .sub a{ color:var(--gold); }
.page-cta{ padding:60px 32px 120px; text-align:center; }
.page-cta .sub{ margin-bottom:26px; }
.page-cta .hero-cta-row{ margin-top:0; justify-content:center; }

/* ---------- SECTION HEADS ---------- */
.symptoms-head, .testimonials-head, .pricing-head, .research-head{ max-width:680px; margin-bottom:52px; }
.symptoms-head h2, .testimonials-head h2, .pricing-head h2, .research-head h2{ margin-top:16px; }
.symptoms-head p, .testimonials-head p, .pricing-head p, .research-head p{ margin-top:18px; }
.section-head-center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- SECTION LINK ---------- */
.section-link{
  display:inline-block; margin-top:38px;
  font-family:'Quicksand', sans-serif; font-size:0.76rem; font-weight:600;
  letter-spacing:0.13em; text-transform:uppercase;
  color:var(--gold); text-decoration:none;
  border-bottom:1.5px solid rgb(var(--gold-rgb) / 0.3); padding-bottom:4px;
  transition:border-color .2s ease;
}
.section-link:hover{ border-bottom-color:var(--gold); }
.section-link-light{ color:var(--gold-light); border-bottom-color:rgb(var(--white-rgb) / 0.3); }
.section-link-light:hover{ border-bottom-color:var(--gold-light); }
.machine .section-link{ margin-top:28px; }

/* ---------- A-Z CONDITIONS ---------- */
.az{ padding:20px 32px 60px; }
.az-group{
  display:grid; grid-template-columns:90px 1fr; gap:36px;
  padding:48px 0; border-top:1px solid var(--line);
}
.az-group:first-child{ border-top:none; }
.az-letter{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:3rem; font-weight:300; color:var(--gold); line-height:1;
  position:sticky; top:110px; align-self:start;
}
.az-entries{ display:flex; flex-direction:column; gap:30px; }
.az-entry h4{ font-size:1.25rem; font-weight:500; margin-bottom:8px; }
.az-entry p{ font-size:0.97rem; max-width:660px; }
/* Per-entry citation. Deliberately quiet — it should read as a footnote under
   the entry, not compete with it. Only entries with a verified study get one;
   see research-citations.md, which is the source of truth for every link here. */
.az-cite{
  margin-top:10px; font-size:0.82rem; line-height:1.55;
  color:rgb(var(--ink-rgb) / 0.55);
}
.az-cite em{ font-style:italic; }
.az-cite a{ color:var(--gold); text-decoration:none; font-weight:600; white-space:nowrap; }
.az-cite a:hover{ text-decoration:underline; }

@media (max-width:880px){
  .az-group{ grid-template-columns:52px 1fr; gap:20px; padding:36px 0; }
  .az-letter{ font-size:2.1rem; }
}

/* ---------- ABOUT ---------- */
.about{ padding:110px 0; }
.about-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:64px; align-items:start; }
.about-photo{ aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; background:var(--sky-100); width:100%; box-shadow:var(--shadow-soft); }
.about-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.about h2{ margin-bottom:24px; }
.about p{ max-width:620px; margin-bottom:20px; }
.about-specs, .spec-row{ display:flex; gap:32px; margin-top:36px; flex-wrap:wrap; }
.spec{ border-left:2px solid rgb(var(--gold-rgb) / 0.35); padding-left:18px; }
.spec .n{ font-family:'Cormorant Garamond', Georgia, serif; font-size:2rem; font-weight:400; color:var(--gold); line-height:1.1; }
.spec .l{ font-family:'Quicksand', sans-serif; font-size:0.68rem; font-weight:600; opacity:0.6; text-transform:uppercase; letter-spacing:0.14em; }

/* ---------- CARD GRIDS ----------
   Real gaps and soft shadows instead of the old 1px-divider slabs —
   this is most of what makes the page read as "cleaner". */
.symptoms{ padding:104px 0; }
.symptom-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
.symptom-grid.grid-4{ grid-template-columns:repeat(4, 1fr); }
.symptom-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:30px 28px 34px;
  box-shadow:var(--shadow-soft);
  transition:transform .3s ease, box-shadow .3s ease;
}
.symptom-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.symptom-photo{ aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; background:var(--sky-100); margin-bottom:20px; }
.symptom-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.symptom-card .num{
  font-family:'Quicksand', sans-serif; font-size:0.7rem; font-weight:600;
  letter-spacing:0.16em; color:var(--gold);
}
.symptom-card h4{ font-size:1.2rem; font-weight:500; margin:12px 0 10px; }
.symptom-card p{ font-size:0.95rem; }

.symptoms-compact .symptom-card{ padding:24px 24px 28px; }
.symptoms-compact .symptom-photo{ aspect-ratio:16/10; margin-bottom:16px; }
.symptoms-compact .symptom-card h4{ font-size:1.12rem; }
.symptoms-compact .symptom-card p{ font-size:0.92rem; }
.symptoms-compact .symptom-card .num{ font-size:0.68rem; }

/* ---------- SCROLL REVEAL ----------
   Rise + grow, per the original brief's "grow in" note. Kept subtle
   enough to read as arriving rather than zooming. */
[data-reveal]{
  opacity:0;
  transform:translateY(26px) scale(0.96);
  transform-origin:center bottom;
  transition:opacity .85s cubic-bezier(.16,.84,.44,1), transform .85s cubic-bezier(.16,.84,.44,1);
  will-change:opacity, transform;
}
[data-reveal].in{ opacity:1; transform:translateY(0) scale(1); }
@media (max-width:880px){
  [data-reveal]{ transform:translateY(28px) scale(0.92); transition-duration:.7s; }
}

/* ---------- TEXT + IMAGE FEATURE ---------- */
.machine{ background:var(--white); color:var(--ink); padding:104px 0; }
.machine-grid{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:64px; align-items:center; }
.machine-photo{ border-radius:var(--radius); overflow:hidden; aspect-ratio:3/4; box-shadow:var(--shadow-soft); }
.machine-photo img{ width:100%; height:100%; object-fit:cover; }
.machine h2{ margin-bottom:22px; }
.machine p{ max-width:540px; margin-bottom:18px; }
.machine-compact .machine-grid{ grid-template-columns:0.6fr 1.4fr; }
.machine-compact .machine-photo{ max-width:340px; aspect-ratio:4/5; }
@media (max-width:880px){
  .machine-compact .machine-grid{ grid-template-columns:1fr; }
  .machine-compact .machine-photo{ max-width:100%; aspect-ratio:4/3; margin:0 auto; }
}

/* ---------- PRICING ---------- */
.pricing{ padding:104px 0; }
.package-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:52px; }
.package-grid.grid-3{ grid-template-columns:repeat(3,1fr); }
.package-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:36px 30px; display:flex; flex-direction:column;
  box-shadow:var(--shadow-soft);
  transition:transform .3s ease, box-shadow .3s ease;
}
.package-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
/* Now applied to every package card on Pricing and Book, so the row reads as
   one consistent set rather than two tiers. The "Most popular" / "Best value"
   eyebrows still do the differentiating. Not used on other-offerings.html,
   whose cards are a different kind of thing. */
.package-card.featured{ border-color:rgb(var(--gold-rgb) / 0.4); border-top:3px solid var(--gold); }
.package-card .eyebrow{ margin-bottom:16px; }
.package-card h4{ font-size:1.5rem; font-weight:500; margin-bottom:12px; }
.package-card p{ font-size:0.94rem; margin-bottom:22px; flex-grow:1; }
.package-card .price{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:2rem; font-weight:400; color:var(--ink); margin-bottom:2px; line-height:1.2;
}
.package-card .price span{ font-family:'Quicksand', sans-serif; font-size:0.72rem; font-weight:500; opacity:0.6; letter-spacing:0.06em; }
.package-card .btn{ margin-top:24px; align-self:flex-start; }

.offerings-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.offering-photo{ aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; margin-bottom:20px; background:var(--sky-100); }
.offering-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:820px){ .offerings-grid{ grid-template-columns:1fr; } }

/* ---------- TESTIMONIALS ---------- */
.testimonials{ padding:104px 0; }
.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testimonial-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 30px; display:flex; flex-direction:column; justify-content:space-between;
  min-height:230px; box-shadow:var(--shadow-soft);
}
.testimonial-card .stars{ color:var(--gold); letter-spacing:3px; margin-bottom:18px; font-size:0.95rem; }
.testimonial-card .placeholder-quote{ font-size:0.95rem; opacity:0.55; font-style:italic; }
.testimonial-card .quote{ font-size:0.97rem; line-height:1.7; }
.testimonial-card .who{
  margin-top:24px; font-family:'Quicksand', sans-serif;
  font-size:0.72rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; opacity:0.5;
}

/* ---------- ALSO OFFERED ---------- */
.also-offered{ padding:60px 0; background:var(--paper); border-top:1px solid var(--line); }
.also-offered .wrap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:26px; }
.also-offered .label{ max-width:420px; }
.also-offered .label .eyebrow{ display:block; margin-bottom:12px; }
.also-offered .label p{ font-size:0.94rem; }
.also-list{ display:flex; gap:12px; flex-wrap:wrap; }
.also-chip{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line-strong); padding:12px 20px;
  font-size:0.88rem; font-weight:500; border-radius:40px; background:var(--white);
}
.also-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); }

/* ===========================================================
   BACKED BY RESEARCH
   Every study here is verified in research-citations.md.
   =========================================================== */
.research{ padding:104px 0; }
.stat-row{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; margin-bottom:56px; }
.stat{
  background:var(--white); border:1px solid var(--line); border-top:3px solid var(--gold);
  border-radius:var(--radius); padding:30px 26px 32px; box-shadow:var(--shadow-soft);
}
.stat-n{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:3rem; font-weight:300; line-height:1;
  color:var(--gold); margin-bottom:14px; letter-spacing:0;
}
.stat-l{ font-size:0.88rem; line-height:1.6; color:rgb(var(--ink-rgb) / 0.7); }
.stat-l a{ color:rgb(var(--ink-rgb) / 0.5); text-decoration:underline; text-underline-offset:2px; }
.stat-l a:hover{ color:var(--gold); }

.citation-list{ list-style:none; display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; }
.citation{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 30px 30px; box-shadow:var(--shadow-soft);
}
.citation-tag{
  display:inline-block; font-family:'Quicksand', sans-serif;
  font-size:0.66rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gold-deep); background:rgb(var(--gold-rgb) / 0.1);
  border:1px solid rgb(var(--gold-rgb) / 0.25);
  padding:5px 12px; border-radius:30px; margin-bottom:16px;
}
.citation-finding{ font-size:0.96rem; line-height:1.65; margin-bottom:16px; }
.citation cite{
  display:block; font-style:normal;
  font-family:'Quicksand', sans-serif; font-size:0.8rem; line-height:1.7;
  color:rgb(var(--ink-rgb) / 0.55);
}
.citation cite em{ font-style:italic; }
.citation cite a{ color:var(--gold); text-decoration:none; font-weight:600; white-space:nowrap; }
.citation cite a:hover{ text-decoration:underline; }

.research-note{
  margin-top:36px; padding:20px 24px;
  background:var(--white); border-left:3px solid var(--gold);
  border-radius:var(--radius);
  font-size:0.9rem; line-height:1.65; color:rgb(var(--ink-rgb) / 0.65); max-width:820px;
}

/* ---------- CONTACT / BOOK ---------- */
.book{ padding:120px 0 104px; }
.book-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.book-stack{ max-width:900px; margin:0 auto; }
.book-stack .book-contact{ margin-top:64px; padding-top:56px; border-top:1px solid var(--line); }
/* packages block above the calendar on the Book page */
.book-packages{ margin-bottom:64px; padding-bottom:56px; border-bottom:1px solid var(--line); }
.book-packages .package-grid{ margin-top:34px; }
.book-packages .package-card .btn{ font-size:0.68rem; padding:13px 18px; }
.package-note{
  margin-top:30px; padding:20px 24px;
  background:var(--paper); border-left:3px solid var(--gold); border-radius:var(--radius);
  font-size:0.94rem; line-height:1.65;
}
.package-note strong{ font-weight:700; color:var(--ink); }
.book-calendar{ scroll-margin-top:100px; }
.book h2{ margin-bottom:18px; }
.book p.sub{ max-width:460px; margin-bottom:8px; }
.booking-widget{ border-radius:var(--radius); overflow:hidden; background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow-soft); }
.location-row{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.location-btn{
  flex:1; min-width:180px; text-align:center; padding:18px 20px;
  border:1px solid var(--line-strong); border-radius:var(--radius);
  text-decoration:none; color:var(--ink); background:var(--white);
  font-size:0.9rem; transition:border-color .2s, transform .2s;
}
.location-btn:hover{ border-color:var(--gold); transform:translateY(-2px); }
.location-btn .k{ display:block; font-family:'Quicksand', sans-serif; font-size:0.66rem; font-weight:600; opacity:0.5; text-transform:uppercase; letter-spacing:0.14em; margin-bottom:6px; }
.info-list{ margin-top:34px; }
/* align-items/text-align matter now the Location row runs to three lines */
.info-list div{ padding:18px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-start; gap:16px; font-size:0.94rem; }
.info-list div > span:last-child{ text-align:right; line-height:1.5; }
.info-list .directions{ display:block; margin-top:6px; font-size:0.82rem; color:var(--gold); font-weight:600; text-decoration:none; }
.info-list .directions:hover{ text-decoration:underline; }
.info-list div:last-child{ border-bottom:1px solid var(--line); }
.info-list .k{ opacity:0.5; font-family:'Quicksand', sans-serif; font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.14em; }

form{ display:flex; flex-direction:column; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; }
label{ font-family:'Quicksand', sans-serif; font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.14em; opacity:0.6; }
input, select, textarea{
  background:var(--white); border:1px solid var(--line-strong);
  padding:15px 16px; font-family:'Quicksand', sans-serif; font-size:0.96rem;
  color:var(--ink); border-radius:var(--radius);
}
input:focus, select:focus, textarea:focus{ outline:2px solid var(--gold); outline-offset:2px; border-color:var(--gold); }
textarea{ resize:vertical; min-height:110px; }
form .btn{ align-self:flex-start; border:none; margin-top:6px; background:var(--gold); color:var(--white); }
form .btn:hover{ background:var(--gold-deep); }

/* Scope note on the A–Z: makes clear the list is what people come in with,
   not a per-condition evidence claim. Deliberately set apart from the intro. */
.az-scope-note{
  margin-top:18px; padding:16px 20px;
  background:var(--paper); border-left:3px solid var(--gold); border-radius:var(--radius);
  font-size:0.92rem; line-height:1.6;
}
.az-scope-note a{ color:var(--gold); }

/* ---------- A–Z BRIDGE ---------- */
.az-bridge{ padding:88px 0; text-align:center; background:var(--paper); border-top:1px solid var(--line); }
.az-bridge h2{ margin-top:16px; }
.az-bridge .sub{ margin:20px auto 0; max-width:640px; }

/* ---------- GOOGLE REVIEWS CTA ---------- */
.reviews-cta{ padding:88px 0; text-align:center; border-top:1px solid var(--line); }
.reviews-cta h2{ margin-top:16px; }
.reviews-cta .sub{ margin:20px auto 0; max-width:620px; }

/* ---------- FINAL CTA BANNER ---------- */
.cta-banner{ padding:104px 0; text-align:center; }
.cta-banner h2{ margin-top:16px; }
.cta-banner .sub{ margin:20px auto 0; max-width:560px; }
.cta-banner-row{ justify-content:center; margin-top:34px; }
.cta-contact{
  display:flex; flex-wrap:wrap; justify-content:center; gap:16px 40px;
  margin-top:48px; padding-top:32px; border-top:1px solid var(--line);
  font-size:0.92rem;
}
.cta-contact .k{ display:block; font-size:0.66rem; font-weight:600; text-transform:uppercase; letter-spacing:0.14em; opacity:0.5; margin-bottom:4px; }

/* ---------- FOOTER ---------- */
footer{ background:var(--ink); color:rgb(var(--white-rgb) / 0.65); padding:60px 0 34px; font-size:0.88rem; }
.footer-grid{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; padding-bottom:32px; border-bottom:1px solid rgb(var(--white-rgb) / 0.14); margin-bottom:26px; }
.footer-brand{ display:flex; align-items:center; }
.footer-links{ display:flex; gap:26px; flex-wrap:wrap; }
.footer-links a{ text-decoration:none; opacity:0.8; font-weight:500; }
.footer-links a:hover{ opacity:1; color:var(--gold-light); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.76rem; opacity:0.5; }

/* ---------- FOCUS VISIBILITY ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;
}
.banner a:focus-visible, footer a:focus-visible{ outline-color:var(--gold-light); }

/* ---------- BLOG ---------- */
.blog-list{ display:flex; flex-direction:column; gap:22px; max-width:860px; }
.blog-item{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:36px 34px; box-shadow:var(--shadow-soft); transition:transform .3s ease, box-shadow .3s ease; }
.blog-item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.blog-item .meta{ font-family:'Quicksand', sans-serif; font-size:0.7rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); }
.blog-item h3{ font-size:1.7rem; font-weight:500; margin:12px 0 12px; }
.blog-item p{ font-size:0.98rem; margin-bottom:20px; max-width:680px; }
.blog-item a.more{ font-family:'Quicksand', sans-serif; font-size:0.74rem; font-weight:600; letter-spacing:0.13em; text-transform:uppercase; color:var(--gold); text-decoration:none; border-bottom:1.5px solid rgb(var(--gold-rgb) / 0.3); padding-bottom:3px; }
.blog-item a.more:hover{ border-color:var(--gold); }

.article{ max-width:740px; margin:0 auto; padding:160px 32px 40px; }
.article .meta{ font-family:'Quicksand', sans-serif; font-size:0.7rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); }
.article h1{ font-size:clamp(2.2rem,4.4vw,3.4rem); margin:16px 0 10px; }
.article .standfirst{ font-size:1.16rem; margin-bottom:36px; }
.article h2{ font-size:1.9rem; margin:42px 0 14px; }
.article p{ margin-bottom:20px; line-height:1.85; }
.article ul{ margin:0 0 20px 22px; line-height:1.8; color:rgb(var(--ink-rgb) / 0.78); }
.article li{ margin-bottom:10px; }
.article .disclaimer{ margin-top:44px; padding:20px 24px; border-left:3px solid var(--gold); background:var(--paper); border-radius:var(--radius); font-size:0.9rem; }
.article .back{ display:inline-block; margin-top:36px; font-family:'Quicksand', sans-serif; font-size:0.74rem; font-weight:600; letter-spacing:0.13em; text-transform:uppercase; color:var(--gold); text-decoration:none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1020px){
  .stat-row{ grid-template-columns:repeat(2, 1fr); }
  .symptom-grid.grid-4{ grid-template-columns:repeat(2, 1fr); }
}
/* The nav collapses well before the rest of the layout does: eight links plus
   the wide logo lockup plus the CTA need ~1100px. Below that they overlap the
   logo and wrap, so the burger takes over here rather than at 880. */
@media (max-width: 1100px){
  .nav-links{display:none;}
  nav .nav-cta{padding:10px 16px; font-size:0.66rem; margin-left:auto; margin-right:14px;}
  .nav-toggle{display:flex;}
}
@media (max-width: 880px){
  .hero-grid, .machine-grid, .book-grid, .about-grid{grid-template-columns:1fr;}
  .symptom-grid{grid-template-columns:1fr 1fr;}
  .package-grid, .package-grid.grid-3{grid-template-columns:1fr 1fr;}
  .testimonial-grid{grid-template-columns:1fr;}
  .citation-list{grid-template-columns:1fr;}
  .hero-photo, .about-photo{order:-1; max-width:300px; margin:0 auto;}
  .banner-hero{ min-height:auto; padding:130px 0 80px; }
  .banner-strip{ min-height:250px; padding:56px 0; }
  /* The hero scrim runs left-to-right on desktop because the text sits in the
     left column. On a phone the text spans the full width, so it needs a
     vertical wash instead or the lede lands on whatever the footage is doing. */
  .banner-hero .banner-scrim{
    background:linear-gradient(180deg, rgb(var(--ink-rgb) / 0.74), rgb(var(--ink-rgb) / 0.64));
  }
  .research, .symptoms, .pricing, .testimonials, .machine, .cta-banner{ padding:76px 0; }
}
@media (max-width: 560px){
  .wrap{ padding:0 22px; }
  /* lockup + Book now + burger only just fit at 375px — shrink the lockup */
  /* the wave lockup is 4.6:1, so 34px tall would still be ~157px wide —
     too much next to Book now and the burger at 375px. */
  .logo-lockup-img{ height:26px; }
  .logo-badge{ width:40px; height:40px; }
  .symptom-grid, .package-grid, .package-grid.grid-3{grid-template-columns:1fr;}
  .symptoms-compact .symptom-grid{grid-template-columns:1fr;}
  .stat-row{ grid-template-columns:1fr; }
  .stat-n{ font-size:2.4rem; }
  .cta-contact{ gap:16px 26px; }
  .btn{ padding:14px 24px; }
  .page-head{ padding:130px 22px 30px; }
}