/* Little Acorns — new compositions for this build (prefix la-). Tokens only; load after nubi.css + illustrations.css. */

/* ── Logo mark ── */
.logo .la-mark { width: 28px; height: 28px; }

/* ── 1 · Hero (hero-f, new): full-bleed room photo, headline straight on the photo ── */
/* The section is white so the photo's bowed bottom edge melts into the white spaces band below. */
.la-hero { position: relative; z-index: 1; background: var(--bg); margin-top: calc(-20px - var(--nav-h)); }
.la-hero__photo, .la-hero__veil { position: absolute; inset: 0; border-radius: 0 0 50% 50% / 0 0 var(--curve) var(--curve); overflow: hidden; }
.la-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.la-hero__veil { pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-deep) 86%, transparent) 0%, color-mix(in srgb, var(--accent-deep) 70%, transparent) 30%, color-mix(in srgb, var(--accent-deep) 28%, transparent) 50%, transparent 66%); }
.la-hero__inner { position: relative; z-index: 2; display: flex; align-items: center; min-height: clamp(640px, 88vh, 860px);
  padding-top: calc(var(--nav-h) + 20px + 56px); padding-bottom: calc(var(--curve) + 72px); }
.la-hero__copy { position: relative; width: min(47%, 600px); color: #FFFFFF; }
.la-hero .t-display { margin: 22px 0 20px; color: #FFFFFF; }
.la-hero__sub { max-width: 27em; margin-bottom: 32px; color: #FFFFFF; text-wrap: pretty; }
.la-hero .dd--loop { width: 132px; height: 66px; left: 250px; bottom: -34px; transform: rotate(-8deg); }
.la-hero__chip { position: absolute; right: 0; bottom: calc(var(--curve) + 40px); display: flex; align-items: center; gap: 14px; padding: 12px 20px 12px 12px;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, .84); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); transition: background .3s var(--ease); }
.la-hero__chip:hover { background: rgba(255, 255, 255, .94); }
.la-hero__chip .icon-well { border-radius: var(--r-pill); }
.la-hero__chip b { display: block; font: 700 16px/1.3 var(--font); color: var(--text); }
.la-hero__chip small { display: block; font: 600 13px/1.4 var(--font); color: var(--text); }
.la-hero + .la-spaces > .bow--down { display: none; }  /* the hero's own bowed edge replaces the paper bow */

/* ── 2 · Spaces board (new) ── */
.la-spaces { padding-top: calc(var(--section) + var(--curve) / 2); }
.la-spaces .sec-head h2 { max-width: 11em; }
.la-rooms { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.la-room { display: flex; flex-direction: column; gap: 28px; min-height: 380px; }
.la-room__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.la-room__top .tag { flex: none; }
.la-room__top p { margin-top: 6px; font: 600 15px/1.5 var(--font); color: var(--text-2); }
.la-seats { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; margin-top: auto; }
.la-seats i { aspect-ratio: 1; border-radius: 50%; background: rgba(var(--accent-rgb), .78); }
.la-seats i.is-open { background: var(--bg); box-shadow: inset 0 0 0 2px var(--accent); }
.la-room__status { display: flex; align-items: center; gap: 10px; padding-top: 20px; border-top: 1.5px dashed var(--line-2); font: 700 17px/1.4 var(--font); color: var(--text); }
.la-room__status .icon-well { background: var(--bg); }
.la-spaces__foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 40px; }
.la-legend { display: flex; gap: 20px; flex-wrap: wrap; font: 600 15px/1.5 var(--font); color: var(--text-2); }
.la-legend span { display: inline-flex; align-items: center; gap: 8px; }
.la-legend i { width: 14px; height: 14px; border-radius: 50%; background: rgba(var(--accent-rgb), .78); }
.la-legend i.is-open { background: var(--bg); box-shadow: inset 0 0 0 2px var(--accent); }
.la-rooms .dd--star { width: 64px; height: 64px; right: -22px; top: -34px; transform: rotate(14deg); z-index: 2; }

/* ── 3 · The Montessori way: badge orbit + benefit rows (new) ── */
.la-way { padding-top: calc(var(--section) + var(--curve) / 2); }
.la-way__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
.la-way__grid > * { min-width: 0; }
.la-way .sec-head { margin-bottom: 40px; }
.la-way .sec-head h2 { max-width: 9em; }
.la-rows { display: grid; }
.la-rows li { display: flex; gap: 18px; align-items: flex-start; padding-block: 24px; border-top: 1px solid var(--line); }
.la-rows li:last-child { border-bottom: 1px solid var(--line); }
.la-rows .icon-well { width: 44px; height: 44px; border-radius: 12px; }
.la-rows .icon-well svg { width: 20px; height: 20px; }
.la-rows h3 { margin-bottom: 6px; }
.la-rows p { font: 500 17px/1.55 var(--font); color: var(--text-2); max-width: 30em; }
.la-orbit .il-s1 { --w: 44cqw; }
.la-orbit .ring { --w: 74cqw; }
.la-orbit .b1 { --x: 50%; --y: 8%; }
.la-orbit .b2 { --x: 88%; --y: 38%; --w: 21cqw; --rot: 8deg; }
.la-orbit .b3 { --x: 76%; --y: 88%; }
.la-orbit .b4 { --x: 14%; --y: 66%; --w: 21cqw; --rot: -9deg; }
.la-orbit .d1 { --x: 14%; --y: 20%; --w: 13cqw; }

/* ── 4 · Proof (proof-b) ── */
.la-proof { padding-top: calc(var(--section) + var(--curve) / 2); }
.la-proof .v-rb { background: var(--mint); }
.la-initial { width: 52px; height: 52px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; background: var(--butter); border: 2px solid var(--bg);
  font: 600 20px/1 var(--font-display); color: var(--text); }

/* ── 5 · A morning here: stepping-stone path (new) ── */
.la-day { padding-top: calc(var(--section) + var(--curve) / 2); padding-bottom: 96px; }
.la-day .sec-head h2 { max-width: 12em; }
.la-path { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; align-items: start; }
.la-path > li { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--r); background: var(--bg); }
.la-path > li:nth-child(even) { margin-top: 96px; }
.la-path h3 { margin-top: 4px; }
.la-path p { font: 500 16px/1.5 var(--font); color: var(--text-2); }
.la-path .tag { align-self: flex-start; font-size: 14px; padding: 4px 12px; }
.la-t--butter { background: var(--butter); } .la-t--mint { background: var(--mint); } .la-t--sky { background: var(--sky); }
.la-t--lilac { background: var(--lilac); } .la-t--peach { background: var(--peach); }
.la-path__photo { aspect-ratio: 4 / 3; margin: -8px -8px 4px; border-radius: var(--r-sm); }
.la-path__line { position: absolute; left: 0; top: 40px; width: 100%; height: 200px; z-index: 0; fill: none; stroke: var(--pop); stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; pointer-events: none; }

