/* =============================================================
   mobile.css — parallel mobile experience
   All rules scoped to (max-width: 768px). Desktop untouched.
   ============================================================= */

/* ── Vault panels (hidden on desktop) ─────────────────────── */
.mvault-panel {
  display: none; /* hidden until mobile breakpoint */
}

@media (max-width: 768px) {

  :root {
    --mvault-z-panel: 9999;
    --mvault-z-overlay: 9100; /* above hamburger (9002) and nav overlay (9000) */
  }

  /* Hide scroll hints on mobile — they're tied to desktop ScrollTrigger logic */
  .morph__scroll-hint,
  .morph__hscroll-hint {
    display: none !important;
  }

  /* Hide the persistent music player and audio consent modal on mobile */
  #morph-player,
  #audio-consent,
  #player-exit-btn {
    display: none !important;
  }

  /* ── Hero section: single viewport, natural scroll-off ─────── */

  /* Hero is exactly one screen tall — no 220vh sticky tunnel.
     The section scrolls away cleanly; portrait + text move together. */
  #zoom-out {
    height: 100dvh !important;
  }

  #zoomout-sticky {
    position: relative !important;
    height: 100dvh !important;
  }

  @supports not (height: 100dvh) {
    #zoom-out    { height: 100vh !important; }
    #zoomout-sticky { height: 100vh !important; }
  }

  .zoomout__bg {
    background: #ffffff !important;
  }

  /* Kill the beige→cobalt gradient overlay — no soft transition, clean cut */
  .zoomout__bg::after {
    display: none !important;
  }

  /* The hero section's own background is already cobalt (#0A1A4A via .zoomout).
     Fade the beige overlay layer out toward the bottom so the cobalt beneath
     matches the section that follows — no seam possible when both are identical. */

  /* Prevent subpixel gap at the hero/hscroll-intro boundary */
  #zoom-out {
    margin-bottom: -1px !important;
  }

  /* Prevent GSAP from fading the hero overlay on scroll.
     The section scrolls off the screen instead of fading. */
  #morph-overlay {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Hero text: left-aligned at 75% of the viewport width.
     Portrait peeks through on the right.
     Anchor only from the bottom — face-morph.css's desktop rule sets
     top:50% + translateY(10%), which makes the block shrink-anchor to
     viewport centre. On iOS Safari with toolbars visible, 100dvh shrinks,
     the CTA rides up, and the scroll hint (viewport-bottom-anchored) rides
     up even more, so they collide. Pure bottom anchoring keeps the CTA at
     a predictable offset regardless of dvh changes. */
  .morph__hero-intro {
    top: auto !important;
    transform: none !important;
    left: 1.25rem !important;
    right: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 4.5rem) !important;
    width: 75vw !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Keep revealed state working after we disabled the desktop transform */
  .morph__hero-intro.revealed {
    transform: none !important;
  }

  /* Legibility gradient — cobalt sweep from the bottom, blends seamlessly
     into the cobalt section that follows. Extended top inset (-40dvh) ensures
     the "Award-Winning" eyebrow (at the top of the text block) sits inside the
     dense part of the gradient and has clear legibility. The bottom inset
     includes safe-area-inset-bottom so the cobalt reaches the section boundary. */
  .morph__hero-intro::before {
    content: '' !important;
    position: absolute !important;
    inset: -40dvh -50vw calc(-4.5rem - env(safe-area-inset-bottom, 0px)) -1.25rem !important;
    background: linear-gradient(
      to top,
      #0A1A4A 0%,
      rgba(10, 26, 74, 0.94) 18%,
      rgba(10, 26, 74, 0.80) 38%,
      rgba(10, 26, 74, 0.58) 55%,
      rgba(10, 26, 74, 0.22) 78%,
      transparent 100%
    ) !important;
    border-radius: 0 !important;
    z-index: 0 !important;
  }

  @supports not (height: 100dvh) {
    .morph__hero-intro::before {
      inset: -40vh -50vw calc(-4.5rem - env(safe-area-inset-bottom, 0px)) -1.25rem !important;
    }
  }

  /* Ensure headline and CTA sit above the gradient layer */
  .morph__hero-role,
  .morph__hero-headline,
  .morph__logo-marquee,
  .morph__hero-cta {
    position: relative;
    z-index: 1;
  }

  /* Marquee spans full viewport width — break out of the 75vw hero-intro.
     hero-intro starts at left: 1.25rem, so pull back by the same amount.
     Size scales proportionally: images and gap use vw units so they grow
     with viewport width rather than hitting the desktop clamp minimum. */
  .morph__logo-marquee {
    overflow: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -1.25rem !important;
    /* Vertical breathing room scales with the larger track */
    margin-top: clamp(10px, 2.5vw, 16px) !important;
    margin-bottom: clamp(14px, 3.5vw, 22px) !important;
  }

  /* Track: gap scales with viewport */
  .morph__logo-marquee-track {
    gap: clamp(28px, 8vw, 52px) !important;
  }

  /* Logo images: vw-relative so they fill the wider track proportionally */
  .morph__logo-marquee-track img {
    height: clamp(20px, 5.5vw, 38px) !important;
  }

  .morph__logo-marquee-track img[alt="Microsoft"] {
    height: clamp(15px, 4vw, 28px) !important;
  }

  .morph__logo-marquee-track img[alt="Copilot"] {
    height: clamp(16px, 4.3vw, 30px) !important;
  }

  /* Hero text scale — mirrors desktop's type hierarchy at 3/4 viewport width.
     Desktop ratio: role (1.1vw) : headline (7.5vw) ≈ 0.147.
     "Designer" targets ~75vw → headline ~18vw; eyebrow + CTA track the same ratio. */
  .morph__hero-headline {
    font-size: clamp(60px, 18vw, 120px) !important;
    line-height: 0.9 !important;
    color: #f5f5f0 !important;
  }

  .morph__hero-role {
    font-size: clamp(12px, 2.65vw, 18px) !important;
    color: rgba(245, 245, 240, 0.80) !important;
    font-weight: 400 !important;
    letter-spacing: 0.22em !important;
  }

  /* "View My Work" — black on cobalt gradient, scales with the headline.
     The parent .morph__hero-intro is anchored at left:1.25rem and width:75vw,
     so auto-margin centering only centres within that box.
     Strategy: position:relative + left pushes the element's left edge to
     exactly 50vw from the viewport left (container-offset cancels out), then
     translateX(-50%) pulls it back by half its own width → true screen centre.
     white-space:nowrap locks it to one line regardless of font scaling. */
  .morph__hero-cta {
    background: #111111 !important;
    border-color: #111111 !important;
    color: #ffffff !important;
    font-size: clamp(13px, 2.65vw, 18px) !important;
    padding: clamp(13px, 2.2vw, 18px) clamp(22px, 3.8vw, 36px) !important;
    -webkit-tap-highlight-color: transparent;
    position: relative !important;
    left: calc(50vw - 1.25rem) !important;
    transform: translateX(-50%) !important;
    white-space: nowrap !important;
  }

  /* Logo marquee: invert to white so logos read on the cobalt gradient */
  .morph__logo-marquee-track img {
    filter: brightness(0) invert(1);
    opacity: 0.75;
  }

  /* Chrome panel base */
  .mvault-panel {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100dvh;
    z-index: var(--mvault-z-panel);
    /* iOS Safari hit-tests will-change: transform elements at their
       pre-transform DOM position. Without this, two off-screen panels
       (left+right) tile 100% of the viewport and eat every tap on the
       hamburger, CTA, and spotlight cards. Re-enabled on sealing/sealed
       below so the user can still close the vault from within it. */
    pointer-events: none;
    will-change: transform, background-position;
    background:
      linear-gradient(105deg,
        rgba(255,255,255,0.0) 30%,
        rgba(255,255,255,0.18) 50%,
        rgba(255,255,255,0.0) 70%
      ),
      linear-gradient(168deg,
        #e5e5e5 0%, #8a8a8a 40%, #4a4a4a 65%, #8a8a8a 82%, #e5e5e5 100%
      );
    background-size: 200% 100%, 100% 100%;
    transition:
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      background-position 0.6s ease;
  }

  @supports not (height: 100dvh) {
    .mvault-panel { height: 100vh; }
  }

  .mvault-panel--left {
    left: 0;
    width: calc(50vw + 1px + env(safe-area-inset-left, 0px));
    transform: translate3d(-101%, 0, 0);
    background:
      /* 1. Shine sweep — animated (200% wide) */
      linear-gradient(108deg,
        transparent 28%, rgba(255,255,255,0.22) 47%, rgba(255,255,255,0.06) 54%, transparent 70%),
      /* 2. Broad blue reflection — mid */
      radial-gradient(ellipse 130% 30% at 58% 50%,
        rgba(41,121,255,0.12) 0%, rgba(20,90,230,0.05) 50%, transparent 100%),
      /* 3. Broad blue reflection — upper */
      radial-gradient(ellipse 110% 22% at 62% 28%,
        rgba(60,140,255,0.09) 0%, rgba(30,110,240,0.03) 55%, transparent 100%),
      /* 4. Blue ambient glow */
      radial-gradient(ellipse 80% 52% at 58% 50%,
        rgba(30,100,255,0.05) 0%, transparent 72%),
      /* 5. Metallic base — cool chrome */
      linear-gradient(168deg,
        #cdd8ee 0%, #8292ae 34%, #3c4858 60%, #8292ae 80%, #cdd8ee 100%);
    background-size: 200% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  }

  .mvault-panel--right {
    right: 0;
    width: calc(50vw + 1px + env(safe-area-inset-right, 0px));
    transform: translate3d(101%, 0, 0);
    background:
      /* 1. Shine sweep — animated (200% wide) */
      linear-gradient(108deg,
        transparent 28%, rgba(255,255,255,0.22) 47%, rgba(255,255,255,0.06) 54%, transparent 70%),
      /* 2. Broad blue reflection — mid */
      radial-gradient(ellipse 130% 30% at 42% 50%,
        rgba(41,121,255,0.12) 0%, rgba(20,90,230,0.05) 50%, transparent 100%),
      /* 3. Broad blue reflection — upper */
      radial-gradient(ellipse 110% 22% at 38% 28%,
        rgba(60,140,255,0.09) 0%, rgba(30,110,240,0.03) 55%, transparent 100%),
      /* 4. Blue ambient glow */
      radial-gradient(ellipse 80% 52% at 42% 50%,
        rgba(30,100,255,0.05) 0%, transparent 72%),
      /* 5. Metallic base — cool chrome */
      linear-gradient(168deg,
        #cdd8ee 0%, #8292ae 34%, #3c4858 60%, #8292ae 80%, #cdd8ee 100%);
    background-size: 200% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  }

  /* Engraved initials on vault doors */
  .mvault-panel--left::before,
  .mvault-panel--right::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    font-size: clamp(96px, 32vw, 210px);
    line-height: 1;
    /* Blue-tinted semi-transparent so panel's blue ambient bleeds through letter forms */
    color: rgba(12, 30, 80, 0.40);
    text-shadow:
      /* Groove top edge — blue-white specular */
      0  3px  6px rgba(185, 225, 255, 0.85),
      0  1px  2px rgba(210, 238, 255, 0.55),
      /* Groove bottom — deep shadow */
      0 -2px  4px rgba(0,    8,  50, 0.95),
      /* Side edge highlights */
      2px  0  3px rgba(150, 205, 255, 0.28),
     -2px  0  2px rgba(0,    8,  45, 0.40),
      /* Subtle inner glow */
      0    0 14px rgba(70,  150, 255, 0.32),
      0    0 35px rgba(41,  121, 255, 0.18);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
  }

  .mvault-panel--left::before  { content: 'T'; }
  .mvault-panel--right::before { content: 'A'; }

  /* Sealed / sealing / opening states */
  .mvault-panel.mvault--sealing,
  .mvault-panel.mvault--sealed {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }

  .mvault-panel.mvault--sealing {
    background-position: 100% 0, 0 0, 0 0, 0 0, 0 0;
    transition:
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      background-position 0.5s ease;
  }

  /* Explicit transition on the sealed state so splitPanels() has a
     defined transition to fire from, independent of cascade fallback. */
  .mvault-panel.mvault--sealed {
    transition:
      transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      background-position 0.5s ease;
  }

  /* Vault slide animation is core UX — intentionally not suppressed by
     prefers-reduced-motion. The seal→hold→split is how the user knows
     their tap registered and that a new surface is opening. */

}

