/* Lyra v1.16.5 — internal pages use the real index hero language.
   This layer intentionally reuses the home constellation, brand core and
   scroll behavior instead of inventing a second visual system. */

.v2-internal-hero {
  min-height: 112svh;
}

.v2-internal-hero .v2-hero-core {
  width: min(1120px, calc(100vw - 40px));
}

.v2-internal-hero .v2-internal-hero-title {
  max-width: 1080px;
  font-size: clamp(3.5rem, 8.6vw, 8rem);
  line-height: .92;
  text-align: center;
}

.v2-internal-hero .v2-internal-hero-title span {
  padding-inline: .04em;
  padding-bottom: .11em;
}

body.page-ready .v2-internal-hero .v2-internal-hero-title span:first-child:last-child {
  animation: v2-title-enter 1.24s 1.12s cubic-bezier(.2,.82,.2,1) forwards;
}

.v2-internal-hero .v2-internal-hero-positioning {
  max-width: 760px;
  margin-top: clamp(24px, 3vw, 34px);
}

/* The first content beat starts only after the brand-led opening. */
.portfolio-opening {
  position: relative;
  z-index: 3;
  padding: clamp(90px, 10vw, 148px) 0 clamp(96px, 11vw, 160px);
}

.portfolio-opening::before {
  content: "";
  position: absolute;
  inset: -18vh 0 auto;
  height: 38vh;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(3,2,7,.8) 52%, #030207 100%);
}

.portfolio-opening-shell {
  position: relative;
  display: grid;
  align-items: center;
  gap: clamp(42px, 7vw, 96px);
}

.portfolio-opening-shell.has-visual {
  grid-template-columns: minmax(280px, .72fr) minmax(520px, 1.28fr);
}

.portfolio-opening-copy {
  position: relative;
  z-index: 2;
  max-width: 820px;
}

.portfolio-opening-shell:not(.has-visual) .portfolio-opening-copy {
  width: min(920px, 100%);
  margin-inline: auto;
  text-align: center;
}

.portfolio-opening-shell:not(.has-visual) .portfolio-breadcrumb,
.portfolio-opening-shell:not(.has-visual) .portfolio-actions {
  justify-content: center;
}

.portfolio-opening-copy .portfolio-breadcrumb {
  margin: 0 0 30px;
  justify-content: flex-start;
}

.portfolio-opening-copy .v2-eyebrow {
  margin-bottom: 24px;
}

.portfolio-opening-copy h2 {
  margin: 0;
  color: #fff;
  font-family: Manrope, Inter, sans-serif;
  font-size: clamp(2.7rem, 5vw, 5.6rem);
  font-weight: 520;
  line-height: .98;
  letter-spacing: -.058em;
  text-wrap: balance;
}

.portfolio-opening-lead {
  max-width: 680px;
  margin: 24px 0 0;
  color: var(--portfolio-text);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.75;
}

.portfolio-opening-copy .portfolio-actions {
  margin-top: 34px;
  justify-content: flex-start;
}

