/* =========================================================
   VOYAGEFILMMAKER · responsive overrides
   Loaded LAST. Hardens layout for phones, tablets and odd
   aspect ratios on top of the desktop-first stylesheets.
   Breakpoints used (mobile-first additive):
     ≤ 1180  small laptop / large tablet
     ≤ 1024  tablet landscape
     ≤  900  tablet portrait
     ≤  720  large phone (most phones in portrait)
     ≤  560  small phone
     ≤  400  very small phone
   Plus landscape-orientation tweaks for short viewports.
   ========================================================= */

/* ---------- universal safeties ---------- */
html, body { max-width: 100%; }
body { overflow-x: hidden; }
img, video, iframe, svg { max-width: 100%; }
img, video { height: auto; }
.grain { z-index: 1; } /* keep grain behind WhatsApp & nav */

/* iframes that aren't already aspect-locked get a sensible fallback */
iframe:not([style*="position"]):not([class*="iframe"]) { width: 100%; }

/* ============================================================
   TOP NAV — compact below 1100px with a hamburger drawer
   The hamburger button + drawer markup is injected by app.js
   (mobile-nav.js) on every page. CSS below styles the result.
   ============================================================ */
/* Mobile nav DOM is injected on every page — hide entirely on desktop,
   the breakpoint block below opts it back in for ≤820px. */
.topnav__burger { display: none; }
.mobnav, .mobnav-scrim { display: none; }

/* Override the legacy styles.css rule that hid links below 1100px —
   we keep the inline nav visible on small laptops + tablets in landscape. */
@media (min-width: 821px) {
  .topnav__links { display: flex !important; }
  .topnav { grid-template-columns: 1fr auto 1fr !important; }
  .topnav__meta .btn { display: inline-flex !important; }
}

/* Tighten the inline nav as the bar narrows (laptop / tablet landscape) */
@media (min-width: 821px) and (max-width: 1180px) {
  .topnav { gap: 14px; padding: 9px 12px 9px 16px; }
  .topnav__links { gap: 14px; }
  .topnav__links a { font-size: 12px; }
  .topnav__brand { font-size: 13px; }
  .topnav__meta .btn { padding: 8px 12px; font-size: 11px; }
}

@media (max-width: 820px) {
  .topnav {
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 8px 10px 8px 14px;
    top: 10px; left: 10px; right: 10px;
  }
  .topnav__links { display: none; }
  /* hide the duplicate "Start a project" CTA — it lives inside the drawer now */
  .topnav__meta { display: none; }
  .topnav__brand { font-size: 13px; gap: 7px; min-width: 0; }
  .topnav__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topnav__burger {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--paper);
    flex: 0 0 auto;
    -webkit-tap-highlight-color: transparent;
    transition: background .25s var(--eo), border-color .25s var(--eo);
  }
  .topnav__burger:hover { background: rgba(244,239,229,.06); }
  .topnav__burger:active { transform: scale(.96); }
  .topnav__burger-bars {
    position: relative;
    width: 18px; height: 12px;
    display: block;
  }
  .topnav__burger-bars::before,
  .topnav__burger-bars::after,
  .topnav__burger-bars span {
    content: "";
    position: absolute; left: 0; right: 0;
    height: 1.6px;
    background: currentColor;
    border-radius: 1px;
    transition: transform .35s var(--eo), opacity .25s var(--eo), top .35s var(--eo);
  }
  .topnav__burger-bars::before { top: 0; }
  .topnav__burger-bars span    { top: 50%; transform: translateY(-50%); display: block; }
  .topnav__burger-bars::after  { bottom: 0; }

  body.is-mobnav-open .topnav__burger-bars::before { top: 50%; transform: translateY(-50%) rotate(45deg); }
  body.is-mobnav-open .topnav__burger-bars::after  { bottom: 50%; transform: translateY(50%) rotate(-45deg); }
  body.is-mobnav-open .topnav__burger-bars span    { opacity: 0; }

  /* drawer */
  .mobnav {
    display: block;
    position: fixed;
    inset: 64px 10px auto 10px;
    z-index: 99;
    background: rgba(14,14,13,.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--line-strong);
    border-radius: 22px;
    padding: 16px 18px 18px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform .35s var(--eo), opacity .25s var(--eo);
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
  }
  body.is-mobnav-open .mobnav {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .mobnav__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: 2px;
  }
  .mobnav__list a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 6px;
    font-family: var(--f-disp);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -.01em;
    color: var(--paper);
    border-bottom: 1px solid rgba(244,239,229,.08);
    transition: color .25s var(--eo), padding-left .25s var(--eo);
  }
  .mobnav__list a:hover, .mobnav__list a:focus { color: var(--orange); padding-left: 10px; }
  .mobnav__list a.is-active { color: var(--orange); }
  .mobnav__list a::after {
    content: "↗";
    font-family: var(--f-mono);
    font-size: 14px;
    opacity: .55;
  }
  .mobnav__meta {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(244,239,229,.14);
    display: flex; flex-direction: column;
    gap: 6px;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .12em;
    opacity: .7;
    text-transform: uppercase;
  }
  .mobnav__meta a { color: var(--orange); }

  /* scrim behind drawer */
  .mobnav-scrim {
    display: block;
    position: fixed; inset: 0; z-index: 95;
    background: rgba(0,0,0,.55);
    opacity: 0; pointer-events: none;
    transition: opacity .3s var(--eo);
  }
  body.is-mobnav-open .mobnav-scrim { opacity: 1; pointer-events: auto; }
  body.is-mobnav-open { overflow: hidden; }
}

