/*
Theme Name: Greenhill Boetiek Kleuterskool
Theme URI: https://greenhill.boetiek.co.za
Description: Boutique editorial child theme for Greenhill Boetiek Kleuterskool — serif display headings (Cormorant Garamond), light Mulish body, warm earthy palette, black pill buttons. Built from the approved static mockup.
Author: Greenhill
Template: generatepress
Version: 1.0.0
Text Domain: greenhill
*/

/* =====================================================================
   GREENHILL BOETIEK KLEUTERSKOOL — shared stylesheet
   Elegant editorial boutique style. Serif display + light sans body,
   warm earthy palette, generous white space, black pill buttons.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Mulish:wght@300;400;500;600;700&display=swap');

:root{
  --ink:#2b2926;          /* warm near-black text  */
  --ink-soft:#6f6a62;     /* muted body / captions */
  --line:#e7e1d8;         /* hairline dividers     */
  --cream:#faf7f1;        /* off-white section bg  */
  --cream-deep:#f3ece1;   /* deeper warm panel     */
  --sand:#b3854f;         /* earthy accent         */
  --sand-soft:#cdb191;
  --black:#1b1916;        /* pill buttons / footer */
  --white:#ffffff;
  --maxw:1180px;
  --display:'Cormorant Garamond', Georgia, serif;
  --body:'Mulish', -apple-system, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--white);
  line-height:1.7;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

/* ---------- TYPOGRAPHY ---------- */
.display{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(2.8rem,6.2vw,5.2rem);
  line-height:1.02;
  letter-spacing:.01em;
  text-transform:uppercase;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;color:var(--ink);}
.section-title{
  font-size:clamp(1.9rem,3.6vw,3rem);
  text-transform:uppercase;
  letter-spacing:.08em;
  line-height:1.1;
  text-align:center;
}
.eyebrow{
  font-family:var(--body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--sand);
  text-align:center;
  display:block;
  margin-bottom:14px;
}
.lead{
  font-size:1.06rem;
  color:var(--ink-soft);
  max-width:620px;
  margin:0 auto;
  text-align:center;
}
p{font-weight:300;color:var(--ink);}
.muted{color:var(--ink-soft);}

section{padding:92px 0;}
/* Where two sections sit on the same background, 92px of bottom padding met
   92px of top padding and the ~190px of white read as a hole in the page rather
   than a break between sections (Program, Fasiliteite). The second one drops its
   top padding, leaving one section's worth of air. Sections that paint their own
   band keep their padding: without it their text would start hard against the
   colour edge. */
section:not([style*="background"]):not(.page-hero):not(.hero-cine):not(.trust):not(.cta-band)
+ section:not([style*="background"]):not(.page-hero):not(.hero-cine):not(.trust):not(.cta-band){
  padding-top:0;
}
.section-head{margin-bottom:54px;}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;
  white-space:nowrap;
  font-family:var(--body);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:16px 34px;
  border-radius:40px;
  border:1.5px solid var(--black);
  background:var(--black);
  color:var(--white);
  cursor:pointer;
  transition:.25s ease;
}
.btn:hover{background:transparent;color:var(--black);}
.btn-outline{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--ink);
}
.btn-outline:hover{background:var(--black);border-color:var(--black);color:var(--white);}
.btn-light{
  background:var(--white);color:var(--black);border-color:var(--white);
}
.btn-light:hover{background:transparent;color:var(--white);}
.btn-sm{padding:12px 26px;font-size:.74rem;}

/* ---------- NAV ---------- */
header.nav{
  position:sticky;top:0;z-index:200;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1440px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 32px;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;flex:none;}
.brand-logo{display:block;height:46px;width:auto;}
.foot-logo{display:block;height:38px;width:auto;}
.brand .mark{width:34px;height:34px;flex:none;}
.brand .mark svg{width:100%;height:100%;}
.brand-text strong{
  display:block;font-family:var(--display);font-weight:600;
  font-size:1.35rem;letter-spacing:.16em;line-height:1;color:var(--ink);
  white-space:nowrap;
}
.brand-text span{
  font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;white-space:nowrap;
}
.nav-links{display:flex;align-items:center;gap:24px;list-style:none;}
.nav-links > li{flex:none;}
.nav-links > li > a{
  font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;color:var(--ink);padding:6px 0;transition:.2s;
  white-space:nowrap;
}
.nav-links > li > a:hover{color:var(--sand);}
.nav-links > li.nav-cta > a{color:var(--white);}
.nav-links > li.nav-cta > a:hover{color:var(--black);}
/* The Kontak Ons item is both a nav link and a .btn, and the `.nav-links > li > a`
   rule above is more specific than .btn-sm, so it was flattening the button to
   `padding:6px 0` and the text sat flush against the pill edge. Restore it. */
.nav-links > li.nav-cta > a.btn{padding:12px 26px;}
.nav-links > li.nav-cta > a.btn-sm{padding:12px 26px;}
.dropdown{position:relative;}
.dropdown > a::after{content:'  ⌄';font-size:.7rem;opacity:.6;display:inline-block;transition:transform .2s;}
.dropdown.is-open > a::after{transform:rotate(180deg);}
.dropdown-menu{
  position:absolute;top:130%;left:50%;transform:translateX(-50%);
  background:var(--white);border:1px solid var(--line);
  min-width:248px;padding:10px 0;border-radius:6px;
  box-shadow:0 18px 40px rgba(40,30,15,.12);
  opacity:0;visibility:hidden;transition:.22s;
}
.dropdown:hover .dropdown-menu,
.dropdown.is-open .dropdown-menu{opacity:1;visibility:visible;top:115%;}
.dropdown-menu a{
  display:block;padding:11px 22px;font-size:.82rem;letter-spacing:.06em;
  text-transform:none;font-weight:400;color:var(--ink);
}
.dropdown-menu a:hover{background:var(--cream);color:var(--sand);}
.nav-cta{display:flex;align-items:center;gap:14px;}
/* AF | EN language toggle */
.nav-lang{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;}
.nav-lang a{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--ink-soft);padding:6px 13px;line-height:1;transition:.2s;
}
.nav-lang a + a{border-left:1px solid var(--line);}
.nav-lang a:hover{color:var(--sand);}
.nav-lang a.active{background:var(--ink);color:var(--white);}
.hamburger{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--ink);}

/* compress nav before collapsing to hamburger */
@media(max-width:1360px){
  .nav-links{gap:15px;}
  .nav-links > li > a{font-size:.72rem;letter-spacing:.08em;}
  .nav-links > li.nav-cta > a.btn-sm,.nav-cta .btn-sm{padding:10px 20px;}
  .brand-text strong{font-size:1.2rem;}
  .brand-logo{height:40px;}
}

/* mobile nav toggle */
#navtoggle{display:none;}
@media(max-width:1240px){
  .hamburger{display:block;}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--white);border-bottom:1px solid var(--line);
    padding:8px 0;display:none;
  }
  #navtoggle:checked ~ .nav-links{display:flex;}
  .nav-links > li{width:100%;}
  .nav-links > li > a{display:block;padding:14px 32px;width:100%;}
  /* In the drawer the children were always listed, so tapping the parent could
     only navigate. They start collapsed now and the parent tap opens them. */
  .dropdown-menu{position:static;transform:none;opacity:1;visibility:visible;
    border:none;box-shadow:none;padding:0 0 0 18px;min-width:0;display:none;}
  .dropdown.is-open .dropdown-menu{display:block;}
  .dropdown:hover .dropdown-menu{top:auto;}
  .nav-cta .btn{display:none;}
  .nav-lang-item{padding:14px 32px;}
}

