/*
Theme Name: Heart Roofing
Theme URI: https://www.heartroofingltd.co.uk/
Author: Welch Marketing Ltd
Author URI: https://www.welchmarketing.co.uk
Description: A complete, plugin free WordPress theme for Heart Roofing Ltd, roofers in Portsmouth. Builds its own pages, menus, legal content and lead capture on activation. Self hosted fonts, consent gated cookies, schema and local SEO pages built in.
Version: 1.1.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: heart-roofing
Tags: business, local-business, one-column, custom-menu, custom-logo, block-styles, wide-blocks, accessibility-ready
*/

/* -------------------------------------------------------------------------
 * Fonts, self hosted. Nothing is requested from a third party.
 * ---------------------------------------------------------------------- */
@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')}

/* -------------------------------------------------------------------------
 * Tokens
 * ---------------------------------------------------------------------- */
:root{
	--brand:#14241C;
	--brand-2:#1D3327;
	--accent:#34A139;
	--accent-ink:#1F7A26;
	--accent-soft:#E8F4E9;
	--ink:#16211B;
	--muted:#55635B;
	--cream:#F5F8F5;
	--line:#E1E8E2;
	--white:#fff;
	--font-display:'DM Sans','Segoe UI',system-ui,sans-serif;
	--font-body:'Inter','Segoe UI',system-ui,sans-serif;
	--wrap:1200px;
	--read:44rem;
	--r:14px;
	--r-sm:10px;
	--speed:.18s;
	--bar:56px;
	--shadow:0 2px 8px rgba(20,36,28,.05),0 12px 34px rgba(20,36,28,.07);
	--shadow-lg:0 20px 60px rgba(20,36,28,.16);
}

