:root { --bg: #F4FAFD; --surface: #FFFFFF; --alt: #E8F4FB; --ink: #1D2A3A; --muted: #55657A; --accent: #1D6AA3; --accent-ink: #fff; --line: #D3E7F3;
  --radius: 22px; --font-head: "Fredoka", system-ui, sans-serif; --font-body: "Nunito Sans", system-ui, sans-serif;
  --f-accent: #1D6AA3; --f-line: #C7DFEE; --f-radius: 16px; }
h1, h2, h3 { font-weight: 600; }
.site-head { background: #fff; box-shadow: 0 4px 0 #D3E7F3; }
.nav-menu a { font-family: var(--font-head); font-weight: 500; font-size: 17px; }
@media (min-width: 1181px) { .nav-menu a { font-size: 15.5px; } }
.nav-menu a[aria-current] { background: var(--accent); color: #fff; }
.btn { font-family: var(--font-head); font-weight: 600; }
.rb-hero { padding: clamp(40px, 6vw, 80px) 0 0; background: linear-gradient(#BFE3F7, #E8F4FB 55%, #F4FAFD); overflow: hidden; }
.rb-hero h1 { font-size: clamp(2.3rem, 5.5vw, 4.2rem); max-width: 18ch; }
.rb-hero .lead { max-width: 60ch; }
.building { position: relative; margin: 40px auto 0; max-width: 1060px; background: #FFF8EE; border: 4px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0; padding: 0 18px; }
.roof { position: relative; height: 90px; margin: 0 -40px; background: #E5473B; clip-path: polygon(6% 100%, 50% 0, 94% 100%); display: grid; place-items: end center; padding-bottom: 12px; top: -4px; }
.roof img { width: 190px; background: #fff; border-radius: 999px; padding: 6px 14px; }
.floor { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 34px 0 18px; border-bottom: 10px solid #C9A27A; }
.floor-label { position: absolute; top: 8px; left: 0; font: 600 14px var(--font-head); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.room { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 14px 10px 16px; background: color-mix(in srgb, var(--class) 14%, #fff); border: 3px solid var(--ink); border-radius: 14px; text-decoration: none; color: var(--ink); transition: transform .3s var(--ease-out), box-shadow .3s; }
.room:hover, .room:focus-visible { transform: translateY(-6px); box-shadow: 0 10px 0 var(--class); }
.room .window { width: 100%; aspect-ratio: 4/3; border-radius: 8px; border: 3px solid var(--ink); background: center / cover; margin-bottom: 8px; position: relative; }
.room .window::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(50% - 1.5px), var(--ink) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)), linear-gradient(transparent calc(50% - 1.5px), var(--ink) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)); opacity: .7; }
.room .mascot { position: absolute; width: 58px; height: 58px; top: -26px; right: -10px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .15)); transition: transform .4s var(--ease-out); }
.room:hover .mascot { transform: rotate(-12deg) scale(1.15) translateY(-4px); }
.room strong { font-family: var(--font-head); font-size: 1.2rem; }
.room em { font-style: normal; font-size: 14px; color: var(--muted); }
.room.wide { grid-column: span 1; }
.room.door { justify-content: flex-end; background: #FFE9DC; }
.door-shape { width: 60%; flex: 1; min-height: 120px; background: #EB6A2A; border: 3px solid var(--ink); border-radius: 60px 60px 0 0; position: relative; }
.door-shape::after { content: ""; position: absolute; right: 14%; top: 55%; width: 10px; height: 10px; border-radius: 50%; background: #FFC531; }
.ground { height: 26px; margin: 0 -60px; background: #7BB661; border-top: 4px solid var(--ink); }
@media (max-width: 900px) { .floor { grid-template-columns: repeat(2, 1fr); } .roof { margin: 0 -24px; } .room .mascot { width: 46px; height: 46px; top: -20px; right: -6px; } }
.class-card .mascot { position: absolute; top: 10px; right: 10px; width: 54px; height: 54px; background: #fff; border-radius: 50%; padding: 6px; z-index: 1; box-shadow: 0 4px 10px rgba(0, 0, 0, .15); }
.class-card { border: 3px solid var(--ink); }
.card, .quote, .panel, .doc-list a, .form-card, .vision li { border: 3px solid var(--ink); }
.card-icon { border-radius: 50%; background: #E8F4FB; }
.page-hero { background: linear-gradient(#BFE3F7, var(--alt)); }
.cta { background: #C4342A; }
.cta .btn { color: #C4342A; }
.site-foot { background: var(--ink); border-top: 14px solid #7BB661; }
.class-section h2 .dot { width: .8em; height: .8em; border: 3px solid var(--ink); }
.step-n { background: #F2B531; color: var(--ink); border: 3px solid var(--ink); }