@import url('assets/fonts.css');

/* ==========================================================================
   CORMEDICINE design system
   Purple #9850A8 is sampled from the original COR logo (assets/cor-logo.png).
   The logo's lime green was rejected as a page colour and replaced with jade:
   #2D6B54 on light backgrounds, #8FC9B0 on dark panels. Using the wrong jade
   for the background is the easiest way to break this palette.
   ========================================================================== */

:root {
  /* brand */
  --purple:       #9850a8;
  --purple-ink:   #7e3c8d;   /* AA-contrast purple for text on white */
  --purple-deep:  #4d2458;
  --purple-wash:  #f7eff9;
  --purple-line:  #e3cfe9;

  --jade:        #2d6b54;   /* deep jade - accents on light backgrounds */
  --jade-soft:   #8fc9b0;   /* light jade - accents on dark backgrounds */
  --jade-deep:   #1f4d3c;
  --jade-wash:   #eff6f2;

  /* neutrals */
  --ink:          #241b28;
  --ink-soft:     #5c5162;
  --ink-faint:    #8b8191;
  --paper:        #ffffff;
  --paper-soft:   #faf8fb;
  --rule:         #e9e5ec;

  /* type */
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* metrics */
  --gutter: 20px;
  --maxw: 1240px;
  --radius: 4px;
  --header-h: 72px;
}

@media (min-width: 760px)  { :root { --gutter: 40px; } }
@media (min-width: 1100px) { :root { --gutter: 56px; --header-h: 84px; } }

*, *::before, *::after { box-sizing: border-box; }

/* No overflow clamp on the root: `hidden` breaks position:sticky and `clip`
   clips the fixed nav drawer. The off-canvas drawer is kept from widening the
   document with visibility instead (see .nav below). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; }
p { margin: 0 0 1em; }
a { color: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--purple); color: #fff; padding: 12px 20px; font-weight: 600;
}
.skip-link:focus { left: 0; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

/* ---------- shared type ---------- */

.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--purple-ink); margin: 0 0 18px; display: flex; align-items: center; gap: 10px;
}

/* Nada, 14 Oct: the mission label should read larger. */
.mission-grid .eyebrow {
  font-size: clamp(14px, 1.5vw, 17px); letter-spacing: 0.14em; margin-bottom: 14px;
}

/* Long-form founder prose (The Co-Founder, Her Vision). */
.prose-wide { max-width: 68ch; }
.prose-wide p + p { margin-top: 1.1em; }
.eyebrow::before {
  content: ''; width: 22px; height: 2px; background: var(--jade); flex: none;
}
.eyebrow.plain::before { display: none; }

.h-display {
  font-size: clamp(2.1rem, 6.2vw, 4.1rem);
  letter-spacing: -0.035em; line-height: 1.02;
}
.h-section { font-size: clamp(1.75rem, 4.2vw, 2.9rem); }
.lead { font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: var(--ink-soft); max-width: 62ch; }


/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  letter-spacing: 0.02em; text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.btn .arw { transition: transform .2s ease; }
.btn:hover .arw { transform: translateX(3px); }

.btn-primary { background: var(--purple); color: #fff; }
.btn-primary:hover { background: var(--purple-deep); }

.btn-accent { background: var(--jade); color: #fff; }
.btn-accent:hover { background: var(--jade-deep); }

/* on the dark panels the accent button flips to the light jade, so it reads
   as a highlight rather than disappearing into the background */
.opening .btn-accent,
.science .btn-accent,
.clinic-copy .btn-accent { background: var(--jade-soft); color: #14382a; }
.opening .btn-accent:hover,
.science .btn-accent:hover,
.clinic-copy .btn-accent:hover { background: #fff; color: var(--jade-deep); }

.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--rule); }
.btn-ghost:hover { border-color: var(--purple); color: var(--purple-ink); }

.btn-light { background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.55); backdrop-filter: blur(6px); }
.btn-light:hover { background: #fff; color: var(--purple-deep); border-color: #fff; }

.link-u {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; text-decoration: none;
  color: var(--purple-ink); border-bottom: 2px solid var(--jade);
  padding-bottom: 3px; transition: gap .2s ease;
}
.link-u:hover { gap: 13px; }

/* ==========================================================================
   HEADER
   ========================================================================== */

.topbar {
  background: var(--purple-deep); color: #fff;
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 36px; }
.topbar a { text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: var(--jade-soft); }
.topbar .mid { color: rgba(255,255,255,.72); letter-spacing: 0.06em; text-transform: none; font-weight: 500; }
@media (max-width: 860px) { .topbar .mid { display: none; } }

.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.93); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.header .wrap { display: flex; align-items: center; gap: 20px; height: var(--header-h); }

.brand { flex: none; display: block; }
.brand img { height: 42px; width: auto; }
@media (min-width: 1100px) { .brand img { height: 50px; } }

.nav-shell { display: contents; }
/* Nada, 14 Oct: nav sits left beside the logo, Book a consultation stays right. */
.nav { margin-right: auto; display: flex; align-items: center; gap: 28px; }

/* Call Us and WhatsApp, modelled on the Biolite header she walked through. */
.header-contact { display: none; gap: 8px; flex: none; }
@media (min-width: 1041px) { .header-contact { display: inline-flex; } }
.hc-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule);
  font-size: 13px; font-weight: 700; text-decoration: none; color: var(--ink);
  white-space: nowrap; transition: background .15s ease, border-color .15s ease;
}
.hc-btn svg { flex: none; }
.hc-btn:hover { background: rgba(0,0,0,.04); }
.hc-wa { color: #0b7a46; border-color: rgba(11,122,70,.35); }
.hc-wa:hover { background: rgba(11,122,70,.08); border-color: rgba(11,122,70,.55); }
.nav a {
  font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink);
  position: relative; padding: 6px 0; white-space: nowrap;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--jade); transition: right .25s ease;
}
.nav a:hover::after, .nav a[aria-current="true"]::after { right: 0; }

