/* ==========================================================================
   Synergy Systems — Design System
   Tokens derived from brand kit: navy/teal/sage, Poppins (display) + DM Sans (body)
   ========================================================================== */

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

:root {
  /* Brand color tokens */
  --navy: #0A1D2F;
  --navy-soft: #12283d;
  --teal: #1D5C5A;
  --teal-dark: #123f3d;
  --teal-light: #2c7774;
  --sage: #7FA295;
  --mist: #E6E9EC;
  --cream: #F5F3EF;
  --white: #FFFFFF;

  /* Semantic tokens */
  --bg: var(--white);
  --bg-alt: var(--cream);
  --bg-mist: var(--mist);
  --bg-dark: var(--navy);
  --text: var(--navy);
  --text-muted: #55636f;
  --text-on-dark: #eef2f1;
  --text-on-dark-muted: #a9b7bd;
  --border: #dde2e0;
  --border-on-dark: rgba(238, 242, 241, 0.14);
  --accent: var(--teal);
  --accent-strong: var(--teal-dark);
  --focus-ring: #2c7774;

  /* Typography */
  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', 'Segoe UI', sans-serif;

  --fs-eyebrow: 0.8125rem;
  --fs-small: 0.875rem;
  --fs-body: 1.0625rem;
  --fs-body-lg: 1.25rem;
  --fs-h4: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --fs-h2: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --fs-h1: clamp(2.75rem, 2rem + 3vw, 4.75rem);
  --fs-stat: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem);

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8.5rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 260ms;

  --container: 1240px;
  --container-narrow: 800px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--navy); margin: 0; line-height: var(--lh-tight); font-weight: 600; }
p { margin: 0; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
@media (max-width: 640px) {
  .container { padding-inline: var(--space-5); }
}

section { position: relative; }
section[id] { scroll-margin-top: 84px; }

.skip-link:focus {
  left: var(--space-5) !important;
  top: var(--space-4) !important;
}
.section-pad { padding-block: var(--space-9); }
@media (max-width: 780px) {
  .section-pad { padding-block: var(--space-8); }
}

.bg-alt { background: var(--bg-alt); }
.bg-mist { background: var(--bg-mist); }
.bg-dark {
  background: var(--navy);
  color: var(--text-on-dark);
}
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: var(--white); }
.bg-dark p { color: var(--text-on-dark-muted); }

/* ---- Type utilities ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}
.bg-dark .eyebrow { color: var(--sage); }
.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: currentColor;
  display: block;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
.lede {
  font-size: var(--fs-body-lg);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}
.bg-dark .lede { color: var(--text-on-dark-muted); }

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-8);
}
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: var(--space-3); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.9rem 1.7rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn-primary {
  background: var(--teal);
  color: var(--white);
  box-shadow: 0 1px 2px rgba(10, 29, 47, 0.08);
}
.btn-primary:hover { background: var(--teal-dark); transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(18, 63, 61, 0.45); }
.btn-ghost-dark {
  background: transparent;
  color: var(--navy);
  border-color: var(--border);
}
.btn-ghost-dark:hover { border-color: var(--navy); transform: translateY(-2px); }
.btn-on-dark {
  background: transparent;
  color: var(--white);
  border-color: var(--border-on-dark);
}
.btn-on-dark:hover { border-color: var(--sage); background: rgba(127, 162, 149, 0.1); transform: translateY(-2px); }
.btn-sm { padding: 0.65rem 1.15rem; font-size: 0.875rem; }

/* ==========================================================================
   Header — liquid frosted-glass floating pill nav
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding-top: var(--space-4);
  pointer-events: none;
}
.nav-glass {
  pointer-events: auto;
  width: min(1180px, calc(100% - 2.5rem));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: 0.6rem 0.7rem 0.6rem 1.4rem;
  border-radius: 999px;
  /* Opaque enough that nav-link text stays legible over any busy photo or
     video behind it — a purely see-through glass looked good over calm
     backdrops but fell apart over high-contrast imagery (issue #: nav text
     unreadable against the glass-facade banner). Still reads as glass via
     the blur/saturate + inset highlight, just a sturdier one. */
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px -12px rgba(10, 29, 47, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: background var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled .nav-glass {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 30px -14px rgba(10, 29, 47, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* Three-line lockup — SYNERGY (bold) / SYSTEMS / CONSULTANCY, stacked
   rather than run together, so the full legal name reads cleanly at any
   width instead of a long second line fighting the nav for space. The
   mark is sized to the taller text block so the pair reads as one unit. */
.brand { display: flex; align-items: center; gap: 0.65rem; }
.brand-mark { height: 36px; width: auto; flex-shrink: 0; }
/* Flex column with an explicit gap (not line-height) so the three lines
   land evenly spaced regardless of their differing font sizes — SYSTEMS
   and CONSULTANCY share identical weight/color/tracking, just two lines
   of one sub-label rather than a "lesser" third line. */
.brand-word { display: flex; flex-direction: column; gap: 0.16rem; font-family: var(--font-display); font-weight: 700; }
/* font-weight explicit, not inherited: <b>'s UA-default "bolder" resolves
   to 900 against the parent's 700 — a weight Poppins doesn't actually ship
   (only 500/600/700 are loaded), so the browser was synthesizing a fake
   bold for this line alone. Synthetic bold can shift/skew a glyph's left
   edge slightly differently per browser, which is exactly what threw the
   "S" out of line with the "S"/"C" below it. Pinning to a real weight
   fixes the alignment at its root instead of nudging pixels to compensate. */
.brand-word b { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.05em; color: var(--navy); white-space: nowrap; line-height: 1; }
.brand-word span { font-size: 0.54rem; letter-spacing: 0.16em; color: var(--teal); font-weight: 600; white-space: nowrap; line-height: 1; margin-left: 2px; }
/* Same weight/color as SYSTEMS on purpose (not a "lesser" line) — only
   sized down a touch because CONSULTANCY is 4 letters longer, and at
   matching letter-spacing that extra length reads visually heavier even
   though the font-size is technically identical. This corrects for that. */
.brand-word .brand-suffix { font-size: 0.48rem; letter-spacing: 0.12em; }

.main-nav ul { display: flex; align-items: center; gap: var(--space-6); }
.main-nav a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--navy);
  opacity: 0.72;
  transition: opacity var(--dur-base) var(--ease-out);
  position: relative;
}
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: -6px;
  height: 1px;
  background: currentColor;
  transition: right var(--dur-base) var(--ease-out);
}
.main-nav a:hover { opacity: 1; }
.main-nav a:hover::after { right: 0; }
.main-nav a.is-active { opacity: 1; }

