/* ============================================================
   Intellectum Kids Club — public site design system
   Source of truth: design/intellectum-redesign (Claude Design)
   Fonts: Fredoka (display), Nunito (body)
   ============================================================ */

:root {
    /* surfaces */
    --ik-cream: #FBF6EC;
    --ik-cream-2: #F5EDDD;
    --ik-cream-text: #fdf7e8;
    --ik-border: #E7DCC6;
    --ik-border-soft: #efe3cd;
    /* Deep sky surfaces (hero / footer). These were the forest greens; the token
       names are kept so every existing rule still resolves. Cream text on them
       measures 13.74 / 9.32 / 14.12 — the greens sat at 13.97. */
    --ik-forest: #0d2b3d;
    --ik-forest-2: #164761;
    --ik-forest-hero: #0e2937;
    /* brand — the FILL. White text on it is 4.53, where the old #097fab was 2.90,
       so this is the brightest blue that can carry a white label. */
    --ik-green: #097fab;
    /* green-deep is the *text* step — it has to clear 4.5:1 on white, --ik-cream,
       --ik-cream-2, --ik-tan-bg and the tint below. #13759F (--ik-sky-text) was
       tried first and missed on --ik-cream-2 at 4.43; this clears all five at
       4.81-5.73. The names stay "green" because ~26 rules and several page
       stylesheets read them. */
    --ik-green-deep: #0a6e93;
    --ik-green-dark: #0d5a79;
    /* Mint is decorative AND carries the footer email and credit links on the dark
       surface, so it is solved there: 8.80 on --ik-forest. */
    --ik-mint: #7fd4f0;
    --ik-mint-bg: #e0f4fe;
    --ik-blue: #22bbf4;
    /* Sky stays the decorative brand blue; buttons carrying white text use the
       deeper step, the lightest shade of the same hue that reaches 4.5:1. */
    --ik-blue-deep: #097fab;
    --ik-coral: #ff6969;
    /* --ik-red is solved against white (5.26:1) and against --ik-pink-bg (4.57:1),
       the tint it is most often paired with on placeholders and error states. */
    --ik-red: #ba383c;
    --ik-pink-bg: #ffe0e0;
    --ik-purple: #7B5BA6;
    --ik-lavender-bg: #f1ebf8;
    --ik-gold: #ffd479;
    --ik-tan-bg: #f6ead4;
    /* Text-safe counterparts for the accent hues. The display colours above are mixed
       for fills and large shapes; at badge and label sizes they fell to 2.7-3.3:1 on
       our light surfaces. These are the same hues walked down to >=4.5:1 on white,
       --ik-cream-2 and --ik-tan-bg, so small text can use the accent without failing.
       Use --ik-*-text for type; keep the plain token for backgrounds and icons. */
    --ik-gold-text: #935F16;
    --ik-sky-text: #13759F;
    /* ink — the two neutrals below are solved against the cream surfaces they sit on,
       not against white, because cream is the darker of the two page backgrounds:
       --ik-muted 4.5:1 on --ik-cream-2, --ik-gray 4.5:1 on --ik-cream. */
    --ik-ink: #1E3A5F;
    --ik-muted: #596e86;
    --ik-gray: #5f738b;
    /* type */
    --ik-display: Fredoka, sans-serif;
    --ik-body: Nunito, system-ui, sans-serif;
    /* Display scale — one step per role. Section headings had drifted to three
       different ceilings (42/44/46px) on three different vw slopes, so the same
       role rendered at a different size depending on which section you were in. */
    --ik-fs-h1: clamp(29px, 4.7vw, 52px);
    --ik-fs-h2: clamp(28px, 3.8vw, 44px);
    --ik-fs-h3: clamp(22px, 2.6vw, 30px);
    --ik-lh-h1: 1.16;
    --ik-lh-h2: 1.12;
    --ik-lh-h3: 1.15;
    /* focus — one ring for the whole public site (see :focus-visible below) */
    --ik-focus: #0b6bd6;
    --ik-focus-halo: rgba(11, 107, 214, .28);
}

* { box-sizing: border-box; }

body.ik-public {
    margin: 0;
    font-family: var(--ik-body);
    color: var(--ik-ink);
    background: var(--ik-cream);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.ik-public ::selection { background: var(--ik-pink-bg); color: var(--ik-ink); }

/* Keyboard focus. The site had no focus styling at all, so a keyboard or
   switch user had no idea where they were. :focus-visible keeps it off the
   mouse path. The ring is drawn outside the box with a soft halo so it stays
   legible on cream, white, mint and the dark forest surfaces alike. */
body.ik-public :focus-visible {
    outline: 3px solid var(--ik-focus);
    outline-offset: 3px;
    border-radius: 6px;
    box-shadow: 0 0 0 6px var(--ik-focus-halo);
}
/* On the dark hero/footer the blue would disappear — go light there instead. */
body.ik-public .ik-header :focus-visible,
body.ik-public .ik-hero :focus-visible,
body.ik-public .ik-footer :focus-visible {
    outline-color: #fff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .3);
}
body.ik-public :focus:not(:focus-visible) { outline: none; }

/* Skip link — off-screen until focused, then a real target above the sticky header. */
.ik-skip-link {
    position: absolute;
    left: 16px;
    top: 0;
    z-index: 200;
    transform: translateY(-120%);
    display: inline-block;
    padding: 14px 20px;
    background: var(--ik-forest);
    color: var(--ik-cream-text);
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 10px 26px -12px rgba(15, 44, 36, .7);
    transition: transform .18s cubic-bezier(.22, 1, .36, 1);
}
.ik-skip-link:focus { transform: translateY(0); }
/* main is a fragment target, not an interactive control — no ring when the skip
   link hands it focus. Keyboard focus on real controls is unaffected. */
main#main:focus { outline: none; }

/* Pages still on the older layout share this fixed header but have no hero to sit
   under it, so they need its height back. Matches .ik-header.is-solid, which is what
   those pages always render (no ViewData["HasHero"]). */
body.ik-chrome { padding-top: 68px; }

@keyframes ik-floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ============ HEADER / NAV ============ */
.ik-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 70;
    padding: 13px clamp(16px, 4vw, 40px);
    background: transparent;
    /* padding deliberately not transitioned: it is a layout property, and animating
       it on a fixed header runs layout on every frame of the scroll-state change.
       The 13px -> 9px step still happens, it just lands in one frame — which at
       4px is below the threshold where anyone reads it as a jump. */
    transition: background .28s, box-shadow .28s;
}
.ik-header.is-solid {
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 6px 24px -16px rgba(30, 58, 95, .6);
    backdrop-filter: blur(8px);
    padding: 9px clamp(16px, 4vw, 40px);
}
.ik-header-in {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ik-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    cursor: pointer;
    flex: none;
    transition: opacity .18s, transform .18s;
}
.ik-brand:hover { opacity: .82; transform: translateY(-1px); }
.ik-brand-tile {
    width: 42px; height: 42px;
    border-radius: 13px;
    display: grid; place-items: center;
    background: linear-gradient(150deg, var(--ik-green), var(--ik-green-deep));
    box-shadow: 0 6px 16px -6px rgba(9, 127, 171, .7);
    flex: none;
}
/* real logo (transparent mascot emblem) — no tile, the artwork floats as-is */
.ik-brand-tile--img {
    width: 50px;
    height: 50px;
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    padding: 0;
}
.ik-brand-tile--img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .25));
}
.ik-brand-text { line-height: 1.05; }
.ik-brand-name {
    display: block;
    font-family: var(--ik-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--ik-cream-text);
    letter-spacing: .2px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
    transition: color .28s;
}
.ik-brand-sub {
    display: block;
    font-family: var(--ik-body);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--ik-mint);
    transition: color .28s;
}
.ik-header.is-solid .ik-brand-name { color: var(--ik-ink); text-shadow: none; }
.ik-header.is-solid .ik-brand-sub { color: var(--ik-green-deep); }

.ik-nav { display: flex; align-items: center; gap: 2px; }
.ik-navlink {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--ik-cream-text);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 9px 13px;
    border-radius: 10px;
    transition: background .18s, color .18s;
}
.ik-navlink:hover { background: rgba(127, 150, 170, .16); }
.ik-navlink.is-active { background: rgba(255, 255, 255, .14); }
.ik-header.is-solid .ik-navlink { color: var(--ik-ink); }
.ik-header.is-solid .ik-navlink:hover { background: #eef3ef; }
.ik-header.is-solid .ik-navlink.is-active { background: #eef3ef; }

/* dropdowns (courses + language) */
.ik-dd { position: relative; }
.ik-dd-chev { transition: transform .25s; }
.ik-dd.open .ik-dd-chev { transform: rotate(180deg); }
.ik-dd-menu {
    position: absolute;
    top: calc(100% + 12px);
    background: #fff;
    border: 1px solid var(--ik-border-soft);
    border-radius: 20px;
    box-shadow: 0 28px 60px -22px rgba(60, 40, 20, .5);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 90;
}
.ik-dd.open .ik-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.ik-dd-menu--center { left: 50%; width: 320px; transform: translateX(-50%) translateY(8px); }
.ik-dd.open .ik-dd-menu--center { transform: translateX(-50%) translateY(0); }
.ik-dd-menu--right { right: 0; width: 170px; border-radius: 16px; padding: 8px; }

.ik-dd-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 12px;
    border-radius: 14px;
    text-decoration: none;
    transition: background .15s;
}
.ik-dd-item--mint:hover { background: var(--ik-mint-bg); }
.ik-dd-item--lav:hover { background: var(--ik-lavender-bg); }
.ik-dd-item--tan:hover { background: var(--ik-tan-bg); }
.ik-dd-item--gray:hover { background: #eef0f4; }
.ik-dd-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    flex: none;
    display: grid; place-items: center;
}
.ik-dd-item-t { display: block; font-family: var(--ik-display); font-weight: 600; font-size: 15px; color: var(--ik-ink); }
.ik-dd-item-s { display: block; font-family: var(--ik-body); font-weight: 600; font-size: 12.5px; color: var(--ik-gray); }
.ik-dd-sep { height: 1px; background: #f1e8d6; margin: 8px 6px; }
.ik-dd-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px;
    border-radius: 12px;
    text-decoration: none;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--ik-green-deep);
    transition: background .15s;
}
.ik-dd-all:hover { background: var(--ik-mint-bg); }

/* language button */
.ik-langbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--ik-cream-text);
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .5);
    cursor: pointer;
    padding: 7px 12px;
    border-radius: 999px;
    transition: border-color .2s, color .2s;
}
.ik-header.is-solid .ik-langbtn { color: var(--ik-ink); border-color: #d6dbe2; }

/* ---- signed-in account menu ----
   Follows .ik-langbtn so it reads as part of the same control group, and inherits the
   same transparent-over-hero / solid-on-scroll treatment. */
.ik-userbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--ik-cream-text);
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .5);
    cursor: pointer;
    padding: 5px 12px 5px 6px;
    border-radius: 999px;
    transition: border-color .2s, color .2s;
    max-width: 190px;
}
.ik-header.is-solid .ik-userbtn { color: var(--ik-ink); border-color: #d6dbe2; }
.ik-userbtn:hover { border-color: var(--ik-green); }
.ik-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ik-user-avatar {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ik-mint-bg);
}
.ik-user-avatar--initial {
    display: grid;
    place-items: center;
    font-family: var(--ik-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--ik-green-deep);
}
.ik-user-avatar--lg { width: 40px; height: 40px; font-size: 17px; }

.ik-user-menu { width: 248px; padding: 8px; }
.ik-user-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 12px;
    min-width: 0;
}
.ik-user-head-text { display: flex; flex-direction: column; min-width: 0; }
.ik-user-head-name {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--ik-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ik-user-head-sub {
    font-family: var(--ik-body);
    font-weight: 600;
    font-size: 12px;
    color: var(--ik-gray);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ik-dd-label {
    display: block;
    padding: 6px 12px 2px;
    font-family: var(--ik-body);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ik-gray);
}
/* The menu's items are plain text links, unlike the courses menu whose items carry
   their own title/subtitle spans — so they need their own type here. */
.ik-user-menu .ik-dd-item {
    padding: 9px 12px;
    font-family: var(--ik-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--ik-ink);
    border-radius: 11px;
}
.ik-user-menu .ik-dd-item:hover { background: var(--ik-mint-bg); }
.ik-user-menu .ik-dd-sep { margin: 6px 4px; }
.ik-user-logout { margin: 0; }
.ik-user-menu .ik-dd-item--danger {
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    color: var(--ik-red);
}
.ik-user-menu .ik-dd-item--danger:hover { background: var(--ik-pink-bg); }
.ik-mobile-logout {
    width: 100%;
    border: none;
    cursor: pointer;
    font: inherit;
}
.ik-lang-opt {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 11px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--ik-ink);
}
.ik-lang-opt + .ik-lang-opt { margin-top: 4px; }
.ik-lang-opt.is-active { background: var(--ik-mint-bg); }

.ik-nav-right { display: flex; align-items: center; gap: 10px; flex: none; }

.ik-btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--ik-blue-deep);
    color: #fff;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 15px;
    padding: 10px 20px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 8px 20px -8px rgba(34, 187, 244, .8);
    transition: transform .18s, background .18s, box-shadow .18s;
}
.ik-btn-cta:hover {
    background: var(--ik-green-deep);
    box-shadow: 0 10px 24px -8px rgba(10, 110, 147, .55);
    transform: translateY(-2px);
    color: #fff;
}
.ik-btn-cta--lg {
    gap: 11px;
    font-size: clamp(17px, 1.7vw, 20px);
    padding: 17px 34px;
    box-shadow: 0 16px 34px -12px rgba(34, 187, 244, .85);
}
.ik-btn-cta--lg:hover { box-shadow: 0 18px 38px -12px rgba(10, 110, 147, .6); transform: translateY(-3px); }

