/* =================================================================
   BURRI STUDIO — MOBILE & TABLET OPTIMIZATION
   Loaded LAST. Desktop (>1024px) is never touched — every rule here
   lives inside a max-width media query.
   ================================================================= */

/* ───────────────────────── GLOBAL ───────────────────────── */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  * { -webkit-tap-highlight-color: transparent; }
}

/* ═══════════════════════════════════════════════════════════
   NAVIGATION — hamburger + full-screen overlay (≤1024px)
   ═══════════════════════════════════════════════════════════ */
.nav-burger { display: none; }
.mobile-menu { display: none; }

@media (max-width: 1024px) {
  /* Hide desktop centered links */
  .nav .menu { display: none; }

  /* Nav bar stays transparent & premium on mobile (no opaque panel) */
  .nav {
    opacity: 1 !important; transform: none !important;
    pointer-events: none;
    justify-content: space-between;
    background: transparent;
  }
  .nav .brand { pointer-events: auto; position: relative; z-index: 130; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }

  /* Burger button */
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 44px; height: 44px; padding: 0 10px;
    background: none; border: none; cursor: pointer;
    pointer-events: auto; position: relative; z-index: 130;
    margin-left: auto;
  }
  .nav-burger span {
    display: block; height: 2px; width: 24px; border-radius: 2px;
    background: var(--text); box-shadow: 0 1px 6px rgba(0,0,0,0.5);
    transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease-out), box-shadow 0.3s;
  }
  body.menu-open .nav-burger span { box-shadow: none; }
  body.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
  body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Full-screen overlay menu — premium, left-aligned, numbered.
     Open state is driven by `display` (not opacity/visibility transition)
     so it is bullet-proof against cascade/transition quirks. */
  .mobile-menu {
    display: none; flex-direction: column; align-items: stretch; justify-content: center;
    gap: 0;
    position: fixed; inset: 0; z-index: 120;
    padding: 0 32px;
    background: linear-gradient(160deg, #080b12 0%, #05070c 100%);
    counter-reset: mm;
  }
  body.menu-open .mobile-menu { display: flex; }
  /* Ambient blue glow inside the menu */
  .mobile-menu::before {
    content: ""; position: absolute; top: 12%; right: -10%;
    width: 360px; height: 360px; border-radius: 50%;
    background: radial-gradient(circle, rgba(52,120,246,0.16), transparent 65%);
    filter: blur(50px); pointer-events: none;
  }
  .mobile-menu a {
    display: flex; align-items: baseline; gap: 16px;
    font-family: var(--font-display); font-size: clamp(26px, 8vw, 40px); font-weight: 700;
    letter-spacing: -0.03em; color: var(--text); text-decoration: none;
    padding: 15px 0; position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    opacity: 1; transform: none;
  }
  /* Dedicated close (X) button, top-right of overlay */
  .mm-close {
    position: absolute; top: 22px; right: 24px;
    width: 42px; height: 42px; border: none; background: none; cursor: pointer;
    z-index: 4; display: inline-flex; align-items: center; justify-content: center;
  }
  .mm-close span {
    position: absolute; width: 24px; height: 2px; border-radius: 2px; background: var(--text);
  }
  .mm-close span:nth-child(1) { transform: rotate(45deg); }
  .mm-close span:nth-child(2) { transform: rotate(-45deg); }
  .mobile-menu a::before {
    content: "0" counter(mm); counter-increment: mm;
    font-family: var(--font-mono); font-size: 13px; font-weight: 500;
    letter-spacing: 0.1em; color: var(--ice-soft); transform: translateY(-6px);
  }
  /* Links animate in via keyframe — fires reliably from display:none→flex */
  body.menu-open .mobile-menu a { animation: mmLinkIn 0.55s var(--ease-out) forwards; }
  body.menu-open .mobile-menu a:nth-of-type(1) { animation-delay: 0.10s; }
  body.menu-open .mobile-menu a:nth-of-type(2) { animation-delay: 0.17s; }
  body.menu-open .mobile-menu a:nth-of-type(3) { animation-delay: 0.24s; }
  body.menu-open .mobile-menu a:nth-of-type(4) { animation-delay: 0.31s; }
  .mobile-menu a:active { color: var(--ice); }
  body.menu-open { overflow: hidden; }
}
@keyframes mmLinkIn {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (max-width: 1024px) {

/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero { min-height: 100svh; }
  /* Keep the 3D hero background full-bleed exactly like desktop — no scaling,
     no mask (an earlier mask removed the atmosphere). Native rendering. */
  .hero-canvas { transform: none; -webkit-mask-image: none; mask-image: none; }
  .hero-content--centered { padding-bottom: 40px; }

  /* ── Services: 2×2 grid AROUND the central SCROLL indicator ──
     Active at tablet+phone so both get the correct layout.
     DOM: P1(WebDev), sep, P2(Video), SCROLL, P3(Discord), sep, P4(Dall'idea)
     Seps are display:none; SCROLL spans both rows center column. */
  .hero-pillars {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    gap: 12px 10px;
    max-width: 520px;
    margin: clamp(52px, 16vh, 160px) auto 0;
    align-items: start;
  }
  .hero-pillars > :nth-child(1) { grid-column: 1; grid-row: 1; } /* Web Dev — top left */
  .hero-pillars > :nth-child(3) { grid-column: 3; grid-row: 1; } /* Video Prod — top right */
  .hero-pillars > :nth-child(5) { grid-column: 1; grid-row: 2; } /* Discord — bottom left */
  .hero-pillars > :nth-child(7) { grid-column: 3; grid-row: 2; } /* Dall'idea — bottom right */
  .hero-pillar-scroll { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .hero-pillar-sep { display: none; }

  .hero-pillar {
    min-width: 0 !important; padding: 12px 10px;
    align-items: center; text-align: center;
  }
  .hero-pillar-icon { margin: 0 auto 8px; }
  .hero-pillar h4 { font-size: 13px; line-height: 1.25; }
  .hero-pillar p { display: block; font-size: 12px; max-width: 180px; margin: 0 auto; }

  .hero-pillar-scroll {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0 14px; order: 0;
  }
  .hero-pillar-scroll .track { height: 44px; }

  /* Remove the process ticker on tablet+mobile */
  .hero-marquee { display: none; }
}
@media (max-width: 768px) {
  /* Tighten the grid for phone widths */
  .hero-pillars { gap: 8px 6px; max-width: 440px; }
  .hero-pillar { padding: 10px 6px; }
  .hero-pillar h4 { font-size: 12px; }
  .hero-pillar p { font-size: 11px; max-width: 150px; }
  .hero-pillar-scroll { padding: 0 10px; }
  .hero-pillar-scroll .track { height: 38px; }
}
@media (max-width: 480px) {
  .hero-pillars { margin-top: clamp(36px, 10vh, 100px); gap: 6px 4px; max-width: 360px; }
  .hero-pillar { padding: 8px 4px; }
  .hero-pillar h4 { font-size: 11px; }
  .hero-pillar p { font-size: 10px; max-width: 120px; }
  .hero-pillar-icon { width: 26px; height: 26px; }
  .hero-pillar-scroll { padding: 0 6px; }
  .hero-pillar-scroll .track { height: 32px; }
}

/* ═══════════════════════════════════════════════════════════
   WEB DEVELOPMENT (#case-launchup)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .webdev-phase { grid-template-columns: 1fr !important; gap: 22px; }
  .webdev-phase-head { position: static !important; flex-direction: row; align-items: center; gap: 14px; }
  .webdev-phase-content,
  .webdev-phase-content--duo { max-width: 100%; }
  .webdev-phase-content--duo { flex-direction: column; }
  .webdev-section .cs-panel { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
}
@media (max-width: 768px) {
  .webdev-header h2, .webdev-h2 { font-size: clamp(32px, 9vw, 44px) !important; }
  .cs-phases { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .cs-phase-arrow { display: none; }
  /* LaunchUp LIVE panel — stop metrics/stats clipping or overflowing */
  .webdev-section .cs-panel--stats { flex-direction: column !important; width: 100% !important; }
  .webdev-section .cs-panel--deploy { width: 100% !important; }
  .webdev-section .cs-frame { flex-direction: column; gap: 14px; }
  .cs-deploy-row { gap: 10px; }
  .cs-deploy-row .cs-k { min-width: 52px; }
  .cs-deploy-row .cs-v { white-space: normal; word-break: break-word; }
}

/* ═══════════════════════════════════════════════════════════
   VIDEO PRODUCTION (#video-production)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .vp-layout { grid-template-columns: 1fr !important; gap: 40px; margin-top: 56px; }
  .vp-layout .vp-suite { order: -1; position: relative; top: 0; transform: none !important; }
}
@media (max-width: 768px) {
  /* CRITICAL: .vp-lead has white-space:nowrap on desktop → forces the
     subtitle onto one line and off-screen. Allow it to wrap on mobile. */
  .vp-lead {
    white-space: normal !important;
    font-size: clamp(18px, 5vw, 24px); max-width: 100%; overflow-wrap: break-word;
    padding: 0 4px;
  }
  .vp-desc { font-size: 13.5px; max-width: 100%; overflow-wrap: break-word; padding: 0 4px; }
  .vp-lead br, .vp-desc br { display: none; }
  /* Creator Studio reels: show ALL cards as a premium swipeable strip */
  .vp-reels {
    display: grid !important; grid-auto-flow: column; grid-template-columns: none !important;
    grid-auto-columns: 68%; gap: 14px; overflow-x: auto; padding-bottom: 10px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .vp-reels::-webkit-scrollbar { display: none; }
  .vp-reel-card { display: block !important; scroll-snap-align: center; }
  /* Fully freeze every card animation (incl. pseudo-element sweeps) on mobile
     — they read as jitter in a scroll strip. Stability over motion here. */
  .vp-reels *, .vp-reels *::before, .vp-reels *::after { animation: none !important; }
  .vp-cinema-split { height: 200px; }
  .vp-h2 { font-size: clamp(32px, 9vw, 44px) !important; }
  .vp-stage { max-width: 100%; }
}
@media (max-width: 480px) {
  .vp-reels { grid-auto-columns: 80%; }
  .vp-reel-card { display: block !important; }
}

/* ═══════════════════════════════════════════════════════════
   DISCORD SYSTEMS (#discord-systems)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .ds-layout { grid-template-columns: 1fr !important; gap: 36px; }
  .ds-dashboard { grid-template-columns: 1fr !important; }
  .ds-app, .ds-bot, .ds-analytics { grid-column: 1 !important; grid-row: auto !important; }
  .ds-app { grid-template-columns: 56px 168px 1fr !important; }
  .ds-app-members { display: none; }
}
@media (max-width: 768px) {
  .ds-h2 { font-size: clamp(32px, 9vw, 44px) !important; }
  .ds-app { grid-template-columns: 54px 1fr !important; min-height: 380px; }
  .ds-channels { display: none; }
  .ds-workflow-track { grid-template-columns: 1fr !important; gap: 14px; }
  .ds-workflow-line { display: none; }
  .ds-wf-step { flex-direction: row; gap: 14px; text-align: left; }
  .ds-wf-node { margin-bottom: 0; }
  .ds-features { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════
   PROGETTI (#progetti)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .pj-layout { grid-template-columns: 1fr !important; gap: 32px; }
  .pj-lead { margin-left: 0 !important; }
  .pj-title { white-space: normal !important; }
  .pj-nav { justify-content: center; }
  /* Intro paragraph: narrower measure, LEFT-aligned to match the section
     title's column. No centering margins. */
  .pj-desc { max-width: 340px !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0; overflow-wrap: break-word; }
  /* Nudge the showcase a touch left so the active card reads dead-centre
     (the right-side next-card peek otherwise biases perception rightward) */
  /* Shift only the carousel (mockups) further left so each mockup's left
     edge aligns with the project text column. The .pj-below caption stays
     in its grid position because we transform the stage, not the showcase. */
  .pj-showcase { transform: none; }
  /* Showcase container left-aligned with the project content block. */
  .pj-stage { transform: translateX(-45px) !important; }

  /* ── Native scroll-snap carousel (Creator Studio pattern) ──
     Real horizontal scroll strip: native swipe, one card at a time,
     next card peeking. Self-contained cards (mockup + title + desc). */
  .pj-stage {
    overflow-x: auto !important; overflow-y: hidden !important;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; min-height: 0 !important;
    margin-right: 0 !important; border: none !important;
    background: none !important; box-shadow: none !important; border-radius: 0;
    touch-action: pan-x pan-y;
  }
  .pj-stage::-webkit-scrollbar { display: none; }
  .pj-track {
    transform: none !important; transition: none !important;
    min-height: 0 !important; gap: 16px; padding: 0 !important;
  }
  /* Edge spacers = (stageW − cardW)/2 = 8% of stage. Because the track has
     NO padding, both the 84% slide basis and these 8% spacers resolve
     against the full stage width — so the FIRST and LAST cards can scroll
     all the way to centre (fixes asymmetric first-slide peek). */
  .pj-track::before,
  .pj-track::after {
    content: ""; align-self: stretch;
  }
  .pj-track::before { flex: 0 0 0%; }
  .pj-track::after  { flex: 0 0 0%; }
  .pj-slide {
    flex: 0 0 100% !important; width: 100% !important; min-width: 100%;
    scroll-snap-align: center; min-height: 0 !important;
    overflow: hidden !important;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 0; padding: 18px 6px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.006));
    border: 1px solid var(--hairline-2);
  }
  /* Decorative per-slide glow/grid removed on mobile (noise + clip source) */
  .pj-slide-glow, .pj-slide-grid, .pj-stage-meta { display: none !important; }

  /* Mockups fit via zoom (reflows the box, unlike transform:scale).
     The card now holds ONLY the mockup, so it centres cleanly and the
     browser shot can use the full card width without competing with text.
     margin:auto + block guarantees true horizontal centring in the card. */
  .pj-shot { width: 88% !important; max-width: 88% !important; transform: none !important; margin-left: 0 !important; margin-right: auto !important; }
  .pj-col  { transform: translateX(-75px) !important; zoom: 0.51; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; justify-content: center; margin: 0 auto !important; }
  .pj-bot  { transform: translateX(73px) !important; zoom: 0.51; display: block; margin: 0 auto 0 0 !important; }

  /* ── Counter + arrows = one centered navigation component ── */
  .pj-meta {
    display: flex !important; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 18px; margin-top: 22px;
    transform: translateX(-75px);
  }
  .pj-counter { margin-bottom: 0 !important; }
  .pj-counter-cur { font-size: 32px; }
  .pj-counter-total { font-size: 18px; }
  .pj-progress { display: none !important; }      /* dots now carry position */
  .pj-nav { gap: 10px; }
  .pj-nav-btn { width: 44px; height: 44px; }

  /* ── Slide indicators relocated into the mockup, bottom-left ── */
  .pj-showcase { position: relative; }
  .pj-dots {
    position: absolute; left: 12%; bottom: 16px; z-index: 5;
    display: flex; gap: 7px; margin: 0 !important;
    padding: 7px 10px; border-radius: 30px;
    background: rgba(8, 11, 18, 0.42); backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* External caption also shifts left to stay aligned with the showcase */
  .pj-mcap { transform: none; }

  /* ── External caption BELOW the carousel (full viewport width, never
  .pj-mcap {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 10px; margin: 22px auto 0; max-width: 520px;
    padding: 0 4px;
  }
  .pj-cap-cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ice-soft); }
  .pj-cap-name { font-family: var(--font-display); font-size: 24px; font-weight: 600;
    color: var(--text); margin: 0; letter-spacing: -0.02em; }
  .pj-cap-desc { font-family: var(--font-body); font-size: 14px; font-weight: 300;
    line-height: 1.65; color: var(--text-3); margin: 0;
    text-align: left; max-width: 380px; width: 100%; }
  .pj-cap-btn { margin-top: 8px; font-family: var(--font-mono); font-size: 12px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--text);
    border: 1px solid var(--hairline-3); padding: 11px 20px; border-radius: 30px;
    text-decoration: none; }
  .pj-cap-btn:active { border-color: var(--ice); color: var(--ice-soft); }

  /* Shared desktop below-area RESTORED on mobile (carries the approved
     icon, per-project accent color + gold theme, and styled CTA button).
     RESTRUCTURED on mobile: icon sits next to the project title.
     Grid-template-areas:
         "cat  cat"
         "icon name"
         "desc desc"
         "btn  btn"  */
  .pj-below {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-areas:
      "cat  cat"
      "icon name"
      "desc desc"
      "btn  btn" !important;
    column-gap: 14px !important;
    row-gap: 10px !important;
    text-align: left;
  }
  /* Let .pj-below-main's children become grid children of .pj-below */
  .pj-below-main { display: contents; }
  .pj-below > .pj-below-icon { grid-area: icon; align-self: center; width: 44px; height: 44px; }
  .pj-below > .pj-below-icon svg { width: 22px; height: 22px; }
  .pj-below-cat { grid-area: cat; text-align: left; }
  .pj-below-name { grid-area: name; text-align: left; align-self: center; margin: 0; line-height: 1.22; }
  .pj-below-desc { grid-area: desc; text-align: left; max-width: 100%; }
  .pj-below > #pj-below-btn { grid-area: btn; justify-self: start !important; }
}
@media (max-width: 768px) {
  .pj-title { font-size: clamp(32px, 8.5vw, 48px) !important; line-height: 1.08 !important; letter-spacing: -0.02em; }
  /* Scale composite mockups so the WHOLE diagram fits a phone slide.
     Colombina (.pj-col 518px natural side-by-side) and bot (.pj-bot 760px). */
  .pj-col { zoom: 0.48; flex-direction: row !important; flex-wrap: nowrap !important; }
  .pj-bot { zoom: 0.50; }
  .pj-cap-name { font-size: 22px; }
  /* Project description: narrower so it wraps into comfortable lines */
  .pj-below-desc { max-width: 320px !important; }
}
@media (max-width: 400px) {
  /* iPhone SE / 360 / 320 — tighten composite mockups so nothing clips */
  .pj-col { zoom: 0.39; }
  .pj-bot { zoom: 0.41; }
  .pj-below-desc { max-width: 280px !important; }
}

