/*
Theme Name: Future Electrical Solutions
Theme URI: https://futureelectricalsolutions.co.uk
Author: Future Electrical Solutions
Author URI: https://futureelectricalsolutions.co.uk
Description: Block theme for Future Electrical Solutions — NICEIC-registered electrical engineers, Sheffield. Ported 1:1 from the approved "Dusk Standby R3" mockups.
Version: 1.0.0
Requires at least: 6.4
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: future-electrical-solutions
*/

/* ============================================================
   ROOT TOKENS — mirrors design/design-tokens.json exactly.
   Dark mode is the default (no attribute needed); html[data-theme="light"]
   is the secondary mode, toggled by the header theme button.
   ============================================================ */
:root{
  --bg: #0E110F;
  --bg-grad-1: #12100D;
  --surface: #171B18;
  --surface-2: #1E2420;
  --border: #2A302B;
  --text: #F3EEE2;
  --text-muted: #B9B2A2;

  --forest: #1B7A3D;
  --forest-strong: #145C2E;
  --lime: #8BC34A;
  --lime-fill: #7CB342;
  --amber: #C9803D;
  --amber-soft: #8A5A2E;

  --accent-text: var(--lime);
  --on-forest: #F6F3E9;
  --on-lime: #10140F;

  --shadow: 0 1px 2px rgba(0,0,0,0.45), 0 18px 40px rgba(0,0,0,0.45);
  --radius: 4px;
  --radius-lg: 6px;

  --font-head: 'Inter', 'Segoe UI', sans-serif;
  --font-body: 'Manrope', 'Segoe UI', sans-serif;
  --content-size: 800px;
  --wide-size: 1280px;
  color-scheme: dark;
}

html[data-theme="light"]{
  --bg: #F7F5EF;
  --bg-grad-1: #F1ECDE;
  --surface: #FFFFFF;
  --surface-2: #F0EDE3;
  --border: #DDD6C4;
  --text: #171A15;
  --text-muted: #5B5F56;

  --accent-text: var(--forest);
  --on-forest: #FFFFFF;
  --on-lime: #10140F;

  --shadow: 0 1px 2px rgba(23,24,20,0.08), 0 14px 30px rgba(23,24,20,0.08);
  color-scheme: light;
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body,
.wp-site-blocks{
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 900px 480px at 12% -8%, color-mix(in srgb, var(--amber) 18%, transparent), transparent 60%),
    radial-gradient(ellipse 700px 500px at 108% 12%, color-mix(in srgb, var(--forest) 26%, transparent), transparent 65%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  transition: background-color 0.35s ease, color 0.35s ease;
}

a{ color: var(--accent-text); }
img{ max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6{ text-wrap: balance; }
p{ text-wrap: pretty; }

.wp-site-blocks > footer{ margin-block-start: 0; }
.wp-site-blocks > *{ margin-top: 0 !important; }

/* Reset figure margins inside custom photo containers so the wp:image figure
   wrapper never adds unwanted spacing around images used as backgrounds/fills. */
.story-photo figure, .editorial-photo figure, .hero-editorial figure,
.mini-media figure, .card-media figure, .photo-frame figure{ margin: 0; width: 100%; height: 100%; }

/* ROOT CAUSE FIX: these are custom grid/flex row containers styled entirely
   via className, but the wp:group blocks for them have no explicit "layout"
   attribute, so WordPress defaults them to "flow"/"constrained" and injects
   `margin-block-start: 1.5rem` (theme.json blockGap) onto every child after
   the first — see :root :where(.is-layout-flow) > * and
   :root :where(.is-layout-constrained) > * in global-styles-inline-css.
   That phantom top margin fights each container's own `gap`, pushing later
   items down within equal-height grid/flex rows (a 2nd form field sitting
   lower than its sibling, later grid cards rendering shorter than the
   first, etc.) None of these containers need WP's flow spacing — their own
   `gap` already governs spacing entirely. */
.header-inner > *, .brand > *, .nav-links > *, .header-actions > *,
.button-row > *, .story-grid > *, .editorial-row > *, .chip-row > *, .info-grid > *,
.process-steps > *, .process-strip > *, .callout-banner > *, .callout-row > *,
.split-two-grid > *, .services-grid-quiet > *, .cred-wall > *, .cred-wall-item > *,
.cred-strip > *, .cred-strip-item > *, .cred-detail-grid > *, .area-tags > *,
.faq-list > *, .contact-split > *, .contact-form > *, .form-row > *, .form-field > *,
.footer-grid > *, .footer-creds > *, .footer-bottom > *, .mini-media.icon > *,
.mini-body-actions > * {
  margin-block-start: 0 !important;
}

.wide-width{ max-width: var(--wide-size) !important; margin: 0 auto; padding: 0 2rem; }
.content-width{ max-width: var(--content-size) !important; margin: 0 auto; padding: 0 2rem; }

.legal-content h2{ font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; color: var(--text); margin: 2.5rem 0 1rem; }
.legal-content h2:first-child{ margin-top: 0; }
.legal-content h3{ font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--text); margin: 1.75rem 0 0.75rem; }
.legal-content p{ color: var(--text-muted); font-size: 0.98rem; line-height: 1.65; margin: 0 0 1rem; }
.legal-content ul{ margin: 0 0 1.25rem; padding-left: 1.25rem; }
.legal-content li{ color: var(--text-muted); font-size: 0.98rem; line-height: 1.6; margin-bottom: 0.4rem; }

.skip-link{ position: absolute; left: -9999px; top: 0; background: var(--forest); color: var(--on-forest); padding: 0.75rem 1.25rem; z-index: 100; border-radius: var(--radius); }
.skip-link:focus{ left: 1rem; top: 1rem; }

/* ============================================================
   SCROLL REVEAL — .reveal ported from mockups; .animate-on-scroll
   is the skill-standard alias, both supported.
   ============================================================ */
.reveal,
.animate-on-scroll{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible,
.animate-on-scroll.is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal, .animate-on-scroll{ opacity: 1 !important; transform: none !important; }
}

/* Editor: keep animated content visible while editing */
.editor-styles-wrapper .reveal,
.editor-styles-wrapper .animate-on-scroll,
.editor-styles-wrapper .stagger-children > *{
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* ============================================================
   HEADER — transparent until scroll
   ============================================================ */
/* WordPress's wp:template-part block (tagName:"header") wraps header.html's
   markup in an extra <header class="wp-block-template-part"> element whose
   auto height exactly hugs #siteHeader (its only child). A position:sticky
   element can only stay stuck within its containing block's height — with
   zero spare height here, #siteHeader had no room to stick and just scrolled
   away with the page immediately, even though position:sticky was correctly
   applied to it. display:contents removes this wrapper from layout (it stays
   in the DOM) so #siteHeader's containing block resolves to .wp-site-blocks
   (full page height) instead, restoring sticky. */
.wp-block-template-part:has(> .site-header){ display: contents; }
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 1.25rem 2rem;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease, padding 0.35s ease, backdrop-filter 0.35s ease;
}
.site-header.scrolled{
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 0.85rem 2rem;
}

/* position:relative here is load-bearing: it makes header-inner (the mobile
   nav panel's actual DOM parent) the panel's positioning anchor. Without it,
   the panel's "position:absolute; left:0; right:0" skips past this row and
   resolves against whatever ancestor happens to be positioned further up
   (.site-header, which is sticky and conditionally gains backdrop-filter on
   scroll) — an unstable anchor that let the panel render outside the
   visible header row instead of flush under it. */
.header-inner{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; max-width: var(--wide-size) !important; margin: 0 auto; position: relative; }

/* Logo art already reads "Future Electrical Solutions" — the brand block is
   just the logo with its NICEIC credential line stacked underneath, not
   beside it, so the logo can run larger without widening the header row. */
.brand{ display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-decoration: none; }
.logo-plate{ background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.55rem 0.8rem; display: flex; align-items: center; box-shadow: var(--shadow); }
.logo-plate img{ height: 40px; width: auto; display: block; }
.brand-tag{ font-family: var(--font-body); font-weight: 600; font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-muted); text-align: center; }

