/* ============================================================
   MATRIKA STUDIOS — RESPONSIVE CSS
   Breakpoint overrides — Mobile-first adjustments
   ============================================================ */

/* ── BREAKPOINTS
   xs: < 480px
   sm: 480px – 768px
   md: 768px – 1024px
   lg: 1024px – 1280px
   xl: > 1280px
   ──────────────────────────────────────────────────────────── */

/* ── TABLET (md) ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --content-pad: 32px;
    --nav-h: 64px;
  }

  /* ── Tablet Nav ───────────────────────────────────────────── */
  .nav {
    padding-left: max(var(--content-pad), env(safe-area-inset-left));
    padding-right: max(var(--content-pad), env(safe-area-inset-right));
    gap: 16px;
    box-sizing: border-box;
  }

  .nav-logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: clamp(140px, 18vw, 175px);
    max-width: 180px;
    height: auto;
    max-height: calc(var(--nav-h) - 10px);
    aspect-ratio: 6392 / 1984;
    flex-shrink: 0;
    pointer-events: auto;
  }

  .nav-logo-img,
  .nav-logo img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: left center;
    display: block;
  }

  .nav-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(14px, 2.5vw, 24px);
    flex-shrink: 0;
    min-width: 0;
  }

  .nav-back-btn {
    font-size: 0.64rem;
    letter-spacing: clamp(0.18em, 0.35vw, 0.28em);
    gap: 7px;
    white-space: nowrap;
  }

  .nav-menu-btn {
    font-size: 0.64rem;
    letter-spacing: clamp(0.18em, 0.35vw, 0.28em);
    gap: 8px;
    white-space: nowrap;
  }

  /* Full viewport width guarantee */
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

}

