/* =====================================================================
   National Project Centre — Design system (v2, 2026-09)
   ---------------------------------------------------------------------
   Visual discipline: clean, restrained, engineered. No decorative
   gradients on UI surfaces, no oversized shadows, no italic serif
   escapes, no random component-level typography. One typographic
   stack. One button system. NPC brand colors are authoritative.

   1.  Design tokens
   2.  Reset
   3.  Typography
   4.  Layout primitives
   5.  Header & navigation
   6.  Buttons
   7.  Hero (immersive)
   8.  Cards & sections
   9.  Forms
   10. Footer
   11. Utility
   12. Print
   --------------------------------------------------------------------- */

/* 1. Design tokens --------------------------------------------------- */
:root {
  /* Brand palette (NPC, authoritative)
     blue   — primary brand / nav / headings
     navy   — deep navy / dark text / footer band
     magenta — important CTAs, highlights, promo
     white / light neutral — backgrounds
  */
  --c-blue-50:  #eef3ff;
  --c-blue-100: #d7e0ff;
  --c-blue-200: #adc1ff;
  --c-blue-300: #7c9bff;
  --c-blue-400: #4a72e6;
  --c-blue-500: #2a52c4;
  --c-blue-600: #1a3a8a;   /* primary brand */
  --c-blue-700: #142d6e;
  --c-blue-800: #0d2156;   /* deep navy / headings */
  --c-blue-900: #08163a;

  --c-magenta-50:  #fff0f8;
  --c-magenta-100: #ffd6ec;
  --c-magenta-200: #ffacd6;
  --c-magenta-300: #ff7fbe;
  --c-magenta-400: #ec4ea0;
  --c-magenta-500: #c8107c; /* primary magenta CTA */
  --c-magenta-600: #a80865;
  --c-magenta-700: #85054f;

  --c-amber-500: #f59f00;   /* highlight for trust badge */

  --c-bg:        #ffffff;
  --c-bg-soft:   #f6f8fc;
  --c-bg-blue:   #eef3ff;
  --c-bg-tint:   #f7f4fb;
  --c-fg:        #0d2156;
  --c-fg-soft:   #41527a;
  --c-fg-mute:   #6c7793;
  --c-border:    #d8def0;
  --c-border-strong: #b9c2da;

  --c-success: #15803d;
  --c-warn:    #b54708;
  --c-error:   #b3261e;

  /* Type — single, restrained sans-serif stack across the site.
     No Google fonts. No external dependencies. Works under file://. */
  --ff-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --ff-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale — calibrated so display, headings, body and UI each
     have their own slot, no over-large hero, no over-bold noise. */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-base: 1.55;
  --lh-loose: 1.75;

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Radius — restrained rectangles, no oversized pills. */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;          /* reserved for true pill components (avatars, badges, dots) */

  /* Shadow — minimal. Almost no decorative depth; reserved for
     floating controls and overlays only. */
  --sh-1: 0 1px 2px rgba(13,33,86,0.06);
  --sh-2: 0 2px 8px rgba(13,33,86,0.08);
  --sh-3: 0 8px 24px rgba(13,33,86,0.10);
  --sh-focus: 0 0 0 3px rgba(26,58,138,0.18);

  /* Container */
  --container: 1200px;
  --container-narrow: 880px;

  /* Motion — consistent 0.22s for state changes. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;
}

/* 2. Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* -webkit-text-size-adjust keeps the legacy prefix (still recognised by
   every Chromium/Safari/Firefox build). The unprefixed `text-size-adjust`
   is dropped because Firefox (older than v131) reports it as an
   "Unknown property" warning in the console, which is what we are
   cleaning up here. */
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
body { overflow-x: hidden; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; margin: 0; }
ul, ol { padding-left: 1.25rem; }
a { color: var(--c-blue-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-magenta-500); }
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
/* Defence in depth: prevent any direct body descendant from pushing
   the page wider than the viewport. Decorative / interactive
   sub-elements (e.g. the wwd carousel rail) keep their own overflow
   inside their own viewport-scoped containers. */
body > * { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--c-blue-600); outline-offset: 2px; border-radius: 2px; }

/* 3. Typography ----------------------------------------------------- */
/* Single, restrained typographic system. No italic display fonts.
   No secondary font family. Everything inherits --ff-sans. */
html { font-size: 16px; }
body {
  font-family: var(--ff-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  font-weight: 400;
  color: var(--c-fg);
  background: var(--c-bg);
  /* Chromium / WebKit only. -moz-osx-font-smoothing was a macOS-only
     Firefox declaration that modern Chromium logs as an "Unknown
     property"; drop it. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 {
  font-family: var(--ff-display);
  color: var(--c-fg);
  line-height: var(--lh-tight);
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* text-wrap: balance / pretty are valid CSS Text Module Level 4
   values, but some older browsers report "Error parsing value for
   'text-wrap'" on them. Guard with @supports so unsupporting engines
   silently ignore the rule instead of warning. */
@supports (text-wrap: balance) {
  h1, h2, h3, h4, h5 { text-wrap: balance; }
}
@supports (text-wrap: pretty) {
  blockquote, p { text-wrap: pretty; }
}
h1 { font-size: clamp(1.875rem, 3vw + 0.5rem, 2.5rem); font-weight: 600; }
h2 { font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem); font-weight: 600; }
h3 { font-size: clamp(1.125rem, 1.2vw + 0.4rem, 1.375rem); font-weight: 600; }
h4 { font-size: var(--fs-18); font-weight: 600; }
h5 { font-size: var(--fs-16); font-weight: 600; }
p { color: var(--c-fg-soft); line-height: var(--lh-base); }
.lead { font-size: var(--fs-18); line-height: var(--lh-snug); color: var(--c-fg-soft); }
.text-mute { color: var(--c-fg-mute); }
.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--c-magenta-500);
}

/* 4. Layout primitives --------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }
.container-narrow { width: 100%; max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--sp-5); }
.section { padding-block: var(--sp-8); }
.section-sm { padding-block: var(--sp-6); }
.section-lg { padding-block: var(--sp-9); }
.section--soft { background: var(--c-bg-soft); }
.section--blue { background: var(--c-bg-blue); }
.section--navy { background: var(--c-blue-800); color: #fff; }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: #c9d3ee; }
.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  /* `minmax(0, 1fr)` instead of plain `1fr` so a child with a long
     non-breaking string (long URL / pre / unspaced text) cannot push
     the grid track beyond viewport width, causing horizontal
     scroll. Same trick used in the desktop rules above. */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}
.flex { display: flex; gap: var(--sp-4); align-items: center; }
.flex-col { flex-direction: column; align-items: stretch; }
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.divider { height: 1px; background: var(--c-border); border: 0; margin-block: var(--sp-6); }

/* 5. Header & nav --------------------------------------------------- */
.skip-link {
  position: absolute; top: -100px; left: var(--sp-3);
  background: var(--c-blue-600); color: #fff; padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm); font-weight: 500; z-index: 1000;
  transition: top var(--dur-2) var(--ease);
}
.skip-link:focus-visible { top: var(--sp-3); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--c-border);
}
.top-strip {
  background: var(--c-blue-800);
  color: #c9d3ee;
  font-size: var(--fs-13);
}
.top-strip a { color: #fff; text-decoration: none; }
.top-strip .container { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; padding-block: var(--sp-2); }
.top-strip .strip-item { display: inline-flex; align-items: center; gap: 6px; }
.top-strip .strip-item svg { width: 14px; height: 14px; flex: 0 0 14px; }

/* ---------------------------------------------------------------------
 * Referral promotion banner — replaces the legacy contact strip on
 * every public page. Uses the existing blue/navy + magenta accent
 * palette so it blends with the rest of the site, plus a subtle
 * pulse on the "5%" text for attention. Animations are gated by
 * prefers-reduced-motion.
 * ------------------------------------------------------------------- */
.top-strip--referral {
  background: linear-gradient(90deg, var(--c-blue-800) 0%, var(--c-blue-700) 100%);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.referral-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: 8px;
  flex-wrap: wrap;
}
.referral-banner__msg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 220px;
}
.referral-banner__icon {
  width: 18px;
  height: 18px;
  color: #ffd66b;
  flex: 0 0 18px;
}
.referral-banner__text {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--fs-13);
  line-height: 1.3;
  min-width: 0;
}
.referral-banner__text strong {
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}
.referral-banner__sub {
  color: #d8e0f5;
  font-weight: 400;
  font-size: var(--fs-12);
  overflow-wrap: anywhere;
}
.referral-banner__sub b,
.referral-banner__sub strong {
  color: #ffd66b;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* Subtle attention pulse on the 5% figure. Bounded opacity change so
 * it never becomes a flashing strobe. */
.referral-banner__pulse {
  display: inline-block;
  animation: npc-referral-pulse 2.6s ease-in-out infinite;
}
@keyframes npc-referral-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.referral-banner__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.referral-banner__cta svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}
.referral-banner__contacts {
  list-style: none; padding: 0; margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  flex: 1 1 auto;
  justify-content: flex-end;
  font-size: var(--fs-13);
  min-width: 0;
}
/* On mobile, force contacts onto their own row above the CTA so they
   cannot squeeze the message into a clipped single line. */
@media (max-width: 720px) {
  .referral-banner__contacts { justify-content: flex-start; }
}
.referral-banner__contact-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-13);
  color: #e6ecfb;
  min-width: 0;
}
.referral-banner__contact-item svg {
  width: 14px; height: 14px; color: var(--c-magenta-200); flex: 0 0 14px;
}
.referral-banner__contact-item a {
  color: #fff; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  transition: border-color var(--dur-2) ease;
  overflow-wrap: anywhere;
}
.referral-banner__contact-item a:hover,
.referral-banner__contact-item a:focus-visible {
  border-bottom-color: var(--c-magenta-200);
}

/* ---- Social media widgets in the Refer & Earn strip ----
   Sit in the empty middle area between the Refer & Earn message and the
   phone / email contacts. Use the NPC palette (magenta accent on hover)
   and the EXISTING SVG icons (Facebook, Instagram, YouTube, LinkedIn)
   that already exist on the homepage hero rail. */
.referral-banner__social {
  list-style: none; padding: 0; margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
}
.referral-banner__social li { margin: 0; display: inline-flex; }
.referral-banner__social a {
  --sz: 30px;
  width: var(--sz); height: var(--sz);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  text-decoration: none;
  transition: background var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease);
}
.referral-banner__social a:hover,
.referral-banner__social a:focus-visible {
  background: var(--c-magenta-500);
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
  transform: translateY(-2px);
}
.referral-banner__social a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
.referral-banner__social a:active { transform: translateY(0); }
.referral-banner__social svg { width: 14px; height: 14px; display: block; }

@media (max-width: 900px) {
  /* On tablet and below, let the message occupy a full row (order 1),
     drop contacts onto their own row (order 2), and push the CTA to the
     end (order 3). This keeps each strip readable even on a 360px phone. */
  .referral-banner { gap: 8px; padding-block: 8px; row-gap: 10px; }
  .referral-banner__icon { width: 16px; height: 16px; flex-basis: 16px; }
  .referral-banner__msg { order: 1; flex: 1 1 100%; min-width: 0; }
  .referral-banner__text { font-size: 12px; gap: 6px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
  .referral-banner__sub { font-size: 11px; }
  .referral-banner__contacts {
    order: 2; flex: 1 1 100%;
    justify-content: flex-start;
    gap: 6px var(--sp-3);
    font-size: 12px;
    flex-wrap: wrap;
  }
  .referral-banner__contacts li { flex: 0 1 auto; }
  .referral-banner__cta {
    order: 3;
    padding: 5px 10px; font-size: 12px;
    flex: 0 0 auto;
    margin-inline-start: auto;
  }
  .referral-banner__cta svg { width: 12px; height: 12px; flex-basis: 12px; }
  /* On tablet/mobile the social row sits on its own band so it never
     overlaps the message text or the contacts. Slightly larger hit area
     for thumb taps. */
  .referral-banner__social {
    order: 4;
    flex: 1 1 100%;
    justify-content: flex-start;
    gap: 8px;
    padding-top: 2px;
  }
  .referral-banner__social a { --sz: 32px; }
  .referral-banner__social svg { width: 15px; height: 15px; }
}
/* Narrow phones (412 / 390 / 375):
   stack each section vertically so the long email and the button never
   collide, keep phone / email on one wrap-friendly row, and pin the CTA
   on its own line flush to the start. */
@media (max-width: 520px) {
  .referral-banner { padding-block: 10px; row-gap: 10px; }
  .referral-banner__icon { display: none; }
  .referral-banner__msg { order: 1; flex: 1 1 100%; }
  .referral-banner__text { font-size: 13px; gap: 4px; }
  .referral-banner__text strong { display: block; }
  .referral-banner__sub { font-size: 12px; display: block; }
  .referral-banner__contacts {
    order: 2; flex: 1 1 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 13px;
  }
  .referral-banner__contact-item a { font-size: 13px; }
  .referral-banner__cta {
    order: 3;
    flex: 1 1 100%;
    margin-inline-start: 0;
    justify-content: center;
    padding: 8px 12px;
    font-size: 13px;
  }
  .referral-banner__social {
    order: 4;
    flex: 1 1 100%;
    justify-content: flex-start;
    gap: 10px;
    padding-top: 4px;
  }
  .referral-banner__social a { --sz: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .referral-banner__pulse { animation: none; opacity: 1; }
  .referral-banner__social a:hover,
  .referral-banner__social a:focus-visible { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .referral-banner__pulse { animation: none; opacity: 1; }
}

.header-main { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-block: var(--sp-2); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; }
.brand img {
  width: auto;
  height: 40px;
  max-height: 44px;
  display: block;
}
@media (min-width: 768px) {
  .brand img { height: 44px; }
}
/* "National Project Centre" name beside the logo. Pink to match the
   site brand without changing the design system. */
.brand-name {
  display: inline-block;
  font-weight: 700;
  font-size: var(--fs-13);
  letter-spacing: 0.01em;
  color: var(--c-magenta-600);
  white-space: nowrap;
  line-height: 1.2;
}
@media (min-width: 1280px) {
  .brand-name { font-size: var(--fs-15); }
}
.brand-mark { width: 44px; height: 44px; }

.nav-desktop { display: none; align-items: center; gap: 0; }
/* Desktop nav appears at the 1024px+ breakpoint (restored to the
   pre-audit value). */
@media (min-width: 1024px) { .nav-desktop { display: flex; } }
.nav-desktop a {
  display: inline-block; padding: 0.35rem 0.4rem;
  color: var(--c-fg); text-decoration: none; font-weight: 500; border-radius: var(--r-sm);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  font-size: var(--fs-13);
  white-space: nowrap;
}
@media (min-width: 1280px) {
  .nav-desktop { gap: var(--sp-1); }
  .nav-desktop a { padding: 0.45rem 0.7rem; font-size: var(--fs-14); }
}
.nav-desktop a:hover, .nav-desktop a.is-active { background: var(--c-blue-50); color: var(--c-blue-600); }
/* Services was previously rendered as a mega-menu trigger with a caret;
   it is now a direct link — no caret, no dropdown wrapper styling. */
.nav-desktop .has-mega { position: relative; }
.mega {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 720px;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md);
  box-shadow: var(--sh-3); padding: var(--sp-5);
  display: none;
  grid-template-columns: repeat(3, 1fr); gap: var(--sp-5);
}
.has-mega:hover .mega, .has-mega:focus-within .mega { display: grid; }
.mega h4 { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-magenta-500); margin-bottom: var(--sp-2); font-weight: 600; }
.mega ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.mega a { padding: 6px 0; font-weight: 400; color: var(--c-fg); font-size: var(--fs-14); }
.mega a:hover { color: var(--c-magenta-500); }

.header-cta { display: none; gap: var(--sp-2); align-items: center; }
@media (min-width: 1024px) { .header-cta { display: inline-flex; } }

/* ---------------------------------------------------------------------
 * Explicit high-specificity rule for the desktop "Download Recent
 * Titles" CTA inside .header-cta. Earlier work relied on the generic
 * .btn-primary { background: var(--c-magenta-500); } rule, but the
 * button was rendering off-pink at certain viewports because of a
 * later-painted inheritance / opacity chain from the sticky header.
 * Locking the colour and border here, scoped to .header-cta only,
 * keeps the navbar CTA matching the Refer & Earn strip pink exactly
 * (--c-magenta-500 = #c8107c) without affecting any other button
 * elsewhere on the site.
 * ------------------------------------------------------------------- */
.header-cta .btn.btn-primary,
.header-cta .btn.btn-primary.btn-sm {
  background-color: var(--c-magenta-500);
  border-color: var(--c-magenta-500);
  color: #fff;
}
.header-cta .btn.btn-primary:hover,
.header-cta .btn.btn-primary.btn-sm:hover,
.header-cta .btn.btn-primary:focus-visible,
.header-cta .btn.btn-primary.btn-sm:focus-visible {
  background-color: var(--c-magenta-600);
  border-color: var(--c-magenta-600);
  color: #fff;
}

/* 6. Button system --------------------------------------------------
   ---------------------------------------------------------------------
   Restrained rectangular geometry (4px radius). No pill buttons.
   Every button uses flex centering so the label is always perfectly
   centered regardless of width. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.6rem 1.1rem;
  border-radius: var(--r-sm);
  font-weight: 500;
  font-size: var(--fs-14);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  border: 1.5px solid transparent;
  text-align: center;
  width: auto;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
  transition: background var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
.btn:hover { transform: none; }
.btn:focus-visible { box-shadow: var(--sh-focus); }
.btn-primary { background: var(--c-magenta-500); color: #fff; }
.btn-primary:hover { background: var(--c-magenta-600); color: #fff; }
.btn-blue { background: var(--c-blue-600); color: #fff; }
.btn-blue:hover { background: var(--c-blue-700); color: #fff; }
.btn-outline { background: transparent; color: var(--c-blue-600); border-color: var(--c-blue-600); }
.btn-outline:hover { background: var(--c-blue-600); color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.btn-outline-light:hover { background: #fff; color: var(--c-blue-700); }
.btn-ghost { background: transparent; color: var(--c-fg); }
.btn-ghost:hover { background: var(--c-blue-50); color: var(--c-blue-600); }
.btn-lg { padding: 0.8rem 1.4rem; font-size: var(--fs-15); }
.btn-sm { padding: 0.4rem 0.8rem; font-size: var(--fs-13); }
.btn-block { width: 100%; }

/* Mobile nav drawer */
.nav-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0.5rem 0.85rem; border-radius: var(--r-sm);
  background: var(--c-magenta-500); color: #fff;
  font-weight: 500; font-size: var(--fs-14);
}
/* The desktop "Menu" button is removed; nav-toggle is only shown below
   the desktop nav breakpoint (mobile/tablet). */