.header .btn { padding: 12px 22px; font-size: 13px; }
/* the nav carries its own CTA for the mobile drawer only */
.nav .btn { display: none; }

.burger {
  display: none; margin-left: auto; width: 44px; height: 44px; border: 0;
  background: transparent; cursor: pointer; padding: 11px 9px; flex-direction: column;
  justify-content: space-between;
}
.burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 1040px) {
  .burger { display: flex; }
  .header > .wrap > .btn { display: none; }

  /* backdrop-filter would make .header the containing block for the fixed
     drawer inside it, clipping it to the header's height. The header is
     effectively opaque here anyway. */
  .header { backdrop-filter: none; background: #fff; }
  /* the brand and the toggle stay above the drawer so it can always be closed */
  .brand, .burger { position: relative; z-index: 2; }

  /* viewport-sized frame: contributes no overflow of its own and clips the
     drawer parked outside it */
  .nav-shell {
    display: block; position: fixed; inset: 0; z-index: 1;
    overflow: hidden; pointer-events: none;
  }

  .nav {
    position: absolute; top: 0; right: 0; bottom: 0; left: auto;
    width: min(340px, 86vw); pointer-events: auto;
    background: #fff; border-left: 1px solid var(--rule);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px 24px 32px;
    overflow-y: auto; box-shadow: -18px 0 50px rgba(36,27,40,.13);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
  }
  .nav[data-open="true"] { transform: translateX(0); }
  .nav a { padding: 17px 0; border-bottom: 1px solid var(--rule); font-size: 17px; }
  .nav a::after { display: none; }
  .nav .btn { display: inline-flex; margin-top: 22px; justify-content: center; border-bottom: 0; }
}

.nav-scrim {
  position: fixed; inset: 0; background: rgba(36,27,40,.42); z-index: 80;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.nav-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   01  OPENING (video first, per Razan's notes)
   ========================================================================== */

.opening {
  position: relative; min-height: min(88vh, 760px);
  display: flex; align-items: flex-end;
  background: var(--purple-deep); overflow: hidden; isolation: isolate;
}
@media (min-width: 900px) { .opening { min-height: min(92vh, 900px); } }

.opening video, .opening .poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.opening::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(24,11,29,.94) 0%, rgba(24,11,29,.7) 34%, rgba(24,11,29,.34) 68%, rgba(24,11,29,.52) 100%),
    linear-gradient(to right, rgba(60,25,70,.62), rgba(60,25,70,.1) 68%);
}

.opening .wrap { padding-top: 90px; padding-bottom: 42px; width: 100%; }

.opening-kicker {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: #fff; margin-bottom: 22px;
}
.opening-kicker::before { content: ''; width: 26px; height: 2px; background: var(--jade-soft); }

.opening h1 {
  color: #fff; font-size: clamp(2.3rem, 7.4vw, 5rem); letter-spacing: -0.04em;
  line-height: 1; max-width: 16ch; text-wrap: balance;
}
.opening h1 .g { color: var(--jade-soft); }

.opening p.opening-modalities {
  color: rgba(255,255,255,.82); font-size: clamp(.82rem, 1.5vw, .95rem);
  font-weight: 600; letter-spacing: 0.04em; max-width: 52ch;
  margin: 18px 0 0; line-height: 1.6;
}
.opening p.opening-modalities span { color: var(--jade-soft); margin: 0 4px; }

.opening p.sub {
  color: rgba(255,255,255,.88); font-size: clamp(1rem, 1.9vw, 1.22rem);
  max-width: 46ch; margin: 22px 0 14px; line-height: 1.55;
}

.opening p.opening-founder {
  color: rgba(255,255,255,.72); font-size: clamp(.9rem, 1.5vw, 1rem);
  max-width: 46ch; margin: 0 0 32px; line-height: 1.55;
}

.opening-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.opening-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-top: 46px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.75); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.opening-foot a { text-decoration: none; display: inline-flex; align-items: center; gap: 9px; }
.opening-foot a:hover { color: #fff; }

.vid-toggle {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.4);
  color: #fff; border-radius: 999px; padding: 8px 16px; cursor: pointer;
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; display: inline-flex; gap: 8px; align-items: center;
}
.vid-toggle:hover { background: rgba(255,255,255,.26); }

