/* ==========================================================
   Shooting Stars — shared stylesheet
   Palette + type per Incubix Branding brand book, 2025
   ========================================================== */

:root{
  /* Brand palette */
  --nebula:#4B1984;
  --periwinkle:#A6A4FC;
  --lavender:#DAD7FF;
  --comet:#FFB685;
  --solar:#FFD2B0;
  --midnight:#110630;
  --moonlight:#F2F3F4;

  --serif:'Instrument Serif', Georgia, serif;
  --sans:'Poppins', system-ui, -apple-system, sans-serif;

  --maxw:1240px;
  --gutter:clamp(1.25rem, 5vw, 5.5rem);
  --measure:62ch;
  --rule:1px solid color-mix(in srgb, var(--nebula) 18%, transparent);
  --rule-light:1px solid rgba(255,255,255,.18);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--moonlight);
  color:var(--midnight);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(2.75rem,7.5vw,5.2rem)}
h2{font-size:clamp(2rem,4.6vw,3.4rem)}
h3{font-size:clamp(1.35rem,2.3vw,1.8rem);line-height:1.15}
h4{font-size:1.15rem}
p{margin:0 0 1.1em;max-width:var(--measure)}
a{color:inherit}
em{font-style:italic}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:clamp(4rem,9vw,7.5rem)}
.lede{font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.55;max-width:48ch}
.center{text-align:center}
.center p{margin-inline:auto}

/* Brand kicker: Poppins bold, caps, 100pt tracking */
.kicker{
  font-family:var(--sans);font-weight:700;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.1em;line-height:1.1;
  margin:0 0 1.3rem;color:var(--nebula);
}
.on-dark .kicker,.band .kicker{color:var(--solar)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:500;font-size:.9rem;
  padding:.72rem 1.5rem;border-radius:999px;text-decoration:none;cursor:pointer;
  background:var(--nebula);color:#fff;border:1.5px solid var(--nebula);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{background:var(--midnight);border-color:var(--midnight)}
.btn.ghost{background:transparent;color:var(--nebula)}
.btn.ghost:hover{background:var(--nebula);color:#fff}
.btn.light{background:var(--comet);border-color:var(--comet);color:var(--midnight)}
.btn.light:hover{background:var(--solar);border-color:var(--solar)}
.btn.outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn.outline-light:hover{background:#fff;color:var(--midnight);border-color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}

:is(a,button,input,textarea,select):focus-visible{
  outline:3px solid var(--comet);outline-offset:3px;border-radius:4px;
}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--moonlight) 90%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:var(--rule);
}
.nav-inner{
  max-width:var(--maxw);margin-inline:auto;padding:.7rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand img{height:42px;width:auto}
.links{display:flex;align-items:center;gap:clamp(.9rem,2.2vw,1.9rem)}
.links a{
  font-size:.86rem;font-weight:500;text-decoration:none;color:var(--midnight);
  padding-block:.3rem;border-bottom:1.5px solid transparent;
}
.links a:hover{border-bottom-color:var(--comet)}
.links a.active{border-bottom-color:var(--nebula)}
.links .btn{border-bottom:none;color:#fff}
.links .btn:hover{border-bottom:none}
.menu{
  display:none;background:none;border:1.5px solid var(--nebula);color:var(--nebula);
  border-radius:999px;width:42px;height:42px;font-size:1.1rem;line-height:1;cursor:pointer;
}
@media (max-width:900px){
  .menu{display:block}
  .links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--moonlight);border-bottom:var(--rule);
    padding:.5rem var(--gutter) 1.25rem;
    display:none;
  }
  .links.open{display:flex}
  .links a{padding-block:.8rem;border-bottom:var(--rule)}
  .links .btn{margin-top:.9rem;text-align:center}
}

/* ---------- Decorative comet trail ---------- */
.trail-art{display:block;width:100%;height:auto}
.trail{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);animation:draw 1.5s cubic-bezier(.6,.05,.2,1) forwards}
.trail.t2{animation-delay:.12s}
.trail.t3{animation-delay:.24s}
/* The star sits inside a <g transform="translate(...)">. Animating transform here
   would replace that translate, so scope this to the shape's own box instead. */
.comet-star{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:pop .5s cubic-bezier(.2,1.4,.4,1) 1.05s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.4) rotate(-20deg)}to{opacity:1;transform:scale(1) rotate(0)}}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(3rem,8vw,6.5rem) clamp(3.5rem,9vw,7rem);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:clamp(2rem,5vw,3.5rem);align-items:center}
.hero h1{margin-bottom:1.3rem;max-width:15ch}
.hero-art{justify-self:center;width:min(100%,400px)}
.hero-photo img{border-radius:220px 220px 24px 24px;width:100%;object-fit:cover;aspect-ratio:4/5}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{grid-row:1;width:min(58%,240px);justify-self:end}
}

/* Page header (interior pages) */
.pagehead{padding-block:clamp(3rem,7vw,5.5rem) clamp(2rem,5vw,3.5rem);border-bottom:var(--rule)}
.pagehead h1{font-size:clamp(2.5rem,6vw,4.4rem);max-width:16ch;margin-bottom:1rem}
.pagehead p{max-width:52ch}

/* ---------- Proof strip ---------- */
.proof{background:#fff;border-block:var(--rule)}
.proof .wrap{display:grid;grid-template-columns:repeat(3,1fr);padding-block:clamp(1.8rem,4vw,2.6rem)}
.proof p{margin:0;font-size:.95rem;line-height:1.4;max-width:26ch;padding-right:1.5rem}
.proof p + p{border-left:var(--rule);padding-left:clamp(1rem,3vw,2.5rem)}
.proof strong{display:block;font-family:var(--serif);font-weight:400;font-size:1.75rem;color:var(--nebula);line-height:1.1;margin-bottom:.2rem}
@media (max-width:720px){
  .proof .wrap{grid-template-columns:1fr;gap:1.25rem}
  .proof p + p{border-left:none;border-top:var(--rule);padding:1.25rem 0 0}
}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(2rem,6vw,4.5rem)}
.split.even{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}
.split h2{max-width:14ch}
@media (max-width:820px){.split,.split.even{grid-template-columns:1fr}}

/* ---------- Rule list (values, FAQ, includes) ---------- */
.rulelist{border-top:var(--rule);margin-top:2.5rem}
.row{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(.6rem,5vw,4.5rem);padding-block:clamp(1.6rem,3.5vw,2.4rem);
  border-bottom:var(--rule);
}
.row h3{color:var(--nebula)}
.row p{margin:0;font-size:.98rem}
@media (max-width:760px){.row{grid-template-columns:1fr;gap:.5rem}}

/* ---------- Framework steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.25rem,3vw,2.25rem);margin-top:2.75rem}
.step{padding-top:1.4rem;border-top:2px solid var(--periwinkle)}
.step:last-child{border-top-color:var(--comet)}
.step .num{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--nebula);display:block;margin-bottom:.5rem}
.step h3{font-size:1.5rem;margin-bottom:.4rem}
.step p{font-size:.92rem;margin:0}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- Service tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,1.75rem);margin-top:2.75rem;align-items:start}
.tier{background:#fff;border:1.5px solid color-mix(in srgb,var(--nebula) 20%,transparent);border-radius:20px;padding:clamp(1.5rem,3vw,2.25rem)}
.tier.featured{background:var(--nebula);color:#fff;border-color:var(--nebula)}
.tier.featured .tier-tag{color:var(--solar)}
.tier.featured li::marker{color:var(--comet)}
.tier-tag{font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--nebula);display:block;margin-bottom:.7rem}
.tier h3{font-size:2rem;margin-bottom:.5rem}
.tier > p{font-size:.95rem;margin-bottom:1.2rem;max-width:none}
.tier ul{list-style:none;padding:0;margin:0 0 1.5rem;font-size:.92rem}
.tier li{padding:.55rem 0 .55rem 1.4rem;position:relative;border-top:1px solid color-mix(in srgb,var(--nebula) 14%,transparent)}
.tier.featured li{border-top-color:rgba(255,255,255,.2)}
.tier li::before{content:"";position:absolute;left:0;top:1.05rem;width:7px;height:7px;border-radius:50%;background:var(--comet)}
.tier li:first-child{border-top:none}
@media (max-width:900px){.tiers{grid-template-columns:1fr}}

/* ---------- Work / portfolio grid ---------- */
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,1.75rem);margin-top:2.75rem}
.work-item{background:#fff;border-radius:18px;overflow:hidden;border:1.5px solid color-mix(in srgb,var(--nebula) 14%,transparent)}
.work-item .thumb{aspect-ratio:4/5;background:linear-gradient(150deg,var(--lavender),var(--periwinkle));display:grid;place-items:center}
.work-item .thumb img{width:100%;height:100%;object-fit:cover}
.work-item .body{padding:1.25rem 1.35rem 1.5rem}
.work-item h3{font-size:1.4rem;margin-bottom:.3rem}
.work-item p{font-size:.9rem;margin:0}
.work-item .stat{display:block;margin-top:.9rem;font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--nebula)}
@media (max-width:900px){.work{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.work{grid-template-columns:1fr}}

/* ---------- Marquee of industries ---------- */
.marquee{overflow:hidden;border-block:var(--rule);background:#fff;padding-block:1.4rem}
.marquee-track{display:flex;gap:2.5rem;width:max-content;animation:slide 34s linear infinite}
.marquee span{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.4rem);color:var(--nebula);white-space:nowrap;opacity:.85}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,1.75rem);margin-top:2.5rem}
.quote{border-top:2px solid var(--periwinkle);padding-top:1.3rem}
.quote blockquote{margin:0 0 1rem;font-family:var(--serif);font-size:1.35rem;line-height:1.25}
.quote cite{font-style:normal;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nebula)}
@media (max-width:860px){.quotes{grid-template-columns:1fr}}

