/* ===========================
   Christopher Kinna, PMHNP
   Professional, calming theme
   =========================== */

:root {
    /* Brand-aligned palette: royal navy (Forged Family lettering) + warm gold (logo sparkles) */
    --color-primary: #1e3a8a;
    --color-primary-dark: #0f1f4d;
    --color-primary-light: #5b7fb8;
    --color-accent: #d4a047;
    --color-accent-light: #ecc97a;
    --color-accent-soft: rgba(212, 160, 71, 0.18);
    --color-cream: #f7f4ec;
    --color-cream-dark: #ebe4d4;
    --color-mist: #eef2f8;
    --color-mist-dark: #d6dfee;
    --color-text: #1a2238;
    --color-text-muted: #5a6a85;
    --color-white: #ffffff;
    --color-border: #d8d4cc;
    --color-border-soft: #e6e2d6;
    /* Creation & Light additions — botanical sages, dawn ivory, hearth whisper */
    --color-sage: #8a9a7b;
    --color-sage-deep: #5e6f57;
    --color-sage-soft: #d8e0cf;
    --color-dawn-ivory: #faf6ed;
    --color-terracotta: #c47f5e;
    --shadow-soft: 0 4px 18px rgba(15, 31, 77, 0.08);
    --shadow-md: 0 8px 28px rgba(15, 31, 77, 0.14);
    --shadow-lg: 0 18px 46px rgba(15, 31, 77, 0.22);
    --shadow-portrait: 0 22px 46px -18px rgba(15, 31, 77, 0.45), 0 0 0 1px rgba(212, 160, 71, 0.35);
    --radius: 8px;
    --radius-lg: 14px;
    --max-width: 1140px;
    --font-serif: "Lora", Georgia, "Times New Roman", serif;
    --font-display: "Cormorant Garamond", "Lora", Georgia, serif;
    --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background-color: var(--color-cream);
    line-height: 1.7;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-primary-dark);
}

h1, h2, h3, h4 {
    font-family: var(--font-serif);
    color: var(--color-primary-dark);
    line-height: 1.3;
    font-weight: 600;
}

h1 { font-size: 2.5rem; margin-bottom: 1rem; }
h2 { font-size: 2rem; margin-bottom: 1.25rem; }
h3 { font-size: 1.4rem; margin-bottom: 0.75rem; }
h4 { font-size: 1.15rem; margin-bottom: 0.5rem; }

p { margin-bottom: 1rem; }

/* ===========================
   Header & Navigation
   =========================== */
.site-header {
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
}

.brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    flex-shrink: 0;
}

.brand-text {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    line-height: 1.2;
    letter-spacing: 0.01em;
}

@media (max-width: 768px) {
    .brand-text { display: none; }
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--color-primary-dark);
    padding: 0.4rem 0.6rem;
}

.nav-list {
    list-style: none;
    display: flex;
    gap: 0.25rem;
    align-items: center;
    margin-left: auto;
}

.nav-list a {
    padding: 0.5rem 0.75rem;
    color: var(--color-text);
    font-weight: 500;
    border-radius: var(--radius);
    transition: background 0.2s ease, color 0.2s ease;
    font-size: 0.92rem;
    white-space: nowrap;
}

.nav-list a:hover,
.nav-list a.active {
    background: var(--color-cream-dark);
    color: var(--color-primary-dark);
}

.nav-cta {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    margin-left: 0.5rem;
}

.nav-cta:hover {
    background: var(--color-primary-dark) !important;
}

/* Schedule CTA shown only in the mobile header bar (see mobile media query) */
.nav-cta-mobile { display: none; }

/* ===========================
   Hero
   =========================== */
.hero {
    /* Creation & Light hero — sun core + warm halo + night-sky gradient.
       Sun is positioned at 50% / 100% so the mountain silhouette (::after) visually contains it,
       and the light reads as rising from BEHIND the ridge. */
    background:
        radial-gradient(ellipse 46% 45% at 50% 100%,
                       rgba(255, 240, 195, 1.0) 0%,
                       rgba(255, 222, 152, 0.95) 18%,
                       rgba(236, 201, 122, 0.80) 40%,
                       rgba(212, 160, 71, 0.50) 65%,
                       transparent 88%),
        radial-gradient(ellipse 68% 62% at 50% 100%,
                       rgba(236, 201, 122, 0.55) 0%,
                       rgba(212, 160, 71, 0.38) 28%,
                       rgba(196, 127, 94, 0.22) 52%,
                       rgba(91, 127, 184, 0.10) 75%,
                       transparent 92%),
        linear-gradient(180deg,
                       #0a1338 0%,
                       var(--color-primary-dark) 28%,
                       var(--color-primary) 62%,
                       #2a4090 92%,
                       #1a2e6e 100%);
    color: var(--color-white);
    padding: 5.5rem 1.5rem 9rem;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Subtle upper-right atmospheric highlight — kept very soft so it doesn't fight the sunrise */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 82% 18%, rgba(236, 201, 122, 0.12) 0%, transparent 45%);
    pointer-events: none;
    z-index: 0;
}

/* Mountain silhouette — sits ABOVE the sunrise glow so light reads as "behind" the ridge */
.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'><path d='M0,140 L0,90 L80,68 L160,82 L240,48 L320,68 L420,30 L520,62 L610,42 L720,68 L820,44 L920,64 L1020,32 L1130,58 L1230,40 L1340,64 L1440,46 L1440,140 Z' fill='%2308102e' opacity='0.80'/><path d='M0,140 L0,110 L120,92 L240,104 L360,82 L480,100 L600,72 L720,94 L840,80 L960,98 L1080,76 L1200,94 L1320,78 L1440,96 L1440,140 Z' fill='%23050920'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}

.hero-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 3rem;
    align-items: start;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent-light);
    margin-bottom: 1.25rem;
}

.hero-eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--color-accent);
}

.hero h1 {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--color-white);
    font-size: 3.25rem;
    line-height: 1.1;
    letter-spacing: 0.005em;
    margin-bottom: 1rem;
}

.hero h1 em {
    font-style: italic;
    font-weight: 500;
    color: var(--color-accent-light);
}

.hero .tagline {
    font-size: 1.2rem;
    color: rgba(247, 244, 236, 0.92);
    margin-bottom: 2rem;
    font-weight: 300;
    line-height: 1.55;
    max-width: 560px;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 2rem;
    color: rgba(236, 201, 122, 0.95);
    font-size: 0.95rem;
}

.hero-meta span::before {
    content: "•";
    margin-right: 0.5rem;
    color: var(--color-accent);
}

.hero-meta span:first-child::before { content: ""; margin: 0; }

.hero-image {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 2rem 2rem 1.75rem;
    box-shadow: var(--shadow-lg);
    color: var(--color-primary-dark);
    position: relative;
    border-top: 3px solid var(--color-accent);
}

.hero-image h3 {
    color: var(--color-primary-dark);
    margin-bottom: 0.5rem;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
}

.hero-image h3::after {
    content: "";
    display: block;
    width: 36px;
    height: 2px;
    background: var(--color-accent);
    margin-top: 0.5rem;
    border-radius: 2px;
}

.hero-image ul {
    list-style: none;
    padding: 0;
    margin-top: 0.75rem;
}

.hero-image li {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--color-border-soft);
    color: var(--color-text);
    font-size: 0.95rem;
}

.hero-image li:last-child { border-bottom: none; }

.hero-image li::before {
    content: "✓ ";
    color: var(--color-accent);
    font-weight: bold;
    margin-right: 0.5rem;
}

/* ===========================
   Buttons
   =========================== */
.btn {
    display: inline-block;
    padding: 0.85rem 1.75rem;
    border-radius: var(--radius);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.btn-primary {
    background: var(--color-accent);
    color: var(--color-primary-dark);
    border-color: var(--color-accent);
}

.btn-primary:hover {
    background: var(--color-accent-light);
    border-color: var(--color-accent-light);
    color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background: transparent;
    color: var(--color-white);
    border-color: var(--color-cream);
}

.btn-outline:hover {
    background: var(--color-white);
    color: var(--color-primary-dark);
}

.btn-solid {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn-solid:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ===========================
   Page Header (subpages)
   =========================== */
.page-header {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    color: var(--color-white);
    padding: 4rem 1.5rem 3.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 0%, rgba(236, 201, 122, 0.18) 0%, transparent 45%);
    pointer-events: none;
}

.page-header h1 {
    color: var(--color-white);
    margin-bottom: 0.5rem;
    position: relative;
}

.page-header h1::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    background: var(--color-accent);
    margin: 0.85rem auto 0;
    border-radius: 2px;
}

.page-header p {
    color: rgba(247, 244, 236, 0.88);
    font-size: 1.1rem;
    max-width: 700px;
    margin: 1rem auto 0;
    position: relative;
}

/* ===========================
   Sections / Layout
   =========================== */
.section {
    padding: 4rem 1.5rem;
}

.section-tinted {
    background: var(--color-cream-dark);
}

.section-light {
    background: var(--color-white);
}

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

.container-narrow {
    max-width: 820px;
    margin: 0 auto;
}