/* ---------- HERO ---------- */
.hero{
  display:grid;grid-template-columns:1.05fr 1fr;
  align-items:center;gap:0;
  background:var(--cream);
}
.hero-text{padding:88px 6vw 88px 0;padding-left:max(32px,calc((100vw - var(--maxw))/2 + 0px));}
.hero-text .eyebrow{text-align:left;margin-bottom:22px;}
.hero-text .display{margin-bottom:24px;}
.hero-tagline{
  font-family:var(--display);font-style:italic;font-size:1.5rem;
  color:var(--sand);margin-bottom:22px;
}
.hero-text p{max-width:460px;color:var(--ink-soft);margin-bottom:30px;}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;}
.hero-img{position:relative;height:100%;min-height:560px;}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-stats{
  position:absolute;left:24px;bottom:24px;right:24px;
  display:flex;gap:12px;
}
.hero-stat{
  background:rgba(255,255,255,.94);backdrop-filter:blur(4px);
  border-radius:8px;padding:14px 10px;flex:1;text-align:center;
}
.hero-stat b{display:block;font-family:var(--display);font-size:1.8rem;color:var(--ink);line-height:1;}
.hero-stat span{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
@media(max-width:920px){
  .hero{grid-template-columns:1fr;}
  .hero-text{padding:64px 32px 56px;}
  .hero-text .display{font-size:2.9rem;}
  .hero-img{min-height:380px;}
}

/* ---------- CINEMATIC HERO (home, video-loop ready) ----------
   .hero-media holds the fallback photo for now; swap the <img> for a muted
   looping <video autoplay muted loop playsinline poster="..."> later — no
   layout change needed. */
.hero-cine{position:relative;min-height:min(38vh,330px);display:flex;align-items:flex-end;overflow:hidden;background:var(--black);}
.hero-cine .hero-media{position:absolute;inset:0;z-index:0;}
.hero-cine .hero-media img,.hero-cine .hero-media video{width:100%;height:100%;object-fit:cover;display:block;}
/* Two veils: a vertical one for overall contrast, plus a left-to-right one that
   darkens the side the copy sits on while leaving the right of the video bright. */
.hero-cine .hero-veil{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(20,16,12,.78) 0%,rgba(20,16,12,.62) 34%,rgba(20,16,12,.12) 68%,rgba(20,16,12,0) 100%),
  linear-gradient(180deg,rgba(20,16,12,.42) 0%,rgba(20,16,12,.34) 42%,rgba(20,16,12,.72) 100%);}
.hero-cine .hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:88px 32px 26px;color:#fff;}
.hero-cine .eyebrow{color:var(--sand-soft);text-align:left;margin-bottom:10px;text-shadow:0 1px 3px rgba(20,16,12,.9),0 1px 16px rgba(20,16,12,.7);}
/* headline sits on one line at this height; the three-line <br> version was the
   main reason the hero needed 620px */
