/* ==========================================================================
   Digital Perivalon - design system
   Hand-built. No frameworks. Brand: deep indigo + aqua on warm paper.
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------- */
:root {
  /* surfaces */
  --paper:        #FAF7F0;
  --paper-2:      #F3EDE0;
  --cream:        #F6F1E7;
  --card:         #FFFFFF;

  /* ink */
  --ink:          #16162B;
  --ink-soft:     #353350;
  --muted:        #6A687E;
  --line:         rgba(22, 22, 43, .12);
  --line-soft:    rgba(22, 22, 43, .07);

  /* brand */
  --indigo:       #2E2B8C;
  --indigo-deep:  #1A1858;
  --indigo-700:   #3a37a8;
  --aqua:         #2FB6AB;
  --aqua-deep:    #1A8E85;
  --aqua-soft:    #BEE7E2;
  --gold:         #C9A24B;

  /* type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* shape */
  --radius:       14px;
  --radius-lg:    22px;
  --container:    1180px;

  /* depth */
  --shadow-sm:    0 1px 2px rgba(20,20,45,.06), 0 2px 8px rgba(20,20,45,.05);
  --shadow-md:    0 8px 24px rgba(20,20,45,.10), 0 2px 6px rgba(20,20,45,.06);
  --shadow-lg:    0 30px 60px -20px rgba(20,20,45,.35);

  --ease:         cubic-bezier(.22, .61, .36, 1);
  --ease-out:     cubic-bezier(.16, 1, .3, 1);
}

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul { list-style: none; padding: 0; }

::selection { background: var(--aqua-soft); color: var(--indigo-deep); }

:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Typography --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
}
h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); }

p { color: var(--ink-soft); }
.lede { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.55; color: var(--ink-soft); }

.eyebrow {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--aqua-deep);
  display: inline-flex;
  align-items: center;
  gap: .7em;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--aqua-deep);
  opacity: .7;
}
.eyebrow.is-centered { justify-content: center; }

.text-accent { color: var(--indigo); }

