/* ============================================================
   Dr. Aarav Mehta - Premium Medical Website Concept
   Boutique-editorial system: warm forest green + ivory, an
   editorial serif (Fraunces) for headlines paired with Inter for
   body/UI, soft sage-tinted cards and a cursive signature - the
   "premium clinic" register, matched to a specific client reference.
   A Trebots demo concept.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --forest: #1f3d2e;
  --forest-deep: #10241a;
  --forest-soft: #3d5f4c;
  --ivory: #f7f5f0;
  --ivory-2: #eef1ea;
  --paper: #ffffff;
  --charcoal: #1c211d;
  --charcoal-soft: #656f68;
  /* Primary accent: a clean mid-forest green, brighter than --forest so
     it reads as an accent (eyebrow pills, links, headline emphasis)
     rather than the neutral body-copy dark. */
  --champagne: #2f8f5f;
  --champagne-soft: #dcefe3;
  /* Secondary accent, reserved for the site's felt/emotional moments -
     a warm oxblood/terracotta, distinct from the green so those
     moments read as a deliberate second voice, not just "more green". */
  --maroon: #8c3f35;
  --maroon-soft: #c98f83;
  --line: rgba(28,33,29,0.09);
  --line-on-dark: rgba(255,255,255,0.14);

  --font-serif: "Fraunces", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-script: "Give You Glory", cursive;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

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

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

::selection{ background: var(--forest); color: var(--ivory); }

/* A faint film-grain layer over the whole page - flat, noiseless colour
   fields are one of the biggest tells of an AI-generated page; a hint of
   texture reads as printed/photographed rather than rendered. */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow{
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--champagne);
  background: rgba(47,143,95,0.12);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  width: fit-content;
}
.eyebrow::before{
  content:"";
  width: 6px; height:6px;
  border-radius: 50%;
  background: currentColor;
  display:inline-block;
  flex-shrink:0;
}

/* ---------- Reveal-on-scroll ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  transition-delay: var(--delay, 0ms);
}
[data-reveal].is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Contact strip (persistent - the address/phone a real
   clinic site always keeps visible, not buried in the footer) ---------- */
:root{ --strip-h: 34px; }
.contact-strip{
  position: fixed;
  top:0; left:0; right:0;
  height: var(--strip-h);
  z-index: 220;
  background: var(--forest-deep);
  border-bottom: 1px solid rgba(242,245,243,0.1);
}
.contact-strip-inner{
  max-width: var(--container);
  height:100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display:flex;
  align-items:center;
  gap: 26px;
}
.contact-item{
  display:flex;
  align-items:center;
  gap: 7px;
  font-size: 12px;
  color: rgba(242,245,243,0.72);
  white-space: nowrap;
  transition: color 220ms ease;
}
a.contact-item:hover{ color: var(--champagne-soft); }
.contact-item svg{ width:12px; height:12px; flex-shrink:0; }
.contact-item--hours{ margin-left: auto; color: rgba(242,245,243,0.5); }

/* ---------- Nav ---------- */
.nav{
  position: fixed;
  top: var(--strip-h); left:0; right:0;
  z-index: 210;
  padding: 22px var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition: background 500ms var(--ease), padding 400ms var(--ease), box-shadow 400ms var(--ease), border-color 400ms ease, top 300ms ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled{
  /* High opacity + no saturate boost: at 140% saturate/88% opacity, a
     portrait photo scrolling underneath bled its skin tones straight
     through the blur into a dirty white-to-tan smear along the nav's
     bottom edge. Near-opaque white with a plain blur reads clean glass
     instead. */
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom-color: var(--line);
  /* Plain opaque white + a hairline 9%-opacity border read as flat and
     pasted-on once real content (esp. a dark section) scrolls right up
     against it - a real shadow gives it the lift/elevation every other
     surface (cards, buttons) on the site already has. */
  box-shadow: 0 18px 40px -26px rgba(10,14,12,0.3);
}
.nav-mark{
  display:flex;
  align-items:center;
  gap:11px;
  font-family: var(--font-serif);
  font-size: 19px;
  letter-spacing: 0.01em;
  color: var(--ivory);
  transition: color 400ms ease;
}
.nav-monogram{ flex-shrink:0; color: currentColor; }
.nav-mark-text{ display:inline-flex; align-items:baseline; gap:10px; }
.nav.is-scrolled .nav-mark{ color: var(--forest); }
/* .nav-mark small is champagne-soft by design - a light mint tint meant
   to glow against the dark hero. On the scrolled (near-white) nav that
   same tint is nearly invisible, so swap it for a dark label - full
   charcoal, not the softer gray, since at 10.5px this already reads
   quiet from its size/spacing alone and a lighter gray on top just
   washes it out further. */
.nav.is-scrolled .nav-mark small{ color: var(--charcoal); }
.nav-mark .dot{ color: var(--champagne); }
.nav-mark small{
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--champagne-soft);
  align-self: center;
}
.nav-links{
  display:flex;
  align-items:center;
  gap: 34px;
}
.nav-links a{
  font-size: 13.5px;
  letter-spacing: 0.03em;
  color: rgba(242,245,243,0.86);
  transition: color 300ms ease;
  position:relative;
}
/* Was --charcoal-soft (#656f68) - legible against white but reads pale
   and washed-out next to the bold serif logo and the solid-green CTA
   either side of it. Full charcoal gives the links real weight; hover
   still switches to champagne for the active cue. */
.nav.is-scrolled .nav-links a{ color: var(--charcoal); }
.nav-links a:hover{ color: var(--champagne); }
.nav-links{ display:flex; }
.nav-cta{
  display:flex;
  align-items:center;
  gap: 24px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: transform 320ms var(--ease), background 320ms ease, color 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
/* Solid clay fill - higher-contrast than a forest-on-forest button so the
   primary action actually pops against both the dark hero and light
   sections, the way a real booking CTA needs to. */
.btn-primary{
  background: var(--champagne);
  color: var(--ivory);
  box-shadow: 0 14px 28px -12px rgba(47,143,95,0.55);
}
.btn-primary:hover{ background: var(--forest); box-shadow: 0 16px 32px -12px rgba(47,143,95,0.7); }
.btn-ghost{
  background: transparent;
  color: var(--ivory);
  border-color: rgba(242,245,243,0.4);
}
.btn-ghost:hover{ border-color: var(--champagne); color: var(--champagne-soft); }
.nav.is-scrolled .btn-ghost{ color: var(--charcoal); border-color: var(--line); }
.btn-outline-dark{
  background: transparent;
  color: var(--forest);
  border-color: var(--forest);
}
.btn-outline-dark:hover{ background: var(--forest); color: var(--ivory); }
/* On the near-black footer band, "outline-dark" (forest-on-forest) is
   invisible - use a light outline that actually reads against --forest-deep. */
.demo-band .btn-outline-dark{
  color: var(--ivory);
  border-color: rgba(242,245,243,0.45);
}
.demo-band .btn-outline-dark:hover{
  background: var(--champagne);
  border-color: var(--champagne);
  color: var(--forest-deep);
}
.btn-sm{ padding: 11px 20px; font-size: 12.5px; }

/* Hamburger toggle (mobile only) */
.nav-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap: 5px;
  width: 44px; height:44px;
  padding:0;
  border:none;
  background:transparent;
  flex-shrink:0;
  -webkit-tap-highlight-color: transparent;
}
.nav-burger span{
  display:block;
  width: 22px; height: 1.5px;
  background: var(--ivory);
  transition: transform 320ms var(--ease), opacity 250ms ease, background 300ms ease;
}
.nav.is-scrolled .nav-burger span{ background: var(--charcoal); }
body.menu-open .nav-burger span{ background: var(--ivory); }
/* Keep the bar visually merged with the dark full-screen menu while it's open */
body.menu-open .nav{
  background: transparent !important;
  border-bottom-color: transparent !important;
}
body.menu-open .nav-mark{ color: var(--ivory) !important; }
body.menu-open .nav-burger span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2){ opacity:0; }
body.menu-open .nav-burger span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

/* Full-screen mobile menu panel */
.mobile-menu{
  position: fixed;
  /* Not inset:0 - the fixed contact-strip + nav (with the name row and
     the burger/close button) paint on top of this at a higher z-index
     and aren't part of this box, so centering across the full viewport
     let the first link ("Meet") land crushed against the header instead
     of getting the same gap the rest of the links have. Start below the
     header instead, matching the height convention used elsewhere
     (section[id] scroll-margin-top). */
  top: calc(84px + var(--strip-h));
  left: 0; right: 0; bottom: 0;
  z-index: 190;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: clamp(32px, 8vh, 56px);
  background: var(--forest-deep);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  transition: opacity 380ms var(--ease), transform 380ms var(--ease), visibility 0s linear 380ms;
}
body.menu-open .mobile-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 380ms var(--ease), transform 380ms var(--ease), visibility 0s linear 0s;
}
body.menu-open{ overflow: hidden; }
.mobile-menu-links{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(18px, 4vh, 28px);
}
.mobile-menu-links a{
  font-family: var(--font-serif);
  font-size: clamp(28px, 8vw, 42px);
  font-weight: 500;
  color: var(--ivory);
  transition: color 250ms ease;
}
.mobile-menu-links a:hover, .mobile-menu-links a:active{ color: var(--champagne-soft); }
.mobile-menu-actions{
  display:flex;
  flex-direction:column;
  gap: 14px;
  width: min(300px, 78vw);
}
.mobile-menu-actions .btn{ justify-content:center; width:100%; }
@media (min-width: 1181px){
  .mobile-menu{ display:none; }
}

