/* Generated by tools/wp/build.mjs from the Storybook mockup (mockups/src/assets/css: tokens.css + storybook/base.css + storybook/components.css + storybook/forms.css + storybook/home.css + storybook/programs.css + storybook/locations.css + storybook/about.css + storybook/parents.css + storybook/careers.css + storybook/blog.css + storybook/pages.css). Edit the mockup, then rebuild. */

/* ===== tokens.css ===== */
/* ==========================================================================
   Kangaroo Clubhouse — refresh design tokens
   Source of truth for the refreshed site. Values derive from the client brand
   kit (refresh-kit/assets/_brand/brand-kit) and the live site as of
   Sept 11, 2026 (refresh-kit/catalog). See style-guide/index.html for usage.
   ========================================================================== */

:root {
  /* ---- Brand core (sampled from the logo) ----------------------------- */
  --kc-teal: #16ADA7;            /* "Clubhouse Teal": logo house + CLUBHOUSE. Live site used #15ADA7 (identical in practice). */
  --kc-coral: #F27278;           /* "Heart Coral": logo heart + KANGAROO. */
  --kc-charcoal: #292929;        /* Logo outline/offset shadow, top bar, section titles. */

  /* ---- Brand-kit supporting palette (bkit/KC.ColorPalette2) ----------- */
  --kc-sea-glass: #6FC1BE;       /* soft teal */
  --kc-blizzard: #B7EFFF;        /* sky blue (live site: #B6EEFF) */
  --kc-ice: #EDFDFF;             /* palest aqua (live site: #EDFCFF) */
  --kc-blush: #F8A7A9;           /* soft coral/pink */

  /* ---- Live-site signature extras (keep for familiarity) -------------- */
  --kc-lime: #D8FB14;            /* hand-drawn highlight stroke on teal bands */
  --kc-coral-pop: #FF7779;       /* hero line 2 ("& Hop Into The Fun") */
  --kc-ink-teal: #324F51;        /* hard offset text-shadow color */
  --kc-mist: #E6F8F7;            /* "Teal BG" */
  --kc-petal: #FFEFF0;           /* "Orange BG" (pink tint) */
  --kc-text: #393939;            /* body copy */
  --kc-grey-100: #E6E6E6;
  --kc-white: #FFFFFF;

  /* ---- Tonal scales (OKLCH, generated from the logo hues) -------------- */
  --kc-teal-50: #DDFFFC;  --kc-teal-100: #C6F9F5;  --kc-teal-200: #ACEBE6;  --kc-teal-300: #89D8D3;  --kc-teal-400: #56C0BA;
  --kc-teal-500: #16ADA7; --kc-teal-600: #008D88;  --kc-teal-700: #01736E;  --kc-teal-800: #015956;  --kc-teal-900: #003F3C;
  --kc-coral-50: #FFF4F4; --kc-coral-100: #FEE6E6; --kc-coral-200: #FECFCE; --kc-coral-300: #FFAFAF; --kc-coral-400: #FA8488;
  --kc-coral-500: #F27278; --kc-coral-600: #C15057; --kc-coral-700: #A33B43; --kc-coral-800: #852630; --kc-coral-900: #650C1B;

  /* ---- Semantic roles --------------------------------------------------- */
  --kc-color-text: var(--kc-text);              /* 11.6:1 on white */
  --kc-color-heading: var(--kc-charcoal);       /* 14.5:1 on white */
  --kc-color-muted: #5C6266;
  --kc-color-link: var(--kc-teal-700);          /* 5.7:1 on white */
  --kc-color-link-hover: var(--kc-coral-700);
  --kc-color-surface: var(--kc-white);
  --kc-color-surface-ice: var(--kc-ice);
  --kc-color-surface-mist: var(--kc-mist);
  --kc-color-surface-petal: var(--kc-petal);
  --kc-color-band: var(--kc-teal);              /* big decorative color fields */
  --kc-color-band-text: var(--kc-teal-600);     /* teal bands that carry white text (4.1:1, large text only) */
  --kc-color-band-copy: var(--kc-teal-700);     /* teal panels with white body copy (5.7:1) */
  --kc-color-cta: var(--kc-coral-600);          /* primary button fill, white label 4.6:1 */
  --kc-color-cta-hover: var(--kc-coral-700);
  --kc-color-cta-bright: var(--kc-coral);       /* bright coral pill with charcoal label (5.2:1) */
  --kc-color-focus: var(--kc-teal-700);

  /* ---- Gradients (live-site section backgrounds) ------------------------ */
  --kc-grad-ice: radial-gradient(circle at center, #EDFDFF 50%, #D8F1F8 100%);
  --kc-grad-mist: radial-gradient(circle at center, #E6F8F7 50%, #D1F6F4 100%);
  --kc-grad-petal: radial-gradient(circle at center, #FFEFF0 50%, #F8D7D9 100%);
  --kc-grad-hero-fade: linear-gradient(100deg, rgba(230,230,230,0) 43%, rgba(230,230,230,.7) 100%);

  /* ---- Typography -------------------------------------------------------- */
  --kc-font-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;     /* brand kit: website headline font */
  --kc-font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; /* brand kit: website body font */
  --kc-font-script: "Oleo Script", "Baloo 2", cursive;                      /* testimonial/quote accent (live site) */
  --kc-font-handwritten: "Love Ya Like A Sister", "Baloo 2", cursive;      /* brand kit: logo subhead font (sparing) */
  /* Cooper Black is the logo wordmark font (commercial) — use the logo files, never live text. */

  --kc-fs-hero: clamp(2.125rem, 1.15rem + 4.1vw, 4.5rem);      /* 34 → 72px  (live: 61–78 → 28–35) */
  --kc-fs-display: clamp(1.875rem, 1.2rem + 2.8vw, 3.875rem);  /* 30 → 62px  (live "H3": 62 → 28) */
  --kc-fs-page-title: clamp(1.875rem, 1.35rem + 2.1vw, 3.25rem); /* 30 → 52px (live H1 page titles) */
  --kc-fs-hero-sub: clamp(1.125rem, 0.85rem + 1.2vw, 2.125rem); /* 18 → 34px (live hero sub) */
  --kc-fs-h2: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);       /* 22 → 28px  (live H2: 28 → 20) */
  --kc-fs-h3: clamp(1.25rem, 1.08rem + 0.6vw, 1.625rem);       /* 20 → 26px  (live H4/card titles) */
  --kc-fs-lead: clamp(1.125rem, 1.02rem + 0.4vw, 1.3125rem);   /* 18 → 21px  (live "USP Paragraph") */
  --kc-fs-body: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);       /* 16 → 18px */
  --kc-fs-small: 0.9375rem;                                     /* 15px */
  --kc-fs-xs: 0.8125rem;                                        /* 13px */

  --kc-fw-body: 500;    /* live site body weight */
  --kc-fw-strong: 700;
  --kc-fw-display: 600; /* Baloo 2 SemiBold (brand kit) */
  --kc-fw-hero: 700;

  --kc-lh-tight: 1.05;  /* hero caps */
  --kc-lh-display: 1.2;
  --kc-lh-heading: 1.35;
  --kc-lh-body: 1.6;

  --kc-tracking-hero: 0.01em;
  --kc-tracking-sub: 0.03em;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --kc-space-1: 4px;  --kc-space-2: 8px;  --kc-space-3: 12px; --kc-space-4: 16px; --kc-space-5: 24px;
  --kc-space-6: 32px; --kc-space-7: 40px; --kc-space-8: 56px; --kc-space-9: 80px; --kc-space-10: 120px;
  --kc-section-y: clamp(48px, 3rem + 3vw, 96px);
  --kc-container: 1280px;
  --kc-gutter: clamp(20px, 4vw, 40px);

  /* ---- Radii ------------------------------------------------------------ */
  --kc-radius-sm: 10px;   /* icon cards (live) */
  --kc-radius-md: 20px;   /* age-picker + location cards, columns (live) */
  --kc-radius-lg: 32px;
  --kc-radius-xl: 50px;   /* hero card (live) */
  --kc-radius-pill: 999px;
  --kc-radius-leaf: 30px 0;                /* director photos (live, Aug 2026) */
  --kc-radius-tab: 20px 20px 0 0;          /* coral card header tabs (live footer) */

  /* ---- Shadows ----------------------------------------------------------- */
  --kc-text-shadow-hard: -3px 3px 0 var(--kc-ink-teal);          /* logo-echo offset on hero caps */
  --kc-text-shadow-soft: 0 4px 18px rgba(38, 38, 38, .30);        /* hero sub line (refined from 32px 5px 18px) */
  --kc-shadow-card: 0 6px 18px rgba(41, 41, 41, .12);             /* refined from 0 0 10px rgba(0,0,0,.5) */
  --kc-shadow-lift: 0 14px 32px rgba(41, 41, 41, .18);            /* hover */
  --kc-shadow-button: 0 6px 18px rgba(41, 41, 41, .22);           /* refined from 0 0 30px rgba(0,0,0,.4) */
  --kc-shadow-inset: inset 0 0 10px rgba(0, 0, 0, .20);           /* hero card (live) */
  --kc-shadow-offset-coral: 15px 15px 0 0 var(--kc-coral);        /* director photo block shadow (live) */
  --kc-shadow-ring-glow: 0 0 50px rgba(0, 0, 0, .15);             /* ringed circle images (live) */

  /* ---- Borders ----------------------------------------------------------- */
  --kc-border-card-teal: 1px solid rgba(0, 184, 178, .27);
  --kc-border-card-coral: 1px solid rgba(255, 99, 102, .27);
  --kc-border-hero-card: 5px solid var(--kc-white);
  --kc-ring-teal: 6px solid var(--kc-teal);
  --kc-ring-coral: 5px solid var(--kc-coral);

  /* ---- Ornament ---------------------------------------------------------- */
  --kc-brush-height: clamp(20px, 1.2rem + 0.6vw, 30px);  /* live: 30px desktop/tablet, 20px mobile */
  --kc-brush-stretch: 170%;                              /* live: 170% (200% mobile) */
  --kc-marker-stroke: 9px;                               /* drawn highlight stroke (viewBox units) */

  /* ---- Motion ------------------------------------------------------------ */
  --kc-ease-out: cubic-bezier(.22, 1, .36, 1);
  --kc-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --kc-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --kc-dur-fast: 150ms;
  --kc-dur-base: 300ms;
  --kc-dur-slow: 600ms;
  --kc-dur-draw: 1400ms;   /* highlight stroke draw-on (live: 1200–2000ms) */

  /* ---- Layers ------------------------------------------------------------ */
  --kc-z-mascot: 3;
  --kc-z-brush: 2;
  --kc-z-header: 100;
  --kc-z-floating: 90;
  --kc-z-popup: 1000;
}

/* Breakpoints (reference; CSS custom properties can't be used in media queries)
   --kc-bp-sm: 640px  --kc-bp-md: 768px (live mobile)  --kc-bp-lg: 1025px (live tablet)  --kc-bp-xl: 1280px (container) */

/* ---- Added for the mockup (port to theme.json settings.custom with the rest) ---- */
:root {
  --kc-band-gap: 28px;            /* white space between two touching color bands; their white brush edges bite into it */
  --kc-row-min: 480px;            /* photo-row height on desktop (4:3 photo in a 640px column) */
  --kc-text-measure: 600px;       /* readable line length in row text halves */
  --kc-topbar-h: 48px;            /* charcoal utility bar (desktop) */
  --kc-header-h: 96px;            /* white logo + nav row (desktop); 68px below 1024px */
  --kc-color-on-band: var(--kc-white);
  --kc-color-cta-text: var(--kc-white);
}

/* ===== storybook/base.css ===== */
/* ==========================================================================
   Kangaroo Clubhouse: the Storybook direction (a second visual direction, home page first).
   Same brand (teal + coral, Baloo 2 + Montserrat + Oleo Script, the joeys), new techniques:
   a sky-and-hills scene, die-cut stickers, blob-shaped photos with washi tape, a candy bento,
   doodles, pressable "clay" buttons, scalloped and hilly edges. This file: tokens, type and the
   site furniture (announcement, header, menu, footer, badge, dialog, joey spots). Page sections
   are in home.css. Breakpoints: 600 / 768 / 900 / 1024 / 1200.
   ========================================================================== */
:root {
  --sb-ink: #0E3B39;            /* headings: deep teal ink */
  --sb-text: #2E3B3B;           /* body copy (12:1 on white) */
  --sb-sun: #FFCB47;            /* new accent: sunshine yellow (ink text only) */
  --sb-sun-50: #FFF9E6;
  --sb-sun-100: #FFF0C4;
  --sb-sun-200: #FFE08A;
  --sb-sun-700: #B57A00;        /* the pressed edge under sunshine buttons */
  --sb-sky-50: #F1FAFF;
  --sb-sky-100: #DCF3FF;
  --sb-sky-200: #B9E6FB;
  --sb-sky-300: #8FD3F2;
  --sb-mint-50: #EBFBF6;
  --sb-mint-100: #D2F5EA;
  --sb-petal: #FFF1F2;
  --sb-radius: 28px;
  --sb-radius-lg: 40px;
  --sb-shadow: 0 10px 26px rgba(14, 59, 57, .12);
  --sb-shadow-lift: 0 22px 44px rgba(14, 59, 57, .18);
  --sb-section-y: clamp(64px, 3.5rem + 3.5vw, 128px);
  /* Section edges, as masks so CSS can color them. */
  --sb-edge-scallop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cpath d='M0 24C0 10.7 10.7 0 24 0s24 10.7 24 24Z'/%3E%3C/svg%3E");
  --sb-edge-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64V34C180 4 360 4 540 26s360 40 540 18 270-38 360-24v44Z'/%3E%3C/svg%3E");
  --sb-edge-hill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90V58C220 8 470-6 720 26s520 50 720 6v58Z'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kc-header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--kc-white); overflow-x: clip; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
main:focus { outline: none; }
.kc-body { font-family: var(--kc-font-body); font-weight: 500; font-size: var(--kc-fs-body); line-height: 1.6; color: var(--sb-text); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
/* (overflow-wrap: a long word, like WatchMeGrow™ or an email address, still fits a 320px phone at large text sizes) */
/* Plain links. :where() keeps these at the weight of a bare "a", so any component class sets its own
   link color without !important. */
:where(.kc-body) a { color: var(--kc-teal-700); text-underline-offset: .18em; }
:where(.kc-body) a:where(:hover) { color: var(--kc-coral-700); }
.kc-body :focus-visible { outline: 3px solid var(--sb-ink); outline-offset: 3px; border-radius: 8px; }
.kc-body :is(.kc-topbar, .kc-footer__locations, .kc-footer__strip, .kc-footer__legal, .sb-tile--teal, .sb-ribbon--coral, .sb-ribbon--teal) :focus-visible { outline-color: var(--kc-white); }
.kc-container { width: min(100% - 2 * var(--kc-gutter), var(--kc-container)); margin-inline: auto; }
.kc-container--narrow { width: min(100% - 2 * var(--kc-gutter), 880px); }
.kc-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; flex: none; fill: currentColor; }
.kc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.kc-skip { position: absolute; left: 12px; top: -120px; z-index: 2000; padding: 12px 18px; border-radius: 12px; background: var(--sb-ink); color: var(--kc-white); font-weight: 700; }
.kc-skip:focus { top: 12px; }
.sb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sb-doodle { display: block; width: 1em; height: 1em; overflow: visible; }

/* ---------- Type ---------- */
.sb-title { color: var(--sb-ink); font: 800 clamp(2rem, 1.35rem + 2.3vw, 3.4rem)/1.08 var(--kc-font-display); letter-spacing: -.005em; text-wrap: balance; }
.sb-title--center { text-align: center; }
.sb-lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.65; }
.sb-chip { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; max-width: 100%; margin: 0 auto 18px; padding: 8px 18px; border-radius: 999px; background: var(--sb-mint-50); box-shadow: inset 0 0 0 2px var(--sb-mint-100); color: var(--kc-teal-800); font: 700 .9375rem/1.35 var(--kc-font-body); text-align: center; text-wrap: balance; }
.sb-chip .kc-icon { width: 16px; height: 16px; color: var(--kc-coral-600); }

/* Highlights: a sunny crayon squiggle under the words, drawn on when they scroll into view
   (site.js adds .is-drawn to .kc-mark--draw). It's a background repeated per line (clone), so a
   highlight that wraps gets a squiggle under each of its lines. */
.kc-mark { --sb-mark-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10c9-7 18-7 27 0s18 7 27 0 18-7 27 0 18 7 27 0 6-3 6-3' fill='none' stroke='%23FFCB47' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  background: var(--sb-mark-img) left 0 bottom .12em / 100% .32em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: var(--kc-coral-600); }
/* (Baloo 2's inline box reaches about .53em below the baseline, so .12em up from its bottom puts
   the squiggle just under the letters.) */
.kc-js .kc-mark--draw { background-size: 0% .32em; transition: background-size 1.2s var(--kc-ease-out) .15s; }
.kc-js .kc-mark--draw.is-drawn, .kc-motion-paused .kc-mark--draw { background-size: 100% .32em; }

/* ---------- Buttons: chunky, pressable "clay" pills ---------- */
.kc-btn { --btn-bg: var(--kc-coral-600); --btn-fg: var(--kc-white); --btn-edge: var(--kc-coral-800);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 28px; border: 0; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg); font: 700 1.125rem/1.2 var(--kc-font-display); letter-spacing: .01em; text-align: center; text-decoration: none;
  box-shadow: 0 6px 0 var(--btn-edge), 0 12px 22px rgba(14, 59, 57, .18); translate: 0 0; cursor: pointer;
  transition: translate .15s var(--kc-ease-out), box-shadow .15s var(--kc-ease-out), background-color .15s; }
@media (hover: hover) { .kc-btn:hover { translate: 0 -2px; box-shadow: 0 8px 0 var(--btn-edge), 0 16px 26px rgba(14, 59, 57, .2); } }
.kc-btn:active { translate: 0 4px; box-shadow: 0 2px 0 var(--btn-edge), 0 6px 12px rgba(14, 59, 57, .16); }
.kc-btn .kc-icon { width: 18px; height: 18px; }
.kc-btn--teal { --btn-bg: var(--kc-teal-700); --btn-edge: var(--kc-teal-900); }
.kc-btn--light { --btn-bg: var(--kc-white); --btn-fg: var(--sb-ink); --btn-edge: var(--kc-teal-200); }
.kc-btn--bright { --btn-bg: var(--sb-sun); --btn-fg: var(--sb-ink); --btn-edge: var(--sb-sun-700); }
/* Ghost: an outlined white pill for a secondary action (Add Another Child). Its color is --btn-fg. */
.kc-btn--ghost { --btn-bg: var(--kc-white); --btn-fg: var(--kc-teal-700); --btn-edge: var(--kc-teal-100); }
.kc-btn.kc-btn--ghost { box-shadow: inset 0 0 0 2px currentColor, 0 4px 0 var(--btn-edge); }
@media (hover: hover) { .kc-btn.kc-btn--ghost:hover { box-shadow: inset 0 0 0 2px currentColor, 0 6px 0 var(--btn-edge); } }
.kc-btn.kc-btn--ghost:active { box-shadow: inset 0 0 0 2px currentColor, 0 1px 0 var(--btn-edge); }
.kc-btn--sm { min-height: 40px; padding: 8px 18px; font-size: 1rem; box-shadow: 0 4px 0 var(--btn-edge), 0 8px 14px rgba(14, 59, 57, .16); }
.kc-btn--lg { min-height: 62px; padding: 14px 36px; font-size: 1.25rem; }
.kc-link-arrow { display: inline-flex; align-items: center; gap: 10px; font: 700 1.0625rem/1.3 var(--kc-font-body); }
.kc-link-arrow .kc-icon { width: 18px; height: 18px; transition: translate .2s var(--kc-ease-out); }
@media (hover: hover) { .kc-link-arrow:hover .kc-icon { translate: 4px 0; } }
.kc-round-btn { display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--kc-white); color: var(--sb-ink); box-shadow: 0 4px 0 var(--kc-teal-200), var(--sb-shadow); cursor: pointer; transition: translate .15s var(--kc-ease-out), box-shadow .15s; }
.kc-round-btn .kc-icon { width: 20px; height: 20px; }
.kc-round-btn:active { translate: 0 3px; box-shadow: 0 1px 0 var(--kc-teal-200), var(--sb-shadow); }
.kc-round-btn:disabled { opacity: .45; cursor: default; translate: none; }

/* ---------- Announcement: a sunshine ribbon ---------- */
.kc-announcement { position: relative; background: var(--sb-sun); color: var(--sb-ink); }
.kc-announcement[hidden] { display: none; }
.kc-announcement__inner { position: relative; display: flex; align-items: center; justify-content: center; min-height: 46px; padding-block: 8px; padding-right: 44px; }
.kc-body .kc-announcement__link { display: inline-flex; align-items: center; gap: 10px; color: var(--sb-ink); font: 700 1.0625rem/1.3 var(--kc-font-display); text-decoration: none; text-align: center; }
.kc-body .kc-announcement__link:hover { color: var(--kc-coral-700); }
.kc-announcement__link:hover span { text-decoration: underline; text-underline-offset: .2em; }
.kc-announcement__link .kc-icon { width: 18px; height: 18px; color: var(--kc-coral-700); rotate: -12deg; }
.kc-announcement__close { position: absolute; right: -6px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--sb-ink); cursor: pointer; }
.kc-announcement__close:hover { background: rgba(14, 59, 57, .1); }
.kc-announcement__close .kc-icon { width: 16px; height: 16px; }

/* ---------- Header ---------- */
.kc-header-sentinel { height: 0; }
.kc-header { position: sticky; top: calc(-1 * var(--kc-topbar-h)); z-index: var(--kc-z-header); }
.kc-topbar { position: relative; background: var(--kc-teal-700); color: var(--kc-white); }
.kc-topbar__inner { display: flex; align-items: center; justify-content: space-between; height: var(--kc-topbar-h); }
.kc-topbar__left, .kc-topbar__right { display: flex; align-items: center; gap: 12px; }
.kc-topbar__locations { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: var(--kc-white); font: 700 .9375rem/1 var(--kc-font-body); cursor: pointer; }
.kc-topbar__locations:hover { background: rgba(255, 255, 255, .24); }
.kc-topbar__locations .kc-icon { width: 15px; height: 15px; }
.kc-topbar__caret { width: 11px !important; height: 11px !important; transition: rotate var(--kc-dur-base); }
.kc-topbar__locations[aria-expanded="true"] .kc-topbar__caret { rotate: 180deg; }
.kc-motion-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 6px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; cursor: pointer; }
.kc-motion-toggle .kc-icon { width: 13px; height: 13px; }
.kc-motion-toggle__play { display: none; }
.kc-motion-paused .kc-motion-toggle__pause { display: none; }
.kc-motion-paused .kc-motion-toggle__play { display: inline-block; }
.kc-motion-toggle--topbar { color: rgba(255, 255, 255, .92); font: 600 .875rem/1 var(--kc-font-body); }
.kc-motion-toggle--topbar:hover { color: var(--sb-sun); }
.kc-motion-toggle--menu { justify-self: start; padding: 10px 0; color: var(--sb-ink); font: 700 1rem/1 var(--kc-font-body); }
.kc-motion-toggle--menu .kc-icon { width: 15px; height: 15px; }
.kc-motion-toggle--footer { padding: 2px; color: var(--kc-white); text-decoration: underline; text-underline-offset: .18em; }
.kc-motion-reduced .kc-motion-toggle, .kc-motion-reduced .kc-footer__motion { display: none; }
.kc-social { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kc-social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--kc-white); color: var(--kc-teal-700); transition: transform .2s var(--kc-ease-bounce); }
@media (hover: hover) { .kc-social a:hover { transform: scale(1.12) rotate(-6deg); } }
.kc-social .kc-icon { width: 16px; height: 16px; }