@media (min-width: 1024px) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 18px; height: 18px; }
.nav-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px);
  background: #fff; box-shadow: var(--sh-3); transform: translateX(100%);
  transition: transform var(--dur-3) var(--ease); z-index: 60;
  display: flex; flex-direction: column;
}
.nav-drawer[data-open="true"] { transform: translateX(0); }
.nav-drawer header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4); border-bottom: 1px solid var(--c-border); }
.nav-drawer nav { padding: var(--sp-4); overflow-y: auto; }
.nav-drawer a { display: block; padding: var(--sp-3); color: var(--c-fg); text-decoration: none; font-weight: 500; border-radius: var(--r-sm); }
.nav-drawer a:hover { background: var(--c-blue-50); }
/* Force the .btn variants inside the nav drawer to keep their normal
   white text + filled background. .nav-drawer a above is more specific
   than .btn-primary / .btn-blue alone, so without this override the
   "Call" + "WhatsApp" buttons render with dark navy text. Mirrors the
   desktop navbar CTA treatment: NPC pink + white. */
.nav-drawer a.btn,
.nav-drawer a.btn:hover { color: #fff; background-color: var(--c-magenta-500); border-color: var(--c-magenta-500); }
.nav-drawer a.btn-blue,
.nav-drawer a.btn-blue:hover { background-color: var(--c-magenta-500); border-color: var(--c-magenta-500); }
.nav-drawer a.btn-primary:hover,
.nav-drawer a.btn-blue:hover { background-color: var(--c-magenta-600); border-color: var(--c-magenta-600); }
.nav-drawer .group { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-magenta-500); margin-top: var(--sp-4); padding-inline: var(--sp-3); font-weight: 600; }
.nav-drawer .group a { text-transform: none; letter-spacing: 0; color: var(--c-fg); font-size: var(--fs-14); padding-block: var(--sp-2); }
.nav-backdrop { position: fixed; inset: 0; background: rgba(13,33,86,0.4); opacity: 0; pointer-events: none; transition: opacity var(--dur-3) var(--ease); z-index: 55; }
.nav-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }

/* 7. Hero (immersive) -----------------------------------------------
   ---------------------------------------------------------------------
   The homepage immersive hero. NPC brand colors only (deep navy
   with a single magenta accent for the badge). No Tesla blue, no
   purple gradient brand mark, no italic display font. */
.cape-hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--c-blue-800);
  color: #fff;
  font-family: var(--ff-sans);
}
.cape-hero *, .cape-hero *::before, .cape-hero *::after { box-sizing: border-box; }

/* No Instrument Serif; the alias is a safety net for any leftover markup. */
.cape-hero .ff-instrument-serif { font-family: inherit; }

/* ---- Background layers ---- */
.cape-hero__bg-parallax {
  position: absolute; inset: 0;
  transform: scale(1.1);
  transform-origin: center;
  will-change: transform;
}
.cape-hero__bg-image {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* On narrow viewports the desktop centre-crop hides the founder (who sits
   on the LEFT of the source image). Shift the focal point left so the man
   in the red shirt is the visible subject instead of the white-board, while
   the existing desktop rule above keeps the wide-screen framing unchanged.
   The hero photo is ~1920x758 (aspect ~2.53:1). On a 412x840 portrait
   viewport cover-scale shows only ~19% of the image width. The founder's
   body sits at roughly x=370..640 (≈19–33% from left). 30% horizontal
   anchor puts that body mass in the centre of the phone frame; the white-
   board gets cropped but stays visually present on the left edge. */
@media (max-width: 767px) {
  .cape-hero__bg-image {
    background-position: 30% center;
  }
}
.cape-hero__gradient-tb {
  /* Blue mask removed — hero image renders at natural brightness.
     Element is kept in the DOM (transparent) so the layout structure
     stays intact for downstream selectors. */
  position: absolute; inset: 0;
  background: transparent;
}
.cape-hero__gradient-lr {
  /* Blue mask removed — hero image renders at natural brightness. */
  position: absolute; inset: 0;
  background: transparent;
}
.cape-hero__vignette {
  /* Blue mask removed — hero image renders at natural brightness. */
  position: absolute; inset: 0;
  background: transparent;
}
.cape-hero__grain {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none; opacity: 0.03;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23noise)'/></svg>");
}
.cape-hero__bottom-fade {
  /* Blue mask removed at the bottom — the announcement strip has its own
     solid blue background, so this fade is no longer needed and was
     creating a visible blue band across the now-brighter hero image.
     Element is kept in the DOM for layout stability. */
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  height: 0; pointer-events: none;
  background: transparent;
}

/* ---- Transparent / glass hero navbar -----------------------------
   Sits naturally over the hero image. The container is a translucent
   pill with a subtle border + backdrop blur so the navigation reads
   cleanly against any background without ever becoming an opaque
   grey/white rectangle. */
.cape-hero__navbar {
  position: absolute;
  top: clamp(0.75rem, 1.4vw, 1.1rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  display: none;
  align-items: center;
  gap: clamp(0.4rem, 0.9vw, 0.9rem);
  width: min(1240px, calc(100% - 2 * clamp(0.75rem, 1.8vw, 1.5rem)));
  padding: 0.4rem clamp(0.5rem, 0.8vw, 0.85rem);
  /* glass / translucent panel */
  background: rgba(255, 255, 255, 0.08);
  background-image: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  box-shadow:
    0 8px 24px rgba(7, 18, 50, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  color: #fff;
  height: clamp(54px, 5vw, 64px);
}
@media (min-width: 1024px) { .cape-hero__navbar { display: flex; } }
.cape-hero__navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  background: transparent;
  flex: 0 0 auto;
  padding: 0 0.5rem;
  color: #fff;
  /* Defensive: no scaling/transform on hover so the navbar layout
     stays pixel-stable while the cursor moves across the bar. */
  transition: opacity 0.2s ease;
}
.cape-hero__navbar-brand:hover,
.cape-hero__navbar-brand:focus-visible {
  opacity: 0.9;
}
.cape-hero__navbar-logo {
  display: block;
  width: clamp(26px, 2.6vw, 32px);
  height: clamp(34px, 3.6vw, 44px);
  max-height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.30));
  flex: 0 0 auto;
}
.cape-hero__navbar-name {
  font-family: Georgia, "Times New Roman", serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 19px);
  color: #ffffff;
  letter-spacing: 0.005em;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}
.cape-hero__navbar-links {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 0.7vw, 0.85rem);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}
.cape-hero__navbar-links a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: clamp(12px, 0.92vw, 13px);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 6px 4px;
  border-radius: 4px;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.cape-hero__navbar-links a:hover,
.cape-hero__navbar-links a:focus-visible {
  color: var(--c-magenta-200, #f4a8d4);
}
.cape-hero__navbar-links a[aria-current="page"] {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
}
/* CTA — Download Recent Titles. Stays dimensionally stable on
   hover: only the background / border / inner arrow nudge, never
   the size or transform of the button itself. */
.cape-hero__navbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  font-size: clamp(12px, 0.95vw, 13px);
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  /* Background + border only. No transform, no scale, no box-shadow
     pulse. Keeps the button (and therefore the navbar) perfectly
     stable while hovering. */
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  flex: 0 0 auto;
  white-space: nowrap;
  cursor: pointer;
}
.cape-hero__navbar-cta:hover,
.cape-hero__navbar-cta:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.85);
  color: #fff;
}
.cape-hero__navbar-cta:active {
  background: rgba(255, 255, 255, 0.20);
}
.cape-hero__navbar-cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.cape-hero__navbar-cta svg { width: 14px; height: 14px; flex: 0 0 14px; }

/* Brand-coloured variant for the Download Recent Titles CTA.
   Same shape, same padding, same typography, same stable hover — only
   the fill / border switch from white-tinted glass to NPC magenta so
   the button reads as the primary action instead of a quiet link. */
.cape-hero__navbar-cta--brand {
  background: var(--c-magenta-500);
  border-color: var(--c-magenta-500);
  color: #fff;
}
.cape-hero__navbar-cta--brand:hover,
.cape-hero__navbar-cta--brand:focus-visible {
  background: var(--c-magenta-600);
  border-color: var(--c-magenta-600);
  color: #fff;
}
.cape-hero__navbar-cta--brand:active {
  background: var(--c-magenta-700);
  border-color: var(--c-magenta-700);
}
/* Tablet: keep the brand name, hide a couple of links. */
@media (max-width: 1180px) {
  .cape-hero__navbar-links { gap: clamp(0.2rem, 0.55vw, 0.55rem); }
  .cape-hero__navbar-links a { padding: 6px 2px; font-size: 12px; }
  .cape-hero__navbar-name { font-size: 15px; }
}
@media (max-width: 1080px) {
  .cape-hero__navbar-links li:nth-child(n+9) { display: none; }
  .cape-hero__navbar-links { justify-content: center; padding-right: 0.4rem; }
}

/* Hide the legacy cape-hero transparent navbar and its social rail — the
   normal .site-header > .header-main is now the single visible navbar on
   the homepage. The social icons have been moved into the Refer & Earn
   strip (referral-banner__social). Defence in depth: keeps these elements
   hidden even if a future edit re-adds them to the hero markup. */
.cape-hero__navbar,
.cape-hero__social,
.cape-hero__nav-burger { display: none !important; }

/* Hide the legacy header on home in case it gets rebuilt later. Defence in depth.
   On the homepage the normal .site-header > .header-main IS the visible
   navbar — the earlier "hide header-main on home" override was reversed
   so the desktop navigation, mega menu, mobile drawer and Download Recent
   Titles CTA all work on the homepage exactly like every other page. */
body.home .site-header .nav-drawer,
body.home .site-header .nav-backdrop { display: none; }
body.home .site-header > .top-strip--referral { display: block; }

/* ---- Hero social rail (top-right, vertical) ----
   Sits clearly BELOW the glass navbar so no icon hides behind it. */
.cape-hero__social {
  position: absolute; top: clamp(5rem, 7.5vw, 7.5rem); right: clamp(0.75rem, 2vw, 1.75rem);
  z-index: 20;
  list-style: none; padding: 0; margin: 0;
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}
/* The vertical social rail pairs with the wide cape-hero__navbar. The
   1180 breakpoint matches it so the social rail cannot overlap with the
   navbar (they both occupy the right side). */
@media (min-width: 1180px) { .cape-hero__social { display: flex; } }
/* Mobile: show the social rail as a compact horizontal row at the bottom
   of the hero, sitting flush above the marquee. Hides automatically once
   the wide-screen social rail kicks in. */
@media (max-width: 1179px) {
  .cape-hero__social {
    top: auto;
    bottom: 64px;
    right: 12px;
    left: auto;
    flex-direction: row;
    gap: 8px;
  }
  .cape-hero__social a { --sz: 32px; }
}
.cape-hero__social li { margin: 0; }
.cape-hero__social a {
  --sz: 36px;
  width: var(--sz); height: var(--sz);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  text-decoration: none;
  transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cape-hero__social a:hover,
.cape-hero__social a:focus-visible {
  background: var(--c-magenta-500);
  border-color: rgba(255,255,255,0.4);
  transform: translateY(-2px);
}
.cape-hero__social a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cape-hero__social a svg { width: 16px; height: 16px; }

/* ---- Mobile burger (lightweight; replaces the giant glass bar) ---- */
.cape-hero__nav-burger {
  position: absolute; top: clamp(0.75rem, 1.5vw, 1.25rem); left: clamp(0.75rem, 2vw, 1.75rem);
  z-index: 30;
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.5rem; width: 2.5rem;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.10);
  border: 0; cursor: pointer; color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background var(--dur-2) var(--ease);
}
.cape-hero__nav-burger:hover { background: rgba(255,255,255,0.18); }
.cape-hero__nav-burger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cape-hero__nav-burger svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 1024px) { .cape-hero__nav-burger { display: none; } }

/* ---- Hero lower-middle overlay (founder + address, no icons) ----
   Lifted out of the very bottom so it sits above the marquee and in the
   lower-middle of the hero. Floating clean typography directly over the
   hero image — no rectangular container, no border, no fill. The hero's
   own gradients + text-shadow keep the lines legible against the photo. */
.cape-hero__overlay {
  position: absolute;
  left: 50%;
  bottom: clamp(120px, 13vh, 180px);
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(6px, 0.8vw, 10px);
  padding: 0 16px;
  width: min(100%, 900px);
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  color: #f0f4ff;
  background: none;
  border: 0;
  pointer-events: none;
  font-size: clamp(14px, 1.25vw, 17px);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
@media (max-width: 767px) {
  .cape-hero__overlay {
    /* On small viewports the marquee is in-flow inside the hero
       section (not pinned to the viewport bottom), so on a 800px-tall
       viewport the marquee spans roughly y=680..760. The overlay
       sits ABOVE the marquee top, with breathing room. Use a bigger
       `bottom` value so the overlay cannot clip into the marquee row,
       and reduce its width to leave horizontal gutter. */
    bottom: clamp(140px, 22vh, 180px);
    font-size: 11px;
    line-height: 1.3;
    padding: 6px 10px;
    gap: 2px;
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
  }
}
.cape-hero__overlay-line {
  margin: 0;
  display: block;
  text-align: center;
  line-height: 1.35;
  color: #fff;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.cape-hero__overlay-line span { color: #fff; font-weight: 500; }
.cape-hero__overlay-line strong { color: #fff; font-weight: 600; }
/* Hide any inherited SVG icons inside the overlay lines (defence in depth
   so the founder + address rows are guaranteed to render with no icon). */
.cape-hero__overlay-line svg { display: none !important; }

/* ---- Hero content ---- */
.cape-hero__content {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: calc(100vh - 120px);
  padding: 0 1.5rem 7rem;
}
@media (max-width: 767px) {
  /* On mobile, the badge is hidden. Reserve extra room at the bottom
     of the hero so the founder overlay (~52px tall) sits above the
     marquee (~52px tall) with a clean gap. Bottom padding 9rem
     (=144px) + overlay bottom 82-130px gives the overlay a clean
     placement regardless of viewport height. */
  .cape-hero__content { padding: 0 1rem 6rem; min-height: calc(100vh - 160px); }
}
@media (min-width: 640px) { .cape-hero__content { padding: 0 3rem 7rem; } }
@media (min-width: 1024px) { .cape-hero__content { padding: 0 5rem 8rem; } }
.cape-hero__content-inner { max-width: 72rem; margin: 0 auto; width: 100%; }

/* Badge */
.cape-hero__badge { margin-bottom: 1.5rem; }
@media (max-width: 767px) {
  /* Hide the badge on mobile / portrait-tablet. The marquee at the
     bottom of the hero already conveys "Now accepting project
     batches", and clearing this region gives the founder-name +
     address overlay its own breathing room above the marquee. */
  .cape-hero__badge { display: none; }
}
.cape-hero__badge-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.10);
  padding: 0.4rem 1rem;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cape-hero__badge-dot {
  display: inline-block; width: 0.4rem; height: 0.4rem;
  border-radius: 50%; background: var(--c-magenta-500);
}
@keyframes cape-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}
.cape-hero__badge-dot { animation: cape-pulse 1.6s ease-in-out infinite; }

/* Headline — restrained, sans-serif, weight 500 (not 700) */
.cape-hero__headline {
  max-width: 48rem;
  white-space: pre-line;
  font-size: clamp(1.875rem, 4vw + 0.5rem, 2.75rem);
  font-weight: 500;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,0.50);
  margin: 0;
}

/* Subheadline */
.cape-hero__subheadline {
  max-width: 36rem;
  margin-top: 1.25rem;
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  margin-bottom: 0;
}
@media (min-width: 640px) { .cape-hero__subheadline { font-size: var(--fs-18); } }

/* CTA row */
.cape-hero__cta-row {
  margin-top: 2rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
}

/* Primary CTA — clean white rectangle, 4px radius, NPC label colour. */
.cape-hero__btn-primary {
  position: relative;
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--c-blue-800);
  padding: 0.8rem 1.4rem;
  font-size: 14px; font-weight: 500;
  border: 0; cursor: pointer;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
}
.cape-hero__btn-primary:hover { background: var(--c-blue-50); }
.cape-hero__btn-primary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cape-hero__btn-primary svg { width: 1rem; height: 1rem; transition: transform var(--dur-2) var(--ease); }
.cape-hero__btn-primary:hover svg { transform: translateX(3px); }

.cape-hero__btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,0.30);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.92);
  padding: 0.8rem 1.2rem;
  font-size: 14px; font-weight: 500;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-style: solid; cursor: pointer;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  text-decoration: none;
  min-height: 44px;
}
.cape-hero__btn-secondary:hover {
  border-color: rgba(255,255,255,0.50);
  background: rgba(255,255,255,0.10);
  color: #fff;
}
.cape-hero__btn-secondary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cape-hero__btn-secondary svg { width: 1.1rem; height: 1.1rem; }

/* Scroll indicator */
.cape-hero__scroll {
  position: absolute; left: 50%; bottom: 2rem;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: rgba(255,255,255,0.45);
}
/* Hide the scroll indicator on mobile — on small viewports it would
   overlap the founder name / address overlay because both anchor at
   similar absolute distances from the cape-hero bottom. The badge and
   founder block are the priority. */
@media (max-width: 767px) {
  .cape-hero__scroll { display: none; }
}
.cape-hero__scroll-label {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.cape-hero__scroll-track {
  display: flex; align-items: flex-start; justify-content: center;
  height: 2.25rem; width: 1.4rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,0.20);
  padding: 0.375rem;
}
.cape-hero__scroll-thumb {
  display: block;
  height: 0.5rem; width: 0.25rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.50);
}

