:root {
      --navy: #1d3a5f;
      --navy-deep: #142c49;
      --navy-soft: #eef2f7;
      --cream: #faf8f4;
      --paper: #ffffff;
      --ink: #22303f;
      --sub: #5c6b7a;
      --gold: #b98c2f;
      --gold-soft: #f5edd8;
      --hairline: #e3ded4;
      --hairline-dark: rgba(255, 255, 255, 0.16);
    }
    * { box-sizing: border-box; margin: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'IBM Plex Sans Thai', system-ui, sans-serif;
      font-size: 16px;
      color: var(--ink);
      background: var(--cream);
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
    }
    h1, h2, h3 { font-family: 'Mitr', 'IBM Plex Sans Thai', serif; font-weight: 500; line-height: 1.35; color: var(--navy); }
    a { color: inherit; }
    img { max-width: 100%; display: block; }
    .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
    section { padding: 96px 0; }

    .kicker {
      display: block;
      font-size: 12px; font-weight: 600;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 18px;
    }
    .btn {
      display: inline-block; text-decoration: none;
      font-size: 13px; font-weight: 600;
      letter-spacing: 0.14em; text-transform: uppercase;
      padding: 16px 34px; border-radius: 999px;
      transition: background .2s ease, color .2s ease;
    }
    .btn-navy { background: var(--navy); color: #fff; }
    .btn-navy:hover { background: var(--navy-deep); }
    .btn-outline { border: 1px solid var(--navy); color: var(--navy); }
    .btn-outline:hover { background: var(--navy); color: #fff; }
    .btn-light { background: #fff; color: var(--navy); }
    .btn-light:hover { background: var(--gold-soft); }

    /* image placeholders — photos arrive later */
    .ph {
      position: relative; overflow: hidden;
      background:
        repeating-linear-gradient(45deg, transparent 0 14px, rgba(29,58,95,0.045) 14px 15px),
        linear-gradient(160deg, var(--navy-soft) 0%, #e5ebf3 100%);
      border: 1px solid var(--hairline);
      display: flex; align-items: center; justify-content: center;
    }
    .ph::after {
      content: attr(data-label);
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: #9aa8b8;
    }

    /* header */
    header {
      position: sticky; top: 0; z-index: 50;
      background: rgba(250, 248, 244, 0.94);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--hairline);
    }
    .nav {
      display: flex; align-items: center; gap: 28px;
      padding: 20px 24px; max-width: 1080px; margin: 0 auto;
    }
    .brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; }
    .brand-th { font-family: 'Mitr', serif; font-weight: 600; font-size: 19px; color: var(--navy); }
    .brand-en { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sub); }
    .nav-links { display: flex; gap: 28px; margin-left: auto; }
    .nav-links a {
      text-decoration: none; font-size: 12.5px; font-weight: 600;
      letter-spacing: 0.14em; text-transform: uppercase; color: var(--sub);
      padding-bottom: 3px; border-bottom: 1px solid transparent;
    }
    .nav-links a:hover { color: var(--navy); border-bottom-color: var(--gold); }
    .nav .btn { padding: 11px 24px; margin-left: 8px; }
    .brand-th { white-space: nowrap; }
    .nav-links a { white-space: nowrap; }
    .nav .btn { white-space: nowrap; }
    /* Thai labels are wide — hand over to the hamburger earlier than the
       section grids' 860px breakpoint so nav items never wrap mid-word. */
    @media (max-width: 1080px) { .nav-links { display: none; } .nav .btn { margin-left: auto; } }

    /* hero */
    .hero { padding: 110px 0 100px; background: var(--cream); }
    .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
    @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }
    .hero h1 {
      font-size: clamp(38px, 5.4vw, 60px);
      font-weight: 500;
      letter-spacing: 0.01em;
      margin-bottom: 26px;
    }
    .hero h1 em { font-style: normal; color: var(--gold); }
    .hero p.lead { font-size: 17px; color: var(--sub); max-width: 460px; margin-bottom: 38px; }
    .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
    .hero-visual { aspect-ratio: 4 / 5; }
    @media (max-width: 860px) { .hero-visual { aspect-ratio: 16 / 10; } }

    /* glance */
    .glance { background: var(--paper); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
    .glance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
    @media (max-width: 860px) { .glance-grid { grid-template-columns: 1fr; gap: 44px; } }
    .glance-visual { position: relative; aspect-ratio: 4 / 3; }
    .glance-stat {
      position: absolute; left: -18px; bottom: -26px;
      background: var(--navy); color: #fff;
      padding: 26px 32px; max-width: 260px;
    }
    .glance-stat .num { font-family: 'Mitr', serif; font-size: 52px; font-weight: 500; line-height: 1; }
    .glance-stat .cap { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 8px; color: rgba(255,255,255,.75); }
    .glance h2 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 8px; }
    .fact-rows { margin-top: 28px; }
    .fact {
      display: flex; gap: 22px; align-items: flex-start;
      padding: 24px 0; border-top: 1px solid var(--hairline);
    }
    .fact:last-child { border-bottom: 1px solid var(--hairline); }
    .fact svg { width: 40px; height: 40px; stroke: var(--navy); flex-shrink: 0; margin-top: 3px; }
    .fact b {
      display: block; font-size: 13px; font-weight: 600;
      letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy);
      margin-bottom: 4px;
    }
    .fact p { font-size: 15px; color: var(--sub); }

    /* journey */
    .journey { background: var(--navy); color: #fff; }
    .journey .kicker { color: var(--gold); }
    .journey h2 {
      color: #fff; text-align: center;
      font-size: clamp(30px, 4.4vw, 48px);
      letter-spacing: 0.02em;
      margin-bottom: 12px;
    }
    .journey .kicker { display: table; margin: 0 auto 18px; }
    .journey-lead { text-align: center; color: rgba(255,255,255,.72); max-width: 560px; margin: 0 auto 56px; font-size: 15.5px; }
    .journey-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
    @media (max-width: 860px) { .journey-grid { grid-template-columns: 1fr; } }
    .j-card { position: relative; }
    .j-card .ph { aspect-ratio: 3 / 4; border-color: var(--hairline-dark); }
    .j-card .ph::after { color: rgba(255,255,255,.45); }
    .j-meta { text-align: center; padding: 22px 8px 0; }
    .j-meta h3 {
      color: #fff; font-size: 24px; font-weight: 500;
      letter-spacing: 0.06em;
    }
    .j-meta .age { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 6px; }
    .j-meta p { font-size: 14px; color: rgba(255,255,255,.72); margin-top: 12px; }

    /* programs */
    .programs { background: var(--cream); }
    .programs h2 { text-align: center; font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 12px; }
    .programs .kicker { display: table; margin: 0 auto 18px; }
    .programs .sec-lead { text-align: center; color: var(--sub); max-width: 560px; margin: 0 auto 56px; }
    .prog-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline);
    }
    @media (max-width: 860px) { .prog-grid { grid-template-columns: 1fr; } }
    .prog {
      padding: 36px 30px;
      border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
      background: var(--paper);
      transition: background .2s ease;
    }
    .prog:hover { background: var(--navy-soft); }
    .prog svg { width: 38px; height: 38px; stroke: var(--gold); margin-bottom: 18px; }
    .prog b {
      display: block; font-size: 13px; font-weight: 600;
      letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy);
      margin-bottom: 6px;
    }
    .prog p { font-size: 14.5px; color: var(--sub); }

    /* timetable */
    .tt { background: var(--paper); border-top: 1px solid var(--hairline); }
    .tt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
    @media (max-width: 860px) { .tt-grid { grid-template-columns: 1fr; gap: 40px; } }
    .tt h2 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 20px; }
    .tt p { color: var(--sub); margin-bottom: 14px; }
    .tt-note { font-size: 13px; color: #98a4b1; }
    .tt-img { border: 1px solid var(--hairline); }

    /* safety */
    .safety { background: var(--cream); }
    .safety-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
    @media (max-width: 860px) { .safety-grid { grid-template-columns: 1fr; gap: 40px; } }
    .safety h2 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 20px; }
    .safety-intro p { color: var(--sub); margin-bottom: 16px; }
    .step {
      display: flex; gap: 26px;
      padding: 26px 0; border-top: 1px solid var(--hairline);
    }
    .step:last-child { border-bottom: 1px solid var(--hairline); }
    .step-num {
      font-family: 'Mitr', serif; font-size: 34px; color: var(--gold);
      line-height: 1; flex-shrink: 0; width: 44px;
    }
    .step b { display: block; color: var(--navy); font-size: 16px; margin-bottom: 4px; }
    .step p { font-size: 14.5px; color: var(--sub); }

    /* admissions */
    .adm { background: var(--paper); border-top: 1px solid var(--hairline); }
    .adm h2 { text-align: center; font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 12px; }
    .adm .kicker { display: table; margin: 0 auto 18px; }
    .adm .sec-lead { text-align: center; color: var(--sub); max-width: 520px; margin: 0 auto 56px; }
    .adm-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline);
      margin-bottom: 48px;
    }
    @media (max-width: 860px) { .adm-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .adm-grid { grid-template-columns: 1fr; } }
    .adm-step {
      padding: 34px 26px;
      border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
    }
    .adm-step .n { font-family: 'Mitr', serif; font-size: 40px; color: var(--gold); line-height: 1; margin-bottom: 14px; }
    .adm-step b { display: block; color: var(--navy); margin-bottom: 6px; font-size: 16px; }
    .adm-step p { font-size: 14px; color: var(--sub); }
    .adm-cta { text-align: center; }

    /* contact */
    .contact { background: var(--navy); color: #fff; }
    .contact .kicker { display: table; margin: 0 auto 18px; }
    .contact h2 { color: #fff; text-align: center; font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 56px; }
    .ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
    @media (max-width: 860px) { .ct-grid { grid-template-columns: 1fr; } }
    .ct-card { border: 1px solid var(--hairline-dark); padding: 36px; }
    .ct-card h3 {
      color: #fff; font-size: 13px; font-weight: 600;
      letter-spacing: 0.18em; text-transform: uppercase;
      margin-bottom: 22px; font-family: 'IBM Plex Sans Thai', sans-serif;
    }
    .ct-row { display: flex; gap: 16px; margin-bottom: 16px; font-size: 15px; color: rgba(255,255,255,.85); }
    .ct-row svg { width: 20px; height: 20px; stroke: var(--gold); flex-shrink: 0; margin-top: 4px; }
    .placeholder {
      color: #e8c877; border-bottom: 1px dashed rgba(232, 200, 119, 0.5);
      font-size: 14px;
    }
    .ct-card .btn { margin-top: 12px; }
    .map-ph { aspect-ratio: 16 / 9; border: 1px dashed var(--hairline-dark); display: flex; align-items: center; justify-content: center; }
    /* The real map replaces .map-ph. It is a still image, not an embed: the
       page stays fast and sets no third-party cookie, and the tap still ends
       up in Google Maps for directions. */
    .map { display: block; overflow: hidden; border-radius: 12px; line-height: 0; }

    /* ---------- film page ---------- */
    .film-page { padding: 96px 0; background: var(--cream); }
    .film-h1 { font-size: clamp(28px, 4vw, 44px); margin-bottom: 14px; }
    .film-lead { max-width: 620px; color: var(--sub); margin-bottom: 34px; }
    /* 16:9 box; the film scales its own 1280x720 stage to whatever width it gets. */
    .film-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 16px;
      overflow: hidden; background: var(--navy-deep);
      box-shadow: 0 24px 60px rgba(20, 44, 73, 0.18); }
    .film-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
    .film-note { margin-top: 16px; font-size: 14px; color: var(--sub); }
    .map img { width: 100%; height: auto; }
    .map:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
    .map-note { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.6); }
    .map-ph span { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,.45); text-align: center; padding: 0 20px; }

    footer {
      background: var(--navy-deep); color: rgba(255,255,255,.55);
      text-align: center; padding: 34px 24px; font-size: 13px;
      border-top: 1px solid var(--hairline-dark);
    }
    footer .f-brand { font-family: 'Mitr', serif; color: rgba(255,255,255,.85); font-size: 16px; margin-bottom: 6px; }

    /* ---------- motion ---------- */
    section { scroll-margin-top: 90px; }

    .reveal {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
      transition-delay: var(--d, 0ms);
    }
    .reveal.in { opacity: 1; transform: none; }

    /* hero entrance */
    @keyframes riseIn {
      from { opacity: 0; transform: translateY(34px); }
      to { opacity: 1; transform: none; }
    }
    .hero .kicker    { animation: riseIn .7s .05s cubic-bezier(.22,.61,.36,1) both; }
    .hero h1         { animation: riseIn .8s .15s cubic-bezier(.22,.61,.36,1) both; }
    .hero p.lead     { animation: riseIn .8s .3s  cubic-bezier(.22,.61,.36,1) both; }
    .hero-ctas       { animation: riseIn .8s .45s cubic-bezier(.22,.61,.36,1) both; }
    .hero-visual     { animation: riseIn .9s .3s  cubic-bezier(.22,.61,.36,1) both; }

    /* kicker underline draw */
    .kicker { position: relative; padding-bottom: 6px; }
    .kicker::after {
      content: ''; position: absolute; left: 0; bottom: 0;
      width: 34px; height: 2px; background: var(--gold);
      transform: scaleX(0); transform-origin: left;
      transition: transform .6s .25s cubic-bezier(.22,.61,.36,1);
    }
    .reveal.in .kicker::after, .hero .kicker::after { transform: scaleX(1); }
    .hero .kicker::after { transition-delay: .7s; }

    /* gentle float on hero visual */
    @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    .hero-visual { animation: riseIn .9s .3s cubic-bezier(.22,.61,.36,1) both, floaty 7s 1.4s ease-in-out infinite; }

    /* hovers with more pop */
    .btn { transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
    .btn:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(29,58,95,.22); }
    .prog { transition: background .25s ease, transform .25s ease; }
    .prog:hover { transform: translateY(-6px); }
    .prog svg { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
    .prog:hover svg { transform: translateY(-4px) rotate(-6deg) scale(1.12); }
    .j-card .ph { transition: transform .4s cubic-bezier(.22,.61,.36,1), border-color .3s ease; }
    .j-card:hover .ph { transform: translateY(-8px); border-color: var(--gold); }
    .j-card .j-meta h3 { transition: color .25s ease; }
    .j-card:hover .j-meta h3 { color: #e8c877; }
    .adm-step { transition: background .25s ease; }
    .adm-step:hover { background: var(--navy-soft); }
    .adm-step .n, .step-num { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
    .adm-step:hover .n { transform: scale(1.18) rotate(-4deg); }
    .fact { transition: padding-left .25s ease; }
    .fact:hover { padding-left: 10px; }
    .fact svg { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
    .fact:hover svg { transform: scale(1.15) rotate(-5deg); }

    /* marquee strip */
    .marquee {
      background: var(--navy-deep);
      border-top: 1px solid var(--hairline-dark);
      overflow: hidden; white-space: nowrap;
      padding: 18px 0;
    }
    .marquee-track {
      display: inline-block;
      animation: marquee 28s linear infinite;
    }
    .marquee span {
      font-size: 13px; font-weight: 600;
      letter-spacing: 0.26em; text-transform: uppercase;
      color: var(--gold);
      margin: 0 28px;
    }
    .marquee span.dot { color: rgba(255,255,255,.35); margin: 0 6px; }
    @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .marquee:hover .marquee-track { animation-play-state: paused; }

    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
      .hero .kicker, .hero h1, .hero p.lead, .hero-ctas, .hero-visual { animation: none; }
      .marquee-track { animation: none; }
      .kicker::after { transform: scaleX(1); transition: none; }
    }

    /* ================= lively kindergarten theme ================= */
    :root {
      --navy: #40405c;            /* warm slate for headings/text */
      --navy-deep: #34344c;
      --navy-soft: #fff2e9;
      --cream: #fffaf3;
      --gold: #ff6b57;            /* coral is the new accent */
      --gold-soft: #ffe9e4;
      --hairline: #f1e5d8;
      --sun: #ffb547;
      --sun-ink: #8a5200;
      --sky: #38bdf8;
      --mint: #34d399;
      --lav: #a78bfa;
      --rose: #fb7185;
    }

    /* hero: floating pastel blobs */
    .hero { position: relative; overflow: hidden; }
    .hero::before, .hero::after {
      content: ''; position: absolute; border-radius: 50%;
      filter: blur(60px); pointer-events: none; z-index: 0;
    }
    .hero::before {
      width: 420px; height: 420px; right: -120px; top: -120px;
      background: rgba(255, 181, 71, 0.35);
      animation: floaty 9s ease-in-out infinite;
    }
    .hero::after {
      width: 340px; height: 340px; left: -140px; bottom: -140px;
      background: rgba(56, 189, 248, 0.22);
      animation: floaty 11s 1s ease-in-out infinite;
    }
    .hero .wrap { position: relative; z-index: 1; }

    /* buttons: coral gradient */
    .btn-navy {
      background: linear-gradient(135deg, #ff7a5c 0%, #ff5d7e 100%);
      box-shadow: 0 8px 22px rgba(255, 99, 92, 0.35);
    }
    .btn-navy:hover { background: linear-gradient(135deg, #ff6b48 0%, #ff4a70 100%); }
    .btn-outline { border-color: var(--gold); color: var(--gold); }
    .btn-outline:hover { background: var(--gold); color: #fff; }
    .btn:hover { box-shadow: 0 14px 30px rgba(255, 99, 92, 0.3); }

    /* rounded, warm placeholders */
    .ph {
      border-radius: 24px;
      background:
        repeating-linear-gradient(45deg, transparent 0 14px, rgba(255, 107, 87, 0.05) 14px 15px),
        linear-gradient(160deg, #fff1e4 0%, #ffe6ef 100%);
      border-color: #f6dfc9;
    }
    .ph::after { color: #d3a08e; }
    .tt-img { border-radius: 24px; }

    /* stat card: coral gradient, rounded */
    .glance-stat {
      background: linear-gradient(135deg, #ff7a5c 0%, #ff5d7e 100%);
      border-radius: 20px;
      box-shadow: 0 16px 36px rgba(255, 99, 92, 0.35);
    }

    /* colorful fact icons */
    .fact:nth-of-type(1) svg { stroke: var(--gold); }
    .fact:nth-of-type(2) svg { stroke: var(--sun); }
    .fact:nth-of-type(3) svg { stroke: var(--sky); }
    .fact:nth-of-type(4) svg { stroke: var(--mint); }

    /* journey: sunset gradient instead of navy */
    .journey { background: linear-gradient(160deg, #ff8a5c 0%, #ff5d7e 100%); }
    .journey .kicker { color: #ffe3a3; }
    .journey .kicker::after { background: #ffe3a3; }
    .journey-lead { color: rgba(255, 255, 255, 0.88); }
    .j-card .ph {
      border-color: rgba(255, 255, 255, 0.4);
      background:
        repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,0.08) 14px 15px),
        linear-gradient(160deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.1) 100%);
    }
    .j-card .ph::after { color: rgba(255, 255, 255, 0.75); }
    .j-meta .age { color: #ffe3a3; }
    .j-card:hover .j-meta h3 { color: #ffe3a3; }
    .j-card:hover .ph { border-color: #ffe3a3; }

    /* marquee: sunshine band */
    .marquee { background: var(--sun); border-top: none; }
    .marquee span { color: #fff; }
    .marquee span.dot { color: rgba(138, 82, 0, 0.4); }

    /* curriculum: each cell its own color */
    .prog { border-radius: 0; }
    .prog:nth-of-type(1) svg { stroke: var(--gold); }
    .prog:nth-of-type(2) svg { stroke: var(--sun); }
    .prog:nth-of-type(3) svg { stroke: var(--mint); }
    .prog:nth-of-type(4) svg { stroke: var(--sky); }
    .prog:nth-of-type(5) svg { stroke: var(--lav); }
    .prog:nth-of-type(6) svg { stroke: var(--rose); }
    .prog:nth-of-type(1):hover { background: var(--gold-soft); }
    .prog:nth-of-type(2):hover { background: #fff3dc; }
    .prog:nth-of-type(3):hover { background: #e2f9ef; }
    .prog:nth-of-type(4):hover { background: #e3f5fe; }
    .prog:nth-of-type(5):hover { background: #f1ecfe; }
    .prog:nth-of-type(6):hover { background: #ffe9ed; }

    /* steps + admissions numbers in coral */
    .step-num, .adm-step .n { color: var(--gold); }
    .adm-step:hover { background: var(--navy-soft); }

    /* contact: warm slate with sunshine accents */
    .contact { background: var(--navy); }
    .contact .kicker { color: var(--sun); }
    .contact .kicker::after { background: var(--sun); }
    .ct-row svg { stroke: var(--sun); }
    .ct-card { border-radius: 20px; }
    .placeholder { color: #ffd9a8; border-bottom-color: rgba(255, 217, 168, 0.5); }
    .map-ph { border-radius: 16px; }
    footer { background: var(--navy-deep); }

    /* ================= rainbow accents ================= */
    :root {
      --red: #ef4444;
      --orange: #f97316;
      --yellow: #fbbf24;
      --green: #22c55e;
      --blue: #3b82f6;
      --violet: #8b5cf6;
      --pink: #ec4899;
      --gold: var(--orange);           /* primary accent → orange */
      --gold-soft: #ffedd5;
    }

    /* hero: warm two-tone accent word */
    .hero h1 em {
      background: linear-gradient(100deg, var(--orange), var(--red));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: var(--orange);
    }
    .hero::before { background: rgba(249, 115, 22, 0.3); }
    .hero::after { background: rgba(34, 197, 94, 0.22); }
    .hero .hero-visual { box-shadow: 12px 12px 0 rgba(139, 92, 246, 0.18); }

    /* buttons: orange → red */
    .btn-navy { background: linear-gradient(135deg, var(--orange) 0%, var(--red) 100%); box-shadow: 0 8px 22px rgba(249, 115, 22, 0.35); }
    .btn-navy:hover { background: linear-gradient(135deg, #ea6a0c 0%, #dc2626 100%); }
    .btn-outline { border-color: var(--orange); color: var(--orange); }
    .btn-outline:hover { background: var(--orange); color: #fff; }

    /* per-section kicker colors */
    .glance .kicker { color: var(--orange); } .glance .kicker::after { background: var(--orange); }
    .programs .kicker { color: var(--green); } .programs .kicker::after { background: var(--green); }
    .tt .kicker { color: var(--blue); } .tt .kicker::after { background: var(--blue); }
    .safety .kicker { color: var(--pink); } .safety .kicker::after { background: var(--pink); }
    .adm .kicker { color: var(--violet); } .adm .kicker::after { background: var(--violet); }
    .contact .kicker { color: var(--yellow); } .contact .kicker::after { background: var(--yellow); }

    /* glance: rainbow-ordered fact icons + orange-red stat */
    .fact:nth-of-type(1) svg { stroke: var(--red); }
    .fact:nth-of-type(2) svg { stroke: var(--orange); }
    .fact:nth-of-type(3) svg { stroke: var(--green); }
    .fact:nth-of-type(4) svg { stroke: var(--blue); }
    .glance-stat { background: linear-gradient(135deg, var(--blue) 0%, #38bdf8 100%); box-shadow: 0 16px 36px rgba(59, 130, 246, 0.35); }

    /* journey: pink-violet gradient + per-card accents */
    .journey { background: linear-gradient(135deg, var(--pink) 0%, var(--violet) 100%); }
    .journey .kicker { color: #ffe9a8; } .journey .kicker::after { background: #ffe9a8; }
    .j-card:nth-of-type(1):hover .ph { border-color: #ffd166; }
    .j-card:nth-of-type(2):hover .ph { border-color: #b3f5c8; }
    .j-card:nth-of-type(3):hover .ph { border-color: #bcd9ff; }

    /* marquee: green band bridging journey (pink-violet) and curriculum */
    .marquee { background: var(--green); }
    .marquee span { color: #fff; text-shadow: none; }
    .marquee span.dot { color: rgba(255,255,255,.5); }

    /* curriculum: strict rainbow order */
    .prog:nth-of-type(1) svg { stroke: var(--red); }
    .prog:nth-of-type(2) svg { stroke: var(--orange); }
    .prog:nth-of-type(3) svg { stroke: var(--yellow); }
    .prog:nth-of-type(4) svg { stroke: var(--green); }
    .prog:nth-of-type(5) svg { stroke: var(--blue); }
    .prog:nth-of-type(6) svg { stroke: var(--violet); }
    .prog:nth-of-type(1):hover { background: #fee2e2; }
    .prog:nth-of-type(2):hover { background: #ffedd5; }
    .prog:nth-of-type(3):hover { background: #fef3c7; }
    .prog:nth-of-type(4):hover { background: #dcfce7; }
    .prog:nth-of-type(5):hover { background: #dbeafe; }
    .prog:nth-of-type(6):hover { background: #ede9fe; }
    .prog { border-top: 3px solid transparent; }
    .prog:nth-of-type(1) { border-top-color: var(--red); }
    .prog:nth-of-type(2) { border-top-color: var(--orange); }
    .prog:nth-of-type(3) { border-top-color: var(--yellow); }
    .prog:nth-of-type(4) { border-top-color: var(--green); }
    .prog:nth-of-type(5) { border-top-color: var(--blue); }
    .prog:nth-of-type(6) { border-top-color: var(--violet); }

    /* safety steps: green / blue / orange */
    .step:nth-of-type(1) .step-num { color: var(--green); }
    .step:nth-of-type(2) .step-num { color: var(--blue); }
    .step:nth-of-type(3) .step-num { color: var(--orange); }

    /* admissions: red / orange / green / blue numbers */
    .adm-step:nth-of-type(1) .n { color: var(--red); }
    .adm-step:nth-of-type(2) .n { color: var(--orange); }
    .adm-step:nth-of-type(3) .n { color: var(--green); }
    .adm-step:nth-of-type(4) .n { color: var(--blue); }
    .adm-step:nth-of-type(1):hover { background: #fee2e2; }
    .adm-step:nth-of-type(2):hover { background: #ffedd5; }
    .adm-step:nth-of-type(3):hover { background: #dcfce7; }
    .adm-step:nth-of-type(4):hover { background: #dbeafe; }

    /* contact accents: yellow icons */
    .ct-row svg { stroke: var(--yellow); }

    /* ================= language: Japanese fonts ================= */
    html[lang="ja"] body,
    html[lang="ja"] .btn,
    html[lang="ja"] .nav-links a,
    html[lang="ja"] .kicker,
    html[lang="ja"] .fact b,
    html[lang="ja"] .prog b,
    html[lang="ja"] .ct-card h3 {
      font-family: 'Noto Sans JP', 'IBM Plex Sans Thai', sans-serif;
    }
    html[lang="ja"] h1,
    html[lang="ja"] h2,
    html[lang="ja"] h3,
    html[lang="ja"] .brand-th,
    html[lang="ja"] .glance-stat .num,
    html[lang="ja"] .f-brand {
      font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
    }
    /* Japanese doesn't use letter-spaced uppercase — relax those labels */
    html[lang="ja"] .kicker,
    html[lang="ja"] .nav-links a,
    html[lang="ja"] .btn,
    html[lang="ja"] .fact b,
    html[lang="ja"] .prog b,
    html[lang="ja"] .ct-card h3,
    html[lang="ja"] .j-meta .age,
    html[lang="ja"] .glance-stat .cap {
      text-transform: none; letter-spacing: 0.02em;
    }

    /* ================= topbar + language switcher ================= */
    /* Neutral slate strip — the switcher deliberately carries no accent
       colour so the header doesn't read orange-heavy. */
    .topbar { background: var(--navy-deep); }
    .topbar-inner {
      max-width: 1080px; margin: 0 auto; padding: 7px 24px;
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
    }
    .topbar-note { font-size: 12px; color: rgba(255,255,255,.6); letter-spacing: 0.06em; }
    .lang-switch { display: inline-flex; gap: 2px; }
    .lang-switch button {
      font: inherit; font-size: 12px; font-weight: 600;
      border: 0; background: transparent; cursor: pointer;
      color: rgba(255,255,255,.6); padding: 3px 10px; border-radius: 6px;
      transition: background .2s ease, color .2s ease; white-space: nowrap;
    }
    .lang-switch button:hover { color: #fff; }
    .lang-switch button.active { color: #fff; background: rgba(255,255,255,.16); }

    /* ================= multi-page nav ================= */
    .nav-links a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--gold); }
    .nav-toggle {
      display: none; border: 0; background: none; cursor: pointer;
      padding: 6px; margin-left: auto;
    }
    .nav-toggle svg { width: 26px; height: 26px; stroke: var(--navy); display: block; }
    .nav-menu-line { display: none; }
    @media (max-width: 1080px) {
      .brand-en { display: none; }
      .nav { gap: 14px; position: relative; }
      .nav-toggle { display: block; margin-left: 0; }
      .nav .nav-line-btn { margin-left: auto; padding: 10px 18px; font-size: 11.5px; }
      header.nav-open .nav-links {
        display: flex; flex-direction: column; gap: 16px;
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--paper); border-bottom: 1px solid var(--hairline);
        padding: 18px 24px 22px;
        box-shadow: 0 18px 30px rgba(0,0,0,.08);
      }
      header.nav-open .nav-links a { font-size: 14px; }
      header.nav-open .nav-links .nav-menu-line {
        display: inline-block; align-self: flex-start; margin-left: 0;
        font-size: 12px; padding: 12px 24px; border-bottom: none; margin-top: 4px;
      }
    }
    @media (max-width: 600px) {
      .nav .nav-line-btn { display: none; }
      .nav-toggle { margin-left: auto; }
    }

    /* ================= home: explore cards ================= */
    .explore { background: var(--paper); border-top: 1px solid var(--hairline); }
    .explore .kicker { display: table; margin: 0 auto 18px; color: var(--violet); }
    .explore .kicker::after { background: var(--violet); }
    .explore h2 { text-align: center; font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 12px; }
    .explore .sec-lead { text-align: center; color: var(--sub); max-width: 520px; margin: 0 auto 56px; }
    .explore-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
    @media (max-width: 860px) { .explore-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .explore-grid { grid-template-columns: 1fr; } }
    .explore-card {
      display: block; text-decoration: none;
      background: var(--cream); border: 1px solid var(--hairline);
      border-top: 3px solid var(--hairline); border-radius: 18px;
      padding: 28px 24px;
      transition: transform .25s ease, background .25s ease;
    }
    .explore-card:hover { transform: translateY(-6px); }
    .explore-card b {
      display: block; font-family: 'Mitr', 'IBM Plex Sans Thai', serif;
      font-weight: 500; font-size: 19px; color: var(--navy); margin-bottom: 8px;
    }
    .explore-card p { font-size: 14px; color: var(--sub); margin-bottom: 16px; }
    .explore-card .more { font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
    .explore-card:nth-of-type(1) { border-top-color: var(--pink); }
    .explore-card:nth-of-type(1) .more { color: var(--pink); }
    .explore-card:nth-of-type(1):hover { background: #fdf2f8; }
    .explore-card:nth-of-type(2) { border-top-color: var(--green); }
    .explore-card:nth-of-type(2) .more { color: var(--green); }
    .explore-card:nth-of-type(2):hover { background: #f0fdf4; }
    .explore-card:nth-of-type(3) { border-top-color: var(--blue); }
    .explore-card:nth-of-type(3) .more { color: var(--blue); }
    .explore-card:nth-of-type(3):hover { background: #eff6ff; }
    .explore-card:nth-of-type(4) { border-top-color: var(--violet); }
    .explore-card:nth-of-type(4) .more { color: var(--violet); }
    .explore-card:nth-of-type(4):hover { background: #f5f3ff; }
    html[lang="ja"] .explore-card b { font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif; }
    html[lang="ja"] .explore-card .more { text-transform: none; letter-spacing: 0.02em; }

    /* ================= subpage CTA band ================= */
    .page-cta { background: var(--paper); border-top: 1px solid var(--hairline); text-align: center; }
    .page-cta h2 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 10px; }
    .page-cta p { color: var(--sub); margin-bottom: 28px; }
    .page-cta .btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

    /* ================= footer nav ================= */
    .f-links { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin: 10px 0 12px; }
    .f-links a { color: rgba(255,255,255,.6); text-decoration: none; font-size: 12.5px; }
    .f-links a:hover { color: #fff; }

    /* ================= expanded content sections ================= */
    /* levels: level-by-level detail */
    .ld { background: var(--paper); border-top: 1px solid var(--hairline); }
    .ld .kicker { display: table; margin: 0 auto 18px; color: var(--blue); }
    .ld .kicker::after { background: var(--blue); }
    .ld h2 { text-align: center; font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 12px; }
    .ld .sec-lead { text-align: center; color: var(--sub); max-width: 560px; margin: 0 auto 40px; }
    .ld-row { display: grid; grid-template-columns: 260px 1fr; gap: 20px 48px; padding: 40px 0; border-top: 1px solid var(--hairline); }
    @media (max-width: 860px) { .ld-row { grid-template-columns: 1fr; padding: 32px 0; } }
    .ld-row h3 { font-size: 24px; }
    .ld-age { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 6px; }
    .ld-row p { color: var(--sub); margin-bottom: 14px; }
    .ld-list { list-style: none; padding: 0; margin: 0; }
    .ld-list li { position: relative; padding: 7px 0 7px 26px; color: var(--sub); font-size: 14.5px; }
    .ld-list li::before { content: ''; position: absolute; left: 4px; top: 15px; width: 8px; height: 8px; border-radius: 50%; }
    .ld-row:nth-of-type(1) .ld-age { color: var(--pink); }
    .ld-row:nth-of-type(1) .ld-list li::before { background: var(--pink); }
    .ld-row:nth-of-type(2) .ld-age { color: var(--green); }
    .ld-row:nth-of-type(2) .ld-list li::before { background: var(--green); }
    .ld-row:nth-of-type(3) .ld-age { color: var(--blue); }
    .ld-row:nth-of-type(3) .ld-list li::before { background: var(--blue); }

    /* curriculum: approach cards */
    .approach { background: var(--paper); border-top: 1px solid var(--hairline); }
    .approach .kicker { display: table; margin: 0 auto 18px; color: var(--violet); }
    .approach .kicker::after { background: var(--violet); }
    .approach h2 { text-align: center; font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 12px; }
    .approach .sec-lead { text-align: center; color: var(--sub); max-width: 520px; margin: 0 auto 56px; }
    .approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    @media (max-width: 860px) { .approach-grid { grid-template-columns: 1fr; } }
    .approach-card {
      background: var(--cream); border: 1px solid var(--hairline);
      border-top: 3px solid var(--hairline); border-radius: 18px;
      padding: 28px 24px;
    }
    .approach-card b {
      display: block; font-family: 'Mitr', 'IBM Plex Sans Thai', serif;
      font-weight: 500; font-size: 19px; color: var(--navy); margin-bottom: 8px;
    }
    .approach-card p { font-size: 14.5px; color: var(--sub); }
    .approach-card:nth-of-type(1) { border-top-color: var(--orange); }
    .approach-card:nth-of-type(2) { border-top-color: var(--blue); }
    .approach-card:nth-of-type(3) { border-top-color: var(--pink); }

    /* care: everyday care */
    .care-daily { background: var(--paper); border-bottom: 1px solid var(--hairline); }
    .care-daily .kicker { display: table; margin: 0 auto 18px; color: var(--green); }
    .care-daily .kicker::after { background: var(--green); }
    .care-daily h2 { text-align: center; font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 12px; }
    .care-daily .sec-lead { text-align: center; color: var(--sub); max-width: 520px; margin: 0 auto 40px; }
    .care-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
    @media (max-width: 860px) { .care-grid { grid-template-columns: 1fr; } }
    .care-fact { display: flex; gap: 22px; align-items: flex-start; padding: 24px 0; border-top: 1px solid var(--hairline); }
    .care-fact svg { width: 40px; height: 40px; flex-shrink: 0; margin-top: 3px; }
    .care-fact b {
      display: block; font-size: 13px; font-weight: 600;
      letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy);
      margin-bottom: 4px;
    }
    .care-fact p { font-size: 15px; color: var(--sub); }
    .care-fact:nth-of-type(1) svg { stroke: var(--orange); }
    .care-fact:nth-of-type(2) svg { stroke: var(--violet); }
    .care-fact:nth-of-type(3) svg { stroke: var(--sky); }
    .care-fact:nth-of-type(4) svg { stroke: var(--rose); }

    /* admissions: documents + FAQ */
    .adm-extra { background: var(--cream); border-top: 1px solid var(--hairline); }
    .adm-extra .kicker { display: table; margin: 0 auto 18px; color: var(--orange); }
    .adm-extra .kicker::after { background: var(--orange); }
    .adm-extra h2 { text-align: center; font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 40px; }
    .adm-extra-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 18px; align-items: start; }
    @media (max-width: 860px) { .adm-extra-grid { grid-template-columns: 1fr; } }
    .adm-card { background: var(--paper); border: 1px solid var(--hairline); border-radius: 18px; padding: 30px 28px; }
    .adm-card h3 { font-size: 20px; margin-bottom: 14px; }
    .doc-list { list-style: none; padding: 0; margin: 0; }
    .doc-list li { position: relative; padding: 12px 0 12px 30px; border-top: 1px solid var(--hairline); color: var(--sub); font-size: 15px; }
    .doc-list li::before { content: '✓'; position: absolute; left: 2px; top: 12px; color: var(--green); font-weight: 700; }
    .faq-item { padding: 14px 0; border-top: 1px solid var(--hairline); }
    .faq-item b { display: block; color: var(--navy); font-size: 15.5px; margin-bottom: 4px; }
    .faq-item p { font-size: 14.5px; color: var(--sub); }

    /* contact: welcome lead */
    .contact h2 { margin-bottom: 14px; }
    .contact-lead { text-align: center; color: rgba(255,255,255,.75); max-width: 560px; margin: 0 auto 56px; }

    /* Japanese typography for the new sections */
    html[lang="ja"] .approach-card b { font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif; }
    html[lang="ja"] .care-fact b { font-family: 'Noto Sans JP', sans-serif; text-transform: none; letter-spacing: 0.02em; }
    html[lang="ja"] .ld-age { text-transform: none; letter-spacing: 0.04em; }

    /* ================= balance pass: orange is one colour among many ================= */
    /* Primary CTAs speak LINE-green (the action is always "message us on LINE") */
    .btn-navy {
      background: linear-gradient(135deg, #22c55e 0%, #10b981 100%);
      box-shadow: 0 8px 22px rgba(34, 197, 94, 0.32);
    }
    .btn-navy:hover { background: linear-gradient(135deg, #16a34a 0%, #059669 100%); }
    .btn:hover { box-shadow: 0 14px 30px rgba(16, 185, 129, 0.28); }
    .btn-outline { border-color: var(--blue); color: var(--blue); }
    .btn-outline:hover { background: var(--blue); color: #fff; }
    .btn-light:hover { background: #dcfce7; }

    /* header: active/hover underline matches the CTA green */
    .nav-links a:hover { border-bottom-color: var(--green); }
    .nav-links a[aria-current="page"] { border-bottom-color: var(--green); }

    /* hero: the highlighted word stays warm — everything else varies */
    .hero .kicker { color: var(--violet); }
    .hero .kicker::after { background: var(--violet); }
    .hero::before { background: rgba(251, 191, 36, 0.32); }

    /* cool the photo placeholders — large areas shouldn't all run warm */
    .ph {
      background:
        repeating-linear-gradient(45deg, transparent 0 14px, rgba(59, 130, 246, 0.05) 14px 15px),
        linear-gradient(160deg, #eef6ff 0%, #fdf2f8 100%);
      border-color: #dbe7f6;
    }
    .ph::after { color: #94a8c8; }

    /* marquee: sunshine band (buttons took green) */
    .marquee { background: var(--sun); }
    .marquee span { color: #fff; }
    .marquee span.dot { color: rgba(138, 82, 0, 0.4); }

    /* ================= official content: new components ================= */
    /* nav now has 7 items — hand over to hamburger a little earlier */
    .nav { gap: 22px; }
    .nav-links { gap: 22px; }
    @media (max-width: 1200px) { .nav-links { display: none; } .nav .btn { margin-left: auto; } }
    @media (max-width: 1200px) and (min-width: 1081px) {
      .nav-toggle { display: block; margin-left: 0; }
      .nav { position: relative; }
      header.nav-open .nav-links {
        display: flex; flex-direction: column; gap: 16px;
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--paper); border-bottom: 1px solid var(--hairline);
        padding: 18px 24px 22px;
        box-shadow: 0 18px 30px rgba(0,0,0,.08);
      }
      header.nav-open .nav-links a { font-size: 14px; }
      header.nav-open .nav-links .nav-menu-line {
        display: inline-block; align-self: flex-start; margin-left: 0;
        font-size: 12px; padding: 12px 24px; border-bottom: none; margin-top: 4px;
      }
    }

    /* real photos in the old placeholder slots */
    .photo {
      width: 100%; height: 100%; object-fit: cover; display: block;
      border-radius: 24px; border: 1px solid var(--hairline);
    }
    img.hero-visual { aspect-ratio: 4 / 5; }
    @media (max-width: 860px) { img.hero-visual { aspect-ratio: 16 / 10; } }
    .j-card img.photo { aspect-ratio: 3 / 4; }
    .side-photo { aspect-ratio: 4 / 3; }
    /* Full-width section banner. Inherits .photo (cover, 24px radius,
       hairline). 16/9 so it reads as a band rather than a giant 4/3 block. */
    .band-photo { aspect-ratio: 16 / 9; margin: 30px 0 6px; }
    @media (max-width: 700px) { .band-photo { aspect-ratio: 4 / 3; margin: 22px 0 4px; } }

    /* welcome section (home) */
    .welcome { background: var(--paper); border-top: 1px solid var(--hairline); }
    .welcome .kicker { color: var(--pink); }
    .welcome .kicker::after { background: var(--pink); }
    .welcome h2 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 20px; }
    .welcome-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
    @media (max-width: 860px) { .welcome-grid { grid-template-columns: 1fr; gap: 36px; } }
    .welcome p { color: var(--sub); margin-bottom: 14px; }

    /* philosophy quote banner */
    .quote { background: linear-gradient(135deg, var(--pink) 0%, var(--violet) 100%); text-align: center; padding: 72px 0; }
    .quote .q-th { font-family: 'Mitr', 'IBM Plex Sans Thai', serif; font-size: clamp(24px, 3.2vw, 36px); color: #fff; line-height: 1.5; }
    .quote .q-en { margin-top: 12px; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,.75); }
    html[lang="ja"] .quote .q-th { font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif; }

    /* 10 keys grid */
    .keys { background: var(--cream); border-top: 1px solid var(--hairline); }
    .keys .kicker { display: table; margin: 0 auto 18px; color: var(--orange); }
    .keys .kicker::after { background: var(--orange); }
    .keys h2 { text-align: center; font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 12px; }
    .keys .sec-lead { text-align: center; color: var(--sub); max-width: 560px; margin: 0 auto 56px; }
    .keys-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    @media (max-width: 760px) { .keys-grid { grid-template-columns: 1fr; } }
    .key-card {
      display: flex; gap: 18px; align-items: flex-start;
      background: var(--paper); border: 1px solid var(--hairline);
      border-radius: 18px; padding: 22px 24px;
    }
    .key-card .k-num {
      font-family: 'Mitr', serif; font-size: 26px; line-height: 1;
      flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center; color: #fff;
    }
    .key-card b { display: block; font-size: 16px; color: var(--navy); margin-bottom: 4px; }
    .key-card p { font-size: 14px; color: var(--sub); }
    .key-card:nth-of-type(1) .k-num { background: var(--red); }
    .key-card:nth-of-type(2) .k-num { background: var(--orange); }
    .key-card:nth-of-type(3) .k-num { background: var(--yellow); }
    .key-card:nth-of-type(4) .k-num { background: var(--green); }
    .key-card:nth-of-type(5) .k-num { background: var(--sky); }
    .key-card:nth-of-type(6) .k-num { background: var(--blue); }
    .key-card:nth-of-type(7) .k-num { background: var(--violet); }
    .key-card:nth-of-type(8) .k-num { background: var(--pink); }
    .key-card:nth-of-type(9) .k-num { background: var(--rose); }
    .key-card:nth-of-type(10) .k-num { background: var(--mint); }
    html[lang="ja"] .key-card b { font-family: 'Noto Sans JP', sans-serif; }

    /* about page */
    .about-body { background: var(--paper); }
    .about-body .kicker { color: var(--blue); }
    .about-body .kicker::after { background: var(--blue); }
    .about-body h2 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 20px; }
    .about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
    @media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 36px; } }
    .about-grid p { color: var(--sub); margin-bottom: 14px; }

    .vision { background: var(--cream); border-top: 1px solid var(--hairline); }
    .vision .kicker { display: table; margin: 0 auto 18px; color: var(--green); }
    .vision .kicker::after { background: var(--green); }
    .vision h2 { text-align: center; font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 16px; }
    .vision-lead { text-align: center; color: var(--sub); max-width: 640px; margin: 0 auto 48px; font-size: 16.5px; }
    .mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 40px; max-width: 820px; margin: 0 auto; }
    @media (max-width: 700px) { .mission-grid { grid-template-columns: 1fr; } }
    .mission-grid li {
      list-style: none; position: relative; padding: 10px 0 10px 30px;
      border-top: 1px solid var(--hairline); color: var(--sub); font-size: 15px;
    }
    .mission-grid li::before { content: '✓'; position: absolute; left: 2px; top: 10px; color: var(--green); font-weight: 700; }
    .mission-title { text-align: center; font-size: 20px; color: var(--navy); margin: 40px 0 18px; font-family: 'Mitr', 'IBM Plex Sans Thai', serif; }

    .teachers { background: var(--paper); border-top: 1px solid var(--hairline); }
    .teachers .kicker { color: var(--violet); }
    .teachers .kicker::after { background: var(--violet); }

    /* Customer note "ปรับรูปนี้ให้สว่างขึ้น" against the Project-Based Learning
       block on /curriculum. lantern.jpg is shot indoors against a bright window
       and reads dim (mean luminance 115 vs ~140 site average). Lifted at render
       time rather than re-encoding: brightness alone blows the window highlights,
       so it is paired with a slight contrast drop. Scoped by filename so the
       second .split section (outdoor.jpg) is untouched. */
    .split-grid img[src$="lantern.jpg"] { filter: brightness(1.22) contrast(0.92) saturate(1.05); }
    .gallery-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
    @media (max-width: 700px) { .gallery-strip { grid-template-columns: 1fr; } }
    .gallery-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; border: 1px solid var(--hairline); }

    /* multilingual stats */
    .langs { background: var(--cream); border-top: 1px solid var(--hairline); }
    .langs .kicker { display: table; margin: 0 auto 18px; color: var(--red); }
    .langs .kicker::after { background: var(--red); }
    .langs h2 { text-align: center; font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 12px; }
    .langs .sec-lead { text-align: center; color: var(--sub); max-width: 560px; margin: 0 auto 48px; }
    .lang-stats { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 48px; }
    .lang-stat {
      text-align: center; background: var(--paper); border: 1px solid var(--hairline);
      border-radius: 18px; padding: 24px 34px; min-width: 150px;
    }
    .lang-stat .pct { font-family: 'Mitr', serif; font-size: 40px; line-height: 1; }
    .lang-stat .lang-name { font-size: 13px; font-weight: 600; color: var(--sub); margin-top: 8px; }
    .lang-stat:nth-of-type(1) .pct { color: var(--blue); }
    .lang-stat:nth-of-type(2) .pct { color: var(--red); }
    .lang-stat:nth-of-type(3) .pct { color: var(--pink); }
    .lang-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    @media (max-width: 860px) { .lang-cards { grid-template-columns: 1fr; } }
    .lang-card { background: var(--paper); border: 1px solid var(--hairline); border-top: 3px solid var(--hairline); border-radius: 18px; padding: 26px 24px; }
    .lang-card:nth-of-type(1) { border-top-color: var(--blue); }
    .lang-card:nth-of-type(2) { border-top-color: var(--red); }
    .lang-card:nth-of-type(3) { border-top-color: var(--pink); }
    .lang-card b { display: block; font-family: 'Mitr', 'IBM Plex Sans Thai', serif; font-weight: 500; font-size: 19px; color: var(--navy); margin-bottom: 8px; }
    .lang-card p { font-size: 14px; color: var(--sub); }
    html[lang="ja"] .lang-card b { font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif; }

    /* PBL + outdoor split sections */
    .split { background: var(--paper); border-top: 1px solid var(--hairline); }
    .split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
    @media (max-width: 860px) { .split-grid { grid-template-columns: 1fr; gap: 36px; } }
    .split h2 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 18px; }
    .split p { color: var(--sub); margin-bottom: 16px; }
    .split .kicker.pbl-k { color: var(--yellow); } .split .kicker.pbl-k::after { background: var(--yellow); }
    .split .kicker.out-k { color: var(--mint); } .split .kicker.out-k::after { background: var(--mint); }
    .chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .chip {
      font-size: 13px; font-weight: 600; color: var(--navy);
      background: var(--cream); border: 1px solid var(--hairline);
      border-radius: 999px; padding: 6px 14px;
    }

    /* daily schedule table */
    .sched-note { font-size: 13px; color: #98a4b1; margin-top: 14px; }
    .sched { width: 100%; border-collapse: collapse; max-width: 640px; margin: 0 auto; }
    .sched td { padding: 9px 12px; border-top: 1px solid var(--hairline); font-size: 14.5px; color: var(--sub); }
    .sched td.t { width: 84px; font-weight: 600; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
    .sched tr.hl td { background: #f0fdf4; }
    .tt .sched-wrap { background: var(--paper); border: 1px solid var(--hairline); border-radius: 18px; padding: 22px 18px; }

    /* six-step admissions grid */
    .adm-grid.six { grid-template-columns: repeat(3, 1fr); }
    @media (max-width: 860px) { .adm-grid.six { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .adm-grid.six { grid-template-columns: 1fr; } }

    /* ================= gallery page ================= */
    .gal { background: var(--paper); }
    .gal-head { text-align: center; }
    .gal-head .kicker { display: table; margin: 0 auto 18px; color: var(--rose); }
    .gal-head .kicker::after { background: var(--rose); }
    .gal-head h2 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 12px; }
    .gal-head .sec-lead { color: var(--sub); max-width: 560px; margin: 0 auto; }
    .gal-cat { margin-top: 64px; }
    .gal-cat h3 { font-size: 22px; display: flex; align-items: center; gap: 12px; }
    .gal-cat h3::before { content: ''; width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; background: var(--orange); }
    .gal-cat:nth-of-type(1) h3::before { background: var(--green); }
    .gal-cat:nth-of-type(2) h3::before { background: var(--blue); }
    .gal-cat:nth-of-type(3) h3::before { background: var(--orange); }
    .gal-cat:nth-of-type(4) h3::before { background: var(--pink); }
    .gal-cat:nth-of-type(5) h3::before { background: var(--red); }
    .gal-cat:nth-of-type(6) h3::before { background: var(--sky); }
    .gal-cat:nth-of-type(7) h3::before { background: var(--mint); }
    .gal-cat:nth-of-type(8) h3::before { background: var(--yellow); }
    .gal-cat:nth-of-type(9) h3::before { background: var(--violet); }
    .gal-desc { color: var(--sub); font-size: 14.5px; margin: 6px 0 18px; max-width: 640px; }
    .gal-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    @media (max-width: 860px) { .gal-row { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .gal-row { grid-template-columns: 1fr; } }
    .gal-row img {
      width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
      border-radius: 16px; border: 1px solid var(--hairline);
      transition: transform .25s ease;
    }
    .gal-row img:hover { transform: scale(1.02); }
    html[lang="ja"] .gal-cat h3 { font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif; }

    /* about: link under the photo strip */
    .strip-more { margin-top: 20px; }

    /* ================= in-depth prose (low on each page, for readers & SEO) ================= */
    .deep { background: var(--cream); border-top: 1px solid var(--hairline); }
    .deep .wrap { max-width: 760px; }
    .deep .kicker { color: var(--sub); }
    .deep .kicker::after { background: var(--sub); }
    .deep h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 18px; }
    .deep h3 { font-size: 19px; margin: 30px 0 10px; }
    .deep p { color: var(--sub); font-size: 15.5px; margin-bottom: 14px; }

    /* ================= UI polish + responsive refinements ================= */
    /* consistent soft depth on cards */
    .key-card, .explore-card, .approach-card, .lang-card, .lang-stat,
    .adm-card, .sched-wrap {
      box-shadow: 0 2px 10px rgba(34, 48, 63, 0.04);
    }
    .explore-card:hover, .key-card:hover, .approach-card:hover, .lang-card:hover {
      box-shadow: 0 14px 30px rgba(34, 48, 63, 0.10);
    }
    .key-card, .approach-card, .lang-card { transition: transform .25s ease, box-shadow .25s ease; }
    .key-card:hover, .approach-card:hover, .lang-card:hover { transform: translateY(-4px); }

    /* header lifts once the page scrolls */
    header { transition: box-shadow .25s ease; }
    header.scrolled { box-shadow: 0 6px 24px rgba(34, 48, 63, 0.08); }

    /* mobile menu slides in */
    @keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
    header.nav-open .nav-links { animation: menuIn .22s ease; }

    /* keyboard focus */
    a:focus-visible, button:focus-visible {
      outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px;
    }

    /* photos fade in as they load (classes applied by JS only) */
    .img-wait { opacity: 0; transform: scale(.985); }
    .img-wait.img-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }

    /* gallery lightbox */
    .gal-row img, .gallery-strip img { cursor: zoom-in; }
    .lb {
      position: fixed; inset: 0; z-index: 100;
      background: rgba(22, 26, 37, 0.93);
      display: none; flex-direction: column; align-items: center; justify-content: center;
      gap: 14px; padding: 24px;
    }
    .lb.open { display: flex; }
    .lb img { max-width: min(1100px, 94vw); max-height: 80vh; object-fit: contain; border-radius: 12px; }
    .lb-cap { color: rgba(255,255,255,.85); font-size: 14px; text-align: center; max-width: 90vw; }
    .lb-x {
      position: absolute; top: 12px; right: 16px;
      background: none; border: 0; color: #fff; font-size: 34px; line-height: 1; cursor: pointer;
    }

    /* back to top */
    .to-top {
      position: fixed; right: 18px; bottom: 18px; z-index: 60;
      width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
      background: var(--navy); color: #fff; font-size: 20px;
      box-shadow: 0 8px 20px rgba(0,0,0,.18);
      opacity: 0; pointer-events: none; transform: translateY(8px);
      transition: opacity .25s ease, transform .25s ease;
    }
    .to-top.show { opacity: 1; pointer-events: auto; transform: none; }

    /* ---- phone-size refinements ---- */
    @media (max-width: 700px) {
      .wrap { padding: 0 18px; }
      section { padding: 60px 0; }
      .hero { padding: 48px 0 60px; }
      .hero h1 { font-size: clamp(31px, 8.6vw, 40px); margin-bottom: 20px; }
      .hero p.lead { font-size: 15.5px; margin-bottom: 28px; }
      .hero-ctas { gap: 10px; }
      .hero-ctas .btn { flex: 1 1 100%; text-align: center; padding: 15px 20px; }
      .glance-stat { left: 12px; bottom: 12px; padding: 16px 20px; max-width: 210px; }
      .glance-stat .num { font-size: 38px; }
      .quote { padding: 56px 0; }
      .keys-grid { gap: 12px; }
      .key-card { padding: 18px 16px; }
      .prog { padding: 28px 22px; }
      .sched td { padding: 8px 8px; font-size: 13.5px; }
      .sched td.t { width: 60px; }
      .sched-wrap { padding: 14px 10px; }
      .gal-row { gap: 10px; }
      .gal-cat { margin-top: 48px; }
      .page-cta .btns .btn { flex: 1 1 100%; text-align: center; }
      .page-cta .btns { flex-direction: column; }
      footer { padding: 28px 18px; }
      .ct-card { padding: 26px 20px; }
      .adm-step { padding: 26px 20px; }
    }
    @media (max-width: 560px) {
      .topbar-note { display: none; }
      .topbar-inner { justify-content: center; padding: 6px 12px; }
      .lang-switch { gap: 6px; }
      .lang-switch button { padding: 7px 14px; font-size: 13px; }
    }

    /* ============================================================
       V2 — STORYBOOK COLOUR-BLOCK REDESIGN
       Cascade layer over everything above. CSS-only: no class or
       DOM changes, so the selector-driven i18n stays intact.
       ============================================================ */

    /* ---- guard rails ---- */
    html, body { overflow-x: hidden; }

    /* ---- typography: braver scale, Mitr 600, Thai-safe line-height ---- */
    h1, h2 { font-weight: 600; line-height: 1.38; }
    .hero h1 { font-size: clamp(38px, 6vw, 64px); }
    .glance h2, .programs h2, .keys h2, .explore h2, .journey h2, .langs h2,
    .approach h2, .adm h2, .care-daily h2, .ld h2, .vision h2, .gal-head h2,
    .contact h2, .welcome h2, .about-body h2, .teachers h2 {
      font-size: clamp(30px, 4.2vw, 48px);
    }
    .safety h2, .tt h2, .adm-extra h2, .page-cta h2 { font-size: clamp(28px, 3.8vw, 42px); }

    /* ---- buttons: friendly voice, not investor-deck ---- */
    .btn {
      text-transform: none; letter-spacing: 0.02em;
      font-family: 'Mitr', 'IBM Plex Sans Thai', sans-serif;
      font-weight: 500; font-size: 15.5px; padding: 15px 32px;
    }
    .btn:active { transform: translateY(2px); box-shadow: 0 4px 12px rgba(16,185,129,.25); }
    .nav .btn { padding: 11px 22px; font-size: 14px; }
    html[lang="ja"] .btn { font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif; }

    /* ---- kickers: sticker pills with a squiggle ---- */
    .kicker {
      display: inline-flex; align-items: center;
      padding: 7px 16px 6px; border-radius: 999px;
      background: rgba(64, 64, 92, 0.06);
      background: color-mix(in srgb, currentColor 10%, transparent);
      letter-spacing: 0.14em; font-size: 12px;
      margin-bottom: 22px;
    }
    .glance .kicker, .programs .kicker, .keys .kicker, .explore .kicker,
    .journey .kicker, .langs .kicker, .approach .kicker, .adm .kicker,
    .care-daily .kicker, .ld .kicker, .vision .kicker, .gal-head .kicker,
    .contact .kicker, .adm-extra .kicker { display: inline-flex; margin-left: auto; margin-right: auto; }
    .kicker::after {
      left: 14px; bottom: -8px; width: 46px; height: 7px;
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 7'%3E%3Cpath d='M1 5c4-3.4 7.6-3.4 11.5 0s7.6 3.4 11.5 0 7.6-3.4 11.5 0 6 2.6 9.5 0' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 7'%3E%3Cpath d='M1 5c4-3.4 7.6-3.4 11.5 0s7.6 3.4 11.5 0 7.6-3.4 11.5 0 6 2.6 9.5 0' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
    }

    /* ---- section colour fields (soft tints, rainbow-spread, rounded tops) ---- */
    .glance, .tt { background: #eef6fc; }
    .keys, .adm-extra { background: #fff7e0; }
    .explore { background: #fdf1f7; }
    .langs, .care-daily, .vision { background: #ecf8f1; }
    .approach, .ld { background: #f4f1fd; }
    .glance, .keys, .explore, .langs, .approach, .tt, .care-daily, .ld,
    .adm-extra, .vision {
      border-top: 0; border-bottom: 0;
      border-radius: 48px 48px 0 0;
      position: relative;
    }
    @media (max-width: 700px) {
      .glance, .keys, .explore, .langs, .approach, .tt, .care-daily, .ld,
      .adm-extra, .vision { border-radius: 28px 28px 0 0; }
    }

    /* ---- hero: intentional shapes, not smudges ---- */
    .hero {
      background-image:
        radial-gradient(rgba(64,64,92,0.05) 1.5px, transparent 1.5px);
      background-size: 26px 26px;
      background-color: var(--cream);
    }
    .hero::before {
      filter: none; border-radius: 50%;
      width: 300px; height: 300px; right: -70px; top: -90px;
      background: rgba(251, 191, 36, 0.18);
    }
    .hero::after {
      filter: none; background: transparent;
      border: 26px solid rgba(56, 189, 248, 0.14);
      width: 260px; height: 260px; left: -110px; bottom: -110px;
    }
    .hero h1 em {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 8'%3E%3Cpath d='M1 6c4-3.6 7.6-3.6 11.5 0s7.6 3.6 11.5 0 7.6-3.6 11.5 0 6 2.8 9.5 0' fill='none' stroke='%23f97316' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: repeat-x; background-position: bottom left;
      background-size: 46px 8px; padding-bottom: 12px;
      -webkit-background-clip: initial; background-clip: initial;
      -webkit-text-fill-color: currentColor; color: var(--orange);
    }
    img.hero-visual {
      border-radius: 28px;
      border: 0;
      box-shadow: 14px 14px 0 rgba(139, 92, 246, 0.20);
    }

    /* ---- photos: polaroid + tilt energy ---- */
    .side-photo {
      border: 10px solid #fff; border-radius: 14px;
      box-shadow: 0 14px 34px rgba(34, 48, 63, 0.14);
      transform: rotate(-1.5deg);
      transition: transform .35s cubic-bezier(.34,1.56,.64,1);
    }
    .about-grid .side-photo, .split-grid .side-photo { transform: rotate(1.4deg); }
    .welcome-grid .side-photo { transform: rotate(-1.5deg); }
    .side-photo:hover { transform: rotate(0deg) scale(1.015); }
    .j-card:nth-of-type(1) img.photo { transform: rotate(-1.2deg); }
    .j-card:nth-of-type(3) img.photo { transform: rotate(1.2deg); }
    .j-card img.photo { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
    .j-card:hover img.photo { transform: rotate(0) translateY(-6px); }

    /* ---- icon chips: seated, chunkier strokes ---- */
    .fact svg, .care-fact svg, .prog svg {
      width: 56px; height: 56px; padding: 13px;
      border-radius: 18px; stroke-width: 2;
      background: rgba(64,64,92,0.06); flex-shrink: 0;
    }
    .fact:nth-of-type(1) svg { background: color-mix(in srgb, var(--red) 12%, white); }
    .fact:nth-of-type(2) svg { background: color-mix(in srgb, var(--orange) 14%, white); }
    .fact:nth-of-type(3) svg { background: color-mix(in srgb, var(--green) 13%, white); }
    .fact:nth-of-type(4) svg { background: color-mix(in srgb, var(--blue) 12%, white); }
    .care-fact:nth-of-type(1) svg { background: color-mix(in srgb, var(--orange) 14%, white); }
    .care-fact:nth-of-type(2) svg { background: color-mix(in srgb, var(--violet) 12%, white); }
    .care-fact:nth-of-type(3) svg { background: color-mix(in srgb, var(--sky) 14%, white); }
    .care-fact:nth-of-type(4) svg { background: color-mix(in srgb, var(--rose) 12%, white); }
    .fact, .care-fact, .step { border-top: 2px dotted rgba(64,64,92,0.12); }
    .fact:last-child { border-bottom: 2px dotted rgba(64,64,92,0.12); }

    /* ---- curriculum grid: explode the ledger ---- */
    .prog-grid { gap: 18px; border: 0; }
    .prog {
      border: 0; border-radius: 22px; background: #fff;
      box-shadow: 0 10px 28px rgba(64, 64, 92, 0.07);
      padding: 32px 28px;
    }
    .prog:nth-of-type(1) svg { background: color-mix(in srgb, var(--red) 12%, white); }
    .prog:nth-of-type(2) svg { background: color-mix(in srgb, var(--orange) 14%, white); }
    .prog:nth-of-type(3) svg { background: color-mix(in srgb, var(--yellow) 18%, white); }
    .prog:nth-of-type(4) svg { background: color-mix(in srgb, var(--green) 13%, white); }
    .prog:nth-of-type(5) svg { background: color-mix(in srgb, var(--blue) 12%, white); }
    .prog:nth-of-type(6) svg { background: color-mix(in srgb, var(--violet) 12%, white); }
    .prog:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(64,64,92,.12); }

    /* ---- cards: pastel sticker species ---- */
    .key-card { border: 0; }
    .key-card:nth-of-type(1) { background: color-mix(in srgb, var(--red) 7%, white); }
    .key-card:nth-of-type(2) { background: color-mix(in srgb, var(--orange) 8%, white); }
    .key-card:nth-of-type(3) { background: color-mix(in srgb, var(--yellow) 12%, white); }
    .key-card:nth-of-type(4) { background: color-mix(in srgb, var(--green) 8%, white); }
    .key-card:nth-of-type(5) { background: color-mix(in srgb, var(--sky) 9%, white); }
    .key-card:nth-of-type(6) { background: color-mix(in srgb, var(--blue) 7%, white); }
    .key-card:nth-of-type(7) { background: color-mix(in srgb, var(--violet) 8%, white); }
    .key-card:nth-of-type(8) { background: color-mix(in srgb, var(--pink) 7%, white); }
    .key-card:nth-of-type(9) { background: color-mix(in srgb, var(--rose) 8%, white); }
    .key-card:nth-of-type(10) { background: color-mix(in srgb, var(--mint) 12%, white); }
    .key-card .k-num { border-radius: 14px; transform: rotate(-4deg); box-shadow: 0 4px 10px rgba(0,0,0,.14); }
    .key-card:nth-of-type(even) .k-num { transform: rotate(4deg); }
    .explore-card, .approach-card, .lang-card { background: #fff; }
    .adm-step { border: 0; border-radius: 20px; background: #fff; box-shadow: 0 8px 22px rgba(64,64,92,.06); }
    .adm-grid, .adm-grid.six { border: 0; gap: 16px; }

    /* ---- numbered badges: one dialect ---- */
    .step-num, .adm-step .n {
      width: 48px; height: 48px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; color: #fff; line-height: 1; margin-bottom: 14px;
    }
    .step:nth-of-type(1) .step-num { background: var(--green); color: #fff; }
    .step:nth-of-type(2) .step-num { background: var(--blue); color: #fff; }
    .step:nth-of-type(3) .step-num { background: var(--orange); color: #fff; }
    .adm-step:nth-of-type(1) .n { background: var(--red); color: #fff; }
    .adm-step:nth-of-type(2) .n { background: var(--orange); color: #fff; }
    .adm-step:nth-of-type(3) .n { background: var(--green); color: #fff; }
    .adm-step:nth-of-type(4) .n { background: var(--blue); color: #fff; }
    .adm-step:nth-of-type(5) .n { background: var(--violet); color: #fff; }
    .adm-step:nth-of-type(6) .n { background: var(--pink); color: #fff; }

    /* ---- marquee: washi-tape band with legible ink ---- */
    .marquee {
      transform: rotate(-1.2deg) scale(1.02);
      padding: 15px 0; border: 0;
      box-shadow: 0 8px 24px rgba(255, 181, 71, 0.35);
    }
    .marquee span { color: var(--sun-ink); font-size: 14.5px; letter-spacing: 0.18em; }
    .marquee span.dot { color: rgba(138, 82, 0, 0.4); }

    /* ---- chips: playful tints (non-sequential hues) ---- */
    .chip { border: 0; font-weight: 600; }
    .chips .chip:nth-child(6n+1) { background: color-mix(in srgb, var(--green) 12%, white); color: #15803d; }
    .chips .chip:nth-child(6n+2) { background: color-mix(in srgb, var(--violet) 11%, white); color: #6d28d9; }
    .chips .chip:nth-child(6n+3) { background: color-mix(in srgb, var(--orange) 13%, white); color: #c2410c; }
    .chips .chip:nth-child(6n+4) { background: color-mix(in srgb, var(--blue) 11%, white); color: #1d4ed8; }
    .chips .chip:nth-child(6n+5) { background: color-mix(in srgb, var(--pink) 10%, white); color: #be185d; }
    .chips .chip:nth-child(6n+6) { background: color-mix(in srgb, var(--yellow) 16%, white); color: #a16207; }

    /* ---- lang stats: thick accent tops + tints ---- */
    .lang-stat { border: 0; border-top: 5px solid var(--hairline); }
    .lang-stat:nth-of-type(1) { border-top-color: var(--blue); background: color-mix(in srgb, var(--blue) 5%, white); }
    .lang-stat:nth-of-type(2) { border-top-color: var(--red); background: color-mix(in srgb, var(--red) 5%, white); }
    .lang-stat:nth-of-type(3) { border-top-color: var(--pink); background: color-mix(in srgb, var(--pink) 5%, white); }
    .lang-stat .pct { font-size: 46px; font-weight: 600; }

    /* ---- quote + journey: depth on the colour slabs ---- */
    .quote { position: relative; overflow: hidden; }
    .quote::before {
      content: '\201C'; position: absolute; top: -70px; left: 4%;
      font-family: 'Mitr', serif; font-size: 300px; line-height: 1;
      color: rgba(255,255,255,0.13); pointer-events: none;
    }
    .quote::after {
      content: ''; position: absolute; right: -90px; bottom: -120px;
      width: 280px; height: 280px; border-radius: 50%;
      background: rgba(255,255,255,0.09); pointer-events: none;
    }
    .quote .wrap { position: relative; }
    .journey { position: relative; overflow: hidden; }
    .journey::before {
      content: ''; position: absolute; left: -80px; top: -80px;
      width: 240px; height: 240px; border-radius: 50%;
      border: 30px solid rgba(255,255,255,0.08); pointer-events: none;
    }
    .journey .wrap { position: relative; }

    /* ---- page CTA: gift-box moment ---- */
    .page-cta { background: transparent; border: 0; padding: 48px 0 88px; }
    .page-cta .wrap {
      background: linear-gradient(135deg, #fff7ed 0%, #fdf2f8 100%);
      border-radius: 36px; padding: 64px 32px;
      position: relative; overflow: hidden;
      max-width: 1032px;
    }
    .page-cta .wrap::before {
      content: ''; position: absolute; left: -60px; top: -60px;
      width: 180px; height: 180px; border-radius: 50%;
      background: rgba(34, 197, 94, 0.10);
    }
    .page-cta .wrap::after {
      content: ''; position: absolute; right: -70px; bottom: -70px;
      width: 200px; height: 200px; border-radius: 50%;
      border: 22px solid rgba(139, 92, 246, 0.10);
    }
    .page-cta h2, .page-cta p, .page-cta .btns { position: relative; z-index: 1; }

    /* ---- contact cards: warm on slate ---- */
    .ct-card {
      background: rgba(255,255,255,0.06); border: 0; border-radius: 24px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
      position: relative; overflow: hidden;
    }
    .ct-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; }
    .ct-card:nth-of-type(1)::before { background: var(--yellow); }
    .ct-card:nth-of-type(2)::before { background: var(--sky); }
    .map-ph { border-radius: 18px; border-style: solid; border-color: rgba(255,255,255,0.12); }

    /* ---- footer: a real brand close with scallop edge ---- */
    footer { position: relative; padding: 72px 24px 44px; }
    footer::before {
      content: ''; position: absolute; top: -22px; left: 0; right: 0; height: 23px;
      background: var(--navy-deep);
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 23'%3E%3Cpath d='M0 23a24 24 0 0 1 48 0z'/%3E%3C/svg%3E") repeat-x bottom / 48px 23px;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 23'%3E%3Cpath d='M0 23a24 24 0 0 1 48 0z'/%3E%3C/svg%3E") repeat-x bottom / 48px 23px;
    }
    footer .f-brand { font-size: 21px; margin-bottom: 14px; }
    footer .f-brand::after {
      content: ''; display: block; width: 88px; height: 10px; margin: 14px auto 0;
      background:
        radial-gradient(circle 5px at 5px 5px, var(--orange) 4.5px, transparent 5px),
        radial-gradient(circle 5px at 31px 5px, var(--green) 4.5px, transparent 5px),
        radial-gradient(circle 5px at 57px 5px, var(--blue) 4.5px, transparent 5px),
        radial-gradient(circle 5px at 83px 5px, var(--pink) 4.5px, transparent 5px);
    }
    .f-links { margin: 16px 0 14px; }
    .f-links a { font-size: 13px; }

    /* ---- gallery: category pills + fix off-by-one accent bug ---- */
    .gal-cat h3 {
      display: inline-flex; align-items: center; gap: 12px;
      padding: 9px 20px; border-radius: 999px; font-size: 20px;
      background: rgba(64,64,92,0.05);
    }
    .gal-cat h3::before { width: 11px; height: 11px; }
    /* .gal-head is the first div inside .wrap, so categories are nth-of-type 2..10 */
    .gal-cat:nth-of-type(1) h3::before, .gal-cat:nth-of-type(2) h3::before { background: var(--green); }
    .gal-cat:nth-of-type(2) h3 { background: color-mix(in srgb, var(--green) 10%, white); }
    .gal-cat:nth-of-type(3) h3::before { background: var(--blue); }
    .gal-cat:nth-of-type(3) h3 { background: color-mix(in srgb, var(--blue) 9%, white); }
    .gal-cat:nth-of-type(4) h3::before { background: var(--orange); }
    .gal-cat:nth-of-type(4) h3 { background: color-mix(in srgb, var(--orange) 11%, white); }
    .gal-cat:nth-of-type(5) h3::before { background: var(--pink); }
    .gal-cat:nth-of-type(5) h3 { background: color-mix(in srgb, var(--pink) 9%, white); }
    .gal-cat:nth-of-type(6) h3::before { background: var(--red); }
    .gal-cat:nth-of-type(6) h3 { background: color-mix(in srgb, var(--red) 9%, white); }
    .gal-cat:nth-of-type(7) h3::before { background: var(--sky); }
    .gal-cat:nth-of-type(7) h3 { background: color-mix(in srgb, var(--sky) 11%, white); }
    .gal-cat:nth-of-type(8) h3::before { background: var(--mint); }
    .gal-cat:nth-of-type(8) h3 { background: color-mix(in srgb, var(--mint) 13%, white); }
    .gal-cat:nth-of-type(9) h3::before { background: var(--yellow); }
    .gal-cat:nth-of-type(9) h3 { background: color-mix(in srgb, var(--yellow) 14%, white); }
    .gal-cat:nth-of-type(10) h3::before { background: var(--violet); }
    .gal-cat:nth-of-type(10) h3 { background: color-mix(in srgb, var(--violet) 9%, white); }

    /* ---- rhythm: asymmetric photo grids ---- */
    .welcome-grid { grid-template-columns: 1.15fr 0.85fr; }
    .split-grid { grid-template-columns: 0.92fr 1.08fr; }
    @media (max-width: 860px) { .welcome-grid, .split-grid { grid-template-columns: 1fr; } }

    /* ---- schedule card ---- */
    .sched-wrap { border: 0; border-radius: 24px; box-shadow: 0 14px 34px rgba(64,64,92,0.10); background: #fff; }
    .sched tr.hl td { background: color-mix(in srgb, var(--green) 9%, white); }

    /* ---- deep prose: comfortable measure ---- */
    .deep .wrap { max-width: 720px; }

    /* ---- tablet intermediate grids (900-640) ---- */
    @media (max-width: 1000px) {
      .prog-grid, .approach-grid, .lang-cards { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .prog-grid, .approach-grid, .lang-cards { grid-template-columns: 1fr; }
    }

    /* ---- short landscape phones ---- */
    @media (max-height: 520px) and (orientation: landscape) {
      .hero { padding: 36px 0 44px; }
      .topbar { display: none; }
    }

    /* ---- reduced motion covers the new tricks ---- */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .side-photo, .j-card img.photo, .prog, .key-card, .approach-card,
      .lang-card, .marquee { transform: none !important; transition: none !important; }
      .img-wait { opacity: 1 !important; transform: none !important; }
    }

    /* ============================================================
       calm pass — colour from the photographs, the day as the hero
       ============================================================
       Every earlier layer added a kit: pills, blobs, polaroid tilt, pastel
       card species, a washi-tape ticker, and the Tailwind palette verbatim
       (#f97316, #22c55e, #3b82f6…). That is why the site read like every
       other generated kindergarten page. This layer points the palette at
       colours taken from the school's own photographs — uniform navy, wall
       white, morning sky, the turf, sports-day yellow — for every page, and
       retires the kit on the home page, whose hero becomes the school's
       real day, scrubbable. The other pages keep their structure until the
       direction is agreed. */
    :root {
      --ink: #22304a; --navy: #22304a; --navy-deep: #1a2538;
      --paper: #fffcf7; --cream: #fffcf7; --sub: #5b6577;
      --sky: #cfe6f5; --sky-deep: #8fc1e3;
      --turf: #2e7d5b; --turf-deep: #24634a; --turf-soft: #e6f2ec;
      --sun: #f2b950; --sun-soft: #fdf1d6; --sun-ink: #7a5a12;
      --check: #b8383b;
      --hairline: #e8e2d6;
      /* the earlier layers' names, pointed at the new palette so the other
         eight pages shift with it rather than keeping the rainbow */
      --orange: var(--turf); --red: var(--turf-deep); --green: var(--turf);
      --yellow: var(--sun); --blue: var(--sky-deep); --violet: var(--sky-deep);
      --pink: var(--check); --mint: var(--turf); --lav: var(--sky-deep);
      --rose: var(--check); --gold: var(--turf); --gold-soft: var(--turf-soft);
      --navy-soft: var(--sky);
    }
    .btn-navy, .nav-line-btn, .nav-menu-line {
      background: var(--turf); box-shadow: none;
    }
    .btn-navy:hover, .nav-line-btn:hover { background: var(--turf-deep); }
    .btn:active { box-shadow: none; }
    .btn-outline { border-color: var(--ink); color: var(--ink); }
    .btn-outline:hover { background: var(--ink); color: #fff; }

    /* ---- home: retire the kit ---- */
    body[data-page="home"] .hero { background: var(--paper); background-image: none; padding: 72px 0 84px; }
    body[data-page="home"] .hero::before, body[data-page="home"] .hero::after { display: none; }
    body[data-page="home"] .kicker {
      display: block; padding: 0; background: none; border-radius: 0;
      font-family: 'IBM Plex Sans Thai', system-ui, sans-serif;
      font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none;
      color: var(--sub); margin: 0 0 18px;
    }
    body[data-page="home"] .kicker::after { display: none; }
    body[data-page="home"] h1, body[data-page="home"] h2, body[data-page="home"] h3 {
      font-weight: 500; color: var(--ink);
    }
    body[data-page="home"] .hero h1 {
      font-size: clamp(38px, 4.8vw, 56px); line-height: 1.18; letter-spacing: -0.005em;
      margin-bottom: 22px; max-width: 12ch;
    }
    /* the last line used to be the only coloured one, with a squiggle under
       it — the commonest tell of a generated page. The motto is three
       equal lines. */
    body[data-page="home"] .hero h1 em {
      color: inherit; background: none; padding: 0;
      -webkit-text-fill-color: currentColor;
    }
    body[data-page="home"] .hero p.lead { font-size: 17px; line-height: 1.75; max-width: 44ch; color: var(--sub); margin-bottom: 30px; }
    body[data-page="home"] .hero-ctas { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; }
    body[data-page="home"] .hero-ctas .btn { padding: 13px 26px; font-size: 15px; }
    body[data-page="home"] .hero-grid { grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: center; }
    @media (max-width: 860px) { body[data-page="home"] .hero-grid { grid-template-columns: 1fr; gap: 36px; } }

    body[data-page="home"] section { padding: 72px 0; }
    body[data-page="home"] .welcome, body[data-page="home"] .glance, body[data-page="home"] .keys,
    body[data-page="home"] .explore, body[data-page="home"] .deep {
      background: var(--paper); border: 0; border-radius: 0; box-shadow: none;
    }
    body[data-page="home"] .welcome::before, body[data-page="home"] .welcome::after,
    body[data-page="home"] .glance::before, body[data-page="home"] .glance::after,
    body[data-page="home"] .keys::before, body[data-page="home"] .keys::after,
    body[data-page="home"] .explore::before, body[data-page="home"] .explore::after { display: none; }
    body[data-page="home"] .glance { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 40px 0; }
    body[data-page="home"] h2 { font-size: clamp(28px, 3.4vw, 36px); line-height: 1.25; text-align: left; margin-bottom: 14px; }
    body[data-page="home"] .sec-lead { text-align: left; margin: 0 0 32px; color: var(--sub); max-width: 52ch; font-size: 17px; }
    body[data-page="home"] .photo, body[data-page="home"] .side-photo {
      transform: none; border: 0; padding: 0; background: none;
      border-radius: 18px; box-shadow: 0 18px 44px rgba(34, 48, 74, 0.14);
    }
    body[data-page="home"] .reveal { opacity: 1; transform: none; transition: none; }
    body[data-page="home"] .marquee { display: none; }

    /* facts: one row of four figures at text size, not a badge with a big
       number and a photo beside it */
    body[data-page="home"] .glance-grid { display: block; }
    body[data-page="home"] .glance h2 { font-size: 15px; font-weight: 400; color: var(--sub); font-family: 'IBM Plex Sans Thai', system-ui, sans-serif; margin-bottom: 22px; }
    body[data-page="home"] .fact-rows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
    @media (max-width: 760px) { body[data-page="home"] .fact-rows { grid-template-columns: 1fr 1fr; gap: 22px; } }
    body[data-page="home"] .fact { display: block; padding: 0; background: none; border: 0; box-shadow: none; }
    body[data-page="home"] .fact svg { display: none; }
    body[data-page="home"] .fact b { display: block; font-family: 'Mitr', 'IBM Plex Sans Thai', sans-serif; font-weight: 500; font-size: 19px; line-height: 1.35; color: var(--ink); margin-bottom: 6px; text-transform: none; letter-spacing: 0; }
    body[data-page="home"] .fact p { font-size: 14.5px; line-height: 1.6; color: var(--sub); margin: 0; }

    /* the ten keys: a ledger you open, not ten cards you scroll past */
    body[data-page="home"] .keys-grid { display: block; max-width: 760px; margin-top: 8px; border-top: 1px solid var(--hairline); }
    body[data-page="home"] .key-card {
      display: block; padding: 0; margin: 0; border: 0; border-bottom: 1px solid var(--hairline);
      background: none; border-radius: 0; box-shadow: none; transform: none;
    }
    body[data-page="home"] .key-card summary {
      display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: baseline;
      padding: 18px 8px; cursor: pointer; list-style: none;
    }
    body[data-page="home"] .key-card summary::-webkit-details-marker { display: none; }
    body[data-page="home"] .key-card summary:hover b { color: var(--turf-deep); }
    body[data-page="home"] .key-card summary:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 2px; border-radius: 8px; }
    body[data-page="home"] .key-card .k-num {
      width: auto; height: auto; transform: none; box-shadow: none; background: none; border-radius: 0;
      font-family: 'Mitr', sans-serif; font-weight: 500; font-size: 17px; color: var(--turf); text-align: right;
    }
    body[data-page="home"] .key-card b { font-family: 'Mitr', 'IBM Plex Sans Thai', sans-serif; font-weight: 500; font-size: 18px; line-height: 1.4; color: var(--ink); }
    /* This paragraph is wrapped at runtime in .key-body, which is clipped so the
       card can slide open. A negative top margin here would put the first line
       above that clip's padding box and cut the top off it — which is what ate
       the tone marks in ที่ and ขึ้น, where a mark stacks on top of an above-vowel
       and is the only ink up there. So the snug under the summary is done on
       .key-body, outside the clip, and the padding buys the line real headroom:
       the tallest stack on this page, ขึ้, reaches to within 0.9px of the line-box
       top at this size — measured in the browser, not guessed. */
    body[data-page="home"] .key-card p { margin: 0 0 20px 62px; padding-top: 5px; max-width: 58ch; color: var(--sub); font-size: 15.5px; line-height: 1.7; }
    body[data-page="home"] .key-body { margin-top: -11px; }   /* the 5px of headroom, plus 6px of snug */
    body[data-page="home"] .key-card[open] summary b { color: var(--turf-deep); }

    /* explore: four links, not four cards with arrows */
    body[data-page="home"] .explore-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
    @media (max-width: 760px) { body[data-page="home"] .explore-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
    body[data-page="home"] .explore-card {
      display: block; padding: 18px 0 0; background: none; border: 0; border-top: 2px solid var(--ink);
      border-radius: 0; box-shadow: none; text-decoration: none; transform: none;
    }
    body[data-page="home"] .explore-card:hover { border-top-color: var(--turf); }
    body[data-page="home"] .explore-card:hover b { color: var(--turf-deep); text-decoration: underline; text-underline-offset: 4px; }
    body[data-page="home"] .explore-card b { font-family: 'Mitr', 'IBM Plex Sans Thai', sans-serif; font-weight: 500; font-size: 20px; color: var(--ink); display: block; margin-bottom: 8px; }
    body[data-page="home"] .explore-card p { font-size: 15px; color: var(--sub); line-height: 1.6; margin: 0; }
    body[data-page="home"] .explore-card .more { display: none; }

    body[data-page="home"] .deep { border-top: 1px solid var(--hairline); }
    body[data-page="home"] .deep .wrap { max-width: 1080px; }
    body[data-page="home"] .deep p, body[data-page="home"] .deep h3, body[data-page="home"] .deep h2 { max-width: 68ch; }
    body[data-page="home"] .deep h3 { font-size: 21px; margin: 32px 0 8px; }
    body[data-page="home"] .deep p { color: var(--sub); }

    body[data-page="home"] footer { background: var(--ink); padding: 56px 24px 40px; }
    body[data-page="home"] footer::before { display: none; }
    body[data-page="home"] footer .f-brand::after { display: none; }

    /* ---- the day: the school's real schedule, 7:15 to 17:00, scrubbable ----
       --t runs 0 → 1 across the day and tints the panel from morning sky to
       afternoon sun. The thumb is the one place the yellow appears. */
    .day { --t: 0; display: grid; gap: 14px; }
    .day-frame {
      position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden;
      background: var(--sky); box-shadow: 0 24px 60px rgba(34, 48, 74, 0.16);
    }
    .day-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease; }
    .day-photo.is-swapping { opacity: 0.6; }
    .day-now {
      position: absolute; left: 18px; right: 18px; bottom: 18px;
      padding: 16px 20px 15px; border-radius: 16px;
      background: color-mix(in srgb, var(--sky) calc((1 - var(--t)) * 100%), var(--sun-soft));
      color: var(--ink);
      display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: baseline;
    }
    .day-time { font-family: 'Mitr', sans-serif; font-weight: 500; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; grid-row: 1 / 3; }
    .day-label { font-family: 'Mitr', 'IBM Plex Sans Thai', sans-serif; font-weight: 500; font-size: 21px; line-height: 1.3; }
    html[lang="ja"] .day-label { font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif; }
    .day-others { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; color: var(--sub); line-height: 1.4; }
    .day-others span:lang(ja) { font-family: 'Noto Sans JP', sans-serif; }
    .day-control { display: grid; gap: 8px; padding: 0 6px; }
    .day-caption { font-size: 14.5px; color: var(--sub); }
    .day-ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; }
    .day input[type="range"] {
      -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0;
      background: transparent; cursor: pointer;
    }
    .day input[type="range"]::-webkit-slider-runnable-track {
      height: 4px; border-radius: 2px;
      background: linear-gradient(90deg, var(--sky-deep), var(--sun));
    }
    .day input[type="range"]::-moz-range-track {
      height: 4px; border-radius: 2px;
      background: linear-gradient(90deg, var(--sky-deep), var(--sun));
    }
    .day input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%;
      background: var(--sun); border: 3px solid var(--paper); box-shadow: 0 2px 8px rgba(34, 48, 74, 0.3);
    }
    .day input[type="range"]::-moz-range-thumb {
      width: 24px; height: 24px; border-radius: 50%;
      background: var(--sun); border: 3px solid var(--paper); box-shadow: 0 2px 8px rgba(34, 48, 74, 0.3);
    }
    .day input[type="range"]:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 4px; border-radius: 6px; }
    @media (max-width: 560px) {
      .day-now { left: 12px; right: 12px; bottom: 12px; padding: 12px 14px; }
      .day-time { font-size: 24px; } .day-label { font-size: 17px; }
    }
    @media (prefers-reduced-motion: reduce) { .day-photo { transition: none; } }

    /* ============================================================
       calm pass, all pages
       ============================================================
       The home page set the direction; this carries it to the other eight
       without touching their markup, so every positional th/en/ja array
       stays aligned. Specificity matters here: the kit's per-item colours
       are mostly `.x:nth-of-type(n) .y` (0,3,0), so each override is written
       to (0,3,0) or higher and relies on coming last. */

    /* ---- type: one scale, left-aligned, Thai-safe leading ---- */
    h1 { font-size: clamp(34px, 4.4vw, 50px); font-weight: 500; line-height: 1.2; color: var(--ink); letter-spacing: -0.005em; }
    .glance h2, .programs h2, .keys h2, .explore h2, .journey h2, .langs h2,
    .approach h2, .adm h2, .care-daily h2, .ld h2, .vision h2, .gal-head h2,
    .contact h2, .welcome h2, .about-body h2, .teachers h2,
    .safety h2, .tt h2, .adm-extra h2, .page-cta h2 {
      font-size: clamp(27px, 3.3vw, 36px); font-weight: 500; line-height: 1.25;
      text-align: left; margin-bottom: 14px;
    }
    h3 { font-weight: 500; color: var(--ink); }
    .journey-lead, .vision-lead, .contact-lead, .ld .sec-lead, .gal-head .sec-lead,
    .programs .sec-lead, .approach .sec-lead, .langs .sec-lead, .adm .sec-lead,
    .care-daily .sec-lead, .explore .sec-lead, .keys .sec-lead, .page-cta p, .sec-lead {
      text-align: left; margin-left: 0; margin-right: 0; margin-bottom: 36px;
      max-width: 56ch; font-size: 17px; color: var(--sub);
    }
    .gal .gal-head { text-align: left; }
    .mission-grid { margin-left: 0; }

    /* ---- labels: a plain line above the heading, on every page ---- */
    .kicker,
    .glance .kicker, .programs .kicker, .keys .kicker, .explore .kicker, .journey .kicker,
    .langs .kicker, .approach .kicker, .adm .kicker, .care-daily .kicker, .ld .kicker,
    .vision .kicker, .gal-head .kicker, .contact .kicker, .adm-extra .kicker, .tt .kicker,
    .safety .kicker, .about-body .kicker, .teachers .kicker, .hero .kicker {
      display: block; padding: 0; margin: 0 0 14px; background: none; border-radius: 0;
      font-family: 'IBM Plex Sans Thai', system-ui, sans-serif;
      font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none;
      color: var(--sub);
    }
    .kicker::after, .hero .kicker::after { display: none; }
    .journey .kicker, .contact .kicker { color: rgba(255, 255, 255, 0.72); }

    /* ---- fields: one ground, hairlines between sections ---- */
    .glance, .tt, .keys, .adm-extra, .explore, .langs, .care-daily, .vision, .approach, .ld,
    .about-body, .teachers, .safety, .programs, .adm, .gal, .film-page, .deep {
      background: var(--paper); border-radius: 0; border-top: 1px solid var(--hairline); border-bottom: 0;
    }
    .hero, .about-body:first-of-type, .programs:first-of-type, .adm:first-of-type,
    .care-daily:first-of-type, .gal:first-of-type, .film-page:first-of-type { border-top: 0; }
    section { padding: 72px 0; }
    .reveal { opacity: 1; transform: none; transition: none; }

    /* ---- photographs: the photo, not a polaroid of it ---- */
    .photo, .side-photo, .band-photo, .about-grid .side-photo, .split-grid .side-photo,
    .welcome-grid .side-photo, .j-card img.photo, .j-card:nth-of-type(1) img.photo, .j-card:nth-of-type(3) img.photo {
      transform: none; border: 0; padding: 0; background: none;
      border-radius: 18px; box-shadow: 0 18px 44px rgba(34, 48, 74, 0.14);
    }
    .side-photo:hover, .j-card:hover img.photo { transform: none; }
    .j-card .ph, .j-card:hover .ph { transform: none; border-color: transparent; }

    /* ---- the two colour slabs: navy, not a gradient ---- */
    .quote { background: var(--ink); text-align: left; padding: 56px 0; }
    .quote::before, .quote::after { display: none; }
    .quote .q-th { color: #fff; font-size: clamp(22px, 2.8vw, 32px); max-width: 30ch; }
    .quote .q-en { text-transform: none; letter-spacing: 0; font-size: 15px; color: rgba(255, 255, 255, 0.7); margin-top: 10px; }
    .journey { background: var(--ink); }
    .journey::before { display: none; }
    .journey h2, .journey h1 { color: #fff; }
    .journey-lead { color: rgba(255, 255, 255, 0.78); }
    .journey .j-card .j-meta h3, .journey .j-card:hover .j-meta h3 { color: #fff; }
    .journey .j-card:hover .j-meta h3 { text-decoration: underline; text-underline-offset: 4px; }
    .journey .j-card:nth-of-type(1):hover .ph, .journey .j-card:nth-of-type(2):hover .ph,
    .journey .j-card:nth-of-type(3):hover .ph { border-color: transparent; }

    /* ---- curriculum: six areas as a ledger, three approaches as links ---- */
    .programs .prog-grid { gap: 0 40px; border: 0; }
    .programs .prog, .programs .prog:hover {
      border: 0; border-top: 1px solid var(--hairline); border-radius: 0;
      background: none; box-shadow: none; transform: none; padding: 22px 0 26px;
    }
    .programs .prog svg { display: none; }
    .programs .prog b {
      font-family: 'Mitr', 'IBM Plex Sans Thai', sans-serif; font-weight: 500; font-size: 19px;
      letter-spacing: 0; text-transform: none; line-height: 1.35; margin-bottom: 6px;
    }
    .approach .approach-card, .approach .approach-card:nth-of-type(1),
    .approach .approach-card:nth-of-type(2), .approach .approach-card:nth-of-type(3) {
      background: none; border: 0; border-top: 2px solid var(--ink); border-radius: 0;
      padding: 18px 0 0; box-shadow: none; transform: none;
    }
    .chips .chip:nth-child(6n+1), .chips .chip:nth-child(6n+2), .chips .chip:nth-child(6n+3),
    .chips .chip:nth-child(6n+4), .chips .chip:nth-child(6n+5), .chips .chip:nth-child(6n+6) {
      background: var(--turf-soft); color: var(--turf-deep); font-weight: 500; border-radius: 6px;
    }
    .langs .lang-stats { justify-content: flex-start; gap: 44px; margin-bottom: 40px; }
    .langs .lang-stat, .langs .lang-stat:nth-of-type(1), .langs .lang-stat:nth-of-type(2), .langs .lang-stat:nth-of-type(3) {
      border: 0; background: none; padding: 0; text-align: left; border-radius: 0; box-shadow: none;
    }
    .langs .lang-stat .pct, .langs .lang-stat:nth-of-type(1) .pct,
    .langs .lang-stat:nth-of-type(2) .pct, .langs .lang-stat:nth-of-type(3) .pct {
      font-size: 30px; font-weight: 500; color: var(--ink);
    }
    .langs .lang-stat .lang-name { font-size: 15px; font-weight: 400; margin-top: 4px; }
    .langs .lang-card, .langs .lang-card:nth-of-type(1), .langs .lang-card:nth-of-type(2), .langs .lang-card:nth-of-type(3) {
      background: none; border: 0; border-top: 2px solid var(--ink); border-radius: 0; padding: 18px 0 0; box-shadow: none;
    }
    .tt .sched-wrap { box-shadow: none; border: 1px solid var(--hairline); border-radius: 12px; }
    .tt .sched tr.hl td { background: var(--turf-soft); }

    /* ---- levels: the age line is a sentence, the bullets one colour ---- */
    .ld .ld-row .ld-age, .ld .ld-row:nth-of-type(1) .ld-age, .ld .ld-row:nth-of-type(2) .ld-age, .ld .ld-row:nth-of-type(3) .ld-age {
      text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 400; color: var(--sub);
    }
    .ld .ld-row .ld-list li::before, .ld .ld-row:nth-of-type(1) .ld-list li::before,
    .ld .ld-row:nth-of-type(2) .ld-list li::before, .ld .ld-row:nth-of-type(3) .ld-list li::before { background: var(--turf); }

    /* ---- steps: numbered because they are steps; the number is a number ---- */
    .safety .step .step-num, .safety .step:nth-of-type(1) .step-num, .safety .step:nth-of-type(2) .step-num, .safety .step:nth-of-type(3) .step-num,
    .adm .adm-step .n, .adm .adm-step:nth-of-type(1) .n, .adm .adm-step:nth-of-type(2) .n, .adm .adm-step:nth-of-type(3) .n,
    .adm .adm-step:nth-of-type(4) .n, .adm .adm-step:nth-of-type(5) .n, .adm .adm-step:nth-of-type(6) .n {
      width: auto; height: auto; border-radius: 0; background: none; box-shadow: none;
      display: block; font-family: 'Mitr', sans-serif; font-size: 22px; font-weight: 500;
      color: var(--turf); line-height: 1; margin-bottom: 10px; transform: none;
    }
    .adm .adm-step:hover .n { transform: none; }
    .adm .adm-grid .adm-step, .adm .adm-grid .adm-step:hover, .adm .adm-grid .adm-step:nth-of-type(1):hover,
    .adm .adm-grid .adm-step:nth-of-type(2):hover, .adm .adm-grid .adm-step:nth-of-type(3):hover,
    .adm .adm-grid .adm-step:nth-of-type(4):hover, .adm .adm-grid .adm-step:nth-of-type(5):hover, .adm .adm-grid .adm-step:nth-of-type(6):hover {
      background: none; border: 0; border-top: 1px solid var(--hairline); border-radius: 0;
      box-shadow: none; padding: 22px 0 26px; transform: none;
    }
    .adm .adm-grid { gap: 0 40px; }
    .safety .step { border-top: 1px solid var(--hairline); }
    .safety .step .step-num { width: 40px; flex-shrink: 0; }
    .adm-extra .adm-card { background: none; border: 0; border-top: 2px solid var(--ink); border-radius: 0; padding: 18px 0 0; box-shadow: none; }

    /* ---- care: facts as sentences, no icon chips ---- */
    .care-daily .care-fact, .care-daily .care-fact:nth-of-type(1), .care-daily .care-fact:nth-of-type(2),
    .care-daily .care-fact:nth-of-type(3), .care-daily .care-fact:nth-of-type(4) { border-top: 1px solid var(--hairline); border-bottom: 0; gap: 0; }
    .care-daily .care-fact svg { display: none; }
    .care-daily .care-fact b {
      font-family: 'Mitr', 'IBM Plex Sans Thai', sans-serif; font-weight: 500; font-size: 18px;
      letter-spacing: 0; text-transform: none; line-height: 1.35; margin-bottom: 6px;
    }
    .about .mission-grid li::before, .vision .mission-grid li::before { color: var(--turf); }

    /* ---- contact: on navy, cards become sections ---- */
    .contact .ct-card, .contact .ct-card:nth-of-type(1), .contact .ct-card:nth-of-type(2) {
      background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 0; box-shadow: none; padding: 28px 0 8px;
    }
    .contact .ct-card::before, .contact .ct-card:nth-of-type(1)::before, .contact .ct-card:nth-of-type(2)::before { display: none; }
    .contact .ct-card h3 {
      font-family: 'Mitr', 'IBM Plex Sans Thai', sans-serif; font-weight: 500; font-size: 19px;
      letter-spacing: 0; text-transform: none; margin-bottom: 18px;
    }
    .contact .ct-row svg { stroke: var(--sky); }
    .contact .map-ph { border-radius: 12px; border-color: rgba(255, 255, 255, 0.2); }

    /* ---- gallery: category names are headings, not pills ---- */
    .gal .gal-cat h3, .gal .gal-cat:nth-of-type(2) h3, .gal .gal-cat:nth-of-type(3) h3, .gal .gal-cat:nth-of-type(4) h3,
    .gal .gal-cat:nth-of-type(5) h3, .gal .gal-cat:nth-of-type(6) h3, .gal .gal-cat:nth-of-type(7) h3,
    .gal .gal-cat:nth-of-type(8) h3, .gal .gal-cat:nth-of-type(9) h3, .gal .gal-cat:nth-of-type(10) h3 {
      display: block; padding: 18px 0 0; border-radius: 0; background: none; border-top: 1px solid var(--hairline);
      font-size: 22px; font-weight: 500;
    }
    .gal .gal-cat h3::before, .gal .gal-cat:nth-of-type(1) h3::before, .gal .gal-cat:nth-of-type(2) h3::before,
    .gal .gal-cat:nth-of-type(3) h3::before, .gal .gal-cat:nth-of-type(4) h3::before, .gal .gal-cat:nth-of-type(5) h3::before,
    .gal .gal-cat:nth-of-type(6) h3::before, .gal .gal-cat:nth-of-type(7) h3::before, .gal .gal-cat:nth-of-type(8) h3::before,
    .gal .gal-cat:nth-of-type(9) h3::before, .gal .gal-cat:nth-of-type(10) h3::before { display: none; }

    /* ---- the closing invitation: a heading, a line, two actions ---- */
    .page-cta { background: var(--paper); border-top: 1px solid var(--hairline); text-align: left; padding: 64px 0 88px; }
    .page-cta .wrap { background: none; border-radius: 0; padding: 0 24px; max-width: 1080px; overflow: visible; }
    .page-cta .wrap::before, .page-cta .wrap::after { display: none; }
    .page-cta .btns { justify-content: flex-start; }

    /* ---- footer, everywhere ---- */
    footer { background: var(--ink); padding: 56px 24px 40px; }
    footer::before, footer .f-brand::after { display: none; }
    .deep .wrap { max-width: 1080px; }
    .deep p, .deep h2, .deep h3 { max-width: 68ch; }

    /* ---- fixes found on review ---- */
    /* .photo sets height:100%. A grid item's stretched height is definite, so
       the journey row is sized from content first (photo 439 + caption 142),
       then the image's 100% resolves against that row and takes the
       caption's space — which the section's overflow:hidden then clips. Only
       the K1/K2/K3 names survived. Let the 3/4 ratio size the image. */
    .journey .j-card img.photo { height: auto; }
    .journey { overflow: visible; }
    .journey .j-meta .age { color: rgba(255, 255, 255, 0.78); text-transform: none; letter-spacing: 0; font-size: 14.5px; }
    /* the shared lead rule is grey; on the navy contact section that is unreadable */
    .contact .contact-lead { color: rgba(255, 255, 255, 0.8); }
    .vision .mission-title { text-align: left; margin-top: 36px; }

    /* ============================================================
       the interactive layer  (pairs with /js/interactive.js)
       ============================================================
       Appended last so it wins at equal specificity. It adds no colour
       and no typeface: everything below is built from the calm pass's
       own tokens — paper, ink, sky, sun, turf. */

    /* ---- the hero carries the light of the hour being shown ----
       --t runs 0 at 7:15 to 1 at 17:00 (set on <body> by the day
       scrubber). The sun crosses from east to west with it, and the
       blue of early morning drains as it goes. The calm pass had
       switched these pseudo-elements off; this turns one back on with
       something to say. */
    body[data-page="home"] { --t: 0; }
    body[data-page="home"] .hero::before {
      content: ''; display: block;
      position: absolute; inset: 0; z-index: 0; pointer-events: none;
      width: auto; height: auto; border-radius: 0; filter: none; animation: none;
      background:
        radial-gradient(58% 42% at calc(9% + var(--t) * 82%) -6%,
          color-mix(in srgb, var(--sun) calc(18% + var(--t) * 26%), transparent) 0%,
          transparent 68%),
        linear-gradient(178deg,
          color-mix(in srgb, var(--sky) calc((1 - var(--t)) * 30%), transparent) 0%,
          transparent 52%);
      transition: background .5s ease;
    }
    body[data-page="home"] .hero::after { display: none; }
    body[data-page="home"] .hero > .wrap { position: relative; z-index: 1; }

    /* ---- the day: landmarks under the track ---- */
    .day-track { position: relative; }
    .day-ticks {
      position: absolute; left: 0; right: 0; top: 50%; height: 26px;
      margin-top: 5px; pointer-events: auto; cursor: pointer;   /* the row is the tap target */
    }
    .day-tick {
      position: absolute; top: 8px;
      left: calc(12px + var(--x) * (100% - 24px));
      width: 16px; height: 16px; margin: -8px 0 0 -8px; padding: 0;
      border: 0; background: none; pointer-events: none;
    }
    .day-tick::after {
      content: ''; display: block; margin: 6px auto 0;
      width: 4px; height: 4px; border-radius: 50%;
      background: color-mix(in srgb, var(--ink) 26%, transparent);
      transition: transform .2s ease, background .2s ease;
    }
    .day-tick:hover::after { transform: scale(1.7); background: var(--turf); }
    .day-tick.is-on::after { transform: scale(1.9); background: var(--sun-ink); }
    .day-tick:focus-visible { outline: 2px solid var(--turf); outline-offset: 1px; border-radius: 50%; }

    /* the real time of day, while the school is open */
    .day-nowdot {
      position: absolute; top: 14px;
      left: calc(12px + var(--x) * (100% - 24px));
      width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
      border-radius: 50%; background: var(--check);
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--check) 55%, transparent);
      animation: nowpulse 2.6s ease-out infinite;
    }
    @keyframes nowpulse {
      0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--check) 50%, transparent); }
      70%  { box-shadow: 0 0 0 9px rgba(184, 56, 59, 0); }
      100% { box-shadow: 0 0 0 0 rgba(184, 56, 59, 0); }
    }

    /* ---- the day: its two controls, sitting with the caption ---- */
    .day-control { grid-template-columns: 1fr auto; align-items: baseline; }
    .day-caption { grid-column: 1; }
    .day-acts { grid-column: 2; display: flex; gap: 6px; justify-self: end; }
    .day-track, .day-ends, .day-note { grid-column: 1 / -1; }
    .day-act {
      font: inherit; font-size: 13.5px; line-height: 1;
      padding: 7px 13px; border-radius: 999px; cursor: pointer;
      color: var(--sub); background: transparent;
      border: 1px solid var(--hairline);
      transition: color .18s ease, border-color .18s ease, background .18s ease;
    }
    .day-act:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
    .day-act:focus-visible { outline: 2px solid var(--turf); outline-offset: 2px; }
    .day-act-now.is-live { color: var(--check); border-color: color-mix(in srgb, var(--check) 40%, transparent); }
    .day-act-now.is-live:hover { color: #fff; background: var(--check); border-color: var(--check); }
    .day-note {
      font-size: 13px; color: var(--sub); min-height: 0; height: 0;
      opacity: 0; overflow: hidden; transition: opacity .25s ease, height .25s ease;
    }
    .day-note.show { opacity: 1; height: 1.5em; }
    @media (max-width: 560px) {
      .day-control { grid-template-columns: 1fr; }
      .day-acts { grid-column: 1; justify-self: start; }
    }

    /* ---- lightbox: a viewer you can walk through ---- */
    .lb-nav {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 52px; height: 52px; padding: 0; border-radius: 50%;
      display: grid; place-items: center; cursor: pointer;
      border: 1px solid rgba(255, 255, 255, 0.28);
      background: rgba(20, 26, 38, 0.42);
      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
      transition: background .18s ease, border-color .18s ease;
    }
    .lb-nav svg { width: 22px; height: 22px; stroke: #fff; }
    .lb-nav:hover { background: rgba(20, 26, 38, 0.72); border-color: rgba(255, 255, 255, 0.5); }
    .lb-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
    .lb-prev { left: 18px; }
    .lb-next { right: 18px; }
    .lb img.is-turning { opacity: .45; }
    .lb img { transition: opacity .2s ease; }
    .lb-cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 14px; }
    .lb-cat { font-size: 13px; opacity: .66; }
    .lb-count { font-size: 13px; opacity: .66; font-variant-numeric: tabular-nums; }
    @media (max-width: 640px) {
      .lb-nav { width: 42px; height: 42px; }
      .lb-prev { left: 6px; } .lb-next { right: 6px; }
    }

    /* ---- the 10 keys: opening and closing, not snapping ---- */
    .key-card summary { cursor: pointer; }
    .key-card summary::-webkit-details-marker { display: none; }
    /* clipped so the height animation has something to reveal — which means
       nothing inside it may carry a negative top margin */
    .key-body { overflow: hidden; }
    .key-card .k-num { transition: transform .28s cubic-bezier(.22,.61,.36,1); }
    .key-card[open] .k-num { transform: scale(1.12); }

    /* ---- how far through a long page you are ---- */
    .read-bar {
      position: fixed; left: 0; top: 0; z-index: 60;
      width: 100%; height: 2px; transform: scaleX(0); transform-origin: 0 50%;
      background: var(--turf); pointer-events: none;
    }

    @media (prefers-reduced-motion: reduce) {
      body[data-page="home"] .hero::before { transition: none; }
      .day-nowdot { animation: none; }
      .day-tick::after, .day-act, .lb-nav, .lb img, .key-card .k-num { transition: none; }
    }

    /* ============================================================
       the nav row, made to fit its own measure
       ============================================================
       The header is capped at 1080px so the brand lines up with the text
       below it. The link row outgrew that when VIDEO made it eight items:
       measured, the full row needs 1170px in Thai, 1164 in Japanese and
       1260 in English, so above the old 1200px breakpoint it overflowed at
       every width and the LINE button was clipped in half. Raising the
       breakpoint could not fix it — nothing above 1200 is wide enough.

       Three things give it the room, in the order they were tried:

       The duplicate LINE button leaves the desktop row. The dark topbar
       carries "LINE @promkun" as the first line of every page, forty
       pixels above it, and the CTA still appears in the mobile menu, in
       the page bodies and in the closing band. A second copy in between
       was the least load-bearing thing in the row.

       The gap closes from 22px to 14px, and the tracking from 0.14em to
       0.08em — tracked-out capitals were the kit's tell anyway, and the
       row reads better slightly tighter.

       Measured after the change, the space between the brand and the first
       link is 142px in Thai, 71 in Japanese and 32 in English. English is
       the one to watch: thirty-two pixels is two or three characters, so a
       ninth nav item or a longer label will need this looked at again. The
       figure does not vary with viewport width — the header is capped at
       1080 either way — so it cannot regress on a wider screen. */
    @media (min-width: 1201px) {
      .nav .nav-line-btn { display: none; }
      .nav-links { gap: 14px; }
      .nav-links a { letter-spacing: 0.08em; }
    }

    /* ---- the school crest ---- */
    /* Header: the crest sits on the baseline-aligned wordmark, so the row is
       re-centred on it. Footer: the crest's interior is paper-white, so on
       navy it gets a white disc rather than a ragged transparent edge. */
    .brand { align-items: center; gap: 12px; }
    .brand-mark { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
    @media (max-width: 640px) { .brand-mark { width: 36px; height: 36px; } }
    footer .f-mark { display: block; width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px; background: #fff; }

    /* Lighthouse on /curriculum: the project-based-learning kicker was set in
       the sun yellow on cream — 2.1:1. Labels are one colour on every page. */
    .split .kicker.pbl-k { color: var(--sub); }
    .nf { padding: 96px 0 120px; min-height: 52vh; }
    .nf h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 14px; }
    .nf-lead { color: var(--sub); max-width: 46ch; margin-bottom: 28px; font-size: 17px; }
    .nf-btns { display: flex; gap: 12px; flex-wrap: wrap; }

    /* Keyboard users land on the content, not on eleven links of nav first. */
    .skip-link { position: absolute; left: 16px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: 8px;
      background: var(--turf); color: #fff; font-weight: 600; text-decoration: none; transition: top .15s ease; }
    .skip-link:focus { top: 12px; outline: 3px solid var(--sky-deep); outline-offset: 2px; }

    /* contact: the map is a map now, not a picture of one */
    .map-frame { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.08); }
    .map-embed { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.9); }
    .map-link { display: inline-block; margin-top: 12px; color: #fff; font-size: 15px; text-underline-offset: 4px; }

    /* ============================================================
       graphic pass — the crest's world as the site's language
       ============================================================
       The school's crest is a storybook: a rayed sun, two hearts, trees, two
       children in red-gingham uniforms on green grass under a blue sky. The
       calm pass gave the pages good bones and not much warmth. This layer
       borrows exactly those elements — and nothing generic — so the site
       looks like the crest's world rather than like any other school's. */
    :root {
      --gingham: linear-gradient(90deg, rgba(184,56,59,.22) 50%, transparent 50%) 0 0 / 14px 14px,
                 linear-gradient(rgba(184,56,59,.22) 50%, transparent 50%) 0 0 / 14px 14px, #fff;
      --sun-field: #fdf1d6; --sky-field: #e9f3fa; --grass-field: #e6f2ec;
    }

    /* ---- the sun, drawn as the crest draws it: a disc with rays ---- */
    .sun-mark { position: absolute; pointer-events: none; z-index: 0; border-radius: 50%; }
    body[data-page="home"] .hero { position: relative; overflow: hidden;
      background: linear-gradient(180deg, var(--sky-field) 0%, var(--paper) 62%); }
    body[data-page="home"] .hero::before {
      content: ''; position: absolute; left: auto; bottom: auto; right: -170px; top: -190px; width: 620px; height: 620px; border-radius: 50%;
      border: 0; filter: none; transform: none; opacity: .95;
      background:
        radial-gradient(circle, var(--sun) 0 31%, transparent 32.5%),
        repeating-conic-gradient(from 0deg, rgba(242,185,80,.42) 0 7deg, transparent 7deg 20deg);
      -webkit-mask: radial-gradient(circle, #000 0 49%, transparent 50%); mask: radial-gradient(circle, #000 0 49%, transparent 50%);
      pointer-events: none; z-index: 0; display: block;
    }
    body[data-page="home"] .hero::after { display: none; }
    body[data-page="home"] .hero .wrap { position: relative; z-index: 1; }

    /* ---- fields between sections: sky, sun, grass — never unbroken paper ---- */
    .glance, .langs, .tt, .care-daily { background: var(--sky-field); border-top: 0; }
    .keys, .adm-extra, .vision, .approach { background: var(--sun-field); border-top: 0; }
    .mosaic, .ld, .explore { background: var(--paper); }
    .page-cta { background: var(--grass-field); border-top: 0; position: relative; overflow: hidden; }
    .page-cta::after { content: ''; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%;
      background: radial-gradient(circle, rgba(242,185,80,.55) 0 31%, transparent 32.5%),
        repeating-conic-gradient(from 0deg, rgba(242,185,80,.35) 0 7deg, transparent 7deg 20deg);
      -webkit-mask: radial-gradient(circle, #000 0 49%, transparent 50%); mask: radial-gradient(circle, #000 0 49%, transparent 50%); pointer-events: none; }
    .page-cta .wrap { position: relative; z-index: 1; }

    /* ---- a gingham ribbon where a section starts ---- */
    .glance, .keys, .adm-extra, .vision, .langs, .care-daily, .approach, .tt { position: relative; }
    .glance::before, .keys::before, .adm-extra::before, .vision::before, .langs::before, .care-daily::before, .approach::before, .tt::before {
      content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--gingham);
      opacity: .9;
    }

    /* ---- numbered markers: gingham-red discs, the way the crest's kids are dressed ---- */
    body[data-page="home"] .key-card .k-num,
    .safety .step .step-num, .safety .step:nth-of-type(1) .step-num, .safety .step:nth-of-type(2) .step-num, .safety .step:nth-of-type(3) .step-num,
    .adm .adm-step .n, .adm .adm-step:nth-of-type(1) .n, .adm .adm-step:nth-of-type(2) .n, .adm .adm-step:nth-of-type(3) .n,
    .adm .adm-step:nth-of-type(4) .n, .adm .adm-step:nth-of-type(5) .n, .adm .adm-step:nth-of-type(6) .n {
      width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
      background: var(--check); color: #fff; font-size: 17px; font-family: 'Mitr', sans-serif; font-weight: 500; text-align: center;
      box-shadow: 0 3px 0 rgba(122,30,32,.35);
    }
    body[data-page="home"] .key-card summary { grid-template-columns: 44px 1fr; align-items: center; }

    /* ---- the fact and curriculum icons come back, in soft sun discs ---- */
    body[data-page="home"] .fact svg, .care-daily .care-fact svg, .programs .prog svg {
      display: block; width: 48px; height: 48px; padding: 11px; border-radius: 50%;
      background: var(--sun-field); stroke: var(--turf-deep); stroke-width: 1.8; margin-bottom: 14px;
    }
    body[data-page="home"] .fact:nth-of-type(1) svg, body[data-page="home"] .fact:nth-of-type(2) svg,
    body[data-page="home"] .fact:nth-of-type(3) svg, body[data-page="home"] .fact:nth-of-type(4) svg,
    .care-daily .care-fact:nth-of-type(1) svg, .care-daily .care-fact:nth-of-type(2) svg,
    .care-daily .care-fact:nth-of-type(3) svg, .care-daily .care-fact:nth-of-type(4) svg { background: var(--sun-field); }
    .care-daily .care-fact { gap: 18px; align-items: flex-start; }
    .care-daily .care-fact svg { flex-shrink: 0; margin-top: 2px; }

    /* ---- the explore tiles get an icon each, in the crest's line style ---- */
    body[data-page="home"] .explore-card { border-top: 0; padding: 22px 22px 24px; border-radius: 18px; background: var(--sky-field); }
    body[data-page="home"] .explore-card:nth-child(2) { background: var(--sun-field); }
    body[data-page="home"] .explore-card:nth-child(3) { background: var(--grass-field); }
    body[data-page="home"] .explore-card:nth-child(4) { background: #fbe9e9; }
    body[data-page="home"] .explore-card::before { content: ''; display: block; width: 34px; height: 34px; margin-bottom: 14px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d5b' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1'/%3E%3C/svg%3E") center / contain no-repeat; }
    /* one icon each, in the crest's line style: children, a book, a heart, a home */
    body[data-page="home"] .explore-card:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d5b' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='8' cy='7' r='3'/%3E%3Ccircle cx='16.5' cy='8' r='2.5'/%3E%3Cpath d='M2.5 20c0-3.3 2.5-5.5 5.5-5.5s5.5 2.2 5.5 5.5'/%3E%3Cpath d='M13 19c.3-2.6 1.8-4.2 3.5-4.2 1.8 0 3.3 1.7 3.5 4.2'/%3E%3C/svg%3E"); }
    body[data-page="home"] .explore-card:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e7d5b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.5C3 4.7 3.7 4 4.5 4H10c1.1 0 2 .9 2 2v14c0-1.1-.9-2-2-2H4.5c-.8 0-1.5-.7-1.5-1.5v-11z'/%3E%3Cpath d='M21 5.5c0-.8-.7-1.5-1.5-1.5H14c-1.1 0-2 .9-2 2v14c0-1.1.9-2 2-2h5.5c.8 0 1.5-.7 1.5-1.5v-11z'/%3E%3C/svg%3E"); }
    body[data-page="home"] .explore-card:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b8383b'%3E%3Cpath d='M12 21s-7.5-4.6-9.5-9.1C1.1 8.6 3.2 5 6.8 5c2 0 3.5 1.1 5.2 3 1.7-1.9 3.2-3 5.2-3 3.6 0 5.7 3.6 4.3 6.9C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E"); }
    body[data-page="home"] .explore-card:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8383b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5L12 4l9 7.5'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E"); }
    body[data-page="home"] .explore-card:hover { transform: translateY(-3px); transition: transform .2s ease; }

    /* ---- hearts, from the crest, as the mission's bullets ---- */
    .vision .mission-grid li::before { content: ''; width: 14px; height: 14px; top: 9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b8383b'%3E%3Cpath d='M12 21s-7.5-4.6-9.5-9.1C1.1 8.6 3.2 5 6.8 5c2 0 3.5 1.1 5.2 3 1.7-1.9 3.2-3 5.2-3 3.6 0 5.7 3.6 4.3 6.9C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat; }

    /* ---- the mosaic of real days ---- */
    .mosaic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; }
    @media (max-width: 860px) { .mosaic-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
    .mosaic-tile { display: block; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--sky-field);
      box-shadow: 0 10px 28px rgba(34,48,74,.12); transform: rotate(0); transition: transform .25s ease; }
    .mosaic-tile:nth-child(2) { transform: rotate(1.2deg); } .mosaic-tile:nth-child(4) { transform: rotate(-1.4deg); } .mosaic-tile:nth-child(6) { transform: rotate(1deg); }
    .mosaic-tile:hover { transform: rotate(0) scale(1.02); }
    .mosaic-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .mosaic-more { margin-top: 26px; }

    /* ---- photographs: a white sticker edge and a slight tilt, like the crest's kids ---- */
    body[data-page="home"] .side-photo, .about-grid .side-photo, .split-grid .side-photo, .band-photo,
    .j-card img.photo, .j-card:nth-of-type(1) img.photo, .j-card:nth-of-type(3) img.photo {
      border: 8px solid #fff; border-radius: 18px; box-shadow: 0 18px 44px rgba(34,48,74,.16);
    }
    /* the three level photos lean like the crest's children; hover straightens the one you look at */
    .journey .j-card:nth-of-type(1) img.photo { transform: rotate(-1.2deg); }
    .journey .j-card:nth-of-type(3) img.photo { transform: rotate(1.2deg); }
    .journey .j-card:hover img.photo { transform: none; }
    body[data-page="home"] .welcome-grid .side-photo { transform: rotate(-1.5deg); }
    .about-grid .side-photo, .split-grid .side-photo { transform: rotate(1.2deg); }

    /* ---- the day frame gets the sun's warmth ---- */
    .day-frame { box-shadow: 0 24px 60px rgba(34,48,74,.18), 0 0 0 8px #fff; }

    /* ---- footer: the scalloped edge, and the crest sitting on it ---- */
    footer { position: relative; background: var(--ink); padding-top: 72px; }
    footer::before { content: ''; display: block; position: absolute; top: -22px; left: 0; right: 0; height: 23px; background: var(--ink);
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 23'%3E%3Cpath d='M0 23a24 24 0 0 1 48 0z'/%3E%3C/svg%3E") 0 0 / 48px 23px repeat-x;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 23'%3E%3Cpath d='M0 23a24 24 0 0 1 48 0z'/%3E%3C/svg%3E") 0 0 / 48px 23px repeat-x; }
    body[data-page="home"] footer::before { display: block; }
    footer .f-mark { width: 72px; height: 72px; box-shadow: 0 0 0 6px rgba(255,255,255,.12); }

    /* ---- buttons: a touch of the sun on hover ---- */
    .btn-navy:hover, .nav-line-btn:hover { background: var(--turf-deep); box-shadow: 0 6px 18px rgba(46,125,91,.28); }

    @media (prefers-reduced-motion: reduce) { .mosaic-tile, .explore-card { transition: none; } }

    /* phones stack the hero, so the sun would sit under the headline; tuck it
       into the top-right corner instead, mostly off-canvas, disc above the eyebrow */
    @media (max-width: 860px) {
      body[data-page="home"] .hero::before { width: 320px; height: 320px; right: -130px; top: -200px; opacity: .9; }
    }

    /* the calm pass flattened the home page to one ground (higher specificity);
       the crest's fields and ribbons win here */
    body[data-page="home"] .glance { background: var(--sky-field); border-top: 0; border-bottom: 0; padding: 56px 0; }
    body[data-page="home"] .keys { background: var(--sun-field); }
    body[data-page="home"] .glance::before, body[data-page="home"] .keys::before { display: block; }

    /* ================= the page answers back =================
       Promkun already had a lightbox, a scrubbable school day, an accordion
       and a progress bar. What it did not have was any sense that the page
       notices you: the reveal system was built and then switched off, and the
       crest's sun sat still.

       The colour does not move. This school is the daylight one and q-kid is
       the night one — that is the whole difference between two sites for two
       schools with one owner, and a switch on this page would have thrown it
       away. A dark palette was built here and taken back out on purpose. */

    /* ---- the reveals were built, then turned off ----
       Two later rules — one for the home page, one for everything — held
       .reveal at opacity 1 with no transition, so the observer in site.js has
       been tagging elements and adding .in to no effect. The class is added by
       script, never by the markup, so a browser with no JavaScript still shows
       a complete page; there is nothing to fail open. Waking it up is deleting
       the override, which is what this is. */
    .reveal { opacity: 0; transform: translateY(20px); transition: opacity .66s cubic-bezier(.22,.61,.36,1), transform .66s cubic-bezier(.22,.61,.36,1); transition-delay: var(--d, 0ms); }
    .reveal.in { opacity: 1; transform: none; }

    /* ---- the crest's sun is a light source, not a sticker ----
       It drifts as the page moves and leans a few pixels towards the pointer.
       Transform only: the sun is a pseudo-element, so script sets a property on
       the section and the pseudo reads it. */
    body[data-page="home"] .hero::before {
      transform: translate3d(var(--sun-x, 0px), var(--sun-y, 0px), 0);
      will-change: transform;
    }
    .page-cta::after { transform: translate3d(0, var(--cta-sun-y, 0px), 0); }

    /* ---- things that answer when you touch them ---- */
    .nav-links a:not(.btn) { position: relative; }
    .nav-links a:not(.btn)::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
      background: var(--turf); transform: scaleX(0); transform-origin: 100% 50%;
      transition: transform .28s cubic-bezier(.22,.61,.36,1);
    }
    .nav-links a:not(.btn):hover::after { transform: scaleX(1); transform-origin: 0 50%; }
    .btn { transition: background .2s ease, color .2s ease, transform .16s ease, box-shadow .2s ease; }
    .btn:hover { transform: translateY(-1px); }
    .btn:active { transform: translateY(0); }
    .ct-card, .adm-card, .lang-card, .approach-card, .explore-card, .prog, .j-card {
      transition: transform .26s cubic-bezier(.22,.61,.36,1), box-shadow .26s ease, background-color .26s ease;
    }
    .fact svg, .care-fact svg, .prog svg { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
    .fact:hover svg, .care-fact:hover svg, .prog:hover svg { transform: scale(1.09) rotate(-5deg); }
    .gal-cat, .gallery-strip img { transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; }
    .gallery-strip img:hover { transform: scale(1.03); }

    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
      .btn:hover, .fact:hover svg, .care-fact:hover svg, .prog:hover svg,
      .gallery-strip img:hover { transform: none; }
      body[data-page="home"] .hero::before, .page-cta::after { transform: none; }
    }

    /* ================= Thai-safe leading, this time measured =================
       An earlier layer set the headings at 1.2 under a comment that called it
       "Thai-safe leading". The intent was right and the number was a guess.

       Measured in the browser, across every base × above-vowel × tone, Mitr's
       Thai ink runs 1.12em above the baseline (ก็่) and 0.31em below it (กู่) at
       400, 500 and 600 alike — so two lines of Thai touch at anything under
       1.40. The home headline was set at 1.18 and its five lines were crossing
       into each other by eight pixels; the ten-keys heading by three.

       1.46 leaves air. The hero's cap comes down from 56px to 50px so the
       extra leading does not simply make the hero taller. Do not tighten these
       without measuring again. */
    :root { --thai-leading: 1.46; }
    h1, h2, h3 { line-height: var(--thai-leading); }
    body[data-page="home"] h2 { line-height: var(--thai-leading); }
    body[data-page="home"] .hero h1 {
      font-size: clamp(36px, 4.4vw, 50px);
      line-height: var(--thai-leading);
    }

    /* The section-heading scale carries its own leading at a specificity the
       base rule cannot reach, and it is the same guessed 1.25. Same list, same
       measurement. */
    .glance h2, .programs h2, .keys h2, .explore h2, .journey h2, .langs h2,
    .approach h2, .adm h2, .care-daily h2, .ld h2, .vision h2, .gal-head h2,
    .contact h2, .welcome h2, .about-body h2, .teachers h2,
    .safety h2, .tt h2, .adm-extra h2, .page-cta h2 { line-height: var(--thai-leading); }

    /* Putting LINE back in the row means it has to hold brand, LINE and burger
       on a phone, and at 390 it did not — the burger ended four pixels past the
       edge. The gaps go first, then the padding, and the school's name last: it
       keeps every letter, a size down, rather than being cut or abbreviated.
       (The row has never fitted at 320 even without the button — the brand
       alone is 250 wide.) Each step measured, not guessed. */
    @media (max-width: 560px) {
      .nav { gap: 10px; padding-left: 14px; padding-right: 14px; }
    }
    @media (max-width: 420px) {
      .brand-th { font-size: 16px; }
      .brand { gap: 9px; }
      .brand-mark { width: 38px; height: 38px; }
    }
    @media (max-width: 340px) {
      .nav { gap: 6px; padding-left: 10px; padding-right: 10px; }
      .brand-th { font-size: 15px; }
      .brand { gap: 7px; }
      .brand-mark { width: 32px; height: 32px; }
      .nav .nav-line-btn { padding: 9px 10px; }
    }

    /* ---- where the day hands over to the night ----
       Promkun takes three to six and q-kid takes eighteen months to six, and
       the two sites are one idea in two halves: this one is the daylight, that
       one is the bedtime. The link carries a small moon, so the handover is
       visible before you click it — and the same strip on q-kid's footer
       carries a sun pointing back. */
    .f-sister {
      display: inline-flex; align-items: center; gap: 14px;
      margin: 0 auto 22px; padding: 12px 24px 12px 18px;
      border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
      text-decoration: none; color: inherit; text-align: left;
      transition: transform .28s cubic-bezier(.22,.61,.36,1), border-color .28s ease, background-color .28s ease;
    }
    .f-sister:hover { transform: translateY(-2px); border-color: rgba(245, 233, 176, .5); background: rgba(255, 255, 255, .04); }
    .f-sister-orb {
      width: 26px; height: 26px; border-radius: 50%; flex: none;
      background: radial-gradient(circle at 36% 31%, #FFFCF2 0%, #F7EBCB 44%, #E9D5A6 70%, #DCC894 100%);
      box-shadow: 0 0 16px 3px rgba(247, 235, 203, .32);
      transition: box-shadow .28s ease;
    }
    .f-sister:hover .f-sister-orb { box-shadow: 0 0 22px 6px rgba(247, 235, 203, .45); }
    .f-sister-text { display: block; line-height: 1.45; }
    /* .6 measured 4.59:1 once the sunset is over it — passing, with nothing
       to spare at 11px */
    .f-sister-label { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .74; }
    .f-sister-name { display: block; font-size: 15px; font-weight: 500; }
    .f-sister-note { display: block; font-size: 12.5px; opacity: .65; }
    @media (max-width: 480px) { .f-sister { padding: 12px 18px 12px 14px; gap: 11px; } .f-sister-name { font-size: 14px; } }

    /* LINE is how a Thai parent gets in touch, and on a phone it was the one
       thing hidden: the top bar carrying the LINE id is display:none below 640
       and this button was too, leaving the school's main channel two taps
       behind a hamburger. It comes back — and below 400px, where the row is
       genuinely full, it keeps the mark and drops the words. */
    @media (max-width: 640px) {
      .nav .nav-line-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; font-size: 11px; letter-spacing: .08em; }
    }
    /* Wherever the burger exists the row is tight, so the button drops its
       words there and keeps the name — "สอบถามทาง LINE" costs 129px and "LINE"
       costs 50. At 430 the long label was still showing and the burger went
       four pixels over; this is where that breakpoint belongs. */
    @media (max-width: 560px) {
      .nav .nav-line-btn { font-size: 0; padding: 9px 12px; gap: 0; }
      .nav .nav-line-btn::before { content: 'LINE'; font-size: 11px; letter-spacing: .06em; }
    }

    /* ================= the sun goes down at the seam =================
       The footer is where this site hands over to q-kid, so the footer is
       where the day ends. As you scroll into it the sky above the scallop
       goes through sunset — orange, then rose, then violet — and the ground
       under it deepens from this site's navy to q-kid's night blue, which is
       the exact colour you land on when you follow the link. By the time the
       moon in that link is in front of you, the page is already evening.

       One element, painted by script so eleven pages in three languages did
       not have to learn about it, driven by a single property the scroll
       reader sets from how far the footer has risen. Opacity and nothing else:
       no layout, no paint beyond the one layer. */
    .f-dusk {
      position: absolute; inset: 0; z-index: 0; pointer-events: none;
      opacity: var(--dusk, 0);
      background: linear-gradient(180deg,
        rgba(255, 146, 74, .52) 0%,
        rgba(206, 86, 118, .42) 26%,
        rgba(86, 66, 138, .34) 52%,
        rgba(12, 22, 48, .88) 100%);
    }
    /* The scallop is the horizon, so the sunset has to reach above it — and
       with the *same* mask as footer::before, not a hand-rolled one. A guess at
       the shape left the bumps navy against an orange sky, a row of teeth
       instead of a skyline. */
    .f-dusk::before {
      content: ''; position: absolute; left: 0; right: 0; top: -22px; height: 23px;
      background: linear-gradient(180deg, rgba(255, 158, 88, .42), rgba(255, 146, 74, .52));
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 23'%3E%3Cpath d='M0 23a24 24 0 0 1 48 0z'/%3E%3C/svg%3E") 0 0 / 48px 23px repeat-x;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 23'%3E%3Cpath d='M0 23a24 24 0 0 1 48 0z'/%3E%3C/svg%3E") 0 0 / 48px 23px repeat-x;
    }
    footer > *:not(.f-dusk) { position: relative; z-index: 1; }
    /* the moon in the link catches the light as the light leaves */
    .f-sister-orb { box-shadow: 0 0 calc(10px + var(--dusk, 0) * 14px) calc(2px + var(--dusk, 0) * 4px) rgba(247, 235, 203, calc(.18 + var(--dusk, 0) * .3)); }

    @media (prefers-reduced-motion: reduce) {
      /* the evening still happens, it just does not follow the scroll */
      .f-dusk { opacity: .82; }
    }

    /* ---- the crossing, as a thing you can press ----
       The sunset used to be a reward for scrolling all the way down. This makes
       it something you choose: a filled button in q-kid's own night blue, with
       q-kid's moon on it, sitting in the dusk it starts. Pressing it runs the
       sun the rest of the way down across the whole screen and then lands you
       there, so the two sites read as one move rather than two tabs. */
    .f-sister {
      background: linear-gradient(135deg, #0C1630 0%, #16264F 100%);
      border-color: rgba(245, 233, 176, .34);
      padding: 14px 52px 14px 20px;
      box-shadow: 0 10px 26px rgba(6, 12, 26, .34);
    }
    .f-sister:hover {
      border-color: rgba(245, 233, 176, .8);
      background: linear-gradient(135deg, #0F1B3A 0%, #1B2E5E 100%);
      box-shadow: 0 14px 32px rgba(6, 12, 26, .44);
    }
    .f-sister:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
    /* a chevron rather than another span in thirty-three files */
    .f-sister::after {
      content: '→'; position: absolute; right: 20px; top: 50%;
      transform: translateY(-50%); font-size: 17px; color: rgba(245, 233, 176, .75);
      transition: transform .28s cubic-bezier(.22,.61,.36,1);
    }
    .f-sister:hover::after { transform: translateY(-50%) translateX(4px); }
    .f-sister { position: relative; }
    .f-sister-label { color: rgba(245, 233, 176, .9); opacity: 1; }
    .f-sister-name, .f-sister-note { color: #F5F0E4; }
    .f-sister-note { opacity: .7; }

    /* ---- and the crossing itself ----
       A full-screen sunset that finishes the move the footer started, ending on
       q-kid's night blue so the new page arrives on the colour the overlay was
       already showing. Built on click, removed if you come back to the page.
       Under prefers-reduced-motion the link is just a link. */
    .crossing {
      position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0;
      background: linear-gradient(180deg,
        rgba(255, 146, 74, .96) 0%,
        rgba(206, 86, 118, .97) 26%,
        rgba(86, 66, 138, .98) 52%,
        #0C1630 100%);
    }
    .crossing-orb {
      position: absolute; left: 50%; width: 92px; height: 92px; border-radius: 50%;
      margin-left: -46px; top: 58%;
      background: radial-gradient(circle at 36% 31%, #FFFCF2 0%, #F7EBCB 44%, #E9D5A6 70%, #DCC894 100%);
      box-shadow: 0 0 46px 14px rgba(247, 235, 203, .5);
    }

    /* ---- arriving from q-kid ----
       The mirror. q-kid's button ends its dawn on this site's cream and then
       navigates; this page opens already inside that dawn, with the sun where
       q-kid left it, and the morning clears to reveal the day underneath.

       Painted from <head>, before the first paint. All CSS: the head snippet
       sets one attribute and the animation does the rest, so a script that
       never runs cannot leave a reader staring at a veil, and pointer-events
       is none so even a stuck one cannot block anything. */
    html[data-arriving]::before {
      content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
      background: linear-gradient(0deg,
        rgba(255, 244, 224, .98) 0%,
        rgba(250, 200, 140, .97) 28%,
        rgba(206, 126, 134, .96) 54%,
        #FFFCF7 100%);
      animation: arrive 940ms 140ms cubic-bezier(.4,0,.2,1) forwards;
    }
    html[data-arriving]::after {
      content: ''; position: fixed; left: 50%; top: 42%; z-index: 9999; pointer-events: none;
      width: 92px; height: 92px; margin-left: -46px; border-radius: 50%;
      background: radial-gradient(circle at 38% 34%, #FFF6DC 0%, #FBDB93 44%, #F3C766 70%, #E9B647 100%);
      box-shadow: 0 0 46px 14px rgba(243, 199, 102, .55);
      animation: arriveOrb 940ms 140ms cubic-bezier(.22,.61,.36,1) forwards;
    }
    @keyframes arrive { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
    @keyframes arriveOrb {
      from { opacity: 1; transform: none; }
      to   { opacity: 0; transform: translateY(-46px) scale(1.1); visibility: hidden; }
    }
    @media (prefers-reduced-motion: reduce) {
      html[data-arriving]::before, html[data-arriving]::after { display: none; }
    }