.kc-locations-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; }
.kc-locations-panel[hidden] { display: none; }
.kc-locations-panel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 10px; padding: 16px; border-radius: 28px; background: var(--kc-white); color: var(--sb-text); box-shadow: 0 24px 50px rgba(14, 59, 57, .25); }
.kc-loc { padding: 18px 20px; border-radius: 20px; background: var(--sb-sky-50); }
.kc-loc:nth-child(2) { background: var(--sb-sun-50); }
.kc-loc:nth-child(3) { background: var(--sb-petal); }
.kc-loc__name { margin: 0 0 10px; font: 800 1.375rem/1.1 var(--kc-font-display); }
.kc-body .kc-loc__name a { color: var(--sb-ink); text-decoration: none; }
.kc-loc__name a:hover { text-decoration: underline; }
.kc-loc__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font: 600 .9375rem/1.4 var(--kc-font-body); }
.kc-loc__list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.kc-loc__list .kc-icon { width: 16px; height: 16px; margin-top: .15em; color: var(--kc-coral-600); }
.kc-body .kc-loc__list a { color: var(--kc-teal-800); overflow-wrap: anywhere; }

.kc-header__main { background: var(--kc-white); transition: box-shadow var(--kc-dur-base); }
.kc-header.is-stuck .kc-header__main { box-shadow: 0 8px 22px rgba(14, 59, 57, .12); }
.kc-header__inner { display: flex; align-items: center; gap: 20px; height: var(--kc-header-h); }
.kc-logo { display: block; flex: none; line-height: 0; transform-origin: left center; transition: transform var(--kc-dur-base) var(--kc-ease-out); }
.kc-logo img { width: 232px; height: auto; }
@media (hover: hover) { .kc-logo:hover { transform: rotate(-2deg) scale(1.03); } }
.kc-header.is-stuck .kc-logo { transform: scale(.84); }
.kc-nav { margin-left: auto; }
.kc-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 6px; list-style: none; border-radius: 999px; background: var(--sb-sky-50); box-shadow: inset 0 0 0 2px var(--sb-sky-100); }
.kc-nav__item { position: relative; display: flex; align-items: center; border-radius: 999px; }
.kc-body .kc-nav__link { display: block; padding: 9px 14px; border-radius: 999px; color: var(--sb-ink); font: 700 1.0625rem/1.1 var(--kc-font-display); text-decoration: none; transition: background-color .15s, box-shadow .15s; }
.kc-body .kc-nav__link:hover, .kc-body .kc-nav__item.is-open > .kc-nav__link { background: var(--kc-white); box-shadow: 0 3px 0 var(--sb-sky-200); }
.kc-body a.kc-nav__link:hover { color: var(--kc-coral-700); }
.kc-body .kc-nav__item.is-active > .kc-nav__link, .kc-body .kc-nav__link[aria-current="page"] { background: var(--kc-white); color: var(--kc-coral-700); box-shadow: 0 3px 0 var(--sb-sun); }
.kc-nav__item.has-sub > .kc-nav__link { padding-right: 4px; }
.kc-nav__label, .kc-menu__label { cursor: default; }   /* a group whose own page isn't built yet (client builds) */
.kc-nav__toggle { display: grid; place-items: center; width: 26px; height: 34px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--sb-ink); cursor: pointer; }
.kc-nav__toggle .kc-icon { width: 11px; height: 11px; transition: rotate var(--kc-dur-base); }
.kc-nav__item.is-open .kc-nav__toggle .kc-icon { rotate: 180deg; }
.kc-nav__sub { position: absolute; left: 0; top: calc(100% + 10px); z-index: 10; min-width: 240px; margin: 0; padding: 8px; list-style: none; border-radius: 22px; background: var(--kc-white); box-shadow: 0 20px 40px rgba(14, 59, 57, .2), inset 0 0 0 2px var(--sb-sky-100);
  opacity: 0; visibility: hidden; translate: 0 8px; transition: opacity var(--kc-dur-fast), translate var(--kc-dur-base) var(--kc-ease-out), visibility 0s linear var(--kc-dur-base); }
.kc-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }   /* keeps hover across the gap */
.kc-nav__item.is-open > .kc-nav__sub { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
@media (hover: hover) { .kc-nav__item.has-sub:hover > .kc-nav__sub { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; } }
.kc-body .kc-nav__sub a { display: block; padding: 10px 16px; border-radius: 14px; color: var(--sb-ink); font: 700 1rem/1.3 var(--kc-font-body); text-decoration: none; }
.kc-body .kc-nav__sub li:nth-child(4n+1) a:hover { background: var(--sb-sky-50); }
.kc-body .kc-nav__sub li:nth-child(4n+2) a:hover { background: var(--sb-sun-50); }
.kc-body .kc-nav__sub li:nth-child(4n+3) a:hover { background: var(--sb-petal); }
.kc-body .kc-nav__sub li:nth-child(4n) a:hover { background: var(--sb-mint-50); }
.kc-body .kc-nav__sub a[aria-current="page"] { color: var(--kc-coral-700); }
.kc-header__cta { display: none; }
.kc-menu-btn { display: none; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--sb-sky-50); box-shadow: inset 0 0 0 2px var(--sb-sky-100); color: var(--sb-ink); font: 700 1rem/1 var(--kc-font-display); cursor: pointer; }
.kc-menu-btn .kc-icon { width: 22px; height: 22px; }
@media (min-width: 1200px) { .kc-header.is-stuck .kc-header__cta { display: inline-flex; } }
@media (max-width: 1199.98px) { .kc-logo img { width: 196px; } .kc-body .kc-nav__link { padding-inline: 9px; font-size: 1rem; } }
@media (max-width: 1023.98px) {
  :root { --kc-topbar-h: 0px; --kc-header-h: 70px; }
  .kc-topbar, .kc-nav { display: none; }
  .kc-logo img { width: 156px; }
  .kc-header.is-stuck .kc-logo { transform: none; }
  .kc-header__cta { display: inline-flex; margin-left: auto; }
  .kc-menu-btn { display: inline-flex; }
}
@media (max-width: 419.98px) {
  .kc-header__inner { gap: 10px; }
  .kc-logo img { width: 128px; }
  .kc-header__cta { padding: 8px 12px; font-size: .9375rem; }
  .kc-header__cta .kc-icon { display: none; }
  .kc-menu-btn { padding: 0 12px; }
  .kc-menu-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ---------- Phone menu: a sky that ends in hills ---------- */
html.kc-menu-open { overflow: hidden; }
.kc-menu { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: linear-gradient(var(--sb-sky-100), var(--sb-sky-50) 55%, var(--kc-white)); color: var(--sb-ink); overflow-y: auto; overscroll-behavior: contain; }
.kc-menu[open] { display: flex; flex-direction: column; animation: sb-menu-in var(--kc-dur-base) var(--kc-ease-out); }
.kc-menu::backdrop { background: rgba(14, 59, 57, .35); }
@keyframes sb-menu-in { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } }
.kc-menu__bar { display: flex; flex: none; align-items: center; justify-content: space-between; height: 70px; padding-inline: var(--kc-gutter); background: var(--kc-white); box-shadow: 0 4px 0 var(--sb-sun); }
.kc-menu__bar .kc-logo img { width: 156px; }
.kc-menu__close { display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--sb-sun); color: var(--sb-ink); box-shadow: 0 3px 0 var(--sb-sun-700); cursor: pointer; }
.kc-menu__close .kc-icon { width: 22px; height: 22px; }
.kc-menu__body { position: relative; display: grid; align-content: start; gap: 26px; padding: 18px var(--kc-gutter) 150px; }
.kc-menu__body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; z-index: -1; background: var(--kc-teal-300); -webkit-mask: var(--sb-edge-hill) center bottom / 100% 100% no-repeat; mask: var(--sb-edge-hill) center bottom / 100% 100% no-repeat; }
.kc-menu__list { margin: 0; padding: 0; list-style: none; }
.kc-menu__list > li { border-bottom: 2px dashed var(--sb-sky-200); }
.kc-menu__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kc-body .kc-menu__link { display: block; flex: 1; padding: 13px 0; color: var(--sb-ink); font: 800 1.625rem/1.15 var(--kc-font-display); text-decoration: none; }
.kc-body .kc-menu__link[aria-current="page"], .kc-body a.kc-menu__link:hover { color: var(--kc-coral-700); }
.kc-menu__toggle { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%; background: var(--kc-white); color: var(--sb-ink); box-shadow: 0 3px 0 var(--sb-sky-200); cursor: pointer; }
.kc-menu__toggle .kc-icon { width: 20px; height: 20px; transition: rotate var(--kc-dur-base); }
.kc-menu__toggle[aria-expanded="true"] .kc-icon { rotate: 180deg; }
.kc-menu__sub { margin: 0 0 14px; padding: 0 0 0 16px; list-style: none; border-left: 4px solid var(--sb-sun); }
.kc-menu__sub[hidden] { display: none; }
.kc-body .kc-menu__sub a { display: block; padding: 9px 0; color: var(--sb-ink); font: 700 1.125rem/1.3 var(--kc-font-body); text-decoration: none; }
.kc-menu__cta { justify-self: start; }
.kc-menu__label { margin: 0 0 6px; color: var(--kc-teal-800); font: 800 .875rem/1.2 var(--kc-font-body); letter-spacing: .08em; text-transform: uppercase; }
.kc-menu__centers ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.kc-body .kc-menu__centers a { display: inline-flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--sb-ink); font: 600 1.0625rem/1.3 var(--kc-font-body); text-decoration: none; }
.kc-menu__centers .kc-icon { width: 16px; height: 16px; color: var(--kc-coral-600); }
.kc-menu__centers b { margin-right: .3em; font-weight: 800; }
.kc-social--menu a { width: 46px; height: 46px; background: var(--kc-teal-700); color: var(--kc-white); }

/* ---------- Joey spots (filled and animated by site.js + kc-mascots.js) ---------- */
.kc-mascot { position: absolute; z-index: var(--kc-z-mascot); pointer-events: none; width: clamp(90px, 10vw, 150px); height: auto; display: block; }
.kc-mascot[data-rig="tan-joey"] { aspect-ratio: 540 / 650; }
.kc-mascot[data-rig="tan-joey-wave"] { aspect-ratio: 560 / 660; }
.kc-mascot[data-rig="brown-joey"] { aspect-ratio: 790 / 940; }
.kc-mascot > svg, .kc-mascot > noscript + svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kc-mascot noscript img { display: block; width: 100%; height: auto; }
.kc-mascot--flip { scale: -1 1; }
.kc-mascot.is-ready svg { pointer-events: visiblePainted; cursor: pointer; }
:is(a, button) .kc-mascot.is-ready svg { pointer-events: none; cursor: inherit; }
.kc-mascot.is-peeking { clip-path: inset(-160% -70% 0 -70%); }

/* ---------- Footer: rolling hills, then the three centers as signboards ---------- */
.kc-footer { position: relative; margin-top: clamp(70px, 8vw, 120px); }
.kc-footer__locations { position: relative; padding-block: clamp(36px, 4vw, 56px) clamp(56px, 6vw, 88px); background: var(--kc-teal-700); color: var(--kc-white); isolation: isolate; }
.kc-footer__locations::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: clamp(64px, 8vw, 120px); z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%2389D8D3' d='M0 120V54C170 8 360 0 560 30s420 60 620 20c110-22 200-30 260-26v96Z'/%3E%3Cpath fill='%2316ADA7' d='M0 120V82c210-46 430-50 650-18s450 42 630 4c70-15 120-20 160-18v70Z'/%3E%3Cpath fill='%2301736E' d='M0 120v-14c240-30 480-36 720-14s480 24 720 2v26Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
.kc-footer__title { margin-bottom: clamp(24px, 3vw, 40px); color: var(--kc-white); font: 800 clamp(1.875rem, 1.4rem + 1.8vw, 3rem)/1.1 var(--kc-font-display); text-align: center; text-wrap: balance; }
.kc-location-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.kc-location-card { position: relative; padding: 0 22px 24px; border-radius: 26px; background: var(--kc-white); color: var(--sb-text); box-shadow: 0 8px 0 rgba(0, 63, 60, .35); }
.kc-location-card:nth-child(1) { rotate: -1deg; }
.kc-location-card:nth-child(3) { rotate: 1deg; }
.kc-location-card__tab { display: block; width: fit-content; margin: -18px auto 16px; padding: 8px 26px 10px; border-radius: 999px; background: var(--kc-coral-600); box-shadow: 0 4px 0 var(--kc-coral-800); font: 800 1.5rem/1 var(--kc-font-display); }
.kc-body .kc-location-card__tab a { color: var(--kc-white); text-decoration: none; }
.kc-location-card__tab a:hover { text-decoration: underline; text-underline-offset: .15em; }
.kc-location-card__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font: 600 .9688rem/1.45 var(--kc-font-body); }
.kc-location-card__list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.kc-location-card__list .kc-icon { width: 17px; height: 17px; margin-top: .15em; color: var(--kc-coral-600); }
.kc-body .kc-location-card__list a { color: var(--kc-teal-800); overflow-wrap: anywhere; }
.kc-footer__strip { background: var(--kc-teal-800); color: var(--kc-white); }
.kc-footer__strip-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px; padding-block: 34px; }
.kc-footer__logo { display: block; padding: 10px 16px; border-radius: 20px; background: var(--kc-white); box-shadow: 0 5px 0 rgba(0, 0, 0, .25); line-height: 0; }
.kc-footer__logo img { width: 180px; height: auto; }
.kc-footer__follow, .kc-footer__questions { display: flex; align-items: center; gap: 14px; }
.kc-footer__label { color: var(--kc-white); font: 800 1.25rem/1.1 var(--kc-font-display); }
.kc-footer__label--lg { font-size: 1.5rem; }
.kc-social--footer a { width: 44px; height: 44px; }
.kc-footer__questions .kc-btn { --btn-bg: var(--sb-sun); --btn-fg: var(--sb-ink); --btn-edge: var(--sb-sun-700); }
.kc-footer__legal { background: var(--kc-teal-900); color: rgba(255, 255, 255, .92); font: 500 .9375rem/1.5 var(--kc-font-body); text-align: center; }
.kc-footer__legal .kc-container { padding-block: 18px; }
.kc-body .kc-footer__legal a { color: var(--kc-white); }
@media (max-width: 899.98px) {
  .kc-location-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; gap: 34px; }
  .kc-location-card:nth-child(n) { rotate: 0deg; }
  .kc-footer__strip-inner { flex-direction: column; text-align: center; }
  .kc-footer__follow, .kc-footer__questions { flex-direction: column; gap: 12px; }
}

/* ---------- Inquire Now badge: a round sunshine sticker (desktop only) ---------- */
.kc-float-cta { position: fixed; right: 18px; bottom: 18px; z-index: var(--kc-z-floating); display: none; align-items: center; min-height: 64px; padding: 10px 24px 10px 80px; border-radius: 999px; background: var(--sb-sun); box-shadow: 0 0 0 5px var(--kc-white), 0 6px 0 5px var(--sb-sun-700), 0 18px 30px rgba(14, 59, 57, .25); text-decoration: none; transition: transform .2s var(--kc-ease-bounce), opacity var(--kc-dur-base); }
@media (min-width: 1024px) { .kc-float-cta { display: inline-flex; } }
@media (hover: hover) { .kc-float-cta:hover { transform: rotate(-3deg) scale(1.04); } }
.kc-float-cta.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--kc-dur-base), visibility 0s linear var(--kc-dur-base); }
.kc-float-cta__roo { left: 10px; bottom: 8px; width: 62px; }
.kc-float-cta__text { color: var(--sb-ink); font: 800 1.25rem/1 var(--kc-font-display); }

/* ---------- "Not part of this preview" note ---------- */
.kc-dialog { width: min(92vw, 520px); padding: 0; border: 0; border-radius: 34px; background: transparent; color: var(--sb-text); overflow: visible; }
.kc-dialog::backdrop { background: rgba(14, 59, 57, .45); }
.kc-dialog[open] { animation: sb-pop .35s var(--kc-ease-bounce); }
@keyframes sb-pop { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
.kc-dialog__inner { position: relative; padding: 34px 32px 30px; border: 6px solid var(--sb-sun); border-radius: 34px; background: var(--kc-white); box-shadow: 0 30px 60px rgba(14, 59, 57, .3); }
.kc-dialog__title { margin-bottom: 10px; color: var(--sb-ink); font: 800 1.875rem/1.1 var(--kc-font-display); }
.kc-dialog__text { margin-bottom: 18px; font-size: 1.0625rem; }
.kc-dialog__ext { margin-bottom: 18px; }
.kc-dialog__ext[hidden] { display: none; }
.kc-dialog__roo { left: -62px; bottom: -8px; width: 82px; }
@media (max-width: 599.98px) { .kc-dialog__roo { display: none; } .kc-dialog__inner { padding: 28px 22px 24px; } }

/* ---------- Motion: paused or reduced ---------- */
@media (prefers-reduced-motion: reduce) {
  .kc-menu[open], .kc-dialog[open] { animation: none; }
  .kc-btn, .kc-float-cta, .kc-social a, .kc-logo, .kc-link-arrow .kc-icon, .kc-round-btn { transition: none; }
  .kc-btn:hover, .kc-btn:active, .kc-float-cta:hover, .kc-social a:hover, .kc-logo:hover, .kc-header.is-stuck .kc-logo { transform: none; translate: none; }
  .kc-js .kc-mark--draw { background-size: 100% .32em; transition: none; }
}

/* ===== storybook/components.css ===== */
/* ==========================================================================
   Storybook look: the kit, the parts every page family builds from (base.css has the tokens,
   type, buttons and site furniture). The partials that write this markup are the sb-*.mjs files
   in src/partials; /kit/ (Storybook draft only) shows every component and variant.
   Each family's own placements go in its file (home.css, programs.css, …).
   Every new looping animation joins the pause and reduced-motion lists at the end, and every
   new dark surface joins the white focus-ring list in base.css.
   ========================================================================== */

/* ---------- Shared section pieces ---------- */
.sb-section { position: relative; padding-block: var(--sb-section-y); isolation: isolate; overflow-x: clip; }
.sb-dots { background: radial-gradient(circle, var(--sb-sky-100) 2.4px, transparent 2.9px) 0 0 / 30px 30px, var(--kc-white); }

/* Colored bands with shaped edges (scallops, waves or hills) drawn by masks in the band's color. */
.sb-band, .kc-faq, .kc-reviews { --band: var(--sb-sun); --edge: var(--sb-edge-scallop); --edge-size: 48px 100%; --edge-repeat: repeat-x; --edge-h: 22px;
  position: relative; isolation: isolate; overflow-x: clip; margin-block: var(--edge-h); padding-block: var(--sb-section-y); background: var(--band); }
.sb-band::before, .sb-band::after, .kc-faq::before, .kc-reviews::before, .kc-faq::after, .kc-reviews::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--edge-h); background: var(--band); pointer-events: none;
  -webkit-mask: var(--edge) left bottom / var(--edge-size) var(--edge-repeat); mask: var(--edge) left bottom / var(--edge-size) var(--edge-repeat); }
.sb-band::before, .kc-faq::before, .kc-reviews::before { bottom: calc(100% - 1px); }
.sb-band::after, .kc-faq::after, .kc-reviews::after { top: calc(100% - 1px); rotate: 180deg; }
.sb-band--petal { --band: var(--sb-petal); --edge: var(--sb-edge-wave); --edge-size: 100% 100%; --edge-repeat: no-repeat; --edge-h: clamp(26px, 3vw, 48px); }
.sb-band--grass { --band: var(--sb-mint-100); --edge: var(--sb-edge-hill); --edge-size: 100% 100%; --edge-repeat: no-repeat; --edge-h: clamp(40px, 6vw, 90px); }
.sb-band--sky { --band: var(--sb-sky-100); --edge: var(--sb-edge-wave); --edge-size: 100% 100%; --edge-repeat: no-repeat; --edge-h: clamp(26px, 3vw, 46px); }

/* Photos: organic blobs with a thick white sticker border. Washi tape and doodles sit on top. */
.sb-blob { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border: 7px solid var(--kc-white); box-shadow: 0 0 0 2px rgba(14, 59, 57, .06), var(--sb-shadow-lift); }
.sb-blob img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sb-blob--a { border-radius: 62% 38% 46% 54% / 48% 56% 44% 52%; }
.sb-blob--b { border-radius: 40% 60% 58% 42% / 55% 40% 60% 45%; }
.sb-blob--c { border-radius: 55% 45% 40% 60% / 42% 58% 42% 58%; }
.sb-blob--d { border-radius: 46% 54% 52% 48% / 38% 42% 58% 62%; aspect-ratio: 5 / 6; }
.sb-tape { --tape: var(--kc-coral-300); position: absolute; top: -12px; left: 16%; z-index: 2; width: 120px; height: 34px; rotate: -7deg; opacity: .92;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .3) 0 6px, transparent 6px 12px), var(--tape);
  clip-path: polygon(3% 0, 97% 0, 100% 18%, 97% 36%, 100% 54%, 97% 72%, 100% 90%, 97% 100%, 3% 100%, 0 82%, 3% 64%, 0 46%, 3% 28%, 0 10%); }
.sb-tape--teal { --tape: var(--kc-teal-300); left: auto; right: 14%; rotate: 6deg; }
.sb-tape--sun { --tape: var(--sb-sun-200); }
.sb-float { position: absolute; z-index: 2; width: 46px; height: 46px; }
.sb-float--heart { right: -10px; top: 8%; color: var(--kc-coral-500); rotate: 14deg; animation: sb-bob 3.6s ease-in-out infinite; }
.sb-float--sparkle { left: -14px; bottom: 12%; color: var(--sb-sun); width: 40px; height: 40px; animation: sb-twinkle 2.8s ease-in-out infinite; }
.sb-float--star { left: -12px; top: 10%; color: var(--sb-sun); rotate: -12deg; animation: sb-bob 4.2s ease-in-out infinite; }
.sb-float--swirl { right: -20px; bottom: 6%; width: 74px; height: 46px; color: var(--kc-teal-400); }
.sb-float--cloud { right: -24px; top: 14%; width: 92px; height: 46px; color: var(--sb-sky-100); filter: drop-shadow(0 4px 0 var(--sb-sky-200)); animation: sb-bob 5s ease-in-out infinite; }

/* ---------- Hero (sb-hero): a sky, a smiling sun, clouds and hills ----------
   Variants: the home's (no modifier), sb-hero--page (the other big heroes) and sb-hero--band (a
   short title band). A scene (sb-scene--dawn …, on the hero or the body) only sets the --scene-*
   properties; without one, the sky is the home's sunny day. */
