/* ==========================================================================
   MED7 AL SHIFA AL KHALEEJI MEDICAL CENTER — Design System
   Deira, Dubai · Fezey Media
   --------------------------------------------------------------------------
   Signature motif: "Light Lines" — the hairline luminous rules drawn from the
   clinic's own cove-lit front desk architecture. Used for dividers, nav
   underlines, card hovers and hero layering. One idea, applied consistently.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Surface */
  --ivory:        #F7F3ED;
  --white:        #FFFFFF;
  --beige:        #E8DED0;
  --beige-deep:   #DED2C0;
  --neutral:      #B9AD9D;
  --neutral-line: #D8CFC2;

  /* Ink */
  --charcoal:     #202321;
  --ink:          #3A403C;
  --ink-soft:     #5C625D;   /* 4.70:1 on the deepest beige; #6B726C was 3.72 */

  /* Accent */
  --green:        #50665B;
  --wa:           #12833F;   /* WhatsApp green darkened to 4.83:1 with white */
  --green-deep:   #3B4B43;
  --green-wash:   #E7EBE6;

  /* Signature light */
  --light:        #E7C77A;
  --light-soft:   rgba(231, 199, 122, .55);

  /* Type */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Scale */
  --fs-display: clamp(2.85rem, 6.2vw, 5.2rem);
  --fs-h1:      clamp(2.4rem, 5.2vw, 4.1rem);
  --fs-h2:      clamp(2rem, 4.1vw, 3.35rem);
  --fs-h3:      clamp(1.3rem, 2.1vw, 1.7rem);
  --fs-h4:      clamp(1.08rem, 1.5vw, 1.24rem);
  --fs-body:    1.0625rem;
  --fs-lead:    clamp(1.08rem, 1.5vw, 1.28rem);
  --fs-small:   .9375rem;
  --fs-label:   .6875rem;

  /* Space */
  --sp-section: clamp(4.75rem, 8.5vw, 8.5rem);
  --sp-gap:     clamp(1.5rem, 3vw, 2.75rem);
  --container:  1240px;
  --gutter:     clamp(1.25rem, 4vw, 2.5rem);

  /* Form */
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --r-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(32,35,33,.05);
  --shadow-md: 0 18px 44px -22px rgba(32,35,33,.30);
  --shadow-lg: 0 40px 90px -40px rgba(32,35,33,.42);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .55s;

  --header-h: 84px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,p,figure{ margin:0; }
input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--green); color:var(--ivory); }

/* ---------- 3. TYPOGRAPHY ---------- */
.display,h1,h2{
  font-family:var(--font-display);
  font-weight:300;
  font-optical-sizing:auto;
  color:var(--charcoal);
  letter-spacing:-.018em;
  line-height:1.04;
}
.display{ font-size:var(--fs-display); }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
/*
 * h3 and h4 are the serif too, so a card title reads as the same voice as the
 * section heading above it rather than switching families mid-section.
 *
 * Weight 500, not 600: Newsreader is loaded at 200..500, and asking for 600
 * makes the browser synthesise a fake bold — smeared stems, wrong rhythm. 500
 * is the heaviest real weight and carries enough colour at card-title size.
 * The negative tracking that suited Manrope is eased off; Newsreader is
 * already narrow at these sizes and tightening it closes the counters.
 */
h3{
  font-family:var(--font-display); font-size:var(--fs-h3);
  font-weight:500; line-height:1.24; letter-spacing:-.006em; color:var(--charcoal);
  font-optical-sizing:auto;
}
h4{
  font-family:var(--font-display); font-size:var(--fs-h4);
  font-weight:500; line-height:1.3; letter-spacing:-.004em; color:var(--charcoal);
  font-optical-sizing:auto;
}
h5,h6{
  font-family:var(--font-display); font-weight:500; color:var(--charcoal);
  font-optical-sizing:auto;
}
.h2-em{ font-style:italic; color:var(--green); }
.lead{ font-size:var(--fs-lead); line-height:1.62; color:var(--ink); }
.small{ font-size:var(--fs-small); color:var(--ink-soft); }
.label{
  font-family:var(--font-sans); font-size:var(--fs-label); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--green);
  display:inline-flex; align-items:center; gap:.6rem; line-height:1;
}
.label::before{
  content:""; width:22px; height:1px; background:var(--green); opacity:.55; flex:none;
}
.label--plain::before{ display:none; }
.measure{ max-width:56ch; }
.measure-sm{ max-width:44ch; }

/* ---------- 4. LAYOUT ---------- */
.container{
  width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:var(--gutter);
}
.container--wide{ max-width:1480px; }
.section{ padding-block:var(--sp-section); position:relative; }
.section--tight{ padding-block:clamp(3rem,5vw,4.5rem); }
.section-head{ display:flex; flex-wrap:wrap; gap:var(--sp-gap); align-items:end; justify-content:space-between; margin-bottom:clamp(2.25rem,4vw,3.5rem); }
.section-head__text{ max-width:46rem; }
.section-head .label{ margin-bottom:1.1rem; }
.section-head p{ margin-top:1.1rem; }

.bg-ivory{ background:var(--ivory); }
.bg-white{ background:var(--white); }
.bg-beige{ background:var(--beige); }
.bg-deep{ background:var(--green-deep); color:#DDE3DE; }
.bg-deep h2,.bg-deep h3,.bg-deep h4,.bg-deep .display{ color:var(--ivory); }
.bg-deep .label{ color:var(--light); }
.bg-deep .label::before{ background:var(--light); }
.bg-deep .lead,.bg-deep p{ color:#C6CFC8; }

.grid{ display:grid; gap:var(--sp-gap); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }

/* ---------- 5. SIGNATURE: LIGHT LINES ---------- */
.lightlines{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:repeating-linear-gradient(
    90deg, transparent 0 62px, var(--light-soft) 62px 63px, transparent 63px 126px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 74%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 74%,transparent 100%);
  opacity:.45;
}
.lightlines--skew{ transform:skewX(-9deg) scaleX(1.2); transform-origin:top left; opacity:.32; }
.lightlines--dense{
  background-image:repeating-linear-gradient(
    90deg, transparent 0 34px, var(--light-soft) 34px 35px, transparent 35px 69px);
  opacity:.3;
}

/* Divider: three short light lines — the soffit motif, reduced */
.rule{ display:flex; gap:7px; align-items:center; }
.rule i{ display:block; width:1px; height:26px; background:linear-gradient(180deg,transparent,var(--light),transparent); }
.rule i:nth-child(2){ height:38px; }
.rule i:nth-child(3){ height:20px; }

/* ---------- 6. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font-sans); font-size:.875rem; font-weight:600; letter-spacing:.01em;
  padding:.95rem 1.6rem; border-radius:var(--r-pill);
  border:1px solid transparent; cursor:pointer;
  transition:background .32s var(--ease), color .32s var(--ease),
             border-color .32s var(--ease), transform .32s var(--ease), box-shadow .32s var(--ease);
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:15px; height:15px; flex:none; transition:transform .32s var(--ease); }
.btn:hover svg.arrow{ transform:translateX(4px); }

.btn--primary{ background:var(--green); color:var(--ivory); box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--green-deep); box-shadow:var(--shadow-md); }

.btn--ghost{ background:transparent; color:var(--charcoal); border-color:var(--neutral-line); }
.btn--ghost:hover{ border-color:var(--charcoal); background:rgba(32,35,33,.03); }

.btn--light{ background:var(--ivory); color:var(--charcoal); }
.btn--light:hover{ background:var(--white); }

.btn--outline-light{ background:transparent; color:var(--ivory); border-color:rgba(247,243,237,.38); }
.btn--outline-light:hover{ border-color:var(--ivory); background:rgba(247,243,237,.08); }

.btn--wa{ background:var(--wa); color:#fff; }
.btn--wa:hover{ background:#17904a; }

.btn--sm{ padding:.7rem 1.15rem; font-size:.8125rem; }
.btn--block{ width:100%; }

/* Text link with light-line underline reveal */
.tlink{
  display:inline-flex; align-items:center; gap:.5rem; position:relative;
  font-weight:600; font-size:.875rem; color:var(--green); padding-block:.2rem;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.tlink:hover::after{ transform:scaleX(1); transform-origin:left; }
.tlink svg{ width:14px; height:14px; transition:transform .32s var(--ease); }
.tlink:hover svg{ transform:translateX(3px); }

/* ---------- 7. HEADER ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:120;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.header__bar{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.brand{ display:flex; align-items:center; flex:none; }
.brand img{ height:46px; width:auto; transition:height .4s var(--ease); }
.header.is-stuck{ background:rgba(247,243,237,.94); backdrop-filter:blur(14px); border-bottom-color:var(--neutral-line); box-shadow:0 1px 20px -10px rgba(32,35,33,.28); }
.header.is-stuck .brand img{ height:40px; }

.nav{ display:flex; align-items:center; gap:.35rem; margin-inline:auto; }
.nav__link{
  position:relative; display:inline-flex; align-items:center; gap:.35rem;
  font-size:.875rem; font-weight:500; color:var(--charcoal);
  padding:.6rem .78rem; border-radius:var(--r-sm);
  transition:color .3s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:.78rem; right:.78rem; bottom:.28rem; height:1px;
  background:var(--green); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__link:hover{ color:var(--green); }
.nav__link:hover::after,.nav__link[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.nav__link .chev{ width:11px; height:11px; opacity:.55; transition:transform .3s var(--ease); }
.nav__item{ position:relative; }
.nav__item:hover .chev{ transform:rotate(180deg); }

.header__actions{ display:flex; align-items:center; gap:.6rem; flex:none; }

/* Mega menu */
.mega{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translate(-50%,10px);
  width:min(920px, calc(100vw - 3rem));
  background:var(--white); border:1px solid var(--neutral-line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:1.9rem; z-index:130;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
}
.nav__item:hover .mega,.nav__item:focus-within .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
.mega__grid{ display:grid; grid-template-columns:1.65fr 1fr; gap:1.9rem; }
.mega__cols{ display:grid; grid-template-columns:1fr 1fr; gap:.15rem 1.4rem; }
.mega__link{ display:block; padding:.62rem .7rem; border-radius:var(--r-sm); transition:background .25s var(--ease); }
.mega__link:hover{ background:var(--ivory); }
.mega__link strong{ display:block; font-size:.9375rem; font-weight:600; color:var(--charcoal); }
.mega__link span{ font-size:.8125rem; color:var(--ink-soft); }
.mega__aside{ background:var(--ivory); border-radius:var(--r-md); padding:1.35rem; display:flex; flex-direction:column; gap:.7rem; }
.mega__aside p{ font-size:.875rem; color:var(--ink-soft); margin-bottom:.35rem; }

/* Burger */
.burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; border-radius:var(--r-pill); border:1px solid var(--neutral-line); }
.burger span{ display:block; width:18px; height:1.5px; background:var(--charcoal); position:relative; transition:background .2s; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--charcoal); transition:transform .35s var(--ease); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger.is-open span{ background:transparent; }
.burger.is-open span::before{ transform:translateY(6px) rotate(45deg); }
.burger.is-open span::after{ transform:translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:115; background:var(--ivory);
  padding:calc(var(--header-h) + 1.5rem) var(--gutter) 2rem;
  display:flex; flex-direction:column; gap:1.5rem; overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .38s var(--ease), transform .38s var(--ease), visibility .38s;
}
.drawer.is-open{ opacity:1; visibility:visible; transform:none; }
.drawer__nav a{ display:block; font-family:var(--font-display); font-size:1.75rem; font-weight:300; color:var(--charcoal); padding:.5rem 0; border-bottom:1px solid var(--neutral-line); }
.drawer__sub{ padding:.35rem 0 .75rem; }
.drawer__sub a{ font-family:var(--font-sans); font-size:.9375rem; font-weight:500; color:var(--ink-soft); border:0; padding:.32rem 0; }
.drawer__actions{ display:grid; gap:.6rem; }
.drawer__meta{ font-size:.8125rem; color:var(--ink-soft); border-top:1px solid var(--neutral-line); padding-top:1.1rem; }

/* ---------- 8. HERO ---------- */
.hero{ position:relative; min-height:min(94svh,940px); display:flex; align-items:flex-end; overflow:hidden; background:var(--charcoal); }
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 58%; animation:heroDrift 26s var(--ease) infinite alternate; }
@keyframes heroDrift{ from{ transform:scale(1.04); } to{ transform:scale(1.12) translateX(-1.4%); } }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(24,26,24,.62) 0%, rgba(24,26,24,.18) 34%, rgba(24,26,24,.72) 78%, rgba(24,26,24,.9) 100%),
    linear-gradient(90deg, rgba(24,26,24,.6) 0%, transparent 62%);
}
.hero__inner{ position:relative; z-index:3; width:100%; padding-block:clamp(3rem,7vw,5.5rem) clamp(2rem,4vw,3rem); }
.hero .display{ color:var(--ivory); max-width:15ch; }
.hero__eyebrow{ color:var(--light); margin-bottom:1.5rem; }
.hero__eyebrow::before{ background:var(--light); }
.hero p{ color:rgba(247,243,237,.86); max-width:50ch; margin-top:1.5rem; font-size:var(--fs-lead); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2.2rem; }
.hero__facts{
  display:flex; flex-wrap:wrap; gap:1.1rem 2.4rem; align-items:center;
  margin-top:clamp(2.5rem,5vw,3.75rem); padding-top:1.6rem;
  border-top:1px solid rgba(247,243,237,.2);
}
.hero__fact{ display:flex; align-items:center; gap:.6rem; color:rgba(247,243,237,.9); font-size:.875rem; font-weight:500; }
.hero__fact svg{ width:16px; height:16px; color:var(--light); flex:none; }
.hero__fact b{ font-weight:600; color:var(--ivory); }
.hero .lightlines{ z-index:2; }

/* ---------- 9. TRUST STRIP ---------- */
.trust{ background:var(--white); border-bottom:1px solid var(--neutral-line); }
.trust__grid{ display:grid; grid-template-columns:repeat(6,1fr); }
.trust__item{
  display:flex; flex-direction:column; align-items:flex-start; gap:.7rem;
  padding:1.9rem 1.3rem; border-left:1px solid var(--neutral-line);
}
.trust__item:first-child{ border-left:0; padding-left:0; }
.trust__item svg{ width:22px; height:22px; color:var(--green); stroke-width:1.4; }
.trust__item span{ font-size:.875rem; font-weight:600; color:var(--charcoal); line-height:1.35; }

/* ---------- 10. INTRO / EDITORIAL SPLIT ---------- */
.split{ display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
.split--rev .split__media{ order:2; }
.split__media{ position:relative; }
.split__media img{ width:100%; border-radius:var(--r-lg); object-fit:cover; }
.split__media .lightlines{ border-radius:var(--r-lg); overflow:hidden; }
.figure-stack{ position:relative; }
.figure-stack__main{ aspect-ratio:4/3.1; }
.figure-stack__inset{
  position:absolute; right:-6%; bottom:-9%; width:44%;
  border-radius:var(--r-md); border:8px solid var(--ivory);
  box-shadow:var(--shadow-md); aspect-ratio:1/1; object-fit:cover;
}
.bg-beige .figure-stack__inset{ border-color:var(--beige); }
.split__body p + p{ margin-top:1.15rem; }
.split__body .btn{ margin-top:2rem; }
.pill-list{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.8rem; }
.pill{ font-size:.8125rem; font-weight:600; color:var(--charcoal); background:var(--white); border:1px solid var(--neutral-line); border-radius:var(--r-pill); padding:.45rem .9rem; }
.bg-white .pill{ background:var(--ivory); }

/* Stat row */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.4rem; padding-top:1.9rem; border-top:1px solid var(--neutral-line); }
.stat b{ display:block; font-family:var(--font-display); font-weight:300; font-size:clamp(1.9rem,3vw,2.5rem); color:var(--charcoal); line-height:1; }
.stat span{ display:block; margin-top:.5rem; font-size:.8125rem; color:var(--ink-soft); line-height:1.4; }

