/* =====================================================================
   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); }
/* Body copy: justify regular paragraphs inside page content. :where()
   keeps specificity at a bare "p", so any component rule that sets its
   own alignment still wins. Cards, centred section intros and other UI
   text inherit their container's alignment as before. A paragraph's
   last line stays left-aligned, so one-line text is unaffected. */
:where(main) p { text-align: justify; text-justify: inter-word; }
/* Narrow columns: allow automatic hyphenation at line ends so justified
   lines don't open wide gaps between words. Display-only; text unchanged. */
@media (max-width: 600px) {
  :where(main) p { -webkit-hyphens: auto; hyphens: auto; }
}
:where(main) :where(.card, .blog-card, .process-step, .service-info-card,
  .about-why__card, .npc-review, .enquire-step, .job-card, .wwd-grid__card,
  .gallery-video-meta, .section-head, .text-center, .npc-why__head,
  .jp-wrap, .cape-hero, .cta-banner, .gallery-lightbox, form, figcaption,
  td, th, li) p { text-align: inherit; }
/* Editor-chosen alignment in blog posts (Quill's ql-align-* classes, kept
   by the blog sanitizer). A class outranks the :where() defaults above, so
   a paragraph the editor set to left/centre/right is not justified. */
.ql-align-left { text-align: left; }
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; text-justify: inter-word; }
.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);
}

/* Contact page — prominent, bold section headings and topic labels */
.contact-page .eyebrow {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-14);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-magenta-500);
  display: inline-block;
  margin-bottom: var(--sp-1);
  line-height: 1.3;
}
@media (min-width: 768px) {
  .contact-page .eyebrow {
    font-size: var(--fs-15);
  }
}
.contact-page h1 {
  font-weight: 800;
}
.contact-page h2 {
  font-weight: 700;
}

/* 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 is a direct navigation link only — no dropdown, no mega-menu,
   no caret, no hover delay, no secondary submenu. */

.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; }
/* Mobile drawer scrolling: the drawer is pinned to the viewport, so the link
   list must be the part that shrinks and scrolls. Keep the drawer header at
   its natural height, let <nav> take the remaining height and scroll inside
   it, and stop scroll from chaining to the page. html carries overflow-x:
   hidden (see top of file), which makes <html> the page scroller, so the
   body-level overflow:hidden set by the JS does not lock the page; lock
   <html> while the drawer is open. */