/* ── Mobile case study overlay ────────────────────────────── */
.mobile-cs-overlay {
  display: none; /* shown only inside the mobile media query below */
}

@media (max-width: 768px) {

  .mobile-cs-overlay {
    display: block; /* override the top-level display:none that hides this on desktop */
    position: fixed;
    inset: 0;
    min-height: 100dvh;
    z-index: var(--mvault-z-overlay);
    background: #0d0d0d;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden; /* removes from hit-testing so the sticky X button
                            doesn't obscure the hamburger and swallow taps */
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }

  @supports not (height: 100dvh) {
    .mobile-cs-overlay { min-height: 100vh; }
  }

  .mobile-cs-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
  }

  /* Sticky bar with close button */
  .mobile-cs-overlay__bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    padding: calc(env(safe-area-inset-top, 0px) + 0.75rem) 1rem 0.75rem;
    background: linear-gradient(to bottom, #0d0d0d 85%, transparent);
  }

  .mobile-cs-overlay__close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.07);
    color: #f5f5f0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-cs-overlay__close:focus-visible {
    outline: 2px solid #FF6B35;
    outline-offset: 2px;
  }

  /* Content area — mirrors the desktop player's detail panel */
  .mobile-cs-overlay__content {
    padding: 0 1.25rem
      calc(env(safe-area-inset-bottom, 0px) + 3rem)
      1.25rem;
    color: var(--color-offwhite, #f5f5f0);
  }

  /* Reuse existing case study content styles from face-morph.css */
  .mobile-cs-overlay__content .morph__cs-detail-content {
    display: block !important; /* override the hidden state */
    padding: 0;
    color: var(--color-offwhite, #f5f5f0);
  }

  .mobile-cs-overlay__content h1 {
    font-size: clamp(1.5rem, 5.5vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: 1rem;
    color: #f5f5f0;
  }

  .mobile-cs-overlay__content .morph__cs-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }

  .mobile-cs-overlay__content .morph__cs-detail-tags span {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.65rem;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 100px;
    color: rgba(255,255,255,0.7);
  }

  .mobile-cs-overlay__content .morph__cs-detail-asset {
    margin-bottom: 1.25rem;
    border-radius: 8px;
    overflow: hidden;
  }

  .mobile-cs-overlay__content .morph__cs-detail-asset img,
  .mobile-cs-overlay__content .morph__cs-detail-asset video {
    width: 100%;
    height: auto;
    display: block;
  }

  .mobile-cs-overlay__content .morph__cs-detail-asset iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    display: block;
  }

  .mobile-cs-overlay__content .morph__cs-detail-pullquote {
    font-size: 1.1rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.65);
    border-left: 2px solid rgba(255,255,255,0.2);
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
  }

  .mobile-cs-overlay__content h2 {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 2rem 0 0.75rem;
    color: #f5f5f0;
  }

  .mobile-cs-overlay__content p {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.72);
    margin-bottom: 1rem;
  }

}

