/* ═══════════════════════════════════════════════════════════════════
   NODARAMA — mobile.css
   Global responsive overrides — loaded last on all pages
   Strategy:
     index.html   — 2D world-pan → vertical scroll stack
     Other pages  — editorial layout collapses cleanly
    Sizing rule: use only ratio %'s for sizing rules, no pixel based limits
Use aspect ratios to identify mobile device screens in portrait mode only. Desktop mode otherwise
   ═══════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   I. SHARED — ALL PAGES — portrait mobile only
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (orientation: portrait) {

  .mobile-product-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    z-index: 9999;
    background: #000;
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  .mobile-product-tab {
    flex: 1;
    padding: 1rem 0.5rem;
    font-family: var(--mono);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    background: transparent;
    color: rgba(255,255,255,0.6);
    border: none;
  }

  .mobile-product-tab.active {
    color: #fff;
    background: rgba(255,255,255,0.06);
  }

  body.mobile-side-open {
    overflow: hidden !important;
  }

  .Nav-Bx { padding: 0.6rem 1rem 0.7rem; gap: 0.4rem; }
  .Nav-Brand-Cx img { width: min(62vw, 300px); }
  .Nav-List-Cx {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    width: 100%;
  }
  .Nav-Link-Dx {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  .Nav-Drop-Dx { display: none !important; }

  .Foot-Grid-Cx { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
  .Foot-Brand-Cx img { width: min(55vw, 260px); }

  .PullBand-Ax { padding: 2.8rem 1.2rem; }
  .PullBand-Ax p { font-size: clamp(1.18rem, 4.5vw, 1.6rem); }

  .Split-Ax,
  .Split-Rev-Ax { grid-template-columns: 1fr; direction: ltr; }
  .Split-Img-Bx { min-height: 220px; max-height: 300px; }
  .Split-Copy-Bx { padding: 2.2rem 1.2rem; }
  .Split-Copy-Bx h2 { font-size: 1.2rem; }

  .FeatGrid-Ax { padding: 2.5rem 1.2rem; gap: 1.8rem; }
  .FeatGrid-2-Ax,
  .FeatGrid-3-Ax { grid-template-columns: 1fr; }

  .Ambient-Ax { min-height: 300px; }
  .Ambient-Copy-Bx { padding: 2rem 1.2rem; }
  .Ambient-Copy-Bx h2 { font-size: clamp(1.3rem, 5vw, 1.9rem); }

  .ImgBreak-Tall-Ax,
  .ImgBreak-Tall-Ax img { max-height: 220px; height: 220px; }

  .Screen-Ax { padding: 2.5rem 1rem; gap: 1.2rem; }
  .Screen-Frame-Bx { width: 100%; animation: none; }

  .Card-Ax { padding: 1.5rem 1.1rem; }
  .Card-Ax h2 { font-size: 1.12rem; }

  .FloatCta-Ax {
    left: 1rem; right: 1rem; bottom: 1rem;
    text-align: center; font-size: 0.72rem;
  }

  .Spacer-Ax { padding: 1.8rem 0; }
}

/* ── CODING PAGE PHONE / TALL-SKINNY RATIO SYSTEM ── */
@media (max-width: 768px) and (orientation: portrait) {
  .Page-Coding-Ax .Nav-Ax {
    min-height: 10svh;
  }

  .Page-Coding-Ax .Nav-Ax::before {
    background-size: auto 100%;
    background-position: left top;
  }

  .Page-Coding-Ax .Nav-Bx {
    min-height: 10svh;
    padding: 1.2svh 3% 1svh;
    justify-content: flex-end;
  }

  .Page-Coding-Ax .Nav-List-Cx {
    grid-template-columns: repeat(4, max-content);
    gap: 0.8svh 3.5%;
    max-width: 100%;
  }

  .Page-Coding-Ax .Nav-Link-Dx {
    font-size: clamp(0.56rem, 2.6vw, 0.74rem);
    letter-spacing: 0.08em;
  }

  .Page-Coding-Ax .Hero-Cx {
    min-height: 88svh;
    padding: 7svh 6% 14svh;
    align-items: flex-start;
  }

  .Page-Coding-Ax .Hero-Copy-Dx,
  .Page-Coding-Ax .Hero-Para-Dx,
  .Page-Coding-Ax .seo-blunt-line,
  .Page-Coding-Ax .seo-blunt-copy {
    width: 100%;
    max-width: none;
  }

  .Page-Coding-Ax .Hero-Kicker-Dx {
    font-size: clamp(0.62rem, 2.8vw, 0.8rem);
    letter-spacing: 0.18em;
  }

  .Page-Coding-Ax .Hero-Title-Dx {
    font-size: clamp(2.1rem, 12vw, 3.15rem);
    letter-spacing: 0.12em;
    line-height: 1.02;
  }

  .Page-Coding-Ax .Hero-Line-Dx {
    font-size: clamp(1.55rem, 8.8vw, 2.5rem);
    line-height: 1.02;
  }

  .Page-Coding-Ax .seo-blunt-line {
    font-size: clamp(1rem, 5.6vw, 1.42rem);
    line-height: 1.22;
  }

  .Page-Coding-Ax .seo-blunt-copy,
  .Page-Coding-Ax .Hero-Para-Dx,
  .Page-Coding-Ax .Hero-Sub-Dx {
    font-size: clamp(0.92rem, 4.2vw, 1.06rem);
    line-height: 1.5;
  }

  .Page-Coding-Ax .Hero-Actions-Dx {
    gap: 1.8svh;
  }

  .Page-Coding-Ax .Hero-Btn-Primary-Dx,
  .Page-Coding-Ax .Hero-Btn-Ghost-Dx {
    width: 100%;
    justify-content: center;
    padding: 1.8svh 4%;
    font-size: clamp(0.66rem, 2.8vw, 0.78rem);
  }

  .Page-Coding-Ax .Floating-Download-Dx {
    left: 4%;
    right: 4%;
    bottom: 3svh;
    align-items: stretch;
    z-index: 400;
  }

  .Page-Coding-Ax .Download-Logo-Dx {
    display: none;
  }

  .Page-Coding-Ax .Floating-Download-Dx .FloatCta-Ax {
    width: 100%;
    min-height: 7svh;
  }

  .Page-Coding-Ax .Audience-Cx {
    justify-content: flex-start;
    min-height: auto;
    padding: 8svh 6%;
  }

  .Page-Coding-Ax .Audience-Copy-Dx {
    width: 100%;
    margin-left: 0;
    padding: 0;
  }
}

