/* Sitewide contrast v4 — ink on light, cream on dark. Loads LAST. */

/* ═══ LIGHT SURFACES (default body + beige/white sections) ═══ */
body:not(.magazine-home){color:var(--ink,#0E0D0B);background:var(--cream,#F4F1E9)}

:is(.pain,.why,.compare,.pricing,.process,.portfolio,.faq,.packages,.tst,.fbc,
.page-nav-internal,.mx-links,.mx-gallery,.mx-svc-grid,.v3m-fig,
section:not(.hero):not(.trust-strip):not(.approvals):not(.calc-wrap):not(.recent-list):not(.final-cta):not(.cta-block):not(.lp-final-cta)){
color:var(--ink,#0E0D0B)}

:is(.pain,.why,.compare,.pricing,.process,.portfolio,.faq,.packages,.tst,.mx-links,.mx-gallery) .section-title,
:is(.pain,.why,.compare,.pricing,.process,.portfolio,.faq,.packages,.tst) h1,
:is(.pain,.why,.compare,.pricing,.process,.portfolio,.faq,.packages,.tst) h2,
:is(.pain,.why,.compare,.pricing,.process,.portfolio,.faq,.packages,.tst) h3,
.pain-item h3,.why-card h3,.package h3,.process-step h3,.port-card h3,.faq-q,.faq-question,
.compare-table tbody td,.compare-table tbody th,.compare-table .feature,
.v3m-cta-t,.disp,.step h3{color:var(--ink,#0E0D0B)!important}

:is(.pain,.why,.compare,.pricing,.process,.portfolio,.faq,.packages,.tst) .section-sub,
:is(.pain,.why,.compare,.pricing,.process,.portfolio,.faq,.packages,.tst) p,
.section-sub,.section-intro,.section-header p,
.pain-item p,.why-card p,.package p,.package li,.package .price-note,
.process-step p,.tst-text,.tst-card p,.port-card p,.port-body p,
.faq-a p,.faq-a,.faq-answer,.faq-item p,
.guide-card p,.resource-card p,.community-card p,.lb-card p,
.ai-rescue-answer,.ai-rescue-tldr p,.ch-stat-label,
.seo-directory a,.footer-more a,.v3m-cta p,
.text-light,.text-dim,.muted,.dim,.caption,.meta,.sub,.small,
.tst-meta span,.port-loc,.ba-cap,.wk .cap span{color:var(--ink-70,rgba(14,13,11,.72))!important}

:is(.pain,.why,.compare,.pricing,.process,.portfolio,.faq,.packages,.tst) .section-kicker,
.section-kicker,.label,.eyebrow,.badge-text{color:var(--bronze-d,#7A6230)!important}

.mx-links{background:var(--cream,#F4F1E9)!important}
.mx-links .section-title,.mx-links .section-sub,.mx-links h2{color:var(--ink,#0E0D0B)!important}
.mx-links .section-sub{color:var(--ink-70,rgba(14,13,11,.72))!important}

/* Inline low-contrast on LIGHT sections only */
:is(.pain,.why,.compare,.pricing,.process,.portfolio,.faq,.packages,.tst,.mx-links,.nav,.footer)
[style*="color:#888"],:is(.pain,.why,.compare,.pricing,.process,.portfolio,.faq,.packages,.tst,.mx-links)
[style*="color: #888"],
:is(.pain,.why,.compare,.pricing,.process,.portfolio,.faq,.packages,.tst,.mx-links)
[style*="color:#999"],:is(.pain,.why,.compare,.pricing,.process,.portfolio,.faq,.packages,.tst,.mx-links)
[style*="color: #999"],
:is(.pain,.why,.compare,.pricing,.process,.portfolio,.faq,.packages,.tst,.mx-links)
[style*="color:#aaa"],:is(.pain,.why,.compare,.pricing,.process,.portfolio,.faq,.packages,.tst,.mx-links)
[style*="color: #aaa"],
:is(.pain,.why,.compare,.pricing,.process,.portfolio,.faq,.packages,.tst,.mx-links)
[style*="color:#5A5A5A"],:is(.pain,.why,.compare,.pricing,.process,.portfolio,.faq,.packages,.tst,.mx-links)
[style*="color: #5A5A5A"],
:is(.pain,.why,.compare,.pricing,.process,.portfolio,.faq,.packages,.tst,.mx-links)
[style*="color:#A0785A"],:is(.pain,.why,.compare,.pricing,.process,.portfolio,.faq,.packages,.tst,.mx-links)
[style*="color: #A0785A"],
:is(.pain,.why,.compare,.pricing,.process,.portfolio,.faq,.packages,.tst,.mx-links)
[style*="color:var(--gold"],:is(.pain,.why,.compare,.pricing,.process,.portfolio,.faq,.packages,.tst,.mx-links)
[style*="color:var(--text-dim)"]{color:var(--ink-70,rgba(14,13,11,.72))!important}

.trust-bar,.trust-bar .trust-item,.trust-bar .trust-item .label,.trust-bar .trust-item .number{color:var(--ink,#0E0D0B)!important}
.trust-bar .trust-item .number{color:var(--bronze-d,#7A6230)!important}
.trust-bar{background:var(--cream2,#EBE6DB)!important}
.pain-item,.why-card,.package,.process-step,.tst-card,.port-card,.faq-item,.v2-stat,
.pain-callout,.ai-rescue-tldr,.v3m-cta{background:var(--cream,#F4F1E9)!important;color:var(--ink,#0E0D0B)!important}
.pain-callout strong{color:var(--bronze-d,#7A6230)!important}
.v3m-cta{background:var(--cream2,#EBE6DB)!important}
.package.featured{border-color:var(--bronze,#B8924B)!important}
.package .price,.v2-stat-number,.stat .n,.stat-num{color:var(--bronze-d,#7A6230)!important}
.stat .l{color:var(--ink-70,rgba(14,13,11,.72))!important}

/* Buttons on light backgrounds */
.btn-secondary,.btn-ghost,.btn-g,.v3m-cta .btn-secondary,.v3m-cta .btn-primary,
:is(.pain,.why,.compare,.pricing,.process,.portfolio,.faq,.packages,.tst) .btn-secondary,
:is(.pain,.why,.compare,.pricing,.process,.portfolio,.faq,.packages,.tst) .btn-ghost{
color:var(--ink,#0E0D0B)!important;background:transparent!important;
border-color:var(--ink-25,rgba(14,13,11,.25))!important}
.btn-secondary:hover,.btn-ghost:hover,.btn-g:hover{color:var(--bronze,#B8924B)!important;border-color:var(--bronze,#B8924B)!important}
.btn:not(.btn-secondary):not(.btn-ghost):not(.btn-whatsapp):not(.btn-g),
.btn-primary,.btn-b,.nav .nav-cta,.nav-cta,.lp-btn,.lp-btn-gold,.lp-cta:not(.lp-cta-secondary){
background:var(--bronze,#B8924B)!important;color:var(--ink,#0E0D0B)!important}
.btn:not(.btn-secondary):not(.btn-ghost):not(.btn-whatsapp):hover,.btn-primary:hover,.btn-b:hover,.nav-cta:hover{color:var(--cream,#F4F1E9)!important}
.badge,.why-icon,.step-number,.compare-table th.fui-col{background:var(--bronze,#B8924B)!important;color:var(--ink,#0E0D0B)!important}
.package .pkg-cta:not(.featured){background:var(--ink,#0E0D0B)!important;color:var(--cream,#F4F1E9)!important}
.package .pkg-cta.featured,.package.featured .pkg-cta{background:var(--bronze,#B8924B)!important;color:var(--ink,#0E0D0B)!important}
.btn-whatsapp,.lp-btn-green,.nav-call,.smc-wa{background:#0e6b30!important;color:#fff!important}

.nav,.nav-dropdown-menu,.footer,.wordmark,.seo-directory,.page-nav-internal{background-color:var(--cream,#F4F1E9)!important}
.nav-links>li>a,.nav-dropdown-menu a,.nav-phone,.footer-col a,.footer-brand p,
.page-nav-internal a{color:var(--ink-70,rgba(14,13,11,.72))!important}
.nav-links>li>a:hover,.nav-dropdown-menu a:hover,.footer-col a:hover,.page-nav-internal a:hover{color:var(--ink,#0E0D0B)!important}
.nav .nav-cta{color:var(--ink,#0E0D0B)!important}
.footer-col h3,.footer-communities h3,.seo-directory h3{color:var(--bronze-d,#7A6230)!important}

input,select,textarea,.form-input,.form-select,.form-textarea{color:var(--ink,#0E0D0B)!important;background:#fff!important}
input::placeholder,textarea::placeholder{color:var(--ink-50,rgba(14,13,11,.55))!important}

/* ═══ DARK SURFACES ═══ */
:is(.hero,.hero-l,.hero-text,.hero-content,.page-hero,.community-hero,.service-hero,.g-hero,.guide-hero,.article-hero,
.trust-strip,.compare-table thead,.final-cta,.cta-block,.lp-final-cta,.cta,.appr,.marq,.mmenu,
.approvals,.calc-wrap,.recent-list,.lp-hero,.areas-hero,
section.hero,section.final-cta,section.approvals,section.trust-strip,
.ai-answer-quick,.mx-gal-item figcaption){
color:var(--cream,#F4F1E9)!important}

.hero :where(h1,h2,h3,h4,h5,h6,.section-title),
.hero-l :where(h1,h2,h3,h4,h5,h6),
.hero-text :where(h1,h2,h3,h4,h5,h6),
.trust-strip :where(h1,h2,h3,h4,h5,h6),
.page-hero :where(h1,h2,h3,h4,h5,h6),
.areas-hero :where(h1,h2,h3,h4,h5,h6),
.cta :where(h1,h2,h3,h4,h5,h6,.section-title),
.appr :where(h1,h2,h3,h4,h5,h6,.section-title),
.final-cta :where(h1,h2,h3,h4,h5,h6,.section-title),
.cta-block :where(h1,h2,h3,h4,h5,h6,.section-title),
.lp-final-cta :where(h1,h2,h3,h4,h5,h6,.section-title),
.approvals :where(h1,h2,h3,h4,h5,h6,.section-title),
.calc-wrap :where(h1,h2,h3,h4,h5,h6,.section-title),
.recent-list :where(h1,h2,h3,h4,h5,h6,h4),
.ai-answer-quick :where(h3){
color:var(--cream,#F4F1E9)!important}

.hero :where(p,li,span,small,.hero-sub,.hero-trust,.hero-trust span,.breadcrumb,.breadcrumb a,.breadcrumb span,.hero-rating),
.hero-l :where(p,li,span,small),
.hero-text :where(p,li,span,small,.hero-sub),
.trust-strip :where(p,span,.trust-item,.trust-item .label,.trust-item .label),
.cta :where(p,li,span,small,.micro),
.appr :where(p,li,span,small,.step p),
.final-cta :where(p,li,span,small,.final-phone),
.cta-block :where(p,li,span,small),
.lp-final-cta :where(p,li,span,small),
.approvals :where(p,li,span,small,.section-sub,.auth-item p),
.calc-wrap :where(p,li,span,small,label,.calc-sub),
.recent-list :where(p,li,span,small,li),
.marq :where(span,i),
.mmenu :where(a,li,span,p),
.page-hero :where(p,li,span,small),
.areas-hero :where(p,li,span,small,.hero-pill),
.ai-answer-quick :where(p,.ai-answer-facts){
color:rgba(244,241,233,.88)!important}

/* Accent on DARK — bright bronze, not bronze-d */
.hero :where(.eyebrow,.hero-kicker,.hero h1 em,.hero h1 span,.hero h2 em,.hero-l .eyebrow),
.trust-strip :where(.trust-item .number),
.cta :where(.eyebrow,h2 em),
.appr :where(.eyebrow,h2 em,.step .no),
.final-cta :where(h2 span,h2 em,.section-kicker),
.cta-block :where(h2 em,.section-kicker),
.approvals :where(.section-kicker,.auth-item h4,h4),
.areas-hero :where(h1 em,.hero-pill strong),
.marq-track,.marq-track span,.marq-track i,
.ai-answer-quick :where(h3){
color:var(--bronze,#B8924B)!important}

.appr :where(.step h3){color:var(--cream,#F4F1E9)!important}
.appr :where(.step .mic){color:var(--bronze,#B8924B)!important}
.compare-table thead th{color:var(--cream,#F4F1E9)!important}
.recent-list .approval-status{color:#4ade80!important}
.calc-field input,.calc-field select,.calc-wrap input,.calc-wrap select{color:var(--ink,#0E0D0B)!important;background:#fff!important}

.hero :where(.btn-secondary,.btn-ghost),
.cta :where(.btn-secondary,.btn-ghost),
.final-cta :where(.btn-secondary,.btn-ghost),
.cta-block :where(.btn-secondary,.btn-ghost),
.appr :where(.btn-secondary,.btn-ghost),
.approvals :where(.btn-secondary,.btn-ghost),
.calc-wrap :where(.btn-secondary,.btn-ghost),
.lp-hero :where(.btn-secondary,.btn-ghost),
.page-hero :where(.btn-secondary,.btn-ghost){
color:var(--cream,#F4F1E9)!important;border-color:rgba(244,241,233,.55)!important;background:transparent!important}
.hero :where(.btn-secondary:hover,.btn-ghost:hover),
.cta :where(.btn-secondary:hover,.btn-ghost:hover),
.final-cta :where(.btn-secondary:hover,.btn-ghost:hover){color:var(--bronze,#B8924B)!important}
.hero :where(.btn:not(.btn-secondary):not(.btn-ghost)),
.cta :where(.btn:not(.btn-secondary):not(.btn-ghost)){
background:var(--bronze,#B8924B)!important;color:var(--ink,#0E0D0B)!important}

/* Matrix chips on LIGHT mx-links section */
.mx-links .mx-chip-row a,.mx-links .mx-chip-auth a{
background:var(--cream2,#EBE6DB)!important;color:var(--ink,#0E0D0B)!important;
border:1px solid var(--ink-25,rgba(14,13,11,.25))!important}
.mx-links .mx-chip-row a:hover,.mx-links .mx-chip-auth a:hover{
color:var(--bronze-d,#95773A)!important;border-color:var(--bronze,#B8924B)!important}
.mx-links .mx-chip-auth a{border-style:dashed!important}

/* Dark-section chips only */
:is(.hero,.final-cta,.cta-block,.approvals,.calc-wrap) .mx-chip-row a{
background:#141414!important;color:#e8dcc8!important;border-color:#3a3228!important}
:is(.hero,.final-cta,.cta-block,.approvals,.calc-wrap) .mx-chip-row a:hover{
color:#fff!important;border-color:var(--bronze,#B8924B)!important}

/* Construction magazine pages */
.construction-mag .btn-gold,.construction-mag .cta-block .btn{color:var(--ink,#0E0D0B)!important}
.construction-mag .mx-links{background:var(--cream,#F4F1E9)!important}

/* v3m article / blog / cost pages — cream body, ink copy */
body.v3m:not(.portfolio-case){background:var(--cream,#F4F1E9)!important;color:var(--ink,#0E0D0B)!important}
body.v3m:not(.portfolio-case) main,body.v3m:not(.portfolio-case) .page-narrow{color:var(--ink,#0E0D0B)!important}
body.v3m:not(.portfolio-case) h1,body.v3m:not(.portfolio-case) h2,body.v3m:not(.portfolio-case) h3{color:var(--ink,#0E0D0B)!important}
body.v3m:not(.portfolio-case) .meta-stamp,body.v3m:not(.portfolio-case) nav[aria-label="Breadcrumb"] a{color:var(--ink-70,rgba(14,13,11,.72))!important}
body.v3m .ai-rescue,body.v3m .ai-summary,body.v3m .ai-quick-answers,
body.v3m section[style*="background:#fafaf8"],body.v3m section[style*="background:#fcfaf5"]{
background:var(--cream2,#EBE6DB)!important;color:var(--ink,#0E0D0B)!important}
body.v3m .ai-rescue-answer,body.v3m .ai-rescue-tldr,body.v3m .ai-rescue-tldr li,
body.v3m .ai-summary p,body.v3m .ai-quick-answers h2,
body.v3m details.ai-rescue-faq summary,body.v3m details.ai-rescue-faq>div{
color:var(--ink,#0E0D0B)!important}
body.v3m details.ai-rescue-faq>div,body.v3m details.ai-rescue-faq span[itemprop="text"]{
color:var(--ink-70,rgba(14,13,11,.72))!important}
body.v3m .ai-rescue-tldr strong,body.v3m .ai-summary span[style*="text-transform:uppercase"]{
color:var(--bronze-d,#95773A)!important}

/* Site header on inner pages */
.site-header{background:var(--cream,#F4F1E9)!important;border-bottom:1px solid var(--ink-10,rgba(14,13,11,.1))}
.site-header nav a,.site-header .logo{color:var(--ink-70,rgba(14,13,11,.72))!important}
.site-header nav a:hover,.site-header .cta{color:var(--ink,#0E0D0B)!important}
.site-header .cta{background:var(--bronze,#B8924B)!important;color:var(--ink,#0E0D0B)!important}

/* Portfolio case studies with magazine stack */
body.portfolio-case{background:var(--cream,#F4F1E9)!important;color:var(--ink,#0E0D0B)!important}

/* Inline color fixes on light AI/FAQ blocks */
body.v3m .ai-summary [style*="color:#2a2a2a"],body.v3m .ai-summary [style*="color:#3a3a3a"],
body.v3m .ai-summary [style*="color:#5a5a5a"],body.v3m .ai-quick-answers [style*="color:#1a1a1a"],
body.v3m .ai-quick-answers [style*="color:#5a5a5a"],body.portfolio-case .ai-summary [style*="color:#"],
body.portfolio-case .ai-quick-answers [style*="color:#"]{
color:var(--ink,#0E0D0B)!important}
body.v3m .ai-quick-answers [style*="color:#5a5a5a"],body.v3m details.ai-rescue-faq>div[style*="color:#5a5a5a"]{
color:var(--ink-70,rgba(14,13,11,.72))!important}
body.v3m .ai-summary [style*="color:#B8924B"],body.v3m .ai-quick-answers [style*="color:#B8924B"],
body.v3m [style*="color:#7a6428"]{color:var(--bronze-d,#95773A)!important}

/* Never hide copy behind scroll animations */
.reveal,.fade-up,.fade-in,.fade-in-left,.fade-in-right{opacity:1!important;transform:none!important;visibility:visible!important}
/* ===== 2026-06-28 contrast fix: dark-on-dark invisible text ===== */
/* Steps section headings were forced to --ink on the dark .appr bg; the prior
   :where(.step h3) fix had 0 specificity and lost to line 17. These win. */
.appr .step h3{color:var(--cream,#F4F1E9)!important}
.appr .step .mic{color:var(--bronze,#B8924B)!important}
/* Hero/CTA ghost button text ("View selected work") was --ink on dark hero */
body.magazine-home .hero .btn-g,body.magazine-home .cta .btn-g{color:var(--cream,#F4F1E9)!important}
body.magazine-home .hero .btn-g:hover,body.magazine-home .cta .btn-g:hover{color:var(--bronze,#B8924B)!important}
/* Before/After slider labels sit on a dark image overlay */
.ba-lbl,.ba-lbl-a,.ba-lbl-b{color:var(--cream,#F4F1E9)!important}

/* ===== 2026-06-28 readability pass #2: hero align / justified copy / gold AA ===== */
/* (A) Homepage hero: left-align CTA buttons + trust row under the heading */
body.magazine-home .hero .hero-l .hero-ctas,
body.magazine-home .hero .hero-l .hero-trust{justify-content:flex-start!important;margin-left:0!important;margin-right:0!important;text-align:left!important}

/* (B) Justified (Word-style flush) body copy + subheadings. Selectors mirror the
   bridge's centering rules so these win by source order; hyphens reduce gaps. */
main section p,body.v3m main p,body.v3m section p,
.article-body p,.guide-body p,.community-body p,.g-body p,.body p{text-align:justify!important;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto}
section:not(.footer):not(.seo-directory) h3,
section:not(.footer):not(.seo-directory) h4{text-align:justify!important;text-justify:inter-word}
/* keep short hero copy + CTA lines centered (justify stretches 2-line text badly) */
.hero-text p,.hero-sub,.ch-sub,.hero-content p,.community-hero-content p,.service-hero-content p,.guide-hero-content p,.cta p,.final-cta p{text-align:center!important}

/* (C) Invisible hero stat label (dark-on-dark over hero image) */
.community-hero-content .ch-stat-label,.ch-stats .ch-stat-label{color:rgba(244,241,233,.82)!important}

/* (D) Gold accent text on LIGHT backgrounds -> darker, WCAG-AA gold (decorative
   gold stars + large display gold left bright; bright gold kept on dark sections) */
:root{--gold-aa:#735A1E}
.svc-link,.roi-number,.pt-week,.pt-label,.duration,.num,.arch-brand-sub,.roi-label,.fact-num{color:var(--gold-aa,#735A1E)!important}

/* ===== 2026-06-28 readability pass #3: remaining dark-on-dark ===== */
/* corrective: before/after labels readable on EITHER side of the slider image */
.ba-lbl,.ba-lbl-a,.ba-lbl-b{color:#fff!important;text-shadow:0 1px 6px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.7)!important}
/* dark CTA band (v3m-cta) headings/copy */
/* audience cards: 'Explore →' arrow link was --ink on dark card */
.aud-card em{color:var(--bronze,#B8924B)!important}
/* hero headings sit over a dark image overlay on every template -> always light
   (the gold <span> accents inside keep their own colour) */
.hero-text h1,.community-hero-content h1,.service-hero-content h1,.guide-hero-content h1,.page-hero-content h1,.article-hero-content h1{color:var(--cream,#F4F1E9)!important}
/* audience cards are dark — title was dark-on-dark */
.aud-card b,.aud-card strong{color:var(--cream,#F4F1E9)!important}

/* ===== 2026-06-28 readability pass #4: AA gold + hero legibility ===== */
/* Darker, WCAG-AA gold for all variable-based gold text on light backgrounds.
   (gold buttons get darker bg too -> white-on-gold contrast improves) */
:root{--bronze:#8C6D24;--gold:#8C6D24}
/* keep LARGE hero display-gold bright (sits on dark overlay = already high contrast) */
.hero h1 span,.hero h1 em,.hero-text h1 span,.hero-text h1 em,.community-hero-content h1 span,.community-hero-content h1 em,.service-hero-content h1 span,.service-hero-content h1 em{color:#B8924B!important}
/* hero copy legible over bright parts of background images */
.hero-text h1,.hero-text .hero-sub,.hero-text .hero-kicker,.community-hero-content h1,.community-hero-content .ch-sub,.community-hero-content .ch-badge,.service-hero-content h1,.guide-hero-content h1,.page-hero-content h1,.article-hero-content h1{text-shadow:0 2px 14px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.55)}
/* AA gold for INLINE gold text (style="color:#B8924B") used across ~2780 pages.
   Targets the color property only (not gold backgrounds); ~4.0:1 even on dark. */
[style*="color:#B8924B" i],[style*="color: #B8924B" i]{color:#8C6D24!important}
/* arch template: .approvals (and .trust-strip) are dark bands — headings were dark-on-dark */
.approvals h2,.approvals h3,.approvals .section-title,.trust-strip h2,.trust-strip h3{color:var(--cream,#F4F1E9)!important}

/* ===== 2026-06-28 readability pass #5: defeat the over-broad v3m dark-heading rule =====
   magazine-contrast.css:196 forces ALL h1/h2/h3 -> --ink on body.v3m (spec 0,2,2),
   which overrode dark-section headings. These body.v3m-scoped rules (>=0,3,1) win. */
body.v3m .hero-text h1,body.v3m .community-hero-content h1,body.v3m .service-hero-content h1,body.v3m .guide-hero-content h1,body.v3m .page-hero-content h1,body.v3m .article-hero-content h1,body.v3m header.hero h1,
body.v3m .approvals h2,body.v3m .approvals h3,body.v3m .approvals .section-title,
body.v3m .trust-strip h2,body.v3m .trust-strip h3{color:var(--cream,#F4F1E9)!important}