@font-face { font-family:'Literata'; font-style:normal; font-weight:400 600; font-display:swap; src:url('/assets/fonts/literata-latin.woff2') format('woff2'); }
@font-face { font-family:'Literata'; font-style:italic; font-weight:400; font-display:swap; src:url('/assets/fonts/literata-italic-latin.woff2') format('woff2'); }
@font-face { font-family:'Albert Sans'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/assets/fonts/albert-sans-latin.woff2') format('woff2'); }
/* Shared foundation for the three homepage directions.
   Colours are measured from the logo file (see PROJECT_CHARTER.md). */
:root {
  --pod-green: #0DB04B;   /* exact logo green  */
  --leaf-lime: #D6DE28;   /* exact logo lime   */
  --beak-red:  #EC1652;   /* exact logo red    */
  --logo-ink:  #221F1F;   /* exact wordmark    */

  --ink:        #15291D;  /* body text: the logo green taken almost to black */
  --ink-soft:   #46584C;  /* secondary text */
  --floor:      #FFFFFF;
  --floor-tint: #F3F6F1;  /* a breath of the green in white */
  --line:       #DCE4DC;

  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --measure: 62ch;
  --bar-h: 0px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--floor); color: var(--ink); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; padding-bottom: var(--bar-h); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--leaf-lime); color: var(--ink); }
.wrap { width: min(100% - 2 * var(--gutter), 72rem); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .7rem 1rem; z-index: 100; }
.skip:focus { left: .5rem; top: .5rem; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Header ---------- */
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand img { width: 44px; height: 44px; }
.brand-name { font-weight: 650; letter-spacing: .005em; line-height: 1.1; font-size: 1.05rem; }
.brand-name small { display: block; font-weight: 400; font-size: .8rem; color: var(--ink-soft); letter-spacing: 0; }
.head-actions { display: flex; align-items: center; gap: 1.1rem; }
.head-phone { display: none; text-decoration: none; font-weight: 550; font-variant-numeric: tabular-nums; }
.head-phone:hover { text-decoration: underline; text-underline-offset: .2em; }
.head-nav { display: none; gap: 1.5rem; }
.head-nav a { text-decoration: none; font-size: .98rem; }
.head-nav a:hover { text-decoration: underline; text-decoration-color: var(--pod-green); text-decoration-thickness: 2px; text-underline-offset: .35em; }
@media (min-width: 62rem) { .head-nav { display: flex; } }
@media (min-width: 40rem) { .head-phone { display: inline; } }

/* ---------- The one action ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .7rem 1.35rem; border-radius: 999px; font: inherit; font-weight: 650; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.btn-visit { background: var(--beak-red); color: #000; }
.btn-visit:hover { background: var(--beak-red); box-shadow:inset 0 0 0 2px #000; }
.btn-secondary { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-secondary:hover { background: var(--ink); color: #fff; }
.btn-small { min-height: 42px; padding: .45rem 1.05rem; font-size: .95rem; }
.action-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* Hero: reveal left 70% to right 70% at a fixed scale, then hold. */
.zoom { overflow: hidden; position: relative; background: var(--floor-tint); }
.zoom img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); will-change: auto; }
@media (prefers-reduced-motion: no-preference) {
  .motion-ok .zoom img { transform-origin:0 50%; animation: hero-pan 24s linear 1 forwards; will-change: transform; }
  .motion-ok.motion-paused .zoom img { animation-play-state: paused; }
}
@keyframes hero-pan {
  from { transform:translate3d(0,0,0) scale(1.42857143); }
  to { transform:translate3d(-42.857143%,0,0) scale(1.42857143); }
}

/* ---------- Instagram: slow drifting mosaic ---------- */
.mosaic { --tile: clamp(156px, 32vw, 250px); --gap: 10px; overflow: hidden; padding-block: .25rem;  }
.mosaic-track { display: flex; width: max-content; gap: var(--gap); }
.mosaic-set { display: grid; grid-template-rows: repeat(2, var(--tile)); grid-auto-columns: var(--tile); grid-auto-flow: column dense; gap: var(--gap); }
.mosaic-set li { overflow: hidden; border-radius: 6px; background: var(--floor-tint); }
.mosaic-set li.big { grid-row: span 2; grid-column: span 2; }
.mosaic-set li.wide { grid-column: span 2; }
.mosaic-set li.tall { grid-row: span 2; }
.mosaic-set img { width: 100%; height: 100%; object-fit: cover;  }
/* Native horizontal scrolling supports touch, keyboard and arrow controls. */
.mosaic { overflow-x:auto; scrollbar-width:thin; }
.mosaic-running { scrollbar-width:none; }
.mosaic:not(.mosaic-running) .mosaic-set[aria-hidden="true"] { display:none; }
.mosaic-set .mosaic-lime { background:var(--leaf-lime); }
.mosaic-set .mosaic-green { background:var(--pod-green); }
.mosaic-set .mosaic-pink { background:var(--beak-red); }
.mosaic-set a { display:block; height:100%; }
.mosaic-set a:focus-visible { outline:3px solid var(--ink); outline-offset:-5px; }
.mosaic-directions { display:flex; gap:.65rem; }
.mosaic-directions[hidden] { display:none; }
.mosaic-arrow { width:52px; height:52px; border:1px solid var(--pod-green); border-radius:50%; background:white; color:var(--ink); font-size:1.65rem; cursor:pointer; }
.mosaic-arrow:hover { background:var(--floor-tint); }
.mosaic-arrow:disabled { opacity:.35; cursor:default; }
.insta-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: 1.4rem; }