.header-actions { display: flex; align-items: center; gap: var(--space-4); }
.header-actions .btn-primary {
  border-radius: 999px;
  padding: 0.7rem 1.3rem;
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 32px; height: 32px;
  padding: 0;
  position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: '';
  position: absolute;
  left: 6px; right: 6px;
  height: 2px;
  background: var(--navy);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast);
}
.nav-toggle span { top: 15px; }
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after { top: 8px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(8px) rotate(45deg); background: var(--navy) !important; }
.nav-open .nav-toggle span::after { transform: translateY(-8px) rotate(-45deg); background: var(--navy) !important; }

@media (max-width: 940px) {
  .main-nav {
    position: fixed; inset: 5.5rem var(--space-5) auto; z-index: 99;
    /* Solid, not glass, here on purpose — this panel sits directly over
       hero copy and photos, and translucent white let that content bleed
       through enough to make the links hard to read (issue #: mobile menu
       "cannot read the contents inside"). Legibility wins over the glass
       motif for this one surface. */
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: 0 20px 50px -20px rgba(10, 29, 47, 0.35);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .main-nav ul { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .main-nav a { font-size: 1.15rem; opacity: 1; color: var(--navy); }
  .nav-open .main-nav { opacity: 1; transform: none; pointer-events: auto; }
  .nav-toggle { display: block; }
}
@media (max-width: 480px) {
  .nav-glass { padding-inline: 0.85rem; gap: 0.4rem; }
  .brand { gap: 0.4rem; }
  .header-actions { gap: 0.4rem; }
  .header-actions .btn-primary { padding-inline: 0.7rem; font-size: 0.7rem; }
  /* "Book a Consultation" is the nav's other big space-taker at this width —
     it shortens to "Book" (the button still goes to the same place) so the
     three-line logo lockup next to it isn't fighting for the last few px. */
  .btn-label-long { display: none; }
  .brand-mark { height: 26px; }
  .brand-word { gap: 0.1rem; }
  .brand-word b { font-size: 0.76rem; letter-spacing: 0.02em; }
  .brand-word span { font-size: 0.42rem; letter-spacing: 0.06em; margin-left: 1px; }
  .brand-word .brand-suffix { font-size: 0.37rem; letter-spacing: 0.04em; }
}

/* ==========================================================================
   Scenes — the 4 seamless full-height "pages" of the homepage
   ========================================================================== */
.scene {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(6rem, 5rem + 4vw, 8rem);
  position: relative;
}

/* ==========================================================================
   Hero (scene 1) — full-bleed video background, text on a liquid-glass panel
   so legibility never depends on what's playing behind it.
   ========================================================================== */
.hero {
  color: var(--white);
  overflow: hidden;
  text-align: center;
  align-items: center;
  padding-block: clamp(5.5rem, 4.5rem + 3vw, 7rem);
}
.hero-media { position: absolute; inset: 0; z-index: 0; background: var(--cream); }
/* Two stacked copies of the same clip, offset by half its duration and
   cross-faded in main.js — whichever copy is hidden is always mid-clip
   (never at its own seam), so the loop point is never visible. */
.hero-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s ease;
  /* Light blur takes the edge off fine detail (papers, keyboard, watch)
     competing with the headline — same technique used for the real photos
     on other pages, kept subtle so the footage still reads clearly. */
  filter: blur(2px);
}
.hero-media video.is-front { opacity: 1; }
.hero-media::after {
  /* Stronger, text-shaped darkening instead of a boxed card — carries the
     footage's own warmth at the edges while keeping the copy legible.
     Bumped up for the current clip, which runs brighter (white shirt,
     bright desk) than the darker footage this was originally tuned for. */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 68% 62% at 50% 40%, rgba(10, 29, 47, 0.8), rgba(10, 29, 47, 0.5) 55%, rgba(10, 29, 47, 0.15) 80%),
    linear-gradient(180deg, rgba(10, 29, 47, 0.45) 0%, rgba(10, 29, 47, 0.25) 30%, rgba(10, 29, 47, 0.55) 100%);
}
.hero .container { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }

.hero-glass {
  max-width: 900px;
  width: 100%;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1rem, 0.5rem + 2vw, 2rem);
}
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero-copy .eyebrow { margin-bottom: var(--space-4); justify-content: center; color: var(--sage); }
.hero-copy h1 { margin-bottom: var(--space-4); color: var(--white); font-size: clamp(2.1rem, 1.5rem + 2.5vw, 3.6rem); text-shadow: 0 2px 24px rgba(10, 29, 47, 0.45); }
.hero-copy h1 em { font-style: normal; color: var(--sage); }
.hero-copy .lede { max-width: 62ch; margin-bottom: var(--space-6); color: var(--text-on-dark-muted); text-shadow: 0 1px 16px rgba(10, 29, 47, 0.4); }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: var(--space-5); flex-wrap: wrap; }

.hero-trust {
  margin-top: var(--space-6);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-5) var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-on-dark);
  width: 100%;
}
.hero-trust-item { display: flex; flex-direction: column; gap: 0.15rem; align-items: center; }
.hero-trust-item strong { font-family: var(--font-display); font-size: 1.5rem; color: var(--white); }
.hero-trust-item span { font-size: var(--fs-small); color: var(--text-on-dark-muted); }

.scroll-cue {
  position: absolute; bottom: var(--space-6); left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: var(--navy);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.75rem 1rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.scroll-cue svg { width: 14px; height: 20px; }
.scroll-cue .scroll-line { width: 1px; height: 28px; background: linear-gradient(var(--teal), transparent); animation: scrollcue 1.8s ease-in-out infinite; }
@keyframes scrollcue { 0% { transform: scaleY(0); transform-origin: top; opacity: 0; } 40% { transform: scaleY(1); transform-origin: top; opacity: 1; } 60% { transform: scaleY(1); transform-origin: bottom; opacity: 1; } 100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; } }

@media (max-width: 640px) {
  .hero-trust { gap: var(--space-5); }
}

/* ==========================================================================
   Signature divider (ribbon motif)
   ========================================================================== */
.ribbon-divider { height: 64px; display: flex; align-items: center; justify-content: center; }
.ribbon-divider svg { width: 220px; height: 24px; }

/* ==========================================================================
   Logo strip
   ========================================================================== */
.logo-strip { padding-block: var(--space-7); border-bottom: 1px solid var(--border); }
.logo-strip-inner { display: flex; align-items: center; gap: var(--space-8); justify-content: space-between; flex-wrap: wrap; }
.logo-strip-label { font-size: var(--fs-small); color: var(--text-muted); white-space: nowrap; }
.logo-strip-marks { display: flex; gap: var(--space-8); flex-wrap: wrap; align-items: center; opacity: 0.75; }
.logo-strip-marks span { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--text-muted); letter-spacing: 0.02em; }

/* ==========================================================================
   Services
   ========================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.service-card {
  background: var(--white);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.service-card:hover, .service-card:focus-visible { background: var(--cream); }
.service-icon { width: 30px; height: 30px; color: var(--teal); }
.service-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; }
.service-card h3 { font-size: 1.1rem; }
.service-card p { color: var(--text-muted); font-size: 0.95rem; }
.service-card .service-link {
  margin-top: auto; font-size: var(--fs-small); font-weight: 600; color: var(--teal);
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; border: none; padding: 0; font-family: var(--font-body); cursor: pointer;
}
.service-card .service-link svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-out); }
.service-card:hover .service-link svg { transform: translateX(3px); }

@media (max-width: 940px) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .services-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Results / Case studies
   ========================================================================== */
