/* =========================================================
   THE TWO FACES, SELF-HOSTED
   Google Fonts was a render-blocking third-party stylesheet on every page: the
   browser had to resolve a second origin and fetch a CSS file before it even
   learned which font files it needed. These are the same faces, latin subset,
   subset again to the characters this site uses, served from our own origin.
   Ten faces, about 183 KB, and nothing off-site to wait for.
   ========================================================= */
/* Six characters, 2.2 KB: 生き甲斐 for Ikigai and 改善 for Kaizen. Noto Serif JP,
   subset down to exactly those glyphs. Nothing else of Japanese is loaded. */
@font-face{font-family:'Noto Serif JP';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/noto-serif-jp-kanji-500-normal.woff2) format('woff2');unicode-range:U+304D,U+5584,U+6539,U+6590,U+751F,U+7532}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Mukta';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/mukta-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Mukta';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/mukta-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Mukta';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/mukta-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Mukta';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/mukta-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Mukta';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/mukta-latin-700-normal.woff2) format('woff2')}

/* =========================================================
   Small Wonders - sw.css
   Shared by every page: tokens, nav, footer, reviews, the landing
   (a window into Infinia), the photo stage and the school-page parts.
   Mobile first: base rules are the phone; min-width queries add the rest.
   ========================================================= */

@property --cx{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --cy{syntax:'<percentage>';inherits:false;initial-value:60%}
@property --rx{syntax:'<percentage>';inherits:false;initial-value:10%}
@property --ry{syntax:'<percentage>';inherits:false;initial-value:30%}

:root{
  /* the branches photo's alpha channel (320px) minus the shield and its ribbon: the spotlight dims the children, never the page around the photo or the logo */
  --photo-alpha:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAACvCAQAAAAm/M/CAAAK7ElEQVR42u2de3BVxR3HvwnYkhgeSXgnyPtRKGhRgkglVEjlYcUWedgWpkUc0BaxjFOpMNoZGcVOrdbRUGkdGCy11qJjS2CIRRilQMBCnaEIaDuIooQaHoEkWpHtHwmYy03OPedmn2e/n/2LcO/ZPfv73HPO7p7dBQghhBBCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQgghhBBCCCGEkABasQqsox3m4jSqWBHx4jo8jPZOlDQH1RDYhDnowrDFgULcgwoICOQ6UuI3ICAg8F+swg0MoMuMwWqcbAhnFfIcKfWuhhLXp3/gbl4L3SMLsy5eSerTEVzuSNkrEsotIHAcT2Iog+oKHXEvDiUFcYcz5U8WsD69iGIG13a64+f4sMnw7XJeQAGBckxgkG2lK5bheLOhq3DmPHYGCCgg8BoltI9cLMGxwLDtdOZc3kwhoIDAJt6ObWI+DqcM2ZvOnE15CAEFBF5gw8QGbgp1xRAod+aMSkMKKFCHx9GZCpjjK/hz6GCVOnNWK0Ofk4DAUcynCCbIwgM4GyFQK505s2ciCSgg8AZGUQi9lOCtiEF6JsYCCgg85shYdwKZjrZ4S1GOYRG/lRHzn+Qi7MJkCqieydiFO9P43rnY3xUGYD1WuHgddIds/Dqt25OAwB+dOcsVaZ+jgMABjKMoaijCP1sQGHf6AVe1SEABgWWURT4LWxgUd0ZCdrZYQIGt6EdlZDY7XmhxSNwZC66QIKDAx5hKceRwDd6WEBDfBBQQeITytJzZqJESDB8FFNiATlSoJSyXFgo/BRQ4hOHUKD1ysE5iICqd6SGTK6BANb5NmaJzxSWTc1qaTjozKUm2gAICCylUNIaHeMMvWjrhzLTMHQoEFHiMUoVnHE5JD4ArAubgiBIBBZ6jWOGYqqT6TzhyC85T8OO7kMqQTb1S8QNFlV+Fdk6cfy6qlAkosBUdqFgQ85RVfS36OiLgCYUCClSgIzVrjruUVv0oCggBgT32dE7b9T7gfDyt9Pjn+AsHAHwNm2y5Ctok4O1YoTiHDLp3UcEyO7rl7RHwNvzOYO7ZKEA3S2pCaMmlCK8gi7/EC0xQ/NRTn0Y0kXMbzMVGHEEdzmIffoPrjddFJ4XdMIlpPcWrZ2Sk6ZXpp9FJOY/G3ibmD7dVfO15GOXYh7fwPO5A16T/H6FJPwGBNZQP6JtiTRd5ae4lOd/czOd2KHs+6oWXklb++2mSoEJj+oXv+uXiX9oqe15CzpMDPrlDSaf1pGZ+ausThB+pVUCBH/ktYLnGqp7TKN/CFE9a8m9OJQG5bW/UILhas4DCvdnE8lihtaKXNsr5xZSfLpF6poUBKxcKCPw21JVZTTqFIX7q92PNFf3FIr1Xhvj0Nqnn+qfQwpdqF1DggI8jxMXaq7kGvSIF+WqJHb+pc/t7w2cPGhBQ4C++6detmZWcdTwFZuGo5hZiuEml39TcCZOYHvRLwM1GKnldpI4OWevqh+1afg7AA8YEFJjoj34PGari+s1qbg89tVtOZ8ytIfP7AMA2gwJWortuEcyMBY9PaI/qJA+jAQwM+el8FEjJdXjo0pVgsMHLQmes9kHAfKwyWMk3ARFWVZYzIhK2kyMLCwzPWynBffEXsBSFRtvewKehP31eSp7hr6PfMv5wtFxi299KAWdhutEKHohBOBH6059LyfMzp57Ptd6fWms+uQI8oTiHk7gX5yGaeatOoDVq8Z+Qx6rGe5preQ02o1WT2mcgA5n4pYZb9FAsx+K4tn5f1tCWm5myFJNCjw/I4aXQZR8beJyZ2trDI+Op3wxNI5upnrnyUR3qSLLahOE7nQYG3j1OaRNwbxz1y9M29vFsyrJsCHUcWUv63BKy3IfRJuAoz2rtE4zhTVjnmy+pJmBOCXGM9wJ1iPbTCzfRMmgnk1GaO6XPOjKLOjR6X7PcnbI8+1Ie4x6JZ78mVKmD5qPs1j4u8kq8BNyuufoWpexyDf7+fqmrqAwOUeLNAd9fZGRoblJ89JutvfJOp2yKLAv49vvS15hfm7LExQHNj9NGBNwfF/3aKltwLCitTVGqHngnYPO/KegjuRb2p72zx1oj+gkI3B0PAZcaqr7me9V64lcpu2Jq8ToewUQp7wr3wEIcCszt5WaHwMYafT8m3339uuGkoerbh5wmS3RXpOV/jmEd5l98lzoaHTAWS7ExZA/eGvRMOkJOiOaSyrTcfQEfN/j7TR64SnfLmxq8jsX4amjxirEEGyPPeD6NnyWVt9KogGfQw239ekna5SOdNC2pNOMDnvvCXlWXYwIub+Zs26MYS7ChRVPtyy652k4zKqDAU24LWGqs4jYmleV+acc+jNWY0WiJs/YYg/tRho+kHP0Ybk4o90ajAtaiN69/0VMdBl3S7HhVeh7HUYYuKEJZyElOUVLjTbYGoc6ogk+7K+ATxiptSUI5pku6NjX1+oCqNa23N3o1YQmfA9Ohq6EOVIGDCeO4KptB/XCbsmOfwIyGM2hjaLbwhfSomwI+aKzCJlwsw1DsUZpTf3xX6fFXNgwJTjAq4Mcu9ge2xQeGquuLMZA7Qr75Z6+AAnswFADwB6MKLnJPwDnGWm313bnttAxhqRdQoAYLABQYbYocck/A3YaqambDANYBLbnpEFBA4HnjPYK3qJBE3ay463GNEe1PIgdz8BC2hJ5+7gYzsR/5EebzyedOFQdVt3HBGsyCDwzAiJTv3cSFIfJf0FJ1BeyCKSBxY7Y7t+BbHdkYkER7DMhyRcDvM1oxpCfGuyHgMFzLaMWS77kh4DRGKqbcKHuTQzUCfoeRiikdZK+iqkLAIqOLLOomE628UnCq/QL61QFzBtVene9YuZtdqxDQr313itUMUVlLe9wg83DyR0KGYB8flWLN72WOccm/ApYwQrG/CWfbLOCNjFDMKZS5irRsAfPiurYmacQ4ewUsMrzNANHBN+wVsJjR8YCrIuy0olnArzM6HtBO3svGcgXs1DB9hsSd6+wUcJikra2I7Vxrp4AjGBlPGCrrhWMKSNKhs6wpX5mSfxfEF660T8De6M+4eMNV9gk4gFHx6inQOgGHMCoe0bfZVWKNCTiYUfGIAjnbjvMWTNKlj10CtsEVjIlX9LNLwM7owphQQHMCFkjb3JS4QW+7BCxkRLxrhlglYA9GxDM6y5gbIk/A7oyIZ+QhjwISc2TLmH4hT8COjIh3dLRJwHzGwzvybRKQK6L6+BRojYBt5QxNEwqYHlkU0EPa2iTglxgP78ixR8A2HIijgCYFvIzR8JAv2yNga0bDQy6zR8BWjIaHtKaAxCSZ9ghIiFEBz7MqPeScPQIKRsND/mePgJ8zGh5ylrdgYpJTFJCYpMoeAc8xGh7ykT0CfsZoeMiHNglYx3h4x/v2CPgpb8Ie3oCP2iTgJ4yIZ7yLGpsE5C3YN/bKOIgsAetQy4h4xjYZB2l6v+CJmIe+EeXsw3eiPePf+ASZEQZhz+MgSvFaagEX4EnWLlHED7E6WMB+eIe1RJRRiwGNW8+ZTdx+CVFHNsYHN0LyWEdEKbnBAvLNPqIWESwgIRqhgIQCEgpICAUkFJAQCkgoICEUkFBAQjQLmMFKIUrJCBbwDGsoAmdRzUqIXGeBAv6NNRSBMrzKSojI1sb/SF5YshKtMYa1FIpKTEcFZnOHgAjch78GCwhsQRX6G956qxZbUI1uVt9IyjEb76IS2zHI6t2Sa1CGn+AcehmftfM2FuOpxD/9H85Y0hIBz8WRAAAAAElFTkSuQmCC");
  --rose:#B86D6B;
  --rose-deep:#9A4E4C;
  --rose-ink:#8A4341;
  /* school colours: bright for grounds and shapes, ink for text and buttons */
  --kg:#8EC3E6;--kg-ink:#2C6A96;--kg-sky:#E8F3FB;
  --ikigai:#E98A3C;--ikigai-ink:#B05619;
  --kaizen:#BE5652;--kaizen-ink:#9C3636;
  --gold:#B4874D;
  --gold-deep:#8D6937;
  /* gold is too light for small text: these two reach AA on the two grounds it sits on */
  --gold-text:#8C693C;      /* small gold text on the parchment */
  --gold-on-white:#946F3F;  /* small gold text on a white card */
  --navy:#16294A;
  --cream:#F1E9D8;
  /* the same parchment and navy as Infinia, so the landing and every section below share one ground */
  --paper:#F8F3E7;
  --paper-rgb:248,243,231;
  --ink:#16294A;
  --muted:#5D6677;
  --ribbon:#706E6D;
  --line:rgba(22,41,74,.12);
  --jp:'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif;--serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Mukta',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --nav-h:76px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:17px;line-height:1.8;color:var(--ink);background:var(--paper);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--rose);color:#fff}
:focus-visible{outline:2px solid var(--rose-deep);outline-offset:3px;border-radius:6px}

/* the 10px letterspaced micro-label, shared with Infinia */
.micro{font-family:var(--sans);font-size:10.5px;font-weight:600;line-height:1.3;letter-spacing:.26em;text-transform:uppercase}

.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.lost{padding:calc(var(--nav-h) + 3rem) 1.2rem 3rem;max-width:1180px;margin:0 auto}
.lost-in{max-width:40rem;margin:0 auto 2.6rem;text-align:center}
.lost .cp-title{justify-items:center}
.lost .cp-lede{margin-left:auto;margin-right:auto}
.lost .cp-actions{justify-content:center}
@media(min-width:769px){.lost{padding:calc(var(--nav-h) + 5rem) 2rem 4rem}}
.skip{position:absolute;left:1rem;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:.5rem 1rem;border-radius:8px;text-decoration:none;font-size:.9rem}
.skip:focus{top:1rem}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.35rem;border-radius:999px;font-size:.92rem;font-weight:500;line-height:1;text-decoration:none;border:0;cursor:pointer;transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.btn-rose{background:var(--rose-deep);color:#fff}
.btn-navy{background:var(--navy);color:var(--paper)}
@media(hover:hover){.btn-rose:hover{background:var(--rose-ink);transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(138,67,65,.7)}.btn-navy:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(22,41,74,.6)}}

/* ================= NAV ================= */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:0 clamp(1rem,3vw,3rem);transition:background .45s var(--ease),box-shadow .45s var(--ease),height .45s var(--ease)}
.nav.scrolled{--nav-h:64px;background:rgba(251,248,243,.88);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line)}

