/* =============================================================
   CHRONICLES - CHARCOAL THEME OVERRIDE
   -------------------------------------------------------------
   Replaces the brown accent palette in blog-style.css with an
   editorial charcoal palette. Cream background is preserved.
   Two-tone headings (solid charcoal + italic gray) get a real
   hand-drawn "boil" warp via the SVG filter injected by
   chronicles/boil.js. Scoped to body.theme-charcoal so any
   chronicle page can opt in by toggling that one class, and the
   shared blog-style.css stays untouched.
   Load order: blog-style.css FIRST, then this file.
   ============================================================= */

body.theme-charcoal {
    --accent: #1F1F1F;
    --accent-light: #C8C8C8;
}

/* ---------- Expert tip card ---------- */
body.theme-charcoal .expert-tip {
    border-color: rgba(31, 31, 31, 0.15);
    box-shadow: 0 20px 40px rgba(31, 31, 31, 0.05);
}

/* ---------- Highlighted text ---------- */
body.theme-charcoal .highlight-luxury {
    background: linear-gradient(120deg, rgba(31, 31, 31, 0.10) 0%, rgba(31, 31, 31, 0.10) 100%);
}

/* ---------- Article figure frames ---------- */
body.theme-charcoal .content figure.article-figure,
body.theme-charcoal .content figure.article-figure-duo > figure {
    background: #111111;
    box-shadow:
        0 2px 0 rgba(31, 31, 31, 0.55),
        0 30px 60px rgba(0, 0, 0, 0.18),
        0 8px 24px rgba(31, 31, 31, 0.10);
}
body.theme-charcoal .content figure.article-figure:hover,
body.theme-charcoal .content figure.article-figure-duo > figure:hover {
    box-shadow:
        0 2px 0 rgba(31, 31, 31, 0.80),
        0 44px 80px rgba(0, 0, 0, 0.22),
        0 12px 32px rgba(31, 31, 31, 0.14);
}

/* ---------- Inline body links ---------- */
body.theme-charcoal .content p a,
body.theme-charcoal .content li a {
    border-bottom-color: rgba(31, 31, 31, 0.25);
}

/* ---------- Sidebar CTA card ---------- */
body.theme-charcoal .cta-box {
    border-color: rgba(31, 31, 31, 0.12);
}
body.theme-charcoal .cta-box::before,
body.theme-charcoal .cta-box::after {
    border-color: rgba(31, 31, 31, 0.3);
}
body.theme-charcoal .cta-box:hover {
    box-shadow: 0 50px 100px rgba(31, 31, 31, 0.12);
}
body.theme-charcoal.hero-v2-active .sidebar .cta-box {
    background-color: #111111;
}

/* ---------- Footer ---------- */
body.theme-charcoal .footer-columns {
    border-top-color: rgba(31, 31, 31, 0.18);
    border-bottom-color: rgba(31, 31, 31, 0.18);
}
body.theme-charcoal .footer-col + .footer-col {
    border-left-color: rgba(31, 31, 31, 0.18);
}
body.theme-charcoal .footer-cta-btn:hover {
    background: #2A2A2A;
    box-shadow: 0 10px 24px rgba(31, 31, 31, 0.25);
}
@media (max-width: 1024px) {
    body.theme-charcoal .footer-col {
        border-bottom-color: rgba(31, 31, 31, 0.18) !important;
    }
}

/* ---------- Inline video card (sidebar-reviews) ---------- */
body.theme-charcoal .sr-track {
    background: #111111;
}

/* ---------- Mobile sticky CTA ---------- */
body.theme-charcoal .mobile-cta .btn {
    box-shadow: 0 20px 40px rgba(31, 31, 31, 0.3);
}

/* ---------- Popup ---------- */
body.theme-charcoal .popup-card {
    border-color: rgba(31, 31, 31, 0.1);
}
body.theme-charcoal .form-group input:focus,
body.theme-charcoal .form-group select:focus,
body.theme-charcoal .form-group textarea:focus {
    box-shadow: 0 5px 15px rgba(31, 31, 31, 0.05);
}
body.theme-charcoal .upload-zone {
    border-color: rgba(31, 31, 31, 0.3);
}
body.theme-charcoal .upload-zone:hover,
body.theme-charcoal .upload-zone.has-files {
    background: rgba(31, 31, 31, 0.04);
}
body.theme-charcoal .popup-submit:hover {
    box-shadow: 0 15px 30px rgba(31, 31, 31, 0.2);
}

