/* =========================================================
   JEAA — Responsive overrides (tablet + mobile)
   Loaded AFTER the page's inline <style>, so cascade handles
   specificity. Targets the 3 public pages: Home, What We Offer,
   Join JEAA.

   Breakpoints:
     ≥ 1024    desktop (default, untouched)
     640-1023  tablet
     < 640     mobile
   ========================================================= */

/* Hide mobile-only scroll hint by default (shown again inside mobile media query) */
.pp-scroll-hint { display: none; }

/* ========================= NARROW TABLET (640-899) ========================= */
/* Extra-tight nav when horizontal room is scarce (iPad portrait 820px, etc.) */
@media (min-width: 640px) and (max-width: 899px) {
  nav.top {
    gap: 4px !important;
    padding: 8px 6px 8px 12px !important;
  }
  nav.top .brand small { display: none !important; }
  nav.top .brand img { height: 22px !important; }
  nav.top .links a {
    font-size: 11.5px !important;
    padding: 6px 7px !important;
  }
  nav.top .lang-switch { padding: 2px !important; }
  nav.top .lang-opt { font-size: 10.5px !important; padding: 4px 7px !important; }
  nav.top .cta {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  nav.top .cta .arrow { display: none !important; }
}

/* ========================= TABLET (<= 1023px) ========================= */
@media (max-width: 1023px) {

  /* Force entry-animated elements visible on tablet too */
  .pp-badge, .pp-card, .pp-stat, .sp-slide, .sp-mark,
  .sp-slide .sp-meta > *, .vmv-card--dyn,
  .whats-band .title, .whats-band .col {
    opacity: 1 !important;
    transform: none !important;
  }

  /* --- Disable partner constellation animations on touch devices --- */
  /* Kill the dotted sine-wave rails (SVG behind the badges) */
  .pp-stage > svg,
  .pp-stage svg.pp-rails,
  .pp-rail {
    display: none !important;
  }
  /* Kill the floating badge animation (jittery on mobile) */
  .pp-badge,
  .pp-badge.in,
  .pp-badge.in:nth-child(even),
  .pp-badge.in:nth-child(3n) {
    animation: none !important;
  }

  /* --- Nav: keep pill shape, slight shrink --- */
  nav.top {
    width: calc(100% - 20px) !important;
    padding: 8px 8px 8px 14px !important;
    height: 58px !important;
    top: 12px !important;
    gap: 6px !important;
  }
  nav.top .brand { gap: 8px !important; }
  nav.top .brand small {
    font-size: 9.5px !important;
    letter-spacing: 0.14em !important;
    white-space: nowrap !important;
  }
  nav.top .links { gap: 2px !important; }
  nav.top .links a {
    font-size: 12.5px !important;
    padding: 6px 9px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }
  nav.top .lang-switch { padding: 3px !important; gap: 2px !important; }
  nav.top .lang-opt { font-size: 11px !important; padding: 5px 8px !important; }
  nav.top .cta {
    padding: 9px 14px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
    gap: 6px !important;
  }
  nav.top .cta .arrow { margin-left: 2px; }

  /* --- Hero --- */
  .hero h1 {
    font-size: clamp(64px, 11vw, 120px) !important;
    line-height: 0.95 !important;
  }
  .hero .sub { font-size: clamp(16px, 2vw, 20px) !important; max-width: 44ch !important; }
  .hero .cta-row .btn-pill { padding: 11px 20px !important; font-size: 14px !important; }
  .hero .proof { gap: 24px !important; }
  .hero .proof .metric .num { font-size: 22px !important; }
  .hero .proof .sep { height: 22px !important; }
  .hero .scroll-ind { bottom: 20px !important; }

  /* --- Section heads --- */
  .section-head { margin-bottom: 48px !important; gap: 20px !important; }
  .section-head h2 { font-size: clamp(34px, 5vw, 56px) !important; }

  /* --- Feature block (JE Alto Adige) --- */
  .feature--with-logo { gap: 32px !important; }
  .feature-logo { width: 120px !important; }

  /* --- Network stats --- */
  .network { padding: 44px 32px !important; }
  .network-head {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding-bottom: 32px !important;
    margin-bottom: 36px !important;
  }
  .network-logo { width: 130px; height: 90px; }
  .network-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
  }
  .network-stats .stat {
    padding: 20px 20px !important;
    border-right: 1px solid var(--stroke) !important;
    border-bottom: 1px solid var(--stroke) !important;
  }
  .network-stats .stat:nth-child(2n) { border-right: 0 !important; }
  .network-stats .stat:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .network-stats .stat:last-child { grid-column: 1 / -1; border-right: 0 !important; }
  .network-stats .stat:last-child:nth-child(odd) { border-bottom: 0 !important; }
  .stat .big { font-size: clamp(32px, 5vw, 44px) !important; }

  /* --- VMV grid --- */
  .vmv-grid { grid-template-columns: 1fr !important; }

  /* --- Partners row --- */
  .pp-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    grid-template-columns: none !important;
    gap: 16px !important;
  }
  .pp-badge {
    flex: 0 1 calc((100% - 16px * 3) / 4) !important;
    min-width: 0 !important;
  }
  .pp-badge--featured {
    grid-column: auto !important;
    max-width: 180px !important;
  }

  /* --- What We Offer service cards --- */
  .service { padding: 32px 28px !important; }

  /* --- Footer --- */
  footer .inner { grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; }
  footer .logo-block { grid-column: 1 / -1; }
}