/* ── Vault open: lock main-page scroll + hide progress bar ──────── */
@media (max-width: 768px) {

  body.is-vault-open {
    overflow: hidden !important;
    background: #0d0d0d;
    /* touch-action: none removed — overflow:hidden alone locks main-page
       scroll, and touch-action was breaking gesture recovery on iOS
       when the vault flow stalled. */
  }

  body.is-vault-open .scroll-progress {
    display: none !important;
  }

}

/* ── "View all case studies" button — mobile overrides ─────────── */
@media (max-width: 768px) {

  .spotlight__view-all {
    display: flex;
    justify-content: center;
    padding: 2rem 1.25rem 0.5rem;
    margin-top: 0;
  }

  .spotlight__view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink, #1a1a1a);
    background: transparent;
    border: 1px solid rgba(26, 26, 26, 0.2);
    padding: 0.875rem 1.75rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .spotlight__view-all-btn:active {
    background: rgba(26, 26, 26, 0.06);
    border-color: rgba(26, 26, 26, 0.35);
  }

}

/* ── Case study list overlay ────────────────────────────────── */
.mobile-cs-list {
  display: none; /* shown only inside the mobile media query below */
}

@media (max-width: 768px) {

  .mobile-cs-list {
    display: block;
    position: fixed;
    inset: 0;
    min-height: 100dvh;
    z-index: var(--mvault-z-overlay);
    background: #0d0d0d;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden; /* removes from hit-testing so the sticky X button
                           doesn't obscure the hamburger and swallow taps */
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }

  @supports not (height: 100dvh) {
    .mobile-cs-list { min-height: 100vh; }
  }

  .mobile-cs-list.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
  }

  /* Bar — matches case study overlay bar */
  .mobile-cs-list__bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1.25rem 1rem;
    background: linear-gradient(to bottom, #0d0d0d 85%, transparent);
  }

  .mobile-cs-list__heading {
    font-family: var(--font-dm-serif, 'DM Serif Display', Georgia, serif);
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #f5f5f0;
  }

  /* Items container — gaps between cards, padding for safe area */
  .mobile-cs-list__items {
    padding: 0 1rem calc(env(safe-area-inset-bottom, 0px) + 3rem);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }

  /* ── Individual card: dark-mode mirror of spotlight horizontal layout ── */
  .cs-list-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    min-height: 108px;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
  }

  .cs-list-card:active {
    background: rgba(255, 255, 255, 0.09);
  }

  /* Left: thumbnail strip — 36% width, fills full card height */
  .cs-list-card__thumb {
    flex: 0 0 36%;
    position: relative;
    overflow: hidden;
    background: #111;
  }

  .cs-list-card__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.82) saturate(0.9);
    transition: filter 0.2s ease;
  }

  .cs-list-card:active .cs-list-card__thumb img {
    filter: brightness(0.95) saturate(1);
  }

  /* Right: content column — title → pills → footer */
  .cs-list-card__content {
    flex: 1;
    min-width: 0;
    padding: 0.65rem 0.8rem 0.6rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
  }

  .cs-list-card__title {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: clamp(0.78rem, 3.3vw, 0.88rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: #f5f5f0;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cs-list-card__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .cs-list-card__pill {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.57rem;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 100px;
    color: rgba(245, 245, 240, 0.55);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    white-space: nowrap;
  }

  /* Footer: byline + readtime — pinned to bottom */
  .cs-list-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .cs-list-card__byline {
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }

  /* Logo circle — dark bg by default, specific logos override */
  .cs-list-card__logo {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-rajdhani, sans-serif);
    font-weight: 700;
    font-size: 0.7rem;
    color: #fff;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
  }

  /* White-bg logos (MS, VoltSafe, Samsung) */
  .cs-list-card__logo--vs,
  .cs-list-card__logo--ms,
  .cs-list-card__logo--sg {
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 4px;
  }

  /* PropKeep — teal gradient */
  .cs-list-card__logo--pk {
    background: linear-gradient(135deg, #1a4a3a 0%, #0e6b4a 100%);
  }

  .cs-list-card__logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
  }

  .cs-list-card__logo--ms .cs-list-card__logo-img,
  .cs-list-card__logo--vs .cs-list-card__logo-img {
    transform: scale(1.2);
  }

  .cs-list-card__logo--sg .cs-list-card__logo-img {
    transform: scale(1.3);
  }

  .cs-list-card__byline-text {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
  }

  .cs-list-card__company {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.64rem;
    font-weight: 600;
    color: rgba(245, 245, 240, 0.85);
    line-height: 1;
  }

  .cs-list-card__date {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.58rem;
    font-weight: 400;
    color: rgba(245, 245, 240, 0.38);
    line-height: 1;
  }

  .cs-list-card__readtime {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.58rem;
    font-weight: 400;
    color: rgba(245, 245, 240, 0.4);
    white-space: nowrap;
  }

  /* Back button in the case study overlay bar */
  .mobile-cs-overlay__bar {
    justify-content: space-between;
  }

  .mobile-cs-overlay__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: rgba(245, 245, 240, 0.65);
    font-family: var(--font-mono, monospace);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0.5rem 0;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-cs-overlay__back:active {
    color: #f5f5f0;
  }

  .mobile-cs-overlay__back[hidden] {
    display: none !important;
  }

}

