.hero {
            position: relative;
            /* overflow: hidden; */
            /* background: var(--color-offwhite); */
            padding: var(--space-xl) var(--space-md) var(--space-2xl);
        }

        @media(max-width:768px){
            .hero{
                padding-top:1rem;
            }
        }

        .hero-inner {
            max-width: var(--max-width);
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1.15fr;
            align-items: center;
            gap: var(--space-xl);
            position: relative;
            z-index: 2;
        }

        .hero-copy {
            position: relative;
        }

        .hero-eyebrow {
            display: inline-block;
            background: var(--color-sage-light);
            color: var(--color-brown);
            font-family: var(--font-accent-tracking);
            font-weight: 700;
            font-size: var(--fs-small);
            letter-spacing: var(--letter-spacing-wide);
            text-transform: uppercase;
            padding: 6px 14px;
            border-radius: var(--radius-sm);
            margin-bottom: var(--space-sm);
        }

        .hero-title {
            font-size: var(--fs-h1);
            font-weight: 900;
            color: var(--color-heading);
            margin-bottom: var(--space-sm);
            /* line-height: .9; */
            letter-spacing: -2.5px;
        }

        .hero-text {
            color: var(--color-text-muted);
            max-width: 470px;
            margin-bottom: var(--space-md);
            font-size: 1.2rem;
            letter-spacing: -.7px;
        }

        .hero-cta {
            display: inline-block;
            font-weight: 800;
            border-radius: var(--radius-lg);
            padding: var(--space-sm) var(--space-lg);
            background: var(--color-cream);
            color: var(--color-brown);
        }

        .hero-cta:hover {
            background: var(--color-terracotta);
            color: var(--color-white);
        }

        .hero-doodle {
            position: absolute;
            opacity: .9;
        }

        .hero-doodle--bike {
            top: -40px;
            left: 10px;
        }

        .hero-doodle--rocket {
            bottom: -60px;
            left: -20px;
        }

        .hero-blob {
            position: absolute;
            border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
            z-index: 1;
        }

        .hero-blob--cream {
            width: 160px;
            height: 120px;
            background: var(--color-cream-light);
            top: -40px;
            left: 30%;
        }

        .hero-blob--terracotta {
            width: 140px;
            height: 110px;
            background: var(--color-terracotta-light);
            bottom: -30px;
            left: 5%;
        }

        .hero-blob--sage {
            width: 120px;
            height: 100px;
            background: var(--color-sage-light);
            bottom: 20px;
            right: 12%;
            opacity: .6;
        }

        .hero-carousel {
            position: relative;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            aspect-ratio: 4 / 3;
        }

        .hero-carousel__track {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .hero-carousel__slide {
            position: absolute;
            inset: 0;
            margin: 0;
            opacity: 0;
            transition: opacity var(--transition-medium);
        }

        .hero-carousel__slide.is-active {
            opacity: 1;
        }

        .hero-carousel__slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .hero-carousel__arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: var(--color-white);
            color: var(--color-brown);
            border: none;
            font-size: 1.2rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-sm);
            transition: background-color var(--transition-fast), color var(--transition-fast);
        }

        .hero-carousel__arrow:hover {
            background: var(--color-terracotta);
            color: var(--color-white);
        }

        .hero-carousel__arrow--prev {
            left: var(--space-sm);
        }

        .hero-carousel__arrow--next {
            right: var(--space-sm);
        }

        .hero-carousel__dots {
            position: absolute;
            bottom: var(--space-sm);
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 8px;
        }

        .hero-carousel__dots button {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            border: none;
            background: rgba(255, 255, 255, .6);
            cursor: pointer;
            transition: background-color var(--transition-fast), transform var(--transition-fast);
        }

        .hero-carousel__dots button.is-active {
            background: var(--color-terracotta);
            transform: scale(1.2);
        }

        .hero-wave {
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            width: 100%;
            height: 80px;
            z-index: 1;
            background: var(--color-cream-light)
        }

        @media (max-width: 900px) {
            .hero-inner {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .hero-text {
                margin-inline: auto;
            }

            .hero-doodle {
                display: none;
            }
        }
    






    
        .enroll-section {
            position: relative;
            background-color: var(--color-terracotta);
            padding: var(--space-2xl) var(--space-sm);
            overflow: hidden;
            text-align: center;
        }

        /* Wavy top edge blending into the section above */
        .enroll-wave-top {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background-color: var(--color-cream-light);
            clip-path: polygon(0% 0%,
                    0% 60%,
                    15% 90%,
                    35% 40%,
                    55% 100%,
                    75% 30%,
                    100% 70%,
                    100% 0%);
        }

        /* Wavy bottom edge blending into the section below */
        .enroll-wave-bottom {
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 50px;
            background-color: var(--color-cream-light);
            clip-path: polygon(0% 100%,
                    0% 40%,
                    20% 70%,
                    40% 20%,
                    60% 60%,
                    80% 15%,
                    100% 50%,
                    100% 100%);
        }

        .enroll-content {
            position: relative;
            z-index: 2;
            max-width: 700px;
            margin: 0 auto;
        }

        .enroll-title {
            font-family: var(--font-heading);
            font-size: var(--fs-h3);
            color: var(--color-white);
            font-weight: 800;
            margin-bottom: 0.2em;
        }

        .enroll-phone {
            font-family: var(--font-heading);
            font-size: var(--fs-h2);
            color: var(--color-white);
            font-weight: 800;
            margin-bottom: var(--space-md);
        }

        .enroll-btn {
            display: inline-block;
            background-color: var(--color-white);
            color: var(--color-primary);
            font-family: var(--font-body);
            font-weight: 700;
            font-size: var(--fs-small);
            text-decoration: none;
            padding: 0.6em 1.8em;
            border-radius: 999px;
            border: 2px dashed var(--color-sage-light);
            transition: background-color var(--transition-fast), transform var(--transition-fast);
        }

        .enroll-btn:hover {
            background-color: var(--color-cream-light);
            transform: translateY(-2px);
        }

        /* Decorative cloud shape, pure CSS, no image */
        .enroll-cloud {
            position: absolute;
            right: 8%;
            bottom: 10px;
            width: 90px;
            height: 40px;
            background-color: var(--color-white);
            border-radius: 40px;
            opacity: 0.9;
            z-index: 1;
        }

        .enroll-cloud::before,
        .enroll-cloud::after {
            content: "";
            position: absolute;
            background-color: var(--color-white);
            border-radius: 50%;
        }

        .enroll-cloud::before {
            width: 46px;
            height: 46px;
            top: -22px;
            left: 10px;
        }

        .enroll-cloud::after {
            width: 34px;
            height: 34px;
            top: -16px;
            right: 8px;
        }

        @media (max-width: 600px) {
            .enroll-title {
                font-size: 1.1rem;
            }

            .enroll-phone {
                font-size: 1.5rem;
            }

            .enroll-cloud {
                display: none;
            }
        }
    
    
        .pkg-section {
            background: var(--color-bg);
            padding: var(--space-2xl) var(--space-sm);
        }

        .pkg-container {
            max-width: var(--max-width);
            margin: 0 auto;
        }

        .pkg-header {
            text-align: center;
            max-width: 640px;
            margin: 0 auto var(--space-xl);
        }

        .pkg-eyebrow {
            display: inline-block;
            font-family: var(--font-accent-tracking);
            font-size: var(--fs-small);
            letter-spacing: var(--letter-spacing-wide);
            text-transform: uppercase;
            color: var(--color-secondary);
            margin-bottom: var(--space-xs);
        }

        .pkg-title {
            font-family: var(--font-heading);
            font-size: var(--fs-h1);
            line-height: var(--lh-heading);
            color: var(--color-primary);
            margin: 0 0 var(--space-sm);
        }

        .pkg-subtitle {
            font-family: var(--font-body);
            font-size: var(--fs-body);
            line-height: var(--lh-body);
            color: var(--color-text-muted);
            margin: 0;
        }

        .pkg-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-lg);
            align-items: start;
        }

        .pkg-card {
            position: relative;
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: var(--space-lg) var(--space-md) var(--space-md);
            box-shadow: var(--shadow-sm);
            transition: transform var(--transition-medium), box-shadow var(--transition-medium);
        }

        .pkg-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
        }

        .pkg-card--featured {
            border-color: var(--color-secondary);
            box-shadow: var(--shadow-lg);
            transform: translateY(-8px);
        }

        .pkg-card--featured:hover {
            transform: translateY(-12px);
        }

        .pkg-ribbon {
            position: absolute;
            top: calc(var(--space-md) * -1 + 6px);
            left: 50%;
            transform: translateX(-50%);
            background: var(--color-secondary);
            color: var(--color-white);
            font-family: var(--font-accent-tracking);
            font-size: var(--fs-small);
            letter-spacing: 0.04em;
            padding: 6px 18px;
            border-radius: 999px;
            box-shadow: var(--shadow-sm);
            white-space: nowrap;
        }

        .pkg-arch {
            width: 64px;
            height: 64px;
            margin: 0 auto var(--space-sm);
            border-radius: var(--radius-arch);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pkg-arch--sage {
            background: var(--color-sage-light);
            color: var(--color-sage-dark);
        }

        .pkg-arch--terracotta {
            background: var(--color-terracotta-light);
            color: var(--color-terracotta-dark);
        }

        .pkg-arch--wood {
            background: var(--color-cream-light);
            color: var(--color-wood);
        }

        .pkg-arch__icon {
            width: 30px;
            height: 30px;
        }

        .pkg-card__title {
            font-family: var(--font-heading);
            font-size: var(--fs-h3);
            color: var(--color-heading);
            text-align: center;
            margin: 0 0 var(--space-xs);
        }

        .pkg-badge {
            display: block;
            width: fit-content;
            margin: 0 auto var(--space-md);
            font-family: var(--font-body);
            font-size: var(--fs-small);
            font-weight: 600;
            padding: 4px 14px;
            border-radius: var(--radius-sm);
        }

        .pkg-badge--sage {
            background: var(--color-sage-light);
            color: var(--color-sage-dark);
        }

        .pkg-badge--terracotta {
            background: var(--color-terracotta-light);
            color: var(--color-terracotta-dark);
        }

        .pkg-badge--wood {
            background: var(--color-cream-light);
            color: var(--color-brown);
        }

        .pkg-list {
            list-style: none;
            margin: 0;
            padding: 0;
            border-top: 1px solid var(--color-border);
            padding-top: var(--space-sm);
        }

        .pkg-list li {
            position: relative;
            font-size: var(--fs-body);
            line-height: var(--lh-body);
            color: var(--color-text);
            padding: 6px 0 6px 28px;
        }

        .pkg-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 12px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--color-primary);
        }

        .pkg-card--featured .pkg-list li::before {
            background: var(--color-secondary);
        }

        .pkg-list__lead {
            font-weight: 700;
            color: var(--color-heading);
        }

        .pkg-extras {
            margin-top: var(--space-xl);
            background: var(--color-bg-alt);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: var(--space-lg);
        }

        .pkg-extras__header {
            margin-bottom: var(--space-md);
        }

        .pkg-extras__title {
            font-family: var(--font-heading);
            font-size: var(--fs-h3);
            color: var(--color-primary);
            margin: 0 0 4px;
        }

        .pkg-extras__subtitle {
            font-size: var(--fs-small);
            color: var(--color-text-muted);
            margin: 0;
        }

        .pkg-extras__grid {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-sm) var(--space-lg);
        }

        .pkg-extras__item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            font-size: var(--fs-body);
            color: var(--color-text);
        }

        .pkg-extras__item em {
            font-style: normal;
            color: var(--color-text-muted);
            font-size: var(--fs-small);
        }

        .pkg-extras__icon {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--color-secondary);
            color: var(--color-white);
            font-weight: 700;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        @media (max-width: 900px) {
            .pkg-grid {
                grid-template-columns: 1fr;
            }

            .pkg-card--featured {
                transform: none;
                order: -1;
            }

            .pkg-card--featured:hover {
                transform: translateY(-4px);
            }

            .pkg-extras__grid {
                grid-template-columns: 1fr;
            }
        }
    

    
        .why-section {
            padding: var(--space-2xl) var(--space-md);
            /* background-color: var(--color-bg); */
        }

        .why-container {
            max-width: var(--max-width);
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            gap: var(--space-xl);
            align-items: center;
        }

        /* Media column */
        .why-media {
            position: relative;
            isolation: isolate;
        }

        .why-media__frame {
            position: absolute;
            inset: -1.25rem var(--space-md) var(--space-md) -1.25rem;
            border: 2px solid var(--color-secondary);
            border-radius: var(--radius-md);
            z-index: -1;
        }

        .why-media__img {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: var(--radius-md);
            object-fit: cover;
            box-shadow: var(--shadow-lg);
        }

        /* Content column */
        .why-content {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
        }

        .why-title {
            font-family: var(--font-heading);
            font-size: var(--fs-h1);
            line-height: var(--lh-heading);
            font-weight: 900;
            margin: 0;
            color: var(--color-heading);
            letter-spacing: -2.5px;
        }

        .why-mark--terracotta {
            color: var(--color-secondary);
        }

        .why-mark--sage {
            color: var(--color-primary);
        }

        .why-block {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .why-block__title {
            font-family: var(--font-heading);
            font-size: var(--fs-h3);
            font-weight: 700;
            color: var(--color-heading);
            margin: 0;
        }

        .why-text {
            font-family: var(--font-body);
            font-size: var(--fs-body);
            line-height: var(--lh-body);
            color: var(--color-text);
            margin: 0;
            font-size: 1.2rem;
            letter-spacing: -.7px;
        }

        .why-text--note {
            font-style: italic;
            color: var(--color-secondary);
            font-size: var(--fs-small);
        }

        /* Chips */
        .why-chips {
            list-style: none;
            margin: var(--space-xs) 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;

        }

        .why-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.45rem 0.9rem;
            background-color: var(--color-sage-light);
            color: var(--color-gray-dark);
            font-family: var(--font-body);
            font-size: var(--fs-small);
            font-weight: 600;
            line-height: 1.3;
            border-radius: 999px;
            white-space: nowrap;
            transition: background-color var(--transition-fast), transform var(--transition-fast);
            font-size: 1.2rem;
            letter-spacing: -.7px;
        }

        .why-chip::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: var(--color-sage-dark);
            flex-shrink: 0;
        }

        .why-chip:hover {
            background-color: var(--color-cream-light);
            transform: translateY(-1px);
        }

        .why-cta {
            align-self: flex-start;
            margin-top: var(--space-xs);
            padding: 0.85rem 2rem;
            background-color: var(--color-secondary);
            color: var(--color-white);
            text-decoration: none;
            font-family: var(--font-body);
            font-weight: 600;
            border-radius: 999px;
            box-shadow: var(--shadow-sm);
            transition: background-color var(--transition-medium), transform var(--transition-medium);
        }

        .why-cta:hover {
            background-color: var(--color-secondary-hover);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        /* Responsive */
        @media (max-width: 900px) {
            .why-container {
                grid-template-columns: 1fr;
                gap: var(--space-lg);
            }

            .why-media__frame {
                inset: -1rem var(--space-sm) var(--space-sm) -1rem;
            }

            .why-chip {
                white-space: normal;
            }
        }
    
    
    .hero-cta {
            display: inline-block;
            font-weight: 800;
            border-radius: var(--radius-lg);
            padding: var(--space-sm) var(--space-lg);
            background: var(--color-cream);
            color: var(--color-brown);
        }

        .hero-cta:hover {
            background: var(--color-terracotta);
            color: var(--color-white);
        }
        
        /* ================= VISIT US / CLOSING CTA ================= */
.visit-cta {
  /* background: var(--color-white); */
  padding: var(--space-lg) var(--space-md);
}

.visit-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-2xl);
  align-items: center;
}

