/* =====================================================================
   GLASS FINISH  (Apple-style frosted glass, web approximation)
   Added on top of the original design. Colours, fonts, 3D and animations
   are unchanged. Delete this file's <link> to return to the flat look.

   Note: Apple's "Liquid Glass" is a native Apple-platform material; on the
   web it is approximated with translucent fills, bright edge highlights,
   soft tinted shadows and (where there is detail behind) backdrop blur.
   ===================================================================== */

:root {
  --g-fill: linear-gradient(150deg, rgba(255,255,255,.70) 0%, rgba(255,253,248,.42) 45%, rgba(255,249,238,.30) 100%);
  --g-fill-hover: linear-gradient(150deg, rgba(255,255,255,.86) 0%, rgba(255,253,248,.60) 50%, rgba(255,249,238,.46) 100%);
  --g-sheen: radial-gradient(120% 75% at 0% 0%, rgba(255,255,255,.80) 0%, rgba(255,255,255,0) 48%);
  --g-stroke: rgba(255,255,255,.82);
  --g-blur: blur(22px) saturate(180%);
  --g-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.35),
    0 1px 2px rgba(74,52,24,.05),
    0 12px 32px -14px rgba(74,52,24,.24),
    0 34px 70px -36px rgba(74,52,24,.22);
  --g-shadow-hover:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(255,255,255,.5),
    0 2px 4px rgba(74,52,24,.06),
    0 24px 54px -20px rgba(74,52,24,.34);
  --g-radius: 24px;
  --g-radius-sm: 16px;
}

/* ---------- Ambient light behind the glass (palette colours, kept still for smooth scrolling) ---------- */
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ambient span { position: absolute; border-radius: 50%; }
.ambient span:nth-child(1) { width: 62vmax; height: 62vmax; left: -20vmax; top: -24vmax;
  background: radial-gradient(closest-side, rgba(214,178,98,.36), rgba(214,178,98,0)); }
.ambient span:nth-child(2) { width: 48vmax; height: 48vmax; right: -18vmax; top: 22vh;
  background: radial-gradient(closest-side, rgba(196,96,92,.15), rgba(196,96,92,0)); }
.ambient span:nth-child(3) { width: 58vmax; height: 58vmax; left: 6vw; bottom: -34vmax;
  background: radial-gradient(closest-side, rgba(221,201,154,.55), rgba(221,201,154,0)); }
.ambient span:nth-child(4) { width: 36vmax; height: 36vmax; right: 8vw; bottom: -10vmax;
  background: radial-gradient(closest-side, rgba(233,207,142,.40), rgba(233,207,142,0)); }

/* ---------- Glass surfaces ---------- */
.glass,
.hero-tag, .hero-stats, .btn-outline, .pill,
.about-photo, .about-photo-tag, .hl-carousel, .svc, .cta-banner, .affil-card, .comp-tile,
.award-card, .research-list, .contact-panel, .map-card, .wayfinding, .reviews-glass,
.topic-row, .topic-card, .guide-card, .empty-state {
  background: var(--g-sheen), var(--g-fill);
  border: 1px solid var(--g-stroke);
  box-shadow: var(--g-shadow);
}
/* Real backdrop blur only where there is detail behind (3D scene, photo, scrolling page).
   Elsewhere the background is a smooth gradient, so blur would look identical but cost speed. */
.hero-tag, .hero-stats, .hero .btn-outline, .about-photo-tag {
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-tag, .hero-stats, .hero .btn-outline, .about-photo-tag { background: var(--g-sheen), var(--g-fill-hover); }
}