.sb-hero { position: relative; isolation: isolate; overflow: clip; padding-top: clamp(28px, 4vw, 64px); background: linear-gradient(180deg, var(--scene-sky-1, #A6E0F8) 0%, var(--scene-sky-2, var(--sb-sky-100)) 48%, var(--scene-sky-3, var(--sb-sky-50)) 100%); }
.sb-hero__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sb-sun { position: absolute; left: var(--scene-sun-left, auto); right: var(--scene-sun-right, clamp(12px, 7vw, 130px)); top: var(--scene-sun-top, clamp(16px, 3.5vw, 52px)); width: clamp(92px, 11vw, 170px); height: auto; overflow: visible; }
.sb-sun__rays path { fill: none; stroke: var(--scene-sun, var(--sb-sun)); stroke-width: 9; stroke-linecap: round; }
.sb-sun__rays { transform-origin: 80px 80px; animation: sb-spin 48s linear infinite; }
.sb-sun__disc { fill: var(--scene-sun, var(--sb-sun)); }
.sb-sun__face circle { fill: var(--sb-ink); }
.sb-sun__face path { fill: none; stroke: var(--sb-ink); stroke-width: 5; stroke-linecap: round; }
.sb-sun__cheeks circle { fill: var(--kc-coral-400); opacity: .6; }
.sb-cloud { position: absolute; left: -240px; width: 200px; height: 100px; color: var(--scene-cloud, var(--kc-white)); filter: drop-shadow(0 6px 0 var(--scene-cloud-edge, rgba(143, 211, 242, .6))); animation: sb-drift 95s linear infinite; }
.sb-cloud--1 { top: 9%; animation-delay: -18s; }
.sb-cloud--2 { top: 30%; width: 140px; height: 70px; animation-duration: 120s; animation-delay: -70s; }
.sb-cloud--3 { top: 6%; width: 110px; height: 55px; animation-duration: 140s; animation-delay: -40s; }
.sb-cloud--4 { top: 44%; width: 170px; height: 85px; animation-duration: 105s; animation-delay: -88s; }
.sb-twinkle { position: absolute; width: 22px; height: 22px; color: var(--kc-white); animation: sb-twinkle 3.2s ease-in-out infinite; }
.sb-twinkle--1 { left: 47%; top: 14%; }
.sb-twinkle--2 { left: 8%; top: 64%; width: 16px; height: 16px; animation-delay: -1.2s; }
.sb-twinkle--3 { left: 62%; top: 58%; color: var(--sb-sun); width: 26px; height: 26px; animation-delay: -2s; }
.sb-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: clamp(16px, 3vw, 48px); min-height: clamp(440px, 40vw, 580px); }
.sb-hero__copy { padding-bottom: clamp(90px, 11vw, 190px); }
.sb-hero__title { font: 800 clamp(2.4rem, 1.2rem + 4vw, 4.4rem)/1 var(--kc-font-display); letter-spacing: .005em; }
.sb-hero__line { display: block; text-wrap: balance; color: var(--kc-white); -webkit-text-stroke: .14em var(--sb-ink); paint-order: stroke fill; text-shadow: 0 .1em 0 var(--sb-ink); }
.sb-hero__line--pop { color: var(--kc-coral-500); }
.sb-hero__sub { max-width: 28ch; margin-top: clamp(18px, 2vw, 26px); padding: 10px 18px; border-radius: 18px; background: rgba(255, 255, 255, .78); color: var(--sb-ink); font: 700 clamp(1.125rem, .95rem + .75vw, 1.625rem)/1.35 var(--kc-font-body); box-shadow: 0 4px 0 rgba(143, 211, 242, .6); }
.sb-hero__stage { position: relative; z-index: 1; align-self: end; justify-self: center; width: min(100%, 440px); margin-bottom: clamp(-40px, -2vw, -16px); }
.sb-hero__halo { position: absolute; inset: 6% 0 14%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 249, 230, .95) 0 52%, rgba(255, 249, 230, 0) 70%); }
/* The cutout becomes a die-cut sticker: a white outline traced around the boy and Mama Roo. */
.sb-hero__kid { position: relative; display: block; width: 100%; height: auto;
  filter: drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff) drop-shadow(0 16px 18px rgba(14, 59, 57, .22)); }
.sb-hero__hills { position: absolute; left: 0; bottom: -1px; z-index: 0; width: 100%; height: clamp(110px, 15vw, 240px); }
.sb-hero__hills--front { z-index: 3; height: clamp(60px, 7vw, 110px); }
.sb-hill--back { fill: var(--scene-hill-back, var(--kc-teal-200)); }
.sb-hill--mid { fill: var(--scene-hill-mid, var(--kc-teal-300)); }
.sb-hill--front { fill: var(--kc-white); }
.sb-hero__trail { position: absolute; left: 33%; bottom: clamp(120px, 14vw, 220px); z-index: 1; width: clamp(110px, 12vw, 190px); height: auto; aspect-ratio: 200 / 80; color: var(--kc-white); opacity: .95; }
.sb-hero__roo { left: 44%; bottom: clamp(50px, 6.5vw, 104px); z-index: 2; width: clamp(80px, 7.5vw, 118px); }
@media (max-width: 899.98px) {
  .sb-hero__inner { grid-template-columns: minmax(0, 1fr); text-align: center; min-height: 0; gap: 8px; }
  .sb-hero__copy { padding-bottom: 0; }
  .sb-hero__sub { margin-inline: auto; }
  .sb-hero__stage { width: min(72vw, 360px); margin-bottom: -10px; }
  .sb-hero__trail { left: 6%; bottom: 150px; }
  .sb-hero__roo { left: 8%; bottom: 46px; }
  .sb-twinkle--1 { left: 80%; top: 30%; }
}
@media (max-width: 599.98px) {
  .sb-hero { padding-top: 62px; }
  .sb-sun { left: var(--scene-sun-left-sm, auto); right: var(--scene-sun-right-sm, -12px); top: -12px; width: 82px; }
  .sb-hero__title { font-size: clamp(2.2rem, 1.3rem + 4.4vw, 2.8rem); }
  .sb-hero__trail { display: none; }
}

/* The page variant: the program, location, About and Careers heroes. Their lockups are longer than
   the home's (45–64 characters), so the type is a step smaller, and the stage fits cutouts from
   tall and narrow (about 0.54 wide to tall) to wide (about 1.02). */
.sb-hero--page .sb-hero__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); min-height: clamp(400px, 36vw, 540px); }
.sb-hero--page .sb-hero__title { font-size: clamp(2.1rem, 1.2rem + 2.7vw, 3.5rem); }
.sb-hero--page .sb-hero__sub { max-width: 36ch; }
.sb-hero--page .sb-hero__stage { width: min(100%, 420px); }
/* The copy fills the left and the cutout the right, so the sun peeks in from the right edge, behind
   the cutout: low (half behind the hills) at dawn, dusk and sunrise, higher in the morning and
   afternoon, and up in the gap above at noon. */
@media (min-width: 900px) { .sb-hero--page .sb-sun { left: auto; right: var(--scene-page-sun-right, -2vw); top: var(--scene-page-sun-top, 6%); } }
.sb-hero--page .sb-hero__kid { width: auto; max-width: 100%; max-height: clamp(300px, 32vw, 470px); margin-inline: auto; }
/* Its joey stands on the hill just left of the cutout (the mascot sits in the stage), clear of the copy at every width. */
.sb-hero--page .sb-hero__roo { left: auto; right: calc(100% + 12px); bottom: clamp(56px, 7vw, 120px); width: clamp(80px, 7vw, 110px); }
/* A narrow two-column hero (a landscape phone, a small tablet) leaves the copy column no room
   beside the stage, so the joey stands at the cutout's right instead. */
@media (min-width: 900px) and (max-width: 1099.98px) { .sb-hero--page .sb-hero__roo { right: -10%; bottom: 4%; } }
@media (max-width: 899.98px) { .sb-hero--page .sb-hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; } .sb-hero--page .sb-hero__stage { width: min(72vw, 360px); } .sb-hero--page .sb-hero__kid { max-height: min(64vw, 380px); } .sb-hero--page .sb-hero__roo { right: auto; left: -12%; bottom: 10%; } }
@media (max-width: 599.98px) { .sb-hero--page .sb-hero__title { font-size: clamp(2rem, 1.2rem + 4vw, 2.5rem); } }

/* The band variant: a short sky with the page title (and an optional chip or sub), the joey on
   the hill at the left, and no cutout. */
.sb-hero--band { padding-top: clamp(20px, 3vw, 44px); }
.sb-hero--band .sb-hero__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; min-height: clamp(230px, 21vw, 320px); text-align: center; }
.sb-hero--band .sb-hero__copy { padding-bottom: clamp(70px, 8vw, 118px); }
.sb-hero--band .sb-hero__title { font-size: clamp(2.5rem, 1.5rem + 3.3vw, 4.25rem); }
.sb-hero--band .sb-hero__sub { margin-inline: auto; }
.sb-hero--band .sb-chip { margin: clamp(14px, 1.6vw, 20px) auto 0; background: rgba(255, 255, 255, .85); }
.sb-hero--band .sb-sun { width: clamp(78px, 8vw, 128px); }
@media (min-width: 600px) { .sb-hero--band .sb-sun { left: var(--scene-band-sun-left, auto); right: var(--scene-band-sun-right, clamp(12px, 7vw, 130px)); top: var(--scene-band-sun-top, clamp(12px, 2.4vw, 36px)); } }
.sb-hero--band .sb-hero__hills { height: clamp(80px, 10vw, 160px); }
.sb-hero--band .sb-hero__hills--front { height: clamp(44px, 5vw, 80px); }
.sb-hero--band .sb-hero__roo { left: var(--scene-band-roo-left, clamp(10px, 9vw, 170px)); right: var(--scene-band-roo-right, auto); bottom: clamp(20px, 3vw, 48px); width: clamp(72px, 6.4vw, 100px); }
@media (max-width: 899.98px) { .sb-hero--band .sb-hero__roo { left: 5%; right: auto; bottom: 18px; } }
@media (max-width: 599.98px) { .sb-hero--band { padding-top: 44px; } .sb-hero--band .sb-hero__copy { padding-bottom: 112px; } }
/* art="clubhouses" (the Locations overview): three little clubhouses on the hills, joined by a
   dotted road, between the back hills and the front hill. */
.sb-hero__map { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: clamp(120px, 13vw, 210px); pointer-events: none; }
.sb-hero__road { position: absolute; left: 16%; bottom: clamp(16px, 2vw, 34px); width: 68%; height: auto; aspect-ratio: 1000 / 80; color: var(--kc-white); }
.sb-hero__house { position: absolute; bottom: clamp(30px, 3.4vw, 58px); width: clamp(56px, 6.2vw, 98px); height: auto; aspect-ratio: 96 / 90; translate: -50% 0; filter: drop-shadow(0 4px 0 rgba(14, 59, 57, .16)); }
.sb-hero__house--1 { left: 16%; color: var(--kc-coral-500); }
.sb-hero__house--2 { left: 50%; bottom: clamp(44px, 5vw, 84px); color: var(--kc-teal-600); }
.sb-hero__house--3 { left: 84%; bottom: clamp(36px, 4.2vw, 70px); color: var(--sb-sun); }
.sb-hero--band:has(.sb-hero__map) .sb-hero__copy { padding-bottom: clamp(120px, 13vw, 200px); }

/* Scenes: a day at the Clubhouse, one time of day per program (Infants at dawn … Before & After
   School at sunset), and sunrise for Careers. The sun's place differs on phones only where it
   would sit behind the title. */
.sb-scene--dawn { --scene-sky-1: #F7C6BE; --scene-sky-2: #FCE3D8; --scene-sky-3: #EEF8FC; --scene-sun: #FFB65C; --scene-cloud-edge: rgba(247, 198, 190, .75);
  --scene-sun-left: clamp(16px, 8vw, 140px); --scene-sun-right: auto; --scene-sun-top: clamp(140px, 19vw, 280px); --scene-sun-left-sm: -12px; --scene-sun-right-sm: auto;
  --scene-band-sun-left: clamp(16px, 9vw, 160px); --scene-band-sun-right: auto; --scene-band-sun-top: 42%; --scene-band-roo-left: auto; --scene-band-roo-right: clamp(10px, 9vw, 170px); --scene-page-sun-top: 48%; }
.sb-scene--morning { --scene-sky-1: #B5E4F8; --scene-sky-2: #DDF3FD; --scene-sky-3: #F4FBFF;
  --scene-sun-left: clamp(16px, 15vw, 250px); --scene-sun-right: auto; --scene-sun-top: clamp(40px, 8vw, 130px); --scene-sun-left-sm: -12px; --scene-sun-right-sm: auto;
  --scene-band-sun-left: clamp(16px, 11vw, 190px); --scene-band-sun-right: auto; --scene-band-sun-top: 14%; --scene-band-roo-left: auto; --scene-band-roo-right: clamp(10px, 9vw, 170px); --scene-page-sun-top: 20%; }
