/* -- UN-CONSTRAINT all common WP theme parent wrappers so 100vw breakouts
       actually escape to viewport edges (theme containers usually cap at
       1200px AND have overflow:hidden, which clips our breakout) -- */
body.single .site-main,
body.page .site-main,
body.single main,
body.page main,
body.single article.post,
body.single article.page,
body.page article.page,
body.single .entry-content,
body.page .entry-content,
body.single .post-content,
body.page .post-content,
body.single .content-area,
body.page .content-area,
body .entry-content:has(.hftr-view--article),
body .entry-content:has(.hftr-view--topic),
body main:has(.hftr-view--article),
body main:has(.hftr-view--topic){
    max-width:100% !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    overflow:visible !important;
}

/* -- PAGE SHELL: full-bleed background, content centered -- */
html body .hftr-view--article.hftr-shell,
html body .hftr-shell.hftr-view--article{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding-left:0 !important;
    padding-right:0 !important;
    overflow-x:visible !important;
    overflow-y:visible !important;
    box-sizing:border-box !important;
    position:relative !important;
}

html body .hftr-view--article .hftr-page{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
}

/* -- HERO: full-bleed image, centered content card -- */

/* -- TRUST BAR: full bleed background, content centered -- */

/* -- CONTENT WRAPPER: kill all 100vw / breakout, just be a normal block -- */
html body .hftr-view--article .hftr-content{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    overflow:visible !important;
}

/* -- HFA3 ARTICLE: everything block, prose strict -- */
html body .hftr-view--article .hfa3,
html body .hftr-view--article .hfa3 *{
    box-sizing:border-box !important;
    max-width:100% !important;
    overflow-wrap:break-word !important;
    word-wrap:break-word !important;
}

html body .hftr-view--article .hfa3{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
}

html body .hftr-view--article .hfa3 > .hfa3__section{
    display:block !important;
    width:100% !important;
    padding:clamp(40px,5vw,72px) 0 !important;
    margin:0 !important;
}