/* ========================= MOBILE (<= 639px) ========================= */
@media (max-width: 639px) {

  body { font-size: 16px; }

  /* ============ NAV — hamburger mode ============ */
  nav.top {
    width: calc(100% - 16px) !important;
    padding: 8px 8px 8px 16px !important;
    height: 58px !important;
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    max-width: 100vw !important;
    /* Safari iOS fix: solid-ish bg + will-change to prevent scroll flicker */
    background: rgba(8,10,14,0.88) !important;
    -webkit-transform: translateX(-50%) translateZ(0) !important;
    transform: translateX(-50%) translateZ(0) !important;
    will-change: transform;
  }
  nav.top .brand {
    gap: 10px !important;
    padding: 4px 4px !important;
    max-width: calc(100% - 58px) !important;
  }
  nav.top .brand img {
    height: 20px !important;
    width: auto !important;
    max-width: 72px !important;
    display: block !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
  }
  /* Show "Junior Enterprise Alto Adige" next to the mark on mobile */
  nav.top .brand small {
    display: block !important;
    font-size: 8.5px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.72) !important;
    max-width: 140px !important;
    /* Clip "Alto Adige · Südtirol" — replace content via ::before */
    font-size: 0 !important;
  }
  nav.top .brand small::before {
    content: "Junior Enterprise\A Alto Adige";
    white-space: pre-line;
    display: inline-block;
    font-size: 8.5px;
    letter-spacing: 0.14em;
  }

  /* Hide desktop links & cta by default on mobile */
  nav.top .links,
  nav.top .cta,
  nav.top .lang-switch { display: none !important; }

  /* Show hamburger button */
  nav.top .nav-burger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
    flex-shrink: 0;
  }
  nav.top .nav-burger span {
    width: 16px; height: 1.5px; background: #fff;
    position: relative;
    transition: transform 240ms ease, opacity 160ms ease;
  }
  nav.top .nav-burger span::before,
  nav.top .nav-burger span::after {
    content:""; position: absolute; left: 0;
    width: 16px; height: 1.5px; background: #fff;
    transition: transform 240ms ease;
  }
  nav.top .nav-burger span::before { top: -5px; }
  nav.top .nav-burger span::after  { top:  5px; }
  nav.top.is-open .nav-burger span { background: transparent; }
  nav.top.is-open .nav-burger span::before { transform: translateY(5px) rotate(45deg); }
  nav.top.is-open .nav-burger span::after  { transform: translateY(-5px) rotate(-45deg); }

  /* Hamburger panel */
  .nav-panel {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(0,120,191,0.22), transparent 60%),
      radial-gradient(100% 60% at 80% 100%, rgba(51,153,214,0.14), transparent 65%),
      linear-gradient(180deg, #0a1420 0%, #070d16 60%, #05090f 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 99;
    display: flex !important;
    flex-direction: column;
    padding: 92px 24px 40px;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity 280ms ease, transform 320ms cubic-bezier(.2,.9,.25,1);
  }
  .nav-panel.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .nav-panel a {
    color: #fff;
    text-decoration: none;
    font-family: var(--display);
    font-size: 32px;
    letter-spacing: -0.01em;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .nav-panel a .arrow {
    color: rgba(255,255,255,0.4);
    font-size: 20px;
  }
  .nav-panel .panel-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 28px;
  }
  /* ---- Language switcher (mobile menu) — elegant segmented control ---- */
  .nav-panel .panel-footer .lang-switch {
    display: inline-flex !important;
    align-self: flex-start;
    gap: 0;
    padding: 4px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .nav-panel .panel-footer .lang-switch .lang-opt {
    background: transparent !important;
    border: 0 !important;
    color: rgba(255,255,255,0.55) !important;
    font-family: var(--sans) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    min-width: 52px !important;
    cursor: pointer;
    transition: color 220ms ease, background 280ms ease, box-shadow 280ms ease;
  }
  .nav-panel .panel-footer .lang-switch .lang-opt:hover {
    color: rgba(255,255,255,0.9) !important;
  }
  .nav-panel .panel-footer .lang-switch .lang-opt.is-active {
    background: var(--jeaa-blue) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(0,120,191,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
  }
  .nav-panel .panel-footer .cta {
    display: inline-flex;
    align-items: center; gap: 8px;
    align-self: flex-start;
    font-size: 14px;
    font-weight: 500;
    background: var(--jeaa-blue);
    color: #fff;
    padding: 12px 22px;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.08);
  }

  /* ============ HERO ============ */
  .hero { min-height: calc(100vh - 20px); }
  .hero .content { padding: 0 20px; gap: 22px; }
  .hero h1 {
    font-size: clamp(52px, 16vw, 80px) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.04em !important;
  }
  .hero .pill { font-size: 10.5px !important; padding: 7px 14px 7px 10px !important; }
  .hero .sub {
    font-size: 15px !important;
    line-height: 1.5 !important;
    max-width: 38ch !important;
  }
  .hero .cta-row { gap: 10px; flex-direction: column; width: 100%; max-width: 280px; }
  .hero .cta-row .btn-pill {
    width: 100%;
    justify-content: center;
    padding: 13px 20px !important;
    font-size: 15px !important;
  }
  .hero .proof {
    gap: 16px !important;
    font-size: 12px;
  }
  .hero .proof .metric .num { font-size: 18px !important; }
  .hero .proof .metric .cap { font-size: 9.5px !important; letter-spacing: 0.14em !important; margin-top: 4px !important; }
  .hero .proof .sep { display: none; }
  .hero .scroll-ind { display: none !important; }

  /* ============ Section inner padding ============ */
  .section-inner {
    padding: 72px 20px !important;
  }
  .section-head { margin-bottom: 36px !important; }
  .section-head h2 { font-size: clamp(30px, 8vw, 44px) !important; line-height: 1.06 !important; }
  .section-head .eyebrow { font-size: 10.5px !important; }

  /* ============ WHATS JEAA ============ */
  .whats-band { padding: 56px 20px 48px !important; }
  .whats-band .title { font-size: 18px !important; margin-bottom: 36px !important; }
  .whats-band .cols { grid-template-columns: 1fr !important; gap: 36px !important; }
  .whats-band .col .q { font-size: 15px !important; }
  .whats-band .col .a { font-size: 13px !important; max-width: 26ch !important; }

  /* ============ Feature block ============ */
  .feature, .feature--with-logo { padding: 32px 24px !important; }
  .feature--with-logo { grid-template-columns: 1fr !important; gap: 20px !important; }
  .feature-logo { width: 96px !important; margin: 0 auto !important; }
  .feature h2 { font-size: clamp(32px, 8vw, 44px) !important; margin-bottom: 18px !important; text-align: center; }
  .feature p.lede { font-size: 15px !important; line-height: 1.55 !important; text-align: center; }

  /* ============ Partners & Projects ============ */
  .pp-wrap { padding: 0; }
  .pp-head .eyebrow { font-size: 10.5px !important; }
  .pp-head h2 { font-size: clamp(28px, 8vw, 40px) !important; }
  .pp-head .lead { font-size: 14px !important; margin-bottom: 0 !important; }
  .pp-head { margin-bottom: 8px !important; padding-bottom: 0 !important; }

  /* --- Partner mobile: editorial press-kit row (variable-width white pills) --- */
  .pp-stage {
    min-height: 0 !important;
    padding: 0 !important;
    margin-top: -8px !important;
    position: relative !important;
  }
  .pp-halo { display: none !important; }
  .pp-rails { display: none !important; }
  .pp-scroll-hint { display: none !important; }
  .pp-stage::before {
    content: '' !important;
    position: absolute !important;
    inset: -10% -15% auto -15% !important;
    height: 60% !important;
    background: radial-gradient(60% 70% at 50% 30%, rgba(0,120,191,0.20), transparent 75%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    display: block !important;
  }

  .pp-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 14px 20px !important;
    margin: 0 !important;
    overflow: visible !important;
    max-width: 100% !important;
    grid-template-columns: none !important;
    border: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .pp-badge {
    position: relative !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 92px !important;
    max-width: 150px !important;
    aspect-ratio: auto !important;
    height: 64px !important;
    border-radius: 14px !important;
    padding: 10px 16px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f5f8fb 100%) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.25) inset,
      0 8px 20px -8px rgba(0,0,0,0.5),
      0 0 0 1px rgba(0,120,191,0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transform: translateY(8px) scale(0.96) !important;
    overflow: hidden !important;
    animation: ppFadeUp 560ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease !important;
  }
  .pp-badge:nth-child(1) { animation-delay: 40ms !important; }
  .pp-badge:nth-child(2) { animation-delay: 110ms !important; }
  .pp-badge:nth-child(3) { animation-delay: 180ms !important; }
  .pp-badge:nth-child(4) { animation-delay: 250ms !important; }
  .pp-badge:nth-child(5) { animation-delay: 320ms !important; }
  .pp-badge:nth-child(6) { animation-delay: 390ms !important; }
  .pp-badge:nth-child(7) { animation-delay: 460ms !important; }

  .pp-badge::before,
  .pp-badge::after { display: none !important; }

  .pp-badge:active {
    transform: translateY(1px) scale(0.98) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.25) inset,
      0 4px 12px -6px rgba(0,0,0,0.45),
      0 0 0 1px rgba(0,120,191,0.14) !important;
  }

  .pp-badge .pp-logo {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    transition: none !important;
    position: relative !important;
    z-index: 1 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Per-brand width tuning for visual rhythm */
  .pp-badge[data-brand="ey"]          { min-width: 88px !important; max-width: 108px !important; }
  .pp-badge[data-brand="rothschild"]  { min-width: 140px !important; max-width: 160px !important; }
  .pp-badge[data-brand="loacker"]     { min-width: 108px !important; max-width: 128px !important; }
  .pp-badge[data-brand="unibz"]       { min-width: 100px !important; max-width: 120px !important; }
  .pp-badge[data-brand="noi"]         { min-width: 130px !important; max-width: 150px !important; }
  .pp-badge[data-brand="innovalley"]  { min-width: 130px !important; max-width: 150px !important; }
  .pp-badge[data-brand="coffychat"]   { min-width: 116px !important; max-width: 140px !important; }

  .pp-badge--featured { margin: 0 !important; grid-column: auto !important; }

  @keyframes ppFadeUp {
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .cmark { font-size: 22px !important; }
  .clients-track { gap: 44px !important; }

  /* Spotlight featured card — stack */
  .sp-slide { grid-template-columns: 1fr !important; }
  .sp-art {
    border-right: 0 !important;
    border-bottom: 1px solid var(--stroke) !important;
    min-height: 200px !important;
    padding: 28px !important;
  }
  .spotlight__frame { min-height: 580px !important; }
  .sp-mark { font-size: 30px !important; }
  .sp-meta { padding: 28px !important; }
  .sp-title { font-size: 26px !important; }
  .sp-desc { font-size: 14px !important; }

  /* ============ VMV ============ */
  .vmv-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .vmv-card { padding: 28px 24px !important; }
  .vmv-card h3 { font-size: clamp(22px, 6vw, 28px) !important; }
  .vmv-card p { font-size: 15px !important; }
  .vmv-value .name { font-size: 17px !important; }
  .vmv-value .desc { font-size: 13px !important; }

  /* ============ JE Italy network ============ */
  .network { padding: 32px 22px !important; }
  .network-head { gap: 18px !important; padding-bottom: 24px !important; margin-bottom: 24px !important; }
  .network-head .copy { min-width: 0 !important; }
  .network-head .copy h3 { font-size: 26px !important; }
  .network-head .copy p { font-size: 14px !important; max-width: 100% !important; }
  .network-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }
  .network-stats .stat {
    padding: 16px !important;
    border-right: 1px solid var(--stroke) !important;
    border-bottom: 1px solid var(--stroke) !important;
  }
  .network-stats .stat:nth-child(2n) { border-right: 0 !important; padding-left: 16px !important; }
  .network-stats .stat:nth-child(2n+1) { padding-left: 0 !important; padding-right: 16px !important; }
  .network-stats .stat:last-child { grid-column: 1 / -1; border-bottom: 0 !important; padding: 20px 0 0 !important; }
  .stat .big { font-size: 30px !important; }
  .stat .label { font-size: 11px !important; margin-top: 6px !important; }

  /* ============ Team ============ */
  /* Hide nav arrows on mobile — users swipe directly */
  .carousel-nav { display: none !important; }
  /* Wider, more tactile cards; hide scrollbar */
  #carousel-team {
    gap: 14px !important;
    padding: 4px 20px 20px !important;
    margin: 0 -20px !important;
    scroll-padding-left: 20px !important;
    scrollbar-width: none !important;
  }
  #carousel-team::-webkit-scrollbar { display: none !important; }
  .team-card {
    flex: 0 0 80% !important;
    max-width: 300px !important;
    scroll-snap-align: start !important;
  }
  .team-card .meta { padding: 14px 16px 16px !important; }
  .team-card .meta .role { font-size: 10.5px !important; letter-spacing: 0.12em !important; }
  .team-card .meta .name { font-size: 17px !important; }

  /* Team blurb line */
  .team-blurb, .team-line { font-size: 16px !important; }

  /* ============ CTA cards ============ */
  .cta-card { padding: 40px 24px !important; }
  .cta-card h2 { font-size: clamp(30px, 8vw, 44px) !important; }
  .cta-card p { font-size: 14px !important; }
  .cta-card .actions { flex-direction: column; gap: 10px; }
  .cta-card .actions .btn-pill { width: 100%; justify-content: center; }

  /* ============ Footer ============ */
  footer { padding: 40px 20px 24px !important; }
  footer .inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  footer .logo-block p { max-width: none !important; font-size: 14px; }
  footer .bottom { flex-direction: column; gap: 8px; align-items: flex-start; font-size: 10px !important; }

  /* ============ Cookie banner ============ */
  .cc-card, .cookie-card { max-width: calc(100vw - 24px) !important; margin: 12px !important; padding: 20px !important; }

  /* ============ Carousel nav buttons ============ */
  .carousel-nav button { width: 38px !important; height: 38px !important; }

  /* ============ WHAT WE OFFER — service cards ============ */
  .service { padding: 28px 22px !important; border-radius: 20px !important; }
  .service h3 { font-size: clamp(28px, 8vw, 38px) !important; }
  .service .blurb { font-size: 14px !important; }
  .service .bullets li { font-size: 13px !important; }

  /* Offer hero */
  .offer-hero h1 { font-size: clamp(40px, 10vw, 60px) !important; }
  .offer-hero .sub { font-size: 15px !important; }
  .offer-hero .meta { flex-direction: column; align-items: flex-start; gap: 12px !important; font-size: 11px !important; }

  /* Four-steps */
  .steps-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .step { padding: 24px 20px !important; }

  /* ============ JOIN JEAA ============ */
  .join-hero h1 { font-size: clamp(44px, 12vw, 70px) !important; line-height: 0.96 !important; }
  .join-hero .sub { font-size: 15px !important; }
  .join-hero .cta-row { flex-direction: column; width: 100%; max-width: 280px; gap: 10px; }
  .join-hero .cta-row .btn-pill { width: 100%; justify-content: center; }

  /* Countdown */
  .countdown { gap: 14px !important; }
  .countdown .cd-num { font-size: clamp(40px, 12vw, 60px) !important; }
  .countdown .cd-lbl { font-size: 10px !important; }

  /* Why-join cards */
  .why-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .why-card { padding: 28px 24px !important; }
  .why-card h3 { font-size: 24px !important; }
  .why-card p { font-size: 14px !important; }

  /* Faculty cards */
  .faculty-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .faculty-card { padding: 24px 22px !important; }
  .faculty-card h4 { font-size: 20px !important; }
  .faculty-card p { font-size: 13.5px !important; }

  /* Requirements list */
  .requirements li { font-size: 14px !important; padding: 12px 0 !important; }

  /* Final CTA */
  .join-final h2 { font-size: clamp(34px, 10vw, 52px) !important; }
  .join-final .date { font-size: clamp(64px, 22vw, 110px) !important; }
  .join-final p { font-size: 14px !important; }

  /* Quote */
  .quote-block { padding: 32px 24px !important; }
  .quote-block .quote { font-size: clamp(22px, 5.6vw, 30px) !important; }
  .quote-block .attr { font-size: 12px !important; }
}


