/* ── Swadharma Creations · hero ─────────────────────────────────
   White ground. Heavy black type on one line, running edge to edge.
   The figure stands in front of it. Lavender lifts only what matters:
   "story.", "seen.", the wordmark tail, and the CTA.
   ─────────────────────────────────────────────────────────────── */

:root{
  --white:#ffffff;
  --ink:#0a0a0a;
  --ink-soft:#5a5a5a;
  --hair:#e6e6e6;
  --lavender:#a78bd8;
  --lavender-deep:#8b6cc4;
  --lavender-mist:rgba(167,139,216,.18);
}

*,*::before,*::after{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
/* ── Top bar ─────────────────────────────────────────────────── */
.bar{
  position:fixed;
  inset:0 0 auto 0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:clamp(1.4rem,3.2vw,2.4rem) clamp(1.5rem,4.4vw,3.6rem);
  background:linear-gradient(to bottom,var(--white) 62%,transparent);
  opacity:0;
  transform:translateY(-18px);
  pointer-events:none;
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);
}

body.nav-visible .bar{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.wordmark{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  white-space:nowrap;
}

.wordmark em{color:var(--lavender-deep)}

.nav{
  display:flex;
  align-items:center;
  gap:.35rem;
  font-size:.78rem;
  letter-spacing:.02em;
}

.dot{color:var(--hair)}

.menu{
  display:none;
  width:30px;height:22px;
  padding:0;margin:0;border:0;background:none;cursor:pointer;
  flex-direction:column;justify-content:center;gap:6px;
}
.menu span{display:block;height:2px;width:100%;background:var(--ink)}

/* ── Stage ───────────────────────────────────────────────────── */

.hero{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:7rem clamp(1.5rem,4.4vw,3.6rem) 3rem;
}

.stage{
  position:relative;
  width:min(1280px,100%);
  display:grid;
  place-items:center;
  --away-lift:0px;
  --scene2-exit:0px;    /* the whole stage-2 scene rides on this at stage 3 */
}

/* 2nd scroll: the studio card + service tags clear the viewport entirely */
.stage.stage-2{
  --away-lift:-120vh;
}

/* 3rd scroll: same elements continue on, clearing the top of the viewport,
   and everything that arrived together at stage 2 — headline, captions,
   both figures, the closing banner — now leaves together as one section */
.stage.stage-3{
  --away-lift:-140vh;
  --scene2-exit:-140vh;
}

/* frame = the figure plus the headline layered behind it */
.frame{
  position:relative;
  display:flex;
  justify-content:center;
}

.image-backdrop{
  position:absolute;
  z-index:0;
  left:calc(var(--backdrop-left,0px) - 100vw);
  top:0;
  width:min(760px,68vw);
  height:min(250px,32vh);
  border-radius:2.2rem 5rem 3rem 1.8rem;
  background:rgba(214,198,244,.58);
  box-shadow:0 24px 44px rgba(167,139,216,.16);
  pointer-events:none;
  transform:translateY(var(--away-lift,0));
  transition:left .9s cubic-bezier(.2,.8,.25,1),transform 1s cubic-bezier(.22,.61,.36,1);
}

.backdrop-copy{
  position:absolute;
  left:clamp(1.5rem,5vw,4rem);
  top:calc(50% - 10px);
  z-index:1;
  display:flex;
  width:min(500px,72%);
  flex-direction:column;
  gap:.35rem;
  transform:translateY(-50%);
}

.backdrop-copy__heading{
  position:relative;
  display:block;
  width:max-content;
  max-width:100%;
  line-height:.95;
}

.backdrop-copy__heading span:first-child{
  display:inline-block;
  position:relative;
  background:linear-gradient(to bottom,#d9c9f2 5%,var(--lavender-deep) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-size:clamp(1.55rem,4.3vw,3.9rem);
  font-weight:900;
  letter-spacing:.01em;
  text-shadow:0 2px 4px rgba(74,47,117,.3);
}

.backdrop-copy__heading span:first-child::after{
  content:"✦";
  position:absolute;
  color:#f4edff;
  font-size:.28em;
  line-height:1;
  text-shadow:0 0 7px rgba(255,255,255,.95),0 0 13px rgba(217,201,242,.8);
  animation:brandTwinkle 1.8s ease-in-out infinite;
}

.backdrop-copy__heading span:first-child::after{
  top:-.35em;
  right:-.2em;
}

.backdrop-copy__heading span:last-child{
  position:absolute;
  right:0;
  bottom:-.48em;
  z-index:2;
  color:#4a4a4a;
  font-family:"Tangerine",cursive;
  font-size:clamp(1.7rem,4.6vw,4rem);
  font-weight:700;
  line-height:1;
  letter-spacing:0;
}

.backdrop-copy__heading span:last-child::after,
.backdrop-copy__heading span:last-child::before{content:none}

.backdrop-copy__description{
  max-width:28rem;
  color:#b79bdd;
  font-size:clamp(.85rem,1.4vw,1.1rem);
  font-weight:500;
  line-height:1.1;
  transform:translateY(20px);
}

.backdrop-copy__description strong{
  font-weight:800;
}

.stage.scroll-started .image-backdrop{
  left:var(--backdrop-left,0px);
}

.stage.scroll-started:not(.revealed) .image-backdrop{
  left:calc(var(--backdrop-left,0px) - 100vw);
}

/* ── The line ────────────────────────────────────────────────── */

.headline{
  position:absolute;
  left:50%;
  top:20%;
  transform:translate(-50%,-50%);
  z-index:2;                 /* starts in front — the figure rises over it on scroll */
  margin:0;
  white-space:nowrap;        /* one line, always */
  font-size:clamp(1.75rem,8.2vw,8.6rem);
  font-weight:800;
  line-height:.9;
  letter-spacing:-.045em;
  text-shadow:0 0 7px rgba(255,255,255,.95),
              0 0 20px rgba(255,255,255,.8),
              0 0 42px rgba(255,255,255,.55);
  transition:text-shadow .35s ease-out,transform 1s cubic-bezier(.22,.61,.36,1),left 1s cubic-bezier(.22,.61,.36,1);
  animation:fade 1.2s ease both .45s;
}

/* 2nd/3rd scroll: as everything else rides up and off, the heading shrinks
   to half size in place rather than travelling with it */
.stage.stage-2 .headline,
.stage.stage-3 .headline{
  left:20%;
  transform:translateY(var(--scene2-exit,0)) translate(-50%,-100%) scale(.5);
}

/* the word that carries the tagline, pinned exactly beneath it */

.key{
  color:var(--lavender);
}

/* the single letter the tag hangs from */

.o-anchor{
  position:relative;
}

.note{
  position:absolute;
  left:50%;
  top:100%;
  margin-top:-1.1em;
  transform:translateX(-50%) rotate(-3deg);
  transform-origin:50% 0;
  display:inline-block;
  white-space:nowrap;
  padding:.32em .8em .38em;
  border:1.5px dashed var(--lavender);
  border-radius:.4em 1.1em .4em 1.1em;
  background:var(--white);
  color:var(--ink-soft);
  font-family:"Inter",sans-serif;
  font-style:italic;
  font-weight:500;
  font-size:clamp(.7rem,2vw,.98rem);
  letter-spacing:.005em;
  line-height:1;
  animation:noteIn .8s cubic-bezier(.2,.8,.25,1) both 1.05s;
}

.note::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:100%;
  width:1.5px;
  height:.6em;
  background:var(--lavender);
  transform:translateX(-50%);
}

.note b{
  color:var(--lavender-deep);
  font-weight:800;
  font-style:normal;
}

@keyframes noteIn{
  from{opacity:0;transform:translateX(-50%) rotate(-11deg) translateY(-4px)}
  60%{opacity:1;transform:translateX(-50%) rotate(1deg)}
  to{opacity:1;transform:translateX(-50%) rotate(-3deg) translateY(0)}
}

/* the figure bumps it loose on its way past */

.stage.revealed .note{
  animation:noteSwing .9s ease-in-out both;
  animation-delay:.05s;
}

@keyframes noteSwing{
  0%,100%{transform:translate(-50%,0) rotate(-3deg)}
  25%{transform:translate(-50%,0) rotate(6deg)}
  50%{transform:translate(-50%,0) rotate(-9deg)}
  75%{transform:translate(-50%,0) rotate(2deg)}
}

/* ── The figure — behind the heading at rest, until the visitor scrolls ── */

.figure{
  position:relative;
  z-index:1;
  margin:0;
  opacity:1;
  transform:scale(.92);       /* at rest: behind the heading, slightly pulled back */
  transition:transform .9s cubic-bezier(.2,.8,.25,1),opacity 1.1s ease;
  animation:rise 1.1s cubic-bezier(.2,.8,.25,1) both .15s;
}

/* 2nd scroll: the center figure dissolves out, right as the card + tags clear */
.stage.stage-2 .figure,
.stage.stage-3 .figure{
  opacity:0;
  pointer-events:none;
}

/* a second character that dissolves in at the bottom-left once stage 3 hits */

.figure-2{
  --fig2-h:min(55vh,480px);
  position:fixed;
  left:16vw;
  bottom:3vh;
  z-index:5;
  margin:0;
  opacity:0;
  pointer-events:none;
  transition:opacity 1s ease,transform 1s cubic-bezier(.22,.61,.36,1);
}

.stage.stage-3 .figure-2{
  transform:translateY(var(--scene2-exit,0));
}

.figure-2 img{
  display:block;
  height:var(--fig2-h);
  width:auto;
  max-width:100%;
}

/* 3rd scroll: a grandmother figure dissolves in on the right */

.figure-3{
  --fig3-h:min(90vh,880px);
  position:fixed;
  right:10vw;
  bottom:0;
  z-index:5;
  margin:0;
  opacity:0;
  pointer-events:none;
  transition:opacity 1s ease,transform 1s cubic-bezier(.22,.61,.36,1);
}

.stage.stage-3 .figure-3{
  transform:translateY(var(--scene2-exit,0));
}

.figure-3 img{
  display:block;
  height:var(--fig3-h);
  width:auto;
  max-width:100%;
}

.stage.stage-2 .figure-3{
  opacity:1;
  pointer-events:auto;
}

/* purely a grouping wrapper on desktop — every child is position:fixed,
   so this box never renders or affects .frame's own layout */
.second-scene{
  display:contents;
}

/* ── after stage 2: the closing scene — exactly two elements, full
   screen, kept clear of each other. The figure floats bottom-right at
   3/4 viewport height; the line is h1-sized normal-flow text that
   wraps around its rectangular shape automatically, so no matter how
   many lines it takes, it can never collide with the image. ── */

.final-scene{
  position:fixed;
  inset:0;
  z-index:2;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
  transition:opacity 1s ease;
}

.stage.stage-3 .final-scene{
  opacity:1;
  pointer-events:auto;
}

/* 4th scroll: the closing statement steps aside for the free-floating
   .split-hero__* actors below — each one independently fixed and
   stage-gated, exactly like every other actor in this scene */
.stage.stage-4 .final-scene{
  opacity:0;
  pointer-events:none;
}

.figure-4{
  position:absolute;
  right:clamp(1rem,4vw,3rem);
  bottom:0;
  z-index:1;
  height:70vh;
}

.figure-4 img{
  display:block;
  height:100%;
  width:auto;
  max-width:100%;
}

.final-line{
  position:relative;
  z-index:2;               /* on top, so it stays readable where it crosses the image */
  width:100%;
  margin:6rem 0 0 clamp(1.5rem,4vw,4rem);
  color:var(--ink);
  font-family:"Inter",sans-serif;
  font-weight:800;
  font-size:clamp(1.75rem,7vw,7.4rem);
  line-height:.98;
  letter-spacing:-.02em;
}

.final-line__accent{
  color:var(--lavender);
}

/* a hand-marked lavender highlighter swipe behind solid black type —
   same accent language as the dashed note badges elsewhere on the
   site, without any font-outline rendering to go wrong */
.final-line__outline{
  position:relative;
  display:inline-block;
  color:var(--ink);
  z-index:1;
}

.final-line__outline::before{
  content:"";
  position:absolute;
  left:-.06em;
  right:-.06em;
  bottom:.02em;
  top:.32em;
  z-index:-1;
  background:var(--lavender);
  border-radius:.12em .5em .12em .5em;
  transform:rotate(-1.2deg);
}

/* a caption that slides in from off-screen left, tucked behind the
   second figure so it reads as emerging from behind it, resting where
   it overlaps the top of the image */

/* both caption lines share the "Yours deserves to be seen." dashed-note look */
.intro-line,
.intro-line-2{
  position:fixed;
  left:38vw;
  z-index:4;                 /* behind the figures, like .note behind nothing but here it's the figures */
  margin:0;
  display:inline-block;
  white-space:nowrap;
  padding:.32em .8em .38em;
  border:1.5px dashed var(--lavender);
  border-radius:.4em 1.1em .4em 1.1em;
  background:var(--white);
  color:var(--ink-soft);
  font-family:"Inter",sans-serif;
  font-style:italic;
  font-weight:500;
  font-size:clamp(.95rem,2vw,1.3rem);
  letter-spacing:.005em;
  line-height:1;
  opacity:0;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1),opacity .8s ease;
}

