/* =============================================================
   Raewyn Barry — Home
   Static build (maps to WordPress + ACF template parts later)
   -------------------------------------------------------------
   1.  Tokens
   2.  Reset / base
   3.  Layout helpers
   4.  Typography helpers
   5.  Buttons / links
   6.  Header / nav
   7.  Hero
   8.  Logos
   9.  About / VSL
   10. Who this is for
   11. Methodology
   12. Meet Raewyn
   13. Brand pillars
   14. Stories
   15. CTA
   16. FAQ accordion
   17. Footer
   18. Modal
   19. Scroll animations
   20. Responsive
   ============================================================= */

/* 1. TOKENS ------------------------------------------------- */
:root{
  --ink:#120f1f;
  --ink-2:#0d0b18;
  --ink-3:#08070f;

  --periwinkle:#99b1f8;
  --periwinkle-2:#b6c6fb;

  --lavender:#f3f3fb;
  --lavender-2:#e9ebf9;

  --paper:#ffffff;
  --text:#141118;
  --text-muted:#5b5560;
  --text-on-dark:rgba(255,255,255,.70);
  --line:rgba(18,15,31,.10);
  --line-dark:rgba(255,255,255,.14);

  /* Figma type system:
     --font-display  IBM Plex Sans  → section headings only
     --font-label    Montserrat     → body copy, eyebrows, nav, buttons, labels
     --font-serif    Cormorant Garamond italic → accent words only */
  --font-display:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-label:"Montserrat",system-ui,sans-serif;

  --container:1200px;
  --gutter:clamp(20px,5vw,60px);
  --section-y:clamp(72px,10vw,132px);

  --ease:cubic-bezier(.22,1,.36,1);
  --radius:8px;

  --header-h:84px;
}

/* 2. RESET / BASE ----------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--font-label);
  font-weight:400;
  font-size:16px;
  line-height:1.45;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,dl,dd,figure,blockquote{margin:0}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:10px 18px;border-radius:0 0 6px 0;
}
.skip-link:focus{left:0}

::selection{background:var(--periwinkle);color:var(--ink)}

/* 3. LAYOUT --------------------------------------------- */
.container{
  width:100%;
  max-width:calc(var(--container) + var(--gutter)*2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:var(--section-y)}
.section--dark{background:var(--ink);color:#fff}
.section--dark .eyebrow{color:var(--periwinkle)}
.center{text-align:center}

.section-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,6vw,80px);
  align-items:end;
  margin-bottom:clamp(40px,6vw,72px);
}
.section-head__intro{
  font-weight:300;
  color:var(--text);
  font-size:16px;line-height:1.45;
  max-width:44ch;
}
.section--dark .section-head__intro{color:var(--text-on-dark)}

/* 4. TYPOGRAPHY ---------------------------------------- */
/* Figma: section eyebrows are sentence/Title case, NOT all-caps */
.eyebrow{
  font-family:var(--font-label);
  font-weight:500;
  font-size:13px;
  letter-spacing:0;
  color:var(--periwinkle);
  margin-bottom:16px;
}
.eyebrow--accent{color:var(--periwinkle)}

.h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.7rem,3.4vw,2.5rem);
  line-height:1.14;
  letter-spacing:-.015em;
}
.lead{
  font-weight:300;
  font-size:16px;line-height:1.45;
  color:var(--text);
  margin-top:20px;
  max-width:48ch;
}
.accent{color:var(--periwinkle)}
.accent-serif{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:500;
  color:var(--periwinkle-2);
}

