/* ══════════════════════════════════════════════════════════
   NOVENTRA — MOBILE STYLESHEET
   Supplements the per-page CSS. All rules are scoped to
   max-width: 768px (hamburger breakpoint) and 480px (narrow).
   Desktop layout is completely untouched.
══════════════════════════════════════════════════════════ */

/* ── HAMBURGER BUTTON (hidden on desktop) ── */
#nav-hamburger {
  display: none;
}
#mobile-nav-overlay {
  display: none;
}

/* ══════════════════════════════════════════
   BREAKPOINT: 768px — tablets & phones
══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─── NAV ─────────────────────────────── */
  nav {
    padding: 0 20px !important;
    height: 60px !important;
  }

  /* Hide desktop nav links & CTA */
  .nav-links,
  .nav-cta {
    display: none !important;
  }

  /* Show hamburger */
  #nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
    z-index: 1001;
    border-radius: 3px;
    transition: background 0.2s;
  }
  #nav-hamburger:hover {
    background: rgba(255,255,255,0.06);
  }
  #nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #C8D4E0;
    border-radius: 1px;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1),
                opacity   0.2s ease,
                width     0.2s ease;
    transform-origin: center;
  }

  /* Animated X when open */
  body.nav-open #nav-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  body.nav-open #nav-hamburger span:nth-child(2) {
    opacity: 0;
    width: 0;
  }
  body.nav-open #nav-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ─── MOBILE NAV OVERLAY ─────────────── */
  #mobile-nav-overlay {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 7, 10, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 850;
    display: flex;
    flex-direction: column;
    padding: 32px 28px 40px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.26s ease, transform 0.26s ease;
    overflow-y: auto;
    border-top: 1px solid rgba(255,255,255,0.06);
  }

  body.nav-open #mobile-nav-overlay {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
  }

  /* Prevent body scroll while menu is open */
  body.nav-open {
    overflow: hidden;
  }

  #mobile-nav-overlay a {
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    font-size: 1.65rem;
    color: #C8D4E0;
    text-decoration: none;
    letter-spacing: -0.02em;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: block;
    transition: color 0.2s, padding-left 0.2s;
  }
  #mobile-nav-overlay a:hover {
    color: #F0F4F8;
    padding-left: 6px;
  }
  #mobile-nav-overlay a:first-child {
    border-top: 1px solid rgba(255,255,255,0.06);
  }

  #mobile-nav-overlay .mobile-nav-cta {
    margin-top: 28px;
    background: #1E6FFF;
    color: #fff !important;
    text-align: center;
    border-radius: 3px;
    font-family: 'DM Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 18px !important;
    border-bottom: none !important;
    border-top: none !important;
    transition: opacity 0.2s !important;
  }
  #mobile-nav-overlay .mobile-nav-cta:hover {
    opacity: 0.85;
    padding-left: 0 !important;
  }

  /* Lang switch stays visible in nav */
  .lang-switch {
    margin-left: 0;
  }

  /* ─── LAYOUT ─────────────────────────── */
  section {
    padding: 70px 0 !important;
  }

  .container {
    padding: 0 20px !important;
  }

  /* Hero */
  .hero-section {
    padding: 80px 0 52px !important;
    min-height: auto !important;
  }
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  /* Keep the interactive ring visible — it's the signature element */
  .hero-right {
    display: flex !important;
    align-items: center;
    justify-content: center;
    order: 2; /* ring goes below text */
  }
  .hero-left {
    order: 1;
  }
  /* Scale the ring down for mobile */
  .ring-wrap {
    width: clamp(200px, 70vw, 300px) !important;
    height: clamp(200px, 70vw, 300px) !important;
  }
  .hero-sub {
    max-width: 100% !important;
  }
  .hero-actions {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Stats bar */
  .stats-bar-inner {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stat-item {
    padding: 20px 16px !important;
  }
  .stat-item:nth-child(2) {
    border-right: none !important;
  }
  .stat-item:nth-child(3) {
    border-right: 1px solid rgba(255,255,255,0.06) !important;
  }

  /* About / approach grids */
  .about-grid,
  .approach-grid,
  .asset-grid,
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Pillar cards — already 1 col at 960px but enforce */
  .pillars-grid {
    grid-template-columns: 1fr !important;
  }
  .pillar-card {
    padding: 30px 24px !important;
  }

  /* Values */
  .values-grid {
    grid-template-columns: 1fr !important;
  }

  /* Services / offerings grids */
  .services-grid,
  .offerings-grid,
  .markets-grid,
  .synergy-grid,
  .spaces-grid,
  .revenue-grid {
    grid-template-columns: 1fr !important;
  }

  /* Jobs page */
  .job-body-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .why-grid {
    grid-template-columns: 1fr !important;
  }
  .process-steps {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .cta-box {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 36px 24px !important;
  }

  /* Forms */
  .form-row {
    grid-template-columns: 1fr !important;
  }
  .contact-form {
    padding: 28px 20px !important;
  }

  /* Footer */
  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Cookie banner */
  #cookie-banner {
    padding: 16px 20px !important;
    flex-direction: column;
    align-items: flex-start;
  }
  .cookie-actions {
    width: 100%;
    flex-direction: column;
  }
  .cookie-btn {
    width: 100%;
    text-align: center;
  }

  /* Section headers */
  .section-header {
    margin-bottom: 40px !important;
  }

  /* Trainer cards — full width */
  .trainer-grid {
    grid-template-columns: 1fr !important;
  }
  .trainer-card {
    padding: 28px 20px !important;
  }

  /* Noventra-specific page heroes */
  .hero-content-wrap {
    grid-template-columns: 1fr !important;
  }

} /* end 768px */


/* ══════════════════════════════════════════
   BREAKPOINT: 480px — small phones
══════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Further reduce typography */
  h1 { font-size: clamp(2rem, 9vw, 3rem) !important; }
  h2 { font-size: clamp(1.5rem, 7vw, 2.2rem) !important; }

  /* Hero */
  .hero-title {
    font-size: clamp(2rem, 9vw, 3rem) !important;
  }
  .hero-actions {
    flex-direction: column;
  }
  .btn-primary,
  .btn-ghost {
    width: 100%;
    text-align: center;
    padding: 14px 20px !important;
  }

  /* Stats: keep 2-col but shrink */
  .stat-num {
    font-size: 1.9rem !important;
  }

  /* Process steps → single column */
  .process-steps {
    grid-template-columns: 1fr !important;
  }

  /* Section padding tighter */
  section {
    padding: 60px 0 !important;
  }

  /* Pillar / offer cards inner padding */
  .pillar-card,
  .offering-card,
  .value-card {
    padding: 24px 18px !important;
  }

} /* end 480px */