/* ============================================================
   GIFTEd Design System — design-system.css
   Global Initiative to Fund Thorough Education
   ============================================================ */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ── CSS VARIABLES ── */
:root {
  /* Colors */
  --deep-teal:    #1A5C6B;
  --mid-teal:     #2B7A8F;
  --light-teal:   #4AADBB;
  --burnt-orange: #D4622A;
  --warm-orange:  #E8803A;
  --plum:         #6B2D5E;
  --dark-plum:    #4A1F42;
  --off-white:    #F7F4F0;
  --warm-white:   #FDFAF6;
  --charcoal:     #1C1C1C;
  --mid-grey:     #6B6B6B;
  --light-grey:   #D9D4CE;
  --black:        #0D0D0D;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  32px;
  --space-xl:  64px;
  --space-2xl: 128px;

  /* Border Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.14);

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.5s ease;

  /* Nav height */
  --nav-utility-h: 36px;
  --nav-main-h:    72px;
  --nav-total-h:   108px;
}

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

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

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--charcoal);
  background-color: var(--off-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol { list-style: none; }

/* ── TYPOGRAPHY ── */
.t-display {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: 1.02;
  color: var(--black);
}

.t-display-italic {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
  color: var(--deep-teal);
}

.t-h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--black);
}

.t-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--black);
}

.t-h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--black);
}

.t-body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--charcoal);
}

.t-body-lg {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--charcoal);
}

.t-body-sm {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--mid-grey);
}

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--burnt-orange);
}

.t-eyebrow--teal {
  color: var(--light-teal);
}

.t-link-sm {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--burnt-orange);
  transition: opacity var(--transition-fast);
}

.t-link-sm:hover { opacity: 0.75; }

/* On dark backgrounds */
.on-dark .t-h1,
.on-dark .t-h2,
.on-dark .t-h3,
.on-dark .t-display { color: #fff; }

.on-dark .t-body,
.on-dark .t-body-lg { color: rgba(255,255,255,0.78); }

.on-dark .t-body-sm { color: rgba(255,255,255,0.55); }

/* ── LAYOUT ── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.section-pad {
  padding: var(--space-xl) 0;
}

.section-pad-lg {
  padding: var(--space-2xl) 0;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 14px 30px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
  cursor: pointer;
  border: 2px solid transparent;
  line-height: 1;
}

.btn:active { transform: translateY(0) !important; }

/* Primary — burnt orange */
.btn-primary {
  background: var(--burnt-orange);
  color: #fff;
  border-color: var(--burnt-orange);
}
.btn-primary:hover {
  background: var(--warm-orange);
  border-color: var(--warm-orange);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212,98,42,0.35);
}

/* Secondary — teal outlined */
.btn-secondary {
  background: transparent;
  color: var(--deep-teal);
  border-color: var(--deep-teal);
}
.btn-secondary:hover {
  background: var(--deep-teal);
  color: #fff;
  transform: translateY(-2px);
}

/* Ghost — white outlined (for dark bg) */
.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}
.btn-ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}

/* Teal solid */
.btn-teal {
  background: var(--deep-teal);
  color: #fff;
  border-color: var(--deep-teal);
}
.btn-teal:hover {
  background: var(--mid-teal);
  border-color: var(--mid-teal);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26,92,107,0.35);
}

/* Sizes */
.btn-sm { padding: 10px 20px; font-size: 0.7rem; }
.btn-lg { padding: 18px 40px; font-size: 0.8rem; }

/* ── NAVIGATION ── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--black);
  transition: box-shadow var(--transition-base);
}

.site-nav.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

/* Utility bar */
.nav-utility {
  height: var(--nav-utility-h);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-lg);
  padding: 0 var(--space-xl);
}

.nav-utility a {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  transition: color var(--transition-fast);
}
.nav-utility a:hover { color: rgba(255,255,255,0.9); }

/* Main nav bar */
.nav-main {
  height: var(--nav-main-h);
  display: flex;
  align-items: center;
  padding: 0 var(--space-xl);
  gap: var(--space-xl);
}

/* Logo slot */
.nav-logo-slot {
  flex-shrink: 0;
  width: 160px;
  height: 48px;
  display: flex;
  align-items: center;
}

.nav-logo-placeholder {
  width: 160px;
  height: 40px;
  border: 1.5px dashed rgba(255,255,255,0.2);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-logo-placeholder span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.25);
  text-transform: uppercase;
}

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex: 1;
}

