/*
Theme Name: Infinite Roof Care
Theme URI: https://www.infinite-roofcare.co.uk/
Author: Welch Marketing Ltd
Author URI: https://www.welchmarketing.co.uk/
Description: A fast, secure, plugin free WordPress theme built for Infinite Roof Care Ltd, roofing, guttering, chimney work and spray foam removal across the South Coast. Self building pages, a full Welch Settings admin panel, database backed lead capture, schema markup, GDPR and PECR cookie consent, and WCAG 2.2 AA accessibility.
Version: 1.3.5
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: infinite-roof-care
Tags: business, custom-menu, custom-logo, featured-images, blog, accessibility-ready
*/

/* ==========================================================================
   1. Self hosted fonts, no third party request, nothing loads before consent
   ========================================================================== */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/dm-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/dm-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/dm-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/dm-sans-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/inter-latin-700-normal.woff2') format('woff2');
}

/* ==========================================================================
   2. Design tokens
   ========================================================================== */

:root {
  /* Brand blue taken from the logo. The shades below are derived from it in
     PHP whenever the client changes the colour in Welch Settings, so the whole
     palette moves together rather than leaving these stranded. */
  --brand: #29267e;
  --brand-900: #19184e;
  --brand-700: #3531a4;
  --brand-500: #6460cf;
  --brand-rgb: 41, 38, 126;
  --brand-900-rgb: 25, 24, 78;
  --accent: #c4451f;
  --accent-dark: #a63817;
  /* Used for text and icons sitting ON the brand blue, so it has to clear
     4.5:1 against it. */
  --accent-bright: #f17b58;
  /* Focus ring. The accent outline is wrapped in a white ring and a dark ring,
     so one of the three always contrasts no matter what the ring is sitting on.
     This survives the client changing the brand colour to any tone. */
  --focus: #e4572e;
  --ink: #14181d;
  --muted: #55616e;
  --cream: #f7f5f2;
  --sand: #efeae3;
  --line: #e2ddd6;
  --white: #ffffff;
  --ok: #1f6b3f;
  --err: #a3231b;

  --font-head: 'DM Sans', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --wrap: 1180px;
  --gap: 24px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 2px 4px rgba(var(--brand-rgb), 0.05), 0 12px 28px rgba(var(--brand-rgb), 0.09);
  --shadow-lg: 0 4px 8px rgba(var(--brand-rgb), 0.07), 0 24px 60px rgba(var(--brand-rgb), 0.16);
  --t: 180ms ease;
}

/* ==========================================================================
   3. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  color: var(--brand);
  margin: 0 0 0.6em;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; transition: color var(--t); }
a:hover { color: var(--accent-dark); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: 0.4em; }

strong, b { font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

blockquote {
  margin: 0 0 1.2em;
  padding: 1rem 1.4rem;
  border-left: 4px solid var(--accent);
  background: var(--cream);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--cream);
  border-radius: 4px;
}
code { padding: 0.15em 0.4em; }
pre { padding: 1rem; overflow-x: auto; }

table { width: 100%; border-collapse: collapse; margin-bottom: 1.2em; }
th, td { padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line); text-align: left; }
th { font-family: var(--font-head); font-weight: 600; color: var(--brand); }

/* Accessibility: visible focus everywhere, never removed */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--white), 0 0 0 8px var(--brand-900);
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--brand);
  color: var(--white);
  padding: 12px 20px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
  color: var(--white);
}

.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;
}

/* Icon backstop, see hard won fixes: icons must never balloon to 300x150 */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  flex: none;
  vertical-align: -0.125em;
  fill: currentColor;
}

/* ==========================================================================
   4. Layout helpers
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}
.wrap-narrow { max-width: 820px; }

.section { padding: clamp(56px, 8vw, 96px) 0; }

/* Alternate the band backgrounds automatically rather than hard coding a cream
   class on each one. Counting every child of main, not just the bands, is what
   makes this safe: whatever order the templates compose their sections in, two
   neighbouring bands always land on opposite parities, so a cream band can
   never sit directly against another cream band and merge into one dead gap. */
.site-main > .section:nth-child(even) { background: var(--cream); }
.site-main > .section-brand:nth-child(even) { background: var(--brand); }
/* An explicit tone class still wins, so a band can be pinned if a page ever
   needs it. */
