/* ============================================================
   ScoreMore — Professional Design System
   ============================================================
   Table of contents
   1.  Design tokens
   2.  Base reset & global
   3.  Layout utilities
   4.  Typography
   5.  Announcement bar
   6.  Site header
   7.  Logo / branding
   8.  Primary nav & dropdowns
   9.  Header actions & CTA
   10. Hamburger toggle
   11. Mobile overlay
   12. Mobile drawer
   13. Site footer
   14. Footer newsletter strip
   15. Footer grid columns
   16. Footer bottom bar
   17. Block editor helpers
   18. Scroll animations
   19. Accessibility utilities
   20. Responsive — 1200 / 1024 / 768 / 480 / 360
   ============================================================ */

/* ── 1. Design Tokens ───────────────────────────────────────── */
:root {
  /* Brand */
  --c-primary:        #0A2540;
  --c-primary-mid:    #113252;
  --c-primary-light:  #1A4270;
  --c-accent:         #F04E2A;
  --c-accent-hover:   #D93F1E;
  --c-accent-glow:    rgba(240, 78, 42, .28);
  --c-accent-soft:    rgba(240, 78, 42, .08);

  /* Neutrals */
  --c-dark:           #0B0F1A;
  --c-body:           #1E2939;
  --c-muted:          #4B5A6E;
  --c-subtle:         #8494A8;
  --c-border:         #E2E8F0;
  --c-border-dark:    rgba(255,255,255,.1);
  --c-surface:        #F8FAFC;
  --c-white:          #FFFFFF;

  /* Glass surface */
  --glass-bg:         rgba(255,255,255,.72);
  --glass-border:     rgba(255,255,255,.5);
  --glass-shadow:     0 8px 32px rgba(10,37,64,.12);

  /* Typography */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Fluid type — each value is min / preferred / max */
  --fs-2xs: clamp(.65rem,  .6rem  + .25vw, .7rem);
  --fs-xs:  clamp(.72rem,  .68rem + .3vw,  .8rem);
  --fs-sm:  clamp(.82rem,  .78rem + .3vw,  .9rem);
  --fs-md:  clamp(.95rem,  .9rem  + .3vw,  1rem);
  --fs-lg:  clamp(1rem,    .96rem + .4vw,  1.125rem);
  --fs-xl:  clamp(1.1rem,  1rem   + .55vw, 1.25rem);
  --fs-2xl: clamp(1.25rem, 1.1rem + .8vw,  1.5rem);
  --fs-3xl: clamp(1.5rem,  1.2rem + 1.2vw, 2rem);
  --fs-4xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --fs-5xl: clamp(2.2rem,  1.5rem + 2.8vw, 3.5rem);
  --fs-6xl: clamp(2.8rem,  1.8rem + 4vw,   5rem);

  /* Spacing (4-pt grid) */
  --sp-1:   .25rem;
  --sp-2:   .5rem;
  --sp-3:   .75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-7:   1.75rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-14:  3.5rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;
  --sp-32:  8rem;

  /* Layout */
  --w-content:  780px;
  --w-wide:     1200px;
  --w-full:     1440px;
  --w-pad:      clamp(1rem, 5vw, 2.5rem);

  /* Radii */
  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 9999px;

  /* Shadows — layered for depth */
  --sh-xs:  0 1px 2px rgba(10,37,64,.06);
  --sh-sm:  0 2px 8px rgba(10,37,64,.08), 0 1px 3px rgba(10,37,64,.04);
  --sh-md:  0 4px 16px rgba(10,37,64,.1),  0 2px 6px rgba(10,37,64,.06);
  --sh-lg:  0 8px 28px rgba(10,37,64,.12), 0 3px 10px rgba(10,37,64,.08);
  --sh-xl:  0 16px 48px rgba(10,37,64,.16),0 6px 18px rgba(10,37,64,.1);
  --sh-2xl: 0 32px 72px rgba(10,37,64,.2), 0 12px 28px rgba(10,37,64,.12);

  /* Transitions */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-in:    cubic-bezier(.5, 0, .75, 0);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-spring:cubic-bezier(.34, 1.56, .64, 1);

  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-slow:  380ms;
  --dur-xslow: 550ms;

  /* Header */
  --hdr-h:      84px;
  --hdr-h-mob:  68px;
  --logo-h:     52px;
  --logo-h-sm:  44px;
  --hdr-z:      900;

  /* Announcement bar */
  --ann-h:      40px;
}

/* ── 2. Base reset & global ─────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 1rem);
  tab-size: 4;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--c-body);
  background: var(--c-white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Custom scrollbar */