.intro-line strong,
.intro-line-2 strong{
  font-weight:800;
  font-style:normal;
  color:var(--lavender-deep);
}

.intro-line{
  bottom:calc(3vh + min(55vh,480px) - 1.4em);
  transform:translateX(-140vw);
}

.stage.stage-2 .intro-line,
.stage.stage-3 .intro-line{
  transform:translateY(var(--scene2-exit,0)) translateX(0);
  opacity:1;
}

/* second line: comes from the extreme right, settles just under the first */
.intro-line-2{
  bottom:calc(3vh + min(55vh,480px) - 1.4em - 3.2em);
  transform:translateX(140vw) rotate(-3deg);
}

.stage.stage-2 .intro-line-2{
  transform:translateY(var(--scene2-exit,0)) translateX(0);
  opacity:1;
}

.stage.stage-2 .figure-2,
.stage.stage-3 .figure-2{
  opacity:1;
  pointer-events:auto;
}

/* the entrance animation's fill:both would otherwise pin transform
   permanently and block the scroll-triggered scale below */
.figure.settled{animation:none}

.figure img{
  display:block;
  height:min(72vh,660px);
  width:auto;
  max-width:100%;
  filter:blur(4px);
  transition:filter .35s ease-in;
}

.ground{
  position:absolute;
  left:50%; bottom:1.5%;
  transform:translateX(-50%);
  width:44%; height:16px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,var(--lavender-mist),transparent 72%);
  filter:blur(2px);
}

