/* Learning Tree Academy: "orchard picture book". No existing brand, so the palette comes
   from the name: deep canopy green, apple red, wheat and bark on warm cream paper.
   Soft organic shapes (canopy-shaped hero frame, pebble photos), layered soft shadows,
   fine paper grain. Bricolage Grotesque for warm, chunky headings; Figtree for easy reading. */
:root {
  --forest: #1E4D2B; --green: #2F6B3A; --leaf: #4E9F59; --sage: #DCEBD6; --apple: #D9452B; --apple-dk: #B3341E;
  --wheat: #E9C46A; --bark: #7A4B2A; --cream: #FBF6EC;
  --bg: var(--cream); --surface: #F4EEDF; --ink: #1F2A1E; --muted: #55604F; --line: #E4DCC8;
  --brand: var(--green); --brand-ink: #fff; --accent: var(--apple); --kicker: var(--green);
  --font-d: "Bricolage Grotesque", "Trebuchet MS", sans-serif; --font-b: "Figtree", system-ui, sans-serif;
  --btn-r: 999px; --card-r: 28px; --photo-r: 28px; --field-r: 14px;
  --btn-shadow: 0 10px 22px -10px rgba(30, 77, 43, 0.6); --dur: 200ms; --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --foot-bg: var(--forest); --foot-ink: #F4EEDF; --cta-bg: var(--green); --ring: rgba(47, 107, 58, 0.25);
  --chip-bg: #fff; --nav-active: var(--sage); --focus: var(--apple); --num: var(--apple);
  --soft: 0 1px 2px rgba(31, 42, 30, 0.06), 0 12px 32px -14px rgba(31, 42, 30, 0.28);
}