.sb-scene--noon { --scene-sky-1: #7CCBF0; --scene-sky-2: #C6EBFC; --scene-sky-3: #F1FAFF; --scene-sun-right: clamp(40px, 26vw, 400px); --scene-sun-top: clamp(4px, 1vw, 14px); --scene-band-sun-right: clamp(16px, 12vw, 200px); --scene-band-sun-top: 4px; --scene-page-sun-right: 26vw; --scene-page-sun-top: 1vw; }
.sb-scene--afternoon { --scene-sky-1: #9FD6F0; --scene-sky-2: #DDF1F7; --scene-sky-3: #FFF5D6; --scene-sun: #FFC233; --scene-sun-right: clamp(12px, 6vw, 110px); --scene-sun-top: clamp(60px, 9vw, 150px); --scene-band-sun-top: 22%; --scene-page-sun-top: 14%; }
.sb-scene--dusk { --scene-sky-1: #F2A69E; --scene-sky-2: #FFCDAE; --scene-sky-3: #FFF0C4; --scene-sun: #FF9C4F; --scene-cloud: #FFF6F3; --scene-cloud-edge: rgba(242, 166, 158, .7);
  --scene-sun-right: clamp(12px, 8vw, 150px); --scene-sun-top: clamp(140px, 18vw, 270px); --scene-band-sun-right: clamp(12px, 9vw, 160px); --scene-band-sun-top: 44%; --scene-page-sun-top: 50%; }
.sb-scene--day { --scene-cloud-edge: rgba(242, 166, 158, .45); }
.sb-hero.sb-scene--day, .sb-scene--day .sb-hero { background: linear-gradient(180deg, transparent 52%, rgba(241, 250, 255, .9) 100%), linear-gradient(90deg, #F7C6BE 0%, #FCE3D8 15%, #B5E4F8 33%, #7CCBF0 50%, #9FD6F0 66%, #FFE7C5 83%, #F2A69E 100%); }
.sb-scene--sunrise { --scene-sky-1: #FFCFA4; --scene-sky-2: #FFE7C5; --scene-sky-3: #FFF9E6; --scene-sun: #FFB547; --scene-cloud-edge: rgba(255, 207, 164, .75);
  --scene-sun-left: 36%; --scene-sun-right: auto; --scene-sun-top: clamp(160px, 21vw, 310px); --scene-sun-left-sm: -12px; --scene-sun-right-sm: auto;
  --scene-band-sun-left: clamp(16px, 13vw, 220px); --scene-band-sun-right: auto; --scene-band-sun-top: 46%; --scene-band-roo-left: auto; --scene-band-roo-right: clamp(10px, 9vw, 170px); --scene-page-sun-top: 50%; }

/* ---------- Chips (sb-chips): the old H1 strip under a hero, word for word ---------- */
.sb-chip-strip { padding-block: clamp(22px, 2.6vw, 34px) 0; }
.sb-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; }
.sb-chips .sb-chip { margin: 0; }
.sb-chips .sb-chip:first-child { background: var(--age-soft, var(--sb-mint-50)); box-shadow: inset 0 0 0 2px var(--age, var(--sb-mint-100)); color: var(--sb-ink); }

/* ---------- Die-cut stickers (the home's trust summary, fact signposts, …) ---------- */
.sb-stickers { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 26px; margin: clamp(28px, 3vw, 46px) 0 0; padding: 0; list-style: none; }
.sb-stickers > li { display: flex; flex: 0 1 calc((100% - 2 * 26px) / 3); }
.sb-sticker { --st: var(--sb-sky-100); --st-ink: #1F6E92; --tilt: -1.2deg; position: relative; display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 20px; border: 5px solid var(--kc-white); border-radius: 26px;
  background: var(--st); box-shadow: 0 0 0 2px rgba(14, 59, 57, .06), 0 10px 22px rgba(14, 59, 57, .12); color: var(--sb-ink); font: 700 1.0625rem/1.4 var(--kc-font-body); text-decoration: none; rotate: var(--tilt);
  transition: rotate .3s var(--kc-ease-bounce), translate .3s var(--kc-ease-bounce), box-shadow .3s; }
.sb-stickers > li:nth-child(even) .sb-sticker { --tilt: 1.4deg; }
.sb-stickers > li:nth-child(3) .sb-sticker { --tilt: -.5deg; }
.sb-sticker--teal { --st: var(--kc-teal-50); --st-ink: var(--kc-teal-700); }
.sb-sticker--sun { --st: var(--sb-sun-100); --st-ink: #9A5B00; }
.sb-sticker--coral { --st: var(--kc-coral-100); --st-ink: var(--kc-coral-700); }
.sb-sticker--mint { --st: var(--sb-mint-100); --st-ink: var(--kc-teal-800); }
.sb-sticker__icon { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 50%; background: var(--kc-white); color: var(--st-ink); box-shadow: 0 3px 0 rgba(14, 59, 57, .12); }
.sb-sticker__icon .kc-icon { width: 26px; height: 26px; }
.sb-sticker__text { flex: 1; }
a.sb-sticker::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--kc-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%230E3B39' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: 0 2px 0 rgba(14, 59, 57, .12); }
@media (hover: hover) { a.sb-sticker:hover { rotate: 0deg; translate: 0 -5px; box-shadow: 0 0 0 2px rgba(14, 59, 57, .06), var(--sb-shadow-lift); } }
@media (max-width: 1023.98px) { .sb-stickers > li { flex-basis: calc((100% - 26px) / 2); } }
@media (max-width: 599.98px) { .sb-stickers { gap: 16px; } .sb-stickers > li { flex-basis: 100%; } .sb-sticker { padding: 12px 16px; font-size: 1rem; } }

/* ---------- Story rows (sb-row): text beside a blob photo ---------- */
.sb-story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(36px, 6vw, 100px); }
.sb-story__text { display: grid; gap: 20px; max-width: 580px; }
.sb-story--flip .sb-story__text { order: 2; }
.sb-story__media { position: relative; }
.sb-row__badge { position: absolute; top: -14px; right: 9%; z-index: 3; display: grid; place-items: center; width: 64px; height: 64px; border: 4px solid var(--kc-white); border-radius: 50%; background: var(--sb-sun); color: var(--sb-ink); box-shadow: 0 4px 0 rgba(14, 59, 57, .15); rotate: 10deg; }
.sb-row__badge .kc-icon { width: 30px; height: 30px; }
.sb-row__badge--2 { top: auto; right: auto; bottom: 6%; left: 2%; rotate: -10deg; background: var(--kc-teal-100, #CDEFEE); }
/* The badge always sits top-right; a heart or star doodle there, or a joey at the top-left, moves aside. */
.sb-story__media:has(.sb-row__badge) .sb-float--heart { top: auto; bottom: 26%; }
.sb-story__media:has(.sb-row__roo--tl) .sb-float--star { top: auto; bottom: 20%; }
.sb-story__media:has(.sb-row__badge) .sb-tape--teal { right: 32%; }
.sb-row__roo { z-index: 3; width: clamp(88px, 8vw, 128px); }
.sb-row__roo--tl { left: -2%; top: -12%; }
.sb-row__roo--tr { right: -2%; top: -12%; }
.sb-row__roo--bl { left: -3%; bottom: -8%; }
.sb-row__roo--br { right: -3%; bottom: -8%; }
/* rooAt="seam": on the row's top edge, half in the row above (both rows' padding keeps it off their content). */
.sb-row__roo--seam { top: 0; left: clamp(12px, 7vw, 120px); translate: 0 -56%; width: clamp(84px, 7.5vw, 116px); }
.sb-row__foot { font-size: .9375rem; line-height: 1.5; }
@media (max-width: 899.98px) {
  .sb-story__grid { grid-template-columns: minmax(0, 1fr); }
  .sb-story--flip .sb-story__text { order: 0; }
  .sb-story__media { width: min(100%, 560px); margin-inline: auto; }
}

/* ---------- Speech bubbles on the scalloped sunshine band (sb-bubbles) ---------- */
.sb-band--sun { padding-bottom: calc(var(--sb-section-y) + 40px); }
.sb-bubbles { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 3.5vw, 56px); }
.sb-bubble { position: relative; padding: clamp(24px, 3vw, 42px); border-radius: 36px; background: var(--kc-white); box-shadow: 0 8px 0 rgba(181, 122, 0, .35); }
.sb-bubble::after { content: ""; position: absolute; left: 54px; bottom: -26px; width: 48px; height: 30px; background: var(--kc-white); clip-path: polygon(0 0, 100% 0, 14% 100%); }
.sb-bubble--right::after { left: auto; right: 60px; clip-path: polygon(0 0, 100% 0, 86% 100%); }
.sb-bubble__title { color: var(--sb-ink); font: 800 clamp(1.375rem, 1.05rem + 1.05vw, 2rem)/1.25 var(--kc-font-display); text-wrap: pretty; }
.sb-bubble__action { margin-top: 24px; }
.sb-bubble .sb-call-strip__list { justify-content: flex-start; margin-top: 22px; }
.sb-bubble__text { margin-top: 14px; color: var(--sb-ink); font: 700 clamp(1.0625rem, 1rem + .35vw, 1.25rem)/1.5 var(--kc-font-body); }
.sb-bubbles--single { grid-template-columns: minmax(0, 1fr); max-width: 940px; margin-inline: auto; }
/* surface="plain": a callout card on white, so the bubble is pastel sky. */
.sb-bubbles-plain .sb-bubble { background: var(--sb-sky-100); box-shadow: 0 8px 0 var(--sb-sky-200); }
.sb-bubbles-plain .sb-bubble::after { background: var(--sb-sky-100); }
.sb-bubbles-plain .sb-bubbles--single { max-width: 780px; text-align: center; }
.sb-bubbles-plain .sb-bubble::after { left: 50%; translate: -50% 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.kc-body .sb-link-mark { color: var(--kc-coral-600); text-decoration: underline wavy var(--sb-sun) .1em; text-underline-offset: .22em; }
.kc-body .sb-link-mark:hover { color: var(--kc-coral-700); }
.sb-band__star { position: absolute; color: var(--kc-white); width: 34px; height: 34px; animation: sb-twinkle 3s ease-in-out infinite; }
.sb-band__star--1 { left: 4%; top: 18%; }
.sb-band__star--2 { right: 30%; bottom: 14%; width: 24px; height: 24px; animation-delay: -1.4s; }
.sb-band__roo { right: clamp(10px, 6vw, 110px); bottom: -14px; width: clamp(96px, 8.5vw, 140px); }
@media (max-width: 899.98px) { .sb-bubbles { grid-template-columns: minmax(0, 1fr); gap: 46px; } .sb-band--sun { padding-bottom: calc(var(--sb-section-y) + 110px); } }

/* ---------- Candy tiles (sb-tile) in a bento grid, and the quality tile (sb-stars) ---------- */
.sb-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); }
:where(.sb-bento) > * { grid-column: span 6; }
.sb-tile--span-4 { grid-column: span 4; }
.sb-tile--span-5 { grid-column: span 5; }
.sb-tile--span-7 { grid-column: span 7; }
.sb-tile--span-8 { grid-column: span 8; }
.sb-tile--span-12 { grid-column: 1 / -1; }
.sb-bento--cubbies > * { grid-column: span 4; }
.sb-bento--cubbies { row-gap: clamp(34px, 3.2vw, 42px); }   /* room for the name tags above each cubby */
@media (max-width: 1023.98px) { .sb-tile--span-4, .sb-tile--span-5, .sb-tile--span-7, .sb-tile--span-8, .sb-bento--cubbies > * { grid-column: span 6; } }
.sb-tile { --tile: var(--sb-sky-100); --tile-edge: var(--sb-sky-200); --pad: clamp(20px, 2.4vw, 32px); position: relative; display: flex; flex-direction: column; gap: 14px; padding: var(--pad); border-radius: 36px; background: var(--tile); box-shadow: 0 8px 0 var(--tile-edge), 0 18px 34px rgba(14, 59, 57, .1); isolation: isolate; }
.sb-tile--quality { grid-column: 1 / -1; }
.sb-tile--wide { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(22px, 3vw, 48px); }
.sb-tile--wide .sb-tile__media { aspect-ratio: 4 / 3; }
.sb-tile--wide .sb-tile__body { display: grid; gap: 14px; }
.sb-tile--wide .sb-tile__title { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.6rem); }
.sb-tile--wide p { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.65; }
.sb-tile--wide .sb-tile__badge { left: calc(var(--pad) - 14px); right: auto; rotate: -10deg; }
.sb-tile--wide.sb-tile--flip .sb-tile__media { order: 2; }
.sb-tile--wide.sb-tile--flip .sb-tile__badge { left: auto; right: calc(var(--pad) - 14px); rotate: 10deg; }
.sb-tile--petal { --tile: var(--kc-coral-100); --tile-edge: var(--kc-coral-200); }
.sb-tile--sun { --tile: var(--sb-sun-100); --tile-edge: var(--sb-sun-200); }
.sb-tile--mint { --tile: var(--sb-mint-100); --tile-edge: #A9E8D5; }
.sb-tile--teal { --tile: var(--kc-teal-700); --tile-edge: var(--kc-teal-900); color: var(--kc-white); }
.sb-tile__media { overflow: hidden; aspect-ratio: 16 / 10; border: 5px solid var(--kc-white); border-radius: 26px; background: var(--kc-white); }
.sb-tile__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sb-tile__media--contain img { object-fit: contain; }
.sb-tile__badge { position: absolute; top: calc(var(--pad) - 14px); right: calc(var(--pad) - 14px); z-index: 1; display: grid; place-items: center; width: 60px; height: 60px; border: 4px solid var(--kc-white); border-radius: 50%; background: var(--sb-sun); color: var(--sb-ink); box-shadow: 0 4px 0 rgba(14, 59, 57, .15); rotate: 10deg; }
.sb-tile__badge .kc-icon { width: 28px; height: 28px; }
.sb-tile__title { color: var(--sb-ink); font: 800 clamp(1.5rem, 1.15rem + 1vw, 2.125rem)/1.12 var(--kc-font-display); text-wrap: balance; }
.sb-tile p { font-size: 1.0625rem; line-height: 1.6; }
.sb-tile .sb-tile__fine { font-size: .9375rem; font-weight: 600; line-height: 1.5; color: var(--sb-ink); }
.sb-tile__art { align-self: center; width: clamp(150px, 15vw, 210px); margin-bottom: 4px; animation: sb-bus 2.6s ease-in-out infinite; }
.sb-tile__art img { display: block; width: 100%; height: auto; }
.sb-tile__note { margin-top: auto; padding: 10px 14px; border-radius: 16px; background: var(--kc-white); color: var(--sb-ink); font-weight: 700; font-size: .9688rem !important; }
.sb-tile--quality { flex-direction: row; align-items: center; justify-content: space-between; gap: clamp(20px, 4vw, 56px); padding: clamp(28px, 3.6vw, 52px) clamp(28px, 5vw, 72px); overflow: hidden;
  background: radial-gradient(circle at 12% 120%, rgba(255, 203, 71, .22) 0 120px, transparent 121px), radial-gradient(circle at 96% -20%, rgba(255, 255, 255, .12) 0 160px, transparent 161px), var(--kc-teal-700); }
.sb-quality { color: var(--kc-white); font: 800 clamp(1.875rem, 1.25rem + 2.3vw, 3.25rem)/1.12 var(--kc-font-display); }
/* "We Participate In" over the Idaho STARS logo (STARS no longer rates by steps, so the logo is the headline). */
.sb-quality__lead { display: block; margin-bottom: .3em; color: var(--sb-sun); font-size: .8em; }
.sb-quality__chip { display: inline-grid; place-items: center; padding: 10px 18px; border-radius: 20px; background: var(--kc-white); vertical-align: middle; box-shadow: 0 5px 0 rgba(0, 0, 0, .2); rotate: -3deg; }
.sb-quality__chip img { display: block; width: clamp(150px, 15vw, 220px); height: auto; }
.sb-tile__seal { flex: none; width: clamp(140px, 15vw, 220px); padding: 8px; border-radius: 50%; background: var(--kc-white); box-shadow: 0 0 0 7px var(--sb-sun), 0 14px 26px rgba(0, 0, 0, .25); rotate: 6deg; }
.sb-tile__seal img { display: block; width: 100%; height: auto; border-radius: 50%; }
.sb-tile__confetti { position: absolute; z-index: -1; color: var(--sb-sun); width: 30px; height: 30px; animation: sb-twinkle 3.4s ease-in-out infinite; }
.sb-tile__confetti--1 { left: 46%; top: 16%; }
.sb-tile__confetti--2 { left: 62%; bottom: 14%; width: 22px; height: 22px; color: var(--kc-white); animation-delay: -1.1s; }
.sb-tile__confetti--3 { left: 3%; top: 12%; width: 20px; height: 20px; animation-delay: -2.2s; }
@media (max-width: 767.98px) {
  .sb-tile--wide { grid-template-columns: minmax(0, 1fr); }
  .sb-tile--wide.sb-tile--flip .sb-tile__media { order: 0; }
  .sb-tile--wide.sb-tile--flip .sb-tile__badge { left: calc(var(--pad) - 14px); right: auto; rotate: -10deg; }
  .sb-bento { grid-template-columns: minmax(0, 1fr); }
  .sb-bento > * { grid-column: auto; }
  .sb-tile--quality { grid-column: auto; flex-direction: column; text-align: center; }
}
/* sb-stars as a band: the quality tile on its own between rows. */
.sb-stars { padding-block: clamp(28px, 3vw, 48px); }
/* A joey hops along the top of a grass band, so the band before it needs room under its tile. */
.sb-stars:has(+ .sb-band--grass) { padding-bottom: max(var(--sb-section-y), 100px); }

/* ---------- The paint-splat row (sb-row variant="messy"), on the petal band ---------- */
.sb-messy .sb-story__media { padding: 4%; }
.sb-splat { position: absolute; z-index: -1; width: 40%; height: auto; aspect-ratio: 1; }
.sb-splat--1 { left: -8%; top: -10%; color: var(--kc-coral-300); rotate: -18deg; }
.sb-splat--2 { right: -6%; bottom: -12%; width: 34%; color: var(--sb-sun); rotate: 40deg; }
.sb-splat--3 { right: -10%; top: 6%; width: 18%; color: var(--kc-teal-300); rotate: 120deg; }

/* ---------- Quote bubble: a speech bubble beside a ringed photo (the owner's quote) ---------- */
.sb-owner { background: radial-gradient(circle, var(--sb-sun-100) 2.4px, transparent 2.9px) 0 0 / 30px 30px, var(--kc-white); }
.sb-owner__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(30px, 5vw, 76px); max-width: 1060px; }
.sb-owner__photo { position: relative; }
.sb-owner__ring { overflow: hidden; width: clamp(200px, 22vw, 300px); aspect-ratio: 1; border: 8px solid var(--kc-white); border-radius: 50%; box-shadow: 0 0 0 8px var(--kc-coral-300), var(--sb-shadow-lift); }
.sb-owner__ring img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sb-owner__heart { position: absolute; right: -6px; bottom: 4%; width: 58px; height: 58px; color: var(--kc-coral-500); filter: drop-shadow(0 4px 0 #fff); animation: sb-beat 2.4s ease-in-out infinite; }
.sb-owner__bubble { position: relative; padding: clamp(28px, 3.4vw, 50px); border-radius: 40px; background: var(--kc-white); box-shadow: 0 0 0 3px var(--sb-sun-100), 0 10px 0 var(--sb-sun-200), var(--sb-shadow); }
.sb-owner__bubble::before { content: ""; position: absolute; left: -30px; top: 50%; translate: 0 -50%; width: 36px; height: 44px; background: var(--kc-white); clip-path: polygon(100% 0, 100% 100%, 0 60%); }
.sb-owner__quote { color: var(--kc-coral-700); font: 400 clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem)/1.3 var(--kc-font-script); }
.sb-owner__by { margin-top: 18px; color: var(--sb-ink); font: 800 1.375rem/1.2 var(--kc-font-display); }
.sb-owner__by span { display: inline-block; margin-left: 8px; padding: 2px 12px; border-radius: 999px; background: var(--sb-sun-100); font: 700 .875rem/1.6 var(--kc-font-body); vertical-align: middle; }
@media (max-width: 767.98px) {
  .sb-owner__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .sb-owner__bubble::before { left: 50%; top: -30px; translate: -50% 0; width: 44px; height: 34px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
}

/* ---------- Taped polaroids on the grass band (sb-polaroids) ---------- */
.sb-polaroids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(28px, 4.5vw, 72px); }
.sb-polaroids:has(> :only-child) { grid-template-columns: minmax(0, 620px); justify-content: center; }
.sb-polaroids:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); }
@media (max-width: 1023.98px) { .sb-polaroids:has(> :nth-child(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sb-polaroids:has(> :nth-child(3)) > :nth-child(3) { grid-column: 1 / -1; justify-self: center; width: min(100%, 560px); } }
.sb-polaroid { position: relative; display: grid; gap: 14px; padding: 16px 16px 28px; border-radius: 18px; background: var(--kc-white); box-shadow: 0 18px 34px rgba(14, 59, 57, .16); rotate: -1.6deg; }
.sb-polaroid--right { rotate: 1.6deg; margin-top: clamp(0px, 4vw, 56px); }
.sb-polaroid .sb-tape { top: -16px; left: 50%; translate: -50% 0; }
.sb-polaroid__photo { overflow: hidden; aspect-ratio: 4 / 3; border-radius: 10px; }
.sb-polaroid__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sb-polaroid__title { padding-inline: 8px; color: var(--sb-ink); font: 800 clamp(1.5rem, 1.15rem + 1vw, 2.125rem)/1.12 var(--kc-font-display); text-wrap: balance; }
.sb-polaroid p { padding-inline: 8px; font-size: 1.0625rem; }
.sb-grass__roo { right: 16%; bottom: calc(100% + var(--edge-h) - 26px); width: clamp(84px, 7.5vw, 120px); }
/* The joey stands on the hilltop, so a plain section above the hill leaves it room (a tile ends square). */
.sb-section:not(.sb-band):has(+ .sb-band--grass > .sb-grass__roo) { padding-bottom: calc(var(--sb-section-y) + 40px); }
@media (max-width: 767.98px) { .sb-polaroids, .sb-polaroids:has(> :nth-child(3)) { grid-template-columns: minmax(0, 1fr); } .sb-polaroid--right { margin-top: 0; } .sb-polaroids:has(> :nth-child(3)) > :nth-child(3) { width: auto; } }

/* ---------- Icon cards (sb-icon-cards) and the shield seal on a photo; the security row (sb-safe) ---------- */
.sb-safe__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: clamp(36px, 5vw, 84px); }
.sb-safe__text { display: grid; gap: 20px; }
.sb-icon-cards { display: grid; gap: 14px; margin: 4px 0; padding: 0; list-style: none; }
.sb-icon-cards li { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 16px; padding: 14px 18px 14px 14px; border-radius: 22px; background: var(--sb-sky-50); box-shadow: inset 0 0 0 2px var(--sb-sky-100); }
.sb-icon-cards li:nth-child(2) { background: var(--sb-petal); box-shadow: inset 0 0 0 2px var(--kc-coral-100); }
.sb-icon-cards li:nth-child(4) { background: var(--sb-sun-50); box-shadow: inset 0 0 0 2px var(--sb-sun-100); }
.sb-icon-cards li:nth-child(5) { background: var(--sb-mint-50); box-shadow: inset 0 0 0 2px var(--sb-mint-100); }
.sb-icon-cards b { color: var(--sb-ink); font-weight: 800; }
.sb-icon-cards__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--kc-white); color: var(--kc-teal-700); box-shadow: 0 3px 0 rgba(14, 59, 57, .1); rotate: -4deg; }
.sb-icon-cards__icon--coral { color: var(--kc-coral-700); rotate: 4deg; }
.sb-icon-cards__icon--sun { color: #9A5B00; }
.sb-icon-cards__icon--sky { color: #1F6E92; rotate: 3deg; }
.sb-icon-cards__icon .kc-icon { width: 26px; height: 26px; }
.sb-safe__media { position: relative; width: min(100%, 460px); justify-self: center; }
.sb-seal { position: absolute; right: -14px; bottom: 9%; z-index: 2; display: grid; place-items: center; width: 96px; height: 96px; border: 5px solid var(--kc-white); border-radius: 50%; background: var(--sb-sun); color: var(--sb-ink); box-shadow: var(--sb-shadow); rotate: 10deg; }
.sb-seal .kc-icon { width: 46px; height: 46px; }
@media (max-width: 899.98px) { .sb-safe__grid { grid-template-columns: minmax(0, 1fr); } .sb-safe__media { order: -1; width: min(100%, 380px); } }

/* ---------- Signboards (sb-signboard): a white card with a coral name tab (campuses, centers) ---------- */
.sb-signboard { position: relative; display: grid; align-content: start; gap: 10px; padding: 0 clamp(18px, 2vw, 26px) clamp(18px, 2vw, 24px); border-radius: 26px; background: var(--kc-white); box-shadow: 0 0 0 2px var(--sb-sky-100), 0 8px 0 var(--sb-sky-200), 0 16px 30px rgba(14, 59, 57, .1); color: var(--sb-text); }
.sb-signboard:nth-child(odd) { rotate: -.6deg; }
.sb-signboard:nth-child(even) { rotate: .6deg; }
.sb-signboard__name { width: fit-content; margin: 0 0 4px; padding: 8px 22px 10px; border-radius: 0 0 18px 18px; background: var(--kc-coral-600); box-shadow: 0 4px 0 var(--kc-coral-800); color: var(--kc-white); font: 800 clamp(1.25rem, 1.1rem + .5vw, 1.5rem)/1.1 var(--kc-font-display); }
.kc-body .sb-signboard__name a { color: var(--kc-white); text-decoration: none; }
.sb-signboard__name a:hover { text-decoration: underline; text-underline-offset: .15em; }
.sb-signboard p { font: 600 1.0625rem/1.55 var(--kc-font-body); }
.sb-signboard__list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sb-signboard__list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 12px; font: 600 1.0625rem/1.55 var(--kc-font-body); overflow-wrap: anywhere; }
.sb-signboard__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sb-sun); color: var(--sb-ink); }
.sb-signboard__icon .kc-icon { width: 18px; height: 18px; }
@media (max-width: 767.98px) { .sb-signboard:nth-child(n) { rotate: 0deg; } }

/* ---------- The school bus (sb-bus): the bobbing bus art ---------- */
.sb-bus { width: clamp(150px, 15vw, 220px); animation: sb-bus 2.6s ease-in-out infinite; }
.sb-bus img { display: block; width: 100%; height: auto; }

/* ---------- RISE flip stickers (sb-rise): coral-600 stickers that turn over (site.js [data-flip]) ---------- */
.sb-rise__title { margin-bottom: clamp(26px, 3.4vw, 48px); text-align: center; }
.sb-rise__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 30px); margin: 0; padding: 0; list-style: none; }
.sb-rise .kc-flip { position: relative; display: flex; flex-direction: column; min-height: 290px; rotate: -1.4deg; }
.sb-rise .kc-flip:nth-child(even) { rotate: 1.2deg; }
.sb-rise .kc-flip__inner { position: relative; flex: 1; display: flex; flex-direction: column; }
.sb-rise .kc-flip__face { display: grid; place-content: center; gap: 8px; padding: 24px 20px; border: 6px solid var(--kc-white); border-radius: 30px; text-align: center; box-shadow: 0 7px 0 rgba(133, 38, 48, .28), var(--sb-shadow-lift); }
.sb-rise .kc-flip__front { flex: 1; background: var(--kc-coral-600); color: var(--kc-white); }
.sb-rise .kc-flip__letter { display: block; font: 800 clamp(5rem, 3.6rem + 4vw, 7.5rem)/.9 var(--kc-font-display); text-shadow: 5px 5px 0 var(--kc-coral-800); }
.sb-rise .kc-flip__name { display: block; font: 800 1.375rem/1.2 var(--kc-font-display); }
.sb-rise .kc-flip__back { margin-top: 12px; background: var(--kc-white); color: var(--sb-text); font: 600 1.0625rem/1.6 var(--kc-font-body); }
.sb-rise .kc-flip__back b { display: block; margin-bottom: 6px; color: var(--kc-coral-600); font: 800 1.5rem/1.2 var(--kc-font-display); }
.sb-rise .kc-flip__btn { display: none; }
.kc-js .sb-rise .kc-flip { perspective: 1200px; }
.kc-js .sb-rise .kc-flip__inner { transform-style: preserve-3d; transition: transform var(--kc-dur-slow) var(--kc-ease-in-out); }
.kc-js .sb-rise .kc-flip__face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kc-js .sb-rise .kc-flip__back { position: absolute; inset: 0; margin: 0; transform: rotateY(180deg); }
.kc-js .sb-rise .kc-flip.is-flipped .kc-flip__inner { transform: rotateY(180deg); }
@media (hover: hover) { .kc-js .sb-rise .kc-flip:hover .kc-flip__inner { transform: rotateY(180deg); } }
.kc-js .sb-rise .kc-flip__btn { display: block; position: absolute; inset: 0; z-index: 2; width: 100%; padding: 0; border: 0; border-radius: 30px; background: none; cursor: pointer; }
.sb-rise__hint { margin-top: 24px; color: var(--sb-ink); font: 600 .9375rem/1.4 var(--kc-font-body); text-align: center; }
@media (max-width: 1023.98px) { .sb-rise__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .sb-rise__grid { grid-template-columns: minmax(0, 1fr); } .sb-rise .kc-flip { min-height: 220px; } }
@media (prefers-reduced-motion: reduce) {
  .kc-js .sb-rise .kc-flip__inner, .kc-js .sb-rise .kc-flip.is-flipped .kc-flip__inner, .kc-js .sb-rise .kc-flip:hover .kc-flip__inner { transform: none; transition: none; }
  .kc-js .sb-rise .kc-flip__back { transform: none; opacity: 0; transition: opacity .25s linear; }
  .kc-js .sb-rise .kc-flip.is-flipped .kc-flip__back { opacity: 1; }
  @media (hover: hover) { .kc-js .sb-rise .kc-flip:hover .kc-flip__back { opacity: 1; } }
}

/* ---------- The STARS medal (sb-medal): a gold medal sticker with the Idaho STARS logo ---------- */
.sb-medal { position: relative; display: inline-grid; width: clamp(112px, 10vw, 136px); aspect-ratio: 1; margin-top: 26px; rotate: -7deg; }
.sb-medal::before, .sb-medal::after { content: ""; position: absolute; bottom: -26px; z-index: -1; width: 34px; height: 56px; background: var(--kc-coral-600); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
.sb-medal::before { left: 22%; rotate: 14deg; }
.sb-medal::after { right: 22%; rotate: -14deg; background: var(--kc-teal-700); }
.sb-medal__disc { display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, var(--kc-white) 0 58%, var(--sb-sun) 59% 100%); box-shadow: inset 0 0 0 4px var(--sb-sun-700), 0 6px 0 var(--sb-sun-700), var(--sb-shadow); }
.sb-medal__disc img { display: block; width: 62%; height: auto; }

/* ---------- Ribbons (sb-ribbon): one bold line and a clay button on a colored band ----------
   coral-600 and teal-700 carry white text (and join the white focus-ring list in base.css);
   petal carries ink. */
.sb-band--coral { --band: var(--kc-coral-600); }
.sb-band--teal { --band: var(--kc-teal-700); }
.sb-ribbon { --sb-section-y: clamp(48px, 2.5rem + 3vw, 96px); z-index: 1; text-align: center; }
.sb-ribbon--coral, .sb-ribbon--teal { color: var(--kc-white); }
.sb-ribbon--coral .kc-mark, .sb-ribbon--teal .kc-mark { color: inherit; }
.sb-ribbon__inner { display: grid; justify-items: center; }
.sb-ribbon__inner--bus { grid-template-columns: auto minmax(0, auto); align-items: center; justify-content: center; gap: clamp(18px, 3vw, 44px); text-align: left; }
.sb-ribbon__body { display: grid; justify-items: center; gap: clamp(18px, 2vw, 26px); }
.sb-ribbon__inner--bus .sb-ribbon__body { justify-items: start; }
.sb-ribbon__title { max-width: 32ch; color: inherit; font: 800 clamp(1.625rem, 1.2rem + 1.5vw, 2.6rem)/1.3 var(--kc-font-display); text-wrap: balance; }
.sb-ribbon--petal .sb-ribbon__title { color: var(--sb-ink); }
.sb-ribbon__bus { width: clamp(120px, 12vw, 190px); }
.sb-ribbon__roo { left: clamp(8px, 5vw, 90px); bottom: -4px; width: clamp(84px, 8vw, 120px); }
/* A ribbon right above another band drapes its bottom edge over it. */
.sb-ribbon:has(+ :is(.sb-band, .kc-faq)) { margin-bottom: 0; }
.sb-ribbon + :is(.sb-band, .kc-faq) { margin-top: 0; }
.sb-ribbon + :is(.sb-band, .kc-faq)::before { display: none; }
@media (max-width: 767.98px) {
  .sb-ribbon__inner--bus { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .sb-ribbon__inner--bus .sb-ribbon__body { justify-items: center; }
  .sb-ribbon:has(> .sb-ribbon__roo) { padding-bottom: calc(var(--sb-section-y) + 96px); }
}

/* ---------- Call strip (sb-call-strip): three tap-to-call pills on a sunny note ---------- */
.sb-call-strip { padding-block: clamp(40px, 5vw, 80px); }
.sb-call-strip__inner { display: grid; justify-items: center; gap: 22px; padding: clamp(28px, 3.4vw, 46px) clamp(20px, 3vw, 44px); border-radius: 36px; background: var(--sb-sun-50); box-shadow: inset 0 0 0 3px var(--sb-sun-100); text-align: center; }
.sb-call-strip__title { color: var(--sb-ink); font: 800 clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem)/1.1 var(--kc-font-display); }
.sb-call-strip__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 18px; margin: 0; padding: 0; list-style: none; }
.sb-call-strip__pill b { margin-right: .3em; font-weight: 800; }

