/* ============================================================
   BRAND PALETTE — rebuilt 2026-08-31 from the actual logo.
   logo-blue.png contains exactly two colours: teal #43a8b4 and
   green #75b543. The previous palette (deep teal #003d38 +
   orange #e8603a) matched neither, so the site was off-brand
   from its own identity. Pastels follow the printed brochure.

   Token names are unchanged so the 300+ rules below inherit the
   new palette without being touched.
   ============================================================ */
:root {
    /* the two logo colours, verbatim */
    --brand-teal: #43a8b4;
    --brand-green: #75b543;
    /* white text on #75b543 is only 2.5:1 and fails AA, so anything with
       white type on it uses this darkened version instead (4.9:1) */
    --brand-green-ink: #4e7d2e;

    /* darkened teal for text and dark grounds — #43a8b4 on cream is
       only 2.6:1 and fails contrast, so headings use this instead */
    --teal: #1d5f68;
    --teal-mid: #2b7f8b;

    /* warm accent: the brochure's salmon, not the old orange */
    --coral: #e8836e;
    --coral-light: #fdece7;
    /* the salmon is a fill colour; as small text on cream it is only 2.6:1.
       Label text uses this darker tone instead (5.1:1). The site's previous
       orange failed here too, at 3.35:1 — this fixes a pre-existing issue. */
    --coral-ink: #b34e31;

    /* brochure pastels, used as section grounds */
    --sage: #d7e7cb;
    --blush: #f8d5c9;
    --lilac: #ded4ea;

    --cream: #fdf7f1;
    --warm-white: #fffdfa;
    --text: #24383a;
    /* 4.98:1 on warm-white and 4.76:1 on cream — the lighter #6b7b7d
       sat at 4.35 and missed AA for body copy */
    --muted: #647173;
    --border: rgba(29,95,104,0.10);
    --shadow: 0 4px 30px rgba(29,95,104,0.08);
    --radius: 24px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; background: var(--warm-white); color: var(--text); line-height: 1.75; overflow-x: hidden; }
