/* ==========================================================================
   Earl Clayton Wellness Centre
   Design system — palette drawn directly from the logo
   ========================================================================== */

/* ---- 1. Tokens --------------------------------------------------------- */
:root{
  /* Brand — sampled from the logo artwork */
  --forest:        #12211B;   /* wordmark ink */
  --forest-deep:   #0B1611;
  --forest-soft:   #1E3329;
  --forest-line:   #2C4438;

  /* sampled straight off the logo artwork (mean #BB7601, mid #C37C01) */
  --gold:          #C37C01;   /* the logo gold itself */
  --gold-deep:     #9C6200;   /* small text on ivory, button fills */
  --gold-light:    #E9A62B;   /* accents on the forest grounds */
  --gold-pale:     #F3CE8C;

  --ivory:         #FBF8F2;
  --cream:         #F4EDE1;
  --cream-deep:    #EBE1D0;

  --ink:           #12211B;
  --ink-70:        #46554D;
  --ink-55:        #6B7972;
  --on-dark:       #F3EEE3;
  --on-dark-70:    #B9C4BC;

  /* Type */
  --display: "Cormorant Garamond", "Lora", "GFS Baskerville", Georgia, serif;
  --body:    "Jost", "Poppins", "Carlito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Rhythm */
  --wrap: 1200px;
  --wrap-narrow: 820px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(72px, 9vw, 132px);

  --radius: 2px;
  --radius-lg: 4px;

  --shadow-sm: 0 1px 2px rgba(18,33,27,.04), 0 8px 24px -12px rgba(18,33,27,.10);
  --shadow-md: 0 2px 4px rgba(18,33,27,.05), 0 24px 48px -20px rgba(18,33,27,.16);
  --shadow-lg: 0 40px 80px -32px rgba(18,33,27,.28);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- 2. Reset ---------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; overflow-x:clip; }
body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.72;
  color:var(--ink-70);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }

h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--ink);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.6rem, 6vw, 4.6rem); }
h2{ font-size:clamp(2rem, 4.2vw, 3.1rem); }
h3{ font-size:clamp(1.3rem, 2.2vw, 1.7rem); line-height:1.25; }
h4{ font-size:1.08rem; line-height:1.35; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--gold); color:#fff; }

/* ---- 3. Layout --------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:var(--wrap-narrow); }
.section{ padding-block:var(--section-y); position:relative; }
.section--tight{ padding-block:clamp(52px,6vw,84px); }
.section--cream{ background:var(--cream); }
.section--dark{ background:var(--forest); color:var(--on-dark-70); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{ color:var(--on-dark); }

.grid{ display:grid; gap:clamp(20px,2.6vw,34px); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:980px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* ---- 4. Typographic helpers -------------------------------------------- */
.eyebrow{
  font-family:var(--body);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 1.1rem;
  display:flex; align-items:center; gap:.85em;
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:var(--gold); flex:none; opacity:.8;
}
.eyebrow--center{ justify-content:center; }
.section--dark .eyebrow{ color:var(--gold-light); }

.lede{ font-size:clamp(1.06rem,1.5vw,1.22rem); line-height:1.7; color:var(--ink-70); }
.section--dark .lede{ color:var(--on-dark-70); }
.section-head{ max-width:64ch; margin-bottom:clamp(38px,5vw,64px); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .eyebrow{ justify-content:center; }

.muted{ color:var(--ink-55); font-size:.94rem; }
.section--dark .muted{ color:var(--on-dark-70); opacity:.75; }

/* Gold hairline divider */
.rule{ height:1px; background:linear-gradient(90deg,transparent,var(--gold) 22%,var(--gold) 78%,transparent); opacity:.5; border:0; margin:0; }

/* ---- 5. Buttons -------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:1.02em 2.1em;
  font-family:var(--body); font-size:.78rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:all .4s var(--ease);
  position:relative; overflow:hidden; cursor:pointer;
  line-height:1;
}
.btn--gold{ background:var(--gold-deep); color:#fff; }
.btn--gold:hover{ background:var(--forest); color:var(--gold-light); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--outline{ border-color:rgba(18,33,27,.24); color:var(--ink); }
.btn--outline:hover{ border-color:var(--gold-deep); color:var(--gold-deep); background:rgba(195,124,1,.06); transform:translateY(-2px); }
.btn--ghost-light{ border-color:rgba(243,238,227,.32); color:var(--on-dark); }
.btn--ghost-light:hover{ border-color:var(--gold-light); color:var(--gold-light); background:rgba(233,166,43,.08); transform:translateY(-2px); }
.btn--light{ background:var(--ivory); color:var(--forest); }
.btn--light:hover{ background:var(--gold-light); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }
.btn-row--center{ justify-content:center; }

/* Text link with animated gold underline */
.link{
  color:var(--gold-deep); font-size:.78rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.6em;
  padding-bottom:3px; position:relative;
}
.link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.link:hover::after{ transform:scaleX(1); transform-origin:left; }
.link .arw{ transition:transform .4s var(--ease); }
.link:hover .arw{ transform:translateX(5px); }
.section--dark .link{ color:var(--gold-light); }

/* ---- 6. Art panels ----------------------------------------------------
   Self-contained CSS artwork standing in for photography. To use a real
   photograph instead, add:  style="background-image:url('img/your.jpg')"
   to the element — it will sit on top of the gradient automatically.     */
.art{
  position:relative; overflow:hidden;
  background-color:var(--forest);
  background-size:cover; background-position:center;
  border-radius:var(--radius-lg);
  isolation:isolate;
}
.art::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(233,166,43,.42), transparent 58%),
    radial-gradient(90% 80% at 12% 88%, rgba(156,98,0,.30), transparent 62%),
    linear-gradient(152deg, var(--forest-soft) 0%, var(--forest) 52%, var(--forest-deep) 100%);
}
/* fine grain + a soft radial bloom, keeps large flat areas from looking dead */
.art::after{
  content:""; position:absolute; inset:0; z-index:1; opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.42'/></svg>");
  mix-blend-mode:overlay;
}
.art > *{ position:relative; z-index:2; }
.art--ratio{ aspect-ratio:4/3; }
.art--wide{ aspect-ratio:16/9; }
.art--tall{ aspect-ratio:3/4; }