@media (max-width: 560px) {
  .topnav__name { font-size: 12px; }
  .topnav { padding: 7px 8px 7px 12px; }
}

/* ============================================================
   HERO (homepage v3 + bg-video)
   ============================================================ */
@media (max-width: 1100px) {
  .hero--bgvid .hero__stage {
    padding: 96px clamp(14px, 4vw, 28px) clamp(28px, 5vh, 56px);
    min-height: clamp(440px, 70vh, 720px);
  }
  .hero3__title { gap: 4px; }
  .hero--bgvid .hero3__sub { gap: clamp(12px, 4vw, 40px); flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 720px) {
  .hero--bgvid { min-height: auto; }
  .hero--bgvid .hero__stage {
    padding: 96px 14px 28px;
    min-height: 78vh;
    min-height: 78dvh;
  }
  .hero3__title { font-size: clamp(28px, 10vw, 56px); }
  .hero3__line--brand { font-size: clamp(26px, 9vw, 52px); }
  .hero3__line--tag {
    font-size: clamp(34px, 12vw, 72px);
    line-height: .92;
  }
  .hero3__sub {
    font-size: 10px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .hero3__ctarow { margin-top: 20px; }
  .herocta { padding: 12px 18px 12px 14px; gap: 10px; }
  .herocta__label { font-size: 16px; }
  .herocta__arrow { font-size: 18px; }
  .hero__bgvideo-el { transform: scale(1.35); } /* tighter crop on portrait */

  .hero--bgvid .hero3__statrow {
    padding: 18px 14px 28px;
    gap: 10px;
  }
  .hero3__statrow { grid-template-columns: 1fr; }
  .hcard--min {
    padding: 22px 22px 20px;
    gap: 32px;
    min-height: 0;
  }
  .hcard__minnum { font-size: clamp(40px, 12vw, 56px); }
  .hcard__minnum--cta { font-size: clamp(28px, 8vw, 40px); }
  .hcard__minlbl { font-size: 10px; max-width: none; }
}

@media (max-width: 400px) {
  .hero--bgvid .hero__stage { padding: 88px 12px 24px; }
  .hero3__line--brand { font-size: 26px; letter-spacing: -.03em; }
  .hero3__line--tag { font-size: 36px; }
}

/* landscape phones — extra short viewport */
@media (max-height: 540px) and (orientation: landscape) {
  .hero--bgvid .hero__stage { min-height: 100vh; padding-top: 88px; padding-bottom: 24px; }
  .hero3__title { font-size: clamp(28px, 6vw, 64px); }
}

/* ============================================================
   TRUSTED BY strip
   ============================================================ */
@media (max-width: 720px) {
  .trustedby { margin: 0 10px; padding: 16px 0; }
  .trustedby__head { padding: 0 6px 12px; font-size: 9px; }
  .trustedby__head .mono:last-child { display: none; }
  .trustedby__track { gap: 28px; }
  .tb__logo { font-size: clamp(22px, 6.5vw, 32px); }
  .tb__sep { font-size: 11px; }
}

/* ============================================================
   SECTION HEADS & TITLES — tighter padding on phones
   ============================================================ */
@media (max-width: 900px) {
  .section__head { padding: 64px 4px 28px; }
  .section__title { font-size: clamp(36px, 8.5vw, 64px); }
  .section__sub { font-size: 14px; }
}
@media (max-width: 560px) {
  .section__head { padding: 48px 2px 22px; }
  .section__title { font-size: clamp(32px, 9vw, 52px); }
}

/* ============================================================
   WHAT WE SOLVE
   ============================================================ */
@media (max-width: 720px) {
  .solve--min { padding: 60px 14px 56px; }
  .solve__head { margin-bottom: 36px; }
  .solve__statement { font-size: clamp(32px, 9vw, 56px); }
  .solve__row--min {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 0;
  }
  .solve__row--min .solve__no { font-size: 22px; }
  .solve__pair { gap: 10px; }
  .solve__problem-text, .solve__answer-text { font-size: 17px; line-height: 1.3; }
}

/* ============================================================
   SERVICES / ARCHIVE — ticket cards
   ============================================================ */
@media (max-width: 1024px) {
  .services--min { padding: 48px 14px 48px; }
}
@media (max-width: 720px) {
  .ticket {
    padding: 16px 18px 14px;
    /* drop the ticket-notch mask on small screens (it cuts the corners awkwardly) */
    -webkit-mask: none;
    mask: none;
    border-radius: 18px;
  }
  .ticket__corner {
    font-size: 9px;
    letter-spacing: .14em;
    padding-bottom: 10px;
  }
  .ticket__body {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px 0 12px;
  }
  .ticket__thumb { aspect-ratio: 16 / 10; }
  .ticket__title { font-size: clamp(30px, 9vw, 48px); }
  .ticket__pill { font-size: 12px; }
  .ticket__cta {
    align-self: flex-start;
    padding: 10px 16px;
    font-size: 10px;
  }
  .ticket__foot { font-size: 9px; gap: 10px; }
}

/* ============================================================
   SELECTED PROJECTS — homepage grid
   ============================================================ */
@media (max-width: 720px) {
  .selproj__grid { gap: 14px; margin-top: 24px; }
  .selproj__thumb { aspect-ratio: 16 / 10; border-radius: 10px; }
  .selproj__cat { font-size: 8.5px; padding: 4px 8px; }
  .selproj__views { padding: 5px 8px 5px 10px; }
  .selproj__views-num { font-size: 18px; }
  .selproj__tile--wide .selproj__views-num { font-size: 20px; }
  .selproj__name { font-size: 13px; }
  .selproj__date { font-size: 9.5px; }
}

/* ============================================================
   HOW WE WORK
   ============================================================ */
@media (max-width: 720px) {
  .howework--min { padding: 56px 14px; }
  .prinx--min { padding: 22px 22px 24px; min-height: 0; }
  .prinx__h { font-size: 24px; }
  .prinx--min p { font-size: 14px; }
}

/* ============================================================
   REVIEWS
   ============================================================ */
@media (max-width: 720px) {
  .reviews--min { padding: 56px 14px; }
  .reviews__grid--min { gap: 12px; }
  .review--min { padding: 22px 22px 18px; min-height: 0; }
  .review--min .review__quote { font-size: 15px; margin-bottom: 16px; }
}

/* ============================================================
   FAQ
   ============================================================ */
@media (max-width: 720px) {
  .faq--min { padding: 56px 14px; }
  .faq__item details summary {
    font-size: 17px;
    padding: 18px 4px;
    grid-template-columns: 1fr 28px;
    gap: 10px;
  }
  .faq__icon { font-size: 22px; }
  .faq__a { font-size: 14px; padding: 0 4px 18px 4px; }
}

/* ============================================================
   CONTACT
   ============================================================ */
@media (max-width: 720px) {
  .contact--min { padding: 56px 14px 60px; }
  .contact__big { font-size: clamp(56px, 16vw, 96px); line-height: .88; margin: 8px 0 20px; }
  .contact__copy p { font-size: 14px; margin-bottom: 20px; }
  .contact__row .btn--big { padding: 14px 18px; font-size: 13px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
@media (max-width: 900px) {
  .foot__main { padding: 40px 16px 28px; gap: 24px; }
  .foot__bandtrack {
    font-size: clamp(48px, 14vw, 96px);
    gap: 18px;
  }
  .foot__row { padding: 14px 16px; gap: 12px; font-size: 10.5px; }
}
@media (max-width: 720px) {
  .foot--min .foot__main--min { grid-template-columns: 1fr; gap: 24px; }
  .foot__col { gap: 10px; }
  .sayhicard { padding: 16px 18px 14px; }
  .sayhicard__big { font-size: 20px; }
}

/* ============================================================
   WHATSAPP BUTTON — keep clear of content + safe area
   ============================================================ */
@media (max-width: 720px) {
  .wabtn {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 52px; height: 52px;
  }
  .wabtn__svg { width: 26px; height: 26px; }
}

/* ============================================================
   GENERIC PAGE PADDINGS (about / contact / boards / detail pages)
   Reduce horizontal section padding so content breathes.
   ============================================================ */
@media (max-width: 900px) {
  main > section { padding-left: clamp(12px, 3vw, 18px); padding-right: clamp(12px, 3vw, 18px); }
}

/* ============================================================
   FILTER BARS (work page, boards)
   ============================================================ */
@media (max-width: 720px) {
  .filterbar { overflow-x: auto; flex-wrap: nowrap; padding: 6px; }
  .filterbar::-webkit-scrollbar { display: none; }
  .filterbar { scrollbar-width: none; }
  .filter { white-space: nowrap; font-size: 12px; padding: 7px 12px; }
}

/* ============================================================
   PAGE-LOCAL HEROES (about / contact / detail / boards)
   Keep type from blowing past viewport.
   ============================================================ */
@media (max-width: 720px) {
  .phero, .phero__inner {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .phero__title, .pagehero__title, .ph__big, .hero__title,
  .manifesto__big, .bdpreview__title, .contact__big {
    font-size: clamp(40px, 12vw, 80px) !important;
    line-height: .9 !important;
    letter-spacing: -.03em !important;
  }
  .phero__sub, .pagehero__sub {
    font-size: 14px;
    max-width: none;
  }
}

/* about page founders/grid */
@media (max-width: 720px) {
  .founders__grid { gap: 14px; }
  .fcard { padding: 18px; }
  .aboutstats__inner { grid-template-columns: 1fr 1fr; gap: 12px; }
  .aboutstat__num { font-size: clamp(40px, 12vw, 64px); }
}
@media (max-width: 420px) {
  .aboutstats__inner { grid-template-columns: 1fr; }
}

/* contact form */
@media (max-width: 720px) {
  .contactgrid__inner { gap: 18px; }
  .cform { padding: 18px; }
  .cform__row { gap: 12px; }
  .cform__field input,
  .cform__field textarea,
  .cform__field select {
    font-size: 16px; /* prevents iOS auto-zoom on focus */
  }
}

/* boards page */
@media (max-width: 720px) {
  .bdpreview { padding: 60px 14px 56px !important; }
  .bdcats__grid { grid-template-columns: 1fr !important; gap: 12px; }
  .bdcat { padding: 16px !important; }
}

/* project detail pages — videos & galleries */
@media (max-width: 900px) {
  .pdetail__hero, .pdetail__video { aspect-ratio: 16 / 9; }
}
@media (max-width: 720px) {
  .pdetail, .detail { padding: 56px 12px !important; }
  .detail__hero, .pdetail__hero { border-radius: 12px; }
  .detail__title, .pdetail__title {
    font-size: clamp(34px, 11vw, 60px) !important;
    line-height: .92 !important;
  }
  .detail__grid, .pdetail__grid { grid-template-columns: 1fr !important; gap: 12px; }

  /* video frame on project detail pages — give it room to breathe */
  .proj__video {
    margin: 28px 8px 28px;
    max-width: none;
    border-radius: 14px;
    aspect-ratio: 16 / 9;
  }
  .proj__video-tag {
    bottom: 10px; left: 10px;
    padding: 6px 10px;
    font-size: 8.5px;
    letter-spacing: .14em;
    white-space: nowrap;
    max-width: calc(100% - 20px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .proj__source {
    margin: 0 8px clamp(28px, 6vw, 40px);
    padding: 10px 12px;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11px;
  }
  .proj__source-link { font-size: 10px; }
}

/* ============================================================
   TWEAKS PANEL — keep it on-screen on small viewports
   ============================================================ */
@media (max-width: 720px) {
  .tweaks-panel, [class*="tweaks"] [class*="panel"] {
    max-width: calc(100vw - 24px) !important;
    right: 12px !important;
    bottom: 80px !important;
  }
}

/* ============================================================
   ULTRA-WIDE / HIGH ASPECT screens — cap content width so type
   doesn't stretch into wall-art
   ============================================================ */
@media (min-width: 1800px) {
  .hero--bgvid .hero3__top { max-width: 1600px; }
  .trustedby, .solve__list, .selproj__grid,
  .reviews__grid--min, .howework__grid--min,
  .services--min .services__grid--ticket,
  .foot__main { max-width: 1480px; margin-left: auto; margin-right: auto; }
}

/* ============================================================
   FORCE iframes/videos to maintain aspect cleanly
   ============================================================ */
.hero3__videowrap { width: 100%; height: auto; }
.hero3__iframe, .hero3__videoframe iframe { width: 100% !important; height: 100% !important; }

/* prevent text-stroke titles from looking spidery on hidpi small */
@media (max-width: 560px) {
  .hero3__line--out { -webkit-text-stroke-width: 1px; }
  .solve__stmt-out  { -webkit-text-stroke-width: 1px; }
}