.ik-burger {
    display: none;
    width: 44px; height: 44px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    background: rgba(255, 255, 255, .16);
    place-items: center;
    flex: none;
}
.ik-header.is-solid .ik-burger { background: #eef3ef; }
.ik-burger svg path { stroke: var(--ik-cream-text); }
.ik-header.is-solid .ik-burger svg path { stroke: var(--ik-ink); }

/* mobile menu */
.ik-mobile-menu {
    display: none;
    max-width: 1280px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--ik-border-soft);
    border-radius: 20px;
    box-shadow: 0 28px 60px -22px rgba(60, 40, 20, .5);
    /* Vertical padding and borders are collapsed shut, not just max-height: max-height
       clips the content box only, so a closed menu was still adding 26px to the header
       on every phone. */
    padding: 0 12px;
    border-block-width: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .32s ease, opacity .24s ease, margin .24s ease,
                padding .32s ease, border-width .32s ease;
}
/* max-height rather than the grid-template-rows technique: this panel's own 12px padding
   and 1px border cannot collapse inside a 0fr row, so the closed state keeps a visible
   sliver. min(80vh, 900px) replaces the old 640px magic number, which silently clipped
   once the nav grew. The transition animates layout, but only on a burger tap. */
.ik-mobile-menu.open {
    max-height: min(80vh, 900px);
    overflow-y: auto;
    opacity: 1;
    margin-top: 14px;
    padding: 12px;
    border-block-width: 1px;
}
.ik-mobile-link {
    display: block;
    padding: 13px 14px;
    border-radius: 12px;
    text-decoration: none;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--ik-ink);
}
.ik-mobile-link:hover { background: #f3ecdd; }
.ik-mobile-link.is-active { color: var(--ik-green-deep); background: var(--ik-mint-bg); }
.ik-mobile-actions { display: flex; gap: 10px; padding: 6px 6px 4px; }
.ik-mobile-login {
    flex: 1;
    text-align: center;
    padding: 12px;
    border-radius: 12px;
    text-decoration: none;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--ik-ink);
    border: 2px solid var(--ik-border);
}
.ik-mobile-register {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 12px;
    border: none;
    background: var(--ik-blue-deep);
    color: #fff;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
}

@media (max-width: 1024px) {
    .ik-nav { display: none; }
    .ik-burger { display: grid; }
    .ik-mobile-menu { display: block; }
    .ik-nav-right .ik-dd--lang,
    .ik-nav-right .ik-login,
    .ik-nav-right .ik-btn-cta--register { display: none; }
}

/* A signed-in parent's name pushed the burger off the right edge of a 375px screen.
   Drop to avatar + caret; the full name is still the first thing in the open menu. */
@media (max-width: 560px) {
    .ik-userbtn .ik-user-name { display: none; }
}

/* ============ HERO ============ */
.ik-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100svh;
    background: var(--ik-forest-hero);
    overflow: hidden;
}
.ik-hero-text {
    position: relative;
    z-index: 3;
    flex: none;
    width: min(780px, 94%);
    padding: clamp(100px, 15vh, 150px) clamp(24px, 6vw, 84px) clamp(72px, 9vh, 104px);
}
.ik-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: clamp(13px, 1.5vw, 15px);
    letter-spacing: .4px;
    color: var(--ik-mint);
    background: rgba(9, 127, 171, .16);
    border: 1.5px solid rgba(127, 212, 240, .4);
    padding: 7px 15px;
    border-radius: 999px;
    margin-bottom: 30px;
}
.ik-hero h1 {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: var(--ik-fs-h1);
    line-height: var(--ik-lh-h1);
    letter-spacing: -.5px;
    color: var(--ik-cream-text);
    margin: 0 0 28px;
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.ik-hero-sub {
    font-family: var(--ik-body);
    font-weight: 500;
    font-size: clamp(16px, 2vw, 21px);
    line-height: 1.65;
    color: #DCE9F5;
    margin: 0 0 40px;
    max-width: 54ch;
    text-wrap: pretty;
}
.ik-hero-micro {
    font-family: var(--ik-body);
    font-weight: 600;
    font-size: 14px;
    color: #A6C6DC;
    margin: 24px 0 0;
}
.ik-hero-media {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    background: var(--ik-forest-hero);
}
.ik-hero-media img,
.ik-hero-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;
}
.ik-hero-media video { opacity: 0; }
.ik-hero-idle { transition: opacity .9s ease; }
.ik-hero-intro { transition: opacity .7s ease; }
.ik-hero-grad {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(13, 38, 30, .93) 0%, rgba(13, 38, 30, .86) 34%, rgba(13, 38, 30, .46) 58%, rgba(13, 38, 30, 0) 82%);
}
.ik-hero-rail {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 14px;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(180deg, #e6b97f 0%, #c98a4b 45%, #a86a30 100%);
    box-shadow: 0 -3px 10px rgba(0, 0, 0, .28), inset 0 2px 0 rgba(255, 255, 255, .32);
}

@media (max-width: 760px) {
    .ik-hero { height: auto; }
    .ik-hero-text {
        width: 100%;
        order: 1;
        padding-top: clamp(96px, 16vh, 132px);
        background: linear-gradient(160deg, var(--ik-forest-2), var(--ik-forest));
    }
    /* Below this breakpoint the hero stops being a full-bleed backdrop: the media block
       would drop below the copy (order: 2), where neither the video nor the poster is
       behind anything — they read as a stray block pushed down the page. The hero is the
       green gradient and the words on phones. public.js also skips the two mp4s at this
       width, so nothing here is fetched for a hidden element except the poster itself. */
    .ik-hero-media { display: none; }
    .ik-hero-grad { display: none; }
}

/* ============ SHARED SECTION SHELLS ============ */
.ik-section { padding: clamp(64px, 9vw, 108px) clamp(22px, 5vw, 56px); }
.ik-section--cream { background: var(--ik-cream); }
.ik-section--cream2 { background: var(--ik-cream-2); }
.ik-section-in { max-width: 1120px; margin: 0 auto; }
.ik-h2 {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: var(--ik-fs-h2);
    line-height: var(--ik-lh-h2);
    letter-spacing: -.5px;
    color: var(--ik-ink);
    margin: 0;
    text-wrap: balance;
}

/* "user to supply" placeholder chips (pre-launch only) */
.ik-supply {
    display: inline-block;
    background: var(--ik-pink-bg);
    color: var(--ik-red);
    border: 2px dashed var(--ik-coral);
    border-radius: 10px;
    padding: 0 .26em;
}

/* ============ STAT BAND ============ */
.ik-stats {
    background: var(--ik-cream);
    padding: clamp(40px, 6vw, 68px) clamp(18px, 4vw, 44px);
}
.ik-stats-in {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
}
.ik-stat {
    position: relative;
    text-align: center;
    padding: 28px 14px 22px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--ik-border-soft);
    box-shadow: 0 16px 34px -26px rgba(80, 55, 20, .55);
    overflow: hidden;
}
.ik-stat::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, #e0b072, #b9793f);
}
.ik-stat-num {
    font-family: var(--ik-display);
    font-weight: 700;
    font-size: clamp(32px, 4.2vw, 48px);
    line-height: 1;
    /* --ik-green is 2.9:1 on white — under the 3:1 floor even at display size. */
    color: var(--ik-green-deep);
    margin-bottom: 10px;
}
.ik-stat-num--ink { color: var(--ik-ink); }
.ik-stat-num--deep { color: var(--ik-green-deep); }
.ik-stat-label {
    font-family: var(--ik-body);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--ik-muted);
    letter-spacing: .3px;
}

/* ============ WEDGE (abacus difference) ============ */
.ik-wedge {
    position: relative;
    background: radial-gradient(120% 120% at 80% 0%, var(--ik-forest-2) 0%, var(--ik-forest) 60%);
    padding: clamp(64px, 9vw, 108px) clamp(22px, 5vw, 56px);
    overflow: hidden;
}
.ik-wedge-in {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(36px, 5vw, 64px);
}
.ik-wedge-copy { flex: 1 1 440px; min-width: 280px; }
.ik-eyebrow-coral {
    display: inline-block;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ff8d8d;
    margin-bottom: 18px;
}
.ik-wedge h2 {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: var(--ik-fs-h2);
    line-height: var(--ik-lh-h2);
    letter-spacing: -.5px;
    color: var(--ik-cream-text);
    margin: 0 0 22px;
    text-wrap: balance;
}
.ik-wedge p {
    font-family: var(--ik-body);
    font-weight: 500;
    font-size: clamp(16px, 1.9vw, 19px);
    line-height: 1.6;
    color: #D2E1EE;
    margin: 0;
    max-width: 46ch;
    text-wrap: pretty;
}
.ik-wedge-art { flex: 1 1 320px; min-width: 260px; display: flex; justify-content: center; }
/* Was 380px. With ten reasons below, the top row is a statement rather than the
   whole section: at 380 the illustration was 309px tall against ~180px of copy,
   and the 129px of slack read as a hole under the lead. */
.ik-wedge-art-in { position: relative; width: min(310px, 100%); }
.ik-wedge-glow {
    position: absolute;
    inset: -8% -6%;
    background: radial-gradient(circle, rgba(255, 105, 105, .28), transparent 68%);
    filter: blur(8px);
}
.ik-wedge-svg { position: relative; display: block; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .4)); }
@media (prefers-reduced-motion: no-preference) {
    /* The abacus beads are gone with the illustration they belonged to. What drifts
       now is the two loose glyphs beside the screen — one moment, not a scattering
       of them, and it stays inside the reduced-motion gate it was already under. */
    .ik-float-glyph { animation: ik-glyphFloat 5.5s ease-in-out infinite; }
    .ik-float-glyph--slow { animation-duration: 7s; animation-delay: -2.5s; }
    @keyframes ik-glyphFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
}

/* --- Why Intellectum: ten reasons, chunked into three labelled groups ---
   A flat list of ten is a wall; three groups of 3/4/3 is three things to hold.
   Every colour below is checked against the LIGHTER end of the section's radial
   gradient (--ik-forest-2 #164761), not the dark end, because that is the worst
   case: gold 7.09, mint 5.97, coral 5.12, body text 7.47. The old
   .ik-eyebrow-coral #ff8d8d measured 4.48 there and is not reused. */