h1, h2, h3 { font-family: 'Playfair Display', serif; font-weight: 700; line-height: 1.15; }
img { display: block; }
a { color: inherit; }
/* NAV */
nav { position: fixed; top: 0; width: 100%; padding: 14px 6%; background: rgba(255,252,249,0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: flex; justify-content: space-between; align-items: center; z-index: 2000; border-bottom: 1px solid var(--border); transition: box-shadow 0.3s; }
nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.08); }
.nav-logo { height: 52px; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { font-size: 0.9rem; font-weight: 500; color: var(--text); text-decoration: none; opacity: 0.7; transition: opacity 0.2s; }
.nav-links a:hover { opacity: 1; }
.nav-right { display: flex; gap: 14px; align-items: center; }
.hei-badge { height: 42px; }
.nav-cta { background: var(--coral); color: white; padding: 11px 24px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: background 0.2s, transform 0.2s; }
.nav-cta:hover { background: #d9705a; transform: translateY(-1px); }
.hamburger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 4px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: 0.3s; }
.mobile-menu { display: none; position: fixed; top: 80px; left: 0; right: 0; background: var(--warm-white); padding: 16px 6% 28px; z-index: 1999; border-bottom: 1px solid var(--border); box-shadow: 0 8px 30px rgba(0,0,0,0.1); }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 13px 0; border-bottom: 1px solid var(--border); text-decoration: none; font-weight: 500; color: var(--text); }
.mobile-menu .nav-cta { display: inline-block; margin-top: 18px; border-bottom: none; }
/* HERO */
.hero { padding: 155px 6% 100px; background: var(--cream); position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: -100px; right: -100px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(232,131,110,0.10) 0%, transparent 70%); pointer-events: none; }
.hero::after { content: ''; position: absolute; bottom: -80px; left: -80px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(67,168,180,0.10) 0%, transparent 70%); pointer-events: none; }
.hero-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.hero-text { position: relative; z-index: 1; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: white; border: 1px solid var(--border); border-radius: 50px; padding: 7px 16px; font-size: 0.82rem; font-weight: 600; color: var(--teal); margin-bottom: 26px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
.hero h1 { font-size: clamp(2.4rem, 4.5vw, 3.8rem); color: var(--teal); margin-bottom: 20px; }
.hero h1 em { font-style: italic; color: var(--coral); }
.hero-subtitle { font-size: 1.1rem; color: var(--muted); max-width: 520px; margin-bottom: 34px; line-height: 1.7; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-primary { background: var(--teal); color: white; padding: 15px 30px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 1rem; transition: 0.25s; display: inline-flex; align-items: center; gap: 8px; }
.btn-primary:hover { background: var(--teal-mid); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(29,95,104,0.25); }
.btn-secondary { background: transparent; color: var(--teal); padding: 15px 30px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 1rem; border: 2px solid rgba(29,95,104,0.22); transition: 0.25s; }
.btn-secondary:hover { border-color: var(--teal); background: rgba(29,95,104,0.05); }
.hero-stats { display: flex; gap: 28px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.hero-stat .num { font-family: 'Playfair Display', serif; font-size: 1.9rem; font-weight: 700; color: var(--teal); line-height: 1; }
.hero-stat .label { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }
/* Pathfinder */
.pathfinder-card { background: white; border-radius: 32px; padding: 40px 36px; box-shadow: 0 20px 60px rgba(0,0,0,0.1); border: 1px solid var(--border); position: relative; z-index: 1; }
.pathfinder-card h3 { color: var(--teal); font-size: 1.5rem; margin-bottom: 6px; }
.pathfinder-card .sub { font-size: 0.9rem; color: var(--muted); margin-bottom: 24px; }
.pathfinder-card select, .pathfinder-card input[type="text"], .pathfinder-card input[type="tel"] { width: 100%; padding: 14px 16px; margin-bottom: 14px; border-radius: 14px; border: 1.5px solid 
#e5e5e5; font-size: 0.95rem; font-family: 'DM Sans', sans-serif; color: var(--text); background: var(--cream); transition: border-color 0.2s; -webkit-appearance: none; }
.pathfinder-card select:focus, .pathfinder-card input:focus { outline: none; border-color: var(--teal); }
.pathfinder-card button { width: 100%; padding: 16px; background: var(--coral); color: white; border: none; border-radius: 14px; font-weight: 700; font-size: 1rem; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: 0.25s; }
.pathfinder-card button:hover { background: #d9705a; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(232,131,110,0.32); }
.pathfinder-card .note { font-size: 0.8rem; color: var(--muted); text-align: center; margin-top: 12px; }
/* TRUST BAR */
.trust-bar { background: var(--teal); padding: 18px 6%; display: flex; justify-content: center; gap: 50px; align-items: center; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,0.88); font-size: 0.88rem; font-weight: 500; }
.trust-item svg { opacity: 0.65; flex-shrink: 0; }
/* STATS BAR */
.stats-bar { background: var(--teal); color: white; padding: 60px 6%; }
.stats-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stat-item .big { font-family: 'Playfair Display', serif; font-size: 3rem; font-weight: 700; color: white; line-height: 1; }
.stat-item .label { font-size: 0.9rem; color: rgba(255,255,255,0.6); margin-top: 8px; }
/* SECTIONS */
.section { padding: 100px 6%; }
.section-inner { max-width: 1100px; margin: 0 auto; }
.section-label { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--coral); margin-bottom: 14px; }
.section-title { font-size: clamp(2rem, 3.5vw, 2.8rem); color: var(--teal); margin-bottom: 16px; }
.section-sub { font-size: 1.05rem; color: var(--muted); max-width: 580px; line-height: 1.7; }
.section-header { margin-bottom: 56px; }
.section-header.centered { text-align: center; }
.section-header.centered .section-sub { margin: 0 auto; }
/* PILLARS */
.pillars-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.pillar-card { background: white; border-radius: var(--radius); padding: 38px; border: 1px solid var(--border); transition: 0.35s cubic-bezier(0.25,0.8,0.25,1); }
.pillar-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,0.08); }
.pillar-icon { width: 50px; height: 50px; border-radius: 15px; background: var(--coral-light); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 18px; }
.pillar-card h3 { font-size: 1.25rem; color: var(--teal); margin-bottom: 9px; }
.pillar-card p { color: var(--muted); font-size: 0.95rem; }
.expand-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s; opacity: 0; }
.expand-body.open { max-height: 300px; opacity: 1; }
.expand-inner { margin-top: 18px; padding-top: 18px; border-top: 1px dashed 
#e0e0e0; font-size: 0.92rem; color: var(--muted); line-height: 1.75; }
.toggle-btn { background: none; border: none; color: var(--coral); font-weight: 700; cursor: pointer; padding: 10px 0 0; font-size: 0.83rem; text-transform: uppercase; letter-spacing: 1px; font-family: 'DM Sans', sans-serif; display: inline-flex; align-items: center; gap: 6px; }
.toggle-btn svg { transition: transform 0.3s; }
.toggle-btn.open svg { transform: rotate(45deg); }
/* FINLAND */
.finland-section { background: var(--cream); }
.finland-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.finland-points { display: flex; flex-direction: column; gap: 26px; }
.finland-point { display: flex; gap: 16px; align-items: flex-start; }
.finland-num { width: 38px; height: 38px; border-radius: 12px; background: var(--teal); color: white; font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.finland-point h4 { font-size: 1rem; color: var(--teal); margin-bottom: 3px; font-family: 'DM Sans', sans-serif; font-weight: 600; }
.finland-point p { font-size: 0.9rem; color: var(--muted); }
.hei-box { background: white; border-radius: 32px; padding: 46px 42px; text-align: center; box-shadow: var(--shadow); border: 1px solid var(--border); }
.hei-box img { height: 80px; margin: 0 auto 22px; }
.hei-box h3 { color: var(--teal); font-size: 1.35rem; margin-bottom: 12px; }
.hei-box p { color: var(--muted); font-size: 0.93rem; line-height: 1.7; }
.hei-link { display: inline-block; margin-top: 18px; color: var(--coral); font-weight: 700; text-decoration: none; font-size: 0.9rem; }
/* SPACES */
.spaces-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.space-card { background: white; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); transition: 0.3s; }
.space-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0,0,0,0.09); }
.space-img { height: 190px; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; }
.space-img.art { background: linear-gradient(135deg, 
#fff0eb, 
#ffd8cc); }
.space-img.motor { background: linear-gradient(135deg, 
#e8f5f4, 
#c0e5e3); }
.space-img.reading { background: linear-gradient(135deg, 
#f2ede0, 
#e0d5be); }
.space-body { padding: 26px; }
.space-body h3 { color: var(--teal); font-size: 1.1rem; margin-bottom: 8px; }
.space-body p { color: var(--muted); font-size: 0.9rem; margin-bottom: 14px; }
.space-expand-body { display: none; padding-top: 14px; border-top: 1px dashed #eee; font-size: 0.88rem; color: #555; line-height: 1.7; }
/* TESTIMONIALS */
.testimonials-section { background: var(--teal); }
.testimonials-section .section-label { color: rgba(255,255,255,0.45); }
.testimonials-section .section-title { color: white; }
.testimonials-section .section-sub { color: rgba(255,255,255,0.65); }
.testimonials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.testimonial-card { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius); padding: 34px; transition: 0.3s; }
.testimonial-card:hover { background: rgba(255,255,255,0.12); }
.stars { color: #ffd700; font-size: 0.95rem; margin-bottom: 14px; letter-spacing: 2px; }
.testimonial-card p { color: rgba(255,255,255,0.85); font-size: 0.95rem; line-height: 1.7; margin-bottom: 18px; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 11px; }
.author-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; }
.author-name { font-weight: 600; color: white; font-size: 0.88rem; }
.author-tag { font-size: 0.76rem; color: rgba(255,255,255,0.45); margin-top: 2px; }
/* GENTLE TRANSITION */
.gentle-section { background: white; }
.gentle-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.gentle-points { display: flex; flex-direction: column; gap: 20px; margin-top: 28px; }
.gentle-point { display: flex; gap: 14px; align-items: flex-start; }
.gentle-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.gentle-point h4 { font-size: 0.95rem; font-weight: 600; color: var(--teal); margin-bottom: 3px; }
.gentle-point p { font-size: 0.88rem; color: var(--muted); }
.gentle-quote { background: var(--cream); border-radius: 28px; padding: 40px; border-left: 4px solid var(--coral); }
.gentle-quote blockquote { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.3rem; color: var(--teal); line-height: 1.5; margin-bottom: 16px; }
.gentle-quote cite { font-size: 0.85rem; color: var(--muted); font-style: normal; font-weight: 600; }
/* PROGRAMS */
.programs-section { background: var(--cream); }
.programs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.program-card { background: white; border-radius: var(--radius); padding: 34px; border: 1px solid var(--border); transition: 0.3s; }
.program-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.program-card.featured { border-color: var(--coral); border-width: 2px; }
.age-tag { display: inline-block; background: var(--coral-light); color: var(--coral); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 5px 12px; border-radius: 50px; margin-bottom: 12px; }
.age-tag.teal { background: rgba(29,95,104,0.09); color: var(--teal); }
.program-card h3 { color: var(--teal); font-size: 1.1rem; margin-bottom: 8px; }
.program-card p { color: var(--muted); font-size: 0.9rem; margin-bottom: 16px; }
.program-detail { display: flex; gap: 9px; align-items: flex-start; font-size: 0.87rem; color: var(--muted); margin-bottom: 7px; }
.program-detail svg { color: var(--coral); flex-shrink: 0; margin-top: 2px; }
/* INSTAGRAM GRID */
.insta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 10px; }
.insta-grid blockquote { width: 100% !important; max-width: 100% !important; min-width: unset !important; margin: 0 !important; }
/* GALLERY (lightwidget) */
.gallery-section { background: white; }
.widget-container { border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); }
/* FOUNDER */
.founder-section { background: var(--cream); }
.founder-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: start; }
.founder-quote { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-style: italic; color: var(--teal); line-height: 1.5; margin-bottom: 20px; border-left: 3px solid var(--coral); padding-left: 22px; }
.founder-bio { font-size: 0.93rem; color: var(--muted); line-height: 1.75; margin-bottom: 16px; }
.career-list { list-style: none; margin: 20px 0; display: flex; flex-direction: column; gap: 12px; }
.career-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.88rem; color: var(--muted); }
.career-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); flex-shrink: 0; margin-top: 6px; }
.career-list strong { color: var(--text); display: block; font-size: 0.9rem; }
.founder-sig .name { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--teal); }
.founder-sig .title { font-size: 0.82rem; color: var(--muted); margin-top: 3px; }
.video-wrap { border-radius: 28px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,0.15); aspect-ratio: 16/9; position: sticky; top: 100px; }
.video-wrap iframe { width: 100%; height: 100%; display: block; border: none; }
/* FAQ */
.faq-section { background: var(--cream); }
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; background: none; border: none; text-align: left; padding: 20px 0; font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 600; color: var(--text); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-q svg { flex-shrink: 0; color: var(--coral); transition: transform 0.3s; }
.faq-q.open svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s; font-size: 0.94rem; color: var(--muted); line-height: 1.75; }
.faq-a.open { max-height: 500px; padding-bottom: 20px; }
.faq-a a { color: var(--coral); text-decoration: underline; }
/* LOCATION */
.location-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.location-detail { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.loc-icon { width: 44px; height: 44px; background: var(--coral-light); border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.2rem; }
.location-detail h4 { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 3px; }
.location-detail p { font-size: 0.95rem; color: var(--text); }
.location-map { border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
.location-map iframe { display: block; width: 100%; height: 380px; border: none; }
/* FOOTER */
footer { background: #111; color: white; padding: 70px 6% 40px; }
.footer-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 50px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-brand p { font-size: 0.87rem; color: rgba(255,255,255,0.48); margin-top: 14px; line-height: 1.7; }
.footer-logo { height: 44px; }
footer h5 { color: var(--coral); font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px; }
.footer-links a { display: block; color: rgba(255,255,255,0.5); text-decoration: none; margin-bottom: 10px; font-size: 0.88rem; transition: color 0.2s; }
.footer-links a:hover { color: white; }
.footer-bottom { max-width: 1100px; margin: 28px auto 0; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: rgba(255,255,255,0.28); flex-wrap: wrap; gap: 10px; }
.social-icons { display: flex; gap: 10px; margin-top: 18px; }
.social-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.07); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.55); text-decoration: none; transition: 0.2s; }
.social-icon:hover { background: var(--coral); color: white; }
/* WA FLOAT */
.wa-float { position: fixed; bottom: 28px; right: 28px; background: #25d366; color: white; padding: 14px 22px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 0.9rem; box-shadow: 0 8px 28px rgba(37,211,102,0.35); z-index: 3000; display: flex; align-items: center; gap: 8px; transition: 0.25s; }
.wa-float:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(37,211,102,0.45); }
/* VISIT POPUP */
.visit-popup { display: none; position: fixed; bottom: 28px; left: 28px; background: white; padding: 24px 28px; border-radius: 22px; box-shadow: 0 20px 50px rgba(0,0,0,0.18); max-width: 300px; z-index: 4000; border: 1px solid var(--border); animation: slideUp 0.4s ease; }
@keyframes slideUp { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform: translateY(0); } }
.visit-popup h3 { color: var(--teal); font-size: 1.1rem; margin-bottom: 8px; }
.visit-popup p { font-size: 0.88rem; color: var(--muted); margin-bottom: 16px; }
.close-popup { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--muted); line-height: 1; }
.visit-popup a { display: inline-block; background: var(--coral); color: white; padding: 10px 20px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 0.88rem; transition: 0.2s; }
.visit-popup a:hover { background: #d9705a; }
/* ANIMATIONS */
.fade-up { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
/* RESPONSIVE */
/* ADMISSIONS */
.admissions-banner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; }
.admissions-actions { display: flex; gap: 14px; flex-wrap: wrap; flex-shrink: 0; }
.admissions-points { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 20px; }
.admissions-point { display: flex; gap: 9px; align-items: center; color: rgba(255,255,255,0.9); font-size: 0.92rem; font-weight: 600; }
@media (max-width: 700px) {
    .admissions-banner { flex-direction: column; align-items: flex-start; }
    .admissions-actions { flex-direction: column; width: 100%; }
    .admissions-actions a { width: 100%; box-sizing: border-box; text-align: center; display: block !important; }
    #admissions { padding: 44px 5%; }
    .admissions-points { gap: 12px; flex-direction: column; }
}
@media (max-width: 1000px) {
    .hero-inner, .finland-grid, .gentle-inner, .founder-inner, .location-inner { grid-template-columns: 1fr; }
    .pillars-grid, .programs-grid, .testimonials-grid { grid-template-columns: 1fr; }
    .spaces-grid { grid-template-columns: 1fr; }
    .stats-inner { grid-template-columns: repeat(2, 1fr); }
    .nav-links { display: none; }
    .hei-badge { display: none; }
    .hamburger { display: flex; }
    .insta-grid { grid-template-columns: 1fr; }
    .video-wrap { position: static; }
}
@media (max-width: 700px) {
    .insta-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .section { padding: 70px 5%; }
    .hero { padding: 130px 5% 70px; }
    .trust-bar { gap: 16px; flex-direction: column; align-items: flex-start; padding: 20px 6%; }
    .wa-float { padding: 13px 18px; font-size: 0.85rem; }
    .footer-inner { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .hero-actions { flex-direction: column; }
}

/* ============================================================
   MULTI-PAGE + CONTENT-BLOCK STYLES  (added 2026-08-29)
   Everything above this line is the original one-pager's CSS.
   ============================================================ */

main { display: block; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--teal); color: #fff; padding: 12px 20px; z-index: 5000; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 4px; }

.nav-brand { display: flex; align-items: center; text-decoration: none; }
.nav-links a.active { opacity: 1; color: var(--coral); font-weight: 600; }

/* Fixed nav needs breathing room now that inner pages start with a section, not a hero. */
main > *:first-child { margin-top: 74px; }
main > .hero:first-child { margin-top: 0; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* Prose */
.prose { max-width: 760px; font-size: 1.03rem; color: var(--text); }
.prose.centered { margin: 0 auto; text-align: center; }
.prose p { margin-bottom: 18px; }
.prose h3 { font-size: 1.4rem; color: var(--teal); margin: 32px 0 12px; }
.prose ul, .prose ol { margin: 0 0 18px 22px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--coral); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: 700; }

/* Dark-teal section variant */
.tone-teal { background: var(--teal); color: #fff; }
.tone-teal .section-title { color: #fff; }
.tone-teal .section-sub, .tone-teal .prose { color: rgba(255,255,255,0.78); }
.tone-teal .prose h3 { color: #fff; }

/* Card grid */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.c-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; }
.c-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,0.09); }
.c-card-icon { font-size: 1.9rem; line-height: 1; margin-bottom: 16px; }
.c-card h3 { font-size: 1.25rem; color: var(--teal); margin-bottom: 10px; }
.c-card p { font-size: 0.95rem; color: var(--muted); line-height: 1.7; }

/* Standalone stat row */
.stat-row { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; padding: 36px 5%; background: var(--cream); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* Photo grid */
.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.photo { margin: 0; border-radius: 18px; overflow: hidden; background: var(--cream); box-shadow: var(--shadow); }
.photo img { width: 100%; height: 150px; object-fit: cover; transition: transform .5s ease; }
.photo:hover img { transform: scale(1.04); }
.photo.wide img { height: auto; max-height: 620px; }
.photo figcaption { padding: 13px 18px; font-size: 0.85rem; color: var(--muted); background: #fff; }

/* Pull quote */
.pull-quote { max-width: 780px; margin: 0 auto; text-align: center; }
.pull-quote p { font-family: 'Playfair Display', serif; font-size: clamp(1.3rem, 2.6vw, 1.85rem); line-height: 1.45; color: var(--teal); font-style: italic; }
.pull-quote cite { display: block; margin-top: 22px; font-style: normal; font-size: 0.92rem; font-weight: 600; color: var(--coral); }
.pull-quote cite span { display: block; font-weight: 400; color: var(--muted); font-size: 0.85rem; margin-top: 3px; }

/* FAQ (native details/summary - no JS needed) */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; font-weight: 600; font-size: 1.03rem; color: var(--teal); position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--coral); }
.faq-item[open] summary::after { content: '\2212'; }
.faq-a { padding: 0 44px 24px 0; color: var(--muted); font-size: 0.97rem; line-height: 1.75; }

/* CTA band */
.cta-band { background: var(--teal); padding: 44px 5%; }
.cta-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; align-items: flex-start; justify-content: space-between; }
.cta-label { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--coral); margin-bottom: 10px; }
.cta-inner h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 3vw, 2.4rem); color: #fff; margin-bottom: 12px; line-height: 1.2; }
.cta-inner p { color: rgba(255,255,255,0.75); font-size: 1rem; max-width: 560px; line-height: 1.7; }
.cta-btn-primary { background: var(--coral); color: #fff; padding: 15px 30px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 0.95rem; white-space: nowrap; display: inline-block; }
.cta-btn-ghost { background: rgba(255,255,255,0.12); color: #fff; padding: 15px 30px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 0.95rem; white-space: nowrap; border: 1px solid rgba(255,255,255,0.25); display: inline-block; }

/* Form section */
.section-inner.narrow { max-width: 620px; }

/* Embeds */
.embed-wrap { position: relative; width: 100%; max-width: 900px; margin: 0 auto; }
.embed-wrap iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 18px; display: block; }

/* Document download card */
.doc-card { display: flex; align-items: center; gap: 14px; max-width: 640px; padding: 18px; background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
.doc-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
.doc-icon { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; background: var(--coral-light); color: var(--coral); border-radius: 12px; font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; }
.doc-meta { flex: 1; display: flex; flex-direction: column; }
.doc-meta strong { color: var(--teal); font-size: 1.02rem; }
.doc-meta em { font-style: normal; color: var(--muted); font-size: 0.87rem; }
.doc-go { color: var(--coral); font-weight: 600; font-size: 0.88rem; white-space: nowrap; }

/* Hero side image */
.hero-media img.hero-img { width: 100%; border-radius: var(--radius); box-shadow: 0 20px 50px rgba(0,0,0,0.12); }

/* Footer additions */
.footer-links h4 { font-family: 'DM Sans', sans-serif; font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 16px; font-weight: 700; }
.footer-addr { color: rgba(255,255,255,0.5); font-size: 0.88rem; line-height: 1.7; margin-bottom: 10px; }

/* Floating WhatsApp button */
.wa-float { position: fixed; right: 14px; bottom: 14px; width: 54px; height: 54px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,0.22); z-index: 1500; transition: transform .2s; }
.wa-float:hover { transform: scale(1.08); }

/* ---------- mobile-first enhancements ----------
   Everything above is the phone layout. These only add on larger screens. */

@media (min-width: 560px) {
    .photo-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
    .photo img { height: 200px; }
    .card-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

@media (min-width: 900px) {
    main > *:first-child { margin-top: 86px; }
    .card-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; }
    .c-card { padding: 34px 30px; }
    .photo-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
    .photo img { height: 260px; }
    .stat-row { gap: 40px; padding: 54px 6%; }
    .cta-band { padding: 64px 6%; }
    .cta-inner { flex-direction: row; align-items: center; gap: 40px; }
    .wa-float { right: 20px; bottom: 20px; }
    .doc-card { gap: 20px; padding: 22px 26px; }
}

/* ---------- mobile hardening ----------
   Most Coral traffic arrives from Meta ads on a phone, so these are
   correctness rules, not polish. */

html { -webkit-text-size-adjust: 100%; }
img, video, iframe, svg { max-width: 100%; }
body { overflow-x: hidden; }

/* Anything wide scrolls inside itself rather than pushing the page sideways. */
.prose table, .embed-wrap { max-width: 100%; overflow-x: auto; }

/* iOS zooms the whole page when a focused input is under 16px. */
input, select, textarea { font-size: 16px; }

/* Thumb-sized targets. 44px is the accessibility floor. */
nav a, .mobile-menu a, .nav-cta, .btn-primary, .btn-secondary,
.cta-btn-primary, .cta-btn-ghost, .faq-item summary, .wa-float {
    min-height: 44px;
}
nav a, .nav-cta { display: inline-flex; align-items: center; }

/* The floating WhatsApp button must never sit on top of a page's last CTA. */
main { padding-bottom: 8px; }
@media (max-width: 560px) {
    footer { padding-bottom: 88px; }
}

/* Inherited components that were sized for desktop and get cramped on a phone.
   These come last so they win without editing the original rules. */
@media (max-width: 560px) {
    .pathfinder-card { padding: 26px 20px; border-radius: 24px; }
    .pathfinder-card h3 { font-size: 1.3rem; }
    .hero-stats { gap: 18px; margin-top: 28px; padding-top: 24px; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions a { text-align: center; justify-content: center; }
    .trust-bar { gap: 14px; }
}

/* ============================================================
   BRAND APPLICATION — 2026-08-31
   The palette above is now correct, but the green from the logo
   was not being used anywhere. These rules put both logo colours
   into the design and bring in the brochure pastels as grounds.
   Appended last so they win without editing the rules above.
   ============================================================ */

/* The primary "do the thing" button is the logo green. */
.nav-cta { background: var(--brand-green-ink); }
.nav-cta:hover { background: #416a26; }
.cta-btn-primary { background: var(--brand-green-ink); }
.cta-btn-primary:hover { background: #416a26; }
.pathfinder-card button { background: var(--brand-green-ink); }
.pathfinder-card button:hover { background: #416a26; box-shadow: 0 8px 24px rgba(117,181,67,.32); }

/* The badge and small marks take the logo teal. */
.hero-badge { background: rgba(67,168,180,.12); color: var(--teal); }
.section-label { color: var(--coral-ink); }
.cta-label { color: var(--blush); } /* sits on deep teal — the salmon is only 2.7:1 there */
.c-card-icon { filter: none; }

/* Section grounds, following the brochure.
   NOTE: an earlier attempt used `.section:nth-of-type(even)`, which is more
   specific (0,2,0) than `.testimonials-section` (0,1,0). It therefore beat the
   dark teal background on the testimonials and left white text on cream —
   invisible. Grounds are now assigned per block type only, so a section that
   already owns its background is never touched. */
.cards-section    { background: var(--cream); }
.steps-section    { background: var(--warm-white); }
.split-section    { background: var(--cream); }
.open-section     { background: var(--warm-white); }
.programs-block   { background: var(--warm-white); }
.tick-section     { background: var(--cream); }

/* Programme cards */
.prog-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
.prog {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.prog-head { padding: 18px 22px; display: flex; align-items: center; gap: 10px; }
.prog-head h3 { font-size: 1.2rem; color: var(--teal); margin: 0; }
.prog-head .ic { font-size: 1.3rem; line-height: 1; }
.prog.a .prog-head { background: var(--blush); }
.prog.b .prog-head { background: var(--lilac); }
.prog.c .prog-head { background: var(--sage); }
.prog-when {
    display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 14px 22px 0;
    font-size: 0.84rem; font-weight: 600; color: var(--teal); text-transform: uppercase; letter-spacing: .5px;
}
.prog-when span { white-space: nowrap; }
.prog-body { padding: 14px 22px 20px; flex: 1; }
.prog-body ul { list-style: none; margin: 0; padding: 0; }
.prog-body li { font-size: 0.94rem; color: var(--text); padding: 5px 0; line-height: 1.5; }
.prog-note { font-size: 0.88rem; color: var(--muted); font-style: italic; margin-top: 10px; }
.prog-fees { margin: 0 22px 22px; background: var(--cream); border-radius: 14px; padding: 14px 18px; }
.prog-fees h4 {
    font-family: 'DM Sans', sans-serif; font-size: 0.72rem; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--muted); margin-bottom: 8px; font-weight: 700;
}
.prog-fees dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; margin: 0; }
.prog-fees dt { font-size: 0.9rem; color: var(--text); }
.prog-fees dd { margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--teal); font-variant-numeric: tabular-nums; }

/* "Why families choose Coral" — a tick list, not cards. */
.tick-list { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
.tick {
    display: flex; align-items: center; gap: 12px; background: #fff;
    border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px;
}
.tick .mark {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    background: var(--brand-green-ink); color: #fff; display: grid; place-items: center;
    font-size: 0.8rem; font-weight: 700;
}
.tick span { font-size: 0.97rem; font-weight: 600; color: var(--teal); }

@media (min-width: 700px) {
    .prog-grid { grid-template-columns: repeat(2, 1fr); }
    .tick-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
    .prog-grid { grid-template-columns: repeat(3, 1fr); }
    .tick-list { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   WhatsApp enquiry dialog + "what's open now" panels — 2026-08-31
   ============================================================ */

.eq-backdrop {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(29,95,104,.55);
    display: grid; place-items: center; padding: 18px;
    animation: eq-fade .2s ease;
}
@keyframes eq-fade { from { opacity: 0; } }

.eq-modal {
    position: relative; background: #fff; border-radius: 22px;
    padding: 30px 26px 26px; width: 100%; max-width: 460px;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 30px 70px rgba(29,95,104,.3);
}
.eq-close {
    position: absolute; top: 12px; right: 12px; width: 38px; height: 38px;
    border: 0; background: transparent; color: var(--muted);
    font-size: 1.6rem; line-height: 1; cursor: pointer; border-radius: 50%;
}
.eq-close:hover { background: var(--cream); color: var(--text); }

.eq-eyebrow {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: var(--coral-ink); margin-bottom: 6px;
}
.eq-modal h2 {
    font-family: 'Playfair Display', serif; font-size: 1.5rem;
    color: var(--teal); line-height: 1.2; margin-bottom: 8px;
}
.eq-blurb { font-size: 0.9rem; color: var(--muted); margin-bottom: 20px; line-height: 1.6; }

.eq-field { display: block; margin-bottom: 14px; }
.eq-field > span {
    display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
.eq-field > span em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; }
.eq-field input, .eq-field select {
    width: 100%; padding: 12px 14px; border: 1px solid var(--border);
    border-radius: 10px; font: inherit; font-size: 16px; background: #fff; color: var(--text);
}
.eq-field input:focus, .eq-field select:focus {
    outline: 3px solid var(--brand-teal); outline-offset: 1px; border-color: transparent;
}

.eq-note { font-size: 0.82rem; color: var(--muted); margin: 16px 0 14px; line-height: 1.5; }
.eq-send { width: 100%; justify-content: center; min-height: 48px; }

/* the enquiry buttons themselves */
.eq-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 22px; border: 0; border-radius: 50px;
    background: var(--brand-green-ink); color: #fff;
    font: inherit; font-size: 0.92rem; font-weight: 600;
    text-decoration: none; cursor: pointer; transition: background .2s, transform .2s;
}
.eq-btn:hover { background: #416a26; transform: translateY(-2px); }
.eq-btn.ghost {
    background: transparent; color: var(--teal); border: 2px solid var(--border);
}
.eq-btn.ghost:hover { background: var(--cream); border-color: var(--teal); transform: none; }
.prog .eq-btn { margin: 0 22px 22px; }

/* ---------- "open now" panels ---------- */

.open-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 28px; }
.open-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 26px 24px; box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 12px;
    border-top: 5px solid var(--brand-teal);
}
.open-card.green { border-top-color: var(--brand-green); }
.open-status {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    background: var(--sage); color: #3d6321; padding: 5px 12px; border-radius: 50px;
}
.open-status::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: #4e7d2e; box-shadow: 0 0 0 3px rgba(78,125,46,.22);
}
.open-card h3 { font-size: 1.3rem; color: var(--teal); line-height: 1.25; }
.open-card p { font-size: 0.95rem; color: var(--muted); line-height: 1.65; }
.open-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.86rem; color: var(--text); font-weight: 600; }
.open-meta span { white-space: nowrap; }
.open-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 6px; }

@media (min-width: 760px) {
    .open-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .eq-backdrop { animation: none; }
    .eq-btn:hover { transform: none; }
}

/* ============================================================
   Admission process + included/extra lists — 2026-08-31
   ============================================================ */

/* Numbered process. The counter is real information here — admission is an
   ordered sequence — so the numbers earn their place. */
.steps { list-style: none; counter-reset: step; margin: 30px 0 0; padding: 0; max-width: 760px; }
.step-item {
    counter-increment: step;
    position: relative;
    padding: 0 0 30px 60px;
}
.step-item::before {
    content: counter(step);
    position: absolute; left: 0; top: 0;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--brand-green-ink); color: #fff;
    display: grid; place-items: center;
    font-weight: 700; font-size: 1rem;
    font-variant-numeric: tabular-nums;
}
/* the connecting line, stopping at the last step */
.step-item::after {
    content: ''; position: absolute; left: 19px; top: 46px; bottom: 6px;
    width: 2px; background: var(--border);
}
.step-item:last-child { padding-bottom: 0; }
.step-item:last-child::after { display: none; }
.step-item h3 { font-size: 1.15rem; color: var(--teal); margin-bottom: 6px; line-height: 1.3; }
.step-item p { font-size: 0.96rem; color: var(--muted); line-height: 1.7; }

