/*
Theme Name: Photuris
Theme URI: https://photuris.co.uk
Author: Photuris
Description: Custom theme for Photuris Fire & Security — Apple-inspired aesthetic with Syne + DM Sans.
Version: 1.0.0
License: GPL v2 or later
Text Domain: photuris
*/

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

/* ─── TOKENS ─── */
:root {
  color-scheme: light dark;
  --bg:      #ffffff;
  --bg-2:    #f5f5f7;
  --bg-3:    #e8e8ed;
  --text-1:  #1d1d1f;
  --text-2:  #6e6e73;
  --text-3:  #aeaeb2;
  --nav-bg:  rgba(255,255,255,0.82);
  --divide:  rgba(0,0,0,0.08);
  --blue:    #005CB9;
  --amber:   #FFB71B;
  /* Liquid-glass tokens — translucent surface, soft inner highlight, subtle
   * outer shadow. Used by .glass utility and applied to existing surfaces
   * (nav when solid, cards, hiring badge, ghost buttons, enquiry panel). */
  --glass-bg:        rgba(255,255,255,0.50);
  --glass-bg-strong: rgba(255,255,255,0.70);
  --glass-bg-soft:   rgba(255,255,255,0.32);
  --glass-border:    rgba(255,255,255,0.55);
  --glass-blur:      saturate(190%) blur(32px);
  --glass-blur-soft: saturate(150%) blur(18px);
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,0.7);
  --glass-shadow:    0 10px 40px -16px rgba(0,0,0,0.18);
  --glass-shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.22);
}
@media (prefers-color-scheme: dark) {
  :root {
    /* Layered greys instead of flat black — every step up the stack
     * gets a touch lighter so sections, cards and chips have natural
     * depth against each other. */
    --bg:      #0e0e12;
    --bg-2:    #18181d;
    --bg-3:    #24242a;
    --text-1:  #f5f5f7;
    --text-2:  #a3a3aa;
    --text-3:  #6b6b73;
    --nav-bg:  rgba(14,14,18,0.82);
    --divide:  rgba(255,255,255,0.10);
    --glass-bg:        rgba(28,28,30,0.50);
    --glass-bg-strong: rgba(28,28,30,0.72);
    --glass-bg-soft:   rgba(28,28,30,0.32);
    --glass-border:    rgba(255,255,255,0.10);
    --glass-highlight: inset 0 1px 0 rgba(255,255,255,0.07);
    --glass-shadow:    0 12px 44px -16px rgba(0,0,0,0.6);
    --glass-shadow-lg: 0 28px 70px -20px rgba(0,0,0,0.75);
  }
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  /* iOS: keep type at 100% on rotate; tap highlight off so taps don't flash blue. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* Cancel the full 6rem of section top padding when jumping to anchored
 * sections so the heading sits just below the nav, not 184px below the
 * viewport top (88px scroll-padding + 96px section padding). */
#services, #sectors, #accreditations, #cases, #stats {
  scroll-margin-top: -5.5rem;
}
/* Admin bar pushes the nav down — keep anchor jumps clear of it too. */
body.admin-bar { scroll-padding-top: 120px; }
@media (max-width: 600px) { body.admin-bar { scroll-padding-top: 88px; } }
body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text-1);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }

/* ─── PLATFORM POLISH ──────────────────────────────────────────────
 * Tasteful platform-respect rules: dvh for hero (so iOS Safari toolbar
 * doesn't make the hero clip), safe-area insets so the nav and footer
 * clear the iPhone notch / home indicator, hover effects gated to
 * actual hover devices, and a couple of accessibility fallbacks. */

/* iOS Safari dynamic viewport — only takes effect on supporting browsers. */
@supports (height: 100dvh) {
  #hero { height: 100dvh; }
}

/* Cross-page View Transitions API — Chrome 126+, Safari 18.2+. Older
 * browsers fall through with normal page navigation. The default cross-fade
 * is honoured; we just opt the navigation in. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .35s; }


/* Reduced motion: cut the long-running marquee + fadeUp + reveal. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, [class^="hero-"], .scard, .case-card { opacity: 1 !important; transform: none !important; }
}

/* Reduced transparency: drop backdrop blur (which can be heavy and
 * disorienting). Apple supports this user preference natively. */
@media (prefers-reduced-transparency: reduce) {
  .nav-emergency,
  #nav.solid,
  body.has-no-hero #nav,
  .glass,
  .enquiry-dialog::backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Hover gating: only apply :hover transforms on devices that actually
 * have a fine pointer with hover capability. Stops touch devices
 * getting stuck-on hover state after a tap. */
@media (hover: none) {
  .scard:hover,
  .case-card:hover,
  .spec-card:hover,
  .office-card:hover,
  .accred-item:hover,
  .contact-card:hover,
  .partner-stack-card:hover {
    transform: none !important;
  }
}

/* Safe-area insets: keep the nav clear of the iPhone notch in landscape,
 * keep the footer clear of the home indicator in portrait. */
#nav { padding-right: max(24px, env(safe-area-inset-right)); padding-left: max(24px, env(safe-area-inset-left), 5vw); }
#footer, footer { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }


/* ─── LIQUID GLASS ─────────────────────────────────────────────────
 * Tasteful translucent surface treatment — applied to the surfaces
 * that benefit most from it (nav, hiring badge, ghost buttons,
 * cards over photos, dialog/panels). The combination of saturated
 * blur + inner top highlight + a soft outer shadow gives the
 * "glass over content" feel without overdoing it.
 *
 * Falls back to the existing solid-ish surfaces when backdrop-filter
 * isn't supported. Browsers that report prefers-reduced-transparency
 * disable the blur via the rule further up. */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}
.glass-strong { background: var(--glass-bg-strong); }

/* Layer the glass treatment onto existing components so nothing has to
 * gain a new class in the markup. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  /* Solid-state nav becomes glass. */
  #nav.solid,
  body.has-no-hero #nav {
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-highlight);
  }
  /* Hiring badge — subtle glass ring around the amber disc. */
  .hero-hiring {
    box-shadow:
      0 14px 32px rgba(0,0,0,.35),
      0 0 0 4px rgba(255,255,255,.18),
      inset 0 1px 0 rgba(255,255,255,.55);
  }
  /* Ghost button on hero */
  .btn-ghost {
    background: rgba(255,255,255,.14);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  }
  /* Card surfaces that already use translucent / bg-2 backgrounds */
  .enquiry-cta,
  .enquiry-panel.is-open .enquiry-panel-inner,
  .contact-card,
  .office-card,
  .spec-card,
  .partner-stack-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-highlight), var(--glass-shadow);
  }
  /* Phone banner */
  .contact-phone-banner {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }
  /* Mega menu */
  .nav-dropdown-menu, .nav-mega {
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-highlight), 0 18px 60px -16px rgba(0,0,0,.25);
  }

  /* Glass only goes on surfaces that genuinely overlay content with
   * variation behind them — photo-backed cards (chips/tags), the nav,
   * floating CTAs, and the partner-stack scroller. Cards that sit on
   * solid section backgrounds (stage / commitment / who / grade / risk
   * / stat / frow / accred-item / dc-feature) keep their original
   * solid styles — glass on flat backgrounds just looks like a faded
   * rectangle. */
  .partner-stack-card {
    background: var(--glass-bg-soft);
    backdrop-filter: var(--glass-blur-soft);
    -webkit-backdrop-filter: var(--glass-blur-soft);
    box-shadow: var(--glass-highlight), var(--glass-shadow);
  }

  /* Pill chips and badges pick up the glass treatment for cohesion.
   * Note: .case-tag is plain coloured text (no pill shape), so it's
   * excluded — applying glass to it bands the background across the
   * whole card. .spec-card-tag is also excluded — its base white pill
   * with hard-coded dark text reads cleanly on photo backdrops in
   * both modes; flipping its bg to glass dark drops contrast in dark
   * mode and makes the labels invisible. */
  .scard-tag,
  .case-card-customer,
  .case-card-arrow,
  .office-copy {
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur-soft);
    -webkit-backdrop-filter: var(--glass-blur-soft);
    box-shadow: var(--glass-highlight);
  }

  /* Form fields — translucent fills with a faint inner highlight so
   * they read as glass panels rather than flat boxes. */
  .contact-form-wrap .wpcf7-form input[type="text"],
  .contact-form-wrap .wpcf7-form input[type="email"],
  .contact-form-wrap .wpcf7-form input[type="tel"],
  .contact-form-wrap .wpcf7-form input[type="url"],
  .contact-form-wrap .wpcf7-form select,
  .contact-form-wrap .wpcf7-form textarea {
    background: var(--glass-bg-soft);
    backdrop-filter: var(--glass-blur-soft);
    -webkit-backdrop-filter: var(--glass-blur-soft);
    box-shadow: var(--glass-highlight);
  }

  /* Footer columns */
  #footer, footer.site-footer, footer {
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }

  /* Stats section — ambient glass band */
  #stats { background: var(--glass-bg-soft); backdrop-filter: var(--glass-blur-soft); -webkit-backdrop-filter: var(--glass-blur-soft); }

  /* Solid buttons get a subtle inner highlight + saturation behind them
   * so they read as glass-on-glass rather than flat fills. */
  .btn-blue, .btn-solid {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 20px -10px color-mix(in srgb, var(--blue) 55%, transparent);
  }

  /* Close button + copy button + nav toggle inherit glass too. */
  .enquiry-panel-close,
  .nav-toggle,
  .office-map-link {
    background: var(--glass-bg-soft);
    backdrop-filter: var(--glass-blur-soft);
    -webkit-backdrop-filter: var(--glass-blur-soft);
    box-shadow: var(--glass-highlight);
  }
}

/* ─── TYPOGRAPHY UTILITIES ─── */
.label {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: .85rem;
}
.title {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.07;
  color: var(--text-1);
}
.body-copy {
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-2);
  margin-top: .9rem;
}

/* ─── LAYOUT ─── */
.section { padding: 6rem clamp(24px, 5vw, 80px); }
.section-sm { padding: 4rem clamp(24px, 5vw, 80px); }
.inner { max-width: 1440px; margin: 0 auto; }
.divide { border-top: 1px solid var(--divide); }

/* ─── CARD INTERACTION DEFAULTS ───
 * Card photos: prevent the OS image-drag affordance so users don't
 * accidentally save the photo when click-and-dragging on a card link.
 * Body text on cards stays selectable — see scroller-only rule below
 * for the cards that genuinely need user-select disabled. */
.scard img,
.case-card img,
.spec-card img,
.partner-stack-card img {
  -webkit-user-drag: none;
  user-drag: none;
}

.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* ─── NON-SELECTABLE: SCROLLING CARDS ONLY ───
 * Horizontally-scrolling carousels (drag-to-pan) need user-select
 * disabled — otherwise the click-and-drag pans the row AND highlights
 * text simultaneously, which looks broken.
 *
 * Every other card on the site keeps text selection enabled so users
 * can copy product names, standards numbers, addresses, etc.
 *
 * Affected scrollers: .spec-scroller (sector pages, drag-pan spec
 * cards) and .partner-stack-scroller (datacentres tech-stack row). */
.spec-scroller .spec-card,
.partner-stack-scroller .partner-stack-card {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ─── NAV ─── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 56px;
  /* Logo keeps the page-edge alignment on the left; the right cluster sits
   * flush to the viewport edge with just a small gutter. */
  padding: 0 24px 0 clamp(24px, 5vw, 80px);
  display: flex; align-items: center;
  transition: background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
/* Logo stays left, the entire right-hand group is pushed flush to the
 * right edge of the nav via `margin-left: auto` on the wrapper. Nav-links,
 * emergency pill and (mobile) hamburger sit together as one right-aligned
 * cluster — no drift, no matter which items are visible. */
.nav-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
}
@media (max-width: 768px) { .nav-right { gap: .5rem; } }
#nav.solid {
  background: var(--nav-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom-color: var(--divide);
}

/* WP admin bar offset so the site nav isn't hidden behind it.
 * WP's own html{margin-top:32px} already pushes the document; we just slide the
 * fixed nav down by the same amount so it sits between the admin bar and the
 * top of the hero (no white strip in between). Do NOT add extra margin to
 * #hero — that creates a visible gap under the admin bar. */
body.admin-bar #nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar #nav { top: 46px; } }
@media (max-width: 600px) { body.admin-bar #nav { top: 0; } }
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo img {
  height: 38px; width: auto;
  opacity: 0;
  filter: brightness(1.5);
  transition: opacity .4s ease, filter .4s ease;
}
/* Inner pages (non-hero) always show logo */
body.has-no-hero .nav-logo img { opacity: 1; }
body.has-no-hero #nav { background: var(--nav-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom-color: var(--divide); }
@media (prefers-color-scheme: light) { #nav.solid .nav-logo img, body.has-no-hero .nav-logo img { filter: none; } }
@media (prefers-color-scheme: dark)  { #nav.solid .nav-logo img, body.has-no-hero .nav-logo img { filter: brightness(1.25); } }

.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }

/* ─── EMERGENCY CALL PILL ───
 * Compact amber pill in the top-right of the nav linking to the 24/7 number.
 * On small screens it collapses to an icon-only circular button so it fits
 * alongside the hamburger without crowding the logo. */
.nav-emergency {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  /* Inverted: solid amber by default, ghost on hover. */
  background: var(--amber);
  border: 1px solid var(--amber);
  color: #1a1a1a;
  text-decoration: none;
  line-height: 1;
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--amber) 60%, transparent);
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.nav-emergency:hover {
  background: color-mix(in srgb, var(--amber) 18%, transparent);
  border-color: color-mix(in srgb, var(--amber) 45%, transparent);
  color: var(--amber);
  transform: translateY(-1px);
  box-shadow: none;
}
.nav-emergency:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.nav-emergency-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.18);
  flex-shrink: 0;
  transition: background .2s ease;
}
.nav-emergency:hover .nav-emergency-icon {
  background: color-mix(in srgb, var(--amber) 28%, transparent);
}
.nav-emergency-text {
  display: inline-flex; flex-direction: column; gap: 2px;
  font-weight: 600;
}
.nav-emergency-tag {
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  opacity: .85;
}
.nav-emergency-num {
  font-size: .8rem; letter-spacing: .01em; font-variant-numeric: tabular-nums;
}

/* Transparent-nav variant (over hero): same inverted logic — lit amber by
 * default, dark glass on hover. */
#nav:not(.solid) .nav-emergency {
  background: var(--amber);
  border-color: var(--amber);
  color: #1a1a1a;
}
#nav:not(.solid) .nav-emergency:hover {
  background: rgba(0,0,0,.32);
  border-color: rgba(255,255,255,.22);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#nav:not(.solid) .nav-emergency-icon { background: rgba(0,0,0,.18); }
#nav:not(.solid) .nav-emergency:hover .nav-emergency-icon { background: rgba(255,255,255,.18); }

.nav-links a {
  font-size: .875rem; font-weight: 400; text-decoration: none;
  transition: color .2s;
}
#nav:not(.solid) .nav-links a { color: rgba(255,255,255,.72); }
#nav:not(.solid) .nav-links a:hover { color: #fff; }
#nav.solid .nav-links a,
body.has-no-hero #nav .nav-links a { color: var(--text-2); }
#nav.solid .nav-links a:hover,
body.has-no-hero #nav .nav-links a:hover { color: var(--text-1); }
.nav-current,
#nav.solid .nav-current,
body.has-no-hero #nav .nav-current { color: var(--amber) !important; }
#nav:not(.solid) .nav-current { color: var(--amber) !important; }

.nav-toggle,
.nav-toggle:hover,
.nav-toggle:active,
.nav-toggle:focus {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none; appearance: none;
}
.nav-toggle {
  display: none;
  cursor: pointer;
  padding: 0; margin: 0;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  font-size: 0; line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:focus-visible { outline: 2px solid currentColor !important; outline-offset: 2px; border-radius: 4px; }
.nav-toggle-icon { display: block; transition: transform .25s ease; pointer-events: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon { transform: rotate(90deg); }
#nav:not(.solid) .nav-toggle { color: #fff; }
#nav.solid .nav-toggle,
body.has-no-hero #nav .nav-toggle { color: var(--text-1); }

/* ─── NAV DROPDOWN ─── */
.nav-dropdown { position: relative; }
.nav-dropdown > a::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 5px;
  vertical-align: middle;
  opacity: .5;
  transition: transform .2s;
}
.nav-dropdown:hover > a::after { transform: rotate(180deg); opacity: 1; }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--nav-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--divide);
  border-radius: 14px; padding: .4rem;
  min-width: 185px;
  opacity: 0; visibility: hidden; pointer-events: none;
  /* Slower open + slower hide so the dropdown doesn't collapse on a brief
   * cursor lapse. 260ms hide delay gives the user a generous window to
   * move between the trigger and the menu without losing it. */
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  transition-delay: 0s, 0s, 0s;
  list-style: none;
  z-index: 300;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
