/* m4 · responsive.css — phone and tablet tuning (Mark4 project heroes, scoped under .m4) */

/* ============================================================
   MOBILE TUNING (phones, < 768px)
   Shorter scroll tracks, copy kept clear of the tower, bigger
   wordmarks, and a tighter hand-off into each "Why" section.
   ============================================================ */
@media (max-width: 767px) {
  .m4 .m4-hero {
    height: calc(var(--vh) * 300);          /* 3 screens of scroll per project instead of 3.5 */
    --mark-w: calc(30 * var(--m4r));
    --house-top: 72;                        /* tower starts below the copy block, under the veil */
    --house-scale: 1.8;                     /* grows and lifts enough to fill the wordmark */
    --house-lift: 56;
  }

  .m4 .m4-hero--narrow {
    --mark-w: calc(28 * var(--m4r));
  }

  .m4 .m4-hero--tight {
    --house-top: 74;
  }

  .m4 .m4-hero__content {
    padding-bottom: calc(21 * var(--m4r));                  /* lifts the copy block above the tower crown */
  }

  .m4 .m4-hero__title h1,
.m4 .m4-hero__title h2 {
    font-size: clamp(34px, 9.6vw, 44px);
  }

  .m4 .m4-hero--tight .m4-hero__title h1,
.m4 .m4-hero--tight .m4-hero__title h2 {
    font-size: clamp(32px, 9vw, 42px);
  }

  .m4 .m4-hero__text {
    font-size: calc(1.5 * var(--m4r));
    line-height: 1.5;
    max-width: calc(32 * var(--m4r));
    margin-inline: auto;
  }

  .m4 .m4-hero__actions {
    margin-top: calc(2.4 * var(--m4r));
  }

  /* welcome screen on phones */
  .m4 .m4-welcome {
    min-height: 520px;
  }

  .m4 .m4-welcome__content {
    padding-top: calc(22 * var(--m4r));
    padding-bottom: calc(26 * var(--m4r));
  }

  .m4 .m4-welcome__eyebrow {
    font-size: calc(1.2 * var(--m4r));
    letter-spacing: 0.26em;
    white-space: nowrap;
    margin-bottom: calc(1.6 * var(--m4r));
  }

  .m4 .m4-welcome__content .m4-welcome__title {
    font-size: clamp(36px, 11vw, 52px) !important;
    letter-spacing: 0.03em !important;
  }

  .m4 .m4-welcome__lede {
    margin-top: calc(2.4 * var(--m4r));
    max-width: calc(34 * var(--m4r));
    font-size: calc(1.6 * var(--m4r));
    line-height: 1.55;
  }

  .m4 .m4-welcome__scroll {
    bottom: calc(6 * var(--m4r));
    gap: calc(0.6 * var(--m4r));
  }

  .m4 .m4-welcome__scroll-text {
    font-size: calc(1 * var(--m4r));
    letter-spacing: 0.2em;
  }

  .m4 .m4-welcome__cloud--l { top: 34%; width: calc(70 * var(--m4r)); height: calc(30 * var(--m4r)); left: calc(-30 * var(--m4r)); }
  .m4 .m4-welcome__cloud--r { top: 12%; width: calc(60 * var(--m4r)); height: calc(25 * var(--m4r)); right: calc(-26 * var(--m4r)); }
  .m4 .m4-welcome__cloud--t { display: none; }

  .m4 .m4-welcome__bank {
    bottom: calc(-10 * var(--m4r));
    height: calc(40 * var(--m4r));
  }

  /* the towers lift further on phones, so the static floor is taller to keep their base buried */
  .m4 .m4-hero__bank-layer--floor {
    height: 100%;
    transform: translateY(8%);
  }

  /* hand-off fog: shallower so the next section arrives within half a screen */
  .m4 .m4-hero__overlap .m4-hero__smoke {
    height: calc(26 * var(--m4r));
  }

  .m4 .m4-hero__overlay {
    height: calc(8 * var(--m4r));
  }

  .m4 .m4-why {
    padding: calc(5 * var(--m4r)) 0 calc(6 * var(--m4r));
  }

  .m4 .m4-why__label {
    margin-bottom: calc(1.2 * var(--m4r));
  }

  .m4 .m4-why__text {
    font-size: max(22px, calc(2.6 * var(--m4r)));
    line-height: 1.3;
    text-wrap: pretty;
  }

  .m4 .m4-why__details {
    gap: calc(2.2 * var(--m4r)) calc(1.8 * var(--m4r));
    margin-top: calc(2.8 * var(--m4r));
    padding-top: calc(2.6 * var(--m4r));
  }

  .m4 .m4-why__details dd {
    font-size: calc(1.5 * var(--m4r));
  }
}