/* ---------- Bands ---------- */
.band{background:var(--nebula);color:#fff;position:relative;overflow:hidden}
.band p{color:color-mix(in srgb,#fff 88%,var(--periwinkle))}
.band-dark{background:var(--midnight);color:#fff}
.band-dark p{color:color-mix(in srgb,#fff 80%,var(--periwinkle))}
.band-soft{background:var(--lavender)}
.band-white{background:#fff;border-block:var(--rule)}
.orbit{position:absolute;right:-10%;bottom:-32%;width:min(58vw,600px);opacity:.15;z-index:1;pointer-events:none}
.band .wrap,.band-dark .wrap{position:relative;z-index:2}

/* ---------- CTA ---------- */
.cta h2{font-size:clamp(2.2rem,5.5vw,3.8rem);margin-bottom:.9rem}
.cta-star{width:50px;margin:0 auto 1.6rem}

/* ---------- Forms ---------- */
.form{margin-top:2rem;max-width:640px}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nebula);margin-bottom:.4rem}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:1rem;color:var(--midnight);
  background:#fff;border:1.5px solid color-mix(in srgb,var(--nebula) 22%,transparent);
  border-radius:12px;padding:.75rem .9rem;
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--nebula);outline-offset:1px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:600px){.field-row{grid-template-columns:1fr}}
.form-note{font-size:.85rem;color:color-mix(in srgb,var(--midnight) 65%,transparent)}

/* ---------- Contact details ---------- */
.contact-list{list-style:none;padding:0;margin:2rem 0 0}
.contact-list li{border-top:var(--rule);padding:1.1rem 0}
.contact-list .label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--nebula);margin-bottom:.25rem}
.contact-list a{text-decoration:none;font-size:1.1rem}
.contact-list a:hover{color:var(--nebula)}

/* ---------- Footer ---------- */
.foot{background:var(--midnight);color:#fff;padding:clamp(2.5rem,5vw,4rem) var(--gutter) 2rem}
.foot-grid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.foot img{height:48px;width:auto}
.foot h4{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--solar);margin:0 0 .9rem}
.foot a{display:block;color:rgba(255,255,255,.82);text-decoration:none;font-size:.9rem;padding-block:.3rem}
.foot a:hover{color:var(--comet)}
.foot .tagline{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--lavender);margin:1rem 0 0}
.foot-bottom{max-width:var(--maxw);margin:2.5rem auto 0;padding-top:1.25rem;border-top:var(--rule-light);display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;font-size:.78rem;color:rgba(255,255,255,.6)}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* ---------- Scroll reveal ---------- */
.scroll-reveal{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.scroll-reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .scroll-reveal{opacity:1;transform:none}
  .trail{stroke-dashoffset:0}
  .comet-star{opacity:1}
  .marquee-track{animation:none}
}

/* ==========================================================
   Media-first components (video hero, work feed, reels)
   ========================================================== */

/* ---------- Full-bleed video hero ---------- */
.vhero{
  position:relative;min-height:clamp(560px,88svh,940px);
  display:flex;align-items:flex-end;overflow:hidden;background:var(--midnight);
}
.vhero video,.vhero img.bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.vhero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(17,6,48,.92) 0%,rgba(17,6,48,.55) 45%,rgba(17,6,48,.25) 100%);
}
.vhero .wrap{position:relative;z-index:2;padding-bottom:clamp(3rem,7vw,5.5rem);width:100%}
.vhero .kicker{color:var(--solar)}
.vhero h1{color:#fff;font-size:clamp(3rem,9vw,7rem);max-width:13ch;margin-bottom:1rem}
.vhero h1 em{color:var(--comet)}
.vhero p{color:rgba(255,255,255,.85);max-width:40ch;font-size:clamp(1rem,1.4vw,1.15rem)}
.scrollcue{
  position:absolute;right:var(--gutter);bottom:clamp(3rem,7vw,5.5rem);z-index:2;
  writing-mode:vertical-rl;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
}
@media (max-width:760px){.scrollcue{display:none}}

/* ---------- Section head ---------- */
.sechead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.sechead h2{max-width:16ch}
.sechead .kicker{margin-bottom:.5rem}

/* ---------- Work feed (alternating media blocks) ---------- */
.feed{display:flex;flex-direction:column;gap:clamp(2.5rem,6vw,5rem)}
.feature{display:block;text-decoration:none;width:min(100%,760px)}
.feature:nth-child(even){margin-left:auto}
.feature-media{
  position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:20px;
  background:linear-gradient(150deg,var(--lavender),var(--periwinkle));
}
.feature-media video,.feature-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.feature:hover .feature-media img,.feature:hover .feature-media video{transform:scale(1.04)}
.feature-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem 1.25rem;margin-top:1.1rem}
.feature-meta .tag{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--nebula)}
.feature h3{font-size:clamp(1.6rem,3vw,2.4rem);flex-basis:100%;margin:.1rem 0 .35rem}
.feature p{font-size:.95rem;margin:0;max-width:48ch}
.feature .go{font-size:.85rem;font-weight:500;color:var(--nebula);white-space:nowrap}
.feature:hover .go{text-decoration:underline}
@media (max-width:760px){.feature{width:100%}.feature-media{aspect-ratio:1/1}}

/* ---------- Reels / top performing ---------- */
.reels{
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.75rem,1.6vw,1.25rem);
}
.reel{display:block;text-decoration:none;position:relative}
.reel-media{
  position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:16px;
  background:var(--midnight);
}
.reel-media video,.reel-media img{width:100%;height:100%;object-fit:cover;display:block}
.reel-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(17,6,48,.85) 0%,rgba(17,6,48,0) 55%);
}
.reel-views{
  position:absolute;left:.75rem;bottom:.7rem;z-index:2;
  font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2.1rem);color:#fff;line-height:1;
}
.reel-views small{
  display:block;font-family:var(--sans);font-size:.6rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--comet);margin-top:.3rem;
}
.reel-badge{
  position:absolute;top:.7rem;right:.7rem;z-index:2;
  background:rgba(255,255,255,.92);color:var(--midnight);
  font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.3rem .55rem;border-radius:999px;
}
.reel-cap{font-size:.82rem;color:color-mix(in srgb,var(--midnight) 72%,transparent);margin:.6rem 0 0;max-width:none}
.reel:hover .reel-media{outline:2px solid var(--comet);outline-offset:3px}
@media (max-width:1024px){.reels{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){
  .reels{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:66%;
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:.75rem;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  }
  .reel{scroll-snap-align:start}
}

/* ---------- Capability tiles ---------- */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:var(--rule)}
.cap{padding:clamp(1.4rem,3vw,2.2rem) clamp(1rem,2vw,1.75rem);border-bottom:var(--rule);border-right:var(--rule)}
.cap:nth-child(3n){border-right:none}
.cap h3{font-size:1.5rem;margin-bottom:.4rem}
.cap p{font-size:.9rem;margin:0}
@media (max-width:860px){
  .caps{grid-template-columns:1fr}
  .cap{border-right:none}
}

/* ---------- Client logo wall ---------- */
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(1rem,3vw,2.5rem);align-items:center;margin-top:2rem}
.logos img{width:100%;height:auto;max-height:46px;object-fit:contain;filter:grayscale(1);opacity:.55;transition:opacity .2s,filter .2s}
.logos img:hover{filter:grayscale(0);opacity:1}
@media (max-width:760px){.logos{grid-template-columns:repeat(3,1fr)}}

/* ---------- Pull quote ---------- */
.pull{text-align:center;max-width:22ch;margin-inline:auto}
.pull blockquote{font-family:var(--serif);font-size:clamp(1.9rem,4.5vw,3.2rem);line-height:1.1;margin:0 0 1.25rem}
.pull cite{font-style:normal;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--nebula)}

/* ==========================================================
   Whimsy layer — stickers, floating stars, tilt, starfield
   ========================================================== */

/* ---------- Playful hero (light, illustrated) ---------- */
.fun-hero{
  position:relative;overflow:hidden;background:var(--moonlight);
  padding-block:clamp(3.5rem,8vw,6rem) clamp(4rem,9vw,7rem);
  min-height:min(88svh,880px);display:flex;align-items:center;
}
.fun-hero .bg-trail{
  position:absolute;right:-8%;top:-6%;width:min(62vw,720px);z-index:0;pointer-events:none;
}
.fun-hero .wrap{position:relative;z-index:2;width:100%}
.fun-hero h1{font-size:clamp(3.2rem,9.5vw,7.4rem);max-width:12ch;margin:.6rem 0 1.2rem}
.fun-hero h1 em{color:var(--nebula)}
.fun-hero .lede{max-width:38ch}
.hero-stickers{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}

/* ---------- Stickers ---------- */
.sticker{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.55rem .95rem;border-radius:999px;border:2px solid var(--midnight);
  background:#fff;color:var(--midnight);box-shadow:3px 3px 0 var(--midnight);
  transform:rotate(var(--tilt,-2deg));transition:transform .25s cubic-bezier(.2,1.4,.4,1);
  white-space:nowrap;
}
.sticker.peach{background:var(--comet)}
.sticker.peri{background:var(--periwinkle)}
.sticker.lav{background:var(--lavender)}
.sticker.nebula{background:var(--nebula);color:#fff;border-color:var(--nebula);box-shadow:3px 3px 0 var(--comet)}
.sticker:hover{transform:rotate(0) scale(1.06)}
.hi{ /* "Hi, we're Shooting Stars" */
  --tilt:-3deg;font-size:.8rem;
}

/* ---------- Floating stars ---------- */
.star-field{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.fstar{
  position:absolute;width:var(--s,22px);height:var(--s,22px);
  color:var(--comet);opacity:.9;
  animation:float var(--d,7s) ease-in-out infinite alternate, twinkle calc(var(--d,7s) * .6) ease-in-out infinite;
  animation-delay:var(--dl,0s);
}
.fstar.peri{color:var(--periwinkle)}
.fstar svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 0 rgba(17,6,48,.08))}
@keyframes float{from{transform:translateY(0) rotate(-8deg)}to{transform:translateY(-22px) rotate(10deg)}}
@keyframes twinkle{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------- Headings with a scribble underline ---------- */
.scribble{position:relative;display:inline-block}
.scribble::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:-.08em;height:.32em;z-index:-1;
  background:var(--comet);border-radius:4px;transform:rotate(-1.2deg);opacity:.9;
}
.scribble.peri::after{background:var(--periwinkle)}