.nav-drawer header { flex-shrink: 0; }
.nav-drawer nav { flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.nav-backdrop[data-open="true"] { touch-action: none; }
html:has(.nav-drawer[data-open="true"]) { overflow: hidden; }

/* 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;
  /* Column flow so the announcement strip sits on the bottom edge of the
     hero image; the founder overlay is anchored just above it. */
  display: flex;
  flex-direction: column;
  --hero-strip-h: 52px;
  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 bottom overlay (founder + address, no icons) ----
   Sits directly above the marquee at the bottom of the hero image.
   --hero-strip-h tracks the strip height (52px, or 88px once the strip
   wraps to two rows at <=600px) so the overlay never covers it. Styled like the
   Latest Updates marquee (navy fill, blue top rule, white sans text) so
   the founder name and address stay readable on the photo. */
.cape-hero__overlay {
  position: absolute;
  left: 50%;
  bottom: calc(var(--hero-strip-h) + clamp(8px, 1.4vh, 14px));
  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: auto;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  color: #f0f4ff;
  background: var(--c-blue-800);
  border: 0;
  border-top: 3px solid var(--c-blue-500);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-5);
  pointer-events: none;
  font-family: var(--ff-sans);
  font-size: var(--fs-14);
  font-weight: 400;
  letter-spacing: 0.01em;
}
@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: calc(var(--hero-strip-h) + 10px);
    font-size: 12px;
    line-height: 1.3;
    padding: var(--sp-2) var(--sp-3);
    gap: 2px;
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
  }
}
@media (max-width: 600px) {
  .cape-hero { --hero-strip-h: 88px; }
}
/* No published announcements: the strip is hidden, so drop the offset. */
.cape-hero:has(> .announce-strip[hidden]) { --hero-strip-h: 0px; }
.cape-hero__overlay-line {
  margin: 0;
  display: block;
  text-align: center;
  line-height: 1.4;
  color: var(--c-magenta-500);
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.cape-hero__overlay-line span { color: var(--c-magenta-500); font-weight: 600; }
.cape-hero__overlay-line strong { color: var(--c-magenta-500); font-weight: 600; }
.cape-hero__overlay-founder span { color: var(--c-magenta-200); font-weight: 600; }
.cape-hero__overlay-address span { color: #ffffff; font-weight: 400; }
/* 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;
  flex: 1 0 auto;
  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 {
  position: relative;
  padding-top: var(--sp-6);
}
@media (max-width: 768px) {
  .stats-section { padding-top: var(--sp-5); }
}
.stats-section h2,
.stats-section .section-head h2,
#blog-teaser h2,
#blog-teaser .section-head h2,
#faq h2,
#faq .npc-faq__head h2,
.npc-faq__head h2,
.blog-index-head h1 {
  font-size: clamp(2rem, 2.4vw + 1.2rem, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--c-fg);
}
.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 -------------------------------------------------------
   ---------------------------------------------------------------------
   Solid blue background (NPC brand blue var(--c-blue-800)) with clean,
   high-contrast white typography across all viewports. */
.site-footer {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  background-color: var(--c-blue-800);
  font-family: var(--ff-sans);
  color: #ffffff;
  overflow: hidden;
  isolation: isolate;
}

.site-footer__art {
  display: none !important;
}

.site-footer__overlay {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-block: clamp(32px, 5vw, 56px) clamp(20px, 3vw, 32px);
}

.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: 3 columns (quick links | reach us | social media links)
   Tablet:  2 columns (721px - 1023px), social links wrap to row 2
   Mobile:  stacked single column (<= 720px), same order
   Below the columns: logo + tagline (bottom-left), then the legal bar. */
.footer-min {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
@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(17px, 1.5vw, 21px);
  font-weight: 700;
  letter-spacing: 0.005em;
  color: #ffffff;
  margin: 0 0 8px;
  line-height: 1.25;
}
.footer-min-tag {
  font-size: clamp(12.5px, 0.95vw, 14px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 12px;
  max-width: 32ch;
}
.footer-min__address {
  font-size: clamp(12px, 0.92vw, 13.5px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  font-style: normal;
  margin: 0;
}

/* Footer Quick Links */
.footer-min__nav {
  align-self: start;
  text-align: left;
}
.footer-min__nav-label {
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 12px;
  letter-spacing: 0.01em;
}
.footer-min__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.7vw, 10px);
  align-items: flex-start;
}
.footer-min__nav li {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.footer-min__nav li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.8);
  border-top: 1.5px solid rgba(255, 255, 255, 0.8);
  transform: rotate(45deg);
  flex: 0 0 6px;
  margin-right: 2px;
}
.footer-min__nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: clamp(14px, 1vw, 15.5px);
  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-300);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Footer Contact */
.footer-min__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.5;
}
.footer-min__contact .footer-min-contact-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.88);
}
.footer-min__contact svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--c-blue-200);
}
.footer-min__contact a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  transition: color var(--dur-2) var(--ease);
}
.footer-min__wa-url {
  margin-inline-start: 6px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* "National Project Centre" heading + address, relocated under Reach us. */
.footer-min__contact .footer-min__brand { margin-top: 10px; }
.footer-min__contact a:hover,
.footer-min__contact a:focus-visible {
  color: var(--c-magenta-300);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Footer Follow Us */
.footer-min__follow {
  align-self: start;
}
.footer-min__follow-label {
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 12px;
  letter-spacing: 0.01em;
}
.footer-min__social-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.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.12);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  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 var(--dur-2) var(--ease);
}
.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: #ffffff;
  color: var(--c-blue-800);
  border-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.footer-min__social-link[aria-label="Facebook"]:hover,
