/* ============================================================
   DARICE LANGUAGE SOLUTIONS — GLOBAL DESIGN SYSTEM
   style.css

   PLACEHOLDER NOTICE:
   --color-brand (#6B1D3E) is a PLACEHOLDER value.
   Replace with the exact color sampled from the Darice Group
   logo before launch. A single variable change here updates
   the entire site.
   ============================================================ */

/* ============================================================
   SELF-HOSTED FONTS — Inter (sans) + Lora (serif)
   No Google CDN. No IP sent to third parties. GDPR compliant.
   ============================================================ */

/* Inter 400 — Regular */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-regular.woff2') format('woff2');
}

/* Inter 500 — Medium */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-medium.woff2') format('woff2');
}

/* Inter 600 — SemiBold */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-semibold.woff2') format('woff2');
}

/* Lora 400 — Regular */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lora-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lora-400-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lora-400-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Lora 700 — Bold */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lora-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lora-700-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* === DESIGN TOKENS ======================================== */
:root {
  /* --- Colors ---
     Sampled directly from official Darice Group logo asset (img/Darice Group — Logo.png):
     Primary plum/burgundy: #702D4E (RGB 112, 45, 78).
     WCAG AAA contrast ratio on white is 9.69:1. */
  --color-brand:        #702D4E;
  --color-brand-dark:   #521E38;  /* Darker variant for hover states */
  --color-white:        #FFFFFF;
  --color-ink:          #1A1A1A;  /* Near-black body text */
  --color-ink-muted:    #4A4A4A;  /* Secondary text */
  --color-ink-faint:    #666666;  /* Tertiary / labels (5.74:1 on white — WCAG AA) */
  --color-rule:         #E0E0E0;  /* Dividers and hairlines */
  --color-surface:      #F7F5F4;  /* Warm near-white for section rhythm */

  /* --- Typography --- */
  --font-serif:  'Lora', Georgia, 'Times New Roman', serif;
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* --- Type scale --- */
  --fs-label:  0.8125rem;   /* 13px */
  --fs-sm:     0.9375rem;   /* 15px */
  --fs-body:   1.125rem;    /* 18px */
  --fs-h3:     1.75rem;     /* 28px */
  --fs-h2:     2.75rem;     /* 44px */
  --fs-h1:     4.125rem;    /* 66px */

  /* --- Font weights --- */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* --- Line heights --- */
  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-body:   1.65;

  /* --- Spacing scale (rem = px / 16) ---
     Scale: 8 · 16 · 24 · 32 · 48 · 64 · 96 · 120 */
  --sp-2:   0.5rem;    /*  8px */
  --sp-4:   1rem;      /* 16px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-12:  3rem;      /* 48px */
  --sp-16:  4rem;      /* 64px */
  --sp-24:  6rem;      /* 96px */
  --sp-30:  7.5rem;    /* 120px */

  /* --- Layout --- */
  --max-w:        77.5rem;  /* 1240px — max content width */
  --max-w-narrow: 46rem;    /* 736px — comfortable reading column */
  --gap:          2rem;     /* 32px column gap */

  /* --- Border radius --- */
  --radius-sm: 4px;
  --radius-md: 6px;

  /* --- Transitions --- */
  --transition: 200ms ease;

  /* --- Section padding --- */
  --section-py:    var(--sp-24);   /* 96px desktop */
  --section-py-md: var(--sp-16);   /* 64px tablet  */
  --section-py-sm: var(--sp-12);   /* 48px mobile  */
}

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

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

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

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  background: none;
  border: none;
  padding: 0;
}

/* === REDUCED MOTION ======================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === SKIP LINK ============================================ */
.skip-link {
  position: absolute;
  top: -200%;
  left: var(--sp-4);
  z-index: 9999;
  padding: var(--sp-2) var(--sp-6);
  background: var(--color-brand);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-sm);
  transition: top var(--transition);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--sp-4);
}

/* === CONTAINER ============================================ */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

/* === SECTION BASE ========================================= */
.section {
  padding-block: var(--section-py);
}

.section--surface {
  background-color: var(--color-surface);
}

.section--brand {
  background-color: var(--color-brand);
  color: var(--color-white);
}

/* === TYPOGRAPHY =========================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-ink);
}

/* On brand backgrounds, headings inherit white */
.section--brand h1,
.section--brand h2,
.section--brand h3 {
  color: var(--color-white);
}

/* Section label — small caps eyebrow text above headings */
.section-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: var(--sp-4);
}

.section--brand .section-label {
  color: rgba(255, 255, 255, 0.65);
}

/* Section header grouping */
.section-header {
  margin-bottom: var(--sp-16);
}

.section-header h2 {
  font-size: clamp(1.75rem, 4vw, var(--fs-h2));
  color: var(--color-ink);
}

.section-header p {
  font-size: var(--fs-body);
  color: var(--color-ink-muted);
  max-width: 40rem;
  margin-top: var(--sp-4);
  line-height: var(--lh-body);
}

/* === BUTTONS ============================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--transition),
    color var(--transition),
    border-color var(--transition);
}

.btn:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 3px;
}

/* Primary — burgundy fill */
.btn-primary {
  background-color: var(--color-brand);
  color: var(--color-white);
  border-color: var(--color-brand);
}

.btn-primary:hover {
  background-color: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
}