/* Language toggle (EN / हिं) */
.lang-toggle{
  display:flex;
  align-items:center;
  border: 1px solid rgba(242,245,243,0.4);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
/* var(--line) is a 9%-opacity hairline - on the scrolled white nav
   that's effectively an invisible outline, so the whole pill reads as
   a pale, edgeless smudge. A real (still light) charcoal border gives
   it a visible shape to sit in. */
.nav.is-scrolled .lang-toggle{ border-color: rgba(28,33,29,0.18); }
.lang-btn{
  border:none;
  background:transparent;
  color: rgba(242,245,243,0.75);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 999px;
  transition: background 250ms ease, color 250ms ease;
}
/* Was --charcoal-soft - the inactive language label sitting right next
   to a solid champagne-filled active pill needs real contrast or it
   just disappears into pale gray. */
.nav.is-scrolled .lang-btn{ color: var(--charcoal); }
.lang-btn.is-active{ background: var(--champagne); color: var(--ivory); }
.lang-toggle--menu{ border-color: rgba(242,245,243,0.35); }
.lang-toggle--menu .lang-btn{ color: rgba(242,245,243,0.75); font-size: 13px; }
.lang-toggle--menu .lang-btn.is-active{ background: var(--champagne); color: var(--ivory); }
/* Hindi text sits slightly larger/looser for comfortable reading.
   Headlines mirror the Latin side's serif (Noto Serif Devanagari,
   pairing with Fraunces); body/UI text stays on the sans family. */
html[lang="hi"] body,
html[lang="hi"] .nav-links a,
html[lang="hi"] .mobile-menu-links a{
  font-family: "Noto Sans Devanagari", var(--font-sans);
}
html[lang="hi"] .hero-headline,
html[lang="hi"] .section-head .title,
html[lang="hi"] .art-copy .title,
html[lang="hi"] .meet-copy .title,
html[lang="hi"] .beyond-title,
html[lang="hi"] .choice-text,
html[lang="hi"] .journey-title,
html[lang="hi"] .quote-text{
  font-family: "Noto Serif Devanagari", var(--font-serif);
}
html[lang="hi"] .hero-headline{ line-height: 1.15; }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex;
  align-items:flex-end;
  overflow: hidden;
  background: var(--forest-deep);
  isolation: isolate;
}
.hero-media{
  position:absolute; inset:0;
  z-index:0;
}
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  object-position: 42% 22%;
  transform: scale(1.04);
  transition: transform 400ms ease-out;
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,14,12,0.55) 0%, rgba(10,14,12,0.12) 32%, rgba(10,14,12,0.05) 55%, rgba(10,14,12,0.75) 100%),
    linear-gradient(90deg, rgba(10,14,12,0.6) 0%, rgba(10,14,12,0.15) 45%, rgba(10,14,12,0.05) 70%);
}
.hero-content{
  position: relative;
  z-index: 2;
  width:100%;
  padding: 0 var(--gutter) 88px;
  color: var(--ivory);
}
.hero-kicker{
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(15px, 1.6vw, 18px);
  letter-spacing: 0.01em;
  color: var(--champagne-soft);
  margin-bottom: 14px;
}
.hero-headline{
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: 15ch;
}
.hero-headline em{
  font-style: normal;
  color: var(--champagne-soft);
}
.hero-sub{
  margin-top: 26px;
  max-width: 480px;
  font-size: 17.5px;
  line-height: 1.6;
  color: rgba(242,245,243,0.86);
}
.hero-actions{
  margin-top: 40px;
  display:flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-stats{
  margin-top: 44px;
  display:flex;
  gap: clamp(24px, 4vw, 48px);
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(242,245,243,0.18);
}
.hero-stat{ display:flex; flex-direction:column; gap: 4px; }
.hero-stat-num{
  font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 32px);
  color: var(--champagne-soft);
}
.hero-stat-label{
  font-size: 12px;
  letter-spacing: 0.03em;
  color: rgba(242,245,243,0.65);
}
.hero-stat-label em{ font-style:normal; opacity:0.75; }
/* ---------- Section shell ---------- */
section{ position: relative; }
section[id]{ scroll-margin-top: calc(84px + var(--strip-h)); }
.section{
  padding: clamp(90px, 12vw, 150px) 0;
}
.section-dark{
  background: var(--forest);
  color: var(--ivory);
}
.section-ivory{ background: var(--ivory); }
.section-paper{ background: var(--paper); }

.section-head{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 64px;
}
.section-head .title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 14ch;
  margin-top: 18px;
}
.section-head .desc{
  max-width: 340px;
  font-size: 15.5px;
  color: var(--charcoal-soft);
  padding-bottom: 6px;
}
.section-dark .section-head .desc{ color: rgba(242,245,243,0.72); }

.index-num{
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  color: var(--champagne);
}

/* ============================================================
   ART STRIP - 3D medical sculpture
   ============================================================ */
.art{
  background: var(--forest-deep);
  color: var(--ivory);
  padding: clamp(70px, 10vw, 120px) 0;
  overflow: hidden;
}
.art-grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items:center;
}
.art-copy .eyebrow{ color: var(--champagne); background: rgba(47,143,95,0.16); }
.art-copy .title{
  margin-top: 22px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.16;
  max-width: 12ch;
}
.art-copy .title em{ font-style: italic; color: var(--champagne-soft); }
.art-rule{
  display:block;
  margin-top: 18px;
  width: 40px; height: 2px;
  background: var(--champagne);
  border-radius: 2px;
}
.art-copy p{
  margin-top: 18px;
  max-width: 42ch;
  color: rgba(242,245,243,0.72);
  font-size: 15.5px;
  line-height: 1.6;
}

/* The three-up Monitor/Manage/Maintain strip inside its own bordered
   panel - a distinct "at a glance" block sitting between the body copy
   and the CTA, not just three more list items. */
.art-features{
  margin-top: 30px;
  display:flex;
  gap: 22px;
  padding: 22px;
  border: 1px solid rgba(242,245,243,0.14);
  border-radius: 16px;
  background: rgba(242,245,243,0.03);
}
.art-feature{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  flex: 1 1 0;
  min-width: 0;
}
.af-icon{
  width: 38px; height:38px;
  border-radius:50%;
  background: rgba(47,143,95,0.16);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.af-icon svg{ width:17px; height:17px; color: var(--champagne-soft); }
.af-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.af-text strong{ font-size: 13.5px; font-weight:700; color: var(--ivory); }
.af-text span{ font-size: 12px; line-height:1.4; color: rgba(242,245,243,0.62); }

.art-cta-row{
  margin-top: 30px;
  display:flex;
  align-items:center;
  gap: 20px;
  flex-wrap: wrap;
}
.art-cta-note{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 13px;
  color: rgba(242,245,243,0.68);
}
.art-cta-note svg{ width:16px; height:16px; color: var(--champagne-soft); flex-shrink:0; }

.art-visual{
  position: relative;
}
/* A faint ECG-line + concentric-circle graphic behind the video, as a
   halo - sits behind .art-media (z-index) so it never competes with
   or clips the video itself, which keeps its own overflow:hidden for
   the video's rounded corners. */
.art-radar{
  position:absolute;
  inset: 0;
  z-index: 0;
  pointer-events:none;
}
/* Was display:flex + width/height:130% on the svg - inside a flex
   container an SVG's intrinsic aspect ratio only let the height
   percentage resolve; the width stayed at 100%. Absolute + transform
   centering sizes both axes independently and predictably. */
.art-radar svg{
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%, -50%);
  width:130%; height:130%;
}
.art-float{
  position:absolute;
  z-index: 3;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 16px;
  max-width: 210px;
  background: rgba(16,36,26,0.9);
  border: 1px solid rgba(242,245,243,0.14);
  border-radius: 14px;
  box-shadow: 0 20px 40px -18px rgba(0,0,0,0.5);
}
.art-float .icon-chip{
  width:36px; height:36px;
  border-radius:50%;
  background: rgba(47,143,95,0.18);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.art-float .icon-chip .icon{ width:16px; height:16px; color: var(--champagne-soft); }
.art-float strong{ display:block; font-size:12.5px; font-weight:700; color: var(--ivory); }
.art-float span{ display:block; margin-top:2px; font-size:11px; line-height:1.35; color: rgba(242,245,243,0.62); }
.af-top{ top: 20px; right: -24px; }
.af-bottom{ bottom: 20px; right: -18px; }

.art-media{
  position: relative;
  z-index: 1;
  /* Was a 4:3 rectangle with the radar ring sitting behind it as a
     separate, disconnected decoration - the heart now sits inside the
     ring itself (a true circular crop), so the two read as one
     composition instead of a circle randomly poking out from behind a
     rectangle. object-fit:cover on the video handles the tighter crop. */
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1/1;
  max-width: 480px;
  margin: 0 auto;
  background: radial-gradient(circle at 50% 38%, var(--forest-soft) 0%, var(--forest-deep) 78%);
  box-shadow: 0 50px 90px -30px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(242,245,243,0.06);
  /* A soft "lub-dub" glow, on the piece's own rhythm - the video already
     carries the real heartbeat internally; this is the same rhythm
     bleeding gently onto the page around it. */
  animation: heartbeatGlow 2.4s ease-in-out infinite;
}
@keyframes heartbeatGlow{
  0%, 8%, 22%, 100%{ box-shadow: 0 50px 90px -30px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(242,245,243,0.06), 0 0 0 0 rgba(47,143,95,0); }
  14%{ box-shadow: 0 50px 90px -30px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(242,245,243,0.06), 0 0 34px 4px rgba(47,143,95,0.45); }
  28%{ box-shadow: 0 50px 90px -30px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(242,245,243,0.06), 0 0 26px 3px rgba(47,143,95,0.32); }
}
.art-video{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
.art-media .frame{
  position:absolute; inset: 14px;
  border-radius: 50%;
  border: 1px solid rgba(242,245,243,0.22);
  pointer-events:none;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce){
  .art-media{ animation: none; }
}
.art-caption{
  margin-top: 18px;
  display:flex;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(242,245,243,0.5);
}

/* Closing strip: a short quote plus four supporting claims, divided
   instead of stacked - echoes the Services section's trust bar but in
   the dark palette. */
.art-bottom-bar{
  margin-top: clamp(50px, 7vw, 80px);
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  gap: 26px;
  padding: 24px 28px;
  border: 1px solid rgba(242,245,243,0.12);
  border-radius: 18px;
  background: rgba(242,245,243,0.03);
}
.abb-quote{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ivory);
}
.abb-quote svg{ color: var(--champagne-soft); opacity:0.9; margin-top: 3px; flex-shrink:0; }
.abb-sep{ width:1px; height:26px; background: rgba(242,245,243,0.14); flex-shrink:0; }
.abb-item{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(242,245,243,0.75);
}
.abb-item svg{ width:17px; height:17px; color: var(--champagne-soft); flex-shrink:0; }

/* ============================================================
   01 - MEET
   ============================================================ */
.meet{ background: var(--ivory); overflow: visible; position: relative; }
/* A soft, blurred plant photo bleeding in from the section's own corner -
   scoped to .meet (not fixed to the viewport) so it doesn't persist over
   the dark hero/footer sections as the page scrolls. Masked so its own
   photo edge fades into the section background instead of showing a
   hard rectangle, and z-index/pointer-events keep it decorative only. */
.meet-corner-leaf{
  position:absolute;
  right: 0;
  top: 600px;
  width: min(30vw, 460px);
  height: auto;
  z-index: 0;
  opacity: 0.9;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 100% 100%, rgba(0,0,0,1) 38%, rgba(0,0,0,0) 72%);
  mask-image: radial-gradient(circle at 100% 100%, rgba(0,0,0,1) 38%, rgba(0,0,0,0) 72%);
}
.meet > .container{ position: relative; z-index: 1; }
.meet-grid{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 6vw, 96px);
  /* Was align-items:center, which centered the (shorter) photo column
     against the (taller) text column and broke its top alignment with
     the eyebrow. Switching to start fixed that, but left the photo
     ending far above the text column's bottom - a dead gap under the
     plate while the cards/trust-bar kept going on the right. Stretch
     fixes both: .meet-media is still top-aligned (stretch's default),
     but now fills the full row height instead of stopping short. */
  align-items:stretch;
}
.meet-media{
  position:relative;
  max-width: 440px;
  margin: 0 auto;
  width: 100%;
  display:flex;
  flex-direction: column;
}
/* A small dot-grid, resting directly on the photo's top-left corner -
   a quiet printed/editorial texture cue rather than a flat photo crop. */