/* ---------- 11. CARDS ---------- */
.card{
  position:relative; background:var(--white); border:1px solid var(--neutral-line);
  border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.card:hover{ border-color:var(--neutral); box-shadow:var(--shadow-md); transform:translateY(-4px); }
.card__body{ padding:1.6rem 1.5rem 1.7rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.card__body p{ font-size:.9375rem; color:var(--ink-soft); line-height:1.6; }
.card__foot{ margin-top:auto; padding-top:1.2rem; display:flex; align-items:center; gap:1.1rem; }

/* Department card — icon panel (no invented photography) */
.dept__panel{
  position:relative; aspect-ratio:16/10; background:var(--beige);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.dept__panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dept__panel svg{ position:relative; z-index:2; width:44px; height:44px; color:var(--green); stroke-width:1.2; transition:transform .5s var(--ease); }
.card:hover .dept__panel svg{ transform:translateY(-4px) scale(1.05); }
.dept__panel .lightlines{ opacity:.55; }
.card:hover .dept__panel .lightlines{ opacity:.85; }

/* Doctor card — monogram, since no photography supplied */
.doc__panel{
  position:relative; aspect-ratio:4/4.4; background:var(--green-wash);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.doc__panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.doc__mono{
  position:relative; z-index:2; font-family:var(--font-display); font-weight:300;
  font-size:clamp(2.6rem,5vw,3.4rem); color:var(--green); letter-spacing:.02em;
}
.doc__panel .lightlines{ opacity:.3; }
.doc__dept{ font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }
.doc__title{ font-size:.9375rem; color:var(--ink-soft); }

/* ---------- 12. FINDER ---------- */
.finder{ background:var(--white); border:1px solid var(--neutral-line); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.25rem); }
.finder__chips{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.25rem; }
.chip{
  font-size:.875rem; font-weight:600; color:var(--charcoal);
  border:1px solid var(--neutral-line); border-radius:var(--r-pill); padding:.55rem 1.05rem;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.chip:hover{ border-color:var(--green); color:var(--green); }
.chip.is-active{ background:var(--green); border-color:var(--green); color:var(--ivory); }
.finder__result{
  margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid var(--neutral-line);
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  min-height:74px;
}
.finder__result p{ font-size:.9375rem; color:var(--ink-soft); }
.finder__result strong{ color:var(--charcoal); font-weight:600; }
.finder__note{ font-size:.75rem; color:var(--ink-soft); margin-top:1rem; }

/* ---------- 13. JOURNEY ---------- */
.journey{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:1rem; }
.journey__step{ position:relative; padding:2rem 1.4rem 0 0; }
.journey__step::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; background:rgba(247,243,237,.22);
}
.journey__step::after{
  content:""; position:absolute; top:0; left:0; height:1px; width:0; background:var(--light);
  transition:width .9s var(--ease); transition-delay:calc(var(--d,0) * 1s);
}
.journey__step.in::after{ width:100%; }
.journey__num{ font-size:.75rem; font-weight:700; letter-spacing:.14em; color:var(--light); }
.journey__step h4, .journey__step h3 { margin-top:.85rem; color:var(--ivory); }
.journey__step p{ margin-top:.5rem; font-size:.875rem; color:#B7C1B9; line-height:1.55; }

/* ---------- 14. PACKAGES ---------- */
.pkg{ background:var(--white); border:1px solid var(--neutral-line); border-radius:var(--r-md); padding:1.35rem 1.4rem; display:flex; flex-direction:column; gap:.5rem; transition:border-color .35s var(--ease), transform .35s var(--ease); }
.pkg:hover{ border-color:var(--green); transform:translateY(-3px); }
.pkg__cat{ font-size:.6875rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--neutral); }
.pkg h4{ font-size:1.02rem; }
.pkg__meta{ margin-top:auto; padding-top:.9rem; font-size:.8125rem; color:var(--ink-soft); border-top:1px solid var(--neutral-line); }

/* ---------- 15. AESTHETICS ---------- */
.aes-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 2.5rem; margin-top:1.9rem; }
.aes-list li{ display:flex; align-items:center; gap:.85rem; padding:.85rem 0; border-bottom:1px solid rgba(247,243,237,.16); font-size:.9375rem; color:#CBD4CD; }
.aes-list li svg{ width:14px; height:14px; color:var(--light); flex:none; }

/* ---------- 16. REVIEWS (empty state until real reviews are added) ---------- */
.reviews-empty{
  border:1px dashed var(--neutral); border-radius:var(--r-lg);
  padding:clamp(2rem,4vw,3rem); text-align:center; background:var(--white);
}
.reviews-empty p{ color:var(--ink-soft); max-width:52ch; margin:.85rem auto 1.5rem; font-size:.9375rem; }

/* ---------- 17. LOCATION ---------- */
.location{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem,4vw,3.5rem); align-items:stretch; }
.location__map{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--neutral-line); min-height:420px; background:var(--beige); }
.location__map iframe{ width:100%; height:100%; min-height:420px; border:0; display:block; filter:grayscale(.35) sepia(.12) contrast(1.02); }
.addr{ font-style:normal; font-size:1.02rem; line-height:1.85; color:var(--ink); }
.access{ display:grid; gap:.1rem; margin-top:1.8rem; }
.access li{ display:flex; gap:.9rem; align-items:flex-start; padding:.8rem 0; border-top:1px solid var(--neutral-line); font-size:.9375rem; }
.access li svg{ width:17px; height:17px; color:var(--green); flex:none; margin-top:.25rem; }
.access li b{ font-weight:600; color:var(--charcoal); }

/* Hours block */
.hours{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:var(--charcoal); color:var(--ivory); padding:clamp(1.75rem,3vw,2.4rem);
  display:flex; flex-wrap:wrap; gap:1.25rem 2rem; align-items:center; justify-content:space-between;
}
.hours__time{ font-family:var(--font-display); font-weight:300; font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1; color:var(--ivory); }
.hours__label{ font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--light); margin-bottom:.7rem; }
.hours p{ color:rgba(247,243,237,.92); font-size:.9375rem; margin-top:.6rem; }
.hours .lightlines{ opacity:.35; }
.hours > *{ position:relative; z-index:2; }

/* ---------- 18. INSIGHTS ---------- */
.post__media{ aspect-ratio:16/10; background:var(--beige); position:relative; overflow:hidden; }
.post__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.card:hover .post__media img{ transform:scale(1.05); }
.post__meta{ display:flex; flex-wrap:wrap; gap:.5rem .9rem; font-size:.75rem; color:var(--ink-soft); }
.post__meta .cat{ font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green); }

/* ---------- 19. FINAL CTA ---------- */
.finalcta{ position:relative; overflow:hidden; }
.finalcta__inner{ position:relative; z-index:2; text-align:center; max-width:56rem; margin-inline:auto; }
.finalcta .display{ color:var(--ivory); }
.finalcta p{ margin:1.4rem auto 0; max-width:56ch; }
.finalcta__cta{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:2.3rem; }
/*
 * The Button Group widget always emits .finalcta__cta, so its 2.3rem top
 * margin followed the widget into the header and the mobile action bar and
 * pushed the CTA 18px below the logo and nav. The margin is wanted in a
 * closing band, not in chrome.
 */
.header .finalcta__cta,
.actionbar .finalcta__cta,
.med7-drawer .finalcta__cta{ margin-top:0; }
.finalcta .rule{ justify-content:center; margin-bottom:1.6rem; }

/* ---------- 20. FOOTER ---------- */
.footer{ background:var(--card); color:var(--ink); padding-block:clamp(3.5rem,6vw,5rem) 0; border-top:1px solid var(--beige); }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.25fr; gap:2.5rem; }
/* Uppercase micro-labels stay in the sans: Newsreader tracked out at 11px
   loses its serifs to hinting and reads as a broken sans. Same rule as .label. */
body .footer h5{ font-family:var(--font-sans); font-size:.6875rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--charcoal); margin:0 0 1.25rem; }
/* :not(.btn) — a bare `.footer a` also caught the WhatsApp and Call buttons,
   painting their labels ink-on-green at 1.71:1. */