.scroll-cue { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */

.section { padding: clamp(62px, 9vw, 120px) 0; position: relative; }
.section.soft { background: var(--paper-soft); }
.section.washed { background: var(--purple-wash); }

/* the catalog's cell/DNA watermark, used as real texture */
.section.textured { background: var(--paper-soft); }
.section.textured::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('assets/cor-texture-cells.jpg') center/cover no-repeat;
  opacity: .5; mix-blend-mode: multiply;
}
.section.textured > * { position: relative; }

.section-head { margin-bottom: clamp(36px, 5vw, 60px); }
.section-head h2 { max-width: 20ch; text-wrap: balance; }
.section-head .lead { margin-top: 20px; }

@media (min-width: 900px) {
  .section-head.split { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 56px; align-items: end; }
  .section-head.split .lead { margin-top: 0; }
}

/* ==========================================================================
   02  ABOUT STEM CELLS (directly under the video)
   ========================================================================== */

.stem { background: var(--paper); }

.stem-grid { display: grid; gap: 40px; }
@media (min-width: 980px) {
  .stem-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.12fr); gap: 72px; align-items: start; }
}

.stem h2 { font-size: clamp(1.9rem, 4.4vw, 3.1rem); text-wrap: balance; }
.stem h2 em { font-style: normal; color: var(--purple-ink); }

.stem-body > p { color: var(--ink-soft); font-size: 1.06rem; }
.stem-body > p:first-of-type { color: var(--ink); font-size: clamp(1.08rem, 1.9vw, 1.28rem); line-height: 1.55; }

.stem-defs { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin-top: 8px; }
.stem-def { background: #fff; padding: 22px 24px; }
.stem-def h3 { font-size: 1.02rem; letter-spacing: -0.01em; margin-bottom: 7px; color: var(--jade-deep); }
.stem-def p { margin: 0; font-size: 0.93rem; color: var(--ink-soft); line-height: 1.6; }

.pending {
  margin-top: 30px; padding: 20px 22px; border-radius: var(--radius);
  background: var(--jade-wash); border-left: 3px solid var(--jade);
  font-size: 0.9rem; color: #3f5410; line-height: 1.6;
}
.pending strong { display: block; font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 6px; color: var(--jade-deep); }

.stem-figure { position: relative; }
.stem-figure img { width: 100%; border-radius: var(--radius); aspect-ratio: 3/4; object-fit: cover; }
/* the laboratory photograph is now 1200px wide, so the old 380px cap (which
   existed to avoid upscaling a 402px image into softness) is no longer needed */
.stem-figure { max-width: 460px; }
.stem-figure figcaption {
  margin-top: 12px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}

/* ==========================================================================
   03  THE THREE COR PREPARATIONS
   ========================================================================== */

.sig-grid { display: grid; gap: 20px; }
@media (min-width: 820px) { .sig-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* ==========================================================================
   UNIT BANDS  the catalog's full-bleed divider pages
   ========================================================================== */

.unit-band {
  position: relative; overflow: hidden; color: #fff;
  padding: clamp(50px, 7vw, 86px) 0;
}
/* three depths rather than three hues, so the units read as one family */
.unit-band.plum   { background: var(--purple-deep); }
@media (max-width: 720px) { .unit-band::after { display: none; } }

/* ---------- unit body ---------- */

.unit-intro { display: grid; gap: 32px; margin-bottom: clamp(36px, 5vw, 56px); }
@media (min-width: 900px) {
  .unit-intro { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 60px; align-items: center; }
}

/* treatment groups */
.tgroup + .tgroup { margin-top: 44px; }
@media (min-width: 720px) { .tlist { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .tlist.three { grid-template-columns: repeat(3, 1fr); } }

/* IV menu  Razan's notes, in full */
.iv-note { font-size: 0.92rem; color: var(--ink-soft); max-width: 62ch; margin: 0 0 24px; }

/* botox application areas  Razan: photos unnecessary, areas only */
.areas { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.areas li {
  font-size: 0.82rem; font-weight: 600; padding: 6px 13px; border-radius: 999px;
  background: var(--purple-wash); color: var(--purple-deep); border: 1px solid var(--purple-line);
}

/* ==========================================================================
   SCIENCE  Dr. Nada
   ========================================================================== */

.science { background: var(--purple-deep); color: #fff; position: relative; overflow: hidden; }
.science .wrap { position: relative; z-index: 1; }
.sci-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 940px) { .sci-grid { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 68px; } }

.sci-photo { position: relative; }
.sci-photo img { width: 100%; border-radius: var(--radius); aspect-ratio: 4/5; object-fit: cover; object-position: top center; }
.sci-photo .tagline {
  position: absolute; left: 0; bottom: 0; right: 0; padding: 54px 22px 20px;
  background: linear-gradient(to top, rgba(20,8,25,.95) 12%, rgba(20,8,25,.72) 52%, transparent);
  border-radius: 0 0 var(--radius) var(--radius);
}
.sci-photo .tagline strong { display: block; font-size: 1.12rem; color: #fff; margin-top: 5px; }
.sci-photo .tagline span { font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--jade-soft); font-weight: 700; }

.science h2 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); color: #fff; margin-bottom: 22px; }
.science h2 .g { color: var(--jade-soft); }
.science .eyebrow { color: rgba(255,255,255,.8); }
.science .eyebrow::before { background: var(--jade-soft); }
.science p { color: rgba(255,255,255,.82); }

.sci-stats { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0; }
.sci-stat { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.17); border-radius: var(--radius); padding: 15px 20px; }
.sci-stat b { display: block; font-size: 1.6rem; color: var(--jade-soft); letter-spacing: -0.03em; line-height: 1; }
.sci-stat span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.68); font-weight: 600; }