.footer-min__social-link[aria-label="Facebook"]:focus-visible {
  background: #1877F2; border-color: #1877F2; color: #fff;
}
.footer-min__social-link[aria-label="Instagram"]:hover,
.footer-min__social-link[aria-label="Instagram"]:focus-visible {
  background: #dd2a7b; border-color: #dd2a7b; color: #fff;
}
.footer-min__social-link[aria-label="YouTube"]:hover,
.footer-min__social-link[aria-label="YouTube"]:focus-visible {
  background: #FF0000; border-color: #FF0000; color: #fff;
}
.footer-min__social-link[aria-label="LinkedIn"]:hover,
.footer-min__social-link[aria-label="LinkedIn"]:focus-visible {
  background: #0A66C2; border-color: #0A66C2; color: #fff;
}

/* Footer logo (bottom-left) + tagline. The logo PNG has a white
   background, so it sits on a white tile to read cleanly on the navy. */
.footer-min__brandbar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: clamp(24px, 3vw, 36px);
}
.footer-min__logo {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 6px;
  background: #ffffff;
  border-radius: var(--r-md);
  line-height: 0;
}
.footer-min__logo img {
  display: block;
  width: clamp(52px, 5vw, 68px);
  height: auto;
}
.footer-min__brandbar .footer-min-tag { margin: 0; }

/* Keep the logo row and the copyright/legal row clear of the fixed
   back-to-top / WhatsApp / Call stack (52px wide, 16px from the right)
   wherever the footer content reaches under it. */
@media (max-width: 1320px) {
  .site-footer .footer-min__brandbar,
  .site-footer .footer-min__legal { padding-inline-end: 64px; }
}
@media (max-width: 540px) {
  .site-footer .footer-min__legal-copy > span { white-space: normal; }
}

/* Footer Legal */
.footer-min__legal {
  margin-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(12px, 0.92vw, 13.5px);
  line-height: 1.4;
  padding: clamp(16px, 2vw, 24px) 0 0;
}
.footer-min__legal-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.85);
}
.footer-min__legal-copy > span {
  white-space: nowrap;
}
.footer-min__legal-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-magenta-400);
  display: inline-block;
  flex: 0 0 5px;
}
.footer-min__legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-min__legal-links a {
  color: rgba(255, 255, 255, 0.85);
  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: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

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

@media (max-width: 720px) {
  .site-footer {
    background-color: var(--c-blue-800);
    min-height: auto;
  }
  .site-footer__overlay {
    padding-block: var(--sp-6) var(--sp-5);
  }
  .footer-min {
    grid-template-columns: 1fr;
    text-align: left;
    gap: var(--sp-5);
    padding-top: 0;
  }
  .footer-min__brand .footer-min-title {
    font-size: 18px;
    line-height: 1.25;
  }
  .footer-min-tag {
    font-size: 13px;
    line-height: 1.4;
    max-width: 100%;
    margin-inline: 0;
  }
  .footer-min__nav { text-align: left; }
  .footer-min__nav ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    align-items: flex-start;
  }
  .footer-min__nav a {
    font-size: 15px;
    line-height: 1.4;
  }
  .footer-min__follow { text-align: left; }
  .footer-min__follow-label { font-size: 16px; }
  .footer-min__social-list { gap: 10px; justify-content: flex-start; }
  .footer-min__contact {
    text-align: left;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    line-height: 1.4;
  }
  .footer-min__contact .footer-min-contact-line { justify-content: flex-start; }
  .footer-min__legal {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 8px;
    padding-top: 16px;
    margin-top: 20px;
  }
  .footer-min__legal-copy { justify-content: flex-start; }
  .footer-min__legal-links { justify-content: flex-start; gap: 4px 12px; }
}

@media (max-width: 540px) {
  .footer-min {
    gap: var(--sp-5);
  }
  .footer-min__nav-label { font-size: 16px; }
  .footer-min__follow-label { font-size: 16px; }
  .footer-min__contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .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__social-list {
    justify-content: flex-start;
  }
  .footer-min__legal {
    font-size: 12px;
  }
}