/* Included / charged separately */
.split-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 28px; max-width: 820px; }
.split-col {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 24px 26px; box-shadow: var(--shadow);
    border-left: 5px solid var(--brand-teal);
}
.split-col.yes { border-left-color: var(--brand-green); }
.split-col.no  { border-left-color: var(--coral); }
.split-col h3 { font-size: 1.08rem; color: var(--teal); margin-bottom: 12px; }
.split-col ul { list-style: none; margin: 0; padding: 0; }
.split-col li {
    position: relative; padding: 7px 0 7px 26px;
    font-size: 0.96rem; color: var(--text); line-height: 1.55;
}
.split-col.yes li::before {
    content: '\2713'; position: absolute; left: 0; top: 7px;
    color: var(--brand-green-ink); font-weight: 700;
}
.split-col.no li::before {
    content: '\002B'; position: absolute; left: 0; top: 6px;
    color: var(--coral-ink); font-weight: 700; font-size: 1.05rem;
}

@media (min-width: 700px) {
    .split-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 560px) {
    .step-item { padding-left: 50px; padding-bottom: 26px; }
    .step-item::before { width: 34px; height: 34px; font-size: 0.92rem; }
    .step-item::after { left: 16px; top: 40px; }
}

/* ============================================================
   Fee tiers + the animated learning-spaces plan — 2026-08-31
   ============================================================ */