/* scroll down: the figure zooms in and steps in front of the heading
   scroll up: it sinks back, slightly smaller than rest, behind it again */

.stage.revealed .figure{
  z-index:3;
  transform:scale(1.14);
}

.stage.revealed .figure img{
  filter:blur(0);
}

.stage.revealed .headline{
  text-shadow:none;
}

.creative-tags{
  position:absolute;
  left:0;
  top:0;
  width:clamp(300px,28vw,390px);
  height:180px;
  --tags-x:1rem;
  --tags-y:1.5rem;
  transform:translate(var(--tags-x),var(--tags-y)) translateY(var(--away-lift,0));
  opacity:0;
  pointer-events:none;
  transition:transform .8s cubic-bezier(.2,.8,.25,1),opacity .35s ease;
}

.stage.tags-visible .creative-tags{
  --tags-x:0px;
  --tags-y:0px;
  opacity:1;
  pointer-events:auto;
}

.creative-tag{
  position:absolute;
  border:1.5px solid var(--ink);
  border-radius:999px;
  padding:.65em 1.1em .7em;
  color:var(--ink);
  background:var(--white);
  font:600 clamp(.8rem,1.5vw,1.05rem)/1 "Inter",sans-serif;
  cursor:pointer;
  transform:translateY(-310px) rotate(var(--tag-start-rotate,0deg));
  animation:none;
  transition:transform .25s ease,background-color .25s ease,color .25s ease,box-shadow .25s ease;
}