@media (max-width: 420px) {
  .footer-min__brand .footer-min-title { font-size: 16px; }
  .footer-min__contact { font-size: 12.5px; gap: 6px; }
  .footer-min__legal {
    font-size: 11.5px;
  }
}dth: 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-top: var(--sp-9);
  padding-bottom: var(--sp-5);
  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(2rem, 2.4vw + 1.2rem, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  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) ============== */
/* position + z-index: the strip sits inside .cape-hero after its absolutely
   positioned photo layers (.cape-hero__bg-parallax and friends). Without its
   own stacking position those layers paint over the navy background and the
   light hero photo shows through, which read as powder blue. z-index 6 keeps it
   above the photo and grain (5) and below the hero content (10+). */
.announce-strip { position: relative; z-index: 6; background: var(--c-blue-800); color: #fff; font-family: var(--ff-sans); border-top: 3px solid var(--c-blue-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-blue-300); 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 — NPC Blue brand color token with high contrast on dark navy */
.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-blue-300); 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 {
  max-width: min(1200px, 96vw, var(--stack-w, 75%));
  max-height: var(--stack-h, 82%);
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: var(--r-md);
  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(2rem, 2.4vw + 1.2rem, 2.85rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  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__services {
  list-style: disc;
  margin: var(--sp-3) 0 0;
  padding-inline-start: 1.4em;
  display: grid;
  gap: var(--sp-1);
  font-size: var(--fs-16);
  line-height: 1.6;
}
.npc-welcome__services li { padding-inline-start: 0.2em; }
.npc-welcome__services li::marker { color: var(--c-magenta-500); }
.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;
}
/* Card design copied from the About page "Our Location" card (.about-loc):
   soft fill, thin border, magenta left rule, large radius, light shadow.
   Applied only where .npc-loc-card is added (homepage Welcome card and
   the About National Project Centre card). */
.npc-welcome__body.npc-loc-card {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-magenta-500);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: var(--sp-5) var(--sp-6);
  color: var(--c-fg);
}
.npc-welcome__body.npc-loc-card p,
.npc-welcome__body.npc-loc-card li { color: var(--c-fg); }
/* Service detail pages reuse this card for their intro (.svc-hero__body).
   Their page styles paint <strong> white for the old navy card; keep the
   bold runs readable on the light card. */
.svc-page .npc-welcome__body.npc-loc-card strong { color: var(--c-fg); }
@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__body.npc-loc-card { 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;
}
/* Homepage gallery: uniform 16:9 frames in a grid (replaces the sticky
   stack of differently sized frames on the homepage only; /gallery/ keeps
   its own stack). Images stay complete (contain) and centred in each frame. */
.npc-seewhat__track.gallery-stack__track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  width: 100%;
  max-width: var(--container, 1200px);
  margin-inline: auto;
  padding: var(--sp-4) var(--sp-5) 0;
  box-sizing: border-box;
}
.npc-seewhat__track .gallery-stack__item {
  position: relative;
  top: auto;
  z-index: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
  will-change: auto;
}
.npc-seewhat__track .gallery-stack__figure {
  height: auto;
  aspect-ratio: 16 / 9;
  padding: 0;
  background: var(--c-blue-800);
  border-radius: var(--r-md);
  overflow: hidden;
}
.npc-seewhat__track .gallery-stack__image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  box-shadow: none;
}
.npc-seewhat__track .gallery-stack__caption {
  position: static;
  transform: none;
  align-self: center;
}
@media (max-width: 600px) {
  .npc-seewhat__track.gallery-stack__track { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding-inline: var(--sp-4); }
}
.npc-seewhat__video .npc-video-player { max-width: min(100%, 880px); }

.npc-seewhat__video {
  background: var(--c-blue-900);
  color: #fff;
  padding-block: var(--sp-7);
  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-7);
}
.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 column headings ----------------------------------- */
/* Reach us, Quick Links and Our social media links share one style:
   white, sentence case, with the thin magenta accent rule sitting directly
   under the heading (sized to the text, not the column). */
.footer-min__contact-label,
.footer-min__nav-label,
.footer-min__follow-label {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #ffffff;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--c-magenta-400);
  display: inline-block;
  align-self: flex-start;
  line-height: 1.25;
}