/* Bridge — invisible pad that links the nav trigger to the dropdown so the
 * cursor never leaves a :hover target as it travels straight down. Kept tight
 * to the trigger column to avoid triggering the menu when the cursor is over
 * unrelated nav items. The menu's own hover area handles diagonal travel. */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  height: 18px;
  pointer-events: none;
}
.nav-dropdown:hover::before,
.nav-dropdown:focus-within::before,
.nav-dropdown.is-open::before {
  pointer-events: auto;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
/* Hold-open: when JS sets .is-hide-delay after mouseleave, lengthen the
 * visibility/opacity delay so the menu lingers during the grace window. */
.nav-dropdown.is-hide-delay .nav-dropdown-menu {
  transition-delay: .24s, .24s, .24s;
}
.nav-dropdown-menu li a {
  display: block; padding: .45rem .9rem; border-radius: 8px;
  font-size: .8rem; font-weight: 400;
  color: var(--text-2) !important;
  text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-dropdown-menu li a:hover { background: var(--bg-3); color: var(--text-1) !important; }

/* ── Sectors mega menu — Apple-style 2-column text panel.
 * Floats below the nav with a real gap so it never touches the header bar.
 * When the nav is solid (scrolled / inner pages) it uses a solid surface;
 * when the nav is translucent (over the hero) it matches with a glass panel
 * so the dropdown doesn't look like a white brick on top of the photo. */
.nav-dropdown-menu.nav-mega {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  min-width: 520px;
  max-width: 520px;
  padding: .7rem;
  gap: .15rem;
  border-radius: 18px;
  top: calc(100% + 22px);
  background: var(--bg);
  border: 1px solid var(--divide);
  box-shadow: 0 18px 44px -12px rgba(0,0,0,.18), 0 6px 14px -6px rgba(0,0,0,.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Transparent-nav (over hero) variant — glass panel that reads over dark photos. */
#nav:not(.solid) .nav-dropdown-menu.nav-mega {
  background: rgba(20, 20, 22, .55);
  border-color: rgba(255, 255, 255, .14);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  box-shadow: 0 22px 50px -16px rgba(0, 0, 0, .45), 0 8px 18px -8px rgba(0, 0, 0, .25);
}
#nav:not(.solid) .nav-dropdown-menu.nav-mega li a:hover { background: rgba(255, 255, 255, .08); }
#nav:not(.solid) .nav-dropdown-menu.nav-mega .nav-mega-title { color: #fff !important; }
#nav:not(.solid) .nav-dropdown-menu.nav-mega .nav-mega-sub   { color: rgba(255, 255, 255, .62) !important; }
.nav-dropdown-menu.nav-mega li a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: .65rem .85rem;
  border-radius: 11px;
  white-space: normal;
}
.nav-dropdown-menu.nav-mega li a:hover { background: var(--bg-2); }
.nav-mega-title {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--text-1) !important;
  line-height: 1.2;
}
.nav-dropdown-menu.nav-mega li a.nav-current .nav-mega-title { color: var(--amber) !important; }
.nav-mega-sub {
  display: block;
  font-size: .72rem;
  font-weight: 400;
  color: var(--text-3) !important;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .nav-dropdown-menu.nav-mega {
    grid-template-columns: 1fr;
    min-width: 0; max-width: none;
    padding: 0; gap: 0;
    border: none; box-shadow: none; background: transparent;
  }
  .nav-dropdown-menu.nav-mega li a { padding: .5rem 0; gap: 1px; }
  .nav-mega-title { font-size: .95rem; }
  .nav-mega-sub { display: none; }
}

/* ─── HERO (home) ─── */
#hero {
  position: relative; height: 100vh; min-height: 640px;
  display: flex; align-items: center; justify-content: flex-start;
  text-align: left; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: -50% 0;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  will-change: transform, opacity;
}
/* Homepage hero photos (outdoor equipment / dusk skies) read better
 * anchored to the top — the focal subject is usually high in frame. */
#hero:not(.hero-dc) .hero-bg { background-position: center top; }
/* Dark-mode swaps hero-home background (light / dark variants provided inline). */
@media (prefers-color-scheme: dark) {
  #heroBg[style*="--hero-dark"] { background-image: var(--hero-dark) !important; }
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.18) 0%, rgba(0,0,0,.28) 50%, rgba(0,0,0,.42) 100%);
}
/* Stronger scrim for heroes whose photo is bright/daylight (e.g. public-spaces)
 * so white text + amber accent stay readable across the whole hero. */
.hero-scrim.hero-scrim--dark {
  background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.7) 100%);
}
#hero.hero-dc .hero-bg { inset: 0; background-position: center; }
#hero.hero-dc .hero-scrim {
  background: linear-gradient(105deg, rgba(0,4,16,.55) 0%, rgba(0,8,28,.38) 55%, rgba(0,0,0,.12) 100%);
}
.hero-body {
  position: relative; z-index: 2;
  padding: 0 clamp(24px, 8vw, 96px);
  max-width: 700px;
  will-change: opacity, transform;
}
#hero.hero-dc .hero-body { padding: 0 clamp(48px, 10vw, 120px); max-width: 820px; }
.hero-logo {
  position: absolute;
  top: 80px;
  left: max(24px, 8vw);
  z-index: 2;
  opacity: 0; transform: translateY(12px);
  animation: fadeUp .7s ease .1s forwards;
  display: inline-block;
  text-decoration: none;
  border-radius: 6px;
}
.hero-logo:focus-visible {
  outline: 2px solid rgba(255,255,255,.8);
  outline-offset: 6px;
}
#hero.hero-dc .hero-logo { left: max(48px, 10vw); }
.hero-logo img {
  height: 88px; width: auto;
  filter: brightness(0) invert(1);
}
@media (max-width: 600px) { .hero-logo img { height: 64px; } }
/* Landscape phone: hero-body is vertically centred in a 640px min-height
 * hero, so the centred label/h1 ends up colliding with the absolute-positioned
 * .hero-logo wordmark at top:80px. The site nav already shows the logo at
 * this size, so hide the in-hero wordmark to keep the hero text legible. */
@media (max-height: 600px) and (orientation: landscape) {
  .hero-logo { display: none; }
  #hero { min-height: 480px; height: auto; padding: 96px 0 64px; }
}

/* "We're hiring" sticker — top-right of hero, conditional on open Job Manager listings.
 * Rotated circular badge in amber, gentle wobble on hover. Hidden if no open roles. */
.hero-hiring {
  position: absolute;
  top: max(80px, 9vh); right: max(24px, 6vw);
  z-index: 3;
  width: clamp(120px, 13vw, 160px); height: clamp(120px, 13vw, 160px);
  border-radius: 50%;
  background: var(--amber);
  color: #000;
  text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  transform: rotate(-9deg);
  box-shadow: 0 14px 32px rgba(0,0,0,.35), 0 0 0 4px rgba(255,255,255,.06);
  opacity: 0;
  animation: fadeUp .7s ease .55s forwards;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
  will-change: transform;
}
.hero-hiring::before {
  content: '';
  position: absolute; inset: 8px;
  border: 1.5px dashed rgba(0,0,0,.35);
  border-radius: 50%;
  pointer-events: none;
  transform-origin: 50% 50%;
  opacity: 0;
  animation: hiringDashSpin 1.2s cubic-bezier(.22,.9,.32,1) .45s forwards;
}
@keyframes hiringDashSpin {
  from { transform: rotate(-360deg); opacity: 0; }
  to   { transform: rotate(0deg);    opacity: 1; }
}
.hero-hiring:hover { transform: rotate(-3deg) scale(1.06); box-shadow: 0 18px 40px rgba(0,0,0,.42), 0 0 0 4px rgba(255,255,255,.1); }
.hero-hiring:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.hero-hiring-inner {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: 0 .8rem;
  line-height: 1;
}
.hero-hiring-top {
  font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
}
.hero-hiring-big {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  font-weight: 800; letter-spacing: -.02em;
  line-height: .95;
}
.hero-hiring-bot {
  font-size: .58rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  margin-top: .25rem;
  opacity: .8;
}
@media (max-width: 720px) {
  .hero-hiring { top: 24px; right: 18px; width: 96px; height: 96px; }
  .hero-hiring-top { font-size: .58rem; letter-spacing: .12em; }
  .hero-hiring-big { font-size: 1.25rem; }
  .hero-hiring-bot { font-size: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-hiring { animation: none; opacity: 1; transition: none; }
  .hero-hiring::before { animation: none; opacity: 1; transform: none; }
  .hero-hiring:hover { transform: rotate(-9deg); }
}

.hero-label {
  font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: 1.1rem;
  /* Force a single line at normal widths so "SECTOR · SUBHEAD" doesn't
   * drop the second half onto its own line. Falls back to balanced wrap
   * on narrow mobile widths where there genuinely isn't room. */
  white-space: nowrap;
  /* Subtle shadow so the eyebrow stays legible over bright hero shots. */
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(12px);
  animation: fadeUp .7s ease .25s forwards;
}
@media (max-width: 560px) {
  .hero-label {
    white-space: normal;
    text-wrap: balance;
    font-size: .62rem;
    letter-spacing: .18em;
  }
}
.hero-h1 {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(2.75rem, 7.5vw, 5.75rem);
  font-weight: 700;
  line-height: 1.04; letter-spacing: -.02em; color: #fff;
  margin-bottom: 1.4rem;
  opacity: 0; transform: translateY(16px);
  animation: fadeUp .8s ease .4s forwards;
}
#hero.hero-dc .hero-h1 { font-size: clamp(2.5rem, 6.5vw, 5rem); }
.hero-h1 em { color: var(--amber); font-style: normal; }
.hero-sub {
  /* Lifted from .65 → .92 alpha + 400 weight so the sub reads cleanly
   * against varied hero photography. Drop shadow gives depth so the
   * text holds against bright skylines without darkening the photo. */
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 400;
  color: rgba(255,255,255,.92);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 0 2.5rem;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(12px);
  animation: fadeUp .8s ease .55s forwards;
}
#hero.hero-dc .hero-sub { max-width: 460px; }
.hero-btns {
  display: flex; gap: 12px; justify-content: flex-start; flex-wrap: wrap;
  opacity: 0; transform: translateY(10px);
  animation: fadeUp .8s ease .7s forwards;
}
@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* Page-gutter padding has been changed from `max(24px, 5vw)` to
 * `clamp(24px, 5vw, 80px)` at every source rule, capping the gutter
 * at 80px so it stops growing on ultrawide screens. The big-screen
 * scaling rules (alignment to centred .inner edge, hero text shift,
 * homepage grid widening) live at the end of the file so they always
 * win the cascade — see the bottom of style.css. */

/* ── Scroll-driven hero parallax ──────────────────────────────────
 * Modern browsers (Chrome/Edge 115+, Safari 26+) get a smooth,
 * compositor-driven parallax — the bg drifts slower than scroll, the
 * hero contents fade and lift, all without a single JS scroll listener
 * fighting the main thread. Older browsers see a static hero. */
@supports (animation-timeline: scroll()) {
  .hero-bg {
    animation: heroBgPara linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100vh;
  }
  #hero:not(.hero-dc) .hero-bg {
    animation-name: heroBgParaHome;
  }
  .hero-body {
    animation: heroBodyPara linear both;
    animation-timeline: scroll(root);
    animation-range: 0 60vh;
  }
}
/* Sector heroes (.hero-dc) — bg has inset:0, parallaxes faster. */
@keyframes heroBgPara {
  to { transform: translate3d(0, 88px, 0); }
}
/* Homepage hero — bg has inset:-50% 0, slower drift + slight zoom. */
@keyframes heroBgParaHome {
  to { transform: translate3d(0, 220px, 0) scale(1.08); }
}
@keyframes heroBodyPara {
  to { opacity: 0; transform: translate3d(0, -56px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero-body { animation: none !important; }
}


/* ─── BUTTONS ─── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: .75rem 1.75rem; border-radius: 1440px;
  font-size: .9rem; font-weight: 500; text-decoration: none;
  letter-spacing: .01em;
  transition: opacity .2s, transform .15s;
}
.btn:hover { opacity: .82; transform: translateY(-1px); }
.btn-blue  { background: var(--blue); color: #fff; }
.btn-ghost { background: rgba(255,255,255,.1); color: #fff; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.22); }
.btn-solid { background: var(--blue); color: #fff; }

/* Scroll cue */
.hero-cue {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0; animation: fadeUp .8s ease 1.1s forwards;
}
#hero.hero-dc .hero-cue { left: max(48px, 10vw); transform: none; }
.hero-cue-line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
  animation: cueAnim 2s ease-in-out infinite;
}
@keyframes cueAnim {
  0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
  50%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; }
}

/* ─── CUSTOMERS STRIP ─── */
#customers {
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.07);
  border-bottom: 1px solid rgba(0,0,0,.07);
  padding: 3.5rem 0;
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  #customers { background: #0a0a0a; border-color: rgba(255,255,255,.07); }
}
.customers-label {
  text-align: center;
  font-size: .8rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 2.5rem;
  padding: 0 clamp(24px, 5vw, 80px);
}
.marquee-wrap { position: relative; overflow: hidden; }
.marquee-wrap::before,
.marquee-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 160px; z-index: 2; pointer-events: none;
}
.marquee-wrap::before { left:  0; background: linear-gradient(to right, #fff, transparent); }
.marquee-wrap::after  { right: 0; background: linear-gradient(to left,  #fff, transparent); }
@media (prefers-color-scheme: dark) {
  .marquee-wrap::before { background: linear-gradient(to right, #0a0a0a, transparent); }
  .marquee-wrap::after  { background: linear-gradient(to left,  #0a0a0a, transparent); }
}
.marquee-track {
  display: flex; align-items: center;
  width: max-content;
  animation: marquee 90s linear infinite;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-item {
  flex-shrink: 0;
  width: 260px; height: 200px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 40px;
}
.marquee-item img {
  max-height: 160px; max-width: 200px;
  width: auto; height: auto;
  object-fit: contain;
}
/* NHS logo is tall/square — fills the box and reads as larger than the
 * squat horizontal logos around it. Constrain it to match optical weight. */
.marquee-item img[alt="NHS Property Services"] {
  max-height: 96px; max-width: 120px;
}

/* ─── SERVICES ─── */
#services { background: var(--bg); }
.services-head { margin-bottom: 3rem; }
.services-head .title { font-size: clamp(2rem, 4vw, 3rem); max-width: 640px; }

.disc-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  margin-top: 2.5rem;
}
.disc-grid .scard { grid-column: span 2; }
.scard-sm { aspect-ratio: 1/1; }
.disc-grid .scard .scard-body { padding: 14px; }
.disc-grid .scard .scard-tag {
  font-size: .52rem;
  letter-spacing: .12em;
  padding: .22rem .5rem;
  margin-bottom: 0;
}
.disc-grid .scard .scard-title {
  font-size: clamp(.82rem, 1.05vw, .98rem);
  letter-spacing: -.01em; line-height: 1.2;
}

/* ─── SECTORS / SCARDS ─── */
#sectors { background: var(--bg-2); }
#sectors .services-head,
#sectors .reveal:first-child { margin-bottom: 1rem; }
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
/* Homepage sectors grid — 10 cards as a 5×2. Drops cleanly down at narrower widths.
 * Less-portrait aspect, more breathing room and slightly tighter title type so the
 * denser layout doesn't read as crowded. */
.card-grid--sectors { grid-template-columns: repeat(5, 1fr); gap: 18px; }
.card-grid--sectors .scard { aspect-ratio: 4/5; border-radius: 18px; }
.card-grid--sectors .scard-title { font-size: clamp(1.05rem, 1.3vw, 1.25rem); }
.card-grid--sectors .scard-desc { font-size: .78rem; line-height: 1.5; }
.card-grid--sectors .scard-body { padding: 18px 18px 20px; }
.scard {
  position: relative; border-radius: 22px; overflow: hidden;
  aspect-ratio: 3/4;
  background: #141414;
  /* Default non-interactive. Linked cards opt back in via inline style="cursor:pointer"
   * (set by front-page.php when a link is present) or the [onclick] / anchor rules
   * below. The home-page service disc-grid tiles have no link, so they stay default. */
  cursor: default;
  transition: transform .45s cubic-bezier(.25,.46,.45,.94), box-shadow .45s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 40px -24px rgba(0,0,0,.35);
}
a.scard,
.scard[onclick] {
  cursor: pointer;
}
.scard:hover {
  transform: translateY(-3px) scale(1.012);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 28px 60px -28px rgba(0,0,0,.55);
}
.scard-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .88;
  transition: opacity .55s ease, transform .9s cubic-bezier(.25,.46,.45,.94);
}
.scard:hover .scard-photo { opacity: .98; transform: scale(1.06); }
.scard-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.08) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  transition: opacity .35s ease;
}
.scard-body {
  position: relative; z-index: 2;
  padding: 22px 22px 24px; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
}
.scard-tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: .28rem .6rem;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 1440px;
  font-size: .58rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
  line-height: 1;
  margin: 0;
}
.scard-title {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.12; color: #fff;
}
.scard-foot {
  display: flex; flex-direction: column; gap: 10px;
  transform: translateY(4px);
  transition: transform .35s ease;
}
.scard:hover .scard-foot { transform: none; }
.scard-desc {
  font-size: .82rem; font-weight: 400;
  color: rgba(255,255,255,.88);
  line-height: 1.55;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.scard-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .78rem; font-weight: 500;
  color: #fff;
  text-decoration: none;
  letter-spacing: .01em;
  transition: gap .2s ease, color .2s ease;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  align-self: flex-start;
}
.scard:hover .scard-link { gap: 8px; color: var(--amber); }

/* ─── FEATURES ─── */
/* The wrapper caps the row on ultra-wide displays so the photos don't stretch
 * to absurd widths, but otherwise the row stays edge-to-edge — internal
 * padding lives inside .ftext, never on the wrapper, so the image always
 * bleeds to the wrapper edge. */
.features-wrap {
  max-width: 1640px;
  margin: 0 auto;
}
.features-wrap + .features-wrap .frow { border-top: 0; }
.frow {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 480px;
  border-top: 1px solid var(--divide);
  align-items: stretch;
}
@media (max-width: 900px) { .frow { height: auto; } }
.frow.flip { direction: rtl; }
.frow.flip > * { direction: ltr; }
.ftext {
  background: var(--bg-2);
  padding: 4rem clamp(24px, 5vw, 80px);
  display: flex; flex-direction: column; justify-content: center;
}
.ftext .title { font-size: clamp(1.6rem, 2.5vw, 2.25rem); margin-top: .5rem; }
.ftext p { font-size: .95rem; font-weight: 300; color: var(--text-2); line-height: 1.8; margin-top: 1rem; max-width: 400px; }
.flist { list-style: none; margin-top: 1.75rem; display: flex; flex-direction: column; gap: .75rem; }
.flist li {
  font-size: .875rem; color: var(--text-2);
  display: flex; align-items: flex-start; gap: 10px; line-height: 1.5;
}
.flist li::before {
  content: ''; flex-shrink: 0;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--text-3); margin-top: 7px;
}
.fimg { position: relative; overflow: hidden; }
.fimg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.frow:hover .fimg img { transform: scale(1.03); }

.ftext { transition: opacity .85s ease, transform .9s cubic-bezier(.16,1,.3,1); opacity: 0; transform: translateY(28px); }
.frow.fold-in .ftext { opacity: 1; transform: none; }
.fimg::after {
  content: ''; position: absolute; inset: 0;
  background: var(--bg); transform-origin: right;
  transition: transform 1.1s cubic-bezier(.77,0,.175,1) .2s;
}
.frow.flip .fimg::after { transform-origin: left; }
.frow.fold-in .fimg::after { transform: scaleX(0); }

/* ─── STATS ─── */
#stats {
  background: var(--bg-2);
  border-top: 1px solid var(--divide);
  border-bottom: 1px solid var(--divide);
}
.stats-row { display: grid; grid-template-columns: repeat(3,1fr); max-width: 860px; margin: 0 auto; }
.stats-row--flip { grid-template-columns: 2.4fr 1fr; max-width: 1040px; }
.stats-row--solo { grid-template-columns: 1fr; max-width: 1200px; }
.stats-row--solo .stat-flip { padding-left: 0; padding-right: 0; }
.stat { padding: 2.75rem 2rem; text-align: center; position: relative; }
.stat + .stat::before {
  content: ''; position: absolute; left: 0; top: 30%; bottom: 30%;
  width: 1px; background: var(--divide);
}
.stat-num {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 700; letter-spacing: -.04em; color: var(--amber);
  line-height: 1; margin-bottom: .5rem;
}
.stat-label { font-size: .78rem; font-weight: 400; color: var(--text-2); letter-spacing: .04em; text-transform: uppercase; }

/* Flip-clock counter — proper split-flap. Each card stacks four
 * elements (static top, static bottom, animated top-flap, animated
 * bottom-flap) so the top half flips DOWN and the new bottom rises
 * UP, just like a mechanical board. */
.stat-flip { padding-top: 2.75rem; padding-bottom: 2.75rem; }
.flip-clock {
  display: inline-flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 1.25rem;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
.flip-card {
  position: relative;
  display: inline-block;
  width: 2.6em;
  height: 3.2em;
  perspective: 600px;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  color: var(--amber);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.28));
}
.flip-card .flip-half {
  position: absolute; left: 0; right: 0;
  height: 50%;
  overflow: hidden;
  display: block;
  background: linear-gradient(180deg, #2a2a2e 0%, #1d1d20 100%);
  border: 1px solid rgba(0,0,0,.6);
}
.flip-card .flip-top,
.flip-card .flip-flap-top {
  top: 0;
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid rgba(0,0,0,.85);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}
.flip-card .flip-bottom,
.flip-card .flip-flap-bottom {
  bottom: 0;
  background: linear-gradient(180deg, #0d0d0f 0%, #161618 100%);
  border-radius: 0 0 10px 10px;
  border-top: 0;
}
/* Digit fills the full card height; each half clips it to show only
 * its slice. The digit is centred on the seam line. */
.flip-card .digit {
  position: absolute; left: 0; right: 0;
  text-align: center;
  line-height: 1;
  height: 1em;
}
.flip-card .flip-top .digit,
.flip-card .flip-flap-top .digit {
  bottom: 0; transform: translateY(50%);
}
.flip-card .flip-bottom .digit,
.flip-card .flip-flap-bottom .digit {
  top: 0; transform: translateY(-50%);
}
/* Flaps overlay the static halves and animate. */
.flip-card .flip-flap-top {
  z-index: 2;
  transform-origin: bottom center;
  backface-visibility: hidden;
}
.flip-card .flip-flap-bottom {
  z-index: 2;
  transform-origin: top center;
  transform: rotateX(90deg);
  backface-visibility: hidden;
}
.flip-card.flipping .flip-flap-top    { animation: flapTopDown    .35s cubic-bezier(.55,0,.7,.4) forwards; }
.flip-card.flipping .flip-flap-bottom { animation: flapBottomUp   .35s cubic-bezier(.3,.5,.4,1) .35s forwards; }
@keyframes flapTopDown {
  from { transform: rotateX(0); }
  to   { transform: rotateX(-90deg); }
}
@keyframes flapBottomUp {
  from { transform: rotateX(90deg); }
  to   { transform: rotateX(0); }
}
.flip-unit {
  font-size: .7rem; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .18em;
  padding: 0 .15rem;
  align-self: center;
}
@media (prefers-reduced-motion: reduce) {
  .flip-card.flipping .flip-flap-top,
  .flip-card.flipping .flip-flap-bottom { animation: none; }
}

/* ─── ACCREDITATIONS ─── */
#accreditations { background: var(--bg); }
.accred-intro { text-align: center; margin-bottom: 4rem; }
.accred-block { margin-bottom: 3.5rem; }
.accred-block:last-child { margin-bottom: 0; }
.accred-group-label {
  font-size: .68rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3);
  margin-bottom: 1.25rem; text-align: center;
}

/* Uniform grid of logos — each cell the same size so logos land in tidy rows,
 * but no visible boxes. Just subtle alignment so every mark reads at a consistent
 * visual weight regardless of its native aspect ratio. */
.accred-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem 2.5rem;
  padding: 2.5rem 0 1rem;
  border-top: 1px solid var(--divide);
  max-width: 1440px;
  margin: 0 auto;
}
.accred-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 0 .25rem;
  text-decoration: none; color: inherit;
  /* Fixed cell width so mixed item counts (12 accreditations vs. 4 partners)
   * still centre cleanly without one logo ballooning to fill the row. */
  flex: 0 0 140px;
}
.accred-item img {
  max-height: 56px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform .35s ease, opacity .25s ease;
}
.accred-item:hover img { transform: scale(1.05); }