/* ── MOBILE & TABLET PORTRAIT STACKED LAYOUT (< 900px) ────── */
@media (max-width: 899px) {
  html:not(.is-desktop-mode) body[data-page="home"],
  html:not(.is-desktop-mode) body[data-page="home"].ready {
    overflow: hidden !important;
    height: 100% !important;
    height: 100dvh !important;
  }

  /* Home full-width stacked container */
  html:not(.is-desktop-mode) .home {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  html:not(.is-desktop-mode) .home-split {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
  }

  html:not(.is-desktop-mode) .home-world,
  html:not(.is-desktop-mode) .home-world--left,
  html:not(.is-desktop-mode) .home-world--right {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    flex: 1 1 50% !important;
    height: 50% !important;
    max-height: 50% !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
  }

  html:not(.is-desktop-mode) .home-world-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  html:not(.is-desktop-mode) .home-world-bg img,
  html:not(.is-desktop-mode) .slide-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  html:not(.is-desktop-mode) .home-world-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  html:not(.is-desktop-mode) #home-idle-bg {
    display: none !important;
  }

  html:not(.is-desktop-mode) .home-divider {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: 1px !important;
    transform: translateY(-50%) !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.12) 15%,
        rgba(182, 153, 83, 0.28) 50%,
        rgba(255, 255, 255, 0.12) 85%,
        transparent 100%) !important;
    z-index: 10 !important;
    pointer-events: none !important;
  }

  /* Glass contact panel centered over the section boundary */
  html:not(.is-desktop-mode) .home-glass-contact {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: min(310px, calc(100% - 40px)) !important;
    max-width: 310px !important;
    padding: clamp(8px, 1.3vh, 11px) clamp(14px, 4vw, 20px) !important;
    gap: clamp(5px, 0.8vh, 7px) !important;
    background: rgba(10, 10, 13, 0.72) !important;
    backdrop-filter: blur(14px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
      0 8px 24px -4px rgba(0, 0, 0, 0.55),
      0 2px 8px -2px rgba(0, 0, 0, 0.3) !important;
    z-index: 20 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
  }

  html:not(.is-desktop-mode) .home-glass-contact .home-contact-location {
    display: none !important;
  }

  /* Bottom location line on portrait/stacked screens */
  html:not(.is-desktop-mode) .home-bottom-location {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    bottom: max(14px, env(safe-area-inset-bottom, 14px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 20 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: calc(100% - 32px) !important;
    text-align: center !important;
  }

  html:not(.is-desktop-mode) .home-bottom-location-text {
    font-family: var(--font-ui) !important;
    font-size: clamp(0.38rem, 1.8vw, 0.44rem) !important;
    font-weight: var(--fw-regular) !important;
    letter-spacing: clamp(0.18em, 0.4vw, 0.26em) !important;
    margin-right: -0.2em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.36) !important;
    line-height: 1.2 !important;
    user-select: none !important;
  }
}

/* ── TABLET (md) CONTINUED ─────────────────────────────────── */
@media (max-width: 1024px) {

  /* Expertise */
  .expertise-item {
    grid-template-columns: 44px 1fr;
    gap: var(--sp-md);
  }

  .expertise-arrow {
    display: none;
  }

  /* Works */
  .works-item {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
  }

  .works-item:nth-child(even) {
    direction: ltr;
  }

  /* Menu */
  .menu-nav-link {
    font-size: clamp(1.6rem, 4.2vw, 2.9rem);
  }
}

/* ── MOBILE (sm) ───────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --content-pad: var(--content-pad-m);
    --nav-h: 60px;
    --sp-4xl: 72px;
    --sp-3xl: 56px;
  }

  /* ── Nav ─────────────────────────────────────────────────── */
  .nav {
    padding: 0 max(clamp(14px, 3.5vw, 24px), env(safe-area-inset-right)) 0 max(clamp(14px, 3.5vw, 24px), env(safe-area-inset-left));
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 2vw, 16px);
  }

  .nav-logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: clamp(100px, 22vw, 130px);
    max-width: 135px;
    height: auto;
    max-height: calc(var(--nav-h) - 10px);
    aspect-ratio: 6392 / 1984;
    flex-shrink: 0;
    min-width: 0;
    pointer-events: auto;
  }

  .nav-logo-img,
  .nav-logo img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: left center;
    display: block;
  }

  .nav-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(8px, 2vw, 14px);
    flex-shrink: 1;
    min-width: 0;
  }

  .nav-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: clamp(0.52rem, 1.8vw, 0.60rem);
    letter-spacing: clamp(0.08em, 0.2vw, 0.14em);
    white-space: nowrap;
    padding: 6px 0;
    min-height: 44px;
    box-sizing: border-box;
    flex-shrink: 1;
  }

  .nav-back-arrow {
    font-size: 0.72rem;
    transform: translateY(-0.5px);
  }

  .nav-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: clamp(0.52rem, 1.8vw, 0.60rem);
    letter-spacing: clamp(0.08em, 0.2vw, 0.14em);
    white-space: nowrap;
    padding: 6px 0;
    min-height: 44px;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  .nav-hamburger {
    width: 18px;
    gap: 4px;
    flex-shrink: 0;
  }

  /* ── Intro — scale logo down on small screens ────────────── */
  .intro-logo-img {
    width: clamp(160px, 65vw, 280px);
  }

  /* ── Homepage — mobile stacked layout ───────────────────── */
  body[data-page="home"],
  body[data-page="home"].ready {
    overflow: hidden !important;
    height: 100% !important;
    height: 100dvh !important;
  }

  .home {
    position: fixed !important;
    inset: 0 !important;
    height: 100% !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .home-split {
    flex-direction: column !important;
    height: 100% !important;
    min-height: 100% !important;
    flex: 1 1 100% !important;
    overflow: hidden !important;
  }

  .home-world {
    width: 100% !important;
    flex: 1 1 50% !important;
    /* Each panel gets exactly half the viewport height — clean split */
    min-height: 50% !important;
    height: 50% !important;
    max-height: 50% !important;
    overflow: hidden !important;
  }

  /* ── Home Backgrounds — per-section, no overlap ─────────── */
  /*
    On mobile the shared #home-idle-bg causes visual clutter because it
    spans both stacked sections. Disable it completely on mobile.
    Each section has its own .home-world-bg slideshow, which is sufficient.
  */
  #home-idle-bg {
    display: none !important;
  }

  /* Slideshow images: more visible on mobile (was 0.28 — too dark) */
  .home-world-bg img {
    opacity: 0 !important;
  }

  .home-world-bg img.is-active {
    opacity: 0.45 !important;
  }

  /* Mobile overlay: top-to-bottom gradient keeps bottom text readable
     without killing the top of the image. Applies to both worlds. */
  .home-world-overlay {
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.40) 40%,
        rgba(0, 0, 0, 0.68) 75%,
        rgba(0, 0, 0, 0.82) 100%) !important;
  }

  /* Both panels share same overlay direction on mobile */
  .home-world--right .home-world-overlay {
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.40) 40%,
        rgba(0, 0, 0, 0.68) 75%,
        rgba(0, 0, 0, 0.82) 100%) !important;
  }

  /* Crimson tint on originals — keep it always on (not hover-only) on mobile */
  .home-world--right .home-world-bg::after {
    opacity: 0.5 !important;
  }

  /* Section separator: unified horizontal divider across boundary */
  .home-world--left {
    border-bottom: none !important;
  }

  /* Remove the redundant top border that was previously on --right */
  .home-world--right {
    border-top: none !important;
  }

  .home-divider {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: 1px !important;
    transform: translateY(-50%) !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.12) 15%,
        rgba(182, 153, 83, 0.28) 50%,
        rgba(255, 255, 255, 0.12) 85%,
        transparent 100%) !important;
    z-index: 10 !important;
    pointer-events: none !important;
  }

  /* Glass contact panel responsive layout on mobile */
  .home-glass-contact {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: min(310px, calc(100% - 40px)) !important;
    max-width: 310px !important;
    padding: clamp(8px, 1.2vh, 10px) clamp(12px, 3.5vw, 18px) !important;
    gap: clamp(4px, 0.7vh, 6px) !important;
    border-radius: 9px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 20 !important;
    box-sizing: border-box !important;
  }

  .home-glass-contact .home-contact-location {
    display: none !important;
  }

  /* ── Home Content ────────────────────────────────────────── */
  .home-world-content {
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 100% !important;
    gap: clamp(5px, 1vh, 10px) !important;
  }

  .home-world--left .home-world-content {
    padding-top: calc(var(--nav-h, 60px) + clamp(4px, 1vh, 12px)) !important;
    padding-bottom: clamp(44px, 5.5vh, 54px) !important;
    padding-left: var(--content-pad-m, 16px) !important;
    padding-right: var(--content-pad-m, 16px) !important;
  }

  .home-world--right .home-world-content {
    align-items: center !important;
    text-align: center !important;
    padding-top: clamp(44px, 5.5vh, 54px) !important;
    padding-bottom: clamp(28px, 3.8vh, 38px) !important;
    padding-left: var(--content-pad-m, 16px) !important;
    padding-right: var(--content-pad-m, 16px) !important;
  }

  .home-world--right .home-world-tagline {
    text-align: center !important;
  }

  /* Title */
  .home-world-title {
    font-size: clamp(1.55rem, 7.2vw, 2.2rem) !important;
    letter-spacing: 0.05em !important;
    line-height: 0.92 !important;
    text-align: center !important;
    align-items: center !important;
    margin: 0 !important;
  }

  /* Tagline */
  .home-world-tagline {
    max-width: 250px;
    font-size: clamp(0.50rem, 1.9vw, 0.56rem);
    letter-spacing: 0.20em;
    line-height: 1.45;
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 !important;
  }

  /* Enter link — comfortable touch target, always visible (from index.html hover:none fix) */
  .home-world-enter {
    padding: 8px 12px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(0.52rem, 1.9vw, 0.58rem) !important;
    letter-spacing: 0.24em !important;
    overflow: visible !important;
  }

  /* Home signature (consolidated into glass contact panel) */
  .home-signature {
    display: none !important;
  }

  .home-signature-text {
    font-size: clamp(0.42rem, 2.4vw, 0.5rem) !important;
    letter-spacing: clamp(0.18em, 0.4vw, 0.3em) !important;
  }

  /* ── Menu ────────────────────────────────────────────────── */
  .menu-overlay {
    padding: var(--nav-h) var(--content-pad-m) var(--sp-xl);
  }

  .menu-nav-link {
    font-size: clamp(1.5rem, 8.5vw, 2.5rem);
  }

  /* ── Page headers ────────────────────────────────────────── */
  .page-header {
    padding: calc(var(--nav-h) + var(--sp-xl)) var(--content-pad-m) var(--sp-xl);
  }

  /* ── Expertise ───────────────────────────────────────────── */
  .expertise-item {
    grid-template-columns: 36px 1fr;
    gap: var(--sp-md);
    padding: var(--sp-lg) 0 var(--sp-lg) 16px;
  }

  .expertise-name {
    font-size: clamp(1.2rem, 7vw, 2rem);
  }

  .expertise-sub-list {
    gap: 8px 10px;
  }

  .expertise-sub-item {
    font-size: clamp(0.62rem, 2.5vw, 0.76rem);
    padding: 7px 12px;
  }

  /* ── Works ───────────────────────────────────────────────── */
  .works-item {
    padding: var(--sp-xl) 0;
  }

  .works-title {
    font-size: clamp(1.2rem, 6vw, 2rem);
  }

  /* ── Footer ──────────────────────────────────────────────── */
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-md);
    padding: var(--sp-xl) var(--content-pad-m);
  }

  .footer-copy {
    text-align: left;
  }

  /* ── Menu footer ─────────────────────────────────────────── */
  .menu-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-md);
  }

  /* ── Originals ───────────────────────────────────────────── */
  .originals-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── About ───────────────────────────────────────────────── */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-xl) !important;
  }

  /* ── Buttons — minimum touch target 44px ─────────────────── */
  .btn {
    padding: 14px var(--sp-xl);
    min-height: 44px;
  }

  /* ── Inputs — prevent iOS auto-zoom on focus ─────────────── */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ── SMALL PHONE (xs) ───────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --content-pad-m: 14px;
  }

  .nav {
    padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    gap: 8px;
  }

  .nav-logo {
    width: clamp(84px, 22vw, 102px);
    max-width: 106px;
    height: auto;
    max-height: calc(var(--nav-h) - 12px);
    aspect-ratio: 6392 / 1984;
    flex-shrink: 0;
  }

  .nav-controls {
    gap: clamp(6px, 1.8vw, 10px);
    flex-shrink: 1;
    min-width: 0;
  }

  .nav-back-btn {
    font-size: clamp(0.48rem, 1.7vw, 0.52rem);
    letter-spacing: 0.08em;
    gap: 3px;
    padding: 4px 0;
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    flex-shrink: 1;
    white-space: nowrap;
  }

  .nav-back-arrow {
    font-size: 0.68rem;
  }

  .nav-menu-btn {
    font-size: clamp(0.48rem, 1.7vw, 0.52rem);
    letter-spacing: 0.08em;
    gap: 4px;
    padding: 4px 0;
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .nav-hamburger {
    width: 16px;
    gap: 3.5px;
    flex-shrink: 0;
  }

  .home-world-title {
    font-size: clamp(1.35rem, 6.5vw, 1.8rem) !important;
    letter-spacing: 0.05em !important;
    line-height: 0.92 !important;
  }

  .home-world--left .home-world-content {
    padding-top: calc(var(--nav-h, 54px) + 2px) !important;
    padding-bottom: 38px !important;
    gap: 4px !important;
  }

  .home-world--right .home-world-content {
    padding-top: 38px !important;
    padding-bottom: 24px !important;
    gap: 4px !important;
  }

  .home-world-tagline {
    font-size: clamp(0.46rem, 1.8vw, 0.52rem) !important;
    line-height: 1.4 !important;
  }

  .home-world-enter {
    padding: 6px 10px !important;
    min-height: 40px !important;
  }

  .t-headline {
    font-size: clamp(2rem, 10vw, 3.5rem);
  }

  .menu-nav-link {
    font-size: clamp(1.3rem, 9vw, 2rem);
  }

  /* Prevent long email addresses from overflowing on about/contact */
  .about-location-text,
  .contact-detail-value,
  .contact-detail-value a {
    word-break: break-all;
  }

  .home-glass-contact {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: min(310px, calc(100% - 32px)) !important;
    max-width: 310px !important;
    padding: clamp(7px, 1.1vh, 9px) clamp(10px, 3vw, 15px) !important;
    gap: 5px !important;
  }

  .home-glass-contact .home-contact-location {
    display: none !important;
  }

  .home-bottom-location {
    bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
  }

  .home-bottom-location-text {
    font-size: clamp(0.36rem, 1.7vw, 0.42rem) !important;
    letter-spacing: clamp(0.16em, 0.35vw, 0.24em) !important;
  }

  .home-contact-btn {
    padding: 4px 12px !important;
  }
}