/* ---------- Phone action bar ---------- */
.action-bar { position: fixed; inset: auto 0 0 0; z-index: 50; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.action-bar a { display: flex; align-items: center; justify-content: center; gap: .3rem; min-width: 0; padding-inline: .2rem; min-height: 56px; text-decoration: none; font-weight: 650; font-size: clamp(.8rem, 3.5vw, .98rem); white-space: nowrap; }
.action-bar a + a { border-left: 1px solid var(--line); }
.action-bar .go { background: var(--beak-red); color: #000; border-left: 0; }
.action-bar svg { width: 20px; height: 20px; flex: none; }
@media (max-width: 47.99rem) { :root { --bar-h: calc(56px + env(safe-area-inset-bottom)); } }
@media (min-width: 48rem) { .action-bar { display: none; } }

/* ---------- Visit block + footer ---------- */
.visit-facts { display: grid; gap: 1.4rem; }
.visit-facts dt { font-weight: 650; margin-bottom: .2rem; }
.visit-facts dd a { text-underline-offset: .22em; }
.site-foot { background: var(--ink); color: #E6EDE6; padding-block: 2.6rem 2.2rem; font-size: .95rem; line-height: 1.6; }
.site-foot a { color: #fff; text-underline-offset: .22em; }
.foot-grid { display: grid; gap: 1.8rem; }
@media (min-width: 48rem) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.foot-note { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.16); color: #B8C6BA; font-size: .85rem; }

/* ---------- Embedded Google Forms ---------- */
.google-form { width: 100%; max-width: 640px; margin-top: 2rem; }
/* The frame's empty outer gutter may extend a few pixels past a small viewport. */
.tlp:has(.google-form) { overflow-x: clip; }
/* Google centres its cards within 90% of the frame. Offset that outer gutter
   so the cards share the page's left edge; Google's field padding stays intact. */
.google-form iframe { display: block; width: 111.111111%; margin-left: -5.555556%; height: 1140px; border: 0; }
.google-form--workshop iframe { height: 1070px; }
.tlp .visit-grid > div { min-width: 0; }
@media (max-width: 40rem) {
 .google-form iframe { height: 1210px; }
 .google-form--workshop iframe { height: 1300px; }
}
@media (max-width: 22.5rem) { .google-form--workshop iframe { height: 1420px; } }

/* flagged placeholders — visible only on the preview */
.todo { background:rgb(236 22 82 / .04); color:var(--beak-red); border-radius:4px; padding:0 .3em; font-style:italic; font-weight:700; font-size:max(1em, 1.1875rem); box-decoration-break:clone; -webkit-box-decoration-break:clone; }

/* Chosen structure and reading voice from Direction A. */
.tlp { font-family: 'Literata', Georgia, serif; font-size: 1.0625rem; line-height: 1.68; font-optical-sizing: auto; }
.tlp .site-head, .tlp .btn, .tlp .action-bar, .tlp .site-foot, .tlp .hours, .tlp figcaption, .tlp .visit-facts { font-family: 'Albert Sans', system-ui, sans-serif; }
.tlp h1, .tlp h2, .tlp h3 { font-weight: 500; letter-spacing: -.012em; text-wrap: balance; }
.tlp h1 { font-size:clamp(2.6rem,4.55vw,4.16rem); line-height:1.16; color:var(--pod-green); }
.tlp h2 { font-size:clamp(2.145rem,3.575vw,3.25rem); line-height:1.22; color:#000; }
.tlp h2:not(.vh):not(.sr-only) > .heading-highlight { background:var(--leaf-lime); -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.tlp h3 { font-size: clamp(1.3rem, 3vw, 1.65rem); line-height: 1.25; }
.tlp p { max-width: var(--measure); text-wrap: pretty; }
.tlp figcaption { font-size: .88rem; line-height: 1.45; color: var(--ink-soft); padding-top: .65rem; }
.tlp .sec-lede { margin-top: 1rem; color: var(--ink-soft); }
.tlp .text-link { font-weight: 600; text-decoration-color: var(--pod-green); text-decoration-thickness: 2px; text-underline-offset: .3em; }

/* hero: the photograph is left alone; words sit beneath it */
.tlp .hero-photo .zoom { aspect-ratio: 4 / 3; max-height: 76vh; width: 100%; }
@media (min-width: 48rem) { .tlp .hero-photo .zoom { aspect-ratio: 16 / 8; } }
.tlp .hero-photo .zoom img { object-position: 50% 62%; }
.tlp .hero-words { display: grid; gap: 1.4rem; padding-block: clamp(1.6rem, 5vw, 3.4rem) clamp(3rem, 8vw, 6rem); }
.tlp .hero-side p { max-width: none; margin-bottom: 1.5rem; }

/* what you will notice */
.tlp .notice > h2 { max-width: none; margin-bottom: clamp(2rem, 6vw, 4rem); }
.tlp .obs { display: grid; gap: 1.4rem; margin-bottom: clamp(3rem, 9vw, 6.5rem); }
.tlp .obs h3 { margin-bottom: .7rem; }
.tlp .obs img { border-radius: 3px; }
@media (min-width: 56rem) {
  .tlp .obs { grid-template-columns: 7fr 5fr; gap: 4.5rem; align-items: center; }
  .tlp .obs.flip { grid-template-columns: 5fr 7fr; }
  .tlp .obs.flip figure { order: 2; }
  .tlp .obs:nth-of-type(3) { grid-template-columns: 5fr 6fr; }
  .tlp .obs:nth-of-type(3) figure { max-width: 30rem; }
}

/* programmes as a contents page, not cards */
.tlp .programmes { background: var(--floor-tint); padding-block: clamp(3rem, 9vw, 6rem); }
.tlp .prog-list { margin-top: 2.4rem; border-top: 1px solid var(--line); }
.tlp .prog-list .prog-row { display: grid; grid-template-columns: 4.6rem 1fr; column-gap: 1rem; row-gap: .15rem; padding-block: 1.5rem; border-bottom: 1px solid var(--line); text-decoration: none; }
.tlp .ages { grid-row: span 2; font-size: 1.9rem; line-height: 1.1; font-weight: 500; color: var(--ink); font-variant-numeric: lining-nums; white-space: nowrap; }
.tlp .prog-name { font-weight: 600; font-size: 1.2rem; line-height: 1.3; }
.tlp .prog-line { color: var(--ink-soft); }
.tlp .hours { font-size: .92rem; color: var(--ink-soft); }
@media (min-width: 56rem) {
  .tlp .prog-list .prog-row { grid-template-columns: 9rem 1.1fr 1.6fr; align-items: baseline; column-gap: 2rem; padding-block: 1.9rem; }
  .tlp .ages { grid-row: auto; font-size: 2.6rem; }
}

/* quote */
.tlp .quote { padding-block: clamp(3.5rem, 10vw, 7rem); }
.tlp .quote .school-statement { margin: 0; max-width: 46rem; margin-inline: auto; border-left: 3px solid var(--leaf-lime); padding-left: clamp(1.1rem, 4vw, 2.2rem); }
.tlp .quote p { font-size: clamp(1.35rem, 3.4vw, 1.95rem); line-height: 1.4; font-style: italic; max-width: none; }
.tlp.montessori-page .quote p { font-size: clamp(1.05rem, 2.2vw, 1.25rem); }
.tlp .quote footer { margin-top: 1.1rem; font-size: .95rem; color: var(--ink-soft); }

/* educators */
.tlp .educators { display: grid; gap: 2rem; padding-bottom: clamp(3.5rem, 10vw, 7rem); }
.tlp .edu-words p { margin-top: 1rem; }
.tlp .educators img { border-radius: 3px; }
@media (min-width: 56rem) { .tlp .educators { grid-template-columns: 6fr 5fr; gap: 4.5rem; align-items: center; } }

.tlp .insta { padding-bottom: clamp(3.5rem, 10vw, 7rem); }

/* visit */
.tlp .visit { background: var(--floor-tint); padding-block: clamp(3rem, 9vw, 6rem); }
.tlp .visit-grid { display: grid; gap: 3rem; }
@media (min-width: 56rem) { .tlp .visit-grid { grid-template-columns: 6fr 4fr; gap: 5rem; } }
.tlp .or { margin-top: 1.4rem; font-size: 1rem; }
.tlp .or a, .tlp .visit-facts a { text-decoration-color: var(--pod-green); text-decoration-thickness: 2px; }

/* The settled blend: A's page, B's green mat binding, C's day sequence. */
:root { --measure: 59ch; }
html { scroll-padding-top: 1rem; }
body { overflow-wrap: break-word; }
[hidden] { display:none !important; }
button, input, textarea, select { font:inherit; }
button { touch-action:manipulation; }
.icon { width:22px; height:22px; flex:none; vertical-align:middle; }
.icon-link { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; }
.action-bar .wa .whatsapp-icon { width:24px; height:24px; }
.tlp .site-head { display:grid; grid-template-columns:1fr auto; column-gap:1rem; row-gap:0; padding-block:1rem 0; }
.brand-name { font-size:1.15rem; }
.brand-name small { margin-top:.24rem; }
.navigation { grid-column:1 / -1; font-family:'Albert Sans',sans-serif; border-top:1px solid var(--line); margin-top:1rem; }
.navigation summary { list-style:none; cursor:pointer; display:flex; gap:1rem; justify-content:space-between; min-height:44px; align-items:center; font-weight:600; }
.navigation summary::-webkit-details-marker { display:none; }
.navigation nav { display:grid; gap:0; padding-bottom:.6rem; }
.navigation nav a { min-height:44px; display:flex; align-items:center; text-decoration:none; }
.navigation nav a:hover, .navigation [aria-current] { text-decoration:underline; text-decoration-color:var(--pod-green); text-decoration-thickness:2px; text-underline-offset:.35em; }
@media(min-width:64rem) {
 .navigation { min-height:calc(44px + .5rem + 1px); }
 .js .navigation summary { display:none; }
 .navigation nav { display:flex; gap:clamp(1rem, 2.4vw, 2.3rem); padding-block:.25rem; justify-content:flex-end; }
 .site-head { padding-top:1.2rem; }
}
@media(max-width:39.99rem) {
 .brand img { width:35px; height:35px; }
 .brand { gap:.45rem; }
 .brand-name { font-size:.96rem; }
 .brand-name small { font-size:.7rem; }
 .head-actions .btn { padding:.4rem .8rem; font-size:.88rem; }
 .site-head { column-gap:.5rem; }
}
.mat { display:block; border:4px solid var(--pod-green); border-radius:10px; overflow:hidden; background:var(--floor-tint); }
.mat picture, .mat img { display:block; width:100%; }
.hero-photo { padding-top:1.5rem; }
.hero-frame { width:min(100% - 2 * var(--gutter), 1280px); margin-inline:auto; position:relative; isolation:isolate; }
.hero-frame::before { content:''; position:absolute; z-index:-1; width:24%; height:26px; right:8px; top:-13px; background:var(--leaf-lime); clip-path:polygon(22% 0,100% 0,78% 100%,0 100%); border-radius:4px; }
.tlp .hero-photo .zoom { aspect-ratio:4 / 3; max-height:none; border-width:5px; }
.zoom picture { display:block; height:100%; }
@media(min-width:48rem) { .tlp .hero-photo .zoom { aspect-ratio:16 / 8; } }
.tlp figcaption { max-width:65ch; }
.tlp .hero-photo figcaption { max-width:72rem; }
.hero-caption { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
/* Reserve the small control's space before JS enables it; no layout shift. */
.tlp .hero-words { padding-top:1.25rem; }
@media (min-width:64rem) {
 .tlp h1 { font-size:clamp(2.6rem,4vw,3.3rem); }
 .tlp.home-page .hero-words h1 { white-space:nowrap; }
}
.tlp .obs p { margin-top:.8rem; }
.day-link { margin-top:1.25rem; }
.programme-notice { margin-top:1.2rem; font-family:'Albert Sans',sans-serif; font-size:.94rem; }
.tlp .prog-list { margin-top:1.7rem; }
@media(min-width:56rem) {
 .tlp .prog-list .prog-row { grid-template-columns:6rem 1.1fr 1.4fr; gap:1.5rem; }
 .tlp .prog-name { font-size:1.12rem; }
}
.site-foot { background:var(--floor); color:var(--ink); border-top:1px solid var(--line); padding-block:3rem 2.2rem; }
.site-foot a { color:var(--ink); }
.foot-brand { font-size:1.3rem; font-weight:650; text-decoration:none; }
.foot-address { margin-top:1.2rem; }
.foot-links { display:grid; align-content:start; gap:.3rem; }
.foot-links a { min-height:32px; }
.foot-note { color:var(--ink-soft); border-top:1px solid var(--line); max-width:none !important; }
.visit-facts { align-content:start; padding-top:.4rem; }
.visit-facts dd p { margin-top:.7rem; }
.visit-logistics { margin-top:1rem; font-size:.94rem; }
.form-after { margin-top:1.2rem; font-size:.94rem; }
.btn:disabled { cursor:wait; opacity:.7; }
.insta-head p { font-size:.95rem; color:var(--ink-soft); margin-top:.65rem; }
.mosaic picture { display:block; height:100%; }
.mosaic:focus-visible { outline-offset:-3px; }
.mosaic-controls { margin-top:1.25rem; display:flex; align-items:center; justify-content:center; gap:1rem; }
.motion-toggle { background:white; color:var(--ink); border:1px solid var(--pod-green); border-radius:99px; padding:.6rem 1rem; min-height:44px; font:500 .95rem 'Albert Sans',sans-serif; cursor:pointer; }
.mosaic:not(.mosaic-running) { overflow-x:auto; scrollbar-width:thin; }

.page-intro { padding-block:clamp(2.3rem,6vw,4.7rem) clamp(2.4rem,6vw,4rem); }
.page-intro h1 { max-width:21ch; margin-top:0; }
.page-intro .lede { margin-top:1.4rem; max-width:54ch; color:var(--ink-soft); font-size:clamp(1.08rem,2.3vw,1.22rem); }
.breadcrumb { font-family:'Albert Sans',sans-serif; font-size:.95rem; text-underline-offset:.3em; text-decoration-color:var(--pod-green); }
.with-photo { display:grid; gap:2.5rem; align-items:center; }
.with-photo .mat { aspect-ratio:4 / 3; }
.with-photo .mat img, .with-photo .mat picture { height:100%; object-fit:cover; }
.programme-facts { margin-block:1.5rem; font-family:'Albert Sans',sans-serif; font-size:1rem; }
.programme-facts p { display:flex; gap:1rem; }
.programme-facts .todo { background:rgb(236 22 82 / .04); color:var(--beak-red); border-radius:4px; padding:0 .3em; font-style:italic; font-weight:700; font-size:max(1em, 1.1875rem); box-decoration-break:clone; -webkit-box-decoration-break:clone; }
@media(min-width:56rem) { .with-photo { grid-template-columns:1.08fr 1fr; gap:4rem; } .with-photo .mat { aspect-ratio:4 / 5; } }
.prose { padding-bottom:4.5rem; }
.prose > * { max-width:46rem; }
.tlp .prose h2 { margin-block:2.4rem 1rem; }
.prose p + p { margin-top:1.2rem; }
.prose > .todo, .prose > p > .todo { background:rgb(236 22 82 / .04); color:var(--beak-red); border-radius:4px; padding:0 .3em; font-style:italic; font-weight:700; font-size:max(1em, 1.1875rem); box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.prose ol { list-style:decimal; padding-left:1.5rem; }
.prose ul { list-style:disc; padding-left:1.5rem; }
.prose li { margin-block:1rem; padding-left:.3rem; }
.prose a { text-decoration-color:var(--pod-green); text-underline-offset:.22em; }
.prose strong { font-weight:600; }
.related { padding-bottom:4rem; }
.programmes-index { margin-bottom:2.5rem; }
.compact-visit .action-row { margin-top:1.6rem; }
.faq-list { padding-bottom:4rem; }
.tlp .faq-intro :is(h1, .lede), .tlp .faq-list p { max-width:none; }
.faq-list details { border-bottom:1px solid var(--line); }
.faq-list details:first-of-type { border-top:1px solid var(--line); }
.faq-list summary { padding:1.4rem 2rem 1.4rem 0; cursor:pointer; font-weight:500; font-size:1.17rem; position:relative; list-style:none; line-height:1.5; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:'+'; position:absolute; right:.2rem; top:1.4rem; color:var(--ink); font-family:'Albert Sans',sans-serif; }
.faq-list details[open] summary::after { content:'−'; }
.faq-list details > div { padding-bottom:1.5rem; }
.faq-list details > div p + p { margin-top:1rem; }
.faq-note { font-size:.95rem; color:var(--ink-soft); margin-bottom:1.6rem; }
.day-note { margin-top:1.7rem; font-family:'Albert Sans',sans-serif; font-size:.95rem; }
.timeline { position:relative; display:grid; gap:clamp(2.5rem,6vw,4.8rem); margin-bottom:3rem; }
.timeline::before { content:''; position:absolute; left:.45rem; top:.8rem; bottom:0; width:2px; background:var(--pod-green); }
.moment { position:relative; padding-left:2rem; display:grid; gap:1rem; }
.moment::before { content:''; position:absolute; left:0; top:.6rem; width:1rem; height:1rem; border:3px solid var(--pod-green); border-radius:50%; background:white; }
.moment-label { font:inherit; font-size:clamp(1.6rem,2.5vw,2rem); font-style:italic; color:var(--ink); line-height:1.25; }
.tlp .moment h2 { margin-bottom:.8rem; }
.moment .mat { aspect-ratio:4 / 3; }
.moment picture, .moment img { height:100%; width:100%; object-fit:cover; }
.moment-note { font:400 .9rem/1.5 'Albert Sans',sans-serif; margin-top:.8rem; }
@media(min-width:56rem) {
 .timeline::before { left:50%; margin-left:-1px; }
 .moment { grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr; gap:1rem 5rem; padding-left:0; }
 .moment::before { left:50%; margin-left:-.5rem; }
 .moment-label { grid-column:1; text-align:left; }
 .moment-body { grid-column:1; text-align:left; }
 .moment figure { grid-column:2; grid-row:1 / span 2; }
 .moment.right .moment-label, .moment.right .moment-body { grid-column:2; text-align:left; }
 .moment.right figure { grid-column:1; }
}
@media(max-width:22rem) { .action-bar a { font-size:.85rem; gap:.25rem; } .action-bar svg { width:18px; } .brand-name small { font-size:.62rem; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }

/* Centred controls: matching logo-green arrows and a lime pause button. */
.mosaic-controls .mosaic-directions { gap:.75rem; align-items:center; }
.mosaic-controls button { display:grid; place-items:center; width:56px; height:56px; padding:0; border:0; border-radius:12px; color:var(--ink); }
.mosaic-controls button[hidden] { display:none; }
.mosaic-controls button[data-direction] { background:var(--pod-green); color:var(--ink); }
.mosaic-controls .mosaic-pause { background:var(--leaf-lime); }
.mosaic-controls button svg { width:28px; height:28px; }
.mosaic-controls button:hover { box-shadow:inset 0 0 0 2px var(--ink); }
.mosaic-pause .play-glyph, .mosaic-pause[aria-pressed="true"] .pause-glyph { display:none; }
.mosaic-pause[aria-pressed="true"] .play-glyph { display:block; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

.school-highlight { color:var(--beak-red); }
.insta-head { align-items:center; gap:1.25rem 2rem; }
.instagram-profile .instagram-icon { width:24px; height:24px; }

@media(max-width:25rem) { .insta-head .instagram-profile { font-size:.95rem; } }

.tlp .ages { justify-self:start; }
.tlp .ages .age-unit { display:block; margin-top:.35rem; text-align:center; font:400 1rem/1.3 'Albert Sans',sans-serif; color:var(--ink-soft); }

.prose-with-photo { display:grid; gap:2.5rem; align-items:start; padding-bottom:4rem; }
.prose-with-photo .prose { padding-bottom:0; min-width:0; }
.prose-photo .mat { aspect-ratio:4 / 5; }
.prose-photo .mat picture, .prose-photo .mat img { display:block; width:100%; height:100%; object-fit:cover; }
@media(min-width:56rem) {
 .prose-with-photo { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:4rem; }
 .prose-photo { position:sticky; top:2rem; margin-top:2.4rem; }
}

.tlp .hero + .insta { padding-top:clamp(1.5rem,3vw,3rem); }

/* An existing school photograph balances the Programs introduction. */
.programmes-intro { display:grid; gap:2rem; align-items:center; }
.programmes-intro-photo { min-width:0; }
.programmes-intro-photo .mat { aspect-ratio:4 / 3; }
.programmes-intro-photo picture, .programmes-intro-photo img { width:100%; height:100%; object-fit:cover; object-position:50% 44%; }
@media(min-width:56rem) {
  .programmes-intro { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(2rem,5vw,4rem); }
}

/* Editable profile templates use the existing photograph frames and palette. */
.educator-introduction { padding-bottom:1rem; }
.team > h2 { max-width:none; }
.team-note { margin-top:1.2rem; max-width:65ch; }
.educator-profile { display:grid; gap:2rem; padding-block:2.8rem; border-bottom:1px solid var(--line); align-items:start; }
.educator-profile .mat { aspect-ratio:4 / 5; }
.educator-profile img { width:100%; height:100%; object-fit:cover; object-position:50% 35%; }
.educator-profile .profile-photo--right { object-position:85% 35%; }
.educator-profile figcaption { margin-top:.75rem; }
.profile-copy { min-width:0; }
.tlp .profile-copy h3 { font-size:clamp(1.6rem,3vw,2.25rem); margin-top:.8rem; }
.profile-role { font:600 1.15rem/1.4 'Albert Sans',sans-serif; margin-top:.35rem; }
.profile-qualification { font:400 1rem/1.5 'Albert Sans',sans-serif; color:var(--ink-soft); margin-top:.7rem; }
.profile-copy > p + p { margin-top:1.2rem; }
.sample-label { display:inline-block; font:600 .875rem/1.4 'Albert Sans',sans-serif; background:var(--leaf-lime); color:var(--ink); padding:.35rem .65rem; border-radius:4px; }
.profile-review { margin-top:1.4rem; }
.educator-closing { padding-block:1rem 4rem; }
@media(min-width:56rem) {
 .educator-profile { grid-template-columns:minmax(0, .75fr) minmax(0, 1.25fr); gap:clamp(2rem,5vw,4.5rem); }
}

/* Homepage copy update, October 2026: retain the shared photo and type treatments. */
.tlp .learning-intro { margin-bottom: clamp(2rem, 6vw, 4rem); }
.tlp .learning-invitation { padding-bottom: clamp(3rem, 8vw, 5rem); }
.tlp .learning-invitation > p { margin-top: 1.5rem; }
.tlp .home-guide, .tlp .home-workshop { padding-bottom: clamp(3.5rem, 10vw, 7rem); }
.tlp .home-guide p, .tlp .home-workshop p { margin-top: 1.5rem; }
.tlp .home-guide p { max-width: 65ch; }
.tlp .home-workshop .btn { margin-top: 1.5rem; }
.tlp .home-gallery { padding-top: 0; }
.tlp .home-programmes .prog-list .prog-row { grid-template-columns: 6rem 1fr; }
@media (min-width: 56rem) {
 .tlp .home-programmes .prog-list .prog-row { grid-template-columns: 9rem 1.1fr 1.6fr; }
}

/* Homepage overview: reuse the existing type, palette and animated gallery. */
.tlp { --home-link-width: 19rem; --home-link-gap: clamp(.75rem, 2vw, 1.5rem); }
.home-explore { padding-block: clamp(3rem, 7vw, 5rem); }
.home-observations { display: grid; gap: clamp(2rem, 5vw, 3.5rem); margin-top: 2rem; }
.home-observation { display: grid; gap: 1.5rem; align-items: center; }
.home-observation .obs-words p { margin-top: 1rem; }
.explore-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--home-link-gap); width: 100%; max-width: calc(3 * var(--home-link-width) + 2 * var(--home-link-gap)); margin-inline: auto; margin-top: clamp(2rem, 5vw, 3.5rem); }
.explore-links > li { min-width: 0; }
.explore-tile, .home-link-button { display: inline-flex; justify-content: center; align-items: center; gap: .6rem; max-width: 100%; padding: 1rem 1.25rem; border: 2px solid transparent; border-radius: 999px; color: #000; font: 650 clamp(1.1rem, 1.6vw, 1.25rem)/1.4 'Albert Sans', sans-serif; text-align: center; text-decoration: none; }
.explore-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; height: 100%; min-height: 6.5rem; }
.home-link-button { width: min(var(--home-link-width), calc((100% - 2 * var(--home-link-gap)) / 3)); min-height: 3.5rem; }
.tlp .home-programmes .day-link, .tlp .home-more .day-link { max-width: none; }
.explore-tile > span:first-child, .home-link-button > span:first-child { text-wrap: balance; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.explore-tile:hover, .home-link-button:hover { border-color: var(--ink); }
.explore-tile-green, .home-link-button { background: var(--pod-green); color: #fff; }
.explore-tile-lime { background: var(--leaf-lime); }
.explore-tile-pink { background: var(--beak-red); color: #fff; }
@media (min-width: 56rem) {
 .home-observation { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(2rem, 5vw, 4rem); }
}
@media (max-width: 39.99rem) {
 .explore-links { grid-template-columns: 1fr; max-width: var(--home-link-width); }
 .home-link-button { width: min(100%, var(--home-link-width)); }
}
.home-more p { margin-top: 1rem; }
.tlp .home-gallery { padding-bottom: 2.5rem; }
.home-more { padding-block: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--line); }
.tlp.home-page .hero-words { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.tlp.home-page .home-programmes,
.tlp.home-page .compact-visit { padding-block: clamp(2rem, 5vw, 3.5rem); }
.tlp.home-page .home-explore { padding-block: clamp(2rem, 4.5vw, 3rem); }
.tlp.home-page .home-gallery { padding-bottom: 1.5rem; }
.tlp.home-page .home-more { padding-block: clamp(1.5rem, 3vw, 2rem); }
.montessori-intro p { margin-top: 1.25rem; }
.tlp .montessori-intro { row-gap:1.25rem; }
.tlp .montessori-intro > h1 { grid-column:1 / -1; max-width:none; margin-bottom:0; }
@media (min-width:56rem) {
 .tlp .montessori-intro > h1 { white-space:nowrap; }
}
.montessori-media { padding-top: clamp(1rem, 3vw, 2rem); }
.montessori-media { padding-bottom: clamp(3rem, 7vw, 5rem); }
.montessori-videos { display: grid; gap: 2rem; }
.video-embed { aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--floor-tint); }
.video-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.montessori-videos h3 { margin-top: 1rem; }
@media (min-width: 48rem) { .montessori-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-admissions { padding-top: clamp(2.3rem, 6vw, 4.7rem); }
.contact-admissions > h1 { margin-bottom: 1.5rem; }
.contact-admissions .prose { max-width: none; display: flow-root; }
.tlp .contact-admissions .prose h2 { margin-top: 2rem; }
.tlp .contact-admissions .prose h2:first-child { margin-top: 0; }

/* Use the supplied complete wordmark without an additional tagline. */
.tlp .site-head { grid-template-columns: minmax(0, 1fr) auto; }
.brand { flex-direction: column; align-items: flex-start; gap: .35rem; width: 100%; max-width: 17.5rem; }
.brand .brand-logo { width: 100%; height: auto; }
@media (max-width: 39.99rem) {
 .site-head .brand { max-width: 13rem; }
}

.tlp .obs-words strong, .tlp .learning-invitation strong { font-weight: 600; }

/* Day timeline: multiple archive photographs, including a picture-only work section. */
.day-intro .lede p + p { margin-top: 1rem; }
.tlp .day-intro :is(h1, .lede, .lede p) { max-width:none; }
.moment-photos { display: grid; gap: 1rem; min-width: 0; align-content: start; }
.moment .moment-colour-tile { background: var(--pod-green); }
.tlp .moment-gallery-heading { margin-bottom:0; }
@media (min-width: 56rem) {
 .moment-photos { grid-column: 2; grid-row: 1 / span 2; }
 .moment.right .moment-photos { grid-column: 1; }
 .moment .moment-photos figure, .moment.right .moment-photos figure { grid-column: auto; grid-row: auto; }
 .moment.moment-gallery-only .moment-gallery-heading { grid-column: 1 / -1; }
 .moment.moment-gallery-only .moment-photos { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 5rem; }
 .moment.moment-centred { grid-template-rows: 1fr auto auto 1fr; }
 .moment-centred .moment-label { grid-row: 2; }
 .moment-centred .moment-body { grid-row: 3; }
 .moment-centred .moment-photos { grid-row: 1 / span 4; }
}

/* Supplied school story, using the existing type and photograph treatment. */
.story-intro { align-items: start; }
.story-copy p { margin-top: 1.3rem; }
.story-copy h1 + p { margin-top: 1.6rem; }
.story-copy h2 { margin-top: 2.2rem; }
.tlp .prog-list .prog-row { grid-template-columns: 6rem minmax(0, 1fr); }
@media (min-width: 56rem) {
 .story-intro { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
 .story-intro figure { position: sticky; top: 2rem; }
 .tlp .prog-list .prog-row { grid-template-columns: 9rem 1.1fr 1.6fr; }
}

/* One section rhythm throughout the site; adjacent halves form one gap. */
.tlp { --section-gap: clamp(2rem, 5vw, 3.5rem); --section-inset: calc(var(--section-gap) / 2); }
.tlp #main > :is(header, section, article, div):not(.hero) {
 margin-block: 0;
 padding-block: var(--section-inset);
}
.tlp #main > :first-child:not(.hero) { padding-top:1.25rem; }
.tlp #main > :last-child { padding-bottom: var(--section-gap); }
.tlp.home-page .hero-words { padding-bottom: var(--section-inset); }
.tlp #main > .hero + .insta { padding-top: var(--section-inset); }
.tlp .notice .obs { margin-bottom: var(--section-gap); }
.tlp .notice .obs:last-child { margin-bottom: 0; }
.tlp .timeline { gap: var(--section-gap); margin-bottom: 0; }
.tlp .contact-admissions .prose-with-photo { padding-bottom: 0; }
.tlp .home-observations { gap: var(--section-gap); }
.tlp .prose h2, .tlp .story-copy h2 { margin-top: var(--section-gap); }
.tlp .prose > h2:first-child,
.tlp .programmes-index > .prog-list { margin-top: 0; }

/* Matching, slightly smaller photo frames on Explore Montessori. */
.tlp.montessori-page :is(.montessori-intro, .obs) > figure { width:100%; max-width:25rem; justify-self:center; }
.tlp.montessori-page :is(.montessori-intro, .obs) .mat { aspect-ratio:4 / 3; }
.tlp.montessori-page :is(.montessori-intro, .obs) .mat :is(picture, img) { display:block; width:100%; height:100%; object-fit:cover; }
@media (min-width:56rem) {
 .tlp.montessori-page .obs,
 .tlp.montessori-page .obs:nth-of-type(3) { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:3rem; }
}

.tlp .quote-with-photo { display:grid; gap:2rem; align-items:center; }
.tlp .quote-with-photo figure { width:100%; max-width:25rem; justify-self:center; }
.tlp .quote-with-photo .school-statement { margin:0; max-width:none; }
.tlp .quote-with-photo figcaption { display:block; font-size:.8rem; color:var(--ink-soft); }
.tlp.montessori-page #main > .learning-invitation { padding-bottom:.5rem; }
.tlp.montessori-page .learning-invitation > p { max-width:none; }
.tlp.montessori-page #main > .home-workshop { padding-top:.5rem; }
.tlp.montessori-page .home-workshop .google-form { margin-top:0; max-width:none; }
.tlp.montessori-page .home-workshop .google-form iframe { width:100%; margin-left:0; }
@media (min-width:56rem) { .tlp .quote-with-photo { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:3rem; } }