.hero-cine .display{color:#fff;margin-bottom:8px;font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.1;text-shadow:0 1px 2px rgba(20,16,12,.55),0 2px 10px rgba(20,16,12,.65),0 4px 30px rgba(20,16,12,.5);}
.hero-cine .hero-tagline{color:var(--sand-soft);margin-bottom:0;text-shadow:0 1px 3px rgba(20,16,12,.85),0 1px 16px rgba(20,16,12,.7);}
/* lead paragraph + stat cards are hidden in the compact hero: the same copy
   already appears in the sections directly below */
.hero-cine .hero-lead{display:none;}
.hero-cine .btn-outline{color:#fff;border-color:rgba(255,255,255,.5);}
.hero-cine .btn-outline:hover{background:rgba(255,255,255,.12);color:#fff;}
.hero-cine .hero-stats{display:none;}
.hero-cine .hero-btns{margin-top:14px;}
.hero-cine .hero-stat{background:rgba(255,255,255,.12);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);}
.hero-cine .hero-stat b{color:#fff;}
.hero-cine .hero-stat span{color:rgba(255,255,255,.78);}
@media(max-width:920px){
  .hero-cine{min-height:min(34vh,290px);}
  .hero-cine .hero-inner{padding:84px 28px 22px;}
  .hero-cine .display{font-size:1.9rem;}
}

/* ---------- WHATSAPP FLOATING BUTTON ---------- */
.wa-fab{position:fixed;right:22px;bottom:22px;z-index:900;width:56px;height:56px;border-radius:50%;
  background:#25d366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(20,16,12,.28);transition:.2s;}
.wa-fab:hover{transform:scale(1.07);box-shadow:0 14px 32px rgba(20,16,12,.34);}
.wa-fab svg{width:30px;height:30px;fill:#fff;}
@media(max-width:560px){.wa-fab{right:16px;bottom:16px;width:52px;height:52px;}}

/* ---------- ABOUT/STORY HERO (Oor Ons: photo left, intro right, text continues below) ---------- */
.about-hero{padding:64px 0 84px;}
.about-hero-grid{display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:60px;align-items:start;}
.about-hero-img{border-radius:10px;overflow:hidden;aspect-ratio:4/5;}
.about-hero-img img{width:100%;height:100%;object-fit:cover;display:block;}
.about-hero-text .eyebrow{text-align:left;margin-bottom:14px;}
.about-hero-text h1{
  font-family:var(--display);font-weight:500;text-transform:uppercase;
  font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.08;letter-spacing:.02em;
  color:var(--ink);margin-bottom:18px;
}
.about-hero-text p{color:var(--ink-soft);margin-bottom:16px;}
.about-hero-text .intro{font-size:1.06rem;color:var(--ink);}
.about-hero-cont{margin-top:26px;max-width:72ch;}
.about-hero-cont p{color:var(--ink-soft);margin-bottom:22px;}
/* The story reads as one long block of prose, so it is justified. Hyphenation
   is on because Afrikaans compounds are long enough to open rivers of white
   space in a justified column; the last line stays left. */
.about-hero-text p,.about-hero-cont p{
  text-align:justify;text-align-last:left;
  hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;
}
@media(max-width:920px){
  .about-hero{padding:36px 0 60px;}
  .about-hero-grid{grid-template-columns:1fr;gap:28px;}
}

/* ---------- TRUST STRIP ---------- */
.trust{background:var(--black);color:#e9e3d7;}
.trust .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 48px;padding-top:20px;padding-bottom:20px;}
.trust span{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:9px;}
.trust .dot{color:var(--sand-soft);}

/* ---------- CARD TRIO ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.tcard{
  display:block;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--white);transition:.3s;
}
.tcard:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(40,30,15,.12);}
.tcard .tcard-img{height:220px;overflow:hidden;position:relative;}
/* play badge overlay for video tiles on the Nuus grid */
.tcard-img .play-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(20,16,12,.18);}
.tcard-img .play-badge span{width:58px;height:58px;border-radius:50%;background:rgba(20,16,12,.55);border:2px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;transition:.2s;}
.tcard:hover .play-badge span{background:var(--sand);border-color:var(--sand);}
.tcard-img .play-badge svg{width:22px;height:22px;fill:#fff;margin-left:3px;}
.tcard .tcard-img img{width:100%;height:100%;object-fit:cover;transition:.5s;}
.tcard:hover .tcard-img img{transform:scale(1.05);}
.tcard-body{padding:30px 28px 34px;}
.tcard-body h3{font-size:1.7rem;letter-spacing:.04em;margin-bottom:10px;text-transform:uppercase;}
.tcard-body p{font-size:.92rem;color:var(--ink-soft);margin-bottom:18px;}
.tcard-link{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--sand);}
.tcard-link::after{content:' →';}
@media(max-width:860px){.trio{grid-template-columns:1fr;}}

/* ---------- FEATURE GRID (Voorsprong) ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.feat{
  position:relative;border-radius:10px;overflow:hidden;
  min-height:300px;display:flex;align-items:flex-end;
  color:var(--white);
}
.feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.feat::after{
  content:'';position:absolute;inset:0;
  /* Starts darkening higher up and lands heavier behind the caption, so the
     heading is readable from its first line rather than only near the base.
     A slight overall tint keeps the top of the tile from competing. */
  background:linear-gradient(180deg,rgba(20,16,12,.18) 0%,rgba(20,16,12,.24) 30%,rgba(20,16,12,.72) 62%,rgba(20,16,12,.95) 100%);
}
.feat-cap{position:relative;z-index:2;padding:24px 24px 26px;}
.feat-cap h3{color:var(--white);font-size:1.5rem;text-transform:uppercase;letter-spacing:.05em;line-height:1.05;margin-bottom:6px;text-shadow:0 1px 2px rgba(20,16,12,.75),0 2px 12px rgba(20,16,12,.8);}
.feat-cap p{color:#fff;font-size:.84rem;text-shadow:0 1px 2px rgba(20,16,12,.75),0 1px 10px rgba(20,16,12,.8);}
@media(max-width:860px){.feat-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr;}}

/* anchor targets clear the sticky header */
[id]{scroll-margin-top:96px;}

/* ---------- TEAM / ONTMOET DIE SPAN ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.team-card{
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;text-align:left;display:flex;flex-direction:column;
}
/* real portraits replaced the monogram circles; 4:5 keeps faces high in frame */
.team-photo{aspect-ratio:4/5;overflow:hidden;background:var(--cream-deep);}
.team-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;}
.team-body{padding:24px 26px 28px;}
.team-card h3{font-size:1.5rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;}
.team-role{font-family:var(--body);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sand);font-weight:600;display:block;margin-bottom:14px;}
.team-card p{color:var(--ink-soft);font-size:.9rem;line-height:1.7;}
@media(max-width:860px){.team{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.team{grid-template-columns:1fr;}}

/* ---------- AGE GROUPS / ALTERNATING ROWS ----------
   Compacted: the 4/3 images made every row ~400px tall no matter how short the
   copy was, and an 84px gap on top of that meant a lot of scrolling for three
   rows. Wider 16/10 images + a smaller gap bring each row closer together
   without shrinking the type. */
.row{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px;margin-bottom:44px;}
.row:last-child{margin-bottom:0;}
.row.flip .row-img{order:2;}
.row-img{border-radius:10px;overflow:hidden;aspect-ratio:16/10;max-height:300px;}
.row-img img{width:100%;height:100%;object-fit:cover;}
.row-text h3{font-size:1.9rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.row-text .age-tag{font-family:var(--body);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);font-weight:600;display:block;margin-bottom:10px;}
.row-text p{color:var(--ink-soft);margin-bottom:12px;}
/* The kitchen photo is the one portrait shot in these rows. A 16/10 cover crop
   would cut the cook and the pot out of frame, so it keeps its 4/5 shape and the
   image column narrows to match — otherwise a tall image sits against a text
   column half the page wide. */
.row-img.portrait{aspect-ratio:4/5;max-height:440px;}
.row-kitchen{grid-template-columns:minmax(0,0.68fr) 1fr;align-items:center;}
/* The age-group rows on the programme page carry ~3 paragraphs each, so a
   300px image left a lot of dead space beside the text. Here the photo stretches
   to the text's height instead.
   aspect-ratio MUST be off for this: with a ratio set, the box derives its width
   from its height, so a stretched (tall) item computes a width far wider than its
   grid column and spills over the text. Height comes from the stretched row,
   width from the column. */
.row.age-rows{align-items:stretch;}
.row.age-rows .row-img{aspect-ratio:auto;max-height:none;min-height:300px;height:100%;width:100%;}
@media(max-width:860px){
  .row{grid-template-columns:1fr;gap:20px;margin-bottom:36px;}
  .row.flip .row-img{order:0;}
  .row-img{aspect-ratio:16/9;max-height:230px;}
  .row-kitchen{grid-template-columns:1fr;}
  .row-img.portrait{aspect-ratio:4/5;max-height:360px;}
  /* stacked on a phone the photo sits above its text, so the desktop
     stretch-to-match no longer applies and it goes back to a small banner */
  .row.age-rows{align-items:center;}
  .row.age-rows .row-img{aspect-ratio:16/9;min-height:0;height:auto;max-height:230px;}
}

/* ---------- DAY GRID: timeline + vertical teaching video ---------- */
.day-grid{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:start;margin-top:36px;}
.day-grid .tl-wrap{margin-top:0;}
/* Match the timeline card to the 9:16 video beside it: the video column is
   300px wide, so its frame is 300/9*16 tall. The card is that height minus its
   own padding and the control row, and .tl fills what is left. */
@media(min-width:1001px){
  .day-grid .tl-wrap{--tl-video-h:calc(300px / 9 * 16);}
  .day-grid .tl{height:calc(var(--tl-video-h) - 16px - 58px);}
}
.vid-col{padding-top:4px;}
/* 9:16 frame for a vertical clip; the poster is swapped for the YouTube
   iframe only on click, so no player JS loads with the page */
.vid-vert{
  position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;
  background:var(--cream-deep);box-shadow:0 6px 30px rgba(20,16,12,.10);
}
.vid-vert img,.vid-vert iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;display:block;}
.vid-vert::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,12,.10),rgba(20,16,12,.30));pointer-events:none;}
.vid-vert.is-playing::after{display:none;}
.vid-play{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;padding:0;
}
.vid-play .play{
  width:66px;height:66px;border-radius:50%;background:var(--sand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 22px rgba(20,16,12,.35);transition:transform .2s,background .2s;
}
.vid-play:hover .play{transform:scale(1.07);background:var(--black);}
.vid-play .play svg{width:26px;height:26px;margin-left:3px;}

/* Ons Verhaal: the story text is capped at 72ch, which left the whole right of
   the section empty. The vertical video fills that gap instead of sitting below.
   .story-cont overrides the 72ch cap on the wrapper and re-applies it to the
   text column only, so the paragraphs keep their reading measure. */
.about-hero-cont.story-cont{
  max-width:none;display:grid;grid-template-columns:minmax(0,72ch) 1fr;
  gap:60px;align-items:start;
}
.story-cont-text{max-width:72ch;}
.story-vid{margin:0;width:min(340px, 100%);justify-self:center;}
.story-vid .vid-vert{width:100%;}
.story-vid figcaption{
  margin-top:16px;text-align:center;
  font-family:var(--display);font-size:1.5rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);
}
@media(max-width:860px){
  .about-hero-cont.story-cont{grid-template-columns:1fr;gap:32px;}
  .story-vid{width:min(320px, 82vw);justify-self:start;margin:0 auto;}
}

