/* ============================================================
   pages/home.css
   Extracted from home.html <style> blocks 1, 2, 3
   ============================================================ */

/* ── Block 1: homepage theme shell & preset overrides ── */
  @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

  .homepage-theme-shell {
    position: relative;
    isolation: isolate;
    margin-inline: 0;
    font-family: 'Manrope', 'Segoe UI', sans-serif;
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  .homepage-theme-shell .public-display,
  .homepage-theme-shell .public-title,
  .homepage-theme-shell .public-lead,
  .homepage-theme-shell .home-readable-heading,
  .homepage-theme-shell .home-readable-muted,
  .homepage-theme-shell .public-button,
  .homepage-theme-shell .public-button-secondary,
  .homepage-theme-shell .public-chip,
  .homepage-theme-shell .hero-support-item-label,
  .homepage-theme-shell .hero-support-item-value,
  .homepage-theme-shell .public-stage-label,
  .homepage-theme-shell .public-stage-heading,
  .homepage-theme-shell .public-stage-muted,
  .homepage-theme-shell .public-stage-chip {
    font-family: inherit;
  }

  .homepage-theme-shell .public-display {
    letter-spacing: -0.028em;
    line-height: 1.08;
    font-weight: 800;
    text-wrap: balance;
  }

  .homepage-theme-shell .public-title,
  .homepage-theme-shell .home-readable-heading {
    letter-spacing: -0.02em;
    line-height: 1.12;
    font-weight: 800;
    text-wrap: balance;
  }

  .homepage-theme-shell .public-lead,
  .homepage-theme-shell .home-readable-muted {
    letter-spacing: 0;
    line-height: 1.82;
    font-weight: 500;
  }

  .homepage-theme-shell .public-button,
  .homepage-theme-shell .public-button-secondary,
  .homepage-theme-shell .public-chip,
  .homepage-theme-shell .public-stage-chip {
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  body.homepage-page.homepage-preset-dark,
  body.homepage-page.preset-mode-dark {
    color-scheme: dark;
    --theme-page-text: #f8fafc;
    --public-nav-link-color: rgba(226, 232, 240, 0.78);
    --public-nav-link-hover-bg: rgba(255, 255, 255, 0.08);
    --public-nav-link-hover-color: #f8fafc;
    --public-panel-bg: linear-gradient(180deg, rgba(2,6,23,0.94), rgba(15,23,42,0.90));
    --public-panel-border: rgba(96, 165, 250, 0.14);
    --public-card-bg: linear-gradient(180deg, rgba(4,10,24,0.96), rgba(15,23,42,0.92));
    --public-card-border: rgba(96, 165, 250, 0.16);
    --public-subcard-bg: linear-gradient(180deg, rgba(8,12,24,0.98), rgba(18,33,66,0.94));
    --public-text-strong: #f8fafc;
    --public-text-muted: rgba(226, 232, 240, 0.86);
    --public-text-soft: rgba(203, 213, 225, 0.72);
    --public-divider-color: rgba(96, 165, 250, 0.12);
    --public-control-bg: rgba(4,10,24,0.92);
    --public-control-border: rgba(96, 165, 250, 0.18);
    --public-control-hover-bg: rgba(18,33,66,0.96);
    --public-control-text: #f8fafc;
    --public-input-bg: rgba(4,10,24,0.90);
    --public-input-border: rgba(96, 165, 250, 0.18);
    --public-input-text: #f8fafc;
    --public-shell-ambient-opacity: 0.92;
  }

  body.homepage-page.homepage-preset-dark .public-nav-shell,
  body.homepage-page.preset-mode-dark .public-nav-shell,
  body.homepage-page.homepage-preset-dark .public-nav-wrap,
  body.homepage-page.preset-mode-dark .public-nav-wrap {
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
    backdrop-filter: none !important;
  }

  body.homepage-page.homepage-preset-dark .public-brand-name,
  body.homepage-page.preset-mode-dark .public-brand-name,
  body.homepage-page.homepage-preset-dark .public-nav-link,
  body.homepage-page.preset-mode-dark .public-nav-link,
  body.homepage-page.homepage-preset-dark .public-nav-text-link,
  body.homepage-page.preset-mode-dark .public-nav-text-link,
  body.homepage-page.homepage-preset-dark .public-nav-user-label,
  body.homepage-page.preset-mode-dark .public-nav-user-label,
  body.homepage-page.homepage-preset-dark .public-nav-icon-link,
  body.homepage-page.preset-mode-dark .public-nav-icon-link,
  body.homepage-page.homepage-preset-dark .public-nav-badge,
  body.homepage-page.preset-mode-dark .public-nav-badge,
  body.homepage-page.homepage-preset-dark .public-nav-menu,
  body.homepage-page.preset-mode-dark .public-nav-menu {
    color: var(--public-text-muted, rgba(226, 232, 240, 0.86)) !important;
  }

  body.homepage-page.homepage-preset-dark .public-brand-meta,
  body.homepage-page.preset-mode-dark .public-brand-meta,
  body.homepage-page.homepage-preset-dark .public-nav-shell .text-slate-400,
  body.homepage-page.preset-mode-dark .public-nav-shell .text-slate-400,
  body.homepage-page.homepage-preset-dark .public-nav-shell .text-slate-300,
  body.homepage-page.preset-mode-dark .public-nav-shell .text-slate-300 {
    color: var(--public-text-soft, rgba(203, 213, 225, 0.72)) !important;
  }

  body.homepage-page.homepage-preset-dark .public-nav-link:hover,
  body.homepage-page.preset-mode-dark .public-nav-link:hover,
  body.homepage-page.homepage-preset-dark .public-nav-text-link:hover,
  body.homepage-page.preset-mode-dark .public-nav-text-link:hover,
  body.homepage-page.homepage-preset-dark .public-nav-icon-link:hover,
  body.homepage-page.preset-mode-dark .public-nav-icon-link:hover,
  body.homepage-page.homepage-preset-dark .public-nav-menu:hover,
  body.homepage-page.preset-mode-dark .public-nav-menu:hover {
    color: var(--public-text-strong, #f8fafc) !important;
    background: color-mix(in srgb, var(--public-subcard-bg, rgba(15, 23, 42, 0.24)) 34%, transparent) !important;
  }

  body.public-site-body.homepage-page.homepage-preset-dark::before {
    background:
      radial-gradient(circle at 22% 8%, rgba(var(--theme-primary-rgb), calc(0.10 * var(--ds-glow-factor, 0.7))), transparent 18%),
      radial-gradient(circle at 78% 10%, rgba(var(--theme-secondary-rgb), calc(0.08 * var(--ds-glow-factor, 0.7))), transparent 18%);
    mask-image: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.10) 24%, transparent 60%);
    opacity: 0.42;
  }

  .home-theme-section {
    --home-section-heading: var(--section-text, #0f172a);
    --home-section-muted: var(--section-muted-text, color-mix(in srgb, var(--home-section-heading) 72%, #64748b));
    --home-section-soft: var(--section-soft-text, color-mix(in srgb, var(--home-section-heading) 54%, #94a3b8));
  }

  body.theme-dark .home-theme-section,
  body.ui-mode-dark .home-theme-section,
  body.preset-mode-dark .home-theme-section,
  body.preset-preview-mode-dark .home-theme-section,
  body.homepage-page.homepage-preset-dark .home-theme-section {
    --home-section-heading: var(--section-text, var(--public-text-strong, #f8fafc));
    --home-section-muted: var(--section-muted-text, rgba(226, 232, 240, 0.9));
    --home-section-soft: var(--section-soft-text, rgba(203, 213, 225, 0.78));
  }

  body.theme-dark .homepage-theme-shell .public-title,
  body.theme-dark .homepage-theme-shell .public-display,
  body.theme-dark .homepage-theme-shell .home-readable-heading,
  body.theme-dark .homepage-theme-shell .public-stat-value,
  body.homepage-page.homepage-preset-dark .homepage-theme-shell .public-title,
  body.homepage-page.homepage-preset-dark .homepage-theme-shell .public-display,
  body.homepage-page.homepage-preset-dark .homepage-theme-shell .home-readable-heading,
  body.homepage-page.homepage-preset-dark .homepage-theme-shell .public-stat-value {
    color: #f8fafc !important;
  }

  body.theme-dark .homepage-theme-shell .public-lead,
  body.theme-dark .homepage-theme-shell .home-readable-muted,
  body.theme-dark .homepage-theme-shell .public-stat-label,
  body.theme-dark .homepage-theme-shell .faq-answer,
  body.homepage-page.homepage-preset-dark .homepage-theme-shell .public-lead,
  body.homepage-page.homepage-preset-dark .homepage-theme-shell .home-readable-muted,
  body.homepage-page.homepage-preset-dark .homepage-theme-shell .public-stat-label,
  body.homepage-page.homepage-preset-dark .homepage-theme-shell .faq-answer {
    color: rgba(226, 232, 240, 0.9) !important;
  }

  body.theme-dark .homepage-theme-shell .home-readable-soft,
  body.theme-dark .homepage-theme-shell .text-slate-400,
  body.theme-dark .homepage-theme-shell .text-gray-400,
  body.homepage-page.homepage-preset-dark .homepage-theme-shell .home-readable-soft,
  body.homepage-page.homepage-preset-dark .homepage-theme-shell .text-slate-400,
  body.homepage-page.homepage-preset-dark .homepage-theme-shell .text-gray-400 {
    color: rgba(203, 213, 225, 0.78) !important;
  }

  body.theme-dark .homepage-theme-shell .public-kicker,
  body.homepage-page.homepage-preset-dark .homepage-theme-shell .public-kicker {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(96, 165, 250, 0.2);
    color: rgba(226, 232, 240, 0.92);
  }

  .home-theme-section .public-title,
  .home-theme-section .faq-toggle,
  .home-theme-section .public-stat-value {
    color: var(--home-section-heading) !important;
  }

  .home-theme-section .public-lead,
  .home-theme-section .public-stat-label,
  .home-theme-section .faq-answer {
    color: var(--home-section-muted) !important;
  }

  .homepage-theme-shell .text-slate-950,
  .homepage-theme-shell .text-slate-900,
  .homepage-theme-shell .text-slate-800,
  .homepage-theme-shell .text-slate-700 {
    color: var(--public-text-strong, #0f172a) !important;
  }

  .homepage-theme-shell .text-slate-600,
  .homepage-theme-shell .text-slate-500,
  .homepage-theme-shell .text-gray-600,
  .homepage-theme-shell .text-gray-500 {
    color: var(--public-text-muted, #475569) !important;
  }

  .homepage-theme-shell .text-slate-400,
  .homepage-theme-shell .text-gray-400 {
    color: var(--public-text-soft, #94a3b8) !important;
  }

  .homepage-theme-shell .border-slate-200,
  .homepage-theme-shell .border-slate-200\/70,
  .homepage-theme-shell .border-slate-100 {
    border-color: var(--public-divider-color, rgba(148, 163, 184, 0.18)) !important;
  }

  .homepage-theme-shell .bg-slate-50,
  .homepage-theme-shell .bg-slate-100,
  .homepage-theme-shell .bg-white {
    background: color-mix(in srgb, var(--public-subcard-bg, rgba(255, 255, 255, 0.94)) 88%, transparent) !important;
  }

  .homepage-theme-shell .bg-slate-950 {
    background: linear-gradient(180deg, color-mix(in srgb, var(--public-card-bg, rgba(15, 23, 42, 0.96)) 92%, black), color-mix(in srgb, var(--public-panel-bg, rgba(15, 23, 42, 0.92)) 94%, black)) !important;
  }

  .home-theme-section .home-readable-heading {
    color: var(--home-section-heading) !important;
  }

  .home-theme-section .home-readable-muted {
    color: var(--home-section-muted) !important;
  }

  .home-theme-section .home-readable-soft {
    color: var(--home-section-soft) !important;
  }

  body.theme-light:not(.preset-mode-dark):not(.ui-mode-dark) .homepage-theme-shell .homepage-cta-panel :is(.public-title, .home-readable-heading) {
    color: var(--public-text-strong, #0f172a) !important;
  }

  body.theme-light:not(.preset-mode-dark):not(.ui-mode-dark) .homepage-theme-shell .homepage-cta-panel :is(.public-lead, .home-readable-muted) {
    color: var(--public-text-muted, #475569) !important;
  }

  .themed-hero .public-display,
  .themed-hero .public-title,
  .themed-hero .public-lead,
  .themed-hero .public-stat-value,
  .themed-hero .public-stat-label {
    color: inherit !important;
  }

  .homepage-theme-shell .public-kicker,
  .homepage-theme-shell .public-hero-badge {
    display: none !important;
  }

  .themed-hero .public-display {
    max-width: 18ch;
    line-height: 1.1;
  }

  .themed-hero .public-lead {
    max-width: 52rem;
    text-align: justify;
  }

  .homepage-theme-shell .faq-answer {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 420ms ease, opacity 360ms ease;
  }

  .homepage-theme-shell .faq-answer.is-open {
    max-height: 520px;
    opacity: 1;
  }

  .themed-hero .public-actions {
    padding-top: 0.85rem;
    gap: 1rem;
  }

  .themed-hero .public-button,
  .themed-hero .public-button-secondary {
    position: relative;
    z-index: 2;
    min-width: 11.5rem;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255,255,255,0.18);
  }

  .themed-hero .public-button {
    border-color: color-mix(in srgb, var(--section-primary) 28%, rgba(255,255,255,0.34));
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--section-primary) 82%, black 18%),
      color-mix(in srgb, var(--section-secondary) 84%, black 16%)
    ) !important;
    color: #ffffff !important;
  }

  .themed-hero .public-button-secondary {
    background: color-mix(in srgb, var(--section-primary) 10%, rgba(255,255,255,0.14)) !important;
    border: 1px solid color-mix(in srgb, var(--section-primary) 20%, rgba(255,255,255,0.42)) !important;
    color: inherit !important;
  }

  .themed-hero .public-button:hover,
  .themed-hero .public-button-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 44px rgba(15, 23, 42, 0.24), inset 0 1px 0 rgba(255,255,255,0.22);
  }

  /* Light / neutral presets: hero uses dark readable text */
  body.homepage-page:not(.homepage-preset-dark):not(.preset-mode-dark) .themed-hero {
    color: #0f172a !important; /* !important beats the inline color: var(--section-text) */
  }
  body.homepage-page:not(.homepage-preset-dark):not(.preset-mode-dark) .themed-hero .public-display,
  body.homepage-page:not(.homepage-preset-dark):not(.preset-mode-dark) .themed-hero .public-title,
  body.homepage-page:not(.homepage-preset-dark):not(.preset-mode-dark) .themed-hero .public-lead,
  body.homepage-page:not(.homepage-preset-dark):not(.preset-mode-dark) .themed-hero .public-stat-value,
  body.homepage-page:not(.homepage-preset-dark):not(.preset-mode-dark) .themed-hero .public-stat-label {
    color: #0f172a !important;
  }
  body.homepage-page:not(.homepage-preset-dark):not(.preset-mode-dark) .themed-hero .public-button {
    background: linear-gradient(135deg, #0f172a, #334155) !important;
    border-color: rgba(15, 23, 42, 0.24) !important;
    color: #ffffff !important;
  }
  body.homepage-page:not(.homepage-preset-dark):not(.preset-mode-dark) .themed-hero .public-button-secondary {
    background: rgba(15, 23, 42, 0.10) !important;
    border: 1px solid rgba(15, 23, 42, 0.28) !important;
    color: #0f172a !important;
  }
  /* Light hero: stage panel card — set dark stage vars and fix hardcoded text-white */
  body.homepage-page:not(.homepage-preset-dark):not(.preset-mode-dark) .themed-hero .public-stage,
  body.homepage-page:not(.homepage-preset-dark):not(.preset-mode-dark) .themed-hero .public-stage-panel {
    --public-stage-heading-color: #0f172a;
    --public-stage-copy-color: #1e293b;
    --public-stage-muted-color: #475569;
    --public-stage-label-color: #64748b;
    --public-stage-chip-color: #0f172a;
    color: #0f172a !important;
  }
  body.homepage-page:not(.homepage-preset-dark):not(.preset-mode-dark) .themed-hero .public-stage .text-white,
  body.homepage-page:not(.homepage-preset-dark):not(.preset-mode-dark) .themed-hero .public-stage-panel .text-white {
    color: #0f172a !important;
  }
  body.homepage-page:not(.homepage-preset-dark):not(.preset-mode-dark) .themed-hero .border-white\/10 {
    border-color: rgba(15, 23, 42, 0.10) !important;
  }

  .homepage-bright-band {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    border: 1px solid var(--public-panel-border, rgba(148, 163, 184, 0.18));
    background: color-mix(in srgb, var(--public-panel-bg, rgba(255,255,255,0.97)) 94%, white 6%);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px) saturate(130%);
  }

  .homepage-bright-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--theme-primary-rgb), calc(0.05 * var(--ds-glow-factor, 0.7))), transparent 28%);
    pointer-events: none;
  }

  .homepage-cta-panel {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    border: 1px solid color-mix(in srgb, rgba(var(--theme-primary-rgb), calc(0.20 * var(--ds-glow-factor, 0.7))) 72%, var(--public-panel-border, rgba(148, 163, 184, 0.18)));
    background: linear-gradient(180deg, color-mix(in srgb, var(--public-panel-bg, rgba(255,255,255,0.97)) 94%, white 6%), color-mix(in srgb, var(--public-panel-bg, rgba(255,255,255,0.97)) 90%, rgba(var(--theme-primary-rgb), calc(0.04 * var(--ds-glow-factor, 0.7))) 10%));
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.10);
    backdrop-filter: blur(14px) saturate(130%);
  }

  .homepage-cta-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(var(--theme-primary-rgb), calc(0.08 * var(--ds-glow-factor, 0.7))), transparent 24%, transparent 76%, rgba(var(--theme-secondary-rgb), calc(0.08 * var(--ds-glow-factor, 0.7))));
  }

  .homepage-utility-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    border: 1px solid var(--public-card-border, rgba(148, 163, 184, 0.18));
    background: color-mix(in srgb, var(--public-card-bg, rgba(255,255,255,0.97)) 95%, white 5%);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    backdrop-filter: blur(12px) saturate(125%);
  }

  .homepage-utility-card::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(var(--theme-primary-rgb), 0.72), rgba(var(--theme-secondary-rgb), 0.48));
    opacity: 0.9;
  }

  .homepage-utility-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--theme-primary-rgb), 0.24);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.11);
  }

  /* Newsletter section: the outer <section> is full-viewport-width and carries
     .public-band / .public-band-contrast which paint a white gradient ::before
     across the entire viewport in dark mode. Suppress it — the inner panel
     provides its own background. */
  section:has(.homepage-newsletter-panel)::before {
    display: none !important;
  }

  /* Also suppress the preset-surface-* background on the contact section wrapper
     so the section's own --section-bg (or transparent) takes precedence. */
  section.home-theme-section:has(.homepage-cta-panel) {
    background: var(--section-bg, transparent) !important;
  }

  /* The trailing homepage-flow shell (wraps static newsletter + footer area)
     gets --public-shell-bg and ::before ambient glow which paint full-width bands.
     Suppress both so only the contained newsletter panel provides any colour. */
  #hp-static-shell {
    background: transparent !important;
  }
  #hp-static-shell::before {
    display: none !important;
  }

  /* ── Clients Scroller ─────────────────────────────────────────────── */
  .hp-clients-marquee-shell {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  .hp-clients-marquee-viewport {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
    cursor: grab;
  }
  .hp-clients-marquee-track {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: max-content;
  }
  .hp-clients-marquee-set {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
    padding-right: 2.5rem;
    flex-shrink: 0;
  }
  .hp-clients-marquee-track.is-animated {
    animation: hpClientsScroll var(--clients-scroll-duration, 38s) linear infinite;
    will-change: transform;
  }
  .hp-clients-marquee-shell:hover .hp-clients-marquee-track.is-animated {
    animation-play-state: paused;
  }
  @keyframes hpClientsScroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }
  .hp-client-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }
  .hp-client-link { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-decoration: none; }
  .hp-client-logo {
    object-fit: contain;
    object-position: center;
    filter: grayscale(1);
    opacity: 0.65;
    transition: filter 0.2s, opacity 0.2s;
  }
  .hp-client-item:hover .hp-client-logo { filter: grayscale(0); opacity: 1; }
  .hp-client-sm .hp-client-logo { width: 80px;  height: 40px; }
  .hp-client-md .hp-client-logo { width: 120px; height: 52px; }
  .hp-client-lg .hp-client-logo { width: 160px; height: 68px; }
  .hp-client-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--public-text-muted, #64748b);
    text-align: center;
    white-space: nowrap;
  }
  .hp-client-name-only {
    font-size: 1rem;
    font-weight: 700;
    color: var(--public-text-muted, #64748b);
    white-space: nowrap;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(148,163,184,0.18);
    border-radius: 0.5rem;
  }
  body.theme-dark .hp-client-logo,
  body.preset-mode-dark .hp-client-logo { opacity: 0.55; }
  body.theme-dark .hp-client-item:hover .hp-client-logo,
  body.preset-mode-dark .hp-client-item:hover .hp-client-logo { opacity: 0.9; }
  @media (prefers-reduced-motion: reduce) {
    .hp-clients-marquee-track.is-animated { animation: none; }
  }
  @media (max-width: 767px) {
    .hp-clients-marquee-viewport { mask-image: none; -webkit-mask-image: none; }
    .hp-clients-marquee-track.is-animated { animation: none; }
    .hp-clients-marquee-set { gap: 1.5rem; padding-right: 1.5rem; }
  }

  .homepage-newsletter-panel {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    border: 1px solid color-mix(in srgb, rgba(var(--theme-primary-rgb), calc(0.20 * var(--ds-glow-factor, 0.7))) 72%, var(--public-panel-border, rgba(148, 163, 184, 0.18)));
    background: linear-gradient(180deg, color-mix(in srgb, var(--public-panel-bg, rgba(255,255,255,0.97)) 95%, white 5%), color-mix(in srgb, var(--public-panel-bg, rgba(255,255,255,0.97)) 90%, rgba(var(--theme-secondary-rgb), calc(0.04 * var(--ds-glow-factor, 0.7))) 10%));
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.10);
    backdrop-filter: blur(14px) saturate(130%);
  }

  .campaign-theme-section {
    --campaign-shell-bg: color-mix(in srgb, var(--section-panel-bg, var(--public-panel-bg, #ffffff)) 92%, transparent);
    --campaign-shell-border: color-mix(in srgb, var(--section-card-border, var(--public-divider-color, rgba(148,163,184,0.2))) 88%, transparent);
    --campaign-accent: var(--section-primary, var(--theme-primary, #2563eb));
    --campaign-accent-rgb: var(--section-primary-rgb, var(--theme-primary-rgb, 37, 99, 235));
    --campaign-text-main: var(--section-text, var(--public-text-strong, #0f172a));
    --campaign-text-muted: var(--section-muted-text, var(--public-text-muted, #475569));
  }

  .campaign-shell {
    width: 100%;
    border-radius: clamp(1.4rem, 2vw, 2rem);
    border: 1px solid var(--campaign-shell-border);
    background: var(--campaign-shell-bg);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
    padding: clamp(1.2rem, 2vw, 1.8rem);
  }

  /* Full-width banner already has a dedicated carousel surface.
     Avoid wrapping it in another bordered card to prevent nested frames. */
  .campaign-shell.is-full-banner {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: contents;
  }

  .campaign-display-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    padding: 0.36rem 0.78rem;
    border: 1px solid color-mix(in srgb, rgba(var(--campaign-accent-rgb), 0.28) 76%, transparent);
    background: color-mix(in srgb, rgba(var(--campaign-accent-rgb), 0.14) 82%, transparent);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: color-mix(in srgb, var(--campaign-text-main) 84%, #475569);
  }

  .campaign-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: clamp(1.2rem, 1.8vw, 1.9rem);
    border: 1px solid color-mix(in srgb, var(--section-card-border, rgba(148, 163, 184, 0.2)) 88%, transparent);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.12);
    background: color-mix(in srgb, var(--section-card-bg, rgba(255,255,255,0.94)) 92%, transparent);
    /* Grid stacking: slides occupy same cell so height = content height */
    display: grid;
  }

  /* No fixed min-height — the content padding drives the card height */
  .campaign-carousel-full { }
  .campaign-carousel-medium { }

  .campaign-slide {
    --campaign-card-bg-start: color-mix(in srgb, var(--section-primary, #2563eb) 84%, black 16%);
    --campaign-card-bg-end: color-mix(in srgb, var(--section-secondary, #7c3aed) 78%, black 22%);
    --campaign-card-text: var(--section-text, var(--public-text-strong, #0f172a));
    /* All slides share grid cell 1/1 so they overlay; container height = tallest visible slide */
    grid-area: 1 / 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Vertical padding + extra bottom for pagination dots */
    padding-top: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: calc(clamp(2.5rem, 5vw, 4rem) + 2.5rem);
    isolation: isolate;
    color: var(--campaign-card-text);
    background: linear-gradient(138deg, var(--campaign-card-bg-start), var(--campaign-card-bg-end));
  }

  .campaign-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 18% 16%, rgba(255,255,255,0.18), transparent 40%),
      radial-gradient(circle at 82% 12%, rgba(255,255,255,0.12), transparent 36%),
      linear-gradient(180deg, rgba(2, 6, 23, 0.08), rgba(2, 6, 23, 0.24));
    opacity: 0.72;
  }

  .campaign-media {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .campaign-media-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.1) contrast(1.05);
  }

  .campaign-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(2,6,23,0.64), rgba(2,6,23,0.42));
  }

  .campaign-content {
    position: relative;
    z-index: 2;
    width: min(100%, 56rem);
  }

  .campaign-slide-full .campaign-content {
    text-align: center;
    padding-inline: clamp(1rem, 2vw, 2.4rem);
  }

  .campaign-slide-medium {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .campaign-slide-medium .campaign-content {
    width: 100%;
    padding-inline: clamp(1rem, 2vw, 2rem);
  }

  @media (min-width: 900px) {
    .campaign-slide-medium {
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    }
  }

  .campaign-feature-image {
    display: none;
    height: 100%;
    min-height: clamp(13.5rem, 24vw, 18rem);
    background-size: cover;
    background-position: center;
  }

  @media (min-width: 900px) {
    .campaign-feature-image {
      display: block;
    }
  }

  .campaign-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 999px;
    padding: 0.65rem 1.2rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid rgba(255,255,255,0.34);
    background: rgba(255,255,255,0.14);
    color: currentColor;
    backdrop-filter: blur(10px);
    transition: transform 160ms ease, background 160ms ease;
  }

  .campaign-cta:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,0.22);
  }

  .campaign-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.9rem;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 0.42rem;
  }

  .campaign-pagination-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.42);
    transition: transform 160ms ease, background 160ms ease;
  }

  .campaign-grid {
    display: grid;
    width: 100%;
    gap: clamp(0.85rem, 1.2vw, 1.1rem);
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  @media (min-width: 760px) {
    .campaign-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1180px) {
    .campaign-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .campaign-grid-card {
    --campaign-card-bg-start: color-mix(in srgb, var(--section-primary, #2563eb) 82%, black 18%);
    --campaign-card-bg-end: color-mix(in srgb, var(--section-secondary, #7c3aed) 72%, black 28%);
    --campaign-card-text: var(--section-text, var(--public-text-strong, #0f172a));
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: clamp(14rem, 24vw, 18rem);
    overflow: hidden;
    border-radius: 1.4rem;
    border: 1px solid color-mix(in srgb, var(--section-card-border, rgba(148,163,184,0.24)) 88%, transparent);
    background: linear-gradient(136deg, var(--campaign-card-bg-start), var(--campaign-card-bg-end));
    color: var(--campaign-card-text);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
    transition: transform 180ms ease, box-shadow 180ms ease;
  }

  .campaign-grid-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.16);
  }

  .campaign-grid-card-content {
    position: relative;
    z-index: 2;
    margin-top: auto;
  }

  .homepage-flow {
    position: relative;
  }

  .homepage-flow .public-band::before,
  .homepage-flow .public-band-soft::before,
  .homepage-flow .public-band-contrast::before {
    display: none;
  }

  .homepage-flow .public-section,
  .homepage-flow .public-band,
  .homepage-flow .public-band-soft,
  .homepage-flow .public-band-contrast {
    background: transparent !important;
    background-image: none !important;
  }

  .homepage-flow .public-section::before,
  .homepage-flow .public-section::after,
  .homepage-flow .public-band::after,
  .homepage-flow .public-band-soft::after,
  .homepage-flow .public-band-contrast::after {
    display: none !important;
  }

  .homepage-flow .campaign-section-band,
  .homepage-flow .campaign-section-band::before {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.theme-dark .homepage-flow .public-band::before,
  body.theme-dark .homepage-flow .public-band-soft::before,
  body.theme-dark .homepage-flow .public-band-contrast::before {
    display: none;
  }

  body.theme-dark .homepage-flow .public-section,
  body.theme-dark .homepage-flow .public-band,
  body.theme-dark .homepage-flow .public-band-soft,
  body.theme-dark .homepage-flow .public-band-contrast,
  body.homepage-page.homepage-preset-dark .homepage-flow .public-section,
  body.homepage-page.homepage-preset-dark .homepage-flow .public-band,
  body.homepage-page.homepage-preset-dark .homepage-flow .public-band-soft,
  body.homepage-page.homepage-preset-dark .homepage-flow .public-band-contrast {
    background: transparent !important;
    background-image: none !important;
  }

  .homepage-section-shell {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }

  .homepage-flow .homepage-section-shell.mx-auto,
  .homepage-flow .public-hero-grid.mx-auto,
  .homepage-flow .public-hero.mx-auto {
    margin-inline: auto !important;
  }

  .homepage-flow .public-hero {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }

  .homepage-flow .public-hero-grid {
    width: 100%;
    max-width: none;
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: center;
  }

  .homepage-flow .public-hero-grid-home {
    grid-template-columns: minmax(0, 1.9fr) minmax(24rem, 0.9fr);
    align-items: center;
  }

  .homepage-flow .public-hero-grid-home > :first-child {
    max-width: min(100%, 52rem);
  }

  .homepage-flow .public-hero-grid-home > :last-child {
    width: min(100%, 28rem);
    justify-self: end;
  }

  .homepage-flow .public-stage {
    min-height: auto;
    padding: clamp(1rem, 2vw, 1.5rem);
    border-radius: 1.9rem;
    box-shadow: 0 32px 84px rgba(15, 23, 42, 0.24);
  }

  .homepage-flow .public-stage-window.hero-stage-primary {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    margin: 0;
    padding: 1.15rem;
  }

  .homepage-flow .public-stage.hero-stage-single {
    display: block;
  }

  .homepage-flow .public-stage.hero-stage-single .public-stage-grid,
  .homepage-flow .public-stage.hero-stage-single .public-stage-glow {
    pointer-events: none;
  }

  .homepage-flow .public-stage.hero-stage-single .public-stage-panel {
    min-height: auto;
  }

  .homepage-flow .hero-stage-standalone {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    margin: 0;
    padding: 1.35rem;
    border-radius: 1.75rem;
    box-shadow: 0 28px 62px rgba(15, 23, 42, 0.22);
  }

  .hero-support-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  }

  .hero-stage-primary {
    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.24), inset 0 1px 0 rgba(255,255,255,0.08);
  }

  .hero-support-item-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--public-stage-label-color, rgba(255,255,255,0.70));
  }

  .hero-support-item-value {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--public-stage-copy-color, rgba(255,255,255,0.92));
  }

  .homepage-section-shell::before {
    display: none;
  }

  .homepage-section-shell::after {
    display: none;
  }

  .homepage-section-shell > .public-section-header {
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
  }

  .homepage-section-shell:last-child::after {
    display: none;
  }

  @media (max-width: 767px) {
    .homepage-theme-shell::before {
      display: none;
    }

    body.homepage-page.homepage-preset-dark .homepage-theme-shell::before {
      display: none;
    }

    body.homepage-page.homepage-preset-obsidian_prime .homepage-theme-shell::before,
    body.homepage-page.homepage-preset-obsidian-prime .homepage-theme-shell::before {
      display: none;
      background: none;
      opacity: 0;
      filter: none;
    }

    .homepage-flow .public-hero,
    .homepage-section-shell {
      width: 100%;
      max-width: 100%;
    }

    .homepage-flow .public-hero-grid {
      gap: 1.5rem;
      padding: 1.35rem 1.1rem 1.45rem;
    }

    .homepage-flow .public-hero-grid-home {
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }

    .homepage-flow .public-hero-grid-home > :first-child,
    .homepage-flow .public-hero-grid-home > :last-child {
      max-width: none;
      width: 100%;
      justify-self: stretch;
    }

    .homepage-flow .public-hero-grid-home > :last-child {
      margin-top: 0.5rem;
    }

    .themed-hero .public-display {
      max-width: none;
      font-size: clamp(2.1rem, 11vw, 3.5rem);
      letter-spacing: -0.018em;
      line-height: 0.98;
    }

    .themed-hero .public-lead {
      font-size: 1rem;
      line-height: 1.7;
    }

    .themed-hero .public-actions {
      width: 100%;
    }

    .themed-hero .public-actions > a {
      width: 100%;
    }

    .homepage-flow .public-stage,
    .homepage-flow .hero-stage-standalone {
      width: 100%;
      max-width: none;
      min-height: auto;
      padding: 0.9rem;
    }

    .homepage-flow .public-stage-window.hero-stage-primary,
    .homepage-flow .hero-stage-standalone.hero-stage-primary {
      padding: 1rem;
    }
  }

  /* ============================================================
     HERO VIDEO — Full-bleed background layout
     ============================================================ */
  .public-hero.hp-vid-full-bg {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    min-height: var(--hp-vid-h, 60vh);
  }
  /* Absolute video fills the entire hero section */
  .hp-vid-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center center;
    display: block;
  }
  /* Embed (iframe) in full-bleed mode: scale up past container to fill */
  .hp-vid-bg-embed {
    position: absolute;
    inset: -5% -2%;           /* slight bleed to hide iframe chrome */
    width: 104%;
    height: 110%;
    pointer-events: none;
    overflow: hidden;
  }
  .hp-vid-bg-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
  /* Content centered over the background video */
  .hp-vid-full-content {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
    padding-left: clamp(1.5rem, 5vw, 6rem);
    padding-right: clamp(1.5rem, 5vw, 6rem);
  }

  /* ============================================================
     HERO VIDEO — Split layout (text + video columns)
     ============================================================ */
  .public-hero.hp-vid-split {
    padding: 0 !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
    min-height: var(--hp-vid-h, 60vh);
  }
  .hp-vid-split-row {
    display: flex;
    align-items: stretch;
    width: 100%;
    flex: 1;
    min-height: inherit;
  }
  /* Text column */
  .hp-vid-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 4rem);
    gap: 1.25rem;
    position: relative;
    z-index: 5;
  }
  /* Video column: relative so the absolute video fills it */
  .hp-vid-video-col {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    --hp-frame-inset: 0px;
    padding: var(--hp-frame-inset);
  }
  /* Direct video file fills column completely */
  .hp-vid-video-col > video {
    position: absolute;
    inset: var(--hp-frame-inset);
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center center;
    display: block;
  }
  /* Iframe embed fills column completely */
  .hp-vid-embed-wrap {
    position: absolute;
    inset: var(--hp-frame-inset);
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .hp-vid-embed-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
  /* Column width ratios */
  .hp-vid-col-balanced-video  { width: 55%; }
  .hp-vid-col-balanced-text   { flex: 1; }
  .hp-vid-col-video-wide      { width: 65%; }
  .hp-vid-col-video-wide-text { flex: 1; }
  .hp-vid-col-text-wide-video { width: 42%; }
  .hp-vid-col-text-wide-text  { flex: 1; }

  /* Mobile: stack columns vertically */
  @media (max-width: 767px) {
    .public-hero.hp-vid-full-bg {
      margin-left: calc(50% - 50vw) !important;
      margin-right: calc(50% - 50vw) !important;
    }
    .hp-vid-split-row {
      flex-direction: column;
    }
    .hp-vid-video-col,
    .hp-vid-col-balanced-video,
    .hp-vid-col-video-wide,
    .hp-vid-col-text-wide-video {
      width: 100% !important;
      min-height: 260px;
      flex-shrink: 0;
    }
    .hp-vid-text-col,
    .hp-vid-col-balanced-text,
    .hp-vid-col-video-wide-text,
    .hp-vid-col-text-wide-text {
      width: 100% !important;
    }
    .hp-vid-text-col {
      padding: 2.5rem 1.5rem;
    }
  }

/* ── Block 2: section and component styles ── */
  /* ── Section navigation bar ─────────────────────────────────────────── */

  #hp-section-nav {
    display: none;
    position: fixed;
    top: 73px;
    left: 0;
    right: 0;
    z-index: 79;
    background: transparent;
    border-bottom: none;
    pointer-events: none;
  }
  #hp-section-nav.hp-snav-ready {
    display: block;
    pointer-events: auto;
  }

  /* Sidebar-left nav mode: section bar sits at top-0 and starts after the
     240px sidebar rail (260px on XL screens). JS sets top: 0 via
     _siteNavHeight() returning 0 for this body class. */
  @media (min-width: 768px) {
    body.nav-variant-sidebar-left #hp-section-nav {
      left: 240px;
    }
  }
  @media (min-width: 1280px) {
    body.nav-variant-sidebar-left #hp-section-nav {
      left: 260px;
    }
  }
  /* Mobile sidebar collapses to a bottom bar — section nav uses full width */
  @media (max-width: 767px) {
    body.nav-variant-sidebar-left #hp-section-nav {
      left: 0;
    }
  }

  /* padding-top on #homepage-sections-flow is set dynamically by JS */
  .hp-section-nav-inner {
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: visible;
    gap: 2px;
    padding: 5px 12px;
    background: var(--public-panel-bg, rgba(255,255,255,0.95));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--public-panel-border, rgba(148,163,184,0.14));
    box-shadow: 0 1px 0 rgba(148,163,184,0.10), 0 2px 8px -2px rgba(15,23,42,0.06);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .hp-section-nav-inner::-webkit-scrollbar { display: none; }

  /* ── Dark mode — explicit hardcoded values (vars are not in scope here) */
  :is(body.theme-dark, body.preset-mode-dark, body.ui-mode-dark) .hp-section-nav-inner,
  .homepage-preset-dark .hp-section-nav-inner {
    background: rgba(8,14,26,0.96);
    border-bottom-color: rgba(148,163,184,0.08);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 2px 10px -2px rgba(0,0,0,0.4);
  }

  @supports (justify-content: safe center) {
    .hp-section-nav-inner { justify-content: safe center; }
  }

  /* ── Tabs ────────────────────────────────────────────────────────────── */
  .hp-snav-tab {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 6px;
    border: none;
    background: transparent;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.14s, color 0.14s;
    line-height: 1.4;
    outline: none;
  }
  .hp-snav-tab:focus-visible {
    outline: 2px solid rgba(var(--theme-primary-rgb, 99,102,241), 0.6);
    outline-offset: 1px;
  }
  .hp-snav-tab:hover {
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 8%, transparent);
    color: var(--theme-primary, #6366f1);
  }
  .hp-snav-tab.active {
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 12%, transparent);
    color: var(--theme-primary, #6366f1);
    font-weight: 700;
  }

  /* Dark mode tabs */
  :is(body.theme-dark, body.preset-mode-dark, body.ui-mode-dark) .hp-snav-tab {
    color: #94a3b8;
  }
  :is(body.theme-dark, body.preset-mode-dark, body.ui-mode-dark) .hp-snav-tab:hover {
    color: #e2e8f0;
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 16%, transparent);
  }
  :is(body.theme-dark, body.preset-mode-dark, body.ui-mode-dark) .hp-snav-tab.active {
    color: #f1f5f9;
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 20%, transparent);
  }

  /* ── Prev / Next scroll controls ────────────────────────────────────── */
  .hp-snav-prev,
  .hp-snav-next {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex-shrink: 0;
    border-radius: 5px; border: 1px solid rgba(148,163,184,0.28);
    background: none; cursor: pointer;
    font-size: 10px; color: #64748b;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
  }
  .hp-snav-prev:hover,
  .hp-snav-next:hover {
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 8%, transparent);
    color: var(--theme-primary, #6366f1);
    border-color: color-mix(in srgb, var(--theme-primary, #6366f1) 30%, transparent);
  }
  .hp-snav-prev:disabled,
  .hp-snav-next:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

  :is(body.theme-dark, body.preset-mode-dark, body.ui-mode-dark) .hp-snav-prev,
  :is(body.theme-dark, body.preset-mode-dark, body.ui-mode-dark) .hp-snav-next {
    color: #94a3b8;
    border-color: rgba(148,163,184,0.16);
  }

  /* ── Mobile ──────────────────────────────────────────────────────────── */
  @media (max-width: 767px) {
    .hp-snav-tab { padding: 5px 9px; font-size: 11px; }
  }
  @media (max-width: 480px) {
    .hp-section-nav-inner { padding: 4px 6px; gap: 1px; }
    .hp-snav-tab { padding: 5px 8px; font-size: 11px; }
  }
  /*
   * SCROLLBAR-GUTTER FIX — the main cause of horizontal shift between panels:
   * When panel A is tall enough to show a scrollbar and panel B is not, the browser
   * removes the scrollbar on switch. This reclaims ~17px and the entire layout shifts left.
   * scrollbar-gutter:stable reserves that 17px permanently so width never changes.
   */
  body.hp-paginated {
    scrollbar-gutter: stable;
  }
  body.hp-paginated #homepage-sections-flow {
    min-height: auto !important;  /* override min-h-screen from markup in paginated mode */
  }
  /*
   * ALL panels (active + inactive) get:
   *   width: 100%          — prevents any implicit width shrink from parent box-model quirks
   *   box-sizing: border-box — padding never adds to computed width
   *   contain: paint        — clips painted content to the panel's border-box boundary,
   *                           equivalent to overflow:hidden for painting but WITHOUT creating
   *                           a scroll container so position:sticky children still work.
   *                           This stops transform animations from bleeding visually outside
   *                           the panel and ensures every panel paints within identical bounds.
   *                           (Does NOT affect layout width — each panel is still 100% of parent)
   */
  body.hp-paginated .hp-section-panel {
    display: none;
    width: 100%;
    box-sizing: border-box;
    contain: paint;
  }
  /* Long-view override: show all panels, keep layout nav styles intact */
  body.hp-paginated.hp-long-view .hp-section-panel {
    display: block !important;
    animation: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /*
   * WIDTH CONSISTENCY FIX — .homepage-section-shell and .public-hero use
   * width: min(1400px, calc(100vw - 2rem)). When 100vw changes (scrollbar
   * appearing/disappearing), the shell width changes too, making different panels
   * render at different content widths. Override to use 100% of the parent
   * (already constrained by .public-container's max-width: 1480px + padding).
   */
  body.hp-paginated .homepage-section-shell,
  body.hp-paginated .homepage-flow .public-hero {
    width: 100%;
    max-width: 100%;
  }
  body.hp-paginated .hp-section-panel.hp-panel-active {
    display: block;
    /* No will-change here: will-change:transform on a child inside an isolation:isolate parent
       can cause GPU layer tile-size mismatches (panels render at slightly different widths).
       Modern browsers composite CSS animations automatically — will-change is not needed. */
    animation: hpPanelIn 0.35s cubic-bezier(0.4,0,0.2,1) both;
    padding-top: 1.5rem;  /* breathing room between tab nav and section content */
    padding-bottom: 2rem;
  }
  @keyframes hpPanelIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* Progress dot row — tight, flush after last panel */
  #hp-section-dots {
    display: none;
    justify-content: center; align-items: center; gap: 8px;
    padding: 14px 0 10px;
    margin: 0;
  }
  body.hp-paginated #hp-section-dots { display: flex; }
  /* Dot progress ring for auto-advance */
  .hp-dot {
    position: relative;
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(148,163,184,0.4);
    cursor: pointer; border: none; padding: 0;
    transition: background 0.15s, transform 0.15s;
  }
  .hp-dot.active {
    background: var(--theme-primary, #6366f1);
    transform: scale(1.35);
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb, 99,102,241), 0.25);
  }
  /* Thin progress bar under the nav tab showing auto-advance countdown */
  .hp-snav-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 2px;
    background: var(--theme-primary, #6366f1);
    width: 0%;
    border-radius: 0 0 8px 8px;
    opacity: 0;
    transition: none;
  }
  .hp-snav-tab { position: relative; overflow: hidden; }
  .hp-snav-tab.active .hp-snav-progress { opacity: 1; }

  /* ── Section spacing variants (long-page mode) ───────────────────────── */
  body.hp-spacing-compact  .hp-section-panel > section { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
  body.hp-spacing-spacious .hp-section-panel > section { padding-top: 5rem  !important; padding-bottom: 5rem  !important; }

  /* ── Panel transition style variants ─────────────────────────────────── */
  /* Note: contain:paint is already set on all .hp-section-panel in paginated mode above,
     so transform animations below are automatically clipped to the panel's boundary. */
  body.hp-transition-slide .hp-section-panel.hp-panel-active {
    animation: hpPanelSlide 0.38s ease-out both;
  }
  @keyframes hpPanelSlide {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  body.hp-transition-zoom .hp-section-panel.hp-panel-active {
    animation: hpPanelZoom 0.32s cubic-bezier(0.22,1,0.36,1) both;
  }
  @keyframes hpPanelZoom {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
  }

  /* ── Reading progress bar (long-page mode) ───────────────────────────── */
  #hp-reading-bar {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: var(--theme-primary, #6366f1);
    z-index: 9999;
    transition: width 0.1s linear;
    pointer-events: none;
    display: none;
  }
  body.hp-reading-progress #hp-reading-bar { display: block; }
  body.hp-paginated         #hp-reading-bar { display: none; }

  /* ═══════════════════════════════════════════════════════════════════
     RESPONSIVE NAV: tabs on desktop, dots on mobile
     ═══════════════════════════════════════════════════════════════════ */

  /* ── Desktop: tab bar (default, already styled above) ── */

  /* ── Mobile (≤767px): hide tab bar, show right-side dot nav instead ── */
  @media (max-width: 767px) {
    body.hp-paginated.hp-long-view #hp-section-nav { display: none !important; }
    body.hp-paginated.hp-long-view #homepage-sections-flow { z-index: 1; }
    /* In edit mode, remove paint-containment from section panels so inline manage
       pills can establish their own stacking context above the dot nav (z-index 200) */
    body.inline-edit-active.hp-paginated.hp-long-view .hp-section-panel { contain: none; }
    body.hp-paginated.hp-long-view #hp-section-dots {
      position: fixed;
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
      flex-direction: column;
      gap: 10px;
      z-index: 200;
      padding: 10px 8px;
      background: rgba(255,255,255,0.72);
      backdrop-filter: blur(10px);
      border-radius: 24px;
      box-shadow: 0 2px 14px rgba(0,0,0,0.09), 0 0 0 1px rgba(148,163,184,0.14);
    }
    body.theme-dark.hp-paginated.hp-long-view #hp-section-dots,
    body.preset-mode-dark.hp-paginated.hp-long-view #hp-section-dots {
      background: rgba(15,23,42,0.78);
      box-shadow: 0 2px 14px rgba(0,0,0,0.4), 0 0 0 1px rgba(96,165,250,0.14);
    }
    body.hp-paginated.hp-long-view .hp-dot { width: 10px; height: 10px; position: relative; }
    body.hp-paginated.hp-long-view .hp-dot::after {
      content: attr(aria-label);
      position: absolute;
      right: calc(100% + 10px);
      top: 50%;
      transform: translateY(-50%);
      white-space: nowrap;
      font-size: 11px;
      font-weight: 600;
      color: #fff;
      background: rgba(15,23,42,0.88);
      padding: 3px 8px;
      border-radius: 6px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.14s;
      z-index: 5;
    }
    body.hp-paginated.hp-long-view .hp-dot:hover::after { opacity: 1; }
  }

  /* Nav toggle button */
  #hp-nav-toggle {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 9980;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--public-panel-bg, rgba(255,255,255,0.9));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(148,163,184,0.25);
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    color: #64748b;
    font-size: 14px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  }
  body.hp-snav-active #hp-nav-toggle { display: flex; }
  #hp-nav-toggle:hover { color: var(--theme-primary, #6366f1); box-shadow: 0 4px 18px rgba(0,0,0,0.16); }
  #hp-nav-toggle.is-off { color: rgba(148,163,184,0.55); }
  body.hp-nav-hidden #hp-section-nav,
  body.hp-nav-hidden #hp-section-dots { display: none !important; }
  :is(body.theme-dark, body.ui-mode-dark) #hp-nav-toggle {
    background: rgba(15,23,42,0.85);
    border-color: rgba(148,163,184,0.18);
    color: #94a3b8;
  }