.meet-dots{
  position:absolute;
  top: 20px; left: 20px;
  z-index: 3;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.meet-dots span{
  width:5px; height:5px;
  border-radius:50%;
  background: rgba(247,245,240,0.75);
}
.meet-photo{
  position:relative;
  overflow:hidden;
  /* Was a fixed aspect-ratio, which left the photo a fixed height
     regardless of how tall .meet-copy grew - the source of the dead
     gap under the plate. flex:1 makes it fill whatever height
     .meet-media stretches to (see .meet-grid), with a min-height as a
     floor so it never gets uncomfortably short on tall/narrow copy. */
  flex: 1 1 auto;
  min-height: 460px;
  border-radius: 10px 10px 0 0;
  background: var(--forest-soft);
  box-shadow: 0 44px 80px -30px rgba(10,14,12,0.4);
}
.meet-photo img{ width:100%; height:100%; object-fit:cover; object-position: 50% 12%; }
/* A floating credential card overlapping the photo's bottom-left edge -
   the "trust stat" a visitor sees before they've even read a word. */
.meet-stat-badge{
  position:absolute;
  left: -28px;
  bottom: 84px;
  z-index: 4;
  display:flex;
  align-items:center;
  gap: 12px;
  max-width: 190px;
  background: var(--paper);
  padding: 14px 18px 14px 14px;
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(16,36,26,0.06),
    0 4px 8px rgba(16,36,26,0.08),
    0 28px 50px -22px rgba(16,36,26,0.4);
}
.meet-stat-badge .icon-chip{
  width: 40px; height:40px;
  border-radius: 50%;
  background: var(--champagne-soft);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.meet-stat-badge .icon{ width:19px; height:19px; color: var(--champagne); }
.meet-stat-badge .num{
  font-family: var(--font-serif);
  font-weight:600;
  font-size: 22px;
  line-height:1;
  color: var(--charcoal);
}
.meet-stat-badge .label{
  margin-top:4px;
  font-size: 11px;
  line-height:1.3;
  color: var(--charcoal-soft);
}
/* A caption plate below the photo, not on top of it - a museum wall
   label, not an overlay fighting the composition underneath it. */
.meet-photo-plate{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  background: var(--forest-deep);
  color: var(--ivory);
  padding: 18px 22px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 20px 40px -22px rgba(0,0,0,0.4);
}
.meet-photo-plate .name{ display:block; font-family: var(--font-serif); font-weight:600; font-size: 17px; }
.meet-photo-plate .role{
  display:block;
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--champagne-soft);
}
.meet-signature{
  font-family: var(--font-script);
  font-size: 30px;
  line-height:1;
  color: rgba(247,245,240,0.85);
  flex-shrink:0;
}
.meet-copy .title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.15;
  margin-top: 18px;
  /* Was 13ch, relying on the width itself to wrap "Experience." /
     "Expertise." onto separate lines - but that same width was too
     narrow for "A human approach." (the longest line) to fit on one
     line. Line breaks are now explicit <br>s in the copy, so this only
     needs to be wide enough for the longest line, not narrow enough to
     force wraps. */
  max-width: 21ch;
}
.meet-copy .title .accent{ color: var(--champagne); }
.meet-copy .lede{
  margin-top: 22px;
  font-size: 16px;
  color: var(--charcoal-soft);
  max-width: 46ch;
}
.meet-credentials{
  margin-top: 44px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* Dense, side-by-side layout - icon on the right as a fixed-width
   column instead of stacked above the text, so the card reads as one
   compact row rather than a tall block. */
.meet-credential{
  padding: 18px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  /* A tight "contact" shadow close to the card plus a soft ambient one
     further out, instead of one flat blur - the two-layer combo is what
     reads as an actual raised tile rather than a printed drop-shadow. */
  box-shadow:
    0 1px 2px rgba(16,36,26,0.05),
    0 3px 6px rgba(16,36,26,0.06),
    0 20px 36px -18px rgba(16,36,26,0.28);
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 14px;
  transition: transform 300ms var(--ease), box-shadow 300ms ease;
}
.meet-credential:hover{
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(16,36,26,0.06),
    0 6px 12px rgba(16,36,26,0.08),
    0 28px 46px -18px rgba(16,36,26,0.34);
}
.meet-credential-text{ min-width: 0; }
.meet-credential .icon-chip{
  width: 36px; height:36px;
  border-radius: 50%;
  background: var(--champagne-soft);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.meet-credential .icon{ width:16px; height:16px; color: var(--champagne); }
.meet-credential .label{
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--champagne);
  font-weight: 700;
}
.meet-credential .value{
  margin-top: 6px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--charcoal);
}
.meet-credential .note{
  margin-top: 5px;
  font-size: 12px;
  line-height:1.4;
  color: var(--charcoal-soft);
}
.meet-trust{
  margin-top: 28px;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--champagne-soft);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--charcoal);
}
.meet-trust svg{ width:18px; height:18px; color: var(--champagne); flex-shrink:0; }
/* A small closing accent rule - purely decorative (not a wired-up
   scroll/step progress control), matching the reference's finishing
   touch under the section without implying functionality it doesn't have. */
.meet-rule{
  margin-top: 26px;
  display:block;
  width: 100%;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
}
.meet-rule em{
  display:block;
  width: 64px;
  height: 100%;
  background: var(--champagne);
  border-radius: 2px;
  font-style: normal;
}

/* ============================================================
   QUOTE - IN HIS OWN WORDS
   ============================================================ */
/* A photographic banner (real generated scene, not a flat colour) with
   the quote living on the acrylic plaque in the photo. The container is
   locked to the source image's own aspect ratio (1376:768), so
   object-fit:cover never actually crops anything - image and container
   share the same ratio - which means the plaque overlay's percentage
   coordinates map 1:1 to the photo's real pixels at every viewport
   width, not just the one this was tuned against. */
.quote{
  position: relative;
  color: var(--ivory);
  /* Full width, but height is capped independent of viewport width
     instead of following the photo's own aspect-ratio - at 1920px
     that ratio alone made this 1071px tall (measured), nearly a full
     screen for one quote. A fixed height means the photo now crops via
     object-fit:cover - 460px cropped the glass plaque itself out of
     frame entirely (verified by hiding the text overlay and looking),
     leaving the quote floating on plain wall. 560px keeps the whole
     plaque (all four corner pins) inside the crop, paired with the
     object-position adjustment below. */
  height: clamp(420px, 38vw, 560px);
  overflow: hidden;
}
.quote-bg{ position:absolute; inset:0; z-index:0; }
.quote-bg img{ width:100%; height:100%; object-fit:cover; object-position: 50% 43%; display:block; }
.quote-plaque{
  position:absolute;
  z-index:1;
  /* Recomputed for the new crop: with height:560px max and
     object-position 43%, the visible vertical slice of the source
     photo is y:157.6–559 (of 768) instead of the full frame, so the
     plaque's own y:170–545 lands at ~3%–96.5% of the now-shorter
     visible window, not the ~24%–68% it was against the uncropped
     photo. Horizontal is unchanged - cover isn't cropping width here. */
  left: 20.5%;
  top: 4%;
  width: 33%;
  height: 92%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 1.5%;
}
.quote-badge{
  width: clamp(22px, 3.4vw, 44px);
  height: clamp(22px, 3.4vw, 44px);
  border-radius:50%;
  background: var(--forest-deep);
  border: 1.5px solid var(--champagne);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 6%;
  flex-shrink:0;
}
.quote-badge svg{ width:42%; height:auto; color: var(--champagne); }
.quote-text{
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(9px, 1.55vw, 19px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ivory);
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}
.quote-text em{ font-style: italic; color: var(--champagne-soft); }
.quote-heart{
  margin-top: 5%;
  width: clamp(12px, 1.5vw, 19px);
  flex-shrink:0;
}
.quote-heart svg{ width:100%; height:auto; color: var(--champagne); }
.quote-attribution{
  margin-top: 4%;
  font-size: clamp(7px, 0.85vw, 11.5px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--champagne-soft);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* ============================================================
   SERVICES
   ============================================================ */
.services{ background: var(--paper); position: relative; }
.services > .container{ position: relative; }

.services-head .title em{
  font-style: italic;
  color: var(--champagne);
}
/* Centered in the gap between the headline and the orb - absolute +
   left:50%/translateX(-50%) centers it against the container's own
   width, independent of the flex row (matching how the orb is also
   positioned independently, so neither can push the other around). */
.services-desc-center{
  position:absolute;
  top: 55px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  border-left: 2px solid var(--line);
  padding-left: 20px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--charcoal-soft);
}

/* Dashed "orb" decoration, floating to the right of the headline -
   position:absolute takes it out of the services-head flex flow
   entirely, so it can't be pushed around by (or push around) the
   eyebrow/headline block regardless of how tall that block is. */
.services-orb{
  position:absolute;
  top: 55px;
  right: 8px;
  width: 118px; height:118px;
  border-radius:50%;
  border: 1.5px dashed var(--line);
  display:flex; align-items:center; justify-content:center;
  z-index:0;
}
.services-orb::after{
  content:"";
  position:absolute;
  right:4px; bottom:9px;
  width:8px; height:8px;
  border-radius:50%;
  background: var(--champagne);
}
.services-orb-inner{
  width:76px; height:76px;
  border-radius:50%;
  background: var(--paper);
  box-shadow: 0 16px 32px -16px rgba(16,36,26,0.3);
  display:flex; align-items:center; justify-content:center;
}
.services-orb-inner svg{ width:21px; height:21px; color: var(--champagne); }

.services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
  z-index: 1;
}
/* Elevated cards, not a bordered spreadsheet - real gaps between them
   and a layered shadow (tight contact shadow + soft ambient one) so
   each one reads as an actual raised tile, not a flat drop-shadow. */
.service-card{
  position:relative;
  overflow:hidden;
  /* Denser than before: less padding all round. Bottom padding no
     longer needs extra room reserved for an absolutely-positioned
     button - the button's in normal flow now (see .svc-link). */
  padding: 24px 22px 30px;
  background: var(--ivory);
  border-radius: 20px;
  border: 1px solid rgba(16,21,19,0.06);
  box-shadow:
    0 1px 2px rgba(16,36,26,0.05),
    0 3px 6px rgba(16,36,26,0.06),
    0 24px 44px -28px rgba(16,36,26,0.3);
  transition: transform 340ms var(--ease), box-shadow 340ms ease, border-color 340ms ease;
}
.service-card:hover{
  transform: translateY(-6px);
  box-shadow:
    0 2px 4px rgba(16,36,26,0.06),
    0 8px 16px rgba(16,36,26,0.09),
    0 34px 60px -24px rgba(16,36,26,0.38);
  border-color: var(--champagne);
}
/* Icon moved beside the title/description instead of stacked above
   them - a fixed-width column on the right, text taking the rest. */
.svc-body{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 14px;
}
.svc-text{ min-width: 0; }
.service-card .icon-chip{
  width: 42px; height:42px;
  border-radius: 13px;
  background: rgba(47,143,95,0.14);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition: background 340ms ease, transform 340ms ease;
}
.service-card:hover .icon-chip{ background: var(--champagne); transform: scale(1.06); }
.service-card:hover .icon-chip .icon{ color: var(--forest-deep); }
.service-card .icon{ width: 16px; height:16px; color: var(--champagne); transition: color 340ms ease; }
.service-card h4{
  position:relative;
  padding-bottom: 10px;
  font-family: var(--font-serif);
  font-size: 16.5px;
  color: var(--charcoal);
}
.service-card h4::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width: 24px; height:2px;
  background: var(--champagne);
}
.service-card p{
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--charcoal-soft);
}
/* A large, faint number and a soft dot-tinted glow in the bottom-right
   corner - behind the body/link (z-index below them), purely textural. */