/* Team page personality clip: short vertical video beside a one-line aside.
   Deliberately smaller than the story video, it is a light aside, not a feature. */
.fun-clip{
  display:grid;grid-template-columns:280px 1fr;gap:52px;align-items:center;
  max-width:860px;margin:0 auto;
}
.fun-clip-vid{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 6px 30px rgba(20,16,12,.10);}
.fun-clip-vid video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--cream-deep);}
.fun-clip-text .eyebrow{display:block;text-align:left;margin-bottom:10px;}
.fun-clip-text h2{font-size:2rem;text-transform:uppercase;letter-spacing:.04em;margin:0;}
.fun-clip-text p{color:var(--ink-soft);margin-top:14px;}
@media(max-width:860px){
  .fun-clip{grid-template-columns:1fr;gap:26px;max-width:300px;text-align:center;}
  .fun-clip-text .eyebrow{text-align:center;}
}
/* reduced-motion visitors get the poster and a control bar instead of a loop;
   the pausing itself is done in JS, since CSS cannot stop autoplay */
.fun-clip-vid video[controls]{cursor:pointer;}
.vid-tag{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);font-weight:600;margin:18px 0 5px;}
.vid-title{font-size:1.24rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px;}
.vid-note{font-size:.85rem;color:var(--ink-soft);line-height:1.65;}
@media(max-width:1000px){
  .day-grid{grid-template-columns:1fr;gap:40px;}
  .vid-col{max-width:300px;margin:0 auto;text-align:center;}
}

/* ---------- FULL-BLEED PHOTO BAND ----------
   A wide breather between sections. Fixed height + object-fit keeps it a long
   strip rather than a tall block, whatever the viewport width. */
.photo-band{width:100%;overflow:hidden;line-height:0;}
.photo-band img{width:100%;height:clamp(180px,22vw,300px);object-fit:cover;object-position:center 58%;display:block;}

/* ---------- FACILITIES: intro lead + texture grid ---------- */
.lead-center{max-width:760px;margin:0 auto 46px;text-align:center;color:var(--ink-soft);}
/* texture chips: compact, they are a quick scan not nine paragraphs */
.tex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.tex{
  background:var(--white);border:1px solid var(--line);border-radius:8px;
  padding:12px 16px;display:flex;flex-direction:column;gap:1px;
}
.tex b{font-family:var(--display);font-size:1.02rem;font-weight:500;color:var(--ink);letter-spacing:.01em;}
.tex span{font-size:.76rem;color:var(--ink-soft);line-height:1.45;}
@media(max-width:860px){.tex-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.tex-grid{grid-template-columns:1fr;gap:8px;}}

/* ---------- SAFETY TILES ---------- */
.safe-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.safe{
  background:var(--cream);border-radius:12px;padding:26px 24px 28px;
  display:flex;flex-direction:column;gap:8px;
  border-top:3px solid var(--sand);
}
.safe b{font-family:var(--display);font-size:1.28rem;font-weight:500;color:var(--ink);line-height:1.2;}
.safe span{font-size:.86rem;color:var(--ink-soft);line-height:1.6;}
@media(max-width:900px){.safe-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.safe-grid{grid-template-columns:1fr;}}

/* ---------- ROUTINE TIMELINE (vertical scroll, ~3 steps in view) ----------
   A day reads top to bottom, so the list scrolls inside its own window rather
   than stretching the page. --tl-step-h drives both the row height and the
   viewport height, so exactly three rows show at a time. */