/* per-category tinting so the six treatment pages don't look identical */
.art--a::before{ background:radial-gradient(120% 90% at 80% 15%,rgba(233,166,43,.50),transparent 58%),linear-gradient(150deg,#20372C,#12211B 55%,#0B1611); }
.art--b::before{ background:radial-gradient(110% 95% at 22% 18%,rgba(195,124,1,.44),transparent 60%),linear-gradient(160deg,#1B2E26,#101E19 58%,#0B1611); }
.art--c::before{ background:radial-gradient(130% 80% at 50% 4%,rgba(243,206,140,.40),transparent 56%),linear-gradient(140deg,#243B30,#13221C 55%,#0B1611); }
.art--d::before{ background:radial-gradient(120% 100% at 86% 84%,rgba(156,98,0,.46),transparent 58%),linear-gradient(200deg,#1D3128,#12211B 56%,#0B1611); }
.art--e::before{ background:radial-gradient(100% 90% at 14% 82%,rgba(233,166,43,.38),transparent 60%),linear-gradient(120deg,#1F3529,#111F1A 56%,#0B1611); }
.art--f::before{ background:radial-gradient(140% 90% at 62% 10%,rgba(195,124,1,.38),transparent 54%),linear-gradient(170deg,#1A2D25,#101E18 58%,#0B1611); }

/* the dandelion mark used as a watermark inside art panels */
.art-mark{
  position:absolute; inset:auto -10% -18% auto; width:62%; z-index:1;
  opacity:.20; filter:saturate(1.1); pointer-events:none;
  mix-blend-mode:screen;
}
.art-mark--center{ inset:50% auto auto 50%; transform:translate(-50%,-50%); width:48%; opacity:.24; }

/* six placements so repeated panels never read as clones */
.art-mark--v1{ inset:auto -12% -22% auto; width:66%; opacity:.22; transform:rotate(-8deg); }
.art-mark--v2{ inset:-24% auto auto -14%; width:72%; opacity:.18; transform:rotate(14deg); }
.art-mark--v3{ inset:50% auto auto 50%; width:52%; opacity:.24; transform:translate(-50%,-50%); }
.art-mark--v4{ inset:auto auto -30% 50%; width:78%; opacity:.16; transform:translateX(-50%) rotate(6deg); }
.art-mark--v5{ inset:-18% -18% auto auto; width:60%; opacity:.24; transform:rotate(-22deg); }
.art-mark--v6{ inset:auto auto -16% -18%; width:64%; opacity:.20; transform:rotate(18deg); }

/* a soft diagonal light sweep gives the flat panels depth */
.art-sheen{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(112deg,transparent 28%,rgba(255,248,232,.10) 47%,transparent 64%);
}

/* label sitting on an art panel */
.art-label{
  position:absolute; inset:auto 0 0 0; padding:clamp(20px,3vw,32px);
  background:linear-gradient(0deg,rgba(11,22,17,.88),rgba(11,22,17,.35) 55%,transparent);
  color:var(--on-dark);
}
.art-label h3{ color:var(--on-dark); margin:0 0 .25em; }
.art-label p{ margin:0; font-size:.9rem; color:var(--on-dark-70); }

/* ---- 7. Top contact strip --------------------------------------------- */
.topbar{
  background:var(--forest-deep); color:var(--on-dark-70);
  font-size:.76rem; letter-spacing:.06em;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:42px; }
.topbar a{ color:var(--on-dark-70); transition:color .3s; }
.topbar a:hover{ color:var(--gold-light); }
.topbar-items{ display:flex; gap:26px; align-items:center; }
.topbar-social{ display:flex; gap:16px; align-items:center; }
.topbar-social svg{ width:15px; height:15px; fill:currentColor; }
@media(max-width:860px){ .topbar{ display:none; } }

/* ---- 8. Header / navigation -------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:900;
  background:rgba(251,248,242,.92);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid rgba(18,33,27,.08);
  transition:box-shadow .4s var(--ease), background .4s;
}
.site-header.is-stuck{ box-shadow:0 1px 30px -8px rgba(18,33,27,.16); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:84px; }

.brand{ display:flex; align-items:center; gap:14px; flex:none; }
.brand img{ height:58px; width:auto; transition:height .35s var(--ease); }
@media(max-width:900px){ .brand img{ height:50px; } }
@media(max-width:520px){ .brand img{ height:42px; } }

.nav{ display:flex; align-items:center; gap:6px; }
.nav > li{ position:relative; }
.nav-link{
  display:flex; align-items:center; gap:.45em;
  padding:12px 16px;
  font-size:.75rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); position:relative; transition:color .3s;
}
.nav-link::after{
  content:""; position:absolute; left:16px; right:16px; bottom:4px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .42s var(--ease);
}
.nav-link:hover{ color:var(--gold-deep); }
.nav-link:hover::after,.nav-link[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.nav-link[aria-current="page"]{ color:var(--gold-deep); }
.nav-caret{ width:8px; height:8px; fill:none; stroke:currentColor; stroke-width:1.6; transition:transform .35s var(--ease); }
.has-sub:hover .nav-caret{ transform:rotate(180deg); }

/* dropdown */
.subnav{
  position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%) translateY(-8px);
  min-width:290px; padding:12px;
  background:var(--ivory); border:1px solid rgba(18,33,27,.09);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transition:all .34s var(--ease);
}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.subnav a{
  display:block; padding:11px 15px; border-radius:var(--radius);
  font-size:.9rem; color:var(--ink); transition:all .28s;
}
.subnav a small{ display:block; font-size:.74rem; color:var(--ink-55); letter-spacing:.02em; margin-top:1px; }
.subnav a:hover{ background:var(--cream); color:var(--gold-deep); padding-left:20px; }

.header-cta{ flex:none; }
@media(max-width:1080px){ .header-cta{ display:none; } }

/* burger */
.burger{ display:none; width:42px; height:42px; align-items:center; justify-content:center; flex:none; }
.burger span{ display:block; width:22px; height:1.5px; background:var(--ink); position:relative; transition:background .3s; }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:22px; height:1.5px; background:var(--ink);
  transition:transform .4s var(--ease);
}
.burger span::before{ top:-7px; } .burger span::after{ top:7px; }
.is-open .burger span{ background:transparent; }
.is-open .burger span::before{ transform:translateY(7px) rotate(45deg); }
.is-open .burger span::after{ transform:translateY(-7px) rotate(-45deg); }
@media(max-width:1080px){
  .burger{ display:flex; }
  /* backdrop-filter would make the header a containing block for the
     fixed-position drawer, so it is dropped at mobile widths. */
  .site-header{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--ivory); }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(400px,86vw); height:100dvh;
    background:var(--ivory); flex-direction:column; align-items:stretch; gap:0;
    padding:104px 26px 40px; overflow-y:auto;
    transform:translateX(100%); transition:transform .5s var(--ease);
    box-shadow:var(--shadow-lg);
  }
  .is-open .nav{ transform:translateX(0); }
  .nav-link{ padding:16px 6px; font-size:.82rem; border-bottom:1px solid rgba(18,33,27,.07); justify-content:space-between; }
  .nav-link::after{ display:none; }
  /* media queries add no specificity, so these must out-specify
     `.has-sub:hover .subnav` from the desktop rules above */
  .has-sub .subnav,
  .has-sub:hover .subnav,
  .has-sub:focus-within .subnav{
    position:static; transform:none; opacity:1; visibility:visible;
    min-width:0; width:100%; box-shadow:none; border:0; background:transparent;
    padding:0 0 10px 10px; display:none;
  }
  .has-sub.is-expanded .subnav,
  .has-sub.is-expanded:hover .subnav{ display:block; }
  .has-sub.is-expanded .nav-caret{ transform:rotate(180deg); }
  .subnav a{ padding:10px 12px; font-size:.85rem; }
}
.nav-backdrop{
  position:fixed; inset:0; background:rgba(11,22,17,.44); z-index:880;
  opacity:0; visibility:hidden; transition:all .4s;
}
.is-open .nav-backdrop{ opacity:1; visibility:visible; }

/* ---- 9. Hero ----------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--forest);
  color:var(--on-dark-70);
  padding-block:clamp(88px,13vw,168px);
  isolation:isolate;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(80% 62% at 72% 8%, rgba(233,166,43,.30), transparent 62%),
    radial-gradient(70% 70% at 8% 96%, rgba(156,98,0,.24), transparent 64%),
    linear-gradient(158deg,#1B2E26 0%, #12211B 48%, #0A1410 100%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.42;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.4'/></svg>");
  mix-blend-mode:overlay;
}
.hero-mark{
  position:absolute; right:-6%; top:50%; transform:translateY(-50%);
  width:min(620px,52vw); z-index:-1; opacity:.16;
  mix-blend-mode:screen; pointer-events:none;
  animation:float 16s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(-50%) } 50%{ transform:translateY(-53%) } }
@media(max-width:820px){ .hero-mark{ opacity:.10; right:-24%; } }

.hero-inner{ max-width:750px; position:relative; }
.hero h1{ color:var(--on-dark); margin-bottom:.34em; }
.hero h1 em{ font-style:italic; color:var(--gold-light); }
.hero .lede{ color:var(--on-dark-70); max-width:56ch; margin-bottom:2.3rem; font-size:clamp(1.06rem,1.6vw,1.24rem); }
.hero .eyebrow{ color:var(--gold-light); }

.hero-meta{
  display:flex; flex-wrap:wrap; gap:12px 34px; margin-top:3rem;
  padding-top:1.9rem; border-top:1px solid rgba(243,238,227,.14);
  font-size:.82rem; letter-spacing:.06em; color:var(--on-dark-70);
}
.hero-meta span{ display:flex; align-items:center; gap:.6em; }
.hero-meta svg{ width:15px; height:15px; stroke:var(--gold-light); fill:none; stroke-width:1.5; flex:none; }

/* compact hero for interior pages */
.pagehead{
  position:relative; overflow:hidden; background:var(--forest); color:var(--on-dark-70);
  padding-block:clamp(64px,8vw,108px); isolation:isolate;
}
.pagehead::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:radial-gradient(70% 80% at 82% 4%,rgba(233,166,43,.26),transparent 62%),
             linear-gradient(160deg,#1B2E26,#12211B 54%,#0A1410);
}
.pagehead h1{ color:var(--on-dark); font-size:clamp(2.2rem,4.6vw,3.5rem); margin-bottom:.3em; }
.pagehead .lede{ color:var(--on-dark-70); max-width:60ch; }
.pagehead .eyebrow{ color:var(--gold-light); }
.pagehead-mark{
  position:absolute; right:-4%; bottom:-46%; width:min(420px,44vw); z-index:-1;
  opacity:.13; mix-blend-mode:screen; pointer-events:none;
}

/* breadcrumb */
.crumbs{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-70); margin-bottom:1.4rem; opacity:.72; }
.crumbs a:hover{ color:var(--gold-light); }
.crumbs span{ margin-inline:.6em; }

/* ---- 10. Pillars ------------------------------------------------------- */
.pillar{ padding-top:1.9rem; border-top:1px solid rgba(18,33,27,.14); position:relative; }
.pillar::before{
  content:""; position:absolute; top:-1px; left:0; width:44px; height:2px; background:var(--gold);
  transition:width .5s var(--ease);
}
.pillar:hover::before{ width:100%; }
.pillar h3{ font-size:1.28rem; margin-bottom:.5em; }
.pillar p{ font-size:.95rem; margin:0; }

/* ---- 11. Stat band ----------------------------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(243,238,227,.14); }
.stat{ background:var(--forest); padding:clamp(28px,3.6vw,44px) clamp(18px,2.4vw,28px); text-align:center; }
.stat-value{
  font-family:var(--display); font-size:clamp(2.3rem,4.4vw,3.4rem); line-height:1;
  color:var(--gold-light); margin-bottom:.32em; letter-spacing:-.02em;
}
.stat-label{ font-size:.86rem; color:var(--on-dark); letter-spacing:.05em; margin-bottom:.4em; }
.stat-note{ font-size:.72rem; color:var(--on-dark-70); opacity:.62; letter-spacing:.04em; }
@media(max-width:820px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* ---- 12. Treatment cards ----------------------------------------------- */
.tcard{
  display:flex; flex-direction:column; background:var(--ivory);
  border:1px solid rgba(18,33,27,.09); border-radius:var(--radius-lg);
  overflow:hidden; transition:all .5s var(--ease); height:100%;
}
.tcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:rgba(195,124,1,.42); }
.tcard .art{ border-radius:0; aspect-ratio:16/10; flex:none; }
.tcard-body{ padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column; flex:1; }
.tcard-count{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:.9rem;
}
.tcard h3{ margin-bottom:.5rem; }
.tcard p{ font-size:.93rem; margin-bottom:1.5rem; }
.tcard .link{ margin-top:auto; align-self:flex-start; }

/* ---- 13. Treatment cards ----------------------------------------------
   Each therapy is its own card with a mark of its own, so a long menu
   stays scannable instead of reading as a wall of paragraphs.        */
.tlist{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);
}
.titem{
  position:relative; display:flex; flex-direction:column;
  overflow:hidden;
  padding:0 clamp(22px,2.6vw,30px) clamp(22px,2.6vw,30px);
  background:var(--ivory);
  border:1px solid rgba(18,33,27,.10);
  border-radius:var(--radius-lg);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease),
             border-color .45s var(--ease);
}
.titem::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.titem:hover{
  transform:translateY(-4px);
  border-color:rgba(195,124,1,.34);
  box-shadow:var(--shadow-md);
}
.titem:hover::after{ transform:scaleX(1); }

.titem-top{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.1rem;
}
.titem-ico{
  width:46px; height:46px; flex:none; display:grid; place-items:center;
  border-radius:50%; background:rgba(195,124,1,.10);
  border:1px solid rgba(195,124,1,.20);
  transition:background .45s var(--ease), transform .45s var(--ease);
}
.titem-ico svg{ width:22px; height:22px; stroke:var(--gold-deep); fill:none; stroke-width:1.5; }
.titem:hover .titem-ico{ background:rgba(195,124,1,.18); transform:scale(1.06); }
.titem-num{
  font-family:var(--display); font-size:1.5rem; color:var(--gold);
  line-height:1; opacity:.5; letter-spacing:.02em;
}
.titem h3{ font-size:clamp(1.18rem,1.6vw,1.42rem); margin-bottom:.26rem; }
.titem-tag{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:.95rem;
}
.titem-body{ font-size:.94rem; margin:0; color:var(--ink-70); }

@media(max-width:720px){ .tlist{ grid-template-columns:1fr; } }

/* callout box */
.note{
  border-left:2px solid var(--gold);
  background:var(--cream);
  padding:clamp(20px,2.6vw,28px) clamp(22px,3vw,32px);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  font-size:.94rem;
}
.note strong{ color:var(--ink); font-weight:500; }
.section--dark .note{ background:rgba(243,238,227,.05); border-left-color:var(--gold-light); }

/* ---- 14. Team ---------------------------------------------------------- */
.person{ text-align:left; }
.person-photo{
  aspect-ratio:3/4; border-radius:var(--radius-lg); overflow:hidden; margin-bottom:1.2rem;
  position:relative; background:var(--forest);
}
.person-photo img{ width:100%; height:100%; object-fit:cover; }
.person-mono{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:clamp(2.6rem,5vw,3.6rem); color:var(--gold-light);
  letter-spacing:.06em; z-index:2;
}
.person h4{ margin-bottom:.15rem; font-size:1.15rem; }
.person-role{ font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:.5rem; }
.person-cred{ font-size:.8rem; color:var(--ink-55); margin-bottom:.7rem; font-style:italic; }
.person p{ font-size:.92rem; margin:0; }

/* ---- 15. Testimonials -------------------------------------------------- */
.quote{
  background:var(--ivory); border:1px solid rgba(18,33,27,.09);
  border-radius:var(--radius-lg); padding:clamp(28px,3.4vw,40px);
  display:flex; flex-direction:column; height:100%;
  transition:all .5s var(--ease); position:relative;
}
.quote:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(195,124,1,.4); }
.quote-mark{
  font-family:var(--display); font-size:4.2rem; line-height:.7; color:var(--gold);
  opacity:.34; margin-bottom:.2rem;
}
.quote p{
  font-family:var(--display); font-size:1.24rem; line-height:1.5; color:var(--ink);
  margin-bottom:1.6rem; flex:1;
}
.quote-by{ font-size:.86rem; color:var(--ink); letter-spacing:.04em; }
.quote-meta{ font-size:.76rem; color:var(--ink-55); letter-spacing:.1em; text-transform:uppercase; margin-top:.2rem; }
.section--cream .quote{ background:#fff; }

/* ---- 16. Partners ------------------------------------------------------ */
.partner{
  padding:1.6rem 0; border-top:1px solid rgba(18,33,27,.12);
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  transition:padding-left .4s var(--ease);
}
.partner:hover{ padding-left:10px; }
.partner-name{ font-family:var(--display); font-size:1.22rem; color:var(--ink); }
.partner-detail{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); text-align:right; flex:none; }
@media(max-width:560px){ .partner{ flex-direction:column; gap:4px; } .partner-detail{ text-align:left; } }

/* ---- 17. FAQ ----------------------------------------------------------- */
.faq{ border-bottom:1px solid rgba(18,33,27,.12); }
.faq:first-child{ border-top:1px solid rgba(18,33,27,.12); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.5rem 44px 1.5rem 0;
  font-family:var(--display); font-size:clamp(1.1rem,1.7vw,1.32rem); color:var(--ink);
  position:relative; transition:color .3s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--gold-deep); }
.faq summary::before,.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; background:var(--gold);
  transition:transform .4s var(--ease);
}
.faq summary::before{ width:15px; height:1.5px; margin-top:-.75px; }
.faq summary::after{ width:1.5px; height:15px; margin-top:-7.5px; margin-right:6.75px; }
.faq[open] summary::after{ transform:rotate(90deg); }
.faq[open] summary{ color:var(--gold-deep); }
.faq-body{ padding:0 clamp(20px,6vw,80px) 1.7rem 0; font-size:.96rem; max-width:76ch; }

/* ---- 18. CTA band ------------------------------------------------------ */
.cta{ position:relative; overflow:hidden; background:var(--forest); color:var(--on-dark-70); text-align:center; isolation:isolate; }
.cta::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(60% 90% at 50% 0%,rgba(233,166,43,.24),transparent 62%),
             linear-gradient(160deg,#1B2E26,#12211B 56%,#0A1410);
}
.cta h2{ color:var(--on-dark); max-width:22ch; margin-inline:auto; }
.cta h2 em{ font-style:italic; color:var(--gold-light); }
.cta .lede{ color:var(--on-dark-70); max-width:56ch; margin:0 auto 2.4rem; }
.cta-mark{ position:absolute; left:50%; top:-30%; transform:translateX(-50%); width:min(560px,70vw); opacity:.10; z-index:-1; mix-blend-mode:screen; }

/* ---- 19. Forms --------------------------------------------------------- */
.form{ display:grid; gap:20px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.field label{
  display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-55); margin-bottom:.6rem;
}
.field input,.field select,.field textarea{
  width:100%; padding:.95rem 1.1rem;
  font-family:var(--body); font-size:.98rem; color:var(--ink);
  background:var(--ivory); border:1px solid rgba(18,33,27,.16);
  border-radius:var(--radius); transition:all .3s;
}
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--gold); background:#fff;
  box-shadow:0 0 0 3px rgba(195,124,1,.14);
}
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2312211B' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat; background-position:right 1.1rem center;
}
.form-note{ font-size:.8rem; color:var(--ink-55); }
.form-status{ font-size:.9rem; padding:.9rem 1.1rem; border-radius:var(--radius); display:none; }
.form-status.is-shown{ display:block; }
.form-status--ok{ background:rgba(195,124,1,.12); border:1px solid var(--gold); color:var(--ink); }