.science blockquote {
  margin: 28px 0 26px; padding-left: 22px; border-left: 3px solid var(--jade-soft);
  font-size: clamp(1.1rem, 2.1vw, 1.42rem); line-height: 1.4; color: #fff;
  font-weight: 500; letter-spacing: -0.015em;
}
.science blockquote cite { display: block; margin-top: 12px; font-style: normal; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--jade-soft); font-weight: 700; }

.sci-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   JOURNAL  real Instagram content
   ========================================================================== */

.jfilters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.jfilters button {
  font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 9px 17px; border-radius: 999px; border: 1px solid var(--rule);
  background: #fff; color: var(--ink-soft); transition: all .2s ease;
}
.jfilters button:hover { border-color: var(--purple-line); color: var(--purple-ink); }
.jfilters button[aria-pressed="true"] { background: var(--purple); border-color: var(--purple); color: #fff; }

.jgrid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 256px), 1fr)); }

.jcard {
  text-align: left; padding: 0; cursor: pointer; font-family: var(--sans);
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.jcard:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(77,36,88,.1); border-color: var(--purple-line); }
.jcard .ph { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--purple-wash); }
.jcard .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.jcard:hover .ph img { transform: scale(1.045); }
.jcard .fmt {
  position: absolute; left: 11px; top: 11px; background: rgba(28,14,34,.78);
  color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 5px 9px; border-radius: 3px; backdrop-filter: blur(4px);
}
.jcard .jb { padding: 17px 18px 19px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.jcard .tp { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jade-deep); }
.jcard h3 { font-size: 1.04rem; letter-spacing: -0.015em; }
.jcard p { font-size: 0.86rem; color: var(--ink-soft); margin: 0; line-height: 1.55; }
.jcard .dt { margin-top: auto; padding-top: 11px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }

.jfoot { margin-top: 26px; font-size: 0.84rem; color: var(--ink-faint); }

/* ==========================================================================
   CLINIC  "Happiness is health"
   ========================================================================== */

.clinic { padding: 0; background: var(--ink); }
.clinic-grid { display: grid; }
@media (min-width: 940px) { .clinic-grid { grid-template-columns: 1fr 1fr; } }

.clinic-photo { position: relative; min-height: 320px; }
/* object-position keeps the "Happiness is health" lettering in frame */
.clinic-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 85% center; }
@media (max-width: 939px) { .clinic-photo { aspect-ratio: 4/3; min-height: 0; } }

.clinic-copy {
  background: var(--ink); color: #fff;
  padding: clamp(50px, 7vw, 94px) var(--gutter);
  display: flex; flex-direction: column; justify-content: center;
}
@media (min-width: 940px) { .clinic-copy { padding-right: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); } }

.clinic-copy .eyebrow { color: rgba(255,255,255,.75); }
.clinic-copy .eyebrow::before { background: var(--jade-soft); }
.clinic-copy h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); color: #fff; }
.clinic-copy h2 .g { color: var(--jade-soft); }
.clinic-copy p { color: rgba(255,255,255,.76); max-width: 48ch; }
.motto {
  margin: 26px 0 30px; padding: 18px 22px; border-left: 3px solid var(--jade-soft);
  background: rgba(143,201,176,.10);
  font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 600; letter-spacing: -0.02em; color: #fff;
}
.motto span { display: block; margin-top: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jade-soft); }

/* ==========================================================================
   VISIT  address, map, booking
   ========================================================================== */

.visit-grid { display: grid; gap: 40px; }
@media (min-width: 940px) { .visit-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 60px; align-items: start; } }

.vrows { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin-bottom: 26px; }
.vrow { background: #fff; padding: 18px 22px; display: flex; gap: 16px; align-items: flex-start; }
.vrow .k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); width: 86px; flex: none; padding-top: 3px; }
.vrow .v { font-size: 0.97rem; color: var(--ink); }
.vrow .v a { color: var(--purple-ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--purple-line); }
.vrow .v small { display: block; color: var(--ink-faint); font-size: 0.8rem; margin-top: 3px; }

