/* ==========================================================================
   Palette preview  —  green #192F1F / gold #E1BC7C
   --------------------------------------------------------------------------
   COLOUR ONLY. Every rule below re-states a selector that already exists in
   the site's stylesheets and changes nothing but its colour, so structure,
   spacing and type are untouched. Delete this one <link> to revert.

   Contrast note: the supplied gold is 1.80:1 on white, so it is never used
   as text on a light ground, and gold fills carry dark-green text rather
   than white (white on gold is also 1.80:1).
   ========================================================================== */

body { color: #192F1F !important; }
p { color: #192F1F !important; }
a#back-top.show { background-color: #24422C !important; }
header ul.btn-ul li.me-btn a.btn { background: #192F1F !important; }
.btn.btn-yellow { background-color: #192F1F !important; }
.btn.btn-yellow { background: linear-gradient(133deg, #192F1F 27%, #192F1F 45%, #192F1F 59%, #192F1F 83%) !important; }
.btn-black { background: linear-gradient(133deg, #192F1F 27%, #192F1F 45%, #192F1F 59%, #192F1F 83%) !important; }
.btn-home { background-color: #192F1F !important; }
footer h4 { border-bottom: 1px solid #C9A05C !important; }
footer .form-group i { color: #E1BC7C !important; }
.copy span { color: #192F1F !important; }
footer ul.social li:hover a { background: #192F1F !important; }
footer ul li i { color: #E1BC7C !important; }
h2.heading+h3 { color: #192F1F !important; }
.our-banner .chat { border-color: #192F1F !important; }
.chat { color: #192F1F !important; }
.chat { border-color: #192F1F !important; }
.our-faqs h2 { color: #192F1F !important; }
#faq .card .card-header .btn-header-link { background: #192F1F !important; }
#faq .card .card-header .btn-header-link:after { background: #192F1F !important; }
h2.heading span { color: #192F1F !important; }
.best-selling h5+p:after { background: #192F1F !important; }
.specialized figure figcaption { border: 2px solid #C9A05C !important; }
.specialized figure figcaption:before { background: #192F1F !important; }
.specialized:before { background: #24422C !important; }
.specialized:after { border: 2px solid #E1BC7C !important; }
.our-idea h2 span { color: #192F1F !important; }
.our-idea ul li i { color: #192F1F !important; }
button#showMore { background: linear-gradient(133deg, #192F1F 27%, #192F1F 45%, #192F1F 59%, #192F1F 83%) !important; }
.new-pf div#filters button:before { background: #192F1F !important; }
.inner-banner .btn-transparent chat::before { background: #192F1F !important; }
.site-logos h3 { color: #192F1F !important; }
.text-book span { background: #192F1F !important; }
.info-book:hover .text-book span i { color: #192F1F !important; }
.info-book:hover figure::before { background: #192F1F !important; }
.info-market:hover { border-color: #E1BC7C !important; }
.info-market:hover .text-mark { background: #24422C !important; }
.info-rev:hover { background: #192F1F !important; }
.info-expert>span { background: #192F1F !important; }
.info-expert h4 { color: #192F1F !important; }
.info-expert:hover { background: #192F1F !important; }
.text-net h4 { color: #192F1F !important; }
.text-net h4+p { color: #192F1F !important; }
.info-global h4 { color: #192F1F !important; }
.info-global h4+p { color: #192F1F !important; }
.our-global .nav-tabs .nav-item .nav-link::before { background: #192F1F !important; }
.our-global .info-text h3 { color: #192F1F !important; }
.our-global .info-text h3+p { color: #192F1F !important; }
.info-text h2 { color: #192F1F !important; }
.info-text h2+p { color: #192F1F !important; }
.info-type p { color: #192F1F !important; }
.info-type h4 { color: #192F1F !important; }
.info-cover h4 { color: #192F1F !important; }
.info-cover h4+p { color: #192F1F !important; }
.info-content h4 { color: #192F1F !important; }
.info-content p { color: #192F1F !important; }
.our-content h5 { color: #192F1F !important; }
.our-author figure figcaption h4 { color: #192F1F !important; }
.our-author figure figcaption ul li span { color: #192F1F !important; }
.our-contact h3 a { color: #192F1F !important; }
.our-contact h3:before { background: #192F1F !important; }
.our-contact .form-control { color: #192F1F !important; }
.our-rate ul li { background: #192F1F !important; }
.our-rate ul li:nth-child(2) { background: #192F1F !important; }
.our-rate ul li:nth-child(3) { background: #192F1F !important; }
.pricing-tabing .bdr:after { border-bottom: 2px solid #E1BC7C !important; }
.pricing-tabing .nav-item .nav-link i { background: #192F1F !important; }
.pricing-tabing .nav-item .nav-link.active { background: #192F1F !important; }
.pricing-tabing .tab-content ul li i { color: #E1BC7C !important; }
.pricing-tabing .tab-content .btn { background: #192F1F !important; }
.pricing-tabing .tab-content .btn { border-color: #C9A05C !important; }
.new-pf div#filters button.is-checked { background: linear-gradient(133deg, #192F1F 27%, #192F1F 45%, #192F1F 59%, #192F1F 83%) !important; }
.mark-selling h4:before { background: #24422C !important; }
.home-menu header ul li a:after { background: #192F1F !important; }
::-webkit-scrollbar-thumb { background: #192F1F !important; }
::-webkit-scrollbar-thumb:hover { background: #192F1F !important; }
.skip-link { background: #0F1D13 !important; }
footer a:focus-visible,
.footer a:focus-visible,
header a:focus-visible,
.dark-bg a:focus-visible,
.dark-bg button:focus-visible { outline-color: #E1BC7C !important; }
select,
select.form-control,
select.sameStyle { color: #192F1F !important; }
a:hover { color: #192F1F !important; }
code { color: #192F1F !important; }
.form-control:focus { border-color: #C9A05C !important; }
.valid-feedback { color: #192F1F !important; }
.custom-select.is-valid,
.form-control.is-valid,
.was-validated .custom-select:valid,
.was-validated .form-control:valid { border-color: #C9A05C !important; }
.custom-select.is-valid:focus,
.form-control.is-valid:focus,
.was-validated .custom-select:valid:focus,
.was-validated .form-control:valid:focus { border-color: #C9A05C !important; }
.form-check-input.is-valid~.form-check-label,
.was-validated .form-check-input:valid~.form-check-label { color: #192F1F !important; }
.custom-control-input.is-valid~.custom-control-label,
.was-validated .custom-control-input:valid~.custom-control-label { color: #192F1F !important; }
.custom-file-input.is-valid~.custom-file-label,
.was-validated .custom-file-input:valid~.custom-file-label { border-color: #C9A05C !important; }
.btn-primary.disabled,
.btn-primary:disabled { background-color: #192F1F !important; }
.btn-primary.disabled,
.btn-primary:disabled { border-color: #C9A05C !important; }
.btn-success { background-color: #192F1F !important; }
.btn-success { border-color: #C9A05C !important; }
.btn-success:hover { background-color: #192F1F !important; }
.btn-success.disabled,
.btn-success:disabled { background-color: #192F1F !important; }
.btn-success.disabled,
.btn-success:disabled { border-color: #C9A05C !important; }
.btn-info { background-color: #192F1F !important; }
.btn-info { border-color: #C9A05C !important; }
.btn-info:hover { background-color: #192F1F !important; }
.btn-info.disabled,
.btn-info:disabled { background-color: #192F1F !important; }
.btn-info.disabled,
.btn-info:disabled { border-color: #C9A05C !important; }
.btn-warning { background-color: #24422C !important; }
.btn-warning { border-color: #E1BC7C !important; }
.btn-warning:hover { border-color: #E1BC7C !important; }
.btn-warning.disabled,
.btn-warning:disabled { background-color: #24422C !important; }
.btn-warning.disabled,
.btn-warning:disabled { border-color: #E1BC7C !important; }
.btn-warning:not(:disabled):not(.disabled).active,
.btn-warning:not(:disabled):not(.disabled):active,
.show>.btn-warning.dropdown-toggle { background-color: #24422C !important; }
.btn-outline-primary { color: #192F1F !important; }
.btn-outline-primary { border-color: #C9A05C !important; }
.btn-outline-primary:hover { background-color: #192F1F !important; }
.btn-outline-primary:hover { border-color: #C9A05C !important; }
.btn-outline-primary.disabled,
.btn-outline-primary:disabled { color: #192F1F !important; }
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show>.btn-outline-primary.dropdown-toggle { background-color: #192F1F !important; }
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show>.btn-outline-primary.dropdown-toggle { border-color: #C9A05C !important; }
.btn-outline-success { color: #192F1F !important; }
.btn-outline-success { border-color: #C9A05C !important; }
.btn-outline-success:hover { background-color: #192F1F !important; }
.btn-outline-success:hover { border-color: #C9A05C !important; }
.btn-outline-success.disabled,
.btn-outline-success:disabled { color: #192F1F !important; }
.btn-outline-success:not(:disabled):not(.disabled).active,
.btn-outline-success:not(:disabled):not(.disabled):active,
.show>.btn-outline-success.dropdown-toggle { background-color: #192F1F !important; }
.btn-outline-success:not(:disabled):not(.disabled).active,
.btn-outline-success:not(:disabled):not(.disabled):active,
.show>.btn-outline-success.dropdown-toggle { border-color: #C9A05C !important; }
.btn-outline-info { color: #192F1F !important; }
.btn-outline-info { border-color: #C9A05C !important; }
.btn-outline-info:hover { background-color: #192F1F !important; }
.btn-outline-info:hover { border-color: #C9A05C !important; }
.btn-outline-info.disabled,
.btn-outline-info:disabled { color: #192F1F !important; }
.btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.show>.btn-outline-info.dropdown-toggle { background-color: #192F1F !important; }
.btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.show>.btn-outline-info.dropdown-toggle { border-color: #C9A05C !important; }
.btn-outline-warning { color: #E1BC7C !important; }
.btn-outline-warning { border-color: #E1BC7C !important; }
.btn-outline-warning:hover { background-color: #24422C !important; }
.btn-outline-warning:hover { border-color: #E1BC7C !important; }
.btn-outline-warning.disabled,
.btn-outline-warning:disabled { color: #E1BC7C !important; }
.btn-outline-warning:not(:disabled):not(.disabled).active,
.btn-outline-warning:not(:disabled):not(.disabled):active,
.show>.btn-outline-warning.dropdown-toggle { background-color: #24422C !important; }
.btn-outline-warning:not(:disabled):not(.disabled).active,
.btn-outline-warning:not(:disabled):not(.disabled):active,
.show>.btn-outline-warning.dropdown-toggle { border-color: #E1BC7C !important; }
.btn-link { color: #192F1F !important; }
.btn-link:hover { color: #192F1F !important; }
.dropdown-item.active,
.dropdown-item:active { background-color: #192F1F !important; }
.custom-control-input:checked~.custom-control-label::before { background-color: #192F1F !important; }
.custom-checkbox .custom-control-input:checked~.custom-control-label::before { background-color: #192F1F !important; }
.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before { background-color: #192F1F !important; }
.custom-radio .custom-control-input:checked~.custom-control-label::before { background-color: #192F1F !important; }
.custom-select:focus { border-color: #C9A05C !important; }
.custom-file-input:focus~.custom-file-control { border-color: #C9A05C !important; }
.custom-file-input:focus~.custom-file-control::before { border-color: #C9A05C !important; }
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link { background-color: #192F1F !important; }
.page-link { color: #192F1F !important; }
.page-link:hover { color: #192F1F !important; }
.page-item.active .page-link { background-color: #192F1F !important; }
.page-item.active .page-link { border-color: #C9A05C !important; }
.badge-primary { background-color: #192F1F !important; }
.badge-success { background-color: #192F1F !important; }
.badge-info { background-color: #192F1F !important; }
.badge-warning { background-color: #24422C !important; }
.badge-warning[href]:focus,
.badge-warning[href]:hover { background-color: #24422C !important; }
.progress-bar { background-color: #192F1F !important; }
.list-group-item.active { background-color: #192F1F !important; }
.list-group-item.active { border-color: #C9A05C !important; }
.bg-primary { background-color: #192F1F !important; }
.bg-success { background-color: #192F1F !important; }
.bg-info { background-color: #192F1F !important; }
.bg-warning { background-color: #24422C !important; }
a.bg-warning:focus,
a.bg-warning:hover,
button.bg-warning:focus,
button.bg-warning:hover { background-color: #24422C !important; }
.border-primary { border-color: #C9A05C !important; }
.border-success { border-color: #C9A05C !important; }
.border-info { border-color: #C9A05C !important; }
.border-warning { border-color: #E1BC7C !important; }
.text-primary { color: #192F1F !important; }
.text-success { color: #192F1F !important; }
.text-info { color: #192F1F !important; }
.text-warning { color: #E1BC7C !important; }
a.text-warning:focus,
a.text-warning:hover { color: #E1BC7C !important; }
.entry-box { background-color: #192F1F !important; }
.layer-1 { background-color: #192F1F !important; }
.layer-2 { background: #192F1F !important; }
.layer-3 { background: #192F1F !important; }
.onge_ban { color: #192F1F !important; }
.foo_box { border-right: 1px dotted #192F1F !important; }
.foo_box a h3 i { color: #192F1F !important; }
footer ul.social li a i { color: #E1BC7C !important; }
.ratings_cont p { color: #192F1F !important; }
.head-serv-bg h5 { color: #E1BC7C !important; }
.head-serv-bg h5 { border-left: 4px solid #E1BC7C !important; }
.btn-3 a,
        .btn-3 button { background: #192F1F !important; }
.banner-content span { color: #E1BC7C !important; }
.btn-4 a,
.btn-4 button { background: #192F1F !important; }
.feature_box h5 { border-bottom: 1px solid #C9A05C !important; }
.cta-bg { background: #192F1F !important; }
.btn-1 a,
        .btn-1 button { background: #0F1D13 !important; }
.btn-1 a,
        .btn-1 button { border: 2px solid #192F1F !important; }
.btn-2 a,
.btn-2 button { border: 2px solid #192F1F !important; }
.btn-2 a,
.btn-2 button { color: #192F1F !important; }
.cta-call a { color: #192F1F !important; }
.frequently-asked-questions .frequently-heading h3,
        .frequently-heading h5 { color: #192F1F !important; }
.frequently-asked-questions .frequently-heading p { color: #192F1F !important; }
.testimonial-sec { background: linear-gradient(#192F1F, rgb(65 79 116 / 58%)), url(assets/images/new_sec/testimonials-bg.webp) !important; }
.heading-sep .seperator-left { background: #0F1D13 !important; }
.testimonial-sec .testimonial-slider .owl-item i { color: #E1BC7C !important; }
.case_detail_banner { background-color: #0F1D13 !important; }
.btn-1 { background: linear-gradient(133deg, #192F1F 27%, #192F1F 45%, #192F1F 59%, #192F1F 83%) !important; }
a { color: #192F1F !important; }
.cus_area h3 { color: #192F1F !important; }
.cus_pro_text h4 { color: #192F1F !important; }
.case_ornge { color: #192F1F !important; }
.strugglesec ul li { color: #192F1F !important; }
.strugglesec ul li i { color: #192F1F !important; }
.about p a { color: #E1BC7C !important; }
.about_icon { background-color: #192F1F !important; }
.stellar-step span { color: #192F1F !important; }
.portfolio_sec .nav-tabs .nav-link.active { background: #24422C !important; }
.portfolio_sec .default_btn:nth-child(1)::before { background: #192F1F !important; }
.button { background: #24422C !important; }

@media only screen and (max-width:980px) and (min-width:320px) {
    .menu-bottom span { background: #24422C !important; }
}

@media only screen and (max-width : 480px) {
    .main-menu { background: linear-gradient(180deg, #192F1F 0, #2e5139 91%) !important; }
    .foo_box { border-right: 0px dotted #192F1F !important; }
}

/* ==========================================================================
   Readable text on every dark ground
   --------------------------------------------------------------------------
   Generated from DARK_SECTIONS, the same list that replaces the grounds, so
   a section cannot get a dark background without its text being handled.
   Gold accents are declared after this and still win.
   ========================================================================== */
.our-banner.our-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .gh-banner.gh-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .book-banner.book-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .about-banner.about-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .contact-banner.contact-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .author-banner.author-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .editing-banner.editing-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .genre-banner.genre-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .mark-banner.mark-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .pricing-banner.pricing-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .pub-banner.pub-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .inner-banner.inner-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .blog-banner.blog-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .banner-sec.banner-sec :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .case_detail_banner.case_detail_banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), section.main-banner-bg.main-banner-bg :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .about.about :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .sec_pt.sec_pt :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), section.author-about.author-about :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .cacascasc.cacascasc :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .our-network.our-network :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .our-editor.our-editor :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .about-expert.about-expert :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .specialized.specialized :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .myeditinh.myeditinh :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .our-testimonial.our-testimonial :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .testimonial-sec.testimonial-sec :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .new-pf.new-pf :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .our-shelf.our-shelf :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .book-cta.book-cta :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .rhyme-cta.rhyme-cta :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .pricing-tabing.pricing-tabing :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .cta-head.cta-head :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .cta-bg.cta-bg :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .feature_sec.feature_sec :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .feature_box.feature_box :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), html body footer :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label) {
    color: #FFFFFF !important;
}


/* ==========================================================================
   Hover on a dark ground
   --------------------------------------------------------------------------
   Generated from the same DARK_SECTIONS list, for the same reason: a link
   cannot sit on a dark background without its hover state being handled.
   ========================================================================== */
.our-banner.our-banner a:hover, .gh-banner.gh-banner a:hover, .book-banner.book-banner a:hover, .about-banner.about-banner a:hover, .contact-banner.contact-banner a:hover, .author-banner.author-banner a:hover, .editing-banner.editing-banner a:hover, .genre-banner.genre-banner a:hover, .mark-banner.mark-banner a:hover, .pricing-banner.pricing-banner a:hover, .pub-banner.pub-banner a:hover, .inner-banner.inner-banner a:hover, .blog-banner.blog-banner a:hover, .banner-sec.banner-sec a:hover, .case_detail_banner.case_detail_banner a:hover, section.main-banner-bg.main-banner-bg a:hover, .about.about a:hover, .sec_pt.sec_pt a:hover, section.author-about.author-about a:hover, .cacascasc.cacascasc a:hover, .our-network.our-network a:hover, .our-editor.our-editor a:hover, .about-expert.about-expert a:hover, .specialized.specialized a:hover, .myeditinh.myeditinh a:hover, .our-testimonial.our-testimonial a:hover, .testimonial-sec.testimonial-sec a:hover, .new-pf.new-pf a:hover, .our-shelf.our-shelf a:hover, .book-cta.book-cta a:hover, .rhyme-cta.rhyme-cta a:hover, .pricing-tabing.pricing-tabing a:hover, .cta-head.cta-head a:hover, .cta-bg.cta-bg a:hover, .feature_sec.feature_sec a:hover, .feature_box.feature_box a:hover, html body footer a:hover,
html body footer a:hover,
html body footer li a:hover,
html body footer a:hover *,
html body .copy a:hover,
html body .copy a:hover *,
html body .skip-link:hover,
html body a.skip-link:focus {
    color: #FFFFFF !important;
}

/* .copy is the copyright strip and sits OUTSIDE <footer>, so the footer
   selector above never reached it. Its text is also wrapped in a <span>,
   hence the descendant. */

/* The copyright line wraps its text in a <span>, so colouring only the <a>
   left the painted text on its old value. Hence the descendant above. */

/* A gold ground needs the opposite treatment: white on #E1BC7C is 1.80:1,
   so a link that already sits on the gold -- the active portfolio filter, the
   Call button -- takes the dark green on hover instead. */
html body a.default_btn.default_btn:hover,
html body a.nav-item.active.active:hover,
html body .nav-tabs .nav-link.active.active:hover,
html body a.btn-yellow.btn-yellow:hover,
html body .btn.btn-yellow.btn-yellow:hover,
html body a.default_btn.default_btn:hover *,
html body a.nav-item.active.active:hover * {
    color: #192F1F !important;
}

/* Doubled class on purpose. A gold button can sit INSIDE a dark section, and
   the dark-ground hover rule above is (0,2,2); a single class here is (0,1,3)
   and loses, which turned the Call button white-on-gold at 1.80:1. The ground
   the link actually sits on has to win over the ground of its section. */


/* ==========================================================================
   Accents, restated
   --------------------------------------------------------------------------
   The readable-text rule above is deliberately high-specificity, which also
   beat the gold accents (the hero's rotating word turned white). These are
   the same selectors, boosted to match, so the accents come back.
   ========================================================================== */
footer .form-group.form-group.form-group i, html body footer ul li i, .pricing-tabing.pricing-tabing.pricing-tabing .tab-content ul li i, .btn-outline-warning.btn-outline-warning.btn-outline-warning, .btn-outline-warning.btn-outline-warning.btn-outline-warning.disabled,
.btn-outline-warning:disabled, .text-warning.text-warning.text-warning, a.text-warning.text-warning.text-warning:focus,
a.text-warning:hover, footer ul.social.social.social li a i, .head-serv-bg.head-serv-bg.head-serv-bg h5, .banner-content.banner-content.banner-content span, .testimonial-sec.testimonial-sec.testimonial-sec .testimonial-slider .owl-item i, .about.about.about p a {
    color: #E1BC7C !important;
}



/* ==========================================================================
   Gold
   --------------------------------------------------------------------------
   The generated rules above turn the old teal into green. Gold is introduced
   deliberately and sparingly, and only where it clears contrast:

     white on gold ......... 1.80:1  FAIL  -> gold fills take dark-green text
     gold  on white ........ 1.80:1  FAIL  -> never gold text on a light ground
     gold  on green ........ 7.96:1  PASS  -> gold text is fine on the green
     green on gold ......... 7.96:1  PASS  -> the CTA pairing
   ========================================================================== */

/* Primary calls to action: gold fill, dark green label. */
.btn-home,
.btn-black,
.btn.btn-yellow,
.btn-3 a, .btn-3 button,
.btn-1 a, .btn-1 button,
input[type="submit"],
button#showMore,
.default_btn.orange_btn,
header ul.btn-ul li.me-btn a.btn,
header .top-head ul li a.btn,
header .top-head ul li button.btn {
    background: #E1BC7C !important;
    background-color: #E1BC7C !important;
    background-image: none !important;
    color: #192F1F !important;
    border-color: #C9A05C !important;
}

.btn-home:hover,
.btn-black:hover,
.btn.btn-yellow:hover,
.btn-3 a:hover, .btn-3 button:hover,
input[type="submit"]:hover,
button#showMore:hover,
header .top-head ul li a.btn:hover,
header .top-head ul li button.btn:hover {
    background: #C9A05C !important;
    background-color: #C9A05C !important;
    color: #192F1F !important;
}

/* Secondary / outline buttons.
   DEFAULT is dark green, because these controls appear on white sections too
   and gold on white is 1.80:1 -- effectively invisible. Gold is switched on
   only inside the known dark grounds, further down. */
.btn-transparent,
.chat, .chat2,
.btn-4 a, .btn-4 button,
.btn-2 a, .btn-2 button {
    background: transparent !important;
    color: #192F1F !important;
    border-color: #192F1F !important;
}

.btn-transparent:hover,
.chat:hover, .chat2:hover,
.btn-4 a:hover, .btn-4 button:hover {
    background: rgba(25, 47, 31, .07) !important;
    color: #192F1F !important;
}

/* Inside dark sections the same controls flip to gold, where it reads 7.96:1. */
.our-banner .btn-transparent, .our-banner .chat,
.main-banner-bg .btn-transparent, .main-banner-bg .chat,
.inner-banner .btn-transparent, .inner-banner .chat,
.banner-sec .btn-transparent, .banner-sec .chat,
.our-banner .btn-4 button, .main-banner-bg .btn-4 button,
footer .btn-transparent, footer .chat,
.rhyme-cta .btn-transparent, .rhyme-cta .chat,
.book-cta .btn-transparent, .book-cta .chat,
.testimonial-sec .btn-transparent, .testimonial-sec .chat,
.cta-head .btn-transparent, .cta-head .chat,
.cta-bg .btn-transparent, .cta-bg .chat,
.pricing-tabing .btn-transparent, .pricing-tabing .chat,
.pricing-sec .btn-transparent, .pricing-sec .chat,
.case_detail_banner .btn-transparent, .case_detail_banner .chat,
.our-shelf .btn-transparent, .our-shelf .chat,
.new-pf .btn-transparent, .new-pf .chat,
.about .btn-transparent, .about .chat,
.sec_pt .btn-transparent, .sec_pt .chat,
.cacascasc .btn-transparent, .cacascasc .chat,
.our-network .btn-transparent, .our-network .chat,
.our-editor .btn-transparent, .our-editor .chat,
.about-expert .btn-transparent, .about-expert .chat,
.specialized .btn-transparent, .specialized .chat,
section.author-about .btn-transparent, section.author-about .chat {
    color: #E1BC7C !important;
    border-color: #E1BC7C !important;
}

.our-banner .chat:hover,
.main-banner-bg .chat:hover,
.inner-banner .chat:hover,
footer .chat:hover {
    background: rgba(225, 188, 124, .12) !important;
    color: #E1BC7C !important;
}

/* Accent glyphs. Same rule: green on light, gold on dark. */
.strugglesec ul li i,
.stellar-step span,
.about_icon i,
.rtech_item i {
    color: #192F1F !important;
}

.our-banner .fa,
.main-banner-bg .fa,
footer h6,
footer .fa,
footer ul.social li a:hover,
.rhyme-cta i,
.book-cta i,
.testimonial-sec i,
.heading-sep .seperator-left:before,
.heading-sep .seperator-right:before {
    color: #E1BC7C !important;
}

/* Dark sections keep white body text -- 14.31:1 on the green.
   These need !important too: the generated block above sets `p { color:
   green }`, which would otherwise render every paragraph on a dark ground
   invisible. */
.our-banner p, .our-banner li, .our-banner h1, .our-banner h2,
.our-banner h3, .our-banner h4, .our-banner h5,
.main-banner-bg p, .main-banner-bg li,
.main-banner-bg h1, .main-banner-bg h2, .main-banner-bg h3,
.inner-banner p, .inner-banner h1, .inner-banner h2, .inner-banner h4,
.banner-sec p, .banner-sec h1, .banner-sec h2,
.rhyme-cta p, .rhyme-cta h2, .rhyme-cta h3,
.book-cta p, .book-cta h2, .book-cta h3,
.testimonial-sec p, .testimonial-sec h2, .testimonial-sec h3,
.testimonial-sec h4, .testimonial-sec h5,
.our-testimonial p, .our-testimonial h2, .our-testimonial h4,
.about p, .about h2, .about h3,
.sec_pt p, .sec_pt h2, .sec_pt h3,
section.author-about p, section.author-about h2, section.author-about h3,
.cacascasc p, .cacascasc h2, .cacascasc h3,
.our-network p, .our-network h2, .our-network h3,
.our-editor p, .our-editor h2, .our-editor h3,
.specialized p, .specialized h2, .specialized h3,
.about-expert p, .about-expert h2, .about-expert h3,
.new-pf p, .new-pf h2, .new-pf h3,
.our-shelf p, .our-shelf h2, .our-shelf h3, .our-shelf h5,
.pricing-tabing p, .pricing-tabing h2, .pricing-tabing h3,
.popupform p, .popupform h2, .popupform h3,
footer p, footer li, footer a, footer h4, footer h5, footer span {
    color: #FFFFFF !important;
}

/* Case-detail banner (20 author pages): a dark plate whose heading, breadcrumb
   and role label were all dark too. This was already broken before the
   recolour -- #122826 on #1a1a1a measured 1.12:1 -- so it is fixed rather
   than merely translated. */
.case_detail_banner,
.case_detail_banner h1, .case_detail_banner h2, .case_detail_banner h3,
.case_detail_banner h4, .case_detail_banner p, .case_detail_banner li,
.case_detail_banner span, .case_detail_banner div {
    color: #FFFFFF !important;
}

.case_detail_banner a,
.case_detail_banner .breadcrumb a,
.case_detail_banner h2 {
    color: #E1BC7C !important;
}

/* Pricing: the plan tabs and the "Regular / Pro" toggles sat green on green. */
.pricing-tabing h2, .pricing-tabing h3, .pricing-tabing h4,
.pricing-tabing h5, .pricing-tabing h6, .pricing-tabing p,
.pricing-tabing li, .pricing-tabing td, .pricing-tabing span {
    color: #FFFFFF !important;
}

.pricing-tabing .nav-tabs .nav-link,
.pricing-sec .nav-tabs .nav-link,
.nav-tabs .nav-link {
    color: #FFFFFF !important;
    border-color: rgba(225, 188, 124, .3) !important;
}

.pricing-tabing .nav-tabs .nav-link.active,
.nav-tabs .nav-link.active {
    color: #192F1F !important;
    background-color: #E1BC7C !important;
    border-color: #C9A05C !important;
}

/* Portfolio filter tabs: the active pill inherited a lifted-green ground and
   dark-green label, i.e. green on green. */
.portfolio_sec .portfolio_sec .nav-tabs .nav-link.active,
.portfolio_sec .nav-tabs .nav-link.active,
#filters .default_btn.active,
#filters button.active {
    background-color: #E1BC7C !important;
    background: #E1BC7C !important;
    color: #192F1F !important;
    border-color: #C9A05C !important;
}

.portfolio_sec .portfolio_sec .nav-tabs .nav-link,
#filters .default_btn,
#filters button {
    color: #FFFFFF !important;
}

/* Bootstrap's contextual classes live in style.css -- the 400KB vendor file
   this generator deliberately does not scan, since re-emitting all of
   Bootstrap would balloon the override. The handful the site actually uses
   are pinned here instead. Danger stays red: an error should not be brand
   coloured. */
.btn-info, .btn-primary, .btn-success, .btn-secondary,
.bg-info, .bg-primary, .bg-success, .bg-secondary,
.badge-info, .badge-primary, .badge-success {
    background-color: #E1BC7C !important;
    background: #E1BC7C !important;
    border-color: #C9A05C !important;
    color: #192F1F !important;
}

.btn-info:hover, .btn-primary:hover, .btn-success:hover,
.btn-secondary:hover {
    background-color: #C9A05C !important;
    background: #C9A05C !important;
    color: #192F1F !important;
}

/* Doubled classes: this button also carries .trans-btn, whose own !important
   white beats a single-class selector. */
.btn-info.btn-info span, .btn-primary.btn-primary span,
.btn-success.btn-success span, .btn-secondary.btn-secondary span,
.btn-info.btn-info i, .btn-primary.btn-primary i,
.trans-btn.trans-btn span {
    color: #192F1F !important;
}

.text-info, .text-primary, .text-success {
    color: #192F1F !important;
}

/* FAQ accordion toggles are <a class="btn">, so the generated pass gave them
   a green fill AND green text -- invisible. Gold on the green fill reads at
   7.96:1 and makes the toggle look deliberate. */
.accordion .card-header .btn,
.accordion .card-header a.btn,
.card-header .btn,
.frequently-asked-questions .card-header .btn {
    color: #E1BC7C !important;
    background-color: #192F1F !important;
    background: #192F1F !important;
    border-color: #C9A05C !important;
}

.accordion .card-header .btn:hover,
.card-header .btn:hover {
    color: #FFFFFF !important;
}

/* .default_btn on a black CTA plate had green text on black. */
.cta-btns .default_btn,
.cta-hdg .default_btn,
a.default_btn {
    color: #192F1F !important;
    background-color: #E1BC7C !important;
    background: #E1BC7C !important;
    border-color: #C9A05C !important;
}

/* Skip link. The generated pass emits `a { color: ... !important }`, and an
   !important declaration beats .skip-link's plain white regardless of
   specificity -- so the link went green on its own green plate. */
.skip-link,
.skip-link:focus,
.skip-link:hover {
    background: #0F1D13 !important;
    color: #FFFFFF !important;
}

/* Page-title lockups that sit on a light plate keep the dark green. */
.pay-title span, .sameStyle + span, .payment-head span {
    color: #192F1F !important;
}

/* Trustpilot strip: label text was dark grey, now on the dark green. */
.trustpilot-widget, .trustpilot-widget *,
[class*="trustpilot"], [class*="trustpilot"] * {
    color: #FFFFFF !important;
}

/* Stragglers found by sweeping the rendered page for contrast under 3:1 --
   text that stayed dark on a section this preview turned dark. */
.cta-head h4, .cta-head p, .cta-head h2, .cta-head h3,
.box p, .box h4, .box h5, .box h6, .box span,
.rhyme-cta .container h3,
.book-cta .container h3,
.cta-bg .container h3,
.copy, .copy span, .copy a, .copy p,
footer .form-group label,
footer label,
.popupform label {
    color: #FFFFFF !important;
}

/* Testimonial cards need a surface of their own or the quotes float. */
.box {
    background-color: #24422C !important;
    border-color: rgba(225, 188, 124, .28) !important;
}

/* Hex tiles: the generated pass sent their near-black fills to the deepest
   green, which reads as holes punched in the page. Lift them to the panel. */
.hexagon-home .graphic .entries .hex-cell,
.hexagon-home .graphic .entries .hex-cell:not(.center),
.hex-cell,
.hex-cell-inner {
    background-color: #24422C !important;
    background: #24422C !important;
}

/* Hover. The original gave each cell its own accent (#34635d, #00bb7e,
   #fe7a6d, #258f7d, #bd1a1b ...) which the palette pass flattened to one
   green -- so hovering did nothing visible. One gold highlight instead: it
   reads as a single system rather than six unrelated colours, and gold on
   green is the same pairing used for every other active state on the site.

   The inner shape has to change with the cell; it sits on top, so recolouring
   only the outer element leaves a dark hexagon in the middle. */
.hexagon-home .graphic .entries .hex-cell:not(.center):hover,
.hexagon-home .graphic .entries .hex-cell:not(.center):hover .hex-cell-inner,
.hexagon-home .graphic .entries .hex-cell:not(.center).active,
.hexagon-home .graphic .entries .hex-cell:not(.center).active .hex-cell-inner {
    background-color: #E1BC7C !important;
    background: #E1BC7C !important;
    transition: background-color .3s !important;
}

.hex-cell span {
    color: #FFFFFF !important;
}

.hexagon-home .graphic .entries .hex-cell:not(.center):hover span,
.hexagon-home .graphic .entries .hex-cell:not(.center).active span {
    color: #192F1F !important;
}

/* The empty centre tile is a spacer, not a control. */
.hexagon-home .graphic .entries .hex-cell.center {
    cursor: default;
    pointer-events: none;
}

/* ==========================================================================
   Section grounds
   --------------------------------------------------------------------------
   The dominant teal on this site is not in the CSS at all -- it is baked into
   37 background IMAGES (banner.webp, testimonials-bg.webp, footer-bg.webp and
   so on). A colour override cannot reach inside a JPEG, so the teal survives
   every recolour until these are swapped for the flat green.

   This is the one place the preview departs from "colour only": it removes
   photographic grounds. Nothing moves; the boxes keep their exact size.
   ========================================================================== */
.our-banner,
.gh-banner,
.book-banner,
.about-banner,
.contact-banner,
.author-banner,
.editing-banner,
.genre-banner,
.mark-banner,
.pricing-banner,
.pub-banner,
.inner-banner,
section.main-banner-bg[style],
.about,
.sec_pt,
section.author-about,
.cacascasc,
.our-network,
.our-editor,
.about-expert,
.myeditinh,
.editing-banner,
.genre-banner,
.blog-banner,
.specialized {
    background-image: none !important;
    background-color: #192F1F !important;
}

/* Alternating bands, so the page still has rhythm once the photos are gone. */
.our-testimonial,
.testimonial-sec,
.new-pf,
.our-shelf,
.book-cta,
.rhyme-cta,
.pricing-tabing {
    background-image: none !important;
    background-color: #24422C !important;
}

/* ==========================================================================
   The lead modal
   --------------------------------------------------------------------------
   popop-bg.webp is a single background-image holding the teal room, the
   triangles AND the book stack -- there is not one <img> tag inside the
   modal. Dropping the image would take the books with it, so instead a
   translucent green is layered over it: the teal reads as green, the covers
   still show through.

   The id is needed because the page's own rule uses the `background`
   shorthand with !important, which both wins on source order and resets
   background-color to transparent.

   A translucent green laid over it was not enough -- teal is stubborn, and a
   62% wash still read as teal. So the image moves to a ::before and gets the
   same duotone as the illustrations. The form sits above it, unfiltered, so
   the inputs and the gold button keep their own colours. */
#popupform.popupform {
    background-image: none !important;
    background-color: #192F1F !important;
    position: relative;
    overflow: hidden;
}

#popupform.popupform::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../images/new_sec/popop-bg.webp") no-repeat 100% 100% / cover;
    /* grayscale FIRST so the source hue stops mattering */
    filter: grayscale(.8) sepia(.5) hue-rotate(72deg) saturate(1.3) brightness(.78);
}

/* Scope the lift to the content wrapper only. `> *` also caught fancybox's
   injected close button and knocked it out of its absolute position. */
#popupform.popupform > .modal-body {
    position: relative;
    z-index: 1;
}

footer {
    background-image: none !important;
    background-color: #192F1F !important;
}

/* Decorative flourishes that were teal shapes read as noise on green. */
.mark-banner:after,
.pub-banner:after,
.genre-banner:after,
.pricing-banner:after,
.cta::before,
.rhyme-cta::after,
.specialized .container:before {
    opacity: .25;
}

/* ==========================================================================
   Illustrations
   --------------------------------------------------------------------------
   The artwork is flat teal cartoon drawn for the old palette. Grayscale FIRST,
   then sepia + hue-rotate, so the source hue stops mattering -- rotating hue
   on a still-saturated image sends teal through purple rather than green.
   ========================================================================== */
section img:not(.logo):not([src$=".svg"]):not([alt="ratings"]) {
    filter: grayscale(.8) sepia(.4) hue-rotate(68deg) saturate(1.15) brightness(.95);
}

/* Book covers, author portraits and case-study art are the PRODUCT, not
   decoration. Duotoning them turned the covers dark green against a dark
   green ground and they effectively vanished. They opt out. */
.case_detail_banner img,
.case_detail_data img,
.new-pf img,
.our-shelf img,
.element-item img,
.portfolio_sec img,
.owl-item img,
[src*="case_pics"],
[data-src*="case_pics"],
[src*="portfolio"],
[data-src*="portfolio"],
[src*="Book"],
[src*="user_img"],
.author-img img,
.auther_img img {
    filter: none !important;
}

/* The Trustpilot strip in the hero is a raster with its text baked in dark,
   drawn for a white page. On the green hero it was near-invisible -- and the
   duotone above was making it worse, since "exellent.webp" matches none of
   the [src*=] opt-outs below. It needs inverting, not exempting.

   invert() alone flips the brand green to magenta; the extra hue-rotate(180)
   brings the hue back, so the wordmark lifts to white while the stars keep
   Trustpilot's green. A flat brightness(0) invert(1) would also be legible
   but throws the brand colour away. */
.inner-banner img[src*="ellent"],
.main-banner-bg img[src*="ellent"],
img[src*="exellent"] {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* Press marks and review badges are already monochrome or brand-locked; the
   duotone only washes them out, so they opt out. */
.owl-site-logo img,
.site-logo img,
.brand-logos img,
.ratsite img,
.ratings_rate img,
footer ul.review img,
[src*="bbc"], [src*="nyt"], [src*="forbes"], [src*="nbc"],
[src*="bark"], [src*="clutch"], [src*="jabbar"], [src*="review-io"],
[src*="trust"], [src*="rating"] {
    filter: none !important;
}



/* ==========================================================================
   Footer
   --------------------------------------------------------------------------
   The chosen green as the ground, the chosen gold for type. Gold on this
   green measures 7.96:1, so it carries body text safely -- the pairing that
   fails is gold on WHITE (1.80:1), which is why gold is a dark-ground colour
   throughout this palette.

   Prefixed html body to match the specificity of the generated
   readable-text rule, which forces white inside every dark section and would
   otherwise win here. Declared after it, so gold takes precedence.
   ========================================================================== */
html body footer,
html body .copy {
    background-color: #192F1F !important;
    background-image: none !important;
}

html body footer :is(h1,h2,h3,h4,h5,h6,p,li,a,span,td,dd,dt,strong,em,small,label,i),
html body .copy :is(p,span,a,li) {
    color: #E1BC7C !important;
}

/* Headings sit a shade brighter so the columns still have a hierarchy. */
html body footer :is(h4,h5,h6) {
    color: #F6E4C4 !important;
}

/* Rules and dividers pick up the gold at low opacity rather than staying grey. */
html body footer :is(h4,h5,h6)::after,
html body footer .border-bottom,
html body footer hr {
    border-color: rgba(225, 188, 124, .35) !important;
    background-color: rgba(225, 188, 124, .35) !important;
}

/* Social marks: gold hairline discs. The glyph needs .social in the selector
   -- the site colours it via `footer ul.social li a i`, and a class beats any
   number of bare element names. */
html body footer ul.social li a,
html body footer ul.social li a i,
html body footer .social-icons a,
html body footer .social-icons a i,
html body footer .foo_box a i,
html body footer li a i {
    color: #E1BC7C !important;
    border-color: rgba(225, 188, 124, .45) !important;
    background-color: transparent !important;
}

/* Review badges.
   Two problems here beyond colour. The row lives in a .col-md-12 that is a
   direct child of <footer>, outside any .container, so it spanned the full
   window while every other footer column was inset -- bark ran off the left
   edge. And all three were forced to width:168px, which normalises the wrong
   axis: their aspect ratios run 3.3, 6.2 and 4.4, so equal widths produced
   heights of 51, 27 and 38px. Logos read as equal weight when their HEIGHT
   matches, not their width. */
html body footer ul.review {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    gap: 40px;
    flex-wrap: wrap;
}

/* The "Reviews" heading is a sibling of the list inside the same out-of-container
   wrapper, so containing only the list left the heading stranded at the window
   edge. Contain the wrapper and both children inset together.

   The max-widths below are not invented -- they are the site's own .container
   ladder from style.css, read back off the live page. Picking a round number
   here would leave this row a few pixels out of alignment with every other
   footer column at exactly one breakpoint, which is how the misalignment
   started. */
html body footer div:has(> ul.review) {
    width: 100%;
    margin: 0 auto !important;
    padding: 0 15px !important;
}

@media (min-width: 576px)  { html body footer div:has(> ul.review) { max-width: 540px;  } }
@media (min-width: 768px)  { html body footer div:has(> ul.review) { max-width: 720px;  } }
@media (min-width: 992px)  { html body footer div:has(> ul.review) { max-width: 960px;  } }
@media (min-width: 1200px) { html body footer div:has(> ul.review) { max-width: 1240px; } }

html body footer div:has(> ul.review) > ul.review {
    padding: 0 !important;
}

html body footer ul.review li {
    width: auto !important;
    margin: 0 !important;
    flex: 0 1 auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

html body footer ul.review li a img {
    width: auto !important;
    height: 30px !important;
    max-width: 100% !important;
    object-fit: contain;
    display: block !important;
    margin: 0 !important;
}

/* Dark artwork drawn for a light page; knocked out to white like the press
   logos further up. */
html body footer ul.review img,
html body footer .review img {
    filter: brightness(0) invert(1) opacity(.8) !important;
    transition: filter .3s;
}

/* The X mark is now an inline SVG, so it takes the gold from currentColor
   like the three icon-font glyphs beside it. */
html body footer ul.social li a svg.flogo {
    fill: currentColor;
    display: inline-block;
    vertical-align: middle;
}

html body footer ul.review img:hover {
    filter: brightness(0) invert(1) opacity(1) !important;
}

html body footer ul.social li a:hover,
html body footer .social-icons a:hover {
    color: #192F1F !important;
    background-color: #E1BC7C !important;
    border-color: #E1BC7C !important;
}

/* The glyph is coloured by `footer ul.social li a i`, which does not change
   on hover -- so the ring filled gold while the mark stayed gold and the
   icon vanished into it. The child has to be re-coloured explicitly, at
   enough weight to outrank that resting rule. */
html body footer ul.social.social.social li a:hover i,
html body footer ul.social.social.social li a:hover svg,
html body footer ul.social.social.social li a:hover i::before,
html body footer .social-icons.social-icons.social-icons a:hover i,
html body footer .social-icons.social-icons.social-icons a:hover svg {
    color: #192F1F !important;
    fill: #192F1F !important;
}

/* The class is tripled here for a specific reason. The accent-preservation
   pass further up restates gold text with a tripled class so it survives the
   dark-ground white rule, and that produces
   `footer ul.social.social.social li a i` at (0,3,5). A hover rule written
   the obvious way is `html body footer ul.social li a:hover i` -- (0,2,7) --
   which LOSES on class count despite having more elements and a pseudo-class.
   The glyph therefore stayed gold on a gold ring and vanished under the
   pointer. Matching the triple takes this to (0,4,6) and it wins.

   ::before is listed because Font Awesome paints the glyph in a pseudo-element
   that inherits colour; naming it explicitly means no inheritance surprise. */

/* The footer form keeps light fields -- gold on white would be 1.80:1. */
html body footer .form-control,
html body footer input:not([type="submit"]) {
    color: #192F1F !important;
    background-color: #FFFFFF !important;
}

html body footer input[type="submit"] {
    color: #192F1F !important;
    background-color: #E1BC7C !important;
}



/* ==========================================================================
   Contrast repairs on recoloured components
   --------------------------------------------------------------------------
   Recolouring a background is only half a change. Where a surface went dark
   but the text on it stayed dark -- or a section was given light text while
   the cards inside it stayed white -- the text disappeared entirely. These
   are the places where that happened.
   ========================================================================== */

/* The section is a dark ground, so its headings were set light. But these
   particular cards are WHITE, so their headings were white on white and the
   four cards read as empty boxes with an icon and nothing else. */
html body .about_box.about_box.about_box h3,
html body .about_box.about_box.about_box h4,
html body .about_box.about_box.about_box p {
    color: #192F1F !important;
}

/* .info-expert is a white card, but on about-us it sits inside .about-expert,
   which the dark-ground rules above paint with light text at (0,2,1). The
   stat cards there -- "15+ Years in the Industry" -- were white on white and
   read as four empty boxes. The card's own colour has to outrank the section
   it happens to sit in, hence the tripled class.

   Not every selector that declares a white background gets this treatment:
   whether that background survives the cascade varies per page, and forcing
   dark text onto a card that is really dark would just move the problem. */
html body .info-expert.info-expert.info-expert :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, small) {
    color: #192F1F !important;
}

/* The promo card in the blog sidebar was teal and is now the dark green, but
   its body copy was recoloured to that same green from the other direction,
   so the paragraph vanished into the card. Measured on book-blog rather than
   inferred: .entry-box is one of the few components that genuinely keeps the
   generated green as its effective ground. */
html body .entry-box :is(h1, h2, h3, h4, h5, h6, p, li, span, label, small) {
    color: #FFFFFF !important;
}

html body .entry-box .form-control,
html body .entry-box input:not([type="submit"]) {
    color: #192F1F !important;
    background-color: #FFFFFF !important;
}

/* The pricing tabs are white cards whose labels were also white -- only the
   active tab, which is gold, showed its label at all. Both states take dark
   text; both grounds are light. */
html body .pricing-tabing .nav-item .nav-link,
html body .pricing-tabing .nav-item .nav-link :is(span, strong, small),
html body .nav-tabs .nav-link.active,
html body .nav-tabs .nav-item.show .nav-link {
    color: #192F1F !important;
}

/* .info-expert:hover was teal and is now the dark green, but its h4 is also
   the dark green -- so the label vanished the moment the pointer touched the
   card. Flip the whole card's contents on hover, not just the ground. The
   selector is weighted to match the resting rule above, or the card would
   turn dark green while keeping dark green text. */
html body .info-expert.info-expert.info-expert:hover :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, small),
html body .info-expert:hover h4,
html body .info-expert:hover p {
    color: #FFFFFF !important;
}

html body .info-expert:hover > span {
    background-color: #E1BC7C !important;
}

html body .info-expert:hover > span i {
    color: #192F1F !important;
}

/* ==========================================================================
   Mobile menu toggle
   --------------------------------------------------------------------------
   Closed, the bars sit on the white header and the dark green reads fine.
   Open, the same bars rotate into an X on top of the drawer's own dark green
   gradient -- #24422C on #192F1F is about 1.3:1, so the close control was
   invisible exactly when it was needed. The button already publishes its
   state through aria-expanded, so the colour can follow it.
   ========================================================================== */
html body [aria-controls="primary-navigation"][aria-expanded="true"] span {
    background-color: #E1BC7C !important;
}

/* ==========================================================================
   Footer social icons
   --------------------------------------------------------------------------
   The rings already declared align-items and justify-content, but the anchor
   is display:inline-block, where both properties are inert -- so the glyph
   was centred horizontally only because text-align happened to apply, and sat
   about 5px high because the 27px line box simply started at the top of the
   44px ring. Making it a flex container is the whole fix; the two centring
   declarations were correct all along.
   ========================================================================== */
html body footer ul.social li a,
html body footer .social-icons a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

html body footer ul.social li a > * {
    display: block;
    line-height: 1 !important;
}


/* ==========================================================================
   CLIENT REVISION  —  2026-08-27  ("THe Authors tree content.docx")
   --------------------------------------------------------------------------
   The client marked up six sections asking for gold type, green grounds, gold
   process circles, gold service cards, and the two background photos put back.
   Everything here is scoped to the home page sections they annotated.

   Contrast, using the same measure as the rest of this file: gold #E1BC7C on
   green #192F1F is 7.96:1, so gold type is only ever introduced here on a
   green ground. Gold on white is 1.80:1 and is not used. Where a gold FILL is
   introduced (the process circles, the four about cards) the text on it is
   dark green #192F1F, never white.
   ========================================================================== */

/* --- Hero: the client's sub-line and closing line -------------------------- */
html body .banner-content p.banner-subline {
    color: #E1BC7C !important;
    font-weight: 600;
    letter-spacing: .04em;
    margin: 0 0 14px;
}

html body .banner-content p.banner-closer {
    color: #E1BC7C !important;
    font-weight: 600;
}

/* --- "Why Authors Choose The Authors Tree": the bracketed pledge ----------
   The client asked for this block in bold, set apart from the list above it.
   This section is a light ground, so it takes dark green type and a gold rule
   rather than gold text. */
html body .strugglesec .struggle-pledge {
    color: #192F1F !important;
    font-weight: 700;
    line-height: 1.8;
    margin: 24px 0 0;
    padding: 16px 0 16px 20px;
    border-left: 3px solid #C9A05C;
}

/* --- The four cards: white fill -> gold fill ------------------------------
   "Inner white color ko golden krna h and inner logo enhance krna h."
   The card text is already forced to dark green further up this file, which
   is what the gold fill needs. The icon plate keeps its dark green so the
   white glyph inside it still reads, and gains a ring so it lifts off the
   gold instead of sitting flat on it. */
html body .about .about_box {
    background: #E1BC7C !important;
    border-radius: 10px;
}

html body .about .about_box .about_icon {
    background-color: #192F1F !important;
    box-shadow: 0 0 0 4px rgba(25, 47, 31, .12);
    transform: scale(1.12);
}

/* --- "One Team For Every Stage Of Your Book": all copy gold ---------------
   The panel headings now carry full service names rather than one word, so
   the 50px display size is brought down to fit without wrapping to three
   lines. Scoped to the home page block, so the same component on the service
   pages keeps its original size. */
html body .hexagon-home .graphic .selected-wrap .selected .details h3 {
    font-size: 30px !important;
    line-height: 1.25 !important;
    margin-bottom: 10px;
}

html body .hexagon-home .graphic .selected-wrap .selected .details h3,
html body .hexagon-home .graphic .selected-wrap .selected .details p,
html body .hexagon-home .graphic .selected-wrap .selected .details li {
    color: #E1BC7C !important;
}

html body .hexagon-home .selected .details .svc-tagline {
    color: #C9A05C !important;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 12px !important;
    font-weight: 700;
    margin-bottom: 4px !important;
    padding-bottom: 0;
}

html body .hexagon-home .selected .details .svc-hook {
    font-weight: 600;
    font-style: italic;
}

html body .hexagon-home .selected .details .svc-listlead {
    font-weight: 700;
    margin-bottom: 0 !important;
    padding-bottom: 0;
}

html body .hexagon-home .selected .details .svc-closer {
    font-weight: 600;
    margin-left: 20px;
    padding-top: 12px;
    border-top: 1px solid rgba(225, 188, 124, .35);
}

/* --- The four process steps ----------------------------------------------
   "Circle color golden, inner logo golden, complete content golden, back-
   ground green." The step icons are dark line art drawn for a white circle;
   on a gold circle they are knocked out to white, which is 4.4:1 on this
   gold -- the glyphs are heavy line art, not body text. */
html body section.stellar-step {
    background-color: #192F1F !important;
}

html body .stellar-step h3,
html body .stellar-step .rtech_item h3,
html body .stellar-step .rtech_item p {
    color: #E1BC7C !important;
}

html body .stellar-step > .container > .row > .col-md-12 h3 span {
    color: #FFFFFF !important;
}

/* The supplied step icons carry their own gold disc and ring, so the plate
   underneath goes transparent -- a CSS circle behind them would show as a
   second ring. The artwork fills the 120px plate rather than sitting at the
   60px the old glyphs used.

   filter:none is required, not tidiness: the blanket duotone in the
   Illustrations block matches `section img` and would tint these green. */
html body .stellar-step .rtech_item span.rt_icon {
    background: none !important;
    box-shadow: none !important;
    padding: 9px;
    border: 1px solid rgba(225, 188, 124, .28);
    border-radius: 50%;
    transition: border-color .45s cubic-bezier(.22, .61, .36, 1),
                transform .45s cubic-bezier(.22, .61, .36, 1);
}

/* drop-shadow, not box-shadow: it follows the disc's alpha, so the shadow is
   round like the icon instead of a square behind it. It also replaces the
   blanket `section img` duotone, which would otherwise tint these green. */
html body .stellar-step .rtech_item span.rt_icon img {
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .45)) !important;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: filter .45s cubic-bezier(.22, .61, .36, 1);
}

html body .stellar-step .rtech_item:hover span.rt_icon {
    border-color: rgba(225, 188, 124, .75);
    transform: translateY(-6px);
}

html body .stellar-step .rtech_item:hover span.rt_icon img {
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5)) !important;
}

/* A little more air under the disc and above the label than the original
   glyphs needed -- the artwork is heavier, so it wants the room. */
html body .stellar-step .rtech_item span.rt_icon {
    margin-bottom: 26px !important;
}

html body .stellar-step .rtech_item h3 {
    letter-spacing: .04em;
    margin-bottom: 14px;
}

/* --- The writing-services banner: the client's closing line ---------------- */
html body .cta-bg .cta-head p.cta-closer {
    color: #E1BC7C !important;
    font-weight: 600;
}

/* --- "What Awaits You...": cream ground -> green, copy -> gold -------------
   Scoped with .own-book-awaits so the second .own-book-sec on this page (the
   affordable-ghostwriters block, which the client did not mark up) keeps its
   cream ground and dark type. */
html body .own-book-sec.own-book-awaits {
    background-color: #192F1F !important;
}

html body .own-book-sec.own-book-awaits h3,
html body .own-book-sec.own-book-awaits h4,
html body .own-book-sec.own-book-awaits p {
    color: #E1BC7C !important;
}

html body .own-book-sec.own-book-awaits h4 {
    font-size: 21px;
    font-weight: 600;
    margin: 10px 0 6px;
}

html body .own-book-sec.own-book-awaits p.own-book-lead,
html body .own-book-sec.own-book-awaits p.own-book-closer {
    font-weight: 600;
    font-style: italic;
}

/* --- "Your Idea Could Be the Book People Remember" ------------------------
   "Background image ap kha gay h" -- it was removed by the blanket rule
   further up this file, which strips background photos from dark sections.
   It is put back here for this one section, over a green wash dark enough
   that the gold type still measures above 7:1 against it. */
html body section.author-about {
    position: relative;
    overflow: hidden;
    background-image: none !important;
    background-color: #192F1F !important;
}

/* The photo sits on its own layer so it can be filtered without the filter
   also landing on the copy. service-bg.webp already carries a left-to-right
   gradient. It is left exactly as the artwork was drawn -- no hue shift, no
   recolour -- and only carries the layer so the copy above it is unaffected. */
html body section.author-about::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../images/new_sec/author-about-bg.webp) no-repeat right center;
    background-size: cover;
    background-attachment: fixed;
    z-index: 0;
}

/* Filling the whole section crops the artwork's own green off the left, so
   the wash is re-laid in CSS to keep the copy legible. It is the same
   #192F1F the artwork was retinted to, so the two meet without a seam. */
html body section.author-about::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        #192F1F 0%,
        #192F1F 46%,
        rgba(25, 47, 31, .92) 57%,
        rgba(25, 47, 31, .60) 70%,
        rgba(25, 47, 31, .22) 84%,
        rgba(25, 47, 31, 0) 94%);
    z-index: 1;
}

html body section.author-about > * {
    position: relative;
    z-index: 2;
}

/* The column is .col-md-8 (66%), which would have run the bullets out over
   the sitter. Held inside the solid part of the wash. */
@media (min-width: 992px) {
    html body section.author-about .container > .col-md-8 {
        max-width: 56%;
        flex: 0 0 56%;
    }
}

/* Below lg the column goes full width and would run straight over the sitter,
   so the wash closes up and the artwork drops back to a texture. */
@media (max-width: 991.98px) {
    html body section.author-about::before {
        background-attachment: scroll;   /* iOS does not honour fixed */
    }

    html body section.author-about::after {
        background: rgba(25, 47, 31, .95);
    }
}

html body section.author-about h4,
html body section.author-about h5,
html body section.author-about p,
html body section.author-about li,
html body section.author-about li strong {
    color: #E1BC7C !important;
}

html body section.author-about ul.list-arrow li:before {
    color: #C9A05C !important;
}

html body section.author-about h5.author-about-sub {
    font-size: 24px;
    font-weight: 600;
    margin-top: 26px;
}

html body section.author-about p.author-about-closer {
    font-weight: 600;
    font-style: italic;
}

/* --- Affordable ghostwriters: the tagline above the heading ---------------
   This block sits on the cream ground, so the tagline takes the darker gold,
   which measures 4.6:1 there rather than the 1.8:1 of the lighter gold. */
html body .own-book-sec .svc-tagline {
    color: #A97F3E !important;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 13px !important;
    font-weight: 700;
    margin-bottom: 6px !important;
}

html body .own-book-sec h4.own-book-sub {
    color: #192F1F !important;
    font-size: 24px;
    font-weight: 600;
    margin-top: 24px;
}

html body .own-book-sec p.own-book-lead {
    font-weight: 600;
    font-style: italic;
}

/* --- Closing call to action ----------------------------------------------- */
html body .book-cta h3 .book-cta-closer {
    display: block;
    margin-top: 14px;
    color: #E1BC7C !important;
    font-weight: 600;
}

/* The closing line of each process step, set apart from the body of the card. */
html body .stellar-step .rtech_item p.step-closer {
    font-weight: 600;
    font-style: italic;
}

/* The hexagon labels themselves, to match the gold sample the client sent for
   this section. Gold on the #24422C tile measures 6.6:1; the hover state is
   unchanged -- the tile fills gold and the label flips to dark green. */
html body .hexagon-home .graphic .entries .hex-cell span {
    color: #E1BC7C !important;
}

html body .hexagon-home .graphic .entries .hex-cell:not(.center):hover span,
html body .hexagon-home .graphic .entries .hex-cell:not(.center).active span {
    color: #192F1F !important;
}

/* --- "person ka original rakhna h green nai" ------------------------------
   The presenter beside the four cards is a full-colour render (brown skin,
   navy suit). It was only reading as green because of the blanket duotone in
   the Illustrations block above -- the artwork itself was never green. It
   opts out, the way the book covers and portraits already do. */
html body .about img.about_girl,
html body img[src*="about_girl"] {
    filter: none !important;
}

/* All four cards read as two lines. The fourth used to run to three and made
   its card taller than the row; the heading is reserved two lines' height so
   the four stay level even if a label is edited later. */
html body .about .about_box h3 {
    min-height: 2.4em;
    margin-bottom: 0;
}

/* --- "What Awaits You...": centre the intro, strengthen the heading -------
   The 70ch measure set in scale.css is right for reading, but it left this
   intro flush left with a third of the band empty beside it. Centring the box
   as well as the text is the same fix that file already applies wherever
   text-align:center meets the cap. Only the direct children centre -- the
   four sub-blocks below sit in .row > .col-lg-6 and stay left-aligned. */
html body .own-book-sec.own-book-awaits .wrapper-own-book-1 > h3,
html body .own-book-sec.own-book-awaits .wrapper-own-book-1 > p {
    text-align: center;
    margin-inline: auto;
}

/* The heading was rendering at 600 -- the only Cormorant weight that was
   being loaded -- so it sat at the same weight as the sub-headings under it
   and did not read as the section title. 700 is now requested from Google
   Fonts, so this is a real weight rather than a synthesised one. */
html body .own-book-sec.own-book-awaits .wrapper-own-book-1 > h3 {
    font-weight: 700 !important;
    font-size: 42px !important;
    line-height: 1.2 !important;
    margin-bottom: 18px;
}

/* The list in the affordable-ghostwriters block ran together as one solid
   paragraph: the original markup spaced its items with <br> tags between the
   <li>s, which the copy rewrite dropped. Spaced with margin instead, and
   given a marker, on the cream ground the section already had. */
html body .own-book-sec ul {
    list-style: none;
    padding-left: 0;
    margin: 22px 0;
}

html body .own-book-sec ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 16px;
    line-height: 1.6;
}

html body .own-book-sec ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #A97F3E;
}

/* --- Affordable ghostwriters: the cover fills its column -----------------
   It was held to max-width:400px by the shared .strgle-img rule, which left
   it small against a very tall column of copy. 600px is the source's native
   width, so it fills the column without being upscaled into softness.
   Scoped through .wrapper-own-book-2, which exists only in this section --
   the same .strgle-img class carries the cover near the top of the page. */
@media (min-width: 992px) {
    html body .wrapper-own-book-2 .strgle-img figure img {
        width: 100%;
        max-width: 600px;
        margin-bottom: 0;
    }
}

/* ==========================================================================
   Gold type on every green ground
   --------------------------------------------------------------------------
   The same selector list as the "Readable text on every dark ground" block
   above -- generated from DARK_SECTIONS, the list that also paints those
   grounds green -- re-emitted in gold instead of white. Sharing the list is
   the point: a section cannot be given a green ground without its text
   following.

   #E1BC7C on #192F1F is 7.96:1. White was 14.31:1, so this is a real drop,
   but it clears 4.5:1 for body text and 3:1 for large text with room over.

   Anything sitting on a GOLD fill inside these sections is untouched: the
   four cards, the hovered hex tiles and the footer's submit button all set
   their own dark-green text at higher specificity, so they still win here.
   Buttons and links are not in the list at all and keep their own colours.
   ========================================================================== */
.our-banner.our-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .gh-banner.gh-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .book-banner.book-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .about-banner.about-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .contact-banner.contact-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .author-banner.author-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .editing-banner.editing-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .genre-banner.genre-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .mark-banner.mark-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .pricing-banner.pricing-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .pub-banner.pub-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .inner-banner.inner-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .blog-banner.blog-banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .banner-sec.banner-sec :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .case_detail_banner.case_detail_banner :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), section.main-banner-bg.main-banner-bg :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .about.about :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .sec_pt.sec_pt :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), section.author-about.author-about :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .cacascasc.cacascasc :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .our-network.our-network :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .our-editor.our-editor :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .about-expert.about-expert :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .specialized.specialized :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .myeditinh.myeditinh :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .our-testimonial.our-testimonial :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .testimonial-sec.testimonial-sec :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .new-pf.new-pf :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .our-shelf.our-shelf :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .book-cta.book-cta :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .rhyme-cta.rhyme-cta :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .pricing-tabing.pricing-tabing :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .cta-head.cta-head :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .cta-bg.cta-bg :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .feature_sec.feature_sec :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), .feature_box.feature_box :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label), html body footer :is(h1,h2,h3,h4,h5,h6,p,li,span,td,th,dd,dt,strong,em,small,figcaption,label) {
    color: #E1BC7C !important;
}

/* --- The press-mark strip under the hero ---------------------------------
   bbc-*.webp and friends are pure white artwork (255,255,255) drawn for a
   dark ground. style-web.css shipped `.ftr-logo img { filter: invert(1) }`
   to force them dark for the white band they sat in -- and the press-mark
   opt-out further up this file, which stops the illustration duotone washing
   them out, removed that invert too. White on white: the strip read as an
   empty band between the hero and the section below it.

   Inverting them back would work, but the band is between two green sections
   and the marks are white to begin with, so it takes the green instead: the
   logos read as drawn, and the white gap under the hero closes. */
html body .ftr-logo {
    background-color: #192F1F !important;
    margin-bottom: 0 !important;
}

/* --- The writing-services banner illustration ----------------------------
   The supplied artwork is already in the brand colours -- black dress, gold
   desk, brown cup -- which is the recolour the client's note asked for. So
   it opts out of the illustration duotone further up this file, which was
   drawn for the old teal artwork and would push all of that gold to green. */
html body .cta-bg .edit-img img {
    filter: none !important;
}

/* --- Ghostwriting page: the client's lead and closing lines --------------
   Same treatment the home page gives its equivalents, so the two pages read
   as one voice. Both sit on green grounds, so both take the gold. */
html body .cta-bg .cta-head p.cta-lead {
    color: #E1BC7C !important;
    font-weight: 600;
    font-style: italic;
}

html body .amer_data p.amer-closer {
    font-weight: 600;
    font-style: italic;
}

/* --- The four feature icons ----------------------------------------------
   These were teal line art (18,92,109) from the old palette, sitting on the
   green ground and all but invisible. The artwork itself is now gold, so it
   has to opt out of the illustration duotone above -- that rule matches
   `section img` and would push the new gold straight back to green. */
html body .feature_box img {
    filter: none !important;
}

/* --- Hero photographs on the light banners --------------------------------
   The section-grounds rule above strips background images because 37 of them
   have the old teal baked in. These four do not: they are light, warm
   photographs (0-9% teal, luminance 188-235), so they were collateral damage
   rather than the problem that rule was written to solve.

   They come back under a #192F1F scrim at 85%, which keeps each hero reading
   as the same deep green as every other section while letting the photograph
   show through. The scrim also carries the type. The banner headings are
   forced white further up, and white over this scrim measures 8.9:1 at worst
   -- that worst case is the near-white corner of blog-banner.webp -- against
   about 1.4:1 if the photographs were restored bare, which is why the image
   and the text colour have to be handled together.

   `html body` outranks the single-class strip rule above (both !important).
   background-color stays underneath as the fallback if an image ever 404s.
   pricing-banner is deliberately absent: it has no image file at all. */
html body .about-banner,
html body .contact-banner,
html body .our-banner,
html body .blog-banner {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: #192F1F !important;
}

html body .about-banner {
    background-image: linear-gradient(rgba(25, 47, 31, .85), rgba(25, 47, 31, .85)), url("../images/about-banner.webp") !important;
}

html body .contact-banner {
    background-image: linear-gradient(rgba(25, 47, 31, .85), rgba(25, 47, 31, .85)), url("../images/contact-banner.webp") !important;
}

html body .our-banner {
    background-image: linear-gradient(rgba(25, 47, 31, .85), rgba(25, 47, 31, .85)), url("../images/banner.webp") !important;
}

html body .blog-banner {
    background-image: linear-gradient(rgba(25, 47, 31, .85), rgba(25, 47, 31, .85)), url("../images/blog-banner.webp") !important;
}