/* ==========================================================================
   Yare Electrical — main stylesheet
   Hand-coded, no page builder. Mobile-first, accessible, fast.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Metric-matched stand-in for Barlow Condensed.

   Barlow Condensed is far narrower than any system fallback, and the hero
   title runs at clamp(2.6rem, 6vw, 4.5rem). While the webfont was loading the
   fallback wrapped to more lines, then everything below jumped up when the real
   font swapped in — measured on the live site as 0.139 CLS, with the hero quote
   card as the shifting element.

   size-adjust squeezes the fallback to roughly Barlow Condensed's width so the
   swap barely moves anything. No extra request; local() only.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Barlow Condensed fallback';
	src: local('Arial Narrow'), local('Liberation Sans Narrow'), local('Helvetica Neue Condensed'), local('Arial');
	size-adjust: 82%;
	ascent-override: 105%;
	descent-override: 26%;
	line-gap-override: 0%;
	font-weight: 100 900;
	font-display: swap;
}

:root {
	/* Bright brand red — for DECORATIVE fills, glows, icon tiles, hover tints
	   only. Never place essential text on it (white-on-#cf2e2e is 5.1:1 = AA). */
	--red:        #cf2e2e;
	/* AAA "ink" red — text on white ≈ 7.8:1, white-on-this ≈ 8.2:1. Used for
	   links, eyebrows, and every button/badge surface that carries text. */
	--red-dark:   #9a1d1b;
	/* Deepest red — hover/active states and the floor of red gradients. */
	--red-deeper: #7a1715;
	--red-tint:   #fdf1f1;
	--ink:        #15171c;
	--ink-2:      #21252e;
	--ink-3:      #2c313c;
	--gold:       #f5c842;
	--gold-soft:  #ffe1a0;
	--text:       #1d2127;
	--muted:      #474d56;  /* AAA body grey  — ≈ 8.5:1 on #fff, ≈ 7.4:1 on --bg-alt */
	--muted-2:    #4c525b;  /* AAA meta grey  — ≈ 7.9:1 on #fff, ≈ 7.5:1 on --bg-alt */
	--border:     #e6e8ec;
	--bg:         #ffffff;
	--bg-alt:     #f6f7f9;
	--white:      #ffffff;

	--radius:     16px;
	--radius-sm:  10px;
	--shadow-sm:  0 1px 2px rgba(16,20,30,.06), 0 2px 6px rgba(16,20,30,.05);
	--shadow:     0 10px 30px rgba(16,20,30,.10), 0 4px 10px rgba(16,20,30,.05);
	--shadow-lg:  0 24px 60px rgba(16,20,30,.16), 0 8px 20px rgba(16,20,30,.08);
	/* Coloured glow for primary CTAs — energy without compromising text contrast */
	--glow-red:   0 8px 22px rgba(207,46,46,.38), 0 2px 8px rgba(207,46,46,.28);

	--container:  1180px;
	--gutter:     clamp(1rem, 4vw, 2rem);

	--ff-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--ff-head:    'Barlow Condensed', 'Barlow Condensed fallback', 'Inter', system-ui, sans-serif;

	--ease:       cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset / base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	font-family: var(--ff-body);
	color: var(--text);
	background: var(--bg);
	line-height: 1.6;
	font-size: 17px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--red-dark); text-decoration: none; }
a:hover { color: var(--red-deeper); }

h1, h2, h3, h4 { font-family: var(--ff-head); line-height: 1.08; font-weight: 800; letter-spacing: .005em; color: var(--ink); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: 50%; transform: translateX(-50%); top: -60px;
	background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 8px;
	z-index: 2000; transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

.text-link { color: var(--red-dark); font-weight: 600; border-bottom: 2px solid rgba(207,46,46,.25); }
.text-link:hover { border-color: var(--red-deeper); }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
	--btn-bg: var(--red);
	position: relative; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center; gap: .55em;
	font-family: var(--ff-body);
	font-weight: 700; font-size: .98rem; line-height: 1;
	padding: .85em 1.5em; border-radius: 999px; border: 2px solid transparent;
	cursor: pointer; text-align: center; white-space: nowrap;
	transition: transform .14s var(--ease), background .18s var(--ease), box-shadow .22s var(--ease), color .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--lg { font-size: 1.05rem; padding: 1.05em 1.9em; }
.btn--block { display: flex; width: 100%; }

/* A soft light-sweep that glides across the button on hover (decorative). */
.btn--primary::after, .btn--light::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
	transform: translateX(-120%); transition: transform .6s var(--ease); pointer-events: none;
}
.btn--primary:hover::after, .btn--light:hover::after { transform: translateX(120%); }

/* Deep-crimson gradient: lightest stop is --red-dark (white ≈ 8.2:1) so the
   label stays AAA at every point, while the red glow keeps it electric. */