/* ---------- Header: floating glass capsule once you scroll ---------- */
header#site-header.scrolled {
  background: transparent; border-bottom-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: .7rem 0;
}
#site-header .nav-inner {
  border: 1px solid transparent; border-radius: 999px;
  transition: background .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease), padding .5s var(--ease), max-width .5s var(--ease);
}
#site-header.scrolled .nav-inner {
  max-width: 1220px; width: calc(100% - 2 * clamp(.75rem, 3vw, 2rem));
  padding: .45rem .5rem .45rem 1rem;
  background: var(--g-sheen), linear-gradient(150deg, rgba(255,255,255,.72), rgba(255,252,245,.52));
  border-color: var(--g-stroke);
  box-shadow: var(--g-shadow);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
}
.nav-links a {
  border-radius: 999px;
  border-color: rgba(255,255,255,.75);
  background: linear-gradient(150deg, rgba(255,255,255,.55), rgba(255,255,255,.22));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px -8px rgba(74,52,24,.25);
}
#site-header.scrolled .nav-links a:not(.nav-cta) { background: transparent; border-color: transparent; box-shadow: none; }
#site-header.scrolled .nav-links a:not(.nav-cta):hover { background: var(--gold-500); border-color: var(--gold-500); }
.nav-links a.nav-cta { border-radius: 999px; border-color: var(--gold-500); background: linear-gradient(150deg, rgba(255,255,255,.6), rgba(233,207,142,.22)); }
.nav-links a, .brand-role, .brand-name { white-space: nowrap; }
@media (max-width: 1480px) {
  .nav-links { gap: .4rem; }
  .nav-links a { padding: .5rem .8rem; }
}
@media (max-width: 1180px) {
  .nav-links { gap: .35rem; }
  .nav-links a { padding: .5rem .75rem; font-size: .74rem; }
  .nav-links a.nav-cta { padding: .7rem 1rem; }
}
@media (max-width: 1279px) {
  /* tablets and small laptops use the original slide-out menu (7 items no longer fit on one line) */
  .nav-links {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(78vw, 380px);
    flex-direction: column; justify-content: center; align-items: flex-start; padding: 2rem;
    transform: translateX(100%); transition: transform .5s var(--ease);
  }
  .nav-links.open { transform: translateX(0); }
  .menu-toggle { display: block; }
  /* keep a full-width glass bar so the slide-out menu stays anchored */
  header#site-header.scrolled {
    background: var(--g-sheen), linear-gradient(150deg, rgba(255,255,255,.78), rgba(255,252,245,.6));
    border-bottom-color: rgba(255,255,255,.8);
    box-shadow: 0 10px 30px -18px rgba(74,52,24,.35);
    -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
    padding: .8rem 0;
  }
  #site-header.scrolled .nav-inner { width: auto; max-width: none; padding: 0 clamp(1.25rem,4vw,3rem); background: none; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-links {
    background: linear-gradient(160deg, rgba(255,255,255,.94), rgba(250,246,236,.96));
    border-left: 1px solid rgba(255,255,255,.9);
    box-shadow: -20px 0 60px -30px rgba(74,52,24,.4);
    gap: .7rem;
  }
  .nav-links a, #site-header.scrolled .nav-links a:not(.nav-cta) {
    width: 100%; background: linear-gradient(150deg, rgba(255,255,255,.7), rgba(255,255,255,.35));
    border-color: rgba(255,255,255,.85); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -10px rgba(74,52,24,.3);
    padding: .85rem 1.2rem; font-size: .8rem;
  }
}