/* ── DESKTOP & LANDSCAPE TABLET (Side-by-side Layout) ───────── */
@media (min-width: 900px), (orientation: landscape) and (min-width: 769px) {
  .home {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  .home-split {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    overflow: visible !important;
  }

  .home-world,
  .home-world--left,
  .home-world--right {
    flex: 0 0 50%;
    height: 100% !important;
    min-height: 100% !important;
    border-bottom: none !important;
    border-top: none !important;
    transition: flex 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .home-divider {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50%;
    right: auto !important;
    width: 1px !important;
    height: 100% !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(182, 153, 83, 0.25) 20%,
        rgba(182, 153, 83, 0.25) 80%,
        transparent 100%) !important;
    z-index: 10 !important;
    transition: left 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .home-glass-contact {
    position: absolute !important;
    top: auto !important;
    bottom: clamp(16px, 3vh, 32px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: 340px !important;
    margin: 0 !important;
    z-index: 20 !important;
  }

  .home-glass-contact .home-contact-location {
    display: block !important;
  }

  .home-bottom-location {
    display: none !important;
  }

  #home-idle-bg {
    display: block !important;
  }

  .home-world-overlay {
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.82) 100%) !important;
  }

  .home-world--right .home-world-overlay {
    background: linear-gradient(to left,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.82) 100%) !important;
  }

  .home-world-content {
    align-items: flex-start !important;
    text-align: left !important;
    justify-content: flex-end !important;
    padding: 0 var(--content-pad) clamp(44px, 7.5vh, 80px) !important;
  }

  .home-world--right .home-world-content {
    align-items: flex-end !important;
    text-align: right !important;
  }

  .home-world--right .home-world-tagline {
    text-align: right !important;
  }

  .home-world-title {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .home-world--right .home-world-title {
    align-items: flex-end !important;
    text-align: right !important;
  }
}

