/* =====================================================================
   DESIGN V2 - 2026-10 redesign layer (see _DESIGN_IMPROVEMENTS.md)
   Loaded AFTER brand.css + site.css. Every rule here is an override or a
   new component for one of the 30 design items; the item number is noted
   on each block so a single change can be found and reverted.
   Colors: tokens.css only (navy / cream / ink / sage / bronze /
   terracotta + gray ramp). Fonts: Inter + Playfair Display only.
   ===================================================================== */

/* ---- #13 Scroll reveal: never hide content ------------------------------
   Content used to start at opacity:0 until scrolled into view, which left
   blank screens for fast scrollers, screenshot tools and slow devices, and
   made the hero load dim on phones. Now content is always visible; the
   motion is a small 8px settle only. */
.js-reveal-ready [data-reveal] {
    opacity: 1;
    transform: translateY(8px);
    transition: transform .5s var(--ease);
}
.js-reveal-ready [data-reveal].is-revealed { transform: none; }

/* ---- #1 #4 Hero with a real photo + one-line promise ------------------- */
.hero--photo {
    background:
        linear-gradient(180deg, rgba(15, 42, 68, .78) 0%, rgba(15, 42, 68, .86) 55%, rgba(15, 42, 68, .94) 100%),
        var(--hero-img, none) center 40% / cover no-repeat,
        linear-gradient(135deg, var(--navy) 0%, var(--navy) 100%);
}
.hero--photo::before,
.hero--photo::after { display: none; }
.hero-inner--centered {
    grid-template-columns: 1fr;
    text-align: center;
}
.hero-inner--centered h1 {
    max-width: 20ch;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(2.1rem, 5.2vw, 3.6rem);
    line-height: 1.08;
    text-wrap: balance;
}
.hero-inner--centered .lead {
    max-width: 52ch;
    margin-left: auto;
    margin-right: auto;
    color: var(--white);
    opacity: .92;
}

/* ---- #27 Compact hero (services + other index pages) -------------------- */
.hero--compact { padding-top: clamp(2.25rem, 5vw, 3.5rem); padding-bottom: clamp(2.25rem, 5vw, 3.5rem); min-height: 0; }
.hero--compact .hero-inner { min-height: 0; padding: 0; }
.hero--compact h1 { font-size: clamp(2rem, 4.6vw, 3rem); margin-bottom: var(--space-3); }

/* ---- #2 Desktop nav shows inline from 881px (was 1025px) --------------- */
@media (min-width: 881px) and (max-width: 1024px) {
    .nav { gap: var(--space-2); }
    .nav-brand-mark { height: 46px !important; }
    .nav-brand-name { font-size: .98rem; }
    .nav-link, .nav-link--toggle { padding: .5rem .45rem; font-size: .86rem; }
    .nav-cta .btn--sm { padding: .55rem .8rem; }
}

/* ---- #6 Logo: bigger, clearer mark + name ------------------------------ */
@media (min-width: 1025px) {
    .nav-brand img, .nav-brand .nav-brand-mark { height: 58px; max-width: 62px; }
    .nav-brand-name { font-size: 1.15rem; }
}
.footer-brand img { width: 64px; height: 76px; }

/* ---- #3 Header phone (only rendered when Site:ShowPhonePublicly) -------- */
.nav-cta .phone-link i { color: var(--terracotta); }
@media (max-width: 1180px) { .nav-cta .phone-link span { display: none; } }

/* ---- #5 #14 Trust bar right under the hero ----------------------------- */
.trust-bar {
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 2;
}
.trust-bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3) clamp(1.25rem, 3vw, 2.5rem);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}
.trust-bar-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.trust-bar-item > i {
    font-size: 1.35rem;
    color: var(--sage-deep);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gray-50);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.trust-bar-item .cred-badge { flex: 0 0 auto; }
