/* ============================================================================
   WELL RUN · SIGNAL SYSTEM
   Signal Core — design tokens, page shell & shared components.
   Foundation layer: every page and page-module builds on these :root tokens.
   Namespaces: .wr-* (system), #siteHeader / #fsMenu (shell).
   ============================================================================ */
:root {
  --wr-black:   #0D0A07;
  --wr-hero:    #0A0705;
  --wr-yellow:  #FFD800;
  --wr-orange:  #F04923;
  --wr-white:   #F2F2F2;
  --wr-grad:           linear-gradient(90deg,  #FFD800, #F04923);
  --wr-grad-diag:      linear-gradient(135deg, #FFD800, #F04923);
  --wr-white-95: #F2F2F2F2;
  --wr-white-75: #F2F2F2BF;
  --wr-white-65: #F2F2F2A6;
  --wr-white-45: #F2F2F273;
  --wr-white-38: #F2F2F261;
  --wr-white-10:       #F2F2F21A;
  --wr-white-08:       #F2F2F214;
  --wr-white-16:       #F2F2F229;
  --wr-black-40: #0D0A0766;
  --wr-black-15: #0D0A0726;
  --wr-black-06: #0D0A070F;
  --wr-black-04: #0D0A070A;
  --wr-black-03: #0D0A0708;
  --wr-hero-30:        #0A07054D;
  --wr-hero-60:        #0A070599;
  --wr-hero-55:        #0A07058C;
  --wr-hero-50:        #0A070580;
  --wr-hero-25:        #0A070540;
  --wr-hero-20:        #0A070533;
  --wr-glass-08:       rgba(255,255,255,0.08);
  --wr-glass-14:       rgba(255,255,255,0.14);
  --wr-glass-16:       rgba(255,255,255,0.16);
  --wr-glass-90:       rgba(242,242,242,0.90);
  --wr-glass-95:       rgba(242,242,242,0.95);
  --wr-shadow-sm: 0 2px 8px rgba(13,10,7,0.10);
  --wr-shadow-md: 0 4px 24px rgba(13,10,7,0.14), 0 0 0 1px rgba(13,10,7,0.05);
  --wr-ui-dark:        #0D0A07;
  --wr-ui-mid:         #0D0A07CC;  ;
  --wr-ui-muted:       #0D0A0773; ;
  --wr-font:       'Sora', system-ui, sans-serif;
  --drop-mono:     ui-monospace, SFMono-Regular, Menlo, 'Liberation Mono', monospace;
  --wr-radius-pill:          9999px;
  --wr-radius-card:          24px;
  --wr-radius-sm:            12px;
  --wr-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --wr-ease-strong: cubic-bezier(0.12, 1, 0.2, 1);
  --wr-ease-spring: cubic-bezier(0.16, 1, 0.30, 1);
  --wr-max-width:     1280px;
  --wr-nav-height:     72px;
  --wr-pad-x:         clamp(20px, 5vw, 80px);
  --wr-pad-y:          clamp(80px, 10vh, 140px);
  --wr-grad-vert:      linear-gradient(180deg, #FFD800, #F04923);
  /* Extended tokens */
  --wr-black-50: #0D0A0780;
  --wr-black-10: #0D0A071A;
  --wr-black-08: #0D0A0714;
  --wr-hero-62:  #0A07059E;
  --wr-hero-72:  #0A0705B8;
  --wr-hero-90:  #0A0705E6;
  --wr-hero-18:  #0A07052E;
  --wr-glass-light:   rgba(255,255,255,0.08);
  --wr-glass-mid:     rgba(255,255,255,0.14);
  --wr-glass-border:  rgba(255,255,255,0.18);
  --wr-glass-frosted: rgba(242,242,242,0.90);
  --wr-radius-collapsed:     44px;
  --wr-radius-collapsed-mob: 34px;
  --wr-trans-fast: 0.2s ease;
  --wr-trans-slow: 0.4s ease;
  --wr-header-height: 72px;
  --wr-section-pad-x: var(--wr-pad-x);
  --wr-section-pad-y: clamp(80px, 10vh, 130px);
  --wr-black-38:     #0D0A0761;
  --wr-black-72:     #0D0A07B8;
  --wr-card-border:  #0D0A071A;
  --wr-card-bg:      #0D0A070A;
}

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

html {
  scroll-behavior: smooth;
  background-color: #0A0705;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  overflow-y: scroll;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--wr-black-15) transparent;
}

html::-webkit-scrollbar { width: 6px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
  background: var(--wr-black-15);
  border-radius: var(--wr-radius-pill);
}
html::-webkit-scrollbar-thumb:hover { background: var(--wr-black-40); }

body {
  font-family: var(--wr-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--wr-black);

  background-color: var(--wr-white);

  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

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

a { color: inherit; text-decoration: none; }

button { font-family: var(--wr-font); border: none; background: none; cursor: pointer; }

/* Thin on-brand scrollbar — Webkit/Blink only; FF uses scrollbar-width:thin */

.wr-noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

#scrollProgress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: var(--wr-grad);
  z-index: 1100; transform-origin: left; transform: scaleX(0);
  opacity: 0; pointer-events: none; transition: opacity 0.4s;
}
#scrollProgress.is-on { opacity: 1; }

#siteHeader {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 12px 18px;
  display: flex; flex-direction: column; gap: 7px;
  pointer-events: none;
  /* Fade-only entrance (NO transform). A transform on #siteHeader — even a
     lingering identity/offset from a fill-mode — disables backdrop-filter on
     the glass pills inside it, so the header must never carry a transform. */
  animation: hdrin 0.6s var(--wr-ease-out) both;
}
@keyframes hdrin {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#siteHeader > * { pointer-events: auto; }

/* ── Viewport-edge progressive blur ─────────────────────────────────────────
   A very subtle "out of focus" fade at the bottom edge of the viewport: four
   stacked backdrop-filter layers, each masked to a band with increasing blur,
   so content softly defocuses toward the very bottom. Injected by components.js. */
.wr-edge-blur { position: fixed; left: 0; right: 0; bottom: 0; height: 90px; z-index: 90; pointer-events: none; opacity: 1; transition: opacity 0.35s ease; }
/* Fades out once the footer is reached (set by components.js) so the bottom
   blur never sits over the footer content. */
.wr-edge-blur.is-hidden { opacity: 0; }
.wr-edge-blur > span { position: absolute; inset: 0; display: block; }
.wr-edge-blur > span:nth-child(1) { -webkit-backdrop-filter: blur(0.5px); backdrop-filter: blur(0.5px);
  -webkit-mask-image: linear-gradient(to top, transparent 52%, #000 78%, #000 100%); mask-image: linear-gradient(to top, transparent 52%, #000 78%, #000 100%); }
.wr-edge-blur > span:nth-child(2) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
  -webkit-mask-image: linear-gradient(to top, transparent 34%, #000 55%, #000 72%, transparent 90%); mask-image: linear-gradient(to top, transparent 34%, #000 55%, #000 72%, transparent 90%); }
.wr-edge-blur > span:nth-child(3) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to top, transparent 16%, #000 34%, #000 52%, transparent 70%); mask-image: linear-gradient(to top, transparent 16%, #000 34%, #000 52%, transparent 70%); }
.wr-edge-blur > span:nth-child(4) { -webkit-backdrop-filter: blur(3.5px); backdrop-filter: blur(3.5px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 22%, transparent 46%); mask-image: linear-gradient(to top, #000 0%, #000 22%, transparent 46%); }

/* Top bar */
#topBar {
  width: 100%; height: 0; border-radius: var(--wr-radius-pill);
  background: var(--wr-grad);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; overflow: hidden; opacity: 0;
  transition: height 0.3s var(--wr-ease-out), opacity 0.3s ease;
}
#siteHeader.is-scrolled #topBar { height: 36px; opacity: 1; }

.wr-tb-left { display: flex; align-items: center; gap: 18px; }
.wr-tb-left a {
  font-size: 11.5px; font-weight: 600; color: var(--wr-white);
  text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
  letter-spacing: 0.02em; transition: opacity 0.18s, color 0.18s; opacity: 0.9;

}
.wr-tb-left a:hover { opacity: 1; color: var(--wr-black); }

.wr-tb-left a svg { width: 11px; height: 11px; fill: var(--wr-white-75); flex-shrink: 0; transition: fill 0.18s; }
@media (hover: hover) and (pointer: fine) {
  .wr-tb-left a:hover svg { fill: var(--wr-black); }
}

.wr-tb-left a + a::before { content: '·'; margin-right: 4px; color: var(--wr-white-45); }
.wr-tb-right { display: flex; align-items: center; gap: 1px; }
.wr-tb-right a {
  display: flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 50%;
  opacity: 0.75; transition: opacity 0.18s, background 0.18s;
}

.wr-tb-right a:hover { opacity: 1; background: var(--wr-glass-16); }
.wr-tb-right svg { width: 13px; height: 13px; fill: var(--wr-white); }
/* language switcher inside the gradient top bar — plain white items */
.wr-tb-lang { display: none; align-items: center; gap: 1px; }
.wr-tb-lang .wr-lang-item { color: var(--wr-white); opacity: 0.6; padding: 6px 7px; background: none; -webkit-text-fill-color: currentColor; }
.wr-tb-lang .wr-lang-item[aria-current="true"] { opacity: 1; font-weight: 800; background: none; -webkit-text-fill-color: currentColor; }
@media (hover: hover) and (pointer: fine) { .wr-tb-lang .wr-lang-item:hover { opacity: 1; color: var(--wr-white); background: none; -webkit-text-fill-color: currentColor; } }
/* phone + email in the nav pill — adapts dark→light with the pill (is-scrolled) */
.wr-spacer-contact { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: nowrap; }
.wr-spacer-contact a { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--wr-white); text-decoration: none; opacity: 0.9; white-space: nowrap; transition: color 0.2s, opacity 0.2s; }
.wr-spacer-contact a svg { width: 12px; height: 12px; fill: currentColor; flex-shrink: 0; }
#siteHeader.is-scrolled .wr-spacer-contact a { color: var(--wr-black); }
@media (hover: hover) and (pointer: fine) { .wr-spacer-contact a:hover { opacity: 1; } }

/* Nav row */
#navBar { display: flex; align-items: center; gap: 10px; height: 48px; }

/* Logo pill */
#navBar .wr-header__logo {
  flex-shrink: 0; text-decoration: none;
  display: flex; align-items: center;
  height: 48px; padding: 0 18px;
  border-radius: var(--wr-radius-pill);

  background: var(--wr-glass-14);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: transform 0.25s var(--wr-ease-spring), background 0.3s var(--wr-ease-out), box-shadow 0.3s var(--wr-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  #navBar .wr-header__logo:hover { transform: scale(1.05); background: var(--wr-glass-14); }
}
#siteHeader.is-scrolled #navBar .wr-header__logo {

  background: var(--wr-glass-90);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--wr-shadow-md);
}
@media (hover: hover) and (pointer: fine) {
  #siteHeader.is-scrolled #navBar .wr-header__logo:hover { background: var(--wr-white); }
}
#navBar .wr-header__logo svg { height: 24px; width: auto; display: block; }
/* Logo is the original static brand mark — a single yellow→orange gradient,
   no shimmer animation (light or dark, desktop or mobile). */

/* Links pill */
#linksPill {
  flex: 1; height: 48px; border-radius: var(--wr-radius-pill);
  display: grid;
  grid-template-columns: auto 1fr auto; /* [lang] [links centred] [spacer] */
  align-items: center;
  padding: 0 6px;
  background: var(--wr-glass-14);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: background 0.3s var(--wr-ease-out), box-shadow 0.3s var(--wr-ease-out);
}
#siteHeader.is-scrolled #linksPill {
  background: var(--wr-glass-90);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--wr-shadow-md);
}
/* Lang switch inside linksPill */
.wr-links-lang {
  display: flex; align-items: center; gap: 1px;
  padding: 0 4px; flex-shrink: 0;
}
.wr-links-lang--spacer {
  pointer-events: none; visibility: hidden; /* mirrors real lang width exactly */
}
/* lang-item — same style as #linksPill ul li a, no background shape */
.wr-lang-item {
  display: inline-flex; align-items: center;
  padding: 7px 8px; border-radius: var(--wr-radius-pill);
  font-family: var(--wr-font); font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none;
  color: var(--wr-white); background: transparent;
  transition: color 0.2s, opacity 0.2s;
  opacity: 0.45; line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .wr-lang-item:hover {
    background: var(--wr-grad);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; opacity: 1;
  }
}
.wr-lang-item[aria-current="true"] {
  background: var(--wr-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; background-size: 100% auto;
  opacity: 1; font-weight: 800;
}
/* Scrolled (bright) state — match page links dark style */
#siteHeader.is-scrolled .wr-lang-item { color: var(--wr-black); }
@media (hover: hover) and (pointer: fine) {
  #siteHeader.is-scrolled .wr-lang-item:hover { color: var(--wr-black-40); background: transparent; -webkit-text-fill-color: unset; }
}
#siteHeader.is-scrolled .wr-lang-item[aria-current="true"] {
  background: var(--wr-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Nav links — centred in the middle column */
#linksPill ul { display: flex; align-items: center; justify-content: center; list-style: none; gap: 1px; }
#linksPill ul li a {
  display: inline-flex; align-items: center;
  padding: 7px 12px; border-radius: var(--wr-radius-pill);
  font-family: var(--wr-font); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none;
  color: var(--wr-white); background: transparent;
  transition: color 0.2s;
}
/* Hover: text dims slightly, no background shape */
@media (hover: hover) and (pointer: fine) {
  #linksPill ul li a:hover { color: var(--wr-white-45); background: transparent; }
}
/* Active: brand gradient text, bold, no background shape */
#linksPill ul li.is-active a {
  background: var(--wr-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; background-size: 100% auto; font-weight: 800;
}
@media (hover: hover) and (pointer: fine) {
  #linksPill ul li.is-active a:hover { opacity: 0.75; }
}
#siteHeader.is-scrolled #linksPill ul li a { color: var(--wr-black); }
@media (hover: hover) and (pointer: fine) {
  #siteHeader.is-scrolled #linksPill ul li a:hover { color: var(--wr-black-40); background: transparent; }
}
#siteHeader.is-scrolled #linksPill ul li.is-active a {
  background: var(--wr-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; background-size: 100% auto; font-weight: 800;
}

/* CTA pill */
/* Contact Us CTA (two-state header) — an unfilled pill: shimmering gradient
   stroke + shimmer gradient text, no colour fill. The shape is a transparent pill;
   ::before is the only fill — a yellow→orange gradient clipped to a 1.5px ring with
   the mask-composite exclude trick (the centre is cut out so the page shows through).
   Note the declaration order: the `mask` shorthand resets mask-composite, so the
   composite longhands MUST come AFTER both shorthands — otherwise the cut-out is
   lost and the ring fills solid. Shimmer rides background-position on the gradient;
   text shimmer lives on the <span>. Works identically on dark and light backgrounds. */
#ctaBtn {
  flex-shrink: 0; height: 48px; padding: 0 22px; border-radius: var(--wr-radius-pill);
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--wr-font); font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; position: relative;
  background: transparent;
  transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}
