@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Nunito:wght@400;600;700;800&display=swap');

:root {
  --cream: #fff8e8;
  --cream-soft: #fffcf3;
  --cream-deep: #f9f0d6;
  --sun: #f6c34d;
  --orange: #f27a3f;
  --sky: #62bfe7;
  --sky-deep: #3da4d1;
  --leaf: #87bf58;
  --leaf-deep: #5f9d35;
  --ink: #3d2d26;
  --ink-soft: #6d5a50;
  --line: #f0d8a9;
  --white: #ffffff;
  --shadow-soft: 0 14px 30px rgba(103, 77, 44, 0.12);
  --shadow-card: 0 8px 20px rgba(95, 67, 34, 0.14);
  --radius-xl: 34px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --radius-pill: 999px;
  --surface-cream-strong: rgba(255, 249, 236, 0.88);
  --surface-cream-soft: rgba(255, 246, 226, 0.76);
  --surface-blue-soft: rgba(227, 241, 251, 0.74);
  --surface-green-soft: rgba(228, 245, 210, 0.74);
  --surface-gold-soft: rgba(255, 214, 109, 0.8);
  --surface-border-soft: rgba(255, 255, 255, 0.56);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: none;
}

body {
  -ms-overflow-style: none;
  font-family: 'Nunito', sans-serif;
  color: var(--ink);
  background-color: var(--cream-soft);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.41), rgba(255, 255, 255, 0.43)),
    url('./assets/images/site-backdrop-kids-bands.png');
  background-repeat: repeat-y, repeat-y;
  background-position: top center, top center;
  background-size: 100% auto, 100% auto;
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}

*::-webkit-scrollbar {
  width: 0;
  height: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline: clamp(14px, 2.2vw, 34px);
}

.section-space {
  margin-top: 1.3rem;
}

main.site-shell {
  padding-bottom: clamp(1.1rem, 3.2vh, 2.8rem);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0.75rem 0 0.35rem;
  background: linear-gradient(180deg, rgba(255, 248, 232, 0.95), rgba(255, 248, 232, 0.65) 82%, rgba(255, 248, 232, 0));
  backdrop-filter: blur(6px);
}

.nav-wrap {
  background: linear-gradient(180deg, rgba(246, 195, 77, 0.92), rgba(241, 186, 60, 0.86));
  border: 1px solid rgba(162, 116, 32, 0.18);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.3rem 0.55rem 0.3rem 0.35rem;
  position: relative;
}

.nav-wrap::after {
  content: '';
  flex: 0 0 clamp(198px, 22vw, 246px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 246px;
  flex-shrink: 0;
}

.brand img {
  width: 70px;
  height: 70px;
  border-radius: 16px;
  object-fit: contain;
  border: none;
  background: transparent;
}

.brand-mark {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-main {
  font-family: 'Baloo 2', cursive;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.brand-sub {
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  color: #ef6032;
  text-transform: uppercase;
}

.menu-toggle {
  display: none;
  border: none;
  background: rgba(255, 255, 255, 0.76);
  border-radius: 12px;
  height: 42px;
  width: 42px;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  margin-left: auto;
}

.menu-toggle span {
  width: 19px;
  height: 2px;
  background: var(--ink);
  position: relative;
  display: block;
}

.menu-toggle span::before,
.menu-toggle span::after {
  content: '';
  width: 19px;
  height: 2px;
  background: var(--ink);
  position: absolute;
  left: 0;
}

.menu-toggle span::before {
  top: -6px;
}

.menu-toggle span::after {
  top: 6px;
}

.menu-toggle[aria-expanded='true'] span {
  background: transparent;
}

.menu-toggle[aria-expanded='true'] span::before {
  top: 0;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded='true'] span::after {
  top: 0;
  transform: rotate(-45deg);
}

.main-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
}

.main-nav a {
  font-weight: 800;
  font-size: 0.92rem;
  color: #4a382f;
  border-radius: var(--radius-pill);
  padding: 0.52rem 0.95rem;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
  position: relative;
  z-index: 2;
}

.main-nav::before {
  content: '';
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  top: -0.24rem;
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(156, 101, 35, 0.06), rgba(156, 101, 35, 0.38), rgba(156, 101, 35, 0.06));
  pointer-events: none;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.55);
}

.main-nav a.active {
  background: var(--white);
  color: #df6534;
  box-shadow: inset 0 -3px 0 #ffc06c;
}

.hero-panel {
  background: linear-gradient(180deg, rgba(255, 249, 231, 0.88), rgba(255, 247, 223, 0.78));
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(1rem, 2vw, 1.8rem);
  box-shadow: 0 10px 24px rgba(103, 77, 44, 0.08);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 1.3rem;
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(2.2px) saturate(106%);
  -webkit-backdrop-filter: blur(2.2px) saturate(106%);
}

.hero-panel::before,
.hero-panel::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero-panel::before {
  width: 210px;
  height: 210px;
  background: rgba(119, 206, 234, 0.2);
  right: -30px;
  top: -52px;
}

.hero-panel::after {
  width: 190px;
  height: 190px;
  background: rgba(145, 208, 105, 0.18);
  left: -34px;
  bottom: -72px;
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.eyebrow {
  font-family: 'Baloo 2', cursive;
  color: #e16435;
  font-size: 1.22rem;
  margin: 0;
}

.hero-copy h1,
.hero-copy h2,
.page-title {
  margin: 0.35rem 0 0.6rem;
  font-family: 'Baloo 2', cursive;
  line-height: 1.05;
  color: #352620;
}

.hero-copy h1 {
  font-size: clamp(2rem, 4vw, 3.45rem);
}

.hero-copy h2,
.page-title {
  font-size: clamp(1.65rem, 3.3vw, 2.6rem);
}

.hero-copy p,
.page-lead {
  color: var(--ink-soft);
  font-size: 1.04rem;
  margin: 0;
}

.hero-art {
  border-radius: 26px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow-card);
  background: #d5f0fb;
}

