/* =========================================================
   THE HUMAN HIGHLIGHT REEL
   Playful editorial landing — cream canvas, hand-drawn doodles
   Fonts: Bricolage Grotesque (display) + Hanken Grotesk (body)
   ========================================================= */

:root{
  /* canvas + ink */
  --cream:   #FBF6EC;
  --cream-2: #F4ECDC;
  --ink:     #1B1712;
  --ink-soft:#4A4238;

  /* single functional accent */
  --coral:   #FF3D6E;
  --coral-d: #E11F53;

  /* decorative doodle pastels (illustration only) */
  --butter:  #FFD645;
  --mint:    #7FE0C4;
  --lav:     #C6B4FF;
  --peach:   #FFAF97;

  /* dark showcase */
  --night:   #17130E;
  --night-2: #211B14;

  --radius:  22px;
  --radius-pill: 999px;
  --shadow:  0 24px 60px -24px rgba(27,23,18,.35);
  --shadow-sm: 0 10px 26px -14px rgba(27,23,18,.4);
  --ease:    cubic-bezier(.16,1,.3,1);

  --maxw: 1240px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Hanken Grotesk", system-ui, sans-serif;
  font-size:clamp(1rem,.55vw + .85rem,1.15rem);
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:"Bricolage Grotesque", system-ui, sans-serif; font-weight:800; letter-spacing:-.02em; line-height:.98; margin:0; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; height:auto; }
b{ font-weight:700; }
::selection{ background:var(--coral); color:#fff; }

/* ---------- Lenis smooth-scroll (official) — must override scroll-behavior ---------- */
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior:contain; }
.lenis.lenis-stopped { overflow:hidden; }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--coral); --fg:#fff;
  display:inline-flex; align-items:center; gap:.55em;
  background:var(--bg); color:var(--fg);
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700;
  padding:.85em 1.35em; border-radius:var(--radius-pill);
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
}
.btn svg{ width:1.15em; height:1.15em; }
.btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.btn--lg{ font-size:1.05rem; padding:.95em 1.6em; }
.btn--sm{ padding:.6em 1.05em; font-size:.9rem; box-shadow:3px 3px 0 var(--ink); }
.btn--light{ --bg:var(--butter); --fg:var(--ink); }

.link-arrow{
  font-weight:700; position:relative; padding-bottom:2px;
  background:linear-gradient(var(--coral),var(--coral)) left bottom / 0% 3px no-repeat;
  transition:background-size .3s var(--ease);
}
.link-arrow::after{ content:" →"; }
.link-arrow:hover{ background-size:100% 3px; }

.eyebrow{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700;
  color:var(--coral); text-transform:uppercase; letter-spacing:.14em; font-size:.82rem;
  display:inline-flex; align-items:center; gap:.4em;
}
.clap{ filter:none; }

/* underline + highlight helpers */
.ink-underline{ font-style:normal; position:relative; white-space:nowrap; }
.ink-underline::after{
  content:""; position:absolute; left:-2%; right:-2%; bottom:.02em; height:.34em; z-index:-1;
  background:var(--butter); border-radius:4px; transform:rotate(-1.2deg);
}
.hl{ position:relative; white-space:nowrap; }
.hl::after{ content:""; position:absolute; left:-3%; right:-3%; bottom:.04em; height:.42em; z-index:-1; border-radius:6px; transform:rotate(-1.5deg); }
.hl--butter::after{ background:var(--butter); }
.hl--coral{ color:var(--coral); }
.hl--coral::after{ background:rgba(255,61,110,.18); }
.quoted{ font-style:italic; }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  z-index:60; width:min(var(--maxw), calc(100% - 28px));
  display:flex; align-items:center; gap:18px;
  padding:9px 9px 9px 20px;
  background:rgba(251,246,236,.9); backdrop-filter:blur(8px);
  border:2px solid var(--ink); border-radius:var(--radius-pill);
  box-shadow:var(--shadow-sm);
}
.nav__brand{ display:flex; align-items:center; gap:.5em; font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:.98rem; letter-spacing:-.01em; white-space:nowrap; }
.nav__spark{ width:20px; height:20px; fill:var(--coral); flex:none; }
.nav__links{ position:relative; display:flex; gap:2px; margin-left:auto; }
.nav__links a{ position:relative; z-index:1; padding:.5em .95em; border-radius:var(--radius-pill); font-weight:600; font-size:.95rem; transition:color .25s; }
.nav__links a:hover{ color:var(--coral); }
.nav__links a.is-active{ color:var(--ink); }
.nav__pill{
  position:absolute; top:0; left:0; height:100%; border-radius:var(--radius-pill);
  background:var(--butter); z-index:0; opacity:0;
  transition:transform .4s var(--ease), width .4s var(--ease), opacity .3s;
}
.nav__cta{ flex:none; }