.footer a:not(.btn){ color:var(--ink); transition:color .28s var(--ease); }
.footer a:hover{ color:var(--green); }
.footer li{ padding:.32rem 0; font-size:.9375rem; }
.footer__brand img{ height:52px; width:auto; }
.footer__brand p{ margin-top:1.35rem; font-size:.9375rem; line-height:1.7; max-width:34ch; color:var(--ink); }
.footer__contact li{ display:flex; gap:.7rem; align-items:flex-start; }
.footer__contact svg{ width:15px; height:15px; color:var(--green); flex:none; margin-top:.45rem; }
.footer__bottom{
  margin-top:clamp(2.5rem,5vw,4rem); padding-block:1.5rem; border-top:1px solid var(--beige);
  display:flex; flex-wrap:wrap; gap:1rem 1.75rem; align-items:center; justify-content:space-between;
  font-size:.8125rem;
}
.footer__legal{ display:flex; flex-wrap:wrap; gap:1.25rem; }
.disclaimer{ margin-top:1.25rem; font-size:.75rem; line-height:1.65; color:var(--muted,#6B726D); max-width:78ch; }

/* ---------- 21. MOBILE ACTION BAR ---------- */
/*
 * Two markups render this bar. The PHP fallback puts the three links directly
 * inside .actionbar; the Elementor template wraps them in a widget, so
 * .actionbar has exactly one child. A 3-column grid on .actionbar therefore
 * squeezed that wrapper into a 120px column and the links wrapped into three
 * stacked rows 282px tall. The columns belong on whichever element actually
 * holds the links, so they are declared on both.
 */
.actionbar{
  position:fixed; left:0; right:0; bottom:0; z-index:110; display:none;
  background:rgba(247,243,237,.96); backdrop-filter:blur(14px);
  border-top:1px solid var(--neutral-line);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(102%); transition:transform .45s var(--ease);
}
.actionbar.is-visible{ transform:none; }

/* The flat fallback markup. */
.actionbar > a{ }

/* The Elementor markup: let the widget fill the bar, then lay its row out. */
.actionbar > .elementor-element,
.actionbar .elementor-widget-container{ width:100%; }
.actionbar .med7-btns{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0; margin:0; width:100%;
}

.actionbar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.28rem; padding:.7rem .5rem .75rem; min-height:56px;
  font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--charcoal); border-radius:0; border:0; background:none;
}
.actionbar a + a{ border-left:1px solid var(--neutral-line); }
.actionbar svg{ width:18px; height:18px; color:var(--green); }
.actionbar a.is-primary,
.actionbar a.btn--primary{ background:var(--green); color:var(--ivory); }
.actionbar a.is-primary svg,
.actionbar a.btn--primary svg{ color:var(--ivory); }
.actionbar a.btn--wa{ background:var(--wa); color:#fff; }
.actionbar a.btn--wa svg{ color:#fff; }

/* ---------- 21a. SOCIAL ---------- */
.socialblock{ display:flex; flex-direction:column; gap:.75rem; }
.socialblock__head{
  font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
.social{
  display:flex; flex-wrap:wrap; gap:1rem 1.25rem;
  list-style:none; margin:0; padding:0;
}
.social li{ padding:0; }
.social__link{
  display:inline-flex; align-items:center; gap:.55rem;
  min-height:44px; color:var(--ink); font-size:.875rem;
  transition:color .28s var(--ease);
}
.social__link:hover{ color:var(--green); }
.social__link svg{ width:20px; height:20px; flex:none; }
.social__name{ font-weight:500; }

/* Icons only: a tighter row, sized for a header. */
.social--compact{ gap:.85rem; }
.social--compact .social__link{ min-height:36px; }
.social--compact .social__link svg{ width:18px; height:18px; }

/*
 * Header: the icons and the booking button share one row beside the nav.
 * Between the desktop breakpoint and ~1200px there is not room for both — the
 * icons wrapped into a column and the button onto two lines, making the header
 * 133px tall. The footer carries the same links, so the header drops the icons
 * at that width rather than squeezing.
 */
.header .social{ flex-wrap:nowrap; }
.header .elementor-widget-med7-buttons .btn{ white-space:nowrap; }
@media (min-width:1025px) and (max-width:1199px){
  .header .elementor-widget-med7-social{ display:none; }
}

.greview{
  display:inline-flex; align-items:center; gap:.55rem;
  min-height:44px; font-size:.875rem; color:var(--ink);
  transition:color .28s var(--ease);
}
.greview:hover{ color:var(--green); }
.greview svg{ width:18px; height:18px; flex:none; color:var(--green); }

/* ---------- 21b. FLOATING WHATSAPP ---------- */
.wafloat{
  position:fixed; right:clamp(1rem,2.2vw,1.75rem); bottom:clamp(1rem,2.2vw,1.75rem);
  z-index:120; display:inline-flex; align-items:center; gap:.6rem;
  min-height:56px; padding:0 1.15rem 0 1.05rem;
  background:var(--wa); color:#fff; border-radius:999px;
  box-shadow:0 10px 30px rgba(32,35,33,.24), 0 2px 6px rgba(32,35,33,.12);
  font-size:.875rem; font-weight:700; letter-spacing:.01em; line-height:1;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wafloat:hover{ transform:translateY(-2px); box-shadow:0 16px 38px rgba(32,35,33,.28), 0 3px 8px rgba(32,35,33,.14); }
.wafloat:focus-visible{ outline:3px solid var(--charcoal); outline-offset:3px; }
.wafloat svg{ width:22px; height:22px; color:#fff; flex:none; }

/* Collapse to a circle where there is less room, before the action bar takes over. */
@media (max-width:1024px){
  .wafloat{ padding:0; width:56px; justify-content:center; }
  .wafloat__label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}

/*
 * The action bar is fixed to the bottom edge below 760px and already carries a
 * WhatsApp control, so the float would sit on top of it.
 */
@media (max-width:760px){
  .wafloat{ display:none; }
}

@media print{ .wafloat{ display:none !important; } }

/* ---------- 21c. METFORM ---------- */
/*
 * MetForm ships its own typography and lands on Roboto for field labels, which
 * is the only place on the site that was not one of the two system faces.
 * Covers the fields the appointment form actually renders, plus the input
 * elements themselves so a future field type cannot reintroduce it.
 */
.mf-input-label,
.mf-input-required-indicator,
.mf-input-help-text,
.mf-input,
.mf-form-wrapper input,
.mf-form-wrapper select,
.mf-form-wrapper textarea,
.mf-form-wrapper button{
  font-family:var(--font-sans);
}
/*
 * MetForm ships `.mf-input-wrapper .mf-input-label` and its React stylesheet
 * loads after the theme's, so matching its two-class specificity still loses
 * on source order. `.elementor-widget` is a real ancestor of every MetForm
 * field, which buys a third class — cheaper than !important, and it leaves the
 * editor's own typography controls still able to win.
 */
.elementor-widget .mf-input-wrapper .mf-input-label,
.elementor-widget .mf-input-wrapper .mf-repeater-field-label{
  font-family:var(--font-sans);
  font-size:.8125rem; font-weight:600; letter-spacing:.01em; color:var(--charcoal);
}
.mf-input-label{
  font-size:.8125rem; font-weight:600; letter-spacing:.01em; color:var(--charcoal);
}
/*
 * MetForm paints the required marker pure red (#FF0000), which is 3.32:1 on
 * the form's beige and the only failing text on the appointment page. Same
 * `.elementor-widget` trick as the labels above — MetForm's stylesheet loads
 * after the theme's, so a single class ties on specificity and loses on order.
 */
.mf-input-required-indicator,
.elementor-widget .mf-input-wrapper .mf-input-required-indicator{ color:var(--green); }

/*
 * The submit button shipped as MetForm's default Google blue (#4285F4, 5px
 * radius) — off-brand, and white on it is 3.56:1. Match .btn--primary so the
 * form's only action looks like every other primary action on the site.
 */
.mf-form-wrapper .metform-btn.metform-submit-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font-sans); font-size:.875rem; font-weight:600; letter-spacing:.01em;
  padding:.95rem 1.6rem; border-radius:var(--r-pill);
  border:1px solid transparent; cursor:pointer;
  background:var(--green); color:var(--ivory); box-shadow:var(--shadow-sm);
  transition:background .32s var(--ease), color .32s var(--ease),
             border-color .32s var(--ease), transform .32s var(--ease), box-shadow .32s var(--ease);
}
.mf-form-wrapper .metform-btn.metform-submit-btn:hover{
  background:var(--green-deep); box-shadow:var(--shadow-md); transform:translateY(-2px);
}
.mf-form-wrapper .metform-btn.metform-submit-btn:active{ transform:translateY(0); }

/*
 * The appointment form's layout. Colours, borders, radius and type are set in
 * the form's own controls (templates/metform-appointment.json); this is only
 * what MetForm has no control for: the card, the two-column grid, the gaps,
 * and a focus ring. MetForm lays fields out as one Elementor column with 10px
 * padding and no gaps, which indented the form off the heading above it and
 * ran the fields into each other.
 *
 * `body .med7-form` plus three classes outranks Elementor's column padding
 * (three classes) and MetForm's own stylesheet (two), whatever the load order.
 */
/* The open dropdown must paint over the widgets below it, which are
   scroll-reveal layers of their own. */
body .med7-form{ position:relative; z-index:5; }
body .med7-form .mf-form-wrapper{
  background:var(--card); border:1px solid var(--beige-line); border-radius:var(--r-lg);
  padding:clamp(1.35rem, 3vw, 2.25rem); box-shadow:var(--shadow-sm);
}
body .med7-form .elementor-section .elementor-container{ max-width:none; }
body .med7-form .elementor-section .elementor-widget-wrap{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.35rem 1.25rem;
  padding:0; align-items:start;
}
body .med7-form .elementor-widget-wrap > .elementor-element{ width:auto; margin:0; }
body .med7-form .elementor-widget-wrap > .elementor-widget-mf-button{ grid-column:1 / -1; margin-top:.35rem; }
body .med7-form .elementor-widget .mf-input-wrapper .mf-input-label{ margin-bottom:.5rem; line-height:1.3; }
/* The select's inner control carries its own 12px padding; match the inputs. */
body .med7-form .mf-input-select .mf_select__control{ padding:11px 14px 11px 16px; min-height:0; }
body .med7-form .mf-input-select .mf_select__value-container{ padding:0; }
body .med7-form .mf-input-select .mf_select__indicator-separator{ display:none; }
body .med7-form .mf-input-select .mf_select__menu{ margin-top:6px; z-index:20; background:var(--white); }
body .med7-form .mf-input-wrapper .mf-input:focus,
body .med7-form .mf-input-select .mf_select__control--is-focused{
  box-shadow:0 0 0 3px rgba(80, 102, 91, .18);
}
body .med7-form .mf-error-message{ display:block; margin-top:.4rem; font-size:.8125rem; }
@media (max-width:640px){
  body .med7-form .elementor-section .elementor-widget-wrap{ grid-template-columns:minmax(0, 1fr); gap:1.1rem; }
  body .med7-form .mf-form-wrapper .metform-btn.metform-submit-btn{ width:100%; }
}

/* ---------- 22. MOTION ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--d,0) * 1s); }
.reveal.in{ opacity:1; transform:none; }
.reveal-mask{ overflow:hidden; display:block; }
.reveal-mask > *{ display:block; transform:translateY(104%); transition:transform 1s var(--ease); transition-delay:calc(var(--d,0) * 1s); }
.reveal-mask.in > *{ transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal,.reveal-mask > *{ opacity:1 !important; transform:none !important; }
  .hero__media img{ animation:none; transform:scale(1.04); }
  .journey__step::after{ width:100%; }
}

/* ---------- 23. RESPONSIVE ---------- */
@media (max-width:1180px){
  .trust__grid{ grid-template-columns:repeat(3,1fr); }
  .trust__item:nth-child(4){ padding-left:0; border-left:0; }
}
@media (max-width:1080px){
  .nav{ display:none; }
  .burger{ display:inline-flex; }
  .header__actions .btn--ghost{ display:none; }
  .g-4{ grid-template-columns:repeat(2,1fr); }
  .journey{ grid-template-columns:repeat(2,1fr); gap:0 1.5rem; }
  .journey__step{ padding-bottom:1.75rem; }
}
@media (max-width:900px){
  .split,.location{ grid-template-columns:1fr; }
  .split--rev .split__media{ order:0; }
  .mega{ display:none; }
  .g-3{ grid-template-columns:repeat(2,1fr); }
  .figure-stack__inset{ width:38%; right:-2%; }
  .location__map{ min-height:320px; }
  .location__map iframe{ min-height:320px; }
}
@media (max-width:760px){
  :root{ --header-h:70px; }
  .actionbar{ display:block; }
  body{ padding-bottom:64px; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:2.25rem 1.5rem; }
  .trust__grid{ grid-template-columns:repeat(2,1fr); }
  .trust__item{ padding:1.4rem 1rem; }
  .trust__item:nth-child(odd){ padding-left:0; border-left:0; }
  .aes-list{ grid-template-columns:1fr; }
  .hero__facts{ gap:.85rem 1.5rem; }
}
@media (max-width:560px){
  .g-2,.g-3,.g-4{ grid-template-columns:1fr; }
  .journey{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; gap:1.25rem; }
  .figure-stack__inset{ position:relative; right:auto; bottom:auto; width:100%; margin-top:.85rem; border-width:0; aspect-ratio:16/9; border-radius:var(--r-md); }
  .brand img{ height:38px; }
  .section-head{ display:block; }
  .section-head .btn{ margin-top:1.5rem; }
  .hero .display{ max-width:none; }
}
@media (max-width:360px){
  :root{ --gutter:1rem; }
  .btn{ padding:.85rem 1.2rem; font-size:.8125rem; }
}

/* ---------- 24. PRINT ---------- */
@media print{
  .header,.actionbar,.drawer,.finalcta,.hero__media{ display:none !important; }
  body{ background:#fff; }
}

/* ==========================================================================
   25. OVERLAY HEADER (pages that open on a dark hero)
   ========================================================================== */
.brand img{ background:var(--ivory); padding:.45rem .68rem; border-radius:11px; }
.header.is-overlay:not(.is-stuck) .nav__link{ color:rgba(247,243,237,.92); }
.header.is-overlay:not(.is-stuck) .nav__link:hover{ color:var(--white); }
.header.is-overlay:not(.is-stuck) .nav__link::after{ background:var(--light); }
.header.is-overlay:not(.is-stuck) .btn--ghost{ color:var(--ivory); border-color:rgba(247,243,237,.42); }
.header.is-overlay:not(.is-stuck) .btn--ghost:hover{ border-color:var(--ivory); background:rgba(247,243,237,.1); }
.header.is-overlay:not(.is-stuck) .burger{ border-color:rgba(247,243,237,.42); }
.header.is-overlay:not(.is-stuck) .burger span,
.header.is-overlay:not(.is-stuck) .burger span::before,
.header.is-overlay:not(.is-stuck) .burger span::after{ background:var(--ivory); }
.header.is-overlay:not(.is-stuck) .burger.is-open span{ background:transparent; }

/* Hero grade — the clinic's cove lighting is very warm; pull it back to beige. */
.hero__media img{ filter:saturate(.62) contrast(1.06) brightness(.88); }
.hero__scrim{
  background:
    linear-gradient(180deg, rgba(20,22,20,.72) 0%, rgba(20,22,20,.26) 30%, rgba(20,22,20,.74) 76%, rgba(20,22,20,.92) 100%),
    linear-gradient(90deg, rgba(20,22,20,.66) 0%, rgba(20,22,20,.1) 66%),
    linear-gradient(180deg, rgba(59,75,67,.3), rgba(59,75,67,.42));
}

/* ---------- 26. DEPARTMENT GRID REFINEMENTS ---------- */
.dept__panel{ aspect-ratio:16/6.6; background:linear-gradient(160deg,var(--beige) 0%,var(--ivory) 100%); }
.dept__panel svg{ width:38px; height:38px; }
.dept__panel .lightlines{ opacity:.7; }

/* 8th tile — route to the full archive rather than leaving a hole in the grid */
.dept-all{
  display:flex; flex-direction:column; justify-content:space-between; gap:1.5rem;
  background:var(--green); color:var(--ivory); border-radius:var(--r-lg);
  padding:1.6rem 1.5rem; position:relative; overflow:hidden;
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.dept-all:hover{ background:var(--green-deep); transform:translateY(-4px); }
.dept-all h3{ color:var(--ivory); }
.dept-all p{ font-size:.9375rem; color:rgba(247,243,237,.92); margin-top:.5rem; }
.dept-all .lightlines{ opacity:.3; }
.dept-all > *{ position:relative; z-index:2; }
.dept-all__arrow{
  width:44px; height:44px; border-radius:var(--r-pill);
  border:1px solid rgba(247,243,237,.35); display:flex; align-items:center; justify-content:center;
  transition:background .35s var(--ease);
}
.dept-all:hover .dept-all__arrow{ background:rgba(247,243,237,.14); }
.dept-all__arrow svg{ width:17px; height:17px; }

/* Finder promoted to its own band */
.finder{ margin-top:var(--sp-gap); display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(1.5rem,3vw,2.75rem); align-items:center; }
.finder__chips{ margin-top:0; }
.finder__result{ grid-column:1 / -1; margin-top:0; }
.finder__aside{ grid-column:1 / -1; }
@media (max-width:900px){ .finder{ grid-template-columns:1fr; } }

/* ---------- 27. DOCTOR + POST PANELS ---------- */
.doc__panel{ aspect-ratio:4/3.3; background:linear-gradient(160deg,var(--green-wash) 0%,var(--ivory) 100%); }
.post__media{ aspect-ratio:16/6.6; background:linear-gradient(160deg,var(--beige) 0%,var(--ivory) 100%); display:flex; align-items:center; justify-content:center; }
.post__media svg{ position:relative; z-index:2; width:34px; height:34px; color:var(--green); stroke-width:1.2; }
.post__media .lightlines{ opacity:.7; }

/* ---------- 28. AESTHETICS EDITORIAL BAND ---------- */
.aes-head{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,4rem); align-items:end; }
.aes-list--wide{ grid-template-columns:repeat(3,1fr); gap:0 3rem; margin-top:clamp(2.5rem,4vw,3.5rem); }
@media (max-width:900px){ .aes-head{ grid-template-columns:1fr; } .aes-list--wide{ grid-template-columns:repeat(2,1fr); gap:0 2rem; } }
@media (max-width:640px){ .aes-list--wide{ grid-template-columns:1fr; } }

/* ---------- 29. LOCATION PHOTO ---------- */
.location__photo{ border-radius:var(--r-lg); overflow:hidden; position:relative; }
.location__photo img{ width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center 42%; }
.location__photo figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.5rem 1.4rem .95rem;
  background:linear-gradient(180deg,transparent,rgba(20,22,20,.82));
  color:var(--ivory); font-size:.8125rem; font-weight:500;
}

/* ==========================================================================
   30. FINAL POLISH PASS
   ========================================================================== */
.brand img{ height:52px; }
.header.is-stuck .brand img{ height:44px; }

/* Hero grade: keep the warmth, lose the acid yellow */
.hero__media img{ filter:saturate(.66) contrast(1.05) brightness(.94); }
.hero__scrim{
  background:
    linear-gradient(180deg, rgba(20,22,20,.70) 0%, rgba(20,22,20,.24) 30%, rgba(20,22,20,.72) 76%, rgba(20,22,20,.92) 100%),
    linear-gradient(90deg, rgba(20,22,20,.64) 0%, rgba(20,22,20,.08) 66%),
    linear-gradient(180deg, rgba(59,75,67,.2), rgba(59,75,67,.3));
}

/* Content photography gets the same restrained grade so the site reads as one shoot */
.photo-grade{ filter:saturate(.78) contrast(1.02) brightness(.99); }

/* Service list reads down each column, not across */
.aes-list--wide{ display:block; columns:3; column-gap:3rem; }
.aes-list--wide li{ break-inside:avoid; }
@media (max-width:900px){ .aes-list--wide{ columns:2; column-gap:2rem; } }
@media (max-width:640px){ .aes-list--wide{ columns:1; } }

/* Storefront crop — keep the signage in frame */
.location__photo img{ aspect-ratio:3/2; object-position:center 30%; }

.finder__result{ min-height:0; padding-top:1.2rem; }
.finder__note{ margin-top:.4rem; }

/* ==========================================================================
   31. PAGE HERO (inner pages)
   ========================================================================== */
.pagehero{
  position:relative; overflow:hidden; background:var(--charcoal); color:var(--ivory);
  padding-top:calc(var(--header-h) + clamp(3.5rem,7vw,6rem));
  padding-bottom:clamp(3.5rem,7vw,6rem);
}
.pagehero .lightlines{ opacity:.4; }
.pagehero__inner{ position:relative; z-index:3; }
.pagehero h1,.pagehero .display{ color:var(--ivory); max-width:18ch; }
.pagehero p{ color:rgba(247,243,237,.82); max-width:56ch; margin-top:1.3rem; font-size:var(--fs-lead); }
.pagehero .label{ color:var(--light); margin-bottom:1.4rem; }
.pagehero .label::before{ background:var(--light); }
.pagehero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2.1rem; }
.pagehero__media{ position:absolute; inset:0; }
.pagehero__media img{ width:100%; height:100%; object-fit:cover; filter:saturate(.6) brightness(.7); }
.pagehero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(20,22,20,.9) 0%,rgba(20,22,20,.55) 60%,rgba(20,22,20,.4) 100%);
}

/* Breadcrumb */
.crumbs{ display:flex; flex-wrap:wrap; gap:.45rem; font-size:.8125rem; margin-bottom:1.5rem; color:rgba(247,243,237,.62); }
.crumbs a:hover{ color:var(--ivory); }
.crumbs span[aria-current]{ color:var(--light); }
.crumbs .sep{ opacity:.45; }
.crumbs--light{ color:var(--ink-soft); margin-bottom:1.25rem; }
.crumbs--light a:hover{ color:var(--charcoal); }
.crumbs--light span[aria-current]{ color:var(--green); }

/* ---------- 31b. PAGINATION ----------
 * the_posts_pagination() in the archive and search fallbacks shipped with no
 * styling at all, so the numbers rendered as bare browser links — a "2" was a
 * 10x23px target, under WCAG 2.2 AA's 24x24 minimum (2.5.8) and the only place
 * on the site not wearing the design system.
 */
