/* Web Designer UK | Layered professional section palettes | October 2026
   This stylesheet builds on sober-theme.css and only adjusts visual colour.
   Exact requested surface colours: Steel Blue #3F657B, Soft Grey #B7C6D0,
   Soft Ivory #F4F5F3. Each HTML section has a semantic tone class.
   To change section colours, edit the three --section-* values here. */
:root {
  --section-steel-blue: #3F657B;
  --section-soft-grey: #B7C6D0;
  --section-soft-ivory: #F4F5F3;
  --section-ink: #162938;
  --section-paragraph: #415363;
  --section-accent: #355C72;
  --section-border: rgba(29, 57, 72, .15);
}

/* Distinct, full-bleed backgrounds (including legacy sections with gradients). */
section.tone-ivory {
  background: var(--section-soft-ivory) !important;
  color: var(--section-paragraph);
}
section.tone-grey {
  background: var(--section-soft-grey) !important;
  color: var(--section-paragraph);
}
section.tone-steel {
  background: var(--section-steel-blue) !important;
  color: #F4F5F3;
}
section.tone-light {
  color-scheme: light;
  --text-color: var(--section-paragraph);
  --headings-color: var(--section-ink);
  --sec-title-color: var(--section-ink);
  --sec-title-subtitle-color: var(--section-accent);
  --theme-color-lighter2: #425769;
  --wdl-muted: #415363;
  --wdl-stroke: rgba(29, 57, 72, .15);
}

/* Warm dark ink on ivory/grey sections: headings, subtitles, details and links. */
section.tone-light :is(h1,h2,h3,h4,h5,h6),
section.tone-light :is(.sec-title h2,.sec-title2 h2,.loc-heading h2,.loc-copy h2,
 .sp-section-heading h2,.sp-intro h2,.sp-visual-copy h2,.sp-why h2,
 .wdl-section-heading h2,.wdl-feature h3,.wdl-service-card h2,.wdl-guide-card h3,
 .loc-card h3,.loc-process h3,.loc-feature h3,.loc-case h3,
 .loc-package h3,.sp-card h3,.sp-steps h3,.sp-project h3,.sp-related h3,
 .sp-included-panel h3,.wdl-article-content h2,.wdl-article-content h3) {
  color: var(--section-ink) !important;
}
section.tone-light :is(p,li,.text,.wdl-section-heading p,.wdl-feature p,
 .wdl-service-card p,.wdl-guide-card p,.wdl-process-note,
 .sp-section-heading p,.sp-intro p,.sp-visual-copy p,.sp-why > p,
 .sp-card p,.sp-steps p,.sp-project p,.sp-related p,.sp-project-note,
 .loc-heading p,.loc-copy p,.loc-card p,.loc-process p,.loc-feature p,
 .loc-case p,.loc-feature-list li,.loc-package p,.loc-package ul,
 .loc-faqs details p,.loc-cta p,.loc-feature-intro p,
 .accordion-box .acc-btn,.accordion-box .acc-content) {
  color: var(--section-paragraph) !important;
}
section.tone-light :is(.sub-title,.wdl-eyebrow,.loc-eyebrow,.sp-eyebrow,
 .loc-process-number,.sp-step-num,.wdl-feature-number,
 .wdl-secondary-link,.wdl-article-content a,.loc-case-copy span) {
  color: var(--section-accent) !important;
}
section.tone-light .sec-title h2 span { color: var(--section-accent) !important; }
section.tone-light :is(.wdl-service-card h2 a,.wdl-guide-card h3 a,
 .sp-related a,.loc-area-grid a) { color: var(--section-ink) !important; }
section.tone-light :is(.wdl-secondary-link,.wdl-service-card > a,
 .wdl-guide-card > a,.wdl-article-content a) {
  color: var(--section-accent) !important;
}
section.tone-light :is(.wdl-secondary-link,.wdl-service-card > a,
 .wdl-guide-card > a,.wdl-article-content a):hover {
  color: #243E50 !important;
}

/* Crisp elevated cards retain the existing grid, size and hover interactions. */
section.tone-light :is(.wdl-feature,.wdl-service-card,.wdl-guide-card,
 .loc-card,.loc-process,.loc-feature,.loc-case,.loc-package,.loc-faqs details,
 .sp-card,.sp-steps,.sp-why-list,.sp-project,.sp-related,.sp-included-panel) {
  background: #FFFFFF !important;
  border-color: var(--section-border) !important;
  box-shadow: 0 9px 28px rgba(19, 42, 57, .035);
}
section.tone-grey :is(.wdl-feature,.wdl-service-card,.wdl-guide-card,
 .loc-card,.loc-process,.loc-feature,.loc-case,.loc-package,.loc-faqs details,
 .sp-card,.sp-steps,.sp-why-list,.sp-project,.sp-related,.sp-included-panel) {
  background: rgba(255,255,255,.78) !important;
}
section.tone-light :is(.wdl-feature,.wdl-service-card,.wdl-guide-card,
 .loc-card,.loc-process,.loc-feature,.loc-case,.loc-package,
 .sp-card,.sp-steps,.sp-why-list,.sp-project,.sp-related):hover {
  border-color: rgba(63, 101, 123, .47) !important;
  box-shadow: 0 12px 30px rgba(19, 42, 57, .10);
}
section.tone-light :is(.sp-card-icon,.loc-card-icon) {
  background: #E6EEF2 !important;
  color: #355C72 !important;
  border-color: #CDDDE5 !important;
}
section.tone-light .loc-area-grid a {
  background: #FFFFFF !important;
  border-color: var(--section-border) !important;
  color: var(--section-ink) !important;
}
section.tone-light .loc-area-grid a:hover {
  background: #ECF2F5 !important;
  border-color: #3F657B !important;
}
section.tone-light .loc-feature-list li::before,
section.tone-light .sp-check-list li::before,
section.tone-light .loc-faqs summary::after,
section.tone-light .sp-related a::after,
section.tone-light .loc-area-grid a::after { color: var(--section-accent) !important; }
section.tone-light .loc-faqs summary { color: var(--section-ink) !important; }

