/*
Theme Name: Solace Center
Theme URI: https://solacecenter.net
Author: Solace Center
Description: Custom theme migrating the approved homepage design system across all Solace Center pages.
Version: 1.4.0
Text Domain: solace-center
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@300;400;500;600&display=swap');

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS (copied verbatim from the approved homepage export)
--------------------------------------------------------------------- */
:root {
  /* Retuned from a warm/sand neutral palette to a cool blue-tinted neutral
     palette so the Solace Center blue identity carries through every
     section, not just the hero. Same tokens, same usage sites across every
     page — only the hue underneath "background/secondary/border" changed
     from warm sand to blue, so this is a systemic fix, not a redesign. */
  --background: 212 45% 97%;
  --foreground: 214 42% 16%;
  --card: 0 0% 100%;
  --card-foreground: 214 42% 16%;
  --primary: 214 52% 18%;
  --primary-foreground: 40 33% 98%;
  --secondary: 212 58% 92%;
  --secondary-foreground: 214 52% 18%;
  --muted: 212 35% 93%;
  --muted-foreground: 213 20% 38%;
  --accent: 192 70% 42%;
  --accent-foreground: 0 0% 100%;
  --border: 213 30% 86%;
  --radius: 0.875rem;
}
.dark {
  --background: 214 52% 8%;
  --foreground: 40 33% 96%;
  --card: 214 48% 13%;
  --card-foreground: 40 33% 96%;
  --primary: 40 33% 96%;
  --primary-foreground: 214 52% 18%;
  --secondary: 214 42% 18%;
  --secondary-foreground: 40 33% 96%;
  --muted: 214 40% 20%;
  --muted-foreground: 208 20% 78%;
  --accent: 190 72% 56%;
  --accent-foreground: 214 52% 10%;
  --border: 214 38% 24%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.font-display { font-family: "Fraunces", Georgia, serif; }

.wrap { max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; }
.wrap-wide { max-width: 90rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 1024px) { .wrap, .wrap-wide { padding-inline: 2.5rem; } }

.section { padding-block: 6rem; position: relative; overflow: hidden; }
@media (min-width: 1024px) { .section { padding-block: 7rem; } }

/* ---------------------------------------------------------------------
   2. TYPOGRAPHY HELPERS
--------------------------------------------------------------------- */
.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .28em;
  color: hsl(var(--accent)); font-weight: 500;
}
.kicker::before {
  content: ""; height: 1px; width: 2rem; background: hsl(var(--accent));
  transition: width .5s ease;
}
.kicker:hover::before { width: 3rem; }

h1, h2, h3 { font-family: "Fraunces", Georgia, serif; color: hsl(var(--primary)); margin: 0; }
.dark h1, .dark h2, .dark h3 { color: hsl(var(--foreground)); }

/* ---------------------------------------------------------------------
   3. BUTTONS
--------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .75rem 1.5rem; border-radius: 9999px;
  font-size: .875rem; font-weight: 500; transition: all .3s ease;
  border: none; cursor: pointer;
}
.btn:active { transform: scale(.98); }
.btn:hover { transform: translateY(-2px); }

/* FIX (item 7): solid opaque background by default so label text never loses
   contrast against whatever section/background it's placed on (light band,
   dark band, sticky header, mobile). A translucent "glass" variant is opt-in
   via .btn-primary--glass for use only on the dark hero band. */
.btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: 1px solid transparent;
  box-shadow: 0 8px 24px -8px hsl(var(--primary) / .5);
}
.btn-primary:hover { background: hsl(214 52% 24%); box-shadow: 0 14px 34px -10px hsl(var(--primary) / .55); }
.dark .btn-primary { background: hsl(var(--accent)); color: #06222f; }
.dark .btn-primary:hover { background: hsl(190 72% 62%); }

.btn-primary--glass {
  background: hsl(0 0% 100% / .14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid hsl(0 0% 100% / .35);
  color: #fff;
  box-shadow: 0 8px 30px -8px hsl(214 52% 5% / .5), inset 0 1px 0 hsl(0 0% 100% / .2);
}
.btn-primary--glass:hover { background: hsl(0 0% 100% / .22); }

.btn-ghost {
  background: hsl(0 0% 100% / .06);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid hsl(214 52% 18% / .25);
  color: hsl(var(--primary));
}
.dark .btn-ghost { border-color: hsl(0 0% 100% / .3); color: hsl(var(--foreground)); }
.btn-ghost:hover { box-shadow: 0 10px 24px -10px hsl(214 52% 18% / .35); }

/* On the dark band, ghost buttons need light text/border by default */
.band-dark .btn-ghost { color: #fff; border-color: hsl(0 0% 100% / .3); }
.band-dark .btn-ghost:hover { background: hsl(0 0% 100% / .1); }

.btn-icon { transition: transform .2s ease; }
.btn:hover .btn-icon { transform: translateX(2px); }

.btn:focus-visible { outline: 2px solid hsl(var(--accent)); outline-offset: 2px; }

/* Defensive: guarantee button label contrast regardless of any container's
   own link-color rules (belt-and-suspenders for the footer bug above). */
a.btn.btn-primary, a.btn.btn-primary:hover, a.btn.btn-primary:focus, a.btn.btn-primary:active {
  color: hsl(var(--primary-foreground));
}
.dark a.btn.btn-primary, .dark a.btn.btn-primary:hover {
  color: #06222f;
}

.skip-link {
  position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 100;
  background: hsl(var(--primary)); color: #fff; padding: .75rem 1.25rem; border-radius: .5rem;
}
.skip-link:focus {
  left: 1rem; top: 1rem; width: auto; height: auto;
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid hsl(var(--accent)); outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   4. CARDS
--------------------------------------------------------------------- */
.card {
  background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border-radius: 1.25rem; border: 1px solid hsl(var(--border));
  box-shadow: 0 20px 45px -20px hsl(var(--primary) / .2);
  position: relative; overflow: hidden;
}
.card-sheen::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, hsl(0 0% 100% / .18) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s ease; pointer-events: none;
}
.card-sheen:hover::after { transform: translateX(120%); }
@media (prefers-reduced-motion: reduce) { .card-sheen::after { display: none; } }

.icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.75rem; width: 2.75rem; border-radius: .875rem;
  background: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--primary)));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 8px 18px -6px hsl(var(--primary) / .4);
  transition: transform .5s ease;
}
.card:hover .icon-badge, .icon-badge-solo:hover { transform: scale(1.1) rotate(6deg); }