.pagination{ margin-top:3rem; }
.pagination .nav-links{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem;
}
.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0 .9rem;
  font-family:var(--font-sans); font-size:.875rem; font-weight:600;
  color:var(--charcoal); background:transparent;
  border:1px solid var(--neutral-line); border-radius:var(--r-pill);
  transition:background .32s var(--ease), border-color .32s var(--ease), color .32s var(--ease);
}
.pagination a.page-numbers:hover{ border-color:var(--charcoal); background:rgba(32,35,33,.03); }
.pagination .page-numbers.current{
  background:var(--green); border-color:var(--green); color:var(--ivory);
}
.pagination .page-numbers.dots{ border-color:transparent; min-width:auto; padding:0 .35rem; color:var(--ink-soft); }

/* On a dark band the same component inverts, as elsewhere. */
.bg-deep .pagination .page-numbers,
.bg-charcoal .pagination .page-numbers{ color:var(--ivory); border-color:rgba(247,243,237,.28); }
.bg-deep .pagination a.page-numbers:hover,
.bg-charcoal .pagination a.page-numbers:hover{ border-color:var(--ivory); background:rgba(247,243,237,.08); }
.bg-deep .pagination .page-numbers.current,
.bg-charcoal .pagination .page-numbers.current{ background:var(--light); border-color:var(--light); color:var(--charcoal); }

/* ---------- 32. CONDITIONS / SERVICE TILES ---------- */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem; }
.tile{
  background:var(--white); border:1px solid var(--neutral-line); border-radius:var(--r-md);
  padding:1.05rem 1.15rem; font-size:.9375rem; font-weight:600; color:var(--charcoal);
  display:flex; align-items:center; gap:.7rem;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.tile:hover{ border-color:var(--green); transform:translateY(-2px); }
.tile svg{ width:14px; height:14px; color:var(--green); flex:none; }
.bg-white .tile{ background:var(--ivory); }
@media (max-width:900px){ .tiles{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .tiles{ grid-template-columns:1fr; } }

.svc{ background:var(--white); border:1px solid var(--neutral-line); border-radius:var(--r-lg); padding:1.5rem 1.45rem; }
.svc svg{ width:26px; height:26px; color:var(--green); stroke-width:1.3; }
.svc h4, .svc h3 { margin-top:1.1rem; }
.svc p{ margin-top:.55rem; font-size:.9375rem; color:var(--ink-soft); }
.bg-white .svc{ background:var(--ivory); }

/* ---------- 33. PROCESS (light band) ---------- */
.process{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; }
.process__step{ position:relative; padding:1.85rem 1.4rem 0 0; }
.process__step::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--neutral-line); }
.process__step::after{ content:""; position:absolute; top:0; left:0; height:1px; width:0; background:var(--green); transition:width .9s var(--ease); transition-delay:calc(var(--d,0) * 1s); }
.process__step.in::after{ width:100%; }
.process__num{ font-size:.75rem; font-weight:700; letter-spacing:.14em; color:var(--green); }
.process__step h4, .process__step h3 { margin-top:.8rem; }
.process__step p{ margin-top:.45rem; font-size:.875rem; color:var(--ink-soft); line-height:1.55; }
@media (max-width:1080px){ .process{ grid-template-columns:repeat(2,1fr); gap:0 1.5rem; } .process__step{ padding-bottom:1.6rem; } }
@media (max-width:560px){ .process{ grid-template-columns:1fr; } }

/* ---------- 34. FAQ ACCORDION (native details — no JS, keyboard-native) ---------- */
.faq{ border-top:1px solid var(--neutral-line); }
.faq details{ border-bottom:1px solid var(--neutral-line); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding:1.35rem 0; font-size:1.05rem; font-weight:600; color:var(--charcoal); line-height:1.45;
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--green); }
.faq summary .plus{ position:relative; width:16px; height:16px; flex:none; margin-top:.35rem; }
.faq summary .plus::before,.faq summary .plus::after{
  content:""; position:absolute; top:50%; left:0; width:16px; height:1.5px; background:var(--green);
  transition:transform .35s var(--ease);
}
.faq summary .plus::after{ transform:rotate(90deg); }
.faq details[open] summary .plus::after{ transform:rotate(0deg); }
.faq details p{ padding:0 3rem 1.5rem 0; font-size:.9375rem; color:var(--ink-soft); max-width:70ch; }

/* ---------- 35. DOCTOR FINDER BAR ---------- */
.filterbar{
  display:flex; flex-wrap:wrap; gap:.55rem; align-items:center;
  padding-bottom:1.6rem; margin-bottom:clamp(2rem,4vw,2.75rem); border-bottom:1px solid var(--neutral-line);
}
.filterbar__label{ font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-right:.6rem; }
.doc-card.is-hidden{ display:none; }
.filter-empty{ display:none; padding:2.5rem 0; color:var(--ink-soft); }
.filter-empty.is-shown{ display:block; }

/* ---------- 36. DOCTOR PROFILE ---------- */
.profile{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.profile__panel{
  position:relative; overflow:hidden; border-radius:var(--r-lg); aspect-ratio:4/4.6;
  background:linear-gradient(160deg,rgba(247,243,237,.14),rgba(247,243,237,.03));
  border:1px solid rgba(247,243,237,.2);
  display:flex; align-items:center; justify-content:center;
}
.profile__panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.profile__mono{ position:relative; z-index:2; font-family:var(--font-display); font-weight:300; font-size:clamp(4rem,8vw,6rem); color:var(--light); }
.profile__panel .lightlines{ opacity:.5; }
@media (max-width:900px){ .profile{ grid-template-columns:1fr; } .profile__panel{ max-width:280px; aspect-ratio:4/4.4; } }

.deflist{ border-top:1px solid var(--neutral-line); }
.deflist > div{ display:grid; grid-template-columns:200px 1fr; gap:1.5rem; padding:1.1rem 0; border-bottom:1px solid var(--neutral-line); }
.deflist dt{ font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); padding-top:.2rem; }
.deflist dd{ margin:0; font-size:.9375rem; color:var(--charcoal); }
.deflist dd ul li{ padding:.15rem 0; }
@media (max-width:640px){ .deflist > div{ grid-template-columns:1fr; gap:.4rem; } }

/* Honest empty state for data the clinic hasn't supplied */
.pending{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.875rem; color:var(--ink-soft); font-style:italic;
}
.pending::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--neutral); flex:none; }

/* ---------- 37. FORMS ---------- */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field--full{ grid-column:1 / -1; }
.field label{ font-size:.8125rem; font-weight:600; color:var(--charcoal); }
.field label .req{ color:var(--green); }
.field input,.field select,.field textarea{
  background:var(--white); border:1px solid var(--neutral-line); border-radius:var(--r-sm);
  padding:.85rem 1rem; font-size:.9375rem; color:var(--charcoal); width:100%;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(80,102,91,.13);
}
.field textarea{ resize:vertical; min-height:120px; }
.field__hint{ font-size:.75rem; color:var(--ink-soft); }
.consent{ display:flex; gap:.7rem; align-items:flex-start; font-size:.875rem; color:var(--ink-soft); line-height:1.55; }
.consent input{ width:17px; height:17px; margin-top:.22rem; flex:none; accent-color:var(--green); }
@media (max-width:640px){ .form{ grid-template-columns:1fr; } }

.sidecard{ background:var(--white); border:1px solid var(--neutral-line); border-radius:var(--r-lg); padding:1.6rem 1.5rem; }
.sidecard + .sidecard{ margin-top:1.1rem; }
/*
 * Sidecards are Elementor containers, and every one of them shipped with its
 * padding set to 0 in the layout data. Elementor writes that into per-element
 * CSS that outranks .sidecard, so the text sat hard against the border on
 * every doctor, department, legal and booking page. Setting Elementor's own
 * padding variables at two classes gives the card its breathing room back
 * without fighting the container's padding rule.
 */
.e-con.sidecard{ --padding-top:1.6rem; --padding-right:1.5rem; --padding-bottom:1.6rem; --padding-left:1.5rem; }
@media (max-width:600px){ .e-con.sidecard{ --padding-top:1.35rem; --padding-right:1.25rem; --padding-bottom:1.35rem; --padding-left:1.25rem; } }
.sidecard h4, .sidecard h3 { margin-bottom:.9rem; }
.sidecard li{ padding:.3rem 0; font-size:.9375rem; }
.bg-white .sidecard{ background:var(--ivory); }