/* ---------- Copy ---------- */
.section-eyebrow {
  font-family: var(--font-accent-tracking);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-secondary);
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.visit-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--color-heading);
  margin-bottom: var(--space-lg);
  letter-spacing: -0.5px;
  font-weight: 900;
}

.visit-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--color-secondary);
  margin-bottom: var(--space-sm);
}

/* ---------- Tagline word-chain ---------- */
.visit-chain {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.visit-chain li {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--color-heading);
  position: relative;
  padding-right: var(--space-sm);
}

.visit-chain li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-terracotta);
}

.visit-closing {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ---------- Media ---------- */
.visit-media {
  position: relative;
  justify-self: center;
  width: min(420px, 100%);
}

.visit-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 6px solid var(--color-surface);
}

.visit-doodle {
  position: absolute;
  bottom: -18px;
  left: -18px;
  background: var(--color-surface);
  border-radius: 50%;
  padding: var(--space-xs);
  box-shadow: var(--shadow-sm);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .visit-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .visit-chain {
    justify-content: center;
  }

  .visit-media {
    order: -1;
  }
} /* ================= CAFÉ EXPERIENCE SECTION ================= */
.cafe {
  padding: var(--space-2xl) var(--space-md);
  /* background: var(--color-bg); */
}

.cafe-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-2xl);
  align-items: center;
}