.creative-tag--video{top:0;left:88px;--tag-rotate:-5deg;--tag-start-rotate:-18deg;--tag-delay:.72s;--tag-lift-delay:.06s}
.creative-tag--design{top:0;left:210px;--tag-rotate:3deg;--tag-start-rotate:14deg;--tag-delay:.78s;--tag-lift-delay:0s}
.creative-tag--photo{top:-36px;left:24px;writing-mode:vertical-rl;transform-origin:center;--tag-rotate:180deg;--tag-start-rotate:162deg;--tag-delay:.6s;--tag-lift-delay:.12s}
.creative-tag--story{top:42px;left:210px;--tag-rotate:4deg;--tag-start-rotate:18deg;--tag-delay:.42s;--tag-lift-delay:.24s;background:var(--lavender-mist)}
.creative-tag--brand{top:86px;left:24px;--tag-rotate:-3deg;--tag-start-rotate:-14deg;--tag-delay:.18s;--tag-lift-delay:.36s;background:var(--ink);color:var(--white)}
.creative-tag--web{top:42px;left:82px;--tag-rotate:2deg;--tag-start-rotate:15deg;--tag-delay:.48s;--tag-lift-delay:.18s;background:var(--white)}
.creative-tag--content{top:86px;left:178px;--tag-rotate:-4deg;--tag-start-rotate:-16deg;--tag-delay:.3s;--tag-lift-delay:.3s;background:var(--lavender)}

.stage.revealed .creative-tag{
  animation:tagDrop .8s cubic-bezier(.2,.8,.25,1) both;
  animation-delay:var(--tag-delay,0s);
}

.stage.tags-visible:not(.revealed) .creative-tag{
  animation:none;
  transform:rotate(var(--tag-rotate,0deg)) scale(1);
}

.creative-tag:hover,
.creative-tag:focus-visible,
.creative-tag[aria-pressed="true"]{
  color:var(--white);
  background:var(--ink);
  box-shadow:0 8px 18px rgba(10,10,10,.18);
  outline:none;
}

.creative-tag:hover{transform:translateY(-.3rem) rotate(0)}
.creative-tag:focus-visible{outline:2px solid var(--lavender-deep);outline-offset:4px}
.creative-tag[aria-pressed="true"]{transform:translateY(-.2rem) rotate(0)}

/* a puff of smoke on every crossing, scattering forward or gathering back */

.smoke{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
}

.smoke i{
  position:absolute;
  width:8rem;
  height:8rem;
  margin:-4rem 0 0 -4rem;
  border-radius:50%;
  background:radial-gradient(circle,rgba(167,139,216,.5),rgba(167,139,216,0) 70%);
  filter:blur(6px);
  opacity:0;
  font-style:normal;
}

.stage.revealed .smoke i{
  animation:puffOut 1s ease-out both;
  animation-delay:var(--delay,0s);
}

.stage.receding .smoke i{
  animation:puffIn .8s ease-in both;
  animation-delay:var(--delay,0s);
}

@keyframes puffOut{
  0%{opacity:0;transform:translate(0,0) scale(.35)}
  25%{opacity:.6}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.7)}
}

@keyframes puffIn{
  0%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.4)}
  40%{opacity:.5}
  100%{opacity:0;transform:translate(0,0) scale(.3)}
}

/* ── Motion ──────────────────────────────────────────────────── */