/* 5. BUTTONS / LINKS ---------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-label);
  font-weight:600;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:15px 22px;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn__icon{width:10px;height:10px;transition:transform .3s var(--ease)}
.btn:hover .btn__icon{transform:translate(2px,-2px)}
.btn--solid{background:#fff;color:var(--ink);border-color:#fff}
.btn--solid:hover{box-shadow:0 14px 34px -12px rgba(153,177,248,.7)}
.btn--ghost{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.28)}
.btn--ghost:hover{background:rgba(255,255,255,.26)}
.btn--dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--dark:hover{box-shadow:0 14px 34px -14px rgba(18,15,31,.55)}

.link-arrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-label);
  font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding-bottom:6px;
  border-bottom:1px solid currentColor;
  transition:gap .3s var(--ease),color .3s var(--ease);
  color:var(--ink);
}
.link-arrow svg{width:11px;height:11px}
.link-arrow:hover{gap:18px}
.link-arrow--light{color:#fff}

/* 6. HEADER ------------------------------------------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding-block:22px;
  transition:padding .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  padding-block:12px;
  background:rgba(18,15,31,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-color:var(--line-dark);
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px}

.logo{display:flex;align-items:center;line-height:1;color:#fff}
.logo img{display:block;height:42px;width:auto}
.site-header.is-scrolled .logo img{height:38px;transition:height .35s var(--ease)}
.footer .logo img{height:52px}
.logo--light{color:#fff}

.site-nav__list{display:flex;gap:8px}
.site-nav a{
  display:block;padding:10px 15px;
  font-family:var(--font-label);font-weight:500;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
  position:relative;transition:color .3s var(--ease);
}
.site-nav a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:4px;height:1px;
  background:var(--periwinkle);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.site-nav a:hover{color:var(--periwinkle)}
.site-nav a:hover::after{transform:scaleX(1)}
.site-nav a.is-current{color:var(--periwinkle)}
.site-nav__soon{
  display:block;padding:10px 15px;
  font-family:var(--font-label);font-weight:500;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.38);cursor:not-allowed;
}

.nav-toggle{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;transition:transform .3s var(--ease),opacity .3s var(--ease)}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 7. HERO ------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding-block:calc(var(--header-h) + 40px) 120px;
  color:#fff;
  overflow:hidden;
  background:#7c705b;
}
.hero__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 30%}
.hero__bg img,.hero__bg video{
  width:100%;height:120%;object-fit:cover;object-position:center 30%;
  will-change:transform;
}
.hero__video{display:block}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,var(--ink) 14%,rgba(31,28,55,.86) 52%,rgba(31,28,55,.68) 100%);
}
.hero__inner{position:relative;z-index:2;width:100%}

.hero__rail{
  position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:44px;
}
.hero__rail span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--font-label);font-weight:500;font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.5);
}

.hero__eyebrow{
  position:absolute;right:0;top:-40px;
  font-family:var(--font-label);font-weight:500;font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55);
}

.hero__content{max-width:1000px;margin-left:clamp(0px,7vw,120px)}
.hero__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2.9rem,9vw,7.4rem);
  line-height:.98;
  letter-spacing:-.02em;
}
.hero__title .line{display:block}
.hero__title em{font-style:normal}
.hero__subtitle{
  margin-top:26px;
  font-size:clamp(1.1rem,2.2vw,1.7rem);
  font-weight:400;
  color:rgba(255,255,255,.9);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px}

.hero__scroll{
  position:absolute;left:50%;bottom:30px;z-index:2;transform:translateX(-50%);
  width:26px;height:42px;border:1px solid rgba(255,255,255,.4);border-radius:14px;
  display:flex;justify-content:center;padding-top:8px;
}
.hero__scroll span{width:3px;height:8px;border-radius:2px;background:#fff;animation:scrolldot 1.8s var(--ease) infinite}
@keyframes scrolldot{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}80%{opacity:0;transform:translateY(10px)}100%{opacity:0}}

/* 8. LOGOS ----------------------------------------- */
.logos{background:var(--ink);color:#fff;padding-block:clamp(40px,6vw,64px)}
.logos__label{
  text-align:center;
  font-family:var(--font-label);font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--periwinkle);
  margin-bottom:28px;
}
.logos__row{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(28px,5vw,68px);
}
.logos__row li{
  font-family:var(--font-serif);font-weight:600;font-size:22px;
  letter-spacing:.02em;color:rgba(255,255,255,.72);
  transition:color .3s var(--ease),transform .3s var(--ease);
}
.logos__row li span{font-family:var(--font-label);font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.02em}
.logos__row li.logos__wide{font-family:var(--font-label);font-weight:700;font-size:17px;letter-spacing:.34em;text-transform:uppercase}
.logos__row li:hover{color:#fff;transform:translateY(-2px)}

/* 9. ABOUT / VSL --------------------------------- */
.about__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(32px,7vw,90px);align-items:center;
}
.about__copy .h2{margin-bottom:4px}
.about__copy .btn{margin-top:30px}

