/* Keeps the supplied stacked logo fully visible in compact placements. */
.logo { width: 70px; height: 68px; overflow: visible; }
.logo img { width: 100%; height: 100%; object-fit: contain; }
footer img { width: 70px; height: 62px; object-fit: contain; }
.menu-toggle { display: none; }

/* Keep the final "Why Fun Arabic" card content in its wide text column. */
.why-card.wide h3 {
  grid-column: 3;
  grid-row: 1;
}

.why-card.wide p {
  grid-column: 3;
  grid-row: 2;
  margin-top: 10px;
}

/* Continuous right-to-left testimonial marquee. */
.testimonials { overflow: hidden; }
.testimonials .quote-track {
  display: flex;
  gap: 16px;
  width: max-content;
  max-width: none;
  margin-top: 57px;
  animation: testimonial-marquee 42s linear infinite;
  will-change: transform;
}
.testimonials .quote-card,
.testimonials .quote-card:not(.active) {
  display: flex !important;
  flex: 0 0 clamp(300px, 27vw, 410px);
  min-height: 280px;
  opacity: 1;
}
@keyframes testimonial-marquee {
  to { transform: translateX(calc(-50% - 8px)); }
}
@media (prefers-reduced-motion: reduce) {
  .testimonials .quote-track { animation: none; }
}

/* Tablet: reserve separate space for the decorative hero art and star. */
@media (min-width: 621px) and (max-width: 1100px) {
  .hero {
    min-height: 800px;
    padding: 142px clamp(40px, 7vw, 76px) 130px;
  }
  .hero-copy { max-width: min(62vw, 620px); }
  .hero h1 {
    max-width: 100%;
    font-size: clamp(3.8rem, 6.1vw, 4.85rem);
  }
  .hero-art {
    top: 220px;
    right: clamp(12px, 3vw, 38px);
    width: min(30vw, 320px);
    height: 360px;
    opacity: .9;
  }
  .arabic-art { top: 62px; left: 8%; font-size: clamp(6rem, 10vw, 8.5rem); }
  .hero-art p { right: 0; bottom: 22px; font-size: 11px; }
  .hero-art p em { font-size: 20px; }
  .bubble-one { width: 122px; height: 122px; }
  .bubble-two { width: 70px; height: 70px; }
  .hero-proof { padding-left: clamp(40px, 7vw, 76px); padding-right: clamp(40px, 7vw, 76px); }

  .big-idea.section-pad { padding-top: 140px; }
  .big-idea .idea-star {
    top: 20px;
    right: clamp(16px, 3vw, 34px);
    font-size: clamp(84px, 9vw, 112px);
  }
}

@media (max-width: 620px) {
  .site-header {
    position: sticky;
    top: 0;
    height: 72px;
    padding: 0 20px;
    background: var(--cream);
  }
  .logo { width: 58px; height: 58px; }
  .header-actions { margin-left: auto; }
  .menu-toggle {
    display: grid;
    place-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--purple);
    border-radius: 50%;
    background: var(--white);
    cursor: pointer;
  }
  .menu-toggle span { width: 18px; height: 2px; background: var(--purple); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
  .site-header.menu-open .menu-toggle span:first-child { transform: translateY(7px) rotate(45deg); }
  .site-header.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .site-header.menu-open .menu-toggle span:last-child { transform: translateY(-7px) rotate(-45deg); }
  .site-header.menu-open nav {
    display: flex;
    position: absolute;
    top: 71px;
    left: 12px;
    right: 12px;
    z-index: 30;
    flex-direction: column;
    gap: 0;
    padding: 8px 17px;
    border: 2px solid var(--purple);
    border-radius: 17px;
    background: var(--cream);
    box-shadow: 0 10px 24px rgba(91, 38, 118, .15);
  }
  .site-header.menu-open nav a { padding: 13px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
  .site-header.menu-open nav a:last-child { border-bottom: 0; }

  .hero { min-height: 655px; padding: 55px 20px 105px; }
  .hero h1 { font-size: clamp(2.75rem, 12.3vw, 3.05rem); line-height: .96; overflow-wrap: anywhere; }
  .hero-copy > p:not(.eyebrow) { max-width: 310px; margin-bottom: 22px; }
  .hero-art { display: none; }
  .hero-buttons { flex-wrap: wrap; gap: 13px 18px; }
  .hero-buttons .button { padding: 13px 17px; font-size: 10px; }
  .promo-pill { width: 100%; gap: 7px; padding: 9px 12px; }
  .promo-pill strong { font-size: 18px; }
  .promo-pill small { flex-basis: 100%; }
  .hero-proof { padding: 14px 20px; }
  .hero-proof div { flex-direction: column; align-items: flex-start; gap: 0; }
  .hero-proof strong { font-size: 24px; }
  .hero-proof span { font-size: 8px; }

  .section-title h2 { font-size: clamp(2.45rem, 10.7vw, 3rem); line-height: .98; }
  .big-idea .section-title { position: relative; z-index: 1; }
  .big-idea .idea-star { top: -13px; right: -10px; font-size: 95px; opacity: .8; }
  .card-top span, .why-card > span { font-size: 29px; }

  .testimonials { overflow: hidden; padding-right: 0; }
  .testimonials .section-title { margin-right: 20px; }
  .testimonials .quote-track { display: flex !important; margin-top: 38px; padding-right: 16px; animation-duration: 34s; }
  .testimonials .quote-card,
  .testimonials .quote-card:not(.active) { display: flex !important; flex-basis: calc(100vw - 56px); min-height: 275px; opacity: 1 !important; }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 2.48rem; letter-spacing: -.075em; }
}