/* ================================================================
   Heaven Hues — Mobile Stylesheet
   Loaded AFTER style.css and refinements.css on all pages.
   Covers: hamburger nav, touch targets, layout stacking,
   typography scaling, form usability, video sizing.
   Breakpoints: 1024px (hamburger nav / tablet), 480px (phone)
   ================================================================ */

/* ── OVERFLOW SAFETY NET ── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ── HAMBURGER BUTTON ── */
.nav-hamburger {
  display: none;
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 10001;
  background: rgba(11,9,7,.85);
  border: 1px solid rgba(200,153,58,.4);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer !important;
  flex-direction: column;
  gap: 5px;
  backdrop-filter: blur(8px);
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE NAV OVERLAY ── */
@media (max-width: 1024px) {

  /* Show hamburger */
  .nav-hamburger { display: flex; }

  /* Shrink header padding / logo offsets so nothing crowds the hamburger */
  nav { padding: 16px 20px !important; }
  .page-logo { top: 16px !important; left: 18px !important; }

  /* Hide desktop nav, show as slide-down when open */
  .site-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    background: rgba(11,9,7,.97) !important;
    backdrop-filter: blur(16px);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
    padding: 80px 40px 60px !important;
    overflow-y: auto;
  }
  .site-nav.open {
    opacity: 1;
    pointer-events: all;
  }

  .site-nav a,
  .site-nav .dropbtn {
    font-size: 22px !important;
    letter-spacing: .08em !important;
    padding: 14px 0 !important;
    display: block;
    text-align: center;
    width: 100%;
    border-bottom: 1px solid rgba(200,153,58,.1);
  }
  .site-nav .dropbtn {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 22px !important;
    font-weight: 300 !important;
  }

  /* Dropdown in mobile: always visible, indented */
  .dropdown-content {
    display: block !important;
    position: static !important;
    background: transparent !important;
    border: none !important;
    padding-left: 0 !important;
  }
  .dropdown-content a {
    font-family: Jost, sans-serif !important;
    font-size: 14px !important;
    letter-spacing: .1em !important;
    color: rgba(200,153,58,.75) !important;
    padding: 10px 0 !important;
    text-align: center;
    border-bottom: 1px solid rgba(200,153,58,.06) !important;
  }

  /* Logo stays fixed top left */
  .page-logo, .logo {
    z-index: 10002 !important;
  }
  nav > .logo { z-index: 10002 !important; }
  .page-logo img, nav .logo img {
    height: 48px !important;
    width: auto !important;
  }

  /* ── GLOBAL BODY / LAYOUT ── */
  body {
    background-attachment: scroll !important; /* fixed bg kills perf on iOS */
  }

  /* ── HOME PAGE ── */
  .panel { padding: 32px 24px 48px !important; }
  section.panel#intro {
    padding-top: 120px !important;
    text-align: center;
  }
  .intro-headline,
  .begin-btn {
    text-align: center;
  }
  .begin-btn {
    margin: 0 auto !important;
    width: fit-content;
    display: inline-flex !important;
  }

  /* Video section */
  .video-section { padding: 40px 20px !important; }
  .video-section h2 { font-size: 28px !important; }
  .hh-video { border-radius: 10px !important; }

  /* Lead section */
  .lead-section { padding: 50px 20px !important; }
  .lead-card { padding: 28px 22px !important; border-radius: 16px !important; }
  .lead-card h2 { font-size: 26px !important; }
  .form-row { flex-direction: column !important; gap: 0 !important; }
  .lead-form input,
  .lead-form select,
  .lead-form textarea,
  .register-form input,
  .register-form select,
  .register-form textarea {
    font-size: 16px !important; /* prevents iOS zoom on focus */
    padding: 14px 16px !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
  }
  .lead-form select { font-size: 16px !important; }
  .lead-form button,
  .register-submit,
  #consultSubmitBtn,
  #execSubmitBtn,
  #dfSubmitBtn,
  #consSubmitBtn,
  #rjrSubmitBtn {
    font-size: 15px !important;
    padding: 16px 24px !important;
    border-radius: 999px !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* ── PAGE CARD (About, Gallery inner pages) ── */
  .page-shell { padding: 110px 18px 60px !important; }
  .page-card { padding: 28px 22px !important; border-radius: 16px !important; }
  .page-card h1 { font-size: clamp(34px, 9vw, 52px) !important; }

  /* ── QUIZ ── */
  .options {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .option {
    width: 100% !important;
    max-width: 340px !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
  }
  .img-cards {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .img-card .card-img { height: 110px !important; }
  .card-title { font-size: 12px !important; }

  /* Palette row */
  .palette-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .palette-tile, .palette-tile.main { height: 120px !important; }

  /* Result step badges */
  .hh-result-layer { padding: 20px 18px !important; border-radius: 16px !important; }
  .step-badge { width: 36px !important; height: 36px !important; font-size: 16px !important; }

  /* Action cards */
  .action-ladder { flex-direction: column !important; gap: 12px !important; }
  .action-card { width: 100% !important; }

  /* Register modal */
  .register-modal { padding: 24px 18px !important; border-radius: 16px !important; }
  .register-form-grid { grid-template-columns: 1fr !important; }
  .booklet-side { display: none !important; } /* hide booklet img on tiny screens */
  .choice-row { flex-direction: column !important; gap: 10px !important; }

  /* ── PROJECT HERO BANNER ── */
  .project-banner {
    min-height: 60vh !important;
    padding: 0 22px 48px !important;
    align-items: flex-end !important;
  }
  .project-banner h1 { font-size: clamp(28px, 7vw, 42px) !important; }
  .project-banner-sub { font-size: 14px !important; }
  .project-banner-buttons { flex-direction: column !important; gap: 10px !important; }
  .project-btn-primary,
  .project-btn-secondary { width: 100% !important; justify-content: center !important; }

  /* Path cards */
  .path-grid, .path-grid-2 { grid-template-columns: 1fr !important; }
  .path-card { padding: 22px 18px !important; }

  /* ── REMOTE JOB ROOM SPLIT ── */
  .rjr-layout { grid-template-columns: 1fr !important; }
  .rjr-photo {
    height: 56vw !important;
    min-height: 240px !important;
    position: relative !important;
    order: -1;
  }
  .rjr-photo::before {
    background: linear-gradient(to bottom,
      rgba(11,9,7,0) 40%,
      rgba(11,9,7,1) 100%) !important;
  }
  .rjr-panel { padding: 40px 22px 56px !important; }
  .rjr-pillars { grid-template-columns: 1fr !important; gap: 10px !important; }
  .rjr-buttons { flex-direction: column !important; }
  .rjr-btn-gold, .rjr-btn-outline { width: 100% !important; justify-content: center !important; }
  .rjr-before-after { max-width: 100% !important; }

  /* ── CALMING COLOURS ── */
  .cc-hero { padding: 130px 22px 60px !important; }
  .cc-hero h1 { font-size: clamp(34px, 9vw, 52px) !important; }
  .cc-palette-section { grid-template-columns: 1fr !important; padding: 60px 22px !important; }
  .cc-room { grid-template-columns: 1fr !important; min-height: auto !important; direction: ltr !important; }
  .cc-room-photo { height: 56vw !important; min-height: 240px !important; }
  .cc-room-photo::after,
  .cc-room:nth-child(even) .cc-room-photo::after {
    background: linear-gradient(to top, rgba(8,12,16,1) 0%, rgba(8,12,16,0) 50%) !important;
  }
  .cc-room-text { padding: 32px 22px 48px !important; }
  .cc-fandeck { grid-template-columns: 1fr !important; padding: 60px 22px !important; }
  .cc-cta { padding: 60px 22px !important; }
  .cc-cta-btns { flex-direction: column !important; }
  .cc-btn-primary, .cc-btn-outline { width: 100% !important; justify-content: center !important; }

  /* ── AI DESIGN SERVICE ── */
  .design-hero { grid-template-columns: 1fr !important; }
  .design-hero-photo {
    height: 60vw !important;
    min-height: 260px !important;
    position: relative !important;
    order: -1;
  }
  .design-hero-text { padding: 40px 22px 56px !important; }
  .design-includes { gap: 10px !important; }
  .design-include-item { padding: 14px 16px !important; gap: 12px !important; }
  .design-steps-grid { grid-template-columns: 1fr !important; }
  .design-btns { flex-direction: column !important; }
  .design-btn-gold, .design-btn-outline { width: 100% !important; justify-content: center !important; }

  /* ── CONSULTATION ── */
  .cons-hero { padding: 120px 22px 60px !important; }
  .cons-hero-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  .cons-stat-grid { grid-template-columns: 1fr 1fr !important; }
  .cons-reasons { grid-template-columns: 1fr !important; }
  .cons-pricing-grid { grid-template-columns: 1fr !important; }
  .cons-specialist-inner { grid-template-columns: 1fr !important; }
  .cons-specialist-photo { height: 72vw !important; min-height: 280px !important; }
  .cons-specialist-text { padding: 36px 22px !important; }
  .cons-qualities { gap: 10px !important; }
  .cons-timeline::before { left: 18px !important; }
  .cons-timeline-dot { width: 36px !important; height: 36px !important; font-size: 15px !important; }

  /* ── EXECUTION ── */
  .exec-hero { padding: 120px 22px 60px !important; }
  .exec-cards { grid-template-columns: 1fr !important; }
  .exec-card-wide { grid-template-columns: 1fr !important; gap: 14px !important; }
  .exec-card-wide-features { grid-template-columns: 1fr !important; }
  .exec-team-banner { height: 240px !important; }

  /* ── GALLERY ── */
  .gal-shell { padding: 110px 16px 60px !important; }
  .gal-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .gal-grid-wide { grid-template-columns: 1fr !important; }
  .gal-item img { height: 200px !important; }
  .gal-item.tall img { height: 240px !important; }
  .gal-video-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .gal-brand-film { margin: 0 auto 50px !important; }

  /* ── ABOUT FOUNDER BLOCK ── */
  .founder-block {
    flex-direction: column !important;
    align-items: center !important;
    padding: 22px !important;
  }
  .founder-photo {
    width: 100% !important;
    height: 28vw !important;
    min-height: 120px !important;
    max-height: 180px !important;
  }

  /* ── UPLOAD AREA ── */
  .upload-area { padding: 22px 16px !important; }

  /* ── BEFORE/AFTER IMAGES ── */
  .before-after-block img { max-width: 100% !important; }
  .rjr-before-after-frame img { border-radius: 10px !important; }

  /* Scroll to top convenience */
  html { scroll-behavior: smooth; }
}

/* ── PHONE (≤480px) — extra scaling ── */
@media (max-width: 480px) {
  .page-logo img, nav .logo img { height: 38px !important; width: auto !important; }
  nav { padding: 14px 16px !important; }
  .page-logo { top: 14px !important; left: 14px !important; }
  .nav-hamburger { top: 14px !important; right: 14px !important; padding: 9px 11px !important; }

  .project-banner { min-height: 52vh !important; }
  .project-banner h1 { font-size: clamp(24px, 7vw, 34px) !important; }

  .cc-hero h1 { font-size: clamp(30px, 9vw, 44px) !important; }
  .rjr-headline { font-size: clamp(28px, 8vw, 40px) !important; }

  .gal-grid { grid-template-columns: 1fr !important; }
  .gal-item img, .gal-item.tall img, .gal-item.short img { height: 52vw !important; }

  .cons-stat-grid { grid-template-columns: 1fr !important; }

  /* Step items slightly smaller */
  .step-badge { width: 32px !important; height: 32px !important; font-size: 14px !important; }
}