@keyframes rise{
  from{opacity:0;transform:translateY(26px) scale(.92)}
  to{opacity:1;transform:scale(.92)}
}
@keyframes fade{
  from{opacity:0}
  to{opacity:1}
}
@keyframes brandTwinkle{
  0%,100%{opacity:.2;transform:scale(.65) rotate(0deg)}
  45%{opacity:1;transform:scale(1.35) rotate(18deg)}
  65%{opacity:.35;transform:scale(.8) rotate(28deg)}
}
@keyframes tagDrop{
  from{opacity:0;transform:translateY(-310px) rotate(var(--tag-start-rotate,0deg)) scale(.82)}
  70%{opacity:1}
  to{opacity:1;transform:rotate(var(--tag-rotate,0deg)) scale(1)}
}
@keyframes tagLift{
  from{opacity:1;transform:rotate(var(--tag-rotate,0deg)) scale(1)}
  to{opacity:0;transform:rotate(var(--tag-rotate,0deg)) scale(.18)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ── Narrower desktops ───────────────────────────────────────── */

@media (max-width:1080px){
  .headline{top:18%}
}

/* ── Mobile — one clean vertical stack, no layered choreography ──
   The desktop hero stacks absolutely-positioned layers on top of each
   other and reveals them on scroll. On a phone that just collides, so
   here everything drops into normal flow in a single column:
   logo bar · headline · figure · studio card · service tags.
   Every scroll-stage class from script.js is neutralised.
   ─────────────────────────────────────────────────────────────── */

@media (max-width:820px){
  /* static site on mobile — kill every animation and transition */
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
  }

  .nav{display:none}
  .menu{display:flex}

  /* logo bar always visible on mobile, never fixed/animated */
  .bar,
  body.nav-visible .bar{
    position:static;
    opacity:1;
    transform:none;
    pointer-events:auto;
    background:none;
    padding:1.5rem 1.25rem .5rem;
  }
  .wordmark{font-size:.66rem;letter-spacing:.2em}

  .hero{
    min-height:0;
    display:block;
    padding:0 1.25rem 3.5rem;
  }

  /* stage + frame become plain vertical containers */
  .stage,
  .frame{
    position:static;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    gap:0;
    transform:none!important;
  }

  /* ── 1 · headline ─────────────────────────────────────────── */
  .headline,
  .stage .headline,
  .stage.stage-3 .headline{
    order:1;
    position:relative;
    left:auto;
    top:auto;
    transform:none!important;
    white-space:normal;
    text-align:center;
    font-size:clamp(1.95rem,9vw,3rem);
    line-height:1.12;
    letter-spacing:-.03em;
    text-shadow:none;
    margin:.25rem 0 3.25rem;   /* bottom room for the note beneath */
  }

  /* keep "story." whole — never break mid-word */
  .key{white-space:nowrap}

  /* the dashed "seen." note drops just below the whole headline, centred */
  .note{
    position:absolute;
    left:50%;
    top:calc(100% + .7rem);
    margin:0;
    transform:translateX(-50%) rotate(-2deg);
    white-space:nowrap;
    font-size:.7rem;
    padding:.3em .7em .34em;
    animation:none;
  }
  .note::before{content:none}
  .o-anchor{position:static}

  /* ── 2 · figure ──────────────────────────────────────────── */
  .figure,
  .stage.revealed .figure,
  .stage.stage-2 .figure,
  .stage.stage-3 .figure{
    order:2;
    position:static;
    transform:none!important;
    opacity:1!important;
    z-index:auto;
    pointer-events:auto;
    margin:0 0 1.5rem;
  }
  .figure img{
    height:auto;
    width:min(78vw,340px);
    filter:none!important;
  }
  .ground{display:none}
  .smoke{display:none}

  /* ── 3 · studio card ─────────────────────────────────────── */
  .image-backdrop{
    order:3;
    position:static;
    left:auto!important;
    top:auto!important;
    width:100%;
    max-width:420px;
    height:auto;
    min-height:0;
    margin-top:1.5rem;
    padding:1.75rem 1.5rem 2rem;
    border-radius:1.4rem 2.6rem 1.6rem 2rem;
    background:rgba(214,198,244,.75);
    transform:none!important;
    transition:none;
  }

  .backdrop-copy{
    position:static;
    left:auto;
    top:auto;
    width:100%;
    transform:none;
    gap:.75rem;
  }

  .backdrop-copy__heading{
    width:100%;
    text-align:center;
    padding-bottom:1.4rem;   /* room for the script tail below */
  }
  .backdrop-copy__heading span:first-child{
    background:none;
    -webkit-background-clip:initial;
    background-clip:initial;
    color:var(--lavender);
    font-size:clamp(1.5rem,8vw,2.2rem);
    letter-spacing:.02em;
  }
  .backdrop-copy__heading span:last-child{
    right:50%;
    bottom:-.15em;
    transform:translateX(50%);
    color:#000000;
    font-size:clamp(1.9rem,9vw,2.6rem);
  }
  .backdrop-copy__description{
    max-width:none;
    text-align:center;
    color:#ffffff;
    font-size:.9rem;
    line-height:1.35;
    transform:none;
  }

  /* ── 4 · service tags — a centred wrap row, no absolute scatter ── */
  .creative-tags,
  .stage.tags-visible .creative-tags,
  .stage.revealed .creative-tags{
    order:4;
    position:static;
    left:auto!important;
    top:auto!important;
    width:100%;
    height:auto;
    margin-top:2rem;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.6rem;
    opacity:1!important;
    pointer-events:auto!important;
    transform:none!important;
  }
  .creative-tag,
  .stage.revealed .creative-tag,
  .stage.tags-visible:not(.revealed) .creative-tag{
    position:static;
    top:auto;left:auto;
    writing-mode:horizontal-tb;
    transform:none!important;
    animation:none!important;
    font-size:.82rem;
    padding:.55em .95em .6em;
  }

  /* ── 5 · second scene — the two caption badges as full-width centred
     rows, the two later figures side by side beneath them. A plain
     grid, always visible, no scroll staging. ── */
  .second-scene{
    display:grid;
    grid-template-columns:repeat(2,auto);
    order:5;
    position:relative;
    width:100%;
    justify-content:center;
    align-items:end;
    gap:.85rem 1rem;
    margin-top:3rem;
    padding-top:0;
  }

  .figure-2,
  .figure-3,
  .stage.stage-2 .figure-2,
  .stage.stage-3 .figure-2,
  .stage.stage-3 .figure-3{
    position:relative;
    inset:auto;
    left:auto;right:auto;top:auto;bottom:auto;
    z-index:1;
    transform:none!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  .figure-2{grid-column:1}
  .figure-3{grid-column:2}

  .figure-2 img,
  .figure-3 img{
    height:auto;
    width:38vw;
    max-width:190px;
  }

  /* both caption badges: full-width rows, centred, normal flow */
  .intro-line,
  .intro-line-2,
  .stage.stage-2 .intro-line,
  .stage.stage-3 .intro-line,
  .stage.stage-3 .intro-line-2{
    position:static;
    grid-column:1 / -1;
    justify-self:center;
    margin:0;
    transform:none!important;
    white-space:normal;
    max-width:88vw;
    text-align:center;
    font-size:.85rem;
    opacity:1!important;
  }

  /* ── 6 · closing line — a desktop position:fixed scene; on mobile a
     plain centred block: the line, then the sitting character ── */
  .final-scene,
  .stage.stage-3 .final-scene,
  .stage.stage-4 .final-scene{
    display:flex;
    flex-direction:column;
    align-items:center;
    order:6;
    position:static;
    inset:auto;
    width:100%;
    margin-top:3rem;
    opacity:1!important;
    pointer-events:auto;
    overflow:visible;
  }
  .final-line{
    position:static;
    order:1;
    width:100%;
    margin:0;
    text-align:center;
    font-size:clamp(1.6rem,6.4vw,2.4rem);
    line-height:1.16;
  }
  .final-line br{display:none}
  .figure-4{
    position:static;
    order:2;
    height:auto;
    margin:1.5rem 0 0;
  }
  .figure-4 img{
    height:auto;
    width:min(58vw,240px);
  }
}

/* ── Split hero actors: each one an independent position:fixed
   element directly on the viewport — the same technique as .figure-2,
   .figure-3, .final-line and every other actor in this scene, so each
   can get its own stage-gated animation later without being tangled
   in a shared grid/flex parent. Nothing here changes any other
   section; .split-hero and its two column wrappers are display:contents
   (same trick as .second-scene) so they carry zero layout of their own —
   every child's position below is what actually places it, calculated
   to land pixel-for-pixel where the original grid/flex layout put it. ── */

.split-hero,
.split-hero__visual{
  display:contents;
}

:root{
  --split-muted:rgba(15,14,14,0.60);
  --split-disc:#EFE9FB;
  --split-line:rgba(167,139,232,0.30);
  --split-radius:4px;
}

/* the visual-side actors are each fully independent, exactly like
   .figure-2/.figure-3 elsewhere. The copy-side text can't be: a
   headline that wraps one extra line at some viewport width would
   silently overlap a sibling positioned at its own hardcoded vh — so
   .split-hero__copy stays a real (fixed, vertically-centred) flex
   column, and headline/sub/actions flow inside it with fixed px
   gaps. Each still gets its own opacity rule below, so each is still
   free to receive its own stage-gated animation later. */
.split-hero__copy{
  position:fixed;
  z-index:2;
  top:50vh;
  left:51.22vw;
  width:35.06vw;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  opacity:0;
  pointer-events:none;
  transition:opacity .8s ease;
}

.stage.stage-4 .split-hero__copy{
  opacity:1;
  pointer-events:auto;
}

.split-hero__disc,
.split-hero__figure,
.split-hero__motif--circuit,
.split-hero__motif--dots,
.split-hero__eyebrow,
.split-hero__ghost{
  position:fixed;
  opacity:0;
  pointer-events:none;
  transition:opacity .8s ease;
}

.stage.stage-4 .split-hero__disc,
.stage.stage-4 .split-hero__figure,
.stage.stage-4 .split-hero__motif--circuit,
.stage.stage-4 .split-hero__motif--dots,
.stage.stage-4 .split-hero__eyebrow,
.stage.stage-4 .split-hero__ghost{
  opacity:1;
  pointer-events:auto;
}

/* 5th scroll: split-hero steps aside for the bento section's own
   free-floating actors, one row per stage from here on */
.stage.stage-5 .split-hero__copy,
.stage.stage-5 .split-hero__disc,
.stage.stage-5 .split-hero__figure,
.stage.stage-5 .split-hero__motif--circuit,
.stage.stage-5 .split-hero__motif--dots,
.stage.stage-5 .split-hero__eyebrow,
.stage.stage-5 .split-hero__ghost{
  opacity:0;
  pointer-events:none;
}

.split-hero__disc{
  z-index:0;
  top:50vh;
  left:22.5vw;
  width:24.69vw;
  height:42.32vh;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--split-disc);
}

.split-hero__figure{
  z-index:1;
  left:11.22vw;
  bottom:8.43vh;
  height:74vh;
  margin:0;
}
.split-hero__figure img{
  display:block;
  height:100%;
  width:auto;
  object-fit:contain;
}

.split-hero__motif--circuit,
.split-hero__motif--dots{z-index:0}
.split-hero__motif--circuit{top:13.04vh;left:3.07vw;width:70px;height:70px}
.split-hero__motif--dots{bottom:18.32vh;left:2.05vw;width:60px;height:76px}
.split-hero__motif--circuit path,
.split-hero__motif--dots circle{stroke:var(--split-line);stroke-width:1;fill:none}
.split-hero__motif--dots circle{fill:var(--split-line);stroke:none}

.split-hero__eyebrow{
  z-index:2;
  top:50vh;
  left:41.4vw;
  transform:translate(-50%,-50%) rotate(-90deg);
  white-space:nowrap;
  font:600 .72rem/1 "Outfit",sans-serif;
  text-transform:uppercase;
  letter-spacing:.24em;
  color:var(--split-muted);
}
.split-hero__eyebrow i{color:var(--lavender);font-style:normal}

.split-hero__ghost{
  z-index:2;
  top:8%;
  right:40vw;
  text-align:right;
  display:flex;
  flex-direction:column;
  font:500 .66rem/2 "Outfit",sans-serif;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--split-muted);
}
.stage.stage-4 .split-hero__ghost{opacity:.45}
.split-hero__ghost i{color:var(--lavender);font-style:normal}
.split-hero__ghost-sep{display:none}