/* ---------------------------------------------------------------------
   5. ANIMATIONS (reduced-motion aware)
--------------------------------------------------------------------- */
@keyframes solace-float { 0%,100% { transform: translateY(0) rotate(0deg);} 50% { transform: translateY(-14px) rotate(3deg);} }
.animate-float { animation: solace-float 7s ease-in-out infinite; }
@keyframes solace-float-slow { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-22px);} }
.animate-float-slow { animation: solace-float-slow 11s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .animate-float, .animate-float-slow { animation: none; }
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.cursor-glow {
  position: fixed; top: 0; left: 0; z-index: 45; height: 500px; width: 500px;
  border-radius: 9999px; pointer-events: none; opacity: .5; filter: blur(24px);
  background: radial-gradient(circle, hsl(192 70% 42% / .45), hsl(192 70% 42% / .12) 45%, transparent 70%);
  will-change: transform;
}
.dark .cursor-glow { background: radial-gradient(circle, hsl(190 72% 56% / .40), hsl(190 60% 50% / .12) 45%, transparent 70%); }
@media (hover: none) { .cursor-glow { display: none; } }

/* ---------------------------------------------------------------------
   6. HEADER / NAV
--------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid hsl(var(--border) / .7);
  background: hsl(var(--background) / .8);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.site-header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: .75rem;
}
.site-logo img { height: 4.25rem; width: auto; }
.main-nav { display: none; align-items: center; gap: 1.75rem; }
@media (min-width: 1024px) { .main-nav { display: flex; } }
.main-nav a {
  position: relative; font-size: .875rem; color: hsl(var(--muted-foreground));
  transition: color .2s ease; padding-bottom: .35rem;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: hsl(var(--accent)); transition: width .3s ease;
}
.main-nav a:hover, .main-nav a.is-active { color: hsl(var(--primary)); }
.main-nav a:hover::after, .main-nav a.is-active::after { width: 100%; }

.header-actions { display: none; align-items: center; gap: 1rem; }
@media (min-width: 1024px) { .header-actions { display: flex; } }
.header-call { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; color: hsl(var(--primary)); }

.mobile-actions { display: flex; align-items: center; gap: .5rem; }
@media (min-width: 1024px) { .mobile-actions { display: none; } }
.mobile-call-btn, .menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.75rem; width: 2.75rem; border-radius: 9999px; border: 1px solid hsl(var(--border));
  background: transparent; cursor: pointer;
}
.mobile-call-btn { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border: none; }

.mobile-menu { display: none; border-top: 1px solid hsl(var(--border)); background: hsl(var(--background)); padding: 1rem 1.25rem; }
.mobile-menu.is-open { display: block; }
.mobile-menu a { display: block; min-height: 44px; padding-block: .5rem; font-size: .875rem; color: hsl(var(--muted-foreground)); }
@media (min-width: 1024px) { .mobile-menu { display: none !important; } }

/* ---------------------------------------------------------------------
   7. FOOTER
--------------------------------------------------------------------- */
.site-footer { border-top: 1px solid hsl(var(--border)); background: hsl(var(--background)); padding-block: 4rem; }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-grid h3 { font-size: 1rem; margin-bottom: 1rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.footer-grid a:not(.btn) { color: hsl(var(--muted-foreground)); font-size: .875rem; transition: color .2s ease; }
.footer-grid a:not(.btn):hover { color: hsl(var(--primary)); }
/* Fix: without :not(.btn) above, this rule's higher specificity (extra
   element selector) was beating .btn-primary:hover's text color, turning
   the footer's "Book an Appointment" button text the same dark navy as its
   hover background — effectively invisible. */
.footer-contact li { display: flex; gap: .75rem; align-items: flex-start; color: hsl(var(--muted-foreground)); font-size: .875rem; transition: transform .3s ease; }
.footer-contact li:hover { transform: translateX(4px); }
.footer-bottom {
  margin-top: 3rem; border-top: 1px solid hsl(var(--border)); padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-size: .75rem; color: hsl(var(--muted-foreground));
}
.footer-bottom .legal { display: flex; gap: 1.25rem; }

/* ---------------------------------------------------------------------
   8. HERO / DARK BAND (used on inner-page heroes, insurance, final CTA)
--------------------------------------------------------------------- */
.band-dark {
  position: relative; overflow: hidden;
  background: hsl(214 52% 14%); color: hsl(var(--primary-foreground));
}
.band-dark .orb { position: absolute; border-radius: 9999px; pointer-events: none; }

/* ---------------------------------------------------------------------
   9. GRIDS / UTILITIES
--------------------------------------------------------------------- */
.grid-2 { display: grid; gap: 3.5rem; }
@media (min-width: 1024px) { .grid-2 { grid-template-columns: 1.05fr .95fr; align-items: center; } }
.grid-cards { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-cards { grid-template-columns: repeat(4, 1fr); } }
.muted { color: hsl(var(--muted-foreground)); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* ---------------------------------------------------------------------
   10. HERO (homepage) — stat row, headline underline sweep
--------------------------------------------------------------------- */
.hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 32rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid hsl(0 0% 100% / .15); }
@media (min-width: 640px) { .hero-stats { grid-template-columns: repeat(3, 1fr); } }
.hero-stats dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .15em; color: hsl(0 0% 100% / .55); }
.hero-stats dd { margin: .25rem 0 0; font-size: .875rem; }
.headline-underline { position: relative; display: inline-block; }
.headline-underline .sweep {
  position: absolute; inset-inline: 0; bottom: .25rem; z-index: 0; height: .6rem;
  background: hsl(var(--accent) / .6); transform: rotate(-1deg) scaleX(0); transform-origin: left;
  animation: solace-underline-sweep .9s ease-out .5s forwards;
}
@keyframes solace-underline-sweep { to { transform: rotate(-1deg) scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .headline-underline .sweep { animation: none; transform: rotate(-1deg) scaleX(1); } }

/* Quick action + service + why-us cards: gradient hover wash */
.grad-card { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 1rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); padding: 1.5rem; box-shadow: 0 2px 10px -4px hsl(var(--primary) / .12); transition: all .5s ease; }
.grad-card:hover { transform: translateY(-6px); box-shadow: 0 24px 45px -18px hsl(var(--primary) / .3); }
.grad-card .grad-wash { position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .5s ease; pointer-events: none; background: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--primary))); }
.grad-card:hover .grad-wash { opacity: .1; }
.grad-card .grad-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 3rem; width: 3rem; border-radius: .75rem; background: hsl(var(--secondary)); color: hsl(var(--accent)); transition: all .5s ease; }
.grad-card:hover .grad-icon { transform: scale(1.1) rotate(6deg); background: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--primary))); color: #fff; }
.grad-card .learn-more { position: relative; margin-top: 1rem; display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 500; color: hsl(var(--accent)); }