::-webkit-scrollbar               { width: 6px; height: 6px; }
::-webkit-scrollbar-track         { background: transparent; }
::-webkit-scrollbar-thumb         { background: var(--c-border); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover   { background: var(--c-subtle); }

/* Selection */
::selection { background: var(--c-accent); color: var(--c-white); }

/* Media */
img, video, svg { max-width: 100%; height: auto; display: block; }
img { object-fit: cover; }

/* Links */
a {
  color: var(--c-accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--c-accent-hover); }

/* Lists */
ul, ol { list-style: none; }

/* Buttons */
button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* Inputs */
input, textarea, select {
  font: inherit;
  color: inherit;
}

/* Admin bar adjustments */
.admin-bar .site-header           { top: 32px !important; }
@media (max-width: 782px) {
  .admin-bar .site-header         { top: 46px !important; }
}

/* ── 3. Layout utilities ────────────────────────────────────── */
.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.site-main {
  flex: 1;
  padding-top: var(--hdr-h);
}

.site-main.has-ann-bar {
  padding-top: calc(var(--hdr-h) + var(--ann-h));
}

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

.container--wide   { max-width: var(--w-full); }
.container--narrow { max-width: var(--w-content); }

/* ── 4. Typography ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--c-primary);
}

h1 { font-size: var(--fs-5xl); }
h2 { font-size: var(--fs-4xl); }
h3 { font-size: var(--fs-3xl); }
h4 { font-size: var(--fs-2xl); }
h5 { font-size: var(--fs-xl); }
h6 { font-size: var(--fs-lg); }

p { line-height: 1.75; }

/* ── 5. Announcement bar ────────────────────────────────────── */
.ann-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--ann-h);
  background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-mid) 50%, var(--c-primary) 100%);
  background-size: 200% auto;
  animation: ann-shimmer 6s linear infinite;
  z-index: calc(var(--hdr-z) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}

.ann-bar__text {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: rgba(255,255,255,.9);
  letter-spacing: .03em;
  text-align: center;
}

.ann-bar__text a {
  color: var(--c-white);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ann-bar__close {
  position: absolute;
  right: var(--w-pad);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  color: rgba(255,255,255,.7);
  transition: color var(--dur-fast), background var(--dur-fast);
}

.ann-bar__close:hover {
  color: var(--c-white);
  background: rgba(255,255,255,.12);
}

@keyframes ann-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* When ann bar is visible shift header down */
.has-ann-bar .site-header { top: var(--ann-h); }

/* ── 6. Site header ─────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: var(--hdr-z);
  height: var(--hdr-h);
  transition:
    height        var(--dur-slow) var(--ease-out),
    background    var(--dur-slow) var(--ease-out),
    box-shadow    var(--dur-slow) var(--ease-out),
    border-color  var(--dur-slow) var(--ease-out),
    backdrop-filter var(--dur-slow) var(--ease-out);
  will-change: height, background;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
}

/* Scrolled state — glass morphism */
.site-header.is-scrolled {
  height: 70px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* Progress bar under header */
.site-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: var(--scroll-pct, 0%);
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-hover));
  transition: width 100ms linear;
  z-index: 2;
}

/* ── Header inner grid ──────────────────────────────────────── */
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: var(--sp-8);
  height: 100%;
  max-width: var(--w-full);
  margin-inline: auto;
  padding-inline: var(--w-pad);
}

/* ── 7. Logo / branding ─────────────────────────────────────── */
.site-branding {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}

.custom-logo-link {
  display: flex;
  align-items: center;
  transition: opacity var(--dur-fast);
}
.custom-logo-link:hover { opacity: .85; }

.custom-logo {
  height: var(--logo-h);
  width: auto;
  max-width: min(220px, 42vw);
}

.site-header.is-scrolled .custom-logo {
  height: var(--logo-h-sm);
}

.site-title {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--c-primary);
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
}

.site-title a            { color: inherit; transition: color var(--dur-fast); }
.site-title a:hover      { color: var(--c-accent); }
.site-description        { display: none; }

/* ── 8. Primary nav & dropdowns ─────────────────────────────── */
.nav-primary {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-primary .menu {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  position: relative;
}

/* Active sliding indicator */
.nav-primary .menu::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--c-accent);
  border-radius: var(--r-full);
  transition: left var(--dur-slow) var(--ease-out), width var(--dur-slow) var(--ease-out);
  pointer-events: none;
}

.nav-primary .menu-item {
  position: relative;
}

.nav-primary .menu-item > a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-muted);
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition:
    color     var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
  position: relative;
}

/* Hover + active states */
.nav-primary .menu-item > a:hover {
  color: var(--c-primary);
  background: var(--c-surface);
}

.nav-primary .menu-item.current-menu-item > a,
.nav-primary .menu-item.current-menu-ancestor > a,
.nav-primary .menu-item.current-page-ancestor > a {
  color: var(--c-accent);
  font-weight: 600;
}

/* Caret for parent items */
.nav-primary .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .6;
  transition: transform var(--dur-fast) var(--ease-out);
  margin-top: 2px;
}

.nav-primary .menu-item-has-children:hover > a::after,
.nav-primary .menu-item-has-children.is-open > a::after {
  transform: rotate(225deg) translateY(2px);
}

/* ── Dropdown panel ─────────────────────────────────────────── */
/*
 * FIX: top is set to 100% (not 100% + gap) so there is NO gap between
 * the nav item and the dropdown. The visual space is created by
 * padding-top on the sub-menu itself, keeping hover continuous.
 * An additional invisible ::after bridge on the menu-item plugs
 * any remaining gap on fast mouse movements.
 */
.nav-primary .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(.97);
  min-width: 260px;
  background: var(--c-white);
  border-radius: var(--r-xl);
  box-shadow:
    0 20px 60px rgba(10,37,64,.16),
    0 6px 20px rgba(10,37,64,.08),
    0 0 0 1px rgba(10,37,64,.05);
  padding: var(--sp-2) var(--sp-2) var(--sp-2);
  padding-top: calc(var(--sp-3) + var(--sp-2)); /* visual breathing room from nav */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity    200ms cubic-bezier(.16,1,.3,1),
    transform  200ms cubic-bezier(.16,1,.3,1),
    visibility 200ms;
  z-index: 20;
}