.vsl{
  position:relative;display:block;width:100%;
  border-radius:var(--radius);overflow:hidden;
  aspect-ratio:585/290;
}
.vsl img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.vsl:hover img{transform:scale(1.04)}
.vsl__play{
  position:absolute;inset:0;margin:auto;width:70px;height:70px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.vsl__play svg{width:26px;height:26px;margin-left:3px}
.vsl:hover .vsl__play{transform:scale(1.08);background:#fff}
.vsl__bar{
  margin-top:14px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--periwinkle);color:var(--ink);
  font-family:var(--font-label);font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;
  padding:15px;border-radius:var(--radius);
  transition:filter .3s var(--ease);
}
.vsl__bar svg{width:14px;height:14px}
.vsl__bar:hover{filter:brightness(1.05)}
.vsl__ghost{
  margin-top:10px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid var(--line);
  font-family:var(--font-label);font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
  padding:15px;border-radius:var(--radius);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.vsl__ghost svg{width:10px;height:10px}
.vsl__ghost:hover{border-color:var(--ink);color:var(--ink)}

/* 10. WHO THIS IS FOR --------------------------- */
.who__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--lavender);
  border:1px solid var(--lavender-2);
  border-radius:12px;
  overflow:hidden;
}
.who__cell{
  padding:clamp(24px,3vw,40px);
  border-right:1px solid var(--lavender-2);
  border-bottom:1px solid var(--lavender-2);
}
.who__cell:nth-child(3n){border-right:0}
.who__cell:nth-child(n+4){border-bottom:0}
.who__num{
  display:block;
  font-family:var(--font-label);font-weight:600;font-size:17px;
  color:var(--periwinkle);letter-spacing:0;
}
.who__cell p{margin-top:18px;font-size:14.5px;font-weight:500;color:var(--text);line-height:1.45}

