/* =====================================================================
   On Call Emergency Electricians: stylesheet v3 "Live current" (2026-10-22)
   One system for every page: index.html, the six service pages (build.py)
   and the town pages (build_locations.py) all use these classes.

   Type    Saira, the logo's own "EMERGENCY ELECTRICIANS" face, for titles,
           labels, nav and buttons. Instrument Sans for reading text.
   Colour  Logo navy for ink, logo electric blue for anything you can press,
           cool daylight tints for the light bands, one dark room per page.
   Mark    The lightning bolt from the logo's O leads every section label.

   The previous stylesheet (eight stacked passes) is backups/styles-before-v3.css.
   Standing rules kept from earlier requests: light theme only, no green,
   no glow on titles (last rule in this file), only a tiny glow on accent
   text, no offset block behind photos, no underline bars on title words,
   header height never changes on scroll, topbar hidden on phones.
   ===================================================================== */

:root {
  --navy: #0B1D57;
  --navy-2: #13296E;
  --night: #061135;
  --night-2: #0A1A4C;
  --blue: #0071E6;
  --blue-2: #005CC4;
  --blue-3: #004A9F;
  --volt: #0080FC;
  --sky: #7CC4FF;
  --tint: #F3F7FD;
  --tint-2: #E7F0FC;
  --line: #E1E8F3;
  --line-2: #D2DCEB;
  --line-hover: #C3D7F4;
  --text: #3A4662;
  --muted: #66728D;
  --white: #fff;
  --edit: #F4C400; /* local photo editor only */

  --display: "Saira", "Arial Narrow", system-ui, sans-serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --shadow-sm: 0 1px 2px rgba(11, 29, 87, .05), 0 6px 16px -10px rgba(11, 29, 87, .16);
  --shadow: 0 1px 2px rgba(11, 29, 87, .05), 0 22px 44px -24px rgba(11, 29, 87, .3);
  --shadow-lg: 0 2px 6px rgba(11, 29, 87, .05), 0 40px 80px -38px rgba(11, 29, 87, .45);
  --wrap: 1240px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* "only a tiny tiny bit" of glow on accent text (user, 2026-09-30) */
  --glow-light: 0 0 6px rgba(0, 113, 230, .16);
  --glow-dark: 0 0 8px rgba(124, 196, 255, .32);

  --bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 2 4.5 13.5h6L9 22l10.5-12.5H13z'/%3E%3C/svg%3E");
  --phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E");
  --tick-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23E5EFFC'/%3E%3Cpath d='M7.2 12.3l3.2 3.2 6.6-7' fill='none' stroke='%230071E6' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --tick-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%237CC4FF' fill-opacity='.16'/%3E%3Cpath d='M7.2 12.3l3.2 3.2 6.6-7' fill='none' stroke='%237CC4FF' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --tick-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23fff' fill-opacity='.2'/%3E%3Cpath d='M7.2 12.3l3.2 3.2 6.6-7' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --tick-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2322C55E'/%3E%3Cpath d='M7.2 12.3l3.2 3.2 6.6-7' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --tick-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%230071E6'/%3E%3Cpath d='M7.2 12.3l3.2 3.2 6.6-7' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --promise-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='12' fill='%23E5EFFC'/%3E%3Cpath d='M13 20.5l4.6 4.6L27.5 15' fill='none' stroke='%230071E6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --promise-tile-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='12' fill='%230071E6'/%3E%3Cpath d='M13 20.5l4.6 4.6L27.5 15' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230B1D57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --dots: radial-gradient(rgba(124, 196, 255, .16) 1px, transparent 1.4px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 150px; -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
body {
  margin: 0; overflow-x: hidden;
  font: 400 17px/1.65 var(--sans); color: var(--text); background: var(--white);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  margin: 0; font-family: var(--display); font-weight: 800; line-height: 1.1; letter-spacing: -.012em;
  color: var(--navy); text-wrap: balance;
}
h2 { font-size: clamp(30px, 3.1vw, 44px); }
h3 { font-size: 20px; }
h3, h4 { font-weight: 700; line-height: 1.22; letter-spacing: -.004em; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
li { text-wrap: pretty; }
strong { color: var(--navy); font-weight: 600; }
b { font-weight: 600; }
::selection { background: rgba(0, 113, 230, .18); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
:is(.site-header, .hero, .topbar, .section-navy, .on-navy, .footer, .cta-band, .fact-list, .rail-foot, .faq-help) :focus-visible { outline-color: var(--sky); }
.site-header :focus-visible { outline-color: var(--white); }
.site-header .drop-menu :focus-visible { outline-color: var(--blue); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap, .container, .wrap-wide { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.section { position: relative; padding: 112px 0; }
.section-pale, .band-grey { background: var(--tint); }
#services { background: radial-gradient(1000px 440px at 100% 0%, rgba(0, 128, 252, .07), transparent 62%), var(--tint); }
#work, #advice { background: var(--white); }

/* ---------- Labels and headings ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 13px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); text-shadow: var(--glow-light);
}
.eyebrow::before {
  content: ""; width: 12px; height: 17px; flex: none; background: currentColor;
  -webkit-mask: var(--bolt) center / contain no-repeat; mask: var(--bolt) center / contain no-repeat;
}
:is(.hero, .section-navy, .on-navy, .fact-list) .eyebrow { color: var(--sky); text-shadow: var(--glow-dark); }
.h2, .h-lg { font-size: clamp(30px, 3.1vw, 44px); margin-top: 14px; }
.h-md { font-size: clamp(24px, 2.2vw, 30px); margin-top: 12px; }
.hl { color: var(--blue); }
:is(.hero, .section-navy, .on-navy) .hl { color: var(--sky); }
.lead { font-size: 18.5px; line-height: 1.62; color: var(--text); max-width: 64ch; }
:is(.section-navy, .on-navy) .lead { color: rgba(255, 255, 255, .74); }
.sec-head { max-width: 820px; margin: 0 0 52px; }
.sec-head .lead, .sec-head > p { margin-top: 18px; }
.head-c { max-width: 820px; margin: 0 auto 60px; text-align: center; }
.head-c .lead { margin: 18px auto 0; }
.prose p { max-width: 62ch; }
/* Services intro: heading left, lead right, so the grid starts sooner */
@media (min-width: 1021px) {
  #services .sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: end; max-width: none; }
  #services .sec-head .eyebrow { grid-column: 1; justify-self: start; }
  #services .sec-head .h-lg { grid-column: 1; }
  #services .sec-head .lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; }
}

/* ---------- Buttons ---------- */
.btn, .btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px; border: 0; border-radius: 14px; cursor: pointer;
  font: 700 16.5px/1 var(--display); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s;
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn-cyan, .btn-primary {
  color: var(--white); background: linear-gradient(180deg, var(--blue), var(--blue-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 50, 130, .3), 0 12px 26px -12px rgba(0, 92, 196, .75);
}
.btn-cyan:hover, .btn-primary:hover {
  background: linear-gradient(180deg, #0068D6, var(--blue-3)); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 50, 130, .3), 0 18px 32px -14px rgba(0, 92, 196, .85);
}
.btn-cyan:active, .btn-primary:active { transform: translateY(0); }
:is(.hero, .section-navy, .contact-info) .btn-cyan { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 0 0 1px rgba(124, 196, 255, .25), 0 14px 32px -12px rgba(0, 113, 230, .7); }
.btn-navy { color: var(--white); background: var(--navy); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 12px 24px -14px rgba(11, 29, 87, .8); }
.btn-navy:hover { background: var(--night); transform: translateY(-2px); }
.btn-sm { min-height: 48px; padding: 0 20px; font-size: 15.5px; }
.btn-chip { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.btn-chip svg { width: 7px; height: 11px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Topbar (inside the sticky header) ---------- */
.topbar { position: relative; z-index: 2; background: rgba(2, 8, 32, .34); border-bottom: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .9); font: 500 14px/1.2 var(--sans); }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 44px; }
.topbar a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: color .2s; }
.topbar a:hover { color: var(--white); }
.topbar svg { width: 16px; height: 16px; flex: none; fill: var(--white); opacity: .92; }
.tb-left { display: flex; align-items: center; gap: 28px; }
.emerg-pill { display: inline-flex; align-items: center; gap: 10px; }
.emerg-pill i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); animation: livePulse 1.8s 2; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.tb-offer b { padding: 5px 9px; border-radius: 6px; background: var(--white); color: var(--blue-2); font: 700 11.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.topbar .tb-phone { gap: 10px; font: 700 18.5px/1 var(--display); letter-spacing: .02em; color: var(--white); }
.topbar .tb-phone svg { width: 19px; height: 19px; }

/* ---------- Header ----------
   DARK (user, 2026-10-22: "make the header dark so the logo shows exactly as
   I supplied it, white lettering"), so it carries images/oncall-logo-white.png.
   No backdrop-filter here: it would make the header the containing block
   for the fixed mobile menu. The header never changes height on scroll
   (that caused a jump near the top); only the logo scales. */
.site-header { position: sticky; top: 0; z-index: 50; background: linear-gradient(100deg, #0A1A52 0%, #0B2E86 42%, #0A5AD4 100%); transition: box-shadow .3s; } /* blue gradient on both bars (user, 2026-10-22) */
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, .14); pointer-events: none; }
.site-header.scrolled { box-shadow: 0 16px 34px -20px rgba(2, 6, 24, .6); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand-logo { display: block; width: auto; height: 52px; } /* your logo, cut out from its black background (2026-10-22) */
/* The logo is two layers on one canvas: the lettering (oncall-logo-white-text.png) and the bolt
   (oncall-logo-bolt.png), so the bolt can rumble on its own: as soon as the logo is in view,
   then every 7 seconds (user, 2026-10-22). site.js adds .is-live while the logo is on screen. */
.brand-mark { position: relative; display: block; }
.brand-bolt { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; transform-origin: 6.85% 50%; }
.brand-mark.is-live .brand-bolt { animation: boltRumble 7s .35s infinite; }
@keyframes boltRumble {
  0%, 9.6%, 100% { transform: none; filter: none; }
  1.2% { transform: translate(-1.6px, .9px) rotate(-6deg); filter: brightness(1.3) drop-shadow(0 0 5px rgba(90, 190, 255, .9)); }
  2.4% { transform: translate(1.6px, -.9px) rotate(6deg); filter: brightness(1.4) drop-shadow(0 0 7px rgba(90, 190, 255, .95)); }
  3.6% { transform: translate(-1.3px, -.8px) rotate(-5deg); filter: brightness(1.5) drop-shadow(0 0 9px rgba(90, 190, 255, 1)); }
  4.8% { transform: translate(1.3px, .8px) rotate(4deg); filter: brightness(1.4) drop-shadow(0 0 8px rgba(90, 190, 255, .9)); }
  6% { transform: translate(-.9px, .5px) rotate(-3deg); filter: brightness(1.25) drop-shadow(0 0 6px rgba(90, 190, 255, .75)); }
  7.2% { transform: translate(.8px, -.4px) rotate(2deg); filter: brightness(1.15) drop-shadow(0 0 4px rgba(90, 190, 255, .55)); }
  8.4% { transform: translate(-.4px, .2px) rotate(-1deg); filter: brightness(1.05) drop-shadow(0 0 2px rgba(90, 190, 255, .3)); }
}
.site-header .brand-mark { transform-origin: left center; transition: transform .3s var(--ease); }
.site-header.scrolled .brand-mark { transform: scale(.9); }

/* Clock icons: the hands turn slowly, the minute hand once every 12s and the hour hand
   12 times slower (user, 2026-10-22) */
.clk-m, .clk-h { transform-box: view-box; transform-origin: 12px 12px; animation: clkSpin 12s linear infinite; }
.clk-h { animation-duration: 144s; }
@keyframes clkSpin { to { transform: rotate(360deg); } }
.c-lines i svg.clk { fill: none; stroke: var(--sky); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.menu > li > a:not(.btn), .drop-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 0; border-radius: 10px;
  background: none; cursor: pointer; text-decoration: none;
  font: 600 15.5px/1 var(--display); letter-spacing: .005em; color: rgba(255, 255, 255, .9);
  transition: color .2s, background .2s;
}
.menu > li > a:not(.btn):hover, .drop-btn:hover, .drop.open .drop-btn { color: var(--white); background: rgba(255, 255, 255, .13); }
.drop { position: relative; }
.drop-btn svg { width: 10px; height: 10px; transition: transform .25s var(--ease); }
.drop:hover .drop-btn svg, .drop.open .drop-btn svg { transform: rotate(180deg); }
.drop-menu {
  position: absolute; top: calc(100% + 12px); left: 50%; translate: -50% 6px; width: 310px;
  list-style: none; margin: 0; padding: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transition: opacity .2s, translate .25s var(--ease), visibility .2s;
}
.drop-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge across the gap */
.drop:hover .drop-menu, .drop.open .drop-menu { opacity: 1; visibility: visible; translate: -50% 0; }
.drop-menu a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; text-decoration: none; font: 600 15px/1.3 var(--sans); color: var(--navy); transition: background .2s, color .2s; }
.drop-menu a:hover { background: var(--tint); color: var(--blue); }
.drop-menu i { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--tint-2); transition: background .2s; }
.drop-menu i svg { width: 18px; height: 18px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.drop-menu a:hover i { background: var(--blue); }
.drop-menu a:hover i svg { stroke: var(--white); }
.menu .btn { min-height: 52px; font-size: 16px; }

.burger { display: none; position: relative; z-index: 2; width: 46px; height: 46px; place-items: center; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .08); cursor: pointer; transition: border-color .2s, background .2s; }
.burger:hover { border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .14); }
.burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--white); box-shadow: 0 -6px 0 var(--white), 0 6px 0 var(--white); transition: transform .25s, box-shadow .25s; }
.nav-open .burger span { box-shadow: none; transform: rotate(45deg); }
.nav-open .burger span::after { content: ""; display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--white); transform: rotate(-90deg); }
.nav-call { display: none; }

/* ---------- Hero (home, town and service pages) ----------
   Reading order: eyebrow, headline, lead, the one call button with its two
   ticks, then the proof card. .hero-copy is display:contents, so its
   children share one grid with the card and the card's top lines up with
   the headline. Phones: the photo becomes a clear band across the top. */
.hero { position: relative; isolation: isolate; overflow: hidden; color: var(--white); background: var(--night); }
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; transform: scale(1.04); animation: heroZoom 18s ease-out forwards; }
.hero-bg img:not(.ph-contain) { filter: saturate(1.05) contrast(1.03); }
@keyframes heroZoom { to { transform: scale(1); } }
.hero-bg .hero-img-mobile { display: none; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(720px 420px at 6% 104%, rgba(0, 113, 230, .3), transparent 70%),
    linear-gradient(180deg, rgba(6, 17, 53, .42), transparent 24%),
    linear-gradient(0deg, rgba(6, 17, 53, .6), transparent 40%),
    linear-gradient(90deg, rgba(6, 17, 53, .96) 0%, rgba(6, 17, 53, .9) 46%, rgba(6, 17, 53, .62) 66%, rgba(6, 17, 53, .32) 84%, rgba(6, 17, 53, .2) 100%);
}
/* The live wire: one pulse of light along the hero's bottom edge */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, transparent, var(--sky) 50%, transparent) -30% 0 / 30% 100% no-repeat,
    linear-gradient(90deg, rgba(124, 196, 255, .06), rgba(124, 196, 255, .4), rgba(124, 196, 255, .06));
  box-shadow: 0 0 14px rgba(124, 196, 255, .35);
  animation: livewire 6s cubic-bezier(.45, 0, .25, 1) 1;
}
@keyframes livewire { 0% { background-position: -30% 0, 0 0; } 60%, 100% { background-position: 130% 0, 0 0; } }