/* Homepage site-header layout
   The homepage now uses the SAME navbar as every other page — the
   normal .site-header > .header-main. The header is its OWN section in
   normal document flow, sitting BETWEEN the Refer & Earn strip and the
   hero image. The earlier "hide header-main on home" override has been
   removed so the desktop nav, Services mega-menu, mobile drawer and
   Download Recent Titles CTA are all available on the homepage. */
body.home .site-header {
  display: block;
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--c-border);
  box-shadow: 0 1px 0 rgba(13, 33, 86, 0.04);
}
body.home .site-header .nav-drawer,
body.home .site-header .nav-backdrop { display: none; }
body.home .site-header > .top-strip--referral { display: block; }
body.home main { display: block; }
body.home .trust-strip { display: none; }

/* Cape-hero content default state: VISIBLE.
   The animation system in assets/js/hero.js sets inline
   `style="opacity: 0"` on the cape-hero content elements as the
   initial state for its entrance animation. We use !important here
   so the content is always visible by default, even if JS hasn't
   run yet (no-JS users, slow networks, headless screenshot
   pipelines, etc.). Once the JS animation completes, it sets the
   inline opacity to 1 again, which matches this default. */
.cape-hero__nav,
.cape-hero__nav-link,
.cape-hero__badge,
.cape-hero__headline,
.cape-hero__subheadline,
.cape-hero__cta-row,
.cape-hero__overlay,
.cape-hero__scroll { opacity: 1 !important; }

/* Reduced-motion: keep final state, drop animation */
@media (prefers-reduced-motion: reduce) {
  .cape-hero__bg-parallax { transform: none; }
  .cape-hero__badge-dot { animation: none; }
  .cape-hero__scroll-thumb { animation: none !important; }
  .cape-hero__scroll-thumb-wrap { animation: none !important; }
}

/* =========================================================
   NPC SERVICE INFO CARDS
   ---------------------------------------------------------------------
   Premium card system for the Services index page. Translates the
   React InfoCard visual language (image top, rotating conic-gradient
   border driven by mouse position, subtle 45/-45deg diagonal pattern,
   hover lift) into pure HTML + CSS + vanilla JS.

   - All visual effects are pure CSS, no images, no external fonts.
   - The rotating border is an enhancement: cards look fully styled
     even when --rotation is the fallback 0deg, and even when JS fails.
   - Honours prefers-reduced-motion by setting --rotation: 0deg and
     removing transforms / transitions.
   - No color from the React reference — uses NPC design tokens only.
   ========================================================= */

.services-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.services-section-head h2 { font-size: clamp(1.5rem, 2vw + 0.5rem, 1.875rem); }
.services-section-head .services-section-meta {
  font-size: var(--fs-13);
  color: var(--c-fg-mute);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.services-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1024px) {
  .services-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 640px) {
  .services-card-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* --- Card root (the <a>) ------------------------------------------- */
.service-info-card {
  --rotation: 0deg;
  --npc-border-from: var(--c-blue-600);
  --npc-border-to:   var(--c-magenta-500);
  --npc-card-bg:     #ffffff;
  --npc-pattern:     rgba(26, 58, 138, 0.05);

  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--c-fg);
  border-radius: 18px;
  background:
    linear-gradient(var(--npc-card-bg), var(--npc-card-bg)) padding-box,
    conic-gradient(
      from var(--rotation),
      var(--npc-border-from) 0deg,
      var(--npc-border-to)   90deg,
      var(--npc-border-from) 180deg,
      var(--npc-border-to)   270deg,
      var(--npc-border-from) 360deg
    ) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 2px solid transparent;
  box-shadow: 0 1px 2px rgba(13, 33, 86, 0.04),
              0 2px 8px rgba(13, 33, 86, 0.05);
  transition: transform 280ms var(--ease),
              box-shadow 280ms var(--ease),
              border-radius 280ms var(--ease);
  overflow: hidden;
  isolation: isolate;
  height: 100%;
  min-height: 360px;
}
.service-info-card:hover,
.service-info-card:focus-visible {
  color: var(--c-fg);
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(13, 33, 86, 0.08),
              0 10px 24px rgba(13, 33, 86, 0.10);
}
.service-info-card:focus-visible {
  outline: 2px solid var(--c-blue-600);
  outline-offset: 3px;
}
.service-info-card:active { transform: translateY(-1px); }

/* Inner wrapper holds the image, pattern, content, and overlays. */
.service-info-card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 16px;
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg,  var(--npc-pattern) 25%, transparent 25%, transparent 75%, var(--npc-pattern) 75%),
    linear-gradient(-45deg, var(--npc-pattern) 25%, transparent 25%, transparent 75%, var(--npc-pattern) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
  overflow: hidden;
}

/* --- Image area ---------------------------------------------------- */
.service-info-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-bg-soft);
  border-bottom: 1px solid var(--c-border);
}
.service-info-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 380ms var(--ease);
  background: var(--c-bg-soft);
}
.service-info-card:hover .service-info-card__image img,
.service-info-card:focus-visible .service-info-card__image img {
  transform: scale(1.04);
}

/* Subtle icon badge in the corner of the image (re-uses existing sprite
   icons so we don't introduce a new dependency). */
.service-info-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--c-blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(13, 33, 86, 0.18);
  backdrop-filter: blur(4px);
}
.service-info-card__badge svg { width: 20px; height: 20px; }
.service-info-card__badge--magenta { color: var(--c-magenta-500); }

/* --- Content area -------------------------------------------------- */
.service-info-card__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 22px;
  flex: 1 1 auto;
}
.service-info-card__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-magenta-500);
}
.service-info-card__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-fg);
  letter-spacing: -0.01em;
  transition: color 220ms var(--ease);
}
@supports (text-wrap: balance) {
  .service-info-card__title { text-wrap: balance; }
}
.service-info-card__title .service-info-card__arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform 220ms var(--ease);
  color: var(--c-magenta-500);
}
.service-info-card:hover .service-info-card__title,
.service-info-card:focus-visible .service-info-card__title {
  color: var(--c-magenta-600);
}
.service-info-card:hover .service-info-card__title .service-info-card__arrow,
.service-info-card:focus-visible .service-info-card__title .service-info-card__arrow {
  transform: translateX(3px);
}
.service-info-card__description {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-fg-soft);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* Standard line-clamp is supported in every current Chromium (>=120),
   Firefox (>=132), and Safari. Older browsers that still emit the
   "Unknown property 'line-clamp'" warning will simply fall through to
   the -webkit-line-clamp rule above. */
@supports (line-clamp: 3) {
  .service-info-card__description { line-clamp: 3; }
}
.service-info-card__meta {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--c-magenta-500);
  font-weight: 600;
}
.service-info-card__meta svg { width: 14px; height: 14px; }

/* --- Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .service-info-card,
  .service-info-card__image img,
  .service-info-card__title .service-info-card__arrow {
    transition: none;
  }
  .service-info-card:hover,
  .service-info-card:focus-visible { transform: none; }
  .service-info-card:hover .service-info-card__image img,
  .service-info-card:focus-visible .service-info-card__image img { transform: none; }
}

/* =========================================================
   End NPC SERVICE INFO CARDS
   ========================================================= */

/* 8. Cards & sections --------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: var(--sp-5);
  transition: border-color var(--dur-2) var(--ease);
}
.card:hover { border-color: var(--c-border-strong); }
.card-icon {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background: var(--c-blue-50); color: var(--c-blue-600);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--sp-3);
}
.card-icon svg { width: 24px; height: 24px; }
.card h3 { font-size: var(--fs-18); margin-bottom: var(--sp-2); }
.card p { font-size: var(--fs-14); }
.card-link { margin-top: var(--sp-3); display: inline-flex; align-items: center; gap: 6px; color: var(--c-magenta-500); font-weight: 500; text-decoration: none; }
.card-link::after { content: "→"; }

/* Decorative gradient card variants removed — they violated the
   "no decorative gradients on UI surfaces" rule. */
.card-feature { background: #fff; }
.card-magenta { background: #fff; border-color: var(--c-magenta-200); }
.card-magenta .card-icon { background: var(--c-magenta-50); color: var(--c-magenta-500); }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: 500; }
.badge-magenta { background: var(--c-magenta-50); color: var(--c-magenta-600); }
.badge-blue { background: var(--c-blue-50); color: var(--c-blue-700); }
.badge-amber { background: #fff5e0; color: #8a5a00; }

.section-head { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: var(--sp-7); }
.section-head h2 { margin-bottom: var(--sp-3); }
.section-head p { color: var(--c-fg-soft); }

.feature-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-7); align-items: center; }
@media (max-width: 900px) { .feature-row { grid-template-columns: 1fr; } }
.feature-row .visual { aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden; background: var(--c-bg-blue); }
.feature-row .visual svg { width: 100%; height: 100%; }
.feature-row.reverse { grid-template-columns: 1fr 1.1fr; }
.feature-row.reverse .visual { order: 2; }
@media (max-width: 900px) { .feature-row.reverse { grid-template-columns: 1fr; } .feature-row.reverse .visual { order: 0; } }

.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .process-grid { grid-template-columns: 1fr; } }
.process-step { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-5); }
.process-step .num { display: inline-block; width: 32px; height: 32px; border-radius: 50%; background: var(--c-magenta-500); color: #fff; font-weight: 600; text-align: center; line-height: 32px; margin-bottom: var(--sp-3); }

.stat-card { background: #fff; border-radius: var(--r-md); padding: var(--sp-5); border: 1px solid var(--c-border); text-align: center; }
.stat-card .v { font-size: var(--fs-30); font-weight: 600; color: var(--c-blue-700); line-height: 1; }
.stat-card .l { color: var(--c-fg-soft); margin-top: 4px; font-size: var(--fs-14); }

/* CTA banner — solid NPC navy, no decorative radial gradient overlay. */
.cta-banner {
  background: var(--c-blue-800);
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--sp-7);
  display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-5); align-items: center;
  position: relative; overflow: hidden;
}
.cta-banner h2, .cta-banner p { color: #fff; }
.cta-banner .cta-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: flex-end; }
@media (max-width: 800px) { .cta-banner { grid-template-columns: 1fr; } .cta-banner .cta-buttons { justify-content: flex-start; } }

.testimonial { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-5); }
.testimonial p { color: var(--c-fg); font-style: normal; }
.testimonial .who { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.testimonial .who .av { width: 40px; height: 40px; border-radius: 50%; background: var(--c-blue-100); display: inline-flex; align-items: center; justify-content: center; color: var(--c-blue-700); font-weight: 600; }
.testimonial .who small { color: var(--c-fg-mute); display: block; }

/* ============================================================
   Testimonials — editorial scattered composition (desktop)
   ------------------------------------------------------------
   Single sans-serif typography. No italic display font. Restrained
   shadow. Desktop: scattered with intentional rotation, x/y offsets,
   overlap and depth. Mobile: stacked flex layout, no overlap.
   ============================================================ */
.testimonials-section { position: relative; overflow: hidden; }
.testimonials-section__head { max-width: 720px; margin-inline: auto; }

.testimonials-canvas {
  position: relative;
  margin-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.t-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  box-shadow: var(--sh-1);
  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
  will-change: transform;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  opacity: 0;
  transform: translate3d(0, 12px, 0) rotate(0deg);
  isolation: isolate;
}

.t-card.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg);
}

.t-card--placeholder {
  background: var(--c-bg-blue);
  border-style: dashed;
  border-color: var(--c-blue-200);
}

.t-card__quote-mark {
  position: absolute;
  top: -6px;
  right: 18px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 4rem;
  line-height: 1;
  color: var(--c-magenta-500);
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.t-card__quote {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--c-fg);
  font-size: var(--fs-15);
  line-height: 1.55;
  font-style: normal;
  font-family: var(--ff-sans);
  font-weight: 400;
  letter-spacing: 0;
  quotes: none;
}
@supports (text-wrap: pretty) {
  .t-card__quote { text-wrap: pretty; }
}

.t-card__person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-border);
  position: relative;
  z-index: 1;
}

.t-card__avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background: var(--c-blue-700);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.t-card--placeholder .t-card__avatar {
  background: var(--c-blue-100);
  color: var(--c-blue-700);
}

.t-card__id { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.t-card__name { color: var(--c-fg); font-size: 15px; font-weight: 600; }
.t-card__handle {
  color: var(--c-fg-mute);
  font-size: 13px;
  font-weight: 400;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22ch;
}

.testimonials-note {
  margin: var(--sp-6) auto 0;
  text-align: center;
  color: var(--c-fg-soft);
  font-size: 14px;
  max-width: 60ch;
}
.testimonials-note .link {
  color: var(--c-magenta-500);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
}
.testimonials-note .link:hover { color: var(--c-blue-700); border-bottom-color: transparent; }

/* Desktop scattered composition — 980px+ */
@media (min-width: 980px) {
  .testimonials-canvas {
    display: block;
    height: 620px;
    margin-top: var(--sp-7);
  }

  .t-card {
    position: absolute;
    left: var(--t-x, 0%);
    top: var(--t-y, 0%);
    width: clamp(280px, 30%, 360px);
    transform: translate3d(0, 12px, 0) rotate(0deg);
    opacity: 0;
  }

  .t-card.is-in {
    transform: translate3d(0, 0, 0) rotate(var(--t-rot, 0deg));
  }

  .t-card:hover {
    transform: translate3d(0, -4px, 0) rotate(0deg);
    z-index: 5;
    box-shadow: var(--sh-3);
    border-color: var(--c-magenta-200);
  }

  .t-card.t-card--placeholder:hover {
    transform: translate3d(0, -4px, 0) rotate(0deg);
  }

  .t-card__quote { font-size: var(--fs-16); }
}

@media (min-width: 1200px) {
  .testimonials-canvas { height: 660px; }
  .t-card { width: clamp(300px, 28%, 360px); }
}

/* Reduced motion: no entrance, no hover lift, keep final state */
@media (prefers-reduced-motion: reduce) {
  .t-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .t-card:hover { transform: none !important; }
}

/* ============================================================
   Stats section — count-up animation hooks
   ============================================================ */
.stats-section { position: relative; }
.stats-grid { margin-top: var(--sp-4); }

.stat-card .v {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  display: inline-block;
  min-height: 1.2em;
}

[data-countup] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.course-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--c-blue-50); color: var(--c-blue-700); font-size: var(--fs-12); font-weight: 500; }

.breadcrumb { padding-block: var(--sp-4); background: var(--c-bg-soft); border-bottom: 1px solid var(--c-border); }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-14); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; color: var(--c-fg-mute); }
.breadcrumb li:not(:last-child)::after { content: "/"; color: var(--c-fg-mute); margin-left: 6px; }
.breadcrumb a { color: var(--c-fg-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-magenta-500); }
.breadcrumb [aria-current="page"] { color: var(--c-fg); font-weight: 500; }

.page-head { padding-block: var(--sp-7); background: var(--c-bg-soft); }
.page-head h1 { color: var(--c-blue-800); }
.page-head p { color: var(--c-fg-soft); max-width: 60ch; margin-top: var(--sp-3); }
.page-head .container { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-6); align-items: center; }
@media (max-width: 900px) { .page-head .container { grid-template-columns: 1fr; } }
.page-head .page-illu { aspect-ratio: 4/3; }
.page-head .page-illu svg { width: 100%; height: 100%; }

.faq { display: flex; flex-direction: column; gap: var(--sp-3); }
.faq details { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); }
.faq summary { cursor: pointer; font-weight: 500; color: var(--c-fg); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--fs-24); color: var(--c-magenta-500); transition: transform var(--dur-2) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: var(--sp-3); color: var(--c-fg-soft); }

.blog-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; transition: border-color var(--dur-2) var(--ease); height: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; word-wrap: break-word; }
.blog-card:hover { border-color: var(--c-border-strong); }
.blog-card .cover { aspect-ratio: 16/9; background: var(--c-blue-50); position: relative; overflow: hidden; }
.blog-card .cover svg { width: 100%; height: 100%; }
.blog-card .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card .body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; min-height: 0; min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; box-sizing: border-box; }
.blog-card h3 { font-size: var(--fs-18); line-height: 1.3; margin: 0; overflow-wrap: anywhere; word-break: break-word; }
/* Equal card sizing — clamp the title and excerpt so one long article
   cannot push its card taller than the others. Title fixed to 2 lines,
   excerpt fixed to 3 lines. The .body uses flex column + margin-top:auto
   on .meta so the meta row anchors to the bottom of every card. */
.blog-card h3,
.blog-teaser__grid .blog-card h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--fs-18) * 1.3 * 2);
}
.blog-card p { font-size: var(--fs-14); margin: 0; overflow-wrap: anywhere; word-break: break-word; }
/* Excerpt clamp — applies to the standard blog listing too so cards
   in any grid stay the same height. */
.blog-card p,
.blog-teaser__grid .blog-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.blog-card .meta { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-12); color: var(--c-fg-mute); margin-top: auto; padding-top: var(--sp-3); }
.blog-card a.cover-link { position: absolute; inset: 0; z-index: 1; }
/* Make the whole card row in the homepage teaser a perfectly aligned
   row of equal-sized cards even when one card's content is longer. */
.blog-teaser__grid { align-items: stretch; }
.blog-teaser__grid > .blog-card { width: auto; }

.blog-featured { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-6); background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
.blog-featured .cover { aspect-ratio: 16/10; background: var(--c-blue-50); }
.blog-featured .cover svg { width: 100%; height: 100%; }
.blog-featured .body { padding: var(--sp-6); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3); }
.blog-featured h2 { font-size: clamp(1.5rem, 2vw + 0.6rem, 2.25rem); }
@media (max-width: 800px) { .blog-featured { grid-template-columns: 1fr; } }