/* ---------- Buttons: a little bounce ---------- */
.btn{transition:transform .2s cubic-bezier(.2,1.4,.4,1),background .18s,color .18s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn.light:hover{box-shadow:0 6px 0 -2px var(--nebula)}
.btn.pop{border:2px solid var(--midnight);box-shadow:3px 3px 0 var(--midnight);background:var(--comet);color:var(--midnight)}
.btn.pop:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--midnight);background:var(--solar);border-color:var(--midnight)}

/* ---------- Reel block ---------- */
.reelblock{
  position:relative;border-radius:28px;overflow:hidden;background:var(--midnight);
  aspect-ratio:16/9;display:grid;place-items:center;
}
.reelblock video,.reelblock img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reelblock .play{
  position:relative;z-index:2;width:clamp(84px,9vw,120px);aspect-ratio:1;border-radius:50%;
  background:var(--comet);color:var(--midnight);display:grid;place-items:center;
  border:none;cursor:pointer;font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 0 0 12px rgba(255,182,133,.25);
  animation:pulse 2.2s ease-in-out infinite;
}
.reelblock .play:hover{animation:none;transform:scale(1.06)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 10px rgba(255,182,133,.25)}50%{box-shadow:0 0 0 22px rgba(255,182,133,.08)}}
.reelblock .corner{position:absolute;top:1.25rem;left:1.25rem;z-index:2}

/* ---------- Tilt on hover for tiles ---------- */
.reel,.feature,.ig-item{transition:transform .3s cubic-bezier(.2,1.4,.4,1)}
.reel:hover{transform:rotate(-1.5deg) translateY(-4px)}
.reel:nth-child(even):hover{transform:rotate(1.5deg) translateY(-4px)}
.feature:hover{transform:translateY(-4px)}

/* ---------- Cosmic marquee ---------- */
.marquee{background:var(--nebula);border:none;padding-block:1.1rem}
.marquee span{color:#fff;opacity:1;font-size:clamp(1.3rem,2.6vw,2rem)}
.marquee .dot{display:inline-block;color:var(--comet);font-family:var(--sans);font-size:1.1rem;transform:translateY(-.15em)}

/* ---------- Capability tiles, friendlier ---------- */
.caps{border:none;gap:clamp(.75rem,1.6vw,1.25rem)}
.cap{
  border:2px solid var(--midnight);border-radius:20px;background:#fff;
  box-shadow:4px 4px 0 var(--midnight);transition:transform .25s cubic-bezier(.2,1.4,.4,1),box-shadow .25s;
}
.cap:nth-child(3n){border-right:2px solid var(--midnight)}
.cap:nth-child(2){background:var(--lavender)}
.cap:nth-child(4){background:var(--solar)}
.cap:nth-child(6){background:var(--periwinkle)}
.cap:hover{transform:translate(-2px,-2px) rotate(-.6deg);box-shadow:7px 7px 0 var(--midnight)}
.cap .emoji{font-size:1.6rem;display:block;margin-bottom:.5rem;line-height:1}

/* ---------- Instagram grid ---------- */
.ig{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.5rem,1.2vw,.9rem);margin-top:2rem}
.ig-item{display:block;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--lavender);position:relative}
.ig-item img{width:100%;height:100%;object-fit:cover;display:block}
.ig-item:hover{transform:scale(1.04) rotate(-1deg);z-index:2}
.ig-item:nth-child(even):hover{transform:scale(1.04) rotate(1deg)}
@media (max-width:760px){.ig{grid-template-columns:repeat(3,1fr)}}

/* ---------- Starfield on dark bands ---------- */
.starfield{position:relative;overflow:hidden}
.starfield .fstar{opacity:.7}

/* ---------- Big friendly statement ---------- */
.statement{font-family:var(--serif);font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1.05;max-width:18ch;margin:0}
.statement em{color:var(--nebula)}
.band-dark .statement em,.band .statement em{color:var(--comet)}

/* ---------- Founder photo in an arch with a sticker ---------- */
.arch{position:relative;width:min(100%,420px)}
.arch img{border-radius:220px 220px 28px 28px;aspect-ratio:4/5;object-fit:cover;width:100%;border:3px solid var(--midnight)}
.arch .sticker{position:absolute;right:-.5rem;bottom:2rem;--tilt:4deg}

/* ---------- Sparkle cursor trail ---------- */
.spark{
  position:fixed;pointer-events:none;z-index:9999;width:14px;height:14px;
  color:var(--comet);animation:sparkfade .7s ease-out forwards;
}
.spark svg{width:100%;height:100%}
@keyframes sparkfade{from{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}to{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(90deg) translateY(-18px)}}

@media (prefers-reduced-motion:reduce){
  .fstar,.reelblock .play{animation:none}
  .sticker,.reel,.feature,.cap,.ig-item,.btn{transition:none}
}

/* ==========================================================
   Client roster — each card borrows a little of the client's flair
   ========================================================== */