html body .hftr-view--article .hfa3 .hfa3__shell{
    display:block !important;
    width:min(1180px, calc(100% - 48px)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:0 !important;
}

/* -- PROSE: NUCLEAR cage. Every descendant forced into block flow -- */
html body .hftr-view--article .hfa3 .hfa3__prose,
html body .hftr-view--article .hfa3 .hfa3__prose *{
    width:auto !important;
    max-width:100% !important;
    float:none !important;
    clear:both !important;
    position:static !important;
    transform:none !important;
}

html body .hftr-view--article .hfa3 .hfa3__prose{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
}

/* Force block display on all prose children — kills any leftover grid/flex */
html body .hftr-view--article .hfa3 .hfa3__prose > *{
    display:block !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

/* Inline elements stay inline */
html body .hftr-view--article .hfa3 .hfa3__prose strong,
html body .hftr-view--article .hfa3 .hfa3__prose em,
html body .hftr-view--article .hfa3 .hfa3__prose b,
html body .hftr-view--article .hfa3 .hfa3__prose i,
html body .hftr-view--article .hfa3 .hfa3__prose a,
html body .hftr-view--article .hfa3 .hfa3__prose span,
html body .hftr-view--article .hfa3 .hfa3__prose code{
    display:inline !important;
    width:auto !important;
}

/* List items stay list-item */
html body .hftr-view--article .hfa3 .hfa3__prose li{
    display:list-item !important;
    width:auto !important;
}

/* Images: block, centered, max-width */
html body .hftr-view--article .hfa3 .hfa3__prose img{
    display:block !important;
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    margin:24px auto !important;
    border-radius:14px !important;
}

/* Tables stay table */
html body .hftr-view--article .hfa3 .hfa3__prose table{
    display:table !important;
    width:100% !important;
    max-width:100% !important;
    border-collapse:collapse !important;
}
html body .hftr-view--article .hfa3 .hfa3__prose thead{display:table-header-group !important;}
html body .hftr-view--article .hfa3 .hfa3__prose tbody{display:table-row-group !important;}
html body .hftr-view--article .hfa3 .hfa3__prose tr{display:table-row !important;}
html body .hftr-view--article .hfa3 .hfa3__prose th,
html body .hftr-view--article .hfa3 .hfa3__prose td{display:table-cell !important;}

/* Mobile */
@media (max-width:768px){
    html body .hftr-view--article .hfa3 .hfa3__shell{
        width:calc(100% - 28px) !important;
    }
}

/* -- Same un-constraint logic ALSO for topic/trend pages -- */
html body .hftr-view--topic.hftr-shell,
html body .hftr-shell.hftr-view--topic{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    overflow:visible !important;
    position:relative !important;
    box-sizing:border-box !important;
}

/* -- HTML/BODY overflow must stay visible too, else the breakout is clipped -- */
html,
body{
    overflow-x:hidden !important;  /* prevent horizontal scrollbar */
}

/* ============================================================================
   TOPIC/TREND PAGE FIXES — V6.8
   1. The Overview section H2 was white-on-white (line 2402 forced color:#fff
      on .hftr-section-card--lead h2 for both topic+article views). On the
      current LIGHT background it's invisible. Force navy.
   2. The editorial visual (image) was floating right with the copy area
      empty — restore proper 2-col layout with copy on left + image on right.
   3. Gallery section: eyebrow + title were left-aligned but gallery centered
      → align everything to the same left edge inside the shell.
   ============================================================================ */

/* -- 1. Kill white-on-white title bug on topic overview -- */
html body .hftr-view--topic .hftr-section-card--lead > h2,
html body .hftr-view--topic .hftr-section-card.hftr-section-card--lead h2,
html body .hftr-view--topic .hftr-section-card--flow.hftr-section-card--lead > h2,
html body .hftr-view--topic .hftr-section-card--flow > h2{
    color:#061b31 !important;
    -webkit-text-fill-color:#061b31 !important;
    background:transparent !important;
    background-image:none !important;
    text-shadow:none !important;
}

/* -- 2. Topic section labels: always visible (navy) -- */

/* -- 3. Topic section default text colors (paragraphs in overview) -- */
html body .hftr-view--topic .hftr-section-card--lead p,
html body .hftr-view--topic .hftr-section-card--flow p,
html body .hftr-view--topic .hftr-section-card--lead .hftr-flow-copy p,
html body .hftr-view--topic .hftr-section-card .hftr-flow-copy p{
    color:#506174 !important;
    -webkit-text-fill-color:#506174 !important;
    font-size:clamp(15px,1.15vw,17px) !important;
    line-height:1.7 !important;
}

/* -- 4. Editorial flow row: clean 2-col layout (copy left, visual right) -- */
html body .hftr-view--topic .hftr-flow-row{
    display:grid !important;
    grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr) !important;
    gap:clamp(28px,4vw,56px) !important;
    align-items:start !important;
    margin:0 !important;
}
html body .hftr-view--topic .hftr-flow-copy{
    min-width:0 !important;
    max-width:none !important;
}
html body .hftr-view--topic .hftr-flow-visual{
    margin:0 !important;
}
html body .hftr-view--topic .hftr-flow-visual .hftr-lead-media{
    width:100% !important;
    max-width:100% !important;
    border-radius:18px !important;
    overflow:hidden !important;
    box-shadow:0 18px 48px rgba(6,27,49,.16) !important;
}
html body .hftr-view--topic .hftr-flow-visual .hftr-lead-media img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    aspect-ratio:4/5 !important;
    object-fit:cover !important;
    display:block !important;
}
html body .hftr-view--topic .hftr-flow-visual .hftr-lead-caption{
    margin:14px 0 0 !important;
    padding:0 !important;
    text-align:left !important;
}
html body .hftr-view--topic .hftr-flow-visual .hftr-lead-caption span{
    display:inline-block !important;
    padding:5px 10px !important;
    margin:0 0 8px !important;
    border-radius:999px !important;
    background:rgba(6,27,49,.06) !important;
    color:#061b31 !important;
    font-size:10.5px !important;
    font-weight:800 !important;
    letter-spacing:.16em !important;
    text-transform:uppercase !important;
}
html body .hftr-view--topic .hftr-flow-visual .hftr-lead-caption p{
    margin:0 !important;
    font-size:13.5px !important;
    color:#506174 !important;
    line-height:1.55 !important;
}

/* -- 5. Why-this-trend grid: clean 4-col cards, no funky chrome -- */
html body .hftr-view--topic .hftr-overview-why-now{
    margin-top:clamp(40px,5vw,60px) !important;
}
html body .hftr-view--topic .hftr-overview-why-now__title{
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
    margin:0 0 22px !important;
    color:#189d2a !important;
    -webkit-text-fill-color:#189d2a !important;
    font-size:10.5px !important;
    font-weight:900 !important;
    letter-spacing:.18em !important;
    text-transform:uppercase !important;
}
html body .hftr-view--topic .hftr-overview-why-now__title::before{
    content:"" !important;
    display:inline-block !important;
    width:28px !important;
    height:1px !important;
    background:#189d2a !important;
}
html body .hftr-view--topic .hftr-overview-why-now__grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:16px !important;
}
html body .hftr-view--topic .hftr-overview-why-now__item{
    padding:22px 22px 20px !important;
    background:#fff !important;
    border:1px solid rgba(6,27,49,.10) !important;
    border-radius:14px !important;
    box-shadow:0 6px 16px rgba(6,27,49,.04) !important;
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
}
html body .hftr-view--topic .hftr-overview-why-now__item strong{
    color:#061b31 !important;
    -webkit-text-fill-color:#061b31 !important;
    font-size:15px !important;
    font-weight:800 !important;
    line-height:1.25 !important;
    letter-spacing:-.01em !important;
}
html body .hftr-view--topic .hftr-overview-why-now__item span{
    color:#506174 !important;
    -webkit-text-fill-color:#506174 !important;
    font-size:13.5px !important;
    line-height:1.55 !important;
}