.nav-link {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  transition: color var(--transition-fast);
  position: relative;
  padding-bottom: 2px;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--light-teal);
  transition: width var(--transition-base);
}

.nav-link:hover { color: #fff; }
.nav-link:hover::after { width: 100%; }

/* The desktop nav makes each link a full-height (90px) flex box so the dropdown
   panel stays reachable on the way down. That also stretched this underline to
   the bottom of the whole bar, leaving it floating well under the text.
   Re-anchor it to the text itself: centre, then push down past half a line. */
.nav-links > li > .nav-link::after {
  top: 50%;
  bottom: auto;
  transform: translateY(calc(0.62em + 7px));
  height: 2.5px;
}

/* Mobile hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  margin-left: auto;
  padding: var(--space-sm);
}

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Mobile nav overlay */
.nav-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.nav-mobile-overlay.open {
  display: flex;
  opacity: 1;
}

.nav-mobile-overlay .nav-link {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: white;
}

.nav-mobile-overlay .nav-link::after { display: none; }

/* ── CARDS ── */
.card {
  background: var(--warm-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.card-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.card-img-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--deep-teal);
}

.card-body { padding: var(--space-lg); }

.card-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--light-teal);
  margin-bottom: var(--space-sm);
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.card-text {
  font-size: 0.875rem;
  color: var(--mid-grey);
  line-height: 1.65;
  margin-bottom: var(--space-md);
}

.card--dark { background: var(--deep-teal); }
.card--dark .card-title { color: white; }
.card--dark .card-text { color: rgba(255,255,255,0.68); }

.card--plum { background: var(--plum); }
.card--plum .card-title { color: white; }
.card--plum .card-text { color: rgba(255,255,255,0.68); }
.card--plum .card-eyebrow { color: rgba(255,255,255,0.5); }

/* ── BADGES ── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.badge--teal   { background: rgba(74,173,187,0.12); color: var(--light-teal);   border-color: rgba(74,173,187,0.3); }
.badge--orange { background: rgba(212,98,42,0.10);  color: var(--burnt-orange); border-color: rgba(212,98,42,0.3); }
.badge--plum   { background: rgba(107,45,94,0.12);  color: var(--plum);         border-color: rgba(107,45,94,0.3); }
.badge--white  { background: rgba(255,255,255,0.1); color: white;               border-color: rgba(255,255,255,0.25); }
.badge--grey   { background: rgba(107,107,107,0.1); color: var(--mid-grey);     border-color: var(--light-grey); }

/* ── STAT BAR ── */
.stat-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.stat-item {
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  border-right: 1px solid var(--light-grey);
}

.stat-item:last-child { border-right: none; }

.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: var(--black);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.stat-desc {
  font-size: 0.82rem;
  color: var(--mid-grey);
  font-weight: 500;
}

/* On dark */
.stat-bar--dark .stat-item { border-color: rgba(255,255,255,0.1); }
.stat-bar--dark .stat-num  { color: white; }
.stat-bar--dark .stat-desc { color: rgba(255,255,255,0.6); }

/* ── SECTION DIVIDER ── */
.section-divider {
  width: 48px;
  height: 2px;
  background: var(--burnt-orange);
  margin: var(--space-md) 0;
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* Scroll-reveal base state */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger helpers */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── HERO ── */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--space-2xl);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Gradient overlay — text readable, photo still visible */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(13,13,13,0.72) 0%,
    rgba(13,13,13,0.45) 50%,
    rgba(13,13,13,0.1) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 620px;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--light-teal);
  margin-bottom: var(--space-md);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 900;
  color: white;
  line-height: 1.02;
  margin-bottom: var(--space-md);
}

.hero-title em {
  font-style: italic;
  color: var(--light-teal);
}

.hero-subtitle {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  max-width: 480px;
}

.hero-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  align-items: center;
}

/* Goal chip inside hero */
.hero-goal {
  margin-top: var(--space-xl);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
}

.hero-goal-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--light-teal);
}

.hero-goal-text {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.88);
  font-weight: 500;
}

.hero-goal-divider {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.2);
}

/* ── FOOTER ── */
.site-footer {
  background: var(--black);
  padding: var(--space-xl) 0 var(--space-lg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: var(--space-lg);
}

.footer-brand-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  margin-bottom: var(--space-md);
}

.footer-brand-desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
}

.footer-col-title {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--light-teal);
  margin-bottom: var(--space-md);
}

