/*
Theme Name: Service Surge
Theme URI: https://www.servicesurgecons.com
Author: Esmie Group Ltd
Description: Custom block theme for Service Surge: back-office support for UK trades firms and letting agents, plus websites, apps and automation delivered through Evergreen (Esmie Group).
Version: 1.9.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: servicesurge
*/

:root {
	--ss-paper: #F4F7FC;
	--ss-panel: #FFFFFF;
	--ss-ink: #0B2A5B;
	--ss-ink-soft: #51627F;
	--ss-rule: #D5DEEC;
	--ss-amber: #2563EB; /* accent (was amber) */
	--ss-green: #1D55D6;
	--ss-on-ink: #B9C8E2;
	--ss-pad: clamp(20px, 6vw, 96px);
}

body { -webkit-font-smoothing: antialiased; }
:where(h1, h2, h3, p, ul, ol) { margin: 0; }
h1, h2, h3, .ss-h1, .ss-h2, .ss-h3, .ss-big, .ss-bignum, .ss-plan-price, .ss-stat p:first-child, .ss-steps li::before { font-family: var(--wp--preset--font-family--sora, "Sora"), "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.025em; }
h1, .ss-h1 { font-weight: 700; }
h2, .ss-h2 { font-weight: 700; }
:focus-visible { outline: 3px solid #1B6FD1; outline-offset: 2px; border-radius: 4px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Layout helpers ---------- */
.ss-wrap { max-width: 1248px; margin-inline: auto; padding-inline: var(--ss-pad); box-sizing: content-box; }
.ss-stack { display: flex; flex-direction: column; gap: 22px; }
.ss-stack-sm { display: flex; flex-direction: column; gap: 10px; }
.ss-section { padding-block: clamp(64px, 9vw, 120px); }
.ss-soft { color: var(--ss-ink-soft); }
.ss-kicker { font-weight: 600; color: var(--ss-green); font-size: 1.05rem; }
.ss-h1 { font-size: clamp(2.6rem, 6vw, 4.9rem); line-height: 1; letter-spacing: -0.04em; font-weight: 800; }
.ss-h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
.ss-h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
.ss-lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--ss-ink-soft); max-width: 36em; }
.ss-note { font-size: 0.95rem; color: var(--ss-ink-soft); }
.ss-panel { background: var(--ss-panel); border: 1px solid var(--ss-rule); border-radius: 16px; }
.ss-band-white { background: var(--ss-panel); border-block: 1px solid var(--ss-rule); }

/* Buttons */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.wp-block-button__link { text-decoration: none; display: inline-block; }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--ss-ink); border: 2px solid var(--ss-ink); padding: 14px 24px; }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--ss-ink); color: var(--ss-paper); }
.ss-btn-amber .wp-block-button__link { background: var(--ss-amber); color: #FFFFFF; font-weight: 800; font-size: 1.15rem; padding: 20px 32px; border-radius: 12px; }
.ss-btn-amber .wp-block-button__link:hover { background: #3B74F0; color: #FFFFFF; }

/* ---------- Header ---------- */
.ss-header { border-bottom: 1px solid var(--ss-rule); background: var(--ss-paper); position: relative; z-index: 10; }
.ss-header .ss-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; }
.ss-logo img { display: block; height: 56px; width: auto; }
.ss-nav { display: flex; align-items: center; gap: 32px; font-weight: 500; }
.ss-nav a { text-decoration: none; }
.ss-nav .ss-nav-cta { background: var(--ss-ink); color: var(--ss-paper); padding: 12px 20px; border-radius: 10px; font-weight: 700; }
.ss-nav .ss-nav-cta:hover { background: #16386F; color: var(--ss-paper); }
.ss-menu-toggle { display: none; font: inherit; font-weight: 700; background: transparent; border: 2px solid var(--ss-ink); color: var(--ss-ink); border-radius: 10px; padding: 10px 16px; cursor: pointer; }

@media (max-width: 1100px) {
	.ss-menu-toggle { display: inline-block; }
	.ss-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--ss-paper); border-bottom: 1px solid var(--ss-rule); flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--ss-pad) 20px; }
	.ss-nav.is-open { display: flex; }
	.ss-nav a { padding: 14px 0; border-bottom: 1px solid var(--ss-rule); }
	.ss-nav .ss-nav-cta { margin-top: 14px; text-align: center; border-bottom: 0; }
	.ss-logo img { height: 42px; }
}