.layout-aside{ display:grid; grid-template-columns:1.45fr .85fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
@media (max-width:900px){ .layout-aside{ grid-template-columns:1fr; } }

/* ==========================================================================
   38. PAGE HERO — two-column variant
   ========================================================================== */
.pagehero__grid{ display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
@media (max-width:900px){ .pagehero__grid{ grid-template-columns:1fr; } }

.glance{
  background:rgba(247,243,237,.07); border:1px solid rgba(247,243,237,.2);
  border-radius:var(--r-lg); padding:1.6rem 1.5rem; backdrop-filter:blur(6px);
}
body .glance h4, body .glance h2 { font-family:var(--font-sans); font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--light); }
.glance dl{ margin:1.2rem 0 0; }
.glance dl > div{ display:flex; justify-content:space-between; gap:1rem; padding:.75rem 0; border-top:1px solid rgba(247,243,237,.16); }
.glance dt{ font-size:.875rem; color:rgba(247,243,237,.62); }
.glance dd{ margin:0; font-size:.875rem; font-weight:600; color:var(--ivory); text-align:right; }

/* Doctor profile hero — keep the monogram panel from dominating */
.pagehero .profile{ grid-template-columns:320px 1fr; align-items:center; }
.pagehero .profile__panel{ aspect-ratio:4/4.2; }
@media (max-width:900px){
  .pagehero .profile{ grid-template-columns:1fr; }
  .pagehero .profile__panel{ max-width:240px; }
}

/* ==========================================================================
   39. PROSE — legal pages, article bodies, long-form editorial
   ========================================================================== */
.prose{ max-width:70ch; }
.prose > * + *{ margin-top:1.15rem; }
.prose h2{ font-size:clamp(1.5rem,2.6vw,2rem); margin-top:2.75rem; }
.prose h3{ margin-top:2.25rem; }
.prose h2 + p,.prose h3 + p{ margin-top:.9rem; }
.prose p{ color:var(--ink); }
.prose ul,.prose ol{ padding-left:1.35rem; }
.prose ul li{ list-style:disc; padding:.28rem 0; }
.prose ol li{ list-style:decimal; padding:.28rem 0; }
.prose ul li::marker,.prose ol li::marker{ color:var(--green); }
.prose strong{ color:var(--charcoal); font-weight:600; }
.prose a{ color:var(--green); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose a:hover{ color:var(--green-deep); }
.prose blockquote{
  margin-left:0; padding:1.25rem 0 1.25rem 1.5rem; border-left:2px solid var(--green);
  font-family:var(--font-display); font-size:1.35rem; font-weight:300; line-height:1.45; color:var(--charcoal);
}
.prose hr{ border:0; border-top:1px solid var(--neutral-line); margin:2.5rem 0; }
.prose table{ width:100%; border-collapse:collapse; font-size:.9375rem; }
.prose th,.prose td{ text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--neutral-line); }
.prose th{ font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.prose .lastupdated{ font-size:.8125rem; color:var(--ink-soft); }

.callout{
  background:var(--white); border:1px solid var(--neutral-line); border-left:3px solid var(--green);
  border-radius:var(--r-sm); padding:1.35rem 1.5rem; margin-top:1.75rem;
}
.callout p{ font-size:.9375rem; color:var(--ink-soft); margin:0; }
.callout strong{ color:var(--charcoal); }
.bg-white .callout{ background:var(--ivory); }
.callout--warn{ border-left-color:#B4553A; }

/* ---------- 40. ARTICLE ---------- */
.article__meta{
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center;
  font-size:.875rem; color:rgba(247,243,237,.7); margin-top:1.6rem;
}
.article__meta .cat{ font-size:.6875rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--light); }
.article__meta .dot{ opacity:.4; }
.article-cta{
  background:var(--green-deep); color:var(--ivory); border-radius:var(--r-lg);
  padding:clamp(1.6rem,3vw,2.25rem); margin:2.5rem 0; position:relative; overflow:hidden;
}
.article-cta > *{ position:relative; z-index:2; }
.article-cta h4, .article-cta h3 { color:var(--ivory); }
.article-cta p{ color:rgba(247,243,237,.92); font-size:.9375rem; margin-top:.6rem; }
.article-cta .lightlines{ opacity:.25; }
.article-cta__btns{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }

.toc{ position:sticky; top:calc(var(--header-h) + 1.5rem); }
.toc li{ padding:.32rem 0; }
.toc a{ font-size:.875rem; color:var(--ink-soft); transition:color .25s var(--ease); }
.toc a:hover{ color:var(--green); }

/* ---------- 41. PACKAGES ---------- */
.pkg-card{
  background:var(--white); border:1px solid var(--neutral-line); border-radius:var(--r-lg);
  padding:1.75rem 1.65rem; display:flex; flex-direction:column;
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.pkg-card:hover{ border-color:var(--neutral); box-shadow:var(--shadow-md); transform:translateY(-4px); }
.bg-beige .pkg-card,.bg-ivory .pkg-card{ background:var(--white); }
.pkg-card__cat{ font-size:.6875rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--green); }
.pkg-card h3{ margin-top:.75rem; }
.pkg-card > p{ margin-top:.7rem; font-size:.9375rem; color:var(--ink-soft); line-height:1.6; }
.pkg-card__incl{ margin-top:1.35rem; padding-top:1.25rem; border-top:1px solid var(--neutral-line); }
body .pkg-card__incl h5, body .pkg-card__incl h4 { font-family:var(--font-sans); font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 .8rem; }
.pkg-card__incl li{ display:flex; gap:.6rem; align-items:flex-start; padding:.28rem 0; font-size:.9375rem; }
.pkg-card__incl li svg{ width:13px; height:13px; color:var(--green); flex:none; margin-top:.4rem; }
.pkg-card__foot{ margin-top:auto; padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; justify-content:space-between; }
.pkg-card__price{ font-size:.8125rem; color:var(--ink-soft); font-style:italic; }

.pkg-nav{ display:flex; flex-wrap:wrap; gap:.55rem; padding-bottom:1.6rem; margin-bottom:clamp(2rem,4vw,2.75rem); border-bottom:1px solid var(--neutral-line); }

/* ---------- 42. STEPS / PATIENT INFORMATION ---------- */
.steps{ counter-reset:step; }
.steps > li{
  counter-increment:step; position:relative; padding:1.5rem 0 1.5rem 4.25rem;
  border-top:1px solid var(--neutral-line);
}
.steps > li:last-child{ border-bottom:1px solid var(--neutral-line); }
.steps > li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute; left:0; top:1.55rem;
  font-size:.75rem; font-weight:700; letter-spacing:.12em; color:var(--green);
  width:2.75rem; padding-bottom:.35rem; border-bottom:1px solid var(--light);
}
.steps h3{ font-size:1.15rem; }
.steps p{ margin-top:.55rem; font-size:.9375rem; color:var(--ink-soft); max-width:62ch; }
.steps p + p{ margin-top:.6rem; }

/* ---------- 43. SEARCH ---------- */
.searchbox{ display:flex; gap:.7rem; flex-wrap:wrap; max-width:38rem; }
.searchbox input{
  flex:1 1 16rem; background:rgba(247,243,237,.1); border:1px solid rgba(247,243,237,.3);
  border-radius:var(--r-pill); padding:.95rem 1.35rem; color:var(--ivory); font-size:.9375rem;
}
.searchbox input::placeholder{ color:rgba(247,243,237,.5); }
.searchbox input:focus{ outline:none; border-color:var(--light); background:rgba(247,243,237,.16); }
.result-group + .result-group{ margin-top:clamp(2.5rem,4vw,3.5rem); }
.result-group__head{ display:flex; align-items:baseline; gap:.85rem; padding-bottom:.9rem; margin-bottom:1.25rem; border-bottom:1px solid var(--neutral-line); }
.result-group__head h3{ font-size:1.15rem; }
.result-group__count{ font-size:.8125rem; color:var(--ink-soft); }
.result{ display:block; padding:1.1rem 0; border-bottom:1px solid var(--neutral-line); transition:padding-left .3s var(--ease); }
.result:hover{ padding-left:.6rem; }
.result h4, .result h2{ font-size:1.02rem; }
.result p{ margin-top:.32rem; font-size:.9375rem; color:var(--ink-soft); }
.result__kind{ font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }

/* ---------- 44. 404 ---------- */
.notfound{ min-height:78svh; display:flex; align-items:center; position:relative; overflow:hidden; background:var(--charcoal); }
.notfound__code{
  font-family:var(--font-display); font-weight:200; font-size:clamp(6rem,18vw,15rem);
  line-height:.85; color:rgba(247,243,237,.1); letter-spacing:-.04em;
}
.notfound__links{ display:grid; grid-template-columns:repeat(3,1fr); gap:.85rem; margin-top:2.5rem; max-width:46rem; }
.notfound__links a{
  border:1px solid rgba(247,243,237,.22); border-radius:var(--r-md); padding:1.1rem 1.2rem;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.notfound__links a:hover{ border-color:var(--ivory); background:rgba(247,243,237,.07); }
.notfound__links strong{ display:block; color:var(--ivory); font-size:.9375rem; }
.notfound__links span{ font-size:.8125rem; color:rgba(247,243,237,.6); }
@media (max-width:640px){ .notfound__links{ grid-template-columns:1fr; } }

/* ---------- 45. TEAM / VALUE ROWS ---------- */
.valuerow{ border-top:1px solid var(--neutral-line); }
.valuerow > div{
  display:grid; grid-template-columns:5rem 1fr 1.35fr; gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.6rem,3vw,2.4rem) 0; border-bottom:1px solid var(--neutral-line); align-items:start;
}
.valuerow__num{ font-size:.75rem; font-weight:700; letter-spacing:.14em; color:var(--green); padding-top:.35rem; }
.valuerow h3{ font-size:clamp(1.2rem,2vw,1.55rem); }
.valuerow p{ font-size:.9375rem; color:var(--ink-soft); }
@media (max-width:760px){
  .valuerow > div{ grid-template-columns:1fr; gap:.7rem; }
  .valuerow__num{ padding-top:0; }
}

/* ---------- 46. INSURANCE ---------- */
.logo-slot{
  border:1px solid var(--beige-line); border-radius:var(--r-md); background:var(--card);
  aspect-ratio:16/7; display:flex; align-items:center; justify-content:center;
  font-size:.75rem; color:var(--ink-soft); text-align:center; padding:.9rem 1.1rem;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.logo-slot:hover{ border-color:var(--green); transform:translateY(-2px); }
.logo-slot img{ width:100%; height:100%; object-fit:contain; display:block; }
.logo-slot:empty,.logo-slot--empty{ border-style:dashed; }
.bg-ivory .logo-slot{ background:var(--white); }

/* Icon-only header button */
.btn--icon{ padding:.7rem; width:38px; height:38px; }
.btn--icon svg{ width:16px; height:16px; }
@media (max-width:1080px){ .header__actions .btn--icon{ display:none; } }

/* Tables in prose scroll rather than push the page wide on mobile */
.prose table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.prose th,.prose td{ white-space:nowrap; }
.prose td[colspan]{ white-space:normal; }

/* Grid children default to min-width:auto, which lets wide content (tables,
   long strings) push a track wider than the viewport. Opt every grid out. */
.layout-aside > *,.grid > *,.split > *,.location > *,.profile > *,
.pagehero__grid > *,.tiles > *,.process > *,.journey > *,.footer__grid > *{ min-width:0; }

/* Long unbreakable strings (email addresses, URLs) wrap instead of pushing out */
.footer__contact a,.footer__contact span,.addr,.prose a,.result p,.deflist dd{ overflow-wrap:anywhere; }
@media (max-width:1000px){ .footer__grid{ grid-template-columns:1fr 1fr; gap:2.25rem 1.75rem; } }

/* ==========================================================================
   47. BEIGE-FORWARD PALETTE (v1.1)
   The brief's primary colour is beige. v1.0 used it as an accent band and let
   ivory/white carry most surfaces. This inverts that: beige is the page, and
   ivory/white become the raised card surfaces that sit on top of it.
   ========================================================================== */
:root{
  --beige-soft:  #F0E9DF;   /* lifted beige — large calm areas          */
  --beige:       #E8DED0;   /* primary beige — the page itself          */
  --beige-deep:  #DED2C0;   /* recessed beige — alternating bands       */
  --beige-line:  #D2C4AF;   /* hairline that reads on beige             */
  --card:        #FBF8F4;   /* card surface, warmer than pure white     */
  --page-bg:     var(--beige);
}

body{ background:var(--page-bg); }

/* Section background utilities, re-pointed at the beige family. */
.bg-beige      { background:var(--beige); }
.bg-beige-soft { background:var(--beige-soft); }
.bg-beige-deep { background:var(--beige-deep); }
.bg-ivory      { background:var(--beige-soft); }   /* was ivory  */
.bg-white      { background:var(--card); }          /* was #fff   */

/* Cards lift off beige rather than blending into it. */
.card,.svc,.sidecard,.pkg-card,.tile,.review,.logo-slot,.callout{
  background:var(--card);
  border-color:var(--beige-line);
}
.bg-white .card,.bg-white .svc,.bg-white .sidecard,
.bg-white .pkg-card,.bg-white .tile,.bg-white .callout{
  background:var(--beige-soft);
}

/* Hairlines warm up so they read against beige rather than against white. */
.deflist,.deflist > div,.faq,.faq details,.steps > li,
.valuerow,.valuerow > div,.filterbar,.result,.prose hr,
.prose th,.prose td,.result-group__head,.pkg-card__incl,
.section-head,.footer__bar{
  border-color:var(--beige-line);
}

/* The icon and monogram panels pick up beige so cards read as one family. */
.dept__panel,.post__media{
  background:linear-gradient(160deg,var(--beige-deep),var(--beige-soft));
}
.dept__panel > svg,.post__media > svg{ color:var(--green); }
.doc__panel{ background:linear-gradient(160deg,var(--green-deep),var(--charcoal)); }

/* Dark bands keep their contrast, but warm slightly toward the beige family. */
.bg-deep{ background:var(--green-deep); }

/* Forms on beige */
.field input,.field select,.field textarea{
  background:var(--card); border-color:var(--beige-line);
}

/* Finder sits on the page rather than floating on white */
.finder{ background:var(--card); border-color:var(--beige-line); }


/* ==========================================================================
   48. HERO — alignment, spacing and the strip markup fix
   ========================================================================== */

/*
 * v1.0 bottom-aligned hero content (align-items:flex-end). With the detail
 * strip present that looked deliberate; with the strip switched off the whole
 * block sank to the bottom of a 92svh box. Alignment is now a control with a
 * sane default, and the min-height stops fighting the content.
 */
.hero{ align-items:center; }
.hero.is-align-top    { align-items:flex-start; }
.hero.is-align-center { align-items:center; }
.hero.is-align-bottom { align-items:flex-end; }

/* Content-height mode: the hero is as tall as what is inside it. */
.hero.is-auto-height{ min-height:0; }
.hero.is-auto-height .hero__inner{
  padding-block:clamp(5rem,10vw,8rem) clamp(3.5rem,7vw,6rem);
}

/*
 * The widget emitted .hero__strip while the stylesheet only ever defined
 * .hero__facts, so the strip rendered unstyled. Both now resolve.
 */
.hero__strip{
  display:flex; flex-wrap:wrap; gap:1.1rem 2.4rem; align-items:center;
  margin-top:clamp(2.5rem,5vw,3.75rem); padding-top:1.6rem;
  border-top:1px solid rgba(247,243,237,.2);
}
.hero__strip > span{
  display:flex; align-items:center; gap:.6rem;
  color:rgba(247,243,237,.9); font-size:.875rem; font-weight:500;
}
.hero__strip svg{ width:16px; height:16px; color:var(--light); flex:none; }

/* Each hero part can be spaced independently from the editor. */
.hero__title{ margin:0; }
.hero__sub{ max-width:52ch; }


/* ==========================================================================
   49. ELEMENTOR SITE LOGO
   Elementor's Site Logo widget wraps the image in its own markup, so the
   v1.0 `.header__logo img` rules never matched it and the logo rendered
   unstyled and unplated.
   ========================================================================== */
.header .elementor-widget-theme-site-logo,
.header .elementor-widget-image{ line-height:0; }

.header .elementor-widget-theme-site-logo img,
.header .elementor-widget-image img,
.header__logo img{
  display:block; height:auto; width:auto;
  max-height:var(--logo-h,54px);
  background:var(--ivory);
  padding:.55rem .8rem;
  border-radius:var(--r-sm);
  transition:max-height .35s var(--ease);
}

/* The plate is what keeps a dark logo legible over a dark hero. */
.header.is-stuck .elementor-widget-theme-site-logo img,
.header.is-stuck .elementor-widget-image img,
.header.is-stuck .header__logo img{ max-height:calc(var(--logo-h,54px) - 8px); }

.footer .elementor-widget-theme-site-logo img,
.footer .elementor-widget-image img{
  max-height:var(--logo-h-footer,64px); width:auto; height:auto;
  object-fit:contain;
}

/*
 * The logo is 1000x500, a clean 2:1. The header widget sets a 148x54 box,
 * which is 2.74:1, and the default object-fit:fill squashed the mark
 * vertically. contain keeps the ratio and letterboxes inside the box instead.
 */
.header__logo img,
.header .elementor-widget-image img,
.header .med7-logo img{
  object-fit:contain; object-position:left center;
}

/* Logo plate can be switched off per placement when a light logo is supplied. */
.logo-plain img{ background:none !important; padding:0 !important; }


/* ==========================================================================
   50. ATOM WIDGETS — single-element building blocks
   Every composite section can also be assembled one element at a time. These
   are the styles for the standalone versions.
   ========================================================================== */
.med7-atom{ display:block; }

/* A single card in a container-built grid */
.card--atom{ height:100%; }

/* Single stat */
.stat--atom{ display:block; }

/* Single glance row, so the panel can be built row by row */
.glance--atom{ padding:0; background:none; border:0; backdrop-filter:none; }
.glance--atom dl{ margin:0; }

/* Single process step outside the .process grid */
.process__step--atom{ padding-right:1.4rem; }
.process__step--atom::after{ width:100%; }

/* Single FAQ item outside the .faq wrapper */
.faq--atom{ border-top:1px solid var(--beige-line); }

/* Single numbered step */
.steps--atom{ counter-reset:none; }
.steps--atom > li::before{ content:attr(data-num); }


/* ==========================================================================
   51. ELEMENTOR EDITOR + ADMIN CONTRAST FIX
   Loaded only inside the editor. See assets/css/editor.css.
   ========================================================================== */

/* ==========================================================================
   52. SOLID HEADER (v1.2)
   v1.1 used a transparent overlay header that only gained a background once
   scrolled. It read as detached from the page and inverted its own text colour
   halfway down. This is a solid header that occupies real space and shrinks on
   scroll instead of changing identity.
   ========================================================================== */
.header,
.header--solid{
  position:sticky; top:0; inset-inline:0; z-index:200;
  background:var(--card);
  border-bottom:1px solid var(--beige-line);
  box-shadow:0 1px 0 rgba(32,35,33,.03);
  transition:
    background .35s var(--ease),
    box-shadow .35s var(--ease),
    padding .35s var(--ease),
    border-color .35s var(--ease);
}

/* Shrink state — same header, less of it. */
.header.is-stuck{
  background:rgba(251,248,244,.92);
  backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:0 10px 30px -22px rgba(32,35,33,.5);
  border-bottom-color:var(--beige-line);
  padding-block:.35rem !important;
}
.header.is-stuck .elementor-widget-theme-site-logo img,
.header.is-stuck .elementor-widget-image img,
.header.is-stuck .header__logo img{
  max-height:calc(var(--logo-h,54px) - 12px);
  padding:.35rem .6rem;
}

/*
 * Solid header means dark type, at every scroll position.
 *
 * :not(.btn) throughout — the mobile drawer's call-to-action buttons live
 * inside this same nav widget, and `color: !important` on a bare `a` painted
 * their labels charcoal on green at 2.56:1.
 */
.header .elementor-nav-menu a:not(.btn),
.header .elementor-nav-menu .elementor-item:not(.btn),
.header__nav a:not(.btn){
  color:var(--charcoal) !important;
  font-weight:500;
}
.header .elementor-nav-menu a:not(.btn):hover,
.header .elementor-nav-menu .elementor-item:not(.btn):hover,
.header .elementor-nav-menu .elementor-item.elementor-item-active:not(.btn),
.header__nav a:not(.btn):hover{ color:var(--green) !important; }

/* The logo no longer needs an ivory plate — the header itself is light. */
.header .elementor-widget-theme-site-logo img,
.header .elementor-widget-image img,
.header__logo img{ background:none; padding:0; }

/* Ghost buttons in a solid header need a visible outline. */
.header .btn--ghost{
  border-color:var(--beige-line);
  color:var(--charcoal);
  background:transparent;
}
.header .btn--ghost:hover{ border-color:var(--green); color:var(--green); background:rgba(80,102,91,.06); }

/* A hero directly beneath a solid header should not sit under it. */
.header + .hero,
.header--solid + section .hero{ margin-top:0; }

/* The overlay variant is retained for anyone who wants it back. */
.header.is-overlay:not(.is-stuck){
  position:fixed; background:transparent; border-bottom-color:transparent; box-shadow:none;
}
.header.is-overlay:not(.is-stuck) .elementor-nav-menu a:not(.btn),
.header.is-overlay:not(.is-stuck) .header__nav a{ color:var(--ivory) !important; }
.header.is-overlay:not(.is-stuck) .elementor-widget-theme-site-logo img,
.header.is-overlay:not(.is-stuck) .header__logo img{ background:var(--ivory); padding:.55rem .8rem; }


/* ==========================================================================
   53. DARK-CONTEXT TEXT — specificity fix
   Elementor's kit stylesheet loads AFTER the theme and sets h1–h6 colours
   globally. Single-class rules like `.glance h4` lost, so headings on dark
   surfaces rendered charcoal-on-charcoal. These selectors carry the extra
   weight needed to win, and every one of them is also exposed as an editor
   control so nothing here is a dead end.
   ========================================================================== */
/* White, per the brief — the gold accent belongs on eyebrow labels, not on a
   data panel heading where it competes with the values beneath it. */
body .glance h1, body .glance h2, body .glance h3,
body .glance h4, body .glance h5, body .glance h6{ color:var(--ivory); }
body .glance dt{ color:rgba(247,243,237,.62); }
body .glance dd{ color:var(--ivory); }

body .dept-all h1, body .dept-all h2, body .dept-all h3,
body .dept-all h4, body .dept-all h5, body .dept-all h6{ color:var(--ivory); }
body .dept-all p{ color:rgba(247,243,237,.92); }

body .hero h1, body .hero h2, body .hero .display,
body .hero__title{ color:var(--ivory); }
body .hero__sub, body .hero p{ color:rgba(247,243,237,.86); }

body .pagehero h1, body .pagehero h2, body .pagehero .display{ color:var(--ivory); }
body .pagehero p{ color:rgba(247,243,237,.82); }

/*
 * These two panels are not the same surface. .profile__panel is a translucent
 * wash over the charcoal doctor hero, so the gold accent belongs there.
 * .doc__panel is a light green-wash-to-ivory gradient on the card, where gold
 * measured 1.54:1 — the initials shown for a doctor with no portrait were
 * barely visible. Green reads 5.85:1 on it.
 */
body .doc__panel .doc__mono{ color:var(--green); }
body .profile__panel .profile__mono{ color:var(--light); }

body .footer h1, body .footer h2, body .footer h3,
body .footer h4, body .footer h5, body .footer h6,
body .footer .footer__h{ color:var(--charcoal); }
body .footer p, body .footer a{ color:var(--ink); }
body .footer a:hover{ color:var(--green); }

body .bg-deep h1, body .bg-deep h2, body .bg-deep h3, body .bg-deep h4,
body .finalcta h1, body .finalcta h2, body .finalcta h3,
body .notfound h1, body .notfound h2{ color:var(--ivory); }
/* ...but the 404's link cards are light cards; their titles (h2 since the
   heading-order fix) stay charcoal. */
body .notfound .svc h2, body .notfound .svc h3{ color:var(--charcoal); }

body .article-cta h1, body .article-cta h2,
body .article-cta h3, body .article-cta h4{ color:var(--ivory); }

/*
 * The sequence widget stamps `journey__step` on EVERY step, including the
 * light-band `process__step` variant (widgets/sequences.php:88). Left
 * unscoped, the ivory below followed it onto beige bands and rendered the
 * Insurance page's three steps at 1.08:1 — invisible. `:not(.process__step)`
 * keeps the dark-band journey fix and hands the process variant back to its
 * own surface-aware rules further down (light: charcoal; .bg-deep: ivory).
 */
body .journey__step:not(.process__step) h4, body .journey__step-inner h4, body .journey__step:not(.process__step) h3, body .journey__step-inner h3 { color:var(--ivory); }
body .journey__step:not(.process__step) p, body .journey__step-inner p{ color:rgba(247,243,237,.92); }


/* ==========================================================================
   54. FOOTER — cleaner layout
   v1.1 dropped full contact CARDS into the footer, which put two heavy boxes
   where two links belong. The brand column now carries the description and two
   ordinary buttons; the rest is a plain four-column link layout.
   ========================================================================== */
/* ---------- 2b. PAGE GUTTER ----------
 * Elementor's boxed container is `max-width: min(100%, 1240px)` with no
 * horizontal padding, so the moment the viewport drops below 1240px the
 * content runs edge to edge — every section title, intro and footer column
 * flush against the screen, and the header logo touching the left edge. It
 * looked fine only because desktop testing sat above 1240.
 *
 * Adding the gutter to max-width keeps the CONTENT box exactly 1240px at
 * desktop (border-box, so the padding is inside the max-width), which means
 * no breakpoint is needed and nothing above 1240 moves. Only top-level boxed
 * containers are touched; `e-con-full` sections — the video hero and the
 * mobile action bar — stay deliberately full-bleed.
 */
.elementor > .e-con-boxed > .e-con-inner{
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  max-width:min(100%, calc(var(--container) + 2 * var(--gutter)));
}

/* The clinic-detail atom never shipped an icon size — the widget offers the
   control but has no default, so these relied on nothing at all. */
.med7-detail svg{ width:18px; height:18px; color:var(--green); margin-bottom:.55rem; }

/*
 * Footer "Visit us": icon beside its line rather than above it, one type size
 * for every line (the hours were 17px, the links 14px bold), and the hours
 * pair kept together — the time has no icon of its own, so it indents to the
 * text column and sits tight under the days (`detail-cont` on that widget).
 */
.footer .med7-detail{
  display:flex; align-items:flex-start; gap:.75rem; margin:0;
  font-size:.9375rem; line-height:1.55;
}
.footer .med7-detail svg{ flex:none; margin:.2rem 0 0; }
.footer .med7-detail .tlink{ font-size:inherit; font-weight:500; padding-block:0; min-height:0; }
.footer .detail-cont .med7-detail{ padding-left:calc(18px + .75rem); }
.footer .elementor-widget.detail-cont{ margin-top:-.9rem; }

/*
 * The four columns are Elementor containers that still carry percentage
 * widths from when this row was a flex container (32/20/20/28). Once the
 * theme makes the row a CSS grid those percentages resolve against each
 * TRACK rather than the row, so a 20% column became 20% of 223px — 45px, and
 * every label wrapped one word per line. The track sizing below is the only
 * thing that should decide column width, so the children always fill it.
 *
 * Beats Elementor's .e-con{width:var(--width)} on specificity rather than
 * source order, which per-post CSS would otherwise win.
 */
.footer .footer__grid > *{ width:100%; min-width:0; }

.footer__grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:clamp(2rem,4vw,3.5rem);
  align-items:start;
}
@media (max-width:1000px){ .footer__grid{ grid-template-columns:1fr 1fr; gap:2.5rem 2rem; } }
@media (max-width:600px){ .footer__grid{ grid-template-columns:1fr; } }

/* ---------- FOOTER ACCORDIONS (phone only) ----------
 * The button is injected by med7.js inside the existing h4, so with no JS
 * these rules never match anything and the lists render open as before.
 *
 * max-height is animated to a height med7.js measures, because the two lists
 * are different lengths and a shared cap would make one of them ease wrong.
 */
@media (max-width:600px){
  .footer__col .footer__h{ margin-bottom:0; }

  .footer__toggle{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    width:100%; min-height:44px; padding:0;
    background:none; border:0; cursor:pointer; text-align:left;
    font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit;
  }
  .footer__toggle::after{
    content:""; flex:none; width:8px; height:8px; margin-right:.2rem;
    border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    transform:translateY(-2px) rotate(45deg);
    transition:transform .3s var(--ease);
  }
  .footer__col:not(.is-collapsed) .footer__toggle::after{
    transform:translateY(2px) rotate(225deg);
  }

  /* med7.js measures each list and publishes it as --acc-h, so the animation
     runs to the list's own height rather than a shared guess, while the
     state itself stays pure CSS — no inline height, no transitionend
     bookkeeping to get wrong. */
  .footer__col .med7-menu{
    overflow:hidden;
    max-height:var(--acc-h, 100vh);
    transition:max-height .3s var(--ease);
  }
  /* visibility is delayed by the duration so the links leave the tab order
     once closed, without cutting the collapse animation short. */
  .footer__col.is-collapsed .med7-menu{
    max-height:0;
    visibility:hidden;
    transition:max-height .3s var(--ease), visibility 0s .3s;
  }
}

@media (prefers-reduced-motion: reduce){
  .footer__col .med7-menu,
  .footer__toggle::after{ transition:none; }
}

.footer__brand{ max-width:34ch; }
.footer__brand p{ margin-top:1.1rem; font-size:.9375rem; line-height:1.7; }
.footer__brand .med7-btns{ margin-top:1.5rem; }

/* Footer buttons: outlined on the light surface, quiet until hovered. */
.footer .btn--ghost{
  border-color:var(--beige);
  color:var(--ink) !important;
  background:transparent;
}
.footer .btn--ghost:hover{
  border-color:var(--green);
  background:rgba(80,102,91,.07);
  color:var(--green) !important;
}
.footer .btn--wa{ color:#fff !important; }

.footer__h{
  font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--charcoal) !important; margin-bottom:1.1rem;
}
.footer__links{ display:grid; gap:.55rem; }
.footer__links li{ list-style:none; }
.footer__links a{ font-size:.9375rem; transition:color .25s var(--ease), padding-left .25s var(--ease); }
.footer__links a:hover{ padding-left:.25rem; }

/* Elementor's nav-menu widget inside the footer, matched to the same rhythm */
.footer .elementor-nav-menu--layout-vertical .elementor-item{
  padding:.28rem 0 !important;
  font-size:.9375rem;
}

.footer__bar{
  display:flex; flex-wrap:wrap; gap:1rem 2rem;
  align-items:center; justify-content:space-between;
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.6rem;
  border-top:1px solid rgba(247,243,237,.16);
}
.footer__legal{ display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; }
.footer__legal li{ list-style:none; }
.footer__legal a{ font-size:.8125rem; }
.footer__disclaimer{
  margin-top:1.4rem; max-width:80ch;
  /* Was ivory at 50% from when this footer was charcoal — 1.02:1 on the
     light surface, i.e. invisible. */
  color:var(--ink-soft) !important; font-size:.78rem; line-height:1.6;
}

/* The footer address block */
.footer .addr{ font-style:normal; line-height:1.75; font-size:.9375rem; }


/* ==========================================================================
   55. BUTTON STYLE HOOKS
   Every button variant exposes its border, background and text as custom
   properties so the Elementor style controls have something to write to.
   ========================================================================== */
.btn{
  border:1px solid var(--btn-border,transparent);
  background:var(--btn-bg,transparent);
  color:var(--btn-color,inherit);
}
.btn--primary{ --btn-bg:var(--green); --btn-color:var(--ivory); --btn-border:var(--green); }
.btn--ghost{ --btn-bg:transparent; --btn-color:var(--charcoal); --btn-border:var(--beige-line); }
.btn--light{ --btn-bg:var(--ivory); --btn-color:var(--charcoal); --btn-border:var(--ivory); }
.btn--outline-light{ --btn-bg:transparent; --btn-color:var(--ivory); --btn-border:rgba(247,243,237,.4); }
.btn--wa{ --btn-bg:var(--wa); --btn-color:#fff; --btn-border:var(--wa); }

/* ==========================================================================
   56. IN-FLOW HEADER SPACING
   The header is sticky now rather than fixed, so it occupies real space.
   Heroes no longer need to reserve room for it — v1.1's padding assumed an
   overlay and produced a double gap under a solid header.
   ========================================================================== */
.pagehero{
  padding-top:clamp(3.5rem,7vw,6rem);
  padding-bottom:clamp(3.5rem,7vw,6rem);
}
.notfound{ min-height:auto; }
.notfound > .container{ padding-top:clamp(3.5rem,6vw,5.5rem) !important; }
.hero{ min-height:min(84svh,880px); }

/* The overlay variant still needs the offset, because it floats. */
.header.is-overlay ~ main .pagehero,
body:has(.header.is-overlay) .pagehero{
  padding-top:calc(var(--header-h) + clamp(3.5rem,7vw,6rem));
}

/* Per-button colour overrides set --h-* inline; these read them with the
   resting value as fallback, so a button without an override is untouched. */
.btn:hover{
  background:var(--h-bg, var(--btn-bg));
  color:var(--h-color, var(--btn-color));
  border-color:var(--h-border, var(--btn-border));
}

/* Footer buttons: keep each on one line, wrap as a group. */
.footer .med7-btns{ flex-wrap:wrap; }
.footer .med7-btns .btn{ white-space:nowrap; }

/* ==========================================================================
   57. SPLIT HERO (v1.3)
   The full-bleed photograph fought the headline: warm interior lighting
   under a heavy scrim, text floating over a blurred room. The split layout
   gives the type solid charcoal to sit on and gives the photograph a
   panel of its own — framed, graded, and lit by the light-lines motif.
   ========================================================================== */
.hero--split{
  display:grid; align-items:stretch;
  background:var(--charcoal);
  min-height:0;
}
.hero--split .hero__media,
.hero--split .hero__scrim{ display:none; }

.hero--split .hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2.5rem,5vw,5rem);
  align-items:center;
  padding-block:clamp(4rem,8vw,6.5rem);
}