/* ── Aria live region — always visually hidden ─────────────── */
.mobile-vault-live {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ── Portrait morph — mobile scroll crossfade ─────────────── */
@media (max-width: 768px) {

  #morph-canvas {
    display: none;
  }

  /* Hero section background: white where the portrait sits, transitioning
     to cobalt at the very bottom so it matches #hscroll-intro below —
     no visible seam where the hero ends and the next section begins. */
  #zoom-out {
    background: linear-gradient(
      to bottom,
      #ffffff 0%,
      #ffffff 92%,
      #0A1A4A 100%
    ) !important;
  }

  #zoomout-portrait-static {
    opacity: 1 !important;
    transition: none !important; /* JS drives mask-image, not CSS transitions */
  }

  /* Metallic base layer: always visible underneath the flesh mask wipe */
  #morph-metallic {
    opacity: 1 !important;
    transition: none !important;
  }

  /* Portrait clip: anchored from a fixed top offset so the head never moves.
     Container fills from that offset to the hero bottom — overflow clips. */
  .zoomout__portrait-clip {
    position: absolute !important;
    top: 3rem !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    /* Fade lower portion — applied on top of both portrait images */
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 92%) !important;
    mask-image: linear-gradient(to bottom, black 50%, transparent 92%) !important;
  }

  /* Both portrait images: exactly aligned, fill container width */
  #zoomout-portrait-static,
  #morph-metallic {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: initial !important;
    transform: none !important;
  }

}