/* Why-us row */
.why-row { display: flex; gap: 1.25rem; padding-top: 1.5rem; border-top: 1px solid hsl(var(--border)); transition: border-color .3s ease; }
.why-row:hover { border-color: hsl(var(--accent) / .5); }
.why-row .num { font-family: 'Fraunces', serif; font-size: .875rem; color: hsl(var(--accent)); }

/* Steps (dark band) */
.steps-list { position: relative; margin-top: 3.5rem; display: grid; gap: 2.5rem; padding: 0; list-style: none; }
@media (min-width: 768px) { .steps-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps-list { grid-template-columns: repeat(4, 1fr); } }
.steps-list li { border-top: 1px solid hsl(0 0% 100% / .2); padding-top: 1.5rem; }
@media (min-width: 1024px) { .steps-list li { border-top: none; padding-top: 0; } }
.step-num { font-family: 'Fraunces', serif; margin-top: 1.25rem; display: block; font-size: 2.25rem; color: hsl(var(--accent)); }

/* Insurance marquee */
.marquee-wrap { overflow: hidden; margin-top: 3.5rem; }
.marquee-track { display: flex; width: max-content; gap: 1.5rem; animation: solace-marquee 38s linear infinite; }
@keyframes solace-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; } }
.marquee-item { display: flex; height: 6rem; width: 11rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 1rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); padding-inline: 1.5rem; transition: all .4s ease; }
.marquee-item:hover { border-color: hsl(var(--accent) / .5); transform: translateY(-4px); }
.marquee-item img { height: 3rem; width: auto; object-fit: contain; filter: grayscale(1); opacity: .7; transition: all .4s ease; }
.marquee-item:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.08); }

/* FAQ accordion */
.faq-item { border-top: 1px solid hsl(var(--border)); }
.faq-item:last-child { border-bottom: 1px solid hsl(var(--border)); }
.faq-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 44px; padding-block: 1.25rem; background: none; border: none; text-align: left; cursor: pointer; font-family: 'Fraunces', serif; font-size: 1.05rem; color: hsl(var(--primary)); }
.faq-icon { display: inline-flex; height: 2rem; width: 2rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid hsl(var(--border)); color: hsl(var(--accent)); }
.faq-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-panel p { padding-bottom: 1.5rem; color: hsl(var(--muted-foreground)); line-height: 1.7; }
.timings-box { margin-top: 2rem; border-radius: 1rem; border: 1px solid hsl(var(--accent) / .3); background: linear-gradient(135deg, hsl(var(--primary) / .05), hsl(var(--accent) / .1)); padding: 1.25rem; font-size: .875rem; }
.timings-box ul { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.timings-box li { display: flex; justify-content: space-between; }

/* ---------------------------------------------------------------------
   11. BREADCRUMB (inner-page hero bands)
--------------------------------------------------------------------- */
.breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: hsl(0 0% 100% / .65); }
.breadcrumb a { color: hsl(0 0% 100% / .85); transition: color .2s ease; }
.breadcrumb a:hover { color: hsl(var(--accent)); }
.breadcrumb .sep { opacity: .5; }

