/**
 * WakeUp Labs - Mobile / Responsive CSS
 * PROPORTIONAL SCALING: everything scales with viewport width.
 * Reference design: 1440px desktop. Content shrinks proportionally.
 * Uses clamp() and vw units — same layout, just smaller.
 * Does NOT affect desktop (min-width: 769px) styles.
 */

/* ============================================ */
/* ===== GLOBAL TOUCH OPTIMIZATIONS ========== */
/* ============================================ */

* {
  -webkit-tap-highlight-color: transparent;
}

html {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  background-color: #000 !important;
}
body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  position: relative;
  overflow-x: hidden;
}

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* Subtle floating animation for scroll hints (mobile only) */
@keyframes scrollHintFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (max-width: 767px) {
  .scroll-hint-float {
    animation: scrollHintFloat 2.5s ease-in-out infinite;
  }
}

@media (max-width: 767px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 767px) {
  ::-webkit-scrollbar {
    display: none;
  }
  body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
}


/* ============================================ */
/* ===== HEADER - MOBILE RESPONSIVE ========== */
/* ============================================ */

@media (max-width: 767px) {
  #site-header .max-w-\[1440px\] {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #site-header .md\:hidden.absolute {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}


/* ============================================ */
/* ===== LOADING SCREEN - PROPORTIONAL ======= */
/* ============================================ */

@media (max-width: 767px) {
  /* Full screen loading — outer container stays black (Safari iOS reads edge color for browser bars) */
  .fixed.inset-0.bg-black.z-\[100\] {
    padding: 0 !important;
  }
  .loading-red-container {
    border-radius: 0 !important;
  }

  /* WAKE UP! text — bigger on mobile */
  .loading-red-container h1 {
    font-size: clamp(3rem, 16vw, 6rem) !important;
    letter-spacing: -0.03em;
  }

  /* Subtitle — bigger */
  .loading-red-container h1 + div p,
  .loading-red-container .mt-\[-5px\] p {
    font-size: clamp(14px, 4.5vw, 24px) !important;
  }

  /* Tetrahedron — center */
  #tetrahedron-container {
    opacity: 0.4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #tetrahedron-container canvas {
    max-width: 100% !important;
    max-height: 100% !important;
    margin: auto !important;
  }

  /* Top right links — more distance from top edge */
  .loading-red-container > .absolute.top-4 {
    gap: clamp(12px, 4vw, 20px) !important;
    top: clamp(16px, 5vw, 32px) !important;
    right: clamp(12px, 3vw, 20px) !important;
  }
  .loading-red-container > .absolute.top-4 a {
    font-size: clamp(8px, 2.5vw, 12px) !important;
    letter-spacing: 0.5px !important;
  }

  /* ENTRA button — proportional */
  .loading-red-container button {
    padding: clamp(8px, 2.5vw, 14px) clamp(16px, 5vw, 28px) !important;
    font-size: clamp(9px, 2.8vw, 12px) !important;
  }

  /* Trust signal avatars — proportional */
  .loading-red-container .flex.-space-x-2 img {
    width: clamp(16px, 4.5vw, 24px) !important;
    height: clamp(16px, 4.5vw, 24px) !important;
  }
  .loading-red-container .inline-flex span {
    font-size: clamp(7px, 2.2vw, 11px) !important;
  }

  /* Legal footer — proportional */
  .loading-red-container > .absolute.bottom-6 p {
    font-size: clamp(7px, 2vw, 10px) !important;
  }
}


/* ============================================ */
/* ===== HERO SECTION - PROPORTIONAL ========= */
/* ============================================ */

@media (max-width: 767px) {
  .hero-section {
    padding-bottom: 20px;
  }

  .hero-section .max-w-\[1440px\] {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* Main headline — large, fills the width per mockup */
  .hero-section h1 .text-5xl,
  .hero-section h1 div[class*="text-5xl"] {
    font-size: clamp(3.2rem, 14vw, 5rem) !important;
  }

  /* "OLTRE IL RUMORE" div — nudge down */
  .hero-section h1 > div.mt-\[-4px\] {
    margin-top: clamp(8px, 2vw, 16px) !important;
  }

  /* Vertical carousel — same size as main headline */
  .hero-section h1 .relative.overflow-hidden.text-primary {
    display: block !important;
    min-width: unset !important;
    width: 100% !important;
    height: 1.2em !important;
    font-size: 1em !important;
    margin-left: 0 !important;
    margin-top: 0.1em !important;
    transform: none !important;
  }

  /* Carousel inner text — reset top for bigger font-size */
  .hero-section h1 .relative.overflow-hidden.text-primary span {
    top: 0 !important;
  }

  /* Red square dot — visible on mobile, detectable for position-based animations */
  .graffiti-dot {
    display: inline-block !important;
    width: 0.18em !important;
    height: 0.18em !important;
    background: #E72300 !important;
    border-radius: 2px !important;
    opacity: 1 !important;
    margin-left: 0.12em !important;
    vertical-align: baseline !important;
    transform: none !important;
  }

  /* Title block — push up */
  .hero-section h1 {
    margin-top: -2rem !important;
  }

  /* Subtitle + trust signal block — push down for spacing */
  .hero-section p.text-lg {
    font-size: clamp(14px, 4vw, 20px) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 600 !important;
    color: #999 !important;
    margin-top: 3.5rem !important;
  }

  /* Trust signal — proportional */
  .hero-section .inline-flex .text-sm,
  .hero-section .inline-flex span[class*="text-"] {
    font-size: clamp(8px, 2.5vw, 14px) !important;
    letter-spacing: 0.03em;
  }

  .hero-section .w-9 {
    width: clamp(28px, 7vw, 38px) !important;
    height: clamp(28px, 7vw, 38px) !important;
  }

  /* Scroll indicator — same size as trust signal text */
  .hero-section .absolute.bottom-8 {
    bottom: 16px;
  }
  .hero-section .absolute.bottom-8 span.sm\:hidden {
    font-size: clamp(10px, 3vw, 15px) !important;
    letter-spacing: 0.05em !important;
    font-weight: 600 !important;
  }
}


/* ============================================ */
/* ===== LOADING SCREEN - MOBILE ============= */
/* ============================================ */

@media (max-width: 767px) {
  /* Position WAKE UP! text block at ~25% from top */
  .loading-red-container .pointer-events-auto.relative {
    margin-top: 22vh !important;
  }

  /* Big gap between subtitle and ENTRA (~65% from top) */
  .loading-red-container .mt-14 {
    margin-top: 18vh !important;
  }

  /* Trust banner spacing below ENTRA */
  .loading-red-container .mt-6 {
    margin-top: 6vh !important;
  }
}


/* ============================================ */
/* ===== EXPERIENCE CHOICE - PROPORTIONAL ==== */
/* ============================================ */

@media (max-width: 767px) {
  /* Experience choice — minimal overrides, Tailwind classes match Max's splash */

  /* Black background + no scroll */
  .fixed.inset-0.bg-black.z-\[96\] {
    overflow: hidden !important;
    background: #000 !important;
  }

  .loading-red-container {
    border-radius: 0 !important;
  }

  /* Hide grid background on mobile (performance) */
  .fixed.inset-0.bg-black.z-\[96\] > .absolute.inset-0.pointer-events-none.z-\[1\] {
    display: none !important;
  }

  /* Hide liquid sphere on mobile (performance) */
  #liquid-sphere-container {
    display: none !important;
  }

  /* Disable desktop translate on mobile cards */
  .fixed.inset-0.bg-black.z-\[96\] .flex-1 > div[class*="max-w-sm"] {
    transform: none !important;
  }

  /* Disable pill float animation on mobile — conflicts with scale transform causing jolt */
  .pill-float {
    animation: none !important;
  }

  /* Neon flash RED */
  @keyframes neonPulseRed {
    0%   { outline-color: rgba(239,68,68,0); box-shadow: 0 0 0 rgba(239,68,68,0); }
    15%  { outline-color: rgba(239,68,68,0.95); box-shadow: 0 0 24px rgba(239,68,68,0.9), 0 0 56px rgba(239,68,68,0.45); }
    100% { outline-color: rgba(239,68,68,0); box-shadow: 0 0 0 rgba(239,68,68,0); }
  }

  /* Neon flash BLUE */
  @keyframes neonPulseBlue {
    0%   { outline-color: rgba(59,130,246,0); box-shadow: 0 0 0 rgba(59,130,246,0); }
    15%  { outline-color: rgba(59,130,246,0.95); box-shadow: 0 0 24px rgba(59,130,246,0.9), 0 0 56px rgba(59,130,246,0.45); }
    100% { outline-color: rgba(59,130,246,0); box-shadow: 0 0 0 rgba(59,130,246,0); }
  }

  .pill-neon-red {
    outline: 2px solid rgba(239,68,68,0);
    outline-offset: 4px;
    animation: neonPulseRed 0.9s ease-out forwards !important;
  }

  .pill-neon-blue {
    outline: 2px solid rgba(59,130,246,0);
    outline-offset: 4px;
    animation: neonPulseBlue 0.9s ease-out forwards !important;
  }
}