.tl-wrap{
  --tl-step-h:112px;
  position:relative;margin:36px auto 0;max-width:760px;
  /* a card frame makes it read as its own scrollable window, not page content */
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:8px 62px 8px 8px;
}
/* top and bottom fades hint that the day continues past the window */
.tl-wrap::before,.tl-wrap::after{
  content:'';position:absolute;left:8px;right:62px;height:44px;pointer-events:none;z-index:2;
  border-radius:14px;
}
.tl-wrap::before{top:8px;background:linear-gradient(180deg,#fff 10%,rgba(255,255,255,0) 100%);}
/* sits above the controls, not over them */
.tl-wrap::after{bottom:56px;background:linear-gradient(0deg,#fff 10%,rgba(255,255,255,0) 100%);}
/* No scroll-snap here. The steps only have a min-height, so a step whose note
   wraps to two lines is taller than --tl-step-h. With snapping on, a free wheel
   or drag scroll kept landing between snap points and the browser pulled the
   list back to the previous step, which read as "it jumps to the top". The
   arrow buttons scroll by one step height, so they still land cleanly without
   the browser enforcing it. */
.tl{
  display:block;height:calc(var(--tl-step-h) * 3);
  overflow-y:auto;overscroll-behavior:contain;
  -ms-overflow-style:none;scrollbar-width:none;cursor:grab;
  padding:0 8px;
}
.tl::-webkit-scrollbar{display:none;}
.tl.is-drag{cursor:grabbing;}

/* visible scroll rail + thumb on the right of the card */
.tl-rail{
  position:absolute;top:22px;bottom:64px;right:34px;width:4px;
  background:var(--cream-deep,#efe9e0);border-radius:4px;z-index:3;
}
.tl-thumb{
  position:absolute;left:0;width:4px;border-radius:4px;background:var(--sand);
  transition:top .12s linear;
}
/* step counter + arrows, centred inside the card below the list */
.tl-ctrl{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:14px 0 4px;
}
.tl-btn{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--ink);cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;
  transition:background .2s,color .2s,opacity .2s;
}
.tl-btn:hover{background:var(--ink);color:#fff;}
.tl-btn[disabled]{opacity:.28;cursor:default;}
.tl-btn:hover[disabled]{background:#fff;color:var(--ink);}
.tl-count{font-size:.74rem;letter-spacing:.1em;color:var(--ink-soft);white-space:nowrap;min-width:56px;text-align:center;}
.tl-step{
  min-height:var(--tl-step-h);position:relative;
  display:grid;grid-template-columns:96px 1fr;align-items:start;
  column-gap:26px;padding:20px 0 20px 0;
}
/* the spine runs down the gutter between time and text */
.tl-step::before{
  content:'';position:absolute;left:110px;top:0;bottom:0;width:1px;background:var(--line);
}
.tl-step:first-child::before{top:26px;}
.tl-step:last-child::before{bottom:auto;height:26px;}
.tl-step::after{
  content:'';position:absolute;left:105px;top:22px;width:11px;height:11px;border-radius:50%;
  background:var(--sand);border:2px solid #fff;z-index:1;
}
.tl-time{
  font-family:var(--display);font-size:1.5rem;color:var(--ink);line-height:1;
  text-align:right;padding-top:2px;
}
.tl-step b{
  grid-column:2;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sand);font-weight:600;
}
.tl-note{grid-column:2;font-size:.86rem;color:var(--ink-soft);line-height:1.6;margin-top:4px;}
@media(max-width:560px){
  .tl-wrap{--tl-step-h:126px;padding-right:52px;}
  .tl-wrap::before,.tl-wrap::after{right:52px;}
  .tl-step{grid-template-columns:60px 1fr;column-gap:14px;}
  .tl-step::before{left:70px;}
  .tl-step::after{left:65px;}
  .tl-time{font-size:1.2rem;}
  .tl-rail{right:24px;}
  .tl-ctrl{right:9px;}
}

/* ---------- DAILY ROUTINE ---------- */
.routine{display:flex;flex-wrap:wrap;justify-content:center;}
.routine .slot{
  flex:1;min-width:104px;text-align:center;padding:6px 14px;
  border-left:1px solid var(--line);
}
.routine .slot:first-child{border-left:none;}
.routine .time{font-family:var(--display);font-size:1.9rem;color:var(--ink);line-height:1;}
.routine .label{font-size:.8rem;color:var(--ink-soft);margin-top:8px;}
@media(max-width:760px){.routine .slot{flex:0 0 33.33%;border:none;margin-bottom:24px;}}

/* ---------- TESTIMONIALS (single-row carousel) ----------
   Was a 3-column masonry (columns:3) which made the section very tall and
   ragged. Now one row that scrolls horizontally with snap points; the arrows
   and dots are wired up in functions.php. Degrades to a plain swipeable row
   if JS is off. */
.quotes{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:4px 0 6px;
  align-items:stretch;   /* equal-height cards regardless of quote length */
  -ms-overflow-style:none;scrollbar-width:none;
}
.quotes::-webkit-scrollbar{display:none;}
.quote{
  flex:0 0 calc((100% - 44px)/3);scroll-snap-align:start;
  /* white card: the section behind is cream, so the old cream fill made the
     cards invisible once they sat side by side */
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:26px 26px 22px;display:flex;flex-direction:column;
}
.quote p{font-size:.94rem;color:var(--ink);font-style:italic;margin-bottom:14px;line-height:1.65;flex:1;}
.quote .who{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sand);font-weight:600;}
.quote .mark{font-family:var(--display);font-size:2.4rem;color:var(--sand-soft);line-height:.4;}

/* carousel controls */
.quotes-wrap{position:relative;}
.q-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  box-shadow:0 2px 14px rgba(20,16,12,.10);transition:background .2s,color .2s,opacity .2s;
}
.q-nav:hover{background:var(--ink);color:#fff;}
.q-nav[disabled]{opacity:.3;cursor:default;}
.q-nav:hover[disabled]{background:#fff;color:var(--ink);}
.q-prev{left:-16px;}
.q-next{right:-16px;}
.q-dots{display:flex;justify-content:center;gap:8px;margin-top:22px;}
.q-dot{
  width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--sand-soft);transition:background .2s,transform .2s;
}
.q-dot.is-active{background:var(--sand);transform:scale(1.35);}
@media(max-width:860px){
  .quote{flex-basis:calc((100% - 22px)/2);}
  .q-prev{left:-8px;} .q-next{right:-8px;}
}
@media(max-width:560px){
  .quote{flex-basis:100%;}
  .q-nav{display:none;}
}
@media(max-width:560px){.quotes{columns:1;}}

/* ---------- GALLERY ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.gallery img{width:100%;height:230px;object-fit:cover;border-radius:8px;}
.gallery .tall{grid-row:span 2;height:auto;}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr);}}

/* ---------- CTA BAND ---------- */
/* The closing CTA sits directly on top of the dark footer, so the two read as
   one block. It takes less padding than a normal section (92px) to keep that
   combined dark slab from swallowing the bottom of every page. */
.cta-band{background:var(--black);color:var(--white);text-align:center;padding:56px 0;}
.cta-band .section-title{color:var(--white);font-size:2.1rem;}
.cta-band p{color:rgba(255,255,255,.78);max-width:560px;margin:12px auto 24px;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px;}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:6px;
  font-family:var(--body);font-size:.95rem;color:var(--ink);background:var(--white);
}
.field textarea{min-height:110px;resize:vertical;}
.contact-info .info-line{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);}
.contact-info .info-line .ic{color:var(--sand);font-size:1.1rem;width:22px;text-align:center;}
.map{margin-top:18px;border-radius:8px;overflow:hidden;border:1px solid var(--line);}
.map iframe{width:100%;height:240px;border:0;display:block;}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:36px;}}

/* ---------- INNER PAGE HEADER ---------- */
.page-hero{position:relative;color:var(--white);text-align:center;padding:96px 0;}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Weighted to the centre where the heading and lead sit, so wide sunlit photos
   still carry white type. Deep enough that bright foliage/sky behind the text
   does not compete. */
.page-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,12,.52) 0%,rgba(20,16,12,.74) 45%,rgba(20,16,12,.72) 70%,rgba(20,16,12,.6) 100%);}
.page-hero .wrap{position:relative;z-index:2;}
.page-hero .eyebrow{color:var(--sand-soft);text-shadow:0 1px 3px rgba(20,16,12,.9),0 1px 16px rgba(20,16,12,.7);}
.page-hero h1{color:var(--white);font-size:clamp(2.4rem,5vw,4rem);text-transform:uppercase;letter-spacing:.06em;text-shadow:0 1px 2px rgba(20,16,12,.6),0 2px 12px rgba(20,16,12,.7),0 4px 30px rgba(20,16,12,.5);}
.page-hero p{color:#fff;max-width:620px;margin:16px auto 0;text-shadow:0 1px 3px rgba(20,16,12,.85),0 1px 14px rgba(20,16,12,.7);}
.breadcrumb{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);padding:18px 0;border-bottom:1px solid var(--line);}
.breadcrumb a:hover{color:var(--sand);}

/* article / prose */
/* .prose sits straight inside a <section> with no .wrap around it, so on a phone
   its text ran into both screen edges. The max-width grows by the padding, so the
   reading measure on desktop is still 760px. */
.prose{max-width:824px;margin:0 auto;padding:0 32px;}
.prose h2{font-size:2rem;text-transform:uppercase;letter-spacing:.04em;margin:48px 0 16px;}
/* That 48px is spacing between blocks inside a prose column. On a heading that
   opens the column it stacks on top of the section padding instead. */
.prose > :first-child{margin-top:0;}
.prose h3{font-size:1.4rem;margin:32px 0 12px;color:var(--ink);}
.prose p{margin-bottom:18px;color:var(--ink);}
.prose ul{margin:0 0 18px 22px;}
.prose li{margin-bottom:9px;color:var(--ink);}
.prose .first{font-size:1.15rem;color:var(--ink-soft);}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start;}
.price-card{border:1px solid var(--line);border-radius:12px;padding:38px 30px;text-align:center;background:var(--white);}
.price-card.feature{border-color:var(--sand);background:var(--cream);box-shadow:0 18px 40px rgba(40,30,15,.08);}
.price-card .tier{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px;}
.price-card .amount{font-family:var(--display);font-size:2.8rem;color:var(--ink);line-height:1;}
.price-card .per{font-size:.78rem;color:var(--ink-soft);margin-bottom:22px;}
.price-card ul{list-style:none;text-align:left;margin-bottom:26px;}
.price-card li{padding:9px 0;border-bottom:1px solid var(--line);font-size:.9rem;color:var(--ink-soft);}
.price-card li::before{content:'—  ';color:var(--sand);}
@media(max-width:860px){.price-grid{grid-template-columns:1fr;}}

