/* ═══ Cube Section — true 3D dice (rolls in 4 directions) ═══ */

.cube-section {
  background: linear-gradient(180deg, #f8fafc 0%, #eef3f9 100%);
  padding: 70px 24px 90px;
  overflow: hidden;
}
.cube-section-inner { max-width: 900px; margin: 0 auto; text-align: center; }

/* Hide any leftover heading */
.cube-eyebrow, .cube-heading, .cube-subheading { display: none !important; }

/* ── Stage ── */
.cube-stage {
  position: relative;
  width: 640px;
  height: 640px;
  margin: 0 auto;
  perspective: 2600px;
  perspective-origin: 50% 50%;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cube-stage:active { cursor: grabbing; }

/* ── Tilt wrapper — static 3/4 view so we always see 3 faces ── */
.cube-tilt {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(-22deg);
}

/* ── Rotator — user-controlled rolling ── */
.cube-rotator {
  position: absolute;
  top: 50%; left: 50%;
  width: 400px; height: 400px;
  margin: -200px 0 0 -200px;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.55, 0.05, 0.35, 1);
  will-change: transform;
}

/* ── Faces ── */
.cube-face {
  position: absolute;
  inset: 0;
  border-radius: 4px;              /* tiny rounding — mostly square */
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  backface-visibility: hidden;
  overflow: hidden;
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.10) inset,
    0 0 0 1px rgba(255,255,255,0.05);
}

/* Content */
.cube-face .cf-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.20em;
  text-transform: uppercase; color: rgba(255,255,255,0.78);
  margin-bottom: 14px; position: relative; z-index: 1;
}
.cube-face .cf-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 34px; font-weight: 700; line-height: 1.10;
  margin-bottom: 16px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.28);
  position: relative; z-index: 1;
}
.cube-face .cf-body {
  font-size: 14.5px; line-height: 1.65;
  color: rgba(255,255,255,0.92);
  position: relative; z-index: 1;
}
.cube-face .cf-sig {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 15px;
  color: rgba(255,255,255,0.78);
  margin-top: 14px; position: relative; z-index: 1;
}
.cube-face .cf-link {
  display: inline-block; margin-top: 16px;
  font-size: 13.5px; font-weight: 600;
  color: #fff; text-decoration: underline; text-underline-offset: 3px;
  position: relative; z-index: 1;
}

/* Pills inside faces */
.cf-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 6px; position: relative; z-index: 1;
}
.cf-pill {
  padding: 7px 16px;
  border: 1px solid rgba(255,255,255,0.48);
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,0.08);
}