/* ---------- Media, arch-shaped like the logo ---------- */
.cafe-media {
  position: relative;
  justify-self: center;
  width: min(420px, 100%);
}

.cafe-media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-arch);
  box-shadow: var(--shadow-lg);
  border: 6px solid var(--color-surface);
}

.cafe-doodle {
  position: absolute;
  bottom: -18px;
  right: -14px;
  background: var(--color-surface);
  border-radius: 50%;
  padding: var(--space-xs);
  box-shadow: var(--shadow-sm);
}

/* ---------- Copy ---------- */
.section-eyebrow {
  font-family: var(--font-accent-tracking);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-secondary);
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.section-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  color: var(--color-heading);
  margin-bottom: var(--space-md);
  font-weight: 900;
  letter-spacing: -2.5px;
}

.cafe-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  margin-bottom: var(--space-md);
  max-width: 480px;
  font-size: 1.2rem;
  letter-spacing: -0.7px;
}

.cafe-tagline {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--color-secondary);
  padding-left: var(--space-sm);
  border-left: 3px solid var(--color-cream);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cafe-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .cafe-tagline {
    border-left: none;
    border-top: 3px solid var(--color-cream);
    padding-left: 0;
    padding-top: var(--space-xs);
  }

  .cafe-text {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ================= MILESTONE SECTION ================= */
.stats-section {
  position: relative;
  /* background: var(--color-bg); */
  padding: var(--space-xl) 0;
  padding-top: 0;
}

/* ---------- Photo, shaped as one wavy silhouette ---------- */
.stats-photo {
  position: relative;
  width: 100%;
  height: 620px;
  clip-path: polygon(
    0% 9%,
    8% 4%,
    18% 7%,
    28% 3%,
    38% 6%,
    50% 2%,
    62% 6%,
    72% 3%,
    82% 7%,
    92% 4%,
    100% 9%,
    100% 91%,
    92% 96%,
    82% 93%,
    72% 97%,
    62% 94%,
    50% 98%,
    38% 94%,
    28% 97%,
    18% 93%,
    8% 96%,
    0% 91%
  );
}

.stats-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stats-photo__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(89, 63, 46, 0.55) 0%,
    rgba(89, 63, 46, 0.72) 45%,
    rgba(89, 63, 46, 0.55) 100%
  );
}