.mapbox {
  position: relative; border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; background: var(--purple-wash); aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px;
}
.mapbox .inner { max-width: 34ch; }
.mapbox .pin { width: 44px; height: 44px; margin: 0 auto 16px; color: var(--purple); }
.mapbox h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--purple-deep); }
.mapbox p { font-size: 0.87rem; color: var(--ink-soft); margin: 0; }

/* form */
.cform { display: grid; gap: 22px; }
/* each field is its own grid so the label sits close to its control, and the
   space between fields is clearly larger than the space inside one */
.cform > div { display: grid; gap: 8px; }
.cform label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.cform label span { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-faint); }
.cform input, .cform select, .cform textarea {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink);
  padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: #fff;
}
.cform input:focus, .cform select:focus, .cform textarea:focus { border-color: var(--purple); outline: none; box-shadow: 0 0 0 3px var(--purple-wash); }
.cform textarea { resize: vertical; min-height: 84px; }
.cform .note { font-size: 0.8rem; color: var(--ink-faint); margin: 0; line-height: 1.5; }
.cform .btn { justify-content: center; }
#form-status { font-size: 0.87rem; font-weight: 600; color: var(--jade-deep); margin: 0; min-height: 1.2em; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-list { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.faq-list details { background: #fff; }
.faq-list summary {
  cursor: pointer; list-style: none; padding: 20px 24px; font-weight: 600; font-size: 1.01rem;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; color: var(--purple); font-size: 1.4rem; font-weight: 400; flex: none; transition: transform .22s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details > p { padding: 0 24px 22px; margin: 0; color: var(--ink-soft); font-size: 0.94rem; max-width: 70ch; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer { background: var(--ink); color: rgba(255,255,255,.72); padding: clamp(50px, 6vw, 76px) 0 0; }
.fgrid { display: grid; gap: 34px; padding-bottom: 44px; }
@media (min-width: 760px) { .fgrid { grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; } }

.fbrand img { height: 54px; background: #fff; padding: 9px 13px; border-radius: var(--radius); }
.fbrand p { margin: 16px 0 0; font-size: 0.87rem; max-width: 30ch; line-height: 1.6; }
footer h4 { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--jade-soft); margin-bottom: 15px; }
footer nav { display: grid; gap: 10px; }
footer a { text-decoration: none; font-size: 0.92rem; }
footer a:hover { color: var(--jade-soft); }

.fbot {
  border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0 26px;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  font-size: 0.8rem; color: rgba(255,255,255,.5);
}
.fbot button {
  background: none; border: 0; color: rgba(255,255,255,.5); cursor: pointer;
  font-family: var(--sans); font-size: 0.8rem; text-decoration: underline; padding: 0;
}
.fbot button:hover { color: var(--jade-soft); }

/* ==========================================================================
   FLOATING CONTACT + DIALOGS
   ========================================================================== */

.float-wa {
  position: fixed; right: 16px; bottom: 16px; z-index: 70;
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  background: var(--purple); color: #fff; font-weight: 700; font-size: 13.5px;
  padding: 13px 19px; border-radius: 999px; box-shadow: 0 10px 30px rgba(36,27,40,.25);
  transition: transform .25s ease, opacity .25s ease;
}
.float-wa:hover { transform: translateY(-2px); }
/* kept out of the way until the opening section has been scrolled past,
   where it would otherwise sit on top of the video controls */
.float-wa[data-hidden="true"] { opacity: 0; pointer-events: none; transform: translateY(14px); }
.float-wa svg { width: 19px; height: 19px; flex: none; }
@media (max-width: 560px) { .float-wa span { display: none; } .float-wa { padding: 14px; } }

dialog {
  border: 0; border-radius: var(--radius); padding: 0; max-width: 620px; width: calc(100vw - 32px);
  max-height: 86vh; color: var(--ink); box-shadow: 0 30px 80px rgba(36,27,40,.3);
}
dialog::backdrop { background: rgba(36,27,40,.6); backdrop-filter: blur(3px); }
.dlg-body { padding: 32px 30px 30px; overflow-y: auto; max-height: 86vh; }
.dlg-close {
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px;
  border: 0; border-radius: 50%; background: var(--paper-soft); color: var(--ink-soft);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.dlg-close:hover { background: var(--purple-wash); color: var(--purple-deep); }
dialog h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin-bottom: 14px; }
dialog h3 { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple-ink); margin: 24px 0 12px; }
dialog p { font-size: 0.96rem; color: var(--ink-soft); }
dialog ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 9px; }
dialog ul li { font-size: 0.93rem; color: var(--ink-soft); padding-left: 19px; position: relative; }
dialog ul li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--jade); }
dialog blockquote { margin: 0 0 16px; padding-left: 18px; border-left: 3px solid var(--jade); font-size: 1rem; color: var(--ink); line-height: 1.55; }
.dlg-src { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; color: var(--purple-ink); text-decoration: none; margin-right: 16px; }
.dlg-src:hover { text-decoration: underline; }
.dlg-foot { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.dlg-note { font-size: 0.8rem; color: var(--ink-faint); margin: 16px 0 0; line-height: 1.5; }

/* ==========================================================================
   MOTION
   ========================================================================== */

[data-rise] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
[data-rise].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-rise] { opacity: 1 !important; transform: none !important; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   MULTI-PAGE COMPONENTS
   ========================================================================== */

/* ---------- dropdown navigation ---------- */
.has-sub { position: relative; }
.sub-toggle {
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink);
  background: none; border: 0; cursor: pointer; padding: 6px 0;
  display: inline-flex; align-items: center; gap: 7px; position: relative;
}
.sub-toggle svg { width: 10px; height: 6px; transition: transform .2s ease; }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.sub-toggle::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--jade); transition: right .25s ease;
}
.has-sub:hover .sub-toggle::after, .sub-toggle[data-on="true"]::after { right: 0; }