.results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.result-card {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
  overflow: hidden;
}
.result-card::after {
  content: '';
  position: absolute;
  right: -30px; bottom: -30px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 162, 149, 0.22), transparent 70%);
}
.result-metric { font-family: var(--font-display); font-size: var(--fs-stat); font-weight: 700; color: var(--sage); }
.result-card h3 { color: var(--white); font-size: 1.15rem; }
.result-card p { color: var(--text-on-dark-muted); font-size: 0.95rem; }
.result-tag { font-size: var(--fs-small); color: var(--text-on-dark-muted); border-top: 1px solid var(--border-on-dark); padding-top: var(--space-4); margin-top: auto; }

/* Photo-backdrop variant: Results scene sits on a full-bleed abstract still,
   so cards switch to frosted glass rather than a solid navy fill. */
.scene-photo { position: relative; overflow: hidden; color: var(--white); }
.scene-photo-bg { position: absolute; inset: 0; z-index: 0; }
.scene-photo-bg img { width: 100%; height: 100%; object-fit: cover; }
.scene-photo-bg::after {
  content: '';
  position: absolute; inset: 0;
  /* Light, mostly-neutral veil — the photo should stay visible. Darkening
     is concentrated behind the headline (radial) and behind the cards at
     the bottom (linear), not smeared uniformly across the whole image. */
  background:
    radial-gradient(ellipse 70% 42% at 50% 16%, rgba(4, 9, 13, 0.55), transparent 72%),
    linear-gradient(180deg, rgba(4, 9, 13, 0.08) 0%, rgba(4, 9, 13, 0.14) 42%, rgba(4, 9, 13, 0.58) 78%, rgba(4, 9, 13, 0.76) 100%);
}
.scene-photo .container { position: relative; z-index: 1; }
.result-card.glass {
  background: rgba(238, 242, 241, 0.08);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(238, 242, 241, 0.18);
}

/* Achievements scene: stat cards + sector chips on the photo backdrop */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-9);
}
.stat-card {
  background: rgba(4, 9, 13, 0.6);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}
.stat-card strong { display: block; font-family: var(--font-display); font-size: var(--fs-stat); font-weight: 700; color: var(--sage); }
.stat-card span { font-size: 0.9rem; font-weight: 600; color: var(--white); }
.stat-card p { margin-top: var(--space-3); font-size: 0.85rem; color: var(--text-on-dark-muted); }

.sectors-head { text-align: center; margin-bottom: var(--space-5); }
.sectors-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.sector-chip {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.65rem 1.15rem;
  border-radius: 999px;
  background: rgba(4, 9, 13, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 500;
}
.sector-chip svg { width: 16px; height: 16px; color: var(--sage); flex-shrink: 0; }

@media (max-width: 940px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sector-chip { font-size: 0.8rem; padding: 0.55rem 0.9rem; } }

@media (max-width: 940px) { .results-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; }
.pricing-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--white);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(10, 29, 47, 0.18); }
.pricing-card.is-featured { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pricing-card.is-featured h3, .pricing-card.is-featured .pricing-amount { color: var(--white); }
.pricing-card.is-featured p { color: var(--text-on-dark-muted); }
.pricing-card.is-featured .pricing-feature { color: var(--text-on-dark); }
.pricing-tag { font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.pricing-card.is-featured .pricing-tag { color: var(--sage); }
.pricing-amount { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; }
.pricing-amount span { font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; color: var(--text-muted); }
.pricing-card.is-featured .pricing-amount span { color: var(--text-on-dark-muted); }
.pricing-features { display: flex; flex-direction: column; gap: var(--space-3); }
.pricing-feature { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.925rem; color: var(--text-muted); }
.pricing-feature svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--teal); }
.pricing-card.is-featured .pricing-feature svg { color: var(--sage); }
.pricing-card .btn { margin-top: auto; width: 100%; }

@media (max-width: 940px) { .pricing-grid { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list { max-width: var(--container-narrow); margin-inline: auto; display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--navy);
}
.faq-question .icon { width: 20px; height: 20px; flex-shrink: 0; position: relative; }
.faq-question .icon::before, .faq-question .icon::after {
  content: ''; position: absolute; background: var(--teal); border-radius: 1px;
  transition: transform var(--dur-base) var(--ease-out);
}
.faq-question .icon::before { left: 2px; right: 2px; top: 9px; height: 2px; }
.faq-question .icon::after { top: 2px; bottom: 2px; left: 9px; width: 2px; }
.faq-item.is-open .faq-question .icon::after { transform: rotate(90deg); }
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }
.faq-answer p { padding-bottom: var(--space-5); color: var(--text-muted); max-width: 62ch; }