/* ---- Layout ------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.section { padding-block: clamp(4.5rem, 10vw, 8rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section-head { max-width: 720px; }
.section-head.is-centered { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: 1rem; }
.section-head p { margin-top: 1.1rem; }

.bg-paper-2 { background: var(--paper-2); }
.bg-ink { background: var(--indigo-deep); color: #EDEBFF; }
.bg-ink h2, .bg-ink h3 { color: #fff; }
.bg-ink p { color: #C7C5EE; }

.divider-rule { height: 1px; background: var(--line); border: 0; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .9em 1.55em;
  font-weight: 600; font-size: .98rem;
  border-radius: 100px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
  will-change: transform;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn--primary { background: var(--indigo); color: #fff; box-shadow: 0 8px 20px -8px rgba(46,43,140,.7); }
.btn--primary:hover { background: var(--indigo-deep); transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(46,43,140,.7); }
.btn--ghost { border: 1.5px solid var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--indigo); color: var(--indigo); transform: translateY(-2px); }
.btn--light { background: rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(6px); border: 1.5px solid rgba(255,255,255,.35); }
.btn--light:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); }
.btn--aqua { background: var(--aqua); color: #06302C; }
.btn--aqua:hover { background: var(--aqua-deep); color: #fff; transform: translateY(-2px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 600; color: var(--indigo);
  border-bottom: 1.5px solid transparent;
  transition: gap .25s var(--ease), border-color .25s var(--ease);
}
.link-arrow svg { width: 1em; height: 1em; transition: transform .25s var(--ease); }
.link-arrow:hover { border-color: var(--indigo); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 78px;
}
.site-header.is-scrolled {
  background: rgba(250,247,240,.85);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 4px 20px -12px rgba(20,20,45,.4);
}
.brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand img { height: 38px; width: auto; }
.brand__text {
  font-family: var(--font-display); font-weight: 600; font-size: 1.18rem;
  letter-spacing: -.01em; color: var(--indigo-deep); line-height: 1;
}
.brand__text small { display: block; font-family: var(--font-body); font-weight: 600; font-size: .58rem; letter-spacing: .28em; text-transform: uppercase; color: var(--aqua-deep); margin-top: 3px; }

/* nav over dark hero before scroll */
.site-header:not(.is-scrolled) .brand img { filter: brightness(0) invert(1); } /* dark logo -> white so it reads on the dark hero */
.site-header:not(.is-scrolled) .brand__text { color: #fff; }
.site-header:not(.is-scrolled) .brand__text small { color: var(--aqua-soft); }
.site-header:not(.is-scrolled) .nav-links a { color: rgba(255,255,255,.9); }
.site-header:not(.is-scrolled) .nav-links a:hover { color: #fff; }
.site-header:not(.is-scrolled) .nav-toggle span { background: #fff; box-shadow: 0 1px 3px rgba(10,9,40,.45); }

.nav { display: flex; align-items: center; gap: 2.2rem; }
.nav-links { display: flex; align-items: center; gap: 1.9rem; }
.nav-links a {
  font-weight: 500; font-size: .96rem; color: var(--ink-soft);
  position: relative; transition: color .2s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--aqua); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--indigo); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.site-header:not(.is-scrolled) .nav-links a[aria-current="page"] { color: #fff; }

/* the CTA button in the nav must keep its own colours + no underline bar */
.nav-links a.btn { color: #fff; }
.nav-links a.btn--aqua { color: #06302C; }
.nav-links a.btn::after { display: none; }
.site-header:not(.is-scrolled) .nav-links a.btn--primary { color: #fff; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 30px; height: 30px; justify-content: center; align-items: center; z-index: 110; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--ink); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--ink); }

@media (max-width: 880px) {
  .nav-toggle { display: flex; }
  /* the header's backdrop-filter makes it a containing block for position:fixed,
     which traps the full-screen .nav-links inside the ~78px header bar (so the menu
     floats over the page with no background). Drop it on mobile and give the scrolled
     header a solid fill; the open menu covers the whole viewport again. */
  .site-header, .site-header.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-header.is-scrolled { background: var(--paper); }
  .nav-links {
    position: fixed; inset: 0; z-index: 105; flex-direction: column; justify-content: center; gap: 2rem;
    background: var(--paper); padding: 2rem;
    transform: translateX(100%); transition: transform .4s var(--ease-out);
  }
  .nav-links a { font-size: 1.5rem; font-family: var(--font-display); color: var(--ink) !important; }
  .nav-links .btn { font-family: var(--font-body); font-size: 1rem; }
  /* the ink override above must not repaint the CTA button text; keep it white on blue */
  .nav-links a.btn--primary { color: #fff !important; }
  .nav-links a.btn--aqua { color: #06302C !important; }
  body.nav-open .nav-links { transform: translateX(0); }
  body.nav-open { overflow: hidden; }
}

/* ==========================================================================
   Greek key (meander) ornament
   ========================================================================== */
.meander {
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16' viewBox='0 0 48 16'%3E%3Cpath d='M0 13h6V3h10v10h6V7h-4V5h6v10H4v-2H0z' fill='%232FB6AB' fill-opacity='.5'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: auto 100%;
  opacity: .8;
}

/* ==========================================================================
   Mission / intro split
   ========================================================================== */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
.split__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/5; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__quote {
  position: relative; padding-left: 1.6rem; margin-top: 2rem;
  font-family: var(--font-display); font-style: italic; font-size: 1.25rem; line-height: 1.5; color: var(--indigo-deep);
}
.split__quote::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px; background: var(--aqua); border-radius: 3px; }

/* ==========================================================================
   Pillar page hero
   ========================================================================== */
.pillarhero { position: relative; padding-top: 150px; padding-bottom: clamp(3rem,6vw,5rem); overflow: hidden; }
.pillarhero::before {
  content: ""; position: absolute; top: -10%; right: -5%; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent,#2FB6AB) 22%, transparent), transparent 70%);
  filter: blur(20px); z-index: -1;
}
.pillarhero__index { font-family: var(--font-body); font-weight: 600; letter-spacing: .25em; text-transform: uppercase; font-size: .8rem; color: var(--accent,#2FB6AB); }
.pillarhero h1 { margin: 1rem 0 1.2rem; }
.pillarhero h1 .stroke { color: var(--accent, #2FB6AB); font-style: italic; font-weight: 400; }

/* feature cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
@media (max-width: 820px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 1.8rem; box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--line); }
.card__icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--paper-2); color: var(--indigo); margin-bottom: 1.1rem; }
.card__icon svg { width: 24px; height: 24px; }
.card h3 { font-size: 1.25rem; }
.card p { margin-top: .6rem; font-size: .97rem; }

/* ==========================================================================
   Videos
   ========================================================================== */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 3rem; }
@media (max-width: 880px) { .video-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }
.video-card {
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.video-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.video-card__frame { position: relative; aspect-ratio: 16/9; background: #0c0b22; }
.video-card__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-card__placeholder {
  display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(47,182,171,.35), transparent 55%),
    linear-gradient(135deg, #1a1858, #2a2780 70%, #2c4a7e);
}
.video-card__play {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.5);
  backdrop-filter: blur(4px);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.video-card__play svg { width: 26px; height: 26px; margin-left: 3px; }
.video-card__placeholder:hover .video-card__play { transform: scale(1.1); background: var(--aqua); }
.video-card__body { padding: 1.1rem 1.3rem 1.4rem; }
.video-card__body h3 { font-size: 1.1rem; line-height: 1.25; }
.video-card__meta { margin-top: .5rem; font-size: .85rem; color: var(--muted); }

/* ==========================================================================
   Newsletter
   ========================================================================== */
.newsletter { position: relative; overflow: hidden; }
.newsletter__card {
  background: linear-gradient(135deg, var(--indigo-deep), #2a2780 60%, #2c4a7e);
  border-radius: var(--radius-lg); padding: clamp(2.2rem, 5vw, 4rem);
  color: #fff; position: relative; overflow: hidden; box-shadow: var(--shadow-lg);
}
.newsletter__card::after {
  content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(47,182,171,.5), transparent 70%);
}
.newsletter__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: center; }
@media (max-width: 820px) { .newsletter__grid { grid-template-columns: 1fr; } }
.newsletter h2 { color: #fff; }
.newsletter p { color: #C9C7F0; margin-top: .9rem; }
.newsletter form { display: flex; gap: .7rem; flex-wrap: wrap; }
.newsletter input[type=email] {
  flex: 1; min-width: 220px; padding: .95em 1.2em; border-radius: 100px; border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08); color: #fff; font-size: 1rem;
}
.newsletter input[type=email]::placeholder { color: rgba(255,255,255,.6); }
.newsletter input[type=email]:focus-visible { outline-color: var(--aqua); background: rgba(255,255,255,.14); }
.newsletter__note { font-size: .82rem; color: rgba(255,255,255,.6); margin-top: 1rem; }
.form-msg { margin-top: 1rem; font-size: .95rem; font-weight: 500; color: var(--aqua-soft); min-height: 1.2em; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: #111028; color: #B6B4DA; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { height: 40px; filter: brightness(0) invert(1); opacity: .95; }
.footer-brand p { color: #908ec0; font-size: .92rem; margin-top: 1rem; max-width: 32ch; }
.footer-col h4 { font-family: var(--font-body); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: #6f6da0; margin-bottom: 1rem; font-weight: 600; }
.footer-col a { display: block; padding: .35rem 0; color: #B6B4DA; font-size: .95rem; transition: color .2s var(--ease); }
.footer-col a:hover { color: #fff; }
.footer-social { display: flex; gap: .8rem; margin-top: 1.4rem; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.07); transition: background .25s var(--ease), transform .25s var(--ease); }
.footer-social a:hover { background: var(--aqua); transform: translateY(-3px); }
.footer-social svg { width: 20px; height: 20px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .85rem; color: #C7C5E6; }
/* override the global `p { color: var(--ink-soft) }`, which otherwise colours these
   paragraphs dark (near-invisible on the dark footer) regardless of the container */
.footer-bottom p { color: #C7C5E6; }
.footer-bottom a { color: #C7C5E6; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom a:hover { color: #fff; }
.footer-credit { width: 100%; text-align: center; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.06); color: #75739f; letter-spacing: .04em; }

/* ==========================================================================
   Legal / prose pages
   ========================================================================== */
.page-head { padding-top: 140px; padding-bottom: clamp(2rem,4vw,3rem); background: var(--paper-2); border-bottom: 1px solid var(--line); }
.prose { max-width: 760px; margin-inline: auto; }
.prose h2 { font-size: 1.6rem; margin-top: 2.6rem; }
.prose h3 { font-size: 1.2rem; margin-top: 1.8rem; }
.prose p, .prose li { color: var(--ink-soft); }
.prose p { margin-top: 1rem; }
.prose ul { margin-top: 1rem; padding-left: 1.2rem; list-style: disc; }
.prose li { margin-top: .5rem; }
.prose a { color: var(--indigo); border-bottom: 1px solid var(--aqua); }
.prose strong { color: var(--ink); }
.toc { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 1.4rem 1.6rem; box-shadow: var(--shadow-sm); margin-bottom: 2.5rem; }
.toc h4 { font-family: var(--font-body); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .8rem; }
.toc a { color: var(--indigo); display: block; padding: .25rem 0; font-size: .95rem; }
.legal-meta { font-size: .9rem; color: var(--muted); margin-top: .6rem; }
.callout { background: color-mix(in srgb, var(--aqua-soft) 40%, var(--paper)); border-left: 3px solid var(--aqua); border-radius: 8px; padding: 1rem 1.2rem; margin-top: 1.6rem; font-size: .95rem; }

/* ==========================================================================
   Cookie notice
   ========================================================================== */
.cookie {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 200;
  max-width: 560px; margin-inline: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 1.2rem 1.3rem;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  transform: translateY(150%); transition: transform .5s var(--ease-out);
}
.cookie.is-shown { transform: none; }
.cookie p { font-size: .9rem; margin: 0; flex: 1; min-width: 220px; }
.cookie a { color: var(--indigo); text-decoration: underline; }
.cookie__actions { display: flex; gap: .6rem; }
.cookie .btn { padding: .6em 1.1em; font-size: .88rem; }

/* ==========================================================================
   Scroll-reveal utility
   ========================================================================== */
.observe { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.observe.is-visible { opacity: 1; transform: none; }
.observe[data-delay="1"] { transition-delay: .08s; }
.observe[data-delay="2"] { transition-delay: .16s; }
.observe[data-delay="3"] { transition-delay: .24s; }

/* stat / values strip */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 820px) { .values { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.value h3 { font-size: 1.15rem; display: flex; align-items: center; gap: .6rem; }
.value h3 svg { width: 22px; height: 22px; color: var(--aqua-deep); flex: none; }
.value p { font-size: .95rem; margin-top: .6rem; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--indigo); color: #fff; padding: .7em 1.2em; border-radius: 0 0 8px 0; z-index: 300; }
.skip-link:focus { left: 0; }

/* ==========================================================================
   Iteration 2 - elevated motion & video facade
   ========================================================================== */

/* thin scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 300;
  background: linear-gradient(90deg, var(--indigo), var(--aqua)); box-shadow: 0 0 12px rgba(47,182,171,.5);
  transition: width .08s linear; }

/* hero: cursor-reactive light bloom */
.hero__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .0;
  background: radial-gradient(40% 50% at var(--gx, 70%) var(--gy, 40%), rgba(255,231,189,.18), transparent 70%);
  transition: opacity 1.2s var(--ease); mix-blend-mode: screen; }
.hero.is-ready .hero__glow { opacity: 1; }

/* heading line-mask reveal */
.observe[data-anim="mask"] { clip-path: inset(0 0 105% 0); opacity: 0; transform: none;
  transition: clip-path 1.1s var(--ease-out), opacity 1.1s var(--ease-out); }
.observe[data-anim="mask"].is-visible { clip-path: inset(0 0 -15% 0); opacity: 1; }

/* magnetic CTA wrapper (JS moves it; CSS handles spring back) */
.magnetic { transition: transform .35s var(--ease-out); }

/* video facade: real thumbnail + play, swaps to iframe on click (tiny initial load) */
.video-card__thumb { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border: 0; padding: 0;
  background-color: #0c0b22; background-size: cover; background-position: center; cursor: pointer; overflow: hidden; }
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.video-card__thumb::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,9,34,.05), rgba(10,9,34,.5)); transition: background .35s var(--ease); }
.video-card:hover .video-card__thumb img { transform: scale(1.05); }
.video-card:hover .video-card__thumb::after { background: linear-gradient(180deg, rgba(10,9,34,0), rgba(10,9,34,.3)); }
.video-card__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2;
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(20,19,55,.45); border: 1.5px solid rgba(255,255,255,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); }
.video-card__play svg { width: 24px; height: 24px; margin-left: 3px; }
.video-card:hover .video-card__play { transform: translate(-50%, -50%) scale(1.12); background: var(--aqua); border-color: var(--aqua); }
.video-card__tag { position: absolute; left: 12px; top: 12px; z-index: 2; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: .3em .7em; border-radius: 100px; color: #fff; background: rgba(20,19,55,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.25); }
.video-card__body h3 { font-size: 1.02rem; line-height: 1.3; }

/* mobile: always show gate copy (do not depend on hover detection) */
@media (max-width: 820px) {
  .gate__desc, .gate__cta { opacity: 1 !important; transform: none !important; }
  .gates:hover .gate, .gates:focus-within .gate { opacity: 1 !important; }
  .gate__line { transform: scaleX(1); }
}

/* ==========================================================================
   ITERATION 3  ·  bespoke design system
   ========================================================================== */

/* ---- refined shared rhythm (less templated) ----------------------------- */
.section-head { max-width: 760px; }
.section-head .eyebrow { margin-bottom: 1.1rem; }
.section-head h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }

/* chapter / act marker (editorial margin label) */
.chapter { display: flex; align-items: baseline; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.chapter__no { font-family: var(--font-display); font-size: clamp(2.6rem, 7vw, 5rem); line-height: .8; font-weight: 300;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--ink) 28%, transparent); }
.bg-ink .chapter__no, .stage .chapter__no { -webkit-text-stroke-color: rgba(255,255,255,.28); }
/* dark story panel: the default dark ink stroke is invisible here, so use a clearly
   visible light stroke + label (covers home "02" and who-we-are "01") */
.story .chapter__no { -webkit-text-stroke-color: rgba(255,255,255,.45); }
.chapter__label { font-size: .78rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.bg-ink .chapter__label { color: rgba(255,255,255,.6); }
.story .chapter__label { color: rgba(255,255,255,.72); }

/* word-reveal */
[data-words] .w { display: inline-block; opacity: .14; transform: translateY(.18em); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
[data-words].is-visible .w { opacity: 1; transform: none; }

/* ==========================================================================
   THE STAGE  ·  interactive hero-colonnade
   ========================================================================== */
.stage { position: relative; min-height: 100svh; background: #0a0918; color: #fff; overflow: hidden; isolation: isolate; }
.stage__bg { position: absolute; inset: -6% -4%; z-index: 0; }
.stage__bg img, .stage__bg video { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; will-change: transform; }
.stage__scrim { position: absolute; inset: 0; z-index: 1; background:
  radial-gradient(58% 40% at 50% 32%, rgba(8,7,20,.66), rgba(8,7,20,.32) 58%, transparent 78%),
  radial-gradient(130% 90% at 50% 30%, rgba(10,9,24,.15) 20%, rgba(10,9,24,.55) 72%, rgba(10,9,24,.92) 100%),
  linear-gradient(180deg, rgba(10,9,24,.7) 0%, rgba(10,9,24,.12) 22%, rgba(10,9,24,.15) 50%, rgba(10,9,24,.96) 92%); }
.stage__rays { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; overflow: hidden; }
.stage__rays::before, .stage__rays::after { content: ""; position: absolute; top: -28%; width: 34%; height: 156%;
  background: linear-gradient(180deg, rgba(255,228,180,0), rgba(255,224,170,.13) 42%, rgba(255,224,170,0)); filter: blur(16px); }
.stage__rays::before { left: 14%; transform: rotate(10deg); animation: rayDrift 18s var(--ease) infinite alternate; }
.stage__rays::after { right: 12%; transform: rotate(-10deg); animation: rayDrift 23s var(--ease) infinite alternate-reverse; }
@keyframes rayDrift { from { opacity: .3; } to { opacity: .62; } }
.stage__dust { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* intro inscription (upper) - pointer-events:none so the columns beneath it
   still receive hover/click where the headline overlaps them */
.stage__intro { position: relative; z-index: 6; text-align: center; padding-top: clamp(7rem, 16vh, 11rem); padding-inline: 1.5rem; max-width: 980px; margin-inline: auto; will-change: transform; pointer-events: none; }
.stage__intro a, .stage__intro button { pointer-events: auto; }
.stage__kicker { font-size: .82rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--aqua-soft); text-shadow: 0 2px 14px rgba(5,4,20,.7); }
.stage h1 { color: #fff; font-size: clamp(2.5rem, 6.4vw, 5.4rem); line-height: 1.02; margin-top: 1.4rem; text-shadow: 0 2px 6px rgba(5,4,20,.55), 0 8px 40px rgba(5,4,20,.6); }
.stage h1 em { font-style: italic; font-weight: 400; color: var(--aqua-soft); }
.stage__sub { color: rgba(255,255,255,.92); max-width: 50ch; margin: 1.5rem auto 0; font-size: clamp(1.02rem, 1.7vw, 1.2rem); text-shadow: 0 2px 12px rgba(5,4,20,.8); }

/* the colonnade - three real pillars across the foreground */
.colonnade { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: min(74vh, 720px);
  display: flex; align-items: flex-end; justify-content: center; gap: clamp(0px, 4vw, 90px); padding: 0 clamp(1rem, 5vw, 4rem) clamp(2rem, 5vh, 3.5rem); }
.plinth { position: relative; flex: 1 1 0; max-width: 360px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  text-decoration: none; color: #fff; will-change: transform; }
.plinth__col { position: relative; z-index: 2; height: clamp(290px, 52vh, 560px); width: auto; transform-origin: bottom center;
  filter: brightness(.86) drop-shadow(0 30px 30px rgba(0,0,0,.55)); transition: transform .65s var(--ease-out), filter .6s var(--ease); animation: floatY 7s var(--ease) infinite; }
.plinth:nth-child(2) .plinth__col { animation-delay: -2.3s; }
.plinth:nth-child(3) .plinth__col { animation-delay: -4.6s; }
@keyframes floatY { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.plinth__beam { position: absolute; bottom: 0; left: 50%; translate: -50% 0; width: 60%; height: 96%; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 70% at 50% 70%, color-mix(in srgb, var(--accent) 65%, transparent), transparent 72%); filter: blur(20px); mix-blend-mode: screen; transition: opacity .6s var(--ease); }
.plinth__glow { position: absolute; bottom: 6%; left: 50%; translate: -50% 0; width: 70%; height: 22px; z-index: 1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, transparent), transparent); filter: blur(7px); opacity: 0; transition: opacity .6s var(--ease); }
.plinth__cap { position: relative; z-index: 3; text-align: center; margin-top: 1.2rem; }
.plinth__rom { display: block; font-family: var(--font-display); font-size: .9rem; letter-spacing: .3em; color: var(--accent); opacity: .85; transition: opacity .5s var(--ease); }
.plinth__name { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1; margin-top: .35rem; text-shadow: 0 2px 18px rgba(0,0,0,.5); transition: color .5s var(--ease), transform .6s var(--ease-out); }
.plinth__enter { display: inline-flex; align-items: center; gap: .4em; margin-top: .7rem; font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--accent); opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }

.plinth--life { --accent: #E8895F; } .plinth--knowledge { --accent: #46C7BD; } .plinth--productivity { --accent: #8E83F0; }

/* hover / focus: lift + expand, spotlight the rest */
.colonnade:hover .plinth, .colonnade:focus-within .plinth { opacity: .42; filter: saturate(.55); transition: opacity .5s var(--ease), filter .5s var(--ease); }
.plinth:hover, .plinth:focus-visible, .plinth.is-active { opacity: 1 !important; filter: none !important; outline: none; }
.plinth:hover .plinth__col, .plinth:focus-visible .plinth__col, .plinth.is-active .plinth__col {
  transform: translateY(-26px) scale(1.11); filter: brightness(1.12) drop-shadow(0 40px 44px rgba(0,0,0,.6)); animation-play-state: paused; }
.plinth:hover .plinth__beam, .plinth:focus-visible .plinth__beam, .plinth.is-active .plinth__beam,
.plinth:hover .plinth__glow, .plinth:focus-visible .plinth__glow, .plinth.is-active .plinth__glow { opacity: 1; }
.plinth:hover .plinth__name, .plinth:focus-visible .plinth__name, .plinth.is-active .plinth__name { color: var(--accent); transform: translateY(-4px); }
.plinth:hover .plinth__enter, .plinth:focus-visible .plinth__enter, .plinth.is-active .plinth__enter { opacity: 1; transform: none; }

.stage__cue { position: absolute; bottom: 1.4rem; left: 50%; translate: -50% 0; z-index: 6; display: inline-flex; flex-direction: column; align-items: center; gap: .5rem;
  color: rgba(255,255,255,.6); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; }
.stage__cue .scroll-cue__line { background: linear-gradient(rgba(255,255,255,.6), transparent); }

/* tablet + mobile: the absolute colonnade cannot fit, so stack the scene */
@media (max-width: 900px) {
  .stage { min-height: auto; padding-bottom: 2.5rem; overflow: hidden; }
  .stage__intro { position: relative; z-index: 6; padding-top: clamp(6.5rem, 18vw, 8.5rem); padding-inline: clamp(1.1rem, 5vw, 2rem); max-width: 100%; transform: none !important; }
  .stage__kicker { font-size: .64rem; letter-spacing: .18em; display: inline-block; max-width: 100%; }
  .stage h1 { font-size: clamp(2rem, 8.4vw, 3.4rem); line-height: 1.04; margin-top: 1rem; }
  .stage__sub { font-size: 1rem; max-width: 100%; margin-top: 1.1rem; }
  /* keep the colonnade in normal flow (relative, not absolute) but POSITIONED so its
     z-index applies - otherwise a `static` colonnade paints under the positioned
     .stage__scrim/.stage__rays/.stage__dust overlays and the dark scrim (its bottom
     band is ~.96 opacity) washes the columns out to near-black on phones. */
  /* one pillar at a time: stack the colonnade vertically, each pillar full-width + centred */
  .colonnade { position: relative; z-index: 5; height: auto; flex-direction: column; flex-wrap: nowrap;
    align-items: center; justify-content: flex-start; gap: clamp(2.2rem, 9vw, 3.4rem);
    margin-top: clamp(2rem, 7vw, 3rem); padding: 0 1.2rem 1rem; }
  .plinth { flex: none; width: 100%; max-width: 320px; }
  .plinth__col { height: clamp(250px, 64vw, 340px); filter: brightness(.96) drop-shadow(0 22px 22px rgba(0,0,0,.5)); }
  .plinth__cap { margin-top: 1rem; }
  .plinth__rom { font-size: .82rem; }
  .plinth__name { font-size: clamp(1.5rem, 8vw, 2.1rem); }
  .plinth__enter { opacity: 1; transform: none; font-size: .82rem; margin-top: .5rem; }
  .colonnade:hover .plinth, .colonnade:focus-within .plinth { opacity: 1; filter: none; }
  .stage__cue { display: none; }
}
@media (max-width: 420px) {
  .stage__kicker { letter-spacing: .14em; }
}

/* ==========================================================================
   Phone (<=700px): centre the editorial text, and present one section at a
   time (each top-level section fills the screen and centres its content).
   ========================================================================== */
@media (max-width: 700px) {
  /* centre the big editorial text blocks (leave structured rows/legal prose alone) */
  .manifesto__inner, .manifesto__text, .manifesto__meta,
  .pillarhero .container, .pillarhero__lede,
  .story__body, .wwa-why__grid, .wwa-why__prose, .pillarpanel__body,
  .section--rail .rail-head > div, .vhero__intro {
    text-align: center;
  }
  .chapter { justify-content: center; }
  /* centre every section heading + eyebrow + pull-quote across the content pages.
     margin-inline:auto centres headings that carry an inline max-width (text-align
     alone only centres the lines inside their left-anchored box). */
  main h1, main h2 { text-align: center; margin-inline: auto; }
  .eyebrow, .pullquote__q, .pullquote__by { text-align: center; }
  /* keep the legal reading pages left-aligned for readability (opt back out) */
  .prose, .prose *, .toc, .toc *, .page-head, .page-head * { text-align: left; }
  .prose h1, .prose h2, .page-head h1, .page-head h2 { margin-inline: 0; }
  .manifesto__text, .pillarhero__lede, .story__body p, .wwa-why__prose p,
  .pillarpanel__body p, .vhero__lede {
    margin-inline: auto;
  }
  .story__quote { border-left: 0; padding-left: 0; }              /* pull-quote rule looks wrong centred */
  .pillarpanel .link-arrow, .vhero__intro .btn { justify-self: center; }
  .pillarpanel__mark { left: 50%; right: auto; translate: -50% -50%; opacity: .5; }

  /* one section at a time on the stacked pages (home, who-we-are, the pillars):
     each section fills the screen and centres, with a gentle (non-trapping) snap */
  html:has(body.stacked) { scroll-snap-type: y proximity; }
  body.stacked .stack > section { scroll-snap-align: start; }
  body.stacked .stack > .section,
  body.stacked .stack > .manifesto,
  body.stacked .stack > .story,
  body.stacked .stack > #pillars,
  body.stacked .stack > .closing {
    min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  }
  body.stacked .story__grid { min-height: auto; }                 /* the centred flex owns the height now */
}

/* ==========================================================================
   ACT · manifesto (oversized editorial statement)
   ========================================================================== */
.manifesto { position: relative; overflow: hidden; }
.manifesto__ghost { position: absolute; left: -2%; top: 50%; translate: 0 -50%; z-index: 0; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(9rem, 30vw, 26rem); line-height: .8; color: color-mix(in srgb, var(--indigo) 5%, transparent); white-space: nowrap; pointer-events: none; user-select: none; }
.manifesto__inner { position: relative; z-index: 1; }
.manifesto__text { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 4vw, 3.2rem); line-height: 1.22; letter-spacing: -.01em; max-width: 22ch; color: var(--ink); }
.manifesto__text .soft { color: var(--muted); }
.manifesto__meta { margin-top: clamp(2rem, 5vw, 3.2rem); display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2rem; max-width: 760px; }
@media (max-width: 700px) { .manifesto__meta { grid-template-columns: 1fr; gap: 1.4rem; } }
.manifesto__meta div { border-top: 1px solid var(--line); padding-top: 1rem; }
.manifesto__meta dt { font-size: .76rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--aqua-deep); }
.manifesto__meta dd { margin: .5rem 0 0; font-size: .98rem; color: var(--ink-soft); }

/* ==========================================================================
   ACT · story (asymmetric image + text, full-bleed image)
   ========================================================================== */
.story { position: relative; background: var(--indigo-deep); color: #fff; overflow: hidden; }
.story__grid { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; min-height: clamp(460px, 70vh, 760px); }
@media (max-width: 880px) { .story__grid { grid-template-columns: 1fr; } }
.story__media { position: relative; overflow: hidden; }
.story__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.story__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,24,88,.1), rgba(26,24,88,.55)); }
.story__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 6vw, 5.5rem); }
@media (max-width: 880px) { .story__media { min-height: 320px; } }
.story h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 3rem); margin: 1rem 0 1.2rem; }
.story p { color: #C9C7F0; }
.story__quote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.4; color: #fff; margin: 1.8rem 0 0; padding-left: 1.4rem; border-left: 3px solid var(--aqua); }

/* ==========================================================================
   ACT · pillar index (big editorial rows, not boxes)
   ========================================================================== */
.pindex { border-top: 1px solid var(--line); }
.pindex__row { position: relative; display: grid; grid-template-columns: clamp(3rem,7vw,6rem) 1fr auto; align-items: center; gap: clamp(1rem,3vw,2.5rem);
  padding: clamp(1.8rem, 4vw, 3rem) clamp(.5rem,2vw,1.5rem); border-bottom: 1px solid var(--line); color: var(--ink); overflow: hidden;
  transition: color .5s var(--ease); }
.pindex__row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); opacity: 0; transition: opacity .5s var(--ease); }
.pindex__row::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .55s var(--ease-out); }
.pindex__row:hover::before { opacity: .06; }
.pindex__row:hover::after { transform: scaleY(1); }
.pindex__no { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 70%, var(--line)); transition: color .5s var(--ease); }
.pindex__row:hover .pindex__no { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
.pindex__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.05; transition: transform .5s var(--ease-out), color .5s var(--ease); }
.pindex__row:hover .pindex__name { color: var(--accent); transform: translateX(8px); }
.pindex__desc { display: block; font-family: var(--font-body); font-size: .98rem; color: var(--muted); margin-top: .5rem; max-width: 52ch; }
.pindex__go { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--ink); transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease); flex: none; }
.pindex__go svg { width: 20px; height: 20px; transition: transform .4s var(--ease); }
.pindex__row:hover .pindex__go { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateX(6px); }
.pindex--life { --accent: #D9663F; } .pindex--knowledge { --accent: #1F9C92; } .pindex--productivity { --accent: #6E63D6; }
@media (max-width: 640px) { .pindex__go { display: none; } .pindex__row { grid-template-columns: clamp(2.4rem,9vw,3.4rem) 1fr; } }

/* ==========================================================================
   ACT · video rail (horizontal shelf)
   ========================================================================== */
.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.rail-ctrls { display: flex; gap: .7rem; }
.rail-btn { width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; color: var(--ink); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.rail-btn:hover { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.rail-btn:disabled { opacity: .3; cursor: default; }
.rail-btn svg { width: 20px; height: 20px; }
.rail-wrap { margin-top: clamp(2rem, 4vw, 3rem); }
.rail { display: flex; gap: clamp(1rem, 2vw, 1.6rem); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1.2rem; scrollbar-width: none; cursor: grab; scroll-behavior: smooth; }
.rail::-webkit-scrollbar { display: none; }
.rail.is-drag { cursor: grabbing; scroll-behavior: auto; }
.rail.is-drag * { pointer-events: none; }
.rail .video-card { flex: 0 0 clamp(280px, 30vw, 360px); scroll-snap-align: start; }
.rail-progress { height: 3px; background: var(--line); border-radius: 3px; margin-top: .4rem; overflow: hidden; }
.rail-progress span { display: block; height: 100%; width: 20%; background: linear-gradient(90deg, var(--indigo), var(--aqua)); border-radius: 3px; }

/* ==========================================================================
   refined pillar-page hero (inner pages)
   ========================================================================== */
.pillarhero { padding-top: clamp(130px, 20vh, 190px); }
.pillarhero .chapter { margin-bottom: 1.4rem; }
.pillarhero h1 { font-size: clamp(2.8rem, 7vw, 5rem); }

/* ==========================================================================
   Inner page · editorial blocks (replace templated card grids)
   ========================================================================== */
/* pillar hero: accent-stroked chapter numeral + ribbon */
.pillarhero .chapter { margin-bottom: 1.6rem; }
.pillarhero .chapter__no { -webkit-text-stroke-color: color-mix(in srgb, var(--accent,#2FB6AB) 60%, transparent); }
.pillarhero .chapter__label { color: var(--accent,#2FB6AB); }
.pillarhero h1 .stroke { color: var(--accent, #2FB6AB); font-style: italic; font-weight: 400; }
.pillarhero__lede { font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.5; color: var(--ink-soft); max-width: 30ch; }

/* numbered theme list (what you'll find here) */
.themes { border-top: 1px solid var(--line); max-width: 940px; }
.themes__row { display: grid; grid-template-columns: clamp(2.6rem,6vw,5rem) 1fr; gap: clamp(1.1rem,3vw,2.8rem); align-items: start;
  padding: clamp(1.7rem,3.6vw,2.8rem) 0; border-bottom: 1px solid var(--line); position: relative; }
.themes__no { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.7rem,3.6vw,2.6rem); line-height: 1; color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--accent,#2FB6AB) 75%, var(--line)); }
.themes__row h3 { font-size: clamp(1.3rem,2.5vw,1.8rem); }
.themes__row p { margin-top: .55rem; max-width: 58ch; color: var(--ink-soft); font-size: 1rem; }

/* pull-quote band ("a note from us") */
.pullquote { position: relative; background: var(--indigo-deep); color: #fff; overflow: hidden; }
.pullquote__mark { position: absolute; left: clamp(.4rem,2.5vw,2.5rem); top: clamp(-3rem,-4vw,-1.5rem); z-index: 0;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(13rem,30vw,26rem); line-height: 1;
  color: color-mix(in srgb, var(--accent,#2FB6AB) 26%, transparent); pointer-events: none; user-select: none; }
.pullquote__inner { position: relative; z-index: 1; max-width: 900px; }
.pullquote .eyebrow { color: var(--accent,#2FB6AB); }
.pullquote .eyebrow::before { background: var(--accent,#2FB6AB); }
.pullquote__q { font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem,3.6vw,2.7rem); line-height: 1.32; color: #fff; margin-top: 1.4rem; }
.pullquote__by { display: block; margin-top: 1.6rem; font-family: var(--font-body); font-style: normal;
  font-size: .82rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* "continue" pillar rows reuse .pindex; tighten heading rhythm on inner pages */
.continue h2 { font-size: clamp(2rem,4.4vw,3.2rem); max-width: 16ch; margin-bottom: clamp(1.4rem,4vw,2.4rem); }

/* who-we-are editorial story */
.story-lede { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem,3.4vw,2.5rem); line-height: 1.26; letter-spacing: -.01em; color: var(--ink); max-width: 20ch; }
.wwa-grid { display: grid; grid-template-columns: 1fr clamp(280px, 34%, 420px); gap: clamp(2rem,6vw,5rem); align-items: start; }
@media (max-width: 880px) { .wwa-grid { grid-template-columns: 1fr; } }
.wwa-prose p { font-size: 1.08rem; line-height: 1.7; margin-top: 1.15rem; color: var(--ink-soft); }
.wwa-prose p:first-child { margin-top: 0; }
.wwa-prose strong { color: var(--ink); }
.wwa-aside { position: sticky; top: 110px; }
@media (max-width: 880px) { .wwa-aside { position: static; } }

/* ==========================================================================
   Stacking panels - each section rises up and over the previous one
   (pure CSS: consecutive sticky siblings pile at the top; later DOM paints over)
   Shared by every page that opts in with `body.stacked` + `<main class="stack">`
   (home, who-we-are, the pillars). Home keeps an extra `home-stack` class for its
   own panel-fit tweaks further down.
   ========================================================================== */
body.stacked { overflow-x: clip; } /* `hidden` makes body a scroller and breaks sticky; `clip` does not */
/* dark base so the small region the last panel vacates before the footer reads as
   one continuous dark band (closing + footer are both dark), never a paper gap */
body.stacked { background: #0a0918; }

/* every stacked panel needs an opaque background or it won't hide the panel beneath
   it (and the dark body would show through). Paper by default; the dark hero/closing
   and the paper-2 panels set their own. */
body.stacked .stack > section { background: var(--paper); }
body.stacked .stack > .bg-paper-2 { background: var(--paper-2); }
body.stacked .stack > .story { background: var(--indigo-deep); } /* dark image panel keeps its own bg */
body.stacked .stack > .stage,
body.stacked .stack > .closing { background: #0a0918; }

.stack > section {
  position: sticky;
  top: 0;
  min-height: 100svh;
  /* a soft shadow on the upper edge sells the "rising over" depth */
  box-shadow: 0 -34px 60px -30px rgba(8, 7, 20, .55);
  /* dwell: extra scroll runway after each panel so it stays fully visible long
     enough to read before the next one rises over it */
  margin-bottom: 55vh;
}
.stack > .stage { box-shadow: none; } /* the hero is the base of the stack */
.stack > .closing { margin-bottom: 0; } /* last panel carries no margin; the tail below provides its runway */
/* invisible tail: extends the sticky containing block past the closing panel so the
   second-to-last panel (videos) stays pinned at the top until closing has fully risen
   over it (otherwise the stack ends too soon and videos gets shoved off the top while
   closing is only half-risen). It also gives closing its own reading dwell. Dark, so
   it blends into the footer with no visible gap. */
.stack > .stack-tail { height: 55vh; }

/* opaque backgrounds so each rising panel fully hides the one beneath it */
.stack > .manifesto { background: var(--paper); }
.stack > #pillars   { background: var(--paper); }

/* Center each content panel vertically and clear the fixed header, so content
   sits comfortably within one screen and never gets cramped against an edge or
   clipped by the panel rising over it. (Targets the .section panels only, not the
   hero or the full-bleed story.) */
.stack > .section {
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(5rem, 10vh, 7rem);
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

/* Compact the two content-heavy panels so everything fits one screen */
.home-stack .manifesto__text { font-size: clamp(1.5rem, 3vw, 2.45rem); max-width: 28ch; }
.home-stack .manifesto__meta { margin-top: clamp(1.2rem, 3vh, 2.2rem); }
.home-stack #pillars > .container > h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: clamp(.9rem, 2.4vh, 1.5rem); }
.home-stack #pillars .pindex__row { padding-block: clamp(.85rem, 2vh, 1.45rem); }
.home-stack #pillars .pindex__desc { margin-top: .35rem; }

/* story panel: the grid must fill the whole panel (its default 70vh height left
   an empty band below it on tall screens). Content stays centred, no gap. */
.home-stack .story__grid { min-height: 100svh; }
.home-stack .story__body { padding-block: clamp(2.5rem, 5vh, 4rem); }
.home-stack .story .chapter { margin-bottom: clamp(.9rem, 2.2vh, 1.2rem); }
.home-stack .story h2 { margin: .4rem 0 .8rem; }
.home-stack .story__quote { margin-top: clamp(.9rem, 2vh, 1.4rem); }

/* videos panel: tighten spacing so the cards + "See all" link fit shorter laptops */
.home-stack #videos .chapter { margin-bottom: clamp(.9rem, 2.4vh, 1.8rem); }
.home-stack #videos .rail-wrap { margin-top: clamp(1.1rem, 2.6vh, 2rem); }
.home-stack #videos [data-rail] > p { margin-top: clamp(1.2rem, 2.6vh, 2rem) !important; }
.home-stack #videos .video-card__body { padding: .85rem 1.1rem 1.1rem; }

/* Fall back to a normal, non-stacking scroll when:
   - the user prefers reduced motion, or
   - the viewport is <=900px: at/below this the hero colonnade and the two-column
     panels (story, wwa, pillars) reflow to a single column and grow taller than the
     screen, so the sticky "rise over" would clip reading content. The effect is a
     wide-screen delight; phones and portrait tablets get clean, natural scrolling. */
@media (prefers-reduced-motion: reduce), (max-width: 900px) {
  /* `relative` (not `static`) so each section stays a containing block for its own
     absolutely-positioned children (.stage/.closing scrim + bg). With `static` those
     children escape to the document root and the dark .closing__scrim blankets the
     hero at the top of the page. `relative` with no offsets cancels sticky and keeps
     normal-flow layout. */
  .stack > section { position: relative; min-height: 0; box-shadow: none; margin-bottom: 0; }
  .stack > .section { display: block; }
  .stack > .stack-tail { height: 0; }
  /* let reflowed panels size to their content instead of forcing a full screen */
  body.stacked .story__grid { min-height: 0; }
  body.stacked .pillarpanel__mark { font-size: clamp(9rem, 30vw, 14rem); }
}

/* closing CTA band */
.closing { position: relative; background: #0a0918; color: #fff; overflow: hidden; }
.closing__bg { position: absolute; inset: 0; z-index: 0; opacity: .28; }
.closing__bg img { width: 100%; height: 100%; object-fit: cover; }
.closing__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,9,24,.85), rgba(10,9,24,.7)), radial-gradient(80% 80% at 50% 120%, rgba(47,182,171,.25), transparent 70%); }
.closing__inner { position: relative; z-index: 2; text-align: center; max-width: 820px; margin-inline: auto; }
.closing h2 { color: #fff; font-size: clamp(2.2rem, 5.5vw, 4.2rem); }
.closing p { color: rgba(255,255,255,.78); margin-top: 1.1rem; }
.closing form { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }
.closing input[type=email] { flex: 1; min-width: 240px; max-width: 360px; padding: 1em 1.3em; border-radius: 100px; border: 1.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 1rem; }
.closing input[type=email]::placeholder { color: rgba(255,255,255,.6); }
.closing input[type=email]:focus-visible { outline-color: var(--aqua); background: rgba(255,255,255,.14); }
.closing .form-msg { color: var(--aqua-soft); justify-self: center; }
.closing__note { font-size: .82rem; color: rgba(255,255,255,.55); margin-top: 1rem; }

/* ==========================================================================
   Stacked inner pages - panel fit (who-we-are, the pillars)
   Each sticky panel must fit ~100svh or the next panel rising over it clips it.
   ========================================================================== */
/* the story grid fills the whole panel on any stacked page (not just home) */
body.stacked .story__grid { min-height: 100svh; }
body.stacked .story__body { padding-block: clamp(2rem, 5vh, 4rem); }
/* pindex rows breathe less when stacked so heading + 3 rows clear one screen */
body.stacked .stack .pindex__row { padding-block: clamp(.8rem, 2.2vh, 1.5rem); }
body.stacked .stack .pindex__desc { margin-top: .3rem; }

/* who-we-are · "why we share" panel: heading aside a single readable column */
.wwa-why__grid { display: grid; grid-template-columns: clamp(280px, 34%, 420px) 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; margin-top: clamp(1.4rem, 4vh, 2.6rem); }
.wwa-why__grid h2 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; }
.wwa-why__prose p { font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.65; margin-top: 1.1rem; color: var(--ink-soft); }
.wwa-why__prose p:first-child { margin-top: 0; }
.wwa-why__prose strong { color: var(--ink); }
@media (max-width: 880px) { .wwa-why__grid { grid-template-columns: 1fr; gap: 1.4rem; } }

/* the pillars · one panel per pillar, with a giant ghost numeral */
.pillarpanel { overflow: hidden; }
/* the .stack > .section wrapper already flex-centres this vertically; keep the inner
   content-height so it never overflows the panel (which would clip the CTA). */
.pillarpanel__inner { position: relative; }
.pillarpanel__mark { position: absolute; right: -2vw; top: 50%; translate: 0 -50%; z-index: 0;
  font-family: var(--font-display); font-weight: 600; line-height: 1;
  font-size: clamp(14rem, 38vw, 34rem); color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--accent, #2FB6AB) 24%, transparent);
  pointer-events: none; user-select: none; }
.pillarpanel__body { position: relative; z-index: 1; max-width: 34ch; }
/* size with both vw and vh so the heading + paragraph + CTA always clear one screen,
   including short, wide laptop viewports (e.g. 1280x720) */
.pillarpanel__body h2 { font-size: clamp(1.8rem, min(4.2vw, 5vh), 3rem); line-height: 1.06; margin: .2rem 0 .9rem; }
.pillarpanel__body p { font-size: clamp(1.02rem, min(1.6vw, 2.1vh), 1.25rem); line-height: 1.5; color: var(--ink-soft); max-width: 46ch; }
.pillarpanel .link-arrow { margin-top: clamp(1.1rem, 2.6vh, 2rem); color: var(--accent, #2FB6AB); border-color: color-mix(in srgb, var(--accent, #2FB6AB) 40%, transparent); }
.pillarpanel .link-arrow:hover { border-color: var(--accent, #2FB6AB); }
.pillarpanel .chapter__no { -webkit-text-stroke-color: color-mix(in srgb, var(--accent, #2FB6AB) 55%, transparent); }
.pillarpanel .chapter__label { color: var(--accent, #2FB6AB); }

/* ==========================================================================
   Videos page
   ========================================================================== */
.vhero { position: relative; background: #0a0918; color: #fff; overflow: hidden;
  padding-top: clamp(120px, 18vh, 180px); padding-bottom: clamp(3rem, 7vw, 6rem); }
.vhero__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 78% 30%, rgba(47,182,171,.20), transparent 70%),
              radial-gradient(50% 50% at 12% 90%, rgba(110,99,214,.20), transparent 70%); }
.vhero .container { position: relative; z-index: 1; }
.vhero .chapter__no { -webkit-text-stroke-color: rgba(255,255,255,.28); }
.vhero .chapter__label { color: rgba(255,255,255,.7); }
.vhero__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-top: clamp(1.4rem, 4vw, 2.4rem); }
@media (max-width: 920px) { .vhero__grid { grid-template-columns: 1fr; gap: 2rem; } }
.vhero__intro h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; color: #fff; }
.vhero__intro h1 .stroke { color: var(--aqua); font-style: italic; font-weight: 400; }
.vhero__lede { margin-top: 1.3rem; max-width: 42ch; color: #C9C7F0; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.55; }
.vhero__intro .btn { margin-top: 1.8rem; }

.vhero__feature { position: relative; }
.vfeature__skeleton { aspect-ratio: 16/9; border-radius: var(--radius-lg); background: linear-gradient(110deg, #15132f, #1d1a40); }
.vfeature__thumb { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border: 0; padding: 0; cursor: pointer;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 70px -28px rgba(0,0,0,.7); background: #0c0b22; }
.vfeature__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.vfeature__thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,9,34,0) 55%, rgba(10,9,34,.55)); transition: background .3s var(--ease); }
.vfeature__thumb:hover img { transform: scale(1.04); }
.vfeature__thumb .video-card__tag { left: 16px; top: 16px; }
.vfeature__thumb .video-card__play { width: 76px; height: 76px; }
.vfeature__thumb .video-card__play svg { width: 32px; height: 32px; }
.vfeature__thumb:hover .video-card__play { transform: translate(-50%, -50%) scale(1.1); background: var(--aqua); border-color: var(--aqua); color: #06302C; }
.vfeature .video-card__frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 70px -28px rgba(0,0,0,.7); }
.vfeature__meta { margin-top: 1.1rem; }
.vfeature__eyebrow { font-family: var(--font-body); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: .72rem; color: var(--aqua); }
.vfeature__title { font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.25; color: #fff; margin-top: .5rem; }

.section--rail { padding-block: clamp(3rem, 7vw, 6rem); }
.section--rail .chapter__no { -webkit-text-stroke-color: color-mix(in srgb, var(--accent, #2FB6AB) 55%, transparent); }
.section--rail .chapter__label { color: var(--accent, #2FB6AB); }
.section--rail .rail-btn:hover { background: var(--accent, var(--indigo)); border-color: var(--accent, var(--indigo)); color: #fff; }
.section--rail .rail-progress span { background: linear-gradient(90deg, var(--accent, var(--indigo)), var(--aqua)); }

.closing__actions { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }
.closing__actions + form { margin-top: 1.2rem; }
.btn--ghost-light { border: 1.5px solid rgba(255,255,255,.3); color: #fff; background: transparent; }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.08); transform: translateY(-2px); }

/* ==========================================================================
   Header dropdown - "The Pillars" (Overview + the three pillars)
   ========================================================================== */
.nav-dd { position: relative; }
.nav-dd__trigger { display: inline-flex !important; align-items: center; gap: .3em; }
.nav-dd__caret { width: .6em; height: .6em; flex: none; transition: transform .25s var(--ease); }
.nav-dd:hover .nav-dd__caret, .nav-dd:focus-within .nav-dd__caret { transform: rotate(180deg); }
/* highlight the trigger while you are on one of the pillar pages */
.nav-dd:has(.nav-dd__menu [aria-current="page"]) .nav-dd__trigger { color: var(--indigo); }
.site-header:not(.is-scrolled) .nav-dd:has(.nav-dd__menu [aria-current="page"]) .nav-dd__trigger { color: #fff; }

.nav-dd__menu {
  position: absolute; top: 100%; left: 50%; translate: -50% 12px; z-index: 20;
  margin: 0; padding: .4rem; list-style: none; min-width: 212px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 22px 48px -18px rgba(20,20,45,.45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease), translate .2s var(--ease), visibility .2s;
}
/* invisible hover bridge so the gap between trigger and menu doesn't drop the hover */
.nav-dd__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-dd:hover .nav-dd__menu, .nav-dd:focus-within .nav-dd__menu {
  opacity: 1; visibility: visible; pointer-events: auto; translate: -50% 6px;
}
.nav-dd__menu li { margin: 0; }
.nav-dd__menu a {
  display: block !important; padding: .58rem .9rem; border-radius: 9px;
  font-size: .94rem !important; font-weight: 500; font-family: var(--font-body) !important;
  color: var(--ink-soft) !important; white-space: nowrap;
}
.nav-dd__menu a::after { display: none !important; }
.nav-dd__menu a:hover, .nav-dd__menu a[aria-current="page"] { background: var(--paper-2); color: var(--indigo) !important; }

/* inside the full-screen mobile menu: show the pillar links inline under the trigger */
@media (max-width: 880px) {
  .nav-dd { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
  .nav-dd__caret { display: none; }
  .nav-dd__menu {
    position: static; opacity: 1; visibility: visible; pointer-events: auto;
    translate: none; transform: none; background: none; border: 0; box-shadow: none;
    padding: 0; min-width: 0; display: flex; flex-direction: column; gap: .8rem; align-items: center;
  }
  .nav-dd__menu::before { display: none; }
  .nav-dd__overview { display: none; } /* the parent "The Pillars" already links to overview */
  .nav-dd__menu a { font-size: 1.12rem !important; color: var(--ink-soft) !important; padding: 0; }
}