/* contact detail rows */
.cdetail{ padding:1.5rem 0; border-bottom:1px solid rgba(18,33,27,.12); display:flex; gap:18px; align-items:flex-start; }
.cdetail:first-child{ border-top:1px solid rgba(18,33,27,.12); }
.cdetail svg{ width:19px; height:19px; stroke:var(--gold-deep); fill:none; stroke-width:1.5; flex:none; margin-top:4px; }
.cdetail-label{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-55); margin-bottom:.3rem; }
.cdetail-value{ font-size:1.02rem; color:var(--ink); line-height:1.5; }
.cdetail-value a:hover{ color:var(--gold-deep); }
.cdetail-sub{ font-size:.84rem; color:var(--ink-55); margin-top:.2rem; }

.map{ border:1px solid rgba(18,33,27,.12); border-radius:var(--radius-lg); overflow:hidden; height:100%; min-height:340px; }
.map iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; filter:grayscale(.4) contrast(1.05); }

/* ---- 20. Footer -------------------------------------------------------- */
.site-footer{ background:var(--forest-deep); color:var(--on-dark-70); font-size:.9rem; }
.footer-top{ padding-block:clamp(52px,6vw,80px); display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,52px); }
@media(max-width:980px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .footer-top{ grid-template-columns:1fr; } }
.footer-logo{ height:58px; width:auto; margin-bottom:1.5rem; }
.footer h4{
  color:var(--on-dark); font-family:var(--body); font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; margin-bottom:1.3rem;
}
.footer-list li{ margin-bottom:.7rem; }
.footer-list a{ transition:color .3s, padding-left .3s; display:inline-block; }
.footer-list a:hover{ color:var(--gold-light); padding-left:5px; }
.footer-social{ display:flex; gap:12px; margin-top:1.4rem; }
.footer-social a{
  width:38px; height:38px; border:1px solid rgba(243,238,227,.2); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:all .35s var(--ease);
}
.footer-social svg{ width:15px; height:15px; fill:currentColor; }
.footer-social a:hover{ border-color:var(--gold); color:var(--gold-light); transform:translateY(-3px); }
.footer-disclaimer{
  border-top:1px solid rgba(243,238,227,.12); padding-block:2rem;
  font-size:.78rem; line-height:1.75; color:var(--on-dark-70); opacity:.66; max-width:none;
}
.footer-bottom{
  border-top:1px solid rgba(243,238,227,.12); padding-block:1.5rem;
  display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:space-between;
  font-size:.78rem; color:var(--on-dark-70); opacity:.72;
}