/* -- 6. Gallery section: eyebrow + title + gallery all align left -- */
html body .hftr-view--topic .hftr-section-card .hftr-gallery-intro{
    max-width:780px !important;
    margin:0 0 24px !important;
    color:#506174 !important;
    -webkit-text-fill-color:#506174 !important;
    font-size:clamp(14px,1.1vw,16px) !important;
    line-height:1.6 !important;
    text-align:left !important;
}
html body .hftr-view--topic .hftr-section-card .hftr-gallery{
    margin-left:0 !important;
    margin-right:0 !important;
    width:100% !important;
}

/* -- 7. SECTION CAGE — every section centered at 1240px with consistent gutter.
       This is the root fix for eyebrow + h2 misalignment: the section itself
       is now the centered container, so all its children (label, h2, content)
       share the same left edge. -- */
html body .hftr-view--topic .hftr-main{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
}
html body .hftr-view--topic .hftr-content > *,
html body .hftr-view--topic .hftr-main > *,
html body .hftr-view--topic .hftr-section-card,
html body .hftr-view--topic .hftr-section-card--flat,
html body .hftr-view--topic .hftr-section-card--flow,
html body .hftr-view--topic .hftr-section-card--lead,
html body .hftr-view--topic .hftr-section-card--detail,
html body .hftr-view--topic .hftr-section-card--accent,
html body .hftr-view--topic .hftr-section-card--compass,
html body .hftr-view--topic .hftr-section-card--roomfit{
    width:min(1240px, calc(100% - 48px)) !important;
    max-width:1240px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    text-align:left !important;
    box-sizing:border-box !important;
}

/* -- 8. Label + H2 + everything inside section align to its left edge -- */
html body .hftr-view--topic .hftr-section-card > h2{
    display:block !important;
    word-wrap:break-word !important;
    overflow-wrap:break-word !important;
    hyphens:auto !important;
    font-size:clamp(28px,3vw,44px) !important;  /* avoid overflow on long titles */
    line-height:1.08 !important;
}

/* -- 9. Why-now grid: handle 4–6 cards gracefully (don't overflow on narrow viewports) -- */
html body .hftr-view--topic .hftr-overview-why-now__grid{
    grid-template-columns:repeat(auto-fit, minmax(220px,1fr)) !important;
    gap:14px !important;
}

/* -- 10. Decision Compass + table sections: same cage -- */
html body .hftr-view--topic .hftr-decision-grid,
html body .hftr-view--topic .hftr-comparison,
html body .hftr-view--topic .hftr-feature-grid,
html body .hftr-view--topic .hftr-detail-grid,
html body .hftr-view--topic .hftr-checklist{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
}

/* -- 11. OVERVIEW: stop the image from sticking to the title --
       The legacy CSS pulled .hftr-flow-visual up with margin-top: -34px / -58px
       so it visually overlapped the title. Reset it: title at top spans full
       width, then 2-col grid below (paragraphs | image) starts cleanly. -- */
html body .hftr-view--topic .hftr-section-card--lead{
    padding-top:clamp(36px,4vw,56px) !important;
    padding-bottom:clamp(36px,4vw,56px) !important;
}
html body .hftr-view--topic .hftr-section-card--lead > h2{
    margin-bottom:24px !important;
    max-width:920px !important;
}
html body .hftr-view--topic .hftr-main > .hftr-section-card--lead:first-child .hftr-flow-row,
html body .hftr-view--topic .hftr-section-card--lead .hftr-flow-row{
    grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr) !important;
    grid-template-areas:none !important;
    gap:clamp(28px,4vw,52px) !important;
    align-items:start !important;
    margin-top:8px !important;
}
html body .hftr-view--topic .hftr-main > .hftr-section-card--lead:first-child .hftr-flow-visual,
html body .hftr-view--topic .hftr-section-card--lead .hftr-flow-visual{
    margin-top:0 !important;          /* kill the -34px/-58px pull-up */
    max-width:none !important;
    justify-self:stretch !important;
    align-self:start !important;
    grid-area:auto !important;
}
html body .hftr-view--topic .hftr-main > .hftr-section-card--lead:first-child .hftr-flow-copy,
html body .hftr-view--topic .hftr-section-card--lead .hftr-flow-copy{
    grid-area:auto !important;
    align-self:start !important;
    max-width:none !important;
}

/* Mobile: stack vertically with no pull-up */
@media (max-width:1100px){
    html body .hftr-view--topic .hftr-main > .hftr-section-card--lead:first-child .hftr-flow-visual{
        margin-top:0 !important;
    }
}
@media (max-width:900px){
    html body .hftr-view--topic .hftr-section-card--lead .hftr-flow-row{
        grid-template-columns:1fr !important;
        gap:24px !important;
    }
}

/* -- 8. Responsive: stack copy + visual on mobile -- */
@media (max-width:900px){
    html body .hftr-view--topic .hftr-flow-row{
        grid-template-columns:1fr !important;
        gap:24px !important;
    }
    html body .hftr-view--topic .hftr-overview-why-now__grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}
@media (max-width:600px){
    html body .hftr-view--topic .hftr-overview-why-now__grid{
        grid-template-columns:1fr !important;
    }
}