/*
 Theme Name:   Picostrap5 Probate Child
 Theme URI:    https://probate-credibility.local
 Description:  Child theme for the Probate Real Estate Guide credibility site. Built on Picostrap5 + LiveCanvas.
 Author:       Probate Real Estate Guide
 Author URI:   https://probate-credibility.local
 Template:     picostrap5
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  picostrap5-probate-child
*/

/* ==========================================================================
   CSS Custom Properties — Brand Palette
   ========================================================================== */

:root, [data-bs-theme=light] {
    /* =====================================================================
       BRAND: Probate With Lola  (a Lola Loves Real Estate division)
       Ticket #106174 — palette STATED by the client, sampled-confirmed
       against her logo (teal letterforms + gold ornament).
         Deep Teal     #006D6F   primary
         Champagne Gold#C5A253   accent  ("use gold primarily as an accent")
         Warm Ivory    #FAF8F3   surface
         Charcoal      #292929   ink
         Pale Aqua     #D9EEEE   optional soft accent
       CONTRAST NOTE: Champagne Gold is a LIGHT accent (L=0.383). White on it
       is 2.42:1 and FAILS; Charcoal on it is 6.00:1 and passes. So
       --bs-warning-text is DARK here — the opposite of a dark accent.
       ===================================================================== */
    --bs-primary: #006D6F !important;
    --bs-primary-rgb: 0, 109, 111 !important;
    --bs-secondary: #004C4E !important;
    --bs-secondary-rgb: 0, 76, 78 !important;
    --bs-success: #004C4E !important;
    --bs-success-rgb: 0, 76, 78 !important;
    --bs-info: #006D6F !important;
    --bs-info-rgb: 0, 109, 111 !important;
    --bs-warning: #C5A253 !important;
    --bs-warning-rgb: 197, 162, 83 !important;
    --bs-danger: #B8933F !important;
    --bs-danger-rgb: 184, 147, 63 !important;
    --bs-dark: #004143 !important;
    --bs-dark-rgb: 0, 65, 67 !important;
    --bs-light: #FAF8F3 !important;
    --bs-light-rgb: 250, 248, 243 !important;
    --bs-body-bg: #FFFFFF !important;
    --bs-body-color: #292929 !important;
    --bs-body-color-rgb: 41, 41, 41 !important;
    --bs-border-color: #E3DCCB !important;

    /* Bootstrap paints links from the *-rgb token, not the hex one. */
    --bs-link-color: #004C4E !important;
    --bs-link-color-rgb: 0, 76, 78 !important;
    --bs-link-hover-color: #006D6F !important;
    --bs-link-hover-color-rgb: 0, 109, 111 !important;

    /* Label colour for fills. Gold is LIGHT -> dark ink (6.00:1). */
    --bs-warning-text: #292929 !important;
    --bs-btn-warning-color: #292929 !important;

    /* Derived tokens. bundle.css ships Bootstrap's BLUE defaults for these and
       they are emitted as decimal rgb(), so a hex sweep never finds them. */
    --bs-primary-text-emphasis: #002C2C !important;
    --bs-primary-bg-subtle: #CCE2E2 !important;
    --bs-primary-border-subtle: #99C5C5 !important;
    --bs-secondary-text-emphasis: #001E1F !important;
    --bs-secondary-bg-subtle: #CCDBDC !important;
    --bs-secondary-border-subtle: #99B7B8 !important;
    --bs-success-text-emphasis: #001E1F !important;
    --bs-success-bg-subtle: #CCDBDC !important;
    --bs-success-border-subtle: #99B7B8 !important;
    --bs-info-text-emphasis: #002C2C !important;
    --bs-info-bg-subtle: #CCE2E2 !important;
    --bs-info-border-subtle: #99C5C5 !important;
    --bs-warning-text-emphasis: #4F4121 !important;
    --bs-warning-bg-subtle: #F3ECDD !important;
    --bs-warning-border-subtle: #E8DABA !important;
    --bs-danger-text-emphasis: #4A3B19 !important;
    --bs-danger-bg-subtle: #F1E9D9 !important;
    --bs-danger-border-subtle: #E3D4B2 !important;
    --bs-dark-text-emphasis: #001A1B !important;
    --bs-dark-bg-subtle: #CCD9D9 !important;
    --bs-dark-border-subtle: #99B3B4 !important;

    /* Backward-compatible aliases — page content still uses these */
    --probate-navy: var(--bs-primary);
    --probate-navy-dark: var(--bs-dark);
    --probate-teal: var(--bs-secondary);
    --probate-teal-light: rgba(var(--bs-secondary-rgb), 0.1);
    --probate-amber: var(--bs-warning);
    --probate-amber-hover: var(--bs-danger);
    --probate-amber-ink: var(--bs-warning-text, #292929);
    --cta-amber-ink: var(--bs-warning-text, #292929);
    --amber: var(--bs-warning, #C5A253);
    --navy: var(--bs-primary, #006D6F);
    --teal: var(--bs-secondary, #004C4E);
    /* Champagne lifted for DARK surfaces: 4.27:1 on #006D6F, 6.46:1 on #004C4E.
       Gold itself is only 2.54:1 on the teal band and must never carry text there. */
    --probate-accent-on-dark: #E5D6B3;
    --probate-pale-aqua: #D9EEEE;
    --probate-light-bg: var(--bs-light);
    --probate-white: #FFFFFF;
    --probate-text: var(--bs-body-color);
    --probate-text-muted: #5F5F5F;
    --probate-border: #E3DCCB;
    --font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* LiveCanvas partial reset — ensure header/footer start flush */
#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; }

/* ==========================================================================
   Base Typography
   ========================================================================== */

body {
    font-family: var(--font-body);
    color: var(--probate-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--probate-navy);
}

/* ==========================================================================
   Skip-to-Content Link
   ========================================================================== */

.skip-link.visually-hidden-focusable:focus {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100000;
    padding: 12px 24px;
    background: var(--probate-amber);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    outline: 3px solid var(--probate-navy);
    outline-offset: 2px;
}

/* ==========================================================================
   Picostrap Footer / Colophon — Hide Default
   ========================================================================== */

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

/* --- Link States (Theme Studio responsive) --- */
a { color: var(--probate-teal); text-decoration: underline; text-decoration-color: rgba(31, 122, 111, 0.3); text-underline-offset: 3px; transition: color 0.2s ease; }
a:hover { color: var(--bs-primary); text-decoration-color: var(--bs-primary); }
a:visited { color: var(--probate-teal); opacity: 0.85; }
a:focus { outline: 2px solid var(--probate-amber); outline-offset: 2px; }
a:active { color: var(--probate-amber-hover); }

/* --- Button Variants (Theme Studio responsive) --- */
.btn-amber { background: var(--probate-amber); border-color: var(--probate-amber); color: #fff; }
.btn-amber:hover { background: var(--probate-amber-hover); border-color: var(--probate-amber-hover); }
.btn-outline-teal { color: var(--probate-teal); border-color: var(--probate-teal); }
.btn-outline-teal:hover { background: var(--probate-teal); color: #fff; }
.btn-outline-white { color: #fff; border-color: #fff; }
.btn-outline-white:hover { background: #fff; color: var(--probate-navy); }

/* =============================================
   LiveCanvas Partial CSS Backup
   (duplicated from partial inline styles for
   environments that may strip <style> from
   partial content)
   ============================================= */

/* === ACTIVE FOOTER CSS (ID: 95, Footer - Dark Professional) === */
#lc-footer .fdp *{box-sizing:border-box;margin:0;padding:0}
#lc-footer .fdp{background:var(--probate-navy-dark, #132845);color:#C8CDD3;font-family:"Open Sans",sans-serif;padding:60px 20px 0;text-align:center}
#lc-footer .fdp-logo{font-family:"Montserrat",sans-serif;font-weight:700;font-size:1.6rem;color:#fff;margin-bottom:8px}
#lc-footer .fdp-logo a{color:inherit;text-decoration:none}
#lc-footer .fdp-logo a:hover{color:var(--probate-accent-on-dark, #E5D6B3)}
#lc-footer .fdp-tagline{font-size:.9rem;color:#8B95A1;max-width:500px;margin:0 auto 28px;font-style:italic;line-height:1.6}
#lc-footer .fdp-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin-bottom:28px}
#lc-footer .fdp-nav a{color:rgba(255,255,255,.8);text-decoration:none;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:6px 14px;transition:color .2s}
#lc-footer .fdp-nav a:hover{color:var(--probate-accent-on-dark, #E5D6B3)}
#lc-footer .fdp-social{display:flex;justify-content:center;gap:18px;margin-bottom:32px}
#lc-footer .fdp-social a{color:#8B95A1;text-decoration:none;transition:color .2s;display:flex;align-items:center}
#lc-footer .fdp-social a svg{width:20px;height:20px}
#lc-footer .fdp-social a:hover{color:var(--probate-accent-on-dark, #E5D6B3)}
#lc-footer .fdp-divider{width:60px;height:2px;background:var(--bs-warning, #C5A253);margin:0 auto 32px;border-radius:1px}
#lc-footer .fdp-copy{font-size:.78rem;color:#8B95A1;padding:20px 0;border-top:1px solid rgba(255,255,255,.06);max-width:600px;margin:0 auto}
@media(max-width:575.98px){#lc-footer .fdp{padding:40px 20px 0}#lc-footer .fdp-logo{font-size:1.3rem}}

/* === ACTIVE FOOTER CSS (ID: 94, Footer - Magazine Style) === */
#lc-footer .fmag *{box-sizing:border-box;margin:0;padding:0}
#lc-footer .fmag{background:var(--probate-navy-dark, #132845);color:#C8CDD3;font-family:"Open Sans",sans-serif;padding:0}
#lc-footer .fmag-header{max-width:1200px;margin:0 auto;padding:48px 20px 0;text-align:center;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:0;padding-bottom:24px}
#lc-footer .fmag-logo{font-family:"Montserrat",sans-serif;font-weight:700;font-size:1.5rem;color:#fff;margin-bottom:4px}
#lc-footer .fmag-logo a{color:inherit;text-decoration:none}
#lc-footer .fmag-logo a:hover{color:var(--probate-accent-on-dark, #E5D6B3)}
#lc-footer .fmag-tagline{font-size:.85rem;color:#8B95A1;font-style:italic}
#lc-footer .fmag-cols{max-width:1200px;margin:0 auto;padding:32px 20px;display:grid;grid-template-columns:1.3fr .9fr .8fr 1fr;gap:32px}
#lc-footer .fmag h4{font-family:"Montserrat",sans-serif;font-weight:700;font-size:.95rem;color:#fff;margin-bottom:14px;text-transform:uppercase;letter-spacing:.04em}
#lc-footer .fmag p{font-size:.88rem;line-height:1.7;margin-bottom:8px}
#lc-footer .fmag-links{list-style:none;padding:0;margin:0}
#lc-footer .fmag-links li{margin-bottom:6px}
#lc-footer .fmag-links a{color:#C8CDD3;text-decoration:none;font-size:.88rem;display:inline-flex;align-items:center;gap:6px;transition:color .2s}
#lc-footer .fmag-links a svg{color:var(--probate-accent-on-dark, #E5D6B3);width:12px;height:12px;transition:transform .2s}
#lc-footer .fmag-links a:hover{color:var(--probate-accent-on-dark, #E5D6B3)}
#lc-footer .fmag-links a:hover svg{transform:translateX(3px)}
#lc-footer .fmag-feat{list-style:none;padding:0;margin:0}
#lc-footer .fmag-feat li{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.06)}
#lc-footer .fmag-feat a{color:#C8CDD3;text-decoration:none;font-size:.88rem;transition:color .2s}
#lc-footer .fmag-feat a:hover{color:var(--probate-accent-on-dark, #E5D6B3)}
#lc-footer .fmag-feat .fmag-feat-cat{font-size:.7rem;text-transform:uppercase;color:var(--probate-accent-on-dark, #E5D6B3);font-weight:600;letter-spacing:.06em;display:block;margin-bottom:2px}
#lc-footer .fmag-nl input[type=email]{width:100%;padding:10px 14px;border:1px solid rgba(255,255,255,.15);border-radius:4px;background:rgba(255,255,255,.06);color:#fff;font-size:.88rem;margin-bottom:8px}
#lc-footer .fmag-nl input::placeholder{color:rgba(255,255,255,.4)}
#lc-footer .fmag-nl button{display:inline-block;background:var(--bs-warning, #C5A253);color:#292929;border:none;padding:10px 22px;border-radius:4px;font-family:"Montserrat",sans-serif;font-weight:600;font-size:.85rem;cursor:pointer;transition:filter .2s,transform .15s}
#lc-footer .fmag-nl button:hover{filter:brightness(.85);transform:translateY(-1px)}
#lc-footer .fmag-social{max-width:1200px;margin:0 auto;padding:20px;display:flex;justify-content:center;gap:16px;border-top:1px solid rgba(255,255,255,.08)}
#lc-footer .fmag-social a{color:#8B95A1;text-decoration:none;transition:color .2s;display:flex;align-items:center}
#lc-footer .fmag-social a svg{width:18px;height:18px}
#lc-footer .fmag-social a:hover{color:var(--probate-accent-on-dark, #E5D6B3)}
#lc-footer .fmag-copy{text-align:center;font-size:.75rem;color:#8B95A1;padding:0 20px 20px}
@media(max-width:991.98px){#lc-footer .fmag-cols{grid-template-columns:1fr 1fr;gap:24px}}
@media(max-width:575.98px){#lc-footer .fmag-cols{grid-template-columns:1fr;gap:20px}#lc-footer .fmag-header{padding:32px 20px 16px}}

/* === ACTIVE FOOTER CSS (ID: 93, Footer - CTA-Focused) === */
#lc-footer .fcta *{box-sizing:border-box;margin:0;padding:0}
#lc-footer .fcta-banner{background:var(--bs-warning, #C5A253);padding:48px 20px;text-align:center;font-family:"Montserrat",sans-serif}
#lc-footer .fcta-banner h2{color:#fff;font-size:1.6rem;font-weight:700;margin-bottom:10px}
#lc-footer .fcta-banner p{color:rgba(255,255,255,.9);font-size:1rem;font-family:"Open Sans",sans-serif;margin-bottom:20px;max-width:600px;margin-left:auto;margin-right:auto}
#lc-footer .fcta-btn{display:inline-block;background:#fff;color:var(--probate-accent-on-dark, #E5D6B3)!important;font-family:"Montserrat",sans-serif;font-weight:700;font-size:.95rem;padding:14px 36px;border-radius:50px;text-decoration:none;transition:transform .2s,box-shadow .2s}
#lc-footer .fcta-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,0,0,.2);color:var(--probate-accent-on-dark, #E5D6B3)!important}
#lc-footer .fcta-info{background:var(--probate-navy-dark, #132845);padding:20px;font-family:"Open Sans",sans-serif}
#lc-footer .fcta-info-wrap{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
#lc-footer .fcta-info-brand{color:#fff;font-family:"Montserrat",sans-serif;font-weight:700;font-size:.95rem}
#lc-footer .fcta-info-links{font-size:.82rem;display:flex;flex-wrap:wrap;gap:0;align-items:center}
#lc-footer .fcta-info-links a{color:rgba(255,255,255,.65);text-decoration:none;transition:color .2s;padding:2px 6px}
#lc-footer .fcta-info-links a:hover{color:var(--probate-accent-on-dark, #E5D6B3)}
#lc-footer .fcta-info-links .fcta-sep{color:rgba(255,255,255,.25);font-size:.6rem}
#lc-footer .fcta-copy{color:rgba(255,255,255,.45);font-size:.75rem}
@media(max-width:767.98px){
#lc-footer .fcta-banner{padding:36px 20px}
#lc-footer .fcta-banner h2{font-size:1.3rem}
#lc-footer .fcta-info-wrap{flex-direction:column;text-align:center}
#lc-footer .fcta-info-links{justify-content:center}
}

/* === ACTIVE FOOTER CSS (ID: 92, Footer - Minimal Strip) === */
#lc-footer .fms *{box-sizing:border-box;margin:0;padding:0}
#lc-footer .fms{background:#f5f5f5;padding:24px 20px;font-family:"Open Sans",sans-serif}
#lc-footer .fms-wrap{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
#lc-footer .fms-brand{font-family:"Montserrat",sans-serif;font-weight:700;font-size:1rem;color:var(--probate-navy, #1A3A5C)}
#lc-footer .fms-brand a{color:inherit;text-decoration:none}
#lc-footer .fms-brand a:hover{color:var(--probate-accent-on-dark, #E5D6B3)}
#lc-footer .fms-links{font-size:.85rem;display:flex;flex-wrap:wrap;gap:0;align-items:center}
#lc-footer .fms-links a{color:#555;text-decoration:none;transition:color .2s;padding:2px 8px}
#lc-footer .fms-links a:hover{color:var(--probate-accent-on-dark, #E5D6B3)}
#lc-footer .fms-links .fms-sep{color:#ccc;font-size:.75rem}
#lc-footer .fms-social{display:flex;gap:12px;align-items:center}
#lc-footer .fms-social a{color:#888;text-decoration:none;transition:color .2s;display:flex;align-items:center}
#lc-footer .fms-social a svg{width:16px;height:16px}
#lc-footer .fms-social a:hover{color:var(--probate-accent-on-dark, #E5D6B3)}
#lc-footer .fms-copy{max-width:1200px;margin:0 auto;padding:12px 20px 0;text-align:center;font-size:.75rem;color:#aaa;border-top:1px solid var(--probate-border, #DCD5C8)}
@media(max-width:767.98px){
#lc-footer .fms-wrap{flex-direction:column;text-align:center}
#lc-footer .fms-links{justify-content:center}
#lc-footer .fms-social{justify-content:center}
}

/* === ACTIVE FOOTER CSS (ID: 91, Footer - 4-Column Extended) === */
#lc-footer .f4c *{box-sizing:border-box;margin:0;padding:0}
#lc-footer .f4c{max-width:1200px;margin:0 auto;padding:50px 20px 30px;display:grid;grid-template-columns:1.4fr .8fr .8fr 1fr;gap:30px;font-family:"Open Sans",sans-serif;color:#C8CDD3}
#lc-footer .f4c h3{font-family:"Montserrat",sans-serif;font-weight:700;font-size:1.05rem;color:#fff;margin-bottom:14px}
#lc-footer .f4c p{font-size:.88rem;line-height:1.65;margin-bottom:10px}
#lc-footer .f4c-links{list-style:none;padding:0;margin:0}
#lc-footer .f4c-links li{margin-bottom:6px}
#lc-footer .f4c-links a{color:#C8CDD3;text-decoration:none;font-size:.88rem;transition:color .2s,padding-left .2s}
#lc-footer .f4c-links a:hover{color:var(--probate-accent-on-dark, #E5D6B3);padding-left:4px}
#lc-footer .f4c-disc{font-size:.78rem;color:#8B95A1;font-style:italic;margin-top:10px;line-height:1.5}
#lc-footer .f4c-contact{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:.88rem}
#lc-footer .f4c-contact svg{width:14px;height:14px;color:var(--probate-accent-on-dark, #E5D6B3);flex-shrink:0}
#lc-footer .f4c-nl input[type=email]{width:100%;padding:10px 14px;border:1px solid rgba(255,255,255,.15);border-radius:4px;background:rgba(255,255,255,.06);color:#fff;font-size:.88rem;margin-bottom:8px}
#lc-footer .f4c-nl input[type=email]::placeholder{color:rgba(255,255,255,.4)}
#lc-footer .f4c-nl button{display:inline-block;background:var(--bs-warning, #C5A253);color:#292929;border:none;padding:10px 22px;border-radius:4px;font-family:"Montserrat",sans-serif;font-weight:600;font-size:.85rem;cursor:pointer;transition:filter .2s,transform .15s}
#lc-footer .f4c-nl button:hover{filter:brightness(.85);transform:translateY(-1px)}
#lc-footer .f4c-copy{max-width:1200px;margin:0 auto;padding:16px 20px;border-top:1px solid rgba(255,255,255,.08);text-align:center;font-size:.78rem;color:#8B95A1}
@media(max-width:991.98px){#lc-footer .f4c{grid-template-columns:1fr 1fr}}
@media(max-width:575.98px){#lc-footer .f4c{grid-template-columns:1fr}}

/* === ACTIVE HEADER CSS (ID: 90, Header - Bold Statement) === */
.lch-bs *{box-sizing:border-box;margin:0;padding:0}
.lch-bs-contact{background:var(--probate-navy-dark, #132845);padding:6px 0;font-family:"Open Sans",sans-serif;font-size:.75rem;color:rgba(255,255,255,.8)}
.lch-bs-contact .bs-wrap{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center}
.lch-bs-contact .bs-info{display:flex;gap:20px;align-items:center}
.lch-bs-contact .bs-info-item{display:flex;align-items:center;gap:5px}
.lch-bs-contact .bs-info-item svg{width:12px;height:12px;color:var(--probate-accent-on-dark, #E5D6B3)}
.lch-bs-contact .bs-cta-top{display:inline-block;background:var(--bs-warning, #C5A253);color:#292929!important;font-family:"Montserrat",sans-serif;font-weight:600;font-size:.7rem;padding:5px 16px;border-radius:3px;text-decoration:none;text-transform:uppercase;letter-spacing:.06em;transition:filter .2s}
.lch-bs-contact .bs-cta-top:hover{filter:brightness(.85);color:#fff!important}
.lch-bs-brand{background:#fff;padding:16px 0;text-align:center;border-bottom:1px solid var(--probate-border, #DCD5C8);font-family:"Montserrat",sans-serif}
.lch-bs-brand .bs-name{font-size:1.8rem;font-weight:700;color:var(--probate-navy, #1A3A5C)}
.lch-bs-brand .bs-name a{color:inherit;text-decoration:none}
.lch-bs-brand .bs-name a:hover{color:var(--probate-accent-on-dark, #E5D6B3)}
.lch-bs-brand .bs-sub{font-size:.75rem;color:#999;margin-top:2px;font-family:"Open Sans",sans-serif}
.lch-bs-navbar{background:var(--probate-navy, #1A3A5C);padding:0}
.lch-bs-navbar .bs-wrap{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:center;position:relative;min-height:44px}
.lch-bs .bs-nav{display:flex;list-style:none;align-items:center;justify-content:center}
.lch-bs .bs-item{position:relative}
.lch-bs .bs-link{color:rgba(255,255,255,.92)!important;font-family:"Montserrat",sans-serif;font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;padding:12px 14px;text-decoration:none;display:flex;align-items:center;gap:4px;white-space:nowrap;transition:color .2s}
.lch-bs .bs-link:hover{color:var(--probate-accent-on-dark, #E5D6B3)!important}
.lch-bs .bs-dd{display:none;position:absolute;top:100%;left:0;background:var(--probate-navy, #1A3A5C);border:1px solid rgba(255,255,255,.1);border-radius:6px;box-shadow:0 8px 25px rgba(0,0,0,.25);min-width:210px;padding:6px 0;z-index:1031;list-style:none;margin:0}
.lch-bs .bs-has-dd.open .bs-dd,.lch-bs .bs-has-dd:hover .bs-dd{display:block}
.lch-bs .bs-dd a{color:rgba(255,255,255,.85);font-size:.85rem;padding:8px 18px;display:block;text-decoration:none;font-weight:500;transition:background .2s,color .2s}
.lch-bs .bs-dd a:hover{background:rgba(255,255,255,.1);color:var(--probate-accent-on-dark, #E5D6B3)}
.lch-bs .bs-burger{display:none;position:absolute;right:20px;top:50%;transform:translateY(-50%);background:0 0;border:2px solid rgba(255,255,255,.5);border-radius:4px;color:#fff;padding:4px 8px;cursor:pointer;line-height:0}
.lch-bs .bs-burger:hover{border-color:var(--bs-warning, #C5A253);color:var(--probate-accent-on-dark, #E5D6B3)}
@media(max-width:991.98px){
.lch-bs .bs-burger{display:flex}
.lch-bs .bs-nav{display:none;flex-direction:column;width:100%}
.lch-bs .bs-nav.show{display:flex}
.lch-bs .bs-link{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);width:100%;justify-content:flex-start}
.lch-bs .bs-dd{position:static;box-shadow:none;border:none;background:rgba(0,0,0,.15);border-radius:0}
.lch-bs .bs-has-dd:hover .bs-dd{display:none}
.lch-bs .bs-has-dd.open .bs-dd{display:block}
.lch-bs-brand .bs-name{font-size:1.4rem}
}
@media(max-width:575.98px){
.lch-bs-contact .bs-wrap{flex-direction:column;gap:6px;text-align:center}
.lch-bs-contact .bs-info{flex-wrap:wrap;justify-content:center}
}

/* === ACTIVE HEADER CSS (ID: 89, Header - Transparent Overlay) === */
.lch-to *{box-sizing:border-box;margin:0;padding:0}
.lch-to{background:transparent;position:absolute;top:0;left:0;right:0;z-index:1030;padding:0;font-family:"Montserrat",sans-serif}
.lch-to .to-wrap{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:20px 24px;flex-wrap:wrap}
.lch-to .to-brand{font-weight:300;font-size:1.4rem;color:#fff;text-decoration:none;letter-spacing:.02em}
.lch-to .to-brand:hover{color:var(--probate-accent-on-dark, #E5D6B3)}
.lch-to .to-nav{display:flex;list-style:none;align-items:center;gap:0}
.lch-to .to-item{position:relative}
.lch-to .to-link{color:rgba(255,255,255,.92)!important;font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;padding:10px 14px;text-decoration:none;display:flex;align-items:center;gap:4px;white-space:nowrap;transition:color .2s}
.lch-to .to-link:hover{color:var(--probate-accent-on-dark, #E5D6B3)!important}
.lch-to .to-dd{display:none;position:absolute;top:100%;left:0;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:6px;box-shadow:0 12px 30px rgba(0,0,0,.3);min-width:210px;padding:6px 0;z-index:1031;list-style:none;margin:0}
.lch-to .to-has-dd.open .to-dd,.lch-to .to-has-dd:hover .to-dd{display:block}
.lch-to .to-dd a{color:rgba(255,255,255,.85);font-size:.85rem;padding:10px 18px;display:block;text-decoration:none;font-weight:500;transition:background .2s,color .2s}
.lch-to .to-dd a:hover{background:rgba(255,255,255,.08);color:var(--probate-accent-on-dark, #E5D6B3)}
.lch-to .to-cta{display:inline-block;border:2px solid rgba(255,255,255,.6);color:#fff!important;font-weight:600;font-size:.8rem;padding:8px 22px;border-radius:50px;text-decoration:none;transition:all .2s;letter-spacing:.04em}
.lch-to .to-cta:hover{background:var(--bs-warning, #C5A253);border-color:var(--bs-warning, #C5A253);color:#292929!important}
.lch-to .to-burger{display:none;background:0 0;border:2px solid rgba(255,255,255,.5);border-radius:4px;color:#fff;padding:5px 8px;cursor:pointer;line-height:0}
.lch-to .to-burger:hover{border-color:var(--bs-warning, #C5A253);color:var(--probate-accent-on-dark, #E5D6B3)}
@media(max-width:991.98px){
.lch-to .to-burger{display:flex}
.lch-to .to-nav,.lch-to .to-cta{display:none}
.lch-to .to-nav.show{display:flex;flex-direction:column;width:100%;background:rgba(0,0,0,.9);backdrop-filter:blur(12px);border-radius:8px;margin-top:12px;padding:8px 0}
.lch-to .to-link{padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.06);width:100%}
.lch-to .to-dd{position:static;box-shadow:none;border:none;background:rgba(255,255,255,.05);backdrop-filter:none;border-radius:0}
.lch-to .to-has-dd:hover .to-dd{display:none}
.lch-to .to-has-dd.open .to-dd{display:block}
}

/* === ACTIVE HEADER CSS (ID: 88, Header - Modern Split) === */
.lch-ms *{box-sizing:border-box;margin:0;padding:0}
.lch-ms-bar{display:flex;justify-content:space-between;align-items:center;padding:0 24px;background:#fff;border-bottom:1px solid var(--probate-border, #DCD5C8);font-family:"Montserrat",sans-serif;min-height:56px}
.lch-ms .ms-left{display:flex;align-items:center;gap:24px}
.lch-ms .ms-brand{font-weight:700;font-size:1.2rem;color:var(--probate-navy, #1A3A5C)}
.lch-ms .ms-brand a{color:inherit;text-decoration:none}
.lch-ms .ms-brand a:hover{color:var(--probate-accent-on-dark, #E5D6B3)}
.lch-ms .ms-desk-nav{display:flex;list-style:none;align-items:center}
.lch-ms .ms-item{position:relative}
.lch-ms .ms-link{color:var(--probate-navy, #1A3A5C)!important;font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;padding:16px 10px;text-decoration:none;display:flex;align-items:center;gap:4px;white-space:nowrap;transition:color .2s}
.lch-ms .ms-link:hover{color:var(--probate-accent-on-dark, #E5D6B3)!important}
.lch-ms .ms-dd{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--probate-border, #DCD5C8);border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,.1);min-width:200px;padding:6px 0;z-index:1031;list-style:none;margin:0}
.lch-ms .ms-has-dd.open .ms-dd,.lch-ms .ms-has-dd:hover .ms-dd{display:block}
.lch-ms .ms-dd a{color:#333;font-size:.85rem;padding:8px 18px;display:block;text-decoration:none;font-weight:500;transition:background .2s,color .2s}
.lch-ms .ms-dd a:hover{background:var(--probate-cream, #FAF7F2);color:var(--probate-accent-on-dark, #E5D6B3)}
.lch-ms .ms-toggle{width:42px;height:42px;border:2px solid var(--probate-navy, #1A3A5C);border-radius:8px;cursor:pointer;display:none;align-items:center;justify-content:center;background:0 0;color:var(--probate-navy, #1A3A5C);line-height:0;transition:border-color .2s,color .2s}
.lch-ms .ms-toggle:hover{border-color:var(--bs-warning, #C5A253);color:var(--probate-accent-on-dark, #E5D6B3)}
.lch-ms .ms-cta{display:inline-block;background:var(--bs-warning, #C5A253);color:#292929!important;font-family:"Montserrat",sans-serif;font-weight:600;font-size:.8rem;padding:8px 18px;border-radius:4px;text-decoration:none;white-space:nowrap;transition:filter .2s,transform .15s}
.lch-ms .ms-cta:hover{filter:brightness(.85);transform:translateY(-1px);color:#fff!important}
.lch-ms-drawer{position:fixed;top:0;right:-340px;width:320px;height:100vh;background:var(--probate-navy-dark, #132845);color:#fff;z-index:9999;transition:right .3s ease;padding:60px 30px 30px;overflow-y:auto;font-family:"Montserrat",sans-serif}
.lch-ms-drawer.open{right:0}
.lch-ms-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9998}
.lch-ms-overlay.open{display:block}
.lch-ms .ms-close{position:absolute;top:16px;right:16px;background:0 0;border:none;color:#fff;cursor:pointer;padding:4px;line-height:0}
.lch-ms .ms-close:hover{color:var(--probate-accent-on-dark, #E5D6B3)}
.lch-ms .ms-drawer-link{display:block;padding:14px 0;color:#fff;text-decoration:none;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.1);transition:padding-left .2s}
.lch-ms .ms-drawer-link:hover{padding-left:6px;color:var(--probate-accent-on-dark, #E5D6B3)}
.lch-ms .ms-drawer-sub{display:block;padding:10px 0 10px 20px;color:rgba(255,255,255,.7);text-decoration:none;font-size:.9rem;border-bottom:1px solid rgba(255,255,255,.05)}
.lch-ms .ms-drawer-sub:hover{color:var(--probate-accent-on-dark, #E5D6B3)}
.lch-ms .ms-drawer-cta{display:block;margin-top:24px;padding:14px 24px;background:var(--bs-warning, #C5A253);color:#292929!important;text-align:center;border-radius:6px;text-decoration:none;font-weight:600;font-size:.95rem;transition:filter .2s,transform .15s}
.lch-ms .ms-drawer-cta:hover{filter:brightness(.85);transform:translateY(-1px);color:#fff!important}
@media(max-width:991.98px){
.lch-ms .ms-desk-nav,.lch-ms .ms-cta{display:none!important}
.lch-ms .ms-toggle{display:flex}
}

/* === ACTIVE HEADER CSS (ID: 87, Header - Centered Brand) === */
.lch-cb *{box-sizing:border-box;margin:0;padding:0}
.lch-cb{background:#fff;border-bottom:1px solid var(--probate-border, #DCD5C8);text-align:center;padding:14px 0 0;font-family:"Montserrat",sans-serif}
.lch-cb .cb-logo{font-size:1.5rem;font-weight:700;color:var(--probate-navy, #1A3A5C)}
.lch-cb .cb-logo a{color:inherit;text-decoration:none}
.lch-cb .cb-logo a:hover{color:var(--probate-accent-on-dark, #E5D6B3)}
.lch-cb .cb-tagline{font-size:.75rem;color:#999;margin-top:2px;font-family:"Open Sans",sans-serif;font-style:italic}
.lch-cb .cb-burger{display:none;background:0 0;border:2px solid var(--probate-navy, #1A3A5C);border-radius:4px;color:var(--probate-navy, #1A3A5C);padding:4px 8px;cursor:pointer;margin:8px auto 0;line-height:0}
.lch-cb .cb-burger:hover{border-color:var(--bs-warning, #C5A253);color:var(--probate-accent-on-dark, #E5D6B3)}
.lch-cb .cb-nav{display:flex;justify-content:center;align-items:center;padding:10px 0;flex-wrap:wrap}
.lch-cb .cb-link{color:var(--probate-navy, #1A3A5C);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;padding:6px 14px;text-decoration:none;transition:color .2s;display:inline-flex;align-items:center;gap:4px}
.lch-cb .cb-link:hover{color:var(--probate-accent-on-dark, #E5D6B3)}
.lch-cb .cb-dd-wrap{position:relative;display:inline-block}
.lch-cb .cb-dd{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--probate-border, #DCD5C8);border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,.1);min-width:200px;padding:6px 0;z-index:1031;text-align:left}
.lch-cb .cb-dd-wrap.open .cb-dd,.lch-cb .cb-dd-wrap:hover .cb-dd{display:block}
.lch-cb .cb-dd a{display:block;padding:8px 18px;color:#333;font-size:.85rem;font-weight:500;text-decoration:none;transition:background .2s,color .2s}
.lch-cb .cb-dd a:hover{background:var(--probate-cream, #FAF7F2);color:var(--probate-accent-on-dark, #E5D6B3)}
@media(max-width:767.98px){
.lch-cb .cb-nav{display:none;flex-direction:column}
.lch-cb .cb-nav.show{display:flex}
.lch-cb .cb-burger{display:flex;justify-content:center}
.lch-cb .cb-link{padding:10px 16px;border-bottom:1px solid var(--probate-border, #DCD5C8);width:100%}
.lch-cb .cb-dd{position:static;transform:none;box-shadow:none;border:none;border-radius:0}
.lch-cb .cb-dd-wrap.open .cb-dd{display:block}
.lch-cb .cb-dd-wrap:hover .cb-dd{display:none}
}

/* === ACTIVE HEADER CSS (ID: 86, Header - Business Elite) === */
.lch-be *{box-sizing:border-box;margin:0;padding:0}
.lch-be-top{background:var(--probate-navy-dark, #132845);padding:5px 0;font-size:.75rem;font-family:"Open Sans",sans-serif;color:rgba(255,255,255,.8)}
.lch-be-top .be-wrap{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:0 20px}
.lch-be-top a{color:rgba(255,255,255,.8);text-decoration:none;transition:color .2s}
.lch-be-top a:hover{color:var(--probate-accent-on-dark, #E5D6B3)}
.lch-be-top .be-contact{display:flex;gap:16px;align-items:center}
.lch-be-top .be-contact-item{display:flex;align-items:center;gap:5px}
.lch-be-top .be-contact-item svg{width:12px;height:12px}
.lch-be-top .be-socials{display:flex;gap:10px;align-items:center}
.lch-be-top .be-socials a{display:flex;align-items:center}
.lch-be-top .be-socials svg{width:14px;height:14px}
.lch-be-main{background:var(--probate-navy, #1A3A5C);padding:0}
.lch-be-main .be-wrap{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:0 20px;min-height:54px}
.lch-be .be-brand{font-family:"Montserrat",sans-serif;font-weight:700;font-size:1.3rem;color:#fff!important;text-decoration:none;white-space:nowrap}
.lch-be .be-brand:hover{color:var(--probate-accent-on-dark, #E5D6B3)!important}
.lch-be .be-nav{display:flex;list-style:none;align-items:center}
.lch-be .be-item{position:relative}
.lch-be .be-link{color:rgba(255,255,255,.9)!important;font-family:"Montserrat",sans-serif;font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;padding:16px 12px;text-decoration:none;display:flex;align-items:center;gap:4px;white-space:nowrap;transition:color .2s}
.lch-be .be-link:hover{color:var(--probate-accent-on-dark, #E5D6B3)!important}
.lch-be .be-dd{display:none;position:absolute;top:100%;left:0;background:var(--probate-navy, #1A3A5C);border:1px solid rgba(255,255,255,.1);border-radius:6px;box-shadow:0 8px 25px rgba(0,0,0,.25);min-width:210px;padding:6px 0;z-index:1031;list-style:none;margin:0}
.lch-be .be-has-dd.open .be-dd,.lch-be .be-has-dd:hover .be-dd{display:block}
.lch-be .be-dd a{color:rgba(255,255,255,.85);font-size:.85rem;padding:8px 18px;display:block;text-decoration:none;font-weight:500;transition:background .2s,color .2s}
.lch-be .be-dd a:hover{background:rgba(255,255,255,.1);color:var(--probate-accent-on-dark, #E5D6B3)}
.lch-be .be-cta{display:inline-block;background:var(--bs-warning, #C5A253);color:#292929!important;font-family:"Montserrat",sans-serif;font-weight:600;font-size:.8rem;padding:8px 20px;border-radius:4px;text-decoration:none;white-space:nowrap;transition:filter .2s,transform .15s}
.lch-be .be-cta:hover{filter:brightness(.85);transform:translateY(-1px);color:#fff!important}
.lch-be .be-hamburger{display:none;background:0 0;border:2px solid rgba(255,255,255,.5);border-radius:4px;color:#fff;padding:5px 8px;cursor:pointer;line-height:0}
.lch-be .be-hamburger:hover{border-color:var(--bs-warning, #C5A253);color:var(--probate-accent-on-dark, #E5D6B3)}
@media(max-width:991.98px){
.lch-be .be-hamburger{display:flex}
.lch-be .be-nav{display:none;flex-direction:column;width:100%;order:10;padding-top:8px}
.lch-be .be-nav.show{display:flex}
.lch-be .be-cta{display:none}
.lch-be .be-link{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.08);width:100%}
.lch-be .be-dd{position:static;box-shadow:none;border:none;background:rgba(0,0,0,.15);border-radius:0}
.lch-be .be-has-dd:hover .be-dd{display:none}
.lch-be .be-has-dd.open .be-dd{display:block}
.lch-be-main .be-wrap{flex-wrap:wrap}
}
@media(max-width:575.98px){
.lch-be-top .be-wrap{flex-direction:column;gap:4px;text-align:center}
.lch-be-top .be-socials{justify-content:center}
}

/* === ACTIVE HEADER CSS (ID: 74, Header - Minimal Clean) === */
.lch-mc{background:var(--probate-navy, #1A3A5C);padding:0;font-family:"Montserrat",-apple-system,BlinkMacSystemFont,sans-serif;position:sticky;top:0;z-index:1030;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.lch-mc .mc-wrap{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:0 1rem;min-height:52px}
.lch-mc .mc-brand{font-weight:700;font-size:1.1rem;color:#fff!important;text-decoration:none;white-space:nowrap}
.lch-mc .mc-brand:hover{color:var(--probate-accent-on-dark, #E5D6B3)!important}
.lch-mc .mc-toggle{display:none;background:0 0;border:2px solid rgba(255,255,255,.5);border-radius:4px;padding:6px 8px;cursor:pointer;color:rgba(255,255,255,.9);line-height:0}
.lch-mc .mc-toggle:hover{border-color:var(--bs-warning, #C5A253);color:var(--probate-accent-on-dark, #E5D6B3)}
.lch-mc .mc-nav{display:flex;list-style:none;margin:0;padding:0;align-items:center}
.lch-mc .mc-item{position:relative}
.lch-mc .mc-link{color:rgba(255,255,255,.88)!important;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;padding:16px 10px;text-decoration:none;display:flex;align-items:center;gap:4px;white-space:nowrap;transition:color .2s}
.lch-mc .mc-link:hover{color:var(--probate-accent-on-dark, #E5D6B3)!important}
.lch-mc .mc-link svg{opacity:.7}
.lch-mc .mc-dd{display:none;position:absolute;top:100%;left:0;background:var(--probate-navy, #1A3A5C);border:1px solid rgba(255,255,255,.1);border-radius:6px;box-shadow:0 8px 25px rgba(0,0,0,.2);min-width:200px;padding:6px 0;z-index:1031;list-style:none;margin:0}
.lch-mc .mc-has-dd.open .mc-dd,.lch-mc .mc-has-dd:hover .mc-dd{display:block}
.lch-mc .mc-dd a{color:rgba(255,255,255,.85);font-size:.85rem;padding:8px 18px;display:block;text-decoration:none;font-weight:500;transition:background .2s,color .2s}
.lch-mc .mc-dd a:hover{background:rgba(255,255,255,.1);color:var(--probate-accent-on-dark, #E5D6B3)}
@media(max-width:1199.98px){
.lch-mc .mc-toggle{display:flex}
.lch-mc .mc-nav{display:none;flex-direction:column;width:100%;padding:8px 0}
.lch-mc .mc-nav.show{display:flex}
.lch-mc .mc-link{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);width:100%}
.lch-mc .mc-item:last-child .mc-link{border-bottom:0}
.lch-mc .mc-dd{position:static;box-shadow:none;border:none;background:rgba(0,0,0,.15);border-radius:0}
.lch-mc .mc-has-dd:hover .mc-dd{display:none}
.lch-mc .mc-has-dd.open .mc-dd{display:block}
}

/* === ACTIVE FOOTER CSS (ID: 73, Footer - 3-Column Business) === */
#lc-footer{background-color:var(--probate-navy-dark, #132845);color:#C8CDD3;font-family:"Open Sans",-apple-system,BlinkMacSystemFont,sans-serif;padding:3rem 0 0;margin:0;line-height:1.7}
#lc-footer *,#lc-footer *::before,#lc-footer *::after{box-sizing:border-box}
#lc-footer a{color:#C8CDD3;text-decoration:none;transition:color .2s}
#lc-footer a:hover{color:var(--probate-accent-on-dark, #E5D6B3);text-decoration:underline}
#lc-footer .f3c-wrap{max-width:1140px;margin:0 auto;padding:0 1rem;display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:2.5rem}
#lc-footer h3{font-family:"Montserrat",-apple-system,BlinkMacSystemFont,sans-serif;font-weight:700;font-size:1.125rem;color:#FFFFFF;margin-bottom:1rem;letter-spacing:-.01em}
#lc-footer p{font-size:.9rem;margin-bottom:.75rem}
#lc-footer .f3c-links{list-style:none;padding:0;margin:0}
#lc-footer .f3c-links li{margin-bottom:.5rem}
#lc-footer .f3c-links a{font-size:.9rem;display:inline-flex;align-items:center;gap:6px;padding:2px 0;text-decoration:none}
#lc-footer .f3c-links a svg{color:var(--probate-accent-on-dark, #E5D6B3);transition:transform .2s}
#lc-footer .f3c-links a:hover svg{transform:translateX(3px)}
#lc-footer .f3c-links a:hover{text-decoration:none}
#lc-footer .f3c-disc{font-size:.8rem;color:#8B95A1;margin-top:1rem;font-style:italic;line-height:1.5}
#lc-footer .f3c-cta{display:inline-block;background:var(--bs-warning, #C5A253);color:#FFFFFF!important;font-family:"Montserrat",sans-serif;font-weight:600;font-size:.9rem;padding:.625rem 1.5rem;border-radius:.375rem;text-decoration:none!important;transition:filter .2s,transform .15s;margin-top:.75rem}
#lc-footer .f3c-cta:hover{filter:brightness(.85);transform:translateY(-1px);text-decoration:none!important;color:#FFFFFF!important}
#lc-footer .f3c-contact{display:flex;align-items:flex-start;gap:8px;margin-bottom:.5rem;font-size:.9rem}
#lc-footer .f3c-contact svg{flex-shrink:0;width:16px;height:16px;margin-top:3px;color:var(--probate-accent-on-dark, #E5D6B3)}
#lc-footer .f3c-copy{background:var(--probate-navy-dark, #0E1F35);color:#8B95A1;font-size:.8rem;text-align:center;padding:1rem;margin-top:2.5rem;line-height:1.5}
@media(max-width:991.98px){#lc-footer .f3c-wrap{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:575.98px){#lc-footer .f3c-wrap{grid-template-columns:1fr;gap:1.5rem}#lc-footer{padding:2rem 0 0}}
/* ==========================================================================
   TICKET #106174 — Probate With Lola. Template-defect fixes + brand fit.
   Every colour below is either a STATED client colour or a derived tint of
   one, and every pairing was computed before it was written.
   ========================================================================== */

/* --- 1. Champagne Gold is a LIGHT accent: white on it is 2.42:1 and FAILS.
       Every gold fill carries Charcoal ink (6.00:1). ---------------------- */
.btn-amber,
.btn-amber:hover,
.btn-amber:focus,
.btn-amber:active,
a.btn-amber,
.btn.btn-warning,
.btn.btn-warning:hover,
.btn.btn-warning:focus,
.btn-warning.text-white {
    color: var(--bs-warning-text, #292929) !important;
}
.btn-amber { border-color: var(--bs-warning) !important; }
.btn-amber:hover { background-color: var(--bs-danger) !important; border-color: var(--bs-danger) !important; }

/* --- 2. Navbar: Warm Ivory so the client's full-colour logo reads, with a
       Champagne Gold hairline as the accent. Deep teal links = 9.23:1. ----- */
#lc-header.bs-hdr-mc,
.navbar.bs-hdr-mc {
    background-color: var(--bs-light) !important;
    border-bottom: 2px solid var(--bs-warning);
}
.navbar.bs-hdr-mc .nav-link,
.navbar.bs-hdr-mc .navbar-brand { color: var(--bs-secondary) !important; }
.navbar.bs-hdr-mc .nav-link:hover,
.navbar.bs-hdr-mc .nav-link:focus { color: var(--bs-primary) !important; }
.navbar.bs-hdr-mc .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23004C4E' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar.bs-hdr-mc .navbar-brand img { height: 48px; width: auto; display: block; }
@media (max-width: 575.98px) { .navbar.bs-hdr-mc .navbar-brand img { height: 38px; } }

/* --- 3. Focus: the global amber box reads as a hard border in the navbar.
       Keep real focus rings everywhere else; use an underline inside it. --- */
a:focus { outline: 2px solid var(--bs-secondary); outline-offset: 2px; }
.navbar a:focus { outline: none; }
.navbar a:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 3px; }

/* --- 4. Dark bands: gold is only 2.54:1 on #006D6F, so text and icons that
       sit on a dark surface use the lifted champagne (4.27:1 / 6.46:1). ---- */
.lead-magnet-section .bi,
.lead-magnet-section li i,
.final-cta-section .bi,
.hero-section .bi-arrow-right { color: var(--probate-accent-on-dark, #E5D6B3) !important; }
#lc-footer .f3c-copy { color: #D7E2E2 !important; }

/* --- 5. DEFECT: site CSS sets input{color:var(--dark-text)} globally, so a
       typed value renders near-black on the translucent-over-teal band
       (1.36:1 on the White build). Scope light ink to the dark wrapper only.
       <option> must stay dark for the browser's own white native menu. ----- */
.form-wrapper input,
.form-wrapper textarea,
.form-wrapper select,
.form-wrapper .forminator-input,
.form-wrapper .forminator-textarea,
.form-wrapper .wpforms-field input,
.form-wrapper .wpforms-field textarea {
    color: #FFFFFF !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
}
.form-wrapper option { color: #292929 !important; background-color: #FFFFFF !important; }
.form-wrapper input::placeholder,
.form-wrapper textarea::placeholder,
.form-wrapper .forminator-input::placeholder {
    color: rgba(255, 255, 255, 0.82) !important;
    opacity: 1 !important;
}
.form-wrapper input:-webkit-autofill,
.form-wrapper textarea:-webkit-autofill {
    -webkit-text-fill-color: #FFFFFF !important;
    -webkit-box-shadow: 0 0 0 1000px #004C4E inset !important;
    caret-color: #FFFFFF;
}
.form-wrapper label,
.form-wrapper .forminator-label,
.form-wrapper .wpforms-field-label { color: #FFFFFF !important; }

/* --- 6. DEFECT: Forminator regenerates style-<id>.css with
       ::placeholder{color:#888} on #EDEDED = 3.03:1. The generated file is
       rewritten by the plugin, so the override has to live here. ---------- */
.forminator-ui input::placeholder,
.forminator-ui textarea::placeholder,
.forminator-input::placeholder,
.forminator-textarea::placeholder,
.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder {
    color: #5A5A5A !important;
    opacity: 1 !important;
}

/* --- 7. DEFECT: a light card inside a dark band inherits the band's white
       text. Reset ink on the card so nothing renders white-on-white. ------ */
.pb-hero-form,
.hero-section .card,
.hero-section .bg-white,
.hero-section .form-card {
    color: var(--bs-body-color) !important;
}
.pb-hero-form__eyebrow { color: var(--bs-primary) !important; }

/* --- 8. DEFECT: an <img> that itself carries .img-placeholder inherits
       min-height 380px + object-fit:fill and gets stretched. ------------- */
img.img-placeholder {
    background: none !important;
    min-height: 0 !important;
    object-fit: cover !important;
    height: auto !important;
}

/* --- 9. Brand furniture ------------------------------------------------- */
.lola-divider {
    width: 72px; height: 2px; margin: 1.25rem auto;
    background: var(--bs-warning); border: 0; opacity: 1;
}
.lola-eyebrow {
    font-family: var(--font-heading); font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; font-size: .78rem;
    color: var(--bs-secondary);
}
.hero-section .lola-eyebrow,
.lead-magnet-section .lola-eyebrow,
.final-cta-section .lola-eyebrow { color: var(--probate-accent-on-dark, #E5D6B3); }
.lola-headshot {
    border-radius: 14px; width: 100%; height: auto;
    border: 3px solid var(--bs-warning);
    box-shadow: 0 10px 30px rgba(0, 76, 78, .18);
}
.lola-aqua-panel {
    background: var(--probate-pale-aqua, #D9EEEE);
    border-left: 4px solid var(--bs-primary);
    border-radius: 10px; padding: 1.5rem 1.75rem;
}
.lola-aqua-panel, .lola-aqua-panel p, .lola-aqua-panel li { color: #292929; }


/* --- 10. Bootstrap compiles every .btn-<variant> to LITERAL hex in its --bs-btn-*
   tokens (.btn-warning is frozen at #ffc107), so redefining --bs-warning alone does
   not recolour a single button. Override the button tokens themselves. ------------ */
.btn.btn-warning, .btn-warning {
    --bs-btn-color: var(--bs-warning-text, #292929); --bs-btn-bg: var(--bs-warning, #C5A253); --bs-btn-border-color: var(--bs-warning, #C5A253);
    --bs-btn-hover-color: var(--bs-warning-text, #292929); --bs-btn-hover-bg: var(--bs-danger, #B8933F); --bs-btn-hover-border-color: var(--bs-danger, #B8933F);
    --bs-btn-active-color: var(--bs-warning-text, #292929); --bs-btn-active-bg: var(--bs-danger, #B8933F); --bs-btn-active-border-color: var(--bs-danger, #B8933F);
    --bs-btn-disabled-color: var(--bs-warning-text, #292929); --bs-btn-disabled-bg: var(--bs-warning, #C5A253); --bs-btn-disabled-border-color: var(--bs-warning, #C5A253);
    --bs-btn-focus-shadow-rgb: 197, 162, 83;
}
.btn.btn-primary, .btn-primary {
    --bs-btn-color: #fff; --bs-btn-bg: var(--bs-primary, #006D6F); --bs-btn-border-color: var(--bs-primary, #006D6F);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-secondary, #004C4E); --bs-btn-hover-border-color: var(--bs-secondary, #004C4E);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #004C4E; --bs-btn-active-border-color: #004C4E;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #006D6F; --bs-btn-disabled-border-color: #006D6F;
    --bs-btn-focus-shadow-rgb: 0, 109, 111;
}
.btn.btn-secondary, .btn-secondary {
    --bs-btn-color: #fff; --bs-btn-bg: var(--bs-secondary, #004C4E); --bs-btn-border-color: var(--bs-secondary, #004C4E);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-primary, #006D6F); --bs-btn-hover-border-color: var(--bs-primary, #006D6F);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #006D6F; --bs-btn-active-border-color: #006D6F;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #004C4E; --bs-btn-disabled-border-color: #004C4E;
    --bs-btn-focus-shadow-rgb: 0, 76, 78;
}
.btn.btn-outline-warning, .btn-outline-warning {
    --bs-btn-color: #4F4121; --bs-btn-border-color: var(--bs-warning, #C5A253);
    --bs-btn-hover-color: var(--bs-warning-text, #292929); --bs-btn-hover-bg: #C5A253; --bs-btn-hover-border-color: #C5A253;
    --bs-btn-active-color: var(--bs-warning-text, #292929); --bs-btn-active-bg: #C5A253; --bs-btn-active-border-color: #C5A253;
}
.btn.btn-outline-primary, .btn-outline-primary {
    --bs-btn-color: #006D6F; --bs-btn-border-color: var(--bs-primary, #006D6F);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-primary, #006D6F); --bs-btn-hover-border-color: var(--bs-primary, #006D6F);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #006D6F; --bs-btn-active-border-color: #006D6F;
}
/* Forminator/WPForms submit buttons take the same gold + charcoal pairing. */
.forminator-button-submit, .forminator-button, .wpforms-submit {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    color: var(--bs-warning-text, #292929) !important;
}
.forminator-button-submit:hover, .forminator-button:hover, .wpforms-submit:hover {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    color: var(--bs-warning-text, #292929) !important;
}

/* --- 11. Motion signature. Quiet and dignified: a gentle rise on the hero, and a
   slow champagne sweep across the gold rule. The BASE state is fully visible, and
   every animation lives inside prefers-reduced-motion: no-preference, so reduced
   motion is honoured without ever stranding content at opacity:0. ---------------- */
@keyframes lolaRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes lolaGoldSweep {
    0%   { background-position: -160% 0; }
    100% { background-position: 260% 0; }
}
@keyframes lolaCrest {
    0%, 100% { transform: scaleX(1); opacity: 1; }
    50%      { transform: scaleX(1.12); opacity: .82; }
}
.lola-divider {
    background-image: linear-gradient(90deg,
        var(--bs-warning) 0%, var(--bs-warning) 38%,
        #F1E6C9 50%, var(--bs-warning) 62%, var(--bs-warning) 100%);
    background-size: 260% 100%;
    background-color: var(--bs-warning);
}
@media (prefers-reduced-motion: no-preference) {
    .hero-section .lola-eyebrow { animation: lolaRise .8s cubic-bezier(.22,.61,.36,1) both; }
    .hero-section h1            { animation: lolaRise .9s cubic-bezier(.22,.61,.36,1) .10s both; }
    .hero-section .section-subheading { animation: lolaRise .9s cubic-bezier(.22,.61,.36,1) .20s both; }
    .hero-section .d-flex       { animation: lolaRise .9s cubic-bezier(.22,.61,.36,1) .30s both; }
    .lola-divider               { animation: lolaGoldSweep 7s linear .6s infinite, lolaCrest 7s ease-in-out .6s infinite; }
    .lola-aqua-panel            { animation: lolaRise .9s cubic-bezier(.22,.61,.36,1) both; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-section .lola-eyebrow,
    .hero-section h1,
    .hero-section .section-subheading,
    .hero-section .d-flex,
    .lola-aqua-panel { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   REVEAL FAIL-SAFE — content must never stay invisible.
   Both reveal systems on this build initialise and then stall: AOS reaches
   .aos-init but never .aos-animate (20/0 measured), and .cf-reveal only
   sometimes gains .cf-in. The result is a page of white space for REAL
   visitors, not just screenshots. These rules animate anything still waiting
   after 1.1s, so the entrance remains an enhancement and the content is
   guaranteed. When an observer does fire, .aos-animate / .cf-in match and
   these selectors stop applying, so the original animation is untouched.
   Never "fix" this with a blanket `animation: none` — that strands the very
   same elements at opacity 0.
   ========================================================================== */
@keyframes cfFailsafeIn { from { opacity: 0; } to { opacity: 1; transform: none; } }
[data-aos]:not(.aos-animate),
html.cf-flare .cf-reveal:not(.cf-in) {
    animation: cfFailsafeIn .5s ease-out 1.1s both;
}
@media (prefers-reduced-motion: reduce) {
    [data-aos]:not(.aos-animate),
    html.cf-flare .cf-reveal:not(.cf-in) { animation: none; opacity: 1; transform: none; }
}

/* Final CTA band pinned to the brand ramp (deep teal -> teal). */
.final-cta-section { background-color: #004C4E !important;
  background-image: linear-gradient(135deg, #004C4E 0%, #006D6F 100%) !important; }

/* ===== HERO: image left, copy right-aligned, form as a full-width bar ===== */
.hero-section { background-image: linear-gradient(118deg, #004C4E 0%, #006D6F 62%, #00797C 100%) !important; }
.lola-hero-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 36px; align-items: center; }
.lola-hero-figure { border-radius: 4px; overflow: hidden; box-shadow: 0 26px 60px rgba(0,40,42,.42);
  border-top: 4px solid #C5A253; }
.lola-hero-figure img { width: 100%; height: 100%; max-height: 330px; object-fit: cover; display: block; }
.lola-hero-copy { text-align: right; }
.lola-hero-copy .lola-divider { margin-left: auto; margin-right: 0; }
.lola-hero-copy .hero-btns { display: flex; gap: 18px; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px; }
/* superseded by the full-bleed bar rules below */
@media (max-width: 991.98px) {
  .lola-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .lola-hero-copy { text-align: left; }
  .lola-hero-copy .lola-divider { margin-left: 0; }
  .lola-hero-copy .hero-btns { justify-content: flex-start; }
}
/* message field spans the bar */

/* superseded 2026-09-23: the old hero-bar block lived here; it is fully replaced
   by the consolidated O.6 block below. Only these two structural rules remain. */
.hero-section { padding-bottom: 0 !important; position: relative; }
.hero-section > .lola-hero-bar { display: block; }
.hero-section > *:last-child { margin-bottom: 0 !important; }

/* ==========================================================================
   ROUND-2 GATE FIXES — 2026-09-22
   Every rule here answers a specific CredForge hard-gate failure. The per-page
   inline <style> blocks in post_content load AFTER this stylesheet, so each
   rule that has to beat one of them carries !important on purpose.
   ========================================================================== */

/* --- R2.1  cta-recolor-aa: the Forminator submit renders its label inside a
   <span>, and the per-page inline block styles `p, li, a, span, label, input,
   textarea, select, button { color: var(--dark-text) }`. That span therefore
   stopped inheriting the button's adaptive label colour and froze at #292929
   — 2.92:1 on a dark accent. Make the label span inherit the button again so
   it keeps tracking var(--bs-warning-text) under every accent. -------------- */
.forminator-button-submit span,
.forminator-button span,
.wpforms-submit span,
.btn span,
.btn-amber span { color: inherit !important; }

/* --- R2.2  axe-aa (SUPERSEDED 2026-09-22).
   The 6 colour-contrast nodes were Forminator form 204's field + consent labels
   rendering charcoal-on-teal (2.36:1) because the form was embedded in the DARK
   .contact-hero masthead and the per-page inline block paints every `label` with
   var(--dark-text). The dark-band ink overrides that used to live here are gone:
   /contact/ now carries exactly ONE form and it sits in the light "Send a Message"
   card in .contact-main-section, where the same charcoal reads 16:1. Re-add a
   scoped light-ink block here if a form is ever put back on a dark band. ------ */

/* --- R2.3  layout-check / responsive-header / visual-defects: a persistent
   12px horizontal overflow at 390. Bootstrap's .container pads 12px a side,
   but a .g-5 row sets --bs-gutter-x:3rem and pulls -24px a side, so every g-5
   row hangs 12px past the container on both edges. A 48px gutter is wrong on a
   390px phone anyway — drop the gutter to the container's own rhythm below lg
   so the negative margin and the padding cancel again. --------------------- */
@media (max-width: 991.98px) {
    .container > .row.g-5,
    .container > .row.gx-5,
    .container-fluid > .row.g-5,
    .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

/* --- R2.4  layout-check: AOS parks a not-yet-revealed element at
   translate3d(±100px,0,0). layout-check measures 900ms after DOMContentLoaded,
   before the 1.1s reveal fail-safe lands, so those parked elements reported an
   88px spill. Reveals are decorative: clip the horizontal axis at the page box
   so an entrance animation can never create a real scrollbar. `clip` (not
   `hidden`) is used deliberately — it does not create a scroll container and
   so does not break position: sticky on the navbar. ------------------------ */
html, body { overflow-x: clip; }
@supports not (overflow: clip) {
    body { overflow-x: hidden; }
}
/* Belt and braces: never let a fade-in park an element off the RIGHT edge. */
[data-aos^="fade-right"]:not(.aos-animate),
[data-aos^="fade-up-right"]:not(.aos-animate),
[data-aos^="fade-down-right"]:not(.aos-animate) { transform: translate3d(0, 0, 0) !important; }

/* --- R2.5  visual-defects: "adjacent buttons don't match" — the hero pair read
   16px/600 (.btn-amber) vs 16px/400 (.btn-outline-light, which inherits the
   inline block's `a { font-weight: 400 }`). Buttons in one group must share
   size AND weight. --------------------------------------------------------- */
.hero-btns .btn,
.hero-btns .btn-amber,
.hero-btns .btn-outline-light { font-size: 1rem !important; font-weight: 600 !important; }

/* --- R2.6  visual-defects: hero fold budget. The opening screen has to show
   that there is a page below it. Trim the masthead's own vertical rhythm only
   — the form bar keeps its full-bleed width, its rgba(255,255,255,.10) fill,
   its 3-column grid and its flush left/right/bottom edges untouched. ------- */
.hero-section.section-padding-lg { padding-top: 36px !important; padding-bottom: 0 !important; }
.hero-section h1 { font-size: clamp(1.9rem, 3.1vw, 2.65rem); line-height: 1.16; margin-bottom: .6rem !important; }
.hero-section .section-subheading { font-size: 1rem; line-height: 1.6; }
.hero-section .lola-divider { margin-top: .8rem; margin-bottom: .8rem; }
.lola-hero-bar .wpforms-form { row-gap: 8px !important; column-gap: 18px !important; }
.lola-hero-bar input[type="text"],
.lola-hero-bar input[type="email"] { padding-top: 7px !important; padding-bottom: 7px !important; }
.lola-hero-bar .wpforms-submit { padding: 10px 26px !important; }
@media (max-width: 991.98px) {
    /* the bar stacks on phones, so the masthead has to give the rest of the
       page room there too */
    .hero-section.section-padding-lg { padding-top: 34px !important; }
    /* The figure goes full-width below 992px while the height stayed pinned at 210px, so the
       box became 696x210 (ratio 3.31) against the photo's own 1.53 — object-fit:cover then threw
       away more than half the frame and cropped both subjects' heads off. Let the height follow
       the image's proportions instead of pinning it; nothing here needs a fixed-height box. */
    .lola-hero-figure img { height: auto; max-height: none; }
}

/* ==========================================================================
   OWNER REVISIONS — 2026-09-22 (second pass)
   ========================================================================== */

/* --- O.1  Hero heading -> body gap. The showcase script LOCKS the h1 and the
   subheading to their tallest slide (min-height) and then scales each headline
   up to fill that box, so the dead space under a SHORT headline showed as an
   oversized gap. Pull the divider and the body copy up so all three slides read
   the same, and stop the h1's own bottom margin stacking on top of it. ------ */
.hero-section h1 { margin-bottom: .25rem !important; }
.lola-hero-copy .lola-divider { margin-top: .55rem !important; margin-bottom: .55rem !important; }
.hero-section .section-subheading { margin-top: 0 !important; }
/* hero-showcase.js locks h1 + subheading to the TALLEST slide via inline
   min-height, and that reserved slack is exactly the gap the owner flagged: on
   a short headline the box stays tall and the body copy is pushed away from it.
   The same script also scales each headline UP to fill the box, so the lock is
   redundant — release it and every slide closes the gap. Do NOT add display:flex
   here: it corrupts the script's own offsetHeight measurement pass and the
   binary-search fit then picks its 1.45x ceiling for every slide. */
.hero-section h1,
/* NOT min-height:0 — hero-showcase.js locks the subheading to the tallest slide
   (sub.style.minHeight) precisely so the buttons below never move between slides.
   Overriding it here reintroduced a 13px jump on the shorter slide. The reserved
   space sits BELOW the paragraph, where it is invisible, so there is no gap cost. */

/* --- O.2  Phone + email as a deliberate pair under the hero portrait.
   The pair lives in .lola-hero-media WITH the figure so the two-column hero
   grid still sees exactly two items — as a bare sibling it became a third grid
   item and pushed the copy into the narrow column. ------------------------- */
.lola-hero-media { display: block; min-width: 0; }
.lola-hero-contact {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 20px; margin-top: 20px; align-items: center;
}
.lola-hero-contact__item {
    display: flex; align-items: center; gap: 9px; min-width: 0;
    font-size: .93rem; line-height: 1.3;
}
.lola-hero-contact__item .bi { color: #E5D6B3; font-size: 1rem; flex: 0 0 auto; }
.lola-hero-contact a {
    color: #FFFFFF !important; text-decoration: none; font-weight: 600;
    min-width: 0; white-space: nowrap;
}
/* the email is long; let it shrink to fit its column rather than break mid-word */
.lola-hero-contact__item:last-child { font-size: .82rem; }
.lola-hero-contact__item:last-child a { overflow-wrap: normal; }
.lola-hero-contact a::after { content: " \2192"; margin-left: .35em; color: #E5D6B3; font-weight: 400; }
.lola-hero-contact a:hover, .lola-hero-contact a:focus-visible { text-decoration: underline; }
@media (max-width: 575.98px) {
    .lola-hero-contact { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* --- O.4  A hero background that is this site's own photography, not the
   template's shared gradient. The photo is a media-library Adobe Stock asset
   (home-exterior-landscaped.jpg, id 645895427) and is used nowhere else on the
   site. The brand ramp stays on top as a scrim so every headline, the eyebrow
   and both buttons keep their measured contrast. ---------------------------- */
.hero-section {
    background-image:
        /* a soft vignette under the portrait's caption corner: the phone/email pair is
           SMALL white text and axe reports text-over-image as "incomplete", never as a
           violation, so its contrast has to be guaranteed by construction, not measured
           by the gate. This keeps that corner >= 7:1 whatever the photo does there. */
        radial-gradient(ellipse 74% 64% at 18% 84%, rgba(0, 44, 46, .88) 0%, rgba(0, 44, 46, .30) 62%, rgba(0, 44, 46, 0) 82%),
        linear-gradient(256deg, rgba(0, 62, 64, .93) 0%, rgba(0, 76, 78, .86) 42%, rgba(0, 109, 111, .62) 100%),
        url("/wp-content/uploads/2026/09/home-exterior-landscaped.jpg") !important;
    background-size: auto, cover, cover !important;
    background-position: center, center, center 42% !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
}
/* the showcase script injects its own greyscale texture (the shared template
   photo). The hero now carries real photography, so retire the texture layer. */
.hero-section .cf-hero-texture { display: none !important; }

/* --- O.6  Interior mastheads carry the page's single photograph as a section
   background, behind the same brand scrim as the hero. Each photo below is used
   exactly ONCE across the whole site. ------------------------------------- */
.lola-masthead {
    background-size: cover !important;
    background-position: center 40% !important;
    background-repeat: no-repeat !important;
    position: relative;
}
.lola-masthead--understanding-probate    { background-image: linear-gradient(104deg, rgba(0,62,64,.95) 0%, rgba(0,76,78,.90) 46%, rgba(0,109,111,.87) 100%), url("/wp-content/uploads/2026/09/legal-guidance-documents.jpg") !important; }
/* VQA (med): photo kept, crop corrected. At the inherited default of 40% the
   383px band showed the photo from 24%-64%, which sliced the head off at the
   hairline and ran the headline across the sitter's face. 10% shows 6%-45.9%:
   the whole head and shoulders, with the headline clear of the face. */
.lola-masthead--selling-inherited-property { background-image: linear-gradient(104deg, rgba(0,62,64,.95) 0%, rgba(0,76,78,.90) 46%, rgba(0,109,111,.87) 100%), url("/wp-content/uploads/2026/09/realtor-professional-portrait.jpg") !important;
                                           background-position: center center, center 10% !important; }
.lola-masthead--preparing-home-for-sale  { background-image: linear-gradient(104deg, rgba(0,62,64,.95) 0%, rgba(0,76,78,.90) 46%, rgba(0,109,111,.87) 100%), url("/wp-content/uploads/2026/09/preparing-the-home-boxes.jpg") !important; }
/* VQA (med): was advisor-with-family.jpg, cropped through the crown of the head
   with the subject laughing broadly and shoved into the right third of the frame.
   Wrong register for a page read by someone who has just buried a relative.
   Replaced with a reassuring-hand image already licensed in this library, and
   positioned at 8% so the 383px band shows the sitter's head AND the hand on her
   shoulder (visible slice 4.8%-44.7% of the photo) instead of a headless torso. */
.lola-masthead--executor-resources       { background-image: linear-gradient(104deg, rgba(0,62,64,.95) 0%, rgba(0,76,78,.90) 46%, rgba(0,109,111,.87) 100%), url("/wp-content/uploads/2026/09/a-hand-on-the-shoulder.jpg") !important;
                                           background-position: center center, center 8% !important; }
/* VQA (med): /probate-faq/ gives up its photograph so that a-hand-on-the-shoulder
   can move to /executor-resources/, which had a broadly-laughing stock portrait
   on a page about settling a deceased relative's estate. A flat brand band is an
   approved masthead treatment on this site (/inherited-property-options/ ships
   one), and .faq-hero already paints background-color:var(--navy) underneath. */
.lola-masthead--probate-faq              { background-image: none !important; }
.lola-masthead--local-probate-resources  { background-image: linear-gradient(104deg, rgba(0,62,64,.95) 0%, rgba(0,76,78,.90) 46%, rgba(0,109,111,.87) 100%), url("/wp-content/uploads/2026/09/neighborhood-street.jpg") !important; }
/* VQA (med): was reviewing-options-outdoors.jpg, three laughing stock business
   people all cut off through the forehead by the top of the 213px band, so the
   masthead read as three headless torsos, in a register that is wrong for the
   page grieving families actually land on.
   There is no spare photo to swap in: every tonally appropriate image in this
   library is already placed exactly once (mother-and-daughter-embrace is the
   home hero portrait, a-hand-on-the-shoulder has moved to /executor-resources/,
   and polish/image-reuse requires one placement per photo). Rather than move the
   problem to another page, this band drops to the flat brand colour, which is a
   shipped masthead treatment on this site (/inherited-property-options/ and now
   /probate-faq/). .contact-hero already paints background-color:var(--navy). */
.lola-masthead--contact                  { background-image: none !important; }

/* --- O.5  "Handling an Estate Is Never Easy": the CONTAINER is centred on the
   page, the COPY inside it reads left-aligned. --------------------------- */
.lola-estate-copy { text-align: left; }
.lola-estate-copy > * { text-align: left; }
.lola-estate-copy .section-heading,
.lola-estate-copy .section-subheading { text-align: left; }
.lola-estate-copy .empathy-list { text-align: left; padding-left: 0; }
/* the page's own .section-subheading is `margin: 0 auto` + max-width, which
   indents it inside the (already centred) container. Flush it left with the
   heading so the whole block shares one left edge. */
.lola-estate-copy .section-subheading,
.lola-estate-copy > p { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }
.lola-estate-copy .lola-divider,
.lola-estate-copy .section-heading + .lola-divider { margin-left: 0 !important; margin-right: auto !important; }

/* ============================================================================
   O.6  HERO FORM BAR — owner revisions 2026-09-23, consolidated.
   This replaces an earlier stack of seven appended override blocks that fought
   each other (a captcha sharing one grid cell with the submit, and an
   align-self:end that opened a 47px hole above Property Address).
   Fixed properties, unchanged: full-bleed width, translucent background, flush
   to the left, right and bottom edges of .hero-section.
   Layout: col 1 stacks Name / Email / Property Address; col 2 holds Message;
   row 3 of the right-hand side carries the captcha and the submit as SEPARATE
   columns, so they can never overlap at any width.
   ========================================================================= */

.hero-section > .lola-hero-bar { margin-top: 88px !important; margin-bottom: 0 !important; }
.lola-hero-bar {
    width: 100%;
    padding: 18px clamp(20px, 4vw, 64px) 18px !important;
    /* the glass treatment: the teal field reads through a 10% white scrim with a
       saturated blur behind it, capped by the brand's gold rule. Restored
       2026-09-23 — it was lost when the superseded hero block was deleted. */
    background: rgba(255, 255, 255, .10) !important;
    -webkit-backdrop-filter: saturate(140%) blur(6px);
    backdrop-filter: saturate(140%) blur(6px);
    border-top: 3px solid #C5A253;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.lola-hero-bar .lola-bar-head { margin-bottom: 8px !important; }
.lola-hero-bar .lola-bar-note { font-size: 12.5px; line-height: 1.25; }

/* --- the grid -------------------------------------------------------------
   3 tracks: [fields] [captcha slot] [submit slot]. Without a captcha the middle
   track collapses to 0 and Message simply spans both right-hand tracks.        */
.lola-hero-bar .wpforms-container { margin: 0 !important; max-width: none !important; }
.lola-hero-bar .wpforms-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 22px;
    row-gap: 10px;
    align-items: start;                     /* everything tops out: no dead gaps */
}
.lola-hero-bar .wpforms-container .wpforms-form .wpforms-field-container { display: contents !important; }
.lola-hero-bar .wpforms-field {
    margin: 0 !important; padding: 0 !important;
    width: auto !important; max-width: none !important; min-width: 0;
}

.lola-hero-bar .wpforms-field-name     { grid-column: 1; grid-row: 1; }
.lola-hero-bar .wpforms-field-email    { grid-column: 1; grid-row: 2; }
.lola-hero-bar .wpforms-field-text     { grid-column: 1; grid-row: 3; }
.lola-hero-bar .wpforms-field-textarea { grid-column: 2 / span 2; grid-row: 1 / span 2; }
.lola-hero-bar .wpforms-submit-container {
    grid-column: 3; grid-row: 3;
    margin: 0 !important; padding: 0 !important;
    display: flex; justify-content: center; align-items: center;
}
.lola-hero-bar .wpforms-submit { margin: 0 !important; }

/* --- captcha present: the middle track opens to the widget's real 304px ----- */
.lola-hero-bar .wpforms-form:has(.wpforms-recaptcha-container),
.lola-hero-bar .wpforms-form:has(.g-recaptcha),
.lola-hero-bar .wpforms-form:has(.wpforms-field-captcha),
.lola-hero-bar .wpforms-form:has(.wpforms-field-hcaptcha) {
    grid-template-columns: minmax(0, 1fr) 304px minmax(150px, auto);
}
.lola-hero-bar .wpforms-recaptcha-container,
.lola-hero-bar .g-recaptcha,
.lola-hero-bar .wpforms-field-captcha,
.lola-hero-bar .wpforms-field-hcaptcha {
    grid-column: 2; grid-row: 3;
    margin: 0 !important; align-self: start; justify-self: start;
    max-width: 100%;
}
/* against a 78px widget the button reads best optically centred on it */
.lola-hero-bar .wpforms-form:has(.wpforms-recaptcha-container) .wpforms-submit-container,
.lola-hero-bar .wpforms-form:has(.g-recaptcha) .wpforms-submit-container,
.lola-hero-bar .wpforms-form:has(.wpforms-field-captcha) .wpforms-submit-container { align-items: center; justify-content: center; }

/* --- type: tight leading, small fields ------------------------------------- */
.lola-hero-bar .wpforms-field-label {
    color: #EDF4F3 !important; font-size: 12.5px !important; font-weight: 700 !important;
    line-height: 1.15 !important; margin: 0 0 3px !important; padding: 0 !important; display: block;
}
.lola-hero-bar .wpforms-field-sublabel,
.lola-hero-bar .wpforms-field-description { color: #D3E2E1 !important; line-height: 1.2 !important; margin-top: 2px !important; }
.lola-hero-bar input[type="text"],
.lola-hero-bar input[type="email"],
.lola-hero-bar input[type="tel"],
.lola-hero-bar textarea {
    background: rgba(255, 255, 255, .94) !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    border-radius: 3px !important; color: #292929 !important;
    width: 100% !important; height: auto !important; min-height: 0 !important;
    font-size: 14px !important; line-height: 1.2 !important; padding: 8px 11px !important;
}
.lola-hero-bar textarea { max-height: none !important; resize: none; overflow: auto; }
.lola-hero-bar .wpforms-field-textarea { display: flex; flex-direction: column; align-self: stretch; }
.lola-hero-bar .wpforms-field-textarea > .wpforms-field-label { flex: 0 0 auto; }
.lola-hero-bar .wpforms-field-textarea textarea { flex: 1 1 auto; }
.lola-hero-bar .wpforms-submit {
    background: #C5A253 !important; color: #292929 !important; border: 0 !important;
    font-weight: 700 !important;
    line-height: 1.2 !important; white-space: nowrap;   /* padding left at the theme default */
}

/* --- below lg: one column, button follows the message ---------------------- */
@media (max-width: 991.98px) {
    .hero-section > .lola-hero-bar { margin-top: 56px !important; }
    .lola-hero-bar .wpforms-form,
    .lola-hero-bar .wpforms-form:has(.wpforms-recaptcha-container),
    .lola-hero-bar .wpforms-form:has(.g-recaptcha),
    .lola-hero-bar .wpforms-form:has(.wpforms-field-captcha) {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
    }
    .lola-hero-bar .wpforms-field,
    .lola-hero-bar .wpforms-submit-container,
    .lola-hero-bar .wpforms-recaptcha-container,
    .lola-hero-bar .g-recaptcha,
    .lola-hero-bar .wpforms-field-captcha,
    .lola-hero-bar .wpforms-field-hcaptcha { grid-column: 1 !important; grid-row: auto !important; }
    .lola-hero-bar textarea,
    .lola-hero-bar .forminator-textarea { height: 76px !important; min-height: 76px !important; }
    .lola-hero-bar .wpforms-submit-container { justify-content: flex-start; }
}

/* flush bottom edge, and the slider dots float over the copy instead of
   sitting under the bar */
.hero-section > .lola-hero-bar .wpforms-container,
.hero-section > .lola-hero-bar form { margin-bottom: 0 !important; }
.hero-section > .dv-hero-dots,
.hero-section .dv-hero-dots {
    position: absolute !important; left: 50% !important; right: auto !important;
    transform: translateX(-50%) !important;
    bottom: auto !important; top: 22px !important;
    margin: 0 !important; padding: 0 !important; z-index: 3;
}

/* --- phone + email are a PAIR: one shared size, one per line ---------------- */
.lola-hero-contact {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important; margin-top: 18px; align-items: center;
}
.lola-hero-contact__item,
.lola-hero-contact__item:last-child {
    display: flex; align-items: center; gap: 9px; min-width: 0;
    font-size: .93rem !important; line-height: 1.3;
}
.lola-hero-contact__item .bi { color: #E5D6B3; font-size: 1rem; flex: 0 0 auto; }
.lola-hero-contact a {
    color: #FFFFFF !important; text-decoration: none; font-weight: 600;
    white-space: nowrap; min-width: 0;
}
.lola-hero-contact a::after { content: " \2192"; margin-left: .35em; color: #E5D6B3; font-weight: 400; white-space: nowrap; }
.lola-hero-contact a:hover, .lola-hero-contact a:focus-visible { text-decoration: underline; }
@media (max-width: 575.98px) {
    .lola-hero-contact__item,
    .lola-hero-contact__item:last-child { font-size: .85rem !important; }
    .lola-hero-contact a { white-space: normal; overflow-wrap: anywhere; }
}

/* --- hero heading: fluid, balanced, fewer orphaned words -------------------- */
.hero-section h1 {
    font-size: clamp(1.45rem, 4.1vw, 2.65rem) !important;
    line-height: 1.12 !important;
    text-wrap: balance; overflow-wrap: break-word; hyphens: none;
}

/* --- buttons: labels wrap rather than run off ------------------------------ */
.hero-btns .btn,
.hero-btns .btn-amber,
.hero-btns .btn-outline-light {
    white-space: normal; max-width: 100%; overflow-wrap: break-word; text-align: center;
    padding-inline: clamp(14px, 2.2vw, 28px);
    font-size: clamp(.85rem, 1.1vw, 1rem) !important;
}
@media (max-width: 575.98px) {
    .lola-hero-copy .hero-btns { gap: 10px; }
    .lola-hero-copy .hero-btns .btn { flex: 1 1 100%; }
}

/* ---- O.6b  Column balance. The two columns share the same grid rows, so the
   right-hand stack cannot be made shorter by shrinking the textarea: the
   reCAPTCHA is a fixed 78px third-party iframe sitting in the last row, and
   that row is what sets the bottom edge. Instead, bottom-align the Property
   Address field so the left column ends flush with the captcha, and let the
   textarea fill the two rows above so the right side reads as one block. ---- */
@media (min-width: 992px) {
    .lola-hero-bar .wpforms-form:has(.wpforms-recaptcha-container) .wpforms-field-text,
    .lola-hero-bar .wpforms-form:has(.g-recaptcha) .wpforms-field-text,
    .lola-hero-bar .wpforms-form:has(.wpforms-field-captcha) .wpforms-field-text { align-self: end; }
}

/* ---- O.6c  Owner revision 2026-09-23 (second pass)
   · the submit fills its grid track, so it narrows on its own when the
     reCAPTCHA claims the middle track and widens when there is none
   · its corners match the FORM INPUTS (3px), not the theme's pill buttons
   · the hero's inner container gets the same 88px above it as the form bar
     leaves below it, so the block sits symmetrically in the section -------- */
.lola-hero-bar .wpforms-submit-container { justify-self: stretch; }
.lola-hero-bar .wpforms-container .wpforms-submit,
.lola-hero-bar .wpforms-submit {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    /* mu-plugins/probate-site-assets.php:466 emits an INLINE
       `.wpforms-container .wpforms-submit{border-radius:50px!important}` for the
       site-wide CTA pill. A body <style> outranks the theme at equal specificity,
       so this is scoped one level deeper to match the form inputs here only —
       every other WPForms button on the site stays a pill. */
    border-radius: 3px !important;   /* matches .lola-hero-bar input/textarea */
}
.hero-section > .container { margin-top: 52px; }   /* 36px hero padding + 52 = 88 */
@media (max-width: 991.98px) {
    .hero-section > .container { margin-top: 24px; }
    .lola-hero-bar .wpforms-submit { width: auto !important; }
}

/* ---- O.6d  The submit row and its button stretch to whatever the row is:
   with a reCAPTCHA present the row is the widget's 78px and the button matches
   it exactly; with no captcha the row collapses to its natural height and the
   button follows. No fixed heights, so nothing needs re-tuning if the captcha
   type changes. The widget itself stays at Google's default size. ---------- */
@media (min-width: 992px) {
    .lola-hero-bar .wpforms-submit-container {
        align-self: stretch !important;
        align-items: stretch !important;
        justify-self: stretch !important;
    }
    .lola-hero-bar .wpforms-container .wpforms-submit,
    .lola-hero-bar .wpforms-submit { height: 100% !important; }
}

/* ---- O.6e  With no captcha the middle track is 0 wide but its column gap is
   still there, so a submit sitting in column 3 was inset 18px from the Message
   field spanning columns 2-3 above it. Span the submit across the same two
   tracks by default; the captcha branch below puts it back in column 3, where
   the widget legitimately occupies the middle track. --------------------- */
@media (min-width: 992px) {
    .lola-hero-bar .wpforms-submit-container { grid-column: 2 / span 2 !important; }
    .lola-hero-bar .wpforms-form:has(.wpforms-recaptcha-container) .wpforms-submit-container,
    .lola-hero-bar .wpforms-form:has(.g-recaptcha) .wpforms-submit-container,
    .lola-hero-bar .wpforms-form:has(.wpforms-field-captcha) .wpforms-submit-container,
    .lola-hero-bar .wpforms-form:has(.wpforms-field-hcaptcha) .wpforms-submit-container {
        grid-column: 3 !important;
    }
}

/* ---- O.6f  Property Address grows with its row, like the submit does: when a
   reCAPTCHA sets the row to 78px the address input fills it instead of sitting
   short at the bottom, and with no captcha it collapses back to the natural
   field height. Label stays pinned to the top of the field. --------------- */
@media (min-width: 992px) {
    .lola-hero-bar .wpforms-field-text {
        align-self: stretch !important;
        display: flex; flex-direction: column;
    }
    .lola-hero-bar .wpforms-field-text > .wpforms-field-label { flex: 0 0 auto; }
    .lola-hero-bar .wpforms-field-text input[type="text"] { flex: 1 1 auto; height: auto !important; }
}

/* ── Forminator "flat" inputs: give the field a visible edge ──────────────────
   Forminator's flat design sets `border-width:0; border-style:none` on
   .forminator-input and relies on a grey fill for definition. Where the form's
   own generated stylesheet makes that fill white (Jackson + Karamanoukian's
   attorney-referral form) the field has no visible boundary at all and you
   cannot tell where to click.

   A 2px bottom border is the affordance. Colour comes from the Bootstrap custom
   properties — including the `-rgb` companions the ATL theme customizer sets —
   so recolouring the site recolours these and no brand hex is hardcoded. The
   .55 alpha clears WCAG 1.4.11 Non-text Contrast (3:1) against BOTH white and
   Forminator's #EDEDED flat fill.

   SPECIFICITY: the rule being overridden is
     .forminator-ui.forminator-custom-form[data-design="flat"] .forminator-input
   in forminator-form-flat.base.min.css — (0,4,0), and it loads after the child
   theme. So this reuses Forminator's own selector and adds the `body` type
   selector to reach (0,4,1). No !important, and no invented classes.

   `--material` forms (contact, cash-offer, hero) draw their own underline and
   are deliberately NOT matched. The focus ring is added to, never replaced, so
   keyboard focus is unaffected. */
body .forminator-ui.forminator-custom-form[data-design="flat"] .forminator-input,
body .forminator-ui.forminator-custom-form[data-design="flat"] .forminator-textarea {
  /* 1px, not 2px: the resting line reads much lighter this way. The COLOUR
     cannot be lightened instead — .55 alpha is already at the WCAG 1.4.11 floor
     (3.43:1 against Forminator's #EDEDED fill, the worst case in the fleet) and
     .50 drops to 2.71:1. Thickness carries no contrast minimum, so thinning is
     the compliant way to reduce weight. Focus goes back up to 2px, which makes
     the width change part of the focus cue; box-sizing is border-box here, so
     that costs no layout shift. */
  border-bottom: 1px solid rgba(var(--bs-body-color-rgb, 33, 37, 41), .55);
  border-radius: 4px 4px 0 0;
  transition: border-color .18s ease-in-out, border-width .18s ease-in-out;
}
body .forminator-ui.forminator-custom-form[data-design="flat"] .forminator-input:hover,
body .forminator-ui.forminator-custom-form[data-design="flat"] .forminator-textarea:hover {
  border-bottom-color: rgba(var(--bs-primary-rgb, 13, 110, 253), .7);
}
body .forminator-ui.forminator-custom-form[data-design="flat"] .forminator-input:focus,
body .forminator-ui.forminator-custom-form[data-design="flat"] .forminator-textarea:focus {
  border-bottom-color: var(--bs-primary, #0d6efd);
  border-bottom-width: 2px;
  /* Forminator strips the focus outline to `none` with no box-shadow of its own,
     so before this the only focus cue was the border recolouring — 1.76:1 against
     the resting border on Jackson, under the 3:1 WCAG 2.4.11 wants. The halo adds
     newly-painted pixels at 3.3:1+ against the page, which is unambiguous for
     keyboard users. .75 alpha is the floor that clears 3:1 for the weakest
     primary in the fleet (Jackson's teal). */
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 13, 110, 253), .75);
}

/* Same root cause as the inputs above: on this form the radio/checkbox controls
   are drawn by Forminator as a bordered <span>, and the per-form generated
   stylesheet leaves that border at 0 with a transparent fill — so the Yes/No
   circles were completely invisible and you could not see which was selected.
   The native input is a 1x1 visually-hidden element, so there was no fallback.
   Ring weight and colour match the input underline; the checked state uses
   --bs-primary so the theme customizer keeps control. */
/* NOTE the .forminator-radio / .forminator-checkbox in the middle: Forminator's
   own rule is
     .forminator-ui.forminator-custom-form[data-design="flat"] .forminator-radio .forminator-radio-bullet
   at (0,5,0). Without the parent class this rule sits at (0,4,1) and loses the
   width/style longhands while still winning the colour — which renders as a
   correctly-coloured but zero-width (invisible) ring. Matching their depth and
   adding `body` gives (0,5,1) and avoids !important. */
body .forminator-ui.forminator-custom-form[data-design="flat"] .forminator-radio .forminator-radio-bullet,
body .forminator-ui.forminator-custom-form[data-design="flat"] .forminator-checkbox .forminator-checkbox-box {
  border: 1px solid rgba(var(--bs-body-color-rgb, 33, 37, 41), .55);
  background-color: var(--bs-body-bg, #fff);
  transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}
body .forminator-ui.forminator-custom-form[data-design="flat"] .forminator-radio:hover .forminator-radio-bullet,
body .forminator-ui.forminator-custom-form[data-design="flat"] .forminator-checkbox:hover .forminator-checkbox-box {
  border-color: rgba(var(--bs-primary-rgb, 13, 110, 253), .7);
}
body .forminator-ui.forminator-custom-form[data-design="flat"] input:checked + .forminator-radio-bullet,
body .forminator-ui.forminator-custom-form[data-design="flat"] input:checked + .forminator-checkbox-box {
  border-color: var(--bs-primary, #0d6efd);
}
body .forminator-ui.forminator-custom-form[data-design="flat"] input:checked + .forminator-radio-bullet::before,
body .forminator-ui.forminator-custom-form[data-design="flat"] input:checked + .forminator-checkbox-box::before {
  background-color: var(--bs-primary, #0d6efd);
}
/* keyboard focus: the native input is visually hidden, so the ring has to carry it */
body .forminator-ui.forminator-custom-form[data-design="flat"] input:focus-visible + .forminator-radio-bullet,
body .forminator-ui.forminator-custom-form[data-design="flat"] input:focus-visible + .forminator-checkbox-box {
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb, 13, 110, 253), .75);
}

/* ── CTA buttons: never transparent, always focusable ────────────────────────
   1. site-design.css sets `.btn-amber { background-color: var(--cta-amber) }`, and
      --cta-amber is itself `var(--bs-warning)` with NO fallback. If that chain fails
      to resolve, background-color is invalid at computed-value time and falls back to
      transparent — the teal hero then shows through and the button's dark label sits
      on teal at 2.67:1 against a 4.5:1 requirement, which is what interaction-state
      measured on the local build. A literal end to the chain makes that unreachable.
      The hex is the same Champagne Gold already in this file at --bs-warning, so the
      theme customizer still drives the colour; this only stops it collapsing to none.
   2. The button had `outline: none` with no box-shadow and no colour change on
      :focus-visible — verified on staging — so keyboard users got NO indication at
      all on the primary CTA (WCAG 2.4.7). The ring is a dark band with a light
      separator so it stays visible on both the gold fill and the teal hero behind. */
.btn-amber,
a.btn-amber {
  background-color: var(--cta-amber, var(--bs-warning, #C5A253));
}
/* Specificity note: bundle.css loads AFTER this file, so Bootstrap's own
   `.btn:focus-visible { box-shadow: var(--bs-btn-focus-box-shadow) }` — (0,2,0),
   same as a bare `.btn-amber:focus-visible` — wins the tie and zeroed the ring
   (computed came back `rgba(0,0,0,0) 0 0 0 0`). Qualifying with the element type
   and .btn takes this to (0,3,1) and avoids needing !important. */
a.btn.btn-amber:focus-visible,
button.btn.btn-amber:focus-visible,
.hero-btns a.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bs-body-bg, #fff),
              0 0 0 5px var(--bs-body-color, #292929);
  /* THE actual cause of the 2.67:1 interaction-state failure. .btn-amber is a custom
     class, not a Bootstrap button variant, so --bs-btn-hover-bg is never set for it.
     Bootstrap's `.btn:focus-visible { background-color: var(--bs-btn-hover-bg) }` then
     computes to transparent, the teal hero shows through, and the button's charcoal
     label lands on teal at 2.67:1. It is invisible unless you look AFTER the .3s
     `transition: all` finishes — reading the computed style immediately after focus
     still shows the gold. Restating the fill here, above Bootstrap's (0,2,0) rule,
     keeps the button gold while focused: 6.00:1. */
  background-color: var(--cta-amber, var(--bs-warning, #C5A253));
  border-color: var(--cta-amber, var(--bs-warning, #C5A253));
  color: var(--bs-warning-text, #292929);
}

/* ============================================================================
   O.7  HERO FORM BAR -> FORMINATOR  (2026-10-16)
   The bar shipped on WPForms #35, so every rule in O.6/O.6b-f is keyed to
   .wpforms-*. The homepage now runs Forminator #247 (hero-bar-quick-contact),
   which collects the same four fields and sends to the same address. This
   block ports the O.6 layout verbatim to Forminator's DOM; O.6 is left in
   place and simply stops matching.

   Structural difference that matters: WPForms puts every field as a sibling
   inside ONE .wpforms-field-container, so a single `display:contents` flattened
   it into the grid. Forminator wraps EACH field in its own .forminator-row >
   .forminator-col, so the flattening has to happen on the row.

   Layout, unchanged from O.6: col 1 stacks Name / Email / Property Address,
   col 2 holds Message, row 3 of the right-hand side carries captcha + submit as
   separate columns. Row 4 spans the full width for the consent notice.
   ========================================================================= */

.lola-hero-bar .forminator-ui.forminator-custom-form { margin: 0 !important; max-width: none !important; }
.lola-hero-bar form.forminator-ui {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto;
    column-gap: 22px;
    row-gap: 10px;
    align-items: start;
}
/* one row per field in Forminator; flatten them all into the bar's grid */
.lola-hero-bar form.forminator-ui .forminator-row { display: contents !important; }
.lola-hero-bar .forminator-col {
    margin: 0 !important; padding: 0 !important;
    width: auto !important; max-width: none !important; min-width: 0;
}
.lola-hero-bar .forminator-field { margin: 0 !important; }

.lola-hero-bar .forminator-field-name     { grid-column: 1; grid-row: 1; }
.lola-hero-bar .forminator-field-email    { grid-column: 1; grid-row: 2; }
.lola-hero-bar .forminator-field-text     { grid-column: 1; grid-row: 3; }
.lola-hero-bar .forminator-field-textarea { grid-column: 2 / span 2; grid-row: 1 / span 2; }
/* the TCPA notice runs the full width under the fields */
.lola-hero-bar .forminator-field-html     { grid-column: 1 / span 3; grid-row: 4; }
/* Consent checkboxes are PRESENT and dynamic, matching the other templates (the SMS line
   names the business via the brand field). Both run full width under the disclosure notice. */
.lola-hero-bar .forminator-field-consent:nth-of-type(1),
.lola-hero-bar #consent-1 { grid-column: 1 / span 3; grid-row: 5; }
.lola-hero-bar .forminator-field-consent:nth-of-type(2),
.lola-hero-bar #consent-2 { grid-column: 1 / span 3; grid-row: 6; }
.lola-hero-bar .forminator-field-consent { display: block !important; }
.lola-hero-bar .forminator-checkbox { align-items: flex-start !important; gap: 8px; }
.lola-hero-bar .forminator-checkbox-label,
.lola-hero-bar .forminator-field-consent label {
    color: #EDF4F3 !important; font-size: 11.5px !important; line-height: 1.35 !important;
    font-weight: 400 !important; margin: 0 !important;
}
.lola-hero-bar .forminator-field-consent label a { color: #E5D6B3 !important; text-decoration: underline; }
.lola-hero-bar .forminator-checkbox-box { flex: 0 0 auto; margin-top: 1px; }
/* the submit sits in the only .forminator-col that carries no field class */
.lola-hero-bar .forminator-col:not([class*="forminator-field-"]) {
    grid-column: 2 / span 2; grid-row: 3;
    display: flex; align-items: center; justify-content: center;
    justify-self: stretch;
}

/* --- captcha present: middle track opens to the widget's real 304px -------- */
.lola-hero-bar form.forminator-ui:has(.forminator-field-captcha),
.lola-hero-bar form.forminator-ui:has(.forminator-g-recaptcha) {
    grid-template-columns: minmax(0, 1fr) 304px minmax(150px, auto);
}
.lola-hero-bar .forminator-field-captcha,
.lola-hero-bar .forminator-g-recaptcha {
    grid-column: 2; grid-row: 3;
    margin: 0 !important; align-self: start; justify-self: start; max-width: 100%;
}
.lola-hero-bar form.forminator-ui:has(.forminator-field-captcha) .forminator-col:not([class*="forminator-field-"]),
.lola-hero-bar form.forminator-ui:has(.forminator-g-recaptcha) .forminator-col:not([class*="forminator-field-"]) {
    grid-column: 3;
}

/* --- type: tight leading, small fields (ported from O.6) ------------------- */
.lola-hero-bar .forminator-label {
    color: #EDF4F3 !important; font-size: 12.5px !important; font-weight: 700 !important;
    line-height: 1.15 !important; margin: 0 0 3px !important; padding: 0 !important; display: block;
}
.lola-hero-bar .forminator-description,
.lola-hero-bar .forminator-field-html p {
    color: #D3E2E1 !important; font-size: 11.5px !important; line-height: 1.35 !important; margin: 0 !important;
}
.lola-hero-bar .forminator-field-html a { color: #E5D6B3 !important; }
.lola-hero-bar .forminator-input,
.lola-hero-bar input[type="text"],
.lola-hero-bar input[type="email"],
.lola-hero-bar input[type="tel"],
.lola-hero-bar textarea,
.lola-hero-bar .forminator-textarea {
    background: rgba(255, 255, 255, .94) !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    border-radius: 3px !important; color: #292929 !important;
    width: 100% !important; height: auto !important; min-height: 0 !important;
    font-size: 14px !important; line-height: 1.2 !important; padding: 8px 11px !important;
}
.lola-hero-bar textarea,
.lola-hero-bar .forminator-textarea { max-height: none !important; resize: none; overflow: auto; }
/* The stretch-to-fill treatment only makes sense while Message spans two grid rows
   beside the left-hand stack. Below lg everything is one column and auto-height, where
   the same flex rules collapsed the textarea to a single input's height. */
@media (min-width: 992px) {
  .lola-hero-bar .forminator-field-textarea { display: flex; flex-direction: column; align-self: stretch; }
  .lola-hero-bar .forminator-field-textarea .forminator-field { display: flex; flex-direction: column; flex: 1 1 auto; }
  .lola-hero-bar .forminator-field-textarea .forminator-label { flex: 0 0 auto; }
  .lola-hero-bar .forminator-field-textarea textarea { flex: 1 1 auto; }
}

/* --- submit: gold, square-cornered to match the inputs, fills its track ---- */
.lola-hero-bar .forminator-button-submit {
    background: #C5A253 !important; border: 0 !important;
    color: #292929 !important; -webkit-text-fill-color: #292929 !important;
    font-weight: 700 !important; line-height: 1.2 !important; white-space: nowrap;
    width: 100% !important; max-width: none !important; margin: 0 !important;
    border-radius: 3px !important;
}
.lola-hero-bar .forminator-button-submit span { color: inherit !important; -webkit-text-fill-color: inherit !important; }
@media (min-width: 992px) {
    .lola-hero-bar .forminator-col:not([class*="forminator-field-"]) { align-self: stretch !important; align-items: stretch !important; }
    .lola-hero-bar .forminator-button-submit { height: 100% !important; }
    /* Property Address grows with its row, as in O.6f */
    .lola-hero-bar .forminator-field-text { align-self: stretch !important; display: flex; flex-direction: column; }
    .lola-hero-bar .forminator-field-text .forminator-field { display: flex; flex-direction: column; flex: 1 1 auto; }
    .lola-hero-bar .forminator-field-text input { flex: 1 1 auto; height: auto !important; }
}

/* --- below lg: one column, button follows the message (ported from O.6) ---- */
@media (max-width: 991.98px) {
    .lola-hero-bar form.forminator-ui,
    .lola-hero-bar form.forminator-ui:has(.forminator-field-captcha),
    .lola-hero-bar form.forminator-ui:has(.forminator-g-recaptcha) {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
    }
    .lola-hero-bar .forminator-col,
    .lola-hero-bar .forminator-col:not([class*="forminator-field-"]),
    .lola-hero-bar .forminator-field-captcha,
    .lola-hero-bar .forminator-g-recaptcha { grid-column: 1 !important; grid-row: auto !important; }
    .lola-hero-bar textarea,
    .lola-hero-bar .forminator-textarea { height: 76px !important; min-height: 76px !important; }
    .lola-hero-bar .forminator-col:not([class*="forminator-field-"]) { justify-content: flex-start; }
    .lola-hero-bar .forminator-button-submit { width: auto !important; }
}

/* flush bottom edge */
.hero-section > .lola-hero-bar .forminator-ui,
.hero-section > .lola-hero-bar form.forminator-ui { margin-bottom: 0 !important; }

/* O.7b  Forminator's material base sheet paints .forminator-input transparent with
   !important at (0,4,0) via `.forminator-ui.forminator-custom-form[data-design="material"]`,
   which outranks the O.7 field rule at (0,2,0) — the text inputs rendered as bare underlines
   while the textarea (a different selector) correctly took the white fill. Re-asserted here at
   (0,5,2) so every control in the bar reads as the same filled box. */
html body .lola-hero-bar .forminator-ui.forminator-custom-form .forminator-input,
html body .lola-hero-bar .forminator-ui.forminator-custom-form input[type="text"],
html body .lola-hero-bar .forminator-ui.forminator-custom-form input[type="email"],
html body .lola-hero-bar .forminator-ui.forminator-custom-form input[type="tel"],
html body .lola-hero-bar .forminator-ui.forminator-custom-form .forminator-textarea,
html body .lola-hero-bar .forminator-ui.forminator-custom-form textarea {
    background-color: rgba(255, 255, 255, .94) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    border-radius: 3px !important;
    color: #292929 !important;
    -webkit-text-fill-color: #292929 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    padding: 8px 11px !important;
    height: auto !important;
    min-height: 40px !important;
    box-shadow: none !important;
}
html body .lola-hero-bar .forminator-ui.forminator-custom-form textarea { min-height: 52px !important; }
@media (max-width: 991.98px) {
    html body .lola-hero-bar .forminator-ui.forminator-custom-form textarea { min-height: 76px !important; height: 76px !important; }
}
/* labels sit above the control in this bar, so the material floating label must not
   re-enter the field */
html body .lola-hero-bar .forminator-ui.forminator-custom-form .forminator-label {
    position: static !important; transform: none !important; padding: 0 !important;
}

/* O.7c  Message textarea fills its 2-row cell, as on WPForms. The flex chain through
   Forminator's .forminator-textarea--wrap (display:block) is unreliable, so set the height
   directly: the 2-row cell is ~126px; minus the label row the textarea gets ~104px. Desktop
   only; below lg it keeps the fixed 76px from O.7. High specificity (0,5,2) to beat the
   material base sheet's min-height:140px and the O.7b 52px floor. */
@media (min-width: 992px) {
    html body .lola-hero-bar .forminator-ui.forminator-custom-form .forminator-field-textarea textarea,
    html body .lola-hero-bar .forminator-ui.forminator-custom-form .forminator-field-textarea .forminator-textarea {
        min-height: 104px !important; height: 104px !important;
    }
    html body .lola-hero-bar .forminator-ui.forminator-custom-form .forminator-field-textarea .forminator-textarea--wrap {
        min-height: 104px !important;
    }
}

/* O.7d  Field validation errors on the teal hero bar rendered at Forminator's default
   #E6E6E6 = 4:1 (any light colour on this mid-teal tops out ~4). Give the inline error a light
   pill with dark-red text so it reads unmistakably as an error and is legible on any band:
   #B3261E on #FFFFFF = 8.1:1. */
.lola-hero-bar .forminator-error-message {
    color: #B3261E !important;
    background: rgba(255,255,255,.94) !important;
    padding: 1px 7px !important;
    border-radius: 3px !important;
    display: inline-block !important;
    font-weight: 600 !important;
    margin-top: 3px !important;
}