/* ============================================================================
   Kidz R Os — public website. REBUILT.

   The old stylesheet had ONE systemic fault that surfaced on every page:

     * `.narrow` (760px, centred) and `.shell` (1140px) disagreed, so a heading
       and the cards beneath it hung off DIFFERENT left edges.
     * `auto-fit` grids produced ORPHANS everywhere — 3+1 tiles, 6+1 photos,
       6+1 testimonials. A grid that cannot divide evenly is the wrong grid.
     * Everything stacked full-width, so pages were tall and narrow inside a wide
       frame, and section padding doubled into ~136px of dead air.

   Fixed as a system, not page by page:

     1. ONE LEFT MARGIN. Everything hangs off `.shell`. Text is constrained with a
        max-WIDTH (`.measure`), never a centred container. The left edge never moves.
     2. NO auto-fit. Fixed column counts — 2, 3 or 4 — that divide evenly.
     3. TWO-COLUMN COMPOSITION as the default: primary left, secondary right.
     4. TIGHTER VERTICAL RHYTHM. Sections do not stack their padding.

   Colour and type are the CURRENT SITE'S, sampled from it:
     coral #F44345 (nav, accents) · periwinkle #556CB0 (headings and body)
   ============================================================================ */

@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-regular.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-medium.woff2) format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-semibold.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-bold.woff2) format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --coral:#F44345; --coral-700:#D8302F; --coral-50:#FEF0F0;
  --red:#ED1C24; --red-700:#C41219; --red-50:#FDECEC;
  --blue:#0088CB; --blue-700:#006DA3; --blue-50:#E6F4FB; --blue-100:#CFE9F7;
  --yellow:#FFCB05; --yellow-600:#E0B200; --yellow-50:#FFF8DE;
  --orange:#F5821F; --orange-700:#D96E10; --orange-50:#FEF1E4;
  --peri:#556CB0;  --peri-700:#3F5391;  --peri-50:#EEF1F8; --peri-100:#DDE3F1;
  --ink:#3F4E7E; --ink-2:#556CB0; --ink-3:#8592C4;
  --line:#E2E6F0; --line-2:#F0F2F8;
  --page:#FFF; --tint:#F7F8FC; --sand:#FFF6F0;
  --ok:#0E7A4B; --ok-bg:#E7F5EE; --ok-line:#BFE3D0;
  --warn:#B45309;

  --r:12px; --r-lg:16px;
  --sh:0 1px 3px rgba(63,78,126,.07);
  --sh-2:0 6px 22px rgba(63,78,126,.11);

  --sans:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --shell:1180px;
  --gap:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink-2);
  font:400 16.5px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}

/* THE container. Nothing else centres anything. */
.shell{max-width:var(--shell);margin:0 auto;padding:0 20px}
@media(min-width:768px){ .shell{padding:0 32px} }

/* A max-width on TEXT — not a centred box. The left edge stays put. */
.measure{max-width:64ch}

.skip{position:absolute;left:-9999px;background:var(--coral);color:#fff;padding:12px 18px;z-index:99}
.skip:focus{left:12px;top:12px}

/* ---------------------------------------------------------------- type */
h1{font-size:25px;line-height:1.25;font-weight:700;margin:0 0 14px;color:var(--peri);
  text-transform:uppercase;letter-spacing:.10em}
h2{font-size:21px;line-height:1.35;font-weight:600;margin:0 0 12px;color:var(--peri)}
h3{font-size:17px;line-height:1.45;font-weight:600;margin:0 0 7px;color:var(--peri)}
p{margin:0 0 15px}
@media(min-width:768px){
  h1{font-size:34px;letter-spacing:.11em}
  h2{font-size:24px}
  h3{font-size:18px}
}
.kicker{color:var(--coral);font-weight:600;font-size:12.5px;letter-spacing:.13em;
  text-transform:uppercase;margin:0 0 10px}
.lede{font-size:18px;line-height:1.65;color:var(--ink-2);margin:0 0 20px}
a{color:var(--coral);text-underline-offset:3px}
a:hover{color:var(--coral-700)}
ul,ol{margin:0 0 15px;padding-left:20px}
li{margin-bottom:7px}
ul.plain{list-style:none;padding:0}
ul.ticks{list-style:none;padding:0}
ul.ticks li{padding-left:26px;position:relative}
ul.ticks li::before{content:"";position:absolute;left:0;top:10px;width:13px;height:7px;
  border-left:2.5px solid var(--coral);border-bottom:2.5px solid var(--coral);
  transform:rotate(-45deg)}
address{font-style:normal}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2);font-size:14px}

/* ---------------------------------------------------------------- header */
.hdr{position:sticky;top:0;z-index:40;background:#fff;box-shadow:var(--sh)}
.hdr-top .shell{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-top:11px;padding-bottom:11px;flex-wrap:wrap}
/* The tagline and the contact row used to be desktop-only (hidden below 900px / 768px).
   Deepa's parents are overwhelmingly on phones, and the phone header showed neither who
   we are nor how to call - so both now show at every width, and always ON THE SAME ROW
   as the logo (Surajit: no additional lines). Three arrangements:
     <768px   a two-column grid: logo left, a compact right-aligned block (tagline,
              then the contact links) beside it. display:contents dissolves the .brand
              anchor's box so the logo and tagline can sit in separate grid cells; the
              logo itself is still a working link.
     768-899  one flex row: logo + tagline left, contact links right.
     >=900    the original desktop arrangement, unchanged. */
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;min-width:0}
.brand img{width:180px;height:auto}
.brand-t{display:block;color:var(--ink-3);font-weight:600;font-size:12px;line-height:1.35}
.hdr-c{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;align-items:center}
.hdr-c a{color:var(--ink-2);text-decoration:none;font-weight:500}
.hdr-c a:hover{color:var(--coral)}
@media(max-width:767px){
  .hdr-top .shell{display:grid;grid-template-columns:auto 1fr;align-items:center;
    column-gap:12px;row-gap:0}
  .brand{display:contents}
  .brand img{grid-column:1;grid-row:1 / span 2;width:124px}
  .brand-t{grid-column:2;grid-row:1;font-size:10.5px;text-align:right;margin-bottom:3px}
  .hdr-c{grid-column:2;grid-row:2;justify-content:flex-end;gap:2px 10px;font-size:11.5px}
}
@media(min-width:768px) and (max-width:899px){
  /* iPad portrait: everything on one row only fits with the logo a notch smaller and
     the text a point tighter - measured, not guessed: at full size the row is ~707px
     of a 720px shell and the contacts wrapped underneath. */
  .brand img{width:150px}
  .brand{gap:12px}
  .brand-t{font-size:11px}
  .hdr-c{font-size:12px;gap:6px 12px}
  .hdr-c a{white-space:nowrap}
}
@media(min-width:900px){
  .brand img{width:215px}
  .brand-t{border-left:1px solid var(--line);padding-left:14px;font-size:12.5px}
  .hdr-c{gap:18px;font-size:13.5px}
}