/* ---------- Hero pill + circle CTAs ---------- */
body.theme-charcoal .hero-redesign .hr-pill,
body.theme-charcoal .hero-redesign .hr-cta-circle {
    background: #111111;
}

/* ---------- Two-tone headings ----------
   Solid charcoal main span + italic medium-gray accent span,
   so the h2 reads as "bold black" + "italic gray" instead of
   collapsing to a single tone now that --accent is charcoal. */
body.theme-charcoal .content h2 .t-main {
    color: #1A1A1A;
}
body.theme-charcoal .content h2 .t-accent {
    color: #7A7A7A;
    font-style: italic;
    font-weight: 500;
}
body.theme-charcoal .hero-redesign h1.hr-title .hr-accent {
    color: #7A7A7A;
}
body.theme-charcoal .content h2 .h2-icon {
    stroke: #7A7A7A;
}

/* ---------- Subheading (h3) in oxblood ---------- */
body.theme-charcoal .content h3 {
    color: #7A1F2A;
}

/* ============================================================
   MOBILE BREATHING ROOM
   ------------------------------------------------------------
   The base blog-style.css uses tight horizontal padding (15px)
   and has no allowance for the fixed bottom .mobile-cta button,
   which lands on top of body content / headings. Here we give
   the article column real margin so paragraphs and headings
   stop colliding with each other and with the sticky CTA.
   ============================================================ */
@media (max-width: 768px) {
    body.theme-charcoal .mobile-cta {
        display: none !important;
    }
    body.theme-charcoal main.container {
        padding: 36px 22px 48px;
    }
    body.theme-charcoal .content h2 {
        margin: 3rem 0 1.1rem;
    }
    body.theme-charcoal .content h3 {
        margin: 2rem 0 0.7rem;
    }
    body.theme-charcoal .content p {
        margin-bottom: 1.6rem;
        line-height: 1.7;
    }
    body.theme-charcoal .content ul,
    body.theme-charcoal .content ol {
        margin-bottom: 1.8rem;
    }
    body.theme-charcoal .content blockquote {
        margin: 2.6rem 0;
        padding: 22px 22px 22px 26px;
    }
    body.theme-charcoal .expert-tip {
        margin: 2.6rem 0;
        padding: 22px;
    }
    body.theme-charcoal .section-divider {
        margin: 2.6rem 0;
    }
    body.theme-charcoal .author-bio {
        margin-top: 3rem;
    }
}

@media (max-width: 480px) {
    body.theme-charcoal main.container {
        padding: 30px 18px 44px;
    }
    body.theme-charcoal .content h2 {
        font-size: 1.35rem;
        gap: 12px;
    }
}

/* ---------- Boil effect on the gray accent spans ----------
   SVG feTurbulence displacement (filter injected by boil.js).
   Seed is re-rolled each frame so the warp wiggles. */
