/* Susan's Learn and Play, the inner pages.

   Loaded after v2.css, so every page shares the home page's fonts, colours,
   plum push-buttons, frosted bar, colour-band menu, photos, footer and phone
   dock. This file adds the pieces only the inner pages use.

   Each page sits at its own time of day under the big tree, and each section
   moves like something from a real day at family day care:

     top      every page    the tree grows in on its hill, words pop up, the swing sways
     abacus   about         counting beads slide across, one child at a time
     rainbow  about         Rainbow Bridge's arcs draw themselves across the sky
     jars     play          paint rises up each activity card like a jar being filled
     board    play          the school list is chalked up line by line
     trail    play          each outing pops in, one stop after another
     clock    day           a classroom clock ticks from 8am to 5pm as you read the day
     tea      day           a folder of weeks; pick a day and its two teas land
     tag      enrol         a price tag swings on its string
     walk     enrol         the steps hold still while each one grows into colour
     flaps    faq           every answer is a lift-the-flap
     home     every page    the sun goes down behind the tree

   The default CSS is the calm, complete layout. html.motion (set before the
   page paints, and removed by pages.js if the scripts can't run) only adds
   the starting positions the animations need. */

/* ------------------------------------------------------------------ top */
.top{--hillh:clamp(110px,20vh,200px);position:relative;z-index:1;display:flex;align-items:center;min-height:max(80svh,640px);overflow:clip;padding:10rem var(--gut) calc(var(--hillh) + 2.5rem);background:linear-gradient(var(--s1,#ffe7b3),var(--s2,#fff1d2) 58%,#fff6e2)}
.top__copy{position:relative;z-index:4;width:min(50vw,44rem);margin-left:max(0px,calc((100vw - 100rem)/2))}
.top__copy::before{content:"";position:absolute;z-index:-1;inset:-16% -22% -18% -40%;background:radial-gradient(closest-side,rgba(255,243,214,.94) 40%,rgba(255,243,214,.7) 66%,rgba(255,243,214,0));pointer-events:none}
.top__title{font-size:clamp(2.8rem,1.3rem + 4.3vw,5.7rem);font-weight:800;line-height:1.03}
.top__title .w{display:inline-block}
.top__lead{margin:1.2rem 0 1.6rem;font-size:1.08em;color:var(--ink)}
.top .facts{margin-bottom:1.7rem}
.top__scene{position:absolute;z-index:2;right:max(-2vw,calc((100vw - 118rem)/2));bottom:calc(var(--hillh)*.42);width:min(44vw,calc(80svh - 7rem),46rem)}
.top .hill{bottom:-1px;height:var(--hillh)}
.top .cloud--a{top:20%;left:46%}
.top .cloud--b{top:11%;right:5%}
.crumbs{display:flex;flex-wrap:wrap;gap:.3rem .5rem;margin:0 0 1rem;font-family:var(--hand);font-weight:600;font-size:.98rem;color:var(--soft)}
.crumbs a{color:var(--plum);text-underline-offset:.25em;text-decoration-color:rgba(84,41,143,.35)}
.crumbs li+li::before{content:"/";margin-right:.5rem;opacity:.45}
.motion:not(.live) .top__copy,.motion:not(.live) .top__scene{visibility:hidden}
/* Desktop: twice as much grass under the tree, so the next section's wave
   doesn't eat the lawn. */
@media (min-width:901px){
  .top{--hillh:clamp(220px,40vh,400px)}
  .top__scene{bottom:calc(var(--hillh)*.5)}
}

/* --------------------------------------------------------------- bands
   A plain coloured section with a soft wave along its top edge. */
.band{position:relative;z-index:2;padding-block:clamp(6.5rem,12vw,11rem);background:var(--bg,var(--sky))}
.band>.edge{color:var(--bg,var(--sky))}
.band--tight{padding-block:clamp(5rem,9vw,8rem)}
.band h2{font-size:clamp(2.2rem,1.4rem + 2.9vw,4.2rem)}
.helpers h2,.meet__copy h2,.chat__head h2{font-size:clamp(2.2rem,1.4rem + 2.6vw,3.9rem)}
.band__head{max-width:46rem;margin-bottom:clamp(2.2rem,4.5vw,3.6rem)}
.band__head p{margin-top:1rem}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.2rem,6vw,6rem);align-items:center}
.split--flip>:first-child{order:2}
.split__copy p{margin-top:1rem}
.split__copy .cta,.split__copy .hand{margin-top:1.6rem}
.split__copy>.hand{display:inline-block}
.split .pic{aspect-ratio:4/4.4;overflow:hidden}
.split .pic--wide{aspect-ratio:16/10}
.note-line{margin-top:1.4rem;font-family:var(--hand);font-weight:600;color:var(--plum)}

/* ---------------------------------------------------------- the abacus
   Two wires of counting beads in a wooden frame. */
.abacus{position:relative;padding:clamp(1.4rem,3vw,2.4rem) clamp(1.2rem,3vw,2.6rem);border:clamp(10px,1.4vw,16px) solid #e7a64a;border-radius:30px;background:#fffaf0;box-shadow:inset 0 0 0 3px #c9852c,var(--lift)}
.abacus__row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem 1.2rem;align-items:center}
.abacus__row+.abacus__row{margin-top:clamp(1.4rem,3vw,2.2rem);padding-top:clamp(1.4rem,3vw,2.2rem);border-top:2px dashed rgba(84,41,143,.16)}
.abacus__n{grid-row:span 2;min-width:1.4ch;color:var(--c);font-family:var(--hand);font-weight:800;font-size:clamp(3.4rem,2.4rem + 3vw,5.6rem);line-height:.9;text-align:center}
.abacus__wire{position:relative;display:flex;gap:clamp(.2rem,.5vw,.4rem);padding-block:.3rem}
.abacus__wire::before{content:"";position:absolute;left:-.6rem;right:-.6rem;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:#b98a52}
.bead{position:relative;flex:none;width:clamp(2rem,3.4vw,3rem);aspect-ratio:1/.86;border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.75) 0 14%,rgba(255,255,255,0) 15%),var(--b);box-shadow:inset 0 -4px 0 rgba(0,0,0,.14),0 4px 6px -3px rgba(46,26,80,.35)}
.abacus__label{margin:0;max-width:none;font-family:var(--hand);font-weight:600;font-size:clamp(1rem,.95rem + .3vw,1.2rem);line-height:1.25;color:var(--ink)}

