/* Lyra v1.16.3 — composition and hero-sequence stabilization.
   Shared corrective layer: preserves the cosmic/editorial identity while
   tightening spacing, protecting fixed navigation and sequencing the hero. */

:root {
  --lyra-desktop-header-shield: 112px;
}

/* Home hero: the positioning statement is the final beat of the intro. */
.v2-hero-positioning {
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 18px, 0);
  will-change: opacity, filter, transform;
}

body.page-ready .v2-hero-positioning {
  animation: lyra-positioning-enter .96s 2.62s cubic-bezier(.2, .82, .2, 1) forwards;
}

@keyframes lyra-positioning-enter {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: translate3d(0, 18px, 0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

/* Portfolio navigation should remain glass, but scrolling copy must not read
   through it as a second layer of content. */
@media (min-width: 701px) {
  .portfolio-page .v2-topbar {
    isolation: isolate;
  }

  .portfolio-page .v2-topbar::before {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0 0 auto;
    height: var(--lyra-desktop-header-shield);
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(3, 2, 7, .995) 0%,
      rgba(3, 2, 7, .96) 52%,
      rgba(3, 2, 7, .64) 78%,
      rgba(3, 2, 7, 0) 100%
    );
  }

  .portfolio-page .v2-topbar-shell {
    background:
      linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.014) 40%),
      rgba(8, 7, 14, .82);
  }

  .portfolio-page .v2-topbar.is-scrolled .v2-topbar-shell {
    background:
      linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.012) 44%),
      rgba(7, 6, 12, .965);
    box-shadow:
      0 20px 64px rgba(0,0,0,.52),
      inset 0 1px 0 rgba(255,255,255,.075);
  }

  .portfolio-page [id],
  .portfolio-page .portfolio-hero,
  .portfolio-page .portfolio-section {
    scroll-margin-top: calc(var(--lyra-desktop-header-shield) + 8px);
  }

  /* More compact cinematic scale; no change to the visual language. */
  .portfolio-hero {
    min-height: clamp(650px, 82svh, 820px);
    padding: clamp(126px, 10vw, 160px) 0 clamp(72px, 7vw, 104px);
  }

  .portfolio-hero h1 {
    font-size: clamp(3.15rem, 5.35vw, 6.05rem);
  }

  .project-hero h1 {
    font-size: clamp(4rem, 8vw, 8.45rem);
  }

  .product-page .project-hero h1 {
    font-size: clamp(3.15rem, 5.7vw, 6.25rem);
  }

  .portfolio-project-subtitle {
    max-width: 900px;
    margin-top: 18px;
    font-size: clamp(1.25rem, 1.9vw, 1.95rem);
  }

  .portfolio-lead {
    margin-top: 18px;
  }

  .portfolio-actions {
    margin-top: 27px;
    gap: 12px;
  }

  .portfolio-actions .v2-primary-action,
  .portfolio-actions .v2-secondary-action {
    min-height: 56px;
    padding-inline: 26px;
    font-size: .82rem;
  }

  .portfolio-hero .portfolio-actions .v2-primary-action,
  .portfolio-hero .portfolio-actions .v2-secondary-action {
    min-width: 205px;
  }

  .portfolio-service-orbit {
    margin-top: 44px;
  }

  .portfolio-section {
    padding-block: clamp(72px, 7vw, 112px);
  }

  /* Explicit editorial grid. Previously automatic placement separated the
     eyebrow, title and explanation across an entire viewport. */
  .portfolio-heading {
    grid-template-columns: minmax(0, 1.18fr) minmax(290px, .58fr);
    grid-template-areas:
      "eyebrow eyebrow"
      "title copy";
    gap: 18px clamp(38px, 6vw, 84px);
    align-items: end;
    margin-bottom: clamp(38px, 4.6vw, 64px);
  }

  .portfolio-heading > .v2-eyebrow {
    grid-area: eyebrow;
    margin-bottom: 2px;
  }

  .portfolio-heading > h2 {
    grid-area: title;
    max-width: 900px;
  }

  .portfolio-heading > p:not(.v2-eyebrow) {
    grid-area: copy;
    align-self: end;
    padding-bottom: .34em;
  }

  .portfolio-heading--center {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "title"
      "copy";
    gap: 16px;
  }

  .portfolio-heading--center > h2,
  .portfolio-heading--center > p:not(.v2-eyebrow) {
    max-width: 820px;
    margin-inline: auto;
    padding-bottom: 0;
  }

  .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.55rem, 4.25vw, 4.65rem);
    line-height: 1;
  }

  .portfolio-fit-layout,
  .portfolio-story-grid,
  .portfolio-founder-grid,
  .portfolio-product-intro,
  .portfolio-capability-stage {
    gap: clamp(40px, 6vw, 88px);
  }

  .portfolio-project-window {
    margin-top: clamp(42px, 5vw, 68px);
  }

  .portfolio-project-list {
    gap: 12px;
  }

  .portfolio-project-list.is-hub-list {
    gap: 16px;
  }

  .portfolio-project-row {
    min-height: 282px;
  }

  .portfolio-project-row.is-compact {
    min-height: 208px;
  }

  .portfolio-contact {
    padding-bottom: clamp(92px, 9vw, 140px);
  }

  .portfolio-contact-shell {
    padding: clamp(42px, 5.8vw, 78px);
  }

  /* Keep the direct-contact affordance visible without making it the strongest
     object on every screen. */
  html body.portfolio-page a.wa-fab {
    min-height: 46px !important;
    padding: 0 14px 0 8px !important;
    gap: 8px !important;
    opacity: .84 !important;
    transform: scale(.94);
    transform-origin: right bottom;
    box-shadow:
      0 12px 34px rgba(37,211,102,.24),
      inset 0 1px 0 rgba(255,255,255,.28) !important;
    transition: opacity 180ms ease, transform 220ms ease, box-shadow 220ms ease;
  }

  html body.portfolio-page a.wa-fab .wa-icon {
    width: 30px !important;
    height: 30px !important;
  }

  html body.portfolio-page a.wa-fab:hover,
  html body.portfolio-page a.wa-fab:focus-visible {
    opacity: 1 !important;
    transform: translateY(-2px) scale(.97);
  }
}