/* ── Journey gallery — full-width vertical stack on mobile ─── */
@media (max-width: 768px) {

  /* Show all items including the ones marked mobile-hide */
  .hscroll__mobile-hide {
    display: block !important;
  }

  /* Tighter gap between items */
  #hscroll-gallery .hscroll__track {
    gap: 0.75rem !important;
    padding: 1.5rem 1rem 3rem !important;
  }

  /* Item: explicit viewport-relative height so object-fit has a fixed box to fill.
     overflow: hidden + border-radius then cleanly rounds all four corners. */
  .hscroll__item {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    height: 58vw !important;   /* ~16:10 proportions at full width */
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  /* Square items */
  .hscroll__item.hscroll__type-square {
    height: 85vw !important;
  }

  /* Images/videos fill the fixed-height box absolutely — no overflow possible */
  .hscroll__item img,
  .hscroll__item video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-height: none !important;
  }

  /* Caption: overlaid at the bottom inside the image, not below it */
  .hscroll__caption {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.55)) !important;
    color: #fff !important;
    padding: 2rem 0.875rem 0.6rem !important;
    font-size: 0.58rem !important;
    text-align: left !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    z-index: 2 !important;
  }

}

/* ── Aura lines: mask face + body perimeter, feathered ──────── */
@media (max-width: 768px) {

  /* Radial ellipse centred on the portrait subject.
     Transparent core hides lines over the face/body;
     multi-stop feathering softens the edge gradually. */
  #morph-aura {
    -webkit-mask-image: radial-gradient(
      ellipse 46% 60% at 50% 36%,
      transparent 0%,
      transparent 50%,
      rgba(0, 0, 0, 0.12) 63%,
      rgba(0, 0, 0, 0.55) 78%,
      black 94%
    );
    mask-image: radial-gradient(
      ellipse 46% 60% at 50% 36%,
      transparent 0%,
      transparent 50%,
      rgba(0, 0, 0, 0.12) 63%,
      rgba(0, 0, 0, 0.55) 78%,
      black 94%
    );
  }

}