/* ── Face colours — brighter, more saturated ── */
.cube-face.cf-navy   { background: linear-gradient(155deg, #2563eb 0%, #0a192f 100%); }
.cube-face.cf-gold   { background: linear-gradient(155deg, #fbbf24 0%, #b45309 100%); }
.cube-face.cf-green  { background: linear-gradient(155deg, #22c55e 0%, #047857 100%); }
.cube-face.cf-violet { background: linear-gradient(155deg, #a855f7 0%, #6d28d9 100%); }
.cube-face.cf-red    { background: linear-gradient(155deg, #f43f5e 0%, #9f1239 100%); }
.cube-face.cf-teal   { background: linear-gradient(155deg, #06b6d4 0%, #0e7490 100%); }

/* ── Controls — 4 direction arrows ── */
.cube-controls {
  margin-top: 48px;
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
}
.cube-arrow {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  color: #0a192f;
  font-size: 22px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(10,25,47,0.08);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .cube-arrow:hover {
    background: #0a192f; color: #fff; border-color: #0a192f;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(10,25,47,0.20);
  }
}
.cube-arrow:active { transform: scale(0.94); }

.cube-hint {
  margin-top: 20px; font-size: 13px;
  color: #94a3b8; text-align: center;
}

/* ── Tablet ── */
@media (max-width: 900px) {
  .cube-section { padding: 48px 16px 64px; }
  .cube-stage { width: 480px; height: 480px; perspective: 2000px; }
  .cube-rotator { width: 300px; height: 300px; margin: -150px 0 0 -150px; }
  .cube-face { padding: 26px 24px; }
  .cube-face .cf-eyebrow { font-size: 10px; margin-bottom: 10px; }
  .cube-face .cf-heading { font-size: 26px; margin-bottom: 12px; }
  .cube-face .cf-body { font-size: 13px; line-height: 1.55; }
  .cube-face .cf-sig { font-size: 13px; }
  .cube-face .cf-link { font-size: 12.5px; }
  .cf-pill { padding: 6px 13px; font-size: 11.5px; }
  .cube-controls { margin-top: 36px; gap: 12px; }
  .cube-arrow { width: 46px; height: 46px; font-size: 20px; }
}

/* ── Phone ── */
@media (max-width: 500px) {
  .cube-stage { width: 380px; height: 380px; perspective: 1600px; }
  .cube-rotator { width: 240px; height: 240px; margin: -120px 0 0 -120px; }
  .cube-face { padding: 20px 18px; }
  .cube-face .cf-heading { font-size: 22px; }
  .cube-face .cf-body { font-size: 12px; line-height: 1.5; }
  .cube-face .cf-link { font-size: 12px; margin-top: 12px; }
  .cube-controls { margin-top: 28px; gap: 10px; }
  .cube-arrow { width: 44px; height: 44px; font-size: 19px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .cube-rotator { transition: none !important; }
}


/* ═══ v4 BALANCED VIEW — front face prominent, subtle depth ═══ */

/* Softer tilt — front face reads almost straight on */
.cube-tilt {
  transform: rotateX(-10deg) rotateY(-14deg) !important;
}

/* Mobile — even less tilt so text stays readable */
@media (max-width: 900px) {
  .cube-tilt { transform: rotateX(-8deg) rotateY(-10deg) !important; }
}
@media (max-width: 500px) {
  .cube-tilt { transform: rotateX(-6deg) rotateY(-8deg) !important; }
}

/* Heading font — slightly smaller so it fits on one or two lines */
.cube-face .cf-heading { font-size: 30px !important; }

/* Pills — 2 per row so the layout breathes */
.cf-pills { gap: 6px !important; }
.cf-pill { padding: 6px 13px !important; font-size: 12px !important; }

/* Reduce inner padding a touch so text has more room */
.cube-face { padding: 34px 30px !important; }

/* Fix the hint text — no more dots */
.cube-hint::after { content: ''; }
.cube-hint { font-size: 13px; }

@media (max-width: 900px) {
  .cube-face .cf-heading { font-size: 24px !important; }
  .cube-face { padding: 26px 22px !important; }
  .cf-pill { padding: 5px 11px !important; font-size: 11px !important; }
}
@media (max-width: 500px) {
  .cube-face .cf-heading { font-size: 20px !important; }
  .cube-face { padding: 20px 18px !important; }
}

/* ═══ v5 STRAIGHT-ON + UPRIGHT TEXT ═══ */
.cube-tilt { transform: none !important; }
.cube-face { padding: 0 !important; }
.cube-face .cf-inner {
  position: absolute; inset: 0;
  padding: 34px 30px;
  display: flex; flex-direction: column; justify-content: center;
  text-align: left;
}
@media (max-width: 900px) { .cube-face .cf-inner { padding: 26px 22px; } }
@media (max-width: 500px) { .cube-face .cf-inner { padding: 20px 18px; } }


/* ═══ v6 EYEBROW-AS-HEADING — Welcome/Our Mission/etc become the big bold heading ═══ */

/* Eyebrow — now the big, bold, serif heading */
.cube-face .cf-eyebrow {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  text-transform: none !important;
  color: #fff !important;
  line-height: 1.10 !important;
  margin-bottom: 14px !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.30) !important;
  position: relative; z-index: 1;
}

/* Heading — now a smaller subtitle */
.cube-face .cf-heading {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: rgba(255,255,255,0.95) !important;
  line-height: 1.35 !important;
  margin-bottom: 14px !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.20) !important;
  position: relative; z-index: 1;
}

/* Tablet */
@media (max-width: 900px) {
  .cube-face .cf-eyebrow { font-size: 30px !important; margin-bottom: 10px !important; }
  .cube-face .cf-heading { font-size: 15px !important; margin-bottom: 12px !important; }
}

/* Phone */
@media (max-width: 500px) {
  .cube-face .cf-eyebrow { font-size: 26px !important; margin-bottom: 8px !important; }
  .cube-face .cf-heading { font-size: 14px !important; margin-bottom: 10px !important; }
}


/* ═══ v7 BIGGER CUBE ═══ */

/* Desktop — bigger stage and rotator */
@media (min-width: 901px) {
  .cube-stage { width: 780px !important; height: 780px !important; perspective: 3000px !important; }
  .cube-rotator { width: 520px !important; height: 520px !important; margin: -260px 0 0 -260px !important; }
}

/* Tablet */
@media (max-width: 900px) and (min-width: 501px) {
  .cube-stage { width: 560px !important; height: 560px !important; perspective: 2200px !important; }
  .cube-rotator { width: 380px !important; height: 380px !important; margin: -190px 0 0 -190px !important; }
}

/* Phone */
@media (max-width: 500px) {
  .cube-stage { width: 420px !important; height: 420px !important; perspective: 1800px !important; }
  .cube-rotator { width: 280px !important; height: 280px !important; margin: -140px 0 0 -140px !important; }
}


/* ═══ v8 HIDE HEADING — subtitle field stays in CMS but does not render ═══ */
.cube-face .cf-heading { display: none !important; }


/* ═══ v9 WELCOME-HEADING — subtitle shows only on the Welcome face ═══ */

/* Hide subtitle everywhere */
.cube-face .cf-heading { display: none !important; }

/* Show it back on the FIRST face only (Welcome) */
.cube-face:first-child .cf-heading { display: block !important; }


/* ═══ v10 SPACING — breathing room between heading and body ═══ */

/* Bigger gap below the big eyebrow/heading */
.cube-face .cf-eyebrow {
  margin-bottom: 28px !important;
}

/* Small extra gap above the body text */
.cube-face .cf-body {
  margin-top: 6px !important;
}

/* Extra gap around the link */
.cube-face .cf-link {
  margin-top: 22px !important;
}

/* Extra gap above the signature */
.cube-face .cf-sig {
  margin-top: 22px !important;
}

/* Pills get more room too */
.cf-pills {
  margin-top: 14px !important;
}

/* Tablet — slightly tighter but still breathing */
@media (max-width: 900px) {
  .cube-face .cf-eyebrow { margin-bottom: 20px !important; }
  .cube-face .cf-link { margin-top: 18px !important; }
  .cube-face .cf-sig { margin-top: 18px !important; }
}

/* Phone — tighter still */
@media (max-width: 500px) {
  .cube-face .cf-eyebrow { margin-bottom: 16px !important; }
  .cube-face .cf-link { margin-top: 14px !important; }
  .cube-face .cf-sig { margin-top: 14px !important; }
}


/* ═══ v11 CENTER + 3D — centered text, true 3D tilt ═══ */

/* Center all content in the face */
.cube-face .cf-inner {
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Center-align headings, body, signature */
.cube-face .cf-eyebrow,
.cube-face .cf-heading,
.cube-face .cf-body,
.cube-face .cf-sig {
  text-align: center !important;
}

/* Center the pills container */
.cf-pills {
  justify-content: center !important;
}

/* Center the link */
.cube-face .cf-link {
  text-align: center !important;
}

/* Deeper 3D tilt — you see 3 faces at once */
.cube-tilt {
  transform: rotateX(-12deg) rotateY(-16deg) !important;
}

/* Perspective + rotation feel richer */
.cube-stage {
  perspective: 2600px !important;
  perspective-origin: 50% 45% !important;
}

/* Slightly stronger shadow + shading for depth */
.cube-face::after {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.22) 0%, transparent 55%),
    linear-gradient(to right,
      rgba(0,0,0,0.52) 0%,
      rgba(0,0,0,0.05) 25%,
      rgba(0,0,0,0.05) 75%,
      rgba(0,0,0,0.52) 100%
    ) !important;
}

/* Tablet — same feel, scaled down */
@media (max-width: 900px) {
  .cube-tilt { transform: rotateX(-10deg) rotateY(-13deg) !important; }
}

/* Phone — subtle tilt so text stays legible */
@media (max-width: 500px) {
  .cube-tilt { transform: rotateX(-8deg) rotateY(-10deg) !important; }
}


/* ═══ v12 ROUNDED EDGES — soften face corners ═══ */

.cube-face {
  border-radius: 12px !important;
  overflow: hidden;
}

/* Inner content inherits the same curve */
.cube-face .cf-inner {
  border-radius: 12px !important;
}

/* Tablet + phone — same radius */
@media (max-width: 900px) {
  .cube-face, .cube-face .cf-inner { border-radius: 10px !important; }
}
@media (max-width: 500px) {
  .cube-face, .cube-face .cf-inner { border-radius: 8px !important; }
}


/* ═══ v13 BIGGER FONT ═══ */

/* Big heading (the eyebrow slot — "Welcome", "Our Mission", etc.) */
.cube-face .cf-eyebrow {
  font-size: 46px !important;
  line-height: 1.05 !important;
}

/* Subtitle heading (shows on Welcome face) */
.cube-face .cf-heading {
  font-size: 20px !important;
}

/* Body text */
.cube-face .cf-body {
  font-size: 17px !important;
  line-height: 1.65 !important;
}

/* Signature */
.cube-face .cf-sig {
  font-size: 17px !important;
}

/* Read more link */
.cube-face .cf-link {
  font-size: 15px !important;
}

/* Pills */
.cf-pill {
  font-size: 14px !important;
  padding: 8px 18px !important;
}

/* Tablet */
@media (max-width: 900px) {
  .cube-face .cf-eyebrow { font-size: 38px !important; }
  .cube-face .cf-heading { font-size: 18px !important; }
  .cube-face .cf-body { font-size: 15px !important; }
  .cube-face .cf-sig { font-size: 15px !important; }
  .cube-face .cf-link { font-size: 14px !important; }
  .cf-pill { font-size: 13px !important; padding: 7px 15px !important; }
}

/* Phone */
@media (max-width: 500px) {
  .cube-face .cf-eyebrow { font-size: 30px !important; }
  .cube-face .cf-heading { font-size: 16px !important; }
  .cube-face .cf-body { font-size: 13px !important; }
  .cube-face .cf-sig { font-size: 13px !important; }
  .cube-face .cf-link { font-size: 13px !important; }
  .cf-pill { font-size: 12px !important; padding: 6px 13px !important; }
}


/* ═══ v14 BIGGER FONT 2 ═══ */

.cube-face .cf-eyebrow {
  font-size: 52px !important;
  line-height: 1.05 !important;
}
.cube-face .cf-heading { font-size: 23px !important; }
.cube-face .cf-body { font-size: 19px !important; line-height: 1.6 !important; }
.cube-face .cf-sig { font-size: 19px !important; }
.cube-face .cf-link { font-size: 17px !important; }
.cf-pill { font-size: 16px !important; padding: 9px 20px !important; }

@media (max-width: 900px) {
  .cube-face .cf-eyebrow { font-size: 42px !important; }
  .cube-face .cf-heading { font-size: 20px !important; }
  .cube-face .cf-body { font-size: 17px !important; }
  .cube-face .cf-sig { font-size: 17px !important; }
  .cube-face .cf-link { font-size: 15px !important; }
  .cf-pill { font-size: 14px !important; padding: 8px 17px !important; }
}

@media (max-width: 500px) {
  .cube-face .cf-eyebrow { font-size: 34px !important; }
  .cube-face .cf-heading { font-size: 18px !important; }
  .cube-face .cf-body { font-size: 15px !important; }
  .cube-face .cf-sig { font-size: 15px !important; }
  .cube-face .cf-link { font-size: 14px !important; }
  .cf-pill { font-size: 13px !important; padding: 7px 15px !important; }
}


/* ═══ v15 MOBILE FIT — smaller text so nothing overflows on phones ═══ */

@media (max-width: 700px) {
  /* Face padding — tighter */
  .cube-face .cf-inner {
    padding: 22px 20px !important;
  }

  /* Big heading — much smaller */
  .cube-face .cf-eyebrow {
    font-size: 24px !important;
    line-height: 1.05 !important;
    margin-bottom: 14px !important;
  }

  /* Subtitle */
  .cube-face .cf-heading {
    font-size: 15px !important;
    margin-bottom: 12px !important;
  }

  /* Body */
  .cube-face .cf-body {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Signature */
  .cube-face .cf-sig {
    font-size: 13px !important;
    margin-top: 12px !important;
  }

  /* Link */
  .cube-face .cf-link {
    font-size: 13px !important;
    margin-top: 14px !important;
  }

  /* Pills — smaller and wrapping tightly */
  .cf-pills {
    gap: 6px !important;
    margin-top: 10px !important;
  }
  .cf-pill {
    font-size: 11px !important;
    padding: 5px 11px !important;
  }
}

/* Very small phones — one more notch down */
@media (max-width: 420px) {
  .cube-face .cf-eyebrow { font-size: 21px !important; }
  .cube-face .cf-heading { font-size: 14px !important; }
  .cube-face .cf-body { font-size: 12px !important; }
  .cube-face .cf-sig { font-size: 12px !important; }
  .cube-face .cf-link { font-size: 12px !important; }
  .cf-pill { font-size: 10px !important; padding: 4px 9px !important; }
}


/* ═══════════════════════════════════════════════════════
   TRIAL: KIDS TOY PALETTE — 6 distinct bright colours
   Yellow · Coral Pink · Sky Blue · Lime Green · Tangerine · Grape Purple
   ═══════════════════════════════════════════════════════ */

/* 1 · Welcome → Sunny Yellow */
.cube-face.cf-navy   { background: linear-gradient(155deg, #FFD400 0%, #E6B400 100%) !important; }
/* 2 · Our Mission → Coral Pink */
.cube-face.cf-gold   { background: linear-gradient(155deg, #FF5E97 0%, #E63978 100%) !important; }
/* 3 · Our Vision → Sky Blue */
.cube-face.cf-green  { background: linear-gradient(155deg, #00B4FF 0%, #0088CC 100%) !important; }
/* 4 · Core Values → Lime Green */
.cube-face.cf-violet { background: linear-gradient(155deg, #7DD957 0%, #5BB834 100%) !important; }
/* 5 · Why Choose Us → Tangerine */
.cube-face.cf-red    { background: linear-gradient(155deg, #FF9500 0%, #D97A00 100%) !important; }
/* 6 · Our Story / Badge → Grape Purple */
.cube-face.cf-teal   { background: linear-gradient(155deg, #B532D8 0%, #8E1FAE 100%) !important; }

/* Text — dark navy on every face reads clean and playful, like a picture book */
.cube-face .cf-eyebrow,
.cube-face .cf-heading,
.cube-face .cf-body,
.cube-face .cf-sig,
.cube-face .cf-link {
  color: #0a192f !important;
}
.cube-face .cf-eyebrow,
.cube-face .cf-heading {
  text-shadow: 0 1px 2px rgba(255,255,255,0.35) !important;
}
.cube-face .cf-body {
  color: rgba(10,25,47,0.88) !important;
  text-shadow: none !important;
}
.cube-face .cf-sig {
  color: rgba(10,25,47,0.72) !important;
}

/* Exception — Grape Purple is dark enough that white reads better */
.cube-face.cf-teal .cf-eyebrow,
.cube-face.cf-teal .cf-heading,
.cube-face.cf-teal .cf-body,
.cube-face.cf-teal .cf-sig,
.cube-face.cf-teal .cf-link {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.28) !important;
}
.cube-face.cf-teal .cf-body { color: rgba(255,255,255,0.92) !important; }
.cube-face.cf-teal .cf-sig { color: rgba(255,255,255,0.78) !important; }

/* Pills — dark border, light chip, matching dark text */
.cf-pill {
  border-color: rgba(10,25,47,0.42) !important;
  background: rgba(255,255,255,0.42) !important;
  color: #0a192f !important;
}
.cube-face.cf-teal .cf-pill {
  border-color: rgba(255,255,255,0.55) !important;
  background: rgba(255,255,255,0.16) !important;
  color: #fff !important;
}

/* Light shading so the bright colours stay bright */
.cube-face::after {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.28) 0%, transparent 55%),
    linear-gradient(to right,
      rgba(0,0,0,0.16) 0%,
      rgba(0,0,0,0.00) 25%,
      rgba(0,0,0,0.00) 75%,
      rgba(0,0,0,0.16) 100%
    ) !important;
}

/* Soft drop shadow for the playful look */
.cube-face {
  box-shadow:
    0 22px 55px rgba(10,25,47,0.20),
    0 0 0 1px rgba(0,0,0,0.05) inset !important;
}