/* princess theme.css v1.26 - 12th Aug 2026 (hero balloons hidden on one-column layouts - they sat behind the h1; carries v1.25) */
:root{
  --cream:#FFF7F1; --card:#ffffff; --ink:#43314F; --muted:#9C88A8; --line:#F3E2EC;
  --blush:#FBD3E2; --blush-soft:#FDEAF1; --rose:#F07AAA; --rose-deep:#D9528A;
  --lilac:#CBA9EC; --lilac-deep:#9A6AD6; --gold:#F3C24B; --gold-deep:#E0A52C;
  --mint:#A6E7CE; --sky:#C4E6F5;
  --twilight:#241543; --twilight2:#3A2266; --twi-ink:#FBEFFA; --twi-muted:#C9B6E6;
  --shadow:0 20px 44px rgba(154,90,150,.18); --shadow-sm:0 10px 22px rgba(154,90,150,.13);
  --r:24px; --r-sm:15px;
  --fh:'Fredoka',sans-serif; --fb:'Nunito',sans-serif; --fa-acc:'Caveat',cursive;
  --bg:var(--cream); --tx:var(--ink);
}
html[data-theme="dark"]{
  --cream:#1B1030; --card:#2A1A47; --ink:#F6ECFB; --muted:#B9A6CE; --line:#3C2A5C;
  --blush-soft:#2E1C4D; --line2:#3C2A5C; --shadow:0 20px 44px rgba(0,0,0,.5); --shadow-sm:0 10px 22px rgba(0,0,0,.4);
  --bg:#160C28; --tx:#F6ECFB;
}
html.hc{--ink:#1c0f28;--muted:#4a3a55;--line:#caa7c0;--rose-deep:#a8255f;--lilac-deep:#5e2ea6}
html.hc[data-theme="dark"]{--ink:#ffffff;--muted:#e6d6f5;--line:#6e57a0}
html[data-fs="2"]{font-size:18px}html[data-fs="3"]{font-size:20px}
/* the theme is sized in px (no rem), so root font-size alone scales nothing -
   zoom the body off the same data-fs attribute the a11y buttons set */
html[data-fs="2"] body{zoom:1.12}
html[data-fs="3"] body{zoom:1.25}

*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--bg);color:var(--tx);line-height:1.65;font-weight:500;overflow-x:hidden;transition:background .4s,color .4s}
h1,h2,h3,h4,.fh{font-family:var(--fh);font-weight:600;line-height:1.08;letter-spacing:-.01em}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}
.blk{padding:40px 0 16px;position:relative}
.blk.tight{padding:40px 0}
/* coloured bands (blush / twilight) keep symmetric padding so their
   content isn't cramped against the band edge; plain blocks are top-heavy
   (gap comes from each block's top, so stacked blocks don't double up). */
.blk.band,.blk.twilight{padding:44px 0}
/* the last block before the footer keeps a comfortable gap below it - the
   top-heavy rule above only leaves 16px, which reads as cramped against the
   footer (or a dark CTA band). This restores breathing room at the very bottom. */
.ms-page > .ms-rv:last-child .blk{padding-bottom:52px}
/* give a CTA band more room above it - the block above only leaves its 16px
   bottom, which reads tight against the dark band. Padding on the wrapper is
   collapse-proof; .center is unique to the CTA block (Quote is twilight too). */
.ms-page > .ms-rv:has(.blk.twilight.center){padding-top:36px}
.eyebrow{font-family:var(--fa-acc);font-size:25px;color:var(--rose-deep);font-weight:700;display:inline-flex;align-items:center;gap:9px;margin-bottom:8px}
.eyebrow i{font-size:16px;color:var(--gold-deep)}
h2.tt{font-size:clamp(30px,4.6vw,50px)}
.lede{font-size:clamp(16px,1.8vw,19px);color:var(--muted);max-width:62ch}
.center{text-align:center}.center .lede{margin-inline:auto}

/* buttons */
.btn{font-family:var(--fh);font-weight:600;font-size:16px;border:none;border-radius:999px;padding:14px 26px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,filter .2s;position:relative;background:linear-gradient(135deg,var(--rose),var(--rose-deep));color:#fff;box-shadow:0 12px 26px rgba(217,82,138,.34)}
.btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 18px 34px rgba(217,82,138,.42)}
.btn:active{transform:translateY(-1px) scale(.99)}
.btn i{font-size:15px}
.btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#5a3d05;box-shadow:0 12px 26px rgba(224,165,44,.4)}
.btn.ghost{background:transparent;color:var(--rose-deep);border:2px solid var(--rose);box-shadow:none}
.btn.ghost:hover{background:rgba(240,122,170,.1)}
.btn.on-twi.ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.btn.lg{padding:17px 34px;font-size:18px}
/* header CTA stays a sensible pill even if it's marked .lg, and never shrinks */
.nav-right .btn,.nav-right .btn.lg{padding:11px 20px;font-size:14.5px;flex:0 0 auto}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--lilac-deep);outline-offset:3px}

/* progress */
#prog{position:fixed;top:0;left:0;height:4px;width:0;z-index:60;background:linear-gradient(90deg,var(--rose),var(--gold),var(--lilac));border-radius:0 4px 4px 0;transition:width .1s linear}