.submenu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 290px; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: 0 22px 54px rgba(36,27,40,.14); padding: 8px; display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.has-sub:hover .submenu, .has-sub:focus-within .submenu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
.submenu a {
  padding: 11px 14px; border-radius: 3px; font-size: 14px; font-weight: 600;
  text-decoration: none; color: var(--ink); white-space: nowrap;
}
.submenu a::after { display: none; }
.submenu a:hover { background: var(--purple-wash); color: var(--purple-deep); }
.submenu a[aria-current="page"] { background: var(--purple-wash); color: var(--purple-deep); }
.nav a[aria-current="page"]::after { right: 0; }

@media (max-width: 1040px) {
  .has-sub { display: block; border-bottom: 1px solid var(--rule); }
  .sub-toggle { width: 100%; justify-content: space-between; padding: 17px 0; font-size: 17px; }
  .sub-toggle::after { display: none; }
  .submenu {
    position: static; transform: none; min-width: 0; border: 0; box-shadow: none;
    padding: 0 0 12px 14px; opacity: 1; visibility: visible; display: none;
    border-left: 2px solid var(--purple-line); margin-left: 2px;
  }
  .has-sub[data-open="true"] .submenu { display: grid; }
  .has-sub:hover .submenu, .has-sub:focus-within .submenu { transform: none; }
  .submenu a { font-size: 15px; padding: 11px 12px; white-space: normal; }
}
@media (min-width: 1041px) { .header-cta { display: inline-flex; } }
@media (max-width: 1040px) { .header-cta { display: none; } }

/* ---------- page hero ---------- */
.page-hero { background: var(--purple-wash); padding: clamp(44px, 6vw, 76px) 0; }
.ph-grid { display: grid; gap: 34px; align-items: center; }
@media (min-width: 940px) { .ph-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 56px; } }
.ph-copy h1 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -0.035em; max-width: 17ch; text-wrap: balance; }
.ph-copy .lead { margin: 20px 0 28px; }
.ph-img img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: var(--radius); }

/* ---------- prose and boxes ---------- */
.prose { max-width: 70ch; }
.prose p { font-size: clamp(1.03rem, 1.8vw, 1.17rem); color: var(--ink-soft); line-height: 1.7; }
.prose p:first-child { color: var(--ink); font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.55; }

.why-box {
  margin-top: 36px; background: var(--purple-wash); border: 1px solid var(--purple-line);
  border-radius: var(--radius); padding: 28px 30px; max-width: 70ch;
}
.why-box.wide { max-width: none; }
.why-box h2 { font-size: 1.15rem; margin-bottom: 16px; color: var(--purple-deep); }
.why-box p { margin: 0; color: var(--ink-soft); }
.pending-box { background: var(--jade-wash); border-color: #cfe4d9; }
.pending-box h2 { color: var(--jade-deep); }

ul.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
ul.ticks li { position: relative; padding-left: 26px; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; }
ul.ticks li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 13px; height: 8px;
  border-left: 2px solid var(--jade); border-bottom: 2px solid var(--jade);
  transform: rotate(-45deg); border-radius: 1px;
}

/* ---------- treatment groups ---------- */
.tgroup2 + .tgroup2 { margin-top: clamp(50px, 7vw, 86px); }
.tgroup2-head { margin-bottom: 28px; padding-bottom: 18px; border-bottom: 2px solid var(--rule); }
.tgroup2-head h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
.tgroup2-head .lead { margin-top: 14px; font-size: 1rem; }

.tgrid { display: grid; gap: 18px; }
@media (min-width: 860px) { .tgrid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }

.tcard2 {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 28px 28px 26px; display: flex; flex-direction: column; gap: 14px;
  transition: border-color .22s ease, box-shadow .22s ease;
}
.tcard2:hover { border-color: var(--purple-line); box-shadow: 0 16px 40px rgba(77,36,88,.07); }
.tcard2 h3 { font-size: 1.22rem; color: var(--purple-deep); letter-spacing: -0.02em; }
.tcard2 > p { margin: 0; font-size: 0.97rem; color: var(--ink-soft); line-height: 1.65; }
.tcard2 .link-u { align-self: flex-start; margin-top: 4px; }