/* 11. METHODOLOGY ------------------------------ */
.methodology__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line-dark);border-radius:12px;overflow:hidden;
  background:var(--ink-2);
}
.phase{
  padding:clamp(26px,2.4vw,36px);
  border-right:1px solid var(--line-dark);
  border-top:2px solid transparent;
  position:relative;
  transition:background .4s var(--ease);
}
.phase:last-child{border-right:0}
/* Figma: first phase highlighted, the rest dimmed */
.phase--active{
  border-top-color:var(--periwinkle);
  background:rgba(153,177,248,.05);
}
.phase:not(.phase--active){opacity:.62}
.phase:not(.phase--active):hover{opacity:1;background:rgba(153,177,248,.05)}
.phase__icon{
  position:absolute;top:clamp(26px,2.4vw,36px);right:clamp(26px,2.4vw,36px);
  width:18px;height:18px;color:var(--periwinkle);
}
.phase__icon svg{width:100%;height:100%}
.phase__step{
  font-family:var(--font-label);font-weight:600;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--periwinkle);
}
.phase--active .phase__step{color:var(--periwinkle)}
.phase__title{
  font-family:var(--font-display);font-weight:700;font-size:1.35rem;
  margin:6px 0 12px;
}
.phase__text{font-size:13.5px;color:var(--text-on-dark);line-height:1.55}
.phase--active .phase__text{color:#fff}

/* 12. MEET RAEWYN ----------------------------- */
.meet__grid{
  display:grid;grid-template-columns:minmax(0,470px) 1fr;
  gap:clamp(32px,4vw,56px);align-items:center;
}

/* photo sits in front, a solid pale block offset up-and-right behind it */
.meet__portrait{position:relative;padding:22px 22px 0 0}
.meet__portrait::before{
  content:"";position:absolute;inset:0;
  background:var(--lavender-2);border-radius:14px;
}
.meet__portrait-inner{position:relative;border-radius:14px;overflow:hidden}
.meet__portrait-inner img{
  display:block;width:100%;
  aspect-ratio:480/630;object-fit:cover;
}

.meet__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.55rem,2.4vw,2.05rem);
  line-height:1.16;letter-spacing:-.02em;
  color:var(--text);
}
.meet__body{margin-top:22px;max-width:58ch}
.meet__body p{font-weight:300;color:var(--text);font-size:15.5px;line-height:1.5}
.meet__body p + p{margin-top:16px}
.meet__sign{
  margin-top:20px;
  font-family:var(--font-label);font-weight:600;font-size:12px;
  letter-spacing:.08em;color:var(--periwinkle);
}
.rule{border:0;border-top:1px solid var(--line);margin:32px 0}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px}
.stat dt{
  font-family:var(--font-label);font-weight:600;font-size:clamp(1.5rem,2.2vw,1.9rem);
  color:var(--periwinkle);letter-spacing:-.01em;
}
.section--dark .stat dt{color:var(--periwinkle)}
.stat dd{
  margin-top:8px;
  font-family:var(--font-label);font-weight:400;font-size:13px;
  letter-spacing:0;color:var(--text);
}
.section--dark .stat dd{color:rgba(255,255,255,.82)}
.stat dt .accent{color:var(--periwinkle)}

/* 13. BRAND PILLARS -------------------------- */
.brand__title{margin-inline:auto;margin-bottom:clamp(40px,6vw,70px)}
@media (max-width:560px){.brand__title{max-width:20ch}}
.brand__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line-dark);border-radius:12px;overflow:hidden}
.pillar{
  padding:clamp(26px,3vw,44px);
  border-right:1px solid var(--line-dark);
  display:flex;flex-direction:column;
}
.pillar:last-child{border-right:0}
.pillar__title{font-family:var(--font-display);font-weight:700;font-size:1.4rem;letter-spacing:-.01em}
.pillar__sub{
  margin-top:8px;
  font-family:var(--font-label);font-weight:500;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-on-dark);
}
.pillar__q{
  margin-top:26px;
  font-family:var(--font-serif);font-style:italic;font-size:18px;
  color:var(--periwinkle-2);line-height:1.4;
}
.pillar__list{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.pillar__list li{
  position:relative;padding-left:26px;
  font-size:13.5px;color:var(--text-on-dark);
}
.pillar__list li::before{
  content:"";position:absolute;left:0;top:.62em;width:15px;height:1px;background:var(--periwinkle);
}
.pillar__outcome{margin-top:auto;padding-top:30px}
.pillar__outcome span{
  font-family:var(--font-label);font-weight:600;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-on-dark);
}
.pillar__outcome p{margin-top:12px;font-size:14.5px;color:#fff;font-weight:500}

/* 14. STORIES ------------------------------- */
.stories__head .stories__all{justify-self:end;align-self:center}
.stories__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.story{
  background:var(--ink-2);
  border:1px solid var(--line-dark);
  border-radius:12px;
  padding:clamp(18px,2vw,24px);
  display:flex;flex-direction:column;
  transition:transform .4s var(--ease),border-color .4s var(--ease);
}
.story:hover{transform:translateY(-6px);border-color:rgba(153,177,248,.4)}
.story__media{border-radius:8px;overflow:hidden;aspect-ratio:346/393}
.story__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.story:hover .story__media img{transform:scale(1.05)}
.story__quote-mark{
  font-family:var(--font-serif);font-size:52px;line-height:.6;color:var(--periwinkle);
  margin:22px 0 4px;
}
.story blockquote{font-size:15px;color:rgba(255,255,255,.9);line-height:1.5}
.story figcaption{
  margin-top:auto;padding-top:24px;
  border-top:1px solid var(--line-dark);margin-top:24px;
  display:flex;flex-direction:column;gap:6px;
}
.story__name{font-family:var(--font-label);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.story__role{font-size:12px;color:var(--text-on-dark)}

.stats--wide{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  margin-top:clamp(40px,5vw,64px);
  border:1px solid var(--line-dark);border-radius:12px;
  padding:clamp(28px,3vw,40px);
  text-align:center;
}
.stats--wide .stat dt{color:var(--periwinkle)}
.stats--wide .stat{position:relative}
.stats--wide .stat + .stat::before{
  content:"";position:absolute;left:calc(-12px);top:50%;transform:translateY(-50%);
  width:1px;height:56px;background:var(--line-dark);
}
@media (max-width:640px){
  .stats--wide{grid-template-columns:1fr 1fr;row-gap:32px}
  .stats--wide .stat + .stat::before{display:none}
}

/* 15. CTA --------------------------------- */
.cta{position:relative;overflow:hidden;color:#fff;padding-block:clamp(90px,13vw,170px)}
.cta__bg{position:absolute;inset:0;z-index:0}
.cta__bg img{width:100%;height:120%;object-fit:cover;object-position:center 30%}
.cta__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(28,22,45,.82),rgba(40,30,64,.82)),rgba(30,24,48,.35);
}
.cta__inner{position:relative;z-index:2;max-width:760px;text-align:center;margin-inline:auto}
.cta__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.1rem,5.5vw,4rem);line-height:1.04;letter-spacing:-.02em;
}
.cta__title .line{display:block}
.cta__text{margin:22px 0 34px;color:rgba(255,255,255,.82);font-size:16px}