@media (max-width: 480px) and (orientation: portrait) {
  .Page-Coding-Ax .Nav-Ax,
  .Page-Coding-Ax .Nav-Bx {
    min-height: 9svh;
  }

  .Page-Coding-Ax .Nav-Link-Dx {
    font-size: clamp(0.54rem, 2.7vw, 0.68rem);
    letter-spacing: 0.06em;
  }

  .Page-Coding-Ax .Hero-Title-Dx {
    font-size: clamp(2rem, 11.6vw, 2.75rem);
  }

  .Page-Coding-Ax .Hero-Line-Dx {
    font-size: clamp(1.5rem, 8.4vw, 2.2rem);
  }
}


/* ════════════════════════════════════════════════════════════════
   II. PHONE — portrait only
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) and (orientation: portrait) {
  .Nav-Brand-Cx img { width: min(78vw, 260px); }
  .Nav-List-Cx { gap: 0.3rem; }
  .Nav-Link-Dx { font-size: 0.68rem; }

  .Foot-Grid-Cx { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .PullBand-Ax p { font-size: 1.1rem; }
  .ImgBreak-Tall-Ax, .ImgBreak-Tall-Ax img { max-height: 180px; height: 180px; }
}

/* ════════════════════════════════════════════════════════════════
   III. INDEX — 2D WORLD → VERTICAL SCROLL STACK
   No orientation guard — this is an interaction system, not layout
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  html.Index-Ax,
  body.Index-Ax { overflow: auto !important; overflow-x: hidden !important; }

  .viewport {
    width: 100vw;
    height: auto;
    overflow: visible;
  }

  .world {
    position: relative !important;
    inset: auto !important;
    width: 100vw !important;
    height: auto !important;
    transform: none !important;
    transition: none !important;
    display: flex;
    flex-direction: column;
  }

  .panel {
    position: relative !important;
    width: 100vw !important;
    height: auto !important;
    min-height: 100svh;
    left: auto !important; top: auto !important;
    overflow: visible !important;
  }

  .panel-center { order: 1; }
  .panel-middle { order: 2; }
  .panel-bottom { order: 3; height: auto !important; overflow-y: visible !important; }
  .panel-left,
  .panel-right {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 9000;
    transition: transform 0.42s var(--ease);
    -webkit-overflow-scrolling: touch;
  }
  .panel-left {
    left: 0 !important;
    transform: translateX(-104%);
  }
  .panel-right {
    left: 0 !important;
    transform: translateX(104%);
  }
  body.mobile-side-left .panel-left,
  body.mobile-side-right .panel-right {
    transform: translateX(0);
  }

  .panel-bg { position: absolute !important; inset: 0 !important; height: 100% !important; z-index: 0 !important; }

  .panel-center > *, .panel-left > *, .panel-right > *,
  .panel-middle > *, .panel-bottom > * {
    position: relative !important; z-index: 3 !important;
  }
  .panel-bg { position: absolute !important; }

  .panel-center {
    display: flex; flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2.2rem 1.2rem calc(4.6rem + env(safe-area-inset-bottom));
    background: #000;
  }

  .hero-brand { top: auto; left: auto; margin-bottom: 2rem; width: 100%; }
  .hero-wordmark { width: min(82vw, 360px); }

  .hero-copy { top: auto; left: auto; transform: none; width: 100%; margin-bottom: 2.5rem; }
  .hero-copy p { font-size: clamp(0.95rem, 3.8vw, 1.15rem); }

  .hero-title-band {
    position: relative; left: auto; right: auto; bottom: auto;
    height: auto; width: 100%;
    display: flex; flex-direction: column; gap: 0.85rem;
    margin-top: auto;
    margin-bottom: 1.35rem;
  }
  .hero-verbatim, .hero-atelier {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    text-align: left;
  }
  .hero-verbatim h1 { font-size: clamp(2.2rem, 10vw, 3.4rem); letter-spacing: 0.12em; }
  .hero-atelier h2  { font-size: clamp(2.4rem, 11vw, 3.7rem); letter-spacing: 0.12em; }
  .hero-verbatim .hero-label,
  .hero-atelier .hero-label { text-align: left; padding-left: 0; padding-right: 0; }

  .hero-arrow { display: none !important; }

  .hero-bottom-line {
    position: relative; left: auto; bottom: auto; transform: none;
    width: 100%; text-align: left;
    font-size: clamp(1rem, 4vw, 1.28rem);
    margin-bottom: 0;
  }

  .down-link, .up-link { display: none !important; }

  .panel-left {
    display: flex; flex-direction: column;
    background: var(--cream);
  }

  .left-overlay-copy {
    position: relative; top: auto; right: auto;
    text-align: left; padding: 1.5rem 1.2rem 0;
    background: rgba(0,0,0,0.62); width: 100%;
  }
  .left-product-title { font-size: clamp(2rem, 9vw, 3rem); letter-spacing: 0.12em; }
  .left-product-sub   { font-size: clamp(1rem, 4vw, 1.28rem); }

  .left-info-card {
    position: relative; top: auto; left: auto;
    width: 100%; height: auto;
    padding: 2.5rem 1.2rem 2rem; gap: 1.2rem;
  }

  .return-button.return-left {
    position: relative; top: auto; left: auto; right: auto; bottom: auto;
    margin: 1rem 0 1.5rem 1.2rem; align-self: flex-start;
  }

  .panel-right { display: flex; flex-direction: column; }

  .right-title-block {
    position: relative; top: auto; left: auto; transform: none;
    padding: 2rem 1.2rem 1rem;
    background: rgba(0,0,0,0.54); width: 100%;
  }
  .right-title-block h1 { font-size: clamp(2.2rem, 9.5vw, 3.2rem); letter-spacing: 0.14em; }
  .right-title-block p  { font-size: clamp(0.95rem, 3.8vw, 1.18rem); }

  .right-info-card {
    position: relative; top: auto; right: auto;
    width: 100%; height: auto;
    padding: 1.5rem 1.2rem 2rem;
    text-align: right;
    background: rgba(0,0,0,0.74);
    align-items: end;
  }
  .right-cta { justify-self: end; }

  .return-button.return-right {
    position: relative; top: auto; left: auto; right: auto; bottom: auto;
    margin: 0 0 1.5rem 1.2rem; align-self: flex-start;
  }

  .panel-middle {
    display: flex; flex-direction: column;
    padding: 2.2rem 1.2rem 3rem;
    gap: 0;
    background: linear-gradient(180deg, #f2efea 0 38%, #000 38% 100%) !important;
  }

  .panel-middle .middle-bg {
    top: 5.2rem !important;
    height: 34svh !important;
    background-size: 100% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }

  .design-topline {
    position: relative; top: auto; left: auto; transform: none;
    width: 100%; text-align: left;
    font-size: clamp(1rem, 4vw, 1.28rem);
    margin-bottom: 1.5rem;
    color: rgba(255,255,255,0.9);
  }

  .design-grid {
    position: relative; top: auto; left: auto; right: auto;
    height: auto; width: 100%;
    grid-template-columns: 1fr; gap: 1.8rem;
    padding: 0; margin-bottom: 2rem;
  }

  .design-left-copy {
    max-width: 100%; padding: 0;
    color: rgba(255,255,255,0.92);
  }
  .design-left-copy h2 {
    font-size: clamp(2.8rem, 12vw, 4.5rem);
    letter-spacing: 0.15em; margin-bottom: 1rem;
    color: #000;
  }
  .design-left-copy p { font-size: clamp(0.95rem, 3.6vw, 1.1rem); }

  .design-right-copy {
    max-width: 100%;
    padding: 0;
    text-align: right;
    margin-top: auto;
  }
  .design-right-copy p { font-size: clamp(0.95rem, 3.6vw, 1.1rem); }

  .kernel-title {
    position: relative;
    right: auto;
    bottom: auto;
    font-size: clamp(1.6rem, 7.5vw, 2.4rem);
    letter-spacing: 0.14em;
    margin-top: auto;
    text-align: right;
    align-self: flex-end;
    width: 100%;
  }

  .panel-bottom {
    display: flex; flex-direction: column;
    align-items: center;
    padding: 3rem 1.2rem 0;
    height: auto !important; min-height: auto;
  }

  .bottom-cta-stack {
    position: relative; top: auto; right: auto;
    width: min(90vw, 420px); margin: 0 auto 3rem;
  }
  .cta-btn-img { width: 100%; }

  .bottom-brand-mark {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    margin: 0 auto 2rem;
    display: block;
    z-index: 5;
  }
  .bottom-brand-mark img {
    width: min(72vw, 320px);
    display: block;
  }

  .bottom-footer-nav {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    padding: 1.8rem 1.2rem 2.5rem;
    background: rgba(0,0,0,0.9);
    z-index: 5;
  }

  .bottom-dark-fill { display: block; }

  .panel-left::before,
  .panel-right::before,
  .panel-middle::before {
    content: attr(aria-label);
    display: block;
    font-family: var(--mono);
    font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
    color: rgba(212,134,49,0.65);
    padding: 0.55rem 1.2rem;
    background: rgba(0,0,0,0.86);
    border-bottom: 1px solid rgba(212,134,49,0.16);
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════
   IV. INDEX PHONE — no orientation guard (index interaction system)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .panel-center  { padding: 1.5rem 1rem 3.5rem; }
  .panel-middle  { padding: 1.5rem 1rem 2.5rem; }
  .panel-bottom  { padding: 2rem 1rem 0; }
  .hero-wordmark { width: min(88vw, 280px); }
  .left-info-card { padding: 2rem 1rem 1.8rem; }
  .right-title-block { padding: 1.5rem 1rem 0.8rem; }
  .right-info-card   { padding: 1.2rem 1rem 1.8rem; }
  .bottom-footer-nav { grid-template-columns: 1fr 1fr; padding: 1.4rem 1rem 2rem; }
  .design-left-copy h2 { font-size: clamp(2.4rem, 13vw, 3.5rem); }
  .kernel-title         { font-size: clamp(1.3rem, 7vw, 2rem); }
}

/* ════════════════════════════════════════════════════════════════
   V. CODING PAGE — portrait mobile only
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (orientation: portrait) {
  .Page-Coding-Ax .Hero-Cx { min-height: 88svh; padding: 7svh 6% 14svh; }
  .Page-Coding-Ax .Hero-Title-Dx { font-size: clamp(2.1rem, 12vw, 3.15rem); }

  .Purpose-Cx {
    flex-direction: column;
    padding: 8svh 6%;
  }
  .Purpose-Copy-Dx { width: 100%; max-width: 100%; }
  .Purpose-Media-Dx { width: 100%; max-width: 100%; }

  .How-Cx { grid-template-columns: 1fr; gap: 5svh; padding: 8svh 6%; }
  .Audience-Cx { justify-content: flex-start; min-height: auto; padding: 8svh 6%; }
  .Audience-Copy-Dx { width: 100%; margin-left: 0; padding: 0; }
  .Audience-Img-Dx { display: none; }
  .Benefits-Cx { grid-template-columns: 1fr; }
  .Benefit-Dx { min-height: auto; padding: 8svh 6%; }
  .Dub-Cx { grid-template-columns: 1fr; }
  .Dub-Copy-Dx { padding: 8svh 6%; }
  .Dub-Img-Dx { min-height: 42svh; }
  .Compare-Grid-Dx { grid-template-columns: 1fr; }
  .Stripe-Purchase-Grid-Ax { grid-template-columns: 1fr; }
  .Stripe-Purchase-Fields-Ax { grid-template-columns: 1fr; }
  .Download-Cx { flex-direction: column; align-items: flex-start; }
  .Hs-Dx { display: none; }
  .Collage-Shell-Dx::after { display: none; }
  .Collage-Cx { padding: 8svh 6%; }
  .BenefitsIntro-Cx { padding: 8svh 6% 5svh; }
  .Achieve-Cx { padding: 8svh 6%; }

  .Mobile-Hotspot-List-Dx {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 2rem 1rem 0;
  }
  .Mobile-Hotspot-List-Dx article {
    padding: 1rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .Mobile-Hotspot-List-Dx strong {
    display: block;
    margin-bottom: 0.4rem;
  }
}

@media (min-width: 769px) {
  .Mobile-Hotspot-List-Dx { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   VI. AUTOMATION PAGE — portrait mobile only
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (orientation: portrait) {
  .AutoHero-Cx { min-height: 440px; padding: 3.2rem 1rem; }
  .AutoHero-Title-Dx { font-size: clamp(2.6rem, 12vw, 4rem); }
  .Auto-Split-Ax, .Auto-Split-Rev-Ax { grid-template-columns: 1fr; direction: ltr; }
  .Auto-Split-Img-Bx { min-height: 220px; max-height: 280px; }
  .Auto-Split-Copy-Bx { padding: 2.2rem 1.2rem; }
  .Auto-FeatGrid-Ax { grid-template-columns: 1fr; padding: 2.5rem 1.2rem; }
  .Auto-Ambient-Ax { min-height: 300px; }
  .Auto-Ambient-Copy-Bx { padding: 2rem 1.2rem; }
  .Auto-PullBand-Ax { padding: 2.5rem 1.2rem; }
  .Auto-Form-Bx { flex-direction: column; }
  .Auto-Screen-Frame-Bx { width: 100%; }
  .Auto-Screen-Ax { padding: 2.5rem 1rem; }
}

/* ════════════════════════════════════════════════════════════════
   VII. DESIGN PAGE — portrait mobile only
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (orientation: portrait) {
  .Design-Hero-Split-Bx { grid-template-columns: 1fr; }
  .Design-Hero-Left-Cx,
  .Design-Hero-Right-Cx { min-height: 50vh; padding: 2.8rem 1.2rem; }
  .Design-Hero-Center-Cx {
    position: relative; left: auto; top: auto; transform: none;
    width: min(80vw, 340px); margin: 0 auto;
    order: 3;
  }
  .Design-Hero-Diag-Bx { display: none; }
  .Design-Hero-Right-Copy-Dx { text-align: left; }
  .Design-Kernel-Label-Dx { text-align: left; font-size: clamp(1.1rem, 5vw, 1.8rem); }
  .Design-Title-Left-Dx { font-size: clamp(2.8rem, 11vw, 4.5rem); }
  .Design-Dual-Ax { grid-template-columns: 1fr; gap: 2rem; }
  .Design-Dual-Left-Bx { padding-right: 0; }
  .Design-Dual-Right-Bx { padding: 2rem 1.2rem; }
  .Design-Dual-Center-Bx { display: none; }
  .Design-FeatGrid-Ax { grid-template-columns: 1fr; }
  .Design-TriLayer-Ax { height: 40px; }
}

/* ════════════════════════════════════════════════════════════════
   VII.B. REDUCED MOTION — coding page animation safety
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .gsap-fade-up,
  [data-gsap-slide],
  [data-gsap-scale],
  [data-gsap-fade],
  [data-gsap-stagger] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .Hero-Grain-Cx,
  .Hero-Glow-Cx,
  .Achieve-Bg-Dx,
  .Dub-Img-Dx img,
  .Audience-Img-Dx img,
  .Purpose-Media-Dx,
  .How-Media-Dx,
  .Collage-Shell-Dx {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   VIII. TOUCH — device capability, no orientation guard needed
   ════════════════════════════════════════════════════════════════ */