/* Invisible bridge: covers any remaining gap between nav item and panel */
.nav-primary .menu-item-has-children::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -10%;
  right: -10%;
  height: calc(var(--sp-3) + var(--sp-2));
  background: transparent;
  pointer-events: auto;
  z-index: 19;
  display: none;
}

.nav-primary .menu-item-has-children:hover::after,
.nav-primary .menu-item-has-children.is-open::after {
  display: block;
}

/* Notch / arrow — positioned inside the padding area */
.nav-primary .sub-menu::before {
  content: '';
  position: absolute;
  top: calc(var(--sp-3) - 4px);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--c-white);
  border-top: 1px solid rgba(10,37,64,.05);
  border-left: 1px solid rgba(10,37,64,.05);
  border-radius: 2px 0 0 0;
  z-index: 1;
}

/* Separator line below notch */
.nav-primary .sub-menu::after {
  content: '';
  position: absolute;
  top: calc(var(--sp-3) + var(--sp-2) - 1px);
  left: var(--sp-4);
  right: var(--sp-4);
  height: 1px;
  background: var(--c-border);
  border-radius: var(--r-full);
}

.nav-primary .menu-item:hover > .sub-menu,
.nav-primary .menu-item.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* ── Dropdown items ────────────────────────────────────────── */
.nav-primary .sub-menu .menu-item > a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-body);
  border-radius: var(--r-md);
  transition:
    background   150ms ease,
    color        150ms ease,
    padding-left 200ms cubic-bezier(.16,1,.3,1);
  position: relative;
}

/* Accent left bar on hover */
.nav-primary .sub-menu .menu-item > a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 2.5px;
  background: var(--c-accent);
  border-radius: var(--r-full);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 150ms ease;
}

.nav-primary .sub-menu .menu-item > a:hover {
  background: var(--c-surface);
  color: var(--c-primary);
  padding-left: calc(var(--sp-4) + var(--sp-2));
}

.nav-primary .sub-menu .menu-item > a:hover::before { transform: scaleY(1); }

.nav-primary .sub-menu .menu-item > a::after { display: none; }

/* Sub-sub-menu */
.nav-primary .sub-menu .sub-menu {
  top: 0;
  left: 100%;
  margin-left: var(--sp-2);
  transform: translateX(0) translateY(-8px) scale(.97);
  padding-top: var(--sp-2);
}

.nav-primary .sub-menu .sub-menu::before { display: none; }
.nav-primary .sub-menu .sub-menu::after  { display: none; }

.nav-primary .sub-menu .menu-item:hover > .sub-menu {
  transform: translateX(0) translateY(0) scale(1);
}

/* Divider inside dropdown */
.nav-primary .sub-menu .menu-item-divider a {
  border-top: 1px solid var(--c-border);
  margin-top: var(--sp-2);
  padding-top: var(--sp-4);
}

/* ── 9. Header actions & CTA ────────────────────────────────── */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

/* Ghost secondary link */
.header-link {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-muted);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.header-link:hover { color: var(--c-primary); background: var(--c-surface); }

/* Primary CTA */
.header-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  background: var(--c-accent);
  color: var(--c-white);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-md);
  white-space: nowrap;
  overflow: hidden;
  transition:
    background   var(--dur-fast) var(--ease-out),
    transform    var(--dur-fast) var(--ease-out),
    box-shadow   var(--dur-fast) var(--ease-out);
}

/* Shimmer sweep on hover */
.header-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.25) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.header-cta:hover {
  background: var(--c-accent-hover);
  color: var(--c-white);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--c-accent-glow);
}

.header-cta:hover::before { transform: translateX(100%); }

.header-cta:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Arrow icon inside CTA */
.header-cta .cta-arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.header-cta:hover .cta-arrow { transform: translateX(3px); }

/* ── 10. Hamburger toggle ───────────────────────────────────── */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  gap: 5.5px;
  background: transparent;
  transition: background var(--dur-fast);
  position: relative;
  z-index: calc(var(--hdr-z) + 20);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.menu-toggle:hover { background: var(--c-surface); }

.menu-toggle span {
  display: block;
  border-radius: var(--r-full);
  background: var(--c-primary);
  transition:
    width     var(--dur-base) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    opacity   var(--dur-base) var(--ease-out),
    background var(--dur-fast);
  transform-origin: center;
}

.menu-toggle span:nth-child(1) { width: 22px; height: 2px; }
.menu-toggle span:nth-child(2) { width: 16px; height: 2px; margin-left: -6px; }
.menu-toggle span:nth-child(3) { width: 22px; height: 2px; }

.menu-toggle:hover span { background: var(--c-accent); }
.menu-toggle:hover span:nth-child(2) { width: 22px; margin-left: 0; }

/* Active X morph */
.menu-toggle.is-active span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
  width: 22px;
}
.menu-toggle.is-active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.menu-toggle.is-active span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
  width: 22px;
}

/* ── 11. Mobile overlay ─────────────────────────────────────── */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,37,64,.55);
  backdrop-filter: blur(6px) brightness(.9);
  -webkit-backdrop-filter: blur(6px) brightness(.9);
  z-index: calc(var(--hdr-z) + 10);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity    var(--dur-slow) var(--ease-out),
    visibility var(--dur-slow) var(--ease-out);
  cursor: pointer;
}

.mobile-menu-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ── 12. Mobile drawer ──────────────────────────────────────── */
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: min(400px, 88vw);
  height: 100dvh;
  height: 100svh;
  background: var(--c-white);
  z-index: calc(var(--hdr-z) + 20);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform   var(--dur-xslow) var(--ease-out),
    visibility  var(--dur-xslow) var(--ease-out);
  box-shadow: var(--sh-2xl);
}

.mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

/* Drawer header bar */
.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}

.mobile-nav__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
}

.mobile-nav__logo img,
.mobile-nav__logo .custom-logo {
  height: var(--logo-h-sm);
  width: auto;
  max-width: 180px;
}

.mobile-nav__site-name {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--c-primary);
  letter-spacing: -0.03em;
}

.mobile-nav__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: var(--c-surface);
  color: var(--c-muted);
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
  flex-shrink: 0;
}

.mobile-nav__close:hover {
  background: var(--c-border);
  color: var(--c-primary);
  transform: rotate(90deg);
}

.mobile-nav__close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Scrollable menu area */
.mobile-nav__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-4) var(--sp-6);
  -webkit-overflow-scrolling: touch;
}

/* Mobile menu items */
.mobile-nav .menu {
  display: flex;
  flex-direction: column;
}

.mobile-nav .menu-item {
  border-bottom: 1px solid var(--c-border);
}

.mobile-nav .menu-item:last-child { border-bottom: none; }

.mobile-nav .menu-item > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) 0;
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--c-primary);
  transition: color var(--dur-fast);
  gap: var(--sp-3);
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav .menu-item > a:hover { color: var(--c-accent); }

.mobile-nav .menu-item.current-menu-item > a { color: var(--c-accent); font-weight: 600; }

/* Caret for parent - rotates */
.mobile-nav .menu-item-has-children > a .mob-caret {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--c-surface);
  flex-shrink: 0;
  transition: background var(--dur-fast), transform var(--dur-base) var(--ease-out);
}

.mobile-nav .menu-item-has-children > a .mob-caret svg {
  width: 14px;
  height: 14px;
  stroke: var(--c-muted);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--dur-fast);
}

.mobile-nav .menu-item.is-open > a .mob-caret {
  background: var(--c-accent-soft);
  transform: rotate(180deg);
}

.mobile-nav .menu-item.is-open > a .mob-caret svg { stroke: var(--c-accent); }

/* Mobile submenu accordion */
.mobile-nav .sub-menu {
  display: none;
  flex-direction: column;
  padding: var(--sp-2) 0 var(--sp-3) var(--sp-5);
  gap: var(--sp-1);
  position: static !important;
  background: none;
  box-shadow: none;
  border: none;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.mobile-nav .menu-item.is-open > .sub-menu { display: flex; }

.mobile-nav .sub-menu::before { display: none; }

.mobile-nav .sub-menu .menu-item {
  border: none;
}

.mobile-nav .sub-menu .menu-item > a {
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--c-muted);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  border-bottom: none;
  justify-content: flex-start;
}

.mobile-nav .sub-menu .menu-item > a:hover {
  background: var(--c-surface);
  color: var(--c-primary);
}

/* Drawer footer */
.mobile-nav__footer {
  padding: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex-shrink: 0;
  background: var(--c-surface);
}

.mobile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-accent);
  color: var(--c-white);
  font-size: var(--fs-md);
  font-weight: 600;
  border-radius: var(--r-md);
  letter-spacing: .01em;
  transition: background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-cta:hover {
  background: var(--c-accent-hover);
  color: var(--c-white);
  box-shadow: 0 4px 16px var(--c-accent-glow);
}

.mobile-cta:active { transform: scale(.98); }

.mobile-secondary-links {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
}

.mobile-secondary-links a {
  font-size: var(--fs-xs);
  color: var(--c-subtle);
  transition: color var(--dur-fast);
}
.mobile-secondary-links a:hover { color: var(--c-primary); }

/* ── 13. Site footer ─────────────────────────────────────────── */
.site-footer {
  background: var(--c-primary);
  color: rgba(255,255,255,.72);
  position: relative;
  overflow: hidden;
  margin-top: auto;
}

/* Decorative blobs */
.site-footer::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(240,78,42,.15) 0%, transparent 65%);
  pointer-events: none;
}

.site-footer::after {
  content: '';
  position: absolute;
  bottom: 40px;
  left: -80px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(26,66,112,.35) 0%, transparent 65%);
  pointer-events: none;
}

/* ── 14. Footer newsletter strip ────────────────────────────── */
.footer-newsletter {
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  border-bottom: 1px solid var(--c-border-dark);
  padding: var(--sp-12) 0;
}

.footer-newsletter-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
}

.footer-newsletter-copy {
  flex: 1;
  min-width: 0;
}

.footer-newsletter-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-accent);
  margin-bottom: var(--sp-3);
}

.footer-newsletter-title {
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--c-white);
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: var(--sp-2);
}

.footer-newsletter-sub {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.55);
  max-width: 380px;
}

.footer-newsletter-form {
  flex-shrink: 0;
  width: 100%;
  max-width: 420px;
}

.newsletter-input-wrap {
  display: flex;
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}

.newsletter-input-wrap:focus-within {
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
}

.newsletter-input-wrap input[type="email"] {
  flex: 1;
  background: none;
  border: none;
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-white);
  outline: none;
  min-width: 0;
}

.newsletter-input-wrap input[type="email"]::placeholder { color: rgba(255,255,255,.4); }

.newsletter-submit {
  flex-shrink: 0;
  padding: var(--sp-3) var(--sp-6);
  background: var(--c-accent);
  color: var(--c-white);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  transition: background var(--dur-fast);
  white-space: nowrap;
}
.newsletter-submit:hover { background: var(--c-accent-hover); }

