/*
 * client.css — mcpass.cirrusvps.info
 * Front-end theme for the MC Plan & Site Services rebuild on Hydra.
 * Lives at the document root (outside hydra/) so the updater never touches it.
 *
 * Brand replicated from the source site (theme "bluebeechild"):
 *   primary  #C2D500 (lime green)   text #313131 / #4D5257 (charcoal/slate)
 *   typeface Manrope (self-hosted variable woff2) — same face the WordPress
 *   source site uses; replaced Arimo, whose regular/bold contrast was too weak
 *   to carry the heading convention (regular base + bold highlight).
 */

/* ── Brand font: Manrope (self-hosted variable woff2, weight axis 200–800) ───
   One file per subset covers every weight, so `font-weight: 400` and `700`
   both resolve from the same download. Manrope ships no italic — the browser
   synthesises obliques, which matches the WordPress source's behaviour. */
@font-face {
	font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
	src: url("/media/fonts/manrope-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
	src: url("/media/fonts/manrope-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--brand:        #c2d500;   /* primary lime green */
	--brand-dark:   #a8b800;   /* darker lime (hovers) */
	--accent:       #c2d500;   /* heading highlight */
	--ink:          #313131;   /* headings / strong text */
	--slate:        #4d5257;   /* body text */
	--muted:        #6b7178;   /* secondary text */
	--deep:         #4d5257;   /* dark sections: header overlay, footer */
	--btn-ink:      #1c1f1a;   /* dark text on lime buttons */
	--mid-grey:     #c1c1c1;   /* WP theme "mid-grey" — archived/secondary cards */
	--line:         #e4e7e4;   /* hairlines */
	--bg:           #ffffff;
	--bg-alt:       #f7f7f7;   /* alt band background (WP theme "light-grey") */
	--maxw:         1180px;
	--radius:       12px;
	--shadow:       0 6px 24px rgba(40,44,40,.08);
	--font:         "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* ── Reset / base ─────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.65;
	color: var(--slate); background: var(--bg);
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { line-height: 1.18; color: var(--slate); margin: 0 0 .5em; font-weight: 400; letter-spacing: -.01em; }
h1 { font-size: clamp(2.145rem, 2.145rem + ((1vw - 3.2px) * 2.564), 3.875rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; font-size: 18px; line-height: 1.38; letter-spacing: 0px; }
/* WP heading convention: base text is regular weight. A <span> is the brand
   highlight (bold + green, mirroring WP's <strong><mark class="has-primary-color">);
   a bare <strong> is emphasis only — bold, no colour change (WP uses this for
   headings like "How we can help"). */
h1 span, h2 span, h3 span { color: var(--brand); font-weight: 700; }
h1 strong, h2 strong, h3 strong { font-weight: 700; }
/* Oversized section heading (e.g. About Us "What we do at the heart of MC Plan", an <h1> on WP) */
.section-xl { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.12; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; }
.narrow { max-width: 820px; }
.center { text-align: center; }
.muted { color: var(--muted); font-size: .95rem; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: #fff; padding: .6rem 1rem; z-index: 200; border-radius: 8px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
	display: inline-block;
	background: linear-gradient(to right, var(--deep) 50%, var(--brand) 50%);
	background-size: 200%; background-position: 100%;
	color: var(--btn-ink);
	padding: .5rem 1.25rem; border-radius: 3px; font-weight: 500; font-size: .9375rem;
	text-decoration: none; transition: background-position .3s ease, border-color .2s, color .2s;
	border: 1px solid var(--brand); min-width: 128px; text-align: center;
}
.btn:hover { background-position: 0%; border-color: var(--deep); color: #fff; text-decoration: none; }
.btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn.ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.band:not(.hero):not(.contact-band) .btn.ghost { color: var(--ink); border-color: var(--ink); }
.band:not(.hero):not(.contact-band) .btn.ghost:hover { background: var(--ink); color: #fff; }
.btn.sm { padding: .4rem 1rem; font-size: .875rem; min-width: 0; }
.btn.dark {
	background: linear-gradient(to right, var(--brand) 50%, var(--deep) 50%);
	background-size: 200%; background-position: 100%;
	color: #fff; border-color: var(--deep);
}
.btn.dark:hover { background-position: 0%; border-color: var(--brand); color: var(--btn-ink); text-decoration: none; }

/* ── Top utility bar (phone / email from blocks) ──────────────────────────── */
.topbar { background: transparent; color: var(--slate); font-size: .875rem; }
.topbar-inner { display: flex; justify-content: flex-end; gap: 1.4rem; padding: .5rem 0 .1rem; }
.topbar a { color: var(--slate); font-weight: 500; display: flex; align-items: center; gap: .4rem; }
.topbar a:hover { color: var(--brand-dark); text-decoration: none; }
.tb-icon { width: 11px; height: auto; display: inline-block; }

/* ── Header / nav ─────────────────────────────────────────────────────────── */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255,255,255,.80); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line); box-shadow: 0 2px 8px rgba(40,44,40,.04);
}
/* Three zones across the full viewport: brand left, nav centred, actions right.
   No .wrap here — the header spans the window rather than the 1180px column. */
.header-inner {
	display: flex; align-items: center; gap: 2rem;
	width: 100%; padding: .5rem 2rem; min-height: 84px;
}
.brand { flex: 0 0 auto; }
.site-nav { flex: 1 1 auto; min-width: 0; }
.header-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }
.header-contact { display: flex; gap: 1.2rem; font-size: .8rem; }
.header-contact a { color: var(--slate); font-weight: 500; display: flex; align-items: center; gap: .4rem; }
.header-contact a:hover { color: var(--brand-dark); text-decoration: none; }
.header-ctas { display: flex; gap: .5rem; }
/* The CTAs are duplicated inside the nav for the mobile drawer; hide that copy
   on desktop, where they appear in the actions group instead. */
.site-nav .cta-li { display: none; }
.brand img { height: 61px; width: auto; }
.site-nav { flex: 1; }
.site-nav ul { list-style: none; display: flex; align-items: center; justify-content: center; gap: .25rem; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a { color: var(--slate); font-weight: 400; font-size: .88rem; padding: .2rem .85rem; border-radius: 8px; display: inline-block; }
.site-nav a:not(.btn) { border-bottom: 2px solid transparent; }
.site-nav a:not(.btn):hover { border-bottom-color: var(--brand); text-decoration: none; }
.site-nav .active > a { box-shadow: inset 0 -3px 0 var(--brand); }

/* dropdowns */
.has-sub { position: relative; }
.has-sub > a::after {
	content: ''; display: inline-block; width: 6px; height: 6px; margin-left: .4em; vertical-align: middle;
	border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg) translateY(-3px); opacity: .7;
}
.sub {
	position: absolute; left: 0; top: 100%; min-width: 300px;
	background: transparent; border: 0; border-radius: 0; box-shadow: none;
	padding: 1.2rem 0 0; display: block; opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .15s, transform .15s, visibility .15s;
}
.has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: translateY(0); }
ul.sub { flex-direction: column; align-items: stretch; gap: 0; padding: 0; margin-top: .75rem; }
.sub li { width: 100%; background: var(--brand); overflow: hidden; }
.sub li:last-child { border-radius: 0 0 10px 10px; }
.sub a { display: block; padding: .65rem 2rem; border-radius: 0; color: #fff; }
.sub li:first-child a { padding-top: 1.2rem; }
.sub li:last-child a { padding-bottom: 1.2rem; border-radius: 0 0 10px 10px; }
.sub a:hover { background: var(--bg-alt); color: var(--ink); text-decoration: none; }

.cta-li { margin-left: .15rem; }
.site-nav .btn { color: #fff; }
.site-nav .btn:hover {
	background: linear-gradient(to right, var(--deep) 50%, var(--brand) 50%);
	background-size: 200%; background-position: 0%;
	border-color: var(--deep); color: #fff; text-decoration: none;
}
.site-nav .btn.ghost { background: transparent; color: var(--ink); border-color: var(--brand); }
.site-nav .btn.ghost:hover { background: var(--brand); color: var(--btn-ink); }

/* mobile burger (CSS-only via checkbox) */
.navtoggle, .navburger { display: none; }
.navburger { cursor: pointer; width: 44px; height: 40px; flex-direction: column; justify-content: center; gap: 5px; }
.navburger span { display: block; height: 3px; background: var(--ink); border-radius: 3px; }

/* ── Bands / sections ─────────────────────────────────────────────────────── */
.band { padding: 4rem 0; }
.band.alt { background: var(--bg-alt); }
.band.two-tone { background: linear-gradient(to bottom, var(--bg-alt) 50%, var(--bg) 50%); }
.band.two-tone.flip { background: linear-gradient(to bottom, var(--bg) 50%, var(--bg-alt) 50%); }
.band .lead { font-size: 1.18rem; color: var(--slate); }
.band .lead.center { max-width: 760px; margin-inline: auto; }
.page-hero { background: var(--bg); padding: 3.5rem 0 1.75rem; }
.page-hero + .band { padding-top: 1.75rem; }
.page-hero h1 { margin-bottom: .3em; }

/* hero (home) */
.hero { background-size: cover; background-position: center; color: #fff; padding: 6rem 0; }
.hero .hero-inner { max-width: 820px; }
.hero h1 { color: #fff; }
.hero h1 span { color: var(--brand); }
.hero .lead { color: rgba(255,255,255,.92); font-size: 1.25rem; }

/* hero slider */
.hero-slider {
	position: relative; overflow: hidden;
	/* 100vh on mobile measures the viewport as if the browser's address bar
	   were hidden, so the hero runs taller than the visible area and slices
	   the next section in half. dvh tracks what is actually on screen. The vh
	   line stays first as a fallback for browsers without dvh. */
	min-height: calc(100vh - 112px);
	min-height: calc(100dvh - 112px);
	display: flex; align-items: center;
}
.hero-slider::after {
	content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background: linear-gradient(to right, #fff 0%, rgba(255,255,255,.92) 28%, rgba(255,255,255,.55) 52%, rgba(255,255,255,0) 72%);
}
.hero-slides  { position: absolute; inset: 0; pointer-events: none; }
.hero-slide {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 0;
	animation: heroFade 15s ease-in-out infinite;
}
.hero-slide:nth-child(1) { animation-delay:  0s; }
.hero-slide:nth-child(2) { animation-delay:  5s; }
.hero-slide:nth-child(3) { animation-delay: 10s; }
.hero-inner { position: relative; z-index: 1; }

/* slider text — dark grey against the white left gradient, matching WP #4d5257 */
.hero-slider { color: var(--slate); }
.hero-slider .hero-inner { max-width: var(--maxw); }
.hero-slider .hero-inner > * { max-width: 600px; }
.hero-slider h1 { color: var(--slate); font-size: clamp(2.2rem, 3.8vw, 2.9rem); font-weight: 400; }
.hero-slider h1 span { color: var(--brand-dark); }
.hero-slider .lead { color: var(--slate); font-size: 18px; line-height: 1.38; letter-spacing: 0px; }
.hero-slider .eyebrow { color: var(--brand-dark); }
.hero-slider .btn.ghost { background: transparent; color: var(--slate); border-color: var(--slate); }
.hero-slider .btn.ghost:hover { background: var(--slate); color: #fff; }

/* slider pagination dots */
.hero-dots { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: .5rem; }
.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); border: 0; cursor: pointer; padding: 0; transition: background .2s; }
.hero-dot.active { background: var(--brand); }

@keyframes heroFade {
	0%    { opacity: 1; }
	33.3% { opacity: 1; }
	43%   { opacity: 0; }
	100%  { opacity: 0; }
}
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 700; color: var(--brand); margin-bottom: .6rem; }
.blog-pager { margin-top: 2.5rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.actions { margin-top: 1.8rem; display: flex; gap: .8rem; flex-wrap: wrap; }

/* split two-column */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.rounded { border-radius: var(--radius); box-shadow: var(--shadow); }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.cards { display: grid; gap: 1.5rem; margin-top: 2rem; }
.cards.services, .cards.news { grid-template-columns: repeat(3, 1fr); }
.card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	overflow: hidden; color: var(--ink); box-shadow: var(--shadow);
	transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(40,44,40,.14); text-decoration: none; }
.card img { width: 100%; height: 190px; object-fit: cover; }
.card h3 { margin: 1rem 1.1rem .4rem; }
.card p { margin: 0 1.1rem 1.2rem; color: var(--muted); font-size: .97rem; }
.card.pad { padding: 1.6rem; }
.card.pad h3, .card.pad p { margin-inline: 0; }
.card.pad .btn { margin-top: .6rem; }

/* ── 3-column content rows ──────────────────────────────────────────────────
   .what-we-do-grid: heading in col 1 + two paragraph columns (About Us / service pages)
   .cols-3:          generic 3-up row, e.g. /services "How we can help" (para, para, button) */
.what-we-do-grid, .cols-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.2rem; align-items: start; }
.cols-3 { gap: 2.5rem; }
.what-we-do-grid h2 { margin: 0; }

/* ── Banner image straddling a two-tone band boundary ────────────────────── */
.services-banner { display: block; width: 100%; max-height: 480px; object-fit: cover; }

/* ── Service cover cards ──────────────────────────────────────────────────── */
.services-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.2rem; align-items: start;
}
.services-intro { }
.services-intro h2 { margin-bottom: .6rem; }
.service-cover {
  position: relative; display: block; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 1 / 1; background-size: cover; background-position: center;
  text-decoration: none; transition: transform .18s;
}
.service-cover:hover { transform: translateY(-3px); text-decoration: none; }
.service-cover__dim {
  position: absolute; inset: 0;
  background: rgba(77,82,87,.35);
  transition: background .18s;
}
.service-cover:hover .service-cover__dim { background: rgba(77,82,87,.5); }
.service-cover__content {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: space-between; padding: 1.4rem;
}
.service-cover__content h3 { color: #fff; margin: 0; font-size: 1.1rem; line-height: 1.25; }
.btn.white { background: #fff; color: var(--slate); border-color: #fff; }
.btn.white:hover { background: transparent; border-color: #fff; color: #fff; text-decoration: none; }

/* ── Resource cards (/resources hub) ────────────────────────────────────────
   Three colour-coded promo cards. Each card is a single link so the whole
   tile is clickable; the "button" inside is presentational. Highlight colours
   per card come from the WordPress source: on lime and mid-grey the emphasis
   word is dark, on the dark card it is lime. */
.res-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
.res-card {
	display: flex; flex-direction: column; align-items: flex-start;
	padding: 2.5rem 2rem; border-radius: var(--radius); color: #fff;
	text-decoration: none; transition: transform .18s, box-shadow .18s;
}
.res-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); text-decoration: none; }
.res-card h2 { color: #fff; font-size: 1.9rem; margin-bottom: 1rem; }
.res-card p { flex: 1; margin-bottom: 1.6rem; }
.res-card .btn { background: #fff; border-color: #fff; color: var(--slate); }
.res-card:hover .btn { background: rgba(255,255,255,.88); border-color: #fff; color: var(--slate); }

.res-card.lime { background: var(--brand); }
.res-card.lime h2 span { color: var(--deep); }
.res-card.dark { background: var(--deep); }
.res-card.dark h2 span { color: var(--brand); }
.res-card.dark p { color: var(--brand); }
.res-card.grey { background: var(--mid-grey); }
.res-card.grey h2 span { color: var(--deep); }

/* ── Trusted gallery ──────────────────────────────────────────────────────── */
.trusted-gallery { position: relative; display: flex; align-items: center; justify-content: center; gap: 0; }
.trusted-img-1 { width: 70%; aspect-ratio: 4/3; object-fit: cover; position: relative; z-index: 2; }
.trusted-img-2 { width: 60%; aspect-ratio: 4/3; object-fit: cover; margin-left: -14%; margin-top: 10%; z-index: 1; }

/* ── CTA boxes (Apply now = lime, Make a payment = dark) ─────────────────── */
.two-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.cta-box { color: #fff; border-radius: var(--radius); padding: 2.8rem 2.2rem; text-align: left; }
.cta-box h2 { color: #fff; margin-bottom: .5rem; }
.cta-box p { color: rgba(255,255,255,.9); margin-bottom: 1.4rem; }
.cta-box .btn.ghost { background: #fff; color: var(--slate); border-color: #fff; }
.cta-box .btn.ghost:hover { background: rgba(255,255,255,.85); color: var(--slate); }
.band:not(.hero):not(.contact-band) .cta-box .btn.ghost { color: var(--slate); border-color: #fff; }
.band:not(.hero):not(.contact-band) .cta-box .btn.ghost:hover { color: var(--slate); }
.cta-icon { width: 52px; height: auto; margin-bottom: 1.2rem; display: block; }
.cta-apply { background: var(--brand); }
.cta-apply h2 { color: #fff; }
.cta-apply h2 strong { color: #fff; }
.cta-apply p { color: rgba(255,255,255,.9); }
.cta-apply .btn.ghost { background: #fff; color: var(--slate); border-color: #fff; }
.cta-apply .btn.ghost:hover { background: rgba(255,255,255,.85); color: var(--slate); border-color: #fff; }
.cta-pay { background: var(--deep); }

/* ── Meet the team ────────────────────────────────────────────────────────── */
.team-split { grid-template-columns: 1fr 1fr; align-items: start; gap: 4rem; }
.team-intro { }
.team-faces { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.team-face { width: calc((50% - .5rem) * 0.85); aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius); flex-shrink: 0; }

/* ── Testimonial carousel ─────────────────────────────────────────────────── */
.testimonial-card { max-width: 760px; margin-inline: auto; text-align: center; color: #fff; padding: 3rem 2.5rem; background: var(--deep); border-radius: var(--radius); box-shadow: var(--shadow); }
.testimonial-card h2 { color: #fff; margin-bottom: 1.5rem; }
.testimonial-card h2 strong { color: var(--brand); }
.quote-icon { width: 45px; margin: 0 auto 1.5rem; }
.testimonial-slides { position: relative; min-height: 140px; }
.testimonial-slide { display: none; }
.testimonial-slide.active { display: block; animation: testimonialIn .5s ease; }
.testimonial-slide p { color: rgba(255,255,255,.9); font-size: 1.05rem; margin-bottom: .6rem; }
.testimonial-slide cite { display: block; color: var(--brand); font-style: normal; font-weight: 600; font-size: .92rem; }
.testimonial-nav { display: flex; justify-content: center; gap: 1rem; margin-top: 1.8rem; }
.testimonial-nav button { background: var(--brand); border: 1px solid var(--brand); color: var(--btn-ink); width: 40px; height: 40px; border-radius: 50%; font-size: 1.4rem; cursor: pointer; line-height: 1; transition: background .15s, border-color .15s; }
.testimonial-nav button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

@keyframes testimonialIn {
	from { opacity: 0; transform: translateX(40px); }
	to   { opacity: 1; transform: translateX(0); }
}
.cta-box .btn { margin-top: .5rem; }

/* ── Latest insights (homepage) ───────────────────────────────────────────── */
.li-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.li-main { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; align-items: start; }
.li-posts { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.li-post { display: grid; grid-template-columns: 64px 1fr; gap: .9rem; align-items: start; text-decoration: none; color: inherit; padding-right: 2rem; border-right: 1px solid var(--line); }
.li-posts .li-post:last-child { border-right: 0; padding-right: 0; }
.li-post img { width: 64px; height: 64px; aspect-ratio: 1/1; object-fit: cover; border-radius: 6px; }
.li-post:hover { text-decoration: none; }
.li-post:hover h3 { color: var(--brand-dark); }
.li-date { color: var(--brand-dark); font-size: .78rem; font-weight: 500; margin-bottom: .25rem; }
.li-post-body h3 { margin-top: .15rem; font-size: .92rem; line-height: 1.3; transition: color .15s; }
.li-post-body p { color: var(--muted); font-size: .82rem; margin-top: .3rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.read-more { color: var(--brand-dark); font-size: .82rem; font-weight: 700; display: inline-block; margin-top: .4rem; }

.li-follow h3 { font-size: 1.05rem; margin-bottom: 1rem; }
.social-icons { display: flex; gap: .6rem; }
.social-ico { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--deep); color: #fff; transition: background .15s; }
.social-ico:hover { background: var(--brand-dark); text-decoration: none; }
.social-ico svg { width: 16px; height: 16px; fill: currentColor; }

/* Contact promo — lime CTA card that straddles the page/footer seam. Delivered
   as a reusable Hydra block, so it appears on several pages; the footer clears
   it via the :has() rule below. */
.contact-promo-section { padding-top: 2rem; padding-bottom: 0; }
.contact-promo {
	background: var(--brand); color: #fff; border-radius: var(--radius);
	text-align: center; padding: 4rem 2.5rem; position: relative; overflow: hidden;
	margin-bottom: -170px; z-index: 2;
}
.contact-promo h2 { color: #fff; }
/* Inside the lime card the emphasis is bold white, not brand green — overrides
   the global heading-highlight rule. */
.contact-promo h2 span { color: #fff; font-weight: 700; }
.contact-promo p { color: rgba(255,255,255,.95); max-width: 640px; margin: 0 auto 1.5rem; }
.contact-promo .btn.ghost { background: #fff; color: var(--slate); border-color: #fff; }
.contact-promo .btn.ghost:hover { background: rgba(255,255,255,.88); color: var(--slate); border-color: #fff; }
.contact-promo .promo-mark { position: absolute; width: 44px; height: 44px; opacity: .4; }
.contact-promo .promo-mark.top-right { top: 2rem; right: 4.5rem; }
.contact-promo .promo-mark.bottom-right { bottom: 2rem; right: 9rem; }
.contact-promo .promo-mark.top-left { top: 2rem; left: 4.5rem; }
.contact-promo .promo-mark.bottom-left { bottom: 2rem; left: 9rem; }

/* Card above straddles the band/footer seam (50% overlap); footer content is
   pushed down to clear it. `:has()` makes this work on ANY page carrying a
   .contact-promo (it's a reusable block attached to several pages), with the
   .is-home rule kept as a fallback for browsers without :has(). */
.is-home .site-footer,
body:has(.contact-promo) .site-footer { padding-top: 14rem; }

/* testimonials */
.testimonials { grid-template-columns: 1fr 1fr; }
.testimonials blockquote {
	margin: 0; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--brand);
	border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow);
}
.testimonials cite { display: block; margin-top: 1rem; font-weight: 700; font-style: normal; color: var(--ink); }

/* contact band */
.contact-band { background: var(--deep); color: #fff; }
.contact-band h2 { color: #fff; }
.contact-band h2 span { color: var(--brand); }
.contact-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); padding: 1.8rem; }
.contact-band .contact-card a { color: #fff; }
.contact-card.big { background: var(--bg-alt); border: 1px solid var(--line); }
.contact-card.big, .contact-card.big a { color: var(--ink); }
.socials a { margin-right: 1rem; }

/* ── Process steps ────────────────────────────────────────────────────────── */
.process { counter-reset: step; list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.2rem; }
.process.steps5 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.process li {
	position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	padding: 1.4rem 1.4rem 1.4rem 3.6rem; box-shadow: var(--shadow);
}
.process.steps5 li { padding: 3.4rem 1.3rem 1.3rem; }
.process li::before {
	counter-increment: step; content: counter(step);
	position: absolute; left: 1.1rem; top: 1.3rem;
	width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--brand); color: var(--btn-ink);
	display: grid; place-items: center; font-weight: 800; font-size: .95rem;
}
.process.steps5 li::before { left: 1.3rem; top: 1.3rem; }
.process h3 { margin: 0 0 .35rem; }
.process p { margin: 0; color: var(--muted); font-size: .96rem; }

/* ── Process tabs (icon + expandable rows, used on /services pages) ─────────── */
.process-band { background: var(--deep); }
.process-split { display: grid; grid-template-columns: 1fr 1.35fr; gap: 2.5rem; align-items: start; }
.process-intro h2 { color: #fff; margin-bottom: .8rem; }
.process-intro h2 span { color: var(--brand); }
.process-intro p { color: rgba(255,255,255,.75); margin: 0; }
.process-tabs { display: flex; flex-direction: column; gap: .9rem; }
.process-tab { display: flex; align-items: stretch; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.process-tab__icon { flex: 0 0 84px; background: var(--brand); display: flex; align-items: flex-start; justify-content: center; padding-top: 1.15rem; }
.process-tab__icon img { width: 2.1rem; height: 2.1rem; }
.process-tab__body { flex: 1; background: var(--bg-alt); }
.process-tab__body summary { cursor: pointer; list-style: none; padding: 1.1rem 2.6rem 1.1rem 1.3rem; font-weight: 700; color: var(--ink); position: relative; }
.process-tab__body summary::-webkit-details-marker { display: none; }
.process-tab__body summary::after { content: "+"; position: absolute; right: 1.3rem; top: 1.1rem; font-size: 1.4rem; line-height: 1; color: var(--brand-dark); }
.process-tab__body[open] summary::after { content: "\2212"; }
.process-tab__body > p { margin: 0; padding: 0 1.3rem 1.2rem; color: var(--muted); font-size: .96rem; }

/* lists */
.ticks { list-style: none; padding: 0; }
.ticks li { padding-left: 1.8rem; position: relative; margin-bottom: .7rem; }
.ticks li::before { content: "\2713"; position: absolute; left: 0; color: var(--brand-dark); font-weight: 800; }
.reg-list { list-style: none; padding: 0; }
.reg-list li { margin-bottom: .55rem; padding-left: 1.6rem; position: relative; break-inside: avoid; }
.reg-list li::before { content: "\1F4C4"; position: absolute; left: 0; }
.reg-list.cols { columns: 2; column-gap: 2.5rem; }
.reg-list a { color: var(--ink); }
.reg-list a:hover { color: var(--brand-dark); }

/* ── Team ─────────────────────────────────────────────────────────────────── */
.band h2 + .team-grid { margin-top: 1.2rem; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin: 0 0 2.5rem; }
.team-card { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.team-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.team-card figcaption { padding: 1rem; }
.team-card strong { display: block; color: var(--ink); }
.team-card span { display: block; color: var(--muted); font-size: .9rem; margin-top: .15rem; }

/* ── Team bios (Galleries-driven) ───────────────────────────────────────────
   Each department is a gallery; a person's "Optional full description" becomes
   an expandable bio panel shown below the row of cards. */
.team-band + .team-band { padding-top: 0; }
.team-card { display: flex; flex-direction: column; }
.team-card figcaption { flex: 1; }
.team-more {
	margin: 0 1rem 1rem; align-self: flex-start; cursor: pointer;
	background: var(--brand); border: 1px solid var(--brand); color: var(--btn-ink);
	font: inherit; font-size: .82rem; font-weight: 600; padding: .38rem .9rem; border-radius: 3px;
	transition: background .15s, border-color .15s, color .15s;
}
.team-more:hover { background: var(--deep); border-color: var(--deep); color: #fff; }
.team-more[aria-expanded="true"] { background: var(--deep); border-color: var(--deep); color: #fff; }

.team-bios { margin-top: 1.5rem; }
.team-bio {
	position: relative; background: var(--bg-alt); border-radius: var(--radius);
	padding: 2.5rem 3.5rem 2.25rem 2.5rem;
}
.team-bio[hidden] { display: none; }
.team-bio h3 { font-size: 1.6rem; margin-bottom: 1rem; }
.team-bio p { color: var(--slate); }
.team-bio p:last-child { margin-bottom: 0; }
.team-bio-close {
	position: absolute; top: 1.2rem; right: 1.4rem;
	background: none; border: 0; cursor: pointer; line-height: 1;
	font-size: 1.9rem; color: var(--slate); padding: .1rem .3rem;
}
.team-bio-close:hover { color: var(--ink); }

/* ── FAQ accordion ────────────────────────────────────────────────────────── */
.faqs details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .8rem; box-shadow: var(--shadow); }
.faqs summary { cursor: pointer; padding: 1.1rem 1.3rem; font-weight: 700; color: var(--ink); list-style: none; position: relative; padding-right: 2.6rem; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: "+"; position: absolute; right: 1.3rem; font-size: 1.4rem; line-height: 1; color: var(--brand-dark); }
.faqs details[open] summary::after { content: "\2212"; }
.faqs details > p { padding: 0 1.3rem 1.2rem; margin: 0; color: var(--muted); }

/* ── Full-bleed break image (used between blocks on /services pages) ────────── */
.full-bleed { width: 100%; }
.full-bleed-img { display: block; width: 100%; height: 420px; object-fit: cover; }

/* ── Additional services carousel ────────────────────────────────────────── */
.svc-carousel-wrap { display: grid; grid-template-columns: 1fr 2fr; gap: 2.5rem; align-items: center; }
.svc-intro h2 { margin-bottom: .6rem; }
.svc-nav { display: flex; gap: .8rem; margin-top: 1.4rem; }
.svc-nav button { background: var(--brand); border: 1px solid var(--brand); color: var(--btn-ink); width: 40px; height: 40px; border-radius: 50%; font-size: 1.4rem; cursor: pointer; line-height: 1; transition: background .15s, border-color .15s; }
.svc-nav button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
/* Horizontal scroll track: native swipe on touch, trackpad scroll, and
   pointer-drag on desktop (see index.php). Scroll-snap keeps cards aligned;
   the arrows just scroll the track, so they are a secondary control rather
   than the only way to move. */
.svc-slides {
	display: flex; gap: 1.2rem;
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; cursor: grab;
}
.svc-slides::-webkit-scrollbar { display: none; }
.svc-slides > .service-cover {
	flex: 0 0 calc(50% - .6rem);   /* two cards in view, matching the source site */
	scroll-snap-align: start; aspect-ratio: 4/3;
}
/* While dragging, drop snapping so the track follows the cursor 1:1. */
.svc-slides.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.svc-slides.is-dragging .service-cover { pointer-events: none; }

/* ── CTA band (single full-width CTA, e.g. closing "Get in touch" band) ─────── */
.cta-single { color: #fff; border-radius: var(--radius); padding: 3.2rem 2.5rem; text-align: center; }
.cta-single h2 { color: #fff; margin-bottom: .6rem; }
.cta-single p { color: rgba(255,255,255,.9); max-width: 640px; margin: 0 auto 1.4rem; }
.cta-single .btn.ghost { background: #fff; color: var(--slate); border-color: #fff; }
.cta-single .btn.ghost:hover { background: rgba(255,255,255,.85); color: var(--slate); }

/* ── Contact page ───────────────────────────────────────────────────────────
   Heading and quote button on the left against white; contact details in a
   dark panel that bleeds off the right edge of the viewport. The shared
   --gutter keeps the left column aligned with the 1180px content column while
   the panel runs to the window edge. */
.contact-hero {
	--gutter: max(1.25rem, calc((100vw - var(--maxw)) / 2));
	display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
}
.contact-hero-left { padding: 3.5rem 3rem 3.5rem var(--gutter); align-self: center; }
.contact-hero-left h1 { margin-bottom: 1.6rem; }
.contact-hero-panel {
	background: var(--deep); color: #fff;
	padding: 3.5rem var(--gutter) 3.5rem 3.5rem;
}
.contact-hero-panel h4 { color: var(--brand); font-size: 1rem; margin: 0 0 .35rem; font-weight: 700; }
.contact-hero-panel .contact-item { margin-bottom: 2rem; }
.contact-hero-panel .contact-item:last-child { margin-bottom: 0; }
.contact-hero-panel p { margin: 0; color: #fff; }
.contact-hero-panel a { color: #fff; }
.contact-hero-panel a:hover { color: var(--brand); }
.contact-socials { display: flex; gap: 1rem; margin-top: .5rem; }
.contact-socials a { color: #fff; display: inline-flex; }
.contact-socials svg { width: 19px; height: 19px; fill: currentColor; }
.contact-socials a:hover { color: var(--brand); }

/* ── Map embed (e.g. About Us "Our Area") ────────────────────────────────────── */
.map-embed { width: 100%; height: 430px; border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ── 4-up photo gallery (About Us) ──────────────────────────────────────── */
.gallery-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.5rem; }
.gallery-4 img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius); }

/* ── Generic gallery resource (attached via "Add resource") ─────────────────── */
.resource-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.resource-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }

/* ── Document accordions + cards (regulations pages) ────────────────────────
   A <details> per group with a circular lime toggle, opening onto a grid of
   document cards: PDF first-page thumbnail, title link and Download link.
   Thumbnails are generated with pdftoppm into media/regulations/thumbs/. */
.doc-accordion {
	background: var(--bg-alt); border-radius: var(--radius); margin-bottom: 1.2rem;
	padding: 0 1.5rem;
}
.doc-accordion > summary {
	cursor: pointer; list-style: none; position: relative;
	padding: 1.4rem 4rem 1.4rem .5rem;
	font-size: 1.4rem; color: var(--slate);
}
.doc-accordion > summary::-webkit-details-marker { display: none; }
/* Circular lime toggle; the arrow flips when the group is open. */
.doc-accordion > summary::after {
	content: "\2193"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--brand); color: #fff;
	display: grid; place-items: center; font-size: 1.05rem; line-height: 1;
}
.doc-accordion[open] > summary::after { content: "\2191"; }

.doc-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem 2rem;
	padding: .5rem .5rem 2rem;
}
/* Prose inside an accordion (e.g. the application forms on /apply-now). */
.accordion-body { padding: .25rem .5rem 1.8rem; max-width: 70ch; }
.accordion-body p:last-child { margin-bottom: 0; }
.apply-cta { margin: 1.8rem 0 0; }
.doc-card { display: flex; flex-direction: column; }
.doc-thumb {
	display: block; background: #fff; border: 1px solid var(--line); border-radius: 4px;
	overflow: hidden; margin-bottom: .8rem;
	transition: box-shadow .18s, transform .18s;
}
/* Thumbnails are the top half of the document (420x297), so the title block is
   always in frame; they fill the column width rather than being capped. */
.doc-thumb img { width: 100%; height: auto; display: block; aspect-ratio: 420 / 297; object-fit: cover; object-position: top; }
.doc-thumb:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.doc-title { color: #1a4fd6; font-size: .94rem; line-height: 1.3; }
.doc-title:hover { text-decoration: underline; }
.doc-dl {
	margin-top: .45rem; font-size: .82rem; font-weight: 700; color: var(--slate);
	align-self: flex-start;
}
.doc-dl:hover { color: var(--brand-dark); }

/* Two promo cards (Archived regulations / Make a payment) sharing .res-card. */
.promo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.res-card .res-icon { width: 52px; height: auto; margin-bottom: 1.4rem; }

/* Inline link styled as a prompt — used for the "how to apply" address on a
   vacancy. Underlined as well as coloured, so it is still identifiable as a
   link without relying on colour alone. */
.link-brand { color: var(--brand-dark); font-weight: 600; text-decoration: underline; }
.link-brand:hover { color: var(--deep); }

/* ── Careers vacancies ──────────────────────────────────────────────────── */
.vacancy-list { margin-top: 1.5rem; }
.vacancy {
	display: flex; gap: 2rem; align-items: center; justify-content: space-between;
	background: var(--bg-alt); border-radius: var(--radius); padding: 1.8rem 2rem;
	margin-bottom: 1rem; flex-wrap: wrap;
}
.vacancy-info { flex: 1 1 420px; min-width: 0; }
.vacancy-info h3 { margin: 0 0 .3rem; }
.vacancy-info p { margin: 0; }
.vacancy-meta { color: var(--muted); font-size: .88rem; margin-bottom: .6rem !important; }
.vacancy-action { flex: 0 0 auto; }
.vacancy-note { margin-top: 1.8rem; color: var(--muted); }
.vacancy-empty { background: var(--bg-alt); border-radius: var(--radius); padding: 1.8rem 2rem; color: var(--muted); margin-top: 1.5rem; }

/* ── News article body ──────────────────────────────────────────────────────
   Post copy is migrated WordPress markup, so it arrives with its own figures,
   galleries and inline widths. These rules tame it into the centred column:
   media is capped to the column, stray inline sizes are overridden, and the
   WordPress gallery classes are laid out as a simple grid. */
.post-date { font-size: .85rem; color: var(--muted); margin-bottom: .6rem; }
.post-date a { color: var(--brand-dark); }
.post-body { padding-top: 1.75rem; }
.post-body img,
.post-body video,
.post-body iframe { max-width: 100%; height: auto; border-radius: var(--radius); }
.post-body figure { margin: 1.6rem 0; max-width: 100%; }
.post-body figure img { width: 100%; }
.post-body figcaption { font-size: .85rem; color: var(--muted); margin-top: .5rem; }
.post-body h2 { font-size: 1.5rem; margin-top: 2rem; }
.post-body h3 { font-size: 1.15rem; margin-top: 1.6rem; }
.post-body p { margin-bottom: 1.1rem; }
.post-body a { color: var(--brand-dark); text-decoration: underline; }
.post-body ul, .post-body ol { padding-left: 1.4rem; margin-bottom: 1.1rem; }
.post-body li { margin-bottom: .4rem; }
/* WordPress gallery markup: nested figures laid out as a responsive grid. */
.post-body .wp-block-gallery,
.post-body .has-nested-images {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1rem; margin: 1.6rem 0;
}
.post-body .wp-block-gallery figure,
.post-body .has-nested-images figure { margin: 0; }
/* Migrated markup carries inline width/height attributes from the old theme. */
.post-body img[width], .post-body img[height] { width: 100%; height: auto; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer { background: var(--deep); color: rgba(255,255,255,.8); padding-top: 3.5rem; border-top: 4px solid var(--brand); font-size: .88rem; }
/* Footer spans the viewport like the header; padding rather than a max-width column. */
.site-footer .wrap { max-width: none; padding-inline: 2rem; }
.foot-contact { text-align: right; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 2rem; padding-bottom: 2.5rem; }
/* The global p rule sets an explicit 18px, which would otherwise beat the
   footer's smaller inherited size. Letting footer paragraphs inherit means
   each block controls its own scale — the columns at .88rem, the bottom bar
   at .8rem — rather than each one needing its own override. */
.site-footer p { font-size: inherit; }
.site-footer h4 { color: #fff; font-size: .92rem; margin-bottom: .9rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: rgba(255,255,255,.8); }
.site-footer a:hover { color: var(--brand); }
.foot-brand img { height: 46px; margin-bottom: 1rem; }
.foot-brand p { max-width: 38ch; }
.foot-brand .socials { margin-top: 1rem; display: flex; gap: .6rem; }
.foot-brand .socials a { margin-right: 0; }
.foot-brand .social-ico { background: rgba(255,255,255,.12); }
.foot-brand .social-ico:hover { background: var(--brand-dark); }
.footer-bar { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; text-align: center; padding-top: 1.2rem; padding-bottom: 1.2rem; font-size: .8rem; }
/* Legal row: hairline above, links wrap on narrow screens. */
.footer-legal {
	display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; align-items: center; justify-content: center;
	border-top: 1px solid rgba(255,255,255,.22);
	padding-top: 1.1rem; padding-bottom: 1.6rem; font-size: .78rem; text-align: center;
}
.footer-legal a { color: rgba(255,255,255,.8); }
.footer-legal a:hover { color: var(--brand); }
.footer-bar p { margin: 0; }

/* ── Scroll reveal ───────────────────────────────────────────────────────────
   Elements fade in and rise slightly as they scroll into view. Two safety
   gates: the hidden state only applies under `.js` (added to <html> by an
   inline script in the head), so content stays visible if JavaScript never
   runs; and it is skipped entirely under prefers-reduced-motion.
   Uses the standalone `translate` property rather than `transform` so it
   never fights the `transform: translateY(-3px)` hover lift on .service-cover. */
@media (prefers-reduced-motion: no-preference) {
	.js .services-grid .service-cover,
	.js .cards.services .card,
	.js .page-hero h1,
	.js .page-hero .lead {
		opacity: 0; translate: 0 20px;
		transition: opacity .55s ease, translate .55s ease;
	}
	.js .services-grid .service-cover.is-visible,
	.js .cards.services .card.is-visible,
	.js .page-hero h1.is-visible,
	.js .page-hero .lead.is-visible { opacity: 1; translate: none; }

	/* Stagger. In .services-grid the first child is the text intro, so the five
	   cover cards are children 2–6. */
	.js .page-hero .lead { transition-delay: .08s; }
	.js .services-grid .service-cover:nth-child(3) { transition-delay: .06s; }
	.js .services-grid .service-cover:nth-child(4) { transition-delay: .12s; }
	.js .services-grid .service-cover:nth-child(5) { transition-delay: .18s; }
	.js .services-grid .service-cover:nth-child(6) { transition-delay: .24s; }
	.js .cards.services .card:nth-child(2) { transition-delay: .06s; }
	.js .cards.services .card:nth-child(3) { transition-delay: .12s; }
	.js .cards.services .card:nth-child(4) { transition-delay: .18s; }
	.js .cards.services .card:nth-child(5) { transition-delay: .24s; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	/* The desktop hero scrim is a LEFT-TO-RIGHT gradient, and its stops are
	   percentages of the viewport width. That works while the text column is
	   narrower than the white part, but on a phone the copy spans nearly the
	   full width and its right-hand end sits past the 72% stop, i.e. over bare
	   photograph with no backing at all. A flat wash gives every line the same
	   treatment regardless of how wide it runs. 70% was chosen deliberately to
	   keep detail visible in the photograph -- a stronger value reads as a
	   near-white panel and loses the image entirely.
	   (The old WordPress site had the same fault -- it used a 90deg gradient
	   too -- so this is a deliberate improvement, not a fidelity regression.) */
	.hero-slider::after {
		background: rgba(255,255,255,.7);
	}
	/* clamp's 2.2rem floor was set for desktop and never reduced, so the
	   heading kept its full size on a 390px screen and pushed the buttons
	   toward the fold. */
	.hero-slider h1 { font-size: clamp(1.75rem, 6.5vw, 2.4rem); }

	/* Horizontal overflow. Below this breakpoint the nav collapses into the
	   drawer and .header-actions turns into a row, so the logo (61px tall and
	   correspondingly wide) sits alongside BOTH header CTAs. On a phone that
	   totals more than the viewport width, and because nothing clips it the
	   whole page becomes draggable sideways -- the second button is what you
	   find out there. The drawer already carries its own copy of both CTAs
	   (.site-nav .cta-li is set to display:block here), so only the primary
	   one needs to stay in the header.
	   NB: do not "fix" this with overflow-x:hidden on body -- the header is
	   position:sticky and that combination breaks sticking in several
	   browsers. Remove the overflowing element instead. */
	.header-ctas .btn:not(:first-child) { display: none; }

	/* "Our Services" gap. .services-intro is simply the first item in a
	   two-column grid, so it shared row 1 with the Residential card. The
	   intro's paragraph is far taller than a square card, and align-items is
	   start, so the card pinned to the top of the row and left a tall white
	   gap beneath it before row 2 began. Giving the intro its own full-width
	   row removes the gap and stops the paragraph being squeezed into a
	   two-or-three-word column. */
	.services-intro { grid-column: 1 / -1; }

	.split, .two-cta, .testimonials, .team-split, .process-split, .svc-carousel-wrap, .contact-hero { grid-template-columns: 1fr; }
	.foot-contact { text-align: left; }
	.contact-hero-left { padding: 2.5rem 1.25rem 1.5rem; }
	.contact-hero-panel { padding: 2.5rem 1.25rem; }
	.svc-slides > .service-cover { flex: 0 0 78%; }
	.full-bleed-img { height: 260px; }
	.cards.services, .cards.news { grid-template-columns: repeat(2, 1fr); }
	.team-grid { grid-template-columns: repeat(2, 1fr); }
	.team-bio { padding: 2.2rem 1.5rem 1.5rem; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.reg-list.cols { columns: 1; }
	.services-grid { grid-template-columns: 1fr 1fr; }
	.res-cards, .promo-pair { grid-template-columns: 1fr; }
	.doc-grid { grid-template-columns: 1fr 1fr; }
	.what-we-do-grid, .cols-3 { grid-template-columns: 1fr; }
	.gallery-4 { grid-template-columns: 1fr 1fr; }
	.trusted-gallery { gap: .8rem; }
	.trusted-img-1, .trusted-img-2 { width: 50%; margin: 0; }
	.team-faces { justify-content: flex-start; }
	.team-face { width: calc((50% - .5rem) * 0.85); }
	.li-main { grid-template-columns: 1fr; gap: 2rem; }
	.li-posts { grid-template-columns: 1fr; gap: 1.5rem; }
	.li-post { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; }
	.li-posts .li-post:last-child { border-bottom: 0; padding-bottom: 0; }

	/* Drop the footer-overlap effect below tablet width — keep the card in normal flow. */
	.contact-promo-section { padding-top: 3rem; padding-bottom: 4rem; }
	.contact-promo { margin-bottom: 0; }
	.is-home .site-footer { padding-top: 3.5rem; }

	/* The burger was rendering but invisible. .header-inner is a flex row in
	   which .brand and .header-actions are both flex:0 0 auto, so neither can
	   shrink -- leaving .navburger (which had no flex declaration, so the
	   default flex-shrink:1) as the ONLY shrinkable item. The 61px-tall logo
	   plus the CTA overflow a phone by more than 44px, so the burger absorbed
	   the whole overflow and collapsed to zero width. Its bars are height-only
	   blocks with no intrinsic width, so min-content did not stop it at 0 and
	   the menu vanished with no way to open the nav.
	   Two changes keep it: pin the burger's basis so it cannot shrink, and
	   bring the logo down to a sensible mobile size so the row fits at all. */
	/* order:1 moves the burger past .header-actions so it sits to the RIGHT of
	   the Apply now button. Done with flex order rather than by moving the
	   markup, because the <input type="checkbox"> that drives the drawer has to
	   stay before .site-nav in the DOM for the ~ sibling selector to work. */
	.navburger { display: flex; flex: 0 0 30px; width: 30px; order: 1; }
	.brand img { height: 44px; }
	/* Let the CTA give way before anything else if a narrow device still runs
	   out of room -- better a squeezed button than a missing menu. margin-left
	   pushes the actions + burger group to the right, since .site-nav is
	   position:fixed here and so no longer fills the gap as a flex item. */
	.header-actions { flex: 0 1 auto; min-width: 0; margin-left: auto; }
	.header-ctas .btn { white-space: nowrap; }
	.site-nav {
		position: fixed; inset: 76px 0 auto 0; background: #fff; border-bottom: 1px solid var(--line);
		max-height: 0; overflow: hidden; transition: max-height .25s ease; box-shadow: var(--shadow);
	}
	.navtoggle:checked ~ .site-nav { max-height: 90vh; overflow: auto; }
	.site-nav ul { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: .5rem 1rem 1.5rem; }
	.site-nav > ul > li { border-bottom: 1px solid var(--line); }
	.site-nav .active > a { box-shadow: none; color: var(--brand-dark); }
	.sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 .5rem 1rem; background: transparent; }
	.sub li { background: transparent; border-radius: 0; }
	.sub a, .sub li:first-child a, .sub li:last-child a { color: var(--ink); padding: .4rem .5rem; border-radius: 0; }
	.has-sub > a::after { display: none; }
	/* Every direct child li in the drawer carries a bottom hairline as a row
	   separator. On the CTA rows the button is narrower than the li, so that
	   hairline carried on past the button and read as a stray grey line beside
	   it. The CTAs are buttons rather than menu rows, so they do not want the
	   separator at all. */
	.cta-li { margin-top: .8rem; }
	.site-nav > ul > li.cta-li { border-bottom: 0; }
	.site-nav .cta-li { display: block; }
	.header-inner { padding: .5rem 1.25rem; gap: 1rem; min-height: 76px; }
	.header-actions { flex-direction: row; align-items: center; gap: .6rem; }
	.header-contact { display: none; }
	.site-footer .wrap { padding-inline: 1.25rem; }
}
@media (max-width: 560px) {
	.cards.services, .cards.news, .team-grid, .footer-grid { grid-template-columns: 1fr; }
	.services-grid { grid-template-columns: 1fr 1fr; }
	.res-cards, .promo-pair { grid-template-columns: 1fr; }
	.doc-grid { grid-template-columns: 1fr 1fr; }
	.service-covers.row-top, .service-covers.row-bottom { grid-template-columns: 1fr; }
	.contact-promo .promo-mark { display: none; }
	.band { padding: 3rem 0; }
}

/* ── Cookie consent banner ──────────────────────────────────────────────────
   Styled in the Hydra CMS visual language (dark glass chrome, blue accent)
   rather than the MC Plan palette, so the consent UI reads as platform
   furniture rather than page content. Tokens mirror hydra/styles/hydra.css.
   Hidden until the JS decides it is needed, so it never flashes for visitors
   who have already chosen. */
.cc-banner {
	position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 300;
	max-width: 940px; margin-inline: auto;
	background: rgba(20, 20, 28, .82);
	-webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
	border-radius: 14px; padding: 1.4rem 1.6rem;
	color: #f2f2f2; font-size: .9rem; line-height: 1.5;
}
.cc-banner[hidden] { display: none; }
.cc-row { display: flex; gap: 1.6rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cc-copy { flex: 1 1 340px; min-width: 0; }
.cc-copy strong { display: block; color: #fff; font-size: .98rem; margin-bottom: .25rem; }
.cc-copy p { margin: 0; color: #b8b8c4; font-size: .86rem; }
.cc-copy a { color: #64d2ff; text-decoration: underline; }
.cc-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

.cc-btn {
	font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
	padding: .55rem 1.15rem; border-radius: 8px; border: 1px solid transparent;
	transition: background .15s, border-color .15s, color .15s;
}
.cc-btn-accept { background: #0a84ff; color: #fff; border-color: #0a84ff; }
.cc-btn-accept:hover { background: #0060df; border-color: #0060df; }
.cc-btn-reject { background: rgba(255,255,255,.06); color: #f2f2f2; border-color: rgba(255,255,255,.20); }
.cc-btn-reject:hover { background: rgba(255,255,255,.12); }
.cc-btn-prefs { background: none; color: #b8b8c4; border-color: transparent; text-decoration: underline; padding-inline: .4rem; }
.cc-btn-prefs:hover { color: #f2f2f2; }

/* Preferences drawer */
.cc-prefs { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.12); }
.cc-prefs[hidden] { display: none; }
.cc-opt { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; padding: .6rem 0; }
.cc-opt h4 { margin: 0 0 .15rem; font-size: .88rem; color: #fff; font-weight: 600; }
.cc-opt p { margin: 0; font-size: .8rem; color: #82828c; max-width: 62ch; }
.cc-opt input { width: 17px; height: 17px; accent-color: #0a84ff; cursor: pointer; flex: 0 0 auto; margin-top: .2rem; }
.cc-opt input:disabled { cursor: default; opacity: .55; }
.cc-prefs-save { margin-top: .9rem; }

@media (max-width: 640px) {
	.cc-banner { padding: 1.1rem 1.1rem; left: .6rem; right: .6rem; bottom: .6rem; }
	.cc-actions { width: 100%; }
	.cc-actions .cc-btn-accept, .cc-actions .cc-btn-reject { flex: 1 1 auto; }
}