.svc-num{
  position:absolute;
  right: 24px; bottom: 18px;
  z-index:1;
  font-family: var(--font-serif);
  font-weight:700;
  font-size: 34px;
  /* Was var(--champagne-soft) - a near-white mint on the card's ivory
     background, measuring a 1.1:1 contrast ratio (effectively
     invisible; even faint decorative text needs to actually register).
     A translucent version of the solid accent keeps the same soft,
     recessive "watermark number" feel but at a ratio you can see. */
  color: rgba(47,143,95,0.55);
  pointer-events:none;
}
.svc-dots{
  position:absolute;
  right: 0; bottom:0;
  width: 110px; height:110px;
  z-index:0;
  background: radial-gradient(circle at 100% 100%, rgba(47,143,95,0.1), transparent 68%);
  pointer-events:none;
}
/* Was position:absolute; bottom:28px - pinned to the card's edge
   regardless of how many lines the description took, so a 1-line card
   left a big dead gap above the button while a 2-line card felt
   cramped. Normal flow with a fixed margin-top keeps the gap between
   text and button consistent no matter how much text there is. */
.svc-link{
  position:relative;
  z-index:2;
  margin-top: 18px;
  display:inline-flex; align-items:center; gap:6px;
  padding: 9px 16px;
  background: var(--champagne-soft);
  color: var(--forest);
  border-radius: 999px;
  font-size: 12.5px; font-weight:700;
  transition: background 250ms ease, transform 250ms ease, color 250ms ease;
}
.svc-link:hover{ background: var(--champagne); color: var(--paper); transform: translateX(2px); }
.svc-link svg{ width:12px; height:12px; }
.svc-book{ position:relative; z-index:2; margin-top: 18px; }

/* The "Video Consultations" card, singled out as the featured option -
   a green outline, a solid (not tinted) icon chip, a POPULAR badge and
   a solid Book Now CTA instead of the quieter Learn more link. */
.service-card.is-popular{
  border: 1.5px solid var(--champagne);
}
.service-card.is-popular .icon-chip{ background: var(--champagne); }
.service-card.is-popular .icon-chip .icon{ color: var(--paper); }
/* Not absolutely positioned - the icon is now also right-aligned (see
   .svc-body), and an absolute top-right badge would sit on top of it.
   Normal flow, right-aligned via margin-left:auto, keeps it in its own
   row above the icon regardless of layout. */
.svc-popular-badge{
  position:relative;
  z-index:2;
  display:flex; align-items:center; gap:5px;
  width: fit-content;
  margin: 0 0 14px auto;
  padding: 6px 12px;
  background: var(--champagne-soft);
  color: var(--forest);
  border-radius:999px;
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
}
.svc-popular-badge svg{ color: var(--champagne); }

/* Trust strip closing the section - one headline claim plus three
   supporting ones, divided instead of stacked as separate lines. */
.services-trust{
  margin-top: 40px;
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  gap: 22px;
  padding: 22px 28px;
  background: var(--ivory);
  border-radius: 18px;
  position: relative;
  z-index: 1;
}
.st-item{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--charcoal-soft);
}
.st-item strong{ color: var(--charcoal); font-weight:700; }
.st-item > svg{ width:16px; height:16px; color: var(--charcoal-soft); flex-shrink:0; }
.st-main{ font-size: 14.5px; color: var(--charcoal); }
.st-main .icon-chip{
  width: 38px; height:38px;
  border-radius:50%;
  background: var(--champagne-soft);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.st-main .icon-chip svg{ width:17px; height:17px; color: var(--champagne); }
.st-sep{ width:1px; height:22px; background: var(--line); flex-shrink:0; }

/* ============================================================
   02 - UNDERSTAND
   ============================================================ */
.understand{ background: var(--paper); position: relative; overflow: hidden; }
.understand > .container{ position: relative; z-index: 1; }
.understand .section-head .title{ max-width: 12ch; }

/* Decorative header blob - a soft radial-gradient circle with a leaf
   sprig and a stethoscope mark, echoing the same "orb" motif used in
   Services without being an exact repeat (leaf instead of dashed ring). */
.understand-deco{
  position:absolute;
  top: -60px;
  right: -40px;
  width: 340px; height:340px;
  z-index:0;
  pointer-events:none;
}
.ud-blob{
  position:absolute;
  inset:0;
  border-radius:50%;
  background: radial-gradient(circle at 45% 40%, var(--champagne-soft) 0%, rgba(220,239,227,0.25) 55%, transparent 78%);
}
.ud-leaves{
  position:absolute;
  left: 18%; bottom: 18%;
  width: 90px; height:90px;
}
.ud-dot{
  position:absolute;
  border-radius:50%;
  background: var(--champagne);
}
.ud-dot1{ width:6px; height:6px; left: 30%; bottom: 12%; opacity:0.7; }
.ud-dot2{ width:9px; height:9px; left: 12%; bottom: 30%; opacity:0.45; }
.ud-icon{
  position:absolute;
  top: 34%; right: 20%;
  width: 88px; height:88px;
  border-radius:50%;
  background: var(--paper);
  box-shadow: 0 24px 48px -20px rgba(16,36,26,0.25);
  display:flex; align-items:center; justify-content:center;
}
.ud-icon svg{ width:32px; height:32px; color: var(--champagne); }
/* Each choice is now a distinct elevated card (icon, index, divider,
   title+sub, circular arrow) instead of a plain bordered list row -
   matches the reference's "card list" rather than a spreadsheet-y
   divided list. */
.choice-list{
  display:flex;
  flex-direction: column;
  gap: 16px;
}
.choice{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  border-radius: 16px;
  background: var(--paper);
  border: 1px solid rgba(16,21,19,0.06);
  border-left: 3px solid var(--champagne);
  box-shadow:
    0 1px 2px rgba(16,36,26,0.04),
    0 16px 32px -26px rgba(16,36,26,0.22);
  text-align:left;
  width:100%;
  transition: transform 300ms var(--ease), box-shadow 300ms ease, background 300ms ease;
}
.choice:hover, .choice:focus-visible{
  transform: translateY(-3px);
  background: var(--ivory);
  box-shadow:
    0 2px 4px rgba(16,36,26,0.06),
    0 24px 44px -22px rgba(16,36,26,0.3);
}
.choice-left{
  display:flex;
  align-items:center;
  gap: 20px;
  min-width:0;
}
.choice-icon{
  flex-shrink:0;
  width: 42px; height:42px;
  border-radius: 12px;
  background: var(--champagne-soft);
  display:flex; align-items:center; justify-content:center;
}
.choice-icon svg{ width:19px; height:19px; color: var(--champagne); }
.choice-index{
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
  color: var(--champagne);
  flex-shrink:0;
}
.choice-divider{
  width:1px;
  height: 34px;
  background: var(--line);
  flex-shrink:0;
}
.choice-text-wrap{ min-width:0; }
.choice-text{
  display:block;
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 600;
  color: var(--charcoal);
  transition: color 300ms ease;
}
.choice:hover .choice-text{ color: var(--forest); }
.choice-sub{
  display:block;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height:1.4;
  color: var(--charcoal-soft);
}
.choice-arrow{
  flex-shrink:0;
  width: 42px; height:42px;
  border-radius: 50%;
  background: var(--champagne-soft);
  display:flex; align-items:center; justify-content:center;
  transition: transform 380ms var(--ease), background 380ms ease;
}
.choice:hover .choice-arrow{
  background: var(--forest);
  transform: rotate(45deg);
}
.choice:hover .choice-arrow svg{ stroke: var(--ivory); }
.choice-arrow svg{ stroke: var(--champagne); transition: stroke 300ms ease; }

.concerns{
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.concerns-lede{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--charcoal-soft);
}
.concerns-lede svg{ color: var(--champagne); flex-shrink:0; }
.concerns-tags{
  margin-top: 18px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.concerns-tags li{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--charcoal-soft);
  background: var(--ivory);
  transition: border-color 250ms ease, color 250ms ease;
}
.concerns-tags li svg{ width:15px; height:15px; color: var(--champagne); flex-shrink:0; }
.concerns-tags li:hover{ border-color: var(--champagne); color: var(--charcoal); }

/* ============================================================
   03 - CARE (journey line)
   ============================================================ */
.care{ background: var(--forest); color: var(--ivory); position: relative; overflow: hidden; }
.care > .container{ position: relative; z-index: 1; }
/* A real leaf-branch photo bleeding in from the corner - same masked-
   edge technique as .meet-corner-leaf, generated specifically for this
   dark background rather than reusing the Meet section's blurred one
   (different leaf shape and in-focus, not blurred). */
/* A real transparent cutout (alpha channel around the leaf silhouette
   itself) rather than a flat-background photo faded with a CSS mask -
   the mask approach left a soft but still-detectable rectangular
   falloff; true transparency has no edge to hide at all. */
.care-leaf{
  position:absolute;
  top: 0; right: 0;
  z-index: 0;
  width: min(30vw, 420px);
  height: auto;
  transform: scaleX(-1);
  pointer-events:none;
}
/* Was --champagne-soft (#dcefe3) - nearly indistinguishable from the
   white headline text above it on a dark background (confirmed:
   rgb(220,239,227), reads as barely-off-white in a zoomed screenshot).
   The full-saturation accent actually shows up as a distinct green. */
.care .section-head .title em{ font-style: italic; color: var(--champagne); }
.care-rule{
  display:block;
  margin-top: 18px;
  width: 40px; height: 2px;
  background: var(--champagne);
  border-radius: 2px;
}
.journey{
  position: relative;
  margin-top: 56px;
}
.journey-track{
  position: relative;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
/* Rail spans between the first and last dot's centers - each dot sits
   centered in its 1-of-5 grid column, so those centers land at 10%
   and 90% of the track width. */
.journey-rail{
  position:absolute;
  left: 10%; right:10%; top: 26px;
  height: 1px;
  background: rgba(242,245,243,0.18);
}
.journey-rail-fill{
  position:absolute;
  left:0; top:0;
  height:1px;
  width: 0%;
  background: var(--champagne);
  transition: width 1400ms var(--ease);
}
.journey-step{
  position:relative;
  padding-top: 76px;
}
/* Was a muted gray border/icon by default, only turning bright green
   once the JS scroll-spy marked a step .is-active - so on first paint
   (or any moment before the user scrolls past a step) most of the
   nodes read as washed-out, not matching the reference's uniformly
   bright green icons on every node. Bright green is now the resting
   state for all five; .is-active below only adds a subtle scale/glow
   on top of that, instead of driving the base color. */
.journey-dot{
  position:absolute;
  top: 0; left:50%;
  transform: translateX(-50%);
  width: 52px; height:52px;
  border-radius:50%;
  background: var(--forest-deep);
  border: 1px solid var(--champagne);
  display:flex; align-items:center; justify-content:center;
  z-index:2;
  transition: background 500ms ease, border-color 500ms ease, transform 500ms var(--ease);
}
.journey-dot svg{
  width: 22px; height:22px;
  color: var(--champagne);
  transition: color 500ms ease;
}
/* The small filled number badge straddling the dot's bottom edge -
   sits in its own layer so the dot's own hover/active scale doesn't
   distort it. */
.journey-badge{
  position:absolute;
  left:50%; bottom:-11px;
  transform: translateX(-50%);
  width: 24px; height:24px;
  border-radius:50%;
  background: var(--champagne);
  border: 2px solid var(--forest);
  color: var(--forest-deep);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  display:flex; align-items:center; justify-content:center;
}
/* Border/background/icon colour are now the resting state above (see
   .journey-dot) - .is-active only adds the scroll-driven emphasis on
   top: a slight scale and a soft glow, not a colour swap. */
.journey-step.is-active .journey-dot{
  transform: translateX(-50%) scale(1.08);
  box-shadow: 0 0 0 6px rgba(47,143,95,0.14);
}
/* Was a flat 3%-white tint with a hairline border - invisible as a
   raised surface on a dark background, since dark shadows don't read
   against dark backgrounds the way they do on light cards elsewhere on
   the site. A bright inset edge (simulating light catching the top of
   a raised tile) paired with a real drop shadow toward the section's
   own darker tone is what actually produces depth here. */
.journey-card{
  margin-top: 30px;
  height: calc(100% - 30px);
  padding: 24px 20px;
  border: 1px solid rgba(242,245,243,0.14);
  border-radius: 16px;
  background: rgba(242,245,243,0.045);
  box-shadow:
    inset 0 1px 0 rgba(242,245,243,0.12),
    0 1px 2px rgba(10,20,15,0.3),
    0 20px 36px -20px rgba(10,20,15,0.6);
  transition: transform 300ms var(--ease), box-shadow 300ms ease, border-color 300ms ease;
}
.journey-card:hover{
  transform: translateY(-4px);
  border-color: rgba(47,143,95,0.4);
  box-shadow:
    inset 0 1px 0 rgba(242,245,243,0.16),
    0 2px 4px rgba(10,20,15,0.35),
    0 30px 46px -20px rgba(10,20,15,0.7);
}
.journey-num{
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--champagne-soft);
  text-transform: uppercase;
  font-weight: 600;
}
.journey-title{
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 600;
}
.journey-title-rule{
  display:block;
  margin-top: 10px;
  width: 26px; height:2px;
  border-radius:2px;
  background: var(--champagne);
}
.journey-desc{
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(242,245,243,0.66);
}

/* ============================================================
   04 - EXPERIENCE (clinic gallery)
   ============================================================ */
.experience{ background: var(--ivory); position: relative; overflow: hidden; }
.experience > .container{ position: relative; z-index: 1; }
/* Reuses the same transparent leaf cutout as the Care section - at
   very low opacity it reads as the pale, almost-ghosted decoration
   the reference shows on a light background, without a second
   generation for what's the same botanical motif either way. */
.experience-leaf{
  position:absolute;
  top: -10px; right: 0;
  z-index: 0;
  width: min(26vw, 360px);
  height: auto;
  opacity: 0.16;
  transform: scaleX(-1);
  pointer-events:none;
}
.experience .section-head .title em{ font-style: italic; color: var(--champagne); }
.experience-rule{
  display:block;
  margin-top: 18px;
  width: 40px; height: 2px;
  background: var(--champagne);
  border-radius: 2px;
}
.experience-note{
  display:flex;
  align-items:center;
  gap: 16px;
  max-width: 300px;
}
.en-icon{
  flex-shrink:0;
  width: 56px; height:56px;
  border-radius:50%;
  background: var(--champagne-soft);
  display:flex; align-items:center; justify-content:center;
}
.en-icon svg{ width:24px; height:24px; color: var(--champagne); }
.experience-note .desc{ margin: 0; }

.gallery{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gallery-item{
  display:flex;
  flex-direction:column;
}
.gallery-photo{
  position: relative;
  overflow:hidden;
  border-radius: 12px 12px 0 0;
  aspect-ratio: 3/3.6;
}
.gallery-photo img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 900ms var(--ease);
}
.gallery-item:hover .gallery-photo img{ transform: scale(1.06); }
.gallery-item:nth-child(2) .gallery-photo img{ object-position: 50% 22%; }
.gallery-item:nth-child(4) .gallery-photo img{ object-position: 50% 30%; }
/* Only the third card ("Private Consultation Area") carries the extra
   on-photo label - matches the reference, which singles that one card
   out rather than repeating the treatment on all four. */
.gallery-overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding: 16px;
  background: linear-gradient(180deg, transparent, rgba(10,14,12,0.72));
  color: var(--ivory);
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.gallery-overlay .tag{
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--champagne-soft);
  text-transform: uppercase;
  font-weight:600;
}
.gallery-overlay .name{
  font-family: var(--font-serif);
  font-weight:600;
  font-size: 17px;
}
/* min-height accounts for a 2-line description (the longest case,
   e.g. "Quiet rooms, designed for focused conversations.") - without
   it, cards with a 1-line description end up ~17px shorter, leaving
   the row of four cards with a visibly uneven bottom edge (measured:
   75px vs 92px tall). */