/* enrolment steps: numbered discs joined by a vertical rail. The rail is drawn
   on each step except the last, so it stops at the final number instead of
   trailing into whitespace. */
.steps{list-style:none;max-width:760px;margin:44px auto 0;padding:0;counter-reset:none;}
.step{position:relative;display:grid;grid-template-columns:56px 1fr;gap:22px;padding-bottom:34px;}
.step:last-child{padding-bottom:0;}
.step::before{
  content:'';position:absolute;left:27px;top:50px;bottom:-6px;
  width:1px;background:var(--line);
}
.step:last-child::before{display:none;}
.step-num{
  position:relative;z-index:1;width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:1.5rem;color:var(--sand);
  background:var(--white);border:1px solid var(--sand);
}
.step-body h3{font-size:1.35rem;text-transform:uppercase;letter-spacing:.04em;margin:12px 0 8px;}
.step-body p{color:var(--ink-soft);font-size:.95rem;margin:0;}

/* waitlist callout: scarcity without discouraging the enquiry */
.waitlist{
  max-width:760px;margin:52px auto 0;padding:38px 40px;
  background:var(--white);border:1px solid var(--sand);border-left-width:3px;border-radius:12px;
}
.waitlist h3{font-size:1.6rem;text-transform:uppercase;letter-spacing:.04em;margin:8px 0 14px;}
.waitlist p{color:var(--ink-soft);font-size:.95rem;margin-bottom:14px;}
/* ---------- SINGLE POST (blog article) ---------- */
.post-hero{position:relative;color:var(--white);text-align:center;padding:88px 0 76px;background:var(--black);}
.post-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.post-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,12,.55),rgba(20,16,12,.75));}
.post-hero .wrap{position:relative;z-index:2;}
.post-hero .eyebrow{color:var(--sand-soft);display:block;margin-bottom:14px;}
.post-hero h1{
  color:var(--white);font-size:clamp(2rem,4vw,3.1rem);text-transform:uppercase;
  letter-spacing:.05em;max-width:20ch;margin:0 auto;
  text-shadow:0 2px 12px rgba(20,16,12,.6);
}
.post-meta{color:rgba(255,255,255,.72);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-top:16px;}
.post-body h2{font-size:1.7rem;margin:36px 0 12px;text-transform:none;letter-spacing:0;}
.post-body h3{font-size:1.25rem;margin:28px 0 10px;text-transform:none;letter-spacing:0;}
.post-body p{margin-bottom:18px;}
.post-body ul{margin:0 0 18px 20px;color:var(--ink-soft);}
.post-body li{margin-bottom:8px;}
.post-back a{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--sand);}

/* CTA buttons sit centred everywhere on the site, so these two, which live in
   left-aligned prose blocks, are centred explicitly rather than inheriting the
   text alignment of the copy around them. */
.waitlist .btn{margin-top:8px;display:block;width:fit-content;margin-left:auto;margin-right:auto;}
.about-hero-cont > .btn,.story-cont-text > .btn{display:block;width:fit-content;margin-left:auto;margin-right:auto;}
@media(max-width:860px){
  .step{grid-template-columns:44px 1fr;gap:16px;}
  .step::before{left:21px;top:42px;}
  .step-num{width:42px;height:42px;font-size:1.2rem;}
  .step-body h3{font-size:1.2rem;margin-top:7px;}
  .waitlist{padding:28px 24px;}
}

/* faq */
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  list-style:none;cursor:pointer;padding:22px 0;
  font-family:var(--display);font-size:1.35rem;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:20px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';color:var(--sand);font-size:1.6rem;font-family:var(--body);}
.faq-item[open] summary::after{content:'–';}
.faq-item p{padding:0 0 24px;color:var(--ink-soft);max-width:760px;}

/* ---------- FOOTER ---------- */
/* Footer is a footer, not a second page: one three-column band and a thin legal
   strip. The logo, blurb and buttons live inside the first column instead of on
   their own full-width row above it, which is what made this ~400px tall. */