.site-main > .section.section-cream { background: var(--cream); }
.site-main > .section.section-sand { background: var(--sand); }
.section-cream { background: var(--cream); }
.section-sand { background: var(--sand); }
.section-brand { background: var(--brand); color: rgba(255, 255, 255, 0.88); }
.section-brand h2,
.section-brand h3,
.section-brand h4 { color: var(--white); }

.eyebrow {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.7rem;
  display: block;
}
.section-brand .eyebrow { color: var(--accent-bright); }

.section-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head.centred { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.06rem; margin-bottom: 0; }
/* A section head with nothing after it has no grid to space itself from,
   so its bottom margin just becomes dead air above the next band. */
.wrap > .section-head:only-child { margin-bottom: 0; }
.section-brand .section-head p { color: rgba(255, 255, 255, 0.82); }

.lead { font-size: 1.12rem; color: var(--muted); }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 15px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
  text-align: center;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--accent-dark); color: var(--white); }

.btn-dark { background: var(--brand); color: var(--white); }
.btn-dark:hover { background: var(--brand-700); color: var(--white); }

.btn-ghost { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn-ghost:hover { background: var(--brand); color: var(--white); }

.btn-light { background: var(--white); color: var(--brand); }
.btn-light:hover { background: var(--cream); color: var(--brand); }

.btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.6); }
.btn-outline-light:hover { background: var(--white); color: var(--brand); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-block { width: 100%; }

/* ==========================================================================
   6. Header and navigation
   ========================================================================== */

.topbar {
  background: var(--brand-900);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.88rem;
}
.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 22px;
  min-height: 42px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.topbar-items { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.topbar a { color: var(--white); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: var(--accent-bright); text-decoration: underline; }
.topbar svg { width: 15px; height: 15px; color: var(--accent-bright); }
.topbar-note { display: inline-flex; align-items: center; gap: 7px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 78px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.site-brand { display: flex; align-items: center; text-decoration: none; flex: none; margin-right: auto; }
.site-brand .site-logo { height: 50px; width: auto; display: block; }
.site-brand img.site-logo { height: auto; max-height: 56px; }

.primary-nav { display: flex; align-items: center; }
.primary-nav ul { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.primary-nav li { margin: 0; position: relative; }
.primary-nav a {
  display: block;
  font-family: var(--font-head);
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--t), color var(--t);
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a,
.primary-nav .current-menu-ancestor > a,
.primary-nav .current_page_ancestor > a {
  background: var(--cream);
  color: var(--accent);
}

.primary-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 8px;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  z-index: 20;
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu { display: flex; }
.primary-nav .sub-menu a { white-space: normal; font-weight: 500; }

.header-cta { display: flex; align-items: center; gap: 10px; flex: none; }
.header-cta .btn { padding: 12px 20px; font-size: 0.94rem; }

.nav-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  flex: none;
}
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: '';
  display: block;
  height: 2px;
  width: 100%;
  background: var(--brand);
  border-radius: 2px;
}
/* General sibling, not adjacent: the label no longer sits directly after
   the input now that the toggle renders to the right of the call button. */
.nav-toggle-input:focus-visible ~ .nav-toggle {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--white), 0 0 0 8px var(--brand-900);
}

/* ==========================================================================
   7. Hero
   ========================================================================== */

.hero {
  position: relative;
  background: var(--brand);
  color: var(--white);
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.42;
}
.hero-media.is-placeholder {
  background-image:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 22px, transparent 22px 44px);
  opacity: 1;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(var(--brand-900-rgb), 0.94) 0%, rgba(var(--brand-900-rgb), 0.78) 46%, rgba(var(--brand-900-rgb), 0.55) 100%);
}
.hero .wrap { position: relative; z-index: 2; }

.hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
  padding: clamp(52px, 7vw, 92px) 0;
}

/* Single column hero, used when the hero carries no quote card.
   The text block is capped so the measure stays readable on wide screens
   rather than running the full width of the wrap. */
.hero-solo {
  grid-template-columns: 1fr;
  padding: clamp(64px, 9vw, 116px) 0;
}
.hero-solo > div { max-width: 44rem; }
.hero-solo .hero-sub { max-width: 38em; }


.hero h1 { color: var(--white); margin-bottom: 0.45em; }
.hero-sub {
  font-size: 1.14rem;
  color: rgba(255, 255, 255, 0.86);
  max-width: 34em;
  margin-bottom: 1.6em;
}
.hero .eyebrow { color: var(--accent-bright); }