.gallery-info{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  min-height: 92px;
  padding: 16px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 16px 32px -26px rgba(16,36,26,0.22);
}
.gallery-info .icon-chip{
  flex-shrink:0;
  width: 34px; height:34px;
  border-radius:10px;
  background: var(--champagne-soft);
  display:flex; align-items:center; justify-content:center;
}
.gallery-info .icon{ width:16px; height:16px; color: var(--champagne); }
.gallery-info strong{ display:block; font-family: var(--font-serif); font-size: 14.5px; color: var(--charcoal); }
.gallery-info span{ display:block; margin-top:3px; font-size: 12px; line-height:1.4; color: var(--charcoal-soft); }

/* Closing trust strip - same divided-row pattern as the Services and
   Care sections' bars, in the light palette. */
/* Was gap:22px on both axes - measured the actual content width
   against the bar's available space and it came up ~20px short at
   this breakpoint, so only the last item ("Easy Accessibility")
   wrapped to its own line with a large empty gap beside it. The fix is
   the column-gap specifically (the horizontal spacing that was the
   actual shortfall) - row-gap (for wrapped lines on narrower screens)
   can stay more generous. */
.experience-trust{
  margin-top: 40px;
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  row-gap: 16px;
  column-gap: 16px;
  padding: 22px 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.et-main{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height:1.4;
  color: var(--charcoal);
}
.et-main em{ font-style:italic; color: var(--champagne); }
.et-icon{
  color: var(--champagne);
  flex-shrink:0;
  margin-top: 3px;
}
.et-sep{ width:1px; height:26px; background: var(--line); flex-shrink:0; }
.et-item{
  display:flex;
  align-items:center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--charcoal-soft);
}
.et-item svg{ width:17px; height:17px; color: var(--champagne); flex-shrink:0; }

.find-us{
  margin-top: 56px;
  display:grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: stretch;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.find-us-info{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.find-us-info .eyebrow{ margin-bottom: 4px; }
.find-us-address{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.15;
  color: var(--charcoal);
}
.find-us-rule{
  display:block;
  margin-top: 4px;
  width: 40px; height: 2px;
  background: var(--champagne);
  border-radius: 2px;
}
.find-us-hours-row{
  margin-top: 14px;
  display:flex;
  align-items:center;
  gap: 10px;
}
.find-us-hours{ font-size: 13.5px; color: var(--charcoal-soft); }
.find-us-divider{
  display:block;
  margin-top: 4px;
  width: 100%;
  max-width: 280px;
  height: 1px;
  background: var(--line);
}
.fu-icon{
  flex-shrink:0;
  width: 34px; height:34px;
  border-radius:50%;
  background: var(--champagne-soft);
  display:flex; align-items:center; justify-content:center;
  color: var(--champagne);
}
.fu-icon svg{ width:15px; height:15px; }
.find-us-cta{ margin-top: 4px; }
.find-us-extra{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap: 16px;
}
.fu-item{
  display:flex;
  align-items:flex-start;
  gap: 14px;
}
.fu-item strong{ display:block; font-family: var(--font-serif); font-size: 15px; color: var(--charcoal); }
.fu-item span{ display:block; margin-top: 3px; font-size: 12.5px; line-height:1.4; color: var(--charcoal-soft); }

.find-us-map{
  position: relative;
  min-height: 240px;
  border-radius: 3px;
  overflow: hidden;
  filter: grayscale(0.25) contrast(1.05);
}
.find-us-map iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
/* An overlay button sitting on top of the live map - the map itself
   stays a real, functional Google embed rather than a static mockup;
   a plain iframe is cross-origin, so a custom pin/floating info card
   baked INTO the map (as shown in the reference) isn't something CSS
   on this page can reach into it and add. */
.find-us-open-maps{
  position:absolute;
  top: 16px; left: 16px;
  z-index: 2;
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--paper);
  border-radius: 10px;
  box-shadow: 0 12px 28px -14px rgba(16,36,26,0.4);
  font-size: 13px;
  font-weight:600;
  color: var(--charcoal);
}
.find-us-open-maps svg{ color: var(--champagne); }

/* ============================================================
   PATIENT REFLECTIONS
   ============================================================ */
.reflections{
  background: var(--ivory);
  padding: clamp(70px, 9vw, 110px) 0;
}
.reflections-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 14px;
  max-width: 620px;
  margin: 0 auto clamp(40px, 6vw, 64px);
  text-align:center;
}
.reflections-title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(32px, 4.6vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--charcoal);
}
.reflections-desc{
  max-width: 460px;
  font-size: 15.5px;
  color: var(--charcoal-soft);
}
.reflections-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 32px);
}
.reflection-card{
  position:relative;
  background: var(--paper);
  border-radius: 20px;
  padding: clamp(30px, 3.4vw, 44px) clamp(28px, 3vw, 40px);
  border: 1px solid rgba(16,36,26,0.06);
  box-shadow: 0 24px 50px -30px rgba(16,36,26,0.22);
  overflow: hidden;
}
.reflection-card::before{
  content:"";
  position:absolute;
  left:0; top:26px; bottom:26px;
  width:3px;
  border-radius: 3px;
  background: var(--champagne);
}
.reflection-quote{
  color: rgba(47,143,95,0.2);
  margin-bottom: 18px;
}
.reflection-text{
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(17px, 1.8vw, 19px);
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--charcoal);
}
.reflection-text em{
  font-style: italic;
  color: var(--forest);
}
.reflection-divider{
  height:1px;
  background: var(--line);
  margin: 26px 0 20px;
}
.reflection-footer{
  display:flex;
  align-items:center;
  gap: 14px;
}
.reflection-avatar{
  width: 46px; height:46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink:0;
  border: 1px solid rgba(16,36,26,0.08);
}
.reflection-meta{ flex:1; min-width:0; }
.reflection-name{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--charcoal);
}
.reflection-loc{
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--charcoal-soft);
}
.reflection-stars{
  flex-shrink:0;
  color: var(--champagne);
  font-size: 13px;
  letter-spacing: 2px;
}
.reflections-note{
  margin-top: 28px;
  text-align:center;
  font-size: 12px;
  color: var(--charcoal-soft);
  opacity: 0.75;
}
.reflections-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 8px;
  margin-top: 20px;
}
.reflections-dots .dot{
  width:7px; height:7px;
  border-radius: 50%;
  background: rgba(16,36,26,0.16);
  transition: all 220ms ease;
}
.reflections-dots .dot.is-active{
  width: 20px;
  border-radius: 4px;
  background: var(--champagne);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{
  position: relative;
  background: var(--ivory);
  overflow: hidden;
}
.faq-image{
  position:absolute;
  top:0; right:0;
  width: min(34%, 480px);
  height: 66%;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom left, rgba(0,0,0,1) 30%, rgba(0,0,0,0));
          mask-image: linear-gradient(to bottom left, rgba(0,0,0,1) 30%, rgba(0,0,0,0));
}
.faq-image img{
  width:100%; height:100%;
  object-fit: cover;
}
.faq-main{
  position: relative;
  z-index: 1;
}
.faq-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 40px;
  max-width: 900px;
  margin-bottom: 56px;
}
.faq-title{
  margin-top: 18px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  max-width: 11ch;
}
.faq-title-rule{
  display:block;
  width: 46px; height: 3px;
  border-radius: 3px;
  background: var(--champagne);
  margin-top: 22px;
}
.faq-head-desc{
  display:flex;
  align-items:flex-start;
  gap: 16px;
  max-width: 300px;
  padding-top: 4px;
}
.faq-head-icon{
  flex-shrink:0;
  width: 46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 50%;
  background: rgba(47,143,95,0.12);
  color: var(--champagne);
}
.faq-head-icon svg{ width:22px; height:22px; }
.faq-head-desc p{
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--charcoal-soft);
}
.faq-list{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 4px 26px;
  box-shadow: 0 24px 50px -34px rgba(16,36,26,0.2);
}
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item:last-child{ border-bottom:none; }
.faq-q{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 18px;
  padding: 22px 4px;
  background: transparent;
  border: none;
  text-align: left;
}
.faq-q-icon{
  flex-shrink:0;
  width: 38px; height: 38px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 50%;
  background: rgba(47,143,95,0.1);
  color: var(--champagne);
}
.faq-q-icon svg{ width:19px; height:19px; }
.faq-q-text{
  flex: 1;
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.7vw, 18px);
  color: var(--charcoal);
}
.faq-toggle{
  flex-shrink: 0;
  display:flex; align-items:center; justify-content:center;
  width: 22px; height: 22px;
  color: var(--champagne);
  transition: transform 320ms var(--ease);
}
.faq-item.is-open .faq-toggle{ transform: rotate(180deg); }
.faq-a{
  max-height: 0;
  overflow: hidden;
  transition: max-height 420ms var(--ease);
}
.faq-a p{
  padding: 0 4px 24px 56px;
  max-width: 60ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--charcoal-soft);
}
.faq-contact-bar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  padding: 20px 26px;
  border-radius: 16px;
  background: rgba(47,143,95,0.1);
}
.faq-contact-left{
  display:flex;
  align-items:center;
  gap: 16px;
}
.faq-contact-icon{
  flex-shrink:0;
  width: 44px; height: 44px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 50%;
  background: var(--forest);
  color: var(--ivory);
}
.faq-contact-icon svg{ width:17px; height:17px; }
.faq-contact-title{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--charcoal);
}
.faq-contact-sub{
  margin-top: 2px;
  font-size: 13px;
  color: var(--charcoal-soft);
}
.faq-contact-cta{
  flex-shrink:0;
  background: var(--paper);
  color: var(--forest);
  border: 1px solid rgba(16,36,26,0.12);
  box-shadow: 0 10px 22px -14px rgba(16,36,26,0.2);
}
.faq-contact-cta:hover{ background: var(--forest); color: var(--ivory); border-color: var(--forest); }