/* ---------- consultancy tiers ---------- */
.tier-scroll { overflow-x: auto; margin-top: 26px; -webkit-overflow-scrolling: touch; }
table.tiers {
    width: 100%; min-width: 460px; border-collapse: collapse;
    background: #fff; border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow);
}
table.tiers th, table.tiers td { padding: 15px 18px; text-align: left; }
table.tiers thead th {
    background: var(--teal); color: #fff;
    font-size: 0.74rem; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700;
}
table.tiers tbody tr + tr { border-top: 1px solid var(--border); }
table.tiers tbody th { font-size: 1rem; color: var(--teal); font-weight: 700; }
table.tiers td { font-size: 0.95rem; color: var(--muted); }
table.tiers td.fee { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tier-note { margin-top: 16px; font-size: 0.88rem; color: var(--muted); max-width: 62ch; line-height: 1.65; }

/* ---------- the campus plan ----------
   An interactive floor plan: hover or tap a room and it lifts, tints and
   explains itself. The drawing is information, not decoration — it shows how
   the rooms sit relative to one another. */
.plan-wrap { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 30px; align-items: start; }
.plan {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px; box-shadow: var(--shadow);
}
.plan svg { width: 100%; height: auto; display: block; }

.room { cursor: pointer; }
.room .room-shape {
    fill: var(--cream); stroke: var(--teal); stroke-width: 2.5;
    transition: fill .3s ease, transform .3s cubic-bezier(.2,1,.3,1);
    transform-origin: center; transform-box: fill-box;
}
.room .room-label {
    font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700;
    fill: var(--teal); pointer-events: none;
}
.room .room-icon { font-size: 22px; pointer-events: none; }
.room:hover .room-shape,
.room:focus-visible .room-shape,
.room.on .room-shape { fill: var(--mint, #d6ecef); transform: scale(1.03); }
.room.on .room-shape { stroke-width: 4; }
.room:focus-visible { outline: none; }
.room:focus-visible .room-shape { stroke: var(--brand-green-ink); stroke-width: 4; }

/* children drifting through the plan — ambient, never distracting */
.plan-dot { fill: var(--coral); opacity: .75; }
@media (prefers-reduced-motion: no-preference) {
    .plan-dot.d1 { animation: drift1 14s ease-in-out infinite; }
    .plan-dot.d2 { animation: drift2 18s ease-in-out infinite; }
    .plan-dot.d3 { animation: drift3 16s ease-in-out infinite; }
}
@keyframes drift1 {
    0%,100% { transform: translate(0,0); }
    25% { transform: translate(120px,40px); }
    50% { transform: translate(190px,-30px); }
    75% { transform: translate(60px,60px); }
}
@keyframes drift2 {
    0%,100% { transform: translate(0,0); }
    33% { transform: translate(-90px,50px); }
    66% { transform: translate(80px,80px); }
}
@keyframes drift3 {
    0%,100% { transform: translate(0,0); }
    40% { transform: translate(150px,-50px); }
    70% { transform: translate(-40px,-20px); }
}

.plan-detail {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 26px; box-shadow: var(--shadow); min-height: 200px;
    border-top: 5px solid var(--brand-teal);
}
.plan-detail .hint {
    font-size: 0.72rem; letter-spacing: 1.6px; text-transform: uppercase;
    font-weight: 700; color: var(--muted);
}
.plan-detail h3 { font-size: 1.35rem; color: var(--teal); margin: 8px 0 10px; }
.plan-detail p { font-size: 0.97rem; color: var(--muted); line-height: 1.7; }
.plan-detail ul { list-style: none; margin: 14px 0 0; padding: 0; }
.plan-detail li {
    position: relative; padding: 5px 0 5px 22px; font-size: 0.93rem; color: var(--text);
}
.plan-detail li::before {
    content: '\2022'; position: absolute; left: 4px; color: var(--brand-green-ink); font-weight: 700;
}
.plan-fade { animation: plan-fade .35s ease; }
@keyframes plan-fade { from { opacity: 0; transform: translateY(8px); } }

@media (min-width: 900px) {
    .plan-wrap { grid-template-columns: 1.25fr .75fr; gap: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .room .room-shape { transition: none; }
    .plan-fade { animation: none; }
}

/* ============================================================
   Places-available board — 2026-08-31
   Scarcity is only persuasive when it is true, so the design shows
   the real counts and says plainly when they were last updated.
   ============================================================ */

.seats-board {
    margin-top: 28px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
}

.seats-updated {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 0.74rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--muted); margin-bottom: 20px;
}
.live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--brand-green-ink); flex: 0 0 auto;
    box-shadow: 0 0 0 0 rgba(78,125,46,.55);
}
@media (prefers-reduced-motion: no-preference) {
    .live-dot { animation: seat-pulse 2.4s ease-out infinite; }
}
@keyframes seat-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(78,125,46,.55); }
    70%  { box-shadow: 0 0 0 9px rgba(78,125,46,0); }
    100% { box-shadow: 0 0 0 0 rgba(78,125,46,0); }
}