footer.site{background:var(--black);color:#bdb6a8;padding:28px 0 12px;}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.12);}
.foot-brand{display:flex;align-items:center;gap:14px;}
.foot-brand .mark{width:40px;height:40px;}
.foot-brand strong{font-family:var(--display);font-size:1.4rem;letter-spacing:.16em;color:#fff;display:block;line-height:1;}
.foot-brand span{font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;}
.foot-actions{display:flex;gap:14px;flex-wrap:wrap;}
.foot-cols{display:grid;grid-template-columns:1.4fr 1.5fr 1.1fr;gap:40px;padding:0 0 16px;align-items:start;}
.foot-cols h4{color:#fff;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:9px;}
.foot-cols a,.foot-cols p,.foot-cols li{color:#bdb6a8;font-size:.8rem;line-height:1.55;}
.foot-cols a:hover{color:var(--sand-soft);}
.foot-cols ul{list-style:none;}
.foot-cols li{margin-bottom:3px;}
.foot-brand-col .foot-logo{margin-bottom:10px;height:32px;}
.foot-brand-col p{max-width:36ch;margin-bottom:13px;}
.foot-actions{display:flex;gap:10px;flex-wrap:wrap;}
/* single column now that the list is trimmed to the five pages parents use;
   nowrap keeps "Fooie & Inskrywing" off a second line */
.foot-links-col li{white-space:nowrap;}
.foot-contact-col .socials{margin-top:12px;}
.foot-bottom{
  padding-top:11px;border-top:1px solid rgba(255,255,255,.10);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:.72rem;color:#8c867a;
}
.foot-bottom a{color:inherit;text-decoration:underline;}
.foot-seo{color:#6b665c;}
/* The official Facebook and Instagram marks, in their own brand colours. They
   carry their own shape (circle / rounded tile), so no bordered ring around them. */
.socials{display:flex;gap:10px;}
.socials a{width:34px;height:34px;display:flex;align-items:center;justify-content:center;transition:.2s;}
.socials a:hover{transform:scale(1.08);}
.socials svg{width:32px;height:32px;display:block;}
@media(max-width:860px){
  .foot-cols{grid-template-columns:1fr 1fr;gap:32px;}
  .foot-brand-col{grid-column:1 / -1;}
}
@media(max-width:560px){
  .foot-cols{grid-template-columns:1fr;gap:26px;}
  .foot-links-col ul{columns:2;}
  .foot-bottom{flex-direction:column;gap:6px;}
}

/* ============ BLOG / VLOGS / AKTIWITEITE (from blog.html) ============ */
.subnav{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:22px 0;border-bottom:1px solid var(--line);position:sticky;top:73px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);z-index:90;}
.subnav a{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);padding:8px 18px;border:1px solid var(--line);border-radius:30px;transition:.2s;}
.subnav a:hover{color:var(--white);background:var(--black);border-color:var(--black);}
.vlog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.vlog{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--white);}
.vlog video{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;background:#000;}
.vlog .soon{aspect-ratio:16/10;background:var(--cream-deep);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;}
.vlog .vb{padding:18px 20px 22px;}
.vlog .vb h4{font-size:1.25rem;margin-bottom:6px;}
.vlog .vb p{font-size:.85rem;color:var(--ink-soft);}
.act-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.act{border-radius:10px;overflow:hidden;position:relative;}
.act img{width:100%;height:240px;object-fit:cover;display:block;}
.act .cap{padding:14px 4px 0;}
.act .cap b{font-family:var(--display);font-size:1.1rem;display:block;}
.act .cap span{font-size:.82rem;color:var(--ink-soft);}
@media(max-width:860px){.vlog-grid{grid-template-columns:1fr;}.act-grid{grid-template-columns:1fr 1fr;}}

/* ============ VIDEO PLACEHOLDER / FACADE (intro, story, tour) ============ */
/* Poster frame + sand play button + "binnekort" label. Swap .video-ph for an
   <iframe> (YouTube/Vimeo) or <video> later — no layout change needed. */
.video-band .section-head{margin-bottom:40px;}
.video-frame{
  position:relative;max-width:920px;margin:0 auto;
  aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:var(--cream-deep) center/cover no-repeat;
  border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(40,30,15,.14);
}
.video-frame::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,16,12,.16),rgba(20,16,12,.46));}
.video-frame iframe,.video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover;z-index:3;}
.video-ph{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px;cursor:pointer;}
.video-ph .play{
  width:84px;height:84px;border-radius:50%;background:var(--sand);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(20,16,12,.35);transition:.25s ease;
}
.video-ph:hover .play{transform:scale(1.07);background:var(--black);}
.video-ph .play svg{width:30px;height:30px;margin-left:4px;}
.video-ph .ph-label{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:#fff;background:rgba(20,16,12,.42);padding:7px 16px;border-radius:30px;backdrop-filter:blur(3px);}
.video-cap{text-align:center;font-size:.82rem;color:var(--ink-soft);margin-top:16px;}
@media(max-width:560px){.video-ph .play{width:64px;height:64px;}.video-ph .play svg{width:24px;height:24px;}}

/* ============ WP integration tweaks ============ */
.gh-main{display:block;}
/* Utility pages (the privacy policy) hold plain editor blocks rather than the
   mockup's sections, so they land straight in <main> with no section, no .wrap
   and, because of the global margin reset, no spacing either. */
.gh-main > p,.gh-main > h1,.gh-main > h2,.gh-main > h3,.gh-main > h4,
.gh-main > ul,.gh-main > ol,.gh-main > blockquote,.gh-main > figure{
  max-width:824px;margin-left:auto;margin-right:auto;padding:0 32px;
}
.gh-main > h1,.gh-main > h2,.gh-main > h3,.gh-main > h4{margin-top:34px;margin-bottom:10px;}
.gh-main > p,.gh-main > ul,.gh-main > ol,.gh-main > blockquote{margin-bottom:16px;}
.gh-main > ul,.gh-main > ol{padding-left:64px;}
/* Scoped to the same block list on purpose: a bare :first-child here also matches
   the <section> that opens every other page, which put a white band above the hero. */
.gh-main > :is(p,h1,h2,h3,h4,ul,ol,blockquote,figure):first-child{margin-top:56px;}
.gh-main > :is(p,h1,h2,h3,h4,ul,ol,blockquote,figure):last-child{margin-bottom:72px;}
.admin-bar header.nav{top:32px;}
@media(max-width:782px){.admin-bar header.nav{top:46px;}}
.admin-bar .subnav{top:105px;}

/* ============ FLUENT FORMS — match boutique form styling ============ */
.fluentform .ff-el-group{margin-bottom:18px;}
.fluentform .ff-el-input--label label,
.fluentform .ff-el-input--label{font-size:.72rem!important;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)!important;margin-bottom:7px;font-weight:600;}
.fluentform .ff-el-input--label label{font-weight:600;}
.fluentform input[type=text],
.fluentform input[type=email],
.fluentform input[type=tel],
.fluentform input[type=number],
.fluentform select,
.fluentform textarea{
  width:100%;padding:13px 15px!important;border:1px solid var(--line)!important;border-radius:6px!important;
  font-family:var(--body)!important;font-size:.95rem!important;color:var(--ink)!important;background:var(--white)!important;
  box-shadow:none!important;height:auto!important;line-height:1.5!important;
}
.fluentform textarea{min-height:110px;resize:vertical;}
.fluentform input:focus,.fluentform select:focus,.fluentform textarea:focus{border-color:var(--sand)!important;outline:none!important;}
.fluentform .ff-btn-submit,
.ff-btn.ff-btn-submit{
  display:inline-block!important;font-family:var(--body)!important;font-size:.82rem!important;font-weight:600!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;padding:16px 34px!important;border-radius:40px!important;
  border:1.5px solid var(--black)!important;background:var(--black)!important;color:var(--white)!important;cursor:pointer;
  transition:.25s ease;box-shadow:none!important;width:auto!important;
}
.fluentform .ff-btn-submit:hover{background:transparent!important;color:var(--black)!important;}
.fluentform .ff-message-success{background:var(--cream);border:1px solid var(--sand);color:var(--ink);padding:18px 20px;border-radius:8px;}
/* Fluent Forms' help tooltip ships a bright blue info icon, which is the only
   blue on the page. */
.fluentform .ff-el-tooltip svg{fill:var(--sand);width:14px;height:14px;vertical-align:-2px;}
.fluentform .ff-el-tooltip:hover svg{fill:var(--ink);}

/* ============ Small-screen refinements (WP visual pass) ============ */
/* Prevent the large uppercase hero wordmark from overflowing narrow phones */
@media(max-width:560px){
  .hero-text .display{font-size:2.3rem;}
  .page-hero h1{font-size:2rem;}
  section{padding:64px 0;}
}
/* Safety net against any horizontal overflow on mobile */
html,body{overflow-x:hidden;}

/* Force single-column hero + real side padding on tablet/phone (overrides any cascade issue) */
@media(max-width:920px){
  .hero{grid-template-columns:1fr !important;}
  .hero-text{padding:56px 28px 48px !important;}
  .hero-text p{max-width:100% !important;}
}
@media(max-width:560px){
  .hero-text .eyebrow{letter-spacing:.16em;}
}

/* ============ TOUCH ERGONOMICS (phone + tablet) ============
   Measured on emulated 360/390/768/1024 viewports. Nothing here changes the
   desktop layout. */

/* iOS Safari zooms the whole page in when a focused field is under 16px, and
   the form sits at the bottom of a long page, so the zoom is disorienting.
   16px exactly, only where the keyboard can appear. */
@media(max-width:860px){
  .fluentform input[type=text],
  .fluentform input[type=email],
  .fluentform input[type=tel],
  .fluentform input[type=number],
  .fluentform select,
  .fluentform textarea{font-size:16px!important;}
  .fluentform .ff-el-input--label label,
  .fluentform .ff-el-input--label{font-size:.78rem!important;}
}

/* The hamburger glyph is only 22px wide, well under a fingertip. Padding grows
   the hit area without moving the icon. */
/* GeneratePress applies `ol,ul{margin:0 0 1.5em 3em}` to every list, so the
   theme's own bullet-less lists were carrying a 51px left indent: the mobile
   nav drawer sat 51px short of the left edge, and the footer links and price
   card bullets hung away from their headings. */
.nav-links,.foot-cols ul,.price-card ul{margin-left:0;}

@media(max-width:1240px){
  .nav-inner{position:relative;}
  .hamburger{padding:10px 12px;margin:-10px -12px -10px 0;line-height:1;}
  /* Kontak Ons was hidden in the drawer, which left phones and tablets with no
     nav CTA at all. It comes back as a full-width pill under the last link. */
  .nav-cta .btn{display:block;width:calc(100% - 64px);margin:12px 32px 6px;text-align:center;}
}