.nav-links{ display: flex; align-items: center; gap: 1.75rem; list-style: none; margin: 0; padding: 0; font-size: 0.86rem; font-weight: 600; }
.nav-links > li{ position: relative; }
.nav-links li > a{ color: var(--text); text-decoration: none; padding-bottom: 4px; border-bottom: 1.5px solid transparent; transition: border-color 0.2s ease, color 0.35s ease; display: inline-block; }
.nav-links li > a:hover, .nav-links li > a:focus-visible{ border-color: var(--lime); color: var(--lime); }

.nav-dropdown{ list-style: none; margin: 0; padding: 0.6rem; position: absolute; top: calc(100% + 0.9rem); left: 50%; transform: translateX(-50%) translateY(4px); min-width: 260px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; z-index: 30; }
/* Desktop-only hover/focus reveal. Scoped to min-width:641px because this
   selector's specificity (0,2,0) beats the plain ".nav-dropdown" mobile
   reset below (0,1,0) regardless of source order — without this guard,
   focusing the mobile chevron button (which happens on every tap, since
   it's a real <button>) matches ":focus-within" here and re-applies the
   desktop centering transform/opacity/visibility on top of the mobile
   tap-to-expand panel, which was the actual cause of the submenu rendering
   with no background, shifted off to the left over the hero image. */
@media (min-width: 641px){
  .nav-item-services:hover .nav-dropdown, .nav-item-services:focus-within .nav-dropdown{ opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
}
.nav-dropdown li a{ display: block; padding: 0.55rem 0.75rem; border-radius: 3px; color: var(--text); text-decoration: none; font-size: 0.84rem; font-weight: 600; border-bottom: none !important; transition: background 0.15s ease, color 0.15s ease; }
.nav-dropdown li a:hover, .nav-dropdown li a:focus-visible{ background: color-mix(in srgb, var(--lime) 12%, transparent); color: var(--lime); }
.nav-dropdown li:first-child a{ color: var(--accent-text); font-weight: 700; }
.nav-dropdown li:first-child a::after{ content: " — 24/7"; font-weight: 600; opacity: 0.75; font-size: 0.78em; }

/* Current-page indicator: separate from the permanent Emergency Response
   "24/7" accent above, which stays on regardless of page. A body.page-slug-*
   class (set in functions.php, since header/footer are static template
   parts with no per-request PHP of their own) marks the active page; the
   nth-child position maps to the locked 8-service order used identically
   in both this dropdown and the footer Services list. */
.nav-dropdown li a::before, .footer-grid > .footer-col:nth-child(2) ul li a::before{ content: ""; display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); margin-right: 0.5em; vertical-align: middle; }
body.page-slug-emergency-response .nav-dropdown li:nth-child(1) a::before,
body.page-slug-emergency-response .footer-grid > .footer-col:nth-child(2) ul li:nth-child(1) a::before,
body.page-slug-domestic-electrical .nav-dropdown li:nth-child(2) a::before,
body.page-slug-domestic-electrical .footer-grid > .footer-col:nth-child(2) ul li:nth-child(2) a::before,
body.page-slug-commercial-electrical .nav-dropdown li:nth-child(3) a::before,
body.page-slug-commercial-electrical .footer-grid > .footer-col:nth-child(2) ul li:nth-child(3) a::before,
body.page-slug-solar-pv-battery-storage .nav-dropdown li:nth-child(4) a::before,
body.page-slug-solar-pv-battery-storage .footer-grid > .footer-col:nth-child(2) ul li:nth-child(4) a::before,
body.page-slug-ev-charging .nav-dropdown li:nth-child(5) a::before,
body.page-slug-ev-charging .footer-grid > .footer-col:nth-child(2) ul li:nth-child(5) a::before,
body.page-slug-fire .nav-dropdown li:nth-child(6) a::before,
body.page-slug-fire .footer-grid > .footer-col:nth-child(2) ul li:nth-child(6) a::before,
body.page-slug-security .nav-dropdown li:nth-child(7) a::before,
body.page-slug-security .footer-grid > .footer-col:nth-child(2) ul li:nth-child(7) a::before,
body.page-slug-case-studies .nav-dropdown li:nth-child(8) a::before,
body.page-slug-case-studies .footer-grid > .footer-col:nth-child(2) ul li:nth-child(8) a::before
{ display: inline-block; }

/* Mobile-only chevron button that expands the Services submenu inline
   (tap-to-expand) since the desktop :hover/:focus-within trigger above
   doesn't work reliably on touch. Hidden on desktop; shown in the
   max-width:640px block below. The "Services" link itself keeps working
   as a normal link either way. */