.seats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.seat-card {
    position: relative; overflow: hidden;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px 18px;
    text-align: center;
    transition: transform .3s cubic-bezier(.2,1,.3,1), box-shadow .3s;
}
.seat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.seat-num {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.4rem, 9vw, 3.4rem);
    font-weight: 700; line-height: 1;
    color: var(--teal);
    font-variant-numeric: tabular-nums;
}
.seat-age {
    margin-top: 8px; font-size: 0.9rem; font-weight: 600; color: var(--text);
}
.seat-state {
    margin-top: 10px; display: inline-block;
    font-size: 0.72rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
    padding: 5px 12px; border-radius: 50px;
    background: var(--sage); color: #3d6321;
}

/* Low availability. The urgent tone is earned — five places really is five. */
.seat-card.low {
    background: var(--coral-light);
    border-color: rgba(179,78,49,.28);
}
.seat-card.low .seat-num { color: var(--coral-ink); }
.seat-card.low .seat-state {
    background: var(--coral-ink); color: #fff;
}
.seat-card.low::before {
    content: ''; position: absolute; inset: 0;
    border-radius: 16px; pointer-events: none;
    box-shadow: inset 0 0 0 2px rgba(179,78,49,.35);
}

.seats-note {
    margin-top: 18px; font-size: 0.88rem; color: var(--muted);
    line-height: 1.65; max-width: 62ch;
}