.trust-bar-item span { display: flex; flex-direction: column; line-height: 1.2; }
.trust-bar-item strong { color: var(--navy); font-size: .95rem; }
.trust-bar-item small { color: var(--muted); font-size: .78rem; }
@media (max-width: 760px) {
    .trust-bar-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-3); justify-items: start; }
    .trust-bar-item > i { width: 38px; height: 38px; font-size: 1.15rem; }
    .trust-bar-item .cred-badge { width: 38px; height: 38px; }
    .trust-bar-item strong { font-size: .86rem; }
    .trust-bar-item small { font-size: .72rem; }
    .trust-bar .review-summary { grid-column: 1 / -1; justify-self: center; }
}

/* ---- #22 Review summary chip + avatar initials ------------------------- */
.review-summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: .45rem .9rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-full);
    background: var(--white);
    color: var(--ink);
    text-decoration: none;
    font-size: .9rem;
}
.review-summary:hover { border-color: var(--navy); }
.review-summary i { color: var(--navy); }
.review-summary strong { color: var(--navy); }
.review-summary-stars { color: var(--bronze); letter-spacing: 1px; }
.section-head .review-summary { margin-top: var(--space-3); }

.quote-card { display: flex; flex-direction: column; }
.quote-card .quote-text { flex: 1; font-style: normal; }
.quote-card .stars { color: var(--bronze); }
.quote-card .quote-cite { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.quote-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--cream);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .95rem;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

/* ---- #17 One accent rule for cards ------------------------------------
   Top-border accents were mixed (bronze / sage / navy) with no meaning.
   Rule now: featured cards + stat tiles = 3px bronze top border. */
.card--featured,
.stat-tile { border-top: 3px solid var(--bronze); }
.service-card { display: flex; flex-direction: column; }
.service-card .muted { flex: 1; }
.service-card-link {
    margin-top: var(--space-4);
    font-weight: 700;
    color: var(--terracotta-hover); /* AA on white/cream at body size */
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.service-card:hover .service-card-link i { transform: translateX(3px); }
.service-card-link i { transition: transform var(--motion-fast) var(--ease); }

/* ---- #18 Pricing cards: "Best for" + bigger prices --------------------- */
.tier-card-price { font-size: clamp(2.2rem, 4.5vw, 2.8rem); }
.tier-card-price-unit { font-size: .5em; }
.tier-card-bestfor {
    margin: var(--space-2) 0 var(--space-4);
    padding: var(--space-2) var(--space-3);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    font-size: .9rem;
    color: var(--ink-2);
    line-height: 1.4;
}
.tier-card-bestfor strong { color: var(--navy); }

/* ---- #19 "What happens next" note under CTAs --------------------------- */
.next-step-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: .45rem;
    margin: var(--space-3) auto 0;
    max-width: 46ch;
    font-size: .86rem;
    line-height: 1.4;
    color: var(--muted);
    text-align: left;
}
.next-step-note i { color: var(--sage-deep); margin-top: .1rem; }
.next-step-note--on-dark { color: rgba(250, 247, 242, .82); }
.next-step-note--on-dark i { color: var(--sage); }
.tier-grid + .next-step-note { margin-top: var(--space-5); }