.nav-dropdown-toggle{ display: none; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.nav-dropdown-toggle .chevron{ display: block; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(45deg); transition: transform 0.25s ease, margin 0.25s ease; }
.nav-item-services.dropdown-open .nav-dropdown-toggle .chevron{ margin-top: 3px; transform: rotate(-135deg); }

/* Hamburger toggle — mobile only (see max-width:640px block below for the
   panel it opens). ROOT CAUSE this fixes: .nav-links was unconditionally
   display:none under 640px with no other way to reach it, so mobile
   visitors could not navigate to any page but the homepage. */
.nav-toggle{ display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; flex-shrink: 0; }
.nav-toggle-bar{ display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; }
body.nav-open .nav-toggle-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle-bar:nth-child(2){ opacity: 0; }
body.nav-open .nav-toggle-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.header-actions{ display: flex; align-items: center; gap: 0.75rem; }
.header-actions .wp-block-buttons{ display: flex; align-items: center; gap: 0.75rem; flex-wrap: nowrap; }
.header-actions .wp-block-button{ margin: 0; }
/* className lives on the wp:button wrapper div (see BUTTONS comment above);
   selectors reach the visible link via the ">" combinator. */
.theme-toggle > .wp-block-button__link{ font-family: var(--font-body); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.75rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; transition: border-color 0.25s ease, transform 0.25s ease, background 0.35s ease, color 0.35s ease; text-decoration: none; }
.theme-toggle > .wp-block-button__link::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--lime) 70%, transparent); display: inline-block; }
.theme-toggle > .wp-block-button__link:hover{ border-color: var(--lime); transform: translateY(-1px); color: var(--text); }

.nav-cta > .wp-block-button__link{ font-family: var(--font-body); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; background: var(--forest); color: var(--on-forest); padding: 0.6rem 1rem; border: none; border-radius: var(--radius); display: inline-flex; transition: transform 0.2s ease, box-shadow 0.25s ease; }
.nav-cta > .wp-block-button__link:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, var(--forest) 55%, transparent); color: var(--on-forest); }
.nav-cta-desktop{ display: none; }
@media (min-width: 641px){ .nav-cta-mobile{ display: none; } .nav-cta-desktop{ display: inline; } }

/* ============================================================
   BUTTONS
   ============================================================
   WordPress's core/button block only tracks url/title/text/linkTarget/rel
   as real attributes — any class or id hand-written directly on the inner
   <a> gets discarded when the block is re-serialized (e.g. by the block
   validator/fixer). className MUST be declared in the block's JSON
   attributes so WordPress applies it to the wrapping "wp-block-button"
   div; every selector below therefore targets that div and reaches the
   visible link via the ">" combinator. */
.wp-block-button.btn > .wp-block-button__link,
.theme-toggle > .wp-block-button__link,
.nav-cta > .wp-block-button__link{ font-family: var(--font-body); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.01em; padding: 0.95rem 1.7rem; border-radius: var(--radius); border: 1.5px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.2s ease, border-color 0.2s ease; }
.wp-block-button.btn-primary > .wp-block-button__link{ background: linear-gradient(155deg, var(--forest) 0%, var(--forest-strong) 100%); color: var(--on-forest); animation: pulseGlow 3.2s ease-in-out infinite; }
.wp-block-button.btn-primary > .wp-block-button__link:hover{ transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--lime) 30%, transparent), 0 12px 30px color-mix(in srgb, var(--forest) 55%, transparent); animation-play-state: paused; color: var(--on-forest); }
.wp-block-button.btn-primary > .wp-block-button__link:disabled{ opacity: 0.85; cursor: default; }
.wp-block-button.btn-lg > .wp-block-button__link{ padding: 1.2rem 2.2rem; font-size: 1.05rem; }
.wp-block-button.btn-block{ width: 100%; }
.wp-block-button.btn-block > .wp-block-button__link{ width: 100%; justify-content: center; }
@keyframes pulseGlow{ 0%, 100%{ box-shadow: 0 0 0 rgba(27,122,61,0), 0 4px 14px rgba(0,0,0,0.35); } 50%{ box-shadow: 0 0 22px 2px color-mix(in srgb, var(--forest) 55%, transparent), 0 4px 14px rgba(0,0,0,0.35); } }
.wp-block-button.btn-secondary > .wp-block-button__link{ background: transparent; border-color: var(--lime); color: var(--text); }
.wp-block-button.btn-secondary.on-photo > .wp-block-button__link{ color: #FFFFFF; }
.wp-block-button.btn-secondary > .wp-block-button__link:hover{ background: color-mix(in srgb, var(--lime) 12%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--lime) 35%, transparent); transform: translateY(-2px); color: var(--text); }
.wp-block-button.btn-ghost > .wp-block-button__link{ background: transparent; color: var(--text-muted); border-color: transparent; padding-left: 0; padding-right: 0; border-bottom: 1.5px solid var(--border); border-radius: 0; }
.wp-block-button.btn-ghost.on-photo > .wp-block-button__link{ color: rgba(255,255,255,0.85); border-bottom-color: rgba(255,255,255,0.4); }
.wp-block-button.btn-ghost > .wp-block-button__link:hover{ border-bottom-color: var(--lime); color: var(--lime); }
.button-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; }
.button-row .wp-block-button{ margin: 0; }

/* Editor visibility for buttons using animation */
.editor-styles-wrapper .wp-block-button.btn-primary > .wp-block-button__link{ animation: none !important; }

/* ============================================================
   HERO — full bleed editorial
   ============================================================ */
.hero-editorial{
  position: relative;
  min-height: 94vh;
  display: flex;
  align-items: flex-start;
  padding: clamp(7rem, 15vw, 10.5rem) 2rem 5rem;
  overflow: hidden;
}
.hero-editorial .hero-bg{ position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; z-index: 0; }
.hero-editorial .hero-bg figure,
.hero-editorial .hero-bg .wp-block-image{ width: 100%; height: 100%; margin: 0; }
.hero-editorial .hero-bg img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: saturate(0.92) contrast(1.04); display: block; }

/* Per-photo object-position. The generic 50% 35% default above centres the
   crop horizontally, which cuts off each photo's actual subject (almost
   always an off-centre technician) once object-fit:cover has to crop hard —
   most visibly on the mobile hero's 58vh photo band. Values below are set
   per page by eye, matching where that specific photo's subject actually
   sits in frame (uses the page-slug-{slug} body class from functions.php). */
.page-slug-homepage .hero-editorial .hero-bg img{ object-position: 75% 60%; }
.page-slug-emergency-response .hero-editorial .hero-bg img{ object-position: 78% 42%; }
.page-slug-domestic-electrical .hero-editorial .hero-bg img{ object-position: 72% 30%; }
.page-slug-commercial-electrical .hero-editorial .hero-bg img{ object-position: 28% 35%; }
.page-slug-solar-pv-battery-storage .hero-editorial .hero-bg img{ object-position: 60% 55%; }
.page-slug-ev-charging .hero-editorial .hero-bg img{ object-position: 70% 35%; }
.page-slug-fire .hero-editorial .hero-bg img{ object-position: 65% 40%; }
.page-slug-security .hero-editorial .hero-bg img{ object-position: 62% 35%; }
.page-slug-about .hero-editorial .hero-bg img{ object-position: 75% 60%; }
.hero-editorial .hero-bg::after,
.hero-editorial.has-photo::before{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(14,17,15,0.55) 0%, rgba(14,17,15,0.15) 22%, rgba(14,17,15,0.35) 60%, rgba(14,17,15,0.85) 100%),
    linear-gradient(20deg, color-mix(in srgb, var(--amber-soft) 50%, transparent) 0%, transparent 55%),
    linear-gradient(200deg, color-mix(in srgb, var(--forest) 45%, transparent) 0%, transparent 62%);
}
/* Stronger overlay for heroes where the underlying photo runs light behind
   the text (bright sky, lit ceiling, daylight through glass) — checked by
   eye per page rather than applied everywhere, since most heroes are dark
   enough already and a heavier veil would just mute the photography. */