.ik-reasons {
    max-width: 1120px;
    margin: clamp(30px, 3.6vw, 50px) auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: clamp(26px, 3.4vw, 44px);
}
.ik-reason-label {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: -.1px;
    margin: 0 0 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.ik-reason-col--gold  .ik-reason-label { color: var(--ik-gold); }
.ik-reason-col--mint  .ik-reason-label { color: var(--ik-mint); }
.ik-reason-col--coral .ik-reason-label { color: #ffa0a0; }
.ik-reason-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}
.ik-reason-list li {
    position: relative;
    padding-left: 19px;
    font-family: var(--ik-body);
    font-weight: 500;
    font-size: clamp(15px, 1.55vw, 16.5px);
    line-height: 1.55;
    color: #D2E1EE;
    text-wrap: pretty;
}
/* A small rotated square, not a tenth repeated checkmark — list grammar, not an
   icon set pretending each reason has its own symbol. */
.ik-reason-list li::before {
    content: "";
    position: absolute;
    left: 1px;
    top: .58em;
    width: 7px;
    height: 7px;
    border-radius: 1.5px;
    transform: rotate(45deg);
}
.ik-reason-col--gold  .ik-reason-list li::before { background: var(--ik-gold); }
.ik-reason-col--mint  .ik-reason-list li::before { background: var(--ik-mint); }
.ik-reason-col--coral .ik-reason-list li::before { background: #ffa0a0; }
.ik-reason-list b {
    font-weight: 800;
    color: var(--ik-cream-text);
}

/* ============ FLASH MESSAGES ============ */
/* Contrast measured against each tint, not assumed: success 5.06, warning 4.54,
   error 4.57 — all clear of 4.5:1. */
.ik-flash-stack {
    position: fixed;
    top: 84px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 70;
    width: min(660px, calc(100vw - 28px));
    display: grid;
    gap: 10px;
    pointer-events: none;
}
.ik-flash {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 14px 14px 18px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-family: var(--ik-body);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
    text-wrap: pretty;
    box-shadow: 0 18px 40px -18px rgba(20, 35, 55, .45);
}
.ik-flash-dot {
    flex: none;
    width: 9px; height: 9px;
    margin-top: .45em;
    border-radius: 50%;
    background: currentColor;
}
.ik-flash-text { flex: 1 1 auto; }
.ik-flash-close {
    flex: none;
    width: 28px; height: 28px;
    margin: -3px -2px 0 0;
    display: grid; place-items: center;
    font-size: 21px;
    line-height: 1;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    opacity: .7;
}
.ik-flash-close:hover { opacity: 1; background: rgba(0, 0, 0, .07); }
.ik-flash--success { background: var(--ik-mint-bg); color: var(--ik-green-deep); border-color: #b9e4f7; }
.ik-flash--info    { background: var(--ik-lavender-bg); color: var(--ik-purple); border-color: #ddd0ee; }
.ik-flash--warning { background: var(--ik-tan-bg);  color: var(--ik-gold-text);  border-color: #e6cfa2; }
.ik-flash--error   { background: var(--ik-pink-bg); color: var(--ik-red);        border-color: #f3bcbc; }
@media (max-width: 760px) {
    .ik-flash-stack { top: 74px; }
}

/* ============ WHAT WE TEACH (eight directions) ============ */
/* Eight subject cards, each listing what it covers. Four across at desktop so the
   grid tiles 4x2 exactly; the topic lists carry the information, so the cards are
   allowed to differ in height rather than being padded to match. */
.ik-dir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
    gap: 18px;
    /* stretch, not start (changed 2026-08-28). The earlier note here argued the
       opposite: that padding a three-topic card out to the height of a five-topic
       one manufactures empty space inside it. That is still true of the space —
       it lost to the ragged bottom edge. With auto-fit rows of four, eight cards
       at eight different heights read as unfinished rather than as informative,
       and the empty space inside a short card costs less than that.
       Revert this one line to `start` to get the old behaviour back.
       The 228px track (was 240px) keeps 4-across at the 1120px container while
       holding four columns a little further down the viewport range. */
    align-items: stretch;
}
/* Title-first (changed 2026-08-28). The icon used to be a 46px block stacked above
   the heading, so every card opened with a coloured square rather than with the
   subject name. It now sits beside the title at 34px and the topic list spans the
   full width beneath both, separated by a rule — so the card reads
   subject, then what it covers. */
.ik-dir {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon head"
        "topics topics";
    gap: 10px 12px;
    padding: clamp(20px, 2.2vw, 26px);
    border-radius: 22px;
    background: #fff;
    border: 2px solid var(--ik-border);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ik-dir-icon {
    grid-area: icon;
    width: 34px; height: 34px;
    border-radius: 10px;
    display: grid; place-items: center;
    align-self: center;
    flex: none;
}
/* The markup ships width/height 26 on each SVG; the tile is smaller now. */
.ik-dir-icon svg { width: 19px; height: 19px; }
.ik-dir h3 {
    grid-area: head;
    align-self: center;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: clamp(19px, 2vw, 22px);
    line-height: 1.2;
    color: var(--ik-ink);
    margin: 0;
}
.ik-dir h3 a { color: inherit; text-decoration: none; }
.ik-dir-topics {
    grid-area: topics;
    list-style: none;
    margin: 0;
    /* The rule is what makes the title read as a title rather than as the first
       line of the list. */
    padding: 11px 0 0;
    border-top: 1px solid var(--ik-border);
    display: grid;
    gap: 5px;
}
.ik-dir-topics li {
    position: relative;
    padding-left: 15px;
    font-family: var(--ik-body);
    font-weight: 500;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--ik-gray);
    text-wrap: pretty;
}
.ik-dir-topics li::before {
    content: "";
    position: absolute;
    left: 0; top: .52em;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--ik-green-deep);
    opacity: .55;
}

/* Every card is a target, so every card gets the same affordance. */
.ik-dir:hover {
    transform: translateY(-4px);
    border-color: var(--ik-green);
    box-shadow: 0 20px 40px -20px rgba(9, 127, 171, .55);
}
.ik-dir h3 a::after { content: ''; position: absolute; inset: 0; border-radius: 22px; }
.ik-dir:has(h3 a:focus-visible) { outline: 3px solid var(--ik-green); outline-offset: 3px; }
.ik-dir h3 a:focus-visible { outline: none; }

/* Math keeps the flagship fill it had as a card, without the badge. */
.ik-dir--flagship {
    background: linear-gradient(160deg, var(--ik-green), var(--ik-green-dark));
    border-color: transparent;
    box-shadow: 0 22px 44px -22px rgba(9, 127, 171, .8);
}
.ik-dir--flagship .ik-dir-icon { background: rgba(255, 255, 255, .16) !important; }
.ik-dir--flagship h3, .ik-dir--flagship h3 a { color: #fff; }
.ik-dir--flagship .ik-dir-topics { border-top-color: rgba(255, 255, 255, .28); }
.ik-dir--flagship .ik-dir-topics li { color: #dff4fb; }
.ik-dir--flagship .ik-dir-topics li::before { background: var(--ik-gold); opacity: 1; }
.ik-dir--flagship:hover {
    border-color: transparent;
    box-shadow: 0 26px 50px -20px rgba(9, 127, 171, .95);
}

/* The two format links under the grid are real links, unlike the plain chips. */
.ik-chips li a {
    color: var(--ik-green-deep);
    text-decoration: none;
    font-weight: 700;
}
.ik-chips li:has(a) { transition: border-color .18s, box-shadow .18s; }
.ik-chips li:has(a):hover {
    border-color: var(--ik-green);
    box-shadow: 0 10px 22px -14px rgba(9, 127, 171, .7);
}

/* After-school hero price line — the first number a parent looks for. */
.ik-svc-from {
    margin: 14px 0 0;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.25;
    color: var(--ik-gold);
}

/* ============ PROGRAMS ============ */
.ik-programs-head { text-align: center; margin-bottom: clamp(36px, 5vw, 52px); }
/* Six directions now, not four. The flagship used to span two rows and the tech
   card two columns, which existed only to close the gaps a four-card grid left;
   with six cards the grid tiles 3x2 on its own and both spans were removed. */
.ik-programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    align-items: stretch;
}
.ik-card-flagship {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(26px, 3vw, 38px);
    border-radius: 26px;
    background: linear-gradient(160deg, var(--ik-green), var(--ik-green-dark));
    color: #fff;
    box-shadow: 0 22px 44px -22px rgba(9, 127, 171, .8);
    position: relative;
    overflow: hidden;
}
/* The content wrapper used to be position:relative just to paint above this bubble,
   which also made it the containing block for the card's stretched link overlay — so
   the overlay stopped at the wrapper and the card's padding was not clickable. The
   bubble is pushed behind the content and taken out of hit-testing instead. */
.ik-flagship-body { position: static; z-index: 1; }
.ik-card-flagship-bubble {
    position: absolute;
    pointer-events: none;
    top: -30px; right: -20px;
    width: 150px; height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}
.ik-flagship-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    background: var(--ik-coral);
    color: var(--ik-forest);
    padding: 6px 13px;
    border-radius: 999px;
    margin-bottom: 20px;
}
.ik-flagship-icon {
    width: 60px; height: 60px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .16);
    display: grid; place-items: center;
    margin-bottom: 18px;
}
.ik-card-flagship h3 {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: var(--ik-fs-h3);
    line-height: var(--ik-lh-h3);
    margin: 0 0 10px;
}
.ik-card-flagship p {
    font-family: var(--ik-body);
    font-weight: 500;
    font-size: clamp(15px, 1.7vw, 18px);
    line-height: 1.55;
    color: #e6fff6;
    margin: 0;
    text-wrap: pretty;
}
/* The flagship holds TWO targets — the title link and the trial-class button — so it
   cannot take the plain stretched overlay the single-link cards use. The overlay goes
   under the CTA instead: the card is one big link to the subject page, and the button
   still wins the clicks that land on it. */
.ik-card-flagship { position: relative; transition: transform .2s, box-shadow .2s; }
.ik-card-flagship:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -20px rgba(9, 127, 171, .95); }
.ik-card-flagship h3 a::after { content: ''; position: absolute; inset: 0; border-radius: 26px; z-index: 1; }
.ik-card-flagship:has(h3 a:focus-visible) { outline: 3px solid #fff; outline-offset: 3px; }
.ik-card-flagship h3 a:focus-visible { outline: none; }
.ik-flagship-cta {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--ik-green-dark);
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 15px;
    padding: 12px 22px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .18s;
}
.ik-flagship-cta:hover { transform: translateY(-2px); }

.ik-card {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: clamp(22px, 2.4vw, 30px);
    border-radius: 22px;
    background: #fff;
    border: 2px solid var(--ik-border);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ik-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(30, 58, 95, .55); }
/* The card lifts on hover, so it reads as one target — but only the 23px title
   link actually was one, which on a phone is a card that looks tappable and is
   not (and misses WCAG 2.5.8's 24px floor). The overlay makes the whole card the
   target. Safe here because each of these cards holds exactly one link; the
   .ik-card instances on Contact and Programs contain none. */
.ik-card { position: relative; }
.ik-card h3 a::after { content: ''; position: absolute; inset: 0; border-radius: 22px; }
/* With the hit area moved to the card, the focus ring has to move with it or the
   keyboard user gets a ring around a text fragment inside a much larger control. */
.ik-card:has(h3 a:focus-visible) { outline: 3px solid var(--ik-green); outline-offset: 3px; }
.ik-card h3 a:focus-visible { outline: none; }
.ik-card--lang:hover  { border-color: #cf9a44;          box-shadow: 0 20px 40px -20px rgba(147, 95, 22, .55); }
.ik-card--arts:hover  { border-color: var(--ik-purple); box-shadow: 0 20px 40px -20px rgba(123, 91, 166, .6); }
.ik-card--after:hover { border-color: #cf9a44;          box-shadow: 0 20px 40px -20px rgba(147, 95, 22, .55); }
.ik-card--camps:hover { border-color: var(--ik-red);    box-shadow: 0 20px 40px -20px rgba(186, 56, 60, .5); }
.ik-card--tech:hover  { border-color: var(--ik-green);  box-shadow: 0 20px 40px -20px rgba(9, 127, 171, .6); }
.ik-card-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: grid; place-items: center;
    flex: none;
}
.ik-card h3 {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: clamp(19px, 2.1vw, 23px);
    margin: 0;
    color: var(--ik-ink);
}
/* program-card titles double as links to the service pages */
.ik-card h3 a, .ik-card-flagship h3 a { color: inherit; text-decoration: none; }
.ik-card h3 a:hover, .ik-card-flagship h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ik-card p {
    font-family: var(--ik-body);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ik-muted);
    margin: 0;
    text-wrap: pretty;
}
.ik-card--tech .ik-card-row { display: flex; align-items: center; gap: 16px; }
.ik-card--tech h3 { margin-bottom: 4px; }

@media (max-width: 600px) {
    .ik-card--tech { grid-column: auto; }
    .ik-card-flagship { grid-row: auto; }
}


/* --- Directions without a detail page yet --- */
.ik-more {
    margin-top: clamp(26px, 3.2vw, 38px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
}
.ik-more-label {
    font-family: var(--ik-body);
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: .3px;
    color: var(--ik-muted);
}
.ik-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
}
/* Deliberately not card-shaped and not hoverable: these do not link anywhere,
   and anything that looks clickable here would be a dead end. */
.ik-chips li {
    font-family: var(--ik-body);
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1;
    padding: 9px 15px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--ik-border);
    color: var(--ik-ink);
}

.ik-more-cta {
    margin-top: clamp(22px, 2.8vw, 32px);
    display: flex;
    justify-content: center;
}
/* The ghost button is built for the dark hero; on cream it needs ink, not white.
   .ik-btn-ghost is declared several hundred lines below this, so a single-class
   override would lose the cascade and render white-on-cream — invisible. Both
   classes together outrank it regardless of order. */
.ik-btn-ghost.ik-btn-ghost--ink {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ik-green-deep);
    background: transparent;
    border-color: var(--ik-green-deep);
}
.ik-btn-ghost.ik-btn-ghost--ink:hover {
    background: var(--ik-green-deep);
    color: #fff;
    border-color: var(--ik-green-deep);
}

/* "EN / RU / UKR" is three times the glyph count of the numbers beside it, so it
   cannot take the same display size without overflowing its card. */
.ik-stat-num--tri {
    font-size: clamp(21px, 2.5vw, 30px);
    letter-spacing: -.3px;
    padding-top: .32em;
    padding-bottom: .3em;
}

/* ============ FAQ ============ */
.ik-faq-in { max-width: 780px; margin: 0 auto; }
.ik-faq-in .ik-h2 { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.ik-faq-list { display: flex; flex-direction: column; gap: 13px; }
.ik-faq-item {
    border: 2px solid var(--ik-border);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    transition: border-color .2s;
}
.ik-faq-item.open { border-color: var(--ik-green); }
.ik-faq-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: clamp(16px, 2vw, 20px);
    color: var(--ik-ink);
}
.ik-faq-chev {
    flex: none;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--ik-mint-bg);
    color: var(--ik-green-deep);
    transition: transform .28s, background .28s, color .28s;
    font-family: var(--ik-body);
    font-weight: 800;
}
/* White, not --ik-forest: that token is a dark surface everywhere else, but here
   it is INK on --ik-green, and against the sky fill it measures 3.24 where the
   green palette gave 5.15. White on the fill is 4.53. */
