/*
Theme Name: South Surfacing
Theme URI: https://www.southsurfacing.co.uk
Author: Welch Marketing Ltd
Author URI: https://www.welchmarketing.co.uk
Description: Premium, plugin free WordPress theme built for South Surfacing Ltd, driveway and surfacing contractors in Croydon and London. Self building pages, Welch Settings panel, built in lead capture, schema, GDPR cookie consent and per location SEO pages.
Version: 1.3.3
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: south-surfacing
Tags: business, custom-colors, custom-logo, custom-menu, featured-images, accessibility-ready, blog
*/

/* -------------------------------------------------------------------------
 * 1. Self hosted fonts. No third party font CDN is called at any point,
 *    so nothing contacts an outside server before cookie consent.
 * ---------------------------------------------------------------------- */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/dm-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/dm-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/dm-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/dm-sans-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/inter-latin-700-normal.woff2') format('woff2')}

/* -------------------------------------------------------------------------
 * 2. Tokens. The brand, accent and ink values are overridden inline from the
 *    Welch Settings colour pickers, so the client can recolour the whole site.
 * ---------------------------------------------------------------------- */
:root{
	--brand:#0A0A3D;
	--brand-2:#17175C;
	--accent:#E10B0B;
	--accent-2:#FF5A48;
	--ink:#12123A;
	--on-accent:#FFFFFF;
	--body:#454C60;
	--muted:#6D7488;
	--cream:#F3F5FA;
	--line:#DDE2EC;
	--white:#FFFFFF;
	--wrap:1200px;
	--space-section:clamp(3.2rem,7vw,5.6rem);
	--radius:14px;
	--radius-lg:22px;
	--speed:.22s;
	--font-display:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
	--font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
	--shadow:0 12px 34px rgba(10,10,61,.10);
	--shadow-lg:0 26px 60px rgba(10,10,61,.16);
}

/* -------------------------------------------------------------------------
 * 3. Base
 * ---------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:1rem;line-height:1.68;color:var(--body);background:var(--white);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--ink);line-height:1.16;margin:0 0 .6em;font-weight:700;letter-spacing:-.015em}
h1{font-size:clamp(2.05rem,5vw,3.5rem)}
h2{font-size:clamp(1.65rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.18rem,2vw,1.45rem)}
h4{font-size:1.05rem}
p{margin:0 0 1.1rem}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--brand-2)}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0 0 1.1rem;padding-left:1.15rem}
li{margin:0 0 .45rem}
strong{color:var(--ink);font-weight:600}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
blockquote{margin:0 0 1.2rem;padding:1rem 1.3rem;border-left:4px solid var(--accent);background:var(--cream);border-radius:0 var(--radius) var(--radius) 0}
table{width:100%;border-collapse:collapse;margin-bottom:1.4rem}
th,td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--line)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:var(--cream);padding:.15em .4em;border-radius:5px}

/* Accessibility: visible focus everywhere, and reduced motion respected. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--brand);color:#fff;padding:.85rem 1.3rem;font-family:var(--font-display);font-weight:700;border-radius:0 0 var(--radius) 0}
.skip-link:focus{left:0;color:#fff}
#main:focus{outline:none}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Icon backstop. Every inline icon also carries width/height attributes, so a
   missing stylesheet can never let them balloon to the 300x150 SVG default. */
.icon{width:1em;height:1em;display:inline-block;flex:none;vertical-align:-.125em;fill:currentColor}

/* -------------------------------------------------------------------------
 * 4. Layout helpers
 * ---------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.1rem,4vw,1.9rem)}
.wrap--narrow{max-width:840px}
.section{padding-top:var(--space-section);padding-bottom:var(--space-section)}
.section--cream{background:var(--cream)}
.section--dark{background:var(--brand);color:#C9D1D9}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
/* No two sections next to each other carry the same background, so their padding
   never stacks into a doubled gap. The tone helper enforces it; these selectors
   are a backstop for any markup written by hand, halving the join rather than
   removing it so nothing is left sitting hard against an edge. */