/* ---- 21. Floating WhatsApp -------------------------------------------- */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:850;
  display:flex; align-items:center; gap:0;
  background:#1F9D55; color:#fff; border-radius:999px;
  padding:15px; box-shadow:0 10px 34px -8px rgba(11,22,17,.45);
  transition:all .45s var(--ease); overflow:hidden;
}
.wa svg{ width:24px; height:24px; fill:currentColor; flex:none; }
.wa span{
  max-width:0; opacity:0; white-space:nowrap; overflow:hidden;
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  transition:all .45s var(--ease);
}
.wa:hover{ background:#178045; transform:translateY(-3px); }
.wa:hover span{ max-width:190px; opacity:1; margin-left:11px; }
@media(max-width:520px){ .wa{ right:14px; bottom:14px; padding:14px; } }

/* ---- 22. Scroll reveal ------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }
.reveal[data-d="5"]{ transition-delay:.40s } .reveal[data-d="6"]{ transition-delay:.48s }

@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---- 23. Utilities ----------------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.split--wide-left{ grid-template-columns:1.15fr 1fr; }
.split--wide-right{ grid-template-columns:1fr 1.15fr; }
@media(max-width:900px){ .split,.split--wide-left,.split--wide-right{ grid-template-columns:1fr; } }
.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; }
.mt-0{ margin-top:0 } .mb-0{ margin-bottom:0 }
.text-center{ text-align:center }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---- 24. Free assessment offer band ------------------------------------ */
.offer{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(80% 90% at 12% 0%,rgba(233,166,43,.20),transparent 60%),
    radial-gradient(90% 100% at 92% 100%,rgba(156,98,0,.24),transparent 62%),
    linear-gradient(158deg,#1B2E26,#12211B 54%,#0A1410);
  color:var(--on-dark);
}
.offer::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(112deg,transparent 30%,rgba(255,248,232,.06) 48%,transparent 66%);
}
.offer-mark{
  position:absolute; right:-6%; top:-34%; width:min(460px,46vw);
  opacity:.12; mix-blend-mode:screen; pointer-events:none; z-index:-1;
}
.offer h2{ color:var(--on-dark); }
.offer .lede{ color:var(--on-dark-70); }
.offer .eyebrow{ color:var(--gold-light); }

/* -- the three-tab assessment picker -- */
.oa{ margin-top:clamp(30px,4vw,48px); }

.oa-tabs{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin-bottom:clamp(26px,3vw,38px);
}
.oa-tab{
  display:inline-flex; align-items:center; gap:.7em;
  padding:.92em 1.5em;
  font-family:var(--body); font-size:.74rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--on-dark-70);
  background:rgba(251,248,242,.04);
  border:1px solid rgba(233,166,43,.22);
  border-radius:var(--radius);
  transition:all .35s var(--ease);
}
.oa-tab svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.6; flex:none; }
.oa-tab:hover{ color:var(--gold-light); border-color:rgba(233,166,43,.5); background:rgba(233,166,43,.07); }
.oa-tab[aria-selected="true"]{
  color:var(--forest); background:var(--gold-light);
  border-color:var(--gold-light); box-shadow:0 10px 30px -14px rgba(233,166,43,.8);
}