/* 9. Forms --------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--sp-4); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-14); font-weight: 500; color: var(--c-fg); }
.field .hint { font-size: var(--fs-12); color: var(--c-fg-mute); }
.field input, .field select, .field textarea {
  padding: 0.65rem 0.85rem; border: 1.5px solid var(--c-border); border-radius: var(--r-sm);
  background: #fff; font-size: var(--fs-15); color: var(--c-fg);
  font-family: var(--ff-sans);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--c-blue-500); box-shadow: var(--sh-focus);
}
.field textarea { min-height: 120px; resize: vertical; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--c-error); }
.field .err { color: var(--c-error); font-size: var(--fs-12); }
.honeypot { position: absolute; left: -9999px; }
.form-actions { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-top: var(--sp-2); }
.form-status { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); display: none; }
.form-status.is-ok { display: block; background: #e6f6ec; color: var(--c-success); border: 1px solid #b6e2c4; }
.form-status.is-err { display: block; background: #fdecea; color: var(--c-error); border: 1px solid #f6c4be; }
.fieldset { border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-5); background: var(--c-bg-soft); }
.fieldset legend { padding-inline: var(--sp-3); font-weight: 500; color: var(--c-fg); }

.checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-14); color: var(--c-fg-soft); }
.checkbox input { width: 18px; height: 18px; accent-color: var(--c-magenta-500); }

/* 9b. Enquiry guided form -------------------------------------------- */
/* Multi-step, category-based questionnaire. The "card options" are
   large selectable surfaces that look like buttons but act as radios.
   Progress indicator at the top. One step is visible at a time. */
.enquire-form { display: flex; flex-direction: column; gap: var(--sp-5); }
.field .req { color: var(--c-magenta-500); margin-left: 2px; }
.enquire-progress {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  list-style: none; padding: 0;
}
.enquire-progress li {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--c-fg-mute); font-size: var(--fs-12);
  font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
}
.enquire-progress li .dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-bg-soft); color: var(--c-fg-mute);
  border: 1.5px solid var(--c-border);
  font-size: var(--fs-12); font-weight: 600;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.enquire-progress li.is-on { color: var(--c-fg); }
.enquire-progress li.is-on .dot {
  background: var(--c-blue-50); color: var(--c-blue-700); border-color: var(--c-blue-300);
}
.enquire-progress li.is-active .dot {
  background: var(--c-magenta-500); color: #fff; border-color: var(--c-magenta-500);
}
.enquire-progress li .sep {
  display: inline-block; width: 24px; height: 1.5px; background: var(--c-border);
  margin-inline: 4px;
}

.enquire-step {
  display: flex; flex-direction: column; gap: var(--sp-4);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: var(--sp-5); background: #fff;
}
.enquire-step[hidden] { display: none; }
.enquire-step .step-question { font-size: var(--fs-18); font-weight: 600; color: var(--c-fg); margin: 0; }
.enquire-step .step-hint { color: var(--c-fg-soft); font-size: var(--fs-14); margin: 0 0 var(--sp-2) 0; }
.enquire-step .step-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); }

/* Card options — large selectable radio cards */
.card-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 640px) { .card-options { grid-template-columns: 1fr; } }
.card-options--full > * { grid-column: 1 / -1; }
.card-option {
  position: relative; cursor: pointer; user-select: none;
  display: flex; flex-direction: column; gap: 8px;
  padding: var(--sp-5); border-radius: var(--r-md);
  background: #fff; border: 1.5px solid var(--c-border);
  transition: border-color var(--dur-2) var(--ease),
              background var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
  text-decoration: none; color: inherit;
}
.card-option:hover,
.card-option:focus-within {
  border-color: var(--c-blue-400);
  box-shadow: var(--sh-2);
}
.card-option.is-selected {
  border-color: var(--c-magenta-500);
  background: #fff5fa;
  box-shadow: 0 0 0 3px rgba(200,16,124,0.12);
}
.card-option input[type=radio] {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.card-option input[type=radio]:focus-visible + .card-option__body,
.card-option:focus-within {
  outline: none;
}
.card-option__title {
  font-size: var(--fs-16); font-weight: 600; color: var(--c-blue-800);
  display: inline-flex; align-items: center; gap: 10px;
}
.card-option__title .ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--c-blue-50); color: var(--c-blue-700);
  flex: 0 0 32px;
}
.card-option.is-selected .card-option__title .ico {
  background: var(--c-magenta-100); color: var(--c-magenta-600);
}
.card-option__title .ico svg { width: 18px; height: 18px; }
.card-option__desc { color: var(--c-fg-soft); font-size: var(--fs-14); line-height: 1.5; }
.card-option__check {
  position: absolute; top: 14px; right: 14px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--c-border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.card-option__check::after {
  content: ""; width: 10px; height: 6px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(0px, -1px);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.card-option.is-selected .card-option__check {
  background: var(--c-magenta-500); border-color: var(--c-magenta-500);
}
.card-option.is-selected .card-option__check::after { opacity: 1; }

/* Compact (inline) card options for yes/no inside a step */
.card-options--inline { grid-template-columns: repeat(2, minmax(0, 120px)); gap: var(--sp-3); }
@media (max-width: 480px) { .card-options--inline { grid-template-columns: 1fr 1fr; } }
.card-option--sm { padding: var(--sp-3) var(--sp-4); }
.card-option--sm .card-option__title { font-size: var(--fs-14); }
.card-option--sm .card-option__desc { display: none; }
.card-option--sm .card-option__check { position: static; width: 18px; height: 18px; flex: 0 0 18px; }
.card-option--sm .card-option__title { width: 100%; }
.card-option--sm .card-option__body { display: flex; align-items: center; gap: 8px; }

/* Fieldset inside a step */
.enquire-step .fieldset-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 640px) { .enquire-step .fieldset-row { grid-template-columns: 1fr; } }
.enquire-step .field-hint { font-size: var(--fs-12); color: var(--c-fg-mute); margin-top: 2px; }

/* Dynamic branch container — make inputs comfortable on small screens. */
.enquire-step [data-details-content] { display: flex; flex-direction: column; gap: var(--sp-4); }
.enquire-step [data-details-content] > .field,
.enquire-step [data-details-content] > .fieldset-row { width: 100%; }
.enquire-step [data-details-content] input,
.enquire-step [data-details-content] select,
.enquire-step [data-details-content] textarea {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  font-size: var(--fs-16); /* avoid iOS auto-zoom on focus */
}
.enquire-step [data-details-content] textarea { min-height: 88px; resize: vertical; }
@media (max-width: 480px) {
  .enquire-step [data-details-content] .card-options--inline { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .enquire-step [data-details-content] .card-option--sm { padding: var(--sp-3); }
  .enquire-step .step-actions { flex-direction: column; align-items: stretch; }
  .enquire-step .step-actions .btn { width: 100%; justify-content: center; }
  .enquire-step .step-actions [data-continue] { order: -1; }
}

/* Summary view */
.enquiry-summary {
  border: 1px dashed var(--c-border-strong);
  background: #fff; border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: 8px;
}
.enquiry-summary .sum-row {
  display: grid; grid-template-columns: 180px 1fr; gap: var(--sp-3);
  padding-block: 6px;
  border-bottom: 1px dashed var(--c-border);
}
.enquiry-summary .sum-row:last-child { border-bottom: 0; }
.enquiry-summary .sum-k { color: var(--c-fg-mute); font-size: var(--fs-14); }
.enquiry-summary .sum-v { color: var(--c-fg); font-size: var(--fs-14); font-weight: 500; word-break: break-word; }
@media (max-width: 640px) {
  .enquiry-summary .sum-row { grid-template-columns: 1fr; gap: 2px; }
}

/* Upload control visual */
.field input[type="file"] {
  padding: 0.55rem 0.7rem;
  background: var(--c-bg-soft);
  font-size: var(--fs-14);
}
.field input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 6px 12px;
  border-radius: var(--r-sm); border: 1.5px solid var(--c-blue-600);
  background: #fff; color: var(--c-blue-700); font-weight: 500; cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover { background: var(--c-blue-50); }

/* 10. Footer -------------------------------------------------------
   ---------------------------------------------------------------------
   Footer.png is THE FOOTER CANVAS. Natural 3:1 aspect ratio, no
   background-size: cover, no transform. Content overlays the image
   in the cream (top) and dark navy (bottom) regions. The page
   terminates at the bottom edge of the artwork. */
.site-footer {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  background-color: #f7f1e6;
  font-family: var(--ff-sans);
  color: var(--c-fg);
  overflow: hidden;
  isolation: isolate;
}

.site-footer__art {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  z-index: 0;
}
.site-footer__art img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-drag: none;
}

/* On mobile the footer columns stack into a single column, so the footer
   itself grows taller than the 3:1 artwork's natural height. We pin the
   artwork image to the top of the footer (only the cream band at the top
   of the image carries content) and let the dark navy band of the artwork
   anchor the legal/copyright row at the bottom. The .site-footer element
   itself is the layout container — not .site-footer__art — so the content
   overlay has room to breathe. */
@media (max-width: 720px) {
  .site-footer {
    background-color: #08204a;
    min-height: 720px;
  }
  .site-footer__art {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  .site-footer__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }
}
@media (max-width: 420px) {
  .site-footer { min-height: 760px; }
}

.site-footer__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.site-footer__overlay > * { pointer-events: auto; }

.site-footer__inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

/* Footer column layout.
   Desktop: 4 columns at >= 1024px — brand | quick links | contact | follow us.
   Tablet  : 2x2 grid from 540px to 1023px so all four blocks remain visible
             and Follow Us does not slide down into the decorative artwork.
   Mobile  : single stacked column under 540px.

   `minmax(0, ...)` lets each track shrink below its min-content so the
   footer can accommodate larger content (e.g. when the browser is zoomed
   in) without forcing a mid-item break inside the columns. Individual
   logical items below carry `white-space: nowrap` to stay intact; the
   surrounding container's `overflow-x: hidden` on <body> takes care of
   any horizontal overflow at extreme zoom levels. */
.footer-min {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 32px);
  align-items: start;
  padding-top: clamp(14px, 2.6vw, 28px);
}
@media (max-width: 1023px) and (min-width: 721px) {
  .footer-min { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.footer-min > * { min-width: 0; }

.footer-min__brand .footer-min-title {
  font-size: clamp(15px, 1.45vw, 19px);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--c-blue-900);
  margin: 0 0 4px;
  line-height: 1.25;
  white-space: nowrap;
}
.footer-min__brand .footer-min-tag {
  font-size: clamp(11.5px, 0.92vw, 13px);
  line-height: 1.4;
  color: var(--c-fg-soft);
  margin: 0;
  max-width: 32ch;
}

/* Footer Quick Links column — vertical list with chevron arrows and a
   thin pink rule beneath the heading. The earlier horizontal layout
   (dot-separated inline list) is preserved only on the @media (max-width:
   540px) breakpoint below, where the column collapses under the brand
   stack and a single inline row reads better. */
.footer-min__nav {
  align-self: start;
  padding-top: clamp(2px, 0.4vw, 6px);
  text-align: left;
}
.footer-min__nav ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.55vw, 8px);
  align-items: flex-start;
  justify-content: flex-start;
}
.footer-min__nav li {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
/* Right-facing chevron drawn with two borders (no extra DOM, no asset).
   Kept inline-flex inside the li so it sits flush with the link text and
   inherits the dark-blue brand tone. */
.footer-min__nav li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--c-blue-800);
  border-top: 1.5px solid var(--c-blue-800);
  transform: rotate(45deg);
  flex: 0 0 6px;
  margin-right: 2px;
  color: var(--c-blue-800);
}
/* Cancel the old dot separator between items — no longer needed once the
   list is vertical. */
.footer-min__nav li + li::before {
  content: "";
  color: inherit;
  margin-right: 2px;
  font-weight: inherit;
}
.footer-min__nav a {
  color: var(--c-fg);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease);
}
.footer-min__nav a:hover,
.footer-min__nav a:focus-visible {
  color: var(--c-magenta-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.footer-min__contact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: right;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.45;
  padding-top: clamp(2px, 0.4vw, 6px);
}
.footer-min__contact .footer-min-contact-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  color: var(--c-fg-soft);
  white-space: nowrap;
}
.footer-min__contact svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  color: var(--c-blue-800);
}
.footer-min__contact a {
  color: var(--c-fg);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.footer-min__contact a:hover,
.footer-min__contact a:focus-visible {
  color: var(--c-magenta-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.footer-min__legal {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  color: #e3e8f5;
  font-size: clamp(12px, 0.92vw, 14px);
  line-height: 1.4;
  padding: clamp(10px, 1.6vw, 16px) clamp(4px, 0.5vw, 8px) clamp(8px, 1.2vw, 12px);
}
.footer-min__legal-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: #e3e8f5;
  white-space: nowrap;
}
.footer-min__legal-copy > span {
  /* Keep the © line, the location suffix, and any future inner span on a
     single run of text so that zooming the browser in cannot split a
     word in the middle of the copyright row. */
  white-space: nowrap;
}
.footer-min__legal-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-magenta-500);
  display: inline-block;
  flex: 0 0 5px;
}
.footer-min__legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 2px 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-min__legal-links a {
  color: #c9d3ee;
  text-decoration: none;
  font-size: inherit;
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease);
}
.footer-min__legal-links a:hover,
.footer-min__legal-links a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.site-footer a:focus-visible {
  outline: 2px solid var(--c-magenta-500);
  outline-offset: 2px;
  border-radius: 2px;
}

.footer-min__social {
  /* Legacy single-row class kept so any page that still ships the older
     "grid-column: 1 / -1" arrangement continues to render. The new canonical
     footer puts the social icons inside .footer-min__follow instead. */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(8px, 1.4vw, 14px);
  padding-top: clamp(6px, 1vw, 10px);
  border-top: 1px dashed rgba(13, 33, 86, 0.18);
}
.footer-min__social-label {
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-fg-mute);
  margin-right: 4px;
}
.footer-min__social-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-min__social-list li { display: inline-flex; }
.footer-min__social-link {
  --sz: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sz);
  height: var(--sz);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--c-blue-700);
  border: 1px solid var(--c-border);
  text-decoration: none;
  transition:
    background var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
  box-shadow: none;
}
.footer-min__social-link svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: block;
}
.footer-min__social-link:hover,
.footer-min__social-link:focus-visible {
  background: var(--c-blue-600);
  color: #fff;
  border-color: var(--c-blue-600);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(13, 33, 86, 0.18);
}
.footer-min__social-link[aria-label="Facebook"]:hover,
.footer-min__social-link[aria-label="Facebook"]:focus-visible {
  background: #1877F2; border-color: #1877F2;
}
.footer-min__social-link[aria-label="Instagram"]:hover,
.footer-min__social-link[aria-label="Instagram"]:focus-visible {
  background: #dd2a7b; border-color: #dd2a7b;
}
.footer-min__social-link[aria-label="YouTube"]:hover,
.footer-min__social-link[aria-label="YouTube"]:focus-visible {
  background: #FF0000; border-color: #FF0000;
}
.footer-min__social-link[aria-label="LinkedIn"]:hover,
.footer-min__social-link[aria-label="LinkedIn"]:focus-visible {
  background: #0A66C2; border-color: #0A66C2;
}

@media (max-width: 720px) {
  .footer-min__social {
    margin-top: 6px;
    padding-top: 6px;
  }
  .footer-min__social-link { --sz: 36px; }
  .footer-min__social-link svg { width: 17px; height: 17px; flex-basis: 17px; }
}
@media (max-width: 420px) {
  .footer-min__social-link { --sz: 34px; }
  .footer-min__social-link svg { width: 16px; height: 16px; flex-basis: 16px; }
}

@media (max-width: 720px) {
  .footer-min {
    grid-template-columns: 1fr;
    text-align: center;
    gap: clamp(3px, 0.9vw, 8px);
    padding-top: clamp(5px, 1.4vw, 12px);
  }
  .footer-min__brand .footer-min-title {
    font-size: clamp(11px, 2.6vw, 14px);
    line-height: 1.2;
  }
  .footer-min__brand .footer-min-tag {
    font-size: clamp(9px, 2vw, 11.5px);
    line-height: 1.3;
    max-width: 100%;
    margin-inline: auto;
  }
  /* Keep the Quick Links column visually consistent on small screens:
     still left-aligned, still vertical. */
  .footer-min__nav { text-align: left; }
  .footer-min__nav ul { align-items: flex-start; column-gap: 4px; }
  .footer-min__nav a {
    font-size: clamp(14px, 2.8vw, 16px);
    line-height: 1.4;
  }
  .footer-min__follow { text-align: left; }
  .footer-min__follow-label { font-size: clamp(15px, 3.4vw, 18px); }
  .footer-min__social-list { gap: 8px; }
  .footer-min__contact {
    text-align: center;
    align-items: center;
    gap: 1px;
    line-height: 1.3;
  }
  .footer-min__contact .footer-min-contact-line { justify-content: center; }
  .footer-min__contact { font-size: clamp(9.5px, 2.1vw, 12px); }
  .footer-min__contact svg { width: 11px; height: 11px; flex-basis: 11px; }
  .footer-min__legal {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    padding: clamp(5px, 1vw, 10px) 4px clamp(3px, 0.7vw, 7px);
  }
  .footer-min__legal-copy { justify-content: center; }
  .footer-min__legal-links { justify-content: center; gap: 2px 10px; }
}
@media (max-width: 540px) {
  /* Comfortable spacing between stacked sections so brand / quick links /
     contact / follow us each get their own row. */
  .footer-min {
    padding-top: 14px;
    gap: 14px;
  }
  .footer-min__brand .footer-min-tag { display: none; }
  /* Quick Links stays visible in a compact vertical stack; only shrink the
     heading on the smallest phones where every pixel matters. The heading
     and items remain larger than before so they stay readable. */
  .footer-min__nav-label { font-size: clamp(15px, 4.2vw, 18px); }
  .footer-min__follow-label { font-size: clamp(15px, 4.2vw, 18px); }
  .footer-min__nav ul { gap: 6px; }
  .footer-min__nav a { font-size: clamp(14px, 3.4vw, 16px); }
  .footer-min__nav li::before { width: 5px; height: 5px; flex-basis: 5px; }
  .footer-min__contact {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
  }
  .footer-min__contact .footer-min-contact-line { gap: 4px; }
  /* Let the email address shrink to share a row with phone + WhatsApp on
     the smallest viewports instead of forcing a third row on its own.
     `min-width: 0` lets the link shrink below its intrinsic content size
     so the row of contact items can balance on a single line; combined
     with `overflow-wrap: anywhere` the email address can wrap mid-segment
     only if the row really does not fit. */
  .footer-min__contact .footer-min-contact-line {
    white-space: normal;
    min-width: 0;
  }
  .footer-min__contact a {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
  }
  .footer-min__follow {
    text-align: center;
  }
  .footer-min__follow-label {
    display: inline-block;
    margin: 0 auto;
  }
  .footer-min__social-list {
    justify-content: center;
    gap: 10px;
  }
  .footer-min__legal {
    flex-direction: row;
    font-size: 11px;
    line-height: 1.3;
    padding: 10px 4px 6px;
    gap: 0 8px;
  }
  .footer-min__legal-copy .footer-min__legal-loc { display: none; }
  .footer-min__legal-dot { width: 4px; height: 4px; flex-basis: 4px; }
}
@media (max-width: 420px) {
  .footer-min { padding-top: 3px; }
  .footer-min__brand .footer-min-title { font-size: 12px; }
  .footer-min__contact { font-size: 11px; gap: 2px 6px; }
  /* Keep the legal bar in the normal flow on the smallest phones; the
     previous position:absolute hack caused it to overlap the Follow Us
     block once the columns were restacked. */
  .footer-min__legal {
    font-size: 10.5px;
    line-height: 1.3;
    padding: 8px 4px 6px;
    gap: 4px 8px;
  }
  .footer-min__legal-copy { white-space: nowrap; }
  .footer-min__legal-dot { width: 3px; height: 3px; flex-basis: 3px; }
  .footer-min__legal-links { gap: 0 5px; }
  .footer-min__legal-links li + li::before {
    content: "|";
    margin-right: 5px;
    color: #c9d3ee;
  }
}