/* Shimmer gradient text on the <span> child — simpler element, reliable background-clip. */
#ctaBtn span {
  display: inline-block;
  background: linear-gradient(90deg, #FFD800 0%, #F04923 35%, #FFD800 70%, #F04923 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: gradientShimmerSlow 3s ease-in-out infinite alternate;
  position: relative; z-index: 1;
}
/* Shimmering gradient stroke — transparent interior, no fill. */
#ctaBtn::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(90deg, #FFD800 0%, #F04923 35%, #FFD800 70%, #F04923 100%);
  background-size: 200% auto;
  animation: gradientShimmerSlow 3s ease-in-out infinite alternate;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
#ctaBtn::after { display: none; }
@media (hover: hover) and (pointer: fine) {
  #ctaBtn:hover { transform: translateY(-1px); filter: drop-shadow(0 2px 10px #F0492338); }
}
#ctaBtn svg { width: 12px; height: 12px; fill: none; stroke: var(--wr-orange);
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
  position: relative; z-index: 1; }

/* Hamburger pill */
/* Hamburger — a plain glass pill that matches the other nav bars (logo / links /
   spacer): glass-08 at rest, glass-90 when scrolled. No gradient stroke ring —
   only the three BARS carry the shimmer gradient. */
#hamburgerBtn {
  display: none;
  flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--wr-radius-pill);
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  background: transparent;
  border: none; cursor: pointer; padding: 0; position: relative;
  transition: opacity 0.3s ease;
}
/* Glass fill — same frost as the other bars (resting → scrolled below) */
#hamburgerBtn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: var(--wr-radius-pill);
  background: var(--wr-glass-14);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: background 0.3s var(--wr-ease-out), box-shadow 0.3s var(--wr-ease-out);
}
/* Scrolled (bright) state — matches #linksPill / logo / spacer */
#siteHeader.is-scrolled #hamburgerBtn::after {
  background: var(--wr-glass-90);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--wr-shadow-md);
}
/* no gradient ring — keep the surface identical to the other bars */
#hamburgerBtn::before { display: none; }
@media (hover: hover) and (pointer: fine) {
  #hamburgerBtn:hover::after { background: var(--wr-glass-16); }
}
#hamburgerBtn .wr-bar {
  display: block; height: 2px; border-radius: 2px;
  /* Shimmer gradient on bars — same gradient, same animation */
  background: linear-gradient(90deg, #FFD800 0%, #F04923 35%, #FFD800 70%, #F04923 100%);
  background-size: 200% auto;
  animation: gradientShimmerSlow 3s ease-in-out infinite alternate;
  transform-origin: center;
  transition: transform 0.3s var(--wr-ease-out), opacity 0.25s, width 0.25s;
}
#hamburgerBtn .wr-bar:nth-child(1) { width: 20px; }
#hamburgerBtn .wr-bar:nth-child(2) { width: 14px; }
#hamburgerBtn .wr-bar:nth-child(3) { width: 20px; }
/* When open (X state), bars go plain white against the light fullscreen menu bg */
#hamburgerBtn.is-open .wr-bar {
  background: var(--wr-black) !important;
  animation: none !important;
}
#hamburgerBtn.is-open .wr-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#hamburgerBtn.is-open .wr-bar:nth-child(2) { opacity: 0; width: 0; }
#hamburgerBtn.is-open .wr-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
#hamburgerBtn.is-open::before { opacity: 0; }

/* Spacer pill — mobile only, lang switch only */
#spacerPill {
  display: none;
  flex: 1; height: 48px; border-radius: var(--wr-radius-pill);
  align-items: center; justify-content: center;
  padding: 0 6px;
  background: var(--wr-glass-14);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: background 0.3s var(--wr-ease-out), box-shadow 0.3s var(--wr-ease-out);
}
#siteHeader.is-scrolled #spacerPill {
  background: var(--wr-glass-90);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--wr-shadow-md);
}
/* Lang switch in spacerPill */
.wr-spacer-lang {
  display: flex; align-items: center; gap: 1px;
  padding: 0 4px; flex-shrink: 0;
}

/* ── Dark-nav mode ─────────────────────────────────────────────────────────
   Add  data-nav="dark"  to <body> on pages with a consistently dark background.
   The nav stays locked in its initial glass/dark state at every scroll position. */

/* Keep all pills dark when scrolled */
body[data-nav="dark"] #siteHeader.is-scrolled #topBar { height: 0; opacity: 0; }
body[data-nav="dark"] #siteHeader.is-scrolled #navBar .wr-header__logo,
body[data-nav="dark"] #siteHeader.is-scrolled #linksPill,
body[data-nav="dark"] #siteHeader.is-scrolled #spacerPill {
  background: var(--wr-glass-14);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: none;
}
/* Keep link + lang text white */
body[data-nav="dark"] #siteHeader.is-scrolled .wr-lang-item { color: var(--wr-white); }
@media (hover: hover) and (pointer: fine) {
  body[data-nav="dark"] #siteHeader.is-scrolled .wr-lang-item:hover { color: var(--wr-white-45); -webkit-text-fill-color: unset; background: transparent; }
}
body[data-nav="dark"] #siteHeader.is-scrolled #linksPill ul li a { color: var(--wr-white); }
@media (hover: hover) and (pointer: fine) {
  body[data-nav="dark"] #siteHeader.is-scrolled #linksPill ul li a:hover { color: var(--wr-white-45); background: transparent; }
}
/* Keep the hamburger border at resting opacity when scrolled; CTA stroke stays full. */
body[data-nav="dark"] #siteHeader.is-scrolled #ctaBtn::before { opacity: 1; }
body[data-nav="dark"] #siteHeader.is-scrolled #hamburgerBtn::before { opacity: 0.55; }

/* ── ctaBtn on dark-nav pages ───────────────────────────────────────────────
   On dark-nav pages the universal #ctaBtn rule already gives the right result —
   a transparent pill with a shimmering gradient stroke and shimmer gradient text —
   so no per-page override is needed; the gradient text just stays white-on-dark
   legible by nature. (Kept as a hook in case dark-nav ever needs a tweak.) */

/* Fullscreen menu */
#fsMenu {
  position: fixed; inset: 0; z-index: 1050;
  display: flex; flex-direction: column;

  background: var(--wr-white); overflow: hidden;
  clip-path: circle(0% at calc(100% - 42px) 44px);
  transition: clip-path 0.6s cubic-bezier(0.77,0,0.175,1);
  pointer-events: none;
}
#fsMenu::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 90% 10%, #F0492310 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 10% 90%, #FFD8000D 0%, transparent 60%);
}
#fsMenu.is-open { clip-path: circle(170% at calc(100% - 42px) 44px); pointer-events: auto; }

.wr-fsbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px; flex-shrink: 0;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 0.3s ease 0.25s, transform 0.3s var(--wr-ease-out) 0.25s;
}
#fsMenu.is-open .wr-fsbar { opacity: 1; transform: translateY(0); }
.wr-fsbar-logo { height: 22px; width: auto; display: block; }
#fsClose {
  width: 40px; height: 40px; border-radius: 50%;

  background: var(--wr-black-06); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.3s var(--wr-ease-spring);
}
@media (hover: hover) and (pointer: fine) {

  #fsClose:hover { background: var(--wr-black-15); transform: rotate(90deg); }
}

#fsClose svg { width: 16px; height: 16px; fill: none; stroke: var(--wr-black); stroke-width: 2.5; stroke-linecap: round; }

.wr-fsbody {
  flex: 1; display: flex; flex-direction: column;
  justify-content: flex-start; align-items: center;
  padding: 0 28px 16px; position: relative; z-index: 1;
  overflow-y: auto;
}
/* margin:auto centres the list when it fits, but lets it scroll from the top
   when the full menu is taller than the viewport */
.wr-fsnav { list-style: none; text-align: center; width: 100%; margin: auto 0; }
.wr-fsnav li {
  opacity: 0; transform: translateX(-16px);
  transition: opacity 0.35s ease, transform 0.35s var(--wr-ease-out);
}
#fsMenu.is-open .wr-fsnav li:nth-child(1) { opacity:1; transform:none; transition-delay:.22s }
#fsMenu.is-open .wr-fsnav li:nth-child(2) { opacity:1; transform:none; transition-delay:.27s }
#fsMenu.is-open .wr-fsnav li:nth-child(3) { opacity:1; transform:none; transition-delay:.32s }
#fsMenu.is-open .wr-fsnav li:nth-child(4) { opacity:1; transform:none; transition-delay:.37s }
#fsMenu.is-open .wr-fsnav li:nth-child(5) { opacity:1; transform:none; transition-delay:.42s }
#fsMenu.is-open .wr-fsnav li:nth-child(6) { opacity:1; transform:none; transition-delay:.47s }
#fsMenu.is-open .wr-fsnav li:nth-child(7) { opacity:1; transform:none; transition-delay:.52s }
/* Primary links — direct children only (the > combinator keeps these rules from
   leaking into the sub-lists, which was tinting the first sub-item gold). */
.wr-fsnav > li > a {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--wr-font); font-size: clamp(24px, 6vw, 34px);
  font-weight: 700; letter-spacing: 0.035em; text-transform: uppercase;
  color: var(--wr-black); opacity: 1; text-decoration: none;
  padding: 7px 0; line-height: 1.12; position: relative;
  transition: color 0.2s, opacity 0.2s;
}
/* the per-item chevron is a hover affordance — irrelevant on the touch menu, and
   it skews the centring, so drop it here */
.wr-fsnav > li > a svg { display: none; }
@media (hover: hover) and (pointer: fine) {
  .wr-fsnav > li > a:hover { color: var(--wr-black-40); }
}
/* Current page only — brand gradient, scoped to direct children */
.wr-fsnav > li.is-active > a,
.wr-fsnav > li:first-child > a {
  background: var(--wr-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; background-size: 100% auto;
  opacity: 1;
}

.wr-fsfooter {
  padding: 22px 40px 40px;

  border-top: 1px solid var(--wr-black-06);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  opacity: 0; transform: translateY(8px); position: relative; z-index: 1;
  transition: opacity 0.35s ease 0.45s, transform 0.35s var(--wr-ease-out) 0.45s;
}
#fsMenu.is-open .wr-fsfooter { opacity: 1; transform: translateY(0); }
/* language switcher in the fullscreen menu (light surface → dark items, gradient current) */
.wr-fslang { display: flex; align-items: center; justify-content: center; gap: 4px; }
.wr-fslang .wr-lang-item { color: var(--wr-black); opacity: 0.45; font-size: 13px; font-weight: 700; padding: 6px 10px; background: none; -webkit-text-fill-color: currentColor; }
.wr-fslang .wr-lang-item[aria-current="true"] { opacity: 1; font-weight: 800; background: var(--wr-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (hover: hover) and (pointer: fine) { .wr-fslang .wr-lang-item:hover { opacity: 0.85; } }
.wr-fscontact { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.wr-fscontact a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--wr-black);
  text-decoration: none; opacity: 0.55;
  transition: opacity 0.18s;
}
@media (hover: hover) and (pointer: fine) {
  .wr-fscontact a:hover { opacity: 1; }
}
/* fill:currentColor — icon inherits parent colour on hover */
.wr-fscontact a svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }
/* Fullscreen menu Contact Us — a solid, legible gradient pill (the gradient
   gently shimmers via background-position). White label, white arrow. */
.wr-fscta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 34px; border-radius: var(--wr-radius-pill);
  font-family: var(--wr-font); font-size: 12px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  position: relative;
  color: var(--wr-white); -webkit-text-fill-color: var(--wr-white);
  background: linear-gradient(90deg, #FFD800 0%, #F04923 35%, #FFD800 70%, #F04923 100%);
  background-size: 200% auto;
  animation: gradientShimmerSlow 3.5s ease-in-out infinite alternate;
  box-shadow: 0 6px 20px rgba(240, 73, 35, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .wr-fscta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(240, 73, 35, 0.36); }
}
.wr-fscta svg { width: 13px; height: 13px; fill: none; stroke: var(--wr-white);
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.wr-fssocial { display: flex; align-items: center; justify-content: center; gap: 20px; }
.wr-fssocial a {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; opacity: 0.55;
  transition: opacity 0.18s;
}
@media (hover: hover) and (pointer: fine) {
  .wr-fssocial a:hover { opacity: 1; }
}
.wr-fssocial svg { width: 20px; height: 20px; fill: var(--wr-black); }

/* Standardised eyebrow — matches the homepage's .v2c-eyebrow (mono, wide
   tracking, short thin marker) so every section label reads the same. */
.wr-section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, 'Liberation Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(13, 10, 7, 0.6);
  margin-bottom: 40px;
  hyphens: none;
  -webkit-hyphens: none;
}
.wr-section-label::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--wr-grad);
  flex-shrink: 0;
  animation: wrEyebrowPulse 6s ease-in-out infinite;
}
/* Subtle, slow, infrequent "alive" pulse — a soft warm glow blooms on the
   marker once per cycle. Shared with the homepage's .v2c-eyebrow. */
@keyframes wrEyebrowPulse {
  0%, 58%, 100% { box-shadow: 0 0 0 0 rgba(255, 216, 0, 0); }
  74% { box-shadow: 0 0 9px 0 rgba(255, 216, 0, 0.55); }
}
.v2c-eyebrow::before { animation: wrEyebrowPulse 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .wr-section-label::before, .v2c-eyebrow::before { animation: none; }
}

.wr-section-label--light { color: var(--wr-white-45); }
.wr-section-label--light::before { opacity: 0.5; }

.section-inner { max-width: var(--wr-max-width); margin: 0 auto; width: 100%; }

/* Gradient accent text — carries the brand Gradient Shimmer
   (gradient shimmer — brand spec):
   gradient clipped to letters, 250% wide, background-position travels 0→250%
   for a seamless travelling shimmer. Multi-stop so the loop has no seam. */
.wr-gradient-text, .wr-heading--gradient {
  background: linear-gradient(90deg, #FFD800 0%, #F04923 25%, #FFD800 50%, #F04923 75%, #FFD800 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: wrShimmer 6.5s linear infinite;
}
@keyframes wrShimmer {
  from { background-position: 0% center; }
  to   { background-position: 250% center; }
}
@media (prefers-reduced-motion: reduce) {
  .wr-gradient-text, .wr-heading--gradient { animation: none; }
}

.hp-section-hero {
  position: relative;
  width: 100%;

  min-height: 100svh;

  background-color: var(--wr-hero);
  overflow: hidden;
  z-index: 10;
  transform-origin: center top;
  will-change: transform, border-radius;
}

#c {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; pointer-events: none;
}