/* ---------- Buttons ---------- */
.btn { border-radius: 999px; }
.btn-solid {
  background: linear-gradient(180deg, #dcbb6c 0%, var(--gold-500) 52%, #b88f3c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(90,60,10,.18), 0 12px 26px -12px rgba(140,100,30,.65);
}
.btn-solid:hover { background: linear-gradient(180deg, #e3c67c 0%, #cfa957 52%, #b88f3c 100%); }
.btn-outline:hover { background: var(--g-sheen), var(--g-fill-hover); box-shadow: var(--g-shadow-hover); }

/* ---------- 3D scenes: soft edges via mask (replaces the cream overlay boxes) ---------- */
.hero::before, .services-hero::before { background: none; }
#hero-canvas {
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 78% 48%, #000 52%, transparent 94%);
  mask-image: radial-gradient(ellipse 72% 62% at 78% 48%, #000 52%, transparent 94%);
}
#heart-canvas {
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 55%, #000 30%, transparent 92%);
  mask-image: radial-gradient(ellipse 70% 65% at 50% 55%, #000 30%, transparent 92%);
}

/* ---------- Hero ---------- */
.hero-tag { border-color: rgba(255,255,255,.85); }
.hero-stats {
  max-width: 720px; padding: 1.35rem 1.6rem; border-radius: var(--g-radius);
}
.hero-stats .stat:first-child { border-left: 0; padding-left: 0; }
.hero-stats a.stat { color: inherit; transition: opacity .3s; }
.hero-stats a.stat:hover span { color: var(--gold-300); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- About ---------- */
.pill { border-radius: 999px; }
.pill:hover { border-color: rgba(201,162,79,.6); background: var(--g-sheen), var(--g-fill-hover); }
.about-photo { border-radius: 28px; clip-path: none; overflow: hidden; padding: .6rem; }
.about-photo img { border-radius: 21px; }
.about-photo-tag {
  border-radius: var(--g-radius-sm); border-color: rgba(201,162,79,.55);
  background: var(--g-sheen), linear-gradient(150deg, rgba(255,255,255,.78), rgba(255,250,240,.6));
}

/* ---------- Services ---------- */
.hl-carousel { border-radius: var(--g-radius); overflow: hidden; }
.service-grid, .competency-grid { gap: 1rem; background: none; border: 0; }
.svc, .comp-tile { border-radius: 22px; }
.svc:hover, .comp-tile:hover { background: var(--g-sheen), var(--g-fill-hover); box-shadow: var(--g-shadow-hover); }
.svc::before { top: 22px; bottom: 22px; border-radius: 2px; }
.comp-tile::before { left: 22px; right: 22px; border-radius: 2px; }
.cta-banner {
  border-radius: 28px; border-color: rgba(201,162,79,.5);
  background: var(--g-sheen), linear-gradient(120deg, rgba(233,207,142,.30), rgba(255,255,255,.45) 60%, rgba(255,250,240,.35));
}

/* ---------- Experience, awards, research ---------- */
.affil-card { border-radius: 22px; }
.award-card { border-radius: 22px; }
.award-card:hover { border-color: rgba(201,162,79,.6); box-shadow: var(--g-shadow-hover); background: var(--g-sheen), var(--g-fill-hover); }
.research-list { border-top: 0; border-radius: 28px; padding: .25rem clamp(1.25rem, 3vw, 2.5rem); }
.research-item:last-child { border-bottom: 0; }
.tilt-glare { border-radius: inherit; }

/* ---------- Patient reviews (replaces testimonials) ---------- */
.reviews-glass {
  margin-top: 3rem; border-radius: 28px; padding: clamp(1.75rem, 4vw, 3rem);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: center;
}
.reviews-brand { display: flex; align-items: center; gap: 1.1rem; }
.g-logo {
  width: 68px; height: 68px; border-radius: 20px; flex: none; display: grid; place-items: center;
  background: linear-gradient(150deg, #fff, rgba(255,255,255,.7));
  box-shadow: inset 0 1px 0 #fff, 0 10px 24px -12px rgba(74,52,24,.4);
}
.g-logo svg { width: 32px; height: 32px; }
.reviews-kicker { font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-300); }
.reviews-name { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--cream); line-height: 1.15; margin-top: .25rem; }
.reviews-text { color: var(--ink-dim); font-size: 1rem; margin-top: 1.4rem; max-width: 44ch; }
.reviews-actions { display: flex; flex-direction: column; align-items: flex-end; justify-self: end; gap: 1rem; }
@media (max-width: 860px) { .reviews-actions { align-items: flex-start; justify-self: start; } }
.reviews-note {
  grid-column: 1 / -1; display: flex; gap: .6rem; align-items: flex-start;
  border-top: 1px solid var(--line); padding-top: 1.3rem;
  font-size: .82rem; color: var(--ink-dimmer); line-height: 1.55;
}
.reviews-note i { color: var(--gold-300); font-size: 1.05rem; margin-top: .1rem; }
@media (max-width: 860px) { .reviews-glass { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact-panel { border-radius: 28px; padding: .5rem clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.25rem); }
.contact-panel .contact-item:last-of-type { border-bottom: 0; }
.emergency-box {
  border-radius: 18px; border-color: rgba(184,57,63,.45);
  background: radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.7), rgba(255,255,255,0) 50%), linear-gradient(135deg, rgba(226,84,90,.10), rgba(255,255,255,.4));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 26px -16px rgba(184,57,63,.45);
}
.map-card { border-radius: 28px; }
.map-embed { border-radius: 18px; border-color: rgba(255,255,255,.85); box-shadow: 0 10px 26px -16px rgba(74,52,24,.35); }
.wayfinding { border-top: 0; border-radius: 32px; padding: clamp(1.75rem, 4vw, 3rem); }

/* ---------- Patient education: home section ---------- */
.edu-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.5rem; margin-top: 3rem; align-items: start; }
.edu-label { display: block; margin: 0 0 1rem .3rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-300); }
.edu-cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
@media (max-width: 980px) { .edu-grid { grid-template-columns: 1fr; } }