.hero__copy{ position:relative; z-index:3; }

/* The photograph panel */
.hero__panel{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg, 18px);
  aspect-ratio:5/4;
  background:var(--green-deep);
  box-shadow:
    0 40px 80px -40px rgba(0,0,0,.7),
    0 0 0 1px rgba(247,243,237,.08) inset;
  transform:translateZ(0);
}
.hero__panel img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:saturate(.72) contrast(1.04) brightness(.96);
}
.hero__panel .lightlines{ opacity:.35; mix-blend-mode:screen; }

/* A soft grade across the panel so it reads as one object with the band */
.hero__panel::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(32,35,33,0) 55%, rgba(32,35,33,.45) 100%),
    linear-gradient(90deg, rgba(32,35,33,.28) 0%, rgba(32,35,33,0) 40%);
  pointer-events:none;
}

/* Caption chip on the panel — an editable line, e.g. the address */
.hero__panel-caption{
  position:absolute; left:1.25rem; right:1.25rem; bottom:1.25rem; z-index:2;
  display:flex; align-items:center; gap:.65rem;
  color:var(--ivory); font-size:.8125rem; font-weight:500;
  background:rgba(32,35,33,.55); backdrop-filter:blur(8px);
  border:1px solid rgba(247,243,237,.14); border-radius:999px;
  padding:.55rem .95rem; width:max-content; max-width:100%;
}
.hero__panel-caption svg{ width:14px; height:14px; color:var(--light); flex:none; }

/* Beige offset frame behind the panel — a deliberate second edge that ties
   the hero to the beige page below it, rather than a stray block. */
.hero__panel-accent{
  position:absolute; inset:22px -22px -22px 22px;
  border-radius:var(--r-lg, 18px);
  background:var(--beige);
  opacity:.12; z-index:0;
}
.hero__panel-wrap{ position:relative; }

/* Ambient glow that keeps the band from being flat black */
.hero--split::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(90% 70% at 88% 20%, rgba(232,222,208,.13), transparent 60%),
    radial-gradient(60% 60% at 10% 90%, rgba(80,102,91,.28), transparent 60%);
}
.hero--split .lightlines{ opacity:.28; }

@media (max-width:1000px){
  .hero--split .hero__inner{ grid-template-columns:1fr; gap:2.5rem; }
  .hero__panel{ aspect-ratio:4/3; max-height:420px; }
  .hero__panel-accent{ display:none; }
}
@media (max-width:600px){
  .hero__panel{ aspect-ratio:1/1; max-height:360px; border-radius:14px; }
  .hero__panel-caption{ font-size:.75rem; padding:.45rem .8rem; }
}

/* Cover layout (the original) is retained, with a stronger grade so type
   never floats on a mid-tone. */
.hero--cover .hero__scrim{
  background:
    linear-gradient(90deg, rgba(20,22,20,.96) 0%, rgba(20,22,20,.82) 45%, rgba(20,22,20,.55) 100%),
    linear-gradient(0deg, rgba(20,22,20,.85) 0%, rgba(20,22,20,0) 40%);
}

/* ==========================================================================
   58. VIDEO HERO (v2)
   ========================================================================== */