/* ============================================================
   05 - CONNECT (booking)
   ============================================================ */
.connect{
  position: relative;
  /* A shade darker than the FAQ section's plain --ivory just above it -
     both are otherwise identical light backgrounds with no border
     between them, so without this shift the two sections (and their
     two differently-toned corner photos) read as one blurred-together
     block instead of two distinct sections. */
  background: var(--ivory-2);
  color: var(--charcoal);
  overflow: hidden;
}
.connect-image{
  position:absolute;
  top:0; right:0;
  width: min(30%, 420px);
  height: 60%;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom left, rgba(0,0,0,1) 30%, rgba(0,0,0,0));
          mask-image: linear-gradient(to bottom left, rgba(0,0,0,1) 30%, rgba(0,0,0,0));
  opacity: 0.85;
}
.connect-image img{ width:100%; height:100%; object-fit:cover; }
.connect-main{ position:relative; z-index:1; }

.connect-head{
  display:flex;
  align-items:center;
  gap: 40px;
  margin-bottom: 64px;
}
.connect-head-left{ flex-shrink:0; }
.connect-title{
  margin-top: 18px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--charcoal);
}
.connect-title em{
  font-style: italic;
  color: var(--champagne);
  text-decoration: underline;
  text-decoration-color: var(--champagne);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}
.connect-head-rule{
  align-self: stretch;
  width:1px;
  background: var(--line);
  flex-shrink:0;
}
.connect-features{
  display:flex;
  flex-direction:column;
  gap: 22px;
}
.connect-feature{
  display:flex;
  align-items:flex-start;
  gap: 14px;
}
.connect-feature-icon{
  flex-shrink:0;
  width: 44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 50%;
  background: rgba(47,143,95,0.12);
  color: var(--champagne);
}
.connect-feature-icon svg{ width:20px; height:20px; }
.cf-title{ font-family: var(--font-sans); font-weight:700; font-size:14.5px; color: var(--charcoal); }
.cf-sub{ margin-top:2px; font-size:13px; color: var(--charcoal-soft); }

.booking{
  background: var(--paper);
  color: var(--charcoal);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(16,36,26,0.06);
  box-shadow: 0 40px 80px -40px rgba(16,36,26,0.35);
}
.booking-steps{
  display:flex;
  align-items:center;
  gap: 6px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.booking-step{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 5px 6px 5px 5px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal-soft);
  transition: all 320ms ease;
}
.booking-step .num{
  width: 32px; height:32px;
  border-radius:50%;
  background: var(--paper);
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight:700;
  color: var(--charcoal);
  transition: all 320ms ease;
}
.booking-step.is-done{ color: var(--charcoal); }
.booking-step.is-done .num{ background: var(--forest); border-color: var(--forest); color: var(--ivory); }
.booking-step.is-active{ background: var(--forest); color: var(--ivory); padding: 6px 20px 6px 6px; }
.booking-step.is-active .num{ background: var(--ivory); border-color: var(--ivory); color: var(--forest); }
.booking-sep{ width: 26px; height:0; border-top: 2px dotted rgba(16,36,26,0.22); flex-shrink:0; }

.booking-panel{ min-height: 260px; }
.booking-panel-title{
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.6vw, 28px);
  margin-bottom: 26px;
}
.booking-panel-title.has-sub{ margin-bottom: 6px; }
.panel-sub{
  margin-bottom: 26px;
  font-size: 14px;
  color: var(--charcoal-soft);
}
.booking-demo-note{
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  gap: 10px;
}

.option-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}
.option-card{
  position: relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: 30px 20px 26px;
  border: 1px solid rgba(16,21,19,0.08);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 14px 28px -22px rgba(10,14,12,0.3);
  text-align:center;
  transition: all 280ms ease, transform 280ms var(--ease);
}
.option-card:hover{ border-color: var(--champagne); transform: translateY(-3px); box-shadow: 0 20px 36px -20px rgba(10,14,12,0.35); }
.option-card.is-selected{ border-color: var(--champagne); box-shadow: 0 20px 40px -20px rgba(47,143,95,0.35); }
.option-card .oc-icon{
  width: 54px; height:54px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: rgba(47,143,95,0.12);
  color: var(--champagne);
  display:flex; align-items:center; justify-content:center;
}
.option-card .oc-icon svg{ width:25px; height:25px; }
.option-card .oc-check{
  display:none;
  position:absolute;
  top:14px; right:14px;
  width:22px; height:22px;
  border-radius:50%;
  background: var(--champagne);
  color: var(--ivory);
  align-items:center; justify-content:center;
}
.option-card.is-selected .oc-check{ display:flex; }
.option-card .oc-title{ font-family: var(--font-serif); font-weight:600; font-size: 16.5px; }
.option-card .oc-sub{ margin-top: 6px; font-size: 12.5px; line-height:1.4; color: var(--charcoal-soft); }

.date-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.date-cell{
  padding: 14px 6px;
  text-align:center;
  border: 1px solid rgba(16,21,19,0.06);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 12px 24px -20px rgba(10,14,12,0.3);
  font-size: 13px;
  transition: all 260ms ease, transform 260ms var(--ease);
}
.date-cell .d{ font-size: 10.5px; color: var(--charcoal-soft); text-transform: uppercase; letter-spacing: .05em; }
.date-cell .n{ margin-top:6px; font-family: var(--font-serif); font-size: 18px; }
.date-cell:hover{ border-color: var(--champagne); transform: translateY(-2px); }
.date-cell.is-selected{ border-color: var(--forest); background: var(--forest); color: var(--ivory); }

.time-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
}
.time-cell{
  padding: 12px;
  text-align:center;
  border: 1px solid rgba(16,21,19,0.06);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 12px 24px -20px rgba(10,14,12,0.3);
  font-size: 13.5px;
  transition: all 260ms ease, transform 260ms var(--ease);
}
.time-cell:hover{ border-color: var(--champagne); transform: translateY(-2px); }
.time-cell.is-selected{ border-color: var(--forest); background: var(--forest); color: var(--ivory); }
.tc-time{ display:block; font-weight: 600; }
.tc-tag{
  display:block;
  margin-top: 3px;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--charcoal-soft);
}
.time-cell:disabled{
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
  background: var(--ivory-2);
}
.time-cell:disabled:hover{ border-color: rgba(16,21,19,0.06); transform: none; }

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field.full{ grid-column: 1 / -1; }
.form-field label{ font-size: 12px; letter-spacing:0.04em; color: var(--charcoal-soft); }
.form-field input, .form-field textarea{
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 13px 14px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  background: var(--paper);
  color: var(--charcoal);
}
.form-field input:focus, .form-field textarea:focus{ outline: none; border-color: var(--forest); }

.confirm-summary{
  display:flex;
  flex-direction:column;
  gap: 14px;
  padding: 22px;
  background: var(--paper);
  border-radius: 4px;
  border: 1px solid var(--line);
}
.confirm-row{ display:flex; justify-content:space-between; font-size: 14px; }
.confirm-row .k{ color: var(--charcoal-soft); }
.confirm-row .v{ font-weight: 600; }

.booking-done{
  text-align:center;
  padding: 40px 0;
}
.booking-done .check{
  width:56px; height:56px;
  border-radius:50%;
  background: var(--forest);
  color: var(--ivory);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 22px;
}
.booking-done h4{
  font-family: var(--font-serif);
  font-size: 24px;
}
.booking-done p{
  margin-top: 10px;
  color: var(--charcoal-soft);
  font-size: 14px;
}

.booking-actions{
  margin-top: 32px;
  display:flex;
  justify-content: space-between;
  align-items:center;
}
.booking-back{
  display:inline-flex;
  align-items:center;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal-soft);
  transition: color 220ms ease;
}
.booking-back:hover{ color: var(--forest); }
.booking-back[hidden]{ visibility:hidden; }

/* ---- Lead capture: "want a real one for your practice?" ----
   A separate, clearly-labelled enquiry form for Trebots itself, sitting
   right after the fake-appointment booking widget - distinct from it on
   purpose so the two "submit a form" moments on this page can't be
   mistaken for each other. */
