/* Embrace Kids Club: the homepage layout in the Kids Club logo colors. Loads after home.css.
   Colors from brand/logos/kids-club.svg: red, sun yellow, blue and green on black. */
.kc{
  --kc-red:#ED1C24; --kc-yellow:#FFEC09; --kc-blue:#00AEEF; --kc-green:#00A651;
  --gold:#FFCB08;   /* the logo's deeper yellow takes the place of Embrace gold everywhere */
  --kc-red-text:#D3141B; --kc-yellow-text:#A67C00; --kc-blue-text:#0079B8; --kc-green-text:#008540;   /* the same colors, deep enough to read as text on white */
}
.k-red{ --k:var(--kc-red); --kt:var(--kc-red-text); }
.k-yellow{ --k:var(--kc-yellow); --kt:var(--kc-yellow-text); }
.k-blue{ --k:var(--kc-blue); --kt:var(--kc-blue-text); }
.k-green{ --k:var(--kc-green); --kt:var(--kc-green-text); }

/* Kids Club email pop-up (owner, 2026-11-03): the homepage pop-up's shape (home.css .pop) in the Kids Club look */
.kc-pop{ background:#fff; color:#111; border:0; border-top:0; }
.kc-pop-stripe{ height:6px; background:linear-gradient(90deg, var(--kc-red) 0 25%, var(--kc-yellow) 25% 50%, var(--kc-blue) 50% 75%, var(--kc-green) 75%); }
.kc-pop .pop-photo img{ object-position:50% 12%; }   /* keeps both kids' faces in the frame */
.kc-pop .pop-photo::after{ background:linear-gradient(180deg, rgba(255,255,255,0) 45%, #fff 100%); }
.kc-pop h2{ font-family:'Bungee',Impact,sans-serif; font-weight:400; text-transform:none; color:#111; font-size:clamp(1.5rem,4.5vw,2rem); line-height:1.15; }
.kc-pop p{ color:#444; font-family:'Poppins',system-ui,sans-serif; }
.kc-pop label{ color:#555; font-family:'Poppins',system-ui,sans-serif; }
.kc-pop input[type=email]{ background:#f4f4f2; color:#111; border-color:#ddd; }
.kc-pop input:focus{ outline-color:var(--kc-blue); }
.kc-pop .book{ background:var(--kc-yellow); color:#000; font-family:'Bungee',Impact,sans-serif; font-size:1rem; }
.kc-pop .x{ background:rgba(255,255,255,.85); color:#111; border-color:rgba(0,0,0,.12); }
.kc-pop .x:hover{ background:#fff; border-color:var(--kc-red); }
.kc-pop .fun span:nth-child(4){ color:var(--kc-yellow-text); }
.kc-pop .fun span:nth-child(5){ color:var(--kc-red-text); }
.kc-pop .fun span:nth-child(6){ color:var(--kc-blue-text); }

/* header: the four logo colors as a stripe along the bottom instead of the gold line */
.kc .bar{ border-bottom:0; }
.kc .bar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, var(--kc-red) 0 25%, var(--kc-yellow) 25% 50%, var(--kc-blue) 50% 75%, var(--kc-green) 75%);
}
.kc-mark img{ height:46px; width:auto; }
.kc-div{ width:1px; height:30px; background:var(--line); }
.kc .mark img{ width:34px; height:34px; }
.links a[aria-current="page"]::after{ transform:scaleX(1); }

/* "fun" in the logo colors, one letter each */
.fun span:nth-child(1){ color:var(--kc-red-text); }
.fun span:nth-child(2){ color:var(--kc-blue-text); }
.fun span:nth-child(3){ color:var(--kc-green-text); }

/* camp rates: three tiles, one color each */
.camps .wrap{ text-align:center; }
.camps .lede{ margin:0 auto; }
.camp-rates{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; }
.rate{ background:var(--panel); border:1px solid var(--line); border-top:6px solid var(--k); border-radius:14px; padding:2.25rem 1.5rem; }
.rate h3{ font-size:1.6rem; }
.rate .price{ font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; font-size:4rem; line-height:1.1; color:var(--kt); margin-top:.5rem; }
.rate-note{ color:var(--muted); font-size:.9rem; margin-top:.25rem; }
@media (max-width:760px){ .camp-rates{ grid-template-columns:1fr; } }

/* questions: the logo's yellow instead of Embrace gold */
.kc .faq{ background:var(--kc-yellow); border-block:0; }
.kc .faq h2{ color:#000; }
.kc .faq-list, .kc .faq details{ border-color:rgba(0,0,0,.25); }
.kc .faq summary:focus-visible{ outline-color:#000; }

/* what's inside: one row per amenity, laid out like the class rows on the Embrace class pages. No box: a square photo
   floating on a soft glow in that amenity's logo color, and the text centered in the other half; .flip mirrors it. */
.amenities{ display:grid; gap:2.5rem; margin-top:1.5rem; max-width:980px; margin-inline:auto; }
.amenity{ display:grid; grid-template-columns:minmax(0,380px) 1fr; grid-template-areas:"pic text"; align-items:center; gap:3rem; }
.amenity.flip{ grid-template-columns:1fr minmax(0,380px); grid-template-areas:"text pic"; }
.amenity-pic{ grid-area:pic; position:relative; aspect-ratio:1/1; }
.amenity-pic::before{ content:""; position:absolute; inset:-14%; z-index:0; background:radial-gradient(closest-side, color-mix(in srgb, var(--k) 45%, transparent), transparent); filter:blur(16px); pointer-events:none; }
.amenity-pic img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; border-radius:18px; box-shadow:0 26px 50px rgba(20,20,30,.22); }
.amenity-text{ grid-area:text; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.75rem; }
.amenity-text h3{ font-size:clamp(2rem,3.6vw,2.8rem); color:var(--kt); }
.amenity-text p{ font-size:1.08rem; line-height:1.65; max-width:440px; }
@media (max-width:860px){
  .amenity, .amenity.flip{ grid-template-columns:1fr; grid-template-areas:"pic" "text"; gap:1.5rem; }
}

/* four rates in a row */
.camp-rates{ grid-template-columns:repeat(4,1fr); }
.rate .price{ font-size:3.4rem; }
.rate-fees{ margin-top:1.75rem; color:var(--muted); font-size:.92rem; }
@media (max-width:960px){ .camp-rates{ grid-template-columns:1fr 1fr; } }

/* birthday parties: pitch on the left, what's included on the right */
.party-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.parties .lede{ margin-bottom:2rem; }
.party-list{ list-style:none; display:grid; gap:.8rem; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:2rem; }
.party-list li{ padding-left:1.1rem; border-left:4px solid var(--kc-red); color:var(--white); }
.party-list li:nth-child(4n+2){ border-color:var(--kc-yellow); }
.party-list li:nth-child(4n+3){ border-color:var(--kc-blue); }
.party-list li:nth-child(4n){ border-color:var(--kc-green); }
@media (max-width:860px){ .party-grid{ grid-template-columns:1fr; } }

/* sign up right under the heading below the hero */
.about .signup{ display:inline-block; margin-top:2rem; font-size:1.5rem; padding:1rem 3rem; }

/* parents night out and overnights: a section each, photo on one side and the pitch on the other; .flip mirrors it */
.feature-grid{ display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"pic text"; gap:3.5rem; align-items:center; }
.feature.flip .feature-grid{ grid-template-areas:"text pic"; }
.feature-pic{ grid-area:pic; position:relative; aspect-ratio:4/3; border-radius:14px; overflow:hidden; border:1px solid var(--line); border-bottom:6px solid var(--k); }
.feature-pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.feature-text{ grid-area:text; }
.feature-text h2{ color:var(--kt); }
.feature-text .lede{ margin-bottom:2rem; max-width:480px; }
@media (max-width:860px){ .feature-grid, .feature.flip .feature-grid{ grid-template-columns:1fr; grid-template-areas:"pic" "text"; gap:1.75rem; } }

/* header links jump to these; keep them clear of the sticky header */
.kc section[id]{ scroll-margin-top:var(--bar-h); }

/* hero: a little shorter than the homepage's full first screen */
.kc .hero{ height:max(400px, calc(78vh - var(--bar-h))); }
/* the Kids Club keeps its photo header (the Embrace home's video header is down, so home.css no longer sizes it):
   the whole photo fills the box, framed a little high so both kids on the rig stay in, under a light shade for the logo */
.kc .hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.kc .hero-shade{ position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(11,11,12,.25) 0%, rgba(11,11,12,.6) 100%); }

/* ── white theme: the Kids Club page is mostly white. The shared tokens flip (ink becomes the background,
   "white" becomes the text color), and the footer keeps the dark Embrace look so its white logos still show. ── */
.kc{ --ink:#ffffff; --panel:#f4f5f7; --line:#e1e3e8; --white:#16161a; --muted:#5c5e66; --black:#16161a; }
.kc p{ color:#3b3d44; }
.kc .about .lede b{ color:#16161a; }
.kc .bar{ box-shadow:none; }
.kc .links a:hover{ color:var(--kc-red-text); }
.kc .links a::after{ background:var(--kc-red); }
.kc .mark img{ filter:brightness(0); }   /* the gold E disappears on white, so it shows black here */
.kc .faq p, .kc .faq summary{ color:#16161a; }
.kc .faq summary::after{ color:#16161a; }   /* white plus signs vanish on the logo's bright yellow */
.kc .loc .note, .kc .loc-club{ color:var(--muted); }
.kc .loc-club a, .kc .faq-more a{ color:var(--kc-red-text); font-weight:700; }
.kc .dir{ color:#16161a; border-color:#16161a; }
.kc .dir:hover{ background:#16161a; color:#fff; }
.kc .rate, .kc .party-list{ box-shadow:0 10px 30px rgba(20,20,30,.06); }

/* inner pages (tools/build_kids_club.py): a photo band, the title beneath it, then the sections */
.kc-page-hero{ position:relative; height:max(260px, 38vh); overflow:hidden; border-bottom:6px solid transparent;
  border-image:linear-gradient(90deg, var(--kc-red) 0 25%, var(--kc-yellow) 25% 50%, var(--kc-blue) 50% 75%, var(--kc-green) 75%) 1; }
.kc-page-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.kc-page-title{ text-align:center; padding-block:2.5rem 3rem; }
.kc-page-title .wrap{ display:flex; flex-direction:column; align-items:center; }
.kc-page-title .back{ align-self:flex-start; color:var(--kc-red-text); font-weight:700; margin-bottom:1rem; }
.kc-page-title .back:hover{ text-decoration:underline; text-underline-offset:4px; }
.kc-page-title h1{ font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; text-transform:uppercase; line-height:.9; font-size:clamp(3rem,7vw,5.5rem); margin-bottom:1rem; }
.kc-page-title .lede{ max-width:600px; font-size:1.1rem; }

/* news page, before the first story */
.kc-empty{ text-align:center; max-width:640px; margin:0 auto; padding:3rem 2rem; background:var(--panel); border:1px solid var(--line); border-top:6px solid var(--kc-blue); border-radius:14px; box-shadow:0 10px 30px rgba(20,20,30,.06); }
.kc-empty p{ margin:.5rem auto 1.75rem; }
.kc-empty a[href^="tel"]{ color:var(--kc-red-text); font-weight:700; white-space:nowrap; }
.kc-empty .signup{ display:inline-block; }
.kc-empty .kc-actions{ margin:0; }
/* story cards on white: the news page's gold accents become the logo's red */
.kc .story{ box-shadow:0 10px 30px rgba(20,20,30,.06); }
.kc .story-text{ border-left-color:var(--kc-red); }
.kc .story-date, .kc .story-more{ color:var(--kc-red-text); }

/* ── type: Bungee headings and Poppins text (owner pick, 2026-10-28). Bungee runs much wider than Anton,
   so sizes step down to keep headings on the same lines. The footer keeps the Embrace fonts. ── */
.kc{ font-family:'Poppins',system-ui,sans-serif; }
.kc h1, .kc h2, .kc h3, .kc .book, .kc .links a, .kc .rate .price, .kc .type-times{ font-family:'Bungee',Impact,sans-serif; font-weight:400; letter-spacing:0; }
.kc h2{ font-size:clamp(1.6rem,3.4vw,2.4rem); line-height:1.05; }
.kc h3{ font-size:1.15rem; }
.kc .bar nav a{ font-size:.78rem; }
.kc .book{ font-size:1.05rem; }
.kc .about .signup{ font-size:1.2rem; }
.kc .kc-page-title h1{ font-size:clamp(2.2rem,5vw,3.8rem); line-height:1; }
.kc .rate h3{ font-size:1.15rem; }
.kc .rate .price{ font-size:3rem; }
.kc .amenity-text h3{ font-size:clamp(1.9rem,3.4vw,2.6rem); }
.kc .loc-info h3{ font-size:1.7rem; }
.kc .faq summary{ font-family:'Poppins',system-ui,sans-serif; font-weight:600; }

/* the amenity rows as outlined cards (owner pick, sticker style D3): a white tile with a thick outline and a hard
   shadow in that amenity's logo color, the photo plain with rounded corners */
.amenity{ background:#fff; border:4px solid var(--k); border-radius:28px; padding:1.75rem; box-shadow:10px 10px 0 var(--k); }
.amenity-pic::before{ display:none; }
.amenity-pic img{ border-radius:18px; box-shadow:none; }

/* Kids Club footer: white, a four color stripe on top, Bungee headings in the logo colors */
.kc-foot{ background:#fff; border-top:0; position:relative; }
.kc-foot::before{ content:""; position:absolute; left:0; right:0; top:0; height:6px;
  background:linear-gradient(90deg, var(--kc-red) 0 25%, var(--kc-yellow) 25% 50%, var(--kc-blue) 50% 75%, var(--kc-green) 75%); }
.kc-foot .foot-grid{ grid-template-columns:1.5fr .9fr 1.4fr 1fr 1fr; }
.kc-foot-logo{ width:200px; height:auto; }
.kc-foot-part{ color:#3b3d44; margin-top:1rem; }
.kc-foot-part a{ color:var(--kc-red-text); font-weight:700; }
.kc-foot .foot-col h4{ font-family:'Bungee',Impact,sans-serif; font-size:1rem; letter-spacing:0; color:var(--kt); }
.kc-foot .foot-col a{ color:#16161a; }
.kc-foot .foot-col a:hover{ color:var(--kt); }
.kc-foot-addr{ color:#3b3d44; font-size:.92rem; line-height:1.5; }
.kc-foot .foot-email label{ color:#16161a; }
.kc-foot .foot-email input{ background:#f4f5f7; border-color:#e1e3e8; color:#16161a; }
.kc-foot .foot-email button{ background:var(--gold); color:#000; font-family:'Bungee',Impact,sans-serif; font-size:.9rem; }
.kc-foot .foot-email-note, .kc-foot .foot-sms, .kc-foot .foot-legal p{ color:#5c5e66; }
.kc-foot .foot-sms{ border-top:0; }
.kc-foot .foot-sms b{ color:#16161a; }
.kc-foot .foot-legal a{ color:#3b3d44; }
@media (max-width:900px){ .kc-foot .foot-grid{ grid-template-columns:1fr 1fr; } }

/* Inside the club: a big centered heading, close under the Sign Up button */
.kc .about{ padding-bottom:1.5rem; }
.kc .inside{ padding-top:2rem; }
.kc .inside > .wrap > h2{ font-size:clamp(3rem,7vw,5.2rem); text-align:center; margin-bottom:2rem; }

/* the intro under "Where kids go to have fun": centered, with each amenity and event in a logo color */
.kc .kc-intro{ max-width:720px; margin:0 auto; font-size:1.15rem; line-height:1.7; color:#3b3d44; }
.kc .kc-intro + .kc-intro{ margin-top:.9rem; }
.kc .about .kc-intro b{ color:var(--kt); font-weight:700; }
.kc .about .signup{ margin-top:2rem; }
.kc .about h2{ font-size:clamp(2.4rem,5vw,3.6rem); }   /* "Where kids go to have fun", a little bigger */
/* amenity rows: titles a touch bigger, and the text sits a little above the middle of its photo */
.kc .amenity-text h3{ font-size:clamp(2.2rem,3.8vw,3rem); }
.kc .amenity-text{ padding-bottom:3rem; }

/* camp days and rates: closer under Inside the club; each rate card floats up toward you on hover */
.kc .inside{ padding-bottom:1.5rem; }
.kc .camps{ padding-top:2.5rem; }
.kc .rate{ transition:transform .25s ease, box-shadow .25s ease; }
.kc .rate:hover{ transform:translateY(-10px) scale(1.05); box-shadow:0 24px 48px rgba(20,20,30,.18), 0 0 0 3px var(--k); position:relative; z-index:1; }
.kc .rates-cta{ display:inline-block; margin-top:2rem; font-size:1.2rem; padding:1rem 2.75rem; }
@media (prefers-reduced-motion: reduce){ .kc .rate:hover{ transform:none; } }

/* Facility page: meet our staff, cards in the same outlined style as the amenity rows */
.kc-staff .wrap{ text-align:center; }
.kc-staff > .wrap > h2{ font-size:clamp(3rem,7vw,5.2rem); margin-bottom:.75rem; }
.kc-staff .lede{ margin:0 auto 2.25rem; max-width:560px; }
.staff-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.75rem; }
.staff-card{ background:#fff; border:4px solid var(--k); border-radius:24px; padding:1.25rem 1.25rem 1.5rem; box-shadow:8px 8px 0 var(--k); }
.staff-pic{ aspect-ratio:1/1; border-radius:16px; overflow:hidden; background:#f4f5f7; display:grid; place-items:end center; margin-bottom:1rem; }
.staff-pic img{ width:100%; height:100%; object-fit:cover; }
.staff-pic img.ph{ width:70%; height:auto; opacity:.35; }
.staff-card h3{ font-size:1.35rem; color:var(--kt); }
.staff-card p{ font-size:.95rem; color:#5c5e66; margin-top:.25rem; }
@media (max-width:900px){ .staff-grid{ grid-template-columns:1fr 1fr; } }

/* parties, parents night out and overnights: heading and button centered, the pitch stays left aligned */
.parties .party-grid > div:first-child, .feature-text{ text-align:center; }
.parties h2, .feature-text h2{ font-size:clamp(2.8rem,5.5vw,4.2rem); }
.parties .lede, .feature-text .lede{ text-align:left; margin-left:auto; margin-right:auto; }

/* birthday parties: what's included as a simple bulleted list under an Included heading */
.party-list{ display:block; padding:2rem 2.25rem; }
.party-list h3{ font-size:1.6rem; color:var(--kc-red-text); margin-bottom:1rem; }
.party-list ul{ list-style:none; display:grid; gap:.75rem; }
.party-list li{ border:0; padding-left:1.4rem; position:relative; }
.party-list li::before{ content:''; position:absolute; left:0; top:.55em; width:.55rem; height:.55rem; border-radius:50%; background:var(--kc-red); }
.party-list li:nth-child(4n+2)::before{ background:var(--kc-yellow); }
.party-list li:nth-child(4n+3)::before{ background:var(--kc-blue); }
.party-list li:nth-child(4n)::before{ background:var(--kc-green); }

/* register page: Still need help? question form */
.kc-help .wrap{ text-align:center; }
.kc-help h2{ font-size:clamp(2.6rem,5.5vw,4rem); margin-bottom:.75rem; }
.kc-help .lede{ margin:0 auto 2rem; max-width:560px; }
.kc-help .lede a{ color:var(--kc-red-text); font-weight:700; white-space:nowrap; }
.kc-form{ max-width:680px; margin:0 auto; text-align:left; display:grid; gap:1rem; background:#fff; border:4px solid var(--kc-blue); border-radius:24px; box-shadow:10px 10px 0 var(--kc-blue); padding:2rem; }
.kc-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.kc-form label{ display:flex; flex-direction:column; gap:.35rem; font-weight:600; font-size:.95rem; }
.kc-form input:not([type=checkbox]), .kc-form textarea{ font:inherit; font-weight:400; padding:.75rem .9rem; border:2px solid #d9dbe1; border-radius:12px; background:#fff; color:inherit; }
.kc-form input:focus, .kc-form textarea:focus{ outline:none; border-color:var(--kc-blue); }
.kc-form .consent{ flex-direction:row; align-items:flex-start; gap:.6rem; font-weight:400; font-size:.8rem; color:#5c5e66; }
.kc-form .consent input{ margin-top:.2rem; }
.kc-form .consent a{ text-decoration:underline; }
.kc-form button{ justify-self:center; border:0; cursor:pointer; }
@media (max-width:640px){ .kc-form .row{ grid-template-columns:1fr; } }

/* birthdays page: two pitch paragraphs, then the Book now band */
.parties .lede + .lede{ margin-top:-1rem; }
.kc-book{ background:var(--kc-yellow); text-align:center; }
.kc-book h2{ font-size:clamp(2.8rem,6vw,4.4rem); margin-bottom:.75rem; color:#111; }
.kc-book .lede{ margin:0 auto 2rem; max-width:520px; color:#111; }
.kc-book .book{ background:#111; color:#fff; font-size:1.3rem; padding:1rem 2.75rem; }

/* birthdays page: what's included as bullets right on the page (no box), two across, one logo color per bullet */
.kc-included .wrap{ text-align:center; }
.kc-included h2{ font-size:clamp(2.8rem,6vw,4.4rem); margin-bottom:1rem; }
.kc-included .lede{ text-align:left; max-width:720px; margin:0 auto 2rem; }
.kc-included .lede + .lede{ margin-top:-1rem; }
.inc-list{ list-style:none; padding:0; max-width:720px; margin:1rem auto 0; display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 2.5rem; text-align:left; }
.inc-list li{ position:relative; padding-left:1.6rem; font-weight:600; font-size:1.05rem; }
.inc-list li::before{ content:''; position:absolute; left:0; top:.45em; width:.7rem; height:.7rem; border-radius:50%; background:var(--k); }
@media (max-width:560px){ .inc-list{ grid-template-columns:1fr; } }

/* contact page: call and text buttons above the form */
.kc-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; margin:-.5rem 0 2.5rem; }
.kc-actions .book{ font-size:1.15rem; padding:.95rem 2.25rem; }
.kc-actions .book.alt{ background:var(--kc-blue); color:#fff; }
.kc-help .lede .kc-phone{ font-family:'Bungee',Impact,sans-serif; font-size:clamp(1.5rem,3vw,2rem); color:var(--kc-red-text); }
.kc-help .kc-after{ margin:2.5rem auto 0; }
.kc-page-title.slim{ padding-bottom:0; }
.kc-page-title.slim + .kc-help{ padding-top:1.5rem; }

/* phones: fit the screen. The home hero's square shape comes from home.css, so drop the fixed height that widened it;
   rates go two narrow cards across; footer columns may shrink below their link widths. */
@media (max-width:700px){ .kc .hero{ height:auto; } }
@media (max-width:560px){
  .kc .camp-rates{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; }
  .kc .rate{ padding:1.5rem .75rem; }
  .kc .rate h3{ font-size:.95rem; }
  .kc .rate .price{ font-size:2.3rem; }
  .kc .rate-note{ font-size:.8rem; }
  .kc-foot .foot-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1.25rem; }
  .kc-foot .foot-logos{ flex-wrap:wrap; }
  /* amenity, staff and party cards: a wider, shorter photo and a smaller shadow so each card fits on one screen */
  .amenity, .amenity.flip{ padding:1rem 1rem 1.5rem; gap:1rem; box-shadow:6px 6px 0 var(--k); border-radius:22px; margin-right:6px; }
  .amenity-pic{ aspect-ratio:16/10; }
  .kc .amenity-text{ padding-bottom:0; }
  .kc .amenity-text h3{ font-size:1.9rem; }
  .amenity-text p{ font-size:1rem; }
  .staff-card{ box-shadow:6px 6px 0 var(--k); }
  .staff-grid{ grid-template-columns:1fr 1fr; gap:1.1rem; }
  .staff-card{ padding:.8rem .8rem 1rem; border-radius:18px; }
  .staff-card h3{ font-size:1rem; }
  .staff-card p{ font-size:.82rem; }
  .kc-form{ padding:1.4rem 1.1rem; box-shadow:6px 6px 0 var(--kc-blue); }
}

/* register page: numbered steps stacked down the page, then one row per month (this month gets a tag and a filled row) */
.kc-steps .wrap, .kc-months .wrap{ text-align:center; }
.kc-steps .lede, .kc-months .lede{ margin:0 auto; }
.reg-steps, .month-list{ max-width:760px; margin:2.5rem auto 0; display:flex; flex-direction:column; gap:1.25rem; text-align:left; }
.month-list{ max-width:440px; gap:1.5rem; }   /* months are small blocks down the middle */
.reg-steps{ list-style:none; padding:0; }
.reg-step{ display:grid; grid-template-columns:auto 1fr; column-gap:1.25rem; align-items:center; background:var(--panel); border:2px solid #111;
  border-radius:18px; padding:1.4rem 1.5rem; box-shadow:8px 8px 0 var(--k); }
.reg-n{ grid-row:span 2; display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%; background:var(--k); color:#111;
  font-family:'Bungee',Impact,sans-serif; font-size:1.35rem; }
.k-red .reg-n, .k-blue .reg-n, .k-green .reg-n{ color:#fff; }
.reg-step h3{ font-size:1.15rem; }
.reg-step p{ color:var(--muted); font-size:.95rem; margin-top:.3rem; }
.month{ position:relative; display:flex; align-items:center; justify-content:center; gap:.75rem 1rem; padding:1.2rem 1.5rem; background:var(--panel); border:2px solid #111; border-radius:18px;
  box-shadow:8px 8px 0 var(--k); color:inherit; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
.month[hidden]{ display:none; }
.month:hover, .month:focus-visible{ transform:translate(-3px,-3px); box-shadow:11px 11px 0 var(--k); }
.month-name{ font-family:'Bungee',Impact,sans-serif; font-size:1.5rem; color:var(--kt); }
.month-year{ font-weight:600; color:var(--muted); }
.month-now{ display:none; background:#111; color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.3rem .75rem; border-radius:99px; white-space:nowrap;
  position:absolute; top:-.8rem; left:50%; transform:translateX(-50%); }
.month-go{ margin-left:.5rem; background:#111; color:#fff; font-weight:700; font-size:.95rem; padding:.6rem 1.25rem; border-radius:99px; white-space:nowrap; }
.month.now{ background:var(--k); }
.month.now .month-now{ display:inline-block; }
.month.now .month-name, .month.now .month-year{ color:#111; }
.k-red.now .month-name, .k-red.now .month-year, .k-blue.now .month-name, .k-blue.now .month-year,
.k-green.now .month-name, .k-green.now .month-year{ color:#fff; }
.month-help{ margin-top:2rem; color:var(--muted); }
@media (prefers-reduced-motion: reduce){ .month:hover, .month:focus-visible{ transform:none; } }
@media (max-width:560px){
  .reg-steps, .month-list{ gap:1rem; }
  .reg-step{ column-gap:1rem; padding:1.1rem; box-shadow:6px 6px 0 var(--k); }
  .reg-n{ width:2.6rem; height:2.6rem; font-size:1.2rem; }
  .month{ padding:1rem 1.1rem; box-shadow:6px 6px 0 var(--k); }
  .month-now{ font-size:.66rem; }
  .month-name{ font-size:1.2rem; }
  .month-go{ padding:.5rem 1rem; font-size:.88rem; }
}

/* birthdays page: party packages as outlined cards with a price, the space-only rental as one wide card, then extras and rules */
.kc-packages .wrap, .kc-extras .wrap{ text-align:center; }
.kc-packages h2{ font-size:clamp(2.8rem,6vw,4.4rem); margin-bottom:1rem; }
.kc-packages .lede{ max-width:640px; margin:0 auto; }
.pkg-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.25rem 2rem; max-width:960px; margin:2.5rem auto 0; text-align:left; align-items:stretch; }   /* two across at every desktop width; four got too skinny */
.pkg{ --py:1.6rem; --px:1.4rem; position:relative; display:flex; flex-direction:column; background:#fff; border:4px solid var(--k); border-radius:24px;
  padding:var(--py) var(--px) 1.5rem; box-shadow:10px 10px 0 var(--k); }
/* a photo of kids having fun across the top of each card */
.pkg-pic{ margin:calc(-1 * var(--py)) calc(-1 * var(--px)) 1.2rem; aspect-ratio:4/3; overflow:hidden; border-radius:20px 20px 0 0; border-bottom:4px solid var(--k); }
.pkg-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.pkg h3{ font-size:1.5rem; color:var(--kt); }
.pkg-price{ font-family:'Bungee',Impact,sans-serif; font-size:3rem; line-height:1.1; margin-top:.4rem; }
.pkg-kids{ color:var(--muted); font-size:.9rem; font-weight:600; }
.pkg ul, .rental ul{ list-style:none; padding:0; margin:1.1rem 0 1.5rem; display:grid; gap:.5rem; }
.pkg li, .rental li{ position:relative; padding-left:1.2rem; font-size:.93rem; }
.pkg li::before, .rental li::before{ content:''; position:absolute; left:0; top:.5em; width:.5rem; height:.5rem; border-radius:50%; background:var(--k); }
.pkg .book{ margin-top:auto; text-align:center; }
.pkg-top{ background:var(--k); }
.pkg-top h3, .pkg-top .pkg-kids{ color:#111; }
.pkg-top li::before{ background:#111; }
.pkg-top .book{ background:#111; color:#fff; }
.pkg-tag{ position:absolute; z-index:1; top:-.85rem; left:50%; transform:translateX(-50%); white-space:nowrap; background:#111; color:#fff; font-size:.72rem;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.3rem .8rem; border-radius:99px; }
.pkg-note{ margin-top:1.75rem; color:var(--muted); font-size:.92rem; }
.rental{ display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center; background:#fff; border:4px solid var(--k); border-radius:24px;
  padding:2rem 2.25rem; box-shadow:10px 10px 0 var(--k); }
.rental h2{ font-size:clamp(2rem,4vw,2.8rem); margin-bottom:.6rem; }
.rental ul{ margin-bottom:0; }
.rental-side{ text-align:center; }
.rental-side .book{ display:inline-block; margin-top:1rem; }
.extras-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; text-align:left; }
.extras{ background:#fff; border:4px solid var(--k); border-radius:24px; padding:1.75rem 2rem 2rem; box-shadow:10px 10px 0 var(--k); }
.extras h2{ font-size:clamp(1.8rem,3.5vw,2.4rem); margin-bottom:1rem; }
.extras ul{ list-style:none; padding:0; margin:0; }
.extras li{ display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:2px dashed #e3e4e8; }
.extras li:last-child{ border-bottom:0; }
.extras .rules li{ display:block; }
.extras .book{ display:inline-block; margin-top:1.25rem; }
@media (max-width:760px){ .rental{ grid-template-columns:1fr; } .rental-side{ text-align:left; } .extras-grid{ grid-template-columns:1fr; } }
@media (max-width:560px){
  .pkg-grid{ grid-template-columns:1fr; }
  .pkg, .rental, .extras{ box-shadow:6px 6px 0 var(--k); padding:1.4rem 1.25rem; }
  .pkg{ --py:1.4rem; --px:1.25rem; }
}