/* 11. Utility ------------------------------------------------------ */
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.flex-wrap { flex-wrap: wrap; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.items-start { align-items: flex-start; }
.hidden { display: none !important; }
.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; }

.float-actions { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 10px; z-index: 40; }
.float-actions a,
.float-actions button { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: var(--sh-3); border: 0; cursor: pointer; padding: 0; font: inherit; }
.float-actions a:hover,
.float-actions button:hover,
.float-actions a:focus-visible,
.float-actions button:focus-visible { outline: none; box-shadow: var(--sh-3), 0 0 0 3px rgba(20, 45, 110, 0.25); }
.float-actions .wa { background: #25D366; }
.float-actions .ph { background: var(--c-magenta-500); }
.float-actions svg { width: 26px; height: 26px; }
/* Back-to-hero arrow. Lives above WhatsApp in the same flex column,
   so it never overlaps the existing floating buttons. Same 52x52 circle
   geometry as the existing actions; NPC blue ground so it's clearly
   distinct from WhatsApp (green) and Call (pink). Hidden at the very
   top of the page, fades in once the user has scrolled past half of
   the hero. Reduced-motion friendly: the fade transition is dropped
   under prefers-reduced-motion via the global duration variables. */
.float-actions .back-to-hero { background: var(--c-blue-700, #142d70); transition: background var(--dur-2) var(--ease), opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); opacity: 0; pointer-events: none; transform: translateY(8px); }
.float-actions .back-to-hero:hover { background: #142d70; }
.float-actions .back-to-hero.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .float-actions .back-to-hero { transition: background var(--dur-2) var(--ease); transform: none; }
}

.scrollbar-hidden::-webkit-scrollbar { display: none; }

/* Reveal-on-scroll (progressive enhancement) */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* =====================================================================
   "What We Do" — service carousel (NPC branded, restrained)
   ---------------------------------------------------------------------
   Clean auto-scrolling service cards. Restrained radius. No decorative
   gradient on the heading. The image is a real photograph, with a
   gentle bottom-only overlay for legibility (functional, not decorative).
   ===================================================================== */

.wwd {
  position: relative;
  padding-block: var(--sp-9);
  background: var(--c-bg-soft);
  overflow: hidden;
  isolation: isolate;
}
.wwd > .container { position: relative; z-index: 2; }

.wwd__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--sp-7);
}
.wwd__head h2 {
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: clamp(1.5rem, 2.4vw + 0.7rem, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-fg);
}
.wwd__head p  { color: var(--c-fg-soft); font-size: var(--fs-16); margin: 0; }

.wwd__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
  padding-inline: max(var(--sp-5), calc((100vw - 1280px) / 2));
}
.wwd__row-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-fg-mute);
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
}
.wwd__row-meta .dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-magenta-500);
}
.wwd__controls { display: inline-flex; gap: 8px; }
.wwd__ctrl {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: #fff;
  border: 1px solid var(--c-border);
  color: var(--c-fg);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease);
  box-shadow: none;
}
.wwd__ctrl:hover {
  background: var(--c-blue-50);
  border-color: var(--c-blue-200);
  color: var(--c-blue-700);
}
.wwd__ctrl:focus-visible {
  outline: 2px solid var(--c-magenta-500);
  outline-offset: 3px;
}
.wwd__ctrl svg { width: 18px; height: 18px; }

.wwd__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.wwd__viewport:active { cursor: grabbing; }

.wwd__rail {
  display: flex;
  gap: 24px;
  padding-inline: var(--sp-5);
  width: max-content;
  will-change: transform;
  touch-action: pan-y;
}

/* ----- Card ----- */
.wwd__card {
  flex: 0 0 auto;
  width: 280px;
  display: block;
  text-decoration: none;
  color: inherit;
  outline: none;
}
@media (min-width: 640px)  { .wwd__card { width: 340px; } }
@media (min-width: 1024px) { .wwd__card { width: 380px; } }
@media (min-width: 1280px) { .wwd__card { width: 420px; } }

.wwd__inner {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--c-border);
  /* Service images are mostly 3:2 (900x600). Switching the frame to the
     same 3:2 ratio lets the whole image be visible at object-fit:cover
     instead of being cropped to a narrow vertical strip. */
  aspect-ratio: 3 / 2;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-2) var(--ease);
  box-shadow: none;
}
.wwd__card:hover .wwd__inner,
.wwd__card:focus-visible .wwd__inner {
  border-color: var(--c-magenta-300);
}

.wwd__art {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  background: var(--c-blue-800);
}
.wwd__art svg {
  width: 100%;
  height: 100%;
  display: block;
}
.wwd__art > img.wwd__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Most service images are landscape (900x600, 3:2) so a center
     anchor crops the long edges evenly when a portrait image (the
     MCA and School source files are 2:3 portrait) has to be fitted
     into the same landscape card frame. */
  object-position: center center;
  display: block;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.wwd__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-4);
  color: #fff;
  /* Functional readability overlay, not decoration. */
  background: linear-gradient(
    to top,
    rgba(8, 18, 48, 0.85) 0%,
    rgba(8, 18, 48, 0.30) 50%,
    rgba(8, 18, 48, 0) 100%
  );
}

.wwd__pill {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.20);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.wwd__pill svg { width: 10px; height: 10px; }

.wwd__new {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--c-magenta-500);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wwd__cat {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin: 0 0 4px;
}
.wwd__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  margin: 0;
  letter-spacing: -0.005em;
}
@media (min-width: 1024px) {
  .wwd__title { font-size: 22px; }
}
.wwd__desc {
  font-size: 13px;
  color: rgba(255,255,255,0.90);
  margin: 6px 0 0;
  line-height: 1.4;
  max-width: 32ch;
}

.wwd__meta {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  background: #fff;
  border-top: 1px solid var(--c-border);
}
.wwd__metric {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--c-fg-soft); font-weight: 400;
}
.wwd__metric strong { color: var(--c-blue-700); font-weight: 600; }
.wwd__metric svg { width: 12px; height: 12px; color: var(--c-blue-600); }

.wwd__arrow {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--c-blue-50);
  color: var(--c-blue-700);
  transition: background var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease);
  flex: 0 0 30px;
}
.wwd__card:hover .wwd__arrow,
.wwd__card:focus-visible .wwd__arrow {
  background: var(--c-blue-600);
  color: #fff;
}
.wwd__arrow svg { width: 14px; height: 14px; }

.wwd__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5) var(--sp-6);
  margin-top: var(--sp-6);
  font-size: 13px;
  color: var(--c-fg-soft);
}
.wwd__trust .item {
  display: inline-flex; align-items: center; gap: 8px;
}
.wwd__trust .item strong { color: var(--c-fg); font-weight: 600; }
.wwd__trust svg { width: 14px; height: 14px; color: var(--c-blue-600); flex: 0 0 14px; }

.wwd__footer {
  text-align: center;
  margin-top: var(--sp-6);
}

/* ----- Static service grid (replaces the old auto-scrolling rail) ----- */
.wwd-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
@media (max-width: 980px) { .wwd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .wwd-grid { grid-template-columns: minmax(0, 1fr); } }

.wwd-grid__item { display: block; }

.wwd-grid__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4);
  background: #ffffff;
  border: 1.5px solid var(--c-blue-300);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-fg);
  transition: border-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease);
  min-height: 220px;
  outline: none;
}
.wwd-grid__card:hover,
.wwd-grid__card:focus-visible {
  border-color: var(--c-magenta-500);
  box-shadow: 0 6px 18px rgba(13, 33, 86, 0.08);
  transform: translateY(-2px);
}

/* Per-card accent colours. Cycle through NPC blue and magenta tints so the
   grid reads as a deliberately branded card system without inventing new
   colours. */