.page-slug-solar-pv-battery-storage .hero-editorial .hero-bg::after,
.page-slug-commercial-electrical .hero-editorial .hero-bg::after,
.page-slug-security .hero-editorial .hero-bg::after{
  background:
    linear-gradient(180deg, rgba(14,17,15,0.68) 0%, rgba(14,17,15,0.42) 22%, rgba(14,17,15,0.55) 60%, rgba(14,17,15,0.88) 100%),
    linear-gradient(20deg, color-mix(in srgb, var(--amber-soft) 50%, transparent) 0%, transparent 55%),
    linear-gradient(200deg, color-mix(in srgb, var(--forest) 45%, transparent) 0%, transparent 62%);
}
.hero-editorial-inner{ position: relative; z-index: 2; max-width: var(--wide-size) !important; margin: 0 auto; width: 100%; }
/* Guard against WordPress's core constrained-layout rule
   (:root .is-layout-constrained > :where(...)) forcing margin-left/right:
   auto !important on content-col whenever it isn't the first child of
   hero-editorial-inner — that silently centers the hero text block instead
   of leaving it flush left. .content-right opts a specific page's hero
   back into a right-hand position instead. */
.hero-editorial-inner .content-col{ max-width: 640px; margin-left: 0 !important; margin-right: 0 !important; text-align: left; }
.hero-editorial-inner .content-col.content-right{ margin-left: auto !important; margin-right: 0 !important; }

/* Wraps just the eyebrow + h1. Transparent at desktop (display:contents
   removes it from the box model entirely, so eyebrow/h1 lay out exactly as
   if they were still direct children of .content-col) — only becomes a real
   positioned box at the mobile breakpoint below, where it overlays just the
   photo band while the rest of the hero content flows beneath it. */
.hero-mobile-heading{ display: contents; }

.eyebrow{ font-family: var(--font-body); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lime); display: block; margin-bottom: 1.25rem; }

.hero-editorial h1{
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.8rem, 6.4vw, 4.6rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  margin: 0 0 1.4rem;
  color: #FFFFFF;
  max-width: 15ch;
}
.hero-editorial h1 em{ font-style: normal; background: linear-gradient(95deg, var(--lime), var(--forest) 75%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.hero-editorial-sub{ font-size: 1.2rem; color: rgba(255,255,255,0.82); max-width: 48ch; margin: 0 0 2.5rem; }
.hero-editorial .button-row{ margin-bottom: 3rem; }
.hero-editorial .cover-meta{ display: flex; flex-wrap: wrap; gap: 0 2.25rem; font-weight: 600; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.7); border-top: 1px solid rgba(255,255,255,0.25); padding-top: 1.25rem; }
.hero-editorial .cover-meta strong{ color: #FFFFFF; font-weight: 700; }

/* Interior hero size modifiers (per-page, see design-package.json wpNotes) */
.hero-editorial.hero-interior{ min-height: 62vh; padding: clamp(7rem, 13vw, 9.5rem) 2rem 4rem; }
.hero-editorial.hero-interior h1{ font-size: clamp(2.4rem, 5.4vw, 3.8rem); line-height: 1.05; }
.hero-editorial.hero-interior .hero-editorial-sub{ font-size: 1.15rem; margin-bottom: 2.25rem; }
.hero-editorial.hero-interior .button-row{ margin-bottom: 2.75rem; }
.hero-editorial.hero-interior-76{ min-height: 76vh; padding: clamp(7rem, 15vw, 10.5rem) 2rem 5rem; }
.hero-editorial.hero-interior-76 h1{ font-size: clamp(2.8rem, 6.4vw, 4.6rem); }
.hero-editorial.hero-interior-72{ min-height: 72vh; }
.hero-editorial.hero-interior-58{ min-height: 58vh; }
.hero-editorial.hero-interior-58 h1{ max-width: 19ch; }

/* No-photo interior hero variant — gradient wash only, no dark overlay needed */
.hero-editorial.no-photo{
  background: radial-gradient(ellipse 900px 480px at 88% -10%, color-mix(in srgb, var(--amber) 22%, transparent), transparent 62%), linear-gradient(155deg, var(--surface) 0%, var(--bg-grad-1) 100%);
}
.hero-editorial.no-photo h1{ color: var(--text); max-width: 20ch; }
.hero-editorial.no-photo .hero-editorial-sub{ color: var(--text-muted); }
.hero-editorial.no-photo .cover-meta{ color: var(--text-muted); border-top-color: var(--border); }
.hero-editorial.no-photo .cover-meta strong{ color: var(--text); }
.hero-editorial.hero-interior-50.no-photo{ min-height: 50vh; }
.hero-editorial.hero-interior-46.no-photo{ min-height: 46vh; }

/* ============================================================
   SECTION SCAFFOLDING
   ============================================================ */
.section-label{ font-family: var(--font-body); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.17em; text-transform: uppercase; color: var(--accent-text); display: block; margin-bottom: 0.6rem; }
.section-head h2{ font-family: var(--font-head); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.5rem); letter-spacing: -0.012em; margin: 0; }
.section-head.center{ text-align: center; max-width: 600px; margin: 0 auto 2.5rem; }
.section-head.center .section-label{ text-align: center; }
.tile-section{ padding: 5.5rem 0; }
.tile-section.tight{ padding: 3.5rem 0; }
.tile-section.bordered{ border-top: 1px solid var(--border); }

/* ============================================================
   STORY GRID — asymmetric photo + copy
   ============================================================ */
.story-grid{ display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3.5rem; align-items: center; }
.story-grid.reverse{ grid-template-columns: 1.15fr 0.85fr; }
.story-grid.reverse .story-photo{ order: 2; }
.story-grid.reverse .story-copy{ order: 1; padding-left: 0; padding-right: 1rem; }
.story-photo{ position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); transform: translateY(1.5rem); }
.story-photo img{ width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; filter: saturate(0.92) contrast(1.04); display: block; }
.story-photo::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,17,15,0.05) 0%, rgba(14,17,15,0.6) 100%), linear-gradient(20deg, color-mix(in srgb, var(--amber-soft) 45%, transparent) 0%, transparent 55%); }
.story-copy{ position: relative; padding-left: 1rem; }
.story-copy h2{ font-family: var(--font-head); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.5rem); letter-spacing: -0.012em; margin: 0 0 1.25rem; max-width: 18ch; }
.story-copy h3{ font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; margin: 1.75rem 0 0.6rem; }
.story-copy p{ font-size: 1.05rem; color: var(--text-muted); max-width: 52ch; margin: 0 0 1.25rem; }
.story-copy p strong{ color: var(--text); font-weight: 700; }
.story-list{ list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.5rem; }
.story-list li{ display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.story-list li::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); margin-top: 0.5em; flex-shrink: 0; }
.story-list li strong{ color: var(--text); font-weight: 700; }
/* .stacked modifier (domestic-electrical EICR/PAT list) */
.story-list.stacked{ display: flex; flex-direction: column; gap: 0.6rem; }
.story-list.stacked li{ font-size: 0.92rem; font-weight: 400; color: var(--text-muted); }