.newsletter-note {
  margin-top: var(--sp-3);
  font-size: var(--fs-2xs);
  color: rgba(255,255,255,.35);
}

/* ── 15. Footer grid columns ────────────────────────────────── */
.footer-top {
  position: relative;
  z-index: 1;
  padding: var(--sp-16) 0 var(--sp-14);
  border-bottom: 1px solid var(--c-border-dark);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: var(--sp-12);
  align-items: start;
}

/* Brand column */
.footer-brand {}

.footer-logo {
  display: inline-flex;
  margin-bottom: var(--sp-5);
}

.footer-logo img {
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .9;
}

.footer-site-name {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--c-white);
  letter-spacing: -0.035em;
  margin-bottom: var(--sp-5);
}

.footer-site-name a { color: inherit; }
.footer-site-name a:hover { color: rgba(255,255,255,.75); }

.footer-description {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.55);
  line-height: 1.75;
  max-width: 290px;
  margin-bottom: var(--sp-7);
}

/* Social row */
.footer-social {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.65);
  transition:
    background  var(--dur-fast),
    border-color var(--dur-fast),
    color        var(--dur-fast),
    transform    var(--dur-fast) var(--ease-spring);
}

.social-link:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-white);
  transform: translateY(-3px);
}

.social-link svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* Footer columns — widgets & nav menus */
.footer-column {
  min-width: 0;
}

.footer-column--brand {
  grid-column: span 1;
}

.footer-sidebar-widget + .footer-sidebar-widget {
  margin-top: var(--sp-6);
}

.footer-widget-title {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: var(--sp-6);
}

/* Dynamic grid: brand + 1–4 link columns */
.footer-grid--brand-only { grid-template-columns: 1fr; }
.footer-grid--cols-1 { grid-template-columns: 2fr 1fr; }
.footer-grid--cols-2 { grid-template-columns: 2fr 1fr 1fr; }
.footer-grid--cols-3 { grid-template-columns: 2fr 1fr 1fr 1fr; }
.footer-grid--cols-4 { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }

.footer-column ul,
.footer-column .footer-menu,
.footer-column .menu,
.footer-sidebar-widget ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-column ul li a,
.footer-column .footer-menu a,
.footer-column .menu a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color var(--dur-fast), gap var(--dur-base) var(--ease-out);
}

.footer-column ul li a::before,
.footer-column .footer-menu a::before,
.footer-column .menu a::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 1.5px;
  background: var(--c-accent);
  border-radius: var(--r-full);
  flex-shrink: 0;
  transition: width var(--dur-base) var(--ease-out);
}

.footer-column ul li a:hover,
.footer-column .footer-menu a:hover,
.footer-column .menu a:hover {
  color: var(--c-white);
  gap: var(--sp-3);
}

.footer-column ul li a:hover::before,
.footer-column .footer-menu a:hover::before,
.footer-column .menu a:hover::before {
  width: 14px;
}

/* Navigation Menu widget + text widgets in footer */
.footer-sidebar-widget {
  color: rgba(255,255,255,.55);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

.footer-sidebar-widget p {
  margin-bottom: var(--sp-3);
}

.footer-sidebar-widget a {
  color: rgba(255,255,255,.65);
}

.footer-sidebar-widget a:hover {
  color: var(--c-white);
}

.footer-sidebar-widget .widget_nav_menu .menu {
  margin-top: 0;
}

/* Contact info variant */
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.55);
  margin-bottom: var(--sp-3);
}

.footer-contact-item svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  stroke: var(--c-accent);
  fill: none;
  margin-top: 3px;
}

/* ── 16. Footer bottom bar ──────────────────────────────────── */
.footer-bottom {
  position: relative;
  z-index: 1;
  padding: var(--sp-6) 0;
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.footer-copyright {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.35);
}

.footer-copyright a {
  color: rgba(255,255,255,.55);
  transition: color var(--dur-fast);
}
.footer-copyright a:hover { color: var(--c-white); }

/* Back to top */
.footer-back-top {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.4);
  transition: color var(--dur-fast);
  border: none;
  background: none;
  cursor: pointer;
}

.footer-back-top:hover { color: rgba(255,255,255,.8); }

.footer-back-top svg {
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  border: 1px solid rgba(255,255,255,.15);
  padding: 5px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-base) var(--ease-spring);
}

.footer-back-top:hover svg {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.08);
  transform: translateY(-2px);
}

.footer-legal-links,
.footer-legal-widgets,
.footer-legal-menu {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.footer-legal-links a,
.footer-legal-menu a,
.footer-legal-widgets a {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.35);
  text-decoration: none;
  transition: color var(--dur-fast);
}

.footer-legal-links a:hover,
.footer-legal-menu a:hover,
.footer-legal-widgets a:hover {
  color: rgba(255,255,255,.75);
}

.footer-legal-menu,
.footer-legal-widgets .menu {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-bottom-widgets {
  flex: 1 1 100%;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.45);
}

.footer-bottom-widgets .footer-sidebar-widget + .footer-sidebar-widget {
  margin-top: var(--sp-3);
}

/* ── 17. Block editor helpers ───────────────────────────────── */
.entry-content {
  max-width: var(--w-content);
  margin-inline: auto;
}

.entry-content > * + * { margin-top: var(--sp-6); }

/* WP alignment override */
.wp-block.alignwide,
.alignwide {
  max-width: var(--w-full);
  margin-inline: auto;
}