/* Paper grain */
body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; }
.hdr { background: rgba(251, 246, 236, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.hdr-call { box-shadow: var(--btn-shadow); }
.brand-name { font-weight: 800; color: var(--forest); }

.btn-main { box-shadow: var(--btn-shadow); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur); }
.btn-main:hover { transform: translateY(-2px); background: var(--forest); box-shadow: 0 16px 28px -12px rgba(30, 77, 43, 0.7); }
.btn-main:active { transform: translateY(1px); box-shadow: 0 4px 10px -6px rgba(30, 77, 43, 0.7); }
.btn-ghost { border-color: var(--green); color: var(--forest); background: transparent; }
.btn-ghost:hover { background: var(--sage); }

/* Section headings sprout a small leaf */
.section h2::before {
  content: ""; display: inline-block; width: 0.5em; height: 0.72em; margin-right: 0.3em; vertical-align: -0.02em; rotate: 28deg;
  background: var(--leaf); border-radius: 0 100% 0 100%;
}
.day-sec h2::before { background: var(--apple); border-radius: 50% 50% 46% 46%; height: 0.55em; width: 0.55em; rotate: 0deg; }
.hours-sec h2::before { background: var(--wheat); }

/* Hero: copy left, video inside a canopy-shaped frame */
.hero { padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 3vw, 3rem); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 60vmax; aspect-ratio: 1; right: -18vmax; top: -24vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(220, 235, 214, 0.9), rgba(220, 235, 214, 0)); pointer-events: none; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; position: relative; }
.hero h1 { font-size: clamp(2.9rem, 1.2rem + 5.8vw, 6rem); line-height: 0.95; font-weight: 800; color: var(--forest); }
.hero h1 .hl { color: var(--apple); position: relative; white-space: nowrap; isolation: isolate; }
.hero h1 .hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.04em; height: 0.14em; border-radius: 99px; background: var(--wheat); z-index: -1; }
.hero-sub { max-width: 34rem; }
.kicker { display: inline-flex; align-items: center; color: var(--green); background: #fff; border: 1px solid var(--line); padding: 0.42rem 0.9rem; border-radius: 999px; box-shadow: var(--soft); margin-bottom: 1.4rem; letter-spacing: 0.04em; }
.hero-visual { position: relative; padding: 4% 6% 8%; }
.hero-frame {
  aspect-ratio: 1 / 1; overflow: hidden; border-radius: 58% 42% 50% 50% / 52% 54% 46% 48%;
  border: clamp(8px, 1vw, 12px) solid #fff; box-shadow: var(--soft), 0 40px 60px -30px rgba(30, 77, 43, 0.55);
}
.hero-frame video { width: 100%; height: 100%; object-fit: cover; }
.leaf { position: absolute; width: clamp(30px, 3.6vw, 48px); fill: var(--leaf); }
.leaf-1 { top: 2%; left: 4%; rotate: -34deg; }
.leaf-2 { bottom: 10%; right: 0; rotate: 48deg; fill: var(--green); width: clamp(24px, 3vw, 38px); }
.apple { position: absolute; width: clamp(38px, 4.6vw, 62px); fill: var(--apple); filter: drop-shadow(0 8px 10px rgba(179, 52, 30, 0.35)); }
.apple .apple-stem { fill: none; stroke: var(--bark); stroke-width: 3; stroke-linecap: round; }
.apple-1 { top: 6%; right: 6%; rotate: 12deg; }
.apple-2 { bottom: 2%; left: 10%; width: clamp(28px, 3.4vw, 44px); fill: var(--wheat); rotate: -10deg; filter: drop-shadow(0 8px 10px rgba(122, 75, 42, 0.3)); }

/* Photo strip: pebble-shaped photos stepping like branches */
.strip-item img { border-radius: var(--photo-r); box-shadow: var(--soft); }
.strip-item:nth-child(1) img { border-radius: 40px 40px 40px 8px; }
.strip-item:nth-child(2) { margin-top: 2rem; }
.strip-item:nth-child(2) img { border-radius: 50% 50% 28px 28px / 32% 32% 28px 28px; }
.strip-item:nth-child(3) img { border-radius: 8px 40px 40px 40px; }
.strip-item:nth-child(4) { margin-top: 1.1rem; }
.strip-item:nth-child(4) img { border-radius: 28px 28px 50% 50% / 28px 28px 32% 32%; }

.facts li { background: #fff; border: 1px solid var(--line); box-shadow: var(--soft); }
.license-line { margin-top: 1.5rem; font-size: 0.92rem; color: var(--muted); }
.license-line a { color: var(--green); font-weight: 600; }

.svc { border-top: 1px solid var(--line); transition: transform var(--dur) var(--ease); }
.svc:hover { transform: translateX(4px); }
.svc-num { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50% 50% 46% 46%; background: var(--apple); color: #fff; font-weight: 700; position: relative; }
.svc-num::before { content: ""; position: absolute; top: -6px; left: 55%; width: 10px; height: 7px; background: var(--leaf); border-radius: 0 100% 0 100%; }
.svc:nth-child(2n) .svc-num { background: var(--green); }
.svc:nth-child(2n+1) .svc-num { background: var(--apple-dk); }  /* white on --apple is 4.34:1; --apple-dk passes AA */
.foot-by-url { opacity: 0.95; }  /* base 0.75 measured 4.48:1 on forest */
.day-photo img { border-radius: 46% 54% 32px 32px / 30% 30% 32px 32px; box-shadow: var(--soft); }
.about-photos img { border-radius: var(--photo-r); box-shadow: var(--soft); }
.about-photos figure:nth-child(2) img { border-radius: 50% 50% 28px 28px / 32% 32% 28px 28px; }

.cta-band { background: radial-gradient(120% 140% at 0% 0%, var(--leaf) 0%, var(--green) 45%, var(--forest) 100%); }
.cta-band .btn-main { background: var(--wheat); color: var(--forest); }
.cta-band .btn-main:hover { background: #F2D58A; }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.cta-band .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }

.page-hero { background: linear-gradient(180deg, var(--sage), var(--cream)); }
.page-hero h1 { font-weight: 800; color: var(--forest); }
.place { background: #fff; border: 1px solid var(--line); border-radius: var(--card-r); box-shadow: var(--soft); }
/* Two cream sections in a row (no ages band between them) must not stack two full paddings */
.section + .section { padding-top: clamp(1rem, 2vw, 2rem); }

/* Hours card matches .place: same border, radius and inner padding (a collapsed table ignores padding, so separate it) */
.hours { background: #fff; border: 1px solid var(--line); border-radius: var(--card-r); box-shadow: var(--soft);
  border-collapse: separate; border-spacing: 0; padding: 0.6rem 1.75rem; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours th { font-weight: 600; }
.foot .btn-foot { background: var(--wheat); color: var(--forest); border-color: var(--wheat); }

@media (max-width: 860px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-visual { max-width: 420px; margin-inline: auto; width: 100%; }
  .strip-item:nth-child(n) { margin-top: 0; }
  .brand-name { max-width: 11rem; font-size: 0.98rem; }
}
@media (prefers-reduced-motion: reduce) { .btn-main:hover, .svc:hover { transform: none; } }