.wwd-grid__card--c1  { border-color: #7c9bff; }    /* blue-300   */
.wwd-grid__card--c2  { border-color: #ec4ea0; }    /* magenta-400 */
.wwd-grid__card--c3  { border-color: #f59f00; }    /* amber-500 */
.wwd-grid__card--c4  { border-color: #ff7fbe; }    /* magenta-300 */
.wwd-grid__card--c5  { border-color: #4a72e6; }    /* blue-400   */
.wwd-grid__card--c6  { border-color: #2a52c4; }    /* blue-500   */
.wwd-grid__card--c7  { border-color: #c8107c; }    /* magenta-500 */
.wwd-grid__card--c8  { border-color: #ffacd6; }    /* magenta-200 */
.wwd-grid__card--c9  { border-color: #1a3a8a; }    /* blue-600   */
.wwd-grid__card--c10 { border-color: #d7e0ff; }    /* blue-100   */
.wwd-grid__card--c11 { border-color: #a80865; }    /* magenta-600 */
.wwd-grid__card--c12 { border-color: #142d6e; }    /* blue-700   */

.wwd-grid__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-blue-600);
  background: var(--c-blue-50);
  flex: 0 0 44px;
}
.wwd-grid__icon svg { width: 24px; height: 24px; }

.wwd-grid__title {
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-blue-700);
  margin: 0;
  letter-spacing: -0.005em;
}
.wwd-grid__sub {
  font-size: var(--fs-13);
  color: var(--c-fg-soft);
  margin: 0;
  line-height: 1.3;
}
.wwd-grid__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 1.1rem;
  border: 1px solid var(--c-blue-600);
  border-radius: var(--r-pill);
  background: #ffffff;
  color: var(--c-blue-700);
  font-size: var(--fs-13);
  font-weight: 600;
  transition: background var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
.wwd-grid__card:hover .wwd-grid__cta,
.wwd-grid__card:focus-visible .wwd-grid__cta {
  background: var(--c-blue-600);
  border-color: var(--c-blue-600);
  color: #ffffff;
}

@media (max-width: 600px) {
  .wwd { padding-block: var(--sp-7); }
  .wwd__head { margin-bottom: var(--sp-5); }
  .wwd__head p { font-size: var(--fs-15); }
  .wwd__rail { gap: 16px; padding-inline: var(--sp-4); }
  .wwd__card { width: 280px; }
  .wwd__overlay { padding: var(--sp-3); }
  .wwd__title { font-size: 18px; }
  .wwd__desc { font-size: 11px; }
  .wwd__trust { gap: var(--sp-3) var(--sp-4); font-size: 12px; }
  .wwd__row { flex-direction: column; align-items: stretch; }
  .wwd__controls { align-self: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .wwd__card:hover .wwd__inner,
  .wwd__card:focus-visible .wwd__inner { transform: none; }
  .wwd__card:hover .wwd__arrow,
  .wwd__card:focus-visible .wwd__arrow { transform: none; }
  .wwd__viewport { cursor: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* 12. Print -------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .float-actions, .nav-drawer, .nav-backdrop { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  .container, .container-narrow { max-width: 100%; }
}

/* 13. About-page sections ------------------------------------------ */
.about-intro { align-items: start; gap: var(--sp-7); }
.about-intro .lead { font-size: var(--fs-18); color: var(--c-fg); }
.about-facts {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
}
.about-facts__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.about-facts__list li { display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-3); align-items: start; }
.about-facts__label {
  font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--c-magenta-500); font-weight: 600;
}
.about-facts__value { color: var(--c-fg); font-weight: 500; line-height: 1.45; }
@media (max-width: 640px) {
  .about-facts__list li { grid-template-columns: 1fr; gap: 2px; }
}

.about-experience,
.about-approach,
.about-research,
.about-publication,
.about-training { gap: var(--sp-6); align-items: start; }
.about-experience p,
.about-approach p,
.about-research p,
.about-publication p,
.about-training p { color: var(--c-fg-soft); line-height: 1.65; }

/* The "What We Support" and "Why Students Choose NPC" sections now
   use the Expandable Bento Grid (see section 13 below). The old
   .about-support__card / .about-why .card rules have been removed —
   their visual responsibility is now inside the bento component. */

.about-publication .text-mute { font-size: var(--fs-14); }

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

[data-reveal][style*="--reveal-delay"] { transition-delay: var(--reveal-delay, 0ms); }

/* ---------------------------------------------------------------------
 * Hardening: the global [data-reveal] reveal-on-scroll system must
 * never delay the Job Portal cards or the modal. The card click is a
 * primary affordance and must open the modal regardless of viewport
 * intersection or animation state, and the modal must remain on top
 * even if a parent element accidentally picks up [data-reveal].
 * ------------------------------------------------------------------- */
.job-card,
.job-card[data-reveal],
.job-card.reveal,
.job-grid > [data-reveal],
.job-grid > .reveal {
  opacity: 1 !important;
  transform: none !important;
}

#job-modal,
#job-modal[data-reveal],
#job-modal *,
#job-modal *:before,
#job-modal *:after {
  opacity: 1;
  transform: none;
}

@media (max-width: 720px) {
  .about-intro,
  .about-experience,
  .about-approach,
  .about-research,
  .about-publication,
  .about-training { grid-template-columns: 1fr; }
}

/* ============== Announcements marquee (NPC, file:// safe) ============== */
.announce-strip { background: var(--c-blue-800); color: #fff; font-family: var(--ff-sans); border-top: 3px solid var(--c-magenta-500); min-height: 52px; }
.announce-strip__inner { display: flex; align-items: stretch; max-width: var(--container); margin: 0 auto; padding-inline: var(--sp-5); }
.announce-strip__label { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding-block: var(--sp-3); padding-inline-end: var(--sp-4); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; white-space: nowrap; border-inline-end: 1px solid rgba(255,255,255,0.12); }
.announce-strip__label svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--c-magenta-400); flex-shrink: 0; }
.announce-strip__icon { animation: announce-pulse 2.2s ease-in-out infinite; }
@keyframes announce-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(.85)} }
.announce-strip__viewport { flex: 1 1 auto; overflow: hidden; display: flex; align-items: center; position: relative; }
.announce-strip__track { display: flex; align-items: center; white-space: nowrap; will-change: transform; }
.announce-strip.is-animating .announce-strip__track { animation: announce-scroll var(--marquee-speed,40s) linear infinite; }
.announce-strip:hover .announce-strip__track, .announce-strip:focus-within .announce-strip__track, .announce-strip.is-paused .announce-strip__track { animation-play-state: paused; }
@keyframes announce-scroll { from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }

/* Marquee item — PURE WHITE TEXT
   ---------------------------------------------------------------------
   Audit summary of the cascade (so this rule is the last word):
   - Global `a { color: var(--c-blue-600) }` (dark blue) at line 136.
   - Global `a:hover { color: var(--c-magenta-500) }` at line 137.
   - Browser default `a:link` color (blue) — lower priority than author
     rules but included here to be defensive.
   - Browser default `a:visited` (purple) — same defensive note.
   The selectors below are scoped to .announce-strip so they override the
   globals and any browser defaults in every interactive state, on both
   <a> items (with is-link) and <span> items (without href). High
   specificity (0,2,0) plus !important is used on the default colour to
   guarantee #fff even if a future theme tweak reintroduces a competing
   link rule. */
.announce-strip .announce-strip__item,
.announce-strip .announce-strip__item:link,
.announce-strip .announce-strip__item:visited,
.announce-strip a.announce-strip__item,
.announce-strip a.announce-strip__item:link,
.announce-strip a.announce-strip__item:visited,
.announce-strip span.announce-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: var(--sp-3);
  padding-inline: var(--sp-5);
  font-size: var(--fs-14);
  color: #ffffff !important;
  text-decoration: none;
  line-height: 1.4;
  -webkit-text-fill-color: #ffffff;
}
.announce-strip .announce-strip__item:hover,
.announce-strip .announce-strip__item:focus-visible,
.announce-strip .announce-strip__item:active,
.announce-strip a.announce-strip__item:hover,
.announce-strip a.announce-strip__item:focus-visible,
.announce-strip a.announce-strip__item:active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.announce-strip__sep { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--c-magenta-400); opacity: 0.7; margin-inline-start: 2px; }
.announce-strip.is-reduced .announce-strip__track { animation: none !important; }
.announce-strip.is-reduced .announce-strip__icon { animation: none !important; }
@media (max-width: 600px) { .announce-strip__inner { flex-wrap: wrap; gap: 0; } .announce-strip__label { flex: 0 0 100%; border-inline-end: 0; border-bottom: 1px solid rgba(255,255,255,0.12); padding-inline-start: 0; } .announce-strip__viewport { flex: 0 0 100%; } .announce-strip__item { padding-inline: var(--sp-4); font-size: var(--fs-13); } }
@media (prefers-reduced-motion: reduce) { .announce-strip__track { animation: none !important; } .announce-strip__icon { animation: none !important; } .announce-strip.is-animating .announce-strip__track { animation: none !important; } }

/* ---------------------------------------------------------------------
 * 12b. Referral modal -----------------------------------------------
 * Vanilla-JS modal injected by main.js on every page. The trigger
 * is any [data-referral-open] (the top banner button). The modal
 * collects referrer + referred-person details and opens WhatsApp.
 * Colors and form styling follow the existing NPC design system.
 * ------------------------------------------------------------------- */
.npc-modal[hidden] { display: none !important; }
.npc-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
}
.npc-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 22, 58, 0.55);
  backdrop-filter: blur(2px);
}
.npc-modal__dialog {
  position: relative;
  background: #fff;
  color: var(--c-fg);
  border-radius: var(--r-md, 12px);
  box-shadow: 0 24px 60px rgba(8, 22, 58, 0.35);
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.npc-modal__header {
  background: linear-gradient(135deg, var(--c-blue-800) 0%, var(--c-blue-700) 100%);
  color: #fff;
  padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.npc-modal__title {
  font-size: var(--fs-18, 1.1rem); font-weight: 700; line-height: 1.25; margin: 0;
}
.npc-modal__sub {
  font-size: var(--fs-13); color: #d8e0f5; margin-top: 2px; display: block; font-weight: 400;
}
.npc-modal__close {
  background: rgba(255,255,255,0.12);
  border: 0; color: #fff; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 36px;
  transition: background var(--dur-2, 150ms) ease;
}
.npc-modal__close:hover { background: rgba(255,255,255,0.22); }
.npc-modal__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.npc-modal__close svg { width: 18px; height: 18px; }
.npc-modal__body {
  padding: var(--sp-5);
  overflow-y: auto;
}
.npc-modal__fieldset { margin: 0; padding: 0; border: 0; }
.npc-modal__legend {
  font-size: var(--fs-13); font-weight: 600; color: var(--c-blue-800);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: var(--sp-3); padding: 0;
  display: block;
}
.npc-modal__legend + .form-row + .form-row,
.npc-modal__fieldset + .npc-modal__fieldset { margin-top: var(--sp-5); }
.npc-modal__actions {
  display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap;
  margin-top: var(--sp-5);
}
.npc-modal__legal { font-size: var(--fs-12); color: var(--c-fg-mute); margin-top: var(--sp-3); line-height: 1.5; }
.npc-modal__legal a { color: var(--c-blue-600); }
html.npc-modal-open, body.npc-modal-open { overflow: hidden; }
@media (max-width: 600px) {
  .npc-modal { padding: 0; align-items: stretch; }
  .npc-modal__dialog { max-width: 100%; max-height: 100vh; border-radius: 0; }
  .npc-modal__body { padding: var(--sp-4); }
}

/* ---------------------------------------------------------------------
 * 13. Job Portal — public page (/job-portal/)
 *
 * Three-column responsive grid of compact expandable "Bento" cards. The
 * collapsed card shows an icon, title, vacancy count and short intro.
 * Clicking opens a modal that displays the full description.
 *
 * Translates the supplied React/Framer Motion reference into pure
 * HTML + CSS + vanilla JS so it works with the existing NPC frontend
 * and under file:// (no external dependencies, no build step).
 * ------------------------------------------------------------------- */
.job-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
@media (max-width: 960px) { .job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .job-grid { grid-template-columns: 1fr; } }

.job-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-2, 220ms) var(--ease, ease),
              border-color var(--dur-2, 220ms) var(--ease, ease),
              box-shadow var(--dur-2, 220ms) var(--ease, ease);
  min-height: 200px;
  font: inherit;
  color: inherit;
}
.job-card:hover,
.job-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--c-blue-300, #7c9bff);
  box-shadow: var(--sh-2, 0 2px 8px rgba(13,33,86,.08));
  outline: none;
}
.job-card .job-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md, 8px);
  background: var(--c-blue-50, #eef3ff);
  color: var(--c-blue-700, #142d6e);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 48px;
}
.job-card .job-icon svg { width: 26px; height: 26px; }
.job-card .job-title {
  color: var(--c-blue-800, #0d2156);
  font-size: var(--fs-18, 1.125rem);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}
.job-card .job-vac {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-13, .8125rem);
  color: var(--c-magenta-600, #a80865);
  font-weight: 600;
  margin: 0;
}
.job-card .job-vac .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-magenta-500, #c8107c); display: inline-block; }
.job-card .job-blurb {
  color: var(--c-fg-soft, #41527a);
  font-size: var(--fs-14, .875rem);
  line-height: 1.55;
  margin: 0;
  /* clamp to keep all cards visually equal height */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.job-card .job-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--c-blue-600, #1a3a8a);
  font-size: var(--fs-13, .8125rem);
  font-weight: 600;
}
.job-card .job-cta svg { width: 14px; height: 14px; transition: transform var(--dur-2, 220ms) var(--ease, ease); }
.job-card:hover .job-cta svg,
.job-card:focus-visible .job-cta svg { transform: translateX(2px); }

/* Job Portal — modal / expand view. Reuses npc-modal scaffolding so the
 * keyboard / focus / scroll-lock semantics match the rest of the site. */
.job-modal__header {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5);
  background: linear-gradient(135deg, var(--c-blue-800, #0d2156) 0%, var(--c-blue-700, #142d6e) 100%);
  color: #fff;
}
.job-modal__icon {
  width: 56px; height: 56px; border-radius: var(--r-md, 8px);
  background: rgba(255,255,255,0.12);
  display: inline-flex; align-items: center; justify-content: center;
  color: #ffd66b; flex: 0 0 56px;
}
.job-modal__icon svg { width: 30px; height: 30px; }
.job-modal__heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.job-modal__title { font-size: var(--fs-20, 1.25rem); font-weight: 600; margin: 0; color: #fff; }
.job-modal__vac { font-size: var(--fs-13, .8125rem); color: #ffd66b; font-weight: 600; }
.job-modal__body {
  padding: var(--sp-5);
  overflow-y: auto;
}
.job-modal__short { color: var(--c-fg-soft, #41527a); font-size: var(--fs-15, .9375rem); margin-bottom: var(--sp-4); }
.job-modal__desc h3 { color: var(--c-blue-800, #0d2156); font-size: var(--fs-16, 1rem); margin: 0 0 var(--sp-2); }
.job-modal__desc p { color: var(--c-fg-soft, #41527a); font-size: var(--fs-15, .9375rem); line-height: 1.7; margin: 0 0 var(--sp-3); white-space: pre-line; }
.job-modal__actions {
  display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5);
  padding-top: var(--sp-4); border-top: 1px solid var(--c-border, #d8def0);
}

.job-portal-intro {
  max-width: 60ch;
  color: var(--c-fg-soft, #41527a);
  font-size: var(--fs-16, 1rem);
  line-height: 1.7;
  margin-top: var(--sp-3);
}

.job-empty {
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  color: var(--c-fg-mute, #6c7793);
  background: #fff;
  border: 1px dashed var(--c-border, #d8def0);
  border-radius: var(--r-lg, 12px);
}

@media (max-width: 600px) {
  .job-card { padding: var(--sp-4); min-height: auto; }
  .job-card .job-icon { width: 44px; height: 44px; flex: 0 0 44px; }
  .job-card .job-icon svg { width: 22px; height: 22px; }
  .job-modal__header { padding: var(--sp-4); gap: var(--sp-3); }
  .job-modal__icon { width: 48px; height: 48px; flex: 0 0 48px; }
  .job-modal__icon svg { width: 26px; height: 26px; }
  .job-modal__body { padding: var(--sp-4); }
}

@media (prefers-reduced-motion: reduce) {
  .job-card,
  .job-card .job-cta svg,
  .job-card .job-card__shine { transition: none !important; transform: none !important; }
}

/* =========================================================
   13. Expandable Bento Grid (ABOUT PAGE)
   ---------------------------------------------------------------------
   A bento-style grid where every card shows a compact head
   (icon + title) by default and expands inline when activated.
   When one card opens, others dim slightly so the focused card
   reads as the primary surface. Cards keep their navigation
   target inside the expanded panel — the head is a <button>,
   the link is a separate <a>.

   Visual discipline:
     - Uses ONLY NPC tokens (--c-blue-*, --c-magenta-*, --sp-*, --r-*)
     - No decorative gradients, no glassmorphism, no neon.
     - Single typographic stack (--ff-sans).
     - Reduced-motion: transitions are stripped.
   ========================================================= */
.expandable-bento {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(170px, auto);
  grid-auto-flow: dense;
  margin-top: var(--sp-4);
}

@media (max-width: 1023px) {
  .expandable-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(150px, auto);
  }
}
@media (max-width: 600px) {
  .expandable-bento {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(132px, auto);
  }
}

/* Card ------------------------------------------------------ */
.expandable-bento__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  min-width: 0;            /* grid safety */
  overflow: hidden;
  transition:
    grid-column-end var(--dur-3) var(--ease),
    grid-row-end var(--dur-3) var(--ease),
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease);
}
.expandable-bento__card:hover { border-color: var(--c-border-strong); }

/* Bento size variants — wide spans 2 cols, tall spans 2 rows */
.expandable-bento__card[data-bento-size="wide"] {
  grid-column: span 2;
}
.expandable-bento__card[data-bento-size="tall"] {
  grid-row: span 2;
}

/* Mobile/tablet: collapse bento sizes back to a single column */
@media (max-width: 1023px) {
  .expandable-bento__card[data-bento-size="wide"],
  .expandable-bento__card[data-bento-size="tall"] {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Card head (clickable summary) ----------------------------- */
.expandable-bento__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color var(--dur-2) var(--ease);
}
.expandable-bento__head:focus-visible {
  outline: 2px solid var(--c-blue-600);
  outline-offset: 2px;
}

.expandable-bento__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: var(--r-sm);
  background: var(--c-blue-50);
  color: var(--c-blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    width var(--dur-3) var(--ease),
    height var(--dur-3) var(--ease);
}
.expandable-bento__icon svg {
  width: 24px;
  height: 24px;
}

.expandable-bento__title {
  display: block;
  min-width: 0;
  color: var(--c-blue-800);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}
.expandable-bento__title h3 {
  margin: 0;
  font: inherit;
  color: inherit;
}

.expandable-bento__hint {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: var(--c-blue-50);
  color: var(--c-blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform var(--dur-3) var(--ease),
    background-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease);
}
.expandable-bento__hint svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-3) var(--ease);
}

/* Panel (expanded content) ---------------------------------- */
.expandable-bento__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--dur-3) var(--ease),
    opacity var(--dur-3) var(--ease);
}
.expandable-bento__panel-inner {
  overflow: hidden;
  min-height: 0;
}
.expandable-bento__desc {
  margin: 0;
  padding-top: var(--sp-3);
  color: var(--c-fg-soft);
  font-size: var(--fs-15);
  line-height: 1.6;
}
.expandable-bento__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-4);
}

.expandable-bento__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  background: var(--c-blue-600);
  color: #fff;
  font-size: var(--fs-14);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--c-blue-600);
  transition:
    background-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}
.expandable-bento__link:hover,
.expandable-bento__link:focus-visible {
  background: var(--c-magenta-500);
  border-color: var(--c-magenta-500);
  color: #fff;
}
.expandable-bento__link svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

/* Close button — hidden until the card is open -------------- */
.expandable-bento__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-blue-50);
  color: var(--c-blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease);
}
.expandable-bento__close:hover,
.expandable-bento__close:focus-visible {
  background: var(--c-blue-600);
  color: #fff;
}
.expandable-bento__close svg {
  width: 14px;
  height: 14px;
}

/* OPEN state ------------------------------------------------ */
.expandable-bento__card.is-open {
  border-color: var(--c-blue-300);
  background: linear-gradient(180deg, #fff 0%, var(--c-bg-blue) 100%);
  box-shadow: var(--sh-2);
}

.expandable-bento__card.is-open .expandable-bento__panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.expandable-bento__card.is-open .expandable-bento__close {
  opacity: 1;
  pointer-events: auto;
}

.expandable-bento__card.is-open .expandable-bento__hint {
  background: var(--c-blue-600);
  color: #fff;
  transform: rotate(90deg);
}

.expandable-bento__card.is-open .expandable-bento__head {
  cursor: default;
}

/* When open, hide the inline chevron — the floating close button takes over */
.expandable-bento__card.is-open .expandable-bento__head .expandable-bento__hint {
  opacity: 0;
  pointer-events: none;
}

/* Expanded card spans more grid area on desktop ------------- */
@media (min-width: 1024px) {
  .expandable-bento__card.is-open {
    grid-column: span 2;
    grid-row: span 2;
  }
  /* When open on desktop, the icon scales up a touch */
  .expandable-bento__card.is-open .expandable-bento__icon {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }
  .expandable-bento__card.is-open .expandable-bento__icon svg {
    width: 28px;
    height: 28px;
  }
  .expandable-bento__card.is-open .expandable-bento__title {
    font-size: var(--fs-20);
  }
}

@media (max-width: 1023px) and (min-width: 601px) {
  /* Tablet: open card spans the full 2-col row */
  .expandable-bento__card.is-open {
    grid-column: span 2;
  }
}

/* When a card is open, dim the other cards in the same grid */
.expandable-bento.has-open > .expandable-bento__card:not(.is-open) {
  opacity: 0.55;
}
.expandable-bento.has-open > .expandable-bento__card:not(.is-open):hover,
.expandable-bento.has-open > .expandable-bento__card:not(.is-open):focus-within {
  opacity: 1;
}

/* Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .expandable-bento,
  .expandable-bento__card,
  .expandable-bento__head,
  .expandable-bento__icon,
  .expandable-bento__hint,
  .expandable-bento__panel,
  .expandable-bento__close,
  .expandable-bento__link {
    transition: none !important;
  }
}

/* =====================================================================
   Gallery — CSS sticky image stacking (NPC native)
   ---------------------------------------------------------------------
   Implemented with native CSS sticky positioning + scoped classes.
   No JS required for the core effect. No external libraries.
   Hero sticks once, then 8 progressively wider images stack on top of
   each other as the user scrolls. Works on file:// without a server.
   ===================================================================== */

.gallery-stack { background: var(--c-blue-900); color: #fff; position: relative; }

/* ----- Intro / hero ----- */
/* The wrapper provides exactly one viewport of "scroll room" so the
   sticky intro releases after one viewport instead of staying pinned
   for the whole page (matches the React reference's wrapper div). */
.gallery-stack__intro-wrap {
  height: 100vh;
  height: 100svh;
  width: 100%;
  position: relative;
}
.gallery-stack__intro {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  z-index: 5;
  display: grid;
  place-content: center;
  text-align: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(26,58,138,0.6) 0%, transparent 70%),
    linear-gradient(180deg, var(--c-blue-800) 0%, var(--c-blue-900) 100%);
  overflow: hidden;
  padding-inline: var(--sp-5);
}
.gallery-stack__intro-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%);
  pointer-events: none;
}
.gallery-stack__intro-inner {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-5);
}
.gallery-stack__intro .eyebrow {
  color: #ffacd6;
  margin-bottom: var(--sp-3);
}
.gallery-stack__intro h1 {
  color: #fff;
  font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}
@supports (text-wrap: balance) {
  .gallery-stack__intro h1 { text-wrap: balance; }
}
.gallery-stack__intro p {
  color: #c9d3ee;
  font-size: clamp(1rem, 0.6vw + 0.85rem, 1.25rem);
  line-height: 1.5;
  max-width: 56ch;
  margin: var(--sp-4) auto 0;
}
.gallery-stack__intro-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--sp-5);
  font-size: var(--fs-13);
  color: #c9d3ee;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gallery-stack__intro-cue svg {
  width: 14px;
  height: 14px;
  animation: gallery-stack-bob 1.8s ease-in-out infinite;
}
@keyframes gallery-stack-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* ----- Stacking image track ----- */
.gallery-stack__track {
  position: relative;
  width: 100%;
  background: var(--c-blue-900);
}