/* ---------- Paper (sb-paper): sheets for forms, letters and long text ---------- */
.sb-paper { --paper-pad: clamp(24px, 3.6vw, 52px); position: relative; padding: var(--paper-pad); border-radius: 24px; background: var(--kc-white); box-shadow: 0 0 0 2px rgba(14, 59, 57, .05), var(--sb-shadow-lift); }
.sb-paper--plain { rotate: -.4deg; }
.sb-paper__tape { top: -16px; left: 50%; translate: -50% 0; }
.sb-paper--dots { background: radial-gradient(circle, var(--sb-sky-100) 2px, transparent 2.5px) 0 0 / 26px 26px, var(--kc-white); }
.sb-paper--lined { padding-left: calc(var(--paper-pad) + clamp(28px, 4vw, 52px)); background: repeating-linear-gradient(to bottom, transparent 0 39px, #E4F5FB 39px 41px) 0 var(--paper-pad) / 100% 100% no-repeat, var(--kc-white); }
.sb-paper--lined::before { content: ""; position: absolute; left: clamp(36px, 5.4vw, 74px); top: 0; bottom: 0; width: 3px; background: var(--kc-coral-300); }
.sb-paper--lined::after { content: ""; position: absolute; left: clamp(10px, 1.6vw, 22px); top: 42px; bottom: 42px; width: 18px; background: radial-gradient(circle, var(--sb-sky-100) 8px, transparent 8.5px) center top / 18px 92px repeat-y; }
.sb-paper--clipboard { margin-top: 30px; padding-top: calc(var(--paper-pad) + 26px); border: 10px solid #E2B887; border-radius: 28px; box-shadow: 0 8px 0 #C4955F, var(--sb-shadow-lift); }
.sb-paper__clip { position: absolute; left: 50%; top: -34px; translate: -50% 0; width: 150px; height: 56px; border-radius: 16px 16px 12px 12px; background: linear-gradient(#B8C4C3, #8E9C9B); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .14), 0 4px 0 rgba(14, 59, 57, .18); }
.sb-paper__clip::before { content: ""; position: absolute; left: 50%; top: 10px; translate: -50% 0; width: 46px; height: 16px; border-radius: 999px; background: var(--kc-white); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .2); }

/* ---------- Stat stickers (sb-stat): a big number on a round, tilted sticker ---------- */
.sb-stats { display: flex; flex-wrap: wrap; gap: 18px 22px; }
.sb-stat { --st: var(--sb-sun); --st-edge: var(--sb-sun-700); display: inline-grid; justify-items: center; align-content: center; gap: 2px; min-width: 150px; padding: 18px 24px; border: 5px solid var(--kc-white); border-radius: 30px; background: var(--st); box-shadow: 0 6px 0 var(--st-edge), 0 14px 26px rgba(14, 59, 57, .14); color: var(--sb-ink); text-align: center; rotate: -3deg; }
.sb-stat:nth-child(even) { rotate: 2.5deg; }
.sb-stat__label { font: 700 1rem/1.25 var(--kc-font-body); }
.sb-stat__value { font: 800 clamp(2.4rem, 1.8rem + 2vw, 3.4rem)/1 var(--kc-font-display); }
.sb-stat--muted { --st: #EEF1F1; --st-edge: #C5CDCC; }
.sb-stat--sky { --st: var(--sb-sky-200); --st-edge: var(--sb-sky-300); }
.sb-stat--coral { --st: var(--kc-coral-100); --st-edge: var(--kc-coral-300); }
.sb-stat--mint { --st: var(--sb-mint-100); --st-edge: #A9E8D5; }

/* ---------- Resource cubbies (sb-resource): a file or a page, in a bento grid ---------- */
.sb-resource { --cubby: var(--sb-sky-100); --cubby-edge: var(--sb-sky-200); position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 30px 24px 24px; border-radius: 28px; background: var(--cubby); box-shadow: 0 8px 0 var(--cubby-edge), 0 16px 30px rgba(14, 59, 57, .1); }
.sb-resource--petal { --cubby: var(--kc-coral-100); --cubby-edge: var(--kc-coral-200); }
.sb-resource--sun { --cubby: var(--sb-sun-100); --cubby-edge: var(--sb-sun-200); }
.sb-resource--mint { --cubby: var(--sb-mint-100); --cubby-edge: #A9E8D5; }
.sb-resource__tag { display: flex; align-items: center; gap: 10px; width: fit-content; margin: -42px 0 0; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--kc-white); box-shadow: 0 3px 0 rgba(14, 59, 57, .12); color: var(--sb-ink); font: 700 .875rem/1 var(--kc-font-body); rotate: -2deg; }
.sb-resource__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sb-sun); color: var(--sb-ink); }
.sb-resource__icon .kc-icon { width: 17px; height: 17px; }
.sb-resource__title { color: var(--sb-ink); font: 800 clamp(1.3rem, 1.15rem + .5vw, 1.6rem)/1.15 var(--kc-font-display); text-wrap: balance; }
.sb-resource__action { margin-top: auto; padding-top: 4px; }

/* ---------- FAQ: a page of notebook paper (shared faq partial) ---------- */
.kc-faq + .kc-reviews { margin-top: 0; }
.kc-faq:has(+ .kc-reviews) { margin-bottom: 0; }
.kc-faq:has(+ .kc-reviews)::after { display: none; }
.kc-faq { --band: var(--sb-sky-100); --edge: var(--sb-edge-wave); --edge-size: 100% 100%; --edge-repeat: no-repeat; --edge-h: clamp(26px, 3vw, 46px); }
.kc-faq .kc-container--narrow { position: relative; padding: clamp(30px, 4vw, 56px) clamp(22px, 4vw, 56px) clamp(28px, 3.6vw, 46px) clamp(52px, 7.4vw, 104px); border-radius: 32px;
  background: repeating-linear-gradient(to bottom, transparent 0 39px, #E4F5FB 39px 41px) 0 clamp(96px, 10vw, 130px) / 100% 100% no-repeat, var(--kc-white); box-shadow: 0 10px 0 var(--sb-sky-200), var(--sb-shadow-lift); }
.kc-faq .kc-container--narrow::before { content: ""; position: absolute; left: clamp(36px, 5.4vw, 74px); top: 0; bottom: 0; width: 3px; background: var(--kc-coral-300); }
.kc-faq .kc-container--narrow::after { content: ""; position: absolute; left: clamp(10px, 1.6vw, 22px); top: 42px; bottom: 42px; width: 18px; background: radial-gradient(circle, var(--sb-sky-100) 8px, transparent 8.5px) center top / 18px 92px repeat-y; }
.kc-faq__head { position: relative; display: flex; padding-right: clamp(90px, 9vw, 124px); align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.kc-faq__title { color: var(--sb-ink); font: 800 clamp(2.6rem, 1.8rem + 2.8vw, 4.25rem)/1 var(--kc-font-display); }
.kc-faq__roo { right: 0; bottom: -6px; width: clamp(84px, 8vw, 116px); }
/* Phones: the joey stands on the notebook's top edge, so the title has the whole row. */
@media (max-width: 599.98px) { .kc-faq__head { padding-right: 0; } .kc-faq__roo { right: 4px; bottom: auto; top: -124px; } }
.kc-faq__item { border-bottom: 2px dashed var(--sb-sky-200); }
.kc-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; color: var(--sb-ink); font: 700 clamp(1.125rem, 1.05rem + .3vw, 1.3125rem)/1.35 var(--kc-font-display); cursor: pointer; list-style: none; }
.kc-faq__item summary::-webkit-details-marker { display: none; }
.kc-faq__item summary::after { content: "+"; display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--sb-sun); color: var(--sb-ink); font: 800 1.625rem/1 var(--kc-font-display); box-shadow: 0 3px 0 var(--sb-sun-700); transition: rotate .3s var(--kc-ease-bounce); }
.kc-faq__item[open] summary::after { content: "–"; rotate: 180deg; background: var(--kc-coral-300); box-shadow: 0 3px 0 var(--kc-coral-600); }
.kc-faq__answer { padding: 0 0 20px; font-size: 1.0625rem; }
.kc-faq__answer p { margin: 0; }
.kc-faq__answer p + p { margin-top: .8em; }
.kc-faq__more { margin-top: 24px; }
/* sb-notebook: the same notebook for a page's own items; a summary may hold an H3 and a coin sticker. */
.sb-notebook { padding-top: calc(var(--sb-section-y) + 70px); }
.sb-notebook__q { flex: 1; color: inherit; font: inherit; }
.sb-notebook__roo { right: 7%; bottom: calc(100% - 14px); width: clamp(84px, 8vw, 116px); }
.sb-coin { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 3px solid var(--kc-white); border-radius: 50%; background: var(--sb-sun); color: var(--sb-ink); box-shadow: 0 3px 0 var(--sb-sun-700); rotate: -10deg; }
.sb-coin .kc-icon { width: 15px; height: 15px; }

/* ---------- Reviews: sticky notes (shared reviews partial) ---------- */
.kc-reviews { --band: var(--sb-sun-50); --edge: var(--sb-edge-scallop); --edge-size: 48px 100%; --edge-repeat: repeat-x; --edge-h: 22px; }
.kc-reviews__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.kc-reviews__title { color: var(--sb-ink); font: 800 clamp(2rem, 1.35rem + 2.3vw, 3.4rem)/1.08 var(--kc-font-display); }
.kc-reviews__nav { display: flex; flex: none; gap: 12px; }
.kc-reviews__track { margin-inline: -8px; padding: 26px 8px 44px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.kc-reviews__track::-webkit-scrollbar { display: none; }
.kc-reviews__track:focus-visible { outline-offset: -3px; }
.kc-reviews__list { display: grid; grid-auto-columns: minmax(270px, 340px); grid-auto-flow: column; gap: 28px; margin: 0; padding: 0; list-style: none; }
.kc-review { scroll-snap-align: start; }
.kc-review figure { --note: #FFF1AE; --tilt: -1.6deg; position: relative; display: flex; flex-direction: column; height: 100%; padding: 30px 26px 24px; border-radius: 4px 4px 26px 4px; background: var(--note); box-shadow: 0 16px 24px rgba(14, 59, 57, .14); rotate: var(--tilt); }
.kc-review:nth-child(4n+2) figure { --note: #DDF3FF; --tilt: 1.2deg; }
.kc-review:nth-child(4n+3) figure { --note: #FFE0E0; --tilt: -.8deg; }
.kc-review:nth-child(4n) figure { --note: #D9F7EC; --tilt: 1.6deg; }
.kc-review figure::before { content: ""; position: absolute; top: -13px; left: 50%; width: 96px; height: 26px; translate: -50% 0; rotate: -3deg; background: rgba(255, 255, 255, .72); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.kc-review blockquote p { color: var(--sb-text); font: 600 1.03rem/1.6 var(--kc-font-body); }
.kc-review blockquote p::before { content: "“"; display: block; height: .55em; color: var(--kc-coral-500); font: 800 3.2rem/1 var(--kc-font-display); }
.kc-review figcaption { margin-top: auto; padding-top: 16px; color: var(--sb-ink); font: 800 1.1875rem/1.2 var(--kc-font-display); }
/* A long review shows its first lines, fading out, until "Read more" (site.js) opens it. */
.kc-js .kc-review--long:not(.is-open) blockquote p { max-height: calc(1.76rem + 13lh); overflow: hidden;
  -webkit-mask: linear-gradient(#000 calc(100% - 3lh), transparent); mask: linear-gradient(#000 calc(100% - 3lh), transparent); }
.kc-review__more { align-self: flex-start; margin-top: 6px; padding: 6px 0; border: 0; background: none; color: var(--sb-ink); font: 700 1rem/1.3 var(--kc-font-body); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.kc-review__more:hover { text-decoration-thickness: 2px; }
@media (max-width: 599.98px) { .kc-reviews__head { flex-direction: column; align-items: flex-start; } }

/* Live Google reviews (sb-google-reviews, the location pages): the same band and sticky notes,
   filled by site.js; until then (or without it), the summary line and the link to Google. */
.sb-greviews__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: -4px 0 0; color: var(--sb-text); font: 600 1.0625rem/1.5 var(--kc-font-body); }
.sb-greviews__score { color: var(--sb-ink); font: 800 clamp(1.875rem, 1.6rem + .9vw, 2.5rem)/1 var(--kc-font-display); }
.sb-greviews__stars, .kc-review__stars { display: inline-flex; gap: 3px; color: var(--kc-coral-600); }
.sb-greviews__stars { font-size: 1.375rem; }
.sb-greviews__stars .is-off, .kc-review__stars .is-off { opacity: .28; }
.kc-review__stars { margin-bottom: 8px; font-size: 1.125rem; }
.kc-review--google blockquote p::before { display: none; }
.kc-review__translated { margin-top: 8px; color: var(--sb-text); font: italic 600 .875rem/1.4 var(--kc-font-body); }
.kc-review--google figcaption { display: flex; align-items: center; gap: 12px; }
.kc-review__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .75); object-fit: cover; }
.kc-review__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kc-review__who a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.kc-review__who a:hover { text-decoration: underline; }
.kc-review__who .kc-review__when { color: var(--sb-text); font: 600 .875rem/1.3 var(--kc-font-body); text-decoration: underline; text-underline-offset: .2em; }
.sb-greviews [data-greviews-show][hidden] { display: none; }
.sb-greviews__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; }
.kc-reviews__track:not([hidden]) + .sb-greviews__actions { margin-top: 0; }
.sb-greviews__fine { color: var(--sb-text); font: 600 .875rem/1.4 var(--kc-font-body); }
/* Google's attribution logo (the gray one, unmodified; its rules: 16–19px tall, 10px clear on the
   left, right and top, 5px below, and the label "Google Maps"). */
.kc-icon.sb-greviews__logo { width: 98px; height: 18px; margin: 10px 10px 5px; vertical-align: middle; }

/* ---------- Age picker: round photo stickers in a wavy row (shared partial) ---------- */
.kc-age-picker { padding-block: var(--sb-section-y); text-align: center; }
.kc-age-picker__title { margin-bottom: clamp(26px, 3vw, 44px); color: var(--sb-ink); font: 800 clamp(2rem, 1.35rem + 2.3vw, 3.4rem)/1.08 var(--kc-font-display); }
.kc-age-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.kc-age-grid > li { display: flex; }
.kc-age-grid > li:nth-child(even) { margin-top: 34px; }
.kc-age-card { --ring: var(--kc-teal-300); --chip: var(--sb-mint-100); display: grid; flex: 1; min-width: 0; justify-items: center; align-content: start; gap: 8px; padding: 16px 12px 20px; border-radius: 30px; background: var(--kc-white); box-shadow: 0 0 0 3px var(--chip), 0 12px 24px rgba(14, 59, 57, .1); color: var(--sb-ink); text-decoration: none; transition: translate .3s var(--kc-ease-bounce), rotate .3s var(--kc-ease-bounce); }
.kc-age-grid > li:nth-child(5n+2) .kc-age-card { --ring: var(--kc-coral-300); --chip: var(--kc-coral-100); }
.kc-age-grid > li:nth-child(5n+3) .kc-age-card { --ring: var(--sb-sun); --chip: var(--sb-sun-100); }
.kc-age-grid > li:nth-child(5n+4) .kc-age-card { --ring: var(--sb-sky-300); --chip: var(--sb-sky-100); }
.kc-age-grid > li:nth-child(5n) .kc-age-card { --ring: var(--kc-teal-400); --chip: var(--kc-teal-50); }
.kc-age-card img { display: block; width: 100%; max-width: 170px; height: auto; aspect-ratio: 1; border: 7px solid var(--ring); border-radius: 50%; object-fit: cover; }
.kc-age-card b { overflow-wrap: anywhere; margin-top: 6px; font: 800 1.375rem/1.15 var(--kc-font-display); }
.kc-age-card span { padding: 3px 12px; border-radius: 999px; background: var(--chip); font: 700 .9375rem/1.5 var(--kc-font-body); }
@media (hover: hover) { .kc-age-card:hover { translate: 0 -6px; rotate: -2deg; } }
@media (max-width: 899.98px) {
  .kc-age-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kc-age-grid > li:nth-child(even) { margin-top: 0; }
  .kc-age-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); }
}

/* ---------- Tour invitation: a sunburst ticket (shared tour-cta partial) ---------- */
.kc-tour-cta { padding-block: clamp(30px, 4vw, 64px) 0; }
/* The ticket: a sunburst with notched sides and a perforation line. .sb-ticket is the same look for
   the thank-you states. */
.kc-tour-cta__inner, .sb-ticket { position: relative; isolation: isolate; display: grid; justify-items: center; gap: 30px; padding: clamp(48px, 5.5vw, 80px) clamp(30px, 6vw, 96px); text-align: center; }
.kc-tour-cta__inner::before, .sb-ticket::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 40px;
  background: repeating-conic-gradient(from -4deg at 50% 125%, var(--sb-sun) 0 8deg, #FFD566 8deg 16deg);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 28px, #000 29px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 28px, #000 29px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 28px, #000 29px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 28px, #000 29px) right / 51% 100% no-repeat;
  filter: drop-shadow(0 10px 0 var(--sb-sun-700)); }
.kc-tour-cta__inner::after, .sb-ticket::after { content: ""; position: absolute; left: 50px; right: 50px; top: 50%; z-index: -1; border-top: 3px dashed rgba(14, 59, 57, .14); }
.kc-tour-cta__title { color: var(--sb-ink); font: 800 clamp(2.25rem, 1.35rem + 3.3vw, 4.4rem)/1.04 var(--kc-font-display); text-wrap: balance; }
.kc-tour-cta__title .kc-mark { --sb-mark-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10c9-7 18-7 27 0s18 7 27 0 18-7 27 0 18 7 27 0 6-3 6-3' fill='none' stroke='%23FFFFFF' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.kc-tour-cta__end { position: relative; display: inline-block; }
.kc-tour-cta__roo { left: 100%; bottom: -4px; margin-left: 10px; width: clamp(70px, 6.5vw, 106px); }
/* The About wording is longer, so its joey stands on the ticket's top edge, clear of the lines (as on phones). */
.kc-tour-cta--about .kc-tour-cta__end { position: static; }
.kc-tour-cta--about .kc-tour-cta__roo { left: auto; right: clamp(26px, 6vw, 90px); bottom: calc(100% - 10px); margin: 0; }
@media (max-width: 599.98px) { .kc-tour-cta__end { position: static; } .kc-tour-cta__roo { left: auto; right: 26px; bottom: calc(100% - 10px); margin: 0; } .kc-tour-cta__inner::after, .sb-ticket::after { display: none; } }

/* ---------- Motion ---------- */
@keyframes sb-spin { to { rotate: 360deg; } }
@keyframes sb-drift { to { translate: calc(100vw + 480px) 0; } }
@keyframes sb-twinkle { 0%, 100% { scale: .7; opacity: .5; } 50% { scale: 1.1; opacity: 1; } }
@keyframes sb-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes sb-beat { 0%, 100% { scale: 1; } 12% { scale: 1.16; } 24% { scale: 1; } 36% { scale: 1.1; } 48% { scale: 1; } }
@keyframes sb-bus { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -4px; rotate: -1.2deg; } }
.kc-motion-paused :is(.sb-sun__rays, .sb-cloud, .sb-twinkle, .sb-float, .sb-band__star, .sb-tile__art, .sb-tile__confetti, .sb-owner__heart, .sb-bus, .sb-letter__heart, .sb-mission__spark) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  :is(.sb-sun__rays, .sb-cloud, .sb-twinkle, .sb-float, .sb-band__star, .sb-tile__art, .sb-tile__confetti, .sb-owner__heart, .sb-bus, .sb-letter__heart, .sb-mission__spark) { animation: none; }
  .sb-cloud--1 { translate: 30vw 0; } .sb-cloud--2 { translate: 62vw 0; } .sb-cloud--3 { translate: 12vw 0; } .sb-cloud--4 { translate: 84vw 0; }
  .sb-sticker, .kc-age-card { transition: none; }
  a.sb-sticker:hover, .kc-age-card:hover { translate: none; rotate: var(--tilt, 0deg); }
}

/* ===== storybook/forms.css ===== */
/* ==========================================================================
   Storybook look: forms ("notes home"): the booking layout, fields, choices, time slots, the error
   summary, the center signboards and the thank-you states (Schedule a Tour, Contact Us; later
   Feedback, Careers and the Current Families gate). Field borders are 3:1 or more on white
   (WCAG 1.4.11); text is 16px or larger so iPhones don't zoom in.
   ========================================================================== */
:root { --sb-field-edge: #6E8584; }

/* ---------- The booking layout: the form on a clipboard, the intro and center cards beside it ---------- */
.sb-booking { padding-block: clamp(36px, 4vw, 72px) var(--sb-section-y); }
.sb-booking[hidden] { display: none; }
.sb-booking__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "form intro" "form cards"; align-items: start; gap: clamp(28px, 3vw, 40px) clamp(28px, 4vw, 60px); }
.sb-booking--contact .sb-booking__grid { grid-template-rows: auto; grid-template-areas: "form cards"; }
.sb-booking__intro { position: relative; grid-area: intro; display: grid; gap: 20px; }
.sb-booking__form { grid-area: form; min-width: 0; }
.sb-booking__cards { grid-area: cards; min-width: 0; }
.sb-booking__title { color: var(--sb-ink); font: 800 clamp(1.625rem, 1.25rem + 1.3vw, 2.25rem)/1.15 var(--kc-font-display); }
@media (max-width: 1023.98px) {
  .sb-booking__grid, .sb-booking--contact .sb-booking__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "intro" "form" "cards"; }
  .sb-booking--contact .sb-booking__grid { grid-template-areas: "form" "cards"; }
}

/* Numbered stickers: "What To Expect" (Schedule a Tour), the Cameras access steps. A step can hold a
   plain list of its own (only the top level is numbered). */
.sb-steps { counter-reset: sb-step; display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.sb-steps > li { position: relative; padding: 16px 18px 16px 70px; border: 4px solid var(--kc-white); border-radius: 22px; background: var(--sb-sky-100); box-shadow: 0 0 0 2px rgba(14, 59, 57, .06), 0 8px 18px rgba(14, 59, 57, .1); rotate: -.8deg; }
.sb-steps > li:nth-child(2) { background: var(--sb-sun-100); rotate: .9deg; }
.sb-steps > li:nth-child(3) { background: var(--kc-coral-100); rotate: -.4deg; }
.sb-steps > li::before { counter-increment: sb-step; content: counter(sb-step); position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 42px; height: 42px; border: 3px solid var(--kc-white); border-radius: 50%; background: var(--kc-teal-700); color: var(--kc-white); font: 800 1.25rem/1 var(--kc-font-display); box-shadow: 0 3px 0 rgba(14, 59, 57, .15); }
.sb-steps b { display: block; margin-bottom: 2px; color: var(--sb-ink); font: 800 1.1875rem/1.25 var(--kc-font-display); }
.sb-steps > li { color: var(--sb-text); font: 500 1rem/1.5 var(--kc-font-body); }

/* A file to download, as a sticker. */
.kc-body .sb-doc { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border: 4px solid var(--kc-white); border-radius: 999px; background: var(--sb-mint-100); box-shadow: 0 0 0 2px rgba(14, 59, 57, .06), 0 8px 18px rgba(14, 59, 57, .12); color: var(--sb-ink); font: 700 1rem/1.3 var(--kc-font-body); text-decoration: none; rotate: -1deg; transition: rotate .3s var(--kc-ease-bounce), translate .3s var(--kc-ease-bounce); }
.sb-doc__icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--kc-white); color: var(--kc-coral-700); }
.sb-doc__icon .kc-icon { width: 20px; height: 20px; }
.sb-doc__meta { font-weight: 500; white-space: nowrap; }
@media (hover: hover) { .kc-body .sb-doc:hover { rotate: 0deg; translate: 0 -3px; color: var(--sb-ink); } }

/* ---------- The center signboards ("Have Questions?", shared center-cards partial) ---------- */
.kc-center-cards__head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.kc-center-cards__title { margin-bottom: 18px; color: var(--sb-ink); font: 800 clamp(1.625rem, 1.25rem + 1.3vw, 2.25rem)/1.15 var(--kc-font-display); }
.kc-center-cards__head .kc-center-cards__title { padding-right: 96px; }
.kc-center-cards__roo { right: 0; bottom: 4px; width: 88px; }
/* The smallest phones (and large text) need the whole row for the heading. */
@media (max-width: 399.98px) { .kc-center-cards__roo { display: none; } .kc-center-cards__head .kc-center-cards__title { padding-right: 0; } }
.kc-center-cards__list { display: grid; gap: 30px; }
.kc-center-card { position: relative; padding: 0 20px 20px; border-radius: 26px; background: var(--kc-white); box-shadow: 0 0 0 2px var(--sb-sky-100), 0 8px 0 var(--sb-sky-200), 0 16px 30px rgba(14, 59, 57, .1); }
.kc-center-card:nth-child(2) { rotate: .6deg; }
.kc-center-card__name { width: fit-content; margin: 0 0 14px; padding: 7px 24px 9px; border-radius: 0 0 18px 18px; background: var(--kc-coral-600); box-shadow: 0 4px 0 var(--kc-coral-800); font: 800 1.375rem/1 var(--kc-font-display); }
.kc-body .kc-center-card__name a { color: var(--kc-white); text-decoration: none; }
.kc-center-card__name a:hover { text-decoration: underline; text-underline-offset: .15em; }
.kc-center-card__call { margin: 0 0 12px; }
.kc-center-card__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font: 600 .9688rem/1.45 var(--kc-font-body); }
.kc-center-card__list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.kc-center-card__list .kc-icon { width: 16px; height: 16px; margin-top: .2em; color: var(--kc-coral-600); }
.kc-body .kc-center-card__list a { color: var(--kc-teal-800); overflow-wrap: anywhere; }
@media (min-width: 600px) and (max-width: 1023.98px) {
  .kc-center-cards__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .kc-center-card:nth-child(n) { rotate: 0deg; }
}

/* ---------- Fields ---------- */
.kc-form > * + * { margin-top: clamp(26px, 3vw, 34px); }
.kc-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.kc-fieldset + .kc-fieldset, [data-children] > .kc-fieldset, [data-children] + .kc-form__add + .kc-fieldset { padding-top: clamp(24px, 3vw, 32px); border-top: 3px dashed var(--sb-sky-200); }
[data-children] > .kc-fieldset { margin-top: clamp(26px, 3vw, 34px); }
[data-children]:empty { display: none; }
/* Floated, so the legend sits under the dashed rule instead of on it. */
.kc-legend { float: left; display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 16px; padding: 0; color: var(--sb-ink); font: 800 clamp(1.375rem, 1.2rem + .6vw, 1.625rem)/1.2 var(--kc-font-display); }
.kc-legend::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--sb-sun); box-shadow: 0 0 0 4px var(--sb-sun-100); }
.kc-legend + * { clear: both; }
.kc-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.kc-field { min-width: 0; }
.kc-field--full { grid-column: 1 / -1; }
.kc-group { margin: 0; padding: 0; border: 0; }
.kc-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 7px; padding: 0; color: var(--sb-ink); font: 700 1rem/1.3 var(--kc-font-body); overflow-wrap: anywhere; }
.kc-req { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--kc-coral-100); color: var(--kc-coral-700); font: 700 .6875rem/1 var(--kc-font-body); letter-spacing: .06em; text-transform: uppercase; }
.kc-form .kc-input { display: block; width: 100%; min-height: 52px; padding: 12px 16px; border: 2px solid var(--sb-field-edge); border-radius: 16px; background: var(--kc-white); color: var(--sb-text); font: 500 1rem/1.4 var(--kc-font-body); }
.kc-form .kc-input:hover { border-color: var(--kc-teal-700); }
.kc-form .kc-input:focus-visible { border-color: var(--kc-teal-700); outline: 3px solid var(--sb-ink); outline-offset: 2px; border-radius: 16px; }
/* A date field's focus sits in its day, month and year parts, so the field itself matches only
   :focus-within (not :focus or :focus-visible); it gets the ring whenever it has focus. */