/* Quote and enquiry form card */
.quote-card {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 30px);
  box-shadow: var(--shadow-lg);
}
.quote-card h2 {
  font-size: 1.4rem;
  margin-bottom: 0.3em;
}
.quote-card .quote-intro {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 1.2em;
}

/* ==========================================================================
   8. Trust bar
   ========================================================================== */

.trustbar { background: var(--cream); border-bottom: 1px solid var(--line); }
.trustbar .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 38px;
  padding-top: 18px;
  padding-bottom: 18px;
}

/* Same reason as the inline tick list: once these wrap, centring each line puts
   every shield on a different left edge. Stack them into one left aligned
   column that stays centred on the page. */
@media (max-width: 860px) {
  .trustbar .wrap {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
  }
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--brand);
}
.trust-item svg { width: 19px; height: 19px; color: var(--accent); flex: none; }

/* ==========================================================================
   9. Cards
   ========================================================================== */

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-500); }
.card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.card h3 { margin-bottom: 0.4em; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--accent); }
.card p { color: var(--muted); font-size: 0.98rem; }
.card-link {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
}
.card-link svg { width: 15px; height: 15px; }
.card-link:hover { gap: 11px; }

.card-icon {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: var(--brand);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex: none;
}
.card-icon svg { width: 26px; height: 26px; }

/* Numbered process steps. Distinct from the why choose cards on purpose: no
   box, just a rule and a large number, so the two sections do not read as the
   same component twice on one page. */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3.5vw, 44px);
}
.step {
  margin: 0;
  border-top: 2px solid var(--accent);
  padding-top: 20px;
}
.step-num {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--brand-500);
  margin-bottom: 12px;
}
.step h3 { margin-bottom: 0.4em; }
.step p { color: var(--muted); font-size: 0.99rem; margin: 0; }

@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 26px; }
}

.tick-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.tick-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  font-size: 0.96rem;
  color: var(--muted);
}
.tick-list svg { width: 17px; height: 17px; color: var(--accent); flex: none; margin-top: 4px; }

/* Contact details read better without an underline, but the accent only manages
   1.27:1 against the muted text beside it, so colour alone would not mark them
   as links. Weight carries that instead, and the underline returns on hover and
   on keyboard focus so the affordance is never lost. */
.tick-list a { text-decoration: none; font-weight: 600; }
.tick-list a:hover,
.tick-list a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* The accreditation ticks read as a centred row under the steps rather than a
   left aligned column, which kept pulling the eye away from the grid. */
.tick-list-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 30px;
  margin-top: clamp(34px, 4vw, 52px);
  padding-top: clamp(26px, 3vw, 36px);
  border-top: 1px solid var(--line);
}
.tick-list-inline li { margin: 0; }

/* Once the row wraps, centring each line leaves every tick on a different left
   edge. Below this width the list becomes a single left aligned column that is
   itself centred on the page, so all the ticks share one vertical line. */
@media (max-width: 860px) {
  .tick-list-inline {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   Shared spacing helpers
   These replaced a scatter of inline margins that ran 12, 18, 20, 22, 26, 28,
   30, 32 and 36px for what was visually the same job. One value, applied in
   one place, so the rhythm is identical on every page.
   ========================================================================== */

.stack-top { margin-top: clamp(22px, 2.2vw, 28px); }

/* Pins a link to the bottom of a flex card so uneven card text still lines the
   links up along one row. */
.card-push { margin-top: auto; padding-top: 14px; }

.contact-list { font-size: 1.02rem; }
.footer-cta { margin-top: clamp(22px, 2.2vw, 28px); }
.legal-updated { margin-top: clamp(30px, 3vw, 40px); color: var(--muted); font-size: 0.94rem; }
.rating-line { margin-bottom: 22px; }
.reviews-more { margin-top: clamp(26px, 3vw, 34px); text-align: center; }


/* ==========================================================================
   10. Image slots and placeholders
   ========================================================================== */

.img-slot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--sand);
  background-image:
    repeating-linear-gradient(135deg, rgba(var(--brand-rgb), 0.05) 0 14px, transparent 14px 28px);
  border: 2px dashed rgba(var(--brand-rgb), 0.22);
  border-radius: var(--radius);
  overflow: hidden;
}
.img-slot .img-slot-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 16px;
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-500);
}
.img-slot .img-slot-label svg { width: 26px; height: 26px; opacity: 0.6; }
.img-slot img { width: 100%; height: 100%; object-fit: cover; }