.wp-block.alignfull,
.alignfull {
  max-width: 100%;
  width: 100%;
  position: relative;
  left: 0;
  transform: none;
  margin-inline: 0;
}

@media (min-width: 769px) {
  .wp-block.alignfull,
  .alignfull {
    max-width: 100vw;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Gutenberg gaps */
.entry-content .wp-block-group,
.entry-content .wp-block-columns { margin-top: 0; }

/* Responsive embeds */
.entry-content .wp-block-embed,
.entry-content .wp-video {
  max-width: 100%;
}

/* ── 18. Scroll animations ──────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-left {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }

  .reveal-left.is-visible { opacity: 1; transform: translateX(0); }

  .reveal-right {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }

  .reveal-right.is-visible { opacity: 1; transform: translateX(0); }
}

/* ── 19. Accessibility utilities ────────────────────────────── */
.skip-link {
  position: fixed;
  top: var(--sp-4);
  left: var(--sp-4);
  padding: var(--sp-3) var(--sp-6);
  background: var(--c-accent);
  color: var(--c-white);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-md);
  z-index: 9999;
  transform: translateY(calc(-100% - var(--sp-8)));
  transition: transform var(--dur-base) var(--ease-out);
  box-shadow: var(--sh-md);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--c-white);
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.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;
}

/* ── 20. Responsive breakpoints ─────────────────────────────── */

/* 1200px ───────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .footer-grid:not([class*="footer-grid--cols"]):not(.footer-grid--brand-only) {
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: var(--sp-8);
  }

  .footer-newsletter-inner { gap: var(--sp-8); }
}

/* 1024px ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --hdr-h: 76px; }

  .nav-primary .menu-item > a { padding: var(--sp-2) var(--sp-2); }

  .footer-grid[class*="footer-grid--cols"],
  .footer-grid:not(.footer-grid--brand-only) {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--sp-10);
  }

  .footer-column--brand { grid-column: 1 / -1; }
  .footer-description { max-width: 480px; }

  .footer-newsletter-inner { flex-direction: column; align-items: flex-start; }
  .footer-newsletter-form  { max-width: 100%; width: 100%; }
}

/* 768px ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --hdr-h:     var(--hdr-h-mob);
    --logo-h:    var(--logo-h-sm);
    --ann-h:     36px;
  }

  .site-main { padding-top: var(--hdr-h-mob); }

  /* Hide desktop nav, show hamburger */
  .nav-primary       { display: none; }
  .menu-toggle       { display: flex; }
  .mobile-menu-overlay { display: block; }

  /* Full-screen mobile menu (no side gap / double close button) */
  .mobile-nav {
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    box-shadow: none;
  }

  .mobile-nav__header {
    min-height: var(--hdr-h-mob);
    padding:
      max(var(--sp-4), env(safe-area-inset-top, 0px))
      var(--sp-5)
      var(--sp-4);
  }

  .mobile-nav__logo img,
  .mobile-nav__logo .custom-logo {
    height: 48px;
    max-width: min(220px, 58vw);
  }

  /* Hide sticky header while full-screen menu is open (prevents duplicate X) */
  body.mobile-nav-open .site-header .header-inner {
    visibility: hidden;
    pointer-events: none;
  }

  body.mobile-nav-open .site-header .header-accent-bar {
    opacity: 0;
  }

  .header-inner {
    column-gap: var(--sp-3);
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .site-branding {
    min-width: 0;
    overflow: hidden;
  }

  .custom-logo-link {
    max-width: 100%;
  }

  .header-actions {
    gap: var(--sp-2);
    flex-shrink: 0;
  }

  .header-cta {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-xs);
  }

  /* Gutenberg & page content — stack and contain overflow */
  .wp-page-blocks,
  .entry-content {
    padding-inline: var(--w-pad);
    max-width: 100%;
    overflow-x: clip;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
    width: 100%;
  }

  .wp-block-columns {
    flex-wrap: wrap !important;
    gap: var(--sp-6) !important;
  }

  .wp-block-column {
    min-width: 0 !important;
  }

  .wp-block-image img,
  .wp-block-media-text__media img,
  figure img {
    height: auto;
    max-width: 100%;
  }

  .wp-block-media-text {
    grid-template-columns: 1fr !important;
  }

  .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content,
  .wp-block-media-text .wp-block-media-text__content {
    grid-column: 1;
    grid-row: 2;
    padding: var(--sp-6) var(--w-pad);
  }

  .wp-block-media-text .wp-block-media-text__media {
    grid-column: 1;
    grid-row: 1;
  }

  .entry-content table,
  .wp-page-blocks table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wp-block.alignfull,
  .alignfull,
  .entry-content .ap-wrap,
  .entry-content [class*="datascan-sm-"],
  .entry-content [class*="datascan-bgp-"],
  .entry-content .datascan-bgp-wrap,
  .entry-content .datascan-feature-block,
  .entry-content .datascan-kb-block,
  .entry-content .datascan-ic-block {
    width: 100%;
    max-width: 100%;
    left: 0;
    transform: none;
    margin-inline: 0;
  }

  .wp-block.alignwide,
  .alignwide {
    max-width: 100%;
    width: 100%;
  }

  /* Footer */
  .footer-grid[class*="footer-grid--cols"],
  .footer-grid:not(.footer-grid--brand-only) {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }

  .footer-column--brand { grid-column: 1 / -1; }
  .footer-description { max-width: 100%; }

  .footer-newsletter { padding: var(--sp-10) 0; }

  .footer-bottom-inner {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-4);
  }
}

