/* P3 Sportsplex · Black Label design system.
   Themes: red (default), purple (tumbling & cheer), camp (after school & camps, light + playful). */
:root, [data-theme="red"] {
  --bg: #070707; --bg2: #0F0F10; --card: #141415; --ink: #EDE8E0; --muted: #8F8A82; --soft: #CFC9BF;
  --line: rgba(237, 232, 224, .12); --acc: #E3141B; --acc2: #FF3B2F; --on-acc: #fff;
  --grad: linear-gradient(100deg, #B80000, #FF2A1F); --glow: rgba(227, 20, 27, .30);
  --display: Anton, Impact, sans-serif; --script: "Instrument Serif", Georgia, serif;
  --btn-bg: #EDE8E0; --btn-ink: #070707; --r: 6px; --ease: cubic-bezier(.2, .8, .2, 1);
}
.t-purple, [data-theme="purple"] {
  --bg: #08060C; --bg2: #100C17; --card: #161020; --acc: #A259FF; --acc2: #C792FF;
  --grad: linear-gradient(100deg, #6A1FE0, #C266FF); --glow: rgba(162, 89, 255, .34);
}
.t-prox, [data-theme="prox"] {
  --bg: #050505; --bg2: #0C0D0A; --card: #121410; --acc: #B6FF00; --acc2: #D4FF4D; --on-acc: #050505;
  --grad: linear-gradient(100deg, #8FE000, #D4FF4D); --glow: rgba(182, 255, 0, .32);
}
.t-camp, [data-theme="camp"] {
  --bg: #F3F9FF; --bg2: #FFFFFF; --card: #FFFFFF; --ink: #0E2236; --muted: #5A6B7D; --soft: #33475B;
  --line: rgba(14, 34, 54, .1); --acc: #1597D9; --acc2: #22B83A; --on-acc: #fff;
  --grad: linear-gradient(100deg, #3DB1ED, #43E244); --glow: rgba(61, 177, 237, .35);
  --display: Fredoka, "Arial Rounded MT Bold", system-ui, sans-serif; --script: Caveat, "Comic Sans MS", cursive;
  --btn-bg: #0E2236; --btn-ink: #fff; --r: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%;  overflow-x: clip; }
body { font-family: Inter, system-ui, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body:not(.t-camp)::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 300; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
::selection { background: var(--acc); color: #fff; }
.wrap { width: min(1360px, 100% - 56px); margin-inline: auto; }

/* type */
.a { font-family: var(--display); text-transform: uppercase; letter-spacing: .005em; line-height: .9; font-weight: 400; }
.s { font-family: var(--script); font-style: italic; font-weight: 400; letter-spacing: -.01em; text-transform: none; }
.k { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.k.c { color: var(--acc); }
.h2 { font-size: clamp(52px, 7.2vw, 112px); }
.h2 .s { display: block; font-size: .62em; margin-top: .08em; color: var(--ink); }
.h3 { font-size: clamp(40px, 4.8vw, 72px); }
.lead { font-size: 18px; color: var(--soft); max-width: 560px; }
.red { color: var(--acc); }
.t-camp .a { font-weight: 700; text-transform: none; letter-spacing: -.02em; line-height: .95; }
.t-camp .s { font-style: normal; font-weight: 700; letter-spacing: 0; }
.t-camp .k { letter-spacing: .18em; color: var(--acc); }
.gt { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-camp .gt { background: linear-gradient(100deg, #1597D9, #22B83A); -webkit-background-clip: text; background-clip: text; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 17px 28px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); font: 600 12px/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; transition: gap .35s var(--ease), background .3s, color .3s, transform .3s, box-shadow .3s; border: 0; cursor: pointer; white-space: nowrap; }
.btn:hover { gap: 22px; background: var(--acc); color: var(--on-acc); box-shadow: 0 10px 40px var(--glow); }
.btn.lg { padding: 20px 32px; }
.btn.sm { padding: 12px 20px; font-size: 11px; }
.btn.o { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(237, 232, 224, .35); }
.btn.o:hover { background: rgba(237, 232, 224, .08); box-shadow: inset 0 0 0 1px var(--ink); }
.btn.acc { background: var(--acc); color: var(--on-acc); }
.btn.acc:hover { background: var(--ink); color: var(--bg); }
.btn:disabled { opacity: .35; pointer-events: none; }
.t-camp .btn { font-family: Fredoka, sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .02em; text-transform: none; }
.t-camp .btn:hover { background: var(--grad); color: #0E2236; transform: translateY(-2px) rotate(-1deg); }
.t-camp .btn.o { box-shadow: inset 0 0 0 2px var(--ink); }
.t-camp .btn.o:hover { background: #fff; color: var(--ink); }

/* header */
.hdr { position: fixed; inset: 0 0 auto; z-index: 80; transition: background .4s, border-color .4s, transform .4s; border-bottom: 1px solid transparent; }
.hdr.on, .hdr:not(.over) { background: rgba(7, 7, 7, .82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: var(--line); }
.t-purple .hdr.on, .t-purple .hdr:not(.over) { background: rgba(8, 6, 12, .82); }
.t-camp .hdr.on, .t-camp .hdr:not(.over) { background: rgba(255, 255, 255, .86); }
.tbar { display: block; text-align: center; font-size: 12px; letter-spacing: .06em; padding: 9px 16px; background: var(--acc); color: #fff; font-weight: 500; transition: margin .4s; }
.tbar u { text-underline-offset: 3px; }
.t-camp .tbar { background: var(--grad); color: #0E2236; font-weight: 600; }
.hdr.on .tbar { margin-top: -38px; }
.wbar { height: 30px; line-height: 30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; font-size: 12px; padding: 0 12px; background: #0b0b0b; color: #E9E4DA; border-bottom: 1px solid rgba(255,255,255,.08); transition: margin .4s; }
.wbar a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hdr.on .wbar { margin-top: -30px; }
.hin { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { width: 36px; height: 36px; border-radius: 50%; }
.brand span { font-family: Anton, sans-serif; font-size: 20px; letter-spacing: .14em; line-height: 1; }
.brand small { display: block; font: 500 9px Inter; letter-spacing: .34em; color: var(--muted); margin-top: 5px; }
.nav { display: flex; gap: 6px; align-items: center; }
.nl { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; opacity: .8; padding: 10px 14px; transition: opacity .2s; font-weight: 500; }
.nl:hover { opacity: 1; }
.nl i { font-style: normal; font-size: 9px; margin-left: 4px; }
.dd { position: relative; }
.mega { position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px); width: 760px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 14px; border-radius: 16px; background: #111112; border: 1px solid rgba(237, 232, 224, .12); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transition: .25s var(--ease); color: #EDE8E0; }
.dd:hover .mega, .dd.open .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega:before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.mg { padding: 12px; border-radius: 12px; }
.mg .k { display: flex; align-items: center; gap: 8px; color: #8F8A82; margin-bottom: 10px; }
.mg .k:before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cg, var(--c)); }
.mg a { display: block; padding: 9px 10px; margin: 0 -10px; border-radius: 10px; transition: background .2s; }
.mg a:hover { background: rgba(237, 232, 224, .07); }
.mg b { display: block; font-weight: 600; font-size: 14px; }
.mg small { color: #8F8A82; font-size: 12px; }
.hr { display: flex; align-items: center; gap: 14px; }
.hr .ph { font-size: 12px; letter-spacing: .12em; opacity: .8; }
.loc { position: relative; }
.loc-btn { display: flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: .06em; padding: 9px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.loc-btn svg { width: 14px; height: 14px; color: var(--acc); }
.loc-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 300px; background: #111112; color: #EDE8E0; border: 1px solid rgba(237, 232, 224, .12); border-radius: 14px; padding: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .2s; }
.loc.open .loc-menu { opacity: 1; visibility: visible; transform: none; }
.loc-head { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #8F8A82; padding: 8px 10px; }
.loc-item { display: flex; gap: 12px; padding: 12px 10px; border-radius: 10px; }
.loc-item.active { background: rgba(237, 232, 224, .06); }
.loc-item .dot { margin-top: 7px; }
.loc-item b { display: block; font-size: 14px; font-weight: 600; }
.loc-item small { display: block; color: #8F8A82; font-size: 12px; }
.loc-item.soon { opacity: .55; }
.burger { display: none; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); place-items: center; }
.drawer { position: fixed; inset: 0; z-index: 120; background: #070707; color: #EDE8E0; padding: 22px 24px 40px; transform: translateX(100%); transition: transform .45s var(--ease); overflow-y: auto; display: flex; flex-direction: column; }
.drawer.open { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.drawer-head button { width: 44px; height: 44px; font-size: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(237, 232, 224, .2); }
.drawer .k { margin: 22px 0 8px; display: flex; align-items: center; gap: 8px; }
.drawer .k:before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cg, var(--c, #E3141B)); }
.drawer nav a { display: block; font-family: Anton, sans-serif; text-transform: uppercase; font-size: 30px; line-height: 1.25; }
.drawer .btn { margin-top: 12px; width: 100%; }

/* dots & live */
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); margin-right: 8px; animation: blink 1.6s infinite; vertical-align: middle; flex-shrink: 0; }
@keyframes blink { 50% { opacity: .25; } }

/* hero (video) */
.hero { position: relative; height: 100svh; min-height: 720px; overflow: hidden; display: grid; place-items: center; text-align: center; }
.hero video, .hero .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.1) brightness(.55); transform: scale(1.04); }
.reel { position: absolute; inset: 0; }
.reel .rs { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: saturate(.8) contrast(1.1) brightness(.5); transform: scale(1.04); transition: opacity 1.2s ease; }
.reel .rs.on { opacity: 1; animation: kb 6s linear forwards; }
@keyframes kb { from { transform: scale(1.04); } to { transform: scale(1.14) translate(-1%, -1%); } }
.hero video { transition: opacity 1.2s ease; }
.hero.on-photo video { opacity: 0; }
.reel-nav { position: absolute; left: 50%; transform: translateX(-50%); bottom: 104px; z-index: 5; display: flex; gap: 18px; }
.reel-nav a { display: grid; gap: 8px; min-width: 86px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: rgba(237, 232, 224, .55); transition: color .3s; }
.reel-nav a:hover, .reel-nav a.on { color: #fff; }
.reel-nav i { display: block; height: 2px; background: rgba(237, 232, 224, .2); overflow: hidden; }
.reel-nav u { display: block; height: 100%; width: 0; background: var(--rc); }
.reel-nav a.on u { width: 100%; }
.reel-nav a.run u { width: 0; animation: rfill var(--d, 4500ms) linear forwards; }
@keyframes rfill { to { width: 100%; } }
.reel-cr { position: absolute; left: 24px; bottom: 100px; z-index: 5; font-size: 9px; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, .5); color: rgba(255, 255, 255, .7); }
.reel-cr:empty { display: none; }
@media (max-width: 860px) { .reel-nav { gap: 8px; bottom: 96px; width: calc(100% - 100px); left: 20px; transform: none; } .reel-nav a { min-width: 0; flex: 1; } .reel-nav span { display: none; } .reel-nav a.on span { display: block; position: absolute; left: 0; top: -20px; white-space: nowrap; } .reel-cr { display: none; } }
.hero:before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, rgba(7, 7, 7, .3), rgba(7, 7, 7, .78) 80%), linear-gradient(180deg, rgba(7, 7, 7, .5), transparent 30%, transparent 60%, var(--bg)); }
.bars:after, .bars > .bar-top { content: ""; position: absolute; left: 0; right: 0; height: 9vh; background: var(--bg); z-index: 4; transition: height 1.6s cubic-bezier(.7, 0, .2, 1); }
.bars > .bar-top { top: 0; } .bars:after { bottom: 0; }
.bars.open:after, .bars.open > .bar-top { height: 0; }
.hc { position: relative; z-index: 3; padding: 90px 20px 120px; }
.hero h1 { font-size: clamp(76px, 13.5vw, 210px); margin: 22px 0 4px; }
.hero h1 .s { display: block; font-size: .42em; margin-top: .12em; }
.hero p { max-width: 540px; margin: 22px auto 34px; color: var(--soft); font-size: 17px; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .ctas { justify-content: center; }
.base { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .35)); }
.bin { display: grid; grid-template-columns: repeat(3, 1fr); }
.bin.four { grid-template-columns: repeat(4, 1fr); }
.bi { padding: 22px 0; text-align: left; display: flex; flex-direction: column; gap: 4px; font: inherit; }
.bin > * + * { border-left: 1px solid var(--line); padding-left: 28px; }
.bi b { font-weight: 500; font-size: 15px; }
button.bi:hover b, a.bi:hover b { color: var(--acc2); }
.vt { position: absolute; right: 24px; bottom: 96px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); font-size: 11px; color: var(--ink); opacity: .7; }

/* sections */
.sec { padding: 150px 0; position: relative; }
.sec.tight { padding: 100px 0; }
.rh { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 56px; flex-wrap: wrap; }
.rh .k { margin-bottom: 18px; display: block; }
.mani { max-width: 1140px; margin-top: 30px; }
.mani p { font-size: clamp(32px, 4.3vw, 62px); line-height: 1.12; letter-spacing: -.02em; font-family: var(--script); }
.mani p { color: #fff; }
.mani p span { opacity: 1; }
.mani p em { color: var(--acc); font-style: italic; }
.sig { display: flex; gap: 64px; margin-top: 74px; flex-wrap: wrap; }
.sig b { display: block; font-family: Anton, sans-serif; font-size: clamp(46px, 5vw, 72px); line-height: 1; font-weight: 400; }
.sig b i { color: var(--acc); font-style: normal; }
.sig span { font-size: 13px; color: var(--muted); }

/* worlds */
.wg { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; margin-top: 64px; }
.world { position: relative; min-height: 620px; border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; isolation: isolate; }
.world > img:not(.clogo) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--ease); }
.world:hover > img:not(.clogo) { transform: scale(1.05); }
.world:before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 7, 7, .05) 20%, rgba(7, 7, 7, .92)); }
.world:after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--cg); }
.world .k { color: #EDE8E0; display: flex; align-items: center; gap: 10px; }
.world .k:before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cg); }
.world h3 { font-size: clamp(44px, 4.2vw, 64px); margin: 14px 0 10px; color: #fff; }
.world p { color: #D6D0C6; font-size: 15px; max-width: 360px; }
.world .wl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.world .wl a { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .1); backdrop-filter: blur(8px); transition: .25s; color: #fff; }
.world .wl a:hover { background: var(--cg); color: #070707; }
.world .clogo { display: block; width: min(300px, 90%); margin-top: 14px; margin-bottom: 8px; filter: drop-shadow(0 4px 20px rgba(0, 0, 0, .5)); }

/* program rail */
.arrows { display: flex; gap: 10px; }
.arrows button { width: 58px; height: 58px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); font-size: 20px; transition: .3s; }
.arrows button:hover { background: var(--ink); color: var(--bg); }
.rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 max(28px, calc((100vw - 1360px) / 2)) 20px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.pc { flex: 0 0 min(390px, 80vw); scroll-snap-align: start; position: relative; aspect-ratio: 3 / 4.2; border-radius: var(--r); overflow: hidden; }
.pc img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) contrast(1.05); transition: transform 1.2s var(--ease), filter .6s; }
.pc:hover img { transform: scale(1.06); filter: none; }
.pc:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 7, 7, .25), rgba(7, 7, 7, 0) 35%, rgba(7, 7, 7, .94)); }
.pc .n { position: absolute; top: 22px; left: 24px; right: 24px; z-index: 2; display: flex; justify-content: space-between; color: #EDE8E0; }
.pc .n i { font-style: normal; width: 34px; height: 4px; border-radius: 4px; background: var(--cg); margin-top: 4px; }
.pc .t { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2; color: #EDE8E0; }
.pc h3 { font-family: Anton, sans-serif; text-transform: uppercase; font-weight: 400; font-size: 42px; line-height: .95; margin: 0 0 10px; }
.pc p { font-size: 14px; color: #CFC9BF; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s, opacity .5s; }
.pc:hover p { max-height: 80px; opacity: 1; }
.go { display: inline-flex; gap: 10px; margin-top: 14px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 4px; font-weight: 600; }

/* standard split */
.std { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.std .img { position: relative; min-height: 760px; overflow: hidden; }
.std .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); transition: filter 1s; }
.std:hover .img img { filter: grayscale(.2) contrast(1.05); }
.t-purple .std .img img { filter: grayscale(.3) contrast(1.05); }
.std .tx { padding: 110px 56px 110px 90px; max-width: 720px; }
.std h2 { font-size: clamp(46px, 5.4vw, 84px); }
.std h2 .s { display: block; color: var(--acc); font-size: .85em; }
.std ul { list-style: none; margin-top: 46px; }
.std li { display: grid; grid-template-columns: 70px 1fr; padding: 26px 0; border-top: 1px solid var(--line); }
.std li > span { font-family: Anton, Impact, sans-serif; font-size: 26px; line-height: 1; letter-spacing: .02em; color: var(--acc); padding-top: 2px; }
.std li b { display: block; font-weight: 600; font-size: 19px; margin-bottom: 4px; }
.std li p { color: var(--muted); font-size: 15px; }
.std .btn { margin-top: 34px; }

/* path */
.path { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 64px; border-top: 1px solid var(--line); position: relative; }
.path:before { content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: var(--p, 0%); background: var(--grad); transition: width 1.6s var(--ease); }
.path.in:before { --p: 100%; }
.path div { padding: 40px 32px 0 0; }
.path div + div { padding-left: 32px; border-left: 1px solid var(--line); }
.path b { font-family: Anton, sans-serif; font-size: 22px; font-weight: 400; color: var(--acc); }
.path h3 { font-family: "Instrument Serif", serif; font-weight: 400; font-size: 36px; line-height: 1.05; margin: 14px 0 10px; }
.path p { color: var(--muted); font-size: 15px; }

/* levels */
.subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.sub { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; display: flex; flex-direction: column; gap: 10px; transition: border-color .3s, transform .4s var(--ease); }
.sub:hover { border-color: var(--acc); transform: translateY(-4px); }
.sub .k { color: var(--acc); }
.sub h3 { font-family: Anton, sans-serif; font-weight: 400; text-transform: uppercase; font-size: 34px; line-height: 1; }
.sub p { color: var(--muted); font-size: 15px; flex: 1; }
.sub .times { font-size: 13px; color: var(--soft); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; }
.sub .btn { align-self: flex-start; margin-top: 8px; }

/* schedule */
.sched-tools { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 26px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.seg button { padding: 10px 16px; border-radius: 999px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; transition: .2s; }
.seg button.on { background: var(--ink); color: var(--bg); }
.select { appearance: none; background: transparent; color: var(--ink); border: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: 999px; padding: 13px 40px 13px 18px; font: 500 13px Inter; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.select option { color: #111; }
.days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.day { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; min-height: 220px; }
.day h4 { display: flex; justify-content: space-between; align-items: baseline; font-weight: 400; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.day h4 span:first-child { font-family: Anton, sans-serif; text-transform: uppercase; font-size: 22px; }
.day h4 span:last-child { font-size: 12px; color: var(--muted); }
.slot { position: relative; display: block; width: 100%; text-align: left; padding: 12px 14px 12px 16px; margin-bottom: 8px; border-radius: 10px; background: rgba(237, 232, 224, .035); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; cursor: pointer; transition: background .2s, box-shadow .2s, transform .2s; }
.slot:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sc, var(--acc)); }
.slot:hover, .slot:focus-visible { background: rgba(237, 232, 224, .08); box-shadow: inset 0 0 0 1px var(--sc, var(--acc)); transform: translateY(-1px); outline: none; }
.slot strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: .01em; }
.slot b { display: block; font-size: 14px; font-weight: 600; margin-top: 2px; }
.slot span { display: block; font-size: 12px; color: var(--muted); }
.slot em { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-style: normal; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #5BD67A; font-weight: 700; }
.slot em i { width: 7px; height: 7px; border-radius: 50%; background: #5BD67A; box-shadow: 0 0 0 3px rgba(91, 214, 122, .18); }
.slot em u { margin-left: auto; text-decoration: none; padding: 6px 10px; border-radius: 999px; background: var(--sc, var(--acc)); color: #fff; letter-spacing: .12em; transition: filter .2s; }
.slot:hover em u { filter: brightness(1.15); }
.empty { color: var(--muted); font-size: 14px; padding: 12px 0; }

/* voice */
.voice { text-align: center; }
.voice blockquote { font-family: var(--script); font-size: clamp(28px, 3.6vw, 52px); line-height: 1.2; max-width: 1100px; margin: 34px auto 30px; letter-spacing: -.01em; min-height: 3.7em; transition: opacity .4s; }
.voice cite { font-style: normal; }
.vn { display: flex; justify-content: center; gap: 14px; margin-top: 36px; }
.vn button { width: 44px; height: 2px; background: var(--line); }
.vn button.on { background: var(--ink); }
.stars { color: var(--acc); letter-spacing: .2em; }

/* visit steps */
.visit { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: 60px; }
.visit div { padding: 46px 40px 0 0; }
.visit div + div { padding-left: 40px; border-left: 1px solid var(--line); }
.visit b { font-family: Anton, sans-serif; font-size: 22px; color: var(--acc); font-weight: 400; }
.visit h3 { font-family: "Instrument Serif", serif; font-weight: 400; font-size: 38px; margin: 14px 0 10px; letter-spacing: -.01em; }
.visit p { color: var(--muted); }

/* parties */
.parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.party { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.party > img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.party { position: relative; }
.party .pcr { position: absolute; top: 10px; right: 10px; font-size: 10px; letter-spacing: .02em; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.55); color: rgba(255,255,255,.8); pointer-events: none; }
.party .pb { padding: 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.party h3 { font-family: Anton, sans-serif; font-weight: 400; text-transform: uppercase; font-size: 34px; line-height: 1; }
.party p { color: var(--muted); font-size: 15px; flex: 1; }
.party .meta { display: flex; gap: 8px; flex-wrap: wrap; }
.party .meta span { font-size: 12px; padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--soft); }
.party[style*="--tc"] { border-top: 4px solid var(--tc); }
.party[style*="--tc"] .k.c { color: var(--tc); }
.party .btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* faq */
.faqw { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; }
.faqw .side { position: sticky; top: 130px; align-self: start; }
.faqw .side p { color: var(--muted); margin: 18px 0 28px; }
.faqw .side a.tel { color: var(--ink); border-bottom: 1px solid var(--acc); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 26px 48px 26px 0; font-size: 19px; font-weight: 500; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:after { content: "+"; position: absolute; right: 6px; top: 22px; font-size: 26px; font-weight: 300; color: var(--acc); transition: transform .3s; }
.faq details[open] summary:after { transform: rotate(45deg); }
.faq .ans { color: var(--muted); padding: 0 48px 28px 0; font-size: 16px; }
.faq-search { width: 100%; background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--line); padding: 18px 0; font: 400 22px Inter; margin-bottom: 20px; outline: 0; }
.faq-search:focus { border-color: var(--acc); }

/* final cta */
.final { position: relative; min-height: 88vh; display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; }
.final > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.6) brightness(.42); z-index: -2; }
.final:before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 120%, var(--glow), transparent 60%); }
.final h2 { font-size: clamp(70px, 12vw, 190px); }
.final h2 .s { display: block; font-size: .4em; }
.final p { color: var(--soft); margin: 22px auto 34px; max-width: 460px; }
.final .ctas { justify-content: center; }
.spots { display: flex; align-items: center; gap: 12px; justify-content: center; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 26px; }
.spots .bar { width: 120px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.spots .bar i { display: block; height: 100%; width: 78%; background: var(--grad); }

/* program hero (dark) */
.phero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: 150px 0 140px; isolation: isolate; }
.phero > .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.75) brightness(.5); transform: scale(1.05); animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { to { transform: scale(1.12) translate(-1.5%, -1%); } }
.phero:before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 7, 7, .9) 20%, rgba(7, 7, 7, .35) 70%), linear-gradient(180deg, rgba(7, 7, 7, .5), transparent 30%, transparent 70%, var(--bg)); }
.t-purple .phero:before { background: radial-gradient(ellipse at 85% 30%, rgba(162, 89, 255, .35), transparent 50%), linear-gradient(90deg, rgba(8, 6, 12, .92) 20%, rgba(8, 6, 12, .35) 70%), linear-gradient(180deg, rgba(8, 6, 12, .5), transparent 30%, transparent 70%, var(--bg)); }
.pin { display: grid; grid-template-columns: 1.35fr .8fr; gap: 64px; align-items: center; position: relative; z-index: 3; }
.crumbs { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; }
.crumbs a:hover { color: var(--ink); }
.phero h1 { font-size: clamp(64px, 9.6vw, 156px); margin: 20px 0 26px; }
.phero h1 .s { display: block; font-size: .44em; margin-top: .1em; }
.phero .lead { margin-bottom: 34px; }
.ocard { background: rgba(20, 20, 21, .72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line); border-radius: 14px; padding: 34px; position: relative; overflow: hidden; }
.ocard:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); }
.ocard .k { color: var(--acc); }
.ocard h3 { font-family: Anton, sans-serif; font-weight: 400; text-transform: uppercase; font-size: 42px; line-height: 1; margin: 14px 0 10px; }
.ocard p { color: var(--soft); font-size: 15px; }
.ocard ul { list-style: none; margin: 20px 0; display: grid; gap: 10px; font-size: 14px; }
.ocard li { display: flex; gap: 12px; }
.ocard li:before { content: "—"; color: var(--acc); }
.ocard .spots { justify-content: flex-start; margin: 0 0 20px; }
.ocard .btn { width: 100%; }
.ocard .alt { display: block; text-align: center; margin-top: 16px; font-size: 13px; color: var(--muted); }
.ocard .alt:hover { color: var(--ink); }

/* reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* footer */
.footer { padding: 90px 0 120px; border-top: 1px solid var(--line); position: relative; overflow: hidden; }
.fword { font-family: Anton, sans-serif; text-transform: uppercase; font-size: clamp(80px, 16vw, 250px); line-height: .8; letter-spacing: .01em; opacity: .06; white-space: nowrap; margin-bottom: 60px; }
.fin { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; font-size: 14px; color: var(--muted); }
.fin h4 { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink); font-weight: 600; margin-bottom: 16px; }
.fin a { display: block; margin-bottom: 8px; transition: color .2s; }
.fin a:hover { color: var(--ink); }
.fin .brand { margin-bottom: 20px; color: var(--ink); }
.fbot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 60px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }

/* mobile cta + toast */
.mcta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; display: none; gap: 8px; transform: translateY(120%); transition: transform .4s var(--ease); }
.mcta.show { transform: none; }
.mcta .btn { flex: 1; }
.mcta .call { width: 56px; border-radius: 999px; display: grid; place-items: center; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 20px; }
.toast { position: fixed; left: 24px; bottom: 24px; z-index: 95; display: flex; gap: 14px; align-items: center; max-width: 360px; padding: 16px 18px; border-radius: 14px; background: rgba(20, 20, 21, .92); color: #EDE8E0; backdrop-filter: blur(14px); border: 1px solid rgba(237, 232, 224, .12); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); transform: translateY(150%); transition: transform .5s var(--ease); }
.toast.show { transform: none; }
.proof { position: fixed; left: 24px; bottom: 24px; z-index: 94; width: 340px; border-radius: 16px; background: rgba(16, 16, 17, .94); color: #EDE8E0; backdrop-filter: blur(16px); border: 1px solid rgba(237, 232, 224, .12); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); overflow: hidden; opacity: 0; transform: translateY(24px) scale(.97); pointer-events: none; transition: opacity .45s var(--ease), transform .55s var(--ease); }
.proof:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--pc, var(--acc)); }
.proof:after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--pc, var(--acc)); opacity: .7; }
.proof.show { opacity: 1; transform: none; pointer-events: auto; }
.proof.show:after { animation: rfill 6.5s linear forwards; }
.proof-in { display: flex; gap: 14px; align-items: center; padding: 16px 40px 16px 20px; color: inherit; text-decoration: none; }
.proof-av { position: relative; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--pc, var(--acc)); color: #fff; font: 700 20px/1 var(--display, inherit); text-transform: uppercase; box-shadow: 0 0 0 3px rgba(255, 255, 255, .06), 0 0 24px -4px var(--pcs, var(--acc)); }
.proof-av i { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #5BD67A; color: #0B0B0C; font: 800 10px/1 system-ui, sans-serif; border: 2px solid #111; }
.proof-tx { font-size: 13.5px; line-height: 1.4; color: #B8B2A8; }
.proof-tx b { color: #EDE8E0; font-weight: 600; }
.proof-tx > span { display: block; }
.proof-tx > span b { color: #fff; }
.proof-tx small { display: block; margin-top: 4px; font-size: 11.5px; color: #8F8A82; }
.proof-tx em { font-style: normal; color: #5BD67A; }
.proof-x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: #8F8A82; font-size: 18px; line-height: 1; cursor: pointer; }
.proof-x:hover { background: rgba(237, 232, 224, .1); color: #EDE8E0; }
.t-camp .proof { background: #fff; color: var(--ink); border: 0; }
.t-camp .proof-tx, .t-camp .proof-tx small { color: #5b5b5b; }
.t-camp .proof-tx b { color: var(--ink); }
.t-camp .proof-x { color: #888; }
@media (prefers-reduced-motion: reduce) { .proof { transition: opacity .2s; transform: none; } .proof.show:after { animation: none; } }
.toast i { font-style: normal; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); flex-shrink: 0; animation: blink 1.6s infinite; }
.toast b { display: block; font-size: 14px; font-weight: 600; }
.toast small { color: #8F8A82; font-size: 12px; }

/* ---------- offer modal ---------- */
.modal-bg { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; padding: 20px; color: var(--ink); }
.modal-bg.open { display: flex; animation: fade .3s; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(1040px, 100%); max-height: min(760px, 94svh); display: grid; grid-template-columns: .85fr 1.15fr; background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 40px 120px rgba(0, 0, 0, .6); animation: rise .5s var(--ease); font-family: Inter, sans-serif; }
@keyframes rise { from { transform: translateY(30px); opacity: 0; } }
.modal { grid-template-rows: minmax(0, 1fr); position: relative; }
.modal-side { position: relative; padding: 40px 36px; display: flex; flex-direction: column; isolation: isolate; color: #EDE8E0; min-height: 0; overflow: hidden; }
.modal-side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--sp, center); z-index: -2; filter: grayscale(.3) brightness(.55); }
.modal-side:before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 7, 7, .2), rgba(7, 7, 7, .92) 70%); }
.modal-side:after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); }
.modal-side .k { color: #EDE8E0; }
.modal-side h3 { font-family: Anton, sans-serif; font-weight: 400; text-transform: uppercase; font-size: 46px; line-height: .95; margin-top: auto; }
.modal-side p { margin-top: 14px; color: #CFC9BF; font-size: 15px; }
.modal-side .perks { list-style: none; margin-top: 22px; display: grid; gap: 9px; font-size: 14px; }
.modal-side .perks li:before { content: "— "; color: var(--acc); }
.modal-side .foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(237, 232, 224, .15); font-size: 12px; color: #8F8A82; }
.modal-main { padding: 40px 40px 0; overflow-y: auto; position: static; min-height: 0; display: flex; flex-direction: column; }
.modal-main > .stepper { flex: 1 0 auto; display: flex; flex-direction: column; }
.modal-main .nav-row { position: sticky; bottom: 0; z-index: 3; margin-top: auto; padding: 18px 0 26px; background: var(--bg2); box-shadow: 0 -18px 18px -6px var(--bg2); }
.modal-main > .stepper:not(:has(.nav-row)) { padding-bottom: 34px; }
@media (max-height: 760px) { .modal-side .perks { display: none; } .modal-side h3 { font-size: 38px; } .modal-main { padding-top: 30px; } .progress { margin-bottom: 20px; } }
.modal-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); font-size: 16px; z-index: 2; }
.progress { display: flex; gap: 6px; margin-bottom: 30px; padding-right: 54px; }
.progress i { flex: 1; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; position: relative; }
.progress i.done:after { content: ""; position: absolute; inset: 0; background: var(--grad); animation: grow .5s var(--ease); transform-origin: left; }
@keyframes grow { from { transform: scaleX(0); } }
.modal.still, .progress i.set:after { animation: none; }
.stepper h3 { font-family: Anton, sans-serif; text-transform: uppercase; font-weight: 400; font-size: 38px; line-height: 1; }
.stepper .hint { color: var(--muted); font-size: 15px; margin-top: 8px; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.opt { display: flex; gap: 14px; align-items: center; text-align: left; padding: 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); transition: .2s; }
.opt:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.opt.on { box-shadow: inset 0 0 0 2px var(--acc); background: rgba(237, 232, 224, .04); }
.opt .e { width: 10px; height: 38px; border-radius: 6px; background: var(--cg, var(--grad)); flex-shrink: 0; }
.opt.big .e { font-size: 22px; width: auto; height: auto; background: none; }
.opt b { display: block; font-size: 15px; font-weight: 600; }
.opt small { display: block; color: var(--muted); font-size: 13px; line-height: 1.35; }
.field { display: grid; gap: 7px; margin-top: 16px; }
.field label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.field input { background: transparent; color: var(--ink); border: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: 10px; padding: 15px 16px; font: 400 16px Inter; outline: 0; transition: box-shadow .2s; }
.field input:focus { box-shadow: inset 0 0 0 2px var(--acc); }
.field.err input { box-shadow: inset 0 0 0 2px #FF4D4D; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ages-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ages-row button { min-width: 50px; padding: 12px 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; transition: .2s; }
.ages-row button:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.ages-row button.on { background: var(--acc); color: #fff; box-shadow: none; }
.slots-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-top: 22px; max-height: 340px; overflow-y: auto; padding: 2px; }
.slot-opt { text-align: left; padding: 13px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); transition: .2s; }
.slot-opt:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.slot-opt.on { box-shadow: inset 0 0 0 2px var(--acc); }
.slot-opt b { display: block; font-size: 14px; font-weight: 600; }
.slot-opt span { display: block; font-size: 13px; color: var(--muted); }
.slot-opt em { display: block; font-style: normal; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); font-weight: 700; margin-top: 4px; }
.cal-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; margin-top: 22px; align-items: start; }
.cal { padding: 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head b { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.cal-head button { width: 32px; height: 32px; border-radius: 8px; font-size: 20px; line-height: 1; box-shadow: inset 0 0 0 1px var(--line); transition: .2s; }
.cal-head button:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--ink); }
.cal-head button:disabled { opacity: .25; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-grid small { font-size: 10px; letter-spacing: .14em; color: var(--muted); font-weight: 700; padding: 4px 0; }
.cal-grid > span, .cal-grid > button { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; font-size: 13px; font-weight: 600; }
.cal-grid > span.off { color: var(--muted); opacity: .35; }
.cal-grid > button { box-shadow: inset 0 0 0 1px var(--line); transition: .2s; }
.cal-grid > button:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.cal-grid > button i { position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--acc); }
.cal-grid > button.on { background: var(--acc); color: var(--on-acc, #fff); box-shadow: none; }
.cal-grid > button.on i { background: var(--on-acc, #fff); }
.cal-grid .today { text-decoration: underline; text-underline-offset: 3px; }
.cal-day > .k { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); font-weight: 700; margin: 4px 0 10px; }
.slots-list.cal-slots { grid-template-columns: 1fr; margin-top: 0; max-height: 300px; }
.slots-list.tour-times { grid-template-columns: 1fr 1fr; }
.tour-times .slot-opt { text-align: center; padding: 12px 8px; }
@media (max-width: 860px) { .cal-wrap { grid-template-columns: 1fr; } .slots-list.cal-slots { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-height: none; } }
.consent { display: flex; gap: 10px; font-size: 12px; color: var(--muted); margin-top: 18px; line-height: 1.5; }
.consent input { margin-top: 2px; accent-color: var(--acc); }
.nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; gap: 12px; }
.back { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.back:hover { color: var(--ink); }
.hp { position: absolute; left: -9999px; }
.success { text-align: center; }
.success .ring { width: 84px; height: 84px; margin: 6px auto 20px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 36px; animation: pop .6s var(--ease); box-shadow: 0 0 0 10px var(--glow); }
@keyframes pop { from { transform: scale(.5); opacity: 0; } }
.success .card { border-radius: 12px; padding: 18px; margin-top: 18px; text-align: left; box-shadow: inset 0 0 0 1px var(--line); }
.success .card b { display: block; font-weight: 600; }
.mini { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; }
.mini:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.kiosk-card { margin-top: 16px; border-radius: 12px; padding: 22px; text-align: left; position: relative; overflow: hidden; background: rgba(237, 232, 224, .04); box-shadow: inset 0 0 0 1px var(--line); }
.kiosk-card:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad); }
.kiosk-card h4 { font-family: Anton, sans-serif; font-weight: 400; text-transform: uppercase; font-size: 24px; }
.kiosk-card p { color: var(--muted); font-size: 14px; margin-top: 6px; }
.kiosk-card .btn { margin-top: 16px; width: 100%; }
.demo-note { margin-top: 16px; font-size: 12px; color: var(--muted); border-radius: 10px; padding: 12px 14px; text-align: left; box-shadow: inset 0 0 0 1px var(--line); }
.demo-note code { color: var(--ink); }
.t-camp .modal, [data-theme="camp"] .modal { font-family: Inter, sans-serif; }
[data-theme="camp"] .stepper h3, [data-theme="camp"] .kiosk-card h4 { font-family: Fredoka, sans-serif; font-weight: 700; text-transform: none; letter-spacing: -.01em; }
[data-theme="camp"] .modal-side h3 { font-family: Fredoka, sans-serif; font-weight: 700; text-transform: none; }
[data-theme="camp"] .modal-side:before { background: linear-gradient(180deg, rgba(14, 34, 54, .1), rgba(14, 34, 54, .9) 72%); }
[data-theme="camp"] .btn { font-family: Fredoka, sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .02em; text-transform: none; }

/* =========================================================
   CAMP WORLD · After School, Summer Camp, Day Camps
   Light, bright, playful. Blue + green from the camp logo.
   ========================================================= */
.t-camp h1, .t-camp h2, .t-camp h3 { font-family: Fredoka, sans-serif; }
.t-camp .hdr .nl, .t-camp .hr .ph { opacity: .85; }
.t-camp .loc-btn { box-shadow: inset 0 0 0 1.5px var(--line); }
.t-camp .burger { box-shadow: inset 0 0 0 1.5px var(--line); }
.chero { position: relative; padding: 170px 0 110px; overflow: hidden; background: radial-gradient(circle at 12% 18%, #D7F0FF 0, transparent 38%), radial-gradient(circle at 88% 80%, #DDF9DF 0, transparent 40%), var(--bg); }
.blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .9; animation: float 9s ease-in-out infinite; pointer-events: none; }
.blob.b1 { width: 120px; height: 120px; background: #3DB1ED; top: 140px; right: 46%; opacity: .14; }
.blob.b2 { width: 220px; height: 220px; background: #43E244; bottom: -60px; left: -60px; opacity: .14; animation-delay: -3s; }
.blob.b3 { width: 60px; height: 60px; background: #FFC93C; top: 60%; left: 44%; opacity: .5; animation-delay: -5s; }
@keyframes float { 50% { transform: translateY(-22px) rotate(8deg); } }
.cin { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 2; }
.chero .clogo { width: 260px; margin-bottom: 26px; }
.chero .crumbs { margin-bottom: 18px; letter-spacing: .14em; }
.chero h1 { font-size: clamp(60px, 7.6vw, 124px); font-weight: 700; line-height: .92; letter-spacing: -.035em; }
.squig { position: relative; display: inline-block; }
.squig svg { position: absolute; left: 0; right: 0; bottom: -.16em; width: 100%; height: .28em; overflow: visible; }
.squig path { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.4s .6s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.script { font-family: Caveat, cursive; font-size: clamp(28px, 2.6vw, 38px); color: var(--acc); transform: rotate(-2deg); margin: 22px 0 14px; line-height: 1.1; font-weight: 700; }
.chero .lead { color: var(--soft); font-size: 18px; margin-bottom: 30px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: 0 6px 20px rgba(14, 34, 54, .08); font: 600 14px Fredoka, sans-serif; }
.collage { position: relative; height: 600px; }
.collage .cph { position: absolute; border-radius: 28px; overflow: hidden; background: #fff; padding: 8px; box-shadow: 0 30px 60px rgba(14, 34, 54, .18); opacity: 1; transition: transform .6s var(--ease); }
.collage .cph img { width: 100%; height: 100%; object-fit: cover; border-radius: 22px; }
.collage .cph:hover { transform: rotate(0) scale(1.03) !important; z-index: 5; }
.collage .p1 { width: 66%; height: 64%; right: 0; top: 0; transform: rotate(3deg); }
.collage .p2 { width: 52%; height: 46%; left: 0; top: 30%; transform: rotate(-5deg); z-index: 2; }
.collage .p3 { width: 46%; height: 40%; right: 6%; bottom: 0; transform: rotate(4deg); z-index: 3; }
.stk { position: absolute; z-index: 6; padding: 12px 18px; border-radius: 18px; background: #fff; font: 700 16px Fredoka, sans-serif; box-shadow: 0 14px 30px rgba(14, 34, 54, .16); display: flex; align-items: center; gap: 8px; animation: bob 4s ease-in-out infinite; white-space: nowrap; }
.stk small { display: block; font: 500 12px Inter; color: var(--muted); }
.stk.g { background: var(--grad); color: #0E2236; }
.stk.y { background: #FFC93C; color: #0E2236; }
.stk.s1 { top: 4%; left: 6%; transform: rotate(-6deg); }
.stk.s2 { bottom: 12%; left: -2%; animation-delay: -1.3s; transform: rotate(4deg); }
.stk.s3 { top: 56%; right: -3%; animation-delay: -2.6s; transform: rotate(-3deg); }
@keyframes bob { 50% { translate: 0 -10px; } }

.cband { background: var(--grad); padding: 20px 0; overflow: hidden; transform: rotate(-1.5deg); margin: -10px -20px 0; position: relative; z-index: 3; box-shadow: 0 20px 40px rgba(61, 177, 237, .25); }
.cband .track { display: flex; gap: 50px; width: max-content; animation: marquee 30s linear infinite; font: 700 28px Fredoka, sans-serif; color: #0E2236; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

.t-camp .sec { padding: 130px 0; }
.ctitle { font-size: clamp(46px, 5.6vw, 88px); font-weight: 700; letter-spacing: -.03em; line-height: .95; }
.ctitle .script { display: block; margin: 12px 0 0; font-size: .42em; letter-spacing: 0; }
.chead { text-align: center; max-width: 820px; margin: 0 auto 60px; }
.chead .k { display: block; margin-bottom: 16px; }
.chead p { color: var(--muted); font-size: 18px; margin-top: 18px; }
.acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.act { border-radius: 28px; padding: 30px 26px; min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .5s var(--ease); position: relative; overflow: hidden; }
.act:nth-child(4n+1) { background: #DFF2FD; } .act:nth-child(4n+2) { background: #E1FAE3; } .act:nth-child(4n+3) { background: #FFF3CC; } .act:nth-child(4n+4) { background: #E6EEFF; }
.act:hover { transform: translateY(-8px) rotate(-1.5deg); }
.act .em { font-size: 52px; line-height: 1; transition: transform .5s var(--ease); display: inline-block; }
.act:hover .em { transform: scale(1.2) rotate(-10deg); }
.act h3 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; margin-top: 18px; line-height: 1.05; }
.act p { font-size: 15px; color: var(--soft); margin-top: 6px; }

.route { background: #0E2236; color: #fff; border-radius: 40px; padding: 70px 60px; position: relative; overflow: hidden; }
.route .k { color: #43E244; }
.route h2 { font-size: clamp(42px, 5vw, 76px); font-weight: 700; letter-spacing: -.03em; line-height: .95; margin-top: 14px; }
.route h2 .gt { background: linear-gradient(100deg, #3DB1ED, #43E244); -webkit-background-clip: text; background-clip: text; }
.route p.lead { color: #B7C6D6; margin-top: 16px; }
.road { position: relative; margin: 56px 0 10px; height: 8px; border-radius: 8px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 22px, transparent 22px 40px); }
.road .bus { position: absolute; top: -48px; font-size: 52px; left: 0; animation: drive 12s linear infinite; transform: scaleX(-1); }
@keyframes drive { from { left: -60px; } to { left: 100%; } }
.stops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 40px; }
.stop { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .06); font: 600 17px Fredoka, sans-serif; transition: background .3s; }
.stop:hover { background: rgba(255, 255, 255, .12); }
.stop i { font-style: normal; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: #0E2236; font-size: 14px; font-weight: 700; flex-shrink: 0; }

.tl { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 20px; }
.tl:before { content: ""; position: absolute; top: 44px; left: 6%; right: 6%; height: 4px; border-radius: 4px; background: var(--grad); opacity: .35; }
.tli { text-align: center; position: relative; }
.tli .em { width: 88px; height: 88px; margin: 0 auto 18px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 40px; box-shadow: 0 14px 30px rgba(14, 34, 54, .12); position: relative; z-index: 1; transition: transform .5s var(--ease); }
.tli:hover .em { transform: translateY(-6px) rotate(8deg); }
.tli h3 { font-size: 20px; font-weight: 700; line-height: 1.1; }
.tli p { font-size: 14px; color: var(--muted); margin-top: 6px; }

.weeks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.wk { border-radius: 26px; padding: 24px; background: #fff; box-shadow: 0 10px 30px rgba(14, 34, 54, .07); text-align: left; transition: transform .4s var(--ease), box-shadow .4s; position: relative; overflow: hidden; }
.wk:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 20px 40px rgba(14, 34, 54, .12); }
.wk:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--grad); }
.wk b { display: block; font: 700 44px/1 Fredoka, sans-serif; }
.wk span { display: block; font: 600 15px Fredoka, sans-serif; margin-top: 4px; }
.wk small { display: block; color: var(--muted); font-size: 13px; margin-top: 8px; }
.wk em { display: inline-block; margin-top: 12px; font: 600 13px Fredoka, sans-serif; font-style: normal; color: var(--acc); }

.perks { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.perks .pimg { position: relative; border-radius: 40px; overflow: hidden; aspect-ratio: 4 / 4.4; box-shadow: 0 30px 60px rgba(14, 34, 54, .16); }
.perks .pimg img { width: 100%; height: 100%; object-fit: cover; }
.perks .pimg .stk { top: auto; bottom: 22px; left: 22px; }
.plist { display: grid; gap: 14px; margin-top: 36px; }
.pl { display: flex; gap: 18px; padding: 22px 24px; border-radius: 24px; background: #fff; box-shadow: 0 8px 24px rgba(14, 34, 54, .06); transition: transform .4s var(--ease); }
.pl:hover { transform: translateX(8px); }
.pl .em { width: 54px; height: 54px; border-radius: 18px; flex-shrink: 0; display: grid; place-items: center; font-size: 26px; background: #DFF2FD; }
.pl:nth-child(2n) .em { background: #E1FAE3; }
.pl b { display: block; font: 700 20px Fredoka, sans-serif; }
.pl p { color: var(--muted); font-size: 15px; }

.cta-camp { border-radius: 44px; padding: 80px 70px; background: var(--grad); color: #0E2236; display: grid; grid-template-columns: 1.2fr .9fr; gap: 50px; align-items: center; position: relative; overflow: hidden; }
.cta-camp:before, .cta-camp:after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.cta-camp:before { width: 360px; height: 360px; right: -100px; top: -140px; }
.cta-camp:after { width: 200px; height: 200px; left: 38%; bottom: -120px; }
.cta-camp h2 { font-size: clamp(48px, 6vw, 96px); font-weight: 700; letter-spacing: -.035em; line-height: .92; position: relative; z-index: 1; }
.cta-camp .script { color: #0E2236; margin: 16px 0 0; }
.cta-camp .ocard { background: #fff; border: 0; border-radius: 30px; box-shadow: 0 30px 60px rgba(14, 34, 54, .2); position: relative; z-index: 1; color: #0E2236; }
.t-camp .ocard h3 { font: 700 36px/1 Fredoka, sans-serif; text-transform: none; letter-spacing: -.02em; }
.t-camp .ocard:before { height: 6px; }
.t-camp .ocard li:before { content: "✓"; color: #22B83A; font-weight: 700; }
.t-camp .spots .bar { background: #E3EDF5; }

.t-camp .voice blockquote { font-family: Fredoka, sans-serif; font-weight: 500; font-size: clamp(26px, 3vw, 42px); letter-spacing: -.015em; }
.t-camp .vn button.on { background: var(--acc); }
.t-camp .faq summary { font-family: Fredoka, sans-serif; font-weight: 600; font-size: 21px; }
.t-camp .faq summary:after { content: "+"; width: 34px; height: 34px; border-radius: 50%; background: #DFF2FD; display: grid; place-items: center; font-size: 22px; top: 20px; right: 0; }
.t-camp .footer, .t-camp .final { color: #EDE8E0; }
.t-camp .footer { background: #0E2236; --line: rgba(255, 255, 255, .1); --muted: #8FA3B6; --ink: #fff; }
.t-camp .sub, .t-camp .day, .t-camp .party { background: #fff; border: 0; box-shadow: 0 10px 30px rgba(14, 34, 54, .07); }
.t-camp .sub h3, .t-camp .party h3 { font: 700 30px/1 Fredoka, sans-serif; text-transform: none; }
.t-camp .day h4 span:first-child { font-family: Fredoka, sans-serif; font-weight: 700; text-transform: none; }
.t-camp .seg button.on { background: var(--ink); color: #fff; }
.t-camp .toast { background: #fff; color: var(--ink); border: 0; }
.t-camp .mcta .call { background: #fff; }
.t-camp .drawer nav a { font-family: Fredoka, sans-serif; text-transform: none; font-weight: 700; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav, .hr .ph { display: none; }
  .burger { display: grid; }
  .pin, .cin, .perks, .cta-camp, .faqw { grid-template-columns: 1fr; }
  .faqw { gap: 30px; } .faqw .side { position: static; }
  .wg { grid-template-columns: 1fr 1fr; } .wg .world:first-child { grid-column: 1 / -1; min-height: 520px; }
  .days { grid-template-columns: repeat(3, 1fr); }
  .acts { grid-template-columns: repeat(2, 1fr); }
  .stops { grid-template-columns: repeat(2, 1fr); }
  .tl { grid-template-columns: repeat(3, 1fr); row-gap: 40px; } .tl:before { display: none; }
  .weeks { grid-template-columns: repeat(3, 1fr); }
  .collage { height: 520px; max-width: 640px; }
}
@media (max-width: 860px) {
  .loc-btn span { display: none; }
  .std, .visit, .path { grid-template-columns: 1fr; }
  .std .img { min-height: 440px; } .std .tx { padding: 80px 24px; }
  .visit div + div, .path div + div { padding-left: 0; border: 0; }
  .fin { grid-template-columns: 1fr 1fr; }
  .sec { padding: 100px 0; } .t-camp .sec { padding: 90px 0; }
  .arrows { display: none; }
  .pc p { max-height: 80px; opacity: 1; }
  .bin, .bin.four { grid-template-columns: 1fr 1fr; } .bin > * + * { padding-left: 18px; } .bin > :nth-child(3) { border-left: 0; padding-left: 0; } .bin > :nth-child(n+3) { border-top: 1px solid var(--line); }
  .hero .bin > :nth-child(n+2) { display: none; } .hero .bin { grid-template-columns: 1fr; }
  .days { grid-template-columns: 1fr 1fr; }
  .wg { grid-template-columns: 1fr; } .world { min-height: 480px; }
  .mcta { display: flex; }
  .toast { left: 12px; right: 12px; bottom: 84px; max-width: none; }
  .proof { left: 12px; right: 12px; bottom: 84px; width: auto; }
  .route { padding: 50px 26px; border-radius: 30px; }
  .cta-camp { padding: 50px 26px; border-radius: 30px; }
  .weeks { grid-template-columns: repeat(2, 1fr); }
  .modal-bg { padding: 0; align-items: flex-end; }
  .modal { grid-template-columns: 1fr; border-radius: 22px 22px 0 0; max-height: 94svh; }
  .modal-side { display: none; }
  .modal-main { padding: 28px 22px 0; }
  .opts, .row2 { grid-template-columns: 1fr; }
  .phero { padding: 140px 0 120px; }
}
@media (max-width: 560px) {
  .ctas .btn { white-space: normal; text-align: center; line-height: 1.35; max-width: 100%; }
  .wrap { width: calc(100% - 36px); }
  .hdr .btn.sm { display: none; }
  .brand span { font-size: 17px; }
  .days, .stops { grid-template-columns: 1fr; }
  .acts { gap: 10px; } .act { min-height: 0; padding: 20px 16px; border-radius: 22px; } .act .em { font-size: 36px; } .act h3 { font-size: 19px; margin-top: 12px; } .act p { font-size: 13px; }
  .tl { grid-template-columns: 1fr 1fr; }
  .collage { height: 400px; }
  .stk { font-size: 14px; padding: 10px 14px; }
  .sig { gap: 36px; }
  .fin { grid-template-columns: 1fr; }
  .chero { padding-top: 150px; }
  .hero h1 { font-size: 21vw; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .mani p span { opacity: 1; }
}

/* ---------- Pro-X (Perform) · lime on black, skewed and high-energy ---------- */
.t-prox .tbar { background: var(--acc); color: #050505; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.t-prox .btn { border-radius: 0; transform: skewX(-12deg); }
.t-prox .btn > * , .t-prox .btn { font-style: italic; }
.t-prox .btn:hover { background: var(--acc); color: #050505; }
.t-prox .hdr.on, .t-prox .hdr:not(.over) { background: rgba(5, 5, 5, .86); }
.btn.xbtn { background: var(--acc); color: #050505; font-weight: 800; }
.btn.xbtn:hover { background: #fff; color: #050505; box-shadow: 0 12px 50px var(--glow); }
.xtag { display: inline-block; font: italic 800 12px/1 Inter, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: #050505; background: var(--acc); padding: 8px 14px; transform: skewX(-12deg); }
.xh, .xh2 { font-family: Anton, Impact, sans-serif; text-transform: uppercase; font-style: italic; font-weight: 400; line-height: .86; letter-spacing: -.005em; transform: skewX(-6deg); }
.xh { font-size: clamp(76px, 11vw, 190px); margin: 22px 0 26px; }
.xh2 { font-size: clamp(56px, 7vw, 116px); margin-top: 20px; }
.xh em, .xh2 em { font-style: italic; color: transparent; -webkit-text-stroke: 2px var(--acc); }
.xhero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 180px 0 0; overflow: hidden; isolation: isolate; }
.xbg { position: absolute; inset: 0; z-index: -3; clip-path: polygon(38% 0, 100% 0, 100% 100%, 20% 100%); }
.xbg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.25) brightness(.8); }
.xbg:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #050505 0%, rgba(5,5,5,.2) 40%, rgba(5,5,5,.1)), linear-gradient(180deg, transparent 55%, #050505), rgba(182, 255, 0, .12); mix-blend-mode: normal; }
.xhero:before { content: ""; position: absolute; inset: 0; z-index: -2; background: repeating-linear-gradient(-60deg, transparent 0 46px, rgba(182, 255, 0, .05) 46px 48px); }
.xhero:after { content: ""; position: absolute; z-index: -1; width: 14px; top: -10%; bottom: -10%; left: 31%; background: var(--acc); transform: skewX(-22deg); box-shadow: 34px 0 0 -4px rgba(182,255,0,.35); }
.xword { position: absolute; z-index: -1; right: -2vw; top: 90px; font: italic 400 clamp(160px, 30vw, 520px)/.8 Anton, sans-serif; color: transparent; -webkit-text-stroke: 2px rgba(182, 255, 0, .35); transform: skewX(-10deg); pointer-events: none; letter-spacing: -.02em; }
.xin { position: relative; padding-bottom: 60px; }
.xin .lead { max-width: 560px; color: var(--soft); font-size: 18px; }
.xin .crumbs { margin-bottom: 26px; }
.xin .ctas { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 36px; }
.xstats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); margin-bottom: 0; }
.xstats > div { padding: 26px 22px 30px 0; border-right: 1px solid var(--line); margin-right: 22px; }
.xstats > div:last-child { border: 0; }
.xstats span { display: block; font: italic 700 11px/1 Inter, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--acc); margin-bottom: 10px; }
.xstats b { font: italic 400 26px/1.1 Anton, sans-serif; text-transform: uppercase; }
.xtick { background: var(--acc); color: #050505; overflow: hidden; transform: rotate(-2deg) scale(1.04); margin: 30px 0 10px; padding: 16px 0; box-shadow: 0 0 60px var(--glow); }
.xtick .track { display: flex; gap: 34px; width: max-content; animation: tick 26s linear infinite; font: italic 400 34px/1 Anton, sans-serif; text-transform: uppercase; align-items: center; }
.xtick i { font-style: normal; font-size: 20px; }
@keyframes tick { to { transform: translateX(-33.333%); } }
.xhead { margin-bottom: 60px; }
.xgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); }
.xcard { position: relative; background: var(--bg); padding: 40px 34px 44px; min-height: 260px; overflow: hidden; transition: background .4s; }
.xcard b { font: italic 400 64px/1 Anton, sans-serif; color: transparent; -webkit-text-stroke: 1.5px var(--acc); display: block; margin-bottom: 30px; }
.xcard h3 { font: italic 400 32px/1 Anton, sans-serif; text-transform: uppercase; margin-bottom: 12px; }
.xcard p { color: var(--muted); }
.xcard:after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--acc); transition: width .5s var(--ease); }
.xcard:hover { background: var(--card); } .xcard:hover:after { width: 100%; }
.xsplit { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 70px; padding: 60px 0 120px; }
.ximg { clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%); min-height: 640px; position: relative; }
.ximg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2); }
.ximg:after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(182,255,0,.35), transparent 50%); mix-blend-mode: multiply; }
.xtx { padding-right: 28px; max-width: 600px; }
.xp { border-left: 4px solid var(--acc); padding: 6px 0 6px 22px; margin: 28px 0; }
.xp h3 { font: italic 400 26px/1.05 Anton, sans-serif; text-transform: uppercase; margin-bottom: 6px; }
.xp p { color: var(--muted); }
.xtx .btn { margin-top: 16px; }
.xsteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.xstep { position: relative; padding: 36px 30px 40px; background: var(--card); clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%); }
.xstep b { font: italic 400 20px/1 Anton, sans-serif; color: #050505; background: var(--acc); padding: 6px 12px; display: inline-block; transform: skewX(-12deg); margin-bottom: 26px; }
.xstep h3 { font: italic 400 30px/1 Anton, sans-serif; text-transform: uppercase; margin-bottom: 10px; }
.xstep p { color: var(--muted); }
.xtimes { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 34px; padding: 30px 34px; border: 1px solid var(--line); background: repeating-linear-gradient(-60deg, transparent 0 22px, rgba(182,255,0,.04) 22px 24px); }
.xtimes:empty { display: none; }
.xtimes > b { font: italic 400 30px/1 Anton, sans-serif; text-transform: uppercase; }
.xtimes .btn { margin-left: auto; }
.xfinal { position: relative; padding: 170px 0; text-align: center; overflow: hidden; isolation: isolate; }
.xfinal > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: grayscale(1) contrast(1.2) brightness(.45); }
.xfinal:before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(182,255,0,.18), transparent 60%), linear-gradient(180deg, var(--bg), transparent 30%, transparent 70%, var(--bg)); }
.world.wx > img { filter: grayscale(1) contrast(1.2); }
.world.wx h3 { font-style: italic; transform: skewX(-6deg); transform-origin: left; }
.world.wx .go { color: var(--cg); }
.t-prox .faq .q:hover, .t-prox .faq-search:focus { border-color: var(--acc); }
@media (max-width: 900px) {
  .xbg { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: .55; }
  .xhero:after { display: none; }
  .xhero { padding-top: 150px; }
  .xtag { font-size: 10px; letter-spacing: .18em; padding: 7px 11px; }
  .xh, .xh2 { line-height: .92; }
  .xin .ctas .btn { width: calc(100% - 12px); }
  .xstats > div { padding: 20px 12px 22px 0; margin-right: 12px; }
  .xstats b { font-size: 20px; }
  .xtimes { padding: 24px 22px; }
  .xtimes > b { font-size: 24px; }
  .xstats { grid-template-columns: 1fr 1fr; }
  .xstats > div:nth-child(2) { border: 0; }
  .xgrid, .xsteps { grid-template-columns: 1fr; }
  .xsplit { grid-template-columns: 1fr; gap: 40px; padding-top: 20px; }
  .ximg { min-height: 420px; clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
  .xtx { padding: 0 22px; }
  .xcard { min-height: 0; padding: 30px 24px; }
  .xtimes .btn { margin-left: 0; }
  .xtick .track { font-size: 26px; }
}

/* Pro-X street layer: stickers, scrawl, halftone, feature panels */
.xhero .xin:before { content: ""; position: absolute; z-index: -1; left: -60px; top: 40px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(182,255,0,.22) 1.6px, transparent 2.2px) 0 0 / 14px 14px; -webkit-mask: radial-gradient(circle, #000, transparent 70%); mask: radial-gradient(circle, #000, transparent 70%); pointer-events: none; }
.xstick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.xsticker { display: inline-block; font: 800 13px/1 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: #050505; border: 2px solid #fff; padding: 9px 14px; transform: rotate(-4deg); box-shadow: 4px 4px 0 var(--acc); }
.xsticker.big { position: absolute; z-index: 2; right: 12%; bottom: 40px; font: italic 400 34px/.95 Anton, sans-serif; letter-spacing: .02em; padding: 16px 20px; transform: rotate(6deg); }
.xfinal .xsticker { margin-bottom: 8px; }
.xscrawl { font: 700 clamp(30px, 3.4vw, 46px)/1 Caveat, cursive; color: var(--acc); transform: rotate(-3deg); margin: 8px 0 22px 6px; text-shadow: 0 0 24px var(--glow); }
.xfeat { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; }
.xpanel { position: relative; overflow: hidden; padding: 48px 44px 44px; background: var(--card); border: 1px solid var(--line); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%); transition: border-color .4s, transform .4s var(--ease); }
.xpanel:before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(182,255,0,.12) 1.4px, transparent 2px) 0 0 / 12px 12px; -webkit-mask: linear-gradient(225deg, #000, transparent 55%); mask: linear-gradient(225deg, #000, transparent 55%); pointer-events: none; }
.xpanel:hover { border-color: var(--acc); transform: translateY(-4px); }
.xnum { position: absolute; right: 30px; top: 18px; font: italic 400 120px/1 Anton, sans-serif; color: transparent; -webkit-text-stroke: 1.5px rgba(182,255,0,.4); }
.xicon { display: block; width: 62px; height: 62px; color: var(--acc); margin-bottom: 26px; }
.xicon svg { width: 100%; height: 100%; }
.xpanel h3 { font: italic 400 clamp(48px, 5vw, 72px)/.9 Anton, sans-serif; text-transform: uppercase; transform: skewX(-6deg); transform-origin: left; margin-bottom: 18px; }
.xpanel p { color: var(--soft); max-width: 480px; font-size: 17px; }
.xchips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.xchips span { font: italic 700 12px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; padding: 10px 14px; border: 1.5px solid var(--acc); color: var(--acc); transform: skewX(-12deg); }
.xchips span:nth-child(odd) { background: var(--acc); color: #050505; }
.xgrid.four { grid-template-columns: repeat(4, 1fr); }
.xgrid.four .xcard { min-height: 230px; }
.xtimes > b { flex: 1; }
@media (max-width: 1100px) { .xgrid.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .xfeat, .xgrid.four { grid-template-columns: 1fr; }
  .xpanel { padding: 36px 24px 40px; }
  .xnum { font-size: 84px; right: 18px; }
  .xsticker.big { right: 22px; bottom: 60px; font-size: 26px; }
  .xhero .xin:before { width: 260px; height: 260px; }
}

/* Birthday party themes */
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.theme { position: relative; overflow: hidden; padding: 40px 34px 38px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--tc); transition: transform .4s var(--ease), box-shadow .4s; }
.theme:before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tc) 35%, transparent), transparent 70%); pointer-events: none; }
.theme:hover { transform: translateY(-6px); box-shadow: 0 24px 60px color-mix(in srgb, var(--tc) 22%, transparent); }
.theme:has(.tim):before { display: none; }
.theme .tim { display: block; max-width: none; width: calc(100% + 68px); margin: -40px -34px 28px; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s var(--ease); }
.theme:hover .tim { transform: scale(1.03); }
.theme .ti { display: block; width: 54px; height: 54px; color: var(--tc); margin-bottom: 24px; }
.theme .ti svg { width: 100%; height: 100%; }
.theme h3 { font: 400 36px/1 Anton, sans-serif; text-transform: uppercase; margin-bottom: 12px; }
.theme p { color: var(--muted); }
.theme ul { list-style: none; margin-top: 22px; display: grid; gap: 10px; }
.theme li { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 14px; }
.theme li:before { content: ""; width: 8px; height: 8px; background: var(--tc); transform: rotate(45deg); flex: none; }
@media (max-width: 900px) { .themes { grid-template-columns: 1fr; } .theme { padding: 32px 24px; } .theme .tim { width: calc(100% + 48px); margin: -32px -24px 24px; } }

/* Families dropdown */
.fam { position: absolute; top: calc(100% + 14px); right: -20px; width: 340px; padding: 10px; border-radius: 16px; background: #111112; border: 1px solid rgba(237, 232, 224, .12); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transform: translateY(8px); transition: .25s var(--ease); color: #EDE8E0; }
.dd:hover .fam, .dd.open .fam { opacity: 1; visibility: visible; transform: none; }
.fam.party-menu { right: auto; left: -20px; width: 320px; }
.fam:before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.fam a { display: flex; gap: 14px; align-items: center; padding: 11px 12px; border-radius: 10px; transition: background .2s; }
.fam a:hover { background: rgba(237, 232, 224, .07); }
.fam .fi { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(237, 232, 224, .06); color: #E3141B; }
.fam .fi svg { width: 20px; height: 20px; }
.fam b { display: block; font-weight: 600; font-size: 14px; }
.fam small { display: block; color: #8F8A82; font-size: 12px; }
.fam a.fsoc { display: block; margin-top: 6px; padding: 12px; border-top: 1px solid rgba(237, 232, 224, .1); border-radius: 0 0 10px 10px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #8F8A82; }
.fam a.fsoc:hover { color: #EDE8E0; }
.t-camp .fam .fi { color: #3DB1ED; }
.t-purple .fam .fi { color: #A35BFF; }
.t-prox .fam .fi { color: #B6FF00; }
.drawer .dfam a { font-size: 22px; opacity: .85; }
.pc .pcr, .std .img .pcr { position: absolute; z-index: 3; font-size: 9px; letter-spacing: .02em; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.5); color: rgba(255,255,255,.7); pointer-events: none; }
.pc .pcr { right: 12px; bottom: 6px; }
.std .img .pcr { right: 12px; bottom: 12px; }
.phero .pcr, .final .pcr { position: absolute; z-index: 3; right: 14px; bottom: 12px; font-size: 9px; letter-spacing: .02em; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.5); color: rgba(255,255,255,.7); pointer-events: none; }
.phero .pcr { top: 100px; bottom: auto; }
/* Child step: one card per child, quick age or grade chips */
.kids { display: grid; gap: 12px; }
.kids:has(.kid + .kid) .kid { padding: 14px 16px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.kid .field { margin-bottom: 8px; }
.kid .kid-pick { margin: 0; }
.kid-l { display: flex !important; justify-content: space-between; align-items: baseline; }
.kid-x { font-size: 12px; letter-spacing: .02em; text-transform: none; color: var(--muted); text-decoration: underline; font-weight: 500; }
.kid-x:hover { color: var(--ink); }
.ages-row { gap: 5px; }
.ages-row button { min-width: 38px; height: 42px; padding: 0 8px; font-size: 15px; }
.ages-row button.wide { padding: 0 14px; }
.ages-row.grades button { min-width: 44px; }
.add-kid { margin-top: 12px; width: 100%; padding: 13px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); border: 0; font-weight: 600; font-size: 14px; color: var(--ink); background: transparent; transition: .2s; }
.add-kid:hover { box-shadow: inset 0 0 0 1px var(--acc); color: var(--acc); }

.consent a, .fbot a { color: inherit; text-decoration: underline; }
.legal { max-width: 780px; }
.legal h2 { font-family: Anton, sans-serif; font-size: 28px; letter-spacing: .02em; text-transform: uppercase; margin: 40px 0 12px; }
.legal p { color: var(--muted); line-height: 1.7; margin: 0 0 14px; }
.legal p b { color: var(--fg, #fff); }
.legal a { color: inherit; text-decoration: underline; }
.legal .upd { margin-top: 40px; font-size: 13px; }

/* Read by search engines and screen readers, not shown. */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* The saved copy of the page is swapped for the live one without replaying fade-ins. */
.ssr .reveal, .ssr .path:before { transition: none !important; }
.form-err { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.45; color: var(--ink); background: rgba(255, 77, 77, .1); box-shadow: inset 0 0 0 1px rgba(255, 77, 77, .5); }
.form-err a { color: inherit; font-weight: 700; }
.form-err .mini { margin-left: 6px; }
.demo-note.demo-top { margin: 0 0 16px; border: 0; background: rgba(255, 196, 0, .12); box-shadow: inset 0 0 0 1px rgba(255, 196, 0, .55); color: var(--ink); }
/* Keep the button bar's fade off the consent text when it is the last thing above the buttons. */
.modal-main #oForm .consent { margin-bottom: 26px; }