/* ---- #9 #10 #12 How it works band (merged sections) ---------------------- */
.section--dark .section-head p { color: var(--white); opacity: .88; }
.proof-steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.proof-step {
    background: var(--white);
    border-radius: var(--radius);
    padding: var(--space-6) var(--space-5) var(--space-5);
    position: relative;
    box-shadow: var(--shadow);
}
.proof-step-num {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--gray-100);
}
.proof-step-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: var(--terracotta);
    color: var(--white);
    font-size: 1.4rem;
    display: grid;
    place-items: center;
}
.section--dark .proof-step h3 { color: var(--navy); margin: var(--space-4) 0 var(--space-2); font-size: var(--text-h4); }
.proof-step p { margin: 0; color: var(--ink-2); }
.proof-promises {
    list-style: none;
    padding: 0;
    margin: var(--space-6) 0 0;
    display: grid;
    gap: var(--space-3) var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.proof-promises li { display: flex; gap: var(--space-3); align-items: flex-start; color: rgba(250, 247, 242, .88); font-size: .93rem; line-height: 1.45; }
.proof-promises i { color: var(--sage); font-size: 1.15rem; margin-top: .05rem; }
.proof-promises strong { color: var(--white); }
.proof-steps-cta { margin-top: var(--space-7, 2.5rem); }

/* Old .step cards in other pages had invisible white titles on white cards
   inside dark sections (the .section--dark h3 rule won). Fix globally. */
.section--dark .step h3 { color: var(--navy); }

/* ---- #21 Before / after slider ------------------------------------------ */
.before-after {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 3 / 2;
    background: var(--gray-50);
    user-select: none;
}
.before-after-layer { position: absolute; inset: 0; }
.before-after-layer > * { width: 100%; height: 100%; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.before-after-layer img,
.before-after-layer svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.before-after-layer--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.before-after-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 3px;
    background: var(--white);
    transform: translateX(-50%);
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(15, 42, 68, .2);
}
.before-after-handle i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--white);
    color: var(--navy);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    box-shadow: var(--shadow);
}
.before-after-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    touch-action: pan-y;
}
.before-after-range:focus-visible + figcaption { outline: none; }
.before-after:focus-within .before-after-handle i { outline: var(--focus-ring); outline-offset: 2px; }
.before-after-tag {
    position: absolute;
    top: var(--space-4);
    padding: .3rem .7rem;
    border-radius: var(--radius-full);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    pointer-events: none;
}
.before-after-tag--before { left: var(--space-4); background: var(--navy); color: var(--white); }
.before-after-tag--after { right: var(--space-4); background: var(--white); color: var(--navy); }
/* Caption sits under the frame (not over the image) so it never hides the
   wipe on phones. The figure keeps the 3:2 box via the inner stage. */
.before-after { aspect-ratio: auto; overflow: visible; box-shadow: none; background: none; }
.before-after-stage {
    position: relative;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--gray-50);
}
.before-after figcaption {
    margin-top: var(--space-3);
    color: var(--muted);
    font-size: .88rem;
    text-align: center;
}
/* The SVG mockups each carry their own title/caption text; inside the
   slider the two would overlap mid-wipe, and the Before/After tags already
   label the halves. Real photos have no text, so this only affects mockups. */
.before-after svg text { display: none; }

/* ---- #23 #24 Proof row: technician + sample report ---------------------- */
.proof-row {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    display: grid;
    gap: var(--space-6);
}
.meet-tech {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}
@media (max-width: 760px) { .meet-tech { grid-template-columns: 1fr; } }
.meet-tech-photo > * { border-radius: var(--radius-lg, 16px); overflow: hidden; box-shadow: var(--shadow); margin: 0 !important; }
.meet-tech-body h2 { margin: var(--space-2) 0 var(--space-3); }
.meet-tech-creds { list-style: none; padding: 0; margin: var(--space-4) 0; display: grid; gap: var(--space-2); }
.meet-tech-creds li { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--ink-2); }
.meet-tech-creds i { color: var(--sage-deep); margin-top: .15rem; }
.meet-tech-link { font-weight: 700; color: var(--terracotta-hover); text-decoration: none; }
.meet-tech-link:hover { text-decoration: underline; }

