/*
 Theme Name:   Picostrap5 Probate Inherited Child
 Theme URI:    http://probate-inherited.local
 Description:  Inherited Property Guidance credibility site — human-first, trustworthy, warm.
 Author:       Artificial Automation House
 Template:     picostrap5
 Version:      1.0.0
 Text Domain:  picostrap5-probate-inherited-child
*/

:root, [data-bs-theme=light] {
    /* Palette: Aubergine & Gold (2026-07-28) — muted plum primary, dusty mauve, soft gold accent.
       All AA-verified: white-on-primary 9.7:1, dark-on-gold 5.4:1. */
    --bs-primary: #0C0F24 !important;
    --bs-primary-rgb: 12, 15, 36 !important;
    --bs-secondary: #91A3C9 !important;
    --bs-secondary-rgb: 145, 163, 201 !important;
    --bs-success: #91A3C9 !important;
    --bs-info: #D6DEEE !important;
    --bs-warning: #91A3C9 !important;
    --bs-warning-rgb: 145, 163, 201 !important;
    --bs-danger: #7C90BC !important;
    --bs-dark: #0C0F24 !important;
    --bs-dark-rgb: 12, 15, 36 !important;
    --bs-light: #F4F6FA !important;
    --bs-body-bg: #FFFFFF !important;
    --bs-body-color: #2D3436 !important;
    --bs-link-color: #0C0F24 !important;
    --bs-link-hover-color: #44568A !important;

    /* Backward-compatible aliases — cascade from Bootstrap vars so Theme Studio works */
    --pi-forest: var(--bs-primary);
    --pi-forest-dark: var(--bs-dark);
    --pi-sage: var(--bs-secondary);
    --pi-amber: var(--bs-warning);
    --pi-amber-hover: var(--bs-danger);
    --pi-mist: var(--bs-info);
    --pi-cream: var(--bs-light);
    --pi-warm-bg: #EEF1F7;
    --pi-white: #FFFFFF;
    --pi-text: var(--bs-body-color);
    --pi-text-muted: #6C757D;
    --overlay-dark: linear-gradient(rgba(var(--bs-dark-rgb), 0.45), rgba(var(--bs-dark-rgb), 0.68));
    --overlay-medium: linear-gradient(rgba(var(--bs-dark-rgb), 0.28), rgba(var(--bs-dark-rgb), 0.50));
    --overlay-amber: linear-gradient(rgba(var(--bs-warning-rgb), 0.72), rgba(var(--bs-dark-rgb), 0.88));
    --font-display: "Merriweather", "Georgia", serif;
    --font-heading: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --shadow-card: 0 4px 20px rgba(12, 15, 36,0.09);
    --shadow-card-hover: 0 12px 40px rgba(12, 15, 36,0.17);
    --radius-card: 14px;
    --transition-base: 0.3s ease;
}

#lc-header { margin: 0 !important; padding: 0 !important; }
#lc-footer { margin: 0 !important; }
body.lc-custom-header { padding-top: 0 !important; margin-top: 0 !important; }

body { font-family: var(--font-body) !important; color: var(--pi-text); line-height: 1.75; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); color: var(--pi-forest-dark); font-weight: 700; }
.pi-hero h1, .pi-section-heading h2, .pi-cta-banner h2 { font-family: var(--font-display); }

