/*
Theme Name: Proud Bathrooms
Theme URI: https://sonic777.ai
Author: Sonic (sonic777.ai)
Description: Custom Gutenberg theme for Proud Bathroom Fitters Plymouth — premium-but-approachable bathroom installation authority site. Mobile-first responsive foundation, brand design tokens, LocalBusiness + Service schema, field-driven editable homepage.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
Text Domain: proud-bathrooms
*/

/* =========================================================================
   DESIGN TOKENS  (single source of truth — mirrors STYLE-GUIDE.md)
   ========================================================================= */
:root{
  /* colour */
  --c-ink:#15212B; --c-navy:#1F3A52; --c-navy-700:#274C6B;
  --c-teal:#2E8B8B; --c-brass:#B98A4B; --c-brass-600:#A2763B;
  --c-brass-text:#8A5E2C; /* WCAG AA: brass for small text/links on light (>=4.5:1 on white) */
  --c-cloud:#F4F7F9; --c-sand:#F7F3EC; --c-line:#E2E8ED;
  --c-white:#FFFFFF; --c-success:#2F7D5B;
  /* type */
  --ff-head:"Poppins","Segoe UI",system-ui,sans-serif;
  --ff-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-hero:clamp(2.25rem,5vw + 1rem,4rem);
  --fs-h1:clamp(1.9rem,3vw + 1rem,3rem);
  --fs-h2:clamp(1.5rem,2vw + .75rem,2.25rem);
  --fs-h3:clamp(1.2rem,1vw + .6rem,1.5rem);
  --fs-body:clamp(1rem,.4vw + .9rem,1.125rem);
  --fs-sm:.9rem;
  /* layout */
  --gutter:clamp(1rem,4vw,2rem);
  --maxw:1180px;
  --radius:12px; --radius-sm:8px;
  --shadow:0 6px 24px rgba(21,33,43,.06);
  --shadow-lg:0 18px 50px rgba(21,33,43,.12);
  --space-section:clamp(3rem,7vw,6rem);
}

/* =========================================================================
   RESET / BASE
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--ff-body);font-size:var(--fs-body);line-height:1.65;color:var(--c-ink);background:var(--c-white);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--ff-head);line-height:1.15;color:var(--c-navy);margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3);font-weight:600}
p{margin:0 0 1.1em;max-width:68ch}
a{color:var(--c-navy-700);text-decoration-color:var(--c-brass);text-underline-offset:3px}
a:hover{color:var(--c-brass-600)}
/* GLOBAL RESPONSIVE MEDIA */
img,video,svg{max-width:100%;height:auto;display:block}
ul,ol{margin:0 0 1.1em;padding-left:1.2em}
strong{color:var(--c-ink)}
:focus-visible{outline:2px solid var(--c-brass);outline-offset:2px;border-radius:3px}
/* Skip link — visually hidden until focused, then revealed (WCAG 2.4.1) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--c-navy);color:#fff;
  padding:.75rem 1.25rem;border-radius:0 0 var(--radius-sm) 0;font-family:var(--ff-head);font-weight:600;text-decoration:none}
.skip-link:focus,.skip-link:focus-visible{left:0;outline:2px solid var(--c-brass);outline-offset:2px}

/* =========================================================================
   LAYOUT PRIMITIVES  (mobile-first, every page inherits)
   ========================================================================= */