/* ── New Hero Layout Types ───────────────────────────────────────────── */

/* Full-bleed: opt-in via hp-hero-fullbleed class on the panel (set from section data) */
.homepage-flow .hp-hero-panel.hp-hero-fullbleed {
  overflow: hidden;
}
.homepage-flow .hp-hero-panel.hp-hero-fullbleed .public-section {
  padding-bottom: 0 !important;
}
.homepage-flow .hp-hero-panel.hp-hero-fullbleed .public-container {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.homepage-flow .hp-hero-panel.hp-hero-fullbleed .homepage-section-shell {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

/* Custom / AI hero layout — wrapper is fully transparent to layout so the
   user's HTML root (with its own min-height, padding, gradients) takes over. */
.hp-hero-custom-wrap {
  width: 100%;
  margin: 0;
  padding: 0;
  /* Defeat home.css text-colour !important rules — user CSS should win */
}
.hp-hero-custom-wrap > * {
  width: 100%;
}
/* Neutralise the global home-theme-section colour overrides that target
   .public-title / .public-lead inside the wrapper — the user's <style>
   block sets its own colours for these elements. */
.hp-hero-custom-wrap .public-title,
.hp-hero-custom-wrap .public-lead,
.hp-hero-custom-wrap .public-display,
.hp-hero-custom-wrap h1,
.hp-hero-custom-wrap h2,
.hp-hero-custom-wrap p {
  color: inherit;
}

/* Image full layout */
.hp-hero-image-full {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Image-based heroes always have a dark overlay — text must always be white */
  color: #fff !important;
}
/*
 * Override the light-mode .themed-hero text color reset for image/slideshow heroes.
 * Their rule is: body.homepage-page:not(...):not(...) .themed-hero .public-display → specificity 0,0,5,1
 * We need specificity >= 0,0,5,1 to win with !important declared after their rule.
 */
body.homepage-page .homepage-flow .themed-hero.hp-hero-image-full .public-display,
body.homepage-page .homepage-flow .themed-hero.hp-hero-image-full .public-lead,
body.homepage-page .homepage-flow .themed-hero.hp-hero-image-full h1,
body.homepage-page .homepage-flow .themed-hero.hp-hero-image-full h2,
body.homepage-page .homepage-flow .themed-hero.hp-hero-image-full p,
body.homepage-page .homepage-flow .hp-hero-slideshow .public-display,
body.homepage-page .homepage-flow .hp-hero-slideshow .public-lead,
body.homepage-page .homepage-flow .hp-hero-slideshow h1,
body.homepage-page .homepage-flow .hp-hero-slideshow h2,
body.homepage-page .homepage-flow .hp-hero-slideshow p {
  color: #fff !important;
}

/* Image split layout */
.hp-hero-image-split {
  position: relative;
  overflow: hidden;
}
.hp-hero-image-split .hp-split-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-width: 1023px) {
  .hp-hero-image-split .hp-split-image {
    min-height: 280px;
  }
}

/* Minimal / text-only layout */
.hp-hero-minimal {
  position: relative;
}

/* Slideshow layout */
.hp-hero-slideshow {
  position: relative;
  overflow: hidden;
  /* explicit height set via inline style on the element based on hero_card_size */
}
.hp-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  /* transition set per animation variant below */
}
.hp-hero-slide.hp-slide-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