/* -------------------------------------------------------------------------
 * 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:1.0625rem;line-height:1.7;color:var(--ink);background:var(--white);padding-bottom:var(--bar);-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto}
img{display:block}
a{color:var(--accent-ink);text-underline-offset:3px}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.18;letter-spacing:-.02em;margin:0 0 .6em;color:var(--ink)}
h1{font-size:clamp(2.1rem,5vw,3.5rem)}
h2{font-size:clamp(1.65rem,3.4vw,2.5rem)}
h3{font-size:clamp(1.15rem,2vw,1.35rem)}
p{margin:0 0 1.1rem}
ul,ol{margin:0 0 1.1rem;padding-left:1.2rem}
blockquote{margin:0}
figure{margin:0}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
table{border-collapse:collapse;width:100%}

.icon{width:1em;height:1em;display:inline-block;flex:none;vertical-align:-.125em;fill:currentColor}

/* Accessibility */
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.tone-dark :focus-visible,.hero :focus-visible,.pagehero :focus-visible,.site-footer :focus-visible,.hrl-cookie :focus-visible{outline-color:#fff}
.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}
.skip-link{position:absolute;left:1rem;top:-100px;z-index:1000;background:var(--accent-ink);color:#fff;padding:.85rem 1.3rem;border-radius:0 0 var(--r-sm) var(--r-sm);font-family:var(--font-display);font-weight:700;text-decoration:none;transition:top var(--speed)}
.skip-link:focus{top:0;color:#fff}
.site-main:focus{outline:none}

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

/* -------------------------------------------------------------------------
 * Layout
 * ---------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.section{padding-block:clamp(3.2rem,7vw,5rem)}

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

.tone-light{background:var(--white);color:var(--ink)}
.tone-cream{background:var(--cream);color:var(--ink)}
.tone-dark{background:var(--brand);color:#DCE6DF}
.tone-dark h1,.tone-dark h2,.tone-dark h3{color:#fff}
/* Buttons carry their own colours, so the dark section link rule must not
   repaint them. Without :not(.btn) this rule outranks .btn--accent and puts
   green text on a green button. */
.tone-dark a:not(.btn){color:var(--accent)}
.tone-dark a:not(.btn):hover{color:#fff}

/* A capped reading column starts on the same left line as the hero. The
   wrapper keeps its full width and centring; only the children are capped. */
.wrap.narrow > *{max-width:var(--read);margin-left:0;margin-right:auto}

.eyebrow{font-family:var(--font-display);font-weight:700;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 .7rem}
.tone-dark .eyebrow{color:var(--accent)}

.secthead{max-width:52rem;margin:0 0 clamp(2rem,4vw,3rem)}
.secthead h2{margin-bottom:.5rem}
.secthead__text{color:var(--muted);font-size:1.08rem;margin:0}
.tone-dark .secthead__text{color:#B9C8BE}
.secthead--left{margin-left:0}

/* -------------------------------------------------------------------------
 * 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:1rem 1.7rem;border:2px solid transparent;border-radius:999px;text-decoration:none;cursor:pointer;transition:background var(--speed),color var(--speed),border-color var(--speed),transform var(--speed)}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:1.1em;height:1.1em}
.btn--accent{background:var(--accent-ink);color:#fff;border-color:var(--accent-ink)}
.btn--accent:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.btn--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn--outline:hover{background:#fff;color:var(--brand);border-color:#fff}
.btn--outline-ink{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--outline-ink:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--cream);color:var(--ink)}
.btn--sm{padding:.7rem 1.15rem;font-size:.92rem}
.btn--block{width:100%}
.btn--text{padding:0;border:0;background:none;color:var(--accent-ink);border-radius:0}
.btn--text:hover{transform:none;text-decoration:underline}

/* -------------------------------------------------------------------------
 * Top bar and header
 * ---------------------------------------------------------------------- */
.topbar{background:var(--brand-2);color:#C7D5CB;font-size:.85rem}
.topbar__inner{display:flex;flex-wrap:wrap;gap:.5rem 2rem;padding-block:.6rem;justify-content:center}
.topbar__item{display:flex;align-items:center;gap:.45rem;margin:0}
.topbar__item svg{color:var(--accent)}

.site-header{position:sticky;top:0;z-index:500;background:rgba(255,255,255,.94);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.site-header__inner{display:flex;align-items:center;gap:1.4rem;padding-block:.85rem}
.brand{display:inline-flex;align-items:center;text-decoration:none;flex:none}
.brand-logo{height:48px;width:auto}
.brand--footer .brand-logo{height:52px}

.nav-toggle-input{position:absolute;opacity:0;pointer-events:none}
.nav-toggle{display:none;align-items:center;gap:.55rem;margin-left:auto;font-family:var(--font-display);font-weight:700;font-size:.95rem;padding:.6rem .9rem;border:2px solid var(--line);border-radius:999px;cursor:pointer;background:#fff}
.nav-toggle__bars{position:relative;width:18px;height:12px;display:block}
.nav-toggle__bars span,.nav-toggle__bars::before,.nav-toggle__bars::after{content:'';position:absolute;left:0;right:0;height:2px;background:var(--ink);border-radius:2px}
.nav-toggle__bars::before{top:0}
.nav-toggle__bars span{top:5px}
.nav-toggle__bars::after{bottom:0}

.primary-nav{margin-left:auto}
.primary-nav__list{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.primary-nav a{display:block;white-space:nowrap;padding:.6rem .72rem;font-family:var(--font-display);font-weight:600;font-size:.97rem;color:var(--ink);text-decoration:none;border-radius:8px;transition:background var(--speed),color var(--speed)}
.primary-nav a:hover,.primary-nav .current-menu-item > a,.primary-nav .current_page_ancestor > a{background:var(--accent-soft);color:var(--accent-ink)}
.primary-nav .menu-item{position:relative}
.primary-nav .sub-menu{position:absolute;top:100%;left:0;min-width:270px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);list-style:none;margin:0;padding:.4rem;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--speed),transform var(--speed),visibility var(--speed)}
.primary-nav .menu-item:hover > .sub-menu,.primary-nav .menu-item:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none}
.primary-nav .sub-menu a{white-space:normal;font-weight:500}

.header-cta{display:flex;align-items:center;gap:.55rem;flex:none}

@media (max-width:1180px){
	/* A fixed menu is trapped inside any ancestor using backdrop-filter, so
	   the header effect is switched off at the widths where the menu lives. */
	.site-header{backdrop-filter:none;background:#fff}
	.nav-toggle{display:inline-flex}
	.header-cta{display:none}
	.primary-nav{display:none;position:fixed;inset:0;z-index:600;background:var(--brand);padding:5.5rem 1.4rem 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:0}
	.primary-nav a{color:#fff;font-size:1.12rem;padding:.85rem .4rem;border-bottom:1px solid rgba(255,255,255,.1);border-radius:0}
	.primary-nav a:hover,.primary-nav .current-menu-item > a,.primary-nav .current_page_ancestor > a{background:transparent;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 0 1rem}
	.primary-nav .sub-menu a{font-size:1rem;color:#C7D5CB}
	/* Lock the page behind the open menu. Driven from the checkbox, never
	   from JavaScript, so a script failure cannot strand the visitor. */
	body:has(#nav-toggle:checked) .page{overflow:hidden;height:100vh}
	body:has(#nav-toggle:checked){overflow:hidden}
	.nav-toggle{position:relative;z-index:700}
	#nav-toggle:checked ~ .nav-toggle{position:fixed;top:1rem;right:1.2rem;background:#fff}
}

@media (max-width:640px){
	.topbar__item--hide-sm{display:none}
	.brand-logo{height:40px}
}

/* -------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;background:var(--brand);padding-block:clamp(3rem,7vw,5.5rem)}
.hero::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 90% at 15% 0%,rgba(52,161,57,.22),transparent 60%)}
.hero--photo .hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3}
.hero--photo::after{background:linear-gradient(100deg,rgba(20,36,28,.94) 0%,rgba(20,36,28,.8) 55%,rgba(20,36,28,.6) 100%)}
.hero__inner{position:relative;z-index:2}
.hero__copy{max-width:50rem}
.hero__title{margin-bottom:.7rem}
.hero__text{font-size:1.15rem;color:#C9D8CE;max-width:40rem}
.hero__points{list-style:none;padding:0;margin:1.8rem 0;display:flex;flex-wrap:wrap;gap:.6rem 2rem}
.hero__points li{display:flex;align-items:flex-start;gap:.65rem;font-weight:500;text-wrap:pretty}
.hero__points svg{color:var(--accent);margin-top:.35rem;flex:none}
.hero__acts{display:flex;flex-wrap:wrap;gap:.75rem;margin:0}

.pagehero{padding-block:clamp(2.6rem,6vw,4.2rem);position:relative}
.pagehero::after{content:'';position:absolute;inset:0;background:radial-gradient(110% 100% at 10% 0%,rgba(52,161,57,.18),transparent 62%);pointer-events:none}
/* The wrapper keeps full container width and its own centring; only its
   children are capped and pulled left. Capping .wrap itself centres the
   narrower box and pushes the hero inward, so it no longer shares a left
   edge with the header or the body copy below. */
.pagehero__inner{position:relative;z-index:2}
.pagehero__inner > *{max-width:56rem;margin-left:0;margin-right:auto}
.pagehero__title{margin-bottom:.6rem}
.pagehero__text{font-size:1.1rem;color:#C9D8CE;margin-bottom:1.6rem}
.pagehero__acts{margin:0}

.crumbs{margin:0 0 1.2rem;font-size:.86rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.crumbs li:not(:last-child)::after{content:'/';margin-left:.4rem;opacity:.45}
/* Also scored above .tone-dark a:not(.btn), for the same reason. */
.pagehero .crumbs a,.hero .crumbs a{color:#B9C8BE;text-decoration:none}
.pagehero .crumbs a:hover,.hero .crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs span{color:var(--accent)}

/* -------------------------------------------------------------------------
 * Image slots
 * ---------------------------------------------------------------------- */
.imgslot{position:relative;aspect-ratio:var(--ratio,4/3);border-radius:var(--r);overflow:hidden;background:linear-gradient(135deg,var(--accent-soft),#F0F5F1);border:1px dashed rgba(31,122,38,.28);display:flex;align-items:center;justify-content:center;color:rgba(31,122,38,.34)}
.imgslot::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(31,122,38,.05) 0 12px,transparent 12px 24px)}
.imgslot__mark{position:relative;z-index:2;display:block}
.imgslot.is-filled{border:0;background:var(--cream)}
.imgslot.is-filled::before{display:none}
.imgslot.is-filled img{width:100%;height:100%;object-fit:cover}
.tone-dark .imgslot{background:linear-gradient(135deg,rgba(52,161,57,.16),rgba(255,255,255,.04));border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.34)}
.tone-dark .imgslot::before{background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 12px,transparent 12px 24px)}

/* -------------------------------------------------------------------------
 * Cards and lists
 * ---------------------------------------------------------------------- */
.cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(1.1rem,2.4vw,1.7rem)}
.card{display:flex;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:transform var(--speed),box-shadow var(--speed),border-color var(--speed)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(31,122,38,.35)}
.card__link{display:flex;flex-direction:column;width:100%;text-decoration:none;color:inherit}
.card__media{border-radius:0;flex:none}
.card__body{display:flex;flex-direction:column;flex:1 1 auto;padding:1.5rem}
.card__icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);font-size:1.35rem;margin-bottom:.9rem}
.card__title{font-size:1.22rem;margin-bottom:.5rem}
.card__text{color:var(--muted);margin-bottom:1rem;font-size:.99rem}
.card__text:last-child{margin-bottom:0}
.card__more{display:inline-flex;align-items:center;align-self:flex-start;gap:.4rem;margin-top:auto;font-family:var(--font-display);font-weight:700;font-size:.94rem;color:var(--accent-ink)}
.card--flat{box-shadow:none}
.cards--areas{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.ticks{list-style:none;padding:0;margin:0 0 1.6rem;display:flex;flex-direction:column;gap:.65rem}
.ticks li{display:flex;align-items:flex-start;gap:.7rem;text-wrap:pretty}
.ticks svg{color:var(--accent-ink);margin-top:.35rem;flex:none}
.tone-dark .ticks svg{color:var(--accent)}
.ticks--two{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.65rem 1.6rem}

/* Trust */
.trust__grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(1.1rem,2.4vw,1.7rem)}
.trust__card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.6rem}
.tone-light .trust__card{background:var(--cream)}
.trust__icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:var(--accent-ink);color:#fff;font-size:1.4rem;margin-bottom:1rem}
.trust__card h3{font-size:1.15rem;margin-bottom:.4rem}
.trust__card p{color:var(--muted);font-size:.98rem;margin:0}

/* About */
.about__inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.about__inner--flip{grid-template-columns:1.15fr .85fr}
.about__inner--flip .about__media{order:2}
.about__lead{font-size:1.1rem}
@media (max-width:860px){
	.about__inner,.about__inner--flip{grid-template-columns:1fr}
	.about__inner--flip .about__media{order:0}
}

/* Gallery */
.gallery__grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(.8rem,2vw,1.2rem)}

/* Reviews */
.reviews__grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(1.1rem,2.4vw,1.7rem)}
.review{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.7rem;box-shadow:var(--shadow)}
.review__quote{display:block;font-size:1.7rem;color:var(--accent);opacity:.5;margin-bottom:.6rem}
.review__text{margin:0 0 1.2rem}
.review__text p{margin:0;font-size:1.02rem}
.review__by{display:flex;align-items:center;gap:.7rem;margin:auto 0 0;font-size:.94rem}
.review__pic{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.review__place{display:block;color:var(--muted);font-size:.88rem}
.reviews__empty{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.8rem,4vw,2.8rem);max-width:44rem}
.reviews__empty .reviews__quote{display:block;font-size:1.9rem;color:var(--accent);opacity:.5;margin-bottom:.6rem}
.reviews__more,.advice__more{margin:2rem 0 0}
.stars{display:inline-flex;gap:.15rem;margin-bottom:.8rem;color:#D6DDD8}
.stars__s.is-on{color:#E0A215}

/* Areas */
.areas__grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.7rem}
.areas__item a{display:flex;align-items:center;gap:.6rem;padding:.95rem 1.15rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);text-decoration:none;color:var(--ink);font-family:var(--font-display);font-weight:600;transition:border-color var(--speed),background var(--speed),transform var(--speed)}
.areas__item a:hover{border-color:var(--accent-ink);background:var(--accent-soft);color:var(--accent-ink);transform:translateY(-2px)}
.areas__item svg{color:var(--accent-ink);flex:none}

/* Posts */
.posts{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(1.1rem,2.4vw,1.7rem)}
.posts--list{grid-template-columns:1fr;max-width:var(--read)}
.post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.7rem}
.tone-light .post{background:var(--cream);border-color:transparent}
.post__date{font-size:.85rem;color:var(--muted);margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.post__title{font-size:1.24rem;margin-bottom:.6rem}
.post__title a{color:var(--ink);text-decoration:none}
.post__title a:hover{color:var(--accent-ink)}
.post__text{color:var(--muted);margin-bottom:1rem}
.post__more{margin:auto 0 0}
.pager{margin-top:2.5rem;display:flex;gap:.4rem;flex-wrap:wrap}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 .8rem;border:1px solid var(--line);border-radius:var(--r-sm);text-decoration:none;color:var(--ink);font-weight:600}
.pager .page-numbers.current{background:var(--accent-ink);color:#fff;border-color:var(--accent-ink)}

/* Service and location pages */
.svc__inner{display:grid;grid-template-columns:1.5fr .9fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.svc__body{max-width:46rem}
.svc__subhead{font-size:1.4rem;margin-top:2.4rem}
.svc__side{position:sticky;top:120px;display:flex;flex-direction:column;gap:1.4rem}
.svc__img{border-radius:var(--r)}
.sidecard{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem}
.sidecard--wide{background:#fff}
.sidecard h2{font-size:1.25rem;margin-bottom:.6rem}
.sidecard p{font-size:.98rem;color:var(--muted)}
.sidecard__head{margin-top:1.8rem}
.sidecard__list,.sidecard__hours{list-style:none;padding:0;margin:1.1rem 0 0;display:flex;flex-direction:column;gap:.6rem;font-size:.98rem}
.sidecard__list li{display:flex;align-items:flex-start;gap:.65rem}
.sidecard__list svg{color:var(--accent-ink);margin-top:.35rem;flex:none}
.sidecard__list--big{font-size:1.05rem;font-family:var(--font-display);font-weight:600}
.sidecard__note{margin:1rem 0 0;font-weight:600;color:var(--accent-ink)}
@media (max-width:900px){
	.svc__inner{grid-template-columns:1fr}
	.svc__side{position:static}
}

/* Related services. Three columns at desktop so five items read as a
   deliberate 3 + 2 rather than one orphan on its own row. */
.related__grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:.9rem}
@media (min-width:900px){.related__grid{grid-template-columns:repeat(3,1fr)}}
/* The list item stretches to the row height; the card must fill it, or a
   two-line label makes a taller box than its single-line neighbours. */
.related__grid li{display:flex}
.related__card{display:flex;align-items:center;gap:1rem;width:100%;padding:1.1rem 1.25rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-sm);text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1.35;transition:background var(--speed),border-color var(--speed),transform var(--speed)}
.related__card:hover{background:rgba(255,255,255,.1);border-color:var(--accent);transform:translateY(-2px)}
.related__icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex:none;border-radius:11px;background:rgba(52,161,57,.2);color:var(--accent);font-size:1.25rem;transition:background var(--speed),color var(--speed)}
.related__card:hover .related__icon{background:var(--accent);color:var(--brand)}
.related__label{flex:1 1 auto}
.related__go{flex:none;display:inline-flex;font-size:1.05rem;color:var(--accent);transition:transform var(--speed)}
.related__card:hover .related__go{transform:translateX(3px)}
/* Specificity note: .tone-dark a:not(.btn) scores (0,2,1), so a plain
   .related__card rule would lose to it and the labels would render accent
   green on the dark band instead of white. These are scored above it. */
.tone-dark .related__grid a.related__card{color:#fff}
.tone-dark .related__grid a.related__card:hover{color:#fff}
/* Light background variant, used on the location pages. */
.related__grid--ink .related__card{background:var(--cream);border-color:var(--line);color:var(--ink)}
.related__grid--ink .related__card:hover{background:var(--accent-soft);border-color:var(--accent-ink);color:var(--ink)}
.related__grid--ink .related__icon{background:#fff;color:var(--accent-ink)}
.related__grid--ink .related__card:hover .related__icon{background:var(--accent-ink);color:#fff}
.related__grid--ink .related__go{color:var(--accent-ink)}

/* FAQ */
.faq__list{display:flex;flex-direction:column;gap:.7rem;max-width:var(--read)}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm)}
.faq__item summary{cursor:pointer;list-style:none;padding:1.1rem 1.3rem;font-family:var(--font-display);font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.faq__item summary::-webkit-details-marker{display:none}
.faq__chev{transition:transform var(--speed);color:var(--accent-ink);flex:none;font-size:1.2rem}
.faq__item[open] .faq__chev{transform:rotate(90deg)}
.faq__ans{padding:0 1.3rem 1.2rem;color:var(--muted)}
.faq__ans p{margin:0}

/* Accreditations and team */
.accreds__grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem}
.accreds__grid li{display:flex;align-items:center;gap:.7rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:1.1rem 1.3rem;font-family:var(--font-display);font-weight:600}
.accreds__grid svg{color:var(--accent-ink);font-size:1.3rem;flex:none}
.team__grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4rem}
.team__card h3{font-size:1.15rem;margin:1rem 0 .2rem}
.team__card p{color:var(--muted);margin:0;font-size:.95rem}
.team__img{border-radius:var(--r)}

/* Contact */
.contact__inner{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.contact__side{display:flex;flex-direction:column;gap:1.4rem}
.contact__img{border-radius:var(--r)}
@media (max-width:900px){.contact__inner{grid-template-columns:1fr}}

.formsec__inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.formsec__form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--shadow)}
@media (max-width:900px){.formsec__inner{grid-template-columns:1fr}}

/* End CTA */
.endcta__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem}
.endcta__copy{max-width:38rem}
.endcta__copy p:last-child{margin:0;color:#B9C8BE}
.endcta__acts{display:flex;flex-wrap:wrap;gap:.75rem}

/* -------------------------------------------------------------------------
 * Prose
 * ---------------------------------------------------------------------- */
.prose > *:first-child{margin-top:0}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.85rem);margin-top:2.4rem}
.prose h3{margin-top:1.9rem}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li{margin-bottom:.5rem}
.prose table{margin:1.6rem 0;font-size:.97rem}
.prose th,.prose td{border:1px solid var(--line);padding:.75rem .9rem;text-align:left;vertical-align:top}
.prose th{background:var(--cream);font-family:var(--font-display);font-weight:700}
.prose em{color:var(--muted)}
.article__img{margin-bottom:2rem}

/* -------------------------------------------------------------------------
 * Forms
 * ---------------------------------------------------------------------- */
.leadform__title{font-size:1.4rem;margin-bottom:1.1rem}
.leadform__grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem}
.field{margin:0 0 .7rem;display:flex;flex-direction:column;gap:.35rem}
.field--wide{grid-column:1 / -1}
.field label{font-family:var(--font-display);font-weight:600;font-size:.93rem}
.req{color:var(--accent-ink)}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:1rem;color:var(--ink);background:#fff;padding:.8rem .95rem;border:1.5px solid var(--line);border-radius:var(--r-sm);transition:border-color var(--speed),box-shadow var(--speed)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent-ink);box-shadow:0 0 0 3px rgba(31,122,38,.14);outline:none}
.field textarea{resize:vertical;min-height:110px}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#B3261E}
.field__err{font-size:.88rem;color:#B3261E;font-weight:600}
.field--consent{gap:.5rem}
.consent{display:flex;align-items:flex-start;gap:.6rem;margin:0;font-size:.93rem}
.consent input{width:20px;height:20px;flex:none;margin-top:.2rem;accent-color:var(--accent-ink)}
.consent label{font-weight:500;line-height:1.55}
.consent__note{font-size:.85rem;color:var(--muted);margin:0}
.leadform__submit{margin:1.2rem 0 0}
.leadform__trap{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.leadform__errors{background:#FDECEA;border:1px solid #F2B8B5;border-left:4px solid #B3261E;border-radius:var(--r-sm);padding:1rem 1.2rem;margin-bottom:1.2rem;font-size:.95rem}
.leadform__errors ul{margin:.5rem 0 0;padding-left:1.2rem}
.leadform__errors a{color:#8C1D18}
.leadform__errors p{margin:0}
.leadform__done{background:var(--accent-soft);border:1px solid rgba(31,122,38,.3);border-left:4px solid var(--accent-ink);border-radius:var(--r-sm);padding:1.2rem 1.4rem}
.leadform__done p{margin:0}
.leadform__done:focus,.leadform__errors:focus{outline:3px solid var(--accent);outline-offset:3px}
@media (max-width:560px){.leadform__grid{grid-template-columns:1fr}}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */
.site-footer{background:var(--brand);color:#B9C8BE;padding-top:clamp(3rem,6vw,4.5rem);font-size:.97rem}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:clamp(1.8rem,4vw,3rem);padding-bottom:3rem}
.footer__head{font-size:1.02rem;color:#fff;letter-spacing:.02em;margin-bottom:1rem}
.footer__head--space{margin-top:1.8rem}
.footer__about{margin:1.1rem 0 1.3rem;max-width:32rem}
.footer__links,.footer__contact,.footer__hours,.footer__badges,.footer__social{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.55rem}
.footer__links a,.footer__contact a{color:#B9C8BE;text-decoration:none}
.footer__links a:hover,.footer__contact a:hover{color:var(--accent);text-decoration:underline}
.footer__contact li{display:flex;align-items:flex-start;gap:.6rem}
.footer__contact svg{color:var(--accent);margin-top:.35rem;flex:none}
.footer__badges{flex-direction:row;flex-wrap:wrap;gap:.6rem;margin-bottom:1.2rem}
.footer__badges li{display:flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:999px;padding:.4rem .9rem;font-size:.87rem;font-weight:600;color:#fff}
.footer__badges svg{color:var(--accent)}
.footer__social{flex-direction:row;gap:1rem}
.footer__social a{color:#fff;font-weight:600}

.footer__base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.4rem;border-top:1px solid rgba(255,255,255,.1);font-size:.9rem}
.footer__copy{margin:0}
.footer__reg{display:block;opacity:.75;font-size:.85rem}
.footer__legal{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem}
.footer__legal-list{list-style:none;display:flex;flex-wrap:wrap;gap:1.2rem;margin:0;padding:0}
.footer__legal a,.hrl-cookie-open{color:#B9C8BE;text-decoration:none;background:none;border:0;padding:0;margin:0;font:inherit;font-size:.9rem;cursor:pointer}
.footer__legal a:hover,.hrl-cookie-open:hover{color:var(--accent);text-decoration:underline}

@media (max-width:1000px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.footer__grid{grid-template-columns:1fr}}

/* -------------------------------------------------------------------------
 * Sticky mobile call to action
 *
 * Hidden while the hero's own buttons are on screen, so there is never a
 * second call to action stacked over the first. It fails visible: without
 * JavaScript the noscript rule leaves it permanently on.
 * ---------------------------------------------------------------------- */
/* No gap between the two buttons. The container background matches the call
   button so sub-pixel rounding on a fractional device pixel ratio cannot
   show a hairline through, and the quote button overlaps by 1px to close
   the seam on the green side. */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:800;display:none;gap:0;background:var(--brand);transform:translateY(100%);transition:transform .22s ease}
.stickybar.is-on{transform:none}
.stickybar__btn{flex:1 1 50%;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem .6rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px));font-family:var(--font-display);font-weight:700;font-size:1rem;text-decoration:none;color:#fff;background:var(--brand)}
.stickybar__btn--quote{background:var(--accent-ink);margin-left:-1px}
.stickybar__btn svg{font-size:1.15rem}
@media (max-width:1180px){.stickybar{display:flex}}
@media (min-width:1181px){body{padding-bottom:0}}

/* -------------------------------------------------------------------------
 * Cookie consent banner
 * ---------------------------------------------------------------------- */
.hrl-cookie{position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--brand);color:#DCE6DF;box-shadow:0 -8px 30px rgba(0,0,0,.24);max-height:90vh;overflow-y:auto}
.hrl-cookie[hidden]{display:none}
.hrl-cookie__inner{max-width:var(--wrap);margin:0 auto;padding:clamp(1.2rem,3vw,1.8rem) clamp(1.2rem,4vw,2rem)}
.hrl-cookie__main{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);flex-wrap:wrap}
.hrl-cookie__text{flex:1 1 340px}
.hrl-cookie__title{font-size:1.1rem;color:#fff;margin:0 0 .4rem}
.hrl-cookie__title:focus{outline:3px solid var(--accent);outline-offset:4px}
.hrl-cookie__body{margin:0;font-size:.93rem;line-height:1.65;color:#C1D0C6}
.hrl-cookie__body a{color:var(--accent);text-decoration:underline}
.hrl-cookie__actions{display:flex;gap:.6rem;flex:0 0 auto;flex-wrap:wrap}
.hrl-cookie__btn{font-family:var(--font-display);font-weight:700;font-size:.94rem;line-height:1;padding:.85rem 1.4rem;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:background var(--speed),color var(--speed),border-color var(--speed)}
.hrl-cookie__btn--accept{background:var(--accent);color:#12200F}
.hrl-cookie__btn--accept:hover{background:#fff;color:var(--brand)}
.hrl-cookie__btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.36)}
.hrl-cookie__btn--ghost:hover{background:#fff;color:var(--brand);border-color:#fff}
.hrl-cookie__cats{border:0;margin:1.2rem 0;padding:0;display:flex;flex-direction:column;gap:1rem}
.hrl-cookie__cat{display:flex;align-items:flex-start;gap:.8rem}
.hrl-cookie__cat input{width:22px;height:22px;flex:none;margin-top:.2rem;accent-color:var(--accent)}
.hrl-cookie__catbody{display:flex;flex-direction:column;gap:.2rem;font-size:.9rem;color:#B4C4BA}
.hrl-cookie__catbody label{font-family:var(--font-display);font-weight:700;color:#fff;font-size:1rem;display:flex;align-items:center;gap:.6rem;cursor:pointer}
.hrl-cookie__always{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(52,161,57,.2);color:var(--accent);border-radius:999px;padding:.2rem .6rem;font-weight:700}
@media (max-width:640px){
	.hrl-cookie__actions{flex:1 1 100%}
	.hrl-cookie__btn{flex:1 1 auto;text-align:center}
}

/* -------------------------------------------------------------------------
 * WordPress core classes
 * ---------------------------------------------------------------------- */
.alignleft{float:left;margin:.3rem 1.6rem 1rem 0}
.alignright{float:right;margin:.3rem 0 1rem 1.6rem}
.aligncenter{margin-inline:auto;display:block}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:.88rem;color:var(--muted);margin-top:.5rem}
.wp-block-image img{border-radius:var(--r)}