/* ---------- Hero ---------- */
.ss-hero { padding-block: clamp(56px, 8vw, 104px) clamp(56px, 7vw, 96px); }
.ss-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
.ss-hero-grid.ss-hero-landing { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: end; }

/* Week strips: the signature visual */
.ss-weeks { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 32px; }
.ss-week { display: flex; flex-direction: column; gap: 12px; }
.ss-week-top { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.ss-week-grid { display: grid; grid-template-columns: repeat(45, minmax(0, 1fr)); gap: 3px; height: 52px; }
.ss-week-grid i { display: block; background: var(--ss-paper); border: 1px solid var(--ss-rule); border-radius: 2px; }
.ss-week-grid i.on { background: var(--ss-amber); border-color: var(--ss-amber); }
.ss-week-grid i:nth-child(9n):not(:last-child) { margin-right: 4px; }
.ss-weeks .ss-note { border-top: 1px solid var(--ss-rule); padding-top: 18px; line-height: 1.5; }

.ss-tools { padding: 30px; }
.ss-tools p:last-child { font-size: 1.35rem; font-weight: 700; line-height: 1.45; }

/* ---------- Proof ---------- */
.ss-proof { border-block: 1px solid var(--ss-rule); padding-block: 40px; }
.ss-proof .ss-wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.ss-proof .ss-big { font-size: 1.9rem; font-weight: 800; }

/* ---------- Services ---------- */
.ss-head-row { display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; margin-bottom: 56px; }
.ss-head-row .ss-h2 { max-width: 13em; }
.ss-head-row p { max-width: 28em; }
.ss-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.ss-tier { border-top: 4px solid var(--ss-ink); padding-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.ss-tier ul { padding-left: 20px; line-height: 1.9; }
.ss-price { font-size: 1.25rem; font-weight: 700; margin-top: auto; padding-top: 8px; }
.ss-bundle { margin-top: 48px; padding: 26px 34px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 1.15rem; }
.ss-bundle a { font-weight: 700; }

/* ---------- Verticals ---------- */
.ss-verticals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.ss-vertical { padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; gap: 16px; }
.ss-vertical .ss-h3 { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; }
.ss-vertical .ss-link { font-weight: 700; font-size: 1.1rem; margin-top: auto; }

/* ---------- Steps ---------- */
.ss-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; margin-top: 56px; counter-reset: step; }
.ss-steps li { display: flex; flex-direction: column; gap: 12px; counter-increment: step; }
.ss-steps li::before { content: counter(step); font-size: 2.75rem; font-weight: 800; color: var(--ss-green); line-height: 1; }
.ss-steps h3 { font-size: 1.35rem; font-weight: 700; }

/* ---------- Ink bands ---------- */
.ss-ink { background: var(--ss-ink); color: var(--ss-paper); }
.ss-ink :where(h2, h3, a) { color: var(--ss-paper); }
.ss-ink p { color: var(--ss-on-ink); }
.ss-calc-band { border-radius: 20px; padding: clamp(36px, 5vw, 72px); display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.ss-calc-band > div:first-child { max-width: 38em; }
.ss-calc-band .ss-h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }

/* ---------- Pains ---------- */
.ss-pains { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; }
.ss-pains ul { list-style: none; padding: 0; }
.ss-pains li { font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.45; padding-block: 22px; border-bottom: 1px solid var(--ss-rule); }
.ss-pains li:last-child { border-bottom: 0; }

/* ---------- Task grid ---------- */
.ss-tasks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 56px; }

/* ---------- Plan fit ---------- */
.ss-plan { padding: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; }
.ss-plan-price { font-size: clamp(2.4rem, 4vw, 3.25rem); font-weight: 800; letter-spacing: -0.03em; }
.ss-plan-price span { font-size: 1.3rem; font-weight: 600; color: var(--ss-ink-soft); }