/* Stacked age rows capped the photo at 230px tall, so on a tablet the image
   filled only half the column and left a band of white beside it. */
@media(max-width:860px){
  .row-img{max-height:none;width:100%;}
}

/* Carousel dots stay 8px visually; the padding gives them a 24px touch target
   on touch-sized screens (the gap goes to 0 so the row keeps its rhythm). */
@media(max-width:1024px){
  .q-dot{padding:8px;background-clip:content-box;box-sizing:content-box;}
  .q-dots{gap:0;}
}

/* Footer links are the smallest type on the site and sit in two columns, which
   put ~16px-tall tap targets next to each other on a phone. */
@media(max-width:560px){
  .foot-cols a,.foot-cols p,.foot-cols li{font-size:.84rem;line-height:1.75;}
  .foot-cols li{margin-bottom:7px;}
  .foot-cols a{display:inline-block;padding:4px 0;}
  .socials a{width:38px;height:38px;}
  .socials svg{width:34px;height:34px;}
}

/* The "Meer oor ..." links carry most of the navigation between the home page
   summaries and the deep pages, but they are 15px of letter-spaced small caps. */
@media(max-width:860px){
  /* Letter-spacing is what decides these: at 360px "Meer oor ons kleuterprogram"
     plus its arrow wanted 298px in a 296px column, so the arrow dropped to a
     second line. Slightly tighter tracking buys ~30px and keeps every one of
     these links on one line down to 360. */
  .tcard-link{display:inline-block;padding:6px 0;font-size:.76rem;letter-spacing:.11em;}
}

/* ============ PHONE LAYOUT PASS ============
   Four phone-only changes. Desktop is untouched by all of them. */

/* 1. Hero: the two buttons wrapped onto separate lines and ate a third of the
   hero. Side by side and a size down, small enough to still fit at 360px. */
@media(max-width:560px){
  .hero-cine .hero-btns{flex-wrap:nowrap;gap:8px;}
  .hero-cine .hero-btns .btn{padding:12px 14px;font-size:.64rem;letter-spacing:.09em;}
}

/* 2. Trust strip: four stacked lines became four stacked lines of dead height on
   a phone. JS moves the items into .trust-track, clones them once and adds
   .is-ticker, which turns the strip into one line that scrolls by itself. The
   track is display:contents until then, so the desktop flex row is unaffected. */
.trust-track{display:contents;}
.trust-track > .is-clone{display:none;}
@media(max-width:760px){
  .trust.is-ticker .wrap{
    flex-wrap:nowrap;justify-content:flex-start;overflow:hidden;
    gap:0;padding:16px 0;
    /* fade both ends so items enter and leave instead of popping */
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  }
  .trust.is-ticker .trust-track{
    display:flex;align-items:center;width:max-content;
    /* flex:none matters: as a flex item of .wrap the track otherwise shrinks to
       its min-content width while the items overflow it, and the -50% shift is
       measured against that shrunken box, so the loop jumps mid-strip. */
    flex:none;
    animation:gh-ticker var(--gh-ticker,26s) linear infinite;
  }
  .trust.is-ticker .trust-track > span{flex:none;padding-right:44px;}
  .trust.is-ticker .trust-track > .is-clone{display:flex;}
}
@keyframes gh-ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* a strip that never stops moving is exactly what this setting is for */
@media(prefers-reduced-motion:reduce){
  .trust.is-ticker .trust-track{animation:none;}
}

/* 3. Daily routine: 3x3 grid of times on a phone was nine boxes tall. One row
   that scrolls sideways instead, bleeding to the screen edge and cutting the
   fourth slot so it is obvious there is more. A cut-off slot turned out not to
   be enough of a hint on its own, so JS adds a rail and arrows underneath. */
.routine-wrap{position:relative;}
.r-rail,.r-nav{display:none;}
@media(max-width:760px){
  .routine{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:none;-ms-overflow-style:none;
    margin:0 -32px;padding:0 32px 4px;
  }
  .routine::-webkit-scrollbar{display:none;}
  .routine .slot{
    flex:0 0 30%;min-width:118px;scroll-snap-align:start;
    margin-bottom:0;padding:6px 14px;border-left:1px solid var(--line);
  }
  .routine .slot:first-child{border-left:none;}

  /* scrollbar-shaped rail: the shape people already read as "this scrolls" */
  .r-rail{
    display:block;position:relative;height:3px;border-radius:3px;
    background:rgba(40,30,15,.13);margin:16px auto 0;max-width:210px;
  }
  .r-thumb{
    position:absolute;top:0;left:0;height:3px;border-radius:3px;
    background:var(--sand);transition:left .1s linear;
  }
  .r-nav{
    display:flex;justify-content:center;gap:10px;margin-top:12px;
  }
  .r-nav button{
    width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
    background:var(--white);color:var(--ink);font-size:1rem;line-height:1;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
  }
  .r-nav button[disabled]{opacity:.32;}
}

/* 5. Justified body copy on phones. The list is deliberate rather than a blanket
   rule: it is every multi-line block that is currently left-aligned, found by
   walking all nine pages at 390px. Everything already centred (section leads,
   the .lead intros, photo captions) stays centred, and one-line blocks like the
   price-card bullets and the two-line photo-tile captions are left out, because
   justifying a short line just opens holes in it. */
@media(max-width:760px){
  .prose p,
  .row-text p,
  .faq-item p,
  .team-body p,
  .step-body p,
  .tcard-body p,
  .waitlist p,
  .quote p,
  .about-hero-text p,.about-hero-cont p,
  p.first,p.intro{
    text-align:justify;text-align-last:left;
    hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;
  }
}

/* 4. Footer: Skakels and Kontak side by side instead of stacked, which is most
   of the footer's height on a phone. Kontak gets the wider column because the
   e-mail address is the longest unbreakable string on the site: at 360px it is
   the one thing that decides these numbers. */
@media(max-width:560px){
  .foot-cols{grid-template-columns:0.95fr 1.25fr;gap:20px 14px;}
  .foot-brand-col{grid-column:1 / -1;}
  .foot-links-col ul{columns:1;}
  .foot-cols a,.foot-cols p,.foot-cols li{font-size:.8rem;line-height:1.7;}
  .foot-cols li{margin-bottom:5px;}
  .foot-contact-col a[href^="mailto"]{font-size:.72rem;letter-spacing:0;white-space:nowrap;}
  /* The brand block spans the full width here, so logo and buttons centre on it
     rather than hanging off the left edge above two left-aligned columns. */
  .foot-brand-col{text-align:center;}
  .foot-brand-col .foot-logo{margin-left:auto;margin-right:auto;margin-bottom:14px;}
  .foot-actions{justify-content:center;gap:12px;}
  /* the icons were sitting tight against each other and against the hours line */
  .foot-contact-col .socials{margin-top:20px;gap:16px;}
}

/* The contact block's supporting lines run at body size, and "Maandag – Vrydag ·
   06:40 – 17:30" is 5px too wide for the column at 360px, so it broke after the
   dash. A step down fits it, and the address, e-mail and number with it. */
@media(max-width:560px){
  .contact-info .info-line .muted{font-size:.9rem;}
}