.sample-report {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.sample-report summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
}
.sample-report summary::-webkit-details-marker { display: none; }
.sample-report summary:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius); }
.sample-report-thumb {
    width: 64px;
    height: 82px;
    flex: 0 0 auto;
    background: var(--cream);
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    padding: 8px 7px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    box-shadow: 2px 3px 0 var(--gray-100);
}
.sample-report-thumb-bar { height: 7px; background: var(--navy); border-radius: 2px; }
.sample-report-thumb-line { height: 4px; background: var(--gray-200); border-radius: 2px; }
.sample-report-thumb-line--short { width: 60%; }
.sample-report-thumb-pass {
    position: absolute;
    bottom: 8px;
    right: 6px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--sage-deep);
    border: 1.5px solid var(--sage-deep);
    border-radius: 3px;
    padding: 1px 3px;
    transform: rotate(-8deg);
}
.sample-report-summary-text { display: flex; flex-direction: column; flex: 1; }
.sample-report-summary-text strong { color: var(--navy); font-size: 1.05rem; }
.sample-report-summary-text small { color: var(--muted); }
.sample-report-chevron { color: var(--navy); transition: transform var(--motion-fast) var(--ease); }
.sample-report[open] .sample-report-chevron { transform: rotate(180deg); }
.sample-report-doc {
    margin: 0 var(--space-5) var(--space-5);
    padding: var(--space-5);
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.sample-report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); border-bottom: 2px solid var(--navy); padding-bottom: var(--space-3); }
.sample-report-head h3 { margin: .2rem 0 0; font-size: var(--text-h4); }
.sample-report-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bronze-deep); }
.sample-report-stamp {
    border: 2px solid var(--sage-deep);
    color: var(--sage-deep);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .8rem;
    padding: .25rem .6rem;
    border-radius: 4px;
    transform: rotate(-4deg);
    white-space: nowrap;
}
.sample-report-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-2) var(--space-5); margin: var(--space-4) 0; }
.sample-report-meta div { display: flex; flex-direction: column; }
.sample-report-meta dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.sample-report-meta dd { margin: 0; color: var(--ink); font-size: .92rem; }
.sample-report-table { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--white); }
.sample-report-table caption { text-align: left; font-weight: 700; color: var(--navy); padding-bottom: var(--space-2); }
.sample-report-table th, .sample-report-table td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); text-align: left; }
.sample-report-table thead th { background: var(--gray-50); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.sample-report-table tbody th { text-transform: none; letter-spacing: 0; font-size: inherit; font-weight: 600; color: var(--ink); background: none; }
.sample-report-pass { color: var(--success-deep); font-weight: 700; }
.sample-report-note { margin: var(--space-4) 0 var(--space-2); font-size: .92rem; color: var(--ink-2); }
.sample-report-disclaimer { margin: 0; font-size: .78rem; color: var(--muted); font-style: italic; }
@media (max-width: 560px) {
    .sample-report summary { padding: var(--space-3) var(--space-4); }
    .sample-report-doc { margin: 0 var(--space-3) var(--space-3); padding: var(--space-4); overflow-x: auto; }
    .sample-report-table { font-size: .8rem; }
}

/* ---- #11 One contact form ---------------------------------------------- */
.contact-single { max-width: 760px; }
.contact-single-intro { text-align: center; margin-bottom: var(--space-6); }
.contact-single-intro .lead { margin-left: auto; margin-right: auto; max-width: 52ch; }
.contact-single-alt { font-size: .92rem; color: var(--muted); margin: 0; }
.contact-single-alt a { font-weight: 600; }
.contact-single-card { padding: clamp(1.25rem, 4vw, 2.25rem); }

/* ---- #15 #16 Chat launcher: smaller on phones, brand font everywhere ---- */
.chat-widget button,
.chat-widget input,
.chat-widget textarea,
.chat-widget select { font-family: var(--font-body); }
@media (max-width: 760px) {
    .chat-widget { bottom: calc(64px + var(--space-4)); right: var(--space-3); }
    .chat-launcher { width: 48px; height: 48px; font-size: 1.2rem; box-shadow: 0 4px 14px rgba(15, 42, 68, .25); }
    /* keep the last lines of any page clear of the launcher */
    main { padding-bottom: 56px; }
}

/* ---- #20 Phone sticky bar: Get help is the dominant action --------------- */
@media (max-width: 760px) {
    .sticky-call--three { grid-template-columns: 1fr 1fr 2fr; }
    .sticky-call .sticky-call-emergency span,
    .sticky-call .sticky-call-photo span { align-items: center; }
    .sticky-call .sticky-call-emergency,
    .sticky-call .sticky-call-photo { flex-direction: column; justify-content: center; gap: 2px; padding: .4rem .25rem; text-align: center; }
    .sticky-call .sticky-call-emergency strong,
    .sticky-call .sticky-call-photo strong { font-size: .72rem; }
    .sticky-call .sticky-call-cta { font-size: 1rem; font-weight: 700; gap: .5rem; }
}

/* ---- #25 #26 #28 City pages ---------------------------------------------- */
.city-banner { padding: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
.city-banner-frame { position: relative; border-radius: var(--radius-lg, 16px); overflow: hidden; box-shadow: var(--shadow); }
.city-banner-frame > :first-child { margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.city-banner-frame img,
.city-banner-frame svg { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.city-banner-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-8, 3rem) var(--space-5) var(--space-4);
    background: linear-gradient(transparent, rgba(15, 42, 68, .85));
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.city-banner-badge {
    align-self: flex-start;
    background: var(--terracotta);
    color: var(--white);
    font-weight: 700;
    font-size: .9rem;
    padding: .35rem .8rem;
    border-radius: var(--radius-full);
}
.city-banner-sub { color: var(--cream); font-size: .85rem; }

.city-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin: var(--space-6) 0;
    padding: var(--space-5);
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 4px solid var(--terracotta);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.city-cta > div { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 260px; }
.city-cta strong { color: var(--navy); font-size: 1.05rem; }
.city-cta span { color: var(--muted); font-size: .9rem; }

.city-map { margin: clamp(2rem, 5vw, 3rem) 0 var(--space-6); }
.city-map h2 { font-size: var(--text-h3); margin-bottom: var(--space-4); }
.city-map-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; }
@media (max-width: 680px) { .city-map-grid { grid-template-columns: 1fr; } }
.city-map-svg { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); }
.city-map-nearby-label { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bronze-deep); margin: 0 0 var(--space-2); }
.city-chips { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.city-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .8rem;
    min-height: 40px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-full);
    background: var(--white);
    color: var(--navy);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
}
.city-chip small { color: var(--muted); font-weight: 500; }
.city-chip:hover { border-color: var(--terracotta); color: var(--terracotta-hover); }
.city-map-all { font-weight: 700; color: var(--terracotta-hover); text-decoration: none; font-size: .92rem; }

