/* Little Acorn Learning Center. An oak tree: sky, acorns and leaves, crayon grain. */
:root {
  --sky: #a6d1ec;
  --sky-pale: #ddeffa;
  --sky-mid: #c3e1f4;
  --oak: #7a4d2b;
  --oak-deep: #4a2e18;
  --oak-soft: #6b5440;
  --leaf: #79a84c;
  --leaf-deep: #3f6b22;
  --leaf-tint: #e6f0da;
  --cream: #fff8eb;
  --bark-line: #e8dcc6;
  --display: 'Baloo 2', 'Trebuchet MS', sans-serif;
  --text: 'Readex Pro', 'Segoe UI', sans-serif;
  --pad: clamp(16px, 4.8vw, 72px);
  --head: 84px;
  --nut-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='.55'/%3E%3C/filter%3E%3Cg filter='url%28%23b%29'%3E%3Cpath d='M100 60C120 60 145 58 160 62C175 66 184.7 73 190 84C195.3 95 194.3 112.3 192 128C189.7 143.7 184.7 163.3 176 178C167.3 192.7 151.3 206.3 140 216C128.7 225.7 114.7 232 108 236C101.3 240 102.7 240 100 240C97.3 240 98.7 240 92 236C85.3 232 71.3 225.7 60 216C48.7 206.3 32.7 192.7 24 178C15.3 163.3 10.3 143.7 8 128C5.7 112.3 4.7 95 10 84C15.3 73 25 66 40 62C55 58 80 60 100 60Z'/%3E%3C/g%3E%3C/svg%3E");
  --leaf-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 260'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='.55'/%3E%3C/filter%3E%3Cg filter='url%28%23b%29'%3E%3Cellipse cx='100' cy='140' rx='50' ry='104'/%3E%3Ccircle cx='100' cy='46' r='38'/%3E%3Ccircle cx='147' cy='94' r='35'/%3E%3Ccircle cx='53' cy='102' r='34'/%3E%3Ccircle cx='158' cy='156' r='37'/%3E%3Ccircle cx='42' cy='164' r='36'/%3E%3Ccircle cx='138' cy='210' r='29'/%3E%3Ccircle cx='62' cy='214' r='28'/%3E%3Ccircle cx='100' cy='228' r='27'/%3E%3C/g%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -3.2 2.05'/%3E%3C/filter%3E%3Crect width='360' height='360' filter='url(%23g)' opacity='.2'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + 20px); }