/* Secondary — outlined */
.btn-secondary {
  background-color: transparent;
  color: var(--color-ink);
  border-color: var(--color-rule);
}

.btn-secondary:hover {
  border-color: var(--color-ink-muted);
  color: var(--color-brand);
}

/* White — for use on brand-color backgrounds */
.btn-white {
  background-color: var(--color-white);
  color: var(--color-brand);
  border-color: var(--color-white);
}

.btn-white:hover {
  background-color: var(--color-surface);
  border-color: var(--color-surface);
}

/* Hero dark background — override secondary button for visibility */
.hero .btn-secondary {
  color: rgba(220, 235, 250, 0.9);
  border-color: rgba(255, 255, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.07);
}

.hero .btn-secondary:hover {
  color: #ffffff;
  border-color: rgba(130, 210, 245, 0.7);
  background-color: rgba(130, 210, 245, 0.12);
}

/* Focus override on dark/brand backgrounds */
.section--brand .btn:focus-visible {
  outline-color: var(--color-white);
}

/* === ARROW LINK =========================================== */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-brand);
  text-decoration: none;
  transition: gap var(--transition), color var(--transition);
}

.arrow-link::after {
  content: '→';
  display: inline-block;
  transition: transform var(--transition);
}

.arrow-link:hover {
  gap: 0.625rem;
}

.arrow-link:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
  border-radius: 2px;
}

/* === UTILITIES ============================================ */
.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-rule);
}

.nav-inner {
  display: flex;
  align-items: center;
  height: 72px;
  gap: var(--sp-8);
}

/* Brand mark */
.nav-brand {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  line-height: 1;
}

.nav-brand-logo {
  display: block;
  width: 32px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-brand-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nav-brand-name {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
  color: var(--color-brand);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.nav-brand-sub {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: var(--fw-medium);
  color: var(--color-ink-faint);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-top: 2px;
}

.nav-brand:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Desktop nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin-left: auto;
}

.nav-links a {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink-muted);
  text-decoration: none;
  padding-block: 0.25rem;
  transition: color var(--transition);
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--color-brand);
}

.nav-links a[aria-current="page"] {
  color: var(--color-brand);
  font-weight: var(--fw-semibold);
}

.nav-links a:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Nav Dropdown */
.nav-item-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nav-dropdown-arrow {
  display: inline-block;
  transition: transform var(--transition);
  color: var(--color-ink-faint);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background-color: var(--color-white);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  padding: var(--sp-2) 0;
  min-width: 17rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 1000;
}

.nav-item-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px;
}

.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(2px);
}

.nav-item-dropdown:hover .nav-dropdown-arrow,
.nav-item-dropdown:focus-within .nav-dropdown-arrow {
  transform: rotate(180deg);
  color: var(--color-brand);
}

.nav-dropdown-menu li {
  list-style: none;
  margin: 0;
}

.nav-dropdown-menu a {
  display: block !important;
  padding: 0.625rem 1.125rem !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--color-ink) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background-color var(--transition), color var(--transition) !important;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus {
  background-color: var(--color-surface) !important;
  color: var(--color-brand) !important;
}

/* Nav CTA — slightly smaller than page CTAs to fit in nav */
.nav-cta {
  flex-shrink: 0;
  margin-left: var(--sp-4);
  font-size: 0.8125rem;
  padding: 0.625rem 1.125rem;
  white-space: nowrap;
}

/* Mobile toggle — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
}

.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--color-ink);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer nav */
.nav-mobile {
  display: none;
  position: absolute;
  top: 72px;
  left: 0;
  right: 0;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-rule);
  padding: var(--sp-2) var(--sp-6) var(--sp-8);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.nav-mobile.is-open {
  display: block;
}

.nav-mobile ul {
  display: flex;
  flex-direction: column;
}

.nav-mobile ul li a {
  display: block;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--color-rule);
  text-decoration: none;
  transition: color var(--transition);
}

.nav-mobile ul li:first-child a {
  border-top: 1px solid var(--color-rule);
  margin-top: var(--sp-4);
}

.nav-mobile ul li a:hover,
.nav-mobile ul li a[aria-current="page"] {
  color: var(--color-brand);
}

.nav-mobile ul li a:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: 2px;
}

.mobile-sublinks {
  padding-left: var(--sp-4) !important;
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
  margin-block: var(--sp-2);
}

.mobile-sublinks li a {
  font-size: var(--fs-sm) !important;
  color: var(--color-ink-muted) !important;
  padding: var(--sp-2) var(--sp-2) !important;
  border-bottom: none !important;
  border-top: none !important;
  margin-top: 0 !important;
}

.mobile-sublinks li a:hover {
  color: var(--color-brand) !important;
}