/* Hover label — subtle pill that appears below the logo, absolutely positioned
 * so it doesn't nudge the grid. */
.accred-item::after {
  content: attr(data-label);
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translate(-50%, -4px);
  background: var(--text-1); color: var(--bg);
  font-size: .62rem; font-weight: 500; letter-spacing: .04em;
  padding: .22rem .55rem; border-radius: 5px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .2s ease, transform .2s ease;
  z-index: 10;
}
.accred-item:hover::after { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) { .accred-row { gap: 1.75rem 2rem; } .accred-item { flex-basis: 120px; } }
@media (max-width: 560px) { .accred-row { gap: 1.5rem; } .accred-item { flex-basis: 100px; } }
@media (max-width: 380px) { .accred-item { flex-basis: 42%; } }

/* Milestone logo is wider/shorter than the rest, so capping at max-width: 100%
 * of a 100–140px cell makes it read tiny next to NICEIC, SSAIB, etc. Bump its
 * cap so it reads at a comparable visual weight. */
.accred-item[data-label="Milestone Systems"] img { max-height: 36px; max-width: 160px; }
@media (max-width: 560px) {
  .accred-item[data-label="Milestone Systems"] img { max-height: 32px; max-width: 140px; }
  /* Technology Partners row is 4 logos: at narrow widths it wraps 3 + 1, leaving
   * the last logo alone above the section-bottom padding. Force a tidy 2-up
   * grid so the row reads as 2 + 2 with no orphan. */
  .accred-block + .accred-block .accred-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 1rem;
  }
  .accred-block + .accred-block .accred-item { flex-basis: auto; height: 60px; }
}

/* ── DARK-MODE LOGO SAFETY NET ──
 * Every third-party brand logo was designed for a light background — either baked
 * into the image (white-JPEG marks like BAFE, CIRAS, RISQS, SafeContractor, FIA,
 * Gent, the old Axis CPP) or relying on a light page behind a transparent PNG
 * (Achilles, NICEIC, Milestone, Fogtec, Axis wordmark, most customer logos).
 * In dark mode they disappear or render as random white rectangles.
 *
 * Solution: put each logo on a subtle white chip *only* in dark mode. Keeps brand
 * colours accurate, masks JPEG whites, and reads as an intentional design choice. */
@media (prefers-color-scheme: dark) {
  /* Home accreditations & tech partners */
  .accred-item {
    background: rgba(255,255,255,.95);
    border-radius: 10px;
    padding: .55rem .85rem;
    height: auto;
    min-height: 72px;
  }
  .accred-item::after {
    background: #1d1d1f;
    color: #fff;
  }

  /* Customer logo marquee — add the white chip background ONLY. Keep the
   * exact light-mode dimensions and per-logo size constraints so logos
   * don't visibly change size when the user flips colour scheme. */
  .marquee-item {
    background: rgba(255,255,255,.96);
    border-radius: 14px;
    box-sizing: border-box;
  }

  /* Datacentres "Technology Stack" cards */
  .partner-stack-logo {
    background: rgba(255,255,255,.95);
    padding: 6px 10px;
    border-radius: 8px;
    box-sizing: content-box;
  }

  /* Rail-transport inline accred strip */
  .accred-strip img {
    background: rgba(255,255,255,.95);
    padding: 6px 12px;
    border-radius: 8px;
    box-sizing: content-box;
  }

  /* Inline partner chips on sector pages (energy-storage Axis, manufacturing Axis,
   * energy-storage Fogtec). Add class="brand-chip" to any logo img that isn't
   * inside one of the wrappers above. */
  .brand-chip {
    background: rgba(255,255,255,.95);
    padding: 6px 10px;
    border-radius: 8px;
    box-sizing: content-box;
  }
}

/* ─── CTA ─── */
#cta { background: var(--bg); border-top: 1px solid var(--divide); text-align: center; }
#cta .title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; }
#cta .body-copy { max-width: 420px; margin-left: auto; margin-right: auto; }

/* ─── DATACENTRE-SPECIFIC BLOCKS ─── */
.services-head-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; margin-bottom: 3rem; }
.services-head-row .title { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-top: .5rem; }
.services-head-row .body-col { font-size: .95rem; font-weight: 300; color: var(--text-2); line-height: 1.8; padding-top: .5rem; }

/* Auto-fits 5 or 6 icon tiles across the row without leaving an orphan.
 * At ~170px min, a 1180px container fits 6, a 950px container fits 5, etc. */
.service-icon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--divide); border: 1px solid var(--divide); border-radius: 20px; overflow: hidden; }
.service-icon-item { background: var(--bg); padding: 2rem 1.5rem; display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; transition: background .2s; }
.service-icon-item:hover { background: var(--bg-2); }
.service-icon-item svg { color: var(--blue); flex-shrink: 0; }
.service-icon-label { font-size: .78rem; font-weight: 500; color: var(--text-2); line-height: 1.4; }

.stats-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--divide); border: 1px solid var(--divide); border-radius: 20px; overflow: hidden; margin-top: 1rem; }
.stat-inline-item { background: var(--bg); padding: 2rem 1.5rem; text-align: center; }
.stat-inline-num { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -.04em; color: var(--amber); line-height: 1; margin-bottom: .35rem; }
.stat-inline-label { font-size: .72rem; font-weight: 400; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; line-height: 1.45; }

.who-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 2.5rem; }
/* When a 5-item grid wraps to 2 columns the 5th tile is alone with an empty
 * cell beside it. Span the lonely tile so the row reads as a balanced 2 + 2 + 1-wide. */
@media (max-width: 768px) {
  .who-grid > :last-child:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .service-icon-grid > :last-child:nth-child(5) { grid-column: 1 / -1; }
}
/* Heritage Sprinkler-vs-Fogtec compare. Side-by-side on tablet+, stacked on
 * mobile so neither column gets squeezed into a thin column of broken phrases. */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 720px) { .compare-grid { grid-template-columns: 1fr; } }
.who-item { border: 1px solid var(--divide); border-radius: 16px; padding: 1.75rem 1.25rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .9rem; transition: border-color .2s, background .2s; }
.who-item:hover { border-color: var(--blue); background: var(--bg-2); }
.who-icon { color: var(--blue); }
.who-title { font-size: .8rem; font-weight: 500; color: var(--text-2); line-height: 1.45; }

#approach { background: var(--bg-2); }
.approach-head { max-width: 640px; margin-bottom: 4rem; }
.approach-head .title { font-size: clamp(1.8rem, 3vw, 2.75rem); margin-top: .5rem; }
.stages-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; position: relative; }
.stages-wrap::before {
  content: ''; position: absolute; top: 2.1rem;
  left: calc(100% / 6 + 0px); right: calc(100% / 6 + 0px);
  height: 1px; background: var(--divide); z-index: 0;
}
.stage { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .75rem; }
.stage-circle {
  width: 50px; height: 50px; border-radius: 50%;
  border: 1.5px solid var(--divide);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2);
  color: var(--blue); flex-shrink: 0;
}
.stage.active .stage-circle { border-color: var(--amber); color: var(--amber); }
.stage-num { font-size: .65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-top: 1rem; }
.stage.active .stage-num { color: var(--amber); }
.stage-title { font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; color: var(--text-1); }
.stage-desc { font-size: .875rem; font-weight: 300; color: var(--text-2); line-height: 1.72; }
.stage-link { font-size: .78rem; font-weight: 500; color: var(--text-2); text-decoration: none; transition: color .2s; align-self: flex-start; }
.stage-link:hover { color: var(--text-1); }

#commitment { background: #06101e; padding: 7rem clamp(24px, 5vw, 80px); }
#commitment .label { color: rgba(255,255,255,.35); }
#commitment .title { color: #fff; }
.commitment-head { max-width: 540px; margin-bottom: 4rem; }
.commitment-head .title { font-size: clamp(2rem, 4vw, 3rem); }
.commitment-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; border-top: 1px solid rgba(255,255,255,.07); padding-top: 3rem; }
.commitment-item { display: flex; flex-direction: column; gap: .9rem; }
.commitment-icon { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.65); flex-shrink: 0; }
.commitment-title { font-size: 1.1rem; font-weight: 600; color: #fff; line-height: 1.3; }
.commitment-desc { font-size: 1rem; font-weight: 400; color: rgba(255,255,255,.78); line-height: 1.65; }

/* ─── SECTOR PAGE BUILDING BLOCKS ─── */

/* Pull quote — used on public-spaces, housing */
.pullquote {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 600; letter-spacing: -.01em; line-height: 1.2;
  color: var(--text-1);
  max-width: 880px; margin: 0 auto;
  padding: 2rem 0 2rem 2.5rem;
  border-left: 3px solid var(--amber);
}
.pullquote-author {
  display: block; margin-top: 1.25rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: .78rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
}

/* Compact stats strip (manufacturing, rolling-stock) */
.stats-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--divide);
  border-bottom: 1px solid var(--divide);
  background: var(--bg-2);
}
.stats-strip .stat { padding: 3rem 1.5rem; }
@media (max-width: 768px) { .stats-strip { grid-template-columns: repeat(2, 1fr); } }

/* Risk panel (dark with icon bullets, energy-storage) */
.risk-panel { background: #06101e; padding: 7rem clamp(24px, 5vw, 80px); }
.risk-panel .label { color: rgba(255,255,255,.35); }
.risk-panel .title { color: #fff; }
.risk-panel .head { max-width: 640px; margin-bottom: 3.5rem; }
.risk-panel .head .title { font-size: clamp(1.9rem, 3.5vw, 2.75rem); }
.risk-panel .head .body-copy { color: rgba(255,255,255,.55); }
.risk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; border-top: 1px solid rgba(255,255,255,.08); padding-top: 3rem; }
.risk-item { display: flex; flex-direction: column; gap: .75rem; }
.risk-item .n {
  font-family: 'Syne', sans-serif; font-size: 2rem; font-weight: 700;
  color: var(--amber); line-height: 1; letter-spacing: -.04em;
}
.risk-item h3 { font-size: 1.2rem; font-weight: 600; color: #fff; line-height: 1.3; }
.risk-item p { font-size: 1rem; font-weight: 400; color: rgba(255,255,255,.78); line-height: 1.65; }
@media (max-width: 900px) { .risk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .risk-grid { grid-template-columns: 1fr; } }

/* Grade grid — BS 5839-6 category cards (housing) */
.grade-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: 3rem;
}
.grade-card {
  border: 1px solid var(--divide); border-radius: 18px;
  padding: 1.75rem 1.5rem;
  display: flex; flex-direction: column; gap: .85rem;
  transition: border-color .25s, background .25s, transform .25s;
}
.grade-card:hover { border-color: var(--blue); background: var(--bg-2); transform: translateY(-2px); }
.grade-card .grade-tag {
  font-family: 'Syne', sans-serif;
  font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em;
  color: var(--blue); line-height: 1;
}
.grade-card h3 { font-size: .95rem; font-weight: 600; color: var(--text-1); line-height: 1.3; }
.grade-card p { font-size: .82rem; font-weight: 300; color: var(--text-2); line-height: 1.65; }
@media (max-width: 900px) { .grade-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grade-grid { grid-template-columns: 1fr; } }

.values-grid { grid-template-columns: repeat(5, 1fr); }
.values-grid .grade-tag { font-size: 1.35rem; }
@media (max-width: 1000px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .values-grid { grid-template-columns: 1fr; } }

/* Partner spotlight — Fogtec dominant section on rolling-stock */
.partner-spotlight {
  background: linear-gradient(135deg, #030d1e 0%, #0a1f3a 70%, #061225 100%);
  color: #fff;
  padding: 7rem clamp(24px, 5vw, 80px);
  position: relative;
  overflow: hidden;
}
.partner-spotlight::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 25% 30%, rgba(0,92,185,.18) 0%, transparent 60%);
  pointer-events: none;
}
.partner-spotlight > .inner { position: relative; z-index: 1; }
.partner-spotlight .ps-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end;
  margin-bottom: 4rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.partner-spotlight .ps-head .label { color: rgba(255,255,255,.4); }
