/* Susan's Learn and Play, home page.

   The story of a day at Susan's, told in order: the big tree, Miss Susan, the
   small group, the garden, making, cooking, quiet time, getting ready for
   school, little jobs around the neighbourhood, the five words from the logo,
   a gallery wall of home time, then the fees and details and the questions
   parents ask.
   Playpen Sans, the plum push-buttons, the dotted path and all the logo colours.

   The default CSS is the calm layout, which is what reduced motion gets.
   html.motion switches on the sticky stages. */

@font-face{font-family:"Playpen Sans";src:url("../../fonts/playpen-sans.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("../fonts/general-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("../fonts/general-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("../fonts/general-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --ink:#2e1a50;--soft:#463564;--plum:#54298f;--plum-d:#38196b;--night:#2a1648;
  --pink:#e8588f;--pink-d:#c22f7b;--leaf:#79b833;--leaf-d:#3d7f2a;--teal:#2a9fb8;--teal-d:#0f7a97;
  --amber:#f5a623;--orange:#ef7f45;--butter:#ffd666;--lilac:#7b5cb0;
  --sky:#fff1d2;--cream:#fff6e2;--mint:#eaf5d6;--blush:#ffe3ee;--sun:#ffe08a;--mist:#e8e2f6;--pool:#d9eff8;--peach:#ffe0b8;
  --hand:"Playpen Sans","Segoe Print","Chalkboard SE","Comic Sans MS",cursive;
  --body:"General Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:82rem;--gut:clamp(1.15rem,4.6vw,4rem);
  --gap:clamp(5rem,11vw,10rem);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --lift:0 24px 48px -24px rgba(46,26,80,.42),0 6px 14px -8px rgba(46,26,80,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--sky);-webkit-text-size-adjust:100%;scroll-padding-top:6rem}
html.menu-open{overflow:hidden}
body{margin:0;overflow-x:clip;color:var(--soft);background:var(--sky);font-family:var(--body);font-weight:500;font-size:clamp(1.0625rem,.98rem + .34vw,1.25rem);line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3{margin:0;color:var(--ink);font-family:var(--hand);font-weight:700;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
h2{font-size:clamp(2.35rem,1.5rem + 3.5vw,4.7rem)}
h3{font-size:clamp(1.6rem,1.3rem + 1.1vw,2.3rem)}
p{margin:0 0 1em;max-width:32em}
p:last-child{margin-bottom:0}
strong{color:var(--ink);font-weight:600}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:8px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
[data-rise]>div{padding-bottom:.2em;margin-bottom:-.2em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:1rem;top:-5rem;z-index:100;padding:.7rem 1.1rem;border-radius:12px;background:var(--plum);color:#fff}
.skip:focus{top:1rem}
.c-pink{color:var(--pink-d)}.c-leaf{color:var(--leaf-d)}.c-teal{color:var(--teal-d)}

/* The plum push-button from the first site. */
.btn{--edge:var(--plum-d);display:inline-flex;align-items:center;justify-content:center;min-height:3.4rem;padding:.6rem 1.7rem;border-radius:999px;background:var(--plum);color:#fff;box-shadow:0 5px 0 var(--edge);font-family:var(--hand);font-weight:700;font-size:1.13rem;line-height:1.1;text-decoration:none;text-align:center;transition:translate .18s var(--spring),scale .18s var(--spring),box-shadow .18s}
.btn:hover{translate:0 -3px;scale:1.03;box-shadow:0 8px 0 var(--edge)}
.btn:active{translate:0 4px;scale:1;box-shadow:0 1px 0 var(--edge)}
.btn--small{min-height:2.75rem;padding:.4rem 1.2rem;font-size:1rem;box-shadow:0 4px 0 var(--edge)}
.bar__nav .btn--small{white-space:nowrap}
/* Narrow laptops: a little less space between the links so it all fits on one line. */
.btn--paper{--edge:#dccff0;background:#fff;color:var(--plum)}

/* A text link with a plain, quiet underline. */
.hand{color:var(--plum);font-family:var(--hand);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:rgba(84,41,143,.32);text-underline-offset:.3em;transition:color .2s,text-decoration-color .2s}
.hand:hover{color:var(--pink-d);text-decoration-color:currentColor}
.cta{--bpad:1.7rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem}
/* A text link after a button starts where the button's words start, so when
   it wraps underneath the two line up. Its padding doubles as the gap. */
.cta:has(>.btn+.hand){column-gap:0}
.cta>.btn+.hand{padding-left:var(--bpad)}

.onward{display:flex;align-items:center;gap:.8rem;max-width:none;margin:0;color:var(--plum);font-family:var(--hand);font-weight:600;font-size:clamp(1.15rem,1rem + .7vw,1.55rem);line-height:1.32}
.onward svg{flex:none;width:2.8rem}
.onward.wrap{max-width:var(--wrap);margin-inline:auto}

/* A photo. Plain rounded corners and a soft drop shadow. --sa fades the shadow
   in with the photo, so a shadow never sits there on its own. */
.pic{--sa:1;position:relative;border-radius:30px;box-shadow:0 26px 50px -26px rgba(46,26,80,calc(.45*var(--sa))),0 6px 14px -8px rgba(46,26,80,calc(.18*var(--sa)))}
.pic img{width:100%;height:100%;object-fit:cover;border-radius:inherit}

.edge{position:absolute;left:0;bottom:calc(100% - 1px);width:100%;height:clamp(26px,4vw,60px);z-index:2;pointer-events:none}
section{position:relative}
main{overflow-x:clip}

/* -------------------------------------------------------------------- bar
   A frosted pill. Links get a hand-drawn squiggle that draws itself in under
   them, a fine line along the bottom of the pill fills as you read down the
   page, and the bar tucks away while you scroll down and comes back the
   moment you scroll up. */
.bar{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.7rem var(--gut);pointer-events:none;transition:translate .5s cubic-bezier(.2,.8,.2,1)}
.bar.is-tucked{translate:0 -130%}
.bar>*{pointer-events:auto}
.bar__logo{flex:none;display:block;width:72px;aspect-ratio:1;transform:scale(var(--big,1.8));transform-origin:0 0;transition:transform .5s var(--spring);border-radius:50%;background:#fff;box-shadow:0 6px 16px -6px rgba(84,41,143,.35);overflow:hidden}
.bar__logo img{width:100%;height:100%;object-fit:contain;transform:scale(.94)}
.bar.is-solid .bar__logo{transform:none}
.bar__nav{position:relative;display:flex;align-items:center;gap:1.9rem;padding:.4rem 0;font-family:var(--hand);font-weight:700;font-size:1.05rem}
@media (min-width:901px) and (max-width:1200px){.bar__nav{gap:.85rem}.bar__nav .bar__tel{padding-left:1rem}}
/* Once the page scrolls, a soft wash of the sky fades in behind the whole bar so
   the links stay readable over photos, without boxing the menu in. */
.bar::before{content:"";position:absolute;inset:0 0 -1.6rem;z-index:-1;background:linear-gradient(rgba(255,241,210,.94) 55%,rgba(255,241,210,0));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent);opacity:0;transition:opacity .35s;pointer-events:none}
.bar.is-solid::before{opacity:1}
.bar__link{position:relative;display:inline-flex;align-items:center;gap:.4rem;padding-block:.35rem;color:var(--plum);text-decoration:none;white-space:nowrap;transition:color .2s}
.bar__tel{padding-left:1.9rem;border-left:2px dotted rgba(84,41,143,.3)}
/* Hover: the letters hop one after another (split into .ch spans by v2.js). */
.bar__link .ch{display:inline-block}
.bar__link:hover,.bar__link:focus-visible{color:var(--pink-d)}
.motion .bar__link:hover .ch,.motion .bar__link:focus-visible .ch{animation:hop .45s var(--spring) both;animation-delay:calc(var(--i) * 28ms)}
@keyframes hop{40%{translate:0 -5px}100%{translate:0 0}}
.motion .bar .btn:hover{animation:wob .5s ease-in-out}
@keyframes wob{25%{rotate:-3deg}60%{rotate:2.5deg}100%{rotate:0deg}}
.bar__tel svg{width:1.05rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.bar__more{display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:0 6px 14px -8px rgba(84,41,143,.5);color:var(--plum);cursor:pointer;transition:background-color .25s,color .25s,rotate .4s var(--spring)}
/* Hover: it turns plum, squishes like jelly and the lines wave. */
.bar__more:hover{background:var(--plum);color:#fff;animation:jelly .6s both}
.bar__more:hover .burger i,.bar__menu:hover .burger i{animation:wave .5s ease-in-out both}
.bar__more:hover .burger i:nth-child(2),.bar__menu:hover .burger i:nth-child(2){animation-delay:.06s}
.bar__more:hover .burger i:nth-child(3),.bar__menu:hover .burger i:nth-child(3){animation-delay:.12s}
@keyframes jelly{30%{scale:1.14 .88}50%{scale:.93 1.07}70%{scale:1.04 .97}100%{scale:1}}
@keyframes wave{50%{translate:0 -2.5px}}
@media (prefers-reduced-motion:reduce){.bar__more:hover,.bar__more:hover .burger i,.bar__menu:hover .burger i{animation:none}}
.bar__more .burger{width:18px}
.bar__menu{display:none;align-items:center;gap:.6rem;min-height:2.9rem;margin-left:auto;padding:.4rem 1.1rem .4rem .9rem;border:0;border-radius:999px;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--plum);box-shadow:0 0 0 1px rgba(84,41,143,.08),0 10px 24px -10px rgba(84,41,143,.5);font-family:var(--hand);font-weight:700;font-size:1.05rem;cursor:pointer}
.burger{display:grid;gap:4px;width:20px}
.burger i{display:block;height:3px;border-radius:2px;background:currentColor;transform-origin:0 50%;transition:transform .3s}
.burger i:nth-child(2){transform:scaleX(.7)}
.bar__menu:hover .burger i:nth-child(2),.bar__more:hover .burger i:nth-child(2){transform:none}

/* ------------------------------------------------------------------- menu
   Design 2, the night garden. One plum curtain drops, a deep night sheet
   wipes down behind it, and the links rise out of their own lines. On a
   laptop the photo beside them changes to whichever page you point at, and
   the other links fade back. The big tree sits faintly in the corner. Only
   two colours do the work: night plum and butter. */
.menu{position:fixed;inset:0;z-index:80;overflow:hidden}
.menu[hidden]{display:none}
.menu__curtain{position:absolute;inset:0;display:flex;pointer-events:none}
.menu__curtain i{flex:1;background:var(--plum);border-radius:0 0 50% 50%/0 0 14% 14%;transform:translateY(-101%)}
.menu__sheet{position:absolute;inset:0;display:flex;flex-direction:column;gap:clamp(1rem,2.4vh,2rem);padding:.8rem var(--gut) calc(1.1rem + env(safe-area-inset-bottom));background:radial-gradient(70% 70% at 88% 12%,#3d2263,rgba(61,34,99,0) 70%),#24123f;color:#fff6e2;overflow-y:auto;overscroll-behavior:contain}
.menu__tree{position:absolute;left:50%;bottom:-3%;width:min(165vw,62rem);translate:-50% 0;transform-origin:50% 100%;pointer-events:none}
.menu__tree img{width:100%;filter:brightness(0) invert(1);opacity:.07}
.menu__top{position:relative;display:flex;align-items:center;gap:1rem}
.menu__logo{width:64px;border-radius:50%;background:#fff}
.menu__hello{flex:1;max-width:none;margin:0;color:rgba(255,246,226,.72);font-family:var(--hand);font-weight:600;font-size:1.02rem}
.menu__close{display:grid;place-items:center;width:3.2rem;height:3.2rem;padding:0;border:0;border-radius:50%;background:var(--butter);color:var(--ink);cursor:pointer;transition:rotate .4s var(--spring),background-color .2s}
.menu__close:hover{rotate:90deg;background:#fff}
.menu__close:focus-visible{outline:3px solid #fff;outline-offset:3px}
.menu__close svg{width:1.25rem;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round}
.menu__body{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:center;flex:1}
.menu__links{display:grid;gap:.15rem;margin:0;padding:0;list-style:none}
.menu__links a{display:block;padding:.28rem 0;color:#fff6e2;text-decoration:none;transition:opacity .3s}
.menu__links a:focus-visible{outline:2px solid var(--butter);outline-offset:4px;border-radius:10px}
.menu__word{display:block;overflow:hidden;padding-block:.06em}
.menu__word span{display:block;font-family:var(--hand);font-weight:800;font-size:clamp(1.65rem,7vw,2.15rem);line-height:1.12;letter-spacing:-.015em;transition:translate .45s cubic-bezier(.2,.8,.2,1),color .3s}
.menu__links a:hover .menu__word span,.menu__links a:focus-visible .menu__word span,.menu__links a[aria-current] .menu__word span{color:var(--butter)}
.menu__links a:hover .menu__word span,.menu__links a:focus-visible .menu__word span{translate:.6rem 0}
.menu__peek{display:none}
.menu__foot{position:relative;display:grid;gap:1.1rem;padding-top:1.1rem;border-top:1px solid rgba(255,246,226,.14)}
.menu__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1rem;margin:0;padding:0;list-style:none;color:rgba(255,246,226,.74);font-size:.9rem;line-height:1.3}
.menu__facts strong{display:block;color:#fff6e2;font-family:var(--hand);font-weight:800;font-size:1.05rem}
.menu__cta{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.menu__cta .btn:first-child{grid-column:1/-1}
.menu__cta .btn{--edge:#d9a92e;white-space:nowrap;padding-inline:1rem;background:var(--butter);color:var(--ink)}
.menu__cta .btn--paper{--edge:rgba(0,0,0,.3);background:rgba(255,246,226,.06);color:#fff6e2;box-shadow:inset 0 0 0 2px rgba(255,246,226,.38),0 5px 0 var(--edge)}
.menu__cta .btn--paper:hover{background:rgba(255,246,226,.12);box-shadow:inset 0 0 0 2px rgba(255,246,226,.6),0 8px 0 var(--edge)}
.menu__cta .btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (min-width:901px){
  .menu__sheet{padding:1.4rem max(var(--gut),calc((100vw - 78rem)/2)) 2rem}
  .menu__hello{font-size:1.15rem}
  .menu__body{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(3rem,7vw,7rem)}
  .menu__word span{font-size:clamp(2rem,.9rem + 2.3vw,3.15rem)}
  .menu__links:hover a:not(:hover){opacity:.35}
  .menu__peek{position:relative;display:block;align-self:center;max-width:26rem;width:100%;justify-self:end}
  .menu__tree{left:auto;right:max(-4rem,calc((100vw - 78rem)/2 - 10rem));bottom:-4%;width:min(118vh,72vw);translate:none}
  .menu__frame{position:relative;aspect-ratio:4/5;border-radius:34px;overflow:hidden;background:#3d2263;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
  .menu__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.08;transition:opacity .5s,scale .9s cubic-bezier(.2,.8,.2,1)}
  .menu__frame img.is-on{opacity:1;scale:1}
  .menu__foot{grid-template-columns:minmax(0,1.3fr) auto;align-items:center;gap:2rem;padding-top:1.4rem}
  .menu__facts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .menu__cta{display:flex;gap:.8rem}
}
@media (min-width:901px) and (max-height:860px){
  .menu__word span{font-size:clamp(1.8rem,4.6vh,2.6rem)}
  .menu__peek{max-width:20rem}
}

/* ------------------------------------------------------------------- hero */
.hero{--grass:clamp(4rem,9vh,6.5rem);--more:50px;min-height:calc(max(100svh,640px) + var(--more));overflow:clip;background:linear-gradient(#ffe7b3,#fff1d2 55%,#fff6e2);display:flex;align-items:center;padding:6.2rem var(--gut) calc(2.4rem + var(--grass) + var(--more))}
/* The grass runs on below the hill, so "Come and spend a day with us" has room. */
.hero::after{content:"";position:absolute;z-index:3;left:0;right:0;bottom:0;height:calc(var(--grass) + var(--more) + 70px);background:linear-gradient(rgba(140,198,63,0),rgba(132,192,58,.55) 22%,#7dbb36 42%,#76b431 68%,#6aa82b);pointer-events:none}
.hero__copy{position:relative;z-index:4;width:min(47vw,46rem);margin-left:max(0px,calc((100vw - 100rem)/2))}
/* A soft wash of morning light behind the words, so wherever the tree's
   leaves reach, the text still sits on cream. */
.hero__copy::before{content:"";position:absolute;z-index:-1;inset:-14% -22% -16% -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}
.hero__title{font-size:min(clamp(2.9rem,1.2rem + 4.5vw,6rem),8.4svh);font-weight:800;line-height:1.03}
.hero__lead{margin:1.1rem 0 1.1rem;font-size:1.08em;color:var(--ink)}
.hero__title .w{display:inline-block}
.facts{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin:0 0 1.5rem;color:var(--ink);font-family:var(--hand);font-weight:600;font-size:1.02rem;line-height:1.25}
.facts li{display:flex;align-items:center;gap:.5rem}
.facts svg{flex:none;width:1.6rem;fill:none;stroke:var(--plum);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.motion:not(.live) .hero__copy,.motion:not(.live) .scene,.motion:not(.live) .sun,.motion:not(.live) .hint{visibility:hidden}
@media (max-width:900px){
  .motion:not(.live) .hero__copy{visibility:visible}
  .motion:not(.live) .hero__title,.motion:not(.live) .facts li,.motion:not(.live) .hero .cta>*,.motion:not(.live) .award{visibility:hidden}
  .motion:not(.live) .hero__lead{color:transparent}
}

.scene{position:absolute;z-index:2;right:max(-3vw,calc((100vw - 118rem)/2));bottom:calc(10vh - 2vw + var(--grass) + var(--more));width:min(52vw,calc(100svh - 9rem - var(--grass)))}
.scene__tree{position:relative;z-index:1;width:100%;pointer-events:none}
.scene__swing,.scene__bird{position:absolute;top:44.21%;z-index:0;transform-origin:50% 0;display:block;margin:0;padding:0;border:0;background:none}
.scene__swing{left:60.23%;width:30%;cursor:pointer}
button.scene__swing:focus-visible{outline-offset:-6px}
.scene__bird{left:24.77%;width:12.67%}
.scene__swing img,.scene__bird img{width:100%}

.hill{position:absolute;left:0;right:0;bottom:calc(var(--grass,0px) + var(--more,0px) - 21px);z-index:3;width:100%;max-width:none;height:clamp(110px,22vh,220px);pointer-events:none}
.leaves{position:absolute;inset:0;z-index:5;overflow:hidden;pointer-events:none}
.leaves svg{position:absolute;top:0;left:0;width:30px;visibility:hidden}
.cloud{position:absolute;z-index:1;opacity:.9}
.cloud--a{top:17%;left:44%;width:clamp(90px,10vw,170px)}
.cloud--b{top:9%;right:6%;width:clamp(110px,13vw,220px)}
.cloud--c{top:38%;left:-3%;width:clamp(100px,12vw,200px);opacity:.7}
/* The sun sits up over the top right of the tree, just left of the big cloud. */
.sun{position:absolute;z-index:3;top:clamp(4.6rem,8vh,6.6rem);right:calc(6% + clamp(110px,13vw,220px) + .5vw);width:clamp(174px,17vw,258px);aspect-ratio:1}
.sun__rays{position:absolute;inset:0}
.sun__face{position:absolute;inset:21%;margin:0;display:grid;place-content:center;text-align:center;border-radius:50%;background:var(--butter);color:var(--ink);font-family:var(--hand);font-weight:600;font-size:clamp(1.02rem,.89rem + .32vw,1.25rem);line-height:1.08}
.sun__face strong{display:block;font-size:1.65em;font-weight:800}
.hint{position:absolute;z-index:6;left:50%;bottom:calc(var(--grass)/2 - .8em + var(--more));transform:translateX(-50%);display:flex;align-items:center;gap:.5rem;color:var(--ink);font-family:var(--hand);font-weight:600;text-decoration:none;white-space:nowrap}
.hint svg{width:1.1rem}
.motion .hint svg{animation:nudge 1.5s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(5px)}}

/* ------------------------------------------------------------------- meet */
.meet{z-index:2;padding-block:clamp(5rem,10vw,9rem) clamp(7.5rem,15vw,13rem);background:#ffdde8}
.meet__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6.5rem);align-items:center}
.meet__pic{justify-self:end;width:100%;max-width:36rem;aspect-ratio:1/1.05}
.meet__pic img{position:absolute;inset:0;object-position:50% 30%}
.meet__copy h2{font-size:clamp(2.3rem,1.5rem + 2.8vw,4.3rem)}
.meet__copy p{margin-top:1rem}
/* Three embroidered patches, like the badges sewn on a school bag: a
   scalloped edge, two rings of stitching and the words sewn round the rim. */
.badges{display:flex;flex-wrap:wrap;gap:1rem 1.3rem;margin:1.8rem 0 1.8rem}
.patch{--c:var(--plum);--d:#38196b;--l:#efe7fb;--r:-6deg;display:flex;flex-direction:column;align-items:center;gap:.55rem;width:clamp(5.4rem,7vw,6.6rem)}
.patch:nth-child(2){--r:5deg}
.patch:nth-child(3){--r:-3deg}
.patch svg{width:clamp(4.2rem,5.4vw,5.2rem);height:auto;aspect-ratio:1;overflow:visible;rotate:var(--r);filter:drop-shadow(0 10px 10px rgba(84,41,143,.26)) drop-shadow(0 2px 2px rgba(46,26,80,.2));transition:rotate .4s var(--spring),scale .4s var(--spring)}
.patch:hover svg{rotate:0deg;scale:1.06}
.patch__cap{font-family:var(--hand);font-weight:700;font-size:.86rem;line-height:1.15;text-align:center;color:var(--d)}
.patch--pink{--c:#c22f7b;--d:#8f1d58;--l:#fde4ef}
.patch--teal{--c:#0f7a97;--d:#095b71;--l:#ddf2f8}
.patch__edge{fill:var(--c)}
.patch__face{fill:var(--l)}
.patch__stitch{fill:none;stroke:#fff;stroke-width:2.4;stroke-dasharray:4.5 4;stroke-linecap:round;opacity:.9}
.patch__stitch--in{stroke:var(--c);stroke-width:1.8;stroke-dasharray:3 3.5;opacity:.45}
.patch__arc{fill:var(--d);font-family:var(--hand);font-weight:800;font-size:12.5px;letter-spacing:.14em}
.patch__num{fill:var(--c);font-family:var(--hand);font-weight:800;font-size:50px;letter-spacing:-.02em}
.patch__icon{fill:var(--c);color:var(--c)}

/* ---------------------------------------------------------------- reviews
   The family fridge. The whole section is the door, with a chrome handle down
   the side, fridge-magnet letters spelling the score and the reviews stuck on
   with round magnets, each on a different scrap of paper. */
.fridge{--door:#4a2380;position:relative;z-index:2;padding-block:clamp(7rem,13vw,12rem) clamp(7rem,13vw,12rem);color:rgba(255,246,226,.86);background:radial-gradient(120% 80% at 85% 0%,rgba(185,162,227,.28),rgba(185,162,227,0) 60%),linear-gradient(115deg,rgba(255,255,255,.09),rgba(255,255,255,0) 40%),var(--door);background-color:#4a2380;overflow:clip}
/* A deep plum door, so the paper notes and the gold score really pop. */
.fridge h2{color:#fff}
.fridge .hand{color:var(--butter);text-decoration-color:rgba(255,214,102,.45)}
.fridge .hand:hover{color:#fff}
.deco{position:absolute;z-index:1;display:block;width:2.6rem;filter:drop-shadow(0 6px 6px rgba(10,0,30,.35));pointer-events:none}
.deco svg{width:100%;overflow:visible}
/* Three hearts floating loosely together, each drifting on its own path. */
.hearts{position:absolute;z-index:1;top:clamp(3.6rem,7vw,6rem);left:max(1rem,calc((100vw - var(--wrap))/2 - 1.5rem));width:7rem;height:6rem;pointer-events:none}
.hearts__h{position:absolute;display:block;fill:var(--pink);filter:drop-shadow(0 6px 6px rgba(10,0,30,.35))}
.hearts__h svg{width:100%;overflow:visible}
.hearts__h--1{left:0;top:1.4rem;width:2.8rem;rotate:-14deg}
.hearts__h--2{left:3.1rem;top:0;width:1.7rem;rotate:16deg;fill:#f79ac0}
.hearts__h--3{left:3.6rem;top:3rem;width:1.25rem;rotate:-28deg;fill:#ffd666}
.motion .hearts__h--1 svg{animation:heartFloat 6.5s ease-in-out infinite}
.motion .hearts__h--2 svg{animation:heartFloat 5.2s ease-in-out -2s infinite reverse}
.motion .hearts__h--3 svg{animation:heartFloat 7.4s ease-in-out -4s infinite}
@keyframes heartFloat{0%,100%{translate:0 0;transform:rotate(0)}25%{translate:5px -9px;transform:rotate(6deg)}50%{translate:-3px -14px;transform:rotate(-4deg)}75%{translate:-6px -5px;transform:rotate(3deg)}}
/* A child's drawing stuck up behind the main review, held by a heart magnet. */
.fridge__stack{position:relative;padding-top:clamp(2rem,4vw,3.4rem)}
.fridge__heart{position:absolute;top:-14px;left:50%;width:2.2rem;margin-left:-1.1rem;fill:var(--pink);filter:drop-shadow(0 4px 4px rgba(0,0,0,.35))}
.fridge__heart svg{width:100%;overflow:visible}
.fridge__stack .note--big{z-index:1}
.fridge__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.fridge__copy>p{margin-top:1.1rem}
.fridge__more{max-width:var(--wrap);margin:clamp(2.6rem,4.4vw,3.6rem) auto 0}
.score{display:flex;align-items:center;gap:1.2rem 1.6rem;margin:clamp(1.6rem,3vw,2.2rem) 0}
.score__num{display:flex;align-items:flex-end;margin:0;font-family:var(--hand);font-weight:800;font-size:clamp(5.2rem,3rem + 5.6vw,8.6rem);line-height:.86}
.score__num span{display:block;color:#f8c23a;rotate:var(--t);text-shadow:0 .05em 0 #b97a08,0 .1em .14em rgba(10,0,30,.45)}
.score__side{display:grid;gap:.5rem}
.score__from{display:flex;align-items:center;gap:.5rem;margin:0;color:#fff;font-family:var(--hand);font-weight:700;font-size:1.15rem}
.stars{display:block;width:6.2rem;height:1.2rem;background:var(--amber);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.2.9-5.3 5 1.4 7.2L12 18l-6.4 3.5 1.4-7.2-5.3-5 7.2-.9z'/%3E%3C/svg%3E") 0 50%/1.24rem 1.2rem repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.2.9-5.3 5 1.4 7.2L12 18l-6.4 3.5 1.4-7.2-5.3-5 7.2-.9z'/%3E%3C/svg%3E") 0 50%/1.24rem 1.2rem repeat-x}
.stars--big{position:relative;width:11rem;height:2.15rem;background:rgba(255,255,255,.16);-webkit-mask-size:2.2rem 2.15rem;mask-size:2.2rem 2.15rem}
.stars--big i{position:absolute;inset:0;background:linear-gradient(100deg,#f5a623 40%,#ffd666 50%,#f5a623 60%) 0 0/300% 100%;transform-origin:0 50%}
.rating__g{flex:none;width:1.3rem;height:1.3rem}
/* A review on a scrap of paper. */
.note{position:relative;margin:0;padding:2.1rem clamp(1.2rem,2vw,1.6rem) 1.4rem;border-radius:6px;background:var(--p,#fff);rotate:var(--r,0deg);box-shadow:0 30px 44px -24px rgba(8,0,24,.7),0 4px 10px -6px rgba(8,0,24,.3);transition:rotate .4s var(--spring),translate .4s var(--spring)}
.note:hover{rotate:0deg;translate:0 -6px}
.note--lined{padding-top:34px;background:#fff repeating-linear-gradient(#0000 0 28px,#d6ecf6 28px 30px)}
.note--lined .stars{margin-bottom:11px}
.note--lined p{line-height:30px}
.note--lined figcaption{margin-top:30px;line-height:30px}
.note--lined figcaption span{margin-top:-6px}
.note--sticky{--p:#fff1a8}
.note--pink{--p:#ffe3ee}
.note__magnet{position:absolute;z-index:2;top:auto;bottom:.9rem;right:1.1rem;color:var(--c);font-family:var(--hand);font-style:normal;font-weight:800;font-size:2.8rem;line-height:1;rotate:9deg;text-shadow:0 .05em 0 var(--e),0 .11em .14em rgba(30,60,50,.32);pointer-events:none}
.notes li:nth-child(odd) .note__magnet{rotate:-8deg}
.note .stars{margin-bottom:.7rem}
.note blockquote{margin:0}
.note p{color:var(--ink);font-family:var(--hand);font-weight:600;font-size:clamp(1.05rem,.98rem + .3vw,1.22rem);line-height:1.45}
.note figcaption{padding-right:3rem;margin-top:.9rem;color:var(--plum);font-family:var(--hand);font-weight:700;font-size:1.05rem}
.note figcaption span{display:block;color:var(--soft);font-family:var(--body);font-weight:500;font-size:.85rem}
.note--big{padding:2.8rem clamp(1.6rem,3vw,2.6rem) 2rem}
.note--big p{font-size:clamp(1.4rem,1.1rem + 1vw,2.05rem);line-height:1.32}
.note--big .note__magnet{top:auto;bottom:1.2rem;right:1.6rem;font-size:3.4rem}
.notes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:clamp(2.4rem,4vw,3.4rem);gap:clamp(1.4rem,2.4vw,2.2rem);margin-top:clamp(3.4rem,6vw,5rem);align-items:start}
.notes li:nth-child(even){margin-top:1.6rem}
/* The badge in the hero. */
/* The Google rating in the hero, set like an award: gold laurels either side,
   a gold 5.0 and stars, and every few seconds a glint of light runs across. */
.hero__act{position:relative;z-index:4}
.award{display:inline-flex;align-items:center;gap:.6rem;margin-top:clamp(1.5rem,3.2vh,2.6rem);color:var(--ink);text-decoration:none;transition:translate .35s var(--spring)}
.award:hover{translate:0 -3px}
.award__laurel{flex:none;width:1.75rem;height:auto;overflow:visible;filter:drop-shadow(0 2px 1.5px rgba(150,90,10,.28))}
.award__laurel--r{transform:scaleX(-1)}
.award__body{display:grid;justify-items:center;gap:.3rem;line-height:1}
.award__top{display:flex;align-items:center;gap:.55rem}
.award__num,.award .stars{background:linear-gradient(100deg,#9a5c06 0%,#c98410 30%,#ffe9a8 46%,#fff8dc 50%,#ffe9a8 54%,#c98410 70%,#9a5c06 100%) 100% 0/260% 100%}
.award__num{font-family:var(--hand);font-weight:800;font-size:2.15rem;letter-spacing:-.01em;-webkit-background-clip:text;background-clip:text;color:transparent}
.award .stars{width:5.7rem;height:1.12rem;-webkit-mask-size:1.14rem 1.12rem;mask-size:1.14rem 1.12rem}
.award__from{display:flex;align-items:center;gap:.4rem;font-family:var(--hand);font-weight:700;font-size:.95rem;white-space:nowrap}
.motion .award__num,.motion .award .stars{animation:glint 6s cubic-bezier(.45,0,.2,1) 2.4s infinite}
@keyframes glint{0%,64%{background-position:100% 0}100%{background-position:0% 0}}

/* ------------------------------------------------------------------ group */
.group{z-index:2;padding-block:clamp(7rem,14vw,13rem) clamp(9rem,18vw,17rem);background:var(--cream)}
.group__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.group__copy p{margin-top:1.2rem}
/* Story time on the rug. The children are cut-out illustrations placed on a
   stage; the back row is first in the markup so the front row sits over it. */
.floor{position:relative;aspect-ratio:16/11;width:100%}
.floor__rug{position:absolute;left:-2%;right:-4%;bottom:0;height:46%;border-radius:50%;background:radial-gradient(closest-side,#ffe7b3 0 58%,#fff1d2 59% 64%,#ffd9a0 65% 72%,#ffe7b3 73% 100%);box-shadow:0 28px 40px -30px rgba(120,70,10,.5),inset 0 -10px 24px rgba(200,130,40,.18);transform-origin:20% 50%}
.floor__rug::after{content:"";position:absolute;inset:6%;border-radius:50%;border:3px dashed rgba(196,127,10,.35)}
.sitter{position:absolute;bottom:var(--y);left:var(--x);height:var(--h);transform-origin:50% 100%}
.sitter img{position:relative;z-index:1;display:block;width:auto;height:100%}
.sitter::before{content:"";position:absolute;left:8%;right:8%;bottom:-2%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(90,50,10,.32),rgba(90,50,10,0));transform:scaleX(var(--sh,1));opacity:var(--so,1)}
.sitter--big img{filter:saturate(.95) brightness(.98)}
.floor__puff{position:absolute;top:0;left:0;width:10px;height:10px;border-radius:50%;pointer-events:none;opacity:0}
.tally{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2rem;margin-top:clamp(1.6rem,3vw,2.4rem);padding-top:clamp(1rem,2vw,1.4rem);border-top:2px dashed rgba(84,41,143,.16)}
.tally__item{display:flex;align-items:center;gap:.9rem;max-width:none;margin:0}
.tally__n{flex:none;min-width:.62em;color:var(--plum);font-family:var(--hand);font-weight:800;font-size:clamp(4.2rem,2.4rem + 4.6vw,7.4rem);line-height:.9;font-variant-numeric:tabular-nums}
.tally__item--little .tally__n{color:var(--pink-d)}
.tally__label{max-width:9em;color:var(--ink);font-family:var(--hand);font-weight:600;font-size:clamp(1.1rem,.95rem + .5vw,1.45rem);line-height:1.2}
.group .onward{margin-top:clamp(2.5rem,5vw,4rem)}

/* -------------------------------------------------------------------- dig */
.dig{background:#8cc63f}
.dig__stick{position:relative;display:grid;gap:2rem;padding:var(--gap) var(--gut)}
.dig__photo{width:100%;border-radius:30px}
.dig__mask{display:none}
.dig__title{order:-1;max-width:18em}
.motion .dig{height:300vh}
.motion .dig__stick{display:block;position:sticky;top:0;height:100svh;padding:0;overflow:hidden}
.motion .dig__photo{position:absolute;inset:0;height:100%;object-fit:cover;border-radius:0}
.motion .dig__mask{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none}
#digWord{font-family:var(--hand);font-weight:800}
.motion .dig__title{position:absolute;z-index:2;left:0;right:0;top:clamp(6rem,15vh,9rem);margin-inline:auto;padding-inline:var(--gut);text-align:center;font-size:clamp(1.8rem,1.2rem + 2.2vw,3.3rem)}

/* ------------------------------------------------------------------- path */
.path{z-index:2;padding-block:clamp(8rem,14vw,13rem) clamp(6rem,10vw,9rem);background:var(--mint)}
.stops{position:relative;display:grid;gap:clamp(5rem,11vw,10rem)}
.stop{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.stop--l .pic{order:2}
.stop--l{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.stop .pic{aspect-ratio:5/4}
.stop .pic img{position:absolute;inset:0}
.stop__copy p{margin-top:.9rem}
.onward--mid{justify-content:center;margin-top:clamp(4rem,8vw,7rem)}
.stop h3 .ch{display:inline-block;transform-origin:50% 100%}

/* ------------------------------------------------------------------- make */
.make{z-index:1;background:var(--blush);overflow:clip}
.make__stick{position:relative}
.drips{position:absolute;inset:0 0 auto;z-index:3;width:100%;max-width:none;height:clamp(170px,32vh,320px);overflow:visible;pointer-events:none}
.make__track{position:relative;display:flex;flex-wrap:wrap;gap:clamp(2rem,5vw,4rem);align-items:flex-start;padding:calc(clamp(9rem,26vh,14rem) + 50px) var(--gut) var(--gap)}
.make__lead{flex:1 1 100%;max-width:42rem}
.make__lead p{margin-top:1rem}
.make__lead h2 .ch{display:inline-block}
.line{display:none}
.hang{position:relative;flex:1 1 15rem;margin:0;padding:10px;background:#fff;border-radius:6px;box-shadow:0 22px 34px -20px rgba(46,26,80,.42)}
.hang img{width:100%;border-radius:3px}
.hang--wide{flex-basis:22rem}
.peg{display:none}
.make__end{flex:1 1 100%}
.make__note{font-family:var(--hand);font-weight:600;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.4rem);line-height:1.32;color:var(--ink);max-width:22em}
.make__note+.onward{margin-top:1.4rem}

.motion .make__stick{position:sticky;top:0;height:100svh;overflow:hidden}
.motion .make__track{--h:min(54svh,500px);--top:calc(24svh + 100px);position:absolute;top:0;left:0;flex-wrap:nowrap;height:100%;width:max-content;align-items:flex-start;gap:clamp(1.6rem,3.2vw,3.2rem);padding:0 12vw 0 150px;will-change:transform}
/* The words sit in the same band as the hung pictures, centred on them. */
.motion .make__lead,.motion .make__end{flex:none;align-self:flex-start;display:flex;flex-direction:column;justify-content:center;height:var(--h);margin-top:var(--top)}
.motion .make__lead{width:min(40rem,82vw);margin-right:3vw}
.motion .line{display:block;position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;pointer-events:none}
.motion .hang{flex:none;align-self:flex-start;margin-top:var(--top);height:var(--h);width:auto;transform-origin:50% -10px;padding:9px}
.motion .hang img{height:100%;width:auto;object-fit:cover}
.motion .hang:nth-of-type(even){--top:calc(25.5svh + 100px)}
.motion .peg{display:block;position:absolute;z-index:2;left:50%;top:-16px;width:15px;height:38px;margin-left:-7px;border-radius:4px;background:var(--amber);box-shadow:inset 0 0 0 2px #c47f0a}
.motion .hang--wide .peg{left:14%}
.motion .hang--wide .peg--2{left:auto;right:14%}
.motion .make__end{width:min(34rem,80vw);margin-left:3vw}

/* ------------------------------------------------------------------- cook */
.cook{z-index:2;padding-block:var(--gap) clamp(7rem,12vw,11rem);background:var(--sun)}
.cook__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.cook__pic{aspect-ratio:1/1;overflow:hidden}
.cook__pic::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 8px #fff}
.card{padding:clamp(1.6rem,3.4vw,3rem);border-radius:26px;background:#fff repeating-linear-gradient(#0000 0 37px,#cfe6f2 37px 39px);box-shadow:0 30px 56px -30px rgba(180,100,10,.55),0 6px 14px -8px rgba(46,26,80,.14)}
.card h2{font-size:clamp(2.1rem,1.5rem + 2.3vw,3.6rem)}
.ticks{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem;margin:1.5rem 0;font-family:var(--hand);font-weight:700;font-size:clamp(1.3rem,1.1rem + .7vw,1.75rem);color:var(--ink)}
.ticks li{display:flex;align-items:center;gap:.6rem}
.ticks svg{flex:none;width:1.5em;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ticks rect{stroke:var(--plum);stroke-width:3}
.ticks path{stroke:var(--pink);stroke-width:5}
.motion .ticks path{stroke-dasharray:1;stroke-dashoffset:1}
.card__tea{margin-top:1rem}
.card__tea::before{content:"";display:block;height:3px;margin-bottom:1rem;background:repeating-linear-gradient(90deg,var(--amber) 0 10px,#0000 10px 18px)}
.card__tea strong{display:block;color:var(--ink);font-family:var(--hand);font-weight:700;font-size:1.25em}
.cook .onward{margin-top:clamp(2.5rem,5vw,4rem)}

/* ------------------------------------------------------------------ quilt */
.quilt{z-index:1;background:var(--mist)}
.quilt__stick{position:relative;padding:var(--gap) var(--gut)}
.quilt__grid{display:none}
.quilt__panel{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;width:min(100%,68rem);margin-inline:auto;padding:clamp(1.2rem,2.6vw,2.4rem);border-radius:34px;background:#fff;outline:3px dashed var(--lilac);outline-offset:-12px}
.quilt__pic{aspect-ratio:1;box-shadow:none}
.quilt__copy{position:relative;padding-right:clamp(0rem,2vw,1.5rem)}
.quilt__copy p{margin-top:1rem}
.zzz{display:none}
.motion .quilt{height:280vh}
.motion .quilt__stick{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;padding:4.5rem var(--gut) 1rem}
.motion .quilt__grid{display:grid;position:absolute;inset:0;perspective:1400px}
.qp{position:relative;background:var(--p);transform-origin:50% 100%;backface-visibility:hidden;outline:1px solid rgba(255,255,255,.35)}
.qp::after{content:"";position:absolute;inset:7%;border:2px dashed rgba(255,255,255,.75);border-radius:6px}
.qp--stripe{background:repeating-linear-gradient(90deg,var(--p) 0 14px,#ffffff66 14px 28px)}
.qp--check{background:conic-gradient(#ffffff55 25%,#0000 0 50%,#ffffff55 0 75%,#0000 0) 0 0/36px 36px,var(--p)}
.qp--spot{background:radial-gradient(circle,#ffffff99 5px,#0000 6px) 0 0/28px 28px,var(--p)}
.motion .quilt__panel{max-height:calc(100svh - 6rem)}
.motion .zzz{display:flex;position:absolute;right:6%;top:-2.2rem;gap:.3rem;color:var(--lilac);font-family:var(--hand);font-weight:800;font-size:2rem}
.zzz span{display:block}
.quilt h2 .ch{display:inline-block}

/* ----------------------------------------------------------------- school */
.school{z-index:2;padding-block:clamp(7rem,13vw,12rem) clamp(8rem,16vw,15rem);background:var(--pool)}
.blocks{display:flex;justify-content:center;gap:clamp(.35rem,1.2vw,1rem);margin-bottom:clamp(3rem,6vw,5rem)}
.block{--b:var(--pink);--e:#000;flex:0 1 clamp(58px,14vw,172px);aspect-ratio:1;padding:0;border:0;border-radius:clamp(12px,1.8vw,24px);background:var(--b);box-shadow:0 clamp(6px,1vw,14px) 0 var(--e),inset 0 0 0 clamp(4px,.7vw,10px) #ffffff4d;color:var(--night);font-family:var(--hand);font-weight:800;font-size:clamp(2.4rem,9vw,7rem);line-height:1;cursor:pointer}
.school__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.school__copy p{margin:1rem 0 1.1rem}
.ready{display:grid;gap:.75rem}
.ready li{display:flex;align-items:center;gap:.8rem;padding:.8rem 1.1rem;border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 14px 28px -18px rgba(15,122,151,.6);font-weight:600}
.ready li::before{content:"";flex:none;width:1.5rem;height:1.5rem;background:var(--leaf-d);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M4 13l5 6L20 5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M4 13l5 6L20 5'/%3E%3C/svg%3E") center/contain no-repeat}
.school__pic{margin-top:clamp(3rem,6vw,5rem);margin-inline:auto;max-width:62rem;aspect-ratio:16/9;overflow:hidden;isolation:isolate}
.school__slide{position:absolute;inset:0;display:block;visibility:hidden}
.school__slide.is-on{visibility:visible;z-index:1}
.school__slide img{position:absolute;inset:0;border-radius:0}
.school__slide.is-in{z-index:2;visibility:visible;box-shadow:-30px 0 50px -10px rgba(20,40,90,.35)}
.school__pic{touch-action:pan-y;cursor:grab}
.school__pic:active{cursor:grabbing}
.school__ctrl{position:absolute;z-index:3;left:1.2rem;right:1.2rem;bottom:.9rem;display:flex;align-items:center;gap:.8rem}
.school__bar{flex:1;display:flex;gap:6px}
.school__bar button{flex:1;display:flex;align-items:center;height:22px;padding:0;border:0;background:none;cursor:pointer}
.school__bar i{display:block;width:100%;height:3px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.42);box-shadow:0 1px 4px rgba(10,20,40,.3)}
.school__bar i::after{content:"";display:block;height:100%;background:#fff;transform:scaleX(var(--p,0));transform-origin:0 50%}
.school__arrow{position:absolute;z-index:3;top:50%;display:grid;place-items:center;width:3.2rem;height:3.2rem;margin-top:-1.6rem;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:var(--plum);box-shadow:0 12px 26px -12px rgba(10,20,40,.55);cursor:pointer;opacity:.9;transition:opacity .25s,scale .25s var(--spring),background-color .2s}
.school__arrow:hover{opacity:1;scale:1.08;background:#fff}
.school__arrow svg{width:1.3rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.school__arrow--prev{left:1.1rem}
.school__arrow--next{right:1.1rem}
.school__pause{flex:none;display:grid;place-items:center;width:1.7rem;height:1.7rem;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.88);color:var(--plum);cursor:pointer}
.school__pause svg{width:.8rem;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.school__pause .i-play{display:none;fill:currentColor;stroke-width:2}
.school__pause[aria-pressed="true"] .i-play{display:block}
.school__pause[aria-pressed="true"] .i-pause{display:none}

/* ------------------------------------------------------------------- grow
   The five words from the logo. Calm layout: a list of the words with their
   lines and the tree. With motion: the stage pins, the tree grows, and each
   word fills with its own colour while a soft glow behind the tree takes on
   the same tint. One colour at a time, on a quiet cream page. */
.grow{z-index:2;background:#fffaf0}
.grow__stick{position:relative;display:grid;gap:2.5rem;justify-items:center;padding:clamp(4rem,8vw,7rem) var(--gut) 0}
.grow__glow{display:none}
.grow__list{display:grid;gap:clamp(.9rem,2vw,1.5rem);width:100%;max-width:var(--wrap)}
.grow__list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem 1.4rem}
.grow__word{color:var(--c);font-family:var(--hand);font-weight:800;font-size:clamp(3.2rem,1.8rem + 6vw,8rem);line-height:1.04;letter-spacing:-.025em}
.grow__line{color:var(--ink);font-family:var(--hand);font-weight:600;font-size:clamp(1.1rem,.98rem + .6vw,1.6rem);line-height:1.3}
.grow__tree{position:relative;width:min(92vw,36rem)}
.grow__tree .scene__tree{width:100%}

.motion .grow{height:330vh}
.motion .grow__stick{position:sticky;top:0;display:block;height:100svh;padding:0;overflow:hidden}
.motion .grow__glow{--glow:#d6ecb4;display:block;position:absolute;z-index:0;right:calc(max(2vw,(100vw - 100rem)/2) - 8vw);bottom:-38svh;width:min(66vw,130svh);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--glow),rgba(255,250,240,0))}
.motion .grow__list{position:absolute;z-index:3;top:50%;left:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));width:auto;gap:0;padding-bottom:5.6rem;translate:0 -50%}
.motion .grow__list li{display:block}
/* Each word starts as a pale outline of itself and its colour wipes across. */
.motion .grow__word{--f:0;position:relative;display:block;width:max-content;font-size:min(7vw,10.4svh);line-height:1.02;color:rgba(84,41,143,.1)}
.motion .grow__word::after{content:attr(data-w);position:absolute;inset:0;color:var(--c);clip-path:inset(-10% calc(100% - var(--f)*1%) -20% 0)}
.motion .grow__line{position:absolute;left:0;bottom:0;width:min(30rem,42vw);color:var(--c);font-size:clamp(1.15rem,1rem + .6vw,1.6rem);visibility:hidden}
.motion .grow__tree{position:absolute;z-index:2;right:max(1vw,calc((100vw - 104rem)/2));bottom:0;width:min(44vw,calc(80svh*1.25));transform-origin:50% 100%}

/* ---------------------------------------------------------------- helpers
   A helper chart, like the one on a family day care wall. Each little job is
   a row with a photo, and its empty sticker spot gets a gold star. */
.helpers{z-index:2;padding-block:clamp(8rem,15vw,14rem) clamp(9rem,17vw,16rem);background:var(--peach)}
.helpers__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.helpers__copy>p{margin-top:1.1rem}
.say-so{margin:clamp(2.6rem,4vw,3.4rem) 0 0;padding:0}
.say-so blockquote{position:relative;margin:0;padding:clamp(1.9rem,3vw,2.5rem) clamp(1.4rem,2.6vw,2.2rem) clamp(1.4rem,2.4vw,1.9rem);border-radius:28px;background:#fff;rotate:-1.2deg;box-shadow:0 30px 50px -30px rgba(180,100,10,.55),0 6px 14px -8px rgba(46,26,80,.14)}
/* A big pink opening mark, hung over the top edge, and a little tail
   pointing down at the person speaking. */
.say-so blockquote::before{content:"\201C";position:absolute;top:-.25em;left:.1em;color:var(--pink);font-family:var(--hand);font-weight:800;font-size:clamp(5.4rem,4rem + 4vw,8rem);line-height:1;translate:0 var(--qy,0px);scale:var(--qs,1);pointer-events:none}
.say-so blockquote::after{content:"";position:absolute;left:2.4rem;bottom:-13px;width:28px;height:28px;border-radius:0 0 7px 0;background:#fff;rotate:45deg}
.say-so p{max-width:26em;color:var(--ink);font-family:var(--hand);font-weight:600;font-size:clamp(1.16rem,1.02rem + .5vw,1.45rem);line-height:1.45}
.say-so figcaption{display:flex;align-items:center;gap:.85rem;margin-top:1.4rem;padding-left:1.35rem;line-height:1.25}
.say-so figcaption img{flex:none;width:3.6rem;height:3.6rem;border-radius:50%;border:3px solid #fff;box-shadow:0 8px 16px -8px rgba(84,41,143,.5)}
.say-so figcaption span{font-size:.95rem;color:var(--soft)}
.say-so figcaption strong{display:block;color:var(--plum);font-family:var(--hand);font-weight:700;font-size:1.2rem}
.chart{display:grid;padding:clamp(.6rem,1.6vw,1.2rem) clamp(1rem,2.4vw,2rem);border-radius:30px;background:#fff;box-shadow:0 40px 70px -40px rgba(180,100,10,.5),0 6px 16px -10px rgba(46,26,80,.14)}
.chart li{display:grid;grid-template-columns:clamp(5.4rem,9.5vw,8.4rem) minmax(0,1fr) clamp(3.1rem,4.6vw,4.2rem);gap:clamp(.9rem,2vw,1.6rem);align-items:center;padding-block:clamp(.8rem,1.6vw,1.15rem)}
.chart li+li{border-top:2px dashed rgba(84,41,143,.16)}
.chart__pic{aspect-ratio:1;border-radius:20px;overflow:hidden;background:var(--g)}
.chart__pic img{width:100%;height:100%;object-fit:cover}
.chart__pic--drawn svg{width:100%;height:100%;padding:9%}
.chart h3{color:var(--c);font-size:clamp(1.25rem,1.1rem + .6vw,1.75rem)}
.chart p{margin-top:.25rem;font-size:.97em;line-height:1.42}
/* The empty sticker spot, then the star that lands on it. */
.star{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:50%;border:2.5px dashed rgba(84,41,143,.22)}
.star svg{width:122%;max-width:none;overflow:visible;fill:var(--butter);stroke:#d9900f;stroke-width:3;stroke-linejoin:round;filter:drop-shadow(0 4px 4px rgba(180,100,10,.3))}
.star .star__shine{fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round}
.star__ping{position:absolute;inset:0;border-radius:50%;border:3px solid var(--amber);opacity:0;pointer-events:none}

/* -------------------------------------------------------------------- gal
   The gallery wall. Calm layout: a tidy grid of square photos. With motion,
   the stage holds still for a few scrolls while the two photo columns drift
   in opposite directions and fade softly at the top and bottom. The up and
   down buttons let you keep browsing without moving on. */
.gal{--gg:clamp(.9rem,1.9vw,1.6rem);z-index:2;padding-block:clamp(7rem,12vw,10rem) var(--gap);background:var(--sky)}
.gal__grid{display:grid;gap:clamp(2rem,4vw,3rem)}
.gal__copy p{margin:1rem 0 1.1rem}
.gal__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gg)}
.gal__col{display:contents}
.gal__col li{aspect-ratio:1;overflow:hidden;background:#fff}
.gal__open{display:block;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:none;cursor:zoom-in}
.gal__open img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.gal__open:hover img{transform:scale(1.05)}
.gal__open:focus-visible{outline-offset:-6px;border-radius:inherit}
.gal__btns{display:none}
.gal__btn{display:grid;place-items:center;width:3.1rem;height:3.1rem;padding:0;border:0;border-radius:50%;background:#fff;color:var(--plum);box-shadow:0 12px 24px -12px rgba(84,41,143,.6);cursor:pointer;transition:transform .2s var(--spring),background-color .2s,color .2s}
.gal__btn:hover{transform:scale(1.08);background:var(--plum);color:#fff}
.gal__btn:active{transform:scale(.94)}
.gal__btn svg{width:1.3rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

.motion .gal{padding-block:170px 100px}
.motion .gal__copy h2{font-size:clamp(2.3rem,1.2rem + 2.3vw,3.7rem)}
.motion .gal__grid{grid-template-columns:minmax(17rem,.9fr) minmax(0,2.25fr) auto;align-items:center;gap:clamp(1.6rem,3.4vw,3.4rem)}
.motion .gal__cols{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;position:relative;height:clamp(560px,84svh,920px);overflow:hidden}
/* The soft fade at the top and bottom is two thin strips of sky laid over
   the photos. A CSS mask looked the same but made the browser redraw the
   whole wall on every scroll frame. */
.motion .gal__cols::before,.motion .gal__cols::after{content:"";position:absolute;z-index:2;left:0;right:0;height:20px;pointer-events:none}
.motion .gal__cols::before{top:0;background:linear-gradient(var(--sky),rgba(255,241,210,0))}
.motion .gal__cols::after{bottom:0;background:linear-gradient(rgba(255,241,210,0),var(--sky))}
.motion .gal__col{display:flex;flex-direction:column;gap:var(--gg);will-change:transform;backface-visibility:hidden}
.motion .gal__col li{aspect-ratio:auto}
.motion .gal__col img{height:auto}
.motion .gal__btns{display:grid;gap:.75rem}

/* ---------------------------------------------------------------- details
   One sheet with six answers on it. Each icon sits in a soft tint of its own
   colour, so the colour is rationed to the icons. */
.details{z-index:3;padding-block:clamp(7rem,13vw,12rem) clamp(9rem,18vw,17rem);background:var(--sky)}
.details__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 3rem;margin-bottom:clamp(2rem,4vw,3.2rem)}
.details__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.8rem,3.4vw,2.8rem) clamp(1.4rem,3vw,3rem);padding:clamp(1.6rem,3.6vw,3.2rem);border-radius:34px;background:#fff;box-shadow:0 40px 70px -40px rgba(46,26,80,.4),0 6px 16px -10px rgba(46,26,80,.12)}
.details__list li{display:flex;align-items:flex-start;gap:1.1rem}
.details__icon{flex:none;display:grid;place-items:center;width:3.5rem;aspect-ratio:1;border-radius:50%;background:var(--g)}
.details__icon svg{width:1.9rem;fill:none;stroke:var(--c);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.details__list h3{font-size:clamp(1.3rem,1.15rem + .5vw,1.7rem)}
.details__list p{margin-top:.3rem;font-size:.97em;line-height:1.45}

/* ------------------------------------------------------------------- chat */
.chat{z-index:3;padding-block:clamp(8rem,16vw,15rem) clamp(8rem,16vw,15rem);background:var(--blush)}
.chat__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.chat__head{position:sticky;top:7rem}
.chat__head h2{font-size:clamp(2.2rem,1.5rem + 2.4vw,3.7rem)}
.chat__head p{margin-top:1rem}
.chat__head .hand{display:inline-block;margin-top:1.1rem}
.thread{display:flex;flex-direction:column;gap:.7rem}
.say{position:relative;max-width:min(88%,32rem);margin:0;padding:.85rem 1.2rem;border-radius:24px;font-size:1em;line-height:1.42}
.say--q{align-self:flex-end;margin-top:1.1rem;background:var(--plum);color:#fff;border-bottom-right-radius:6px;font-family:var(--hand);font-weight:600;letter-spacing:0;box-shadow:0 14px 26px -16px rgba(84,41,143,.7)}
.say--a{align-self:flex-start;background:#fff;color:var(--ink);border-bottom-left-radius:6px;box-shadow:0 14px 28px -18px rgba(194,47,123,.55)}
.say--q:first-child{margin-top:0}
.thread__box{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.6rem;padding:.65rem .7rem .65rem 1.4rem;border-radius:999px;background:#fff;color:var(--plum);box-shadow:0 0 0 3px var(--plum);font-family:var(--hand);font-weight:600;text-decoration:none;transition:scale .2s var(--spring)}
.thread__box:hover{scale:1.02}
.thread__box svg{flex:none;width:2.6rem;padding:.55rem;border-radius:50%;background:var(--pink);color:#fff}

/* ------------------------------------------------------------------- home */
.home{z-index:3;min-height:max(112svh,760px);overflow:clip;display:flex;align-items:center;padding:clamp(6rem,12vh,9rem) var(--gut) 11rem;background:linear-gradient(#ffe3c2,#ffc98c 58%,#ffad7a)}
.home__sun{position:absolute;z-index:0;right:24vw;top:16%;width:clamp(180px,22vw,340px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ffe58f 58%,#ffd666 60%,#ffd66600 71%)}
.home__copy{position:relative;z-index:4;width:min(42vw,40rem);margin-left:max(0px,calc((100vw - 100rem)/2))}
.home__copy::before{content:"";position:absolute;z-index:-1;inset:-14% -24% -14% -40%;background:radial-gradient(closest-side,rgba(255,226,188,.95) 40%,rgba(255,220,176,.72) 66%,rgba(255,214,166,0));pointer-events:none}
.home__title{font-size:clamp(2.8rem,1.4rem + 4vw,5.6rem);font-weight:800;line-height:1.03}
.home__title .ch{display:inline-block}
.home__copy p{margin:1.2rem 0;color:var(--ink)}
.home__copy p+p{margin-top:-.2rem}
.home__phone{display:inline-block;margin-bottom:1.2rem;color:var(--plum);font-family:var(--hand);font-weight:800;font-size:clamp(2.4rem,1.3rem + 3.7vw,5rem);line-height:1;text-decoration:none;transition:color .2s}
.home__phone:hover{color:var(--pink-d)}
.scene--home{bottom:calc(clamp(110px,22vh,220px)*.47 - 32px);width:min(52vw,calc((100svh - 6rem)*1.1))}
.scene--home .scene__tree,.scene--home img{filter:saturate(1.08) sepia(.12)}

/* --------------------------------------------------------------- lightbox
   A gallery photo seen big. The frame is placed by script, flying out of
   the wall and back into it. */
html.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:none;overflow:hidden;color:#fff}
.lb::backdrop{background:none}
.lb__veil{position:absolute;inset:0;background:rgba(42,22,72,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lb__fig{position:absolute;inset:0;margin:0;pointer-events:none}
.lb__frame{--bw:10px;position:fixed;left:50%;top:50%;width:0;height:0;overflow:hidden;border-radius:24px;background:#fff;box-shadow:0 0 0 var(--bw) #fff,0 50px 90px -30px rgba(8,0,24,.7);pointer-events:auto}
.lb__frame img{width:100%;height:100%;object-fit:cover}
.lb__cap{position:fixed;left:50%;bottom:clamp(1.4rem,4vh,2.6rem);width:min(40rem,calc(100% - 12rem));translate:-50% 0;margin:0;text-align:center;font-family:var(--hand);font-weight:600;font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);line-height:1.35;text-wrap:balance}
.lb__count{position:fixed;left:1.6rem;top:1.5rem;margin:0;font-family:var(--hand);font-weight:700;font-size:1rem;color:var(--butter)}
.lb__btn{position:fixed;z-index:2;display:grid;place-items:center;width:3.3rem;height:3.3rem;padding:0;border:0;border-radius:50%;background:#fff;color:var(--plum);box-shadow:0 12px 26px -12px rgba(0,0,0,.6);cursor:pointer;transition:background-color .2s,color .2s}
.lb__btn:hover{background:var(--butter);color:var(--plum-d)}
.lb__btn:focus-visible{outline-color:var(--butter)}
.lb__btn svg{width:1.4rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lb__close{top:1.1rem;right:1.1rem}
.lb__prev,.lb__next{top:calc(50% - 1.65rem)}
.lb__prev{left:clamp(1rem,2.4vw,2.2rem)}
.lb__next{right:clamp(1rem,2.4vw,2.2rem)}
.lb__dot{position:fixed;z-index:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none}

/* ------------------------------------------------------------------- foot */
.foot{position:relative;z-index:3;overflow:clip;padding-block:clamp(3rem,6vw,5rem) 1.6rem;background:var(--plum-d);color:#fff}
.foot__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem 4rem}
.foot__brand{display:flex;align-items:center;gap:1.4rem;max-width:30rem}
.foot__brand img{flex:none;width:110px;border-radius:50%;background:#fff}
.foot__about{display:grid;gap:1.35rem}
.foot__brand p{font-family:var(--hand);font-weight:600;font-size:1.2rem;line-height:1.35}
.foot .foot__social{display:flex;gap:.6rem;margin:0;padding:0;list-style:none}
.foot__social a{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;transition:background-color .25s,color .25s,translate .3s var(--spring)}
.foot .foot__social a:hover{background:#fff;color:var(--plum-d);translate:0 -3px}
.foot__social a:focus-visible{outline:3px solid var(--butter);outline-offset:3px}
.foot__social svg{width:1.2rem;height:1.2rem;fill:currentColor}
.foot ul{display:grid;grid-template-columns:repeat(2,auto);gap:.45rem 2.6rem}
.foot a{color:#fff;text-underline-offset:.2em}
.foot a:hover{color:var(--butter)}
.foot__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 2rem;margin-top:2.4rem;padding-top:1.1rem;border-top:2px dashed rgba(255,255,255,.28);font-size:.92rem;line-height:1.5}
.foot__base span:last-child{text-align:right}
/* The studio credit. foot.js blows a gust of leaves along this line and the
   words appear behind them. Without script it simply shows. */
.foot__credit{position:relative;max-width:none;margin:2rem 0 0;color:rgba(255,246,226,.56);font-size:.8rem;letter-spacing:.05em;text-align:center}
.foot__credit span{display:inline-block;white-space:pre}
.foot .foot__credit a{color:inherit;text-decoration:none;transition:color .2s}
.foot .foot__credit a:hover{color:rgba(255,246,226,.85)}
.foot__credit a:focus-visible{outline:2px solid var(--butter);outline-offset:3px;border-radius:4px}
.foot__gust{position:absolute;left:0;top:50%;width:100%;height:100px;translate:0 -50%;pointer-events:none}

.dock{display:none}


/* ------------------------------------------------------------------ phones */
@media (max-width:900px){
  h2{font-size:clamp(2.2rem,8.6vw,3.2rem)}
  .bar{padding:.55rem var(--gut)}
  .bar__logo{width:58px;--big:1.5}
  .bar__nav{display:none}
  .bar__menu{display:inline-flex}
  .pic{border-radius:22px}

  .hero{--grass:0px;--more:0px;display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:7.4rem var(--gut) 0}
  .hero::after{display:none}
  .scene{width:min(108vw,620px)}
  .hero__copy{display:contents}
  .hero__title{order:1;position:relative;z-index:4}
  .hero .scene{order:2}
  .hero .hill{order:3}
  .hero__lead,.facts,.hero__act{order:5;position:relative;z-index:4;margin:0 calc(var(--gut)*-1);padding-inline:var(--gut);background:#79b833;color:var(--night);max-width:none}
  .hero__lead{padding-top:.4rem;padding-bottom:1.1rem}
  .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 1rem;padding-bottom:1.6rem;font-size:.95rem}
  .facts li{align-items:flex-start}
  .facts svg{width:1.4rem;stroke:var(--night)}
  /* On a phone the button and the phone link stack on the left, with the
     rating set small beside them on the right. */
  .hero__act{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 .8rem;padding-bottom:4.2rem}
  .hero .cta{flex-direction:column;align-items:flex-start;gap:1.1rem;padding:0;margin:0;background:none}
  .hero .hand{color:var(--night);text-decoration-color:rgba(42,22,72,.4)}
  .hero__title{font-size:clamp(2.7rem,12.4vw,4.4rem)}
  /* The tree stands right on the hill, so the flowers at its feet still show. */
  .scene{position:relative;right:auto;bottom:auto;left:50%;flex:none;width:min(108vw,620px);margin:.6rem 0 0;translate:-50% 0}
  .hero .hill{position:relative;margin-inline:calc(var(--gut)*-1);width:calc(100% + var(--gut)*2);height:90px;margin-top:-48px;bottom:auto}
  .leaves svg{width:24px}
  .sun{top:calc(2.9rem + 15px);left:auto;right:calc(-15% + 75px);width:182px}
  .sun__face{font-size:1.02rem}
  .cloud--a{top:auto;bottom:44%;left:4%}
  .cloud--b{top:5%;right:auto;left:42%}
  .cloud--c{display:none}
  .hint{display:none}
  .hero__copy::before{display:none}

  .meet{padding-block:4.5rem 6.5rem}
  .group{padding-block:6rem 8rem}
  .meet__grid,.group__grid,.stop,.stop--l,.cook__grid,.school__grid,.chat__grid{grid-template-columns:minmax(0,1fr)}
  .meet__pic{justify-self:stretch;max-width:none}
  .badges{gap:.7rem;justify-content:flex-start}
  .patch{width:5.6rem}

  .floor{aspect-ratio:4/2.75;margin-top:-4rem}
  .tally{gap:1rem}
  .tally__item{flex-direction:column;align-items:flex-start;gap:.35rem}
  .tally__n{font-size:clamp(3.8rem,17vw,5rem)}
  .tally__label{font-size:1rem}

  .fridge{padding-block:6rem 5.5rem}
  .fridge__grid{grid-template-columns:minmax(0,1fr);gap:3rem}
  .score{gap:1rem}
  .stars--big{width:9rem;height:1.75rem;-webkit-mask-size:1.8rem 1.75rem;mask-size:1.8rem 1.75rem}
  .notes{display:flex;gap:1rem;margin-top:2.6rem;padding-block:2.4rem 1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
  .notes::-webkit-scrollbar{display:none}
  .notes li{flex:0 0 80%;scroll-snap-align:start}
  .notes li:nth-child(even){margin-top:0}
  .note:hover{rotate:var(--r);translate:none}
  /* On a phone the award sits on the grass under the tree, with no box. */
  .hero .award{margin:0;padding:.6rem .7rem .55rem;border-radius:18px;background:radial-gradient(circle at 30% 20%,#fff1b8,#f7cf5c 40%,#e3a12a 80%,#b8740a);box-shadow:inset 0 0 0 3px rgba(255,241,184,.65),inset 0 0 0 5px #e3a12a,inset 0 0 0 6px rgba(120,70,0,.35),0 4px 0 #b8740a,0 12px 18px -10px rgba(20,40,10,.5)}
  .award__laurel{display:none}
  /* Centred in the space between the buttons and the right edge of the screen. */
  .hero .award{justify-self:center;align-self:stretch;justify-content:center;margin-right:calc(var(--gut)*-1);padding-inline:1rem}
  .award__body{gap:.22rem}
  .award__top{flex-direction:column;gap:.18rem}
  .award__num{font-size:1.6rem;background:none;color:var(--night)}
  .award .stars{width:4.1rem;height:.82rem;background:var(--night);filter:none;-webkit-mask-size:.82rem .82rem;mask-size:.82rem .82rem;animation:none}
  .award__from{gap:.25rem;font-size:.72rem;color:var(--night)}
  .award__from .rating__g{width:.8rem;height:.8rem}
  .hero .btn{padding-inline:1.1rem;font-size:1rem;white-space:nowrap}
  .hero .cta{--bpad:1.1rem}
  .hero .cta .hand{white-space:nowrap;font-size:.95rem}
  .award__word{display:none}
  .motion .award__num{animation:none}
  .note__magnet{font-size:2.3rem;bottom:.8rem}
  .note--big .note__magnet{font-size:2.8rem;bottom:1rem;right:1.2rem}
  .fridge__more{margin-top:1.2rem}
  .fridge__stack{padding-top:0}
  .fridge__stack .note--big{margin-right:0}
  .hearts{top:2.8rem;left:auto;right:.6rem;scale:.8;transform-origin:100% 0}

  .stop--l .pic{order:0}
  .path{padding-top:clamp(6rem,24vw,9rem)}
  .stops{gap:5rem}

  .motion .make__track{--h:min(48svh,440px);--top:calc(24svh + 50px)}
  .motion .hang:nth-of-type(even){--top:calc(25.5svh + 50px)}
  .motion .hang{max-width:82vw}
  .motion .make__track{padding-left:8vw}
  .motion .make__lead{width:84vw;margin-right:6vw}
  .motion .make__lead p{font-size:1rem}
  .motion .make__end{width:80vw}

  .quilt__panel{grid-template-columns:minmax(0,1fr);gap:1rem;padding:1.2rem}
  .quilt__pic{aspect-ratio:16/10}
  .motion .quilt__copy p{font-size:1rem}
  .motion .quilt__copy h2{font-size:clamp(1.9rem,8vw,2.6rem)}

  .grow__list li{display:block}
  .grow__line{display:block;margin-top:.1rem}
  .motion .grow__list{left:var(--gut);right:var(--gut);top:5.6rem;padding-bottom:3.6rem;translate:none}
  .motion .grow__word{font-size:min(15vw,7.3svh)}
  .motion .grow__line{width:100%;font-size:1.15rem}
  /* Stands clear of the Text and Book buttons docked at the bottom. */
  .motion .grow__tree{left:50%;right:auto;bottom:4.6rem;width:min(88vw,41svh);translate:-50% 0}
  .motion .grow__glow{left:50%;right:auto;bottom:-26svh;width:130vw;translate:-50% 0}

  .helpers__grid{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .chart{padding:.3rem .85rem;border-radius:24px}
  .chart li{grid-template-columns:4.3rem minmax(0,1fr) 2.4rem;gap:.75rem}
  .chart__pic{border-radius:14px}
  .chart h3{font-size:1.14rem}
  .chart p{font-size:.94rem;line-height:1.38}

  .gal{padding-top:6rem}
  .motion .gal{padding-block:6rem 4.6rem}
  .gal__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .motion .gal__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .motion .gal__grid{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:stretch;gap:1.4rem .55rem}
  .motion .gal__copy{grid-column:1/-1}
  .motion .gal__copy h2{font-size:clamp(1.9rem,8vw,2.6rem)}
  .motion .gal__copy p{margin:.55rem 0 0;font-size:1rem;line-height:1.45}
  .motion .gal__copy .hand{display:none}
  .motion .gal__cols{height:min(78svh,640px)}
  .motion .gal__btns{align-self:center;gap:1.2rem}
  .gal__btn{width:2.6rem;height:2.6rem}
  .gal__btn svg{width:1.1rem}

  .details__list{grid-template-columns:minmax(0,1fr);gap:1.3rem;padding:1.4rem 1.2rem;border-radius:26px}
  .details__icon{width:3rem}
  .details__icon svg{width:1.6rem}
  .details__list h3{font-size:1.25rem}
  .details__list p{font-size:.95rem;margin-top:.15rem}

  .cook{padding-bottom:9rem}
  .school{padding-block:7rem 10rem}
  .school__pic{aspect-ratio:1}
  .school__ctrl{left:1rem;right:1rem;bottom:.75rem}
  .school__bar button{pointer-events:none}
  .school__arrow{display:none}
  .helpers{padding-block:7rem 10rem}
  .details{padding-block:4rem 8rem}
  .chat{padding-block:7.5rem 5rem}
  .chat__head{position:static}
  .say{max-width:92%}

  .home{display:block;min-height:0;padding:6rem var(--gut) 0}
  .home__copy{width:100%;margin:0}
  .home__copy::before{display:none}
  .home__sun{right:-8vw;top:auto;bottom:34vw;width:60vw}
  .scene--home{bottom:auto;margin-top:2rem}
  .home .hill{position:relative;margin-inline:calc(var(--gut)*-1);width:calc(100% + var(--gut)*2);height:90px;margin-top:-58px;bottom:auto}

  .say-so blockquote{rotate:-.8deg}
  .lb__cap{bottom:5.6rem;width:calc(100% - 2.4rem)}
  .lb__prev,.lb__next{top:auto;bottom:1.2rem}
  .lb__prev{left:calc(50% - 4rem)}
  .lb__next{right:calc(50% - 4rem)}
  .lb__count{left:1.2rem;top:1.4rem}

  .foot{padding-bottom:6.4rem}
  .foot__brand img{width:88px}
  .foot__brand{align-items:flex-start}
  .foot__base span:last-child{margin-top:1.4em;text-align:left}
  .dock{position:fixed;z-index:45;left:.7rem;right:.7rem;bottom:.7rem;display:flex;gap:.6rem}
  .dock .btn{flex:1;min-height:3.1rem;padding:.4rem .6rem;font-size:1.02rem;white-space:nowrap}
  .dock .btn--paper{box-shadow:0 5px 0 #c9b8e6}
}

@media (max-width:368px){
  .hero .btn{font-size:.88rem;padding-inline:.75rem}
  .hero .cta{--bpad:.75rem}
  .hero .cta .hand{font-size:.86rem}
  .award__num{font-size:1.4rem}
  .award .stars{width:3.6rem;height:.72rem;-webkit-mask-size:.72rem .72rem;mask-size:.72rem .72rem}
}

@media (max-width:385px){
  .hero .btn{font-size:.94rem;padding-inline:.9rem}
  .hero .cta{--bpad:.9rem}
  .hero .cta .hand{font-size:.9rem}
  .hero__act{gap:0 .55rem}
}

@media (max-width:900px) and (max-height:700px){
  .motion .quilt__pic{aspect-ratio:2/1}
}

@media (min-width:901px) and (max-height:800px){
  .hero{padding-top:5.6rem}
  .bar__logo{--big:1.35}
  .hero__lead{margin:.8rem 0;font-size:1rem}
  .facts{margin-bottom:1.1rem;font-size:.96rem}
  .award{margin-top:1.2rem}
  .award__laurel{width:1.5rem}
  .award__num{font-size:1.85rem}
  .motion .quilt__pic{aspect-ratio:5/4}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.hand,.bar__logo{transition:none}
  .btn:hover{translate:none;scale:none}
}

/* Wide desktops: let "By home time" use the room, with bigger photos and a
   roomier text column instead of being squeezed into the standard wrap. */
@media (min-width:1400px){
  .gal .gal__grid{max-width:min(118rem,96vw)}
  .motion .gal__grid{grid-template-columns:minmax(24rem,1fr) minmax(0,2.6fr) auto;gap:clamp(2.5rem,4vw,5rem)}
  .motion .gal__copy h2{font-size:clamp(3.2rem,1.4rem + 2.3vw,4.6rem)}
  .motion .gal__copy p{font-size:1.15rem}
  .motion .gal__cols{height:clamp(640px,88svh,1100px)}
}