/* sparkles + stars */
.spark{position:absolute;pointer-events:none;color:var(--gold);filter:drop-shadow(0 0 4px rgba(243,194,75,.7))}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@keyframes floatUp{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(-26px) rotate(8deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes balloon{0%{transform:translateY(8px) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}100%{transform:translateY(8px) rotate(-3deg)}}
@keyframes pop{0%{opacity:0;transform:translateY(26px) scale(.94)}60%{opacity:1;transform:translateY(-4px) scale(1.01)}100%{opacity:1;transform:translateY(0) scale(1)}}

/* reveal */
.rv{opacity:0}
.rv.in{animation:pop .7s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--d,0s)}

/* twilight sections */
.twilight{background:radial-gradient(120% 120% at 80% -10%,#3a2266 0%,var(--twilight) 55%,#190d33 100%);color:var(--twi-ink)}
/* CLOSING CTA is PINK, not twilight. The .cta block ships .twilight.center (Quote
   shares .twilight but never .center), so this override repaints only the closing
   call-to-action as a warm rose-to-blush band while the Quote band stays starlit.
   Text flips to ink for the light ground; the starfield is hidden (no dark sky to
   hold stars); the gold primary button carries over; the secondary becomes a rose
   outline. (Nicola: the CTA panel is meant to be pink.) */
.twilight.center{background:radial-gradient(120% 120% at 80% -10%,var(--blush) 0%,#FBC7DD 45%,var(--rose) 100%);color:var(--ink)}
.twilight.center .starfield{display:none}
.twilight.center h2,.twilight.center .tt{color:var(--ink) !important}
.twilight.center .eyebrow{color:var(--rose-deep)}
.twilight.center .eyebrow i{color:var(--rose-deep)}
.twilight.center .lede{color:#7a4a63}
.twilight.center .btn.on-twi.ghost{color:var(--rose-deep);border-color:var(--rose)}
.twilight h2,.twilight h3{color:#fff}
.twilight .eyebrow{color:var(--gold)}
.twilight .lede{color:var(--twi-muted)}
.twilight .starfield{position:absolute;inset:0;overflow:hidden;pointer-events:none}

/* nav */
nav.bar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--card) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav.bar .wrap{display:flex;align-items:center;gap:14px;padding-top:13px;padding-bottom:13px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);margin-right:auto}
.logo .crown{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--blush),var(--lilac));display:grid;place-items:center;color:var(--rose-deep);box-shadow:var(--shadow-sm)}
.logo .crown i{font-size:19px}
.logo b{font-family:var(--fh);font-weight:700;font-size:19px;line-height:1;letter-spacing:-.02em}
.logo small{display:block;font-family:var(--fa-acc);font-size:15px;color:var(--rose-deep);font-weight:700;margin-top:1px}
.nav-links{display:flex;align-items:center;gap:20px}
.nav-links a{font-family:var(--fh);font-weight:500;font-size:15px;color:var(--ink);text-decoration:none;position:relative;padding:5px 2px;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2.5px;border-radius:2px;background:linear-gradient(90deg,var(--rose),var(--gold));transition:right .25s ease}
.nav-links a:hover::after{right:0}
/* current page / section: bolder rose text, no underline (the wipe-in ::after is
   suppressed so the active link is not double-marked). Set server-side per page
   (.active on the current page's link) and live by the scroll-spy in princess.js. */
.nav-links a.active{color:var(--rose);font-weight:700}
.nav-links a.active::after{display:none}
.nav-right{display:flex;align-items:center;gap:11px}

.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);cursor:pointer;align-items:center;justify-content:center;flex:0 0 auto}
.burger span,.burger span::before,.burger span::after{width:18px;height:2.4px;background:currentColor;border-radius:2px;transition:transform .25s,opacity .2s;display:block}
.burger span{position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* a11y */
.a11y{position:relative}
.a11y-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.a11y-btn svg{width:21px;height:21px}
.a11y-panel{position:absolute;right:0;top:52px;width:288px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:16px;display:none;z-index:70}
.a11y-panel.open{display:block}
.a11y-panel h4{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:10px}
.a11y-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--line)}
.a11y-row:first-of-type{border-top:none}
.aic{width:30px;height:30px;border-radius:9px;background:var(--blush-soft);color:var(--rose-deep);display:grid;place-items:center;flex:0 0 auto}
.aic svg{width:17px;height:17px}
.a11y-row .lbl{font-size:13.5px;font-weight:700;line-height:1.25;flex:1}
.a11y-row .lbl small{display:block;font-weight:500;color:var(--muted);font-size:11.5px}
.tts-btn,.btn.sm{font-family:var(--fh);font-size:13px;font-weight:600;border:1.5px solid var(--rose);color:var(--rose-deep);background:transparent;border-radius:999px;padding:6px 14px;cursor:pointer}
.tts-btn[aria-pressed="true"]{background:var(--rose);color:#fff}
.tgl{width:44px;height:25px;border-radius:999px;border:none;background:var(--line);position:relative;cursor:pointer;flex:0 0 auto}
.tgl::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tgl[aria-pressed="true"]{background:var(--rose)}
.tgl[aria-pressed="true"]::after{left:22px}
.fs-group{display:flex;gap:5px}
.fs-group button{width:30px;height:30px;border-radius:9px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;font-family:var(--fh);font-weight:600}
.fs-group button[aria-pressed="true"]{border-color:var(--rose);color:var(--rose-deep);background:var(--blush-soft)}
.fs1{font-size:11px}.fs2{font-size:13px}.fs3{font-size:15px}

footer{background:var(--twilight);color:var(--twi-ink);padding:46px 0 30px;position:relative;overflow:hidden}
footer .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;position:relative;z-index:2}
footer h5{font-family:var(--fh);font-size:16px;color:#fff;margin-bottom:12px}
footer a{color:var(--twi-muted);text-decoration:none;display:block;padding:3px 0;font-size:14.5px}
footer a:hover{color:var(--gold)}
footer .fbrand b{font-family:var(--fh);font-size:22px;color:#fff}
footer .fbrand small{font-family:var(--fa-acc);font-size:17px;color:var(--gold);display:block}
footer .fbot{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--twi-muted);position:relative;z-index:2}
footer .fsoc{display:flex;gap:10px;margin-top:10px}
footer .fsoc a{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff;padding:0}
footer .fsoc a:hover{background:var(--rose)}

/* ===== HERO ===== */
.hero{padding:0;overflow:hidden}
.hero .inner{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;padding:88px 26px 120px;position:relative;z-index:3}
.logo{position:relative;z-index:3}.logo .logoimg{height:112px;width:auto;display:block;margin:-12px 0 -44px;filter:drop-shadow(0 7px 13px rgba(67,49,79,.34))}@media(max-width:600px){.logo .logoimg{height:86px;margin:-8px 0 -32px}}html[data-theme="dark"] .logo{background:rgba(255,255,255,.92);border-radius:13px;padding:5px 11px}.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#1c1038}.hero-photo{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity 1.6s ease;will-change:opacity,transform;animation:kenburns 26s ease-in-out infinite alternate}.hero-photo>img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}.hero-photo.is-on{opacity:1}@keyframes kenburns{from{transform:scale(1.05)}to{transform:scale(1.13)}}.hero-wash{position:absolute;inset:0;background:linear-gradient(100deg,rgba(18,10,38,.92) 0%,rgba(33,18,62,.76) 40%,rgba(33,18,62,.42) 72%,rgba(45,22,80,.55) 100%),linear-gradient(180deg,rgba(33,18,62,.12),rgba(20,10,40,.62))}.hero-sweep{position:absolute;top:0;left:-60%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),rgba(255,233,168,.22),transparent);transform:skewX(-14deg);opacity:0;pointer-events:none;z-index:2}@media(prefers-reduced-motion:no-preference){.hero-sweep{animation:herosweep 1.7s ease-out .35s both}}@keyframes herosweep{0%{left:-60%;opacity:0}12%{opacity:1}100%{left:175%;opacity:0}}.hero .starfield{z-index:1}.dust{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}.dust .d{position:absolute;bottom:-20px;border-radius:50%;animation-name:rise;animation-timing-function:linear;animation-iteration-count:infinite}@keyframes rise{0%{transform:translateY(0) translateX(0);opacity:0}8%{opacity:.95}85%{opacity:.8}100%{transform:translateY(-640px) translateX(30px);opacity:0}}.bokeh{position:absolute;border-radius:50%;z-index:1;pointer-events:none;filter:blur(8px);opacity:.3;animation:bob 9s ease-in-out infinite}
.hero h1{font-size:clamp(36px,6vw,68px);font-weight:700;color:#fff}
.hero h1 .em{background:linear-gradient(120deg,var(--gold),#ffe9a8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .lede{margin:18px 0 26px;font-size:clamp(16px,2vw,20px);color:var(--twi-muted)}
.hero .cta-row{display:flex;gap:13px;flex-wrap:wrap}
.hero .trust{display:flex;gap:20px;flex-wrap:wrap;margin-top:26px;color:var(--twi-muted);font-size:13.5px;font-weight:600}
.hero .trust span{display:inline-flex;align-items:center;gap:7px}
.hero .trust i{color:var(--gold)}
/* Page head (compact hero) - the "pagehead" HeroStyle. LIGHT treatment so the
   inner-page banner matches the light .hero-light homepage hero (it is a separate
   element, so it never inherited the hero-light styling - that was the bug). Same
   palette tokens as hero-light; a set banner photo now reads light (soft wash)
   rather than dark-dimmed. The html[data-theme="dark"] block below restores the
   original dark twilight banner in dark mode. Deliberately shorter than .hero. */
.phead{position:relative;overflow:hidden;text-align:center;padding:58px 0 54px;background:radial-gradient(120% 120% at 80% -10%,#FFE7F1 0%,var(--cream) 52%,#FFF1F7 100%);color:var(--ink)}
.phead-bg{position:absolute;inset:0;z-index:0}
.phead-bg img{width:100%;height:100%;object-fit:cover;opacity:.22}
.phead-banner::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(255,247,251,.80),rgba(253,234,241,.62))}
.phead>.wrap{position:relative;z-index:2;max-width:900px}
.phead .eyebrow{color:var(--rose-deep);justify-content:center}
.phead .eyebrow i{color:var(--rose)}
.phead h1{font-size:clamp(30px,4.4vw,48px);font-weight:700;color:var(--twilight);margin:0}
.phead h1 .em{background:linear-gradient(110deg,var(--rose-deep) 0%,var(--rose) 42%,var(--gold-deep) 60%,#C98A1E 100%);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--rose-deep)}
.phead .lede{margin:14px auto 0;max-width:60ch;color:#5a3f63}
.phead-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.crumb{display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;font-weight:600;color:#5a3f63;margin-bottom:14px}
.crumb i{font-size:10px;opacity:.7}
.crumb .cur{color:var(--rose-deep)}
@media(max-width:640px){.phead{padding:44px 0 42px}}
/* Dark mode: restore the dark twilight banner (mirrors hero-light's dark block) */
html[data-theme="dark"] .phead{background:radial-gradient(120% 120% at 80% -10%,#3a2266 0%,var(--twilight) 55%,#190d33 100%);color:var(--twi-ink)}
html[data-theme="dark"] .phead-bg img{opacity:.35}
html[data-theme="dark"] .phead-banner::after{background:linear-gradient(180deg,rgba(25,13,51,.5),rgba(25,13,51,.78))}
html[data-theme="dark"] .phead .eyebrow{color:var(--gold)}
html[data-theme="dark"] .phead .eyebrow i{color:var(--gold)}
html[data-theme="dark"] .phead h1{color:#fff}
html[data-theme="dark"] .phead h1 .em{background:linear-gradient(120deg,var(--gold),#ffe9a8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold)}
html[data-theme="dark"] .phead .lede{color:var(--twi-muted)}
html[data-theme="dark"] .crumb{color:var(--twi-muted)}
html[data-theme="dark"] .crumb .cur{color:var(--gold)}
.balloon{position:absolute;width:48px;z-index:2;pointer-events:none;animation:balloon 7s ease-in-out infinite}
/* invitation signature */
.invite{position:relative;background:linear-gradient(160deg,#fff 0%,#fff7e6 100%);border-radius:22px;padding:30px 28px 26px;box-shadow:0 30px 60px rgba(0,0,0,.34);border:1px solid rgba(243,194,75,.5);animation:bob 6s ease-in-out infinite;z-index:3}
.invite::before{content:"";position:absolute;inset:7px;border:2px dashed rgba(217,82,138,.32);border-radius:15px;pointer-events:none}
.invite .ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--rose),var(--rose-deep));color:#fff;font-family:var(--fa-acc);font-weight:700;font-size:18px;padding:5px 20px;border-radius:999px;box-shadow:0 8px 18px rgba(217,82,138,.4)}
.invite .ttl{font-family:var(--fa-acc);font-weight:700;font-size:34px;color:var(--rose-deep);text-align:center;line-height:1;margin:14px 0 2px}
.invite .sub{text-align:center;color:var(--muted);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;margin-bottom:16px}
.invite .nm{text-align:center;font-family:var(--fh);font-weight:600;font-size:26px;color:var(--ink);margin-bottom:4px}
.invite .theme-chip{display:inline-flex;align-items:center;gap:7px;background:var(--blush-soft);color:var(--rose-deep);font-weight:700;font-size:13px;padding:5px 13px;border-radius:999px;margin:0 auto 16px;width:max-content}
.invite .rows{display:grid;gap:8px;margin-bottom:18px}
.invite .ir{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--ink);font-weight:600}
.invite .ir i{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#5a3d05;display:grid;place-items:center;font-size:13px;flex:0 0 auto}
.invite .ir small{display:block;font-weight:500;color:var(--muted);font-size:11px}
.invite .rsvp{position:relative;overflow:hidden}
.invite .rsvp::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);background-size:220% 100%;animation:shimmer 3.4s linear infinite}
.invite .seal{position:absolute;bottom:-15px;right:-13px;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--rose),var(--rose-deep));display:grid;place-items:center;color:#fff;font-size:22px;box-shadow:0 10px 22px rgba(217,82,138,.45);transform:rotate(-12deg);border:3px solid #fff}

/* ===== MARQUEE ===== */
.ticker{background:linear-gradient(90deg,var(--lilac),var(--rose));overflow:hidden;padding:15px 0;white-space:nowrap;position:relative}
.ticker .run{display:inline-flex;align-items:center;gap:0;animation:scrollx 26s linear infinite;will-change:transform}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker .it{display:inline-flex;align-items:center;gap:13px;padding:0 22px;color:#fff;font-family:var(--fh);font-weight:600;font-size:19px}
.ticker .it i{color:#fff;opacity:.85;font-size:14px}

/* ===== STATS ===== */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px 22px;text-align:center;box-shadow:var(--shadow-sm);transition:transform .2s}
.stat:hover{transform:translateY(-5px)}
.stat .ic{width:48px;height:48px;border-radius:14px;margin:0 auto 12px;display:grid;place-items:center;font-size:20px;background:var(--blush-soft);color:var(--rose-deep)}
.stat .n{font-family:var(--fh);font-weight:700;font-size:40px;color:var(--rose-deep);line-height:1}
.stat .l{font-size:13.5px;color:var(--muted);font-weight:700;margin-top:5px}

/* ===== two-col shared (About, MediaText) ===== */
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.frame{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;background:var(--blush-soft)}
.frame.tall{aspect-ratio:3/4}
.frame.sq{aspect-ratio:1/1}
.frame img,.frame .ill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame .tag{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.92);color:var(--rose-deep);font-family:var(--fh);font-weight:600;font-size:13px;padding:7px 14px;border-radius:999px;box-shadow:var(--shadow-sm)}
.prose p{margin-bottom:14px}.prose p:last-child{margin-bottom:0}
.sign{font-family:var(--fa-acc);font-weight:700;font-size:26px;color:var(--rose-deep);margin-top:6px}

/* ===== PACKAGES (Role) ===== */
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pkg{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:28px 24px;cursor:pointer;transition:transform .22s cubic-bezier(.34,1.56,.64,1),border-color .2s,box-shadow .25s;position:relative;text-align:left}
.pkg:hover{transform:translateY(-7px) rotate(-.5deg);box-shadow:var(--shadow);border-color:var(--lilac)}
.pkg.sel{border-color:var(--rose);box-shadow:0 0 0 4px rgba(240,122,170,.18),var(--shadow)}
.pkg .pop{position:absolute;top:-12px;right:18px;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#5a3d05;font-family:var(--fh);font-weight:600;font-size:12px;padding:4px 12px;border-radius:999px}
.pkg .pn{font-family:var(--fh);font-weight:600;font-size:21px;color:var(--ink)}
.pkg .pp{font-family:var(--fh);font-weight:700;font-size:34px;color:var(--rose-deep);margin:6px 0 2px}
.pkg .pp small{font-size:14px;color:var(--muted);font-weight:600}
.pkg ul{list-style:none;margin:16px 0 0;display:grid;gap:9px}
.pkg li{display:flex;gap:9px;font-size:14px;align-items:flex-start}
.pkg li i{color:var(--mint);margin-top:3px}
.pkg .choose{margin-top:18px;font-family:var(--fh);font-weight:600;font-size:14px;color:var(--rose-deep);display:inline-flex;align-items:center;gap:7px}
.enq{margin-top:24px;background:var(--blush-soft);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:none}
.enq.show{display:block;animation:pop .5s cubic-bezier(.22,1,.36,1) both}
.enq h4{font-family:var(--fh);font-size:18px;margin-bottom:4px}
.enq .sel-name{color:var(--rose-deep)}

/* ===== CHECKLIST ===== */
.check-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,430px));justify-content:center;gap:14px 30px}
.chk{display:flex;gap:13px;align-items:flex-start;padding:6px 0}
.chk .tick{width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,var(--mint),#6fd3ac);color:#0a5b3f;display:grid;place-items:center;flex:0 0 auto;font-size:13px}
.chk b{font-family:var(--fh);font-weight:600;font-size:15.5px}
.chk p{font-size:14px;color:var(--muted);margin-top:1px}

/* ===== ICONGRID ===== */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 20px;text-align:center;transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}
.feat:hover{transform:translateY(-7px) scale(1.02);box-shadow:var(--shadow)}
.feat .bub{width:64px;height:64px;border-radius:20px;margin:0 auto 14px;display:grid;place-items:center;font-size:26px;color:#fff;position:relative;transition:transform .3s}
.feat:hover .bub{transform:rotate(-8deg) scale(1.08)}
.feat:nth-child(1) .bub{background:linear-gradient(135deg,var(--rose),var(--rose-deep))}
.feat:nth-child(2) .bub{background:linear-gradient(135deg,var(--sky),#6cb8e0)}
.feat:nth-child(3) .bub{background:linear-gradient(135deg,var(--lilac),var(--lilac-deep))}
.feat:nth-child(4) .bub{background:linear-gradient(135deg,var(--mint),#5cc79a)}
.feat:nth-child(5) .bub{background:linear-gradient(135deg,var(--gold),var(--gold-deep))}
.feat:nth-child(6) .bub{background:linear-gradient(135deg,#f3a0c4,var(--rose-deep))}
.feat:nth-child(7) .bub{background:linear-gradient(135deg,#b794e8,var(--lilac-deep))}
.feat:nth-child(8) .bub{background:linear-gradient(135deg,#7fd4f0,#3f9fcf)}
.feat h3{font-size:17px;margin-bottom:4px}
.feat p{font-size:13.5px;color:var(--muted)}

/* ===== GALLERY ===== */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:178px;gap:14px}
.gtile{position:relative;border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--blush-soft);cursor:pointer}
.gtile.big{grid-column:span 2;grid-row:span 2}
.gtile img,.gtile .ill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gtile:hover img{transform:scale(1.07)}
.gtile .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(transparent,rgba(36,21,67,.72));color:#fff;font-family:var(--fh);font-weight:600;font-size:14px}
.gtile .mag{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--rose-deep);display:grid;place-items:center;opacity:0;transform:scale(.7);transition:.25s}
.gtile:hover .mag{opacity:1;transform:scale(1)}

/* ===== QUOTE ===== */
.qrot{max-width:780px;margin:0 auto;text-align:center;position:relative;min-height:200px}
.qslide{position:absolute;inset:0;opacity:0;filter:blur(10px);transform:scale(.94);transition:opacity .55s ease,transform .6s cubic-bezier(.34,1.56,.64,1),filter .55s ease;visibility:hidden}
.qslide.on{opacity:1;filter:blur(0);transform:scale(1);position:relative;visibility:visible}
.qslide .qt{font-family:var(--fh);font-weight:500;font-size:clamp(20px,2.6vw,27px);line-height:1.4;color:#fff}
.twilight .qstars{color:var(--gold);font-size:18px;margin-bottom:14px;letter-spacing:3px}
.qslide .who{margin-top:18px;font-family:var(--fa-acc);font-weight:700;font-size:22px;color:var(--gold)}
.qslide .who small{display:block;font-family:var(--fb);font-size:13px;font-weight:600;color:var(--twi-muted)}
.qdots{display:flex;gap:8px;justify-content:center;margin-top:26px}
.qdots button{width:9px;height:9px;border-radius:999px;border:none;background:rgba(255,255,255,.3);cursor:pointer;transition:width .25s,background .25s}
.qdots button.on{width:26px;background:var(--gold)}

/* ===== STEPS ===== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.step{text-align:center;position:relative}
.step .num{width:62px;height:62px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;font-family:var(--fh);font-weight:700;font-size:24px;color:#fff;background:linear-gradient(135deg,var(--rose),var(--lilac-deep));box-shadow:0 12px 24px rgba(154,106,214,.34);position:relative;z-index:2}
.step h3{font-size:18px;margin-bottom:5px}
.step p{font-size:14px;color:var(--muted)}
.steps .track{position:absolute;top:31px;left:10%;right:10%;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--lilac) 14%,var(--rose) 50%,var(--gold) 86%,transparent);z-index:0;opacity:.4}.steps .fairy{position:absolute;top:-6px;left:-9%;width:56px;z-index:3;pointer-events:none;animation:fly 5.5s ease-in-out infinite}@keyframes fly{0%{left:-9%;opacity:0;transform:translateY(0) rotate(-4deg) scaleX(-1)}8%{opacity:1}26%{transform:translateY(-14px) rotate(5deg) scaleX(-1)}50%{transform:translateY(3px) rotate(-4deg) scaleX(-1)}74%{transform:translateY(-14px) rotate(5deg) scaleX(-1)}92%{opacity:1}100%{left:100%;opacity:0;transform:translateY(0) rotate(4deg) scaleX(-1)}}

/* ===== MAP ===== */
.map-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:34px;align-items:stretch}
#map{min-height:380px;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);z-index:1}
.map-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow-sm)}
.map-card .mr{display:flex;gap:13px;padding:13px 0;border-top:1px solid var(--line);align-items:flex-start}
.map-card .mr:first-of-type{border-top:none}
.map-card .mr i{width:38px;height:38px;border-radius:11px;background:var(--blush-soft);color:var(--rose-deep);display:grid;place-items:center;flex:0 0 auto}
.map-card .mr b{font-family:var(--fh);font-size:15px;display:block}
.map-card .mr span{font-size:14px;color:var(--muted)}

/* ===== FAQ ===== */
.faq{max-width:780px;margin:0 auto}
.qa{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:12px;background:var(--card);overflow:hidden;transition:box-shadow .25s}
.qa[open]{box-shadow:var(--shadow-sm)}
.qa summary{list-style:none;cursor:pointer;padding:18px 22px;font-family:var(--fh);font-weight:600;font-size:16.5px;display:flex;align-items:center;gap:13px}
.qa summary::-webkit-details-marker{display:none}
.qa summary .qi{width:30px;height:30px;border-radius:9px;background:var(--blush-soft);color:var(--rose-deep);display:grid;place-items:center;flex:0 0 auto;transition:transform .3s}
.qa[open] summary .qi{transform:rotate(135deg);background:var(--rose);color:#fff}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 22px}
.qa .ans p{padding:0 0 18px 43px;color:var(--muted);font-size:14.5px}

/* ===== RICHTEXT / COLUMNS ===== */
.rich{max-width:760px;margin:0 auto;text-align:center}
.rich p{font-size:16.5px;color:var(--muted);margin-bottom:14px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,320px));justify-content:center;gap:24px}
.col{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px 24px;box-shadow:var(--shadow-sm)}
.col .ci{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:22px;color:#fff;margin-bottom:14px;background:linear-gradient(135deg,var(--lilac),var(--lilac-deep))}
.col:nth-child(2) .ci{background:linear-gradient(135deg,var(--rose),var(--rose-deep))}
.col:nth-child(3) .ci{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#5a3d05}
.col h3{font-size:19px;margin-bottom:7px}
.col p{font-size:14.5px;color:var(--muted)}

/* ===== TABLE ===== */
.tbl-wrap{overflow-x:auto;border-radius:var(--r);box-shadow:var(--shadow-sm);border:1px solid var(--line)}
table.pt{width:100%;border-collapse:collapse;background:var(--card);min-width:560px}
table.pt th,table.pt td{padding:15px 18px;text-align:center;border-bottom:1px solid var(--line)}
table.pt thead th{font-family:var(--fh);font-weight:600;font-size:16px;background:var(--blush-soft);color:var(--ink)}
table.pt thead th.feat-col{background:linear-gradient(135deg,var(--rose),var(--rose-deep));color:#fff}
table.pt th.feat-col,table.pt td.feat-col{background:var(--blush-soft)}
table.pt tbody td.feat-col{color:var(--ink);font-weight:600}
table.pt tr.feat-row > *{background:var(--blush-soft)}
table.pt tr.feat-row td{color:var(--ink);font-weight:600}
table.pt tbody th{text-align:left;font-family:var(--fb);font-weight:700;font-size:14px;color:var(--ink)}
table.pt td{font-size:14px;color:var(--muted)}
table.pt td i.yes{color:var(--mint)}table.pt td i.no{color:var(--line)}
table.pt .price{font-family:var(--fh);font-weight:700;font-size:22px;color:var(--rose-deep)}
table.pt tr:last-child td,table.pt tr:last-child th{border-bottom:none}

/* ===== EMBED ===== */
.embed{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;box-shadow:var(--shadow);cursor:pointer;background:var(--twilight)}
.embed .ill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.embed::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,21,67,.2),rgba(36,21,67,.55))}
.embed .pb{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--rose-deep);display:grid;place-items:center;font-size:28px;z-index:2;transition:transform .25s;box-shadow:0 14px 30px rgba(0,0,0,.3)}
.embed:hover .pb{transform:translate(-50%,-50%) scale(1.1)}
.embed .lbl{position:absolute;left:22px;bottom:18px;z-index:2;color:#fff;font-family:var(--fh);font-weight:600;font-size:17px}

/* ===== DOWNLOAD ===== */
.dl{display:flex;align-items:center;gap:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;box-shadow:var(--shadow-sm);max-width:640px;margin:0 auto;flex-wrap:wrap}
.dl .dic{width:62px;height:62px;border-radius:17px;background:linear-gradient(135deg,var(--rose),var(--lilac-deep));color:#fff;display:grid;place-items:center;font-size:26px;flex:0 0 auto}
.dl .dt{flex:1;min-width:200px}
.dl .dt b{font-family:var(--fh);font-size:18px;display:block}
.dl .dt span{font-size:13.5px;color:var(--muted)}

/* ===== CONTACT ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.cform{display:grid;gap:14px}
.cform .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld label{display:block;font-family:var(--fh);font-weight:500;font-size:13.5px;margin-bottom:5px}
.fld input,.fld textarea,.fld select{width:100%;font-family:var(--fb);font-size:15px;border:1.5px solid var(--line);border-radius:13px;padding:12px 14px;background:var(--card);color:var(--ink)}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--rose)}
.cinfo .ci-row{display:flex;gap:14px;padding:15px 0;border-top:1px solid var(--line);align-items:flex-start}
.cinfo .ci-row:first-child{border-top:none}
.cinfo .ci-row i{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--blush),var(--lilac));color:var(--rose-deep);display:grid;place-items:center;flex:0 0 auto}
.cinfo .ci-row b{font-family:var(--fh);font-size:15px;display:block}
.cinfo .ci-row span,.cinfo .ci-row a{font-size:14.5px;color:var(--muted);text-decoration:none}
.cinfo .ci-row a:hover{color:var(--rose-deep)}

@media(max-width:900px){
  .hero .inner{grid-template-columns:1fr;gap:30px;padding:54px 20px 84px}
  /* The three floating balloons are absolutely positioned by percentage against
     the hero. On two columns they sit in the empty right-hand half; the moment
     the hero collapses to ONE column the copy fills that space and the balloons
     land behind the h1 - which reads as an obstruction even though .hero .inner
     (z-index 3) paints above .balloon (z-index 2). Reported by the client
     12th Aug 2026. They are pure decoration, and the hero keeps its photo,
     wash, sweep, starfield, dust and bokeh, so nothing is lost by dropping
     them here. Hidden at the SAME breakpoint that causes it, so the two can
     never drift apart. */
  .balloon{display:none}
  .two,.map-grid,.contact-grid{grid-template-columns:1fr;gap:30px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .pkg-grid,.cols,.steps{grid-template-columns:1fr}
  .steps .track{display:none}
  .check-grid{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .gtile.big{grid-column:span 2;grid-row:span 1}
}
@media(max-width:560px){
  .blk{padding:40px 0}
  .feat-grid{grid-template-columns:1fr 1fr}
  .nav-right .btn span,.nav-right .btn .lbl{display:none}
  .cform .row2{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto}
  .rv{opacity:1!important;animation:none!important}
}
@media(max-width:1150px){
  .burger{display:inline-flex}
  .nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:6px 0;background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 26px;border-bottom:1px solid var(--line);font-size:15px}
  .nav-links a:last-child{border-bottom:none}
  .nav-links a::after{display:none}
}

/* ===== invite teaser ===== */
.iv-teaser{background:linear-gradient(160deg,#fff,#fff7e6);border-radius:22px;padding:28px 26px;box-shadow:var(--shadow);border:1px solid rgba(243,194,75,.5);position:relative;max-width:380px;margin:0 auto}
.iv-teaser .ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--rose),var(--rose-deep));color:#fff;font-family:var(--fa-acc);font-weight:700;font-size:17px;padding:5px 18px;border-radius:999px;box-shadow:0 8px 18px rgba(217,82,138,.4)}
.tchip{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:16px}
/* ===== package builder ===== */
.pb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}
.pb-card{position:relative;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:22px 20px;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .25s;font-family:var(--fb)}
.pb-card:hover{transform:translateY(-4px);border-color:var(--lilac);box-shadow:var(--shadow)}
.pb-card.sel{border-color:var(--rose);box-shadow:0 0 0 4px rgba(240,122,170,.18),var(--shadow-sm)}
.pb-card .pop{position:absolute;top:-11px;right:16px;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#5a3d05;font-family:var(--fh);font-weight:600;font-size:11px;padding:3px 11px;border-radius:999px}
.pb-card .pn{display:block;font-family:var(--fh);font-weight:600;font-size:18px;color:var(--ink)}
.pb-card .pp{display:block;font-family:var(--fh);font-weight:700;font-size:24px;color:var(--rose-deep);margin:3px 0}
.pb-card .pd{display:block;font-size:13px;color:var(--muted)}
.pb-lower{display:grid;grid-template-columns:1.45fr 1fr;gap:22px;align-items:start}
.pb-extras h4{font-family:var(--fh);font-size:17px;margin-bottom:13px}
.pb-chips{display:flex;flex-wrap:wrap;gap:10px}
.pb-x{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:10px 16px;cursor:pointer;font-family:var(--fh);font-weight:500;font-size:14px;color:var(--ink);transition:.2s}
.pb-x i{color:var(--lilac-deep)}.pb-x small{font-weight:600;color:var(--muted)}
.pb-x:hover{border-color:var(--lilac);transform:translateY(-2px)}
.pb-x[aria-pressed="true"]{background:var(--rose);border-color:var(--rose);color:#fff}
.pb-x[aria-pressed="true"] i,.pb-x[aria-pressed="true"] small{color:#fff}
.pb-guests{margin-top:24px}.pb-guests label{display:block;font-family:var(--fh);font-weight:500;font-size:14px;margin-bottom:18px}.pb-guests label b{color:var(--rose-deep);font-weight:700;font-size:16px}.pb-slider{position:relative}.pb-range{-webkit-appearance:none;appearance:none;width:100%;height:14px;border-radius:999px;background:linear-gradient(90deg,var(--rose) 0,var(--rose) var(--pct,16%),var(--blush) var(--pct,16%),var(--blush) 100%);outline:none;cursor:pointer}.pb-range:focus-visible{box-shadow:0 0 0 4px rgba(240,122,170,.3)}.pb-range::-webkit-slider-runnable-track{height:14px;border-radius:999px;background:transparent}.pb-range::-moz-range-track{height:14px;border-radius:999px;background:transparent}.pb-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:58px;height:58px;margin-top:-22px;border:none;background:url(https://neooptic.com/pitches/kidsparties/fairy.png) center/contain no-repeat;cursor:grab;filter:drop-shadow(0 4px 7px rgba(67,49,79,.32));transform:scaleX(-1)}.pb-range::-moz-range-thumb{width:58px;height:58px;border:none;background:url(https://neooptic.com/pitches/kidsparties/fairy.png) center/contain no-repeat;cursor:grab;filter:drop-shadow(0 4px 7px rgba(67,49,79,.32));transform:scaleX(-1)}.pb-range:active::-webkit-slider-thumb{cursor:grabbing}.pb-slider-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:9px;font-weight:600}.pb-guest-note{font-size:12px;color:var(--muted);margin-top:8px}
.pb-summary{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow-sm);position:sticky;top:90px}
.pb-sum-label{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.pb-total{font-family:var(--fh);font-weight:700;font-size:46px;color:var(--rose-deep);line-height:1.15}
.pb-break{font-size:14px;color:var(--ink);margin-bottom:18px;min-height:20px}
.pb-note{font-size:12px;color:var(--muted);margin-top:12px}
/* ===== modal + invite builder ===== */
.modal{position:fixed;inset:0;z-index:200;background:rgba(36,21,67,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-card{background:var(--card);border-radius:26px;box-shadow:0 40px 90px rgba(0,0,0,.42);max-width:920px;width:100%;max-height:92vh;overflow:auto;position:relative}
.modal-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:none;background:var(--blush-soft);color:var(--rose-deep);font-size:22px;cursor:pointer;z-index:3;line-height:1}
.modal-close:hover{background:var(--rose);color:#fff}
.modal-grid{display:grid;grid-template-columns:1fr 1fr}
.iv-controls{padding:34px 30px}
.iv-controls h3{font-family:var(--fh);font-size:24px;margin-bottom:16px}
.iv-controls>label{display:block;font-family:var(--fh);font-weight:500;font-size:13.5px;margin-bottom:8px}
.iv-themes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.iv-th{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:8px 14px;cursor:pointer;font-family:var(--fh);font-weight:500;font-size:13.5px;color:var(--ink)}
.iv-th[aria-pressed="true"]{background:var(--rose);border-color:var(--rose);color:#fff}
.iv-controls .fld{margin-bottom:13px}
.iv-controls .fld label{display:block;font-family:var(--fh);font-weight:500;font-size:13px;margin-bottom:5px}
.iv-controls .fld input{width:100%;font-family:var(--fb);font-size:15px;border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;background:var(--card);color:var(--ink)}
.iv-controls .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.iv-note{font-size:12px;color:var(--muted);margin-top:12px}
.iv-preview-wrap{background:linear-gradient(160deg,#f5ecfb,#fde9f1);display:grid;place-items:center;padding:30px;border-radius:0 26px 26px 0}
.iv-preview{background:#fff;border-radius:18px;padding:28px 24px;width:100%;max-width:320px;box-shadow:0 20px 44px rgba(0,0,0,.16);position:relative;border:3px solid var(--iv-c1,#F07AAA);text-align:center}
.iv-preview::before{content:"";position:absolute;inset:8px;border:2px dashed var(--iv-c1,#F07AAA);opacity:.4;border-radius:11px;pointer-events:none}
.iv-pv-motif{width:56px;height:56px;border-radius:50%;margin:0 auto 8px;display:grid;place-items:center;font-size:25px;color:#fff;background:linear-gradient(135deg,var(--iv-c1,#F07AAA),var(--iv-c2,#F3C24B))}
.iv-pv-inv{font-family:var(--fa-acc);font-weight:700;font-size:23px;color:var(--iv-c1,#F07AAA)}
.iv-pv-word{font-family:var(--fh);font-weight:600;font-size:16px;color:var(--ink);margin:6px 0;line-height:1.3}
.iv-pv-name{font-family:var(--fa-acc);font-weight:700;font-size:30px;color:var(--iv-c1,#F07AAA)}
.iv-pv-rows{font-size:13px;color:var(--ink);margin-top:10px;line-height:1.7}
.iv-pv-sleeps{display:inline-block;margin-top:12px;background:var(--iv-c1,#F07AAA);color:#fff;font-family:var(--fh);font-weight:600;font-size:13px;padding:5px 14px;border-radius:999px}
.iv-pv-foot{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-top:14px}
@media(max-width:760px){.pb-cards{grid-template-columns:1fr}.pb-lower{grid-template-columns:1fr}.pb-summary{position:static}.modal-grid{grid-template-columns:1fr}.iv-preview-wrap{border-radius:0 0 26px 26px;padding:24px}}

/* ---- theme additions (nav wordmark + standing cursor-pointer rule) ---- */
.logo .logo-tx{display:flex;flex-direction:column;justify-content:center}
.logo .logo-tx b{font-family:var(--fh);font-weight:700;font-size:16px;line-height:1.1;letter-spacing:-.02em;max-width:150px}
.logo .logo-tx small{display:block;font-family:var(--fa-acc);font-size:14.5px;color:var(--rose-deep);font-weight:700;margin-top:1px}
@media(max-width:600px){.logo .logo-tx b{font-size:15px}.logo .logo-tx small{font-size:12.5px}}
.fld select,.pkg,.gtile,.embed{cursor:pointer}

/* ---- hardcoded site footer (.ftr) - princess theme, Little Princess Shop ---- */
.ftr{background:var(--twilight);color:var(--twi-ink);padding:56px 0 28px;position:relative;overflow:hidden}
.ftr .wrap{position:relative;z-index:2}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr .8fr;gap:38px}
.ftr-brand .ftr-logo{height:88px;width:auto;display:block;margin:-6px 0 14px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.ftr-brand .ftr-name{font-family:var(--fh);font-size:24px;color:#fff;display:block;margin-bottom:14px}
.ftr-addr{display:flex;gap:9px;font-size:14.5px;line-height:1.55;color:var(--twi-muted);margin:0 0 12px}
.ftr-addr i{color:var(--gold);margin-top:3px;flex:0 0 auto}
.ftr-addr a{color:var(--twi-muted);text-decoration:none}
.ftr-addr a:hover{color:var(--gold);text-decoration:underline}
.ftr-line{font-size:14.5px;margin:0 0 7px;color:var(--twi-muted);display:flex;align-items:center;gap:9px}
.ftr-line i{color:var(--gold);width:16px;text-align:center;flex:0 0 auto}
.ftr-line a{color:var(--twi-muted);text-decoration:none}
.ftr-line a:hover{color:var(--gold)}
.ftr-soc{display:flex;gap:10px;margin-top:16px}
.ftr-soc a{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff;text-decoration:none;transition:background-color .18s,transform .18s}
.ftr-soc a:hover{background:linear-gradient(135deg,var(--rose),var(--gold));transform:translateY(-2px)}
.ftr-col h5{font-family:var(--fh);font-size:16px;color:#fff;margin:2px 0 14px}
.ftr-col a{color:var(--twi-muted);text-decoration:none;display:block;padding:5px 0;font-size:14.5px;transition:color .15s,padding-left .15s}
.ftr-col a:hover{color:var(--gold);padding-left:4px}
.ftr-bot{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;align-items:center;gap:8px 20px;font-size:13px;color:var(--twi-muted)}
.ftr-bot>span{white-space:nowrap}
.ftr-bot a{color:var(--gold);text-decoration:none;display:inline;padding:0;font-size:inherit} /* display:inline defeats the generic `footer a{display:block}` above - that block box was what forced 'neo optic' onto its own line */
.ftr-bot a:hover{text-decoration:underline}
@media(max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr;gap:30px}.ftr-brand{grid-column:1 / -1}}
@media(max-width:560px){.ftr-grid{grid-template-columns:1fr}.ftr-bot{flex-direction:column;align-items:flex-start;gap:8px}}

/* ============================================================
   LIGHT PINK CHROME - Enchanted / Little Princess (16th Jul 2026)
   Nicola's request: soft-pink hero on every page, soft-pink header
   and footer, logo in a white badge descending into the hero.
   Palette reuses the hero-light tokens so top and tail match.
   ============================================================ */

/* ---- HERO: light pink on EVERY page ----------------------------------
   The _hero partial already outputs class "hero hero-light"; these rules
   (folded in from the signed-off landing page) give that class its look,
   so all heroes are light without any per-page change. */
.hero-light{background:radial-gradient(120% 120% at 78% -12%,#FFE7F1 0%,var(--cream) 52%,#FFF1F7 100%);color:var(--ink)}
.hero-light .hero-bg{background:var(--blush-soft)}
.hero-light .hero-wash{background:linear-gradient(100deg,rgba(255,247,251,.94) 0%,rgba(255,241,247,.86) 34%,rgba(253,234,241,.62) 62%,rgba(251,222,233,.52) 100%),linear-gradient(180deg,rgba(255,247,251,.30),rgba(251,211,226,.30))}
.hero-light .starfield,.hero-light .hero-sweep{display:none}
.hero-light .dust .d{box-shadow:0 0 6px 2px rgba(217,82,138,.40),0 0 3px rgba(243,194,75,.55)}
.hero-light .bokeh{opacity:.42}
.hero-light h1{color:var(--twilight)}
.hero-light .lede{color:#5a3f63}
.hero-light .eyebrow{color:var(--rose-deep)}
.hero-light .eyebrow i{color:var(--rose)}
.hero-light .trust,.hero-light .hero-trust{color:#5a3f63}
.hero-light .trust i,.hero-light .hero-trust i{color:var(--rose-deep)}
/* Highlight word on the LIGHT hero: the pale gold gradient washes out on pink,
   so use a deeper rose->gold clip that stays vivid and readable on the light bg. */
.hero-light h1 .em{background:linear-gradient(110deg,var(--rose-deep) 0%,var(--rose) 42%,var(--gold-deep) 60%,#C98A1E 100%);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--rose-deep)}
html[data-theme="dark"] .hero-light h1 .em{background:linear-gradient(120deg,var(--gold),#ffe9a8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html[data-theme="dark"] .hero-light{background:radial-gradient(120% 120% at 78% -12%,#3a1f3c 0%,var(--bg) 55%,#301a44 100%);color:var(--tx)}
html[data-theme="dark"] .hero-light .hero-wash{background:linear-gradient(180deg,rgba(27,16,48,.74),rgba(46,28,77,.6) 46%,rgba(58,34,100,.62) 100%)}
html[data-theme="dark"] .hero-light h1{color:var(--tx)}

/* ---- LOGO: the client's transparent-background logo sits bare on the pink
   header bar - no white card. It dips into the hero via its own negative bottom
   margin. (Nicola, 22nd Jul 2026: remove the white badge, show the transparent
   logo a little larger.) A subtle drop-shadow keeps it legible where it overlaps
   the darker hero below the bar. */
.logo{background:none;border:0;border-radius:0;padding:0;box-shadow:none;margin-bottom:-46px;align-self:flex-start}
.logo .logoimg{margin:0;border-radius:0;box-shadow:none;height:128px;filter:drop-shadow(0 6px 12px rgba(67,49,79,.28))}
@media(max-width:600px){.logo{margin-bottom:-32px}.logo .logoimg{height:96px}}

/* ---- HEADER: soft pink bar ------------------------------------------- */
nav.bar{background:color-mix(in srgb,#FFE7F1 78%,transparent);border-bottom:1px solid var(--line)}

/* ---- FOOTER: light pink (same palette as the hero) -------------------
   Inverts the dark twilight footer to the hero-light gradient with ink
   text and rose links. Every dark-on-light element is re-coloured so it
   stays readable: name, address, phone/email lines, social chips, column
   links, the divider and the neo optic credit. */
.ftr{background:radial-gradient(120% 130% at 80% -20%,#FFE7F1 0%,var(--cream) 55%,#FFF1F7 100%);color:var(--ink);border-top:1px solid var(--line)}
.ftr-brand .ftr-logo{filter:drop-shadow(0 6px 14px rgba(154,90,150,.22))}
.ftr-brand .ftr-name{color:var(--ink)}
.ftr-addr{color:var(--muted)}
.ftr-addr i{color:var(--rose-deep)}
.ftr-addr a{color:var(--muted)}
.ftr-addr a:hover{color:var(--rose-deep)}
.ftr-line{color:var(--muted)}
.ftr-line i{color:var(--rose-deep)}
.ftr-line a{color:var(--muted)}
.ftr-line a:hover{color:var(--rose-deep)}
.ftr-line svg{color:var(--rose-deep) !important}
.ftr-soc a{background:rgba(217,82,138,.12);color:var(--rose-deep)}
.ftr-soc a:hover{background:linear-gradient(135deg,var(--rose),var(--gold));color:#fff}
.ftr-col h5{color:var(--ink)}
.ftr-col a{color:var(--muted)}
.ftr-col a:hover{color:var(--rose-deep)}
.ftr-bot{border-top:1px solid var(--line);color:var(--muted)}
.ftr-bot a{color:var(--rose-deep)}
html[data-theme="dark"] .ftr{background:var(--twilight);color:var(--twi-ink);border-top:none}
html[data-theme="dark"] .ftr-brand .ftr-name,html[data-theme="dark"] .ftr-col h5{color:#fff}
html[data-theme="dark"] .ftr-addr,html[data-theme="dark"] .ftr-line,html[data-theme="dark"] .ftr-col a,html[data-theme="dark"] .ftr-addr a,html[data-theme="dark"] .ftr-line a,html[data-theme="dark"] .ftr-bot{color:var(--twi-muted)}
html[data-theme="dark"] .ftr-soc a{background:rgba(255,255,255,.1);color:#fff}
html[data-theme="dark"] .ftr-bot{border-top:1px solid rgba(255,255,255,.14)}


/* ============================================================
   WAVE 6 BLOCKS - restored 16th Jul 2026. These style the nine new
   block types (CardCollection, People, Pricing, LogoCloud, OpeningHours,
   Announcement, Tabs, BeforeAfter, RelatedPages). They were folded in at
   v1.13 but a later light-pink build started from a pre-Wave6 base and
   dropped them - re-added here so the blocks render correctly.
   ============================================================ */
/* ===== 21 CARD COLLECTION ===== */
.story-grid{display:grid;grid-template-columns:repeat(var(--story-cols,2),1fr);gap:22px}
.story-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;min-width:0;transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,border-color .2s}
.story-card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:var(--lilac)}
.story-card .story-img{aspect-ratio:16/10;overflow:hidden;background:var(--blush-soft);position:relative}
.story-card .story-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.story-card:hover .story-img img{transform:scale(1.06)}
.story-card .story-badge{position:absolute;left:14px;top:14px;background:rgba(255,255,255,.94);color:var(--rose-deep);border-radius:999px;padding:5px 11px;font-family:var(--fh);font-size:11.5px;font-weight:700;box-shadow:var(--shadow-sm)}
.story-card .story-badge.in-body{position:static;display:inline-block;margin-bottom:12px}
.story-card .story-body{padding:22px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1}
.story-card h3{font-size:21px}
.story-card p{font-size:14px;color:var(--muted);flex:1}
.story-link{display:inline-flex;align-items:center;gap:8px;margin-top:4px;color:var(--rose-deep);text-decoration:none;font-family:var(--fh);font-size:14px;font-weight:650}
.story-link i{transition:transform .2s}.story-link:hover i{transform:translateX(4px)}
.story-card.featured{grid-column:1/-1;display:grid;grid-template-columns:1.08fr .92fr}
.story-card.featured .story-img{aspect-ratio:auto;min-height:100%}
.story-card.featured .story-body{padding:30px}
.story-card.featured h3{font-size:28px}

/* ===== 23 PEOPLE ===== */
.people-grid{display:grid;grid-template-columns:repeat(var(--people-cols,4),1fr);gap:18px}
.person-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 15px 22px;text-align:center;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:transform .22s,box-shadow .22s}
.person-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.person-photo{aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,var(--blush),var(--lilac));position:relative;margin-bottom:17px}
.person-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.person-photo .person-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:52px;color:#fff}
.person-card h3{font-size:18px}.person-role{font-family:var(--fa-acc);font-size:20px;font-weight:700;color:var(--rose-deep);margin-top:2px}
.person-card p{font-size:13.5px;color:var(--muted);margin-top:7px}
.person-social{display:flex;justify-content:center;gap:7px;margin-top:12px}
.person-social a{width:32px;height:32px;border-radius:10px;background:var(--blush-soft);display:grid;place-items:center;text-decoration:none;color:var(--rose-deep)}

/* ===== 24 PRICING ===== */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.price-card{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:28px 25px;box-shadow:var(--shadow-sm);position:relative;display:flex;flex-direction:column}
.price-card.featured{border-color:var(--rose);transform:translateY(-8px);box-shadow:0 0 0 5px rgba(240,122,170,.12),var(--shadow)}
.price-ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#5a3d05;border-radius:999px;padding:5px 15px;font-family:var(--fh);font-size:11.5px;font-weight:700}
.price-name{font-family:var(--fh);font-size:21px;font-weight:650}
.price-value{font-family:var(--fh);font-size:43px;font-weight:700;line-height:1;color:var(--rose-deep);margin:10px 0 4px}
.price-value small{font-family:var(--fb);font-size:13px;color:var(--muted);font-weight:700}
.price-desc{font-size:13.5px;color:var(--muted);min-height:44px}
.price-list{list-style:none;display:grid;gap:10px;margin:20px 0 24px;flex:1}
.price-list li{display:flex;gap:9px;font-size:14px}.price-list i{color:#45b786;margin-top:4px}
.price-card .btn{justify-content:center}

/* ===== 25 LOGO CLOUD ===== */
.logo-cloud{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:stretch}
.logo-mark{min-height:114px;background:var(--card);border:1px solid var(--line);border-radius:18px;display:flex;align-items:center;justify-content:center;gap:10px;padding:18px;text-align:left;color:var(--muted);filter:grayscale(.15);transition:transform .2s,border-color .2s,color .2s,filter .2s,box-shadow .2s}
.logo-mark:hover{transform:translateY(-4px);border-color:var(--lilac);color:var(--ink);filter:none;box-shadow:var(--shadow-sm)}
.logo-mark i{font-size:27px;color:var(--rose-deep)}
.logo-mark b{font-family:var(--fh);font-size:14px;line-height:1.15}.logo-mark small{display:block;font-family:var(--fb);font-size:10px;color:var(--muted);margin-top:3px}
.logo-mark img{width:auto;height:auto;max-width:96px;max-height:56px;object-fit:contain;flex:0 0 auto}

/* ===== 26 OPENING HOURS ===== */
.hours-shell{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch}
.hours-card,.hours-side{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:28px}
.hours-status{display:inline-flex;align-items:center;gap:8px;background:#e4f8ef;color:#16724f;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:800;margin-bottom:18px}
html[data-theme="dark"] .hours-status{background:#183d32;color:#9aefd0}
.hours-status::before{content:"";width:8px;height:8px;border-radius:50%;background:#2fb47c;box-shadow:0 0 0 4px rgba(47,180,124,.14)}
.hours-status.is-closed{background:#fff0f2;color:#9b2943}.hours-status.is-closed::before{background:#d65370;box-shadow:0 0 0 4px rgba(214,83,112,.14)}
html[data-theme="dark"] .hours-status.is-closed{background:#4a222c;color:#ffc1cf}
.hours-row .hours-note{display:block;font-style:normal;font-size:11.5px;color:var(--rose-deep);font-weight:600;margin-top:2px}
.hours-list{display:grid}
.hours-row{display:grid;grid-template-columns:1fr auto;gap:18px;padding:12px 0;border-top:1px solid var(--line);font-size:14.5px}
.hours-row:first-child{border-top:none}.hours-row b{font-family:var(--fh);font-weight:600}.hours-row span{color:var(--muted);font-weight:700}.hours-row.today b,.hours-row.today span{color:var(--rose-deep)}
.hours-side{background:linear-gradient(150deg,var(--blush-soft),var(--card));display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.hours-side .hours-icon{width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,var(--rose),var(--lilac-deep));color:#fff;display:grid;place-items:center;font-size:23px;margin-bottom:18px}
.hours-side h3{font-size:24px}.hours-side p{color:var(--muted);font-size:14.5px;margin:9px 0 20px}

/* ===== 27 ANNOUNCEMENT ===== */
.announcement{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;background:linear-gradient(120deg,#fff7d5,#ffe4ef 52%,#eadcff);border:1px solid rgba(217,82,138,.18);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow-sm);color:#43314F;overflow:hidden}
.announcement.ann-success{background:linear-gradient(120deg,#e6f8ef,#effbf4 55%,#f2fff9);border-color:rgba(47,180,124,.30)}
.announcement.ann-warning{background:linear-gradient(120deg,#fff2d2,#fff7e3 55%,#fffaf0);border-color:rgba(224,165,44,.34)}
.announcement[hidden]{display:none}
.announcement::before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:60px;top:-90px;background:rgba(255,255,255,.38)}
.ann-icon{width:54px;height:54px;border-radius:17px;background:linear-gradient(135deg,var(--gold),var(--rose));color:#fff;display:grid;place-items:center;font-size:22px;box-shadow:0 10px 22px rgba(217,82,138,.25);position:relative;z-index:1}
.ann-copy{position:relative;z-index:1}.ann-kicker{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--rose-deep)}
.ann-copy h3{font-size:21px;margin:2px 0}.ann-copy p{font-size:14px;color:#6d5a76}
.ann-actions{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.ann-close{width:38px;height:38px;border:none;border-radius:12px;background:rgba(255,255,255,.72);color:#6d5a76;cursor:pointer;font-size:16px}
.ann-dismissed{display:none;text-align:center;background:var(--card);border:1px dashed var(--line);border-radius:var(--r);padding:26px;color:var(--muted)}
.ann-dismissed.show{display:block}.ann-dismissed button{margin-left:8px}

/* ===== 28 TABS ===== */
.oc-tabs{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden}
.oc-tablist{display:flex;gap:4px;padding:8px;background:var(--blush-soft);border-bottom:1px solid var(--line)}
.oc-tab{flex:1;border:none;background:transparent;color:var(--muted);border-radius:14px;padding:13px 15px;font-family:var(--fh);font-size:14px;font-weight:650;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.oc-tab:hover{color:var(--ink);background:rgba(255,255,255,.55)}
.oc-tab[aria-selected="true"]{background:var(--card);color:var(--rose-deep);box-shadow:0 5px 15px rgba(154,90,150,.11)}
.oc-tabpanel{padding:34px}
.tab-layout{display:grid;grid-template-columns:1fr .9fr;gap:34px;align-items:center}
.tab-layout.no-visual{grid-template-columns:1fr}
.tab-layout h3{font-size:26px}.tab-layout p{color:var(--muted);margin:10px 0 16px}
.tab-points{list-style:none;display:grid;gap:8px}.tab-points li{display:flex;gap:9px;font-size:14px}.tab-points i{color:var(--mint);margin-top:4px}
.tab-visual{border-radius:20px;min-height:250px;background:linear-gradient(135deg,var(--lilac),var(--rose));position:relative;overflow:hidden;display:grid;place-items:center;color:#fff}
.tab-visual::before,.tab-visual::after{content:"";position:absolute;border-radius:50%;border:28px solid rgba(255,255,255,.13)}
.tab-visual::before{width:220px;height:220px;right:-80px;top:-80px}.tab-visual::after{width:150px;height:150px;left:-70px;bottom:-70px}
.tab-visual i{font-size:70px;filter:drop-shadow(0 12px 20px rgba(67,49,79,.24));position:relative;z-index:1}
.tab-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ===== 29 BEFORE AND AFTER ===== */
.compare-shell{display:grid;grid-template-columns:1.35fr .65fr;gap:28px;align-items:center}
.compare-shell.compare-solo{grid-template-columns:1fr;max-width:860px;margin-left:auto;margin-right:auto}
.compare-stage{--pos:52%;position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:16/10;background:var(--twilight);box-shadow:var(--shadow);touch-action:none}
.compare-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare-after{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare-line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:#fff;transform:translateX(-1.5px);box-shadow:0 0 0 1px rgba(36,21,67,.25)}
.compare-handle{position:absolute;left:var(--pos);top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:#fff;color:var(--rose-deep);display:grid;place-items:center;box-shadow:0 8px 24px rgba(36,21,67,.32);font-size:17px}
.compare-stage:focus-within .compare-handle{outline:3px solid var(--gold);outline-offset:3px}
.compare-label{position:absolute;top:15px;background:rgba(36,21,67,.76);color:#fff;padding:5px 11px;border-radius:999px;font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.compare-label.before{left:15px}.compare-label.after{right:15px}
.compare-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare-copy h3{font-size:29px}.compare-copy p{color:var(--muted);margin:12px 0 18px}
.compare-value{display:inline-flex;align-items:center;gap:8px;background:var(--blush-soft);color:var(--rose-deep);border-radius:999px;padding:7px 12px;font-size:12.5px;font-weight:800}

/* ===== 30 RELATED PAGES ===== */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.related-card{position:relative;display:flex;flex-direction:column;min-height:230px;border-radius:var(--r);padding:26px;text-decoration:none;color:#fff;overflow:hidden;box-shadow:var(--shadow);transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s}
.related-card:nth-child(3n+1){background:linear-gradient(145deg,var(--rose),var(--rose-deep))}.related-card:nth-child(3n+2){background:linear-gradient(145deg,var(--lilac),var(--lilac-deep))}.related-card:nth-child(3n){background:linear-gradient(145deg,var(--gold),var(--gold-deep));color:#5a3d05}
.related-card:hover{transform:translateY(-7px) rotate(-.3deg);box-shadow:0 25px 50px rgba(67,49,79,.25)}
.related-card::after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-56px;bottom:-65px;border:28px solid rgba(255,255,255,.14)}
.related-card .related-icon{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:21px;margin-bottom:28px;position:relative;z-index:1}
.related-card h3{font-size:22px;position:relative;z-index:1}.related-card p{font-size:13.5px;opacity:.86;margin:7px 0 18px;position:relative;z-index:1}
.related-go{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-family:var(--fh);font-size:13px;font-weight:700;position:relative;z-index:1}
.related-go i{transition:transform .2s}.related-card:hover .related-go i{transform:translateX(5px)}

@media(max-width:1000px){
  .story-grid{grid-template-columns:1fr 1fr}.story-card.featured{grid-column:span 2}
  .people-grid{grid-template-columns:repeat(2,1fr)}
  .logo-cloud{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .story-grid,.price-grid,.hours-shell,.compare-shell,.related-grid{grid-template-columns:1fr}
  .story-card.featured{grid-column:auto;display:flex}.story-card.featured .story-img{aspect-ratio:16/10}.story-card.featured .story-body{padding:22px}.story-card.featured h3{font-size:23px}
  .price-card.featured{transform:none;margin-top:8px}
  .logo-cloud{grid-template-columns:1fr 1fr}
  .announcement{grid-template-columns:auto 1fr}.ann-actions{grid-column:1/-1;justify-content:flex-start;padding-left:72px}
  .oc-tablist{overflow-x:auto;justify-content:flex-start}.oc-tab{flex:0 0 auto;min-width:150px}.tab-layout{grid-template-columns:1fr}.tab-visual{min-height:190px}
  .compare-copy{order:-1}
}
@media(max-width:560px){
  .people-grid,.logo-cloud{grid-template-columns:1fr}
  .announcement{padding:19px;gap:13px}.ann-icon{width:46px;height:46px}.ann-actions{padding-left:59px;flex-wrap:wrap}
  .oc-tabpanel{padding:24px}.related-card{min-height:205px}
}

/* related-img: image variant of the related-card thumbnail (partial adds it
   when a page/override image exists; mirrors .related-icon footprint) */
.related-card .related-img{width:52px;height:52px;border-radius:16px;overflow:hidden;margin-bottom:28px;position:relative;z-index:1;box-shadow:0 6px 16px rgba(67,49,79,.18)}
.related-card .related-img img{width:100%;height:100%;object-fit:cover;border-radius:16px;display:block}