/* 640px ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .footer-grid[class*="footer-grid--cols"],
  .footer-grid:not(.footer-grid--brand-only) {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }

  .footer-column--brand { grid-column: 1 / -1; }

  .newsletter-input-wrap {
    flex-direction: column;
    border-radius: var(--r-md);
  }

  .newsletter-input-wrap input[type="email"] { width: 100%; }

  .newsletter-submit {
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    padding: var(--sp-3) var(--sp-5);
    text-align: center;
  }
}

/* 480px ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .header-cta    { display: none; }

  .footer-grid,
  .footer-grid[class*="footer-grid--cols"],
  .footer-grid--brand-only {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .footer-column--brand { grid-column: auto; }

  .footer-bottom-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-3);
  }

  .footer-legal-links {
    justify-content: center;
    gap: var(--sp-4);
  }

  .ann-bar { height: auto; min-height: var(--ann-h); padding-block: var(--sp-2); }
}

/* 360px ────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  :root { --w-pad: 1rem; }

  .mobile-nav .menu-item > a { font-size: var(--fs-md); }
}

/* ── 21. Top contact bar ────────────────────────────────────── */
:root {
  --topbar-h: 38px;
}

.top-bar {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: var(--topbar-h);
  background: var(--c-primary);
  border-bottom: 1px solid rgba(255,255,255,.07);
  z-index: calc(var(--hdr-z) + 2);
  display: flex;
  align-items: center;
}

.top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--w-full);
  margin-inline: auto;
  padding-inline: var(--w-pad);
  gap: var(--sp-4);
}

.top-bar__left,
.top-bar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.top-bar__tagline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: rgba(255,255,255,.72);
  letter-spacing: .03em;
}

.top-bar__tagline svg {
  color: var(--c-accent);
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}

.top-bar__contact {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  transition: color var(--dur-fast);
}

.top-bar__contact svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  stroke: var(--c-accent);
}

.top-bar__contact:hover { color: var(--c-white); }

.top-bar__socials {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-left: var(--sp-4);
  border-left: 1px solid rgba(255,255,255,.12);
}

.top-bar__social {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.5);
  transition: color var(--dur-fast);
}

.top-bar__social:hover { color: var(--c-accent); }

.top-bar__social svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

/* Shift header and main when top bar is visible */
.site-header.has-topbar {
  top: var(--topbar-h);
}

.site-main {
  padding-top: calc(var(--hdr-h) + var(--topbar-h));
}

/* Override: no top bar = revert to original */
.site-header:not(.has-topbar) { top: 0; }
body:not(:has(.top-bar)) .site-main { padding-top: var(--hdr-h); }

/* Admin bar offsets */
.admin-bar .top-bar { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .top-bar { top: 46px; }
}

/* ── 22. Header phone link ──────────────────────────────────── */
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-primary);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  border: 1.5px solid var(--c-border);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}

.header-phone svg {
  color: var(--c-accent);
  flex-shrink: 0;
}

.header-phone:hover {
  color: var(--c-accent);
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}

/* Hide phone text (keep icon only) on mid-range viewports */
@media (max-width: 1180px) {
  .header-phone span { display: none; }
  .header-phone { padding: var(--sp-2); border-radius: var(--r-md); }
}

/* ── 23. Header accent bottom bar ──────────────────────────── */
.header-accent-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-accent) 0%, #f07a5a 40%, var(--c-primary-light) 100%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.site-header.is-scrolled .header-accent-bar { opacity: 1; }

/* Override the ::after scroll-progress to use a higher z-index since we now
   have the accent bar — keep progress bar above it */
.site-header::after { z-index: 3; }

/* ── 24. Nav link visual refinements ───────────────────────── */
.nav-primary .menu-item > a {
  font-size: var(--fs-sm);
  font-weight: 550;
  letter-spacing: .015em;
  color: var(--c-muted);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  transition:
    color       150ms ease,
    background  150ms ease;
}

.nav-primary .menu-item > a:hover { color: var(--c-primary); background: var(--c-surface); }

/* Active pill */
.nav-primary .menu-item.current-menu-item > a,
.nav-primary .menu-item.current-menu-ancestor > a,
.nav-primary .menu-item.current-page-ancestor > a {
  color: var(--c-accent);
  font-weight: 650;
  background: var(--c-accent-soft);
}

/* Caret for parent items — keep existing ::after, suppress ::before */
.nav-primary .menu-item > a::before { display: none; }

/* Subtle dot separator between items */
.nav-primary .menu > .menu-item + .menu-item::before {
  content: '';
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--c-border);
  flex-shrink: 0;
  align-self: center;
  pointer-events: none;
  display: none; /* hidden — uncomment to show dots */
}

/* ── 25. Mobile nav contact strip ──────────────────────────── */
.mobile-nav__contact-strip {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}

.mob-contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-muted);
  text-decoration: none;
  transition: color var(--dur-fast);
}

.mob-contact-link svg { stroke: var(--c-accent); flex-shrink: 0; }
.mob-contact-link:hover { color: var(--c-primary); }

/* ── 26. Mobile nav socials row ────────────────────────────── */
.mobile-nav__socials {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
}

.mob-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-muted);
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.mob-social-link:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-white);
}

.mob-social-link svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* ── 27. Responsive: top bar hidden on mobile ──────────────── */
@media (max-width: 768px) {
  .top-bar { display: none; }

  /* Revert site-header and site-main when top bar is hidden */
  .site-header.has-topbar { top: 0; }
  .site-main { padding-top: var(--hdr-h-mob); }
}