/* ---------- Content ---------- */
.stats-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-lg);
}

.section-eyebrow--light {
  font-family: var(--font-accent-tracking);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-cream);
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.stats-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--color-white);
  margin-bottom: var(--space-lg);
}

/* ---------- Milestone trail ---------- */
.stats-trail {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  max-width: 720px;
}

.stats-trail li {
  position: relative;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--color-white);
  padding-left: var(--space-md);
}

.stats-trail li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-cream);
}

.stats-trail li:first-child {
  padding-left: 0;
}

.stats-trail li:first-child::before {
  display: none;
}

.stats-closing {
  max-width: 480px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-cream-light);
  font-style: italic;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .stats-photo {
    height: 680px;
    clip-path: polygon(
      0% 5%,
      20% 2%,
      40% 5%,
      60% 2%,
      80% 5%,
      100% 3%,
      100% 97%,
      80% 95%,
      60% 98%,
      40% 95%,
      20% 98%,
      0% 95%
    );
  }

  .stats-trail {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .stats-trail li {
    padding-left: 0;
  }

  .stats-trail li::before {
    display: none;
  }
} /* ============ MISSION & VISION ============ */
.mission-vision {
  /* background: var(--color-bg); */
  padding: var(--space-2xl) var(--space-md);
  padding-top: 0;
}

