/* =====================================================================
   mobile.css — phone-only refinements.

   EVERY rule in this file lives inside a max-width media query, so the
   desktop and tablet layouts are byte-for-byte unchanged. Load this file
   LAST, after chrome.css / projects.css, so it wins on specificity ties.
   ===================================================================== */

@media (max-width: 760px) {

  /* ---------------------------------------------------------------
     NAV — brand on the left, one hamburger on the right.
     The links and the Let's Chat button move into a full-screen sheet.
     --------------------------------------------------------------- */
  .sitenav {
    justify-content: space-between;
    gap: 12px;
    height: 56px;
    padding: 0 16px;
  }
  .sitenav .nav-links { display: none !important; }
  .nav-brand { font-size: 21px; }

  .mnav-toggle {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mnav-toggle span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: #fff;
    border-radius: 2px;
    transition: transform 260ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease;
  }
  .mnav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .mnav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

  .mnav-panel {
    position: fixed;
    inset: 0;
    z-index: 119;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 88px 24px 40px;
    background: rgba(12,22,38,0.92);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 280ms ease;
  }
  .mnav-panel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .mnav-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    max-width: 340px;
  }
  /* links cloned out of .nav-links keep their class, so restyle them big */
  .mnav-inner a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .mnav-inner a::after { display: none !important; }
  .mnav-inner a.nav-cta {
    margin-top: 22px;
    border: 1px solid rgba(255,255,255,0.24);
    border-bottom: 1px solid rgba(255,255,255,0.24);
    border-radius: 999px;
    background: #101820;
    color: #fff;
    min-height: 54px;
    padding: 0 24px;
  }
  body.mnav-open { overflow: hidden; }

  /* ---------------------------------------------------------------
     HERO — real side padding, and short enough that the next section
     shows above the fold. svh avoids the Safari address-bar jump.
     --------------------------------------------------------------- */
  .hero {
    height: 86vh;
    height: 86svh;
    min-height: 520px;
  }
  .nameWrap {
    padding: 0 20px;
    gap: 14px;
  }
  .name {
    font-size: clamp(38px, 12vw, 62px);
    line-height: 1.02;
  }
  .subhero {
    font-size: 9.5px;
    letter-spacing: 0.2em;
    line-height: 1.7;
    max-width: 100%;
  }
  .subhero-focus {
    font-size: 17px;
    line-height: 1.45;
    margin-top: 10px;
  }
  .hero-cta {
    min-height: 50px;
    padding: 0 28px;
  }
  .corner { display: none; }

  /* fewer, larger tiles (count is set in mobile.js) */
  .tile .back { padding: 6px; }

  /* ---------------------------------------------------------------
     SECTION RHYTHM — consistent 20px gutter, tighter vertical air
     --------------------------------------------------------------- */
  .container { padding: 0 20px; }
  .projects { padding: 64px 0 56px; }
  .about { padding: 64px 0 72px; }
  .about .section-head { margin: 0 auto 40px; }
  .photo-grid { padding: 24px 0 32px; gap: 22px 14px; }
  /* keep the tilt, drop the sideways offsets so nothing hangs off the edge */
  .photo { --tx: 0px !important; --ty: 0px !important; }
  .testimonials { padding: 60px 0 68px; }
  .logos { padding: 26px 0; }
  .section-head { margin: 0 auto 36px; gap: 16px; }
  .section-title { font-size: clamp(32px, 9vw, 44px); }
  .section-lede { font-size: 14.5px; }
  .t-scroll { padding-left: 20px; padding-right: 20px; gap: 18px; }
  .t-card { flex-basis: 84vw; padding: 24px 20px; }
  .work-title { font-size: clamp(21px, 6vw, 28px); }
  .projects-cta { margin-top: 44px; }

  /* ---------------------------------------------------------------
     ARTBOARD — a calm two-column grid instead of the scattered pile.
     board.js adds .board--mobile-grid on phones; these overrides beat
     the inline positions it writes for the desktop scatter.
     --------------------------------------------------------------- */
  .board--mobile-grid {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-content: start;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  .board--mobile-grid .bx {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
    z-index: auto !important;
    cursor: pointer;
    touch-action: auto !important;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.32));
  }
  .board--mobile-grid .bx-zoom { display: none; }
  .board--mobile-grid .bx-cap {
    font-size: 11.5px;
    padding-top: 5px;
  }

  .deck-drawer {
    height: 100vh;
    height: 100dvh;
    --peek: 118px;
  }
  .deck-drawer.open { padding-top: 8px; }
  /* Scroll the BOARD, not .deck-body — the drawer is transformed, so position:
     fixed resolves against it, and absolutely-placed buttons inside a scrolling
     .deck-body would slide away with the cards. */
  .deck-body {
    overflow: hidden;
    padding: 12px;
  }
  .board--drawer { height: auto !important; }
  .deck-drawer.open .board--mobile-grid {
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 78px !important;
  }
  .deck-grip { height: 52px; }
  .deck-grip .grip-label { font-size: 9px; letter-spacing: 0.2em; }
  /* .deck-body no longer scrolls, so these stay put on their own */
  .deck-close {
    top: 10px;
    right: 10px;
    min-width: 44px;
    min-height: 44px;
  }
  .deck-fullpage {
    top: auto;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    left: 14px;
    min-height: 44px;
  }

  /* lightbox: stack the image above its caption on a narrow screen */
  .lb-stage { flex-direction: column; gap: 18px; }
  .lb-media, .lb-img { max-width: 88vw; max-height: 56vh; }
  .lb-info { max-width: 88vw; }
  .lb-close { min-width: 44px; min-height: 44px; }

  /* ---------------------------------------------------------------
     CONTACT + FOOTER
     --------------------------------------------------------------- */
  .contact { min-height: 640px; }
  .chat-overlay { top: 76px; padding: 0 20px; }
  .chat { padding: 28px 22px 32px; }
  .chat-cta { min-height: 50px; }
  .site-footer-dark { padding: 34px 20px 28px; }

  /* case-study + blog pages */
  .case-wrap, .blog-wrap { padding-left: 20px; padding-right: 20px; }
  .case-text-block { padding: 24px 20px; }
}

/* Very small Androids (360px) — keep the headline on one line. */
@media (max-width: 380px) {
  .name { font-size: clamp(34px, 11.5vw, 46px); }
  .nameWrap { padding: 0 16px; }
  .container { padding: 0 16px; }
  .board--mobile-grid { gap: 11px; }
}

/* Landscape phones: the hero must not be taller than the screen. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .hero { height: auto; min-height: 460px; }
  .mnav-panel { padding: 68px 24px 24px; align-items: flex-start; overflow-y: auto; }
  .mnav-inner a { min-height: 44px; font-size: 13px; }
  .board--mobile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}