.hero-art img {
  width: 100%;
  height: 100%;
  min-height: 270px;
  object-fit: cover;
  object-position: top center;
}

.contact-hero {
  grid-template-columns: minmax(0, 1.34fr) minmax(250px, 0.66fr);
  align-items: center;
}

.contact-hero .hero-art {
  max-width: clamp(220px, 21vw, 320px);
  justify-self: end;
}

.contact-hero .hero-art img {
  min-height: 0;
  height: clamp(200px, 21vw, 285px);
  object-fit: cover;
  object-position: center 30%;
}


.review-note-card {
  padding: 1rem;
  min-height: 250px;
  background: linear-gradient(180deg, rgba(239, 248, 255, 0.7), rgba(222, 241, 252, 0.62));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.review-note-card h3 {
  margin: 0 0 0.45rem;
  font-family: 'Baloo 2', cursive;
  font-size: 1.46rem;
}

.btn-row {
  margin-top: 1rem;
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.btn {
  font-weight: 800;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.18rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  box-shadow: 0 8px 14px rgba(93, 68, 45, 0.16);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(93, 68, 45, 0.22);
}

.btn-orange {
  background: linear-gradient(180deg, #f68f4b, #ea6f35);
  color: var(--white);
}

.btn-sky {
  background: linear-gradient(180deg, #75c9ec, #4eaed9);
  color: var(--white);
}

.btn-leaf {
  background: linear-gradient(180deg, #93ca63, #6ead42);
  color: var(--white);
}

.btn-cream {
  background: linear-gradient(180deg, #fff8df, #f8e8b9);
  color: #8a602f;
}

.panel {
  background: linear-gradient(180deg, rgba(255, 248, 232, 0.86), rgba(255, 244, 223, 0.76));
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 24px rgba(103, 77, 44, 0.08);
  padding: clamp(1rem, 2vw, 1.7rem);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(2.2px) saturate(106%);
  -webkit-backdrop-filter: blur(2.2px) saturate(106%);
}

.panel-header {
  text-align: center;
  margin-bottom: 1rem;
}

.panel-header h2,
.panel-header h3 {
  margin: 0;
  font-family: 'Baloo 2', cursive;
  color: #392922;
  line-height: 1.1;
}

.panel-header h2 {
  font-size: clamp(1.65rem, 3vw, 2.45rem);
}

.panel-header h3 {
  font-size: clamp(1.45rem, 2.5vw, 2rem);
}

.panel-header p {
  color: var(--ink-soft);
  margin-top: 0.45rem;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.program-card,
.feature-card,
.review-card,
.info-card,
.wall-card,
.story-card,
.approach-card,
.category-card {
  border-radius: var(--radius-md);
  border: 1px solid rgba(228, 185, 116, 0.45);
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.program-card {
  padding: 0.65rem;
  background: linear-gradient(180deg, rgba(255, 249, 230, 0.74), rgba(255, 245, 217, 0.64));
  backdrop-filter: blur(1.4px);
  -webkit-backdrop-filter: blur(1.4px);
}

.program-card:nth-child(2n) {
  background: linear-gradient(180deg, rgba(234, 247, 255, 0.72), rgba(217, 240, 252, 0.62));
}

.program-card:nth-child(3n) {
  background: linear-gradient(180deg, rgba(237, 248, 223, 0.74), rgba(221, 240, 200, 0.64));
}

.program-card:nth-child(4n) {
  background: linear-gradient(180deg, rgba(255, 251, 242, 0.72), rgba(248, 238, 216, 0.62));
}

.program-thumb {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.8);
  height: 92px;
  margin-bottom: 0.55rem;
}

.program-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.program-card h3 {
  font-family: 'Baloo 2', cursive;
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.05;
}

.program-card p {
  margin: 0.3rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.reviews-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.review-card {
  padding: 0.85rem;
  background: linear-gradient(180deg, rgba(255, 250, 240, 0.72), rgba(255, 243, 220, 0.62));
  backdrop-filter: blur(1.4px);
  -webkit-backdrop-filter: blur(1.4px);
}

.reviewer {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
}

.reviewer img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
}

.reviewer h4 {
  margin: 0;
  font-size: 1rem;
  font-family: 'Baloo 2', cursive;
}

.stars {
  color: #f38b3f;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  font-weight: 800;
}

.review-card p {
  margin: 0.32rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.65rem;
}

.gallery-tile {
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-card);
  background: #dff1fa;
  min-height: 98px;
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.gallery-tile.tall {
  grid-row: span 2;
}

.cta-band {
  margin-top: 1rem;
  background: linear-gradient(180deg, rgba(255, 207, 95, 0.84), rgba(241, 187, 69, 0.74));
  border: 1px solid rgba(164, 117, 35, 0.25);
  border-radius: 24px;
  padding: 1.2rem;
  text-align: center;
  box-shadow: 0 10px 24px rgba(103, 77, 44, 0.08);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.cta-band h2,
.cta-band h3 {
  margin: 0;
  font-family: 'Baloo 2', cursive;
  font-size: clamp(1.55rem, 2.6vw, 2.2rem);
}

.cta-band p {
  margin: 0.45rem auto 0;
  color: rgba(58, 43, 36, 0.87);
  max-width: 760px;
}

.lego-home {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(76px, auto);
  gap: 0.85rem;
}

.lego-brick {
  position: relative;
  border-radius: 30px;
  border: 1px solid rgba(214, 165, 85, 0.24);
  box-shadow: 0 10px 24px rgba(103, 77, 44, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  padding: 1rem;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface-cream-strong), var(--surface-cream-soft));
  backdrop-filter: blur(2.6px) saturate(108%);
  -webkit-backdrop-filter: blur(2.6px) saturate(108%);
}

.lego-brick::before {
  content: '';
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  top: 0.58rem;
  height: 12px;
  background-image: radial-gradient(circle at 6px 6px, rgba(200, 148, 72, 0.34) 0 5px, transparent 5.2px);
  background-size: 30px 12px;
  background-repeat: repeat-x;
  opacity: 0.5;
}

.lego-brick > * {
  position: relative;
  z-index: 1;
}

.lego-block-head {
  margin-bottom: 0.7rem;
}

.lego-block-head h2 {
  margin: 0;
  font-family: 'Baloo 2', cursive;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  line-height: 1.1;
}

.lego-block-head p {
  margin: 0.28rem 0 0;
  color: var(--ink-soft);
}

.lego-hero {
  grid-column: span 8;
  grid-row: span 4;
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(300px, 0.86fr);
  align-items: center;
  gap: 1rem;
  background: linear-gradient(180deg, rgba(255, 249, 235, 0.86), rgba(255, 243, 220, 0.76));
}

.lego-hero-copy h1 {
  margin: 0.2rem 0 0.5rem;
  font-family: 'Baloo 2', cursive;
  line-height: 1.03;
  color: #352620;
  font-size: clamp(2.05rem, 3.8vw, 3.25rem);
}

.lego-hero-copy p {
  color: var(--ink-soft);
  margin: 0;
  font-size: 1.04rem;
}

.lego-hero-art,
.lego-welcome-image {
  border-radius: 22px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: var(--shadow-card);
}

.lego-hero-art {
  max-width: clamp(320px, 29vw, 460px);
  min-height: clamp(300px, 28vw, 410px);
  justify-self: end;
}

.lego-welcome-image {
  max-height: clamp(210px, 19vw, 280px);
}

.lego-hero-art img,
.lego-welcome-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

.lego-welcome {
  grid-column: span 4;
  grid-row: span 4;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 0.55rem;
  align-content: start;
  background: linear-gradient(180deg, rgba(247, 251, 255, 0.83), rgba(230, 243, 251, 0.72));
}

.lego-welcome h2 {
  margin: 0.15rem 0 0.35rem;
  font-family: 'Baloo 2', cursive;
  font-size: clamp(1.55rem, 2.3vw, 2rem);
  line-height: 1.08;
}

.lego-welcome p {
  margin: 0;
  color: var(--ink-soft);
}

.lego-programs {
  grid-column: span 7;
  grid-row: span 4;
  background: linear-gradient(180deg, rgba(255, 249, 234, 0.85), rgba(255, 240, 215, 0.74));
}

.lego-program-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.64rem;
}

.lego-program-card {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-radius: 16px;
  border: 1px solid rgba(218, 171, 96, 0.38);
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.56);
  backdrop-filter: blur(1.4px);
  -webkit-backdrop-filter: blur(1.4px);
}

.lego-program-card:nth-child(2n) {
  background: rgba(220, 242, 253, 0.58);
}

.lego-program-card:nth-child(3n) {
  background: rgba(227, 245, 206, 0.62);
}

.lego-program-thumb {
  width: 84px;
  height: 84px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.lego-program-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.lego-program-copy h3 {
  margin: 0;
  font-family: 'Baloo 2', cursive;
  font-size: 1.15rem;
  line-height: 1.05;
}

.lego-program-copy p {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.lego-reviews {
  grid-column: span 5;
  grid-row: span 4;
  background: linear-gradient(180deg, rgba(255, 248, 236, 0.86), rgba(255, 239, 211, 0.75));
}

.lego-review-stack {
  display: grid;
  gap: 0.56rem;
}

.lego-review-chip {
  border-radius: 14px;
  border: 1px solid rgba(224, 176, 101, 0.42);
  padding: 0.56rem;
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(1.2px);
  -webkit-backdrop-filter: blur(1.2px);
}

.lego-review-top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.lego-review-top img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.lego-review-top h4 {
  margin: 0;
  font-family: 'Baloo 2', cursive;
  font-size: 1.05rem;
}

.lego-review-chip p {
  margin: 0.33rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.lego-gallery {
  grid-column: span 9;
  grid-row: span 5;
  background: linear-gradient(180deg, rgba(255, 248, 236, 0.84), rgba(255, 240, 216, 0.72));
}

.lego-gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 240px;
  gap: 0.62rem;
}

.lego-gallery-item {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-card);
  background: linear-gradient(180deg, #fffaf1, #f7ecd5);
}

.lego-gallery-item.wide {
  grid-column: span 1 !important;
}

.lego-gallery-item.tall {
  grid-row: span 1 !important;
}

.lego-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center !important;
  background: linear-gradient(180deg, #fffaf1, #f7ecd5);
}

.lego-cta {
  grid-column: span 3;
  grid-row: span 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  background: linear-gradient(180deg, rgba(255, 212, 109, 0.82), rgba(240, 188, 74, 0.74));
}

.lego-cta h2 {
  margin: 0.1rem 0 0.3rem;
  font-family: 'Baloo 2', cursive;
  font-size: clamp(1.7rem, 2.5vw, 2.45rem);
  line-height: 1.04;
  color: #3a2a22;
}

.lego-cta p {
  margin: 0;
  color: rgba(58, 41, 33, 0.87);
}

.lego-cta .btn-row {
  flex-direction: column;
  align-items: stretch;
}

.lego-cta .btn {
  justify-content: center;
}

.lego-cta-mascot {
  width: clamp(88px, 24vw, 130px);
  border-radius: 18px;
  border: none;
  background: transparent;
}

.inner-lego .lego-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.85rem;
}

.inner-lego .lego-layout > * {
  margin-top: 0 !important;
}

.lego-span-12 {
  grid-column: span 12;
}

.lego-span-8 {
  grid-column: span 8;
}

.lego-span-7 {
  grid-column: span 7;
}

.lego-span-6 {
  grid-column: span 6;
}

.lego-span-5 {
  grid-column: span 5;
}

.lego-span-4 {
  grid-column: span 4;
}

.inner-lego .hero-panel,
.inner-lego .page-banner,
.inner-lego .panel,
.inner-lego .cta-band,
.inner-lego .program-block,
.inner-lego .info-card,
.inner-lego .lego-tab-brick {
  border-radius: 30px;
  border: 1px solid rgba(214, 165, 85, 0.24);
  box-shadow: 0 10px 24px rgba(103, 77, 44, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  background-image:
    radial-gradient(circle at 8px 8px, rgba(200, 148, 72, 0.34) 0 5px, transparent 5.2px),
    linear-gradient(180deg, var(--surface-cream-strong), var(--surface-cream-soft));
  background-size:
    30px 14px,
    auto;
  background-repeat:
    repeat-x,
    no-repeat;
  background-position:
    14px 10px,
    0 0;
  padding-top: calc(clamp(1rem, 2vw, 1.6rem) + 0.4rem);
  overflow: hidden;
  backdrop-filter: blur(2.4px) saturate(108%);
  -webkit-backdrop-filter: blur(2.4px) saturate(108%);
}

.inner-lego .hero-panel::before,
.inner-lego .hero-panel::after {
  display: none;
}

.inner-lego .hero-panel {
  background-image:
    radial-gradient(circle at 8px 8px, rgba(200, 148, 72, 0.34) 0 5px, transparent 5.2px),
    linear-gradient(180deg, rgba(255, 249, 235, 0.86), rgba(255, 242, 220, 0.76));
}

.inner-lego .page-banner {
  background-image:
    radial-gradient(circle at 8px 8px, rgba(200, 148, 72, 0.34) 0 5px, transparent 5.2px),
    linear-gradient(180deg, rgba(255, 221, 121, 0.86), rgba(249, 201, 88, 0.76));
}

.inner-lego .cta-band {
  text-align: left;
  background-image:
    radial-gradient(circle at 8px 8px, rgba(176, 115, 33, 0.35) 0 5px, transparent 5.2px),
    linear-gradient(180deg, rgba(255, 212, 109, 0.85), rgba(240, 188, 74, 0.76));
}

.inner-lego .cta-band p {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

.inner-lego .program-block {
  padding-top: 1.35rem;
  background-image:
    radial-gradient(circle at 8px 8px, rgba(200, 148, 72, 0.34) 0 5px, transparent 5.2px),
    linear-gradient(180deg, rgba(255, 253, 243, 0.87), rgba(255, 246, 226, 0.76));
}

.inner-lego .program-block:nth-child(2n) {
  background-image:
    radial-gradient(circle at 8px 8px, rgba(124, 177, 88, 0.34) 0 5px, transparent 5.2px),
    linear-gradient(180deg, rgba(246, 253, 233, 0.86), rgba(237, 248, 219, 0.74));
}

.inner-lego .program-block:nth-child(3n) {
  background-image:
    radial-gradient(circle at 8px 8px, rgba(104, 170, 201, 0.34) 0 5px, transparent 5.2px),
    linear-gradient(180deg, rgba(238, 248, 255, 0.86), rgba(225, 242, 251, 0.74));
}

.inner-lego .program-block:nth-child(4n) {
  background-image:
    radial-gradient(circle at 8px 8px, rgba(236, 135, 74, 0.34) 0 5px, transparent 5.2px),
    linear-gradient(180deg, rgba(255, 248, 234, 0.86), rgba(253, 240, 219, 0.74));
}

.inner-lego .lego-tab-brick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.56rem;
  padding: 1rem 1rem 0.7rem;
}

.inner-lego .contact-cards {
  padding-top: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: grid;
}

.inner-lego .contact-cards .info-card {
  padding-top: 1.25rem;
}

.inner-lego .about-approach .approach-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.showcase-layout .showcase-gallery-block .showcase-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.voices-layout .voices-wall .wall-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.voices-layout .voices-whatsapp .panel-header,
.voices-layout .voices-progress .panel-header {
  text-align: left;
}

.whatsapp-photo-grid {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.44rem;
}

.whatsapp-photo-card {
  margin: 0;
  border-radius: var(--radius-md);
  border: 1px solid rgba(228, 185, 116, 0.45);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 251, 241, 0.74), rgba(253, 240, 218, 0.64));
  backdrop-filter: blur(1.4px);
  -webkit-backdrop-filter: blur(1.4px);
}

.whatsapp-photo-card img {
  width: 100%;
  height: 175px;
  object-fit: contain;
  object-position: top center;
  background: linear-gradient(180deg, #fffaf1, #f7ecd5);
}

.whatsapp-photo-card figcaption {
  padding: 0.66rem;
}

.whatsapp-photo-card h3 {
  margin: 0;
  font-family: 'Baloo 2', cursive;
  font-size: 1.1rem;
  line-height: 1.05;
}

.whatsapp-photo-card p {
  margin: 0.3rem 0 0;
  color: var(--ink-soft);
}

.voices-photo-grid {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.72rem;
}

.voices-photo-card {
  margin: 0;
  border-radius: var(--radius-md);
  border: 1px solid rgba(228, 185, 116, 0.45);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 251, 241, 0.74), rgba(253, 240, 218, 0.64));
  backdrop-filter: blur(1.4px);
  -webkit-backdrop-filter: blur(1.4px);
}

.voices-photo-card img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  object-position: top center;
  background: linear-gradient(180deg, #fffaf1, #f7ecd5);
}

.voices-photo-card figcaption {
  padding: 0.66rem;
}

.voices-photo-card h3 {
  margin: 0;
  font-family: 'Baloo 2', cursive;
  font-size: 1.1rem;
  line-height: 1.05;
}

.voices-photo-card p {
  margin: 0.3rem 0 0;
  color: var(--ink-soft);
}

.progress-story-grid {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.72rem;
}

.progress-card {
  border-radius: var(--radius-md);
  border: 1px solid rgba(228, 185, 116, 0.45);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding: 0.65rem;
  background: linear-gradient(180deg, rgba(255, 250, 239, 0.74), rgba(255, 242, 219, 0.64));
  backdrop-filter: blur(1.4px);
  -webkit-backdrop-filter: blur(1.4px);
}

.progress-card:nth-child(2n) {
  background: linear-gradient(180deg, rgba(236, 248, 255, 0.74), rgba(221, 240, 252, 0.64));
}

.progress-card:nth-child(3n) {
  background: linear-gradient(180deg, rgba(237, 248, 224, 0.74), rgba(223, 241, 203, 0.64));
}

.progress-card figure {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.82);
}

.progress-card img {
  width: 100%;
  height: 185px;
  object-fit: cover;
  object-position: top center;
}

.progress-card h3 {
  margin: 0.62rem 0 0;
  font-family: 'Baloo 2', cursive;
  font-size: 1.18rem;
  line-height: 1.08;
}

.progress-card p {
  margin: 0.32rem 0 0;
  color: var(--ink-soft);
}

.progress-tags {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.progress-tags span {
  border-radius: var(--radius-pill);
  padding: 0.24rem 0.62rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: #4b392f;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid rgba(194, 147, 67, 0.25);
}

.voices-layout .voices-cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.voices-layout .voices-cta .btn-row {
  justify-content: flex-start !important;
}

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
}

.story-card,
.approach-card,
.category-card,
.feature-card,
.info-card,
.wall-card {
  padding: 0.95rem;
}

.story-card {
  background: linear-gradient(180deg, rgba(255, 249, 235, 0.74), rgba(255, 242, 213, 0.64));
  backdrop-filter: blur(1.6px);
  -webkit-backdrop-filter: blur(1.6px);
}

.story-card h3,
.approach-card h3,
.category-card h3,
.feature-card h3,
.info-card h3 {
  margin: 0;
  font-family: 'Baloo 2', cursive;
  font-size: 1.35rem;
}

.story-card p,
.approach-card p,
.category-card p,
.feature-card p,
.info-card p,
.wall-card p,
.feature-card li,
.program-details p {
  margin: 0.42rem 0 0;
  color: var(--ink-soft);
}

.approach-grid {
  margin-top: 0.8rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.approach-card {
  background: linear-gradient(180deg, rgba(236, 248, 223, 0.74), rgba(223, 240, 204, 0.64));
  backdrop-filter: blur(1.6px);
  -webkit-backdrop-filter: blur(1.6px);
}

.approach-card:nth-child(2n) {
  background: linear-gradient(180deg, rgba(235, 248, 255, 0.74), rgba(217, 238, 251, 0.64));
}

.approach-card:nth-child(3n) {
  background: linear-gradient(180deg, rgba(255, 249, 234, 0.74), rgba(250, 239, 214, 0.64));
}

.page-banner {
  margin-top: 1.2rem;
  background: linear-gradient(180deg, rgba(255, 221, 121, 0.86), rgba(249, 201, 88, 0.76));
  border-radius: 30px;
  border: 1px solid rgba(165, 118, 33, 0.26);
  box-shadow: 0 10px 24px rgba(103, 77, 44, 0.08);
  padding: clamp(1rem, 2vw, 1.6rem);
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: 1rem;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.page-banner img {
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  max-height: 220px;
  object-fit: cover;
  object-position: top center;
  width: 100%;
}

.page-banner .page-title {
  font-size: clamp(1.85rem, 3.7vw, 3rem);
}

.about-banner {
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
  gap: 1.2rem;
}

.about-banner .about-banner-copy {
  max-width: 760px;
}

.about-banner .about-banner-mark {
  justify-self: end;
  width: min(100%, 420px);
  border-radius: 20px;
  border: 1px solid rgba(171, 116, 36, 0.22);
  background: linear-gradient(180deg, rgba(255, 251, 242, 0.76), rgba(255, 242, 214, 0.68));
  padding: 0.9rem 1rem;
  box-shadow: var(--shadow-card);
}

.about-banner .about-banner-mark img {
  width: 100%;
  max-height: none;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
  filter: saturate(0.92) contrast(0.98);
}


.tab-row {
  margin-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.56rem;
}

.programs-layout .tab-row {
  margin-top: 0;
}

.programs-layout .lego-tab-brick {
  justify-content: center;
  align-items: center;
  padding: 0.72rem 0.95rem;
}

.tab-chip {
  border-radius: var(--radius-pill);
  padding: 0.68rem 1.14rem;
  background: #fff6de;
  border: 1px solid rgba(196, 145, 60, 0.32);
  box-shadow: inset 0 -2px 0 rgba(201, 156, 79, 0.25);
  font-size: 1.03rem;
  font-weight: 800;
}

.tab-chip:nth-child(2n) {
  background: #dff2fd;
}

.tab-chip:nth-child(3n) {
  background: #e7f6d8;
}

.program-stack {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.85rem;
}

.program-block {
  background: linear-gradient(180deg, rgba(255, 253, 243, 0.86), rgba(255, 246, 226, 0.76));
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow-card);
  padding: 1.32rem;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.45fr);
  gap: 0.72rem;
  align-items: stretch;
  scroll-margin-top: 100px;
}

.program-details {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 1rem;
}

.program-details h3 {
  margin: 0;
  font-family: 'Baloo 2', cursive;
  font-size: clamp(1.95rem, 3.2vw, 2.85rem);
  line-height: 1.02;
}

.program-details h4 {
  margin: 0.22rem 0 0;
  color: #e16435;
  font-family: 'Baloo 2', cursive;
  font-size: 1.48rem;
  line-height: 1.14;
}

.feature-list {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.38rem;
}

.feature-list li {
  position: relative;
  padding-left: 1rem;
  font-size: 1.08rem;
}

.feature-list li::before {
  content: '';
  width: 7px;
  height: 7px;
  background: #ef7a3c;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0.5rem;
}

.formal-logo-strip {
  margin: 0.78rem 0 0.88rem;
  border-radius: 16px;
  border: 1px solid rgba(208, 164, 86, 0.36);
  background: linear-gradient(180deg, rgba(255, 250, 239, 0.86), rgba(251, 239, 214, 0.74));
  box-shadow: var(--shadow-card);
  padding: 0.7rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}

.formal-contact-brand {
  margin: 0.56rem 0 0.72rem;
  border-radius: 14px;
  border: 1px solid rgba(208, 164, 86, 0.32);
  background: rgba(255, 255, 255, 0.58);
  padding: 0.55rem 0.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.72rem;
}

.formal-logo-wordmark {
  width: min(100%, 300px);
  max-height: 88px;
  object-fit: contain;
  object-position: left center;
}

.formal-logo-seal {
  width: clamp(64px, 9vw, 88px);
  height: auto;
  object-fit: contain;
}

.program-gallery {
  display: grid;
  grid-template-columns: minmax(0, 0.64fr) minmax(0, 1.36fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  row-gap: 0.14rem;
  column-gap: 0.08rem;
  width: 100%;
  max-width: none;
  height: clamp(342px, 25.3vw, 432px);
  min-height: 0;
  justify-self: stretch;
  align-self: start;
  margin-top: 0.75rem;
  padding: 0.4rem;
  border-radius: 18px;
  border: 1px solid rgba(96, 156, 197, 0.27);
  background: linear-gradient(180deg, rgba(220, 239, 251, 0.52), rgba(206, 229, 245, 0.42));
}

.program-gallery .main-shot {
  margin: 0;
  grid-column: 2;
  grid-row: 1 / span 2;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(165, 195, 218, 0.58);
  min-height: 0;
  background: rgba(233, 243, 252, 0.72);
}

.program-gallery .main-shot img,
.program-gallery .mini-shot img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

.program-gallery .mini-shot {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(165, 195, 218, 0.58);
  min-height: 0;
  background: rgba(233, 243, 252, 0.72);
}

.program-gallery .mini-shot:nth-of-type(2) {
  grid-column: 1;
  grid-row: 1;
}

.program-gallery .mini-shot:nth-of-type(3) {
  grid-column: 1;
  grid-row: 2;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.filter-chip {
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.9rem;
  background: #fff6de;
  border: 1px solid rgba(196, 145, 60, 0.28);
  font-weight: 800;
  color: #5a473d;
  cursor: pointer;
}

.filter-chip.active {
  background: linear-gradient(180deg, #75c9ec, #4eaed9);
  border-color: rgba(46, 122, 158, 0.3);
  color: white;
}

.showcase-grid {
  margin-top: 0.85rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: start;
}

#showcase-gallery {
  scroll-margin-top: 110px;
}

.showcase-item {
  border-radius: var(--radius-md);
  border: 1px solid rgba(224, 179, 106, 0.42);
  background: rgba(255, 255, 255, 0.56);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 180ms ease, opacity 180ms ease;
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

.showcase-item.hide {
  display: none;
}

.showcase-item:hover {
  transform: translateY(-2px);
}

.showcase-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: top center;
}

.showcase-item video {
  width: 100%;
  height: 150px;
  display: block;
  object-fit: cover;
  background: linear-gradient(180deg, #fff9ec, #f8ecd2);
}

.showcase-item.creative-media img,
.showcase-item.creative-media video {
  height: clamp(220px, 26vw, 330px);
  object-fit: contain;
  background: linear-gradient(180deg, #fffaf0, #f8ecd5);
}

.showcase-item.codex-media img,
.showcase-item.codex-media video {
  height: clamp(220px, 26vw, 330px);
  object-fit: contain;
  background: linear-gradient(180deg, #f5fbff, #e7f3ff);
}

.showcase-item.daycare-media img,
.showcase-item.daycare-media video {
  height: clamp(220px, 26vw, 330px);
  object-fit: contain;
  background: linear-gradient(180deg, #f8fff2, #ebf6e6);
}

.showcase-item.tuition-media img,
.showcase-item.tuition-media video {
  height: clamp(220px, 26vw, 330px);
  object-fit: contain;
  background: linear-gradient(180deg, #fff9ee, #f8eddc);
}

.showcase-body {
  padding: 0.62rem;
}

.showcase-body h3 {
  margin: 0;
  font-family: 'Baloo 2', cursive;
  font-size: 1.12rem;
}

.showcase-body p {
  margin: 0.28rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.76rem;
}

.feature-card {
  background: linear-gradient(180deg, rgba(255, 247, 223, 0.72), rgba(252, 236, 203, 0.62));
  backdrop-filter: blur(1.4px);
  -webkit-backdrop-filter: blur(1.4px);
}

.feature-card:nth-child(2n) {
  background: linear-gradient(180deg, rgba(234, 247, 255, 0.72), rgba(216, 238, 251, 0.62));
}

.feature-card:nth-child(3n) {
  background: linear-gradient(180deg, rgba(236, 248, 223, 0.72), rgba(223, 240, 201, 0.62));
}

.wall-grid {
  margin-top: 0.8rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.62rem;
}

.wall-card {
  background: linear-gradient(180deg, rgba(255, 250, 240, 0.72), rgba(255, 244, 223, 0.62));
  backdrop-filter: blur(1.4px);
  -webkit-backdrop-filter: blur(1.4px);
}

.signal-grid {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.62rem;
}

.signal-chip {
  border-radius: var(--radius-md);
  border: 1px solid rgba(228, 185, 116, 0.45);
  box-shadow: var(--shadow-card);
  background: linear-gradient(180deg, rgba(254, 252, 242, 0.72), rgba(248, 237, 211, 0.62));
  text-align: center;
  padding: 0.78rem;
  backdrop-filter: blur(1.4px);
  -webkit-backdrop-filter: blur(1.4px);
}

.signal-chip h3 {
  margin: 0;
  font-size: 1.6rem;
  font-family: 'Baloo 2', cursive;
  color: #db6a36;
}

.signal-chip p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.info-card {
  background: linear-gradient(180deg, rgba(255, 250, 240, 0.74), rgba(255, 242, 218, 0.64));
  backdrop-filter: blur(1.6px);
  -webkit-backdrop-filter: blur(1.6px);
}

.info-list {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.info-list li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.35rem;
  color: var(--ink-soft);
}

.info-list li::before {
  content: '';
  width: 7px;
  height: 7px;
  background: #ef7a3c;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0.46rem;
}

.visit-note {
  margin-top: 0.7rem;
  padding: 0.7rem 0.8rem;
  border-radius: 14px;
  border: 1px solid rgba(203, 161, 83, 0.26);
  background: rgba(255, 255, 255, 0.54);
  color: var(--ink-soft);
}

form {
  display: grid;
  gap: 0.45rem;
}

label {
  font-weight: 700;
  font-size: 0.93rem;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid rgba(194, 156, 94, 0.4);
  border-radius: 10px;
  padding: 0.55rem 0.62rem;
  font: inherit;
  background: rgba(255, 255, 255, 0.88);
}

textarea {
  min-height: 92px;
  resize: vertical;
}

.footer {
  margin-top: 1.3rem;
  padding: 1rem 0 1.4rem;
}

.footer-wrap {
  background: linear-gradient(180deg, rgba(255, 213, 109, 0.86), rgba(240, 190, 72, 0.76));
  border: 1px solid rgba(164, 118, 34, 0.23);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.7rem;
  align-items: center;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.footer-brand img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

.footer-brand h3 {
  margin: 0;
  font-family: 'Baloo 2', cursive;
  font-size: 1.34rem;
}

.footer-brand p {
  margin: 0;
  color: rgba(56, 39, 31, 0.8);
  font-size: 0.9rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.footer-links a {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(164, 118, 34, 0.2);
  border-radius: var(--radius-pill);
  padding: 0.34rem 0.72rem;
  font-size: 0.88rem;
  font-weight: 700;
}

.footer-note {
  justify-self: end;
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(58, 42, 35, 0.86);
  padding-inline: 0.3rem;
}

.decor-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-bottom: 0.28rem;
}

.decor-dots span {
  border-radius: var(--radius-pill);
  display: block;
  opacity: 0.9;
}

.decor-dots span:nth-child(1) {
  width: 26px;
  height: 8px;
  background: #f7bf58;
}

.decor-dots span:nth-child(2) {
  width: 16px;
  height: 6px;
  background: #6cc3e8;
}

.decor-dots span:nth-child(3) {
  width: 8px;
  height: 6px;
  background: #90c762;
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp 560ms ease forwards;
}

.reveal:nth-child(2) {
  animation-delay: 60ms;
}

.reveal:nth-child(3) {
  animation-delay: 120ms;
}

.reveal:nth-child(4) {
  animation-delay: 180ms;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1024px) {
  .inner-lego .lego-layout {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .inner-lego .lego-span-12,
  .inner-lego .lego-span-8 {
    grid-column: span 8;
  }

  .inner-lego .lego-span-7,
  .inner-lego .lego-span-6,
  .inner-lego .lego-span-5 {
    grid-column: span 4;
  }

  .inner-lego .lego-span-4 {
    grid-column: span 8;
  }

  .showcase-layout .showcase-gallery-block .showcase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .whatsapp-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .voices-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .progress-story-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lego-home {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .lego-hero,
  .lego-programs,
  .lego-gallery,
  .lego-cta {
    grid-column: span 8;
  }

  .lego-hero {
    grid-template-columns: 1fr;
  }

  .lego-welcome,
  .lego-reviews {
    grid-column: span 4;
  }

  .lego-gallery-mosaic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 220px;
  }

  .lego-cta {
    flex-direction: row;
    align-items: center;
  }

  .lego-cta .btn-row {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .showcase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wall-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .featured-grid,
  .reviews-row,
  .signal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .approach-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-panel,
  .page-banner,
  .program-block {
    grid-template-columns: 1fr;
  }

  .footer-wrap {
    grid-template-columns: 1fr;
  }

  .footer-note {
    justify-self: start;
  }

  .main-nav {
    gap: 0.26rem;
  }

  .main-nav a {
    padding: 0.48rem 0.72rem;
    font-size: 0.86rem;
  }

  .brand {
    min-width: 198px;
  }

  .brand img {
    width: 58px;
    height: 58px;
  }

  .brand-main {
    font-size: 1.2rem;
  }


  .about-banner {
    grid-template-columns: 1fr;
  }

  .about-banner .about-banner-mark {
    justify-self: start;
    width: min(100%, 360px);
  }

  .contact-hero {
    grid-template-columns: 1fr;
  }

  .contact-hero .hero-art {
    justify-self: center;
    max-width: min(100%, 460px);
  }

  .program-gallery {
    max-width: none;
    justify-self: stretch;
  }
}


@media (max-width: 768px) {
  .site-shell {
    width: 100%;
    padding-inline: 0.75rem;
  }

  .site-header {
    padding-top: 0.5rem;
  }

  .nav-wrap {
    padding: 0.35rem 0.45rem;
    min-height: 74px;
    gap: 0.5rem;
  }

  .nav-wrap::after {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
    margin-left: auto;
    flex-shrink: 0;
  }

  .main-nav {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0.7rem;
    left: 0.7rem;
    display: none;
    flex-direction: column;
    align-items: stretch;
    margin-top: 0;
    gap: 0.38rem;
    padding: 0.55rem;
    border-radius: 16px;
    border: 1px solid rgba(178, 127, 45, 0.26);
    background: linear-gradient(180deg, rgba(255, 244, 215, 0.96), rgba(255, 238, 202, 0.92));
    box-shadow: 0 12px 24px rgba(94, 68, 41, 0.2);
    z-index: 70;
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav a {
    text-align: center;
    background: rgba(255, 255, 255, 0.7);
    width: 100%;
    border-radius: 14px;
    padding: 0.68rem 0.95rem;
  }

  .main-nav::before {
    display: none;
  }

  .programs-layout .lego-tab-brick {
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 0.48rem;
    padding: 0.62rem 0.58rem 0.52rem;
  }

  .programs-layout .tab-chip {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.98rem;
    padding: 0.62rem 0.95rem;
  }

  .showcase-layout .filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 0.46rem;
    padding-bottom: 0.22rem;
  }

  .showcase-layout .filter-chip {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.96rem;
    padding: 0.54rem 0.88rem;
  }

  .hero-copy h1 {
    font-size: clamp(1.75rem, 7.8vw, 2.3rem);
  }

  .inner-lego .lego-layout {
    grid-template-columns: 1fr;
  }

  .inner-lego .lego-span-12,
  .inner-lego .lego-span-8,
  .inner-lego .lego-span-7,
  .inner-lego .lego-span-6,
  .inner-lego .lego-span-5,
  .inner-lego .lego-span-4 {
    grid-column: 1 / -1;
  }

  .inner-lego .hero-panel,
  .inner-lego .page-banner,
  .inner-lego .panel,
  .inner-lego .cta-band,
  .inner-lego .program-block,
  .inner-lego .info-card,
  .inner-lego .lego-tab-brick {
    border-radius: 20px;
    padding-top: 1.2rem;
  }

  .inner-lego .about-approach .approach-grid {
    grid-template-columns: 1fr;
  }

  .showcase-layout .showcase-gallery-block .showcase-grid,
  .voices-layout .voices-wall .wall-grid,
  .voices-photo-grid,
  .whatsapp-photo-grid,
  .progress-story-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy h2,
  .page-title {
    font-size: clamp(1.45rem, 6.5vw, 2rem);
  }

  .hero-copy p,
  .page-lead {
    font-size: 0.95rem;
  }

  .lego-home {
    grid-template-columns: 1fr;
  }

  .lego-brick {
    grid-column: 1 / -1;
    grid-row: auto;
    border-radius: 20px;
    padding: 0.9rem;
  }

  .lego-hero,
  .lego-welcome,
  .lego-programs,
  .lego-reviews,
  .lego-gallery,
  .lego-cta {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .lego-hero {
    grid-template-columns: 1fr;
  }

  .lego-program-grid {
    grid-template-columns: 1fr;
  }

  .lego-gallery-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 180px;
  }

  .lego-gallery-item.wide,
  .lego-gallery-item.tall {
    grid-column: span 1;
    grid-row: span 1;
  }

  .lego-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .lego-cta .btn-row {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .btn {
    padding: 0.58rem 0.95rem;
    font-size: 0.91rem;
  }

  .card-grid,
  .contact-grid,
  .split,
  .showcase-grid,
  .featured-grid,
  .reviews-row,
  .wall-grid,
  .signal-grid,
  .approach-grid,
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-tile {
    min-height: 170px;
  }

  .program-thumb {
    height: 152px;
  }

  .program-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: auto;
    height: auto;
    gap: 0.5rem;
    padding: 0.56rem;
  }

  .program-gallery .main-shot,
  .program-gallery .mini-shot {
    margin: 0;
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 0;
  }

  .program-gallery .main-shot img,
  .program-gallery .mini-shot img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    min-height: clamp(210px, 58vw, 320px);
    object-fit: cover;
    object-position: center;
  }

  .feature-list {
    grid-template-columns: 1fr;
  }

  .formal-logo-strip,
  .formal-contact-brand {
    flex-direction: column;
    align-items: flex-start;
  }

  .formal-logo-wordmark {
    width: min(100%, 320px);
  }

  .brand {
    min-width: unset;
    flex: 1;
    max-width: calc(100% - 58px);
  }

  .brand img {
    width: 52px;
    height: 52px;
  }

  .brand-main {
    font-size: 1.08rem;
  }

  .brand-sub {
    font-size: 0.66rem;
  }

  .panel,
  .hero-panel,
  .page-banner,
  .program-block,
  .cta-band {
    border-radius: 20px;
    padding: 0.9rem;
  }
}

.program-block.holiday-program .program-gallery .main-shot,
.program-block.holiday-program .program-gallery .mini-shot {
  background: rgba(225, 239, 251, 0.96);
}

.program-block.holiday-program .program-gallery .main-shot img,
.program-block.holiday-program .program-gallery .mini-shot img {
  object-fit: cover;
  object-position: center;
  image-orientation: from-image;
  transform: none;
  background: transparent;
}

.showcase-item.holiday-media img,
.showcase-item.holiday-media video {
  height: clamp(220px, 26vw, 330px);
  object-fit: cover !important;
  object-position: center !important;
  image-orientation: from-image;
  transform: none !important;
  background: transparent;
}

@media (max-width: 768px) {
  .programs-layout .lego-tab-brick {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    gap: 0.52rem !important;
    padding: 0.68rem 0.62rem 0.54rem !important;
    scroll-snap-type: x proximity;
  }

  .programs-layout .lego-tab-brick .tab-chip {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }

  .showcase-layout .filter-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    gap: 0.48rem !important;
    padding: 0 0 0.3rem !important;
    scroll-snap-type: x proximity;
  }

  .showcase-layout .filter-row .filter-chip {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }

  .programs-layout .program-gallery {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 0.56rem !important;
    padding: 0.62rem !important;
  }

  .programs-layout .program-gallery .main-shot,
  .programs-layout .program-gallery .mini-shot {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  .programs-layout .program-gallery .main-shot img,
  .programs-layout .program-gallery .mini-shot img {
    display: block !important;
    width: 100% !important;
    height: clamp(178px, 45vw, 250px) !important;
    min-height: 178px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .showcase-layout .showcase-item img,
  .showcase-layout .showcase-item video {
    height: clamp(190px, 52vw, 270px) !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}