.partner-spotlight .ps-head .title { color: #fff; font-size: clamp(2rem, 4.5vw, 3.25rem); }
.partner-spotlight .ps-head .body-col {
  font-size: .95rem; font-weight: 300;
  color: rgba(255,255,255,.6); line-height: 1.85; padding-bottom: .5rem;
}
.partner-spotlight .ps-logo {
  display: inline-flex; align-items: center; gap: .85rem;
  padding: .55rem 1rem; border-radius: 1440px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-bottom: 1.5rem;
}
.partner-spotlight .ps-logo img { height: 22px; width: auto; filter: brightness(0) invert(1); opacity: .9; }
.ps-points {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  margin-bottom: 4rem;
}
/* 5-up variant for the datacentre five-layers spotlight — concentric ring feel */
.ps-points--five { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
.ps-points--five .ps-point { padding: 1.5rem 1.25rem; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.02); }
.ps-points--five .ps-point .n { font-size: 1.85rem; }
.ps-points--five .ps-point h3 { font-size: 1rem; }
.ps-points--five .ps-point p { font-size: .8rem; line-height: 1.65; }
@media (max-width: 1100px) {
  .ps-points--five { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .ps-points--five { grid-template-columns: 1fr; }
}
.ps-point { display: flex; flex-direction: column; gap: .85rem; }
.ps-point .n {
  font-family: 'Syne', sans-serif; font-size: 2.25rem; font-weight: 700;
  color: var(--amber); line-height: 1; letter-spacing: -.03em;
}
.ps-point h3 { font-size: 1.1rem; font-weight: 600; color: #fff; line-height: 1.3; }
.ps-point p { font-size: .85rem; font-weight: 300; color: rgba(255,255,255,.55); line-height: 1.75; }
.ps-feature {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px; overflow: hidden;
  background: rgba(0,0,0,.25);
}
.ps-feature .ps-ftext { padding: 4rem 3rem; display: flex; flex-direction: column; justify-content: center; }
.ps-feature .ps-ftext p { color: rgba(255,255,255,.65); font-size: .95rem; font-weight: 300; line-height: 1.85; margin-top: 1rem; }
.ps-feature .ps-ftext h3 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: #fff; margin-top: .5rem;
}
.ps-feature .ps-ftext .label { color: rgba(255,255,255,.4); }
.ps-feature ul { list-style: none; margin-top: 2rem; display: flex; flex-direction: column; gap: .75rem; }
.ps-feature li {
  font-size: .88rem; font-weight: 300; color: rgba(255,255,255,.7);
  display: flex; align-items: flex-start; gap: 10px; line-height: 1.55;
}
.ps-feature li::before { content: ''; flex-shrink: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--amber); margin-top: 8px; }
.ps-feature .ps-fimg { background-size: cover; background-position: center; min-height: 400px; }
@media (max-width: 900px) {
  .partner-spotlight .ps-head { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
  .ps-points { grid-template-columns: 1fr; gap: 2rem; }
  .ps-feature { grid-template-columns: 1fr; }
  .ps-feature .ps-ftext { padding: 3rem 2rem; }
  .ps-feature .ps-fimg { min-height: 260px; order: -1; }
}

/* Accreditation strip — compact row for inline use on sector pages */
.accred-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 2rem 3rem;
  padding: 3rem 0;
  margin: 0 auto;
  max-width: 960px;
  border-top: 1px solid var(--divide);
  border-bottom: 1px solid var(--divide);
}
.accred-strip img { height: 56px; width: auto; max-width: 160px; object-fit: contain; opacity: .9; transition: opacity .2s; }
.accred-strip img:hover { opacity: 1; }

/* ── SECTOR FOOTER BANNER ── full-width image between CTA and footer.
 * Aspect ratios halved from the original so the banner is about half the
 * visual height at the same viewport width. */
.sector-footer-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 42 / 9;
  background: var(--bg-2);
}
.sector-footer-banner img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 720px) {
  .sector-footer-banner { aspect-ratio: 16 / 5; }
}

/* ── SPEC-CARD GRID (photo-led feature cards for sector pages) ──
 * Replaces the old .flist bullet blocks where a feature row was just text.
 * Each card is a compact image-card with a photo top, tag, title and description.
 * Grid auto-fits 2-4 columns. Apple-style rounded corners, subtle hover. */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 2.5rem;
}
.spec-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: var(--bg);
  border: 1px solid var(--divide);
  text-decoration: none;
  color: inherit;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.spec-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -22px rgba(0,40,95,.22);
}
.spec-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-2);
  overflow: hidden;
}
.spec-card-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%);
  transition: opacity .35s ease;
}
.spec-card:hover .spec-card-photo { }
.spec-card-tag {
  position: absolute; top: 14px; left: 14px;
  z-index: 2;
  padding: .28rem .6rem;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 1440px;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* Hard-coded so the pill stays readable in dark mode — var(--text-1)
   * flips to white otherwise and the white-on-white-pill disappears. */
  color: #1d1d1f;
  line-height: 1;
}
.spec-card-body {
  padding: 1.25rem 1.35rem 1.5rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.spec-card-body h3 {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text-1);
  line-height: 1.28;
  margin: 0;
}
.spec-card-body p {
  font-size: .82rem;
  font-weight: 300;
  color: var(--text-2);
  line-height: 1.65;
  margin: 0;
}
/* Standards-style variant: a bordered "chip" row below each card, rendered
 * from a <span class="spec-card-std">BS&nbsp;5839-1</span>. */
.spec-card-std {
  display: inline-block;
  padding: .22rem .55rem;
  background: var(--bg-2);
  border: 1px solid var(--divide);
  border-radius: 1440px;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: .2rem .3rem 0 0;
  white-space: nowrap;
}

@media (max-width: 1100px) { .spec-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .spec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .spec-grid { grid-template-columns: 1fr; } }

/* ── Scrollable variant — single row with horizontal snap scrolling,
 * Apple-style. Used when there are 5+ cards. The .spec-grid outer wraps in a
 * .spec-scroller which clips and scrolls; the inner grid turns into a flex row.
 *
 * Padding lives on the INSIDE track (via padding-inline on the grid) so the scroll
 * boundary stops at the last card + its trailing padding — no empty white band after. */
.spec-scroller {
  position: relative;
  margin: 2.5rem calc(-1 * clamp(24px, 5vw, 80px)) 1rem;
  /* padding-top gives room for the card's hover translate-y so the top edge
   * doesn't clip against overflow-y: hidden. */
  padding: 10px 0 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  /* No scroll-snap — it was fighting smooth scroll and drag, causing jank and
   * letting the user overshoot past the last card. Plain free-scroll with a
   * hard stop at scrollMax = end of last card. */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--text-3) transparent;
  cursor: grab;
  overscroll-behavior: none;
}
.spec-scroller.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}
.spec-scroller.is-dragging * { pointer-events: none; }
.spec-scroller::-webkit-scrollbar { height: 6px; }
.spec-scroller::-webkit-scrollbar-track { background: transparent; }
.spec-scroller::-webkit-scrollbar-thumb { background: var(--text-3); border-radius: 999px; }
.spec-scroller::-webkit-scrollbar-thumb:hover { background: var(--text-2); }
.spec-scroller .spec-grid {
  display: flex;
  gap: 12px;
  grid-template-columns: none;
  width: max-content;
  margin-top: 0;
  /* Left padding only — aligns first card with the main content grid.
   * No right padding so scroll-max ends exactly at the last card's right edge,
   * no trailing blank band. */
  padding: 0 0 4px clamp(24px, 5vw, 80px);
}
.spec-scroller .spec-card {
  flex: 0 0 clamp(280px, 30vw, 360px);
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
@media (max-width: 560px) {
  .spec-scroller .spec-card { flex-basis: 80vw; }
}

/* ── Scroll-nav arrows (injected by JS into the wrapper that holds .spec-scroller
 * or .partner-stack-scroller). Apple-style circular buttons that sit over the rail.
 *
 * The wrap carries the edge-bleed negative margin so its right/left edges line up
 * with the scroller's right/left edges — which means the disabled state of the
 * buttons fires exactly when the last card reaches the visible edge (no more 5vw
 * of invisible scroll past the last card). */
.scroll-nav-wrap {
  position: relative;
  margin: 0 calc(-1 * clamp(24px, 5vw, 80px));
}
.scroll-nav-wrap .spec-scroller,
.scroll-nav-wrap .partner-stack-scroller {
  margin-left: 0;
  margin-right: 0;
}
.scroll-nav-btn {
  position: absolute;
  top: calc(50% - 20px);
  z-index: 5;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--divide);
  background: var(--bg);
  color: var(--text-1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.18);
  transition: opacity .25s ease, background .25s ease, transform .15s ease, color .25s ease;
  padding: 0;
}
.scroll-nav-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.scroll-nav-btn:active { transform: scale(.94); }
.scroll-nav-prev { left: max(4px, 1vw); }
.scroll-nav-next { right: max(4px, 1vw); }
.scroll-nav-btn[disabled] { opacity: 0; pointer-events: none; }
.scroll-nav-btn svg { width: 16px; height: 16px; }
@media (max-width: 560px) {
  .scroll-nav-btn { display: none; } /* On mobile, native swipe is fine. */
}

/* Background-position helpers for photo cards that need a specific crop. */
.spec-card-photo.pos-top       { background-position: center top; }
.spec-card-photo.pos-bottom    { background-position: center bottom; }
.spec-card-photo.pos-top-left  { background-position: top left; }
.spec-card-photo.pos-top-right { background-position: top right; }
/* "Contain" variant — used for logos/marks that must fit inside the frame. */
.spec-card-photo.contain {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: var(--bg-2);
}
/* Suppress the bottom darkening gradient on contained images — the gradient
 * is designed for full-bleed photos and visibly clips the bottom of an
 * otherwise centred logo or product shot. */
.spec-card-photo.contain::after { display: none; }

/* Header block that pairs with .spec-grid — label + title + body on left,
 * body text on right. Uses the existing services-head-row pattern but full-width. */
.spec-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 1rem;
}
.spec-head .title { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-top: .5rem; }
.spec-head .body-col {
  font-size: .95rem; font-weight: 300;
  color: var(--text-2); line-height: 1.85;
  padding-bottom: .5rem;
}
@media (max-width: 900px) {
  .spec-head { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
}


/* Technology partner "stack" — grid of cards with logo + description */
.partner-stack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 2.5rem;
}
.partner-stack-card {
  background: var(--bg);
  border: 1px solid var(--divide);
  border-radius: 18px;
  padding: 1.75rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color .25s, transform .25s;
}
.partner-stack-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.partner-stack-logo {
  height: 36px; width: auto;
  max-width: 140px;
  object-fit: contain;
  align-self: flex-start;
}
.partner-stack-card h3 {
  font-size: 1.05rem; font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text-1);
  line-height: 1.25;
  margin: 0;
}
.partner-stack-card p {
  font-size: .85rem; font-weight: 300;
  color: var(--text-2);
  line-height: 1.65;
  margin: 0;
}
.partner-stack-card strong { color: var(--text-1); font-weight: 600; }
@media (max-width: 960px) { .partner-stack-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .partner-stack-grid { grid-template-columns: 1fr; } }

/* Scrollable variant — wrap in .partner-stack-scroller when there are 5+ cards.
 * Same inside-track padding pattern as .spec-scroller — no trailing whitespace. */
.partner-stack-scroller {
  position: relative;
  margin: 2.5rem calc(-1 * clamp(24px, 5vw, 80px)) 1rem;
  padding: 10px 0 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--text-3) transparent;
  cursor: grab;
  overscroll-behavior: none;
}
.partner-stack-scroller.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}
.partner-stack-scroller.is-dragging * { pointer-events: none; }
.partner-stack-scroller .partner-stack-card {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.partner-stack-scroller::-webkit-scrollbar { height: 6px; }
.partner-stack-scroller::-webkit-scrollbar-track { background: transparent; }
.partner-stack-scroller::-webkit-scrollbar-thumb { background: var(--text-3); border-radius: 999px; }
.partner-stack-scroller::-webkit-scrollbar-thumb:hover { background: var(--text-2); }
.partner-stack-scroller .partner-stack-grid {
  display: flex;
  gap: 12px;
  grid-template-columns: none;
  width: max-content;
  margin-top: 0;
  padding: 0 0 4px clamp(24px, 5vw, 80px);
}
.partner-stack-scroller .partner-stack-card {
  flex: 0 0 clamp(300px, 32vw, 380px);
  scroll-snap-align: start;
}
@media (max-width: 560px) {
  .partner-stack-scroller .partner-stack-card { flex-basis: 82vw; }
}

/* Responsive YouTube / Vimeo embed frame — reusable across pages */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  max-width: 960px;
  margin: 0 auto;
  box-shadow:
    0 40px 90px -30px rgba(0,40,95,.28),
    0 14px 30px -10px rgba(0,40,95,.18),
    inset 0 0 0 1px rgba(11,18,32,.06);
}
.video-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}

/* Two-column intro block (variant used on manufacturing, rail, education) */
.intro-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: start;
  padding: 7rem clamp(24px, 5vw, 80px);
  border-top: 1px solid var(--divide);
}
.intro-split.inverted { background: var(--bg-2); }
.intro-split .title { font-size: clamp(1.8rem, 3.5vw, 2.75rem); }
.intro-split .body-col { padding-top: .25rem; }
.intro-split .body-col p { font-size: .95rem; font-weight: 300; color: var(--text-2); line-height: 1.85; margin-bottom: 1rem; }
.intro-split .body-col a { color: var(--blue); font-weight: 500; text-decoration: none; }
@media (max-width: 900px) { .intro-split { grid-template-columns: 1fr; gap: 1.5rem; padding: 5rem clamp(24px, 5vw, 80px); } }

/* ─── VERIFY / ID CARD (Apple-style) ─── */
/* Full-page subtle gradient reacts to card status. Sections below are transparent
 * so the gradient flows uninterrupted from hero to footnote. */
body.verify-page-valid {
  background:
    radial-gradient(ellipse 1440px 600px at 20% 0%, rgba(22,163,74,.12) 0%, transparent 60%),
    radial-gradient(ellipse 900px 700px at 90% 30%, rgba(22,163,74,.06) 0%, transparent 65%),
    linear-gradient(180deg, rgba(22,163,74,.04) 0%, transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
body.verify-page-invalid,
body.verify-page-expired,
body.verify-page-voided {
  background:
    radial-gradient(ellipse 1440px 600px at 20% 0%, rgba(220,38,38,.12) 0%, transparent 60%),
    radial-gradient(ellipse 900px 700px at 90% 30%, rgba(220,38,38,.06) 0%, transparent 65%),
    linear-gradient(180deg, rgba(220,38,38,.04) 0%, transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
body[class*="verify-page-"] .verify-hero,
body[class*="verify-page-"] .verify-profile,
body[class*="verify-page-"] .verify-footnote-section {
  background: transparent !important;
}

.verify-hero {
  padding: 9rem clamp(24px, 5vw, 80px) 5rem;
  background: var(--bg);
  text-align: left;
  overflow: hidden;
}
.verify-hero .inner {
  max-width: 860px;
  margin: 0 auto;
}
.verify-hero .label {
  display: inline-block;
  font-size: .72rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1.25rem;
}

.verify-hero-title {
  font-family: 'Syne', system-ui, -apple-system, sans-serif;
  font-size: clamp(3.5rem, 10vw, 7.5rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .95;
  color: var(--text-1);
  margin: 0 0 1rem;
}
.verify-hero-title em { font-style: normal; }
.verify-valid   .verify-hero-title em { color: #16a34a; }
.verify-invalid .verify-hero-title em,
.verify-expired .verify-hero-title em,
.verify-voided  .verify-hero-title em { color: #dc2626; }
/* Pre-challenge state: muted accent so the page reads as a gate, not a result. */
.verify-gate    .verify-hero-title em { color: var(--blue); }

/* reCAPTCHA challenge — sits below the hero on /verify/ when the
 * visitor hasn't passed yet. Centred container, single column. */
.verify-gate-section {
  padding: 2rem clamp(24px, 5vw, 80px) 6rem;
}
.verify-gate-section .inner {
  max-width: 420px;
  margin: 0 auto;
}
.verify-gate-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.verify-gate-form .g-recaptcha {
  display: flex;
  justify-content: center;
}
.verify-gate-submit {
  min-width: 180px;
  justify-content: center;
}
.verify-gate-error {
  font-size: .9rem;
  color: #dc2626;
  margin: 0;
  text-align: center;
}

.verify-hero-sub {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 300;
  color: var(--text-2);
  line-height: 1.55;
  max-width: 520px;
  margin: 0 0 4rem;
}

/* ── Profile section ── */
.verify-profile {
  padding: 0 clamp(24px, 5vw, 80px) 4rem;
  background: var(--bg);
}
.verify-profile .inner { max-width: 860px; margin: 0 auto; }

/* Check-the-photo notice above the profile grid */
.verify-check-note {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 0 0 2.5rem;
  padding: .9rem 1.15rem;
  background: var(--bg-2);
  border: 1px solid var(--divide);
  border-left: 3px solid var(--amber);
  border-radius: 12px;
  font-size: .92rem;
  font-weight: 400;
  color: var(--text-1);
  line-height: 1.5;
}
.verify-check-note svg {
  flex-shrink: 0;
  color: var(--amber);
  margin-top: 2px;
}

.profile-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 3.5rem;
  align-items: start;
}

/* Photo */
.profile-photo {
  position: relative;
  width: 100%; aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  background: var(--bg-2);
  box-shadow:
    0 30px 60px -25px rgba(0,40,95,.22),
    0 8px 20px -10px rgba(0,40,95,.14);
  animation: verifyFadeIn .7s ease both;
}
@keyframes verifyFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-initials {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', sans-serif;
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 700; color: var(--text-2);
}

/* Details column */
.profile-details {
  display: flex; flex-direction: column;
  padding-top: .5rem;
}
.profile-brand {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 1.25rem;
}
.profile-brand-logo { height: 24px; width: auto; display: block; }

.profile-name {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700; letter-spacing: -.025em; line-height: 1.05;
  color: var(--text-1);
  margin: 0 0 .5rem;
}
.profile-role {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 400; color: var(--text-2);
  line-height: 1.4; margin: 0 0 1.5rem;
}

/* Inline status indicator inside profile (below meta) */
.verify-profile .verify-indicator { margin-top: 1.75rem; }

/* Meta list */
.profile-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--divide);
  border: 1px solid var(--divide);
  border-radius: 16px;
  overflow: hidden;
}
.profile-meta > div {
  background: var(--bg);
  padding: 1.1rem 1.25rem;
  display: flex; flex-direction: column; gap: .25rem;
}
.profile-meta dt {
  font-size: .66rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
}
.profile-meta dd {
  font-size: .98rem; font-weight: 500;
  color: var(--text-1);
  margin: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.verify-status-valid   { color: #16a34a; }
.verify-status-invalid,
.verify-status-expired,
.verify-status-voided  { color: #dc2626; }

@media (max-width: 720px) {
  .profile-grid { grid-template-columns: 1fr; gap: 2rem; }
  .profile-photo { max-width: 240px; }
  .profile-meta { grid-template-columns: 1fr; }
}

/* ── Small status indicator below the card ── */
.verify-indicator {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .55rem 1.1rem;
  background: var(--bg-2);
  border: 1px solid var(--divide);
  border-radius: 1440px;
  font-size: .82rem; font-weight: 500;
  color: var(--text-2);
  margin: 0 auto;
  animation: verifyIndicatorIn .6s ease .4s both;
}
@keyframes verifyIndicatorIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.verify-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 4px rgba(22,163,74,.15);
  animation: verifyDotPulse 2.4s ease-in-out infinite;
}
@keyframes verifyDotPulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(22,163,74,.15); }
  50%     { box-shadow: 0 0 0 8px rgba(22,163,74,.08); }
}
.verify-invalid .verify-dot,
.verify-expired .verify-dot,
.verify-voided  .verify-dot {
  background: #dc2626;
  box-shadow: 0 0 0 4px rgba(220,38,38,.15);
  animation: verifyDotPulseRed 2.4s ease-in-out infinite;
}
@keyframes verifyDotPulseRed {
  0%,100% { box-shadow: 0 0 0 4px rgba(220,38,38,.15); }
  50%     { box-shadow: 0 0 0 8px rgba(220,38,38,.08); }
}

/* ── Footnote section (replaces the removed details grid) ── */
.verify-footnote-section {
  padding: 3rem clamp(24px, 5vw, 80px) 6rem;
  background: var(--bg);
}
.verify-footnote-section .inner { max-width: 760px; margin: 0 auto; }
.verify-footnote {
  margin: 0;
  text-align: left;
  font-size: .88rem; font-weight: 300;
  color: var(--text-2); line-height: 1.7;
}
.verify-footnote a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,92,185,.3);
  transition: border-color .2s;
}
.verify-footnote a:hover { border-color: var(--blue); }

@media (max-width: 720px) {
  .verify-hero { padding: 7rem max(20px, 4vw) 3.5rem; }
  .verify-hero-sub { margin-bottom: 3rem; }
}

/* ─── CONTACT PAGE ─── */
.contact-phone-banner {
  padding: 5rem clamp(24px, 5vw, 80px);
  background: var(--bg);
  text-align: center;
  border-bottom: 1px solid var(--divide);
}
.contact-phone-label {
  font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 1.25rem;
}
.contact-phone-number {
  font-family: 'Syne', system-ui, sans-serif;
  display: inline-block;
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--blue);
  text-decoration: none;
  line-height: 1;
  transition: color .2s;
}
.contact-phone-number:hover { color: var(--amber); }
.contact-phone-note {
  font-size: .85rem; font-weight: 300; color: var(--text-2);
  margin-top: 1.5rem; max-width: 520px; margin-left: auto; margin-right: auto;
  line-height: 1.6;
}

.contact-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin-top: 2.5rem;
}
.contact-card {
  position: relative;
  display: block;
  border: 1px solid var(--divide);
  border-radius: 18px;
  padding: 1.75rem 1.75rem 1.75rem 1.75rem;
  background: var(--bg);
  color: inherit;
  text-decoration: none;
  transition: border-color .25s, background .25s, transform .25s;
}
.contact-card:hover { border-color: var(--blue); background: #fff; transform: translateY(-2px); }
@media (prefers-color-scheme: dark) { .contact-card:hover { background: var(--bg-3); } }
.contact-card-label {
  font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 .65rem;
}
.contact-card h3 {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.25rem; font-weight: 700;
  letter-spacing: -.015em; line-height: 1.3;
  color: var(--text-1); margin: 0 0 .75rem;
  word-break: break-word;
}
.contact-card p {
  font-size: .88rem; font-weight: 300;
  color: var(--text-2); line-height: 1.65; margin: 0;
}
.contact-card-arrow {
  position: absolute; top: 1.75rem; right: 1.75rem;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-2); color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 400;
  transition: background .2s, color .2s;
}
.contact-card:hover .contact-card-arrow { background: var(--blue); color: #fff; }
@media (max-width: 720px) { .contact-grid { grid-template-columns: 1fr; } }

.office-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 2.5rem; }
.office-card {
  border: 1px solid var(--divide);
  border-radius: 18px;
  padding: 2rem 2rem 2rem;
  background: var(--bg-2);
  transition: border-color .25s, transform .25s;
}
.office-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.office-tag {
  font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 .6rem;
}
.office-card h3 {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 700; letter-spacing: -.02em;
  color: var(--text-1); margin: 0 0 1.25rem;
}
.office-card address {
  font-size: .95rem; font-weight: 400;
  color: var(--text-2); font-style: normal;
  line-height: 1.75; margin-bottom: 1.5rem;
}
.office-map-link {
  font-size: .82rem; font-weight: 500; color: var(--blue);
  text-decoration: none;
  transition: color .2s;
}
.office-map-link:hover { color: var(--amber); }