.footer-col-link {
  display: block;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-sm);
  transition: color var(--transition-fast);
}
.footer-col-link:hover { color: white; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer-legal {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.3);
}

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

.text-center { text-align: center; }
.text-white  { color: white !important; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  :root {
    --nav-utility-h: 0px;
    --nav-main-h:    64px;
    --nav-total-h:   64px;
  }

  .nav-utility { display: none; }
  .nav-links   { display: none; }
  .nav-main .btn { display: none; }
  .nav-hamburger { display: flex; }

  .container { padding: 0 var(--space-md); }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

  .stat-bar {
    grid-template-columns: 1fr;
  }

  .stat-item {
    border-right: none;
    border-bottom: 1px solid var(--light-grey);
  }
  .stat-item:last-child { border-bottom: none; }

  .hero {
    align-items: flex-end;
    padding-bottom: var(--space-xl);
  }

  .hero-bg::after {
    background: linear-gradient(
      to top,
      rgba(13,13,13,0.85) 0%,
      rgba(13,13,13,0.5) 50%,
      rgba(13,13,13,0.15) 100%
    );
  }

  .hero-title { font-size: clamp(2.2rem, 8vw, 3.2rem); }
  .hero-subtitle { font-size: 1rem; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ── NUMBERED PHOTO SLOTS ──────────────────────────────────────────────
   Every real photo on the site is still missing, so each one is a
   numbered slot instead of a stock stand-in. The number is the shared
   reference — "photo 12" means the same thing here and in the shot list.
   Hashed fill + dashed border so an empty slot reads as intentional and
   never as a broken image. Replace a slot with a plain <img> once the
   real photo exists. */
.slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  /* containers that sized themselves from the old <img> would collapse
     without this */
  min-height: 160px;
  padding: 18px;
  text-align: center;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(26,92,107,0.08) 0 9px,
      rgba(26,92,107,0)    9px 18px
    ),
    #EDF2F3;
  border: 2px dashed rgba(26,92,107,0.38);
  border-radius: inherit;
  box-sizing: border-box;
}
/* A real photo dropped into a slot's container — same box, no more hash
   fill. object-fit: cover matches how .slot filled the space so nothing in
   the surrounding layout has to change. */
.slot-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.slot-num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: #1A5C6B;
}
.slot-desc {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.55;
  color: #5A7076;
  max-width: 30ch;
}
/* On dark sections the teal-on-pale fill goes muddy, so flip it. */
.inner-section--teal .slot,
.parallax-band .slot,
.future-card .slot {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.10) 0 9px,
      rgba(255,255,255,0)    9px 18px
    ),
    rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.35);
}
.inner-section--teal .slot-num,
.parallax-band .slot-num,
.future-card .slot-num { color: #fff; }
.inner-section--teal .slot-desc,
.parallax-band .slot-desc,
.future-card .slot-desc { color: rgba(255,255,255,0.72); }

/* Hero + parallax slots sit under white headings, so the pale fill would wash
   the text out. Dark variant keeps the overlaid copy readable. */
.page-hero-bg .slot {
  /* Centred, the number collides with the hero headline, and the hero's own
     gradient overlay sits above it and dims it. Park it bottom-right and
     brighten it so it stays legible through that overlay. */
  height: 100%;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 4px;
  padding: 28px 32px;
  border: none;
  border-radius: 0;
  text-align: right;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.07) 0 12px,
      rgba(255,255,255,0)   12px 24px
    ),
    #123F4A;
}
.page-hero-bg .slot-num {
  color: #fff;
  font-size: clamp(1.8rem, 5vw, 3rem);
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.page-hero-bg .slot-desc {
  color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}

/* Parallax bands keep background-attachment: fixed, so the slot here is a
   background treatment plus a corner badge rather than a replaced element —
   that way the parallax scroll behaviour survives. */
.slot-band {
  background-image:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.07) 0 12px,
      rgba(255,255,255,0)   12px 24px
    ) !important;
  background-color: #123F4A !important;
}
.slot-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  border: 1px dashed rgba(255,255,255,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.slot-badge b {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

/* ── ANCHOR LANDING ────────────────────────────────────────────────────
   The nav is fixed at 90px, so a plain #hash jump parks the section's top
   underneath it and the heading is the part that gets covered. Reserve that
   height (plus breathing room) so a jump lands on the section's real top. */
[id] { scroll-margin-top: 106px; }