.nav-mobile .btn-primary {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: var(--sp-6);
  padding-block: 1rem;
  line-height: 1.35;
  white-space: normal;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background-color: #07111f;
  padding-top: 6rem;
  padding-bottom: 6rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* ── Hero sequential video player ─────────────────────────────── */

/* Wrapper: right half of hero on desktop, full-width below */
.hero-video-wrap {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Left-side gradient fade so video blends into the dark hero text area */
.hero-video-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    to right,
    #07111f 0%,
    rgba(7, 17, 31, 0.80) 40%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* Top and bottom fades */
.hero-video-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, #07111f 0%, transparent 18%),
    linear-gradient(to top,    #07111f 0%, transparent 18%);
  z-index: 2;
  pointer-events: none;
}

/* The <video> element itself */
.hero-video-wrap video {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  /* Crossfade handled via opacity transition */
  opacity: 1;
  transition: opacity 0.6s ease;
}

/* Ensure hero text stays above video */
.hero .container {
  position: relative;
  z-index: 2;
}

/* Reduced-motion: pause the video */
@media (prefers-reduced-motion: reduce) {
  .hero-video-wrap video {
    animation: none;
  }
}


.hero-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(130, 200, 240, 0.9);
  margin-bottom: var(--sp-6);
}

.hero-content {
  max-width: 56rem;
  margin-inline: auto;
}

.hero h1,
.hero-headline {
  font-size: clamp(2rem, 5vw, var(--fs-h1));
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: var(--sp-6);
  letter-spacing: -0.02em;
}

.hero-slider {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-block: var(--sp-2);
}

.hero-slide {
  grid-area: 1 / 1 / 2 / 2;
  width: 100%;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.8vw, 3.625rem);
  font-weight: var(--fw-bold);
  color: #ffffff;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-align: center;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.hero-slide-highlight {
  color: rgba(130, 210, 245, 1);
}

.hero-slide--brand {
  animation: heroBrandSlide 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.hero-slide--slogan {
  animation: heroSloganSlide 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.hero-slider:hover .hero-slide {
  animation-play-state: paused;
}

@keyframes heroBrandSlide {
  0%, 30% {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
  38% {
    opacity: 0;
    transform: translateY(-18px);
    visibility: hidden;
  }
  39% {
    opacity: 0;
    transform: translateY(18px);
    visibility: hidden;
  }
  88% {
    opacity: 0;
    transform: translateY(18px);
    visibility: hidden;
  }
  96%, 100% {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}

@keyframes heroSloganSlide {
  0%, 30% {
    opacity: 0;
    transform: translateY(18px);
    visibility: hidden;
  }
  38% {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
  80% {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
  88% {
    opacity: 0;
    transform: translateY(-18px);
    visibility: hidden;
  }
  89%, 100% {
    opacity: 0;
    transform: translateY(18px);
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    animation: none !important;
  }
  .hero-slide--brand {
    display: none !important;
  }
  .hero-slide--slogan {
    grid-area: auto !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}

.hero-body {
  font-size: 1.25rem;
  line-height: var(--lh-body);
  color: rgba(220, 235, 250, 0.85);
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: var(--sp-8);
}

.hero-body-emphasis {
  color: rgba(130, 210, 245, 1);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
  margin-bottom: 0;
}

.hero-proof {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-ink-faint);
  font-style: italic;
}

/* ============================================================
   SPECIALIZATION NOTICE (SECTION 2)
   ============================================================ */
.value-prop,
.specialization-section {
  background-color: var(--color-white);
  padding-block: var(--sp-24);
}

.value-prop-inner {
  max-width: var(--max-w-narrow);
  margin-inline: auto;
  text-align: center;
}

.specialization-section .section-label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: var(--sp-4);
}

.specialization-section h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--color-ink);
  margin-bottom: var(--sp-6);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
}

.specialization-body p {
  font-size: var(--fs-body);
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
}

.specialization-body p + p {
  margin-top: var(--sp-4);
}

.specialization-body strong {
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
}

.specialization-highlight {
  font-size: 1.1875rem !important;
  color: var(--color-ink) !important;
  font-weight: var(--fw-medium);
  padding-top: var(--sp-2);
}

.value-prop h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  color: var(--color-ink);
  margin-bottom: var(--sp-6);
  line-height: var(--lh-snug);
}

.value-prop p {
  font-size: var(--fs-body);
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
}

.value-prop p + p {
  margin-top: var(--sp-4);
}

/* ============================================================
   INDUSTRIES
   ============================================================ */
.industries {
  background-color: var(--color-surface);
  padding-block: var(--section-py);
}

.industries-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
}

/* Industry column — editorial: top rule + typography, no card box */
.industry-item {
  padding-top: var(--sp-6);
  border-top: 3px solid var(--color-brand);
}

.industry-item h3 {
  font-size: 1.3125rem; /* 21px — between body and h3 */
  color: var(--color-ink);
  margin-bottom: var(--sp-4);
  line-height: var(--lh-snug);
}

.industry-item > p {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
  margin-bottom: var(--sp-4);
}

.industry-types {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--color-ink-faint);
  letter-spacing: 0.02em;
  line-height: 2;
  margin-bottom: var(--sp-6);
}

/* ============================================================
   SERVICES
   ============================================================ */
.services {
  background-color: var(--color-white);
  padding-block: var(--section-py);
}

/* Services layout: editorial definition-list style in 2 columns */
.services-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.service-item {
  padding-block: var(--sp-6);
  border-top: 1px solid var(--color-rule);
}

.service-item:last-child {
  border-bottom: 1px solid var(--color-rule);
}

.service-item h3 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin-bottom: var(--sp-2);
  line-height: var(--lh-snug);
}

.service-item p {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
}

.services-cta {
  margin-top: var(--sp-12);
}

/* ============================================================
   CREDIBILITY
   ============================================================ */
.credibility {
  background-color: var(--color-surface);
  padding-block: var(--section-py);
}

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

.credibility-statement h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--color-ink);
  margin-bottom: var(--sp-6);
  line-height: var(--lh-snug);
}