.kc-form .kc-input[type="date"]:focus-within { border-color: var(--kc-teal-700); outline: 3px solid var(--sb-ink); outline-offset: 2px; border-radius: 16px; }
.kc-form .kc-select { appearance: none; padding-right: 46px; background: var(--kc-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%2301736E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 18px no-repeat; cursor: pointer; }
.kc-form .kc-textarea { min-height: 128px; resize: vertical; }
.kc-form .kc-input[aria-invalid="true"] { border-color: var(--kc-coral-700); background-color: #FFFBFB; }
.kc-field__error { display: flex; align-items: flex-start; gap: 7px; margin: 8px 0 0; color: var(--kc-coral-700); font: 700 .9375rem/1.4 var(--kc-font-body); }
.kc-field__error .kc-icon { width: 16px; height: 16px; margin-top: .15em; }
.kc-field__error[hidden] { display: none; }
.kc-field__hint { margin: 7px 0 0; color: var(--sb-text); font: 600 .875rem/1.4 var(--kc-font-body); }
/* A file field (the Careers resume): the whole dashed box opens the picker; it shows the chosen
   file's name (site.js [data-upload]). The input sits on top, invisible, so it gets every tap. */
.kc-upload { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-height: 56px; padding: 9px 12px; border: 2px dashed var(--sb-field-edge); border-radius: 16px; background: var(--kc-white); }
.kc-upload__input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kc-upload__btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; background: var(--kc-coral-600); box-shadow: 0 4px 0 var(--kc-coral-800); color: var(--kc-white); font: 700 1rem/1.2 var(--kc-font-display); }
.kc-upload__btn .kc-icon { width: 16px; height: 16px; }
.kc-upload__name { min-width: 0; color: var(--sb-text); font: 600 .9375rem/1.35 var(--kc-font-body); overflow-wrap: anywhere; }
.kc-upload__name.is-chosen { color: var(--sb-ink); font-weight: 700; }
.kc-upload:hover { border-color: var(--kc-teal-700); }
.kc-upload:has(.kc-upload__input:focus-visible) { outline: 3px solid var(--sb-ink); outline-offset: 2px; }
.kc-upload:has(.kc-upload__input[aria-invalid="true"]) { border-style: solid; border-color: var(--kc-coral-700); background: #FFFBFB; }
@media (max-width: 599.98px) { .kc-form__grid { grid-template-columns: minmax(0, 1fr); } }

/* Choices: radio buttons and checkboxes as pastel chips. */
.kc-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.kc-choice { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 9px 16px 9px 13px; border: 2px solid var(--sb-sky-200); border-radius: 999px; background: var(--kc-white); color: var(--sb-text); font: 700 .9375rem/1.25 var(--kc-font-body); cursor: pointer; transition: border-color var(--kc-dur-fast), background-color var(--kc-dur-fast); }
.kc-choice:hover { border-color: var(--kc-teal-400); }
.kc-choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--kc-teal-700); cursor: pointer; }
.kc-choice:has(input:checked) { border-color: var(--kc-teal-700); background: var(--sb-mint-50); }
.kc-choice:has(input:focus-visible) { outline: 3px solid var(--sb-ink); outline-offset: 2px; }
.kc-choice input:focus-visible { outline: none; }
.kc-choice[hidden] { display: none; }
.kc-form__add { margin-top: 14px !important; }
.kc-form__add [hidden] { display: none; }
.kc-child__remove { margin: 14px 0 0; }
.kc-child__remove .kc-btn--ghost { --btn-fg: var(--kc-coral-700); --btn-edge: var(--kc-coral-100); }
.kc-form__consent { color: var(--sb-text); font: 500 .9375rem/1.5 var(--kc-font-body); }
.kc-form__submit { text-align: center; }
.kc-form__submit .kc-btn { min-width: min(100%, 280px); }

/* Tour times: sticker chips. */
.kc-slots__empty { display: flex; align-items: center; min-height: 52px; margin: 0; padding: 12px 16px; border: 2px dashed #9AAAA9; border-radius: 16px; background: #F5F7F7; color: #4F5A5A; font: 600 1rem/1.4 var(--kc-font-body); }
.kc-slots[hidden], .kc-slots__empty[hidden] { display: none; }
.kc-slots { padding: 16px; border-radius: 20px; background: var(--sb-sky-50); box-shadow: inset 0 0 0 2px var(--sb-sky-100); }
.kc-slots__label { margin: 0 0 8px; color: var(--sb-ink); font: 800 .8125rem/1.2 var(--kc-font-body); letter-spacing: .08em; text-transform: uppercase; }
.kc-slots__row { display: flex; flex-wrap: wrap; gap: 10px; }
.kc-slots__row + .kc-slots__label { margin-top: 16px; }
.kc-slot { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 8px 15px; border: 3px solid var(--kc-white); border-radius: 16px; background: var(--kc-white); box-shadow: 0 0 0 2px var(--kc-teal-700), 0 4px 0 2px var(--kc-teal-200); color: var(--kc-teal-800); font: 700 .9375rem/1.2 var(--kc-font-body); cursor: pointer; transition: background-color var(--kc-dur-fast), color var(--kc-dur-fast), rotate .25s var(--kc-ease-bounce); }
.kc-slot:nth-child(even) { rotate: .6deg; }
.kc-slot:nth-child(odd) { rotate: -.6deg; }
.kc-slot input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kc-slot small { display: block; font-weight: 600; font-size: .8125rem; }
.kc-slot .kc-icon { display: none; width: 15px; height: 15px; }
.kc-slot:hover { background: var(--sb-mint-50); }
.kc-slot:has(input:checked) { background: var(--kc-teal-700); color: var(--kc-white); box-shadow: 0 0 0 2px var(--kc-teal-700), 0 4px 0 2px var(--kc-teal-900); rotate: 0deg; }
.kc-slot:has(input:checked) .kc-icon { display: inline-block; }
.kc-slot:has(input:focus-visible) { outline: 3px solid var(--sb-ink); outline-offset: 4px; }
.kc-slots.is-invalid { box-shadow: inset 0 0 0 3px var(--kc-coral-700); }

/* The error summary. */
.kc-error-summary { padding: 18px 20px; border: 3px solid var(--kc-coral-700); border-radius: 20px; background: #FFF7F7; }
.kc-error-summary[hidden] { display: none; }
.kc-error-summary:focus-visible { outline: 3px solid var(--sb-ink); outline-offset: 3px; }
.kc-error-summary__title { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; color: var(--kc-coral-800); font: 800 1.1875rem/1.3 var(--kc-font-display); }
.kc-error-summary__title .kc-icon { width: 20px; height: 20px; }
.kc-error-summary__list { display: grid; gap: 4px; margin: 0; padding-left: 1.2em; }
.kc-body .kc-error-summary__list a { color: var(--kc-coral-800); font-weight: 700; }

/* ---------- Thank-you states: a ticket stub with confetti, a joey hop and one next step ---------- */
.sb-thanks { padding-block: clamp(36px, 4vw, 64px) clamp(20px, 3vw, 40px); }
.sb-thanks[hidden], [data-thanks-next][hidden] { display: none; }
.sb-thanks__inner { position: relative; display: grid; justify-items: center; gap: clamp(22px, 2.6vw, 32px); }
.sb-thanks__stage, .kc-thanks__stage { position: relative; width: 132px; height: 160px; margin: 0 auto -6px; }
.kc-thanks__roo, .sb-thanks__roo { left: 0; bottom: 0; width: 100%; }
.kc-thanks__title, .sb-thanks__title { max-width: 900px; color: var(--sb-ink); font: 800 clamp(1.875rem, 1.2rem + 2.4vw, 3.25rem)/1.12 var(--kc-font-display); text-align: center; text-wrap: balance; }
.kc-thanks__title:focus, .sb-thanks__title:focus { outline: none; }
.kc-thanks__sub, .sb-thanks__sub { max-width: 48ch; color: var(--sb-ink); font: 700 clamp(1.25rem, 1.05rem + .8vw, 1.75rem)/1.35 var(--kc-font-display); text-align: center; text-wrap: balance; }
.kc-thanks__echo { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; padding: 10px 18px; border-radius: 999px; background: var(--kc-white); box-shadow: 0 3px 0 var(--sb-sun-700); color: var(--sb-ink); font: 700 1rem/1.4 var(--kc-font-body); }
.kc-thanks__echo .kc-icon { width: 18px; height: 18px; margin-top: .1em; color: var(--kc-teal-700); }
.sb-ticket--stub { width: min(100%, 820px); gap: 14px; padding-block: clamp(30px, 4vw, 52px); }
.sb-ticket__title { color: var(--sb-ink); font: 800 clamp(1.75rem, 1.2rem + 2vw, 2.75rem)/1.1 var(--kc-font-display); text-wrap: balance; }
.sb-ticket__checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 900px; margin: 0; padding: 0; list-style: none; text-align: left; }
.sb-ticket__checks li { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .82); color: var(--sb-ink); font: 600 1rem/1.45 var(--kc-font-body); }
.sb-ticket__checks .kc-icon { flex: none; width: 22px; height: 22px; margin-top: .05em; color: var(--kc-teal-700); }
@media (max-width: 767.98px) { .sb-ticket__checks { grid-template-columns: minmax(0, 1fr); } }
.sb-confetti { position: absolute; z-index: 1; width: 30px; height: 30px; pointer-events: none; animation: sb-twinkle 3.2s ease-in-out infinite; }
.sb-confetti--1 { left: 6%; top: 10%; color: var(--sb-sun); }
.sb-confetti--2 { right: 8%; top: 18%; width: 24px; height: 24px; color: var(--kc-coral-400); animation-delay: -1.1s; }
.sb-confetti--3 { left: 12%; bottom: 14%; width: 22px; height: 22px; color: var(--kc-teal-400); animation-delay: -2.1s; }
.sb-confetti--4 { right: 13%; bottom: 8%; width: 34px; height: 34px; color: var(--sb-sun); animation-delay: -.5s; }
/* Below 1024px the ticket fills the width, so the confetti would land on its words. */
@media (max-width: 1023.98px) { .sb-confetti { display: none; } }
.kc-motion-paused .sb-confetti { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .sb-confetti { animation: none; }
  .kc-body .sb-doc { transition: none; }
  .kc-body .sb-doc:hover { translate: none; rotate: -1deg; }
}

/* ---------- Feedback: the form on dotted paper, the waving joey beside its heading ---------- */
.sb-feedback__paper { padding-top: clamp(30px, 3.6vw, 52px); }
.sb-feedback__head { position: relative; margin-bottom: clamp(20px, 2.4vw, 30px); padding-right: clamp(100px, 11vw, 150px); }
.sb-feedback__title { color: var(--sb-ink); font: 800 clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem)/1.2 var(--kc-font-display); text-wrap: balance; }
.sb-feedback__roo { right: 0; bottom: -10px; width: clamp(90px, 9vw, 130px); }
@media (max-width: 599.98px) { .sb-feedback__head { padding-right: 0; padding-top: 118px; } .sb-feedback__roo { right: 6px; top: 0; bottom: auto; width: 96px; } }

/* ===== storybook/home.css ===== */
/* ==========================================================================
   Storybook look: the home page's own placements (the sections are kit parts, components.css).
   ========================================================================== */

/* The trust stickers sit close under the hero. */
.sb-trust { padding-top: clamp(36px, 4vw, 64px); }

/* The bento: cameras and app, then the bus and meals, then the quality tile across. */
.sb-tile--cameras { grid-column: span 7; }
.sb-tile--app { grid-column: span 5; }
.sb-tile--bus { grid-column: span 5; }
.sb-tile--meals { grid-column: span 7; }
.sb-tile--bus { padding-top: calc(var(--pad) + 6px); }
@media (max-width: 1023.98px) { .sb-tile--cameras, .sb-tile--app, .sb-tile--bus, .sb-tile--meals { grid-column: span 6; } }
@media (max-width: 767.98px) { .sb-tile--cameras, .sb-tile--app, .sb-tile--bus, .sb-tile--meals { grid-column: auto; } }

/* ===== storybook/programs.css ===== */
/* ==========================================================================
   Storybook look: the Programs family ("a day at the Clubhouse"): the hub and the five age pages.
   Each age is a time of day (its hero's scene) with an accent, its age picker ring color.
   ========================================================================== */

/* Each age's accent tints its chips and its hero's sub pill. */
.sb-age--infants { --age: var(--kc-teal-300); --age-soft: var(--kc-teal-50); }
.sb-age--toddlers { --age: var(--kc-coral-300); --age-soft: var(--kc-coral-100); }
.sb-age--preschool { --age: var(--sb-sun); --age-soft: var(--sb-sun-100); }
.sb-age--prek { --age: var(--sb-sky-300); --age-soft: var(--sb-sky-100); }
.sb-age--before-after { --age: var(--kc-teal-400); --age-soft: var(--kc-teal-50); }
.sb-family--programs .sb-hero__sub { box-shadow: 0 4px 0 var(--age, rgba(143, 211, 242, .6)); }