.section-title {
    text-align: center;
    margin-bottom: 0.5rem;
    position: relative;
}

.section-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    background: var(--color-accent);
    margin: 0.85rem auto 0;
    border-radius: 2px;
}

.section-subtitle {
    text-align: center;
    color: var(--color-text-muted);
    margin: 1.25rem auto 3rem;
    font-size: 1.05rem;
    max-width: 660px;
}

/* ===========================
   Cards
   =========================== */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.card-grid--six {
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.card-grid--six .card {
    padding: 1.5rem 1.25rem;
}

.card-grid--six .card h3 {
    font-size: 1.05rem;
    line-height: 1.25;
}

.card-grid--six .card p {
    font-size: 0.875rem;
}

.card-grid--six .card-icon {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

@media (max-width: 1024px) {
    .card-grid--six { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .card-grid--six { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
    .card-grid--six { grid-template-columns: 1fr; }
}

.card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--color-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.card-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-sage-soft) 0%, var(--color-cream) 100%);
    color: var(--color-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    font-family: var(--font-serif);
    box-shadow: 0 0 0 4px var(--color-accent-soft), inset 0 0 0 1px rgba(94, 111, 87, 0.18);
    position: relative;
}

.card h3 {
    margin-bottom: 0.5rem;
}

.card p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin-bottom: 0;
}

.card-with-photo {
    padding-top: 0;
    overflow: hidden;
}

.card-photo {
    margin: 0 -2rem 1.5rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-mist);
    border-bottom: 1px solid var(--color-border);
}

.card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.card-with-photo:hover .card-photo img {
    transform: scale(1.03);
}

/* Anchor portrait-orientation photos to the top so faces stay in frame
   when the 4:3 card crops them. Landscape photos use default centered cover. */
.card-photo--top img {
    object-position: center top;
}

/* ===========================
   Lists / Pills
   =========================== */
.pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    list-style: none;
    padding: 0;
}

.pill-list li {
    background: var(--color-white);
    color: var(--color-primary-dark);
    padding: 0.5rem 1.05rem;
    border-radius: 999px;
    font-size: 0.92rem;
    border: 1px solid var(--color-mist-dark);
    font-weight: 500;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.pill-list li:hover {
    border-color: var(--color-accent);
    background: #fffaf0;
}

.check-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.6rem 1.5rem;
}

.check-list li {
    padding-left: 1.75rem;
    position: relative;
    color: var(--color-text);
}

.check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-accent);
    font-weight: 700;
    font-size: 1.1rem;
}

/* ===========================
   Two-column / split layouts
   =========================== */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.split-feature {
    background: var(--color-white);
    padding: 2rem;
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-accent);
    box-shadow: var(--shadow-soft);
}

.info-block {
    background: var(--color-mist);
    padding: 1.5rem 1.75rem;
    border-radius: var(--radius);
    border-left: 4px solid var(--color-accent);
    margin: 1.5rem 0;
}

.info-block strong { color: var(--color-primary-dark); }

/* ===========================
   Timeline (career path)
   =========================== */
.timeline {
    list-style: none;
    padding: 0;
    position: relative;
    margin: 2rem 0;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-mist-dark);
}

.timeline-item {
    padding-left: 3rem;
    margin-bottom: 1.75rem;
    position: relative;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 3px solid var(--color-cream-dark);
    box-shadow: 0 0 0 2px var(--color-primary);
}

.timeline-item h4 {
    margin-bottom: 0.25rem;
    color: var(--color-primary-dark);
}

.timeline-item .year {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===========================
   Insurance grid
   =========================== */
.insurance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.insurance-item {
    background: var(--color-white);
    padding: 1.25rem;
    text-align: center;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    font-weight: 600;
    color: var(--color-primary-dark);
}

/* ===========================
   Contact / Forms
   =========================== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.contact-detail {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.contact-detail .icon {
    width: 44px;
    height: 44px;
    background: var(--color-mist);
    color: var(--color-primary-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--color-accent-soft);
}

.contact-detail h4 { margin-bottom: 0.15rem; }

.contact-detail p {
    margin-bottom: 0;
    color: var(--color-text-muted);
}

.form {
    background: var(--color-white);
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 1rem;
    font-family: var(--font-sans);
    background: var(--color-cream);
    color: var(--color-text);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-white);
}

.form-group textarea { min-height: 130px; resize: vertical; }

.form-note {
    background: var(--color-cream-dark);
    padding: 1rem;
    border-radius: var(--radius);
    font-size: 0.88rem;
    color: var(--color-text-muted);
    margin-top: 1rem;
}

/* HIPAA-compliant schedule card (replaces the form on contact.html) */
.schedule-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(91, 127, 184, 0.18) 0%, transparent 55%),
        linear-gradient(160deg, var(--color-white) 0%, var(--color-mist) 100%);
    padding: 2.5rem 2.25rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(212, 160, 71, 0.35);
    position: relative;
    border-top: 3px solid var(--color-accent);
}

.schedule-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.75rem;
}

.schedule-card h2 {
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
}

.schedule-card h2::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background: var(--color-accent);
    margin: 0.85rem 0 1rem;
    border-radius: 2px;
}

.schedule-lede {
    color: var(--color-text);
    font-size: 1rem;
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

.schedule-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
}

.schedule-list li {
    padding: 0.45rem 0 0.45rem 1.75rem;
    position: relative;
    color: var(--color-text);
    font-size: 0.95rem;
    border-bottom: 1px solid var(--color-border-soft);
}

.schedule-list li:last-child { border-bottom: none; }

.schedule-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.45rem;
    color: var(--color-accent);
    font-weight: 700;
}

.btn-schedule {
    width: 100%;
    font-size: 1.05rem;
    padding: 1rem 1.25rem;
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 8px 22px -8px rgba(15, 31, 77, 0.5);
}

.btn-schedule:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -10px rgba(15, 31, 77, 0.6);
}

.schedule-note {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-align: center;
}

.schedule-note a {
    color: var(--color-primary);
    font-weight: 600;
}

/* ===========================
   CTA banner
   =========================== */
.cta-banner {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    color: var(--color-white);
    padding: 4rem 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 30%, rgba(236, 201, 122, 0.15) 0%, transparent 45%);
    pointer-events: none;
}

.cta-banner > * { position: relative; }

.cta-banner h2 {
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.cta-banner h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    background: var(--color-accent);
    margin: 0.85rem auto 1rem;
    border-radius: 2px;
}

.cta-banner p {
    color: rgba(247, 244, 236, 0.88);
    max-width: 620px;
    margin: 0 auto 2rem;
    font-size: 1.05rem;
}

.cta-banner .btn-group { justify-content: center; }

/* ===========================
   Footer
   =========================== */
.site-footer {
    background: var(--color-primary-dark);
    color: rgba(247, 244, 236, 0.78);
    padding: 3rem 1.5rem 1.5rem;
    position: relative;
    border-top: 1px solid var(--color-accent);
}

.footer-grid {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(236, 201, 122, 0.18);
}

.footer-map {
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(236, 201, 122, 0.22);
    margin-bottom: 0.75rem;
    line-height: 0;
}

.footer-map iframe {
    display: block;
    width: 100%;
    height: 180px;
    border: 0;
    filter: grayscale(15%) contrast(0.96);
}

.footer-map-link {
    display: inline-block;
    font-size: 0.9rem;
    color: var(--color-accent-light) !important;
}

.footer-map-link:hover { color: var(--color-white) !important; }

.site-footer h4 {
    color: var(--color-white);
    margin-bottom: 1rem;
    font-size: 1.05rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.site-footer h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background: var(--color-accent);
    border-radius: 2px;
}

.site-footer p { color: rgba(247, 244, 236, 0.78); font-size: 0.93rem; }

.site-footer ul {
    list-style: none;
    padding: 0;
}

.site-footer ul li { margin-bottom: 0.5rem; }

.site-footer a {
    color: rgba(247, 244, 236, 0.78);
    font-size: 0.93rem;
    transition: color 0.2s ease;
}

.site-footer a:hover { color: var(--color-accent-light); }

.footer-bottom {
    max-width: var(--max-width);
    margin: 0 auto;
    padding-top: 1.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: rgba(247, 244, 236, 0.55);
}

.footer-disclaimer {
    margin-top: 0.5rem;
    font-style: italic;
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 880px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }

    .hero { padding: 3rem 1.5rem; }
    .hero h1 { font-size: 2.25rem; }
    .hero-inner { grid-template-columns: 1fr; gap: 2rem; }

    .split { grid-template-columns: 1fr; gap: 2rem; }
    .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-map iframe { height: 220px; }

    .nav-toggle { display: block; }
    .nav-list {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.25rem;
        margin-top: 1rem;
    }
    .nav-list.open { display: flex; }
    .nav-list a { display: block; }
    .nav-cta { margin-left: 0; text-align: center; }

    /* Mobile: Schedule CTA lives in the header bar, not the dropdown menu */
    .nav-container { flex-wrap: wrap; }
    .nav-cta-mobile {
        display: inline-flex;
        align-items: center;
        margin-left: auto;
        padding: 0.5rem 0.95rem;
        border-radius: var(--radius);
        font-weight: 600;
        font-size: 0.92rem;
        line-height: 1.1;
        white-space: nowrap;
        text-decoration: none;
    }
    .nav-item-schedule { display: none; }
}

