/* Shared color roles from the client's ivory, sand, and coastal-blue reference.
   Keep this stylesheet last so page-specific legacy colors cannot leak through. */
:root {
  --ink: #263d52;
  --slate: #415576;
  --slate-2: #8093b2;
  --cream: #e6e0d9;
  --paper: #f8f8f6;
  --clay: #8093b2;
  --clay-deep: #415576;
  --blue: #415576;
  --blue-soft: #d8dde8;
  --line: rgba(65,85,118,.2);
  --coastal-powder: #d8dde8;
  --coastal-border: color-mix(in srgb, var(--slate-2) 40%, var(--paper));
  --coastal-muted: #526170;
  --coastal-tint: color-mix(in srgb, var(--blue-soft) 32%, var(--paper));
  --coastal-hover: color-mix(in srgb, var(--blue-soft) 65%, var(--paper));
  --coastal-deep: #344663;
  --coastal-sand-border: color-mix(in srgb, var(--cream) 82%, var(--ink));
  --intro-muted: #63748a;
}

/* Ivory is the canvas, beige gives people-led sections warmth, and powder blue
   separates service and question sections. Use the sampled surfaces consistently. */
body, .intro, .home-care, .insurance--contact, .practice, .team { background-color: var(--paper); }
.about, .forms, .founder, .contact-details { background-color: var(--cream); }
.services, .services-list, .faq { background-color: var(--blue-soft); }