.hero .hero-copy { display: contents; }
.hero .hero-in > *, .hero .hero-copy > * { min-width: 0; }
.hero .hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 384px);
  grid-template-areas: "crumbs crumbs" "eyebrow eyebrow" "title card" "lead card" "call card" ". card";
  grid-template-rows: auto auto auto auto auto 1fr;
  column-gap: clamp(40px, 6vw, 96px); row-gap: 0; align-items: start;
  padding: 96px 0 156px; /* the stats bar overlaps the last 92px */
}
.hero.hero-page .hero-in { padding: 60px 0 92px; }
.hero .crumbs { grid-area: crumbs; margin: 0 0 24px; }
.hero .hero-in .eyebrow { grid-area: eyebrow; justify-self: start; margin: 0 0 20px; font-size: 13.5px; }
.hero .hero-in h1 { grid-area: title; margin: 0; font-size: clamp(40px, 4.2vw, 62px); line-height: 1.02; letter-spacing: -.018em; color: var(--white); }
.hero.hero-page .hero-in h1 { font-size: clamp(36px, 3.4vw, 50px); line-height: 1.05; }
.hero:not(.hero-page) .hero-in h1 .hl { display: block; }
.hero .hero-in .hero-lead { grid-area: lead; margin: 22px 0 0; max-width: 54ch; font-size: 18.5px; line-height: 1.6; color: rgba(255, 255, 255, .84); }
.hero .hero-in .hero-ctas { grid-area: call; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin: 34px 0 0; }
.hero .hero-in .hero-ctas .btn { flex: none; min-height: 60px; padding: 0 30px; font-size: 18px; }
.hero .hero-in .hero-ctas .btn svg { width: 20px; height: 20px; }
.hero .hero-in .hero-ticks {
  display: grid; gap: 7px; list-style: none; margin: 0; padding: 2px 0 2px 24px; border-left: 1px solid rgba(255, 255, 255, .2);
  font: 500 15px/1.35 var(--sans); color: rgba(255, 255, 255, .9);
}
.hero .hero-ticks li { display: flex; align-items: center; gap: 9px; }
.hero .hero-ticks svg { width: 18px; height: 18px; flex: none; stroke: var(--sky); }