@media (max-width: 480px) {
    .section { padding: 2.5rem 1rem; }
    .hero { padding: 2.5rem 1rem; }
    .btn { width: 100%; }
    .btn-group { flex-direction: column; }
}

/* ===========================
   Forged Family logo styling
   =========================== */
.brand-logo {
    height: 190px;
    width: auto;
    display: block;
    max-width: 100%;
    object-fit: contain;
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

@media (max-width: 1024px) {
    .brand-logo { height: 150px; }
}

@media (max-width: 768px) {
    .brand-logo { height: 108px; }
}

@media (max-width: 480px) {
    .brand-logo { height: 80px; }
}

/* Footer logo (image variant — restored alongside the brand mark fallback) */
.footer-logo {
    max-width: 220px;
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 1rem;
    border-radius: var(--radius);
    background: var(--color-white);
    padding: 0.5rem 0.65rem;
    box-shadow: 0 0 0 1px rgba(236, 201, 122, 0.4), 0 8px 22px -10px rgba(0, 0, 0, 0.5);
}

/* Hero brand banner — flat, frameless. Photo blends with surroundings. */
.hero-logo-banner {
    background: transparent;
    padding: 2rem 1.5rem;
    text-align: center;
}

.hero-logo-banner-frame {
    max-width: 920px;
    margin: 0 auto;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.hero-logo-banner img {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.hero-logo-banner--photo {
    padding: 2rem 1.5rem;
}

.hero-logo-banner--photo .hero-logo-banner-frame {
    max-width: 460px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.hero-logo-banner--photo .hero-logo-banner-frame img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center 25%;
    border-radius: 0;
}

.hero-logo-banner-tagline {
    margin-top: 1rem;
    color: var(--color-primary-dark);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}

.hero-logo-banner-tagline span {
    display: inline-block;
    padding: 0;
}

/* Refined footer brand mark — typographic, no white-box JPG on dark navy */
.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.1rem;
}

.footer-brand-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    border: 1px solid rgba(236, 201, 122, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-light);
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    box-shadow: inset 0 -10px 20px rgba(15, 31, 77, 0.4);
}

.footer-brand-text {
    line-height: 1.15;
}

.footer-brand-name {
    font-family: var(--font-serif);
    font-weight: 700;
    color: var(--color-white);
    font-size: 1.15rem;
    letter-spacing: 0.01em;
    display: block;
}

.footer-brand-tagline {
    color: var(--color-accent-light);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-top: 0.25rem;
    display: block;
}

/* ===========================
   Portrait card (Christopher headshot)
   =========================== */
.portrait-section {
    background:
        radial-gradient(circle at 100% 0%, rgba(91, 127, 184, 0.10) 0%, transparent 45%),
        var(--color-white);
    padding: 4rem 1.5rem;
}

.portrait-grid {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(260px, 380px) 1fr;
    gap: 3rem;
    align-items: center;
}

.portrait-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-white);
    box-shadow: var(--shadow-portrait);
    aspect-ratio: 4 / 5;
}

.portrait-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Monogram fallback — used when a real headshot has not been added */
.portrait-card--placeholder {
    background:
        radial-gradient(circle at 30% 20%, rgba(91, 127, 184, 0.45) 0%, transparent 55%),
        radial-gradient(circle at 80% 90%, rgba(212, 160, 71, 0.20) 0%, transparent 50%),
        linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
}

.portrait-monogram {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-white);
    padding: 2rem 1.5rem 4.5rem;
}

.portrait-monogram-letters {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 6.5rem;
    line-height: 1;
    color: var(--color-accent-light);
    letter-spacing: 0.02em;
    text-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.portrait-monogram-rule {
    width: 64px;
    height: 2px;
    background: var(--color-accent);
    margin: 1.25rem 0 1rem;
    border-radius: 2px;
}

.portrait-monogram-sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1rem;
    color: rgba(247, 244, 236, 0.92);
    letter-spacing: 0.04em;
}

/* Soft brand-tinted vignette so the portrait reads as part of the page */
.portrait-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(15, 31, 77, 0.25) 100%);
    pointer-events: none;
}

.portrait-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem 1.25rem;
    color: var(--color-white);
    font-family: var(--font-serif);
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    z-index: 1;
}

.portrait-caption strong { display: block; font-weight: 700; font-size: 1rem; }
.portrait-caption span { color: var(--color-accent-light); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; }

.portrait-intro h2 { margin-bottom: 0.5rem; }
.portrait-intro h2::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background: var(--color-accent);
    margin: 0.85rem 0 1rem;
    border-radius: 2px;
}

.portrait-intro .lede {
    font-size: 1.1rem;
    color: var(--color-text);
    line-height: 1.65;
    margin-bottom: 1rem;
}

@media (max-width: 880px) {
    .portrait-grid { grid-template-columns: 1fr; gap: 2rem; }
    .portrait-card { max-width: 360px; margin: 0 auto; }
}

/* ===========================
   Family feature (full-bleed photo with overlay panel)
   =========================== */
.family-feature {
    position: relative;
    padding: 5rem 1.5rem;
    background: var(--color-primary-dark);
    color: var(--color-white);
    overflow: hidden;
    isolation: isolate;
}

/* Photo-less variant — atmospheric brand background only */
.family-feature--no-photo {
    background:
        radial-gradient(circle at 12% 18%, rgba(91, 127, 184, 0.45) 0%, transparent 50%),
        radial-gradient(circle at 88% 82%, rgba(212, 160, 71, 0.18) 0%, transparent 45%),
        linear-gradient(135deg, var(--color-primary-dark) 0%, #142655 60%, var(--color-primary) 100%);
}

.family-feature--no-photo::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 110px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'><path d='M0,110 L0,72 L80,55 L160,68 L240,42 L320,58 L420,30 L520,55 L610,38 L720,62 L820,40 L920,58 L1020,32 L1130,52 L1230,38 L1340,58 L1440,45 L1440,110 Z' fill='%230a1538' opacity='0.55'/><path d='M0,110 L0,90 L120,78 L240,88 L360,72 L480,86 L600,68 L720,82 L840,72 L960,84 L1080,70 L1200,82 L1320,72 L1440,84 L1440,110 Z' fill='%23080f2c' opacity='0.85'/></svg>");
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

.family-feature--no-photo .family-feature-inner { position: relative; z-index: 1; }

.family-feature-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.family-feature-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
}

/* Brand-blue gradient overlay so the photo blends rather than fights */
.family-feature-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(15, 31, 77, 0.92) 0%, rgba(15, 31, 77, 0.65) 45%, rgba(15, 31, 77, 0.25) 75%, rgba(15, 31, 77, 0.55) 100%);
    pointer-events: none;
}

.family-feature-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 540px) 1fr;
    gap: 3rem;
    align-items: center;
}

.family-feature-card {
    background: rgba(15, 31, 77, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 2.25rem 2.25rem 2rem;
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--color-accent);
}

.family-feature-card h2 {
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.family-feature-card h2::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background: var(--color-accent);
    margin: 0.85rem 0 1rem;
    border-radius: 2px;
}

.family-feature-card p {
    color: rgba(247, 244, 236, 0.92);
    font-size: 1.05rem;
    line-height: 1.7;
}

.family-feature-card .signature {
    margin-top: 1rem;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-accent-light);
    font-size: 0.95rem;
}

@media (max-width: 880px) {
    .family-feature-inner { grid-template-columns: 1fr; }
    .family-feature-bg img { object-position: center top; }
    .family-feature { padding: 3.5rem 1.25rem; }
}

/* ===========================
   Decorative gold diamond (echoes logo sparkle)
   =========================== */
.gold-diamond {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    transform: rotate(45deg);
    margin: 0 0.5rem;
    vertical-align: middle;
}

/* ===========================
   Insurance plans marquee (left-to-right scroll)
   =========================== */
.insurance-marquee {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border-soft);
}

.insurance-marquee-eyebrow {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.insurance-marquee-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.insurance-marquee-track {
    display: flex;
    width: max-content;
    gap: 1.25rem;
    padding: 0.5rem 0;
    animation: insurance-scroll 55s linear infinite;
    will-change: transform;
}

.insurance-marquee-track:hover {
    animation-play-state: paused;
}

.insurance-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 88px;
    min-width: 150px;
    padding: 0.85rem 1.75rem;
    background: var(--color-white);
    border: 1px solid var(--color-border-soft);
    border-bottom: 2px solid var(--color-accent);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
    flex-shrink: 0;
    /* Text fallback styling (used only when no <img> child is present) */
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--color-primary-dark);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.insurance-logo-img {
    height: 56px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}

@keyframes insurance-scroll {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .insurance-marquee-track {
        animation: none;
    }
}