/* =================== EXTRA-SMALL (<= 380px) =================== */
@media (max-width: 380px) {
  .section-inner { padding: 60px 16px !important; }
  .hero h1 { font-size: 48px !important; }
  .section-head h2 { font-size: 28px !important; }
  /* .pp-row stays as marquee from mobile rules above */
}


/* =================== UTILITIES =================== */
/* Hamburger button hidden by default on desktop */
nav.top .nav-burger { display: none; }
.nav-panel { display: none; }
@media (max-width: 639px) {
  .nav-panel { display: flex; }
}

/* Prevent horizontal overflow anywhere */
html, body { overflow-x: hidden; }

/* =========================================================
   MOBILE: force entry-animated elements visible.
   Many components use .in / .is-active / IntersectionObserver
   to trigger reveal animations. On mobile Safari the observer
   can fail to trigger when elements are already past the viewport
   at load, leaving things hidden or transformed off-screen.
   We skip the animation and show everything flat on mobile.
   ========================================================= */
@media (max-width: 639px) {
  .pp-badge,
  .pp-card,
  .pp-stat,
  .sp-slide,
  .sp-mark,
  .sp-slide .sp-meta > *,
  .vmv-card--dyn,
  .vmv-card--dyn [data-vmv-row],
  .whats-band .title,
  .whats-band .col,
  .vmv-row-line {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
  .vmv-row-line { transform: scaleX(1) !important; transform-origin: left center; }
  .sp-progress span { transform: scaleX(1) !important; }
}