/* mobile-only nav bits — hidden on desktop */
.nav__burger, .nav__menu-cta, .nav__menu-daisy{ display:none; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; max-width:var(--maxw); margin:0 auto;
  padding:150px 24px 40px;
  min-height:100dvh;
  display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:20px;
}
.hero__inner{ position:relative; z-index:2; }
.hero__title{
  font-size:clamp(2.7rem, 7.2vw, 6.2rem);
  margin:.18em 0 .32em;
}
.hero__title .line{ display:block; overflow:visible; }
.hero__title em{ color:var(--coral); }
.wobble{ display:inline-block; color:var(--coral); }
.hero__sub{ font-size:clamp(1.05rem,1.4vw,1.35rem); max-width:30ch; color:var(--ink-soft); }
.hero__sub b{ color:var(--ink); position:relative; }
.hero__sub b:nth-of-type(1){ color:var(--coral); }
.hero__sub b:nth-of-type(2){ color:#1F9E7A; }
.hero__sub b:nth-of-type(3){ color:#8A6BE0; }
.hero__actions{ display:flex; align-items:center; gap:22px; margin-top:1.7em; flex-wrap:wrap; }

.hero__photo{ position:relative; z-index:1; justify-self:center; width:min(100%,420px); }
.frame{
  position:relative; border:3px solid var(--ink); border-radius:var(--radius);
  overflow:hidden; background:var(--cream-2); box-shadow:var(--shadow);
}
.frame img{ width:100%; height:100%; object-fit:cover; aspect-ratio:9/11; filter:saturate(1.05) contrast(1.03); }
.frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,61,110,.16), transparent 45%, rgba(127,224,196,.16)); mix-blend-mode:multiply; pointer-events:none; }
.frame--tilt{ transform:rotate(2.4deg); }
.frame--tilt-l{ transform:rotate(-2.6deg); }
.frame--tilt-r{ transform:rotate(3deg); }
.frame--sm{ width:44%; }

/* washi tape accents */
.tape{ position:absolute; width:74px; height:26px; background:rgba(255,214,69,.7); border:1px dashed rgba(27,23,18,.35); z-index:3; }
.tape--tl{ top:-10px; left:14px; transform:rotate(-8deg); }
.tape--br{ bottom:-9px; right:20px; transform:rotate(6deg); background:rgba(127,224,196,.7); }

/* hero doodles */
.doodle{ position:absolute; color:var(--ink); pointer-events:none; z-index:0; }
.hero__daisy{ width:82px; top:158px; left:-48px; z-index:0; }
.hero__star{ width:52px; top:210px; right:44%; }
.hero__spark{ width:38px; bottom:120px; left:38%; color:var(--coral); }
.hero__squiggle{ width:130px; bottom:60px; right:8%; }

/* =========================================================
   MANIFESTO + BUBBLES
   ========================================================= */
.manifesto{
  max-width:var(--maxw); margin:0 auto; padding:14vh 24px;
  min-height:100dvh; display:flex; flex-direction:column; justify-content:center;
}
.manifesto__head{ display:grid; grid-template-columns:1.25fr .75fr; gap:36px; align-items:end; }
.big-statement{ font-size:clamp(2rem,4.6vw,3.7rem); max-width:16ch; }
.manifesto__lead{ color:var(--ink-soft); font-size:1.08rem; }