@media (max-width: 640px) {
    .insurance-logo {
        font-size: 1.1rem;
        padding: 0.7rem 1.25rem;
        height: 72px;
        min-width: 120px;
    }
    .insurance-logo-img {
        height: 44px;
        max-width: 170px;
    }
    .insurance-marquee-track {
        gap: 0.85rem;
        animation-duration: 42s;
    }
}

/* ============================================================
   Creation & Light — Illuminated Devotional Treatments
   Extends the dawn-behind-mountain hero into the rest of the page.
   Botanical corner ornaments, italic display emphasis, organic
   medallions in place of straight gold rules, per-section atmosphere.
   ============================================================ */

/* --- Italic display emphasis word in every section heading --- */
.section-title em,
.portrait-intro h2 em,
.cta-banner h2 em,
.family-feature-card h2 em,
.section h2 em,
.page-header h1 em,
.schedule-card h2 em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    color: var(--color-accent);
}
.cta-banner h2 em,
.family-feature-card h2 em,
.page-header h1 em {
    color: var(--color-accent-light);
}

/* Page-header (subpages) gets the same Cormorant display voice as the hero */
.page-header h1 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0.005em;
}

/* Subpage banner — dawn behind mountains, scaled down from the hero */
.page-header {
    background:
        radial-gradient(ellipse 46% 50% at 50% 100%,
                       rgba(255, 240, 195, 1.0) 0%,
                       rgba(255, 222, 152, 0.95) 18%,
                       rgba(236, 201, 122, 0.80) 40%,
                       rgba(212, 160, 71, 0.50) 65%,
                       transparent 88%),
        radial-gradient(ellipse 68% 70% at 50% 100%,
                       rgba(236, 201, 122, 0.55) 0%,
                       rgba(212, 160, 71, 0.38) 28%,
                       rgba(196, 127, 94, 0.22) 52%,
                       rgba(91, 127, 184, 0.10) 75%,
                       transparent 92%),
        linear-gradient(180deg,
                       #0a1338 0%,
                       var(--color-primary-dark) 28%,
                       var(--color-primary) 62%,
                       #2a4090 92%,
                       #1a2e6e 100%);
    padding: 4rem 1.5rem 6.5rem;
    isolation: isolate;
}
.page-header::before {
    background: radial-gradient(circle at 82% 18%, rgba(236, 201, 122, 0.14) 0%, transparent 45%);
    z-index: 0;
}
.page-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0,100 L0,55 L80,38 L160,52 L240,28 L320,46 L420,18 L520,40 L610,26 L720,46 L820,28 L920,42 L1020,18 L1130,38 L1230,24 L1340,42 L1440,30 L1440,100 Z' fill='%2308102e' opacity='0.80'/><path d='M0,100 L0,75 L120,62 L240,72 L360,55 L480,68 L600,48 L720,64 L840,55 L960,68 L1080,52 L1200,64 L1320,55 L1440,66 L1440,100 Z' fill='%23050920'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}
.page-header > * {
    position: relative;
    z-index: 2;
}

/* --- Organic botanical medallion under headings (replaces flat gold rule) --- */
.section-title::after,
.portrait-intro h2::after,
.cta-banner h2::after,
.family-feature-card h2::after,
.section h2:not(.section-title)::after,
.page-header h1::after,
.schedule-card h2::after {
    content: "";
    display: block;
    width: 110px;
    height: 18px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 18' fill='none'><line x1='3' y1='9' x2='36' y2='9' stroke='%23d4a047' stroke-width='1.5' stroke-linecap='round'/><line x1='74' y1='9' x2='107' y2='9' stroke='%23d4a047' stroke-width='1.5' stroke-linecap='round'/><ellipse cx='46' cy='6' rx='6' ry='2.8' transform='rotate(-22 46 6)' fill='%238a9a7b' fill-opacity='0.8'/><ellipse cx='64' cy='12' rx='6' ry='2.8' transform='rotate(22 64 12)' fill='%238a9a7b' fill-opacity='0.8'/><circle cx='55' cy='9' r='2.8' fill='%23d4a047'/></svg>") no-repeat center / contain;
    border-radius: 0;
    margin: 1rem auto 0.5rem;
}
.portrait-intro h2::after,
.family-feature-card h2::after,
.section h2:not(.section-title)::after,
.schedule-card h2::after {
    margin: 1rem 0 0.5rem;
}
/* Lighter-gold variant of the medallion for use on navy backgrounds */
.cta-banner h2::after,
.family-feature-card h2::after,
.page-header h1::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 18' fill='none'><line x1='3' y1='9' x2='36' y2='9' stroke='%23ecc97a' stroke-width='1.5' stroke-linecap='round'/><line x1='74' y1='9' x2='107' y2='9' stroke='%23ecc97a' stroke-width='1.5' stroke-linecap='round'/><ellipse cx='46' cy='6' rx='6' ry='2.8' transform='rotate(-22 46 6)' fill='%23ecc97a' fill-opacity='0.55'/><ellipse cx='64' cy='12' rx='6' ry='2.8' transform='rotate(22 64 12)' fill='%23ecc97a' fill-opacity='0.55'/><circle cx='55' cy='9' r='2.8' fill='%23ecc97a'/></svg>");
}

/* --- Small botanical motif ABOVE each section heading --- */
.section-title::before,
.portrait-intro h2::before,
.cta-banner h2::before,
.family-feature-card h2::before {
    content: "";
    display: block;
    width: 38px;
    height: 38px;
    margin: 0 auto 0.6rem;
    background: no-repeat center / contain;
    opacity: 0.9;
}
.section-title::before {
    /* Sun rising — for the cream "Care Built on Listening First" section */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23d4a047' stroke-width='2' stroke-linecap='round'><circle cx='40' cy='42' r='9' fill='%23ecc97a' fill-opacity='0.55'/><line x1='40' y1='10' x2='40' y2='22'/><line x1='40' y1='62' x2='40' y2='70'/><line x1='8' y1='42' x2='20' y2='42'/><line x1='60' y1='42' x2='72' y2='42'/><line x1='17' y1='19' x2='26' y2='28'/><line x1='54' y1='56' x2='63' y2='65'/><line x1='63' y1='19' x2='54' y2='28'/><line x1='26' y1='56' x2='17' y2='65'/></svg>");
}
.portrait-intro h2::before {
    /* Rooted tree — grounding for "My Story" */
    margin: 0 0 0.5rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%235e6f57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M40 70 L 40 36'/><circle cx='40' cy='20' r='8' fill='%238a9a7b' fill-opacity='0.5'/><ellipse cx='28' cy='12' rx='6' ry='4' transform='rotate(-25 28 12)' fill='%238a9a7b' fill-opacity='0.45'/><ellipse cx='52' cy='12' rx='6' ry='4' transform='rotate(25 52 12)' fill='%238a9a7b' fill-opacity='0.45'/></svg>");
}
.family-feature-card h2::before {
    /* Star + olive branch (twilight) — for "Why I Do This Work" */
    margin: 0 0 0.5rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23ecc97a' stroke-width='1.6' stroke-linecap='round'><path d='M40 14 L42 32 L60 34 L42 36 L40 54 L38 36 L20 34 L38 32 Z' fill='%23ecc97a' fill-opacity='0.5'/><path d='M14 64 Q 35 58, 58 64' stroke-opacity='0.75'/><ellipse cx='26' cy='61' rx='6' ry='2.5' transform='rotate(-18 26 61)' fill='%238a9a7b' fill-opacity='0.45'/><ellipse cx='44' cy='61' rx='6' ry='2.5' transform='rotate(18 44 61)' fill='%238a9a7b' fill-opacity='0.45'/></svg>");
}
.cta-banner h2::before {
    /* Dawn rays cresting a horizon — for "Ready to Take the Next Step?" */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23ecc97a' stroke-width='1.6' stroke-linecap='round'><path d='M4 60 Q 22 56, 40 56 T 76 60' stroke-opacity='0.7'/><circle cx='40' cy='52' r='7' fill='%23ecc97a' fill-opacity='0.55'/><line x1='40' y1='22' x2='40' y2='38'/><line x1='22' y1='30' x2='30' y2='42'/><line x1='58' y1='30' x2='50' y2='42'/><line x1='12' y1='44' x2='22' y2='48'/><line x1='68' y1='44' x2='58' y2='48'/></svg>");
}

/* Wheat sheaf motif above "Specializing in Those Who Care for Others" — caring for many / community / harvest */
.section.section-light .split h2 {
    position: relative;
}
.section.section-light .split h2::before {
    content: "";
    display: block;
    width: 38px;
    height: 38px;
    margin: 0 0 0.5rem;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%235e6f57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M40 70 L 40 16'/><ellipse cx='32' cy='22' rx='3.5' ry='6' transform='rotate(-22 32 22)' fill='%23d4a047' fill-opacity='0.55'/><ellipse cx='48' cy='22' rx='3.5' ry='6' transform='rotate(22 48 22)' fill='%23d4a047' fill-opacity='0.55'/><ellipse cx='30' cy='34' rx='3.5' ry='6' transform='rotate(-22 30 34)' fill='%23d4a047' fill-opacity='0.55'/><ellipse cx='50' cy='34' rx='3.5' ry='6' transform='rotate(22 50 34)' fill='%23d4a047' fill-opacity='0.55'/><ellipse cx='30' cy='46' rx='3.5' ry='6' transform='rotate(-22 30 46)' fill='%23d4a047' fill-opacity='0.55'/><ellipse cx='50' cy='46' rx='3.5' ry='6' transform='rotate(22 50 46)' fill='%23d4a047' fill-opacity='0.55'/></svg>") no-repeat center / contain;
    opacity: 0.9;
}