/* ============================================ */
/* ===== SCROLL PIN CONTAINER - PROPORTIONAL = */
/* ============================================ */

@media (max-width: 767px) {
  .scroll-pin-container {
    height: 300vh !important;
  }

  .scroll-text-left,
  .scroll-text-right {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* First text — above center so tetrahedron is visible */
  .scroll-text-left {
    align-items: flex-start !important;
    padding-top: 18vh !important;
  }

  /* Second text — below center so tetrahedron is visible */
  .scroll-text-right {
    align-items: flex-end !important;
    padding-bottom: 18vh !important;
  }

  /* Scroll text — proportional */
  .scroll-text-left p,
  .scroll-text-right p {
    font-size: clamp(1.25rem, 5.5vw, 2.5rem) !important;
    line-height: 1.15 !important;
  }
}


/* ============================================ */
/* ===== THE LAB - SCROLL CARDS (MOBILE) ====== */
/* ============================================ */

@media (max-width: 767px) {
  /* Scroll container for title reveal + 3 sequential card phases + bg transition */
  .lab-section > .relative {
    height: 500vh !important;
  }

  /* Sticky viewport */
  .lab-section .sticky {
    position: sticky !important;
    top: 0 !important;
    height: 100dvh !important;
    min-height: auto !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Title — bigger, spacing from red section above */
  .lab-title {
    position: relative !important;
    top: auto !important;
    margin-top: 80px !important;
    margin-bottom: 0 !important;
  }

  .lab-title .text-7xl {
    font-size: clamp(2.5rem, 10vw, 3.5rem) !important;
    line-height: 0.85 !important;
  }

  /* Card container (NOT the sticky — target only the max-w-[1400px] child) */
  .lab-section .max-w-\[1400px\] {
    position: relative !important;
    width: 100% !important;
    height: 380px !important;
    margin-top: 32px !important;
    padding: 0 !important;
    overflow: visible !important;
    gap: 0 !important;
  }

  /* Cards: absolute, centered with margin auto (NOT left:50%/xPercent) */
  .lab-card {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 85vw !important;
    max-width: 340px !important;
    height: 360px !important;
    max-height: none !important;
    aspect-ratio: unset !important;
  }

  .lab-card-inner {
    height: 100% !important;
  }

  /* Card inner content */
  .lab-card-content {
    padding: 24px !important;
  }

  .lab-card-num {
    font-size: clamp(48px, 14vw, 72px) !important;
    right: 12px !important;
    top: -12px !important;
  }

  .lab-card-content h3 {
    font-size: clamp(1.2rem, 5vw, 1.5rem) !important;
  }

  .lab-card-content p {
    font-size: clamp(13px, 3.5vw, 15px) !important;
  }

  /* Bullets — proportional */
  .lab-card-content .space-y-2 span {
    font-size: clamp(10px, 2.8vw, 12px) !important;
  }

  /* Disable tilt on mobile */
  .lab-card-inner {
    transform: none !important;
  }

  /* Accent line always visible on mobile (no hover needed) */
  .lab-card-accent-line {
    transform: scaleX(1) !important;
  }
}


/* ============================================ */
/* ===== BRANDS SECTION ====================== */
/* ============================================ */

@media (max-width: 767px) {
  /* Brands text — proportional */
  #brands .text-4xl {
    font-size: clamp(1.25rem, 5.5vw, 2rem) !important;
  }

  #brands .mb-32 {
    margin-bottom: 32px !important;
  }

  #brands {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}


/* ============================================ */
/* ===== PORTFOLIO SCROLL - HORIZONTAL ======= */
/* ============================================ */

@media (max-width: 767px) {
  .portfolio-scroll-section {
    height: 200vh;
    background-image: none !important;
  }
  .portfolio-scroll-section .sticky {
    background-image: none !important;
  }
  .portfolio-track {
    overflow: hidden !important;
  }

  .pss-card {
    width: 78vw;
    height: clamp(280px, 75vw, 400px);
  }

  .pss-card:nth-child(odd),
  .pss-card:nth-child(even) {
    margin-top: 0;
  }

  .portfolio-track {
    gap: 14px;
    padding: 0 16px;
  }

  .pss-header {
    padding: 0 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
  }

  .pss-header h3 {
    font-size: clamp(1.5rem, 7vw, 2.5rem) !important;
  }

  .pss-header-cta {
    font-size: 9px !important;
    padding: 10px 20px !important;
  }

  .pss-card-content {
    padding: clamp(14px, 4vw, 24px) !important;
  }

  .pss-card-title {
    font-size: clamp(16px, 4.5vw, 22px) !important;
  }

  .pss-card-cat {
    font-size: 8px !important;
  }

  .pss-card-client {
    font-size: 10px !important;
  }
}


/* ============================================ */
/* ===== MISSILE TITLE - FIT ONE LINE ======== */
/* ============================================ */

@media (max-width: 767px) {
  .missile-title {
    font-size: clamp(1.5rem, 7.5vw, 3rem) !important;
    white-space: nowrap !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .missile-letter {
    display: inline !important;
  }

  /* Rocket body — proportional */
  .missile-rocket-body {
    width: clamp(35px, 10vw, 50px) !important;
    height: clamp(140px, 40vw, 200px) !important;
  }
}


/* ============================================ */
/* ===== PROCESS STEPS - PROPORTIONAL ======== */
/* ============================================ */

@media (max-width: 767px) {
  .process-steps-section {
    height: 250vh;
  }

  .process-steps-section .text-center.mb-20 {
    margin-bottom: 1.5rem;
  }

  /* Section title — proportional */
  .process-steps-section h2 {
    font-size: clamp(1.5rem, 7vw, 2.5rem) !important;
  }

  .process-steps-section .font-mono {
    font-size: clamp(9px, 2.5vw, 12px) !important;
  }

  /* 2 columns on mobile */
  .process-steps-section .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(12px, 3vw, 20px) !important;
  }

  .process-step {
    max-width: 100% !important;
    padding: clamp(8px, 2vw, 16px);
  }

  /* Big number — much smaller */
  .process-step .absolute .text-\[120px\],
  .process-step .text-\[120px\],
  .process-step span[class*="text-\[120px\]"],
  .process-step span[class*="text-\[160px\]"] {
    font-size: clamp(40px, 12vw, 80px) !important;
  }

  /* Icons — smaller */
  .process-step svg {
    width: clamp(24px, 7vw, 40px) !important;
    height: clamp(24px, 7vw, 40px) !important;
  }

  .process-step .mb-8 {
    margin-bottom: 0.75rem;
  }

  .process-step .mt-12 {
    margin-top: 1.5rem;
  }

  /* Step title — proportional */
  .process-step h3 {
    font-size: clamp(12px, 3.5vw, 18px) !important;
    margin-bottom: 0.25rem;
  }

  /* Step description — proportional */
  .process-step p {
    font-size: clamp(10px, 2.8vw, 14px) !important;
  }
}


/* ============================================ */
/* ===== REVIEWS SECTION - PROPORTIONAL ====== */
/* ============================================ */

@media (max-width: 767px) {
  /* Stats section */
  .reviews-stats-section {
    padding-top: 40px !important;
    padding-bottom: 48px !important;
  }

  .reviews-stats-section .max-w-\[1400px\] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .reviews-stats-section .mb-20,
  .reviews-stats-section [style*="margin-bottom:80px"] {
    margin-bottom: 40px !important;
  }

  .reviews-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .stat-number {
    font-size: clamp(40px, 12vw, 72px) !important;
  }

  .stat-label {
    font-size: clamp(14px, 3.5vw, 18px) !important;
  }

  /* Scroll reviews section */
  .reviews-scroll-section {
    height: 200vh !important;
  }

  /* Hide grid overlay (quadretti) on mobile — pure black bg */
  .reviews-scroll-section .opacity-\[0\.03\] {
    display: none !important;
  }

  .reviews-header {
    padding: 0 16px !important;
    margin-bottom: 24px !important;
  }

  .reviews-header h3 {
    font-size: clamp(1.25rem, 5.5vw, 2rem) !important;
  }

  .reviews-header p {
    font-size: clamp(10px, 2.8vw, 13px) !important;
  }

  .reviews-track {
    gap: 14px !important;
    padding: 0 16px !important;
  }

  .review-card {
    width: 82vw !important;
    height: auto !important;
    min-height: 240px !important;
    padding: clamp(20px, 5vw, 28px) !important;
  }

  .review-card p {
    font-size: clamp(13px, 3.5vw, 15px) !important;
    line-height: 1.6 !important;
  }

  /* Trust banner */
  .trust-banner {
    padding: 20px 16px !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-top: 20px !important;
  }

  .trust-banner .text-3xl {
    font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
  }

  .trust-banner .text-base {
    font-size: clamp(10px, 2.8vw, 13px) !important;
  }

  .trust-banner .w-12 {
    width: 36px !important;
    height: 36px !important;
  }
}


/* ============================================ */
/* ===== SOLUTIONS SECTION - PROPORTIONAL ==== */
/* ============================================ */

@media (max-width: 767px) {
  /* Fix 4: Force pure black background on mobile */
  .solutions-section {
    height: 350vh !important;
    background: #000 !important;
  }

  /* Hide cursor follower on touch devices */
  .solutions-section .pointer-events-none.fixed {
    display: none !important;
  }

  /* Main content — tighter padding */
  .solutions-section .max-w-\[1200px\] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .solutions-section .sol-title {
    margin-bottom: 24px !important;
  }

  .solutions-section .sol-title h2 {
    font-size: clamp(1.75rem, 8vw, 3rem) !important;
  }

  /* Two-column → stacked on mobile */
  .solutions-section .flex.flex-col.md\:flex-row {
    gap: 20px !important;
  }

  /* Category names — smaller, horizontal on mobile */
  .sol-cat span {
    font-size: clamp(0.85rem, 3.5vw, 1.25rem) !important;
  }

  /* Category list — less gap */
  .solutions-section .w-full.md\:w-1\/3 {
    gap: 16px !important;
  }

  /* Items — smaller text */
  .sol-label {
    font-size: clamp(0.8rem, 3.2vw, 1.1rem) !important;
  }

  /* Item rows — tighter padding */
  .sol-item-row {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* Item number — smaller */
  .sol-item-row span.w-10 {
    width: 24px !important;
    font-size: 10px !important;
  }

  /* Items container — ensure min-height for stacked groups */
  .solutions-section .w-full.md\:w-2\/3 {
    min-height: 240px !important;
  }
}


/* ============================================ */
/* ===== TETRAHEDRON TRANSITION ============== */
/* ============================================ */

@media (max-width: 767px) {
  /* Tetrahedron SVG — smaller on mobile */
  [x-data="tetrahedronTransition()"] .sticky svg {
    width: 34vmin !important;
    height: 34vmin !important;
  }

  /* Red blur blob — smaller */
  [x-data="tetrahedronTransition()"] .w-\[500px\] {
    width: 130px !important;
    height: 130px !important;
  }

  /* MATERIALIZE text — smaller */
  [x-data="tetrahedronTransition()"] h2 {
    font-size: 11vw !important;
  }

  /* Labels — smaller text */
  [x-data="tetrahedronTransition()"] span.font-mono {
    font-size: clamp(7px, 2vw, 9px) !important;
    letter-spacing: 0.15em !important;
  }

  .tetra-label {
    font-size: clamp(7px, 2.2vw, 10px) !important;
    padding: 2px 5px !important;
  }
}


/* ============================================ */
/* ===== VENTURES SECTION - PROPORTIONAL ===== */
/* ============================================ */

@media (max-width: 767px) {
  /* Force pure black on ventures + its header wrapper */
  .ventures-section {
    padding: 60px 0 80px !important;
    background: #000 !important;
  }
  .ventures-section + section,
  .bg-\[\#0a0a0a\] {
    background: #000 !important;
  }

  .ventures-headline {
    margin-bottom: 32px !important;
  }

  .ventures-headline h2 {
    font-size: clamp(1.5rem, 7vw, 2.5rem) !important;
  }

  .ventures-headline p {
    font-size: clamp(12px, 3.2vw, 16px) !important;
    padding: 0 16px;
  }

  .ventures-grid {
    grid-template-columns: 1fr !important;
    padding: 0 16px !important;
    gap: 16px !important;
  }

  .venture-card {
    height: clamp(260px, 70vw, 380px) !important;
  }

  .venture-card:nth-child(n) {
    margin-top: 0 !important;
  }

  .venture-card-num {
    font-size: clamp(40px, 12vw, 70px) !important;
  }

  .venture-card-content {
    padding: clamp(14px, 4vw, 24px) !important;
  }

  .venture-card-headline {
    font-size: clamp(16px, 4.5vw, 22px) !important;
  }

  .venture-card-desc {
    font-size: clamp(11px, 3vw, 14px) !important;
  }

  .venture-card-cta {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .venture-card-arrow {
    opacity: 1 !important;
    transform: translateY(0) !important;
    bottom: 12px !important;
    right: 12px !important;
    width: clamp(28px, 8vw, 40px) !important;
    height: clamp(28px, 8vw, 40px) !important;
  }
}


/* ============================================ */
/* ===== TEAM SECTION - PROPORTIONAL ========= */
/* ============================================ */

@media (max-width: 767px) {
  #team {
    min-height: auto !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Scale down orbit area */
  #team .lg\:w-1\/2:last-child {
    height: clamp(220px, 60vw, 350px) !important;
    min-height: clamp(220px, 60vw, 350px);
  }

  /* Core nucleus — smaller on mobile */
  .team-core-float {
    width: clamp(140px, 40vw, 220px) !important;
    height: clamp(140px, 40vw, 220px) !important;
  }

  /* Spinning rings — proportional */
  .team-core-float .w-\[150px\] { width: clamp(70px, 20vw, 120px) !important; height: clamp(70px, 20vw, 120px) !important; }
  .team-core-float .w-\[230px\] { width: clamp(110px, 32vw, 180px) !important; height: clamp(110px, 32vw, 180px) !important; }
  .team-core-float .w-\[310px\] { width: clamp(160px, 44vw, 240px) !important; height: clamp(160px, 44vw, 240px) !important; }

  /* Aura — proportional */
  .team-core-float .w-\[400px\] { width: clamp(200px, 56vw, 320px) !important; height: clamp(200px, 56vw, 320px) !important; }

  /* Orbit labels — proportional */
  .team-orbit-label {
    padding: clamp(2px, 0.5vw, 4px) clamp(6px, 2vw, 10px) !important;
  }
  .team-orbit-label span {
    font-size: clamp(6px, 1.8vw, 9px) !important;
    letter-spacing: 0.06em;
  }
  .team-orbit-label .w-2 {
    width: clamp(4px, 1.2vw, 6px) !important;
    height: clamp(4px, 1.2vw, 6px) !important;
  }

  /* Team header text — proportional */
  #team-header-text h2 {
    font-size: clamp(1.25rem, 6vw, 2rem) !important;
  }

  #team-header-text p {
    font-size: clamp(12px, 3.2vw, 16px) !important;
  }

  #team-header-text .font-mono {
    font-size: clamp(9px, 2.5vw, 12px) !important;
  }

  /* Team categories — proportional */
  #team-categories > div,
  #team-categories template + div {
    padding: clamp(10px, 3vw, 16px) !important;
  }

  #team-categories h3 {
    font-size: clamp(14px, 4vw, 20px) !important;
  }

  #team-categories p {
    font-size: clamp(11px, 3vw, 14px) !important;
  }
}


