/* ============================================================
   SITE DESIGN — consolidated 2026-07-15 into a version-controlled file.
   Was split between Customizer 'Additional CSS' (custom_css, which had
   broken theme_mod custom_css_post_id=-1 so it never loaded) and an inline
   <style> trapped in one page (19619). Moved here + enqueued after bundle
   so it loads globally and can't be orphaned again.
   ============================================================ */

/* --- palette + global (from Customizer custom_css) --- */
/* ===== COLOR PALETTE ===== */
:root {
/* Repointed to Bootstrap vars so the ATL Customizer's runtime --bs-* injection reaches the
   whole design. Values are IDENTICAL to the previous literals (each hex == its --bs-* default),
   so the shipped default look is pixel-unchanged. Fixes the frozen-brand-color bug. 2026-07-15 */
--primary-navy: var(--bs-primary);
--accent-teal: var(--bs-secondary);
--cta-amber: var(--bs-warning);
--light-bg: var(--bs-light);
--white: #FFFFFF;
--dark-text: var(--bs-body-color);
--light-text: #FFFFFF;
--border-muted: var(--bs-border-color);
}

#lc-header .bs-hdr-be .dropdown-menu {
border: none;
border-radius: 6px;
box-shadow: 0 8px 25px rgba(0, 0, 0, .2)
}

#lc-header .bs-hdr-be-top .be-contact {
display: flex;
gap: 16px;
align-items: center
}

#lc-header .bs-hdr-be-top .be-contact-item {
display: flex;
align-items: center;
gap: 5px
}

/* #lc-header .bs-hdr-be-top .be-contact-item svg {
width: 12px;
height: 12px
} */

#lc-header .bs-hdr-be-top .be-socials {
display: flex;
gap: 10px;
align-items: center
}

#lc-header .bs-hdr-be-top .be-socials a {
display: flex;
align-items: center
}

#lc-header .bs-hdr-be-top .be-socials svg {
/* width: 14px;
height: 14px */
}

@media(max-width:1199.98px) {
#lc-header .bs-hdr-be .navbar-collapse {
border-top: 1px solid rgba(255, 255, 255, .1);
margin-top: .5rem;
padding-top: .5rem
}
}

@media(max-width:575.98px) {
#lc-header .bs-hdr-be-top .d-flex {
flex-direction: column;
gap: 4px !important;
text-align: center
}
}

/* ===== TYPOGRAPHY ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading, 'Montserrat', sans-serif);
font-weight: 700;
color: var(--dark-text);
}

p,
li,
a,
span,
label,
input,
textarea,
select,
button {
font-family: var(--font-body, 'Open Sans', sans-serif);
font-weight: 400;
color: var(--dark-text);
}

/* ===== SECTION SPACING ===== */
.section-padding {
padding-top: 80px;
padding-bottom: 80px;
}

.section-padding-lg {
padding-top: 100px;
padding-bottom: 100px;
}

/* ===== SECTION HEADINGS ===== */
.section-heading {
font-size: 2.25rem;
margin-bottom: 1.25rem;
line-height: 1.3;
}

.section-subheading {
font-size: 1.125rem;
line-height: 1.8;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}

/* ===== BUTTONS ===== */
.btn-amber {
background-color: var(--cta-amber);
color: var(--white);
border: 2px solid var(--cta-amber);
border-radius: 50px;
padding: 14px 36px;
font-family: var(--font-heading, 'Montserrat', sans-serif);
font-weight: 600;
font-size: 1rem;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}