/* A limited number of intentional midnight cards provide contrast inside light sections. */
section.tone-light :is(.loc-offer,.loc-package-primary,.sp-cta-panel,
 .about-counter-info,.faq-section .counter-info-box .inner-box,.wdl-sidebar-card) {
  background: linear-gradient(135deg, #20384B, #172534) !important;
  color: #F4F5F3 !important;
  border-color: rgba(63,101,123,.35) !important;
}
section.tone-light :is(.loc-offer,.loc-package-primary,.sp-cta-panel,
 .about-counter-info,.faq-section .counter-info-box .inner-box,.wdl-sidebar-card)
 :is(h2,h3,h4,h5,h6,p,li,.text,.loc-price,.loc-package-price,.loc-package ul) {
  color: #F4F5F3 !important;
}
section.tone-light :is(.loc-offer,.loc-package-primary,.sp-cta-panel,
 .about-counter-info,.faq-section .counter-info-box .inner-box,.wdl-sidebar-card)
 :is(.loc-eyebrow,.sp-eyebrow,.count-box,.loc-price small,a:not(.btn-style-one)) {
  color: #C8DCE7 !important;
}
section.tone-light .loc-package-primary ul,
section.tone-light .loc-package-primary p { color: #E5EDF2 !important; }

/* FAQ panels and the form use the same clean, calm surface treatment. */
section.tone-light .accordion-box .block,
section.tone-light .accordion-box .block.active-block {
  background: rgba(255,255,255,.77) !important;
  border: 1px solid rgba(29,57,72,.15);
}
section.tone-light .accordion-box .block .acc-btn,
section.tone-light .accordion-box .block .acc-btn.active {
  color: var(--section-ink) !important;
}
section.tone-light .accordion-box .block .acc-btn .icon {
  background: #E6EEF2 !important;
  color: #355C72 !important;
}
section.tone-light .faq-section .counter-info-box .inner-box,
section.faq-section.tone-light .counter-info-box .inner-box {
  background: #3F657B !important;
}
section.tone-light :is(input,textarea,select) {
  color: var(--section-ink);
  caret-color: var(--section-ink);
}
section.tone-light :is(input,textarea,select)::placeholder { color: #607282; }
section.tone-light .contact-details__info li .icon {background: #DDE9EE !important;}
section.tone-light .contact-details__info li .icon span {color: #355C72 !important;}

/* Steel blue full-width service / location / process surfaces stay readable. */
section.tone-steel :is(h1,h2,h3,h4,h5,h6,.sec-title h2,.sec-title2 h2,
 .wdl-section-heading h2,.loc-heading h2,.sp-section-heading h2,
 .loc-package h3,.loc-card h3,.sp-card h3,.sp-steps h3),
section.tone-steel :is(p,li,.text,.wdl-feature p,.wdl-guide-card p,.wdl-service-card p,
 .loc-heading p,.loc-card p,.loc-feature p,.loc-case p,.loc-process p,
 .sp-section-heading p,.sp-card p,.sp-steps p,.sp-intro p,.sp-why > p) {
  color: #F4F5F3 !important;
}
section.tone-steel :is(.wdl-eyebrow,.loc-eyebrow,.sp-eyebrow,
 .sec-title .sub-title,.sec-title2 .sub-title,.wdl-feature-number,
 .loc-process-number,.sp-step-num,.sp-related a::after,.loc-area-grid a::after) {
  color: #E5EFF4 !important;
}
section.tone-steel .sec-title h2 span { color: #EDF4F8 !important; }
section.tone-steel :is(.wdl-feature,.wdl-service-card,.wdl-guide-card,
 .loc-card,.loc-process,.loc-feature,.loc-case,.loc-package,.loc-faqs details,
 .sp-card,.sp-steps,.sp-why-list,.sp-project,.sp-related,.sp-included-panel) {
  background: rgba(14, 37, 52, .30) !important;
  border-color: rgba(255,255,255,.20) !important;
}
section.tone-steel :is(.wdl-feature,.wdl-service-card,.wdl-guide-card,
 .loc-card,.loc-process,.loc-feature,.loc-case,.loc-package,.loc-faqs details,
 .sp-card,.sp-steps,.sp-project,.sp-related):hover {
  border-color: rgba(255,255,255,.60) !important;
}
section.tone-steel :is(.loc-card-icon,.sp-card-icon) {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.30) !important;
  color: #FFFFFF !important;
}
section.tone-steel .loc-area-grid a {
  background: rgba(14,37,52,.27) !important;
  border-color: rgba(255,255,255,.23) !important;
  color: #FFFFFF !important;
}
section.tone-steel .loc-area-grid a:hover {
  background: rgba(14,37,52,.50) !important;
}
section.tone-steel :is(.wdl-service-card h2 a,.wdl-guide-card h3 a,.sp-related a,
 .loc-area-grid a,.wdl-secondary-link,.wdl-service-card > a,.wdl-guide-card > a) {
  color: #FFFFFF !important;
}
section.tone-steel .loc-faqs summary {color:#FFFFFF !important;}
section.tone-steel .loc-faqs details p {color:#E7F0F4 !important;}
section.tone-steel :is(.loc-offer,.loc-package-primary,.sp-cta-panel) {
  background: #172F41 !important;
  border-color: rgba(255,255,255,.24) !important;
}
section.tone-steel .loc-package-primary :is(p,li,h3),
section.tone-steel .sp-cta-panel :is(p,h2) { color: #F4F5F3 !important; }

/* On steel, ivory CTAs stand out more than another blue-on-blue button. */
section.tone-steel :is(.btn-style-one,.wdl-primary-link) {
  background: #F4F5F3 !important;
  color: #172534 !important;
  border-color: transparent !important;
}
section.tone-steel .btn-style-one::before { background: #DBE7ED !important; }
section.tone-steel :is(.btn-style-one,.wdl-primary-link):hover,
section.tone-steel :is(.btn-style-one,.wdl-primary-link):focus-visible {
  color: #172534 !important;
}
section.tone-steel .btn-style-one :is(.btn-title,.dot-box) { color: #172534 !important; }
section.tone-steel .btn-style-one .dot-box { background: #DCE8EE !important; }
section.tone-steel .service-block .inner-block .title-box .icon {
  border-color: rgba(255,255,255,.34) !important;
}

/* Subtle separation between neighbouring solid-colour sections. */
section.tone-light + section.tone-light,
section.tone-steel + section.tone-light,
section.tone-light + section.tone-steel {
  border-top: 1px solid rgba(24,52,70,.10);
}

/* Keep a strong contrast ring on every surface, including mobile. */
section.tone-light :is(a,button,input,textarea,select):focus-visible {
  outline-color: #355C72 !important;
}
section.tone-steel :is(a,button,input,textarea,select):focus-visible {
  outline-color: #F4F5F3 !important;
}

/* Links that were pale against the site's original dark background are now ink-blue. */
section.tone-light :is(.wdl-process-note a,.wdl-form-note a,.loc-link,
 .contact-details a:not(.btn-style-one)) {
  color: #355C72 !important;
}
section.tone-light :is(.sp-call-btn,.loc-call-btn,.loc-outline-btn) {
  background: #E8F0F3 !important;
  border-color: #A9C0CB !important;
  color: #19384A !important;
}
section.tone-light :is(.sp-call-btn,.loc-call-btn,.loc-outline-btn):hover {
  background: #D7E5EC !important;
  color: #162938 !important;
}
section.tone-light.contact-details :is(input,textarea,select) {
  background: #FFFFFF !important;
  border-color: #ACBFCB !important;
}


/* October 2026 request: black text on the light About areas.
   Apply to the home About section and the About page, while preserving the
   separate dark counter/CTA card's legible ivory writing. */
section.about-section.tone-light {
  --section-ink: #111111;
  --section-paragraph: #111111;
  --section-accent: #111111;
  --text-color: #111111;
  --headings-color: #111111;
  --sec-title-color: #111111;
  --sec-title-subtitle-color: #111111;
  color: #111111 !important;
}
section.about-section.tone-light .content-column :is(h1,h2,h3,h4,h5,h6,p,.text,.sub-title) {
  color: #111111 !important;
}
/* The circular slogan is SVG text: its visibility is controlled by fill,
   not only by the usual CSS color property. */
section.about-section.tone-light .circle-container :is(text,textPath,.text) {
  fill: #111111 !important;
  color: #111111 !important;
}
/* Keep the entire original rotating slogan but use a legible compact size
   rather than squeezing its lettering together around the 188px circle. */
section.about-section.tone-light .circle-container .text {
  font-size: 11px !important;
  letter-spacing: .15px;
}
/* The small centre mark is white artwork; make it dark against soft ivory. */
section.about-section.tone-light .circle-container .logo img {
  filter: brightness(0) !important;
}
/* The dark information card must remain light-on-dark, not black-on-dark. */
section.about-section.tone-light .about-counter-info,
section.about-section.tone-light .about-counter-info :is(h2,h3,h4,h5,h6,p,.text,.title,.count-box) {
  color: #F4F5F3 !important;
}