/* Tablets / small laptops: the two-column "Why" grid needs ~1100px, so stack it below that */
@media (min-width: 768px) and (max-width: 1199px) {
  .m4 .m4-why__grid {
    grid-template-columns: 1fr;
    gap: calc(2 * var(--m4r));
  }

  .m4 .m4-why__actions { grid-column: auto; }

  .m4 .m4-why__details {
    grid-column: auto;
    grid-template-columns: 1fr 1fr;
  }

  .m4 .m4-why__text {
    max-width: calc(60 * var(--m4r));
  }

  /* the towers are narrower relative to the screen here, so tighten the wordmarks they fill */
  .m4 .m4-hero {
    --mark-w: calc(66 * var(--m4r));
  }

  .m4 .m4-hero--narrow {
    --mark-w: calc(54 * var(--m4r));
    --house-scale: 1.7;
  }
}

/* ============================================================
   PHONE POLISH — smaller floating buttons so they cover less copy,
   and hero titles that sit better on narrow screens
   ============================================================ */
@media (max-width: 767px) {
  html:root {
    --sb-fab-chat-size: 44px;
    --sb-fab-chat-gap: 10px;
    --sb-fab-side: max(12px, env(safe-area-inset-right));
    --sb-fab-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .float-stack { gap: 10px !important; }
  .float-btn { width: 44px !important; height: 44px !important; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28) !important; }
  .float-btn svg { width: 19px !important; height: 19px !important; }

  .m4 .m4-hero__content .m4-hero__title h1,
  .m4 .m4-hero__content .m4-hero__title h2 {
    font-size: clamp(28px, 8.2vw, 44px) !important;
    line-height: 1.14 !important;
    text-wrap: balance;
  }
}

@media (max-width: 767px) {
  /* hero buttons stay on one line ("Discover Forever Workspace") */
  .m4 .m4-hero__actions .m4-btn {
    white-space: nowrap;
    max-width: 100%;
    font-size: calc(1.42 * var(--m4r));
    padding: calc(1.2 * var(--m4r)) calc(2 * var(--m4r));
  }
  .m4 .m4-hero__actions .m4-btn .m4-btn__icon { flex: 0 0 auto; }
}

/* ============================================================
   PHONE · PROJECT HEROES (Page 22, Ekaiva, Shivera …)
   ============================================================ */
@media (max-width: 767px) {
  /* The cut-outs are shorter than their boxes, so once the cloud bank sank the
     bottom of each photo showed as a hard horizontal line across the screen.
     Size the image to its own content and let its base dissolve into the fog. */
  .m4 .m4-hero__house img {
    height: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 68%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, #000 68%, rgba(0, 0, 0, 0) 100%);
  }

}

/* ============================================================
   GESTURE-NAVIGATION PHONES — true full screen
   With viewport-fit=cover the page runs edge to edge, under the
   gesture bar, and the browser chrome collapses as you scroll.
   --vh is a snapshot of the height at load (the short viewport),
   so once the URL bar hid, every sticky stage was ~56px shorter
   than the screen and a cream strip showed under each project.
   The sticky stage and the welcome screen now follow the dynamic
   viewport; the scroll tracks keep --vh so progress never jumps
   while the bar toggles.
   ============================================================ */
@supports (height: 100dvh) {
  @media (max-width: 1023px) {
    .m4 .m4-hero__top { height: 100dvh; }
    html .m4 .m4-welcome { height: 100dvh; }   /* beats the --vh rule in sb-hero-video.css */
  }
}
@media (max-width: 767px) {
  /* copy and buttons stay clear of the gesture bar / home indicator */
  .m4 .m4-hero__content {
    padding-bottom: calc(21 * var(--m4r) + env(safe-area-inset-bottom, 0px));
  }
  .m4 .m4-welcome__content {
    padding-bottom: max(44px, calc(env(safe-area-inset-bottom, 0px) + 28px));
  }
  .m4 .m4-container {
    padding-left: max(calc(2.5 * var(--m4r)), env(safe-area-inset-left, 0px));
    padding-right: max(calc(2.5 * var(--m4r)), env(safe-area-inset-right, 0px));
  }
}