.office-map {
  margin-top: 1.5rem;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--divide);
  aspect-ratio: 16 / 9;
}
.office-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(.2) contrast(1.02);
}
@media (prefers-color-scheme: dark) {
  .office-map iframe { filter: grayscale(.2) contrast(1.02) invert(.9) hue-rotate(180deg); }
}
@media (max-width: 720px) { .office-grid { grid-template-columns: 1fr; } }


/* ─── FAQ BLOCK ─────────────────────────────────────────────────
 * Sector-page FAQs — semantic <details>/<summary>, fully accessible.
 * Paired with FAQPage JSON-LD (rendered alongside via ph_faq_block). */
.faq-block { padding-top: 4rem; padding-bottom: 5rem; }
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
	border-top: 1px solid var(--divide);
	padding: 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--divide); }
.faq-item summary {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0;
	font-size: 1rem; font-weight: 500;
	color: var(--text-1);
	cursor: pointer;
	list-style: none;
	transition: color .2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--blue); }
.faq-toggle {
	flex-shrink: 0;
	width: 28px; height: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--divide);
	border-radius: 50%;
	color: var(--text-2);
	transition: transform .3s cubic-bezier(.22,.9,.32,1), border-color .2s ease;
}
.faq-item[open] .faq-toggle { transform: rotate(180deg); border-color: var(--blue); color: var(--blue); }
.faq-answer {
	font-size: .95rem; font-weight: 300;
	color: var(--text-2);
	line-height: 1.7;
	padding: 0 0 1.25rem;
	max-width: 720px;
	overflow: hidden;
	transition: height .32s cubic-bezier(.4, 0, .2, 1);
}
.faq-answer p { margin-bottom: .8em; }
.faq-answer p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
	.faq-answer { transition: none; }
}


/* ─── RELATED SECTORS ──────────────────────────────────────────
 * 3-up grid of cross-link cards at the foot of each sector page,
 * for crawl depth + reader navigation. */
.related-sectors { background: var(--bg-2); }
.related-sectors .label { text-align: left; }
.related-sectors-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 2rem;
}
.related-sector-card {
	position: relative;
	display: block;
	padding: 1.5rem 1.5rem 1.5rem;
	border: 1px solid var(--divide);
	border-radius: 16px;
	background: var(--bg);
	color: var(--text-1);
	text-decoration: none;
	transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.related-sector-card:hover {
	border-color: var(--blue);
	transform: translateY(-2px);
	box-shadow: 0 18px 40px -22px rgba(16,24,40,.18);
}
.related-sector-name {
	display: block;
	font-size: 1.05rem; font-weight: 600;
	color: var(--text-1);
	margin-bottom: .35rem;
}
.related-sector-sub {
	display: block;
	font-size: .82rem; font-weight: 300;
	color: var(--text-2);
	line-height: 1.5;
	padding-right: 1.5rem;
}
.related-sector-arrow {
	position: absolute; top: 1.5rem; right: 1.5rem;
	color: var(--text-3);
	transition: color .25s ease, transform .25s ease;
}
.related-sector-card:hover .related-sector-arrow {
	color: var(--blue);
	transform: translateX(3px);
}
@media (max-width: 900px) { .related-sectors-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .related-sectors-grid { grid-template-columns: 1fr; } }


/* ─── EOT CHIP (careers page) ──────────────────────────────────
 * Small inline marker shown above the culture heading. Communicates
 * employee ownership without taking up a full standalone banner. */
.eot-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--blue) 10%, var(--bg));
	border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
	color: var(--blue);
	font-size: .68rem; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase;
	margin-bottom: 1rem;
	white-space: nowrap;
}


/* ─── ENQUIRY CTA + INLINE UNFOLD ─────────────────────────────────
 * The CTA box stays in place; the CF7 form unfolds smoothly below it
 * via the grid-template-rows 0fr → 1fr trick (well-supported, no
 * fixed max-height fudge), with opacity + translateY for a polished
 * reveal. The whole unit visually reads as one card while collapsed. */
.enquiry-wrap { max-width: 880px; margin: 0 auto; }
.enquiry-cta {
	display: flex; align-items: center; justify-content: space-between;
	gap: 2rem; flex-wrap: wrap;
	padding: 2.5rem;
	border: 1px solid var(--divide);
	border-radius: 22px;
	background: var(--bg-2);
	transition: border-radius .35s ease;
}
.enquiry-cta-text { max-width: 560px; }
.enquiry-cta .btn { flex-shrink: 0; }
@media (max-width: 720px) { .enquiry-cta { padding: 1.75rem; } }

.enquiry-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 180px;
	border: 1px solid var(--blue);
	transition:
		background-color .35s cubic-bezier(.22,.9,.32,1),
		color           .35s cubic-bezier(.22,.9,.32,1),
		border-color    .35s cubic-bezier(.22,.9,.32,1),
		box-shadow      .25s ease,
		transform       .12s ease;
}
.enquiry-toggle:active { transform: scale(.97); }
/* Active (form open): inverts cleanly to an outline button. The transition
 * above ensures background/colour both ease through together rather than
 * snapping. */
.enquiry-toggle.is-active,
.enquiry-toggle.is-active:hover {
	background-color: transparent;
	color: var(--blue);
	border-color: var(--blue);
	opacity: 1;
	transform: none;
	box-shadow: none;
}

/* Collapsed state: zero-height grid track, hidden contents. The grid-row
 * trick lets us animate from 0 → natural height smoothly. */
.enquiry-panel {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transform: translateY(-8px);
	transition: grid-template-rows .45s cubic-bezier(.22,.9,.32,1),
	            opacity .3s ease,
	            transform .35s cubic-bezier(.22,.9,.32,1);
}
.enquiry-panel-inner {
	overflow: hidden;
	min-height: 0;
}
.enquiry-panel.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
	transform: none;
}
/* Visually fuse the unfolded form to the CTA above so it reads as one card. */
.enquiry-panel.is-open .enquiry-panel-inner {
	margin-top: -1px; /* eat the border seam */
	padding: 2.25rem 2.5rem 2.5rem;
	border: 1px solid var(--divide);
	border-top: 0;
	border-radius: 0 0 22px 22px;
	background: var(--bg);
	position: relative;
}
/* Close × pinned to the top-right of the unfolded panel. */
.enquiry-panel-close {
	position: absolute; top: 14px; right: 14px;
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--divide);
	border-radius: 50%;
	background: var(--bg);
	color: var(--text-1);
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
	z-index: 2;
}
.enquiry-panel-close:hover { background: var(--bg-2); border-color: var(--text-3); transform: scale(1.05); }
.enquiry-panel-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.enquiry-cta:has(+ .enquiry-panel.is-open),
.enquiry-panel.is-open ~ .enquiry-cta {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
@media (max-width: 720px) {
	.enquiry-panel.is-open .enquiry-panel-inner { padding: 1.75rem 1.5rem 2rem; }
}
@media (prefers-reduced-motion: reduce) {
	.enquiry-panel { transition: none; }
	.enquiry-toggle-icon { transition: none; }
}


/* ─── OFFICE ADDRESS COPY BUTTON ──────────────────────────────── */
.office-address-row {
	display: flex; align-items: flex-start; gap: 12px;
	flex-wrap: wrap;
	margin-bottom: .75rem;
}
.office-address {
	font-style: normal; font-size: .92rem; font-weight: 400;
	color: var(--text-2); line-height: 1.6;
	margin: 0;
	user-select: text; cursor: text;
}
.office-copy {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--divide);
	border-radius: 999px;
	background: var(--bg);
	color: var(--text-2);
	font-size: .72rem; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.office-copy:hover { background: var(--bg-2); border-color: var(--text-3); color: var(--text-1); }
.office-copy:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.office-copy.is-copied { border-color: var(--blue); color: var(--blue); }
.office-copy-icon { flex-shrink: 0; }


/* ─── CONTACT FORM (CF7) ─────────────────────────────────────────
 * Targets the default Contact Form 7 markup — each field arrives wrapped
 * in a <p>. We turn the whole form into a 2-column CSS grid and pull the
 * fields whose values run long (URLs, addresses, message, lead source)
 * across the full width via :has(). */
.contact-form-wrap { max-width: 880px; }
.contact-form-wrap .wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.contact-form-wrap .wpcf7-form > p { margin: 0; }
.contact-form-wrap .wpcf7-form > p:has(textarea),
.contact-form-wrap .wpcf7-form > p:has(select),
.contact-form-wrap .wpcf7-form > p:has(input[name="your-website"]),
.contact-form-wrap .wpcf7-form > p:has(input[name="site-address-1"]),
.contact-form-wrap .wpcf7-form > p:has(input[name="site-address-2"]),
.contact-form-wrap .wpcf7-form > p:has(input[type="submit"]),
.contact-form-wrap .wpcf7-form > .ph-cf7-recaptcha,
.contact-form-wrap .wpcf7-form > p:has(.ph-cf7-recaptcha) {
	grid-column: 1 / -1;
}
/* reCAPTCHA widget block — sits on its own row above the submit button. */
.contact-form-wrap .ph-cf7-recaptcha { margin: .25rem 0 .5rem; }
.contact-form-wrap .ph-cf7-recaptcha .g-recaptcha { display: inline-block; }

.contact-form-wrap .wpcf7-form label {
	display: flex; flex-direction: column; gap: .35rem;
	font-size: .72rem; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--text-2);
	width: 100%;
}

.contact-form-wrap .wpcf7-form input[type="text"],
.contact-form-wrap .wpcf7-form input[type="email"],
.contact-form-wrap .wpcf7-form input[type="tel"],
.contact-form-wrap .wpcf7-form input[type="url"],
.contact-form-wrap .wpcf7-form select,
.contact-form-wrap .wpcf7-form textarea {
	width: 100%;
	padding: .85rem 1rem;
	border: 1px solid var(--divide);
	border-radius: 12px;
	background: var(--bg);
	color: var(--text-1);
	font: inherit;
	font-size: .92rem; font-weight: 400;
	letter-spacing: 0; text-transform: none;
	line-height: 1.4;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
	-webkit-appearance: none; appearance: none;
}
.contact-form-wrap .wpcf7-form textarea { min-height: 160px; resize: vertical; }

.contact-form-wrap .wpcf7-form input::placeholder,
.contact-form-wrap .wpcf7-form textarea::placeholder { color: var(--text-3); }

.contact-form-wrap .wpcf7-form input:hover,
.contact-form-wrap .wpcf7-form select:hover,
.contact-form-wrap .wpcf7-form textarea:hover { border-color: var(--text-3); }

.contact-form-wrap .wpcf7-form input:focus,
.contact-form-wrap .wpcf7-form select:focus,
.contact-form-wrap .wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
	background: var(--bg);
}

/* Native select chevron */
.contact-form-wrap .wpcf7-form select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%237b7b7b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='1.5,1.75 6,6.25 10.5,1.75'/></svg>");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px 8px;
	padding-right: 2.5rem;
}

/* Submit button — match .btn-blue */
.contact-form-wrap .wpcf7-form input[type="submit"] {
	-webkit-appearance: none; appearance: none;
	display: inline-flex; align-items: center;
	padding: .85rem 1.9rem;
	border: 0; border-radius: 1440px;
	background: var(--blue); color: #fff;
	font-size: .9rem; font-weight: 500; letter-spacing: .01em;
	cursor: pointer;
	transition: opacity .2s ease, transform .15s ease;
	justify-self: start;
	margin-top: .5rem;
}
.contact-form-wrap .wpcf7-form input[type="submit"]:hover { opacity: .85; transform: translateY(-1px); }
.contact-form-wrap .wpcf7-form input[type="submit"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* CF7 messaging */
.contact-form-wrap .wpcf7-form .wpcf7-not-valid-tip {
	color: #b32d2e; font-size: .72rem; font-weight: 500;
	letter-spacing: 0; text-transform: none; margin-top: .3rem;
}
.contact-form-wrap .wpcf7-form .wpcf7-spinner { margin: 0 0 0 .75rem; }
.contact-form-wrap .wpcf7-form .wpcf7-not-valid {
	border-color: #b32d2e !important;
}
/* Hide CF7's default response output — we render feedback in the
 * .form-modal popup driven by JS hooks into wpcf7mailsent / wpcf7invalid /
 * wpcf7spam / wpcf7mailfailed. The output element itself stays in the DOM
 * for accessibility (CF7 mirrors the message into role="status"). */
.contact-form-wrap .wpcf7-response-output {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Consent line: Apple-style fine print sitting right after the submit
 * button. Subtle grey, no caps, narrow column, just there if you want it. */
.contact-form-wrap .wpcf7-form .form-consent {
	grid-column: 1 / -1;
	margin: .65rem 0 0;
	max-width: 520px;
	font-size: .72rem; font-weight: 400;
	letter-spacing: 0; text-transform: none;
	color: var(--text-3);
	line-height: 1.5;
}
.contact-form-wrap .wpcf7-form .form-consent a {
	color: var(--text-2);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--text-3) 60%, transparent);
	text-underline-offset: 2px;
	transition: color .2s ease, text-decoration-color .2s ease;
}
.contact-form-wrap .wpcf7-form .form-consent a:hover {
	color: var(--text-1);
	text-decoration-color: var(--text-2);
}

/* ── Form feedback modal ──────────────────────────────────────────
 * Apple-style success/error overlay shown after CF7 submit events.
 * Backdrop fades / blurs in; card eases up with a subtle spring; the
 * icon does a small scale + opacity pop a beat after the card. */