/* ── DESKTOP SITE MODE EXPLICIT OVERRIDES ───────────────────── */
html.is-desktop-mode {
  --nav-h: 72px !important;
  --content-pad: clamp(32px, 4vw, 56px) !important;
}

html.is-desktop-mode .nav-logo {
  height: 44px !important;
  width: auto !important;
  max-width: 170px !important;
  max-height: 44px !important;
}

html.is-desktop-mode .home,
body.is-desktop-mode .home {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

html.is-desktop-mode .home-split,
body.is-desktop-mode .home-split {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  overflow: visible !important;
}

html.is-desktop-mode .home-world,
html.is-desktop-mode .home-world--left,
html.is-desktop-mode .home-world--right,
body.is-desktop-mode .home-world,
body.is-desktop-mode .home-world--left,
body.is-desktop-mode .home-world--right {
  flex: 0 0 50% !important;
  height: 100% !important;
  min-height: 100% !important;
  border-bottom: none !important;
  border-top: none !important;
  transition: flex 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.is-desktop-mode .home-divider,
body.is-desktop-mode .home-divider {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  right: auto !important;
  width: 1px !important;
  height: 100% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg,
      transparent 0%,
      rgba(182, 153, 83, 0.25) 20%,
      rgba(182, 153, 83, 0.25) 80%,
      transparent 100%) !important;
  z-index: 10 !important;
  transition: left 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html.is-desktop-mode .home-glass-contact,
body.is-desktop-mode .home-glass-contact {
  position: absolute !important;
  top: auto !important;
  bottom: clamp(16px, 3vh, 32px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: 340px !important;
  margin: 0 !important;
  z-index: 20 !important;
}

html.is-desktop-mode .home-glass-contact .home-contact-location,
body.is-desktop-mode .home-glass-contact .home-contact-location {
  display: block !important;
}

html.is-desktop-mode .home-bottom-location,
body.is-desktop-mode .home-bottom-location {
  display: none !important;
}

html.is-desktop-mode #home-idle-bg,
body.is-desktop-mode #home-idle-bg {
  display: block !important;
}

html.is-desktop-mode .home-world-overlay,
body.is-desktop-mode .home-world-overlay {
  background: linear-gradient(to right,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.82) 100%) !important;
}

html.is-desktop-mode .home-world--right .home-world-overlay,
body.is-desktop-mode .home-world--right .home-world-overlay {
  background: linear-gradient(to left,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.82) 100%) !important;
}