/* --- "Care Built on Listening First" (cream) — corner watermarks (midday field) --- */
.section.section-tinted {
    position: relative;
    overflow: hidden;
}
.section.section-tinted::before {
    /* Olive branch arching in from top-left */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 260px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' fill='none' stroke='%235e6f57' stroke-width='1.4' stroke-linecap='round'><path d='M -5 -5 C 45 30, 80 65, 130 110 S 175 165, 195 200' opacity='0.55'/><ellipse cx='28' cy='18' rx='11' ry='4' transform='rotate(-30 28 18)' fill='%238a9a7b' fill-opacity='0.40'/><ellipse cx='52' cy='42' rx='12' ry='4' transform='rotate(-40 52 42)' fill='%238a9a7b' fill-opacity='0.40'/><ellipse cx='78' cy='68' rx='13' ry='5' transform='rotate(-50 78 68)' fill='%238a9a7b' fill-opacity='0.40'/><ellipse cx='108' cy='95' rx='12' ry='4' transform='rotate(-58 108 95)' fill='%238a9a7b' fill-opacity='0.40'/><ellipse cx='138' cy='128' rx='12' ry='4' transform='rotate(-65 138 128)' fill='%238a9a7b' fill-opacity='0.38'/><ellipse cx='165' cy='160' rx='11' ry='4' transform='rotate(-70 165 160)' fill='%238a9a7b' fill-opacity='0.38'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}
.section.section-tinted::after {
    /* Wheat sheaf in bottom-right */
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 240px;
    height: 260px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240' fill='none' stroke='%235e6f57' stroke-width='1.4' stroke-linecap='round'><path d='M 100 235 L 100 80' opacity='0.55'/><path d='M 130 235 L 132 115' opacity='0.50'/><path d='M 70 235 L 68 115' opacity='0.50'/><ellipse cx='86' cy='100' rx='4.5' ry='9' transform='rotate(-25 86 100)' fill='%23d4a047' fill-opacity='0.45'/><ellipse cx='114' cy='100' rx='4.5' ry='9' transform='rotate(25 114 100)' fill='%23d4a047' fill-opacity='0.45'/><ellipse cx='86' cy='124' rx='4.5' ry='9' transform='rotate(-25 86 124)' fill='%23d4a047' fill-opacity='0.45'/><ellipse cx='114' cy='124' rx='4.5' ry='9' transform='rotate(25 114 124)' fill='%23d4a047' fill-opacity='0.45'/><ellipse cx='86' cy='148' rx='4.5' ry='9' transform='rotate(-25 86 148)' fill='%23d4a047' fill-opacity='0.45'/><ellipse cx='114' cy='148' rx='4.5' ry='9' transform='rotate(25 114 148)' fill='%23d4a047' fill-opacity='0.45'/><ellipse cx='58' cy='130' rx='4' ry='8' transform='rotate(-25 58 130)' fill='%23d4a047' fill-opacity='0.38'/><ellipse cx='142' cy='130' rx='4' ry='8' transform='rotate(25 142 130)' fill='%23d4a047' fill-opacity='0.38'/><ellipse cx='58' cy='152' rx='4' ry='8' transform='rotate(-25 58 152)' fill='%23d4a047' fill-opacity='0.38'/><ellipse cx='142' cy='152' rx='4' ry='8' transform='rotate(25 142 152)' fill='%23d4a047' fill-opacity='0.38'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
    pointer-events: none;
    z-index: 0;
}
.section.section-tinted > .container {
    position: relative;
    z-index: 1;
}

/* --- "Specializing in Those Who Care for Others" (white) — corner vine ornaments (quiet grove) --- */
.section.section-light {
    position: relative;
    overflow: hidden;
}
.section.section-light::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 220px;
    height: 220px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%235e6f57' stroke-width='1.4' stroke-linecap='round'><path d='M -5 -5 C 35 35, 55 70, 70 90 S 105 130, 130 175' opacity='0.45'/><ellipse cx='25' cy='25' rx='9' ry='3.5' transform='rotate(-30 25 25)' fill='%238a9a7b' fill-opacity='0.32'/><ellipse cx='52' cy='58' rx='10' ry='4' transform='rotate(-45 52 58)' fill='%238a9a7b' fill-opacity='0.32'/><ellipse cx='82' cy='95' rx='11' ry='4' transform='rotate(-50 82 95)' fill='%238a9a7b' fill-opacity='0.32'/><ellipse cx='112' cy='132' rx='11' ry='4' transform='rotate(-55 112 132)' fill='%238a9a7b' fill-opacity='0.32'/><circle cx='15' cy='15' r='2.5' fill='%23d4a047' fill-opacity='0.55'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}
.section.section-light::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 220px;
    height: 220px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%235e6f57' stroke-width='1.4' stroke-linecap='round'><path d='M 205 -5 C 165 35, 145 70, 130 90 S 95 130, 70 175' opacity='0.45'/><ellipse cx='175' cy='25' rx='9' ry='3.5' transform='rotate(30 175 25)' fill='%238a9a7b' fill-opacity='0.32'/><ellipse cx='148' cy='58' rx='10' ry='4' transform='rotate(45 148 58)' fill='%238a9a7b' fill-opacity='0.32'/><ellipse cx='118' cy='95' rx='11' ry='4' transform='rotate(50 118 95)' fill='%238a9a7b' fill-opacity='0.32'/><ellipse cx='88' cy='132' rx='11' ry='4' transform='rotate(55 88 132)' fill='%238a9a7b' fill-opacity='0.32'/><circle cx='185' cy='15' r='2.5' fill='%23d4a047' fill-opacity='0.55'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}
.section.section-light > .container {
    position: relative;
    z-index: 1;
}

/* --- Portrait section (white) — sage/dawn corner radial replaces cool blue; vine flourish --- */
.portrait-section {
    background:
        radial-gradient(circle at 100% 0%, rgba(138, 154, 123, 0.20) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(212, 160, 71, 0.12) 0%, transparent 45%),
        var(--color-white);
    position: relative;
    overflow: hidden;
}
.portrait-section::before {
    /* Trailing vine arching from upper-right (the corner the sage radial sits in) */
    content: "";
    position: absolute;
    top: -20px;
    right: -30px;
    width: 280px;
    height: 280px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 280' fill='none' stroke='%235e6f57' stroke-width='1.4' stroke-linecap='round'><path d='M 275 0 C 220 30, 170 70, 130 120 S 70 210, 50 270' opacity='0.4'/><ellipse cx='240' cy='30' rx='11' ry='4' transform='rotate(35 240 30)' fill='%238a9a7b' fill-opacity='0.32'/><ellipse cx='200' cy='60' rx='12' ry='4' transform='rotate(40 200 60)' fill='%238a9a7b' fill-opacity='0.32'/><ellipse cx='165' cy='95' rx='12' ry='4' transform='rotate(50 165 95)' fill='%238a9a7b' fill-opacity='0.32'/><ellipse cx='130' cy='140' rx='13' ry='4' transform='rotate(60 130 140)' fill='%238a9a7b' fill-opacity='0.32'/><ellipse cx='95' cy='190' rx='12' ry='4' transform='rotate(70 95 190)' fill='%238a9a7b' fill-opacity='0.32'/><circle cx='270' cy='10' r='3' fill='%23d4a047' fill-opacity='0.6'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}
.portrait-grid {
    position: relative;
    z-index: 1;
}

/* Soft gold glow tucked under the portrait card (echoes the dawn-light story) */
.portrait-card {
    box-shadow: var(--shadow-portrait), 0 0 0 1px rgba(212, 160, 71, 0.4), 0 24px 50px -22px rgba(212, 160, 71, 0.45);
}

/* --- Info block redesigned as illuminated pull-quote --- */
.portrait-intro .info-block,
.info-block {
    background: linear-gradient(135deg, var(--color-sage-soft) 0%, var(--color-dawn-ivory) 100%);
    border-left: 4px solid var(--color-sage-deep);
    padding: 1.5rem 1.85rem;
    position: relative;
}
.portrait-intro .info-block::before,
.info-block::before {
    content: "";
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 28px;
    height: 28px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%235e6f57' stroke-width='1.8' stroke-linecap='round'><path d='M14 66 C 30 56, 50 42, 66 22' opacity='0.7'/><ellipse cx='28' cy='56' rx='8' ry='3' transform='rotate(-30 28 56)' fill='%238a9a7b' fill-opacity='0.55'/><ellipse cx='44' cy='42' rx='8' ry='3' transform='rotate(-40 44 42)' fill='%238a9a7b' fill-opacity='0.55'/><ellipse cx='58' cy='30' rx='7' ry='3' transform='rotate(-50 58 30)' fill='%238a9a7b' fill-opacity='0.55'/></svg>") no-repeat center / contain;
    opacity: 0.7;
    pointer-events: none;
}
/* Only the LEADING strong (the "label" introducing the pull quote) gets the italic display
   treatment. Other strongs inside the info-block (e.g. "988", "911", "24 hours' notice")
   keep their normal bold styling so critical info stays readable. */
.portrait-intro .info-block > strong:first-of-type,
.info-block > strong:first-of-type {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    color: var(--color-sage-deep);
    font-size: 1.2rem;
    display: inline-block;
    margin-right: 0.35rem;
}

/* --- Cards: dawn gradient + soft sage top accent line --- */
.card {
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-dawn-ivory) 100%);
    position: relative;
}
.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14%;
    right: 14%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-sage), transparent);
    border-radius: 2px;
    opacity: 0.65;
}