.portfolio-opening-visual {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.portfolio-opening-visual .portfolio-project-window,
.portfolio-opening-visual .portfolio-about-visual {
  width: 100%;
  margin-top: 0;
}

/* Use the same spatial index language as the project worlds from index.
   Numbers sit behind/alongside copy instead of being boxed as card content. */
.portfolio-service-index,
.portfolio-strata,
.portfolio-story-copy,
.portfolio-tech-ledger {
  overflow: visible;
}

.portfolio-service-row,
.portfolio-strata article,
.portfolio-story-copy article,
.portfolio-tech-ledger article,
.portfolio-related-link {
  position: relative;
  isolation: isolate;
}

.portfolio-service-row > span,
.portfolio-strata article > span,
.portfolio-story-copy article > span,
.portfolio-tech-ledger article > span,
.portfolio-related-link > span {
  position: absolute;
  left: clamp(-20px, -1vw, 0px);
  top: 50%;
  z-index: -1;
  transform: translateY(-50%);
  color: transparent;
  -webkit-text-stroke: 1px rgb(var(--row-accent, var(--page-accent)) / .48);
  font-family: Manrope, Inter, sans-serif;
  font-size: clamp(5rem, 10vw, 10.5rem);
  font-weight: 780;
  line-height: .78;
  letter-spacing: -.11em;
  text-shadow: 0 0 46px rgb(var(--row-accent, var(--page-accent)) / .10);
  opacity: .66;
  pointer-events: none;
}

.portfolio-service-row {
  min-height: 210px;
  padding: 34px 8px 34px clamp(118px, 12vw, 176px);
  grid-template-columns: minmax(0,1fr) 42px;
  gap: clamp(20px, 4vw, 52px);
  background: transparent;
}

.portfolio-service-row:hover {
  padding-left: clamp(128px, 12.7vw, 188px);
  background: linear-gradient(90deg, rgb(var(--row-accent) / .055), transparent 70%);
}

.portfolio-service-row > div,
.portfolio-service-row > i {
  position: relative;
  z-index: 2;
}

.portfolio-strata article {
  min-height: 190px;
  padding: 34px 0 34px clamp(128px, 13vw, 190px);
  grid-template-columns: minmax(0,1fr);
  gap: 0;
}

.portfolio-strata article > div {
  position: relative;
  z-index: 2;
}

.portfolio-story-copy article {
  min-height: 176px;
  padding: 36px 0 38px clamp(106px, 10vw, 152px);
  grid-template-columns: minmax(120px, .24fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 56px);
}

.portfolio-story-copy article > h3,
.portfolio-story-copy article > p {
  position: relative;
  z-index: 2;
}

.portfolio-story-copy article > span,
.portfolio-related-link > span {
  font-size: clamp(4.2rem, 8vw, 7.8rem);
}

.portfolio-tech-ledger article {
  min-height: 220px;
  padding: 36px 0 36px clamp(132px, 13vw, 194px);
  grid-template-columns: minmax(0,1fr);
}

.portfolio-related-list {
  gap: 0;
  border-top: 1px solid var(--portfolio-line);
}

.portfolio-related-link {
  min-height: 146px;
  padding: 28px 22px 28px clamp(92px, 9vw, 132px);
  grid-template-columns: minmax(0,1fr) 22px;
  border: 0;
  border-bottom: 1px solid var(--portfolio-line);
  border-radius: 0;
  background: transparent;
}

.portfolio-related-link:hover {
  transform: none;
  background: linear-gradient(90deg, rgb(var(--page-accent) / .055), transparent 74%);
}

.portfolio-related-link > div,
.portfolio-related-link > i {
  position: relative;
  z-index: 2;
}

@media (max-width: 1050px) {
  .portfolio-opening-shell.has-visual {
    grid-template-columns: 1fr;
  }

  .portfolio-opening-shell.has-visual .portfolio-opening-copy {
    width: min(900px, 100%);
  }

  .portfolio-opening-visual {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .v2-internal-hero {
    min-height: 108svh;
  }

  .v2-internal-hero .v2-internal-hero-title {
    max-width: calc(100vw - 34px);
    font-size: clamp(3.1rem, 15vw, 5.35rem);
    line-height: .94;
  }

  .v2-internal-hero .v2-internal-hero-positioning {
    max-width: min(86vw, 560px);
    margin-top: 22px;
    font-size: .94rem;
    line-height: 1.62;
  }

  .portfolio-opening {
    padding: 82px 0 98px;
  }

  .portfolio-opening-copy,
  .portfolio-opening-shell:not(.has-visual) .portfolio-opening-copy {
    text-align: left;
  }

  .portfolio-opening-shell:not(.has-visual) .portfolio-breadcrumb,
  .portfolio-opening-shell:not(.has-visual) .portfolio-actions,
  .portfolio-opening-copy .portfolio-actions {
    justify-content: flex-start;
  }

  .portfolio-opening-copy h2 {
    font-size: clamp(2.45rem, 11vw, 3.8rem);
  }

  .portfolio-service-row {
    min-height: 164px;
    padding: 28px 0 28px 72px;
    grid-template-columns: minmax(0,1fr) 22px;
    gap: 12px;
  }

  .portfolio-service-row:hover {
    padding-left: 72px;
  }

  .portfolio-strata article,
  .portfolio-story-copy article,
  .portfolio-tech-ledger article,
  .portfolio-related-link {
    padding-left: 70px;
  }

  .portfolio-story-copy article {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .portfolio-service-row > span,
  .portfolio-strata article > span,
  .portfolio-story-copy article > span,
  .portfolio-tech-ledger article > span,
  .portfolio-related-link > span {
    left: -6px;
    font-size: clamp(3.4rem, 18vw, 5.4rem);
    opacity: .58;
  }

  .portfolio-related-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-ready .v2-internal-hero .v2-internal-hero-title span:first-child:last-child {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* Iteration 2: continuous transition into content and deterministic dock motion. */
.portfolio-opening::before {
  inset: -18vh 0 0;
  height: auto;
  background: linear-gradient(
    180deg,
    rgba(3,2,7,0) 0,
    rgba(3,2,7,.74) 17%,
    rgba(3,2,7,.46) 54%,
    rgba(3,2,7,.12) 84%,
    rgba(3,2,7,0) 100%
  );
}

body.internal-hero-scrolled .v2-internal-hero .v2-hero-constellation svg {
  animation: none !important;
  transform:
    translate3d(var(--constellation-x, 0px), calc(-11% + var(--constellation-y, 0px)), calc(var(--constellation-depth, 0px) + var(--constellation-pointer-z, 0px)))
    rotateZ(var(--constellation-rotate, 0deg))
    rotateX(calc(var(--constellation-tilt-x, 0deg) + var(--constellation-pointer-x, 0deg)))
    rotateY(calc(var(--constellation-tilt-y, 0deg) + var(--constellation-pointer-y, 0deg)))
    scale(var(--constellation-scale, 1));
  transition: transform 120ms linear, opacity 180ms ease;
}


.proposal-shortcut-section {
  padding-top: 0;
  margin-top: -14px;
}

.proposal-shortcut-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) auto;
  gap: 26px;
  align-items: center;
  padding: 22px 24px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 12% 50%, rgba(171,139,255,.18), transparent 0 36%),
    linear-gradient(140deg, rgba(22,18,34,.92), rgba(9,7,15,.86));
  box-shadow: 0 22px 80px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}

.proposal-shortcut-shell::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, rgba(171,139,255,.38), rgba(255,255,255,.06), transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.proposal-shortcut-copy h2 {
  margin: 0;
  color: #fff;
  font-family: Manrope, Inter, sans-serif;
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 620;
  letter-spacing: -.045em;
}

.proposal-shortcut-copy p {
  margin: 10px 0 0;
  max-width: 680px;
  color: rgba(237,231,247,.72);
  font-size: .95rem;
  line-height: 1.65;
}

.proposal-shortcut-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.proposal-shortcut-chip,
.proposal-shortcut-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(250,247,255,.92);
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.proposal-shortcut-chip:hover,
.proposal-shortcut-chip:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(171,139,255,.36);
  background: rgba(255,255,255,.07);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.proposal-shortcut-chip--primary {
  background: linear-gradient(135deg, rgba(196,177,255,.98), rgba(152,118,255,.86));
  color: #120d21;
  border-color: rgba(206,190,255,.56);
  box-shadow: 0 16px 38px rgba(157,121,255,.18);
}

.proposal-shortcut-chip--primary:hover,
.proposal-shortcut-chip--primary:focus-visible {
  border-color: rgba(219,209,255,.72);
  background: linear-gradient(135deg, rgba(207,192,255,1), rgba(164,130,255,.92));
}

.proposal-shortcut-meta {
  color: rgba(237,231,247,.68);
}

@media (max-width: 1100px) {
  .proposal-shortcut-shell {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .proposal-shortcut-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .proposal-shortcut-section {
    margin-top: -8px;
  }

  .proposal-shortcut-shell {
    padding: 18px 18px 20px;
    border-radius: 22px;
    gap: 18px;
  }

  .proposal-shortcut-copy h2 {
    font-size: clamp(1.26rem, 7vw, 1.7rem);
  }

  .proposal-shortcut-copy p {
    font-size: .9rem;
  }

  .proposal-shortcut-actions {
    gap: 8px;
  }

  .proposal-shortcut-chip,
  .proposal-shortcut-meta {
    width: 100%;
    justify-content: center;
  }
}