html.is-desktop-mode .home-world-content,
body.is-desktop-mode .home-world-content {
  align-items: flex-start !important;
  text-align: left !important;
  justify-content: flex-end !important;
  padding: 0 var(--content-pad) clamp(44px, 7.5vh, 80px) !important;
}

html.is-desktop-mode .home-world--right .home-world-content,
body.is-desktop-mode .home-world--right .home-world-content {
  align-items: flex-end !important;
  text-align: right !important;
}

html.is-desktop-mode .home-world--right .home-world-tagline,
body.is-desktop-mode .home-world--right .home-world-tagline {
  text-align: right !important;
}

html.is-desktop-mode .home-world-title,
body.is-desktop-mode .home-world-title {
  align-items: flex-start !important;
  text-align: left !important;
}

html.is-desktop-mode .home-world--right .home-world-title,
body.is-desktop-mode .home-world--right .home-world-title {
  align-items: flex-end !important;
  text-align: right !important;
}

/* ── LARGE DESKTOP (xl) ─────────────────────────────────────── */
@media (min-width: 1440px) {
  :root {
    --content-pad: 72px;
  }
}

/* ── SHORT / LANDSCAPE SCREENS ──────────────────────────────── */
@media (max-height: 550px) and (max-width: 899px) {
  html:not(.is-desktop-mode) .home-world {
    /* On landscape mobile each section gets at least 200px */
    min-height: 200px !important;
    /* Also override the 50dvh from mobile: use vh units instead */
    height: 50vh !important;
  }

  .home-world-title {
    font-size: clamp(1.4rem, 6.5vh, 2.2rem) !important;
  }

  .menu-inner {
    gap: var(--sp-sm) !important;
    padding-top: var(--sp-md) !important;
  }

  .menu-nav-link {
    font-size: clamp(1.2rem, 5.5vh, 1.8rem) !important;
  }
}