/* ═══════════════════════════════════════════════════════════
   COME LAVORO (#come-lavoro)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .cl-layout { grid-template-columns: 1fr !important; gap: 44px; }
  .cl-header { max-width: 560px; }
}
@media (max-width: 768px) {
  .cl-title { font-size: clamp(34px, 9.5vw, 52px) !important; }
  .cl-flow-steps { grid-template-columns: 1fr !important; gap: 14px; }
  .cl-flow-line { display: none !important; }
  .cl-node { width: 100% !important; }
  .cl-node-card { width: 100%; }
  .cl-pillars { grid-template-columns: 1fr !important; gap: 14px; }
  .cl-journey { flex-direction: column !important; gap: 16px; }
  .cl-journey-arrow { transform: rotate(90deg); }
}

/* ═══════════════════════════════════════════════════════════
   CONTACT (#contact)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .ct-grid { grid-template-columns: 1fr !important; gap: 44px; }
  .ct-copy, .ct-primary { max-width: none; }
}
@media (max-width: 768px) {
  .ct-title { font-size: clamp(34px, 9vw, 52px) !important; }
  .ct-cards { grid-template-columns: 1fr !important; }
  .ct-form { grid-template-columns: 1fr !important; }
  .ct-primary { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  footer.ct-footer { padding: 18px 24px; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════
   SMALL-PHONE HARDENING (≤400px → iPhone SE / 360 / 390)
   Belt-and-suspenders against fixed-width bleed & collisions.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  /* Tighten global gutter so wide content never kisses the edge */
  :root { }
  .container { padding-left: 20px; padding-right: 20px; }

  /* Hero pillars: keep 2×2 but shrink type so labels never clip */
  .hero-pillar { padding: 14px 10px; }
  .hero-pillar h4 { font-size: 12px; }
  .hero-pillar p { font-size: 11px; max-width: 140px; }
  .hero-canvas { transform: scale(0.46); transform-origin: center 36%; }

  /* Discord bot diagram inside Progetti — stop module cards colliding */
  .pj-bot-mod { width: 150px; padding: 10px 12px; }
  .pj-bot-mod-name { font-size: 13px; }
  .pj-bot-core-badge { width: 76px; height: 76px; }

  /* Section headings: clamp hard so no H2 overflows a 320px screen */
  .webdev-h2, .vp-h2, .ds-h2, .pj-title, .cl-title, .ct-title {
    font-size: clamp(28px, 8.5vw, 40px) !important;
    line-height: 1.08 !important;
  }

  /* Discord app frame: single column, channels hidden already; tighten */
  .ds-app { grid-template-columns: 1fr !important; min-height: 320px; }
  .ds-app-rail { display: none; }
}