/* ---------------------------------------------------------------- nav */
.nav{background:var(--coral)}
.burger{display:block;background:none;border:0;color:#fff;padding:0;cursor:pointer;
  font:600 15px/1 var(--sans);min-height:52px}
/* Safari can mis-align flex items that are direct children of a <button>;
   doing the layout on an inner span makes the icon and label line up everywhere. */
.burger .b-in{display:flex;align-items:center;gap:10px;min-height:52px}
.burger .bars{display:flex;flex-direction:column;justify-content:center;gap:4px;
  width:20px;flex:0 0 20px}
.burger .bars span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;margin:0}
.burger .lbl{display:block;line-height:1}
#menu{list-style:none;margin:0;padding:0;display:none}
#menu.open{display:block;padding-bottom:12px}
#menu li{margin:0}
#menu .nav-home a{display:block;color:#fff;text-decoration:none;font:600 15px/1 var(--sans);
  padding:14px 2px;min-height:50px;border-top:1px solid rgba(255,255,255,.16)}
#menu .nav-home a[aria-current=page]{color:#FFF0B0}

/* Each group: a quiet label, then its items as pills that wrap. Short labels sit two or
   three to a row, long ones take the width they need — no truncation, no ragged columns. */
#menu .nav-grp{border-top:1px solid rgba(255,255,255,.16);padding:12px 2px 4px}
#menu .grp-lbl{display:block;color:rgba(255,255,255,.72);font:700 11px/1 var(--sans);
  text-transform:uppercase;letter-spacing:.09em;margin-bottom:9px}
#menu .grp-items{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
#menu .grp-items a{display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);color:#fff;text-decoration:none;
  font:600 14.5px/1.2 var(--sans);padding:12px 15px;border-radius:9px;min-height:46px;
  border:1px solid rgba(255,255,255,.18)}
#menu .grp-items a[aria-current=page]{background:#fff;color:var(--coral);border-color:#fff}
/* the one action the site exists for stays filled, even among its neighbours */
#menu .act-1{background:#fff!important;color:var(--coral)!important;font-weight:700!important;
  border-color:#fff!important;padding-left:22px!important;padding-right:22px!important}

@media(min-width:1000px){
  .burger{display:none}
  #menu{display:flex;align-items:center;flex-wrap:wrap}
  #menu .nav-home a{border-top:0;padding:0 14px;min-height:52px;display:flex;align-items:center;
    font-size:14.5px;white-space:nowrap}
  #menu .nav-home a:hover{background:var(--coral-700)}
  #menu .nav-home a[aria-current=page]{background:var(--coral-700);color:#fff}
  /* groups stay in the single bar; a hairline divider shows where one ends */
  #menu .nav-grp{border-top:0;padding:0;display:flex;align-items:center;
    border-left:1px solid rgba(255,255,255,.28);margin-left:10px;padding-left:10px}
  #menu .grp-lbl{display:none}
  #menu .grp-items{display:flex;gap:0}
  #menu .grp-items a{background:none;border:0;border-radius:0;padding:0 13px;min-height:52px;
    font-size:14.5px;white-space:nowrap;justify-content:flex-start}
  #menu .grp-items a:hover{background:var(--coral-700)}
  #menu .grp-items a[aria-current=page]{background:var(--coral-700);color:#fff;border-radius:0}
  #menu .nav-act{margin-left:auto;border-left:0;padding-left:0}
  #menu .nav-act .grp-items{gap:8px;align-items:center}
  #menu .act-1{background:#fff!important;color:var(--coral)!important;border-radius:8px!important;
    padding:0 20px!important;min-height:40px!important;font-weight:700!important}
  #menu .act-1:hover{background:#FFECEC!important;color:var(--coral-700)!important}
  #menu .act-2{border:1px solid rgba(255,255,255,.55)!important;border-radius:8px!important;
    padding:0 15px!important;min-height:40px!important}
  #menu .act-2:hover{background:rgba(255,255,255,.16)!important}
}

/* ---------------------------------------------------------------- sections */
section{padding:38px 0}
@media(min-width:768px){ section{padding:52px 0} }
section.tight{padding-top:0}
section.tint{background:var(--tint)}
section.sand{background:var(--sand)}
section.peri{background:var(--peri-50)}
.head{margin-bottom:26px}
.head p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- THE LAYOUT */
.split{display:grid;gap:30px}
/* Grid children default to min-width:auto, so a table inside REFUSES to shrink and pushes
   the column wider than the screen. This one line is the difference between a page that
   fits a phone and one that scrolls sideways. */
.split > *{min-width:0}
@media(min-width:900px){
  .split{grid-template-columns:1fr 370px;gap:44px;align-items:start}
  .split.wide-aside{grid-template-columns:1fr 460px}
  .split.even{grid-template-columns:1fr 1fr}
  .split.aside-left{grid-template-columns:340px 1fr}
}
.aside{position:sticky;top:118px}
@media(max-width:899px){ .aside{position:static} }

.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;box-shadow:var(--sh)}
.panel + .panel{margin-top:16px}
.panel h2{font-size:17px;margin-bottom:12px}
.panel p:last-child,.panel ul:last-child{margin-bottom:0}
.panel-peri{background:var(--peri-50);border-color:var(--peri-100)}
.panel-coral{background:var(--coral-50);border-color:#F7CFCF}
.panel-blue{background:var(--blue-50);border-color:var(--blue-100)}
.panel-yellow{background:var(--yellow-50);border-color:#F5E3A0}

/* ---------------------------------------------------------------- GRIDS
   Fixed counts. They divide evenly. No orphans, ever. */
.g2,.g3,.g4{display:grid;gap:var(--gap)}
/* .g2 and .g4 divide by 2. .g3 does NOT — so it must never pass through a 2-column stage,
   or 3 cards become 2 + 1 and we are back to orphans. It goes 1 -> 3, never 1 -> 2 -> 3. */
@media(min-width:640px){ .g2,.g4{grid-template-columns:repeat(2,1fr)} }
@media(min-width:860px){ .g3{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1000px){ .g4{grid-template-columns:repeat(4,1fr)} }
.g2 > *,.g3 > *,.g4 > *{min-width:0}

/* ---------------------------------------------------------------- cards */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;
  box-shadow:var(--sh);display:flex;flex-direction:column}
.card p:last-child{margin-bottom:0}

/* facts — 4 across, always divides */
.facts{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){ .facts{grid-template-columns:repeat(4,1fr)} }
.fact{background:#fff;border:1px solid var(--line);border-top:3px solid var(--line);border-radius:var(--r);padding:15px 17px;
  box-shadow:var(--sh)}
.fact dt{font:600 11px/1.3 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--coral);margin:0 0 6px}
.fact dd{margin:0;font-weight:600;font-size:19px;color:var(--peri);
  font-variant-numeric:tabular-nums;line-height:1.25}
.fact dd small{display:block;font-weight:400;font-size:12.5px;color:var(--ink-3);margin-top:4px}
.facts .fact:nth-child(1){border-top-color:var(--coral)}    .facts .fact:nth-child(1) dd{color:var(--coral)}
.facts .fact:nth-child(2){border-top-color:var(--blue)}   .facts .fact:nth-child(2) dd{color:var(--blue)}
.facts .fact:nth-child(3){border-top-color:var(--orange)} .facts .fact:nth-child(3) dd{color:var(--orange-700)}
.facts .fact:nth-child(4){border-top-color:var(--yellow)} .facts .fact:nth-child(4) dd{color:var(--peri)}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;
  padding:0 24px;border-radius:9px;font:600 15.5px/1 var(--sans);text-decoration:none;
  border:2px solid transparent;cursor:pointer;transition:background .14s,border-color .14s}