/* ============================================================
   EDITORIAL ROW — alternating photo/copy
   ============================================================ */
.editorial-row{ display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; align-items: center; padding: 3.25rem 0; border-top: 1px solid var(--border); }
.editorial-row:first-of-type{ border-top: none; }
.tile-section > .wide-width > .editorial-row:first-child{ border-top: none; padding-top: 0; }
.editorial-row.reverse{ grid-template-columns: 0.9fr 1.1fr; }
.editorial-row.reverse .editorial-photo, .editorial-row.reverse .case-photo-fallback{ order: 2; }
.editorial-row.reverse .editorial-copy{ order: 1; }
.editorial-photo{ position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); }
.editorial-photo img{ width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; filter: saturate(0.92) contrast(1.04); display: block; }
.editorial-photo::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,17,15,0.05) 0%, rgba(14,17,15,0.72) 100%), linear-gradient(20deg, color-mix(in srgb, var(--amber-soft) 55%, transparent) 0%, transparent 55%), linear-gradient(200deg, color-mix(in srgb, var(--forest) 40%, transparent) 0%, transparent 60%); }
.editorial-photo-caption{ position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 1.75rem; z-index: 2; }
.editorial-photo-caption .overline{ font-family: var(--font-body); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); display: block; margin: 0 0 0.35rem; }
.editorial-photo-caption h4{ font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: #FFFFFF; margin: 0; }
.editorial-copy .card-num{ font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--text-muted); display: block; margin-bottom: 0.75rem; }
.editorial-copy h3{ font-family: var(--font-head); font-weight: 700; font-size: 1.85rem; margin: 0 0 0.9rem; letter-spacing: -0.01em; }
.editorial-copy p{ color: var(--text-muted); font-size: 1.02rem; margin: 0 0 1.1rem; max-width: 46ch; }
.editorial-copy .chip-row{ display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; margin-bottom: 0; }

/* Case Studies has no photo asset — CSS gradient wash fallback */
.case-photo-fallback{ position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); aspect-ratio: 16 / 9; background: radial-gradient(ellipse 420px 260px at 80% 10%, color-mix(in srgb, var(--amber) 30%, transparent), transparent 65%), linear-gradient(155deg, var(--surface) 0%, var(--bg-grad-1) 100%); display: flex; align-items: center; justify-content: center; }
.case-tag{ display: inline-block; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-lime); background: var(--lime-fill); padding: 0.35rem 0.75rem; border-radius: 3px; margin-bottom: 1rem; }

.view-all-wrap{ text-align: center; padding-top: 3rem; }

/* Shared chip + inline-link + callout-note */
.chip-row{ display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
.chip{ font-weight: 600; font-size: 0.7rem; letter-spacing: 0.03em; color: var(--text-muted); border: 1px solid var(--border); padding: 0.35rem 0.65rem; border-radius: 3px; }
.inline-link{ color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; font-weight: 600; transition: text-underline-offset 0.2s ease, color 0.2s ease; }
.inline-link:hover{ text-underline-offset: 5px; }
.callout-note{ font-size: 0.95rem; color: var(--text-muted); max-width: 68ch; margin: 1.75rem 0 0; }
.body-link-demo a{ color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* card-link (arrow link) */
.card-link{ font-weight: 700; font-size: 0.94rem; color: var(--accent-text); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.card-link .arrow, .inline-link .arrow{ transition: transform 0.2s ease; display: inline-block; }
.card-link:hover .arrow, .inline-link:hover .arrow{ transform: translateX(4px); }

/* ============================================================
   INFO GRID (What we cover / service breadth / coverage cards)
   ============================================================ */
.info-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.info-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px){ .info-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px){ .info-grid.cols-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .info-grid, .info-grid.cols-3{ grid-template-columns: 1fr; } }
.info-item{ padding: 1.75rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease; }
.info-item:hover{ transform: translateY(-3px); border-color: color-mix(in srgb, var(--lime) 40%, var(--border)); box-shadow: var(--shadow); }
.info-item .info-num{ font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--accent-text); display: block; margin-bottom: 0.85rem; }
.info-item h4{ font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; margin: 0 0 0.5rem; }
.info-item p{ font-size: 0.86rem; color: var(--text-muted); margin: 0; }

/* Contact page info-card (different naming, same recipe + accent heading) */
.info-card{ padding: 1.75rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease; }
.info-card:hover{ transform: translateY(-3px); border-color: color-mix(in srgb, var(--lime) 40%, var(--border)); box-shadow: var(--shadow); }
.info-card h4{ font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; margin: 0 0 0.6rem; color: var(--accent-text); }
.info-card p{ font-size: 0.9rem; color: var(--text-muted); margin: 0; }
.info-card p + p{ margin-top: 0.5rem; }

/* ============================================================
   PROCESS — two variants (steps: plain / strip: gradient nums)
   ============================================================ */
.process-steps, .process-strip{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 1080px){ .process-steps, .process-strip{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px){ .process-strip{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .process-steps, .process-strip{ grid-template-columns: 1fr; } }

.process-step{ position: relative; padding: 2.25rem 1.5rem 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.process-steps .process-step .step-num{ font-family: var(--font-head); font-weight: 800; font-size: 2.1rem; color: color-mix(in srgb, var(--lime) 40%, transparent); display: block; margin-bottom: 0.75rem; }
.process-steps .process-step h4{ font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; margin: 0 0 0.5rem; }
.process-steps .process-step p{ font-size: 0.87rem; color: var(--text-muted); margin: 0; }

.process-strip .process-step{ padding: 1.85rem 1.6rem; background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%); box-shadow: var(--shadow); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease; }
.process-strip .process-step:hover{ transform: translateY(-3px); border-color: color-mix(in srgb, var(--lime) 40%, var(--border)); }
.process-strip .process-step .step-num{ font-family: var(--font-head); font-weight: 800; font-size: 1.9rem; background: linear-gradient(95deg, var(--lime), var(--forest) 75%); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; margin-bottom: 0.65rem; }
.process-strip .process-step h4{ font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; margin: 0 0 0.5rem; letter-spacing: -0.005em; }
.process-strip .process-step p{ font-size: 0.86rem; color: var(--text-muted); margin: 0; }

/* ============================================================
   CALLOUT BANNER (pricing / warranty figures)
   ============================================================ */
.callout-banner{ display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; padding: 2.5rem 2.75rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%); box-shadow: var(--shadow); }
.callout-figure{ font-family: var(--font-head); font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.4rem); color: var(--accent-text); flex-shrink: 0; }
.callout-copy h4{ font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; margin: 0 0 0.4rem; }
.callout-copy p{ font-size: 0.9rem; color: var(--text-muted); margin: 0; max-width: 58ch; }
.callout-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 780px){ .callout-row{ grid-template-columns: 1fr; } }