.credibility-statement > p {
  font-size: var(--fs-body);
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
}

/* Proof points — editorial stacked list, not cards */
.proof-list {
  display: flex;
  flex-direction: column;
}

.proof-item {
  padding-block: var(--sp-6);
  border-top: 1px solid var(--color-rule);
}

.proof-item:last-child {
  border-bottom: 1px solid var(--color-rule);
}

.proof-item-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--color-brand);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

.proof-item p {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  line-height: 1.6;
}

/* ============================================================
   PROCESS
   ============================================================ */
.process {
  background-color: var(--color-surface);
  padding-block: var(--section-py);
}

.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}

.process-step {
  position: relative;
}

.process-step-num {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: var(--fw-bold);
  color: var(--color-brand);
  line-height: 1;
  opacity: 0.3;
  margin-bottom: var(--sp-4);
  user-select: none;
}

.process-step h3 {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin-bottom: var(--sp-2);
  line-height: var(--lh-snug);
}

.process-step p {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
}

.process-step--bonus {
  background-color: var(--color-white);
  padding: var(--sp-6);
  border-radius: var(--radius-sm);
  border-top: 3px solid var(--color-brand);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.process-step--bonus .process-step-num {
  opacity: 0.9;
  color: var(--color-brand);
  margin-bottom: var(--sp-2);
}

.process-step--bonus h3 {
  color: var(--color-brand);
  margin-bottom: var(--sp-4);
}

.process-bonus-content p {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-ink-muted);
}

.process-bonus-content p + p {
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--color-rule);
}

.process-bonus-content strong {
  display: block;
  color: var(--color-ink);
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

/* ============================================================
   WHY DARICE
   ============================================================ */
.why-darice {
  background-color: var(--color-white);
  padding-block: var(--section-py);
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.why-item {
  padding-block: var(--sp-6);
  border-top: 1px solid var(--color-rule);
}

.why-item:last-child {
  border-bottom: 1px solid var(--color-rule);
}

.why-item h3 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin-bottom: var(--sp-2);
}

.why-item p {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
}

/* ============================================================
   INSIGHTS PREVIEW
   ============================================================ */
.insights {
  background-color: var(--color-white);
  padding-block: var(--section-py);
}

.insights-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-12);
}

.insights-header-text h2 {
  font-size: clamp(1.5rem, 3.5vw, var(--fs-h2));
  color: var(--color-ink);
}

.insights-header-text p {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  max-width: 32rem;
  margin-top: var(--sp-2);
  line-height: var(--lh-body);
}

.insights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}

.insight-card {
  border-top: 2px solid var(--color-rule);
  padding-top: var(--sp-6);
}

.insight-card-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.insight-category {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--color-brand);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.insight-badge {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--color-ink-faint);
  background-color: var(--color-surface);
  padding: 0.2em 0.625em;
  border-radius: 2px;
}

.insight-card h3 {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  line-height: var(--lh-snug);
}

.insight-card p {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
  margin-top: var(--sp-2);
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta {
  background-color: var(--color-brand);
  padding-block: var(--section-py);
  text-align: center;
}

.final-cta-inner {
  max-width: 44rem;
  margin-inline: auto;
}

.final-cta h2 {
  font-size: clamp(1.625rem, 3.5vw, 2.5rem);
  color: var(--color-white);
  margin-bottom: var(--sp-6);
  line-height: var(--lh-snug);
}

.final-cta p {
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.82);
  line-height: var(--lh-body);
  margin-bottom: var(--sp-8);
}

/* ============================================================
   INNER PAGE HERO & BREADCRUMBS
   ============================================================ */
.page-hero {
  background-color: var(--color-surface);
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-16);
  border-bottom: 1px solid var(--color-rule);
}

.page-hero-inner {
  max-width: var(--max-w);
  margin-inline: auto;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  color: var(--color-ink-faint);
  margin-bottom: var(--sp-6);
  list-style: none;
}

.breadcrumbs a {
  color: var(--color-ink-muted);
  text-decoration: none;
  transition: color var(--transition);
}

.breadcrumbs a:hover {
  color: var(--color-brand);
}

.breadcrumbs a:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.breadcrumbs-separator {
  color: var(--color-ink-faint);
  user-select: none;
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-brand);
  font-weight: var(--fw-semibold);
}

.page-hero h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  color: var(--color-ink);
  line-height: 1.15;
  margin-bottom: var(--sp-6);
  letter-spacing: -0.015em;
  max-width: 50rem;
}

.page-hero-lead {
  font-size: 1.25rem;
  line-height: var(--lh-body);
  color: var(--color-ink-muted);
  max-width: 44rem;
  margin-bottom: var(--sp-6);
}

.page-hero-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-ink-faint);
  font-style: italic;
}

/* ============================================================
   JUMP NAVIGATION (SERVICES ANCHOR BAR)
   ============================================================ */
.jump-nav-bar {
  position: sticky;
  top: 72px;
  z-index: 90;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-rule);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.jump-nav-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-block: var(--sp-3);
  scrollbar-width: none;
  white-space: nowrap;
}

.jump-nav-inner::-webkit-scrollbar {
  display: none;
}

.jump-nav-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin-right: var(--sp-2);
  flex-shrink: 0;
}

.jump-nav-link {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink-muted);
  text-decoration: none;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: all var(--transition);
  flex-shrink: 0;
}