.ik-faq-item.open .ik-faq-chev { transform: rotate(180deg); background: var(--ik-green); color: #fff; }
/* max-height, not the grid-template-rows technique: the answer <p> carries 22px of
   bottom padding, and padding is not affected by min-height:0, so a 0fr row still
   resolves to 22px and the panel never fully closes. public.js measures the content
   and sets the open height inline, so any answer length opens fully. The transition
   is layout-animating by nature, but it fires once per click on one panel. */
.ik-faq-panel { max-height: 0; overflow: hidden; transition: max-height .32s cubic-bezier(.22, 1, .36, 1); }
.ik-faq-panel p {
    margin: 0;
    padding: 0 22px 22px;
    color: var(--ik-muted);
    font-size: clamp(15px, 1.8vw, 17px);
    line-height: 1.6;
    text-wrap: pretty;
}

/* ============ TESTIMONIALS (placeholder) ============ */
.ik-testimonials { padding: clamp(48px, 7vw, 84px) clamp(22px, 5vw, 56px); }
.ik-testimonials-badge-row { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 24px; }
.ik-supply-pill {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ik-red);
    background: var(--ik-pink-bg);
    border: 2px dashed var(--ik-coral);
    border-radius: 999px;
    padding: 6px 15px;
}
.ik-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
}
.ik-quote {
    border: 2px dashed #ddcdb0;
    border-radius: 20px;
    padding: 26px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ik-quote-stars { display: flex; gap: 3px; color: var(--ik-gold); }
.ik-quote p {
    margin: 0;
    font-family: var(--ik-body);
    font-weight: 500;
    font-style: italic;
    color: var(--ik-gray);
    line-height: 1.55;
}
.ik-quote-who { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.ik-quote-avatar { width: 38px; height: 38px; border-radius: 50%; background: #e5e7eb; flex: none; }
.ik-quote-name { font-family: var(--ik-display); font-weight: 600; color: var(--ik-gray); }

/* ============ FAMILY NOTE ============ */
.ik-family-in {
    max-width: 1040px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(32px, 5vw, 56px);
}
.ik-family-photo-col { flex: 1 1 300px; min-width: 260px; display: flex; justify-content: center; }
.ik-family-photo-placeholder {
    width: min(330px, 100%);
    aspect-ratio: 4 / 3;
    border-radius: 24px;
    border: 2px dashed var(--ik-coral);
    background: var(--ik-pink-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--ik-red);
    text-align: center;
    padding: 20px;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 14px;
}
.ik-family-copy { flex: 1 1 360px; min-width: 280px; }
.ik-family-copy h2 {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: var(--ik-fs-h2);
    line-height: var(--ik-lh-h2);
    letter-spacing: -.5px;
    color: var(--ik-ink);
    margin: 0 0 18px;
    text-wrap: balance;
}
.ik-family-copy p {
    font-family: var(--ik-body);
    font-weight: 500;
    font-size: clamp(16px, 1.9vw, 19px);
    line-height: 1.62;
    color: var(--ik-muted);
    margin: 0;
    text-wrap: pretty;
}

/* ============ THE PLAIN DEAL ============ */
.ik-deal { background: linear-gradient(180deg, var(--ik-cream), var(--ik-cream-2)); }
.ik-deal-in { max-width: 880px; margin: 0 auto; text-align: center; }
.ik-deal-price {
    font-family: var(--ik-display);
    font-weight: 500;
    font-size: clamp(18px, 2.2vw, 24px);
    color: var(--ik-green-deep);
    margin: 10px 0 clamp(30px, 4vw, 44px);
}
/* animated "easy steps" flow */
.ik-steps-flow {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: clamp(6px, 1.5vw, 14px);
    margin-bottom: clamp(32px, 4vw, 44px);
}
.ik-step-item {
    flex: 1 1 0;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 26px 18px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 12px 30px -22px rgba(30, 58, 95, .5);
    opacity: 0;
    /* Rise only. The number's pop below is the single accent — when the card also
       scaled, the two gestures read as a double bounce rather than one arrival.
       This is the pre-reveal state; the reveal itself is a keyframe animation
       (see the sequence below), not a transition. */
    transform: translateY(20px);
}
.ik-step-item .ik-deal-num {
    width: 46px;
    height: 46px;
    font-size: 21px;
    /* The scale distance carries the "pop"; the curve is the system's standard
       ease-out, not an overshoot. An elastic curve here would have been the only
       one in the stylesheet. */
    transform: scale(.45);
    opacity: 0;
}
.ik-step-text {
    font-family: var(--ik-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    color: var(--ik-ink);
    text-align: center;
    text-wrap: balance;
}
.ik-arrow-wrap {
    flex: none;
    align-self: center;
    display: grid;
    place-items: center;
}
.ik-step-arrow {
    display: block;
    width: clamp(44px, 6vw, 72px);
    color: var(--ik-coral);
}
.ik-arrow-line { stroke-dasharray: 100; stroke-dashoffset: 100; }
/* The head starts short of the line's end and travels the last few units into place,
   so the arrow reads as arriving at the next step rather than blinking on. */
.ik-arrow-head {
    opacity: 0;
    transform: translateX(-7px);
    transform-box: fill-box;
}

/* Reveal sequence — path-led (changed 2026-08-28). The connector now starts BEFORE
   its target card and its head lands as that card rises, so each arrow reads as
   delivering the next step rather than trailing the one behind it. Previously the
   arrow started while its source card was still settling, which made the arrows
   feel like decoration between cards instead of the thing driving the sequence.

   Kept from the previous pass, deliberately: rise only (no card scale, which read
   as a double bounce), the house ease-out rather than an elastic overshoot, and a
   sequence that resolves and stops instead of handing off to a loop.

   Now keyframes rather than transitions. A transition can only fire on the class
   flip, so the sequence could never be replayed; an animation restarts whenever the
   element is shown again. Resolves in ~1.40s (was ~1.15s) — the extra time is the
   connector leading rather than overlapping. */
@keyframes ikStepRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ikStepNum { from { opacity: 0; transform: scale(.45); } to { opacity: 1; transform: scale(1); } }
@keyframes ikStepDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes ikStepHead { from { opacity: 0; transform: translateX(-7px); } to { opacity: 1; transform: translateX(0); } }

/* The resting state is declared here as well as being the animation's end frame.
   The animation (fill: both) overrides it during the delay and the run, so the
   sequence still plays — but if animations never run at all, the steps land
   visible instead of staying at opacity 0 forever. The previous transition-based
   version got this for free; a keyframe version has to say it explicitly. */
.ik-steps-flow.is-visible .ik-step-item { opacity: 1; transform: translateY(0); animation: ikStepRise .44s cubic-bezier(.22, 1, .36, 1) both; }
.ik-steps-flow.is-visible .ik-step-item .ik-deal-num { opacity: 1; transform: scale(1); animation: ikStepNum .38s cubic-bezier(.22, 1, .36, 1) both; }
.ik-steps-flow.is-visible .ik-arrow-line { stroke-dashoffset: 0; animation: ikStepDraw .34s cubic-bezier(.4, 0, .2, 1) both; }
.ik-steps-flow.is-visible .ik-arrow-head { opacity: 1; transform: translateX(0); animation: ikStepHead .28s cubic-bezier(.22, 1, .36, 1) both; }

.ik-steps-flow.is-visible .ik-step-item:nth-child(1) { animation-delay: .02s; }
.ik-steps-flow.is-visible .ik-step-item:nth-child(1) .ik-deal-num { animation-delay: .14s; }

.ik-steps-flow.is-visible .ik-arrow-wrap:nth-child(2) .ik-arrow-line { animation-delay: .24s; }
.ik-steps-flow.is-visible .ik-arrow-wrap:nth-child(2) .ik-arrow-head { animation-delay: .50s; }

.ik-steps-flow.is-visible .ik-step-item:nth-child(3) { animation-delay: .48s; }
.ik-steps-flow.is-visible .ik-step-item:nth-child(3) .ik-deal-num { animation-delay: .60s; }

.ik-steps-flow.is-visible .ik-arrow-wrap:nth-child(4) .ik-arrow-line { animation-delay: .68s; }
.ik-steps-flow.is-visible .ik-arrow-wrap:nth-child(4) .ik-arrow-head { animation-delay: .92s; }

.ik-steps-flow.is-visible .ik-step-item:nth-child(5) { animation-delay: .90s; }
.ik-steps-flow.is-visible .ik-step-item:nth-child(5) .ik-deal-num { animation-delay: 1.02s; }

.ik-steps-flow.is-visible .ik-step-item:hover { transform: translateY(-5px); transition: transform .2s cubic-bezier(.22, 1, .36, 1); animation-delay: 0s; }

@media (max-width: 760px) {
    .ik-steps-flow { flex-direction: column; align-items: center; }
    .ik-step-item { width: 100%; max-width: 340px; }
    .ik-arrow-wrap { transform: rotate(90deg); margin: -4px 0; }
}
@media (prefers-reduced-motion: reduce) {
    /* animation: none, not transition: none — the reveal is keyframed now. */
    .ik-step-item, .ik-step-item .ik-deal-num,
    .ik-steps-flow.is-visible .ik-step-item,
    .ik-steps-flow.is-visible .ik-step-item .ik-deal-num { opacity: 1; transform: none; animation: none; transition: none; }
    .ik-arrow-line,
    .ik-steps-flow.is-visible .ik-arrow-line { stroke-dashoffset: 0; animation: none; }
    /* transform too, now that the head travels rather than only fading. */
    .ik-arrow-head,
    .ik-steps-flow.is-visible .ik-arrow-head { opacity: 1; transform: none; animation: none; transition: none; }
    .ik-steps-flow.is-visible .ik-step-item:hover { transform: none; }
}

.ik-deal-num {
    flex: none;
    width: 38px; height: 38px;
    border-radius: 50%;
    color: var(--ik-forest);
    display: grid; place-items: center;
    font-family: var(--ik-display);
    font-weight: 700;
    font-size: 18px;
}
.ik-deal-num--1 { background: #d98c2b; }
.ik-deal-num--2 { background: var(--ik-green); }
.ik-deal-num--3 { background: var(--ik-purple); }
.ik-deal-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: center;
}
.ik-guarantee {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ik-body);
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ik-green-deep);
    background: #fff;
    border: 2px solid #c9e6f5;
    padding: 11px 18px;
    border-radius: 999px;
}

/* ============ BOOKING FORM ============ */
.ik-book { scroll-margin-top: 70px; }
.ik-book-in { max-width: 620px; margin: 0 auto; }
.ik-book-in .ik-h2 { text-align: center; margin-bottom: 6px; }
.ik-book-lead {
    font-family: var(--ik-body);
    font-weight: 500;
    font-size: 16px;
    color: var(--ik-muted);
    text-align: center;
    margin: 0 0 clamp(28px, 4vw, 40px);
}
.ik-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    background: #fff;
    border: 2px solid var(--ik-border);
    border-radius: 24px;
    padding: clamp(24px, 4vw, 38px);
    box-shadow: 0 24px 50px -30px rgba(30, 58, 95, .5);
}
.ik-field { display: flex; flex-direction: column; gap: 7px; }
.ik-field--full { grid-column: span 2; }
.ik-form label {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--ik-ink);
}
.ik-req { color: var(--ik-red); }
.ik-opt { color: var(--ik-gray); font-weight: 500; }
.ik-form input,
.ik-form select,
.ik-form textarea {
    padding: 13px 15px;
    border: 2px solid var(--ik-border);
    border-radius: 12px;
    font-family: var(--ik-body);
    font-size: 16px;
    color: var(--ik-ink);
    background: #fff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
}
.ik-form select { appearance: none; cursor: pointer; }
.ik-form textarea { resize: vertical; }
.ik-form input:focus,
.ik-form select:focus,
.ik-form textarea:focus {
    border-color: var(--ik-green);
    box-shadow: 0 0 0 4px var(--ik-mint-bg);
}
.ik-form input[aria-invalid="true"],
.ik-form select[aria-invalid="true"] { border-color: var(--ik-coral); }
.ik-form-error {
    display: none;
    color: #d83a3f;
    font-size: 13px;
    font-weight: 700;
}
/* Shown only when there is something to say — set by the server on a failed
   post and by js/form-validate.js as the user types. Keeps empty message
   spans from eating a row of the form's grid/flex gap. */
.ik-form-error.field-validation-error { display: block; }
.ik-form-submit {
    grid-column: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--ik-blue-deep);
    color: #fff;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 19px;
    padding: 17px 28px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 14px 30px -12px rgba(34, 187, 244, .8);
    transition: transform .18s, background .18s, box-shadow .18s, opacity .18s;
}
.ik-form-submit:hover {
    background: var(--ik-green-deep);
    box-shadow: 0 16px 34px -12px rgba(10, 110, 147, .55);
    transform: translateY(-2px);
}
.ik-form-submit[disabled] { opacity: .6; cursor: wait; transform: none; }
.ik-form-reassure {
    grid-column: span 2;
    margin: 2px 0 0;
    text-align: center;
    font-family: var(--ik-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--ik-green-deep);
}
.ik-form-server-error {
    grid-column: span 2;
    display: none;
    margin: 0;
    text-align: center;
    font-weight: 700;
    font-size: 14.5px;
    color: #d83a3f;
}
.ik-honeypot {
    position: absolute;
    opacity: 0;
    top: 0; left: 0;
    height: 0; width: 0;
    z-index: -1;
    overflow: hidden;
}
.ik-form-success {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    background: var(--ik-mint-bg);
    border: 2px solid var(--ik-green);
    border-radius: 24px;
    padding: clamp(34px, 5vw, 52px);
}
.ik-form-success.show { display: flex; }
.ik-form.hide { display: none; }
.ik-success-check {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--ik-green);
    display: grid; place-items: center;
}
.ik-form-success h3 { font-family: var(--ik-display); font-weight: 600; font-size: 26px; color: var(--ik-ink); margin: 0; }
.ik-form-success p {
    font-family: var(--ik-body);
    font-weight: 500;
    font-size: 17px;
    color: #3c5e54;
    margin: 0;
    max-width: 36ch;
    line-height: 1.55;
}

@media (max-width: 560px) {
    .ik-form { grid-template-columns: 1fr; }
    .ik-field--full, .ik-form-submit, .ik-form-reassure, .ik-form-server-error { grid-column: auto; }
}

/* ============ FOOTER ============ */
.ik-footer {
    background: radial-gradient(120% 140% at 18% 0%, var(--ik-forest-2), var(--ik-forest));
    color: #D2E1EE;
    padding: clamp(52px, 7vw, 76px) clamp(22px, 5vw, 56px) 28px;
}
.ik-footer-in {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 36px;
}
.ik-footer-brand-col { min-width: 240px; }
.ik-footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; }
.ik-footer-brand .ik-brand-tile { box-shadow: none; }
.ik-footer-brand-name { display: block; font-family: var(--ik-display); font-weight: 700; font-size: 19px; color: var(--ik-cream-text); }
.ik-footer-brand-sub { display: block; font-family: var(--ik-body); font-weight: 800; font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--ik-mint); }
.ik-footer-tag {
    font-family: var(--ik-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6;
    color: #A6C6DC;
    margin: 0 0 18px;
    max-width: 30ch;
}
.ik-footer-social { display: flex; gap: 10px; }
.ik-footer-social a {
    width: 40px; height: 40px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .1);
    display: grid; place-items: center;
    transition: background .2s;
}
.ik-footer-social a:hover { background: rgba(255, 255, 255, .22); }
/* Column titles are h2: they are top-level groupings inside the footer landmark,
   and every public page previously jumped h1/h2 -> h4 here (WCAG 1.3.1). */