.plan {
  margin: 4px 0 0 !important; padding: 12px 15px; background: var(--paper-soft);
  border-radius: 3px; font-size: 0.87rem !important; color: var(--ink-soft) !important;
}
.plan strong {
  display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--purple-ink); margin-bottom: 4px; font-weight: 700;
}
.flag {
  margin: 0 !important; padding: 12px 15px; border-left: 3px solid var(--purple);
  background: var(--purple-wash); border-radius: 0 3px 3px 0;
  font-size: 0.86rem !important; color: var(--purple-deep) !important; font-weight: 600; line-height: 1.5;
}

/* ---------- modality cards ---------- */
.mod-grid { display: grid; gap: 20px; }
@media (min-width: 880px) { .mod-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.mod-card {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 30px 28px; display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.mod-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(to right, var(--purple), var(--jade));
}
.mod-card h3 { font-size: 1.4rem; color: var(--purple-deep); margin-bottom: 5px; }
.mod-card .sub {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--jade-deep); margin: 0 0 14px;
}
.mod-card p { margin: 0 0 14px; font-size: 0.94rem; color: var(--ink-soft); line-height: 1.62; }
.mod-card p:last-child { margin-bottom: 0; }
.mod-card .mod-best {
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--purple-ink); margin: 2px 0 10px;
}
.mod-card ul { margin-bottom: 0; }