.form-modal {
	position: fixed; inset: 0; z-index: 1000;
	display: flex; align-items: center; justify-content: center;
	padding: 1.5rem;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear .35s;
}
.form-modal.is-open {
	visibility: visible;
	pointer-events: auto;
	transition: visibility 0s linear 0s;
}
.form-modal-backdrop {
	position: absolute; inset: 0;
	background: rgba(8, 12, 22, 0);
	backdrop-filter: blur(0);
	-webkit-backdrop-filter: blur(0);
	transition: background .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease;
}
.form-modal.is-open .form-modal-backdrop {
	background: rgba(8, 12, 22, .5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.form-modal-card {
	position: relative;
	width: min(420px, 100%);
	background: var(--bg);
	border-radius: 22px;
	border: 1px solid var(--divide);
	padding: 2.5rem 2rem 1.75rem;
	text-align: center;
	box-shadow:
		0 32px 80px -24px rgba(0,0,0,.45),
		0 12px 28px -10px rgba(0,0,0,.22);
	opacity: 0;
	transform: translateY(20px) scale(.94);
	transition:
		opacity .35s cubic-bezier(.22,.9,.32,1),
		transform .45s cubic-bezier(.34,1.45,.5,1);
}
.form-modal.is-open .form-modal-card {
	opacity: 1;
	transform: translateY(0) scale(1);
}
.form-modal-close {
	position: absolute; top: 14px; right: 14px;
	width: 30px; height: 30px;
	display: flex; align-items: center; justify-content: center;
	background: transparent; border: 0;
	border-radius: 50%;
	color: var(--text-3);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.form-modal-close:hover { background: var(--bg-2); color: var(--text-1); transform: scale(1.08); }
.form-modal-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.form-modal-icon {
	display: inline-flex;
	width: 68px; height: 68px;
	margin: .25rem auto 1.1rem;
	border-radius: 50%;
	align-items: center; justify-content: center;
	opacity: 0;
	transform: scale(.7);
	transition:
		opacity .3s ease .12s,
		transform .55s cubic-bezier(.34,1.7,.5,1) .12s,
		background .2s ease;
}
.form-modal.is-open .form-modal-icon {
	opacity: 1;
	transform: scale(1);
}
.form-modal.is-success .form-modal-icon { background: color-mix(in srgb, #2f8a4a 14%, transparent); color: #2f8a4a; }
.form-modal.is-error   .form-modal-icon { background: color-mix(in srgb, #b32d2e 14%, transparent); color: #b32d2e; }
.form-modal-icon svg { width: 42px; height: 42px; }
.form-modal-title {
	font-size: 1.3rem; font-weight: 600;
	color: var(--text-1);
	margin: 0 0 .5rem;
	letter-spacing: -.015em;
}
.form-modal-body {
	font-size: .92rem; font-weight: 300;
	color: var(--text-2);
	line-height: 1.55;
	margin: 0 auto 1.6rem;
	max-width: 320px;
}
.form-modal-cta {
	min-width: 132px;
	justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
	.form-modal-card,
	.form-modal-icon,
	.form-modal-backdrop { transition: opacity .15s ease; transform: none; }
}

@media (max-width: 720px) {
	.contact-form-wrap .wpcf7-form { grid-template-columns: 1fr; }
}

.emergency-banner {
  background: #06101e;
  color: #fff;
  padding: 3.5rem clamp(24px, 5vw, 80px);
}
.emergency-banner .inner {
  max-width: 1100px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem;
  align-items: center;
}
.emergency-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,183,27,.12);
  border: 1px solid rgba(255,183,27,.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--amber);
  flex-shrink: 0;
}
.emergency-body h3 {
  font-size: 1.15rem; font-weight: 700;
  color: #fff; margin: 0 0 .3rem;
}
.emergency-body p {
  font-size: .9rem; font-weight: 300;
  color: rgba(255,255,255,.6); margin: 0; line-height: 1.6;
}
.emergency-body a {
  color: var(--amber); text-decoration: none;
  border-bottom: 1px solid rgba(255,183,27,.3);
  transition: border-color .2s;
}
.emergency-body a:hover { border-color: var(--amber); }
.emergency-cta { background: var(--amber) !important; color: #000 !important; white-space: nowrap; }
@media (max-width: 720px) {
  .emergency-banner .inner { grid-template-columns: 1fr; text-align: center; gap: 1.25rem; }
  .emergency-icon { margin: 0 auto; }
  .emergency-cta { justify-self: center; }
}

/* ─── CAREERS: BENEFITS GRID ─── */
.benefits-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: 3rem;
}
.benefit-card {
  border: 1px solid var(--divide); border-radius: 18px;
  padding: 1.75rem 1.5rem;
  display: flex; flex-direction: column; gap: .85rem;
  transition: border-color .25s, background .25s, transform .25s;
  background: var(--bg);
}
.benefit-card:hover { border-color: var(--amber); background: var(--bg-2); transform: translateY(-2px); }
.benefit-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ico-color, #fff);
  background: var(--ico-bg, linear-gradient(135deg, #0071e3 0%, #2997ff 100%));
  flex-shrink: 0;
  transition: transform .35s cubic-bezier(.25,.46,.45,.94), filter .35s;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.22);
}
.benefit-card:hover .benefit-icon { transform: translateY(-2px) scale(1.04); filter: saturate(1.15); }
/* Per-card colour palettes keyed off the icon slug (set inline via --ico-bg).
 * Kept here as named classes so it's easy to recolour in one place. */
.benefit-icon.ico-blue    { --ico-bg: linear-gradient(135deg, #0071e3 0%, #2997ff 100%); }
.benefit-icon.ico-green   { --ico-bg: linear-gradient(135deg, #1a9857 0%, #30d158 100%); }
.benefit-icon.ico-amber   { --ico-bg: linear-gradient(135deg, #ff9f0a 0%, #ffd60a 100%); }
.benefit-icon.ico-orange  { --ico-bg: linear-gradient(135deg, #ff6d3d 0%, #ff9f0a 100%); }
.benefit-icon.ico-red     { --ico-bg: linear-gradient(135deg, #ff375f 0%, #ff6482 100%); }
.benefit-icon.ico-pink    { --ico-bg: linear-gradient(135deg, #ff2d55 0%, #ff7eb0 100%); }
.benefit-icon.ico-purple  { --ico-bg: linear-gradient(135deg, #5e5ce6 0%, #bf5af2 100%); }
.benefit-icon.ico-teal    { --ico-bg: linear-gradient(135deg, #0a7ea4 0%, #4cc9e4 100%); }
.benefit-icon.ico-graphite{ --ico-bg: linear-gradient(135deg, #30343a 0%, #545960 100%); }
.benefit-card h3 { font-size: .95rem; font-weight: 600; color: var(--text-1); line-height: 1.3; }
.benefit-card p { font-size: .82rem; font-weight: 300; color: var(--text-2); line-height: 1.65; }
@media (max-width: 1000px) { .benefits-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .benefits-grid { grid-template-columns: 1fr; } }

/* ─── SINGLE JOB PAGE ─── */
.job-header {
  position: relative;
  background: linear-gradient(135deg, #030d1e 0%, #0a1f3a 60%, #061225 100%);
  color: #fff;
  padding: 9rem clamp(24px, 5vw, 80px) 5rem;
  overflow: hidden;
}
body.admin-bar .job-header { padding-top: calc(9rem + 32px); }
@media (max-width: 782px) { body.admin-bar .job-header { padding-top: calc(9rem + 46px); } }
@media (max-width: 600px) { body.admin-bar .job-header { padding-top: 9rem; } }
.job-header::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 30%, rgba(0,92,185,.25) 0%, transparent 55%);
  pointer-events: none;
}
.job-header > .inner { position: relative; z-index: 1; }
.job-breadcrumb { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2rem; }
.job-breadcrumb a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .2s; }
.job-breadcrumb a:hover { color: var(--amber); }

.job-header-main { max-width: 820px; }
.job-logo {
  width: 72px; height: 72px;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
  padding: 10px;
  margin-bottom: 1.75rem;
  border: 1px solid rgba(255,255,255,.15);
}
.job-title {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.05;
  color: #fff; margin: 0 0 .75rem;
}
.job-company {
  font-size: 1.05rem; font-weight: 400;
  color: rgba(255,255,255,.75);
  margin: 0 0 1.75rem;
}
.job-meta-row {
  display: flex; flex-wrap: wrap; gap: .5rem .85rem;
  align-items: center;
  margin-bottom: 2.25rem;
}
.job-meta-item {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 400;
  color: rgba(255,255,255,.7);
}
.job-meta-item svg { flex-shrink: 0; opacity: .65; }
.job-meta-pill {
  padding: .3rem .8rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1440px;
  font-size: .68rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.job-meta-pill.job-type { background: var(--blue); border-color: transparent; color: #fff; }
.job-meta-item.job-posted { color: rgba(255,255,255,.45); font-size: .78rem; }

.job-header-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.job-header-cta .btn-blue { background: var(--amber); color: #111; }
.job-header-cta .btn-blue:hover { opacity: .92; }
.job-btn-ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }

.job-filled-banner {
  display: inline-block;
  padding: .7rem 1.5rem; border-radius: 1440px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  font-size: .85rem; font-weight: 500;
  color: rgba(255,255,255,.85);
  letter-spacing: .02em;
}

/* Body grid: article + sidebar */
.job-body-section { padding: 5rem clamp(24px, 5vw, 80px) 6rem; background: var(--bg); }
.job-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 4rem;
  align-items: start;
}
.job-body {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-2);
  min-width: 0;
}
.job-body h1, .job-body h2, .job-body h3, .job-body h4 {
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -.015em;
  line-height: 1.25;
}
.job-body h2 { font-size: 1.6rem; margin: 2.75rem 0 1rem; }
.job-body h3 { font-size: 1.2rem; margin: 2rem 0 .75rem; }
.job-body h4 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
.job-body p { margin-bottom: 1.1rem; }
.job-body ul, .job-body ol { margin: .75rem 0 1.5rem 1.25rem; }
.job-body li { margin-bottom: .45rem; }
.job-body strong { color: var(--text-1); font-weight: 600; }
.job-body a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(0,92,185,.3); transition: border-color .2s; }
.job-body a:hover { border-color: var(--blue); }
.job-body hr { border: none; border-top: 1px solid var(--divide); margin: 2.5rem 0; }
.job-body img { border-radius: 12px; margin: 1.5rem 0; }

.job-sidebar { position: sticky; top: 90px; }
body.admin-bar .job-sidebar { top: 122px; }
.job-side-card {
  background: var(--bg-2);
  border: 1px solid var(--divide);
  border-radius: 18px;
  padding: 1.75rem;
}
.job-side-card .label { margin-bottom: 1.25rem; }
.job-side-list {
  list-style: none; padding: 0; margin: 0 0 1.75rem;
  display: flex; flex-direction: column; gap: .9rem;
}
.job-side-list li {
  display: flex; flex-direction: column; gap: .15rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--divide);
}
.job-side-list li:last-child { border-bottom: none; padding-bottom: 0; }
.job-side-list li span {
  font-size: .66rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
}
.job-side-list li strong {
  font-size: .92rem; font-weight: 500;
  color: var(--text-1);
  line-height: 1.4;
}
.job-side-apply {
  display: block; text-align: center; width: 100%;
  padding: .9rem 1rem;
}
.job-side-link { margin-top: 1.25rem; text-align: center; }
.job-side-link a {
  font-size: .82rem; color: var(--text-2);
  text-decoration: none; transition: color .2s;
}
.job-side-link a:hover { color: var(--text-1); }

@media (max-width: 900px) {
  .job-body-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .job-sidebar { position: static; top: auto; order: -1; }
  .job-side-card { padding: 1.5rem; }
}
@media (max-width: 600px) {
  .job-header { padding: 7rem clamp(24px, 5vw, 80px) 4rem; }
  .job-logo { width: 56px; height: 56px; margin-bottom: 1.25rem; }
  .job-body-section { padding: 3.5rem clamp(24px, 5vw, 80px) 5rem; }
}

/* ─── WP JOB MANAGER LISTINGS ─── */
/* Hide filters/search UI, we list jobs directly. */
.job_filters, .job-manager-info { display: none !important; }

/* Outer UL becomes a grid of image cards. */
ul.job_listings {
  list-style: none !important;
  margin: 2.5rem 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
ul.job_listings li.no_job_listings_found,
.no_job_listings_found {
  list-style: none !important;
  padding: 3rem 2rem !important;
  text-align: center !important;
  color: var(--text-2) !important;
  font-size: .95rem !important;
  font-weight: 300 !important;
  background: var(--bg) !important;
  border: 1px solid var(--divide) !important;
  border-radius: 18px !important;
  margin: 0 !important;
  grid-column: 1 / -1 !important;
}

li.job-card,
ul.job_listings li.job-card,
ul.job_listings li.job_listing.job-card {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: #0a1a2e !important;
  aspect-ratio: 4 / 3 !important;
  box-shadow: none !important;
  position: relative !important;
  transition: transform .4s cubic-bezier(.25,.46,.45,.94) !important;
}
li.job-card:hover { transform: scale(1.018) !important; }
li.job-card.job-card-filled { opacity: .55; }

.job-card-link,
ul.job_listings li.job-card a.job-card-link,
ul.job_listings li.job_listing.job-card > a {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  line-height: normal !important;
  color: inherit !important;
  text-decoration: none !important;
  background: transparent !important;
}
ul.job_listings li.job-card a.job-card-link:hover,
ul.job_listings li.job_listing.job-card > a:hover,
ul.job_listings li.job-card a.job-card-link:focus,
ul.job_listings li.job_listing.job-card > a:focus { background: transparent !important; }

.job-card-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .6;
  transition: opacity .5s ease, transform .6s ease;
}
li.job-card:hover .job-card-bg { opacity: .75; transform: scale(1.04); }

.job-card-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.85) 100%);
}

.job-card-body {
  position: relative; z-index: 2;
  padding: 1.75rem;
  height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  color: #fff;
}

.job-card-tag {
  font-size: .62rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 .5rem;
}
.job-card-title {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
  color: #fff;
  margin: 0;
}

.job-card-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
.job-card-meta {
  display: flex; flex-direction: column; gap: .4rem;
  font-size: .82rem; font-weight: 400;
  color: rgba(255,255,255,.82);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.job-card-meta-item {
  display: inline-flex; align-items: center; gap: .45rem;
}
.job-card-meta-item svg { opacity: .7; flex-shrink: 0; }

.job-card-arrow {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7);
  flex-shrink: 0;
  transition: border-color .2s, background .2s, color .2s;
}
li.job-card:hover .job-card-arrow { border-color: var(--amber); background: var(--amber); color: #000; }

/* Empty-state case card shown when there are no published case studies yet */
.case-card-empty {
  background: linear-gradient(135deg, #0a1a2e 0%, #16325e 60%, #0d2a4a 100%);
  grid-column: 1 / -1;
  aspect-ratio: auto;
  min-height: 220px;
}
.case-card-empty::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 25%, rgba(0,92,185,.25) 0%, transparent 55%),
    radial-gradient(circle at 85% 90%, rgba(255,183,27,.18) 0%, transparent 55%);
  pointer-events: none;
}

.load_more_jobs {
  display: block !important;
  margin: 1.75rem auto 0 !important;
  padding: .75rem 1.75rem !important;
  background: var(--blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 1440px !important;
  font-size: .9rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: opacity .2s !important;
}
.load_more_jobs:hover { opacity: .82 !important; }

@media (max-width: 900px) {
  ul.job_listings { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  ul.job_listings { grid-template-columns: 1fr !important; }
  li.job-card { aspect-ratio: 5 / 3 !important; }
  .job-card-body { padding: 1.25rem; }
}

/* ─── CASE STUDIES (cards + listing) ─── */
#cases { background: #06101e; }
#cases .label { color: rgba(255,255,255,.35); }
#cases .title { color: #fff; }
.cases-head { margin-bottom: 3rem; }
.cases-head .title { font-size: clamp(1.8rem, 3vw, 2.75rem); max-width: 520px; }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Single / pair fallback: keep cards readable in the centre instead of
 * leaving 2/3 of the row empty when the archive is sparse. */
.case-grid--narrow { grid-template-columns: repeat(auto-fit, minmax(320px, 460px)); justify-content: center; }
.case-card {
  border-radius: 20px; overflow: hidden;
  position: relative; aspect-ratio: 4/3;
  background: #0a1a2e; cursor: pointer;
  transition: transform .4s cubic-bezier(.25,.46,.45,.94);
  text-decoration: none; display: block;
}
.case-card:hover { transform: scale(1.018); }
.case-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .55; transition: opacity .5s ease, transform .6s ease; }
.case-card:hover .case-card-bg { opacity: .7; transform: scale(1.04); }
/* Bottom-weighted veil so the text strip at the bottom is fully legible
 * against any underlying photo (was visibly bleeding through before). */
.case-card-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.05) 45%, rgba(0,0,0,.78) 80%, rgba(0,0,0,.92) 100%);
}
/* Content sits at the bottom against the heavy gradient; arrow lives at the
 * top-right out of the way. */
.case-card-body { position: relative; z-index: 2; padding: 1.5rem 1.6rem 1.4rem; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.case-card-arrow {
  position: absolute; top: 1.1rem; right: 1.1rem;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.35); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.85);
  transition: border-color .2s, background .2s, color .2s, transform .2s;
}
.case-card:hover .case-card-arrow { border-color: var(--amber); background: var(--amber); color: #000; transform: translate(2px, -2px); }
.case-card-customer {
  position: absolute; top: 1.1rem; left: 1.1rem;
  background: rgba(255,255,255,.95);
  padding: .55rem .8rem;
  border-radius: 9px;
  display: inline-flex; align-items: center;
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
}
.case-card-customer img { display: block; height: 36px; width: auto; max-width: 160px; object-fit: contain; }
.case-tag { font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.case-title { font-size: 1.2rem; font-weight: 700; color: #fff; line-height: 1.25; margin-top: .35rem; }
.case-desc {
  font-size: .8rem; color: rgba(255,255,255,.72); line-height: 1.6; margin-top: .55rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
/* Legacy class — older markup uses .case-arrow inside .case-card-body. */
.case-arrow { display: none; }

/* ─── CASE STUDY ARCHIVE / SINGLE ─── */
.page-head {
  padding: 10rem clamp(24px, 5vw, 80px) 4rem;
  background: var(--bg);
  border-bottom: 1px solid var(--divide);
}
.page-head .inner { text-align: center; }
.page-head .title { font-size: clamp(2.2rem, 5vw, 3.5rem); margin-top: .5rem; }
.page-head .body-copy { max-width: 560px; margin: 1.25rem auto 0; }

.case-archive { padding: 5rem clamp(24px, 5vw, 80px) 8rem; background: var(--bg); }
.case-archive .case-grid { grid-template-columns: repeat(3, 1fr); }

/* Case study single page — laid out like the rest of the site:
 * full-bleed hero, focused reading column, site-standard CTA, then
 * prev/next nav. Nothing else on the page uses the old .case-single wrapper.
 *
 * Hero reuses the existing #hero / .hero-bg / .hero-body pattern so the
 * parallax + logo fade-in from front-page.php / sector pages apply for free. */
/* Override the dc-hero body constraints so long case study titles have
 * room to breathe (the dc hero ships with 10vw side padding + 820px cap
 * which leaves ~430px for content on a 1920px screen). */
.case-hero .hero-body,
#hero.hero-dc.case-hero .hero-body {
  max-width: 1440px;
  padding: 0 clamp(24px, 5vw, 80px);
}
/* Align the hero logo to the same left edge as the title body and meta
 * strip — the dc-hero rule sets 10vw which leaves the logo indented. */
#hero.hero-dc.case-hero .hero-logo { left: clamp(24px, 5vw, 80px); }
/* Stronger selector to defeat #hero.hero-dc .hero-h1 (the case study hero
 * shares .hero-dc to inherit layout, but needs a more restrained title size
 * — otherwise long names like "NHS White Rose House" wrap word-by-word). */
#hero.hero-dc.case-hero .hero-h1,
.case-hero-h1 {
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.12;
  max-width: 18ch;
}
.case-hero-sub {
  max-width: 720px;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.65;
}
/* Customer logo chip on the case study hero — sits above the kicker label. */
.case-hero-customer {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.94);
  padding: .85rem 1.15rem;
  border-radius: 12px;
  margin-bottom: 1.6rem;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  opacity: 0;
  animation: fadeUp .8s ease .25s forwards;
}
.case-hero-customer img { display: block; height: 64px; width: auto; max-width: 260px; object-fit: contain; }
@media (max-width: 600px) {
  .case-hero-customer { padding: .65rem .85rem; border-radius: 10px; }
  .case-hero-customer img { height: 44px; max-width: 180px; }
}
/* Fallback for case studies with no featured image: use the standard Photuris
 * gradient so the hero never renders as a flat white strip. */
.case-hero--no-img .hero-bg {
  background: linear-gradient(135deg, #0a1a2e 0%, #06101e 100%);
}

/* The case body is a vertical stack of sections — prose, feature rows,
 * stats, media-led blocks, specs, quotes. Plain prose auto-centres into a
 * reading column; structural sections (.case-feature, .case-stats, etc.)
 * break out to the full content width. The outer shell gives horizontal
 * padding + a 1180px cap; no element has to worry about page gutters. */
.case-body-section {
  background: var(--bg);
  padding: 6rem clamp(24px, 5vw, 80px) 2rem;
}
.case-body-inner { max-width: 100%; padding: 0; }
.case-body-outer { max-width: 1440px; margin: 0 auto; }

/* Project facts strip — three equal cells (Customer / Sector / Value).
 * .case-meta--overlay slides it up so it straddles the hero/body boundary,
 * overlapping the bottom of the hero image like a fact card. */
.case-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1440px;
  margin: 0 auto 4rem;
  padding: 0;
  border: 1px solid var(--divide);
  border-radius: 14px;
  background: var(--bg-2);
  overflow: hidden;
}
/* In-hero overlay: pinned to the bottom of the hero so it sits in the
 * initial viewport without scrolling. The hero clips overflow, so the
 * strip stays fully on the photo rather than poking into the body. */
.case-meta--hero {
  position: absolute;
  left: clamp(24px, 5vw, 80px);
  right: clamp(24px, 5vw, 80px);
  bottom: 4rem;
  z-index: 4;
  margin: 0 auto;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 42px -12px rgba(0,0,0,.45), 0 6px 16px rgba(0,0,0,.18);
}
@media (max-width: 720px) {
  /* Drop the absolute-positioned hero meta out of overlay mode and let
   * it flow below the hero on mobile — the CTA buttons need the room. */
  .case-meta--hero {
    position: static;
    left: auto; right: auto; bottom: auto;
    margin: 1.5rem max(16px, 5vw) 0;
    grid-template-columns: 1fr;
    box-shadow: none;
  }
  .case-meta--hero .case-meta-cell {
    border-right: 0;
    border-bottom: 1px solid var(--divide);
    padding: 1rem 1.25rem;
  }
  .case-meta--hero .case-meta-cell:last-child { border-bottom: 0; }
}
.case-meta-cell {
  padding: 1.4rem 1.6rem;
  border-right: 1px solid var(--divide);
}
.case-meta-cell:last-child { border-right: 0; }
.case-meta-cell dt {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 .45rem;
}
.case-meta-cell dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.4;
}
.case-meta-empty { color: var(--text-3); font-weight: 400; }
@media (max-width: 720px) {
  .case-meta { grid-template-columns: 1fr; }
  .case-meta-cell { border-right: 0; border-bottom: 1px solid var(--divide); padding: 1rem 1.25rem; }
  .case-meta-cell:last-child { border-bottom: 0; }
}

.case-body { font-size: 1rem; line-height: 1.8; color: var(--text-2); }
/* All direct children share a single content edge — prose, headings,
 * kickers, feature rows, galleries, shots, kit grids, outcomes, blockquotes
 * — so the page reads as one consistent column. */
.case-body > h2,
.case-body > h3,
.case-body > h4,
.case-body > p,
.case-body > ul,
.case-body > ol,
.case-body > hr {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}
.case-body > hr {
  border: none; border-top: 1px solid var(--divide);
  margin-top: 4rem; margin-bottom: 4rem;
}

/* ─── CASE STUDY — FEATURE ROW ───
 * Apple-style alternating image + text. Break out of the reading column,
 * fill the full 1180px content band. `.flip` puts the image on the right. */
.case-body > .case-feature {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
  max-width: 1440px;
  margin: 5.5rem auto;
}
.case-body > .case-feature.flip { grid-template-columns: 1fr 1.05fr; direction: rtl; }
.case-body > .case-feature.flip > * { direction: ltr; }
.case-feature-img {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: 0 22px 60px -24px rgba(16,24,40,.18), 0 2px 6px -2px rgba(16,24,40,.06);
}
.case-feature-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.case-body > .case-feature:hover .case-feature-img img { transform: scale(1.04); }
/* Modifier: photos where the subject (a camera, a piece of test kit, a
 * UI screenshot) needs to keep its full aspect ratio rather than being
 * cropped to fill the 4:3 frame. Adds breathing room around the image. */
.case-feature-img.contain { background: var(--bg-2); }
.case-feature-img.contain img { object-fit: contain; padding: 1.5rem; }
.case-feature-img.contain:hover img,
.case-body > .case-feature:hover .case-feature-img.contain img { transform: none; }
.case-feature-text { padding: 0; }
.case-feature-text .label {
  font-size: .72rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 1rem;
}
.case-feature-text h2,
.case-feature-text .title {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  font-weight: 700; letter-spacing: -.015em; line-height: 1.12;
  color: var(--text-1);
  margin: 0 0 1.25rem;
}
.case-feature-text p {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-2);
  max-width: 460px;
}
.case-feature-text ul {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.case-feature-text ul li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .65rem;
  font-size: .95rem;
  color: var(--text-2);
  line-height: 1.6;
}
.case-feature-text ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber);
}

/* ─── CASE STUDY — FULL-BLEED HERO SHOT ───
 * A single big image mid-article — the Apple "this is the product" moment.
 * Breaks out wider than a feature row. */
.case-body > .case-shot {
  max-width: 1440px;
  margin: 5rem auto;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: 0 28px 70px -28px rgba(16,24,40,.22), 0 4px 10px -3px rgba(16,24,40,.08);
}
.case-body > .case-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-body > .case-shot.case-shot-tall { aspect-ratio: 4 / 3; }

/* ─── CASE STUDY — GALLERY GRID ───
 * 2-up or 3-up row of images for "here's the system on site" moments.
 * Square tiles so varied source photos still read as a cohesive unit.
 * Defaults to 3 columns; `.two-up` forces 2. Collapses cleanly on narrow
 * viewports (3 → 2 → 1). */
.case-body > .case-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 1440px;
  margin: 3rem auto;
}
.case-body > .case-gallery.two-up { grid-template-columns: repeat(2, 1fr); }
.case-body > .case-gallery .case-gallery-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: 0 14px 34px -18px rgba(16,24,40,.18), 0 2px 4px -1px rgba(16,24,40,.06);
  margin: 0;
}
.case-body > .case-gallery .case-gallery-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.case-body > .case-gallery .case-gallery-item:hover img { transform: scale(1.04); }
/* `contain` modifier — keep aspect ratio inside the fixed-size tile,
 * with breathing room around the image. */
.case-body > .case-gallery .case-gallery-item.contain { background: var(--bg-2); }
.case-body > .case-gallery .case-gallery-item.contain img { object-fit: contain; padding: 1.25rem; }
.case-body > .case-gallery .case-gallery-item.contain:hover img { transform: none; }
/* `fit` modifier — drop the forced square; the tile sizes to the image's
 * own aspect ratio. Useful for before/after comparisons where you want
 * the photo to read at its natural shape with no padding. */
.case-body > .case-gallery .case-gallery-item.fit {
  aspect-ratio: auto;
  background: transparent;
  box-shadow: none;
}
.case-body > .case-gallery .case-gallery-item.fit img {
  width: 100%; height: auto;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 14px 34px -18px rgba(16,24,40,.18), 0 2px 4px -1px rgba(16,24,40,.06);
}
.case-body > .case-gallery .case-gallery-item.fit:hover img { transform: none; }
@media (max-width: 900px) {
  .case-body > .case-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .case-body > .case-gallery,
  .case-body > .case-gallery.two-up { grid-template-columns: 1fr; }
  .case-body > .case-gallery .case-gallery-item { aspect-ratio: 4 / 3; }
}

/* ─── CASE STUDY — STATS BLOCK ─── */
.case-body > .case-stats {
  max-width: 1440px;
  margin: 5.5rem auto;
}
.case-body > .case-stats .label {
  text-align: center;
  font-size: .72rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-3);
  margin: 0 0 .75rem;
}
.case-body > .case-stats h2 {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 700; letter-spacing: -.015em;
  color: var(--text-1);
  text-align: center;
  margin: 0 0 2.5rem;
  max-width: 720px; margin-left: auto; margin-right: auto;
}
.case-body > .case-stats .stats-inline {
  margin-top: 0;
  /* Case studies can have 3, 4 or 5 stats. Override the generic 4-col
   * .stats-inline so a 5-cell row doesn't wrap one lonely cell underneath. */
  grid-template-columns: repeat(var(--stat-cols, 4), 1fr);
}
@media (max-width: 1100px) {
  .case-body > .case-stats .stats-inline { grid-template-columns: repeat(min(var(--stat-cols, 4), 3), 1fr); }
}
@media (max-width: 560px) {
  .case-body > .case-stats .stats-inline { grid-template-columns: repeat(2, 1fr); }
}
.case-body > .case-stats .stats-inline.stats-5 { --stat-cols: 5; }

/* ─── CASE STUDY — PULL QUOTE ─── */
.case-body > .case-quote,
.case-body > blockquote {
  max-width: 1440px;
  margin: 5rem auto;
  padding: 3rem clamp(1.5rem, 4vw, 3.5rem);
  background: var(--bg-2);
  border-radius: 22px;
  border: 1px solid var(--divide);
  position: relative;
}
.case-body > .case-quote::before,
.case-body > blockquote::before {
  content: '“';
  position: absolute;
  top: 1.5rem; left: 1.75rem;
  font-family: 'Syne', serif;
  font-size: 5rem;
  font-weight: 700;
  color: var(--amber);
  line-height: 1;
  opacity: .85;
  pointer-events: none;
}
.case-body > .case-quote p,
.case-body > blockquote p {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.4;
  color: var(--text-1);
  font-weight: 500;
  letter-spacing: -.01em;
  margin: 0;
  padding-left: 2rem;
  max-width: none;
}
.case-body > .case-quote cite,
.case-body > blockquote cite {
  display: block;
  margin-top: 1.25rem;
  padding-left: 2rem;
  font-size: .75rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ─── CASE STUDY — SECTION KICKER ───
 * Big "The Solution" / "The Outcome" section opener. Paired with prose
 * paragraphs underneath — used to anchor long bodies of copy and
 * prevent the "wall of text" feeling. */
.case-body > .case-kicker {
  max-width: 1440px;
  margin: 5rem auto 1.5rem;
  text-align: left;
}
.case-body > .case-kicker .label {
  font-size: .72rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--blue);
  margin: 0 0 .75rem;
}
.case-body > .case-kicker h2 {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
  color: var(--text-1);
  margin: 0;
  max-width: none;
}

/* ─── CASE STUDY — TECH SPEC GRID ───
 * 2-column card grid for listing the kit specified. Reuses .spec-card
 * styling from sector pages; scoped so any case-specific tweaks stay local. */
.case-body > .case-specs {
  max-width: 1440px;
  margin: 4rem auto 5rem;
}
.case-body > .case-specs .label {
  text-align: center;
  font-size: .72rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-3);
  margin: 0 0 .75rem;
}
.case-body > .case-specs h2 {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(1.75rem, 2.8vw, 2.4rem);
  font-weight: 700; letter-spacing: -.015em;
  color: var(--text-1);
  text-align: center;
  margin: 0 0 2.5rem;
}
.case-body > .case-specs .case-specs-grid {
  display: grid;
  /* Always a 3×2 grid on desktop (or 2×3 on tablet) — never a ragged row of
   * four or five with one orphan wrapping underneath. */
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) {
  .case-body > .case-specs .case-specs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .case-body > .case-specs .case-specs-grid { grid-template-columns: 1fr; }
}
.case-spec-card {
  background: var(--bg-2);
  border: 1px solid var(--divide);
  border-radius: 16px;
  padding: 1.5rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.case-spec-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--blue) 35%, var(--divide));
  box-shadow: 0 12px 28px -12px rgba(16,24,40,.12);
}
.case-spec-card .case-spec-tag {
  display: inline-block;
  font-size: .62rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue);
  margin-bottom: .55rem;
}
.case-spec-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--text-1);
  margin: 0 0 .5rem;
  line-height: 1.3;
}
.case-spec-card p {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
  max-width: none;
}

/* ─── CASE STUDY — OUTCOME CHECKLIST ───
 * Replaces the boring `<ul>` at the end of each study with a richer
 * two-column grid of checkmarked outcomes. */
.case-body > .case-outcomes {
  max-width: 1440px;
  margin: 4rem auto 5rem;
}
.case-body > .case-outcomes h2 {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(1.75rem, 2.8vw, 2.4rem);
  font-weight: 700; letter-spacing: -.015em;
  color: var(--text-1);
  text-align: center;
  margin: 0 0 2.5rem;
}
.case-body > .case-outcomes .case-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.case-body > .case-outcomes .case-outcomes-grid li {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1.2rem 1.3rem;
  background: var(--bg-2);
  border: 1px solid var(--divide);
  border-radius: 14px;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--text-1);
  margin: 0;
}
.case-body > .case-outcomes .case-outcomes-grid li::before {
  content: '';
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--amber) 20%, transparent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  margin-top: .08em;
}