/* ============================================ */
/* ===== VIDEO DRAWBRIDGE - PROPORTIONAL ===== */
/* ============================================ */

@media (max-width: 767px) {
  .video-shadow-section {
    height: 180vh !important;
  }

  /* Shadow text — big like elevate-brand title, no word-wrap */
  .video-shadow-text h2 {
    font-size: clamp(13vw, 15vw, 18vw) !important;
    white-space: nowrap;
  }

  /* Gap between top/bottom text halves */
  .video-shadow-section .h-2.md\:h-8 {
    height: 2px !important;
  }

  .video-text-desc {
    margin-top: 1.5rem !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .video-text-desc p {
    font-size: clamp(0.8rem, 3.5vw, 1.1rem) !important;
  }
}


/* ============================================ */
/* ===== MANIFESTO SECTION - PROPORTIONAL ==== */
/* ============================================ */

@media (max-width: 767px) {
  #insights {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    min-height: auto !important;
  }

  #insights .max-w-\[1200px\] {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* Prevent wide horizontal tracks from expanding document width on mobile Safari */
  /* overflow-x: clip does NOT create a scroll container → sticky + GSAP safe */
  .portfolio-scroll-section,
  #brands,
  .missile-title-section {
    overflow-x: clip;
  }

  /* GPU compositing on sticky container — prevents mobile Safari scroll repaint jitter */
  .missile-title-section > .sticky {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Isolate title in own GPU layer — prevents jitter from rocket child transforms */
  .missile-title {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: opacity;
  }

  /* Red flow lines: hide in sections without overflow-x: clip */
  /* Manifesto (#insights) and dual-cta (#contact) keep them visible */
  .red-flow-corner {
    display: none !important;
  }

  /* Show red flow lines in manifesto + dual-cta on mobile */
  #insights,
  #contact {
    overflow-x: clip;
  }
  #insights .red-flow-line,
  #contact .red-flow-line,
  #contact .red-flow-corner {
    display: block !important;
  }

  /* Hide STATUS: READY / ACTIVE labels on mobile dual-cta */
  #contact .absolute.top-8.right-8 {
    display: none !important;
  }

  #insights .font-mono.text-xs {
    font-size: clamp(7px, 2vw, 10px);
  }

  #insights .space-y-32 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 3rem;
  }

  #insights h2 {
    font-size: clamp(1.25rem, 6vw, 2rem) !important;
    line-height: 1.1;
  }

  #insights .text-center.py-20 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  #insights .text-center p {
    font-size: clamp(1rem, 4.5vw, 1.75rem) !important;
  }
}


