/* ============================================================
   Comfort Circle - public site styles (new multi-page website)
   Supplements Tailwind: fonts, motion, focus, small components.
   ============================================================ */

:root {
  /* Brand palette (2026-08-11 refactor): sampled from the logo mark.
     Canonical tokens live in comfort-circle-theme.css (--cc-blue-600 etc.);
     these short aliases keep this file's existing rules readable. */
  --cc-blue: #0B57A4;
  --cc-blue-deep: #0A3D8F;
  --cc-navy: #052248;
  --cc-green: #8CB824;
  --cc-gold: #FFC61E;
  /* Full logo palette - the six figures of the circle */
  --cc-cyan: #29ABE2;
  --cc-lime: #8CB824;
  --cc-yellow: #FFC61E;
  --cc-orange: #F07E17;
  --cc-red: #C4161C;
  /* Signature: the six-colour spectrum, in brand order */
  --cc-circle: linear-gradient(90deg, #0B57A4, #29ABE2 20%, #8CB824 40%, #FFC61E 60%, #F07E17 80%, #C4161C);
}

/* Typography roles */
.font-heading { font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
h1, h2, h3, h4 { font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; text-wrap: balance; }
.tabular { font-variant-numeric: tabular-nums; }

/* Visible keyboard focus everywhere (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid var(--cc-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sticky header shadow once scrolled (toggled by site.js) */
#site-header.is-scrolled { box-shadow: 0 4px 20px -8px rgb(15 23 42 / 0.12); }

/* Dropdown chevron rotation */
[data-dropdown].open .fa-chevron-down { transform: rotate(180deg); }

/* ---------- Scroll-reveal (site.js adds .rv-in) ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.rv-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; } .rv-d3 { transition-delay: .24s; }

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

/* ============================================================
   DEPTH & COLOR LAYER - Trust & Authority treatment
   (loads after Tailwind, enriches utility hooks on every page)
   ============================================================ */

::selection { background: #0B57A4; color: #fff; }

/* ---------- Page heroes: NAVY-IMMERSIVE (brand 1b) ----------
   One rule converts every inner page's hero to the navy treatment; the
   scoped overrides below invert the fixed slate/brand text classes that
   were authored for the old light wash, so no page markup churn. */
.hero-gradient {
  position: relative;
  color: #fff;
  background:
    radial-gradient(52rem 26rem at 88% -12%, rgb(41 171 226 / 0.22), transparent 58%),
    radial-gradient(40rem 22rem at -8% 115%, rgb(11 87 164 / 0.45), transparent 58%),
    radial-gradient(120% 120% at 85% 0%, #0A3D8F 0%, #052248 60%);
}
.hero-gradient::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgb(255 255 255 / 0.09) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(115deg, transparent 45%, black 85%);
          mask-image: linear-gradient(115deg, transparent 45%, black 85%);
}
.hero-gradient::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--cc-circle);
  opacity: .9;
}
.hero-gradient > * { position: relative; }

/* Scoped inversions: light-wash classes → readable on navy */
.hero-gradient .text-slate-900, .hero-gradient .text-slate-800 { color: #fff; }
.hero-gradient .text-slate-600, .hero-gradient .text-slate-700 { color: rgba(255,255,255,.82); }
.hero-gradient .text-slate-500, .hero-gradient .text-slate-400 { color: rgba(255,255,255,.65); }
/* H1 accent word + eyebrow: gold, the brief's on-navy accent */
.hero-gradient h1 .text-comfort-blue { color: var(--cc-gold); }
.hero-gradient .text-comfort-blue.bg-blue-50 {
  color: var(--cc-gold); background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
}
/* Product-line inks are too dark for navy - lift to their bright twins */
.hero-gradient .text-comfort-cyan-ink { color: #7FD0F2; }
.hero-gradient .text-comfort-green-ink { color: #C9E08A; }
.hero-gradient a.text-comfort-blue, .hero-gradient .text-comfort-blue { color: #9CC3EC; }
.hero-gradient h1 .text-comfort-blue { color: var(--cc-gold); }
/* Light chips/cards inside heroes become translucent panels */
.hero-gradient .bg-blue-50 { background: rgba(255,255,255,.10); }
.hero-gradient .border-slate-200 { border-color: rgba(255,255,255,.25); }
/* EXCEPTIONS: solid white / gold / amber surfaces inside a navy hero keep
   their dark ink (photo captions, price cards, "Most popular" pills). */
.hero-gradient .bg-white .text-slate-900, .hero-gradient [class*="bg-white/9"] .text-slate-900,
.hero-gradient .bg-white .text-slate-800, .hero-gradient [class*="bg-white/9"] .text-slate-800,
.hero-gradient .bg-amber-50 .text-slate-900,
.hero-gradient .bg-comfort-gold.text-slate-900 { color: #0F1720; }
.hero-gradient .bg-white .text-slate-600, .hero-gradient [class*="bg-white/9"] .text-slate-600,
.hero-gradient .bg-white .text-slate-500, .hero-gradient [class*="bg-white/9"] .text-slate-500 { color: #5A6672; }
.hero-gradient .bg-white .text-slate-400, .hero-gradient [class*="bg-white/9"] .text-slate-400 { color: #8A94A0; }
.hero-gradient .bg-white .text-comfort-blue, .hero-gradient [class*="bg-white/9"] .text-comfort-blue { color: var(--cc-blue); }
.hero-gradient .bg-white .text-comfort-cyan-ink { color: var(--cc-cyan-ink, #0A5E85); }

/* ---------- Homepage soft hero (legacy light wash, kept for reuse) ---------- */
.hero-soft {
  position: relative;
  background:
    radial-gradient(44rem 32rem at 98% 6%, rgb(41 171 226 / 0.26), transparent 58%),
    radial-gradient(34rem 24rem at 0% 104%, rgb(11 87 164 / 0.24), transparent 58%),
    radial-gradient(20rem 12rem at 45% -10%, rgb(255 198 30 / 0.12), transparent 62%),
    linear-gradient(180deg, #e4eefa 0%, #eef4fb 100%);
}
.hero-soft > * { position: relative; }

/* Navy-immersive homepage hero (1b): faint dot grid over the radial navy */
.hero-navy::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(115deg, transparent 40%, black 90%);
          mask-image: linear-gradient(115deg, transparent 40%, black 90%);
}
.hero-navy > * { position: relative; }

/* Circular artwork on a white disc (kept for CMS-supplied photos elsewhere) */
.hero-photo { position: relative; max-width: 34rem; margin-inline: auto; }
.hero-photo::before {
  content: ""; position: absolute; inset: -3.5%;
  border-radius: 9999px;
  background: linear-gradient(140deg, #0A3D8F 8%, #0B57A4 42%, #29ABE2 88%);
  transform: translate(4.5%, 1.5%);
  filter: drop-shadow(0 24px 40px rgb(2 12 30 / 0.45));
}
.hero-photo img {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: 9999px;
  background: #fff;
  box-shadow: inset 0 0 0 6px #fff;
  border: 6px solid #fff;
}

/* Homepage hero artwork: the cut-out Kenya map floats free on the navy -
   a cyan/blue aura behind it and a deep drop shadow give it lift without
   any frame. Gentle 6s bob; stilled under prefers-reduced-motion. */
.hero-map { position: relative; max-width: 33rem; margin-inline: auto; }
.hero-map::before {
  content: ""; position: absolute; inset: 6% 2%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgb(41 171 226 / 0.34), rgb(11 87 164 / 0.16) 55%, transparent 75%);
  filter: blur(24px);
}
.hero-map img {
  position: relative; width: 100%; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 45px rgb(2 12 30 / 0.55));
  animation: ccMapFloat 6s ease-in-out infinite;
}
@keyframes ccMapFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@media (max-width: 640px) { .hero-map { max-width: 20rem; } }
@media (prefers-reduced-motion: reduce) { .hero-map img { animation: none; } }

/* Stat card row (white card on the hero wash) */
.stat-card {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 1.5rem;
  box-shadow: 0 2px 6px rgb(15 23 42 / 0.04), 0 24px 48px -24px rgb(11 87 164 / 0.18);
}

/* ---------- Mobile hero alignment: center everything below lg ---------- */
@media (max-width: 1023px) {
  .hero-gradient > div, .hero-soft > div, .hero-navy > div { text-align: center; }
  .hero-gradient .flex-wrap, .hero-soft .flex-wrap, .hero-navy .flex-wrap { justify-content: center; }
  /* gold underline accents follow the centered text */
  .hero-gradient span[class*="bg-comfort-gold"],
  .hero-soft span[class*="bg-comfort-gold"] {
    left: 50%; transform: translateX(-50%);
  }
  /* constrained blocks center themselves */
  .hero-gradient .max-w-xl, .hero-gradient .max-w-2xl,
  .hero-soft .max-w-xl, .hero-soft .max-w-2xl,
  .hero-navy .max-w-xl, .hero-navy .max-w-2xl { margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) {
  .hero-photo { max-width: 21rem; }
  .about-photo::before { inset: -4% -6% 4% 6%; }
}

/* About-page photo: soft gradient sweep behind rounded image */
.about-photo { padding-bottom: 1.5rem; }
.about-photo::before {
  content: ""; position: absolute; inset: -8% -14% 6% 12%;
  border-radius: 42% 58% 55% 45% / 48% 45% 55% 52%;
  background: linear-gradient(135deg, rgb(41 171 226 / 0.28), rgb(11 87 164 / 0.22));
  filter: blur(2px);
}

/* ---------- Homepage dark hero ---------- */
.hero-dark {
  background:
    radial-gradient(46rem 26rem at 90% -10%, rgb(255 198 30 / 0.14), transparent 55%),
    radial-gradient(44rem 26rem at -6% 110%, rgb(41 171 226 / 0.18), transparent 58%),
    linear-gradient(160deg, #052248 0%, #0A3D8F 55%, #0B57A4 100%);
}
.hero-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgb(255 255 255 / 0.10) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(115deg, transparent 40%, black 90%);
          mask-image: linear-gradient(115deg, transparent 40%, black 90%);
}

/* ---------- Brand bands & buttons: flat -> gradient ---------- */
.bg-comfort-blue {
  background-image: linear-gradient(135deg, #0B57A4 0%, #0A3D8F 60%, #062C63 100%);
}
.bg-comfort-green {
  background-image: linear-gradient(135deg, #9CCB35 0%, #8CB824 55%, #74991E 100%);
}
.bg-comfort-red {
  background-image: linear-gradient(135deg, #DC3B41 0%, #C4161C 55%, #9B1015 100%);
}
a.bg-comfort-blue, button.bg-comfort-blue,
a.bg-comfort-green, button.bg-comfort-green,
a.bg-comfort-red, button.bg-comfort-red {
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
a.bg-comfort-blue:hover, button.bg-comfort-blue:hover { filter: brightness(1.08); transform: translateY(-1px); }
a.bg-comfort-green:hover, button.bg-comfort-green:hover { filter: brightness(1.06); transform: translateY(-1px); }
a.bg-comfort-red:hover, button.bg-comfort-red:hover { filter: brightness(1.06); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  a.bg-comfort-blue:hover, a.bg-comfort-green:hover, a.bg-comfort-red:hover,
  button.bg-comfort-blue:hover, button.bg-comfort-green:hover, button.bg-comfort-red:hover { transform: none; }
}

/* ---------- Tinted section grounds (replaces flat slate-50) ---------- */
section.bg-slate-50 {
  /* Deepened 2026-08-11: at near-white the "tinted" sections still read as
     plain white next to the navy bands. This is the light ground of the page
     and it must be recognisably Comfort Blue. */
  background: linear-gradient(180deg, #C3D8F2 0%, #D3E3F7 55%, #E4EEFA 100%);
}
/* Afya strip ground: cyan-tinted (medical = Afya Cyan, never green) */
section.bg-cyan-50\/40, section.bg-emerald-50\/40 {
  background: linear-gradient(180deg, #CDEBF9 0%, #E2F4FC 100%);
}

/* ---------- Cards: real depth ---------- */
.card-hover {
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05), 0 6px 18px -10px rgb(11 87 164 / 0.14);
}
.card-hover:hover {
  box-shadow: 0 4px 10px rgb(15 23 42 / 0.06), 0 22px 44px -18px rgb(11 87 164 / 0.30);
  border-color: rgb(11 87 164 / 0.28);
}

/* ---------- Icon chips: gradient tints + rings ---------- */
span[class*="bg-blue-50"][class*="text-comfort-blue"] {
  background-image: linear-gradient(135deg, #EDF4FC 0%, #E4EEFA 100%);
  box-shadow: inset 0 0 0 1px rgb(11 87 164 / 0.14);
}
span[class*="bg-emerald-50"][class*="text-comfort-green"] {
  background-image: linear-gradient(135deg, #F4FAE4 0%, #EEF6DC 100%);
  box-shadow: inset 0 0 0 1px rgb(140 184 36 / 0.22);
}

/* ---------- Hybrid gradient text (brand signature) ---------- */
.text-gradient {
  background: linear-gradient(90deg, #0B57A4 15%, #29ABE2 85%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- FAQ accordions: accent when open ---------- */
details.faq { transition: box-shadow .2s ease; }
details.faq[open] {
  border-left: 4px solid #0B57A4;
  background: linear-gradient(180deg, #fbfdff, #ffffff);
  box-shadow: 0 10px 26px -16px rgb(11 87 164 / 0.25);
}

/* ---------- Testimonials: decorative quote ---------- */
figure blockquote { position: relative; }
figure blockquote::before {
  content: "\201C"; position: absolute; top: -0.55em; left: -0.15em;
  font-family: Georgia, serif; font-size: 3.2em; line-height: 1;
  color: rgb(11 87 164 / 0.14); pointer-events: none;
}

/* ---------- Footer: brand keyline ---------- */
/* Footer keyline now rendered as an explicit .cc-spectrum bar in
   site_footer.php (comfort-circle-theme.css), matching the header. */

/* Section-heading underline bars: the circle of colors */
span[class*="w-14"][class*="bg-comfort-green"][class*="rounded-full"] {
  background-image: var(--cc-circle);
  width: 4.5rem;
}

/* ---------- Accordions (native <details>) ---------- */
details.faq { border-radius: 0.75rem; }
details.faq > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
}
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary .faq-icon { transition: transform .25s ease; flex: none; }
details.faq[open] > summary .faq-icon { transform: rotate(45deg); }
details.faq .faq-body { overflow: hidden; }

/* ---------- Testimonial carousel (scroll-snap) ---------- */
.carousel {
  display: grid; grid-auto-flow: column; gap: 1.25rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 1rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: .5rem;
}
.carousel > * { scroll-snap-align: start; }

/* ---------- Gallery lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  background: rgb(2 6 23 / 0.9); padding: 2rem;
}
.lightbox img, .lightbox iframe { max-width: min(90vw, 72rem); max-height: 82vh; border-radius: .5rem; }
.lightbox figcaption { color: #cbd5e1; text-align: center; margin-top: .75rem; font-size: .875rem; }

/* ---------- Horizontal timeline (about page history) ---------- */
@media (min-width: 1024px) {
  .htimeline { position: relative; }
  .htimeline::before {
    content: ""; position: absolute; top: 1.75rem; left: 12%; right: 12%;
    border-top: 2px dashed rgb(11 87 164 / 0.35);
  }
  .htimeline li { position: relative; }
  .htimeline .htimeline-dot { position: relative; z-index: 1; }
}

/* ---------- Timeline (about page) ---------- */
.timeline { position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 1.05rem; top: 0; bottom: 0;
  width: 2px; background: linear-gradient(#0B57A433, #29ABE233);
}
.timeline-dot {
  position: absolute; left: 0.45rem; width: 1.25rem; height: 1.25rem; border-radius: 9999px;
  background: #fff; border: 3px solid var(--cc-blue);
}

/* ============================================================
   MOTION LAYER - professional, subtle, reduced-motion aware
   ============================================================ */

@keyframes ccFadeUp   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ccFadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes ccScaleIn  { from { opacity: 0; transform: scale(.94); }        to { opacity: 1; transform: none; } }
@keyframes ccPulse    { 0% { box-shadow: 0 0 0 0 rgb(37 211 102 / .40); }
                        70% { box-shadow: 0 0 0 14px rgb(37 211 102 / 0); }
                        100% { box-shadow: 0 0 0 0 rgb(37 211 102 / 0); } }
@keyframes ccSpin     { to { transform: rotate(360deg); } }

/* Hero entrance choreography (pure CSS, staggered) */
.hero-soft > div > div:first-child > *,
.hero-navy > div > div:first-child > *,
.hero-gradient > div > div:first-child > *,
.hero-gradient > div > *:only-child > * {
  animation: ccFadeUp .55s ease backwards;
}
.hero-soft > div > div:first-child > *:nth-child(1), .hero-navy > div > div:first-child > *:nth-child(1), .hero-gradient > div > div:first-child > *:nth-child(1) { animation-delay: .05s; }
.hero-soft > div > div:first-child > *:nth-child(2), .hero-navy > div > div:first-child > *:nth-child(2), .hero-gradient > div > div:first-child > *:nth-child(2) { animation-delay: .14s; }
.hero-soft > div > div:first-child > *:nth-child(3), .hero-navy > div > div:first-child > *:nth-child(3), .hero-gradient > div > div:first-child > *:nth-child(3) { animation-delay: .23s; }
.hero-soft > div > div:first-child > *:nth-child(4), .hero-navy > div > div:first-child > *:nth-child(4), .hero-gradient > div > div:first-child > *:nth-child(4) { animation-delay: .32s; }
.hero-soft > div > div:first-child > *:nth-child(5), .hero-navy > div > div:first-child > *:nth-child(5), .hero-gradient > div > div:first-child > *:nth-child(5) { animation-delay: .41s; }
.hero-soft > div > div:first-child > *:nth-child(6), .hero-navy > div > div:first-child > *:nth-child(6), .hero-gradient > div > div:first-child > *:nth-child(6) { animation-delay: .50s; }
.hero-soft .hero-photo, .hero-navy .hero-photo, .hero-navy .hero-map, .hero-gradient .about-photo { animation: ccScaleIn .7s ease .28s backwards; }

/* Section-heading underline bars draw in with the reveal */
.rv span[class*="bg-comfort-green"][class*="rounded-full"] {
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform .6s ease .25s;
}
.rv-in span[class*="bg-comfort-green"][class*="rounded-full"] { transform: scaleX(1); }

/* Card imagery: gentle zoom on hover */
.card-hover { overflow: hidden; }
.card-hover img { transition: transform .45s ease; }
.card-hover:hover img { transform: scale(1.04); }

/* Icon chips: micro-lift when their card is hovered */
.card-hover span[class*="inline-flex"][class*="rounded"] { transition: transform .25s ease; }
.card-hover:hover span[class*="inline-flex"][class*="rounded"] { transform: translateY(-2px) scale(1.06); }

/* Dropdown / mobile menu entrance */
.dropdown-panel:not(.hidden) { animation: ccFadeDown .18s ease; }
#mobile-menu:not(.hidden) { animation: ccFadeDown .22s ease; }

/* FAQ body slides in when opened */
details.faq[open] .faq-body { animation: ccFadeDown .28s ease; }

/* Floating WhatsApp button: soft attention pulse */
a[aria-label="Chat with Comfort Circle on WhatsApp"] { animation: ccPulse 3.2s ease-out infinite; }

/* Buttons: tactile press */
a[class*="rounded-xl"]:active, button[class*="rounded-xl"]:active { transform: scale(.98); }

/* Form focus: glow ring + label warm-up */
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 3px rgb(11 87 164 / 0.12);
  border-color: #0B57A4 !important;
  transition: box-shadow .18s ease, border-color .18s ease;
}

/* Submit-button loading state (applied by site.js) */
.btn-loading { pointer-events: none; opacity: .75; }
.btn-loading .fa-paper-plane, .btn-loading .fa-arrow-right { display: none; }
.btn-loading::after {
  content: ""; display: inline-block; width: 1em; height: 1em; margin-left: .4em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: ccSpin .7s linear infinite; vertical-align: -0.15em;
}

/* Back-to-top control (injected by site.js) */
#cc-top {
  position: fixed; left: 1.1rem; bottom: 1.4rem; z-index: 40;
  width: 2.75rem; height: 2.75rem; border-radius: 9999px;
  background: linear-gradient(135deg, #0B57A4, #0A3D8F); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -10px rgb(11 87 164 / .5);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease; cursor: pointer; border: 0;
}
#cc-top.show { opacity: 1; pointer-events: auto; transform: none; }
#cc-top:hover { filter: brightness(1.1); }

/* Mobile nav drawer (2026-07-15): slides in from the RIGHT; backdrop + X
   close it; Services/More groups are collapsible accordions. */
#mobile-menu.cc-drawer { position: fixed; inset: 0; z-index: 60; }
#mobile-menu.cc-drawer.hidden { display: none; }
#mobile-menu .cc-drawer-backdrop {
  position: absolute; inset: 0; background: rgb(15 23 42 / .45);
  opacity: 0; transition: opacity .25s ease;
}
#mobile-menu .cc-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(17rem, 78vw);
  background: #fff; box-shadow: -18px 0 40px rgb(15 23 42 / .25);
  transform: translateX(100%); transition: transform .28s ease;
  display: flex; flex-direction: column; overflow-y: auto;
}
#mobile-menu.open .cc-drawer-backdrop { opacity: 1; }
#mobile-menu.open .cc-drawer-panel { transform: none; }
#mobile-menu .cc-drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .9rem 1rem; border-bottom: 1px solid #f1f5f9; position: sticky; top: 0; background: #fff; z-index: 1;
}
#mobile-menu .cc-drawer-x {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid #e2e8f0;
  display: inline-flex; align-items: center; justify-content: center; color: #475569; background: #fff; cursor: pointer;
}
#mobile-menu .cc-drawer-x:hover { background: #f8fafc; }
#mobile-menu .cc-drawer-nav { padding: .6rem .8rem 1.1rem; display: flex; flex-direction: column; gap: .1rem; }
#mobile-menu .cc-drawer-nav > a { padding-top: .55rem; padding-bottom: .55rem; }
#mobile-menu .cc-drawer-group {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .55rem .75rem; border: 0; background: none; cursor: pointer; text-align: left;
  font-size: .875rem; font-weight: 600; color: #334155; border-radius: .5rem;
}
#mobile-menu .cc-drawer-group:hover { background: #f8fafc; }
#mobile-menu .cc-drawer-group .chev { font-size: .68rem; color: #94a3b8; transition: transform .2s ease; }
#mobile-menu .cc-drawer-group[aria-expanded="true"] .chev { transform: rotate(180deg); }
#mobile-menu .cc-drawer-sub { padding-left: .65rem; border-left: 2px solid #eef2f7; margin: 0 0 .25rem .85rem; }
#mobile-menu .cc-drawer-sub.hidden { display: none; }
#mobile-menu .cc-drawer-foot { margin-top: .9rem; padding-top: 1rem; border-top: 1px solid #f1f5f9; }
@media (prefers-reduced-motion: reduce) {
  #mobile-menu .cc-drawer-panel, #mobile-menu .cc-drawer-backdrop, #mobile-menu .cc-drawer-group .chev { transition: none; }
}

/* Small screens (2026-07-15): the floating buttons were covering form content
   on phones (back-to-top over the left edge of inputs, WhatsApp over the
   password-requirements box). Shrink both and tuck them tight into the
   corners so they overlap as little content as possible. */
@media (max-width: 640px) {
  #cc-top { width: 2.4rem; height: 2.4rem; left: .6rem; bottom: .7rem; font-size: .8rem; }
  .cc-wa-float { width: 2.75rem; height: 2.75rem; right: .6rem; bottom: .7rem; }
  .cc-wa-float i { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-soft > div > div:first-child > *,
.hero-navy > div > div:first-child > *, .hero-gradient > div > div:first-child > *,
  .hero-gradient > div > *:only-child > *,
  .hero-soft .hero-photo, .hero-navy .hero-photo, .hero-gradient .about-photo,
  .dropdown-panel:not(.hidden), #mobile-menu:not(.hidden),
  details.faq[open] .faq-body,
  a[aria-label="Chat with Comfort Circle on WhatsApp"] { animation: none !important; }
  .rv span[class*="bg-comfort-green"][class*="rounded-full"] { transform: scaleX(1); transition: none; }
  .card-hover:hover img,
  .card-hover:hover span[class*="inline-flex"][class*="rounded"] { transform: none; }
}

/* ---------- Misc ---------- */
.prose-cc p { margin-bottom: 1rem; line-height: 1.75; }
.prose-cc ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
img { height: auto; }
.card-hover { transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.card-hover:hover { box-shadow: 0 18px 40px -18px rgb(15 23 42 / 0.22); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .card-hover:hover { transform: none; } }