/* ==========================================================================
   Blog teaser / Blog index
   ========================================================================== */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.blog-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--white);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(10, 29, 47, 0.2); }
.blog-card-media { aspect-ratio: 16 / 10; background: linear-gradient(140deg, var(--mist), var(--cream)); position: relative; overflow: hidden; }
.blog-card-media svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base) var(--ease-out); }
.blog-card:hover .blog-card-media img { transform: scale(1.04); }
.blog-card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.blog-tag { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.blog-card h3 { font-size: 1.05rem; }
.blog-card p { font-size: 0.9rem; color: var(--text-muted); }
.blog-meta { font-size: var(--fs-small); color: var(--text-muted); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border); }

@media (max-width: 940px) { .blog-grid { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; } }

/* ==========================================================================
   Tools (calculators)
   ========================================================================== */
.tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; }
.tool-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.tool-card-head { display: flex; align-items: flex-start; gap: var(--space-4); }
.tool-icon { width: 34px; height: 34px; color: var(--teal); flex-shrink: 0; }
.tool-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; }
.tool-card h3 { font-size: 1.1rem; }
.tool-card .tool-desc { font-size: 0.9rem; color: var(--text-muted); margin-top: 0.35rem; }

.tool-toggle { display: flex; border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem; gap: 0.2rem; }
.tool-toggle button {
  flex: 1; background: none; border: none; border-radius: 999px;
  padding: 0.45rem 0.75rem; font-size: 0.8rem; font-weight: 600; color: var(--text-muted);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.tool-toggle button.is-active { background: var(--navy); color: var(--white); }

.ct-panel { display: flex; flex-direction: column; gap: var(--space-5); flex: 1; }
.ct-panel[hidden] { display: none; }

.tool-form { display: flex; flex-direction: column; gap: var(--space-4); }
.tool-form .field label { color: var(--navy); }
.tool-form .field input {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  color: var(--navy);
  transition: border-color var(--dur-base) var(--ease-out);
}
.tool-form .field input:focus { border-color: var(--teal); outline: none; }
.tool-form .field-hint { font-size: 0.75rem; color: var(--text-muted); }

.tool-result { background: var(--cream); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.tool-result-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-size: 0.9rem; color: var(--text-muted); }
.tool-result-row strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--navy); }
.tool-result-row.is-total { padding-top: var(--space-3); border-top: 1px dashed var(--border); }
.tool-result-row.is-total strong { font-size: 1.3rem; color: var(--teal); }
.tool-note { font-size: 0.78rem; color: var(--text-muted); }

.tools-disclaimer {
  margin-top: var(--space-7);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-mist);
  font-size: 0.85rem;
  color: var(--text-muted);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.tools-disclaimer svg { width: 18px; height: 18px; color: var(--teal); flex-shrink: 0; margin-top: 2px; }

@media (max-width: 780px) { .tools-grid { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; } }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-9); }
.contact-info { display: flex; flex-direction: column; gap: var(--space-6); }
.contact-detail { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact-detail svg { width: 20px; height: 20px; color: var(--sage); flex-shrink: 0; margin-top: 3px; }
.contact-detail strong { display: block; font-family: var(--font-display); font-size: 0.95rem; color: var(--white); margin-bottom: 0.2rem; }
.contact-detail span { font-size: 0.9rem; color: var(--text-on-dark-muted); }

.whatsapp-cta {
  display: flex; align-items: center; gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: none;
  border-radius: var(--radius-lg);
  background: #25D366;
  color: #fff;
  text-align: left;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.whatsapp-cta:hover { background: #1EBE5A; transform: translateY(-2px); }
.whatsapp-cta-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex; align-items: center; justify-content: center;
}
.whatsapp-cta-icon svg { width: 22px; height: 22px; }
.whatsapp-cta-text { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; }
.whatsapp-cta-text strong { font-family: var(--font-display); font-size: 1rem; }
.whatsapp-cta-text small { font-size: 0.8rem; opacity: 0.85; }
.whatsapp-cta-arrow { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; transition: transform var(--dur-base) var(--ease-out); }
.whatsapp-cta:hover .whatsapp-cta-arrow { transform: translateX(3px); }

.contact-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--text-on-dark-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.contact-divider::before, .contact-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-on-dark); }

.contact-form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label { font-size: var(--fs-small); font-weight: 600; color: var(--text-on-dark); }
.field input, .field textarea, .field select {
  background: rgba(238, 242, 241, 0.06);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  color: var(--white);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(169, 183, 189, 0.6); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--sage); background: rgba(238, 242, 241, 0.1); outline: none; }