/* ── Spotlight: horizontal list cards (overrides work-spotlight.css) ─────── */
@media (max-width: 768px) {

  /* Single-column grid */
  #work-spotlight .spotlight__grid {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
    align-items: start;
  }

  /* ── Card: horizontal flex row ── */
  #work-spotlight .spotlight__card {
    flex-direction: row !important;
    min-height: 108px;
    /* card's overflow:hidden clips the thumb corners neatly */
  }

  /* ── Left: image strip — fills card height via flex stretch ── */
  #work-spotlight .spotlight__thumb {
    width: 36% !important;
    flex-shrink: 0 !important;
    aspect-ratio: auto !important;
    height: auto !important; /* stretches to card height */
  }

  #work-spotlight .spotlight__thumb-img {
    height: 100% !important;
    object-position: center center !important;
  }

  /* Pills hidden while in image thumb — moved to content by JS */
  #work-spotlight .spotlight__pills {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* Pills re-styled for white card background */
  #work-spotlight .spotlight__pill {
    font-size: 0.57rem !important;
    padding: 2px 7px !important;
    background: rgba(26, 26, 26, 0.055) !important;
    border: 1px solid rgba(26, 26, 26, 0.09) !important;
    color: rgba(26, 26, 26, 0.55) !important;
    border-radius: 100px !important;
  }

  /* ── Right: content column ── */
  #work-spotlight .spotlight__content {
    flex: 1 !important;
    min-width: 0;          /* prevent text overflow breaking layout */
    padding: 0.65rem 0.8rem 0.6rem 0.7rem !important;
    gap: 0.28rem !important;
    justify-content: flex-start !important;
  }

  /* Title: max 2 lines, slightly smaller on mobile */
  #work-spotlight .spotlight__title {
    font-size: clamp(0.78rem, 3.3vw, 0.88rem) !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
  }

  /* Description: hidden — no vertical space in compact layout */
  #work-spotlight .spotlight__desc {
    display: none !important;
  }

  /* Footer: pinned to bottom of right column */
  #work-spotlight .spotlight__footer {
    margin-top: auto !important;
    padding-top: 0.4rem !important;
  }

  /* Compact byline / logo */
  #work-spotlight .spotlight__logo {
    width: 22px !important;
    height: 22px !important;
  }

  #work-spotlight .spotlight__byline {
    gap: 0.45rem !important;
  }

  #work-spotlight .spotlight__company {
    font-size: 0.64rem !important;
  }

  #work-spotlight .spotlight__date {
    font-size: 0.58rem !important;
  }

  #work-spotlight .spotlight__readtime {
    font-size: 0.58rem !important;
    gap: 0.25rem !important;
  }

  /* Stat numbers: doubled font-size */
  #work-spotlight .spotlight__metric-num {
    font-size: clamp(2.6rem, 5.2vw, 6.8rem) !important;
  }

  /* Stat numbers: single horizontal row, no wrapping, no separators */
  #work-spotlight .spotlight__metrics {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0 !important;
    margin: 1.25rem 0 0 !important;
  }

  #work-spotlight .spotlight__metric {
    width: auto !important;
    flex: 1 !important;
    padding: 0 !important;
    border-left: none !important;
    border-top: none !important;
    border-right: none !important;
  }

  #work-spotlight .spotlight__metric:first-child { padding-left: 0 !important; }
  #work-spotlight .spotlight__metric:last-child  { padding-right: 0 !important; }

  /* Kill every separator the desktop adds via nth-child rules */
  #work-spotlight .spotlight__metric:nth-child(2),
  #work-spotlight .spotlight__metric:nth-child(3),
  #work-spotlight .spotlight__metric:nth-child(4) {
    border-left: none !important;
    border-top: none !important;
    padding-top: 0 !important;
  }

  /* ── Focus ring suppression ────────────────────────────────────
     iOS Safari treats programmatic .focus() as keyboard-equivalent for
     :focus-visible, painting the UA blue ring on elements that receive
     focus via JS. Suppress the visual ring for touch; keep :focus-visible
     for genuine keyboard navigation. */
  #work-spotlight .spotlight__card {
    -webkit-tap-highlight-color: transparent;
  }

  #work-spotlight .spotlight__card:focus,
  #work-spotlight .spotlight__card:focus-visible { outline: none; }

  .mobile-cs-overlay__content h1:focus,
  .mobile-cs-overlay__content h1:focus-visible { outline: none; }

  /* iOS synthesises a mousemove after every tap, which triggers the desktop
     custom cursor circle in face-morph.js and leaves it stranded on screen. */
  .morph__cursor { display: none !important; }

}

/* ── Gallery: hide removed items ───────────────────────────── */
@media (max-width: 768px) {

  /* Remove wedding proposal ("YES!") and closing scenery items */
  #hscroll-yes-item,
  #hscroll-last-item {
    display: none !important;
  }

}