/* ── 28. Announce bar + top bar stacking ───────────────────── */
/* When both are present, ann bar sits above top bar */
.has-ann-bar .top-bar {
  top: var(--ann-h);
}

.has-ann-bar .site-header.has-topbar {
  top: calc(var(--ann-h) + var(--topbar-h));
}

/* Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }

  .site-header::after { display: none; }
}

/* High contrast ────────────────────────────────────────────── */
@media (forced-colors: active) {
  .site-header     { border-bottom: 1px solid ButtonText; }
  .header-cta      { forced-color-adjust: none; }
  .mobile-nav      { border-left: 1px solid ButtonText; }
}

/* ── 29. Full-width block pages ─────────────────────────────────
   .wp-page-blocks is set by page.php when the page uses the
   block editor (has_blocks() is true).  Remove the 780 px
   entry-content cap so custom full-width blocks span the viewport.
──────────────────────────────────────────────────────────────── */
.wp-page-blocks {
  width: 100%;
}

/* Safety net: if any custom block ends up inside .entry-content
   (e.g. on a landing page template that still uses the class),
   let it break out to full width. */
.entry-content .ap-wrap,
.entry-content [class*="datascan-sm-"],
.entry-content [class*="datascan-bgp-"],
.entry-content .datascan-bgp-wrap,
.entry-content .datascan-feature-block,
.entry-content .datascan-kb-block,
.entry-content .datascan-ic-block {
  /* Full-bleed breakout from the narrow 780px column */
  width:     100vw;
  max-width: none;
  position:  relative;
  left:      50%;
  transform: translateX(-50%);
  margin-inline: 0;
}

/* Also override the landing-page template's entry-content */
.page-landing .entry-content {
  max-width: 100%;
  margin-inline: 0;
}
.page-landing .entry-content > * + * { margin-top: 0; }

/* ── 30. Floating Call & WhatsApp CTAs ─────────────────────── */
:root {
  --fab-z:       99990;
  --fab-wa:      #25D366;
  --fab-wa-dark: #1DA851;
}

.floating-cta {
  position: fixed;
  right: max(var(--sp-4), env(safe-area-inset-right, 0px));
  bottom: max(var(--sp-5), env(safe-area-inset-bottom, 0px));
  z-index: var(--fab-z);
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--sp-3);
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  isolation: isolate;
}

.floating-cta__btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 52px;
  min-width: 52px;
  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-4);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--c-white);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    0 10px 28px rgba(10,37,64,.22),
    0 4px 10px rgba(10,37,64,.12);
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition:
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (prefers-reduced-motion: no-preference) {
  .floating-cta__btn {
    animation: fab-enter var(--dur-slow) var(--ease-out) forwards;
  }

  .floating-cta__btn:nth-child(1) { animation-delay: 60ms; }
  .floating-cta__btn:nth-child(2) { animation-delay: 120ms; }
}

@keyframes fab-enter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.floating-cta__btn:hover {
  color: var(--c-white);
  transform: translateY(-3px);
  box-shadow:
    0 14px 36px rgba(10,37,64,.28),
    0 6px 14px rgba(10,37,64,.14);
}

.floating-cta__btn:active {
  transform: translateY(-1px) scale(.98);
}

.floating-cta__btn--call {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-light) 100%);
}

.floating-cta__btn--call:hover {
  background: linear-gradient(135deg, var(--c-primary-light) 0%, var(--c-primary) 100%);
}

.floating-cta__btn--whatsapp {
  background: linear-gradient(135deg, var(--fab-wa) 0%, var(--fab-wa-dark) 100%);
}

.floating-cta__btn--whatsapp:hover {
  background: linear-gradient(135deg, #2fe06a 0%, var(--fab-wa) 100%);
}

.floating-cta__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.18);
  flex-shrink: 0;
}

.floating-cta__icon {
  width: 20px;
  height: 20px;
}

/* Subtle pulse ring on WhatsApp (stays behind button, no negative z-index) */
.floating-cta__btn--whatsapp {
  position: relative;
  overflow: visible;
}

.floating-cta__btn--whatsapp::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 2px solid rgba(37,211,102,.5);
  opacity: 0;
  animation: fab-pulse 2.4s var(--ease-out) infinite;
  pointer-events: none;
}

@keyframes fab-pulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.05); }
}

/* Hide when mobile menu is open */
body.mobile-nav-open .floating-cta {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    visibility var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

/* Mobile & tablet — compact pills with visible labels (reliable touch targets) */
@media (max-width: 768px) {
  .floating-cta {
    right: max(var(--sp-3), env(safe-area-inset-right, 0px));
    bottom: max(var(--sp-4), env(safe-area-inset-bottom, 0px));
    gap: var(--sp-2);
  }

  .floating-cta__btn {
    min-height: 48px;
    min-width: auto;
    padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3);
    font-size: var(--fs-xs);
    box-shadow:
      0 8px 24px rgba(10,37,64,.28),
      0 3px 8px rgba(10,37,64,.16);
  }

  .floating-cta__label {
    display: inline;
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
  }

  .floating-cta__icon-wrap {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  .floating-cta__icon {
    width: 20px;
    height: 20px;
  }

  .floating-cta__btn--whatsapp::before {
    inset: -4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-cta__btn {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .floating-cta__btn--whatsapp::before {
    animation: none;
    display: none;
  }
}