/* Mari's House v2. Palette and type carried over from v1. */
:root{
  --coral:#F2705F;--coral-bg:#EC7762;--coral-glow:#F09985;--coral-d:#D9553F;
  --cream:#FFF6EA;--cream2:#FDEBD6;--blue:#3BA4E8;--blue-d:#1F7FC2;--ink:#3A2C2A;
  --lav:#B9A3E3;--lav-d:#7B68BF;--night:#2B2550;--sun:#F5A623;
  --shadow:0 10px 30px rgba(160,60,40,.15),0 3px 8px rgba(160,60,40,.08);
  --r:28px;--nav-h:64px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Nunito',system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.65;font-size:18px;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Fredoka',sans-serif;line-height:1.15;margin:0 0 .5em}
a{color:var(--blue-d)}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.center{text-align:center}
.srOnly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ---------- parallax background ---------- */
.bgLayers{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bgLayer{position:absolute;left:0;right:0;top:0;height:calc(100% + 1200px);background-repeat:repeat;will-change:transform}
.bgDots{background-image:url(../img/bg/dots.svg);background-size:640px}
.bgStars{background-image:url(../img/bg/stars.svg);background-size:900px;opacity:.7}
.bgClouds{background-image:url(../img/bg/clouds.svg);background-size:1400px 1100px;opacity:.9}

/* ---------- nav ---------- */
nav.top{position:fixed;z-index:30;top:12px;left:50%;transform:translateX(-50%);width:min(1240px,calc(100% - 24px));height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 10px 0 14px;background:rgba(255,246,234,.94);backdrop-filter:blur(8px);border-radius:999px;box-shadow:0 8px 24px rgba(140,50,30,.16)}
.brand{display:flex;align-items:center;gap:10px;font:600 1.35rem 'Fredoka';color:var(--coral-d);text-decoration:none;white-space:nowrap}
.brand img{width:40px;height:40px;border-radius:50%;background:var(--cream2)}
nav.top ul{list-style:none;display:flex;align-items:center;gap:2px;margin:0;padding:0}
nav.top ul a{display:block;color:var(--ink);text-decoration:none;font-weight:800;font-size:.92rem;padding:8px 12px;border-radius:999px;white-space:nowrap}
nav.top ul a:hover{background:var(--cream2);color:var(--coral-d)}
nav.top ul a.navJoin{background:var(--coral);color:#fff;margin-left:4px}
nav.top ul a.navJoin:hover{background:var(--coral-d);color:#fff}
.menuBtn{display:none;width:46px;height:46px;border:0;border-radius:50%;background:var(--coral);cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menuBtn span{display:block;width:20px;height:3px;border-radius:3px;background:#fff;transition:transform .25s,opacity .25s}
.menuBtn[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menuBtn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menuBtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 1.1rem 'Fredoka';text-decoration:none;padding:14px 28px;border:0;border-radius:999px;background:var(--cream);color:var(--coral-d);box-shadow:0 6px 0 rgba(0,0,0,.12),var(--shadow);transition:translate .2s;cursor:pointer}
.btn:hover{translate:0 -2px}
.btn-blue{background:var(--blue);color:#fff}
.btn-ghost{background:transparent;border:3px solid var(--coral);color:var(--coral-d);box-shadow:none}
.btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;min-height:max(100svh,820px);background:radial-gradient(1100px 700px at 30% 160px,var(--coral-glow) 0%,rgba(240,153,133,0) 70%),var(--coral-bg)}
.heroSky{position:absolute;inset:0;pointer-events:none}
.heroClouds{position:absolute;left:-10%;right:-10%;background:url(../img/bg/clouds.svg) repeat-x}
.heroClouds--far{top:4%;height:70%;background-size:1100px 860px;opacity:.28}
.heroClouds--near{top:22%;height:70%;background-size:1600px 1250px;background-position:400px 0;opacity:.45}
.sparkle{position:absolute;left:var(--x);top:var(--y);width:22px;height:22px;background:#FFF6EA;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:twinkle 5s ease-in-out var(--d) infinite;opacity:.5}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:.9;transform:scale(1.1)}}
.heroLogoWrap{position:relative;z-index:3;max-width:1300px;margin:0 auto;padding:calc(var(--nav-h) + 22px) 4vw 0}
.heroCopy{width:min(450px,36vw);text-align:center}
.heroLogo{margin:-14px 0 -18px}
.heroLogo img{display:block;width:100%;height:auto;-webkit-mask-image:radial-gradient(ellipse 50% 50% at center,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at center,#000 55%,transparent 100%)}
.heroTag{font:500 clamp(1.15rem,1.9vw,1.55rem)/1.35 'Fredoka';color:var(--cream);margin:4px auto 22px;max-width:520px;text-shadow:0 2px 10px rgba(160,60,40,.25)}
.heroGround{position:absolute;z-index:2;left:0;right:0;bottom:0;pointer-events:none}
.heroCast{display:block;position:relative;z-index:1;width:min(1180px,88vw);height:auto;margin:0 auto -54px;transform-origin:50% 100%}
.heroHill{display:block;width:100%;height:110px}

/* ---------- floating Mari ---------- */
.buddy{position:fixed;left:0;top:0;z-index:20;width:76px;height:auto;pointer-events:none;opacity:0;transition:opacity .7s ease;will-change:transform;filter:drop-shadow(0 10px 12px rgba(80,40,60,.22))}
.buddy.is-on{opacity:.96}
@media (max-width:700px){.buddy{width:50px}.buddy.is-on{opacity:.9}}
@media (prefers-reduced-motion:reduce){.buddy{display:none}}

/* ---------- hero: cycling backgrounds (family lineup, then the pictures) ---------- */
.hero--slides{background:var(--coral-bg);min-height:max(100svh,820px)}
.heroScene{position:absolute;inset:-12px;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease-in-out;background:var(--top,#EC7762);will-change:opacity}
.slide.is-on{opacity:1;z-index:2}
.slide.is-prev{opacity:1;z-index:1;transition:none}
.slideImg{position:absolute;left:0;top:-3%;width:100%;height:106%;max-width:none;object-fit:cover;object-position:var(--pos,50% 50%)}
.slide--flip .slideImg{transform:scaleX(-1)}
/* the slow zoom keeps running while a picture fades out, so it never jumps back to full size mid-fade */
.slide.is-on .slideImg,.slide.is-prev .slideImg{animation:kenburns 8s linear both;will-change:transform}
.slide--flip.is-on .slideImg,.slide--flip.is-prev .slideImg{animation-name:kenburnsFlip}
@keyframes kenburns{from{transform:scale(1.05)}to{transform:scale(1)}}
@keyframes kenburnsFlip{from{transform:scaleX(-1) scale(1.05)}to{transform:scaleX(-1) scale(1)}}
.slide--family{background:linear-gradient(0deg,var(--cream) 0 22px,transparent 22px),radial-gradient(1100px 700px at 30% 160px,var(--coral-glow) 0%,rgba(240,153,133,0) 70%),var(--coral-bg)}
/* same framing as the original header: centred, standing on the hill; only shrinks on shorter/narrower screens so the kids stay below the buttons */
.slide--family .heroCast{position:absolute;left:0;right:0;bottom:98px;margin:0 auto;width:min(1180px,88vw,calc((max(100svh,820px) - 615px) * 4.1))}
.heroShade{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity 1.2s ease;background:linear-gradient(90deg,rgba(120,50,60,.42) 0%,rgba(120,50,60,.18) 38%,rgba(120,50,60,0) 58%),linear-gradient(180deg,rgba(120,50,60,.2) 0%,rgba(120,50,60,0) 22%)}
.hero.on-family .heroShade,.hero.on-landing .heroShade{opacity:0}
/* ---- logo landing (shown once): v1-style big centred logo, then it glides into the corner ---- */
.slide--landing{background:radial-gradient(1100px 700px at 50% 220px,var(--coral-glow) 0%,rgba(240,153,133,0) 70%),var(--coral-bg)}
.hero--slides .heroLogo{position:relative}
.hero--slides .heroLogo .logoFull{position:absolute;left:0;top:0;width:100%;height:100%;filter:none;-webkit-mask-image:radial-gradient(ellipse 50% 50% at center,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at center,#000 55%,transparent 100%);opacity:0;transition:opacity 1.2s ease-in-out}
.logoCut{transition:opacity 1.2s ease-in-out}
.hero.on-landing .logoFull{opacity:1}
.hero.on-landing .logoCut{opacity:0}
.logoMove{transform-origin:0 0}
.hero.is-handoff .logoMove,.hero.is-handoff .copyMove{transition:transform 1.2s cubic-bezier(.65,0,.35,1)}
.hero--slides .heroLogoWrap{padding-top:calc(var(--nav-h) + 22px)}
.hero--slides .heroCopy{width:min(450px,36vw)}
.hero--slides .heroLogo{margin:-14px 0 -18px}
.hero--slides .heroLogo img{-webkit-mask-image:none;mask-image:none;filter:drop-shadow(0 12px 22px rgba(110,40,50,.38))}
.hero--slides .heroTag{text-shadow:0 2px 14px rgba(70,25,35,.65),0 1px 2px rgba(70,25,35,.45)}
.heroHill--scene{position:absolute;z-index:3;left:0;right:0;bottom:-1px}
/* the family slide has its own hill behind the characters (like the original header), so the shared
   hill on top steps aside once the family has fully faded in, and comes straight back when it leaves */
.heroHill--family{position:absolute;left:12px;bottom:11px;width:calc(100% - 24px)}
.slide--family .heroCast{z-index:1}
.hero.on-family .heroHill--scene{visibility:hidden;transition:visibility 0s 1.2s}
.heroDots{position:absolute;z-index:4;right:clamp(16px,4vw,48px);bottom:46px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:rgba(43,30,40,.28);backdrop-filter:blur(6px)}
.heroDot{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:rgba(255,246,234,.5);cursor:pointer;transition:background .3s,transform .3s}
.heroDot[aria-current="true"]{background:var(--cream);transform:scale(1.3)}
.heroPause{position:relative;width:26px;height:26px;margin-left:4px;padding:0;border:0;border-radius:50%;background:var(--cream);cursor:pointer}
.heroPause span,.heroPause span::after{position:absolute;top:8px;width:3px;height:10px;background:var(--coral-d);border-radius:1px}
.heroPause span{left:9px}.heroPause span::after{content:"";top:0;left:5px}
.heroPause[aria-pressed="true"] span{left:10px;top:7px;width:0;height:0;background:none;border-left:9px solid var(--coral-d);border-top:6px solid transparent;border-bottom:6px solid transparent;border-radius:0}
.heroPause[aria-pressed="true"] span::after{display:none}

/* ---------- tape ---------- */
.tape{position:relative;z-index:4;background:var(--coral-d);color:var(--cream);transform:rotate(-1.6deg);margin:-34px -2% 0;padding:12px 0;overflow:hidden;box-shadow:0 8px 20px rgba(140,50,30,.2)}
.tapeTrack{display:flex;width:max-content;animation:tape 70s linear infinite;font:600 1.15rem 'Fredoka';letter-spacing:.06em;white-space:nowrap}
@keyframes tape{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
main{position:relative;z-index:5;overflow-x:clip}
.section{padding:100px 0;position:relative}
.section.alt{background:rgba(253,235,214,.6)}
.title{font-size:clamp(2.2rem,5vw,3.4rem);color:var(--coral-d);text-align:center;margin-bottom:.35em}
.title::after{content:"";display:block;width:110px;height:14px;margin:12px auto 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 14'%3E%3Cpath d='M3 9c9-8 17-8 26 0s17 8 26 0 17-8 26 0 17 8 26 0' fill='none' stroke='%233BA4E8' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain}
.title--light{color:var(--cream);text-shadow:0 2px 12px rgba(60,30,60,.2)}
.title--light::after{filter:brightness(0) invert(1);opacity:.85}
.lead{font-size:1.2rem;max-width:780px}
.lead.center{margin:0 auto 46px}
.hl{color:var(--coral);font-weight:800}
.kicker{text-align:center;font:600 .95rem 'Fredoka';letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px;color:var(--cream);opacity:.9}

/* ---------- watch ---------- */
.watchGrid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:22px;margin-bottom:34px}
.videoCard{position:relative;display:block;padding:0;border:6px solid #fff;border-radius:var(--r);overflow:hidden;cursor:pointer;background:var(--cream2);box-shadow:var(--shadow);aspect-ratio:16/9;font:inherit;color:inherit;text-align:left}
.videoCard--main{grid-row:1/3;aspect-ratio:auto}
.videoCard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.videoCard:hover img{transform:scale(1.05)}
.play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--blue);border:4px solid var(--cream);box-shadow:0 8px 20px rgba(0,0,0,.25);transition:transform .25s}
.play::after{content:"";position:absolute;left:29px;top:21px;border-left:24px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent}
.videoCard:not(.videoCard--main) .play{transform:scale(.7)}
.videoCard:hover .play{transform:scale(1.08)}
.videoCard:not(.videoCard--main):hover .play{transform:scale(.8)}
.videoTitle{position:absolute;left:14px;bottom:14px;background:var(--cream);color:var(--ink);font:600 1.05rem 'Fredoka';padding:8px 16px;border-radius:999px;box-shadow:0 4px 0 rgba(0,0,0,.1)}
.videoTitle small{font:800 .78rem 'Nunito';color:var(--coral-d);margin-left:6px;text-transform:uppercase;letter-spacing:.04em}
.videoCard--main .videoTitle{font-size:1.3rem;left:20px;bottom:20px;padding:10px 20px}
.videoPoster{position:absolute;inset:0;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:inherit;text-align:left}
.videoNote{position:absolute;color:var(--ink);inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--cream);text-align:center;padding:20px}
.videoNote strong{font:600 1.8rem 'Fredoka';color:var(--coral-d)}
.videoCard::after{content:"Coming soon! Mari is getting this one ready.";position:absolute;left:12%;right:12%;top:50%;transform:translateY(-50%) scale(.85);background:var(--cream);color:var(--coral-d);font:600 1.05rem/1.3 'Fredoka';text-align:center;padding:14px 18px;border-radius:22px;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.videoCard--main::after{display:none}
.videoCard.is-soon::after{opacity:1;transform:translateY(-50%) scale(1)}
.videoCard.is-soon .play{opacity:0}

/* ---------- about rows ---------- */
.row{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;margin:0 0 70px}
.row.is-reverse .rowMedia{order:2}
.rowMedia{position:relative;border-radius:34px;overflow:hidden;border:7px solid #fff;box-shadow:var(--shadow);aspect-ratio:16/10;transform:rotate(-1.2deg);background:var(--cream2)}
.row.is-reverse .rowMedia{transform:rotate(1.2deg)}
.rowMedia img{position:absolute;left:0;top:0;width:100%;height:116%;object-fit:cover}
.rowNum{position:absolute;left:16px;top:14px;width:54px;height:54px;border-radius:50%;background:var(--coral);color:#fff;font:600 1.25rem 'Fredoka';display:grid;place-items:center;border:4px solid var(--cream);box-shadow:0 6px 14px rgba(0,0,0,.18)}
.rowText h3{font-size:clamp(1.7rem,3vw,2.3rem);color:var(--blue-d)}
.rowText p{font-size:1.15rem;margin:0}

/* ---------- family ---------- */
.famGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px}
.famCard{position:relative;background:#fff;border-radius:30px;overflow:hidden;box-shadow:var(--shadow);padding:0 22px 24px;cursor:pointer;transition:translate .25s,box-shadow .25s}
.famCard:hover{translate:0 -6px;box-shadow:0 18px 40px rgba(160,60,40,.22)}
.famArt{height:290px;margin:0 -22px 18px;display:flex;align-items:flex-end;justify-content:center;gap:4px;padding:18px 10px 0;background:radial-gradient(circle at 50% 118%,rgba(255,255,255,.4) 0 42%,transparent 43%),var(--c)}
.famArt img{max-height:262px;width:auto;max-width:92%;object-fit:contain;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.famCard:hover .famArt img{transform:translateY(-8px) rotate(-2deg)}
.famArt--pair img{max-height:150px;max-width:56%}
.famArt--pair img+img{max-height:120px;max-width:38%}
.famCard small{display:block;font-weight:800;color:var(--coral-d);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em;font-size:.8rem}
.famCard h3{font-size:1.5rem;color:var(--blue-d);margin-bottom:.3em}
.famCard p{margin:0;font-size:1rem}
.cig{display:inline-flex;align-items:center;margin-top:14px;font:800 .9rem 'Nunito';color:var(--coral-d);background:var(--cream);padding:7px 16px;border-radius:999px;border:0;cursor:pointer}
.cig:hover{background:var(--blue);color:#fff}

/* ---------- imagination ---------- */
.imagine{position:relative;margin:40px clamp(8px,2vw,28px);border-radius:48px;overflow:hidden;padding:90px 0 70px;background:radial-gradient(900px 500px at 80% 0,rgba(255,200,220,.55),transparent 70%),linear-gradient(180deg,#C6A9E6 0%,#9C86D8 60%,#8A78CF 100%);color:var(--cream)}
.imagine .lead{color:var(--cream)}
.imagineHead .lead.center{margin-bottom:40px}
.imagineTrack{display:flex;gap:34px;width:max-content;padding:0 6vw}
.dream{flex:none;width:min(66vw,820px);margin:0}
.dreamImg{position:relative;aspect-ratio:16/9;border-radius:32px;overflow:hidden;border:6px solid rgba(255,246,234,.9);box-shadow:0 18px 40px rgba(50,30,90,.3)}
.dreamImg img{position:absolute;top:0;left:0;height:100%;width:112%;max-width:none;object-fit:cover}
.dream figcaption{padding:16px 8px 0;font-size:1.1rem}
.dream figcaption b{display:block;font:600 1.6rem 'Fredoka'}

/* ---------- bedtime story ---------- */
.story{position:relative;background:radial-gradient(800px 500px at 20% 10%,rgba(120,100,200,.35),transparent 70%),linear-gradient(180deg,#3A3170,var(--night));color:var(--cream)}
.story::before{content:"";position:absolute;inset:0;background:url(../img/bg/stars.svg) repeat;background-size:700px;opacity:.5;pointer-events:none}
.storyPin{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + 24px) 0 24px}
.storyHead .title{margin-bottom:.1em}
.storyStage{width:min(1040px,92vw,calc((100vh - 390px) * 1.7778));min-width:min(92vw,560px);margin:0 auto}
.storyFrames{position:relative;aspect-ratio:16/9;border-radius:30px;overflow:hidden;border:6px solid var(--cream);box-shadow:0 24px 60px rgba(10,5,40,.5);background:#1d1838}
.storyFrames img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
.storyFrames img.is-on{opacity:1}
.storyLines{list-style:none;margin:20px 0 0;padding:0;position:relative;height:2.6em;font:500 clamp(1.25rem,2.4vw,1.75rem) 'Fredoka';text-align:center}
.storyLines li{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.storyLines li.is-on{opacity:1;transform:none}
.storyDots{display:flex;justify-content:center;gap:8px;margin-top:6px}
.storyDots span{width:10px;height:10px;border-radius:50%;background:rgba(255,246,234,.25);transition:background .3s}
.storyDots span.is-on{background:var(--sun)}
.no-motion .storyFrames{aspect-ratio:auto;background:none;border:0;box-shadow:none;display:grid;gap:14px}
.no-motion .storyFrames img{position:static;opacity:1;border-radius:20px}
.no-motion .storyLines{height:auto}.no-motion .storyLines li{position:static;opacity:1;transform:none}
.no-motion .storyDots{display:none}

/* ---------- screen-safe ---------- */
.safeGrid{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;margin-bottom:30px}
.safeCol h3{font-size:1.6rem;color:var(--blue-d)}
.pace{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.pace div{background:var(--blue);color:#fff;border-radius:22px;padding:16px 10px;text-align:center;font-weight:700;font-size:.92rem;box-shadow:var(--shadow)}
.pace b{display:block;font:600 2.3rem 'Fredoka'}
ul.ticks{list-style:none;padding:0;margin:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
ul.ticks li{background:#fff;border-radius:20px;padding:14px 18px 14px 52px;position:relative;box-shadow:var(--shadow);font-weight:700}
ul.ticks li::before{content:"✓";position:absolute;left:16px;top:13px;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;font-weight:900;font-size:.85rem;display:grid;place-items:center}

/* ---------- cards (approach, world) ---------- */
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:#fff;border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.card h3{font-size:1.35rem;color:var(--blue-d)}
.card p{margin:0}
.steps{counter-reset:s;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:22px}
.step{counter-increment:s;position:relative;padding-top:62px}
.step::before{content:counter(s);position:absolute;top:18px;left:26px;width:38px;height:38px;border-radius:50%;background:var(--coral);color:#fff;font:600 1.2rem 'Fredoka';display:grid;place-items:center}
.wideCenter{text-align:center}.wideCenter p{max-width:640px;margin:0 auto}

/* ---------- sketchbook ---------- */
.sketchPaper{position:relative;background:#FFFCF3 repeating-linear-gradient(180deg,transparent 0 35px,rgba(59,164,232,.16) 35px 36px);border-radius:24px;padding:60px clamp(18px,4vw,56px) 40px;box-shadow:0 2px 0 #eadfca,0 6px 0 #f6eedd,0 22px 50px rgba(120,80,40,.18)}
.sketchPaper::before{content:"";position:absolute;top:0;bottom:0;left:clamp(10px,3vw,40px);width:2px;background:rgba(242,112,95,.35)}
.title--sketch{font-family:'Gochi Hand','Fredoka',cursive;color:var(--ink);font-weight:400}
.sketchGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:30px 26px;margin-bottom:30px}
.sketch{position:relative;display:block;padding:10px 10px 0;border:0;background:#fff;box-shadow:0 10px 24px rgba(80,50,30,.18);cursor:zoom-in;transform:rotate(-1.6deg);transition:transform .25s;font:inherit;text-align:center}
.sketch:nth-child(even){transform:rotate(1.8deg)}
.sketch:nth-child(3n){transform:rotate(-.6deg)}
.sketch:hover{transform:rotate(0) scale(1.04);z-index:2}
.sketch::before{content:"";position:absolute;left:50%;top:-12px;width:84px;height:24px;margin-left:-42px;background:rgba(245,166,35,.45);transform:rotate(-3deg)}
.sketch img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#eee}
.sketch span{display:block;padding:8px 4px 12px;font:1.25rem 'Gochi Hand','Fredoka',cursive;color:#4a3a36}
.sketch.is-more{display:none}
.sketchGrid.is-open .sketch.is-more{display:block}

/* ---------- coral band: follow + join ---------- */
.coralband{position:relative;background:radial-gradient(1100px 700px at 62% 120px,var(--coral-glow) 0%,rgba(240,153,133,0) 70%),var(--coral-bg);border-radius:60px 60px 0 0;margin-top:40px}
.coralband .lead{color:var(--cream)}
#follow{padding-bottom:30px}
#join{padding:60px 0 80px}
.socials{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.soc{display:flex;align-items:center;gap:10px;background:#fff;padding:12px 22px;border-radius:999px;text-decoration:none;color:var(--ink);font:600 1.05rem 'Fredoka';box-shadow:var(--shadow)}
.soc svg{width:26px;height:26px;fill:var(--coral)}
.soc:hover{background:var(--blue);color:#fff}.soc:hover svg{fill:#fff}
.followFam{margin:50px 0 4px;color:var(--cream);font-size:1.7rem}
.famHint{color:var(--cream);margin:0 0 20px}
.famBubbles{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 24px;max-width:760px;margin:0 auto}
.famBub{background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font:600 1rem 'Fredoka';color:var(--cream);padding:4px;border-radius:20px}
.famAv{position:relative;display:block;width:86px;height:86px;border-radius:50%;overflow:hidden;border:4px solid var(--cream);box-shadow:0 8px 18px rgba(140,50,30,.25);transition:transform .2s}
.famAv img,.lt-av img,.cp-av img{position:absolute;left:0;top:0;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:50% 0}
.famAv--jin img,.famAv--amina img{width:150%;left:-25%;top:6%}
.famAv--jai img,.famAv--zahara img{width:120%;left:-10%;top:8%}
.famAv--seb img{width:110%;left:-5%;top:6%}
.famAv--mari img{top:10%}
.famBub:hover .famAv{transform:translateY(-3px) scale(1.05)}
.mlform{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:560px;margin:0 auto}
.mlform input{flex:1 1 260px;min-width:0;font:600 1.05rem 'Nunito';padding:14px 22px;border-radius:999px;border:3px solid #fff;background:var(--cream);color:var(--ink);box-shadow:var(--shadow);outline:none}
.mlform input:focus{border-color:var(--blue)}
.mlmsg{min-height:1.6em;margin:14px 0 0;font-weight:800;color:var(--cream)}
.mlmsg.err{color:#fff3c4}

/* ---------- footer ---------- */
.footer{background:var(--coral-d);color:var(--cream);text-align:center;padding:clamp(48px,7vw,90px) 0 34px;position:relative;overflow:hidden}
.footerCast{display:block;width:min(720px,92vw);height:auto;margin:0 auto;opacity:.95}
.footerInner{border-top:2px solid rgba(255,246,234,.25);max-width:900px;margin:0 auto;padding:24px 20px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footerLine{margin:0;font:500 1.1rem 'Fredoka'}
.maker{display:flex;align-items:center;gap:10px;margin:0;font-weight:700;font-size:.9rem;opacity:.85}
.maker img{width:44px;height:auto}

/* ---------- video overlay + lightbox ---------- */
dialog{border:0;padding:0;background:transparent;overflow:visible;max-width:none;max-height:none}
dialog::backdrop{background:rgba(43,37,80,.72);backdrop-filter:blur(4px)}
.modalClose{position:absolute;top:-16px;right:-16px;z-index:2;width:46px;height:46px;border-radius:50%;border:0;background:var(--cream);color:var(--coral-d);font-size:1.8rem;line-height:1;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.vOverlay{width:min(94vw,calc((100vh - 110px) * 1.7778),1700px);overflow:visible}
.vOverlay::backdrop{background:rgba(24,18,44,.88);backdrop-filter:blur(6px)}
.vFrame{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#000;border:5px solid var(--cream);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.vFrame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vOverlay[open]{animation:vIn .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes vIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.lightbox{width:min(1100px,94vw);text-align:center}
.lightbox img{display:block;margin:0 auto;max-width:100%;max-height:80vh;border:8px solid #fff;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.lightbox p{color:var(--cream);font:1.5rem 'Gochi Hand','Fredoka',cursive;margin:12px 0 0}

/* ---------- character links panel (v1) ---------- */
.lt-overlay{position:fixed;inset:0;z-index:50;background:rgba(58,44,42,.45);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px}
.lt-overlay[hidden],.cp-overlay[hidden]{display:none}
.lt-panel{position:relative;width:min(440px,100%);max-height:90vh;overflow:auto;background:radial-gradient(500px 300px at 70% 0,var(--coral-glow) 0%,rgba(240,153,133,0) 70%),var(--coral-bg);border-radius:34px;padding:36px 24px 24px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25);border:4px solid var(--cream)}
.lt-close{position:absolute;top:12px;right:14px;width:40px;height:40px;border-radius:50%;border:0;background:var(--cream);color:var(--coral-d);font-size:1.6rem;line-height:1;cursor:pointer}
.lt-av{position:relative;width:104px;height:104px;margin:0 auto 10px;border-radius:50%;overflow:hidden;border:5px solid var(--cream);box-shadow:0 8px 18px rgba(140,50,30,.25)}
.lt-panel h3{color:var(--cream);font-size:1.8rem;margin:0}
.lt-role{color:var(--cream);margin:2px 0 6px;font-weight:700;opacity:.9}
.lt-niche{color:var(--cream);margin:0 auto 20px;max-width:340px;font-size:.98rem;line-height:1.5}
.lt-links{display:grid;gap:12px}
.lt-links p{color:var(--cream)}
.lt-btn{display:flex;align-items:center;gap:12px;background:var(--cream);color:var(--ink);text-decoration:none;padding:14px 20px;border-radius:999px;font:600 1.1rem 'Fredoka';box-shadow:0 5px 0 rgba(0,0,0,.1);transition:transform .15s}
.lt-btn:hover{transform:translateY(-2px);background:#fff}
.lt-btn svg{width:24px;height:24px;fill:var(--coral);flex:none}
.lt-btn small{margin-left:auto;font:700 .85rem 'Nunito';color:var(--coral-d);opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lt-soon{opacity:.6;cursor:not-allowed;box-shadow:none;background:rgba(255,246,234,.7)}
.lt-soon:hover{transform:none}
.lt-copy{margin-top:18px;background:none;border:2px solid var(--cream);color:var(--cream);font:600 .95rem 'Fredoka';padding:8px 18px;border-radius:999px;cursor:pointer}

/* ---------- character profile (v1) ---------- */
.cp-overlay{position:fixed;inset:0;z-index:40;background:rgba(58,44,42,.45);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px}
.cp-panel{position:relative;width:min(720px,100%);max-height:92vh;overflow:auto;background:var(--cream);border-radius:34px;border:4px solid #fff;box-shadow:0 20px 60px rgba(0,0,0,.25);padding:32px 32px 28px}
.cp-close{position:absolute;top:14px;right:16px;background:var(--coral);color:#fff;z-index:2}
.cp-head{display:flex;align-items:center;gap:20px;margin-bottom:16px;padding-right:40px}
.cp-av{position:relative;width:120px;height:120px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;font:600 2.8rem 'Fredoka';color:#fff;border:5px solid #fff;box-shadow:0 8px 18px rgba(140,50,30,.2)}
.cp-av.small{width:64px;height:64px;font-size:1.6rem;margin:0 auto 10px}
.cp-role{margin:0;font-weight:800;color:var(--coral-d);text-transform:uppercase;letter-spacing:.05em;font-size:.8rem}
.cp-head h3{font-size:2rem;color:var(--blue-d);margin:2px 0 4px}
.cp-niche{margin:0;font-style:italic;color:#6b5450;font-size:.98rem;line-height:1.45}
.cp-bio p{margin:0 0 18px}
.cp-3d{position:relative;margin:0 0 18px;border-radius:24px;overflow:hidden;border:5px solid #fff;box-shadow:var(--shadow);background:#5a4642}
.cp-3d img{display:block;width:100%;max-height:440px;object-fit:contain}
.cp-3d figcaption{position:absolute;left:12px;top:12px;background:var(--cream);color:var(--coral-d);font:600 .9rem 'Fredoka';padding:4px 12px;border-radius:999px}
.cp-video{background:var(--coral);padding:12px;border-radius:28px;box-shadow:var(--shadow)}
.cp-video .screen{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:var(--cream)}
.cp-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.soon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
.soon h3{color:var(--coral-d);font-size:1.3rem;margin:0 0 4px}
.soon p{margin:0}
.cp-links-wrap h4{font:600 1.2rem 'Fredoka';color:var(--coral-d);margin:22px 0 10px}
.cp-links-wrap .lt-btn{border:2px solid var(--cream2);background:#fff}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .menuBtn{display:flex}
  nav.top ul{display:none;position:absolute;top:calc(100% + 8px);right:0;left:0;flex-direction:column;align-items:stretch;gap:2px;padding:12px;background:var(--cream);border-radius:28px;box-shadow:0 14px 34px rgba(140,50,30,.2)}
  nav.top ul.open{display:flex}
  nav.top ul a{font-size:1.05rem;padding:10px 16px}
  nav.top ul a.navJoin{margin:6px 0 0;text-align:center}
}
@media (max-width:860px){
  body{font-size:17px}
  .section{padding:72px 0}
  .hero{min-height:max(100svh,700px)}
  .heroLogoWrap{padding-top:calc(var(--nav-h) + 26px)}
  .heroCopy{width:100%;max-width:520px;margin:0 auto}
  .heroCast{width:128vw;margin-left:-14vw;margin-bottom:-30px}
  .heroHill{height:70px}
  .watchGrid{grid-template-columns:1fr;grid-template-rows:none}
  .videoCard--main{grid-row:auto;aspect-ratio:16/9}
  .row,.row.is-reverse{grid-template-columns:1fr;gap:24px;margin-bottom:56px}
  .row.is-reverse .rowMedia{order:0}
  .imagine{border-radius:34px;padding:70px 0 50px}
  .imaginePin{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:10px}
  .imagineTrack{padding:0 20px;gap:18px}
  .dream{width:84vw;scroll-snap-align:center}
  .dreamImg img{width:100%}
  .safeGrid{grid-template-columns:1fr;gap:10px}
  .famArt{height:250px}.famArt img{max-height:226px}
  .footerInner{justify-content:center;text-align:center}
}
@media (min-width:521px) and (max-width:860px){
  .heroCast{width:min(96vw,760px);margin-left:auto}
}
@media (max-width:860px){
  .hero--slides{min-height:max(100svh,700px)}
  .hero--slides .heroCopy{width:100%;max-width:440px;margin:0 auto}
  .slideImg{top:auto;bottom:0;height:var(--mh,44%);object-position:var(--mpos,50% 50%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%);mask-image:linear-gradient(180deg,transparent 0,#000 24%)}
  .slide--family .heroCast{width:128vw;left:50%;right:auto;margin-left:-64vw;bottom:106px}
  .heroShade{background:linear-gradient(180deg,rgba(60,25,35,.16) 0%,rgba(60,25,35,0) 40%)}
  .heroDots{bottom:40px;right:50%;transform:translateX(50%)}
}
@media (min-width:521px) and (max-width:860px){
  .slide--family .heroCast{width:min(96vw,760px);margin-left:calc(min(96vw,760px) / -2);bottom:116px}
}
@media (max-width:520px){
  .brand{font-size:1.15rem}.brand img{width:34px;height:34px}
  .famGrid{grid-template-columns:1fr 1fr;gap:14px}
  .famCard{padding:0 14px 18px;border-radius:24px}
  .famArt{height:190px;margin:0 -14px 12px}.famArt img{max-height:172px}
  .famCard h3{font-size:1.2rem}.famCard p{font-size:.9rem}
  .famAv{width:66px;height:66px}
  .pace b{font-size:1.8rem}
  .cp-overlay{padding:0}
  .cp-panel{width:100%;height:100%;max-height:none;border-radius:0;border:0;padding:64px 20px 32px}
  .cp-head{flex-direction:column;text-align:center;padding-right:0;gap:10px}
  .modalClose{top:-54px;right:0}
}
@media (prefers-reduced-motion:reduce){
  .tapeTrack,.sparkle,.vOverlay[open],.slide.is-on .slideImg,.slide.is-prev .slideImg{animation:none}
  .hero.is-handoff .logoMove,.hero.is-handoff .copyMove,.logoCut,.hero--slides .heroLogo .logoFull{transition:none}
  .slide{transition:none}
  .storyFrames img,.storyLines li{transition:none}
}