/* ==========================================================================
   Occasional Child Care Centre Diamond Creek — concept design system.

   The whole look comes off their own sign: five hand drawn children holding
   hands in pink, gold, green, blue and orange, inked on a white card with a
   rounded orange border. So the site is chalk and crayon on warm paper, with
   every line drawn on as you scroll rather than faded in.

   Palette sampled from that sign, not guessed. Text variants are darkened off
   the same hue so their colours stay theirs and still clear 4.5:1.
   ========================================================================== */

:root{
  /* grounds */
  --paper:#FFF9EF;
  --paper-2:#FFFDF8;
  --paper-3:#FBF1DF;
  --board:#4A7159;          /* the one chalkboard band */
  --board-dk:#3C5E49;

  /* ink */
  --ink:#3B3931;
  --ink-soft:#5F5B50;
  --ink-faint:#726C5E;

  /* their five children, straight off the sign */
  --pink:#E27CB6;   --pink-t:#A83C77;
  --gold:#F5A02A;   --gold-t:#8F5000;
  --lime:#93C233;   --lime-t:#4F7209;
  --sky:#5EB6DC;    --sky-t:#186F96;  --sky-btn:#1B7BA6;
  --orange:#F58220; --orange-t:#A94E06;
  --orange-btn:#BC5602;      /* white type sits on this one, 4.7:1 */
  --orange-sh:#7E3A02;
  --sun:#F8D93A;

  --rule:#E8DCC6;
  --shadow:0 10px 30px rgba(90,74,42,.10);

  --f-display:"Baloo 2",system-ui,sans-serif;
  --f-body:"Nunito",system-ui,sans-serif;
  --f-chalk:"Caveat",cursive;

  --wrap:1180px;
  --hdr:78px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* the paper itself: a very soft grain so nothing sits on flat white */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:radial-gradient(rgba(160,140,100,.10) 1px,transparent 1px);
  background-size:4px 4px;
}
img{max-width:100%; display:block; height:auto}
a{color:var(--sky-t)}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:800; line-height:1.08; margin:0 0 .45em; letter-spacing:-.01em}
h1{font-size:clamp(2.5rem,6.2vw,4.35rem)}
h2{font-size:clamp(2rem,4.2vw,3.1rem)}
h3{font-size:clamp(1.25rem,2vw,1.55rem)}
p{margin:0 0 1.05em}
.wrap{width:min(100% - 40px,var(--wrap)); margin-inline:auto; position:relative; z-index:2}
section[id]{scroll-margin-top:96px}
@media (max-width:640px){ section[id]{scroll-margin-top:86px} }

/* --- the chalk annotation voice ----------------------------------------- */
.chalk{font-family:var(--f-chalk); font-weight:700; line-height:1.25}
.kicker{
  font-family:var(--f-chalk); font-size:clamp(1.4rem,2.6vw,1.9rem); font-weight:700;
  color:var(--gold-t); margin:0 0 .1em; display:block; transform:rotate(-1.4deg);
}
.lede{font-size:clamp(1.08rem,1.6vw,1.25rem); color:var(--ink-soft); max-width:60ch}

/* a drawn underline that sweeps under a word */
.uline{position:relative; display:inline-block}
.uline svg{position:absolute; left:-4%; bottom:-.34em; width:108%; height:.52em; overflow:visible}

/* ==========================================================================
   header
   ========================================================================== */