/* Social media links wrapper — 3rd column of .footer-min on desktop and
   its own row in the 2-column / 1-column collapses below. No top padding,
   so its heading lines up with Reach us and Quick Links. */
.footer-min__follow {
  align-self: start;
  text-align: left;
}

/* Address block, under the "National Project Centre" heading in Reach us. */
.footer-min__address {
  margin-top: 8px;
  font-style: normal;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.45;
  color: #ffffff;
  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);
}

/* Homepage only: tighter gaps above Latest Blog, FAQ and Get in Touch.
   (Reviews/video spacing is set on their own rules above.) */
#blog-teaser.section { padding-block: var(--sp-7) var(--sp-6); }

/* Homepage Latest Blog promo: tick line + magenta "Click & Read" button
   (reuses .btn .btn-primary), directly under the section heading. */
.blog-promo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 auto var(--sp-4);
}
.section-head .blog-promo__text {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  margin: 0;
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-fg);
  text-align: left;
}
.blog-promo__tick {
  flex: 0 0 auto;
  color: var(--c-magenta-500);
  font-weight: 700;
}
.blog-promo__btn { padding: 0.75rem 1.6rem; font-size: var(--fs-15); font-weight: 600; }
#faq.npc-faq { padding-top: var(--sp-6); }
.home #bottom-enquiry.npc-enquiry { padding-top: var(--sp-7); }

/* Homepage only: even out the vertical rhythm between consecutive
   sections. Each section keeps its own padding (no negative margins);
   the larger 96px blocks are brought down to the 48-64px scale used by
   the rest of the page. */
.home .npc-welcome { padding-block: var(--sp-7); }
.home .wwd { padding-top: var(--sp-8); }
.home .stats-section { padding-bottom: var(--sp-7); }
.home .npc-why { padding-block: var(--sp-8); }
.home .npc-seewhat__title { padding-top: var(--sp-7); }
.home #faq.npc-faq { padding-bottom: var(--sp-7); }
.home #bottom-enquiry.npc-enquiry { padding-bottom: var(--sp-8); }
@media (max-width: 600px) {
  .home .npc-welcome { padding-block: var(--sp-6); }
  .home .wwd { padding-top: var(--sp-7); }
  .home .npc-why { padding-block: var(--sp-7); }
}

/* ---------------------------------------------------------------------
 * Refer & Earn label in the top referral banner: magenta pill with a
 * soft breathing glow and a light sheen sweeping across it. Only
 * transform / opacity / box-shadow are animated on one small element,
 * and everything stops under prefers-reduced-motion.
 * ------------------------------------------------------------------- */
