/* ============================================================
   what-we-do-mobile-fix.css  (UPDATED)
   Paste at the VERY BOTTOM of what-we-do.css after all rules.

   Goal: mobile hero = full viewport height (100dvh)
         content sits near top, orbit animation fills bottom half
         smooth staggered animation: content first → orbit after
   ============================================================ */


/* ══════════════════════════════════════════
   ≤ 1024px  — Tablet
   ══════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Hero: full height, flex column, content top → orbit bottom ── */
.page-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  justify-content: center !important;   /* ✅ FIX */

  min-height: 100vh !important;
  height: 100vh !important;

  padding: 0 32px !important;  /* remove uneven spacing */
}

.page-hero-content {
  padding-bottom: 24px !important;  /* 👈 small gap between content & orbit */
}
  /* ── Content block: top of the fold ── */
  .page-hero-content {
    position: relative !important;
    z-index: 3 !important;
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    flex-shrink: 0 !important;
    opacity: 0;
    animation: wwd-fadeUp 0.85s 0.35s cubic-bezier(0.16,1,0.3,1) forwards;
  }

  /* ── Orbit wrap: fills remaining height, centred ── */
  .hero-orbit-wrap {
    display: flex !important;
    position: relative !important;
    order: 2 !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    flex: 1 !important;
    min-height: 260px !important;
    max-height: 380px !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 0;
    animation: wwd-fadeIn 1s 0.85s ease forwards;
  }

  /* ── Rings ── */
  .orbit-ring:nth-child(1) { width: 280px !important; height: 280px !important; }
  .orbit-ring:nth-child(2) { width: 210px !important; height: 210px !important; }
  .orbit-ring:nth-child(3) { width: 140px !important; height: 140px !important; }
  .orbit-ring:nth-child(4) { width:  72px !important; height:  72px !important; }

  .orbit-logo { width: 52px !important; height: 52px !important; }

  /* ── Icons for r=140px ── */
  .orbit-icon {
    position: absolute !important;
    width: 40px !important;
    height: 40px !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0;
    animation: wwd-fadeIn 0.8s ease forwards;
  }
  .orbit-icon--1 { top: calc(50% - 140px) !important; left: 50%               !important; animation-delay: 1.0s;  }
  .orbit-icon--2 { top: calc(50% - 88px)  !important; left: calc(50% + 117px) !important; animation-delay: 1.15s; }
  .orbit-icon--3 { top: calc(50% + 29px)  !important; left: calc(50% + 137px) !important; animation-delay: 1.3s;  }
  .orbit-icon--4 { top: calc(50% + 117px) !important; left: calc(50% + 88px)  !important; animation-delay: 1.45s; }
  .orbit-icon--5 { top: calc(50% + 117px) !important; left: calc(50% - 88px)  !important; animation-delay: 1.6s;  }
  .orbit-icon--6 { top: calc(50% + 29px)  !important; left: calc(50% - 137px) !important; animation-delay: 1.75s; }
  .orbit-icon--7 { top: calc(50% - 88px)  !important; left: calc(50% - 117px) !important; animation-delay: 1.9s;  }

  .scroll-indicator { display: none !important; }
}


/* ══════════════════════════════════════════
   ≤ 768px  — Mobile  (r = 115px)
   ══════════════════════════════════════════ */
@media (max-width: 768px) {

.page-hero {
  padding: 0 20px !important;
  justify-content: center !important;
}
  .hero-orbit-wrap {
    min-height: 230px !important;
    max-height: 320px !important;
  }
  .orbit-ring:nth-child(1) { width: 230px !important; height: 230px !important; }
  .orbit-ring:nth-child(2) { width: 170px !important; height: 170px !important; }
  .orbit-ring:nth-child(3) { width: 112px !important; height: 112px !important; }
  .orbit-ring:nth-child(4) { width:  58px !important; height:  58px !important; }
  .orbit-logo { width: 42px !important; height: 42px !important; }
  .orbit-icon { width: 34px !important; height: 34px !important; }

  .orbit-icon--1 { top: calc(50% - 115px) !important; left: 50%               !important; }
  .orbit-icon--2 { top: calc(50% - 72px)  !important; left: calc(50% + 96px)  !important; }
  .orbit-icon--3 { top: calc(50% + 24px)  !important; left: calc(50% + 112px) !important; }
  .orbit-icon--4 { top: calc(50% + 96px)  !important; left: calc(50% + 72px)  !important; }
  .orbit-icon--5 { top: calc(50% + 96px)  !important; left: calc(50% - 72px)  !important; }
  .orbit-icon--6 { top: calc(50% + 24px)  !important; left: calc(50% - 112px) !important; }
  .orbit-icon--7 { top: calc(50% - 72px)  !important; left: calc(50% - 96px)  !important; }

  .page-hero-h1  { font-size: clamp(26px, 7vw, 40px) !important; }
  .page-hero-sub { font-size: 15px !important; }
}


/* ══════════════════════════════════════════
   ≤ 480px  — Small mobile  (r = 95px)
   ══════════════════════════════════════════ */
@media (max-width: 480px) {

.page-hero {
  padding: 0 16px !important;
  justify-content: center !important;
}
  .hero-orbit-wrap {
    min-height: 200px !important;
    max-height: 270px !important;
  }
  .orbit-ring:nth-child(1) { width: 190px !important; height: 190px !important; }
  .orbit-ring:nth-child(2) { width: 138px !important; height: 138px !important; }
  .orbit-ring:nth-child(3) { width:  90px !important; height:  90px !important; }
  .orbit-ring:nth-child(4) { width:  46px !important; height:  46px !important; }
  .orbit-logo { width: 32px !important; height: 32px !important; }
  .orbit-icon { width: 28px !important; height: 28px !important; }

  .orbit-icon--1 { top: calc(50% - 95px) !important; left: 50%               !important; }
  .orbit-icon--2 { top: calc(50% - 60px) !important; left: calc(50% + 79px)  !important; }
  .orbit-icon--3 { top: calc(50% + 20px) !important; left: calc(50% + 92px)  !important; }
  .orbit-icon--4 { top: calc(50% + 79px) !important; left: calc(50% + 60px)  !important; }
  .orbit-icon--5 { top: calc(50% + 79px) !important; left: calc(50% - 60px)  !important; }
  .orbit-icon--6 { top: calc(50% + 20px) !important; left: calc(50% - 92px)  !important; }
  .orbit-icon--7 { top: calc(50% - 60px) !important; left: calc(50% - 79px)  !important; }

  .page-hero-h1  { font-size: clamp(22px, 7vw, 32px) !important; }
  .page-hero-sub { font-size: 14px !important; }
}


/* ══════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════ */
@keyframes wwd-fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wwd-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (hover: none) {
  .orbit-icon:hover { background: inherit; }
}