.ik-footer h4,
.ik-footer .ik-footer-h {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--ik-cream-text);
    margin: 0 0 14px;
    letter-spacing: .5px;
}
.ik-footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    font-family: var(--ik-body);
    font-weight: 600;
    font-size: 14px;
}
.ik-footer-links a { color: #D2E1EE; text-decoration: none; transition: color .16s; }
.ik-footer-links a:hover { color: var(--ik-cream-text); text-decoration: underline; text-underline-offset: 3px; }
.ik-footer-addr {
    font-family: var(--ik-body);
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.6;
    color: #D2E1EE;
    margin: 0 0 12px;
    font-style: normal;
}
.ik-footer-contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--ik-body);
    font-size: 13px;
    line-height: 1.4;
}
.ik-footer-contacts a { color: #D2E1EE; text-decoration: none; transition: color .16s; }
.ik-footer-contacts a:hover { color: var(--ik-cream-text); text-decoration: underline; text-underline-offset: 3px; }
.ik-footer-contacts strong { color: var(--ik-cream-text); font-weight: 700; }
.ik-footer-contacts .ik-contact-role { color: #9BB5C8; }
.ik-footer-email { color: var(--ik-mint) !important; font-weight: 700; }
.ik-footer-email:hover { color: #fff !important; text-decoration: none !important; }
.ik-footer-bottom {
    max-width: 1200px;
    margin: 38px auto 0;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    justify-content: space-between;
    align-items: center;
}
.ik-footer-copy { font-family: var(--ik-body); font-size: 13px; color: #9BB5C8; }
.ik-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
    font-family: var(--ik-body);
    font-size: 13px;
}
.ik-footer-legal a { color: #A6C6DC; text-decoration: none; transition: color .16s; }
.ik-footer-legal a:hover { color: var(--ik-cream-text); text-decoration: underline; text-underline-offset: 3px; }
.ik-footer-credit { color: #9BB5C8; }
.ik-footer-credit a { color: var(--ik-mint); text-decoration: none; font-weight: 700; transition: color .18s; }
.ik-footer-credit a:hover { color: #fff; }

/* "Made with ❤️ by MaxedPixel" */
.ik-heart {
    display: inline-block;
    transform-origin: 50% 60%;
}
@media (prefers-reduced-motion: no-preference) {
    .ik-heart { animation: ik-heartbeat 2.2s ease-in-out infinite; }
    @keyframes ik-heartbeat {
        0%, 40%, 100% { transform: scale(1); }
        5% { transform: scale(1.3); }
        12% { transform: scale(1); }
        19% { transform: scale(1.3); }
        26% { transform: scale(1); }
    }
}
.ik-credit-link {
    position: relative;
    padding-bottom: 1px;
    background-image: linear-gradient(90deg, var(--ik-mint), var(--ik-blue));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    transition: background-size .3s ease, color .18s;
}
.ik-credit-link:hover { background-size: 100% 2px; }

/* ============ SERVICE PAGE (programs) UTILITIES ============ */
.ik-split {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(32px, 5vw, 56px);
}
.ik-split-main { flex: 1 1 440px; min-width: 280px; }
.ik-split-aside { flex: 0 1 300px; min-width: 200px; display: flex; justify-content: center; }
@media (max-width: 760px) { .ik-split-aside { display: none; } }
.ik-mascot { max-width: 280px; width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: no-preference) {
    .ik-mascot--float { animation: ik-floatY 6s ease-in-out infinite; }
}
.ik-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: clamp(15px, 1.6vw, 17px);
    color: var(--ik-cream-text);
    background: rgba(255, 255, 255, .1);
    border: 2px solid rgba(255, 255, 255, .35);
    padding: 14px 26px;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s, border-color .18s;
}
.ik-btn-ghost:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .55); color: var(--ik-cream-text); }
/* card with a per-theme hover accent: set --accent inline */
.ik-card-accent {
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ik-card-accent:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -22px rgba(30, 58, 95, .5);
    border-color: var(--accent, var(--ik-green));
}
.ik-lift { transition: transform .2s, box-shadow .2s; }
.ik-lift:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -22px rgba(80, 55, 20, .5); }
.ik-clamp2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============ SERVICE PAGE (programs) SECTIONS ============ */
.ik-svc-hero {
    position: relative;
    background: radial-gradient(120% 120% at 80% 0%, var(--ik-forest-2) 0%, var(--ik-forest) 60%);
    padding: clamp(120px, 16vh, 170px) clamp(22px, 5vw, 56px) clamp(64px, 9vw, 96px);
    overflow: hidden;
}
.ik-svc-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: var(--ik-body);
    font-weight: 700;
    font-size: 13.5px;
    margin-bottom: 22px;
}
.ik-svc-breadcrumb a { color: #A6C6DC; text-decoration: none; }
.ik-svc-breadcrumb a:hover { color: var(--ik-cream-text); text-decoration: underline; text-underline-offset: 3px; }
.ik-svc-breadcrumb .ik-crumb-sep { color: #9BB5C8; }
.ik-svc-breadcrumb .ik-crumb-here { color: #D2E1EE; }
.ik-svc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: clamp(13px, 1.5vw, 15px);
    letter-spacing: .4px;
    color: var(--ik-mint);
    background: rgba(9, 127, 171, .16);
    border: 1.5px solid rgba(127, 212, 240, .4);
    padding: 7px 15px;
    border-radius: 999px;
    margin-bottom: 26px;
}
.ik-svc-hero h1 {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: var(--ik-fs-h1);
    line-height: var(--ik-lh-h1);
    letter-spacing: -.5px;
    color: var(--ik-cream-text);
    margin: 0 0 20px;
    text-wrap: balance;
}
.ik-svc-hero-sub {
    font-family: var(--ik-body);
    font-weight: 500;
    font-size: clamp(16px, 1.9vw, 19.5px);
    line-height: 1.65;
    color: #DCE9F5;
    margin: 0 0 34px;
    max-width: 56ch;
    text-wrap: pretty;
}
.ik-svc-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.ik-section-head { text-align: center; margin-bottom: clamp(32px, 5vw, 48px); }
.ik-section-sub {
    font-family: var(--ik-body);
    font-weight: 500;
    font-size: clamp(15px, 1.8vw, 17.5px);
    color: var(--ik-muted);
    margin: 10px 0 0;
}

.ik-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 18px;
}

/* ---- Contact: "How to reach us" cards ----
   Scoped to .ik-reach-grid, NOT to .ik-card generally: .ik-card and
   .ik-benefits-grid are also the program cards on Programs/Service.cshtml (the four
   subject money pages), which were not part of this change.

   Each card takes the hue its own icon tile already carries inline, so the row reads
   as five colours instead of five white boxes with coloured stamps.

   The 70% mix is a measured ceiling, not a taste call. Card copy is --ik-muted, and
   at full strength three of the five tints drop it under 4.5:1 (pink 4.25, tan 4.41,
   lavender 4.50). Mixed 70% into white the worst case is pink at 4.52; 73% is the
   first failing step. Do not deepen these without recomputing. */
.ik-reach-grid .ik-card:nth-child(1) { --reach: #ffe0e0; }
.ik-reach-grid .ik-card:nth-child(2) { --reach: #eef0f4; }
.ik-reach-grid .ik-card:nth-child(3) { --reach: #f6ead4; }
.ik-reach-grid .ik-card:nth-child(4) { --reach: #e0f4fe; }
.ik-reach-grid .ik-card:nth-child(5) { --reach: #f1ebf8; }
.ik-reach-grid .ik-card {
    background: color-mix(in srgb, var(--reach, #fff) 70%, #fff);
    border-color: var(--reach, var(--ik-border));
}
/* The tile used to be the only colour on the card; on a tinted card it inverts to a
   white disc so the icon still separates from its ground. */
.ik-reach-grid .ik-card-icon {
    background: #fff !important;
    width: 56px; height: 56px;
    border-radius: 50%;
}
.ik-reach-grid .ik-card p a { font-size: 17px; }
.ik-reach-grid .ik-card:hover { border-color: var(--ik-ink); }

/* Tap targets. Every card here holds exactly one link, but it sits in the <p>, not
   the <h3> — so the .ik-card h3 a::after overlay above never applied and the real
   targets measured 20px tall, under WCAG 2.5.8's 24px minimum. On a phone that was
   tap-to-call. Same overlay, anchored where the link actually is. */
.ik-reach-grid .ik-card { position: relative; }
.ik-reach-grid .ik-card p a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 22px;
}
.ik-reach-grid .ik-card:has(p a:focus-visible) { outline: 3px solid var(--ik-green); outline-offset: 3px; }
.ik-reach-grid .ik-card p a:focus-visible { outline: none; }

/* Entrance stagger. The hidden state lives only in the keyframe, never in a base
   rule, so if animations never run the cards render normally rather than staying
   invisible. */
@keyframes ikReachRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.ik-reach-grid .ik-card { animation: ikReachRise .5s cubic-bezier(.22, 1, .36, 1) both; }
.ik-reach-grid .ik-card:nth-child(1) { animation-delay: .06s; }
.ik-reach-grid .ik-card:nth-child(2) { animation-delay: .13s; }
.ik-reach-grid .ik-card:nth-child(3) { animation-delay: .20s; }
.ik-reach-grid .ik-card:nth-child(4) { animation-delay: .27s; }
.ik-reach-grid .ik-card:nth-child(5) { animation-delay: .34s; }
@media (prefers-reduced-motion: reduce) {
    .ik-reach-grid .ik-card { animation: none; }
}
.ik-benefit-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: grid; place-items: center;
    flex: none;
}

.ik-chip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 20px; }
.ik-chip {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 15px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 2px solid transparent;
}
.ik-note {
    font-family: var(--ik-body);
    font-weight: 600;
    font-size: clamp(15px, 1.8vw, 17px);
    line-height: 1.6;
    color: var(--ik-muted);
    max-width: 62ch;
    margin: 0 auto;
    text-align: center;
    text-wrap: pretty;
}

.ik-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}
.ik-step {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 30px -22px rgba(30, 58, 95, .5);
}
.ik-step-num {
    width: 38px; height: 38px;
    border-radius: 50%;
    color: #fff;
    display: grid; place-items: center;
    font-family: var(--ik-display);
    font-weight: 700;
    font-size: 18px;
}
.ik-step h3 { font-family: var(--ik-display); font-weight: 600; font-size: 18.5px; color: var(--ik-ink); margin: 0; }
.ik-step p { font-family: var(--ik-body); font-weight: 500; font-size: 14.5px; line-height: 1.55; color: var(--ik-muted); margin: 0; }

.ik-why-list {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
    padding: 0;
}
.ik-why-list li {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    background: #fff;
    border: 2px solid var(--ik-border);
    border-radius: 16px;
    padding: 16px 20px;
    font-family: var(--ik-body);
    font-weight: 600;
    font-size: clamp(15px, 1.8vw, 16.5px);
    line-height: 1.55;
    color: var(--ik-ink);
}
.ik-why-check {
    flex: none;
    width: 26px; height: 26px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--ik-mint-bg);
    color: var(--ik-green);
    display: grid; place-items: center;
}

.ik-coming-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--ik-green-deep);
    background: #fff;
    border: 2px solid #c9e6f5;
    border-radius: 999px;
    padding: 10px 18px;
}

/* ---- "When it runs" availability strip (program pages) ----
   A list, not cards: a parent scans these rows for one that fits their week, and a
   grid of equal-weight cards makes that scan slower, not faster. */
.ik-when-in { max-width: 900px; }
.ik-when-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ik-when-row {
    display: grid;
    grid-template-columns: minmax(148px, auto) 1fr auto auto;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 2px solid var(--ik-border);
    border-radius: 16px;
    padding: 16px 20px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.ik-when-row:hover {
    border-color: var(--ik-green);
    box-shadow: 0 14px 30px -22px rgba(10, 110, 147, .55);
}
.ik-when-time { display: flex; flex-direction: column; gap: 2px; }
.ik-when-day {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--ik-ink);
}
.ik-when-hours {
    font-family: var(--ik-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--ik-muted);
    font-variant-numeric: tabular-nums;
}
.ik-when-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ik-when-course {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--ik-ink);
}
.ik-when-detail {
    font-family: var(--ik-body);
    font-weight: 500;
    font-size: 13.5px;
    color: var(--ik-gray);
}
/* The cheaper rate for coming more often, set apart from the headline price it
   sits next to so it reads as a saving rather than a second, confusing price. */
.ik-when-save {
    font-weight: 700;
    color: var(--ik-green-deep);
    white-space: nowrap;
}
.ik-when-size {
    font-family: var(--ik-body);
    font-weight: 700;
    font-size: 12.5px;
    color: var(--ik-muted);
    font-variant-numeric: tabular-nums;
}

/* Running border for a class that is nearly full. The angle is animated on a
   registered custom property so the gradient rotates on the compositor instead of
   repainting the border every frame; the mask keeps the fill white so only the
   1.5px rim moves. */
@property --ik-spin {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.ik-when-row.is-filling {
    position: relative;
    border-color: transparent;
}
.ik-when-row.is-filling::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    padding: 2px;
    background: conic-gradient(from var(--ik-spin),
        var(--ik-gold) 0deg, var(--ik-coral) 90deg, var(--ik-gold) 200deg, transparent 300deg, var(--ik-gold) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: ik-spin 4s linear infinite;
    pointer-events: none;
}
@keyframes ik-spin { to { --ik-spin: 360deg; } }
/* Browsers without @property fall back to a static warm rim rather than no border. */
@supports not (background: conic-gradient(from var(--ik-spin), red, blue)) {
    .ik-when-row.is-filling { border-color: var(--ik-gold); }
    .ik-when-row.is-filling::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ik-when-row.is-filling::before { animation: none; }
}
/* Seat status. Only the low state carries a number — see ClassAvailability. */
.ik-seat-pill {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-family: var(--ik-body);
    font-weight: 700;
    font-size: 12.5px;
    padding: 6px 12px;
    border-radius: 999px;
}
.ik-seat-pill--open { background: var(--ik-mint-bg); color: var(--ik-green-deep); }
.ik-seat-pill--low { background: var(--ik-tan-bg); color: #8a5a12; }
.ik-seat-pill--full { background: #efe9e0; color: var(--ik-muted); }
.ik-when-btn { white-space: nowrap; }
.ik-when-btn--wait { background: var(--ik-muted); }
.ik-when-more { margin-top: 18px; }
.ik-when-empty {
    background: #fff;
    border: 2px dashed var(--ik-border);
    border-radius: 18px;
    padding: clamp(24px, 4vw, 36px);
    text-align: center;
}
.ik-when-empty p {
    margin: 0 0 18px;
    color: var(--ik-muted);
    font-size: 16px;
    line-height: 1.6;
}
@media (max-width: 720px) {
    /* Stack, but keep status and action on one line so the row stays scannable. */
    .ik-when-row {
        grid-template-columns: 1fr auto;
        gap: 10px 14px;
    }
    .ik-when-time { grid-column: 1; }
    .ik-when-status { grid-column: 2; justify-self: end; }
    .ik-when-meta { grid-column: 1 / -1; }
    .ik-when-act { grid-column: 1 / -1; }
    /* Full width and a real thumb target — the pill's default padding lands at 39px. */
    .ik-when-btn { width: 100%; justify-content: center; min-height: 46px; }
}

/* Denser course cards (changed 2026-08-28). A course list is scanned, not read:
   the card now runs tighter and drops the description so more of the catalogue is
   visible at once. See .ik-class-desc below for how to put the description back. */
.ik-classes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.ik-class-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 18px;
    background: #fff;
    border: 1.5px solid var(--ik-border);
}
/* Course cards carry exactly one link (the details link) in both places they are
   used, so the whole card becomes that link — same pattern as .ik-card. */
.ik-class-card { position: relative; }
.ik-class-card:hover { border-color: var(--ik-green); box-shadow: 0 20px 40px -20px rgba(9, 127, 171, .6); }
.ik-class-card .ik-class-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.ik-class-card:has(.ik-class-link:focus-visible) { outline: 3px solid var(--ik-green); outline-offset: 3px; }
.ik-class-card .ik-class-link:focus-visible { outline: none; }
.ik-class-badge {
    align-self: flex-start;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    /* Background is an admin-chosen course-type colour, so the views set `color`
       inline via ContrastHelper.OnColor(). White is only the fallback. */
    color: #fff;
    padding: 5px 12px;
    border-radius: 999px;
}
.ik-class-card h3 { font-family: var(--ik-display); font-weight: 600; font-size: 18px; color: var(--ik-ink); margin: 0; }
/* Hidden rather than deleted: the markup and the data still carry it, so restoring
   the description on these cards is this one line. Note this reaches both places the
   card is used — the /Courses grid and the "You might also like" strip on a course
   detail page. */
.ik-class-card .ik-class-desc { display: none; font-family: var(--ik-body); font-weight: 500; font-size: 14.5px; line-height: 1.5; color: var(--ik-muted); margin: 0; }
.ik-class-meta { display: flex; flex-wrap: wrap; gap: 6px; }
/* The card used to run three pill treatments — outlined cream meta pills, filled
   cream-2 day pills, and the type badge — for information that all ranks the same.
   Meta and day pills now share one; the badge stays distinct because it is the only
   one carrying the course type's own colour. */
.ik-class-meta span,
.ik-courses-day-pill {
    font-family: var(--ik-body);
    font-weight: 700;
    font-size: 11.5px;
    color: var(--ik-muted);
    background: var(--ik-cream-2);
    border: 0;
    border-radius: 999px;
    padding: 4px 10px;
}
.ik-class-teacher { display: flex; align-items: center; gap: 9px; font-family: var(--ik-body); font-weight: 600; font-size: 13.5px; color: var(--ik-muted); }
.ik-class-teacher img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.ik-class-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; }
.ik-class-price { font-family: var(--ik-display); font-weight: 700; font-size: 17px; color: var(--ik-green-deep); }
.ik-class-price small { font-family: var(--ik-body); font-weight: 600; font-size: 12.5px; color: var(--ik-gray); }
.ik-class-link {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--ik-green-deep);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ik-class-link:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--ik-green-dark); }
.ik-classes-empty {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    border: 2px dashed var(--ik-border);
    border-radius: 24px;
    padding: clamp(30px, 5vw, 46px);
}
.ik-classes-empty h3 { font-family: var(--ik-display); font-weight: 600; font-size: 22px; color: var(--ik-ink); margin: 0 0 10px; }
.ik-classes-empty p { font-family: var(--ik-body); font-weight: 500; font-size: 15.5px; line-height: 1.6; color: var(--ik-muted); margin: 0 0 22px; }
.ik-classes-more { text-align: center; margin-top: 28px; }