@media (hover: none) {
  .Card-Ax:hover            { transform: none; box-shadow: none; }
  .Split-Img-Bx img:hover   { transform: none; }
  .Screen-Frame-Bx:hover    { transform: none; }
  .outline-button:hover     { transform: none; box-shadow: none; }
  .FloatCta-Ax:hover        { transform: none; }
  .Auto-Feat-Bx:hover       { transform: none; }
  .Design-Feat-Bx:hover     { transform: none; }
  .hero-verbatim:hover h1   { letter-spacing: 0.18em; text-shadow: none; }
  .hero-atelier:hover h2    { letter-spacing: 0.18em; text-shadow: none; }
  .hero-wordmark:hover      { filter: none; }

  .ImgBreak-Ax img,
  .Split-Img-Bx img,
  .Ambient-Bg-Bx,
  .center-bg, .right-bg, .middle-bg { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   IX. INDEX SIDE SPLASH OVERRIDES — no orientation guard
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.mobile-side-open {
    overflow: hidden !important;
  }

  .mobile-product-tabs {
    z-index: 9600;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .panel-left,
  .panel-right {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 9000;
    display: flex !important;
    flex-direction: column;
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
    box-shadow: 0 0 44px rgba(0,0,0,0.72);
    transition: transform 0.42s var(--ease);
    -webkit-overflow-scrolling: touch;
  }

  .panel-left {
    transform: translateX(-104%) !important;
    background: var(--cream);
  }

  .panel-right {
    transform: translateX(104%) !important;
    background: #000;
  }

  body.mobile-side-left .panel-left,
  body.mobile-side-right .panel-right {
    transform: translateX(0) !important;
  }

  .panel-left::before,
  .panel-right::before {
    display: none !important;
  }

  .panel-left .left-bg,
  .panel-right .right-bg {
    position: fixed !important;
    inset: 0 !important;
    min-height: 100svh;
    height: 100svh !important;
    z-index: 0 !important;
  }

  .left-overlay-copy,
  .right-title-block {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100%;
    min-height: 44svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 7rem 1.05rem 1.2rem;
    color: rgba(255,255,255,0.96);
    background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.76));
    text-align: left;
    z-index: 3 !important;
  }

  .left-product-title,
  .right-title-block h1 {
    font-size: clamp(2.35rem, 11vw, 3.55rem);
    letter-spacing: 0.12em;
    line-height: 0.95;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .left-product-sub,
  .right-title-block p {
    font-size: clamp(1rem, 4.2vw, 1.24rem);
    line-height: 1.35;
    margin-top: 0.85rem;
  }

  .product-clear-line {
    font-size: clamp(0.95rem, 3.8vw, 1.12rem);
    line-height: 1.35;
    margin-top: 0.7rem;
    max-width: 31rem;
  }

  .left-info-card,
  .right-info-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: calc(100% - 1.4rem) !important;
    height: auto !important;
    margin: 0.7rem auto 0;
    padding: 1.25rem 1rem;
    display: grid;
    gap: 1.1rem;
    align-content: start;
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(7px);
    z-index: 3 !important;
  }

  .left-info-card {
    background: rgba(242,239,234,0.94);
    color: var(--ink);
  }

  .right-info-card {
    background: rgba(0,0,0,0.76);
    text-align: left;
  }

  .left-info-card h2,
  .right-info-card h2 {
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
  }

  .left-info-card p,
  .left-info-card li,
  .right-info-card p,
  .right-info-card li {
    font-size: 0.98rem;
    line-height: 1.45;
  }

  .left-cta,
  .right-cta {
    justify-self: stretch !important;
    width: 100%;
    min-height: 54px;
  }

  .return-button.return-left,
  .return-button.return-right {
    position: sticky !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: calc(4.8rem + env(safe-area-inset-bottom)) !important;
    width: calc(100% - 1.4rem);
    min-height: 50px;
    margin: 0.7rem auto 0;
    z-index: 9200 !important;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    background: rgba(0,0,0,0.74);
    border-color: rgba(255,255,255,0.24);
    color: rgba(255,255,255,0.92);
  }
}