.hp-hero-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: 100svh;
  padding: var(--wr-nav-height) var(--wr-pad-x) 100px;
  text-align: center;
}

.hp-hero-h1 {
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--wr-white);
  letter-spacing: -0.01em;
  max-width: 1100px;
  margin-bottom: 24px;
}
.hp-hero-h1 .hp-word-wrap {
  display: inline-block; overflow: hidden;
  vertical-align: bottom; margin-right: 0.25em;
}
.hp-hero-h1 .hp-word-wrap:last-child { margin-right: 0; }
.hp-hero-h1 .hp-word-inner { display: inline-block; transform: translateY(105%); }

.hp-hero-sub {
  font-size: 18px; font-weight: 400; line-height: 1.6;
  color: var(--wr-white-75);
  max-width: 600px; margin-bottom: 40px;
  opacity: 0; transform: translateY(20px);
}

.hp-hero-ctas {
  position: absolute; bottom: 48px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; justify-content: center;
}

.hp-hero-cta-primary {
  position: relative; font-size: 15px; font-weight: 600;
  color: var(--wr-white); padding: 14px 32px;
  border-radius: var(--wr-radius-pill); background: transparent;
  z-index: 1; overflow: hidden; opacity: 0; transform: translateY(10px);
  transition: transform 0.25s var(--wr-ease-out);
  /* L19: no GSAP target exists for .hp-hero-cta-primary in the current DOM.
     Element is not rendered (absent from HTML). Rule kept for future use.
     Reduced-motion fallback below ensures it is visible if ever added. */
}
@media (prefers-reduced-motion: reduce) {
  .hp-hero-cta-primary { opacity: 1; transform: none; }
}

.hp-hero-cta-secondary {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase; padding: 14px 24px;
  border-radius: var(--wr-radius-pill);
  background: linear-gradient(90deg, #FFD800 0%, #F04923 35%, #FFD800 70%, #F04923 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  opacity: 0; transform: translateY(10px);
  animation: gradientShimmer 3s ease-in-out infinite alternate;
  animation-play-state: paused;
}
@media (hover: hover) and (pointer: fine) {
  .hp-hero-cta-secondary:hover { animation-play-state: paused; opacity: 0.75 !important; }
}
/* Shimmer: 0→100% with alternate direction — gradient reverses at end, no hard jump seam */
@keyframes gradientShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 100% center; }
}

@keyframes gradientShimmerSlow {
  0%   { background-position: 0% center; }
  100% { background-position: 100% center; }
}

.hp-section-pillars {
  position: relative; width: 100%;
  background-color: transparent;   /* lets the fixed Kinetic Marquee show through the statement */
  /* Rides ABOVE the proof section (z:8) at the seam so the services panel's
     rounded BOTTOM edge caps the section and the Trusted-By panel tucks up
     UNDER it (mirror of the old rise-over treatment). */
  z-index: 9; overflow: visible;
}
/* The bento wrapper rides ABOVE the fixed marquee (z-index:1) and carries an
   opaque page-coloured backing, so as it parallax-rises it fully occludes the
   statement field — no kinetic text bleeding through the card gaps. The
   statement zone above stays transparent (marquee still shows there). */
.hp-section-pillars .section-inner {
  position: relative; z-index: 2;
  background-color: transparent;
}
/* Mirrored cutout, FULL-BLEED — a 100vw backing plate behind the cards ends in a
   softly rounded bottom lip and casts a DOWNWARD-only shadow onto the Trusted-By
   panel rising beneath. Full-bleed (not the max-width box) so the lip spans edge
   to edge and there are NO hard vertical side edges; the negative-spread shadow
   never bleeds above the panel top. */
.hp-section-pillars .section-inner::before {
  content: ''; position: absolute; z-index: -1;
  top: 0; bottom: 0; left: 50%;
  width: 100vw; transform: translateX(-50%);
  /* Soft TOP edge — as this opaque panel parallax-rises over the fixed Kinetic
     Marquee, a razor-straight top was hard-clipping the kinetic words (the
     "edge between the kinetic text and the cards"). A short transparent→white
     ramp lets those words DISSOLVE into the panel instead of cutting. */
  background: linear-gradient(to bottom, rgba(242, 242, 242, 0) 0, var(--wr-white) 64px);
  border-bottom-left-radius: clamp(30px, 4vw, 60px);
  border-bottom-right-radius: clamp(30px, 4vw, 60px);
  box-shadow: 0 40px 50px -24px rgba(13, 10, 7, 0.14);
}

.hp-h2-title-zone {
  position: relative; width: 100%;

  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 100px var(--wr-pad-x); z-index: 1;
}

/* The statement is now rendered as two marquee rows (see .hp-marq__row--stmt);
   the real <h2> stays in the DOM for semantics only, visually hidden. */
.hp-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Kinetic Marquee — the page's vocabulary in motion. Now a FIXED field that
   sits behind the hero (revealed as it scales down) and continues seamlessly
   into the B2B statement, then fades before the bento. Alternating rows scroll
   opposite ways; most words faint ink, a few ignite in the brand gradient.
   A WIDE edge fade dissolves words before the row clips — no hard line ends. */
.hp-marq {
  position: fixed; inset: 0;
  z-index: 1; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-evenly;
  overflow: hidden;
  opacity: 1; will-change: opacity;
  /* generous 22% ramps each side → edge words fade out instead of cutting */
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.hp-marq.is-gone { display: none; }
.hp-marq__row {
  overflow: hidden; white-space: nowrap; line-height: 1.05;
}
/* Scroll the TRACK (the wide content), not the row — the row is viewport-wide
   and clips; translating it left would leave a gap. The track is doubled and
   over-fills the viewport, so translateX(-50%) loops seamlessly. */
.hp-marq__track {
  display: inline-flex; align-items: center; will-change: transform;
  animation: hpMarqScroll linear infinite;
}
.hp-marq__row.is-rev .hp-marq__track { animation-direction: reverse; }
.hp-marq__w {
  font-weight: 800; font-size: inherit; letter-spacing: -0.02em;
  color: rgba(13, 10, 7, 0.07); padding: 0 8px;
  pointer-events: auto; /* hittable so the cursor word-light can find it (Signal Wordlight) */
  transition: opacity 0.2s ease;
}
.hp-marq__w.is-grad {
  background: var(--wr-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; opacity: 0.5;
}
/* Signal Wordlight — the word under the cursor lights up in the brand gradient
   (assets/js/signal-wordlight.js toggles .is-lit). */
.hp-marq__w.is-lit {
  background: var(--wr-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  opacity: 1;
}
.hp-marq__dot { font-size: 0.5em; color: rgba(240, 73, 35, 0.28); padding: 0 2px; }

/* Statement rows — the two centre rows ARE the headline, but they SCROLL like
   every other row (same grey, uppercase). When the zone pins, Signal Motion
   stops + snap-centres their track and ignites their colour. */
.hp-marq__row--stmt { overflow: visible; }   /* let the ignite scale-pop show */
.hp-marq__phrase { display: inline-block; }

.hp-marq__sword {
  display: inline-block; position: relative;
  font-weight: 800; font-size: inherit; letter-spacing: -0.02em;
  text-transform: uppercase;
  color: rgba(13, 10, 7, 0.07);       /* same grey as the field words at rest */
  padding: 0 6px;
}
.hp-marq__sw-base { color: inherit; }
.hp-marq__sw-lit {
  position: absolute; left: 6px; top: 0;        /* align over the base (6px side pad) */
  background: var(--wr-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; opacity: 0; white-space: nowrap;
}

@keyframes hpMarqScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .hp-marq__track { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-marq__row { animation: none; }
}

.hp-section-pillars .section-inner {
  position: relative; z-index: 1;
  padding: 0 var(--wr-pad-x) var(--wr-pad-y);
}

/* Service cards — compact 4-up grid: the whole offering at a glance */
.hp-pillars-stack {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative; z-index: 1;
}

.hp-pillar-card {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--wr-radius-card);
  overflow: hidden;
  min-height: 0;
  background: var(--wr-white);

  border: 1px solid var(--wr-black-06);
  text-decoration: none;
  color: var(--wr-black);
  opacity: 0;
  box-shadow: none;
  transition: box-shadow 0.4s ease;
  transform: translateY(48px);   /* entrance offset; GSAP settles it to 0 */
}

.hp-pillar-card.hp-glow-tracking { transition: box-shadow 0.05s linear; }

.hp-pillar-card__image,
.hp-pillar-card__text { position: relative; overflow: hidden; }

.hp-pillar-card__image { aspect-ratio: 16 / 11; }

.hp-pillar-card__image-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.5s var(--wr-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .hp-pillar-card:hover .hp-pillar-card__image-bg { transform: scale(1.05); }
}

.hp-pillar-card__image::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--wr-black-15), var(--wr-black-40));
  pointer-events: none;
}

.hp-pillar-card__text {
  display: flex; flex-direction: column; flex: 1;
  padding: clamp(22px, 1.6vw, 30px);
}

.hp-pillar-card__icon { width: 40px; height: 27px; margin-bottom: 16px; flex-shrink: 0; }
.hp-pillar-card__icon svg { width: 100%; height: 100%; }

.hp-pillar-card__title {
  font-size: clamp(18px, 1.35vw, 22px);
  font-weight: 700; line-height: 1.22;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.hp-pillar-card__desc {
  font-size: 14px; font-weight: 400; line-height: 1.58;
  color: var(--wr-black-40);
  margin-bottom: 20px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

.hp-pillar-card__arrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto;
  padding: 10px 18px; border-radius: var(--wr-radius-pill);
  font-size: 13px; font-weight: 600;
  color: var(--wr-black); align-self: flex-start; position: relative;
  transition: gap 0.2s var(--wr-ease-out), background 0.2s ease;
}
.hp-pillar-card__arrow::before {
  content: ''; position: absolute; inset: 0;
  border-radius: var(--wr-radius-pill); padding: 1.5px;
  background: var(--wr-grad);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {

  .hp-pillar-card:hover .hp-pillar-card__arrow { gap: 12px; background: var(--wr-black-03); }
  .hp-pillar-card:hover .hp-pillar-card__arrow svg { transform: translateX(3px); }
}
.hp-pillar-card__arrow svg {
  width: 14px; height: 14px;
  transition: transform 0.2s var(--wr-ease-out);
}

/* Float animation — guarded by reduced-motion */
@keyframes pillarFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.hp-pillar-card.is-visible {
  animation: pillarFloat 6s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}

/* ── SERVICES BENTO — four equal service cards (basic-Services format) ───────
   Each card is a full Brand Plate image surface with a dark legibility scrim,
   broadcast scanline, faint corner index, kicker, name, desc and Explore CTA.
   Tech Solutions is a peer card — not a reduced band. */
.hp-bento {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.hp-bento__card {
  position: relative; overflow: hidden;
  border-radius: var(--wr-radius-card);
  /* clip-path keeps corners rounded on the GPU layer during the hover lift +
     inner image scale — overflow:hidden alone flashes square corners. */
  clip-path: inset(0 round var(--wr-radius-card));
  min-height: clamp(320px, 42vh, 440px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(26px, 2.4vw, 42px);
  text-decoration: none; color: var(--wr-white);
  background-color: #0D0A07;
  border: 1px solid var(--wr-black-06);
  transition: transform 0.45s var(--wr-ease-out), box-shadow 0.45s ease;
}
/* Brand Plate imagery — image-ready placeholder surfaces */
.hp-bento__img {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transition: transform 0.6s var(--wr-ease-out);
}
/* dark legibility scrim */
.hp-bento__card::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(13,10,7,0.86) 0%, rgba(13,10,7,0.34) 48%, rgba(13,10,7,0.04) 100%);
}
/* faint broadcast scanline texture */
.hp-bento__card::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background-image: repeating-linear-gradient(0deg, rgba(242,242,242,0.045) 0 1px, transparent 1px 5px);
  opacity: 0.5; mix-blend-mode: overlay; pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .hp-bento .hp-bento__card:hover { transform: translateY(-5px); box-shadow: 0 22px 60px rgba(13,10,7,0.16); }
  .hp-bento__card:hover .hp-bento__img { transform: scale(1.05); }
  .hp-bento__card:hover .hp-bento__arrow svg { transform: translateX(3px); }
}

/* large faint corner index numeral */
.hp-bento__idx {
  position: absolute; top: clamp(18px, 2vw, 30px); right: clamp(20px, 2.2vw, 34px);
  z-index: 2; font-size: clamp(46px, 5vw, 76px); font-weight: 800;
  line-height: 1; letter-spacing: -0.03em; color: rgba(242,242,242,0.14);
  font-variant-numeric: tabular-nums;
}

.hp-bento__body { position: relative; z-index: 2; }
.hp-bento__k {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(242,242,242,0.78); margin-bottom: 12px;
}
.hp-bento__k::before {
  content: ''; width: 26px; height: 2px; border-radius: 2px; background: var(--wr-grad);
}
.hp-bento__h {
  font-weight: 800; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.14; letter-spacing: -0.02em;
  color: var(--wr-white); margin-bottom: 12px;
}
.hp-bento__d {
  font-size: 14px; line-height: 1.6; color: rgba(242,242,242,0.82);
  max-width: 460px; margin-bottom: 20px;
}
.hp-bento__arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 13px; color: var(--wr-white);
}
.hp-bento__arrow svg { width: 14px; height: 14px; transition: transform 0.2s var(--wr-ease-out); }

@media (max-width: 760px) {
  .hp-bento { grid-template-columns: 1fr; }
  .hp-bento__card { min-height: clamp(280px, 56vw, 360px); }
}