.btn-go{background:var(--coral);color:#fff}
.btn-go:hover{background:var(--coral-700);color:#fff}
.btn-1{background:var(--peri);color:#fff}
.btn-1:hover{background:var(--peri-700);color:#fff}
.btn-2{background:#fff;color:var(--peri);border-color:var(--line)}
.btn-2:hover{border-color:var(--peri);background:var(--peri-50)}
.btn-block{width:100%}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
/* On a phone, side-by-side buttons wrap into a ragged cluster. Full-width and
   stacked reads like an app, centres itself, and gives a bigger touch target. */
@media(max-width:560px){ .btns .btn{flex:1 1 100%} }

/* ---------------------------------------------------------------- vacancy */
.vac{border-radius:var(--r-lg);padding:17px 19px;border:1px solid}
.vac-now{background:var(--ok-bg);border-color:var(--ok-line)}
.vac-soon{background:var(--sand);border-color:#F5D6C0}
.vac-full{background:var(--peri-50);border-color:var(--peri-100)}
.vac .dot{display:inline-flex;align-items:center;gap:8px;font:600 11px/1 var(--sans);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.vac .dot::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.vac-now .dot{color:var(--ok)}
.vac-soon .dot{color:var(--warn)}
.vac-full .dot{color:var(--peri)}
.vac h2{font-size:19px;margin-bottom:5px}
.vac p{font-size:14.5px;margin-bottom:14px}

/* ---------------------------------------------------------------- thought */
.thought{background:var(--peri);color:#fff;border-radius:var(--r-lg);padding:24px 26px}
.thought .dot{font:600 11px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:#B9C6E8;margin-bottom:12px}
.thought p{font-size:17.5px;line-height:1.55;font-weight:500;margin:0;color:#fff}

/* ---------------------------------------------------------------- staff
   The portrait sits BESIDE the text, at a human size — not a 4:3 slab above it.
   On a phone it drops to a small round portrait above the name. */
.staff-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh);padding:22px;display:grid;gap:18px;align-items:start}
.staff-card img{width:110px;height:110px;border-radius:50%;object-fit:cover;
  border:3px solid var(--peri-50)}
/* The portrait sits beside the words only when the card is wide enough to carry both. These
   cards are half a row, so at 560px that left the text column at 165px - about nineteen
   characters a line, which wraps a short bio into twenty-odd lines and makes the card
   enormous. Below 1200px the portrait sits above the text instead and the words get the
   full width of the card. */
@media(min-width:1200px){
  .staff-card{grid-template-columns:130px 1fr;gap:22px}
  .staff-card img{width:130px;height:130px}
}
/* The staff page's three-across row: at a third of the row the photo-beside-text arrangement
   would leave the words a sliver, so inside a g3 the portrait sits centred above the text at
   every width, the name and role centre under it, and every card's content starts at the top
   so the three names sit level whatever the bios' lengths. */
.g3 .staff-card{grid-template-columns:1fr;align-content:start}
.g3 .staff-card img{margin:0 auto;width:130px;height:130px}
.g3 .staff-card h2,.g3 .staff-card .role{text-align:center}
.staff-body{padding:0}
.staff-body .role{color:var(--coral);font-weight:600;font-size:12.5px;letter-spacing:.11em;
  text-transform:uppercase;margin:0 0 10px}
.staff-body h2{margin-bottom:4px}
.staff-body p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- full-bleed band
   For one photograph that is strong enough to carry the page. It breaks out of
   .shell deliberately — the width IS the point. */
.band{position:relative;width:100%;overflow:hidden;background:var(--peri-50)}
.band img{width:100%;height:auto;display:block;object-fit:cover;
  max-height:min(58vh,520px);object-position:center 42%}
.band-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 20px 18px;
  background:linear-gradient(180deg,transparent,rgba(63,83,145,.86));color:#fff}
.band-cap .shell{padding-left:20px;padding-right:20px}
.band-cap p{margin:0;font-size:15px;font-weight:500;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.25)}
@media(min-width:768px){
  .band-cap{padding:40px 0 24px}
  .band-cap p{font-size:17px}
}

/* ---------------------------------------------------------------- gallery
   A deliberate collage: one big image, the rest around it. It always resolves —
   there is no count at which it orphans. */
.collage{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.collage img{width:100%;height:100%;object-fit:cover;border-radius:var(--r);
  box-shadow:var(--sh);aspect-ratio:4/3}
@media(min-width:768px){
  .collage{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr}
  .collage img:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
}

/* ---------------------------------------------------------------- testimonials
   2 balanced columns. 7 quotes -> 4+3. No orphan: the browser balances the columns
   instead of a grid row having to fill. */
.quotes{columns:1;column-gap:var(--gap)}
@media(min-width:820px){ .quotes{columns:2} }
/* The bee's lane down the testimonials. It rides on the edge of a quote, above the card, and
   is 34px wide - so half of it is 17px, which is inside the quotes' 26px padding, inside the
   24px column gutter and inside the 20px page margin on a phone. It therefore cannot sit on a
   word, overlap the next column, or hang off the screen. Nothing else is drawn. */
.qflight{position:relative}
.qflight .quotes{position:relative;z-index:1}
.qflight .qbee{position:absolute;top:0;left:0;width:34px;height:auto;z-index:2;opacity:0;
  pointer-events:none;transform:translate(-50%,-50%);will-change:transform,top,left;
  /* On a white quote a soft shadow is enough to lift it off the card. */
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.22))}
/* On a coral quote the bee all but disappears - orange on coral is barely any contrast at
   all. There is no white lane wide enough to move it into (the widest is 32px against a
   34px bee, and only 20px on a phone), so the separation is drawn around the bee instead:
   a tight white outline, which reads as a rim of light rather than a glow. */
.qflight .qbee.on-coral{
  filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff)
         drop-shadow(0 0 4px rgba(255,255,255,.75))}
@media(prefers-reduced-motion:no-preference){
  /* the same two rates as the flights, so it is recognisably the same bee */
  .qflight .qbee{animation:wingbeat .16s ease-in-out infinite, hoverbob 1.9s ease-in-out infinite}
}
blockquote{margin:0 0 var(--gap);break-inside:avoid;border:0;border-radius:var(--r-lg);
  padding:28px 26px;text-align:center}
blockquote p{font-size:16px;line-height:1.6;margin-bottom:16px;font-weight:500}
blockquote cite{font-style:normal;font-weight:600;font-size:14px}
blockquote cite span{display:block;font-weight:400;font-size:13px;margin-top:2px;opacity:.85}
/* Original scheme: odd = coral block, white text; even = plain periwinkle text, no box. */
/* Per-testimonial tone: coral = coral box + white text; white = white box + blue (periwinkle) text. */
.quotes .q-coral{background:var(--coral);color:#fff;box-shadow:var(--sh-2)}
.quotes .q-coral cite{color:#fff}
.quotes .q-white{background:#fff;color:var(--peri);border:1px solid var(--line);box-shadow:var(--sh)}
.quotes .q-white p{color:var(--peri)}
.quotes .q-white cite{color:var(--peri)}
.quotes .q-white cite span{color:var(--ink-2)}

/* ---------------------------------------------------------------- faq
   2 columns on desktop. Each details box is its own flow, so opening an answer on
   the left cannot shove the right column down. */
.faq{display:grid;gap:14px}
@media(min-width:900px){ .faq{grid-template-columns:1fr 1fr;gap:14px 26px;align-items:start} }
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);height:fit-content}
.faq summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:600;font-size:15.5px;
  color:var(--peri);display:flex;justify-content:space-between;gap:12px;align-items:center;
  min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--coral);font-weight:700;font-size:21px;flex:0 0 auto}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{background:var(--tint)}
.faq .a{padding:0 18px 18px;color:var(--ink-2);font-size:15px}
.faq .a p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- holidays */
.hol{display:grid;gap:10px}
.hol-item{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
  box-shadow:var(--sh);display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.hol-item strong{font-weight:600;font-size:15.5px;color:var(--peri)}
.hol-item span{color:var(--coral);font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap;font-size:14.5px}
.hol-item.next{border-color:var(--coral);background:var(--coral-50)}

/* ---------------------------------------------------------------- tables */
.table-wrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh);background:#fff}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.table-wrap{max-width:100%}
table{width:100%;border-collapse:collapse}
th{background:var(--tint);text-align:left;padding:12px 15px;font:600 11px/1.4 var(--sans);
  letter-spacing:.11em;text-transform:uppercase;color:var(--coral);
  border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:14px 15px;border-bottom:1px solid var(--line-2);font-size:15.5px}
tbody tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
td strong{font-weight:600;color:var(--peri)}

/* ---------------------------------------------------------------- steps */
.steps{list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-left:44px;margin-bottom:20px}
.steps li:last-child{margin-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:0;top:-1px;width:30px;height:30px;
  border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;
  justify-content:center;font:700 14px/1 var(--sans)}
.steps h3{margin-bottom:4px}
.steps p{font-size:14.5px;margin:0}

/* ---------------------------------------------------------------- notes */
.note{border-radius:var(--r);padding:16px 18px;margin:0 0 18px;font-size:15px;line-height:1.6}
.note-info{background:var(--peri-50);border:1px solid var(--peri-100)}
.note-warn{background:var(--coral-50);border:1px solid #F7CFCF}
.note p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- the form */
.form-frame{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-2);background:#fff}
.form-frame iframe{display:block;width:100%;border:0;min-height:2200px}

/* ---------------------------------------------------------------- social */
.fb-wrap{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);background:#fff;
  border:1px solid var(--line);max-width:500px}
.fb-wrap iframe{display:block;border:0;width:100%}

/* ---------------------------------------------------------------- chat bubble
   Unobtrusive: a small pill bottom-right, above the fold on every page, but never
   over the content. On a phone it shrinks to a circle so it does not eat the screen. */
.chat-fab{position:fixed;left:20px;bottom:20px;z-index:80;display:inline-flex;
  align-items:center;justify-content:center;width:58px;height:58px;padding:0;border:0;border-radius:18px;
  background:var(--coral);color:#fff;cursor:pointer;
  box-shadow:0 8px 22px rgba(244,67,69,.34);transition:transform .14s,background .14s}
.chat-fab-t{display:none}
.chat-fab:hover{background:var(--coral-700);transform:translateY(-1px)}
.chat-fab svg{flex:0 0 auto;width:26px;height:26px}
.chat-fab.open{transform:scale(.96)}
@media(max-width:560px){
  .chat-fab{left:14px;bottom:14px;width:54px;height:54px}
}
.chat-panel{position:fixed;left:18px;bottom:86px;z-index:81;width:min(340px,calc(100vw - 36px));
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 18px 48px rgba(63,78,126,.24);overflow:hidden}
@media(max-width:560px){ .chat-panel{left:14px;right:14px;bottom:80px} }
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 18px;background:var(--peri);color:#fff}
.chat-head strong{display:block;font-size:15px;font-weight:600}
.chat-head span{display:block;font-size:12.5px;color:#C3CDE6;margin-top:2px}
.chat-x{background:none;border:0;color:#fff;font-size:26px;line-height:1;cursor:pointer;
  padding:0 4px;opacity:.8}
.chat-x:hover{opacity:1}
.chat-body{padding:16px 18px 18px}
.chat-body > p:first-child{font-size:14.5px;color:var(--ink-2);margin:0 0 14px}
.chat-row{display:block;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  margin-bottom:9px;text-decoration:none;transition:border-color .12s,background .12s}
.chat-row:hover{border-color:var(--coral);background:var(--coral-50)}
.chat-row b{display:block;color:var(--peri);font-weight:600;font-size:14.5px}
.chat-row span{display:block;color:var(--ink-2);font-size:12.5px;margin-top:2px}
.chat-note{font-size:12.5px;color:var(--ink-3);margin:12px 0 0;text-align:center}

/* ---------------------------------------------------------------- footer */
.ftr{background:var(--peri-700);color:#D5DCEF;padding:44px 0 0}
.ftr h2{color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;margin:0 0 13px}
.ftr p,.ftr address,.ftr li{font-size:14.5px;line-height:1.75;color:#B9C4E2}
.ftr a{color:#E8ECF7;text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr-grid{display:grid;gap:28px;padding-bottom:36px;
  grid-template-columns:1fr}
/* Phones. Four blocks in one column makes the footer taller than the screen, so the two short
   ones sit side by side and the link list runs in two columns. auto-fit rather than a fixed
   two, because at 320px a half column is only 131px and "2500 Valby, Denmark" needs 138 -
   there the grid quietly falls back to a single column instead of breaking the address.
   The intro and the link list keep the full width: the first has a sentence to carry, the
   second reads better as one block of links than as a stray column beside white space. */
@media(max-width:599px){
  .ftr-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px 18px}
  .ftr-grid > :first-child,
  .ftr-grid > :last-child{grid-column:1 / -1}
  .ftr-grid > :last-child ul{display:grid;gap:0 18px;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}
@media(min-width:600px){ .ftr-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:900px){ .ftr-grid{grid-template-columns:repeat(4,1fr);gap:24px} }
.ftr-grid > *{min-width:0}
.ftr{background:var(--peri-700);color:#D5DCEF;padding:44px 0 0}
.ftr-btm{background:var(--coral);margin-top:8px;padding:16px 0;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:max(20px,calc(50vw - var(--shell)/2));padding-right:max(20px,calc(50vw - var(--shell)/2))}
.ftr-btm{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:space-between}
.ftr-btm p{margin:0;font-size:13px;color:#fff;font-weight:500}
/* A quiet staff door. NOT in the nav: parents do not need it, and a prominent "Login"
   only invites bots. It is nofollow'd and blocked in robots.txt — but note that hiding a
   link is not security. The password is the security. */
.ftr-btm .staff-login{color:rgba(255,255,255,.92);text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap}
.ftr-btm .staff-login:hover{color:#fff;text-decoration:underline}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ---------------------------------------------------------------- social: feed + photo strip */
.fb-row{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.fb-wrap{flex:0 0 500px;max-width:100%}
.social-strip{flex:1;min-width:200px;display:flex;flex-direction:column;gap:14px}
.social-strip figure{margin:0}
.social-strip img{width:100%;height:auto;display:block;border-radius:var(--r);
  aspect-ratio:4/3;object-fit:cover;box-shadow:var(--sh)}
@media(max-width:560px){ .fb-wrap{flex-basis:100%} }

/* ---------------------------------------------------------------- social: rotating film strip */
.social-grid{display:grid;gap:22px}
@media(min-width:1000px){ .social-grid{grid-template-columns:500px minmax(200px,1fr) 340px;align-items:start} }
.social-grid > *{min-width:0}
.fb-wrap{max-width:100%}
.filmstrip{height:900px;overflow:hidden;border-radius:var(--r);
  position:relative;background:var(--peri-50);box-shadow:var(--sh) inset}
.filmstrip::before,.filmstrip::after{content:"";position:absolute;left:0;right:0;height:36px;z-index:2;pointer-events:none}
.filmstrip::before{top:0;background:linear-gradient(#fff,rgba(255,255,255,0))}
.filmstrip::after{bottom:0;background:linear-gradient(rgba(255,255,255,0),#fff)}
.film-track{display:flex;flex-direction:column;gap:12px;padding:6px;animation:filmscroll 55s linear infinite}
.filmstrip:hover .film-track{animation-play-state:paused}
.film-track img{width:100%;display:block;border-radius:10px;aspect-ratio:4/3;object-fit:cover;box-shadow:var(--sh)}
@keyframes filmscroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media(prefers-reduced-motion:reduce){ .film-track{animation:none} }
@media(max-width:560px){
  .fb-wrap{flex-basis:100%}
  .filmstrip{height:auto;flex-basis:100%;width:100%}
  .film-track{flex-direction:row;overflow-x:auto;animation:none;scroll-snap-type:x mandatory}
  .film-track img{flex:0 0 46%;scroll-snap-align:start}
}

/* ---------------------------------------------------------------- download rows */
.dl-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;
  text-decoration:none;color:var(--peri);font-weight:600;font-size:14.5px;margin-top:10px;
  transition:border-color .12s,box-shadow .12s}
.dl-row:first-of-type{margin-top:4px}
.dl-row:hover{border-color:var(--orange);box-shadow:var(--sh)}
.dl-badge{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.06em;color:#fff;
  background:var(--orange);border-radius:6px;padding:3px 8px}

/* ---------------------------------------------------------------- about: filmstrip, sideways
   Same photographs as the social wall, rolling horizontally. Full-bleed so the row of images
   reads as a strip of film rather than a boxed gallery. */
.filmstrip-h{position:relative;overflow:hidden;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.film-track-h{display:flex;gap:14px;width:max-content;animation:filmscroll-h 70s linear infinite}
.filmstrip-h:hover .film-track-h,
.filmstrip-h:focus-within .film-track-h{animation-play-state:paused}
.film-track-h img{width:300px;height:225px;flex:0 0 auto;display:block;border-radius:12px;
  object-fit:cover;box-shadow:var(--sh)}
@keyframes filmscroll-h{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .film-track-h{animation:none}
  .filmstrip-h{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:560px){ .film-track-h img{width:220px;height:165px} }

/* ---------------------------------------------------------------- about: badge cards */
.badge-row{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.badge-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;
  box-shadow:var(--sh)}
.badge-card h2{font-size:19px;margin:0 0 8px}
.badge-card p{margin:0;color:var(--ink-2)}
@media(max-width:760px){ .badge-row{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- policies */
.pol{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pol-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;
  box-shadow:var(--sh)}
.pol-card h2{font-size:19px;margin:0 0 12px;color:var(--peri)}
.pol-card ul{margin:0;padding-left:18px}
.pol-card li{margin-bottom:10px;color:var(--ink-2)}
.pol-card li:last-child{margin-bottom:0}
.pol-note{margin-top:22px;background:var(--sand,#FFF7E8);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 20px}
.pol-note p{margin:0}
@media(max-width:900px){ .pol{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- contact */
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.c-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;
  box-shadow:var(--sh)}
.c-card h2{font-size:19px;margin:0 0 14px;color:var(--peri)}
.c-card-quiet{background:var(--sand,#FFF7E8)}
.c-list{margin:0}
.c-list > div{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.c-list > div:last-child{border-bottom:0}
.c-list dt{flex:0 0 116px;font-weight:600;color:var(--ink-2);font-size:14px}
.c-list dd{margin:0;flex:1}
.c-list dd small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.c-addr{font-style:normal;line-height:1.7;margin:0 0 14px}
.c-map{display:block;margin:0 0 14px}
.c-map img{width:100%;height:auto;display:block;border-radius:12px;box-shadow:var(--sh)}
.c-dir-label{font-weight:600;font-size:14px;margin:0 0 8px;color:var(--ink-2)}
.c-dirs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.muted-sm{color:var(--muted);font-size:12.5px;margin:0}
@media(max-width:760px){ .contact-grid{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- home: where we are */
.loc{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:center}
.loc-facts{display:grid;gap:12px;margin:16px 0 18px}
.loc-facts div{display:flex;gap:12px;align-items:baseline}
.loc-facts dt{flex:0 0 96px;font-weight:600;color:var(--ink-2);font-size:14px}
.loc-facts dd{margin:0;color:var(--ink-2)}
@media(max-width:860px){ .loc{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- apply: call to action
   Replaced the embedded iframe. The form is a real page now, so this panel only has to
   set expectations and hand over. */
.apply-cta{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:28px 30px;box-shadow:var(--sh)}
.apply-cta h2{margin:0 0 10px;font-size:22px}
.apply-cta p{color:var(--ink-2)}
.btn-lg{padding:15px 26px;font-size:16.5px}

/* ---------------------------------------------------------------- guides */
.guides{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.g-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;
  box-shadow:var(--sh);display:flex;flex-direction:column}
.g-tag{display:inline-block;align-self:flex-start;background:var(--peri-50);color:var(--peri);
  font:700 11px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  padding:6px 10px;border-radius:6px;margin:0 0 12px}
.g-card h2{font-size:20px;margin:0 0 10px}
.g-card p{color:var(--ink-2)}
.g-card .btns{margin-top:auto;padding-top:8px}
@media(max-width:760px){ .guides{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- about: a day in our world */
.day{position:relative;padding-left:36px;max-width:720px}
.day::before{content:"";position:absolute;left:15px;top:10px;bottom:10px;width:2px;
  background:repeating-linear-gradient(var(--line) 0 4px,transparent 4px 12px)}
.day .stop{position:relative;padding:0 0 20px}
.day .stop::before{content:"";position:absolute;left:-29px;top:4px;width:17px;height:19px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20112%22%3E%3Cpolygon%20points%3D%2226%2C5%2074%2C5%2096%2C56%2074%2C107%2026%2C107%204%2C56%22%20fill%3D%22%23FDF3E3%22%20stroke%3D%22%23F44345%22%20stroke-width%3D%229%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain}
.day .stop time{font:700 12.5px/1 var(--sans);color:var(--coral);letter-spacing:.06em}
.day .stop b{display:block;font-family:var(--disp,inherit);font-size:16.5px;margin-top:3px}
.day .stop p{margin:4px 0 0;color:var(--ink-2);font-size:14.5px}

/* ================================================================ STORY & IDENTITY
   The honeycomb cell is the signature shape: photo crops, section markers, badges,
   the numbers on the promises. Same shape at every size, on screen and on paper. */
:root{
  --cell:polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%);
}

/* --- hexagon photo --- */
.hexf{margin:0;clip-path:var(--cell);background:var(--yellow,#FFCB05)}
.hexf img{width:100%;height:100%;object-fit:cover;display:block}

/* --- hero comb cluster --- */
.comb{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:28px}
.comb .c1{grid-column:1/3;aspect-ratio:1/1.06}
.comb .c2{grid-column:3/5;aspect-ratio:1/1.06;transform:translateY(-13%)}
.comb .c3{grid-column:2/4;aspect-ratio:1/1.06;transform:translateY(-25%)}

/* --- the flight path between chapters --- */
/* The strip is the gap between two chapters and stays entirely inside that gap: overlapping
   it into the section below put the dotted path across the heading and landed the bee on top
   of the words. It is positioned so nothing paints over it, but it never trespasses. */
/* The strip is the gap between two chapters. Its last stretch is allowed to draw outside
   the gap, down the empty left margin of the chapter below, so the bee finishes beside the
   heading rather than on the seam. It is positioned and the sections are not, so it paints
   over them; it never reaches the text, which starts further right. */
.flight{position:relative;z-index:6;height:150px;pointer-events:none;overflow:visible}
.flight svg{display:block;width:100%;height:150px;overflow:visible}
@media(min-width:900px){ .flight{height:190px} .flight svg{height:190px} }
/* Which of the two paths is drawn. visibility, not display: a hidden path must keep its
   geometry so flight.js can still measure it. The switch matches wantWide() in flight.js. */
.flight .p-narrow{visibility:hidden}
@media(max-width:1199px){
  .flight .p-wide{visibility:hidden}
  .flight .p-narrow{visibility:visible}
}
/* On a phone there is no margin at all beside the text, so there the flight really does stop
   at the foot of the gap and the tail is clipped away. Everything wider keeps the desktop
   behaviour: the trail carries on past the seam, fading out behind the chapter below, and
   the bee comes to rest beside its heading. This width matches stopShort() in flight.js. */
@media(max-width:739px){ .flight svg{overflow:hidden} }
.flight path{fill:none;stroke-width:2.5;stroke-dasharray:2 11;
  stroke-linecap:round;opacity:.48}
.flight .bee{position:absolute;top:0;left:50%;width:52px;height:auto;
  transform:translate(-50%,-50%);will-change:transform,top,left}
/* the bee only bobs where it is not being flown by the scroll position */
@media(prefers-reduced-motion:no-preference){
  .flight:not([data-flight]) .bee{animation:bob 5s ease-in-out infinite}
  @keyframes bob{0%,100%{margin-bottom:0}50%{margin-bottom:7px}}
  /* A cell of the hive at the end of the last flight, for the bee to drop into. */
  /* The cell has to be bigger than the bee, not smaller, and pale enough that an orange
     bee reads against it - brand yellow behind orange is only 2:1, which is mush. Pale
     honey with a brand-yellow rim keeps it a hive cell and lifts the bee off it. */
  /* Drawn as an SVG polygon, not a clipped box: a clip-path cannot carry an outline, so
     the earlier attempt produced coral only at the flat edges and the two side points. */
  .flight-land .pad{position:absolute;width:88px;height:99px;
    transform:translate(-50%,-50%);opacity:0;transition:opacity .35s ease}
  .flight-land .pad svg{width:100%;height:100%;display:block}
  .flight-land .pad.ready{opacity:1}
  .flight-land .bee{z-index:2}

  /* The bee is a flat image, so its wings cannot move independently. What can move is the
     bee: a fast, very small squash and tilt reads as wingbeat at this size, and a slower
     bob underneath it reads as hovering. Two rates, so it does not look mechanical. */
  /* These animate the standalone scale and translate properties, never transform: the
     script writes transform to keep the bee pointing along its path, and a transform
     animation would silently override that and leave it flying sideways. */
  .flight .bee{animation:wingbeat .16s ease-in-out infinite, hoverbob 1.9s ease-in-out infinite}
  @keyframes wingbeat{ 0%,100%{scale:1 1}      50%{scale:1 .92} }
  @keyframes hoverbob{ 0%,100%{translate:0 0}  50%{translate:0 -3px} }
  @media (prefers-reduced-motion: reduce){
    .flight .bee{animation:none}
  }
  /* still beating its wings once it has landed in the cell */
  .flight-land .bee.landed{animation:wingbeat .16s ease-in-out infinite,
                                     touchdown 1.6s ease-in-out infinite}
  @keyframes touchdown{
    0%,100%{margin-top:0}
    30%{margin-top:-13px}
    45%{margin-top:0}
    62%{margin-top:-6px}
    75%{margin-top:0}
  }
}

/* --- chapter eyebrow with its cell --- */
.eyebrow{font:700 11.5px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;
  color:var(--coral);display:flex;align-items:center;gap:9px;margin:0 0 12px}
.eyebrow i{width:11px;height:13px;background:var(--coral);clip-path:var(--cell);display:block;
  flex:0 0 11px}
.on-blue .eyebrow{color:var(--yellow)} .on-blue .eyebrow i{background:var(--yellow)}

/* --- story typography --- */
.story h2{font-size:clamp(25px,5.6vw,37px);line-height:1.13;margin:0 0 16px}
.big{font-size:clamp(18px,4vw,21.5px);line-height:1.48}
.pull{font-family:var(--disp);font-size:clamp(20px,4.6vw,28px);line-height:1.3;
  margin:22px 0;padding-left:18px;border-left:4px solid var(--yellow)}
.narrow{max-width:620px}

/* --- the 10:07 moment --- */
.clock{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:16px 18px;box-shadow:var(--sh-2);margin:18px 0 6px}
.clock .t{flex:0 0 62px;width:62px;height:70px;background:var(--yellow);clip-path:var(--cell);
  display:flex;align-items:center;justify-content:center;font:700 17px/1 var(--disp);
  color:var(--ink)}
.clock p{margin:0;font-size:15.5px}

/* --- the three promises --- */
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px;
  align-items:stretch}
.promise .pcard{display:flex;flex-direction:column}
.pcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;
  box-shadow:var(--sh)}
.pcard .n{width:34px;height:38px;background:var(--coral);clip-path:var(--cell);
  display:flex;align-items:center;justify-content:center;color:#fff;font:700 15px/1 var(--disp);
  margin-bottom:13px}
.pcard h3{font-size:18.5px;margin:0 0 8px}
.pcard p{margin:0;font-size:15px;color:var(--ink-2)}

/* --- the long arc --- */
.arc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:26px;
  align-items:start}
.arc-c{text-align:center;display:flex;flex-direction:column;align-items:center}
.arc-c .hexf{aspect-ratio:1/1.06;width:100%;max-width:210px;margin:0 auto 14px}
.arc-c b{display:block;font-family:var(--disp);font-size:18px;margin-bottom:6px}
.arc-c span{font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:30ch}

/* --- what it buys --- */
.money{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px;
  box-shadow:var(--sh);display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.money .amt{font:700 clamp(26px,7vw,40px)/1 var(--disp);color:var(--coral)}
.money .amt span{display:block;font:600 12.5px/1.4 var(--sans);color:var(--ink-2);margin-top:6px}
.money p{flex:1 1 260px;margin:0;font-size:15px;color:var(--ink-2)}

/* --- facts as comb cells --- */
.factcells{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:24px;max-width:520px}
.factcells .fc{text-align:center}
.factcells .cap{width:100%;aspect-ratio:1/1.06;background:#fff;clip-path:var(--cell);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px}
.factcells .cap b{font:700 clamp(13px,3.2vw,18px)/1.1 var(--disp);color:var(--coral)}
.factcells .cap span{font-size:11px;color:var(--ink-2);margin-top:3px}

/* --- blue chapter --- */
.on-blue{background:var(--peri);color:#fff}
.on-blue h2,.on-blue .big,.on-blue b{color:#fff}
.on-blue .muted,.on-blue .arc-c span{color:rgba(255,255,255,.82)}
.on-blue .pull{border-left-color:var(--yellow)}

@media(max-width:680px){
  .promise,.arc-row{grid-template-columns:1fr}
  .arc-c:nth-child(2) .hexf{transform:none}
  .factcells{grid-template-columns:repeat(2,1fr);gap:12px}
}

/* --- homepage hero, story version --- */
.hero-story{background:var(--coral);color:#fff;padding:40px 0 46px;position:relative;overflow:hidden}
/* The global h1 rule paints headings periwinkle, unreadable on coral, and .btn-go is a
   coral button that vanishes on a coral background. Both are corrected here. */
.hero-story{background:var(--coral);color:#fff;padding:38px 0 42px;position:relative;overflow:hidden}
.hero-story h1{color:#fff;font-size:clamp(40px,7vw,74px);line-height:1;margin:0 0 16px;
  letter-spacing:-.02em}
.hero-story h1 .w{color:#FFEE8C}
.hero-story .arc{font-family:var(--disp);font-weight:500;font-size:clamp(19px,3.4vw,25px);
  line-height:1.34;margin:0 0 14px;color:#fff}
.hero-story .said{font-size:16px;line-height:1.6;color:rgba(255,255,255,.94);margin:0 0 18px;
  max-width:44ch}
.hero-story .said b{background:rgba(120,8,10,.34);padding:1px 7px;border-radius:5px;color:#fff}
.hero-story .btn-go{background:#fff;color:var(--coral)}
.hero-story .btn-go:hover{background:#FFECEC;color:var(--coral-700)}
.btn-ghost-w{border:2px solid rgba(255,255,255,.75);color:#fff;background:none}
.btn-ghost-w:hover{background:rgba(255,255,255,.15);color:#fff}

/* the facts, as one line rather than boxes competing with the buttons */
.facts-line{font:600 clamp(15px,2.6vw,18px)/1.6 var(--sans);color:#fff;margin:0 0 22px;
  letter-spacing:.005em}
.facts-line i{font-style:normal;opacity:.55;padding:0 7px}

/* words left, pictures right, both anchored to the same top edge */
.hero-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
.hero-copy{max-width:600px}
.hero-art{width:100%;max-width:420px;margin:0 auto;padding-bottom:12px}
/* Tablet portrait. Stacking the pictures under the words left the whole right-hand side of
   the hero empty and pushed everything below the fold, so from 720px the two sit side by
   side, as they do on the desktop. The heading is stepped down to 6vw for this band: at the
   full 7vw it is wider than the narrower column and breaks onto a second line. */
@media(min-width:720px) and (max-width:899px){
  .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;align-items:center}
  .hero-copy{max-width:none}
  .hero-art{margin:0;max-width:100%}
  .hero-story h1{font-size:clamp(40px,6vw,74px)}
  .hero-story .comb{gap:6px;margin-top:0}
}
@media(min-width:900px){
  .hero-story{padding:54px 0 58px}
  .hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:48px;align-items:center}
  .hero-art{margin:0;max-width:100%}
}

/* the vacancy line, on its own strip under the hero */
.vac-strip{background:#fff;border-bottom:1px solid var(--line);padding:14px 0}
.vac-strip .shell{display:flex;justify-content:center}

/* story section rhythm */
.story{padding:36px 0}
.story.white{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.story.band-yellow{background:#FFF8DE;border-top:3px solid var(--yellow);border-bottom:3px solid var(--yellow)}
.story.tight{padding:26px 0}
.close-story{text-align:center;padding:40px 0 50px}

/* --- about: the year --- */
.year{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.yr{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;
  box-shadow:var(--sh)}
.yr .cell{display:block;width:44px;height:50px;margin-bottom:13px;position:relative;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20112%22%3E%3Cpolygon%20points%3D%2226%2C5%2074%2C5%2096%2C56%2074%2C107%2026%2C107%204%2C56%22%20fill%3D%22%23FDF3E3%22%20stroke%3D%22%23F44345%22%20stroke-width%3D%226%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain}
.yr .cell::after{content:"";position:absolute;inset:0;background:url('/assets/img/bee.png')
  no-repeat center/62% auto}
.yr:nth-child(1) .cell::after{transform:rotate(-18deg)}
.yr:nth-child(2) .cell::after{transform:rotate(14deg) scaleX(-1)}
.yr:nth-child(3) .cell::after{transform:rotate(-6deg)}
.yr b{display:block;font-family:var(--disp,inherit);font-size:19px;margin-bottom:8px}
.yr p{margin:0;color:var(--ink-2);font-size:15px}
@media(max-width:820px){ .year{grid-template-columns:1fr} }

/* a stranded arrow on its own line reads as a mistake */
a[href] .arrow, .story a[href]{text-wrap:pretty}
.story p a[href]{white-space:normal}

/* ---- desktop rhythm: every prose column sits on the same centre line, card rows run wide ----
   Sections built as .shell > .narrow were left-aligning their intro while the cards beneath
   spanned the full container, which read as a bug rather than a layout. */
@media(min-width:900px){
  .story .shell > .narrow{margin-left:auto;margin-right:auto}
  .story .promise,.story .arc-row{margin-top:26px}
  .arc-c .hexf{max-width:240px}
  .hero-art{max-width:100%}
  .hero-story .comb{gap:10px}
}

/* ---- the whole menu on one line ----
   The existing rules are #menu-scoped, so these have to match that specificity or they
   are simply ignored. Tightened until the bar fits a 1152px laptop screen. */
.nav .shell{max-width:1340px}
@media(min-width:900px){
  #menu .nav-home a,#menu .grp-items a{padding:0 9px;font-size:13.5px}
  #menu .nav-grp{margin-left:7px;padding-left:7px}
  #menu .nav-act .grp-items{gap:6px}
  #menu .act-1{padding:0 14px!important;font-size:13.5px!important}
  #menu .act-2{padding:0 11px!important;font-size:13.5px!important}
}
@media(min-width:1280px){
  #menu .nav-home a,#menu .grp-items a{padding:0 11px;font-size:14.5px}
  #menu .act-1{padding:0 17px!important;font-size:14.5px!important}
  #menu .act-2{padding:0 13px!important;font-size:14.5px!important}
}

/* ---- headings that must not wrap, and cards that need room ---- */
@media(min-width:900px){
  .wide-head{max-width:820px}
  .wide-head h2{max-width:none}
  .wide-card{max-width:860px}
  .wide-card .money{padding:26px 30px}
}

/* ---- contrast corrections found by measurement ----
   Small text needs 4.5:1. These were between 2.6 and 3.1, which is legible for me and
   not for a parent reading on a phone in daylight. */
.g-tag{color:#3F4E7E}
/* the brand line appears twice: dark on the white header, light on the blue footer */
.hdr .brand-t{color:#4A5A8F}
.ftr .brand-t{color:#D8E0F5}
.ftr p,.ftr li,.ftr a,.ftr .muted{color:#DDE3F4}
/* the copyright bar sits on coral, so it needs plain white, not a tinted one */
.ftr-btm,.ftr-btm p,.ftr-btm a{color:#fff}
/* white on orange is 2.6:1; the darker orange clears 4.5:1 and still reads as orange */
.dl-badge{background:#C25E0B}
.muted-sm{color:var(--ink-2)}
.day .stop p,.yr p,.pcard p,.arc-c span{color:var(--ink-2)}

/* ---------------------------------------------------------------- bees at large */

/* a bee hops along the rolling photographs, then works its way back */
/* the wrapper does not clip, so the bee can fly above the strip without being cut */
.film-wrap{position:relative;padding-top:46px}
.film-bee{position:absolute;top:4px;left:6%;width:38px;height:auto;z-index:20;
  filter:drop-shadow(0 3px 6px rgba(63,78,126,.32));pointer-events:none}
@media(prefers-reduced-motion:no-preference){
  .film-bee{animation:hop 15s ease-in-out infinite}
}
@keyframes hop{
  0%   {left:6%;  transform:rotate(-8deg)  translateY(0)}
  8%   {left:14%; transform:rotate(-14deg) translateY(-16px)}
  16%  {left:22%; transform:rotate(-6deg)  translateY(0)}
  24%  {left:30%; transform:rotate(-14deg) translateY(-16px)}
  32%  {left:38%; transform:rotate(-6deg)  translateY(0)}
  40%  {left:48%; transform:rotate(-14deg) translateY(-16px)}
  48%  {left:58%; transform:rotate(-6deg)  translateY(0)}
  56%  {left:68%; transform:rotate(-14deg) translateY(-16px)}
  64%  {left:78%; transform:rotate(-6deg)  translateY(0)}
  70%  {left:86%; transform:rotate(-12deg) translateY(-14px)}
  74%  {left:86%; transform:rotate(0deg)   translateY(0)}
  /* and back the other way, facing the other way */
  82%  {left:60%; transform:rotate(8deg) scaleX(-1) translateY(-12px)}
  90%  {left:32%; transform:rotate(8deg) scaleX(-1) translateY(-12px)}
  98%  {left:8%;  transform:rotate(4deg) scaleX(-1) translateY(0)}
  100% {left:6%;  transform:rotate(-8deg) translateY(0)}
}

/* every hexagon carries a bee, each at its own angle, so no two look stamped */
.hexf{position:relative}
.hexf::after{content:"";position:absolute;right:11%;bottom:12%;width:26px;height:21px;
  background:url('/assets/img/bee.png') no-repeat center/contain;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));pointer-events:none}
.hexf:nth-of-type(2n)::after{right:auto;left:12%;bottom:16%;transform:rotate(18deg) scaleX(-1)}
.hexf:nth-of-type(3n)::after{right:14%;bottom:auto;top:13%;transform:rotate(-24deg)}
.hexf:nth-of-type(4n)::after{left:14%;right:auto;top:15%;bottom:auto;transform:rotate(32deg)}
.hexf:nth-of-type(5n)::after{right:9%;bottom:14%;transform:rotate(-11deg)}
.gal .hexf::after,.arc-c .hexf::after{width:22px;height:18px}

/* the closing line runs the full width beneath the three boxes */
.year-note{margin:22px 0 0;color:var(--ink-2);font-size:15.5px;line-height:1.6;
  border-top:1px solid var(--line);padding-top:18px}

/* a bee travelling down the daily timeline */
.day{position:relative}
.day-bee{position:absolute;left:17px;top:0;width:30px;height:auto;z-index:2;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.22));pointer-events:none;
  transform:translate(-50%,-50%) rotate(84deg)}

/* the bee works its way down the enrolment steps, past each numbered circle */
.steps{position:relative}
.steps-bee{left:15px}