.vhero{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--charcoal);
  display:flex; align-items:center;
  min-height:min(88svh,940px);
}
.vhero__media{ position:absolute; inset:0; z-index:0; }
.vhero__poster,
.vhero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 35%;
}
.vhero__video{ opacity:0; transition:opacity 1.2s var(--ease); }
.vhero.is-playing .vhero__video{ opacity:1; }
.vhero.is-playing .vhero__poster{ opacity:0; transition:opacity 1.2s var(--ease); }
.vhero.is-graded .vhero__poster,
.vhero.is-graded .vhero__video{ filter:saturate(.74) contrast(1.05) brightness(.9); }

/* Three-stop scrim: dark at the left where the type sits, lighter at the right
   so the film is still visible. Bright frames are why this is not subtle. */
.vhero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(18,20,18,.97) 0%, rgba(18,20,18,.86) 38%, rgba(18,20,18,.52) 68%, rgba(18,20,18,.42) 100%),
    linear-gradient(0deg, rgba(18,20,18,.8) 0%, rgba(18,20,18,0) 45%),
    radial-gradient(70% 60% at 88% 18%, rgba(232,222,208,.12), transparent 62%);
}
.vhero .lightlines{ z-index:2; opacity:.22; }
.vhero__inner{
  position:relative; z-index:3; width:100%;
  padding-block:clamp(4.5rem,9vw,7.5rem);
}
/*
 * Scoped to .vhero on purpose. Elementor's kit emits
 * `.elementor-kit-N h1 { color: … }` at (0,1,1); a lone `.vhero__title` is
 * (0,1,0) and loses, which renders the headline charcoal on the film. The
 * parent class takes it to (0,2,0) so it wins on specificity rather than on
 * med7_stylesheet_order() happening to enqueue this sheet last.
 */
.vhero .vhero__title{ color:var(--ivory); max-width:17ch; margin:0; }
/* The generic .label is green, which is a light-surface colour. Over the film
   it measured 2.56:1 — under the 4.5:1 that small uppercase text needs. */
.vhero .label{ color:var(--light); }
.vhero .label::before{ background:var(--light); }
.vhero__sub{
  color:rgba(247,243,237,.88); max-width:48ch;
  margin-top:1.3rem; font-size:var(--fs-lead);
}
.vhero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.2rem; }
.vhero__strip{
  display:flex; flex-wrap:wrap; gap:.9rem 2.4rem; align-items:center;
  margin-top:clamp(2.25rem,4.5vw,3.25rem); padding-top:1.5rem;
  border-top:1px solid rgba(247,243,237,.22);
}
.vhero__strip > span{
  display:inline-flex; align-items:center; gap:.6rem;
  color:rgba(247,243,237,.9); font-size:.875rem; font-weight:500;
}
.vhero__strip svg{ width:16px; height:16px; color:var(--light); flex:none; }

.vhero__sound{
  position:absolute; right:clamp(1rem,3vw,2.5rem); bottom:clamp(1rem,3vw,2.5rem); z-index:4;
  border:1px solid rgba(247,243,237,.3); background:rgba(18,20,18,.5); backdrop-filter:blur(8px);
  color:var(--ivory); border-radius:999px; padding:.55rem 1.1rem;
  font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
}
.vhero__sound.is-on{ background:var(--green); border-color:var(--green); }

@media (max-width:900px){
  .vhero{ min-height:min(78svh,760px); }
  .vhero__title{ max-width:none; }
  .vhero__scrim{
    background:
      linear-gradient(180deg, rgba(18,20,18,.86) 0%, rgba(18,20,18,.7) 45%, rgba(18,20,18,.94) 100%);
  }
}


/* ==========================================================================
   59. NAV + DRAWER (v2, theme-owned)
   ========================================================================== */
.med7-nav{ display:flex; align-items:center; }
.med7-menu{
  display:flex; align-items:center; gap:1.6rem;
  list-style:none; margin:0; padding:0;
}
.med7-nav--vertical .med7-menu{ flex-direction:column; align-items:flex-start; gap:.6rem; }
.med7-menu li{ position:relative; list-style:none; }
.med7-menu a{
  position:relative; display:inline-block; padding:.35rem 0;
  font-size:.9375rem; font-weight:500; color:var(--charcoal);
  transition:color .25s var(--ease);
}
.med7-menu a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--green); transition:width .3s var(--ease);
}
.med7-menu a:hover::after,
.med7-menu .current-menu-item > a::after{ width:100%; }
.med7-menu a:hover,
.med7-menu .current-menu-item > a{ color:var(--green); }

/* Sub-menus */
.med7-menu .sub-menu{
  position:absolute; top:100%; left:0; z-index:60; min-width:230px;
  display:grid; gap:.1rem; padding:.6rem; margin:0; list-style:none;
  background:var(--card); border:1px solid var(--beige-line); border-radius:var(--r-md);
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.med7-menu li:hover > .sub-menu,
.med7-menu li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.med7-menu .sub-menu a{ display:block; padding:.5rem .7rem; border-radius:var(--r-sm); }
.med7-menu .sub-menu a:hover{ background:var(--beige-soft); }
.med7-menu .sub-menu a::after{ display:none; }

/* Burger */
.med7-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px;
  background:none; border:0; cursor:pointer;
}
.med7-burger span{
  display:block; height:2px; width:100%; border-radius:2px;
  background:var(--charcoal);
  transition:transform .3s var(--ease), opacity .25s var(--ease);
}
.med7-burger.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.med7-burger.is-active span:nth-child(2){ opacity:0; }
.med7-burger.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Drawer */
.med7-drawer{
  position:fixed; inset:0; z-index:300;
  background:rgba(18,20,18,.55); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.med7-drawer.is-open{ opacity:1; visibility:visible; }
.med7-drawer__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(88vw,400px);
  background:var(--card); padding:1.5rem 1.5rem 2rem;
  display:flex; flex-direction:column; gap:1.25rem;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateX(100%); transition:transform .38s var(--ease);
  box-shadow:-20px 0 60px -30px rgba(0,0,0,.6);
}
.med7-drawer.is-open .med7-drawer__panel{ transform:translateX(0); }
.med7-drawer__close{
  align-self:flex-end; width:44px; height:44px;
  background:none; border:0; font-size:1.9rem; line-height:1;
  color:var(--charcoal); cursor:pointer;
}
.med7-drawer__menu{ display:grid; gap:.15rem; list-style:none; margin:0; padding:0; }
.med7-drawer__menu li{ list-style:none; }
.med7-drawer__menu a:not(.btn){
  display:block; padding:.85rem .25rem; min-height:44px;
  font-family:var(--font-display); font-size:1.4rem; font-weight:300;
  color:var(--charcoal); border-bottom:1px solid var(--beige-line);
}
.med7-drawer__menu a:not(.btn):hover{ color:var(--green); }
.med7-drawer__menu .sub-menu{
  position:static; opacity:1; visibility:visible; transform:none;
  box-shadow:none; border:0; background:none; padding:0 0 .5rem .9rem;
}
.med7-drawer__menu .sub-menu a{
  font-family:var(--font-sans); font-size:.9375rem; padding:.6rem .25rem; border-bottom:0;
}
.med7-drawer__cta{ margin-top:auto; display:grid; gap:.6rem; padding-top:1.25rem; }
.med7-drawer__cta .small{ margin-top:.35rem; text-align:center; }

html.med7-drawer-open{ overflow:hidden; }

@media (max-width:1080px){
  .med7-nav.has-drawer .med7-menu{ display:none; }
  .med7-nav.has-drawer .med7-burger{ display:flex; }
}


/* ==========================================================================
   60. PROCESS RAIL (v2)
   The v1 process widget baked in light text, so on a beige band it rendered
   near-white on near-white. Colour now follows the surface, and the steps are
   joined by a rail so the sequence reads as one.
   ========================================================================== */
.process{
  position:relative;
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  padding-top:3.25rem;
}
.process::before{
  content:""; position:absolute; top:1.55rem; left:0; right:0; height:2px;
  background:var(--beige-line); border-radius:2px;
}
.process::after{
  content:""; position:absolute; top:1.55rem; left:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--green),var(--light));
  border-radius:2px; transition:width 1.6s var(--ease) .1s;
}
.process.in::after{ width:100%; }

.process__step{ position:relative; padding:0 1.5rem 0 0; border:0; }
.process__step::before,
.process__step::after{ content:none; }

/* The marker sits on the rail */
.process__num{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; margin-top:-4.05rem; margin-bottom:1.35rem;
  border-radius:50%;
  background:var(--card); border:2px solid var(--beige-line);
  font-size:.8125rem; font-weight:700; letter-spacing:.02em; color:var(--green);
  transition:border-color .5s var(--ease), background .5s var(--ease), color .5s var(--ease);
}
.process.in .process__step:nth-child(1) .process__num{ transition-delay:.15s; }
.process.in .process__step:nth-child(2) .process__num{ transition-delay:.45s; }
.process.in .process__step:nth-child(3) .process__num{ transition-delay:.75s; }
.process.in .process__step:nth-child(4) .process__num{ transition-delay:1.05s; }
.process.in .process__step:nth-child(5) .process__num{ transition-delay:1.35s; }
.process.in .process__num{ border-color:var(--green); background:var(--green); color:var(--ivory); }

.process__step h4, .process__step h3 {
  font-family:var(--font-display); font-weight:500; font-size:1.0625rem;
  font-optical-sizing:auto; color:var(--charcoal); margin:0 0 .5rem;
}
.process__step p{ font-size:.9375rem; line-height:1.6; color:var(--ink-soft); margin:0; }

/* On a dark band, invert — same component, surface-aware */
.bg-deep .process::before,
.bg-charcoal .process::before,
[style*="--charcoal"] .process::before{ background:rgba(247,243,237,.2); }
.bg-deep .process__num,
.bg-charcoal .process__num{ background:var(--green-deep); border-color:rgba(247,243,237,.28); color:var(--light); }
.bg-deep .process.in .process__num,
.bg-charcoal .process.in .process__num{ background:var(--light); border-color:var(--light); color:var(--charcoal); }
.bg-deep .process__step h4,
.bg-charcoal .process__step h4,
.bg-deep .process__step h3,
.bg-charcoal .process__step h3 { color:var(--ivory); }
.bg-deep .process__step p,
.bg-charcoal .process__step p{ color:rgba(247,243,237,.92); }

@media (max-width:1000px){
  .process{ grid-template-columns:repeat(2,1fr); gap:2.5rem 1.75rem; padding-top:0; }
  .process::before,.process::after{ display:none; }
  .process__num{ margin-top:0; margin-bottom:.9rem; }
}
@media (max-width:560px){
  .process{ grid-template-columns:1fr; gap:0; padding-left:.25rem; }
  /* Vertical rail on mobile */
  .process__step{
    position:relative; padding:0 0 2rem 3.5rem;
  }
  .process__step::before{
    content:""; position:absolute; left:1.3rem; top:2.9rem; bottom:0; width:2px;
    background:var(--beige-line);
  }
  .process__step:last-child::before{ display:none; }
  .process__num{ position:absolute; left:0; top:0; margin:0; }
}


/* ==========================================================================
   61. DOCTOR PORTRAITS
   This was designed as a "plinth crop" — cut-out portraits standing on a dark
   panel, fitted with object-fit:contain. The portraits the clinic actually
   has are full rectangular 4:5 photographs on a cream background, so contain
   letterboxed every one of them into a 4:4.4 frame and the dark gradient
   showed as a bar down each side.

   cover fills the frame. Anchored to the bottom, the ~12% it trims comes off
   the headroom above each doctor, never the face.

   The panel is light for the same reason, and because it is what the three
   photo-less cards show behind their monogram: green on the old dark
   gradient was roughly 1.5:1 and failed. It also means a portrait that is
   still loading no longer flashes a dark block.
   ========================================================================== */
.doc__panel{
  position:relative; overflow:hidden;
  aspect-ratio:4/4.4;
  display:flex; align-items:flex-end; justify-content:center;
  background:linear-gradient(160deg,var(--green-wash) 0%,var(--ivory) 100%);
}
.doc__panel img{
  position:relative; z-index:2;
  width:100%; height:100%;
  object-fit:cover; object-position:center bottom;
  filter:saturate(.9) contrast(1.02);
}
.doc__panel .lightlines{ z-index:1; opacity:.4; }
.doc__panel::after{
  content:""; position:absolute; inset:auto 0 0 0; height:34%; z-index:3;
  background:linear-gradient(180deg,rgba(32,35,33,0),rgba(32,35,33,.35));
  pointer-events:none;
}
.doc__mono{ position:relative; z-index:2; margin-bottom:18%; }

.profile__panel{ display:flex; align-items:flex-end; justify-content:center; }
.profile__panel img{ object-fit:contain; object-position:center bottom; }


/* ==========================================================================
   62. INSURANCE LOGOS — bigger marks, smaller boxes
   ========================================================================== */
.logo-slot{
  aspect-ratio:16/7.5;
  padding:.45rem .6rem;
  background:var(--card);
  border:1px solid var(--beige-line);
  border-radius:var(--r-sm);
}
.logo-slot img{
  width:100%; height:100%; object-fit:contain;
  filter:saturate(1.02);
  transition:transform .35s var(--ease);
}
.logo-slot:hover img{ transform:scale(1.04); }

/* Compact homepage strip */
.logo-strip{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.75rem 1rem;
}
.logo-strip .logo-slot{
  flex:0 0 auto; width:clamp(118px,13vw,165px); aspect-ratio:16/7.5;
  padding:.4rem .55rem;
}
.logo-strip__more{
  display:inline-flex; align-items:center;
  font-size:.875rem; font-weight:600; color:var(--green);
  padding-inline:.5rem; min-height:44px; }


/* ==========================================================================
   63. TRUST STRIP — feature card + supporting grid
   ========================================================================== */
.trust{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr;
  gap:1.1rem;
}
.trust__feature{
  grid-row:span 2;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
  background:linear-gradient(165deg,var(--green-deep),var(--charcoal));
  border-radius:var(--r-lg); padding:clamp(1.75rem,3vw,2.5rem);
  color:var(--ivory);
}
.trust__feature .lightlines{ opacity:.3; }
.trust__feature > *{ position:relative; z-index:2; }
.trust__feature h3{ color:var(--ivory); font-size:clamp(1.5rem,2.4vw,2.1rem); margin-top:1.1rem; }
.trust__feature p{ color:rgba(247,243,237,.92); margin-top:.8rem; font-size:.9375rem; }
.trust__feature .med7-icon-well{ background:rgba(247,243,237,.12); color:var(--light); }
.trust__feature .trust__foot{
  margin-top:2rem; padding-top:1.25rem; border-top:1px solid rgba(247,243,237,.2);
  font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--light); font-weight:700;
}