.img-slot.is-filled {
  border: 0;
  background-image: none;
  background: var(--sand);
}

.img-slot-wide { aspect-ratio: 16 / 9; }
.img-slot-square { aspect-ratio: 1 / 1; }
.img-slot-tall { aspect-ratio: 3 / 4; }

.card .img-slot { border-radius: 0; border-width: 0 0 2px 0; }
.card .img-slot.is-filled { border-bottom: 0; }

/* ==========================================================================
   11. About and split sections
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}
.split-media-first .split-media { order: -1; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.stat-num {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
  display: block;
}
.stat-label { font-size: 0.88rem; color: var(--muted); line-height: 1.4; }

/* ==========================================================================
   12. Reviews
   ========================================================================== */

.review-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stars { display: inline-flex; gap: 3px; color: #e8a33d; }
.stars svg { width: 19px; height: 19px; }
.review-text { font-size: 1rem; color: var(--ink); margin: 0; flex: 1; }
.review-meta { display: flex; align-items: center; gap: 12px; }
.review-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  flex: none;
  overflow: hidden;
}
.review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.review-name { font-family: var(--font-head); font-weight: 700; color: var(--brand); display: block; line-height: 1.3; }
.review-source { font-size: 0.85rem; color: var(--muted); }

.rating-summary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 22px;
  box-shadow: var(--shadow);
}
.rating-score { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--brand); line-height: 1; }

/* ==========================================================================
   13. Areas and locations
   ========================================================================== */

.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.area-link {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--brand);
  text-decoration: none;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.area-link:hover { border-color: var(--accent); background: var(--white); color: var(--accent); transform: translateY(-2px); }
.area-link svg { width: 17px; height: 17px; color: var(--accent); flex: none; }

/* ==========================================================================
   14. FAQ
   ========================================================================== */

.faq-list { display: grid; gap: 12px; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 52px 18px 20px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.03rem;
  color: var(--brand);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform var(--t);
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq-answer { padding: 0 20px 20px; color: var(--muted); }
.faq-answer p:last-child { margin-bottom: 0; }

/* ==========================================================================
   15. CTA band
   ========================================================================== */

/* Accreditation logo strip. Third party logos arrive at wildly different
   aspect ratios, so they are constrained by height and centred in an equal
   width cell, which lines them up optically rather than by bounding box. */
/* The strip is pinned to white and outranks the automatic alternation, because
   supplier logos often arrive as a PNG with a solid white box baked in. On a
   white band that box is invisible. The hairline top and bottom keep the band
   readable as its own section even when the neighbouring band is also white. */
.site-main > section.section.accred-band {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* Sitting last, the strip runs straight into the dark footer, so the lower
   hairline has nothing to separate. */
.site-main > section.section.accred-band:last-child { border-bottom: 0; }

.accred-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
}
.accred-item {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
}
.accred-item img {
  max-height: 76px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

@media (max-width: 680px) {
  .accred-item img { max-height: 58px; max-width: 140px; }
}

/* Full bleed call to action banner. The colour runs edge to edge on the
   section, while the inner wrap keeps the text lined up with every other
   section on the page. */
.cta-band {
  background: var(--brand);
  color: var(--white);
  padding: clamp(40px, 5vw, 64px) 0;
}
.cta-band-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cta-band h2 { color: var(--white); margin-bottom: 0.35em; }
.cta-band p { color: rgba(255, 255, 255, 0.84); margin: 0; max-width: 46em; }
.cta-band-text { flex: 1 1 420px; }

/* ==========================================================================
   16. Forms
   ========================================================================== */

.form-grid { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field label {
  display: block;
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brand);
  margin-bottom: 6px;
}
.field .req { color: var(--err); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color var(--t), box-shadow var(--t);
}
.field textarea { min-height: 118px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(43, 74, 107, 0.14);
  outline-offset: 0;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--err); }

.field-error {
  display: block;
  font-size: 0.87rem;
  color: var(--err);
  font-weight: 600;
  margin-top: 5px;
}

.field-hint { display: block; font-size: 0.85rem; color: var(--muted); margin-top: 5px; }

/* Honeypot, hidden from people but present for bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consent-field {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.consent-field input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.consent-field label {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
  cursor: pointer;
}
.consent-field label strong { color: var(--ink); font-weight: 600; }

.form-notice {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 0.96rem;
  margin-bottom: 18px;
  border: 1.5px solid;
}
.form-notice-ok { background: #eef6f1; border-color: var(--ok); color: #14512e; }
.form-notice-err { background: #fdf0ef; border-color: var(--err); color: #7d1a14; }
.form-notice p:last-child { margin-bottom: 0; }

/* ==========================================================================
   17. Gallery
   ========================================================================== */

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

/* ==========================================================================
   18. Page hero (inner pages)
   ========================================================================== */

.page-hero {
  background: var(--brand);
  color: var(--white);
  padding: clamp(46px, 6vw, 74px) 0;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 24px, transparent 24px 48px);
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { color: var(--white); margin-bottom: 0.3em; }
.page-hero p { color: rgba(255, 255, 255, 0.85); font-size: 1.1rem; max-width: 46em; margin-bottom: 0; }
.page-hero .btn-row { margin-top: 26px; }

.breadcrumbs {
  font-size: 0.87rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 14px;
}
.breadcrumbs a { color: rgba(255, 255, 255, 0.92); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent-bright); text-decoration: underline; }
.breadcrumbs span { margin: 0 7px; opacity: 0.55; }