.pi-hero { position:relative; min-height:550px; display:flex; align-items:center; justify-content:center; text-align:center; background-size:cover; background-position:center; color:#fff; padding:90px 20px; overflow:hidden; }
.pi-hero::before { content:''; position:absolute; inset:0; background:var(--overlay-dark); z-index:1; }
.pi-hero > * { position:relative; z-index:2; }
.pi-hero h1 { color:#fff; font-size:clamp(2rem,5vw,3.5rem); font-weight:700; text-shadow:0 2px 10px rgba(0,0,0,0.3); margin-bottom:1.2rem; }
.pi-hero p { font-size:clamp(1rem,2vw,1.25rem); max-width:740px; margin:0 auto 2.2rem; opacity:0.95; }
.pi-hero .btn-cta { background:var(--pi-amber); color:#0C0F24; border:none; padding:15px 38px; font-family:var(--font-heading); font-weight:700; font-size:1.05rem; border-radius:6px; text-decoration:none; display:inline-block; transition:var(--transition-base); box-shadow:0 4px 15px rgba(145, 163, 201,0.4); }
.pi-hero .btn-cta:hover { background:var(--pi-amber-hover); transform:translateY(-2px); }
.pi-hero .btn-ghost { background:transparent; border:2px solid rgba(255,255,255,0.75); color:#fff; padding:13px 30px; border-radius:6px; font-family:var(--font-heading); font-weight:600; font-size:1rem; text-decoration:none; display:inline-block; margin-left:14px; transition:var(--transition-base); }
.pi-hero .btn-ghost:hover { background:rgba(255,255,255,0.12); }

.pi-section-clean { background:var(--pi-white); padding:80px 0; }
.pi-section-warm { background:var(--pi-warm-bg); padding:80px 0; }
.pi-section-cream { background:var(--pi-cream); padding:80px 0; }
.pi-section-photo { position:relative; background-size:cover; background-position:center; color:#fff; padding:80px 0; }
.pi-section-photo::before { content:''; position:absolute; inset:0; background:var(--overlay-medium); z-index:1; }
.pi-section-photo > .container { position:relative; z-index:2; }

.pi-section-heading { text-align:center; margin-bottom:50px; }
.pi-section-heading h2 { font-size:clamp(1.5rem,3vw,2.3rem); margin-bottom:1rem; display:inline-block; }
.pi-section-heading h2::after { content:''; display:block; width:56px; height:3px; background:var(--pi-amber); margin:12px auto 0; border-radius:2px; }
.pi-section-heading p { font-size:1.1rem; color:var(--pi-text-muted); max-width:640px; margin:0 auto; }

.pi-cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.pi-cards-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.pi-card { background:var(--pi-white); border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow-card); transition:transform 0.3s ease,box-shadow 0.3s ease; height:100%; display:flex; flex-direction:column; }
.pi-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-card-hover); }
.pi-card-image img { width:100%; height:210px; object-fit:cover; display:block; transition:transform 0.5s ease; }
.pi-card:hover .pi-card-image img { transform:scale(1.05); }
.pi-card-body { padding:26px; flex:1; display:flex; flex-direction:column; }
.pi-card-body h3 { font-size:1.1rem; margin-bottom:0.75rem; color:var(--pi-forest-dark); }
.pi-card-body p { font-size:0.95rem; color:var(--pi-text-muted); flex:1; line-height:1.65; }
.pi-card-link { color:var(--pi-forest); font-weight:700; text-decoration:none; font-size:0.9rem; margin-top:1rem; display:inline-block; transition:var(--transition-base); }
.pi-card-link:hover { color:var(--pi-amber); }

.pi-steps-list { list-style:none; padding:0; margin:0; }
.pi-step { display:flex; gap:24px; padding:26px 0; border-bottom:1px solid rgba(0,0,0,0.06); }
.pi-step:last-child { border:none; }
.pi-step-num { background:var(--pi-forest); color:#fff; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:800; font-size:0.95rem; flex-shrink:0; margin-top:2px; }
.pi-step-content h4 { font-size:1.05rem; color:var(--pi-forest-dark); margin-bottom:0.4rem; }
.pi-step-content p { font-size:0.92rem; color:var(--pi-text-muted); margin:0; line-height:1.65; }

.pi-options-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pi-option { background:var(--pi-white); border-radius:var(--radius-card); padding:32px 24px; box-shadow:var(--shadow-card); border-top:4px solid var(--pi-sage); }
.pi-option.primary-opt { border-top-color:var(--pi-amber); }
.pi-option h3 { font-size:1.1rem; color:var(--pi-forest-dark); margin-bottom:1rem; }
.pi-option ul { list-style:none; padding:0; margin:0; }
.pi-option ul li { padding:6px 0; font-size:0.9rem; color:var(--pi-text-muted); border-bottom:1px solid rgba(0,0,0,0.05); display:flex; align-items:center; gap:8px; }
.pi-option ul li::before { content:'✓'; color:var(--pi-sage); font-weight:700; }
.pi-option ul li:last-child { border:none; }

.pi-checklist { list-style:none; padding:0; margin:0; }
.pi-checklist li { padding:12px 0; border-bottom:1px solid rgba(0,0,0,0.06); display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; color:var(--pi-text-muted); }
.pi-checklist li::before { content:''; width:22px; height:22px; background:var(--pi-sage); border-radius:50%; flex-shrink:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z'/%3E%3C/svg%3E"); background-size:cover; margin-top:1px; }

.pi-testimonial { background:var(--pi-white); border-radius:var(--radius-card); padding:32px; box-shadow:var(--shadow-card); text-align:center; border-top:4px solid var(--pi-sage); }
.pi-testimonial-headshot { width:80px; height:80px; border-radius:50%; object-fit:cover; margin:0 auto 16px; display:block; border:3px solid var(--pi-sage); }
.pi-testimonial blockquote { font-style:italic; font-size:0.98rem; line-height:1.7; margin:0 0 16px; padding:0; border:none; color:var(--pi-text); }
.pi-testimonial-name { font-family:var(--font-heading); font-weight:700; color:var(--pi-forest-dark); font-size:0.95rem; }
.pi-testimonial-role { font-size:0.85rem; color:var(--pi-text-muted); }

.pi-stat-number { font-family:var(--font-heading); font-size:2.6rem; font-weight:800; color:var(--pi-amber); display:block; line-height:1.2; }
.pi-stat-label { font-size:0.88rem; color:rgba(255,255,255,0.85); text-transform:uppercase; letter-spacing:0.08em; font-weight:600; }

.pi-faq-item { border-bottom:1px solid rgba(0,0,0,0.08); padding:22px 0; }
.pi-faq-item h4 { font-size:1rem; color:var(--pi-forest-dark); margin-bottom:0.75rem; }
.pi-faq-item p { font-size:0.95rem; color:var(--pi-text-muted); line-height:1.7; }

.pi-cta-banner { position:relative; background-size:cover; background-position:center; padding:80px 20px; text-align:center; color:#fff; }
.pi-cta-banner::before { content:''; position:absolute; inset:0; background:var(--overlay-amber); z-index:1; }
.pi-cta-banner > * { position:relative; z-index:2; }
.pi-cta-banner h2 { color:#fff; font-size:2.2rem; margin-bottom:1rem; }
.pi-cta-banner p { color:rgba(255,255,255,0.9); max-width:620px; margin:0 auto 2rem; font-size:1.05rem; }
.pi-cta-banner .btn { background:#fff; color:var(--pi-forest-dark) !important; padding:15px 38px; border-radius:6px; text-decoration:none; font-weight:700; font-size:1rem; display:inline-block; transition:var(--transition-base); box-shadow:0 4px 20px rgba(0,0,0,0.2); }
.pi-cta-banner .btn:hover { background:var(--pi-cream); transform:translateY(-2px); }

.pi-about-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.pi-about-img img { width:100%; height:460px; object-fit:cover; border-radius:var(--radius-card); box-shadow:var(--shadow-card-hover); display:block; }
.pi-about-content h2 { font-family:var(--font-display); font-size:2rem; margin-bottom:1.5rem; }
.pi-about-content p { color:var(--pi-text-muted); margin-bottom:1rem; }

.pi-contact-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:60px; }
.pi-contact-form { background:var(--pi-white); border-radius:var(--radius-card); padding:44px; box-shadow:var(--shadow-card-hover); }
.pi-contact-form h3 { font-size:1.3rem; margin-bottom:1.5rem; color:var(--pi-forest-dark); }
.pi-form-group { margin-bottom:1.2rem; }
.pi-form-group label { display:block; font-weight:600; font-size:0.9rem; margin-bottom:6px; color:var(--pi-forest-dark); }
.pi-form-group input, .pi-form-group textarea, .pi-form-group select { width:100%; padding:12px 15px; border:1.5px solid #C8D8C8; border-radius:6px; font-size:0.95rem; font-family:var(--font-body); transition:border-color 0.2s; }
.pi-form-group input:focus, .pi-form-group textarea:focus { outline:none; border-color:var(--pi-forest); box-shadow:0 0 0 3px rgba(12, 15, 36,0.1); }
.pi-form-group textarea { min-height:130px; resize:vertical; }
.pi-form-btn { background:var(--pi-forest); color:#fff; border:none; padding:15px 32px; border-radius:6px; font-family:var(--font-heading); font-weight:700; font-size:1rem; cursor:pointer; width:100%; transition:var(--transition-base); }
.pi-form-btn:hover { background:var(--pi-forest-dark); }

/* Nav */
.pi-nav { background:var(--pi-forest-dark); padding:0; }
.pi-nav-inner { max-width:1200px; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; height:70px; }
.pi-nav-brand { font-family:var(--font-heading); font-weight:800; font-size:1.2rem; color:#fff; text-decoration:none; }
.pi-nav-brand span { color:#91A3C9; } /* brighter gold: raises the "Property" brand-word contrast on the dark plum bar */
.pi-nav-links { display:flex; gap:2px; list-style:none; margin:0; padding:0; }
.pi-nav-links a { color:rgba(255,255,255,0.85); text-decoration:none; font-size:0.88rem; font-weight:600; padding:8px 11px; border-radius:5px; white-space:nowrap; transition:var(--transition-base); }
.pi-nav-links a:hover { color:#fff; background:rgba(255,255,255,0.1); }
/* active state: shows the current page (gold underline + subtle fill), excluding the amber CTA */
.pi-nav-links a.active:not(.pi-nav-cta) { color:#fff; background:rgba(255,255,255,0.12); box-shadow:inset 0 -2px 0 #91A3C9; }
.pi-nav-cta { background:var(--pi-amber) !important; color:#fff !important; border-radius:5px; }
.pi-nav-cta:hover { background:var(--pi-amber-hover) !important; }

/* Footer */
.pi-footer { background:var(--pi-forest-dark); color:#C0D0C5; font-family:var(--font-body); padding:60px 20px 0; }
.pi-footer-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; }
.pi-footer h4 { font-family:var(--font-heading); font-weight:700; color:#fff; font-size:0.95rem; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:16px; }
.pi-footer p { font-size:0.88rem; line-height:1.7; }
.pi-footer-links { list-style:none; padding:0; margin:0; }
.pi-footer-links li { margin-bottom:8px; }
.pi-footer-links a { color:#C3CFE6; text-decoration:none; font-size:0.88rem; transition:color 0.2s; }
.pi-footer-links a:hover { color:var(--pi-amber); }
/* Consistency: EVERY footer link (not just .pi-footer-links — copy row, contact, etc.) shares one base
   colour and the same gold hover. Excludes the amber-fill CTA/button links which keep their dark ink. */
.pi-footer a:not([style*="pi-amber"]):not(.pi-nav-cta):not(.btn),
.pi-footer a:not([style*="pi-amber"]):not(.pi-nav-cta):not(.btn):visited { color:#C3CFE6 !important; transition:color 0.2s; }
.pi-footer a:not([style*="pi-amber"]):not(.pi-nav-cta):not(.btn):hover,
.pi-footer a:not([style*="pi-amber"]):not(.pi-nav-cta):not(.btn):focus-visible { color:var(--pi-amber) !important; }
.pi-footer-copy { border-top:1px solid rgba(255,255,255,0.08); text-align:center; padding:20px 0; font-size:0.78rem; color:#7A9A85; max-width:1200px; margin:0 auto; }

.site-footer .colophon, #colophon, #wrapper-footer-colophon { display:none !important; }

.pi-disclaimer { background:var(--pi-warm-bg); border:1px solid rgba(122,158,138,0.3); border-radius:8px; padding:20px 24px; font-size:0.88rem; color:var(--pi-text-muted); line-height:1.65; }
.pi-disclaimer strong { color:var(--pi-forest-dark); }

@media (max-width:991.98px) { .pi-cards-grid { grid-template-columns:repeat(2,1fr); } .pi-cards-grid-4 { grid-template-columns:repeat(2,1fr); } .pi-options-grid { grid-template-columns:1fr; } .pi-about-grid { grid-template-columns:1fr; } .pi-contact-grid { grid-template-columns:1fr; } .pi-footer-inner { grid-template-columns:1fr 1fr; } }
/* (old <768 link-wrapping nav rules removed 2026-07-28 — the hamburger now triggers at <1200, below) */
@media (max-width:575.98px) { .pi-cards-grid { grid-template-columns:1fr; } .pi-cards-grid-4 { grid-template-columns:1fr; } .pi-hero { min-height:440px; padding:60px 16px; } .pi-footer-inner { grid-template-columns:1fr; } }

a { color:var(--pi-forest); text-decoration:underline; text-decoration-color:rgba(12, 15, 36,0.3); text-underline-offset:3px; transition:color 0.2s ease; }
a:hover { color:var(--pi-amber); }
a:visited { color:var(--pi-forest); opacity:0.85; }

/* Testimonial initial-avatars — replace placeholder headshots with brand-color initials (2026-07-10) */
.pi-testimonial-avatar{width:80px;height:80px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:700;font-size:1.6rem;line-height:1;color:#fff;border:3px solid var(--pi-white);box-shadow:0 4px 12px rgba(12, 15, 36,.18);letter-spacing:.02em;}
.pi-avatar-1{background:var(--bs-primary);}
.pi-avatar-2{background:var(--bs-warning);}
.pi-avatar-3{background:var(--bs-dark);}
.pi-avatar-4{background:var(--bs-secondary);}

/* hero overlay strengthen — better text contrast over the real home photo (2026-07-10) */
.pi-hero::before { background: linear-gradient(rgba(var(--bs-dark-rgb),0.60), rgba(var(--bs-dark-rgb),0.82)); }

/* === Client revision fixes 2026-07-21 (accessibility) === */
:root { --bs-warning: #91A3C9 !important; --bs-danger: #7C90BC !important; } /* AA: white-on-amber 2.9 -> 5.5 */
.pi-nav-links a:visited { color: rgba(255,255,255,0.85); }
/* `.pi-nav-cta` and `.pi-hero .btn-cta` were in this list declaring WHITE for
   :visited, while the rules below set a dark #0C0F24 label for the unvisited
   state — the interaction-state gate reads that contradiction as a visited
   repaint. Dropped both from the list (and pinned at the end of this file);
   other buttons keep white. Same defect and same fix as divorce-neutral. */
a[class*="btn"]:not(.pi-nav-cta):not(.btn-cta):visited { color:#fff; }
.pi-footer-links a:visited { color:#C3CFE6; }
.pi-footer a:visited, .pi-footer-copy a:visited { color: inherit; }
.pi-footer-copy, .pi-footer-copy p { color: rgba(255,255,255,0.82) !important; }
/* Correction: keep brand amber bright (nav-brand accent needs light-on-dark); dark text on amber buttons for AA */
:root { --bs-warning: #91A3C9 !important; --bs-danger: #7C90BC !important; }
.pi-hero .btn-cta, .pi-nav-cta, .pi-footer a[style*="pi-amber"] { color:#0C0F24 !important; }
.pi-hero .btn-cta:hover, .pi-nav-cta:hover { background:#A9B8D6 !important; color:#0C0F24 !important; }
/* Real axe-core WCAG-AA fix: muted body text #6C757D failed 4.21 on warm section bg */
:root { --pi-text-muted: #565D64 !important; }
/* Real axe: placeholder testimonial-avatar initials white-on-light failed ~2.9 -> dark initials */
.pi-avatar-1,.pi-avatar-2,.pi-avatar-3,.pi-avatar-4{ color:#1f2630 !important; }
/* avatars: darken amber/sage bg so white initials pass AA (real axe) */
.pi-avatar-2{ background:#44568A !important; color:#fff !important; }
.pi-avatar-4{ background:#4d6a5a !important; color:#fff !important; }
/* all avatar initials white (override earlier blanket dark-text); only -2/-4 bgs were darkened */
.pi-avatar-1,.pi-avatar-2,.pi-avatar-3,.pi-avatar-4{ color:#fff !important; }
/* Client fix: hero buttons overlapped on mobile (btn-ghost margin-left:14px + inline-block, no vertical gap). Stack + space them at <=575.98px. */
@media (max-width:575.98px) {
  .pi-hero .btn-cta, .pi-hero .btn-ghost { display:block; width:100%; max-width:340px; margin-left:auto; margin-right:auto; }
  .pi-hero .btn-cta { margin-bottom:14px; }
}


/* ── Forminator submit button — recolor with the palette ──────────────────
   Forminator ships its own button styling (stock blue #097BAA) which ignores
   the theme and matches no palette. Track --bs-primary so the submit button
   recolors with the customizer, exactly as probate-credibility already does. */
.forminator-ui.forminator-custom-form button.forminator-button-submit,
.forminator-ui .forminator-button.forminator-button-submit,
button.forminator-button-submit,
.forminator-button-submit { background-color: var(--bs-primary) !important; color: #fff !important; border-color: var(--bs-primary) !important; }
html body button.forminator-button-submit span,
html body .forminator-button.forminator-button-submit span { color: #fff !important; }


/* Gold .btn-warning CTAs — recolor with the palette accent, dark label (Bootstrap
   default) for WCAG-AA. Overrides the .text-white utility the markup forces on them. */
.btn-warning {
    --bs-btn-bg: var(--bs-warning) !important;
    --bs-btn-border-color: var(--bs-warning) !important;
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-warning) 88%, #000) !important;
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-warning) 88%, #000) !important;
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-warning) 82%, #000) !important;
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-warning) 82%, #000) !important;
}
html body .btn.btn-warning,
html body a.btn.btn-warning,
html body button.btn.btn-warning,
html body .btn.btn-warning span { color: #212529 !important; }

/* ===== CredForge classic flare layer (additive; keeps the original forest/sage design) ===== */
.pi-masthead{padding:clamp(1.6rem,4vw,2.6rem) 0;background:var(--bs-light,#F4F6FA);border-bottom:1px solid rgba(12, 15, 36,.08)}
.pi-masthead .container{max-width:1120px;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.pi-figure{margin:0}.pi-figure--masthead{margin:0 auto;max-width:440px}
.pi-fig-svg{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 28px -20px rgba(12, 15, 36,.55));animation:piRise .8s ease both}
@keyframes piRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pi-fig-svg{animation:none}}
/* a11y: Forminator floating textarea label had overflow-x:auto -> a scrollable region without keyboard
   access (axe scrollable-region-focusable). It is a label, so neutralize the scroll region. */
.forminator-ui .forminator-label.forminator-floating--textarea,.forminator-label.forminator-floating--textarea{overflow:visible!important}

/* Homepage "what working together looks like" process section (2026-07-27) */
.pi-process-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:start;}
.pi-process-intro h2{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.3rem);color:var(--pi-forest-dark);margin-bottom:1.1rem;}
.pi-process-intro h2::after{content:'';display:block;width:56px;height:3px;background:var(--pi-amber);margin:14px 0 0;border-radius:2px;}
.pi-process-intro p{color:var(--pi-text-muted);font-size:1.05rem;line-height:1.85;margin-bottom:0;}
.pi-process-intro .pi-process-note{margin-top:1.3rem;font-style:italic;color:var(--pi-forest);font-size:0.98rem;}
.pi-process-grid .pi-steps-list{background:var(--pi-white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:8px 28px;}
@media (max-width:991.98px){.pi-process-grid{grid-template-columns:1fr;gap:32px;}}

/* ============================================================================
   PI "WAYFINDING" DESIGN SYSTEM (pi-path / pi-milestone / pi-figure / pi-quote
   + pix- signature). Added 2026-07-28 (CredForge). The route from loss to a
   completed sale, drawn as a wayfinding path — the inherited-property signature.
   All colour via --bs-* so the customizer drives it.
   ============================================================================ */
.pi-path { max-width:1080px; margin:0 auto; }
.pi-path__track { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; position:relative; }
.pi-path__track::before { content:""; position:absolute; top:27px; left:11%; right:11%; height:2px;
  background:linear-gradient(90deg,var(--bs-secondary),var(--bs-warning)); opacity:.5; }
.pi-milestone { text-align:center; position:relative; }
.pi-milestone__dot { width:56px; height:56px; border-radius:50%; background:#fff; border:2px solid var(--bs-primary);
  color:var(--bs-primary); display:flex; align-items:center; justify-content:center; margin:0 auto 1rem;
  font-family:var(--font-heading,"Merriweather",serif); font-weight:700; font-size:1.05rem; position:relative; z-index:1;
  box-shadow:0 6px 16px -8px rgba(12, 15, 36,.4); animation:pix-glow 4.2s ease-in-out infinite; }
.pi-milestone:nth-child(2) .pi-milestone__dot { animation-delay:.5s; }
.pi-milestone:nth-child(3) .pi-milestone__dot { animation-delay:1s; }
.pi-milestone:nth-child(4) .pi-milestone__dot { animation-delay:1.5s; }
.pi-milestone h4 { font-family:var(--font-heading,"Merriweather",serif); color:var(--bs-dark); font-size:1.05rem; margin-bottom:.4rem; }
.pi-milestone p { color:#41514a; font-size:.92rem; line-height:1.6; margin:0; }
.pi-figure { display:inline-flex; }
.pi-figure svg { width:100%; height:auto; }
.pi-figure svg [stroke] { stroke:var(--bs-primary); }
.pi-figure svg .accent { stroke:var(--bs-warning); }
.pi-quote { max-width:720px; margin:1.5rem auto 0; padding:2rem 2.4rem; background:var(--pi-warm-bg,#EFF4EF);
  border-radius:16px; border-left:4px solid var(--bs-warning); }
.pi-quote p { font-family:var(--font-heading,"Merriweather",serif); font-size:1.3rem; line-height:1.55;
  color:var(--bs-dark); font-style:italic; margin:0 0 .8rem; }
.pi-quote cite { font-style:normal; font-weight:700; color:var(--bs-primary); font-size:.9rem; letter-spacing:.02em; }
.pi-quote cite span { font-weight:400; color:#5f6f66; }
@keyframes pix-glow { 0%,100%{ box-shadow:0 6px 16px -8px rgba(12, 15, 36,.4);} 50%{ box-shadow:0 7px 22px -6px rgba(145, 163, 201,.5);} }
@media (prefers-reduced-motion: reduce){ .pi-milestone__dot{ animation:none; } }
@media (max-width:768px){ .pi-path__track{ grid-template-columns:1fr 1fr; } .pi-path__track::before{ display:none; } }

.brand-tbd{font-style:italic;opacity:.85;}

/* Mobile hamburger nav (2026-07-28) — replaces the old link-stacking behaviour so the
   navbar collapses into a toggle instead of wrapping 7 links into a tall stack. */
.pi-nav-toggle { display:none; }
@media (max-width:1199.98px){
  .pi-nav-inner { flex-direction:row !important; flex-wrap:wrap; align-items:center; justify-content:space-between; height:auto; }
  /* toggle: fixed square button with absolutely-centred bars so the X sits dead-centre */
  .pi-nav-toggle { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; background:none; border:0; cursor:pointer; padding:0; position:relative; }
  .pi-nav-toggle span { position:absolute; left:50%; top:50%; display:block; width:26px; height:2px; margin:0; background:#fff; border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
  .pi-nav-toggle span:nth-child(1){ transform:translate(-50%,-50%) translateY(-7px); }
  .pi-nav-toggle span:nth-child(2){ transform:translate(-50%,-50%); }
  .pi-nav-toggle span:nth-child(3){ transform:translate(-50%,-50%) translateY(7px); }
  .pi-nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
  .pi-nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .pi-nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translate(-50%,-50%) rotate(-45deg); }
  /* drawer: always rendered but collapsed, animates open/close (no jarring snap).
     room under the last item so the CTA never touches the section below. */
  .pi-nav-links { display:flex !important; flex-basis:100%; width:100%; flex-direction:column !important; flex-wrap:nowrap !important; align-items:stretch; gap:2px; overflow:hidden; max-height:0; opacity:0; margin-top:0; padding-bottom:0; transition:max-height .4s ease, opacity .32s ease, margin-top .4s ease, padding-bottom .4s ease; }
  .pi-nav-links.is-open { max-height:640px; opacity:1; margin-top:10px; padding-bottom:20px; }
  .pi-nav-links a { display:block; font-size:0.95rem; padding:12px 8px; }
  /* CTA: capped width, centred — no longer edge-to-edge */
  .pi-nav-links .pi-nav-cta { text-align:center; align-self:center; width:100%; max-width:280px; margin:14px 0 4px; }
}

/* --- Real icons (Bootstrap Icons) replace the old hand-drawn SVG scene illustrations (2026-07-28) --- */
.pi-figure { text-align:center; }
.pi-figure-icon { display:inline-flex; align-items:center; justify-content:center; width:74px; height:74px; border-radius:50%; background:rgba(12, 15, 36,0.07); color:var(--bs-primary); margin:0 auto; }
.pi-figure-icon i { font-size:2.4rem; line-height:1; }
.pi-figure-icon--quote { background:rgba(176,139,62,0.14); color:var(--bs-warning); }

/* --- Flare-kit heading underline retune (2026-07-28): was primary->secondary (muddy mauve, clashed);
       use the theme's primary->gold, and a soft white rule on dark/photo bands where copy is white. --- */
html.cf-flare .cf-reveal.cf-in .cf-underline::after { background:linear-gradient(90deg, var(--bs-primary), var(--bs-warning)) !important; }
html.cf-flare .pi-cta-banner.cf-reveal.cf-in .cf-underline::after { background:rgba(255,255,255,0.55) !important; }
/* The flare-kit underline is centred with margin:auto, which looks off under LEFT-aligned titles
   (Handling / Probate / About). Align the underline to the title: left by default, centred only when
   the heading itself (or its wrapper) is centred. */
html.cf-flare .cf-reveal.cf-in .cf-underline::after { margin-left:0 !important; margin-right:auto !important; }
/* data-uline is stamped by a tiny script from each heading's COMPUTED text-align (inheritance can't be
   read by a pseudo-element in CSS), so the underline follows centred headings too. */
html.cf-flare .cf-reveal.cf-in .cf-underline[data-uline="center"]::after { margin-left:auto !important; margin-right:auto !important; }
html.cf-flare .cf-reveal.cf-in .cf-underline[data-uline="right"]::after { margin-left:auto !important; margin-right:0 !important; }

/* Small supporting image under the process intro (left column) (2026-07-28) */
.pi-process-img { display:block; width:100%; max-width:420px; height:230px; object-fit:cover; border-radius:var(--radius-card); box-shadow:var(--shadow-card); margin:0 0 2rem 0; }
/* Solid-colour section variant (e.g. the stats band) — no photo overlay so the colour stays flat. */
.pi-section-solid::before { display:none !important; }

/* Dual-shadow fix (2026-07-28): flare-kit's [class*="-card"]:hover also matches the GRID WRAPPER
   (.pi-cards-grid contains "-card"), so hovering a card shadowed the whole group too. Keep the
   hover lift on the individual .pi-card columns ONLY — neutralize it on the grid wrappers. */
.pi-cards-grid:hover, .pi-cards-grid-4:hover { transform:none !important; box-shadow:none !important; }

/* CTA button (2026-07-28): gold rest with dark text; crisp aubergine hover with WHITE text —
   replaces the washed lighter-gold hover that read as the wrong colour / low contrast. */
.pi-nav-cta { background:var(--bs-warning) !important; color:#0C0F24 !important; }
.pi-nav-cta:hover, .pi-nav-cta:focus-visible { background:var(--bs-primary) !important; color:#fff !important; }

/* Testimonial quote icon right-aligned toward the card (2026-07-28) */
.pi-figure--right { display:flex; justify-content:flex-end; align-items:center; }

/* Services cards (2026-07-28) — real Bootstrap-icon cards linking to the service pages */
.section-kicker { text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; font-weight:700; color:#44568A; margin-bottom:.6rem; display:block; } /* dark gold: AA on white */
.pi-services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:2.2rem; }
.pi-service-card { display:block; background:var(--pi-white); border:1px solid rgba(12, 15, 36,.14); border-radius:var(--radius-card); padding:1.9rem 1.6rem; text-decoration:none; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.pi-service-card:hover { transform:translateY(-5px); box-shadow:0 16px 40px -22px rgba(12, 15, 36,.45); border-color:var(--bs-warning); }
.pi-service-ico { width:56px; height:56px; border-radius:50%; background:rgba(12, 15, 36,.07); display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; }
.pi-service-ico i { font-size:1.6rem; color:var(--bs-primary); line-height:1; }
.pi-service-card h3 { font-family:var(--font-heading); font-size:1.08rem; color:var(--pi-forest-dark); margin-bottom:.5rem; }
.pi-service-card p { color:var(--pi-text-muted); font-size:.93rem; line-height:1.62; margin-bottom:.9rem; }
.pi-service-link { color:var(--bs-primary); font-weight:700; font-size:.85rem; }
.pi-service-card:hover .pi-service-link { color:var(--bs-warning); }
@media (max-width:900px){ .pi-services-grid{ grid-template-columns:1fr; } }
/* Non-clickable service items on the /services/ page (single page, no child pages) */
.pi-service-item { background:var(--pi-white); border:1px solid rgba(12, 15, 36,.14); border-radius:var(--radius-card); padding:1.8rem 1.6rem; }
.pi-service-item .pi-service-ico { width:56px; height:56px; border-radius:50%; background:rgba(12, 15, 36,.07); display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; }
.pi-service-item .pi-service-ico i { font-size:1.6rem; color:var(--bs-primary); line-height:1; }
.pi-service-item h3 { font-family:var(--font-heading); font-size:1.08rem; color:var(--pi-forest-dark); margin-bottom:.5rem; }
.pi-service-item p { color:var(--pi-text-muted); font-size:.93rem; line-height:1.62; margin:0; }

/* Homepage "more than inherited property" — graphical icon-badge list */
.pi-mini-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:2.4rem; }
.pi-mini-item { display:flex; flex-direction:column; align-items:center; gap:.85rem; width:172px; padding:1.5rem .9rem; background:var(--pi-white); border:1px solid rgba(12, 15, 36,.14); border-radius:var(--radius-card); box-shadow:var(--shadow-card); text-decoration:none; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.pi-mini-item:hover { transform:translateY(-5px); box-shadow:var(--shadow-card-hover); border-color:var(--bs-warning); }
.pi-mini-ico { width:64px; height:64px; border-radius:50%; background:rgba(12, 15, 36,.07); border:1px solid rgba(12, 15, 36,.12); display:flex; align-items:center; justify-content:center; transition:background .25s ease, border-color .25s ease; }
.pi-mini-item:hover .pi-mini-ico { background:var(--bs-primary); border-color:var(--bs-primary); }
.pi-mini-ico i { font-size:1.6rem; color:var(--bs-primary); line-height:1; transition:color .25s ease; }
.pi-mini-item:hover .pi-mini-ico i { color:#fff; }
.pi-mini-label { font-family:var(--font-heading); font-weight:600; font-size:.92rem; color:var(--pi-forest-dark); line-height:1.35; }
.pi-service-viewall { color:#44568A; font-weight:700; font-size:.95rem; text-decoration:none; } /* dark gold: AA on white */
.pi-service-viewall:hover { color:var(--bs-primary); }
@media (max-width:520px){ .pi-mini-item{ width:44%; } }


/* ==========================================================================
   Interaction-state AA (2026-09-16, gates/interaction-state-audit.cjs)

   These CTAs carry a DARK label, so darkening them on hover reduces contrast —
   the hover fill resolved to #7C90BC and took the label to 3.44:1. The theme's
   own earlier rule already wanted #A9B8D6 (7.29:1 with that label); this pins it
   with enough specificity to actually win. A separate focus state put WHITE on a
   light grey #ADA7AC (2.36:1); the dark label reads 7.23:1 there instead.

   Resting states are untouched — only :hover / :focus / :visited move.
   ========================================================================== */
/* Not scoped to .pi-hero: the same .btn-cta also appears in .pi-slide__cta on the
   hero slider, which is where the gate found it. Match the class itself. */
html body a.btn-cta:hover,
html body a.btn-cta:focus,
html body a.btn-cta:focus-visible,
html body .btn-cta:hover,
html body .btn-cta:focus,
html body .btn-cta:focus-visible,
html body .pi-nav-cta:hover,
html body .pi-nav-cta:focus,
html body .pi-nav-cta:focus-visible { background: #A9B8D6 !important; color: #0C0F24 !important; }

html body .pi-nav-cta:visited,
html body .pi-nav-cta:visited:hover,
html body .pi-hero .btn-cta:visited,
html body .pi-hero .btn-cta:visited:hover { color: #0C0F24 !important; }

/* Any filled control whose focus state lands on the light grey keeps the dark
   label rather than white.

   EXCEPT .btn-ghost: it is not a filled control. It is a transparent/12%-white
   outline button sitting on the dark hero photo, white in every other state, so
   the dark label made it unreadable the moment it took keyboard focus — measured
   1.73:1 on the hero slider CTAs ("Common Questions", "Handling the Home") and
   4.43:1 on "Meet Your Guide". a[class*="btn"] was simply too wide a net. */
html body .btn:focus:not(.btn-ghost),
html body .btn:focus-visible:not(.btn-ghost),
html body a[class*="btn"]:focus:not(.btn-ghost),
html body a[class*="btn"]:focus-visible:not(.btn-ghost) { color: #0C0F24 !important; }

/* Ghost buttons sit on the hero SLIDER, so what is behind them is a different
   photograph on every slide: white measured 3.87:1 over one slide's light tan and
   the dark label measured 1.73:1 over another's shadow. No label colour can pass
   against a backdrop that keeps changing, so focus gets a deterministic fill —
   the same plum as the resting 40% scrim, just opaque (white on #0C0F24 = 14.8:1).
   Resting and :hover are left exactly as designed; only the transient keyboard
   focus state gains a solid fill, which also settles the hover+focus combination
   that was painting a white label on a white hover fill. */
html body .btn-ghost:focus,
html body .btn-ghost:focus-visible {
    background: #0C0F24 !important;
    color: #fff !important;
}

/* Interaction-state AA (2026-09-16, gates/interaction-state-audit.cjs).
   `.btn-warning` on the Add-on Forge pages (/blog/, /checklist/, /cash-offer/ …)
   carries a DARK label: resting is a comfortable 5.28:1 on the gold, but
   Bootstrap's default hover DARKENS the fill to #A28026 and drops it to 4.15:1.
   Darkening is the wrong direction under a dark label — lighten instead (96%
   toward white -> 5.53:1) and keep the label where it is.

   Declared at theme level with !important because these pages' CSS is scoped
   inside post_content, so there is no single stylesheet to edit — see
   brain/20-system-frameworks/addon-forge.md. Resting button unchanged. */
html body .btn.btn-warning:hover,
html body .btn.btn-warning:focus,
html body .btn.btn-warning:focus-visible,
html body a.btn.btn-warning:hover,
html body a.btn.btn-warning:focus {
    background-color: color-mix(in srgb, var(--bs-warning) 96%, #fff) !important;
    border-color: color-mix(in srgb, var(--bs-warning) 96%, #fff) !important;
}

/* Nav CTA, fixed 2026-10-29.
   gap:2px put the last link hard against the Consultation button, and the button forced white
   text on --pi-amber. With this client's palette --pi-amber is #91A3C9, where white is 2.53:1 and
   fails AA in both directions; the brand navy on it is 7.47:1. */
.pi-nav-links .pi-nav-cta-item { margin-left: 14px; }
.pi-nav-links a.pi-nav-cta,
html body .pi-nav-links a.pi-nav-cta { color: var(--bs-primary) !important; font-weight: 700; padding-left: 16px; padding-right: 16px; }
.pi-nav-links a.pi-nav-cta:hover,
.pi-nav-links a.pi-nav-cta:focus-visible { color: var(--bs-primary) !important; }
@media (max-width: 991.98px) { .pi-nav-links .pi-nav-cta-item { margin-left: 0; } }

/* Header logo (2026-10-29). Client logos arrive as JPEGs on white with no alpha, so on the dark
   navy bar they would read as a white rectangle. A rounded light plate makes that deliberate. */
.pi-nav-brand--logo { display:inline-flex; align-items:center; line-height:0; }
.pi-nav-brand--logo .pi-nav-logo { height:40px; width:auto; display:block; }
@media (max-width: 991.98px) { .pi-nav-brand--logo .pi-nav-logo { height:32px; } .pi-nav-brand--logo { padding:4px 9px; } }

/* ── White header (2026-10-29) ─────────────────────────────────────────────
   The client's logo is navy-and-gold artwork on a white background with no alpha, so on the dark
   bar it needed a plate and the ring text was unreadable at 40px. Inverting the bar lets the real
   logo sit on its own white, at a size where it reads, with no cropping and no plate. */
.pi-nav { background:#fff !important; border-bottom:1px solid rgba(var(--bs-primary-rgb), .12); box-shadow:0 1px 3px rgba(var(--bs-primary-rgb), .06); }
.pi-nav-brand, .pi-nav-brand span { color:var(--bs-primary) !important; }
.pi-nav-links a { color:var(--bs-primary) !important; }
.pi-nav-links a:hover { color:var(--bs-primary) !important; background:rgba(var(--bs-primary-rgb), .07); }
.pi-nav-links a:visited { color:var(--bs-primary) !important; }
.pi-nav-links a.active:not(.pi-nav-cta) { color:var(--bs-primary) !important; background:rgba(var(--bs-primary-rgb), .08); box-shadow:inset 0 -2px 0 var(--bs-secondary); }
/* CTA keeps the periwinkle fill with the navy label — 7.47:1 */
.pi-nav-links a.pi-nav-cta, html body .pi-nav-links a.pi-nav-cta { background:var(--bs-secondary) !important; color:var(--bs-primary) !important; }
.pi-nav-links a.pi-nav-cta:hover, .pi-nav-links a.pi-nav-cta:focus-visible { background:var(--bs-info) !important; color:var(--bs-primary) !important; }
.pi-nav-brand--logo .pi-nav-logo { height:68px; }
@media (max-width: 991.98px) {
  .pi-nav-toggle span { background:var(--bs-primary) !important; }
  .pi-nav-links { background:#fff; }
  .pi-nav-brand--logo .pi-nav-logo { height:46px; }
}

/* A circular badge needs height to read — the ring text is unreadable under about 60px, so the
   bar grows to suit the logo rather than the logo shrinking to suit the bar. */
.pi-nav-inner { height:92px; }
@media (max-width: 991.98px) { .pi-nav-inner { height:70px; } }

/* Contact top bar — navy strip above the now-white nav, so the header still has an anchor. */
.pi-topbar { background:var(--bs-primary); color:#fff; font-size:.82rem; }
.pi-topbar-inner { max-width:1200px; margin:0 auto; padding:7px 20px; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.pi-topbar-area { opacity:.85; }
.pi-topbar-contacts { display:flex; gap:1.4rem; flex-wrap:wrap; margin-left:auto; }
.pi-topbar a, .pi-topbar a:visited { color:#fff !important; text-decoration:none; font-weight:600; }
.pi-topbar a:hover, .pi-topbar a:focus-visible { color:var(--bs-secondary) !important; text-decoration:underline; }
@media (max-width: 575.98px) { .pi-topbar-area { display:none; } .pi-topbar-contacts { margin:0 auto; gap:1rem; font-size:.78rem; } }

/* Top-bar icons: aria-hidden, so they are decoration beside the text, never a label on their own. */
.pi-topbar .bi { margin-right:.4rem; font-size:.95em; opacity:.9; vertical-align:-.08em; }
.pi-topbar-contacts a { display:inline-flex; align-items:center; }
.pi-topbar-area { display:inline-flex; align-items:center; }
/* restated AFTER the inline-flex rules above — the original media query sat earlier in the file
   and was being overridden, so the service area still showed on a phone */
@media (max-width: 575.98px) {
  .pi-topbar-area { display:none !important; }
  .pi-topbar-inner { justify-content:center; padding:6px 14px; }
  .pi-topbar-contacts { margin:0 auto; gap:.9rem; font-size:.76rem; }
}

/* ── Dropdown submenus (2026-10-29) ───────────────────────────────────────
   The nav had eleven flat items with no grouping. Two levels: hover or keyboard focus opens on
   desktop, tap toggles on mobile. :focus-within carries keyboard users without extra JS. */
.pi-nav-links > li { position:relative; }
.pi-caret { display:inline-block; width:0; height:0; margin-left:.4rem; vertical-align:middle;
            border-left:4px solid transparent; border-right:4px solid transparent;
            border-top:5px solid currentColor; opacity:.65; }
.pi-subnav { position:absolute; top:100%; left:0; min-width:230px; margin:0; padding:.4rem 0;
             list-style:none; background:#fff; border:1px solid rgba(var(--bs-primary-rgb), .12);
             border-radius:8px; box-shadow:0 10px 28px -12px rgba(var(--bs-primary-rgb), .35);
             opacity:0; visibility:hidden; transform:translateY(6px);
             transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:60; }
.pi-nav-links > li.pi-has-sub:hover > .pi-subnav,
.pi-nav-links > li.pi-has-sub:focus-within > .pi-subnav,
.pi-nav-links > li.pi-has-sub.is-open > .pi-subnav { opacity:1; visibility:visible; transform:translateY(0); }
.pi-subnav li { margin:0; }
.pi-subnav a { display:block; padding:9px 16px; border-radius:0; font-size:.86rem; font-weight:600;
               color:var(--bs-primary) !important; white-space:nowrap; }
.pi-subnav a:hover, .pi-subnav a:focus-visible { background:rgba(var(--bs-primary-rgb), .07); }
.pi-subnav a.active { background:rgba(var(--bs-primary-rgb), .09); box-shadow:inset 3px 0 0 var(--bs-secondary); }
/* keep the last dropdown inside the viewport */
.pi-nav-links > li:nth-last-child(-n+2) > .pi-subnav { left:auto; right:0; }

@media (max-width: 991.98px) {
  .pi-nav-links > li { position:static; }
  .pi-subnav { position:static; min-width:0; opacity:1; visibility:visible; transform:none;
               border:0; box-shadow:none; background:transparent; padding:0 0 .3rem 0;
               max-height:0; overflow:hidden; transition:max-height .22s ease; }
  .pi-nav-links > li.pi-has-sub.is-open > .pi-subnav { max-height:420px; }
  .pi-nav-links > li.pi-has-sub:hover > .pi-subnav,
  .pi-nav-links > li.pi-has-sub:focus-within > .pi-subnav { max-height:0; }
  .pi-nav-links > li.pi-has-sub.is-open:hover > .pi-subnav { max-height:420px; }
  .pi-subnav a { padding-left:28px; opacity:.9; }
}

/* The open mobile menu was painting BEHIND the hero: .pi-nav had no stacking context of its own,
   so the hero section (positioned, later in the DOM) won. Lift the whole header. */
.pi-nav { position:relative; z-index:1000; }
.pi-topbar { position:relative; z-index:1001; }
@media (max-width: 991.98px) {
  .pi-nav-links { position:absolute; left:0; right:0; top:100%; flex-direction:column;
                  align-items:stretch; background:#fff; padding:.5rem 20px 1rem;
                  border-bottom:1px solid rgba(var(--bs-primary-rgb), .12);
                  box-shadow:0 14px 28px -16px rgba(var(--bs-primary-rgb), .4);
                  display:none; z-index:1000; }
  .pi-nav-links.is-open { display:flex; }
  .pi-nav-links > li.pi-nav-cta-item { margin-top:.6rem; }
  .pi-nav-links > li.pi-nav-cta-item a { text-align:center; }
}

/* ==========================================================================
   Footer brand lockup (2026-10-29). Both marks are dark artwork — the eXp
   mark is black on transparent and hers is navy/gold on white — so rendered
   straight onto the dark footer the brokerage logo was effectively invisible.
   A single light plate carries both and reads at full contrast.
   ========================================================================== */
.pi-footer-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 12px;
    padding: 0.6rem 0.9rem;
    background: #fff;
    border-radius: 8px;
    max-width: 100%;
    flex-wrap: wrap;
}
.pi-footer-lockup__broker { height: 30px; width: auto; display: block; }
.pi-footer-lockup__agent  { height: 42px; width: auto; display: block; }
.pi-footer-lockup__rule {
    width: 1px;
    align-self: stretch;
    min-height: 30px;
    background: rgba(0, 0, 0, 0.16);
}
@media (max-width: 575.98px) {
    .pi-footer-lockup { gap: 0.6rem; padding: 0.5rem 0.7rem; }
    .pi-footer-lockup__broker { height: 24px; }
    .pi-footer-lockup__agent  { height: 34px; }
}

/* ==========================================================================
   Kill the inherited fixed-navbar offset (2026-10-30).
   The probate-site-assets mu-plugin emits `body{padding-top:60px}` "for fixed
   navbar". Both probate themes neutralise it with
   `body.lc-custom-header{padding-top:0!important}` — but LiveCanvas only adds
   that body class when the HEADER comes from an lc_partial. This theme renders
   its header from partials/site-nav.php, so the class is never added and the
   60px survived as a blank white band above the top bar.
   This theme's nav is position:relative, so it never needs the offset.
   ========================================================================== */
body { padding-top: 0 !important; }

/* ── Mobile-nav breakpoint repair (2026-11-03) ──────────────────────────────
   The hamburger turns on at max-width:1199.98px (the 2026-07-28 block above),
   but the 2026-10-29 white-header work put its mobile corrections in a
   max-width:991.98px query. Between 992px and 1199.98px the toggle therefore
   drew WHITE bars on the now-white bar (invisible), and the drawer had no
   background of its own, so the links rendered straight over the hero photo.
   Phone widths were unaffected, which is why a 375px check missed it.

   That same white-header block also re-pinned .pi-nav-inner to a fixed height,
   which the hamburger block had deliberately set to auto — so the open drawer
   escapes the white bar at every width and only looks right where the drawer
   happens to paint its own background.

   Align both to the hamburger's own breakpoint.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
  .pi-nav-inner { height: auto !important; min-height: 92px; }
  .pi-nav-toggle span { background: var(--bs-primary) !important; }
  .pi-nav-links { background: #fff; }
  .pi-nav-links.is-open { border-top: 1px solid rgba(var(--bs-primary-rgb), .12); }
}
@media (max-width: 991.98px) {
  .pi-nav-inner { min-height: 70px; }
}