.split-hero__headline{
  margin:0;
  font-family:"Fraunces",serif;
  font-weight:400;
  font-size:clamp(2.4rem,4.2vw,4rem);
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--ink);
}
.split-hero__accent{color:var(--lavender)}

.split-hero__sub{
  margin:28px 0 0;
  max-width:44ch;
  font-family:"Outfit",sans-serif;
  font-weight:300;
  font-size:.95rem;
  line-height:1.65;
  color:var(--split-muted);
}

.split-hero__actions{
  margin:40px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.split-hero__btn{
  display:inline-flex;
  align-items:center;
  padding:15px 30px;
  border-radius:var(--split-radius);
  font:600 .74rem/1 "Outfit",sans-serif;
  text-transform:uppercase;
  letter-spacing:.14em;
  text-decoration:none;
  color:var(--ink);
  transition:background-color .22s ease,border-color .22s ease,color .22s ease;
}
.split-hero__arrow{margin-left:10px;display:inline-block;transition:transform .22s ease}
.split-hero__btn:hover .split-hero__arrow{transform:translateX(4px)}

.split-hero__btn--primary{background:var(--ink);color:#FFF;border:1px solid var(--ink)}
.split-hero__btn--primary:hover{background:var(--lavender);border-color:var(--lavender)}

.split-hero__btn--outline{background:transparent;border:1px solid rgba(15,14,14,0.18)}
.split-hero__btn--outline:hover{border-color:var(--lavender)}

@media (prefers-reduced-motion:reduce){
  .split-hero__disc,
  .split-hero__figure,
  .split-hero__motif--circuit,
  .split-hero__motif--dots,
  .split-hero__eyebrow,
  .split-hero__ghost,
  .split-hero__headline,
  .split-hero__sub,
  .split-hero__actions{transition:none}
}

/* ── Mobile: the fixed-position stage actors are a desktop-only
   device (see the .frame mobile rules above) — here every split-hero
   actor drops into the normal static stack instead, always visible,
   matching how .figure-2/.figure-3/.intro-line already behave on
   mobile regardless of .stage class. ── */
@media (max-width:820px){
  .split-hero,
  .split-hero__visual,
  .split-hero__copy{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    order:7;
    margin-top:0;
    padding-top:0;
  }
  .split-hero{margin-top:3rem}

  .split-hero__copy{
    position:relative;
    inset:auto;
    left:auto;top:auto;
    width:100%;
    max-width:88vw;
    margin-top:1.75rem;
    transform:none;
    opacity:1!important;
    pointer-events:auto!important;
  }

  .split-hero__disc,
  .split-hero__figure,
  .split-hero__eyebrow,
  .split-hero__headline,
  .split-hero__sub,
  .split-hero__actions{
    position:relative;
    inset:auto;
    left:auto;right:auto;top:auto;bottom:auto;
    width:auto;
    max-width:88vw;
    transform:none;
    opacity:1!important;
    pointer-events:auto!important;
  }

  .split-hero__motif--circuit,
  .split-hero__motif--dots,
  .split-hero__ghost{display:none}

  .split-hero__figure{height:38vh;order:1}
  .split-hero__disc{display:none}
  .split-hero__eyebrow{order:2;margin:1rem 0 0;text-align:center}
  .split-hero__headline{order:3;margin-top:2rem;text-align:center;font-size:clamp(1.95rem,7vw,2.6rem)}
  .split-hero__sub{order:4;margin-top:1rem;text-align:center}
  .split-hero__actions{order:5;margin-top:1.5rem;justify-content:center;flex-direction:column;width:100%;gap:10px}
  .split-hero__btn{width:100%;justify-content:center}
}

/* ── Bento: five rows, five stages (5-9), one row fully replacing the
   last on every gesture step — same free-actor pattern as split-hero.
   Own design tokens (prefixed bento-) so nothing here can collide with
   the rest of the site; reuses the site's --lavender directly. ── */

:root{
  --bento-ink:#0F0E0E;
  --bento-card:#EAE1F9;
  --bento-card-white:#F4F2F7;
  --bento-text:#14131A;
  --bento-text-inv:#F6F3FC;
  --bento-muted:rgba(20,19,26,0.62);
  --bento-muted-inv:rgba(246,243,252,0.55);
  --bento-radius:20px;
}

.bento{display:contents}

.bento__card{
  position:fixed;
  z-index:3;
  opacity:0;
  pointer-events:none;
  transition:opacity .7s cubic-bezier(.16,1,.3,1);
  box-sizing:border-box;
  border-radius:var(--bento-radius);
  padding:40px;
  background:var(--bento-card);
  color:var(--bento-text);
  font-family:"Outfit",sans-serif;
}
.bento__card--white{background:var(--bento-card-white)}
.bento__card--dark{
  background:var(--bento-ink);
  color:var(--bento-text-inv);
  border:1px solid rgba(246,243,252,0.10);
}
.bento__card--image{padding:0;overflow:hidden}
.bento__card--image img{display:block;width:100%;height:100%;object-fit:cover}

.bento__label{
  display:block;
  margin-bottom:24px;
  text-align:center;
  font-size:.68rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--bento-muted);
}
.bento__card--dark .bento__label{color:var(--bento-muted-inv)}

.bento__row1-text,
.bento__row4-text{display:flex;flex-direction:column;justify-content:space-between;text-align:center}

.bento__headline{
  margin:0 0 20px;
  text-align:center;
  text-transform:uppercase;
  font-weight:800;
  font-size:clamp(2.2rem,4vw,3.6rem);
  line-height:.98;
  letter-spacing:-.02em;
}
.bento__headline--sm{font-size:clamp(1.8rem,3.2vw,3rem)}
.bento__body{
  margin:0 auto;
  max-width:46ch;
  text-align:center;
  font-size:.95rem;
  font-weight:300;
  line-height:1.6;
  color:var(--bento-muted);
}

.bento__pill{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  padding:14px 26px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-decoration:none;
  transition:transform .2s ease;
}
.bento__pill--primary{background:var(--bento-ink);color:var(--bento-text-inv);border:1px solid var(--bento-ink)}
.bento__pill--outline{background:transparent;color:var(--bento-text);border:1px solid var(--bento-ink)}
.bento__pill:hover{transform:translateY(-2px)}

.bento__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding-top:32px}