/* ── Slide transition variants ── */

/* fade (default) */
.hp-hero-slideshow.hp-transition-fade .hp-hero-slide,
.hp-hero-slideshow:not([class*="hp-transition-"]) .hp-hero-slide {
  transition: opacity 0.7s ease-in-out;
}

/* slide — content drifts up as the new slide fades in */
.hp-hero-slideshow.hp-transition-slide .hp-hero-slide {
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22,1,0.36,1);
  transform: translateY(24px);
}
.hp-hero-slideshow.hp-transition-slide .hp-hero-slide.hp-slide-active {
  transform: translateY(0);
}

/* zoom — subtle background zoom with crossfade */
.hp-hero-slideshow.hp-transition-zoom .hp-hero-slide {
  transition: opacity 0.65s ease, transform 0.65s ease;
  transform: scale(1.06);
}
.hp-hero-slideshow.hp-transition-zoom .hp-hero-slide.hp-slide-active {
  transform: scale(1);
}

/* blur — outgoing blurs out, incoming sharpens in */
.hp-hero-slideshow.hp-transition-blur .hp-hero-slide {
  transition: opacity 0.6s ease, filter 0.6s ease;
  filter: blur(6px);
}
.hp-hero-slideshow.hp-transition-blur .hp-hero-slide.hp-slide-active {
  filter: blur(0);
}
.hp-hero-slide-dots {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 20;
}
.hp-hero-slide-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  padding: 0;
}
.hp-hero-slide-dot.active,
.hp-hero-slide-dot:hover {
  background: #fff;
  transform: scale(1.25);
}