/* Narrow viewports: collapse feature rows + tighten section rhythm. */
@media (max-width: 820px) {
  .case-body > .case-feature,
  .case-body > .case-feature.flip {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 2rem;
    margin: 3.5rem auto;
  }
  .case-body > .case-shot,
  .case-body > .case-stats,
  .case-body > .case-quote,
  .case-body > blockquote,
  .case-body > .case-specs,
  .case-body > .case-outcomes { margin: 3.5rem auto; }
  .case-feature-text p { max-width: none; }
  .case-body > .case-quote,
  .case-body > blockquote { padding: 2.25rem 1.5rem; }
  .case-body > .case-quote::before,
  .case-body > blockquote::before { top: .5rem; left: 1rem; font-size: 3.5rem; }
  .case-body > .case-quote p,
  .case-body > blockquote p { padding-left: 0; }
  .case-body > .case-quote cite,
  .case-body > blockquote cite { padding-left: 0; }
}
.case-body { font-size: 1rem; line-height: 1.8; color: var(--text-2); }
.case-body h2 { font-family: system-ui, -apple-system, sans-serif; font-weight: 700; letter-spacing: -.02em; color: var(--text-1); font-size: 1.75rem; margin: 3rem 0 1rem; }
.case-body h3 { font-family: system-ui, -apple-system, sans-serif; font-weight: 700; color: var(--text-1); font-size: 1.25rem; margin: 2.25rem 0 .85rem; }
.case-body p { margin-bottom: 1.25rem; }
.case-body ul, .case-body ol { margin: 1rem 0 1.5rem 1.5rem; }
.case-body li { margin-bottom: .5rem; }
.case-body a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(0,92,185,.3); transition: border-color .2s; }
.case-body a:hover { border-color: var(--blue); }
.case-body img { border-radius: 14px; margin: 2rem 0; }
.case-body figure { margin: 2rem 0; }
.case-body figure img { margin: 0; }
/* Images inside structural containers must fully fill their box — the
 * generic prose img rule above adds 2rem margin which otherwise leaves a
 * grey strip inside the rounded card. */
.case-feature-img img,
.case-body > .case-shot img,
.case-body > .case-gallery .case-gallery-item img {
  margin: 0; border-radius: 0;
}
.case-body figcaption {
  font-size: .8rem;
  color: var(--text-3);
  text-align: center;
  margin-top: .75rem;
  line-height: 1.5;
}
/* Hidden entirely — the project-details table that used to sit at the top
 * of every case study is now surfaced via the hero (title + tag + date) and
 * body copy. Markup kept intact in the post content for future layouts. */