.bento__tags{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:24px 0 0;padding:0}
.bento__tag{
  background:var(--bento-ink);
  color:var(--bento-text-inv);
  padding:8px 16px;
  border-radius:999px;
  font-size:.72rem;
  transition:transform .2s ease;
}
.bento__tag:hover{transform:translateY(-2px)}

.bento__stat-word{
  margin:0 0 12px;
  text-align:center;
  text-transform:uppercase;
  font-weight:800;
  font-size:clamp(1.8rem,2.8vw,2.6rem);
}
.bento__stat-word--now{text-transform:none;color:var(--lavender)}
.bento__stat-copy{margin:0;text-align:center;font-size:.85rem;font-weight:300;color:var(--bento-muted)}
.bento__card--dark .bento__stat-copy{color:var(--bento-muted-inv)}
.bento__stat-copy + .bento__stat-copy{margin-top:8px}
.bento__stat-copy--status{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.bento__stat-copy--status::before{
  content:"";
  flex-shrink:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--lavender);
}

.bento__marquee{
  position:fixed;
  z-index:3;
  opacity:0;
  pointer-events:none;
  transition:opacity .7s cubic-bezier(.16,1,.3,1);
  background:var(--bento-ink);
  border-radius:var(--bento-radius);
  padding:20px 0;
  overflow:hidden;
}
.bento__marquee-track{
  display:flex;
  width:max-content;
  animation:bentoMarquee 32s linear infinite;
}
.bento__marquee:hover .bento__marquee-track{animation-play-state:paused}
.bento__marquee-set{
  display:flex;
  flex-shrink:0;
  white-space:nowrap;
  font-family:"Outfit",sans-serif;
  font-size:.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--bento-text-inv);
  padding-right:2ch;
}
.bento__marquee-set em{color:var(--lavender);font-style:normal;padding:0 1ch}