.hero .hero-in .hero-card {
  grid-area: card; position: relative; align-self: start; margin: 0; padding: 26px 26px 28px; border-radius: 24px;
  /* the same navy to electric blue sweep as the header bars (user, 2026-10-22) */
  background: linear-gradient(125deg, rgba(10, 26, 82, .95) 0%, rgba(11, 46, 134, .94) 48%, rgba(10, 90, 212, .93) 100%);
  border: 1px solid rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 30px 60px -24px rgba(2, 6, 24, .7);
}
.hero .hero-in .hero-card::before { content: ""; position: absolute; left: 26px; right: 26px; top: -1px; height: 2px; border-radius: 2px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent); }
.hc-top { display: flex; align-items: center; gap: 14px; }
.hc-top > div { min-width: 0; }
.hc-seal { width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 6px rgba(255, 255, 255, .12), 0 8px 18px -8px rgba(2, 8, 32, .5); }
.hc-seal svg { width: 24px; height: 24px; fill: none; stroke: var(--blue-2); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hc-top small { display: flex; align-items: center; gap: 9px; font: 600 12.5px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.hc-top b { display: block; margin-top: 5px; font: 800 26px/1.15 var(--display); letter-spacing: -.01em; color: var(--white); }
.hc-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--white); }
.hc-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--white); opacity: 0; animation: hcPulse 2.4s var(--ease) 2; }
@keyframes hcPulse { 0% { transform: scale(.5); opacity: .9; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
.hc-list { list-style: none; display: grid; gap: 12px; margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 15px; line-height: 1.45; }
.hc-list li { display: flex; align-items: flex-start; gap: 11px; color: rgba(255, 255, 255, .95); }
.hc-list li::before { content: ""; width: 20px; height: 20px; flex: none; background: var(--tick-green) center / 20px no-repeat; } /* green ticks (user, 2026-10-22) */
.hc-list li b { color: var(--white); font-weight: 600; }
.hero .hero-in a:focus-visible { outline: 3px solid var(--sky); outline-offset: 4px; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 500 14px/1.4 var(--sans); color: rgba(255, 255, 255, .62); }
.crumbs a { color: rgba(255, 255, 255, .88); text-decoration: none; transition: color .2s; }
.crumbs a:hover { color: var(--sky); }
.crumbs .sep { opacity: .5; }

/* ---------- Stats bar (overlaps the hero) ---------- */
.stats-wrap { position: relative; z-index: 3; margin-top: -92px; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 0; padding: 12px; background: var(--white); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-lg); }
.stats li { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px 16px; }
.stats li + li::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--line); }
.st-ic { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--tint-2); transition: background .25s, transform .25s var(--ease); }
.st-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--blue); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s; }
.stats li:hover .st-ic { background: linear-gradient(180deg, var(--blue), var(--blue-2)); transform: translateY(-2px); }
.stats li:hover .st-ic svg { stroke: var(--white); }
.stats b { display: block; font: 700 17px/1.2 var(--display); letter-spacing: 0; color: var(--navy); white-space: nowrap; }
.stats small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.35; color: var(--muted); }

/* ---------- Accreditation strip ---------- */
.accred { padding: 60px 0 64px; text-align: center; }
.accred h2 { margin: 0 auto; max-width: none; font: 700 13.5px/1.4 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.accred-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.acc {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font: 600 15px/1.2 var(--display); color: var(--navy); transition: border-color .2s, transform .2s var(--ease);
}
.acc:hover { border-color: var(--line-hover); transform: translateY(-2px); }
.acc i { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tint-2); }
.acc i svg { width: 18px; height: 18px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Service cards ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.svc-card { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.svc-card:hover { transform: translateY(-4px); border-color: var(--line-hover); box-shadow: var(--shadow); }
.svc-body { padding: 28px 28px 18px; }
.svc-ic { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 15px; background: var(--tint-2); transition: background .3s, transform .3s var(--ease); }
.svc-ic svg { width: 26px; height: 26px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.svc-card:hover .svc-ic { background: linear-gradient(180deg, var(--blue), var(--blue-2)); transform: rotate(-4deg); }
.svc-card:hover .svc-ic svg { stroke: var(--white); }
.svc-card h3 { font-size: 20.5px; margin-bottom: 10px; }
.svc-card p { font-size: 15.5px; line-height: 1.6; }
.card-bar { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding: 4px 28px 26px; font: 700 15.5px/1 var(--display); letter-spacing: .01em; color: var(--blue); text-decoration: none; text-shadow: var(--glow-light); }
.card-bar::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); } /* the whole card is the link */
.card-bar .btn-chip { width: 28px; height: 28px; background: var(--tint-2); color: var(--blue); transition: background .25s, color .25s, transform .25s var(--ease); }
.svc-card:hover .card-bar .btn-chip { background: var(--blue); color: var(--white); transform: translateX(3px); }
.svc-card:has(.card-bar:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }
.svc-card .card-bar:focus-visible { outline: none; }

/* ---------- Alternating splits (homes, landlords, commercial; also advice + service intro) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 80px; align-items: center; }
.split.flip { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.split.flip .split-media { order: 2; }
.split > * { min-width: 0; }
.split + .split { margin-top: 112px; }
.split-media { position: relative; }
.split-media .frame { position: relative; overflow: hidden; aspect-ratio: 5 / 4; border-radius: 26px; background: var(--tint-2); box-shadow: var(--shadow-lg); }
.split-media .frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(11, 29, 87, .07); pointer-events: none; }
.split-media .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.split-media:hover .frame img:not(.ph-contain) { transform: scale(1.03); }
.split-media .frame img:not(.ph-contain) { filter: saturate(1.04) contrast(1.02); }
#homes .frame img { object-position: 30% 40%; } /* the framing the homes photo has always had */
.split-copy .h2 { margin-bottom: 20px; }
.split-copy p { max-width: 60ch; }
.ticks { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 26px 0 32px; padding: 0; }
.ticks li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; font-weight: 500; line-height: 1.4; color: var(--navy); }
.ticks li::before { content: ""; width: 22px; height: 22px; flex: none; margin-top: -1px; background: var(--tick-light) center / 22px no-repeat; }