.mission-vision__grid {
  max-width: var(--max-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.mv-card {
  background: var(--color-cream-light2);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-md);
  border: 2px dashed var(--color-border);
  transition:
    transform var(--transition-medium),
    box-shadow var(--transition-medium);
}
.mv-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.mv-card--mission {
  border-color: var(--color-sage);
}
.mv-card--vision {
  border-color: var(--color-terracotta);
}

.mv-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 1.6rem;
  margin-bottom: var(--space-md);
}
.mv-card--mission .mv-card__icon {
  background: rgba(110, 143, 90, 0.12);
  color: var(--color-sage-dark);
}
.mv-card--vision .mv-card__icon {
  background: rgba(217, 116, 85, 0.12);
  color: var(--color-terracotta-dark);
}

.mv-card h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  color: var(--color-heading);
  margin: 0 0 var(--space-sm);
}
.mv-card p {
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  color: var(--color-text);
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.7px;
}

@media (max-width: 780px) {
  .mission-vision__grid {
    grid-template-columns: 1fr;
  }
}

/* ============ SAFETY & HYGIENE ============ */
.safety-hygiene {
  /* background: var(--color-bg-alt); */
  padding: var(--space-2xl) var(--space-md);
}

.safety-hygiene__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.safety-hygiene__header h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  color: var(--color-heading);
  margin: 0 0 var(--space-xs);
  font-weight: 900;
}
.safety-hygiene__header p {
  font-size: var(--fs-h3);
  color: var(--color-text-muted);
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.7px;
}

.safety-hygiene__grid {
  max-width: var(--max-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.safety-card {
  background: var(--color-cream-light2);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-medium),
    box-shadow var(--transition-medium);
}
.safety-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.safety-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(239, 189, 110, 0.2);
  color: var(--color-wood);
  font-size: 1.4rem;
  margin-bottom: var(--space-sm);
}

.safety-card h4 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  color: var(--color-heading);
  margin: 0 0 6px;
}
.safety-card p {
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.7px;
}
.safety-hygiene__note {
  color: whitesmoke;
  text-align: center;
  background: var(--color-terracotta);
  padding: 11px;
  font-weight: 700;
  border-radius: 5px;
  max-width: var(--max-width);
  margin-inline: auto;
}

@media (max-width: 900px) {
  .safety-hygiene__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .safety-hygiene__grid {
    grid-template-columns: 1fr;
  }
}
/* ============ A PARENT'S IDEA ============ */
.parent-idea {
  position: relative;
  background: var(--color-gray-dark);
  padding: var(--space-2xl) var(--space-md);
  overflow: hidden;
}

.parent-idea::before,
.parent-idea::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 0;
  background-color: var(--color-gray-dark);
}

.parent-idea::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 1440px;
  height: 100px;
  background-color: var(--color-cream-light);
  clip-path: path('M0,0 C240,100 480,100 720,60 C960,20 1200,20 1440,60 L1440,0 Z');
}