.gallery-stack__item {
  position: sticky;
  top: var(--stack-top, 0rem);
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--stack-z, 1);
  /* Hint to compositor for the sticky layer. Browsers ignore if unsupported. */
  will-change: transform;
}
.gallery-stack__figure {
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sp-4);
}
.gallery-stack__image {
  width: var(--stack-w, 60%);
  height: var(--stack-h, 80%);
  max-width: min(1200px, 96vw);
  object-fit: cover;
  object-position: center;
  border-radius: var(--r-md);
  background: var(--c-blue-800);
  box-shadow:
    0 -6px 18px 4px rgba(0,0,0,0.55),
    0 2px 4px -1px rgba(0,0,0,0.06);
  transition: transform var(--dur-3) var(--ease), filter var(--dur-3) var(--ease);
}
.gallery-stack__caption {
  position: absolute;
  left: 50%;
  bottom: var(--sp-5);
  transform: translateX(-50%);
  z-index: 2;
  font-size: var(--fs-13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c9d3ee;
  background: rgba(8,22,58,0.55);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

/* ----- Progressive visual scale (8 frames) ----- */
.gallery-stack__item:nth-child(1) { --stack-top: 0rem;  --stack-w: 45%; --stack-h: 78%; --stack-z: 1; }
.gallery-stack__item:nth-child(2) { --stack-top: 0.5rem;--stack-w: 55%; --stack-h: 80%; --stack-z: 2; }
.gallery-stack__item:nth-child(3) { --stack-top: 1rem;  --stack-w: 64%; --stack-h: 82%; --stack-z: 3; }
.gallery-stack__item:nth-child(4) { --stack-top: 1.5rem;--stack-w: 72%; --stack-h: 84%; --stack-z: 4; }
.gallery-stack__item:nth-child(5) { --stack-top: 2rem;  --stack-w: 79%; --stack-h: 86%; --stack-z: 5; }
.gallery-stack__item:nth-child(6) { --stack-top: 2.5rem;--stack-w: 84%; --stack-h: 88%; --stack-z: 6; }
.gallery-stack__item:nth-child(7) { --stack-top: 3rem;  --stack-w: 88%; --stack-h: 90%; --stack-z: 7; }
.gallery-stack__item:nth-child(8) { --stack-top: 3.5rem;--stack-w: 91%; --stack-h: 92%; --stack-z: 8; }

/* ----- Closing flourish (small, not a second footer) ----- */
.gallery-stack__outro {
  position: relative;
  z-index: 9;
  padding: var(--sp-8) var(--sp-5);
  background: linear-gradient(180deg, rgba(8,22,58,0) 0%, var(--c-blue-900) 100%);
  text-align: center;
}
.gallery-stack__outro p {
  color: #c9d3ee;
  font-size: var(--fs-16);
  max-width: 52ch;
  margin: 0 auto;
}
.gallery-stack__outro a {
  color: #ffacd6;
  font-weight: 600;
}

/* ----- Responsive behaviour ----- */
@media (max-width: 1024px) {
  .gallery-stack__item:nth-child(1) { --stack-top: 0rem;   --stack-w: 60%; --stack-h: 70%; }
  .gallery-stack__item:nth-child(2) { --stack-top: 0.25rem;--stack-w: 66%; --stack-h: 72%; }
  .gallery-stack__item:nth-child(3) { --stack-top: 0.5rem; --stack-w: 72%; --stack-h: 74%; }
  .gallery-stack__item:nth-child(4) { --stack-top: 0.75rem;--stack-w: 78%; --stack-h: 76%; }
  .gallery-stack__item:nth-child(5) { --stack-top: 1rem;   --stack-w: 82%; --stack-h: 78%; }
  .gallery-stack__item:nth-child(6) { --stack-top: 1.25rem;--stack-w: 86%; --stack-h: 80%; }
  .gallery-stack__item:nth-child(7) { --stack-top: 1.5rem; --stack-w: 90%; --stack-h: 82%; }
  .gallery-stack__item:nth-child(8) { --stack-top: 1.75rem;--stack-w: 92%; --stack-h: 84%; }
  .gallery-stack__image { border-radius: 10px; }
  .gallery-stack__caption { font-size: 11px; padding: 5px 10px; }
}

@media (max-width: 600px) {
  .gallery-stack__intro { padding-inline: var(--sp-4); }
  .gallery-stack__intro h1 { font-size: clamp(1.75rem, 8vw, 2.4rem); }
  .gallery-stack__intro p { font-size: var(--fs-15); }
  .gallery-stack__intro-cue { display: none; }
  .gallery-stack__figure { padding: 0 var(--sp-3); }
  .gallery-stack__item:nth-child(1) { --stack-top: 0rem;    --stack-w: 84%; --stack-h: 60%; }
  .gallery-stack__item:nth-child(2) { --stack-top: 0.25rem; --stack-w: 88%; --stack-h: 62%; }
  .gallery-stack__item:nth-child(3) { --stack-top: 0.5rem;  --stack-w: 91%; --stack-h: 64%; }
  .gallery-stack__item:nth-child(4) { --stack-top: 0.75rem; --stack-w: 93%; --stack-h: 66%; }
  .gallery-stack__item:nth-child(5) { --stack-top: 1rem;    --stack-w: 95%; --stack-h: 68%; }
  .gallery-stack__item:nth-child(6) { --stack-top: 1.25rem; --stack-w: 96%; --stack-h: 70%; }
  .gallery-stack__item:nth-child(7) { --stack-top: 1.5rem;  --stack-w: 97%; --stack-h: 72%; }
  .gallery-stack__item:nth-child(8) { --stack-top: 1.75rem; --stack-w: 98%; --stack-h: 74%; }
  .gallery-stack__image { border-radius: 8px; box-shadow: 0 -4px 14px 3px rgba(0,0,0,0.55); }
}

/* ----- Reduced motion: drop non-essential motion, keep stacking ----- */
@media (prefers-reduced-motion: reduce) {
  .gallery-stack__intro-cue svg { animation: none; }
  .gallery-stack__image { transition: none; }
}

/* =====================================================================
   NPC — YouTube video sections (homepage + gallery)
   ---------------------------------------------------------------------
   Additive components. Use only existing NPC tokens. No decorative
   gradients, no italic display fonts. Restrained radii. Minimal shadows.
   The YouTube iframe itself carries the media; the chrome here is
   intentionally quiet so the video still feels native to the site.
   ===================================================================== */

/* ----- 1. Homepage video section ----- */
.npc-video-section {
  background: var(--c-bg);
  padding-block: var(--sp-8);
}
.npc-video-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.npc-video-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-7);
}
.npc-video-heading .eyebrow { margin-bottom: var(--sp-3); }
.npc-video-heading h2 { margin-bottom: var(--sp-3); }
.npc-video-heading p { color: var(--c-fg-soft); }

/* Portrait-oriented player frame for the YouTube Short. The aspect-ratio
   keeps the video looking like a Short on every viewport. */
.npc-video-player {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
  border: 1px solid var(--c-border);
}
.npc-video-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Poster image (YouTube thumbnail) + overlay link for graceful fallback.
   Poster itself is clickable; on click we mount an <iframe> inside the
   same .npc-video-player so the video plays inside the page rather
   than opening a new tab. */
.npc-video-player__poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  cursor: pointer;
  border: 0;
  padding: 0;
  display: block;
}
.npc-video-player__poster:focus-visible { outline: 3px solid var(--c-magenta-500); outline-offset: -4px; }
.npc-video-player__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.85;
}
.npc-video-player__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  color: #fff;
  background: rgba(0,0,0,0.45);
  border-radius: 50%;
  padding: 18px;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.npc-video-player__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.45) 100%);
  transition: background var(--dur-2) ease;
  pointer-events: none;
}
.npc-video-player__poster:hover .npc-video-player__overlay,
.npc-video-player__poster:focus-visible .npc-video-player__overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.6) 100%);
}
.npc-video-player__overlay svg {
  width: 56px; height: 56px; color: #fff;
  background: var(--c-magenta-500);
  border-radius: 50%;
  padding: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
  transition: transform var(--dur-2) ease;
}
.npc-video-player__poster:hover .npc-video-player__overlay svg,
.npc-video-player__poster:focus-visible .npc-video-player__overlay svg {
  transform: scale(1.08);
}
.npc-video-player__overlay-label {
  font-weight: 600;
  font-size: var(--fs-15);
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
.npc-video-player__overlay-hint {
  font-size: var(--fs-12);
  opacity: 0.85;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
/* "Open in youtube.com" fallback link shown when the poster button can't be reached. */
.npc-video-player__watch-fallback {
  display: inline-block;
  margin-top: 10px;
  color: var(--c-magenta-200);
  font-size: var(--fs-12);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-align: center;
}
.npc-video-player__watch-fallback:hover,
.npc-video-player__watch-fallback:focus-visible {
  color: #fff;
}

@media (min-width: 768px) {
  .npc-video-player { max-width: 380px; }
}
@media (min-width: 1024px) {
  .npc-video-player { max-width: 420px; }
}

/* ----- 2. Gallery video section ----- */
.gallery-videos-section {
  background: var(--c-blue-900);
  color: #fff;
  padding-block: var(--sp-9);
  position: relative;
}
.gallery-videos-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.gallery-videos-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-7);
}
.gallery-videos-heading .eyebrow {
  color: var(--c-magenta-300);
  margin-bottom: var(--sp-3);
}
.gallery-videos-heading h2 {
  color: #fff;
  margin-bottom: var(--sp-3);
}
.gallery-videos-heading p { color: #c9d3ee; }

.gallery-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-5);
}
@media (max-width: 600px) {
  .gallery-video-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* Single video card — thumbnail-first, click-to-load iframe. */
.gallery-video-card {
  background: var(--c-blue-800);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.gallery-video-card:hover,
.gallery-video-card:focus-within {
  border-color: rgba(255, 172, 214, 0.55);
  transform: translateY(-2px);
  box-shadow: var(--sh-3);
}

.gallery-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
  overflow: hidden;
}
.gallery-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Thumbnail surface — covers the frame until the user clicks play.
   Uses <button> so keyboard activation works out of the box. */
.gallery-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;
}
.gallery-video-play img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-3) var(--ease), filter var(--dur-2) var(--ease);
}
.gallery-video-play:hover img,
.gallery-video-play:focus-visible img {
  transform: scale(1.02);
  filter: brightness(0.78);
}
/* Dim layer so the play badge reads on any thumbnail. */
.gallery-video-play::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,22,58,0.05) 0%, rgba(8,22,58,0.45) 100%);
  pointer-events: none;
}
.gallery-video-play-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-magenta-500);
  color: #fff;
  box-shadow: 0 6px 18px rgba(200, 16, 124, 0.40);
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.gallery-video-play:hover .gallery-video-play-badge,
.gallery-video-play:focus-visible .gallery-video-play-badge {
  background: var(--c-magenta-600);
  transform: scale(1.06);
}
.gallery-video-play-badge svg { width: 28px; height: 28px; }

.gallery-video-meta {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
}
.gallery-video-meta h3 {
  color: #fff;
  font-size: var(--fs-18);
  margin: 0;
  line-height: var(--lh-snug);
}
.gallery-video-meta p {
  color: #c9d3ee;
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  margin: 0;
}

/* After click — when iframe has loaded we hide the thumbnail button. */
.gallery-video-card.is-playing .gallery-video-play { display: none; }

@media (prefers-reduced-motion: reduce) {
  .gallery-video-card,
  .gallery-video-play img,
  .gallery-video-play-badge { transition: none; }
}

/* ----- 3. Gallery YouTube channel CTA ----- */
.gallery-videos-cta {
  margin-top: var(--sp-7);
  display: flex;
  justify-content: center;
}
.gallery-videos-cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-lg);
  color: #fff;
  text-decoration: none;
  transition: background var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease);
}
.gallery-videos-cta-link:hover,
.gallery-videos-cta-link:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 172, 214, 0.55);
  transform: translateY(-2px);
}
.gallery-videos-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #0d2156;
  flex: 0 0 auto;
}
.gallery-videos-cta-icon svg { width: 28px; height: 28px; display: block; }
.gallery-videos-cta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 600;
  line-height: 1.25;
}
.gallery-videos-cta-sub {
  font-size: var(--fs-14);
  font-weight: 400;
  color: #c9d3ee;
}
.gallery-videos-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--c-magenta-300);
  flex: 0 0 auto;
}
.gallery-videos-cta-arrow svg { width: 20px; height: 20px; }
@media (max-width: 480px) {
  .gallery-videos-cta-link {
    flex-wrap: wrap;
    padding: var(--sp-4);
    gap: var(--sp-3);
  }
}

/* =====================================================================
   NPC — Homepage Redesign (Major Structural Change)
   ---------------------------------------------------------------------
   New sections:
     1. NPC Identity / Top header
     2. Welcome to National Project Centre
     4. Quick Enquiry popup (shared by Services + Download + bottom form)
     6. Why Choose Us
     7. See What We Do / Gallery (homepage variant of /gallery/)
     8. Genuine Google Reviews
     9. FAQ (uses the supplied document)
    10. Bottom Enquiry Form
    11. Footer Quick Links heading
   Existing sections preserved: Hero, Services cards (re-pointed to the
   Quick Enquiry popup), By the Numbers, Footer.
   All values use NPC tokens. No new shadows, gradients or fonts.
   ===================================================================== */

/* ----- 1. NPC IDENTITY (top header strip) ---------------------------- */
.npc-identity {
  background:
    linear-gradient(180deg, var(--c-blue-900) 0%, var(--c-blue-800) 100%);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.npc-identity__inner {
  width: 100%;
  max-width: var(--container, 1200px);
  margin-inline: auto;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.npc-identity__title-row {
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.npc-identity__eyebrow {
  font-size: var(--fs-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-magenta-200);
  font-weight: 600;
}
.npc-identity__title {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
  font-weight: 700;
  margin: 0;
}
.npc-identity__founded {
  margin: 0;
  font-size: var(--fs-13);
  color: #c9d3ee;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.npc-identity__founded svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.npc-identity__founded strong { color: #fff; font-weight: 700; letter-spacing: 0; text-transform: none; }
.npc-identity__list {
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
.npc-identity__item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}
.npc-identity__icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  flex: 0 0 32px;
}
.npc-identity__icon svg { width: 16px; height: 16px; }
.npc-identity__label {
  font-size: var(--fs-12);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-magenta-200);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}
.npc-identity__value {
  font-size: var(--fs-14);
  color: #e6ecfb;
  line-height: 1.45;
  word-break: break-word;
}
.npc-identity__value a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  transition: border-color var(--dur-2) ease;
}
.npc-identity__value a:hover,
.npc-identity__value a:focus-visible {
  border-bottom-color: var(--c-magenta-200);
}
.npc-identity__founder {
  font-weight: 600;
  color: #fff;
}

.npc-identity__contact-block {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.npc-identity__contact-line {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-14);
  color: #e6ecfb;
}
.npc-identity__contact-line svg { width: 18px; height: 18px; color: var(--c-magenta-200); flex: 0 0 18px; }
.npc-identity__contact-line a { color: #fff; text-decoration: none; }
.npc-identity__contact-line a:hover { text-decoration: underline; }

.npc-identity__social-label {
  margin-top: var(--sp-3);
  font-size: var(--fs-12);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-magenta-200);
  font-weight: 600;
}
.npc-identity__social {
  list-style: none;
  padding: 0;
  margin: var(--sp-2) 0 0;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.npc-identity__social a {
  --sz: 36px;
  width: var(--sz); height: var(--sz);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  transition: background var(--dur-2) ease, color var(--dur-2) ease, transform var(--dur-2) ease;
}
.npc-identity__social a:hover,
.npc-identity__social a:focus-visible {
  background: var(--c-magenta-500);
  color: #fff;
  transform: translateY(-2px);
}
.npc-identity__social a svg { width: 16px; height: 16px; }

@media (max-width: 880px) {
  .npc-identity__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
  .npc-identity__title { font-size: clamp(1.35rem, 4vw + 0.5rem, 1.85rem); }
}
@media (max-width: 480px) {
  .npc-identity__inner { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
  .npc-identity__list { gap: var(--sp-2); }
  .npc-identity__item { grid-template-columns: 28px minmax(0, 1fr); gap: var(--sp-2); }
  .npc-identity__icon { width: 28px; height: 28px; flex-basis: 28px; }
  .npc-identity__contact-block { padding: var(--sp-4); }
}

/* ----- 2. WELCOME ----------------------------------------------------- */
.npc-welcome {
  background: linear-gradient(180deg, #fff 0%, var(--c-bg-soft) 100%);
  padding-block: var(--sp-8);
  border-bottom: 1px solid var(--c-border);
}
.npc-welcome__inner {
  width: 100%;
  max-width: var(--container, 1200px);
  margin-inline: auto;
  padding-inline: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.npc-welcome__heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-align: center;
  align-items: center;
}
.npc-welcome__heading .eyebrow {
  font-size: var(--fs-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-magenta-500);
  font-weight: 600;
}
.npc-welcome__heading h2 {
  font-size: clamp(1.65rem, 1.5vw + 1.1rem, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--c-blue-800);
  margin: 0;
}
@supports (text-wrap: balance) {
  .npc-welcome__heading h2 { text-wrap: balance; }
}
.npc-welcome__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.npc-welcome__body {
  background: var(--c-blue-800);
  border: 1px solid var(--c-blue-700);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--sh-2);
  position: relative;
  color: #fff;
}
.npc-welcome__body p {
  font-size: var(--fs-16);
  line-height: 1.7;
  color: #fff;
  margin: 0;
}
.npc-welcome__achievements {
  list-style: none;
  padding: var(--sp-5);
  margin: 0;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.npc-welcome__achievements li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-15);
  line-height: 1.5;
  color: var(--c-fg);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-border);
}
.npc-welcome__achievements li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.npc-welcome__achievements li:first-child {
  padding-top: 0;
}
.npc-welcome__achievements svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: var(--c-magenta-500);
  margin-top: 2px;
}
.npc-welcome__achievements span {
  display: block;
}
@media (max-width: 880px) {
  .npc-welcome__inner { gap: var(--sp-5); }
  .npc-welcome__cols {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
  .npc-welcome__body { padding: var(--sp-4); }
  .npc-welcome__achievements { padding: var(--sp-4); }
}

/* ----- 4. QUICK ENQUIRY POPUP --------------------------------------- */
/* Built on top of the existing .npc-modal classes. The popup is a single
   shared component reused by the Services cards, the Download Recent
   Titles buttons, and the bottom enquiry form. */
.npc-modal[data-qe] .npc-modal__title { font-size: var(--fs-20); }
.npc-modal[data-qe] .npc-modal__sub { font-size: var(--fs-13); }

.npc-qe-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-blue-700);
  background: var(--c-bg-blue);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  margin-bottom: var(--sp-3);
}
.npc-qe-pill svg { width: 14px; height: 14px; }

.npc-qe-context {
  display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(135deg, var(--c-bg-blue) 0%, #fff 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.npc-qe-context__label {
  font-size: var(--fs-12);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-fg-mute);
  font-weight: 600;
}
.npc-qe-context__value {
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--c-blue-800);
}

.npc-qe-success {
  display: none;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #14532d;
  border-radius: var(--r-md);
  padding: var(--sp-4);
  font-size: var(--fs-14);
  line-height: 1.5;
  margin-top: var(--sp-3);
}
.npc-qe-success.is-visible { display: block; }
.npc-qe-success strong { display: block; margin-bottom: 4px; font-size: var(--fs-15); }

@media (prefers-reduced-motion: reduce) {
  .npc-modal[data-qe] .npc-modal__dialog { transition: none; }
}

