/*
Theme Name: Williamson Scaffolding
Theme URI: https://www.williamsonscaffolding.co.uk/
Author: Welch Marketing
Author URI: https://www.welchmarketing.co.uk
Description: Premium, plugin free WordPress theme built for Williamson Scaffolding Ltd. Self building pages and menus, a full settings panel, lead capture with webhook delivery, schema, local SEO pages, GDPR cookie consent and WCAG 2.2 AA accessibility.
Version: 1.1.5
Requires at least: 6.0
Tested up to: 6.6
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: williamson-scaffolding
*/

/* -------------------------------------------------------------------------
 * Self hosted fonts. Nothing is requested from a third party, so no external
 * call is made before the visitor has given cookie consent.
 * ---------------------------------------------------------------------- */
@font-face{font-family:'DM Sans';src:url('assets/fonts/dm-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('assets/fonts/dm-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('assets/fonts/dm-sans-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/inter-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* -------------------------------------------------------------------------
 * Tokens. The three brand colours are also printed inline from the settings
 * panel, so these are the fallbacks if that style block is ever missing.
 * ---------------------------------------------------------------------- */
:root{
	--brand:#1C2733;
	--brand-2:#33404C;
	--brand-deep:#161F29;
	--accent:#F77E39;
	--accent-2:#D46424;
	--ink:#16191C;
	--muted:#5B6875;
	--cream:#F7F5F2;
	--sand:#EFEBE5;
	--line:#E2DED8;
	--white:#FFFFFF;
	--wrap:1200px;
	--font-display:'DM Sans','Segoe UI',Arial,sans-serif;
	--font-body:'Inter','Segoe UI',Arial,sans-serif;
	--speed:.2s;
	--radius:14px;
	--shadow:0 18px 44px rgba(22,31,41,.10);
	--bar-h:60px;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
	margin:0;
	background:var(--white);
	color:var(--ink);
	font-family:var(--font-body);
	font-size:1.0625rem;
	line-height:1.7;
	-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
/* A long unbroken string, typically an email address or a URL in body copy,
   would otherwise push the layout wider than a narrow phone screen. */
body{overflow-wrap:break-word}
h1,h2,h3,h4{overflow-wrap:break-word}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.16;margin:0 0 .6em;color:var(--brand);letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:700}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700}
h3{font-size:clamp(1.15rem,1.8vw,1.4rem);font-weight:700}
p{margin:0 0 1.1em}
a{color:var(--accent-2);text-underline-offset:3px}
a:hover{color:var(--brand)}
ul,ol{padding-left:1.15rem}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
strong{font-weight:700}

/* Icons carry their own intrinsic size, so a missing stylesheet can never
   leave a page of giant stacked icons. */
.icon{width:1em;height:1em;display:inline-block;flex:none;vertical-align:-.125em;fill:currentColor}
.brandmark{display:block;height:auto}

/* -------------------------------------------------------------------------
 * Accessibility
 * ---------------------------------------------------------------------- */
.skip-link{
	position:absolute;left:-9999px;top:0;z-index:1000;
	background:var(--accent);color:#20160A;font-family:var(--font-display);font-weight:700;
	padding:.9rem 1.4rem;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:3px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* -------------------------------------------------------------------------
 * Layout
 * ---------------------------------------------------------------------- */
.page-shell{overflow:clip}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.site-main{display:block}

.section{padding:clamp(3.4rem,7vw,5rem) 0}
.tone-white{background:var(--white)}
.tone-light{background:var(--cream)}
.tone-sand{background:var(--sand)}
.tone-dark{background:var(--brand);color:#DFE6EC}
.tone-dark h2,.tone-dark h3{color:#fff}
.tone-dark a{color:var(--accent)}

/* Two sections sharing a background must not stack their padding. */
.tone-white + .tone-white,
.tone-light + .tone-light,
.tone-sand + .tone-sand,
.tone-dark + .tone-dark{padding-top:0}

/* A capped reading column starts on the same left line as the page heading,
   so the wrapper keeps its full width and centring and only its children are
   capped and pulled left. */
.wrap.narrow > *{max-width:48rem;margin-left:0;margin-right:auto}

.shead{max-width:46rem;margin:0 0 clamp(1.8rem,3vw,2.6rem)}
.shead--centre{margin-inline:auto;text-align:center}
.shead__title{margin-bottom:.45em}
.shead__lead{color:var(--muted);font-size:1.08rem;margin:0}
.tone-dark .shead__lead{color:#B7C4D0}
.eyebrow{
	font-family:var(--font-display);font-weight:700;font-size:.78rem;
	letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin:0 0 .8rem;
}
.tone-dark .eyebrow{color:var(--accent)}

/* -------------------------------------------------------------------------
 * 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;
	padding:1.05rem 1.7rem;border-radius:999px;border:2px solid transparent;
	text-decoration:none;cursor:pointer;white-space:nowrap;
	transition:background var(--speed),color var(--speed),border-color var(--speed),transform var(--speed);
}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:1.05em;height:1.05em}
.btn--accent{background:var(--accent);color:#20160A}
.btn--accent:hover{background:var(--accent-2);color:#fff}
.btn--ghost{background:transparent;color:var(--brand);border-color:rgba(28,39,51,.28)}
.btn--ghost:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.tone-dark .btn--ghost,.hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.42)}
.tone-dark .btn--ghost:hover,.hero .btn--ghost:hover{background:#fff;color:var(--brand);border-color:#fff}
.btn--sm{padding:.75rem 1.15rem;font-size:.92rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem}

/* -------------------------------------------------------------------------
 * Top bar and header
 * ---------------------------------------------------------------------- */
.topbar{background:var(--brand-deep);color:#B9C6D2;font-size:.86rem}
.topbar__inner{display:flex;flex-wrap:wrap;gap:.4rem 2rem;padding:.6rem 0;align-items:center}
.topbar__item{margin:0;display:flex;align-items:center;gap:.45rem}
.topbar__item a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:.45rem}
.topbar__item a:hover{color:var(--accent)}
.topbar svg{color:var(--accent)}

.site-header{
	position:sticky;top:0;z-index:80;
	background:rgba(255,255,255,.94);
	border-bottom:1px solid var(--line);
	backdrop-filter:saturate(160%) blur(10px);
}
.site-header__inner{display:flex;align-items:center;gap:1.5rem;padding:.85rem 0;position:relative}
.brand{display:block;flex:none;text-decoration:none}
.brand__img{max-height:56px;width:auto}
.site-header__cta{display:flex;gap:.6rem;margin-left:auto;flex:none}

.primary-nav{margin-left:auto}
.primary-nav__list{display:flex;align-items:center;gap:.2rem;list-style:none;margin:0;padding:0}
.primary-nav a{
	display:block;padding:.6rem .8rem;border-radius:8px;white-space:nowrap;
	font-family:var(--font-display);font-weight:600;font-size:.98rem;
	color:var(--brand);text-decoration:none;transition:background var(--speed),color var(--speed);
}
.primary-nav a:hover,.primary-nav .current-menu-item > a,.primary-nav .current-menu-ancestor > a{background:var(--cream);color:var(--accent-2)}
.primary-nav .menu-item-has-children{position:relative}
.primary-nav .sub-menu{
	position:absolute;left:0;top:100%;min-width:min(264px,100%);max-width:100vw;
	background:#fff;border:1px solid var(--line);border-radius:12px;
	box-shadow:var(--shadow);list-style:none;margin:0;padding:.4rem;
	opacity:0;visibility:hidden;transform:translateY(6px);transition:all var(--speed);
}
.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none}
.primary-nav .sub-menu a{font-weight:500;white-space:normal}

/* The toggle is a real checkbox, kept focusable rather than hidden, so it can
   be reached and operated with the keyboard alone. */
.nav-toggle-input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.nav-toggle-input:focus-visible ~ .nav-toggle{outline:3px solid var(--accent);outline-offset:3px}
.nav-toggle{display:none;align-items:center;gap:.55rem;margin-left:auto;cursor:pointer;
	font-family:var(--font-display);font-weight:700;color:var(--brand);
	border:2px solid var(--line);border-radius:999px;padding:.6rem 1rem}
.nav-toggle__bars,.nav-toggle__bars::before,.nav-toggle__bars::after{
	display:block;width:20px;height:2px;background:var(--brand);position:relative;content:''}
.nav-toggle__bars::before{position:absolute;top:-6px}
.nav-toggle__bars::after{position:absolute;top:6px}

/* -------------------------------------------------------------------------
 * Hero. Headline, supporting line and a single call to action. No form here.
 * ---------------------------------------------------------------------- */
.hero{position:relative;background:var(--brand);color:#DDE5EC;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover}
/* One overlay, not two. It is heaviest on the left where the headline sits, so
   white text keeps well clear of the 4.5 to 1 contrast minimum, then eases off
   to the right so the photograph is actually visible. */
.hero::after{
	content:'';position:absolute;inset:0;z-index:1;
	background:linear-gradient(100deg,
		rgba(28,39,51,.95) 0%,
		rgba(28,39,51,.93) 45%,
		rgba(28,39,51,.58) 70%,
		rgba(28,39,51,.32) 100%);
}
/* The cap goes on the children, never on the element carrying .wrap. Capping
   the wrapper itself narrows the container and its own centring then pushes
   the left edge inwards, so the headline no longer lines up with the logo or
   with the inner page headers. */
.hero__inner{position:relative;z-index:2;padding:clamp(3.6rem,8vw,6.4rem) 0 clamp(3rem,6vw,5rem)}
.hero__inner > *{max-width:56rem;margin-left:0;margin-right:auto}
.hero h1{color:#fff;margin-bottom:.5em}
.hero__sub{font-size:clamp(1.02rem,1.5vw,1.2rem);color:#C6D2DE;max-width:44rem;margin-bottom:2rem}
.hero .eyebrow{color:var(--accent)}
/* The strip runs the full width across the lighter end of the gradient, so it
   carries its own backing to keep its text readable over the photograph. */
.hero__strip{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.16);background:rgba(20,29,38,.86)}
.hero__strip ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem 2.2rem;list-style:none;margin:0;padding:1.1rem 0}
.hero__strip li{display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:600;font-size:.94rem;color:#E4EAF0}
.hero__strip svg{color:var(--accent)}

/* Inner page header */
.page-head{background:var(--brand);color:#D7E0E8;position:relative;overflow:hidden}
.page-head::after{
	content:'';position:absolute;inset:0;
	background:linear-gradient(100deg,
		rgba(28,39,51,.95) 0%,
		rgba(28,39,51,.91) 48%,
		rgba(28,39,51,.58) 74%,
		rgba(28,39,51,.34) 100%);
}
.page-head__bg{position:absolute;inset:0}
.page-head__bg img{width:100%;height:100%;object-fit:cover}
.page-head__inner{position:relative;z-index:2;padding:clamp(2.6rem,5vw,4.2rem) 0}
.page-head h1{color:#fff;margin-bottom:.35em;max-width:24ch}
.page-head__lead{color:#BECBD7;max-width:44rem;font-size:1.08rem;margin:0}

.crumbs{margin:0 0 1.2rem;font-size:.86rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;margin:0;padding:0}
.crumbs li+li::before{content:'/';margin-right:.3rem;opacity:.5}
.crumbs a{color:#BECBD7;text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:#fff}

/* -------------------------------------------------------------------------
 * Cards. The flex chain must stay unbroken or the read more links stop
 * sharing a baseline across the row.
 * ---------------------------------------------------------------------- */
.grid{display:grid;gap:1.4rem}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}

.card{
	background:#fff;border:1px solid var(--line);border-radius:var(--radius);
	padding:1.7rem;text-decoration:none;color:inherit;height:100%;
	transition:transform var(--speed),box-shadow var(--speed),border-color var(--speed);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(247,126,57,.5)}
.card__link{display:flex;flex-direction:column}
.card__body{display:flex;flex-direction:column;flex:1 1 auto}
.card__media{flex:none;margin:0 0 1.1rem}
.card__icon{
	display:inline-flex;align-items:center;justify-content:center;
	width:52px;height:52px;border-radius:12px;background:var(--cream);color:var(--accent-2);font-size:1.5rem;
}
.card__title{display:block;font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--brand);margin:0 0 .5rem}
.card__text{display:block;color:var(--muted);font-size:.98rem;margin:0 0 1.2rem}
.card__more{
	margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;
	font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--accent-2);
}
.card:hover .card__more{gap:.65rem}
.tone-light .card{background:#fff}

/* Photo card. The image runs to the card edges and the icon sits on it as a
   badge, so the padding moves from the card onto the body. The media stays
   flex:none, which keeps the read more links on a shared baseline. */
.card--photo{padding:0;overflow:hidden}
.card--photo .card__media{margin:0;position:relative;display:block}
.card--photo .imgslot{border:0;border-radius:0;aspect-ratio:4/3}
.card--photo .imgslot__mark{font-size:2.8rem}
.card--photo .card__icon{
	position:absolute;left:1.3rem;bottom:-26px;z-index:2;
	width:52px;height:52px;background:#fff;color:var(--accent-2);
	box-shadow:0 8px 20px rgba(22,31,41,.18);border-radius:14px;
}
.card--photo .card__body{padding:2.5rem 1.7rem 1.7rem}

/* Feature list, ticks */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.ticks li{display:flex;gap:.7rem;align-items:flex-start;line-height:1.55}
.ticks svg{color:var(--accent-2);margin-top:.28em;font-size:1.05rem}
.tone-dark .ticks svg{color:var(--accent)}

/* Split layout: text next to an image */
.split{display:grid;gap:clamp(1.8rem,4vw,3.4rem);align-items:center;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.split--flip .split__media{order:-1}

/* Image slots */
.imgslot{
	position:relative;border-radius:var(--radius);overflow:hidden;
	background:
		repeating-linear-gradient(135deg,var(--sand) 0 14px,var(--cream) 14px 28px);
	border:2px dashed var(--line);
	display:flex;align-items:center;justify-content:center;
	aspect-ratio:4/3;
}
.imgslot__mark{font-size:2.4rem;color:rgba(28,39,51,.22)}
.imgslot--filled{border:0;background:none}
.imgslot img{width:100%;height:100%;object-fit:cover}
.imgslot--tall{aspect-ratio:3/4}
.imgslot--wide{aspect-ratio:16/9}
.imgslot--square{aspect-ratio:1}

/* A slot used as a full bleed background fills its container instead of
   holding a ratio, and drops the placeholder frame so an empty hero reads as
   solid brand colour rather than an outlined box. */
.hero__bg .imgslot,.page-head__bg .imgslot{
	width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;background:none;
}
.hero__bg .imgslot__mark,.page-head__bg .imgslot__mark{display:none}

/* Stats and trust */
.trust-row{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.trust{display:flex;gap:.8rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.2rem}
.trust svg{color:var(--accent-2);font-size:1.35rem;flex:none;margin-top:.1em}
.trust b{display:block;font-family:var(--font-display);color:var(--brand)}

/* Why choose us */
.why{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.why__item{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:1.6rem}
.why__item h3{font-size:1.14rem;margin-bottom:.5rem;display:flex;align-items:center;gap:.6rem}
.why__item h3 svg{color:var(--accent)}
.why__item p{margin:0;color:#B7C4D0;font-size:.97rem}

/* Reviews */
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;display:flex;flex-direction:column;height:100%}
.review__body{display:flex;flex-direction:column;flex:1 1 auto}
.review__stars{display:flex;gap:.15rem;color:var(--accent);font-size:1.05rem;margin:0 0 .9rem}
.review__text{color:var(--ink);margin:0 0 1.3rem}
.review__who{margin-top:auto;display:flex;align-items:center;gap:.8rem;padding-top:1rem;border-top:1px solid var(--line)}
.review__who .imgslot{width:46px;height:46px;flex:none;border-radius:50%;aspect-ratio:1}
.review__initial{
	width:46px;height:46px;flex:none;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	background:var(--brand);color:#fff;
	font-family:var(--font-display);font-weight:700;font-size:1.15rem;
}
.review__who b{display:block;font-family:var(--font-display);color:var(--brand)}
.review__who span{font-size:.88rem;color:var(--muted)}
.reviews-empty{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2rem;max-width:48rem}

/* FAQ */
.faq{max-width:52rem}
.faq details{border:1px solid var(--line);border-radius:12px;background:#fff;margin:0 0 .8rem;overflow:hidden}
.faq summary{
	cursor:pointer;list-style:none;padding:1.1rem 1.3rem;
	font-family:var(--font-display);font-weight:700;color:var(--brand);
	display:flex;justify-content:space-between;gap:1rem;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--accent-2);font-size:1.4rem;line-height:1;flex:none}
.faq details[open] summary::after{content:'\2013'}
.faq details > div{padding:0 1.3rem 1.2rem;color:var(--muted)}

/* Area chips */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0;padding:0}
.chips a{
	display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--line);
	border-radius:999px;padding:.6rem 1.05rem;text-decoration:none;color:var(--brand);
	font-family:var(--font-display);font-weight:600;font-size:.93rem;transition:all var(--speed);
}
.chips a:hover{background:var(--brand);color:#fff;border-color:var(--brand)}

/* Gallery */
.gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}

/* Video block. The file is self hosted, so nothing third party is contacted
   and no cookie is set before the visitor has answered the banner. */
.videoblock{margin:0;position:relative}
.videoblock__player{
	display:block;width:100%;height:auto;background:var(--brand);
	border-radius:var(--radius);box-shadow:var(--shadow);
}
.videoblock__player:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* Caption line. The caption sits left and the pause control sits right, both
   at the same small size, so nothing is laid over the footage. */
.videoblock__meta{
	display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
	gap:.5rem 1.2rem;margin:.9rem 0 0;font-size:.88rem;
}
.videoblock__caption{color:var(--muted)}
.tone-dark .videoblock__caption{color:#B7C4D0}

/* A clip that plays on its own carries one control instead of a full bar, so
   the picture is not cut across the bottom. Belt and braces: the native bar is
   hidden in WebKit too, in case a browser draws it anyway. */
.videoblock--simple .videoblock__player::-webkit-media-controls{display:none !important}
.videoblock--simple .videoblock__player::-webkit-media-controls-enclosure{display:none !important}
.videoblock__toggle{
	display:inline-flex;align-items:center;gap:.4rem;flex:none;
	background:none;border:0;padding:0;margin:0;cursor:pointer;
	font-family:var(--font-body);font-size:.88rem;color:var(--muted);
	transition:color var(--speed);
}
.videoblock__toggle:hover{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px}
.videoblock__toggle:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.tone-dark .videoblock__toggle{color:#B7C4D0}
.tone-dark .videoblock__toggle:hover{color:var(--accent)}
.videoblock__ico,.videoblock__word{display:none}
.videoblock__ico--play,.videoblock__word--play{display:inline}
.videoblock__ico--play{display:inline-block}
.videoblock.is-playing .videoblock__ico--play,
.videoblock.is-playing .videoblock__word--play{display:none}
.videoblock.is-playing .videoblock__ico--pause{display:inline-block}
.videoblock.is-playing .videoblock__word--pause{display:inline}

/* CTA band */
.band{background:var(--accent);color:#20160A}
.band__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem}
.band h2{color:#20160A;margin:0 0 .3rem;max-width:22ch}
.band p{margin:0;color:rgba(32,22,10,.82);max-width:44ch}
.band .btn--accent{background:var(--brand);color:#fff}
.band .btn--accent:hover{background:var(--brand-deep)}
.band .btn--ghost{color:#20160A;border-color:rgba(32,22,10,.4)}
.band .btn--ghost:hover{background:#20160A;color:#fff;border-color:#20160A}

/* -------------------------------------------------------------------------
 * Forms
 * ---------------------------------------------------------------------- */
.leadform{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.3rem);box-shadow:var(--shadow)}
.field-grid{display:grid;gap:0 1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.field{margin:0 0 1.15rem}
.field--wide{grid-column:1/-1}
.field label{display:block;font-family:var(--font-display);font-weight:600;color:var(--brand);margin:0 0 .4rem;font-size:.95rem}
.field .req{font-weight:400;color:var(--muted);font-size:.85rem}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{
	width:100%;padding:.85rem 1rem;border:2px solid var(--line);border-radius:10px;
	font-family:var(--font-body);font-size:1rem;color:var(--ink);background:#fff;
	transition:border-color var(--speed);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.field textarea{resize:vertical;min-height:120px}
.field--consent{display:flex;gap:.75rem;align-items:flex-start}
.field--consent input{margin-top:.35rem;width:20px;height:20px;flex:none;accent-color:var(--accent-2)}
.field--consent label{font-weight:400;font-family:var(--font-body);font-size:.95rem;color:var(--muted);margin:0}
.field-note{font-size:.86rem;color:var(--muted);margin:0 0 1.3rem}
.field-submit{margin:0}
.field-submit .btn{width:100%}

/* Honeypot. Hidden from people, still present for a bot to fill in. */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.notice{border-radius:12px;padding:1.1rem 1.3rem;margin:0 0 1.4rem;border:2px solid}
.notice__title{font-family:var(--font-display);font-weight:700;margin:0 0 .3rem}
.notice p:last-child{margin:0}
.notice ul{margin:.4rem 0 0}
.notice--ok{background:#EAF7EF;border-color:#2F7D4F;color:#14432A}
.notice--ok a{color:#14432A}
.notice--bad{background:#FDEDEA;border-color:#B3261E;color:#66150F}

/* -------------------------------------------------------------------------
 * Blog
 * ---------------------------------------------------------------------- */
.article{max-width:48rem}
.article h2{margin-top:2.2rem}
.article ul{margin:0 0 1.2rem}
.article li{margin:0 0 .5rem}
.post-meta{color:var(--muted);font-size:.9rem;margin:0 0 1.4rem}
.postlist{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.pagination{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:2.4rem}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--brand);font-family:var(--font-display);font-weight:600}
.pagination .current{background:var(--brand);color:#fff;border-color:var(--brand)}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */
.site-footer{background:var(--brand);color:#B7C4D0;padding:clamp(3rem,6vw,4.4rem) 0 0}
.site-footer__grid{display:grid;gap:2.4rem;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.site-footer__col--brand{grid-column:span 1}
.site-footer__about{margin:1.2rem 0 1.2rem;font-size:.95rem;max-width:34ch}
.site-footer__title{font-size:1rem;color:#fff;text-transform:uppercase;letter-spacing:.1em;margin:0 0 1rem}
.site-footer__list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:.95rem}
.site-footer__list a,.site-footer__list span{color:#B7C4D0;text-decoration:none;display:flex;align-items:flex-start;gap:.5rem}
.site-footer__list a:hover{color:var(--accent)}
.site-footer__list svg{color:var(--accent);margin-top:.28em;flex:none}
.footer-badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.footer-badges li{display:flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.4rem .85rem;font-size:.85rem;font-family:var(--font-display);font-weight:600;color:#E1E8EE}
.footer-badges svg{color:var(--accent)}
.site-footer__legal{
	display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:center;
	margin-top:clamp(2.4rem,5vw,3.4rem);padding:1.4rem 0;border-top:1px solid rgba(255,255,255,.14);
}
.site-footer__copy{margin:0;font-size:.87rem}
.legal-nav{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem}
.legal-nav__list{display:flex;flex-wrap:wrap;gap:1.2rem;list-style:none;margin:0;padding:0}
.legal-nav a{color:#B7C4D0;text-decoration:none;font-size:.87rem}
.legal-nav a:hover{color:var(--accent)}
.wsl-cookie-open{background:none;border:0;padding:0;margin:0;font:inherit;font-size:.87rem;color:#B7C4D0;cursor:pointer}
.wsl-cookie-open:hover{color:var(--accent);text-decoration:underline}

/* -------------------------------------------------------------------------
 * Sticky mobile call bar. Hidden while the hero's own call to action is on
 * screen, revealed once it scrolls away. The noscript rule in the footer
 * leaves it permanently visible if the script never runs, so a failure can
 * only ever show more call to action, never none.
 * ---------------------------------------------------------------------- */
.stickybar{
	position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
	background:var(--brand-deep);border-top:1px solid rgba(255,255,255,.12);
	padding:.55rem .7rem;gap:.6rem;
	transform:translateY(110%);transition:transform var(--speed);
}
.stickybar--on{transform:none}
.stickybar__btn{
	flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
	border-radius:999px;padding:.85rem 1rem;text-decoration:none;
	font-family:var(--font-display);font-weight:700;font-size:.98rem;
}
.stickybar__btn--call{background:var(--accent);color:#20160A}
.stickybar__btn--quote{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.34)}

/* -------------------------------------------------------------------------
 * Cookie consent banner
 * ---------------------------------------------------------------------- */
.wsl-cookie{position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--brand);color:#DCE4EB;box-shadow:0 -8px 34px rgba(0,0,0,.26);max-height:92vh;overflow-y:auto}
.wsl-cookie[hidden]{display:none}
.wsl-cookie__inner{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto;padding:clamp(1.2rem,3vw,1.7rem) 0;display:flex;flex-wrap:wrap;gap:1rem clamp(1.4rem,3vw,2.6rem);align-items:center}
.wsl-cookie__text{flex:1 1 340px}
.wsl-cookie__title{font-family:var(--font-display);font-weight:700;font-size:1.06rem;color:#fff;margin:0 0 .35rem}
.wsl-cookie__title:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.wsl-cookie__body{margin:0;font-size:.92rem;line-height:1.62;color:#BCC9D5}
.wsl-cookie__body a{color:var(--accent);text-decoration:underline}
.wsl-cookie__actions{display:flex;gap:.7rem;flex:0 0 auto;flex-wrap:wrap}
.wsl-cookie__btn{
	font-family:var(--font-display);font-weight:700;font-size:.94rem;line-height:1;
	padding:.85rem 1.5rem;border-radius:999px;border:2px solid transparent;cursor:pointer;
	transition:background var(--speed),color var(--speed),border-color var(--speed);
}
.wsl-cookie__btn--accept{background:var(--accent);color:#20160A}
.wsl-cookie__btn--accept:hover{background:var(--accent-2);color:#fff}
.wsl-cookie__btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.38)}
.wsl-cookie__btn--ghost:hover{background:#fff;color:var(--brand);border-color:#fff}
.wsl-cookie__prefs{flex:1 1 100%;border-top:1px solid rgba(255,255,255,.16);padding-top:1.2rem}
.wsl-cookie__prefs[hidden]{display:none}
.wsl-cookie__set{border:0;margin:0 0 1.1rem;padding:0}
.wsl-cookie__legend{font-family:var(--font-display);font-weight:700;color:#fff;padding:0;margin:0 0 .8rem;font-size:.95rem}
.wsl-cookie__row{display:flex;gap:.8rem;align-items:flex-start;padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.09)}
.wsl-cookie__row input{margin-top:.3rem;width:20px;height:20px;flex:none;accent-color:var(--accent)}
.wsl-cookie__cat{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:700;color:#fff;font-size:.95rem}
.wsl-cookie__always{font-size:.75rem;font-weight:600;background:rgba(255,255,255,.14);border-radius:999px;padding:.2rem .6rem;color:#DCE4EB}
.wsl-cookie__desc{display:block;font-size:.87rem;color:#AFBDCA;margin-top:.2rem;max-width:70ch}
.wsl-cookie__row label{cursor:pointer}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */
@media (max-width:1140px){
	/* The header's frosted effect would trap the fixed menu inside the header
	   box, so it is switched off at the widths where the menu is used. */
	.site-header{backdrop-filter:none;background:#fff}
	.nav-toggle{display:inline-flex}
	.site-header__cta{display:none}
	.topbar__item--hours{display:none}

	.primary-nav{
		display:none;position:fixed;inset:0;z-index:95;
		background:var(--brand);padding:5.6rem 1.5rem 3rem;
		overflow-y:auto;overscroll-behavior:contain;margin:0;
	}
	#nav-toggle:checked ~ .primary-nav{display:block}
	.primary-nav__list{flex-direction:column;align-items:stretch;gap:.15rem}
	.primary-nav a{color:#fff;font-size:1.12rem;padding:.85rem .4rem;border-radius:8px}
	.primary-nav a:hover,.primary-nav .current-menu-item > a{background:rgba(255,255,255,.09);color:var(--accent)}
	.primary-nav .sub-menu{
		position:static;opacity:1;visibility:visible;transform:none;
		background:transparent;border:0;box-shadow:none;padding:0 0 .4rem .9rem;min-width:0;
	}
	.primary-nav .sub-menu a{color:#B7C4D0;font-size:1rem;padding:.55rem .4rem}

	/* The label sits above the open panel so it can also close the menu. */
	.nav-toggle{position:relative;z-index:96}
	#nav-toggle:checked ~ .nav-toggle{color:#fff;border-color:rgba(255,255,255,.4)}
	#nav-toggle:checked ~ .nav-toggle .nav-toggle__bars,
	#nav-toggle:checked ~ .nav-toggle .nav-toggle__bars::before,
	#nav-toggle:checked ~ .nav-toggle .nav-toggle__bars::after{background:#fff}

	/* Freeze the page behind the open menu. Driven from the checkbox rather
	   than from JavaScript, so the lock can only exist while the menu is open. */
	html:has(#nav-toggle:checked){overflow:hidden}
	body:has(#nav-toggle:checked){overflow:hidden}

	/* The bar's height is reserved whether or not it is showing, so the page
	   does not jump when it slides in. */
	.stickybar{display:flex}
	body{padding-bottom:var(--bar-h)}
}

@media (max-width:900px){
	/* The headline runs the full width here, so the lighter right hand side of
	   the gradient would sit under text. Even it out instead. */
	.hero::after{background:linear-gradient(180deg,rgba(28,39,51,.90) 0%,rgba(28,39,51,.86) 60%,rgba(28,39,51,.90) 100%)}
	.page-head::after{background:rgba(28,39,51,.88)}
}

@media (max-width:720px){
	.topbar__inner{justify-content:center;text-align:center}
	.hero__inner{padding-top:2.8rem}
	.cta-row .btn{flex:1 1 100%}
	.band__inner{flex-direction:column;align-items:flex-start}
	.site-footer__legal{flex-direction:column;align-items:flex-start}
	.field-submit .btn{width:100%}
	.wsl-cookie__actions{flex:1 1 100%}
	.wsl-cookie__btn{flex:1 1 100%;text-align:center}
}