.lead-capture{
  margin-top: 40px;
  background: var(--paper);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid rgba(16,36,26,0.06);
  box-shadow: 0 30px 60px -42px rgba(16,36,26,0.3);
}
.lead-capture-head{
  max-width: 560px;
  margin: 0 auto 28px;
  text-align:center;
}
.lead-capture-head .demo-badge{ margin-bottom: 14px; }
.lead-capture-head h3{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.25;
  color: var(--charcoal);
}
.lead-capture-head p{
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--charcoal-soft);
}
.lead-form{ max-width: 640px; margin: 0 auto; }
.lead-form .form-grid{ margin-bottom: 22px; }
.lead-form select{
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 13px 14px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  background: var(--paper);
  color: var(--charcoal);
}
.lead-form select:focus{ outline: none; border-color: var(--forest); }
.lead-submit{ width: 100%; justify-content:center; }
.lead-form-status{
  margin-top: 14px;
  min-height: 18px;
  font-size: 13px;
  text-align:center;
}
.lead-form-status.is-success{ color: var(--forest); }
.lead-form-status.is-error{ color: var(--maroon); }
.lead-form-status.is-info{ color: var(--charcoal-soft); }

/* Confirmed-sent state - same shape as .booking-done, so a "thing worked"
   moment reads the same way anywhere it shows up on this site, rather
   than this one spot being a plain line of text while everywhere else
   gets a proper checkmark card. */
.lead-done{
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 0;
  text-align:center;
}
.lead-done .check{
  width:56px; height:56px;
  border-radius:50%;
  background: var(--forest);
  color: var(--ivory);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 22px;
}
.lead-done h4{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 24px;
  color: var(--charcoal);
}
.lead-done p{
  margin-top: 10px;
  color: var(--charcoal-soft);
  font-size: 14px;
}
/* .lead-done-mailto reuses .btn.btn-primary for its actual look (pill
   shape, fill, hover) - this just centers it in the card's flex column,
   same as the "Send another enquiry" button below it. */
.lead-done .btn{ display:inline-flex; margin-top: 24px; }
.lead-done .btn + .btn{ margin-top: 12px; }

/* ============================================================
   TREBOTS POSITIONING
   ============================================================ */
.beyond{ background: var(--paper); }
.beyond-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 40px;
}
.beyond-head-left{ max-width: 640px; }
.beyond-head .eyebrow{ color: var(--champagne); filter: none; }
.beyond-title{
  margin-top: 18px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--charcoal);
}
.beyond-title em{
  font-style: italic;
  color: var(--forest);
}
.beyond-desc{
  max-width: 300px;
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--charcoal-soft);
}

.capability-grid{
  margin-top: 56px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.capability{
  position: relative;
  overflow: hidden;
  padding: 32px 28px;
  min-height: 300px;
  background: var(--ivory);
  border-radius: 22px;
  border: 1px solid rgba(16,21,19,0.06);
  box-shadow: 0 22px 44px -34px rgba(10,14,12,0.35);
  transition: transform 340ms var(--ease), box-shadow 340ms ease, border-color 340ms ease;
}
.capability:hover{
  transform: translateY(-5px);
  box-shadow: 0 30px 56px -30px rgba(10,14,12,0.4);
  border-color: var(--champagne);
}
.capability .icon-chip{
  position:relative;
  z-index:1;
  width: 48px; height:48px;
  border-radius: 50%;
  background: rgba(47,143,95,0.12);
  display:flex; align-items:center; justify-content:center;
  transition: background 340ms ease, transform 340ms ease;
}
.capability:hover .icon-chip{ background: var(--champagne); transform: scale(1.06); }
.capability:hover .icon-chip .icon{ color: var(--paper); }
.capability .icon{
  width: 21px; height:21px;
  color: var(--champagne);
  transition: color 340ms ease;
}
.capability h4{
  position:relative;
  z-index:1;
  margin-top: 20px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
}
.cap-rule{
  position:relative;
  z-index:1;
  display:block;
  width: 26px; height: 2px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--champagne);
}
.capability p{
  position:relative;
  z-index:1;
  max-width: 21ch;
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--charcoal-soft);
}

/* ---- Decorative mini "product" mockups, bleeding off the card's own
   bottom-right corner. These are illustrative UI sketches (placeholder
   bars, not real screenshots of anything), built in CSS rather than as
   images so the text inside stays crisp and themeable. ---- */
.cap-mock{
  position:absolute;
  right: -18px; bottom: -18px;
  z-index: 0;
  pointer-events:none;
}
.cap-mock::before{
  content:"";
  position:absolute; inset:0;
}

.cap-mock-website{
  width: 168px;
  background: var(--paper);
  border-radius: 12px 0 0 0;
  border: 1px solid var(--line);
  border-right:none; border-bottom:none;
  box-shadow: -16px -10px 30px -20px rgba(10,14,12,0.25);
  padding: 10px 12px 14px;
}
.cmw-top{ display:flex; gap:4px; }
.cmw-top span{ width:5px; height:5px; border-radius:50%; background: var(--line); }
.cmw-body{ margin-top: 10px; }
.cmw-bar{ height:6px; border-radius:3px; background: var(--ivory-2); }
.cmw-bar.short{ width: 55%; margin-top:6px; }
.cmw-photo{
  margin-top: 10px;
  height: 60px;
  border-radius: 8px;
  background: linear-gradient(135deg, #d9c5a8, #a9967c 55%, #7c6b54);
}

.cap-mock-app{
  width: 96px;
  padding: 14px 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-right:none; border-bottom:none;
  border-radius: 20px 0 0 0;
  box-shadow: -16px -10px 30px -20px rgba(10,14,12,0.25);
}
.cma-row{ display:flex; align-items:center; gap:6px; }
.cma-row + .cma-row{ margin-top:10px; }
.cma-check{
  width:14px; height:14px; flex-shrink:0;
  border-radius:50%;
  background: var(--champagne);
  color: var(--paper);
  display:flex; align-items:center; justify-content:center;
}
.cma-box{ width:14px; height:14px; flex-shrink:0; border-radius:4px; border:1.4px solid var(--line); }
.cma-line{ flex:1; height:6px; border-radius:3px; background: var(--ivory-2); }
.cma-line.long{ max-width: 44px; }
.cma-line.short{ max-width: 26px; }

.cap-mock-portal{
  width: 150px;
  padding: 12px 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-right:none; border-bottom:none;
  border-radius: 12px 0 0 0;
  box-shadow: -16px -10px 30px -20px rgba(10,14,12,0.25);
}
.cmp-top{ display:flex; gap:4px; }
.cmp-top span{ width:5px; height:5px; border-radius:50%; background: var(--line); }
.cmp-body{ display:flex; align-items:center; gap:10px; margin-top: 12px; }
.cmp-avatar{
  width: 30px; height:30px; flex-shrink:0;
  border-radius:50%;
  background: rgba(47,143,95,0.12);
  color: var(--champagne);
  display:flex; align-items:center; justify-content:center;
}
.cmp-avatar svg{ width:16px; height:16px; }
.cmp-lines{ flex:1; display:flex; flex-direction:column; gap:6px; }
.cmp-lines span{ height:6px; border-radius:3px; background: var(--ivory-2); }
.cmp-lines span.short{ width: 60%; }
.cmp-badge{
  position:absolute;
  right: 30px; bottom: 12px;
  width:22px; height:22px;
  border-radius:50%;
  background: var(--forest);
  color: var(--ivory);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 16px -8px rgba(16,36,26,0.5);
}

.cap-mock-calendar{
  width: 150px;
  padding: 12px 14px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-right:none; border-bottom:none;
  border-radius: 12px 0 0 0;
  box-shadow: -16px -10px 30px -20px rgba(10,14,12,0.25);
}
.cmc-top{ display:flex; gap:4px; }
.cmc-top span{ width:5px; height:5px; border-radius:50%; background: var(--line); }
.cmc-grid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.cmc-grid span{ width:100%; aspect-ratio:1; border-radius:3px; background: var(--ivory-2); }
.cmc-grid span.is-marked{ background: var(--champagne); }

.cap-mock-dashboard{
  width: 168px;
  padding: 12px 14px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-right:none; border-bottom:none;
  border-radius: 12px 0 0 0;
  box-shadow: -16px -10px 30px -20px rgba(10,14,12,0.25);
}
.cmd-top{ display:flex; gap:4px; }
.cmd-top span{ width:5px; height:5px; border-radius:50%; background: var(--line); }
.cmd-chart{ display:block; width:100%; height:34px; margin-top:8px; color: var(--champagne); }
.cmd-stats{ display:flex; gap:8px; margin-top: 10px; }
.cmd-stat{
  flex:1;
  min-width:0;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--ivory-2);
}
.cmd-stat .k{ display:block; font-size:8px; text-transform:uppercase; letter-spacing:.03em; color: var(--charcoal-soft); }
.cmd-stat .v{ display:block; margin-top:2px; font-family: var(--font-serif); font-size:13px; color: var(--charcoal); }
.cmd-stat .up{ display:block; margin-top:1px; font-size:9px; color: var(--champagne); }

.cap-mock-mobile{
  width: 128px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-right:none; border-bottom:none;
  border-radius: 20px 0 0 0;
  box-shadow: -16px -10px 30px -20px rgba(10,14,12,0.25);
  overflow:hidden;
}
.cmm-header{
  padding: 12px 12px 20px;
  background: var(--forest);
  color: var(--ivory);
}
.cmm-avatar{
  display:flex; align-items:center; justify-content:center;
  width:20px; height:20px;
  border-radius:50%;
  background: rgba(242,245,243,0.16);
  font-size:8px; font-weight:700;
}
.cmm-greet{ display:block; margin-top:8px; font-size:11px; font-weight:600; }
.cmm-body{ padding: 10px 12px 14px; }
.cmm-label{ font-size:8px; text-transform:uppercase; letter-spacing:.03em; color: var(--charcoal-soft); }
.cmm-appt{
  display:flex; align-items:center; gap:6px;
  margin-top:6px; padding: 6px;
  border-radius:8px;
  background: var(--ivory-2);
}
.cmm-dot{
  flex-shrink:0;
  width:16px; height:16px;
  border-radius:50%;
  background: var(--forest);
  color: var(--ivory);
  font-size:6px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.cmm-name{ font-size:8.5px; font-weight:700; color: var(--charcoal); }
.cmm-time{ font-size:7px; color: var(--charcoal-soft); }
.cmm-rx{ display:flex; align-items:center; gap:6px; margin-top:8px; }
.cmm-rx-icon{ width:12px; height:12px; flex-shrink:0; border-radius:4px; background: rgba(47,143,95,0.18); }
.cmm-rx .cmm-line{ flex:1; height:6px; border-radius:3px; background: var(--ivory-2); }

.beyond-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  margin-top: 48px;
}
.bf-line{ flex:1; max-width: 90px; height:1px; background: var(--line); }
.bf-icon{
  flex-shrink:0;
  width:26px; height:26px;
  border-radius:50%;
  background: rgba(47,143,95,0.12);
  color: var(--champagne);
  display:flex; align-items:center; justify-content:center;
}
.beyond-footer p{
  font-size: 13.5px;
  color: var(--charcoal-soft);
  white-space: nowrap;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background: var(--forest-deep);
  color: rgba(242,245,243,0.72);
  padding: 80px 0 0;
}
.footer-top{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line-on-dark);
}
.footer-brand .nav-mark{ color: var(--ivory); }
.footer-brand p{
  margin-top: 18px;
  max-width: 34ch;
  font-size: 14px;
  color: rgba(242,245,243,0.6);
}
.footer-col h5{
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--champagne-soft);
  font-weight: 700;
}
.footer-col ul{ margin-top: 18px; display:flex; flex-direction:column; gap: 12px; }
.footer-col a{ font-size: 14px; color: rgba(242,245,243,0.72); transition: color 250ms ease; }
.footer-col a:hover{ color: var(--champagne); }