.ik-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
}
.ik-article-card {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 24px;
    border-radius: 20px;
    background: #fff;
    border: 2px solid var(--ik-border);
    text-decoration: none;
}
.ik-article-tag {
    align-self: flex-start;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 999px;
}
.ik-article-card h3 { font-family: var(--ik-display); font-weight: 600; font-size: 17.5px; line-height: 1.3; color: var(--ik-ink); margin: 0; }
.ik-article-card p { font-family: var(--ik-body); font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--ik-muted); margin: 0; }
.ik-article-cta { margin-top: auto; font-family: var(--ik-display); font-weight: 600; font-size: 14px; color: var(--ik-green-deep); }
.ik-article-card--soon { opacity: .75; border-style: dashed; }

.ik-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}
.ik-related-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    border-radius: 20px;
    background: #fff;
    border: 2px solid var(--ik-border);
    text-decoration: none;
}
.ik-related-card h3 { font-family: var(--ik-display); font-weight: 600; font-size: 19px; color: var(--ik-ink); margin: 0; }
.ik-related-card p { font-family: var(--ik-body); font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--ik-muted); margin: 0; }
.ik-related-cta { margin-top: auto; font-family: var(--ik-display); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }

/* ============ COURSES PAGE ============ */
/* -- hero (centered, search) -- */
.ik-courses-hero-in { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; text-align: center; }
.ik-courses-hero-in .ik-svc-hero-sub { margin-left: auto; margin-right: auto; }
.ik-courses-search {
    margin: 30px auto 0;
    max-width: 540px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 999px;
    padding: 7px 7px 7px 22px;
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .55);
}
.ik-courses-search-icon { display: grid; place-items: center; flex: none; color: var(--ik-gray); }
.ik-courses-search input {
    flex: 1;
    min-width: 0;
    /* The pill's padding belongs to the <form>, so only the input itself takes a tap.
       Without this the field was a 24px-tall target inside a 53px-tall control. */
    align-self: stretch;
    min-height: 44px;
    border: none;
    outline: none;
    font-family: var(--ik-body);
    font-weight: 600;
    font-size: 16px;
    color: var(--ik-ink);
    background: transparent;
}
.ik-courses-search .ik-btn-cta { flex: none; }
.ik-courses-clear-hero {
    display: inline-block;
    margin-top: 16px;
    font-family: var(--ik-body);
    font-weight: 700;
    font-size: 13.5px;
    color: #DCE9F5;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ik-courses-clear-hero:hover { color: var(--ik-cream-text); }

/* -- catalog layout (filters + results) -- */
.ik-courses-catalog-in {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: clamp(20px, 3vw, 34px);
    flex-wrap: wrap;
}

/* -- filters bar (was a sticky sidebar; changed 2026-08-28) --
   The sidebar was 1185px tall and stuck at top:84px. On a 900px viewport that left
   816px visible, and because a stuck element does not move, the last 369px — the
   Time of day and Duration groups — could never be scrolled to at all. Rather than
   contain it (max-height + inner scroll), the panel moved above the results, where
   nothing is pinned and nothing can go out of reach no matter how many course types
   or teachers get added later. The catalogue gets the full width back as a bonus. */
.ik-courses-filters {
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--ik-border-soft);
    border-radius: 22px;
    box-shadow: 0 18px 40px -28px rgba(80, 55, 20, .5);
    padding: 22px;
}
/* Groups sit side by side instead of stacking, which is what keeps the bar short. */
.ik-courses-filters > form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 22px;
    align-items: start;
}
@media (max-width: 900px) {
    .ik-courses-filters > form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .ik-courses-filters > form { grid-template-columns: 1fr; }
}
.ik-courses-filters-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.ik-courses-filters-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--ik-ink);
    margin: 0;
}
.ik-courses-clear-link {
    font-family: var(--ik-body);
    font-weight: 700;
    font-size: 13px;
    color: var(--ik-gold-text);
    background: none;
    border: none;
    text-decoration: none;
    cursor: pointer;
    /* 44px tap target without changing the visual size of the label */
    padding: 12px 10px;
    margin: -12px -10px;
}
.ik-courses-clear-link:hover { text-decoration: underline; text-underline-offset: 2px; }

.ik-courses-filter-group { margin-bottom: 0; }
.ik-courses-filter-heading {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--ik-gray);
    margin: 0 0 8px;
}
.ik-courses-filter-list { display: flex; flex-direction: column; gap: 5px; }
.ik-courses-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 9px;
    border: 1.5px solid var(--ik-border);
    background: #fff;
    cursor: pointer;
    font-family: var(--ik-body);
    font-weight: 700;
    font-size: 13px;
    color: var(--ik-ink);
    transition: background .15s, border-color .15s, color .15s;
}
.ik-courses-filter-row:hover { border-color: var(--ik-green); }
.ik-courses-filter-row.is-checked { background: var(--ik-mint-bg); border-color: var(--ik-green); color: var(--ik-green-deep); }
.ik-courses-filter-count { font-size: 12px; color: var(--ik-gray); font-weight: 700; }
/* visually-hidden but focusable native checkbox driving .is-checked via inline script */
.ik-courses-filter-check {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.ik-courses-chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.ik-courses-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1.5px solid var(--ik-border);
    background: #fff;
    cursor: pointer;
    font-family: var(--ik-body);
    font-weight: 700;
    font-size: 13px;
    color: var(--ik-muted);
    text-align: center;
    transition: background .15s, border-color .15s, color .15s;
}
.ik-courses-chip:hover { border-color: var(--ik-green); }
.ik-courses-chip.is-checked { background: var(--ik-mint-bg); border-color: var(--ik-green); color: var(--ik-green-deep); }
.ik-courses-chip--day { width: 44px; padding: 7px 0; font-size: 12px; }

.ik-courses-filter-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--ik-border-soft);
}
.ik-courses-filter-apply { width: 100%; }
.ik-courses-filter-reset {
    text-align: center;
    font-family: var(--ik-body);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--ik-muted);
    text-decoration: none;
}
.ik-courses-filter-reset:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--ik-ink); }

/* -- results: count/sort + cards -- */
.ik-courses-results { flex: 1 1 560px; min-width: 280px; }
.ik-courses-results-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.ik-courses-count { margin: 0; font-family: var(--ik-display); font-weight: 600; font-size: clamp(18px, 2.4vw, 22px); color: var(--ik-ink); }
.ik-courses-sort { display: inline-flex; align-items: center; gap: 9px; font-family: var(--ik-body); font-weight: 700; font-size: 13.5px; color: var(--ik-gray); }
.ik-courses-sort select {
    font-family: var(--ik-body);
    font-weight: 700;
    font-size: 14px;
    color: var(--ik-ink);
    background: #fff;
    border: 1.5px solid var(--ik-border);
    border-radius: 11px;
    padding: 9px 13px;
    cursor: pointer;
    outline: none;
}

.ik-courses-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ik-courses-lang { display: inline-flex; align-items: center; gap: 5px; font-family: var(--ik-body); font-weight: 700; font-size: 12px; color: var(--ik-gray); }
.ik-class-meta .ik-courses-meta-icon { display: inline-flex; align-items: center; gap: 5px; }
.ik-class-meta .ik-courses-teacher-pill { background: var(--ik-mint-bg); color: var(--ik-green-deep); border-color: transparent; }
.ik-courses-days { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ik-courses-slot-count { font-family: var(--ik-body); font-weight: 700; font-size: 11.5px; color: var(--ik-gold-text); padding: 4px 4px; }
.ik-courses-card-foot { border-top: 1px solid var(--ik-border-soft); }

/* -- pagination -- */
.ik-courses-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 36px; }
.ik-courses-page-btn {
    width: 42px; height: 42px;
    border-radius: 12px;
    border: 1.5px solid var(--ik-border);
    background: #fff;
    display: grid;
    place-items: center;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--ik-ink);
    text-decoration: none;
    cursor: pointer;
}
.ik-courses-page-btn:hover { border-color: var(--ik-green); }
.ik-courses-page-btn.is-current { background: var(--ik-green); border-color: var(--ik-green); color: #fff; cursor: default; }
.ik-courses-page-btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* The 860px override that used to undo the sticky sidebar is gone: the bar is
   full-width at every size now, so there is nothing left to undo. */

/* ============ GOOGLE REVIEWS ============ */
.ik-grev-agg-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ik-muted);
    text-decoration: none;
}
.ik-grev-agg-link:hover { color: var(--ik-ink); text-decoration: underline; text-underline-offset: 3px; }
.ik-grev-agg-star { color: var(--ik-gold); }
.ik-grev-star-empty { color: #ddd; }
.ik-grev-text {
    margin: 0;
    font-family: var(--ik-body);
    font-weight: 500;
    font-style: italic;
    color: var(--ik-gray);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ik-grev-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; }
.ik-grev-namestack { display: flex; flex-direction: column; gap: 2px; }
.ik-grev-meta { font-size: 12px; color: var(--ik-muted); }

/* ============ STICKY MOBILE CTA ============ */
.ik-sticky {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 55;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 32%);
    transform: translateY(120%);
    transition: transform .3s ease;
    pointer-events: none;
}
.ik-sticky.show { transform: translateY(0); }
.ik-sticky button {
    pointer-events: auto;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--ik-blue-deep);
    color: #fff;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 18px;
    padding: 16px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 12px 30px -8px rgba(34, 187, 244, .6);
}
.ik-sticky button:active { transform: scale(.98); }

/* ---------- upcoming events & camps (homepage teaser) ----------
   A lighter 3-up teaser than the /Home/EventsAndCamps grid — the homepage links
   into that page rather than reproducing its filters, so this stays compact and
   keeps events.css off the LCP-critical homepage. */
.ik-up-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: clamp(28px, 4vw, 40px);
}
.ik-up-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}
.ik-up-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: #fff;
    border: 2px solid var(--ik-border);
    border-radius: 20px;
    transition: border-color .2s, transform .2s;
}
/* These cards already lifted on hover, so they read as one target — but only the
   "View details" link actually was one. Same stretched-overlay pattern as .ik-card:
   safe because every .ik-up-card contains exactly one .ik-up-link (details, or the
   login link when a camp is gated). The tinted shadow is what makes the whole card
   look live rather than just the small link inside it. */