/* --- Pill list: soft sage/cream gradient --- */
.pill-list li {
    background: linear-gradient(135deg, var(--color-white) 0%, var(--color-sage-soft) 100%);
    border-color: var(--color-sage-soft);
}
.pill-list li:hover {
    background: linear-gradient(135deg, var(--color-cream) 0%, var(--color-sage-soft) 100%);
    border-color: var(--color-accent);
}

/* --- Family photo banner (white) — morning-garden treatment with gold corner frames --- */
.hero-logo-banner.hero-logo-banner--photo {
    background:
        radial-gradient(ellipse at top, var(--color-dawn-ivory) 0%, var(--color-cream) 55%, transparent 100%),
        var(--color-white);
    padding-top: 3rem;
    padding-bottom: 2.5rem;
    position: relative;
}
.hero-logo-banner.hero-logo-banner--photo .hero-logo-banner-frame {
    position: relative;
    box-shadow: 0 10px 32px rgba(15, 31, 77, 0.15), 0 0 0 1px rgba(212, 160, 71, 0.35);
}
.hero-logo-banner.hero-logo-banner--photo .hero-logo-banner-frame::before {
    content: "";
    position: absolute;
    top: -18px;
    left: -18px;
    width: 64px;
    height: 64px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23d4a047' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M 4 60 C 14 38, 28 26, 52 18' opacity='0.85'/><path d='M 4 60 C 14 44, 30 34, 56 30' opacity='0.55'/><ellipse cx='20' cy='40' rx='7' ry='3' transform='rotate(-30 20 40)' fill='%23d4a047' fill-opacity='0.5'/><ellipse cx='34' cy='28' rx='7' ry='3' transform='rotate(-20 34 28)' fill='%23d4a047' fill-opacity='0.5'/><circle cx='56' cy='18' r='2.8' fill='%23d4a047'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    pointer-events: none;
}
.hero-logo-banner.hero-logo-banner--photo .hero-logo-banner-frame::after {
    content: "";
    position: absolute;
    top: -18px;
    right: -18px;
    width: 64px;
    height: 64px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23d4a047' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M 76 60 C 66 38, 52 26, 28 18' opacity='0.85'/><path d='M 76 60 C 66 44, 50 34, 24 30' opacity='0.55'/><ellipse cx='60' cy='40' rx='7' ry='3' transform='rotate(30 60 40)' fill='%23d4a047' fill-opacity='0.5'/><ellipse cx='46' cy='28' rx='7' ry='3' transform='rotate(20 46 28)' fill='%23d4a047' fill-opacity='0.5'/><circle cx='24' cy='18' r='2.8' fill='%23d4a047'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    pointer-events: none;
}
.hero-logo-banner-tagline {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--color-sage-deep);
    font-size: 1.15rem;
    position: relative;
    padding-top: 1.5rem;
}
.hero-logo-banner-tagline::before {
    content: "";
    display: block;
    width: 96px;
    height: 16px;
    margin: 0 auto 0.65rem;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 16' fill='none'><line x1='2' y1='8' x2='30' y2='8' stroke='%23d4a047' stroke-width='1.3' stroke-linecap='round'/><line x1='66' y1='8' x2='94' y2='8' stroke='%23d4a047' stroke-width='1.3' stroke-linecap='round'/><ellipse cx='40' cy='6' rx='5' ry='2.5' transform='rotate(-22 40 6)' fill='%238a9a7b' fill-opacity='0.7'/><ellipse cx='56' cy='10' rx='5' ry='2.5' transform='rotate(22 56 10)' fill='%238a9a7b' fill-opacity='0.7'/><circle cx='48' cy='8' r='2.4' fill='%23d4a047'/></svg>") no-repeat center / contain;
}

/* --- Family feature — dawn behind mountains (mountains were already present via the
   element's existing ::before; sunrise sits in the element background so the mountains
   visually contain it and the light reads as "behind" the ridge) --- */
.family-feature.family-feature--no-photo {
    background:
        radial-gradient(ellipse 46% 45% at 50% 100%,
                       rgba(255, 240, 195, 1.0) 0%,
                       rgba(255, 222, 152, 0.95) 18%,
                       rgba(236, 201, 122, 0.78) 40%,
                       rgba(212, 160, 71, 0.48) 65%,
                       transparent 88%),
        radial-gradient(ellipse 68% 62% at 50% 100%,
                       rgba(236, 201, 122, 0.50) 0%,
                       rgba(212, 160, 71, 0.34) 28%,
                       rgba(196, 127, 94, 0.20) 52%,
                       transparent 90%),
        linear-gradient(180deg,
                       #0a1338 0%,
                       var(--color-primary-dark) 28%,
                       var(--color-primary) 62%,
                       #2a4090 92%,
                       #1a2e6e 100%);
    isolation: isolate;
}

/* --- CTA banner — dawn behind mountains (same family as the hero, scaled down) --- */
.cta-banner {
    background:
        radial-gradient(ellipse 46% 50% at 50% 100%,
                       rgba(255, 240, 195, 1.0) 0%,
                       rgba(255, 222, 152, 0.95) 18%,
                       rgba(236, 201, 122, 0.80) 40%,
                       rgba(212, 160, 71, 0.50) 65%,
                       transparent 88%),
        radial-gradient(ellipse 68% 70% at 50% 100%,
                       rgba(236, 201, 122, 0.55) 0%,
                       rgba(212, 160, 71, 0.38) 28%,
                       rgba(196, 127, 94, 0.22) 52%,
                       rgba(91, 127, 184, 0.10) 75%,
                       transparent 92%),
        linear-gradient(180deg,
                       #0a1338 0%,
                       var(--color-primary-dark) 28%,
                       var(--color-primary) 62%,
                       #2a4090 92%,
                       #1a2e6e 100%);
    padding: 4rem 1.5rem 7rem;
    isolation: isolate;
}
.cta-banner::before {
    background: radial-gradient(circle at 82% 18%, rgba(236, 201, 122, 0.14) 0%, transparent 45%);
    z-index: 0;
}
.cta-banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0,100 L0,55 L80,38 L160,52 L240,28 L320,46 L420,18 L520,40 L610,26 L720,46 L820,28 L920,42 L1020,18 L1130,38 L1230,24 L1340,42 L1440,30 L1440,100 Z' fill='%2308102e' opacity='0.80'/><path d='M0,100 L0,75 L120,62 L240,72 L360,55 L480,68 L600,48 L720,64 L840,55 L960,68 L1080,52 L1200,64 L1320,55 L1440,66 L1440,100 Z' fill='%23050920'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}
.cta-banner > * {
    position: relative;
    z-index: 2;
}

/* --- Split feature panel (Conditions Treated) — sage corner mark --- */
.split-feature {
    position: relative;
    overflow: hidden;
}
.split-feature::after {
    content: "";
    position: absolute;
    top: -8px;
    right: -8px;
    width: 90px;
    height: 90px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%235e6f57' stroke-width='1.4' stroke-linecap='round'><path d='M 76 4 C 60 18, 48 28, 38 42' opacity='0.55'/><ellipse cx='66' cy='10' rx='6' ry='2.5' transform='rotate(40 66 10)' fill='%238a9a7b' fill-opacity='0.45'/><ellipse cx='52' cy='22' rx='7' ry='2.8' transform='rotate(45 52 22)' fill='%238a9a7b' fill-opacity='0.45'/><circle cx='38' cy='42' r='2' fill='%23d4a047' fill-opacity='0.65'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}
.split-feature > * { position: relative; z-index: 1; }

/* --- Nearby Areas grid (contact page) — three groups: Cities / Counties / Zips --- */
.area-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin: 2rem auto 0;
    max-width: 720px;
}
.area-group {
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-dawn-ivory) 100%);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.25rem;
    border: 1px solid var(--color-sage-soft);
    border-top: 3px solid var(--color-accent);
    box-shadow: var(--shadow-soft);
    text-align: center;
}
.area-label {
    font-family: var(--font-display);
    font-weight: 500;
    font-style: italic;
    color: var(--color-sage-deep);
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    margin: 0 0 0.85rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--color-sage-soft);
}
.area-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.area-list li {
    padding: 0.5rem 0;
    color: var(--color-primary-dark);
    font-weight: 500;
    font-size: 0.95rem;
    border-bottom: 1px dashed rgba(216, 224, 207, 0.6);
}
.area-list li:last-child { border-bottom: none; }