.container{width:min(100% - 2rem,var(--maxw));margin-inline:auto}
.container-wide{width:min(100% - 2rem,1340px);margin-inline:auto}
.section{padding-block:var(--space-section)}
.section--cloud{background:var(--c-cloud)}
.section--sand{background:var(--c-sand)}
.section--navy{background:var(--c-navy);color:#DCE6EE}
.section--navy h1,.section--navy h2,.section--navy h3{color:#fff}
.section--navy a{color:#fff}
.center{text-align:center}
.eyebrow{font-family:var(--ff-head);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--c-brass-text);margin:0 0 .6rem}
.section--navy .eyebrow{color:var(--c-brass)}
.lead{font-size:clamp(1.05rem,1vw + .9rem,1.3rem);color:#42535f;max-width:60ch}
.section--navy .lead{color:#C3D2DE}
.center .lead,.center p{margin-inline:auto}

/* GRID — auto-fit, never overflows narrow screens */
.grid{display:grid;gap:var(--gutter);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.cols-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.stack>*+*{margin-top:1rem}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--ff-head);font-weight:600;font-size:1rem;
  padding:.9em 1.6em;border-radius:var(--radius-sm);border:2px solid transparent;cursor:pointer;
  text-decoration:none;transition:transform .15s ease,background .15s ease,box-shadow .15s ease;min-height:44px}
.btn--primary{background:var(--c-brass);color:#15212B}
.btn--primary:hover{background:var(--c-brass-600);color:#15212B;transform:translateY(-1px);box-shadow:var(--shadow)}
.btn--secondary{background:var(--c-navy);color:#fff}
.btn--secondary:hover{background:var(--c-navy-700);color:#fff;transform:translateY(-1px)}
.btn--ghost{background:transparent;border-color:currentColor;color:var(--c-navy)}
.btn--ghost:hover{background:var(--c-navy);color:#fff;border-color:var(--c-navy)}
.section--navy .btn--ghost{color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem}
.center .btn-row{justify-content:center}

/* =========================================================================
   CARDS / COMPONENTS
   ========================================================================= */
.card{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--radius);box-shadow:var(--shadow);
  overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card__media{aspect-ratio:4/3;overflow:hidden;background:var(--c-cloud)}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__body{padding:1.3rem 1.4rem 1.5rem}
.card__body h3{margin-bottom:.35em}
.card__body p{font-size:.97rem;color:#46555f;margin-bottom:1em}
.card a.card__link{font-family:var(--ff-head);font-weight:600;color:var(--c-brass-text);text-decoration:none}
.card a.card__link:hover{text-decoration:underline}
.card--link{text-decoration:none;color:inherit}

/* area chips */
.chip-grid{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:.5em 1.05em;border:1px solid var(--c-line);
  border-radius:999px;background:#fff;color:var(--c-navy);font-weight:500;text-decoration:none;font-size:.95rem;transition:.15s}
.chip:hover{border-color:var(--c-brass);background:var(--c-sand);color:var(--c-navy-700)}

/* trust badges */
.trust-row{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;justify-content:center}
.trust-badge{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.92rem;color:var(--c-navy)}
.trust-badge svg{flex:0 0 auto}
.section--navy .trust-badge{color:#EAF1F6}

/* stat blocks */
.stat{ text-align:center }
.stat__num{font-family:var(--ff-head);font-weight:700;font-size:clamp(2rem,4vw,3rem);color:var(--c-brass);line-height:1}
.stat__label{font-size:.95rem;color:#52616b;margin-top:.3rem}
.section--navy .stat__label{color:#B9C8D4}

/* feature list with ticks */
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding-left:1.9rem;margin-bottom:.7rem}
.ticks li::before{content:"";position:absolute;left:0;top:.15em;width:1.25rem;height:1.25rem;border-radius:50%;
  background:var(--c-success);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/0.95rem no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/0.95rem no-repeat}

/* hero */
.hero{position:relative;background:var(--c-navy);color:#fff;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(21,33,43,.86) 0%,rgba(31,58,82,.72) 45%,rgba(31,58,82,.35) 100%)}
.hero__inner{position:relative;z-index:1;padding-block:clamp(3.5rem,9vw,7rem)}
.hero h1{color:#fff;font-size:var(--fs-hero);max-width:16ch}
.hero p.lead{color:#D7E2EB;max-width:54ch}
.hero .btn-row{margin-top:1.6rem}
.hero__trust{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.hero__trust span{display:inline-flex;align-items:center;gap:.45em;font-size:.9rem;color:#CBD8E2;font-weight:500}

/* before/after */
.ba{display:grid;gap:.5rem;grid-template-columns:1fr 1fr}
.ba figure{margin:0}
.ba img{border-radius:var(--radius-sm);width:100%;aspect-ratio:4/3;object-fit:cover}
.ba figcaption{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:#6a7882;margin-top:.4rem;font-weight:600}

/* breadcrumb */
.breadcrumb{font-size:.85rem;color:#6a7882;padding-block:1rem}
.breadcrumb a{color:var(--c-navy-700);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

/* prose (page body) */
.prose{max-width:none}
.prose h2{margin-top:1.8em} .prose h3{margin-top:1.4em}
.prose img{border-radius:var(--radius);margin:1.5rem 0}
.prose blockquote{border-left:4px solid var(--c-brass);margin:1.5rem 0;padding:.4rem 0 .4rem 1.2rem;color:#3c4a54;font-style:italic}

/* page layout with sidebar */
.page-grid{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:1fr}
@media(min-width:992px){ .page-grid{grid-template-columns:minmax(0,1fr) 320px} }
.sidebar{align-self:start}
@media(min-width:992px){ .sidebar{position:sticky;top:96px} }
.sidebar .card__body{padding:1.4rem}

/* FAQ accordion (answer pages) */
.faq details{border:1px solid var(--c-line);border-radius:var(--radius-sm);margin-bottom:.8rem;background:#fff;overflow:hidden}
.faq summary{cursor:pointer;padding:1rem 1.2rem;font-family:var(--ff-head);font-weight:600;color:var(--c-navy);list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--c-brass);transition:.2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding:0 1.2rem 1.1rem}

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--c-line)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}
.brand{display:flex;align-items:baseline;gap:.4rem;text-decoration:none;font-family:var(--ff-head);line-height:1}
.brand b{font-weight:700;color:var(--c-navy);font-size:1.25rem}
.brand span{font-weight:500;color:var(--c-navy);font-size:1.25rem}
.brand i{display:block;font-style:normal;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c-brass-text);font-weight:600}
.brand .brand__mark{width:30px;height:30px;flex:0 0 auto;align-self:center}
.nav{display:none}
.nav a{font-family:var(--ff-head);font-weight:500;color:var(--c-navy);text-decoration:none;font-size:.97rem;padding:.4rem 0;position:relative}
.nav a:hover{color:var(--c-brass-600)}
.header-cta{display:none}
.nav-toggle{display:inline-flex;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer;min-height:44px;min-width:44px;align-items:center;justify-content:center}
.nav-toggle span{width:24px;height:2px;background:var(--c-navy);transition:.2s}
@media(min-width:980px){
  .nav{display:flex;gap:1.6rem;align-items:center}
  .header-cta{display:inline-flex}
  .nav-toggle{display:none}
}
/* mobile drawer */
.mobile-nav{position:fixed;inset:68px 0 0;background:#fff;transform:translateX(100%);transition:transform .25s ease;z-index:49;padding:1.5rem var(--gutter);overflow-y:auto;display:flex;flex-direction:column;gap:.2rem}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav a{padding:.9rem .2rem;border-bottom:1px solid var(--c-line);text-decoration:none;color:var(--c-navy);font-family:var(--ff-head);font-weight:500;font-size:1.05rem}
.mobile-nav .btn{margin-top:1rem}
@media(min-width:980px){ .mobile-nav{display:none} }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{background:var(--c-ink);color:#AEBDC8;padding-block:clamp(2.5rem,6vw,4rem) 1.5rem;font-size:.95rem}
.site-footer h4{color:#fff;font-size:1rem;margin-bottom:.9rem}
.site-footer a{color:#C4D1DB;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.footer-cols a{display:block;padding:.25rem 0}
.footer-bottom{border-top:1px solid #2a3a45;margin-top:2.5rem;padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.85rem;color:#8597a3}

/* =========================================================================
   STICKY MOBILE CTA BAR
   ========================================================================= */
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:48;display:flex;gap:.5rem;padding:.6rem;background:rgba(31,58,82,.97);backdrop-filter:blur(6px);box-shadow:0 -4px 20px rgba(0,0,0,.18)}
.mobile-cta .btn{flex:1;justify-content:center;font-size:.95rem;padding:.75em 1em}
@media(min-width:768px){ .mobile-cta{display:none} }
body{padding-bottom:64px}
@media(min-width:768px){ body{padding-bottom:0} }

/* =========================================================================
   MOTION (respect reduced-motion)
   ========================================================================= */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* =========================================================================
   GUTENBERG BLOCK ALIGNMENT SUPPORT
   ========================================================================= */
.entry-content>*{margin-inline:auto}
.alignfull{width:100%}
.alignwide{width:min(100% - 2rem,1340px);margin-inline:auto}
.wp-block-buttons{display:flex;gap:.8rem;flex-wrap:wrap}
.wp-block-image img{border-radius:var(--radius)}

/* =========================================================================
   SONIC BOOM — conversion + polish pass
   ========================================================================= */
/* 1. Secondary "Call" CTA — was dark-navy text on the dark hero (invisible).
      Now a clear glass button on dark, and a solid readable button on light. */
.hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.10)}
.hero .btn--ghost:hover{background:#fff;color:var(--c-navy);border-color:#fff}
.btn--ghost{background:rgba(31,58,82,.04)} /* light-bg ghost gets a faint fill so it never disappears */
.btn--ghost:hover{background:var(--c-navy);color:#fff}

/* 2. Oversized figures — long price ranges (£4,075–£10,870) used the big stat
      size meant for short numbers like "16". Scale them to fit. */
.stat__num{font-size:clamp(1.45rem,.8vw + 1.15rem,2.05rem);overflow-wrap:break-word;letter-spacing:-.02em}

/* 3. In-article sections (service / area / answer pages render inside .prose):
      strip the full-page section padding so coloured bands become tidy contained
      blocks with even vertical rhythm instead of huge erratic gaps. */
.prose .section{padding-block:1.5rem}
.prose>.section:first-child,.prose>.entry-content>.section:first-child{padding-top:.25rem}
.prose .section--cloud,.prose .section--sand{background:var(--c-cloud);border:1px solid var(--c-line);border-radius:16px;padding:1.7rem 1.6rem;margin-block:1.7rem}
.prose .section--sand{background:var(--c-sand)}
.prose .section--navy{border-radius:16px;padding:1.9rem 1.7rem;margin-block:1.9rem}
.prose .container{width:auto;margin-inline:0;padding-inline:0}
.prose h2{margin-top:1.5em} .prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.25em}
.prose .grid{margin-block:1.2rem}

/* 4. Make imagery carry more weight on text-heavy pages */
.prose figure{margin:1.9rem 0}
.prose figure img{width:100%;border-radius:16px;box-shadow:var(--shadow)}
.prose .grid figure{margin:0}

/* --- Services dropdown (nav) --- */
.nav-item--dd { position: relative; display: inline-flex; }
.nav-item--dd > a { display: inline-flex; align-items: center; gap: .25rem; }
.nav-dd {
	position: absolute; top: 100%; left: 0; min-width: 250px;
	background: #fff; border: 1px solid #e6eaee; border-radius: 12px;
	box-shadow: 0 14px 40px rgba(20,40,60,.16); padding: .4rem;
	display: flex; flex-direction: column; gap: 1px;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
	z-index: 60;
}
.nav-item--dd:hover .nav-dd,
.nav-item--dd:focus-within .nav-dd { opacity: 1; visibility: visible; transform: translateY(4px); }
.nav-dd a {
	padding: .6rem .8rem; border-radius: 8px; font-size: .95rem;
	color: #1F3A52; white-space: nowrap; text-decoration: none;
}
.nav-dd a:hover, .nav-dd a:focus { background: #f2f6f9; color: #8A5E2C; }
.nav-dd__all { font-weight: 600; color: #8A5E2C !important; border-top: 1px solid #eef2f5; margin-top: .2rem; }
/* Mobile: indent the service sub-items under the Services heading */
.mobile-nav .mnav-sub { padding-left: 1.4rem; font-size: .95rem; opacity: .9; }
@media (prefers-reduced-motion: reduce) { .nav-dd { transition: none; } }

/* --- Sonic Boom: image+text split rows & layout polish --- */
html { scroll-behavior: smooth; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.split__media img { width: 100%; height: 100%; max-height: 440px; object-fit: cover; border-radius: 16px; box-shadow: 0 12px 34px rgba(20,40,60,.14); display: block; }
.split__body > :first-child { margin-top: 0; }
.split--reverse .split__media { order: 2; }
@media (max-width: 860px) {
	.split { grid-template-columns: 1fr; gap: 1.5rem; }
	.split--reverse .split__media { order: 0; }
}
/* Even, full-height cards so grids never leave ragged gaps */
.grid.cols-2, .grid.cols-3, .grid.cols-4 { align-items: stretch; }
.grid > .card { height: 100%; display: flex; flex-direction: column; }
.grid > .card .card__body { display: flex; flex-direction: column; gap: .5rem; height: 100%; }
/* Showcase style cards with image + caption */
.style-card { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 28px rgba(20,40,60,.14); }
.style-card img { width: 100%; height: 240px; object-fit: cover; display: block; }
.style-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem 1rem; color: #fff; font-weight: 600; background: linear-gradient(to top, rgba(15,30,45,.82), rgba(15,30,45,0)); }
#enquiry { scroll-margin-top: 84px; }

/* --- Fix: loose inline content images were rendering huge on service/location pages --- */
.prose img, .entry-content img {
	max-height: 340px;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
@media (min-width: 700px) { .prose img, .entry-content img { max-height: 400px; } }
/* Re-assert the designed image components so the cap above never distorts them */
.split__media img { max-height: 440px !important; }
.style-card img { height: 240px !important; max-height: 240px !important; }
.card img, .card__media img, .hero__media img { max-height: none !important; }

/* === CORRECTIVE (supersedes earlier image attempts): stop content images overflowing
   the article column under the sidebar, and cap their height properly === */
.prose .grid > * { min-width: 0; }                 /* grid cells can shrink — no overflow */
.prose .grid:has(img) { align-items: start; }      /* image cells must not stretch tall */
.prose img {
	max-height: 300px !important;
	width: 100% !important;
	object-fit: cover !important;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	margin-block: 1.2rem;
}
/* homepage designed components keep their own sizes (front-page uses .entry-content, not .prose) */
.split__media img { max-height: 440px !important; height: 100% !important; }
.style-card img { height: 240px !important; max-height: 240px !important; }
.hero__media img { max-height: none !important; height: 100% !important; }

/* --- Fix: stat rows rendered inline ("£4,075–£10,870Full bathroom in Plymouth").
   .stat__num/.stat__label are <span>s with no display:block, so number + label
   ran together. Stack the label beneath the number site-wide. --- */
.stat__num{display:block}
.stat__label{display:block;margin-top:.4rem;line-height:1.3}

/* --- Elegant stat/price band (class-&-elegance redesign, site-wide) ---
   Plain 3-up number stack -> refined bordered spec band: warm sand panel,
   hairline dividers, tabular brass numerals, small-caps labels. Scoped with
   :has(> .stat) so other .grid.cols-3 rows (process steps, card grids) are
   untouched. Pure CSS on the mounted theme -> every page updates, no redeploy. */
.grid:has(> .stat){
  display:flex;
  flex-wrap:nowrap;
  gap:0;
  background:var(--c-sand);
  border:1px solid var(--c-line);
  border-radius:16px;
  overflow:hidden;
  margin:1.7rem 0;
  box-shadow:0 1px 2px rgba(21,33,43,.04);
}
.grid:has(> .stat) .stat{
  flex:1 1 0;
  min-width:0;
  padding:1.35rem .85rem;
  text-align:center;
}
.grid:has(> .stat) .stat + .stat{ border-left:1px solid var(--c-line); }
.stat__num{
  font-family:var(--ff-head);
  color:var(--c-brass-text);
  font-weight:700;
  font-size:clamp(1.3rem,.9rem + .85vw,1.7rem);
  letter-spacing:-.015em;
  line-height:1.1;
  white-space:nowrap;
  font-variant-numeric:tabular-nums lining-nums;
}
.stat__label{
  display:block;
  margin-top:.55rem;
  font-family:var(--ff-body);
  font-size:.68rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.085em;
  color:#6B7A85;
  line-height:1.35;
}
/* Navy sections */
.section--navy .grid:has(> .stat){ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.16); box-shadow:none; }
.section--navy .grid:has(> .stat) .stat + .stat{ border-left-color:rgba(255,255,255,.16); }
.section--navy .stat__num{ color:#E4C489; }
.section--navy .stat__label{ color:#B9C8D4; }
/* Stack cleanly on small screens: dividers turn horizontal */
@media (max-width:640px){
  .grid:has(> .stat){ flex-direction:column; }
  .grid:has(> .stat) .stat + .stat{ border-left:none; border-top:1px solid var(--c-line); }
  .section--navy .grid:has(> .stat) .stat + .stat{ border-top-color:rgba(255,255,255,.16); }
}

/* --- Mobile safety: kill horizontal scroll (off-canvas nav drawer + minor
   content overflow) and make dense rows wrap/scroll on small screens.
   overflow-x:clip (not hidden) so desktop position:sticky keeps working. --- */
html,body{overflow-x:clip;max-width:100%}
@media (max-width:640px){
  .btn-row{flex-wrap:wrap}
  .btn-row .btn{flex:1 1 auto}
  .prose table{display:block;width:100%;max-width:100%;overflow-x:auto}
  .chip-grid{max-width:100%}
}

/* ===================================================================
   SONIC BOOM design pass — contrast, card colour, even grids, CTA align.
   Site-wide (homepage / service / area pages).
   =================================================================== */
/* 1. Invisible text: white cards inside navy sections inherited light text. */
.section--navy .card,
.section--navy .card p,
.section--navy .card li,
.section--navy .card .lead,
.section--navy .card .ticks li{color:var(--c-ink)}
.section--navy .card h2,
.section--navy .card h3,
.section--navy .card h4{color:var(--c-navy)}
.section--navy .card a:not(.btn){color:var(--c-navy-700)}
.section--navy .card .eyebrow{color:var(--c-brass-text)}
.section--navy strong{color:#EAF1F6}
.hero .eyebrow,.section--navy .eyebrow{color:#E4C489}

/* 2. Even grids — base auto-fit rendered cols-2 as 3-up and cols-3 as 4-up on
   desktop, orphaning cards + leaving gaps. Pin to named column counts. */
@media (min-width:920px){
  .grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.grid > .card{height:100%}
/* image+text pairs: image fills the column height so no empty gap beside long text */
.grid.cols-2:has(> figure),
.grid.cols-2:has(> img){align-items:stretch}
.grid.cols-2 > figure{margin:0;height:100%;display:flex}
.grid.cols-2 > figure > img,
.grid.cols-2 > img{width:100%;height:100%;max-height:none;object-fit:cover;border-radius:14px}

/* 3. CTA consistency — centred everywhere; hero keeps left alignment. */
.btn-row{justify-content:center}
.hero .btn-row{justify-content:flex-start}

/* ---- Sonic Boom pass 2: grid stretch, button text, edge contrast ---- */
/* image+text cols-2 where the image sits in .card__media (aspect 4/3 -> short).
   Stretch the media cell to the row height so no gap beside long text. */
.grid.cols-2{align-items:stretch}
.grid.cols-2 > .card__media{aspect-ratio:auto;height:100%;min-height:260px;border-radius:14px;overflow:hidden}
.grid.cols-2 > .card__media > img{width:100%;height:100%;object-fit:cover}
/* keep real card grids tidy (cards already stretch) */

/* primary/brass buttons must keep dark text even inside navy sections */
.section--navy .btn--primary{color:#15212B}
.btn--primary{color:#15212B}
/* ghost/secondary buttons keep their own colour in navy */
.section--navy .btn--ghost{color:#fff;border-color:#fff}

/* emphasis inherits its context colour (fixes ink-on-dark <strong>) */
strong{color:inherit}

/* small-caps stat label on sand: nudge darker for AA (was 4.0:1) */
.stat__label{color:#5b6a75}

/* ---- Sonic Boom pass 3: image truly fills its stretched media cell (chained
   height:100% failed to resolve). Absolute-position it to fill -> no grey gap. */
.grid.cols-2 > .card__media{position:relative;height:100%;min-height:260px}
.grid.cols-2 > .card__media > img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover}

/* ---- Sonic Boom pass 4: force the image media-cell to stretch via align-self
   (beats the .prose .grid:has(img){align-items:start} rule) + fixed height for
   the absolute image to resolve against. Kills the grey gap for good. ---- */
.grid.cols-2:has(> .card__media){align-items:stretch}
.grid.cols-2 > .card__media{align-self:stretch;position:relative;aspect-ratio:auto;height:auto;min-height:280px;border-radius:14px;overflow:hidden}
.grid.cols-2 > .card__media > img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover}

/* ---- Sonic Boom pass 5: square AI images had implicit aspect-ratio (from
   width/height attrs) forcing height=width. aspect-ratio:auto lets the absolute
   image fill the tall media cell. ---- */
.grid.cols-2 > .card__media > img{aspect-ratio:auto}
.card__media img{aspect-ratio:auto}

/* ---- Sonic Boom pass 6: image+text media image fills via pure inset-stretch
   (top/right/bottom/left:0 + width/height auto) — no percentage-height needed. ---- */
.grid.cols-2 > .card__media > img{
  position:absolute; top:0; right:0; bottom:0; left:0;
  width:auto; height:auto; max-height:none; aspect-ratio:auto;
  object-fit:cover; margin:0;
}

/* ---- Sonic Boom pass 7 (final): image+text media = fixed-ratio filled banner,
   vertically centred. aspect-ratio gives a definite height so the absolute image
   fills it (no empty grey box). Leftover beside long text = normal section bg. ---- */
.grid.cols-2:has(> .card__media){align-items:center}
.grid.cols-2 > .card__media{aspect-ratio:4/5;height:auto;min-height:0;max-height:640px;align-self:center;position:relative;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(21,33,43,.10)}
.grid.cols-2 > .card__media > img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover!important;margin:0!important;border-radius:16px}

/* ---- Sonic Boom pass 8 (final): image fully fills the column height via flex
   cross-axis stretch (works with stretch-sized parent; no percentage needed).
   No gap above/below beside long text. ---- */
.grid.cols-2:has(> .card__media){align-items:stretch}
.grid.cols-2 > .card__media{align-self:stretch;display:flex;align-items:stretch;aspect-ratio:auto;height:auto;min-height:300px;max-height:none;position:relative;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(21,33,43,.10)}
.grid.cols-2 > .card__media > img{position:static!important;width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:cover!important;align-self:stretch!important;margin:0!important}

/* ---- Fix: footer column headings (now h3) blended into the dark footer.
   The old rule only coloured h4. Colour all footer headings white. ---- */
.site-footer h2,.site-footer h3,.site-footer h4{color:#fff}

/* ---- Fix: hero too tall on laptop + hero content/buttons left while all other
   CTAs are centred. Centre the hero, shrink it so the next section peeks. ---- */
.hero__inner{padding-block:clamp(2.25rem,3.5vw,3.5rem);text-align:center}
.hero .eyebrow{text-align:center}
.hero h1{max-width:22ch;margin-inline:auto}
.hero p.lead{max-width:60ch;margin-inline:auto}
.hero .btn-row{justify-content:center}
.hero__trust{justify-content:center}
/* even, readable overlay for centred white text (was a left-dark diagonal) */
.hero__media::after{background:linear-gradient(180deg,rgba(21,33,43,.80) 0%,rgba(31,58,82,.62) 55%,rgba(21,33,43,.72) 100%)}

/* ---- REVERT hero to LEFT-aligned (centring was wrong) + reduce height further,
   consistent across all pages. ---- */
.hero__inner{padding-block:clamp(1.75rem,2.5vw,2.75rem);text-align:left}
.hero .eyebrow{text-align:left}
.hero h1{max-width:17ch;margin-inline:0;font-size:clamp(2rem,3.4vw + .6rem,3.1rem)}
.hero p.lead{max-width:52ch;margin-inline:0;font-size:clamp(1rem,.5vw + .9rem,1.15rem)}
.hero .btn-row{justify-content:flex-start}
.hero__trust{justify-content:flex-start}
.hero__media::after{background:linear-gradient(105deg,rgba(21,33,43,.88) 0%,rgba(31,58,82,.74) 45%,rgba(31,58,82,.40) 100%)}

/* ---- Fix: standalone CTA buttons in <p class="center"> sat 204px left of centre
   because <p> has max-width:68ch and the paragraph itself wasn't centred. Centre
   the .center block so its centred button is truly centred. ---- */
.center{margin-inline:auto}
p.center{max-width:none}

/* ---- Consistent hero band across the whole site: shared min-height, content
   vertically centred; taller-copy pages grow a little but all sit in one band. ---- */
.hero{display:flex;align-items:center;min-height:clamp(420px,48vh,500px)}
.hero__inner{width:100%}