.bubbles{ display:flex; flex-wrap:wrap; gap:16px 18px; margin:52px 0 20px; justify-content:center; }
.bubble{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(1rem,1.7vw,1.5rem);
  padding:.5em 1.05em; border:2.5px solid var(--ink); border-radius:var(--radius-pill);
  box-shadow:3px 3px 0 var(--ink); white-space:nowrap;
}
/* per-bubble resting tilt + idle-bob rhythm (each on its own clock) */
.bubble:nth-child(2n){ --rot:-2deg; }
.bubble:nth-child(3n){ --rot:2.5deg; }
.bubble:nth-child(1){ --bob-dur:4.4s; }
.bubble:nth-child(2){ --bob-dur:5.2s; --bob-delay:.35s; }
.bubble:nth-child(3){ --bob-dur:4.7s; --bob-delay:.7s; }
.bubble:nth-child(4){ --bob-dur:5.6s; --bob-delay:.2s; }
.bubble:nth-child(5){ --bob-dur:4.9s; --bob-delay:.55s; }
.bubble:nth-child(6){ --bob-dur:5.3s; --bob-delay:.9s; }
.bubble--coral{ background:var(--coral); color:#fff; }
.bubble--butter{ background:var(--butter); }
.bubble--mint{ background:var(--mint); }
.bubble--lav{ background:var(--lav); }
.bubble--peach{ background:var(--peach); }
.bubble--outline{ background:var(--cream); }

/* hover: every bubble reacts with its own move, in character with its words */
.bubble--coral.is-idle:hover{ animation:hv-wiggle .55s ease-in-out 1; }        /* excited wiggle */
.bubble--butter.is-idle:hover{ animation:hv-jump .6s cubic-bezier(.28,2.2,.5,1) 1; } /* happy jump */
.bubble--mint.is-idle:hover{ animation:hv-beat .7s ease-in-out 1; }            /* heartbeat */
.bubble--lav.is-idle:hover{ animation:hv-chuckle .65s ease-in-out 1; }  /* tips over giggling */
.bubble--peach.is-idle:hover{ animation:hv-squish .6s ease-out 1; }            /* squash & stretch */
.bubble--outline.is-idle:hover{ animation:hv-pop .6s var(--ease) 1; background:var(--coral); color:#fff; } /* love-struck flip */

@keyframes hv-wiggle{
  0%,100%{ transform:rotate(var(--rot,0deg)); }
  20%{ transform:rotate(calc(var(--rot,0deg) + 7deg)); }
  45%{ transform:rotate(calc(var(--rot,0deg) - 7deg)); }
  70%{ transform:rotate(calc(var(--rot,0deg) + 4deg)); }
}
@keyframes hv-jump{
  0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)); }
  40%{ transform:translateY(-16px) rotate(calc(var(--rot,0deg) - 3deg)); }
  75%{ transform:translateY(2px) rotate(var(--rot,0deg)); }
}
@keyframes hv-beat{
  0%,100%{ transform:scale(1) rotate(var(--rot,0deg)); }
  25%{ transform:scale(1.14) rotate(var(--rot,0deg)); }
  45%{ transform:scale(1.02) rotate(var(--rot,0deg)); }
  65%{ transform:scale(1.1) rotate(var(--rot,0deg)); }
}
@keyframes hv-chuckle{
  0%{ transform:translateY(0) rotate(var(--rot,0deg)); }
  35%{ transform:translateY(1px) rotate(calc(var(--rot,0deg) - 5deg)); }
  65%{ transform:translateY(0) rotate(calc(var(--rot,0deg) + 2.5deg)); }
  100%{ transform:translateY(0) rotate(var(--rot,0deg)); }
}
@keyframes hv-squish{
  0%,100%{ transform:scale(1,1) rotate(var(--rot,0deg)); }
  30%{ transform:scale(1.18,.82) rotate(var(--rot,0deg)); }
  60%{ transform:scale(.92,1.1) rotate(var(--rot,0deg)); }
  80%{ transform:scale(1.04,.98) rotate(var(--rot,0deg)); }
}
@keyframes hv-pop{
  0%{ transform:scale(1) rotate(var(--rot,0deg)); }
  40%{ transform:scale(1.16) rotate(calc(var(--rot,0deg) + 4deg)); }
  70%{ transform:scale(.95) rotate(calc(var(--rot,0deg) - 2deg)); }
  100%{ transform:scale(1) rotate(var(--rot,0deg)); }
}