@media (max-width: 640px) {
    .area-grid { grid-template-columns: 1fr; max-width: 360px; }
}

/* --- Mobile: shrink corner watermarks so they don't crowd content --- */
@media (max-width: 720px) {
    .section.section-tinted::before,
    .section.section-tinted::after,
    .section.section-light::before,
    .section.section-light::after,
    .portrait-section::before {
        width: 140px;
        height: 140px;
        opacity: 0.55;
    }
}

/* ============================================================
   Faith-Forward Ambient Background — "Illuminated Margin"
   Lives behind every page section as an omnipresent quiet layer:
   - Scattered olive-leaf pairs (peace, growth, garden)
   - A trailing vine scroll (continuity, life)
   - Tiny gold light-motes (illuminated-manuscript dust;
     reads as sunbeam particles, never as religious symbol)
   Strictly no crosses, doves, stars-of-David, fish, chalices.
   Every motif has a secular reading: nature & light.
   ============================================================ */

:root {
    --tile-faith:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280' fill='none'><g opacity='0.55'><path d='M 235 28 Q 195 60, 162 100 T 88 188' stroke='%235e6f57' stroke-width='0.7' stroke-linecap='round' fill='none' opacity='0.35'/><ellipse cx='215' cy='44' rx='5.5' ry='2.2' transform='rotate(-30 215 44)' fill='%238a9a7b' opacity='0.28'/><ellipse cx='192' cy='70' rx='5.5' ry='2.2' transform='rotate(-40 192 70)' fill='%238a9a7b' opacity='0.28'/><ellipse cx='166' cy='100' rx='5.5' ry='2.2' transform='rotate(-50 166 100)' fill='%238a9a7b' opacity='0.28'/><ellipse cx='130' cy='138' rx='5' ry='2' transform='rotate(-58 130 138)' fill='%238a9a7b' opacity='0.28'/></g><g opacity='0.32'><ellipse cx='42' cy='58' rx='5.5' ry='2.2' transform='rotate(-25 42 58)' fill='%238a9a7b'/><ellipse cx='55' cy='55' rx='5.5' ry='2.2' transform='rotate(25 55 55)' fill='%238a9a7b'/></g><g opacity='0.32'><ellipse cx='240' cy='208' rx='5.5' ry='2.2' transform='rotate(-25 240 208)' fill='%238a9a7b'/><ellipse cx='253' cy='205' rx='5.5' ry='2.2' transform='rotate(25 253 205)' fill='%238a9a7b'/></g><g opacity='0.28'><ellipse cx='66' cy='236' rx='5' ry='2' transform='rotate(-20 66 236)' fill='%238a9a7b'/><ellipse cx='79' cy='234' rx='5' ry='2' transform='rotate(20 79 234)' fill='%238a9a7b'/></g><circle cx='95' cy='86' r='1.5' fill='%23d4a047' opacity='0.65'/><circle cx='198' cy='160' r='1.7' fill='%23d4a047' opacity='0.70'/><circle cx='32' cy='172' r='1.3' fill='%23d4a047' opacity='0.60'/><circle cx='214' cy='102' r='1.4' fill='%23d4a047' opacity='0.65'/><circle cx='138' cy='214' r='1.2' fill='%23d4a047' opacity='0.60'/><circle cx='262' cy='70' r='1' fill='%23d4a047' opacity='0.55'/><circle cx='118' cy='42' r='1' fill='%23d4a047' opacity='0.55'/><circle cx='172' cy='258' r='1.2' fill='%23d4a047' opacity='0.60'/><circle cx='16' cy='118' r='1.1' fill='%23d4a047' opacity='0.55'/><circle cx='110' cy='176' r='0.9' fill='%23d4a047' opacity='0.50'/></svg>");
}

/* Body: cream base + ambient illuminated-margin tile */
body {
    background-color: var(--color-cream);
    background-image: var(--tile-faith);
    background-repeat: repeat;
    background-position: top left;
}

/* Soft viewport-top dawn glow that stays gently in place as you scroll.
   Pointer-events: none keeps it purely decorative. Z-index sits below
   site-header (z:100) and all positioned content but above body bg. */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 38vh;
    background:
        radial-gradient(ellipse 70% 100% at 50% 0%,
                       rgba(255, 232, 175, 0.12) 0%,
                       rgba(236, 201, 122, 0.06) 35%,
                       transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Re-state section backgrounds to LAYER the faith tile above their base
   color, so the same illuminated dust threads through every section.
   We deliberately do NOT touch .hero/.page-header/.cta-banner/
   .family-feature — those are statement panels with their own dawn
   atmosphere; adding tile there would muddy the sunrise. */
.section-tinted {
    background: var(--tile-faith) repeat top left, var(--color-cream-dark);
}
.section-light {
    background: var(--tile-faith) repeat top left, var(--color-white);
}
.portrait-section {
    background:
        var(--tile-faith) repeat top left,
        radial-gradient(circle at 100% 0%, rgba(138, 154, 123, 0.20) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(212, 160, 71, 0.12) 0%, transparent 45%),
        var(--color-white);
}
.hero-logo-banner.hero-logo-banner--photo {
    background:
        var(--tile-faith) repeat top left,
        radial-gradient(ellipse at top, var(--color-dawn-ivory) 0%, var(--color-cream) 55%, transparent 100%),
        var(--color-white);
}

/* Make sure site content sits above the fixed dawn glow */
.site-header,
.hero,
.page-header,
.section,
.portrait-section,
.family-feature,
.cta-banner,
.hero-logo-banner,
.site-footer {
    position: relative;
    z-index: 1;
}
.site-header { z-index: 100; }

/* ============================================================
   Section enrichments — additive blocks that fit the existing
   design language (illuminated card, sage divider, gold spark).
   ============================================================ */

/* Illuminated panel — a softer, faith-forward content block.
   Used for "What Your First Visit Looks Like", "What's Always
   Included", "After You Reach Out" etc. Sits inside any section. */
.illumined-panel {
    margin-top: 3rem;
    background:
        radial-gradient(circle at 12% 8%, rgba(212, 160, 71, 0.10) 0%, transparent 40%),
        radial-gradient(circle at 88% 92%, rgba(138, 154, 123, 0.12) 0%, transparent 45%),
        linear-gradient(180deg, var(--color-white) 0%, var(--color-dawn-ivory) 100%);
    border-radius: var(--radius-lg);
    padding: 2.25rem 2.25rem 2rem;
    border: 1px solid var(--color-sage-soft);
    box-shadow: var(--shadow-soft), 0 0 0 1px rgba(212, 160, 71, 0.18);
    position: relative;
    overflow: hidden;
}

.illumined-panel::before {
    /* Tiny dawn spark in upper-right — echoes the illuminated motif */
    content: "";
    position: absolute;
    top: 18px;
    right: 22px;
    width: 28px;
    height: 28px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'><circle cx='20' cy='20' r='4' fill='%23d4a047' fill-opacity='0.55'/><line x1='20' y1='4' x2='20' y2='10' stroke='%23d4a047' stroke-width='1.4' stroke-linecap='round' opacity='0.7'/><line x1='20' y1='30' x2='20' y2='36' stroke='%23d4a047' stroke-width='1.4' stroke-linecap='round' opacity='0.7'/><line x1='4' y1='20' x2='10' y2='20' stroke='%23d4a047' stroke-width='1.4' stroke-linecap='round' opacity='0.7'/><line x1='30' y1='20' x2='36' y2='20' stroke='%23d4a047' stroke-width='1.4' stroke-linecap='round' opacity='0.7'/><line x1='9' y1='9' x2='13' y2='13' stroke='%23d4a047' stroke-width='1.2' stroke-linecap='round' opacity='0.55'/><line x1='27' y1='27' x2='31' y2='31' stroke='%23d4a047' stroke-width='1.2' stroke-linecap='round' opacity='0.55'/><line x1='31' y1='9' x2='27' y2='13' stroke='%23d4a047' stroke-width='1.2' stroke-linecap='round' opacity='0.55'/><line x1='13' y1='27' x2='9' y2='31' stroke='%23d4a047' stroke-width='1.2' stroke-linecap='round' opacity='0.55'/></svg>") no-repeat center / contain;
    pointer-events: none;
    opacity: 0.85;
}

.illumined-panel h3 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    color: var(--color-sage-deep);
    font-size: 1.5rem;
    margin-bottom: 0.35rem;
}

.illumined-panel h3 + p,
.illumined-panel > p:first-of-type {
    color: var(--color-text-muted);
    margin-bottom: 1.25rem;
}

.illumined-panel .check-list li {
    color: var(--color-primary-dark);
    font-weight: 500;
}

/* "First visit signposts" — a 3-step mini-flow inside an illumined panel */
.signpost-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.signpost {
    text-align: left;
    padding: 0.25rem 0;
    border-left: 2px solid var(--color-sage-soft);
    padding-left: 1rem;
}