/* Bare line icons belong on the highlights bar, without rectangular fills. */
.care-highlights { background: var(--paper); padding-bottom: 40px; }
.care-highlights-grid { background: #fff; border-color: var(--coastal-border); }
.care-highlight { background: transparent; }
.care-highlights-grid .care-highlight-icon { background: transparent; border: 0; color: var(--blue); }
.care-highlights-grid .care-highlight .care-highlight-title { color: var(--ink); }
.care-highlights-grid .care-highlight p { color: var(--coastal-muted); }
.care-highlight:hover { background: var(--coastal-hover); }
.care-highlight:hover .care-highlight-title { text-decoration-color: var(--blue); }
.care-highlight + .care-highlight::before,
.care-highlight:nth-child(n+3)::after { background: var(--coastal-border); }

/* The scroll reveal remains readable before and after each word is revealed. */
.intro-reveal.is-revealing { color: var(--intro-muted); }
.intro-reveal .reveal-word {
  color: color-mix(in srgb, var(--ink) calc(var(--reveal-progress, 0) * 100%), var(--intro-muted));
}

/* Text, labels, and small controls share the same ink and muted blue. */
.about-copy .eyebrow, .getting-started-heading .eyebrow,
.service-category, .credential, .card-label,
.home-care .home-care-eyebrow, .insurance--contact .insurance-intro .eyebrow { color: var(--blue); }
.section-head p, .practice-intro p, .founder-copy > p:not(.eyebrow),
.service-detail .service-copy > p, .focus-list li, .team .summary, .team-card-bio,
.faq-intro > p:not(.eyebrow), .faq details p,
.getting-started-heading > p:last-child, .getting-started-card p,
.form-card p, .privacy-note p, .support-note, .page-hero:has(.hero-layout) .hero-lead,
.contact-card p:not(.card-label), .contact-form-intro, .contact-form-resource,
.contact-form-help, .contact-form-panel .contact-note,
.office-map-heading address, .legal-content p, .legal-content li,
.legal-hero p:last-child, .legal-toc a { color: var(--coastal-muted); }
.form-group-title, .page-hero:has(.hero-layout) h1, .privacy-note strong { color: var(--ink); }
.care-highlight-icon, .founder-highlight-icon, .getting-started-detail,
.form-icon, .form-status, .contact-card-icon, .privacy-note-icon,
.getting-started-number { color: var(--blue); }
.contact-card-icon, .form-icon, .privacy-note-icon, .getting-started-number {
  background: var(--coastal-tint); border-color: var(--coastal-border);
}
.founder-highlight-icon { background: transparent; }
.service-detail, .getting-started-card, .form-card,
.contact-form-panel, .contact-information .contact-card,
.team-card-front, .team-card-back, .founder-highlights li,
.contact-details .office-map--compact { border-color: var(--coastal-border); }
.team-card-front, .form-card, .service-detail { background: #fff; }
.team-card-back { background: var(--coastal-tint); }
.team .focus-list li, .form-status {
  background: var(--coastal-tint); border-color: var(--coastal-border); color: var(--blue);
}
.contact-availability, .founder-availability, .privacy-note,
.contact-form-panel .contact-note {
  background: var(--coastal-tint); border-color: var(--coastal-border);
}
.contact-availability, .founder-availability { border-left-color: var(--slate-2); }
.contact-availability .availability-label, .founder-availability .availability-label,
.contact-availability a, .founder-availability a,
.contact-form-resource a, .contact-form-status { color: var(--blue); }
.contact-availability .availability-status, .founder-availability .availability-status { color: var(--ink); }
.contact-availability a:hover, .founder-availability a:hover { color: var(--coastal-deep); }
.contact-field input, .contact-field select, .contact-field textarea {
  background: #fff; border-color: var(--coastal-border); color: var(--ink);
}
.contact-field label span { color: var(--coastal-muted); }
.contact-field :is(input,select,textarea)::placeholder { color: var(--coastal-muted); }
.check { border-color: var(--slate-2); color: var(--blue); }

/* All primary actions use the same slate blue, including mobile navigation. */
.site-header .nav > .nav-cta,
.site-header .nav .nav-links .nav-menu-cta,
.btn.btn-dark, .about-copy .about-team-cta,
.founder-actions .btn:first-child, .getting-started-actions .btn,
.service-cta, .form-button, .contact-form-panel .btn:not(.btn-outline) {
  background: var(--blue); border-color: var(--blue); color: #fff; text-shadow: none;
}
.site-header .nav > .nav-cta:is(:hover, :focus-visible),
.site-header .nav .nav-links .nav-menu-cta:is(:hover, :focus-visible),
.btn.btn-dark:is(:hover, :focus-visible), .about-copy .about-team-cta:is(:hover, :focus-visible),
.founder-actions .btn:first-child:is(:hover, :focus-visible),
.getting-started-actions .btn:is(:hover, :focus-visible),
.service-cta:is(:hover, :focus-visible), .form-button:is(:hover, :focus-visible),
.contact-form-panel .btn:not(.btn-outline):is(:hover, :focus-visible) {
  background: var(--coastal-deep); border-color: var(--coastal-deep); color: #fff;
}
.btn.btn-light, .hero-primary, .contact-hero-copy .btn, .page-hero-copy .btn {
  background: var(--paper); color: var(--blue); border-color: var(--paper);
}
.btn.btn-light:is(:hover, :focus-visible), .hero-primary:is(:hover, :focus-visible),
.contact-hero-copy .btn:is(:hover, :focus-visible), .page-hero-copy .btn:is(:hover, :focus-visible),
.btn.btn-outline:is(:hover, :focus-visible),
.founder-actions .btn:last-child:is(:hover, :focus-visible),
.forms-cta-actions a:is(:hover, :focus-visible),
.site-header .nav .menu-toggle:is(:hover, :focus-visible) {
  background: var(--coastal-hover); border-color: var(--coastal-border); color: var(--ink);
}
.forms-cta-actions a:first-child { background: var(--paper); border-color: var(--paper); color: var(--blue); }
.forms-cta-actions a:first-child:is(:hover, :focus-visible) { background: var(--coastal-hover); border-color: var(--coastal-border); color: var(--ink); }
.site-header:not(.site-header--overlay), .site-header.site-header--overlay.is-sticky { background: var(--paper); }
/* Photo heroes begin with the white wordmark over the image. The existing scroll
   listener switches to a filled ivory header and dark wordmark after 24px. */
.site-header.site-header--overlay:not(.is-sticky) { background: transparent; box-shadow: none; backdrop-filter: none; }
.site-header.site-header--overlay:not(.is-sticky) .brand-logo--white { display: block; }
.site-header.site-header--overlay:not(.is-sticky) .brand-logo--color { display: none; }
.site-header.site-header--overlay.is-sticky .brand-logo--white { display: none; }
.site-header.site-header--overlay.is-sticky .brand-logo--color { display: block; }
.site-header .nav .nav-links a:not(.nav-menu-cta) { color: var(--ink); text-shadow: none; }
.site-header .nav .nav-links a:not(.nav-menu-cta):is(:hover, [aria-current="page"]) { color: var(--blue); }
.site-header .nav .menu-toggle { color: var(--ink); border-color: var(--coastal-border); }
.site-header.site-header--overlay:not(.is-sticky) .nav-links a:not(.nav-menu-cta) { color: #fff; text-shadow: 0 1px 10px rgba(40,57,80,.3); }
.site-header.site-header--overlay:not(.is-sticky) .nav-links a:not(.nav-menu-cta):is(:hover, [aria-current="page"]) { color: #fff; text-decoration: underline; text-decoration-color: var(--blue-soft); text-underline-offset: 6px; }
.site-header.site-header--overlay:not(.is-sticky) .menu-toggle { color: #fff; border-color: rgba(255,255,255,.6); }
.site-header.site-header--overlay:not(.is-sticky) .menu-toggle:is(:hover, :focus-visible) { background: rgba(255,255,255,.15); }
.site-header.site-header--overlay:not(.is-sticky) :where(a,button):focus-visible { outline-color: var(--paper); }

/* Consistent borders, focus rings, and open/hover states. */
.faq details { border-color: var(--coastal-border); border-left-color: var(--slate-2); }
.faq details[open] { background: var(--coastal-tint); border-color: var(--slate-2); }
.faq summary::after { color: var(--blue); background: transparent; }
:where(a, button, summary, [tabindex]):focus-visible { outline-color: var(--blue); }
.faq summary:focus-visible, .form-button:focus-visible,
.team-card .bio-toggle:focus-visible, .team-card-bio:focus-visible,
.service:focus-visible, .contact-field :is(input,select,textarea):focus-visible,
.contact-availability a:focus-visible, .founder-availability a:focus-visible {
  outline-color: var(--blue); border-color: var(--blue);
}
.team-card .bio-toggle { color: var(--blue); }
.team-card .bio-toggle:is(:hover, :focus-visible) { background: var(--coastal-hover); color: var(--ink); }
.team-card-bio { scrollbar-color: var(--slate-2) transparent; }
.team-card:hover .team-card-front, .team-card:hover .team-card-back,
.founder-highlights li:hover, .getting-started-card:hover,
.contact-information .contact-card:is(:hover, :focus-within) { border-color: var(--slate-2); }
.founder-highlights li:hover, .getting-started-card:hover .getting-started-number { background: var(--coastal-tint); }
.getting-started-card:hover .getting-started-number { border-color: var(--slate-2); }
.authorization-dialog { color: var(--ink); }
.authorization-dialog-header { border-color: var(--coastal-border); }
.authorization-close { background: var(--coastal-tint); color: var(--blue); }
.authorization-close:hover { background: var(--blue); color: #fff; }
.authorization-close:focus-visible { outline-color: var(--blue); }

/* Warm beige is the feature surface; its photo fades use that same beige. */
.home-care-band { background: var(--cream); }
.home-care-overlay {
  background:
    linear-gradient(90deg, #e6e0d9 0%, #e6e0d9 38%, rgba(230,224,217,.94) 46%, rgba(230,224,217,.6) 56%, rgba(230,224,217,.12) 72%, rgba(230,224,217,0) 86%),
    linear-gradient(0deg, rgba(230,224,217,.5) 0%, rgba(230,224,217,0) 40%);
}
.home-care h2, .home-care-topics h3 { color: var(--ink); }
.home-care .home-care-intro { color: var(--coastal-muted); }
.home-care-diagnoses li { background: rgba(255,255,255,.55); border-color: var(--slate-2); color: var(--blue); }
@media (hover: hover) and (pointer: fine) {
  .home-care-diagnoses li:hover { background: #fff; border-color: var(--blue); }
}
.home-care-topics, .home-care-topics h3,
.home-care-call, .home-care-topic-column + .home-care-topic-column { border-color: var(--coastal-sand-border); }
.home-care-topic-column li { color: var(--coastal-muted); }
.home-care-call a { color: var(--blue); border-color: var(--blue); }
.home-care-call a:focus-visible { outline-color: var(--blue); }
.home-care-topic-column svg { stroke: var(--blue); }

.insurance--contact .insurance-panel { background: var(--blue-soft); color: var(--ink); }
.insurance--contact .insurance-intro p:not(.eyebrow),
.insurance--contact .insurance-note { color: var(--coastal-muted); }
.insurance--contact .insurance-note { border-color: var(--coastal-border); }
.insurance--contact .insurance-phone { color: var(--blue); }
.insurance--contact .insurance-phone:is(:hover, :focus-visible) { background: var(--coastal-tint); border-color: var(--coastal-tint); }
.insurance--contact .insurance-phone:focus-visible { outline-color: var(--blue); }
.insurance--contact .insurance-provider + .insurance-provider { border-color: var(--coastal-border); }
.insurance--contact .insurance-provider:hover { background: var(--coastal-tint); }
.insurance--contact .insurance-qualcare-logo { background-color: var(--blue); }

/* Photographic sections use a coherent slate overlay, with white readable copy. */
.hero::after, .contact-hero::after, .page-hero:has(.page-hero-bg)::after {
  background:
    linear-gradient(180deg, rgba(40,57,80,.62) 0%, rgba(40,57,80,.4) 12%, rgba(40,57,80,.04) 27%, transparent 43%),
    linear-gradient(90deg, rgba(40,57,80,.18), transparent 72%),
    linear-gradient(0deg, rgba(40,57,80,.76) 0%, rgba(40,57,80,.4) 32%, transparent 65%);
}
.hero .hero-bg { object-position: center 44%; }
.hero .hero-lead, .contact-hero-copy p, .page-hero-copy p { color: rgba(255,255,255,.94); }
.hero .eyebrow, .hero-eyebrow, .contact-hero-eyebrow { background-color: rgba(40,57,80,.2); }
.cta-panel, .forms-cta {
  background-color: var(--blue);
  background-image: linear-gradient(90deg, rgba(65,85,118,.88) 0%, rgba(65,85,118,.76) 38%, rgba(65,85,118,.24) 64%, rgba(65,85,118,.06) 100%), var(--cta-image);
}
.getting-started {
  background-color: var(--paper);
  background-image: linear-gradient(180deg, rgba(248,248,246,.92), rgba(248,248,246,.68) 45%, rgba(248,248,246,.5)), url("services-cta-coastal-path-anascato.webp");
}
.page-hero:has(.hero-layout) {
  background-image: linear-gradient(90deg,rgba(248,248,246,.94),rgba(248,248,246,.82) 58%,rgba(248,248,246,.65)),url("forms-hero-seafoam-sand-anascato.webp");
}
.privacy-page .legal-hero {
  background-image: linear-gradient(90deg,rgba(248,248,246,.96),rgba(248,248,246,.8) 62%,rgba(248,248,246,.6)),url("privacy-hero-misty-sea-anascato.webp");
}
.terms-page .legal-hero {
  background-image: linear-gradient(90deg,rgba(248,248,246,.96),rgba(248,248,246,.82) 62%,rgba(248,248,246,.58)),url("terms-hero-zen-sand-anascato.webp");
}
.legal-callout { background: var(--cream); }
footer { background: var(--blue-soft); color: var(--ink); }
footer .brand-logo { filter: none; opacity: 1; }
.footer-brand p, .footer-links a, .footer-bottom, .footer-legal { color: var(--coastal-muted); }
.footer-bottom, .footer-legal { border-color: var(--coastal-border); }
.footer-links a:is(:hover, [aria-current="page"]),
.footer-legal a:is(:hover, [aria-current="page"]) { color: var(--blue); }

@media (max-width: 1360px) {
  .site-header .nav-links, .site-header.site-header--overlay .nav-links,
  .site-header.is-sticky .nav-links.open { background: var(--paper); }
  .site-header .nav .nav-links a:not(.nav-menu-cta),
  .site-header.site-header--overlay:not(.is-sticky) .nav-links a:not(.nav-menu-cta) { color: var(--ink); text-shadow: none; }
  .site-header .nav .nav-links a:not(.nav-menu-cta):is(:hover, [aria-current="page"]),
  .site-header.site-header--overlay:not(.is-sticky) .nav-links a:not(.nav-menu-cta):is(:hover, [aria-current="page"]) { color: var(--blue); }
  .site-header.site-header--overlay:not(.is-sticky) .nav-links :where(a,button):focus-visible { outline-color: var(--blue); }
}
@media (max-width: 900px) {
  .hero::after, .contact-hero::after, .page-hero:has(.page-hero-bg)::after {
    background: linear-gradient(180deg, rgba(40,57,80,.62), rgba(40,57,80,.03) 30%, rgba(40,57,80,.24) 47%, rgba(40,57,80,.84) 78%, rgba(40,57,80,.9));
  }
  .cta-panel, .forms-cta {
    background-image: linear-gradient(180deg, rgba(65,85,118,.04) 0, rgba(65,85,118,.12) 210px, #415576 410px), var(--cta-image);
  }
}
@media (max-width: 760px) {
  .home-care-overlay { background: linear-gradient(0deg, #e6e0d9 0%, #e6e0d9 calc(100% - 300px), rgba(230,224,217,.65) calc(100% - 220px), rgba(230,224,217,0) calc(100% - 130px)); }
}
@media (max-width: 620px) {
  .care-highlights { padding-bottom: 28px; }
  .getting-started { background-image: none; }
  .getting-started-heading::after {
    background-image: linear-gradient(180deg, #f8f8f6, rgba(248,248,246,0) 18%, rgba(248,248,246,0) 70%, #f8f8f6), url("services-cta-coastal-path-anascato.webp");
  }
}