/* ── Site-wide scroll progress indicator ───────────────────── */
@media (max-width: 768px) {

  .scroll-progress {
    position: fixed;
    right: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 52dvh;
    /* Pure white + difference blend: renders as near-black on light backgrounds,
       near-white on dark (cobalt) backgrounds — legible everywhere */
    background: rgba(255, 255, 255, 0.18);
    border-radius: 2px;
    z-index: 9050;
    pointer-events: none;
    overflow: hidden;
    mix-blend-mode: difference;
    transition: top 0.35s ease, transform 0.35s ease, height 0.35s ease;
  }

  @supports not (height: 100dvh) {
    .scroll-progress { height: 52vh; }
  }

  .scroll-progress__fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: #ffffff; /* white under difference blend = black on white bg */
    border-radius: 2px;
    will-change: height;
  }

  /* Vault overlay mode: anchor to top-right, track overlay scroll */
  .scroll-progress.is-overlay {
    top: 3rem;
    transform: none;
    height: 28dvh;
    z-index: 9200; /* above the case study overlay (9100) */
    background: rgba(255, 255, 255, 0.08);
  }

  @supports not (height: 100dvh) {
    .scroll-progress.is-overlay { height: 28vh; }
  }

  @media (prefers-reduced-motion: reduce) {
    .scroll-progress { transition: none; }
  }

}

/* ── Testimonials: white + cobalt mesh grid, feathered ──────── */
@media (max-width: 768px) {

  /* Pull out of desktop fixed-overlay position, flow in the document */
  #video-quotes {
    position: relative !important;
    z-index: 1 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background-color: var(--color-offwhite, #f5f5f0) !important;
    padding: 3.5rem 1.25rem 3rem !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 1.25rem !important;
  }

  /* Cobalt grid overlay — mesh texture, feathered at top and bottom */
  #video-quotes::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(10, 26, 74, 0.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(10, 26, 74, 0.055) 1px, transparent 1px);
    background-size: 38px 38px;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      black 14%,
      black 86%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      black 14%,
      black 86%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 0;
  }

  /* Cards: lighter treatment on white bg */
  #video-quotes .video-quotes__item {
    position: relative;
    z-index: 1;
    max-width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(10, 26, 74, 0.1) !important;
    box-shadow: 0 2px 12px rgba(10, 26, 74, 0.07) !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #video-quotes .video-quotes__cta-row,
  #video-quotes .video-quotes__footer {
    position: relative;
    z-index: 1;
  }

  /* Stars: gold on white */
  #video-quotes .vq-stars {
    color: #e8a000 !important;
  }

  /* Remove CTA row (View Case Studies / Return to Top) on mobile */
  #video-quotes .video-quotes__cta-row {
    display: none !important;
  }

  /* Mobile-injected section header — matches Selected Work / Journey heading style */
  .vq-mobile-header {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-bottom: 0.5rem;
  }

  /* Title: matches spotlight__heading (DM Serif, same mobile clamp, -0.02em tracking) */
  .vq-mobile-header__title {
    display: block;
    font-family: var(--font-dm-serif, 'DM Serif Display', Georgia, serif);
    font-size: clamp(1.8rem, 7vw, 2.8rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-ink, #1a1a1a);
    margin: 0 0 0.75rem;
  }

  /* Desc: matches spotlight__desc (Inter 300, same clamp, same ink colour) */
  .vq-mobile-header__desc {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: clamp(0.88rem, 1.05vw, 1.1rem);
    font-weight: 300;
    line-height: 1.7;
    color: rgba(26, 26, 26, 0.68);
    margin: 0;
  }

}

/* ── Globe cursor — larger on mobile ───────────────────────── */
@media (max-width: 768px) {

  #hscroll-3d-cursor .hscroll__cursor-3d-svg {
    width: 110px !important;
    height: 110px !important;
  }

}

/* ── Hero scroll hint — swipe indicator at bottom of hero ──── */
@media (max-width: 768px) {

  /* Scroll hint — anchored to bottom-centre of the hero, outside the text block.
     z-index must exceed .morph__hero-intro's z-index: 150 (face-morph.css) so the
     hint renders above the hero text block and its cobalt gradient ::before. */
  .mobile-scroll-hint {
    position: absolute !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1.75rem) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transition: opacity 0.5s ease !important;
    z-index: 200 !important;
    white-space: nowrap !important;
  }

  .mobile-scroll-hint.is-hidden {
    opacity: 0 !important;
  }

  .mobile-scroll-hint__label {
    font-family: var(--font-mono, monospace);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(245, 245, 240, 0.55);
  }

  .mobile-scroll-hint__icon {
    display: flex;
    align-items: center;
    color: rgba(245, 245, 240, 0.65);
    animation: scroll-hint-bounce 1.8s ease-in-out infinite;
  }

  @keyframes scroll-hint-bounce {
    0%, 100% { transform: translateY(0);    opacity: 0.65; }
    50%       { transform: translateY(5px); opacity: 1;    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-scroll-hint__icon { animation: none; }
  }

}

/* ── Nav overlay: hide stub Case Studies, show vault All Case Studies ── */
.nav-overlay__link--vault {
  display: none; /* shown only inside the mobile media query below */
}

@media (max-width: 768px) {

  /* Original stub link — no target page yet */
  .nav-overlay__link[data-nav="case-studies"] {
    display: none !important;
  }

  /* Vault entry — styled the same as other nav links */
  .nav-overlay__link--vault {
    display: block !important;
  }

}