.med7-icon-well{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:14px;
  background:var(--beige); color:var(--green);
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.med7-icon-well svg{ width:24px; height:24px; }
.svc:hover .med7-icon-well{ background:var(--green); color:var(--ivory); transform:translateY(-2px); }

@media (max-width:900px){
  .trust{ grid-template-columns:1fr 1fr; }
  .trust__feature{ grid-row:auto; grid-column:span 2; }
}
@media (max-width:560px){
  .trust{ grid-template-columns:1fr; }
  .trust__feature{ grid-column:auto; }
}


/* ==========================================================================
   64. DEPARTMENT ROW — the compact "other departments" strip
   ========================================================================== */
.deptrow{ display:grid; grid-template-columns:repeat(6,1fr); gap:.85rem; }
.deptrow__item{
  display:block; overflow:hidden;
  background:var(--card); border:1px solid var(--beige-line); border-radius:var(--r-md);
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.deptrow__item:hover{ border-color:var(--green); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.deptrow__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--beige-deep); }
.deptrow__media img{ width:100%; height:100%; object-fit:cover; }
.deptrow__media svg{ position:absolute; inset:0; margin:auto; width:26px; height:26px; color:var(--green); }
.deptrow__item span{
  display:block; padding:.75rem .85rem .85rem;
  font-size:.875rem; font-weight:600; line-height:1.35; color:var(--charcoal);
}
@media (max-width:1100px){ .deptrow{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .deptrow{ grid-template-columns:repeat(2,1fr); gap:.65rem; } }


/* ==========================================================================
   65. AESTHETICS FEATURE BAND
   ========================================================================== */
.aes{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,#1A1D1B 0%,var(--charcoal) 55%,var(--green-deep) 140%);
  color:var(--ivory);
}
.aes__bg{ position:absolute; inset:0; z-index:0; }
.aes__bg img{ width:100%; height:100%; object-fit:cover; filter:saturate(.7) brightness(.5); }
.aes__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(18,20,18,.95) 0%, rgba(18,20,18,.72) 50%, rgba(18,20,18,.6) 100%),
    radial-gradient(60% 70% at 82% 25%, rgba(231,199,122,.16), transparent 62%);
}
.aes > .container{ position:relative; z-index:2; }
.aes .label{ color:var(--light); }
.aes .label::before{ background:var(--light); }
/* Every heading level, with body for weight: the Aesthetic Services page puts
   an h1 in this band, and the kit's charcoal h1 rule was winning — the page's
   main heading rendered charcoal on charcoal. */
body .aes h1, body .aes h2, body .aes h3, body .aes .display{ color:var(--ivory); }
.aes p{ color:rgba(247,243,237,.82); }

/* Named treatments */
.aes-treatments{ display:grid; grid-template-columns:repeat(3,1fr); gap:.85rem; margin-top:clamp(2rem,4vw,3rem); }
.aes-treat{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:.9rem;
  padding:1.1rem 1.25rem;
  background:rgba(247,243,237,.06);
  border:1px solid rgba(247,243,237,.16);
  border-radius:var(--r-md);
  color:var(--ivory); font-weight:600; font-size:.9375rem;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.aes-treat:hover{
  background:rgba(231,199,122,.14); border-color:var(--light); transform:translateY(-2px);
  color:var(--ivory);
}
.aes-treat svg{ width:20px; height:20px; color:var(--light); flex:none; }
.aes-treat small{
  display:block; font-weight:400; font-size:.8125rem;
  color:rgba(247,243,237,.66); margin-top:.15rem;
}
@media (max-width:900px){ .aes-treatments{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .aes-treatments{ grid-template-columns:1fr; } }


/* ==========================================================================
   66. SERVICES PAGE
   ========================================================================== */
.svc-group{ scroll-margin-top:calc(var(--header-h) + 2rem); }
.svc-group + .svc-group{ margin-top:clamp(3rem,6vw,5rem); }
.svc-group__head{
  display:flex; align-items:center; gap:1rem;
  padding-bottom:1.1rem; margin-bottom:1.75rem;
  border-bottom:1px solid var(--beige-line);
}
.svc-group__head .med7-icon-well{ width:44px; height:44px; border-radius:12px; }
.svc-group__head h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); margin:0; }
.svc-group__count{ margin-left:auto; font-size:.8125rem; color:var(--ink-soft); }

.svc-item{
  background:var(--card); border:1px solid var(--beige-line); border-radius:var(--r-lg);
  height:100%; overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.svc-item:hover{ border-color:var(--green); transform:translateY(-3px); box-shadow:var(--shadow-md); }

/*
 * The card is edge-to-edge so the photograph can bleed to the border. Padding
 * moves onto the text children instead of the card.
 */
.svc-item > :not(.svc-item__media){ padding-inline:1.55rem; }
.svc-item > :not(.svc-item__media):first-child{ padding-top:1.5rem; }
.svc-item > :last-child{ padding-bottom:1.5rem; }

.svc-item__title{ font-size:1.15rem; margin:1.1rem 0 .6rem; }
.svc-item h3{ font-size:1.15rem; }
.svc-item p{ font-size:.9375rem; color:var(--ink-soft); line-height:1.65; margin:0; }

/* ---- photograph -------------------------------------------------------- */
.svc-item__media{
  display:block; position:relative; width:100%;
  background:linear-gradient(160deg,var(--beige) 0%,var(--ivory) 100%);
  overflow:hidden;
}
.svc-item__media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.svc-item__media--16x9{ aspect-ratio:16/9; }
.svc-item__media--3x2 { aspect-ratio:3/2; }
.svc-item__media--4x3 { aspect-ratio:4/3; }
.svc-item__media--1x1 { aspect-ratio:1/1; }

/* No photograph yet: the icon sits centred on the tinted panel. */
.svc-item__media--empty{ display:grid; place-items:center; }
.svc-item__media--empty svg{ width:30px; height:30px; color:var(--green); opacity:.55; }

.svc-item:hover .svc-item__media img{ transform:scale(1.03); }
.svc-item__media img{ transition:transform .6s var(--ease); }

/* ---- what it is for ---------------------------------------------------- */
.svc-item__for{
  margin-top:auto; padding-top:1.1rem;
  font-size:.875rem; color:var(--charcoal);
}
.svc-item__for::before{
  content:""; display:block; height:1px; background:var(--beige-line);
  margin-bottom:1.1rem;
}
.svc-item__for b{
  display:block; font-size:.6875rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green); margin-bottom:.35rem;
}

/* ---- button ------------------------------------------------------------ */
/*
 * The button holds the foot of the card so buttons line up across a row
 * whatever the text above them does. When a "what it is for" block is present
 * it already does that job, so the button just sits under it.
 */
.svc-item__cta{ margin-top:auto; padding-top:1.35rem; }
.svc-item__for ~ .svc-item__cta{ margin-top:1.15rem; padding-top:0; }
.svc-item__cta .btn{ width:100%; justify-content:center; }

/* ==========================================================================
   67. MOBILE PASS (v2)
   v1 scaled desktop padding by a flat factor, which is not the same as
   designing for a phone. These are real mobile values, set per component.
   ========================================================================== */
@media (max-width:780px){

  /* --- Rhythm ------------------------------------------------------- */
  .section{ padding-block:clamp(2.75rem,9vw,3.75rem); }
  .container,.container--wide{ padding-inline:1.25rem; }
  :root{ --header-h:64px; }

  /* Elementor containers: override the generated desktop padding */
  .e-con.med7-section > .e-con-inner{ padding-inline:1.25rem; }

  /* --- Type --------------------------------------------------------- */
  .display{ font-size:clamp(2rem,8.5vw,2.75rem); line-height:1.08; }
  h2{ font-size:clamp(1.6rem,6.5vw,2.05rem); }
  h3{ font-size:1.25rem; }
  .med7-section-title{ font-size:clamp(1.6rem,6.5vw,2.05rem); }
  p,li{ font-size:1rem; line-height:1.65; }
  .small{ font-size:.8125rem; }
  .label{ font-size:.6875rem; letter-spacing:.18em; }

  /* --- Grids: two-up beats one-up for short cards -------------------- */
  .tiles{ grid-template-columns:repeat(2,1fr); gap:.6rem; }
  .tile{ padding:.85rem .9rem; font-size:.8125rem; min-height:44px; }
  .grid.g-4,.grid.g-3,.grid.g-2{ grid-template-columns:1fr; gap:1rem; }
  .med7-grid{ gap:1rem; }

  /* --- Cards -------------------------------------------------------- */
  .card__body{ padding:1.1rem 1.15rem 1.25rem; }
  .svc{ padding:1.25rem 1.2rem; }
  .sidecard{ padding:1.35rem 1.25rem; }
  .pkg-card{ padding:1.35rem 1.25rem; }

  /* --- Sidebar: booking card moves ABOVE the long column ------------- */
  .layout-aside{ display:flex; flex-direction:column; gap:2rem; }
  .layout-aside > aside{ order:-1; }
  .layout-aside > aside .sidecard:nth-child(n+3){ display:none; }

  /* --- Hero --------------------------------------------------------- */
  .vhero__inner{ padding-block:clamp(3rem,10vw,4.5rem); }
  .vhero__cta{ gap:.6rem; }
  .vhero__cta .btn{ flex:1 1 100%; justify-content:center; }
  .vhero__strip{ gap:.6rem 1.25rem; font-size:.8125rem; }
  .hero--split .hero__inner{ padding-block:clamp(2.5rem,8vw,3.5rem); }
  .hero__cta .btn{ flex:1 1 100%; justify-content:center; }
  .pagehero{ padding-block:clamp(2.5rem,9vw,3.5rem); }
  .pagehero__grid{ gap:1.75rem; }

  /* --- Tap targets: 44px minimum ------------------------------------ */
  .btn{ min-height:46px; padding-inline:1.35rem; }
  .btn--sm{ min-height:42px; }
  .chip{ min-height:44px; padding:.6rem 1.1rem; }
  .faq summary{ min-height:52px; padding-block:1rem; }
  .med7-menu a,.med7-drawer__menu a{ min-height:44px; }
  .footer__links a{ display:inline-block; padding-block:.3rem; min-height:38px; }
  .tlink{ min-height:32px; }

  /* --- Forms -------------------------------------------------------- */
  .form{ grid-template-columns:1fr; gap:.9rem; }
  .field input,.field select,.field textarea{
    font-size:16px; /* stops iOS zooming the viewport on focus */
    padding:.9rem 1rem;
  }
  .searchbox{ flex-direction:column; }
  .searchbox .btn{ width:100%; }

  /* --- Footer ------------------------------------------------------- */
  .footer{ padding-block:3rem 2rem; }
  .footer__grid{ grid-template-columns:1fr; gap:2rem; }
  .footer__brand{ max-width:none; }
  .footer__bar{ flex-direction:column; align-items:flex-start; gap:.85rem; }
  .footer__legal{ gap:.35rem 1rem; }

  /* --- Long-form ---------------------------------------------------- */
  .steps > li{ padding-left:3rem; padding-block:1.25rem; }
  .steps > li::before{ width:2.25rem; }
  .valuerow > div{ padding-block:1.5rem; }
  .prose{ max-width:none; }
  .prose h2{ margin-top:2rem; }
  .deflist > div{ grid-template-columns:1fr; gap:.3rem; padding-block:.9rem; }

  /* --- Action bar clearance ----------------------------------------- */
  body{ padding-bottom:0; }
  .actionbar.is-visible ~ * { }
  .footer{ padding-bottom:calc(2rem + 72px); }
}

@media (max-width:400px){
  .container,.container--wide{ padding-inline:1rem; }
  .display{ font-size:clamp(1.85rem,8.5vw,2.3rem); }
  .tiles{ grid-template-columns:1fr; }
  .aes-treatments{ gap:.6rem; }
  .logo-strip .logo-slot{ width:calc(50% - .5rem); }
}

/* Mobile action bar — safe-area aware, real tap targets */
.actionbar{
  padding-bottom:calc(.55rem + env(safe-area-inset-bottom,0px));
  gap:.5rem;
}
.actionbar .btn{ min-height:46px; flex:1; justify-content:center; font-size:.8125rem; }

/* Landscape phones: never let a full-height hero swallow the screen */
@media (max-height:520px) and (orientation:landscape){
  .vhero,.hero{ min-height:auto; }
  .vhero__inner,.hero__inner{ padding-block:3rem; }
}

/* Anything that could ever overflow a small screen */
@media (max-width:780px){
  .prose table{ font-size:.8125rem; }
  .result-group__head{ flex-wrap:wrap; gap:.35rem; }
  .filterbar{ gap:.45rem; padding-bottom:1.1rem; }
  .filterbar__label{ width:100%; margin-bottom:.35rem; }
}

/* ==========================================================================
   68. MOBILE CORRECTIONS (QA pass)
   ========================================================================== */

/* Header CTAs collapse into the drawer at the same breakpoint the menu does —
   the drawer already carries Book / WhatsApp / Call, so keeping them in the bar
   as well is what pushed the header past a 320px viewport. */
@media (max-width:1080px){
  .header .med7-btns,
  .header__actions .btn:not(.btn--icon){ display:none; }
  .header .med7-nav{ margin-left:auto; }
}

/* Footer links: 38px was under the 44px target minimum. */
@media (max-width:780px){
  .footer__links a{ min-height:44px; display:flex; align-items:center; }
  .footer__legal a{ min-height:44px; display:inline-flex; align-items:center; }
}

/* The skewed light-lines overlay is wider than its box by design; make certain
   every host clips it rather than letting it extend the page. */
.vhero,.hero,.pagehero,.aes,.finalcta,.notfound,.footer{ overflow:hidden; }
.lightlines{ pointer-events:none; max-width:100%; }

/* Very small screens: the aesthetics tiles and trust feature need to breathe */
@media (max-width:360px){
  .aes-treat{ padding:.9rem 1rem; font-size:.875rem; }
  .trust__feature{ padding:1.35rem 1.25rem; }
  .trust__feature h3{ font-size:1.35rem; }
  .med7-icon-well{ width:46px; height:46px; }
  .vhero__strip > span{ font-size:.78rem; }
}


/* ---------- DOCTOR PROFILE VIDEO ----------
 * [med7_doctor_video]. A 16:9 frame for an embed, or a quiet placeholder
 * while a video is agreed but not yet delivered.
 */
.doc-video{ margin-top:2.5rem; }
.doc-video .label{ margin-bottom:1rem; }
.doc-video__frame{ position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; background:var(--charcoal); }
.doc-video__frame iframe,
.doc-video__frame video,
.doc-video__frame .wp-video{ position:absolute; inset:0; width:100% !important; height:100% !important; border:0; }
.doc-video__frame--pending{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,var(--green-wash) 0%,var(--ivory) 100%);
  border:1px solid var(--neutral-line);
}
.doc-video__frame--pending span{ font-family:var(--font-sans); font-size:.875rem; font-weight:600; letter-spacing:.01em; color:var(--green); }


/* ---------- HEADING OUTLINE ----------
 * Card, step, sidebar and CTA titles moved from h4 to h3 (and "At a glance"
 * from h4 to h2) so no page skips a heading level. These rules keep them the
 * size they were; the rules above were duplicated for the new tags so colour
 * on dark bands carries over.
 */
.svc h3, .process__step h3, .journey__step h3, .journey__step-inner h3,
.sidecard h3, .article-cta h3{ font-size:var(--fs-h4); line-height:1.3; }
.process__step h3{ font-size:1.0625rem; }
.error404 .svc h2, .svc h2{ font-size:var(--fs-h4); line-height:1.3; font-weight:500; margin-top:1.1rem; }

/*
 * Footer column headings are uppercase micro-labels and belong in the sans.
 * They are h2 now (the footer is its own section), and 2.4.0 had let them
 * pick up the serif from the kit — Newsreader in capitals at 12px with
 * negative tracking, the exact failure the micro-label rule exists to stop.
 */
.footer .footer__h .elementor-heading-title{
  font-family:var(--font-sans); font-weight:700; font-size:.75rem; line-height:1.4;
  letter-spacing:.16em; text-transform:uppercase; color:var(--charcoal);
}

/* Paragraph rhythm in Elementor text blocks. The reset above zeroes every p
   margin and nothing put it back, so two-paragraph blocks ran together with
   no gap at any width — "Who we are" on Home and About among them. */
.elementor-widget-text-editor :is(p, ul, ol) + :is(p, ul, ol){ margin-top:1em; }