.oa-panels{ position:relative; }
.oa-panel[hidden]{ display:none; }
.oa-panel{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(26px,4vw,54px); align-items:start;
  padding:clamp(26px,3.4vw,42px);
  background:rgba(251,248,242,.045);
  border:1px solid rgba(233,166,43,.20);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(3px);
  animation:oaIn .55s var(--ease) both;
}
@keyframes oaIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

.oa-panel-head h3{ color:var(--on-dark); font-size:clamp(1.5rem,2.4vw,2rem); margin-bottom:.3em; }
.oa-tagline{
  font-family:var(--body); font-size:.74rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--gold-light);
  margin-bottom:1.3em;
}
.oa-body{ color:var(--on-dark-70); font-size:.98rem; margin-bottom:1.6em; }

.oa-pills{ display:flex; flex-wrap:wrap; gap:9px; }
.oa-pill{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.5em .9em; font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-pale);
  border:1px solid rgba(233,166,43,.3); border-radius:100px;
}
.oa-pill svg{ width:12px; height:12px; stroke:var(--gold-light); fill:none; stroke-width:2.4; }

.oa-metrics{ display:grid; grid-template-columns:1fr; gap:1px; align-content:start; background:rgba(233,166,43,.16); border:1px solid rgba(233,166,43,.16); border-radius:var(--radius-lg); overflow:hidden; }
.oa-metric{
  display:flex; gap:.9em; align-items:flex-start;
  padding:1.15rem 1.15rem; background:#101c17;
  transition:background .35s var(--ease);
}
.oa-metric:hover{ background:#16261F; }
.oa-metric-ico{
  width:34px; height:34px; flex:none; display:grid; place-items:center;
  border-radius:50%; background:rgba(233,166,43,.12);
}
.oa-metric-ico svg{ width:17px; height:17px; stroke:var(--gold-light); fill:none; stroke-width:1.6; }
.oa-metric-txt{ display:flex; flex-direction:column; gap:.25em; }
.oa-metric-txt strong{ color:var(--on-dark); font-weight:500; font-size:.9rem; letter-spacing:.01em; }
.oa-metric-txt span{ color:var(--on-dark-70); font-size:.8rem; line-height:1.55; opacity:.85; }

.oa-claims{
  grid-column:1/-1; margin:0; padding-top:1.4rem;
  border-top:1px solid rgba(233,166,43,.16);
  color:var(--on-dark-70); font-size:.86rem; line-height:1.7; opacity:.9;
}

.oa-foot{ margin-top:clamp(30px,3.6vw,46px); text-align:center; }
.offer-note{
  max-width:66ch; margin:1.5rem auto 0;
  font-size:.78rem; line-height:1.7; color:var(--on-dark-70); opacity:.7;
}

@media(max-width:900px){
  .oa-panel{ grid-template-columns:1fr; }
  .oa-mark{ width:70vw; right:-18%; top:-12%; }
}
@media(max-width:560px){
  .oa-tabs{ gap:7px; }
  .oa-tab{ padding:.8em 1em; font-size:.68rem; letter-spacing:.1em; }
}
}

