/* ============================================================
   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--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(240px, 1fr));
    gap: 18px;
    /* start, not stretch: the topic lists are different lengths, and padding a
       three-topic card out to the height of a five-topic one just manufactured
       empty space inside it. Each card is as tall as what it has to say. */
    align-items: start;
}
.ik-dir {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 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 {
    width: 46px; height: 46px;
    border-radius: 13px;
    display: grid; place-items: center;
    flex: none;
}
.ik-dir h3 {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: clamp(18px, 1.9vw, 21px);
    line-height: 1.2;
    color: var(--ik-ink);
    margin: 0;
}
.ik-dir h3 a { color: inherit; text-decoration: none; }
.ik-dir-topics {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
}
.ik-dir-topics li {
    position: relative;
    padding-left: 15px;
    font-family: var(--ik-body);
    font-weight: 500;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--ik-gray);
    text-wrap: pretty;
}
.ik-dir-topics li::before {
    content: "";
    position: absolute;
    left: 0; top: .58em;
    width: 5px; height: 5px;
    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 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. */
    transform: translateY(22px);
    transition: opacity .34s ease-out, transform .42s cubic-bezier(.22, 1, .36, 1);
}
.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(.4);
    opacity: 0;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .2s ease-out;
}
.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;
    transition: opacity .18s ease-out, transform .32s cubic-bezier(.22, 1, .36, 1);
}

/* Reveal sequence — one continuous left-to-right sweep, resolved in ~1.15s.
   Each arrow starts while its source card is still settling and lands just before the
   next card rises, so the arrow reads as delivering the step rather than the three
   cards taking turns. The previous version serialised every beat and took 2.1s to
   reach step 3, which is the payoff line. */
.ik-steps-flow.is-visible .ik-step-item { opacity: 1; transform: translateY(0); }
.ik-steps-flow.is-visible .ik-step-item .ik-deal-num { transform: scale(1); opacity: 1; }

.ik-steps-flow.is-visible .ik-step-item:nth-child(1) { transition-delay: .04s; }
.ik-steps-flow.is-visible .ik-step-item:nth-child(1) .ik-deal-num { transition-delay: .16s; }

.ik-steps-flow.is-visible .ik-arrow-wrap:nth-child(2) .ik-arrow-line { transition: stroke-dashoffset .34s cubic-bezier(.4, 0, .2, 1) .22s; stroke-dashoffset: 0; }
.ik-steps-flow.is-visible .ik-arrow-wrap:nth-child(2) .ik-arrow-head { opacity: 1; transform: translateX(0); transition-delay: .46s; }

.ik-steps-flow.is-visible .ik-step-item:nth-child(3) { transition-delay: .44s; }
.ik-steps-flow.is-visible .ik-step-item:nth-child(3) .ik-deal-num { transition-delay: .56s; }

.ik-steps-flow.is-visible .ik-arrow-wrap:nth-child(4) .ik-arrow-line { transition: stroke-dashoffset .34s cubic-bezier(.4, 0, .2, 1) .62s; stroke-dashoffset: 0; }
.ik-steps-flow.is-visible .ik-arrow-wrap:nth-child(4) .ik-arrow-head { opacity: 1; transform: translateX(0); transition-delay: .86s; }

.ik-steps-flow.is-visible .ik-step-item:nth-child(5) { transition-delay: .84s; }
.ik-steps-flow.is-visible .ik-step-item:nth-child(5) .ik-deal-num { transition-delay: .96s; }

/* The sequence resolves and stops. It previously handed off to an infinite 2s arrow
   nudge, which kept a conversion section in perpetual motion and never settled. */
.ik-steps-flow.is-visible .ik-step-item:hover { transform: translateY(-5px); transition-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) {
    .ik-step-item, .ik-step-item .ik-deal-num { opacity: 1; transform: none; transition: none; }
    .ik-arrow-line { stroke-dashoffset: 0; }
    /* transform too, now that the head travels rather than only fading. */
    .ik-arrow-head { opacity: 1; transform: none; transition: 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;
}
.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; }
}

.ik-classes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 18px;
}
.ik-class-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border-radius: 22px;
    background: #fff;
    border: 2px 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: 20px; color: var(--ik-ink); margin: 0; }
.ik-class-card .ik-class-desc { 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: 7px; }
.ik-class-meta span {
    font-family: var(--ik-body);
    font-weight: 700;
    font-size: 12.5px;
    color: var(--ik-muted);
    background: var(--ik-cream);
    border: 1px solid var(--ik-border-soft);
    border-radius: 999px;
    padding: 5px 11px;
}
.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: 19px; 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: 14.5px;
    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 sidebar -- */
.ik-courses-filters {
    flex: 1 1 260px;
    max-width: 300px;
    min-width: 240px;
    position: sticky;
    top: 84px;
    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;
}
.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: 20px; }
.ik-courses-filter-group:last-of-type { margin-bottom: 0; }
.ik-courses-filter-heading {
    font-family: var(--ik-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--ik-gray);
    margin: 0 0 11px;
}
.ik-courses-filter-list { display: flex; flex-direction: column; gap: 7px; }
.ik-courses-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 13px;
    border-radius: 11px;
    border: 1.5px solid var(--ik-border);
    background: #fff;
    cursor: pointer;
    font-family: var(--ik-body);
    font-weight: 700;
    font-size: 14px;
    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: 5px; }
.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); padding: 4px 9px; border-radius: 8px; }
.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; }

@media (max-width: 860px) {
    .ik-courses-filters { position: relative; top: 0; max-width: none; flex-basis: 100%; }
}

/* ============ 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; }
}