/* ── 6 · Arc (arc-b) ── */
.la-arcwrap { padding-block: 24px 48px; }
.la-arcwrap .arc { margin-block: 0; }
.la-arcwrap .arc svg { max-width: none; }
.la-arcwrap .arc__band { stroke: var(--butter); }

/* ── 7 · Fees (fees-b) ── */
.la-fees { padding-top: calc(var(--section) + var(--curve) / 2); }
.la-fees .v-table { background: var(--paper); }
.la-fees .v-table td:first-child { color: var(--text-2); }
.la-fees .v-table td:first-child b { margin-bottom: 2px; }

/* ── 8 · How to start: scrapbook + perforated ticket (new) ── */
.la-join { padding-top: calc(var(--section) + var(--curve) / 2); }
.la-join__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.la-join__grid > * { min-width: 0; }
.la-join .sec-head { margin-bottom: 36px; }
.la-join .sec-head h2 { max-width: 10em; }
.la-ticket { background: var(--bg); border-radius: var(--r); }
.la-ticket li { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px; align-items: start; padding: 28px 32px; }
.la-ticket li + li { border-top: 2px dashed var(--line-2); }
.la-ticket li + li::before, .la-ticket li + li::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); }
.la-ticket li + li::before { left: -12px; } .la-ticket li + li::after { right: -12px; }
.la-ticket__wk { font: 600 22px/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--text); }
.la-ticket__wk small { display: block; margin-top: 4px; font: 700 12px/1.5 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.la-ticket h3 { margin-bottom: 6px; }
.la-ticket p { font: 500 16px/1.55 var(--font); color: var(--text-2); }
.la-join .btn-row { margin-top: 32px; }
.la-scrap .il-s1 { --w: 62cqw; --x: 40%; --y: 40%; }
.la-scrap .il-s2 { --w: 46cqw; --x: 68%; --y: 72%; }
.la-scrap .il-s5 { --x: 76%; --y: 16%; }
.la-scrap .il-s6 { --x: 14%; --y: 80%; --w: 18cqw; }
.la-scrap .d1 { --x: 92%; --y: 46%; --w: 11cqw; }

/* ── 9 · FAQ (faq-b) ── */
.la-faq { z-index: 2; padding-top: calc(var(--section) + var(--curve) / 2); padding-bottom: calc(80px + var(--curve)); }
.la-faq .faq details { background: var(--paper); }
.la-faq .faq summary i { background: var(--bg); }

/* ═════════ Responsive ═════════ */
@media (max-width: 1100px) {
  .la-path { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin-inline: auto; }
  .la-path > li:nth-child(even) { margin-top: 48px; }
  .la-path > li:nth-child(odd):not(:first-child) { margin-top: -48px; }
  .la-path__line { display: none; }
  .la-way__grid, .la-join__grid { gap: 48px; }
}
@media (max-width: 900px) {
  .la-rooms { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .la-room { min-height: 0; }
  .la-way__grid, .la-join__grid { grid-template-columns: 1fr; }
  .la-way .il, .la-join .il { max-width: 560px; margin-inline: auto; }
  .la-join .il { order: 2; }
  .la-rooms .dd--star { right: -8px; }
}
@media (max-width: 560px) {
  .la-path { grid-template-columns: 1fr; }
  .la-path > li:nth-child(n) { margin-top: 0; }
  .la-ticket li { grid-template-columns: 1fr; gap: 8px; padding: 24px; }
  .la-spaces__foot { flex-direction: column; align-items: flex-start; }
  .la-rows li { gap: 14px; }
  .la-rows .icon-well { width: 36px; height: 36px; }
}
.la-pathwrap { position: relative; }
:root { --shadow-sticker: 3px 4px 0 var(--accent-deep); }
.la-room__top > div { flex: 1; min-width: 0; }
.foot__photo img { object-position: 50% 22%; }
@media (max-width: 560px) {
  .la-path { gap: 16px; }
  .la-path > li:nth-child(odd):not(:first-child), .la-path > li:nth-child(even) { margin-top: 0; }
  .la-fees .v-table td:nth-child(2) { white-space: nowrap; }
}
.la-fees .v-table .tag { white-space: nowrap; }

/* Hero (hero-f) — tablet and phone: copy sits low on the photo, the veil rises from the bottom */
@media (max-width: 900px) {
  .la-hero__copy { width: min(100%, 560px); }
  .la-hero__inner { flex-direction: column; align-items: flex-start; justify-content: flex-end; min-height: clamp(620px, 88svh, 820px); padding-bottom: calc(var(--curve) + 40px); }
  .la-hero__photo img { object-position: 64% 40%; }
  .la-hero__veil { background: linear-gradient(0deg, color-mix(in srgb, var(--accent-deep) 90%, transparent) 0%, color-mix(in srgb, var(--accent-deep) 72%, transparent) 45%, color-mix(in srgb, var(--accent-deep) 20%, transparent) 68%, transparent 82%); }
  .la-hero__chip { position: relative; right: auto; bottom: auto; align-self: flex-end; margin-top: 28px; }
}
@media (max-width: 560px) {
  .la-hero .t-display { margin: 16px 0 14px; }
  .la-hero__sub { margin-bottom: 24px; }
  .la-hero .dd--loop { width: 96px; height: 48px; left: auto; right: -4px; bottom: 6px; }
  .la-hero__chip { padding: 8px 16px 8px 8px; gap: 10px; }
  /* phone: the photo fills the top two thirds (faces stay clear of the copy) and melts into the brand colour below */
  .la-hero__photo { background: var(--accent-deep); }
  .la-hero__photo img { height: 66%; object-position: 74% 30%; }
  .la-hero__veil { background: linear-gradient(0deg, var(--accent-deep) 0%, var(--accent-deep) 38%, color-mix(in srgb, var(--accent-deep) 70%, transparent) 52%, color-mix(in srgb, var(--accent-deep) 15%, transparent) 70%, transparent 80%); }
}