/* ---- 25. Photography ---------------------------------------------------
   Client photography, resized into img/photo/ by prep-photos.py.
   Every slot is swap-in-place: save a new photo over the same filename
   and nothing else needs to change. Each band carries a scrim so the
   ivory text stays legible over whatever the picture is doing.          */

/* -- full-bleed bands -- */
.hero, .pagehead, .cta, .offer{ background-size:cover; background-position:center; }

.hero{ background-image:url("../img/photo/hero.jpg"); }
.hero{ background-position:90% center; }
.hero::before{
  /* neutral, not green — and much lighter on the right so the photograph reads */
  background:linear-gradient(96deg,rgba(10,15,13,.84) 0%,rgba(10,15,13,.60) 33%,rgba(11,16,14,.22) 60%,rgba(11,16,14,.06) 100%);
}
.hero::after{ opacity:.10; }
.hero-mark{ display:none; }

.pagehead{ background-position:64% center; }
.pagehead::before{
  /* pulled back further — the photograph carries most of the band now */
  background:linear-gradient(96deg,rgba(10,15,13,.72) 0%,rgba(10,15,13,.44) 34%,rgba(11,16,14,.12) 62%,rgba(11,16,14,.02) 100%);
}
.pagehead-mark{ display:none; }
.p-about   .pagehead{ background-image:url("../img/photo/head-about.jpg"); }
.p-contact .pagehead{ background-image:url("../img/photo/head-contact.jpg"); }
.p-testimonials .pagehead{ background-image:url("../img/photo/head-results.jpg"); }
.p-treatments   .pagehead{ background-image:url("../img/photo/head-treatments.jpg"); }
/* the client's own header artwork, which already carries its own dark wash on
   the left — so the site scrim is pulled right back on this page only */