.field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: var(--fs-small); color: var(--text-on-dark-muted); }
.form-success { display: none; align-items: center; gap: var(--space-3); background: rgba(127, 162, 149, 0.12); border: 1px solid rgba(127, 162, 149, 0.35); color: var(--white); padding: var(--space-5); border-radius: var(--radius-md); font-size: 0.9rem; }
.form-success svg { width: 20px; height: 20px; color: var(--sage); flex-shrink: 0; }
.contact-form.is-sent form { display: none; }
.contact-form.is-sent .form-success { display: flex; }
.form-error { display: flex; align-items: flex-start; gap: var(--space-3); background: rgba(226, 130, 60, 0.12); border: 1px solid rgba(226, 130, 60, 0.35); color: var(--white); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); font-size: 0.85rem; line-height: var(--lh-snug); }
.form-error[hidden] { display: none; }
.form-error svg { width: 20px; height: 20px; color: #e2823c; flex-shrink: 0; margin-top: 0.1rem; }

@media (max-width: 940px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } .form-row { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--navy); color: var(--text-on-dark-muted); padding-top: var(--space-8); }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-7); padding-bottom: var(--space-8); border-bottom: 1px solid var(--border-on-dark); }
.footer-brand p { max-width: 32ch; margin-top: var(--space-4); font-size: 0.9rem; }
.footer-contact { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.footer-contact a { display: flex; align-items: center; gap: var(--space-3); font-size: 0.9rem; transition: color var(--dur-base) var(--ease-out); }
.footer-contact a:hover { color: var(--white); }
.footer-contact svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--sage); }
.footer-col h4 { color: var(--white); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-4); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a { font-size: 0.9rem; transition: color var(--dur-base) var(--ease-out); }
.footer-col a:hover { color: var(--white); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block: var(--space-6); font-size: var(--fs-small); flex-wrap: wrap; }
.footer-social { display: flex; gap: var(--space-4); }
.footer-social a { width: 34px; height: 34px; border: 1px solid var(--border-on-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.footer-social a:hover { border-color: var(--sage); background: rgba(127, 162, 149, 0.1); }
.footer-social svg { width: 15px; height: 15px; }

@media (max-width: 780px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: minmax(0, 1fr); } .footer-bottom { flex-direction: column; align-items: flex-start; } }

/* ==========================================================================
   Service description modal
   ========================================================================== */
body.modal-open { overflow: hidden; }
.service-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(10, 29, 47, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.service-modal-overlay[hidden] { display: none; }
.service-modal-overlay.is-open { opacity: 1; }

.service-modal {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 85vh;
  overflow-y: auto;
  /* Same liquid-glass material as the nav pill, not a one-off style —
     frosted, translucent, opaque enough that body copy stays legible
     regardless of whatever's blurred behind it. */
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  box-shadow: 0 40px 90px -24px rgba(10, 29, 47, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translateY(14px) scale(0.98);
  transition: transform var(--dur-base) var(--ease-out);
}
.service-modal:focus { outline: none; }
.service-modal-overlay.is-open .service-modal { transform: translateY(0) scale(1); }

.service-modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.service-modal-close svg { width: 15px; height: 15px; }
.service-modal-close:hover { background: var(--mist); transform: rotate(90deg); }

.service-modal-toggle { max-width: 320px; margin-bottom: var(--space-5); }
.service-modal-toggle[hidden] { display: none; }
.service-modal-icon { width: 42px; height: 42px; color: var(--teal); margin-bottom: var(--space-4); }
.service-modal-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; }
.service-modal h3 { font-size: 1.4rem; margin-bottom: var(--space-4); padding-right: var(--space-7); }
.service-modal #serviceModalBody { color: var(--text-muted); line-height: var(--lh-body); margin-bottom: var(--space-6); }

@media (max-width: 640px) {
  .service-modal { padding: var(--space-6) var(--space-5); }
}

/* ==========================================================================
   Reveal / motion helper classes (paired with main.js GSAP triggers)
   ========================================================================== */
/* Only hidden once we've confirmed JS is running (see the head-inline
   script that adds .js) — so a no-JS visit, a blocked CDN, or a script
   error never leaves content permanently invisible. */
.js .reveal { opacity: 0; }

/* ==========================================================================
   Secondary-page header banner (Pricing / FAQ / Team / Contact / Blog)
   ========================================================================== */
.page-hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  padding-top: clamp(7.5rem, 6rem + 4vw, 9rem);
  padding-bottom: var(--space-8);
}
/* Explicit overrides (not just inherited color) — h1/eyebrow/p all carry
   their own more-specific base rules that would otherwise win and render
   as dark navy-on-navy, invisible against the photo. */
.page-hero h1, .page-hero h2 { color: var(--white); margin-bottom: var(--space-4); }
.page-hero .eyebrow { color: var(--sage); }
.page-hero .lede { color: var(--text-on-dark-muted); max-width: 56ch; }
.page-hero-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  /* Light veil, not a heavy wash — darkening concentrated behind the text
     column rather than smeared uniformly across the whole photo. */
  background: linear-gradient(100deg, rgba(4, 9, 13, 0.75) 0%, rgba(4, 9, 13, 0.5) 42%, rgba(4, 9, 13, 0.22) 75%, rgba(4, 9, 13, 0.12) 100%);
}
/* Stronger veil for brighter/busier photos (e.g. a lit office with people)
   where the default veil above doesn't leave enough contrast for white
   headline text — used per-page via an extra class, not a blanket change,
   since most hero photos are dark enough already. */