.btn--primary { background: linear-gradient(135deg, var(--red-dark) 0%, var(--red-deeper) 100%); color: #fff; box-shadow: var(--glow-red); }
.btn--primary:hover { background: linear-gradient(135deg, #a51f1d 0%, var(--red-dark) 100%); color: #fff; box-shadow: 0 12px 30px rgba(207,46,46,.46), 0 3px 10px rgba(207,46,46,.32); transform: translateY(-2px); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn--ghost:hover { background: var(--bg-alt); color: var(--ink); border-color: #d4d7dd; }

.btn--ghost-dark { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.32); }
.btn--ghost-dark:hover { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.55); }

.btn--light { background: #fff; color: var(--red-dark); }
.btn--light:hover { background: #fff; color: var(--red-deeper); transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--dark:hover { background: var(--ink-2); color: #fff; }

.btn--phone { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 1000; }

.topbar {
	background: var(--ink); color: rgba(255,255,255,.82);
	font-size: .82rem; transition: max-height .3s var(--ease), opacity .2s var(--ease);
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; }
.topbar__msg { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.topbar__dot { width: 8px; height: 8px; border-radius: 50%; background: #46d17f; box-shadow: 0 0 0 0 rgba(70,209,127,.6); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(70,209,127,.5);} 70%{ box-shadow:0 0 0 7px rgba(70,209,127,0);} 100%{box-shadow:0 0 0 0 rgba(70,209,127,0);} }
.topbar__contact { display: flex; align-items: center; gap: 1.3rem; }
.topbar__rating { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255,255,255,.82); }
.topbar__rating .stars { color: var(--gold); letter-spacing: 1px; }
.topbar__rating:hover { color: #fff; }
.topbar__link { color: rgba(255,255,255,.82); font-weight: 500; text-decoration: none; transition: color .15s var(--ease); }
.topbar__link:hover { color: #fff; }
.topbar__phone { display: inline-flex; align-items: center; gap: .4rem; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.topbar__phone:hover { color: var(--gold); }

.navbar { background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--border); transition: box-shadow .25s var(--ease); }
.navbar__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 74px; }
.is-scrolled .navbar { box-shadow: var(--shadow-sm); }
.is-scrolled .topbar { max-height: 0; opacity: 0; overflow: hidden; }

/* Brand */
.brand { display: inline-flex; }
.brand__text, .brand--footer { display: inline-flex; align-items: center; gap: .6rem; }
.brand__mark {
	display: grid; place-items: center; width: 40px; height: 40px;
	background: var(--red); color: #fff; border-radius: 11px; box-shadow: 0 4px 12px rgba(207,46,46,.3);
}
.brand__name { font-family: var(--ff-head); font-size: 1.5rem; font-weight: 700; letter-spacing: .01em; color: var(--ink); text-transform: uppercase; }
.brand__name strong { color: var(--red); font-weight: 800; }
.custom-logo-link { display: inline-flex; }
.custom-logo { max-height: 52px; width: auto; }

/* Primary nav */
.primary-nav { margin-left: auto; }
.nav-menu { list-style: none; display: flex; align-items: center; gap: .35rem; padding: 0; }
.nav-menu a {
	display: inline-flex; align-items: center; padding: .55rem .9rem; border-radius: 8px;
	color: var(--ink); font-weight: 600; font-size: .97rem; transition: background .15s var(--ease), color .15s var(--ease);
}
.nav-menu a:hover, .nav-menu .current-menu-item > a { background: var(--red-tint); color: var(--red-dark); }
/* Renewables makes seven top-level items. Between the desktop breakpoint and a
   comfortably wide viewport that overruns the brand and the header CTA, so
   tighten the horizontal rhythm rather than let the bar wrap. */
@media (min-width: 981px) and (max-width: 1240px) {
	.nav-menu { gap: .1rem; }
	.nav-menu a { padding: .55rem .6rem; font-size: .92rem; }
}
.nav-menu .menu-item-has-children > a::after { content: ""; width: 6px; height: 6px; margin-left: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; }

/* Sub-menus */
.nav-menu ul { list-style: none; padding: .4rem; margin: 0; position: absolute; min-width: 220px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .18s var(--ease); z-index: 50; }
.nav-menu li { position: relative; }
.nav-menu li:hover > ul, .nav-menu li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(4px); }
.nav-menu ul a { display: block; }

.navbar__cta { display: flex; align-items: center; gap: .6rem; }
.btn--phone svg { color: var(--red); }

/* Mobile toggle */
.nav-toggle { display: none; width: 46px; height: 46px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; margin-left: auto; }
.nav-toggle__bars { display: grid; gap: 5px; }
.nav-toggle__bars span { display: block; width: 22px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform .2s var(--ease), opacity .2s var(--ease); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; isolation: isolate; }
.hero__bg {
	position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(1100px 520px at 78% -10%, rgba(207,46,46,.55), transparent 60%),
		radial-gradient(800px 500px at 0% 110%, rgba(207,46,46,.20), transparent 55%),
		linear-gradient(180deg, #181b22 0%, #101218 100%);
}
.hero__bg::after {
	content: ""; position: absolute; inset: 0; opacity: .5;
	background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
	background-size: 46px 46px; mask-image: radial-gradient(120% 90% at 70% 0%, #000 30%, transparent 75%);
}
.hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(3rem, 7vw, 6rem); }

.hero__eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; }
.hero__eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }

.hero__title { font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: .98; letter-spacing: -.01em; color: #fff; }
.hero__title .hl { color: transparent; background: linear-gradient(90deg, #ff6a4d, var(--red)); -webkit-background-clip: text; background-clip: text; }
.hero__lead { margin-top: 1.2rem; font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: rgba(255,255,255,.78); max-width: 36ch; }

.hero__usps { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .55rem; }
.hero__usps li { display: flex; align-items: center; gap: .6rem; font-weight: 500; color: rgba(255,255,255,.9); }
.tick { width: 20px; height: 20px; flex: 0 0 auto; fill: #fff; background: var(--red); border-radius: 50%; padding: 3px; }

.hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.hero__rating { margin-top: 1.6rem; display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: rgba(255,255,255,.72); }
.hero__rating .stars { color: var(--gold); letter-spacing: 1.5px; font-size: 1.05rem; }
.hero__rating strong { color: #fff; }

/* Hero quote card */
.hero__card { background: #fff; color: var(--text); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.hero__card-head { background: linear-gradient(135deg, var(--red-dark), var(--red-deeper)); color: #fff; padding: 1.1rem 1.4rem; }
.hero__card-title { display: block; font-family: var(--ff-head); font-size: 1.35rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.hero__card-sub { display: block; font-size: .82rem; opacity: .9; }
.hero__card-body { padding: 1.3rem 1.4rem 1.5rem; }

/* ==========================================================================
   Trust bar
   ========================================================================== */
.trustbar { background: #fff; border-bottom: 1px solid var(--border); }
.trustbar__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.4rem; }
.trustbar__item { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1 1 140px; }
.trustbar__big { font-family: var(--ff-head); font-size: 1.6rem; font-weight: 800; color: var(--red); line-height: 1; }
.trustbar__small { font-size: .76rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-top: .3rem; }
/* Real accreditation artwork, when we have it. Sized to sit on the same
   baseline as the wordmark tiles it replaces, so a bar with a mix of the two
   still reads as one row. */
.trustbar__logo { height: 46px; width: auto; max-width: 130px; object-fit: contain; display: block; }
@media (max-width: 600px) { .trustbar__logo { height: 38px; } }

/* ==========================================================================
   Generic section
   ========================================================================== */
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--ink); color: #fff; }

.section__head { max-width: 720px; margin: 0 auto clamp(2.2rem, 5vw, 3.5rem); text-align: center; }
.section__eyebrow { font-weight: 700; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--red-dark); margin-bottom: .7rem; display: inline-flex; align-items: center; gap: .5rem; }
.section__eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--red), var(--red-deeper)); flex: 0 0 auto; }
.section__head .section__eyebrow { justify-content: center; }
.section__title { font-size: clamp(2rem, 4.2vw, 3.1rem); letter-spacing: -.01em; }
.section__intro { margin-top: 1rem; font-size: 1.1rem; color: var(--muted); }
.section__head--light .section__title { color: #fff; }
.section__head--light .section__eyebrow { color: var(--gold); }

/* ==========================================================================
   Services
   ========================================================================== */
.services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.4rem; }
/* Four sectors, not three. auto-fit gives a 3+1 orphan at any width that fits
   three but not four cards, so step the count explicitly: 4-up once there is
   genuinely room, 2×2 through the awkward middle, 1-up on phones. */
.services__grid--sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) {
	.services__grid--sectors { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.services__grid--sectors { grid-template-columns: minmax(0, 1fr); }
}
.service-card {
	display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border);
	border-radius: var(--radius); padding: 1.8rem 1.7rem; box-shadow: var(--shadow-sm);
	transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
	position: relative; overflow: hidden;
}
.service-card::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #dfe2e7; color: var(--text); }
.service-card:hover::before { transform: scaleX(1); }
.service-card__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--red-tint); color: var(--red); margin-bottom: 1.1rem; }
.service-card__icon .icon { width: 30px; height: 30px; }
.service-card__title { font-size: 1.5rem; }
.service-card__desc { margin-top: .55rem; color: var(--muted); font-size: .98rem; flex: 1; }
.service-card__link { margin-top: 1.1rem; font-weight: 700; color: var(--red-dark); font-size: .95rem; display: inline-flex; gap: .35rem; }
.service-card:hover .service-card__link span { transform: translateX(4px); }
.service-card__link span { transition: transform .2s var(--ease); display: inline-block; }

/* ==========================================================================
   Why us
   ========================================================================== */
.whyus__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.whyus .section__intro { margin-bottom: 1.8rem; }
.feature-list { list-style: none; padding: 0; display: grid; gap: 1.2rem; }
.feature-list li { display: flex; gap: 1rem; align-items: flex-start; }
.feature-list__ico { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; background: #fff; color: var(--red); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.feature-list__ico .icon { width: 26px; height: 26px; }
.feature-list strong { display: block; font-size: 1.1rem; color: var(--ink); font-family: var(--ff-head); font-weight: 700; letter-spacing: .01em; }
.feature-list span { color: var(--muted); font-size: .97rem; }

.compare-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.compare-card__head { display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); color: #fff; }
.compare-card__us, .compare-card__them { padding: .95rem 1.2rem; font-family: var(--ff-head); font-weight: 700; font-size: 1.05rem; letter-spacing: .03em; text-transform: uppercase; }
.compare-card__us { background: var(--red-dark); }
.compare-card__them { color: rgba(255,255,255,.74); }
.compare-row { display: grid; grid-template-columns: 1fr 1fr; }
.compare-row:nth-child(even) { background: var(--bg-alt); }
.compare-row__us, .compare-row__them { padding: .8rem 1.2rem; font-size: .92rem; display: flex; align-items: center; gap: .5rem; }
.compare-row__us { font-weight: 600; color: var(--ink); border-right: 1px solid var(--border); }
.compare-row__them { color: var(--muted-2); }
.compare-row__us .tick { width: 18px; height: 18px; padding: 3px; }
.cross { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #e7e9ed; color: var(--muted-2); font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.compare-card .btn { border-radius: 0; margin: 0; }

/* ==========================================================================
   Stats
   ========================================================================== */
.stats { background: var(--red-dark); color: #fff; } /* darker red so small labels meet AA */
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-block: clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
.stat { padding: .5rem; }
.stat__num { display: block; font-family: var(--ff-head); font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; line-height: 1; }
.stat__label { display: block; margin-top: .5rem; font-size: .9rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.95); }
.stat + .stat { position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 15%; height: 70%; width: 1px; background: rgba(255,255,255,.22); }

/* ==========================================================================
   Process
   ========================================================================== */
.process__steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; counter-reset: step; }
.process-step { position: relative; padding-top: .5rem; }
.process-step__num { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--red-dark), var(--red-deeper)); color: #fff; font-family: var(--ff-head); font-size: 1.65rem; font-weight: 800; margin-bottom: 1rem; box-shadow: 0 8px 18px rgba(207,46,46,.28); }
.process-step__title { font-size: 1.3rem; }
.process-step__desc { margin-top: .45rem; color: var(--muted); font-size: .96rem; }
.process__steps li:not(:last-child)::after { content: ""; position: absolute; top: 26px; left: 60px; right: -.75rem; height: 2px; background: repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 16px); }

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.review-card { background: var(--ink-2); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 1.8rem; display: flex; flex-direction: column; }
.review-card__stars { color: var(--gold); letter-spacing: 2px; font-size: 1.15rem; }
.review-card__text { margin: 1rem 0 1.3rem; font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,.9); font-style: normal; flex: 1; }
.review-card__by { display: flex; flex-direction: column; }
.review-card__name { font-weight: 700; color: #fff; }
.review-card__place { font-size: .85rem; color: #c3c8d2; } /* light grey — AAA on the dark review card */

.reviews__cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ==========================================================================
   Areas
   ========================================================================== */
.areas__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.areas .section__head { text-align: left; margin: 0; }
.areas .section__intro { margin-bottom: 1.6rem; }
.areas__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem 1.4rem; }
.areas__list li { display: flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--ink); padding: .55rem 0; border-bottom: 1px solid var(--border); }
.pin { width: 18px; height: 18px; fill: var(--red); flex: 0 0 auto; }