@media (max-width: 480px) {
  .left-overlay-copy,
  .right-title-block {
    min-height: 46svh;
    padding: 6.5rem 0.95rem 1.1rem;
  }
  .left-product-title,
  .right-title-block h1 {
    font-size: clamp(2rem, 10.5vw, 3.05rem);
  }
}

/* ── INDEX MOBILE HERO ALIGNMENT ── */
@media (max-width: 768px) {
  .hero-verbatim { text-align: left !important; }
  .hero-atelier  { text-align: right !important; }
  .hero-verbatim .hero-label { text-align: left !important; padding-left: 0; padding-right: 0; }
  .hero-atelier .hero-label  { text-align: right !important; padding-left: 0; padding-right: 0; }

  .hero-brand { margin-bottom: 2.35rem; }
  .hero-wordmark { width: min(92vw, 430px); }
  .hero-copy { margin-top: 0.45rem; margin-bottom: 2.9rem; }
  .hero-title-band { align-items: flex-end; }
  .hero-verbatim, .hero-atelier { width: max-content; max-width: 100%; align-self: flex-end; }
}

@media (max-width: 768px) {
  body.mobile-side-open .mobile-product-tabs {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.mobile-side-open .panel-left,
  body.mobile-side-open .panel-right {
    z-index: 10000 !important;
  }

  body.mobile-side-open .return-button.return-left,
  body.mobile-side-open .return-button.return-right {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    min-height: calc(3.75rem + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)) !important;
    z-index: 11000 !important;
    background: rgba(0,0,0,0.92) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    color: rgba(255,255,255,0.96) !important;
    text-align: center !important;
  }
}