/* ---------------------------------------------------------------------
   12. IMAGE HOVER ZOOM (used on every framed photo across pages)
--------------------------------------------------------------------- */
.img-frame { overflow: hidden; position: relative; display: block; }
.img-frame img, .img-frame video { transition: transform .7s cubic-bezier(.22,1,.36,1); width: 100%; height: 100%; object-fit: cover; }
.img-frame:hover img, .img-frame:hover video { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .img-frame img, .img-frame video { transition: none; } .img-frame:hover img, .img-frame:hover video { transform: none; } }

/* Coordinated card with image + icon + CTA — everything responds as one unit */
.media-card { border-radius: 1.25rem; overflow: hidden; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); box-shadow: 0 16px 40px -22px hsl(var(--primary) / .25); transition: box-shadow .4s ease, transform .4s ease; display: flex; flex-direction: column; height: 100%; }
.media-card:hover { transform: translateY(-6px); box-shadow: 0 28px 55px -20px hsl(var(--primary) / .32); }
.media-card .media-card-img { aspect-ratio: 4/3; }
.media-card .media-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.media-card .media-card-icon { display: inline-flex; align-items: center; justify-content: center; height: 2.75rem; width: 2.75rem; border-radius: .75rem; background: hsl(var(--secondary)); color: hsl(var(--accent)); margin-top: -3.25rem; margin-left: 1.25rem; position: relative; z-index: 2; border: 3px solid hsl(var(--card)); transition: all .4s ease; }
.media-card:hover .media-card-icon { background: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--primary))); color: #fff; transform: scale(1.08) rotate(6deg); }
.media-card .learn-more svg { transition: transform .3s ease; }
.media-card:hover .learn-more svg { transform: translateX(4px); }

/* ---------------------------------------------------------------------
   13. AREAS OF CARE (pill/chip grid)
--------------------------------------------------------------------- */
.chip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 640px) { .chip-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .chip-grid { grid-template-columns: repeat(4, 1fr); } }
.chip {
  display: flex; align-items: center; gap: .65rem; border-radius: .875rem;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card));
  padding: .85rem 1rem; font-size: .85rem; font-weight: 500; color: hsl(var(--primary));
  transition: all .3s ease;
}
.chip:hover { border-color: hsl(var(--accent) / .5); background: hsl(var(--accent) / .06); transform: translateY(-2px); box-shadow: 0 10px 22px -14px hsl(var(--primary) / .3); }
.chip .chip-icon { display: inline-flex; align-items: center; justify-content: center; height: 1.75rem; width: 1.75rem; flex-shrink: 0; border-radius: .5rem; background: hsl(var(--secondary)); color: hsl(var(--accent)); }

/* ---------------------------------------------------------------------
   19. STRONGER BLUE BANDS (global blue-identity pass)
--------------------------------------------------------------------- */
.band-tint { background: hsl(var(--secondary) / .7); }
.band-tint-strong { background: linear-gradient(180deg, hsl(212 55% 90%), hsl(212 45% 95%)); }

/* ---------------------------------------------------------------------
   20. LARGE, NON-CIRCULAR ICON TREATMENT (Welcome-section quick-action
   cards, and anywhere a card icon should read as a real symbol rather
   than a generic dot). Rounded-square badge, larger glyph, subtle hover
   lift+tint shared with the rest of the site's icon language.
--------------------------------------------------------------------- */
.icon-feature {
  display: inline-flex; align-items: center; justify-content: center;
  height: 3.5rem; width: 3.5rem; border-radius: 1rem;
  background: linear-gradient(135deg, hsl(var(--secondary)), hsl(var(--background)));
  color: hsl(var(--accent)); border: 1px solid hsl(var(--border));
  transition: all .4s ease;
}
.grad-card:hover .icon-feature,
.media-card:hover .icon-feature,
.card:hover .icon-feature {
  background: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--primary)));
  color: #fff; transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 10px 22px -8px hsl(var(--primary) / .4);
}
@media (prefers-reduced-motion: reduce) {
  .grad-card:hover .icon-feature, .media-card:hover .icon-feature, .card:hover .icon-feature { transform: none; }
}