.hd{
  position:sticky; top:0; z-index:60; background:rgba(255,249,239,.92);
  backdrop-filter:blur(10px) saturate(150%); border-bottom:2px solid var(--rule);
}
@supports not (backdrop-filter:blur(2px)){ .hd{background:#FFF9EF} }
.hd-in{display:flex; align-items:center; gap:20px; height:var(--hdr)}
.hd-logo{display:flex; align-items:center; text-decoration:none; flex:0 0 auto}
.hd-logo img{height:54px; width:auto}
.nav{display:flex; gap:24px; margin-left:auto; align-items:center}
.nav a{
  color:var(--ink); text-decoration:none; font-weight:700; font-size:.96rem;
  padding:12px 9px; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:9px; right:9px; bottom:6px; height:3px; border-radius:3px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .28s ease;
}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.hd-cta{flex:0 0 auto}
.burger{
  display:none; margin-left:auto; width:52px; height:52px; border:2px solid var(--ink);
  border-radius:16px; background:var(--paper-2); cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger i{display:block; width:22px; height:3px; background:var(--ink); border-radius:3px; transition:transform .25s ease,opacity .25s ease}
.burger.on i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mnav{
  position:fixed; left:0; right:0; top:var(--hdr); z-index:55; background:var(--paper);
  border-bottom:2px solid var(--rule); padding:10px 20px 26px;
  transform:translateY(-118%); transition:transform .34s cubic-bezier(.22,1,.36,1);
  max-height:calc(100dvh - var(--hdr)); overflow-y:auto;
}
.mnav.on{transform:none}
.mnav a{
  display:block; padding:16px 6px; font-family:var(--f-display); font-weight:700;
  font-size:1.2rem; color:var(--ink); text-decoration:none; border-bottom:2px dashed var(--rule);
}
.mnav .btn{margin-top:20px; width:100%}
/* .mnav a is more specific than .btn-1, so the drawer's CTA needs its colour said again */
.mnav a.btn-1{color:#fff}
.mnav a.btn-2{color:var(--ink)}

/* ==========================================================================
   buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:56px; padding:0 26px; border-radius:999px; border:2px solid transparent;
  font-family:var(--f-display); font-weight:700; font-size:1.02rem; text-decoration:none;
  cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn-1{background:var(--orange-btn); color:#fff; box-shadow:0 5px 0 var(--orange-sh)}
.btn-1:hover{transform:translateY(-2px); box-shadow:0 7px 0 var(--orange-sh)}
.btn-1:active{transform:translateY(3px); box-shadow:0 2px 0 var(--orange-sh)}
.btn-2{background:var(--paper-2); color:var(--ink); border-color:var(--ink); box-shadow:0 5px 0 rgba(59,57,49,.25)}
.btn-2:hover{transform:translateY(-2px)}
.btn-2:active{transform:translateY(3px); box-shadow:0 2px 0 rgba(59,57,49,.25)}
.btn-w{background:#fff; color:var(--board-dk); box-shadow:0 5px 0 rgba(0,0,0,.22)}
.btn:disabled{background:#DED7C6; color:#6E6858; box-shadow:0 5px 0 #C3BBA6; cursor:not-allowed; transform:none}

/* ==========================================================================
   hero
   ========================================================================== */
.hero{position:relative; padding:0 0 78px; overflow:hidden}
.hero-media{position:absolute; inset:0 0 auto; height:100%; z-index:0; overflow:hidden}
.hero-media video,.hero-media img.hm{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* the wash that keeps it light and bright and keeps the type readable */
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(255,249,239,.86) 0%,rgba(255,249,239,.74) 42%,rgba(255,249,239,.94) 88%,var(--paper) 100%),
    linear-gradient(100deg,rgba(255,249,239,.95) 0 34%,rgba(255,249,239,.46) 62%,rgba(255,249,239,.66) 100%);
}
@media (max-width:900px){
  .hero-media::after{
    background:linear-gradient(180deg,rgba(255,249,239,.90) 0%,rgba(255,249,239,.88) 55%,rgba(255,249,239,.97) 90%,var(--paper) 100%);
  }
}
.hero-in{
  position:relative; z-index:2; display:grid; grid-template-columns:1fr 430px; gap:52px;
  align-items:center; padding-top:64px; min-height:clamp(560px,74vh,760px);
}
.hero-copy h1{margin-bottom:.3em}
.hero-copy .lede{font-size:clamp(1.12rem,1.7vw,1.32rem); color:var(--ink-soft)}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px}
.hero-facts{
  display:flex; gap:8px 26px; flex-wrap:wrap; margin-top:34px;
  font-family:var(--f-chalk); font-size:1.32rem; font-weight:700; color:var(--ink-soft);
}
.hero-facts span{display:inline-flex; align-items:center; gap:9px}
.hero-facts b{color:var(--pink-t); font-weight:700}

/* the sky doodles that draw themselves on. z-index 0 against the content's 2,
   and kept out of the type column: a chalk line crossing a headline is the one
   thing that makes this look like a mistake rather than a drawing. */
.sky-art{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.sky-art svg{position:absolute; overflow:visible}

/* ==========================================================================
   the hero quiz card — their sign, then three questions off their own pages
   ========================================================================== */
.qz{
  background:var(--paper-2); border:3px solid var(--ink); border-radius:28px;
  box-shadow:10px 12px 0 rgba(59,57,49,.14); overflow:hidden; position:relative;
}
.qz-top{
  background:linear-gradient(180deg,rgba(245,160,42,.20),rgba(245,160,42,0));
  padding:18px 20px 14px; text-align:center; border-bottom:2px dashed var(--rule);
}
.qz-top img{height:82px; width:auto; margin:0 auto}
.qz-body{padding:22px 22px 24px}
.qz-step{
  font-family:var(--f-chalk); font-size:1.18rem; font-weight:700;
  color:var(--gold-t); margin:0 0 2px;
}
.qz-q{font-family:var(--f-display); font-weight:800; font-size:1.32rem; line-height:1.2; margin:0 0 16px}
.qz-opts{display:grid; gap:10px; margin-bottom:18px}
.qz-opt{
  display:flex; align-items:center; gap:12px; width:100%; min-height:56px;
  padding:12px 16px; text-align:left; border:2px solid var(--rule); border-radius:18px;
  background:var(--paper); font-family:var(--f-body); font-weight:700; font-size:1rem;
  color:var(--ink); cursor:pointer; transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.qz-opt:hover{border-color:var(--gold); transform:translateX(3px)}
.qz-opt.sel{border-color:var(--lime-t); background:rgba(147,194,51,.14)}
.qz-opt i{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:2px solid var(--rule);
  display:grid; place-items:center; font-style:normal;
}
.qz-opt.sel i{border-color:var(--lime-t); background:var(--lime-t); color:#fff}
.qz-opt.sel i::after{content:"✓"; font-size:.82rem; font-weight:900; line-height:1}

/* floating label fields — SDT, 56px targets, label lifts on focus/fill */
.fld{position:relative; margin-bottom:12px}
.fld input,.fld textarea,.fld select{
  width:100%; min-height:58px; padding:22px 16px 8px; border:2px solid var(--rule);
  border-radius:16px; background:var(--paper); font-family:var(--f-body); font-size:1rem;
  font-weight:600; color:var(--ink); transition:border-color .18s ease,box-shadow .18s ease;
}
.fld textarea{min-height:112px; padding-top:26px; resize:vertical}
.fld select{appearance:none; padding-right:44px; cursor:pointer}
.fld.sel-w::after{
  content:""; position:absolute; right:18px; top:32px; width:9px; height:9px;
  border-right:2.5px solid var(--ink-soft); border-bottom:2.5px solid var(--ink-soft);
  transform:rotate(45deg); pointer-events:none;
}
.fld label{
  position:absolute; left:17px; top:18px; font-size:1rem; font-weight:600; color:var(--ink-faint);
  pointer-events:none; transform-origin:left top; transition:transform .18s ease,color .18s ease;
}
.fld input:focus,.fld textarea:focus,.fld select:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(245,160,42,.20);
}
.fld input:focus+label,.fld textarea:focus+label,.fld select:focus+label,
.fld input:not(:placeholder-shown)+label,.fld textarea:not(:placeholder-shown)+label,
.fld select.has+label{transform:translateY(-11px) scale(.76); color:var(--gold-t)}
.fld select+label{top:18px}
.qz-next{width:100%}
.qz-priv{font-size:.83rem; color:var(--ink-faint); margin:12px 0 0; text-align:center; line-height:1.5}
.qz-bar{display:flex; gap:6px; margin-bottom:16px}
.qz-bar i{flex:1; height:6px; border-radius:6px; background:var(--rule); transition:background .3s ease}
.qz-bar i.on{background:var(--gold)}
.qz-res h3{color:var(--lime-t); text-transform:none}
.qz-res ul{margin:0 0 16px; padding-left:20px}
.qz-res li{margin-bottom:7px}

/* ==========================================================================
   generic sections
   ========================================================================== */
.sec{padding:96px 0; position:relative}
.sec-2{background:var(--paper-2); border-block:2px solid var(--rule)}
.sec-3{background:var(--paper-3)}
.sec-head{max-width:66ch; margin-bottom:52px; position:relative}
.sec-head.mid{margin-inline:auto; text-align:center}

/* the paper strip of facts under the hero */
.facts{
  background:var(--paper-2); border-block:2px solid var(--rule);
  padding:34px 0;
}
.facts-in{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center}
.fact b{
  display:block; font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1; color:var(--ink);
}
.fact span{font-family:var(--f-chalk); font-size:1.22rem; font-weight:700; color:var(--ink-soft)}
.fact:nth-child(1) b{color:var(--pink-t)}
.fact:nth-child(2) b{color:var(--gold-t)}
.fact:nth-child(3) b{color:var(--lime-t)}
.fact:nth-child(4) b{color:var(--sky-t)}

/* --- care cards. deliberately not a row of three ------------------------- */
.care{display:grid; grid-template-columns:repeat(6,1fr); gap:20px}
.card{
  background:var(--paper-2); border:2.5px solid var(--ink); border-radius:24px;
  padding:26px 24px 28px; position:relative; box-shadow:7px 8px 0 rgba(59,57,49,.10);
  transition:transform .22s ease,box-shadow .22s ease;
}
.card:hover{transform:translate(-2px,-3px); box-shadow:10px 12px 0 rgba(59,57,49,.13)}
.card h3{margin-bottom:.35em}
.card p{margin:0; color:var(--ink-soft); font-size:.98rem}
.card .ic{width:62px; height:62px; margin-bottom:14px}
.care .card:nth-child(1){grid-column:span 3}
.care .card:nth-child(2){grid-column:span 3}
.care .card:nth-child(3){grid-column:span 2}
.care .card:nth-child(4){grid-column:span 2}
.care .card:nth-child(5){grid-column:span 2}
.tag{
  position:absolute; top:-14px; right:20px; font-family:var(--f-chalk); font-weight:700;
  font-size:1.05rem; padding:2px 14px; border-radius:999px; border:2px solid var(--ink);
  background:var(--sun); color:var(--ink);
}

/* --- rooms / gallery ----------------------------------------------------- */
.rooms{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
.shot{
  position:relative; border:2.5px solid var(--ink); border-radius:22px; overflow:hidden;
  background:var(--paper-2); box-shadow:7px 8px 0 rgba(59,57,49,.10);
}
.shot img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.shot figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:26px 16px 13px;
  background:linear-gradient(180deg,rgba(41,36,25,0),rgba(41,36,25,.82));
  color:#fff; font-family:var(--f-chalk); font-weight:700; font-size:1.24rem;
}
.rooms .shot:nth-child(1){grid-column:span 7}
.rooms .shot:nth-child(2){grid-column:span 5}
.rooms .shot:nth-child(3){grid-column:span 4}
.rooms .shot:nth-child(4){grid-column:span 4}
.rooms .shot:nth-child(5){grid-column:span 4}

/* --- the chalkboard band, the one dark section --------------------------- */
.board{
  background:var(--board); color:#FDFBF4; position:relative; overflow:hidden;
  border-block:6px solid #8A6538;
}
.board::before{
  content:""; position:absolute; inset:0; opacity:.30; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.6) .6px,transparent .6px);
  background-size:5px 5px;
}
.board h2,.board h3{color:#fff}
.board .kicker{color:var(--sun)}
.board .lede{color:rgba(255,255,255,.94)}
/* the day, as a chalk timeline */
.day{position:relative; margin-top:20px}
.day-line{position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none}
.slot{
  display:grid; grid-template-columns:118px 1fr; gap:24px; align-items:start;
  padding:20px 0 20px 0; border-bottom:2px dashed rgba(255,255,255,.28);
}
.slot:last-child{border-bottom:0}
.slot time{
  font-family:var(--f-chalk); font-weight:700; font-size:1.55rem; color:var(--sun);
  line-height:1.1; padding-top:2px;
}
.slot h3{font-size:1.22rem; margin-bottom:.25em}
.slot p{margin:0; color:rgba(255,255,255,.93); font-size:.99rem}

/* --- fees ---------------------------------------------------------------- */
.fees{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start}
.fee{
  border:2.5px solid var(--ink); border-radius:24px; padding:28px 26px;
  background:var(--paper-2); box-shadow:7px 8px 0 rgba(59,57,49,.10); position:relative;
}
.fee .amt{
  font-family:var(--f-display); font-weight:800; font-size:clamp(2.4rem,5vw,3.4rem);
  line-height:1; color:var(--orange-t); margin:6px 0 2px;
}
.fee .amt small{font-size:.4em; font-weight:700; color:var(--ink-soft)}
.fee p{margin:8px 0 0; color:var(--ink-soft); font-size:.98rem}
.note{
  margin-top:26px; padding:20px 22px; border:2px dashed var(--gold);
  border-radius:20px; background:rgba(245,160,42,.09); font-size:.96rem; color:var(--ink-soft);
}
.note b{color:var(--ink)}

/* --- bring list, drawn ticks not tick bullets ---------------------------- */
.bring{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.bring ul{list-style:none; margin:0; padding:0}
.bring li{
  display:flex; gap:12px; align-items:flex-start; padding:9px 0;
  border-bottom:2px dashed var(--rule); font-size:1rem;
}
.bring li:last-child{border-bottom:0}
.bring li svg{flex:0 0 auto; width:24px; height:24px; margin-top:3px}
.warn{
  border:2.5px solid var(--pink-t); border-radius:22px; padding:24px 26px;
  background:rgba(226,124,182,.10); margin-top:30px;
}
.warn h3{color:var(--pink-t); margin-bottom:.35em}
.warn p{margin:0; color:var(--ink-soft)}

/* --- safety ------------------------------------------------------------- */
.safe{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center}
.safe-list{list-style:none; margin:0; padding:0}
.safe-list li{
  display:flex; gap:14px; align-items:flex-start; padding:13px 0;
  border-bottom:2px dashed var(--rule); font-size:1.02rem;
}
.safe-list li:last-child{border-bottom:0}
.safe-list b{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--sky-btn);
  color:#fff; display:grid; place-items:center; font-family:var(--f-display); font-size:1rem;
}

/* --- enquiry ------------------------------------------------------------- */
.enq{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
.form-card{
  background:var(--paper-2); border:3px solid var(--ink); border-radius:28px;
  box-shadow:10px 12px 0 rgba(59,57,49,.14); overflow:hidden;
}
.form-card .qz-top{background:linear-gradient(180deg,rgba(94,182,220,.20),rgba(94,182,220,0))}
.form-card .inner{padding:24px 24px 26px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.ok-panel{
  display:none; padding:34px 26px; text-align:center;
}
.ok-panel.on{display:block}
.ok-panel h3{color:var(--lime-t)}
.detail{list-style:none; margin:0 0 26px; padding:0}
.detail li{display:flex; gap:14px; align-items:flex-start; padding:13px 0; border-bottom:2px dashed var(--rule)}
.detail li:last-child{border-bottom:0}
.detail svg{flex:0 0 auto; width:26px; height:26px; margin-top:2px}
.detail b{display:block; font-family:var(--f-display); font-size:1.06rem}
.detail a{color:var(--ink); text-decoration:none; font-weight:700; display:inline-block; padding:10px 0}
.detail a:hover{color:var(--gold-t); text-decoration:underline}
.map{border:2.5px solid var(--ink); border-radius:22px; overflow:hidden; box-shadow:7px 8px 0 rgba(59,57,49,.10)}
.map iframe{display:block; width:100%; height:290px; border:0}

/* --- footer -------------------------------------------------------------- */
.ft{background:var(--paper-3); border-top:2px solid var(--rule); padding:56px 0 26px}
.ft-in{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:38px}
.ft img.fl{height:74px; width:auto; margin-bottom:16px}
.ft h4{font-family:var(--f-display); font-size:1.06rem; margin-bottom:.6em; color:var(--ink)}
.ft a{display:inline-block; color:var(--ink-soft); text-decoration:none; padding:7px 0; font-size:.97rem}
.ft a:hover{color:var(--gold-t)}
.ft p{color:var(--ink-soft); font-size:.97rem}
.ft-bot{
  margin-top:38px; padding-top:22px; border-top:2px dashed var(--rule);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.88rem; color:var(--ink-faint);
}
.ft-bot a{color:var(--ink-faint); padding:10px 0; display:inline-block}
.by{color:var(--ink-faint); text-decoration:none; font-size:.88rem; display:inline-block; padding:9px 0}
.by b{color:var(--gold-t); font-weight:800}
.disc{
  margin-top:16px; font-size:.82rem; color:var(--ink-faint); line-height:1.6; max-width:78ch;
}

/* --- the pinned phone bar ------------------------------------------------ */
.pin{
  position:fixed; left:0; right:0; bottom:0; z-index:58; display:none;
  gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,249,239,.94); backdrop-filter:blur(12px) saturate(150%);
  border-top:2px solid var(--rule); transform:translateY(120%); transition:transform .3s cubic-bezier(.22,1,.36,1);
}
@supports not (backdrop-filter:blur(2px)){ .pin{background:#FFF9EF} }
.pin.on{transform:none}
.pin .btn{flex:1; min-height:54px; font-size:.98rem; padding:0 12px}

/* ==========================================================================
   motion — everything is drawn on, nothing fades in from nowhere
   ========================================================================== */
.reveal{opacity:0; transform:translateY(22px); filter:blur(6px)}
.reveal.in{opacity:1; transform:none; filter:none; transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1),filter .7s ease}
.reveal.d1.in{transition-delay:.09s} .reveal.d2.in{transition-delay:.18s}
.reveal.d3.in{transition-delay:.27s} .reveal.d4.in{transition-delay:.36s}
.reveal.d5.in{transition-delay:.45s}

/* a chalk path draws itself */
.draw path,.draw line,.draw circle,.draw ellipse,.draw polyline,.draw rect{
  stroke-dasharray:var(--len,1200); stroke-dashoffset:var(--len,1200);
}
.draw.in path,.draw.in line,.draw.in circle,.draw.in ellipse,.draw.in polyline,.draw.in rect{
  stroke-dashoffset:0; transition:stroke-dashoffset 1.25s cubic-bezier(.5,0,.2,1);
}
.draw.in .s1{transition-delay:.10s} .draw.in .s2{transition-delay:.26s}
.draw.in .s3{transition-delay:.42s} .draw.in .s4{transition-delay:.58s}
.draw.in .s5{transition-delay:.74s} .draw.in .s6{transition-delay:.90s}

.hero-copy .w{display:inline-block; opacity:0; transform:translateY(26px) rotate(-3deg)}
.hero-copy.go .w{opacity:1; transform:none; transition:opacity .6s ease,transform .68s cubic-bezier(.22,1,.36,1)}

/* scroll progress, drawn as a chalk line */
.prog{position:fixed; top:0; left:0; height:4px; z-index:70; background:var(--orange); width:0; border-radius:0 4px 4px 0}

/* the dust that drifts off the chalk */
.dust{position:fixed; inset:0; pointer-events:none; z-index:1}

/* honour the OS setting, and the ?noanim screenshot switch */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none; filter:none}
  .draw path,.draw line,.draw circle,.draw ellipse,.draw polyline,.draw rect{stroke-dashoffset:0}
  .hero-copy .w{opacity:1; transform:none}
}
html.noanim .reveal{opacity:1 !important; transform:none !important; filter:none !important}
html.noanim .draw path,html.noanim .draw line,html.noanim .draw circle,
html.noanim .draw ellipse,html.noanim .draw polyline,html.noanim .draw rect{stroke-dashoffset:0 !important}
html.noanim .hero-copy .w{opacity:1 !important; transform:none !important}
html.noanim .dust{display:none}

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width:1024px){
  .hero-in{grid-template-columns:1fr 380px; gap:34px}
  .care .card:nth-child(n){grid-column:span 3}
  .rooms .shot:nth-child(1),.rooms .shot:nth-child(2){grid-column:span 6}
  .rooms .shot:nth-child(n+3){grid-column:span 4}
  .bring{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav,.hd-cta{display:none}
  .burger{display:flex}
  .hero-in{grid-template-columns:1fr; padding-top:38px; min-height:0}
  /* once the hero is one column there is no clear sky left to draw in, so the
     doodles come off rather than crossing the headline */
  .sky-art{display:none}
  .safe,.enq,.fees{grid-template-columns:1fr; gap:30px}
  .ft-in{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  :root{--hdr:70px}
  .hd-logo img{height:46px}
  .sec{padding:64px 0}
  .facts-in{grid-template-columns:1fr 1fr; gap:26px 16px}
  .care{grid-template-columns:1fr; gap:16px}
  .care .card:nth-child(n){grid-column:span 1}
  .rooms{grid-template-columns:1fr; gap:14px}
  .rooms .shot:nth-child(n){grid-column:span 1}
  .bring{grid-template-columns:1fr; gap:8px}
  .two{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr; gap:26px}
  /* the pinned bar carries both of these, and leaving them here pushed the
     quiz card most of a screen further down */
  .hero-cta{display:none}
  .slot{grid-template-columns:1fr; gap:4px; padding:16px 0}
  .slot time{font-size:1.4rem}
  .card{padding:22px 20px 24px}
  .fee{padding:24px 20px}
  .pin{display:flex}
  .ft-bot{flex-direction:column; gap:6px}
  .sec-head{margin-bottom:36px}
  .hero-facts{font-size:1.18rem; gap:6px 18px; margin-top:26px}
}
/* keep the chat bubble clear of the pinned bar. this block is emitted after
   the chat widget's own style block, so it is also restated there. */
@media (max-width:640px){
  .occ-fab{bottom:calc(84px + env(safe-area-inset-bottom)) !important}
}