.p-treatment-cellular-hydration    .pagehead{ background-image:url("../img/photo/head-cellular-hydration-v2.jpg"); }
.p-treatment-cellular-hydration    .pagehead::before{
  background:linear-gradient(96deg,rgba(10,15,13,.34) 0%,rgba(10,15,13,.20) 36%,rgba(11,16,14,.06) 64%,rgba(11,16,14,0) 100%);
}
.p-treatment-non-invasive          .pagehead{ background-image:url("../img/photo/head-non-invasive.jpg"); }
.p-treatment-regenerative-medicine .pagehead{ background-image:url("../img/photo/head-regenerative-medicine.jpg"); }

.cta{ background-image:url("../img/photo/cta.jpg"); }
.cta::before{
  background:radial-gradient(62% 96% at 50% 0%,rgba(9,19,14,.72),transparent 66%),
             linear-gradient(180deg,rgba(8,17,13,.86),rgba(8,17,13,.78) 52%,rgba(8,17,13,.90));
}
.cta-mark{ display:none; }

.offer{ background-image:url("../img/photo/offer.jpg"); }
.offer::before{
  background:linear-gradient(180deg,rgba(8,17,13,.90),rgba(9,19,14,.80) 46%,rgba(8,17,13,.92));
}
.offer-mark{ display:none; }

/* -- picture panels -- */
.art{ background-color:var(--forest-deep); background-size:cover; background-position:center; }
.art--a::before,.art--b::before,.art--c::before,
.art--d::before,.art--e::before,.art--f::before{
  background:linear-gradient(168deg,rgba(11,22,17,.14),rgba(11,22,17,.04) 42%,rgba(11,22,17,.30));
}
.art::after{ opacity:.12; }
.art .art-mark, .art .art-sheen{ display:none; }

.p-index .art--ratio{ background-image:url("../img/photo/approach.jpg"); }
.p-about .art--tall{  background-image:url("../img/photo/story.jpg"); }
.p-treatment-cellular-hydration    .art--ratio{ background-image:url("../img/photo/ov-cellular-hydration-v2.jpg"); }
.p-treatment-non-invasive          .art--ratio{ background-image:url("../img/photo/ov-non-invasive.jpg"); }
.p-treatment-regenerative-medicine .art--ratio{ background-image:url("../img/photo/ov-regenerative-medicine-v2.jpg"); }

/* category cards — keyed by slug so they are right on every page */
/* -v2 suffix is deliberate: the photographs were replaced 30 Aug 2026 and
   browsers were still serving the old ones from cache under the old names.
   If these are ever swapped again, bump to -v3 rather than overwriting. */
.art--cat-cellular-hydration{    background-image:url("../img/photo/card-cellular-hydration-v2.jpg"); }
.art--cat-non-invasive{          background-image:url("../img/photo/card-non-invasive-v2.jpg"); }
.art--cat-regenerative-medicine{ background-image:url("../img/photo/card-regenerative-medicine-v2.jpg"); }

@media(max-width:820px){
  /* narrow screens: a vertical scrim reads better than the left-weighted one,
     and lets more of the photograph show through */
  .hero::before{
    background:linear-gradient(180deg,rgba(10,15,13,.60) 0%,rgba(10,15,13,.82) 42%,rgba(10,15,13,.90) 100%);
  }
  .pagehead::before{
    background:linear-gradient(180deg,rgba(10,15,13,.42),rgba(10,15,13,.80));
  }
}