@media (min-width: 700px) {
    .seats-board { padding: 30px 32px; }
    .seats-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .seat-card { padding: 26px 20px; }
}

/* ============================================================
   Careers — teacher readiness assessment — 2026-08-31
   A long form. The job of this CSS is to make it feel finishable:
   visible progress, one section at a time, generous tap targets.
   ============================================================ */

.q-wrap { max-width: 760px; margin: 0 auto; }

.q-progress {
    position: sticky; top: 76px; z-index: 40;
    height: 6px; background: var(--border); border-radius: 50px; overflow: hidden;
    margin-bottom: 10px;
}
.q-progress-bar {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--brand-teal), var(--brand-green));
    transition: width .4s cubic-bezier(.2,.8,.3,1);
}
.q-count {
    font-size: 0.74rem; font-weight: 700; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--muted); margin-bottom: 22px;
}

.q-h { font-size: clamp(1.5rem, 5vw, 2rem); color: var(--teal); margin-bottom: 8px; }
.q-intro { font-size: 0.98rem; color: var(--muted); line-height: 1.7; margin-bottom: 26px; max-width: 62ch; }

.q-fields { display: grid; grid-template-columns: 1fr; gap: 16px; }
.q-field { display: block; }
.q-field > span { display: block; font-size: 0.92rem; font-weight: 600; color: var(--text); margin-bottom: 6px; line-height: 1.5; }
.q-field > span b { color: var(--coral-ink); }
.q-hint { display: block; font-style: normal; font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; }
.q-field input, .q-field select, .q-field textarea {
    width: 100%; padding: 12px 14px; border: 1px solid var(--border);
    border-radius: 10px; font: inherit; font-size: 16px; background: #fff; color: var(--text);
}
.q-field textarea { min-height: 110px; resize: vertical; line-height: 1.65; }
.q-field input:focus, .q-field select:focus, .q-field textarea:focus {
    outline: 3px solid var(--brand-teal); outline-offset: 1px; border-color: transparent;
}
.q-written { margin-bottom: 24px; }