/* ---- #29 Footer -------------------------------------------------------- */
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: var(--space-6); }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-contact { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.site-footer .footer-contact a, .site-footer .footer-contact span {
    display: inline-flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .9rem;
    color: rgba(250, 247, 242, .82);
    word-break: break-word;
}
.footer-contact i { color: var(--sage); margin-top: .15rem; }
.footer-bottom-tagline { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(250, 247, 242, .5); }

/* ---- #30 404 page -------------------------------------------------------- */
.status-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-full);
    padding: .3rem .3rem .3rem .9rem;
    background: var(--white);
    margin: var(--space-4) 0 var(--space-5);
}
.status-search:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(15, 42, 68, .12); }
.status-search i { color: var(--muted); }
.status-search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; min-width: 0; padding: .4rem 0; }
.status-links-h { font-size: 1rem; margin: var(--space-5) 0 var(--space-3); text-align: left; }
.status-links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-2); text-align: left; }
.status-links a {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--ink);
    background: var(--white);
}
.status-links a:hover { border-color: var(--navy); }
.status-links i { color: var(--sage-deep); font-size: 1.15rem; margin-top: .1rem; }
.status-links span { display: flex; flex-direction: column; }
.status-links strong { color: var(--navy); font-size: .95rem; }
.status-links small { color: var(--muted); font-size: .8rem; }
.status-posts { text-align: left; padding-left: 1.1rem; margin: 0; display: grid; gap: var(--space-2); }
/* The status page grid column was sizing to the card's min-content, pushing
   the card ~4px past the viewport on 375px phones. */
.status-page { grid-template-columns: minmax(0, 1fr); }
.status-card { justify-self: center; }
/* #6 footer "stray dot": the discreet (c) staff-login link was display:block
   (inherited from .site-footer a rules), so it sat alone on its own line. */
.site-footer .footer-bottom .footer-staff-login { display: inline; padding: 0; }