.jump-nav-link:hover {
  color: var(--color-brand);
  background-color: var(--color-surface);
  border-color: var(--color-rule);
}

.jump-nav-link:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* ============================================================
   SERVICE DETAILED SECTIONS & EDITORIAL GRIDS
   ============================================================ */
.service-detail {
  padding-block: var(--section-py);
  border-bottom: 1px solid var(--color-rule);
  scroll-margin-top: 120px;
}

.service-detail--surface {
  background-color: var(--color-surface);
}

.service-grid-7-5,
.service-grid-5-7,
.service-grid-6-6 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  align-items: start;
}

.service-detail-body h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--color-ink);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-6);
}

.service-detail-body p {
  font-size: var(--fs-body);
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
  margin-bottom: var(--sp-4);
}

.service-detail-body p:last-child {
  margin-bottom: 0;
}

.service-callout {
  padding: var(--sp-6);
  border-left: 3px solid var(--color-brand);
  background-color: rgba(112, 45, 78, 0.04);
  margin-block: var(--sp-6);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.service-callout p {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--color-ink);
  line-height: 1.6;
  margin: 0;
}

/* Editorial figures and imagery */
.editorial-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.editorial-img-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-rule);
  background-color: var(--color-white);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.editorial-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 400ms ease;
}

.editorial-figure:hover .editorial-img {
  transform: scale(1.02);
}

.editorial-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  color: var(--color-ink-faint);
  line-height: 1.5;
  margin-top: var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--color-brand);
}

/* Service meta card / deliverables */
.service-meta-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--sp-8);
  margin-top: var(--sp-6);
}

.service-detail--surface .service-meta-card {
  background-color: var(--color-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.service-meta-title {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--color-rule);
}

.deliverables-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.deliverables-checklist li {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  line-height: 1.5;
  position: relative;
  padding-left: 1.5rem;
}

.deliverables-checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-brand);
  font-weight: var(--fw-bold);
  font-size: 0.875rem;
}

/* Specifications row */
.service-specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-rule);
}

.spec-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spec-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.spec-value {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-ink);
  font-weight: var(--fw-medium);
}

/* ============================================================
   SERVICE COMPARISON MATRIX
   ============================================================ */
.service-matrix {
  padding-block: var(--section-py);
  background-color: var(--color-surface);
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: var(--sp-8);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--fs-sm);
  min-width: 680px;
}

.comparison-table th,
.comparison-table td {
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--color-rule);
  vertical-align: top;
}

.comparison-table th {
  background-color: var(--color-surface);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  font-size: var(--fs-label);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.comparison-table tbody tr:last-child td {
  border-bottom: none;
}

.comparison-table tbody tr:hover td {
  background-color: rgba(112, 45, 78, 0.02);
}

.comparison-table .col-service {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  color: var(--color-brand);
  white-space: nowrap;
}

/* ============================================================
   QUALITY ASSURANCE 5-STAGE PROTOCOL
   ============================================================ */
.protocol-section {
  padding-block: var(--section-py);
  background-color: var(--color-white);
}

.protocol-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-12);
}

.protocol-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  position: relative;
}

.protocol-step-num {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: var(--fw-bold);
  color: var(--color-brand);
  line-height: 1;
  margin-bottom: var(--sp-3);
  opacity: 0.85;
}

.protocol-card h4 {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin-bottom: var(--sp-2);
}

.protocol-card p {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE HOOKS FOR INNER PAGES
   ============================================================ */
@media (min-width: 640px) {
  .service-specs {
    grid-template-columns: repeat(2, 1fr);
  }
  .protocol-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .service-grid-7-5 {
    grid-template-columns: 7fr 5fr;
    gap: var(--sp-16);
  }
  .service-grid-5-7 {
    grid-template-columns: 5fr 7fr;
    gap: var(--sp-16);
  }
  .service-grid-6-6 {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-16);
  }
  .protocol-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .page-hero {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* ============================================================
   INSIGHTS DYNAMIC — empty state + linked card titles
   ============================================================ */

/* Empty state shown when no articles are published yet */
.insights-empty-state {
  padding-block: var(--sp-16);
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

.insights-empty-title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  color: var(--color-ink-heading);
  margin-bottom: var(--sp-4);
}

.insights-empty-body {
  font-size: var(--fs-base);
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
  margin-bottom: var(--sp-8);
}

/* Linked titles inside spotlight and article cards */
.spotlight-title a,
.article-card h3 a {
  color: inherit;
  text-decoration: none;
}

.spotlight-title a:hover,
.spotlight-title a:focus-visible,
.article-card h3 a:hover,
.article-card h3 a:focus-visible {
  color: var(--color-brand);
  text-decoration: underline;
}

/* Article card footer link */
.article-card-footer a {
  color: var(--color-brand);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.article-card-footer a:hover,
.article-card-footer a:focus-visible {
  text-decoration: underline;
}

/* ============================================================
   ARTICLE BODY (Eleventy-generated insight pages)
   ============================================================ */
.article-body-section {
  padding-block: var(--sp-16);
}

.article-body-wrap {
  max-width: 44rem;
  margin-inline: auto;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
}

.article-body-wrap h2 {
  font-family: var(--font-sans);
  font-size: clamp(1.25rem, 2.5vw, var(--fs-h3));
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-4);
  letter-spacing: -0.01em;
}

.article-body-wrap h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}

.article-body-wrap p {
  margin-bottom: var(--sp-5);
}

.article-body-wrap ul,
.article-body-wrap ol {
  padding-left: var(--sp-6);
  margin-bottom: var(--sp-5);
}

.article-body-wrap li {
  margin-bottom: var(--sp-2);
}

.article-body-wrap strong {
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

.article-body-wrap em {
  font-style: italic;
}

.article-cta-wrap {
  max-width: 44rem;
  margin-inline: auto;
  margin-top: var(--sp-16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}

/* ============================================================
   THANK-YOU PAGE
   ============================================================ */
.thankyou-wrap {
  max-width: 42rem;
  margin-inline: auto;
  padding-block: var(--sp-16);
  text-align: center;
}

.thankyou-wrap .section-label {
  display: block;
  margin-bottom: var(--sp-4);
}

.thankyou-wrap h1 {
  font-size: clamp(1.75rem, 4vw, var(--fs-h2));
  margin-bottom: var(--sp-6);
}

.thankyou-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink-muted);
  margin-bottom: var(--sp-4);
}

.thankyou-body:last-of-type {
  margin-bottom: var(--sp-10);
}

.thankyou-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background-color: var(--color-ink);
  color: var(--color-white);
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-8);
}