/* Final global overflow guard — clip any stray decorative overflow on
   touch widths without affecting desktop scroll behaviour. */
@media (max-width: 1024px) {
  section { overflow-x: clip; }
}

/* ═══════════════════════════════════════════════════════════
   COME LAVORO — stabilize the "Assemblaggio" stack (no jitter)
   The floating + layer-shift animations read as jitter once the
   transformation stacks vertically on mobile. Freeze them to a
   clean, intentional resting state. Bullet lists already align
   left via workflow.css row layout.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .cl-stage-visual,
  .cl-make-stack,
  .cl-make-layer--1,
  .cl-make-layer--2,
  .cl-make-layer--3 {
    animation: none !important;
  }
  .cl-make-layer--3 { transform: translate(-10px, -10px); }
  .cl-make-layer--2 { transform: none; }
  .cl-make-layer--1 { transform: none; }
  /* Blueprint scan line can stay (it's contained); keep it calm */
  .cl-bp-scan { animation-duration: 6s; }
}

/* ═══════════════════════════════════════════════════════════
   PROGETTI / VIDEO — keep all descriptive copy inside viewport
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pj-below-desc, .pj-desc, .pj-stage-meta-tag,
  .vp-lead, .vp-desc {
    max-width: 100%; overflow-wrap: break-word;
  }
}