/* 16. FAQ -------------------------------- */
.faq{background:var(--ink);color:#fff}
.faq .eyebrow{color:var(--periwinkle)}
.faq__grid{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:clamp(32px,7vw,90px)}
.faq__note{margin-top:24px;font-size:14px;color:var(--text-on-dark)}
.faq__note a{color:var(--periwinkle);font-style:italic;border-bottom:1px solid currentColor}

.acc{border-bottom:1px solid var(--line-dark)}
.acc:first-child{border-top:1px solid var(--line-dark)}
.acc__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 4px;text-align:left;
  font-family:var(--font-label);font-weight:600;font-size:15px;
  letter-spacing:0;color:#fff;
  transition:color .3s var(--ease);
}
.acc__q:hover{color:var(--periwinkle)}
.acc__icon{position:relative;width:14px;height:14px;flex:none}
.acc__icon::before,.acc__icon::after{
  content:"";position:absolute;background:currentColor;transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.acc__icon::before{left:0;right:0;top:6px;height:2px}
.acc__icon::after{top:0;bottom:0;left:6px;width:2px}
.acc__q[aria-expanded="true"] .acc__icon::after{transform:scaleY(0);opacity:0}
.acc__q[aria-expanded="true"]{color:var(--periwinkle)}
.acc__panel{overflow:hidden;height:0;transition:height .4s var(--ease)}
.acc__inner{padding:0 4px 26px;max-width:64ch}
.acc__inner p{font-size:14px;color:var(--text-on-dark);line-height:1.65}

/* 17. FOOTER --------------------------- */
.footer{background:var(--ink);color:#fff;padding-top:clamp(60px,8vw,96px)}
.footer__grid{
  display:grid;
  grid-template-columns:1.45fr 1fr 1.3fr 1.15fr;
  gap:clamp(28px,4vw,52px);
  padding-bottom:56px;
}
.footer__tagline{
  margin-top:24px;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(22px,1.9vw,26px);line-height:1.22;letter-spacing:-.01em;
  max-width:235px;
}
.footer__social{display:flex;gap:12px;margin-top:28px}
.footer__social a{
  width:40px;height:40px;border:0;border-radius:50%;
  background:rgba(255,255,255,.09);
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.footer__social svg{width:16px;height:16px}
.footer__social a:hover{background:var(--periwinkle);color:var(--ink)}

.footer__col h3{
  font-family:var(--font-label);font-weight:700;font-size:15px;
  letter-spacing:0;color:#fff;
  margin-bottom:22px;
}
.footer__col ul{display:flex;flex-direction:column;gap:15px}
.footer__col a{font-size:13.5px;color:rgba(255,255,255,.82);transition:color .3s var(--ease)}
.footer__col a:hover{color:var(--periwinkle)}
.footer__contact li{
  display:flex;gap:12px;align-items:flex-start;
  font-size:13.5px;color:rgba(255,255,255,.82);line-height:1.5;
}
.footer__contact li svg{width:16px;height:16px;flex:none;margin-top:2px;color:rgba(255,255,255,.5)}
.footer__contact a{color:rgba(255,255,255,.82);transition:color .3s var(--ease)}
.footer__contact a:hover{color:var(--periwinkle)}
.footer__dispatch p{font-size:13.5px;color:rgba(255,255,255,.7);margin-bottom:20px}

.dispatch{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line-dark);padding-bottom:10px}
.dispatch input{
  flex:1;background:none;border:0;color:#fff;font:inherit;font-size:13px;padding:6px 0;
}
.dispatch input::placeholder{color:rgba(255,255,255,.45)}
.dispatch input:focus{outline:none}
.dispatch button{
  font-family:var(--font-label);font-weight:500;font-size:13px;
  letter-spacing:0;color:var(--periwinkle);
  transition:opacity .3s var(--ease);
}
.dispatch button:hover{opacity:.75}

.footer__bar{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-block:26px;border-top:1px solid var(--line-dark);
}
.footer__bar p{
  font-family:var(--font-label);font-weight:400;font-size:12px;
  letter-spacing:0;color:rgba(255,255,255,.5);
}

/* 18. MODAL --------------------------- */
.modal{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:24px}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(8,7,15,.86);backdrop-filter:blur(4px)}
.modal__dialog{position:relative;width:min(960px,100%);animation:modalin .4s var(--ease)}
@keyframes modalin{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.modal__close{position:absolute;top:-42px;right:0;font-size:30px;color:#fff;line-height:1}
.modal__video{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.modal__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 18b. INTERIOR PAGES (shared) ------- */
.page-hero{
  position:relative;overflow:hidden;
  background:var(--ink);color:#fff;
  padding-top:calc(var(--header-h) + clamp(56px,10vw,120px));
  padding-bottom:clamp(56px,9vw,110px);
}
.page-hero__inner{position:relative;z-index:2;max-width:780px}
.page-hero h1{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.06;letter-spacing:-.02em;
  margin-top:12px;
}
.page-hero__lead{
  margin-top:24px;color:var(--text-on-dark);
  font-size:clamp(1rem,1.5vw,1.15rem);max-width:58ch;
}
.page-hero .accent-serif{color:var(--periwinkle-2)}

.prose p{color:var(--text-muted);font-size:15.5px;max-width:64ch}
.prose p + p{margin-top:18px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,7vw,88px)}
.form{display:grid;gap:20px}
.form__row{display:grid;gap:9px}
.form label{
  font-family:var(--font-label);font-weight:600;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);
}
.form input,.form textarea{
  font:inherit;font-size:15px;color:var(--text);
  background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:14px 16px;transition:border-color .3s var(--ease);
}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--periwinkle)}
.form .btn{justify-self:start;margin-top:4px}
.form__hint{font-size:12.5px;color:var(--text-muted)}