.referral-banner__text > strong,
.referral-banner__text > .referral-banner__pill {
  position: relative;
  display: inline-block;
  width: fit-content;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  background: linear-gradient(100deg, var(--c-magenta-600) 0%, var(--c-magenta-500) 45%, var(--c-magenta-400) 100%);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-shadow: 0 0 8px rgba(255, 214, 236, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 172, 214, 0.55), 0 0 10px rgba(236, 78, 160, 0.45);
  overflow: hidden;
  isolation: isolate;
  animation: npc-refer-glow 2.8s ease-in-out infinite;
}
.referral-banner__text > strong::after,
.referral-banner__text > .referral-banner__pill::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: npc-refer-shine 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes npc-refer-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 172, 214, 0.55), 0 0 8px rgba(236, 78, 160, 0.35); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 214, 236, 0.9), 0 0 18px rgba(236, 78, 160, 0.85), 0 0 30px rgba(200, 16, 124, 0.45); }
}
@keyframes npc-refer-shine {
  0%, 55%  { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}
@media (max-width: 520px) {
  .referral-banner__text > strong,
  .referral-banner__text > .referral-banner__pill { display: inline-block; padding: 2px 10px; margin-bottom: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .referral-banner__text > strong,
  .referral-banner__text > strong::after,
  .referral-banner__text > .referral-banner__pill,
  .referral-banner__text > .referral-banner__pill::after { animation: none; }
  .referral-banner__text > strong::after,
  .referral-banner__text > .referral-banner__pill::after { display: none; }
}

/* ---------------------------------------------------------------------
 * Blog card covers: show the whole uploaded image (contain) inside a
 * consistent 4:3 frame (most uploads are square or portrait). A blurred copy of the same image fills the
 * letterbox so square / portrait uploads still look intentional.
 * Missing or broken images fall back to a branded title tile.
 * ------------------------------------------------------------------- */
.blog-card .cover--img,
.blog-card .cover--fallback { aspect-ratio: 4 / 3; }
.blog-card .cover--img { background: var(--c-blue-900); isolation: isolate; }
.blog-card .cover--img::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -1;
  background-image: var(--cover-img);
  background-size: cover;
  background-position: center;
  filter: blur(14px) saturate(1.1);
  opacity: 0.55;
}
.blog-card .cover--img img {
  position: relative;
  object-fit: contain;
  object-position: center;
}
.blog-card .cover__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: linear-gradient(135deg, var(--c-blue-800) 0%, var(--c-blue-700) 60%, var(--c-magenta-600) 140%);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-18);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.blog-card .cover__fallback span {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card .cover--img .cover__fallback,
.blog-card .cover--fallback::before { display: none; }
.blog-card[hidden] { display: none; }

/* Blog index: "Read More" reveals the older posts on the same page. */
.blog-more { display: flex; justify-content: center; margin-top: var(--sp-6); }
.blog-more[hidden] { display: none; }
.blog-more__btn { min-width: 180px; justify-content: center; }

/* Blog index (/blog/): centred "Blog" title + "Latest Blog" heading in the
   homepage section-heading style, with compact spacing between sections. */
.blog-index-head { padding-block: var(--sp-5) var(--sp-6); }
.blog-index-head .container { grid-template-columns: 1fr; }
.blog-index-head h1,
.blog-index-head > .container > div > p { text-align: center; margin-inline: auto; }
.blog-index-head h1 { margin-top: var(--sp-4); margin-bottom: 0; }
.blog-index-head > .container > div > p { margin-top: var(--sp-2); font-size: var(--fs-18, 1.125rem); }
.blog-index-list.section { padding-block: var(--sp-6) var(--sp-7); }
.blog-index-list .section-head { margin-bottom: var(--sp-5); }
/* "Latest Blog": smaller than the page title, in the homepage heading blue. */
#blog-latest-heading { font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem); font-weight: 800; letter-spacing: -0.01em; color: var(--c-fg); -webkit-text-fill-color: currentColor; background: none; margin-bottom: var(--sp-2); }
.blog-index-list .section-head p { font-size: var(--fs-14, 0.875rem); }
@media (max-width: 768px) {
  .blog-index-head { padding-block: var(--sp-4) var(--sp-5); }
  .blog-index-list.section { padding-block: var(--sp-5) var(--sp-6); }
  .blog-index-list .section-head { margin-bottom: var(--sp-4); }
}

/* Announcement strip: hidden when nothing is published in the staff portal. */
.announce-strip[hidden] { display: none !important; }

/* ---------------------------------------------------------------------
 * Refer & Earn confetti (homepage). assets/js/refer-confetti.js drops
 * small particles into this layer on a loop. The layer covers the
 * sticky site header and clips to it, so bits fall over the navbar and
 * disappear at its bottom edge instead of spilling into the hero.
 * ------------------------------------------------------------------- */
/* The homepage Refer & Earn pill is a real <button> that opens the
 * referral popup; reset native button chrome so it looks like the pill. */
.referral-banner__pill {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  font: inherit;
  font-weight: 800;
  line-height: inherit;
  cursor: pointer;
}
.referral-banner__pill:focus-visible {
  outline: 2px solid #ffd66b;
  outline-offset: 3px;
}
.npc-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 60;
}
.npc-confetti__bit {
  position: absolute;
  width: 7px;
  height: 7px;
  will-change: transform, opacity;
}
.npc-confetti__bit--circle { border-radius: 50%; }
.npc-confetti__bit--square { border-radius: 1px; }
.npc-confetti__bit--strip { width: 4px; height: 10px; border-radius: 1px; }
@media (prefers-reduced-motion: reduce) {
  .npc-confetti { display: none; }
}