/* ----- 5. WHY CHOOSE US --------------------------------------------- */
.npc-why {
  background: linear-gradient(180deg, var(--c-blue-900) 0%, var(--c-blue-800) 100%);
  color: #fff;
  padding-block: var(--sp-9);
  position: relative;
  overflow: hidden;
}
.npc-why::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 82% 80%, rgba(200, 16, 124, 0.18) 0%, transparent 45%);
  pointer-events: none;
}
.npc-why__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container, 1200px);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.npc-why__head { max-width: 720px; margin-inline: auto; text-align: center; }
.npc-why__head .eyebrow {
  color: var(--c-magenta-200);
  font-size: var(--fs-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--sp-3);
  display: inline-block;
}
.npc-why__head h2 {
  color: #fff;
  font-size: clamp(1.75rem, 1.4vw + 1.2rem, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-3);
}
@supports (text-wrap: balance) {
  .npc-why__head h2 { text-wrap: balance; }
}
.npc-why__head p {
  color: #c9d3ee;
  font-size: var(--fs-18);
  margin: 0;
  max-width: 60ch;
  margin-inline: auto;
}
.npc-why__body {
  margin-top: var(--sp-7);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: center;
}
.npc-why__copy {
  font-size: var(--fs-18);
  line-height: 1.7;
  color: #e6ecfb;
  margin: 0;
}
.npc-why__copy strong { color: #fff; font-weight: 600; }

.npc-why__pillars {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.npc-why__pillar {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: background var(--dur-2) ease, transform var(--dur-2) ease;
}
.npc-why__pillar:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}
.npc-why__pillar-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-magenta-500) 0%, var(--c-magenta-600) 100%);
  color: #fff;
}
.npc-why__pillar-icon svg { width: 22px; height: 22px; }
.npc-why__pillar h3 {
  color: #fff;
  font-size: var(--fs-16);
  font-weight: 600;
  margin: 0;
}
.npc-why__pillar p {
  color: #c9d3ee;
  font-size: var(--fs-14);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 880px) {
  .npc-why__body { grid-template-columns: 1fr; gap: var(--sp-5); }
  .npc-why__pillars { grid-template-columns: 1fr; }
}

/* ----- Why Choose Us: six-point list (replaces the old pillar grid) ----- */
.npc-why__points {
  list-style: none;
  padding: 0;
  margin: var(--sp-7) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-5);
}
@media (max-width: 880px) {
  .npc-why__points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .npc-why__points { grid-template-columns: minmax(0, 1fr); }
}

.npc-why__point {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  transition: background var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
.npc-why__point:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(200, 16, 124, 0.45);
}

.npc-why__point-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-magenta-500) 0%, var(--c-magenta-600) 100%);
  color: #ffffff;
  flex: 0 0 38px;
}
.npc-why__point-icon svg { width: 20px; height: 20px; }

.npc-why__point-label {
  font-size: var(--fs-15);
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
}

/* Hide the leftover two-column body grid layout — the new point grid
   owns the section body now. */
.npc-why__body { display: none; }

/* ----- 7. SEE WHAT WE DO / GALLERY (homepage variant) ----------------- */
/* Reuses gallery-stack image source files and the sticky stacking CSS,
   but compressed: only 4 frames and at ~70vh so the homepage version
   does not dominate the page. */
.npc-seewhat {
  background: var(--c-blue-900);
  color: #fff;
  position: relative;
}
.npc-seewhat__intro {
  padding-block: var(--sp-8) var(--sp-6);
  text-align: center;
}
.npc-seewhat__intro-inner {
  width: 100%; max-width: var(--container, 1200px);
  margin-inline: auto; padding-inline: var(--sp-5);
}
.npc-seewhat__intro .eyebrow {
  color: var(--c-magenta-200);
  font-size: var(--fs-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  margin-bottom: var(--sp-3);
}
.npc-seewhat__intro h2 {
  color: #fff;
  font-size: clamp(1.75rem, 1.4vw + 1.2rem, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-3);
}
@supports (text-wrap: balance) {
  .npc-seewhat__intro h2 { text-wrap: balance; }
}
.npc-seewhat__intro p {
  color: #c9d3ee;
  font-size: var(--fs-18);
  margin: 0 auto;
  max-width: 60ch;
}
.npc-seewhat__track {
  position: relative;
  background: var(--c-blue-900);
}
.npc-seewhat__title {
  color: #fff;
  font-size: clamp(1.75rem, 1.4vw + 1.2rem, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0;
  padding: var(--sp-8) var(--sp-5) var(--sp-4);
  width: 100%;
  max-width: var(--container, 1200px);
  margin-inline: auto;
}
.npc-seewhat__track .gallery-stack__item {
  height: 70vh; height: 70svh;
}
.npc-seewhat__track .gallery-stack__item:nth-child(1) { --stack-top: 0rem;   --stack-w: 60%; --stack-h: 70%; --stack-z: 1; }
.npc-seewhat__track .gallery-stack__item:nth-child(2) { --stack-top: 0.4rem; --stack-w: 70%; --stack-h: 72%; --stack-z: 2; }
.npc-seewhat__track .gallery-stack__item:nth-child(3) { --stack-top: 0.8rem; --stack-w: 78%; --stack-h: 74%; --stack-z: 3; }
.npc-seewhat__track .gallery-stack__item:nth-child(4) { --stack-top: 1.2rem; --stack-w: 86%; --stack-h: 76%; --stack-z: 4; }

@media (max-width: 1024px) {
  .npc-seewhat__track .gallery-stack__item { height: 60vh; height: 60svh; }
  .npc-seewhat__track .gallery-stack__item:nth-child(1) { --stack-w: 70%; --stack-h: 64%; }
  .npc-seewhat__track .gallery-stack__item:nth-child(2) { --stack-w: 78%; --stack-h: 68%; }
  .npc-seewhat__track .gallery-stack__item:nth-child(3) { --stack-w: 86%; --stack-h: 72%; }
  .npc-seewhat__track .gallery-stack__item:nth-child(4) { --stack-w: 92%; --stack-h: 76%; }
}
@media (max-width: 600px) {
  .npc-seewhat__track .gallery-stack__item { height: 55vh; height: 55svh; }
  .npc-seewhat__track .gallery-stack__item:nth-child(1) { --stack-top: 0rem;    --stack-w: 86%; --stack-h: 56%; }
  .npc-seewhat__track .gallery-stack__item:nth-child(2) { --stack-top: 0.3rem;  --stack-w: 90%; --stack-h: 60%; }
  .npc-seewhat__track .gallery-stack__item:nth-child(3) { --stack-top: 0.6rem;  --stack-w: 94%; --stack-h: 64%; }
  .npc-seewhat__track .gallery-stack__item:nth-child(4) { --stack-top: 0.9rem;  --stack-w: 96%; --stack-h: 68%; }
}

.npc-seewhat__video {
  background: var(--c-blue-900);
  color: #fff;
  padding-block: var(--sp-8);
  text-align: center;
}
.npc-seewhat__video-inner {
  width: 100%; max-width: var(--container, 1200px);
  margin-inline: auto; padding-inline: var(--sp-5);
}
.npc-seewhat__video h3 {
  color: #fff;
  font-size: clamp(1.4rem, 1vw + 1rem, 1.85rem);
  margin: 0 0 var(--sp-3);
  letter-spacing: -0.01em;
}
.npc-seewhat__video p { color: #c9d3ee; max-width: 56ch; margin: 0 auto var(--sp-5); }
.npc-seewhat__video .npc-video-player { margin-inline: auto; }
.npc-seewhat__cta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-6);
  background: var(--c-magenta-500);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-16);
  padding: 14px 26px;
  border-radius: var(--r-pill);
  transition: background var(--dur-2) ease, transform var(--dur-2) ease;
}
.npc-seewhat__cta:hover, .npc-seewhat__cta:focus-visible {
  background: var(--c-magenta-600);
  transform: translateY(-2px);
}
.npc-seewhat__cta svg { width: 18px; height: 18px; }

/* ----- 8. GENUINE GOOGLE REVIEWS ------------------------------------- */
.npc-reviews {
  background: #fff;
  padding-block: var(--sp-9);
}
.npc-reviews__inner {
  width: 100%; max-width: var(--container, 1200px);
  margin-inline: auto; padding-inline: var(--sp-5);
}
.npc-reviews__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: var(--sp-7); }
.npc-reviews__head .eyebrow {
  color: var(--c-magenta-500);
  font-size: var(--fs-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--sp-3);
  display: inline-block;
}
.npc-reviews__head h2 {
  font-size: clamp(1.65rem, 1.4vw + 1.1rem, 2.3rem);
  color: var(--c-blue-800);
  line-height: 1.15;
  margin: 0 0 var(--sp-3);
  letter-spacing: -0.01em;
}
.npc-reviews__head p { color: var(--c-fg-soft); margin: 0; }
.npc-reviews__source {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-13);
  color: var(--c-fg-mute);
  margin-top: var(--sp-3);
}
.npc-reviews__source svg { width: 16px; height: 16px; }

.npc-reviews__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  align-items: stretch;
}
@media (max-width: 1180px) { .npc-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.npc-review {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--dur-2) ease, transform var(--dur-2) ease;
  /* keep the card compact; do not let one long review stretch every card */
  height: auto;
  min-height: 0;
  align-self: start;
}
.npc-review:hover {
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
.npc-review.is-placeholder { opacity: 0.95; }
.npc-review__badge {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--c-bg-blue);
  color: var(--c-blue-700);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.npc-review__badge svg { width: 12px; height: 12px; }
.npc-review__stars {
  display: inline-flex; align-items: center; gap: 2px;
  color: #f59f00;
}
.npc-review__stars svg { width: 16px; height: 16px; }
.npc-review__body {
  font-size: var(--fs-15);
  line-height: 1.55;
  color: var(--c-fg);
  margin: 0;
  /* No longer flex:1 — keeps the body to its natural height so a long
     review no longer forces every card to the same tall height. */
  flex: 0 0 auto;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.npc-review__body.is-full {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}
.npc-review__read-more {
  align-self: flex-start;
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: -2px;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--c-blue-600);
  cursor: pointer;
  letter-spacing: 0.01em;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.npc-review__read-more:hover,
.npc-review__read-more:focus-visible {
  color: var(--c-blue-800);
  border-bottom-color: var(--c-blue-600);
}
.npc-review__author {
  display: flex; align-items: center; gap: var(--sp-3);
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-3);
  margin-top: auto;
}
.npc-review__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-blue-600) 0%, var(--c-magenta-500) 100%);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-14);
  font-weight: 700;
  flex: 0 0 40px;
  overflow: hidden;
}
.npc-review__avatar.has-image { background: var(--c-bg-soft); color: var(--c-fg-mute); }
.npc-review__avatar img { width: 100%; height: 100%; object-fit: cover; }
.npc-review__avatar svg { width: 20px; height: 20px; }
.npc-review__author-meta { display: flex; flex-direction: column; }
.npc-review__author-name {
  font-weight: 600;
  font-size: var(--fs-14);
  color: var(--c-blue-800);
}
.npc-review__author-time {
  font-size: var(--fs-12);
  color: var(--c-fg-mute);
}
.npc-review__source-link {
  display: inline-block;
  margin-top: var(--sp-4);
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--c-blue-600);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.npc-review__source-link:hover,
.npc-review__source-link:focus-visible {
  color: var(--c-blue-800);
  border-bottom-color: var(--c-blue-600);
}

/* ----- Review "Read more" modal ----------------------------------
   Reuses the global .npc-modal scaffold but with a slightly wider,
   reading-friendly dialog and a quote-styled body. */
.npc-modal--review .npc-review-modal__dialog {
  max-width: min(640px, 100%);
  border-radius: var(--r-lg);
}
.npc-modal--review .npc-review-modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
}
.npc-review-modal__rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #f59f00;
}
.npc-review-modal__rating svg { width: 18px; height: 18px; }
.npc-review-modal__quote {
  margin: 0;
  font-size: var(--fs-15);
  line-height: 1.7;
  color: var(--c-fg);
  white-space: pre-line;
  border-left: 3px solid var(--c-blue-600);
  padding: 6px 0 6px var(--sp-4);
}
.npc-review-modal__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
}
.npc-review-modal__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--c-bg-blue);
  color: var(--c-blue-700);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.npc-review-modal__badge svg { width: 12px; height: 12px; }
.npc-review-modal__name {
  font-weight: 600;
  font-size: var(--fs-14);
  color: var(--c-blue-800);
}
@media (max-width: 600px) {
  .npc-modal--review .npc-review-modal__dialog { border-radius: 0; }
  .npc-modal--review .npc-review-modal__body { padding: var(--sp-4); }
}

.npc-reviews__attribution {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: center;
  margin-top: var(--sp-6);
  font-size: var(--fs-13);
  color: var(--c-fg-mute);
}
.npc-reviews__attribution svg { width: 16px; height: 16px; color: var(--c-fg-mute); }
.npc-reviews__attribution a {
  color: var(--c-blue-600); text-decoration: none; border-bottom: 1px solid var(--c-border);
}
.npc-reviews__attribution a:hover { border-bottom-color: var(--c-blue-600); }

.npc-reviews__empty {
  text-align: center;
  font-size: var(--fs-14);
  color: var(--c-fg-mute);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-top: var(--sp-3);
}

@media (max-width: 880px) {
  .npc-reviews__grid { grid-template-columns: 1fr; }
}

/* ----- 9. FAQ (uses supplied document) ------------------------------- */
/* Reuses existing .faq <details>/<summary> styling for visual continuity
   but restructures groups around the document's three sections. */
.npc-faq__head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: var(--sp-7); }
.npc-faq__head .eyebrow {
  color: var(--c-magenta-500);
  font-size: var(--fs-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--sp-3);
  display: inline-block;
}
.npc-faq__head h2 {
  font-size: clamp(1.65rem, 1.4vw + 1.1rem, 2.3rem);
  color: var(--c-blue-800);
  line-height: 1.15;
  margin: 0 0 var(--sp-3);
  letter-spacing: -0.01em;
}
.npc-faq__head p { color: var(--c-fg-soft); margin: 0; }
.npc-faq__group + .npc-faq__group { margin-top: var(--sp-6); }
.npc-faq__group h3 {
  font-size: var(--fs-18);
  font-weight: 600;
  color: var(--c-blue-800);
  margin: 0 0 var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-2);
}
.npc-faq__group h3::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--c-blue-600) 0%, var(--c-magenta-500) 100%);
}
.npc-faq .details-faq,
.npc-faq details {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
  overflow: hidden;
  transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.npc-faq details[open] {
  border-color: var(--c-blue-600);
  box-shadow: var(--sh-1);
}
.npc-faq details summary {
  cursor: pointer;
  padding: var(--sp-4) var(--sp-5);
  font-weight: 600;
  color: var(--c-blue-800);
  list-style: none;
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.npc-faq details summary::-webkit-details-marker { display: none; }
.npc-faq details summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-bg-blue);
  color: var(--c-blue-700);
  font-size: var(--fs-18);
  font-weight: 600;
  line-height: 1;
  transition: transform var(--dur-2) ease, background var(--dur-2) ease;
}
.npc-faq details[open] summary::after {
  content: "−";
  background: var(--c-blue-600);
  color: #fff;
}
.npc-faq details > p,
.npc-faq details > div {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--c-fg);
  font-size: var(--fs-15);
  line-height: 1.6;
  margin: 0;
}

/* ----- 10. BOTTOM ENQUIRY FORM -------------------------------------- */
.npc-enquiry {
  background: linear-gradient(180deg, var(--c-bg-soft) 0%, #fff 100%);
  padding-block: var(--sp-9);
  border-top: 1px solid var(--c-border);
}
.npc-enquiry__inner {
  width: 100%; max-width: 1080px;
  margin-inline: auto; padding-inline: var(--sp-5);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
}
/* Desktop column order: LEFT = enquiry form, RIGHT = Call / WhatsApp / Email cards. */
.npc-enquiry__form-card { order: 1; }
.npc-enquiry__intro     { order: 2; }
.npc-enquiry__intro .eyebrow {
  color: var(--c-magenta-500);
  font-size: var(--fs-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--sp-3);
  display: inline-block;
}
.npc-enquiry__intro h2 {
  font-size: clamp(1.65rem, 1.4vw + 1.1rem, 2.3rem);
  color: var(--c-blue-800);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-3);
}
.npc-enquiry__intro p { color: var(--c-fg-soft); margin: 0 0 var(--sp-4); max-width: 50ch; }
.npc-enquiry__channels {
  list-style: none;
  padding: 0;
  margin: var(--sp-4) 0 0;
  display: grid;
  gap: var(--sp-3);
}
.npc-enquiry__channels li {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-14);
  color: var(--c-fg);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: #fff;
}
.npc-enquiry__channels svg { width: 18px; height: 18px; color: var(--c-blue-600); flex: 0 0 18px; }
.npc-enquiry__channels a { color: var(--c-blue-600); text-decoration: none; font-weight: 600; }
.npc-enquiry__channels a:hover { text-decoration: underline; }

.npc-enquiry__form-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--sh-2);
}
.npc-enquiry__form-card .form-row { gap: var(--sp-3); }

@media (max-width: 880px) {
  .npc-enquiry__inner { grid-template-columns: 1fr; gap: var(--sp-5); }
  .npc-enquiry__form-card { padding: var(--sp-4); }
}

/* ----- 11. FOOTER QUICK LINKS heading ------------------------------- */
/* Quick Links heading — dark blue, sentence case, with a thin magenta rule
   sitting directly under it. The rule is sized to the text so the column
   doesn't pick up an unnecessary full-width line. */
.footer-min__nav-label {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--c-blue-800);
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--c-magenta-400);
  display: inline-block;
  line-height: 1.25;
  white-space: nowrap;
}

/* Follow Us heading mirrors Quick Links so the two footer columns read as
   the same hierarchy. The same magenta rule sits below the heading. */
.footer-min__follow-label {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--c-blue-800);
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--c-magenta-400);
  display: inline-block;
  line-height: 1.25;
  white-space: nowrap;
}

/* Follow Us wrapper — sits as the 4th column in .footer-min on desktop and
   on its own row in the 2x2 / 1-column responsive collapses below. */
.footer-min__follow {
  align-self: start;
  padding-top: clamp(2px, 0.4vw, 6px);
  text-align: left;
}

/* Address block rendered inside the left brand column. */
.footer-min__address {
  margin-top: 8px;
  font-style: normal;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.45;
  color: var(--c-fg-soft);
  max-width: 32ch;
}

/* ----- Misc utilities used by new sections --------------------------- */
.npc-qe-trigger {
  cursor: pointer;
  text-decoration: none;
}
.npc-qe-trigger.is-button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
}