/* ============================================ */
/* ===== DUAL CTA SECTION - PROPORTIONAL ===== */
/* ============================================ */

@media (max-width: 767px) {
  #contact {
    padding: 1rem !important;
    min-height: auto !important;
  }

  #contact > .relative > .flex,
  #contact > div > .flex {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  #contact a.flex-1 {
    padding: clamp(1.25rem, 5vw, 2.5rem) !important;
  }

  #contact h2 {
    font-size: clamp(1.75rem, 8vw, 3.5rem) !important;
    line-height: 1.05;
  }

  #contact p {
    font-size: clamp(13px, 3.5vw, 18px) !important;
  }

  #contact .font-mono {
    font-size: clamp(8px, 2.5vw, 14px) !important;
  }

  #contact .mt-20 {
    margin-top: 2rem !important;
  }
}


/* ============================================ */
/* ===== ELEVATE BRAND SECTION =============== */
/* ============================================ */

@media (max-width: 767px) {
  /* Elevate section — full-height gradient */
  .relative.z-50.flex.items-center.justify-center[style*="min-height: 100dvh"] {
    min-height: 100dvh !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  /* Content container — centered with tighter padding */
  .relative.z-50.flex.items-center.justify-center[style*="min-height: 100dvh"] > .relative.z-10 {
    padding-left: 20px !important;
    padding-right: 20px !important;
    text-align: center !important;
  }

  /* h2 — proportional, fits on mobile */
  section > .max-w-\[1600px\] > h2.text-6xl,
  .relative.z-50.flex.items-center.justify-center h2.text-6xl {
    font-size: clamp(2rem, 9vw, 3.5rem) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.03em !important;
  }
}


/* ============================================ */
/* ===== FOOTER - PROPORTIONAL =============== */
/* ============================================ */

@media (max-width: 767px) {
  footer .max-w-\[1440px\] {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 3rem;
  }

  footer .flex.flex-col.gap-3 {
    max-width: 100% !important;
  }

  /* Footer tagline — proportional */
  footer .text-2xl {
    font-size: clamp(1rem, 4.5vw, 1.5rem) !important;
  }

  /* Navigation columns — 2-col on mobile */
  footer .grid.grid-cols-2 {
    gap: clamp(20px, 6vw, 40px) !important;
  }

  footer .grid h4 {
    font-size: clamp(9px, 2.5vw, 12px) !important;
    margin-bottom: clamp(12px, 3vw, 24px) !important;
  }

  footer .grid li a,
  footer .grid li span {
    font-size: clamp(12px, 3.5vw, 15px) !important;
  }

  /* WAKEUP!LABS big text — fit WAKEUP! on one line (7 chars) */
  footer .footer-letter {
    font-size: clamp(36px, 12.5vw, 240px) !important;
  }

  /* Bottom bar — proportional */
  footer .text-\[11px\] {
    font-size: clamp(8px, 2.2vw, 11px) !important;
  }

  /* Scroll-to-top button */
  .fixed.bottom-8.left-8 {
    bottom: 16px !important;
    left: 16px !important;
    width: 44px !important;
    height: 44px !important;
  }

  /* CTA buttons — proportional */
  footer a[class*="uppercase"] {
    font-size: clamp(9px, 2.8vw, 12px) !important;
    padding: clamp(10px, 3vw, 14px) clamp(16px, 4vw, 24px) !important;
  }
}


/* ============================================ */
/* ===== CONCIERGE WIDGET - MOBILE ============ */
/* ============================================ */

@media (max-width: 767px) {
  .concierge-widget {
    bottom: 16px !important;
    right: 16px !important;
  }

  .concierge-btn {
    width: 50px !important;
    height: 50px !important;
  }

  /* Chat opens below the fixed header on mobile */
  .concierge-chat {
    top: calc(env(safe-area-inset-top, 0px) + 56px) !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 0 !important;
  }

  /* Concierge tooltip — proportional */
  .concierge-tooltip-mobile {
    max-width: 240px !important;
    bottom: 100px !important;
    right: 8px !important;
  }
}

/* ============================================ */
/* ===== NEWS PAGE - PROPORTIONAL ============ */
/* ============================================ */

@media (max-width: 767px) {
  /* Loading animation thumbnails — MATCH investi size (16vw formula) */
  .nw-loading-thumb {
    width: clamp(50px, 16vw, 180px) !important;
    height: clamp(68px, 21.6vw, 243px) !important;
  }

  .nw-loading-row {
    gap: clamp(8px, 2.5vw, 20px) !important;
  }

  /* Loading text — proportional */
  .nw-loading-text h2 {
    font-size: clamp(28px, 8vw, 60px) !important;
  }

  /* Filter bar — smaller and repositioned */
  .nw-filter-bar {
    top: 70px !important;
    right: 10px !important;
    padding: 4px 8px !important;
    gap: 5px !important;
  }

  .nw-filter-label {
    font-size: clamp(6px, 2vw, 9px) !important;
    letter-spacing: 1px !important;
  }

  .nw-year-select {
    padding: 3px 20px 3px 6px !important;
    font-size: clamp(8px, 2.5vw, 11px) !important;
  }

  /* Hero — proportional */
  .nw-hero-content {
    left: 16px !important;
    bottom: 16px !important;
    max-width: calc(100vw - 32px) !important;
  }

  .nw-hero-title {
    font-size: clamp(20px, 5.5vw, 36px) !important;
  }

  .nw-hero-sub {
    font-size: clamp(11px, 3vw, 15px) !important;
  }

  .nw-hero-tag {
    font-size: clamp(7px, 2vw, 9px) !important;
    padding: 4px 12px !important;
  }

  .nw-hero-read {
    padding: clamp(8px, 2.5vw, 14px) clamp(16px, 5vw, 32px) !important;
    font-size: clamp(8px, 2.5vw, 11px) !important;
  }

  /* Hero controls */
  .nw-hero-controls {
    bottom: auto !important;
    top: 80px !important;
    right: 12px !important;
  }

  .nw-hero-arrow {
    width: clamp(32px, 9vw, 48px) !important;
    height: clamp(32px, 9vw, 48px) !important;
  }

  /* Article cards — proportional */
  .nw-article-img {
    min-height: clamp(150px, 40vw, 250px) !important;
  }

  .nw-article-content {
    padding: clamp(16px, 5vw, 32px) !important;
  }

  .nw-article-num {
    font-size: clamp(32px, 10vw, 60px) !important;
    margin-bottom: 4px !important;
  }

  .nw-article-title {
    font-size: clamp(16px, 4.5vw, 28px) !important;
  }

  .nw-article-excerpt {
    font-size: clamp(11px, 3vw, 14px) !important;
  }

  .nw-article-tag {
    font-size: clamp(7px, 2vw, 9px) !important;
    padding: 3px 10px !important;
  }

  .nw-article-read {
    font-size: clamp(8px, 2.2vw, 10px) !important;
    padding: clamp(6px, 2vw, 10px) clamp(12px, 4vw, 24px) !important;
  }

  /* Modal — proportional (close btn + body padding overridden in MOBILE FIXES block below) */

  .nw-modal-title {
    font-size: clamp(20px, 5.5vw, 36px) !important;
  }

  .nw-modal-text {
    font-size: clamp(14px, 3.8vw, 16px) !important;
  }

  /* Coming soon section */
  .nw-coming {
    padding: clamp(60px, 16vw, 140px) clamp(16px, 5vw, 40px) !important;
  }
}


/* ============================================ */
/* ===== INVESTI / PROGETTI PAGE ============= */
/* ============================================ */

@media (max-width: 767px) {
  /* Frame content — pushed below counter area */
  .prj-frame-content {
    left: 16px !important;
    top: 22% !important;
    bottom: auto !important;
    max-width: calc(100vw - 32px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  /* Title — proportional */
  .prj-frame-title {
    font-size: clamp(24px, 7vw, 48px) !important;
    margin-bottom: 12px !important;
  }

  /* Description — full text, no truncation */
  .prj-frame-desc {
    font-size: clamp(11px, 3vw, 15px) !important;
    max-width: calc(100vw - 40px) !important;
    margin-bottom: 12px !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    line-height: 1.6 !important;
  }

  /* Tags — proportional (KEY FIX: smaller tags) */
  .prj-frame-tags {
    gap: clamp(4px, 1.2vw, 8px) !important;
    margin-bottom: clamp(8px, 2.5vw, 16px) !important;
  }

  .prj-frame-tag {
    padding: clamp(3px, 1vw, 6px) clamp(8px, 2.5vw, 20px) !important;
    font-size: clamp(6px, 1.8vw, 9px) !important;
    letter-spacing: clamp(1px, 0.5vw, 3px) !important;
  }

  /* Badge — proportional */
  .prj-frame-badge {
    padding: clamp(4px, 1.2vw, 6px) clamp(10px, 3vw, 20px) !important;
    font-size: clamp(7px, 2vw, 9px) !important;
    letter-spacing: 2px !important;
    margin-bottom: clamp(12px, 4vw, 28px) !important;
  }

  /* Ghost number — smaller */
  .prj-frame-num {
    font-size: clamp(80px, 25vw, 150px) !important;
  }

  /* Quote — proportional */
  .prj-frame-quote {
    font-size: clamp(12px, 3.2vw, 17px) !important;
    max-width: calc(100vw - 60px) !important;
  }

  /* Year — proportional */
  .prj-frame-year {
    font-size: clamp(9px, 2.5vw, 12px) !important;
  }

  /* Pitch button — proportional sizing (position in FIX 16 below) */
  .prj-frame-pitch {
    padding: clamp(8px, 2.5vw, 12px) clamp(14px, 4vw, 28px) !important;
    font-size: clamp(8px, 2.2vw, 11px) !important;
  }

  /* Counter — smaller on mobile */
  .prj-reel-counter {
    top: 70px !important;
    right: 12px !important;
  }

  .prj-counter-current {
    font-size: clamp(16px, 4.5vw, 22px) !important;
    min-width: 28px !important;
  }

  .prj-counter-total,
  .prj-counter-sep {
    font-size: clamp(8px, 2.2vw, 11px) !important;
  }

  /* Label — slightly bigger + bounce */
  .prj-reel-label {
    font-size: clamp(8px, 2.4vw, 11px) !important;
    letter-spacing: 2.5px !important;
  }

  /* Loading photos — proportional */
  .prj-loading-center h1 {
    font-size: clamp(28px, 8vw, 72px) !important;
  }

  .prj-loading-center p {
    font-size: clamp(9px, 2.5vw, 12px) !important;
  }

  /* Marquee — proportional */
  .prj-marquee {
    padding: clamp(40px, 12vw, 80px) 0 !important;
  }

  .prj-marquee-item {
    font-size: clamp(28px, 8vw, 60px) !important;
  }

  /* CTA — proportional */
  .prj-cta {
    padding: clamp(60px, 16vw, 160px) clamp(16px, 5vw, 40px) !important;
  }

  .prj-cta h2 {
    font-size: clamp(24px, 7vw, 48px) !important;
  }

  .prj-cta p {
    font-size: clamp(13px, 3.5vw, 18px) !important;
  }

  .prj-cta-btn {
    padding: clamp(12px, 3.5vw, 20px) clamp(24px, 7vw, 48px) !important;
    font-size: clamp(10px, 2.8vw, 13px) !important;
  }
}


/* ============================================ */
/* ===== CAREERS PAGE - PROPORTIONAL ========= */
/* ============================================ */

@media (max-width: 767px) {
  /* Hero section — photos smaller for all to fit */
  .cr-hero {
    height: 200vh !important;
  }

  /* ALL photos — smaller to fit the viewport */
  .cr-photo {
    max-width: clamp(60px, 18vw, 140px) !important;
  }

  .cr-photo-1 { width: 20vw !important; left: 1% !important;  top: 4% !important; }
  .cr-photo-2 { width: 17vw !important; right: 2% !important; top: 2% !important; }
  .cr-photo-3 { width: 15vw !important; left: 22% !important; top: 28% !important; }
  .cr-photo-4 { width: 18vw !important; right: 14% !important; top: 24% !important; }
  .cr-photo-5 { width: 14vw !important; left: 44% !important; top: 1% !important; }
  .cr-photo-6 { width: 16vw !important; left: 3% !important;  top: 63% !important; }
  .cr-photo-7 { width: 15vw !important; right: 1% !important; top: 60% !important; }
  .cr-photo-8 { width: 17vw !important; left: 30% !important; top: 75% !important; }

  /* Big text — proportional */
  .cr-text-line {
    font-size: clamp(32px, 10vw, 100px) !important;
  }

  /* Scroll hint */
  .cr-scroll-hint {
    bottom: 20px !important;
  }

  .cr-scroll-hint span {
    font-size: clamp(7px, 2vw, 10px) !important;
  }

  /* Team grid — 2 columns */
  .cr-team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(10px, 3vw, 24px) !important;
  }

  .cr-team-container {
    padding: 0 16px !important;
  }

  .cr-team-section {
    padding: clamp(40px, 12vw, 120px) 0 clamp(40px, 12vw, 80px) !important;
  }

  /* Card info — proportional */
  .cr-card-info {
    padding: clamp(10px, 3vw, 20px) !important;
  }

  .cr-card-info h3 {
    font-size: clamp(12px, 3.5vw, 18px) !important;
  }

  .cr-card-info p {
    font-size: clamp(9px, 2.5vw, 13px) !important;
  }

  /* Section headings — proportional */
  .cr-heading {
    font-size: clamp(24px, 7vw, 48px) !important;
    letter-spacing: -1px !important;
  }

  .cr-label {
    font-size: clamp(8px, 2.5vw, 11px) !important;
  }

  /* Jobs section */
  .cr-team-container .space-y-16 > * + * {
    margin-top: clamp(24px, 8vw, 64px) !important;
  }
}


/* ============================================ */
/* ===== CONTACT PAGE - PROPORTIONAL ========= */
/* ============================================ */

@media (max-width: 767px) {
  .yz-contact {
    padding-top: 80px !important;
  }

  /* Cities — aligned to start, equal spacing */
  .yz-cities {
    padding: clamp(30px, 8vw, 60px) 16px clamp(40px, 10vw, 80px) !important;
  }

  .yz-city-list {
    align-items: flex-start !important;
    gap: clamp(16px, 5vw, 24px) !important;
  }

  .yz-city-item {
    gap: clamp(8px, 2.5vw, 20px) !important;
    padding: clamp(4px, 1.5vw, 8px) 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* City names — proportional, equal size */
  .yz-city-name {
    font-size: clamp(36px, 10vw, 80px) !important;
    letter-spacing: clamp(-2px, -0.3vw, -1px) !important;
  }

  /* Meta — proportional */
  .yz-city-meta {
    flex-direction: row !important;
    gap: 8px !important;
    min-width: unset !important;
    padding-bottom: 0 !important;
  }

  .yz-city-time {
    font-size: clamp(10px, 2.8vw, 13px) !important;
  }

  .yz-city-badge {
    font-size: clamp(8px, 2.2vw, 11px) !important;
    padding: 3px 8px !important;
  }

  /* Details — proportional */
  .yz-city-details {
    padding: 0 16px !important;
  }

  .yz-details-inner {
    grid-template-columns: 1fr !important;
    gap: clamp(16px, 5vw, 40px) !important;
  }

  .yz-detail-label {
    font-size: clamp(8px, 2.2vw, 10px) !important;
  }

  .yz-detail-value {
    font-size: clamp(12px, 3.5vw, 15px) !important;
  }

  /* Form section — proportional */
  .yz-form-section {
    padding: clamp(30px, 8vw, 60px) 16px clamp(40px, 10vw, 80px) !important;
  }

  .yz-form-header h2 {
    font-size: clamp(24px, 7vw, 48px) !important;
    letter-spacing: -1px !important;
  }

  .yz-form-header p {
    font-size: clamp(13px, 3.5vw, 16px) !important;
  }

  .yz-form-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================ */
/* ===== CONCIERGE WIDGET - PROPORTIONAL ===== */
/* ============================================ */

@media (max-width: 767px) {
  /* Concierge widget visible on mobile (smaller trigger) */

  .concierge-trigger-btn {
    width: clamp(36px, 10vw, 52px) !important;
    height: clamp(36px, 10vw, 52px) !important;
  }

  /* Chat notification — much smaller */
  .concierge-notification,
  .concierge-bubble {
    max-width: clamp(160px, 50vw, 260px) !important;
    font-size: clamp(10px, 3vw, 14px) !important;
    padding: clamp(6px, 2vw, 12px) clamp(8px, 2.5vw, 16px) !important;
  }

  /* Aria tooltip — smaller, positioned above the π AI trigger button */
  .concierge-tooltip-mobile {
    max-width: 200px !important;
    padding: 10px !important;
    bottom: 100px !important;
    right: 8px !important;
    border-radius: 12px !important;
  }

  .concierge-tooltip-mobile p.font-bold {
    font-size: 11px !important;
    margin-bottom: 2px !important;
  }

  .concierge-tooltip-mobile p.text-xs {
    font-size: 10px !important;
    margin-bottom: 1px !important;
  }

  .concierge-tooltip-mobile button {
    font-size: 14px !important;
    padding: 2px !important;
  }

  /* Concierge trigger — smaller on mobile, hidden during pills/loading via JS class */
  .concierge-trigger-wrapper {
    bottom: 12px !important;
    right: 12px !important;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .concierge-trigger-wrapper.cw-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .concierge-trigger.concierge-trigger-energy {
    width: 40px !important;
    height: 40px !important;
  }

  .energy-sphere {
    width: 34px !important;
    height: 34px !important;
  }

  .energy-core {
    width: 26px !important;
    height: 26px !important;
  }

  .energy-ring-1 {
    width: 40px !important;
    height: 40px !important;
  }

  .energy-ring-2 {
    width: 48px !important;
    height: 48px !important;
  }

  .energy-ring-3 {
    width: 56px !important;
    height: 56px !important;
  }

  .concierge-trigger-label {
    font-size: 10px !important;
    padding: 3px 8px !important;
    margin-top: 6px !important;
  }

  /* Scroll-to-top button — smaller on mobile */
  .fixed.bottom-8.left-8 {
    width: 40px !important;
    height: 40px !important;
    bottom: 12px !important;
    left: 12px !important;
  }

  .fixed.bottom-8.left-8 svg {
    width: 18px !important;
    height: 18px !important;
  }
}


/* ============================================ */
/* ===== DISABLE HOVER EFFECTS ON TOUCH ====== */
/* ============================================ */

@media (hover: none) and (pointer: coarse) {
  .venture-card.entered,
  .lab-card-inner,
  .pss-card,
  .review-card {
    transform: none !important;
  }

  .venture-card:hover .venture-card-bg img {
    transform: none;
    filter: brightness(0.4) saturate(1.1);
  }

  .pss-card:hover {
    transform: none !important;
  }

  .venture-card-cta {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .venture-card-arrow {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .review-card:hover {
    transform: none !important;
  }

  /* Disable tilt effects */
  .cr-photo:hover img {
    filter: grayscale(100%) !important;
  }
}


/* ============================================ */
/* ===== LANDSCAPE MODE ====================== */
/* ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
  .hero-section {
    height: auto !important;
    min-height: 100dvh;
    padding: 40px 0;
  }

  .loading-red-container {
    border-radius: 12px;
  }
}


/* ============================================ */
/* ===== TABLET (768-1024px) PROPORTIONAL ==== */
/* ============================================ */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Process steps — 2x2 grid on tablet */
  .process-steps-section .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  .process-step .text-\[120px\],
  .process-step span[class*="text-\[120px\]"],
  .process-step span[class*="text-\[160px\]"] {
    font-size: 100px !important;
  }

  /* Investi tags — slightly smaller on tablet */
  .prj-frame-tag {
    padding: 4px 14px !important;
    font-size: 8px !important;
    letter-spacing: 2px !important;
  }

  .prj-frame-desc {
    font-size: 13px !important;
    max-width: 380px !important;
  }

  /* Careers photos — slightly smaller */
  .cr-photo {
    max-width: 160px !important;
  }

}


/* ============================================ */
/* ===== MOBILE FIXES (max-width: 767px) ====== */
/* ============================================ */

@media (max-width: 767px) {
  /* FIX 1: Portfolio cases overlay — lower X and header (header covers them) */
  .pf-cases-close {
    top: 80px !important;
  }
  .pf-cases-back {
    top: 80px !important;
  }
  .pf-cases-header {
    padding-top: 100px !important;
  }
  .pf-detail-close {
    top: 80px !important;
  }

  /* FIX 3: Force pure BLACK (#000) backgrounds everywhere on mobile */
  #team {
    background-color: #000000 !important;
  }
  #team > .absolute.inset-0 {
    display: none !important;
  }
  .nw-page {
    background: #000000 !important;
  }
  .nw-modal {
    background: #000000 !important;
  }
  .nw-loading {
    background: #000000 !important;
  }
  .nw-article-img::after {
    background: #000000 !important;
  }
  .careers-page {
    background: #000000 !important;
  }
  .cr-hero-sticky {
    background: #000000 !important;
  }
  .cr-team-section {
    background: #000000 !important;
  }
  .cr-positions {
    background: #000000 !important;
  }
  .prj-page {
    background: #000000 !important;
  }
  .prj-loading {
    background: #000000 !important;
  }

  /* FIX 7: Loading screen — bigger text, ENTRA shifted down, LOGIN styled as pill */
  .loading-red-container {
    background-color: #E72300;
  }
  .loading-red-container.to-black {
    background: #000 !important;
    background-color: #000 !important;
  }
  /* Removed ::before red underlay — was causing Safari iOS to read red for browser bars */
  .loading-red-container h1 {
    font-size: 72px !important;
  }
  .loading-red-container h1 + div p {
    font-size: 28px !important;
  }
  .loading-red-container .mt-14 > button {
    transform: translateY(18px);
    padding: 14px 28px !important;
    font-size: 14px !important;
  }
  .loading-red-container .trust-banner-loading {
    padding: 10px 24px !important;
  }
  .loading-red-container .trust-banner-loading span {
    font-size: 12px !important;
  }
  .loading-red-container a[href*="login"] {
    font-size: 15px !important;
    letter-spacing: 1.5px !important;
    margin-right: 10px !important;
    padding: 8px 18px !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }

  /* FIX 8: Experience choice — let Tailwind classes handle sizing (matches Max's splash) */
  /* All card sizing, descriptions, pill offsets removed — Tailwind inline classes are correct */

  /* FIX 9: removed — safe-area fix moved to JS (html bg set to black on pills show) */

  /* FIX 10: "Le nostre soluzioni" — bigger copy on mobile */
  .solutions-section .sol-title h2 {
    font-size: clamp(2.5rem, 10vw, 4rem) !important;
  }
  .solutions-section .sol-cat span {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem) !important;
  }
  .solutions-section .sol-label {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem) !important;
  }
  .solutions-section .sol-item-row span:first-child {
    font-size: clamp(11px, 3vw, 14px) !important;
  }

  /* FIX 11: moved to FIX 20 below */

  /* FIX 12: Portfolio scroll — vertical line now desired */

  /* FIX 6: News modal — lower X close button and add top padding for header */
  .nw-modal-close {
    top: 80px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
  }
  .nw-modal-body {
    padding: 120px 16px 120px !important;
  }

  /* FIX 13: Portfolio Read More (case study modal) — lower X, more top padding */
  .cs-close-btn {
    top: 80px !important;
    right: 16px !important;
  }
  .cs-content-wrap {
    padding: 120px 24px 80px !important;
  }

  /* FIX 14: Portfolio detail panel topbar — more room for header */
  .pf-detail-topbar {
    padding-top: 90px !important;
  }

  /* FIX 15: INVESTI marquee — scroll-driven (handled in JS, stop CSS animation) */
  .prj-marquee-track {
    animation: none !important;
  }

  /* FIX 16: INVESTI — bigger text, layout adjusted */
  .prj-frame-title {
    font-size: clamp(30px, 9vw, 56px) !important;
  }
  .prj-frame-desc {
    font-size: clamp(14px, 3.8vw, 18px) !important;
    line-height: 1.75 !important;
  }
  .prj-frame-tag {
    font-size: clamp(7px, 2vw, 10px) !important;
    padding: 4px 12px !important;
  }
  .prj-frame-quote {
    font-size: clamp(13px, 3.5vw, 18px) !important;
  }
  .prj-frame-pitch {
    bottom: calc(env(safe-area-inset-bottom, 20px) + 50px) !important;
    right: 50% !important;
    transform: translateX(50%) !important;
  }
  .prj-reel-label {
    top: 72px !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    color: rgba(255,255,255,0.35) !important;
    animation: scrollHintFloat 2.5s ease-in-out infinite !important;
    transition: opacity 0.3s ease !important;
  }

  /* FIX 17: Pills section — no pseudo-elements, handled via JS bg color */

  /* FIX 18: CAREERS — bigger WE'RE WAKEUP!LABS */
  .cr-text-line {
    font-size: clamp(52px, 14vw, 160px) !important;
  }

  /* FIX 19: OUR VENTURES — uppercase title */
  .ventures-headline h2 {
    text-transform: uppercase !important;
  }

  /* FIX 20: IT'S TIME TO WAKE UP YOUR BRAND — centered, YOUR BRAND on same line */
  #elevate-title {
    font-size: clamp(2.8rem, 11vw, 6rem) !important;
    text-align: center !important;
  }
  #elevate-parallax-area {
    text-align: center !important;
  }

  /* FIX 21: Dall'ago al missile — bigger without word wrap */
  .missile-title {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    white-space: nowrap !important;
  }

  /* FIX 22: Alcuni dei nostri progetti — bigger title + card text */
  .pss-header h3 {
    font-size: clamp(1.8rem, 8vw, 2.8rem) !important;
    white-space: nowrap !important;
  }
  .pss-card-title {
    font-size: clamp(18px, 5vw, 26px) !important;
  }
  .pss-card-cat {
    font-size: 9px !important;
  }
  .pss-card-client {
    font-size: 11px !important;
  }

  /* FIX 23: Scroll text subtitles — bigger */
  .scroll-text-left p,
  .scroll-text-right p {
    font-size: clamp(1.6rem, 7vw, 2.5rem) !important;
  }

  /* FIX 24: Brands section — slightly bigger copy */
  #brands .text-4xl {
    font-size: clamp(1.4rem, 6vw, 2.2rem) !important;
  }

  /* FIX 25: Reviews scroll hint — shift down */
  .reviews-section .scroll-hint-float,
  section:has(.trust-banner) .scroll-hint-float {
    margin-top: 24px !important;
  }

  /* FIX 26: CAREERS — red line under each job role (GSAP drives --role-line-w) */
  .cr-role {
    position: relative !important;
    --role-line-w: 0%;
  }
  .cr-role::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: var(--role-line-w) !important;
    height: 2px !important;
    background: #E72300 !important;
  }
}