/* ---------- The hub: the five ages along a hop trail, each card tinted with its time of day ---------- */
.page-programs .kc-age-picker { padding-top: clamp(40px, 4vw, 64px); }
.page-programs .kc-age-grid { position: relative; isolation: isolate; }
.page-programs .kc-age-grid::before { content: ""; position: absolute; left: 3%; right: 3%; top: 26%; z-index: -1; height: 92px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 92'%3E%3Cpath d='M0 76Q96 4 192 76' fill='none' stroke='%2389D8D3' stroke-width='6' stroke-linecap='round' stroke-dasharray='0.1 15'/%3E%3C/svg%3E") left center / auto 100% repeat-x; }
.page-programs .kc-age-card { padding: 20px 14px 24px; }
.page-programs .kc-age-card img { max-width: 190px; }
.page-programs .kc-age-grid > li:nth-child(1) .kc-age-card { background: linear-gradient(180deg, #FCE3D8, var(--kc-white) 62%); }
.page-programs .kc-age-grid > li:nth-child(2) .kc-age-card { background: linear-gradient(180deg, #DDF3FD, var(--kc-white) 62%); }
.page-programs .kc-age-grid > li:nth-child(3) .kc-age-card { background: linear-gradient(180deg, #C6EBFC, var(--kc-white) 62%); }
.page-programs .kc-age-grid > li:nth-child(4) .kc-age-card { background: linear-gradient(180deg, #FFF5D6, var(--kc-white) 62%); }
.page-programs .kc-age-grid > li:nth-child(5) .kc-age-card { background: linear-gradient(180deg, #FFCDAE, var(--kc-white) 62%); }
@media (max-width: 899.98px) { .page-programs .kc-age-grid::before { display: none; } }

/* ---------- Before & After School: the transport band (a sky band: the bus art is yellow) ---------- */
.sb-transport__head { display: grid; justify-items: center; gap: 14px; margin-bottom: clamp(24px, 3vw, 40px); text-align: center; }
.sb-transport__title { max-width: 30ch; color: var(--sb-ink); font: 800 clamp(1.75rem, 1.25rem + 1.8vw, 2.75rem)/1.35 var(--kc-font-display); text-wrap: balance; }
.sb-transport__title .kc-mark { color: var(--sb-ink); }
.sb-transport__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(24px, 3vw, 40px); max-width: 1000px; margin-inline: auto; }
@media (max-width: 767.98px) { .sb-transport__cards { grid-template-columns: minmax(0, 1fr); } }

/* ===== storybook/locations.css ===== */
/* ==========================================================================
   Storybook look: the Locations family ("our three Clubhouses"): the overview and the three centers.
   ========================================================================== */

/* ---------- Directions: the address signboard and the map card (sb-directions) ---------- */
.sb-directions { padding-top: clamp(30px, 3.2vw, 52px); }
.sb-directions__title { max-width: 38ch; margin: 0 auto clamp(28px, 3vw, 48px); color: var(--sb-ink); font: 800 clamp(1.625rem, 1.2rem + 1.5vw, 2.5rem)/1.25 var(--kc-font-display); text-align: center; text-wrap: balance; }
.sb-directions__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: clamp(30px, 4.5vw, 72px); max-width: 1080px; margin-inline: auto; }
.sb-directions__card { gap: 14px; padding-bottom: clamp(22px, 2.4vw, 30px); }
.sb-directions__card .sb-signboard__list li { font-size: 1.25rem; }
.sb-directions__card .sb-signboard__name { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); }
@media (max-width: 899.98px) { .sb-directions__grid { grid-template-columns: minmax(0, 1fr); } }

/* The map card: a drawn map (CSS only) until "Show The Map" (site.js [data-map]) loads the
   Google embed in its place. A frame, not a blob, so the map's own controls stay whole. */
.sb-map { position: relative; aspect-ratio: 4 / 3; border: 7px solid var(--kc-white); border-radius: 28px; background: #EAF7EF; box-shadow: 0 0 0 2px rgba(14, 59, 57, .06), var(--sb-shadow-lift); rotate: 1.2deg; }
.sb-map .sb-tape { top: -20px; left: auto; right: 12%; rotate: 5deg; }
.sb-map__art { position: absolute; inset: 0; overflow: hidden; border-radius: 21px;
  background:
    linear-gradient(26deg, transparent 0 46%, #FFE7A3 46% 51.5%, transparent 51.5%),
    linear-gradient(90deg, transparent 0 63%, var(--kc-white) 63% 66%, transparent 66%),
    linear-gradient(90deg, transparent 0 24%, var(--kc-white) 24% 26.5%, transparent 26.5%),
    linear-gradient(0deg, transparent 0 28%, var(--kc-white) 28% 31%, transparent 31%),
    linear-gradient(0deg, transparent 0 70%, var(--kc-white) 70% 72.5%, transparent 72.5%),
    radial-gradient(circle at 84% 20%, #BFEBD2 0 12%, transparent 12.5%),
    radial-gradient(circle at 12% 84%, #BFEBD2 0 9%, transparent 9.5%),
    radial-gradient(ellipse 70% 46% at 0 0, #CDEBFB 0 55%, transparent 56%),
    #EAF7EF; }
.sb-map__pin { position: absolute; left: 50%; top: 46%; width: clamp(48px, 5vw, 64px); height: clamp(48px, 5vw, 64px); translate: -50% -100%; color: var(--kc-coral-600); filter: drop-shadow(0 5px 0 rgba(14, 59, 57, .2)); }
.sb-map__pin .kc-icon { width: 100%; height: 100%; }
.sb-map__bar { position: absolute; left: 0; right: 0; bottom: clamp(16px, 2.4vw, 28px); display: flex; justify-content: center; padding-inline: 12px; }
.sb-map.is-loaded { rotate: 0deg; }
.sb-map.is-loaded .sb-map__art { display: none; }
.sb-map .kc-map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 21px; }
@media (max-width: 599.98px) { .sb-map { aspect-ratio: 1; rotate: .6deg; } }

/* ---------- Facts: the signpost of stickers and the "Show The Love" note (sb-facts) ---------- */
.sb-facts { padding-block: clamp(44px, 4.4vw, 76px) clamp(56px, 5.4vw, 100px); }
.sb-stickers--facts { margin-top: 0; }
.sb-stickers--facts > li { flex-basis: calc((100% - 3 * 26px) / 4); }
.sb-stickers--facts .sb-sticker__text { overflow-wrap: anywhere; }
.sb-stickers--facts a.sb-sticker .sb-sticker__text { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.sb-stickers--facts a.sb-sticker::after { display: none; }
@media (min-width: 600px) {
  .sb-stickers--facts .sb-sticker { flex-direction: column; justify-content: center; gap: 12px; padding: 20px 16px 22px; text-align: center; }
  .sb-stickers--facts .sb-sticker__text { flex: none; }
}
@media (max-width: 1199.98px) { .sb-stickers--facts > li { flex-basis: calc((100% - 26px) / 2); } }
@media (max-width: 599.98px) { .sb-stickers--facts > li { flex-basis: 100%; } }
.sb-love { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; width: fit-content; max-width: 100%; margin: clamp(36px, 4vw, 60px) auto 0; padding: 28px clamp(22px, 3vw, 40px) 26px; border-radius: 4px 4px 26px 4px; background: #FFF1AE; box-shadow: 0 16px 24px rgba(14, 59, 57, .14); rotate: -1deg; }
.sb-love::before { content: ""; position: absolute; top: -13px; left: 50%; width: 96px; height: 26px; translate: -50% 0; rotate: -3deg; background: rgba(255, 255, 255, .72); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.sb-love__label { color: var(--sb-ink); font: 800 clamp(1.375rem, 1.2rem + .6vw, 1.75rem)/1.2 var(--kc-font-display); }
.sb-love__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
@media (max-width: 599.98px) { .sb-love { rotate: 0deg; } .sb-love__actions { flex-direction: column; align-items: stretch; width: 100%; } }

/* ---------- The director: a polaroid portrait and the bio in a speech bubble (sb-director) ---------- */
.sb-director__grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); align-items: start; gap: clamp(32px, 5vw, 84px); max-width: 1120px; margin-inline: auto; }
.sb-director__photo { position: relative; margin-top: clamp(8px, 3vw, 48px); padding: 14px 14px 54px; border-radius: 6px; background: var(--kc-white); box-shadow: 0 0 0 1px rgba(14, 59, 57, .06), var(--sb-shadow-lift); rotate: -3deg; }
.sb-director__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.sb-director__photo .sb-tape { left: 50%; translate: -50% 0; }
.sb-director__title { margin-bottom: clamp(20px, 2.2vw, 30px); }
.sb-director__bubble { position: relative; padding: clamp(24px, 3vw, 42px); border-radius: 36px; background: var(--kc-white); box-shadow: 0 0 0 3px var(--sb-sky-100), 0 10px 0 var(--sb-sky-200); }
.sb-director__bubble::before { content: ""; position: absolute; left: -18px; top: 52px; width: 32px; height: 32px; border-left: 3px solid var(--sb-sky-100); border-bottom: 3px solid var(--sb-sky-100); background: var(--kc-white); rotate: 45deg; }
.sb-director__bubble p { font-size: 1.0625rem; line-height: 1.7; }
.sb-director__bubble p + p { margin-top: 1em; }
@media (max-width: 899.98px) {
  .sb-director__grid { grid-template-columns: minmax(0, 1fr); }
  .sb-director__photo { width: min(76%, 340px); margin: 0 auto; }
  .sb-director__title { text-align: center; }
  .sb-director__bubble::before { left: 50%; top: -18px; translate: -50% 0; border-bottom: 0; border-top: 3px solid var(--sb-sky-100); }
}

/* ---------- The Locations overview: a signboard postcard per center (center-cards variant="postcards") ---------- */
.sb-postcards { padding-bottom: calc(var(--sb-section-y) + 70px); }
.sb-postcards__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(22px, 2.6vw, 40px); }
.sb-postcard { gap: 16px; padding-bottom: clamp(22px, 2.4vw, 28px); }
.sb-postcard .sb-signboard__name { font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem); }
.sb-postcard .sb-signboard__list li { font-size: 1rem; }
.sb-postcard__map { rotate: 0deg; }
.sb-postcard__go { margin-top: 4px; }
.sb-postcards__roo { left: 10%; bottom: 10px; width: clamp(80px, 7vw, 104px); }
@media (max-width: 1023.98px) {
  .sb-postcards__grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .sb-postcards__roo { --kc-travel: off; left: auto; right: 8%; }
}

/* ===== storybook/about.css ===== */
/* ==========================================================================
   Storybook look: the About family ("our scrapbook"): About Us, Why Choose Us, Tuition Support, Parent Reviews.
   ========================================================================== */

/* ---------- About Us: the owner's letter on lined paper, with the family polaroid ---------- */
.sb-letter__paper { max-width: 1080px; margin-inline: auto; }
.sb-letter__paper p { font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.8; }
.sb-letter__paper p + p { margin-top: 1em; }
.sb-letter__top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; gap: clamp(26px, 4vw, 56px); }
.sb-letter__intro .sb-title { margin-bottom: 18px; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.6rem); }
.sb-letter__photo { position: relative; margin: 8px 0 0; padding: 12px 12px 46px; border-radius: 6px; background: var(--kc-white); box-shadow: 0 0 0 1px rgba(14, 59, 57, .06), var(--sb-shadow-lift); rotate: 2deg; }
.sb-letter__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.sb-letter__photo .sb-tape { top: -16px; }
.sb-letter__body { margin-top: clamp(22px, 3vw, 36px); max-width: 68ch; }
.sb-letter__sign { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 1.4em; }
.sb-letter__name { color: var(--kc-coral-600); font: 400 clamp(2rem, 1.6rem + 1.4vw, 2.75rem)/1.1 var(--kc-font-script); }
.sb-letter__role { color: var(--sb-ink); font: 700 1rem/1.2 var(--kc-font-body); letter-spacing: .04em; text-transform: uppercase; }
.sb-letter__heart { width: 38px; height: 38px; color: var(--kc-coral-500); rotate: 12deg; animation: sb-bob 3.6s ease-in-out infinite; }
.sb-letter__roo { right: clamp(10px, 4vw, 70px); bottom: -10px; width: clamp(84px, 7.5vw, 116px); }
@media (max-width: 899.98px) {
  .sb-letter__top { grid-template-columns: minmax(0, 1fr); }
  .sb-letter__photo { width: min(100%, 480px); margin-inline: auto; }
  .sb-letter { padding-bottom: calc(var(--sb-section-y) + 80px); }
}

/* ---------- About Us: the mission, a big-type pause with sparkles ---------- */
.sb-mission { text-align: center; }
.sb-mission__title { margin-bottom: 18px; color: var(--sb-ink); font: 800 clamp(2rem, 1.35rem + 2.3vw, 3.4rem)/1.08 var(--kc-font-display); text-wrap: balance; }
.sb-mission__text { color: var(--sb-ink); font: 600 clamp(1.25rem, 1.05rem + .9vw, 1.75rem)/1.55 var(--kc-font-display); text-wrap: pretty; }
.sb-mission__spark { position: absolute; width: 40px; height: 40px; color: var(--sb-sun); animation: sb-twinkle 2.8s ease-in-out infinite; }
.sb-mission__spark--1 { left: 8%; top: 24%; }
.sb-mission__spark--2 { right: 10%; top: 18%; width: 32px; height: 32px; color: var(--kc-coral-500); animation-delay: -.9s; }
.sb-mission__spark--3 { right: 16%; bottom: 18%; width: 28px; height: 28px; animation-delay: -1.8s; }
@media (max-width: 599.98px) { .sb-mission__spark--1 { left: 2%; top: 6%; } .sb-mission__spark--2 { right: 2%; top: 4%; } .sb-mission__spark--3 { display: none; } }

/* ---------- Why Choose Us: the hop trail, ten numbered stops along a dotted board-game path ----------
   The joey rides down the path's lane (sticky), so it never sits on a card. */
.sb-trail { --trail-lane: 120px; padding-bottom: calc(var(--sb-section-y) + 40px); }
.sb-trail__wrap { position: relative; max-width: 1080px; }
.sb-trail__lane { position: absolute; top: 0; bottom: 0; left: 50%; width: var(--trail-lane); translate: -50% 0; pointer-events: none; }
.sb-trail__lane::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 8px; translate: -50% 0; background: radial-gradient(circle, var(--sb-sun) 4px, transparent 4.5px) center top / 8px 22px repeat-y; }
.sb-trail__roo { position: sticky; top: calc(var(--kc-header-h, 80px) + 34vh); left: auto; display: block; width: clamp(70px, 6vw, 80px); margin-inline: auto; }
.sb-trail__list { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--trail-lane); row-gap: clamp(26px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.sb-trail__stop { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 22px clamp(18px, 2vw, 28px); border: 5px solid var(--kc-white); border-radius: 28px; background: var(--kc-white); box-shadow: 0 0 0 2px var(--sb-sky-100), 0 7px 0 var(--sb-sky-200), var(--sb-shadow); rotate: -1deg; }
.sb-trail__stop:nth-child(even) { margin-top: clamp(60px, 6vw, 90px); margin-bottom: calc(-1 * clamp(60px, 6vw, 90px)); rotate: 1deg; }
.sb-trail__num { position: absolute; top: 50%; right: -26px; translate: 0 -50%; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border: 4px solid var(--kc-white); border-radius: 50%; background: var(--sb-sun); color: var(--sb-ink); font: 800 1.25rem/1 var(--kc-font-display); box-shadow: 0 4px 0 var(--sb-sun-700); }
.sb-trail__stop:nth-child(even) .sb-trail__num { right: auto; left: -26px; }
.sb-trail__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--kc-teal-700); color: var(--kc-white); box-shadow: 0 4px 0 var(--kc-teal-900); }
.sb-trail__stop--coral .sb-trail__icon { background: var(--kc-coral-600); box-shadow: 0 4px 0 var(--kc-coral-800); }
.sb-trail__icon .kc-icon { width: 32px; height: 32px; }
.sb-trail__title { color: var(--sb-ink); font: 800 clamp(1.1875rem, 1rem + .6vw, 1.5rem)/1.25 var(--kc-font-display); text-wrap: balance; }
.kc-body .sb-trail__title a { color: inherit; text-decoration: underline; text-decoration-color: var(--kc-teal-300); text-decoration-thickness: 3px; text-underline-offset: .18em; }
.kc-body .sb-trail__title a:hover { text-decoration-color: var(--kc-coral-500); }
.sb-trail__stop--medal { background: var(--sb-sun-100); box-shadow: 0 0 0 2px var(--sb-sun-200), 0 7px 0 var(--sb-sun-700), var(--sb-shadow); }
.sb-trail__medal { width: 92px; margin: 0 0 18px; }
@media (max-width: 899.98px) {
  .sb-trail { --trail-lane: 64px; }
  .sb-trail__lane { left: 0; translate: none; }
  .sb-trail__list { grid-template-columns: minmax(0, 1fr); margin-left: calc(var(--trail-lane) + 8px); }
  .sb-trail__stop, .sb-trail__stop:nth-child(even) { margin: 0; rotate: 0deg; }
  .sb-trail__stop .sb-trail__num, .sb-trail__stop:nth-child(even) .sb-trail__num { top: -14px; right: auto; left: -14px; translate: none; width: 40px; height: 40px; font-size: 1.0625rem; }
  .sb-trail__stop { padding-top: 26px; }
  .sb-trail__roo { width: 52px; top: calc(var(--kc-header-h, 72px) + 40vh); }
}
@media (max-width: 599.98px) { .sb-trail__stop { gap: 12px; padding-inline: 16px; } .sb-trail__icon { width: 50px; height: 50px; } .sb-trail__icon .kc-icon { width: 26px; height: 26px; } .sb-trail__medal { width: 64px; margin-bottom: 10px; } }

/* ---------- Parent Reviews: the corkboard wall of sticky notes (sb-wall) ----------
   The notes reuse the reviews carousel's sticky-note look (.kc-review figure, components.css). */
.sb-wall { background: radial-gradient(circle, rgba(122, 78, 35, .16) 1.2px, transparent 1.7px) 0 0 / 15px 15px, radial-gradient(circle, rgba(255, 255, 255, .28) 1.2px, transparent 1.7px) 7px 8px / 15px 15px, #E8C796; }
.sb-wall__title { margin-bottom: clamp(30px, 3.6vw, 52px); text-align: center; }
.sb-wall__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(28px, 3vw, 42px) clamp(22px, 2.4vw, 34px); margin: 0; padding: 0; list-style: none; }
.sb-wall__note figure { height: auto; }
.sb-wall__note:focus { outline: none; }
.sb-wall__note:focus-visible figure { outline: 3px solid var(--sb-ink); outline-offset: 4px; }
.sb-wall__more { margin-top: clamp(34px, 3.6vw, 52px); text-align: center; }
.sb-wall__more[hidden] { display: none; }
@media (max-width: 1023.98px) { .sb-wall__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .sb-wall__list { grid-template-columns: minmax(0, 1fr); } }
.sb-review-links { padding-block: clamp(40px, 4vw, 72px) 0; }
@media (max-width: 599.98px) { .sb-review-links { padding-bottom: 110px; } }   /* the ticket's joey stands on its top edge on phones */
.sb-review-links__note { margin-top: 0; }

/* ===== storybook/parents.css ===== */
/* ==========================================================================
   Storybook look: the Parents family ("family cubbies"): Parent Corner, Cameras, Current Families, Pay Online.
   ========================================================================== */

/* ---------- Shared: the chip back to Parent Corner, words that stay together ---------- */
.sb-chip--link { padding: 0; }
.kc-body .sb-chip--link a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 20px 8px 14px; border-radius: inherit; color: var(--kc-teal-800); text-decoration: none; }
@media (hover: hover) { .kc-body .sb-chip--link a:hover { text-decoration: underline; text-underline-offset: .2em; } }
.sb-nowrap { white-space: nowrap; }

/* ---------- Parent Corner: the cubbies (sb-resource), with the wide Procare cubby ---------- */
.sb-bento--cubbies > .sb-resource--span-8 { grid-column: span 8; }
@media (max-width: 1023.98px) { .sb-bento--cubbies > .sb-resource--span-8 { grid-column: 1 / -1; } }
.sb-resource__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 14px; margin: 0; padding: 0; list-style: none; }
/* The app buttons name their store under "Download App". */
.sb-store { gap: 10px; text-align: left; }
.sb-store .kc-icon { width: 20px; height: 20px; }
.sb-store__text { display: grid; line-height: 1.05; }
.sb-store__text small { font: 600 .75rem/1.15 var(--kc-font-body); }

/* ---------- Parent Corner: the referral offer, a coupon on the sunshine band ---------- */
.sb-coupon { --stub: clamp(170px, 19vw, 220px); --notch: 18px; --cut: radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 calc(var(--notch) - .5px), #000 var(--notch)) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 calc(var(--notch) - .5px), #000 var(--notch)) bottom / 100% 51% no-repeat;
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); color: var(--sb-text); }
/* The paper and its pressed edge, notched where the stub tears off. */
.sb-coupon::before, .sb-coupon::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 32px; background: var(--kc-white); -webkit-mask: var(--cut); mask: var(--cut); }
.sb-coupon::before { z-index: -2; translate: 0 8px; background: rgba(181, 122, 0, .35); }
.sb-coupon__body { display: grid; gap: 14px; padding: clamp(28px, 3.6vw, 48px) clamp(24px, 3.6vw, 52px); }
.sb-coupon__title { color: var(--sb-ink); font: 800 clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem)/1 var(--kc-font-display); }
.sb-coupon__lead { color: var(--sb-ink); font: 700 clamp(1.125rem, 1rem + .4vw, 1.3125rem)/1.4 var(--kc-font-body); }
.sb-coupon strong { color: var(--sb-ink); }
.sb-coupon__terms { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sb-coupon__terms li { position: relative; padding-left: 28px; }
.sb-coupon__terms li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 14px; height: 14px; border-radius: 50%; background: var(--sb-sun); box-shadow: 0 0 0 4px var(--sb-sun-100); }
.sb-coupon__thanks { color: var(--kc-coral-700); font: 700 clamp(1.25rem, 1.1rem + .5vw, 1.5rem)/1.35 var(--kc-font-script); }
.sb-coupon__stub { display: grid; align-content: center; justify-items: center; gap: 22px; margin-block: calc(var(--notch) + 10px); padding: 10px 16px; border-left: 3px dashed rgba(14, 59, 57, .16); }
.sb-coupon__deal { display: grid; place-items: center; align-content: center; width: clamp(126px, 12vw, 150px); aspect-ratio: 1; border: 5px solid var(--kc-white); border-radius: 50%; background: var(--kc-coral-600); box-shadow: 0 5px 0 var(--kc-coral-800), 0 12px 22px rgba(14, 59, 57, .16); color: var(--kc-white); font: 700 .9375rem/1.2 var(--kc-font-body); text-align: center; rotate: -6deg; }
.sb-coupon__deal b { font: 800 clamp(2.1rem, 1.7rem + 1.2vw, 2.6rem)/1 var(--kc-font-display); }
.sb-coupon__deal--part { background: var(--kc-teal-700); box-shadow: 0 5px 0 var(--kc-teal-900), 0 12px 22px rgba(14, 59, 57, .16); rotate: 5deg; }
.sb-referral .sb-band__star { top: clamp(14px, 2.6vw, 44px); bottom: auto; }
.sb-referral .sb-band__star--2 { right: 9%; }
@media (max-width: 699.98px) {
  .sb-coupon { grid-template-columns: minmax(0, 1fr); }
  .sb-coupon::before, .sb-coupon::after { -webkit-mask: none; mask: none; }
  .sb-coupon__stub { order: -1; grid-auto-flow: column; gap: 18px; margin: 0 clamp(18px, 5vw, 30px); padding: 26px 0 20px; border-left: 0; border-bottom: 3px dashed rgba(14, 59, 57, .16); }
  .sb-coupon__deal { width: 118px; }
}

/* ---------- Cameras: the title on a TV screen ---------- */
.sb-hero--tv .sb-hero__copy { padding-top: 54px; }
.sb-hero--tv .sb-hero__title { position: relative; padding: .24em .7em .34em; border: 8px solid var(--sb-ink); border-radius: 32px;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .22) 0 3px, transparent 3px 7px), linear-gradient(var(--sb-sky-200), var(--sb-sky-100));
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .55), 0 10px 0 rgba(14, 59, 57, .22); }
/* Two antennas, each with a coral tip. */
.sb-hero--tv .sb-hero__title::before, .sb-hero--tv .sb-hero__title::after { content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px); width: 16px; height: 52px; transform-origin: 50% 100%;
  background: radial-gradient(circle at 50% 7px, var(--kc-coral-500) 6.5px, transparent 7px), linear-gradient(var(--sb-ink), var(--sb-ink)) 50% 100% / 6px calc(100% - 10px) no-repeat; }
.sb-hero--tv .sb-hero__title::before { translate: -16px 0; rotate: -26deg; }
.sb-hero--tv .sb-hero__title::after { translate: 0 0; rotate: 24deg; }

/* ---------- Cameras: streaming video, the five feature stickers, the poster and the files ---------- */
.sb-streaming__head { display: grid; justify-items: center; gap: 14px; text-align: center; }
.sb-stickers--five > li { flex-basis: calc((100% - 4 * 26px) / 5); }
.sb-stickers--five .sb-sticker { flex-direction: column; justify-content: center; gap: 10px; padding: 18px 12px; font-size: 1rem; line-height: 1.3; text-align: center; }
.sb-stickers--five .sb-sticker__text { flex: none; }
@media (max-width: 1023.98px) { .sb-stickers--five > li { flex-basis: calc((100% - 2 * 26px) / 3); } }
@media (max-width: 599.98px) { .sb-stickers--five > li { flex-basis: calc((100% - 16px) / 2); } .sb-stickers--five .sb-sticker { padding: 14px 10px; font-size: .9375rem; } }

/* The video: a drawn poster in a taped frame. It plays nothing here (the link opens the note). */
.sb-video { position: relative; width: min(100%, 860px); margin: clamp(46px, 5vw, 72px) auto 0; padding: 12px; border-radius: 30px; background: var(--kc-white); box-shadow: 0 0 0 2px rgba(14, 59, 57, .06), var(--sb-shadow-lift); rotate: -.6deg; }
.sb-video .sb-tape { top: -14px; left: 7%; }
.sb-video .sb-tape--teal { left: auto; right: 7%; }
.kc-body .sb-video__poster { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 22px; color: var(--sb-ink); text-decoration: none; }
.sb-video__sky { position: absolute; inset: 0; background: radial-gradient(120% 60% at 30% 108%, #A8E3C0 0 49.6%, transparent 50%), radial-gradient(110% 55% at 88% 112%, #C7EFD6 0 49.6%, transparent 50%), linear-gradient(#8FD3F2, var(--sb-sky-100) 75%); }
.sb-video__cloud { position: absolute; width: 22%; height: auto; aspect-ratio: 2; color: var(--kc-white); }
.sb-video__cloud--1 { left: 8%; top: 12%; }
.sb-video__cloud--2 { right: 10%; top: 22%; width: 15%; }
.sb-video__house { position: absolute; left: 14%; bottom: 16%; width: 18%; height: auto; aspect-ratio: 1; color: var(--kc-coral-500); }
.sb-video__play { position: relative; display: grid; place-items: center; width: clamp(76px, 10vw, 116px); aspect-ratio: 1; border: 6px solid var(--kc-white); border-radius: 50%; background: var(--kc-coral-600); color: var(--kc-white); box-shadow: 0 7px 0 var(--kc-coral-800), var(--sb-shadow); transition: scale .25s var(--kc-ease-bounce); }
.sb-video__play .kc-icon { width: 42%; height: 42%; translate: 6% 0; }
.sb-video__title { position: absolute; left: 50%; bottom: 7%; translate: -50% 0; max-width: 90%; padding: 8px 18px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 3px 0 rgba(14, 59, 57, .12); font: 800 clamp(1rem, .9rem + .5vw, 1.375rem)/1.2 var(--kc-font-display); text-align: center; }
@media (hover: hover) { .sb-video__poster:hover .sb-video__play { scale: 1.08; } }
/* Phones: a squarer poster, with the title under the play button (it can wrap there); no house. */
@media (max-width: 599.98px) {
  .kc-body .sb-video__poster { align-content: center; gap: 14px; aspect-ratio: 4 / 3; }
  .sb-video__house { display: none; }
  .sb-video__title { position: relative; left: auto; bottom: auto; translate: none; max-width: 88%; padding: 7px 14px; font-size: .9375rem; }
}
.sb-cam-files { width: min(100%, 780px); margin: clamp(58px, 6vw, 84px) auto 0; }
.sb-cam-files > * { grid-column: span 6; }
@media (max-width: 767.98px) { .sb-cam-files > * { grid-column: auto; } }

/* ---------- Cameras: requesting access, numbered stickers on a scalloped sky band ---------- */
.sb-band--scallop { --edge: var(--sb-edge-scallop); --edge-size: 48px 100%; --edge-repeat: repeat-x; --edge-h: 22px; }
.sb-access__title { margin-bottom: clamp(26px, 3vw, 40px); text-align: center; }
/* The kit's numbered stickers (.sb-steps, forms.css), white on the sky band; step 3 lists the facilities. */
.sb-access :where(.sb-steps) > li { background: var(--kc-white); }
.sb-access .sb-steps > li { font-size: 1.0625rem; }
.kc-body .sb-steps a { color: var(--kc-teal-800); font-weight: 800; overflow-wrap: anywhere; }
.sb-steps__places { display: grid; gap: 4px; margin: 10px 0 0; padding-left: 1.2em; }
.sb-steps__places li::marker { color: var(--kc-coral-600); }

/* ---------- Cameras: the check-in intro and three taped sticky notes ---------- */
.sb-checkin { padding-bottom: calc(var(--sb-section-y) + 80px); }
.sb-checkin__head { display: grid; gap: 18px; max-width: 880px; margin: 0 auto clamp(40px, 4.4vw, 64px); text-align: center; }
.sb-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(24px, 2.8vw, 40px); margin: 0; padding: 0; list-style: none; }
.sb-note { --note: var(--sb-sun-100); position: relative; padding: 36px clamp(20px, 2vw, 28px) 28px; border-radius: 6px 6px 26px 6px; background: var(--note); box-shadow: 0 16px 26px rgba(14, 59, 57, .13); rotate: -1.4deg; }
.sb-note::before { content: ""; position: absolute; top: -13px; left: 50%; width: 112px; height: 30px; translate: -50% 0; rotate: -4deg; opacity: .92;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .3) 0 6px, transparent 6px 12px), var(--kc-teal-300);
  clip-path: polygon(3% 0, 97% 0, 100% 18%, 97% 36%, 100% 54%, 97% 72%, 100% 90%, 97% 100%, 3% 100%, 0 82%, 3% 64%, 0 46%, 3% 28%, 0 10%); }