/* ---------------------------------------------------------------------
   14. INSURANCE LOGO GRID
--------------------------------------------------------------------- */
.insurance-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (min-width: 640px) { .insurance-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .insurance-grid { grid-template-columns: repeat(4, 1fr); } }
.insurance-card {
  display: flex; align-items: center; justify-content: center; height: 7rem;
  border-radius: 1rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card));
  padding: 1.5rem; transition: all .35s ease;
}
.insurance-card:hover { border-color: hsl(var(--accent) / .5); transform: translateY(-4px) scale(1.02); box-shadow: 0 16px 32px -18px hsl(var(--primary) / .3); }
.insurance-card img { max-height: 100%; width: auto; object-fit: contain; opacity: .85; transition: opacity .35s ease; }
.insurance-card:hover img { opacity: 1; }

/* ---------------------------------------------------------------------
   15. FORMS (general contact form — not for clinical/PHI data)
--------------------------------------------------------------------- */
.form-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .form-grid.two-col { grid-template-columns: repeat(2, 1fr); } }
.form-field { display: flex; flex-direction: column; gap: .4rem; }
.form-field label { font-size: .8rem; font-weight: 500; color: hsl(var(--primary)); }
.form-field input, .form-field textarea {
  font-family: inherit; font-size: .9rem; padding: .75rem .9rem; border-radius: .75rem;
  border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground));
  transition: border-color .2s ease, box-shadow .2s ease; min-height: 44px;
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus {
  outline: none; border-color: hsl(var(--accent)); box-shadow: 0 0 0 3px hsl(var(--accent) / .18);
}
.form-check { display: flex; align-items: flex-start; gap: .6rem; font-size: .8rem; color: hsl(var(--muted-foreground)); line-height: 1.5; }
.form-check input { margin-top: .2rem; width: 1rem; height: 1rem; accent-color: hsl(var(--accent)); flex-shrink: 0; }
.form-note { font-size: .8rem; padding: .9rem 1rem; border-radius: .75rem; background: hsl(var(--secondary) / .6); border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); line-height: 1.6; }
.form-success { padding: 1.25rem; border-radius: .875rem; background: hsl(150 45% 94%); border: 1px solid hsl(150 40% 70%); color: hsl(150 45% 22%); font-size: .9rem; }
.form-error { padding: 1.25rem; border-radius: .875rem; background: hsl(0 60% 96%); border: 1px solid hsl(0 55% 75%); color: hsl(0 55% 32%); font-size: .9rem; }

/* ---------------------------------------------------------------------
   16. MAP EMBED
--------------------------------------------------------------------- */
.map-frame { border-radius: 1.25rem; overflow: hidden; border: 1px solid hsl(var(--border)); box-shadow: 0 20px 45px -22px hsl(var(--primary) / .25); }
.map-frame iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* ---------------------------------------------------------------------
   17. HERO VIDEO CONTAINER
--------------------------------------------------------------------- */
.hero-media { position: relative; overflow: hidden; border-radius: 2rem 6rem 2rem 2rem; aspect-ratio: 4/3; box-shadow: 0 30px 60px -20px hsl(0 0% 0% / .35); }
.hero-media video, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------
   18. SERVICE DETAIL BLOCKS (anchor targets from "Learn More")
--------------------------------------------------------------------- */
.service-detail { scroll-margin-top: 6rem; border-top: 1px solid hsl(var(--border)); padding-block: 3rem; }
.service-detail:first-of-type { border-top: none; }
.service-detail .service-detail-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .service-detail .service-detail-grid { grid-template-columns: .9fr 1.1fr; align-items: center; } }