/* ── FEATURED WORK & 3D/CGI RESPONSIVE ───────────────────────── */
@media (max-width: 1024px) {
  .disciplines-section {
    padding: 0 var(--content-pad);
    max-width: 100%;
    box-sizing: border-box;
  }

  .discipline-row {
    grid-template-columns: 48px 1fr auto;
    gap: 14px 24px;
    padding: 28px 0 28px 16px;
    max-width: 100%;
    box-sizing: border-box;
    align-items: center;
  }

  .discipline-num {
    grid-column: 1;
    grid-row: 1;
  }

  .discipline-title-wrap {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .discipline-status-wrap {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    justify-content: flex-end;
  }

  .discipline-desc {
    grid-column: 2 / -1;
    grid-row: 2;
    margin-top: 4px;
    min-width: 0;
    max-width: 100%;
  }

  .discipline-arrow--active {
    opacity: 1;
    display: inline-flex;
    color: var(--matrika-gold);
  }

  .collection-hero {
    padding: calc(var(--nav-h) + 36px) var(--content-pad) 40px;
  }

  .editorial-gallery {
    padding: 36px var(--content-pad) 60px;
    gap: 32px;
  }

  .editorial-grid-2,
  .editorial-grid-2-asym,
  .editorial-grid-2-asym-rev {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .editorial-grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .editorial-grid-3> :last-child {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .reveal {
    transform: translateY(16px);
    transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
  }

  .featured-header {
    padding: calc(var(--nav-h) + 40px) var(--content-pad-m) 36px;
  }

  .featured-title {
    font-size: clamp(2.2rem, 9.5vw, 3.8rem);
    line-height: 1.0;
  }

  .featured-intro {
    margin-top: 16px;
  }

  .disciplines-section {
    padding: 0 var(--content-pad-m);
    max-width: 100%;
    box-sizing: border-box;
  }

  .discipline-list {
    width: 100%;
    max-width: 100%;
  }

  .discipline-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 8px 14px;
    padding: 22px 0 22px 10px;
    max-width: 100%;
    box-sizing: border-box;
    align-items: start;
  }

  .discipline-num {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.8rem;
    line-height: 1.2;
    padding-top: 3px;
  }

  .discipline-title-wrap {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    max-width: 100%;
  }

  .discipline-title {
    font-size: clamp(1.2rem, 5.2vw, 1.85rem);
    line-height: 1.1;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .discipline-desc {
    grid-column: 2 / -1;
    grid-row: 2;
    font-size: 0.82rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
    margin-bottom: 2px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* COMING SOON status badge placed below description, left-aligned, always inside viewport */
  .discipline-status-wrap {
    grid-column: 2 / -1;
    grid-row: 3;
    justify-content: flex-start;
    align-items: center;
    margin-top: 6px;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
  }

  .discipline-badge {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    padding: 5px 12px;
    max-width: 100%;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
  }

  .discipline-arrow {
    display: none;
  }

  /* 03 — 3D & CGI active row: arrow positioned cleanly at top-right of Row 1 */
  .discipline-row--active .discipline-status-wrap--active {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    justify-content: flex-end;
    margin-top: 0;
    padding-right: 4px;
    min-width: auto;
  }

  .discipline-arrow--active {
    display: inline-flex !important;
    opacity: 1 !important;
    font-size: 1.3rem !important;
    color: var(--matrika-gold) !important;
    transform: none !important;
  }

  .collection-hero {
    padding: calc(var(--nav-h) + 24px) var(--content-pad-m) 36px;
  }

  .collection-title {
    font-size: clamp(2.4rem, 11vw, 4.2rem);
  }

  .editorial-gallery {
    padding: 24px var(--content-pad-m) 48px;
    gap: 24px;
  }

  .editorial-grid-3 {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .editorial-grid-3> :last-child {
    grid-column: auto;
  }

  .editorial-panoramic {
    aspect-ratio: 16 / 9;
    max-height: none;
  }

  .editorial-card-caption {
    opacity: 1;
    transform: none;
    background: rgba(0, 0, 0, 0.85);
  }

  .video-controls-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
  }

  .video-actions-group {
    width: 100%;
    justify-content: flex-start;
  }

  .collection-bottom-nav,
  .coming-soon-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 36px var(--content-pad-m);
  }

  .coming-soon-wrapper {
    padding: calc(var(--nav-h) + 24px) var(--content-pad-m) 36px;
  }

  .coming-soon-title {
    font-size: clamp(2.4rem, 11vw, 4.2rem);
  }

  .coming-soon-statement {
    font-size: clamp(1rem, 4vw, 1.3rem);
  }

  .lightbox-header {
    padding: 16px 20px;
  }

  .lightbox-stage {
    padding: 12px 20px;
  }

  .lightbox-nav-btn {
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
    background: rgba(0, 0, 0, 0.7);
  }

  .lightbox-prev-btn {
    left: 8px;
  }

  .lightbox-next-btn {
    right: 8px;
  }
}

@media (max-width: 480px) {
  .discipline-row {
    grid-template-columns: 26px 1fr auto;
    gap: 6px 10px;
    padding: 18px 0 18px 6px;
  }

  .discipline-num {
    font-size: 0.75rem;
    padding-top: 2px;
  }

  .discipline-title {
    font-size: clamp(1.1rem, 4.8vw, 1.45rem);
  }

  .discipline-desc {
    font-size: 0.78rem;
    line-height: 1.5;
  }

  .discipline-status-wrap {
    margin-top: 4px;
  }

  .discipline-badge {
    font-size: 0.58rem;
    padding: 4px 10px;
    letter-spacing: 0.15em;
  }

  .discipline-row--active .discipline-status-wrap--active {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
  }

  .discipline-arrow--active {
    font-size: 1.2rem !important;
  }

  .video-wrapper {
    aspect-ratio: 16 / 9;
  }
}

/* ── ULTRA-COMPACT SMARTPHONE (<= 360px down to 320px) ──────── */
@media (max-width: 360px) {
  :root {
    --content-pad-m: 10px;
  }

  .nav {
    padding: 0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
    gap: 6px;
  }

  .nav-logo {
    width: clamp(74px, 22vw, 84px);
    max-width: 86px;
    height: auto;
    max-height: calc(var(--nav-h) - 14px);
    aspect-ratio: 6392 / 1984;
    flex-shrink: 0;
  }

  .nav-controls {
    gap: 5px;
    flex-shrink: 1;
    min-width: 0;
  }

  .nav-back-btn {
    font-size: 0.46rem;
    letter-spacing: 0.05em;
    gap: 2px;
    padding: 3px 0;
    white-space: nowrap;
    flex-shrink: 1;
  }

  .nav-back-arrow {
    font-size: 0.60rem;
  }

  .nav-menu-btn {
    font-size: 0.46rem;
    letter-spacing: 0.05em;
    gap: 3px;
    padding: 3px 0;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .nav-hamburger {
    width: 14px;
    gap: 3px;
    flex-shrink: 0;
  }
}


/* ── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .home-world-bg img {
    transition: opacity 0.3s linear !important;
  }

  .home-split {
    transition: none !important;
  }

  .menu-nav-link {
    transform: none !important;
    transition: color 0.2s !important;
  }

  .menu-overlay.is-open .menu-nav-link {
    transform: none !important;
  }

  .reveal,
  .reveal-clip .reveal-inner {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
  }

  .home-glass-contact,
  .home-contact-arrow,
  .home-contact-btn {
    transition: none !important;
  }
}

/* ── PRINT ───────────────────────────────────────────────────── */
@media print {

  .cursor,
  .grain-overlay,
  .nav-menu-btn,
  .menu-overlay,
  .intro {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  a {
    text-decoration: underline;
  }
}