.sb-note:nth-child(2) { margin-top: 22px; rotate: 1.2deg; }
.sb-note:nth-child(2)::before { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .3) 0 6px, transparent 6px 12px), var(--kc-coral-300); rotate: 3deg; }
.sb-note:nth-child(3) { rotate: -.6deg; }
.sb-note--sky { --note: var(--sb-sky-100); }
.sb-note--petal { --note: var(--kc-coral-100); }
.sb-note__title { margin-bottom: 12px; color: var(--sb-ink); font: 800 clamp(1.3rem, 1.15rem + .5vw, 1.55rem)/1.2 var(--kc-font-display); text-wrap: balance; }
.sb-note p { font-size: 1rem; line-height: 1.6; }
.sb-note__stat { display: grid; justify-items: start; gap: 2px; margin-bottom: 12px; color: var(--sb-ink); }
.sb-note__stat span { font: 800 .8125rem/1.2 var(--kc-font-body); letter-spacing: .06em; text-transform: uppercase; }
.sb-note__stat b { color: var(--kc-teal-800); font: 800 clamp(2.4rem, 2rem + 1.4vw, 3.1rem)/1 var(--kc-font-display); }
.sb-checkin__roo { right: clamp(14px, 7vw, 130px); bottom: 14px; width: clamp(80px, 6.5vw, 104px); }
@media (max-width: 899.98px) { .sb-notes { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } .sb-note:nth-child(2) { margin-top: 0; } }

/* ---------- Cameras: WatchMeGrow support, the wide advert photo beside a speech bubble ---------- */
.sb-camhelp .sb-blob { aspect-ratio: 40 / 21; }
.sb-camhelp__bubble { position: relative; display: grid; gap: 14px; padding: clamp(24px, 3vw, 40px); border-radius: 36px; background: var(--sb-sky-50); box-shadow: inset 0 0 0 3px var(--sb-sky-100); }
.sb-camhelp__bubble::after { content: ""; position: absolute; left: -26px; top: 46%; width: 30px; height: 40px; background: var(--sb-sky-50); clip-path: polygon(100% 0, 100% 100%, 0 60%); }
.sb-camhelp__title { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.sb-camhelp__contact { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kc-body .sb-camhelp__contact a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--kc-teal-800); font-weight: 700; overflow-wrap: anywhere; }
.sb-camhelp__contact .kc-icon { flex: none; width: 18px; height: 18px; color: var(--kc-coral-600); }
.sb-camhelp__action { margin-top: 6px; }
/* Stacked, the bubble sits above the photo, so its tail points down. */
@media (max-width: 899.98px) { .sb-camhelp__bubble::after { left: 50%; top: 100%; width: 40px; height: 26px; translate: -50% 0; clip-path: polygon(0 0, 100% 0, 50% 100%); } }

/* ---------- Current Families: the clubhouse door (the demo gate, site.js gates()) ---------- */
.sb-gate { padding-bottom: calc(var(--sb-section-y) + 10px); }
.sb-door { position: relative; width: min(100%, 600px); margin-inline: auto; }
/* The doorway: a wooden arch, warm light inside. */
.sb-door__frame { position: relative; padding: 16px 16px 0; border-radius: 999px 999px 0 0; background: #E2B887; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .06), 0 14px 30px rgba(14, 59, 57, .14); perspective: 1600px; }
.sb-door__frame::before { content: ""; position: absolute; inset: 16px 16px 0; border-radius: 999px 999px 0 0; background: radial-gradient(70% 60% at 50% 40%, #FFF7D6, var(--sb-sun-200)); }
.sb-door::after { content: ""; position: absolute; left: max(-8%, -40px); right: max(-8%, -40px); bottom: -16px; z-index: -1; height: 22px; border-radius: 999px; background: #CDEBD7; }
/* The door itself: teal planks, arched to fit, hinged on the left. */
.sb-door__leaf { position: relative; display: grid; justify-items: center; padding: clamp(118px, 15vw, 150px) clamp(16px, 6%, 40px) clamp(48px, 6vw, 70px); border-radius: 999px 999px 0 0;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .09) 0 3px, transparent 3px 22%), linear-gradient(var(--kc-teal-600), var(--kc-teal-700));
  transform-origin: 0 50%; transition: transform .75s cubic-bezier(.55, .05, .3, 1), opacity .25s; }
.sb-gate.is-opening .sb-door__leaf { transform: rotateY(-104deg); }
:is(.kc-motion-reduced, .kc-motion-paused) .sb-gate.is-opening .sb-door__leaf { transform: none; opacity: 0; transition: opacity .25s; }
@media (prefers-reduced-motion: reduce) { .sb-door__leaf { transition: opacity .25s; } .sb-gate.is-opening .sb-door__leaf { transform: none; opacity: 0; } }
.sb-door__lock { position: relative; z-index: 2; display: grid; place-items: center; width: 74px; height: 74px; margin-bottom: -30px; border: 5px solid var(--kc-white); border-radius: 50%; background: var(--sb-sun); box-shadow: 0 4px 0 var(--sb-sun-700); color: var(--sb-ink); rotate: -8deg; }
.sb-door__lock .kc-icon { width: 32px; height: 32px; }
/* The sign on the door holds the form. */
.sb-door__sign { position: relative; display: grid; gap: 18px; width: 100%; padding: 46px clamp(18px, 4vw, 34px) clamp(24px, 3vw, 32px); border-radius: 22px; background: var(--kc-white); box-shadow: 0 6px 0 rgba(0, 0, 0, .14); }
.kc-form.sb-door__sign > * + * { margin-top: 0; }
.sb-door__prompt { color: var(--sb-ink); font: 800 clamp(1.25rem, 1.1rem + .5vw, 1.5rem)/1.3 var(--kc-font-display); text-align: center; text-wrap: balance; }
.kc-form .sb-door__input { border-radius: 999px; padding-inline: 22px; }
.kc-form .sb-door__input:focus-visible { border-radius: 999px; }
.sb-door__hint { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--sb-sun-50); box-shadow: inset 0 0 0 2px var(--sb-sun-100); color: var(--sb-ink); font: 600 .9375rem/1.45 var(--kc-font-body); }
.sb-door__hint .kc-icon { flex: none; width: 18px; height: 18px; margin-top: .14em; color: #9A5B00; }
.sb-door__submit { text-align: center; }
.sb-door__submit .kc-btn { min-width: min(100%, 220px); }
.sb-door__knob { position: absolute; right: clamp(10px, 2.4%, 16px); top: 58%; width: 22px; height: 22px; border-radius: 50%; background: var(--sb-sun); box-shadow: inset -3px -3px 0 var(--sb-sun-700), 0 3px 0 rgba(0, 0, 0, .18); }
.sb-door__roo { right: clamp(-130px, -10vw, -96px); bottom: 0; width: clamp(84px, 8vw, 116px); }
/* Narrower, the door fills the column: the joey stands inside the doorway, below the sign. */
@media (max-width: 899.98px) { .sb-door__leaf { padding-bottom: 112px; } .sb-door__roo { right: 4%; width: 84px; } }
@media (max-width: 599.98px) { .sb-door__knob { display: none; } }

/* ---------- Current Families: the family downloads ---------- */
.sb-portal__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: clamp(44px, 5vw, 64px); }
.sb-portal__lock { margin: 0; }
.sb-portal__grid > * { grid-column: span 3; }
@media (max-width: 1023.98px) { .sb-portal__grid > * { grid-column: span 6; } }
@media (max-width: 767.98px) { .sb-portal__grid > * { grid-column: auto; } }

/* ---------- Pay Online: security, the Tuition Express bubble and the payment policy ---------- */
.sb-secure__head { display: grid; justify-items: center; gap: 16px; margin-bottom: clamp(30px, 3.4vw, 46px); text-align: center; }
.sb-seal.sb-secure__seal { position: relative; right: auto; bottom: auto; }
.sb-secure__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 1000px; margin-inline: auto; }
.sb-secure .sb-icon-cards li, .sb-secure .sb-icon-cards li:nth-child(n) { background: var(--kc-white); box-shadow: 0 6px 0 var(--sb-sky-200); }
.sb-secure .sb-icon-cards b { display: block; margin-bottom: 2px; font: 800 1.1875rem/1.3 var(--kc-font-display); }
@media (max-width: 767.98px) { .sb-secure__cards { grid-template-columns: minmax(0, 1fr); } }
.sb-te__logo { display: inline-block; margin: 0 auto 18px; padding: 10px 16px; border: 4px solid var(--kc-white); border-radius: 18px; background: var(--kc-white); box-shadow: 0 4px 0 var(--sb-sky-200), var(--sb-shadow); rotate: -3deg; }
.sb-te__logo img { display: block; width: min(220px, 60vw); height: auto; }
.sb-policy__title { text-align: center; }
.sb-policy__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(30px, 3.6vw, 52px); margin-top: clamp(34px, 3.8vw, 54px); }
.sb-policy__card:nth-child(2) { rotate: .5deg; }
.sb-policy__head { margin-bottom: 14px; color: var(--sb-ink); font: 800 clamp(1.25rem, 1.1rem + .5vw, 1.5rem)/1.3 var(--kc-font-display); text-wrap: pretty; }
.sb-policy__card b { color: var(--sb-ink); }
.sb-policy__list { display: grid; gap: 10px; margin: 0; padding-left: 1.2em; }
.sb-policy__list li::marker { color: var(--kc-coral-600); }
.sb-policy__checks { display: flex; align-items: center; justify-content: center; gap: 12px; width: fit-content; max-width: 100%; margin: clamp(36px, 4vw, 52px) auto 0; padding: 14px 22px; border: 5px solid var(--kc-white); border-radius: 22px; background: var(--kc-coral-100); box-shadow: 0 0 0 2px rgba(14, 59, 57, .06), 0 10px 22px rgba(14, 59, 57, .12); color: var(--sb-ink); font: 700 1.0625rem/1.4 var(--kc-font-body); rotate: -1.5deg; }
.sb-policy__checks .kc-icon { flex: none; width: 28px; height: 28px; color: var(--kc-coral-700); }
@media (max-width: 899.98px) { .sb-policy__cards { grid-template-columns: minmax(0, 1fr); } }

/* ===== storybook/careers.css ===== */
/* ==========================================================================
   Storybook look: Careers ("join the Clubhouse crew").
   ========================================================================== */

/* ---------- The hero's Open Positions button ---------- */
.sb-hero__action { margin-top: clamp(20px, 2.2vw, 28px); }

/* ---------- Staff testimonials: the reviews' sticky notes, each with its line in bold ---------- */
.sb-staff__pull { margin-bottom: 4px; color: var(--sb-ink); font: 800 clamp(1.15rem, 1.05rem + .4vw, 1.375rem)/1.3 var(--kc-font-display); text-wrap: pretty; }
.sb-staff__pull::before { content: "“"; }
.sb-staff__pull::after { content: "”"; }
.sb-staff .kc-review blockquote p { font-size: .9688rem; }

/* ---------- Open positions: each posting on plain paper inside the notebook ---------- */
.sb-posting { display: grid; gap: 12px; padding: clamp(18px, 2.4vw, 30px); border-radius: 20px; background: var(--kc-white); box-shadow: 0 0 0 2px var(--sb-sky-100), 0 6px 14px rgba(14, 59, 57, .06); }
.sb-posting__h { margin-top: 8px; color: var(--sb-ink); font: 800 clamp(1.2rem, 1.1rem + .35vw, 1.375rem)/1.25 var(--kc-font-display); }
.sb-posting__lead { color: var(--sb-ink); }
.sb-posting ul { display: grid; gap: 7px; margin: 0; padding-left: 1.3em; }
.sb-posting ul ul { margin-top: 7px; }
.sb-posting li::marker { color: var(--kc-coral-600); }
.sb-posting strong { color: var(--sb-ink); }
.sb-posting__apply { margin-top: 8px; }

/* ---------- Apply Now: the application on a clipboard ---------- */
.sb-apply__title { margin-bottom: clamp(36px, 4vw, 54px); text-align: center; }
.sb-apply__privacy { text-align: center; }
/* The groups (the basics, Work History, References, the rest) are split by the forms' dashed rule. */
.sb-apply .kc-form__grid + .kc-fieldset, .sb-apply .kc-fieldset + .kc-form__grid { padding-top: clamp(24px, 3vw, 32px); border-top: 3px dashed var(--sb-sky-200); }
.sb-apply .kc-select, .sb-apply .kc-field--full .kc-select { max-width: 420px; }
.sb-thanks__action { margin: 0; }

/* ===== storybook/blog.css ===== */
/* ==========================================================================
   Storybook look: the Blog family ("the storybook shelf"): the archive, the category page and the post.
   ========================================================================== */

/* ---------- The shelf: a list's posts as book covers (sb-books) ---------- */
.sb-shelf { padding-top: clamp(48px, 5vw, 80px); }
.sb-books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(34px, 3.6vw, 48px) clamp(24px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.sb-book { --cover: var(--sb-sun-100); --spine: var(--sb-sun); --tape: var(--kc-teal-300); --pad: clamp(20px, 2.4vw, 30px);
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 32px var(--pad) 20px calc(var(--pad) + 22px); border-radius: 8px 26px 26px 8px; background: var(--cover);
  box-shadow: inset 18px 0 0 var(--spine), inset 22px 0 0 rgba(255, 255, 255, .5), 0 10px 0 rgba(14, 59, 57, .08), 0 18px 30px rgba(14, 59, 57, .12); rotate: -.6deg;
  transition: translate .25s var(--kc-ease-bounce); }
.sb-book:nth-child(even) { rotate: .7deg; }
.sb-book::before { content: ""; position: absolute; top: -13px; left: 50%; width: 110px; height: 28px; translate: -50% 0; rotate: -3deg; opacity: .92;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .3) 0 6px, transparent 6px 12px), var(--tape);
  clip-path: polygon(3% 0, 97% 0, 100% 18%, 97% 36%, 100% 54%, 97% 72%, 100% 90%, 97% 100%, 3% 100%, 0 82%, 3% 64%, 0 46%, 3% 28%, 0 10%); }
.sb-book--sky { --cover: var(--sb-sky-100); --spine: var(--sb-sky-300); --tape: var(--kc-coral-300); }
.sb-book--petal { --cover: var(--kc-coral-100); --spine: var(--kc-coral-300); --tape: var(--sb-sun-200); }
.sb-book--mint { --cover: var(--sb-mint-100); --spine: #8ED9C2; --tape: var(--kc-coral-300); }
.sb-book__title { color: var(--sb-ink); font: 800 clamp(1.3rem, 1.15rem + .5vw, 1.6rem)/1.2 var(--kc-font-display); text-wrap: balance; }
/* The title's link covers the whole cover, so a tap anywhere opens the post. */
.kc-body .sb-book__title a { color: inherit; text-decoration: none; }
.kc-body .sb-book__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.kc-body .sb-book__title a:focus-visible { outline: none; }
.sb-book:has(.sb-book__title a:focus-visible) { outline: 3px solid var(--sb-ink); outline-offset: 4px; }
@media (hover: hover) { .sb-book:hover { translate: 0 -4px; } .sb-book:hover .sb-book__title a { text-decoration: underline; text-underline-offset: .15em; } }
.sb-book__excerpt { color: var(--sb-text); font: 500 1rem/1.6 var(--kc-font-body); }
.kc-body .sb-book__more a { color: var(--kc-coral-700); font: 800 .9375rem/1.2 var(--kc-font-body); letter-spacing: .02em; text-decoration: none; }
.sb-book__date { margin-top: auto; padding-top: 12px; border-top: 2px dashed rgba(14, 59, 57, .16); color: var(--sb-ink); font: 700 .875rem/1.2 var(--kc-font-body); }
@media (max-width: 767.98px) { .sb-books { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .sb-book { transition: none; } .sb-book:hover { translate: none; } }

/* ---------- Clay page numbers ---------- */
.sb-pages { margin-top: clamp(44px, 4.6vw, 66px); }
.sb-pages ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.kc-body .sb-pages a, .sb-pages__step { display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 14px; border-radius: 999px; background: var(--kc-white); box-shadow: 0 4px 0 var(--sb-sky-200), 0 8px 16px rgba(14, 59, 57, .1); color: var(--sb-ink); font: 800 1.125rem/1 var(--kc-font-display); text-decoration: none; }
.kc-body .sb-pages a[aria-current="page"] { background: var(--kc-teal-700); box-shadow: 0 4px 0 var(--kc-teal-900); color: var(--kc-white); }
span.sb-pages__step { background: none; box-shadow: none; color: #5E6B6A; }
@media (hover: hover) { .kc-body .sb-pages a:not([aria-current]):hover { background: var(--sb-sun-100); } }

/* ---------- A post: a paper page with a ribbon bookmark ---------- */
.sb-post { padding-top: clamp(40px, 4vw, 64px); }
.sb-post__paper { display: grid; gap: 24px; }
.sb-post__ribbon { position: absolute; top: -8px; right: clamp(22px, 5vw, 56px); width: 34px; height: 88px; background: var(--kc-coral-500); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.sb-post__flyer { position: relative; justify-self: center; width: min(100%, 620px); margin: 10px 0 0; padding: 12px 12px 30px; background: var(--kc-white); box-shadow: 0 0 0 2px rgba(14, 59, 57, .06), var(--sb-shadow-lift); rotate: -1.2deg; }
.sb-post__flyer img { display: block; width: 100%; height: auto; }
.sb-post__flyer .sb-tape { top: -14px; left: 10%; }   /* off-center, clear of the paper's own tape */
.sb-post__body { color: var(--sb-text); font: 500 clamp(1.0625rem, 1rem + .25vw, 1.1875rem)/1.7 var(--kc-font-body); }
.sb-share { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sb-share li:has(> [hidden]) { display: none; }
.sb-post__nav { padding-top: 20px; border-top: 3px dashed var(--sb-sky-200); }
.kc-body .sb-post__prev { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; color: var(--sb-ink); font: 800 1.125rem/1.2 var(--kc-font-display); text-decoration: none; }
.sb-post__prev .kc-icon { width: 20px; height: 20px; color: var(--kc-coral-600); }
.sb-post__prev > span { display: grid; }
.sb-post__prev small { color: var(--kc-coral-700); font: 800 .8125rem/1.2 var(--kc-font-body); letter-spacing: .06em; text-transform: uppercase; }
@media (hover: hover) { .kc-body .sb-post__prev:hover > span { text-decoration: underline; } }

/* Print (the post's Print button): just the post, in ink on white. */
@media print {
  .kc-skip, .kc-announcement, .kc-topbar, .kc-header, .kc-footer, .kc-float-cta, .kc-age-picker, .kc-tour-cta,
  .sb-hero__hills, .sb-sun, .sb-cloud, .kc-mascot, .sb-share, .sb-post__nav, .sb-post__ribbon, .sb-tape, .kc-offsite { display: none !important; }
  .page-post .sb-hero { min-height: 0; padding: 0; background: none; }
  .page-post .sb-hero__inner { min-height: 0; }
  .page-post .sb-hero__copy { padding: 0; }
  .page-post .sb-post { padding: 0; }
  .page-post .sb-paper { box-shadow: none; rotate: none; padding: 0; }
  .page-post .sb-post__flyer { rotate: none; box-shadow: none; width: 70%; }
}

/* ===== storybook/pages.css ===== */
/* ==========================================================================
   Storybook direction: pages other than home (the 404 so far). The sky, sun, clouds and hills
   come from the hero styles in home.css.
   ========================================================================== */

/* ---------- 404: lost in the sky ---------- */
.sb-lost__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(16px, 3vw, 48px); min-height: clamp(460px, 42vw, 600px); }
.sb-lost__text { padding-bottom: clamp(70px, 9vw, 150px); text-align: center; }
.sb-lost__code { color: var(--kc-white); font: 800 clamp(6rem, 3rem + 10vw, 11rem)/1 var(--kc-font-display); -webkit-text-stroke: .1em var(--sb-ink); paint-order: stroke fill; text-shadow: 0 .07em 0 var(--sb-ink); }
.sb-lost__msg { display: inline-block; margin-top: 10px; padding: 10px 20px; border-radius: 18px; background: rgba(255, 255, 255, .8); color: var(--sb-ink); font: 700 clamp(1.25rem, 1rem + 1vw, 2rem)/1.3 var(--kc-font-body); box-shadow: 0 4px 0 rgba(143, 211, 242, .6); }
/* The joey stands beside the button, in one centered row, so it never covers it. */
.sb-lost__cta { display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin-top: 30px; }
.sb-lost__roo { position: relative; flex: none; width: clamp(70px, 6.5vw, 96px); }
.sb-lost__stage { position: relative; z-index: 1; align-self: end; justify-self: center; width: min(100%, 420px); margin-bottom: clamp(-40px, -2vw, -16px); }
.sb-lost__kid { display: block; width: 100%; height: auto;
  filter: drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff) drop-shadow(0 16px 18px rgba(14, 59, 57, .22)); }
@media (max-width: 899.98px) {
  .sb-lost__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .sb-lost__text { padding-bottom: 0; }
  .sb-lost__stage { width: min(70vw, 320px); }
  .sb-lost__roo { display: none; }
}
@media (max-width: 599.98px) { .sb-lost { padding-top: 62px; } }
/* The quick links under it (old addresses may land here). */
.sb-lost-links { padding-block: clamp(30px, 4vw, 56px) 0; }
/* On phones the ticket's joey stands on its top edge, so the links leave it room. */
@media (max-width: 599.98px) { .sb-lost-links { padding-bottom: 104px; } }
.sb-lost-links .sb-stickers { max-width: 940px; margin: 0 auto; }

/* ---------- Privacy Policy: plain paper, calm and readable ---------- */
.sb-legal__paper { width: min(100%, 780px); margin-inline: auto; display: grid; gap: 16px; }
.sb-legal__notice { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--sb-sun-50); box-shadow: inset 0 0 0 2px var(--sb-sun-100); color: var(--sb-ink); font: 500 1.0625rem/1.55 var(--kc-font-body); }
.sb-legal__notice .kc-icon { flex: none; width: 22px; height: 22px; margin-top: .15em; color: #9A5B00; }
.sb-legal__toc { padding: 16px 20px 18px; border-radius: 18px; background: var(--sb-sky-50); box-shadow: inset 0 0 0 2px var(--sb-sky-100); }
.sb-legal__toc-label { margin-bottom: 8px; color: var(--sb-ink); font: 800 .875rem/1.2 var(--kc-font-body); letter-spacing: .08em; text-transform: uppercase; }
.sb-legal__toc ol { display: grid; gap: 6px; margin: 0; padding-left: 1.4em; }
.kc-body .sb-legal__toc a { color: var(--kc-teal-800); font-weight: 700; }
.sb-legal__h { margin-top: 18px; color: var(--sb-ink); font: 800 clamp(1.4rem, 1.2rem + .7vw, 1.875rem)/1.2 var(--kc-font-display); scroll-margin-top: 110px; }
.sb-legal__todo { color: #5E6B6A; font: italic 500 1.0625rem/1.6 var(--kc-font-body); }
.sb-legal .kc-center-cards { margin-top: 6px; }
/* The policy's own text (2026-10-11): paragraphs and lists on the paper, links in teal. */
.sb-legal__paper > p, .sb-legal__paper > ul > li { color: var(--sb-text); font: 500 1.0625rem/1.65 var(--kc-font-body); }
.sb-legal__paper > ul { display: grid; gap: 8px; margin: 0; padding-left: 1.3em; }
.sb-legal__paper > ul > li::marker { color: var(--kc-coral-600); }
.kc-body .sb-legal__paper > p a, .kc-body .sb-legal__paper > ul a { color: var(--kc-teal-800); text-decoration: underline; text-underline-offset: .15em; }
.sb-legal__paper code { padding: 0 .3em; border-radius: 4px; background: var(--sb-sun-50); font-size: .9em; }
.sb-legal__paper > .sb-legal__updated { margin-top: -6px; color: #5E6B6A; font: italic 600 .9375rem/1.4 var(--kc-font-body); }