/* ================================================================
   CIEL PRIVÉ — mobile.css
   All styles for screens 768px and below
================================================================ */


/* ── Navigation ── */

@media (max-width: 768px) {
  nav        { padding: 22px 24px; }
  .nav-links { gap: 28px; }
}

@media (max-width: 480px) {
  .nav-links { display: none; }
  .nav-logo  { letter-spacing: 4px; }
}


/* ── Hero ── */

@media (max-width: 768px) {
  .hero-content { padding: 0 24px; }
  .hero-tagline { margin-top: 24px; letter-spacing: 1px; }
}

@media (max-width: 480px) {
  .hero-tagline { letter-spacing: 0.5px; }
  .hero-title   { font-size: clamp(32px, 10vw, 80px); }
  .hero-content { padding: 0 20px; }
}


/* ── Who We Are ── */

@media (max-width: 768px) {
  .section-who { padding: 100px 6vw; }
  .who-inner   { padding: 0 24px; }
  .who-stats   { gap: 32px; }
}

@media (max-width: 480px) {
  .who-stats {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .who-stat-divider {
    width: 40px;
    height: 1px;
  }
}


/* ── Services — phone: vertical stack, tap to expand ── */

@media (max-width: 768px) {
  .services-stack-section {
    background: #0a0a0a;
    width: 100vw;
    overflow: hidden;
    padding: 0;
  }

  .services-section-header {
    padding: 80px 24px 16px;
    text-align: left;
  }

  .services-eyebrow {
    font-family: 'Cinzel', serif;
    font-size: 9px;
    color: #6b6560;
    letter-spacing: 0.25em;
    display: block;
    margin-bottom: 4px;
  }

  .services-main-heading {
    font-family: 'Cinzel', serif;
    font-size: 26px;
    color: #ffffff;
    font-weight: 400;
    margin: 0;
    letter-spacing: -0.02em;
  }

  .services-trigger-wrapper {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    padding: 12px 20px 60px !important;
    gap: 12px !important;
    position: static !important;
    transform: none !important;
    scroll-snap-type: none !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }

  .service-stack-card {
    position: static !important;
    transform: none !important;
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
    grid-area: unset !important;
    z-index: unset !important;
    scroll-snap-align: none !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 2px !important;
    background-color: #faf9f7 !important;
    overflow: hidden !important;
  }

  .card-1, .card-2, .card-3 { z-index: unset !important; }

  .card-interior-content {
    min-height: unset !important;
    height: auto !important;
    padding: 24px 20px !important;
    border: none !important;
  }

  .card-footer-meta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding-top: 20px !important;
  }

  .action-toggle-text {
    white-space: nowrap !important;
    font-size: 9px !important;
  }

  .service-display-title {
    font-size: clamp(22px, 6vw, 32px) !important;
  }

  .service-descriptor-text {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }

  .service-expanded-details {
    display: grid !important;
    grid-template-rows: 0fr !important;
    max-height: unset !important;
    opacity: 1 !important;
    overflow: hidden !important;
    transition: grid-template-rows 0.45s cubic-bezier(0.25, 1, 0.5, 1) !important;
  }

  .service-expanded-details > .details-content-wrapper {
    overflow: hidden !important;
    min-height: 0 !important;
  }

  .service-stack-card.is-expanded .service-expanded-details {
    grid-template-rows: 1fr !important;
  }

  .action-glyph {
    transition: transform 0.4s ease !important;
    display: inline-block !important;
  }

  .service-stack-card.is-expanded .action-glyph {
    transform: rotate(180deg) !important;
  }
}


/* ── Global Reach ── */

@media (max-width: 768px) {
  .reach-content {
    padding: 40px 28px 48px;
    max-width: 100%;
  }
  .reach-label   { letter-spacing: 3px; }
  .reach-text    { font-size: 18px; max-width: 100%; }
  .reach-heading { font-size: clamp(22px, 5.5vw, 40px); }

  .reach,
  section.reach  { overflow: hidden; max-width: 100vw; }

  .reach-map {
    position: relative;
    inset: unset;
    height: auto;
    overflow: hidden;
  }

  .world-svg {
    width: 100%;
    height: auto;
    max-height: 55vh;
    display: block;
  }

  .reach-graticule { display: none; }
  .reach-map .city-label,
  .world-svg text  { font-size: 8px; }

  canvas {
    width: 100% !important;
    height: 300px !important;
    max-width: 100vw !important;
  }
}

@media (max-width: 480px) {
  .reach-content { padding: 60px 20px 40px; }
  .reach-text    { font-size: 18px; line-height: 1.9; }
}

@media (max-width: 375px) {
  .reach-content { padding: 56px 16px 36px; }
}


/* ── Contact ── */

@media (max-width: 768px) {
  .contact     { padding: 100px 24px 80px; align-items: flex-start; }
  .contact-sub { margin-bottom: 44px; max-width: 100%; }
  .form-row    { grid-template-columns: 1fr; gap: 0; }
  .form-field  { width: 100%; }
  .form-field label { word-break: break-word; }
  .submit-btn  {
    align-self: stretch;
    width: 100%;
    text-align: center;
    padding: 18px 32px;
    min-height: 48px;
  }
  .submit-btn:hover { padding: 18px 32px; }
  .form-field input,
  .form-field textarea { min-height: 48px; width: 100%; }
}

@media (max-width: 480px) {
  .contact       { padding: 80px 20px 64px; }
  .contact-label { letter-spacing: 3px; }
  .contact-title { letter-spacing: 1px; margin-bottom: 16px; }
  .contact-sub   { font-size: 16px; margin-bottom: 36px; }
  .form-field    { margin-bottom: 28px; }
  .form-field label { letter-spacing: 2px; }
  .success-modal { padding: 56px 36px; }
}

@media (max-width: 375px) {
  .contact { padding: 72px 16px 56px; }
}


/* ── Footer ── */

@media (max-width: 768px) {
  footer {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 48px 24px;
    text-align: center;
  }
  .footer-col--center,
  .footer-col--right  { text-align: center; align-items: center; }
  .footer-disclaimer  { padding: 0 24px 32px; }
}

@media (max-width: 480px) {
  footer             { padding: 40px 20px; gap: 28px; }
  .footer-logo       { letter-spacing: 4px; }
  .footer-disclaimer { padding: 0 20px 28px; }
}

@media (max-width: 375px) {
  footer             { padding: 36px 16px; }
  .footer-disclaimer { padding: 0 16px 24px; }
}


/* ── Modals ── */

@media (max-width: 768px) {
  .modal-panel { padding: 40px 28px; }
}

@media (max-width: 480px) {
  .modal-panel { padding: 32px 20px; }
  .modal-title { font-size: 28px; }
}


/* ── Preloader ── */

@media (max-width: 480px) {
  #preloader-tagline {
    font-size: clamp(13px, 4vw, 20px);
    letter-spacing: 0.25em;
  }
}