/* Starplay — single visual system, ported 1:1 from design/website-mockup.html (LOCKED). */
:root{
  --paper:#FAF8FF;        /* soft lilac-white */
  --ink:#2E2350;          /* deep violet ink */
  --ink-soft:#5B5178;
  --lime:#C8F24E;         /* slime lime — primary CTA */
  --lime-deep:#9CCB1F;
  --lime-text:#55700F;    /* WCAG-safe lime for small text on paper/white */
  --bubblegum:#FFC2DB;
  --sky:#B4DDF5;
  --sun:#FFD97A;
  --card:#FFFFFF;
  --radius:22px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Outfit',sans-serif; background:var(--paper); color:var(--ink); line-height:1.6; overflow-x:hidden;}
h1,h2,h3,.display{font-family:'Bricolage Grotesque',sans-serif;}
img{max-width:100%;}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px;}

/* ---------- NAV ---------- */
nav{position:sticky; top:0; z-index:50; background:rgba(250,248,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid #E9E4F5;}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; max-width:1080px; margin:0 auto;}
.logo{font-family:'Bricolage Grotesque'; font-weight:800; font-size:1.25rem; letter-spacing:-.02em; display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink);}
.logo .star{color:var(--lime-deep); font-size:1.3rem; display:inline-block; transform:rotate(-12deg); text-shadow:1.5px 1.5px 0 var(--ink);}
.nav-links{display:flex; gap:22px; font-size:.92rem; font-weight:500;}
.nav-links a{color:var(--ink-soft); text-decoration:none;}
.nav-links a:hover{color:var(--ink);}
.btn{display:inline-block; font-weight:700; text-decoration:none; border-radius:999px; padding:12px 26px; font-size:.95rem; transition:transform .15s ease, box-shadow .15s ease; border:2.5px solid var(--ink); color:var(--ink);}
.btn:active{transform:scale(.97);}
.btn-lime{background:var(--lime); box-shadow:0 4px 0 var(--ink);}
.btn-lime:hover{transform:translateY(-2px); box-shadow:0 6px 0 var(--ink);}
.btn-ghost{background:transparent;}
.btn-ghost:hover{background:#fff;}
.btn-sm{padding:9px 20px; font-size:.88rem;}
@media(max-width:760px){.nav-links{display:none;}}

/* ---------- HERO ---------- */
.hero{position:relative; padding:72px 0 96px; text-align:center;}
.hero .eyebrow{display:inline-block; background:#fff; border:2px solid var(--ink); border-radius:999px; padding:6px 16px; font-weight:600; font-size:.82rem; letter-spacing:.04em; margin-bottom:26px;}
.hero h1{font-size:clamp(2.6rem,7vw,4.6rem); line-height:1.04; font-weight:800; letter-spacing:-.03em; margin-bottom:22px;}
.bounce-word{display:inline-block;}
.bounce-word span{display:inline-block; animation:boing 2.6s ease-in-out infinite;}
.bounce-word span:nth-child(2){animation-delay:.08s;}
.bounce-word span:nth-child(3){animation-delay:.16s;}
.bounce-word span:nth-child(4){animation-delay:.24s;}
.bounce-word span:nth-child(5){animation-delay:.32s;}
.bounce-word span:nth-child(6){animation-delay:.4s;}
@keyframes boing{0%,100%{transform:translateY(0);}12%{transform:translateY(-.14em);}24%{transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){.bounce-word span{animation:none;}}
.hero h1 .hl{position:relative; white-space:nowrap;}
.hero h1 .hl::after{content:""; position:absolute; left:0; right:0; bottom:.04em; height:.32em; background:var(--lime); z-index:-1; border-radius:4px; transform:rotate(-1deg);}
.hero p{max-width:560px; margin:0 auto 34px; font-size:1.15rem; color:var(--ink-soft); font-weight:400;}
.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.blob{position:absolute; border-radius:48% 52% 55% 45%/55% 46% 54% 45%; z-index:-1; opacity:.55;}
.blob.b1{width:260px; height:260px; background:var(--bubblegum); top:-40px; left:-90px;}
.blob.b2{width:200px; height:200px; background:var(--sky); bottom:-30px; right:-60px;}
.blob.b3{width:110px; height:110px; background:var(--sun); top:120px; right:8%;}

/* ---------- TRUST BAR ---------- */
.trust{background:var(--ink); color:var(--paper); padding:16px 0;}
.trust .wrap{display:flex; justify-content:center; gap:34px; flex-wrap:wrap; font-size:.92rem; font-weight:500;}
.trust span b{color:var(--lime);}

/* ---------- SECTIONS ---------- */
section{padding:76px 0;}
.kicker{font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--lime-text); margin-bottom:10px;}
h2{font-size:clamp(1.8rem,4.5vw,2.6rem); font-weight:800; letter-spacing:-.02em; line-height:1.12; margin-bottom:14px;}
.lead{color:var(--ink-soft); max-width:600px; font-size:1.05rem;}

/* services */
.svc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:40px;}
.svc{background:var(--card); border:2.5px solid var(--ink); border-radius:var(--radius); padding:26px 24px 24px; position:relative; transition:transform .18s ease, box-shadow .18s ease; box-shadow:0 5px 0 rgba(46,35,80,.12);}
.svc:hover{transform:translateY(-4px); box-shadow:0 9px 0 rgba(46,35,80,.16);}
.svc .icon{width:56px; height:56px; border-radius:46% 54% 52% 48%/52% 46% 54% 48%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:16px; border:2.5px solid var(--ink);}
.svc h3{font-size:1.25rem; font-weight:700; margin-bottom:8px;}
.svc p{font-size:.94rem; color:var(--ink-soft); margin-bottom:16px;}
.svc .from{font-weight:700; font-size:.95rem;}
.svc .from small{display:block; font-weight:400; color:var(--ink-soft); font-size:.78rem;}
.svc a{font-weight:700; font-size:.9rem; color:var(--ink); text-decoration:none; border-bottom:2px solid var(--lime);}
.i-lime{background:var(--lime);} .i-pink{background:var(--bubblegum);} .i-sky{background:var(--sky);} .i-sun{background:var(--sun);}
.svc .more{display:inline-block; margin-top:12px;}

/* how it works */
.how{background:#fff; border-top:2.5px solid var(--ink); border-bottom:2.5px solid var(--ink);}
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px; margin-top:40px;}
.step .num{font-family:'Bricolage Grotesque'; font-weight:800; font-size:2.4rem; color:var(--ink); background:var(--lime); width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2.5px solid var(--ink); margin-bottom:14px;}
.step:nth-child(2) .num{background:var(--bubblegum);}
.step:nth-child(3) .num{background:var(--sky);}
.step h3{font-size:1.15rem; margin-bottom:6px;}
.step p{font-size:.94rem; color:var(--ink-soft);}

/* bundle band */
.bundle{background:var(--ink); color:var(--paper); border-radius:var(--radius); padding:40px 32px; display:flex; gap:30px; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.bundle h2{color:#fff;}
.bundle .ladder{display:flex; gap:12px; flex-wrap:wrap;}
.rung{background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.25); border-radius:16px; padding:14px 18px; min-width:130px;}
.rung b{display:block; font-family:'Bricolage Grotesque'; font-size:1.5rem; color:var(--lime);}
.rung span{font-size:.82rem; color:#CFC8E8;}

/* gallery */
.gal{display:flex; gap:14px; overflow-x:auto; padding:8px 4px 18px; scroll-snap-type:x mandatory;}
.shot{min-width:240px; height:180px; border-radius:18px; border:2.5px solid var(--ink); scroll-snap-align:start; display:flex; align-items:flex-end; padding:12px; font-size:.8rem; font-weight:600; color:var(--ink); position:relative; overflow:hidden;}
.shot em{background:rgba(255,255,255,.85); border-radius:8px; padding:4px 10px; font-style:normal;}
.g1{background:linear-gradient(135deg,var(--sky),#e8f5ff);}
.g2{background:linear-gradient(135deg,var(--bubblegum),#ffe9f3);}
.g3{background:linear-gradient(135deg,var(--lime),#eeffc9);}
.g4{background:linear-gradient(135deg,var(--sun),#fff3d6);}
.g5{background:linear-gradient(135deg,#D9CFFF,#F1EDFF);}

/* audiences */
.aud-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-top:36px;}
.aud{border:2px dashed var(--ink-soft); border-radius:18px; padding:20px;}
.aud h3{font-size:1.05rem; margin-bottom:6px;}
.aud p{font-size:.88rem; color:var(--ink-soft);}

/* reviews */
.rev-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin-top:36px;}
.rev{background:#fff; border:2.5px solid var(--ink); border-radius:var(--radius); padding:24px; box-shadow:0 5px 0 rgba(46,35,80,.12);}
.rev .stars{color:var(--lime-text); letter-spacing:.1em; margin-bottom:10px; font-size:.95rem;}
.rev p{font-size:.95rem; margin-bottom:14px;}
.rev .who{font-weight:700; font-size:.85rem;}
.rev .who span{display:block; font-weight:400; color:var(--ink-soft);}

/* quote form */
.quote{background:#fff; border-top:2.5px solid var(--ink);}
.q-card{background:var(--paper); border:2.5px solid var(--ink); border-radius:var(--radius); padding:32px 26px; max-width:640px; margin:36px auto 0; box-shadow:0 6px 0 rgba(46,35,80,.14);}
.q-card .grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media(max-width:560px){.q-card .grid2{grid-template-columns:1fr;}}
.f{margin-bottom:12px;}
.f label{display:block; font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:5px; color:var(--ink-soft);}
.f input,.f select,.f textarea{width:100%; padding:12px 14px; border:2px solid var(--ink); border-radius:12px; font-family:'Outfit'; font-size:1rem; background:#fff; color:var(--ink);}
.f input:focus,.f select:focus,.f textarea:focus{outline:3px solid var(--lime); outline-offset:1px;}
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chip{border:2px solid var(--ink); border-radius:999px; padding:8px 16px; font-family:'Outfit',sans-serif; font-size:.88rem; font-weight:600; cursor:pointer; background:#fff; user-select:none; color:var(--ink);}
.chip.on{background:var(--lime); box-shadow:0 3px 0 var(--ink);}
.q-note{font-size:.82rem; color:var(--ink-soft); text-align:center; margin-top:12px;}

/* footer */
footer{background:var(--ink); color:#CFC8E8; padding:56px 0 32px; font-size:.9rem;}
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:28px; margin-bottom:36px;}
footer h4, footer .foot-h{color:#fff; font-size:.95rem; margin-bottom:10px; font-weight:700;}
footer a{color:#CFC8E8; text-decoration:none; display:block; margin-bottom:6px;}
footer a:hover{color:var(--lime);}
.foot-bottom{border-top:1px solid rgba(255,255,255,.15); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.8rem;}

/* chat bubble */
.chat-fab{position:fixed; bottom:22px; right:22px; width:60px; height:60px; border-radius:50%; background:var(--lime); border:2.5px solid var(--ink); box-shadow:0 4px 0 var(--ink); display:flex; align-items:center; justify-content:center; font-size:1.5rem; cursor:pointer; z-index:60; transition:transform .15s;}
.chat-fab:hover{transform:translateY(-3px);}

/* =========================================================
   Additions for the full site (same system, no restyling)
   ========================================================= */

/* accessibility */
.skip-link{position:absolute; left:-9999px; top:0; background:var(--lime); color:var(--ink); padding:10px 18px; border-radius:0 0 12px 0; z-index:100; font-weight:700; text-decoration:none;}
.skip-link:focus{left:0;}
:focus-visible{outline:3px solid var(--lime-deep); outline-offset:2px;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
  html{scroll-behavior:auto;}
}

/* subpage hero */
.page-hero{position:relative; padding:64px 0 40px; text-align:center;}
.page-hero h1{font-size:clamp(2.2rem,6vw,3.6rem); line-height:1.06; font-weight:800; letter-spacing:-.03em; margin-bottom:16px;}
.page-hero .lead{margin:0 auto;}
.page-hero .eyebrow{display:inline-block; background:#fff; border:2px solid var(--ink); border-radius:999px; padding:6px 16px; font-weight:600; font-size:.82rem; letter-spacing:.04em; margin-bottom:22px;}

/* included checklist */
.check-list{list-style:none; margin-top:20px; display:grid; gap:12px;}
.check-list li{display:flex; gap:12px; align-items:flex-start; font-size:.98rem;}
.check-list li::before{content:"✓"; flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--lime); border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:800; margin-top:2px;}

/* two-column split (photo + details) */
.split{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center;}
@media(max-width:760px){.split{grid-template-columns:1fr;}}
.photo-ph{position:relative; height:260px; border-radius:18px; border:2.5px solid var(--ink); display:flex; align-items:flex-end; padding:12px; font-size:.8rem; font-weight:600; color:var(--ink); overflow:hidden;}
.shot img, .photo-ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.shot em, .photo-ph em{position:relative; z-index:1;}
.photo-ph em{background:rgba(255,255,255,.85); border-radius:8px; padding:4px 10px; font-style:normal;}

/* quick facts */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:22px;}
.fact{background:#fff; border:2px solid var(--ink); border-radius:14px; padding:14px;}
.fact b{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:4px;}

/* FAQ accordion (full page + preview share one style) */
.faq-list details{border-bottom:2px solid #E9E4F5; padding:16px 4px;}
.faq-list summary{font-weight:700; cursor:pointer; font-size:1.02rem;}
.faq-list details p{padding-top:8px; color:var(--ink-soft);}

/* forms */
button.btn{cursor:pointer; font-family:'Outfit',sans-serif;}
.btn-block{display:block; width:100%; text-align:center;}
/* live regions stay rendered (empty) so aria-live announcements are reliable */
.form-msg{display:block; border:0 solid var(--ink); border-radius:14px; padding:0; margin:0; font-weight:600; overflow:hidden;}
.form-msg.show{border-width:2.5px; padding:16px; margin-top:14px;}
.form-msg.ok{background:var(--lime);}
.form-msg.err{background:var(--bubblegum);}
.travel-note{display:block; font-size:.85rem; font-weight:600; margin:0; background:var(--sky); border:0 solid var(--ink); border-radius:10px; padding:0; overflow:hidden;}
.travel-note.show{border-width:2px; padding:8px 12px; margin-top:6px;}
.hp-field{position:absolute !important; left:-9999px !important; top:-9999px !important; opacity:0; height:0; overflow:hidden; pointer-events:none;}

/* dark band CTA reused on subpages */
.cta-band{background:var(--ink); color:var(--paper); border-radius:var(--radius); padding:40px 32px; text-align:center;}
.cta-band h2{color:#fff;}
.cta-band p{color:#CFC8E8; max-width:520px; margin:0 auto 22px;}
.cta-band .btn-ghost{background:#fff;}
.cta-band .kicker{color:var(--lime);}

/* chat widget */
.chat-panel{position:fixed; bottom:94px; right:22px; width:min(360px, calc(100vw - 28px)); max-height:min(560px, 72vh); background:#fff; border:2.5px solid var(--ink); border-radius:18px; box-shadow:0 6px 0 rgba(46,35,80,.2); display:flex; flex-direction:column; overflow:hidden; z-index:70;}
.chat-panel[hidden]{display:none;}
.chat-head{display:flex; justify-content:space-between; align-items:center; background:var(--ink); color:#fff; padding:10px 14px; font-weight:800; font-family:'Bricolage Grotesque',sans-serif;}
.chat-head .star{color:var(--lime); display:inline-block; transform:rotate(-12deg);}
.chat-close{background:none; border:none; color:#fff; font-size:1.1rem; cursor:pointer; padding:2px 6px;}
.chat-body{padding:12px; overflow-y:auto; display:flex; flex-direction:column; gap:8px;}
.chat-bubble{border:2px solid var(--ink); border-radius:14px; padding:9px 12px; font-size:.9rem; max-width:88%; background:var(--paper);}
.chat-bubble.user{margin-left:auto; background:var(--lime);}
.chat-controls{display:flex; flex-wrap:wrap; gap:6px;}
.chat-opt{display:inline-block; border:2px solid var(--ink); border-radius:999px; padding:7px 14px; font-size:.85rem; font-weight:700; background:#fff; color:var(--ink); cursor:pointer; text-decoration:none; font-family:'Outfit',sans-serif;}
.chat-opt.cta{background:var(--lime); box-shadow:0 2px 0 var(--ink);}
.chat-form{display:flex; gap:6px; width:100%;}
.chat-form.stack{flex-direction:column;}
.chat-form input{flex:1; border:2px solid var(--ink); border-radius:10px; padding:9px 12px; font-family:'Outfit',sans-serif; font-size:1rem; min-width:0;}
@media(max-width:560px){.chat-panel{right:14px; bottom:86px;}}

/* 404 */
.err-hero{padding:120px 0; text-align:center;}
.err-hero .big{font-family:'Bricolage Grotesque'; font-size:clamp(4rem,14vw,8rem); font-weight:800; line-height:1; color:var(--lime-deep); text-shadow:3px 3px 0 var(--ink);}