.parent-idea::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 1440px;
  height: 100px;
  background-color: var(--color-cream-light);
  clip-path: path('M0,100 C240,0 480,0 720,40 C960,80 1200,80 1440,40 L1440,100 Z');
}

.parent-idea__grid {
  max-width: var(--max-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: var(--space-xl);
}

/* ---- image with blob accent ---- */
.parent-idea__media {
  position: relative;
  max-width: 500px;
  aspect-ratio: 1 / 1;
  justify-self: start;
}

.parent-idea__blob {
  position: absolute;
  inset: -6% -6% -6% 6%;
  background: var(--color-accent);
  border-radius: 42% 58% 55% 45% / 55% 45% 58% 42%;
  z-index: 1;
}

.parent-idea__photo {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 58% 42% 45% 55% / 45% 55% 42% 58%;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.parent-idea__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- text content ---- */
.parent-idea__content h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  color: var(--color-white);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-md);
  font-weight: 900;
}

.parent-idea__content p {
  color: var(--color-gray-light);
  margin: 0 0 var(--space-md);

  font-size: 1.2rem;
  letter-spacing: -0.7px;
}

.parent-idea__content p:last-child {
  margin-bottom: 0;
}

@media (max-width: 820px) {
  .parent-idea__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .parent-idea__media {
    justify-self: center;
    max-width: 260px;
    margin-bottom: var(--space-md);
  }

  .parent-idea__content p {
    text-align: left;
  }
}

.testimonials-section {
  position: relative;
  background-color: var(--color-bg-alt);
  padding: var(--space-2xl) var(--space-sm) var(--space-xl);
  overflow: hidden;
  padding-top: 0;
}

/* Decorative organic curved top shape (kid-friendly, cutting into the section above) */
.testimonials-bg-shape {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 90px;
  background-color: var(--color-cream-light);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transform: scaleX(1.3);
}

.testimonials-container {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
  z-index: 1;
}

.testimonials-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  color: var(--color-heading);
  font-weight: 900;
  margin-bottom: var(--space-sm);
}

.testimonials-title span {
  /* background-color: var(--color-terracotta-light); */
  padding: 0.1em 0.3em;
}

.testimonials-subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text-muted);
  max-width: 700px;
  margin: 0 auto var(--space-xl);
  line-height: var(--lh-body);
  font-size: 1.2rem;
    letter-spacing: -0.7px;
}

.testimonials-track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--space-sm);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.testimonials-track::-webkit-scrollbar {
  display: none;
}

.testimonial-card {
  flex: 0 0 85%;
  scroll-snap-align: center;
  text-align: left;
}

.bubble {
  position: relative;
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  box-shadow: var(--shadow-md);
  margin-bottom: 2.5rem;
}

/* Speech bubble tail */
.bubble::after {
  content: "";
  position: absolute;
  bottom: -18px;
  left: 40px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 16px 0 0;
}

.bubble-primary {
  background-color: var(--color-sage);
}

.bubble-primary::after {
  border-color: var(--color-sage) transparent transparent transparent;
}

.bubble-secondary {
  background-color: var(--color-terracotta);
}

.bubble-secondary::after {
  border-color: var(--color-terracotta) transparent transparent transparent;
}

.quote-icon {
  display: block;
  font-size: 2rem;
  line-height: 1;
  opacity: 0.5;
  margin-bottom: var(--space-xs);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-left: var(--space-sm);
}

.author-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
}

.author-name {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  color: var(--color-heading);
  font-weight: 700;
}

.author-role {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.testimonials-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-sm);
}

.testimonials-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background-color: var(--color-gray-light);
  cursor: pointer;
  padding: 0;
  transition:
    background-color var(--transition-fast),
    width var(--transition-fast);
}

.testimonials-dots button.active {
  background-color: var(--color-cream);
  width: 22px;
  border-radius: 999px;
}

/* Desktop: show 3 cards per row, no scrolling/dots needed */
@media (min-width: 900px) {
  .testimonial-card {
    flex: 0 0 calc(33.333% - var(--space-md) * 2 / 3);
  }

  .testimonials-dots {
    display: none;
  }
}

/* ============ FAQ ACCORDION ============ */
.faq-section {
  /* background: var(--color-bg); */
  padding: var(--space-2xl) var(--space-md);
  padding-top: 0;
}

.faq-section__inner {
  max-width: 850px;
  margin-inline: auto;
}

.faq-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.faq-header h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  color: var(--color-terracotta-dark);
  margin: 0 0 var(--space-xs);
}

.faq-header p {
  font-size: var(--fs-body);
  color: var(--color-text-muted);
  margin: 0;
  font-size: 1.2rem;
    letter-spacing: -0.7px;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq-item {
  background: var(--color-terracotta);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-medium);
}