.case-body .case-facts,
.case-body p.case-facts { display: none !important; }

/* Strip leading empty paragraph WP sometimes injects right after a hidden
 * block — avoids a phantom top gap on pages that have a case-facts first. */
.case-body > :first-child:empty { display: none; }

/* Image placeholder — refined Apple-style treatment: subtle frame, inline SVG icon,
 * caption in small-caps. No emoji. */
.case-image-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--divide);
  border-radius: 18px;
  background:
    linear-gradient(135deg, var(--bg-2) 0%, var(--bg) 100%);
  margin: 2.25rem 0;
  padding: 2rem;
  text-align: center;
  overflow: hidden;
}
.case-image-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(0,0,0,.015) 22px 23px);
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .case-image-placeholder::before {
    background: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.02) 22px 23px);
  }
}
.case-image-placeholder::after {
  content: '';
  display: block;
  width: 34px; height: 34px;
  margin-bottom: .1rem;
  background-color: var(--text-3);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='2'/><circle cx='8.5' cy='10' r='1.5'/><path d='M21 16l-5-5-9 9'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='2'/><circle cx='8.5' cy='10' r='1.5'/><path d='M21 16l-5-5-9 9'/></svg>") center/contain no-repeat;
  opacity: .55;
  order: -1;
  position: relative; z-index: 1;
}
.case-image-placeholder span {
  position: relative; z-index: 1;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  max-width: 480px;
  line-height: 1.55;
}

/* Pull-quote blockquote inside case bodies — larger, Apple-style, no bar. */
.case-body blockquote {
  margin: 3rem auto;
  padding: 0 0 0 2rem;
  border-left: 3px solid var(--amber);
  background: transparent;
  border-radius: 0;
  font-family: 'Syne', system-ui, -apple-system, sans-serif;
  font-size: clamp(1.25rem, 2.25vw, 1.75rem);
  font-weight: 600;
  font-style: normal;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--text-1);
  max-width: 720px;
}

/* ─── CASE STUDY — STRONG CTA BLOCK ───
 * Sits after the body, before prev/next. Warmer / weightier than the generic
 * ph_cta_block() — full-bleed dark surface, prominent heading, two actions
 * (primary contact + secondary call), and a subtle trust strip underneath. */
.case-cta {
  background: linear-gradient(135deg, #0a1a2e 0%, #06101e 100%);
  color: #fff;
  padding: 6rem clamp(24px, 5vw, 80px);
  position: relative;
  overflow: hidden;
}
/* Optional photographic backdrop layered behind the CTA copy. The veil
 * keeps text legible regardless of which photo is used. */
.case-cta-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .35;
  z-index: 0;
}
.case-cta-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(10,26,46,.78) 0%, rgba(6,16,30,.92) 100%);
  z-index: 0;
}
.case-cta::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 92, 185, .22), transparent 55%),
    radial-gradient(circle at 85% 70%, rgba(245, 158, 11, .12), transparent 50%);
  pointer-events: none;
  z-index: 1;
}
.case-cta-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.case-cta .label {
  color: rgba(255,255,255,.55);
  margin-bottom: .75rem;
}
.case-cta .title {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1.25rem;
}
.case-cta .body-copy {
  color: rgba(255,255,255,.72);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 2.5rem;
}
.case-cta-actions {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  justify-content: center;
}
.case-cta-btn {
  background: var(--amber) !important;
  color: #1a1a1a !important;
  border-color: var(--amber) !important;
  padding: .95rem 2rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: .005em;
  border-radius: 999px !important;
  box-shadow: 0 12px 32px -8px rgba(245, 158, 11, .4);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.case-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -10px rgba(245, 158, 11, .55);
}
.case-cta-secondary {
  background: transparent !important;
  color: rgba(255,255,255,.85) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  padding: .95rem 1.6rem !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  transition: border-color .2s, color .2s, background .2s !important;
}
.case-cta-secondary:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.4) !important;
  color: #fff !important;
}
.case-cta-trust {
  margin-top: 2.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem 2rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
}

/* ─── CASE STUDY — PREV / NEXT NAV ─── */
.case-nav {
  border-top: 1px solid var(--divide);
  padding: 3.5rem clamp(24px, 5vw, 80px) 5rem;
  background: var(--bg);
}
.case-nav .inner {
  max-width: 1040px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2.5rem;
}
.case-nav-col { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.case-nav-col--right { text-align: right; align-items: flex-end; }
.case-nav-label {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.case-nav-link {
  color: var(--text-1);
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  text-decoration: none;
  transition: color .2s ease, transform .3s ease;
  display: inline-block;
}
.case-nav-link:hover { color: var(--amber); transform: translateX(2px); }
.case-nav-col--right .case-nav-link:hover { transform: translateX(-2px); }

@media (max-width: 640px) {
  .case-nav .inner { grid-template-columns: 1fr; }
  .case-nav-col--right { text-align: left; align-items: flex-start; }
  .case-cta { padding: 4.5rem clamp(24px, 5vw, 80px); }
  .case-cta-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; margin: 0 auto; }
  .case-cta-actions .btn { width: 100%; justify-content: center; }
  .case-cta-trust { font-size: .64rem; gap: .3rem 1.25rem; }
}

/* ─── GENERIC WP PAGE / VERIFY CPT PAGE ─── */
.wp-page { padding: 10rem clamp(24px, 5vw, 80px) 6rem; background: var(--bg); }
.wp-page .inner { max-width: 820px; }
.wp-page h1 {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.07;
  color: var(--text-1); margin-bottom: 2rem;
}
.wp-page .page-content { font-size: 1rem; line-height: 1.8; color: var(--text-2); }
.wp-page .page-content h2, .wp-page .page-content h3 { color: var(--text-1); font-weight: 700; margin: 2rem 0 1rem; letter-spacing: -.02em; }
.wp-page .page-content h2 { font-size: 1.75rem; }
.wp-page .page-content h3 { font-size: 1.25rem; }
.wp-page .page-content p { margin-bottom: 1.25rem; }
.wp-page .page-content ul, .wp-page .page-content ol { margin: 1rem 0 1.5rem 1.5rem; }
.wp-page .page-content a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(0,92,185,.3); }

/* ─── FOOTER ─── */
footer {
  background: var(--bg-2);
  border-top: 1.5px solid var(--amber);
  padding: 4.5rem clamp(24px, 5vw, 80px) 2.5rem;
}
.foot-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3.5rem; }
.foot-logo { margin-bottom: 1.5rem; }
.foot-logo img { height: 64px; width: auto; }
@media (max-width: 1000px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (prefers-color-scheme: dark) { .foot-logo img { filter: brightness(1.3); } }
.foot-tag { font-size: .875rem; font-weight: 300; color: var(--text-2); line-height: 1.72; max-width: 280px; }
.foot-col h4 { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-1); margin-bottom: 1.1rem; }
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.foot-col a { font-size: .875rem; font-weight: 300; color: var(--text-2); text-decoration: none; transition: color .2s; }
.foot-col a:hover { color: var(--text-1); }
.foot-bottom { border-top: 1px solid var(--divide); padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.foot-bottom p { font-size: .78rem; color: var(--text-3); }

/* ─── RESPONSIVE ─── */
@media (max-width: 1440px) {
  .card-grid { grid-template-columns: repeat(4, 1fr); }
  .card-grid--sectors { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1000px) {
  .card-grid--sectors { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .who-grid { grid-template-columns: repeat(3, 1fr); }
  .commitment-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid--sectors { grid-template-columns: repeat(2, 1fr); }
  .disc-grid { grid-template-columns: repeat(12, 1fr); }
  .disc-grid .scard { grid-column: span 3; }
  /* Sector cards are 2-up + narrower here — strengthen the veil so the
   * tag/title/description sit on a consistent dark surface rather than
   * fighting a busy photo. The image still shows through at ~75% opacity. */
  .scard-photo { opacity: .75; }
  .scard-veil {
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.5) 0%,
        rgba(0,0,0,.22) 35%,
        rgba(0,0,0,.35) 60%,
        rgba(0,0,0,.72) 100%);
  }
  .dc-inner { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .frow, .frow.flip { grid-template-columns: 1fr; direction: ltr; }
  .fimg { min-height: 300px; }
  .ftext { padding: 4rem clamp(24px, 5vw, 80px); }
  .ftext p { max-width: 100%; }
  .foot-grid { grid-template-columns: 1fr; gap: 2rem; }
  .services-head-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .case-archive .case-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  /* Mobile: nav text needs more contrast against page content scrolling
   * underneath the translucent bar — bump opacity in solid / inner-page state. */
  #nav.solid,
  body.has-no-hero #nav {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* Emergency pill collapses to icon-only at narrow widths to save room */
  .nav-emergency { padding: 8px; gap: 0; border-radius: 999px; }
  .nav-emergency-text { display: none; }
  .nav-emergency-icon { width: 24px; height: 24px; }
  .nav-right { gap: .5rem; }
  /* Closed state: panel is rendered (so transitions can run) but invisible
   * and offset upward; opening flips opacity / translate. */
  .nav-links {
    display: flex; flex-direction: column; align-items: stretch;
    position: fixed; top: 56px; left: 0; right: 0;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    background: var(--bg);
    padding: .5rem 0 1.25rem;
    gap: 0;
    border-bottom: 1px solid var(--divide);
    box-shadow: 0 18px 40px -20px rgba(0,0,0,.18);
    opacity: 0;
    transform: translateY(-12px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .nav-links.open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
  }
  .nav-links > li { width: 100%; }
  .nav-links > li > a {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 1rem;
    color: var(--text-1) !important;
    padding: .95rem clamp(24px, 5vw, 80px);
    border-bottom: 1px solid var(--divide);
  }
  .nav-links > li:last-child > a { border-bottom: 0; }
  /* Sectors trigger: chevron on the right, rotates when expanded. The "::after"
   * arrow from the desktop dropdown is hidden on mobile — we draw our own. */
  .nav-links.open .nav-dropdown > a::after { display: none; }
  .nav-links.open .nav-dropdown > a {
    background-image:
      linear-gradient(45deg, transparent 50%, currentColor 50%),
      linear-gradient(-45deg, transparent 50%, currentColor 50%);
    background-position:
      calc(100% - clamp(24px, 5vw, 80px) - 8px) 50%,
      calc(100% - clamp(24px, 5vw, 80px)) 50%;
    background-size: 8px 1.5px, 8px 1.5px;
    background-repeat: no-repeat;
    transition: background-position .2s;
  }
  .nav-links.open .nav-dropdown.is-open > a {
    background-image:
      linear-gradient(-45deg, transparent 50%, currentColor 50%),
      linear-gradient(45deg, transparent 50%, currentColor 50%);
  }
  /* Mobile: the sectors dropdown is collapsed by default — only show when
   * the parent gets the .is-open class via the mobile JS toggle. */
  #nav .nav-links.open .nav-dropdown-menu,
  #nav .nav-links.open .nav-dropdown-menu.nav-mega {
    position: static !important;
    transform: none !important;
    pointer-events: all !important;
    background: var(--bg-2) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
    flex-direction: column;
    gap: 0;
    left: auto !important;
    /* Collapsed by default — animate height when expanded. */
    display: block !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height .25s ease, opacity .2s ease;
  }
  #nav .nav-links.open .nav-dropdown.is-open .nav-dropdown-menu {
    max-height: 800px;
    opacity: 1;
    visibility: visible;
  }
  #nav .nav-links.open .nav-dropdown-menu li { width: 100%; }
  #nav .nav-links.open .nav-dropdown-menu li a {
    display: block;
    font-size: .92rem !important;
    padding: .75rem clamp(36px, 7vw, 96px) !important;
    color: var(--text-2) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--divide);
  }
  #nav .nav-links.open .nav-dropdown-menu li:last-child a { border-bottom: 0; }
  #nav .nav-links.open .nav-dropdown-menu li a:hover,
  #nav .nav-links.open .nav-dropdown-menu li a.nav-current {
    color: var(--text-1) !important;
    background: transparent !important;
  }
  /* Match the hero-mode rule's specificity (1 ID + 4 classes) so the
   * mobile dark-on-light text wins over `#nav:not(.solid) .nav-dropdown-menu.nav-mega .nav-mega-title { color: #fff }`. */
  #nav .nav-links.open .nav-dropdown-menu.nav-mega .nav-mega-title {
    color: var(--text-1) !important;
    font-size: .95rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }
  #nav .nav-links.open .nav-dropdown-menu .nav-mega-sub { display: none !important; }
  .stats-row { grid-template-columns: 1fr; }
  .stat + .stat::before { top: 0; left: 15%; right: 15%; width: auto; height: 1px; bottom: auto; }
  .stages-wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .stages-wrap::before { display: none; }
  .service-icon-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-inline { grid-template-columns: repeat(2, 1fr); }
  /* When a 3-stat strip wraps to 2 columns the lonely 3rd item gets
   * a half-empty row beside it — span it full-width so the layout
   * reads as a balanced 2 + 1. */
  .stats-inline > .stat-inline-item:nth-child(3):last-child { grid-column: 1 / -1; }
  .section { padding: 5.5rem clamp(24px, 5vw, 80px); }
}
@media (max-width: 560px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid--sectors { grid-template-columns: repeat(2, 1fr); }
  .disc-grid { grid-template-columns: repeat(4, 1fr); }
  .disc-grid .scard { grid-column: span 2; }
  .scard { aspect-ratio: 4/3; }
  .scard-desc { display: none; }
  /* Cards are smaller + photos have more visual noise at this size, so
   * push the photo down and darken the veil noticeably so the tag + title
   * always stays readable. Also trim title size so it never overflows. */
  .scard-photo { opacity: .68; }
  .scard-veil {
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.55) 0%,
        rgba(0,0,0,.35) 40%,
        rgba(0,0,0,.55) 70%,
        rgba(0,0,0,.78) 100%);
  }
  .scard-title { font-size: 1.02rem; line-height: 1.15; }
  .scard-tag { font-size: .52rem; padding: .22rem .5rem; }
  .service-icon-grid { grid-template-columns: repeat(2, 1fr); }
  .who-grid { grid-template-columns: repeat(2, 1fr); }
  .case-grid { grid-template-columns: 1fr; }
  .case-archive .case-grid { grid-template-columns: 1fr; }
  .commitment-grid { grid-template-columns: 1fr; }
  .hero-btns { flex-direction: column; align-items: flex-start; }
}


/* ────────────────────────────────────────────────────────────────
 * BIG-SCREEN SCALING — must live at the very end of the file so it
 * wins the cascade against later-declared section rules (e.g. the
 * shorthand `padding: 7rem clamp(...)` on .intro-split, .stats-strip,
 * etc.).
 *
 * Master content width is 1440px (Apple-style). On viewports above
 * 1280px:
 *   - sections that already wrap content in .inner just keep working
 *     (they're already 1440px-capped; backgrounds go full-bleed)
 *   - sections without an .inner wrapper (.intro-split, .stats-strip)
 *     get padding-inline calc() so their content sits at the same
 *     x-position as a centred 1440px .inner
 *   - the fixed nav and the hero text get the same alignment
 * ──────────────────────────────────────────────────────────────── */
@media (min-width: 1280px) {
  /* All sections WITHOUT an inner wrapper (their content sits directly
   * in the section) get padding-inline alignment so the content edges
   * line up with a centred 1440px column. */
  .intro-split,
  .stats-strip,
  #nav,
  footer {
    padding-inline: max(clamp(24px, 5vw, 80px), calc((100vw - 1440px) / 2)) !important;
  }

  /* Hero: shift text box right via margin-left (NOT padding-left,
   * which would crush the inner content area). Logo absolute-positioned
   * via `left:` is fine — no inner content to crush. */
  .hero-body {
    margin-left: max(0px, calc((100vw - 1440px) / 2 - clamp(24px, 8vw, 96px)));
  }
  #hero.hero-dc .hero-body {
    margin-left: max(0px, calc((100vw - 1440px) / 2 - clamp(48px, 10vw, 120px)));
  }
  .hero-logo {
    left: max(clamp(24px, 8vw, 96px), calc((100vw - 1440px) / 2));
  }
  #hero.hero-dc .hero-logo {
    left: max(clamp(48px, 10vw, 120px), calc((100vw - 1440px) / 2));
  }

  /* Homepage media grids — keep tiles at a sensible reading size. */
  #services .inner,
  #sectors .inner { max-width: 1280px; }

  /* Homepage feature rows (Approach + Nationwide Reach) — 2-column
   * grid with grey text panel left, image right (or flipped). The
   * row goes full-bleed so the grey background and image extend to
   * the screen edge; the text inside aligns with the centred 1440px
   * content edge via padding-inline calc(). */
  .ftext {
    padding-left: max(clamp(24px, 5vw, 80px), calc((100vw - 1440px) / 2));
  }
  .frow.flip .ftext {
    padding-left: clamp(24px, 5vw, 80px);
    padding-right: max(clamp(24px, 5vw, 80px), calc((100vw - 1440px) / 2));
  }

  /* Cap card grids so individual tiles stay a sensible size even
   * inside the 1440px master. Each grid gets centred at its own
   * narrower max-width — cards keep their visual weight, the grid
   * just doesn't fill the screen. */
  .service-icon-grid,
  .who-grid,
  .spec-grid,
  .commitment-grid,
  .risk-grid,
  .related-sectors-grid,
  .case-grid,
  .partner-stack-grid,
  .values-grid,
  .grade-grid {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Cap embedded videos / iframes + Heritage Fogtec nozzle. !important
   * because the heritage / datacentres pages use inline
   * `style="margin:2rem 0 0"` on the <figure> that would otherwise
   * override margin auto. */
  figure:has(iframe[src*="youtube"]),
  figure:has(img[alt*="watermist nozzle"]),
  figure:has(img[alt*="Fogtec"]),
  .video-frame {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Homepage scroll-reveal feature rows — cap the image cell so the
   * photo doesn't stretch tall when the text column has lots of
   * content (or when the row is given extra height by ulist items).
   * The image stays centred in its column at a max-height of 560px;
   * the text panel can still be taller without dragging the photo. */
  .frow { align-items: center; }
  .fimg {
    max-height: 560px;
    align-self: center;
  }
}