/* Tablet: keep the two-column intent only where it remains readable. */
@media (min-width: 701px) and (max-width: 980px) {
  :root {
    --lyra-desktop-header-shield: 102px;
  }

  .portfolio-heading {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "title"
      "copy";
    gap: 14px;
  }

  .portfolio-heading > p:not(.v2-eyebrow) {
    max-width: 720px;
    padding-bottom: 0;
  }

  .portfolio-hero {
    min-height: auto;
  }
}

/* Mobile consolidation on top of the Safari-specific containment layer. */
@media (max-width: 700px) {
  :root {
    --lyra-mobile-header-reserve: 110px;
  }

  .portfolio-page .v2-topbar-shell,
  .portfolio-page .v2-topbar.is-scrolled .v2-topbar-shell {
    background:
      linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 42%),
      rgba(6, 5, 11, .992);
  }

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

  .portfolio-hero h1 {
    font-size: clamp(2.42rem, 10.8vw, 3.45rem);
    line-height: .99;
  }

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

  .product-page .project-hero h1 {
    font-size: clamp(2.48rem, 10.6vw, 3.65rem);
  }

  .portfolio-project-subtitle {
    margin-top: 18px;
    font-size: clamp(1.12rem, 5.1vw, 1.42rem);
  }

  .portfolio-lead {
    margin-top: 18px;
    font-size: .96rem;
    line-height: 1.68;
  }

  .portfolio-actions {
    width: 100%;
    margin-top: 26px;
    gap: 10px;
  }

  .portfolio-actions .v2-primary-action,
  .portfolio-actions .v2-secondary-action {
    width: 100%;
    min-height: 52px;
    padding-inline: 20px;
  }

  .portfolio-service-orbit {
    margin-top: 34px;
  }

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

  .portfolio-heading {
    margin-bottom: 34px;
    gap: 13px;
  }

  .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(2rem, 9vw, 3rem);
    line-height: 1.02;
  }

  .portfolio-fit-layout,
  .portfolio-story-grid,
  .portfolio-founder-grid,
  .portfolio-product-intro,
  .portfolio-capability-stage {
    gap: 34px;
  }

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

  .portfolio-service-row {
    min-height: 142px;
    padding-block: 23px;
  }

  .portfolio-service-row h2 {
    font-size: clamp(1.62rem, 7.5vw, 2.32rem);
    line-height: 1.04;
  }

  .portfolio-related-link {
    min-height: 112px;
    padding: 19px 18px;
  }

  .portfolio-contact-shell {
    padding-top: 40px;
  }

  .portfolio-contact-shell > p:not(.v2-eyebrow) {
    margin-top: 18px;
    line-height: 1.65;
  }

  .portfolio-page .v2-topbar-actions .wa-fab.lyra-fab-docked {
    width: 40px;
    height: 40px;
  }
}

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

  .portfolio-hero h1 {
    font-size: clamp(2.32rem, 10.4vw, 3.15rem);
  }

  .project-hero h1 {
    font-size: clamp(3rem, 13.6vw, 4.55rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-hero-positioning,
  body.page-ready .v2-hero-positioning {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none !important;
    will-change: auto;
  }
}