.faq-item.is-open {
  box-shadow: var(--shadow-md);
}

.faq-item__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-white);
  text-align: left;
}

.faq-item__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 0.85rem;
  color: var(--color-white);
  transition: transform var(--transition-medium);
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(180deg);
}

.faq-item__body {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height var(--transition-medium),
    padding var(--transition-medium);
  padding: 0 var(--space-lg);
}

.faq-item.is-open .faq-item__body {
  max-height: 340px;
  padding: 0 var(--space-lg) var(--space-md);
}

.faq-item__body p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}

@media (max-width: 600px) {
  .faq-item__header {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--fs-h2);
  }

  .faq-item.is-open .faq-item__body {
    padding: 0 var(--space-md) var(--space-sm);
  }
}

/* ============ FOUR WORLDS OF PLAY ============ */
.worlds-section {
  /* background: var(--color-bg); */
  padding: var(--space-2xl) var(--space-md);
  padding-top: 0;
}

.worlds-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.worlds-header h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 900;
  color: var(--color-primary);
  margin: 0 0 var(--space-xs);
  letter-spacing: -2.5px;
}

.worlds-header p {
  font-size: var(--fs-h3);
  color: var(--color-text-muted);
  margin: 0;
}

.worlds-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  max-width: 1000px;
  margin-inline: auto;
}

.worlds-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-xl);
}

.worlds-row--reverse .worlds-row__media {
  order: 2;
}

.worlds-row--reverse .worlds-row__content {
  order: 1;
}

.worlds-row__media {
  aspect-ratio: 4 / 3;
  max-width: 380px;
  border-radius: 63% 37% 54% 46% / 43% 47% 53% 57%;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  justify-self: center;
}

.worlds-row--reverse .worlds-row__media {
  justify-self: end;
}

.worlds-row:not(.worlds-row--reverse) .worlds-row__media {
  justify-self: start;
}

.worlds-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.worlds-row__content h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  color: var(--color-primary);
  margin: 0 0 4px;
}

.worlds-row__tagline {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-secondary);
  margin: 0 0 var(--space-sm);
}

.worlds-row__desc {
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  /* color: var(--color-sage-dark); */
  margin: 0;
  max-width: 420px;
  font-size: 1.2rem;
  letter-spacing: -0.7px;
}

.worlds-row--reverse .worlds-row__content {
  text-align: right;
  margin-left: auto;
}

.worlds-row--reverse .worlds-row__desc {
  margin-left: auto;
}

@media (max-width: 780px) {
  .worlds-row,
  .worlds-row--reverse {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .worlds-row__media,
  .worlds-row--reverse .worlds-row__media {
    order: 1;
    justify-self: center;
    max-width: 280px;
  }

  .worlds-row__content,
  .worlds-row--reverse .worlds-row__content {
    order: 2;
    text-align: center;
    margin: 0 auto;
  }

  .worlds-row__desc,
  .worlds-row--reverse .worlds-row__desc {
    margin-inline: auto;
  }
}

.gallery-section {
  /* background-color: var(--color-bg); */
  padding: var(--space-2xl) var(--space-sm);
  padding-top: 0;
}

.gallery-container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.gallery-header {
  padding: 0.1em 0.3em;
}

.gallery-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  color: var(--color-heading);
  font-weight: 900;
  letter-spacing: -2.5px;
}

.gallery-subtitle {
  font-size: var(--fs-h3);
}

.gallery-btn {
  display: inline-block;
  background-color: var(--color-cream);
  color: var(--color-brown);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-small);
  text-decoration: none;
  padding: 0.7em 1.6em;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast);
  white-space: nowrap;
}

.gallery-btn:hover {
  background-color: var(--color-terracotta);
  color: var(--color-white);
  transform: translateY(-2px);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.gallery-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 1 / 1;
  padding: 0.4rem;
  background-color: var(--color-white);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-medium);
  border-radius: 20px;
}

.gallery-item:hover img {
  transform: scale(1.08);
}

@media (max-width: 768px) {
  .gallery-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

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

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ PAGE BANNER ============ */
.page-banner {
  position: relative;
  background: var(--color-cream-light);
  padding: var(--space-2xl) var(--space-md) var(--space-2xl);
  text-align: center;
  overflow: hidden;
  position: relative;
  background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35));
  
}

.page-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 60px;
  background: var(--color-cream-light);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: scaleX(1.4);
}

.page-banner__content {
  position: relative;
  z-index: 2;
}

.page-banner h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  color: var(--color-cream-light2);
  margin: 0 0 var(--space-xs);
  font-weight: 900;
}

.breadcrumb {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-cream-light2);
  font-weight: 700;
}

.breadcrumb a {
  color: var(--color-cream-light);
}