.contact-aside{display:flex;flex-direction:column;gap:32px}
.contact-line span{
  display:block;font-family:var(--font-label);font-weight:600;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--periwinkle);margin-bottom:8px;
}
.contact-line a,.contact-line p{font-size:16px;color:var(--text)}
.contact-line a:hover{color:var(--periwinkle)}

.steps{counter-reset:step;display:grid;gap:16px}
.steps li{
  position:relative;padding-left:46px;
  font-size:14.5px;color:var(--text-muted);min-height:30px;display:flex;align-items:center;
}
.steps li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--periwinkle);color:var(--periwinkle);
  display:grid;place-items:center;
  font-family:var(--font-label);font-weight:600;font-size:12px;
}

/* workshops */
.workshops{display:grid;gap:clamp(20px,3vw,32px)}
.workshop{
  display:grid;grid-template-columns:1fr 300px;gap:clamp(28px,4vw,56px);
  padding:clamp(28px,4vw,48px);
  border:1px solid var(--line);border-radius:14px;
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.workshop:hover{border-color:var(--periwinkle);transform:translateY(-3px)}
.workshop__pill{
  display:inline-block;
  font-family:var(--font-label);font-weight:600;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--periwinkle);
  border:1px solid var(--periwinkle);border-radius:100px;padding:6px 14px;margin-bottom:20px;
}
.workshop h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.01em}
.workshop__desc{margin-top:14px;color:var(--text-muted);font-size:15px;max-width:52ch}
.workshop__list{margin-top:22px;display:grid;gap:11px}
.workshop__list li{position:relative;padding-left:24px;font-size:13.5px;color:var(--text-muted)}
.workshop__list li::before{content:"";position:absolute;left:0;top:.6em;width:14px;height:1px;background:var(--periwinkle)}
.workshop__aside{
  border-left:1px solid var(--line);padding-left:clamp(24px,3vw,40px);
  display:flex;flex-direction:column;justify-content:center;gap:14px;
}
.workshop__meta{font-family:var(--font-label);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.workshop__note{font-size:12.5px;color:var(--text-muted)}
.workshop--soon{opacity:.92}
.workshop--soon:hover{border-color:var(--line);transform:none}

.add-note{
  margin-top:clamp(28px,4vw,44px);text-align:center;
  font-size:13px;color:var(--text-muted);
}

/* corporate */
.who__label{
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  color:var(--text);letter-spacing:-.01em;
}
.who__cell .who__label + p{margin-top:12px}
.formats{
  display:grid;grid-template-columns:1fr;gap:0;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.formats div{
  display:grid;grid-template-columns:220px 1fr;gap:clamp(16px,3vw,44px);
  padding:clamp(20px,2.6vw,30px) clamp(22px,3vw,36px);
  border-bottom:1px solid var(--line);
}
.formats div:last-child{border-bottom:0}
.formats dt{
  font-family:var(--font-label);font-weight:600;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text);
}
.formats dd{margin:0;font-size:14.5px;color:var(--text-muted)}
@media (max-width:640px){
  .formats div{grid-template-columns:1fr;gap:8px}
}

/* vsl / video page */
.page-hero--center{text-align:center;padding-bottom:clamp(40px,7vw,80px)}
.page-hero--center .page-hero__inner{margin-inline:auto}
.page-hero--center .page-hero__lead{margin-inline:auto}
.video-stage{max-width:980px;margin-inline:auto}
.video-frame{
  position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:#000;border:1px solid var(--line-dark);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.7);
}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-cta{
  margin-top:clamp(34px,6vw,58px);
  display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;
}
.video-cta p{color:var(--text-muted);font-size:15.5px;max-width:48ch}
.section--dark .video-cta p{color:var(--text-on-dark)}
.video-cta__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

@media (max-width:820px){
  .contact-grid{grid-template-columns:1fr}
  .workshop{grid-template-columns:1fr;gap:28px}
  .workshop__aside{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:24px}
}

/* 19. SCROLL ANIMATIONS -------------- */
[data-animate]{opacity:0;transition:opacity .9s var(--ease),transform .9s var(--ease);will-change:opacity,transform}
[data-animate="fade-up"]{transform:translateY(34px)}
[data-animate="slide-left"]{transform:translateX(48px)}
[data-animate="slide-right"]{transform:translateX(-48px)}
[data-animate="fade"]{transform:none}
[data-animate="stagger"]{opacity:1;transform:none}
[data-animate].is-visible{opacity:1;transform:none}

[data-animate="stagger"]>*{
  opacity:0;transform:translateY(30px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i,0)*70ms);
  will-change:opacity,transform;
}
[data-animate="stagger"].is-visible>*{opacity:1;transform:none}