.footer-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: 6px;
}

.footer-brand-logo {
  display: block;
  width: 26px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.footer-brand-name {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  color: var(--color-white);
  display: block;
}

.footer-brand-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--sp-6);
}

.footer-brand-desc {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.65;
  max-width: 22rem;
}

.footer-col h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.footer-col a {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-col a:hover {
  color: var(--color-white);
}

.footer-col a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 3px;
  border-radius: 2px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-8);
}

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

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

.footer-legal a {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-legal a:hover {
  color: rgba(255, 255, 255, 0.75);
}

.footer-legal a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   RESPONSIVE — TABLET (≥ 640px)
   ============================================================ */
@media (min-width: 640px) {
  .industries-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .insights-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-step--bonus {
    grid-column: 1 / -1;
  }
}

/* ============================================================
   RESPONSIVE — TABLET LANDSCAPE (≥ 768px)
   ============================================================ */
@media (min-width: 768px) {
  .section {
    padding-block: var(--section-py);
  }

  .hero {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .industries-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-8);
  }

  .services-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--sp-16);
  }

  /* Ensure bottom border on last row in two-column services grid */
  .service-item:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--color-rule);
  }

  .credibility-inner {
    grid-template-columns: 5fr 7fr;
    gap: var(--sp-16);
    align-items: start;
  }

  .process-steps {
    grid-template-columns: repeat(4, 1fr);
    position: relative;
    gap: var(--sp-6);
  }

  .process-step--bonus {
    grid-column: 1 / -1;
  }

  /* Subtle connector between process steps 1 to 3 */
  .process-step:not(:last-child):not(:nth-child(4))::after {
    content: '';
    position: absolute;
    top: 1.125rem;
    right: -0.75rem;
    width: 1.5rem;
    height: 1px;
    background-color: var(--color-rule);
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--sp-16);
  }

  /* Remove orphan bottom border in why grid */
  .why-item:nth-last-child(1):nth-child(odd) {
    border-bottom: 1px solid var(--color-rule);
  }

  .insights-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
  }

  .footer-main {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--sp-8);
  }
}

/* ============================================================
   RESPONSIVE — DESKTOP (≥ 1024px)
   ============================================================ */
@media (min-width: 1024px) {
  /* Show desktop nav, hide mobile toggle */
  .nav-links {
    display: flex;
  }

  .nav-cta {
    display: inline-flex;
  }

  .nav-toggle {
    display: none;
  }

  .hero {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .section {
    padding-block: var(--section-py);
  }

  .process-steps {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-6);
  }

  .process-step--bonus {
    grid-column: auto;
  }

  .process-step:not(:last-child)::after {
    display: block;
  }
}

/* ============================================================
   RESPONSIVE — MOBILE (< 1024px) — hide desktop nav elements
   ============================================================ */
@media (max-width: 1023px) {
  .nav-links {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .hero {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  /* On mobile: video takes full width behind text */
  .hero-video-wrap {
    width: 100%;
    opacity: 0.35;
  }

  .section {
    padding-block: var(--section-py-sm);
  }

  .section-header {
    margin-bottom: var(--sp-8);
  }

  .credibility-inner {
    grid-template-columns: 1fr;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }
}

@media (max-width: 639px) {
  .footer-main {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   ABOUT PAGE — ADDITIONAL COMPONENTS
   ============================================================ */

/* Background surface utility (used on alternating sections) */
.bg-surface {
  background-color: var(--color-surface);
}

/* --- Four Principles section -------------------------------- */
.about-principles {
  padding-block: var(--section-py);
  background-color: var(--color-white);
}

.about-principles-inner {
  max-width: var(--max-w-narrow);
  margin-inline: auto;
  text-align: center;
}

.about-principles-inner h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--color-ink);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-12);
}

.principles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  text-align: left;
  margin-top: var(--sp-12);
}

.principle-item {
  padding-block: var(--sp-8);
  border-top: 1px solid var(--color-rule);
}

.principle-item:last-child {
  border-bottom: 1px solid var(--color-rule);
}