/* ==========================================================================
   Quote section + form
   ========================================================================== */
.quote-section { background: var(--bg-alt); }
.quote-section__inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.quote-section .section__head, .quote-section .section__eyebrow { text-align: left; }
.quote-section__copy .section__title { text-align: left; }
.quote-section__assure { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .6rem; }
.quote-section__assure li { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.quote-section__assure .tick { background: var(--red); }
.quote-section__form { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.5rem, 3vw, 2.2rem); }

.quote-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field__label { font-size: .85rem; font-weight: 600; color: var(--ink); }
.field__opt { color: var(--muted-2); font-weight: 400; }
.field input, .field select, .field textarea {
	width: 100%; font: inherit; font-size: .98rem; color: var(--text);
	padding: .75rem .9rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
	background: #fff; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { resize: vertical; min-height: 70px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(207,46,46,.15); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }

.quote-form__actions { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }
.quote-form__reassure { font-size: .82rem; color: var(--muted); }
.quote-form--compact .quote-form__grid { grid-template-columns: 1fr; gap: .7rem; }
.quote-form--compact .field--full { grid-column: auto; }
.quote-form--compact .btn { width: 100%; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-notice { padding: .8rem 1rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .92rem; margin-bottom: 1rem; }
.form-notice--ok { background: #e8f7ee; color: #176c3a; border: 1px solid #b7e4c7; }
.form-notice--err { background: #fdecec; color: #a12121; border: 1px solid #f4c2c2; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer-cta { background: linear-gradient(120deg, var(--red-dark), var(--red-deeper)); color: #fff; position: relative; overflow: hidden; }
/* faint radial sheen so the band reads as lit, not flat */
.footer-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(640px 300px at 88% -30%, rgba(255,255,255,.16), transparent 60%); pointer-events: none; }
.footer-cta__inner { position: relative; }
.footer-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: clamp(2.2rem, 5vw, 3.2rem); }
.footer-cta__title { font-size: clamp(1.7rem, 3.5vw, 2.6rem); color: #fff; }
.footer-cta__sub { margin-top: .4rem; color: rgba(255,255,255,.86); max-width: 48ch; }
.footer-cta__btns { display: flex; flex-wrap: wrap; gap: .8rem; }

.footer-main { background: var(--ink); color: rgba(255,255,255,.82); }
.footer-main__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.2rem; padding-block: clamp(2.5rem, 5vw, 3.8rem); }
.brand--footer .brand__name { color: #fff; }
.footer-about { margin: 1rem 0 1.2rem; font-size: .95rem; line-height: 1.65; }
.footer-accred { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.chip { display: inline-flex; align-items: center; padding: .35rem .8rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: .78rem; font-weight: 600; }
.chip--sm { font-size: .72rem; padding: .3rem .65rem; }

.footer-heading { font-size: 1.05rem; color: #fff; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1rem; font-family: var(--ff-head); }
.footer-links { list-style: none; padding: 0; display: grid; gap: .55rem; }
.footer-links a { color: rgba(255,255,255,.82); font-size: .95rem; transition: color .15s var(--ease), padding-left .15s var(--ease); }
.footer-links a:hover { color: #fff; padding-left: 3px; }
.footer-contact { list-style: none; padding: 0; display: grid; gap: .6rem; font-size: .95rem; }
.footer-contact a { color: rgba(255,255,255,.8); }
.footer-contact a:hover { color: #fff; }
.footer-phone { font-family: var(--ff-head); font-size: 1.5rem !important; font-weight: 800; color: #fff !important; }

.footer-bottom { background: #0d0f14; color: rgba(255,255,255,.74); font-size: .84rem; }
/* Links here sit on near-black, so they must be light, not the AAA red used on
   light backgrounds (red on #0d0f14 is only ~2.3:1). White .8 ≈ 9:1 = AAA. */
.footer-bottom a { color: rgba(255,255,255,.8); text-decoration: underline; }
.footer-bottom a:hover { color: #fff; }
.footer-bottom__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-block: 1.2rem; }

/* ==========================================================================
   Inner pages
   ========================================================================== */
.page-hero { background: var(--ink); color: #fff; padding-block: clamp(2.5rem, 6vw, 4rem); position: relative; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 280px at 85% 0%, rgba(207,46,46,.4), transparent 60%); pointer-events: none; }
.page-hero--slim { padding-block: clamp(2rem, 4vw, 3rem); }
.page-hero__title { font-size: clamp(2.2rem, 5vw, 3.6rem); color: #fff; position: relative; }
.page-hero__title span { color: var(--gold); }
.page-hero__sub { margin-top: .6rem; color: rgba(255,255,255,.78); font-size: 1.1rem; position: relative; }

.content-area { padding-block: clamp(2.5rem, 5vw, 4rem); }
.content-area--with-sidebar, .content-area--service { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.entry-content { font-size: 1.06rem; }
.entry-content > * + * { margin-top: 1.25rem; }
/* WCAG 1.4.8 (AAA): keep blocks of text under 80 characters per line. The `ch`
   unit tracks the wide "0" glyph (~1.25× an average char), so 56ch lands around
   the classic ~66-character ideal measure and stays comfortably under 80. */
.entry-content p, .entry-content ul, .entry-content ol, .entry-content blockquote { max-width: 56ch; }
.entry-content h2 { font-size: 1.9rem; margin-top: 2rem; }
.entry-content h3 { font-size: 1.45rem; margin-top: 1.5rem; }
.entry-content ul, .entry-content ol { padding-left: 1.4rem; display: grid; gap: .4rem; }
.entry-content img { border-radius: var(--radius); }
.entry-content a { font-weight: 600; border-bottom: 1px solid rgba(207,46,46,.3); }

.post-list { display: grid; gap: 1.6rem; }

/* Post card (regular) */
.post-card { display: grid; grid-template-columns: 340px 1fr; gap: 1.4rem; background: #fff; border: 1px solid var(--border); border-top: 4px solid var(--red); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

/* Featured post variant */
.post-card--featured { grid-column: 1 / -1; grid-template-columns: 360px 1fr; border-top-color: var(--gold); border-top-width: 6px; }
.post-card--featured .post-card__title { font-size: 2.1rem; }
.post-card--featured .post-card__media { height: 260px; }

/* Image wrapper with overlay */
.post-card__image-wrapper { position: relative; overflow: hidden; }
.post-card__media { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.post-card__media a { position: relative; display: block; width: 100%; height: 100%; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.05); }

/* Overlay (appears on hover) */
.post-card__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(207,46,46,.85), rgba(139,28,28,.85)); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s var(--ease); }
.post-card:hover .post-card__overlay { opacity: 1; }
.post-card__overlay-text { color: #fff; font-weight: 700; font-size: 1.2rem; }

/* Category badge on image */
.post-card__category-badge { position: absolute; top: 12px; right: 12px; display: inline-block; background: var(--red-dark); color: #fff; font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .02em; padding: .4rem .7rem; border-radius: 6px; text-decoration: none; transition: background .15s var(--ease), transform .15s var(--ease); z-index: 2; }
.post-card:hover .post-card__category-badge { transform: scale(1.08); }

/* Card body */
.post-card__body { padding: 1.4rem 1.4rem 1.4rem 0; display: flex; flex-direction: column; }

/* Title */
.post-card__title { font-size: 1.8rem; margin: 0 0 .8rem; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.post-card__title a { color: var(--ink); text-decoration: none; transition: color .15s var(--ease); }
.post-card__title a:hover { color: var(--red); }

/* Author info */
.post-card__author { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted-2); margin-bottom: .8rem; }
.post-card__author-name { font-weight: 600; color: var(--ink); }
.post-card__separator { color: var(--border); }
.post-card__date, .post-card__reading-time { color: var(--muted-2); }

/* Excerpt */
.post-card__excerpt { flex: 1; margin-bottom: 1rem; line-height: 1.65; }

/* Older category styling (kept for fallback) */
.post-card__category { margin: 0 0 .4rem; }
.post-card__category-link { display: inline-block; background: var(--red-tint); color: var(--red-dark); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; padding: .3rem .6rem; border-radius: 6px; text-decoration: none; transition: background .15s var(--ease), color .15s var(--ease); }
.post-card__category-link:hover { background: var(--red-dark); color: #fff; }

/* Read more link */
.text-link { color: var(--red-dark); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; transition: color .15s var(--ease); }
.text-link:hover { color: var(--red-deeper); }

/* Related posts section */
.post-related { margin-top: 3.5rem; padding-top: 3.5rem; border-top: 1px solid var(--border); }
.post-related__head { margin-bottom: 2rem; }
.post-related__title { font-size: 2rem; font-weight: 700; margin: 0; color: var(--ink); }
.post-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.post-related__card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.post-related__card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-related__media { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.post-related__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.post-related__card:hover .post-related__media img { transform: scale(1.05); }
.post-related__body { padding: 1.2rem; display: flex; flex-direction: column; }
.post-related__category { margin: 0 0 .5rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; color: var(--red-dark); letter-spacing: .02em; }
.post-related__card-title { font-size: 1.2rem; font-weight: 700; margin: 0 0 .4rem; line-height: 1.3; }
.post-related__card-title a { color: var(--ink); text-decoration: none; transition: color .15s var(--ease); }
.post-related__card-title a:hover { color: var(--red); }
.post-related__meta { font-size: .8rem; color: var(--muted-2); margin: 0; }

/* Post navigation */
.post-navigation { margin-top: 3.5rem; padding-top: 3.5rem; border-top: 1px solid var(--border); }
.post-navigation__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.post-navigation__item { display: flex; flex-direction: column; gap: .5rem; padding: 1.2rem; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: inherit; transition: all .18s var(--ease); }
.post-navigation__item:hover { background: var(--red-tint); border-color: var(--red); }
.post-navigation__arrow { font-size: 1.5rem; font-weight: 700; color: var(--red); transition: transform .15s var(--ease); }
.post-navigation__item:hover .post-navigation__arrow { transform: translateX(4px); }
.post-navigation__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); font-weight: 600; }
.post-navigation__title { font-size: 1.1rem; font-weight: 700; color: var(--ink); line-height: 1.3; }

/* Page hero category badge */
.page-hero__category { margin: 0 0 .8rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; color: var(--gold); letter-spacing: .02em; }

.blog-cta { margin-top: 3.5rem; }
.blog-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.8rem; }

.widget { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem; margin-bottom: 1.4rem; }
.widget-title { font-size: 1.1rem; margin-bottom: .8rem; }

.service-sidebar { position: sticky; top: 100px; }

.pagination { margin-top: 2.5rem; }
.pagination .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.pagination a, .pagination .current { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .8rem; border-radius: 10px; border: 1px solid var(--border); font-weight: 600; }
.pagination .current { background: var(--red-dark); color: #fff; border-color: var(--red-dark); }

/* ==========================================================================
   Landing pages: narrow container, inner hero, area chips, FAQ
   ========================================================================== */
.container--narrow { max-width: 820px; }

.hero--inner .hero__inner { padding-block: clamp(2.25rem, 5vw, 3.75rem); }
.hero--inner .hero__title { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }

.areas__chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.areas__chips li a {
	display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.05rem;
	border: 1px solid var(--border); border-radius: 999px; background: #fff;
	font-weight: 600; color: var(--ink); transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.areas__chips li a:hover { background: var(--red-tint); color: var(--red-dark); border-color: var(--red); }
.areas__chips .pin { width: 16px; height: 16px; }

.faq__list { display: grid; gap: .8rem; }
.faq__item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.faq__q {
	cursor: pointer; font-family: var(--ff-head); font-weight: 700; font-size: 1.18rem; color: var(--ink);
	padding: 1.05rem 1.3rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--red); flex: 0 0 auto; }
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__a { padding: 0 1.3rem 1.2rem; color: var(--muted); }
.faq__a p { margin: 0 0 .6rem; }
.faq__a p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.breadcrumbs { margin-bottom: .8rem; position: relative; }
.breadcrumbs__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; font-size: .85rem; }
.breadcrumbs__item { display: inline-flex; align-items: center; color: rgba(255,255,255,.74); }
.breadcrumbs__item a { color: rgba(255,255,255,.78); }
.breadcrumbs__item a:hover { color: #fff; }
.breadcrumbs__item[aria-current="page"] { color: var(--gold); }
.breadcrumbs__item:not(:last-child)::after { content: "/"; margin-left: .35rem; color: rgba(255,255,255,.3); }

/* ==========================================================================
   Single post / entry extras
   ========================================================================== */
.entry-featured { width: 100%; border-radius: var(--radius); margin-bottom: 2rem; box-shadow: var(--shadow-sm); }
.entry-footer { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); font-size: .9rem; color: var(--muted); }
.entry-footer a { color: var(--red-dark); font-weight: 600; }
.entry-cta { margin-top: 2.5rem; max-width: 380px; position: sticky; top: 100px; }

/* Content sidebar */
.content-sidebar { position: sticky; top: 100px; }
.content-sidebar .widget { box-shadow: var(--shadow-sm); }

/* ==========================================================================
   404
   ========================================================================== */
.error-404 { max-width: 640px; }
.error-404__lead { font-weight: 600; font-size: 1.1rem; }
.error-404__links { list-style: none; padding: 0; margin: 1rem 0 2rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.error-404__links a { display: inline-flex; padding: .6rem 1.1rem; border: 1px solid var(--border); border-radius: 999px; font-weight: 600; color: var(--ink); }
.error-404__links a:hover { background: var(--red-tint); color: var(--red-dark); border-color: var(--red); }
.error-404__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; font-weight: 600; margin-bottom: 1.5rem; }
.error-404__search input[type="search"] { width: 100%; max-width: 360px; padding: .75rem .9rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font: inherit; }

/* ==========================================================================
   Mobile sticky CTA bar (carried from original theme)
   ========================================================================== */
.mobile-cta-bar { display: none; }
@media (max-width: 767px) {
	.mobile-cta-bar {
		display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1500;
		height: 60px; padding-bottom: env(safe-area-inset-bottom, 0px);
		box-shadow: 0 -2px 12px rgba(0,0,0,.15);
	}
	.mobile-cta-bar__btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; transition: filter .15s ease; color: #fff; line-height: 1.2; }
	.mobile-cta-bar__btn:hover, .mobile-cta-bar__btn:focus { filter: brightness(1.1); color: #fff; }
	.mobile-cta-bar__btn svg { width: 20px; height: 20px; fill: currentColor; }
	.mobile-cta-bar__btn--call { background: var(--ink); }
	.mobile-cta-bar__btn--quote { background: var(--red-dark); }
	.mobile-cta-bar__btn--whatsapp { background: #0c7035; } /* AA: white text ~5.5:1 (was #25d366 ~2:1) */
	body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   Quote popup (exit-intent + scroll-triggered)
   ========================================================================== */
.popup-overlay {
	position: fixed; inset: 0; z-index: 2000;
	background: rgba(16,20,30,.72); backdrop-filter: blur(3px);
	display: flex; align-items: center; justify-content: center; padding: 1.5rem;
	opacity: 0; visibility: hidden;
	transition: opacity .25s var(--ease), visibility .25s var(--ease);
}
.popup-overlay.is-open { opacity: 1; visibility: visible; }

.popup {
	background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
	width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto;
	transform: translateY(28px) scale(.97);
	transition: transform .3s var(--ease);
	position: relative;
}
.popup-overlay.is-open .popup { transform: none; }

.popup__head {
	background: linear-gradient(135deg, var(--red-dark), var(--red-deeper)); color: #fff;
	padding: 1.3rem 1.5rem;
	border-radius: var(--radius) var(--radius) 0 0;
}
.popup__title {
	font-family: var(--ff-head); font-size: 1.65rem; font-weight: 800;
	text-transform: uppercase; letter-spacing: .02em; color: #fff;
	margin: 0;
}
.popup__sub { font-size: .87rem; opacity: .9; margin: .25rem 0 0; }

.popup__close {
	position: absolute; top: .8rem; right: .8rem;
	width: 36px; height: 36px; border-radius: 50%; border: none;
	background: rgba(255,255,255,.22); color: #fff; cursor: pointer;
	display: grid; place-items: center;
	transition: background .15s ease;
}
.popup__close:hover { background: rgba(255,255,255,.38); }
.popup__close:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.popup__body { padding: 1.4rem 1.5rem 1rem; }

.popup__footer {
	padding: .8rem 1.5rem 1.3rem; border-top: 1px solid var(--border);
	font-size: .87rem; color: var(--muted); text-align: center;
}
.popup__phone { font-weight: 700; color: var(--red-dark); }

@media (prefers-reduced-motion: reduce) {
	.popup, .popup-overlay { transition: none !important; }
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-layout {
	display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem);
	align-items: start; padding-block: clamp(2.5rem, 5vw, 4rem);
}
.contact-form-col__title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: .6rem; }
.contact-intro { color: var(--muted); margin-bottom: 1.4rem; }

.contact-block {
	background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
	padding: 1.3rem 1.4rem; margin-bottom: 1rem;
}
.contact-block:last-child { margin-bottom: 0; }
.contact-block__title { font-size: 1.05rem; font-family: var(--ff-head); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); margin-bottom: .75rem; }

.contact-block--accent {
	background: var(--red-tint); border-color: rgba(207,46,46,.2);
	display: flex; align-items: flex-start; gap: .75rem;
}
.contact-block--accent svg { fill: var(--red); flex: 0 0 22px; width: 22px; height: 22px; margin-top: 2px; }
.contact-block--accent p { font-size: .95rem; margin: 0; }

.contact-phone-link {
	display: inline-flex; align-items: center; gap: .5rem;
	font-family: var(--ff-head); font-size: 1.8rem; font-weight: 800; color: var(--ink);
	margin-bottom: .6rem;
}
.contact-phone-link svg { fill: var(--red); width: 22px; height: 22px; }
.contact-phone-link:hover { color: var(--red-dark); }

.contact-wa-link {
	display: inline-flex; align-items: center; gap: .5rem;
	font-weight: 700; color: #0a4a41; font-size: .97rem; min-height: 44px; /* AAA: ≈8.1:1 on --bg-alt */
}
.contact-wa-link svg { fill: #0a4a41; width: 20px; height: 20px; }
.contact-wa-link:hover { color: #073f37; }

.contact-address { font-style: normal; line-height: 1.7; }
.contact-address a { color: var(--text); border-bottom: 1px solid rgba(29,33,39,.2); }
.contact-address a:hover { color: var(--red-dark); border-color: var(--red); }

.hours-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hours-table th, .hours-table td { padding: .4rem 0; vertical-align: top; }
.hours-table th { font-weight: 600; color: var(--ink); width: 110px; }
.hours-table td { color: var(--muted); }
.hours-closed { color: var(--muted-2); font-style: italic; }

.contact-review-cta { color: var(--muted); font-size: .93rem; margin-bottom: 1rem; }

.contact-map { height: 400px; overflow: hidden; }
.contact-map iframe { width: 100%; height: 100%; display: block; }

@media (max-width: 860px) {
	.contact-layout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   HTML sitemap
   ========================================================================== */
.html-sitemap { display: grid; gap: 2.5rem; }
.html-sitemap__group {}
.html-sitemap__heading { font-size: 1.4rem; margin-bottom: .8rem; padding-bottom: .5rem; border-bottom: 2px solid var(--border); }
.html-sitemap__list { list-style: none; padding: 0; display: grid; gap: .45rem; }
.html-sitemap__list--cols { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .45rem 1.4rem; }
.html-sitemap__list a { color: var(--text); font-weight: 500; }
.html-sitemap__list a:hover { color: var(--red-dark); }

/* ==========================================================================
   Reveal animations
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(22px); filter: blur(6px); transition: opacity .6s var(--ease), transform .7s var(--ease), filter .6s var(--ease); transition-delay: calc(var(--reveal-i, 0) * 65ms); }
.reveal.is-visible { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; filter: none !important; } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
	.footer-main__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
	.nav-toggle { display: inline-flex; }
	.navbar__cta { display: none; }
	.primary-nav { position: static; }
	.nav-menu {
		position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw); flex-direction: column;
		align-items: stretch; gap: .2rem; background: #fff; padding: 5.5rem 1.2rem 2rem;
		box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .28s var(--ease);
		overflow-y: auto; z-index: 1200;
	}
	body.nav-open .nav-menu { transform: translateX(0); }
	/* z-index 999 (below .site-header's 1000): the off-canvas panel lives
	   inside the header's stacking context and is capped at 1000, so the dim
	   overlay must sit below the header for the panel to render above it and
	   stay clickable. */
	body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(16,20,30,.5); z-index: 999; }
	.nav-menu a { padding: .85rem 1rem; font-size: 1.05rem; border-radius: 10px; }
	.nav-menu ul { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding-left: .8rem; }
	.nav-toggle { z-index: 1300; }
	body.nav-open .nav-toggle__bars span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
	body.nav-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
	body.nav-open .nav-toggle__bars span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

	.hero__inner { grid-template-columns: 1fr; }
	.hero__card { max-width: 460px; }
	.whyus__inner, .areas__inner, .quote-section__inner { grid-template-columns: 1fr; }
	.process__steps { grid-template-columns: repeat(2, 1fr); }
	.process__steps li::after { display: none; }
	.stats__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
	.stat + .stat::before { display: none; }
	.content-area--with-sidebar, .content-area--service { grid-template-columns: 1fr; }
	.service-sidebar { position: static; max-width: 380px; }
}

@media (max-width: 640px) {
	body { font-size: 16px; }
	.topbar__msg { font-size: .74rem; }
	.topbar__rating { display: none; }
	.quote-form__grid { grid-template-columns: 1fr; }
	.process__steps { grid-template-columns: 1fr; }
	.areas__list { grid-template-columns: 1fr; }
	.footer-main__grid { grid-template-columns: 1fr; }
	.footer-cta__inner { flex-direction: column; align-items: flex-start; }
	.footer-cta__btns .btn { flex: 1; }
	.post-card, .post-card--featured { grid-template-columns: 1fr; }
	.post-card__media { aspect-ratio: 16 / 9; }
	.post-card__media img { height: auto; }
	.post-card__body { padding: 1.2rem; }
	.post-card__title { font-size: 1.4rem; }
	.post-card--featured .post-card__title { font-size: 1.6rem; }
	.post-related__grid { grid-template-columns: 1fr; }
	.post-navigation__inner { grid-template-columns: 1fr; }
	.blog-cta__actions { flex-direction: column; align-items: stretch; }
	.blog-cta__actions .btn { width: 100%; }
	.content-sidebar { position: static; max-width: 100%; margin-top: 2rem; }
	.hero__actions .btn { flex: 1; }
}

/* =========================================================================
   Recent Jobs (portfolio)
   ========================================================================= */
.jobs__grid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
	gap:24px;
}
.job-card{
	display:flex;
	flex-direction:column;
	background:var(--white);
	border:1px solid var(--border);
	border-radius:var(--radius);
	overflow:hidden;
	box-shadow:var(--shadow-sm);
	text-decoration:none;
	color:inherit;
	transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.job-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.job-card__media{
	position:relative;
	display:block;
	aspect-ratio:4 / 3;
	background:var(--bg-alt);
	overflow:hidden;
}
.job-card__media img,
.job-card__img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform .4s var(--ease);
}
.job-card:hover .job-card__media img{ transform:scale(1.05); }
.job-card__placeholder{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	color:var(--muted);
	opacity:.5;
}
.job-card__body{ display:flex; flex-direction:column; gap:8px; padding:18px 20px 20px; }
.job-card__meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.job-card__tag{
	display:inline-block;
	background:var(--red-tint);
	color:var(--red-dark);
	font-size:.74rem;
	font-weight:700;
	letter-spacing:.02em;
	text-transform:uppercase;
	padding:3px 9px;
	border-radius:100px;
	text-decoration:none;
}
.job-card__loc{
	display:inline-flex;
	align-items:center;
	gap:3px;
	font-size:.82rem;
	color:var(--muted-2);
	text-decoration:none;
}
.job-card__loc .pin{ width:13px; height:13px; fill:currentColor; }
.job-card__title{ font-family:var(--ff-head); font-size:1.3rem; font-weight:600; line-height:1.15; color:var(--ink); }
.job-card__desc{ font-size:.92rem; color:var(--muted); line-height:1.5; }
.job-card__link{ margin-top:auto; padding-top:6px; font-weight:700; font-size:.9rem; color:var(--red-dark); }
.jobs__more{ margin-top:32px; text-align:center; }
.jobs__empty{ text-align:center; color:var(--muted); padding:30px 0; }

/* Single job */
.job-single__meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.job-single__meta .job-card__tag,
.job-single__meta .job-card__loc{ font-size:.85rem; }
.job-single__meta .job-card__loc{ background:var(--bg-alt); padding:3px 11px 3px 8px; border-radius:100px; }
.job-gallery{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:12px;
	margin:8px 0 32px;
}
.job-gallery__item{
	display:block;
	border-radius:var(--radius-sm);
	overflow:hidden;
	aspect-ratio:1 / 1;
	background:var(--bg-alt);
	cursor:zoom-in;
}
.job-gallery__item--lead{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }

/* Service page photo wall — same lightbox as a project page, but a flat grid:
   these photos come from several different projects, so promoting one of them
   to a lead tile would imply a relationship that isn't there. */
.service-gallery__grid{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:.75rem;
}
.service-gallery__item{
	position:relative;
	display:block;
	overflow:hidden;
	border-radius:var(--radius);
	aspect-ratio:4/3;
	background:var(--surface-2, #eef0f3);
}
.service-gallery__item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); }
.service-gallery__item:hover img{ transform:scale(1.04); }
.service-gallery__cap{
	position:absolute;
	inset:auto 0 0 0;
	padding:1.6rem .7rem .55rem;
	font-size:.78rem;
	line-height:1.25;
	color:#fff;
	background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.78) 70%);
	opacity:0;
	transition:opacity .25s var(--ease);
}
.service-gallery__item:hover .service-gallery__cap,
.service-gallery__item:focus-visible .service-gallery__cap{ opacity:1; }
@media (max-width: 900px){ .service-gallery__grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width: 600px){
	.service-gallery__grid{ grid-template-columns:repeat(2, 1fr); gap:.5rem; }
	/* Touch has no hover, so the caption would never appear — show it always. */
	.service-gallery__cap{ opacity:1; }
}
.job-gallery__item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); }
.job-gallery__item:hover img{ transform:scale(1.04); }
.job-single__body{ max-width:760px; margin:0 auto 32px; }
.job-single__cta{
	max-width:760px;
	margin:0 auto;
	padding:22px 26px;
	background:var(--bg-alt);
	border:1px solid var(--border);
	border-radius:var(--radius);
	display:flex;
	flex-wrap:wrap;
	gap:14px;
	align-items:center;
	justify-content:space-between;
}
.job-single__cta p{ margin:0; }
.job-single__cta-btns{ display:flex; gap:10px; flex-wrap:wrap; }

@media (max-width:640px){
	.job-gallery{ grid-template-columns:repeat(2, 1fr); }
	.job-gallery__item--lead{ grid-column:span 2; grid-row:auto; }
}

/* Lightbox */
.yare-lightbox{
	position:fixed;
	inset:0;
	z-index:9999;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(10,12,18,.92);
	padding:30px;
	opacity:0;
	visibility:hidden;
	transition:opacity .2s ease;
}
.yare-lightbox.is-open{ opacity:1; visibility:visible; }
.yare-lightbox img{ max-width:100%; max-height:100%; border-radius:8px; box-shadow:var(--shadow-lg); }
.yare-lightbox__close,
.yare-lightbox__nav{
	position:absolute;
	background:rgba(255,255,255,.12);
	color:#fff;
	border:none;
	cursor:pointer;
	width:48px;
	height:48px;
	border-radius:50%;
	font-size:24px;
	line-height:1;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:background .2s ease;
}
.yare-lightbox__close:hover,
.yare-lightbox__nav:hover{ background:rgba(255,255,255,.25); }
.yare-lightbox__close{ top:20px; right:20px; }
.yare-lightbox__nav--prev{ left:20px; top:50%; transform:translateY(-50%); }
.yare-lightbox__nav--next{ right:20px; top:50%; transform:translateY(-50%); }

/* Image-rich service cards + hero photo layer */
.service-card__media{
	display:block;
	margin:-1.8rem -1.7rem 1.2rem;
	aspect-ratio:16 / 10;
	overflow:hidden;
	background:var(--bg-alt);
}
.service-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); }

/* A card with a photo emits its icon too (see yare_service_card). Desktop
   shows the photo and hides the icon; the compact mobile list below does the
   reverse. */
.service-card--media .service-card__icon{ display:none; }

/* --------------------------------------------------------------------------
   Compact service list on phones.

   The full service listing runs to 38 cards. As image cards that is roughly
   17,000px of scrolling on a phone — it *was* the area pages, with the actual
   content buried beneath it. Below 768px each card becomes a single tappable
   row: icon, name, chevron. Nothing is hidden from the page or the crawler,
   the links are all still there and still visible; the photo and the blurb
   simply stand down where there is no room for them.
   -------------------------------------------------------------------------- */
@media (max-width: 767px){
	.services__grid--compact{ grid-template-columns:1fr; gap:.5rem; }

	.services__grid--compact .service-card{
		flex-direction:row;
		align-items:center;
		gap:.85rem;
		padding:.7rem .95rem;
		min-height:56px;              /* comfortably over the 44px target size */
		border-radius:12px;
	}
	.services__grid--compact .service-card:hover{ transform:none; }

	.services__grid--compact .service-card__media,
	.services__grid--compact .service-card__desc,
	.services__grid--compact .service-card__link{ display:none; }

	.services__grid--compact .service-card--media .service-card__icon{ display:grid; }
	.services__grid--compact .service-card__icon{
		width:38px; height:38px; flex:0 0 38px;
		margin:0; border-radius:10px;
	}
	.services__grid--compact .service-card__icon .icon{ width:20px; height:20px; }

	.services__grid--compact .service-card__title{
		font-size:1rem; line-height:1.25; margin:0; flex:1;
	}
	/* Chevron, so a row still reads as something you can tap. */
	.services__grid--compact .service-card::after{
		content:"";
		flex:0 0 8px; width:8px; height:8px;
		border-right:2px solid var(--muted);
		border-bottom:2px solid var(--muted);
		transform:rotate(-45deg);
		margin-right:2px;
	}
	.services__grid--compact .service-card::before{ display:none; }
}
.service-card--media:hover .service-card__media img{ transform:scale(1.05); }

/* Hero photo sits ABOVE the decorative gradient (pushed to z-index:-2) with a
   dark scrim, so the image is genuinely visible while white text stays AA. */
.hero--inner .hero__bg{ z-index:-2; }
.hero__photo{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero__photo img{ width:100%; height:100%; object-fit:cover; }
.hero__photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(16,18,24,.94) 0%, rgba(16,18,24,.88) 42%, rgba(18,20,26,.55) 100%); }

/* --- Phone imagery -------------------------------------------------------
   Most visitors are on a phone, and the brief was that the pictures read too
   small there. Two fixes:

   1. The hero scrim runs left-to-right, which suits the two-column desktop
      layout but on a ~390px screen means the photo sits under near-opaque
      dark for its whole width. Rotate it to vertical on mobile, where the
      hero stacks: the top stays dark enough for the white heading, and the
      photo becomes visible lower down. The dark stops deliberately run to
      55% — past where the hero copy ends — so text contrast is unchanged.
   2. Work photos on cards get a taller crop, so they fill more of the screen
      in the single-column mobile layout.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.hero__photo::after {
		background: linear-gradient(180deg, rgba(16,18,24,.94) 0%, rgba(16,18,24,.90) 55%, rgba(18,20,26,.60) 100%);
	}
	.service-card__media { aspect-ratio: 4 / 3; }
	.market-card__media  { aspect-ratio: 4 / 3; }
	.job-card__media     { aspect-ratio: 3 / 2; }
}

/* Footer logo image */
.brand--footer .custom-logo,
.footer-logo{ max-height:54px; width:auto; display:block; }

/* =========================================================================
   Mega-menu navigation (Domestic / Commercial / Industrial)
   ========================================================================= */
.navbar { position: relative; }
/* Desktop only. On mobile (≤980px) .nav-menu must keep position:fixed so it
   slides in as the off-canvas panel; this rule has equal specificity to that
   mobile rule but comes later in the file, so left unscoped it would override
   it and collapse the panel back into flow (tall white header + overflow). */
@media (min-width: 981px) {
	.nav-menu--mega { position: static; }
}
/* Beat the theme's generic dropdown rules (.nav-menu li / .nav-menu ul). */
.nav-menu--mega .has-mega { position: static; }
.nav-menu--mega .mega ul {
	position: static; min-width: 0; margin: 0; padding: 0;
	background: none; border: 0; border-radius: 0; box-shadow: none;
	opacity: 1; visibility: visible; transform: none; z-index: auto;
}
.nav-top { display: inline-flex; align-items: center; gap: .15rem; }
.nav-caret { width: 16px; height: 16px; fill: currentColor; opacity: .6; transition: transform .2s var(--ease); }
.has-mega.is-open .nav-caret { transform: rotate(180deg); }
/* suppress the generic CSS caret on mega items (we use the SVG) */
.nav-menu--mega .has-mega > .nav-top::after { display: none; }
.mega-toggle { display: none; }

.mega {
	position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
	background: #fff; border-top: 1px solid var(--border); box-shadow: var(--shadow-lg);
	opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px);
	transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
/* Open state is driven entirely by JS hover-intent (.is-open) — never by raw
   :hover — so exactly one panel is ever shown. :focus-within keeps keyboard.
   pointer-events gate the closed panel: opacity:0 alone stays hit-testable
   (and the link list forces visibility:visible), which would create an
   invisible hover hot-zone below the header — pointer-events:none kills it. */
.has-mega:focus-within > .mega,
.has-mega.is-open > .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.mega__inner {
	max-width: var(--container); margin: 0 auto; padding: 1.4rem var(--gutter);
	display: grid; grid-template-columns: 2fr 1fr; gap: clamp(1.5rem, 3vw, 3rem);
}
.mega__heading { font-family: var(--ff-head); text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; color: var(--muted-2); margin: 0 0 .6rem; }
.mega__heading--accent { color: var(--red-dark); }
.mega__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .05rem .8rem; }
.mega__links a { display: flex; align-items: center; gap: .55rem; padding: .4rem .5rem; border-radius: 9px; font-weight: 600; font-size: .95rem; color: var(--text); }
.mega__links a:hover { background: var(--red-tint); color: var(--red-dark); }
.mega__ic { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: var(--bg-alt); color: var(--red); flex: none; }
.mega__ic .icon { width: 18px; height: 18px; }
.nav-menu--mega .mega__all { display: inline-block; margin-top: .7rem; padding: 0; font-weight: 700; color: var(--red-dark); font-size: .9rem; }
.mega__col--featured { border-left: 1px solid var(--border); padding-left: clamp(1rem, 2.5vw, 1.75rem); }
.nav-menu--mega .mega-feature { display: flex; gap: .7rem; align-items: center; padding: .4rem; border-radius: 10px; margin-bottom: .3rem; transition: background .18s var(--ease); }
.mega-feature:hover { background: var(--bg-alt); }
.mega-feature__media { flex: none; width: 72px; height: 52px; border-radius: 8px; overflow: hidden; background: var(--bg-alt); }
.mega-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mega-feature__title { display: block; font-family: var(--ff-head); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.mega-feature__sub { display: block; font-size: .85rem; color: var(--muted); line-height: 1.35; margin-top: .1rem; }

/* Featured markets band (sector hubs) */
.featured-markets__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.market-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.market-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.market-card__media { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-alt); }
.market-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.market-card:hover .market-card__media img { transform: scale(1.05); }
.market-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; }
.market-card__title { font-family: var(--ff-head); font-size: 1.7rem; color: var(--ink); }
.market-card__desc { color: var(--muted); }
.market-card__link { margin-top: .3rem; font-weight: 700; color: var(--red-dark); display: inline-flex; align-items: center; gap: .35rem; }
.market-card__link span { transition: transform .2s var(--ease); }
.market-card:hover .market-card__link span { transform: translateX(4px); }

@media (max-width: 700px) {
	.featured-markets__grid { grid-template-columns: 1fr; }
}

/* Renewables cross-link: one wide market card sat on a sector hub, pointing at
   /renewables/. Media beside the copy rather than above it, so it reads as a
   signpost off the page and not as another content section. */
.market-card--wide { flex-direction: row; align-items: stretch; }
.market-card--wide .market-card__media { flex: 0 0 42%; aspect-ratio: auto; }
.market-card--wide .market-card__body { justify-content: center; padding: 1.6rem clamp(1.5rem, 3vw, 2.4rem); }
.market-card__eyebrow {
	font-family: var(--ff-head); text-transform: uppercase; letter-spacing: .06em;
	font-size: .8rem; font-weight: 700; color: var(--red-dark);
}
@media (max-width: 700px) {
	.market-card--wide { flex-direction: column; }
	.market-card--wide .market-card__media { flex: none; aspect-ratio: 16/9; }
}

/* Mega menu on mobile: accordion inside the slide-in panel */
@media (max-width: 980px) {
	/* backdrop-filter establishes a containing block for fixed descendants,
	   which would box the off-canvas .nav-menu to the navbar's height instead
	   of the viewport. Drop the frosted-glass effect on mobile so the panel
	   fills 100vh. */
	.navbar { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; }
	.has-mega { position: static; }
	.has-mega > .nav-top { flex: 1; }
	.has-mega { display: flex; flex-wrap: wrap; align-items: center; }
	.mega-toggle {
		display: inline-flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; margin-left: auto; background: var(--bg-alt);
		border: 1px solid var(--border); border-radius: 10px; cursor: pointer; position: relative;
	}
	.mega-toggle::before, .mega-toggle::after { content: ""; position: absolute; background: var(--ink); border-radius: 2px; }
	.mega-toggle::before { width: 14px; height: 2.5px; }
	.mega-toggle::after { width: 2.5px; height: 14px; transition: transform .2s var(--ease); }
	.has-mega.is-open .mega-toggle::after { transform: rotate(90deg); opacity: 0; }
	.mega {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: none; flex-basis: 100%;
		max-height: 0; overflow: hidden; transition: max-height .28s var(--ease);
	}
	.has-mega.is-open > .mega { max-height: 2600px; }
	.mega__inner { display: block; padding: .4rem 0 .6rem .6rem; }
	.mega__col--featured { border-left: none; padding-left: 0; margin-top: .6rem; }
	.mega__links { grid-template-columns: 1fr; }
	.nav-caret { display: none; }
}

/* Service "what's included" checklist */
.includes__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem 1.8rem; }
.includes__item{ display:flex; align-items:flex-start; gap:.7rem; font-size:1rem; color:var(--text); line-height:1.5; }
.includes__tick{ flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--red-tint); color:var(--red); margin-top:1px; }
@media (max-width:640px){ .includes__grid{ grid-template-columns:1fr; } }

/* Cookie consent banner */
.cookie-consent{ position:fixed; left:0; right:0; bottom:0; z-index:1400; background:var(--ink-2); color:#fff; box-shadow:0 -8px 30px rgba(0,0,0,.25); transform:translateY(100%); transition:transform .3s var(--ease); }

/* The sticky mobile call bar is also fixed to the bottom, at a HIGHER z-index,
   and it was sitting directly on top of the cookie banner's buttons — a
   Lighthouse target-size run measured only 2.3px of the Accept button as
   reachable. On a phone that means consent could neither be given nor refused,
   and the banner therefore never dismissed. Lift the banner clear of the bar. */
@media (max-width:767px){
	.cookie-consent{ bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}
.cookie-consent.is-in{ transform:translateY(0); }
.cookie-consent__inner{ max-width:var(--container); margin:0 auto; padding:1rem var(--gutter); display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.cookie-consent__text{ margin:0; flex:1 1 320px; font-size:.92rem; color:rgba(255,255,255,.85); }
.cookie-consent__text a{ color:#fff; text-decoration:underline; }
.cookie-consent__actions{ display:flex; gap:.6rem; flex:0 0 auto; }
.cookie-consent .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.4); }
.cookie-consent .btn--ghost:hover{ background:rgba(255,255,255,.12); color:#fff; }
@media (max-width:520px){ .cookie-consent__actions{ width:100%; } .cookie-consent__actions .btn{ flex:1; } }

/* Respect reduced motion across interactive components */
@media (prefers-reduced-motion: reduce){
	.mega, .cookie-consent, .popup-overlay, .popup, .yare-lightbox, .hero__photo img, .service-card, .job-card, .market-card { transition:none !important; animation:none !important; }
}

/* Footer legal links */
.footer-legal{ display:flex; flex-wrap:wrap; gap:.2rem 1rem; justify-content:center; }
.footer-legal a{ color:rgba(255,255,255,.74); font-size:.82rem; }
.footer-legal a:hover{ color:#fff; }

/* =========================================================================
   Client / partner logo slider ("Companies we work with")
   ========================================================================= */
.clients { overflow: hidden; }
.clients .section__head { margin-bottom: 2.2rem; }

.clients__marquee {
	display: flex;
	gap: 1rem;
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.clients__track {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
	min-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: clients-scroll 48s linear infinite;
	will-change: transform;
}
.clients__marquee:hover .clients__track,
.clients__marquee:focus-within .clients__track { animation-play-state: paused; }

@keyframes clients-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

.clients__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 260px;
	height: 140px;
	padding: 1.2rem 1.5rem;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}
.clients__logo {
	max-width: 100%;
	max-height: 92px;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: .9;
	transition: opacity .25s var(--ease);
}
.clients__item:hover .clients__logo { opacity: 1; }

/* A handful of brands only publish white-on-transparent artwork, which is an
   empty box on the default white tile. Their tile goes dark instead — their
   logo is left exactly as they drew it. */
.clients__item--dark {
	background: var(--ink, #14161a);
	border-color: var(--ink, #14161a);
}
.clients__item--dark .clients__name { color: var(--white); }

/* Wordmark fallback for clients whose logo artwork hasn't arrived yet. Uses
   --text on --white (≈15:1, comfortably AAA) so a name tile is as readable as
   any other element on the page. */
.clients__name {
	font-family: var(--ff-head);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: .03em;
	text-align: center;
	color: var(--text);
	text-wrap: balance;
}

/* Phones get BIGGER logo tiles, not smaller. Most visitors arrive on a phone
   and a shrunk-to-fit logo reads as an afterthought — the client's brief was
   explicitly "make the company stuff bigger". Fewer tiles on screen at once is
   the right trade: the marquee scrolls, so nothing is lost. */
@media (max-width: 600px) {
	.clients__item { width: 268px; height: 156px; padding: 1.1rem 1.3rem; }
	.clients__logo { max-height: 108px; }
}

/* Respect reduced-motion: stop the scroll, let users swipe through instead,
   and drop the decorative duplicate track so logos aren't shown twice. */
@media (prefers-reduced-motion: reduce) {
	.clients__marquee {
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}
	.clients__track { animation: none; }
	.clients__track[aria-hidden="true"] { display: none; }
	.clients__item { scroll-snap-align: start; }
}

/* ==========================================================================
   ✦ Polish layer — depth, motion & material. Purely decorative: nothing here
   places text on a new colour, so every WCAG AAA contrast ratio is untouched.
   ========================================================================== */

/* ---- Brand mark: gradient + glow ---------------------------------------- */
.brand__mark { background: linear-gradient(135deg, var(--red), var(--red-deeper)); box-shadow: 0 4px 14px rgba(207,46,46,.4), inset 0 1px 0 rgba(255,255,255,.25); }

/* ---- Navbar: lit hairline once scrolled --------------------------------- */
.is-scrolled .navbar { border-bottom-color: transparent; box-shadow: var(--shadow-sm), 0 1px 0 rgba(207,46,46,.12); }
.navbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, rgba(207,46,46,.55), transparent); opacity: 0; transition: opacity .3s var(--ease); }
.is-scrolled .navbar::after { opacity: 1; }

/* ---- Hero: slow animated colour drift (homepage gradient hero only, so the
   inner-page photo layer is never disturbed). Painted inside .hero__bg's own
   stacking context — above its base gradient, below its decorative grid. ---- */
.hero:not(.hero--inner) .hero__bg::before { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: conic-gradient(from 210deg at 80% -10%, rgba(255,106,77,.22), transparent 32%, transparent 68%, rgba(207,46,46,.18));
	mix-blend-mode: screen; animation: hero-drift 22s ease-in-out infinite alternate; }
@keyframes hero-drift { from { transform: translate3d(0,0,0) scale(1); opacity: .75; } to { transform: translate3d(-3%,2%,0) scale(1.1); opacity: 1; } }

/* Hero quote card: gradient hairline + inner highlight = "expensive" glass */
.hero__card { position: relative; }
.hero__card::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius); padding: 1px; pointer-events: none;
	background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,0) 40%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.hero__photo::after { background: linear-gradient(100deg, rgba(16,18,24,.92) 0%, rgba(16,18,24,.80) 40%, rgba(18,20,26,.42) 100%); }

/* ---- Trust bar: dividers, hover lift, gradient figures ------------------ */
.trustbar__inner { gap: 0; }
.trustbar__item { padding: .2rem .8rem; border-radius: 12px; transition: transform .2s var(--ease), background .2s var(--ease); }
.trustbar__item + .trustbar__item { border-left: 1px solid var(--border); }
.trustbar__item:hover { transform: translateY(-3px); background: var(--bg-alt); }
.trustbar__big { background: linear-gradient(135deg, var(--red), var(--red-deeper)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 640px) { .trustbar__item + .trustbar__item { border-left: 0; } }

/* ---- Stats: gradient figures, lit band, count-up friendly --------------- */
.stats { background: linear-gradient(135deg, var(--red-dark), var(--red-deeper)); position: relative; overflow: hidden; }
.stats::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 44px 44px; mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%); }
.stats__grid { position: relative; }
.stat__num { background: linear-gradient(180deg, #fff 35%, var(--gold-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 6px 24px rgba(0,0,0,.18); }

/* ---- Service cards: icon ring, brighter lift ---------------------------- */
.service-card__icon { background: linear-gradient(135deg, var(--red-tint), #fff); box-shadow: inset 0 0 0 1px rgba(207,46,46,.14); transition: transform .25s var(--ease); }
.service-card:hover .service-card__icon { transform: scale(1.06) rotate(-3deg); }
.service-card:hover { box-shadow: var(--shadow-lg); }

/* ---- Feature & process micro-motion ------------------------------------- */
.feature-list__ico { transition: transform .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.feature-list li:hover .feature-list__ico { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--red-deeper); }
.process-step:hover .process-step__num { transform: translateY(-3px); }
.process-step__num { transition: transform .2s var(--ease); }

/* ---- Dark sections: top edge glow + review card sheen ------------------- */
.section--dark { position: relative; }
.section--dark::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(207,46,46,.6), transparent); }
.review-card { position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-sm); transition: transform .22s var(--ease), border-color .22s var(--ease); }
.review-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.18); }
.review-card__text { position: relative; }
.review-card__text::before { content: "\201C"; position: absolute; top: -.5em; left: -.1em; font-family: var(--ff-head); font-size: 3.4rem; line-height: 1; color: rgba(207,46,46,.4); z-index: 0; }

/* Review attribution: avatar with initial */
.review-card__by { flex-direction: row; align-items: center; gap: .7rem; margin-top: .2rem; }
.review-card__avatar { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
	background: linear-gradient(135deg, var(--red), var(--red-deeper)); color: #fff; font-family: var(--ff-head); font-weight: 800; font-size: 1.1rem;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.review-card__meta { display: flex; flex-direction: column; }

/* ---- Centered section heads: gradient underline accent ------------------ */
.section__head .section__title { position: relative; display: inline-block; }
.section__head .section__title::after { content: ""; display: block; width: 56px; height: 4px; margin: .8rem auto 0; border-radius: 4px; background: linear-gradient(90deg, var(--red), var(--red-deeper)); }
.section__head--light .section__title::after { background: linear-gradient(90deg, var(--gold), var(--gold-soft)); }

/* ---- Cards lift consistently ------------------------------------------- */
.market-card:hover, .job-card:hover, .post-related__card:hover { box-shadow: var(--shadow-lg); }

/* ---- Keep the polish calm for reduced-motion users ---------------------- */
@media (prefers-reduced-motion: reduce) {
	.hero .hero__bg::before { animation: none; }
	.btn--primary::after, .btn--light::after { display: none; }
}

/* ==========================================================================
   WCAG AAA — Target Size (Enhanced), SC 2.5.5: standalone interactive
   controls are ≥ 44×44 CSS px. Dense in-flow lists get full-height rows so
   the targets themselves meet 44px (no reliance on the spacing exception).
   Inline links inside running prose are exempt and intentionally untouched.
   ========================================================================== */
.btn { min-height: 44px; }
.areas__chips li a,
.error-404__links a { min-height: 44px; }
.popup__close { width: 44px; height: 44px; }

/* Desktop primary nav (mobile nav links are already 44px tall) */
@media (min-width: 981px) {
	.nav-menu > li > a,
	.nav-menu .nav-top { min-height: 44px; }
	.mega__links a { min-height: 42px; }
}

/* Footer + utility link lists: 44px rows, gaps folded into the row height */
.footer-links { gap: 0; }
.footer-links a,
.footer-contact a { display: inline-flex; align-items: center; min-height: 40px; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 36px; padding-inline: .25rem; }