/* Brand Plate surfaces — art-directed, image-ready placeholders (swap for photos later) */
.hp-plate--live {
  background-image:
    radial-gradient(110% 90% at 82% 8%, rgba(240,73,35,0.55), transparent 56%),
    radial-gradient(90% 70% at 12% 96%, rgba(255,216,0,0.18), transparent 60%),
    linear-gradient(145deg, #2A1207 0%, #160D07 55%, #0B0805 100%);
}
.hp-plate--video {
  background-image:
    radial-gradient(110% 90% at 84% 10%, rgba(255,200,80,0.50), transparent 58%),
    radial-gradient(90% 70% at 10% 94%, rgba(240,73,35,0.22), transparent 60%),
    linear-gradient(145deg, #2A1E08 0%, #18120A 55%, #0B0805 100%);
}
.hp-plate--strategy {
  background-image:
    radial-gradient(120% 95% at 50% 6%, rgba(240,73,35,0.30), transparent 52%),
    radial-gradient(80% 70% at 88% 92%, rgba(255,216,0,0.16), transparent 60%),
    linear-gradient(150deg, #1E140C 0%, #140D08 60%, #0A0705 100%);
}
.hp-plate--tech {
  background-image:
    radial-gradient(110% 95% at 14% 10%, rgba(255,216,0,0.34), transparent 56%),
    radial-gradient(95% 80% at 92% 90%, rgba(240,73,35,0.30), transparent 58%),
    linear-gradient(150deg, #14140C 0%, #100E0A 58%, #070605 100%);
}

.hp-section-proof {
  position: relative; width: 100%;
  /* Transparent so the deck (lower z) shows THROUGH the gallery as the plates
     float up — the parallax reveal. The white headline zone (first child) now
     has a FLAT top and slides up UNDER the services panel's rounded bottom lip
     (services sits at a higher z). The negative margin tucks this panel beneath
     that lip; Signal Motion eases the headline up for the parallax-under reveal
     (GSAP pins the h2 zone and would eat a margin set on it directly, so the
     lift lives here). */
  background-color: transparent;
  z-index: 8; overflow: visible;
  /* Deep tuck — the panel sits well behind the services lip so its slogan has a
     long way to rise out from behind it (Signal Motion parallax). */
  margin-top: clamp(-230px, -17vh, -150px);
}

.hp-proof-h2-zone {
  position: relative; width: 100%;
  z-index: 2;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 100px var(--wr-pad-x);
  /* White fill + rounded top = the panel that rises over the bento (the
     section's negative margin does the lifting). Stays with the headline when
     it pins, so the headline always has its backing. */
  background-color: var(--wr-white);
  /* Flat top — the curved seam now lives on the services panel above; this
     panel rises up UNDER that rounded lip (parallax reveal in Signal Motion). */
}

.hp-proof-label { margin-bottom: 16px; text-align: center; }

.hp-proof-h2 {
  font-size: clamp(32px, 4vw, 52px); font-weight: 700;
  line-height: 1.2; text-align: center; max-width: 900px;
  color: var(--wr-black); will-change: filter;
}

.hp-card-grid-zone {
  position: relative; width: 100%;
  /* Above the headline zone so plates rise OVER the headline; the zone itself
     is transparent so the deck beneath shows through between/below the plates. */
  z-index: 3;
  /* Shorter gallery + pull the deck up into the tail the rising plates vacate,
     so there's no huge empty band between the image wall and "what we do". */
  min-height: 72svh;
  padding: 24px 0 0 0; margin: 0 0 clamp(-210px, -17vh, -140px) 0;
}

.hp-card-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 12px; width: 100%; padding: 0 var(--wr-pad-x);
}
.hp-card-col { display: flex; flex-direction: column; gap: 14px; will-change: transform; }
.hp-card-rect {
  width: 100%; border-radius: var(--wr-radius-sm);
  background: #D9D6D1;            /* opaque plate — occludes the headline as the gallery rises */
  flex-shrink: 0; position: relative; overflow: hidden;
}
/* Brand Plate tones — varied so the gallery reads as a dynamic image wall */
.hp-card-rect--a     { background: linear-gradient(150deg, #E4E2DE, #CFCCC6); }
.hp-card-rect--b     { background: linear-gradient(150deg, #D3D0CA, #B8B4AD); }
.hp-card-rect--c     { background: linear-gradient(150deg, #EAE8E4, #D5D2CC); }
.hp-card-rect--brand { background: var(--wr-grad); }
/* faint inner edge so plates feel like framed images */
.hp-card-rect::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--wr-black-06);
  pointer-events: none;
}

/* Nav collapse at 1024px */
@media (max-width: 1024px) {
  #linksPill  { display: none; }
  #ctaBtn     { display: none; }
  #hamburgerBtn { display: flex; }
  #spacerPill   { display: flex; }
  /* SWAP (mobile): phone + email live in the nav pill; the language switcher moves
     to the top bar, which is now ALWAYS visible (it carries the switcher). */
  #topBar { height: 36px; opacity: 1; }
  .wr-tb-left { display: flex; }
  .wr-tb-left a[href^="tel:"], .wr-tb-left a[href^="mailto:"] { display: none; }
  .wr-tb-lang { display: flex; }
  #topBar  { justify-content: space-between; }
  #navBar .wr-header__logo {
    width: 48px; height: 48px; padding: 0;
    justify-content: center; box-shadow: none !important;
  }
  #navBar .wr-header__logo svg { height: 20px; }
  /* Services grid: 2-up on tablet / large phone */
  .hp-pillars-stack { grid-template-columns: repeat(2, 1fr); }
  /* Card grid 5 columns */
  .hp-card-grid { grid-template-columns: repeat(3, 1fr); }

  #siteHeader { padding: 8px 12px; }
  .wr-fsbar { padding: 14px 18px; }
  .wr-fsbody { padding: 0 24px 16px; }
  .wr-fsfooter { padding: 18px 24px 32px; }
  #siteHeader.is-scrolled #navBar .wr-header__logo {
    box-shadow: 0 0 0 1px #0D0A070D, 0 4px 24px #0D0A071A !important;
  }
}

@media (max-width: 480px) {
  .hp-card-grid { grid-template-columns: repeat(3, 1fr); }
  .hp-pillars-stack { grid-template-columns: 1fr; }
  .hp-hero-h1   { font-size: 32px; }
}

:focus-visible {
  outline: 2px solid var(--wr-orange);
  outline-offset: 3px;
  border-radius: var(--wr-radius-sm);
}
/* Pill-shaped elements get pill-shaped focus ring */
#ctaBtn:focus-visible,
#hamburgerBtn:focus-visible,
#linksPill ul li a:focus-visible,
.hp-pillar-card__arrow:focus-visible,
.wr-fscta:focus-visible,
.wr-tb-left a:focus-visible,
.wr-tb-right a:focus-visible {
  outline-offset: 4px;
  border-radius: var(--wr-radius-pill);
}
/* Suppress default outline on mouse users — only show for keyboard */
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  /* Pillar float — disable */
  .hp-pillar-card.is-visible { animation: none; }
  /* Hero word reveal — show immediately */
  .hp-hero-h1 .hp-word-inner { transform: none; }
  .hp-hero-sub, .hp-hero-cta-primary, .hp-hero-cta-secondary { opacity: 1; transform: none; }
  /* Canvas animation handled in JS (reducedMotion flag already present) */
}

/* === REVIEWS === */

/* Noise overlay */
.wr-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ── Gradient text utility ── */
.wr-heading--gradient {
  background: var(--wr-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Section label ── */
.wr-section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, 'Liberation Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em; /* matches the homepage .v2c-eyebrow */
  text-transform: uppercase;
  color: rgba(13, 10, 7, 0.6);
  margin-bottom: 40px;
  hyphens: none;
  -webkit-hyphens: none;
}
.wr-section-label::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--wr-grad);
  flex-shrink: 0;
  animation: wrEyebrowPulse 6s ease-in-out infinite;
}
/* Light variant — used on dark backgrounds */
.wr-section-label--light {

  color: var(--wr-white-45);
}
.wr-section-label--light::before {
  opacity: 0.5;
}
/* Centred variant — replaces inline style="justify-content:center" */
.wr-section-label--centered {
  justify-content: center;
}

:focus-visible {
  outline: 2px solid var(--wr-orange);
  outline-offset: 3px;
  border-radius: var(--wr-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

.reveal {
  opacity: 0;
  transform: translateY(28px);

  transition: opacity 0.7s var(--wr-ease-out), transform 0.7s var(--wr-ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Track height = sticky scroll room for all 3 phases:
   Phase 1 (card steps): 3 × 60svh = 180svh
   Phase 2 (exit anim):  80svh
   Total: 260svh — keeps .wr-slider pinned for the entire sequence */
/* The deck rides above the fixed marquee (z-index:1) so no kinetic words bleed
   through; proof and deck are both page-white, so the seam is invisible.
   The track is a tall scroll-room wrapper; the deck inside is position:sticky
   (NOT a GSAP pin) — native sticky has no pin-spacer reparent, so the deck never
   jumps on engage or release. Track height is set by Signal Motion. */
/* PARALLAX REVEAL: the deck sits BENEATH the proof at its locked (sticky)
   position and is revealed as the gallery cards float up over it. So it must
   be LOWER z than the proof, with NO panel edge/shadow (those read as a hard
   seam slicing the cards). The deck's own content (the "what we do" header +
   image cards) is what gets uncovered as the plates rise away. */
.wr-slider__track {
  position: relative;
  z-index: 4;
  background: var(--wr-white);
  /* The gap-closing pull lives on #cardGridZone's negative margin-bottom (it
     reclaims the band the rising plates vacate). The deck adds only a small lip
     overlap so it meets the gallery cleanly without compounding too far. */
  margin-top: clamp(-50px, -4vh, -30px);
}

.wr-slider {
  position: sticky;
  top: var(--wr-header-height);
  min-height: calc(100svh - var(--wr-header-height));
  width: 100%;
  background-color: var(--wr-white);
  padding: 28px var(--wr-section-pad-x) 40px;
  z-index: 5;
  /* contain the staggered slide-off so flying cards don't add a h-scrollbar */
  overflow-x: clip;
}

.wr-slider__header {
  /* align eyebrow+title to the standard .v2c-wrap content column (cards keep full width) */
  max-width: var(--wr-max-width); margin-left: auto; margin-right: auto;
  padding-left: var(--wr-pad-x); padding-right: var(--wr-pad-x);
  box-sizing: border-box; width: 100%;
  margin-bottom: 24px;
}

.wr-slider__header .wr-section-label {
  margin-bottom: 16px;
}

/* ── Signal Aura — living gradient inside a card (Signal Aura module, layer
   injected by assets/js/signal-aura.js). Two soft brand blobs drift + breathe
   on a composited layer (transform/opacity only — no canvas/rAF), screen-blend
   over the photo, beneath the text (z1). Lifts on hover. ── */
.wr-slider-card__veil {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(3.5px) saturate(1.05);
  /* Self-clip — applied AFTER the blur, in the veil's OWN local space (before the
     card's 3D transform applies), to the same rounded rect as the card. The veil
     never depends on the parent clipping it, so it can't overhang under the tilt. */
  -webkit-clip-path: inset(0 round 40px);
  clip-path: inset(0 round 40px);
}
/* How-we-work pyramid veil — same blurred-photo layer, clipped to the pyramid's
   (variable) radius so it self-clips under the 3D tilt. */
.wr-pyramid-card__veil {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(3.5px) saturate(1.05);
  -webkit-clip-path: inset(0 round clamp(58px, 10.5vh, 112px));
  clip-path: inset(0 round clamp(58px, 10.5vh, 112px));
}
.wr-aura {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; overflow: hidden; mix-blend-mode: screen;
  opacity: 0.34; will-change: transform;
  transform: translate3d(var(--aura-x, 0px), var(--aura-y, 0px), 0);
  transition: opacity 0.5s var(--wr-ease-out), transform 0.3s var(--wr-ease-out);
}
.wr-aura::before, .wr-aura::after {
  content: ""; position: absolute; width: 78%; height: 92%;
  border-radius: 50%; filter: blur(44px); will-change: transform;
}
.wr-aura::before {
  background: radial-gradient(circle, rgba(255,216,0,0.55) 0%, rgba(255,216,0,0) 68%);
  top: -26%; left: -14%; animation: wrAuraA 13s ease-in-out infinite;
}
.wr-aura::after {
  background: radial-gradient(circle, rgba(240,73,35,0.50) 0%, rgba(240,73,35,0) 68%);
  bottom: -26%; right: -14%; animation: wrAuraB 17s ease-in-out infinite;
}
@keyframes wrAuraA { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(28%,18%,0) scale(1.18); } }
@keyframes wrAuraB { 0%, 100% { transform: translate3d(0,0,0) scale(1.12); } 50% { transform: translate3d(-24%,-14%,0) scale(0.9); } }
.wr-slider-card:hover .wr-aura, .wr-pyramid-card:hover .wr-aura { opacity: 0.62; }
@media (prefers-reduced-motion: reduce) { .wr-aura::before, .wr-aura::after { animation: none; } }



.wr-slider__title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--wr-black);
  /* Headlines wrap freely — Signal System type rule forbids forced nowrap. */
}

/* ── Slider cards ── */
.wr-slider__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* ── "What we do" two-pane stage: feature media (left) + stepping cards (right).
   The left pane fills what used to be dead space and rides the deck out, so the
   exit never reads as an empty white gap. ── */
.wr-slider__stage {
  display: flex;
  align-items: stretch;
  gap: clamp(18px, 2.2vw, 38px);
  width: 100%;
}
.wr-slider__stage .wr-slider__cards { flex: 1 1 0; min-width: 0; }

.wr-slider__media {
  position: relative;
  flex: 0 0 37%;
  border-radius: 40px;
  overflow: hidden;
  clip-path: inset(0 round 40px);
  background: #14110c;
}
.wr-slider__shot {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.12);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 6.5s ease-out;
  will-change: opacity, transform;
}
.wr-slider__shot.is-active {
  opacity: 1; transform: scale(1);          /* slow Ken-Burns settle on entry */
}
.wr-slider__shot-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(13,10,7,0) 38%, rgba(13,10,7,0.30) 70%, rgba(13,10,7,0.80) 100%);
}
.wr-slider__shot-meta {
  position: absolute; z-index: 3;
  left: clamp(20px, 2vw, 34px); bottom: clamp(20px, 2vw, 34px);
  display: flex; align-items: baseline; gap: 14px; color: var(--wr-white);
}
.wr-slider__shot-idx {
  font-size: 13px; font-weight: 700; color: var(--wr-white-75);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.wr-slider__shot-cap {
  font-size: clamp(15px, 1.4vw, 21px); font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.15; max-width: 15ch;
  transition: opacity 0.4s ease;
}
/* Below the deck's two-pane breakpoint the media pane is dropped and the cards
   go full width again — keeps the stuck deck fitting short/mobile viewports. */
@media (max-width: 860px) {
  .wr-slider__stage { display: block; }
  .wr-slider__media { display: none; }
}

.wr-slider-card {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;

  /* Constant radius for ALL states — pill-ish when collapsed, softly rounded
     when open; never animates, so corners never flash square mid-transition.
     clip-path (not just overflow) keeps the rounding on the GPU layer during
     the height animation — overflow:hidden alone flashes square corners. */
  border-radius: 40px;
  clip-path: inset(0 round 40px);

  /* Collapsed pill height is FIT-DRIVEN (Signal Motion sets --wr-deck-col) so the
     whole column always fits the stuck viewport — guarantees sticky locks, incl.
     mobile. Fallback for no-JS / reduced-motion. */
  height: var(--wr-deck-col, 96px);
  will-change: height, transform;
  transform-origin: center center;
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s ease-out;
}

.wr-slider-card.is-expanded {
  /* Height fitted to the pinned viewport by Signal Motion (--wr-deck-exp) so the
     open card's bottom is always visible. */
  height: var(--wr-deck-exp, 460px);
}

.wr-slider-card:focus-visible {
  outline: 2px solid var(--wr-orange);
  outline-offset: 3px;
}

/* Collapsed-state spine: index + title, fades out once the card expands */
.wr-slider-card__tab {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; gap: 18px;
  padding: 0 clamp(22px, 3vw, 48px);
  opacity: 1;
  transition: opacity 0.3s ease;
}
.wr-slider-card.is-expanded .wr-slider-card__tab {
  opacity: 0; pointer-events: none;
}
.wr-slider-card__tab-idx {
  font-size: 13px; font-weight: 700;
  color: var(--wr-white-75);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.wr-slider-card__tab-label {
  font-size: clamp(15px, 1.5vw, 21px); font-weight: 700;
  color: var(--wr-white);
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wr-slider-card__overlay {
  position: absolute;
  inset: 0;
  background: var(--wr-hero-60);
  transition: background 0.9s ease;
  border-radius: inherit;
}
.wr-slider-card.is-expanded .wr-slider-card__overlay {
  background: linear-gradient(
    150deg,
    var(--wr-hero-50) 0%,
    var(--wr-hero-90) 82%
  );
}

.wr-slider-card.is-expanded::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 76%;
  background: linear-gradient(to top, var(--wr-hero-60) 0%, var(--wr-hero-30) 30%, var(--wr-hero-12, #0A07051F) 55%, transparent 100%);
  z-index: 1;
  pointer-events: none;
  border-radius: 0 0 var(--wr-radius-card) var(--wr-radius-card);
}

.wr-slider-card__grad {
  position: absolute;
  inset: 0;
  background: var(--wr-grad);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: none;
}

/* Content */
.wr-slider-card__content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 44px 52px 52px;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.0s, transform 0.0s;
}
.wr-slider-card.is-expanded .wr-slider-card__content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity  0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

.wr-slider-card__headline {
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--wr-white);

  letter-spacing: -0.01em;
  margin-bottom: 14px;
  hyphens: none;
  -webkit-hyphens: none;
}

.wr-slider-card__sub {
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.68;

  color: var(--wr-white-75);
  max-width: 440px;
}
.wr-slider-card__sub strong {
  color: var(--wr-white);
  font-weight: 700;
}

/* Mobile mobile values */
@media (max-width: 768px) {

  .wr-slider-card        { height: var(--wr-deck-col, 76px); border-radius: 30px; clip-path: inset(0 round 30px); }

  .wr-slider-card.is-expanded { height: var(--wr-deck-exp, 440px); }
  .wr-slider-card__content    { padding: 28px 28px 32px; }
  .wr-slider-card__tab        { padding: 0 24px; }
}

.wr-pyramid {
  background: var(--wr-white);
  padding: 40px var(--wr-section-pad-x) 40px;
  overflow: hidden;

  min-height: 100svh;
  box-sizing: border-box;
}

.wr-pyramid__header {
  margin-bottom: 24px;
  text-align: center;
}
.wr-pyramid__header .wr-section-label {
  margin-bottom: 16px;
  justify-content: center;
}

.wr-pyramid__title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--wr-black);
  /* Headlines wrap freely — Signal System type rule forbids forced nowrap. */
}

/* ── Pyramid cards ── */
.wr-pyramid__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.wr-pyramid-card {
  position: relative;

  height: calc((100svh - 240px) / 3);
  min-height: 80px;
  border-radius: min(calc((100svh - 240px) / 6), 60px);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

/* Reverse pyramid widths: 100% / 88% / 76%, centred */
.wr-pyramid-card--1 { width: 100%; }
.wr-pyramid-card--2 { width: 88%; margin: 0 auto; }
.wr-pyramid-card--3 { width: 76%; margin: 0 auto; }

.wr-pyramid-card__overlay {
  position: absolute;
  inset: 0;
  background: var(--wr-hero-62);
  border-radius: inherit;
}

.wr-pyramid-card__grad {
  position: absolute;
  inset: 0;
  background: var(--wr-grad);
  border-radius: inherit;
  opacity: 1; /* starts fully opaque — JS dissolves to 0 */
  pointer-events: none;
  z-index: 2; /* above overlay (z:1 on __cnt), below content (z:3) */
  transition: none;
}

.wr-pyramid-card__cnt {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 clamp(24px, 6vw, 80px);
}

.wr-pyramid-card__title {
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 600;
  color: var(--wr-white);
  line-height: 1.2;
  margin-bottom: 10px;
  hyphens: none;
  -webkit-hyphens: none;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}

.wr-pyramid-card__body {
  font-size: clamp(12px, 0.95vw, 15px);

  color: rgba(242,242,242,0.96);
  text-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 2px 16px rgba(0,0,0,0.55);
  line-height: 1.55;
  max-width: 540px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}

/* Mobile — all cards full width, radius canonical card */
@media (max-width: 768px) {
  .wr-pyramid-card--1,
  .wr-pyramid-card--2,
  .wr-pyramid-card--3 { width: 100%; border-radius: var(--wr-radius-card); }
}

@media (max-width: 1024px) {
  .wr-slider__title  { font-size: clamp(24px, 4vw, 36px); }
  .wr-pyramid__title { font-size: clamp(24px, 4vw, 36px); }
}

@media (max-width: 768px) {
  /* Defensive CSS reset in case JS hasn't run */
  .wr-pyramid-card { transform: none !important; }
}

@media (max-width: 480px) {
  .wr-slider-card__content { padding: 20px 20px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* === FOOTER === */



  /* Reset —: comes after :root */
  html::-webkit-scrollbar { width: 6px; }
  html::-webkit-scrollbar-track { background: transparent; }
  html::-webkit-scrollbar-thumb {
    background: var(--wr-black-15);
    border-radius: var(--wr-radius-pill);
  }
  html::-webkit-scrollbar-thumb:hover { background: var(--wr-black-40); }

  /* Page background + base rules are defined once in Signal Core (top of file). */

  .wr-l-page {
    max-width: 1320px;
    margin: 0 auto;
    padding: 7rem 2.5rem 8rem;
  }

  .wr-reviews {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: start;
  }

  .wr-reviews__panel {
    position: sticky;
    top: 80px;
  }

  /* section-label */
  .wr-section-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, 'Liberation Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 17px;
    /* color intentionally NOT set here so .wr-section-label--light keeps
       winning on dark backgrounds */

    hyphens: none;
    -webkit-hyphens: none;
  }

  .wr-section-label::before {
    content: '';
    display: inline-block;
    width: 22px; height: 2px;
    border-radius: 2px;
    background: var(--wr-grad);
    flex-shrink: 0;
    animation: wrEyebrowPulse 6s ease-in-out infinite;
  }

  .wr-heading {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.2;

    letter-spacing: -0.01em;
    color: var(--wr-black);
    margin-bottom: 1.25rem;
    hyphens: none;
    -webkit-hyphens: none;
  }

  /* gradient-text utility */
  .wr-heading--gradient {
    background: var(--wr-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }

  .wr-supporting {
    font-size: 0.925rem;
    font-weight: 400;

    color: var(--wr-black-50);
    line-height: 1.7;
    margin-bottom: 2.25rem;
  }

  .wr-reviews__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    align-items: start;
  }

  .wr-reviews__col-a { display: flex; flex-direction: column; gap: 1.2rem; }
  /* col-b starts lower — visual offset / desync */
  .wr-reviews__col-b { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 3rem; }

  /* ── wr-card ── */
  .wr-card {

    background: var(--wr-white);

    border-radius: var(--wr-radius-card);
    padding: 1.4rem 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    position: relative;

    box-shadow: 0 4px 16px var(--wr-black-06);
    animation: fadeUp 0.5s ease both, float 5s ease-in-out infinite;
    transition: box-shadow var(--wr-trans-slow), transform var(--wr-trans-fast);
  }

  .wr-card::before { display: none; }


  @media (hover: hover) and (pointer: fine) {
    .wr-card:hover {
      transform: translateY(-3px);
      animation-play-state: paused;
    }
    .wr-card--cta:hover {
      transform: translateY(-6px);
      animation-play-state: paused;
    }
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }


  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-3px); }
  }

  .wr-reviews__col-a .wr-card:nth-child(1) { animation-delay: .04s, 0s;   }
  .wr-reviews__col-a .wr-card:nth-child(2) { animation-delay: .14s, 0.6s; }
  .wr-reviews__col-a .wr-card:nth-child(3) { animation-delay: .24s, 1.2s; }
  .wr-reviews__col-a .wr-card:nth-child(4) { animation-delay: .34s, 1.8s; }
  .wr-reviews__col-a .wr-card:nth-child(5) { animation-delay: .44s, 2.4s; }
  .wr-reviews__col-b .wr-card:nth-child(1) { animation-delay: .09s, 0.3s; }
  .wr-reviews__col-b .wr-card:nth-child(2) { animation-delay: .19s, 0.9s; }
  .wr-reviews__col-b .wr-card:nth-child(3) { animation-delay: .29s, 1.5s; }
  .wr-reviews__col-b .wr-card:nth-child(4) { animation-delay: .39s, 2.1s; }
  .wr-reviews__col-b .wr-card:nth-child(5) { animation-delay: .49s, 2.7s; }

  /* CTA card — gradient filled (Brand System wr-card--cta + Mode D diagonal) */
  .wr-card--cta {

    background: var(--wr-grad-diag);
    border: none;
    min-height: 9rem;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
  }

  .wr-card--cta::before { display: none; }

  .wr-card--cta-label {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.02em;

    color: var(--wr-white);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .wr-card__top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .wr-card__top .wr-card__quote { flex-shrink: 0; }

  .wr-card__quote svg { width: 2rem; height: 2rem; }

  .wr-card__name {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;

    color: var(--wr-black-38);
    text-align: right;
    margin-top: auto;
    padding-top: 0.5rem;
  }

  .wr-card__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--wr-black);
    line-height: 1.4;
    letter-spacing: -0.01em;
  }


  .wr-accent,
  .wr-accent { color: var(--wr-orange); }

  .wr-card__body {
    font-size: 0.8rem;
    font-weight: 400;

    color: var(--wr-black-50);
    line-height: 1.72;
  }

  /* ── Focus-visible — keyboard navigation, ── */
  :focus-visible {
    outline: 2px solid var(--wr-orange);
    outline-offset: 3px;
    border-radius: var(--wr-radius-sm);
  }
  :focus:not(:focus-visible) { outline: none; }
  /* Pill-shaped elements get pill radius on focus ring */
  .wr-card--cta:focus-visible { border-radius: var(--wr-radius-card); }


  @media (prefers-reduced-motion: reduce) {
    .wr-card { animation: none; }
  }


  @media (max-width: 1024px) {
    .wr-reviews { grid-template-columns: 1fr; gap: 3rem; }
    .wr-reviews__panel {
      position: static;
      order: -1;
    }
  }

  @media (max-width: 768px) {
    /* float animation: 0→-2px→0 at ≤768px */
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-2px); }
    }
    /* Parallax column transforms are reset by JS (see prefersReducedMotion / isMobile guard).
       Defensive CSS reset in case JS hasn't run: */
    .wr-reviews__col-a, .wr-reviews__col-b { transform: none !important; }
  }


  @media (max-width: 480px) {
    .wr-l-page { padding: 4rem 1.25rem 5rem; }
    .wr-reviews__cols { grid-template-columns: 1fr; }
    .wr-reviews__col-b { margin-top: 0; }
  }