.principle-item h3 {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-3);
}

.principle-item p {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
}

@media (min-width: 640px) {
  .about-principles-inner {
    max-width: var(--max-w);
  }

  .principles-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--sp-16);
  }

  /* Even items in two-column — make top-row items not have top border doubled */
  .principle-item:nth-child(1),
  .principle-item:nth-child(2) {
    border-top: 1px solid var(--color-rule);
  }

  /* Remove orphan bottom border on last odd item in 2-col grid */
  .principle-item:nth-last-child(1):nth-child(odd) {
    border-bottom: 1px solid var(--color-rule);
  }
}

/* --- Company Structure section ------------------------------ */
.about-structure {
  padding-block: var(--section-py);
  background-color: var(--color-white);
  border-top: 1px solid var(--color-rule);
}

.about-structure-inner {
  max-width: var(--max-w);
  margin-inline: auto;
}

.about-structure-inner h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--color-ink);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-6);
  max-width: 32rem;
}

.about-structure-body {
  max-width: 48rem;
  margin-bottom: var(--sp-12);
}

.about-structure-body p {
  font-size: var(--fs-body);
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
  margin-bottom: var(--sp-4);
}

.about-structure-body p:last-child {
  margin-bottom: 0;
}

.about-structure-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--color-rule);
}

.structure-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.structure-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.structure-value {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-ink);
  font-weight: var(--fw-medium);
}

@media (min-width: 640px) {
  .about-structure-meta {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-8);
  }
}

/* --- CTA Band (white / light closing CTA) ------------------- */
.cta-band {
  padding-block: var(--section-py);
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-rule);
}

.cta-band-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  align-items: flex-start;
}

.cta-band-copy h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--color-ink);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-4);
}

.cta-band-copy p {
  font-size: var(--fs-body);
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
  max-width: 44rem;
}

.cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}

@media (min-width: 768px) {
  .cta-band-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-12);
  }

  .cta-band-copy {
    flex: 1;
  }

  .cta-band-actions {
    flex-shrink: 0;
    flex-direction: column;
    align-items: stretch;
  }
}

/* --- Button large modifier ---------------------------------- */
.btn-lg {
  font-size: var(--fs-body);
  padding: 1rem 2rem;
}

/* ============================================================
   CONTACT & ASSESSMENT FORM COMPONENTS
   ============================================================ */
.contact-section {
  padding-block: var(--section-py);
  background-color: var(--color-white);
}

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

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: 7fr 5fr;
    gap: var(--sp-16);
  }
}

/* Contact form card */
.contact-form-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--sp-8);
}

@media (min-width: 640px) {
  .contact-form-card {
    padding: var(--sp-12);
  }
}

.contact-form-header {
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--color-rule);
}

.contact-form-header h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-ink);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-2);
}

.contact-form-header p {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
}

/* Form structure */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 640px) {
  .form-row-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.form-label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-label .required-mark {
  color: var(--color-brand);
  font-weight: var(--fw-bold);
}

.form-hint {
  font-size: var(--fs-label);
  color: var(--color-ink-faint);
  line-height: 1.4;
}

/* Form inputs & controls */
.form-input,
.form-select,
.form-textarea {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-ink);
  background-color: var(--color-white);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-ink-faint);
  opacity: 0.7;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(112, 45, 78, 0.15);
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
  cursor: pointer;
}

.form-textarea {
  min-height: 7.5rem;
  resize: vertical;
  line-height: var(--lh-body);
}

/* Checkbox group */
.form-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-block: var(--sp-2);
}

.form-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
}

.form-checkbox-input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--color-rule);
  border-radius: 2px;
  background-color: var(--color-white);
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
  display: grid;
  place-content: center;
  transition: all var(--transition);
}

.form-checkbox-input:checked {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
}

.form-checkbox-input:checked::before {
  content: '';
  width: 0.65rem;
  height: 0.35rem;
  border-left: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: rotate(-45deg) translate(1px, -1px);
}

.form-checkbox-input:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* Form status feedback */
.form-feedback {
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.5;
  display: none;
}

.form-feedback.is-visible {
  display: block;
}

.form-feedback--success {
  background-color: rgba(112, 45, 78, 0.08);
  border: 1px solid var(--color-brand);
  color: var(--color-brand-dark);
}

.form-feedback--error {
  background-color: #FFF0F0;
  border: 1px solid #D32F2F;
  color: #B71C1C;
}

/* Contact Info & Assessment Process Sidebar */
.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.sidebar-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--sp-8);
}

.sidebar-card-title {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--color-rule);
}

.assessment-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin-top: var(--sp-4);
}

.assessment-step-item {
  position: relative;
  padding-left: 2.75rem;
}

.assessment-step-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: var(--color-surface);
  border: 1px solid var(--color-rule);
  color: var(--color-brand);
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.assessment-step-item h4 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin-bottom: 2px;
}

.assessment-step-item p {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  line-height: 1.5;
}

.contact-channels {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.channel-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.channel-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-faint);
}

.channel-value {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-ink);
  font-weight: var(--fw-medium);
}

.channel-value a {
  color: var(--color-brand);
  text-decoration: none;
  transition: color var(--transition);
}

.channel-value a:hover {
  text-decoration: underline;
}

.channel-value a:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* ============================================================
   INSIGHTS PAGE DEDICATED COMPONENTS
   ============================================================ */
