/* ============================================================
   Better Life Infusions — homepage
   Figma artboard: 1600px  |  content: 1420px  |  gutter: 90px
   Every display size is clamp(min, (figma/16)vw, figma)
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
/* Inter 18pt — the text optical size, which is what the file renders at these sizes */
@font-face{font-family:'Inter';src:url('../fonts/Inter-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Swarsh Daisy';src:url('../fonts/SwarshDaisy-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Swarsh Daisy';src:url('../fonts/SwarshDaisy-Italic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --gutter: min(5.625vw, 90px);
  --content: 1420px;

  --purple:      #984AE8;
  --purple-dark: #7B33C8;
  --ink:         #000000;
  --body:        #4F4F4F;
  --nav-ink:     #3D3D3D;
  --pill-grey:   #F6F6F6;
  --pill-lilac:  #EADBFA;
  --line:        #E9E9E9;

  --sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --inter:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --serif:'Swarsh Daisy', 'Times New Roman', Georgia, serif;

  --fs-h1:    clamp(34px, 4.5vw,    72px);
  --fs-h2:    clamp(28px, 3.75vw,   60px);
  --fs-h3:    clamp(20px, 1.6875vw, 27px);
  --fs-body:  clamp(14px, 1vw,      16px);
  --fs-sm:    clamp(13px, 0.9375vw, 15px);
  --fs-card:  clamp(13px, 0.9138vw, 14.62px);  /* service-card copy */
  --fs-phone: clamp(15px, 1.125vw,  18px);
  --fs-btn:   clamp(15px, 1.125vw,  18px);    /* button + link-arrow labels */
  --fs-fine:  clamp(9px, 0.625vw, 10px);    /* footer disclaimer */
  --fs-legal: clamp(11px, 0.8125vw, 13px);  /* footer bottom bar */

  --lh-h1: 1.08;
  --lh-h2: 1.1333;   /* 68 / 60 */
  --lh-body: 1.5;    /* 24 / 16 */
  --lh-sm: 1.4667;   /* 22 / 15 */

  --topbar-h: clamp(20px, 1.4375vw, 23px);
  --header-h: clamp(62px, 6.0625vw, 97px);
  --btn-h:    clamp(46px, 3.4375vw, 55px);
  --pill-h:   clamp(28px, 2.125vw,  34px);
  --radius:   clamp(10px, 0.75vw,   12px);
  --radius-card: clamp(12px, 1vw,   16px);
  --radius-lg:   clamp(14px, 1.5vw, 24px);
  --arrow:    clamp(24px, 1.8125vw, 29px);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:#fff; color:var(--body);
  font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
img{height:auto}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,p,blockquote,figure{margin:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--purple); outline-offset:3px; border-radius:4px}

.skip-link{position:absolute; left:-9999px; top:0; z-index:200; background:#fff; color:#000; padding:10px 16px}
.skip-link:focus{left:8px; top:8px}

.container{
  width:min(calc(100% - 2 * var(--gutter)), var(--content));
  margin-inline:auto;
}

/* ---------- shared type ---------- */
.h2{
  font-family:var(--serif); font-weight:400; font-size:var(--fs-h2);
  line-height:var(--lh-h2); color:var(--ink); letter-spacing:0;
}
.h2 em{font-style:italic}
.h2--light{color:#fff}

.pill{
  /* block-level so it never picks up inline half-leading from the parent line box */
  display:flex; width:fit-content; align-items:center; justify-content:center;
  height:var(--pill-h); flex:none; padding-inline:clamp(14px,1.7188vw,27.5px);
  border-radius:999px; font-size:var(--fs-body); line-height:1;
  white-space:nowrap;
}
.pill--outline{border:1px solid #000; color:#000; background:transparent}
.pill--outline.pill--light{border-color:rgba(255,255,255,.85); color:#fff}
.pill--purple{background:var(--purple); color:#fff}
.pill--dark{background:#000; color:#fff}

/* ---------- buttons ---------- */
.btn{
  /* Figma: label Poppins 400 / 18px, pad-left 16, gap 13, arrow 29, pad-right 15.67 */
  display:inline-flex; align-items:center; gap:clamp(8px,0.8125vw,13px);
  height:var(--btn-h); border-radius:var(--radius);
  padding-left:clamp(12px,1vw,16px); padding-right:clamp(8px,0.9794vw,15.67px);
  font-weight:400; font-size:var(--fs-btn); line-height:1; white-space:nowrap;
  transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn__arrow{width:var(--arrow); height:var(--arrow); flex:none}
.btn--purple{background:var(--purple); color:#fff}
.btn--purple:hover{background:var(--purple-dark)}
.btn--white{background:#fff; color:#000}
.btn--white:hover{background:#F2E9FD}
.btn--lg{padding-left:clamp(12px,1vw,16px)}
.btn:active{transform:translateY(1px)}

.link-arrow{
  display:inline-flex; align-items:center; gap:clamp(8px,0.75vw,12px);
  font-weight:400; font-size:var(--fs-btn); color:#000; line-height:1;
}
.link-arrow img{width:var(--arrow); height:var(--arrow); flex:none; transition:transform .2s ease}
.link-arrow:hover img{transform:translateX(3px)}
.link-arrow--plain svg{width:clamp(16px,1.25vw,20px); height:auto; flex:none}

/* ============================================================
   INNER PAGE HERO  (about / services / resources / contact)
   The inner pages are assembled from the homepage sections by
   _source/build-pages.sh; this band is the only chrome they add.
   ============================================================ */
.page-hero{background:#F7F1FD; padding-block:clamp(28px,3.5vw,56px)}
.crumbs{display:flex; align-items:center; flex-wrap:wrap; gap:clamp(6px,0.5vw,8px); font-size:var(--fs-sm); color:var(--body)}
.crumbs a:hover{color:var(--purple)}
.crumbs span[aria-hidden]{color:#C9AEE6}
.crumbs [aria-current]{color:var(--purple)}
.page-hero h1{margin-top:clamp(6px,0.625vw,10px)}

/* ============================================================
   TOP BAR  (Figma y 0–23, h 23)
   ============================================================ */
.social{display:flex; align-items:center}
.social a{display:flex; align-items:center; justify-content:center; transition:opacity .2s ease, color .2s ease}
.social svg{height:clamp(11px,0.875vw,14px); width:auto; display:block}

.topbar{background:#000; height:var(--topbar-h)}
.topbar__inner{height:100%; display:flex; align-items:center; justify-content:center}
.topbar__social{gap:clamp(11px,0.9375vw,15px)}
.topbar__social a{color:#fff; opacity:.9}
.topbar__social a:hover{opacity:1}

/* ============================================================
   HEADER  (Figma y 23–120, h 97)
   ============================================================ */
.header{
  position:sticky; top:0; z-index:100;
  background:#fff; height:var(--header-h);
  border-bottom:1px solid transparent;
  transition:box-shadow .2s ease;
}
.header.is-stuck{box-shadow:0 4px 20px rgba(0,0,0,.07)}
.header__inner{height:100%; display:flex; align-items:center; gap:0}
.header__logo{flex:none; display:flex; align-items:center}
.header__logo img{width:clamp(132px,13vw,208px); height:auto}

.nav{margin-left:clamp(12px,2.125vw,34px); margin-right:auto}
.nav__list{display:flex; align-items:center; gap:clamp(8px,2.1875vw,35px)}
.nav__link{
  display:inline-flex; align-items:center; justify-content:center;
  height:clamp(28px,1.9375vw,31px); padding-inline:clamp(12px,1.375vw,22px);
  border-radius:999px; background:var(--pill-grey); color:var(--nav-ink); font-weight:300;
  font-size:var(--fs-body); line-height:1; white-space:nowrap;
  transition:background-color .2s ease, color .2s ease;
}
.nav__link:hover{background:var(--pill-lilac); color:#000}
.nav__link.is-active{background:var(--pill-lilac); color:#000}

.header__actions{flex:none; display:flex; align-items:center; gap:clamp(14px,2.2708vw,36px)}
.header__phone{display:inline-flex; align-items:center; gap:clamp(8px,0.75vw,12px); font-weight:500; font-size:var(--fs-phone); color:#000; white-space:nowrap}
.header__phone img{width:clamp(16px,1.3125vw,21px); height:auto; flex:none}
.header__cta{flex:none}

/* burger (mobile only) */
.burger{display:none; width:44px; height:44px; flex:none; align-items:center; justify-content:center; flex-direction:column; gap:5px}
.burger span{display:block; width:24px; height:2px; background:#000; border-radius:2px; transition:transform .25s ease, opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-panel{
  position:fixed; z-index:99; left:0; right:0; top:calc(var(--topbar-h) + var(--header-h));
  background:#fff; border-top:1px solid var(--line);
  padding:20px var(--gutter) 28px; display:grid; gap:18px;
  box-shadow:0 18px 30px rgba(0,0,0,.12);
  max-height:calc(100dvh - var(--topbar-h) - var(--header-h)); overflow:auto;
}
.mobile-panel ul{display:grid; gap:6px}
/* scoped to the nav list — a bare `.mobile-panel a` rule also hit the CTA and turned
   it into a block, which stacked its label above the arrow */
.mobile-panel nav a{display:block; padding:12px 16px; border-radius:12px; background:var(--pill-grey); color:var(--nav-ink); text-align:center}
.mobile-panel nav a.is-active{background:var(--pill-lilac); color:#000}
.mobile-panel__phone{display:inline-flex; align-items:center; gap:10px; font-weight:500; color:#000}
.mobile-panel__phone img{width:21px; height:auto; flex:none}
.mobile-panel .btn{width:fit-content}
.mobile-panel{justify-items:center; text-align:center}
.mobile-panel nav{width:100%}
.mobile-scrim{position:fixed; inset:0; z-index:98; background:rgba(0,0,0,.35)}

/* ============================================================
   HERO  (Figma y 120–886, h 766, image 1600×766 full-bleed)
   ============================================================ */
.hero{position:relative; min-height:clamp(520px, 47.875vw, 766px); display:flex; isolation:isolate}
.hero__media{position:absolute; inset:0; z-index:-2; overflow:hidden}
/* Above 1600 the photo is scaled up and cover trims the excess height. Anchoring
   near the top keeps the subject's head in frame; below 1600 there is no vertical
   overflow, so this has no effect on the measured layout. */
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:72% 10%}
/* Mobile scrim only. On desktop the photo carries its own shadow side and the
   client asked for no extra overlay, so this stays off until 900px. */
.hero__media::after{content:""; display:none; position:absolute; inset:0}
.hero__inner{
  display:flex; flex-direction:column; align-items:flex-start;
  justify-content:flex-end;
  padding-block:clamp(48px,5.0625vw,81px);
  color:#fff;
}
.hero .pill{margin-bottom:clamp(20px,2.1875vw,35px)}
.hero__title{
  font-family:var(--serif); font-weight:400; font-size:var(--fs-h1); line-height:var(--lh-h1);
  color:#fff; max-width:100%;
}
.hero__title em{font-style:italic}
.hero__text{
  margin-top:clamp(4px,0.375vw,6px); max-width:min(100%, 530px);
  color:#F1F1F1;
}
.hero .btn{margin-top:clamp(20px,1.7917vw,28.67px)}

/* ============================================================
   ABOUT  (Figma y 886–1802; left col 560, gap 140, image 720×719)
   ============================================================ */
.about{position:relative; overflow:clip; padding-top:clamp(56px,8.75vw,140px); padding-bottom:clamp(40px,3.5625vw,57px)}
.about__watermark{
  /* Figma places it at x 790, ink top y 918. It is taller than the band it sits in,
     and the file cuts it at the section edge - on the tinted pages the overhang is
     plainly visible - so .about clips it. */
  position:absolute; right:0; top:clamp(0px,2.0206vw,32.33px);
  width:clamp(320px,50.625vw,810px); height:auto;
  pointer-events:none; z-index:0;
}
.about__inner{position:relative; z-index:1; display:flex; align-items:flex-start; gap:9.859%} /* 140/1420 */
.about__text{width:39.437%; flex:none}  /* 560/1420 */
.about__media{width:50.704%; flex:none}      /* 720/1420 */
.about__media img{width:100%; height:auto; border-radius:11px}
.about__text .h2{margin-top:clamp(15px,1.625vw,26px)}
.about__text p:not(.pill){margin-top:clamp(15px,1.5vw,24px)}
.about__text p + p{margin-top:clamp(16px,1.625vw,26px)}
.about__text .btn{margin-top:clamp(22px,1.875vw,30px)}

/* ============================================================
   SECTION HEAD (centred eyebrow + h2 + sub)
   ============================================================ */
.section-head{text-align:center; display:flex; flex-direction:column; align-items:center}
.section-head .h2{margin-top:clamp(18px,1.8438vw,29.5px); max-width:100%}
.section-head__sub{margin-top:clamp(10px,0.625vw,10px); max-width:76.1134%; color:var(--body)}  /* 1080.81/1420 - Figma 142:2019 */
.section-head--wide .h2{max-width:min(100%, 660px)}
.section-head--wide .section-head__sub{max-width:min(100%, 1200px); margin-top:clamp(12px,1.3125vw,21px)}

/* ============================================================
   SERVICES  (5 cards: 274.4 wide, 12 gap)
   ============================================================ */
.services{padding-top:clamp(40px,3.625vw,58px); padding-bottom:clamp(36px,3.25vw,52px)}
.svc-grid{
  margin-top:clamp(42px,5.1875vw,83px);   /* photo top 1234.5 in the file */
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
  gap:min(0.75vw, 12px);
}
.svc-card{display:flex; flex-direction:column; align-items:center; text-align:center; height:100%}
/* Figma lays the copy on a white panel that rides 7.5 up over the photo, with its
   own 12px corners showing against the image - photo 274.4x257.5, radius 8,
   panel top 1484.5, title cap 1512.7. */
.svc-card__body{
  position:relative; z-index:1; width:100%; flex:1;
  margin-top:clamp(-7.5px,-0.4688vw,-4px);
  display:flex; flex-direction:column; align-items:center;
  background:#fff; border-radius:clamp(8px,0.75vw,12px);
  padding-top:clamp(16px,1.5156vw,24.25px);
}
.svc-card__media{
  position:relative; width:100%; aspect-ratio:274.4 / 257.5;
  border-radius:clamp(6px,0.5vw,8px); overflow:hidden;
}
.svc-card__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.svc-card__title{
  font-family:var(--serif); font-weight:400; font-size:var(--fs-h3); line-height:1.2;
  color:var(--ink); margin-top:0;
}
.svc-card__text{margin-top:clamp(12px,1.125vw,18px); padding-inline:clamp(6px,1.075vw,17.2px); font-size:var(--fs-card); line-height:1.5068} /* 14.5 / 22 */
.svc-card .link-arrow{margin-top:auto; padding-top:clamp(18px,1.8125vw,29px)}

/* ============================================================
   UVBI & OZONE
   ============================================================ */
.uvbi{padding-top:clamp(10px,1.0625vw,17px); padding-bottom:clamp(56px,6vw,96px)}
.uvbi__panel{
  position:relative; margin-top:clamp(30px,3.8125vw,61px);
  border-radius:var(--radius-lg); overflow:hidden;
}
.uvbi__photo{width:100%; height:auto; display:block}
.uvbi__card{
  /* Figma: 407 x 497.3, inset 79 top / 53.33 right of a 1420 x 655.67 panel.
     Rows are 80 tall (28px icon + 25.5 padding each side + 1px rule). The rules run
     wider than the row content: they sit at the card padding, the icons are indented
     a further 26.33 inside them. */
  position:absolute; right:3.756%; top:12.05%;
  width:28.66%;
  background:rgba(255,255,255,.72); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius-card);
  padding:clamp(12px,1.125vw,18px) clamp(16px,1.7706vw,28.33px) clamp(24px,2.6044vw,41.67px);
}
.uvbi__list li{
  display:flex; align-items:center; gap:clamp(10px,1.0519vw,16.83px);
  padding-left:clamp(10px,1.6456vw,26.33px);
  padding-block:clamp(14px,1.5938vw,25.5px);
  border-bottom:1px solid rgba(0,0,0,.20);
  font-family:var(--serif); font-size:clamp(17px,1.5625vw,25px); color:#000; line-height:1.12;
}
.uvbi__list li:last-child{border-bottom:0}
.uvbi__list img{width:clamp(20px,1.75vw,28px); height:auto; flex:none}
.uvbi__card .link-arrow{margin-top:clamp(6px,0.6044vw,9.67px); padding-left:clamp(10px,2.6563vw,42.5px)}

/* ============================================================
   WHY CHOOSE US  (Figma y 3763–4595, h 832, full-bleed bg)
   ============================================================ */
.why{
  background:url('../images/whychoose-bg.jpg') center/cover no-repeat #2C1B2E;
  color:#fff;
  padding-top:clamp(40px,4vw,64px); padding-bottom:clamp(40px,4.0625vw,65px);
}
.why__top{display:flex; align-items:flex-start; gap:3.873%}   /* 55/1420 */
.why__media{width:50.704%; flex:none}                      /* 720/1420 */
.why__media img{width:100%; height:auto; border-radius:var(--radius-lg)}
.why__text{width:45.423%; flex:none; padding-top:clamp(0px,0.2937vw,4.7px)}  /* 645/1420 */
.why__text .h2{margin-top:clamp(16px,1.625vw,26px)}
.why__text p:not(.pill){margin-top:clamp(6px,0.5625vw,9px); color:#F0EAF2}
.why__text .btn{margin-top:clamp(20px,1.6875vw,27px)}

/* The rule under the two-column block runs edge to edge in Figma (y 4281,
   x 0-1600), so it lives on a full-bleed band, not on the container. */
.why__band{margin-top:clamp(32px,4.0625vw,65px); border-top:1px solid rgba(255,255,255,.18)}
.why__features{
  position:relative;
  padding-top:clamp(26px,2.5312vw,40.5px); padding-bottom:clamp(14px,1.5875vw,25.4px);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  column-gap:clamp(16px,2.3438vw,37.5px);
}
.why__features li{padding-left:clamp(0px,2.25vw,36px)}
/* Figma draws two hairlines at x 529 and 1029 with the grid columns breaking at
   576 and 1062 - they are placed by hand, so reproduce them literally rather
   than as column borders. Top/height measured from the export: 101.33 / 114.34. */
.why__features::before,.why__features::after{
  content:""; position:absolute; width:1px; background:rgba(255,255,255,.18);
  top:clamp(64px,6.3331vw,101.33px); height:clamp(72px,7.1463vw,114.34px);
}
.why__features::before{left:30.915%}  /* 439/1420 */
.why__features::after{left:66.127%}   /* 939/1420 */
.why__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(40px,3.5vw,56px); height:clamp(40px,3.5vw,56px);
  border-radius:clamp(10px,1vw,16px);
  background:rgba(255,255,255,.12); color:#fff;
}
.why__icon svg{width:55%; height:55%}
.why__features h3{
  margin-top:clamp(14px,1.6vw,25.6px);
  font-family:var(--serif); font-weight:400; font-size:clamp(21px,1.875vw,30px); line-height:1.2;
  color:#A967F2;
}
.why__features p{margin-top:clamp(8px,0.8438vw,13.5px); line-height:1.625; max-width:min(100%,320px); color:#EDE7F0}

/* ============================================================
   INFUSION OPTIONS  (5 cards: 265 wide, 24 gap, 30 padding)
   ============================================================ */
.infusions{padding-top:clamp(52px,5.75vw,92px); padding-bottom:clamp(56px,6.25vw,100px)}
/* Figma node 142:2023 — card frame 270 x 416, padding 32, radius 20, gap 17.5.
   5 x 270 + 4 x 17.5 = 1420 exactly. The stroke sits outside the content in the file,
   so padding is 32 minus the border width and every card keeps a 206px inner box. */
.inf-grid{
  margin-top:clamp(30px,2.9375vw,47px);
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr));
  gap:min(1.09375vw, 17.5px);
}
.inf-card{
  position:relative;
  display:flex; flex-direction:column; justify-content:space-between;
  border:1px solid var(--line); border-radius:clamp(12px,1.25vw,20px);
  padding:clamp(16px,1.9375vw,31px);
  background:#fff; transition:border-color .2s ease, box-shadow .2s ease;
}
/* The 3px gradient stroke sits OUTSIDE the card as a pseudo-element ring rather
   than as a thicker border, so switching it on never changes the padding, the
   inner box or the line breaks — the card cannot resize under the cursor.
   Ramp sampled off the export: ~15% alpha at the top to solid #984AE8 at the foot.
   Drop shadow: x 0, y 12, blur 24, spread 0, #984AE8 @ 3.92% */
.inf-card::before{
  content:""; position:absolute; inset:-2px;
  border-radius:calc(clamp(12px,1.25vw,20px) + 2px);
  /* only the 3px band is painted - the middle is masked out, so the ring never
     covers the card and never affects its box */
  padding:3px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  background:linear-gradient(180deg,
    rgba(152,74,232,.05) 0%,
    rgba(152,74,232,.10) 3%,
    rgba(152,74,232,.21) 11%,
    rgba(152,74,232,.31) 19%,
    rgba(152,74,232,.43) 27%,
    rgba(152,74,232,.52) 35%,
    rgba(152,74,232,.62) 42%,
    rgba(152,74,232,.69) 50%,
    rgba(152,74,232,.76) 58%,
    rgba(152,74,232,.83) 66%,
    rgba(152,74,232,.87) 74%,
    rgba(152,74,232,.92) 82%,
    rgba(152,74,232,.97) 90%,
    var(--purple) 100%);
  opacity:0; transition:opacity .2s ease;
  pointer-events:none;
}
.inf-card.is-featured::before,
.inf-card:hover::before{opacity:1}
.inf-card.is-featured,
.inf-card:hover{
  border-color:transparent;
  box-shadow:0 clamp(6px,0.75vw,12px) clamp(12px,1.5vw,24px) 0 rgba(152,74,232,.04);
}
/* Hovering a card gives it the stroke the first one carries by default, with a
   slightly stronger lift; while any other card is hovered the resting featured
   card falls back to the plain outline. Browsers without :has() simply keep the
   first card highlighted throughout. */
.inf-card:hover{box-shadow:0 10px 30px rgba(152,74,232,.10)}
.inf-grid:has(.inf-card:hover) .inf-card.is-featured:not(:hover){
  border-color:var(--line); box-shadow:none;
}
.inf-grid:has(.inf-card:hover) .inf-card.is-featured:not(:hover)::before{opacity:0}
.inf-grid:has(.inf-card:hover) .inf-card.is-featured:not(:hover) .inf-card__text{color:var(--body)}
.inf-card__top{display:flex; align-items:center; justify-content:space-between}
.inf-card__head{display:flex; flex-direction:column; gap:clamp(14px,1.5vw,24px)}
.inf-card__body{display:flex; flex-direction:column; gap:clamp(8px,0.75vw,12px)}
/* Icons 02–05 are 48x48 SVGs that already carry their own tinted rounded square;
   01 is a bare 15x19 droplet, so it just gets centred in the same 48px slot. */
.inf-card__icon{display:inline-flex; align-items:center; justify-content:center; flex:none; width:clamp(30px,3vw,48px); height:clamp(30px,3vw,48px); border-radius:clamp(8px,0.75vw,12px); background:#fff}
.inf-card__icon--box img{width:100%; height:100%}
.inf-card__icon:not(.inf-card__icon--box) img{width:clamp(14px,1.375vw,22px); height:clamp(14px,1.375vw,22px)}
/* Figma node 142:2029 — Inter SemiBold 16, #984AE8 at 60%, 1px tracking */
.inf-card__num{font-family:var(--inter); font-size:var(--fs-body); color:var(--purple); opacity:.6; font-weight:600; letter-spacing:1px; line-height:normal}
.inf-card__title{
  margin-top:0;
  /* the longest title runs a little into the right padding, as it does in the file */
  margin-right:max(-10px, -0.625vw);
  font-family:var(--serif); font-weight:400; font-size:clamp(17px,1.625vw,26px); line-height:1.1; color:var(--ink);
}
.inf-card__text{margin-top:0; font-size:clamp(11px,1vw,16px); line-height:1.625; color:var(--body)}  /* 16 / 26 */
.inf-card.is-featured .inf-card__text,
.inf-card:hover .inf-card__text{color:var(--ink)}  /* the highlighted card is set in black */
.inf-card .link-arrow{margin-top:auto; padding-top:clamp(14px,1.5vw,24px); gap:clamp(5px,0.625vw,10px)}
.infusions__cta{margin-top:clamp(28px,3.125vw,50px); display:flex; justify-content:center}

/* ============================================================
   ADDITIONAL WELLNESS OPTIONS  (Figma y 5538–5908, h 370)
   ============================================================ */
.inject{
  background:url('../images/injections-bg.jpg') center/cover no-repeat #12061F;
  color:#fff;
  /* Figma: pill top and card top both sit 59 below the band top (y 5596-5597) */
  padding-block:clamp(40px,3.6875vw,59px);
}
.inject__inner{display:flex; align-items:flex-start; gap:2.394%}  /* 34/1420 */
.inject__text{width:50.211%; flex:none}                        /* 713/1420 */
.inject__text .h2{margin-top:clamp(16px,1.7vw,27.2px)}
.inject__text p:not(.pill){
  margin-top:clamp(6px,0.5438vw,8.7px); color:#EFE7F5;
  /* the line runs 708.4 of a 713 column at 1600. --fs-body stops shrinking at
     14px, which wraps it below ~1400, so this one carries a lower floor. */
  font-size:clamp(12px,1vw,16px);
}
.inject__text .btn{margin-top:clamp(20px,2.1563vw,34.5px)}
.inject__cards{
  width:47.09%; flex:none;                                     /* 669/1420 */
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:min(1.125vw, 18px);
}
.inject-card{
  background:#fff; color:#000; border-radius:var(--radius-card);
  padding:clamp(14px,1.5vw,24px);
  display:flex; flex-direction:column;
}
.inject-card__top{display:flex; align-items:flex-start; justify-content:space-between; gap:clamp(2px,0.2081vw,3.33px)}
.inject-card__thumb{width:clamp(44px,4.5vw,72px); height:auto; border-radius:clamp(8px,0.75vw,12px)}
.tag{
  display:inline-flex; align-items:center; height:clamp(16px,1.3438vw,21.5px);
  padding-inline:clamp(5px,0.4938vw,7.9px); border-radius:999px;
  background:var(--purple); color:#fff; font-size:clamp(8px,0.6563vw,10.5px);
  font-weight:500; letter-spacing:.02em; white-space:nowrap;
}
.inject-card h3{
  margin-top:clamp(12px,1.1963vw,19.14px);
  font-family:var(--serif); font-weight:400; font-size:clamp(16px,1.375vw,22px); line-height:1.2; color:#000;
}
.inject-card p{margin-top:clamp(5px,0.4263vw,6.82px); font-size:clamp(11px,0.8125vw,13px); line-height:1.5385; color:var(--body)}  /* 13 / 20 */
.inject-card__add{
  margin-top:auto; padding-top:clamp(14px,1.42vw,22.72px);
  display:inline-flex; align-items:center; gap:clamp(5px,0.5vw,8px);
  color:var(--purple); font-size:clamp(11px,0.875vw,14px); font-weight:400; line-height:1;
}
/* the plus stays black while the label is purple, as drawn */
.inject-card__plus{width:clamp(9px,0.8125vw,13px); height:clamp(9px,0.8125vw,13px); flex:none; color:#000}

/* ============================================================
   HOW IT WORKS  (Figma y 5908–6828, h 920, full-bleed bg)
   ============================================================ */
.how{
  background:url('../images/howitworks-bg.jpg') center/cover no-repeat #FBEFF4;
  padding-top:clamp(44px,5vw,80px); padding-bottom:clamp(44px,4.9792vw,79.67px);
}
.how__steps{
  margin-top:clamp(30px,3.3438vw,53.5px);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:min(1.25vw, 20px);   /* Figma: 3 panels of 460 with 20 between */
}
.how-step{display:flex; flex-direction:column}
.how-step__marker{display:flex; flex-direction:column; align-items:center}
.how-step__dot{width:clamp(20px,1.75vw,28px); height:clamp(20px,1.75vw,28px); flex:none; border-radius:50%; border:2px solid var(--purple)}
.how-step__line{width:0; border-left:1px dashed rgba(0,0,0,.28)}
.how-step__line--a{height:clamp(26px,3.8125vw,61px)}
.how-step__line--b{height:clamp(18px,2.7083vw,43.33px)}
.how-step__label{
  display:inline-flex; align-items:center; flex:none; height:clamp(26px,2.0625vw,33px);
  padding-inline:clamp(12px,1.125vw,18px); border-radius:999px;
  background:#000; color:#fff; font-size:var(--fs-sm); line-height:1; white-space:nowrap;
}
.how-step__card{
  flex:1; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.28));
  border:1px solid rgba(255,255,255,.65);
  border-radius:var(--radius-lg);
  padding:clamp(20px,2.1667vw,34.67px) clamp(14px,1.75vw,28px) clamp(24px,2.75vw,44px);
  display:flex; flex-direction:column; align-items:center;
}
.how-step__icon img{width:clamp(48px,4.5vw,72px); height:auto}
.how-step__card h3{
  margin-top:clamp(14px,1.7562vw,28.1px);
  font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.5vw,40px); line-height:1.2; color:var(--ink);
}
.how-step__card h3 em{font-style:italic}
.how-step__card p{margin-top:clamp(6px,0.4875vw,7.8px); max-width:min(100%,316px); line-height:clamp(16px,1.2813vw,20.5px)}  /* Figma line pitch 20.5 */
.how__cta{margin-top:clamp(30px,4.6312vw,74.1px); display:flex; justify-content:center}

/* ============================================================
   LOCATIONS  (left col 432, gap 36, 4 cards 230.5 / gap 10)
   ============================================================ */
.loc{padding-top:clamp(56px,6.25vw,100px); padding-bottom:clamp(40px,3.5vw,56px)}
.loc__inner{display:flex; align-items:center; gap:2.324%}   /* 33/1420 */
.loc__text{width:30.634%; flex:none}                         /* 435/1420 */
.loc__text .h2{margin-top:clamp(16px,1.6250vw,26px); max-width:min(100%,425px)}  /* Figma breaks after "Serving" */
.loc__text p:not(.pill){margin-top:clamp(14px,1.4375vw,23px)}
.loc__text .btn{margin-top:clamp(20px,2.375vw,38px)}
.loc__cards{
  width:67.042%; flex:none;                                   /* 952/1420 */
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:min(0.625vw, 10px);
}
.loc-card{
  display:flex; flex-direction:column;
  border:1px solid var(--purple); border-radius:var(--radius-card); overflow:hidden; background:#fff;
}
.loc-card__media{position:relative; width:100%; aspect-ratio:230.5 / 169}
.loc-card__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.loc-card__body{padding:clamp(10px,1.1875vw,19px) clamp(10px,1vw,16px) clamp(12px,1.375vw,22px); display:flex; flex-direction:column; flex:1}
.loc-card__addr{margin-top:clamp(8px,0.875vw,14px); font-size:clamp(11px,0.8125vw,13px); line-height:clamp(15px,1.0831vw,17.33px); color:var(--body)}  /* Figma: line pitch 17.33 */
.loc-card .link-arrow{margin-top:auto; padding-top:clamp(10px,0.8125vw,13px); font-size:var(--fs-card)}
.loc-card .tag{align-self:flex-start; height:clamp(18px,1.5vw,24px); font-size:var(--fs-card); font-weight:400; letter-spacing:0; border-radius:8px; padding-inline:clamp(8px,0.75vw,12px)}

/* ============================================================
   TESTIMONIALS + FAQ
   ============================================================ */
.tf{padding-top:clamp(34px,3.25vw,52px); padding-bottom:clamp(28px,2.0831vw,33.33px)}
.tf__inner{display:flex; align-items:flex-start; gap:2.908%}  /* 41.3/1420 */
.tf__left{width:46.268%; flex:none; padding-top:clamp(0px,7.125vw,114px)}                            /* 657/1420 */
.tf__right{width:50.725%; flex:none}                           /* 720.3/1420 */
.tf__head{display:flex; flex-direction:column; align-items:flex-start}
.tf__left .tf__head{align-items:center; text-align:center}
.tf__head .h2{margin-top:clamp(16px,1.8813vw,30.1px)}

.tslider{margin-top:clamp(20px,1.8625vw,29.8px)}
/* The clip has to live on a wrapper, not on the element that moves — with
   overflow:hidden on the track itself the window slid away with the slides. */
/* The clip lives on a wrapper, not on the element that moves. The 2px padding
   (pulled back by the margin) puts the clip edge just outside the card so its
   border and rounded corners are never shaved, and the gap on the track parks
   the next slide well beyond that edge so it cannot peek in. */
.tslider__viewport{overflow:hidden; padding:2px; margin:-2px}
.tslider__track{display:flex; gap:clamp(16px,1.5vw,24px); will-change:transform}
.tcard{
  flex:0 0 100%; text-align:center;
  border:1px solid #000; border-radius:var(--radius-lg);
  padding:clamp(22px,2.5417vw,40.67px) clamp(18px,2.25vw,36px) clamp(30px,3.8087vw,60.94px);
  display:flex; flex-direction:column; align-items:center;
}
/* one exported asset: the Google mark above the five stars (155 x 92 in Figma) */
.tcard__ratinglink{display:inline-block; line-height:0}
.tcard__rating{width:clamp(104px,9.6875vw,155px); height:auto}
.tcard__headline{
  margin-top:clamp(12px,1.1375vw,18.2px);
  font-family:var(--serif); font-style:italic; font-size:clamp(24px,2.5vw,40px);
  line-height:1.2; color:var(--purple);
}
.tcard__quote{margin-top:0; font-size:clamp(15px,1.125vw,18px); line-height:2.2778; max-width:min(100%,508px); color:#000}   /* 18 / 41 */
.tcard__name{
  margin-top:clamp(14px,1.3225vw,21.16px);
  font-family:var(--serif); font-style:italic; font-size:clamp(21px,1.875vw,30px); line-height:1.2; color:var(--purple);
}
.tslider__dots{display:flex; justify-content:center; gap:clamp(6px,0.5vw,8px); margin-top:clamp(20px,2.4169vw,38.67px)}
.tslider__dots button{width:clamp(8px,0.625vw,10px); height:clamp(8px,0.625vw,10px); border-radius:50%; background:#E4D3F8}
.tslider__dots button.is-active{background:var(--purple)}
.tslider__dots button:disabled{cursor:default}

.faq{margin-top:clamp(24px,2.1875vw,35px); display:grid; gap:clamp(16px,1.9063vw,30.5px)}  /* Figma: 82-tall rows, 30.5 apart */
.faq__item{
  border:1px solid #000; border-radius:var(--radius-card); background:#fff; overflow:hidden;
  transition:background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.faq__item.is-open{background:#F4E8FE; border-color:transparent}
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:clamp(14px,1.4375vw,23px) clamp(14px,1.75vw,28px);
  text-align:left;
  font-family:var(--serif); font-weight:400; font-size:clamp(18px,1.75vw,28px); line-height:1.25; color:#000;
}
.faq__icon{
  position:relative; flex:none;
  transition:background-color .25s ease, transform .25s ease;
  width:clamp(24px,1.9375vw,31px); height:clamp(24px,1.9375vw,31px);
  border-radius:50%; background:#F0E3FD;
}
.faq__item.is-open .faq__icon{background:#fff}
.faq__icon::before,.faq__icon::after{
  content:""; position:absolute; left:50%; top:50%; background:#000; border-radius:2px;
  transform:translate(-50%,-50%);
}
.faq__icon::before{width:44%; height:2px}
.faq__icon::after{width:2px; height:44%; transition:opacity .2s ease, transform .2s ease}
.faq__item.is-open .faq__icon::after{opacity:0; transform:translate(-50%,-50%) rotate(90deg)}
/* Height is driven from JS. A `grid-template-rows: 0fr` panel did not collapse here —
   the track kept resolving to the content height, so a closed question still showed a
   sliver of its answer. An explicit height is unambiguous. */
.faq__a{height:0; overflow:hidden; transition:height .28s ease}
.faq__a-in{overflow:hidden}

/* Hovering a closed question warms it towards the open state and swells the plus,
   so the row reads as clickable before it is clicked. The open one is already the
   active row, so it is left alone. */
.faq__q{transition:color .25s ease}
.faq__icon::before{transition:background-color .25s ease}
.faq__icon::after{transition:opacity .2s ease, transform .2s ease, background-color .25s ease}
.faq__item:not(.is-open):hover{
  background:#FBF5FF;
  border-color:var(--purple);
  box-shadow:0 clamp(4px,0.5vw,8px) clamp(10px,1.5vw,24px) rgba(152,74,232,.12);
  transform:translateY(-2px);
}
.faq__item:not(.is-open):hover .faq__q{color:var(--purple-dark)}
.faq__item:not(.is-open):hover .faq__icon{background:var(--purple); transform:scale(1.08)}
.faq__item:not(.is-open):hover .faq__icon::before,
.faq__item:not(.is-open):hover .faq__icon::after{background:#fff}
@media (prefers-reduced-motion: reduce){
  .faq__item, .faq__icon{transition:none}
  .faq__item:not(.is-open):hover{transform:none}
}
.faq__a p{padding:0 clamp(14px,1.75vw,28px) clamp(16px,1.5vw,24px); color:#3A3A3A}

/* ============================================================
   CTA  (card 1420×490)
   ============================================================ */
.cta{padding-top:clamp(48px,5.6688vw,90.7px); padding-bottom:clamp(20px,2.2063vw,35.3px)}  /* the footer now carries the rest of this gap */
.cta__card{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:url('../images/cta-iv-bag.jpg') center/cover no-repeat #2B1140;
  color:#fff;
  min-height:clamp(360px, 30.625vw, 490px);
  display:flex; align-items:center;
}
.cta__body{
  width:min(100%, 63%);
  padding:clamp(24px,3.4375vw,55px) clamp(20px,3.4375vw,55px);
}
.cta__pill{margin-top:clamp(14px,1.4375vw,23px)}
/* on the CTA band the outline is white at 29% - measured off the export:
   #5B555F over #18101D resolves to a = .29 on all three channels */
.cta__pill.pill--outline{border-color:rgba(255,255,255,.29)}
.cta__body > p:not(.pill){margin-top:clamp(14px,1.4375vw,23px); max-width:min(100%,700px); color:#F0EAF4}  /* Figma: longest line 686 ink */
.cta__actions{display:flex; flex-wrap:wrap; gap:clamp(10px,1vw,16px); margin-top:clamp(20px,2.125vw,34px)}

/* ============================================================
   FOOTER  (Figma y 8904–9258, h 354)
   ============================================================ */
/* Figma puts the first footer row 67.7 below the footer edge. On pages that end
   with the CTA this used to come out of the CTA's bottom padding; the contact page
   ends on a dark band, so the footer has to carry it itself. */
.footer{padding-top:clamp(36px,4.2313vw,67.7px); padding-bottom:clamp(16px,1.725vw,27.6px); color:#000}
/* Tracks + gap are all percentages of the 1420 container and sum to 100%, so the
   column start positions still land on the file's 90 / 718.7 / 991.7 / 1270.7. */
.footer__cols{display:grid; grid-template-columns:40.5% 17.54% 17.96% 18.93%; column-gap:1.69%; row-gap:0}
.footer__logo{width:clamp(140px,13vw,208px); height:auto; margin-top:clamp(0px,0.0375vw,0.6px)}
.footer__disclaimer{margin-top:clamp(14px,1.4375vw,23px); font-size:var(--fs-fine); line-height:1.5; max-width:min(100%, 515px)}  /* Figma: six lines, longest 509 */
.footer__disclaimer strong{color:var(--purple); font-weight:600}
.footer__social{gap:clamp(12px,1vw,16px); margin-top:clamp(16px,1.6875vw,27px)}
.footer__social a{color:var(--purple)}
.footer__social a:hover{color:var(--purple-dark)}
.footer__col ul{margin-top:clamp(10px,0.8588vw,13.74px); display:grid; gap:0}
.footer__col li{position:relative; padding-left:clamp(10px,0.8125vw,13px); font-size:var(--fs-body); line-height:clamp(24px,2.1875vw,35px)}  /* 16 / 35 */
.footer__col li::before{content:"•"; position:absolute; left:0; top:0; color:#000}
.footer__col a:hover{color:var(--purple)}
.footer__bottom{
  margin-top:clamp(20px,1.75vw,28px); padding-top:clamp(18px,1.8375vw,29.4px);
  border-top:1px solid #E2E2E2;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:var(--fs-legal);
}
.footer__bottom ul{display:flex; gap:clamp(16px,2vw,32px); flex-wrap:wrap}
.footer__bottom a:hover{color:var(--purple)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px){
  .header__phone span{display:none}
  .nav__list{gap:clamp(6px,1.25vw,20px)}
}

@media (max-width: 1024px){
  .burger{display:flex}
  .nav{display:none}
  .header__actions{margin-left:auto}
  .header__phone span{display:inline}

  .about__inner{flex-direction:column; align-items:stretch; gap:clamp(28px,4vw,44px)}
  .about__text, .about__media{width:100%}
  .about__text{padding-top:0}
  .why__text{padding-top:0}
  .about__media img{max-width:720px; margin-inline:auto}
  .about__watermark{width:min(70vw,520px); opacity:.7}

  .why__top{flex-direction:column; align-items:stretch; gap:clamp(26px,3.5vw,40px)}
  .why__media, .why__text{width:100%}

  .inject__inner{flex-direction:column; align-items:stretch; gap:clamp(24px,3.5vw,36px)}
  .inject__text, .inject__cards{width:100%}

  .loc__inner{flex-direction:column; align-items:stretch; gap:clamp(24px,3.5vw,36px)}
  .loc__text, .loc__cards{width:100%}

  .tf__inner{flex-direction:column; gap:clamp(40px,5vw,64px)}
  .tf__left, .tf__right{width:100%}
  .tf__left{padding-top:0}

  .svc-grid{grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(14px,2vw,24px)}
  .inf-grid{grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(14px,2vw,24px)}

  .cta__body{width:min(100%, 78%)}
  .uvbi__card{width:min(44%, 420px)}

  .footer__cols{grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,44px)}
  .footer__brand{grid-column:1 / -1}
}

/* ---------- stacked layout: everything centres ---------- */
@media (max-width: 900px){
  /* the footer stays left-aligned on purpose — only the page sections centre */
  .about__text, .why__text, .inject__text, .loc__text, .tf__head{
    text-align:center;
  }
  .about__text, .why__text, .inject__text, .loc__text{
    display:flex; flex-direction:column; align-items:center;
  }
  .about__text .pill, .why__text .pill, .inject__text .pill, .loc__text .pill,
  .tf__head .pill,
  .about__text .btn, .why__text .btn, .inject__text .btn, .loc__text .btn{
    margin-inline:auto;
  }
  .tf__head{display:flex; flex-direction:column; align-items:center}
  .cta__body{display:flex; flex-direction:column; align-items:center; text-align:center}
  .cta__pill{margin-inline:auto}
  .cta__actions{justify-content:center}
  .why__features li{text-align:center; display:flex; flex-direction:column; align-items:center}
  .how-step__card{align-items:center}
  .loc-card__body{align-items:center; text-align:center}
  .loc-card .tag{align-self:center}
  .loc-card .link-arrow{justify-content:center}
  /* the injection card keeps the file's own left-aligned layout — thumb left, tag
     right — because centring it left the tag floating beside the thumbnail */
  .inject-card{align-items:stretch; text-align:left}
  .inject-card__top{width:100%; justify-content:space-between; gap:12px}
  .inject-card__add{align-self:flex-start}
  .svc-card{align-items:center}
  /* the centred sub-heading was boxed in at 76% — give it the full column on mobile */
  .section-head__sub{max-width:100%}
}

@media (max-width: 900px){
  /* Content sits ON the banner, with a bottom-weighted scrim so white text stays
     readable: measured p90 luminance of the photo is 232 top / 123 bottom, and
     white needs the backdrop under 118 for 4.5:1. */
  .hero{min-height:clamp(560px,145vw,720px); background:#141014}
  .hero__media img{object-position:72% center}
  .hero__media::after{display:block;
    background:linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.46) 38%, rgba(0,0,0,.72) 72%, rgba(0,0,0,.84) 100%);}
  .hero__inner{padding-block:clamp(28px,5vw,44px); align-items:center; text-align:center; justify-content:flex-end}
  .hero__text{max-width:100%; margin-inline:auto}
  .hero .pill, .hero .btn{margin-inline:auto}

  .why__features{grid-template-columns:1fr; row-gap:clamp(24px,4vw,32px); column-gap:0}
  .why__features::before, .why__features::after{display:none}
  .why__features li{padding-left:0}
  .why__features li + li{border-left:0; border-top:1px solid rgba(255,255,255,.18); padding-top:clamp(24px,4vw,32px)}

  .how__steps{grid-template-columns:1fr; gap:clamp(28px,5vw,44px)}
  .how-step__line{height:clamp(20px,4vw,32px)}

  .inject__cards{grid-template-columns:repeat(3, minmax(0,1fr))}
  .loc__cards{grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(12px,2vw,18px)}

  .uvbi__panel{border-radius:var(--radius-card)}
  .uvbi__card{
    position:static; transform:none; width:100%;
    margin-top:clamp(14px,2.5vw,20px);
    background:#F7F1FD; backdrop-filter:none; border-color:#EADBFA;
  }

  .cta__card{align-items:stretch}
  .cta__body{width:100%; background:linear-gradient(180deg, rgba(30,10,45,.55), rgba(30,10,45,.30))}
}

@media (max-width: 600px){
  .pill{white-space:normal; height:auto; min-height:var(--pill-h); padding-block:6px; text-align:center; line-height:1.3}
  .svc-grid{grid-template-columns:1fr; gap:clamp(16px,4vw,24px)}
  .svc-card__media{max-width:420px; margin-inline:auto; width:100%}
  .inf-grid{grid-template-columns:1fr; gap:14px}
  .inject__cards{grid-template-columns:1fr; gap:12px}
  .loc__cards{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:1fr; gap:28px}
  .footer__bottom{flex-direction:column; align-items:flex-start; gap:12px}
  .tcard__quote{line-height:1.7}
  /* the number already sits in the panel — a lone handset icon next to the CTA
     just crowded the bar */
  .header__phone{display:none}
  .header__cta{height:44px; font-size:15px; padding-left:14px; padding-right:6px}
  .header__cta .btn__arrow{width:24px; height:24px}
  .header__logo img{width:clamp(120px,34vw,150px)}
  .how-step__card p{max-width:none}
}

/* ============================================================
   INNER PAGE VARIANTS
   Same blocks as the homepage — only the copy, the photo and the
   column order change, so these are the only extra rules needed.
   ============================================================ */

/* Hero on about/services: two-line display heading and a wider lead than the
   homepage's, measured off the page exports. */
.hero--page .hero__title{max-width:min(100%, 780px); line-height:0.963}  /* Figma line pitch 69.33 at 72px */
.hero--page .hero__text{max-width:min(100%, 700px)}

/* The purple band on About mirrors the homepage one: photo left, copy right,
   and no feature row beneath it. */
.why--flip{padding-block:clamp(48px,5.5vw,88px)}   /* photo 1985-2548 inside a 1897-2636 band */
.why--flip .why__top{align-items:center; justify-content:space-between; gap:1.972%}
/* Figma puts the photo at 97-817 and the copy at 861.5-1526.5: a 44.5 gap, but
   with the copy hanging 16.5 past the right gutter. Keeping both measured widths
   (720 + 665) on the grid leaves 35 between them, which is the closest the
   design gets without breaking the container. */
.why--flip .why__media{order:0; width:50.704%}   /* 720/1420 */
.why--flip .why__text{order:1; width:46.831%; padding-top:0}  /* 665/1420 */
.why--flip .why__text p:not(.pill) + p{margin-top:clamp(16px,1.5vw,24px)}

/* Figma breaks these display headings by hand; the box width that would do it
   for line 1 is narrower than line 2 needs, so the break is explicit and only
   applies while the two-column layout is in play. */
.brk{display:none}
@media (min-width: 901px){ .brk{display:inline} }
/* The service cards carry their measured Figma line breaks, but only while the
   five-across grid is still wide enough to hold the longest of them: --fs-card
   stops shrinking at 13px around 1422px, so below ~1400 the box keeps narrowing
   while the text does not, and a forced line would wrap a second time. */
.brk5{display:none}
@media (min-width: 1400px){ .brk5{display:inline} }
/* Figma line breaks for the wide centred paragraphs and the three feature
   columns. --fs-body stops shrinking at 14px around 1400, so below 1200 the box
   has narrowed past the longest forced line and natural wrapping is safer. */
.brk-wide{display:none}
@media (min-width: 1200px){ .brk-wide{display:inline} }

/* About page — the owner block carries much more copy than the homepage's, so
   Figma widens its column and starts it higher: text 610, gap 90, photo 720,
   pill 185 below the band top (photo still at 140). */
#owner .about__inner{gap:6.338%}
#owner .about__text{width:42.958%}
#owner{padding-bottom:clamp(48px,9.0625vw,145px)}  /* photo bottom 1752, band ends 1897 */

/* Services page — the same cards block, but Figma gives it more room around it
   than the homepage does (head 17 lower, 98 of air under the cards). */
.page-services .services{padding-top:clamp(48px,4.6875vw,75px); padding-bottom:clamp(60px,6.15vw,98.4px)}

/* These page-scoped rules sit after the breakpoints, so they would otherwise
   outrank them once the layout stacks. Restate them here. */
@media (max-width: 1200px){
  #owner .about__inner{gap:clamp(28px,4vw,44px)}
  #owner .about__text{width:100%; padding-top:0}
  #owner{padding-bottom:clamp(40px,5vw,80px)}

  .why--flip{padding-block:clamp(32px,4vw,64px)}
  .why--flip .why__top{flex-direction:column; align-items:stretch;
    justify-content:flex-start; gap:clamp(26px,3.5vw,40px)}
  .why--flip .why__media, .why--flip .why__text{width:100%}
}

/* ============================================================
   SERVICE DETAIL PAGE  (services/iv-hydration-therapy.html)
   Every block is a homepage block; these rules only carry the
   band sizes and the one new element, the benefits list.
   ============================================================ */

/* Same two-column block as .about, without the flower watermark. */
.about--plain{padding-block:clamp(48px,6.25vw,100px)}  /* photo 2885-3443 in a 2785-3543 band */

/* Bulleted list inside the purple band. */
.bullets{margin-top:clamp(8px,0.5625vw,9px); display:grid; gap:0}
.bullets li{position:relative; padding-left:clamp(12px,0.9375vw,15px); line-height:1.5}
.why__text .bullets li{color:#F0EAF2}
/* a pill used mid-flow, under a run of paragraphs */
.pill--inline{margin-top:clamp(18px,1.75vw,28px)}
.bullets li::before{content:"\2022"; position:absolute; left:0; top:0}

/* "What to Expect" reuses the infusion-card grid on the page's own band. */
.expect{
  background:url('../images/expect-bg.jpg') center/cover no-repeat #FBF3F7;
  padding-block:clamp(48px,6.5938vw,105.5px);
}
.expect .section-head{text-align:center}
#iv-intro{padding-bottom:clamp(48px,8.9375vw,143px)}  /* photo bottom 1745, band ends 1891 */
#iv-benefits{padding-block:clamp(48px,6.625vw,106px)}              /* photo 1997-2679 in an 1891-2785 band */
/* The step cards carry far less copy than the homepage's, but Figma keeps the
   same 416 box, so the "Learn More" row still sits on the card's baseline. */
.expect .inf-card{min-height:clamp(300px,26vw,416px)}

/* The flower watermark is a semi-transparent wash over its whole box, so where the
   next band is coloured it has to be clipped to its own section — which is what
   Figma does on these two pages. */
#owner, #iv-intro{overflow:hidden}

/* Figma sets this band's columns apart by 54, not the 28 used on the About page.
   Scoped to the two-column layout so it cannot outrank the stacking breakpoints. */
@media (min-width: 1201px){
  #iv-benefits .why__top{gap:3.785%}   /* 53.75/1420 */
  #iv-benefits .why__text{width:45%}   /* 639/1420 */
}

/* The id-scoped column widths above outrank the breakpoints, so restate them for
   the stacked layout. This band also keeps its copy left-aligned on mobile —
   a centred bulleted list reads badly. */
@media (max-width: 1200px){
  #iv-benefits .why__top{gap:clamp(26px,3.5vw,40px)}
  #iv-benefits .why__text{width:100%}
}
@media (max-width: 900px){
  #iv-benefits .why__text{text-align:left; align-items:stretch}
  #iv-benefits .why__text .pill{margin-inline:0}
}

/* The 416 card box is Figma's desktop measurement. Once the grid drops below five
   across, the cards should just be as tall as their own copy. */
@media (max-width: 1200px){
  .expect .inf-card{min-height:0}
}

/* ============================================================
   UVBI + OZONE SERVICE PAGE
   ============================================================ */
#uvbi-intro{padding-bottom:clamp(48px,6.5vw,104px)}   /* photo 761 tall in a 1005 band */
#ozone{padding-block:clamp(48px,6.7813vw,108.5px)}    /* photo 682 tall in an 899 band */

/* The "who inquires" band runs four cards, inset from the container and top
   aligned, with no highlighted card and no link row. */
.expect--four{padding-block:clamp(48px,6.25vw,100px)}
.expect--four .inf-grid{
  width:89.268%; margin-inline:auto;             /* 1267.6/1420 */
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:min(2vw, 32px);
  align-items:stretch;
}
@media (max-width: 1200px){
  .expect--four .inf-grid{width:100%; grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 600px){
  .expect--four .inf-grid{grid-template-columns:1fr}
}
.expect--four .inf-card{min-height:0}   /* these cards are 319 in the file, not 416 */
#uvbi-intro .about__text .h2{margin-top:0}
/* This page's lists run flush — the wrapped lines sit under the bullet, not under
   the text — and the cards use a slightly tighter box than the homepage's. */
.bullets--flush li{padding-left:0}
.bullets--flush li::before{position:static; margin-right:.35em}
.expect--four .inf-card{padding:clamp(16px,1.6688vw,26.7px)}

/* ------------------------------------------------------------
   Service detail hero — two lead paragraphs, and the vertical
   rhythm measured off the page exports:
   pill 204-237, h1 caps 265 / 334.7, p1 ink 424.7, p2 ink 569,
   button 747-802 (UVBI page, hero at y 120).
   ------------------------------------------------------------ */
/* The service heroes carry a lot of copy, and Figma left the top and bottom gaps
   uneven on each of them. Centring the block keeps those two gaps equal on every
   detail page, whatever the copy length. */
.hero--detail .hero__inner{justify-content:center; padding-block:clamp(40px,3vw,48px)}
.hero--detail .hero__text{max-width:min(100%, 658px)}
.hero--detail .pill{margin-bottom:clamp(18px,1.675vw,26.8px)}
.hero--detail .hero__text{margin-top:clamp(12px,1.0813vw,17.3px)}
.hero--detail .hero__text + .hero__text{margin-top:clamp(16px,1.5625vw,25px)}
.hero--detail .btn{margin-top:clamp(24px,2.2813vw,36.5px)}

/* Areas-of-interest pill and its list, measured from the UVBI page:
   copy ends 1496, pill 1537.5-1571.8, first bullet ink 1599.3. */
.about__text .pill--inline, .why__text .pill--inline{margin-top:clamp(22px,2.1875vw,35px)}
.bullets{margin-top:clamp(16px,1.4375vw,23px)}

/* ---- Health coaching page ---- */
#hc-what-is{padding-bottom:clamp(48px,9.125vw,146px)}   /* photo bottom 1745, band ends 1891 */
/* the covers cards carry a bullet list instead of a paragraph */
.inf-card .bullets{margin-top:0}
.inf-card .bullets li{line-height:1.625}
#hc-covers{padding-top:clamp(56px,7.125vw,114px); padding-bottom:clamp(32px,3.3125vw,53px)}  /* pill at 2005 in an 1891-2772 band */

/* ------------------------------------------------------------
   Health coaching page corrections
   ------------------------------------------------------------ */
/* SS2: the covers cards set their bullet copy at 15px */
.expect--four .inf-card__text, .expect--four .inf-card .bullets li{font-size:clamp(12px,0.9375vw,15px)}
/* SS3: this band is symmetrical, top and bottom alike */
#hc-covers{padding-bottom:clamp(56px,7.125vw,114px)}
/* SS4: Figma sets this band's columns 54 apart, like the IV page's. Scoped to the
   two-column layout so it cannot outrank the stacking breakpoints. */
@media (min-width: 1201px){
  #hc-isnot .why__top{gap:3.785%}   /* 53.7/1420 */
  #hc-isnot .why__text{width:45%}   /* 639/1420 */
}

/* SS1 + SS5: on these two the copy is centred against the photo rather than
   hanging from the top. Desktop only - below 1200 the block stacks. */
@media (min-width: 1201px){
}

/* SS6/SS7: on the service detail pages the testimonial column starts level with
   the FAQ column - the homepage's 114 drop is specific to the homepage. */
/* The service pages give the block much more air than the homepage does:
   measured on the IV and UVBI exports, the pink band ends 100.5 above the FAQ
   pill and the last FAQ card sits 93 above the CTA. Figma also drops the
   testimonial column so the two columns centre against each other. */
.tf--flush{padding-top:clamp(48px,6.2813vw,100.5px); padding-bottom:clamp(44px,5.85vw,93.6px)}
.tf--flush .tf__inner{align-items:center}
.tf--flush .tf__left{padding-top:0}

/* ------------------------------------------------------------
   Vitamin infusions page - the menu band runs two rows of cards:
   two wide ones carrying a bullet list and a note, then three
   standard ones.
   ------------------------------------------------------------ */
.expect--menu .inf-grid--two{grid-template-columns:repeat(2, minmax(0,1fr))}
.expect--menu .inf-grid--three{grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:min(1.5vw, 24px)}
.expect--menu .inf-card{min-height:0}
.inf-note{
  margin-top:clamp(14px,1.5vw,24px);
  background:#F7F0FE; border:1px solid #E4D2F8;
  border-radius:clamp(8px,0.75vw,12px);
  padding:clamp(12px,1.125vw,18px);
  font-size:clamp(12px,0.9375vw,15px); line-height:1.6; color:var(--ink);
}
@media (max-width: 900px){
  .expect--menu .inf-grid--two,
  .expect--menu .inf-grid--three{grid-template-columns:1fr}
}
#vit-delivery{padding-bottom:clamp(48px,9.125vw,146px)}   /* photo bottom 1745, band ends 1891 */
#vit-menu{padding-top:clamp(60px,7.6438vw,122.3px)}       /* pill at 2013 in an 1891-3276 band */
#vit-interested{padding-block:clamp(48px,6vw,96px)}       /* photo 3372-3982 in a 3276-4077 band */
/* this hero carries the longest copy of the set, so Figma tightens its padding */

#vit-menu{padding-bottom:clamp(72px,10.5625vw,169px)}   /* band 1891-3276 */
/* Figma gives this heading a wider box than the paragraph column so that
   "Understanding Intravenous" stays on one line (587 against a 560 column),
   and centres the copy against the photo. Desktop only - it stacks below 1200. */
@media (min-width: 1201px){
  /* opt-in: Figma gives some of these headings a box wider than the copy column
     so a hand-set line stays unbroken. Capped at the column plus the gutter. */
  .about__text .h2--wide{width:max-content; max-width:calc(100% + 5vw)}
}
@media (min-width: 1201px){
}

/* ------------------------------------------------------------
   Bulleted copy stays left-aligned at every width. The mobile
   breakpoint centres section text, which reads badly against a
   hanging bullet, so any block that contains a list opts out.
   ------------------------------------------------------------ */
.bullets{text-align:left}
@media (max-width: 900px){
  .about__text:has(.bullets), .why__text:has(.bullets),
  .inject__text:has(.bullets), .loc__text:has(.bullets){
    text-align:left; align-items:stretch;
  }
  .about__text:has(.bullets) .pill, .why__text:has(.bullets) .pill,
  .inject__text:has(.bullets) .pill, .loc__text:has(.bullets) .pill,
  .about__text:has(.bullets) .btn, .why__text:has(.bullets) .btn,
  .inject__text:has(.bullets) .btn, .loc__text:has(.bullets) .btn{margin-inline:0}
  .inf-card:has(.bullets){text-align:left; align-items:stretch}
}

/* ------------------------------------------------------------
   Natural weight loss page
   ------------------------------------------------------------ */
/* the Avere-TRIM block mirrors .about: product shot left, copy right */
.about--flip .about__media{order:0}
.about--flip .about__text{order:1}
.fineprint{font-size:clamp(12px,0.875vw,14px); font-style:italic; line-height:1.6; color:var(--body)}
.bullets--spaced li + li{margin-top:clamp(12px,1.125vw,18px)}
#wl-multifactorial{padding-bottom:clamp(48px,9.125vw,146px)}  /* photo bottom 1745, band ends 1891 */
#wl-approach{padding-block:clamp(48px,6vw,96px)}              /* photo 2940-3550 in a 2844-3645 band */
@media (min-width: 1201px){
  .about--flip .about__media{width:50.704%}
  .about--flip .about__text{width:42.958%}
  .about--flip .about__inner{gap:6.338%}
}

#wl-services{padding-top:clamp(60px,7.4375vw,119px); padding-bottom:clamp(60px,7.5vw,120px)}  /* pill 2010, cards 2193-2724, band 1891-2844 */
/* Figma runs this grid across the full container: 4 cards of 333 with 27 between */
#wl-services .inf-grid{width:100%; gap:min(1.6875vw,27px)}
#wl-services .inf-card{padding:clamp(16px,1.875vw,30px)}
#wl-services .inf-card__text{line-height:clamp(18px,1.375vw,22px)}

/* ------------------------------------------------------------
   Global: in every two-column copy/photo block the copy is
   centred against the photo. Figma does this on all of them.
   ------------------------------------------------------------ */
@media (min-width: 1201px){
  .about__inner{align-items:center}
  .about__text{padding-top:0}
}
@media (min-width: 1201px){
  /* same 54 between the columns as the other purple bands */
  #wl-approach .why__top{gap:3.785%}
  #wl-approach .why__text{width:45%}
  /* Figma splits this one down the middle: 700 copy, 20 gap, 700 photo */
  #wl-inquires .about__inner{gap:1.408%}
  #wl-inquires .about__text{width:49.296%}
  #wl-inquires .about__media{width:49.296%}
}
@media (min-width: 1201px){
  /* service pages: card 664, gap 37, FAQ 723 (measured off the page exports) */
  .tf--flush .tf__inner{gap:2.606%}
  .tf--flush .tf__left{width:46.76%}
  .tf--flush .tf__right{width:50.634%}
}

/* ============================================================
   CONTACT PAGE  (Figma: section 120-1050, card 810-1510 x 700,
   left column 90-702, card padding 40)
   ============================================================ */
.contact{padding-top:clamp(48px,5.3125vw,85px); padding-bottom:clamp(48px,5.3125vw,85px)}
.contact__inner{display:flex; align-items:flex-start; gap:7.606%}   /* 108/1420 */
.contact__text{width:43.099%; flex:none}                            /* 612/1420 */
.contact__form{width:49.296%; flex:none;                            /* 700/1420 */
  border:1px solid var(--purple); border-radius:clamp(16px,1.5vw,24px);
  padding:clamp(20px,2.5vw,40px);
}
.contact__text .h2{margin-top:clamp(16px,1.625vw,26px)}
.contact__text > p{margin-top:clamp(16px,1.625vw,26px)}

.contact__list{margin-top:clamp(24px,2.5vw,40px); display:grid; gap:0}
.contact__list li{
  display:flex; align-items:center; gap:clamp(12px,1.125vw,18px);
  padding-block:clamp(14px,1.375vw,22px);
  border-bottom:1px solid var(--line);
}
.contact__list li:last-child{border-bottom:0}
.contact__list img{width:clamp(36px,2.75vw,44px); height:auto; flex:none}
.contact__list h3{font-family:var(--serif); font-weight:400; font-size:clamp(18px,1.5vw,24px); line-height:1.2; color:var(--ink)}
.contact__list p{margin-top:clamp(4px,0.375vw,6px); font-size:var(--fs-body); color:var(--body)}
.contact__list a:hover{color:var(--purple)}

/* ---- form ---- */
.cform{margin-top:clamp(20px,2.25vw,36px); display:grid; gap:clamp(16px,1.6563vw,26.5px)}
.cform__row{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(12px,1.25vw,20px)}
.cform__field label{display:block; font-size:clamp(12px,0.875vw,14px); color:var(--ink); margin-bottom:clamp(5px,0.5vw,8px)}
.cform__field label span{color:#E05252}
.cform input[type="text"], .cform input[type="email"], .cform input[type="tel"], .cform textarea{
  width:100%; font:inherit; font-size:var(--fs-sm); color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:clamp(6px,0.5vw,8px);
  padding:0 clamp(12px,1.125vw,18px); height:clamp(38px,2.6875vw,43px);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cform textarea{height:auto; min-height:clamp(96px,7.4375vw,119px); padding:clamp(12px,1.125vw,18px); resize:vertical; line-height:1.5}
.cform ::placeholder{color:#A8A8A8}
.cform input:focus, .cform textarea:focus{outline:0; border-color:var(--purple); box-shadow:0 0 0 3px rgba(152,74,232,.12)}
.cform__submit{width:100%; justify-content:center; height:clamp(46px,3.4375vw,55px); border-radius:clamp(8px,0.75vw,12px)}
.cform__consent{display:flex; align-items:flex-start; gap:clamp(8px,0.75vw,12px)}
.cform__consent input{width:18px; height:18px; flex:none; margin-top:2px; accent-color:var(--purple)}
.cform__consent label{font-size:clamp(12px,0.875vw,14px); line-height:1.5; color:var(--body)}

@media (max-width: 1200px){
  .contact__inner{flex-direction:column; align-items:stretch; gap:clamp(28px,4vw,44px)}
  .contact__text, .contact__form{width:100%}
}
@media (max-width: 600px){
  .cform__row{grid-template-columns:1fr}
}

/* Locations on a dark band (contact page). Same block, different ground. */
.loc--dark{
  background:url('../images/locations-bg.jpg') center/cover no-repeat #3B2354;
  color:#fff;
  padding-block:clamp(36px,3.625vw,58px);
}
.loc--dark .h2{color:#fff}
.loc--dark .pill--outline{border-color:rgba(255,255,255,.85); color:#fff}
.loc--dark .loc__text p:not(.pill){color:#F0EAF2}
.loc--dark .loc-card{background:rgba(255,255,255,.07); border-color:rgba(216,187,247,.55)}
.loc--dark .loc-card__addr{color:#EDE7F0}
.loc--dark .loc-card .link-arrow{color:#fff}
.loc--dark .loc-card .link-arrow svg{color:#fff}
/* On the dark band the button keeps its purple fill and white label; only the
   arrow disc flips to white so it reads against the purple. */
.loc--dark .btn--purple .btn__arrow{content:url("../icons/arrow-white.svg")}
/* honeypot - off-screen, never shown to a person */
.cform__hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.cform__note{
  margin-top:clamp(14px,1.25vw,20px); padding:clamp(10px,1vw,16px) clamp(12px,1.125vw,18px);
  border-radius:clamp(8px,0.75vw,12px); font-size:var(--fs-sm); line-height:1.5;
  background:#F1FBF3; border:1px solid #BFE6C8; color:#1F6B33;
}
.cform__note.is-error{background:#FDF2F2; border-color:#F0C3C3; color:#A32B2B}

/* ============================================================
   PATIENT LETTER PAGE
   Measured off the 3x export: photo 90-900 x 835, rows 928-1512,
   row 83 tall with 21 between, FAQ list 1180 centred.
   ============================================================ */
/* this hero sits low over the photo, the way the homepage one does */
.hero--letter .hero__inner{justify-content:flex-end; padding-bottom:clamp(48px,5.6875vw,91px)}

.cond{padding-top:clamp(40px,4.7313vw,75.7px); padding-bottom:clamp(40px,4.5vw,72px)}
.cond__lead{max-width:min(100%,83.099%); margin-inline:auto; text-align:center}   /* 1180/1420 */
.cond__inner{
  margin-top:clamp(28px,4.6438vw,74.3px);
  display:flex; align-items:flex-start; gap:1.972%;    /* 28/1420 */
}
.cond__media{width:57.042%; flex:none}                 /* 810/1420 */
.cond__media img{width:100%; height:auto; border-radius:var(--radius-lg)}
.cond__list{width:40.986%; flex:none; display:grid; gap:clamp(12px,1.3125vw,21px)}  /* 582/1420 */
.cond__list li{
  display:flex; align-items:center; gap:clamp(10px,0.875vw,14px);
  min-height:clamp(58px,5.1875vw,83px);
  border:1px solid #000; border-radius:clamp(10px,1vw,16px);
  padding:clamp(10px,0.875vw,14px) clamp(14px,1.5vw,24px);
  transition:border-color .2s ease, background-color .2s ease;
}
.cond__list li:hover{border-color:var(--purple); background:#FBF5FF}
.cond__list img{width:clamp(22px,1.75vw,28px); height:auto; flex:none}
.cond__list span{font-family:var(--serif); font-weight:400; font-size:clamp(16px,1.375vw,22px); line-height:1.25; color:var(--ink)}

.questions{padding-block:clamp(40px,4.5vw,72px)}
.questions__title{text-align:center}
.questions .faq{margin-top:clamp(28px,3.125vw,50px); width:min(100%,83.099%); margin-inline:auto}  /* 1180/1420 */

@media (max-width: 1200px){
  .cond__inner{flex-direction:column; align-items:stretch; gap:clamp(24px,3.5vw,40px)}
  .cond__media, .cond__list{width:100%}
  .cond__media img{max-width:810px; margin-inline:auto}
  .cond__lead{max-width:100%}
  .questions .faq{width:100%}
}

/* ============================================================
   DEAR PHYSICIAN COLLABORATION
   Figma 1600 artboard. Measured off the 3x export:
   image 910-1510 x 162-717 | pill 190.7 | card 330-483
   h2 baselines 866.7 / 940.3 | chips 1038.5 & 1102.5 (h 34, gap 30)
   uvbi 1335.7 | injections h2 1574.7, cards 1627.5-1683.5
   sign-off 1813.7-1877 | agreement h2 2024.7, cards 2160.5-3556.5
   disclosure pill 3658.5, A/B/C 3894.5-4043.5, key head 4124
   acknowledgment h2 4411, inputs 4543-4599
   ============================================================ */
.dpc{padding-top:clamp(48px,6.1813vw,98.9px)}
.dpc--intro{padding-top:clamp(24px,2.625vw,42px)}
.dpc--treat{padding-top:clamp(48px,6.075vw,97.2px)}
.dpc--agree{padding-top:clamp(48px,6.0063vw,96.1px)}
.dpc--disclose{padding-top:clamp(48px,6.5188vw,104.3px)}

/* the two headline styles this page uses on top of the shared .h2 */
.h2--tall{line-height:1.2283}          /* 73.7 / 60 */
.dpc-h2{text-align:center}
.dpc-serif{
  font-family:var(--serif); font-weight:400; letter-spacing:0; color:var(--ink);
  font-size:clamp(24px,2.5vw,40px); line-height:1.2;
}
.dpc-serif--center{text-align:center}
.dpc-serif--sm{font-size:clamp(22px,2.1875vw,35px)}
.dpc-serif--purple{color:var(--purple)}

/* ---------- 1. the letter opening ---------- */
.dpc-intro__inner{
  display:grid; align-items:center;
  grid-template-columns:54.2958% 42.2535%;   /* 771 / 600 of 1420 */
  justify-content:space-between;
}
.dpc-intro__media img{
  display:block; width:100%; height:auto; aspect-ratio:600 / 555; object-fit:cover;
  border:1px solid var(--purple); border-radius:clamp(12px,1.25vw,20px);
}
.dpc-intro__lead{
  margin-top:clamp(16px,1.45vw,23.2px);
  font-size:clamp(15px,1.125vw,18px); line-height:1.6111;  /* 29 / 18 */
  color:var(--body);
}
.dpc-intro__lead strong{font-weight:600; color:var(--purple)}
.dpc-intro__body{
  margin-top:clamp(16px,1.525vw,24.4px);
  font-size:var(--fs-body); line-height:1.625;             /* 26 / 16 */
  color:var(--body);
}
.dpc-addr{
  margin-top:clamp(16px,1.4875vw,23.8px);
  border:1px solid var(--purple); border-radius:clamp(12px,1vw,16px);
  padding:clamp(16px,1.3125vw,21px) clamp(16px,1.5vw,24px) clamp(14px,1.2625vw,20.2px);
}
.dpc-addr__name{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(22px,1.875vw,30px); line-height:1.3333; /* 40 / 30 */
}
.dpc-addr__lines{
  font-size:clamp(15px,1.125vw,18px); line-height:1.9444;  /* 35 / 18 */
  color:var(--body);
}
.dpc-addr__lines strong{font-weight:600; color:#333}

/* ---------- 2. treatment infusions ---------- */
.dpc-treat__lead{
  margin-top:clamp(8px,0.6563vw,10.5px); text-align:center;
  font-size:var(--fs-body); line-height:1.625; color:var(--body);
}
.dpc-chips{
  margin-top:clamp(20px,2.4625vw,39.4px);
  display:grid; gap:clamp(12px,1.875vw,30px); justify-items:center;
}
.dpc-chips__row{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(12px,1.875vw,30px);
}
.dpc-chips__row li{
  display:flex; align-items:center; justify-content:center;
  height:var(--pill-h); padding-inline:clamp(14px,1.7188vw,27.5px);
  border:1px solid #000; border-radius:999px;
  font-size:var(--fs-body); line-height:1; color:var(--ink);
  text-align:center;
}
.dpc-treat__note{
  margin-top:clamp(20px,2.5375vw,40.6px); text-align:center;
  font-size:var(--fs-body); line-height:1.625; color:var(--body);
}

/* ---------- 3. UVBI / ozone ---------- */
.dpc-uvbi__body{
  margin-top:clamp(10px,0.8813vw,14.1px);
  font-size:var(--fs-body); line-height:1.625; color:var(--body);
}

/* ---------- 4. injections + sign-off ---------- */
.dpc-inject__grid{
  margin-top:clamp(20px,2.4125vw,38.6px);
  display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(10px,1vw,16px);
}
.dpc-inject__grid li{
  display:flex; align-items:center;
  min-height:clamp(46px,3.5vw,56px);
  padding:clamp(10px,0.875vw,14px) clamp(14px,1.4375vw,23px);
  background:var(--pill-lilac); border:1px solid var(--purple);
  border-radius:clamp(8px,0.75vw,12px);
  font-size:var(--fs-body); font-weight:500; line-height:1.375; color:var(--ink);
}
.dpc-inject__grid li::before{content:"\2022"; margin-right:.75em}
.dpc-sign{
  margin-top:clamp(48px,8.1375vw,130.2px);
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px,2vw,32px); flex-wrap:wrap;
}
.dpc-sign__note{font-size:var(--fs-body); line-height:1.625; color:var(--body)}
.dpc-sign__note a{color:inherit}
.dpc-sign__by{text-align:right}
.dpc-sign__name{
  font-size:clamp(17px,1.25vw,20px); font-weight:600; line-height:1.5; color:var(--purple);
}
.dpc-sign__role{
  margin-top:clamp(4px,0.4625vw,7.4px);
  font-size:var(--fs-body); line-height:1.625; color:var(--body);
}

/* ---------- 5. coordination of care agreement ---------- */
.dpc-clauses{
  margin-top:clamp(24px,2.4938vw,39.9px);
  display:grid; gap:clamp(16px,1.875vw,30px);
}
.dpc-clause{
  border:1px solid var(--purple); border-radius:clamp(12px,1vw,16px);
  padding:clamp(16px,1.3125vw,21px) clamp(16px,1.5vw,24px) clamp(16px,1.4375vw,23px);
}
.dpc-clause__title{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(22px,1.875vw,30px); line-height:1.3333;
}
.dpc-clause p{
  margin-top:clamp(6px,0.525vw,8.4px);
  font-size:var(--fs-body); line-height:1.5; color:var(--body);
}
.dpc-clause p + p{margin-top:clamp(16px,1.5vw,24px)}

/* ---------- 6. patient disclosure ---------- */
.dpc-pill{margin-inline:auto; padding-inline:clamp(16px,1.75vw,28px)}
.dpc--disclose .dpc-serif--sm{margin-top:clamp(32px,3.8125vw,61px)}
.dpc-disclose__lead{
  margin-top:clamp(16px,1.4938vw,23.9px);
  font-size:var(--fs-body); line-height:1.625; color:var(--body);
}
.dpc-abc{
  margin-top:clamp(16px,1.5063vw,24.1px);
  display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(12px,1.25vw,20px);
}
.dpc-abc li{
  border:1px solid var(--purple); border-radius:clamp(8px,0.75vw,12px);
  padding:clamp(16px,1.5vw,24px) clamp(16px,1.5vw,24px) clamp(16px,1.4125vw,22.6px);
}
.dpc-abc__key{
  display:block; color:var(--purple); font-weight:600;
  font-size:clamp(24px,2vw,32px); line-height:1.4;
}
.dpc-abc p{
  margin-top:clamp(8px,0.8563vw,13.7px);
  font-size:var(--fs-body); line-height:1.3125;   /* 21 / 16 */
  color:var(--body);
}
.dpc--disclose .dpc-serif--purple{margin-top:clamp(28px,3.1875vw,51px)}
.dpc-disclose__key{
  margin-top:clamp(10px,0.9313vw,14.9px);
  font-size:var(--fs-body); line-height:1.625; color:var(--body);
}
.dpc-disclose__key + .dpc-disclose__key{margin-top:clamp(16px,1.625vw,26px)}

/* ---------- 7. patient acknowledgment ---------- */
.dpc--ack{padding-bottom:clamp(40px,5.375vw,86px)}
.dpc-ack__lead{
  margin-top:clamp(8px,0.6813vw,10.9px);
  font-size:var(--fs-body); line-height:1.625; color:var(--body);
}
.dpc-ack__row{
  margin-top:clamp(24px,3.125vw,50px);
  display:grid; grid-template-columns:39.4366% 39.4366% 17.1831%;  /* 560 / 560 / 244 */
  justify-content:space-between;
}
.dpc-field label{
  display:block;
  font-size:clamp(12px,0.875vw,14px); line-height:1.4286; letter-spacing:.4px;
  text-transform:uppercase; color:var(--ink); font-weight:500;
}
.dpc-field input{
  margin-top:clamp(8px,0.8125vw,13px);
  width:100%; height:clamp(46px,3.5vw,56px);
  padding-inline:clamp(14px,1.25vw,20px);
  background:#F9F6FD; border:1px solid #EBDFF5; border-radius:clamp(8px,0.625vw,10px);
  font-family:var(--sans); font-size:var(--fs-body); color:var(--ink);
}
.dpc-field input::placeholder{color:#9BA8BB}
.dpc-field input:focus-visible{outline:2px solid var(--purple); outline-offset:2px}

/* ---------- responsive ---------- */
@media (max-width: 1200px){
  .dpc-intro__inner{grid-template-columns:1fr; gap:clamp(24px,4vw,40px)}
  .dpc-intro__media{order:-1}
  .dpc-intro__media img{max-width:600px; margin-inline:auto}
}
@media (max-width: 900px){
  .dpc-inject__grid, .dpc-abc{grid-template-columns:1fr}
  .dpc-sign{flex-direction:column; align-items:flex-start; gap:clamp(16px,3vw,24px)}
  .dpc-sign__by{text-align:left}
  .dpc-ack__row{grid-template-columns:1fr; gap:clamp(16px,2.5vw,24px)}
}
@media (max-width: 600px){
  .dpc-chips__row li{height:auto; min-height:var(--pill-h); padding-block:6px}
}

/* ------------------------------------------------------------
   Round two of page-by-page corrections against the exports.
   ------------------------------------------------------------ */

/* Contact details: the file sets these lines at 20, not the body 16. */
.contact__list p{font-size:clamp(15px,1.25vw,20px)}

/* Patient letter CTA: the address line is one line in the file (702 of copy). */
.cta--letter .cta__body p{max-width:min(100%, 760px)}

/* Health coaching intro: the heading is one line in the file. */
#hc-what-is .about__text .h2{width:max-content; max-width:calc(100% + 5vw)}

/* Health coaching cards: the file sets the bullet copy in black. */
#hc-covers .inf-card .bullets li{color:var(--ink)}

/* Boxes on the Dear Physician page and every FAQ row are 10px in the file. */
.faq__item{border-radius:10px}
.dpc-addr,
.dpc-clause,
.dpc-abc li,
.dpc-inject__grid li,
.dpc-field input,
.dpc-intro__media img{border-radius:10px}

/* The sign-off block is right-aligned as a column, but its two lines are set
   flush left against each other. */
.dpc-sign__by{text-align:left}

/* Ozone band: the file sets the copy at 873-1512 against the 720 photo, the same
   split the weight-loss band uses, not the wider 665 column. */
@media (min-width: 1201px){
  #ozone .why__text{width:45%}
}

/* Weight loss: the file leaves 117 between the TRIM shot and the next band,
   not the 200 the shared .about--plain padding gives. */
#wl-trim{padding-bottom:clamp(28px,3.625vw,58px)}
#wl-inquires{padding-top:clamp(28px,3.6875vw,59px)}

/* ------------------------------------------------------------
   Mobile rhythm: every section contributes 15 above and 15 below, so the gap
   between any two sections is 30. The hero is exempt - its padding is the
   banner's own layout, not spacing between sections. The id- and page-scoped
   paddings above carry higher specificity, so this override needs !important.
   ------------------------------------------------------------ */
@media (max-width: 900px){
  main > section:not(.hero){
    padding-top:15px !important;
    padding-bottom:15px !important;
  }
}

/* ============================================================
   THANK YOU / 404 — the two standalone message pages. They reuse the shared
   chrome and type; only this block is theirs.
   ============================================================ */
.btn--outline{background:transparent; color:var(--purple); border:1px solid var(--purple)}
.btn--outline:hover{background:#F6EEFE}

.msg{padding-block:clamp(56px,7.5vw,120px)}
.msg__inner{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  max-width:min(100%, 760px); margin-inline:auto;
}
.msg__mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(56px,4.5vw,72px); height:clamp(56px,4.5vw,72px);
  border-radius:999px; background:var(--pill-lilac); color:var(--purple);
  margin-bottom:clamp(20px,1.75vw,28px);
}
.msg__mark svg{width:52%; height:52%}
.msg__code{
  font-family:var(--serif); line-height:1; color:var(--purple);
  font-size:clamp(72px,9vw,144px); margin-bottom:clamp(8px,0.75vw,12px);
}
.msg .h2{margin-top:clamp(14px,1.25vw,20px)}
.msg__text{
  margin-top:clamp(12px,1vw,16px); color:var(--body);
  font-size:var(--fs-body); line-height:1.625;
}
.msg__text a{color:var(--purple); font-weight:500}
.msg__actions{
  margin-top:clamp(22px,2vw,32px);
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(12px,1vw,16px);
}
.msg__links{
  margin-top:clamp(28px,2.5vw,40px); padding-top:clamp(20px,1.5vw,24px);
  border-top:1px solid var(--line); width:100%;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(12px,1.5vw,24px);
  font-size:var(--fs-sm); color:var(--body);
}
.msg__links a{color:var(--body)}
.msg__links a:hover{color:var(--purple)}

/* The three legal shells are short enough to leave white space under the footer,
   so they pin it to the bottom. Scoped - every other page is long enough. */
.page-legal{display:flex; flex-direction:column; min-height:100vh}
.page-legal main{flex:1 0 auto}

/* Addresses link to the Google Business profile. They inherit their block's
   colour so the link reads as the address, not as a stray blue string. */
.addr-link{color:inherit; text-decoration:none}
.addr-link:hover, .addr-link:focus-visible{text-decoration:underline}
.loc-card__addr .addr-link:hover{color:var(--purple)}

/* One clinic, so the four-across grid becomes a single card that fills the
   column instead of sitting alone in a row of empty tracks. */
.loc__cards--single{grid-template-columns:minmax(0,1fr)}

/* Contact page map. Full width under the card row; the 21:9 box keeps it from
   dominating the section on a wide screen and from collapsing on a phone. */
.loc__map{margin-top:clamp(28px,3vw,48px)}
.loc__map iframe{
  display:block; width:100%; border:0;
  aspect-ratio:21/9; min-height:260px;
  border-radius:var(--radius-lg);
}
@media (max-width: 900px){ .loc__map iframe{aspect-ratio:4/3} }
.loc__cards--single .loc-card{max-width:clamp(280px,30vw,480px)}
@media (max-width: 1200px){ .loc__cards--single .loc-card{margin-inline:auto} }

/* Dear Physician: the page now opens on a real heading rather than a salutation. */
.dpc-intro__title{margin-top:clamp(14px,1.45vw,23.2px)}
#dp-intro .dpc-intro__lead{margin-top:clamp(12px,1.125vw,18px)}
.dpc-intro__body a{color:var(--purple)}

/* Weight loss: the physician-led options block sits on its own line, centred,
   between the TRIM shot and the enquiry band. */
#wl-glp1{padding-top:clamp(32px,3.5vw,56px); padding-bottom:0}
.glp1{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(10px,0.875vw,14px);
  border:1px solid var(--purple); border-radius:clamp(12px,1vw,16px);
  padding:clamp(24px,2.5vw,40px) clamp(20px,2vw,32px);
}
.glp1 p:not(.pill){font-size:var(--fs-body); line-height:1.625; color:var(--body); max-width:62ch}
.glp1 p a{color:var(--purple)}
.glp1 .btn{margin-top:clamp(6px,0.625vw,10px)}

/* FAQ answers can now carry a short list (the conditions IV therapy can support). */
.faq__a .faq__list{margin:0 0 clamp(10px,1vw,16px); padding:0 clamp(14px,1.75vw,28px); color:#3A3A3A}
.faq__a .faq__list + p, .faq__a p + p{margin-top:0}