/* ---------- Patient education: shared cards (home + library pages) ---------- */
.topic-rows { display: grid; gap: .75rem; }
.topic-row {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 1rem; align-items: center;
  padding: .85rem 1.15rem .85rem .85rem; border-radius: 18px; color: inherit;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
.topic-row:hover { transform: translateX(4px); background: var(--g-sheen), var(--g-fill-hover); box-shadow: var(--g-shadow-hover); }
.t-icon {
  display: grid; place-items: center; color: var(--gold-300);
  background: linear-gradient(150deg, rgba(233,207,142,.5), rgba(255,255,255,.55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 14px -8px rgba(122,90,31,.45);
}
.topic-row .t-icon { width: 48px; height: 48px; border-radius: 14px; font-size: 1.35rem; }
.topic-row .t-title { font-family: var(--display); font-size: 1.28rem; font-weight: 500; color: var(--cream); line-height: 1.2; }
.topic-row .t-count { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-300); white-space: nowrap; }

.guide-list { display: grid; gap: 1rem; }
.guide-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .guide-list--grid { grid-template-columns: 1fr; } }
.guide-card {
  position: relative; display: flex; flex-direction: column; gap: .45rem; color: inherit;
  padding: 1.6rem 4.4rem 1.6rem 1.6rem; border-radius: 22px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
.guide-card:hover { transform: translateY(-4px); background: var(--g-sheen), var(--g-fill-hover); box-shadow: var(--g-shadow-hover); border-color: rgba(201,162,79,.45); }
.g-topic { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-300); }
.g-title { font-family: var(--display); font-size: 1.42rem; font-weight: 500; line-height: 1.2; color: var(--cream); }
.g-summary { color: var(--ink-dim); font-size: .93rem; line-height: 1.55; }
.g-meta { font-family: var(--mono); font-size: .68rem; letter-spacing: .05em; color: var(--ink-dimmer); margin-top: .25rem; }
.g-arrow {
  position: absolute; right: 1.2rem; top: 1.35rem; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1rem; color: var(--gold-300);
  border: 1px solid rgba(201,162,79,.5); background: rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 #fff;
  transition: transform .45s var(--ease), background .3s, color .3s, border-color .3s;
}
.guide-card:hover .g-arrow { background: var(--gold-500); border-color: var(--gold-500); color: var(--cream); transform: rotate(-45deg); }

.topic-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 760px) { .topic-cards { grid-template-columns: 1fr; } }
.topic-card {
  display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 1.2rem; align-items: start;
  padding: 1.6rem; border-radius: var(--g-radius); color: inherit;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
.topic-card:hover { transform: translateY(-4px); background: var(--g-sheen), var(--g-fill-hover); box-shadow: var(--g-shadow-hover); border-color: rgba(201,162,79,.45); }
.topic-card .t-icon { width: 60px; height: 60px; border-radius: 18px; font-size: 1.7rem; }
.topic-card h3 { font-family: var(--display); font-size: 1.5rem; font-weight: 500; color: var(--cream); line-height: 1.2; }
.topic-card p { color: var(--ink-dim); font-size: .93rem; line-height: 1.55; margin-top: .35rem; }
.topic-card .t-count {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-300);
}
.topic-card .t-count.is-soon { color: var(--ink-dimmer); }

.empty-state { border-radius: 22px; padding: clamp(1.6rem, 4vw, 2.4rem); }
.empty-state i { font-size: 1.8rem; color: var(--gold-300); }
.empty-state h3 { font-family: var(--display); font-size: 1.5rem; font-weight: 500; color: var(--cream); margin-top: .6rem; }
.empty-state p { color: var(--ink-dim); margin-top: .35rem; max-width: 52ch; }
.empty-state .link-arrow { margin-top: 1rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; color: var(--teal-300);
}
.link-arrow i { transition: transform .3s var(--ease); }
.link-arrow:hover i { transform: translateX(4px); }
.link-arrow:hover span { text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-transparency: reduce) {
  .glass, .hero-tag, .hero-stats, .btn-outline, .pill, .about-photo, .about-photo-tag, .hl-carousel, .svc, .cta-banner,
  .affil-card, .comp-tile, .award-card, .research-list, .contact-panel, .map-card, .wayfinding, .reviews-glass,
  .topic-row, .topic-card, .guide-card, .empty-state { background: #fffdf8; -webkit-backdrop-filter: none; backdrop-filter: none; }
}