/* ---------- Navy colour scheme (one look for every page and school phase) ---------- */
    :root {
      --brand-50: 239 244 255; --brand-100: 219 230 255; --brand-200: 186 207 255; --brand-300: 140 170 245;
      --brand-500: 59 99 200; --brand-600: 37 70 160; --brand-700: 27 54 125; --brand-800: 19 40 98; --brand-900: 12 25 70;
      --accent-300: 125 211 252; --accent-400: 56 189 248; --accent-500: 14 165 233;
      --pop-100: 237 233 254; --pop-400: 167 139 250;
      --alert: 76 29 149;
      --paper: 244 247 252; --ink: 12 25 56;
      --shadow: 12 25 56;
    }
    body { font-family: 'Lexend', sans-serif; background: rgb(var(--paper)); color: rgb(var(--ink)); scroll-behavior: smooth; }
    html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
    h1, h2, h3, h4, .font-display { font-family: 'Fredoka', sans-serif; }
    .dyslexia-font, .dyslexia-font * { font-family: 'Lexend', sans-serif !important; letter-spacing: 0.05em !important; word-spacing: 0.1em !important; line-height: 1.8 !important; }
    .high-contrast { filter: contrast(125%); }

    /* ---------- Sticker look ---------- */
    .sticker { background: #fff; border: 2px solid rgb(var(--ink)); border-radius: 1.5rem; box-shadow: 5px 5px 0 0 rgb(var(--shadow)); }
    .sticker-sm { background: #fff; border: 2px solid rgb(var(--ink)); border-radius: 1rem; box-shadow: 3px 3px 0 0 rgb(var(--shadow)); }
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-family: 'Fredoka', sans-serif; font-weight: 600;
           border: 2px solid rgb(var(--ink)); border-radius: .9rem; box-shadow: 3px 3px 0 0 rgb(var(--shadow)); transition: transform .12s, box-shadow .12s; cursor: pointer; }
    .btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 0 rgb(var(--shadow)); }
    .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 rgb(var(--shadow)); }
    .btn:disabled { opacity: .6; cursor: not-allowed; }
    .btn-primary { background: rgb(var(--brand-700)); color: #fff; }
    .btn-accent { background: rgb(var(--accent-400)); color: rgb(var(--ink)); }
    .btn-light { background: #fff; color: rgb(var(--ink)); }
    .marker { background: linear-gradient(transparent 60%, rgb(var(--accent-300)) 60%); padding: 0 .15em; }
    .field { width: 100%; padding: .65rem .75rem; background: rgb(var(--brand-50)); border: 2px solid rgb(var(--brand-200)); border-radius: .85rem; font-size: .8rem; }
    .field:focus { border-color: rgb(var(--ink)); background: #fff; }
    .chip-check { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .65rem; background: rgb(var(--brand-50)); border: 2px solid rgb(var(--brand-200)); border-radius: .7rem; cursor: pointer; font-size: .75rem; }
    .chip-check:has(input:checked) { background: rgb(var(--accent-300)); border-color: rgb(var(--ink)); font-weight: 600; }
    :focus-visible { outline: 3px solid rgb(var(--ink)); outline-offset: 2px; }

    /* ---------- Decoration ---------- */
    .dots-bg { background-image: radial-gradient(rgb(var(--ink) / .12) 1.5px, transparent 1.5px); background-size: 22px 22px; }
    @keyframes floaty { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-14px) rotate(calc(var(--r, 0deg) + 6deg)); } }
    .floaty { animation: floaty 6s ease-in-out infinite; }
    @keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .marquee { display: flex; width: max-content; animation: scroll-x 32s linear infinite; }
    @media (prefers-reduced-motion: reduce) { .floaty, .marquee { animation: none; } html { scroll-behavior: auto; } }
    .wave { display: block; width: 100%; height: 48px; }
  
/* ---------- Accessibility and compliance additions ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: rgb(var(--ink)); color: #fff; padding: .75rem 1rem; border-radius: 0 0 .75rem 0; font-weight: 700; }
.skip-link:focus { left: 0; }
.no-motion, .no-motion * { animation: none !important; scroll-behavior: auto !important; }
::placeholder { color: rgb(var(--ink) / .7); opacity: 1; }
aside :focus-visible, footer :focus-visible, #curriculum :focus-visible { outline-color: rgb(var(--accent-300)); }
.legal h1 { font-size: 2rem; font-weight: 700; margin-bottom: .5rem; }
.legal h2 { font-size: 1.25rem; font-weight: 700; margin: 2rem 0 .5rem; }
.legal p, .legal li { font-size: .9rem; line-height: 1.7; color: rgb(var(--ink) / .85); }
.legal p { margin: .6rem 0; }
.legal ul { list-style: disc; padding-left: 1.25rem; margin: .5rem 0; }
.legal a { text-decoration: underline; font-weight: 600; color: rgb(var(--brand-800)); }
.legal table { width: 100%; border-collapse: collapse; font-size: .8rem; margin: .75rem 0; }
.legal th, .legal td { border: 2px solid rgb(var(--ink)); padding: .5rem .6rem; text-align: left; vertical-align: top; }
.legal th { background: rgb(var(--brand-100)); }
.legal .scroll-x { overflow-x: auto; }

/* ---------- Welcome page and navy sections ---------- */
html.welcome-on #siteApp { display: none; }
html:not(.welcome-on) #welcome { display: none; }
#hero, #welcome { --shadow: 125 211 252; }
.sticker, .sticker-sm { color: rgb(var(--ink)); }
.hero-navy::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgb(255 255 255 / .09) 1.5px, transparent 1.5px); background-size: 22px 22px; pointer-events: none; }
#hero .marker, #welcome .marker { color: rgb(var(--ink)); background: rgb(var(--accent-300)); border-radius: .4rem; padding: 0 .25em; }