/* ==========================================================================
   19. Blog
   ========================================================================== */

.post-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; }
.post-meta { font-size: 0.86rem; color: var(--muted); margin-bottom: 10px; }
.post-card h2 { font-size: 1.28rem; margin-bottom: 0.45em; }
.post-card h2 a { color: var(--brand); text-decoration: none; }
.post-card h2 a:hover { color: var(--accent); }
.post-card p { color: var(--muted); font-size: 0.98rem; }

.entry-content { font-size: 1.05rem; }
.entry-content h2 { margin-top: 1.8em; }
.entry-content h3 { margin-top: 1.5em; }
.entry-content ul li,
.entry-content ol li { margin-bottom: 0.5em; }

.pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; justify-content: center; }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--brand);
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover { background: var(--brand); color: var(--white); border-color: var(--brand); }

/* ==========================================================================
   20. Footer
   ========================================================================== */

.site-footer { background: var(--brand-900); color: rgba(255, 255, 255, 0.72); padding-top: clamp(46px, 6vw, 70px); font-size: 0.96rem; }
.site-footer h3 {
  color: var(--white);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1.1em;
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(26px, 4vw, 46px); }
.footer-brand .site-logo { height: 52px; width: auto; display: block; margin-bottom: 18px; }
.footer-brand img.site-logo { height: auto; max-height: 62px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 9px; }
.footer-grid a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.footer-grid a:hover { color: var(--accent-bright); text-decoration: underline; }

.footer-contact li { display: flex; align-items: flex-start; gap: 10px; }
.footer-contact svg { width: 17px; height: 17px; color: var(--accent-bright); flex: none; margin-top: 4px; }

.footer-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-family: var(--font-head);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}
.footer-badge svg { width: 15px; height: 15px; color: var(--accent-bright); flex: none; margin: 0; }

.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}
.footer-social a:hover { background: var(--accent); border-color: var(--accent); }
.footer-social svg { width: 18px; height: 18px; }

.footer-bottom {
  margin-top: clamp(36px, 5vw, 54px);
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  padding: 22px 0 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  font-size: 0.88rem;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 0; }
.footer-legal a, .footer-bottom a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.footer-legal a:hover, .footer-bottom a:hover { color: var(--accent-bright); text-decoration: underline; }
.footer-legal button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  text-decoration: none;
}
.footer-legal button:hover { color: var(--accent-bright); text-decoration: underline; }

/* Sticky mobile call bar */
.mobile-bar { display: none; }

/* ==========================================================================
   21. Cookie consent banner
   ========================================================================== */

.cc-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(var(--brand-900-rgb), 0.55);
  z-index: 9998;
  display: none;
}
.cc-backdrop.is-open { display: block; }

.cc-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 720px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  z-index: 9999;
  display: none;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
}
.cc-banner.is-open { display: block; }
.cc-banner h2 { font-size: 1.25rem; margin-bottom: 0.5em; }
.cc-banner p { font-size: 0.94rem; color: var(--muted); }
.cc-banner a { font-weight: 600; }

.cc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cc-actions .btn { padding: 12px 22px; font-size: 0.95rem; flex: 1 1 auto; }

.cc-prefs { display: none; margin-top: 20px; border-top: 1px solid var(--line); padding-top: 18px; }
.cc-prefs.is-open { display: block; }