/* ---------- service grid on the home page ---------- */
.svc-grid { display: grid; gap: 20px; }
@media (min-width: 720px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.svc {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; display: flex; flex-direction: column;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.svc:hover { transform: translateY(-3px); box-shadow: 0 20px 46px rgba(77,36,88,.1); border-color: var(--purple-line); }
.svc-img { aspect-ratio: 16/10; overflow: hidden; background: var(--purple-wash); }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.svc:hover .svc-img img { transform: scale(1.05); }
.svc-body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.svc-n { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--jade-deep); }
.svc h3 { font-size: 1.2rem; letter-spacing: -0.02em; color: var(--ink); }
.svc p { margin: 0; font-size: 0.91rem; color: var(--ink-soft); line-height: 1.6; }
.svc .more {
  margin-top: auto; padding-top: 14px; font-size: 12.5px; font-weight: 700;
  color: var(--purple-ink); display: inline-flex; align-items: center; gap: 7px;
}
.svc .arw { transition: transform .2s ease; }
.svc:hover .more .arw { transform: translateX(4px); }

/* ---------- full width strip ---------- */
.strip { background: var(--purple-deep); color: #fff; padding: clamp(40px, 5vw, 62px) 0; }
.strip-grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 860px) { .strip-grid { grid-template-columns: 1fr auto; gap: 46px; } }
.strip h2 { font-size: clamp(1.3rem, 2.6vw, 1.85rem); color: #fff; }
.strip p { margin: 12px 0 0; color: rgba(255,255,255,.8); max-width: 62ch; font-size: 0.98rem; }

/* ---------- science page ---------- */
.mech-list { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.mech { background: #fff; padding: 24px 26px; display: grid; gap: 7px; }
@media (min-width: 820px) { .mech { grid-template-columns: minmax(0,.4fr) minmax(0,1fr); gap: 32px; align-items: start; } }
.mech h3 { font-size: 1.05rem; color: var(--purple-deep); }
.mech p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.6; }

.ev-list { display: grid; gap: 16px; }
.ev { background: #fff; border: 1px solid var(--rule); border-left: 3px solid var(--jade); border-radius: var(--radius); padding: 24px 26px; }
.ev-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.ev h3 { font-size: 1.12rem; color: var(--ink); }
.ev-state {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--jade-deep);
  background: var(--jade-wash); padding: 5px 11px; border-radius: 999px;
}
@media (min-width: 620px) { .ev-state { white-space: nowrap; } }
.ev p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.65; }

.disclaimer {
  margin: 30px 0 0; padding: 20px 22px; background: #fff; border: 1px solid var(--rule);
  border-radius: var(--radius); font-size: 0.87rem; color: var(--ink-soft); line-height: 1.6;
}

/* ---------- about page ---------- */
.mission-grid { display: grid; gap: 34px; }
@media (min-width: 940px) { .mission-grid { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 60px; } }
.mission-grid .ticks { margin-top: 22px; }
.stats-note { font-size: 0.82rem !important; color: rgba(255,255,255,.6) !important; margin: 14px 0 22px !important; }

.why-grid { display: grid; gap: 18px; }
@media (min-width: 760px) { .why-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
.why-item { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 26px 28px; }
.why-item h3 { font-size: 1.1rem; color: var(--purple-deep); margin-bottom: 9px; }
.why-item p { margin: 0; font-size: 0.94rem; color: var(--ink-soft); line-height: 1.62; }

.steps { display: grid; gap: 18px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.step { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px 24px 26px; }
.step span {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--purple); color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; margin-bottom: 14px;
}
.step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.step p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; }

/* ---------- IV menu ---------- */
.menu-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.menu-item {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 3px;
}
.mi-n { font-size: 0.98rem; font-weight: 700; color: var(--purple-deep); letter-spacing: -0.01em; }
.mi-d { font-size: 0.81rem; color: var(--ink-faint); line-height: 1.45; }

/* ---------- closing call to action ---------- */
.closing { background: var(--ink); color: #fff; padding: clamp(54px, 7vw, 88px) 0; text-align: center; }
.closing h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); color: #fff; max-width: 20ch; margin: 0 auto; text-wrap: balance; }
.closing p { margin: 18px auto 30px; color: rgba(255,255,255,.76); max-width: 54ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.closing .btn-ghost { border-color: rgba(255,255,255,.4); color: #fff; }
.closing .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }
.closing .btn-accent { background: var(--jade-soft); color: #14382a; }
.closing .btn-accent:hover { background: #fff; color: var(--jade-deep); }

/* ---------- footer additions ---------- */
.fmotto { color: var(--jade-soft) !important; font-weight: 600; margin-top: 12px !important; }
.fdisc {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; margin: 0 0 20px;
  font-size: 0.79rem; color: rgba(255,255,255,.45); line-height: 1.6; max-width: 95ch;
}

/* ---------- stem figure on the home page ---------- */
.stem-figure { margin: 32px 0 0; }

/* a hero with no photograph centres instead of leaving a gap */
.ph-grid.single { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.ph-grid.single .ph-copy h1 { max-width: 20ch; }
.ph-grid.single .ph-copy .lead { margin-left: auto; margin-right: auto; }
.ph-grid.single .eyebrow { justify-content: center; }

/* ==========================================================================
   READABILITY
   Micro-labels (eyebrows, dates, card tags) stay small on purpose, they are
   tracked uppercase and read as labels. Anything that is actual reading copy
   is lifted on phones, where the smallest sizes were hardest to read.
   ========================================================================== */

.jcard .fmt { font-size: 10.5px; }

@media (max-width: 760px) {
  .mi-d        { font-size: 0.88rem; }
  .fdisc       { font-size: 0.85rem; }
  .dlg-note    { font-size: 0.87rem; }
  .cform .note { font-size: 0.87rem; }
  .vrow .v small { font-size: 0.86rem; }
  .stats-note  { font-size: 0.87rem !important; }
  .jcard .tp   { font-size: 11px; }
  .jcard .dt   { font-size: 11px; }
  .svc-n       { font-size: 11.5px; }
  .eyebrow     { font-size: 11.5px; }
}

/* The IV photograph is a tall portrait frame. In the 16:10 service card a
   centred crop loses the drip chamber, so that one image is anchored higher. */
.svc-img img[src$="iv-infusion-equipment.jpg"] { object-position: center 32%; }

/* ---------- location map ---------- */
.mapbox {
  margin: 26px 0 0; border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; background: var(--purple-wash); display: block; aspect-ratio: auto;
  padding: 0; align-items: stretch; text-align: left;
}
.mapbox iframe { width: 100%; height: 320px; border: 0; display: block; filter: saturate(.92); }
.mapbox figcaption {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  padding: 14px 18px; background: #fff; border-top: 1px solid var(--rule);
  font-size: 0.85rem; color: var(--ink-soft);
}
.mapbox figcaption span { flex: 1 1 auto; min-width: 12ch; }
.mapbox figcaption a { color: var(--purple-ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.mapbox figcaption a:hover { text-decoration: underline; }
@media (min-width: 940px) { .mapbox iframe { height: 380px; } }

/* ---------- footer address column ---------- */
@media (min-width: 760px) { .fgrid { grid-template-columns: 1.3fr 1fr 1fr 1.1fr; } }
.faddr address { font-style: normal; font-size: 0.92rem; line-height: 1.65; margin-bottom: 10px; }
.faddr > a { display: block; font-size: 0.88rem; margin-bottom: 14px; }
.fhours { margin: 0 0 14px; font-size: 0.88rem; display: grid; grid-template-columns: auto; gap: 2px; }
.fhours dt { color: rgba(255,255,255,.55); }
.fhours dd { margin: 0 0 7px; }

/* ---------------------------------------------------------------- find us
   Nada, 13 Oct, from the Biolite walkthrough: a clear map, the address, and a
   way to call, message or read reviews, all on the home page. */
.findus-grid {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: start;
}
@media (max-width: 900px) { .findus-grid { grid-template-columns: 1fr; } }

.findus-side { display: flex; flex-direction: column; gap: 22px; }
.findus-block h3 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--purple-ink); margin: 0 0 8px;
}
.findus-block p { margin: 0 0 10px; line-height: 1.6; }
.findus-note { color: var(--muted); font-size: .93rem; }
.findus-actions { display: flex; flex-wrap: wrap; gap: 10px; }