.page-hero-bg.is-bright img {
  /* A light blur takes the edge off fine detail (faces, screens, papers)
     that a dark scrim alone couldn't fully quiet without hiding the photo
     entirely — the scene still reads clearly as a team in an office. */
  filter: blur(3px) saturate(92%);
  transform: scale(1.02); /* hides the blur's soft edge at the frame border */
}
.page-hero-bg.is-bright::after {
  /* Flatter and more uniform than the diagonal veil above — this photo's
     headline runs the full width, so a corner-weighted gradient still
     leaves the right half of the same text line sitting on bright detail. */
  background: rgba(4, 9, 13, 0.62);
}
.page-hero .container { position: relative; z-index: 1; }
.blog-hero { background: var(--navy); color: var(--white); padding-top: clamp(7.5rem, 6rem + 4vw, 9rem); padding-bottom: var(--space-8); }
.blog-hero .lede { max-width: 56ch; }
.blog-filter { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-7); }
.blog-filter button {
  background: none; border: 1px solid var(--border); border-radius: 999px;
  padding: 0.5rem 1.1rem; font-size: 0.85rem; font-weight: 500; color: var(--text-muted);
  transition: all var(--dur-base) var(--ease-out);
}
.blog-filter button.is-active, .blog-filter button:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* ==========================================================================
   Blog article page
   ========================================================================== */
.article-hero { max-width: 780px; }
.article-hero .article-meta { margin-bottom: var(--space-4); }
.article-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--fs-small); color: var(--text-on-dark-muted); }
.article-meta .blog-tag { color: var(--sage); }
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-9); align-items: start; }
.article-body { max-width: 68ch; }
.article-body p { margin-bottom: var(--space-5); color: var(--text); line-height: var(--lh-body); font-size: 1.05rem; }
.article-body > p:first-of-type { font-size: var(--fs-body-lg); color: var(--text-muted); }
.article-featured-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: var(--space-7); }
.article-body h2 { font-size: 1.5rem; margin-top: var(--space-8); margin-bottom: var(--space-4); }
.article-body h3 { font-size: 1.15rem; margin-top: var(--space-6); margin-bottom: var(--space-3); }
.article-body ul, .article-body ol { margin: 0 0 var(--space-5); padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--space-2); }
.article-body li { color: var(--text); line-height: var(--lh-body); }
.article-body strong { color: var(--navy); }
.article-body blockquote {
  margin: var(--space-6) 0; padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--teal); background: var(--cream);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-display); font-size: 1.1rem; color: var(--navy);
}
.article-table-wrap { overflow-x: auto; margin-bottom: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-md); }
.table-scroll { overflow-x: auto; margin-bottom: var(--space-5); -webkit-overflow-scrolling: touch; }
.article-body table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 0.95rem; margin-bottom: 0; }
.article-body th, .article-body td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.article-body th { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-mist); }
.article-body tr:last-child td { border-bottom: none; }

.article-callout {
  display: flex; gap: var(--space-4); align-items: flex-start;
  background: var(--navy); color: var(--white); border-radius: var(--radius-lg);
  padding: var(--space-6); margin: var(--space-7) 0;
}
.article-callout svg { width: 22px; height: 22px; color: var(--sage); flex-shrink: 0; margin-top: 2px; }
.article-callout h3 { color: var(--white); margin-top: 0; margin-bottom: var(--space-2); font-size: 1.05rem; }
.article-callout p { color: var(--text-on-dark-muted); margin-bottom: var(--space-4); font-size: 0.95rem; }
.article-callout .btn { margin-bottom: 0; }

.article-sources {
  margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border);
  font-size: 0.9rem; color: var(--text-muted);
}
.article-sources h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--space-3); }
.article-sources a { color: var(--teal); font-weight: 600; }
.article-sources a:hover { text-decoration: underline; }