/* word mask reveal for headings */
[data-split]{--sd:0}
.word{display:inline-block;overflow:hidden;vertical-align:top}
.word__in{display:inline-block;transform:translateY(110%);transition:transform .8s var(--ease);transition-delay:calc(var(--w,0)*45ms)}
.is-visible .word__in,[data-split].is-visible .word__in{transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  [data-animate],[data-animate="stagger"]>*{opacity:1!important;transform:none!important;transition:none!important}
  .word__in{transform:none!important;transition:none!important}
  .hero__bg img,.hero__bg video,.cta__bg img{height:100%!important}
  .hero__video{display:none}          /* fall back to the poster background image */
  .hero__scroll span{animation:none}
}

/* 20. RESPONSIVE -------------------- */
@media (max-width:1040px){
  .methodology__grid,.brand__grid{grid-template-columns:repeat(2,1fr)}
  .phase:nth-child(2),.pillar:nth-child(2){border-right:0}
  .phase:nth-child(1),.phase:nth-child(2){border-bottom:1px solid var(--line-dark)}
  .pillar:nth-child(1){border-bottom:1px solid var(--line-dark)}
  .stories__grid{grid-template-columns:1fr;max-width:460px}
  .hero__rail{display:none}
}
@media (max-width:900px){
  :root{--header-h:70px}
  .site-header__cta{display:none}
  .nav-toggle{display:flex}
  .site-nav{
    position:fixed;inset:0 0 0 auto;width:min(320px,80vw);
    background:var(--ink);padding:110px 32px 40px;
    transform:translateX(100%);transition:transform .4s var(--ease);
    border-left:1px solid var(--line-dark);
  }
  body.nav-open .site-nav{transform:none}
  body.nav-open{overflow:hidden}
  .site-nav__list{flex-direction:column;gap:6px}
  .site-nav a{font-size:14px;padding:14px 0}
  .site-nav a::after{left:0;right:0}

  .about__grid,.meet__grid,.faq__grid{grid-template-columns:1fr}
  .section-head{grid-template-columns:1fr}
  .meet__portrait{max-width:440px}
  .who__grid{grid-template-columns:1fr 1fr}
  .who__cell:nth-child(3n){border-right:1px solid var(--lavender-2)}
  .who__cell:nth-child(2n){border-right:0}
  .who__cell:nth-child(5),.who__cell:nth-child(6){border-bottom:0}
  .footer__grid{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr;gap:26px 24px}
}
@media (max-width:560px){
  :root{--section-y:64px}
  .methodology__grid,.brand__grid{grid-template-columns:1fr}
  .phase,.pillar{border-right:0!important;border-bottom:1px solid var(--line-dark)!important}
  .phase:last-child,.pillar:last-child{border-bottom:0!important}
  .who__grid{grid-template-columns:1fr}
  .who__cell{border-right:0!important;border-bottom:1px solid var(--lavender-2)!important}
  .who__cell:last-child{border-bottom:0!important}
  .footer__grid{grid-template-columns:1fr}
  .hero__eyebrow{display:none}
  .btn{width:100%;justify-content:center}
  .hero__actions{width:100%}
}