/* ---------- Case study ---------- */
.ss-case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; }
.ss-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.ss-stat { border-top: 3px solid var(--ss-ink); padding-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.ss-stat p:first-child { font-size: 2.4rem; font-weight: 800; }

/* ---------- FAQ ---------- */
.ss-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; }
.ss-faq-list > div { display: flex; flex-direction: column; gap: 10px; padding-bottom: 26px; margin-bottom: 30px; border-bottom: 1px solid var(--ss-rule); }
.ss-faq-list > div:last-child { border-bottom: 0; margin-bottom: 0; }
.ss-faq-list h3 { font-size: 1.35rem; font-weight: 700; }
.ss-faq-list p { font-size: 1.1rem; color: var(--ss-ink-soft); }

/* ---------- Footer ---------- */
.ss-footer { padding-block: clamp(64px, 8vw, 104px) 48px; }
.ss-footer-cta { display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; }
.ss-footer-cta .ss-h2 { font-size: clamp(2.2rem, 4.5vw, 3.75rem); max-width: 12em; }
.ss-footer-cta p { max-width: 34em; margin-top: 18px; font-size: 1.15rem; }
.ss-footer-base { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; border-top: 1px solid #1F3E73; margin-top: 72px; padding-top: 32px; font-size: 0.95rem; }
.ss-footer-base img { height: 48px; width: auto; display: block; }
.ss-footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ss-footer-base .ss-footer-tag { color: #B9C8E2; font-size: 0.95rem; padding-left: 2px; }
.ss-footer-base nav { display: flex; gap: 24px; flex-wrap: wrap; }
.ss-footer-base p, .ss-footer-base a { color: #A9BCD8; }
.ss-footer-base .ss-footer-contact { flex-basis: 100%; font-size: 1.05rem; }
.ss-footer-base .ss-footer-contact a { color: #FFFFFF; font-weight: 600; }
.ss-contact-direct { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--ss-rule); padding-top: 20px; }
.ss-contact-direct a { font-weight: 600; }

/* ---------- Forms ---------- */
.ss-form { display: flex; flex-direction: column; gap: 16px; }
.ss-form label { font-weight: 600; display: block; margin-bottom: 6px; }
.ss-form input, .ss-form select, .ss-form textarea { width: 100%; box-sizing: border-box; font: inherit; color: var(--ss-ink); background: var(--ss-paper); border: 1px solid var(--ss-rule); border-radius: 8px; padding: 12px 14px; }
.ss-form textarea { min-height: 130px; resize: vertical; }
.ss-form .ss-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ss-form button { font: inherit; font-weight: 700; background: var(--ss-ink); color: var(--ss-paper); border: 0; border-radius: 10px; padding: 16px 24px; cursor: pointer; align-self: flex-start; }
.ss-form button:hover { background: #16386F; }
.ss-form .ss-hp { position: absolute; left: -9999px; }
.ss-form-msg { min-height: 1.4em; font-size: 0.95rem; }
.ss-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.ss-contact .ss-panel { padding: clamp(24px, 3vw, 40px); }

/* ---------- Calculator ---------- */
.ss-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: start; margin-top: 40px; }
.ss-calc fieldset { border: 0; padding: 0; margin: 0 0 28px; }
.ss-calc legend { font-weight: 700; font-size: 1.15rem; margin-bottom: 14px; padding: 0; }
.ss-field { margin-bottom: 22px; }
.ss-field-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 6px; }
.ss-field label { font-weight: 500; }
.ss-field .ss-note { display: block; margin-top: 4px; }
.ss-num { font: inherit; font-weight: 700; color: var(--ss-ink); width: 6.5rem; text-align: right; background: var(--ss-panel); border: 1px solid var(--ss-rule); border-radius: 6px; padding: 5px 8px; }
.ss-calc input[type="range"] { width: 100%; accent-color: var(--ss-ink); margin: 0; }
.ss-assume { border-top: 1px solid var(--ss-rule); padding-top: 16px; }
.ss-assume summary { cursor: pointer; font-weight: 600; }
.ss-assume .ss-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.ss-assume label { display: block; font-size: 0.92rem; color: var(--ss-ink-soft); margin-bottom: 4px; }
.ss-assume .ss-num { width: 100%; text-align: left; }
.ss-assume p { font-size: 0.88rem; color: var(--ss-ink-soft); margin-top: 12px; }
.ss-results { position: sticky; top: 24px; padding: 28px; }
.ss-results .ss-bignum { font-size: clamp(2.3rem, 4.5vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: 4px 0 24px; }
.ss-compare { list-style: none; padding: 0; margin: 0 0 22px; }
.ss-compare li { margin-bottom: 18px; }
.ss-compare .ss-crow { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; margin-bottom: 6px; }
.ss-compare .ss-note { margin-top: 4px; font-size: 0.88rem; }
.ss-bar { height: 12px; background: var(--ss-paper); border-radius: 99px; overflow: hidden; }
.ss-bar b { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--ss-ink-soft); transition: width .45s ease; }
.ss-compare .you .ss-bar b { background: #8AB0EC; }
.ss-compare .us .ss-bar b { background: var(--ss-amber); }
.ss-verdict { border-top: 1px solid var(--ss-rule); padding-top: 18px; margin-bottom: 22px; display: flex; flex-direction: column; gap: 6px; }
.ss-verdict .ss-save { font-weight: 700; color: var(--ss-green); font-size: 1.15rem; }
.ss-results .ss-cta-full { display: block; text-align: center; text-decoration: none; background: var(--ss-ink); color: var(--ss-paper); font-weight: 700; padding: 16px; border-radius: 10px; }
.ss-results .ss-cta-full:hover { background: #16386F; color: var(--ss-paper); }
.ss-email-row { display: flex; gap: 8px; }
.ss-email-row input { flex: 1; min-width: 0; }
.ss-email-row button { align-self: stretch; background: transparent; color: var(--ss-ink); border: 2px solid var(--ss-ink); }
.ss-email-row button:hover { background: var(--ss-ink); color: var(--ss-paper); }

/* ---------- Generic page content ---------- */
.ss-page-content { max-width: 760px; margin-inline: auto; padding: clamp(56px, 8vw, 96px) var(--ss-pad); }
.ss-page-content > * + * { margin-top: 1.1em; }
.ss-page-content h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.ss-hero-grid, .ss-hero-grid.ss-hero-landing, .ss-plan, .ss-case, .ss-faq, .ss-pains, .ss-calc, .ss-contact { grid-template-columns: 1fr; }
	.ss-tiers, .ss-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ss-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ss-results { position: static; }
}
@media (max-width: 640px) {
	.ss-tiers, .ss-tasks, .ss-verticals, .ss-steps, .ss-proof .ss-wrap, .ss-stats, .ss-form .ss-row, .ss-assume .ss-grid2 { grid-template-columns: 1fr; }
	.ss-week-grid { height: 36px; gap: 2px; }
	.ss-week-grid i:nth-child(9n):not(:last-child) { margin-right: 2px; }
	.ss-email-row { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- WhatsApp chat ---------- */
.ss-wa { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 999; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-family: inherit; }
.ss-wa-launch { display: inline-flex; align-items: center; gap: 10px; background: #25D366; color: #073B1F; border: 0; border-radius: 999px; padding: 14px 20px; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 8px 24px rgba(11, 42, 91, 0.22); }
.ss-wa-launch:hover { background: #1FBE5A; }
.ss-wa-panel { width: min(340px, calc(100vw - 40px)); background: #FFFFFF; border: 1px solid var(--ss-rule); border-radius: 18px; overflow: hidden; box-shadow: 0 16px 40px rgba(11, 42, 91, 0.22); }
.ss-wa-panel[hidden] { display: none; }
.ss-wa-head { background: var(--ss-ink); color: #FFFFFF; padding: 16px 18px; display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.ss-wa-title { font-weight: 700; color: #FFFFFF; }
.ss-wa-sub { font-size: 0.85rem; color: #B9C8E2; margin-top: 2px; }
.ss-wa-close { background: transparent; border: 0; color: #FFFFFF; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.ss-wa-body { padding: 18px; background: var(--ss-paper); display: flex; flex-direction: column; gap: 14px; }
.ss-wa-bubble { background: #FFFFFF; border: 1px solid var(--ss-rule); border-radius: 4px 14px 14px 14px; padding: 12px 14px; font-size: 0.95rem; line-height: 1.45; }
.ss-wa-options { display: flex; flex-direction: column; gap: 8px; }
.ss-wa-options button { text-align: left; font: inherit; font-weight: 600; font-size: 0.95rem; color: var(--ss-ink); background: #FFFFFF; border: 1.5px solid var(--ss-amber); border-radius: 999px; padding: 10px 16px; cursor: pointer; }
.ss-wa-options button:hover { background: var(--ss-amber); color: #FFFFFF; }
@media (max-width: 640px) { .ss-wa-launch span { display: none; } .ss-wa-launch { padding: 15px; } .ss-wa { right: 14px; } }
@media print { .ss-wa { display: none; } }
.ss-wa .ss-wa-bubble { color: var(--ss-ink); }

/* ---------- Add-ons ---------- */
.ss-addons-wrap { margin-top: clamp(64px, 8vw, 96px); }
.ss-addons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ss-addon { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.ss-addon ul { padding-left: 20px; line-height: 1.8; }
.ss-addon .ss-price { color: var(--ss-amber); }
@media (max-width: 960px) { .ss-addons { grid-template-columns: 1fr; } }

/* Original logo */
.ss-logo img { height: 72px; }
@media (max-width: 900px) { .ss-logo img { height: 56px; } }
.ss-footer-base img.ss-footer-logo { height: 80px; background: #FFFFFF; padding: 10px 16px; border-radius: 12px; }


/* ---------- Site chat assistant ---------- */
.sc { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 999; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-family: inherit; }
.sc-launch { display: inline-flex; align-items: center; gap: 10px; background: var(--sc-brand); color: #FFFFFF; border: 0; border-radius: 999px; padding: 14px 20px; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 10px 28px -8px rgba(10, 20, 40, 0.45); }
.sc-launch:hover { filter: brightness(1.1); }
.sc-open .sc-launch span { display: none; }
.sc-open .sc-launch { padding: 14px; }
.sc-panel { width: min(370px, calc(100vw - 32px)); height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column; background: #FFFFFF; color: #16213A; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 50px -12px rgba(10, 20, 40, 0.35); border: 1px solid rgba(10, 20, 40, 0.08); }
.sc-panel[hidden] { display: none; }
.sc-head { background: var(--sc-ink); color: #FFFFFF; padding: 16px 18px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sc .sc-head p { margin: 0; color: #FFFFFF; }
.sc .sc-head .sc-title { font-weight: 800; font-size: 1.05rem; }
.sc .sc-head .sc-sub { font-size: 0.85rem; opacity: 0.8; margin-top: 2px; }
.sc-close { background: transparent; border: 0; color: #FFFFFF; font-size: 1.7rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.sc-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #F5F7FA; }
.sc-msg { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: 0.95rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-bot { align-self: flex-start; background: #FFFFFF; color: #16213A; border: 1px solid #E1E6EE; border-top-left-radius: 4px; }
.sc-me { align-self: flex-end; background: var(--sc-brand); color: #FFFFFF; border-top-right-radius: 4px; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 4px; background: #F5F7FA; }
.sc-chips:empty { display: none; }
.sc-chip { font: inherit; font-size: 0.88rem; font-weight: 700; color: var(--sc-brand); background: #FFFFFF; border: 1.5px solid var(--sc-brand); border-radius: 999px; padding: 7px 13px; cursor: pointer; }
.sc-chip:hover { background: var(--sc-brand); color: #FFFFFF; }
.sc-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #E1E6EE; background: #FFFFFF; margin: 0; }
.sc-input input { flex: 1; min-width: 0; font: inherit; color: #16213A; background: #F5F7FA; border: 1px solid #E1E6EE; border-radius: 10px; padding: 10px 12px; }
.sc-send { font: inherit; font-weight: 700; background: var(--sc-ink); color: #FFFFFF; border: 0; border-radius: 10px; padding: 0 16px; cursor: pointer; }
@media (max-width: 640px) { .sc { right: 12px; } .sc-launch span { display: none; } .sc-launch { padding: 15px; } .sc-panel { height: min(560px, calc(100vh - 110px)); } }
@media print { .sc { display: none; } }

/* ---------- All services and existing clients (1.8.0) ---------- */
.ss-nav a { white-space: nowrap; }
@media (min-width: 1101px) { .ss-nav { gap: 24px; } }
@media (min-width: 1101px) and (max-width: 1240px) { .ss-nav { gap: 16px; font-size: 0.92rem; } .ss-logo img { height: 52px; } .ss-nav .ss-nav-cta { padding: 10px 14px; } }
.ss-badge { display: inline-block; align-self: flex-start; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ss-ink); background: #E3EBF8; border-radius: 999px; padding: 6px 12px; }
.ss-badge-eg { color: #0F4D32; background: #DDF1E6; }
.ss-jump { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.ss-jump a { text-decoration: none; font-weight: 700; border: 2px solid var(--ss-ink); border-radius: 999px; padding: 10px 18px; }
.ss-jump a:hover { background: var(--ss-ink); color: var(--ss-paper); }
.ss-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ss-svc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ss-svc { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.ss-band-white .ss-svc { background: var(--ss-paper); }
.ss-svc h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.ss-svc-price { font-weight: 700; margin-top: auto; padding-top: 6px; color: var(--ss-amber); }
.ss-svc-eg { border-top: 4px solid #1F7A4D; }
.ss-svc-more { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 32px; font-weight: 700; font-size: 1.05rem; }
.ss-svc-cta { margin-top: 36px; }
.ss-more { padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; border-left: 6px solid #1F7A4D; }
.ss-more-copy { display: flex; flex-direction: column; gap: 16px; }
.ss-more .ss-h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.ss-more .ss-link { font-weight: 700; font-size: 1.1rem; }
.ss-more-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.ss-more-list li { padding: 12px 0 12px 28px; border-bottom: 1px solid var(--ss-rule); position: relative; font-weight: 600; }
.ss-more-list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 4px; background: #1F7A4D; }
.ss-existing-section { padding-top: 0; }
.ss-existing { border-radius: 20px; padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.ss-existing-copy { display: flex; flex-direction: column; gap: 18px; }
.ss-existing .ss-existing-kicker { color: #9CC0FF; font-weight: 700; font-size: 1.05rem; }
.ss-existing .ss-h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.ss-existing p { font-size: 1.1rem; line-height: 1.55; }
.ss-existing .wp-block-buttons { margin-top: 8px; }
.ss-btn-ghost .wp-block-button__link { background: transparent; color: #FFFFFF; border: 2px solid #5C7BB0; font-weight: 700; font-size: 1.05rem; padding: 18px 26px; border-radius: 12px; }
.ss-btn-ghost .wp-block-button__link:hover { border-color: #FFFFFF; }
.ss-existing-list { list-style: none; padding: 0; display: flex; flex-direction: column; }
.ss-existing-list li { display: flex; flex-direction: column; gap: 4px; padding-block: 16px; border-bottom: 1px solid #1F3E73; color: #FFFFFF; }
.ss-existing-list li:last-child { border-bottom: 0; }
.ss-existing-list strong { font-size: 1.1rem; }
.ss-existing-list span { color: var(--ss-on-ink); }
@media (max-width: 960px) {
	.ss-svc-grid, .ss-svc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ss-more, .ss-existing { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.ss-svc-grid, .ss-svc-grid-4, .ss-more-list { grid-template-columns: 1fr; }
}
.ss-returning { border-left: 4px solid #1F7A4D; padding-left: 12px; }
.ss-returning a { font-weight: 700; }

/* ---------- White and blue colour scheme (1.9.0) ---------- */
:root {
	--ss-paper: #FFFFFF;
	--ss-panel: #F5F8FE;
	--ss-ink: #0B2A5B;
	--ss-head: #0B5CD6;
	--ss-tint: #EEF4FF;
	--ss-rule: #DCE5F3;
}
body { background: #FFFFFF; }
h1, h2, h3, .ss-h1, .ss-h2, .ss-h3, .ss-big, .ss-plan-price, .ss-stat p:first-child, .ss-steps li::before, .ss-steps h3 { color: var(--ss-head); }
.ss-kicker { color: var(--ss-ink); }
.ss-panel { background: #FFFFFF; box-shadow: 0 1px 2px rgba(11, 42, 91, 0.04); }
.ss-band-white { background: var(--ss-panel); }
.ss-band-white .ss-panel, .ss-band-white .ss-svc { background: #FFFFFF; }
.ss-tier, .ss-stat { border-top-color: var(--ss-head); }
.wp-block-button__link, .ss-form button, .ss-results .ss-cta-full { background: var(--ss-head); color: #FFFFFF; }
.wp-block-button__link:hover, .ss-form button:hover, .ss-results .ss-cta-full:hover { background: #0A4DB3; color: #FFFFFF; }
.wp-block-button.is-style-outline .wp-block-button__link, .ss-jump a { color: var(--ss-head); border-color: var(--ss-head); background: transparent; }
.wp-block-button.is-style-outline .wp-block-button__link:hover, .ss-jump a:hover { background: var(--ss-head); color: #FFFFFF; }
.ss-nav a { color: var(--ss-ink); }
.ss-nav a:hover { color: var(--ss-head); }
.ss-nav .ss-nav-cta, .ss-nav .ss-nav-cta:hover { background: var(--ss-head); color: #FFFFFF; }
.ss-menu-toggle { color: var(--ss-head); border-color: var(--ss-head); }
.ss-header { background: #FFFFFF; }
.ss-logo img { height: 64px; }
@media (max-width: 1100px) { .ss-logo img { height: 46px; } }
@media (min-width: 1101px) and (max-width: 1240px) { .ss-logo img { height: 50px; } }

/* Former dark bands are now light blue panels with blue headings */
.ss-ink { background: var(--ss-tint); color: var(--ss-ink); }
.ss-ink :where(h2, h3) { color: var(--ss-head); }
.ss-ink a { color: var(--ss-head); }
.ss-ink p { color: #3F5274; }
.ss-calc-band, .ss-existing { border: 1px solid #D3E1FA; }
.ss-existing .ss-existing-kicker { color: var(--ss-ink); }
.ss-existing-list li { color: var(--ss-ink); border-bottom-color: #D3E1FA; }
.ss-existing-list strong { color: var(--ss-head); }
.ss-existing-list span { color: #3F5274; }
.ss-btn-amber .wp-block-button__link { background: var(--ss-head); color: #FFFFFF; }
.ss-btn-amber .wp-block-button__link:hover { background: #0A4DB3; }
.ss-btn-ghost .wp-block-button__link { color: var(--ss-head); border-color: var(--ss-head); background: #FFFFFF; }
.ss-btn-ghost .wp-block-button__link:hover { background: var(--ss-head); color: #FFFFFF; border-color: var(--ss-head); }

/* Footer: white */
.ss-footer.ss-ink { background: #FFFFFF; border-top: 1px solid var(--ss-rule); }
.ss-footer-cta { background: var(--ss-tint); border: 1px solid #D3E1FA; border-radius: 20px; padding: clamp(32px, 5vw, 64px); }
.ss-footer-base { border-top-color: var(--ss-rule); }
.ss-footer-base p, .ss-footer-base a { color: #3F5274; }
.ss-footer-base a:hover { color: var(--ss-head); }
.ss-footer-base .ss-footer-tag { color: var(--ss-ink); }
.ss-footer-base img.ss-footer-logo { height: 110px; background: transparent; padding: 0; border-radius: 0; }

/* Chat header */
.ss-wa-head { background: var(--ss-head); }