/* ==========================================================================
   Ananya Tots — Homepage
   Desktop values are written in design pixels (1440px artboard) and scale
   with --u so 1440/1280/1024 layouts keep the exact proportions.
   ========================================================================== */

@font-face{font-family:"League Gothic";src:url("assets/fonts/league-gothic-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DynaPuff";src:url("assets/fonts/dynapuff-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Quicksand";src:url("assets/fonts/quicksand-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Quicksand";src:url("assets/fonts/quicksand-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Quicksand";src:url("assets/fonts/quicksand-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Caveat";src:url("assets/fonts/caveat-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Caveat";src:url("assets/fonts/caveat-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --cream:#fffdf8;
  --purple:#673893;
  --purple-deep:#4d2a83;
  --plum:#341f46;
  --orange:#e87726;
  --peach:#ffe1c2;
  --blush:#f9cfc1;
  --lilac:#f4edf9;
  --ink:#333333;
  --text:#666666;
  --muted:#6b5d8c;
  --blue:#1352a3;
  --f-display:"League Gothic","Oswald","Arial Narrow",sans-serif;
  --f-script:"DynaPuff","Baloo 2","Comic Sans MS",cursive;
  --f-body:"Quicksand","Nunito",system-ui,sans-serif;
  --f-hand:"Caveat","Segoe Print",cursive;
  --u:1px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cream);color:var(--text);font-family:var(--f-body);font-weight:500;line-height:1.3;letter-spacing:.03em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.site{overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0;font-weight:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--purple);color:#fff;padding:10px 16px;border-radius:8px}
.skip-link:focus{top:12px}

.site{container-type:inline-size}
.site>*{--u:calc(min(100cqw,1440px)/1440)}
.wrap{position:relative;width:100%;max-width:1440px;margin:0 auto}

/* ---------- Shared type ---------- */
.heading{position:relative}
.heading h1,.heading h2{position:relative;z-index:1}
.h-display{display:block;font-family:var(--f-display);font-weight:400;color:var(--purple);letter-spacing:.01em;font-size:calc(80 * var(--u));line-height:calc(94 * var(--u));padding-top:calc(4 * var(--u))}
.h-script{display:block;font-family:var(--f-script);font-weight:500;color:var(--orange);letter-spacing:-.03em;word-spacing:.06em;font-size:calc(58 * var(--u));line-height:calc(70 * var(--u))}
.h-caps{text-transform:uppercase}
.uline{position:absolute;max-width:none;width:calc(505 * var(--u));height:calc(63 * var(--u));pointer-events:none}

/* ---------- Button (watercolour pill from the design) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;width:calc(196 * var(--u));height:calc(64 * var(--u));padding:0 calc(32 * var(--u)) calc(2 * var(--u)) 0;background:url("assets/img/btn-bg.webp") center/100% 100% no-repeat;color:var(--purple);font-family:var(--f-body);font-weight:700;font-size:calc(18 * var(--u));letter-spacing:.04em;white-space:nowrap;transition:transform .2s ease,filter .2s ease}
.btn:hover{transform:translateY(-2px);filter:saturate(1.15)}
.btn:active{transform:translateY(0)}

/* ---------- Header ---------- */
.site-header{position:relative;z-index:20}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:calc(95 * var(--u));padding:0 calc(60 * var(--u)) 0 calc(56 * var(--u))}
.logo img{width:calc(136 * var(--u))}
.main-nav{margin-left:calc(-6 * var(--u))}
.main-nav ul{display:flex;gap:calc(41 * var(--u))}
.main-nav a{color:var(--ink);font-size:calc(16 * var(--u));letter-spacing:.01em;position:relative;padding:4px 0}
.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.main-nav a:hover::after,.main-nav a:focus-visible::after{transform:scaleX(1)}
.btn--nav-mobile,.nav-toggle{display:none}

/* ---------- Hero ---------- */
.hero__inner{height:calc(565 * var(--u))}
.hero__content{position:absolute;inset:0 auto auto 0;width:calc(560 * var(--u));padding:calc(84 * var(--u)) 0 0 calc(60 * var(--u));z-index:2}
.hero .h-display{font-size:calc(90 * var(--u));line-height:calc(60 * var(--u));padding-top:calc(26 * var(--u));letter-spacing:0}
.hero .uline{left:calc(-66 * var(--u));top:calc(151 * var(--u));width:calc(473 * var(--u))}
.hero__text{margin-top:calc(38 * var(--u));width:calc(440 * var(--u));font-size:calc(16 * var(--u));line-height:calc(21 * var(--u))}
.hero__btn{position:relative;left:calc(1 * var(--u));margin-top:calc(29 * var(--u))}
.hero__note{position:absolute;left:calc(352 * var(--u));top:calc(343 * var(--u));width:calc(190 * var(--u))}
.hero__heart{position:absolute;left:calc(110 * var(--u));top:calc(467 * var(--u));width:calc(84 * var(--u))}
.hero__art{position:absolute;left:calc(353 * var(--u));top:calc(12 * var(--u));width:calc(1092 * var(--u));max-width:none;z-index:1}

/* ---------- Highlights band ---------- */
.band{position:relative;z-index:5;height:calc(190 * var(--u));margin-top:calc(-35 * var(--u))}
.band::before{content:"";position:absolute;inset:0 -1.2%;background:url("assets/img/band-bg.webp") center/100% 100% no-repeat;z-index:-1}
.band__list{height:100%}
.band__item{position:absolute;top:calc(57 * var(--u));height:calc(76 * var(--u));display:flex;align-items:center;color:var(--blue);font-weight:700;font-size:calc(24 * var(--u));letter-spacing:.04em;white-space:nowrap}
.band__item--kids{left:calc(100 * var(--u))}
.band__item--kids img{width:calc(142 * var(--u));margin-right:calc(15 * var(--u))}
.band__item--book{left:calc(604 * var(--u))}
.band__item--book img{width:calc(94 * var(--u));margin-right:calc(18 * var(--u))}
.band__item--care{left:calc(1038 * var(--u))}
.band__item--care img{width:calc(76 * var(--u));margin-right:calc(17 * var(--u))}
.band__item--book::before,.band__item--care::before{content:"";position:absolute;left:calc(-33 * var(--u));top:calc(7 * var(--u));width:1px;height:calc(58 * var(--u));background:#c7cdd3}

/* ---------- About ---------- */
.about{background:var(--peach);margin-top:calc(-46 * var(--u))}
.about__inner{height:calc(619 * var(--u))}
.about__art{position:absolute;left:calc(40 * var(--u));top:calc(21 * var(--u));width:calc(660 * var(--u))}
.about__content{position:absolute;left:calc(776 * var(--u));top:calc(53 * var(--u));width:calc(600 * var(--u))}
.about .h-display{font-size:calc(80 * var(--u));line-height:calc(78 * var(--u));letter-spacing:.025em;padding-top:calc(13 * var(--u))}
.about .uline{left:calc(-34 * var(--u));top:calc(134 * var(--u));width:calc(474 * var(--u))}
.about p{width:calc(592 * var(--u));font-size:calc(16 * var(--u));line-height:calc(21 * var(--u))}
.about p:first-of-type{margin-top:calc(25 * var(--u))}
.about p+p{margin-top:calc(24 * var(--u))}
.about .btn{margin-top:calc(37 * var(--u))}

/* ---------- Doodle strip ---------- */
.doodle{position:relative;background:var(--peach);padding:0 0 calc(34 * var(--u));margin-top:calc(-22 * var(--u))}
.doodle img{width:100%}

/* ---------- World / pillars ---------- */
.world .wrap{padding:0 0 calc(4 * var(--u))}
.world__top{position:relative;height:calc(233 * var(--u))}
.world .heading{position:absolute;left:calc(60 * var(--u));top:calc(46 * var(--u))}
.world .h-display{font-size:calc(80 * var(--u));line-height:calc(90 * var(--u));letter-spacing:.025em;padding-top:calc(10 * var(--u))}
.world .uline{left:calc(-34 * var(--u));top:calc(155 * var(--u));width:calc(473 * var(--u))}
.world__intro{position:absolute;left:calc(796 * var(--u));top:calc(1 * var(--u))}
.world__intro p{width:calc(560 * var(--u));font-size:calc(16 * var(--u));line-height:calc(21 * var(--u))}
.world__intro .btn{margin-top:calc(21 * var(--u))}
.pillars{display:grid;grid-template-columns:repeat(4,calc(312 * var(--u)));column-gap:calc(25 * var(--u));padding-left:calc(59 * var(--u))}
.pillar{text-align:center}
.pillar img{width:calc(312 * var(--u))}
.pillar h3{margin-top:calc(-10 * var(--u));font-family:var(--f-display);color:var(--purple);font-size:calc(32 * var(--u));line-height:calc(44 * var(--u));letter-spacing:0}
.pillar p{margin:calc(6 * var(--u)) auto 0;max-width:calc(312 * var(--u));letter-spacing:.02em;font-size:calc(16 * var(--u));line-height:calc(21 * var(--u))}

/* ---------- They call it play (dark) ---------- */
.play{position:relative;color:#ddd}
.play__edge{width:100%}
.play__body{background:var(--plum)}
.play__body .wrap{height:calc(704 * var(--u))}
.play__top{position:relative;z-index:2}
.play .heading{position:absolute;left:calc(54 * var(--u));top:calc(-8 * var(--u))}
.play .h-display{color:#fff}
.play .h-script{color:var(--blush)}
.play .uline{left:calc(-56 * var(--u));top:calc(155 * var(--u))}
.play__intro{position:absolute;left:calc(776 * var(--u));top:calc(56 * var(--u));width:calc(592 * var(--u));font-size:calc(16 * var(--u));line-height:calc(21 * var(--u))}
.play__media{position:absolute;left:calc(40 * var(--u));top:calc(175 * var(--u));width:calc(1360 * var(--u))}
.play__art{width:100%}
.play__labels{display:grid;grid-template-columns:repeat(5,calc(200 * var(--u)));margin:calc(15 * var(--u)) 0 0 calc(174 * var(--u));text-align:center;font-family:var(--f-display);color:#fff;font-size:calc(32 * var(--u));line-height:calc(44 * var(--u));letter-spacing:0}
.play__btn{position:absolute;left:calc(571 * var(--u));top:calc(649 * var(--u))}
.play__plane{position:absolute;left:0;top:calc(572 * var(--u));width:calc(240 * var(--u))}

/* ---------- Campus ---------- */
.campus .wrap{padding-bottom:calc(4 * var(--u))}
.campus__top{position:relative;height:calc(330 * var(--u))}
.campus .heading{position:absolute;left:calc(60 * var(--u));top:calc(30 * var(--u))}
.campus .h-display{padding-top:calc(4 * var(--u));line-height:calc(90 * var(--u))}
.campus .uline{left:calc(-62 * var(--u));top:calc(152 * var(--u))}
.campus__intro{position:absolute;left:calc(808 * var(--u));top:calc(69 * var(--u))}
.campus__intro p{width:calc(568 * var(--u));font-size:calc(18 * var(--u));line-height:calc(28 * var(--u))}
.campus__intro .btn{margin-top:calc(29 * var(--u))}
.campus__dots{position:absolute;left:calc(1280 * var(--u));top:calc(214 * var(--u));width:calc(90 * var(--u))}
.spaces{display:grid;grid-template-columns:repeat(6,1fr);column-gap:calc(36 * var(--u));row-gap:calc(64 * var(--u));padding:0 calc(60 * var(--u))}
.space{grid-column:span 2}
.space--wide{grid-column:span 3}
.spaces .space--wide:nth-child(4){margin-right:calc(-1 * var(--u))}
.spaces .space--wide:nth-child(5){margin-left:calc(1 * var(--u))}
.space img{width:100%}
.space h3{margin-top:calc(22 * var(--u));padding-left:calc(11 * var(--u));color:var(--purple);font-weight:700;font-style:italic;font-size:calc(24 * var(--u));line-height:calc(32 * var(--u));letter-spacing:.04em}
.space--wide h3{padding-left:calc(4 * var(--u))}
.space p{margin-top:calc(8 * var(--u));color:var(--muted);font-size:calc(18 * var(--u));line-height:calc(24 * var(--u))}

/* ---------- We see so much more ---------- */
.more{position:relative;height:calc(764 * var(--u));overflow:hidden;background:var(--cream)}
.more__bg{position:absolute;left:calc(50% - calc(773 * var(--u)));top:calc(-107 * var(--u));width:calc(1536 * var(--u));max-width:none}
.more__top{z-index:1}
.more .heading{position:absolute;left:calc(60 * var(--u));top:calc(34 * var(--u))}
.more .uline{left:calc(107 * var(--u));top:calc(160 * var(--u))}
.more__intro{position:absolute;left:calc(782 * var(--u));top:calc(83 * var(--u));width:calc(592 * var(--u));font-size:calc(16 * var(--u));line-height:calc(21 * var(--u))}

/* ---------- One little day ---------- */
.day .wrap{height:calc(958 * var(--u))}
.day .heading{position:absolute;left:calc(60 * var(--u));top:calc(27 * var(--u))}
.day .h-display{line-height:calc(91 * var(--u))}
.day .uline{left:calc(94 * var(--u));top:calc(161 * var(--u))}
.day__board{position:absolute;left:calc(40 * var(--u));top:calc(221 * var(--u));width:calc(1355 * var(--u));container-type:inline-size}
.day__art{width:100%}
/* checklist positions are % of the collage so it scales with it */
.checklist{position:absolute;left:37.9%;top:5.4%;width:23.6%;transform:rotate(-4.3deg);transform-origin:left top;color:#666}
.checklist__title{font-weight:700;font-style:italic;color:var(--purple);font-size:1.66cqw;letter-spacing:.05em;margin-left:-.1cqw}
.checklist ul{margin-top:.45cqw}
.checklist li{position:relative;padding:0 0 .35cqw 1.6cqw;margin-bottom:.5cqw;border-bottom:1px solid #c9c4cf;font-size:1.12cqw;line-height:1.35}
.checklist li::before{content:"";position:absolute;left:0;top:-.05cqw;width:1.1cqw;height:1.4cqw;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 16'%3E%3Cpath d='M1.5 9.5c1.3 1.1 2.4 3 3 5 1.6-5 3.9-9.4 7.2-13' fill='none' stroke='%23673893' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.checklist__note{margin-top:.1cqw;white-space:nowrap;font-size:1.18cqw;padding-left:1.1cqw}

/* ---------- Made with care ---------- */
.care{position:relative;height:calc(868 * var(--u));overflow:hidden;background:#f1e7da}
.care__bg{position:absolute;left:calc(50% - calc(780 * var(--u)));top:calc(11 * var(--u));width:calc(1560 * var(--u));max-width:none}
.care__inner{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:calc(173 * var(--u))}
.heading--center{display:flex;flex-direction:column;align-items:center}
.care .uline{left:calc(50% - calc(530 * var(--u)));top:calc(152 * var(--u));width:calc(804 * var(--u));height:calc(66 * var(--u))}
.care p{width:calc(430 * var(--u));margin-top:calc(32 * var(--u));font-size:calc(16 * var(--u));line-height:calc(21 * var(--u))}
.care .btn{margin-top:calc(39 * var(--u))}

/* ---------- Footer ---------- */
.site-footer{background:var(--lilac)}
.footer__inner{display:grid;grid-template-columns:calc(415 * var(--u)) calc(215 * var(--u)) calc(215 * var(--u)) calc(215 * var(--u)) 1fr;padding:calc(48 * var(--u)) calc(100 * var(--u)) 0}
.footer__brand img{width:calc(202 * var(--u));margin-left:calc(-4 * var(--u))}
.footer__tagline{margin-top:calc(10 * var(--u));color:var(--purple-deep);font-weight:700;font-size:calc(24 * var(--u));line-height:calc(32 * var(--u));letter-spacing:.03em}
.footer__hand{margin-top:calc(14 * var(--u));font-family:var(--f-hand);font-weight:500;color:var(--orange);font-size:calc(35 * var(--u));line-height:calc(48 * var(--u));letter-spacing:.02em}
.footer__col{padding-top:calc(8 * var(--u))}
.footer__col h2{color:var(--purple);font-weight:700;font-size:calc(18 * var(--u));line-height:calc(24 * var(--u));letter-spacing:.04em}
.footer__col ul{margin-top:calc(20 * var(--u))}
.footer__col li{font-size:calc(16 * var(--u));line-height:calc(22 * var(--u));color:#26232a;margin-bottom:calc(14 * var(--u))}
.footer__col a:hover{color:var(--orange)}
.footer__visit{color:var(--purple);font-weight:700}
.footer__visit svg{display:inline-block;margin-left:calc(6 * var(--u));color:var(--orange);width:calc(10 * var(--u));height:calc(10 * var(--u))}
.footer__col .footer__address{color:var(--muted);line-height:calc(24 * var(--u))!important;max-width:calc(175 * var(--u))}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;margin-top:calc(21 * var(--u));padding:calc(20 * var(--u)) 0 calc(20 * var(--u));width:calc(100% - calc(200 * var(--u)));border-top:1px solid #ddd3e6;font-family:system-ui,-apple-system,"Segoe UI",Inter,sans-serif;letter-spacing:-.01em;font-size:calc(14 * var(--u))}
.footer__bottom p{color:#8e83a8}
.footer__made{display:flex;align-items:center;color:var(--purple-deep);font-weight:500}
.footer__dots{display:flex;gap:calc(6 * var(--u));margin:0 calc(24 * var(--u)) 0 calc(16 * var(--u))}
.footer__dots i{width:calc(8 * var(--u));height:calc(8 * var(--u));border-radius:50%;background:#f07f2f}
.footer__dots i:nth-child(2){background:#34b3a8}
.footer__dots i:nth-child(3){background:#f2b632}
.footer__dots i:nth-child(4){background:#b79ad8}
.to-top{display:grid;place-items:center;width:calc(40 * var(--u));height:calc(40 * var(--u));border:1.5px solid var(--purple);border-radius:50%;color:var(--purple);transition:background .2s,color .2s}
.to-top:hover{background:var(--purple);color:#fff}

/* ==========================================================================
   Tablet & mobile (< 1024px): flowing layout, same visual language
   ========================================================================== */
@media (max-width:1023px){
  .site>*{--u:1px}
  .wrap{padding-left:24px;padding-right:24px}
  .h-display{font-size:clamp(46px,9vw,72px)!important;line-height:1!important}
  .h-script{font-size:clamp(32px,6.4vw,50px);line-height:1.2}
  .uline{position:static;display:block;width:min(300px,70%);height:34px;margin:-6px 0 0;object-fit:fill}
  .btn{width:186px;height:61px;font-size:17px}
  p{font-size:16px!important;line-height:1.5!important;width:auto!important}

  /* header + mobile nav */
  .header__inner{height:76px;padding:0 20px}
  .logo img{width:104px}
  .header__cta{display:none}
  .nav-toggle{display:grid;gap:5px;place-content:center;width:46px;height:46px;border:0;border-radius:50%;background:#f4edf9;cursor:pointer}
  .nav-toggle span{display:block;width:20px;height:2px;border-radius:2px;background:var(--purple);transition:transform .25s,opacity .25s}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .main-nav{position:absolute;left:12px;right:12px;top:72px;margin:0;padding:12px 20px 22px;background:var(--cream);border-radius:20px;box-shadow:0 18px 40px rgba(52,31,70,.16);display:none}
  .main-nav.is-open{display:block}
  .main-nav ul{flex-direction:column;gap:0}
  .main-nav li a{display:block;padding:13px 4px;font-size:17px;border-bottom:1px solid #efe8f3}
  .main-nav a::after{display:none}
  .btn--nav-mobile{display:inline-flex;margin-top:16px}

  /* hero */
  .hero__inner{height:auto;display:flex;flex-direction:column}
  .hero__content{position:relative;width:auto;padding:20px 24px 0}
  .hero__text{margin-top:14px;max-width:460px}
  .hero__btn{position:relative;left:auto;top:auto;margin-top:22px}
  .hero__content{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px}
  .hero__content>.heading,.hero__text{grid-column:1/-1}
  .hero__note{position:relative;left:auto;top:auto;width:104px;margin-top:14px;transform:rotate(2deg)}
  .hero__heart{left:auto;right:128px;top:auto;bottom:-14px;width:44px}
  .hero__art{position:relative;left:auto;top:auto;width:108%;margin:10px -4% -24px auto}

  /* band */
  .band{height:auto;margin-top:-18px;padding:34px 0 30px}
  .band__list{display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding-left:max(24px,calc(50% - 170px))}
  .band__item{position:relative;left:auto!important;top:auto;height:auto;font-size:20px}
  .band__item img{width:auto!important;height:46px;margin-right:12px!important}
  .band__item::before{display:none}

  /* about */
  .about{margin-top:-12px}
  .about__inner{height:auto;display:flex;flex-direction:column-reverse;padding-top:56px;padding-bottom:0}
  .about__content{position:relative;left:auto;top:auto;width:auto}
  .about p:first-of-type{margin-top:22px}
  .about p+p{margin-top:14px}
  .about .btn{margin-top:24px}
  .about__art{position:relative;left:auto;top:auto;width:min(100%,560px);margin:30px auto 0}

  /* world */
  .world .wrap{padding:44px 24px 56px}
  .world__top,.campus__top{height:auto}
  .world .heading,.campus .heading,.play .heading,.more .heading,.day .heading{position:relative;left:auto;top:auto}
  .world__intro,.campus__intro{position:relative;left:auto;top:auto;margin-top:22px}
  .world__intro p,.campus__intro p{width:auto}
  .pillars{grid-template-columns:repeat(2,1fr);gap:36px 20px;padding:40px 0 0}
  .pillar img{width:100%;max-width:312px;margin:0 auto}
  .pillar h3{font-size:30px;line-height:1.3}

  /* dark play */
  .play__body .wrap{height:auto;padding-top:24px;padding-bottom:40px;display:flex;flex-direction:column}
  .play__intro{position:relative;left:auto;top:auto;margin-top:22px}
  .play__media{position:relative;left:auto;top:auto;width:calc(100% + 24px);margin:32px -12px 0}
  .play__labels{grid-template-columns:repeat(5,1fr);margin:6px 0 0;padding:0 2%;font-size:clamp(20px,4vw,30px);line-height:1.3}
  .play__btn{position:relative;left:auto;top:auto;align-self:center;margin-top:22px}
  .play__plane{left:0;top:auto;bottom:0;width:140px;opacity:.9}

  /* campus */
  .campus .wrap{padding-top:40px;padding-bottom:40px}
  .campus__dots{left:auto;right:24px;top:auto;bottom:0;width:70px}
  .campus__top{padding-bottom:40px}
  .spaces{grid-template-columns:1fr 1fr;gap:34px 20px;padding:0}
  .space,.space--wide{grid-column:span 1}
  .spaces .space--wide{margin:0!important}
  .spaces .space:nth-child(3){grid-column:span 2}
  .space img{aspect-ratio:416/383;object-fit:cover;border-radius:18px}
  .space--wide img{aspect-ratio:642/480}
  .space h3{font-size:20px;line-height:1.35;padding-left:6px;margin-top:14px}
  .space p{font-size:16px!important}

  /* see so much more */
  .more{height:auto;overflow:visible;padding:30px 0 0;display:flex;flex-direction:column}
  .more__bg{order:2}
  .more__top{display:flex;flex-direction:column}
  .more__intro{position:relative;left:auto;top:auto;margin-top:22px}
  .more__bg{position:relative;left:auto;top:auto;width:100%;aspect-ratio:1536/720;object-fit:cover;object-position:50% 50%;margin-top:18px}

  /* day */
  .day .wrap{height:auto;padding-top:46px;padding-bottom:44px}
  .day__board{position:relative;left:auto;top:auto;width:calc(100% + 24px);margin:28px -12px 0}

  /* care */
  .care{height:auto;overflow:visible;padding-bottom:0;display:flex;flex-direction:column}
  .care__bg{order:2}
  .care__inner{padding:60px 24px 0;position:relative;z-index:1}
  .care p{max-width:440px}
  .care .btn{margin-top:26px}
  /* .care__bg{position:relative;left:auto;top:auto;width:120%;max-width:none;margin:0 -10%;aspect-ratio:1671/560;object-fit:cover;object-position:50% 100%} */
.care__bg{
      position:relative;
      left:auto;top:auto;
      width:100%;
      max-width:none;
      /*margin:0 -10%;aspect-ratio:1671/560;*/
      object-fit:contain;
      /*object-position:50% 100%*/
      
  }
  /* footer */
  .footer__inner{grid-template-columns:1fr 1fr;gap:34px 24px;padding:46px 24px 0}
  .footer__brand{grid-column:1/-1;text-align:center}
  .footer__brand a{display:block}
  .footer__brand img{width:170px;margin:0 auto}
  .footer__tagline{font-size:22px;line-height:1.35}
  .footer__hand{font-size:34px;line-height:1.2}
  .footer__col h2{font-size:18px}
  .footer__col ul{margin-top:14px}
  .footer__col li{font-size:16px;margin-bottom:12px}
  .footer__visit svg{width:10px;height:10px}
  .footer__bottom{width:auto;margin:34px 24px 0;padding:20px 0 26px;flex-wrap:wrap;gap:16px;font-size:14px}
  .footer__dots{gap:6px;margin:0 16px 0 12px}
  .footer__dots i{width:8px;height:8px}
  .to-top{width:40px;height:40px}
}

@media (min-width:768px) and (max-width:1023px){
  .hero__art{width:86%;margin:10px 2% -24px auto}
  .band__list{flex-direction:row;justify-content:space-between;align-items:center;padding-left:24px}
  .band__item{font-size:17px}
  .band__item img{height:40px}
  .pillars{grid-template-columns:repeat(4,1fr);gap:16px}
  .pillar h3{font-size:26px}
  .pillar p{font-size:14px!important}
  .spaces{grid-template-columns:repeat(6,1fr)}
  .space{grid-column:span 2}
  .spaces .space:nth-child(3){grid-column:span 2}
  .space--wide{grid-column:span 3}
  .footer__inner{grid-template-columns:repeat(4,1fr)}
}

@media (max-width:1023px){
  .day__board{container-type:normal}
  .checklist{position:relative;left:auto;top:auto;width:auto;max-width:360px;margin:26px auto 0;padding:22px 24px;background:#fff;border-radius:6px;box-shadow:0 10px 26px rgba(52,31,70,.12);transform:rotate(-2deg)}
  .checklist__title{font-size:22px}
  .checklist ul{margin-top:10px}
  .checklist li{font-size:16px;padding:0 0 6px 24px;margin-bottom:8px}
  .checklist li::before{width:15px;height:19px;top:0}
  .checklist__note{font-size:16px;padding-left:0;white-space:normal}
}

@media (max-width:480px){
  .band__item{font-size:18px}
  .pillars{grid-template-columns:1fr}
  .spaces{grid-template-columns:1fr}
  .spaces .space:nth-child(3){grid-column:span 1}
  .hero__note{width:96px;bottom:6px}
  .hero__heart{right:118px}
  .play__labels{font-size:18px}
}

/* Laptop (1024–1279): keep the scaled desktop layout but hold body copy at a readable size */
@media (min-width:1024px) and (max-width:1279px){
  .hero__text,.about p,.world__intro p,.pillar p,.play__intro,.campus__intro p,.more__intro,.care p{font-size:13px;line-height:1.4}
  .hero__note{top:calc(380 * var(--u))}
  .main-nav a{font-size:13.5px}
  .main-nav ul{gap:calc(30 * var(--u))}
  .space p,.footer__col li{font-size:13.5px}
}

/* ==========================================================================
   Motion — scroll reveals, used on every page
   Uses the individual translate/scale/rotate properties so elements keep
   their own transforms (rotated notes, hover lifts) while animating.
   ========================================================================== */
:root{--ease-out:cubic-bezier(.2,.75,.2,1)}
.js [data-anim]{opacity:0;transition:opacity .9s var(--ease-out),translate .9s var(--ease-out),scale .9s var(--ease-out),rotate .9s var(--ease-out),clip-path 1.1s cubic-bezier(.65,.05,.25,1);transition-delay:var(--d,0ms)}
.js [data-anim="fade-up"]{translate:0 32px}
.js [data-anim="fade"]{scale:.97}
.js [data-anim="zoom"]{scale:.9}
.js [data-anim="pop"]{scale:.4;rotate:-10deg}
.js [data-anim="slide-l"]{translate:-56px 0}
.js [data-anim="slide-r"]{translate:56px 0}
.js [data-anim="draw"]{opacity:1;clip-path:inset(0 100% 0 0);transition-delay:calc(var(--d,0ms) + 350ms)}
.js [data-anim].in{opacity:1;translate:0 0;scale:1;rotate:0deg;clip-path:inset(0 0 0 0)}
.js [data-anim="pop"].in{transition-timing-function:cubic-bezier(.34,1.56,.64,1)}
.js [data-anim].done{transition-delay:0ms}

/* gentle idle motion for small decorative pieces (after they have appeared) */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sway{0%,100%{rotate:-2deg}50%{rotate:2deg}}
.float.done,.no-js .float{animation:floaty 5s ease-in-out infinite}
.sway.done{animation:sway 6s ease-in-out infinite;transform-origin:50% 100%}

/* photo frames lift slightly on hover */
.lift{transition:transform .45s var(--ease-out),filter .45s var(--ease-out)}
.lift:hover{transform:translateY(-6px) rotate(-.6deg);filter:drop-shadow(0 14px 22px rgba(52,31,70,.16))}

/* buttons: arrow nudge + lift */
.btn{transition:transform .25s ease,filter .25s ease}

/* header gains a soft shadow once the page scrolls */
.site-header{transition:box-shadow .3s}

@media (prefers-reduced-motion:reduce){
  .js [data-anim]{opacity:1!important;translate:none!important;scale:none!important;rotate:none!important;clip-path:none!important;transition:none!important}
  .float,.sway{animation:none!important}
  .lift:hover{transform:none}
}
@media (max-width:1023px){
  .site-footer .footer__hand{font-size:30px!important;line-height:1.25!important}
  .site-footer .footer__tagline{font-size:20px!important;line-height:1.4!important}
  .site-header.is-scrolled{box-shadow:0 6px 20px rgba(52,31,70,.08)}
}
.site-header{position:sticky;top:0;background:var(--cream)}
.site-header.is-scrolled{box-shadow:0 6px 20px rgba(52,31,70,.08)}

/* ==========================================================================
   Homepage content update (Oct 2026 content document)
   ========================================================================== */
.hero__eyebrow{position:absolute;left:0;top:calc(-28 * var(--u));margin:0;white-space:nowrap;color:var(--purple);font-weight:700;font-size:calc(14 * var(--u));letter-spacing:.08em;text-transform:uppercase}
.pillar__eyebrow{display:block;margin-top:calc(6 * var(--u));color:var(--orange);font-weight:700;font-size:calc(12 * var(--u));letter-spacing:.1em;text-transform:uppercase}
.pillar__eyebrow+h3{margin-top:calc(0 * var(--u))}
.play__body .wrap{height:calc(800 * var(--u))}
.play__labels{display:flex!important;flex-wrap:wrap;justify-content:center;gap:calc(12 * var(--u));margin:calc(26 * var(--u)) 0 0!important;padding:0;font-family:var(--f-body)!important;font-size:calc(16 * var(--u))!important;line-height:1.2!important;letter-spacing:.03em}
.play__labels li{padding:calc(11 * var(--u)) calc(24 * var(--u));border-radius:999px;background:#ece2f8;color:var(--purple);font-weight:700}
.play__labels li:nth-child(2){background:#ffe3c6}.play__labels li:nth-child(3){background:#fdf0b0}.play__labels li:nth-child(4){background:#dff2ea}.play__labels li:nth-child(5){background:#e2f1fc}.play__labels li:nth-child(6){background:#f8dcd6}
.play__line{position:static;margin:calc(22 * var(--u)) auto 0;max-width:calc(1100 * var(--u));text-align:center;color:#ddd;font-size:calc(15 * var(--u));line-height:calc(22 * var(--u))}
.play__btn{top:auto!important;bottom:calc(-6 * var(--u))}
.play__btn.btn--wide{width:calc(280 * var(--u));left:calc(580 * var(--u))}
.play__plane{top:calc(650 * var(--u))}
.more__chips{display:flex;flex-wrap:wrap;gap:calc(10 * var(--u));list-style:none;margin:calc(20 * var(--u)) 0 0;padding:0}
.more__chips li{padding:calc(10 * var(--u)) calc(20 * var(--u));border-radius:999px;background:#fff;color:var(--purple);font-weight:700;font-size:calc(15 * var(--u));box-shadow:0 4px 14px rgba(52,31,70,.08)}
.space img{border-radius:calc(28 * var(--u))}
/* day collage captions */
.dcap{position:absolute;margin:0;transform-origin:left top;color:#333}
.dcap span{display:block;font-size:.84cqw;letter-spacing:.08em;text-transform:uppercase;color:#555;margin-bottom:.25cqw}
.dcap p{margin:0;font-size:1.12cqw!important;line-height:1.35!important;color:#222;font-weight:600}
.dcap p{text-wrap:balance}
.dcap--1{left:3.9%;top:46.4%;width:28.5%;transform:rotate(-4.8deg)}
.dcap--2{left:69.2%;top:57.4%;width:26%;transform:rotate(3.4deg)}
.dcap--3{left:19.9%;top:81%;width:20.5%;transform:rotate(3.7deg)}
.dcap--4{left:45.7%;top:90%;width:23%;transform:rotate(-5.5deg)}
.checklist li{margin-bottom:.32cqw;padding-bottom:.22cqw;font-size:1.02cqw}
.checklist ul{margin-top:.3cqw}
@media (max-width:1023px){
  .hero__eyebrow{position:static;white-space:normal;font-size:12px;margin-bottom:10px}
  .pillar__eyebrow{font-size:12px;margin-top:10px}
  .play__body .wrap{height:auto}
  .play__labels{gap:8px;font-size:14px!important;margin-top:16px!important}
  .play__labels li{padding:8px 14px}
  .play__line{position:static;font-size:14px;line-height:1.55;margin-top:16px}
  .play__btn.btn--wide{width:230px;left:auto}
  .more__chips{gap:8px}.more__chips li{font-size:13px;padding:8px 14px}
  .space img{border-radius:18px}
  .dcap span{font-size:9px}.dcap p{font-size:10.5px!important}
}
@media (max-width:1023px){
  .day__board{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .day__board>.day__art,.day__board>.checklist{grid-column:1/-1}
  .day__board .dcap{position:static;transform:none;width:auto;margin:10px 0 0;padding:12px 14px;background:#fff;border-radius:10px;box-shadow:0 6px 16px rgba(52,31,70,.07)}
  .dcap span{font-size:11px}.dcap p{font-size:15px!important}
}

/* ==========================================================================
   Main menu with dropdowns (8 top-level items)
   ========================================================================== */
.main-nav ul{gap:calc(26 * var(--u))}
.main-nav li{position:relative;display:flex;align-items:center}
.main-nav a[aria-current="page"],.main-nav .is-active>a{color:var(--purple);font-weight:700}
.main-nav .sub-toggle{display:inline-grid;place-items:center;width:calc(20 * var(--u));height:calc(24 * var(--u));margin-left:calc(2 * var(--u));padding:0;border:0;background:none;color:var(--ink);cursor:pointer;border-radius:4px;transition:transform .25s,color .2s}
.main-nav .sub-toggle svg{width:calc(10 * var(--u));height:calc(10 * var(--u))}
.main-nav .has-sub:hover .sub-toggle,.main-nav .has-sub.open .sub-toggle{color:var(--purple)}
.main-nav .has-sub.open .sub-toggle{transform:rotate(180deg)}
.main-nav .sub{position:absolute;top:calc(100% + 12px);left:50%;z-index:50;display:block;min-width:calc(210 * var(--u));padding:calc(10 * var(--u));margin:0;list-style:none;background:#fff;border-radius:calc(16 * var(--u));box-shadow:0 18px 40px rgba(52,31,70,.16);opacity:0;visibility:hidden;translate:-50% 8px;transition:opacity .22s ease,translate .22s ease,visibility 0s .22s}
.main-nav .sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.main-nav .sub li{display:block}
.main-nav .sub a{display:block;padding:calc(10 * var(--u)) calc(14 * var(--u));border-radius:calc(10 * var(--u));font-size:calc(15 * var(--u));white-space:nowrap;color:var(--ink)}
.main-nav .sub a::after{display:none}
.main-nav .sub a:hover,.main-nav .sub a:focus-visible,.main-nav .sub a[aria-current="page"]{background:#f4edf9;color:var(--purple)}
.main-nav .has-sub:hover>.sub,.main-nav .has-sub:focus-within>.sub,.main-nav .has-sub.open>.sub{opacity:1;visibility:visible;translate:-50% 0;transition-delay:0s}
@media (min-width:1024px) and (max-width:1279px){
  .main-nav ul{gap:calc(16 * var(--u))!important}
  .main-nav a{font-size:13px!important}
  .main-nav .sub a{font-size:14px!important}
}
@media (max-width:1023px){
  .main-nav{max-height:calc(100vh - 96px);overflow-y:auto}
  .main-nav li{flex-wrap:wrap}
  .main-nav li>a{flex:1}
  .main-nav .sub-toggle{width:44px;height:44px;margin:0;border-bottom:1px solid #efe8f3;border-radius:0}
  .main-nav .sub-toggle svg{width:12px;height:12px}
  .main-nav .sub{position:static;display:none;width:100%;min-width:0;padding:4px 0 8px 14px;box-shadow:none;border-radius:0;opacity:1;visibility:visible;translate:none;background:none}
  .main-nav .has-sub.open>.sub{display:block}
  .main-nav .has-sub:hover>.sub,.main-nav .has-sub:focus-within>.sub{translate:none}
  .main-nav .sub a{padding:11px 4px;font-size:16px;border-bottom:1px dashed #efe8f3;border-radius:0}
}

/* ---------- all buttons: CSS pill (gradient ring + arrow after the label) so long labels never collide with the arrow ---------- */
.btn:not(#_){width:auto;min-width:calc(196 * var(--u));padding:0 calc(26 * var(--u)) calc(2 * var(--u)) calc(30 * var(--u));gap:calc(14 * var(--u));justify-content:center;border:calc(5 * var(--u)) solid transparent;border-radius:999px;box-sizing:border-box;
  background:linear-gradient(#faf7f2,#faf7f2) padding-box,linear-gradient(100deg,#e3d4f5 0%,#cfdcf7 28%,#fbdcc3 55%,#d6e8d2 78%,#f6c79d 100%) border-box;
  box-shadow:inset 0 0 0 calc(1.5 * var(--u)) #8a6bb0,0 6px 18px rgba(0,0,0,.18)}
.btn:not(#_)::after{content:"";flex:none;width:calc(34 * var(--u));height:calc(20 * var(--u));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 20' fill='none' stroke='%23c9b8e8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10h28M22 2l8 8-8 8'/%3E%3C/svg%3E") center/contain no-repeat}
.play__btn.btn--wide{position:absolute;left:0!important;right:0;margin:0 auto;width:max-content!important}
/* paper plane sits in the empty lower-left corner, clear of the text */
.play__plane{top:auto!important;bottom:calc(-22 * var(--u));left:calc(40 * var(--u))!important;width:calc(170 * var(--u))!important}
@media (max-width:1023px){
  .btn:not(#_){min-width:186px;padding:0 22px 2px 26px;gap:12px;border-width:4px}
  .btn:not(#_)::after{width:30px;height:18px}
  .play__btn.btn--wide{position:relative;left:auto!important;right:auto;margin:22px 0 0}
  .play__plane{display:none}
}
@media (max-width:1023px){.doodle{margin-top:0;padding:4px 0 18px}}

/* "How our inspirations" — photo starts below the philosophy chips; soft side edges on wide screens */
@media (min-width:1024px){
  .more{height:calc(850 * var(--u))}
  .more__bg{top:calc(-20 * var(--u))}
  .more__intro{top:calc(60 * var(--u))}
}
@media (min-width:1441px){
  /* .more__bg{-webkit-mask:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)} */
}

/* ---------- responsive polish ---------- */
@media (max-width:1023px){
  /* heading strokes: use the tight stroke so it sits under the words, not out to the screen edge */
  .uline{content:url("assets/img/stroke.png");width:min(210px,60%)!important;height:auto!important;margin:-4px 0 6px 40px!important}
  .heading--center .uline{margin-left:auto!important;margin-right:auto!important}
  .hero__heart{display:none}
}
.footer__visit{white-space:nowrap}

@media (max-width:599px){.day__board{grid-template-columns:1fr}}
@media (max-width:1023px){
  .day__board{container-type:normal}
  .day__board .checklist{position:relative;left:auto;top:auto;width:auto;max-width:400px;margin:18px auto 0;padding:22px 24px;transform:rotate(-1.5deg);background:#fff;border-radius:6px;box-shadow:0 10px 26px rgba(52,31,70,.12)}
  .day__board .checklist__title{font-size:21px}
  .day__board .checklist ul{margin-top:10px}
  .day__board .checklist li{font-size:15px;padding:0 0 6px 26px;margin-bottom:8px}
  .day__board .checklist li::before{width:15px;height:19px;top:1px}
}
/* laptop (1024–1279): keep small labels readable */
@media (min-width:1024px) and (max-width:1279px){
  .hero__eyebrow{font-size:12px!important}
  .play__labels{font-size:13px!important}
  .play__line{font-size:13px!important;line-height:1.5!important}
  .more__chips li{font-size:12.5px!important}
  .dcap p{font-size:12px!important}
  .checklist{width:29%!important}
  .checklist li{font-size:12px!important;white-space:nowrap;margin-bottom:.35cqw!important}
}

/* day collage captions: keep every caption inside its photo card's white strip */
@media (min-width:1024px){
  .dcap p{font-size:1.02cqw!important;line-height:1.3!important}
  .dcap span{line-height:1.2;margin-bottom:.2cqw}
}
@media (min-width:1024px) and (max-width:1279px){ .dcap p{font-size:11.5px!important} }

@media (min-width:1024px) and (max-width:1279px){
  .checklist li{font-size:11.5px!important;padding-bottom:.15cqw!important;margin-bottom:.2cqw!important}
  .checklist ul{margin-top:.2cqw!important}
}
@media (max-width:1023px){
  .more__intro{width:auto!important;max-width:100%}
  .more__chips{flex-wrap:wrap}
  .hero__art{max-width:100%;margin-right:0!important;display:none;}
}
@media (max-width:1023px){
  .footer__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .footer__col a,.footer__col li{overflow-wrap:anywhere}
}
@media (max-width:359px){
  .footer__inner{column-gap:14px!important;padding-left:16px!important;padding-right:16px!important}
  .site-footer .footer__hand{font-size:26px!important}
}
/* reveal: only the "draw" strokes use clip-path; everything else must never be clipped (shadows, arrows, rotated notes) */
.js [data-anim].in:not([data-anim="draw"]){clip-path:none}
.js [data-anim]:not([data-anim="draw"]){clip-path:none}

/* Footer social icons */
.footer__col .footer__social{display:flex;gap:calc(14 * var(--u));margin-top:calc(6 * var(--u))}
.footer__social-link{display:inline-flex;width:calc(40 * var(--u));height:calc(40 * var(--u));min-width:32px;min-height:32px;transition:transform .2s ease}
.footer__social-link svg{width:100%;height:100%}
.footer__col a.footer__social-link:hover{transform:translateY(-2px) scale(1.06)}

/* "They call it play": keep a clear gap between the text line and the button */
@media (min-width:1024px){
  .play__body .wrap{height:calc(895 * var(--u))}
  .play__line{padding:0 calc(40 * var(--u))}
  .play__btn.btn--wide{bottom:calc(30 * var(--u))}
}