.section--cream+.section--cream,
.section--dark+.section--dark,
.section:not(.section--cream):not(.section--dark)+.section:not(.section--cream):not(.section--dark){padding-top:calc(var(--space-section) * .5)}
.grid{display:grid;gap:clamp(1.1rem,2.4vw,1.8rem)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(285px,100%),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.section-head{max-width:720px;margin:0 0 clamp(1.8rem,3.5vw,2.8rem)}
.section-head--centre{margin-left:auto;margin-right:auto;text-align:center}
.section-head p{font-size:1.06rem;margin-bottom:0}
.kicker{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 .8rem}
.section--dark .kicker,.hero .kicker{color:var(--accent-2)}
.lead{font-size:1.1rem;color:var(--body)}

/* -------------------------------------------------------------------------
 * 5. Buttons
 * ---------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--font-display);font-weight:700;font-size:1rem;line-height:1.25;text-align:center;padding:.9rem 1.75rem;border-radius:999px;border:2px solid transparent;cursor:pointer;text-decoration:none;transition:transform var(--speed),background var(--speed),color var(--speed),border-color var(--speed)}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px;height:18px}
.btn--primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn--primary:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent);filter:brightness(.9)}
.btn--dark{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn--dark:hover{background:var(--brand-2);border-color:var(--brand-2);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--light{background:#fff;color:var(--brand);border-color:#fff}
.btn--light:hover{background:transparent;color:#fff;border-color:#fff}
.btn--wide{width:100%}
.btn--sm{padding:.72rem 1.2rem;font-size:.92rem}

/* -------------------------------------------------------------------------
 * 6. Header, top bar and navigation
 * ---------------------------------------------------------------------- */
.topbar{background:var(--brand);color:#C9D1D9;font-size:.88rem}
.topbar__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.4rem;padding-top:.55rem;padding-bottom:.55rem}
.topbar__points{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;margin:0;padding:0;list-style:none}
.topbar__points li{margin:0;display:flex;align-items:center;gap:.4rem}
.topbar__points svg{color:var(--accent)}
.topbar__contact{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center}
.topbar a{color:#fff;text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:.4rem}
.topbar a:hover{color:var(--accent-2)}

.site-header{position:sticky;top:0;z-index:500;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:saturate(150%) blur(10px)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding-top:.85rem;padding-bottom:.85rem}
.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.brand img{max-height:56px;width:auto}
/* Target the logo by its own class. Selecting bare svg here also caught the
   tick icons sitting in the same block and blew them up to logo size. */
.site-logo{height:46px;width:auto;max-width:100%;display:block}
.header__actions{display:flex;align-items:center;gap:.7rem}
.header__phone{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-display);font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
.header__phone svg{color:var(--accent)}

/* Visually hidden but still focusable, so the mobile menu is keyboard operable. */
.nav-toggle-input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.nav-toggle-input:focus-visible+.nav-toggle{outline:3px solid var(--accent);outline-offset:3px}
.nav-toggle{display:none;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:var(--brand);cursor:pointer;flex:none}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:22px;height:2px;background:#fff;border-radius:2px;content:'';position:relative}
.nav-toggle span::before{position:absolute;top:-7px}
.nav-toggle span::after{position:absolute;top:7px}

.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.15rem}
.primary-nav li{margin:0;position:relative}
.primary-nav a{display:block;padding:.62rem .78rem;font-family:var(--font-display);font-weight:600;font-size:.97rem;color:var(--ink);text-decoration:none;border-radius:9px;white-space:nowrap}
.primary-nav a:hover,.primary-nav .current-menu-item>a,.primary-nav .current_page_item>a,.primary-nav .current-menu-ancestor>a{background:var(--cream);color:var(--brand)}
.primary-nav .sub-menu{display:none;position:absolute;top:100%;left:0;min-width:min(250px,100%);background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:.5rem;flex-direction:column;align-items:stretch;z-index:20}
.primary-nav li:hover>.sub-menu,.primary-nav li:focus-within>.sub-menu{display:flex}
.primary-nav .sub-menu a{white-space:normal}

@media (max-width:1180px){
	/* The full screen menu is fixed positioned, so the header must not use
	   backdrop-filter at these widths or the menu is trapped in the header box. */
	.site-header{backdrop-filter:none;background:#fff}
	/* The menu control is always the right most thing in the header. Flex order
	   does the moving, because the pure CSS menu needs the checkbox to stay
	   before the nav in the markup. */
	.nav-toggle{display:inline-flex;order:3}
	.header__actions{order:2;margin-left:auto}
	.header__phone span{display:none}
	.primary-nav{display:none;position:fixed;inset:0;top:0;background:var(--brand);padding:6rem 1.5rem 2.5rem;overflow-y:auto;z-index:600}
	#nav-toggle:checked~.primary-nav{display:block}
	#nav-toggle:checked~.nav-toggle{position:relative;z-index:700;background:var(--accent)}
	#nav-toggle:checked~.nav-toggle span{background:transparent}
	#nav-toggle:checked~.nav-toggle span::before{top:0;transform:rotate(45deg);background:var(--on-accent)}
	#nav-toggle:checked~.nav-toggle span::after{top:0;transform:rotate(-45deg);background:var(--on-accent)}
	.primary-nav ul{flex-direction:column;align-items:stretch;gap:.1rem}
	.primary-nav a{color:#fff;font-size:1.12rem;padding:.85rem .4rem;border-bottom:1px solid rgba(255,255,255,.12)}
	.primary-nav a:hover,.primary-nav .current-menu-item>a{background:transparent;color:var(--accent-2)}
	.primary-nav .sub-menu{display:flex;position:static;min-width:0;background:transparent;border:0;box-shadow:none;padding:0 0 0 1rem}
	.primary-nav .sub-menu a{font-size:1rem;color:#C9D1D9}
}

/* -------------------------------------------------------------------------
 * 7. Hero
 * ---------------------------------------------------------------------- */
.hero{position:relative;background:var(--brand);color:#D5DBE1;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__bg::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,rgba(10,10,61,.94) 0%,rgba(10,10,61,.86) 46%,rgba(10,10,61,.62) 100%)}
/* Vertical padding only. A padding shorthand here would wipe out the side padding
   inherited from .wrap and pull the hero text left of the logo and the cards. */
.hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:center;padding-top:clamp(3rem,7vw,5.4rem);padding-bottom:clamp(3rem,7vw,5.4rem)}
.hero h1{color:#fff;margin-bottom:1rem}
.hero__sub{font-size:1.12rem;color:#C9D1D9;max-width:56ch;margin-bottom:1.6rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.8rem}
.hero__chips{display:flex;flex-wrap:wrap;gap:.5rem .6rem;list-style:none;margin:0;padding:0}
.hero__chips li{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.45rem .95rem;font-size:.87rem;font-weight:500;color:#E7ECF1;margin:0}
.hero__chips svg{color:var(--accent)}
/* Single column heroes keep the full wrap width so their left edge lines up with
   the logo in the header. Cap the text itself, never the container. */
.hero--inner .hero__inner{grid-template-columns:1fr;padding-top:clamp(2.6rem,6vw,4.4rem);padding-bottom:clamp(2.6rem,6vw,4.4rem)}
.hero--inner h1{max-width:20ch}
.hero--inner .hero__sub{max-width:58ch}
.hero--single .hero__inner{grid-template-columns:1fr}
.hero--single h1{max-width:18ch}
.hero--single .hero__sub{max-width:58ch}
.hero--single .hero__bg::after{background:linear-gradient(100deg,rgba(10,10,61,.94) 0%,rgba(10,10,61,.82) 55%,rgba(10,10,61,.55) 100%)}
.hero--inner .hero__sub{margin-bottom:1.4rem}

/* Hero quote card */
.quote-card{background:#fff;border-radius:var(--radius-lg);padding:clamp(1.4rem,2.6vw,2rem);box-shadow:var(--shadow-lg);color:var(--body)}
.quote-card h2{font-size:1.35rem;margin-bottom:.3rem}
.quote-card__note{font-size:.9rem;color:var(--muted);margin-bottom:1.1rem}

/* -------------------------------------------------------------------------
 * 8. Cards, services, features
 * ---------------------------------------------------------------------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--speed),box-shadow var(--speed),border-color var(--speed)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#D2CEC4}
.card__body{padding:1.35rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.card__body h3{margin-bottom:.5rem}
.card__body p{font-size:.97rem;margin-bottom:1rem}
.card__link{margin-top:auto;font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--brand);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.card__link:hover{color:var(--accent)}
.card__link svg{transition:transform var(--speed)}
.card__link:hover svg{transform:translateX(3px)}

.feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem 1.5rem}
.feature__icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:var(--cream);color:var(--brand);margin-bottom:1rem}
.feature__icon svg{width:26px;height:26px}
.feature h3{font-size:1.12rem;margin-bottom:.45rem}
.feature p{font-size:.96rem;margin:0}
.section--dark .feature{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.section--dark .feature__icon{background:rgba(225,11,11,.18);color:var(--accent)}
.section--dark .feature p{color:#C0C9D2}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:1rem}
/* Light by default so the band still reads if the tone helper places it on a
   light section, with the dark treatment as an override. */
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.2rem;text-align:center}
.section--dark .stat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}
.stat__num{font-family:var(--font-display);font-weight:700;font-size:2.1rem;color:var(--accent);line-height:1;margin-bottom:.35rem}
.stat__label{font-size:.9rem;color:var(--body)}
.section--dark .stat__label{color:#C0C9D2}

.ticklist{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.55rem}
.ticklist li{display:flex;align-items:flex-start;gap:.6rem;margin:0;font-size:1rem}
.ticklist svg{color:var(--accent);margin-top:.32em;flex:none}
.ticklist--two{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}

/* -------------------------------------------------------------------------
 * 9. Image slots and placeholders
 * ---------------------------------------------------------------------- */
.imgslot{position:relative;display:block;background:var(--cream);border:2px dashed #CFCABE;border-radius:var(--radius-lg);overflow:hidden;min-height:220px}
.imgslot::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(10,10,61,.045) 0 12px,transparent 12px 24px)}
.imgslot__label{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:100%;min-height:220px;padding:1.4rem;text-align:center;font-family:var(--font-display);font-weight:600;font-size:.9rem;color:#857E70;letter-spacing:.02em}
.imgslot--filled{border:0;background:none}
.imgslot--filled::before{display:none}
.imgslot--filled img{width:100%;height:100%;object-fit:cover}
.imgslot--ratio{aspect-ratio:4/3}
.imgslot--wide{aspect-ratio:16/10}
.imgslot--square{aspect-ratio:1/1}
.card .imgslot{border-radius:0;border-width:0 0 2px 0;min-height:0;aspect-ratio:16/10}
.card .imgslot__label{min-height:0;height:100%}

/* -------------------------------------------------------------------------
 * 10. Split sections
 * ---------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.split--reverse .split__media{order:2}
.split--solo{grid-template-columns:1fr;max-width:760px}
.split__body h2{margin-bottom:1rem}

/* -------------------------------------------------------------------------
 * 11. Reviews
 * ---------------------------------------------------------------------- */
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem 1.5rem;display:flex;flex-direction:column}
.review__stars{display:flex;gap:.15rem;color:var(--accent);margin-bottom:.9rem}
.review__stars svg{width:18px;height:18px}
.review__text{font-size:1rem;margin-bottom:1.2rem}
.review__who{display:flex;align-items:center;gap:.75rem;margin-top:auto}
.review__avatar{width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none;background:var(--cream);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;color:var(--brand)}
.review__avatar img{width:100%;height:100%;object-fit:cover}
.review__name{display:block;font-family:var(--font-display);font-weight:700;color:var(--ink);line-height:1.3}
.review__meta{display:block;font-size:.87rem;color:var(--muted);line-height:1.4}
.notice-box{background:var(--cream);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius);padding:1.2rem 1.4rem}
.notice-box p:last-child{margin-bottom:0}

/* -------------------------------------------------------------------------
 * 12. Areas
 * ---------------------------------------------------------------------- */
.arealist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:.7rem}
.arealist li{margin:0}
.arealist a{display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.85rem 1.05rem;font-family:var(--font-display);font-weight:600;font-size:.97rem;text-decoration:none;color:var(--ink);transition:border-color var(--speed),transform var(--speed)}
.arealist a:hover{border-color:var(--accent);transform:translateY(-2px)}
.arealist svg{color:var(--accent);flex:none}

/* -------------------------------------------------------------------------
 * 13. Forms
 * ---------------------------------------------------------------------- */
.form-row{margin-bottom:1rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.form label{display:block;font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--ink);margin-bottom:.35rem}
.form .req{color:#B3261E}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{width:100%;font-family:var(--font-body);font-size:1rem;color:var(--ink);background:#fff;border:1px solid #CFCABE;border-radius:11px;padding:.8rem .9rem;transition:border-color var(--speed),box-shadow var(--speed)}
.form textarea{min-height:130px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,166,35,.22);outline:none}
.form input[aria-invalid=true],.form textarea[aria-invalid=true],.form select[aria-invalid=true]{border-color:#B3261E;background:#FDF6F5}
.form .field-error{display:block;color:#8C1D18;font-size:.86rem;font-weight:500;margin-top:.3rem}
.form-consent{display:flex;gap:.65rem;align-items:flex-start;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:.95rem 1.05rem;margin-bottom:1.1rem}
.form-consent input[type=checkbox]{margin-top:.25rem;width:20px;height:20px;flex:none;accent-color:var(--accent)}
.form-consent label{font-family:var(--font-body);font-weight:400;font-size:.88rem;line-height:1.55;color:var(--body);margin:0}
.form-consent a{color:var(--brand);font-weight:600}
.form-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.83rem;color:var(--muted);margin:.85rem 0 0}
.form-alert{border-radius:var(--radius);padding:1rem 1.2rem;margin-bottom:1.2rem;font-size:.96rem}
.form-alert--ok{background:#EAF6EC;border:1px solid #B7DFC0;color:#14532D}
.form-alert--bad{background:#FDECEA;border:1px solid #F3C2BC;color:#8C1D18}
.form-alert p:last-child{margin-bottom:0}
.section--dark .form label{color:#fff}

/* -------------------------------------------------------------------------
 * 14. CTA band and contact strip
 * ---------------------------------------------------------------------- */
/* Full width band. The colour lives on the section, the grid on the inner wrap,
   so the text keeps the same left edge as the logo and every other section. */
.ctaband__inner{display:grid;grid-template-columns:1.3fr .7fr;gap:1.6rem;align-items:center}
/* Light band so it reads as its own block rather than running into the navy
   footer. The rule on top keeps it separate from a cream section above it. */
.ctaband{border-top:1px solid var(--line)}
.ctaband h2{color:var(--ink);margin-bottom:.6rem}
.ctaband.section--dark h2{color:#fff}
.ctaband.section--dark p{color:#C9D1D9}
.ctaband p{margin:0;color:var(--body)}
.ctaband__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:flex-end}
/* Contact details as one divided band rather than four floating cards. Rules
   between the columns, nothing boxed, so it reads as a single row of facts. */
.contactbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(248px,100%),1fr));gap:0;list-style:none;margin:0;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contactbar li{margin:0;padding:1.7rem 1.9rem;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:.5rem}
.contactbar li:first-child{border-left:0;padding-left:0}
.contactbar li:last-child{padding-right:0}
.contactbar__label{display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.contactbar__label svg{color:var(--accent);width:1.05em;height:1.05em;flex:none}
.contactbar__value{font-family:var(--font-display);font-weight:600;font-size:1.14rem;color:var(--ink);text-decoration:none;line-height:1.4}
/* The address stays on one line. The size steps down with the viewport so it
   still fits the column at the narrower desktop widths. */
.contactbar__value--email{font-size:clamp(.8rem,1.05vw,.98rem);white-space:nowrap;overflow-wrap:normal;word-break:normal}
/* Below this the column is narrower than the address, so let it use the break
   after the @ rather than run off the screen. */
@media (max-width:380px){.contactbar__value--email{white-space:normal}}
.contactbar__value--small{font-family:var(--font-body);font-weight:400;font-size:.95rem;color:var(--body)}
.contactbar__value--small span{display:block}
a.contactbar__value:hover{color:var(--accent)}
@media(max-width:980px){
	.contactbar li{padding:1.4rem 0;border-left:0;border-top:1px solid var(--line)}
	.contactbar li:first-child{border-top:0}
	.contactbar li:last-child{padding-bottom:0}
}

/* -------------------------------------------------------------------------
 * 15. Breadcrumbs, blog, pagination
 * ---------------------------------------------------------------------- */
.crumbs{font-size:.86rem;color:var(--muted);padding:.9rem 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.crumbs li{margin:0;display:flex;align-items:center;gap:.4rem}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--brand);text-decoration:underline}
.crumbs li+li::before{content:'/';color:#B9B4A8}

.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem 1.5rem;display:flex;flex-direction:column}
.post-card h3{margin-bottom:.5rem;font-size:1.2rem}
.post-card h3 a{text-decoration:none}
.post-card__meta{font-size:.85rem;color:var(--muted);margin-bottom:.7rem}
.post-card p{font-size:.97rem}
.entry-content{max-width:820px}
.entry-content h2{margin-top:2.2rem}
.entry-content h3{margin-top:1.8rem}
.entry-content ul li::marker{color:var(--accent)}
.pagination{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:2.4rem}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 .6rem;border:1px solid var(--line);border-radius:11px;text-decoration:none;font-family:var(--font-display);font-weight:600}
.pagination .current,.pagination .page-numbers:hover{background:var(--brand);border-color:var(--brand);color:#fff}

/* -------------------------------------------------------------------------
 * 16. FAQ
 * ---------------------------------------------------------------------- */
.faq{border:1px solid var(--line);border-radius:var(--radius);background:#fff;margin-bottom:.75rem;overflow:hidden}
.faq summary{cursor:pointer;padding:1.1rem 1.3rem;font-family:var(--font-display);font-weight:600;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:1.4rem;color:var(--accent);line-height:1}
.faq[open] summary::after{content:'\2212'}
.faq__body{padding:0 1.3rem 1.2rem}
.faq__body p:last-child{margin-bottom:0}

/* -------------------------------------------------------------------------
 * 17. Footer
 * ---------------------------------------------------------------------- */
.site-footer{background:var(--brand);color:#AFB8C1;padding:clamp(2.8rem,6vw,4.4rem) 0 0;font-size:.95rem}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(1.6rem,3vw,2.6rem);padding-bottom:2.6rem}
.footer__brand .site-logo{margin-bottom:1rem}
.footer__brand img{max-height:60px;width:auto;margin-bottom:1rem}
.site-footer h4{color:#fff;font-size:.83rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:1.1rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0 0 .55rem}
.site-footer a{color:#AFB8C1;text-decoration:none}
.site-footer a:hover{color:var(--accent-2);text-decoration:underline}
.footer__contact li{display:flex;gap:.6rem;align-items:flex-start}
.footer__contact svg{color:var(--accent);flex:none;margin-top:.28em}
.footer__badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.footer__badges span{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.35rem .8rem;font-size:.8rem;color:#D5DBE1}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12);padding:1.3rem 0 5.2rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;justify-content:space-between;font-size:.86rem}
.footer__legal{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;align-items:center}

/* -------------------------------------------------------------------------
 * 18. Sticky mobile action bar
 * ---------------------------------------------------------------------- */
.mobilebar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:450;background:var(--brand);border-top:1px solid rgba(255,255,255,.14);padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom));gap:.6rem}
.mobilebar .btn{flex:1 1 0;padding:.85rem .8rem;font-size:.95rem}
@media (max-width:820px){
	.mobilebar{display:flex}
	/* No call to action in the header on a phone. The sticky bar at the bottom
	   already carries call and quote, and the header is left with the logo and
	   the menu button, which is all it needs at this width. */
	.header__actions{display:none}
	.nav-toggle{margin-left:auto}
}

/* -------------------------------------------------------------------------
 * 19. Cookie consent banner
 * ---------------------------------------------------------------------- */
.ssur-cookie{position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--brand);color:#D5DBE1;box-shadow:0 -8px 34px rgba(0,0,0,.3);max-height:100vh;overflow-y:auto}
.ssur-cookie[hidden]{display:none}
.ssur-cookie__inner{max-width:var(--wrap);margin:0 auto;padding:clamp(1.2rem,3vw,1.8rem) clamp(1.2rem,4vw,2rem)}
.ssur-cookie__title{font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:#fff;margin:0 0 .4rem}
.ssur-cookie__body{margin:0 0 1.1rem;font-size:.93rem;line-height:1.62;max-width:78ch}
.ssur-cookie__body a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
.ssur-cookie__actions{display:flex;flex-wrap:wrap;gap:.7rem}
.ssur-cookie__btn{font-family:var(--font-display);font-weight:700;font-size:.95rem;line-height:1;padding:.9rem 1.5rem;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:background var(--speed),color var(--speed),border-color var(--speed)}
.ssur-cookie__btn--accept{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.ssur-cookie__btn--accept:hover{background:var(--accent);border-color:var(--accent);filter:brightness(.9)}
.ssur-cookie__btn--reject{background:#fff;color:var(--brand);border-color:#fff}
.ssur-cookie__btn--reject:hover{background:#E7ECF1;border-color:#E7ECF1}
.ssur-cookie__btn--manage{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.ssur-cookie__btn--manage:hover{background:rgba(255,255,255,.1)}
.ssur-cookie__panel{margin:1.3rem 0 0;border-top:1px solid rgba(255,255,255,.15);padding-top:1.2rem}
.ssur-cookie__panel[hidden]{display:none}
.ssur-cookie__cat{display:flex;gap:.9rem;align-items:flex-start;padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
.ssur-cookie__cat:last-of-type{border-bottom:0}
.ssur-cookie__cat input[type=checkbox]{width:22px;height:22px;margin-top:.15rem;flex:none;accent-color:var(--accent)}
.ssur-cookie__cat strong{display:block;color:#fff;font-family:var(--font-display);font-size:.98rem;margin-bottom:.2rem}
.ssur-cookie__cat span{font-size:.88rem;color:#B7C0C9}
.ssur-cookie__cat--locked input{opacity:.6}
.ssur-cookie-open{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-decoration:none}
.ssur-cookie-open:hover{color:var(--accent-2);text-decoration:underline}

/* -------------------------------------------------------------------------
 * 20. Responsive
 * ---------------------------------------------------------------------- */
@media (max-width:980px){
	.hero__inner{grid-template-columns:1fr}
	.split{grid-template-columns:1fr}
	.split--reverse .split__media{order:0}
	.ctaband__inner{grid-template-columns:1fr}
	.ctaband__actions{justify-content:flex-start}
	.footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
	.topbar__points{display:none}
	.topbar__inner{justify-content:center}
	.form-grid{grid-template-columns:1fr}
	.footer__grid{grid-template-columns:1fr}
	.footer__bottom{flex-direction:column;align-items:flex-start}
	.ssur-cookie__actions .ssur-cookie__btn{flex:1 1 100%;text-align:center}
}
@media (max-width:520px){
	.hero__cta .btn{width:100%}
}

/* -------------------------------------------------------------------------
 * 21. WordPress core classes
 * ---------------------------------------------------------------------- */
.alignleft{float:left;margin:.4rem 1.4rem 1rem 0}
.alignright{float:right;margin:.4rem 0 1rem 1.4rem}
.aligncenter{display:block;margin:0 auto 1.4rem}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:.86rem;color:var(--muted);text-align:center}
.sticky,.gallery-caption,.bypostauthor{display:block}