@keyframes bentoMarquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .bento__marquee-track{animation:none}
}

.bento__belief{text-align:center}
.bento__belief-line{
  margin:0;
  font-family:"Outfit",sans-serif;
  text-transform:uppercase;
  font-weight:600;
  font-size:clamp(.95rem,1.5vw,1.25rem);
  letter-spacing:.06em;
}
.bento__belief-line em{color:var(--lavender);font-style:normal}
.bento__accent{color:var(--lavender)}

/* ── positions: stage 5 packs rows 1-3 into one screen; stage 6
   packs rows 4-5 into the next. Each band shrunk to fit alongside
   its neighbours rather than filling the full viewport alone. ── */
.bento__row1-text{left:6vw;top:1vh;width:49vw;height:58vh;padding:32px;overflow:hidden}
.bento__row1-image{left:59vw;top:1vh;width:35vw;height:58vh;transition-delay:.12s}

.bento__stat-1{left:6vw;top:76vh;width:28vw;padding:28px;transform:translateY(-50%)}
.bento__stat-2{left:36vw;top:76vh;width:28vw;padding:28px;transform:translateY(-50%);transition-delay:.1s}
.bento__stat-3{left:66vw;top:76vh;width:28vw;padding:28px;transform:translateY(-50%);transition-delay:.2s}

.bento__marquee{left:6vw;top:95vh;width:88vw;transform:translateY(-50%);transition-delay:.28s}

.bento__row4-image{left:6vw;top:4vh;width:35vw;height:70vh}
.bento__row4-text{left:45vw;top:4vh;width:49vw;height:70vh;transition-delay:.12s}

.bento__belief{left:6vw;top:86vh;width:88vw;transform:translateY(-50%);transition-delay:.24s}

/* ── stage gating: rows 1-3 together on stage 5, rows 4-5 together
   on stage 6 — same "steps aside the moment the next stage arrives"
   pattern as .final-scene at stage-4 ── */
.stage.stage-5 .bento__row1-text,
.stage.stage-5 .bento__row1-image,
.stage.stage-5 .bento__stat-1,
.stage.stage-5 .bento__stat-2,
.stage.stage-5 .bento__stat-3,
.stage.stage-5 .bento__marquee{opacity:1;pointer-events:auto}

.stage.stage-6 .bento__row1-text,
.stage.stage-6 .bento__row1-image,
.stage.stage-6 .bento__stat-1,
.stage.stage-6 .bento__stat-2,
.stage.stage-6 .bento__stat-3,
.stage.stage-6 .bento__marquee{opacity:0;pointer-events:none}

.stage.stage-6 .bento__row4-image,
.stage.stage-6 .bento__row4-text,
.stage.stage-6 .bento__belief{opacity:1;pointer-events:auto}

/* ── Mobile: same treatment as every other actor on the mobile
   stylesheet — normal static stack, always visible, ignoring .stage ── */
@media (max-width:820px){
  .bento{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    order:8;
    gap:24px;
    padding:40px 5vw;
  }

  .bento__card,
  .bento__marquee{
    position:relative;
    inset:auto;
    left:auto;right:auto;top:auto;bottom:auto;
    width:100%;
    height:auto;
    max-width:520px;
    transform:none;
    opacity:1!important;
    pointer-events:auto!important;
    transition-delay:0s;
  }

  /* images at their natural ratio — a fixed crop lops off heads */
  .bento__card--image{aspect-ratio:auto}
  .bento__card--image img{height:auto}

  /* marquee can't scroll on a static page — wrap the keywords instead */
  .bento__marquee{padding:20px 6vw}
  .bento__marquee-track{display:block;width:auto}
  .bento__marquee-set{
    display:block;
    flex-shrink:1;
    white-space:normal;
    text-align:center;
    line-height:2;
    padding-right:0;
  }
  .bento__marquee-set + .bento__marquee-set{display:none}
  .bento__marquee-set em:last-child{display:none}
}