/* =========================================================
   ABOUT SCENE — pinned split, image takeover, curtain-over
   Mobile-first: plain stacked layout. Desktop MQ turns it
   into the pinned full-viewport scene.
   ========================================================= */
.about-wrap{ position:relative; }
.about-stage{ position:relative; background:var(--cream); }
.about__title{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:clamp(3.4rem,13vw,8rem); line-height:.9; letter-spacing:-.04em;
  text-transform:lowercase; padding:12vh 24px 0; margin:0;
}
.t-ink{ color:var(--ink); }
.t-knock{ color:var(--ink); } /* becomes knockout-cream over the image on desktop */
.about__left{ padding:28px 24px 40px; max-width:600px; }
.about__intro{ color:var(--ink-soft); margin:0 0 28px; }
.about__labels{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.about__labels li{
  display:flex; align-items:center; gap:14px;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.05rem;
}
.lbl-ico{
  width:52px; height:52px; flex:none; border-radius:50%;
  border:2.5px solid var(--ink); background:var(--cream-2);
  display:grid; place-items:center; font-size:1.35rem;
}
.about__img-r{ height:48vh; overflow:hidden; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); }
.about__img-r img{ width:100%; height:100%; object-fit:cover; }
.about__fig-b{ margin:0; height:40vh; overflow:hidden; }
.about__fig-b img{ width:100%; height:100%; object-fit:cover; }

/* =========================================================
   SHOWCASE (dark)
   ========================================================= */
/* =========================================================
   PROCESS SCENE — the rising inset dark panel (3 beats)
   Mobile-first: static dark section. Desktop MQ pins the
   stage and lets GSAP drive rise -> expand -> content.
   ========================================================= */
.process-wrap{ position:relative; }
.process-stage{ position:relative; }
.process-ghost{ display:none; position:absolute; top:5vh; left:0; right:0; text-align:center; pointer-events:none; z-index:2; }
.process-ghost span{
  display:inline-block; white-space:nowrap;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:clamp(4rem,15vw,13rem); line-height:1; letter-spacing:-.03em;
  color:rgba(128,117,100,.45);
}
.process-panel{
  position:relative; z-index:1; background:var(--night); color:var(--cream);
  min-height:100dvh; padding:12vh 24px;
  display:flex; flex-direction:column; justify-content:center;
}
.showcase__intro{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto 40px; text-align:center; }
.showcase__intro h2{ font-size:clamp(2rem,4vw,3.2rem); }
.showcase__intro p{ color:rgba(251,246,236,.62); max-width:44ch; margin:.7em auto 0; }