/* === SLIDER + PYRAMID === */

  /* ── BRAND TOKENS (:root block) ── */


  /* Reset —: after :root, before element rules */

  /* ── html block: smoothing, scroll, overflow, scrollbar spec ── */
  html::-webkit-scrollbar { width: 6px; }
  html::-webkit-scrollbar-track { background: transparent; }
  html::-webkit-scrollbar-thumb {
    background: var(--wr-black-15);
    border-radius: var(--wr-radius-pill);
  }
  html::-webkit-scrollbar-thumb:hover { background: var(--wr-black-40); }

  /* Page background + base rules are defined once in Signal Core (top of file). */

  /* ── SIGNAL SWEEP ──────────────────────────────────────────────────────────
     Light → dark bridge that carries a brand-gradient streak side-to-side and
     dips it into the dark, resolving the page's signal motif into the footer. */
  .hp-fade {
    position: relative;
    height: 72svh;
    min-height: 460px;
    background: linear-gradient(to bottom,
      var(--wr-white) 0%,
      var(--wr-white) 13%,
      #2a2018 64%,
      #120d09 86%,
      var(--wr-black) 100%);
    overflow: hidden;
    z-index: 6;
  }
  .hp-fade__comet {
    position: absolute;
    top: 50%; left: 0;
    width: min(900px, 60vw); height: 120px;
    border-radius: 999px;
    background: linear-gradient(90deg,
      rgba(255, 216, 0, 0)    0%,
      rgba(255, 216, 0, 0.28) 46%,
      rgba(247, 120, 40, 0.85) 82%,
      rgba(240, 73, 35, 1)    100%);
    filter: blur(30px);
    transform: translate(-55vw, -50%);
    will-change: transform;
    pointer-events: none;
  }
  .hp-fade__head {
    position: absolute;
    top: 50%; right: -30px;
    width: 230px; height: 230px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
      rgba(255, 238, 170, 0.95) 0%,
      rgba(247, 120, 40, 0.7)   42%,
      rgba(240, 73, 35, 0)      72%);
    filter: blur(12px);
  }
  @media (prefers-reduced-motion: reduce) {
    .hp-fade__comet { transform: translate(28vw, -22%); }
  }

  .wr-footer-viewport {
    width: 100vw;
    height: 100svh;
    /* Top clearance is auto-measured from the live nav (--wr-footer-top, set in
       components.js: nav bottom + the header's own inter-bar gap), so the card sits
       below the fixed header by exactly that gap. Fallback covers pre-JS / no-JS. */
    padding: var(--wr-footer-top, 120px) 28px clamp(48px, 6vh, 68px);
    background: var(--wr-black);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }

  .wr-footer-card {
    position: relative;
    width: 100%;
    /* height = viewport minus the vertical padding above */
    height: calc(100svh - var(--wr-footer-top, 120px) - clamp(48px, 6vh, 68px));
    border-radius: var(--wr-radius-card);
    overflow: visible;
    display: flex; flex-direction: column;
    padding: 64px 64px 40px;
  }

  /* Desktop defaults for the homepage-footer mobile redesign: keep the desktop
     copy, hide the mobile copy variant, and hide the legal column (on desktop the
     legal links live in the bottom cutout bar). Mobile flips these (see below). */
  .wr-footer-cta-headline .wr-foot-mobile,
  .wr-footer-brand-desc .wr-foot-mobile { display: none; }
  .wr-footer-nav-col--legal { display: none; }

  .wr-footer-clip {
    position: absolute; inset: 0;
    border-radius: var(--wr-radius-card); overflow: hidden; z-index: 0;
  }

  .wr-footer-bg {
    position: absolute; inset: 0;
    background-image: url('/assets/img/footer/home.jpg'), linear-gradient(135deg, var(--wr-hero-30), var(--wr-hero-60));
    background-size: cover; background-position: center;
    transform: scale(1.04);
    transition: transform 8s ease;
    will-change: transform;
  }

  @media (hover: hover) and (pointer: fine) {
    .wr-footer-card:hover .wr-footer-bg { transform: scale(1.0); }
  }

  /* Light scrim only — images already carry their own tint; keep just enough
     toward the bottom for the footer text/legal bar to stay legible. */
  .wr-footer-overlay {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 50% 40%, #F0492314 0%, transparent 65%),
      linear-gradient(to bottom, #0D0A0726 0%, #0D0A0740 55%, #0D0A0799 100%);
  }
  .wr-footer-overlay::after {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: 0.15; pointer-events: none;
  }

  /* ── INNER LAYOUT ── */
  .wr-footer-inner {
    position: relative; z-index: 2;
    display: flex; flex-direction: column;
    height: 100%; flex: 1;
  }

  /* ── CTA BAND ── */
  .wr-footer-cta-band {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    opacity: 0;
    animation: fadeUp 0.8s ease 0.1s forwards;
  }

  .wr-footer-cta-headline {
    font-size: clamp(32px, 4.5vw, 52px);

    font-weight: 700;
    line-height: 1.2;

    color: var(--wr-white);

    letter-spacing: -0.01em;
    text-align: center;
    /* white-space: normal is the default — no explicit declaration needed */
  }

  .wr-footer-cta-headline .wr-accent {

    background: var(--wr-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* ── CONTACT BUTTON ── */
  .wr-cta-contact-btn {
    margin-top: 32px;
    display: inline-flex; align-items: center; gap: 12px;
    padding: 16px 56px;
    border-radius: var(--wr-radius-pill);
    border: none;

    background: linear-gradient(90deg, var(--wr-yellow) 0%, var(--wr-orange) 50%, var(--wr-yellow) 100%);
    background-size: 200% auto;
    cursor: pointer; text-decoration: none;
    position: relative; overflow: hidden;
    transition: transform var(--wr-trans-fast), box-shadow var(--wr-trans-slow);

    box-shadow: 0 4px 24px #F0492359;
    animation: btnGradientMove 3s ease-in-out infinite alternate;
  }
  @keyframes btnGradientMove {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
  }
  .wr-cta-contact-btn::after {
    content: '';
    position: absolute; top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent 0%, #FFFFFF52 50%, transparent 100%);
    animation: btnSweep 3s ease-in-out infinite alternate;
  }
  @keyframes btnSweep {
    0%   { left: -75%; }
    60%, 100% { left: 125%; }
  }

  @media (hover: hover) and (pointer: fine) {
    .wr-cta-contact-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 32px #F0492380;
    }
  }
  .wr-cta-contact-btn span {
    position: relative; z-index: 1;

    font-size: 14px; font-weight: 600;

    color: var(--wr-white);
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .wr-cta-contact-btn .wr-btn-arrow {
    position: relative; z-index: 1;
    font-size: 16px;

    color: var(--wr-white-75);
    transition: transform var(--wr-trans-fast);
  }
  @media (hover: hover) and (pointer: fine) {
    .wr-cta-contact-btn:hover .wr-btn-arrow { transform: translateX(4px); }
  }

  /* ── COLUMNS ── */
  .wr-footer-columns {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    padding: 0 0 52px;
    opacity: 0;
    animation: fadeUp 0.8s ease 0.25s forwards;
    width: 100%; max-width: 820px;
    margin: 0 auto;
  }

  .wr-footer-nav-cols-wrapper {
    display: contents;
  }

  .wr-footer-brand {
    display: flex; flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .wr-footer-logo {
    display: flex; align-items: center;
    margin-bottom: 16px;
  }

  .wr-footer-brand-desc {
    font-size: 13px;

    font-weight: 400;
    line-height: 1.65;

    color: var(--wr-white-45);
    max-width: 240px;
    margin-bottom: 20px;
    text-align: center;
  }

  .wr-footer-brand-bottom {
    display: flex; flex-direction: column;
    align-items: center;
    width: fit-content;
  }

  .wr-footer-contact-row {
    display: flex; gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .wr-footer-contact-pill {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px;

    font-weight: 600;

    color: var(--wr-white-75);
    text-decoration: none;
    transition: color var(--wr-trans-fast);
  }
  .wr-footer-contact-pill svg {

    fill: var(--wr-white-65);
    transition: fill var(--wr-trans-fast);
    flex-shrink: 0;
  }
  @media (hover: hover) and (pointer: fine) {
    .wr-footer-contact-pill:hover {
      background: var(--wr-grad);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .wr-footer-contact-pill:hover svg { fill: var(--wr-yellow); }
  }

  .wr-contact-icon {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }

  .wr-footer-social {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 16px;
  }

  .wr-social-icon {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
  }
  .wr-social-icon svg {
    width: 16px; height: 16px;

    fill: var(--wr-white-65);
    transition: fill var(--wr-trans-fast), transform var(--wr-trans-fast);
    display: block;
  }
  @media (hover: hover) and (pointer: fine) {
    .wr-social-icon:hover svg {
      fill: url(#socialGrad);
      transform: translateY(-2px);
    }
  }

  /* Nav columns */
  .wr-footer-nav-col { padding-left: 48px; text-align: center; }

  .wr-footer-nav-label {
    font-size: 12px;

    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;

    color: var(--wr-white-45);
    margin-bottom: 20px;
  }

  .wr-footer-nav-list {
    list-style: none;
    display: flex; flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .wr-footer-nav-list a {
    font-size: 14px;

    font-weight: 400;

    color: var(--wr-white-65);
    text-decoration: none;
    display: inline-block;
    transition: padding-left var(--wr-trans-fast);
  }
  @media (hover: hover) and (pointer: fine) {
    .wr-footer-nav-list a:hover {
      padding-left: 4px;

      background: var(--wr-grad);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  /* Row wrappers inside watch-btn — hidden at desktop, shown at tablet */
  .hp-watch-btn-row1, .hp-watch-btn-row2 { display: none; }

  /* ── BOTTOM CUTOUT ── */
  .hp-watch-cover {
    position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: auto; min-width: max-content;
    height: 48px;

    background: var(--wr-black);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    z-index: 4; padding: 0 32px;
  }
  .hp-watch-btn {
    position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: auto; min-width: max-content;
    height: 48px;
    display: flex; align-items: center; justify-content: center;
    gap: 20px;
    padding: 0 32px;

    background: var(--wr-black);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    z-index: 5; cursor: default;
  }
  .hp-watch-btn::before {
    content: '';
    position: absolute; bottom: 0; left: -20px;
    width: 20px; height: 20px;
    background: transparent;

    box-shadow: 5px 5px 0 5px var(--wr-black);
    border-bottom-right-radius: 20px;
    pointer-events: none;
  }
  .hp-watch-btn::after {
    content: '';
    position: absolute; bottom: 0; right: -20px;
    width: 20px; height: 20px;
    background: transparent;

    box-shadow: -5px 5px 0 5px var(--wr-black);
    border-bottom-left-radius: 20px;
    pointer-events: none;
  }


  .wr-cutout-copy {
    font-size: 12px;

    color: var(--wr-white-45);
  }

  .wr-cutout-links {
    display: flex; align-items: center; gap: 4px;
    flex-wrap: wrap; justify-content: center;
  }
  .wr-cutout-links a {
    font-size: 12px;

    color: var(--wr-white-65);
    text-decoration: none; padding: 2px 6px; border-radius: var(--wr-radius-sm);
    transition: color var(--wr-trans-fast), background var(--wr-trans-fast);
  }
  @media (hover: hover) and (pointer: fine) {

    .wr-cutout-links a:hover { color: var(--wr-white-75); background: var(--wr-black-10); }
  }

  .wr-cutout-links span { font-size: 10px; color: var(--wr-white-38); }

  .wr-cutout-status {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600;

    color: var(--wr-white-45);

  }
  .wr-badge-live-dot {
    width: 5px; height: 5px; border-radius: 50%;
    /* #22C55E (Tailwind green) replaced — not in brand palette.
       Using --wr-yellow as the warm operational signal colour. */
    background: var(--wr-yellow);
    box-shadow: 0 0 6px #FFD80088;
    animation: pulse 2s infinite; flex-shrink: 0;
  }

  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── Focus-visible — keyboard navigation, ── */
  :focus-visible {
    outline: 2px solid var(--wr-orange);
    outline-offset: 3px;
    border-radius: var(--wr-radius-sm);
  }
  :focus:not(:focus-visible) { outline: none; }
  /* Pill-radius for pill-shaped interactive elements */
  .wr-cta-contact-btn:focus-visible { border-radius: var(--wr-radius-pill); }
  .wr-footer-nav-list a:focus-visible { border-radius: 4px; }

  /* ── REDUCED MOTION (Brand System — required in every CSS file) ── */
  @media (prefers-reduced-motion: reduce) {
    .wr-footer-cta-band, .wr-footer-columns { animation: none; opacity: 1; }
    .wr-footer-bg { transition: none; }
  }

  @media (max-width: 1024px) {
    .wr-footer-card { padding: 48px 36px 32px; border-radius: 20px; }

    .wr-footer-columns {
      grid-template-columns: 1fr;
      max-width: 100%;
      gap: 32px 0;
      padding-bottom: 80px;
    }

    .wr-footer-nav-cols-wrapper {
      display: flex;
      justify-content: center;
      gap: 64px;
    }
    .wr-footer-nav-col { padding-left: 0; }

    .hp-watch-btn {
      flex-direction: column;
      gap: 5px;
      height: auto;
      min-height: 60px;
      padding: 10px 32px 14px;
    }
    .hp-watch-btn-row1,
    .hp-watch-btn-row2 {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .hp-watch-btn > .wr-cutout-copy,
    .hp-watch-btn > .wr-cutout-links,
    .hp-watch-btn > .wr-cutout-status { display: none; }
  }

  @media (max-width: 768px) {
    /* footer-bg parallax already gated by (hover:hover) and (pointer:fine),
       so no JS scroll parallax exists here — no additional reset needed. */

    /* Don't cram the full footer into one screen on mobile/tablet — let it
       size to its content so it reads as a clean, scrollable closing section.
       (The desktop layout locks the card to 100svh, which squashes everything.) */
    html, body { height: auto; }  /* overflow stays base (overflow-x:clip) so position:sticky keeps working */
    .wr-footer-viewport {
      height: auto; min-height: 0; padding: 14px; align-items: flex-start;
    }
    .wr-footer-card {
      height: auto; min-height: 0; padding: 48px 26px 30px; border-radius: 20px;
    }
    .wr-footer-inner { height: auto; }
    .wr-footer-cta-band {
      flex: 0 0 auto; padding: 96px 0 52px; justify-content: center; text-align: center;
    }
    .wr-footer-columns {
      display: flex; flex-direction: column; align-items: center;
      grid-template-columns: 1fr; max-width: 100%; padding: 8px 0 40px; gap: 48px;
    }
    .wr-footer-brand { text-align: center; align-items: center; }
    /* single, centred stack of nav groups — higher specificity so it always wins */
    .wr-footer-card .wr-footer-nav-cols-wrapper {
      display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%;
    }
    .wr-footer-card .wr-footer-nav-col { padding-left: 0; text-align: center; }
    .wr-footer-nav-list { gap: 4px; }
  }

  @media (max-width: 480px) {
    html, body { height: auto; }  /* overflow stays base (overflow-x:clip) so position:sticky keeps working */

    .wr-footer-viewport {
      height: auto;
      min-height: 0;
      padding: 12px;
      align-items: flex-start;
    }

    .wr-footer-card {
      height: auto;
      min-height: 0;
      padding: 0 20px 20px;
      border-radius: 18px;
    }

    .wr-footer-cta-band {
      flex: 0 0 auto;
      padding: 86px 0 44px;
      justify-content: center;
    }

    .wr-footer-cta-headline { font-size: clamp(28px, 8vw, 38px); }
    .wr-cta-contact-btn { margin-top: 28px; }

    .wr-footer-columns {
      grid-template-columns: 1fr;
      max-width: 100%;
      padding: 0 0 24px;
      gap: 44px 0;
    }

    .wr-footer-nav-cols-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 36px;
    }
    .wr-footer-nav-col { padding-left: 0; }

    /* watch-btn: static, no cutout, transparent bg */
    .hp-watch-cover { display: none; }
    .hp-watch-btn {
      position: static;
      transform: none;
      left: auto;
      width: 100%;
      min-width: 0;
      height: auto;
      background: transparent;
      border-radius: 0;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 32px 16px 40px;
    }
    .hp-watch-btn::before, .hp-watch-btn::after { display: none; }

    .hp-watch-btn > .wr-cutout-copy   { display: block; text-align: center; }
    .hp-watch-btn > .wr-cutout-links  { display: flex; justify-content: center; flex-wrap: wrap; }
    .hp-watch-btn > .wr-cutout-status { display: flex; justify-content: center; }
    .hp-watch-btn-row1, .hp-watch-btn-row2 { display: none; }
  }

/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE FOOTER — MOBILE REDESIGN  (≤768, mobile-only; desktop untouched)
   • no brand logo  • media-partnership copy  • legal becomes its own column
     inside the image  • the image ends with a rounded bottom, and the
     copyright + status sit on the dark surface BELOW it.
   Placed after the other footer media blocks so it wins at every mobile width.
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* swap copy to the media-partnership variant */
  .wr-footer-cta-headline .wr-foot-desktop,
  .wr-footer-brand-desc .wr-foot-desktop { display: none; }
  .wr-footer-cta-headline .wr-foot-mobile,
  .wr-footer-brand-desc .wr-foot-mobile { display: block; }

  /* drop the brand logo */
  .wr-footer-logo { display: none; }

  /* legal joins the in-card columns; remove it from the bottom bar */
  .wr-footer-nav-col--legal { display: block; }
  .hp-watch-btn .wr-cutout-links { display: none; }

  /* the photo card ends with a rounded bottom; the baseline (copyright + status)
     lives OUTSIDE the image on the dark surface below it. The clip is trimmed to
     the content height (card minus baseline) so its rounded bottom shows, and the
     baseline's height is fixed to match (= --wr-foot-baseline). */
  .wr-footer-card {
    position: relative; display: flex; flex-direction: column;
    padding: 0; overflow: visible; background: transparent;
  }
  .wr-footer-clip {
    inset: 0 0 auto 0;
    height: calc(100% - var(--wr-foot-baseline, 108px));
    border-radius: var(--wr-radius-card);
  }
  .wr-footer-inner { position: relative; z-index: 2; padding: 44px 24px 40px; }
  .hp-watch-btn {
    position: relative; z-index: 2;
    min-height: var(--wr-foot-baseline, 108px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 16px 16px 8px; background: transparent; border-radius: 0;
  }
  .hp-watch-btn > .wr-cutout-copy,
  .hp-watch-btn > .wr-cutout-status { display: flex; justify-content: center; text-align: center; }
  /* show ONLY the single flat copy + status; hide the tablet row duplicates and
     the cutout cover panel (the black brick) at every mobile width */
  .hp-watch-btn-row1, .hp-watch-btn-row2 { display: none; }
  .hp-watch-cover { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPACT FOOTER  (data-footer="compact"  →  all inner pages)
═══════════════════════════════════════════════════════════════════════ */
.wr-fc {
  background: var(--wr-black);
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* ── Background image — per-page (Signal Sign-off) over a site default ──
   Each page sets its own footer image through --fc-img (written inline by
   Signal Shell). It rides on top; the site default sits beneath, so a page
   whose dedicated image has not been supplied yet never shows a blank footer.
   A page-image swap is therefore a file drop in /assets/img/footer/ — no code
   change. Pages with no dedicated image (articles, legal, thank-you) leave
   --fc-img unset and fall straight through to the default. */
.wr-fc-bg {
  position: absolute; inset: 0;
  background-image: var(--fc-img, none), url('/assets/img/footer/home.jpg'), linear-gradient(135deg, var(--wr-hero-30), var(--wr-hero-60));
  background-size: cover, cover, cover;
  background-position: center, center, center;
}

/* Light scrim only — image carries its own tint; darker toward the bottom
   so the compact footer's CTA/columns/legal bar stay legible. */
.wr-fc-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, #F0492312 0%, transparent 65%),
    linear-gradient(to bottom, #0D0A0733 0%, #0D0A074D 50%, #0D0A07A6 100%);
}

.wr-fc-overlay::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.15; pointer-events: none;
}

/* ── Signal Trace — footer-reveal edge ──────────────────────────────────────
   On reveal pages the footer sits FLAT behind the page; the last content
   section above it ends in a rounded card (the "footer cap") and the sparks of
   light run along THAT rounded bottom edge — so the seam reads as the section
   closing off and the footer being uncovered beneath it. The cap rounding +
   spark canvas are mounted on the last section by Signal Trace (components.js)
   and scoped to reveal pages, so static compact footers stay flat + inert. */
[class*="-foot-reveal"] .wr-foot-cap {
  border-bottom-left-radius: var(--wr-radius-card);
  border-bottom-right-radius: var(--wr-radius-card);
}
.wr-foot-cap-spark {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 96px;
  pointer-events: none; z-index: 6;
  opacity: 0; transition: opacity 0.5s ease;
}
@media (prefers-reduced-motion: reduce) {
  [class*="-foot-reveal"] .wr-foot-cap { border-radius: 0; }
  .wr-foot-cap-spark { display: none; }
}

/* Flow fallback (Reveal Lift sets this when the footer can't fit the viewport,
   e.g. a short phone): footer scrolls in normal flow, so drop the rounded
   cap and the inert spark edge. */
.is-foot-flow .wr-foot-cap { border-radius: 0; }
.is-foot-flow .wr-foot-cap-spark { display: none; }

/* ── Card (content layer above bg) ── */
.wr-fc-card {
  position: relative; z-index: 1;
  width: 100%;
  min-height: 50vh;
  padding: 40px clamp(20px, 5vw, 80px) 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── CTA: middle column — flex centers its content vertically inside the grid cell ── */
.wr-fc-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px;
  padding: 0 clamp(16px, 3vw, 32px);
}

.wr-fc-cta-headline {
  font-size: clamp(17px, 1.8vw, 24px);
  font-weight: 700;
  color: var(--wr-white);
  line-height: 1.25;
  margin: 0;
  font-family: var(--wr-font);
  text-align: center;
}

/* ── Outlined shimmer button ── */
.wr-fc-cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 26px;
  border-radius: var(--wr-radius-pill);
  border: 1px solid var(--wr-white-38);
  color: var(--wr-white-75);
  font-family: var(--wr-font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: border-color var(--wr-trans-fast), color var(--wr-trans-fast);
}

@keyframes fc-btn-shimmer {
  0%   { transform: translateX(-220%) skewX(-18deg); }
  100% { transform: translateX(320%) skewX(-18deg); }
}

.wr-fc-cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.14) 50%, transparent 100%);
  animation: fc-btn-shimmer 3s ease-in-out infinite;
  animation-delay: 1s;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .wr-fc-cta-btn:hover { border-color: var(--wr-white-65); color: var(--wr-white); }
}

.wr-fc-accent {
  background: var(--wr-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Main row: 3 equal columns, all stretch to same height ── */
.wr-fc-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 clamp(24px, 4vw, 48px);
  align-items: stretch;
}

/* ── Nav cols wrapper (col 3) ── */
.wr-fc-nav-cols {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
}

/* ── Brand column (col 1) ── */
.wr-fc-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 14px;
  width: 100%;
}

.wr-fc-logo { display: flex; align-items: center; }

.wr-fc-brand-desc {
  font-size: 12.5px;
  color: var(--wr-white-65);
  line-height: 1.65;
  margin: 0;
  font-family: var(--wr-font);
}

.wr-fc-contact-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.wr-fc-social-row { display: flex; gap: 4px; justify-content: center; }

/* ── Social icon shimmer gradient ── */
@keyframes fc-icon-shimmer {
  0%, 80%, 100% { filter: brightness(1); }
  50%            { filter: brightness(1.35) drop-shadow(0 0 3px #FFD80040); }
}

.wr-fc-social-row .wr-social-icon svg {
  fill: url(#socialGrad);
  animation: fc-icon-shimmer 4s ease infinite;
}
.wr-fc-social-row .wr-social-icon:nth-child(2) svg { animation-delay: 0.25s; }
.wr-fc-social-row .wr-social-icon:nth-child(3) svg { animation-delay: 0.50s; }
.wr-fc-social-row .wr-social-icon:nth-child(4) svg { animation-delay: 0.75s; }
.wr-fc-social-row .wr-social-icon:nth-child(5) svg { animation-delay: 1.00s; }

/* ── Nav columns (text left, auto-width, sits on the right) ── */
.wr-fc-nav-col { text-align: left; }

.wr-fc-nav-col .wr-footer-nav-list { align-items: flex-start; }

/* ── Bottom bar ── */
.wr-fc-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-top: 20px;
}

.wr-fc-copy {
  font-size: 11px;
  color: var(--wr-white-38);
  font-family: var(--wr-font);
}

.wr-fc-legal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.wr-fc-legal a {
  font-size: 11px;
  color: var(--wr-white-38);
  text-decoration: none;
  font-family: var(--wr-font);
  transition: color var(--wr-trans-fast);
}

@media (hover: hover) and (pointer: fine) {
  .wr-fc-legal a:hover { color: var(--wr-white-65); }
}

.wr-fc-dot { color: var(--wr-white-16); font-size: 11px; user-select: none; }

.wr-fc-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--wr-white-38);
  font-family: var(--wr-font);
}

/* ── Responsive: tablet — CTA floats to top, brand + nav side by side ── */
@media (max-width: 1024px) {
  .wr-fc-main {
    grid-template-columns: 1fr 1fr;
    row-gap: 32px;
  }
  .wr-fc-cta {
    grid-column: 1 / -1;
    order: -1;
    padding: 16px 0 8px;
  }
  .wr-fc-nav-cols { justify-content: flex-end; }
}

/* ── Responsive: mobile ──────────────────────────────────────────────────
   Parallax reveal stays ON (the footer is fixed to the bottom and the page
   lifts to uncover it). A fixed footer only clips when it is TALLER than the
   viewport — its top would sit above the fold behind the header. So the mobile
   job is purely to keep the footer SHORTER than a phone screen: every region
   gets its own full-width row with real breathing room (no cramped overlap),
   the two nav columns ride SIDE-BY-SIDE to save vertical space, and the card
   carries enough top room that the CTA clears the header on the shortest
   phones. Reveal Lift measures this height and lifts the page by exactly it. */
@media (max-width: 768px) {
  .wr-fc-card {
    min-height: 0;                 /* drop the 50vh floor — size to content */
    padding: 44px 24px 26px;       /* top room keeps the CTA clear of the header */
    gap: 20px;
  }

  /* Stack the three regions; CTA leads. */
  .wr-fc-main {
    grid-template-columns: 1fr;
    row-gap: 22px;
  }
  .wr-fc-cta {
    order: -1;
    padding: 0;
    gap: 13px;
  }

  /* Brand: logo · blurb · contact · social, centered. */
  .wr-fc-brand { gap: 11px; }

  /* Two nav columns sit side-by-side (not stacked) to keep the footer short. */
  .wr-fc-nav-cols {
    justify-content: center;
    gap: 44px;
  }
  .wr-fc-nav-col { text-align: center; }
  .wr-fc-nav-col .wr-footer-nav-list { align-items: center; gap: 9px; }

  /* Bottom bar stacks into its own centered rows. */
  .wr-fc-bottom {
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-align: center;
    padding-top: 18px;
  }
  .wr-fc-legal { justify-content: center; }
}

@media (max-width: 480px) {
  .wr-fc-card { padding: 40px 20px 24px; gap: 18px; }
  .wr-fc-cta-headline { font-size: 20px; line-height: 1.3; }
  .wr-fc-cta-btn { padding: 11px 24px; }
  .wr-fc-brand-desc { font-size: 13px; line-height: 1.55; }
  .wr-fc-nav-cols { gap: 30px; }
  .wr-fc-legal { row-gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .wr-fc-social-row .wr-social-icon svg { animation: none; filter: none; }
}

/* === COMBINED-PAGE OVERRIDES — must remain last === */

/* ── html: scroll container must live on html, never on body ──────────────
   File4 standalone injected: html { overflow-y:hidden; height:100% }
   overflow-y:hidden on html locks all scrolling on the combined page.
   overflow-y:scroll is the correct value — it never creates a NEW scroll
   container (unlike auto), so position:sticky on all descendants works. */
html {
  height: auto !important;
  overflow-y: scroll !important;
}

/* ── body: must be a plain block, no overflow, no flex ────────────────────
   TWO rules from standalone files destroy the combined layout:
   1. File1 body { overflow-x: hidden } — overflow:hidden on body promotes
      body to a scroll container, silently breaking every position:sticky
      descendant (.wr-slider, .wr-reviews__panel). Replace with clip.
   2. File4 body { display:flex; align-items:center; justify-content:center;
      height:100%; min-height:100svh; background:var(--wr-black) } — lays
      out all sections horizontally and turns page background black.
   Both are neutralised here. */
body {
  display: block !important;
  align-items: unset !important;
  justify-content: unset !important;
  height: auto !important;
  min-height: unset !important;
  overflow-x: clip !important;
  background: var(--wr-white) !important;
}

/* Pyramid section: needs z-index above reviews so it is not painted under it.
   Its cards animate in from translateX(-110%) — ensure the section itself
   occupies its natural flow position with no stacking-context bleed. */
/* z-index raised above the fixed Kinetic Marquee (z-index:1) so no words bleed
   through; pyramid still sits above reviews (which follows it in DOM). */
.wr-pyramid {
  position: relative;
  z-index: 6;
  overflow: visible; /* cards start at translateX(-110%); overflow:hidden was clipping them, making section look blank */
  overflow-x: clip;  /* clip (not hidden) prevents horizontal scroll without breaking sticky or hiding the cards */
}

/* Reviews: sits after pyramid in DOM — must not overlap it.
   z-index:5 keeps it below pyramid but above the fixed marquee.
   Solid page-white backing so the kinetic field can never show through. */
.wr-l-page {
  position: relative;
  z-index: 5;
  background: var(--wr-white);
}

/* ── HEADER CLEARANCE FIXES ────────────────────────────────────────────────
   In the combined page the fixed header (72px) overlaps the pinned sections.
   These sections take a top offset so their titles clear the glass header.  */

/* Differentiator deck: breathing room above the slogan so it doesn't sit right
   under the nav. Expanded height is fitted to the stuck viewport by Signal
   Motion (--wr-deck-exp); the fallback keeps a firm minimum on short screens. */
.wr-slider {
  padding-top: clamp(52px, 7vh, 88px);
}
.wr-slider-card.is-expanded {
  height: var(--wr-deck-exp, clamp(380px, calc(100svh - 320px), 640px));
}
@media (max-width: 768px) {
  .wr-slider-card.is-expanded {
    height: var(--wr-deck-exp, clamp(340px, calc(100svh - 260px), 560px));
  }
}

/* Pyramid: small top breathing room. The deck above already clears the header,
   so no full header-height offset is needed — keeps the deck→pyramid gap tight. */
.wr-pyramid {
  padding-top: 48px;
}

/* Reviews panel: sticky top must clear the fixed header */
.wr-reviews__panel {
  top: calc(var(--wr-header-height) + 24px);
}

/* ============================================================================
   SIGNAL DROP — nav mega-menu fly-out (Services + Tech Hub)
   Pill-width glass deck · running Signal Edge spark · page dims behind it.
   ============================================================================ */
@property --wr-drop-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* Page-dim scrim — blurs everything behind the open fly-out */
.wr-drop-scrim {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(10,8,5,0.30);
  backdrop-filter: blur(7px) saturate(105%);
  -webkit-backdrop-filter: blur(7px) saturate(105%);
  opacity: 0; pointer-events: none;
  transition: opacity 0.34s var(--wr-ease-out);
}
body.is-drop-open .wr-drop-scrim { opacity: 1; pointer-events: auto; }

/* Trigger chevron */
.wr-nav-item--mega > a { display: inline-flex; align-items: center; gap: 6px; }
.wr-nav-chevron {
  width: 12px; height: 12px; stroke: currentColor; fill: none;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.32s var(--wr-ease-out); opacity: 0.7;
}
.wr-nav-item--mega.is-open > a .wr-nav-chevron { transform: rotate(180deg); opacity: 1; }

/* Pill-anchored fly-out — matches the links-pill width */
#siteHeader #linksPill { position: relative; }
.wr-nav-item--mega { position: static; }
.wr-mega {
  position: absolute; top: calc(100% + 14px); left: 0; right: 0;
  transform: translateY(-8px);
  z-index: 1200;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.26s var(--wr-ease-out), transform 0.34s var(--wr-ease-out), visibility 0s linear 0.34s;
}
.wr-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 20px; }
.wr-nav-item--mega.is-open .wr-mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.26s var(--wr-ease-out), transform 0.42s var(--wr-ease-spring), visibility 0s;
}
.wr-mega__inner {
  position: relative; overflow: hidden; width: 100%;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(20,15,10,0.94), rgba(12,9,6,0.94));
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid var(--wr-white-10);
  box-shadow: 0 30px 70px -28px rgba(0,0,0,0.85), 0 0 0 1px rgba(0,0,0,0.2);
}
/* Running signal-spark edge — two bright sparks lap the rounded border */
.wr-mega__edge {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
  padding: 1.4px;
  background: conic-gradient(from var(--wr-drop-spin),
    transparent 0 5%, var(--wr-yellow) 8%, #FFE680 10%, transparent 15% 52%,
    var(--wr-orange) 57%, #FF7A4D 59%, transparent 65% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: drop-shadow(0 0 5px rgba(240,73,35,0.55));
  animation: wrDropSpin 4.6s linear infinite;
}
@keyframes wrDropSpin { to { --wr-drop-spin: 360deg; } }

.wr-mega__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 18px 20px 10px; }
.wr-mega__eyebrow {
  font-family: var(--drop-mono, var(--wr-font)); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 700;
  background: var(--wr-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.wr-mega__sub { font-size: 12.5px; color: var(--wr-white-45); }
.wr-mega__foot { border-top: 1px solid var(--wr-white-08); padding: 13px 20px; }
#siteHeader .wr-mega__foot a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--wr-white) !important; text-decoration: none;
  transition: gap 0.25s var(--wr-ease-out), color 0.2s ease;
}
.wr-mega__foot a svg { width: 15px; height: 15px; stroke: var(--wr-orange); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#siteHeader .wr-mega__foot a:hover { gap: 12px; color: var(--wr-yellow) !important; }

/* Neutralise the global "#linksPill ul li a" cascade inside the fly-out */
#siteHeader .wr-mega a { text-transform: none; letter-spacing: normal; color: inherit; font-weight: inherit; height: auto; }

/* Clean deck items — flat (no box-in-box), image kept */
.wr-mega__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 14px 14px; }
#techMega .wr-mega__list { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
#siteHeader .wr-mega__item {
  display: block; text-decoration: none; color: inherit;
  border-radius: 14px; padding: 10px; background: transparent; border: 0;
  transition: background 0.22s var(--wr-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  #siteHeader .wr-mega__item:hover { background: var(--wr-white-08); }
  #siteHeader .wr-mega__item:hover .wr-mega__arrow { transform: translateX(2px); stroke: var(--wr-yellow); }
}
.wr-mega__media {
  position: relative; overflow: visible;
  aspect-ratio: 16 / 10; width: 100%; margin-bottom: 12px;
  display: grid; place-items: center;
  background: transparent;
}
/* Concave-corner cutout — the Cutout Guide's exact carved SHAPE, but as a real
   transparent hole (not a fill): the translucent dropdown panel shows straight
   through, so there is no colour to mismatch. The image sits on ::before and is
   masked: a full keep layer XOR a fixed-size SVG of the cut shape (button + the
   two concave fillets) anchored bottom-right. The arrow (.wr-mega__cardfoot) is
   a sibling above and is NOT masked, so it sits cleanly in the hole.
   Cut tile = button 46×38 + fillet 14 = 60×52; keep --cut-w/-h at that ratio so
   the rounded corners stay circular. */
.wr-mega__media {
  --cut-w: 60px; --cut-h: 52px;
  position: relative; overflow: visible; border-radius: 10px;
  aspect-ratio: 16 / 10; width: 100%; margin-bottom: 12px;
  display: grid; place-items: center;
  background: transparent;
}
.wr-mega__media::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 10px 10px 0 10px;
  background-color: #110b06;
  /* bottom scrim — smooth dark gradient to divide text from the photo */
  background-image:
    linear-gradient(to top,
      rgba(13,10,7,0.96) 0%,
      rgba(13,10,7,0.80) 24%,
      rgba(13,10,7,0.38) 52%,
      rgba(13,10,7,0) 80%),
    var(--nav-img, linear-gradient(155deg, #221008, #110b06));
  background-size: cover; background-position: center;
  -webkit-mask:
    linear-gradient(#000, #000),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2052'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23000'%20d='M60%200A14%2014%200%200%201%2046%2014H28A14%2014%200%200%200%2014%2028V40A14%2014%200%200%201%200%2052H60Z'/%3E%3C/svg%3E") right bottom / var(--cut-w) var(--cut-h) no-repeat;
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000, #000),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2052'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23000'%20d='M60%200A14%2014%200%200%201%2046%2014H28A14%2014%200%200%200%2014%2028V40A14%2014%200%200%201%200%2052H60Z'/%3E%3C/svg%3E") right bottom / var(--cut-w) var(--cut-h) no-repeat;
  mask-composite: exclude;
}
.wr-mega__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 10px 10px 0 10px; opacity: 0.12; mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, rgba(242,242,242,0.06) 0 1px, transparent 1px 4px);
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000, #000),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2052'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23000'%20d='M60%200A14%2014%200%200%201%2046%2014H28A14%2014%200%200%200%2014%2028V40A14%2014%200%200%201%200%2052H60Z'/%3E%3C/svg%3E") right bottom / var(--cut-w) var(--cut-h) no-repeat;
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000, #000),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2052'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23000'%20d='M60%200A14%2014%200%200%201%2046%2014H28A14%2014%200%200%200%2014%2028V40A14%2014%200%200%201%200%2052H60Z'/%3E%3C/svg%3E") right bottom / var(--cut-w) var(--cut-h) no-repeat;
  mask-composite: exclude;
}
/* Eyebrow + title overlaid on the photo's bottom-left, above the scrim, clear of
   the bottom-right arrow cutout (padding-right reserves that corner). z2 sits
   above the image (z0) and scanline (z1), below the arrow (z3). */
.wr-mega__overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 3px;
  padding: 28px 56px 9px 12px; pointer-events: none;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,0.5));
  transition: transform 0.32s var(--wr-ease-out);
}
/* hover: lift the eyebrow + title */
#siteHeader .wr-mega__item:hover .wr-mega__overlay { transform: translateY(-4px); }
.wr-mega__txt { display: contents; }
.wr-mega__tag {
  display: block; margin: 0;
  font-family: var(--drop-mono, ui-monospace, monospace); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase;
  /* brand gradient eyebrow with a moving shimmer highlight */
  background: linear-gradient(100deg,
    var(--wr-orange) 0%, var(--wr-orange) 38%,
    var(--wr-yellow) 48%, #fff 52%, var(--wr-yellow) 56%,
    var(--wr-orange) 66%, var(--wr-orange) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: wrMegaShimmer 7s linear infinite;
}
/* hover: speed the eyebrow shimmer up */
#siteHeader .wr-mega__item:hover .wr-mega__tag { animation-duration: 2.2s; }
/* desync each card's shimmer via staggered negative delays */
.wr-mega__item:nth-child(1) .wr-mega__tag { animation-delay: -0.3s; }
.wr-mega__item:nth-child(2) .wr-mega__tag { animation-delay: -2.9s; }
.wr-mega__item:nth-child(3) .wr-mega__tag { animation-delay: -5.1s; }
.wr-mega__item:nth-child(4) .wr-mega__tag { animation-delay: -1.6s; }
.wr-mega__item:nth-child(5) .wr-mega__tag { animation-delay: -4.2s; }
@keyframes wrMegaShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .wr-mega__tag { animation: none; background-position: 50% 0; } }
.wr-mega__name {
  display: block; margin: 0; font-weight: 700; font-size: 14.5px; line-height: 1.16;
  letter-spacing: -0.01em;
  /* white title with a brand highlight parked off-screen; sweeps across on hover */
  background: linear-gradient(100deg,
    var(--wr-white) 0%, var(--wr-white) 42%,
    var(--wr-yellow) 50%, var(--wr-white) 58%, var(--wr-white) 100%);
  background-size: 240% 100%; background-position: 135% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
#siteHeader .wr-mega__item:hover .wr-mega__name { animation: wrMegaShine 0.85s var(--wr-ease-out); }
@keyframes wrMegaShine { from { background-position: 135% 0; } to { background-position: -135% 0; } }
@media (prefers-reduced-motion: reduce) { #siteHeader .wr-mega__item:hover .wr-mega__name { animation: none; } }
.wr-mega__desc { display: block; margin: 0; font-size: 12px; line-height: 1.5; color: var(--wr-white-65); }
/* Arrow only — no background. Sits centered in the transparent cut's button
   area (46×38 at the bottom-right corner); the panel shows through behind it. */
.wr-mega__cardfoot {
  position: absolute; right: 0; bottom: 0; z-index: 3;
  width: 46px; height: 38px;
  display: grid; place-items: center; pointer-events: none;
}
.wr-mega__arrow { width: 17px; height: 17px; stroke: var(--wr-orange); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.28s var(--wr-ease-out), stroke 0.2s ease; }

/* Mobile fullscreen menu — sub-items under Services + Tech Hub */
/* Sub-links — quiet, centred, evenly muted; grouped tight under their parent */
.wr-fssub { list-style: none; margin: 6px 0 20px; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.wr-fsnav .wr-fssub li { opacity: 1; transform: none; }
.wr-fsnav .wr-fssub a {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14.5px; font-weight: 500; letter-spacing: 0.01em; text-transform: none;
  color: var(--wr-black); opacity: 0.42; padding: 2px 0; line-height: 1.3;
  -webkit-text-fill-color: currentColor; background: none;
  transition: opacity 0.18s;
}
@media (hover: hover) and (pointer: fine) { .wr-fsnav .wr-fssub a:hover { opacity: 0.85; } }
.wr-fssub a::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .wr-mega, .wr-mega__item, .wr-nav-chevron, .wr-mega__edge, .wr-drop-scrim { transition: none !important; animation: none !important; }
}


/* ============================================================================
   WELL RUN · SIGNAL SYSTEM — SIGNAL BOOT (TRANSIT)  ·  Built on Signal Core
   Page-to-page transitions (Wipe · Bars · Camera). The cover runs on the page
   being left; the matching reveal runs on the page arriving. Signal Boot (Transit)
   in signal-vt.js drives it — and, critically, stamps the arriving cover from a
   parser-blocking <head> script so it is present at the page's first paint (no
   flash of the new page before it is covered). html.wr-covering is the instant,
   synchronous backstop; .wr-fx / .wr-cam are the branded overlay. Brand palette
   only; the yellow→orange gradient is never reversed.
   ---------------------------------------------------------------------------- */
/* Instant, synchronous first-paint backstop while the arriving reveal mounts. */
html.wr-covering::before {
  content: ""; position: fixed; inset: 0; z-index: 99990; pointer-events: none;
  background: radial-gradient(95% 85% at 50% 32%, #150E08, #0A0705 78%);
}
/* ---- transition layer ---- */
.wr-fx { position: fixed; inset: 0; z-index: 99999; pointer-events: none; overflow: hidden; }
.wr-fx__panel { position: absolute; background: var(--wr-grad); will-change: transform; }
.wr-fx__flash { position: absolute; inset: 0; background: #fff; opacity: 0; }

/* camera-focus transition — viewfinder dims the page (brand dark), HUD locks focus, shutter snaps */
.wr-cam { position: absolute; inset: 0; background: radial-gradient(120% 92% at 50% 46%, rgba(13,10,7,0.5), rgba(10,7,5,0.82)); }
.wr-cam__grid {
  position: absolute; inset: 0; opacity: .45;
  background:
    linear-gradient(90deg, transparent calc(33.33% - 1px), rgba(255,255,255,.16) 33.33%, transparent calc(33.33% + 1px)),
    linear-gradient(90deg, transparent calc(66.66% - 1px), rgba(255,255,255,.16) 66.66%, transparent calc(66.66% + 1px)),
    linear-gradient(0deg, transparent calc(33.33% - 1px), rgba(255,255,255,.16) 33.33%, transparent calc(33.33% + 1px)),
    linear-gradient(0deg, transparent calc(66.66% - 1px), rgba(255,255,255,.16) 66.66%, transparent calc(66.66% + 1px));
}
.wr-cam__frame { position: absolute; inset: 5vmin; }
.wr-cam__frame i { position: absolute; width: 34px; height: 34px; border: 2px solid rgba(255,255,255,.7); }
.wr-cam__frame i:nth-child(1){ left:0; top:0; border-right:0; border-bottom:0; }
.wr-cam__frame i:nth-child(2){ right:0; top:0; border-left:0; border-bottom:0; }
.wr-cam__frame i:nth-child(3){ left:0; bottom:0; border-right:0; border-top:0; }
.wr-cam__frame i:nth-child(4){ right:0; bottom:0; border-left:0; border-top:0; }
.wr-cam__box { position: absolute; left:50%; top:50%; width:26vmin; height:26vmin; transform: translate(-50%,-50%); }
.wr-cam__box i { position: absolute; width:24px; height:24px; border:2px solid rgba(255,255,255,.95); transition: border-color .15s ease; }
.wr-cam__box i:nth-child(1){ left:0; top:0; border-right:0; border-bottom:0; }
.wr-cam__box i:nth-child(2){ right:0; top:0; border-left:0; border-bottom:0; }
.wr-cam__box i:nth-child(3){ left:0; bottom:0; border-right:0; border-top:0; }
.wr-cam__box i:nth-child(4){ right:0; bottom:0; border-left:0; border-top:0; }
.wr-cam__box.is-lock i { border-color: var(--wr-yellow); }
.wr-cam__rec, .wr-cam__meta, .wr-cam__af { position: absolute; font-family: var(--drop-mono, ui-monospace, Menlo, monospace); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #fff; }
.wr-cam__rec { left: 6.4vmin; top: 6.4vmin; }
.wr-cam__meta { right: 6.4vmin; bottom: 6.4vmin; color: rgba(255,255,255,.75); }
.wr-cam__af { left: 50%; top: calc(50% + 16vmin); transform: translateX(-50%); color: rgba(255,255,255,.85); }
.wr-cam__af.is-lock { color: var(--wr-yellow); }

@media (prefers-reduced-motion: reduce) {
  .wr-fx, html.wr-covering::before { display: none !important; }
}