.ik-up-card { position: relative; }
.ik-up-card:hover {
    border-color: var(--ik-green);
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -18px rgba(9, 127, 171, .6);
}
.ik-up-card .ik-up-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.ik-up-card:has(.ik-up-link:focus-visible) { outline: 3px solid var(--ik-green); outline-offset: 3px; }
.ik-up-card .ik-up-link:focus-visible { outline: none; }
.ik-up-top { display: flex; align-items: center; gap: 12px; }
.ik-up-date {
    flex: 0 0 auto;
    width: 52px;
    padding: 7px 0;
    text-align: center;
    border-radius: 13px;
    background: var(--ik-cream);
    border: 1px solid var(--ik-border);
    font-family: var(--ik-display);
    line-height: 1.1;
}
.ik-up-date-m { display: block; font-size: 11px; font-weight: 700; letter-spacing: .6px; color: var(--ik-muted); }
.ik-up-date-d { display: block; font-size: 20px; font-weight: 600; color: var(--ik-ink); }
.ik-up-kind {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
}
.ik-up-kind--event { background: rgba(34, 187, 244, .14); color: var(--ik-sky-text); }
.ik-up-kind--camp { background: rgba(240, 160, 32, .16); color: var(--ik-gold-text); }
.ik-up-kind--live { background: var(--ik-mint-bg); color: var(--ik-green-deep); }
.ik-up-title {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    color: var(--ik-ink);
    margin: 0;
    text-wrap: balance;
}
.ik-up-meta {
    font-family: var(--ik-body);
    font-weight: 500;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ik-muted);
    margin: 0;
}
.ik-up-link {
    margin-top: auto;
    padding-top: 6px;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--ik-green-deep);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ik-up-link:hover { text-decoration: underline; }
@media (max-width: 560px) {
    .ik-up-head { flex-direction: column; align-items: flex-start; }
}

/* ---------- after-school tier features ----------
   Each tier says what it adds to the one below it, so the list is short by design —
   a tick per line reads faster than a paragraph and keeps the cards the same height. */
.ik-tier-feats {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ik-tier-feats li {
    position: relative;
    padding-left: 22px;
    font-family: var(--ik-body);
    font-weight: 500;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ik-muted);
}
.ik-tier-feats li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 6px;
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--ik-green-deep);
    border-bottom: 2px solid var(--ik-green-deep);
    transform: rotate(-45deg);
}

/* ---------- the published shape of the afternoon ----------
   An ordered list because the order is the point. The time chip is fixed-width on
   desktop so the descriptions align into a readable column, and stacks on phones
   rather than squeezing both into 40% of the screen each. */
.ik-day {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ik-day-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 2px solid var(--ik-border);
    border-radius: 16px;
    padding: 14px 18px;
}
.ik-day-time {
    flex: 0 0 auto;
    min-width: 104px;
    text-align: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}
.ik-day-text {
    font-family: var(--ik-body);
    font-weight: 500;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ik-ink);
}
@media (max-width: 560px) {
    .ik-day-row { flex-direction: column; gap: 8px; }
    .ik-day-time { min-width: 0; align-self: flex-start; }
}

/* ---------- touch targets ----------
   WCAG 2.5.5 asks for 44px on pointer-coarse devices. These are the links that render
   as compact text on the public pages — footer navigation, card CTAs, the reviews
   aggregate link. Expressed as min-height on an inline-flex box so nothing shifts
   visually except the hit area. Keyed on coarse pointers OR a narrow viewport: touch
   is the real trigger, but the width clause means the rule is verifiable in a desktop
   browser and still covers touch laptops. */
@media (pointer: coarse), (max-width: 900px) {
    .ik-footer-links a,
    .ik-footer-legal a,
    .ik-up-link,
    .ik-class-link,
    .ik-grev-agg-link,
    .ik-credit-link,
    .ik-courses-filter-reset {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    /* A contact link is three pieces — number, name, role — not one label. Under the
       shared inline-flex rule above they became three flex items locked to a single
       line, so the phone number broke mid-digits and the name and role split into
       columns. Same 44px target, but allowed to wrap the way text should. */
    .ik-footer-contacts a {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 5px;
        min-height: 44px;
    }
    .ik-footer-contacts a strong { white-space: nowrap; }
    .ik-footer-social a {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Filter rows are labels wrapping a visually-hidden checkbox — the label is the
       target, so it is the one that needs the height. */
    .ik-courses-filter-row,
    .ik-courses-chip { min-height: 44px; }

    /* Buttons and selects that landed a few px short of the 44px AAA bar. */
    .ik-btn-cta,
    .ik-courses-clear-link,
    .ik-courses-sort select { min-height: 44px; }
}

/* Visually hidden, still announced. Used for section headings that the layout
   communicates visually but the heading outline needs (WCAG 1.3.1). */
.ik-vh {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- after-school tier cards ----------
   These three cards are the decision on the page, so the whole card is the link
   rather than a small text CTA in the corner, and the price is the loudest thing
   on it. The middle card is lifted slightly — it is the one most families pick,
   and giving it a badge and a stronger border does the choosing work for them. */
.ik-tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    align-items: stretch;
}
.ik-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 26px 22px 20px;
    background: #fff;
    border: 2px solid var(--ik-border);
    border-radius: 22px;
    text-decoration: none;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.ik-tier:hover,
.ik-tier:focus-visible {
    border-color: var(--tier-accent, var(--ik-green));
    transform: translateY(-3px);
    box-shadow: 0 18px 38px -24px rgba(0, 0, 0, .45);
}
.ik-tier:focus-visible { outline: 3px solid var(--tier-dark, var(--ik-green-deep)); outline-offset: 3px; }
.ik-tier.is-full { opacity: .6; }
.ik-tier.is-full:hover { transform: none; }

.ik-tier-flag {
    position: absolute;
    top: -11px;
    left: 22px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--tier-dark, var(--ik-green-deep));
    color: #fff;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.ik-tier-name {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 19px;
    color: var(--ik-ink);
}
.ik-tier-price { display: flex; align-items: baseline; gap: 4px; }
.ik-tier-price strong {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 36px;
    line-height: 1;
    color: var(--tier-dark, var(--ik-green-deep));
}
.ik-tier-price small { font-family: var(--ik-body); font-weight: 600; font-size: 13.5px; color: var(--ik-muted); }
.ik-tier-meta { font-family: var(--ik-body); font-weight: 500; font-size: 13px; color: var(--ik-muted); }
.ik-tier .ik-tier-feats { margin: 6px 0 0; }
.ik-tier-foot {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
}
.ik-tier-cta {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--tier-dark, var(--ik-green-deep));
}
.ik-tier:hover .ik-tier-cta { text-decoration: underline; }
.ik-tier-spots {
    font-family: var(--ik-body);
    font-weight: 700;
    font-size: 12px;
    color: var(--ik-muted);
    white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
    .ik-tier { transition: border-color .2s; }
    .ik-tier:hover, .ik-tier:focus-visible { transform: none; }
}

/* ---------- grouped program menu ----------
   Four of the money pages are subjects that lead to weekly classes; two are
   standalone services. These headers say so inside one menu, rather than
   splitting into two dropdowns that compete for the same hover. */
.ik-dd-group {
    display: block;
    padding: 10px 12px 4px;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--ik-muted);
}
.ik-dd-group:first-child { padding-top: 4px; }
/* The "view all classes" link closes the subject group, so it sits inline
   rather than pinned to the bottom of the whole menu. */
.ik-dd-all--inline { margin-top: 4px; }
/* Group labels in the burger menu, matching the desktop dropdown. */
.ik-mobile-group {
    display: block;
    padding: 14px 0 4px;
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .7px;
    text-transform: uppercase;
    opacity: .65;
}

/* ============ FAMILY FORMS ============
   One field vocabulary for every form a parent fills in — adding a child, editing
   one, their own details. Lives here rather than in a page's style block because
   the forms are shared partials, and a field that looks different depending on
   which drawer it opened in is the tell that two people built the same product. */
.ik-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}
.ik-form-grid .ik-form-wide { grid-column: 1 / -1; }

.ik-form-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ik-form-f > label {
    font-family: var(--ik-body);
    font-weight: 700;
    font-size: 13px;
    color: var(--ik-ink);
}
.ik-form-f input,
.ik-form-f select,
.ik-form-f textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1.5px solid var(--ik-border);
    border-radius: 12px;
    background: #fff;
    font-family: var(--ik-body);
    font-weight: 500;
    font-size: 15px;   /* 16px-adjacent: below 16 iOS zooms the page on focus */
    color: var(--ik-ink);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.ik-form-f textarea { min-height: 76px; resize: vertical; line-height: 1.55; }
.ik-form-f input::placeholder, .ik-form-f textarea::placeholder { color: var(--ik-gray); }
.ik-form-f input:hover, .ik-form-f select:hover, .ik-form-f textarea:hover { border-color: var(--ik-gray); }
.ik-form-f input:focus, .ik-form-f select:focus, .ik-form-f textarea:focus {
    outline: none;
    border-color: var(--ik-green-deep);
    box-shadow: 0 0 0 3px var(--ik-mint-bg);
}
.ik-form-f .field-validation-error,
.ik-form-f .text-danger {
    font-family: var(--ik-body);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--ik-red);
}
.ik-form-f input.input-validation-error,
.ik-form-f select.input-validation-error,
.ik-form-f textarea.input-validation-error { border-color: var(--ik-red); }

.ik-form-hint { font-family: var(--ik-body); font-weight: 500; font-size: 12.5px; color: var(--ik-muted); }