.roster{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.4vw,1.75rem);margin-top:2.5rem}
.client{
  position:relative;display:block;text-decoration:none;overflow:hidden;
  border:2px solid var(--midnight);border-radius:24px;background:var(--tint,#fff);color:var(--ink,var(--midnight));
  box-shadow:5px 5px 0 var(--midnight);
  transition:transform .3s cubic-bezier(.2,1.4,.4,1),box-shadow .3s;
}
.client:hover{transform:translate(-3px,-3px) rotate(var(--r,-.6deg));box-shadow:9px 9px 0 var(--midnight)}
.client:nth-child(even){--r:.6deg}
.client-photo{aspect-ratio:16/10;overflow:hidden;background:var(--photo-bg,var(--lavender));border-bottom:2px solid var(--midnight)}
.client-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.client:hover .client-photo img{transform:scale(1.04)}
.client-body{padding:1.35rem 1.5rem 1.6rem;position:relative}
.client-body h3{font-size:clamp(1.7rem,2.8vw,2.3rem);margin:.2rem 0 .3rem}
.client-body .since{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.client-body p{font-size:.95rem;margin:.5rem 0 0;max-width:40ch;color:inherit;opacity:.9}
.client-body .sticker{position:absolute;top:-1.1rem;right:1.25rem;font-size:.66rem;padding:.45rem .8rem}
.client-motif{position:absolute;inset:auto 0 0 0;height:14px;pointer-events:none;opacity:.9}
@media (max-width:760px){.roster{grid-template-columns:1fr}}

/* Serendipity 3 — sundae-parlor pink & sprinkles */
.client.serendipity{--tint:#FFE4EC;--photo-bg:#FFB6C9}
.client.serendipity .client-motif{
  height:100%;inset:0;opacity:.35;
  background:
    linear-gradient(35deg,transparent 48%,#FF7BA9 48% 52%,transparent 52%) 12% 18%/26px 10px no-repeat,
    linear-gradient(-30deg,transparent 48%,#4B1984 48% 52%,transparent 52%) 80% 30%/26px 10px no-repeat,
    linear-gradient(60deg,transparent 48%,#FFB685 48% 52%,transparent 52%) 55% 75%/26px 10px no-repeat,
    linear-gradient(-55deg,transparent 48%,#A6A4FC 48% 52%,transparent 52%) 25% 85%/26px 10px no-repeat,
    linear-gradient(20deg,transparent 48%,#FF7BA9 48% 52%,transparent 52%) 92% 82%/26px 10px no-repeat;
}

/* Enchantments — candlelit occult shop */
.client.enchantments{--tint:#110630;--ink:#F2F3F4;--photo-bg:#2A1655;border-color:#A6A4FC;box-shadow:5px 5px 0 #A6A4FC}
.client.enchantments:hover{box-shadow:9px 9px 0 #A6A4FC}
.client.enchantments .client-photo{border-bottom-color:#A6A4FC}
.client.enchantments .since{color:var(--comet);opacity:1}
.client.enchantments .client-motif{
  height:auto;inset:auto 1.25rem 1.1rem auto;width:36px;opacity:1;
}
.client.enchantments .flame{animation:flicker 1.6s ease-in-out infinite alternate;transform-origin:50% 100%}
@keyframes flicker{0%{transform:scaleY(1) rotate(-2deg);opacity:.9}50%{transform:scaleY(1.12) rotate(2deg);opacity:1}100%{transform:scaleY(.94) rotate(-1deg);opacity:.85}}

/* Mamazul — papel picado fiesta */
.client.mamazul{--tint:#FFF3D6;--photo-bg:#FFB685}
.client.mamazul .client-motif{top:0;bottom:auto;height:18px}
.client.mamazul .client-motif::after{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,#E63946 0 18px,#F4A261 18px 36px,#2A9D8F 36px 54px,#FFD166 54px 72px);
  -webkit-mask:linear-gradient(135deg,#000 50%,transparent 50%) 0 0/18px 18px repeat-x,linear-gradient(45deg,#000 50%,transparent 50%) 0 0/18px 18px repeat-x;
  mask:linear-gradient(135deg,#000 50%,transparent 50%) 0 0/18px 18px repeat-x,linear-gradient(45deg,#000 50%,transparent 50%) 0 0/18px 18px repeat-x;
}

/* Mythos — Aegean blue with a Greek key */
.client.mythos{--tint:#E8F0FB;--photo-bg:#6691C6}
.client.mythos .client-motif{
  height:12px;
  background:
    linear-gradient(#6691C6,#6691C6) 0 0/100% 2px no-repeat,
    repeating-linear-gradient(90deg,#6691C6 0 2px,transparent 2px 12px) 0 2px/100% 6px no-repeat,
    linear-gradient(#6691C6,#6691C6) 0 8px/100% 2px no-repeat;
}

/* Roster mini-marquee of client handles */
.handles{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.handles .sticker{font-size:.64rem;text-transform:none;letter-spacing:.02em}

/* ==========================================================
   Embedded reels (official Instagram / TikTok embeds)
   ========================================================== */
.embeds{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem);margin-top:2rem;align-items:start}
.embed{
  position:relative;border:2px solid var(--midnight);border-radius:22px;background:#fff;
  box-shadow:5px 5px 0 var(--midnight);padding:.6rem;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,1.4,.4,1);
}
.embed:nth-child(odd):hover{transform:rotate(-1deg) translateY(-4px)}
.embed:nth-child(even):hover{transform:rotate(1deg) translateY(-4px)}
.embed .sticker{position:absolute;top:-.9rem;left:1rem;z-index:3;font-size:.62rem;padding:.4rem .7rem}
.embed .rank{position:absolute;top:-.9rem;right:1rem;z-index:3;--tilt:3deg;font-size:.62rem;padding:.4rem .7rem}
.embed blockquote{margin:0 !important;min-width:0 !important;max-width:100% !important;width:100% !important;border-radius:14px}
.embed iframe{border-radius:14px}
.embed .waiting{
  aspect-ratio:9/16;display:grid;place-items:center;text-align:center;border-radius:14px;
  background:linear-gradient(150deg,var(--lavender),var(--periwinkle));color:var(--midnight);
  font-size:.8rem;font-weight:500;padding:1rem;
}
@media (max-width:900px){.embeds{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.embeds{grid-template-columns:1fr}}

/* ---------- Five-across embeds, scaled to fit ---------- */
.embeds{grid-template-columns:repeat(5,1fr);gap:clamp(.6rem,1.4vw,1rem)}
.embed{padding:.45rem}
.embed .sticker,.embed .rank{font-size:.56rem;padding:.32rem .55rem}
.scaler{width:326px;transform-origin:top left;position:absolute;top:0;left:0}
.scaler-box{position:relative;overflow:hidden;border-radius:14px}
@media (max-width:1100px){.embeds{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){
  .embeds{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding:1rem var(--gutter) 1rem;margin-inline:calc(var(--gutter) * -1)}
  .embed{scroll-snap-align:start}
}

/* ==========================================================
   Top posts scroller (replaces the 5-column grid)
   ========================================================== */
.embeds{
  display:flex !important;grid-template-columns:none !important;
  gap:clamp(.9rem,1.6vw,1.25rem);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:1rem .25rem 1.25rem;margin-top:1.5rem;
  scrollbar-width:none;
}
.embeds::-webkit-scrollbar{display:none}
.embed{
  flex:0 0 clamp(200px,20vw,236px);scroll-snap-align:start;
  overflow:visible;padding:.45rem .45rem 0;
}
.embed .sticker,.embed .rank{position:static;font-size:.6rem;padding:.35rem .6rem}
.embed-cap{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.7rem .3rem .75rem;border-top:2px solid var(--midnight);margin-top:.45rem;
}
.embed-cap .views{font-family:var(--serif);font-size:1.35rem;line-height:1;color:var(--nebula)}
.embed-cap .views small{display:block;font-family:var(--sans);font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--midnight);opacity:.7;margin-top:.2rem}
.embed-cap .rank{--tilt:0}
.scaler-box{overflow:hidden;border-radius:14px}
.scrollbtns{display:flex;gap:.5rem}
.scrollbtn{
  width:44px;height:44px;border-radius:50%;border:2px solid var(--midnight);background:#fff;
  color:var(--midnight);font-size:1.1rem;cursor:pointer;box-shadow:3px 3px 0 var(--midnight);
  transition:transform .2s cubic-bezier(.2,1.4,.4,1),background .15s;
}
.scrollbtn:hover{transform:translate(-1px,-1px);background:var(--comet)}
.scrollbtn:disabled{opacity:.35;cursor:default;transform:none}
@media (max-width:640px){
  .embeds{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
  .embed{flex-basis:72%}
}

/* ==========================================================
   DARK THEME — Midnight / Nebula backgrounds site-wide
   (loaded last, overrides the light defaults above)
   ========================================================== */
:root{
  --bg:#110630;          /* Midnight */
  --bg-2:#1B0B45;        /* between Midnight and Nebula */
  --bg-3:#4B1984;        /* Nebula */
  --ink:#F2F3F4;         /* Moonlight */
  --ink-soft:#DAD7FF;    /* Lavender Light */
  --line:rgba(166,164,252,.28);
  --rule:1px solid var(--line);
}
body{background:var(--bg);color:var(--ink)}
h1,h2,h3,h4{color:var(--ink)}
p{color:var(--ink-soft)}
.kicker{color:var(--solar)}
.lede{color:var(--ink-soft)}

/* Nav */
.nav{background:rgba(17,6,48,.86);border-bottom:var(--rule)}
.links a{color:var(--ink)}
.links a.active{border-bottom-color:var(--comet)}
.menu{border-color:var(--periwinkle);color:var(--periwinkle)}
@media (max-width:900px){.links{background:var(--bg);border-bottom:var(--rule)}.links a{border-bottom:var(--rule)}}

/* Buttons */
.btn{background:var(--periwinkle);color:var(--midnight);border-color:var(--periwinkle)}
.btn:hover{background:var(--lavender);border-color:var(--lavender)}
.btn.ghost{background:transparent;color:var(--ink);border-color:rgba(255,255,255,.55)}
.btn.ghost:hover{background:#fff;color:var(--midnight);border-color:#fff}
.btn.pop{background:var(--comet);color:var(--midnight);border-color:var(--midnight);box-shadow:3px 3px 0 var(--periwinkle)}
.btn.pop:hover{box-shadow:5px 5px 0 var(--periwinkle);background:var(--solar)}

/* Hero */
.fun-hero{background:radial-gradient(135% 110% at 78% 12%,#6A35B0 0%,var(--bg-3) 38%,#2C1160 72%,var(--bg) 100%)}
.fun-hero h1 em{color:var(--comet)}
.logo-art{right:-4%;top:-2%;width:min(38vw,440px);opacity:.95;animation:drift 9s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-14px) rotate(1deg)}}
.fstar{color:var(--comet)}
.fstar.peri{color:var(--lavender)}

/* Section backgrounds: alternate Midnight and Nebula, never white */
section{background:transparent}
.band-white,.band-soft{background:var(--bg-3);border:none}
.band-soft h2,.band-white h2,.band-soft p,.band-white p{color:var(--ink)}
.band-soft .kicker,.band-white .kicker{color:var(--solar)}
.band{background:var(--bg-3)}
.band-dark{background:var(--bg)}
.proof{background:var(--bg-2);border-block:var(--rule)}
.proof p{color:var(--ink-soft)}
.proof p + p{border-left:var(--rule);border-top-color:var(--line)}
.proof strong{color:var(--comet)}
.pagehead{border-bottom:var(--rule)}

/* Marquee flips to peach for contrast */
.marquee{background:var(--comet)}
.marquee span{color:var(--midnight)}
.marquee .dot{color:var(--nebula)}

/* Text accents */
.statement em{color:var(--comet)}
.scribble::after{opacity:.55}
.scribble.peri::after{background:var(--periwinkle);opacity:.45}

/* Capability cards */
.cap{background:var(--bg-2);border-color:var(--periwinkle);box-shadow:4px 4px 0 var(--periwinkle);color:var(--ink)}
.cap:nth-child(3n){border-right-color:var(--periwinkle)}
.cap h3{color:var(--ink)}
.cap p{color:var(--ink-soft)}
.cap:nth-child(2){background:var(--lavender)}
.cap:nth-child(4){background:var(--solar)}
.cap:nth-child(6){background:var(--periwinkle)}
.cap:nth-child(2) h3,.cap:nth-child(4) h3,.cap:nth-child(6) h3,
.cap:nth-child(2) p,.cap:nth-child(4) p,.cap:nth-child(6) p{color:var(--midnight)}
.cap:hover{box-shadow:7px 7px 0 var(--periwinkle)}

/* Work feed / sechead */
.feature-meta .tag{color:var(--solar)}
.feature h3{color:var(--ink)}
.feature p{color:var(--ink-soft)}
.feature .go{color:var(--comet)}
.feature-media{background:linear-gradient(150deg,var(--bg-2),var(--bg-3))}

/* Client roster: shadows go periwinkle so they read on dark */
.client{box-shadow:5px 5px 0 var(--periwinkle);border-color:var(--periwinkle)}
.client:hover{box-shadow:9px 9px 0 var(--periwinkle)}
.client-photo{border-bottom-color:var(--periwinkle)}
.client.serendipity,.client.mamazul,.client.mythos{border-color:var(--midnight)}
.client.serendipity .client-body h3,.client.mamazul .client-body h3,.client.mythos .client-body h3,
.client.serendipity .client-body p,.client.mamazul .client-body p,.client.mythos .client-body p{color:var(--midnight)}
.client.enchantments{border-color:var(--periwinkle)}
.handles .sticker{text-decoration:none}

/* Embeds */
.embed{background:var(--bg-2);border-color:var(--periwinkle);box-shadow:5px 5px 0 var(--periwinkle)}
.embed-cap{border-top-color:var(--periwinkle)}
.embed-cap .views{color:var(--comet)}
.embed-cap .views small{color:var(--ink);opacity:.75}
.embed .waiting{background:linear-gradient(150deg,var(--bg-3),var(--bg-2));color:var(--ink)}
.scrollbtn{background:var(--bg-2);border-color:var(--periwinkle);color:var(--ink);box-shadow:3px 3px 0 var(--periwinkle)}
.scrollbtn:hover{background:var(--comet);color:var(--midnight)}

/* Reels (portfolio, hosted version) */
.reel-cap{color:var(--ink-soft)}
.reel:hover .reel-media{outline-color:var(--comet)}

/* Founder arch, pull quote, IG grid */
.arch img{border-color:var(--periwinkle)}
.pull blockquote{color:var(--ink)}
.pull cite{color:var(--solar)}
.ig-item{background:var(--bg-2)}
.logos img{filter:grayscale(1) brightness(3);opacity:.7}

/* Interior pages: lists, rows, tiers, forms, contact */
.rulelist,.row{border-color:var(--line)}
.row h3{color:var(--lavender)}
.row p{color:var(--ink-soft)}
.step{border-top-color:var(--periwinkle)}
.step .num{color:var(--solar)}
.step p{color:var(--ink-soft)}
.tier{background:var(--bg-2);border-color:var(--periwinkle);color:var(--ink)}
.tier h3,.tier > p{color:var(--ink)}
.tier .tier-tag{color:var(--solar)}
.tier li{border-top-color:var(--line);color:var(--ink-soft)}
.tier.featured{background:var(--bg-3);border-color:var(--comet)}
.quote blockquote{color:var(--ink)}
.quote cite{color:var(--solar)}
.work-item{background:var(--bg-2);border-color:var(--periwinkle)}
.work-item h3{color:var(--ink)}
.work-item p{color:var(--ink-soft)}
.work-item .stat{color:var(--solar)}
.field label{color:var(--solar)}
.field input,.field select,.field textarea{background:var(--bg-2);color:var(--ink);border-color:var(--line)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--periwinkle)}
.field input::placeholder,.field textarea::placeholder{color:rgba(218,215,255,.5)}
.form-note{color:rgba(218,215,255,.7)}
.form-note a{color:var(--comet)}
.contact-list li{border-top:var(--rule)}
.contact-list .label{color:var(--solar)}
.contact-list a{color:var(--ink)}
.contact-list a:hover{color:var(--comet)}

/* Footer: one shade deeper so it still separates */
.foot{background:#0B031F;border-top:var(--rule)}
.foot .tagline{color:var(--lavender)}

/* Sparkle trail: lighter colors on dark */
.spark{color:var(--comet)}

/* ==========================================================
   Fixes: hero icon sizing, inline logo, new photo blocks
   ========================================================== */
.logo-art{
  width:auto !important;height:min(78vh,640px);right:6% !important;top:50% !important;
  transform:translateY(-50%);opacity:.95;animation:drift2 9s ease-in-out infinite alternate;
}
@keyframes drift2{from{transform:translateY(-50%) rotate(-1deg)}to{transform:translateY(calc(-50% - 12px)) rotate(1deg)}}
@media (max-width:860px){.logo-art{height:min(46vh,380px);right:-6% !important;top:62% !important;opacity:.55}}

.brand .brand-logo{height:46px;width:auto;display:block}
.foot .foot-logo{height:56px;width:auto;--logo-ink:#F2F3F4}
:root{--logo-ink:#F2F3F4}

.photo-tilt{position:relative;transform:rotate(-2deg);transition:transform .35s cubic-bezier(.2,1.4,.4,1)}
.photo-tilt:hover{transform:rotate(0)}
.photo-tilt img{width:100%;border-radius:22px;border:3px solid var(--periwinkle);box-shadow:8px 8px 0 var(--periwinkle);display:block}
.photo-tilt.phone{transform:rotate(2deg);max-width:340px}
.ig-wrap{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;margin-top:2rem}
.ig-wrap .ig{margin-top:0;grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.ig-wrap{grid-template-columns:1fr}.photo-tilt.phone{max-width:240px;margin-inline:auto}}

.cards-bg{position:relative}
.cards-bg::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url("assets/business-cards.jpg") center/cover;opacity:.18;
  filter:saturate(1.2);
}
.cards-bg .wrap{position:relative;z-index:2}

/* ---------- Apply: pricing floor + acknowledgement ---------- */
.floor{position:relative;margin-top:2rem;padding:1.5rem 1.6rem 1.4rem;border:2px solid var(--periwinkle);border-radius:20px;background:var(--bg-2);max-width:640px}
.floor .sticker{position:absolute;top:-.9rem;left:1.2rem}
.floor p{margin:.4rem 0 0;font-size:.95rem}
.floor strong{color:var(--comet)}
.field.check label{display:flex;align-items:flex-start;gap:.7rem;text-transform:none;letter-spacing:0;font-weight:400;font-size:.95rem;color:var(--ink);cursor:pointer}
.field.check input{width:20px;height:20px;margin-top:.15rem;flex:none;accent-color:var(--comet)}
.field.check strong{color:var(--comet)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}


/* ==========================================================
   MOONLIGHT + SOLAR FLARE — light colorway
   ========================================================== */
/* --- Shared light rules for lavender + comet --- */
[data-theme="moonlight"]{
  --ink:#110630;--ink-soft:#2A1655;--logo-ink:#4B1984;
}
[data-theme="moonlight"] body{background:var(--bg);color:var(--ink)}
[data-theme="moonlight"] h1,[data-theme="moonlight"] h2,[data-theme="moonlight"] h3,[data-theme="moonlight"] h4,
[data-theme="moonlight"] h1,[data-theme="moonlight"] h2,[data-theme="moonlight"] h3,[data-theme="moonlight"] h4{color:var(--ink)}
[data-theme="moonlight"] p,[data-theme="moonlight"] .lede{color:var(--ink-soft)}
[data-theme="moonlight"] .kicker,
[data-theme="moonlight"] .band-soft .kicker,
[data-theme="moonlight"] .band-white .kicker{color:var(--nebula)}
[data-theme="moonlight"] .links a{color:var(--ink)}
[data-theme="moonlight"] .links a.active{border-bottom-color:var(--nebula)}
[data-theme="moonlight"] .menu{border-color:var(--nebula);color:var(--nebula)}
[data-theme="moonlight"] .btn{background:var(--nebula);color:#fff;border-color:var(--nebula)}
[data-theme="moonlight"] .btn:hover{background:var(--midnight);border-color:var(--midnight)}
[data-theme="moonlight"] .btn.ghost{background:transparent;color:var(--nebula);border-color:var(--nebula)}
[data-theme="moonlight"] .btn.ghost:hover{background:var(--nebula);color:#fff}
[data-theme="moonlight"] .btn.pop{box-shadow:3px 3px 0 var(--midnight)}
[data-theme="moonlight"] .btn.pop:hover{box-shadow:5px 5px 0 var(--midnight)}
[data-theme="moonlight"] .fun-hero h1 em{color:var(--nebula)}
[data-theme="moonlight"] .statement em{color:var(--nebula)}
[data-theme="moonlight"] .proof strong{color:var(--nebula)}
[data-theme="moonlight"] .proof p{color:var(--ink-soft)}
[data-theme="moonlight"] .marquee{background:var(--nebula)}
[data-theme="moonlight"] .marquee span{color:#fff}
[data-theme="moonlight"] .marquee .dot{color:var(--comet)}
[data-theme="moonlight"] .cap{background:#fff;border-color:var(--midnight);box-shadow:4px 4px 0 var(--midnight)}
[data-theme="moonlight"] .cap:hover{box-shadow:7px 7px 0 var(--midnight)}
[data-theme="moonlight"] .cap h3,[data-theme="moonlight"] .cap p{color:var(--midnight)}
[data-theme="moonlight"] .cap:nth-child(3n){border-right-color:var(--midnight)}
[data-theme="moonlight"] .client{border-color:var(--midnight);box-shadow:5px 5px 0 var(--midnight)}
[data-theme="moonlight"] .client:hover{box-shadow:9px 9px 0 var(--midnight)}
[data-theme="moonlight"] .client-photo{border-bottom-color:var(--midnight)}
[data-theme="moonlight"] .embed{background:#fff;border-color:var(--midnight);box-shadow:5px 5px 0 var(--midnight)}
[data-theme="moonlight"] .embed-cap{border-top-color:var(--midnight)}
[data-theme="moonlight"] .embed-cap .views{color:var(--nebula)}
[data-theme="moonlight"] .embed-cap .views small{color:var(--midnight)}
[data-theme="moonlight"] .scrollbtn{background:#fff;border-color:var(--midnight);color:var(--midnight);box-shadow:3px 3px 0 var(--midnight)}
[data-theme="moonlight"] .feature h3{color:var(--ink)}
[data-theme="moonlight"] .feature p{color:var(--ink-soft)}
[data-theme="moonlight"] .feature-meta .tag,
[data-theme="moonlight"] .feature .go{color:var(--nebula)}
[data-theme="moonlight"] .photo-tilt img,[data-theme="moonlight"] .arch img{border-color:var(--midnight);box-shadow:8px 8px 0 var(--midnight)}
[data-theme="moonlight"] .pull blockquote{color:var(--ink)}
[data-theme="moonlight"] .pull cite{color:var(--nebula)}
[data-theme="moonlight"] .fstar{color:var(--nebula)}
[data-theme="moonlight"] .fstar.peri{color:var(--periwinkle)}
[data-theme="moonlight"] .spark{color:var(--nebula)}
[data-theme="moonlight"] .band-dark{background:var(--midnight)}
[data-theme="moonlight"] .band-dark h2,[data-theme="moonlight"] .band-dark .statement{color:#fff}
[data-theme="moonlight"] .band-dark p{color:var(--lavender)}
[data-theme="moonlight"] .band-dark .statement em{color:var(--comet)}
[data-theme="moonlight"] .foot{background:var(--midnight)}
[data-theme="moonlight"] .foot .foot-logo{--logo-ink:#F2F3F4}
[data-theme="moonlight"] .field input,[data-theme="moonlight"] .field select,[data-theme="moonlight"] .field textarea{background:#fff;color:var(--midnight)}
[data-theme="moonlight"] .field label,[data-theme="moonlight"] .step .num,[data-theme="moonlight"] .contact-list .label{color:var(--nebula)}
[data-theme="moonlight"] .contact-list a{color:var(--midnight)}
[data-theme="moonlight"] .row h3{color:var(--nebula)}
[data-theme="moonlight"] .tier,[data-theme="moonlight"] .work-item{background:#fff;border-color:var(--midnight);color:var(--midnight)}
[data-theme="moonlight"] .tier h3,[data-theme="moonlight"] .tier > p,[data-theme="moonlight"] .tier li,[data-theme="moonlight"] .work-item h3,[data-theme="moonlight"] .work-item p{color:var(--midnight)}
[data-theme="moonlight"] .tier .tier-tag,[data-theme="moonlight"] .work-item .stat{color:var(--nebula)}
[data-theme="moonlight"] .tier.featured{background:var(--nebula);color:#fff}
[data-theme="moonlight"] .tier.featured h3,[data-theme="moonlight"] .tier.featured > p,[data-theme="moonlight"] .tier.featured li{color:#fff}
[data-theme="moonlight"] .tier.featured .tier-tag{color:var(--solar)}
[data-theme="moonlight"] .cards-bg::before{opacity:.22}


[data-theme="moonlight"]{
  --bg:#F2F3F4;          /* Moonlight base */
  --bg-2:#FFFFFF;        /* cards */
  --bg-3:#FFD2B0;        /* Solar Flare bands */
  --line:rgba(75,25,132,.2);
}
[data-theme="moonlight"] .fun-hero{background:radial-gradient(135% 110% at 78% 12%,#FFE6D2 0%,#FFD2B0 34%,#F7F0F1 70%,#F2F3F4 100%)}
[data-theme="moonlight"] .nav{
  background:linear-gradient(90deg,#110630 0%,#2C1160 45%,#4B1984 100%);
  border-bottom:1px solid rgba(255,182,133,.25);
}
[data-theme="moonlight"] .links a{color:#F2F3F4}
[data-theme="moonlight"] .links a:hover{border-bottom-color:var(--comet)}
[data-theme="moonlight"] .links a.active{border-bottom-color:var(--comet)}
[data-theme="moonlight"] .menu{border-color:var(--periwinkle);color:#F2F3F4}
@media (max-width:900px){[data-theme="moonlight"] .links{background:#110630}[data-theme="moonlight"] .links a{border-bottom-color:rgba(166,164,252,.25)}}
[data-theme="moonlight"] .nav .btn.pop{box-shadow:3px 3px 0 var(--periwinkle);border-color:var(--midnight)}
[data-theme="moonlight"] .fun-hero{background:radial-gradient(135% 110% at 78% 0%,#FFE6D2 0%,#FFD2B0 34%,#F7F0F1 70%,#F2F3F4 100%)}

/* Nav brand: the logo icon + name */
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand .brand-icon{height:44px;width:auto;display:block}
.brand .ic-swoosh{fill:#A6A4FC}
.brand .ic-stroke{fill:#A6A4FC;opacity:.55}
.brand .ic-star{fill:#FFB685}
.brand .brand-name{font-family:'Instrument Serif',Georgia,serif;font-size:1.5rem;line-height:1;color:#F2F3F4;letter-spacing:-.01em}
.foot .brand-name{color:#F2F3F4}
@media (max-width:480px){.brand .brand-name{display:none}}
[data-theme="moonlight"] .proof,[data-theme="moonlight"] .agency-proof{background:#FFFFFF}
[data-theme="moonlight"] .band-white,[data-theme="moonlight"] .band-soft,[data-theme="moonlight"] .band{background:#FFD2B0}
[data-theme="moonlight"] .band-white h2,[data-theme="moonlight"] .band-soft h2,[data-theme="moonlight"] .band h2,
[data-theme="moonlight"] .band-white p,[data-theme="moonlight"] .band-soft p,[data-theme="moonlight"] .band p{color:var(--midnight)}
[data-theme="moonlight"] .marquee{background:var(--nebula)}
[data-theme="moonlight"] .marquee span{color:#fff}
[data-theme="moonlight"] .marquee .dot{color:var(--comet)}
[data-theme="moonlight"] .scribble::after{background:var(--comet);opacity:.85}
[data-theme="moonlight"] .sticker.peach{background:var(--comet)}
[data-theme="moonlight"] .btn.pop{background:var(--comet);color:var(--midnight);border-color:var(--midnight);box-shadow:3px 3px 0 var(--midnight)}
[data-theme="moonlight"] .btn.pop:hover{background:var(--solar);box-shadow:5px 5px 0 var(--midnight)}
/* client logo wall: logos were inverted to white for the dark theme */
[data-theme="moonlight"] .client-wall{background:#FFFFFF}
[data-theme="moonlight"] body :is(.client-logo--kolkata-chai,.client-logo--trust-pharmacy,.client-logo--wick-pour) img,
[data-theme="moonlight"] :is(.client-logo--kolkata-chai,.client-logo--trust-pharmacy,.client-logo--wick-pour) img{filter:none}
[data-theme="moonlight"] .enchantments-wordmark{color:var(--midnight)}
[data-theme="moonlight"] .client-logo figcaption,[data-theme="moonlight"] .client-wall .kicker,[data-theme="moonlight"] .client-wall-heading>p{color:#2A1655}
[data-theme="moonlight"] .client-wall h2{color:var(--midnight)}
/* hero ribbon glow reads better without the peach drop-shadow on a peach background */
[data-theme="moonlight"] .fun-hero .comet-head{filter:drop-shadow(0 0 14px rgba(75,25,132,.25))}
[data-theme="moonlight"] .cards-bg::before{opacity:.14}
[data-theme="moonlight"] #applicationStatus[data-error="true"]{color:#4B1984;border-left-color:#4B1984;background:rgba(75,25,132,.06)}


/* ==========================================================
   Site background: Midnight → Nebula gradient (fixed, shows through
   transparent sections). Nav reverted to translucent Midnight.
   ========================================================== */
html{background:#110630}
body{
  background:radial-gradient(120% 70% at 85% 0%,#4B1984 0%,#2C1160 38%,#110630 72%) no-repeat fixed;
}
.fun-hero{background:transparent}
.nav{background:rgba(17,6,48,.72);backdrop-filter:blur(12px);border-bottom:1px solid rgba(166,164,252,.22)}
.brand .brand-star{height:34px;width:34px;display:block;fill:var(--comet);filter:drop-shadow(0 0 10px rgba(255,182,133,.45))}
.brand:hover .brand-star{fill:var(--solar)}
/* horizontal wordmark logo */
.brand .brand-logo-h{height:32px;width:auto;display:block;transition:transform .25s cubic-bezier(.2,1.4,.4,1),opacity .2s ease}
.brand:hover .brand-logo-h{transform:translateY(-1px);opacity:.92}
@media (max-width:900px){.brand .brand-logo-h{height:28px}}
@media (max-width:480px){.brand .brand-logo-h{height:24px}}

/* closing CTA: rotating "maybe it's…" story prompt */
.cta .story-prompt{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:clamp(1.2rem,2.4vw,1.6rem);color:var(--solar);margin:.9rem auto 0;max-width:none}
.cta .story-prompt .rot{display:inline-block;transition:opacity .3s ease,translate .3s ease}
.cta .story-prompt .rot.out{opacity:0;translate:0 8px}
.cta .cta-copy{margin:1rem auto 0;max-width:54ch}
.cta .statement{max-width:24ch}
/* intro heading: second in the hierarchy after the hero h1, so it uses the regular h2 scale */
#brand-intro .statement{font-size:clamp(2rem,4.6vw,3.4rem);max-width:20ch;margin-bottom:1.2rem}
.brand .brand-name{display:block;font-family:'Instrument Serif',Georgia,serif;font-size:1.55rem;line-height:1;color:#F2F3F4;letter-spacing:-.01em}
@media (max-width:480px){.brand .brand-name{display:none}}


/* ==========================================================
   Hero mockup — a Reel that shines
   ========================================================== */
.fun-hero .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4rem);align-items:center;position:relative;z-index:2}
.fun-hero .hero-copy h1{max-width:12ch}
.hero-mock{position:relative;justify-self:center;width:min(100%,460px);aspect-ratio:1/1.15;display:grid;place-items:center}
.mock-glow{position:absolute;inset:8% 10%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,182,133,.42),rgba(166,164,252,.18) 55%,transparent 75%);filter:blur(14px);z-index:0}

/* phone */
.phone{position:relative;z-index:2;width:min(64%,268px);aspect-ratio:9/19;border-radius:40px;background:#0B031F;border:3px solid rgba(218,215,255,.6);box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 0 8px rgba(17,6,48,.6);padding:10px;transform:rotate(-4deg)}
.phone-notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:34%;height:22px;border-radius:999px;background:#0B031F;z-index:3}
.screen{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;background:#1B0B45;color:#fff;font-family:'Poppins',sans-serif}
.screen-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.screen-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(17,6,48,.92) 0%,rgba(17,6,48,.25) 45%,rgba(17,6,48,.35) 100%)}
.screen-top{position:absolute;top:44px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.95rem;z-index:2}
.screen-top .cam{width:20px;height:16px;border:2px solid #fff;border-radius:4px;position:relative}
.screen-top .cam::after{content:"";position:absolute;right:-8px;top:2px;border:5px solid transparent;border-left:7px solid #fff}
.play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:0;height:0;border-left:30px solid rgba(255,255,255,.75);border-top:18px solid transparent;border-bottom:18px solid transparent;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
.rail{position:absolute;right:10px;bottom:118px;display:flex;flex-direction:column;gap:14px;align-items:center;z-index:2}
.rail-item{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.62rem;font-weight:700}
.ico{width:24px;height:24px;display:block;background:#fff;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ico.heart{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.4C.9 8.3 3 5 6.4 5c2 0 3.4 1.1 4.1 2.3C11.2 6.1 12.6 5 14.6 5c3.4 0 5.5 3.3 4 6.6C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");background:#FFB685}
.ico.comment{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.5 3 2 6.8 2 11.5c0 2.3 1.1 4.4 2.9 5.9L4 21l4.6-2.2c1.1.3 2.2.5 3.4.5 5.5 0 10-3.8 10-8.5S17.5 3 12 3z'/%3E%3C/svg%3E")}
.ico.share{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 2L2 10l8 3 3 8 9-19z'/%3E%3C/svg%3E")}
.ico.save{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h14v18l-7-4-7 4V3z'/%3E%3C/svg%3E")}
.screen-meta{position:absolute;left:14px;right:56px;bottom:22px;z-index:2}
.handle{display:flex;align-items:center;gap:8px;font-size:.72rem;margin-bottom:6px}
.avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#FFB685,#A6A4FC);border:1.5px solid #fff;flex:none}
.follow{font-size:.6rem;font-weight:700;border:1.5px solid rgba(255,255,255,.8);border-radius:6px;padding:2px 7px}
.cap{font-size:.7rem;line-height:1.35;margin:0 0 6px;color:#fff;max-width:none}
.audio{font-size:.6rem;margin:0;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:5px;max-width:none}
.note{width:9px;height:9px;border-radius:50%;background:#fff;display:inline-block}

/* floating result badges */
.badge{position:absolute;z-index:3;background:#fff;color:#110630;border:2px solid #110630;border-radius:16px;box-shadow:4px 4px 0 #A6A4FC;padding:.55rem .8rem;font-family:'Poppins',sans-serif;line-height:1.15;display:flex;align-items:center;gap:.6rem;animation:badge-float var(--d,6s) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
.badge small{display:block;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin-top:.15rem}
.badge b{font-size:.78rem;font-weight:700}
.badge .big{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:-.02em;line-height:1;color:#4B1984}
.b-views{top:4%;left:-2%;--d:7s;transform:rotate(-4deg);background:#fff;color:#110630;box-shadow:4px 4px 0 #4B1984;flex-direction:column;align-items:flex-start;gap:.1rem}
.b-views .big{color:#4B1984}
.b-views small{margin:0}
.b-dm{right:-6%;top:26%;max-width:230px;--d:8s;--dl:-2s;transform:rotate(3deg)}
.b-dm b{font-size:.72rem;font-weight:500;line-height:1.3;display:block;min-height:2.6em}
.b-dm small,.b-dm b{transition:opacity .25s ease,translate .25s ease}
.b-dm.swap small,.b-dm.swap b{opacity:0;translate:0 6px}
.b-dm.pop{scale:1.04;transition:scale .3s cubic-bezier(.2,1.4,.4,1)}
.dm-avatar{transition:filter .4s ease}
.dm-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#DAD7FF,#A6A4FC);flex:none;border:2px solid #110630}
.b-followers{left:-4%;bottom:22%;--d:6.5s;--dl:-4s;transform:rotate(2deg);background:#DAD7FF;flex-direction:column;align-items:flex-start;gap:.05rem}
.b-followers b{font-family:'Poppins',sans-serif;font-size:1.2rem;font-weight:700;letter-spacing:-.01em;color:#4B1984}
.b-irl{right:0;bottom:6%;--d:7.5s;--dl:-1s;transform:rotate(-2deg);background:#A6A4FC;max-width:240px;gap:.55rem}
.b-irl b{display:block;font-size:.8rem;font-weight:700;line-height:1.25;min-height:2.5em}
.b-irl small{margin-top:0;margin-bottom:.15rem}
.irl-ico{font-size:1.45rem;line-height:1;flex:none;display:inline-block;transform-origin:50% 80%;animation:irl-bounce 2.2s ease-in-out infinite}
@keyframes irl-bounce{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-3px) rotate(8deg)}}
.b-irl small,.b-irl b{transition:opacity .25s ease,translate .25s ease}
.b-irl.swap small,.b-irl.swap b{opacity:0;translate:0 6px}
.b-irl.swap .irl-ico{animation:none;transform:scale(0) rotate(-40deg);transition:transform .22s ease-in}
.b-irl.pop .irl-ico{animation:irl-land .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes irl-land{0%{transform:scale(0) rotate(-40deg)}100%{transform:scale(1) rotate(0)}}
.b-irl.pop{scale:1.04;transition:scale .3s cubic-bezier(.2,1.4,.4,1)}
@keyframes badge-float{from{translate:0 0}to{translate:0 -10px}}

@media (max-width:900px){
  .fun-hero .hero-grid{grid-template-columns:1fr}
  .hero-mock{width:min(100%,380px);margin-top:1rem}
  .b-dm{max-width:190px;right:-2%}
  .b-irl{max-width:200px}
}
@media (max-width:520px){
  .b-dm,.b-irl{display:none}
  .phone{width:58%}
}
@media (prefers-reduced-motion:reduce){.badge{animation:none}}

/* live-number feedback + caption box fix */
.hero-mock [data-count]{display:inline-block;font-variant-numeric:tabular-nums}
.hero-mock .ico.heart.beat{transform:scale(1.25);transition:transform .12s ease-out}
.hero-mock .ico.heart{transition:transform .25s ease-in}
.screen p,.screen-meta p{background:none;padding:0;border:0;box-shadow:none;text-shadow:0 1px 3px rgba(0,0,0,.5)}
/* number and unit are split so the "M"/"K" stays put while the digits roll */
.hero-mock [data-count] .num{display:inline-block;text-align:right;font-variant-numeric:tabular-nums}
.b-views .big .num{min-width:4ch}

/* ==========================================================
   Shine CTA — the peach button that actually shines.
   Reserved for the nav CTA and the apply form’s submit; every other
   button stays off the peach so this one keeps its signature.
   ========================================================== */
:is(.nav .links .btn.pop,.btn.shine-cta){
  position:relative;isolation:isolate;overflow:visible;
  background:linear-gradient(115deg,#FFB685 0%,#FFC89C 35%,#FFE3CB 50%,#FFC89C 65%,#FFB685 100%);
  background-size:220% 100%;
  border:2px solid var(--midnight);color:var(--midnight);font-weight:600;
  box-shadow:3px 3px 0 var(--midnight),0 0 18px rgba(255,182,133,.55),0 0 40px rgba(255,182,133,.25);
  animation:cta-breathe 2.6s ease-in-out infinite,cta-glow 2.6s ease-in-out infinite;
  transition:transform .2s cubic-bezier(.2,1.4,.4,1),box-shadow .2s;
}
/* sheen that sweeps left → right, clipped to the pill */
:is(.nav .links .btn.pop,.btn.shine-cta)::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%);
  background-size:250% 100%;background-position:100% 0;
  animation:cta-sweep 2.8s cubic-bezier(.4,0,.2,1) infinite;
}
:is(.nav .links .btn.pop,.btn.shine-cta):hover{
  transform:translate(-1px,-2px) scale(1.05);
  box-shadow:5px 5px 0 var(--midnight),0 0 26px rgba(255,182,133,.95),0 0 60px rgba(255,182,133,.5);
  animation-duration:1.2s,1.2s;
}
:is(.nav .links .btn.pop,.btn.shine-cta):hover::before{animation-duration:1.1s}
@keyframes cta-sweep{0%{background-position:100% 0}45%,100%{background-position:0 0}}
@keyframes cta-breathe{0%,100%{background-position:0 0}50%{background-position:100% 0}}
@keyframes cta-glow{
  0%,100%{box-shadow:3px 3px 0 var(--midnight),0 0 14px rgba(255,182,133,.45),0 0 32px rgba(255,182,133,.18)}
  50%{box-shadow:3px 3px 0 var(--midnight),0 0 24px rgba(255,182,133,.85),0 0 54px rgba(255,182,133,.4)}
}
/* sparkles (injected by script.js) */
:is(.nav .links .btn.pop,.btn.shine-cta) .spark{
  position:absolute;left:var(--x);top:var(--y);width:var(--s,10px);height:var(--s,10px);
  pointer-events:none;z-index:2;background:#fff;
  filter:drop-shadow(0 0 4px #FFB685) drop-shadow(0 0 8px rgba(255,255,255,.8));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12 8 16 12 24 12 16 12 12 16 12 24 12 16 8 12 0 12 8 12 12 8 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12 8 16 12 24 12 16 12 12 16 12 24 12 16 8 12 0 12 8 12 12 8 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:spark-twinkle var(--t,2.2s) ease-in-out infinite;animation-delay:var(--dl,0s);
}
:is(.nav .links .btn.pop,.btn.shine-cta):hover .spark{animation-duration:.75s}
@keyframes spark-twinkle{0%,100%{opacity:0;transform:scale(.15) rotate(0deg)}45%{opacity:1;transform:scale(1.15) rotate(60deg)}60%{opacity:1;transform:scale(.9) rotate(90deg)}}
@media (prefers-reduced-motion:reduce){
  :is(.nav .links .btn.pop,.btn.shine-cta),:is(.nav .links .btn.pop,.btn.shine-cta)::before,:is(.nav .links .btn.pop,.btn.shine-cta) .spark{animation:none}
  :is(.nav .links .btn.pop,.btn.shine-cta) .spark{opacity:.9;transform:none}
}

/* ==========================================================
   Hero CTA — "Let’s shoot for something big" launches shooting stars
   ========================================================== */
/* secondary treatment: outlined on the dark hero, so the peach nav button stays the primary */
.btn.pop.launch{
  display:inline-flex;align-items:center;gap:.55rem;position:relative;
  font-weight:500;padding-right:1.25rem;
  background:transparent;color:#F2F3F4;border:2px solid var(--periwinkle);box-shadow:3px 3px 0 rgba(166,164,252,.35);
  transition:transform .2s cubic-bezier(.2,1.4,.4,1),background .18s,color .18s,border-color .18s,box-shadow .2s,translate .15s;
}
.btn.pop.launch:hover{background:var(--periwinkle);color:var(--midnight);border-color:var(--periwinkle);box-shadow:5px 5px 0 rgba(166,164,252,.45)}
.btn.pop.launch .launch-star{
  width:1.05em;height:1.05em;flex:none;display:inline-grid;place-items:center;
  transform-origin:50% 60%;animation:launch-wiggle 2.4s ease-in-out infinite;
}
.btn.pop.launch .launch-star svg{width:100%;height:100%;fill:var(--comet);display:block;transition:fill .18s}
.btn.pop.launch:hover .launch-star svg{fill:var(--midnight)}
@keyframes launch-wiggle{0%,100%{transform:rotate(-12deg) translateY(0)}50%{transform:rotate(14deg) translateY(-2px)}}

/* the little star pops off the button, then a new one fades back in */
.btn.pop.launch.fired .launch-star{animation:launch-relaunch .75s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes launch-relaunch{
  0%{transform:scale(1) translate(0,0);opacity:1}
  18%{transform:scale(.2) translate(14px,-16px);opacity:0}
  55%{transform:scale(0) translate(0,4px);opacity:0}
  100%{transform:scale(1) translate(0,0);opacity:1}
}

/* hover = charging: shakes harder, glows hotter, sparks fly */
.btn.pop.launch.charging{
  background:var(--periwinkle);color:var(--midnight);
  box-shadow:5px 5px 0 rgba(166,164,252,.45),0 0 22px rgba(166,164,252,.8),0 0 56px rgba(166,164,252,.4);
  animation:launch-charge .28s linear infinite;
}
.btn.pop.launch.charging .launch-star{animation:launch-wiggle .32s ease-in-out infinite}
@keyframes launch-charge{
  0%{translate:0 0}20%{translate:-1px 1px}40%{translate:1px -1px}60%{translate:-1px -1px}80%{translate:1px 1px}100%{translate:0 0}
}

/* click = liftoff: button rockets up while the hero lights up */
.btn.pop.launch.liftoff{
  animation:launch-liftoff .7s cubic-bezier(.5,0,.8,.2) forwards;
  pointer-events:none;
}
@keyframes launch-liftoff{
  0%{translate:0 0;rotate:0deg;scale:1;opacity:1}
  25%{translate:0 6px;rotate:-2deg;scale:1.06}
  100%{translate:120px -260px;rotate:-14deg;scale:.6;opacity:0}
}

/* shooting stars fired across the hero (created by script.js) */
.shooting-star{
  position:absolute;z-index:5;pointer-events:none;
  width:var(--len,150px);height:3px;margin-top:-1.5px;border-radius:2px;
  transform-origin:100% 50%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,210,176,0) 12%,rgba(255,210,176,.75) 65%,#fff 100%);
  filter:drop-shadow(0 0 6px rgba(255,182,133,.95));
}
.shooting-star::after{
  content:"";position:absolute;top:50%;right:calc(var(--size,14px) * -.45);
  width:var(--size,14px);height:var(--size,14px);translate:0 -50%;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12 8 16 12 24 12 16 12 12 16 12 24 12 16 8 12 0 12 8 12 12 8 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12 8 16 12 24 12 16 12 12 16 12 24 12 16 8 12 0 12 8 12 12 8 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.shooting-star.peach{background:linear-gradient(90deg,transparent 0%,rgba(255,182,133,0) 12%,rgba(255,182,133,.8) 65%,#FFD2B0 100%)}
.shooting-star.peach::after{background:#FFD2B0}
.shooting-star.peri{background:linear-gradient(90deg,transparent 0%,rgba(166,164,252,0) 12%,rgba(166,164,252,.8) 65%,#DAD7FF 100%);filter:drop-shadow(0 0 6px rgba(166,164,252,.95))}
.shooting-star.peri::after{background:#DAD7FF}

.hero-flash{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),rgba(255,236,220,.85) 0%,rgba(255,182,133,.35) 22%,rgba(166,164,252,.12) 45%,transparent 65%);
  animation:hero-flash .8s ease-out forwards;
}
@keyframes hero-flash{0%{opacity:0;scale:.6}15%{opacity:1;scale:1}100%{opacity:0;scale:1.6}}

@media (prefers-reduced-motion:reduce){
  .btn.pop.launch .launch-star,.btn.pop.launch.charging,.btn.pop.launch.liftoff{animation:none}
}

/* ==========================================================
   SERVICES — "Where do you want to shine?" accordion
   Native <details> so it works without JS; script.js adds the
   height animation and swaps the plus into an x.
   ========================================================== */
.shine-list{margin-top:clamp(2rem,5vw,3.25rem);border-top:1px solid var(--line)}
.shine{border-bottom:1px solid var(--line)}

.shine > summary{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(1rem,4vw,2.5rem);
  list-style:none;cursor:pointer;
  padding-block:clamp(1.1rem,2.4vw,1.65rem);
  font-family:var(--serif);font-size:clamp(1.4rem,3.2vw,2.2rem);line-height:1.15;
  letter-spacing:-.01em;color:var(--ink);
  transition:color .18s ease;
}
.shine > summary::-webkit-details-marker{display:none}
.shine > summary::marker{content:""}
.shine > summary:hover,.shine[open] > summary{color:var(--nebula)}
.shine > summary:focus-visible{outline:3px solid var(--comet);outline-offset:4px;border-radius:8px}
.shine-title{flex:1 1 auto}

/* the plus */
.shine-plus{
  position:relative;flex:0 0 auto;
  width:clamp(2.1rem,4.4vw,2.6rem);aspect-ratio:1;border-radius:50%;
  border:1.5px solid var(--nebula);
  transition:background .22s ease,rotate .32s cubic-bezier(.2,1.4,.4,1),scale .2s ease;
}
.shine > summary:hover .shine-plus{scale:1.06}
.shine-plus::before,.shine-plus::after{
  content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  background:var(--nebula);border-radius:2px;transition:background .22s ease;
}
.shine-plus::before{width:44%;height:1.6px}
.shine-plus::after{width:1.6px;height:44%}
.shine[open] .shine-plus{background:var(--nebula);rotate:135deg}
.shine[open] .shine-plus::before,.shine[open] .shine-plus::after{background:var(--bg-3)}

/* the drop-down */
.shine-body{overflow:hidden}
.shine-inner{padding:0 0 clamp(1.3rem,2.8vw,2rem);max-width:60ch}
.shine-inner p{color:var(--ink-soft);font-size:1.02rem;margin:0 0 1.35rem}
.shine-inner .btn{font-size:.85rem;padding:.6rem 1.3rem}

@media (max-width:520px){
  .shine-inner p{font-size:.96rem}
}

/* Package cards: the one-line promise + "what's included" label */
.tier-line{
  font-family:var(--sans);font-weight:600;font-size:.88rem;line-height:1.35;
  color:var(--nebula);margin:0 0 .85rem;max-width:none;
}
.tier.featured .tier-line{color:var(--comet)}
.tier-inc{
  font-family:var(--sans);font-weight:700;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;margin:0 0 .35rem;opacity:.75;max-width:none;
}

/* ==========================================================
   .shine-word — a word that actually shines: a highlight sweeps
   through the letters, with a soft glow and two twinkling sparks.
   Used on the homepage hero and the services hero. The element
   selector keeps it ahead of .hero-line{display:block}.
   ========================================================== */
em.shine-word{
  display:inline-block;position:relative;
  background:linear-gradient(100deg,#FFB685 0%,#FFB685 38%,#FFF4EA 50%,#FFB685 62%,#FFB685 100%);
  background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 16px rgba(255,182,133,.45));
  animation:shine-text 3.6s ease-in-out infinite;
  padding-right:.08em; /* room for the italic overhang so the glyphs don't clip */
}
@keyframes shine-text{0%,12%{background-position:100% 0}62%,100%{background-position:0 0}}
em.shine-word::before,
em.shine-word::after{
  content:"";position:absolute;background:#fff;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12 8 16 12 24 12 16 12 12 16 12 24 12 16 8 12 0 12 8 12 12 8 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12 8 16 12 24 12 16 12 12 16 12 24 12 16 8 12 0 12 8 12 12 8 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:shine-spark 3.6s ease-in-out infinite;
}
em.shine-word::before{width:.22em;height:.22em;top:.02em;right:-.06em}
em.shine-word::after{width:.14em;height:.14em;top:.5em;right:-.28em;animation-delay:-1.4s}
@keyframes shine-spark{0%,100%{opacity:0;transform:scale(.2) rotate(0deg)}40%{opacity:1;transform:scale(1) rotate(45deg)}55%{opacity:.9;transform:scale(.85) rotate(70deg)}}
@media (prefers-reduced-motion:reduce){
  em.shine-word,em.shine-word::before,em.shine-word::after{animation:none}
  em.shine-word::before,em.shine-word::after{opacity:.9;transform:none}
}

/* ==========================================================
   Secondary buttons: off the peach
   Peach reads too close to the gold in the logo, so it is now
   reserved for the shine CTA above. Everything else that used to
   be filled peach is lilac, which holds up on both the light
   sections and the dark closing bands.
   ========================================================== */
.btn.light{background:var(--periwinkle);border-color:var(--periwinkle);color:var(--midnight)}
.btn.light:hover{background:var(--lavender);border-color:var(--lavender);color:var(--midnight)}

/* .pop keeps its sticker shadow, in the accent instead of peach */
.btn.pop{
  background:var(--periwinkle);color:var(--midnight);
  border-color:var(--nebula);box-shadow:3px 3px 0 var(--nebula);
}
.btn.pop:hover{background:var(--lavender);border-color:var(--nebula);box-shadow:5px 5px 0 var(--nebula)}

/* ==========================================================
   Stage for the shooting stars fired by a .launch button.
   The hero has its own; this is for the apply form.
   ========================================================== */
.stars-stage{position:relative;overflow:hidden}

/* the shine CTA, while it charges: same shake as the hero's launch button */
.btn.shine-cta{position:relative;isolation:isolate;overflow:visible;cursor:pointer;font-size:.9rem}
.btn.shine-cta.charging{animation:launch-charge .28s linear infinite,cta-glow 1.2s ease-in-out infinite}
.btn.shine-cta[disabled]{opacity:.75;cursor:default;animation:none}
.btn.shine-cta[disabled]::before,.btn.shine-cta[disabled] .spark{animation-play-state:paused}