/* ---------- The dark room (How it works) ---------- */
.section-navy {
  isolation: isolate; overflow: hidden; color: rgba(255, 255, 255, .8);
  margin-inline: clamp(10px, 1.6vw, 24px); border-radius: clamp(24px, 3vw, 40px);
  background:
    radial-gradient(1000px 520px at 12% -10%, rgba(0, 113, 230, .38), transparent 62%),
    radial-gradient(800px 520px at 100% 110%, rgba(124, 196, 255, .14), transparent 60%),
    linear-gradient(180deg, var(--night-2), var(--night));
}
.section-navy::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--dots); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000, transparent 75%);
}
:is(.section-navy, .on-navy) :is(h2, h3) { color: var(--white); }
.section-navy strong { color: var(--white); }

.rail { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.rail::before { content: ""; position: absolute; top: 27px; left: 28px; right: calc((100% - 72px) / 4 - 28px); height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(124, 196, 255, .14), rgba(124, 196, 255, .6)); }
.rail > li { position: relative; display: flex; flex-direction: column; }
.rail-dot {
  position: relative; z-index: 1; width: 56px; height: 56px; margin-bottom: 22px; display: grid; place-items: center; border-radius: 50%;
  font: 800 19px/1 var(--display); color: var(--white); background: linear-gradient(180deg, var(--blue), var(--blue-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 6px rgba(0, 113, 230, .2), 0 10px 24px -8px rgba(0, 92, 196, .8);
}
.rail > li:last-child .rail-dot { color: var(--night); background: linear-gradient(180deg, #A6D7FF, #5BB0FF); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 6px rgba(124, 196, 255, .2), 0 0 30px rgba(124, 196, 255, .5); }
.rail-card { flex: 1; padding: 26px; border-radius: var(--radius); background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); transition: transform .3s var(--ease), border-color .3s, background .3s; }
.rail > li:hover .rail-card { transform: translateY(-4px); border-color: rgba(124, 196, 255, .3); background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); }
.rail-time { display: block; margin-bottom: 10px; font: 700 12.5px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--sky); text-shadow: var(--glow-dark); }
.rail-card h3 { margin-bottom: 10px; font-size: 20px; color: var(--white); }
.rail-card p { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .74); }
.rail-foot {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 24px;
  margin-top: 48px; padding: 28px 32px; border-radius: 22px;
  background: linear-gradient(110deg, var(--blue) 0%, #0A5FD0 55%, #0B4CB0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 24px 48px -24px rgba(0, 60, 160, .8);
}
.rail-foot::after { content: ""; position: absolute; right: 26%; top: 50%; width: 120px; height: 168px; translate: 0 -50%; background: var(--white); opacity: .07; pointer-events: none; -webkit-mask: var(--bolt) center / contain no-repeat; mask: var(--bolt) center / contain no-repeat; }
.rail-foot > * { position: relative; z-index: 1; }
.rail-foot h3 { font-size: 22px; color: var(--white); }
.rail-foot p { margin-top: 6px; color: rgba(255, 255, 255, .88); }
.rail-foot .btn.btn-cyan { background: var(--white); color: var(--navy); box-shadow: 0 12px 26px -12px rgba(0, 20, 70, .6); }
.rail-foot .btn.btn-cyan:hover { background: var(--white); color: var(--blue); }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; align-items: center; }
.about > * { min-width: 0; }
.about-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
.about-stats div { padding: 20px 20px 18px; border-radius: 18px; background: var(--tint); border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s; }
.about-stats div:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.about-stats b { display: block; font: 800 34px/1 var(--display); letter-spacing: -.02em; color: var(--navy); }
.about-stats b span { color: var(--blue); }
.about-stats small { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.about-card { position: relative; overflow: hidden; padding: 0 30px 12px; border-radius: 26px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.about-card h3 {
  display: flex; align-items: center; gap: 10px; margin: 0 -30px 4px; padding: 22px 30px;
  font-size: 21px; color: var(--white);
  background: radial-gradient(420px 160px at 100% 0%, rgba(0, 113, 230, .5), transparent 70%), linear-gradient(120deg, var(--navy), var(--night));
}
.about-card h3::before { content: ""; width: 12px; height: 18px; flex: none; background: var(--sky); -webkit-mask: var(--bolt) center / contain no-repeat; mask: var(--bolt) center / contain no-repeat; }
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 15px 0; font-size: 15.5px; border-top: 1px solid var(--line); }
.facts li:first-child { border-top: 0; }
.facts li b { font: 600 15px/1.4 var(--display); color: var(--navy); }
.facts li span { color: var(--text); }

/* ---------- Promise ---------- */
.promise { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; list-style: none; margin: 0; padding: 0; }
.promise li { position: relative; padding: 26px 24px 24px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.promise li:hover { transform: translateY(-4px); border-color: var(--line-hover); box-shadow: var(--shadow); }
.promise li::before { content: ""; display: block; width: 40px; height: 40px; margin-bottom: 18px; background: var(--promise-tile) center / 40px no-repeat; }
.promise li:hover::before { background-image: var(--promise-tile-on); }
.promise b { display: block; margin-bottom: 8px; font: 700 18px/1.25 var(--display); color: var(--navy); }
.promise span { display: block; font-size: 15px; line-height: 1.6; color: var(--text); }

/* ---------- Dark fact panel (advice on the home page, facts on service pages) ---------- */
.fact-list {
  position: relative; overflow: hidden; list-style: none; margin: 0; padding: 12px 32px; border-radius: 26px;
  background: radial-gradient(520px 260px at 100% 0%, rgba(0, 113, 230, .42), transparent 70%), linear-gradient(160deg, var(--navy-2), var(--night));
  box-shadow: var(--shadow-lg);
}
.fact-list li { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 18px; align-items: baseline; padding: 17px 0; font-size: 15.5px; }
.fact-list li + li { border-top: 1px solid rgba(255, 255, 255, .1); }
.fact-list strong { font: 700 15px/1.4 var(--display); color: var(--sky); text-shadow: var(--glow-dark); }
.fact-list span { color: rgba(255, 255, 255, .86); }
.fact-list a { color: var(--white) !important; font-weight: 600; }

/* ---------- Areas ---------- */
.areas { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 64px; align-items: start; }
.areas > * { min-width: 0; }
.area-cta { display: flex; align-items: center; gap: 16px; margin-top: 30px; padding: 20px 22px; border-radius: 20px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.area-cta i { width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(180deg, var(--blue), var(--blue-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.area-cta i svg { width: 24px; height: 24px; fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.area-cta b { display: block; font: 700 19px/1.25 var(--display); color: var(--navy); }
.area-cta span { display: block; margin-top: 2px; font-size: 14.5px; color: var(--muted); }
.pc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pc { padding: 24px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.pc:hover { transform: translateY(-4px); border-color: var(--line-hover); box-shadow: var(--shadow); }
.pc-code { display: inline-flex; align-items: center; gap: 9px; font: 800 26px/1 var(--display); letter-spacing: -.01em; color: var(--navy); }
.pc-code svg { width: 22px; height: 22px; fill: var(--volt); }
.pc small { display: block; margin: 9px 0 10px; font: 700 15px/1.3 var(--display); color: var(--blue); }
.pc p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 13px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font: 600 14px/1.2 var(--sans); color: var(--navy); transition: border-color .2s, transform .2s var(--ease); }
.chip:hover { border-color: var(--line-hover); transform: translateY(-2px); }
.chip svg { display: none; }
.chip::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--volt); box-shadow: 0 0 0 3px rgba(0, 128, 252, .15); }
#areas p a { color: var(--blue); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-shadow: var(--glow-light); }
#areas p a:hover { color: var(--navy); }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 72px; align-items: start; }
.faq > * { min-width: 0; }
.faq-side { position: sticky; top: 140px; }
.faq-side .h2 { font-size: clamp(28px, 2.5vw, 36px); }
.faq-help {
  position: relative; overflow: hidden; margin-top: 30px; padding: 28px; border-radius: 22px; color: rgba(255, 255, 255, .8);
  background: radial-gradient(360px 200px at 100% 0%, rgba(0, 113, 230, .5), transparent 70%), linear-gradient(160deg, var(--navy-2), var(--night));
  box-shadow: var(--shadow-lg);
}
.faq-help b { display: block; margin-bottom: 6px; font: 700 20px/1.25 var(--display); color: var(--white); }
.faq-help p { margin-bottom: 20px; font-size: 15.5px; color: rgba(255, 255, 255, .8); }
.faq-help .btn-navy { background: linear-gradient(180deg, var(--blue), var(--blue-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(124, 196, 255, .25), 0 14px 30px -12px rgba(0, 113, 230, .7); }
.faq-help .btn-navy:hover { background: linear-gradient(180deg, #0068D6, var(--blue-3)); }
.faq-list { max-width: 900px; }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-item:first-child { border-top: 1px solid var(--line-2); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0;
  text-align: left; background: none; border: 0; cursor: pointer;
  font: 600 18px/1.4 var(--display); color: var(--navy); transition: color .2s;
}
.faq-q:hover { color: var(--blue); }
.faq-q .ind { position: relative; flex: none; width: 38px; height: 38px; margin-left: auto; border-radius: 50%; background: var(--tint-2); transition: background .25s, transform .3s var(--ease); }
.faq-q .ind::before, .faq-q .ind::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; border-radius: 2px; background: var(--blue); translate: -50% -50%; transition: transform .3s var(--ease), background .25s; }
.faq-q .ind::after { transform: rotate(90deg); }
.faq-item.open .ind { background: var(--blue); transform: rotate(180deg); }
.faq-item.open .ind::before, .faq-item.open .ind::after { background: var(--white); }
.faq-item.open .ind::after { transform: rotate(0); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding-right: 60px; font-size: 16px; }
.faq-a > div > :last-child { padding-bottom: 24px; }
.faq-item:not(.open) .faq-a > div { visibility: hidden; transition: visibility 0s linear .35s; }
.faq-item.open .faq-a > div { visibility: visible; transition: visibility 0s; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); overflow: hidden; border-radius: 30px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.contact-info {
  position: relative; isolation: isolate; overflow: hidden; padding: 52px 46px; color: rgba(255, 255, 255, .8);
  background: radial-gradient(520px 360px at 100% 100%, rgba(0, 113, 230, .42), transparent 70%), linear-gradient(170deg, var(--navy-2), var(--night));
}
.contact-info::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--dots); background-size: 26px 26px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 55%); mask-image: linear-gradient(200deg, #000, transparent 55%); }
.contact-info h2 { margin: 16px 0; font-size: clamp(28px, 2.6vw, 34px); line-height: 1.12; }
.contact-info p { color: rgba(255, 255, 255, .8); }
.c-lines { list-style: none; display: grid; gap: 18px; margin: 32px 0 0; padding: 0; }
.c-lines li { display: flex; align-items: center; gap: 14px; }
.c-lines li > div { min-width: 0; }
.c-lines i { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.c-lines i svg { width: 21px; height: 21px; fill: var(--sky); }
.c-lines small { display: block; font: 600 12px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .56); }
.c-lines a, .c-lines span { display: block; margin-top: 3px; font: 600 16.5px/1.35 var(--display); color: var(--white); text-decoration: none; overflow-wrap: anywhere; }
.c-lines a[href^="tel"] { font-size: 23px; font-weight: 700; letter-spacing: .01em; }
.c-lines a[href^="mailto"] { font: 600 14.5px/1.4 var(--sans); }
.c-lines a:hover { color: var(--sky); }
.form { padding: 52px 46px; }
.form h3 { font-size: 26px; }
.form > p { margin: 8px 0 26px; font-size: 15.5px; color: var(--muted); }
.f-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.f-grid > * { min-width: 0; }
.f-grid .full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 7px; font: 600 14px/1.3 var(--display); color: var(--navy); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 54px; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--white);
  font: 500 16px/1.4 var(--sans); color: var(--navy); transition: border-color .2s, box-shadow .2s;
}
.field select { appearance: none; -webkit-appearance: none; padding-right: 44px; background: var(--white) var(--chevron) right 16px center / 12px no-repeat; }
.field textarea { min-height: 124px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8A95AC; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #B8C7DD; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 113, 230, .14); }
.form .btn { width: 100%; margin-top: 22px; }
.form-note { margin-top: 14px; text-align: center; font-size: 13.5px; color: var(--muted); }
.form-msg { display: block; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--tint-2); color: var(--navy); font-size: 14.5px; font-weight: 600; }
.form .form-msg:empty { margin: 0; padding: 0; }

/* ---------- Footer ---------- */
.footer {
  position: relative; padding: 88px 0 0; font-size: 15px; color: rgba(255, 255, 255, .7);
  background: radial-gradient(900px 420px at 0% 0%, rgba(0, 113, 230, .18), transparent 60%), linear-gradient(180deg, var(--night-2), #040B26);
}
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(124, 196, 255, .5), transparent); }
.f-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.25fr; gap: 48px; }
.f-top > * { min-width: 0; }
.footer .brand-logo { height: 56px; }
.f-about { margin-top: 22px; max-width: 38ch; }
.f-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.f-badges span { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); font: 600 12.5px/1.2 var(--sans); color: rgba(255, 255, 255, .86); }
.footer h4 { margin-bottom: 20px; font: 700 13.5px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--sky); }
.f-links { list-style: none; display: grid; gap: 11px; margin: 0; padding: 0; }
.f-links a { text-decoration: none; transition: color .2s; }
.f-links a:hover { color: var(--white); }
.f-links a[href^="tel"] { font: 700 20px/1.2 var(--display); letter-spacing: .01em; color: var(--white); }
.f-links a[href^="tel"]:hover { color: var(--sky); }
.f-links a[href^="mailto"] { overflow-wrap: anywhere; }
.f-bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin-top: 64px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; color: rgba(255, 255, 255, .5); }
.f-bar a { color: rgba(255, 255, 255, .8); text-decoration: underline; text-underline-offset: 3px; }
.f-bar a:hover { color: var(--sky); }