/* One child's worth of fields inside the add-more-than-one form. */
.ik-form-card {
    background: #fff;
    border: 1.5px solid var(--ik-border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
}
.ik-form-card-top {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 14px;
}
.ik-form-card-title { font-family: var(--ik-display); font-weight: 600; font-size: 15.5px; color: var(--ik-ink); }

.ik-form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

@media (max-width: 560px) {
    .ik-form-grid { grid-template-columns: 1fr; }
}

/* One button vocabulary for the family pages. Shared partials use these, so they
   cannot live in a single page's style block. */
.ik-fam-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 20px;
    border-radius: 12px; border: 1.5px solid transparent;
    font-family: var(--ik-display); font-weight: 600; font-size: 14.5px;
    cursor: pointer; text-decoration: none;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.ik-fam-btn--go { background: var(--ik-green-deep); color: #fff; }
.ik-fam-btn--go:hover { background: var(--ik-green-dark); }
.ik-fam-btn--line { background: #fff; border-color: var(--ik-border); color: var(--ik-ink); }
.ik-fam-btn--line:hover { border-color: var(--ik-ink); }
.ik-fam-btn--sm { min-height: 40px; padding: 0 14px; font-size: 13.5px; }
.ik-fam-btn--danger { background: #fff; border-color: rgba(186, 56, 60, .5); color: var(--ik-red); }
.ik-fam-btn--danger:hover { background: var(--ik-pink-bg); }
.ik-fam-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ============ MONEY RULES ============
   The payment and refund terms, wherever a parent meets money. One vocabulary so
   the rules read the same on the apply form, the manage page and the bill — and
   a list rather than a paragraph, because a parent skims for the line that
   applies to them. The refund rule is tinted, not red: red on these pages means
   "you owe this", and a policy is not a debt. */
/* Queried on its own width, not the viewport's: the same block sits in a 760px page
   column and in a ~290px course-detail card, and the label needs its own line in one
   and not the other. */
.ik-rules { margin: 30px 0 0; padding: 0; border-top: 1.5px solid var(--ik-border); container-type: inline-size; }
@container (max-width: 520px) {
    .ik-rules dt { flex: 1 1 100%; }
}
.ik-rules-h {
    font-family: var(--ik-display); font-weight: 600; font-size: 17px;
    color: var(--ik-ink); margin: 16px 0 12px;
}
.ik-rules-item {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px;
    padding: 12px 0; border-bottom: 1px solid var(--ik-border);
}
.ik-rules-item:last-child { border-bottom: none; }
/* Inside a card the card already draws the edge, so the block loses its own. */
.ik-cd-card > .ik-rules { margin: 0; border-top: none; }
.ik-cd-card > .ik-rules > .ik-rules-h { margin-top: 0; }
.ik-rules-list { margin: 0; }
.ik-rules dt {
    flex: 0 0 152px; font-family: var(--ik-body); font-weight: 800;
    font-size: 13.5px; line-height: 1.5; color: var(--ik-ink);
}
.ik-rules dd {
    flex: 1 1 260px; margin: 0; font-family: var(--ik-body); font-weight: 500;
    font-size: 13.5px; line-height: 1.6; color: var(--ik-muted); max-width: 62ch;
}
/* The one rule people argue about later, so it is the one that is hardest to skim past. */
.ik-rules-item--firm {
    margin-top: 4px; padding: 13px 16px; border-bottom: none; border-radius: 14px;
    background: var(--ik-tan-bg);
}
.ik-rules-item--firm dt { color: var(--ik-gold-text); }
.ik-rules-item--firm dd { color: var(--ik-gold-text); font-weight: 600; }

@media (max-width: 560px) {
    .ik-rules dt { flex: 1 1 100%; }
}

/* ---------- payment terms (public program pages) ----------
   Same rules as the parent-side .ik-rules block, at page scale. Rows on the section
   ground rather than in cards, so the refund line — the only one set in ink — is the
   single thing that stops the eye. */
.ik-terms { max-width: 780px; margin: 0 auto; }
.ik-terms-row {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px;
    padding: 18px 0; border-bottom: 1px solid var(--ik-border);
}
.ik-terms-row dt {
    flex: 0 0 190px; font-family: var(--ik-display); font-weight: 600;
    font-size: 16px; line-height: 1.4; color: var(--ik-ink);
}
.ik-terms-row dd {
    flex: 1 1 300px; margin: 0; font-family: var(--ik-body); font-weight: 500;
    font-size: 15px; line-height: 1.65; color: var(--ik-muted);
}
.ik-terms-row.is-firm {
    margin-top: 18px; padding: 20px 24px; border-bottom: none;
    border-radius: 18px; background: var(--ik-ink);
}
.ik-terms-row.is-firm dt { color: #fff; }
.ik-terms-row.is-firm dd { color: var(--ik-cream-2); font-weight: 600; }

@media (max-width: 640px) {
    .ik-terms-row dt { flex: 1 1 100%; }
    .ik-terms-row.is-firm { padding: 18px; }
}

/* ---------- After-school: schools we pick up from + the pickup add-on ----------
   Directory, not decoration: district as heading, school as row, address as proof.
   The rows are deliberately quiet so the tier cards above stay the loudest thing
   in the section. The pickup aside takes the page's theme tint inline. */
.ik-schools { max-width: 980px; margin: 0 auto; }
.ik-schools-district {
    display: flex; align-items: center; gap: 12px;
    margin: 26px 0 10px;
    font-family: var(--ik-display); font-weight: 600; font-size: 14px;
    letter-spacing: .04em; text-transform: uppercase;
}
.ik-schools-district:first-child { margin-top: 0; }
.ik-schools-district::after { content: ""; flex: 1; height: 1px; background: var(--ik-border); }
.ik-schools-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px;
    list-style: none; margin: 0; padding: 0;
}
.ik-school {
    display: flex; flex-direction: column; gap: 2px;
    background: #fff; border: 1.5px solid var(--ik-border); border-radius: 14px;
    padding: 12px 16px; min-height: 44px;
    transition: border-color .18s, transform .18s;
}
.ik-school:hover { border-color: var(--ik-green); transform: translateY(-1px); }
.ik-school-name { font-family: var(--ik-display); font-weight: 600; font-size: 15.5px; line-height: 1.3; color: var(--ik-ink); }
.ik-school-addr { font-family: var(--ik-body); font-weight: 500; font-size: 13px; line-height: 1.45; color: var(--ik-muted); }

.ik-pickup {
    max-width: 780px; margin: clamp(28px, 4vw, 40px) auto 0;
    border-radius: 18px; padding: 22px 24px;
    display: grid; gap: 10px;
}
.ik-pickup h3 { font-family: var(--ik-display); font-weight: 600; font-size: clamp(19px, 2.2vw, 22px); line-height: 1.25; margin: 0; color: var(--ik-ink); text-wrap: balance; }
.ik-pickup p { font-family: var(--ik-body); font-weight: 500; font-size: 15px; line-height: 1.6; margin: 0; color: var(--ik-muted); }
.ik-pickup-firm {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(30, 58, 95, .14);
}
.ik-pickup p.ik-pickup-firm { font-weight: 700; font-size: 14.5px; line-height: 1.55; color: var(--ik-ink); }
.ik-pickup-firm svg { flex: none; margin-top: 2px; color: var(--ik-red); }

@media (max-width: 640px) {
    .ik-schools-grid { grid-template-columns: 1fr; }
    .ik-pickup { padding: 18px; }
}

/* ---------- The repeated no-refund notice (after-school journey) ----------
   Ink on gold tint, so it is the one thing on a cream page that is not cream.
   Same warning glyph as the pickup aside; --ik-gold-text clears 4.5:1 on the tint. */
.ik-norefund {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 18px 0; padding: 14px 16px;
    background: var(--ik-tan-bg); border: 1.5px solid rgba(147, 95, 22, .28); border-radius: 14px;
    font-family: var(--ik-body); font-weight: 500; font-size: 14.5px; line-height: 1.55; color: var(--ik-ink);
}
.ik-norefund strong { font-weight: 700; color: var(--ik-gold-text); }
.ik-norefund svg { flex: none; margin-top: 2px; color: var(--ik-gold-text); }

/* ---------- After-school section: the "Most chosen" tier is the hero ----------
   Accepted from an impeccable live session (2026-09-01). The middle card carries the
   page theme's dark step with cream text and a gold flag; the other two stay paper.
   Entrances are scroll-driven (view timelines), so they cost nothing on browsers
   without support and stay off under reduced motion. */
.ik-afterschool .ik-h2 { font-size: clamp(32px, 4.4vw, 54px); letter-spacing: -.01em; }
.ik-afterschool .ik-tier-grid { align-items: center; gap: 22px; }
.ik-afterschool .ik-tier { transition: translate .32s cubic-bezier(.22, 1, .36, 1), box-shadow .32s, border-color .2s; transform: none; }
.ik-afterschool .ik-tier:hover, .ik-afterschool .ik-tier:focus-visible { transform: none; translate: 0 -4px; }
.ik-afterschool .ik-tier-price strong { font-size: 46px; }
.ik-afterschool .ik-tier-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; background: var(--tier-soft); }
.ik-afterschool .ik-tier:hover .ik-tier-cta { text-decoration: none; background: var(--tier-accent); color: #fff; }
.ik-afterschool .ik-tier:nth-child(2) { background: var(--tier-dark); border-color: var(--tier-dark); scale: 1.05; z-index: 1; box-shadow: 0 34px 60px -28px rgba(94, 63, 136, .75); }
.ik-afterschool .ik-tier:nth-child(2) .ik-tier-name,
.ik-afterschool .ik-tier:nth-child(2) .ik-tier-price strong,
.ik-afterschool .ik-tier:nth-child(2) .ik-tier-feats li { color: var(--ik-cream-text); }
.ik-afterschool .ik-tier:nth-child(2) .ik-tier-price small,
.ik-afterschool .ik-tier:nth-child(2) .ik-tier-meta,
.ik-afterschool .ik-tier:nth-child(2) .ik-tier-spots { color: rgba(253, 247, 232, .78); } /* ~9:1 on the dark step */
.ik-afterschool .ik-tier:nth-child(2) .ik-tier-feats li::before { color: var(--ik-gold); }
.ik-afterschool .ik-tier:nth-child(2) .ik-tier-flag { background: var(--ik-gold); color: var(--ik-ink); }
.ik-afterschool .ik-tier:nth-child(2) .ik-tier-cta { background: var(--ik-gold); color: var(--ik-ink); }
.ik-afterschool .ik-tier:nth-child(2):hover .ik-tier-cta { background: #fff; color: var(--tier-dark); }
.ik-afterschool .ik-school { border-width: 2px; }
.ik-afterschool .ik-school:hover { border-color: var(--ik-purple); }
.ik-afterschool .ik-pickup h3 { color: var(--ik-cream-text); font-size: clamp(21px, 2.4vw, 26px); }
.ik-afterschool .ik-pickup p { color: rgba(253, 247, 232, .82); }
.ik-afterschool .ik-pickup p.ik-pickup-firm { color: var(--ik-cream-text); border-top-color: rgba(253, 247, 232, .2); }
.ik-afterschool .ik-pickup-firm svg { color: var(--ik-gold); }
@media (max-width: 820px) { .ik-afterschool .ik-tier:nth-child(2) { scale: 1; } }

@keyframes ik-as-rise { from { translate: 0 28px; } to { translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .ik-afterschool .ik-tier, .ik-afterschool .ik-school, .ik-afterschool .ik-day-row, .ik-afterschool .ik-pickup {
            animation: ik-as-rise both linear; animation-timeline: view(); animation-range: entry 0% entry 38%;
        }
        .ik-afterschool .ik-tier:nth-child(2) { animation-range: entry 6% entry 46%; }
        .ik-afterschool .ik-tier:nth-child(3) { animation-range: entry 12% entry 54%; }
        .ik-afterschool .ik-school:nth-child(3n+2) { animation-range: entry 6% entry 46%; }
        .ik-afterschool .ik-school:nth-child(3n) { animation-range: entry 12% entry 54%; }
    }
}

/* ================================================================
   Dock (shared by the family rail and the teacher rail).
   Moved here from _ParentDock.cshtml on 2026-09-01 so the teacher pages can
   carry the same rail. The wide-screen page offset is scoped to a <main>
   that actually contains a dock, which is what the inline block used to
   guarantee by only existing when the dock rendered.
   ================================================================ */
/* ------------------------------------------------------------------
   Family dock. Vertical rail on a wide screen, a scrollable row of
   chips on a narrow one — both are patterns a parent has already used
   a hundred times elsewhere, which is the point: the structure should
   cost them nothing to understand.
   ------------------------------------------------------------------ */
.ik-dock { position: fixed; z-index: 60; font-family: var(--ik-body); }
.ik-dock-list { display: flex; list-style: none; margin: 0; padding: 0; }
.ik-dock a {
    display: flex; align-items: center;
    text-decoration: none; color: var(--ik-muted); font-weight: 700; font-size: 13.5px;
    transition: background .16s ease, color .16s ease;
}
.ik-dock svg { flex: none; }

/* Wide: a column of circular widgets that grow into a labelled pill on hover or
   keyboard focus. Each is its own floating piece rather than rows in one card,
   so a widget can expand past its neighbours without being clipped. */
@media (min-width: 1100px) {
    /* One source of truth for where the rail sits, so the page offset below can
       never drift out of step with it — which is exactly how the rail ended up
       overlapping the billing page's own sidebar. */
    :root { --ik-dock-x: max(16px, calc(50vw - 660px)); --ik-dock-w: 52px; }

    /* In the flow, not over it. Sticky inside <main> means the rail travels with
       the page, halts under the header on the way down, and stops when main ends —
       so it can never sit on top of the footer the way a fixed rail did. */
    main:has(> .ik-dock) {
        padding-left: calc(var(--ik-dock-x) + 206px);
        /* Enough height for the whole rail on a nearly empty page, so it is never
           cut off. At the very bottom of a long page the rail still slides behind
           the header, which is what sticky does and what the header's higher
           z-index is for. */
        min-height: 660px;
    }

    .ik-dock {
        position: sticky;
        top: 96px;
        float: left;
        margin-left: calc(-1 * (var(--ik-dock-x) + 206px) + var(--ik-dock-x));
        /* Sized by content, not pinned to the collapsed width: a fixed 52px here
           caps the pills and they can never grow. */
        width: auto;
    }
    .ik-dock-list { flex-direction: column; align-items: flex-start; gap: 10px; }
    .ik-dock-list > li { width: max-content; }

    .ik-dock a {
        /* The label's column grows from 0fr, so each pill settles at its own
           label's width — "Home" and "After school" should not both stop at some
           shared guess. Animating the track rather than the element's width also
           keeps this off the width/height transition path. */
        display: grid;
        grid-template-columns: auto 0fr;
        align-items: center;
        gap: 0;
        height: var(--ik-dock-w);
        padding: 0 16px;
        white-space: nowrap;
        border-radius: 999px;
        background: #fff;
        border: 1.5px solid var(--ik-border);
        box-shadow: 0 14px 30px -22px rgba(30, 58, 95, .5);
        transition: grid-template-columns .22s cubic-bezier(.22, 1, .36, 1),
                    gap .22s cubic-bezier(.22, 1, .36, 1),
                    background .16s ease, color .16s ease, border-color .16s ease;
    }
    /* Always in the DOM for screen readers; only its column is collapsed. */
    .ik-dock-label { overflow: hidden; opacity: 0; transition: opacity .16s ease .04s; }
    .ik-dock a:hover, .ik-dock a:focus-visible {
        grid-template-columns: auto 1fr; gap: 12px;
        color: var(--ik-ink); border-color: var(--ik-ink);
    }
    .ik-dock a:hover .ik-dock-label, .ik-dock a:focus-visible .ik-dock-label { opacity: 1; }

    .ik-dock a.is-here { background: var(--ik-green-deep); border-color: var(--ik-green-deep); color: #fff; }
    .ik-dock a.is-here:hover, .ik-dock a.is-here:focus-visible { color: #fff; border-color: var(--ik-green-deep); }

    /* A wider gap marks the break between the family's pages and their own
       details, doing the job the separator rule used to. */
    .ik-dock-sep { height: 12px; }

}

/* Narrow: every destination visible at once, in a grid. A horizontal scroll
   strip hid half of them behind a gesture nobody is told about — the worst
   possible trade for a parent who is already unsure where they are. Four to a
   row, icon over label, the same shape as the app icons on their home screen. */
@media (max-width: 1099px) {
    .ik-dock {
        position: static;
        padding: 0 22px;
        margin: 0 auto;
        max-width: 760px;
    }
    .ik-dock-list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px 4px;
    }
    .ik-dock a {
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        padding: 12px 4px 10px;
        min-height: 72px;
        border-radius: 16px;
        text-align: center;
        font-size: 11.5px;
        line-height: 1.2;
    }
    /* The icon carries the colour, so a tapped item is obvious without the
       whole tile shouting. */
    .ik-dock a svg { width: 22px; height: 22px; }
    .ik-dock a:hover { background: var(--ik-cream-2); color: var(--ik-ink); }
    .ik-dock a.is-here { background: var(--ik-mint-bg); color: var(--ik-green-deep); }
    /* The separator's own list item has to go, not just its rule: an empty grid
       cell pushed the last tile onto a row of its own. */
    .ik-dock-list > li:has(.ik-dock-sep) { display: none; }
}

/* The grid scrolls with the page rather than pinning to the top: a menu that
   permanently occupies an eighth of a phone screen costs more than it gives.
   It clears the fixed header itself, and the page below it then starts tight —
   addressed by position rather than by class name, so a page that has not been
   rebuilt yet is handled the same as one that has. */
@media (max-width: 1099px) {
    .ik-dock { padding-top: clamp(92px, 12vh, 116px); padding-bottom: 6px; }
    /* Whatever the page puts after the grid starts tight against it, whether or
       not that page has been rebuilt yet. */
    .ik-dock + * { padding-top: 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .ik-dock a { transition: none; }
}


/* ============ RICH TEXT (homework instructions) ============
   Teacher-written instructions, sanitized to a handful of tags by
   Helpers.HomeworkText. Rendered the same wherever they appear. */
.ik-rich { font-family: var(--ik-body); font-weight: 500; font-size: 15.5px; line-height: 1.65; color: var(--ik-ink); }
.ik-rich p { margin: 0 0 .7em; }
.ik-rich p:last-child { margin-bottom: 0; }
.ik-rich ul, .ik-rich ol { margin: 0 0 .7em; padding-left: 1.4em; }
.ik-rich li { margin: 0 0 .25em; }
.ik-rich a { color: var(--ik-green-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ik-rich h3, .ik-rich h4 { font-family: var(--ik-display); font-weight: 600; margin: .8em 0 .3em; color: var(--ik-ink); }
.ik-rich blockquote { margin: 0 0 .7em; padding: 8px 14px; border-radius: 12px; background: var(--ik-cream-2); }