/* review stars — real Google reviews carry their rating */
.quote-stars{
  color:var(--gold); font-size:.82rem; letter-spacing:.22em;
  margin-bottom:.9rem; line-height:1;
}

/* assessment panel imagery */
.oa-media{
  border-radius:var(--radius-lg); overflow:hidden; margin-bottom:1.6rem;
  border:1px solid rgba(233,166,43,.22);
  box-shadow:0 26px 50px -28px rgba(0,0,0,.8);
}
.oa-media img{
  width:100%; height:auto; display:block; aspect-ratio:16/10; object-fit:cover;
  transition:transform 1.0s var(--ease);
}
.oa-panel:hover .oa-media img{ transform:scale(1.03); }

/* -- drawn scene at the head of every therapy card ----------------------
   Line illustrations rather than photographs: they stay crisp at any size,
   cost nothing to load, and read as intentional. To use a real photograph
   instead, give the item an "image" key in content.py.                   */
.titem-illus{
  margin:0 calc(clamp(22px,2.6vw,30px) * -1) clamp(18px,2vw,24px);
  aspect-ratio:400/224; position:relative; overflow:hidden;
  border-bottom:1px solid rgba(195,124,1,.18);
}
.titem-illus::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(80% 70% at 22% 12%,rgba(233,166,43,.16),transparent 62%);
}
.titem-illus svg{
  position:absolute; inset:0; width:100%; height:100%;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .8s var(--ease);
}
.il-main{ stroke:var(--gold-light); stroke-width:2.4; }
.il-bg{ stroke:var(--gold-pale); stroke-width:1.1; opacity:.13; }
.titem:hover .titem-illus svg{ transform:scale(1.04); }

/* three grounds, rotated across the grid so no two neighbours match */
.t-g0{ background:linear-gradient(152deg,#1E3329,#12211B 56%,#0B1611); }
.t-g1{ background:linear-gradient(140deg,#243B30,#13221C 58%,#0B1611); }
.t-g2{ background:linear-gradient(168deg,#1B2E26,#101E19 54%,#0B1611); }

.titem-top{ margin-top:0; }

/* ---- 26. Founder card pop-out -----------------------------------------
   The founder's card on About lifts slightly on hover and a panel slides up
   over his portrait. No separate page — everything happens in place, and the
   grid never reflows because the panel is absolutely positioned inside the
   photo. :focus-within covers tap and keyboard.
   ------------------------------------------------------------------------ */
.person--founder{
  position:relative; z-index:1; cursor:default; outline:none;
  transition:transform .55s var(--ease), z-index 0s;
}
.person--founder:hover,
.person--founder:focus-within{ transform:scale(1.045); z-index:5; }

.person--founder .person-photo{
  box-shadow:0 0 0 1px rgba(195,124,1,.26), var(--shadow-sm);
  transition:box-shadow .55s var(--ease);
}
.person--founder:hover .person-photo,
.person--founder:focus-within .person-photo{
  box-shadow:0 0 0 1px rgba(195,124,1,.62), var(--shadow-lg);
}
.person--founder .person-photo img{ transition:transform 1.2s var(--ease); }
.person--founder:hover .person-photo img,
.person--founder:focus-within .person-photo img{ transform:scale(1.06); }

/* the little nudge that tells you there is something here */
.person-hint{
  position:absolute; left:10px; bottom:10px; z-index:4;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.45em .9em; border-radius:100px;
  color:var(--forest-deep); background:var(--gold-light);
  box-shadow:0 2px 10px rgba(11,22,17,.3);
  transition:opacity .3s var(--ease), transform .45s var(--ease);
}
.person--founder:hover .person-hint,
.person--founder:focus-within .person-hint{ opacity:0; transform:translateY(6px); }

/* the panel itself */
.person-pop{
  position:absolute; inset:auto 0 0 0; z-index:3;
  padding:clamp(16px,1.6vw,22px) clamp(15px,1.5vw,20px) clamp(15px,1.5vw,20px);
  color:var(--on-dark);
  background:linear-gradient(180deg,rgba(11,22,17,.10),rgba(11,22,17,.90) 34%,rgba(8,17,13,.97));
  transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.person--founder:hover .person-pop,
.person--founder:focus-within .person-pop{ transform:translateY(0); }

.person-pop-quote{
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:clamp(.92rem,1.1vw,1.05rem); line-height:1.32;
  color:var(--gold-pale); margin:0 0 .65rem;
}
.person-pop-list{ list-style:none; margin:0; padding:0; display:grid; gap:.36rem; }
.person-pop-list li{
  position:relative; padding-left:.95rem;
  font-size:.74rem; line-height:1.42; color:var(--on-dark-70);
}
.person-pop-list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:5px; height:5px; border-radius:50%; background:var(--gold-light);
}

/* touch and reduced-motion: no hover to rely on, so show it plainly */
@media(hover:none){
  .person-pop{ transform:translateY(0); }
  .person-hint{ display:none; }
  .person--founder:hover{ transform:none; }
}
@media(prefers-reduced-motion:reduce){
  .person--founder,
  .person--founder .person-photo img,
  .person-pop{ transition:none; }
}

/* -- product photography at the head of a therapy card ------------------
   Used where a therapy carries an "image" in content.py. The drawn-scene
   grounds (.t-g0/1/2) and the gold wash are suppressed, because these are
   photographs on their own pale background, not line art on forest green.
   ------------------------------------------------------------------------ */
.titem-illus--photo{ background:var(--cream); }
.titem-illus--photo::after{ display:none; }
.titem-illus--photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .9s var(--ease);
}
.titem:hover .titem-illus--photo img{ transform:scale(1.05); }