.to-top {
  position: fixed; left: 20px; bottom: 20px; z-index: 60; width: 48px; height: 48px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--navy); box-shadow: 0 12px 24px -12px rgba(6, 17, 53, .7); cursor: pointer;
  opacity: 0; visibility: hidden; translate: 0 16px; pointer-events: none;
  transition: opacity .3s, translate .3s var(--ease), visibility .3s, background .2s;
}
.to-top.show { opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto; }
.to-top:hover { background: var(--blue); }
.to-top svg { width: 20px; height: 20px; fill: none; stroke: var(--white); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Service page blocks ---------- */
.cta-strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 20px; margin-top: 20px; padding: 22px 24px; border-radius: 20px; background: var(--tint); border: 1px solid var(--line); }
.cta-strip h3 { font-size: 19px; }
.cta-strip p { margin-top: 4px; font-size: 15px; color: var(--muted); }

.checkpanel { padding: 56px; border-radius: 30px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.checklist { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 36px 0 0; padding: 0; }
.checklist li { display: flex; gap: 14px; padding: 22px; border-radius: 18px; background: var(--tint); border: 1px solid var(--line); font-size: 15.5px; line-height: 1.6; transition: border-color .25s, background .25s; }
.checklist li:hover { border-color: var(--line-hover); background: var(--white); }
.checklist li::before { content: ""; width: 26px; height: 26px; flex: none; background: var(--tick-solid) center / 26px no-repeat; }
.checklist b { display: block; margin-bottom: 4px; font: 700 17px/1.3 var(--display); color: var(--navy); }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.step { display: flex; flex-direction: column; }
.step > div:first-child { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.step:not(:last-child) > div:first-child::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #BCD4F4, rgba(188, 212, 244, 0)); }
.step-lab { display: none; }
.step-num { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 50%; font: 800 18px/1 var(--display); color: var(--white); background: linear-gradient(180deg, var(--blue), var(--blue-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 6px var(--tint-2); }
.band-grey .step-num { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 6px var(--white); }
.step-card { flex: 1; padding: 24px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s; }
.step:hover .step-card { transform: translateY(-4px); box-shadow: var(--shadow); }
.step-card h3 { margin-bottom: 8px; font-size: 19px; }
.step-card p { font-size: 15px; line-height: 1.6; }

.job-photo { position: relative; overflow: hidden; margin: 0; aspect-ratio: 16 / 9; border-radius: 28px; background: var(--tint-2); box-shadow: var(--shadow-lg); }
.job-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.job-photo img:not(.ph-contain) { filter: saturate(1.04) contrast(1.02); }

.cross-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
.cross-link { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); text-decoration: none; }
.cross-link:hover { transform: translateY(-4px); border-color: var(--line-hover); box-shadow: var(--shadow); }
.cross-link h3 { font-size: 19px; }
.cross-link p { margin: 10px 0 20px; font-size: 15px; color: var(--text); }
.cross-link .go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font: 700 15.5px/1 var(--display); color: var(--blue); text-shadow: var(--glow-light); }
.cross-link .go::after { content: "\2192"; transition: transform .25s var(--ease); }
.cross-link:hover .go::after { transform: translateX(4px); }

.cta-band {
  position: relative; isolation: isolate; overflow: hidden; padding: 88px 0; color: rgba(255, 255, 255, .9);
  background: radial-gradient(800px 420px at 100% 0%, rgba(124, 196, 255, .35), transparent 60%), linear-gradient(115deg, #0068D9 0%, #0052B8 58%, #0A3E94 100%);
}
.cta-band::before { content: ""; position: absolute; z-index: -1; right: 6%; top: 50%; width: 260px; height: 360px; translate: 0 -50%; background: var(--white); opacity: .07; pointer-events: none; -webkit-mask: var(--bolt) center / contain no-repeat; mask: var(--bolt) center / contain no-repeat; }
.cta-in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 32px 40px; }
.cta-band .eyebrow { color: var(--white); text-shadow: none; }
.cta-band h2 { max-width: 22ch; color: var(--white); }
.cta-band p { margin-top: 14px; max-width: 58ch; color: rgba(255, 255, 255, .88); }
.cta-actions { display: flex; flex-direction: column; gap: 14px; }
.tel-big {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 22px 34px; border-radius: 18px;
  background: var(--white); color: var(--navy); text-decoration: none;
  font: 800 clamp(26px, 2.6vw, 36px)/1 var(--display); letter-spacing: .005em;
  box-shadow: 0 22px 44px -20px rgba(0, 20, 70, .65); transition: transform .2s var(--ease), color .2s;
}
.tel-big::before { content: ""; width: .8em; height: .8em; flex: none; background: var(--blue); -webkit-mask: var(--phone) center / contain no-repeat; mask: var(--phone) center / contain no-repeat; }
.tel-big:hover { transform: translateY(-2px); color: var(--blue); }

/* ---------- Scroll reveal ----------
   Uses the translate property, so the cards' own hover lift (transform) still works */
.js .rv-up, .js .reveal { opacity: 0; translate: 0 24px; transition: opacity .8s var(--ease), translate .8s var(--ease); }
.js .rv-up.in, .js .reveal.in { opacity: 1; translate: none; }
.js :is(.svc-card, .pc, .promise li, .cross-link) { transition: opacity .8s var(--ease), translate .8s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
:is(.svc-card, .pc, .promise li, .cross-link) { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }

/* ---------- Photos: desktop and phone versions ---------- */
img.img-mobile { display: none !important; }
img.img-desktop.ph-contain, img.img-mobile.ph-contain { display: block !important; }
:has(> img.ph-contain) > img:is(.img-desktop, .img-mobile):not(.ph-contain) { display: none !important; }
.hero-bg img.ph-contain { display: block !important; }
.hero-bg:has(img.ph-contain) img:not(.ph-contain) { display: none !important; }

/* ---------- Local photo editor (only appears on the local server) ---------- */
.ph-toggle {
  position: fixed; left: 20px; bottom: 80px; z-index: 70; display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--edit); color: var(--night); font: 700 14px/1 var(--display); box-shadow: 0 10px 24px -8px rgba(6, 17, 53, .5);
}
.ph-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.editing .ph-toggle { background: var(--navy); color: var(--white); }
.ph-ctl { position: absolute; z-index: 5; top: 16px; right: 16px; display: none; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.editing .ph-ctl { display: flex; }
.hero > .ph-ctl { top: 20px; right: 20px; }
.hero > .ph-ctl + .ph-ctl { top: 104px; }
.split-media > .ph-ctl + .ph-ctl { top: 100px; }
.ph-ctl button, .ph-ctl label {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer;
  font: 700 13.5px/1 var(--display); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5);
}
.ph-ctl label { background: var(--edit); color: var(--night); }
.ph-ctl button { background: rgba(6, 17, 53, .85); color: var(--white); }
.ph-ctl .ph-focus-btn { background: var(--white); color: var(--night); }
.ph-ctl input { display: none; }
.ph-ctl .ph-name { flex-basis: 100%; text-align: right; font: 700 12px/1.3 var(--sans); color: var(--white); text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.editing img[data-slot] { outline: 3px dashed var(--edit); outline-offset: -3px; }
.ph-busy { opacity: .5; transition: opacity .2s; }
.ph-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 80; translate: -50% 20px; opacity: 0; pointer-events: none;
  padding: 12px 18px; border-radius: 12px; background: var(--night); color: var(--white); font-size: 14px; font-weight: 600; transition: .3s var(--ease);
}
.ph-toast.show { opacity: 1; translate: -50% 0; }
img.ph-contain { object-fit: contain !important; transform: none !important; animation: none !important; background: #0C0F26; }
.hero.ph-focusing .hero-in, .ph-focusing > .ph-ctl { visibility: hidden; }
.hero.ph-focusing + .stats-wrap { visibility: hidden; }
.hero.ph-focusing::before, .hero.ph-focusing::after { opacity: 0; }
.ph-focus { position: absolute; inset: 0; z-index: 60; }
.ph-stage { position: absolute; cursor: crosshair; touch-action: none; outline: 2px solid rgba(255, 255, 255, .6); }
.ph-target { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid var(--edit); background: rgba(244, 196, 0, .18); box-shadow: 0 0 0 2px rgba(0, 0, 0, .55); cursor: grab; outline: 0; }
.ph-target::before, .ph-target::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; background: var(--edit); }
.ph-target::before { width: 2px; height: 64px; }
.ph-target::after { width: 64px; height: 2px; }
.ph-target:focus-visible { border-color: var(--white); }
.ph-focus-bar { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; width: max-content; max-width: calc(100% - 24px); padding: 10px 12px; border-radius: 14px; background: rgba(6, 17, 53, .92); color: var(--white); font: 600 13px/1.3 var(--sans); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.ph-focus-bar span { flex: 1 1 220px; }
.ph-focus-bar button { padding: 9px 13px; border: 0; border-radius: 9px; cursor: pointer; font: 700 13px/1 var(--display); background: rgba(255, 255, 255, .14); color: var(--white); }
.ph-focus-bar button[data-act="save"] { background: var(--edit); color: var(--night); }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1180px) {
  .tb-offer { display: none; }
  .menu > li > a:not(.btn), .drop-btn { padding: 10px 10px; font-size: 14.5px; }
  .brand-logo { height: 46px; }
  .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 4px; }
  .stats li { grid-column: span 2; }
  .stats li:nth-child(n+4) { grid-column: span 3; } /* 3 + 2, both rows full width */
  .stats li:nth-child(4)::before { display: none; }
  .promise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Desktop: menu aligned right; the Call 24/7 button lives only in the mobile drawer */
@media not all and (max-width: 1020px) {
  .nav { display: grid; grid-template-columns: auto 1fr; }
  .nav .menu { grid-column: 2; justify-self: end; }
  .menu > li:has(> a.btn) { display: none; }
}

@media (max-width: 1020px) {
  .brand-logo { height: 42px; }
  .burger { display: grid; }
  .nav { gap: 12px; }
  .menu {
    position: fixed; inset: 0 0 0 auto; z-index: 1; width: min(380px, 88vw); flex-direction: column; align-items: stretch; gap: 2px;
    padding: 96px 20px 28px; overflow-y: auto; background: linear-gradient(180deg, #0B2E86 0%, #0A1A52 55%, var(--night) 100%); border-left: 1px solid rgba(255, 255, 255, .14); box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .6);
    transform: translateX(105%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s linear .35s;
  }
  .nav-open .menu { transform: none; visibility: visible; transition: transform .35s var(--ease), visibility 0s; }
  body.nav-open::before { content: ""; position: fixed; inset: 0; z-index: 45; background: rgba(6, 17, 53, .42); }
  .menu > li > a:not(.btn), .drop-btn { width: 100%; justify-content: space-between; padding: 15px 14px; border-radius: 12px; font-size: 17px; }
  .drop-menu { position: static; display: none; width: auto; padding: 2px 0 8px 6px; border: 0; background: none; box-shadow: none; opacity: 1; visibility: inherit; translate: none !important; }
  .menu > li + li { border-top: 1px solid rgba(255, 255, 255, .06); }
  .menu .drop-menu a { color: rgba(255, 255, 255, .86); }
  .menu .drop-menu a:hover { color: var(--white); background: rgba(255, 255, 255, .08); }
  .menu .drop-menu i { background: rgba(255, 255, 255, .1); }
  .menu .drop-menu i svg { stroke: var(--white); }
  .menu .drop-menu a:hover i { background: var(--blue); }
  .menu .drop-menu a:hover i svg { stroke: var(--white); }
  .drop-menu::before { display: none; }
  .drop.open .drop-menu { display: block; }
  .drop:hover .drop-btn svg { transform: none; }
  .drop.open .drop-btn svg { transform: rotate(180deg); }
  .menu .btn { width: 100%; margin-top: 14px; }

  .hero .hero-in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "crumbs" "eyebrow" "title" "lead" "call" "card";
    grid-template-rows: none;
    padding: 68px 0 144px;
  }
  .hero.hero-page .hero-in { padding: 46px 0 68px; }
  .hero .hero-in .hero-card { justify-self: start; width: 100%; max-width: 640px; margin-top: 38px; }
  .hero::before { background: radial-gradient(600px 380px at 0% 100%, rgba(0, 113, 230, .3), transparent 70%), linear-gradient(180deg, rgba(6, 17, 53, .9) 0%, rgba(6, 17, 53, .82) 50%, rgba(6, 17, 53, .94) 100%); }

  .split, .split.flip, .areas, .about, .faq { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .split.flip .split-media { order: 0; }
  .split-media { max-width: 640px; }
  .faq-side { position: static; }
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .rail::before { display: none; }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .f-top { grid-template-columns: 1fr 1fr; }
  .svc-grid, .cross-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .step > div:first-child::after { display: none; }
  .checklist { grid-template-columns: minmax(0, 1fr); }
  .checkpanel { padding: 42px 30px; }
}
@media (min-width: 600px) and (max-width: 1020px) {
  .hero .hero-in .hc-list { grid-template-columns: 1fr 1fr; column-gap: 24px; }
}

/* Phones (767px and under): no topbar, a Call now pill beside the burger,
   and the hero photo becomes a clear band across the top */
@media not all and (max-width: 767px) { .nav-call { display: none !important; } }
@media (max-width: 767px) {
  html { scroll-padding-top: 100px; }
  .site-header .topbar { display: none; }
  .nav-call {
    position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 46px; margin-left: auto; padding: 0 18px;
    border-radius: 999px; color: var(--blue-2); text-decoration: none; font: 700 15.5px/1 var(--display);
    background: var(--white); box-shadow: 0 8px 20px -8px rgba(2, 8, 32, .5);
  }
  .nav-call svg { width: 18px; height: 18px; fill: currentColor; }

  .hero-bg .hero-img-desktop { display: none; }
  .hero-bg .hero-img-mobile { display: block; }
  img.img-desktop { display: none !important; }
  img.img-mobile { display: block !important; }
  img.img-desktop.ph-contain { display: block !important; }

  .hero .hero-bg { bottom: auto; height: 250px; }
  .hero.ph-focusing .hero-bg { bottom: auto; height: 300px; }
  .hero.ph-focusing > .ph-focus { bottom: auto; height: 420px; }
  .hero::before { background: linear-gradient(180deg, rgba(6, 17, 53, .05) 0, rgba(6, 17, 53, .2) 120px, rgba(6, 17, 53, .72) 172px, rgba(6, 17, 53, .94) 214px, var(--night) 250px); }
  .hero .hero-in { padding: 206px 0 124px; }
  .hero.hero-page .hero-in { padding: 200px 0 52px; }
}

@media (max-width: 680px) {
  body { font-size: 16.5px; }
  .wrap, .container, .wrap-wide { width: calc(100% - 32px); }
  .nav { min-height: 70px; }
  .brand-logo { height: 38px; }
  .section { padding: 76px 0; }
  h2, .h2, .h-lg { font-size: clamp(28px, 7.6vw, 34px); }
  .lead { font-size: 17.5px; }
  .sec-head { margin-bottom: 36px; }
  .head-c { margin-bottom: 40px; }
  .btn, .btn-primary { white-space: normal; text-align: center; line-height: 1.25; }

  .hero .crumbs { margin-bottom: 16px; }
  .hero .hero-in .eyebrow { font-size: 12.5px; margin-bottom: 14px; }
  .hero .hero-in h1 { font-size: clamp(34px, 9.4vw, 42px); line-height: 1.04; }
  .hero.hero-page .hero-in h1 { font-size: clamp(30px, 8.4vw, 38px); }
  .hero .hero-in .hero-lead { margin-top: 16px; font-size: 16.5px; }
  .hero .hero-in .hero-ctas { margin-top: 24px; gap: 14px; }
  .hero .hero-in .hero-ctas .btn { flex: 1 1 100%; }
  .hero .hero-in .hero-ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; width: 100%; padding: 0; border-left: 0; font-size: 14.5px; }
  .hero .hero-in .hero-card { margin-top: 28px; padding: 22px 20px; }
  .hero .hero-in .hero-card::before { left: 20px; right: 20px; }
  .hc-seal { width: 44px; height: 44px; }
  .hc-seal svg { width: 22px; height: 22px; }
  .hc-top b { font-size: 22px; }
  .hc-list { margin-top: 16px; padding-top: 16px; row-gap: 10px; font-size: 14.5px; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px; border-radius: 20px; }
  .stats li, .stats li:nth-child(n+4) { grid-column: auto; }
  .stats li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 12px; }
  .stats li::before { display: none; }
  .stats li:last-child { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .st-ic { width: 44px; height: 44px; border-radius: 12px; }
  .stats b { white-space: normal; font-size: 16.5px; }

  .accred { padding: 48px 0 52px; }
  .accred h2 { font-size: 12.5px; max-width: 30ch; }
  .accred-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .acc { padding: 7px 12px 7px 7px; font-size: 13.5px; text-align: left; border-radius: 16px; }
  .acc i { width: 30px; height: 30px; }
  .acc:last-child { grid-column: 1 / -1; justify-self: center; }

  .svc-grid, .cross-grid, .steps, .pc-grid, .promise, .f-top { grid-template-columns: minmax(0, 1fr); }
  .svc-body { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 22px 22px 6px; }
  .svc-ic { width: 48px; height: 48px; margin: 0; border-radius: 14px; }
  .svc-ic svg { width: 23px; height: 23px; }
  .svc-card h3 { margin: 0; font-size: 19px; }
  .svc-card p { grid-column: 1 / -1; margin-top: 12px; }
  .card-bar { padding: 4px 22px 22px; }

  .split + .split { margin-top: 76px; }
  .split-media .frame { border-radius: 20px; }
  .ticks { grid-template-columns: minmax(0, 1fr); gap: 10px; }

  .section-navy { margin-inline: 8px; border-radius: 24px; }
  .rail { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .rail > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .rail-dot { width: 44px; height: 44px; margin: 6px 0 0; font-size: 15px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 5px rgba(0, 113, 230, .2); }
  .rail > li:last-child .rail-dot { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 5px rgba(124, 196, 255, .2), 0 0 24px rgba(124, 196, 255, .45); }
  .rail-card { padding: 20px; }
  .rail > li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 56px; bottom: -18px; width: 2px; border-radius: 2px; pointer-events: none; background: linear-gradient(180deg, rgba(124, 196, 255, .45), rgba(124, 196, 255, .12)); }
  .rail-foot { padding: 24px; }
  .rail-foot .btn { flex: 1 1 100%; }
  .rail-foot::after { right: 8px; top: 30px; width: 80px; height: 112px; translate: none; }

  .area-cta { gap: 14px; padding: 18px; }
  .area-cta i { width: 42px; height: 42px; }
  .area-cta i svg { width: 21px; height: 21px; }
  .area-cta b { font-size: 16.5px; }
  .about-stats { gap: 8px; }
  .about-stats div { padding: 14px 10px; }
  .about-stats b { font-size: 24px; }
  .about-card { padding: 0 22px 8px; }
  .about-card h3 { margin: 0 -22px 4px; padding: 20px 22px; }
  .facts li, .fact-list li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .fact-list { padding: 8px 22px; }

  .promise li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding: 20px; }
  .promise li::before { grid-row: span 2; margin: 0; }
  .promise b { margin-bottom: 4px; }

  .faq-q { padding: 20px 0; font-size: 16.5px; }
  .faq-a p { padding-right: 0; }
  .faq-q .ind { width: 34px; height: 34px; }

  .contact { border-radius: 24px; }
  .contact-info, .form { padding: 36px 22px; }
  .f-grid { grid-template-columns: minmax(0, 1fr); }

  .checkpanel { padding: 32px 20px; border-radius: 24px; }
  .checklist li { padding: 18px; }
  .job-photo { aspect-ratio: 4 / 3; border-radius: 20px; }
  .cta-band { padding: 64px 0; }
  .cta-actions, .tel-big { width: 100%; }
  .cta-band::before { right: -40px; width: 180px; height: 250px; }

  .footer { padding-top: 64px; }
  .f-top { gap: 36px; }
  .f-bar { margin-top: 48px; }
}
@media (max-width: 400px) {
  .brand-logo { height: 34px; }
  .nav-call { width: 46px; padding: 0; justify-content: center; }
  .nav-call span { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .rv-up, .js .reveal { opacity: 1; translate: none; }
  .hero .hero-bg img { transform: none !important; }
  .hero::after { background-position: 50% 0, 0 0; }
}

/* =====================================================================
   CHARCOAL PAGE (2026-10-22, user: "make the white parts of the page a dark
   charcoal mode colour keep the blue parts at the top as they are")
   Every white or pale surface becomes charcoal. The blue header bars, the
   hero, the navy and blue feature blocks, the buttons and the footer are
   unchanged. Delete this block to return to the light page.
   ===================================================================== */
:root {
  color-scheme: dark;
  --c-page: #1B1C1F; --c-band: #212226; --c-card: #28292E; --c-card-hi: #2F3036; --c-input: #17181B;
  --c-head: #F4F6FA; --c-accent: #5AAEFF;
  --text: #C3C8D2; --muted: #969DAA;
  --tint: var(--c-band); --tint-2: rgba(90, 174, 255, .12);
  --line: #34363C; --line-2: #3D4047; --line-hover: #4A6A9C;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 18px -12px rgba(0, 0, 0, .6);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 44px -24px rgba(0, 0, 0, .75);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .3), 0 40px 80px -36px rgba(0, 0, 0, .85);
  --glow-light: 0 0 6px rgba(90, 174, 255, .22);
  --tick-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%235AAEFF' fill-opacity='.16'/%3E%3Cpath d='M7.2 12.3l3.2 3.2 6.6-7' fill='none' stroke='%235AAEFF' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --promise-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='12' fill='%235AAEFF' fill-opacity='.14'/%3E%3Cpath d='M13 20.5l4.6 4.6L27.5 15' fill='none' stroke='%235AAEFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23C3C8D2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html, body { background: var(--c-page); }
body { color: var(--text); }
h1, h2, h3, h4, strong { color: var(--c-head); }
::selection { background: rgba(90, 174, 255, .3); }
:focus-visible { outline-color: var(--c-accent); }

/* accent text and icons: a lighter electric blue that reads on charcoal */
.hl, .eyebrow, .card-bar, .pc small, .cross-link .go, #areas p a, .about-stats b span, .faq-q:hover { color: var(--c-accent); }
.st-ic svg, .acc i svg, .svc-ic svg, .drop-menu i svg { stroke: var(--c-accent); }
.pc-code svg { fill: var(--c-accent); }
.card-bar .btn-chip { color: var(--c-accent); }
.faq-q .ind::before, .faq-q .ind::after { background: var(--c-accent); }
#areas p a:hover { color: var(--c-head); }

/* surfaces */
#work, #advice { background: var(--c-page); }
#services { background: radial-gradient(1000px 440px at 100% 0%, rgba(0, 128, 252, .08), transparent 62%), var(--c-band); }
.stats, .acc, .svc-card, .about-card, .promise li, .area-cta, .pc, .chip, .contact, .checkpanel, .step-card, .cross-link, .drop-menu { background: var(--c-card); }
.checklist li, .cta-strip, .about-stats div { background: var(--c-band); }
.checklist li:hover { background: var(--c-card-hi); }
.split-media .frame::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.drop-menu { border-color: var(--line); }
.drop-menu a:hover { background: var(--c-card-hi); color: var(--c-head); }

/* text that was navy on white */
.stats b, .acc, .ticks li, .about-stats b, .facts li b, .promise b, .area-cta b, .pc-code, .chip, .faq-q, .field label, .checklist b, .drop-menu a, .form-msg { color: var(--c-head); }
.facts li span, .promise span, .cross-link p, .step-card p { color: var(--text); }

/* form fields */
.field input, .field select, .field textarea { background-color: var(--c-input); border-color: var(--line-2); color: var(--c-head); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #4C505A; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-accent); box-shadow: 0 0 0 4px rgba(90, 174, 255, .18); }

/* Green ticks everywhere (user, 2026-10-22: "make all of these on the page green like the top of
   the home page"): the split lists, the service-page checklists, the promise tiles and the two
   ticks beside the hero call button all use the hero card's green tick. */
:root { --promise-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='12' fill='%2322C55E'/%3E%3Cpath d='M13 20.5l4.6 4.6L27.5 15' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --promise-tile-on: var(--promise-tile); }
.ticks li::before, .checklist li::before { background-image: var(--tick-green); }
.hero .hero-ticks svg { width: 19px; height: 19px; background: var(--tick-green) center / 100% no-repeat; border-radius: 50%; }
.hero .hero-ticks svg path { display: none; }

/* Logo: the slightest glow (user, 2026-10-22: "add the slightest amount of glow to this too"). It sits
   on the wrapper, so the lettering and the rumbling bolt glow together, header and footer. */
.brand-mark { filter: drop-shadow(0 0 3px rgba(150, 205, 255, .32)); }

/* Hero headline: a slight glow (user, 2026-10-22: "add a slight glow to this text"). It is the one
   title allowed a glow and beats the no-glow rule below by specificity, so that rule can stay last. */
.hero .hero-in h1 { text-shadow: 0 0 2px rgba(255, 255, 255, .18), 0 0 22px rgba(124, 196, 255, .32) !important; }
.hero .hero-in h1 .hl { text-shadow: 0 0 2px rgba(124, 196, 255, .35), 0 0 24px rgba(124, 196, 255, .5) !important; }

/* No glow on any other title (user request 2026-10-08). Keep this rule LAST so later passes cannot reintroduce it. */
h1, h2, h3, h4, h5, h1 *, h2 *, h3 *, h4 *, h5 *, .h2, .h2 *, .h-lg, .h-lg *, .h-md, .h-md * { text-shadow: none !important; }