.signpost-step {
    display: inline-block;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    color: var(--color-accent);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.signpost h4 {
    color: var(--color-primary-dark);
    margin-bottom: 0.35rem;
    font-size: 1.05rem;
}

.signpost p {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    margin: 0;
    line-height: 1.55;
}

@media (max-width: 720px) {
    .signpost-row { grid-template-columns: 1fr; gap: 1rem; }
}

/* "Guiding values" inline chip-row — used inside the family-feature card.
   Reads as gentle illuminated-margin annotations, not boasts. */
.value-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(236, 201, 122, 0.25);
}

.value-chips li {
    list-style: none;
    background: rgba(236, 201, 122, 0.15);
    color: var(--color-accent-light);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    border: 1px solid rgba(236, 201, 122, 0.35);
}

/* "Honest note" — a small humble panel for "When this practice may not
   be the best fit". Sage-bordered, low-volume. */
.honest-note {
    margin-top: 2.5rem;
    background: linear-gradient(180deg, var(--color-dawn-ivory) 0%, var(--color-white) 100%);
    border: 1px dashed var(--color-sage);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    position: relative;
}

.honest-note h4 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    color: var(--color-sage-deep);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.honest-note p {
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0;
}

.honest-note p + p { margin-top: 0.75rem; }

/* Tip-list — used for "Tips for verifying benefits" */
.tip-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    counter-reset: tip;
}

.tip-list li {
    counter-increment: tip;
    position: relative;
    padding: 0.75rem 0 0.75rem 2.75rem;
    border-bottom: 1px solid var(--color-border-soft);
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.6;
}

.tip-list li:last-child { border-bottom: none; }

.tip-list li::before {
    content: counter(tip);
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-sage-soft) 0%, var(--color-dawn-ivory) 100%);
    color: var(--color-sage-deep);
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* Small lede-tag eyebrow for new sub-sections */
.lede-tag {
    display: inline-block;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    color: var(--color-accent);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}

/* ============================================================
   Ambient Light — Sunlit Dust-Mote Canvas
   A full-viewport fixed canvas that drifts gold light-motes
   behind every page. They glow strongest on the dark navy
   sections (hero, page-header, CTA, family-feature) and are
   barely-there over the cream sections — exactly the way
   real sunbeam dust behaves through a window.
   The cursor gently parts the motes around itself; they
   drift back into place when you move on. No religious
   symbols — reads as warm sunlight, "your light", or simply
   the quiet beauty of dust in a morning beam.
   ============================================================ */

.ambient-light {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    /* Float ABOVE section backgrounds (z:1) so the screen blend
       can light up navy panels. Stays BELOW the site header (z:100)
       and below the mobile nav menu so legibility never suffers. */
    z-index: 5;
    /* Screen blend: gold sparks lighten anything beneath without
       darkening cream sections. Falls back to normal on browsers
       that don't support it. */
    mix-blend-mode: screen;
    opacity: 0.95;
}

/* Honor users who prefer no animation: the canvas still draws
   a quiet, static field but never moves. JS reads the same media
   query and skips the animation loop. */
@media (prefers-reduced-motion: reduce) {
    .ambient-light { opacity: 0.5; }
}

/* ------------------------------------------------------------
   Ambient Garden — sage petals & gold seeds trailing the cursor.
   The natural counterpart to .ambient-light:
     - ambient-light  uses SCREEN blend -> gold glows on dark, no-op on light
     - ambient-garden uses DARKEN blend -> sage/gold show on light, vanish on dark
       (per-channel min: sage(138,154,123) loses to navy(15,31,77) on every
        channel except slightly close on blue, so leaves disappear into
        the dark panels)
   Together they cover every surface without ever overlapping.
   ------------------------------------------------------------ */
.ambient-garden {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: darken;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .ambient-garden { display: none; }
}

/* ------------------------------------------------------------
   Living Botanical Corners
   Wakes up the existing corner ornaments (olive branch, wheat
   sheaf, vine scrolls) so they sway and gently lean toward the
   cursor when it's near. CSS holds the variables and the
   transitions; JS updates the variables only.

   Each ornament uses its own anchor corner as transform-origin
   so rotation pivots from the corner where the ornament "grows"
   from, the same way a real plant would respond to a breeze.
   ------------------------------------------------------------ */
.section.section-tinted,
.section.section-light,
.portrait-section,
.split-feature {
    /* Four-corner variables — each section consumes only the ones
       its ornaments actually use; unused ones are harmless defaults. */
    --corner-ul-rot: 0deg;   --corner-ul-scale: 1;
    --corner-ur-rot: 0deg;   --corner-ur-scale: 1;
    --corner-br-rot: 0deg;   --corner-br-scale: 1;
    --corner-bl-rot: 0deg;   --corner-bl-scale: 1;
}

/* section-tinted: olive branch UL + wheat sheaf BR */
.section.section-tinted::before {
    transform-origin: 0 0;
    transform: rotate(var(--corner-ul-rot)) scale(var(--corner-ul-scale));
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.section.section-tinted::after {
    transform-origin: 100% 100%;
    transform: rotate(var(--corner-br-rot)) scale(var(--corner-br-scale));
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* section-light: vine UL + vine UR */
.section.section-light::before {
    transform-origin: 0 0;
    transform: rotate(var(--corner-ul-rot)) scale(var(--corner-ul-scale));
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.section.section-light::after {
    transform-origin: 100% 0;
    transform: rotate(var(--corner-ur-rot)) scale(var(--corner-ur-scale));
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* portrait-section: trailing vine in the upper-right */
.portrait-section::before {
    transform-origin: 100% 0;
    transform: rotate(var(--corner-ur-rot)) scale(var(--corner-ur-scale));
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* split-feature: small sage corner mark in the upper-right */
.split-feature::after {
    transform-origin: 100% 0;
    transform: rotate(var(--corner-ur-rot)) scale(var(--corner-ur-scale));
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* Muted-tone eyebrow variant — for sections where the gold accent would clash */
.hero-eyebrow--muted {
    color: var(--color-text-muted);
}

.hero-eyebrow--muted::before {
    background: var(--color-sage);
}

/* Center the muted eyebrow when used above centered section titles */
.section .hero-eyebrow--muted {
    display: flex;
    justify-content: center;
    margin-bottom: 0.85rem;
}

/* Audience pills — small sage-tinted chips that sit above the conditions grid */
.audience-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 2.5rem;
}

.audience-pills li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 1rem;
    background: rgba(216, 224, 207, 0.55);
    color: var(--color-sage-deep);
    border: 1px solid var(--color-sage-soft);
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 500;
}

.audience-pills li svg {
    flex-shrink: 0;
    opacity: 0.85;
}

/* Conditions grid — fixed 3-column layout that collapses gracefully */
.conditions-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

@media (max-width: 900px) {
    .conditions-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .conditions-grid { grid-template-columns: 1fr; }
}

/* Core Services grid — 3 columns on desktop, collapses to 2 then 1 */
.services-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .services-grid { grid-template-columns: 1fr; }
}

/* At a Glance — three stacked cards living in the hero sidebar */
.hero-glance {
    align-self: stretch;
}

.hero-glance-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    color: var(--color-accent-light);
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

.glance-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.glance-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-sage-soft);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.35rem;
    box-shadow: var(--shadow-md);
}

.glance-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(216, 224, 207, 0.45);
    margin-top: 0.1rem;
}

.glance-icon svg { width: 22px; height: 22px; }

.glance-body {
    flex: 1;
    min-width: 0;
}

.glance-eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.4rem;
}

.glance-card h3 {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--color-primary-dark);
    font-size: 1.1rem;
    line-height: 1.35;
    margin: 0 0 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-sage-soft);
}

.glance-pills {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.glance-pills li {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.75rem;
    background: rgba(216, 224, 207, 0.55);
    color: var(--color-sage-deep);
    border: 1px solid var(--color-sage-soft);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}

.glance-footnote {
    text-align: center;
    color: rgba(255, 248, 232, 0.82);
    margin-top: 1.25rem;
    font-size: 0.92rem;
}

/* "What's Always Included" check-list — lay items out in a horizontal row */
.illumined-panel .check-list {
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
}

@media (max-width: 1100px) {
    .illumined-panel .check-list { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
    .illumined-panel .check-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 460px) {
    .illumined-panel .check-list { grid-template-columns: 1fr; }
}

.illumined-panel .check-list li {
    align-items: flex-start;
    font-size: 0.92rem;
    line-height: 1.45;
}

/* "For parents" callout — a sage-tinted aside inside the portrait intro */
.parent-callout {
    margin-top: 1.75rem;
    padding: 1.25rem 1.5rem;
    background: rgba(216, 224, 207, 0.35);
    border: 1px solid var(--color-sage-soft);
    border-left: 3px solid var(--color-sage-deep);
    border-radius: var(--radius-lg);
    color: var(--color-sage-deep);
}

.parent-callout p {
    margin: 0;
    color: var(--color-sage-deep);
    font-size: 0.97rem;
    line-height: 1.65;
}

.parent-callout strong {
    color: var(--color-sage-deep);
    font-weight: 600;
}