/* ── Footer: cobalt background on mobile ───────────────────── */
@media (max-width: 768px) {

  #site-footer {
    background: var(--color-cobalt, #0A1A4A) !important;
  }

  /* Ensure text/links stay legible over cobalt */
  .site-footer__name,
  .site-footer__title,
  .site-footer__link,
  .site-footer__bottom,
  .site-footer__copy {
    color: rgba(245, 245, 240, 0.75) !important;
  }

  .site-footer__rule {
    background: rgba(245, 245, 240, 0.25) !important;
  }

}

/* ── TA logo: show text initials in Share Tech Mono ─────────── */
@media (max-width: 768px) {

  /* Hide the SVG-based web component — font-family can't change SVG paths */
  #ta-sig {
    display: none !important;
  }

  /* Show the text initials in DM Serif Display — matches the "Product
     Designer" headline font, not the Share Tech Mono eyebrow. */
  .site-logo__initials {
    display: inline-block !important;
    font-family: 'DM Serif Display', 'Cormorant Garamond', serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
    /* Color set by face-morph.css: #1a1a1a default, #ffffff when site-logo--light */
  }

}

/* ── Mobile crafted-end section — hidden on desktop ─────────── */
.mobile-crafted-end {
  display: none; /* shown only inside the mobile media query below */
}

@media (max-width: 768px) {

  .mobile-crafted-end {
    display: block;
    position: relative;
    /* overflow hidden only on the marquee containers, not the section —
       prevents the bottom marquee text from being clipped at the section edge */
    overflow-x: clip; /* horizontal bleed blocked; vertical bleed allowed */
    background: var(--color-cobalt, #0A1A4A);
    padding: 4.5rem 0 6rem;
  }

  /* Portrait: centered floating card — in-flow so section wraps its height */
  .mobile-crafted-end__portrait-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
  }

  /* Inner card — sig positions relative to portrait, no clip so sig can bleed */
  .mobile-crafted-end__portrait-inner {
    position: relative;
    width: 68vw;
    flex-shrink: 0;
  }

  .mobile-crafted-end__portrait-img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(1) contrast(1.08);
  }

  /* Signature SVG — tangerine, small, centered on the portrait canvas */
  .mobile-crafted-end__sig {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: auto;
    pointer-events: none;
    z-index: 1;
  }

  .mobile-crafted-end__sig .mce-pen {
    stroke: var(--color-tangerine, #FF6B35);
  }

  /* Signature draw-on: start fully hidden, draw fast when scrolled into view */
  .mobile-crafted-end__sig use.mce-pen {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 0.6s ease;
  }

  /* T stroke draws first */
  .mobile-crafted-end__sig.is-drawing use:nth-child(n+3):nth-child(-n+7) {
    stroke-dashoffset: 0;
    transition-delay: 0s;
  }
  /* A stroke draws second */
  .mobile-crafted-end__sig.is-drawing use:nth-child(n+8):nth-child(-n+12) {
    stroke-dashoffset: 0;
    transition-delay: 0.2s;
  }
  /* Cross-stroke draws last */
  .mobile-crafted-end__sig.is-drawing use:nth-child(n+13):nth-child(-n+17) {
    stroke-dashoffset: 0;
    transition-delay: 0.38s;
  }

  /* Marquee bands — absolute, cross the portrait */
  .mobile-crafted-end__marquee {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
  }

  /* Top marquee: slightly behind portrait, overlaps upper area */
  .mobile-crafted-end__marquee--top {
    top: 36%;
    z-index: 2;
  }

  /* Bottom marquee: in front of portrait + signature, slightly overlaps bottom of image */
  .mobile-crafted-end__marquee--bottom {
    top: 64%;
    z-index: 4;
  }

  .mobile-crafted-end__track {
    display: flex;
    white-space: nowrap;
    width: max-content;
    animation: mce-scroll-left 25s linear infinite;
  }

  .mobile-crafted-end__track--reverse {
    animation: mce-scroll-right 25s linear infinite;
  }

  .mobile-crafted-end__track span {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: clamp(4rem, 13vw, 7rem); /* top marquee: 20% larger than previous */
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-cobalt, #0A1A4A);
    -webkit-text-stroke: 2px rgba(107, 133, 168, 0.75);
    paint-order: stroke fill;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    padding-right: 0.5em;
  }

  /* Bottom marquee ~2× size, slight overlap with portrait bottom */
  .mobile-crafted-end__marquee--bottom .mobile-crafted-end__track span {
    font-size: clamp(5.5rem, 18vw, 10rem);
    -webkit-text-stroke: 2.5px rgba(140, 163, 200, 0.85);
  }

  @keyframes mce-scroll-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  @keyframes mce-scroll-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
  }

  /* Marquees and signature are core brand content, not decorative motion —
     keep running even when the user has prefers-reduced-motion: reduce. */

}