.demo-band{
  padding: 40px 0;
  border-bottom: 1px solid var(--line-on-dark);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
/* min-width:0 lets this flex item shrink & wrap its paragraph instead of
   forcing the row wider than the viewport (the flexbox min-width:auto trap) */
.demo-band-left{
  display:flex;
  align-items:flex-start;
  gap: 16px;
  flex: 1 1 420px;
  min-width: 0;
  max-width: 640px;
}
.demo-band-left p{ min-width: 0; overflow-wrap: break-word; }
.demo-badge{
  flex-shrink:0;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--forest-deep);
  background: var(--champagne);
  padding: 6px 12px;
  border-radius: 999px;
  margin-top: 2px;
}
.demo-band-left p{
  font-size: 14px;
  line-height: 1.6;
  color: rgba(242,245,243,0.68);
}
.demo-band-left p strong{ color: var(--ivory); font-weight: 600; }
.demo-band-right{ display:flex; align-items:center; gap: 18px; flex-shrink:0; }
.trebots-url{ font-size: 13.5px; color: rgba(242,245,243,0.55); }

.footer-bottom{
  padding: 24px 0 30px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  font-size: 12.5px;
  color: rgba(242,245,243,0.4);
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .art-grid{ grid-template-columns: 1fr; }
  /* Cards bleeding off the media's right edge via negative offsets
     (see .af-top/.af-bottom) relied on the wide desktop frame for
     clearance. Once the grid stacks to one narrower column, that
     bleed pushed them straight off the visible section - .art's own
     overflow:hidden clipped them silently (no scrollbar, so an
     automated width check wouldn't catch it) rather than erroring.
     Positive insets keep them fully inside the frame instead. */
  .af-top{ top: 14px; right: 14px; }
  .af-bottom{ bottom: 14px; right: 14px; }
  .art-float{ max-width: 180px; padding: 12px 14px; }
  .meet-grid{ grid-template-columns: 1fr; }
  .meet-media{ max-width: 420px; margin: 0 auto; }
  .capability-grid{ grid-template-columns: repeat(2,1fr); }
  .services-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .gallery{ grid-template-columns: repeat(2,1fr); }

  /* The plant photo bleeds off the right edge assuming a wide desktop
     frame with room to spare beside the text column; once the layout
     narrows there's no clearance left and it just crowds the FAQ list,
     so it's dropped rather than fighting for space. */
  .faq-image{ display:none; }
  .faq-head{ flex-direction:column; align-items:flex-start; gap: 20px; }
  .faq-head-desc{ max-width: 100%; }

  /* Same reasoning as the FAQ plant photo above - no clearance left
     beside the text column once this narrows, so it's dropped. */
  .connect-image{ display:none; }
  .connect-head{ flex-direction:column; align-items:flex-start; gap: 22px; }
  .connect-head-rule{ display:none; }
  .connect-features{ flex-direction:row; flex-wrap:wrap; gap: 20px 40px; }

  .beyond-head{ flex-direction:column; align-items:flex-start; gap: 16px; }
  .beyond-desc{ max-width: 100%; }
}

/* Nav swaps to the hamburger well before the inline links + CTA + lang
   toggle would ever get tight - avoids a squeeze zone that silently
   clips content (body has overflow-x:hidden, so a cramped row just
   disappears instead of showing a scrollbar). */
@media (max-width: 1180px){
  .nav-links, .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
}

@media (max-width: 860px){
  .section-head{ flex-direction:column; align-items:flex-start; gap: 14px; }
  .care-leaf{ display:none; }
  .journey-track{ grid-template-columns: 1fr; gap: 34px; }
  .journey-rail{ display:none; }
  .form-grid{ grid-template-columns: 1fr; }
  .capability-grid{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: 1fr; }
  .services-orb{ display:none; }
  /* Hiding the desc entirely on mobile (like the purely-decorative
     orb) would drop real content, not just a visual flourish - instead
     it falls back to normal flow, flowing below the headline like any
     other paragraph, rather than staying absolutely positioned with
     nothing to center itself against in a stacked layout. */
  .services-desc-center{
    position:static;
    width:auto;
    max-width: 46ch;
    transform:none;
    margin-top: 16px;
  }
  .services-trust{ flex-direction:column; align-items:flex-start; }
  .st-sep{ display:none; }

  /* Same fix as .services-trust/.experience-trust just above: wrapping
     this row without also collapsing the divider left each vertical
     separator stranded at the end of its own wrapped line, with a big
     dead gap where the next item used to sit beside it. */
  .art-bottom-bar{ flex-direction:column; align-items:flex-start; }
  .abb-sep{ display:none; }
  .footer-top{ grid-template-columns: 1fr; }
  .date-grid{ grid-template-columns: repeat(4,1fr); }
  .find-us{ grid-template-columns: 1fr; }
  .find-us-map{ min-height: 220px; order: -1; }
  section[id]{ scroll-margin-top: calc(74px + var(--strip-h)); }
}

@media (max-width: 640px){
  html{ font-size: 15px; }
  .nav{ padding-top: 16px; padding-bottom: 16px; }
  .nav.is-scrolled{ padding-top: 12px; padding-bottom: 12px; }

  .contact-strip-inner{ gap: 16px; }
  .contact-item--address span, .contact-item--hours{ display:none; }
  .contact-item--phone{ margin-left:auto; }

  .hero{ min-height: 100dvh; align-items: flex-end; }
  .hero-stats{ gap: 22px; }
  .hero-headline{ font-size: clamp(38px, 11vw, 64px); }
  .hero-content{ padding-bottom: 64px; }
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .hero-actions .btn{ justify-content:center; }

  .art-features{ flex-direction: column; gap: 16px; }

  /* Below this width the aspect-ratio-locked photo banner gets too
     short to hold legible text (218px tall at a 390px viewport,
     confirmed by measurement) - the plaque's percentage coordinates
     were tuned to the photo's real position, which only holds when the
     photo isn't being cropped. Dropping the aspect-ratio lock in favour
     of a fixed min-height means the image DOES crop here, so the text
     switches to a normal centered card with its own scrim instead of
     trying to track a plaque position that's no longer accurate. */
  .quote{
    aspect-ratio: auto;
    min-height: 480px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .quote-plaque{
    position: static;
    width: auto;
    height: auto;
    max-width: 340px;
    padding: 32px 24px;
    margin: 0 20px;
    background: rgba(10,20,15,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 16px;
    border: 1px solid rgba(242,245,243,0.14);
  }
  .quote-badge{ width: 40px; height: 40px; }
  .quote-text{ font-size: clamp(16px, 4.6vw, 20px); text-shadow: none; }
  .quote-heart{ width: 18px; }
  .quote-attribution{ font-size: 11.5px; text-shadow: none; }

  .section{ padding: 64px 0; }
  .section-head{ margin-bottom: 40px; }

  .art-copy p{ max-width: none; }

  .understand-deco{ display:none; }
  .choice{ padding: 18px; gap: 12px; }
  .choice-left{ gap: 12px; }
  .choice-icon{ width:36px; height:36px; }
  .choice-divider{ display:none; }
  .choice-text{ font-size: 18px; }
  .choice-sub{ font-size: 12.5px; }
  .choice-arrow{ width: 36px; height: 36px; }

  /* The floating decorations assume clearance beyond the photo's own
     edges (negative left/right offsets) - clearance this narrow
     container doesn't have, so they'd clip against the viewport
     instead of floating cleanly. The dot-grid and heart badge are
     purely decorative, so they're dropped; the stat badge carries real
     information, so it moves onto the photo instead of past its edge. */
  .meet-dots, .meet-corner-leaf{ display:none; }
  .meet-stat-badge{ left: 14px; bottom: 92px; }
  .meet-credentials{ grid-template-columns: 1fr; gap: 12px; }

  /* Was applied to .gallery-item itself - that made sense when the
     item WAS the image, but it's now a flex column of a photo card
     plus a separate info card below, so the ratio belongs on the
     photo alone. */
  .experience-leaf{ display:none; }
  .gallery{ grid-template-columns: 1fr; gap: 20px; }
  .gallery-photo{ aspect-ratio: 4/3.1; }
  .experience-trust{ flex-direction:column; align-items:flex-start; }
  .et-sep{ display:none; }

  .concerns-tags li{ font-size: 12.5px; padding: 8px 13px; }

  .reflections-grid{ grid-template-columns: 1fr; gap: 36px; }

  .faq-q{ font-size: 16px; gap: 14px; }
  .faq-list{ padding: 4px 16px; border-radius: 16px; }
  .faq-q-icon{ width: 32px; height: 32px; }
  .faq-q-icon svg{ width:16px; height:16px; }
  .faq-a p{ padding-left: 4px; }
  .faq-contact-bar{ flex-direction:column; align-items:flex-start; padding: 20px; }
  .faq-contact-cta{ width:100%; justify-content:center; }

  .connect-features{ flex-direction:column; gap: 18px; }

  .booking{ padding: 22px 18px; border-radius: 4px; }
  .booking-steps{ gap: 5px; }
  .booking-step{ padding: 7px 12px 7px 8px; font-size: 12px; }
  .booking-step.is-active{ padding: 5px 14px 5px 5px; }
  .booking-step .num{ width: 26px; height: 26px; font-size: 12px; }
  .booking-sep{ width: 14px; }
  .option-card{ padding: 24px 16px 20px; }
  .date-grid{ grid-template-columns: repeat(3,1fr); }
  .booking-actions{ flex-direction: row-reverse; justify-content: space-between; }

  .capability{ padding: 26px 20px; min-height: 260px; }

  .beyond-footer{ flex-direction:column; gap: 10px; }
  .bf-line{ display:none; }
  .beyond-footer p{ white-space: normal; text-align:center; }

  .mobile-menu{ top: calc(74px + var(--strip-h)); }

  .demo-band{ flex-direction: column; align-items:flex-start; }
  /* flex: 1 1 420px on .demo-band-left targets its *width* in the desktop
     row layout - once .demo-band switches to a column here, that 420px
     basis applies to the now-vertical main axis instead, forcing a
     420px-tall block and a huge dead gap before the row below it. */
  .demo-band-left{ flex: 0 1 auto; width: 100%; max-width: none; }
  .demo-band-right{ width:100%; justify-content: space-between; }
  .footer-bottom{ flex-direction: column; align-items:flex-start; gap: 6px; }
}

@media (max-width: 480px){
  .nav-mark small,
  .nav-mark .dot{ display:none; }
  .nav-mark{ font-size: 17px; }
  .booking-step .label{ display:none; }
  .booking-step{ padding: 8px; }

  /* At this width the plate is too narrow for name + role + a script
     signature side by side without squeezing the doctor's own name -
     drop the decorative signature rather than risk that. */
  .meet-signature{ display:none; }
  .meet-photo-plate{ padding: 16px 18px; }

  /* The mockup bleeds off the card's bottom-right corner assuming the
     description text (max-width: 21ch) has room to wrap clear of it -
     true from ~480px up, but on a narrow phone the card itself is only
     as wide as that same 21ch of text, so the mock lands directly on
     top of the last line or two instead of beside them. Measured overlap
     on 4 of the 6 cards down at 320px, still 2 of 6 at 375-390px. */
  .cap-mock{ display:none; }
  .capability{ min-height: 0; }
}