@keyframes prjLabelBounce {
  0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
  50% { opacity: 0.7; transform: translateX(-50%) translateY(-8px); }
}

@keyframes prjLabelFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}

/* ============================================ */
/* ===== FIX 27-30 ============================= */
/* ============================================ */

@media (max-width: 767px) {
  /* FIX 27: INVEST & NEWS loading — smaller WAKEUP!LABS subtitle */
  .prj-loading-center p {
    font-size: clamp(8px, 2vw, 10px) !important;
    letter-spacing: 3px !important;
  }
  .nw-loading-text p {
    font-size: 9px !important;
    letter-spacing: 3px !important;
  }

  /* FIX 28: Portfolio cylinder — hide grey line at bottom */
  #portfolio-canvas::after {
    content: '' !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 80px !important;
    background: linear-gradient(to bottom, transparent, #0a0a0a 60%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* FIX 29: Portfolio PORTFOLIO background text — fits screen */
  .pf-3d-title h1 {
    font-size: clamp(40px, 9.5vw, 100px) !important;
  }

  /* FIX 30: Missile section — show scroll hint on mobile only */
  .missile-scroll-hint {
    display: block !important;
  }
}

@keyframes missileHintBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* FIX 27: Concierge chat — true fullscreen ONLY when opened from pills (.expanded) */
@media (max-width: 767px) {
  .concierge-chat.expanded {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
  }
}

/* ============================================================
   MOBILE PERFORMANCE: reduce backdrop-filter & heavy CSS effects
   backdrop-filter + blur is extremely expensive on iOS Safari
   ============================================================ */
@media (max-width: 767px) {
  /* The Lab cards — replace blur with solid bg */
  .lab-card-glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(30, 30, 30, 0.95) !important;
  }

  /* Reviews section — replace blur with solid bg */
  .review-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(30, 30, 30, 0.95) !important;
  }

  /* Cookie banner */
  #cookie-banner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.95) !important;
  }

  /* Loading screen elements */
  .trust-banner-loading {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Portfolio orbit labels */
  .team-orbit-label {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.9) !important;
  }

  /* Ensure smooth scrolling on animated containers */
  .portfolio-track,
  .reviews-track {
    will-change: transform;
  }

  /* ---- FIX: Elements hidden by desktop GSAP that don't animate on mobile ---- */

  /* Scroll text left/right — visible, animated by initTextAnimations on mobile */

  /* Scroll tetrahedron — visible, animated by initTetrahedronOpacity on mobile */

  /* Venture cards — GSAP handles entrance animation on mobile (initVenturesEntrance) */
  /* CSS .entered class provides fallback once GSAP clears props */

  /* GPU acceleration for sticky containers — prevents scroll jank on mobile */
  .sticky {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Missile letter spans — start inline opacity:0, initMissileTitleAnimation handles reveal */
  /* No override needed — function IS in mobile list and handles its own visibility */
}