/* ── INDEX MOBILE DESIGN / KERNEL ── */
@media (max-width: 768px) {
  .panel-middle {
    position: relative !important;
    min-height: calc(24svh + 56.25vw + 64svh) !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #f2efea 0 22svh, #000 22svh 100%) !important;
  }

  .panel-middle .middle-bg {
    position: relative !important;
    display: block !important;
    width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    margin: 22svh 0 0 !important;
    background-color: #f2efea !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .design-grid {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 6 !important;
    pointer-events: none;
  }

  .design-left-copy {
    display: block !important;
    position: absolute !important;
    top: 5.2svh !important;
    left: 6vw !important;
    right: 5vw !important;
    max-width: none !important;
    padding: 0 !important;
    color: #000 !important;
    z-index: 7 !important;
  }

  .design-left-copy h2 {
    color: #000 !important;
    text-align: right !important;
    font-size: clamp(2.4rem, 10.4vw, 4rem) !important;
    line-height: 0.95 !important;
    letter-spacing: 0.2em !important;
    margin: 0 0 0.85rem !important;
    padding: 0 !important;
  }

  .design-left-copy p {
    color: #000 !important;
    max-width: 70vw !important;
    font-size: clamp(0.82rem, 3.7vw, 1.16rem) !important;
    line-height: 1.45 !important;
    text-align: left !important;
    margin: 0 0 0.85rem !important;
  }

  .design-right-copy {
    display: block !important;
    position: absolute !important;
    top: calc(24svh + 33vw) !important;
    right: 4vw !important;
    width: 40vw !important;
    max-width: 40vw !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #fff !important;
    text-align: center !important;
    z-index: 8 !important;
  }

  .design-right-copy p {
    color: #fff !important;
    font-size: clamp(0.78rem, 3.25vw, 1.02rem) !important;
    line-height: 1.45 !important;
    text-align: center !important;
    margin: 0 0 1.35rem !important;
  }

  .kernel-title {
    display: block !important;
    position: absolute !important;
    top: calc(24svh + 56.25vw + 8svh) !important;
    left: 6vw !important;
    right: auto !important;
    bottom: auto !important;
    width: min-content !important;
    margin: 0 !important;
    color: #fff !important;
    text-align: left !important;
    font-size: clamp(2rem, 9.5vw, 3.4rem) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.16em !important;
    white-space: normal !important;
    z-index: 8 !important;
  }

  .design-topline { display: none !important; }
}

@media (max-width: 480px) {
  .panel-middle {
    min-height: calc(24svh + 56.25vw + 66svh) !important;
    background: linear-gradient(180deg, #f2efea 0 24svh, #000 24svh 100%) !important;
  }
  .panel-middle .middle-bg {
    margin: 24svh 0 0 !important;
  }
  .design-left-copy h2 {
    font-size: clamp(2.2rem, 9.8vw, 3.4rem) !important;
  }
  .design-left-copy p {
    max-width: 69vw !important;
    font-size: clamp(0.76rem, 3.55vw, 1rem) !important;
  }
  .design-right-copy {
    top: calc(24svh + 34vw) !important;
    right: 3.5vw !important;
    width: 40vw !important;
    max-width: 40vw !important;
  }
  .design-right-copy p {
    font-size: clamp(0.72rem, 3.05vw, 0.92rem) !important;
  }
  .kernel-title {
    top: calc(24svh + 56.25vw + 8svh) !important;
    left: 6vw !important;
    font-size: clamp(1.75rem, 8.8vw, 3rem) !important;
  }
}