/* ============================================================
   SPLIT TWO-COLUMN CARDS (EICR/PAT, domestic/commercial EV)
   ============================================================ */
.split-two-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
@media (max-width: 780px){ .split-two-grid{ grid-template-columns: 1fr; } }
.split-card{ padding: 2rem 1.85rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%); box-shadow: var(--shadow); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease; }
.split-card:hover{ transform: translateY(-3px); border-color: color-mix(in srgb, var(--lime) 40%, var(--border)); }
.split-card .section-label{ margin-bottom: 0.75rem; }
.split-card h3{ font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; margin: 0 0 0.85rem; letter-spacing: -0.01em; }
.split-card p{ font-size: 0.96rem; color: var(--text-muted); margin: 0; }

/* ============================================================
   SERVICES GRID QUIET (full 8-service grid)
   ============================================================ */
.services-grid-quiet{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 1080px){ .services-grid-quiet{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .services-grid-quiet{ grid-template-columns: 1fr; } }

.service-mini{ padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease; }
.service-mini:hover{ transform: translateY(-3px); border-color: color-mix(in srgb, var(--lime) 40%, var(--border)); box-shadow: var(--shadow); }
.mini-media{ position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.mini-media.photo img{ width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) contrast(1.04); transition: transform 0.4s ease; display: block; }
.service-mini:hover .mini-media.photo img{ transform: scale(1.05); }
.mini-media.photo::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,17,15,0) 40%, rgba(14,17,15,0.55) 100%), linear-gradient(20deg, color-mix(in srgb, var(--amber-soft) 40%, transparent) 0%, transparent 55%); }
.mini-media.icon{ display: flex; align-items: center; justify-content: center; }
.mini-media.icon.tone-emergency{ background: linear-gradient(155deg, var(--forest) 0%, var(--amber-soft) 130%); }
.mini-media.icon.tone-ev{ background: linear-gradient(155deg, var(--lime-fill) 0%, var(--forest-strong) 130%); }
.mini-media.icon.tone-fire{ background: linear-gradient(155deg, var(--amber) 0%, var(--amber-soft) 125%); }
.mini-media.icon.tone-security{ background: linear-gradient(155deg, var(--forest-strong) 0%, var(--bg-grad-1) 135%); }
.mini-media.icon.tone-cases{ background: linear-gradient(155deg, var(--surface-2) 0%, var(--bg-grad-1) 135%); }
.mini-icon{ width: 42px; height: 42px; }
.mini-icon path, .mini-icon circle, .mini-icon line{ stroke: var(--on-forest); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mini-icon.mini-leaf{ width: 52px; height: 52px; }
.mini-icon.mini-leaf path, .mini-icon.mini-leaf line{ stroke: var(--lime); stroke-width: 1.6; }
.mini-icon.mini-leaf circle{ fill: var(--lime); stroke: none; }
.mini-body{ padding: 1.3rem 1.5rem 1.6rem; }
.service-mini .mini-num{ font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; color: var(--text-muted); }
.service-mini.first .mini-num{ color: var(--accent-text); }
.service-mini h4{ font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; margin: 0.5rem 0 0.5rem; }
.service-mini h4 a{ color: var(--text); text-decoration: none; }
.service-mini h4 a:hover{ color: var(--accent-text); }
.service-mini p{ font-size: 0.84rem; color: var(--text-muted); margin: 0 0 0.85rem; }
.service-mini > .mini-body > a{ font-size: 0.82rem; font-weight: 700; text-decoration: none; color: var(--accent-text); }
.mini-body-actions{ display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.mini-body-actions p{ margin: 0; }
.mini-body-actions .card-link{ font-size: 0.82rem; }

/* .plain modifier — flat service-mini with no media block (security page) */
.service-mini.plain{ padding: 1.6rem 1.5rem; }
.service-mini.plain .mini-num{ color: var(--accent-text); }
.service-mini.plain h4{ margin: 0.5rem 0 0.5rem; }
.service-mini.plain p{ margin: 0; }

/* ============================================================
   CREDENTIALS — wall / strip / detail grid
   ============================================================ */
.cred-wall{ display: flex; flex-wrap: wrap; justify-content: center; gap: 2.75rem 3.5rem; padding: 1rem 0; }
.cred-wall-item{ display: flex; flex-direction: column; align-items: center; gap: 0.85rem; text-align: center; }
.cred-wall-item img{ height: 40px; width: auto; opacity: 0.9; filter: grayscale(0.1); transition: opacity 0.25s ease, transform 0.25s ease; }
.cred-wall-item:hover img{ opacity: 1; transform: translateY(-2px); }
.cred-wall-item span{ font-size: 0.78rem; font-weight: 600; color: var(--text-muted); max-width: 14ch; }
.cred-wall-item.emphasis img{ height: 48px; }
.cred-wall-item.emphasis span{ color: var(--accent-text); font-weight: 700; }

.cred-strip{ display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem 3.25rem; padding: 1rem 0; }
.cred-strip-item{ display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; }
.cred-strip-item img{ height: 36px; width: auto; opacity: 0.9; filter: grayscale(0.1); transition: opacity 0.25s ease, transform 0.25s ease; }
.cred-strip-item:hover img{ opacity: 1; transform: translateY(-2px); }
.cred-strip-item span{ font-size: 0.76rem; font-weight: 600; color: var(--text-muted); max-width: 14ch; }

.cred-detail-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (max-width: 900px){ .cred-detail-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .cred-detail-grid{ grid-template-columns: 1fr; } }
.cred-detail-item{ padding: 1.75rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); text-align: center; transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.25s ease; }
.cred-detail-item:hover{ transform: translateY(-3px); border-color: color-mix(in srgb, var(--lime) 40%, var(--border)); box-shadow: var(--shadow); }
.cred-detail-item img{ height: 38px; width: auto; margin: 0 auto 1rem; opacity: 0.92; display: block; }
.cred-detail-item h4{ font-family: var(--font-head); font-weight: 700; font-size: 0.98rem; margin: 0 0 0.5rem; }
.cred-detail-item p{ font-size: 0.83rem; color: var(--text-muted); margin: 0; }

.pull-quote{ max-width: 780px; margin: 4rem auto 0; text-align: center; position: relative; padding: 0 1rem; }
.pull-quote blockquote{ margin: 0 0 1.5rem; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.4; color: var(--text); }
.pull-quote cite{ font-style: normal; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }

/* ============================================================
   AREA TAGS (About — coverage suburbs)
   ============================================================ */
.area-intro{ max-width: 62ch; color: var(--text-muted); font-size: 1.05rem; }
.area-tags{ display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.area-tag{ font-weight: 600; font-size: 0.85rem; color: var(--text); border: 1px solid var(--border); background: var(--surface); padding: 0.55rem 1.05rem; border-radius: 999px; transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; display: inline-block; }
.area-tag:hover{ border-color: var(--lime); color: var(--lime); transform: translateY(-2px); }

/* ============================================================
   FAQ (emergency-response)
   ============================================================ */
.faq-list{ display: flex; flex-direction: column; gap: 1rem; max-width: 780px; }
.faq-item{ border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 1.5rem 1.75rem; transition: border-color 0.25s ease; }
.faq-item:hover{ border-color: color-mix(in srgb, var(--lime) 35%, var(--border)); }
.faq-item h4{ font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; margin: 0 0 0.6rem; display: flex; align-items: center; gap: 0.7rem; }
.faq-item h4::before{ content: "Q"; font-size: 0.7rem; font-weight: 800; color: var(--on-lime); background: var(--lime-fill); width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.faq-item p{ font-size: 0.92rem; color: var(--text-muted); margin: 0; padding-left: 2.2rem; }

/* ============================================================
   CONTACT SPLIT
   ============================================================ */
.contact-split{ display: grid; grid-template-columns: 1fr 1.15fr; gap: 2.5rem; align-items: stretch; }
@media (max-width: 900px){ .contact-split{ grid-template-columns: 1fr; } }

.emergency-panel{ padding: 3rem 2.5rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: radial-gradient(ellipse 500px 300px at 90% 0%, color-mix(in srgb, var(--amber) 25%, transparent), transparent 65%), linear-gradient(155deg, var(--surface) 0%, var(--bg-grad-1) 100%); box-shadow: var(--shadow); height: 100%; }
.emergency-panel h3{ font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; margin: 0; }
.emergency-panel p{ color: var(--text-muted); font-size: 0.98rem; margin: 0.85rem 0 0; max-width: 40ch; }
.emergency-panel .big-tel{ font-family: var(--font-head); font-weight: 800; font-size: clamp(2rem, 4.5vw, 2.7rem); color: var(--text); text-decoration: none; display: inline-block; margin: 1.5rem 0; letter-spacing: -0.01em; }
.emergency-panel .big-tel:hover{ color: var(--lime); }
.emergency-panel .chip-row{ margin-top: 1.75rem; margin-bottom: 0; }

.contact-form-panel{ padding: 3rem 2.5rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
.contact-form-panel h3{ font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; margin: 0 0 0.5rem; }
.contact-form-panel > p{ color: var(--text-muted); font-size: 0.95rem; margin: 0 0 2rem; }

.contact-form{ display: flex; flex-direction: column; gap: 1.25rem; }
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 560px){ .form-row{ grid-template-columns: 1fr; } }
.form-field{ display: flex; flex-direction: column; gap: 0.5rem; }
.form-field label{ font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; color: var(--text); }
.form-field input, .form-field select, .form-field textarea{ font-family: var(--font-body); font-size: 0.95rem; color: var(--text); background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; width: 100%; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 20%, transparent); }
.form-field textarea{ resize: vertical; min-height: 120px; font-family: var(--font-body); }
.form-field select{ appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 15px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
.form-note{ font-size: 0.78rem; color: var(--text-muted); margin: 0; }
.fes-form-notice{ font-size: 0.9rem; font-weight: 600; padding: 0.9rem 1.1rem; border-radius: var(--radius); margin: 0 0 1.5rem; }
.fes-form-notice-success{ color: var(--forest-strong); background: color-mix(in srgb, var(--lime) 16%, transparent); border: 1px solid color-mix(in srgb, var(--lime) 45%, transparent); }
.fes-form-notice-error{ color: #B3261E; background: color-mix(in srgb, #B3261E 10%, transparent); border: 1px solid color-mix(in srgb, #B3261E 35%, transparent); }
.fes-form-notice-error a{ color: inherit; text-decoration: underline; }

/* ============================================================
   CTA BAND — plain (default) + boxed modifier
   ============================================================ */
.cta-band{ padding: 5rem 0; text-align: center; position: relative; overflow: hidden; }
.cta-band-inner{ max-width: 620px !important; margin: 0 auto; position: relative; z-index: 2; }
.cta-band h2{ font-family: var(--font-head); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin: 0 0 1rem; }
.cta-band p{ color: var(--text-muted); margin: 0 0 2rem; font-size: 1.02rem; }
.cta-band .button-row{ display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; margin-bottom: 0; }

.cta-band.boxed{ padding: 4rem 2.5rem; border-radius: var(--radius-lg); overflow: hidden; background: radial-gradient(ellipse 620px 320px at 88% -10%, color-mix(in srgb, var(--amber) 30%, transparent), transparent 65%), linear-gradient(155deg, var(--surface) 0%, var(--bg-grad-1) 100%); border: 1px solid var(--border); box-shadow: var(--shadow); }
.cta-band.boxed .eyebrow{ text-align: center; }
.cta-band.boxed h2{ font-weight: 800; font-size: clamp(2rem, 4.2vw, 2.75rem); line-height: 1.1; letter-spacing: -0.015em; max-width: 24ch; margin-left: auto; margin-right: auto; position: relative; }
.cta-band.boxed h2 em{ font-style: normal; background: linear-gradient(95deg, var(--lime), var(--forest) 75%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta-band.boxed p{ font-size: 1.05rem; max-width: 54ch; margin-left: auto; margin-right: auto; position: relative; }
.cta-band.boxed .button-row{ position: relative; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ padding: 4rem 2rem 2rem; border-top: 1px solid var(--border); background: var(--surface); }
.footer-inner{ max-width: var(--wide-size) !important; margin: 0 auto; }
.footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.footer-col h5{ font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; margin: 0 0 1rem; }
.footer-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul li a{ color: var(--text-muted); text-decoration: none; font-size: 0.88rem; transition: color 0.2s ease; }
.footer-col ul li a:hover{ color: var(--lime); }
.footer-col ul li:first-child a{ color: var(--accent-text); font-weight: 700; }
.footer-tel{ font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; color: var(--text); text-decoration: none; display: inline-block; margin: 0.6rem 0 1.1rem; }
.footer-tel:hover{ color: var(--lime); }
.footer-p{ font-size: 0.88rem; color: var(--text-muted); max-width: 34ch; margin: 0 0 1rem; }
.footer-creds{ display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.footer-creds img{ height: 26px; width: auto; opacity: 0.85; filter: grayscale(0.1); display: block; }
.footer-bottom{ border-top: 1px solid var(--border); padding-top: 1.4rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; font-size: 0.74rem; color: var(--text-muted); }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .footer-grid{ grid-template-columns: 1fr; } }

/* Logo plate variant used inline in footer col */
.logo-plate.inline{ display: inline-flex; margin-bottom: 1rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
  .story-grid, .story-grid.reverse{ grid-template-columns: 1fr; }
  .story-grid .story-photo{ order: 1 !important; transform: none; }
  .story-grid .story-copy{ order: 2 !important; padding-left: 0; padding-right: 0; }
  .editorial-row, .editorial-row.reverse{ grid-template-columns: 1fr; }
  .editorial-row.reverse .editorial-photo, .editorial-row.reverse .case-photo-fallback{ order: 1; }
  .editorial-row.reverse .editorial-copy{ order: 2; }
}
@media (max-width: 640px){
  /* Drop the NICEIC tagline under the logo on narrow screens too (desktop
     keeps it). That frees up the row next to the logo, which is where the
     hamburger toggle moves to below (packed tight via flex-start instead
     of sitting crowded in the header-actions cluster on the right). */
  .brand-tag{ display: none; }

  .header-inner{ justify-content: flex-start; }
  .header-actions{ margin-left: auto; }

  .nav-toggle{ display: flex; }
  .nav-links{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 0 1.5rem;
    z-index: 45;
    transition: max-height 0.3s ease, visibility 0.3s ease;
  }
  body.nav-open .nav-links{ visibility: visible; max-height: 80vh; overflow-y: auto; padding: 0.5rem 1.5rem 1.5rem; }
  .nav-links > li{ width: 100%; }
  .nav-links li > a{ display: block; padding: 0.9rem 0; border-bottom: 1px solid var(--border); }
  .nav-item-services{ display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
  .nav-item-services > a{ flex: 1; }
  .nav-dropdown-toggle{ display: flex; }
  .nav-dropdown{
    position: static;
    width: 100%;
    flex-basis: 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0 0.5rem;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .nav-item-services.dropdown-open .nav-dropdown{ max-height: 600px; }
  .nav-dropdown li a{ padding-left: 1rem; }

  /* No-photo heroes (Contact, Case Studies) keep the plain stacked layout —
     there's no photo to feature, so just tighten their spacing a little. */
  .hero-editorial.no-photo{ padding: 6rem 1.25rem 3rem; min-height: 0; }
  .hero-editorial.no-photo h1{ font-size: 2rem; line-height: 1.08; margin-bottom: 1rem; }
  .hero-editorial.no-photo .hero-editorial-sub{ font-size: 1rem; margin-bottom: 1.5rem; }
  .hero-editorial.no-photo .cover-meta{ gap: 0.5rem 1.25rem; padding-top: 1rem; font-size: 0.68rem; }

  /* Photo-first mobile hero. Desktop layers everything (eyebrow, heading,
     subtitle, CTAs, stats strip) on top of the full-bleed photo — on a
     narrow column that text alone needs 700-800px+, so the photo's box
     (tied to it via .hero-bg's inset:0) ends up just as tall and object-fit:
     cover crops it down to an unrecognisable sliver. Restructured instead:
     the photo becomes a real, fixed-height block (not absolutely filling
     whatever height the text demands), only the eyebrow+heading overlay it
     (wrapped in .hero-mobile-heading, see base rule above), and everything
     else drops into normal flow below the photo — closer to how the
     desktop version actually reads: photo-dominant, text secondary. */
  .hero-editorial:not(.no-photo){ display: block; padding: 0; min-height: 0; overflow: visible; }
  .hero-editorial:not(.no-photo) .hero-bg{ position: relative; inset: auto; height: 58vh; }
  /* Some hero photos (Solar, Security, EV Charging) render completely blank
     at this box size — a first-paint GPU compositing race, not anything
     specific to filter/object-position (any style nudge after load fixes
     it, which pointed at a stuck compositor layer rather than a CSS value
     problem). Forcing GPU layer promotion up front is the standard fix. */
  .hero-editorial:not(.no-photo) .hero-bg img{ transform: translateZ(0); }
  .hero-editorial:not(.no-photo) .hero-editorial-inner{ position: static; padding: 0 1.25rem 2.5rem; }
  .hero-editorial:not(.no-photo) .content-col{ max-width: none; }

  .hero-mobile-heading{
    /* overridden from the base "display:contents" only at this breakpoint */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 58vh;
    padding: 1.5rem 1.25rem;
    z-index: 2;
  }
  .hero-mobile-heading .eyebrow{ margin-bottom: 0.6rem; }
  .hero-mobile-heading h1{ font-size: 2rem; line-height: 1.08; margin: 0; max-width: none; }

  /* Everything below the photo now sits on the page's normal background,
     not the photo's dark overlay, so it needs the .no-photo hero's text
     colors instead of the white/on-photo ones desktop uses. */
  .hero-editorial:not(.no-photo) .hero-editorial-sub{ color: var(--text-muted); font-size: 1rem; margin-top: 1.5rem; margin-bottom: 1.25rem; }
  .hero-editorial:not(.no-photo) .button-row{ margin-bottom: 1.5rem; }
  .hero-editorial:not(.no-photo) .btn-ghost.on-photo > .wp-block-button__link{ color: var(--text-muted); border-bottom-color: var(--border); }
  .hero-editorial:not(.no-photo) .cover-meta{ color: var(--text-muted); border-top-color: var(--border); gap: 0.5rem 1.25rem; padding-top: 1rem; font-size: 0.68rem; }
  .hero-editorial:not(.no-photo) .cover-meta strong{ color: var(--text); }
  .story-list{ grid-template-columns: 1fr; }
  .tile-section{ padding: 3.5rem 0; }
  .callout-banner{ padding: 2rem; }
  .emergency-panel, .contact-form-panel{ padding: 2rem; }
}