body.theme-charcoal .content h2 .t-accent,
body.theme-charcoal .hero-redesign h1.hr-title .hr-accent {
    filter: url(#boil-filter);
}
@media (prefers-reduced-motion: reduce) {
    body.theme-charcoal .content h2 .t-accent,
    body.theme-charcoal .hero-redesign h1.hr-title .hr-accent {
        filter: none;
    }
}

/* ---------- Blockquote: drop uppercase + bold ---------- */
body.theme-charcoal .content blockquote {
    text-transform: none;
    font-weight: 400;
    font-size: 1.35rem;
    line-height: 1.5;
    letter-spacing: 0;
}
body.theme-charcoal .content blockquote cite {
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0.02em;
}
@media (max-width: 768px) {
    body.theme-charcoal .content blockquote {
        font-size: 1.1rem;
    }
}

/* ============================================================
   MOBILE OVERFLOW SAFETY NET
   ------------------------------------------------------------
   Some chronicle pages embed wide tables, full-bleed images,
   long URLs or code blocks that push the article column past
   the viewport on phones, clipping body text against the card
   edge. These rules constrain every common offender to the
   column width and ensure long words wrap rather than overflow.
   Justified body copy is also relaxed to left-aligned on phones
   so the ragged-right hides hyphenation gaps that justify mode
   produces in narrow columns.
   ============================================================ */
@media (max-width: 768px) {
    body.theme-charcoal,
    body.theme-charcoal html {
        overflow-x: hidden;
    }
    body.theme-charcoal main.container {
        max-width: 100vw;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    /* CRITICAL: grid items default to min-width: auto (= min-content).
       A single wide table or long URL pushes the article column past
       the viewport. Forcing min-width: 0 lets the grid item shrink. */
    body.theme-charcoal main.container > * {
        min-width: 0;
        max-width: 100%;
    }
    body.theme-charcoal .content,
    body.theme-charcoal article.content {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-wrap: break-word;
        word-break: normal;
    }
    body.theme-charcoal .content p,
    body.theme-charcoal .content li,
    body.theme-charcoal .content h1,
    body.theme-charcoal .content h2,
    body.theme-charcoal .content h3,
    body.theme-charcoal .content blockquote,
    body.theme-charcoal .content figcaption {
        max-width: 100%;
        overflow-wrap: break-word;
        word-wrap: break-word;
        hyphens: auto;
    }
    body.theme-charcoal .content p,
    body.theme-charcoal .content li {
        text-align: justify;
    }
    body.theme-charcoal .content img,
    body.theme-charcoal .content video,
    body.theme-charcoal .content iframe,
    body.theme-charcoal .content svg,
    body.theme-charcoal .content figure {
        max-width: 100%;
        height: auto;
        display: block;
        box-sizing: border-box;
    }
    body.theme-charcoal .content figure.article-figure,
    body.theme-charcoal .content figure.article-figure-duo {
        margin-left: 0;
        margin-right: 0;
    }
    /* Tables: convert to horizontally scrollable strip */
    body.theme-charcoal .content table,
    body.theme-charcoal .comparison-table-wrap {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    body.theme-charcoal .comparison-table-wrap table {
        width: max-content;
        min-width: 100%;
    }
    /* Code blocks and long inline URLs */
    body.theme-charcoal .content pre,
    body.theme-charcoal .content code {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-word;
    }
    body.theme-charcoal .content a {
        overflow-wrap: anywhere;
    }
}

/* ============================================================
   MOBILE-ONLY POPUP REDESIGN - "Restoration Dossier"
   ------------------------------------------------------------
   Cream paper card with charcoal hairline frame. Photo header
   dropped on mobile. Two-tone display title (charcoal + italic
   oxblood). Four borderless fields each prefixed with a small
   oxblood Roman numeral and italic gray label, with a single
   hairline underline that thickens to oxblood on focus. Sofa
   Type field hidden on mobile (boil.js pre-fills its value so
   the existing validator passes). Desktop popup is untouched.
   ============================================================ */
@media (max-width: 768px) {
    /* --- Drop the Sofa Type field on themed mobile --- */
    body.theme-charcoal .form-group:has([name="sofa"]) {
        display: none !important;
    }

    /* --- Overlay backdrop: warm dim, sheet docks to bottom --- */
    body.theme-charcoal .popup-overlay {
        background: rgba(28, 18, 12, 0.58);
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
        align-items: flex-end;
        justify-content: center;
        padding: 0;
    }

    /* --- Card: cream bottom-sheet, rounded top, soft lift --- */
    body.theme-charcoal .popup-card.landscape {
        width: 100%;
        max-width: 520px;
        background: #FDFBF8;
        border: none;
        border-radius: 30px 30px 0 0;
        box-shadow: 0 -24px 70px rgba(28, 15, 7, 0.34);
        padding: 0;
        max-height: 94vh;
        overflow-y: auto;
        flex-direction: column;
        min-height: auto;
        position: relative;
        transform: translateY(100%) scale(1);
        transition: transform 0.55s cubic-bezier(0.16, 0.84, 0.34, 1);
    }
    body.theme-charcoal .popup-overlay.active .popup-card.landscape {
        transform: translateY(0) scale(1);
    }
    /* grab handle */
    body.theme-charcoal .popup-card.landscape::before {
        content: "";
        position: absolute;
        top: 11px;
        left: 50%;
        transform: translateX(-50%);
        width: 44px;
        height: 4px;
        border-radius: 99px;
        background: rgba(26, 26, 26, 0.16);
        z-index: 20;
    }

    /* Photo header hidden on themed mobile; corner accents off */
    body.theme-charcoal .popup-image {
        display: none !important;
    }
    body.theme-charcoal .popup-corner-accent {
        display: none;
    }

    /* --- Close button: hairline circle, charcoal --- */
    body.theme-charcoal .popup-close {
        top: 14px;
        right: 14px;
        width: 34px;
        height: 34px;
        background: transparent;
        color: #1A1A1A;
        border: 1px solid #1A1A1A;
        border-radius: 50%;
        box-shadow: none;
        z-index: 10;
        transition: background 0.25s ease, color 0.25s ease;
    }
    body.theme-charcoal .popup-close:hover {
        background: #1A1A1A;
        color: #FDFBF8;
    }
    body.theme-charcoal .popup-close svg {
        width: 13px;
        height: 13px;
    }

    /* --- Content area --- */
    body.theme-charcoal .popup-content {
        padding: 0;
        background: transparent;
    }
    body.theme-charcoal .popup-panel {
        padding: 34px 26px calc(26px + env(safe-area-inset-bottom));
        position: relative;
    }

    /* --- Masthead eyebrow: "No. 01 · FREE ASSESSMENT" --- */
    body.theme-charcoal .popup-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-family: 'Manrope', sans-serif;
        font-style: italic;
        font-weight: 500;
        font-size: 0.62rem;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: #7A7A7A;
        margin: 0 0 14px;
        padding: 0;
        background: transparent;
        border: none;
    }
    body.theme-charcoal .popup-eyebrow::before {
        content: 'No. 01';
        color: #7A1F2A;
        font-style: italic;
        font-weight: 700;
        letter-spacing: 0.18em;
    }
    body.theme-charcoal .popup-eyebrow::after {
        content: '';
        width: 40px;
        height: 1px;
        background: #1A1A1A;
    }

    /* --- Title: two-tone display (echoes h2 .t-main + .t-accent) --- */
    body.theme-charcoal .popup-title {
        font-family: 'Bricolage Grotesque', 'Syne', serif;
        font-size: 1.85rem;
        line-height: 1.04;
        font-weight: 800;
        color: #1A1A1A;
        letter-spacing: -0.025em;
        margin: 0 0 16px;
        text-transform: none;
    }
    body.theme-charcoal .popup-title .popup-accent {
        color: #7A1F2A;
        font-style: italic;
        font-weight: 500;
        background: none;
        -webkit-background-clip: initial;
        background-clip: initial;
        -webkit-text-fill-color: #7A1F2A;
    }

    /* Hairline rule under the title -- a fading bar */
    body.theme-charcoal .popup-panel#formPanel .popup-title::after {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background: linear-gradient(to right,
                    #1A1A1A 0%,
                    #1A1A1A 30%,
                    rgba(26, 26, 26, 0) 100%);
        margin-top: 14px;
    }

    /* --- Form rhythm --- */
    body.theme-charcoal .popup-form {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    body.theme-charcoal .form-row {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* staggered field entrance when sheet opens */
    body.theme-charcoal .popup-overlay.active #formPanel .popup-form > * {
        animation: tc-pf-rise 0.5s cubic-bezier(0.16, 0.84, 0.34, 1) both;
    }
    body.theme-charcoal .popup-overlay.active #formPanel .popup-form > *:nth-child(2) { animation-delay: 0.08s; }
    body.theme-charcoal .popup-overlay.active #formPanel .popup-form > *:nth-child(3) { animation-delay: 0.15s; }
    body.theme-charcoal .popup-overlay.active #formPanel .popup-form > *:nth-child(4) { animation-delay: 0.22s; }
    body.theme-charcoal .popup-overlay.active #formPanel .popup-form > *:nth-child(5) { animation-delay: 0.29s; }
    body.theme-charcoal .popup-overlay.active #formPanel .popup-form > *:nth-child(6) { animation-delay: 0.36s; }
    @keyframes tc-pf-rise {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* --- Field: oxblood Roman numeral + italic gray label + hairline input --- */
    body.theme-charcoal .form-group {
        position: relative;
        padding-left: 30px;
        margin: 0;
    }
    body.theme-charcoal .form-group::before {
        position: absolute;
        left: 0;
        top: 0;
        font-family: 'Bricolage Grotesque', 'Syne', serif;
        font-style: italic;
        font-weight: 500;
        font-size: 0.85rem;
        color: #7A1F2A;
        letter-spacing: 0.04em;
        line-height: 1;
    }
    body.theme-charcoal .form-group:has(#popupName)::before   { content: 'I.'; }
    body.theme-charcoal .form-group:has(#popupPhone)::before  { content: 'II.'; }
    body.theme-charcoal .form-group:has(#popupAddress)::before{ content: 'III.'; }
    body.theme-charcoal .form-group:has(#popupIssue)::before  { content: 'IV.'; }

    body.theme-charcoal .form-group label {
        display: block;
        font-family: 'Manrope', sans-serif;
        font-style: italic;
        font-weight: 700;
        font-size: 0.6rem;
        letter-spacing: 0.26em;
        text-transform: uppercase;
        color: #4A4A4A;
        margin: 0 0 4px;
        padding: 0;
    }

    body.theme-charcoal .form-group input,
    body.theme-charcoal .form-group textarea {
        background: transparent;
        border: 0;
        border-bottom: 1px solid rgba(26, 26, 26, 0.32);
        border-radius: 0;
        padding: 2px 0 7px;
        font-family: 'Manrope', sans-serif;
        font-size: 1rem;
        font-weight: 400;
        color: #1A1A1A;
        transition: border-color 0.3s ease, padding-bottom 0.3s ease;
        box-shadow: none;
        width: 100%;
    }
    body.theme-charcoal .form-group input::placeholder,
    body.theme-charcoal .form-group textarea::placeholder {
        color: rgba(26, 26, 26, 0.32);
        font-style: italic;
        font-weight: 400;
        letter-spacing: 0;
    }
    body.theme-charcoal .form-group input:focus,
    body.theme-charcoal .form-group textarea:focus {
        outline: none;
        background: transparent;
        border-bottom: 2px solid #7A1F2A;
        padding-bottom: 6px;
        box-shadow: none;
    }
    body.theme-charcoal .form-group textarea {
        resize: none;
        min-height: 56px;
        line-height: 1.4;
        font-family: 'Manrope', sans-serif !important;
    }
    body.theme-charcoal .form-group.has-error input,
    body.theme-charcoal .form-group.has-error textarea {
        border-bottom-color: #7A1F2A;
        background: transparent;
    }
    body.theme-charcoal .form-group .field-error {
        font-size: 0.65rem;
        margin-top: 6px;
        color: #7A1F2A;
        font-style: italic;
        letter-spacing: 0.02em;
    }

    /* --- Submit: editorial flat button, charcoal -> oxblood on hover --- */
    body.theme-charcoal .popup-submit {
        background: #1A1A1A;
        color: #FDFBF8;
        border: 0;
        border-radius: 14px;
        padding: 17px 22px;
        font-family: 'Bricolage Grotesque', 'Syne', serif;
        font-style: italic;
        font-weight: 500;
        font-size: 1rem;
        letter-spacing: 0.02em;
        text-transform: none;
        margin-top: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        cursor: pointer;
        transition: background 0.3s ease, transform 0.3s ease;
        box-shadow: 4px 4px 0 rgba(122, 31, 42, 0.0);
    }
    body.theme-charcoal .popup-submit:hover,
    body.theme-charcoal .popup-submit:focus-visible {
        background: #7A1F2A;
        transform: translateY(-2px);
        box-shadow: 4px 4px 0 rgba(26, 26, 26, 0.18);
    }
    body.theme-charcoal .popup-submit .submit-text {
        text-transform: none;
        letter-spacing: 0.02em;
    }
    body.theme-charcoal .popup-submit .submit-arrow {
        width: 22px;
        height: 22px;
        transition: transform 0.3s ease;
        flex-shrink: 0;
    }
    body.theme-charcoal .popup-submit:hover .submit-arrow {
        transform: translateX(5px);
    }

    /* --- Legal microcopy --- */
    body.theme-charcoal .popup-legal {
        font-family: 'Manrope', sans-serif;
        font-style: italic;
        font-size: 0.62rem;
        letter-spacing: 0.06em;
        color: #7A7A7A;
        text-align: center;
        margin-top: 12px;
    }

    /* --- Thank you panel --- */
    body.theme-charcoal .thankyou-panel {
        padding: 52px 26px 32px;
        text-align: center;
    }
    body.theme-charcoal .thankyou-panel .popup-title {
        font-size: 1.65rem;
    }
    body.theme-charcoal .thankyou-panel .popup-title::after {
        display: none;
    }
    body.theme-charcoal .thankyou-panel .ty-divider {
        background: rgba(26, 26, 26, 0.25);
        height: 1px;
        margin: 22px auto;
        width: 60px;
    }
    body.theme-charcoal .thankyou-panel .ty-check {
        color: #7A1F2A;
    }
    body.theme-charcoal .thankyou-panel .popup-subtitle {
        font-family: 'Manrope', sans-serif;
        font-size: 0.88rem;
        line-height: 1.55;
        color: #4A4A4A;
        margin: 12px 0 0;
    }
    body.theme-charcoal .ty-back-btn {
        background: transparent;
        color: #1A1A1A;
        border: 1px solid #1A1A1A;
        font-family: 'Bricolage Grotesque', 'Syne', serif;
        font-style: italic;
        font-weight: 500;
        font-size: 0.9rem;
        text-transform: none;
        letter-spacing: 0.02em;
        padding: 14px 22px;
        margin-top: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        box-shadow: none;
        transition: background 0.25s ease, color 0.25s ease;
    }
    body.theme-charcoal .ty-back-btn:hover {
        background: #1A1A1A;
        color: #FDFBF8;
    }
}

/* ============================================================
   POPUP MOBILE OVERRIDE (.popup-inspire) - repair-style skin.
   Higher-specificity scope (body.theme-charcoal .popup-inspire)
   loaded after the themed editorial popup above, so it wins
   without touching that design. Applies only to popups that
   carry the .popup-inspire class.
   ============================================================ */
@media (max-width: 768px) {
    /* overlay: centered modal (not bottom sheet) */
    body.theme-charcoal .popup-inspire.popup-overlay {
        align-items: center;
        padding: 12px;
        background: rgba(20,14,7,0.55);
    }
    /* card: cream, rounded all corners, column (photo top + form) */
    body.theme-charcoal .popup-inspire .popup-card.landscape {
        width: 100%;
        max-width: 480px;
        background: #FCFAF7;
        border: none;
        border-radius: 20px;
        box-shadow: 0 40px 90px rgba(20,14,7,0.4);
        max-height: 92vh;
        padding: 0;
        flex-direction: column;
        transform: translateY(30px) scale(0.97);
    }
    body.theme-charcoal .popup-inspire.popup-overlay.active .popup-card.landscape {
        transform: translateY(0) scale(1);
    }
    body.theme-charcoal .popup-inspire .popup-card.landscape::before { display: none !important; }

    /* photo banner back on */
    body.theme-charcoal .popup-inspire .popup-image {
        display: block !important;
        flex: 0 0 88px;
        margin: 0;
        border-radius: 0;
        background: #1C0F07;
    }
    body.theme-charcoal .popup-inspire .popup-image::after {
        content: ""; position: absolute; inset: 0; z-index: 1;
        background: linear-gradient(180deg, rgba(20,14,7,0.12) 0%, rgba(20,14,7,0.58) 100%);
    }
    body.theme-charcoal .popup-inspire .pi-imgmark {
        display: block; position: absolute; z-index: 3;
        top: 14px; left: 18px; right: 18px;
        font-family: var(--font-display); font-weight: 700;
        text-transform: uppercase; color: rgba(255,255,255,0.9);
        font-size: 0.56rem; letter-spacing: 0.24em;
    }
    body.theme-charcoal .popup-inspire .pi-headline { display: none; }
    body.theme-charcoal .popup-inspire .image-overlay-text {
        display: block; position: absolute; z-index: 3;
        bottom: 12px; left: 18px; right: 18px; color: #fff;
    }
    body.theme-charcoal .popup-inspire .overlay-tagline {
        color: rgba(255,255,255,0.8); font-size: 0.6rem;
        letter-spacing: 0.18em; padding-top: 0; border-top: none;
        text-transform: uppercase; font-style: normal;
    }

    /* content */
    body.theme-charcoal .popup-inspire .popup-content { padding: 0; background: transparent; }
    body.theme-charcoal .popup-inspire .popup-panel { padding: 16px 18px 18px; }

    /* eyebrow: plain caramel/charcoal accent, kill No.01 + rule */
    body.theme-charcoal .popup-inspire .popup-eyebrow {
        display: block; font-family: var(--font-display); font-style: normal;
        font-weight: 800; color: var(--accent);
        font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase;
        margin: 0 0 4px; padding: 0; border: none;
    }
    body.theme-charcoal .popup-inspire .popup-eyebrow::before { content: none !important; }
    body.theme-charcoal .popup-inspire .popup-eyebrow::after  { content: none !important; }

    /* title: display sans, not serif-italic skin */
    body.theme-charcoal .popup-inspire .popup-title {
        font-family: var(--font-display); font-style: normal; font-weight: 800;
        font-size: 1.25rem; line-height: 1.1; letter-spacing: -0.01em;
        color: var(--text-main); text-transform: none; margin: 0 0 4px;
    }
    body.theme-charcoal .popup-inspire .popup-title .popup-accent {
        color: var(--accent); font-style: normal; font-weight: 800;
        -webkit-text-fill-color: currentColor;
    }
    body.theme-charcoal .popup-inspire #formPanel .popup-title::after { display: none !important; }

    /* subtitle */
    body.theme-charcoal .popup-inspire .pi-subtitle {
        display: block; font-family: var(--font-body); font-style: normal;
        color: var(--text-muted); font-size: 0.72rem; line-height: 1.4; margin: 0 0 10px;
    }

    /* form: Name | Phone two-up; Address + Issue full width */
    body.theme-charcoal .popup-inspire .popup-form { gap: 9px; }
    body.theme-charcoal .popup-inspire .form-row {
        display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    }
    body.theme-charcoal .popup-inspire .form-row--sofa { grid-template-columns: 1fr; }

    /* fields: remove roman numerals + underline, use filled inputs */
    body.theme-charcoal .popup-inspire .form-group {
        position: relative; padding-left: 0; margin: 0; min-width: 0;
    }
    body.theme-charcoal .popup-inspire .form-group::before { content: none !important; }
    body.theme-charcoal .popup-inspire .form-group label {
        font-family: var(--font-body); font-style: normal; font-weight: 700;
        font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
        color: var(--text-muted); margin: 0 0 2px;
    }
    body.theme-charcoal .popup-inspire .form-group input,
    body.theme-charcoal .popup-inspire .form-group textarea {
        background: #F5F1EB; border: 1px solid rgba(26,18,10,0.10);
        border-radius: 10px; padding: 10px 12px;
        font-family: var(--font-body); font-size: 16px; color: var(--text-main);
        width: 100%; min-width: 0; box-sizing: border-box;
    }
    body.theme-charcoal .popup-inspire .form-group input::placeholder,
    body.theme-charcoal .popup-inspire .form-group textarea::placeholder {
        color: #B4A996; font-style: normal;
    }
    body.theme-charcoal .popup-inspire .form-group input:focus,
    body.theme-charcoal .popup-inspire .form-group textarea:focus {
        border: 1px solid var(--accent);
        background: #fff; box-shadow: 0 0 0 3px rgba(0,0,0,0.06); padding: 10px 12px;
    }
    body.theme-charcoal .popup-inspire .form-group textarea { min-height: 44px; resize: none; line-height: 1.4; }

    /* submit: dark pill, not serif-italic */
    body.theme-charcoal .popup-inspire .popup-submit {
        font-family: var(--font-display); font-style: normal; font-weight: 700;
        font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
        justify-content: center; gap: 12px;
        background: #1C0F07; border-radius: 12px; padding: 12px; margin-top: 2px;
    }
    body.theme-charcoal .popup-inspire .popup-submit .submit-text {
        text-transform: uppercase; letter-spacing: 0.12em;
    }

    /* close: dark glyph on light circle */
    body.theme-charcoal .popup-inspire .popup-close {
        top: 10px; right: 10px; width: 30px; height: 30px;
        color: #1C0F07; background: rgba(255,255,255,0.95); border: none;
    }
    body.theme-charcoal .popup-inspire .popup-close svg { width: 16px; height: 16px; }

    body.theme-charcoal .popup-inspire .popup-legal {
        font-style: normal; text-align: center; margin-top: 6px; font-size: 0.62rem;
    }
}