/* Hero layout picker in settings */
.hero-layout-picker-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0.75rem;
  border: 2px solid var(--ts-border, #e2e8f0);
  padding: 0.75rem 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: transparent;
  gap: 0.25rem;
}
.hero-layout-picker-card:hover {
  border-color: var(--ts-brand, #6366f1);
  background: var(--ts-soft, #f8fafc);
}
.hero-layout-picker-card.selected {
  border-color: var(--ts-brand, #6366f1);
  background: var(--ts-soft, #f8fafc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ts-brand, #6366f1) 18%, transparent);
}

/* ── CTA button inline URL edit ─────────────────────────────────────────── */
.hp-cta-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.hp-cta-url-btn {
  display: none;
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--theme-primary, #6366f1);
  color: #ffffff;
  border: 2px solid #ffffff;
  cursor: pointer;
  font-size: 0.5rem;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.45);
  z-index: 20;
  transition: background 130ms ease, transform 130ms ease;
  padding: 0;
  line-height: 1;
}
.inline-edit-active .hp-cta-url-btn {
  display: inline-flex;
}
.hp-cta-url-btn:hover {
  background: #4f46e5;
  transform: scale(1.15);
}

/* ── Per-section spacing presets ─────────────────────────────────────────────
   HomePageSection.spacing_preset → hp-section-spacing-{compact|balanced|spacious}
   on the panel (see core/views.py + templates/home.html). Overrides the inner
   section's vertical padding using design-system spacing tokens. 'balanced'
   keeps each variant's own default padding. Covers both the standard
   `> section` layout and the hero's `.homepage-section-shell > section` nesting.
   No !important, so special cases (hero fullbleed, global body spacing toggle)
   still win. Token-only → identical in light and dark. */
.hp-section-panel.hp-section-spacing-compact > section,
.hp-section-panel.hp-section-spacing-compact > .homepage-section-shell > section {
  padding-top: var(--ds-space-8);
  padding-bottom: var(--ds-space-8);
}
.hp-section-panel.hp-section-spacing-spacious > section,
.hp-section-panel.hp-section-spacing-spacious > .homepage-section-shell > section {
  padding-top: var(--ds-space-24);
  padding-bottom: var(--ds-space-24);
}