.btn-amber:hover {
background-color: color-mix(in srgb, var(--bs-warning) 88%, #fff);
border-color: color-mix(in srgb, var(--bs-warning) 88%, #fff);
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(var(--bs-warning-rgb), 0.4);
}

.btn-outline-white {
background-color: transparent;
color: var(--white);
border: 2px solid var(--white);
border-radius: 50px;
padding: 14px 36px;
font-family: var(--font-heading, 'Montserrat', sans-serif);
font-weight: 600;
font-size: 1rem;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}

.btn-outline-white:hover {
background-color: var(--white);
color: var(--primary-navy);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

.btn-outline-teal {
background-color: transparent;
color: var(--accent-teal);
border: 2px solid var(--accent-teal);
border-radius: 50px;
padding: 12px 32px;
font-family: var(--font-heading, 'Montserrat', sans-serif);
font-weight: 600;
font-size: 1rem;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}

.btn-outline-teal:hover {
background-color: var(--accent-teal);
color: var(--white);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(var(--bs-secondary-rgb), 0.3);
}

/* ===== HERO ===== */
.hero-section {
background-color: var(--primary-navy);
background-image: linear-gradient(135deg, var(--primary-navy) 0%, color-mix(in srgb, var(--bs-primary) 76%, #000) 100%);
}

.hero-section h1 {
color: var(--white);
font-size: 2.75rem;
line-height: 1.25;
margin-bottom: 1.5rem;
}

.hero-section p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.2rem;
line-height: 1.8;
}

@media (min-width: 992px) {
.hero-section h1 {
font-size: 3.25rem;
}
}

/* ===== EMPATHY LIST ===== */
.empathy-list {
list-style: none;
padding-left: 0;
margin: 2rem 0;
}

.empathy-list li {
position: relative;
padding: 12px 0 12px 40px;
font-size: 1.05rem;
line-height: 1.6;
border-bottom: 1px solid var(--border-muted);
}

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

.empathy-list li::before {
content: "F287";
font-family: "bootstrap-icons";
position: absolute;
left: 0;
top: 12px;
color: var(--accent-teal);
font-size: 1.25rem;
}

/* ===== SERVICE CARDS ===== */
.service-card {
background: var(--white);
border: none;
border-top: 4px solid var(--accent-teal);
border-radius: 8px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
padding: 2rem 1.75rem;
height: 100%;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.service-card .card-icon {
width: 60px;
height: 60px;
background-color: rgba(var(--bs-secondary-rgb), 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
}

.service-card .card-icon i {
font-size: 1.5rem;
color: var(--accent-teal);
}

.service-card h3 {
font-size: 1.15rem;
margin-bottom: 0.75rem;
color: var(--primary-navy);
}

.service-card p {
font-size: 0.95rem;
line-height: 1.7;
color: #555555;
margin-bottom: 0;
}

/* ===== WHY DIFFERENT ===== */
.why-different-list {
list-style: none;
padding-left: 0;
}

.why-different-list li {
position: relative;
padding: 8px 0 8px 32px;
font-size: 1rem;
line-height: 1.7;
}

.why-different-list li::before {
content: "F26A";
font-family: "bootstrap-icons";
position: absolute;
left: 0;
top: 8px;
color: var(--accent-teal);
font-size: 1.1rem;
}

.img-placeholder {
background-color: var(--border-muted);
border-radius: 12px;
width: 100%;
min-height: 380px;
display: flex;
align-items: center;
justify-content: center;
color: #999999;
font-size: 0.95rem;
font-family: var(--font-body, 'Open Sans', sans-serif);
}

/* ===== LEAD MAGNET ===== */
.lead-magnet-section {
background-color: var(--primary-navy);
background-image: linear-gradient(135deg, color-mix(in srgb, var(--bs-primary) 76%, #000) 0%, var(--primary-navy) 100%);
}

.lead-magnet-section h2,
.lead-magnet-section p {
color: var(--white);
}

.lead-magnet-section p {
color: rgba(255, 255, 255, 0.85);
}

.form-wrapper {
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 2.5rem 2rem;
backdrop-filter: blur(4px);
}

/* ===== FAQ ACCORDION ===== */
.faq-accordion .accordion-item {
border: 1px solid var(--border-muted);
border-radius: 8px !important;
margin-bottom: 1rem;
overflow: hidden;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

.faq-accordion .accordion-button {
font-family: var(--font-heading, 'Montserrat', sans-serif);
font-weight: 600;
font-size: 1.05rem;
color: var(--primary-navy);
padding: 1.25rem 1.5rem;
background-color: var(--white);
}

.faq-accordion .accordion-button:not(.collapsed) {
background-color: var(--white);
color: var(--primary-navy);
box-shadow: none;
}

.faq-accordion .accordion-button:focus {
box-shadow: none;
border-color: var(--border-muted);
}

.faq-accordion .accordion-button::after {
filter: none;
color: var(--accent-teal);
}

.faq-accordion .accordion-body {
font-size: 1rem;
line-height: 1.8;
color: #555555;
padding: 0.5rem 1.5rem 1.5rem;
}

/* ===== FINAL CTA ===== */
.final-cta-section {
background-color: var(--accent-teal);
background-image: linear-gradient(135deg, var(--accent-teal) 0%, color-mix(in srgb, var(--bs-secondary) 82%, #fff) 100%);
}

.final-cta-section h2,
.final-cta-section p {
color: var(--white);
}

/* ===== UTILITY ===== */
.text-teal {
color: var(--accent-teal);
}

.text-navy {
color: var(--primary-navy);
}

.fw-600 {
font-weight: 600;
}

.max-w-800 {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}

.max-w-700 {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}

.max-w-600 {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* --- cards / sections / buttons (was inline in page 19619) --- */
:root {
    --navy: var(--bs-primary);
    --teal: var(--bs-secondary);
    --amber: var(--bs-warning);
    --light-bg: var(--bs-light);
    --white: var(--bs-body-bg);
    --dark-text: var(--bs-body-color);
    --border: var(--bs-border-color);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-weight: 700;
    color: var(--navy);
  }

  p, li, span, a, td, th, label, input, textarea, select, button {
    font-family: var(--font-body, 'Open Sans', sans-serif);
    font-weight: 400;
    color: var(--dark-text);
  }

  .btn-amber {
    background-color: var(--amber);
    color: var(--white);
    border: none;
    border-radius: 50px;
    padding: 14px 36px;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-weight: 700;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
  }

  .btn-amber:hover {
    background-color: var(--bs-warning);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--bs-warning-rgb), 0.4);
  }

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

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

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

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

  .lead-text {
    font-size: 1.15rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.92);
  }

  .section-subtitle {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
  }

  .content-card {
    background: var(--white);
    border-radius: 12px;
    padding: 40px 36px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border);
    height: 100%;
  }

  .content-card-light {
    background: var(--light-bg);
    border-radius: 12px;
    padding: 40px 36px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border);
    height: 100%;
  }

  .card-icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }

  .card-icon-circle i {
    font-size: 1.7rem;
  }

  .teal-icon-bg {
    background-color: rgba(var(--bs-secondary-rgb), 0.1);
  }

  .teal-icon-bg i {
    color: var(--teal);
  }

  .navy-icon-bg {
    background-color: rgba(27, 54, 93, 0.1);
  }

  .navy-icon-bg i {
    color: var(--navy);
  }

  .amber-icon-bg {
    background-color: rgba(var(--bs-warning-rgb), 0.1);
  }

  .amber-icon-bg i {
    color: var(--amber);
  }

  .styled-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .styled-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 14px;
    font-size: 1.02rem;
    line-height: 1.6;
  }

  .styled-list li i {
    color: var(--teal);
    font-size: 0.7rem;
    margin-right: 12px;
    margin-top: 8px;
    flex-shrink: 0;
  }

  .styled-list-amber li i {
    color: var(--amber);
  }

  .styled-list-navy li i {
    color: var(--navy);
  }

  .step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--teal);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
    margin-right: 14px;
  }
/* Fix (promoted to flare-kit 2026-08-15): an .img-placeholder holding a REAL image should hug it,
   not render its grey box + tall min-height (grey leaked around shorter images on mobile). */
.img-placeholder:has(> img){background:transparent!important;min-height:0!important;border-radius:0!important;padding:0!important;display:block!important}
.img-placeholder > img{width:100%!important;height:auto!important;display:block!important}

/* ==========================================================================
   VISUAL-QA ROUND (2026-09-22) — templatized fixes.
   Every rule here is site-wide on purpose: each one was raised on 1-5 pages
   but has a single root cause, so it is fixed once in the child theme rather
   than page by page.
   ========================================================================== */

/* --- VQA-1 (med) DEFECT: a stray ~65px teal rule protrudes from the bottom-left
   corner of every COLLAPSED accordion card, half inside and half outside the
   card's bottom border. Root cause is not the accordion: flare-kit.js stamps
   .cf-underline on EVERY `main section h2`, and Bootstrap's accordion uses
   `<h2 class="accordion-header">` as a STRUCTURAL wrapper around the button.
   The decorative grow-underline therefore renders inside the header, and the
   item's `overflow:hidden` slices it at the card edge. Suppress the decoration
   on structural heading wrappers only; real section headings keep theirs.
   Beats `html.cf-flare .cf-reveal.cf-in .cf-underline::after` on specificity,
   so no !important is needed. Covers /probate-faq/ and the home-page FAQ. */
html.cf-flare .cf-reveal.cf-in h2.accordion-header.cf-underline::after,
html.cf-flare .cf-reveal.cf-in .accordion-header.cf-underline::after,
html.cf-flare .cf-reveal.cf-in .accordion-button.cf-underline::after {
    content: none;
    display: none;
}

/* --- VQA-2 (med) DEFECT: the "Free Guide" lead-magnet fields measured 1.28:1
   against their card (field rgb(54,130,131) on card rgb(26,113,115)), so they
   barely read as input fields at all. Same root cause as the earlier a11y pass:
   a blanket colour rule painted the inputs INTO the background. That pass fixed
   the typed-text contrast (white ink) but left the field BOUNDARY invisible.
   Every other form on this site uses light fields on the teal (the hero bar
   measures 6.39:1), so match them. New value: rgba(255,255,255,.94) over the
   card = 4.6:1 against the card and 13.4:1 for the ink. Overrides the earlier
   `.form-wrapper input{...!important}` block in style.css. */
.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: #292929 !important;
    background-color: rgba(255, 255, 255, .94) !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    border-radius: 3px !important;
}
.form-wrapper input::placeholder,
.form-wrapper textarea::placeholder,
.form-wrapper .forminator-input::placeholder {
    color: #5F5F5F !important;
    opacity: 1 !important;
}
.form-wrapper input:-webkit-autofill,
.form-wrapper textarea:-webkit-autofill {
    -webkit-text-fill-color: #292929 !important;
    -webkit-box-shadow: 0 0 0 1000px #F4F9F9 inset !important;
    caret-color: #292929;
}

/* --- VQA-3 (med) DEFECT: the Forminator "Send Message" button on /contact/ is
   the plugin's unstyled default: a 127x43 square-cornered rectangle, 2px radius,
   400 weight. It is the only non-pill button on the site and the smallest CTA
   anywhere, and it carries the contact page's primary conversion. Bring it to
   the site's standard CTA pill (see .btn-amber / .wpforms-submit). Forminator's
   own stylesheets load AFTER site-design.css, hence !important.
   COLOURS MUST ROUTE THROUGH --bs-* : color/customizer-assert injects a stress
   palette and hard-fails any critical surface (the Forminator submit is one of
   its named surfaces) that stays frozen at a literal brand hex. The literals
   below are var() FALLBACKS only, so the ATL Theme Customizer still drives the
   button. Matches how .btn-amber is written on the pages. */
.forminator-ui .forminator-button-submit,
.forminator-ui button.forminator-button-submit,
button.forminator-button.forminator-button-submit {
    background-color: var(--bs-warning, #C5A253) !important;
    background-image: none !important;
    color: var(--bs-warning-text, #292929) !important;
    border: 0 !important;
    border-radius: 50px !important;
    padding: 14px 36px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
    height: auto !important;
    min-height: 0 !important;
    transition: background-color .3s ease, transform .2s ease, box-shadow .3s ease !important;
}
.forminator-ui .forminator-button-submit:hover,
.forminator-ui .forminator-button-submit:focus-visible,
button.forminator-button.forminator-button-submit:hover,
button.forminator-button.forminator-button-submit:focus-visible {
    background-color: var(--bs-danger, #B8933F) !important;
    color: var(--bs-warning-text, #292929) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(197, 162, 83, .4) !important;
}

/* --- VQA-4 (low) DEFECT: the multi-line SMS consent checkbox is vertically
   centred against a 4-line (desktop) / 9-line (mobile) label, so the box floats
   beside the middle of the paragraph instead of its first line. Forminator sets
   `align-items:center` on every checkbox row; single-line labels are unaffected
   by top-aligning, so this is safe for both consent rows. */
.forminator-ui .forminator-checkbox,
label.forminator-checkbox {
    align-items: flex-start !important;
}
.forminator-ui .forminator-checkbox > span:first-child,
.forminator-ui .forminator-checkbox input[type="checkbox"] {
    margin-top: 2px;
}
/* --- VQA-5 superseded 2026-09-23: the hero form bar's grid (column placement,
   the captcha slot and the submit's alignment) is now owned in ONE place,
   the consolidated O.6 block in style.css. Two files placing the same grid
   items is what caused the submit to overlap the Message field and the
   reCAPTCHA. The gutter arithmetic in VQA-6 below is unrelated and stays. */

}

/* --- VQA-6 (low) DEFECT: the hero bar's inner gutters were clamp(20px,4vw,64px)
   = 58px at 1440, while the logo, nav and portrait directly above sit on the
   Bootstrap container's 72px. The field column visibly failed to line up with
   the photo edge above it. Reproduce the container's own arithmetic instead of
   guessing with vw, so the bar's first field and its submit land on exactly the
   same left/right edges as the content above at every breakpoint. The bar's own
   full-bleed width, transparency and flush edges are untouched. */
.lola-hero-bar { padding-left: 20px; padding-right: 20px; }
@media (min-width: 576px) {
    .lola-hero-bar { padding-left: calc((100% - 540px) / 2 + 12px); padding-right: calc((100% - 540px) / 2 + 12px); }
}
@media (min-width: 768px) {
    .lola-hero-bar { padding-left: calc((100% - 720px) / 2 + 12px); padding-right: calc((100% - 720px) / 2 + 12px); }
}
@media (min-width: 992px) {
    .lola-hero-bar { padding-left: calc((100% - 960px) / 2 + 12px); padding-right: calc((100% - 960px) / 2 + 12px); }
}
@media (min-width: 1200px) {
    .lola-hero-bar { padding-left: calc((100% - 1140px) / 2 + 12px); padding-right: calc((100% - 1140px) / 2 + 12px); }
}
@media (min-width: 1400px) {
    .lola-hero-bar { padding-left: calc((100% - 1320px) / 2 + 12px); padding-right: calc((100% - 1320px) / 2 + 12px); }
}

/* --- VQA-7 (med) DEFECT: long body copy is centre-aligned at 390px, producing
   blocks ragged on both edges that are hard to track — 7-10 centred lines in the
   option cards, an 11-line centred /about/ intro, a 9-line centred masthead
   paragraph on /understanding-probate/ and 6-line centred CTA paragraphs.
   Headings, eyebrows and buttons stay centred; only body copy goes flush left.
   Cards flip wholesale (icon, heading and text) so a card never mixes a centred
   heading with left-aligned text. */
@media (max-width: 767.98px) {
    .lead-text,
    .section-subtitle,
    .section-subheading,
    .intro-text,
    .approach-description,
    .disclaimer-text,
    .contact-intro-section p,
    .resources-intro-section p,
    .faq-intro-section p,
    .disclaimer-box p,
    section .col-lg-8 > p,
    section .col-lg-9 > p.mb-4 { text-align: left !important; }

    .option-card,
    .resource-card,
    .experience-card,
    .checklist-card { text-align: left !important; }
    .option-card .option-icon,
    .resource-card .icon-circle,
    .checklist-card .checklist-icon-circle,
    .checklist-card .divider-line { margin-left: 0 !important; margin-right: 0 !important; }
    .checklist-card .section-subtitle { margin-left: 0 !important; margin-right: 0 !important; }
}

/* --- VQA-8 (low) DEFECT: mobile side gutters were only 12-13px site-wide, so
   masthead H1s ran edge to edge ("About Lola Witherspoon" spanned x=15-374 of a
   390px viewport). 18px is inside the usual 16-20px minimum. */
@media (max-width: 575.98px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

/* --- VQA-9 (bonus, same root cause as VQA-1) DEFECT: where a page already ships
   its OWN decorative rule under a heading (.divider-line), flare-kit's blanket
   .cf-underline stamp adds a second one, so the heading sits over a double rule.
   One instance site-wide today ("Probate Real Estate Checklist" on
   /executor-resources/), but it is the same blanket-stamp cause as the accordion
   rule above, so it is fixed structurally rather than on that one page.
   :has() is ignored by engines that do not support it, which leaves today's
   (merely cosmetic) double rule exactly as it is rather than breaking anything. */
html.cf-flare .cf-reveal.cf-in h2.cf-underline:has(+ .divider-line)::after,
html.cf-flare .cf-reveal.cf-in h3.cf-underline:has(+ .divider-line)::after,
html.cf-flare .cf-reveal.cf-in h2.cf-underline:has(+ .lola-divider)::after {
    content: none;
    display: none;
}

/* --- VQA-10 (low) DEFECT: on /contact/ at 390px the email address wrapped
   mid-domain ("probate@lolalovesrealestate." / "com") with the link underline
   carrying across the break, so it read as a truncated or broken address.
   Cause is width, not the string: the info card keeps its 2.5rem desktop padding
   at mobile, which leaves only ~214px beside the 44px icon. 40px of padding on a
   390px screen is wasteful anyway, so the cards tighten at mobile and the value
   text steps down a little; the address then fits on one line and never breaks.
   (VQA-8's wider page gutters made the old break land mid-word rather than after
   the dot, so this is also the tail of that change.) */
@media (max-width: 575.98px) {
    .contact-info-card,
    .form-card { padding: 1.75rem 1.25rem !important; }
    .contact-info-item .icon-box { margin-right: 0.75rem !important; }
    .contact-info-item .info-value { font-size: 0.9rem !important; line-height: 1.5 !important; }
    .contact-info-item .info-value a { overflow-wrap: normal; word-break: normal; }
}