.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);flex:none}
.shield{width:34px;height:39px;flex:none;overflow:visible}
.sh-fill-l{fill:var(--rose)}
.sh-fill-r{fill:#EAE6DD}
.sh-line{fill:none;stroke:var(--ribbon);stroke-width:1.7;stroke-linejoin:round}
.sh-txt{font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:-.5px}
.sh-txt-l{fill:#FBF8F3}
.sh-txt-r{fill:#4A4644}
.brand-text{display:flex;flex-direction:column}
.brand-name{font-family:var(--serif);font-weight:600;font-size:1.5rem;line-height:1;letter-spacing:.005em}
.brand-sub{margin-top:.32rem;font-size:9.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);line-height:1}

.nav-links{display:flex;align-items:center;gap:clamp(1.2rem,2.2vw,2.2rem)}
.nav-links a{position:relative;font-size:.95rem;text-decoration:none;color:var(--ink);padding:.35rem 0;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:.1rem;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
@media(hover:hover){.nav-links a:hover::after{transform:scaleX(1)}}
.nav-links .nav-infinia{color:var(--gold-deep)}
.nav-right{display:flex;align-items:center;gap:.8rem;flex:none}

.menu-btn{display:none;align-items:center;gap:.55rem;background:none;border:1px solid rgba(43,39,37,.18);border-radius:999px;padding:.5rem .95rem .5rem .8rem;cursor:pointer;font-size:.85rem;line-height:1}
.menu-lines{display:grid;gap:5px;width:16px}
.menu-lines i{display:block;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .4s var(--ease)}
.menu-btn[aria-expanded="true"] .menu-lines i:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-lines i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:55;background:var(--paper);padding:calc(var(--nav-h) + 1.6rem) 1.5rem 2rem;display:flex;flex-direction:column;gap:1.8rem;overflow-y:auto}
.menu-links{display:flex;flex-direction:column}
.menu-links a{display:flex;flex-direction:column;text-decoration:none;padding:.6rem 0;border-bottom:1px solid var(--line)}
.menu-links a span{font-family:var(--serif);font-size:2.1rem;font-weight:500;line-height:1.15}
.menu-links a small{font-size:.8rem;color:var(--muted);letter-spacing:.02em}
.menu-links a[aria-current] span{font-style:italic}
.nav-links a[aria-current]::after{transform:scaleX(1)}
.menu-infinia{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1.2rem;border-radius:16px;background:linear-gradient(135deg,#C9A064,#A87E43);color:var(--navy);text-decoration:none}
.mi-title{font-family:var(--serif);font-size:1.6rem;font-weight:600;line-height:1.1}
.menu[hidden]{display:none}
body.menu-open{overflow:hidden}

@media(max-width:1020px){
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
}
@media(max-width:560px){
  :root{--nav-h:64px}
  .nav-cta{display:none}
  .brand-name{font-size:1.32rem}
  .shield{width:30px;height:35px}
}

/* shield draws itself once, on load */
@keyframes shieldLine{from{stroke-dashoffset:140}to{stroke-dashoffset:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sh-line{stroke-dasharray:140;animation:shieldLine 1.1s var(--ease) .05s both}
.sh-fill-l,.sh-fill-r,.sh-txt{animation:fadeIn .7s ease .75s both}

/* ================= SHARED SECTION TYPE (the Infinia rhythm) ================= */
.eyebrow{display:inline-flex;align-items:center;gap:.8rem;font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;font-weight:600;color:#876830}
.eyebrow::before{content:'';width:44px;height:1px;background:#A9823C}
.eyebrow-c::after{content:'';width:44px;height:1px;background:#A9823C}
.eyebrow-light{color:#C9A25C}.eyebrow-light::before{background:#C9A25C}
.sec-title{font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,8.6vw,3.6rem);line-height:1.1;letter-spacing:-.01em;margin-top:1.1rem;color:var(--ink);text-wrap:balance}
.sec-title em{font-style:italic;color:#A9823C}
.sec-sub{max-width:38rem;margin-top:1.2rem;color:#4A5468;font-size:1rem;font-weight:400;line-height:1.75}
/* reveals: only hidden when JS is running, so the page still reads without it */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.19,1,.22,1),transform 1s cubic-bezier(.19,1,.22,1)}
.js .reveal.in{opacity:1;transform:none}
@media(min-width:901px){.sec-title{font-size:clamp(2.4rem,4vw,3.6rem);line-height:1.06}.sec-sub{font-size:1.05rem}}

/* ================= OUR KINDERGARTENS (home) =================
   Same parchment as the landing: the section begins where the landing's
   film fades out, with nothing but type to mark the change. */
.kgs{position:relative;padding:3.2rem 1.2rem 4.5rem;background:var(--paper)}
.kgs-head{max-width:46rem;margin:0 auto;text-align:center}
.kgs-head .sec-sub{margin-left:auto;margin-right:auto}
.kgs .stage{margin-top:2.2rem}

/* ---------- the photo stage ---------- */
.stage{position:relative;width:min(780px,94vw,calc((100svh - 350px) * 1.832));min-width:min(560px,100%);margin:1.1rem auto 0}
.photo{position:relative;aspect-ratio:1600/873;width:100%}
.photo img{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}

.spot{position:absolute;left:0;top:0;width:100%;height:86%;pointer-events:none;opacity:0;
  background:rgba(251,248,243,.4);
  -webkit-backdrop-filter:grayscale(1) sepia(.16);backdrop-filter:grayscale(1) sepia(.16);
  -webkit-mask-image:radial-gradient(ellipse var(--rx) var(--ry) at var(--cx) var(--cy),transparent 0,transparent 58%,rgba(0,0,0,.8) 86%,#000 100%),var(--photo-alpha);
          mask-image:radial-gradient(ellipse var(--rx) var(--ry) at var(--cx) var(--cy),transparent 0,transparent 58%,rgba(0,0,0,.8) 86%,#000 100%),var(--photo-alpha);
  -webkit-mask-size:100% 100%,100% calc(100% / .86);mask-size:100% 100%,100% calc(100% / .86);
  -webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect;
  transition:opacity .6s var(--ease),--cx .8s var(--ease),--cy .8s var(--ease),--rx .8s var(--ease),--ry .8s var(--ease)}
.stage.has-active .spot{opacity:1}

.tag-ring{position:absolute;pointer-events:none;border-radius:10px;opacity:0;
  box-shadow:0 0 0 2.5px var(--paper),0 0 0 4.5px var(--c,var(--rose)),0 14px 30px -10px var(--c,var(--rose));
  transition:left .8s var(--ease),top .8s var(--ease),width .8s var(--ease),height .8s var(--ease),opacity .5s var(--ease),box-shadow .6s var(--ease)}
.stage.has-active .tag-ring{opacity:1}

.leader{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible;opacity:0;transition:opacity .35s var(--ease)}
.stage.has-active .leader{opacity:1}
.stage.has-active .leader.fade{opacity:0;transition-duration:.18s}
.leader path{fill:none;stroke:var(--c,var(--rose));stroke-width:1.4;stroke-linecap:round}
.leader circle{fill:var(--c,var(--rose));stroke:#fff;stroke-width:1.5}
.hs{position:absolute;display:block;background:none;border:0;padding:0;cursor:pointer;border-radius:40px;-webkit-tap-highlight-color:transparent}
.hs:focus-visible{outline:2px dashed rgba(43,39,37,.35);outline-offset:-4px}
.hs-tag{border-radius:10px}


/* the card: sits in the photo's empty upper corner on the child's side, joined by a drawn line */
.who{position:absolute;z-index:3;left:1%;top:0;width:clamp(212px,31.5%,250px);
  background:#fff;border-radius:16px;box-shadow:0 22px 48px -18px rgba(43,39,37,.35),0 2px 6px rgba(43,39,37,.06);
  text-align:left;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.who[data-side="r"]{left:auto;right:1%}
.who.moving{opacity:0!important;transition-duration:.28s}
/* margin mode: wide screens, the card sits in the page margin beside the photo at the child's head height */
.stage[data-mode="margin"] .who{left:auto;right:calc(100% + 24px);top:var(--wy,35%);width:240px;transform:translateY(-50%)}
.stage[data-mode="margin"] .who[data-side="r"]{right:auto;left:calc(100% + 24px)}
.who-hint{display:flex;align-items:center;gap:.45rem;margin-top:.7rem;padding-top:.6rem;border-top:1px dashed var(--line);font-size:.74rem;color:var(--muted);line-height:1;transition:opacity .4s var(--ease)}
.hint-dot{width:6px;height:6px;border-radius:50%;background:var(--c,var(--rose));animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(184,109,107,.5)}100%{box-shadow:0 0 0 7px rgba(184,109,107,0)}}
.stage.touched .who-hint{display:none}
.who::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:16px 16px 0 0;background:var(--c,var(--rose));transition:background .6s var(--ease)}
.stage.has-active .who{opacity:1;pointer-events:auto}
.who-in{padding:.95rem 1.1rem 1rem;transition:opacity .25s ease,transform .25s ease}
.who-in.swap{opacity:0;transform:translateY(4px)}
.who-kicker{color:var(--c,var(--rose-ink));font-size:9.5px;letter-spacing:.22em}
.who-name{font-family:var(--serif);font-weight:600;font-size:1.38rem;line-height:1.1;margin-top:.3rem;color:var(--ink)}
.who-line{font-size:.86rem;line-height:1.5;color:var(--muted);margin-top:.3rem}
.who-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:.6rem;font-size:.86rem;font-weight:600;text-decoration:none;color:var(--c,var(--rose-ink))}
.who-arrow{display:inline-block;transition:transform .35s var(--ease)}
@media(hover:hover){.who-link:hover .who-arrow{transform:translate(2px,2px)}.who-link[target]:hover .who-arrow{transform:translate(2px,-2px)}}
.who-dots{display:none}

@media(max-width:760px){.stage{width:auto;min-width:0;margin-left:-1.2rem;margin-right:-1.2rem}}
/* flow mode: phones and narrow tablets, the card sits under the photo */
.stage[data-mode="flow"] .leader{display:none}
.stage[data-mode="flow"] .who,.stage[data-mode="flow"] .who[data-side="r"]{position:relative;left:auto;right:auto;top:auto;width:auto;margin:.55rem clamp(1rem,4vw,3rem) 0;opacity:1;pointer-events:auto;display:flex;align-items:stretch;border-radius:16px;overflow:hidden}
.stage[data-mode="flow"] .who.moving{opacity:1!important}
.stage[data-mode="flow"] .who::before{left:0;top:0;bottom:0;right:auto;width:4px;height:auto;border-radius:16px 0 0 16px}
.stage[data-mode="flow"] .who-in{flex:1;padding:.85rem 1rem .85rem 1.2rem}
.stage[data-mode="flow"] .who-name{font-size:1.3rem}
.stage[data-mode="flow"] .who-line{font-size:.85rem}
.stage[data-mode="flow"] .who-link{margin-top:.4rem}
.stage[data-mode="flow"] .who-dots{display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:0 .9rem}
.stage[data-mode="flow"] .who-dots button{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:var(--dot);opacity:.28;cursor:pointer;transition:opacity .3s,transform .3s;position:relative}
.stage[data-mode="flow"] .who-dots button::before{content:"";position:absolute;inset:-9px}
.stage[data-mode="flow"] .who-dots button[aria-pressed="true"]{opacity:1;transform:scale(1.25)}
.who-dots [data-school="ikigai"]{--dot:var(--ikigai)}
.who-dots [data-school="infinia"]{--dot:var(--gold)}
.who-dots [data-school="kindergarten"]{--dot:var(--kg)}
.who-dots [data-school="kaizen"]{--dot:var(--kaizen)}


@media(min-width:761px){.stage[data-mode="flow"] .who{margin:.8rem auto 0;max-width:560px}}

/* ---------- the three ideas ---------- */
.concepts{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;max-width:1180px;margin:2.8rem auto 0}
/* the three kindergartens: one band each, in the school's colour, with the school's child from the family photo */
.concepts{display:grid;gap:.75rem}
.toc-head{display:flex;justify-content:space-between;gap:1rem;padding:0 .2rem .4rem;font-size:.58rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
@media(min-width:769px){.toc-head{padding:0 .4rem .6rem;font-size:.62rem;letter-spacing:.3em}}
.toc-row{position:relative;display:block;min-height:232px;padding:1.3rem 1.25rem 1.35rem;border-radius:22px;overflow:hidden;isolation:isolate;text-decoration:none;color:var(--t);
  background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 55%),var(--s);
  box-shadow:0 22px 44px -32px rgba(22,41,74,.6);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
/* the soft disc behind each child, as in the family photo */
.toc-row::after{content:'';position:absolute;z-index:-1;right:-38px;bottom:-70px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.2);transition:transform .9s var(--ease)}
.toc-art{position:absolute;right:-12px;bottom:-26%;height:120%;z-index:0;pointer-events:none;transition:transform .8s var(--ease)}
.toc-art img{display:block;height:100%;width:auto;filter:drop-shadow(0 8px 18px rgba(22,41,74,.18))}
.toc-copy{position:relative;z-index:1;display:grid;justify-items:start;max-width:60%}
.toc-top{display:flex;align-items:baseline;gap:.5rem;font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.92}
.toc-n{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.05rem;letter-spacing:0;text-transform:none}
.toc-since{display:none}
.toc-mask{display:block;overflow:hidden;margin-top:.9rem;padding-bottom:.3em;margin-bottom:-.3em}
.toc-copy b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,9.6vw,6.8rem);line-height:.95;letter-spacing:-.02em;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.toc-copy i{margin-top:.35rem;font-family:var(--serif);font-size:1.12rem;opacity:.88}
.toc-cta{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.1rem;padding:.55rem .95rem .55rem 1.05rem;border-radius:999px;background:var(--t);color:var(--s);font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.toc-cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.js .toc-row.reveal{opacity:0;transform:translateY(24px)}
.js .toc-row.reveal.in{opacity:1;transform:none}
.js .toc-row .toc-copy b{transform:translateY(145%)}
.js .toc-row.in .toc-copy b{transform:none}
.toc-row:nth-of-type(2){transition-delay:.06s}.toc-row:nth-of-type(3){transition-delay:.12s}
@media(min-width:769px){
  .concepts{gap:1rem}
  .toc-row{min-height:300px;padding:2.2rem 2.6rem 2.3rem}
  .toc-row::after{right:6%;bottom:-120px;width:380px;height:380px}
  .toc-art{right:7%;height:122%;bottom:-27%}
  .toc-copy{max-width:62%}
  .toc-top{font-size:.64rem;letter-spacing:.26em}
  .toc-since{display:inline;white-space:pre;margin-left:-.45rem}
  .toc-mask{margin-top:1.3rem}
  .toc-copy b{font-size:clamp(4rem,7.4vw,7rem)}
  .toc-copy i{font-size:1.35rem}
  .toc-cta{margin-top:1.4rem}
}
@media(hover:hover){
  .toc-row:hover{transform:translateY(-4px);box-shadow:0 34px 60px -34px rgba(22,41,74,.7)}
  .toc-row:hover .toc-art{transform:translateY(-8px) scale(1.03)}
  .toc-row:hover::after{transform:scale(1.08)}
  .toc-row:hover .toc-cta svg{transform:translateX(4px)}
}
.toc-row:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
@keyframes halo{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.6);opacity:0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(min-width:901px){.kgs{padding:3.6rem 3rem 4.4rem}}


/* ---------- shared pill buttons (Infinia's), tinted by the page's school colour ---------- */
.sw-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.85rem 1.6rem;border-radius:999px;text-decoration:none;
  font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;line-height:1.8;overflow:hidden;border:0;cursor:pointer;transition:.4s var(--ease)}
.sw-btn-solid{background:var(--ci,var(--navy));color:#fff}
.sw-btn-solid::before{content:'';position:absolute;inset:0;background:var(--navy);transform:translateY(101%);transition:transform .45s cubic-bezier(.77,0,.18,1)}
.sw-btn-solid span{position:relative;z-index:1}
.sw-btn-ghost{box-shadow:inset 0 0 0 1px rgba(22,41,74,.3);color:var(--navy);background:transparent}
@media(hover:hover){.sw-btn-solid:hover::before{transform:translateY(0)}.sw-btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--ci,#A9823C);color:var(--ci,#A9823C);transform:translateY(-2px)}}
@media(min-width:769px){.sw-btn{padding:1rem 2.1rem;font-size:.66rem}}
.concepts-2{max-width:none}

/* ================= REVIEWS (Infinia's review wall) ================= */
.reviews{padding:2.6rem 0 2.8rem;background:var(--paper)}
.reviews-head{max-width:calc(1180px + 6rem);margin:0 auto 1.6rem;padding:0 1.2rem}
@media(hover:none){.rw-hover{display:none}.rw-tap{display:inline}}
@media(min-width:769px){
}
@media(min-width:901px){.reviews{padding:3.4rem 0 3.8rem}.reviews-head{padding:0 3rem;margin-bottom:2rem}.rw-note{font-size:.62rem}}
@media(prefers-reduced-motion:reduce){.toc-row,.toc-art,.toc-row::after{transition:none}.js .toc-row .toc-copy b{transform:none;transition:none}}

/* ================= FOOTER / VISIT =================
   The one dark band, as on Infinia. A long soft gradient above it keeps the
   hand-off from parchment gentle. */
.foot{position:relative;background:var(--navy);color:var(--paper);padding:0 1.2rem 1.6rem}
.foot-in{padding-top:3.4rem}
.foot::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:90px;background:linear-gradient(180deg,rgba(var(--paper-rgb),0),rgba(22,41,74,.06));pointer-events:none}
.foot-in{max-width:1180px;margin:0 auto;display:grid;gap:2.4rem}
.foot-title{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,8vw,3.2rem);line-height:1.08;margin-top:1rem;text-wrap:balance}
.foot-title em{font-style:italic;color:#C9A25C}
.foot-sub{margin-top:1rem;max-width:34rem;color:rgba(248,243,231,.7);font-weight:300;line-height:1.75}
.foot-schools{display:grid;gap:1.4rem}
.fs{padding-top:1rem;border-top:1px solid rgba(248,243,231,.14);position:relative}
.fs::before{content:'';position:absolute;left:0;top:-1px;width:36px;height:2px;background:var(--c)}
.fs-k{color:rgba(248,243,231,.55);font-size:9.6px}
.fs h3{font-family:var(--serif);font-weight:500;font-size:1.45rem;line-height:1.15;margin-top:.35rem}
.fs h3 a{text-decoration:none}
.fs-tel{display:inline-block;margin-top:.5rem;font-size:1.05rem;text-decoration:none;color:#E8D3A5;font-variant-numeric:tabular-nums}
.fs-links{display:flex;gap:1.2rem;margin-top:.3rem;font-size:.85rem}
.fs-links a{color:rgba(248,243,231,.7);text-decoration:none;border-bottom:1px solid rgba(248,243,231,.25)}
@media(hover:hover){.fs-links a:hover,.fs h3 a:hover{color:#fff}}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;padding-top:1.4rem;border-top:1px solid rgba(248,243,231,.1);font-size:.78rem;color:rgba(248,243,231,.45)}
.foot :focus-visible{outline-color:#C9A25C}

/* ---------- footer: a gold band to Infinia, first thing in the footer ---------- */
.fband{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1.1rem 1rem;margin:0 -1.2rem;padding:1.8rem 1.2rem 1.9rem;overflow:hidden;isolation:isolate;
  background:linear-gradient(115deg,#D4B26F 0%,#C9A25C 45%,#B8904B 100%);color:var(--navy);text-decoration:none}
/* a slow sheen, like light across gold leaf */
.fband::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-100%);animation:fbSheen 7s ease-in-out 2s infinite}
@keyframes fbSheen{0%,70%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.fband-seal{display:grid;place-items:center}
.fband-seal img{width:58px;height:auto;filter:drop-shadow(0 6px 12px rgba(22,41,74,.3))}
.fband-copy{display:grid;gap:.2rem}
.fband-k{font-size:.58rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:rgba(22,41,74,.72)}
.fband-t{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,7.6vw,2.6rem);line-height:1}
.fband-t em{font-style:italic}
.fband-s{grid-column:1/-1;font-size:.95rem;line-height:1.5;color:rgba(22,41,74,.84)}
.fband-btn{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:.55rem;padding:1rem 1.4rem;border-radius:999px;background:var(--navy);color:#F8F3E7;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;box-shadow:0 14px 28px -16px rgba(22,41,74,.8);transition:transform .4s var(--ease)}
.fband-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
@media(hover:hover){.fband:hover .fband-btn{transform:translateY(-2px)}.fband:hover .fband-btn svg{transform:translate(2px,-2px)}}
.fband:focus-visible{outline:2px solid var(--navy);outline-offset:-4px}
@media(min-width:700px){
  .fband{grid-template-columns:auto 1fr auto;column-gap:1.6rem}
  .fband-copy{grid-column:2}.fband-s{grid-column:auto}
  .fband-btn{grid-column:3;grid-row:1}
  .fband-seal img{width:66px}
}
@media(min-width:901px){.fband{margin:0 -3rem;padding:2rem max(3rem,calc(50vw - 590px))}}
@media(prefers-reduced-motion:reduce){.fband::before{animation:none}}
@media(min-width:769px){.foot-schools{grid-template-columns:repeat(3,1fr);gap:1.6rem}}
@media(min-width:901px){.foot{padding:0 3rem 2rem}.foot-in{padding-top:4.5rem}.foot-in{grid-template-columns:1.1fr 1fr;column-gap:4rem;row-gap:3rem;align-items:end}.foot-schools{grid-column:1/-1}.foot-base{grid-column:1/-1}}

/* ================= CHAPTERS (shared) =================
   Authored mobile first: the base rules are the phone layout,
   min-width queries add the tablet and desktop layouts. */
.chapter{position:relative;isolation:isolate;overflow:hidden;padding:4.2rem 1rem 0}
.chapter-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "visual" "meta";row-gap:2.4rem;max-width:1160px;margin:0 auto;align-items:start}
.ch-copy{grid-area:copy}
.ch-visual{grid-area:visual;position:relative;padding-top:.4rem}
.ch-meta{grid-area:meta}
.ch-kicker{color:var(--ci)}
.ch-title{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,11vw,4.4rem);line-height:1;letter-spacing:-.015em;margin-top:.9rem;color:var(--ink);text-wrap:balance}
.ch-title em{font-style:italic;color:var(--ci)}
.pencil-u{position:relative;display:inline-block;white-space:nowrap}
.pencil-u svg{position:absolute;left:-3%;bottom:-.14em;width:106%;height:.3em;overflow:visible}
.pencil-u path{fill:none;stroke:var(--c);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pencil-u path+path{stroke-width:1.4;opacity:.55}
.ch-lede{font-size:1.1rem;line-height:1.75;margin-top:1.3rem;max-width:34rem}
.ch-body{margin-top:.9rem;max-width:34rem;color:var(--muted)}

.facts{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.4rem;padding:1.2rem 0;border-block:1px solid rgba(43,39,37,.12)}
.facts dt{color:var(--muted);font-size:9.8px}
.facts dd{font-size:1.02rem;font-weight:500;margin-top:.15rem;line-height:1.4}
.facts .tel{text-decoration:none;color:var(--ci);border-bottom:1px solid currentColor}
.facts .tbd{font-weight:400;font-style:italic;color:var(--muted);text-decoration:underline dashed rgba(43,39,37,.3);text-underline-offset:4px}
.ch-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.ch-actions .btn{flex:1 1 calc(50% - .3rem);justify-content:center}
.ch-actions .btn-school{flex-basis:100%}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn-school{background:var(--ci);color:#fff}
.btn-line{background:rgba(255,255,255,.72);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(43,39,37,.16)}
@media(hover:hover){
  .btn-school:hover{transform:translateY(-1px);box-shadow:0 12px 24px -12px var(--ci)}
  .btn-line:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--ci);color:var(--ci)}
}

/* the arch window: the school's own child, cropped from the branches photo with CSS (the file is untouched) */
.arch{position:relative;width:min(230px,62%);margin:0 auto;aspect-ratio:174/290}
.arch-photo{position:absolute;inset:0;border-radius:999px 999px 14px 14px;background-color:var(--cream);background-image:url(images/branches-photo.webp);background-repeat:no-repeat;box-shadow:0 0 0 7px #fff,0 30px 60px -28px rgba(30,60,90,.45)}
.arch-line{position:absolute;inset:-15px -15px -9px;width:calc(100% + 30px);height:calc(100% + 24px);overflow:visible;pointer-events:none}
.arch-line path{fill:none;stroke:var(--ci);stroke-width:1.3;vector-effect:non-scaling-stroke;opacity:.7}
.arch-line path+path{stroke:var(--c);stroke-width:1;opacity:.9}
.kg .arch-photo{background-size:574.71% auto;background-position:60.9% 68.86%}

.honours{text-align:center;margin-top:2rem}
.honours ul{display:flex;justify-content:center;gap:1.1rem;list-style:none}
.honours li{display:flex;flex-direction:column;align-items:center;gap:.25rem}
.honours svg{width:30px;height:29px;overflow:visible}
.honours path{fill:rgba(180,135,77,.16);stroke:var(--gold);stroke-width:1.3;stroke-linejoin:round}
.honours span{font-family:var(--serif);font-size:1.15rem;font-weight:500;line-height:1;color:var(--ink);font-variant-numeric:lining-nums}
.honours .micro{margin-top:.75rem;color:var(--muted);font-size:9.6px}

.ch-quote{position:relative;z-index:1;max-width:44rem;margin:3rem auto 0;text-align:center}
.ch-quote p{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.45rem,6vw,2.1rem);line-height:1.3;text-wrap:balance}
.ch-quote p::before{content:"\201C"}
.ch-quote p::after{content:"\201D"}
.ch-quote footer{margin-top:.8rem;font-size:.9rem;color:var(--muted)}

@media(min-width:561px){
  .ch-actions .btn,.ch-actions .btn-school{flex:none}
}
@media(min-width:901px){
  .chapter{padding:clamp(4.5rem,8vw,7rem) clamp(1rem,4vw,3rem) 0}
  .chapter-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"copy visual" "meta visual";column-gap:clamp(2.5rem,6vw,6rem);row-gap:1.6rem}
  .ch-visual{align-self:center;padding-top:0}
  .ch-title{font-size:clamp(2.6rem,5vw,4.4rem)}
  .ch-lede{font-size:1.14rem;margin-top:1.4rem}
  .facts{max-width:34rem;gap:1rem 1.6rem}
  .arch{width:min(300px,78%)}
  .ch-quote{margin-top:clamp(3rem,6vw,4.5rem)}
}

/* ================= A WINDOW INTO INFINIA =================
   A faithful copy of Infinia's homepage hero (infinia-website/index.html,
   HERO + HERO FILM blocks, and the .btn rules from its style.css), scoped
   under .iw and re-authored phone first. It is the site's landing section. Every value matches the Infinia
   cascade at the same width: base = Infinia at <=768px, then 769+ and 901+. */
.iw{--iw-navy:#16294A;--iw-gold:#A9823C;--iw-gold-a11y:#876830;--iw-parch:#F8F3E7;--iw-parch-rgb:248,243,231;
  position:relative;background:var(--paper);color:var(--iw-navy);padding:0}
.iw-frame{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;
  min-height:auto;padding:6.8rem 1.2rem 3rem;background:var(--iw-parch)}
.iw-inner{position:relative;width:100%;max-width:1500px;margin:0 auto}

.iw-film{position:absolute;inset:0;z-index:-2;overflow:hidden;line-height:0;background:var(--iw-parch) url(images/hero-poster-540.jpg) center/cover no-repeat}
.iw-film video{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.78) contrast(.97);opacity:0;transition:opacity 1.1s ease}
.iw-film.is-live video{opacity:1}
/* the extra bottom layer lets the film dissolve fully into parchment, so the next section has no seam */
.iw-frame::after{content:'';position:absolute;left:0;right:0;bottom:0;height:22%;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(var(--iw-parch-rgb),0),var(--iw-parch))}
.iw-veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(var(--iw-parch-rgb),.95) 0%,rgba(var(--iw-parch-rgb),.5) 26%,rgba(var(--iw-parch-rgb),.28) 68%,rgba(var(--iw-parch-rgb),.7) 100%),
    linear-gradient(105deg,rgba(var(--iw-parch-rgb),.97) 0%,rgba(var(--iw-parch-rgb),.9) 40%,rgba(var(--iw-parch-rgb),.72) 70%,rgba(var(--iw-parch-rgb),.55) 100%)}
.iw-inf{position:absolute;right:-18%;top:64%;transform:translateY(-50%);width:66vw;line-height:0;user-select:none;pointer-events:none;will-change:transform}
.iw-inf img{width:100%;height:auto;display:block;opacity:.2}

.iw-eyebrow{display:inline-flex;align-items:center;gap:.8rem;font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;font-weight:600;color:var(--iw-gold-a11y);margin-bottom:2.2rem}
.iw-eyebrow::before{content:'';width:44px;height:1px;background:var(--iw-gold)}
.iw-title{font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,9vw,3rem);line-height:1.14;letter-spacing:-.01em;max-width:18ch;padding-bottom:.06em;color:var(--iw-navy)}
.iw-title em{font-style:italic;color:var(--iw-gold);line-height:inherit}
.iw-title .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.16em;margin-bottom:-.16em}
.iw-title .w>span{display:inline-block;transform:translateY(110%);transition:transform 1s cubic-bezier(.19,1,.22,1)}
.iw.in .iw-title .w>span{transform:translateY(0)}
.iw-sub{margin-top:1.55rem;font-size:.96rem;font-weight:300;max-width:38ch;color:rgba(22,41,74,.72);line-height:1.75;
  opacity:0;transform:translateY(24px);transition:all 1s .7s cubic-bezier(.19,1,.22,1)}
.iw.in .iw-sub{opacity:1;transform:none}
.iw-actions{display:flex;gap:.7rem;margin-top:1.6rem;flex-wrap:wrap;opacity:0;transform:translateY(24px);transition:all 1s .9s cubic-bezier(.19,1,.22,1)}
.iw.in .iw-actions{opacity:1;transform:none}
.iw-btn{position:relative;display:inline-flex;align-items:center;gap:.7rem;padding:.85rem 1.6rem;border-radius:999px;text-decoration:none;
  font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;line-height:1.8;overflow:hidden;border:0;cursor:pointer;
  transition:.4s cubic-bezier(.19,1,.22,1)}
.iw-btn-solid{background:var(--iw-navy);color:var(--iw-parch)}
.iw-btn-solid::before{content:'';position:absolute;inset:0;background:var(--iw-gold);transform:translateY(101%);transition:transform .45s cubic-bezier(.77,0,.18,1)}
.iw-btn-solid span{position:relative;z-index:1}
.iw-btn-ghost{border:1px solid rgba(22,41,74,.35);color:var(--iw-navy);background:transparent}
@media(hover:hover){
  .iw-btn-solid:hover::before{transform:translateY(0)}
  .iw-btn-solid:hover{color:var(--iw-navy)}
  .iw-btn-ghost:hover{border-color:var(--iw-gold);color:var(--iw-gold);transform:translateY(-2px)}
}
.iw :focus-visible{outline-color:var(--iw-gold)}

/* Infinia's scroll cue, turned into the window's address: it names where the window looks */
.iw-rail{position:absolute;left:0;right:0;bottom:2.4rem;padding:0 1.4rem;pointer-events:none;display:none}
.iw-url{pointer-events:auto;width:100%;max-width:1500px;margin:0 auto;display:flex;align-items:center;gap:1rem;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(22,41,74,.72);text-decoration:none}
.iw-url .line{width:1px;height:52px;background:rgba(22,41,74,.25);position:relative;overflow:hidden}
.iw-url .line::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--iw-gold);animation:iwLine 2.2s cubic-bezier(.77,0,.18,1) infinite}
@keyframes iwLine{0%{top:-100%}50%{top:0}100%{top:100%}}
@media(hover:hover){.iw-url:hover{color:var(--iw-gold)}}

@media(max-width:380px){.iw-title{font-size:clamp(1.95rem,8.6vw,2.5rem)}}
@media(min-width:701px){.iw-film{background-image:url(images/hero-poster.jpg)}}
@media(min-width:769px){
  .iw-frame{min-height:100vh;min-height:100svh;padding:7rem 1.4rem 5rem}
  .iw-title{font-size:clamp(2.6rem,5.6vw,5.4rem)}
  .iw-sub{font-size:1.05rem}
  .iw-actions{gap:1.2rem;margin-top:2.8rem}
  .iw-btn{padding:1rem 2.2rem;font-size:.68rem}
  .iw-rail{display:block}
}
@media(min-width:901px){
  .iw-frame{padding:8rem 3rem 4rem}
  .iw-title{line-height:1.04}
  .iw-sub{margin-top:2.4rem}
  .iw-rail{padding:0 3rem}
  .iw-veil{background:
    linear-gradient(180deg,rgba(var(--iw-parch-rgb),.9) 0%,rgba(var(--iw-parch-rgb),.1) 20%,rgba(var(--iw-parch-rgb),.1) 74%,rgba(var(--iw-parch-rgb),.82) 100%),
    linear-gradient(100deg,rgba(var(--iw-parch-rgb),.985) 0%,rgba(var(--iw-parch-rgb),.955) 26%,rgba(var(--iw-parch-rgb),.85) 44%,rgba(var(--iw-parch-rgb),.6) 62%,rgba(var(--iw-parch-rgb),.26) 82%,rgba(var(--iw-parch-rgb),.16) 100%)}
  .iw-inf{right:-1%;top:50%;width:min(40vw,31rem)}
  .iw-inf img{opacity:.34}
}
@media(max-height:820px) and (min-width:901px){.iw-rail{display:none}}
@media(prefers-reduced-motion:reduce){.iw-title .w>span{transform:none}.iw-sub,.iw-actions{opacity:1;transform:none}}

/* ================= REDUCED MOTION ================= */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}


/* =========================================================
   CONCEPT PAGES (Kindergarten, Ikigai, Kaizen): shared parts.
   Each page sets --c (school colour), --ci (ink) and --glow on <body>.
   ========================================================= */
/* ---------- hero ---------- */
.cp-hero{position:relative;padding:calc(var(--nav-h) + 1.8rem) 1.2rem 2.4rem;background:
  radial-gradient(90% 60% at 80% 30%,var(--glow,rgba(142,195,230,.28)),transparent 70%),var(--paper)}
.cp-hero-in{max-width:1240px;margin:0 auto;display:grid;gap:1.6rem}
/* The round child portrait used to sit here. It was a stock-looking face doing
   no work the words were not already doing, so the standing details now carry
   themselves behind a short rule in the school's own colour. */
.cp-brand{display:flex;align-items:center;gap:.9rem}
.cp-where{display:grid;gap:.12rem;line-height:1.35;padding-left:.85rem;
  border-left:2px solid color-mix(in srgb,var(--ci) 45%,transparent)}
.cp-where b{font-size:.95rem;font-weight:500;color:var(--ink)}
.cp-where span{font-size:.8rem;color:var(--muted)}
.cp-title{display:grid;margin-top:1.6rem;font-family:var(--serif);font-weight:500;color:var(--ci)}
.cp-title small{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.36em;text-transform:uppercase;color:var(--ink);line-height:1;margin-bottom:.6rem}
.cp-title span{font-size:clamp(3.6rem,17vw,7rem);line-height:.9;letter-spacing:-.025em}
/* the word in its own script, under the name it was borrowed into */
.cp-title .cp-jp{display:grid;gap:.35rem;margin-top:.9rem}
.cp-title .cp-jp b{font-family:var(--jp);font-weight:500;font-size:clamp(1.5rem,5.5vw,2rem);
  line-height:1;letter-spacing:.08em;color:var(--ci)}
.cp-title .cp-jp small{font-family:var(--sans);font-size:.68rem;font-weight:500;letter-spacing:.12em;
  text-transform:none;color:var(--muted);line-height:1;margin:0}
.cp-lede{margin-top:1.4rem;font-size:1.12rem;line-height:1.7;max-width:31rem;color:var(--ink)}
.cp-lede em{font-family:var(--serif);font-size:1.14em;color:var(--ci)}
/* the first chapter of each page opens with the idea */
.cp-open-lede{margin-top:1.2rem;max-width:40rem;font-family:var(--serif);font-size:clamp(1.3rem,4.6vw,1.65rem);line-height:1.45;color:var(--ink)}
.cp-open-lede em{color:var(--ci)}
/* on a school's own page, its headings take the school's colour */
.page-kg .sec-title em,.page-ikigai .sec-title em,.page-kaizen .sec-title em{color:var(--ci)}
.page-kg .bridge .sec-title em,.page-ikigai .bridge .sec-title em,.page-kaizen .bridge .sec-title em{color:rgba(255,255,255,.78)}
.cp-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.cp-hero-art{position:relative}
.cp-hero-canvas{display:block;width:100%;aspect-ratio:4/3}
.cp-note{position:absolute;right:2%;top:0;font-family:var(--serif);font-style:italic;font-size:1rem;line-height:1.25;color:var(--ci);text-align:right;pointer-events:none}
.cp-note svg{display:block;width:48px;margin:.3rem 12% 0 auto;transform:scaleX(-1);overflow:visible}
.cp-note path{fill:none;stroke:var(--ci);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- the bridge to Infinia ---------- */
/* the bridge to Infinia: one band in the school's own deep colour */
.bridge{position:relative;padding:4rem 1.2rem;background:radial-gradient(90% 120% at 100% 0%,rgba(255,255,255,.12),rgba(255,255,255,0) 55%),var(--ci);color:#fff;overflow:hidden}
.bridge-in{max-width:1180px;margin:0 auto}
.bridge .eyebrow{color:rgba(255,255,255,.78)}.bridge .eyebrow::before{background:rgba(255,255,255,.55)}
.bridge .sec-title{color:#fff}.bridge .sec-title em{color:rgba(255,255,255,.78)}
.bridge .sec-sub{color:rgba(255,255,255,.86)}
.bridge-path{list-style:none;display:grid;gap:.6rem;margin:1.8rem 0}
.bridge-path li{position:relative;display:grid;gap:.15rem;padding:1.05rem 1.1rem 1.1rem 1.35rem;border-radius:14px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.bridge-path li::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:#fff}
.bridge-path li+li::before{background:#E3C88F}
.bridge-path .micro{color:rgba(255,255,255,.7);font-size:9.6px}
.bridge-path b{font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:1.15}
.bridge-path small{font-size:.88rem;color:rgba(255,255,255,.78)}
.bridge .sw-btn-ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
@media(hover:hover){.bridge .sw-btn-ghost:hover{color:var(--ci);background:#fff;box-shadow:none}}

/* ---------- practical ---------- */
.info{padding:3.4rem 1.2rem 3rem;background:linear-gradient(180deg,var(--paper),color-mix(in srgb,var(--c) 9%,var(--paper)) 30%,color-mix(in srgb,var(--c) 9%,var(--paper)) 75%,var(--paper))}
.info-in{max-width:1180px;margin:0 auto;display:grid;gap:2rem}
.visit-tel{display:grid;gap:.3rem;margin-top:1.6rem;font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,11vw,3.8rem);line-height:1;letter-spacing:-.01em;color:var(--ci);text-decoration:none;font-variant-numeric:lining-nums}
.visit-tel small{font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
@media(hover:hover){.visit-tel:hover{color:var(--navy)}}
.visit-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.info-card{align-self:end}
.visit-facts{border-top:1.5px solid var(--ink)}
.visit-facts div{display:grid;grid-template-columns:7rem 1fr;gap:1rem;align-items:baseline;padding:.95rem 0;border-bottom:1px solid rgba(22,41,74,.14)}
.visit-facts dt{font-size:.62rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.visit-facts dd{font-family:var(--serif);font-size:1.3rem;line-height:1.3;color:var(--ink)}
.visit-facts .tbd{font-style:italic;color:#696E7A}

.siblings{padding:1rem 1.2rem 2.8rem}
.siblings-head{max-width:46rem;margin:0 auto;text-align:left}
.siblings .concepts{margin-top:1.6rem}

@media(min-width:769px){
  .cp-hero{padding:calc(var(--nav-h) + 3rem) 2rem 3rem}
  .info,.siblings{padding-left:2rem;padding-right:2rem}
  .bridge{padding:5rem 2rem}
}
@media(min-width:1000px){
  .cp-hero{min-height:88vh;min-height:88svh;display:flex;align-items:center;padding:calc(var(--nav-h) + 2rem) 3rem 3rem}
  .cp-hero-in{width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:3rem}
  .cp-hero-canvas{aspect-ratio:5/4}
  .info,.siblings{padding-left:3rem;padding-right:3rem}
  .info-in{grid-template-columns:1.05fr .95fr;gap:5rem;align-items:end}
  .info{padding-top:5rem;padding-bottom:4.5rem}
  .bridge{padding:6rem 3rem}
  .bridge-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:4rem;align-items:center}
  .bridge-in>*{grid-column:1}
  .bridge-path{grid-column:2;grid-row:1/span 6;margin:0}
  .bridge-in>.sw-btn{justify-self:start;margin-top:.4rem}
  .siblings-head{text-align:center}
}

/* =========================================================
   SCHOOL PAGES: the parent sections
   (at a glance, a day, the four years, care and safety,
   spaces, admissions and FAQ). Tinted by --c / --ci.
   ========================================================= */
.draft-note{display:inline-block;margin-top:1rem;padding:.35rem .75rem;border-radius:8px;background:rgba(169,130,60,.12);color:#7A5E25;font-size:.78rem;font-style:italic;line-height:1.4}

/* at a glance, right under the hero */
.glance{padding:0 1.2rem}
.glance-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;border-block:1px solid rgba(22,41,74,.14)}
.glance-in div{padding:.95rem .2rem .95rem 0}
.glance-in div:nth-child(n+3){border-top:1px solid rgba(22,41,74,.1)}
.glance dt{font-size:.58rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.glance dd{margin-top:.2rem;font-family:var(--serif);font-size:1.2rem;line-height:1.2;color:var(--ink)}
.glance dd a{color:var(--ci);text-decoration:none;border-bottom:1px solid currentColor}

/* a day at school */
.day{padding:3.6rem 1.2rem 2.6rem}
.day-in{max-width:1180px;margin:0 auto;display:grid;gap:1.6rem}
.day-list{position:relative;list-style:none}

.day-item{position:relative;display:grid;grid-template-columns:4.4rem 1fr;column-gap:1.2rem;align-items:baseline;padding:.95rem 0;border-top:1px solid rgba(22,41,74,.13)}
.day-item time{font-size:.78rem;font-weight:600;letter-spacing:.1em;color:var(--ci);font-variant-numeric:lining-nums tabular-nums;text-transform:uppercase}

.care-ic svg,.sp-ph svg{width:22px;height:22px;fill:none;stroke:var(--ci);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.day-item h3{font-family:var(--serif);font-weight:500;font-size:1.3rem;line-height:1.2;letter-spacing:-.01em}
.day-item p{margin-top:.3rem;font-size:.95rem;line-height:1.6;color:#4A5468;max-width:46ch;text-wrap:pretty}

/* the four years, growing like a height chart */
.years{padding:3.4rem 0 2.8rem}
.years-head{max-width:1180px;margin:0 auto;padding:0 1.2rem}
.yr-list{list-style:none;display:flex;gap:.8rem;margin-top:1.8rem;padding:.4rem 1.2rem 1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.yr-list::-webkit-scrollbar{display:none}
.yr{flex:0 0 78%;scroll-snap-align:start;display:flex;flex-direction:column;padding:1.2rem 1.2rem 1.3rem;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(22,41,74,.07),0 20px 40px -32px rgba(22,41,74,.45)}
.yr-bar{display:flex;align-items:flex-end;height:70px;margin-bottom:1rem;padding:0 0 0 .1rem;border-bottom:1.5px solid color-mix(in srgb,var(--c) 60%,transparent)}
.yr-bar i{display:block;width:34px;height:var(--h);border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 70%,var(--ci)));transition:height 1.2s cubic-bezier(.2,.8,.2,1) .15s}
.js .yr.reveal:not(.in) .yr-bar i{height:0}
.yr-age{font-size:.6rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.yr h3{margin-top:.25rem;font-family:var(--serif);font-weight:500;font-size:2.1rem;line-height:1}
.yr-focus{margin-top:.3rem;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--ci)}
.yr ul{list-style:none;display:grid;gap:.45rem;margin-top:.9rem}
.yr li{position:relative;padding-left:1rem;font-size:.92rem;line-height:1.5;color:#34405A}
.yr li::before{content:'';position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--c)}

/* teachers, care and safety */
.care{padding:3.4rem 1.2rem}
.care-in{max-width:1180px;margin:0 auto;display:grid;gap:2rem}
.care-points{list-style:none;margin-top:1.4rem;border-top:1px solid rgba(22,41,74,.14)}
.care-points li{padding:1rem 0;border-bottom:1px solid rgba(22,41,74,.14)}
.care-points h3{font-family:var(--serif);font-weight:500;font-size:1.35rem;line-height:1.15;color:var(--ink)}
.care-points p{margin-top:.25rem;font-size:.95rem;line-height:1.6;color:#4A5468}
.care-safe{padding:1.6rem 1.3rem 1.5rem;border-radius:24px;background:radial-gradient(100% 70% at 100% 0%,rgba(255,255,255,.08),rgba(255,255,255,0) 60%),var(--navy);color:var(--paper)}
.care-h{font-family:var(--serif);font-weight:500;font-size:2rem;line-height:1.05}
.safe-list{list-style:none;display:grid;gap:1rem;margin-top:1.3rem}
.safe-list li{display:grid;grid-template-columns:42px 1fr;gap:.9rem;align-items:start}
.care-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(248,243,231,.08);box-shadow:inset 0 0 0 1px rgba(248,243,231,.14)}
.care-safe .care-ic svg{stroke:#E3C88F}
.safe-list h4{font-family:var(--serif);font-weight:500;font-size:1.2rem;line-height:1.2}
.safe-list p{margin-top:.15rem;font-size:.88rem;line-height:1.5;color:rgba(248,243,231,.72)}
.care-safe .draft-note{background:rgba(227,200,143,.14);color:#E3C88F}

/* our spaces */
.spaces{padding:3.4rem 0 3rem}
.spaces-head{max-width:1180px;margin:0 auto;padding:0 1.2rem}
.sp-grid{display:flex;gap:.8rem;margin-top:1.8rem;padding:.2rem 1.2rem 1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.sp-grid::-webkit-scrollbar{display:none}
.sp{position:relative;flex:0 0 72%;aspect-ratio:4/5;margin:0;scroll-snap-align:start;border-radius:20px;overflow:hidden}
.sp-ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.6rem;
  background:radial-gradient(rgba(22,41,74,.07) 1px,transparent 1.2px) 0 0/14px 14px,linear-gradient(160deg,color-mix(in srgb,var(--c) 22%,var(--paper)),color-mix(in srgb,var(--c) 42%,var(--paper)))}
.sp-ph svg{width:34px;height:34px;opacity:.8}
.sp-ph span{font-size:.62rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:color-mix(in srgb,var(--ci) 80%,transparent)}
.sp figcaption{position:absolute;left:.8rem;bottom:.8rem;padding:.4rem .8rem;border-radius:999px;background:rgba(255,255,255,.9);font-size:.8rem;font-weight:500;color:var(--ink)}

/* admissions and FAQ */
.admit{padding:3.4rem 1.2rem 3rem}
.admit-in{max-width:1180px;margin:0 auto}
.ad-steps{list-style:none;display:grid;margin-top:1.4rem;border-top:1px solid rgba(22,41,74,.14)}
.ad-step{position:relative;display:grid;grid-template-columns:40px 1fr;column-gap:1rem;padding:1rem 0;border-bottom:1px solid rgba(22,41,74,.14)}
.ad-n{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ci);color:#fff;font-family:var(--serif);font-size:1.3rem}
.ad-step h3{font-family:var(--serif);font-weight:500;font-size:1.4rem;line-height:1.1;padding-top:.3rem}
.ad-step p{margin-top:.25rem;font-size:.93rem;line-height:1.55;color:#4A5468}
.faq{margin-top:2rem;max-width:820px}
.faq-h{font-family:var(--serif);font-weight:500;font-size:1.8rem;line-height:1.1;margin-bottom:.6rem}
.faq-item{border-bottom:1px solid rgba(22,41,74,.14)}
.faq-item:first-of-type{border-top:1px solid rgba(22,41,74,.14)}
.faq-item summary{position:relative;list-style:none;cursor:pointer;padding:1.05rem 2.4rem 1.05rem 0;font-family:var(--serif);font-size:1.25rem;line-height:1.25;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'';position:absolute;right:.3rem;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;
  background:linear-gradient(var(--ci),var(--ci)) center/10px 1.5px no-repeat,linear-gradient(var(--ci),var(--ci)) center/1.5px 10px no-repeat;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ci) 40%,transparent);transition:transform .4s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 2.4rem 1.2rem 0;font-size:.97rem;line-height:1.65;color:#4A5468}
.faq-item summary:focus-visible{outline:2px solid var(--ci);outline-offset:3px;border-radius:6px}

@media(min-width:769px){
  .glance{padding:0 2rem}
  .glance-in{grid-template-columns:repeat(4,1fr)}
  .glance-in div{padding:1.1rem 1.2rem;border-top:0!important;border-left:1px solid rgba(22,41,74,.1)}
  .glance-in div:first-child{border-left:0;padding-left:0}
  .day,.care,.admit{padding-left:2rem;padding-right:2rem}
  .years-head,.spaces-head{padding:0 2rem}
  .yr-list,.sp-grid{padding-left:2rem;padding-right:2rem}
  .yr{flex-basis:44%}
  .sp{flex-basis:44%}
  .ad-steps{grid-template-columns:1fr 1fr;gap:.8rem;border-top:0}
  .ad-step{display:block;padding:1.2rem 1.2rem 1.3rem;border:0;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(22,41,74,.07)}
  .ad-step h3{margin-top:.8rem;padding-top:0}
}
@media(min-width:1000px){
  .day,.care,.admit{padding:3.8rem 3rem 3.4rem}
  .years,.spaces{padding:3.8rem 0 3.4rem}
  .day-in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:5rem;align-items:start}
  .day-head{position:sticky;top:calc(var(--nav-h) + 2rem)}
  .years-head,.spaces-head{padding:0 3rem}
  .yr-list{max-width:1180px;margin:2.2rem auto 0;padding:.4rem 0 1rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;overflow:visible}
  .yr{flex:none}
  .care-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4.5rem;align-items:start}
  .care-safe{padding:2.2rem 2.2rem 2rem}
  .safe-list{grid-template-columns:1fr 1fr;gap:1.4rem 1.6rem}
  .sp-grid{max-width:1180px;margin:2.2rem auto 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:1rem;overflow:visible}
  .sp{aspect-ratio:auto}
  .sp-big{grid-column:span 2;grid-row:span 2}
  .sp-wide{grid-column:span 2}
  .ad-steps{grid-template-columns:repeat(4,1fr);gap:1rem}
  .admit-in{display:grid;grid-template-columns:1fr;}
  .faq{margin:2.6rem auto 0;width:100%}
  .faq-h{text-align:center}
}
@media(prefers-reduced-motion:reduce){.yr-bar i{transition:none}.faq-item summary::after{transition:none}}

/* =========================================================
   HOME: our story (a height chart), why Small Wonders, book a visit
   ========================================================= */
.story{padding:4rem 1.2rem 3.4rem}
.story-in{max-width:1180px;margin:0 auto;display:grid;gap:2.6rem}
.proof{display:grid;grid-template-columns:1fr 1fr;margin-top:1.8rem;border-top:1px solid rgba(22,41,74,.14)}
.proof div{padding:1rem .8rem 1rem 0;border-bottom:1px solid rgba(22,41,74,.14)}
.proof div:nth-child(odd){border-right:1px solid rgba(22,41,74,.1)}
.proof div:nth-child(even){padding-left:1rem}
.proof dt{font-family:var(--serif);font-weight:500;font-size:2.8rem;line-height:1;color:#876830;font-variant-numeric:lining-nums}
.proof dd{margin-top:.3rem;font-size:.86rem;line-height:1.4;color:#4A5468}
/* the story, as six marks on a line */
.tl.lit::after{height:calc(100% - .8rem)}
@media(hover:hover){.tl-go:hover{color:var(--navy);border-color:var(--navy)}}

.why{padding:3.4rem 1.2rem 3.6rem}
.why-head{max-width:46rem;margin:0 auto;text-align:center}
.why-head .eyebrow{justify-content:center}
.why-list{list-style:none;max-width:1180px;margin:2.2rem auto 0;display:grid;border-top:1px solid rgba(22,41,74,.14)}
.why-item{padding:1.5rem 0 1.6rem;border-bottom:1px solid rgba(22,41,74,.14)}
.why-n{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--w)}
.why-item h3{margin-top:.3rem;font-family:var(--serif);font-weight:500;font-size:1.7rem;line-height:1.1;color:var(--ink)}
.why-item p{margin-top:.45rem;font-size:.95rem;line-height:1.6;color:#4A5468}
.why-item .why-m{margin-top:.9rem;padding-left:.9rem;border-left:2px solid var(--w);font-family:var(--serif);font-style:italic;font-size:1.12rem;line-height:1.4;color:var(--w)}

.book{padding:3.6rem 1.2rem 4rem;background:linear-gradient(180deg,var(--paper),#EFE7D6)}
.book-in{max-width:1180px;margin:0 auto;display:grid;gap:2rem}
.book .ad-step p,.book .ad-step h3{color:var(--ink)}
.book{--ci:var(--navy);--c:#C9A25C}

/* the booking form (shared: home and every school page) */
.bform{padding:1.4rem 1.2rem 1.4rem;border-radius:22px;background:#fff;box-shadow:0 0 0 1px rgba(22,41,74,.07),0 30px 60px -40px rgba(22,41,74,.55)}
.bform-k{font-size:.6rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:#876830}
.bform-t{margin-top:.4rem;font-family:var(--serif);font-weight:500;font-size:1.8rem;line-height:1.08}
.bform-t em{font-style:italic;color:var(--ci,var(--navy))}
.bform-honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.bform-grid{display:grid;gap:.8rem;margin-top:1.2rem}
.bf{display:grid;gap:.35rem}
.bf span{font-size:.72rem;font-weight:600;letter-spacing:.08em;color:var(--ink)}
.bf small{font-weight:400;color:var(--muted);letter-spacing:0}
.bf input,.bf select{width:100%;min-height:48px;padding:.7rem .9rem;border:0;border-radius:12px;background:#F6F1E6;box-shadow:inset 0 0 0 1px rgba(22,41,74,.12);font:inherit;font-size:1rem;color:var(--ink);-webkit-appearance:none;appearance:none}
.bf select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2.4rem}
.bf input:focus,.bf select:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ci,var(--navy));background:#fff}
.bf.bad input,.bf.bad select{box-shadow:inset 0 0 0 2px #B3412F}
.bform-go{display:flex;align-items:center;justify-content:center;gap:.55rem;width:100%;margin-top:1.1rem;padding:1rem 1.4rem;border:0;border-radius:999px;cursor:pointer;background:var(--ci,var(--navy));color:#fff;font:inherit;font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;transition:transform .3s var(--ease),opacity .3s}
.bform-go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bform-go:disabled{opacity:.6;cursor:progress}
.bform-note{margin-top:.8rem;font-size:.8rem;line-height:1.5;color:var(--muted)}
.bform-note a{color:var(--ci,var(--navy))}
.bform-msg:empty{display:none}
.bform-msg{margin-top:.8rem;padding:.8rem 1rem;border-radius:12px;font-size:.92rem;line-height:1.5;background:#EEF5EA;color:#2F5A2A}
.bform-msg.err{background:#FBEAE6;color:#8A2F22}
.bform.done .bform-grid,.bform.done .bform-go,.bform.done .bform-note{display:none}
.admit-form{margin-top:2rem;max-width:720px}

@media(min-width:769px){
  .story,.why,.book{padding-left:2rem;padding-right:2rem}
  .why-list{grid-template-columns:1fr 1fr;column-gap:3rem}
  .bform{padding:2rem 2rem 1.8rem}
  .bform-grid{grid-template-columns:1fr 1fr}
  .bf-wide{grid-column:1/-1}
  .bform-go{width:auto}
}
@media(min-width:1000px){
  .story{padding:4.2rem 3rem 3.8rem}
  .story-in{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:5rem;align-items:center}
  .why{padding:4rem 3rem 4rem}
  .why-list{grid-template-columns:repeat(4,1fr);column-gap:2rem;border-top:0}
  .why-item{border-bottom:0;border-top:2px solid var(--w);padding-top:1.4rem}
  .book{padding:4.2rem 3rem 4.4rem}
  .book-in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:4.5rem;align-items:start}
  .book .ad-steps{grid-template-columns:1fr;gap:0;border-top:1px solid rgba(255,255,255,.22)}
  .admit-form{margin:3rem auto 0}
}
@media(prefers-reduced-motion:reduce){.hc-fill,.hc-marks li,.hc-marks li::before{transition:none}}

/* =========================================================
   DESIGN LAYER: paper, surfaces, type, ornament, depth.
   Loaded last, so it refines everything above.
   ========================================================= */
:root{
  --surface-1:#FFFCF5;          /* warm white, for the quieter sections */
  --surface-2:#F8F3E7;          /* parchment, the page ground */
  --surface-3:#F1E7D4;          /* sand, for weight at the end of a page */
  --line-soft:rgba(22,41,74,.1);
  --r-s:14px;--r-m:20px;--r-l:28px;
  --sh-1:0 1px 2px rgba(22,41,74,.045),0 12px 28px -18px rgba(22,41,74,.35);
  --sh-2:0 2px 6px rgba(22,41,74,.05),0 34px 64px -36px rgba(22,41,74,.55);
}
/* a whisper of paper grain over the whole site */
body::after{content:'';position:fixed;inset:0;z-index:300;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:190px 190px}
@media print{body::after{display:none}}

/* ---------- type ---------- */
body{font-size:17.5px;line-height:1.78}
p{text-wrap:pretty}
.sec-title{font-size:clamp(2.3rem,7.8vw,3.9rem);line-height:1.05;letter-spacing:-.018em}
.sec-sub{font-size:1.05rem;line-height:1.8;max-width:36rem}
.cp-title span{letter-spacing:-.03em}
.eyebrow{gap:.9rem;letter-spacing:.36em}
.eyebrow::before{width:38px;height:1px;background:var(--gold)}
.eyebrow-c::after{width:38px;height:1px}
.eyebrow-light::before{background:#C9A25C}

/* ---------- surfaces: quiet, warm, quiet again ---------- */
.story,.spaces,.admit,.reviews{background:var(--surface-1)}
.day{background:linear-gradient(180deg,var(--surface-1),var(--surface-1) 70%,var(--paper))}
.why,.years,.care{background:var(--paper)}
.story,.day,.spaces,.admit{box-shadow:inset 0 1px 0 var(--line-soft),inset 0 -1px 0 var(--line-soft)}
.book{background:linear-gradient(180deg,var(--paper),var(--surface-3))}

/* ---------- depth: one shadow language ---------- */
.bform,.yr,.tm-step,.fd-panel,.fd-stage,.gift-stage,.fn-result,.fn-card,.sp,.pct-card,.ad-step{
  border-radius:var(--r-m)}
.bform,.yr,.tm-step,.fd-panel,.fd-stage,.gift-stage,.fn-result,.sp,.pct-card{box-shadow:var(--sh-1)}
.bform,.fn-result{box-shadow:var(--sh-2)}
.care-safe{border-radius:var(--r-l)}

/* ---------- buttons and links ---------- */
.sw-btn{letter-spacing:.2em;box-shadow:0 10px 24px -18px rgba(22,41,74,.9)}
.sw-btn-solid{box-shadow:0 12px 26px -16px rgba(22,41,74,.75)}
@media(hover:hover){
  .sw-btn-solid:hover{transform:translateY(-2px);box-shadow:0 18px 34px -18px rgba(22,41,74,.8)}
}
.bform-go{box-shadow:0 14px 30px -18px rgba(22,41,74,.9)}

/* ---------- reveals: a touch slower, a touch further ---------- */
.js .reveal{transform:translateY(28px)}
.js .reveal.in{transition-duration:1.15s}

/* ---------- big screens: bigger type, not bigger gaps (the 901px tier above
   already sets section padding; stacking a second, larger padding rule per
   section on top of it was the main cause of excess vertical scroll) ---------- */
@media(min-width:1000px){
  .sec-sub{font-size:1.1rem}
}

/* ---------- the review wall, properly set ---------- */
.reviews{--fade:var(--surface-1)}
.reviews-head .sec-title{max-width:22ch}

/* The hero art used to sit inside a big arch-shaped wash on all three school pages.
   Removed 13 Sep at Arnav's request: it read as a doorway behind the object and it
   was doing nothing except filling space. The hero art now sits on the paper. */
.cp-hero-art{position:relative;isolation:isolate}
.cp-hero-canvas{position:relative;z-index:1}

/* ---------- photo places, framed like windows ---------- */
.sp{border-radius:var(--r-l) var(--r-l) var(--r-m) var(--r-m)}
.sp-ph{background:
  radial-gradient(color-mix(in srgb,var(--ci) 16%,transparent) 1px,transparent 1.2px) 0 0/16px 16px,
  linear-gradient(165deg,color-mix(in srgb,var(--c) 16%,var(--surface-1)),color-mix(in srgb,var(--c) 34%,var(--paper)))}
.sp-ph::before{content:'';position:absolute;inset:12px;border-radius:calc(var(--r-l) - 6px) calc(var(--r-l) - 6px) var(--r-s) var(--r-s);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ci) 18%,transparent)}
.sp-ph svg{opacity:.9}
.sp figcaption{backdrop-filter:blur(6px);box-shadow:0 6px 16px -10px rgba(22,41,74,.5)}
.sp-big .sp-ph svg{width:44px;height:44px}

/* ---------- headings arrive under a clean edge ----------
   The resting clip-path used to be exactly inset(0 0 0 0). The wipe's easing
   (cubic-bezier(.19,1,.22,1)) has a long settling tail, so the last percent or
   two of the bottom inset lingered well after the motion looked finished,
   slicing the tail off any descender (g, y, j, p, q) in the heading. Resting
   on a small negative inset gives the wipe a little overshoot, so the clip
   line clears every descender before the eye would register the motion as done. */
.js .reveal .sec-title,.js .reveal.sec-title{clip-path:inset(0 0 -0.3em 0)}
.js .reveal:not(.in) .sec-title{clip-path:inset(0 0 108% 0)}
.js .reveal .sec-title{transition:clip-path 1.1s cubic-bezier(.19,1,.22,1) .06s}
@media(prefers-reduced-motion:reduce){.js .reveal:not(.in) .sec-title{clip-path:none}}

/* ---------- a thread of gold at the very top of the page ---------- */
.prog{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:left;transform:scaleX(0);z-index:80;
  background:linear-gradient(90deg,var(--gold),#E3C88F);pointer-events:none;opacity:0;transition:opacity .5s}
.prog.on{opacity:1}
@media(prefers-reduced-motion:reduce){.prog{display:none}}

/* ---------- since 2002: one compact band, no timeline ---------- */
.story{position:relative;overflow:hidden}
.story::before{content:'';position:absolute;left:50%;top:0;width:min(120%,1400px);height:100%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(70% 55% at 50% 0%,rgba(169,130,60,.1),transparent 70%)}
.story-in{position:relative;max-width:1080px;grid-template-columns:1fr;gap:0;text-align:center;justify-items:center}
.story-head{display:grid;justify-items:center;width:100%}
.story .eyebrow{justify-content:center}
.story .sec-title{max-width:14ch}
.story .sec-sub{margin-left:auto;margin-right:auto;max-width:50ch}
.proof{width:100%;max-width:900px;margin-top:2.6rem;border-top:1px solid rgba(169,130,60,.3);text-align:center}
.proof div{padding:1.4rem .6rem;border-bottom:1px solid rgba(169,130,60,.22)}
.proof div:nth-child(odd){border-right:1px solid rgba(169,130,60,.22)}
.proof div:nth-child(even){padding-left:.6rem}
.proof dt{font-size:2.5rem;letter-spacing:-.02em}
.proof dd{margin:.4rem auto 0;max-width:16ch;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#6B6455;line-height:1.5}
.story-go{margin-top:2.2rem;display:inline-flex;align-items:center;gap:.5rem;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;padding-bottom:.35rem;border-bottom:1px solid rgba(169,130,60,.5);transition:letter-spacing .4s,border-color .4s}
@media(hover:hover){.story-go:hover{letter-spacing:.27em;border-color:var(--gold)}}
@media(min-width:700px){
  .proof{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid rgba(169,130,60,.3)}
  .proof div{border-bottom:0;border-right:1px solid rgba(169,130,60,.22);padding:1.6rem .9rem}
  .proof div:last-child{border-right:0}
  .proof div:nth-child(even){padding-left:.9rem}
  .proof dt{font-size:3.2rem}
}
@media(min-width:1000px){.story-in{grid-template-columns:1fr;gap:0}.story .sec-title{max-width:16ch}}

/* ---------- four reasons: fewer lines, more presence ---------- */
.why-head .sec-title{max-width:16ch;margin-left:auto;margin-right:auto}
.why-list{margin-top:2.8rem;gap:0}
.why-item{position:relative;padding:1.8rem 0 1.9rem}
.why-n{display:block;font-style:normal;font-size:.64rem;letter-spacing:.28em;color:color-mix(in srgb,var(--w) 82%,transparent)}
.why-item h3{margin-top:.7rem;font-size:1.55rem;letter-spacing:-.01em}
.why-item p{margin-top:.6rem;font-size:1rem;line-height:1.68;color:#4A5468;max-width:34ch}
.why-item .why-m{margin-top:1.1rem;padding:.1rem 0 .1rem 1rem;border-left:2px solid color-mix(in srgb,var(--w) 55%,transparent);font-size:1.05rem;line-height:1.45}
@media(min-width:760px) and (max-width:999px){
  .why-list{grid-template-columns:1fr 1fr;column-gap:2.6rem;border-top:0}
  .why-item{border-bottom:0;border-top:2px solid var(--w);padding-top:1.5rem}
}
@media(min-width:760px){
  .why-item{display:flex;flex-direction:column}
  .why-item .why-m{margin-top:auto}
  .why-item p{flex:0 0 auto}
  .why-item p:not(.why-m){margin-bottom:1.1rem}
}
@media(min-width:1000px){
  .why-list{max-width:1240px;column-gap:2.6rem}
  .why-item{padding-top:1.7rem}
  .why-item::after{content:'';position:absolute;left:0;top:-2px;width:0;height:2px;background:var(--w);filter:brightness(.8);transition:width .8s cubic-bezier(.19,1,.22,1)}
  .why-item.in::after{width:100%}
  .why-item h3{font-size:1.72rem;min-height:3.8rem}
  .why-item p{font-size:1.02rem}
}

/* =========================================================
   THE CREED: one sentence, the last word keeps changing.
   ========================================================= */
.creed{position:relative;padding:3.6rem 1.2rem 3.8rem;background:var(--paper);overflow:hidden}
.creed::before,.creed::after{content:'';position:absolute;left:50%;transform:translateX(-50%);width:min(88%,900px);height:1px;background:linear-gradient(90deg,transparent,rgba(169,130,60,.45),transparent)}
.creed::before{top:0}.creed::after{bottom:0}
.creed-in{max-width:1000px;margin:0 auto;text-align:center}
.creed-p{font-family:var(--serif);font-weight:500;color:var(--ink);letter-spacing:-.015em;line-height:1.24;
  font-size:clamp(1.65rem,6.4vw,3.25rem);text-wrap:balance}
/* The blank. An inline grid so every word stacks in one cell and the slot takes its
   baseline from them, which puts the italic word on the same line as the sentence.
   The clip box is pushed .32em below the baseline and pulled back with a negative
   margin, the same trick .toc-mask and .iw-title .w use, so a descender is never cut.
   The rule is drawn at the baseline by ::after rather than at the bottom of the box. */
.creed-slot{position:relative;display:inline-grid;grid-template-areas:"w";vertical-align:baseline;
  width:var(--slot-w,7em);padding-bottom:.32em;margin-bottom:-.32em;overflow:hidden;
  transition:width .6s cubic-bezier(.19,1,.22,1)}
.creed-slot::after{content:'';position:absolute;left:0;right:0;bottom:.32em;height:2px;
  background:color-mix(in srgb,var(--ci,#876830) 38%,transparent)}
.creed-w{grid-area:w;justify-self:start;text-align:left;white-space:nowrap;font-style:italic;font-size:1.04em;color:var(--ci,#876830);
  opacity:0;transform:translateY(.85em);transition:opacity .5s ease,transform .6s cubic-bezier(.19,1,.22,1)}
.creed-w.on{opacity:1;transform:none}
.creed-w.out{opacity:0;transform:translateY(-.85em);user-select:none}
.creed-note{margin-top:1.7rem;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:#756E60}
/* on a phone the sentence has no room to carry the blank, so the blank drops
   to its own line and stays centred under it */
@media(max-width:560px){.creed-slot{display:grid;justify-self:center;margin:.22em auto -.32em}}
@media(min-width:900px){.creed{padding:5.5rem 3rem 5.8rem}.creed-p{line-height:1.18}}
@media(prefers-reduced-motion:reduce){.creed-slot,.creed-w{transition:none}}
.no-js .creed-slot{width:auto!important;overflow:visible}
.no-js .creed-w{opacity:1;transform:none}

/* =========================================================
   OUR SPACES, set as catalogue plates: number, rule, caption
   below the frame. Works empty; works better with photographs.
   ========================================================= */
.sp-grid{gap:1.1rem;padding-bottom:1.4rem;scroll-padding-inline-start:1.2rem}
.pl{position:relative;flex:0 0 78%;margin:0;scroll-snap-align:start}
.pl-frame{position:relative;display:grid;place-content:center;justify-items:center;gap:.55rem;
  aspect-ratio:4/5;border-radius:var(--r-m);overflow:hidden;
  background:
    radial-gradient(color-mix(in srgb,var(--ci) 14%,transparent) 1px,transparent 1.2px) 0 0/17px 17px,
    linear-gradient(165deg,color-mix(in srgb,var(--c) 14%,var(--surface-1)),color-mix(in srgb,var(--c) 30%,var(--paper)));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ci) 14%,transparent),var(--sh-1)}
.pl-frame::before{content:'';position:absolute;inset:10px;border-radius:calc(var(--r-m) - 5px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ci) 16%,transparent)}
.pl-frame svg{width:34px;height:34px;fill:none;stroke:color-mix(in srgb,var(--ci) 62%,transparent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.pl-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pl-soon{font-size:.55rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:color-mix(in srgb,var(--ci) 62%,transparent)}
.pl figcaption{display:grid;grid-template-columns:auto 1fr;column-gap:.85rem;align-items:baseline;
  margin-top:.95rem;padding-top:.7rem;border-top:1px solid rgba(22,41,74,.16)}
.pl-n{font-family:var(--serif);font-size:.9rem;color:var(--ci);font-variant-numeric:lining-nums}
.pl-t{font-family:var(--serif);font-weight:500;font-size:1.12rem;line-height:1.2;color:var(--ink)}
.pl-s{grid-column:2;margin-top:.3rem;font-size:.9rem;line-height:1.5;color:#5A6478;text-wrap:pretty}
@media(min-width:700px){.pl{flex:0 0 46%}}
@media(min-width:1000px){
  /* The plates deliberately carry different aspect ratios, so as a start-aligned
     grid the shorter plate's caption floated high and left a hole under it while
     its neighbour ran on. Aligning to the end hangs the frames from a common
     bottom edge, which puts the captions of a row on one line and moves the air
     above the plates, where it reads as deliberate. */
  .sp-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:min-content;align-items:end;
    gap:2.2rem 1.8rem;overflow:visible;max-width:1240px;margin:2.6rem auto 0;padding:0 3rem}
  .pl{flex:none}
  .pl:nth-child(1){grid-column:span 3}
  .pl:nth-child(2){grid-column:span 3;margin-top:3.2rem}
  .pl:nth-child(3),.pl:nth-child(4),.pl:nth-child(5){grid-column:span 2}
  .pl:nth-child(1) .pl-frame{aspect-ratio:4/3}
  .pl:nth-child(2) .pl-frame{aspect-ratio:1/1}
  .pl:nth-child(4) .pl-frame{margin-top:1.8rem}
  .pl-t{font-size:1.2rem}
}

/* ---------- a stated belief, before any method ---------- */
.belief{display:grid;gap:.55rem;margin-bottom:1.6rem;padding-left:1.1rem;border-left:2px solid color-mix(in srgb,var(--ci) 45%,transparent);text-align:left}
.belief span{font-size:.6rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-text)}
.belief b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.18rem,4.4vw,1.6rem);line-height:1.35;color:var(--ink);text-wrap:balance}
/* =========================================================
   THE CHAPTER OPENING
   It had four different measures and two different alignments stacked on each
   other: a narrow centred italic epigraph, a centred eyebrow, a centred heading
   capped at 20ch, then a left-aligned text column of a fifth width. Now it is one
   column, one left edge, one alignment, with the rhythm doing the work instead:
   the epigraph set apart, the eyebrow tight to the heading, the heading tight to
   the opening paragraph.
   ========================================================= */
.cp-open{width:min(100%,37.5rem);max-width:none;margin-inline:auto;text-align:left}
.cp-open > *{width:100%;max-width:none;margin-inline:0;text-align:left}
.cp-open .belief{display:grid;justify-items:start;gap:.5rem;margin-bottom:3.2rem;
  padding-left:1.15rem;border-left:2px solid color-mix(in srgb,var(--ci) 45%,transparent)}
.cp-open .belief b{max-width:34ch}
.cp-open .eyebrow{margin-bottom:.2rem}
.cp-open .sec-title{margin-top:.4rem}
.cp-open .cp-open-lede{margin-top:1.5rem}
.cp-open .sec-sub{margin-top:1.6rem}

@media(min-width:900px){.belief{margin-bottom:2rem;padding-left:1.5rem}}

/* ---------- the shape of the morning, before the timeline ---------- */
.day-shape{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid rgba(22,41,74,.14);
  font-family:var(--serif);font-weight:500;font-size:clamp(1.15rem,4.6vw,1.5rem);line-height:1.4;color:var(--ink);text-wrap:pretty;max-width:34ch}
.day-shape em{font-style:italic;color:var(--ci)}

/* ---------- the morning, set as a printed programme ---------- */
.day-list{border-bottom:1px solid rgba(22,41,74,.13)}
.day-item:first-child{border-top-color:rgba(169,130,60,.5)}
.day-item time{display:block;padding-top:.3rem}
@media(min-width:1000px){
  .day-item{grid-template-columns:5rem 1fr;column-gap:2rem;padding:1.15rem 0}
  .day-item h3{font-size:1.4rem}
}

/* =========================================================
   THE INVITATION BAR: mobile only, after the hero has gone.
   ========================================================= */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:1px;background:rgba(22,41,74,.12);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(110%);transition:transform .5s cubic-bezier(.19,1,.22,1);
  box-shadow:0 -10px 30px -22px rgba(22,41,74,.85)}
.bar.up{transform:none}
.bar a{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:.45rem;padding:1rem .5rem;
  background:var(--surface-1);color:var(--ink);text-decoration:none;white-space:nowrap;
  font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.bar a.bar-go{flex:1.4 1 0;background:var(--navy);color:#FDFBF6}
.bar svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bar a.bar-wa svg{stroke:#1E8E58}
@media(min-width:781px){.bar{display:none}}
@media(prefers-reduced-motion:reduce){.bar{transition:none}}

/* =========================================================
   WHAT FAMILIES ASK: the questions parents actually have,
   answered by parents. Set as a letters page, not a carousel.
   ========================================================= */
.qa{list-style:none;margin:2rem 0 0;padding:.4rem 1.2rem 1.4rem;display:flex;gap:1.2rem;
  overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.qa::-webkit-scrollbar{display:none}
.qa-item{scroll-snap-align:start;flex:0 0 auto;width:min(80vw,300px);display:grid;gap:.9rem;
  padding:1.2rem 1.3rem 1.4rem;border-top:2px solid rgba(169,130,60,.5);background:var(--paper)}
.qa-n{font-size:.6rem;font-weight:600;letter-spacing:.28em;color:var(--gold)}
.qa-q{font-family:var(--serif);font-weight:500;font-size:1.28rem;line-height:1.24;
  letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
.qa-as{display:grid;gap:1.1rem}
.qa-a{margin:0;padding-left:1rem;border-left:2px solid rgba(169,130,60,.42)}
.qa-a p{font-family:var(--serif);font-size:1rem;line-height:1.5;color:var(--ink);text-indent:-.42em;text-wrap:pretty}
.qa-a cite{display:block;margin-top:.55rem;font-style:normal;font-size:.58rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:#7A7364}
@media(min-width:700px){
  .qa{padding:.4rem 2rem 1.6rem;gap:1.6rem}
  .qa-item{width:340px;padding:1.5rem 1.6rem 1.7rem}
  .qa-q{font-size:1.42rem}
  .qa-a p{font-size:1.08rem}
}
@media(min-width:1000px){
  .qa{padding:.4rem 3rem 1.8rem;margin-top:2.6rem}
  .qa-item{width:360px}
}
.reviews .draft-note{max-width:1240px;margin:2.4rem auto 0;padding:0 1.2rem}
@media(min-width:1000px){.reviews .draft-note{padding:0 3rem}}

/* =========================================================
   THE INVITATION: admissions on the one deep ground of the
   page, with the form as a warm card and a human beside it.
   ========================================================= */
.book,.admit{background:linear-gradient(180deg,#193051,#132340 72%,#101D36);color:#E5DFD2;box-shadow:none}
.book::before,.admit::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 44% at 18% 0%,rgba(201,162,92,.16),transparent 70%)}
.book,.admit{position:relative;isolation:isolate}
.book>*,.admit>*{position:relative;z-index:1}
.book .sec-title,.admit .sec-title{color:#FCF8F0}
.book .sec-title em,.admit .sec-title em{color:#E3C88F}
.book .eyebrow,.admit .eyebrow{color:#DCBE82}
.book .eyebrow::before,.admit .eyebrow::before,.book .eyebrow-c::after{background:#C9A25C}
.book .ad-steps,.admit .ad-steps{border-top-color:rgba(255,255,255,.22)}
.book .ad-step,.admit .ad-step{border-bottom-color:rgba(255,255,255,.16)}
.book .ad-step h3,.admit .ad-step h3{color:#FCF8F0}
.book .ad-step p,.admit .ad-step p{color:rgba(229,223,210,.76)}
.book .ad-n,.admit .ad-n{background:transparent;color:#E3C88F;box-shadow:inset 0 0 0 1px rgba(201,162,92,.55)}
.admit .faq-h{color:#FCF8F0}
.admit .faq-item,.admit .faq-item:first-of-type{border-color:rgba(255,255,255,.16)}
.admit .faq-item summary{color:#F3EDE1}
.admit .faq-item summary::after{border-color:rgba(201,162,92,.6);color:#E3C88F}
.admit .faq-item p{color:rgba(229,223,210,.76)}
.admit .faq-item summary:focus-visible{outline-color:#E3C88F}
.book .draft-note,.admit .draft-note{background:rgba(255,255,255,.08);color:rgba(229,223,210,.8);border-color:rgba(201,162,92,.35)}

/* who replies */
.reply{margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(201,162,92,.4)}
.reply-k{font-size:.6rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:#DCBE82}
.reply-t{margin-top:.8rem;font-family:var(--serif);font-size:1.22rem;line-height:1.45;color:#F6F1E6;max-width:32ch;text-wrap:pretty}
.reply-l{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.6rem;margin-top:1.1rem}
.reply-tel{font-family:var(--serif);font-size:1.5rem;color:#FCF8F0;text-decoration:none;letter-spacing:.01em}
.reply-l a:not(.reply-tel){font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#DCBE82;
  text-decoration:none;padding-bottom:.25rem;border-bottom:1px solid rgba(201,162,92,.5)}
@media(hover:hover){.reply-tel:hover{color:#E3C88F}.reply-l a:not(.reply-tel):hover{color:#F6F1E6;border-color:#E3C88F}}
@media(min-width:1000px){
  .reply{margin-top:2.6rem}
  .book .reply{border-top:0;padding-top:0}
}
/* the form card keeps its own warm, dark-on-light palette */
.book .bform,.admit .bform{color:var(--ink)}
.book .bform-t,.admit .bform-t{color:var(--ink)}
.book .bform-k,.admit .bform-k{color:var(--gold-on-white)}
.book .bform-note,.admit .bform-note{color:#6B6455}
.book .bf span,.admit .bf span{color:var(--ink)}
/* on the deep ground the steps are rows, not cards: the plain .ad-step rule (769-999px)
   turns them into white cards, which left the light heading colour above unreadable on
   .book between 769 and 999px. Same unconditional override as .admit, so neither ever
   gets the white-card treatment. */
.book .ad-step,.admit .ad-step{background:none;box-shadow:none;border:0;border-bottom:1px solid rgba(255,255,255,.16);border-radius:0;
  display:grid;grid-template-columns:40px 1fr;column-gap:1rem;padding:1rem 0}
.book .ad-step h3,.admit .ad-step h3{margin-top:0;padding-top:.3rem}
@media(min-width:769px){
  .admit .ad-steps{grid-template-columns:1fr 1fr;gap:0 2.6rem;border-top:1px solid rgba(255,255,255,.22)}
  .admit .ad-step{padding:1.2rem 0}
}
@media(min-width:1000px){
  .admit .ad-steps{grid-template-columns:repeat(4,1fr);gap:0 2.2rem}
  .admit .ad-step{grid-template-columns:1fr;row-gap:.7rem}
  .admit .ad-n{grid-row:auto}
  .admit-form{max-width:860px}
}
@media(min-width:1000px){
  .admit-in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);column-gap:4.5rem;align-items:start}
  .admit-head,.admit .ad-steps{grid-column:1/-1}
  .admit .reply{grid-column:1;margin-top:2.2rem}
  .admit-form{grid-column:2;margin:2.2rem 0 0;max-width:none}
  .admit .faq{grid-column:1/-1;margin-top:3rem;max-width:900px}
}

/* =========================================================
   CRAFT: how the type sits. Small properties, large effect.
   ========================================================= */
h1,h2,h3,.sec-title,.cp-title,.qa-q,.bform-t,.faq-item summary{text-wrap:balance}
p,li,figcaption,dd{text-wrap:pretty}
body{font-variant-numeric:oldstyle-nums}
time,.proof dt,.pl-n,.yr-age,.tl-year,.ad-n,.glance dd,.fd-k,.gift-k{font-variant-numeric:lining-nums}
.day-item time{font-variant-numeric:lining-nums tabular-nums}
.sec-sub,.cp-lede,.day-item p,.ad-step p,.faq-item p{max-width:62ch}
.sec-title,.cp-title{max-width:20ch}
/* That 20ch cap makes the heading's box narrower than its container. In a section
   that centres its text the box has to be centred too, or the heading sits up to
   68px left of the eyebrow above it and the paragraph below it, which is what it
   was doing on eleven headings across all five pages. .why-head already carried
   the fix; nothing else did.
   It is applied only where the head actually centres. The three concept heads and
   the siblings head centre at 1000px and above and are left-aligned below it, so
   theirs is scoped to that width: centring the box under a left-aligned heading
   would push it off its own column. */
.kgs-head .sec-title,
.lost-in .sec-title,
.lost-in .cp-title{margin-inline:auto}
@media(min-width:1000px){
  .gifts-head .sec-title,
  .term-head .sec-title,
  .folds-head .sec-title,
  .siblings-head .sec-title{margin-inline:auto}
}
.qa-a p,.belief b,.creed-p{max-width:44ch}
.creed-p{margin-inline:auto}
/* one drop cap per school page, in the school colour */
.cp-open-lede::first-letter{float:left;margin:.12em .12em 0 0;font-size:3.1em;line-height:.82;
  font-family:var(--serif);font-weight:500;color:var(--ci)}
@supports (initial-letter:3){
  .cp-open-lede::first-letter{float:none;margin:0 .1em 0 0;font-size:inherit;line-height:inherit;
    initial-letter:2.6;-webkit-initial-letter:2.6}
}
/* Both blocks were set to 46ch, but ch is the width of a zero in each element's
   own font: the serif lede came out 598px and the sans paragraph under it 460px,
   so two centred blocks landed on two different left edges, 69px apart. One
   shared measure in absolute units puts them in the same column. */
.cp-open .cp-open-lede,
.cp-open .sec-sub{text-align:left;max-width:none;width:min(100%,37.5rem);margin-inline:auto}
@media(max-width:780px){.foot{padding-bottom:6rem}}

/* =========================================================
   KEYBOARD FOCUS
   One visible treatment everywhere. Before this, nineteen controls including the
   menu button, every link inside the menu and both Infinia hero buttons showed
   nothing at all when tabbed to.
   ========================================================= */
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:4px}
/* on the dark and coloured grounds the gold disappears, so the ring turns to cream */
.admit :focus-visible,.book :focus-visible,.foot :focus-visible,.bridge :focus-visible,
.menu :focus-visible,.care-safe :focus-visible,.fband:focus-visible{outline-color:#F1E9D8}
/* the booking form is a white card sitting inside the navy band, so it goes back to gold */
.admit .bform :focus-visible,.book .bform :focus-visible{outline-color:var(--gold-deep)}
.toc-row:focus-visible{outline-offset:5px}
.skip:focus-visible{outline-color:#F1E9D8}

/* =========================================================
   TOUCH TARGETS
   Everything reaches 44px of hit area without changing how any of it looks.
   The school-picker dots were 10x10, Kaizen's fold dots 22x22, and every footer
   link about 25px tall.
   ========================================================= */
.stage[data-mode="flow"] .who-dots button::before{inset:-8px}
.fs-tel,.fs-links a,.fs h3 a,.who-link,.story-go,.reply-tel,.reply-links a,.bform-note a{position:relative}
.fs-tel::after,.fs-links a::after,.fs h3 a::after,.who-link::after,.story-go::after,
.reply-tel::after,.reply-links a::after{content:"";position:absolute;left:0;right:0;top:50%;
  height:44px;transform:translateY(-50%)}
.menu-btn{padding-block:.78rem}
.skip{padding:.72rem 1rem}
.gift-step{min-height:44px}
.fn-reset{min-height:44px}
.fd-dots button{position:relative}
.fd-dots button::after{content:"";position:absolute;inset:-6px}
.inq-map button{min-height:44px}
/* "Pull one" / "Pull three" in the gift stage */
.gift-stage button{min-height:44px}

/* =========================================================
   SECTION RHYTHM
   Padding is set by a section's role, not stamped on every section alike.
   Before: every content section sat at 54-67px top and bottom on desktop, the chapter
   openers at 80, the creed at 90 and the bridge at 96, with no reason for the
   difference. Now there are three roles and every section is assigned one.
     statement  one sentence or one turn of the page: given room to be read alone
     standard   a section with a heading and a body: a little more room above than below
     dense      a rail or a strip that belongs to what is beside it: kept close
   Fluid, so no breakpoint is needed. The `body` prefix outranks the per-page files,
   which set their own shorthand padding and load after this one.
   ========================================================= */
:root{
  --pad-statement:clamp(3rem,6vw,4.5rem);
  --pad-top:clamp(2.4rem,3.6vw,3.4rem);
  --pad-bottom:clamp(2.2rem,3vw,3rem);
  --pad-dense:clamp(1.8rem,2.6vw,2.4rem);
}
body :is(.creed,.bridge){padding-block:var(--pad-statement)}
body :is(.kgs,.story,.why,.day,.years,.care,.spaces,.admit,.info,.book,.idea,.finder,.folds){
  padding-top:var(--pad-top);padding-bottom:var(--pad-bottom)}
body :is(.reviews,.siblings){padding-block:var(--pad-dense)}

/* =========================================================
   GROUNDS
   Three grounds per page: paper, navy, and the school's own colour. The warm-white
   surface (#FFFCF5) alternated with paper section by section, and the day, info and
   finder sections each faded between two more, which made five or six near-identical
   grounds that read as stripes. Now the paper carries the page, a hairline marks each
   change of subject, and the only turns of colour are the ones that mean something:
   navy for admissions, the school colour for the bridge to Infinia.
   The warm white survives as the review cards, which now sit on the paper as lifted slips.
   ========================================================= */
body :is(.story,.day,.spaces,.reviews,.info,.why){background:var(--paper);box-shadow:inset 0 1px 0 var(--line-soft)}
body .finder{background:var(--paper);box-shadow:inset 0 1px 0 var(--line-soft)}
.reviews{--fade:var(--paper)}
.qa-item{background:var(--surface-1)}
/* .story and .why sit on the same paper ground with nothing between them: their
   own top/bottom padding was stacking into ~150px of dead space with no seam to
   explain it. .why now gets the hairline every paper-to-paper change gets above,
   and starts closer behind it instead of repeating a full section's worth of air. */
body .story + .why{padding-top:calc(var(--pad-top) * .55)}

/* =========================================================
   AWARDS, AS A PLAQUE
   The best-pre-school awards used to be a large "4x" numeral on the home page and four
   tinted year chips on the Kindergarten page: the badge treatment the research warns
   against. Now the home proof band carries only what is a plain fact (years, schools,
   first authorised) and the awards are one quiet line of small capitals in the footer,
   attributed to the kindergarten that won them.
   ========================================================= */
.story .proof{grid-template-columns:repeat(3,1fr);border-bottom:1px solid rgba(169,130,60,.3);max-width:760px}
.story .proof div{border-bottom:0;border-right:1px solid rgba(169,130,60,.22);padding:1.4rem .6rem}
.story .proof div:last-child{border-right:0}
.story .proof div:nth-child(even){padding-left:.6rem}
@media(min-width:700px){.story .proof div{padding:1.6rem .9rem}.story .proof div:nth-child(even){padding-left:.9rem}}
.foot-award{margin-top:2.2rem;font-size:.62rem;font-weight:600;letter-spacing:.2em;line-height:1.9;text-transform:uppercase;color:rgba(248,243,231,.66);text-wrap:balance}
.foot-award span{font-variant-numeric:lining-nums;letter-spacing:.16em}
@media(min-width:901px){.foot-award{grid-column:1/-1;margin-top:0}}
.foot-award .nb{white-space:nowrap;letter-spacing:inherit}

/* =========================================================
   THE CHAPTER OPENING, USING THE WIDTH
   At 900px and above the opening was still one 600px column, centred inside a
   1180px page, so the strip above it (Where / Since / Ages / Next) and the stage
   below it were both twice as wide as the words between them and the two flanks sat
   empty. Now it is set as a spread, on the same 1180px measure as everything around
   it: the idea on the left (label, heading, then the stated belief), the telling on
   the right (the lede with its drop cap, then the plain sentence that leads into the
   stage). The belief and that sentence share a row, so they start on one line.
   Below 900px it stays one column.
   The belief keeps its place in the source order and is moved by the grid.
   ========================================================= */
@media(min-width:900px){
  body .cp-open{
    width:min(100%,1180px);max-width:none;margin-inline:auto;
    display:grid;align-items:start;
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    grid-template-rows:auto 1fr auto;
    grid-template-areas:"eyebrow lede" "title lede" "belief sub";
    column-gap:clamp(3rem,6.5vw,6.5rem)}
  body .cp-open > *{width:auto}
  body .cp-open .eyebrow{grid-area:eyebrow;margin:0 0 .5rem}
  body .cp-open .sec-title{grid-area:title;margin:0;max-width:none;text-align:left;
    font-size:clamp(2.8rem,4.7vw,4.4rem);line-height:1.04}
  body .cp-open .belief{grid-area:belief;align-self:start;margin:2.6rem 0 0}
  body .cp-open .belief b{max-width:24ch;font-size:clamp(1.3rem,1.85vw,1.65rem)}
  body .cp-open .cp-open-lede{grid-area:lede;width:auto;max-width:none;margin:0;padding-top:.15rem;
    font-size:clamp(1.45rem,1.95vw,1.8rem);line-height:1.44}
  body .cp-open .sec-sub{grid-area:sub;width:auto;max-width:36rem;margin:2.6rem 0 0;font-size:1.1rem}
}

/* =========================================================
   USING THE WIDTH: the sections that were still narrow, centred columns
   After the chapter opening (above) the rest of the desktop page was measured section
   by section. Most already sit on the 1180px column. Four did not:
     - the creed sentence, set at 52px in a 1000px box, leaving 700px of it used
     - the "What families ask" rail, which began at the window edge while its heading
       began at the column edge, and was a scrolling row even where it would fit
     - "Growing up with Panipat", one 730px centred column with three facts under it
     - the two other-kindergarten bands, 1344px wide against a 1180px column
   Phones and tablets are untouched: every rule below is 900px and up, or 1000px and up.
   ========================================================= */

/* the creed: the same sentence, larger, in a box as wide as the column */
@media(min-width:1000px){
  .creed-in{max-width:1180px}
  .creed-p{font-size:clamp(3.25rem,4.7vw,4.4rem)}
  .creed-note{margin-top:2rem}
}

/* the questions: start on the column edge; where three cards fit across the column (six in all,
   two rows), lay them out flat instead of scrolling */
.qa-item{align-content:start}
@media(min-width:1000px){
  .qa{padding-inline:max(3rem,calc((100vw - 1180px) / 2));scroll-padding-inline:max(3rem,calc((100vw - 1180px) / 2))}
}
@media(min-width:1280px){
  .qa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem;align-items:start;
    max-width:1180px;margin-inline:auto;padding-inline:0;overflow:visible}
  .qa-item{width:auto;padding:1.5rem 1.6rem 1.7rem}
}

/* growing up with Panipat: the telling on the left, the three facts as ruled rows on the right */
@media(min-width:900px){
  body .story-in{max-width:1180px}
  body .story-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    grid-template-areas:"eyebrow proof" "title proof" "sub proof" "go proof";
    grid-template-rows:auto auto auto auto;
    column-gap:clamp(3rem,7vw,7rem);justify-items:start;text-align:left;align-items:start}
  body .story .eyebrow{grid-area:eyebrow;justify-content:flex-start;margin:0 0 .5rem}
  body .story .sec-title{grid-area:title;max-width:none;margin:0;text-align:left;font-size:clamp(2.8rem,4.7vw,4.4rem)}
  body .story .sec-sub{grid-area:sub;margin:1.6rem 0 0;max-width:30rem;text-align:left}
  body .story .story-go{grid-area:go;margin-top:2rem}
  body .story .proof{grid-area:proof;align-self:center;display:grid;grid-template-columns:1fr;width:100%;max-width:none;margin:0;
    border-top:1px solid rgba(169,130,60,.3);border-bottom:0;text-align:left}
  body .story .proof div{display:grid;grid-template-columns:minmax(7rem,9.5rem) 1fr;align-items:center;
    padding:1.5rem 0;border-right:0;border-bottom:1px solid rgba(169,130,60,.3)}
  body .story .proof div:nth-child(even){padding-left:0}
  body .story .proof dt{font-size:clamp(3.2rem,4.4vw,4rem)}
  body .story .proof dd{margin:0;max-width:22ch;text-align:left}
}

/* the practical questions: the heading on the left, the list on the right, on the same column */
@media(min-width:1000px){
  body .admit .faq{max-width:none;width:100%;margin:3.6rem 0 0;display:grid;
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(3rem,6.5vw,6.5rem);align-items:start}
  body .admit .faq-h{grid-column:1;grid-row:1/span 9;text-align:left;margin:0;
    font-size:clamp(2.2rem,3.4vw,3rem);line-height:1.08}
  body .admit .faq-item{grid-column:2}
}

/* the two other kindergartens sit on the column, not past it */
@media(min-width:1000px){
  .siblings .concepts-2{max-width:1180px}
}

/* =========================================================
   THE FOUR REASONS, MADE TO RESPOND
   The why-list read as four flat facts with nothing to do. Two of the four
   reasons already point somewhere real (the gifts chapter, infiniaschool.com),
   so those two become whole-card links with a quiet arrow that appears on
   hover; the other two keep the same hover life (the quote rule brightens,
   the number lifts a hair) without pretending to lead anywhere they don't.
   No badges, no pill, nothing that pokes back: just the card answering touch.
   ========================================================= */
.why-item{transition:transform .5s cubic-bezier(.19,1,.22,1)}
.why-card{display:block;color:inherit;text-decoration:none}
.why-item .why-m{transition:border-color .4s ease,padding-left .4s ease}
.why-item .why-n{transition:color .4s ease}
.why-go{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;font-size:.64rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--w);opacity:0;transform:translateY(4px);
  transition:opacity .4s ease,transform .4s ease}
.why-go svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){
  .why-item:has(.why-card):hover{transform:translateY(-3px)}
  .why-item:hover .why-m{padding-left:1.2rem;border-color:var(--w)}
  .why-item:hover .why-n{color:var(--w)}
  .why-item:hover .why-go{opacity:1;transform:translateY(0)}
  .why-card:focus-visible{outline:2px solid var(--w);outline-offset:6px;border-radius:4px}
}
/* the two linked cards get a cursor and keyboard access like any link; the
   other two stay inert on purpose, so the arrow only ever promises what the
   card can actually do */
.why-item:has(.why-card){cursor:pointer}


/* ============================================================
   FOOTER: Infinia listed beside the kindergartens (4 cards)
   ============================================================ */
@media(min-width:769px){.foot-schools{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.foot-schools{grid-template-columns:repeat(4,1fr);gap:1.4rem}}


/* ============================================================
   THE IB, AT INFINIA (home): a navy band that speaks for Infinia
   ============================================================ */
.ibs{position:relative;overflow:hidden;isolation:isolate;background:var(--navy);color:var(--paper);padding:3rem 1.4rem 3.2rem}

.ibs-mark{position:absolute;right:-10%;top:30%;transform:translateY(-50%);width:70vw;max-width:520px;z-index:-1;opacity:.28;pointer-events:none;line-height:0}
.ibs-mark img{width:100%;height:auto;display:block;filter:grayscale(1) brightness(.75) contrast(1.15)}
.ibs-in{max-width:1180px;margin:0 auto}
.ibs-head .sec-title{color:var(--paper);max-width:17ch}
.ibs-head .sec-title em{color:#D5B27A}
.ibs-sub{margin-top:.9rem;max-width:46ch;color:rgba(248,243,231,.78);font-size:1rem;line-height:1.75}
.ibs-list{list-style:none;display:grid;gap:0;margin-top:1.6rem;border-top:1px solid rgba(248,243,231,.2)}
.ibs-list li{padding:1rem 0;border-bottom:1px solid rgba(248,243,231,.2);display:grid;gap:.5rem}
.ibs-n{font-size:.66rem;letter-spacing:.3em;font-weight:600;color:#D5B27A}
.ibs-list h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:1.2;color:var(--paper)}
.ibs-list p{color:rgba(248,243,231,.74);font-size:.96rem;line-height:1.7;max-width:40ch}
.ibs-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}
.ibs-btn{display:inline-flex;align-items:center;gap:.55rem;padding:.95rem 1.7rem;border-radius:999px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;text-decoration:none;transition:transform .35s var(--ease),background .35s ease,box-shadow .35s ease,color .35s ease}
.ibs-btn-solid{background:#D5B27A;color:var(--navy)}
.ibs-btn-ghost{box-shadow:inset 0 0 0 1px rgba(248,243,231,.45);color:var(--paper)}
.ibs-btn:focus-visible{outline:2px solid #D5B27A;outline-offset:3px}
@media(hover:hover){.ibs-btn-solid:hover{background:#E4C592;transform:translateY(-2px)}.ibs-btn-ghost:hover{box-shadow:inset 0 0 0 1px #D5B27A;color:#D5B27A;transform:translateY(-2px)}}
@media(min-width:900px){
  .ibs{padding:4rem 3rem 4.2rem}
  .ibs-mark{right:5%;top:34%;width:26vw;max-width:380px}
  .ibs-list{grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(248,243,231,.2);margin-top:2rem}
  .ibs-list li{padding:1.3rem 2rem 0 0;border-bottom:0;align-content:start}
  .ibs-list li+li{padding-left:2rem;border-left:1px solid rgba(248,243,231,.2)}
  .ibs-list h3{font-size:1.7rem}
  .ibs-actions{margin-top:2rem}
}
.beyond{background:var(--paper);padding:2.4rem 1.2rem 0}
.beyond-in{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:.7rem;padding:1.3rem 1.5rem;border-radius:var(--r-m,20px);background:#fff;box-shadow:var(--sh-1);text-decoration:none;color:var(--ink);border:1px solid var(--line-soft,rgba(22,41,74,.1));transition:transform .4s var(--ease),box-shadow .4s ease}
.beyond-t{font-size:1rem;line-height:1.55}.beyond-t b{font-family:var(--serif);font-size:1.3rem;font-weight:500;display:block;color:var(--ink)}
.beyond-go{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--gold-on-white)}
@media(hover:hover){.beyond-in:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}}
@media(min-width:769px){.beyond{padding:3rem 3rem 0}.beyond-in{flex-direction:row;align-items:center;justify-content:space-between;padding:1.6rem 2.2rem}}

/* Q&A cards: equal heights, even text measure, no hanging indent */
.qa-a p{text-indent:0;max-width:none}
@media(min-width:1280px){.qa{align-items:stretch}.qa-item{align-content:start}}
.reviews{padding-bottom:2.4rem}
.beyond{padding-bottom:2.6rem}

/* IB section: tighter */
.ibs-sub{margin-top:1.1rem}
@media(max-width:768px){.ibs-list p{display:none}.ibs-list li{gap:.2rem;padding:.8rem 0}.ibs-list h3{font-size:1.3rem}}

/* IB section v2: compact, high impact */
.ibs{padding:2.8rem 1.4rem 3rem}
.ibs .ibs-in .sec-title{font-size:clamp(2.2rem,8.5vw,3.6rem);max-width:none;margin-top:.5rem;color:var(--paper)}
.ibs .ibs-sub{font-size:1.05rem;margin-top:.7rem;max-width:42ch}
.ibs-tags{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0 0;padding:0}
.ibs-tags li{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:#D5B27A;border:1px solid rgba(213,178,122,.45);border-radius:999px;padding:.45rem .85rem}
.ibs-actions{margin-top:1.6rem}
.ibs-mark{right:-14%;top:50%;width:68vw;opacity:.32}
.ibs-btn-solid{font-size:.8rem;padding:1.05rem 1.7rem}
@media(min-width:769px){
  .ibs{padding:3.4rem 3rem}
  .ibs-mark{right:max(3rem,calc((100vw - 1180px)/2));top:50%;width:300px;max-width:300px;opacity:.38}
  .ibs-in .sec-title,.ibs .ibs-sub{max-width:34ch}
}
.ibs .ibs-in .sec-title em{color:#E2C48F}
.ibs .ibs-sub{max-width:46ch}
.ibs-mark{top:72%;right:-18%;width:58vw;opacity:.2}
@media(min-width:769px){.ibs-mark{top:50%;right:max(3rem,calc((100vw - 1180px)/2));opacity:.4}.ibs-in .sec-title,.ibs .ibs-sub{max-width:none}}
@media(min-width:769px){.ibs .ibs-sub{max-width:52ch}}

/* IB section v3: logo fully inside, section a little taller */
@media(min-width:769px){
  .ibs{padding:4.2rem 3rem;min-height:380px;display:flex;align-items:center}
  .ibs-in{width:100%}
  .ibs-mark{top:50%;transform:translateY(-50%);width:auto;max-width:none;height:calc(100% - 3.4rem);aspect-ratio:494/485;right:max(3rem,calc((100vw - 1180px)/2));opacity:.42}
  .ibs-mark img{width:100%;height:100%;object-fit:contain}
}
@media(max-width:768px){
  .ibs{padding:3rem 1.4rem 3.4rem}
  .ibs-mark{top:auto;bottom:1.2rem;transform:none;right:-6%;width:46vw;opacity:.22}
}
@media(max-width:768px){
  .ibs-mark{position:relative;z-index:0;top:auto;bottom:auto;right:auto;transform:none;width:96px;height:auto;margin:0 0 1rem;opacity:.7}
  .ibs{isolation:isolate}
}
.ibs-mark img{filter:none}
.ibs-mark{opacity:.3}
@media(min-width:769px){.ibs-mark{opacity:.3;aspect-ratio:761/747}}
@media(max-width:768px){.ibs-mark{opacity:.6}}

/* Mobile: compact the four reasons (less scroll). Quotes stay on tablet and desktop. */
@media(max-width:719px){
  body .why-list{margin-top:1.4rem}
  body .why-item{padding:1rem 0 1.05rem}
  body .why-item h3{margin-top:.35rem;font-size:1.3rem}
  body .why-item p{margin-top:.35rem;font-size:.93rem;line-height:1.5;max-width:none}
  body .why-item .why-m{display:none}
  body .why-item p:not(.why-m){margin-bottom:0}
  body .why-item .why-go{display:none}
  body .why-item,body .why-card{min-height:0}
  body .why-head .sec-title{max-width:none}
}

.mi-title{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.mi-arrow{width:1.15rem;height:1.15rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Mobile: the hero and the kindergartens section were the same paper tone and ran together.
   The kindergartens section takes a deeper warm ground so the hero ends where it should. */
@media(max-width:899px){
  body .kgs{background:#EDE3CC;box-shadow:inset 0 1px 0 rgba(43,39,37,.1)}
}

/* Mobile: the four reasons as a swipe row of small cards instead of a long stack. */
@media(max-width:719px){
  body .why{padding-bottom:1.6rem}
  body .why-list{display:flex;gap:.7rem;margin:1.2rem -1.2rem 0;padding:.2rem 1.2rem .8rem;max-width:none;border-top:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:1.2rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  body .why-list::-webkit-scrollbar{display:none}
  body .why-item{flex:0 0 72%;scroll-snap-align:start;padding:.9rem 1rem 1rem;border:0;border-top:2px solid var(--w);border-radius:12px;background:#FFFCF5;box-shadow:0 0 0 1px rgba(22,41,74,.07)}
  body .why-item h3{font-size:1.2rem;min-height:0}
  body .why-item p{font-size:.88rem;line-height:1.45}
  body .why-n{font-size:.58rem}
}

/* Mobile pass: tap targets of 44px and nothing under 11px. Wide-tracked caps stay small by design,
   but 9.5px was below what a phone reads comfortably. */
@media(max-width:767px){
  body .micro,body .brand-sub,body .honours .micro,body .bridge-path .micro,body .toc-top,body .nt-top,body .nt-top span{font-size:11px}
  body .brand-sub{letter-spacing:.24em}
  body .eyebrow{font-size:.7rem;letter-spacing:.3em}
  body .sw-btn,body .iw-btn,body .toc-cta{font-size:.72rem}
  body .why-n{font-size:.66rem}
  /* footer: phone, WhatsApp, Directions, school names */
  body .fs-tel,body .fs h3 a,body .fs-links a{display:inline-flex;align-items:center;min-height:44px}
  body .fs-tel{margin-top:.1rem}
  body .fs-links{gap:1.4rem;margin-top:0}
  body .fs-links a{border-bottom:0;text-decoration:underline;text-decoration-color:rgba(248,243,231,.35);text-underline-offset:4px}
  body .fs h3{margin-top:.1rem}
  body .who-link,body .story-go,body .reply-tel,body .reply-links a,body .bform-note a{display:inline-flex;align-items:center;min-height:44px}
  body .fd-dots{gap:0}
  body .fd-dots button{width:36px;height:40px;border-radius:12px}
  body input[type=range]{min-height:44px}
}

/* Four reasons, mobile: finished swipe cards. A tinted top in each reason's own colour, a large
   numeral, the title, one line of why, and the small italic moment from class at the foot. */
@media(max-width:719px){
  body .why-item{position:relative;flex:0 0 80%;display:flex;flex-direction:column;padding:0;border:0;border-radius:18px;overflow:hidden;
    background:#FFFCF5;box-shadow:0 0 0 1px rgba(22,41,74,.08),0 18px 30px -22px rgba(22,41,74,.35)}
  body .why-item::before{content:'';position:absolute;inset:0 0 auto 0;height:5px;background:var(--w)}
  body .why-card{display:flex;flex-direction:column;flex:1;padding:1.1rem 1.1rem 1.15rem}
  body .why-n{display:block;font-family:var(--serif);font-style:italic;font-size:2.1rem;line-height:1;letter-spacing:0;color:var(--w);opacity:.9}
  body .why-item h3{margin-top:.55rem;font-size:1.3rem;line-height:1.1}
  body .why-item p{margin-top:.4rem;font-size:.9rem;line-height:1.5;color:#4A5468}
  body .why-item .why-m{display:block;margin-top:auto;padding:.7rem 0 0;border-left:0;border-top:1px dashed color-mix(in srgb,var(--w) 40%,transparent);
    font-family:var(--serif);font-style:italic;font-size:.98rem;line-height:1.35;color:var(--w)}
  body .why-item p:not(.why-m){margin-bottom:.9rem}
  body .why-list{gap:.8rem;padding-bottom:1rem}
  body .why-dots{display:flex;justify-content:center;gap:.4rem;margin-top:.1rem}
  body .why-dots i{width:6px;height:6px;border-radius:50%;background:rgba(22,41,74,.18);transition:width .3s,background .3s}
  body .why-dots i.on{width:18px;border-radius:3px;background:#876830}
}
@media(min-width:720px){.why-dots{display:none}}
@media(max-width:719px){body .why-item:not(:has(.why-card)){padding:1.1rem 1.1rem 1.15rem}}