.breadcrumb span {
  margin: 0 4px;
}

.page-banner__doodles {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.doodle {
  position: absolute;
  width: 90px;
  height: auto;
  opacity: 0.9;
}

.doodle--bear {
  top: 10px;
  left: 6%;
  color: var(--color-sage);
  width: 100px;
}

.doodle--dino {
  top: 20px;
  right: 8%;
  color: var(--color-cream);
  width: 130px;
}

.doodle--cloud {
  top: 8px;
  right: 2%;
  color: var(--color-sage-light);
  width: 110px;
}

@media (max-width: 900px) {
  .doodle {
    display: none;
  }
}

.pkg-section {
  background: var(--color-bg);
  padding: var(--space-2xl) var(--space-sm);
}

.pkg-container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.pkg-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-xl);
}

.pkg-eyebrow {
  display: inline-block;
  font-family: var(--font-accent-tracking);
  font-size: var(--fs-small);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: var(--space-xs);
}

.pkg-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  color: var(--color-primary);
  margin: 0 0 var(--space-sm);
}

.pkg-subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin: 0;
}

.pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  align-items: start;
}

.pkg-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-medium),
    box-shadow var(--transition-medium);
}

.pkg-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.pkg-card--featured {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px);
}

.pkg-card--featured:hover {
  transform: translateY(-12px);
}

.pkg-ribbon {
  position: absolute;
  top: calc(var(--space-md) * -1 + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-secondary);
  color: var(--color-white);
  font-family: var(--font-accent-tracking);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  padding: 6px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.pkg-arch {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-sm);
  border-radius: var(--radius-arch);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pkg-arch--sage {
  background: var(--color-sage-light);
  color: var(--color-sage-dark);
}

.pkg-arch--terracotta {
  background: var(--color-terracotta-light);
  color: var(--color-terracotta-dark);
}

.pkg-arch--wood {
  background: var(--color-cream-light);
  color: var(--color-wood);
}

.pkg-arch__icon {
  width: 30px;
  height: 30px;
}

.pkg-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--color-heading);
  text-align: center;
  margin: 0 0 var(--space-xs);
}

.pkg-badge {
  display: block;
  width: fit-content;
  margin: 0 auto var(--space-md);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 4px 14px;
  border-radius: var(--radius-sm);
}

.pkg-badge--sage {
  background: var(--color-sage-light);
  color: var(--color-sage-dark);
}

.pkg-badge--terracotta {
  background: var(--color-terracotta-light);
  color: var(--color-terracotta-dark);
}

.pkg-badge--wood {
  background: var(--color-cream-light);
  color: var(--color-brown);
}

.pkg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-sm);
}

.pkg-list li {
  position: relative;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  padding: 6px 0 6px 28px;
}

.pkg-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

.pkg-card--featured .pkg-list li::before {
  background: var(--color-secondary);
}

.pkg-list__lead {
  font-weight: 700;
  color: var(--color-heading);
}

.pkg-extras {
  margin-top: var(--space-xl);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.pkg-extras__header {
  margin-bottom: var(--space-md);
}

.pkg-extras__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--color-primary);
  margin: 0 0 4px;
}

.pkg-extras__subtitle {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin: 0;
}

.pkg-extras__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm) var(--space-lg);
}

.pkg-extras__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-body);
  color: var(--color-text);
}

.pkg-extras__item em {
  font-style: normal;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.pkg-extras__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-secondary);
  color: var(--color-white);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  .pkg-grid {
    grid-template-columns: 1fr;
  }

  .pkg-card--featured {
    transform: none;
    order: -1;
  }

  .pkg-card--featured:hover {
    transform: translateY(-4px);
  }

  .pkg-extras__grid {
    grid-template-columns: 1fr;
  }
}


/* Animation engine */
[data-animate]{opacity:0;transition:opacity .7s ease,transform .7s ease;will-change:transform,opacity}
[data-animate="fade-up"]{transform:translateY(50px)}
[data-animate="fade-down"]{transform:translateY(-50px)}
[data-animate="fade-left"]{transform:translateX(-60px)}
[data-animate="fade-right"]{transform:translateX(60px)}
[data-animate="zoom-in"]{transform:scale(.85)}
[data-animate].is-visible{opacity:1;transform:none}

/* Optional stagger for grids like gallery/worlds */
[data-animate-delay="1"]{transition-delay:.12s}
[data-animate-delay="2"]{transition-delay:.24s}
[data-animate-delay="3"]{transition-delay:.36s}
[data-animate-delay="4"]{transition-delay:.48s}
[data-animate-delay="5"]{transition-delay:.6s}
[data-animate-delay="6"]{transition-delay:.72s}

@media (prefers-reduced-motion:reduce){
  [data-animate]{transition:none;opacity:1;transform:none}
}