/* one scored question */
.q-item {
    border: 0; padding: 0; margin: 0 0 30px;
    border-top: 1px solid var(--border); padding-top: 24px;
}
.q-item:first-of-type { border-top: 0; padding-top: 0; }
.q-item legend {
    font-size: 1.03rem; font-weight: 600; color: var(--teal);
    line-height: 1.55; padding: 0; margin-bottom: 14px;
}

.q-opt {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; margin-bottom: 9px;
    border: 1px solid var(--border); border-radius: 12px;
    background: #fff; cursor: pointer;
    transition: border-color .2s, background .2s;
    min-height: 46px;
}
.q-opt:hover { border-color: var(--brand-teal); background: var(--cream); }
.q-opt input { margin: 3px 0 0; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--brand-green-ink); }
.q-opt span { font-size: 0.95rem; line-height: 1.6; color: var(--text); }
.q-opt:has(input:checked) {
    border-color: var(--brand-green-ink); background: var(--sage);
    box-shadow: inset 0 0 0 1px var(--brand-green-ink);
}
.q-opt input:focus-visible { outline: 3px solid var(--brand-teal); outline-offset: 3px; }

.q-nav { display: flex; gap: 12px; justify-content: flex-end; margin-top: 34px; flex-wrap: wrap; }
.q-nav button { min-height: 48px; cursor: pointer; border: 0; }
.q-nav .btn-secondary { cursor: pointer; }

.q-error {
    margin-top: 16px; padding: 13px 16px; border-radius: 10px;
    background: var(--coral-light); color: var(--coral-ink);
    border: 1px solid rgba(179,78,49,.3); font-size: 0.92rem; line-height: 1.6;
}

.q-done { text-align: center; padding: 40px 20px; }
.q-done h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 5vw, 2.2rem); color: var(--teal); margin-bottom: 14px; }
.q-done p { font-size: 1rem; color: var(--muted); line-height: 1.75; max-width: 52ch; margin: 0 auto 12px; }
.q-done-note { font-size: 0.9rem; }

/* the honest note about what this assessment can and cannot do */
.q-caveat {
    background: var(--cream); border-left: 5px solid var(--brand-teal);
    border-radius: 12px; padding: 18px 22px; margin-top: 26px;
}
.q-caveat p { font-size: 0.92rem; color: var(--muted); line-height: 1.7; margin: 0; }

@media (min-width: 640px) {
    .q-fields { grid-template-columns: 1fr 1fr; }
    .q-fields .q-field:nth-child(10),
    .q-fields .q-field:nth-child(11) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .q-progress-bar { transition: none; }
}

/* ============================================================
   Assessment v2 — gate, best/worst grid, planning scenarios
   ============================================================ */

.q-gate { background:#fff; border:1px solid var(--border); border-radius:var(--radius);
    padding:28px 24px; box-shadow:var(--shadow); }
.q-eyebrow { font-size:.72rem; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
    color:var(--coral-ink); margin-bottom:8px; }
.q-open { width:100%; justify-content:center; min-height:52px; margin-top:8px; cursor:pointer; border:0; }

/* step pips */
.q-steps { display:flex; gap:6px; overflow-x:auto; margin-bottom:22px; padding-bottom:4px;
    scrollbar-width:none; }