/* --------------------------------------------------------- the rainbow */
.rainbow{background:var(--bg,#e9f6fb)}
.rainbow__sky{position:relative;max-width:60rem;margin-inline:auto;text-align:center}
.rainbow__arcs{display:block;width:min(100%,46rem);margin:0 auto clamp(1.4rem,3vw,2.2rem);overflow:visible}
.rainbow__arcs path{fill:none;stroke-width:22;stroke-linecap:round}
.rainbow__copy{position:relative;max-width:42rem;margin-inline:auto}
.rainbow__copy p{margin:1rem auto 0}
.rainbow__copy .cta{justify-content:center;margin-top:1.6rem}
.rainbow__copy .cta,.solo__inner .cta{column-gap:1.6rem;--bpad:0}

/* --------------------------------------------------- activity jars (play)
   Each card fills with a wash of its own colour, like paint poured into a jar. */
.jars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.6vw,2.2rem)}
.jar{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:30px;background:#fff;box-shadow:var(--lift);isolation:isolate}
.jar__paint{position:absolute;inset:0;z-index:-1;background:var(--g)}
.jar__paint svg{position:absolute;left:0;bottom:calc(100% - 1px);width:200%;height:26px;fill:var(--g)}
.motion .jar__paint{transform:translateY(102%)}
.jar__pic{aspect-ratio:4/3;margin:.8rem .8rem 0;border-radius:22px;overflow:hidden}
.jar__pic img{width:100%;height:100%;object-fit:cover}
.jar__body{padding:1.2rem clamp(1.1rem,2vw,1.6rem) 1.6rem}
.jar h3{color:var(--c);font-size:clamp(1.45rem,1.2rem + .8vw,1.95rem)}
.jar p{margin-top:.6rem;font-size:.97em;line-height:1.5}
.jar__builds{margin-top:.9rem;padding-top:.8rem;border-top:2px dashed color-mix(in srgb,var(--c) 30%,transparent);color:var(--ink);font-family:var(--hand);font-weight:600;font-size:.98rem;line-height:1.35}

/* ----------------------------------------------------- chalkboard (play) */
.board{position:relative;padding:clamp(1.8rem,4vw,3.2rem) clamp(1.4rem,4vw,3.4rem) clamp(2.4rem,4vw,3.4rem);border:clamp(12px,1.6vw,18px) solid #d39b55;border-radius:22px;background:radial-gradient(120% 90% at 30% 20%,#3f7a58,#2c5c41 70%);box-shadow:inset 0 0 0 3px #b07a3a,inset 0 12px 30px rgba(0,0,0,.25),var(--lift);color:#fff}
.board h2{color:#fff}
.board__list{display:grid;gap:.9rem;margin-top:1.6rem}
.board__list li{display:flex;align-items:flex-start;gap:.9rem;font-family:var(--hand);font-weight:600;font-size:clamp(1.15rem,1rem + .55vw,1.5rem);line-height:1.3;color:#fdfcf5}
.board__list svg{flex:none;width:1.6rem;margin-top:.1rem;fill:none;stroke:var(--butter);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.board__ledge{position:absolute;left:8%;right:8%;bottom:clamp(-30px,-2vw,-22px);display:flex;gap:.7rem;justify-content:flex-end;height:14px;border-radius:4px;background:#c48a45;box-shadow:0 6px 10px -6px rgba(46,26,80,.5)}
.board__ledge i{width:2.6rem;height:9px;margin-top:-6px;border-radius:4px;background:var(--c)}

/* ----------------------------------------------------- outings trail (play) */
.trail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem)}
.trail>div{padding:clamp(1.4rem,3vw,2.4rem);border-radius:30px;background:#fff;box-shadow:var(--lift)}
.trail h3{font-size:clamp(1.5rem,1.25rem + .9vw,2.1rem);margin-bottom:1.2rem}
.outings{position:relative;display:grid;gap:.9rem}
.stop-on{position:relative;display:grid;grid-template-columns:3.6rem minmax(0,1fr);gap:1rem;align-items:center;padding-block:.4rem}
.stop-on__dot{display:grid;place-items:center;width:3.6rem;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 10px 20px -12px rgba(46,26,80,.6)}
.stop-on__dot svg{width:1.9rem;fill:none;stroke:var(--c);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.stop-on p{margin:0;font-family:var(--hand);font-weight:600;font-size:1.15rem;line-height:1.3;color:var(--ink)}
.stop-on__dot{background:var(--sky)}
.outings--hope .stop-on__dot{background:#fff;box-shadow:none;border:3px dashed var(--c)}

/* --------------------------------------------------------- the clock (day) */
.dayclock{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.dayclock__side{position:sticky;top:6.5rem}
.clock{position:relative;width:min(100%,25rem);aspect-ratio:1;margin-top:2rem}
.clock svg{width:100%;height:100%;overflow:visible}
.clock__rim{fill:#fff;stroke:var(--plum);stroke-width:10}
.clock__face{fill:#fff8e8}
.clock__num{fill:var(--ink);font-family:var(--hand);font-weight:700;font-size:21px;text-anchor:middle;dominant-baseline:central}
.clock__tick{stroke:var(--plum);stroke-width:3;stroke-linecap:round;opacity:.4}
.clock__hour{stroke:var(--plum);stroke-width:9;stroke-linecap:round}
.clock__min{stroke:var(--pink);stroke-width:6;stroke-linecap:round}
.clock__pin{fill:var(--plum)}
.clock__hour,.clock__min{transform-box:view-box;transform-origin:120px 120px}
.clock__now{display:flex;align-items:center;gap:.6rem;margin:1.2rem 0 0;max-width:none;font-family:var(--hand);font-weight:700;font-size:1.3rem;color:var(--plum)}
.clock__now span{padding:.25rem .8rem;border-radius:999px;background:var(--plum);color:#fff;font-size:1rem}
.clock__time{display:none;font-style:normal}
.slots{display:grid;gap:clamp(.9rem,1.8vw,1.3rem)}
.slot{display:grid;grid-template-columns:minmax(6.8rem,auto) minmax(0,1fr) auto;gap:.4rem clamp(.9rem,2vw,1.6rem);align-items:center;padding:clamp(1rem,2vw,1.4rem) clamp(1rem,2.4vw,1.8rem);border-radius:26px;background:#fff;box-shadow:0 18px 36px -26px rgba(46,26,80,.5);transition:box-shadow .4s,scale .4s var(--spring)}
.slot__time{align-self:stretch;display:grid;place-content:center;padding:.6rem .7rem;border-radius:18px;background:var(--g);color:var(--c);font-family:var(--hand);font-weight:800;font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);line-height:1.15;text-align:center}
.slot h3{color:var(--ink);font-size:clamp(1.3rem,1.1rem + .7vw,1.8rem)}
.slot p{margin:.3rem 0 0;font-size:.97em;line-height:1.45}
.slot__icon{width:clamp(2.6rem,4vw,3.4rem);fill:none;stroke:var(--c);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.slot{transition:box-shadow .45s,scale .45s var(--spring),translate .45s var(--spring),background-color .45s,opacity .45s}
.slot__time{transition:background-color .45s,color .45s}
.motion .slot:not(.is-now){opacity:.78}
.slot.is-now{background:#fff;box-shadow:0 0 0 4px var(--c),0 34px 56px -26px color-mix(in srgb,var(--c) 70%,#2e1a50);scale:1.03;translate:0 -8px;opacity:1}
.slot.is-now .slot__time{background:var(--c);color:#fff}
.slot__pic{display:none}
.nowpic{position:absolute;right:-24%;bottom:2%;width:46%;aspect-ratio:1;margin:0;filter:drop-shadow(0 20px 26px rgba(46,26,80,.35))}
.nowpic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:.55rem solid #fff;border-radius:6px;rotate:3deg}
.nowpic img+img{rotate:-4deg}
.dayclock__note{margin-top:1.6rem;padding:1.1rem 1.4rem;border-radius:22px;background:rgba(255,255,255,.6);color:var(--ink);font-family:var(--hand);font-weight:600;line-height:1.4}

/* ----------------------------------------------------- tea menu (day) */
/* Photos piled on the left; on the right a folder with a tab for each week,
   a row of days inside it, and that day's two teas as bars. */
.tea__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.tea__lede{margin-top:1rem;max-width:34rem}
.tea__stack{position:relative;aspect-ratio:1}
.tea__stack img{position:absolute;width:62%;aspect-ratio:3/4;object-fit:cover;border-radius:24px;border:6px solid #fff;box-shadow:var(--lift)}
.tea__stack img:nth-child(1){left:0;top:6%;width:44%;transform:rotate(-6deg)}
.tea__stack img:nth-child(2){right:0;top:0;width:42%;transform:rotate(5deg)}
.tea__stack img:nth-child(3){left:17%;top:12%;width:66%;aspect-ratio:4/4.4;border-width:8px;transform:rotate(-1deg);box-shadow:0 34px 60px -28px rgba(46,26,80,.6)}
.folder{margin-top:clamp(1.8rem,3.4vw,2.6rem)}
.folder__tabs{display:none;gap:.35rem;padding-left:1.4rem}
.folder__tabs button{position:relative;min-height:3rem;padding:.5rem 1.5rem .7rem;border:0;border-radius:18px 18px 0 0;background:#d5ebbd;color:var(--leaf-d);font-family:var(--hand);font-weight:700;font-size:1.08rem;cursor:pointer;translate:0 6px;transition:translate .3s var(--spring),background-color .25s}
.folder__tabs button:hover{translate:0 2px}
.folder__tabs button[aria-selected="true"]{z-index:1;background:#fff;color:var(--ink);translate:0 0}
.folder__body{position:relative;padding:clamp(1.2rem,2.6vw,1.8rem);border-radius:30px;background:#fff;box-shadow:0 30px 50px -30px rgba(46,26,80,.5)}
.folder__days{display:none;gap:.5rem;margin-bottom:1.2rem}
.folder__days button{flex:1;min-height:3rem;padding:.4rem .6rem;border:2px solid rgba(61,127,42,.3);border-radius:16px;background:#fff;color:var(--leaf-d);font-family:var(--hand);font-weight:700;font-size:1.05rem;cursor:pointer;transition:background-color .3s,border-color .3s,color .3s,translate .3s var(--spring)}
.folder__days button:hover{border-color:var(--leaf-d)}
.folder__days button[aria-selected="true"]{background:var(--leaf-d);border-color:var(--leaf-d);color:#fff;translate:0 -3px}
.folder.is-live .folder__tabs,.folder.is-live .folder__days{display:flex}
.meals{display:grid;gap:.9rem}
.meals+.meals{margin-top:1.4rem}
.meals[hidden]{display:none}
.meals__when{font-size:1.2rem;color:var(--leaf-d)}
.folder.is-live .meals__when{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.meal{display:grid;grid-template-columns:3.6rem minmax(0,1fr);gap:1rem;align-items:center;padding:1.1rem 1.3rem;border-radius:22px;background:var(--g)}
.meal svg{width:3.6rem;padding:.7rem;border-radius:50%;background:#fff;fill:none;stroke:var(--c);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.meal__tm{font-family:var(--hand);font-weight:700;font-size:.95rem;color:var(--c)}
.meal p{margin:.1rem 0 0;font-family:var(--hand);font-weight:700;font-size:clamp(1.15rem,1rem + .6vw,1.5rem);line-height:1.25;color:var(--ink)}
.tea__notes{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;margin-top:clamp(2.4rem,4vw,3.4rem)}
.tea__notes li{display:flex;align-items:center;gap:.6rem;padding:.6rem 1.1rem .6rem .7rem;border-radius:999px;background:#fff;color:var(--ink);font-family:var(--hand);font-weight:600;box-shadow:0 10px 22px -16px rgba(46,26,80,.5)}
.tea__notes svg{flex:none;width:1.9rem;padding:.3rem;border-radius:50%;background:var(--g);fill:none;stroke:var(--c);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------ price tag (enrol) */
.fees{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.tagline{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:1rem}
.tagline__peg{width:3.4rem;height:1.6rem;border-radius:8px;background:var(--pink);box-shadow:0 6px 10px -6px rgba(46,26,80,.5)}
.tag{position:relative;margin-top:-.4rem;transform-origin:50% 0;width:min(100%,22rem)}
.tag__string{display:block;width:2px;height:4.5rem;margin:0 auto;background:#a07850}
.tag__card{position:relative;padding:3rem 1.6rem 1.8rem;border-radius:22px 22px 30px 30px;background:var(--butter);text-align:center;box-shadow:0 30px 50px -28px rgba(180,100,10,.7);clip-path:polygon(28% 0,72% 0,100% 16%,100% 100%,0 100%,0 16%)}
.tag__card::before{content:"";position:absolute;left:50%;top:1rem;width:1.1rem;height:1.1rem;margin-left:-.55rem;border-radius:50%;background:var(--sky);box-shadow:inset 0 2px 3px rgba(0,0,0,.25)}
.tag__price{display:block;color:var(--ink);font-family:var(--hand);font-weight:800;font-size:clamp(3rem,2.2rem + 3vw,4.6rem);line-height:1}
.tag__per{display:block;margin-top:.4rem;color:var(--ink);font-family:var(--hand);font-weight:700;font-size:1.2rem}
.tag__small{display:block;margin-top:.8rem;font-size:.95rem;line-height:1.35;color:var(--soft)}
.included{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1.4rem;margin:1.6rem 0}
.included li{display:flex;align-items:flex-start;gap:.7rem;color:var(--ink);font-family:var(--hand);font-weight:600;line-height:1.3}
.included svg{flex:none;width:1.7rem;padding:.25rem;border-radius:50%;background:#fff;fill:none;stroke:var(--leaf-d);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;box-shadow:0 6px 12px -8px rgba(46,26,80,.5)}
.fees__copy p{margin-top:1rem}
.ccs{margin-top:2.4rem;padding:clamp(1.4rem,3vw,2.2rem);border-radius:30px;background:#fff;box-shadow:0 0 0 3px var(--mint,#e3f2cc),var(--lift)}
.ccs__title{display:flex;align-items:center;gap:.8rem;font-size:clamp(1.5rem,1.25rem + .9vw,2.1rem)}
.ccs__badge{flex:none;padding:.3rem .75rem;border-radius:12px;background:var(--leaf-d,#3d7f2a);color:#fff;font-family:var(--hand);font-weight:800;font-size:1rem;letter-spacing:.06em;rotate:-4deg}
.ccs p:first-of-type{margin-top:.9rem}

/* ------------------------------------------------------- care cards (enrol)
   Three photo cards, with the words sitting on a dark fade at the bottom. */
.care{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.2vw,1.8rem);max-width:66rem}
.care__card{position:relative;aspect-ratio:4/4.6;border-radius:28px;overflow:hidden;box-shadow:var(--lift);isolation:isolate;transition:translate .5s var(--spring)}
.care__card:hover{translate:0 -8px}
.care__card img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:scale .8s cubic-bezier(.2,.7,.2,1)}
.care__card:hover img{scale:1.06}
.care__card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 30%,rgba(30,14,56,.88))}
.care__card div{position:absolute;left:0;right:0;bottom:0;padding:1.4rem}
.care__tag{display:inline-block;margin-bottom:.6rem;padding:.25rem .8rem;border-radius:999px;background:var(--c);color:#fff;font-family:var(--hand);font-weight:700;font-size:.88rem}
.care__card h3{color:#fff;font-size:clamp(1.4rem,1.15rem + .8vw,1.9rem)}
.care__card p{margin:.35rem 0 0;color:#fff;font-size:.93em;line-height:1.4}

/* ------------------------------------------------------- four steps (enrol)
   The steps hold still on screen while you scroll, and each one in turn
   grows and fills with its own colour, with its arrow drawing on to the next. */
.walk{padding-top:clamp(5rem,10vw,8rem)}
/* On desktop the care cards and the steps share one screen, which holds
   still from the "care" heading while the steps light up in turn. */
@media (min-width:901px){
  .carewalk .band__head{margin-bottom:1.3rem}
  .carewalk .band__head p{margin-top:.5rem}
  .carewalk h2{font-size:clamp(2rem,1.2rem + 1.9vw,3.1rem)}
  .carewalk .care{max-width:none}
  .carewalk .care__card{aspect-ratio:16/9.36}
  .carewalk .care__card div{padding:1rem 1.2rem}
  .carewalk .care__card p{font-size:.88em}
  .carewalk .walk{padding-top:calc(clamp(1.8rem,3vw,2.6rem) + 50px)}
}
/* Shorter laptop screens: flatter cards and tighter type so it all still fits. */
@media (min-width:901px) and (max-height:860px){
  .carewalk .care__card{aspect-ratio:16/7.44}
  .carewalk h2{font-size:clamp(1.8rem,1.1rem + 1.6vw,2.6rem)}
  .carewalk .band__head p{font-size:.95em}
  .carewalk .walk__step p{margin-top:.6rem;font-size:.9em;line-height:1.4}
  .carewalk .walk{padding-top:calc(1.4rem + 50px)}
}
.walk__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.6rem)}
.walk__step{position:relative}
.walk__pill{display:inline-flex;align-items:center;gap:.6rem;padding:.55rem 1.2rem .55rem .55rem;border-radius:999px;background:#fff;color:var(--ink);font-family:var(--hand);font-weight:700;font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);line-height:1.15;white-space:nowrap;box-shadow:0 12px 24px -16px rgba(46,26,80,.55);transform-origin:0 50%;transition:background-color .45s,color .45s,scale .5s var(--spring),box-shadow .45s}
.walk__pill b{flex:none;display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--c);color:#fff;transition:background-color .45s,color .45s}
.walk__step p{margin-top:1rem;font-size:.97em;line-height:1.5;transition:opacity .45s}
.walk.is-live .walk__step:not(.is-on):not(.is-done) p{opacity:.45}
.walk__step.is-on .walk__pill,.walk__step.is-done .walk__pill{background:var(--c);color:#fff}
.walk__step.is-on .walk__pill b,.walk__step.is-done .walk__pill b{background:#fff;color:var(--c)}
.walk__step.is-on .walk__pill{scale:1.14;box-shadow:0 20px 34px -16px color-mix(in srgb,var(--c) 75%,#2e1a50)}

/* ------------------------------------------------------ lift-the-flap (faq) */
.jump{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.jump a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.35rem 1.1rem;border-radius:999px;background:#fff;color:var(--c,var(--plum));font-family:var(--hand);font-weight:700;text-decoration:none;box-shadow:0 10px 20px -14px rgba(46,26,80,.55);transition:translate .2s var(--spring),background-color .2s,color .2s}
.jump a:hover{translate:0 -3px;background:var(--c,var(--plum));color:#fff}
.flapset{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(1.6rem,5vw,5rem);align-items:start;scroll-margin-top:6rem}
.flapset+.flapset{margin-top:clamp(4rem,8vw,7rem)}
.flapset__head{position:sticky;top:7rem}
.flapset__head h2{color:var(--c);font-size:clamp(2rem,1.4rem + 2.2vw,3.4rem)}
.flapset__head p{margin-top:.8rem}
.flaps{display:grid;gap:.9rem}
.flap{border-radius:24px;background:#fff;box-shadow:0 16px 30px -24px rgba(46,26,80,.55);transition:box-shadow .35s}
.flap>summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.2rem;padding:1rem 1.2rem 1rem 1.4rem;border-radius:24px;background:var(--g);color:var(--ink);font-family:var(--hand);font-weight:700;font-size:clamp(1.12rem,1.02rem + .4vw,1.35rem);line-height:1.3;list-style:none;cursor:pointer;transition:translate .35s var(--spring),box-shadow .35s,border-radius .35s}
.flap>summary::-webkit-details-marker{display:none}
.flap>summary:hover{translate:0 -3px}
.flap__lift{flex:none;display:grid;place-items:center;width:2.6rem;aspect-ratio:1;border-radius:50%;background:#fff;color:var(--c);box-shadow:0 6px 12px -8px rgba(46,26,80,.6);transition:rotate .45s var(--spring)}
.flap__lift svg{width:1.2rem;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.flap[open]>summary{border-radius:24px 24px 10px 10px;box-shadow:0 12px 18px -14px rgba(46,26,80,.55);translate:0 -4px}
.flap[open] .flap__lift{rotate:180deg}
.flap__a{padding:1.2rem 1.4rem 1.5rem}
.flap__a p{max-width:40em;margin:0}
.flap__a p+p{margin-top:1rem}
.flap__a a{color:var(--plum);text-underline-offset:.2em}

/* --------------------------------------------------------- contact */
.contact{position:relative;z-index:1;overflow:clip;padding:10rem var(--gut) clamp(6rem,10vw,9rem);background:linear-gradient(#ffe3c2,#fff1d2 40%,#fff6e2)}
.contact__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,6vw,6rem);align-items:start;max-width:var(--wrap);margin-inline:auto}
/* Left: the welcome and the big tree, staying in view while the form and
   the "rather talk" card scroll past on the right. */
.contact__side{position:sticky;top:6.5rem}
.contact__side .top__title{font-size:clamp(2.7rem,1.4rem + 3.8vw,5rem)}
.contact__lead{margin-top:1rem;max-width:30rem;font-size:1.08em}
.quick{display:none}
.nudge{position:relative;display:flex;align-items:flex-start;gap:.4rem;margin:1.6rem 0 0;max-width:24rem;font-family:var(--hand);font-weight:700;font-size:1.2rem;line-height:1.3;color:var(--plum)}
.nudge svg{flex:none;width:6.4rem;margin-top:.6rem;overflow:visible;fill:none;stroke:var(--pink);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.contact__tree{position:relative;width:min(100%,31rem);margin-top:.6rem}
/* Right: the form, then the "rather talk" card. */
.letterbox{position:relative}
.reach{position:relative;margin-bottom:clamp(1.8rem,3vw,2.4rem);padding:clamp(1.5rem,3vw,2.2rem);border-radius:30px;background:#fff;box-shadow:0 40px 70px -40px rgba(46,26,80,.5)}
.reach__who{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;align-items:center}
.reach__face{position:relative;display:block;width:4.8rem;aspect-ratio:1}
.reach__face img{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 8px 16px -8px rgba(46,26,80,.5)}
.reach__face i{position:absolute;inset:0;border-radius:50%;border:3px solid var(--pink)}
.reach__title{font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem)}
.reach__who p{margin:.2rem 0 0;font-size:.98em}
.bigphone{display:inline-block;margin-top:1.1rem;color:var(--plum);font-family:var(--hand);font-weight:800;font-size:clamp(2.3rem,1.5rem + 2.6vw,3.6rem);line-height:1;text-decoration:none;white-space:nowrap}
.bigphone:hover{color:var(--pink-d)}
.roll{display:inline-flex}
.roll__d{display:inline-block;height:1.08em;overflow:hidden;vertical-align:top}
.roll__d span{display:block;line-height:1.08}
.roll__sp{display:inline-block;width:.32em}
.reach__btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.3rem}
.reach .btn--ghost{--edge:#d9cdee;background:#fff;color:var(--plum);box-shadow:inset 0 0 0 2px var(--plum),0 5px 0 var(--edge)}
.reach__facts{display:grid;gap:.6rem;margin-top:1.4rem;padding-top:1.2rem;border-top:2px dashed rgba(84,41,143,.14)}
.reach__facts li{display:flex;align-items:center;gap:.7rem;color:var(--ink);font-weight:500}
.reach__facts svg{flex:none;width:1.4rem;fill:none;stroke:var(--plum);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reach__facts a{color:var(--plum);text-underline-offset:.2em}
.contact__tree .scene__tree{position:relative}
.contact__tree::after{content:"";position:absolute;left:-6%;right:-6%;bottom:-6%;height:18%;border-radius:50%;background:radial-gradient(closest-side,#8cc63f,#8cc63f00);z-index:0}
.contact__tree>*{z-index:1}
[data-smartform]{--sf-ink:var(--ink);--sf-ink-2:var(--soft);--sf-ink-faint:#5d4e7b;--sf-ink-4:#5d4e7b;--sf-border:rgba(84,41,143,.2);--sf-hair:rgba(84,41,143,.12);--sf-accent:var(--plum);--sf-accent-ink:var(--plum-d);--sf-mark:var(--pink);--sf-mark-ink:var(--pink-d);--sf-tint:rgba(84,41,143,.05);--sf-linen:#fffaf0;--sf-sand:#efe7f8;--sf-sand-2:#e4d9f2;--sf-radius:30px;--sf-font-display:var(--hand);--sf-font-mono:var(--hand);max-width:none;font-family:var(--body);box-shadow:0 40px 70px -40px rgba(46,26,80,.5)}
[data-smartform] .sf-legend{display:block;margin-bottom:.5rem;padding:0;font-size:.88rem;font-weight:500;color:var(--sf-ink-2)}
[data-smartform] .sf-legend span[aria-hidden]{color:var(--sf-mark-ink)}
[data-smartform] fieldset+.error+.field,[data-smartform] fieldset+.field{margin-top:1.4rem}
[data-smartform] h2{font-size:clamp(1.6rem,1.3rem + 1.2vw,2.3rem)}
[data-smartform] p{max-width:none}

/* ------------------------------------------------------ simple pages */
.prose{max-width:46rem}
.prose h2{margin-top:2.4rem;font-size:clamp(1.7rem,1.4rem + 1.2vw,2.4rem)}
.prose p{margin-top:1rem}
.prose a{color:var(--plum)}
.draft-note{padding:.9rem 1.2rem;border-radius:18px;background:var(--butter);color:var(--ink)}
.solo{display:grid;place-items:center;min-height:100svh;padding:8rem var(--gut) 4rem;text-align:center;background:linear-gradient(#ffe7b3,#fff1d2 60%,#fff6e2)}
.solo__inner{max-width:38rem}
.solo__inner p{margin:1rem auto 0}
.solo__inner .cta{justify-content:center;margin-top:1.8rem}
.solo__art{width:min(80vw,22rem);margin:0 auto 1.6rem;position:relative}
.solo__bird{width:7rem;margin:0 auto 1.4rem;transform-origin:50% 0}
.solo__bird i{display:block;width:3px;height:4rem;margin:0 auto;background:#8a6a45}

/* The closing sunset on every inner page is .home from v2.css. */
.home .home__copy .hand{color:var(--plum-d)}

/* ------------------------------------------------------------ phones */
@media (max-width:900px){
  .top{flex-direction:column;align-items:stretch;min-height:0;padding:7.4rem var(--gut) 0}
  .top__copy{width:auto;margin:0}
  .top__copy::before{inset:-8% -10%}
  .top__title{font-size:clamp(2.5rem,10.5vw,3.8rem)}
  .top .facts{margin:0 0 1.5rem;padding:0;background:none;color:var(--ink)}
  .top__scene{position:relative;right:auto;bottom:auto;width:min(96vw,540px);margin:1.4rem auto calc(var(--hillh)*-.55)}
  .top .hill{position:relative;margin:0 calc(var(--gut)*-1);width:calc(100% + var(--gut)*2);bottom:auto}
  .top .cloud--a{top:6.2rem;left:auto;right:-6%}
  .top .cloud--b,.top .cloud--c{display:none}
  .split,.dayclock,.fees,.trail,.flapset,.contact__grid{grid-template-columns:minmax(0,1fr)}
  .split--flip>:first-child{order:0}
  .jars,.care{grid-template-columns:minmax(0,1fr)}
  .care__card{aspect-ratio:16/11}
  .tea__grid{grid-template-columns:minmax(0,1fr)}
  .tea__stack{width:min(100%,22rem);margin-inline:auto}
  .folder__tabs{padding-left:1rem}
  .folder__tabs button{padding-inline:1.2rem}
  .folder__days{gap:.35rem}
  .folder__days button{padding-inline:.2rem;font-size:1rem}
  .meal{grid-template-columns:3rem minmax(0,1fr);gap:.8rem;padding:1rem}
  .meal svg{width:3rem;padding:.55rem}
  .included{grid-template-columns:minmax(0,1fr)}
  .walk__list{grid-template-columns:minmax(0,1fr);gap:1.3rem}
  .walk__step p{margin-top:.6rem}
  .dayclock{display:block}
  .dayclock>div:last-child{margin-top:1.2rem}
  .dayclock__side{display:contents}
  .clockbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:1rem;margin:1.2rem calc(var(--gut)*-1) 0;padding:.6rem var(--gut);background:rgba(255,241,210,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .clock{width:4.6rem;margin:0;flex:none}
  .clock__num{display:none}
  .clock__now{margin:0;font-size:1.1rem;flex-direction:column;align-items:flex-start;gap:0;line-height:1.2}
  .clock__lbl{display:none}
  .clock__time{display:block;font-family:var(--hand);font-weight:800;font-size:1.35rem;color:var(--plum)}
  .clock__now b{font-size:1rem;color:var(--ink)}
  .slot{grid-template-columns:minmax(0,1fr) auto;padding:1rem}
  .slot__time{grid-column:1/-1;justify-self:start;padding:.35rem .9rem;border-radius:999px;align-self:auto}
  .slot__icon{grid-row:2;grid-column:2}
  .slot:has(.slot__pic) .slot__icon{display:none}
  .slot__pic{display:block;grid-row:2;grid-column:2;width:4.4rem;aspect-ratio:1;object-fit:cover;border-radius:16px;border:3px solid #fff;box-shadow:0 8px 16px -10px rgba(46,26,80,.6);rotate:3deg}
  .nowpic{display:none}
  .slot.is-now{scale:1.02;translate:0 -4px}
  .flapset__head{position:static}
  .chat__head{position:static}
  .contact{padding-top:7.2rem}
  .contact__side{position:static}
  .contact__tree,.nudge{display:none}
  /* Phones get the two thumb-sized ways in first, then the form. */
  .quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:1.4rem}
  .quick__btn{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;padding:1rem 1.1rem 1.1rem;border-radius:24px;background:#fff;color:var(--ink);text-decoration:none;box-shadow:0 18px 30px -20px rgba(46,26,80,.55);transition:scale .2s var(--spring)}
  .quick__btn:active{scale:.96}
  .quick__btn svg{width:2.8rem;padding:.6rem;border-radius:50%;background:var(--c);fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .quick__btn span{font-size:.92rem;line-height:1.25;color:var(--soft)}
  .quick__btn b{display:block;font-family:var(--hand);font-weight:800;font-size:1.35rem;color:var(--c)}
  .contact__form{margin-top:1.4rem}
  .reach__btns{display:none}
  .abacus__row{grid-template-columns:minmax(0,1fr)}
  .abacus__n{grid-row:auto;text-align:left}
  .board__ledge{left:4%;right:4%}
}
@media (max-width:420px){
  .bead{width:1.85rem}
}

/* Enquiry form hints sit faintly inside their box, centred top to bottom,
   and fade out as soon as something is typed. (The form's own .hint class
   clashed with the home page's "Come and spend a day" link, so they moved.) */
[data-smartform] .ph-wrap{position:relative}
[data-smartform] .ph-wrap .input,[data-smartform] .ph-wrap .textarea{display:block;width:100%}
[data-smartform] .ph{position:absolute;inset:1px;display:flex;align-items:center;padding:.4rem .95rem;overflow:hidden;color:var(--sf-ink-faint);opacity:.6;font-size:.95rem;line-height:1.4;pointer-events:none;transition:opacity .2s}
[data-smartform] .ph-wrap :focus+.ph{opacity:.45}
[data-smartform] .ph-wrap :not(:placeholder-shown)+.ph{opacity:0}
[data-smartform] .sf-small{margin-top:1.2rem;font-size:.86rem;text-align:center;color:var(--soft)}

/* ---------------------------------------------------- school slideshow (play)
   The same window as the home page. */
/* Beside the chalkboard: the photos fill the space under the words, so the
   two columns finish at the same height. Phones keep the square window. */
.split--school .school__pic{margin-top:1.6rem;max-width:none}
@media (min-width:901px){
  .split--school{align-items:stretch}
  .split--school .split__copy{display:flex;flex-direction:column}
  .split--school .school__pic{flex:1;width:100%;margin-inline:0;aspect-ratio:auto;min-height:17rem}
}
.school-lead{font-family:var(--hand);font-weight:600;font-size:clamp(1.3rem,1.1rem + .7vw,1.75rem);line-height:1.35;color:var(--ink)}

/* ------------------------------------------------- swipe rows (phones only) */
.swipe-dots{display:none}
@media (max-width:900px){
  [data-swipe]{display:flex;gap:1rem;margin-inline:calc(var(--gut)*-1);padding:.6rem var(--gut) 1.6rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  [data-swipe]::-webkit-scrollbar{display:none}
  [data-swipe]>li{flex:0 0 84%;scroll-snap-align:start}
  .swipe-dots{display:flex;justify-content:center;gap:.45rem;margin-top:.2rem}
  .swipe-dots i{width:.5rem;height:.5rem;border-radius:999px;background:rgba(84,41,143,.22);transition:width .35s var(--spring),background-color .35s}
  .swipe-dots i.is-on{width:1.6rem;background:var(--plum)}
}

/* ------------------------------------------------------------ faq extras */
.top__copy .jump+.cta{margin-top:clamp(1.8rem,3vw,2.4rem)}
.flapset[hidden],.flap[hidden]{display:none}
.snap{width:min(100%,17rem);margin-top:1.8rem;padding:.7rem .7rem 0;background:#fff;rotate:var(--r,0deg);box-shadow:0 22px 40px -24px rgba(46,26,80,.55);transition:rotate .5s var(--spring),translate .5s var(--spring)}
.snap:hover{rotate:0deg;translate:0 -4px}
.snap img{width:100%;aspect-ratio:1;object-fit:cover}
.snap figcaption{padding:.6rem .2rem .8rem;font-family:var(--hand);font-weight:600;font-size:1.05rem;line-height:1.25;color:var(--ink);text-align:center}
.ask{max-width:46rem;margin:0 0 clamp(1.5rem,3vw,2.5rem)}
.jump--faq{margin:0 0 clamp(1.8rem,3.4vw,2.6rem)}
.ask__label{display:block;margin-bottom:.7rem;font-family:var(--hand);font-weight:700;font-size:clamp(1.3rem,1.1rem + .6vw,1.6rem);color:var(--plum)}
.ask__box{position:relative;display:flex;align-items:center;border-radius:999px;background:#fff;box-shadow:0 0 0 2px rgba(84,41,143,.14),0 24px 44px -28px rgba(46,26,80,.6);transition:box-shadow .3s}
.ask__box:focus-within{box-shadow:0 0 0 3px var(--plum),0 24px 44px -24px rgba(46,26,80,.6)}
.ask__box>svg{flex:none;width:1.5rem;margin-left:1.3rem;fill:none;stroke:var(--plum);stroke-width:2.4;stroke-linecap:round}
.ask__box input{flex:1;min-width:0;height:3.9rem;padding:0 1rem;border:0;border-radius:999px;background:none;color:var(--ink);font:inherit;font-size:1.1rem;outline:none}
.ask__box input::placeholder{color:#7a6c96}
.ask__box input::-webkit-search-cancel-button{display:none}
.ask__clear{flex:none;display:grid;place-items:center;width:2.6rem;height:2.6rem;margin-right:.6rem;padding:0;border:0;border-radius:50%;background:var(--mist,#efe7f8);color:var(--plum);cursor:pointer}
.ask__clear[hidden],.ask__none[hidden]{display:none}
.ask__clear svg{width:1rem;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round}
.ask__note{min-height:1.5em;margin:.7rem 0 0 1.4rem;font-family:var(--hand);font-weight:600;color:var(--soft)}
.ask__none{max-width:34rem;margin:0 auto clamp(3rem,6vw,5rem);padding:2rem;border-radius:30px;background:#fff;text-align:center;box-shadow:var(--lift)}
.ask__none p{margin:0 auto 1.2rem;font-family:var(--hand);font-weight:600;font-size:1.25rem;color:var(--ink)}
.flaps mark{padding:0 .12em;border-radius:.3em;background:color-mix(in srgb,var(--butter) 75%,transparent);color:inherit}
@media (max-width:900px){
  .flapset__head{position:relative;top:auto;min-height:6.6rem;padding-right:7.4rem}
  .snap{position:absolute;right:0;top:-.4rem;width:6.4rem;margin:0;padding:.35rem .35rem .9rem}
  .snap figcaption{display:none}
  /* The hill's right-hand rise looks steep when squeezed onto a phone, so
     phones see only its gentle left half. */
  .top .hill{width:calc(200% + var(--gut)*4)}
}

/* ------------------------------------------------- contact form, restyled
   The form wears the same clothes as the "Rather talk?" card beneath it:
   a chunky hand-lettered heading, roomy padding, and answers as soft white
   tiles that each fill with one of the logo colours when picked. */
.contact__form [data-smartform]{border-radius:30px;background:#fff;box-shadow:0 40px 70px -40px rgba(46,26,80,.5)}
.contact__form [data-smartform] .finder__progress{gap:1.2rem;padding:clamp(1.5rem,3vw,2.2rem) clamp(1.5rem,3vw,2.2rem) 0}
.contact__form [data-smartform] .finder__bar{height:7px;border-radius:999px;--sf-seg:calc(100% / var(--sf-q,6))}
.contact__form [data-smartform] .finder__bar i{background:linear-gradient(90deg,var(--pink),var(--plum));border-radius:999px}
.contact__form [data-smartform] .finder__count{font-family:var(--hand);font-weight:700;font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--plum)}
.contact__form [data-smartform] .finder__body{padding:1.3rem clamp(1.5rem,3vw,2.2rem) clamp(1.5rem,3vw,2.2rem)}
.contact__form [data-smartform] .step h2{margin-bottom:1.1rem;font-family:var(--hand);font-weight:800;font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem);letter-spacing:0;line-height:1.15;color:var(--ink)}
.contact__form [data-smartform] .step>.lead{margin:-.4rem 0 1.4rem;font-size:.98rem;line-height:1.5;color:var(--soft)}
.contact__form [data-smartform] .options{gap:.75rem}
.contact__form [data-smartform] .option{--oc:var(--plum);min-height:62px;padding:.9rem 1.1rem;border:2px solid rgba(84,41,143,.13);border-radius:20px;background:#fff;box-shadow:0 10px 20px -16px rgba(46,26,80,.45);transition:translate .3s var(--spring),border-color .2s,background-color .2s,box-shadow .2s}
.contact__form [data-smartform] .options>.option:nth-child(5n+1){--oc:#c22f7b}
.contact__form [data-smartform] .options>.option:nth-child(5n+2){--oc:#a35a08}
.contact__form [data-smartform] .options>.option:nth-child(5n+3){--oc:#3d7f2a}
.contact__form [data-smartform] .options>.option:nth-child(5n+4){--oc:#0f7a97}
.contact__form [data-smartform] .options>.option:nth-child(5n+5){--oc:#54298f}
@media (hover:hover) and (pointer:fine){
  .contact__form [data-smartform] .option:hover{translate:0 -3px;border-color:var(--oc);background:#fff;box-shadow:0 16px 26px -16px rgba(46,26,80,.5)}
}
.contact__form [data-smartform] .option__title{font-family:var(--hand);font-weight:700;font-size:1.08rem;color:var(--ink)}
.contact__form [data-smartform] .option__sub{color:var(--soft)}
.contact__form [data-smartform] .option__dot{width:24px;height:24px;border:2.5px solid var(--oc);background:#fff}
.contact__form [data-smartform] .option:has(input:checked){border-color:var(--oc);background:var(--oc);box-shadow:0 16px 26px -14px color-mix(in srgb,var(--oc) 70%,#2e1a50)}
.contact__form [data-smartform] .option:has(input:checked) .option__title{color:#fff}
.contact__form [data-smartform] .option:has(input:checked) .option__dot::after{background:var(--oc)}
.contact__form [data-smartform] .chip input:checked+span{border-color:var(--plum);background:var(--plum)}
.contact__form [data-smartform] .field label{font-family:var(--hand);font-weight:700;font-size:1.05rem;color:var(--ink)}
.contact__form [data-smartform] .input,.contact__form [data-smartform] .textarea{border:2px solid rgba(84,41,143,.15);border-radius:16px;background-color:#fff}
.contact__form [data-smartform] .input:focus,.contact__form [data-smartform] .textarea:focus{border-color:var(--plum);box-shadow:0 0 0 4px rgba(84,41,143,.12)}
.contact__form [data-smartform] .finder__nav{border-top:2px dashed rgba(84,41,143,.14)}
.contact__form [data-smartform] .btn{--edge:var(--plum-d);min-height:3.4rem;border-radius:999px;background:var(--plum);color:#fff;font-family:var(--hand);font-weight:700;font-size:1.13rem;box-shadow:0 5px 0 var(--edge)}
.contact__form [data-smartform] .btn:hover{background:var(--plum-d)}
.contact__form [data-smartform] .btn--ghost{--edge:#d9cdee;background:#fff;color:var(--plum);box-shadow:inset 0 0 0 2px var(--plum),0 5px 0 var(--edge)}
.contact__form [data-smartform] .btn--ghost:hover{background:#f6f2fc}

/* Enrol: on taller desktop screens the care photos are taller again, which
   still leaves the care cards and the four steps on one screen together. */
@media (min-width:901px) and (min-height:950px){
  .carewalk .care__card{aspect-ratio:16/11.7}
}

/* Contact: finding Susan's. The address is set big like a heading, the
   directions sit as plain text beside small round icons (no more boxes,
   the form and "Rather talk?" card above are boxes enough), and the map
   sits in one large soft window with the big tree leaning in at its foot. */
.find__head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1rem clamp(2.5rem,6vw,6rem);align-items:end;margin-bottom:clamp(2.5rem,5vw,4rem)}
.find__head h2{grid-column:1/-1;max-width:none}
.find__head .find__lead{margin:0;font-size:1.08em}
.find__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.find__addr{display:inline-block;margin-top:0;font-family:var(--hand);font-weight:800;font-size:clamp(1.7rem,1.3rem + 1.5vw,2.5rem);line-height:1.15;color:var(--plum);text-decoration:none;transition:color .2s}
.find__addr:hover{color:var(--pink-d)}
.find__lead{margin-top:1rem}
.find__ways{display:grid;gap:1.4rem;margin:0 0 2.2rem;padding:0;list-style:none}
.find__ways li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start}
.find__ico{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--g)}
.find__ico svg{width:1.5rem;fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.find__ways h3{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem)}
.find__ways p{margin:.3rem 0 0}
.find__ways a{color:var(--plum);text-underline-offset:.2em}
.find__map{position:relative;padding-bottom:3rem}
.find__window{position:relative;aspect-ratio:5/4.4;border-radius:40px;overflow:hidden;background:#dfeccf;box-shadow:0 0 0 10px #fff,0 50px 80px -40px rgba(46,26,80,.55)}
.find__window iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.85)}
.find__tree{position:absolute;left:-8%;bottom:-1rem;width:38%;pointer-events:none;filter:drop-shadow(0 18px 20px rgba(46,26,80,.25))}
@media (max-width:900px){
  .find__grid,.find__head{grid-template-columns:minmax(0,1fr)}
  .find__window{aspect-ratio:1;border-radius:30px;box-shadow:0 0 0 7px #fff,0 40px 60px -36px rgba(46,26,80,.55)}
  .find__tree{left:-4%;width:44%}
}

/* SEO run 11 Nov 2026: extra links */
.reach__more{margin:1.1rem 0 0}
.cta>.hand+.hand{margin-left:1.6rem}
.compare{max-width:66rem;margin-top:clamp(1.8rem,3vw,2.6rem);overflow-x:auto;border-radius:28px;background:#fff;box-shadow:var(--lift)}
.compare table{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.4}
.compare th,.compare td{padding:1rem clamp(.8rem,2vw,1.4rem);text-align:left;vertical-align:top}
.compare thead th{font-family:var(--hand);font-weight:700;font-size:clamp(1.1rem,1rem + .5vw,1.4rem);color:#fff}
.compare thead th:nth-child(2){background:var(--plum)}
.compare thead th:nth-child(3){background:var(--teal-d)}
.compare tbody th{width:24%;font-family:var(--hand);font-weight:700;color:var(--plum)}
.compare tbody tr+tr th,.compare tbody tr+tr td{border-top:2px dashed rgba(84,41,143,.12)}
.compare tbody td:nth-child(2){background:#f7f3fd}
@media (max-width:600px){.compare table{font-size:.9rem}.compare th,.compare td{padding:.8rem .6rem}}
.cta--links{column-gap:1.6rem}
.cta--links>.hand+.hand{margin-left:0}
@media (max-width:600px){.cta>.hand+.hand{margin-left:0}}

/* Price cards: the price, and little icons for what's included. Point at
   (or tab to) an icon and its name shows in a line beneath the row. */
.pcards{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(1rem,2.4vw,1.6rem)}
.pcard{flex:1 1 13.5rem;max-width:18rem;padding:1.8rem 1rem 1rem;border-radius:28px;background:#fff;text-align:center;box-shadow:0 30px 50px -32px rgba(46,26,80,.55)}
.pcard__per{display:block;font-family:var(--hand);font-weight:700;font-size:1.15rem;color:var(--ink)}
.pcard__price{display:block;margin-top:.2rem;font-family:var(--hand);font-weight:800;font-size:clamp(2.6rem,2rem + 1.6vw,3.2rem);line-height:1;color:var(--plum)}
.pcard__row{position:relative;display:flex;justify-content:center;gap:.45rem;margin-top:1.3rem;padding:1.2rem 0 2.2rem;border-top:2px dashed rgba(84,41,143,.14)}
.pcard__ico{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;background:var(--g);cursor:default;outline:none;transition:box-shadow .25s}
.pcard__ico svg{width:1.6rem;fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pcard__ico:hover,.pcard__ico:focus-visible{box-shadow:0 0 0 2px var(--c)}
.pcard__ico svg{transition:translate .35s var(--spring)}
.pcard__ico:hover svg,.pcard__ico:focus-visible svg{translate:0 -3px}
.pcard__tip{position:absolute;left:0;right:0;bottom:.5rem;font-family:var(--hand);font-weight:600;font-size:.95rem;line-height:1.2;color:var(--ink);opacity:0;translate:0 4px;transition:opacity .2s,translate .3s;pointer-events:none}
.pcard__ico:hover .pcard__tip,.pcard__ico:focus .pcard__tip{opacity:1;translate:0 0}
.pcards__note{flex-basis:100%;max-width:24rem;margin:.6rem auto 0;font-family:var(--hand);font-weight:600;font-size:clamp(1.15rem,1rem + .5vw,1.35rem);line-height:1.35;color:var(--ink);text-align:center}

/* After school and holidays: two price tags hanging side by side */
.tag__card{background:var(--tagbg,var(--butter))}
.tag__card::before{background:var(--hole,var(--sky))}
@media (min-width:901px){.fees:has(.pcard+.pcard){grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.fees:has(.pcard+.pcard) .included{grid-template-columns:minmax(0,1fr)}
.tagline--two{flex-direction:row;justify-content:center;align-items:flex-start;gap:clamp(.8rem,2.4vw,1.6rem)}
.tagline__one{display:flex;flex:1 1 0;flex-direction:column;align-items:center;min-width:0;max-width:17rem;container-type:inline-size}
.tagline--two .tag{width:100%}
.tagline--two .tag__card{padding:2.6rem .7rem 1.5rem}
.tagline--two .tag__price{font-size:clamp(1.5rem,17cqi,3.1rem)}
.tagline--two .tag__per{font-size:1.05rem}
.tagline--two .tag__small{font-size:.88rem}
.split__copy h3+p{margin-top:.5rem}