/* Lyra v1.16.1 — mobile/Safari containment hotfix.
   This layer corrects viewport occlusion without changing the visual system. */

:root {
  --lyra-mobile-header-reserve: 104px;
  --lyra-mobile-browser-reserve: 76px;
}

@media (max-width: 700px) {
  html {
    scroll-padding-top: calc(var(--lyra-mobile-header-reserve) + 14px);
    scroll-padding-bottom: calc(var(--lyra-mobile-browser-reserve) + 34px);
  }

  body.v2-home,
  body.v2-home main {
    min-height: 100dvh;
  }

  /* Prevent fixed navigation from visually merging with scrolling headings. */
  .v2-topbar {
    isolation: isolate;
  }

  .v2-topbar::before {
    content: "";
    position: fixed;
    z-index: 0;
    inset: 0 0 auto;
    height: calc(var(--lyra-mobile-header-reserve) + 28px);
    pointer-events: none;
    background: linear-gradient(
      180deg,
      #030207 0%,
      rgba(3, 2, 7, .995) 54%,
      rgba(3, 2, 7, .94) 72%,
      rgba(3, 2, 7, 0) 100%
    );
  }

  .v2-topbar-shell,
  .v2-topbar.is-scrolled .v2-topbar-shell {
    position: relative;
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 42%),
      rgba(6, 5, 11, .985);
    border-color: rgba(255,255,255,.13);
    box-shadow:
      0 18px 54px rgba(0,0,0,.56),
      inset 0 1px 0 rgba(255,255,255,.065);
  }

  /* All navigable sections stop below the fixed header. */
  body.v2-home [id],
  .portfolio-hero,
  .portfolio-section,
  .portfolio-contact,
  .portfolio-project-window,
  .portfolio-related-link,
  .portfolio-service-row {
    scroll-margin-top: calc(var(--lyra-mobile-header-reserve) + 14px);
  }

  .portfolio-page .portfolio-cinematic {
    min-height: 100dvh;
  }

  .portfolio-hero {
    padding-top: calc(var(--lyra-mobile-header-reserve) + 32px);
    padding-bottom: 70px;
  }

  .portfolio-hero-inner {
    width: min(100% - 28px, 1180px);
  }

  /* Preserve the editorial scale, but avoid four- and five-line collisions. */
  .portfolio-hero h1 {
    font-size: clamp(2.55rem, 11.2vw, 3.65rem);
    line-height: .97;
    letter-spacing: -.056em;
  }

  .project-hero h1 {
    font-size: clamp(3.35rem, 15.2vw, 5.45rem);
  }

  .product-page .project-hero h1 {
    font-size: clamp(2.65rem, 11.2vw, 4rem);
  }

  .portfolio-heading h2,
  .portfolio-fit-copy h2,
  .portfolio-story aside h2,
  .portfolio-contact-shell h2,
  .portfolio-product-feature h2,
  .portfolio-founder-grid h2,
  .portfolio-product-intro h2,
  .portfolio-capability-stage h2 {
    font-size: clamp(2.2rem, 9.7vw, 3.35rem);
    line-height: 1;
  }

  .portfolio-row-copy h3 {
    font-size: clamp(1.95rem, 9.4vw, 3.1rem);
  }

  .portfolio-section {
    padding-block: 70px;
  }

  .portfolio-heading {
    margin-bottom: 42px;
  }

  .portfolio-project-window {
    margin-top: 46px;
  }

  .portfolio-contact {
    padding-bottom: calc(var(--lyra-mobile-browser-reserve) + 90px + env(safe-area-inset-bottom, 0px));
  }

  .portfolio-contact-shell {
    padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  }

  .portfolio-contact-meta {
    padding-bottom: 12px;
    color: rgba(232, 225, 243, .68);
    font-size: .76rem;
    line-height: 1.55;
  }

  .portfolio-footer,
  .v2-footer {
    padding-bottom: calc(var(--lyra-mobile-browser-reserve) + 20px + env(safe-area-inset-bottom, 0px));
  }

  /* Floating contact remains available without covering the document. */
  body.v2-home .wa-fab {
    right: 12px;
    bottom: calc(var(--lyra-mobile-browser-reserve) + env(safe-area-inset-bottom, 0px));
    width: 46px;
    height: 46px;
    padding: 0;
    opacity: .94;
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow:
      0 12px 30px rgba(6,112,41,.30),
      0 0 0 1px rgba(255,255,255,.16) inset;
    transition:
      opacity 180ms ease,
      transform 220ms cubic-bezier(.2,.8,.2,1),
      visibility 180ms ease;
  }

  body.v2-home .wa-fab .wa-icon {
    width: 1.55rem;
    height: 1.55rem;
    font-size: .78rem;
  }


  /* Portfolio pages dock WhatsApp inside the existing topbar on mobile. */
  .portfolio-page .v2-topbar-actions .wa-fab.lyra-fab-docked {
    position: static;
    inset: auto;
    z-index: auto;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    border: 1px solid rgba(86, 255, 153, .24);
    box-shadow:
      0 10px 24px rgba(6,112,41,.24),
      inset 0 1px 0 rgba(255,255,255,.18);
  }

  .portfolio-page .v2-topbar-actions .wa-fab.lyra-fab-docked .wa-icon {
    width: 1.5rem;
    height: 1.5rem;
    font-size: .72rem;
  }

  body.lyra-is-scrolling .wa-fab:not(.lyra-fab-docked),
  body.lyra-contact-visible .wa-fab:not(.lyra-fab-docked),
  body.lyra-keyboard-open .wa-fab:not(.lyra-fab-docked),
  body.is-menu-open .wa-fab:not(.lyra-fab-docked) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 12px, 0) scale(.9);
  }

  /* Allow the final content to clear both Safari chrome and the floating action. */
  .portfolio-story-copy article:last-child,
  .portfolio-strata article:last-child,
  .portfolio-related-list > :last-child,
  .portfolio-service-index > :last-child,
  .portfolio-capability-stage > ul,
  .portfolio-product-intro > ul {
    margin-bottom: 10px;
  }
}

@media (max-width: 390px) {
  :root {
    --lyra-mobile-header-reserve: 100px;
  }

  .portfolio-page {
    --portfolio-container: calc(100vw - 24px);
  }

  .portfolio-hero h1 {
    font-size: clamp(2.4rem, 10.8vw, 3.3rem);
  }

  .project-hero h1 {
    font-size: clamp(3.15rem, 14.4vw, 4.85rem);
  }

  .portfolio-heading h2,
  .portfolio-fit-copy h2,
  .portfolio-story aside h2,
  .portfolio-contact-shell h2,
  .portfolio-product-feature h2,
  .portfolio-founder-grid h2,
  .portfolio-product-intro h2,
  .portfolio-capability-stage h2 {
    font-size: clamp(2.05rem, 9.2vw, 3rem);
  }

  .portfolio-contact-shell {
    padding-inline: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.v2-home .wa-fab {
    transition: none;
  }
}