.insights-page-section {
  padding-block: var(--section-py);
  background-color: var(--color-white);
}

/* Category Filter Bar */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-12);
  scrollbar-width: none;
}

.filter-bar::-webkit-scrollbar {
  display: none;
}

.filter-btn {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink-muted);
  background-color: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
}

.filter-btn:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.filter-btn.is-active {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-white);
}

.filter-btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* Featured Insight Spotlight */
.featured-spotlight {
  background-color: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--sp-8);
  margin-bottom: var(--sp-16);
}

@media (min-width: 768px) {
  .featured-spotlight {
    padding: var(--sp-12);
  }
}

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

@media (min-width: 1024px) {
  .spotlight-grid {
    grid-template-columns: 7fr 5fr;
    gap: var(--sp-16);
  }
}

.spotlight-header {
  margin-bottom: var(--sp-4);
}

.spotlight-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--color-ink);
  line-height: var(--lh-snug);
  margin-block: var(--sp-3) var(--sp-4);
}

.spotlight-lead {
  font-size: var(--fs-body);
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
  margin-bottom: var(--sp-6);
}

.spotlight-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-ink-faint);
  margin-bottom: var(--sp-6);
}

.spotlight-card-side {
  background-color: var(--color-white);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: var(--sp-8);
}

.spotlight-card-side h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--color-rule);
}

.spotlight-takeaways {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.spotlight-takeaways li {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  line-height: 1.5;
  position: relative;
  padding-left: 1.5rem;
}

.spotlight-takeaways li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-brand);
  font-weight: var(--fw-bold);
}

/* Insight Cards Grid */
.insights-article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}

@media (min-width: 640px) {
  .insights-article-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .insights-article-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-8);
  }
}

.article-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.article-card:hover {
  border-color: var(--color-brand);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(112, 45, 78, 0.06);
}

.article-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.article-category {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--color-brand);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-read-time {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  color: var(--color-ink-faint);
}

.article-card h3 {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-3);
}

.article-card p {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
  flex-grow: 1;
  margin-bottom: var(--sp-6);
}

.article-card-footer {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--color-brand);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ============================================================
   LEGAL & EDITORIAL PROSE DOCUMENT STYLES
   ============================================================ */
.legal-section {
  padding-block: var(--section-py);
  background-color: var(--color-white);
}

.legal-container {
  max-width: 52rem;
  margin-inline: auto;
}

.legal-prose {
  font-family: var(--font-sans);
  color: var(--color-ink-muted);
}

.legal-prose h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  line-height: var(--lh-snug);
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--color-rule);
}

.legal-prose h2:first-of-type {
  margin-top: 0;
}

.legal-prose h3 {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
  line-height: var(--lh-snug);
}

.legal-prose p {
  font-size: 1.0625rem;
  line-height: var(--lh-body);
  color: var(--color-ink-muted);
  margin-bottom: var(--sp-4);
}

.legal-prose ul,
.legal-prose ol {
  margin-bottom: var(--sp-6);
  padding-left: 1.5rem;
  color: var(--color-ink-muted);
  line-height: var(--lh-body);
}

.legal-prose li {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
}

.legal-prose a {
  color: var(--color-brand);
  text-decoration: underline;
  transition: color var(--transition);
}

.legal-prose a:hover {
  color: var(--color-brand-dark);
}

.legal-prose strong {
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
}

.legal-callout {
  background-color: var(--color-surface);
  border-left: 3px solid var(--color-brand);
  padding: var(--sp-6);
  margin-block: var(--sp-6);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.legal-callout p {
  font-size: var(--fs-sm);
  color: var(--color-ink);
  margin-bottom: 0;
  line-height: 1.6;
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE (< 400px)
   ============================================================ */
@media (max-width: 399px) {
  :root {
    --sp-6: 1.25rem; /* Reduce side padding slightly */
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    text-align: center;
  }
}


/* ============================================================
   DESKTOP DROPDOWN — aria-expanded visual complement
   ============================================================ */

/* Arrow rotates when JS sets aria-expanded="true" on the trigger */
.nav-dropdown-trigger[aria-expanded="true"] .nav-dropdown-arrow {
  transform: rotate(180deg);
  color: var(--color-brand);
}

/* ============================================================
   FILTER BUTTONS — aria-pressed visual state
   ============================================================ */

/* Match .is-active styling so either class works */
.filter-btn[aria-pressed="true"] {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-white);
}

/* ============================================================
   SCROLL-TRIGGERED HEADING ANIMATIONS
   Applied by JS (IntersectionObserver) on all pages.
   Pre-animation state: invisible + slightly below.
   Post-animation (is-revealed): fades in and rises into place.
   Parallax shift applied via CSS custom property --heading-parallax.
   ============================================================ */

.heading-anim {
  opacity: 0;
  transform: translateY(28px) translateY(var(--heading-parallax, 0px));
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.heading-anim.is-revealed {
  opacity: 1;
  transform: translateY(0px) translateY(var(--heading-parallax, 0px));
}

/* Stagger children in the same section slightly */
h2.heading-anim  { transition-delay: 0.05s; }
h3.heading-anim  { transition-delay: 0.10s; }
.section-label.heading-anim { transition-delay: 0s; }

/* Reduced-motion: skip animation entirely */
@media (prefers-reduced-motion: reduce) {
  .heading-anim {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}