.cc-cat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.cc-cat:last-of-type { border-bottom: 0; }
.cc-cat-text { flex: 1; }
.cc-cat-text strong { font-family: var(--font-head); color: var(--brand); display: block; margin-bottom: 3px; }
.cc-cat-text span { font-size: 0.89rem; color: var(--muted); }
.cc-cat input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: none;
  margin: 3px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.cc-cat input[disabled] { cursor: not-allowed; opacity: 0.65; }
.cc-locked { font-size: 0.78rem; color: var(--ok); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; flex: none; margin-top: 5px; }

/* ==========================================================================
   22. Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .primary-nav a { padding: 10px 10px; font-size: 0.93rem; }
  .header-cta .btn { padding: 11px 16px; font-size: 0.9rem; }
}

@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1040px) {
  /* No backdrop-filter, transform or filter on the header at these widths,
     or the fixed mobile menu gets trapped inside it. See hard won fixes. */
  .site-header { backdrop-filter: none; filter: none; transform: none; }

  .nav-toggle { display: flex; }
  /* The whole call to action leaves the header once the menu collapses.
     The number is still one tap away in the topbar, and the sticky call
     bar takes over on phones, so nothing is lost by clearing the space. */
  .header-cta { display: none; }

  .primary-nav {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 950;
    background: var(--brand);
    padding: 88px 24px 40px;
    overflow-y: auto;
    align-items: stretch;
  }
  .nav-toggle-input:checked ~ .primary-nav { display: block; }

  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .primary-nav a {
    color: var(--white);
    font-size: 1.1rem;
    padding: 14px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    white-space: normal;
  }
  .primary-nav a:hover,
  .primary-nav .current-menu-item > a,
  .primary-nav .current_page_item > a,
  .primary-nav .current-menu-ancestor > a,
  .primary-nav .current_page_ancestor > a { background: transparent; color: var(--accent-bright); }

  /* Nested submenu must not keep its white desktop background on the dark panel */
  .primary-nav .sub-menu {
    display: flex;
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 16px;
    min-width: 0;
  }
  .primary-nav .sub-menu a { font-size: 1rem; color: rgba(255, 255, 255, 0.8); }

  .nav-toggle-input:checked ~ .nav-toggle span { opacity: 0; }
  .nav-toggle-input:checked ~ .nav-toggle { position: relative; z-index: 960; }
  .nav-toggle-input:checked ~ .nav-toggle::before { transform: translateY(7px) rotate(45deg); background: var(--brand); }
  .nav-toggle-input:checked ~ .nav-toggle::after { transform: translateY(-7px) rotate(-45deg); background: var(--brand); }
}

@media (max-width: 860px) {
  body { font-size: 16.5px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split-media-first .split-media { order: 0; }
  .topbar-items .topbar-note { display: none; }
  /* Stacking flips the main axis, so the flex-basis of 420px on the text stops
     being a width and becomes a HEIGHT, leaving a large dead gap above the
     buttons. Reset the basis, and stretch the row so both buttons match. */
  .cta-band-inner { flex-direction: column; align-items: stretch; gap: 22px; }
  .cta-band-text { flex: 0 1 auto; }
  .cta-band-inner .btn-row { width: 100%; }
}

@media (max-width: 680px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; gap: 14px; text-align: left; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .cc-actions .btn { width: 100%; }
  .area-grid { grid-template-columns: 1fr; }
  .site-header .wrap { min-height: 68px; }
  .site-brand .site-logo { height: 42px; }
  .site-brand img.site-logo { height: auto; max-height: 46px; }

  /* Sticky call bar, mobile only */
  .mobile-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 880;
    background: var(--brand-900);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding: 9px 12px;
    gap: 9px;
  }
  .mobile-bar a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 10px;
    border-radius: 999px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
  }
  .mobile-bar .mb-call { background: var(--accent); color: var(--white); }
  .mobile-bar .mb-quote { background: transparent; color: var(--white); border: 1.5px solid rgba(255, 255, 255, 0.5); }
  .mobile-bar svg { width: 17px; height: 17px; }
  body { padding-bottom: 72px; }
  .cc-banner { bottom: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .btn:hover, .card:hover, .area-link:hover { transform: none; }
}

@media print {
  .site-header, .site-footer, .topbar, .mobile-bar, .cc-banner, .cc-backdrop, .btn { display: none !important; }
  body { padding-bottom: 0; }
}