.article-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: var(--space-6); }
.article-sidebar-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); }
.article-sidebar-card h4 { font-size: 0.95rem; margin-bottom: var(--space-3); }
.article-sidebar-card p { font-size: 0.875rem; color: var(--text-muted); margin-bottom: var(--space-4); }
.article-sidebar-card .btn { width: 100%; }
.article-toc { display: flex; flex-direction: column; gap: var(--space-2); }
.article-toc a { font-size: 0.875rem; color: var(--text-muted); padding: 0.35rem 0; border-left: 2px solid var(--border); padding-left: var(--space-3); transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.article-toc a:hover { color: var(--teal); border-color: var(--teal); }

.article-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }

@media (max-width: 940px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .article-sidebar-card { flex: 1; min-width: 240px; }
  .article-related-grid { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; }
}

/* ==========================================================================
   Cookie consent banner
   ========================================================================== */
.cookie-banner {
  position: fixed;
  left: var(--space-5); right: var(--space-5); bottom: var(--space-5);
  z-index: 900;
  max-width: 680px;
  margin-inline: auto;
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: rgba(10, 29, 47, 0.92);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--border-on-dark);
  box-shadow: 0 20px 50px -20px rgba(10, 29, 47, 0.5);
  color: var(--text-on-dark-muted);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { font-size: 0.875rem; margin: 0; flex: 1; }
.cookie-banner a { color: var(--sage); font-weight: 600; }
.cookie-actions { display: flex; gap: var(--space-3); flex-shrink: 0; }

@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; align-items: stretch; text-align: left; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); }
  .cookie-actions { justify-content: flex-end; }
}

/* ==========================================================================
   WhatsApp floating bubble (sitewide, except Contact — it has its own CTA)
   ========================================================================== */
.whatsapp-fab {
  position: fixed;
  right: var(--space-5); bottom: var(--space-5);
  z-index: 850;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px -8px rgba(10, 29, 47, 0.5);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.whatsapp-fab:hover { background: #1EBE5A; transform: translateY(-3px) scale(1.05); }
.whatsapp-fab svg { width: 28px; height: 28px; position: relative; z-index: 1; }
.whatsapp-fab::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: whatsapp-pulse 2.4s ease-out infinite;
}
@keyframes whatsapp-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab::before { animation: none; }
}
@media (max-width: 640px) {
  .whatsapp-fab { right: var(--space-4); bottom: var(--space-4); width: 52px; height: 52px; }
}
.whatsapp-fab[aria-expanded="true"] svg { transform: scale(0.9); }

/* WhatsApp pre-chat panel — service picker + problem field, opens off the FAB */
.whatsapp-panel {
  position: fixed;
  right: var(--space-5);
  bottom: calc(var(--space-5) + 56px + var(--space-3));
  z-index: 851;
  width: min(340px, calc(100vw - 2 * var(--space-5)));
  max-height: min(560px, calc(100vh - 140px));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -20px rgba(10, 29, 47, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.whatsapp-panel[hidden] { display: none; }
.whatsapp-panel.is-open { opacity: 1; transform: translateY(0) scale(1); }
.whatsapp-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.whatsapp-panel-title { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 600; color: var(--navy); }
.whatsapp-panel-title svg { width: 20px; height: 20px; color: #25D366; flex-shrink: 0; }
.whatsapp-panel-close {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: rgba(10, 29, 47, 0.06); border: none; color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.whatsapp-panel-close svg { width: 14px; height: 14px; }
.whatsapp-panel-close:hover { background: var(--mist); transform: rotate(90deg); }
.whatsapp-panel-lede { font-size: var(--fs-small); color: var(--text-muted); line-height: var(--lh-snug); }
.whatsapp-service-toggle { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.whatsapp-service-toggle button {
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font-body);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.whatsapp-service-toggle button:hover { border-color: var(--teal); }
.whatsapp-service-toggle button.is-active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.whatsapp-panel-label { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.whatsapp-panel-label span { font-weight: 400; color: var(--text-muted); }
.whatsapp-panel-textarea {
  width: 100%; resize: vertical; min-height: 4.5rem;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 0.6rem 0.75rem; font-family: var(--font-body); font-size: 0.85rem; color: var(--text);
  background: rgba(255, 255, 255, 0.7);
}
.whatsapp-panel-textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.whatsapp-panel-send {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: #25D366; border-color: #25D366; width: 100%;
}
.whatsapp-panel-send:hover { background: #1EBE5A; border-color: #1EBE5A; }
.whatsapp-panel-send svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .whatsapp-panel { right: var(--space-4); bottom: calc(var(--space-4) + 52px + var(--space-3)); }
}