.carousel{ position:relative; max-width:900px; margin:0 auto; }
.carousel__track{ position:relative; min-height:360px; }
.step{
  position:absolute; inset:0; margin:auto; max-width:640px;
  background:var(--night-2); border:2px solid rgba(251,246,236,.16); border-radius:var(--radius);
  padding:44px 48px; text-align:center;
  opacity:0; visibility:hidden; transform:scale(.94) translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.step.is-active{ opacity:1; visibility:visible; transform:none; position:relative; }
.step__no{ font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:3rem; color:var(--coral); display:block; line-height:1; }
.step__doodle{ position:static; width:60px; margin:12px auto 6px; display:block; }
.step h3{ font-size:clamp(1.6rem,3vw,2.3rem); margin:.2em 0 .4em; }
.step p{ color:rgba(251,246,236,.72); max-width:42ch; margin:0 auto; }

.carousel__nav{ display:flex; align-items:center; justify-content:center; gap:22px; margin-top:30px; }
.carousel__dots{ display:flex; gap:9px; }
.carousel__dots button{ width:11px; height:11px; border-radius:50%; border:2px solid var(--cream); background:transparent; padding:0; cursor:pointer; transition:background .3s,transform .3s; }
.carousel__dots button.is-active{ background:var(--butter); border-color:var(--butter); transform:scale(1.15); }

.round-btn{
  width:56px; height:56px; border-radius:50%; flex:none;
  border:2px solid var(--cream); background:transparent; color:var(--cream);
  display:grid; place-items:center; cursor:pointer;
  transition:background .2s,color .2s,transform .2s;
}
.round-btn svg{ width:22px; height:22px; }
.round-btn:hover{ background:var(--butter); color:var(--ink); border-color:var(--butter); transform:scale(1.06); }
.round-btn--ink{ border-color:var(--ink); color:var(--ink); }
.round-btn--ink:hover{ background:var(--coral); color:#fff; border-color:var(--ink); }

.showcase__cta{ display:flex; width:max-content; margin:56px auto 0; position:relative; }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{ overflow:hidden; background:var(--coral); color:#fff; border-bottom:3px solid var(--ink); padding:16px 0; }
.marquee__track{ display:flex; width:max-content; will-change:transform; }
.marquee__track span{ font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:clamp(1.4rem,2.6vw,2.2rem); text-transform:uppercase; letter-spacing:.01em; padding-right:.3em; }
.marquee__track b{ color:var(--butter); margin:0 .35em; }

/* =========================================================
   SEAM DIVIDER — spinning flower badge on the section seam
   ========================================================= */
/* airy breathing moment between sections — badge alone in whitespace */
.divider{ position:relative; z-index:6; padding:14vh 0; display:grid; place-items:center; pointer-events:none; }
.divider--rev{ padding:18vh 0; }
.divider__badge{ width:clamp(64px,8vw,96px); transform-origin:center; }

/* =========================================================
   STORIES / TESTIMONIALS
   ========================================================= */
/* full-width so it can act as the curtain sliding over the takeover */
.stories{
  position:relative; z-index:5; background:var(--cream);
  border-top:3px solid var(--ink);
  padding:0 24px 10vh;
}
.stories__daisy{ width:88px; top:7vh; right:6%; }
.stories__head{ text-align:center; margin-bottom:44px; padding-top:13vh; }
.stories__lead{ color:var(--ink-soft); max-width:56ch; margin:1em auto 0; }
.stories__head h2{ font-size:clamp(2rem,4.4vw,3.4rem); max-width:18ch; margin:.35em auto 0; }

.quotes{ position:relative; min-height:440px; }
.quote{
  position:absolute; inset:0; margin:auto;
  display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:center; max-width:960px;
  opacity:0; visibility:hidden; transform:translateY(16px);
  transition:opacity .55s var(--ease), transform .55s var(--ease), visibility .55s;
}
.quote.is-active{ opacity:1; visibility:visible; transform:none; position:relative; }
.quote__media .frame{ width:min(100%,320px); }
.quote__media .frame img{ aspect-ratio:8/9; }
.quote blockquote{ margin:0; }
.quote blockquote p{ font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:clamp(1.35rem,2.4vw,2rem); line-height:1.2; letter-spacing:-.01em; }
.quote figcaption{ margin-top:1.2em; display:flex; flex-direction:column; }
.quote figcaption b{ font-family:"Bricolage Grotesque",sans-serif; font-size:1.1rem; }
.quote figcaption span{ color:var(--ink-soft); font-size:.95rem; }
.quotes__nav{ display:flex; gap:16px; justify-content:center; margin-top:30px; }

/* =========================================================
   FAQ
   ========================================================= */
/* full-height split: edge-bleed image left, list right (reference FAQ layout) */
.faq{
  display:grid; grid-template-columns:42% 1fr; gap:clamp(32px,5vw,80px);
  align-items:center; min-height:100dvh; padding:0 clamp(24px,4vw,64px) 0 0;
}
.faq__media{
  margin:0; align-self:stretch; overflow:hidden;
  border-right:3px solid var(--ink);
}
.faq__media img{ width:100%; height:100%; object-fit:cover; }
.faq__body{ max-width:760px; width:100%; padding:12vh 0; }
.faq__head{ display:flex; align-items:center; gap:16px; margin-bottom:40px; }
.faq__head h2{ font-size:clamp(2.2rem,5vw,3.6rem); }
.faq__spark{ width:40px; position:static; }
.faq__item{ border:2px solid var(--ink); border-radius:16px; background:var(--cream-2); margin-bottom:14px; box-shadow:3px 3px 0 var(--ink); overflow:hidden; }
.faq__q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(1.05rem,1.9vw,1.3rem); color:var(--ink);
  padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq__icon{ position:relative; width:22px; height:22px; flex:none; }
.faq__icon::before,.faq__icon::after{ content:""; position:absolute; background:var(--coral); border-radius:2px; }
.faq__icon::before{ top:9px; left:0; width:22px; height:4px; }
.faq__icon::after{ top:0; left:9px; width:4px; height:22px; transition:transform .3s var(--ease); }
.faq__item.is-open .faq__icon::after{ transform:scaleY(0); }
.faq__a{ height:0; overflow:hidden; transition:height .35s var(--ease); }
.faq__a p{ padding:0 24px 22px; color:var(--ink-soft); max-width:60ch; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{
  position:relative; max-width:820px; margin:0 auto; padding:14vh 24px 10vh;
  min-height:92dvh; display:flex; flex-direction:column; justify-content:center;
}
.contact__star{ width:52px; top:60px; left:2%; }
.contact__head{ text-align:center; margin-bottom:40px; }
.contact__head h2{ font-size:clamp(2.1rem,4.8vw,3.6rem); max-width:16ch; margin:0 auto; }
.contact__head p{ color:var(--ink-soft); margin-top:.7em; }

.form{ display:grid; grid-template-columns:1fr 1fr; gap:20px 22px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field--full{ grid-column:1 / -1; }
.field label{ font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:.9rem; text-transform:uppercase; letter-spacing:.06em; }
.field input,.field textarea{
  font-family:inherit; font-size:1rem; color:var(--ink);
  padding:14px 16px; background:var(--cream); border:2.5px solid var(--ink); border-radius:14px;
  transition:box-shadow .2s, border-color .2s; resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{ color:#8a8072; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 4px rgba(255,61,110,.16); }
.field.has-error input,.field.has-error textarea{ border-color:var(--coral-d); }
.field__error{ color:var(--coral-d); font-size:.82rem; font-weight:600; min-height:.2em; }
.form__submit{ grid-column:1 / -1; justify-self:start; margin-top:4px; }
.form__status{ grid-column:1/-1; font-weight:600; color:#1F9E7A; min-height:1.2em; }

.contact__alt{ text-align:center; color:var(--ink-soft); margin-top:32px; }
.contact__alt a{ color:var(--coral); font-weight:700; text-decoration:underline; text-underline-offset:3px; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--night); color:var(--cream); border-top:3px solid var(--ink); padding:70px 24px 40px; margin-top:40px; }
.footer__big{ display:flex; align-items:center; justify-content:center; gap:clamp(10px,3vw,40px); flex-wrap:wrap; text-align:center; }
.footer__word{ font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:clamp(3rem,12vw,10rem); line-height:.9; letter-spacing:-.03em; }
.footer__word--out{ color:transparent; -webkit-text-stroke:2px var(--cream); }
.footer__amp{ width:clamp(50px,7vw,90px); position:static; }
.footer__row{ max-width:var(--maxw); margin:56px auto 0; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:28px; border-top:1px solid rgba(251,246,236,.16); }
.footer__brand{ display:flex; align-items:center; gap:.5em; font-family:"Bricolage Grotesque",sans-serif; font-weight:800; }
.footer__links{ display:flex; gap:22px; }
.footer__links a{ color:rgba(251,246,236,.72); font-weight:600; transition:color .2s; }
.footer__links a:hover{ color:var(--butter); }
.footer__fine{ max-width:var(--maxw); margin:24px auto 0; color:rgba(251,246,236,.5); font-size:.9rem; }

/* =========================================================
   MOTION reveal defaults (JS toggles .is-in)
   ========================================================= */
.hero__title .line,.reveal{ opacity:0; transform:translateY(26px); }
.hero__title .line.is-in,.reveal.is-in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-photo{ opacity:0; transform:translateY(30px) scale(.97); }
.reveal-photo.is-in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }
.bubble{ opacity:0; transform:translateY(24px) scale(.85) rotate(var(--rot,0deg)); }
.bubble.is-in{
  opacity:1; transform:translateY(0) scale(1) rotate(var(--rot,0deg));
  transition:opacity .5s var(--ease), transform .55s var(--ease), background .25s, color .25s;
}
/* after the pop lands, each bubble floats on its own rhythm */
.bubble.is-idle{ animation:bubble-bob var(--bob-dur,5s) ease-in-out var(--bob-delay,0s) infinite; }
@keyframes bubble-bob{
  0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)); }
  50%{ transform:translateY(-9px) rotate(calc(var(--rot,0deg) + 2.2deg)); }
}

/* doodle idle motion — on inner groups only, so GSAP owns the outer transform */
@keyframes spin-slow{ to{ transform:rotate(360deg); } }
.hero__daisy .petals{ animation:spin-slow 26s linear infinite; transform-box:fill-box; transform-origin:center; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:960px){
  /* ---- mobile nav: burger + full-screen playful menu ---- */
  /* drop transform + backdrop-filter on mobile: both would trap the fixed
     overlay inside the nav box. Re-center with auto margins instead. */
  .nav{ left:0; right:0; transform:none; margin-inline:auto; background:var(--cream); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .nav__cta{ display:none; }
  .nav__burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:46px; height:46px; flex:none; margin-left:auto; padding:0 11px;
    background:var(--ink); border:2px solid var(--ink); border-radius:50%; cursor:pointer;
  }
  .nav__burger span{ display:block; height:2.5px; background:var(--cream); border-radius:3px; transition:transform .3s var(--ease), opacity .2s; }
  .nav.is-open .nav__burger span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
  .nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

  .nav__brand{ position:relative; z-index:40; }
  .nav__burger{ position:relative; z-index:40; }
  .nav__links{
    position:fixed; inset:0; z-index:30;
    display:flex; flex-direction:column; justify-content:center; gap:6px;
    padding:16vh 32px 8vh; background:var(--cream);
    opacity:0; visibility:hidden; transform:translateY(-2%);
    transition:opacity .35s var(--ease), transform .4s var(--ease), visibility .35s;
    overflow:hidden;
  }
  .nav.is-open .nav__links{ opacity:1; visibility:visible; transform:none; }
  .nav__pill{ display:none; }
  .nav__links a[data-nav]:not(.nav__menu-cta){
    font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
    font-size:clamp(2.4rem,11vw,3.4rem); line-height:1.04; letter-spacing:-.02em;
    color:var(--ink); padding:.12em 0; border-radius:0;
    position:relative; z-index:1;
    opacity:0; transform:translateY(14px);
  }
  .nav.is-open .nav__links a[data-nav]:not(.nav__menu-cta){ opacity:1; transform:none; transition:opacity .4s var(--ease), transform .45s var(--ease); }
  .nav.is-open .nav__links a:nth-of-type(1){ transition-delay:.08s; }
  .nav.is-open .nav__links a:nth-of-type(2){ transition-delay:.14s; }
  .nav.is-open .nav__links a:nth-of-type(3){ transition-delay:.20s; }
  .nav.is-open .nav__links a:nth-of-type(4){ transition-delay:.26s; }
  .nav__links a[data-nav]:not(.nav__menu-cta).is-active{ color:var(--coral); }
  .nav__menu-cta{
    display:inline-flex; align-self:flex-start; margin-top:28px;
    position:relative; z-index:1;
    opacity:0; transform:translateY(14px);
  }
  .nav.is-open .nav__menu-cta{ opacity:1; transform:none; transition:opacity .4s var(--ease) .32s, transform .45s var(--ease) .32s; }
  .nav__menu-daisy{ display:block; position:absolute; width:118px; right:-16px; bottom:6vh; z-index:0; opacity:.9; animation:spin-slow 26s linear infinite; }

  .hero{ grid-template-columns:1fr; padding-top:120px; min-height:auto; gap:36px; text-align:left; }
  .hero__photo{ justify-self:start; width:min(80%,340px); }
  .hero__squiggle,.hero__star{ display:none; }
  .manifesto__head{ grid-template-columns:1fr; gap:20px; }
  .faq{ grid-template-columns:1fr; min-height:auto; padding:0 24px 4vh; }
  .faq__media{ height:38vh; border-right:0; border-bottom:3px solid var(--ink); margin:0 -24px; }
  .faq__body{ padding:6vh 0 0; margin:0 auto; }
  .divider{ padding:9vh 0; }
  .divider--rev{ padding:10vh 0; }
  .quote{ grid-template-columns:1fr; gap:24px; text-align:center; justify-items:center; }
  .quote__media .frame{ width:min(70%,260px); }
}
@media (max-width:600px){
  .nav{ padding:8px 8px 8px 16px; gap:10px; }
  .nav__brand{ font-size:.9rem; }
  .hero__title{ font-size:clamp(2.6rem,12vw,4rem); }
  .hero__daisy{ width:70px; top:96px; }
  .bubbles{ gap:12px; }
  .bubble{ font-size:1.05rem; }
  .form{ grid-template-columns:1fr; }
  .step{ padding:34px 26px; }
  .footer__row{ justify-content:center; text-align:center; }
}
@media (max-width:380px){
  .nav__brand span{ max-width:9.5em; line-height:1; white-space:normal; font-size:.82rem; }
}

/* =========================================================
   SCENE MODE — desktop + motion allowed only.
   Pinned stages, curtain overlap, knockout title.
   ========================================================= */
@media (min-width:961px) and (prefers-reduced-motion:no-preference){
  /* PROCESS: tall wrapper, sticky stage; GSAP drives rise -> expand -> content */
  .process-wrap{ height:280vh; }
  .process-stage{ position:sticky; top:0; height:100vh; overflow:hidden; background:var(--cream); }
  .process-ghost{ display:block; }
  .process-panel{
    position:absolute; inset:0; min-height:0; height:100vh; padding:0 24px;
    will-change:transform;
  }

  /* ABOUT: tall wrapper, sticky stage, absolute scene layout */
  .about-wrap{ height:300vh; }
  .about-stage{ position:sticky; top:0; height:100vh; overflow:hidden; }
  .about__title{
    position:absolute; top:6vh; left:4vw; z-index:3; padding:0;
    white-space:nowrap; font-size:14vw; /* scales with viewport so "me" always crosses onto the image */
  }
  .t-knock{ color:var(--cream); -webkit-text-stroke:2.5px var(--ink); margin-left:.3em; }
  .about__left{ position:absolute; left:4vw; top:42vh; width:37vw; max-width:none; padding:0; z-index:2; }
  .about__img-r{
    position:absolute; top:0; right:0; width:50vw; height:100vh; z-index:1;
    border:0; border-left:3px solid var(--ink);
  }
  .about__fig-b{
    position:absolute; left:0; bottom:0; width:50vw; height:100vh; z-index:1;
    clip-path:inset(46% 20% 0% 0%);
    will-change:transform,clip-path;
  }

  /* curtain: stories overlaps and slides over the last 100vh of the about scene */
  .stories{ margin-top:-100vh; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition-duration:.001ms !important; }
  .reveal,.hero__title .line,.reveal-photo,.bubble{ opacity:1 !important; transform:none !important; }
}