body { margin: 0; background: var(--cream); color: var(--oak-deep); font: 400 18px/1.62 var(--text); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
p, li { text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.04; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
figure { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button, select, a, label { cursor: pointer; }
:focus-visible { outline: 3px solid var(--leaf-deep); outline-offset: 3px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 60; background: var(--oak-deep); color: #fff; padding: 12px 18px; font-weight: 600; text-decoration: none; border-radius: 12px; }
.skip:focus { top: 12px; }

/* Buttons: flat fills */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 26px; border-radius: 999px; border: 2px solid transparent;
  font: 600 17px/1.2 var(--text); text-decoration: none; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-leaf { background: var(--leaf-deep); color: #fff; }
.btn-leaf:hover { background: #335a1a; }
.btn-line { background: transparent; color: var(--oak-deep); border-color: var(--oak-deep); }
.btn-line:hover { background: var(--oak-deep); color: var(--cream); }

/* Header */
.top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 24px;
  height: var(--head); padding: 0 var(--pad);
  background: var(--cream);
  border-bottom: 2px solid var(--bark-line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; min-height: 48px; text-decoration: none; }
/* Logo: an arch drawn in one stroke over sky, a two-leaf sprout inside it, and the Baloo 2 wordmark
   whose i is a seedling with one leaf. --lg is the wordmark size; the rest is in em of it. */
.logo { --lg: 29px; display: inline-flex; align-items: center; gap: .3em; font-size: var(--lg); color: var(--oak); }
.logo-icon { width: 1.75em; height: 1.75em; flex: none; }
.logo-arch { stroke: var(--oak); }
.logo-istem { fill: var(--leaf-deep); }
.logo-text { display: grid; justify-items: start; gap: .12em; }
.logo-word { display: block; height: .86em; width: auto; overflow: visible; }
.logo-sub { font: 600 max(15px, .56em)/1.2 var(--text); color: var(--oak-soft); white-space: nowrap; }
.logo.on-dark { color: var(--cream); }
.logo.on-dark .logo-arch { stroke: var(--cream); }
.logo.on-dark .logo-istem { fill: var(--leaf); }
.logo.on-dark .logo-sub { color: #f3dcb6; }
.logo-stack { display: inline-grid; justify-items: start; gap: .16em; }
.logo-stack .logo-icon { width: 2em; height: 2em; margin-left: -.14em; }
.logo-stack .logo-sub { font-size: .62em; }
.nav { display: flex; gap: 2px; }
.nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 13px; border-radius: 999px; font-weight: 500; font-size: 17px; text-decoration: none; }
.nav a:hover { background: var(--leaf-tint); }
.nav a { position: relative; }
.nav a.here::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 17px; height: 17px; margin-left: -8.5px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M10 21c0-8 6-13 14-13s14 5 14 13z' fill='%237a4d2b'/%3E%3Cpath d='M12 21h24c0 10-5 17-12 20-7-3-12-10-12-20z' fill='%2379a84c'/%3E%3C/svg%3E") center / contain no-repeat; }
.tel { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 600; font-size: 17px; text-decoration: none; white-space: nowrap; }
.tel svg { color: var(--leaf-deep); }
.tel-icon, .burger { display: none; }
.tel-icon { flex: none; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--bark-line); color: var(--leaf-deep); }
.burger { flex: none; position: relative; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--oak-deep); background: transparent; padding: 0; }
.burger span { position: absolute; left: 12px; width: 20px; height: 2.5px; border-radius: 2px; background: var(--oak-deep); transition: transform .22s ease, opacity .18s ease, top .22s ease; }
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 20.5px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 20.5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 20.5px; transform: rotate(-45deg); }

.menu {
  position: fixed; z-index: 39; left: 0; right: 0; top: var(--head); bottom: 0;
  overflow-y: auto;
  background: var(--cream); padding: 6px var(--pad) 26px;
}
.menu nav { display: grid; }
.menu nav a { display: flex; align-items: center; min-height: 46px; font: 700 21px/1 var(--display); text-decoration: none; }
.menu .menu-home { color: var(--leaf-deep); min-height: 50px; }
.menu-label { display: flex; align-items: center; gap: 8px; margin: 14px 0 2px; padding-top: 12px; border-top: 1px solid var(--bark-line); font: 600 15px/1.3 var(--text); letter-spacing: .02em; color: var(--leaf-deep); }
.menu-label::before { content: ''; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c4 0 7 3 7 7 0 6-5 10-7 11-2-1-7-5-7-11 0-4 3-7 7-7z' fill='%2379a84c'/%3E%3C/svg%3E") center / contain no-repeat; }
.menu-foot { margin-top: 16px; font-size: 17px; line-height: 1.5; color: var(--oak-soft); }
.menu-cta { width: 100%; margin-top: 16px; }
.menu-call { width: 100%; margin-top: 10px; }

/* The canopy: sky with crayon grain */
.canopy {
  position: relative;
  display: grid; gap: 20px;
  padding: 22px var(--pad) 40px;
  background-color: var(--sky);
  background-image: var(--grain), linear-gradient(180deg, var(--sky-pale) 0%, var(--sky-mid) 40%, var(--sky) 100%);
  background-size: 360px 360px, auto;
  overflow: hidden;
}
.canopy-text { position: relative; z-index: 2; }
.canopy h1 { font-size: clamp(31px, 8.6vw, 52px); line-height: 1.02; color: var(--oak-deep); }
.canopy h1 span { display: inline; }
.lede { margin-top: 12px; font-size: 18px; max-width: 30em; }

/* The two shaped photos */
.pair { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: center; gap: 14px; min-height: 0; }
.acorn { position: relative; width: min(46%, 300px); aspect-ratio: 200 / 240; flex: none; }
.nut { position: absolute; inset: 0; -webkit-mask: var(--nut-mask) 0 0 / 100% 100% no-repeat; mask: var(--nut-mask) 0 0 / 100% 100% no-repeat; overflow: hidden; background: #f4e9d2; }
.nut img { position: absolute; left: -12%; top: 21%; width: 124%; height: auto; max-width: none; filter: saturate(0.94) contrast(1.02) brightness(1.02) sepia(0.05); }
.cap { position: absolute; left: -2%; top: 0; width: 104%; height: auto; overflow: visible; filter: drop-shadow(0 3px 0 rgba(74, 46, 24, 0.18)); }
.leaf { position: relative; width: min(43%, 290px); aspect-ratio: 200 / 260; flex: none; margin-top: 12%; transform: rotate(-9deg); }
.blade { position: absolute; inset: 0; -webkit-mask: var(--leaf-mask) 0 0 / 100% 100% no-repeat; mask: var(--leaf-mask) 0 0 / 100% 100% no-repeat; overflow: hidden; background: #3d6b2c; }
.blade img { position: absolute; left: -46%; top: -2%; width: 196%; height: 112%; max-width: none; object-fit: cover; object-position: 28% 50%; transform: rotate(9deg); filter: saturate(0.8) contrast(0.96) brightness(1.12) sepia(0.08); }
.stem { position: absolute; left: 50%; top: 96.5%; width: 13%; height: auto; margin-left: -7%; overflow: visible; }

/* Rooms and Openings */
.openings {
  position: relative; z-index: 3;
  background: var(--cream); color: var(--oak-deep);
  border: 2px solid var(--bark-line); border-radius: 28px;
  padding: 20px 16px 18px;
}
.openings:focus { outline: none; }
.op-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; margin-bottom: 10px; }
.op-head h2 { font-size: 30px; }
.op-asof { font-size: 17px; color: var(--oak-soft); }
.rooms { border: 0; margin: 0; padding: 0; min-width: 0; }
.room {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 2px 12px;
  padding: 9px 12px 9px 8px; border-radius: 18px; border: 2px solid transparent;
  transition: background-color .15s ease, border-color .15s ease;
}
.room + .room { margin-top: 2px; }
.room input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.room-icon { width: 44px; height: 44px; grid-row: 1 / span 2; }
.room-name { grid-column: 2; grid-row: 1; font: 700 21px/1.1 var(--display); }
.room-ages { grid-column: 2 / span 2; grid-row: 2; font-size: 15px; color: var(--oak-soft); line-height: 1.3; }
.room-status { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; gap: 7px; font: 600 16px/1.15 var(--text); white-space: nowrap; }
.room-status.open { color: var(--leaf-deep); }
.room-status.wait { color: #24475f; }
.room-status.full { color: var(--oak); }
.room:hover { background: #fff; }
.room.on { background: #fff; border-color: var(--leaf-deep); border-radius: 26px 6px 26px 6px; }
.room input:focus-visible ~ .room-name { outline: 3px solid var(--leaf-deep); outline-offset: 4px; border-radius: 6px; }

.tour-pick { margin-top: 14px; padding-top: 14px; border-top: 2px dashed var(--bark-line); }
.tour-title { font: 700 22px/1.15 var(--display); }
.tour-note { font-size: 17px; color: var(--oak-soft); margin: 2px 0 10px; }
.chips { border: 0; margin: 0 0 10px; padding: 0; min-width: 0; }
.chips legend { padding: 0; margin-bottom: 6px; font: 600 16px/1.3 var(--text); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 46px; min-width: 64px; padding: 4px 13px; border-radius: 16px;
  background: #fff; border: 1.5px solid #e2d3b8;
  font: 500 16px/1.15 var(--text); font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.chip span small { font: 500 15px/1.15 var(--text); }
.days .chip span { min-height: 54px; }
.chip:hover span { border-color: var(--oak-deep); }
.chip input:checked + span { background: var(--leaf-deep); border-color: var(--leaf-deep); color: #fff; font-weight: 600; border-radius: 20px 5px 20px 5px; }
.chip input:focus-visible + span { outline: 3px solid var(--oak-deep); outline-offset: 3px; }
.chip input:disabled { cursor: not-allowed; }
.chip input:disabled + span { background: #f6efe2; color: #6f6252; text-decoration: line-through; text-decoration-thickness: 1px; border-color: #efe5d3; }
.tour-go { width: 100%; margin-top: 4px; }

.ticket { padding: 12px 16px; margin-bottom: 14px; background: #fff; border: 2px dashed var(--bark-line); border-radius: 16px; font-weight: 600; }
.row2 { display: grid; gap: 0 14px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font: 600 16px/1.3 var(--text); }
.field input, .select select {
  width: 100%; min-height: 50px; padding: 10px 16px; border-radius: 16px;
  border: 2px solid #dccdb2; background: #fff; font-size: 17px;
  appearance: none; -webkit-appearance: none;
}
.select { position: relative; display: block; }
.select select { padding-right: 42px; }
.select svg { position: absolute; right: 16px; top: 50%; margin-top: -8px; color: var(--oak); pointer-events: none; }
.field input:hover, .select select:hover { border-color: var(--oak-deep); }
.field input::placeholder { color: #7d6d5c; }
.field input[aria-invalid="true"] { border-color: #b3261e; background: #fff6f4; }
.err { font-size: 17px; font-weight: 500; color: #a1281e; }
.who-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.done { display: grid; gap: 10px; justify-items: start; }
.done:focus { outline: none; }
.done-title { display: flex; align-items: center; gap: 10px; font: 700 26px/1.15 var(--display); color: var(--leaf-deep); }

/* Phones: a tour bar that stays in reach, and steps aside while the openings card is on screen */
.tour-bar { display: none; }
@media (max-width: 699px) {
  body { padding-bottom: 84px; }
  .tour-bar {
    position: fixed; z-index: 35; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 248, 235, 0.97); border-top: 2px solid var(--bark-line);
    transition: transform .25s ease;
  }
  .tour-bar .btn { min-height: 52px; padding: 10px 16px; }
  .tour-bar .bar-call { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--oak-deep); color: var(--oak-deep); }
  .tour-bar.away, .menu:not([hidden]) ~ .tour-bar { transform: translateY(110%); }
}

/* Sections */
.sec-head { max-width: 44em; margin-bottom: 34px; display: grid; gap: 12px; }
.sec-head h2, .day-head h2, .tour-text h2 { font-size: clamp(38px, 7vw, 66px); }
.sec-head p { font-size: 19px; color: var(--oak-soft); }
.rooms-sec, .day, .safety, .tuition, .tour { padding: clamp(60px, 8vw, 116px) var(--pad); }

/* Our Rooms: a growth line from acorn to sapling */
.growth { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 54px; }
.stage { display: grid; gap: 18px; align-items: center; }
.stage-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 30px; filter: saturate(0.94) contrast(1.02) brightness(1.02) sepia(0.05); }
.stage-text { display: grid; gap: 8px; justify-items: start; }
.node { display: inline-grid; place-items: center; }
.stage-icon { width: 56px; height: 56px; }
.stage h3 { font-size: clamp(32px, 5vw, 44px); }
.stage-meta { font-weight: 600; font-size: 17px; color: var(--oak); }
.stage-text > p:not([class]) { font-size: 18px; max-width: 32em; }
.stage-status { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; border-radius: 999px; font-weight: 600; font-size: 17px; background: var(--leaf-tint); color: var(--leaf-deep); }
.stage-status.wait { background: var(--sky-pale); color: #24475f; }
.stage-status.full { background: #f0e6d4; color: var(--oak); }

/* A Day Here */
.day {
  display: grid; gap: 34px;
  background-color: var(--sky-pale);
  background-image: var(--grain), linear-gradient(180deg, var(--sky-pale), var(--sky-mid));
  background-size: 360px 360px, auto;
}
.day-head { display: grid; gap: 14px; align-content: start; }
.day-head p { font-size: 19px; max-width: 30em; }
.day-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 30px; filter: saturate(0.94) contrast(1.02) brightness(1.02) sepia(0.05); }
.clock { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; display: grid; gap: 4px; }
.clock::before { content: ''; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--oak); opacity: 0.55; }
.clock li { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 2px 16px; padding: 10px 0; }
.clock li::before { content: ''; position: absolute; left: -24px; top: 18px; width: 14px; height: 14px; border-radius: 50% 0 50% 50%; background: var(--leaf); transform: rotate(-45deg); }
.clock time { font: 700 21px/1.3 var(--display); white-space: nowrap; }
.clock p { font-size: 18px; }

/* Safety: a ruled list beside a photo */
.safety-body { display: grid; gap: 34px; align-items: start; }
.safety-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; border-radius: 30px; filter: saturate(0.94) contrast(1.02) brightness(1.02) sepia(0.05); }
@media (min-width: 900px) { .safety-body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; } }
@media (max-width: 899px) { .safety-photo img { aspect-ratio: 3 / 2; } }
.rules { list-style: none; margin: 0; padding: 0; max-width: 58em; border-top: 2px solid var(--bark-line); }
.rules li { position: relative; padding: 18px 0 18px 46px; border-bottom: 2px solid var(--bark-line); font-size: 19px; }
.rules li::before { content: ''; position: absolute; left: 6px; top: 22px; width: 24px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c4 0 7 3 7 7 0 6-5 10-7 11-2-1-7-5-7-11 0-4 3-7 7-7z' fill='%2379a84c'/%3E%3Cpath d='M12 7v14' stroke='%23fff8eb' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Tuition */
.tuition { background: #fff; }
.table-wrap { overflow-x: auto; border-radius: 24px; border: 2px solid var(--bark-line); }
.fees { width: 100%; border-collapse: collapse; min-width: 560px; font-variant-numeric: tabular-nums; }
.fees th, .fees td { text-align: left; padding: 16px 20px; border-bottom: 2px solid var(--bark-line); font-size: 18px; }
.fees thead th { font: 600 16px/1.3 var(--text); color: var(--oak-soft); background: var(--cream); }
.fees tbody th { font: 700 22px/1.2 var(--display); }
.fee-room { display: inline-flex; align-items: center; gap: 10px; }
.fees tbody tr:last-child th, .fees tbody tr:last-child td { border-bottom: 0; }
.fee-notes { margin-top: 18px; font-size: 18px; max-width: 46em; }

/* Tour */
.tour { display: grid; gap: 30px; align-items: center; }
.tour-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 30px; filter: saturate(0.94) contrast(1.02) brightness(1.02) sepia(0.05); }
.tour-text { display: grid; gap: 14px; justify-items: start; }
.tour-text p { font-size: 19px; max-width: 32em; }
.tour-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* Footer */
.foot { display: grid; gap: 24px; padding: 48px var(--pad) 36px; background: var(--oak-deep); color: var(--cream); }
.foot p { font-size: 17px; line-height: 1.55; }
.foot-logo { margin-bottom: 10px; }
.foot-logo .logo { --lg: 30px; }
.foot-head { font-weight: 600; color: #f3dcb6; margin-bottom: 4px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration-color: var(--leaf); text-underline-offset: 5px; }
.foot-demo { border-top: 1px solid rgba(255, 248, 235, 0.22); padding-top: 20px; }

/* Phones: headline beside the acorn, the leaf tucked under it */
@media (max-width: 699px) {
  .canopy { grid-template-columns: minmax(0, 1fr) 122px; gap: 12px 18px; padding-top: 18px; padding-bottom: 28px; }
  .canopy h1 { font-size: clamp(27px, 7.9vw, 34px); }
  .asof-day { display: none; }
  .op-head { display: grid; gap: 0; margin-bottom: 6px; }
  .op-head h2 { font-size: 25px; }
  .room { padding: 8px 10px 8px 6px; }
  .room + .room { margin-top: 4px; }
  .room-name { font-size: 20px; }
  .canopy-text { grid-column: 1; grid-row: 1; }
  .canopy h1 span { display: block; }
  .pair { grid-column: 2; grid-row: 1; display: block; }
  .acorn { width: 122px; }
  .leaf { width: 96px; margin: -14px 0 0 16px; }
  .leaf .stem { width: 9%; margin-left: -5%; }
  .openings { margin-top: 14px; }
  .lede { font-size: 17px; margin-top: 10px; max-width: none; }
  .openings { grid-column: 1 / -1; margin-top: 8px; }
}
@media (max-width: 359px) {
  .canopy { grid-template-columns: minmax(0, 1fr) 108px; }
  .acorn { width: 108px; }
  .leaf { width: 86px; margin: -14px 0 0 14px; }
  .room { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 2px 8px; padding: 8px 8px 8px 4px; }
  .room-icon { width: 34px; height: 34px; }
  .room-status { padding: 4px 9px; }
}
@media (min-width: 560px) {
  .row2 { grid-template-columns: 1fr 1fr; }
  .openings { padding: 24px 22px 22px; }
}
@media (min-width: 700px) {
  .canopy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .canopy-text { grid-column: 1 / -1; }
  .canopy h1 { font-size: clamp(52px, 7vw, 68px); }
  .pair { grid-column: 1; }
  .openings { grid-column: 2; grid-row: 2; }
  .stage { grid-template-columns: 1fr 1fr; gap: 40px; }
  .stage:nth-child(even) .stage-photo { order: 2; }
  .day { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
  .tour { grid-template-columns: 1fr 1fr; gap: 56px; }
  .foot { grid-template-columns: 1.3fr 1fr 1.4fr; }
  .foot-demo { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .canopy { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 52px; padding: 30px var(--pad) 56px; }
  .canopy-text { grid-column: 1; grid-row: 1; }
  .canopy h1 { font-size: clamp(64px, 5.2vw, 82px); line-height: 0.98; }
  .canopy h1 span { display: block; }
  .lede { font-size: 19px; margin-top: 14px; }
  .pair { grid-column: 1; grid-row: 2; justify-content: flex-start; gap: 0; margin-top: 18px; }
  .acorn { width: clamp(250px, 21vw, 330px); }
  .leaf { width: clamp(220px, 18vw, 290px); margin-top: 92px; margin-left: -44px; z-index: 2; }
  .openings { grid-column: 2; grid-row: 1 / span 2; align-self: start; padding: 24px 24px 22px; }
  .growth::before { content: ''; position: absolute; left: 50%; top: 60px; bottom: 60px; width: 4px; margin-left: -2px; border-radius: 4px; background: linear-gradient(var(--oak), var(--leaf-deep)); opacity: 0.45; }
  .stage { position: relative; gap: 132px; }
  /* Each room's icon sits on the line as a node, and grows from acorn to sapling. */
  .node { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; width: var(--n); height: var(--n); border-radius: 50%; background: var(--cream); box-shadow: 0 0 0 3px var(--bark-line); }
  .node .stage-icon { width: calc(var(--n) * 0.7); height: calc(var(--n) * 0.7); }
  .g1 { --n: 64px; } .g2 { --n: 78px; } .g3 { --n: 92px; } .g4 { --n: 108px; }
}
@media (max-width: 1239px) {
  .nav, .tel, .head-cta { display: none; }
  .tel-icon, .burger { display: inline-flex; }
  .top { gap: 10px; }
}
@media (min-width: 1240px) {
  .menu { display: none; }
}
@media (max-width: 420px) {
  :root { --head: 70px; }
  .brand .logo { --lg: 21px; }
}
@media (max-width: 359px) {
  .brand .logo-sub { display: none; }
}
@media (min-width: 1700px) {
  .rooms-sec, .day, .safety, .tuition, .tour, .foot { padding-left: max(var(--pad), calc((100vw - 1560px) / 2)); padding-right: max(var(--pad), calc((100vw - 1560px) / 2)); }
}

/* One load moment: the acorn drops onto the branch line, then the leaf drifts down and settles. */
@media (prefers-reduced-motion: no-preference) {
  .acorn { animation: drop 1s .15s cubic-bezier(.2, .7, .3, 1) both; }
  .leaf { animation: drift 2.1s .55s cubic-bezier(.25, .6, .3, 1) both; }
}
@keyframes drop { from { transform: translateY(-26px); } to { transform: translateY(0); } }
@keyframes drift {
  0% { transform: translate(-30px, -70px) rotate(14deg); }
  35% { transform: translate(14px, -34px) rotate(-18deg); }
  65% { transform: translate(-6px, -10px) rotate(-3deg); }
  100% { transform: translate(0, 0) rotate(-9deg); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}