.q-steps::-webkit-scrollbar { display:none; }
.q-pip { flex:0 0 auto; font-size:.72rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
    padding:6px 13px; border-radius:50px; background:var(--cream); color:var(--muted);
    border:1px solid var(--border); white-space:nowrap; transition:.25s; }
.q-pip.on { background:var(--teal); color:#fff; border-color:var(--teal); }
.q-pip.done { background:var(--sage); color:#3d6321; border-color:var(--sage); }

/* best / worst grid */
.q-bw-head { display:grid; grid-template-columns:44px 44px 1fr; gap:8px; align-items:center;
    margin-bottom:6px; }
.q-bw-head span { font-size:.66rem; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
    color:var(--muted); text-align:center; }
.q-bw-row { display:grid; grid-template-columns:44px 44px 1fr; gap:8px; align-items:start;
    padding:12px 10px; border-radius:10px; transition:background .2s; }
.q-bw-row:hover { background:var(--cream); }
.q-bw-row input { width:20px; height:20px; margin:2px auto 0; }
.q-bw-row input[data-bw="best"]  { accent-color:var(--brand-green-ink); }
.q-bw-row input[data-bw="worst"] { accent-color:var(--coral-ink); }
.q-bw-text { font-size:.94rem; line-height:1.6; }
.q-bw-row:has(input[data-bw="best"]:checked)  { background:var(--sage); }
.q-bw-row:has(input[data-bw="worst"]:checked) { background:var(--coral-light); }

/* planning scenarios */
.q-plan { border:1px solid var(--border); border-left:5px solid var(--brand-teal);
    border-radius:14px; padding:20px 22px; margin-bottom:22px; background:#fff; }
.q-plan-scene { font-size:1rem; font-weight:600; color:var(--teal); line-height:1.6; margin-bottom:10px; }
.q-plan-ask { font-size:.96rem; color:var(--text); line-height:1.65; margin-bottom:10px; }
.q-plan textarea { width:100%; padding:13px 15px; border:1px solid var(--border); border-radius:10px;
    font:inherit; font-size:16px; line-height:1.65; resize:vertical; background:var(--warm-white); }
.q-plan textarea:focus { outline:3px solid var(--brand-teal); outline-offset:1px; border-color:transparent; }
.q-words { font-size:.76rem; color:var(--muted); margin-top:6px; text-align:right; }
.q-words.thin { color:var(--coral-ink); font-weight:700; }

/* ============================================================
   Before / Now practice changes
   ============================================================ */
.practice-section { background: var(--cream); }
.pr-toggle { display:inline-flex; gap:4px; padding:4px; background:#fff; border:1px solid var(--border);
    border-radius:50px; margin-top:26px; }
.pr-tab { border:0; background:transparent; cursor:pointer; font:inherit; font-size:.86rem; font-weight:700;
    color:var(--muted); padding:0 18px; min-height:42px; border-radius:50px; transition:.25s; white-space:nowrap; }
.pr-tab.on { background:var(--teal); color:#fff; }

.pr-grid { display:grid; grid-template-columns:1fr; gap:16px; margin-top:22px; }
.pr-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:24px;
    box-shadow:var(--shadow); transition:transform .3s cubic-bezier(.2,1,.3,1); }
.pr-card:hover { transform:translateY(-4px); }
.pr-icon { font-size:1.8rem; line-height:1; margin-bottom:12px; }
.pr-card h3 { font-size:1.2rem; color:var(--teal); margin-bottom:8px; }
.pr-lead { font-size:.95rem; color:var(--text); line-height:1.7; margin-bottom:16px; }
.pr-tag { display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:1.2px;
    text-transform:uppercase; padding:4px 11px; border-radius:50px; margin-bottom:8px; }
.pr-before .pr-tag { background:var(--coral-light); color:var(--coral-ink); }
.pr-now .pr-tag { background:var(--sage); color:#3d6321; }
.pr-state p { font-size:.92rem; color:var(--muted); line-height:1.7; }
/* one state at a time, cross-faded */
.pr-state { display:none; animation:pr-in .35s ease; }
.pr-grid[data-state="before"] .pr-before { display:block; }
.pr-grid[data-state="now"] .pr-now { display:block; }
@keyframes pr-in { from { opacity:0; transform:translateY(6px); } }
.pr-note { margin-top:20px; font-size:.9rem; color:var(--muted); max-width:62ch; line-height:1.7; }
@media (min-width:760px){ .pr-grid { grid-template-columns:repeat(2,1fr); gap:20px; } }
@media (prefers-reduced-motion:reduce){ .pr-state{animation:none} .pr-card:hover{transform:none} }

/* ============================================================
   Illustrated room scenes
   ============================================================ */
.scene-stage { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
    background:var(--cream); box-shadow:var(--shadow); margin-bottom:16px; }
.scene { width:100%; height:auto; display:block; }
.scene-fade { animation:scene-in .45s cubic-bezier(.2,.8,.3,1); }
@keyframes scene-in { from { opacity:0; transform:scale(.985); } }

/* ambient life inside the illustrations */
@media (prefers-reduced-motion: no-preference) {
  .sc-sway   { animation:sc-sway 6s ease-in-out infinite; transform-origin:center bottom; }
  .sc-sway.b { animation-duration:7.5s; animation-delay:-2s; }
  .sc-sway.c { animation-duration:8.5s; animation-delay:-4s; }
  .sc-kid    { animation:sc-bob 4.5s ease-in-out infinite; transform-box:fill-box; }
  .sc-float  { animation:sc-bob 5.5s ease-in-out infinite; }
  .sc-pulse  { animation:sc-pulse 3.4s ease-in-out infinite; }
  .sc-pulse.b{ animation-delay:-1.6s; }
  .sc-glow   { animation:sc-glow 5s ease-in-out infinite; }
  .sc-sun    { animation:sc-glow 6s ease-in-out infinite; }
}
@keyframes sc-sway  { 0%,100%{transform:rotate(-1.4deg)} 50%{transform:rotate(1.4deg)} }
@keyframes sc-bob   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes sc-pulse { 0%,100%{opacity:.55} 50%{opacity:1} }
@keyframes sc-glow  { 0%,100%{opacity:.35} 50%{opacity:.8} }

/* pillar illustrations replace the emoji on cards that carry art */
.c-card.has-art { padding-top: 0; overflow: hidden; }
.c-card-art { background: var(--cream); border-radius: 14px; margin: 0 0 16px;
    padding: 14px 10px; display: grid; place-items: center; }
.pillar-art { width: 100%; max-width: 150px; height: auto; display: block; }

/* The illustration is the point of this section, so it spans the full width
   above the plan rather than being squeezed into the detail column. */
.plan-wrap > .scene-stage { grid-column: 1 / -1; margin-bottom: 0; padding: 10px; }
/* The SVG is 520x340. Letting it stretch to a 900px container blew it up to
   ~1.7x and pushed the drawing out of the frame, so cap the width and centre. */
.scene-stage .scene { max-width: 520px; width: 100%; margin: 0 auto; }