.elementor-67 .elementor-element.elementor-element-3bcf9f6e{--display:flex;--overflow:visible;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS */:root{
    --bg: #F8F5EC;
    --bg-mint: #EAEDE1;
    --bg-sky: #E7ECF1;
    --bg-coral: #F6E7E1;
    --bg-lavender: #F2EEE0;
    --bg-peach: #ECEFE3;
    --bg-white: #FFFFFF;

    --ink: #222222;
    --ink-2: #3C5A77;
    --muted: #77808A;

    --yellow: #3C5A77;
    --yellow-deep: #222222;
    --coral: #C97A67;
    --coral-deep: #A85E4C;
    --sky: #6E88A3;
    --sky-deep: #3C5A77;
    --mint: #8D9574;
    --mint-deep: #5F6A4C;
    --lavender: #A9B08F;
    --lavender-deep: #6E7657;
    --peach: #E9C4B4;

    --f-display: "Fredoka", ui-rounded, system-ui, sans-serif;
    --f-body: "Nunito", ui-sans-serif, system-ui, sans-serif;
    --f-hand: "Kalam", cursive;
    --f-ar: "Cairo", ui-sans-serif, sans-serif;

    --max: 1280px;
    --gutter: 24px;
    --radius-lg: 36px;
    --radius-md: 24px;
    --radius-sm: 16px;
  }
  *{ box-sizing: border-box; margin: 0; padding: 0; }
  html{ scroll-behavior: smooth; }
  body{
    background: var(--bg);
    color: var(--ink);
    font-family: var(--f-body);
    font-weight: 600;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img{ max-width: 100%; display: block; }
  a{ color: inherit; text-decoration: none; }

  .wrap{ max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); position: relative; }

  /* ========== ANNOUNCE ========== */
  .announce{
    background: var(--coral);
    color: #FFFFFF;
    padding: 12px 0;
  }
  .announce .inner{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.02em;
    flex-wrap: wrap;
    padding: 0 var(--gutter);
  }
  .announce a{
    color: #FFFFFF;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600;
  }

  /* ========== NAV ========== */
  header.nav{
    position: sticky;
    top: 0; z-index: 100;
    background: rgba(248,245,236,0.94);
    backdrop-filter: saturate(1.3) blur(12px);
    -webkit-backdrop-filter: saturate(1.3) blur(12px);
    padding: 12px 0;
    transition: padding .3s ease, box-shadow .3s ease;
  }
  .nav .wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .brand{ display: flex; align-items: center; gap: 14px; text-decoration: none; }
  .brand-logo-img{
    height: 48px;
    width: auto;
    display: block;
    transition: transform .3s ease;
  }
  .brand:hover .brand-logo-img{ transform: scale(1.05) rotate(-2deg); }
  .brand .logomark{
    width: 52px; height: 52px;
    border-radius: 18px;
    background: var(--yellow);
    display: grid; place-items: center;
    color: #FFFFFF;
    box-shadow: 0 5px 0 var(--yellow-deep);
    transform: rotate(-6deg);
    transition: transform .2s ease;
  }
  .brand:hover .logomark{ transform: rotate(6deg) scale(1.05); }
  .brand .mark{
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.01em;
    color: var(--ink);
    line-height: 1;
  }
  .brand .mark .accent{ color: var(--coral); }
  .brand .sub{
    font-family: var(--f-hand);
    font-size: 14px;
    color: var(--muted);
    font-weight: 700;
    margin-top: 2px;
    transform: rotate(-2deg);
    display: inline-block;
  }

  .primary-nav{
    display: flex;
    gap: 6px;
    font-family: var(--f-display);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .primary-nav a{
    padding: 10px 18px;
    border-radius: 999px;
    color: var(--ink-2);
    transition: all .2s;
  }
  .primary-nav a:hover{ background: var(--bg-coral); color: var(--coral-deep); }
  .primary-nav a[aria-current="page"]{ background: var(--ink); color: var(--bg); }
  .primary-nav a.active{ background: var(--yellow); color: #FFFFFF; box-shadow: 0 3px 0 var(--yellow-deep); }

  /* Anchored sections clear the fixed header */
  section[id], div[id].final-cta{ scroll-margin-top: 110px; }

  .nav-cta{
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--coral);
    color: white;
    padding: 14px 24px;
    border-radius: 999px;
    font-family: var(--f-display);
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 5px 0 var(--coral-deep);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .nav-cta:hover{ transform: translateY(-2px); box-shadow: 0 7px 0 var(--coral-deep); }
  .nav-cta:active{ transform: translateY(3px); box-shadow: 0 2px 0 var(--coral-deep); }

  /* ========== HERO ========== */
  .hero{
    padding: 40px 0 140px;
    position: relative;
    overflow: hidden;
  }
  /* Soft color washes behind everything */
  .hero::before{
    content: "";
    position: absolute;
    top: -10%; left: -10%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(201, 122, 103, 0.45), transparent 65%);
    filter: blur(70px);
    z-index: 0;
    animation: washDrift 14s ease-in-out infinite;
  }
  .hero::after{
    content: "";
    position: absolute;
    bottom: -15%; right: -5%;
    width: 550px; height: 550px;
    background: radial-gradient(circle, rgba(110, 136, 163, 0.4), transparent 65%);
    filter: blur(80px);
    z-index: 0;
    animation: washDrift 18s ease-in-out infinite reverse;
  }
  @keyframes washDrift{
    0%,100%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(40px, 30px) scale(1.1); }
  }

  .hero .float{ position: absolute; z-index: 1; transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
  .float.f1{ top: 30px; left: 5%; }
  .float.f1 svg{ animation: bob 4s ease-in-out infinite; }
  .float.f2{ top: 100px; right: 4%; }
  .float.f2 svg{ animation: bob 5s ease-in-out infinite 1s; }
  .float.f3{ bottom: 120px; left: 42%; }
  .float.f3 svg{ animation: bob 6s ease-in-out infinite 2s; }
  .float.f4{ top: 50%; left: 3%; }
  .float.f4 svg{ animation: spin 20s linear infinite; }
  @keyframes bob{
    0%,100%{ transform: translateY(0) rotate(-4deg); }
    50%{ transform: translateY(-14px) rotate(4deg); }
  }
  @keyframes spin{ from{ transform: rotate(0); } to{ transform: rotate(360deg); } }

  .hero-grid{
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
  }

  .hero-tag{
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--bg-white);
    padding: 10px 18px;
    border-radius: 999px;
    font-family: var(--f-display);
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 3px 0 rgba(34,34,34,0.08);
    color: var(--ink);
  }
  .hero-tag .wave{ display: inline-block; animation: wave 2s ease-in-out infinite; transform-origin: 70% 70%; }
  @keyframes wave{
    0%,100%{ transform: rotate(0); }
    25%{ transform: rotate(-15deg); }
    75%{ transform: rotate(15deg); }
  }

  .hero-title{
    margin-top: 24px;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(52px, 8vw, 108px);
    line-height: 0.98;
    letter-spacing: -0.03em;
    color: var(--ink);
  }
  /* Bouncy spring reveal */
  .hero-title .split-word{
    display: inline-block;
    opacity: 0;
    transform: translateY(90px) rotate(8deg) scale(0.8);
    animation: springIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    margin-right: 0.15em;
  }
  @keyframes springIn{
    60%{ opacity: 1; transform: translateY(-12px) rotate(-3deg) scale(1.05); }
    80%{ transform: translateY(4px) rotate(1deg) scale(0.99); }
    100%{ opacity: 1; transform: translateY(0) rotate(0) scale(1); }
  }
  /* Interactive letters: jump on hover */
  .jump-letter{
    display: inline-block;
    transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), color .25s;
  }
  /* Loop through the three brand colors, letter by letter */
  .jump-letter.jl0:hover{ color: #C97A67; }  /* muted coral */
  .jump-letter.jl1:hover{ color: #8D9574; }  /* seaweed green */
  .jump-letter.jl2:hover{ color: #6E88A3; }  /* free spirit */
  .jump-letter:hover{
    transform: translateY(-14px) rotate(-8deg) scale(1.15);
  }
  .hero-title .yellow{
    color: var(--ink);
    position: relative;
    display: inline-block;
    z-index: 1;
  }
  .hero-title .yellow::before{
    content: "";
    position: absolute;
    left: -8px; right: -8px; top: 20%; bottom: 5%;
    background: #C97A67;
    z-index: -1;
    border-radius: 12px;
    transform: rotate(-1.5deg);
    animation: hlPulse 3s ease-in-out infinite;
  }
  @keyframes hlPulse{
    0%,100%{ transform: rotate(-1.5deg) scale(1); }
    50%{ transform: rotate(-2.5deg) scale(1.04); }
  }
  .hero-title .sky{
    color: var(--sky-deep);
    display: inline-block;
  }
  .hero-title .under{
    position: relative;
    display: inline-block;
  }
  .hero-title .under::after{
    content: "";
    position: absolute; left: 0; right: 0; bottom: -4px;
    height: 12px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'><path d='M0 8 Q 15 -1 30 6 T 60 6 T 100 6' fill='none' stroke='%23D68F7C' stroke-width='4' stroke-linecap='round'/></svg>") repeat-x;
    background-size: 100px 12px;
  }

  /* WORD SWAP: the star of the hero */
  .swap-box{
    display: inline-grid;
    vertical-align: baseline;
    overflow: hidden;
    height: 1.02em;
    text-align: left;
    position: relative;
    transition: width .5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .swap-word{
    grid-area: 1/1;
    display: inline-block;
    color: var(--coral);
    transform: rotate(-2deg) translateY(110%);
    opacity: 0;
    transition: transform .55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .3s;
    white-space: nowrap;
  }
  .swap-word.active{
    transform: rotate(-2deg) translateY(0);
    opacity: 1;
  }
  .swap-word.leaving{
    transform: rotate(-2deg) translateY(-110%);
    opacity: 0;
  }
  .swap-word.w2{ color: var(--sky-deep); }
  .swap-word.w3{ color: var(--mint-deep); }
  .swap-word.w4{ color: var(--lavender-deep); }

  .hero-ar{
    margin-top: 20px;
    font-family: var(--f-ar);
    font-size: clamp(22px, 2.6vw, 34px);
    color: var(--ink-2);
    direction: rtl;
    font-weight: 700;
  }

  .hero-lede{
    margin-top: 26px;
    font-size: 18px;
    color: var(--ink-2);
    line-height: 1.65;
    max-width: 42ch;
    font-weight: 600;
  }

  .hero-actions{
    margin-top: 34px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
  }
  .btn{
    display: inline-flex; align-items: center; gap: 10px;
    padding: 18px 30px;
    border-radius: 999px;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 17px;
    transition: transform .15s ease, box-shadow .15s ease;
    cursor: pointer;
    border: none;
  }
  .btn-primary{
    background: var(--ink);
    color: white;
    box-shadow: 0 5px 0 #222222;
    position: relative;
    overflow: visible;
  }
  .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 7px 0 #222222; }
  .btn-primary:active{ transform: translateY(3px); box-shadow: 0 2px 0 #222222; }
  /* Wiggle to attract the eye every few seconds */
  .btn-attention{
    animation: btnWiggle 5s ease-in-out infinite;
  }
  @keyframes btnWiggle{
    0%, 90%, 100%{ transform: rotate(0); }
    92%{ transform: rotate(-2.5deg) scale(1.03); }
    94%{ transform: rotate(2.5deg) scale(1.03); }
    96%{ transform: rotate(-1.5deg); }
    98%{ transform: rotate(1.5deg); }
  }
  .btn-white{
    background: white;
    color: var(--ink);
    box-shadow: 0 5px 0 rgba(34,34,34,0.15);
  }
  .btn-white:hover{ transform: translateY(-2px); box-shadow: 0 7px 0 rgba(34,34,34,0.2); }

  /* Hero CTAs: seaweed green + muted coral, no brown/white */
  .btn-hero-primary{
    background: var(--mint);
    color: #FFFFFF;
    box-shadow: 0 5px 0 var(--mint-deep);
    position: relative;
    overflow: visible;
  }
  .btn-hero-primary:hover{ transform: translateY(-2px); box-shadow: 0 7px 0 #4C5836; background: var(--mint-deep); }
  .btn-hero-primary:active{ transform: translateY(3px); box-shadow: 0 2px 0 #4C5836; }
  .btn-hero-secondary{
    background: var(--coral);
    color: #FFFFFF;
    box-shadow: 0 5px 0 var(--coral-deep);
  }
  .btn-hero-secondary:hover{ transform: translateY(-2px); box-shadow: 0 7px 0 var(--coral-deep); background: var(--coral-deep); }
  .btn-hero-secondary:active{ transform: translateY(3px); box-shadow: 0 2px 0 var(--coral-deep); }

  /* Final CTA buttons on coral gradient */
  .btn-cta-green{
    background: #3C5A77;
    color: #FFFFFF;
    box-shadow: 0 5px 0 #222222;
  }
  .btn-cta-green:hover{ transform: translateY(-2px); box-shadow: 0 7px 0 #222222; }
  .btn-cta-green:active{ transform: translateY(3px); box-shadow: 0 2px 0 #222222; }
  .btn-cta-white{
    background: #FFFFFF;
    color: var(--coral-deep);
    box-shadow: 0 5px 0 rgba(0,0,0,0.18);
  }
  .btn-cta-white:hover{ transform: translateY(-2px); box-shadow: 0 7px 0 rgba(0,0,0,0.22); }
  .btn-cta-white:active{ transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,0.18); }
  .btn .arr{ transition: transform .2s ease; }
  .btn:hover .arr{ transform: translateX(4px); }

  .hero-hand{
    font-family: var(--f-hand);
    font-size: 24px;
    color: var(--coral);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transform: rotate(-3deg);
    font-weight: 700;
  }

  /* Hero visual */
  .hero-visual{ position: relative; padding: 30px; }
  .hero-blob{
    position: absolute;
    inset: 0;
    background: var(--coral);
    border-radius: 40% 60% 55% 45% / 55% 45% 55% 45%;
    animation: morph 10s ease-in-out infinite;
    z-index: 0;
  }
  @keyframes morph{
    0%,100%{ border-radius: 40% 60% 55% 45% / 55% 45% 55% 45%; }
    33%{ border-radius: 55% 45% 40% 60% / 45% 55% 45% 55%; }
    66%{ border-radius: 45% 55% 60% 40% / 60% 40% 55% 45%; }
  }
  /* Dashed rotating ring around the photo */
  .photo-ring{
    position: absolute;
    inset: -14px;
    border: 3px dashed var(--yellow-deep);
    border-radius: 50%;
    animation: spin 30s linear infinite;
    z-index: 1;
    opacity: 0.7;
  }
  /* Orbiting smiling star */
  .orbit-wrap{
    position: absolute;
    inset: -30px;
    animation: spin 14s linear infinite;
    z-index: 3;
    pointer-events: none;
  }
  .orbit-star{
    position: absolute;
    top: -6px; left: 50%;
    width: 52px; height: 52px;
    transform: translateX(-50%);
    filter: drop-shadow(0 4px 10px rgba(201, 122, 103, 0.5));
  }
  .orbit-star svg{ animation: spinReverse 14s linear infinite; }
  @keyframes spinReverse{ from{ transform: rotate(0); } to{ transform: rotate(-360deg); } }

  .hero-photo{
    position: relative;
    z-index: 2;
    aspect-ratio: 4/5;
    border-radius: 46% 54% 42% 58% / 48% 42% 58% 52%;
    overflow: hidden;
    background: linear-gradient(160deg, #3C5A77 0%, #E9C4B4 50%, #C97A67 100%);
    box-shadow: 0 30px 60px -20px rgba(34,34,34,0.3);
    animation: photoMorph 12s ease-in-out infinite;
    transition: transform .5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .hero-visual:hover .hero-photo{ transform: scale(1.03) rotate(1deg); }
  @keyframes photoMorph{
    0%,100%{ border-radius: 46% 54% 42% 58% / 48% 42% 58% 52%; }
    50%{ border-radius: 54% 46% 58% 42% / 42% 58% 42% 58%; }
  }

  /* Wave divider at hero bottom */
  .hero-wave{
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    z-index: 4;
    line-height: 0;
  }
  .hero-wave svg{ display: block; width: 100%; height: 70px; }

  /* Bouncing scroll indicator */
  .scroll-bounce{
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: var(--f-hand);
    font-weight: 700;
    font-size: 17px;
    color: var(--ink-2);
    animation: scrollBounce 2s ease-in-out infinite;
  }
  @keyframes scrollBounce{
    0%,100%{ transform: translateX(-50%) translateY(0); }
    50%{ transform: translateX(-50%) translateY(-10px); }
  }
  .scroll-bounce .arrow-down{
    width: 32px; height: 32px;
    background: var(--yellow);
    color: #FFFFFF;
    border: 2px solid var(--ink);
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 3px 0 var(--ink);
    font-size: 16px;
  }

  .hero-photo img, .p-visual .photo img, .age-photo img, .facility img, .portrait img, .teacher-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .facility img { position: absolute; inset: 0; z-index: 0; }
  .teacher-photo {
    width: 100px; height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 16px;
    box-shadow: 0 4px 0 rgba(34,34,34,0.15);
  }
  .teacher-photo.c1{ background: var(--coral); }
  .teacher-photo.c2{ background: var(--sky); }
  .teacher-photo.c3{ background: var(--mint); }
  .teacher-photo.c4{ background: var(--lavender); }

  .sticker{
    position: absolute;
    background: white;
    padding: 12px 16px;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(34,34,34,0.15);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: bob 5s ease-in-out infinite;
  }
  .sticker.st1{ top: 30px; left: -20px; transform: rotate(-6deg); animation-delay: 0s; }
  .sticker.st2{ top: 40%; right: -30px; transform: rotate(4deg); animation-delay: 1.5s; }
  .sticker.st3{ bottom: 40px; left: 20px; transform: rotate(-3deg); animation-delay: 3s; }
  .sticker .emoji{
    width: 44px; height: 44px;
    border-radius: 14px;
    display: grid; place-items: center;
    background: var(--bg-mint);
  }
  .sticker.st2 .emoji{ background: var(--bg-coral); }
  .sticker.st3 .emoji{ background: var(--bg-lavender); }
  .sticker .label{
    font-size: 10px;
    color: var(--muted);
    font-family: var(--f-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1;
  }
  .sticker .val{
    font-family: var(--f-display);
    font-size: 18px;
    color: var(--ink);
    font-weight: 700;
    line-height: 1.1;
    margin-top: 3px;
  }

  /* ========== TRUST BAR ========== */
  .trust-bar{
    background: white;
    padding: 40px 0;
    border-top: 4px solid var(--yellow);
    border-bottom: 4px solid var(--coral);
  }
  .trust-bar .wrap{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    align-items: center;
  }
  .trust-stat{
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    padding-left: 24px;
  }
  .trust-stat::before{
    content: "";
    position: absolute;
    left: 0; top: 8px;
    width: 4px; height: 40px;
    background: var(--yellow);
    border-radius: 4px;
  }
  .trust-stat:nth-child(2)::before{ background: var(--coral); }
  .trust-stat:nth-child(3)::before{ background: var(--sky); }
  .trust-stat:nth-child(4)::before{ background: var(--mint); }
  .stat-num{
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 48px;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ink);
  }
  .stat-lbl{
    font-family: var(--f-display);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
  }
  @media (max-width: 768px){
    .trust-bar .wrap{ grid-template-columns: 1fr 1fr; gap: 20px; }
    .stat-num{ font-size: 36px; }
  }

  /* ========== MARQUEE ========== */
  .marquee{
    background: var(--sky);
    color: #FFFFFF;
    padding: 22px 0;
    overflow: hidden;
    position: relative;
  }
  .marquee-track{
    display: flex;
    gap: 40px;
    white-space: nowrap;
    animation: scroll 30s linear infinite;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 32px;
    letter-spacing: -0.02em;
  }
  .marquee-track span{ display: inline-flex; align-items: center; gap: 40px; }
  .marquee-track .dot{ color: #FFFFFF; font-size: 20px; }
  .marquee-track .outline{
    -webkit-text-stroke: 1.5px #FFFFFF;
    color: transparent;
    letter-spacing: -0.02em;
  }
  @keyframes scroll{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }

  /* ========== WAVY DIVIDERS ========== */
  .wave-divider{
    display: block;
    width: 100%;
    height: 60px;
    margin: 0;
  }

  /* ========== SECTIONS ========== */
  section{ padding: 100px 0; position: relative; }

  .section-tag{
    text-align: center;
    margin-bottom: 20px;
  }
  .section-tag .pill{
    display: inline-flex; align-items: center; gap: 10px;
    background: white;
    padding: 12px 24px;
    border-radius: 999px;
    font-family: var(--f-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    box-shadow: 0 3px 0 rgba(34,34,34,0.1);
  }

  .section-title{
    text-align: center;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(40px, 5.5vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--ink);
    max-width: 22ch;
    margin: 0 auto;
  }
  .section-title .yellow-hl{
    position: relative;
    display: inline-block;
    z-index: 1;
    color: #FFFFFF;
  }
  .section-title .yellow-hl::before{
    content: ""; position: absolute;
    left: -6px; right: -6px; top: 25%; bottom: 5%;
    background: #426B82;
    z-index: -1; border-radius: 10px;
    transform: rotate(-1deg);
  }
  .section-title .coral-txt{ color: var(--coral); transform: rotate(-1.5deg); display: inline-block; }
  .philosophy .section-title .coral-txt{ color: #8d9574; }
  .section-title .sky-txt{ color: var(--sky-deep); }
  .section-title .mint-txt{ color: #C97A67; }
  .section-title .lav-txt{ color: var(--lavender-deep); }

  .section-lede{
    text-align: center;
    font-size: 18px;
    color: var(--ink-2);
    max-width: 54ch;
    margin: 24px auto 0;
    line-height: 1.65;
    font-weight: 600;
  }

  /* ========== PHILOSOPHY (peach bg) ========== */
  .philosophy{
    background: var(--bg-peach);
    padding-top: 0;
    padding-bottom: 0;
  }
  .philosophy .inner{ padding: 110px 0 130px; position: relative; }
  .philosophy .fl1{ position: absolute; top: 60px; right: 6%; animation: bob 6s infinite; }
  .philosophy .fl2{ position: absolute; bottom: 80px; left: 4%; animation: bob 7s infinite 1s; }

  .philosophy-grid{
    margin-top: 72px;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 70px;
    align-items: center;
  }
  .p-visual{
    position: relative;
    aspect-ratio: 1/1;
  }
  .p-visual .bg{
    position: absolute; inset: 0;
    background: var(--mint);
    border-radius: 50%;
    z-index: 0;
  }
  .p-visual .photo{
    position: absolute;
    inset: 25px;
    background: linear-gradient(150deg, #8D9574 0%, #6E88A3 100%);
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    display: grid; place-items: center;
    color: rgba(255,255,255,0.7);
    font-family: var(--f-display);
    font-style: italic;
    font-size: 15px;
  }
  .p-visual .photo img{ border-radius: 50%; }
  .p-visual .float-em{
    position: absolute;
    z-index: 3;
    animation: bob 4s ease-in-out infinite;
  }
  .p-visual .em1{ top: 5%; right: 5%; }
  .p-visual .em2{ bottom: 8%; left: -5%; animation-delay: 2s; }

  .p-copy .big{
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.15;
    color: var(--ink);
    margin-bottom: 28px;
    letter-spacing: -0.02em;
  }
  .p-copy .big em{
    color: #8d9574;
    font-style: normal;
  }
  .p-copy p{
    font-size: 17px;
    color: var(--ink-2);
    line-height: 1.7;
    margin-bottom: 18px;
    font-weight: 600;
  }

  /* ========== APPROACH (mint bg, kid cards) ========== */
  .approach{ background: #d4e9f4; }
  .approach-grid{
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
  }
  .a-card{
    background: white;
    border-radius: var(--radius-md);
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: transform .3s ease;
    position: relative;
    overflow: hidden;
  }
  .a-card:nth-child(1){ transform: rotate(-1deg); background: var(--bg-mint); }
  .a-card:nth-child(2){ transform: rotate(1deg); background: var(--bg-coral); }
  .a-card:nth-child(3){ transform: rotate(-1deg); background: var(--bg-sky); }
  .a-card:nth-child(4){ transform: rotate(1deg); background: var(--bg-lavender); }
  .a-card:hover{
    transform: rotate(0deg) translateY(-6px) !important;
    box-shadow: 0 20px 40px -10px rgba(34,34,34,0.15);
  }
  .a-card .icon-wrap{
    width: 72px; height: 88px;
    border-radius: 22px;
    display: grid; place-items: center;
    box-shadow: 0 4px 0 rgba(34,34,34,0.1);
  }
  .a-card:nth-child(1) .icon-wrap{ background: var(--yellow); }
  .a-card:nth-child(2) .icon-wrap{ background: var(--coral); }
  .a-card:nth-child(3) .icon-wrap{ background: var(--sky); }
  .a-card:nth-child(4) .icon-wrap{ background: var(--lavender); }

  .a-card h3{
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ink);
  }
  .a-card .ar-sub{
    font-family: var(--f-ar);
    font-size: 15px;
    color: var(--muted);
    font-weight: 700;
    direction: rtl;
    margin-top: 4px;
  }
  .a-card p{
    font-size: 14.5px;
    color: var(--ink-2);
    line-height: 1.6;
    font-weight: 600;
  }

  /* ========== AGES ========== */
  .ages{ background: #C97A67; }
  .ages .section-lede{ color: #FFFFFF; }
  .teachers .section-lede{ color: #8d9574; }
  .ages-grid{
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .age-card{
    border-radius: var(--radius-lg);
    padding: 30px 28px 36px;
    color: var(--ink);
    position: relative;
    overflow: hidden;
    transition: transform .3s ease;
    display: flex; flex-direction: column; gap: 18px;
    box-shadow: 0 8px 0 rgba(34,34,34,0.08);
  }
  .age-card:hover{ transform: translateY(-8px); }
  .age-card.a1{ background: #d4e9f4; color: var(--ink); }
  .age-card.a2{ background: #ffe3dd; color: var(--ink); }
  .age-card.a3{ background: #e2e6d8; color: var(--ink); }

  .age-photo{
    aspect-ratio: 4/3;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.9);
    position: relative;
    overflow: hidden;
  }
  .age-photo .illo{ position: absolute; }

  .age-header{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .age-header .range{
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 60px;
    letter-spacing: -0.04em;
    line-height: 1;
  }
  .age-header .range .to{ opacity: 0.6; }
  .age-header .badge{
    background: white;
    padding: 8px 14px;
    border-radius: 999px;
    font-family: var(--f-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .age-card h4{
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.015em;
  }
  .age-card p{
    font-size: 15px;
    line-height: 1.6;
    font-weight: 600;
    opacity: 0.9;
  }
  .age-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
  .age-tags span{
    background: rgba(255,255,255,0.9);
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--f-display);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
  }

  /* ========== DAY TIMELINE ========== */
  /* ========== DAY SECTION: sticky scroll with playful palette ========== */
  .day-section{
    background: var(--bg-cream, #F8F5EC);
    padding: 0;
    position: relative;
  }
  .day-inner{
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
  }
  .day-left{
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 60px;
    background: var(--bg-cream, #F8F5EC);
    overflow: hidden;
    border-right: 4px dashed rgba(34, 34, 34, 0.15);
  }
  /* Rising sun */
  .day-sun{
    position: absolute;
    bottom: -120px;
    left: 50%;
    transform: translateX(-50%) translateY(var(--rise, 0));
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, var(--yellow) 0%, var(--coral) 55%, transparent 80%);
    border-radius: 50%;
    opacity: 0.28;
    transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
    filter: blur(2px);
  }
  /* Scattered stars behind */
  .day-star-bg{
    position: absolute;
    pointer-events: none;
    animation: dayStarSpin 8s linear infinite;
    opacity: 0.5;
  }
  .day-star-bg.ds1{ top: 8%; left: 12%; width: 32px; height: 32px; color: var(--coral); }
  .day-star-bg.ds2{ top: 15%; right: 15%; width: 24px; height: 24px; color: var(--sky); animation-duration: 10s; }
  .day-star-bg.ds3{ bottom: 12%; left: 15%; width: 28px; height: 28px; color: var(--mint); animation-duration: 12s; }
  @keyframes dayStarSpin{ to{ transform: rotate(360deg); } }

  .day-title{ position: relative; z-index: 2; }
  .day-title .section-tag{ margin-bottom: 24px; }
  .day-title .section-tag .pill{
    background: var(--yellow);
    color: #FFFFFF;
    padding: 8px 16px;
    border-radius: 100px;
    border: 2px solid var(--ink);
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 3px 3px 0 var(--ink);
  }
  .day-title h2{
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(44px, 4.8vw, 72px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ink);
    max-width: 13ch;
  }
  .day-title h2 .sky-txt{ color: var(--sky-deep); }
  .day-title h2 .coral-txt{ color: var(--coral); }

  .day-clock{
    margin-top: 56px;
    padding-top: 32px;
    border-top: 3px dashed rgba(34, 34, 34, 0.2);
  }
  .day-clock .now{
    font-family: var(--f-hand);
    font-weight: 700;
    font-size: 22px;
    color: var(--coral);
    margin-bottom: 8px;
    transform: rotate(-2deg);
    display: inline-block;
  }
  .day-clock .time{
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 96px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ink);
    transition: color .5s ease;
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .day-clock .time::after{
    content: "";
    width: 12px; height: 12px;
    background: var(--coral);
    border-radius: 50%;
    animation: clockPulse 1.5s ease-in-out infinite;
  }
  @keyframes clockPulse{
    0%,100%{ transform: scale(1); opacity: 1; }
    50%{ transform: scale(1.5); opacity: 0.5; }
  }
  .day-clock .activity{
    font-family: var(--f-hand);
    font-weight: 700;
    font-size: 26px;
    color: var(--sky-deep);
    margin-top: 16px;
    transition: opacity .4s ease;
    transform: rotate(-1deg);
    display: inline-block;
  }

  .day-right{ background: var(--bg-cream, #F8F5EC); }
  .day-scene{
    min-height: 100vh;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    position: relative;
    border-bottom: 4px dashed rgba(34, 34, 34, 0.12);
  }
  .day-scene:last-child{ border-bottom: none; }
  .day-scene:nth-child(1){ background: var(--yellow); }
  .day-scene:nth-child(2){ background: var(--coral); }
  .day-scene:nth-child(3){ background: var(--sky); }
  .day-scene:nth-child(4){ background: var(--mint); }
  .day-scene:nth-child(5){ background: var(--lavender); }
  .day-scene:nth-child(1) h3, .day-scene:nth-child(1) p{ color: #FFFFFF; }
  .day-scene:nth-child(6){ background: var(--peach); }

  .day-scene .time-badge{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    background: white;
    padding: 8px 18px;
    border-radius: 100px;
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    align-self: flex-start;
  }
  .day-scene h3{
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(38px, 4.2vw, 60px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ink);
    max-width: 14ch;
  }
  .day-scene h3 .hl{
    background: white;
    padding: 0 10px;
    border-radius: 8px;
    display: inline-block;
    transform: rotate(-1deg);
    color: var(--ink);
  }
  .day-scene p{
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
    opacity: 0.85;
    max-width: 42ch;
    font-weight: 500;
  }
  .day-scene .kid-quote{
    margin-top: 12px;
    padding: 16px 20px;
    background: white;
    border-radius: 16px;
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    font-family: var(--f-hand);
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
    max-width: 40ch;
    align-self: flex-start;
    transform: rotate(-1deg);
  }
  /* Floating icon per scene */
  .scene-icon{
    position: absolute;
    right: 60px; top: 60px;
    width: 96px; height: 96px;
    border-radius: 30% 70% 60% 40% / 50% 40% 60% 50%;
    background: white;
    display: grid;
    place-items: center;
    font-size: 48px;
    border: 3px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
    animation: sceneBlob 5s ease-in-out infinite;
  }
  @keyframes sceneBlob{
    0%,100%{ transform: translateY(0) rotate(-4deg); border-radius: 30% 70% 60% 40% / 50% 40% 60% 50%; }
    50%{ transform: translateY(-12px) rotate(6deg); border-radius: 60% 40% 40% 60% / 40% 60% 40% 60%; }
  }

  /* Responsive */
  @media (max-width: 900px){
    .day-inner{ grid-template-columns: 1fr; }
    .day-left{ position: relative; height: auto; padding: 60px 30px; border-right: none; border-bottom: 4px dashed rgba(34, 34, 34, 0.15); }
    .day-scene{ padding: 60px 30px; min-height: 80vh; }
    .day-scene h3{ font-size: 36px; }
    .day-clock .time{ font-size: 72px; }
    .scene-icon{ width: 72px; height: 88px; font-size: 36px; right: 30px; top: 30px; }
  }

  /* ========== FACILITIES: playful sticker cards ========== */
  .facilities{ background: var(--bg-coral); position: relative; overflow: hidden; }
  .facilities-grid{
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .facility{
    background: white;
    border-radius: var(--radius-md);
    border: 3px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    padding: 14px 14px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .3s;
  }
  .facility:hover{
    transform: translate(-4px, -4px) rotate(var(--tilt, -1deg));
    box-shadow: 10px 10px 0 var(--ink);
    z-index: 3;
  }
  .facility:nth-child(odd){ --tilt: -1.5deg; }
  .facility:nth-child(even){ --tilt: 1.5deg; }
  /* Colored card bodies rotating through palette */
  .facility:nth-child(6n+1){ background: var(--yellow); color: #FFFFFF; }
  .facility:nth-child(6n+2){ background: var(--bg-sky); }
  .facility:nth-child(6n+3){ background: var(--bg-mint); }
  .facility:nth-child(6n+4){ background: var(--bg-lavender); }
  .facility:nth-child(6n+5){ background: var(--bg-peach); }
  .facility:nth-child(6n+6){ background: white; }

  .facility .photo-frame{
    border-radius: 18px;
    border: 3px solid var(--ink);
    overflow: hidden;
    aspect-ratio: 4/3;
    position: relative;
    background: var(--bg-white);
  }
  .facility .photo-frame img{
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .facility:hover .photo-frame img{ transform: scale(1.1) rotate(1deg); }

  /* Wobbling emoji blob, overlapping photo corner */
  .facility .fi{
    position: absolute;
    top: -12px; right: -8px;
    z-index: 3;
    width: 56px; height: 56px;
    background: white;
    border: 3px solid var(--ink);
    border-radius: 35% 65% 55% 45% / 55% 45% 60% 40%;
    box-shadow: 3px 3px 0 var(--ink);
    display: grid;
    place-items: center;
    font-size: 26px;
    animation: sceneBlob 5s ease-in-out infinite;
  }
  .facility:nth-child(even) .fi{ animation-delay: 1.2s; }

  .facility h5{
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-top: 16px;
    padding: 0 6px;
  }
  .facility .ar{
    font-family: var(--f-ar);
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
    opacity: 0.65;
    direction: rtl;
    text-align: left;
    margin-top: 4px;
    padding: 0 6px;
  }
  .facility::after{ display: none; }
  /* Blue-body cards: white text so it reads on the dark background */
  .facility:nth-child(6n+1) h5{ color: #FFFFFF; }
  .facility:nth-child(6n+1) .ar{ color: #FFFFFF; opacity: 0.8; }

  /* Doodle stars scattered in section background */
  .facilities .bg-doodle{
    position: absolute;
    pointer-events: none;
    opacity: 0.35;
    animation: dayStarSpin 12s linear infinite;
  }
  .facilities .bg-doodle.bd1{ top: 6%; left: 4%; width: 40px; color: var(--coral); }
  .facilities .bg-doodle.bd2{ top: 12%; right: 6%; width: 30px; color: var(--sky-deep); animation-duration: 16s; }
  .facilities .bg-doodle.bd3{ bottom: 8%; left: 8%; width: 34px; color: var(--mint-deep); animation-duration: 20s; }
  .facilities .bg-doodle.bd4{ bottom: 14%; right: 4%; width: 26px; color: var(--lavender-deep); animation-duration: 14s; }

  /* ========== TEACHERS ========== */
  .teachers{ background: #E6ECDC; }
  .teachers-grid{
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .teacher{
    background: white;
    border-radius: var(--radius-md);
    padding: 24px 20px 28px;
    text-align: center;
    transition: transform .3s ease;
    box-shadow: 0 6px 0 rgba(34,34,34,0.06);
  }
  .teacher:nth-child(odd){ transform: rotate(-1deg); }
  .teacher:nth-child(even){ transform: rotate(1deg); }
  .teacher:hover{ transform: rotate(0) translateY(-6px); }
  .teacher .av{
    width: 100px; height: 100px;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: grid; place-items: center;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 36px;
    color: white;
    box-shadow: 0 4px 0 rgba(34,34,34,0.15);
  }
  .teacher:nth-child(1) .av{ background: var(--coral); }
  .teacher:nth-child(2) .av{ background: var(--sky); }
  .teacher:nth-child(3) .av{ background: var(--mint); }
  .teacher:nth-child(4) .av{ background: var(--lavender); }
  .teacher .name{
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .teacher .role{
    font-family: var(--f-display);
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
    margin-top: 4px;
    letter-spacing: 0.04em;
  }
  .teacher .fact{
    margin-top: 14px;
    padding-top: 14px;
    border-top: 2px dashed rgba(34,34,34,0.15);
    font-family: var(--f-hand);
    font-weight: 700;
    color: var(--coral);
    font-size: 16px;
  }

  /* ========== DIRECTOR ========== */
  .director{
    background: var(--sky);
    padding: 130px 0;
    position: relative;
    overflow: hidden;
  }
  .director .fl{ position: absolute; z-index: 1; }
  .director .fl1{ top: 60px; left: 6%; }
  .director .fl2{ bottom: 80px; right: 4%; }

  .letter-grid{
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 72px;
    align-items: start;
    position: relative;
    z-index: 2;
  }
  .portrait-wrap{ position: relative; }
  .portrait{
    aspect-ratio: 4/5;
    border-radius: 48% 52% 46% 54% / 46% 46% 54% 54%;
    background: linear-gradient(160deg, #C97A67 0%, #A9B08F 60%, #6E88A3 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(34,34,34,0.3);
  }
  .portrait img { width: 100%; height: 100%; object-fit: cover; }
  .portrait-name{
    margin-top: 24px;
    text-align: center;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--ink);
  }
  .portrait-role{
    text-align: center;
    font-family: var(--f-display);
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-2);
    font-weight: 500;
    margin-top: 4px;
  }
  .letter h2{
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(38px, 4.6vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin-bottom: 32px;
    max-width: 18ch;
  }
  .letter h2 .coral-txt{ color: #d4e9f4; transform: rotate(-1deg); display: inline-block; }
  .letter .greeting{
    font-family: var(--f-hand);
    font-size: 34px;
    color: #FFFFFF;
    margin-bottom: 20px;
    transform: rotate(-1deg);
    display: inline-block;
    font-weight: 700;
  }
  .letter p{
    font-size: 17px;
    color: #FFFFFF;
    line-height: 1.75;
    margin-bottom: 18px;
    font-weight: 600;
  }
  .letter .sig{
    margin-top: 40px;
    font-family: var(--f-hand);
    font-size: 48px;
    color: #FFFFFF;
    line-height: 1;
    font-weight: 700;
  }
  .letter .sig-role{
    font-family: var(--f-display);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
    margin-top: 8px;
  }
  .director .portrait-name{ color: #FFFFFF; }
  .director .portrait-role{ color: rgba(255,255,255,0.85); }
  .director .letter-cta{ background: var(--coral); color: #FFFFFF; box-shadow: 0 5px 0 var(--coral-deep); }
  .director .letter-cta:hover{ background: var(--coral-deep); }

  /* ========== TESTIMONIAL ========== */
  .testimonial{
    background: #ffd9d0;
    color: var(--ink);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
  }
  .testimonial::before, .testimonial::after{
    content: "";
    position: absolute;
    border-radius: 50%;
    z-index: 0;
  }
  .testimonial::before{
    width: 320px; height: 320px;
    background: rgba(255,255,255,0.08);
    top: -100px; left: -80px;
  }
  .testimonial::after{
    width: 260px; height: 260px;
    background: rgba(255,255,255,0.08);
    bottom: -80px; right: 40px;
  }
  .testimonial .fl{ position: absolute; z-index: 1; }
  .testimonial .fl1{ top: 60px; right: 10%; animation: bob 5s infinite; }
  .testimonial .fl2{ bottom: 80px; left: 8%; animation: bob 6s infinite 1s; }

  .t-inner{
    max-width: 840px;
    margin: 0 auto;
    text-align: center;
    position: relative; z-index: 2;
  }
  .t-quote{
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(30px, 3.8vw, 46px);
    line-height: 1.2;
    letter-spacing: -0.015em;
  }
  .t-marks{
    font-family: var(--f-display);
    font-size: 120px;
    line-height: 0.5;
    opacity: 0.35;
    margin-bottom: -20px;
    font-weight: 700;
  }
  .t-source{
    margin-top: 40px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }
  .t-avatar{
    width: 60px; height: 60px;
    border-radius: 50%;
    background: white;
    display: grid; place-items: center;
    color: var(--coral);
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 24px;
  }
  .t-info{ text-align: left; }
  .t-info .n{ font-family: var(--f-display); font-weight: 700; font-size: 16px; }
  .t-info .r{ font-size: 14px; opacity: 0.9; font-weight: 600; }

  /* ========== YEAR-ROUND ========== */
  .year-round{ background: var(--bg-mint); padding: 120px 0; }
  .year-round .section-title .coral-txt{ color: #8d9574; }
  .yr-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }
  .yr-copy .section-title{ text-align: left; margin: 0; }
  .yr-copy .section-lede{ text-align: left; margin: 24px 0 0; }
  .yr-copy .section-tag{ text-align: left; }
  .camp-list{
    margin-top: 32px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .camp-list span{
    background: white;
    padding: 12px 20px;
    border-radius: 999px;
    font-family: var(--f-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    display: flex; align-items: center; gap: 8px;
    box-shadow: 0 3px 0 rgba(34,34,34,0.06);
  }
  .yr-visual{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .yr-visual .cell{
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    display: grid; place-items: center;
    color: white;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 0 rgba(34,34,34,0.1);
  }
  .yr-visual .cell.summer{ background: linear-gradient(140deg, #3C5A77 0%, #C97A67 100%); }
  .yr-visual .cell.spring{ background: linear-gradient(140deg, #8D9574 0%, #6E88A3 100%); }
  .yr-visual .cell.winter{ background: linear-gradient(140deg, #6E88A3 0%, #A9B08F 100%); }
  .yr-visual .cell.autumn{ background: linear-gradient(140deg, #C97A67 0%, #3C5A77 100%); }
  .yr-visual .cell .big-em{ font-size: 60px; line-height: 1; }
  .yr-visual .cell span{
    display: block;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-top: 6px;
    font-weight: 500;
    opacity: 0.9;
  }

  /* ===== Animated season cards ===== */
  .yr-visual .cell{
    background-size: 180% 180%;
    animation: seasonDrift 14s ease-in-out infinite;
  }
  .yr-visual .cell.spring{ animation-delay: -3.5s; }
  .yr-visual .cell.autumn{ animation-delay: -7s; }
  .yr-visual .cell.winter{ animation-delay: -10.5s; }
  @keyframes seasonDrift{
    0%, 100%{ background-position: 0% 0%; }
    50%{ background-position: 100% 100%; }
  }

  .yr-visual .cell .big-em{
    display: inline-block;
    will-change: transform;
  }
  .yr-visual .cell.summer .big-em{ animation: sunSpin 9s linear infinite; }
  .yr-visual .cell.spring .big-em{ animation: leafSway 3.4s ease-in-out infinite; transform-origin: bottom center; }
  .yr-visual .cell.autumn .big-em{ animation: leafFall 4.6s ease-in-out infinite; }
  .yr-visual .cell.winter .big-em{ animation: snowSpin 8s ease-in-out infinite; }

  @keyframes sunSpin{ to{ transform: rotate(360deg); } }
  @keyframes leafSway{
    0%, 100%{ transform: rotate(-7deg); }
    50%{ transform: rotate(7deg) translateY(-3px); }
  }
  @keyframes leafFall{
    0%{ transform: translateY(-7px) rotate(-12deg); }
    50%{ transform: translateY(7px) rotate(11deg); }
    100%{ transform: translateY(-7px) rotate(-12deg); }
  }
  @keyframes snowSpin{
    0%, 100%{ transform: rotate(0deg) translateY(0); }
    50%{ transform: rotate(180deg) translateY(-4px); }
  }

  /* Soft light sweep */
  .yr-visual .cell::after{
    content: "";
    position: absolute;
    top: 0; left: -70%;
    width: 55%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
    animation: cellSheen 7s ease-in-out infinite;
  }
  .yr-visual .cell.spring::after{ animation-delay: 1.4s; }
  .yr-visual .cell.autumn::after{ animation-delay: 2.8s; }
  .yr-visual .cell.winter::after{ animation-delay: 4.2s; }
  @keyframes cellSheen{
    0%{ left: -70%; }
    16%, 100%{ left: 140%; }
  }

  .yr-visual .cell:hover .big-em{ animation-duration: 2.2s; }

  @media (prefers-reduced-motion: reduce){
    .yr-visual .cell,
    .yr-visual .cell .big-em,
    .yr-visual .cell::after{ animation: none !important; }
  }

  /* Terracotta inline heart (exact #C97A67, device-independent) */
  .hrt{ width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; }

  /* ========== FAQ ========== */
  .faq{ background: #ffd9d0; padding: 120px 0; }
  .faq-grid{
    margin-top: 60px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .faq-item{
    background: white;
    border-radius: var(--radius-md);
    padding: 24px 28px;
    box-shadow: 0 4px 0 rgba(34,34,34,0.08);
  }
  .faq-item summary{
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 19px;
    color: var(--ink);
  }
  .faq-item summary::-webkit-details-marker{ display: none; }
  .faq-item summary::after{
    content: "+";
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--yellow);
    color: #FFFFFF;
    display: grid; place-items: center;
    font-size: 22px;
    font-weight: 700;
    transition: transform .2s ease;
    flex-shrink: 0;
    box-shadow: 0 3px 0 var(--yellow-deep);
    font-family: var(--f-display);
  }
  .faq-item[open] summary::after{ transform: rotate(45deg); background: var(--coral); box-shadow: 0 3px 0 var(--coral-deep); color: white; }
  .faq-item p{
    margin-top: 18px;
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.65;
    font-weight: 600;
  }

  /* ========== CTA ========== */
  .final-cta{ padding: 60px var(--gutter); }
  .cta-card{
    background: linear-gradient(135deg, #E4A793 0%, #C97A67 45%, #A85E4C 100%);
    color: #FFFFFF;
    border-radius: var(--radius-lg);
    padding: 110px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
    max-width: var(--max);
    margin: 0 auto;
  }
  .cta-card .decor{
    position: absolute;
    z-index: 0;
  }
  .cta-card .d1{ top: 40px; left: 8%; animation: bob 5s infinite; }
  .cta-card .d2{ bottom: 40px; right: 10%; animation: bob 6s infinite 1s; }
  .cta-card .d3{ top: 30%; right: 5%; animation: spin 20s linear infinite; }
  .cta-card .d4{ bottom: 25%; left: 6%; animation: bob 7s infinite 2s; }

  .cta-card .kicker{
    font-family: var(--f-hand);
    font-size: 34px;
    color: #FFFFFF;
    margin-bottom: 16px;
    display: inline-block;
    transform: rotate(-3deg);
    position: relative; z-index: 2;
    font-weight: 700;
  }
  .cta-card h2{
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(52px, 8vw, 108px);
    line-height: 0.98;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    max-width: 14ch;
    margin: 0 auto 28px;
    position: relative; z-index: 2;
  }
  .cta-card .lede{
    font-size: 19px;
    color: rgba(255,255,255,0.9);
    max-width: 48ch;
    margin: 0 auto 40px;
    position: relative; z-index: 2;
    font-weight: 600;
  }
  .cta-card .actions{
    display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
    position: relative; z-index: 2;
  }

  /* ========== RAINBOW STRIP ========== */
  .rainbow{
    display: flex;
    height: 24px;
    margin-top: 60px;
  }
  .rainbow div{ flex: 1; }
  .rainbow .r1{ background: var(--coral); }
  .rainbow .r2{ background: var(--peach); }
  .rainbow .r3{ background: var(--yellow); }
  .rainbow .r4{ background: var(--mint); }
  .rainbow .r5{ background: var(--sky); }
  .rainbow .r6{ background: var(--lavender); }

  /* ========== FOOTER ========== */
  footer{
    background: #426B82;
    color: #FFFFFF;
    padding: 80px 0 40px;
  }
  .footer-grid{
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  footer h4{
    font-family: var(--f-display);
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #FFFFFF;
    font-weight: 600;
    margin-bottom: 22px;
  }
  footer .brand-block .brand .mark{ color: var(--bg); }
  footer .brand-block p{
    margin-top: 18px;
    color: rgba(255,255,255,0.82);
    font-size: 15px;
    max-width: 34ch;
    line-height: 1.6;
    font-weight: 500;
  }
  footer ul{ list-style: none; display: flex; flex-direction: column; gap: 12px; }
  footer ul a{
    color: rgba(255,255,255,0.85);
    font-family: var(--f-display);
    font-size: 15px;
    transition: color .2s ease;
    font-weight: 400;
  }
  footer ul a:hover{ color: #FFFFFF; text-decoration: underline; }
  footer .contact{
    color: rgba(255,255,255,0.85);
    font-size: 15px;
    line-height: 1.7;
    font-weight: 500;
  }
  footer .contact a{ display: block; color: rgba(255,255,255,0.85); margin-bottom: 8px; }
  footer .socials{ display: flex; gap: 12px; margin-top: 24px; }
  footer .socials a{
    width: 48px; height: 48px;
    border-radius: 14px;
    background: #FFFFFF;
    display: grid; place-items: center;
    color: var(--mint-deep);
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
    box-shadow: 0 4px 0 #4C5836;
  }
  footer .socials a svg{ width: 24px; height: 24px; display: block; }
  footer .socials a:hover{ transform: translateY(-3px); box-shadow: 0 7px 0 #4C5836; }
  footer .socials a.ig:hover{ background: #E1306C; color: #FFFFFF; }
  footer .socials a.fb:hover{ background: #1877F2; color: #FFFFFF; }
  footer .socials a.tt:hover{ background: #000000; color: #FFFFFF; }
  footer .socials a.sc:hover{ background: #FFFC00; color: #000000; }
  .footer-base{
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--f-display);
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    gap: 24px;
    flex-wrap: wrap;
    font-weight: 400;
  }

  /* ========== SCROLL ANIMATIONS ========== */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes popIn {
    0% { opacity: 0; transform: scale(0.7) rotate(-8deg); }
    60% { transform: scale(1.05) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
  }
  @keyframes floatIn {
    0% { opacity: 0; transform: translateY(20px) rotate(-8deg); }
    100% { opacity: 1; transform: translateY(0) rotate(-6deg); }
  }

  [data-reveal]{
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s cubic-bezier(0.16, 1, 0.3, 1), transform .8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  [data-reveal].revealed{ opacity: 1; transform: translateY(0); }
  [data-reveal="left"]{ transform: translateX(-60px); }
  [data-reveal="left"].revealed{ transform: translateX(0); }
  [data-reveal="right"]{ transform: translateX(60px); }
  [data-reveal="right"].revealed{ transform: translateX(0); }
  [data-reveal="pop"]{ transform: scale(0.85) rotate(-4deg); }
  [data-reveal="pop"].revealed{ transform: scale(1) rotate(0); }

  [data-delay="1"]{ transition-delay: .08s; }
  [data-delay="2"]{ transition-delay: .16s; }
  [data-delay="3"]{ transition-delay: .24s; }
  [data-delay="4"]{ transition-delay: .32s; }
  [data-delay="5"]{ transition-delay: .40s; }

  .hero-title{ }
  .hero-title .split-word{ margin-right: 0.15em; }
  .hero-ar{ animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) .15s both; }
  .hero-lede{ animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) .3s both; }
  .hero-actions{ animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) .45s both; }
  .hero-visual{ animation: popIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) .2s both; }
  .sticker.st1{ animation: floatIn .8s ease-out .8s both, bob 5s ease-in-out 1.6s infinite; }
  .sticker.st2{ animation: floatIn .8s ease-out 1.0s both, bob 5s ease-in-out 1.8s infinite 1.5s; }
  .sticker.st3{ animation: floatIn .8s ease-out 1.2s both, bob 5s ease-in-out 2.0s infinite 3s; }


  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    [data-reveal]{ opacity: 1; transform: none; }
  }

  /* ========== GOD MODE LAYER ========== */

  /* Scroll progress bar */
  .scroll-progress{
    position: fixed;
    top: 0; left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--coral), var(--yellow), var(--mint), var(--sky));
    z-index: 200;
    width: 0;
    transition: width .1s ease-out;
    box-shadow: 0 0 20px rgba(201,122,103,0.4);
  }

  /* Custom cursor: small smiling star */
  html, body, * { cursor: none !important; }
  input, textarea, [contenteditable] { cursor: text !important; }

  .cursor-star{
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    top: 0; left: 0;
    width: 28px; height: 28px;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    transition: width 0.25s ease, height 0.25s ease;
    filter: drop-shadow(0 3px 6px rgba(168, 94, 76, 0.4));
  }
  .cursor-star svg{
    width: 100%;
    height: 100%;
    display: block;
    animation: starSpin 3s linear infinite;
  }
  @keyframes starSpin{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
  }
  .cursor-star.hover{
    width: 42px; height: 42px;
  }
  .cursor-star.hover svg{
    animation: starSpin 1s linear infinite;
  }

  /* Trail sparkles */
  .sparkle{
    position: fixed;
    pointer-events: none;
    z-index: 99998;
    width: 10px;
    height: 10px;
    animation: sparkleFade .7s ease-out forwards;
  }
  @keyframes sparkleFade{
    0%{ opacity: 1; transform: scale(1) rotate(0deg); }
    100%{ opacity: 0; transform: scale(0.3) rotate(180deg); }
  }

  @media (hover: none), (max-width: 900px){
    .cursor-star, .sparkle{ display: none; }
    html, body, *, a, button { cursor: auto !important; }
    input, textarea { cursor: text !important; }
  }

  /* Cursor spotlight in hero */
  .hero-spotlight{
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,122,103,0.25), transparent 70%);
    pointer-events: none;
    filter: blur(40px);
    z-index: 0;
    opacity: 0;
    transition: opacity .4s ease;
    transform: translate(-50%, -50%);
  }
  .hero:hover .hero-spotlight{ opacity: 1; }

  /* 3D tilt cards */
  .tilt-card{
    transform-style: preserve-3d;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }
  .tilt-card > *{
    transform: translateZ(20px);
  }

  /* Interactive facilities gallery hover effect: soft focus on siblings */
  .facilities-grid:hover .facility:not(:hover){
    filter: saturate(0.7) brightness(0.96);
    transform: scale(0.985);
  }
  .facilities-grid .facility{
    transition: filter .4s ease, transform .35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .35s ease;
  }
  .facilities-grid .facility:hover{
    filter: none;
    transform: translate(-4px, -4px) rotate(var(--tilt, -1deg)) scale(1.02);
    box-shadow: 10px 10px 0 var(--ink);
    z-index: 10;
  }

  /* Number counter styling */
  .counter{
    display: inline-block;
    font-variant-numeric: tabular-nums;
  }

  /* Split text animation */
  .split-word{
    display: inline-block;
    opacity: 0;
    transform: translateY(60px) rotate(6deg);
    animation: splitReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  @keyframes splitReveal{
    to { opacity: 1; transform: translateY(0) rotate(0); }
  }

  /* Enhanced button micro-interactions */
  .btn, .nav-cta{
    position: relative;
    overflow: hidden;
  }
  .btn::before, .nav-cta::before{
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.3), transparent 40%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
  }
  .btn:hover::before, .nav-cta:hover::before{ opacity: 1; }

  /* Marquee outline text alternative */
  .marquee-track .outline{
    -webkit-text-stroke: 1.5px #FFFFFF;
    color: transparent;
  }

  /* Scroll-linked hero visual parallax */
  .hero-visual{ transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); }

  /* Age card enhanced hover */
  .age-card{
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;
  }
  .age-card:hover{
    transform: translateY(-12px) rotate(-1deg) !important;
    box-shadow: 0 25px 50px -12px rgba(34,34,34,0.25), 0 12px 0 rgba(34,34,34,0.08) !important;
  }

  /* Section-title subtle underline shine */
  .section-title{ position: relative; }
  .section-title::after{
    content: "";
    position: absolute;
    left: 50%; bottom: -12px;
    transform: translateX(-50%) scaleX(0);
    width: 80px; height: 4px;
    background: linear-gradient(90deg, var(--coral), var(--yellow));
    border-radius: 4px;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
    transform-origin: center;
  }
  .section-title.revealed::after{ transform: translateX(-50%) scaleX(1); }

  /* Approach cards - enhanced hover with icon rotation */
  .a-card{
    perspective: 1000px;
  }
  .a-card:hover .icon-wrap{
    animation: iconWiggle .5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes iconWiggle{
    0%,100%{ transform: rotate(0); }
    25%{ transform: rotate(-10deg) scale(1.1); }
    75%{ transform: rotate(10deg) scale(1.05); }
  }

  /* Testimonial letter reveal */
  .t-quote .split-char{
    display: inline-block;
    opacity: 0;
    animation: charFade 0.6s ease forwards;
  }
  @keyframes charFade{
    to { opacity: 1; }
  }

  /* Nav pill hover glow */
  .primary-nav a{ position: relative; }
  .primary-nav a::after{
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    width: 0; height: 3px;
    background: var(--coral);
    border-radius: 3px;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .primary-nav a:hover:not([aria-current="page"])::after{
    width: 60%;
    left: 20%;
  }

  /* Age photo zoom on hover */
  .age-photo img{
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .age-card:hover .age-photo img{
    transform: scale(1.08);
  }

  /* Rainbow strip subtle animation */
  .rainbow div{
    transition: flex-grow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .rainbow:hover div:hover{
    flex-grow: 2;
  }

  /* Sticky nav enhanced */
  header.nav.scrolled{
    background: rgba(248,245,236,0.98);
    box-shadow: 0 4px 30px rgba(34,34,34,0.08);
  }

  /* Improved focus states for accessibility */
  a:focus-visible, button:focus-visible, summary:focus-visible{
    outline: 3px solid var(--coral);
    outline-offset: 4px;
    border-radius: 8px;
  }

  /* ========== OVERRIDES AND NEW COMPONENTS ========== */

  /* Clock colon smaller so digits don't look glued */
  .day-clock .tcolon{
    font-size: 0.55em;
    position: relative;
    top: -0.14em;
    margin: 0 3px;
    opacity: 0.85;
  }

  /* Arabic swap box */
  .hero-ar .swap-box{ height: 1.5em; vertical-align: middle; line-height: 1.5em; margin-left: 0.15em; margin-right: 0.15em; }
  .hero-ar .swap-word{ transform: rotate(0) translateY(110%); line-height: 1.5em; padding-top: 0.08em; }
  .hero-ar .swap-word.active{ transform: rotate(0) translateY(0); }
  .hero-ar .swap-word.leaving{ transform: rotate(0) translateY(-110%); }
  .hero-ar .swap-word.w1{ color: var(--coral); }
  .hero-ar .swap-word.w2{ color: var(--sky-deep); }
  .hero-ar .swap-word.w3{ color: var(--mint-deep); }
  .hero-ar .swap-word.w4{ color: var(--lavender-deep); }

  /* Scroll hint is clickable */
  .scroll-bounce{ cursor: none; }
  .scroll-bounce:hover .arrow-down{ background: var(--coral); color: white; transform: scale(1.1); }
  .scroll-bounce .arrow-down{ transition: background .2s, transform .2s; }

  /* Philosophy: match playful card language */
  .p-visual .photo{
    border: 3px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
    border-radius: 50%;
  }
  .p-copy .big{
    background: white;
    border: 3px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    border-radius: var(--radius-md);
    padding: 28px 32px;
    transform: rotate(-1deg);
    position: relative;
  }
  .p-copy .big::before{
    content: "";
    position: absolute;
    top: -18px; right: 24px;
    background-color: var(--yellow);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23C97A67' d='M12 21s-8.5-5.4-8.5-11.1A4.7 4.7 0 0 1 12 6a4.7 4.7 0 0 1 8.5 3.9C20.5 15.6 12 21 12 21z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26px 26px;
    border: 3px solid var(--ink);
    border-radius: 50%;
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    box-shadow: 3px 3px 0 var(--ink);
  }
  .p-copy .big em{
    font-style: normal;
    background: var(--coral);
    color: #FFFFFF;
    padding: 0 8px;
    border-radius: 6px;
  }
  .p-copy > p{ margin-top: 28px; }

  /* Ages: keep card text on the same line across cards */
  .age-card h4{
    min-height: 58px;
    display: flex;
    align-items: flex-start;
  }
  .age-card p{ min-height: 96px; }

  /* Director letter CTA */
  .letter-cta{ margin-top: 28px; }

  /* Teachers: polaroid cards */
  .teachers{ position: relative; overflow: hidden; }
  .teacher.polaroid{
    background: white;
    border: 3px solid var(--ink);
    border-radius: var(--radius-md);
    box-shadow: 6px 6px 0 var(--ink);
    padding: 14px 14px 20px;
    text-align: left;
    transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .35s;
  }
  .teacher.polaroid:nth-child(1){ background: var(--bg-peach); transform: rotate(-2deg); }
  .teacher.polaroid:nth-child(2){ background: var(--bg-sky); transform: rotate(1.5deg); }
  .teacher.polaroid:nth-child(3){ background: var(--bg-mint); transform: rotate(-1.5deg); }
  .teacher.polaroid:nth-child(4){ background: var(--bg-lavender); transform: rotate(2deg); }
  .teacher.polaroid:hover{
    transform: rotate(0) translate(-4px, -4px) scale(1.02);
    box-shadow: 10px 10px 0 var(--ink);
    z-index: 3;
  }
  .t-photo-frame{
    position: relative;
    border: 3px solid var(--ink);
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 1/1;
    background: white;
  }
  .t-photo-frame img{
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .teacher.polaroid:hover .t-photo-frame img{ transform: scale(1.08); }
  .t-emoji{
    position: absolute;
    bottom: 10px; right: 10px;
    width: 44px; height: 44px;
    background: white;
    border: 3px solid var(--ink);
    border-radius: 35% 65% 55% 45% / 55% 45% 60% 40%;
    box-shadow: 2px 2px 0 var(--ink);
    display: grid;
    place-items: center;
    font-size: 20px;
    animation: sceneBlob 5s ease-in-out infinite;
  }
  .teacher.polaroid .name{
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 21px;
    color: var(--ink);
    margin-top: 16px;
    padding: 0 4px;
  }
  .teacher.polaroid .role{
    font-family: var(--f-display);
    font-size: 13px;
    color: var(--ink);
    opacity: 0.6;
    font-weight: 600;
    margin-top: 2px;
    padding: 0 4px;
  }
  .teacher.polaroid .kid-says{
    margin-top: 14px;
    padding: 12px 14px;
    background: white;
    border: 2px solid var(--ink);
    border-radius: 14px;
    box-shadow: 3px 3px 0 var(--ink);
    font-family: var(--f-hand);
    font-weight: 700;
    font-size: 15.5px;
    color: var(--ink);
    line-height: 1.4;
    transform: rotate(-1deg);
    position: relative;
  }
  .teacher.polaroid .kid-says::before{
    content: "";
    position: absolute;
    top: -8px; left: 20px;
    width: 12px; height: 12px;
    background: white;
    border-left: 2px solid var(--ink);
    border-top: 2px solid var(--ink);
    transform: rotate(45deg);
  }
  .teacher.polaroid .kid-name{
    font-family: var(--f-hand);
    font-weight: 700;
    font-size: 13px;
    color: var(--coral-deep);
    margin-top: 8px;
    text-align: right;
    padding: 0 6px;
  }
  .team-footnote{
    text-align: center;
    margin-top: 44px;
  }
  .team-footnote .hand-note{
    font-family: var(--f-hand);
    font-weight: 700;
    font-size: 22px;
    color: #8d9574;
    display: inline-block;
    transform: rotate(-1.5deg);
  }

  /* Reviews slider */
  .rev-pill{ background: var(--coral) !important; color: #FFFFFF !important; }
  .rev-title{ color: var(--ink); }
  .rev-title .yellow-txt{ color: var(--coral); }
  .rev-sub{
    font-family: var(--f-hand);
    font-weight: 700;
    font-size: 20px;
    color: #C97A67;
    margin-top: 12px;
    transform: rotate(-1deg);
    display: inline-block;
  }
  .rev-slider{
    margin-top: 52px;
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--bg-peach);
    border: 2px solid rgba(34,34,34,0.12);
    border-radius: var(--radius-lg);
    padding: 32px;
  }
  .rev-track-window{
    overflow: hidden;
    flex: 1;
    border-radius: var(--radius-md);
  }
  .rev-track{
    display: flex;
    transition: transform .6s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .rev-card{
    flex: 0 0 100%;
    background: white;
    border: 3px solid var(--ink);
    border-radius: var(--radius-md);
    box-shadow: 6px 6px 0 var(--ink);
    padding: 32px 36px;
  }
  .rev-top{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
  }
  .rev-avatar{
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 3px solid var(--ink);
    display: grid;
    place-items: center;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--ink);
    flex-shrink: 0;
  }
  .rev-avatar.av1{ background: var(--yellow); color: #FFFFFF; }
  .rev-avatar.av2{ background: var(--sky); }
  .rev-avatar.av3{ background: var(--mint); }
  .rev-who{ flex: 1; }
  .rev-name{
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
  }
  .rev-stars{
    color: #A85E4C;
    font-size: 15px;
    letter-spacing: 2px;
    margin-top: 2px;
  }
  .rev-g{
    background: white;
    border: 2px solid rgba(34,34,34,0.12);
    border-radius: 50%;
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }
  .rev-text{
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--ink-2);
    font-weight: 500;
  }
  .rev-arrow{
    width: 54px; height: 54px;
    border-radius: 50%;
    background: var(--yellow);
    color: #FFFFFF;
    border: 3px solid var(--ink);
    box-shadow: 0 4px 0 var(--ink);
    font-size: 22px;
    font-family: var(--f-display);
    color: #FFFFFF;
    cursor: none;
    flex-shrink: 0;
    transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1), background .2s, box-shadow .15s, color .2s;
  }
  .rev-arrow:hover{ transform: scale(1.1); background: white; color: var(--ink); }
  .rev-arrow:active{ transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
  .rev-dots{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
  }
  .rev-dot{
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid white;
    background: transparent;
    cursor: none;
    padding: 0;
    transition: background .25s, transform .25s;
  }
  .rev-dot.active{ background: var(--yellow); border-color: var(--yellow); transform: scale(1.25); }

  /* ========== RESPONSIVE ========== */
  @media (max-width: 1024px){
    .approach-grid{ grid-template-columns: repeat(2, 1fr); }
    .teachers-grid{ grid-template-columns: repeat(2, 1fr); }
    .footer-grid{ grid-template-columns: 1fr 1fr; }
    .timeline{ grid-template-columns: repeat(3, 1fr); }
    .facilities-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 768px){
    .hero-grid, .philosophy-grid, .letter-grid, .yr-grid{ grid-template-columns: 1fr; gap: 48px; }
    .ages-grid{ grid-template-columns: 1fr; }
    .approach-grid{ grid-template-columns: 1fr; }
    .primary-nav{ display: none; }
    .day-section{ padding: 60px 0; }
    .facilities-grid{ grid-template-columns: 1fr; }
    .cta-card{ padding: 60px 30px; }
    section{ padding: 70px 0; }
    .sticker.st1, .sticker.st3{ display: none; }
    .footer-grid{ grid-template-columns: 1fr; }
  }

/* =================================================================
   ELEMENTOR v2 ADAPTER — My Nursery Dubai
   Applied AFTER the full original CSS. Minimal Elementor overrides.
   The original CSS is the visual source of truth.
   ================================================================= */

/* ── NEUTRAL SECTION CONTAINERS ──────────────────────────────────
   Every HTML widget wrapper must not introduce any spacing or sizing.
   The original .wrap class handles 1280px max-width and gutters.    */
.myn-sc {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 100% !important;
  min-height: 0 !important;
  align-self: stretch;
}
.myn-sc > .elementor-widget-html {
  width: 100%;
  display: block;
}
.myn-sc > .elementor-widget-html > .elementor-widget-container {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* ── SVG SAFEGUARD ───────────────────────────────────────────────
   Prevent Elementor or theme CSS from stretching decorative SVGs.
   Wave dividers retain width:100% from the original CSS.
   Orbit, floats, doodles, etc. retain their original dimensions.  */
.elementor-widget-html svg {
  max-width: none;
  flex: none;
}

/* ── STICKY DAY SECTION ──────────────────────────────────────────
   position:sticky on .day-left requires overflow:visible on ALL
   Elementor ancestors up to the scroll root (document).           */
.myn-day-sc,
.myn-day-sc > .elementor-widget-html,
.myn-day-sc > .elementor-widget-html > .elementor-widget-container {
  overflow: visible !important;
}

/* ── ELEMENTOR BODY RESETS ───────────────────────────────────────
   Prevent Elementor's site-width override from limiting page width */
.elementor-page .elementor {
  max-width: 100%;
}

/* ── PREVENT ELEMENTOR h* UA MULTIPLICATION ──────────────────────
   If any heading widget survives from v1 imports, neutralise it.  */
.elementor-heading-title {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}/* End custom CSS */