.portfolio-page {
  --portfolio-line: rgba(244, 246, 248, .17);
  --portfolio-muted: #aab4bd;
}

.portfolio-page button { font: inherit; }
.portfolio-page [hidden] { display: none !important; }
.portfolio-page .section-label { color: var(--accent); }

.portfolio-hero {
  position: relative;
  display: flex;
  min-height: min(870px, 100dvh);
  align-items: end;
  padding: 150px var(--page-pad) 88px;
  overflow: hidden;
  isolation: isolate;
  background: #0a1418;
}
.portfolio-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, #080a0d 4%, rgba(8,10,13,.89) 33%, rgba(8,10,13,.32) 78%), linear-gradient(0deg, #080a0d, transparent 35%);
}
.portfolio-hero__image {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.68);
}
.portfolio-hero__content { max-width: 980px; }
.portfolio-hero h1,
.portfolio-projects h2,
.portfolio-directions h2,
.portfolio-learning h2 {
  margin: 0;
  font: 900 clamp(58px, 8vw, 142px)/.88 "Arial Black", Impact, sans-serif;
  letter-spacing: -.075em;
  text-transform: uppercase;
}
.portfolio-hero h1 span { display: block; color: var(--accent); }
.portfolio-hero__content > p:not(.inner-eyebrow) {
  max-width: 660px;
  margin: 34px 0 0;
  color: #d0d8dd;
  font-size: clamp(18px, 1.65vw, 25px);
  line-height: 1.5;
}
.portfolio-hero__index {
  position: absolute;
  right: var(--page-pad);
  bottom: 62px;
  display: flex;
  gap: 30px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}

.portfolio-directions,
.portfolio-projects,
.portfolio-learning { padding: clamp(86px, 11vw, 160px) var(--page-pad); }
.portfolio-directions { background: #0e1318; }
.portfolio-section-head,
.portfolio-projects__top {
  display: grid;
  grid-template-columns: minmax(150px, .32fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 100px);
}
.portfolio-section-head h2,
.portfolio-projects h2,
.portfolio-learning h2 { font-size: clamp(46px, 5.3vw, 96px); }
.portfolio-section-head p:not(.section-label) {
  max-width: 690px;
  margin: 26px 0 0;
  color: var(--portfolio-muted);
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.55;
}
.portfolio-role-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 76px; background: var(--portfolio-line); border: 1px solid var(--portfolio-line); }
.portfolio-role {
  position: relative;
  display: flex;
  min-height: 275px;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(22px, 2.6vw, 42px);
  border: 0;
  background: #0e1318;
  color: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.portfolio-role:hover { background: #17242a; }
.portfolio-role[aria-pressed="true"] { background: var(--accent); color: #07110d; }
.portfolio-role span,
.portfolio-role small,
.portfolio-role b { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.portfolio-role span { margin-bottom: auto; color: var(--accent); }
.portfolio-role[aria-pressed="true"] span { color: #174c38; }
.portfolio-role strong { max-width: 300px; font-size: clamp(23px, 2.3vw, 38px); line-height: 1.06; letter-spacing: -.045em; }
.portfolio-role small { max-width: 290px; margin-top: 18px; color: var(--portfolio-muted); line-height: 1.5; }
.portfolio-role[aria-pressed="true"] small { color: #174c38; }
.portfolio-role b { position: absolute; top: 33px; right: 35px; font-size: 24px; }

.portfolio-projects { background: #080a0d; }
.portfolio-projects__top { grid-template-columns: minmax(0, 1fr) minmax(270px, .46fr); align-items: end; }
.portfolio-projects__intro { max-width: 490px; justify-self: end; }
.portfolio-projects__intro p { margin: 0 0 18px; color: var(--portfolio-muted); font-size: clamp(17px, 1.3vw, 21px); line-height: 1.5; }
.portfolio-projects__intro span { display: block; color: var(--accent); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.portfolio-show-all { margin-top: 20px; padding: 0 0 5px; border: 0; border-bottom: 1px solid var(--accent); background: transparent; color: var(--accent); font-size: 12px; font-weight: 800; cursor: pointer; }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 68px; align-items: start; }
.portfolio-case { min-width: 0; border: 1px solid var(--portfolio-line); background: #10151a; }
.portfolio-case__art { position: relative; display: flex; aspect-ratio: 1.48; align-items: end; padding: 26px; overflow: hidden; background: radial-gradient(circle at 75% 35%, rgba(54,230,163,.24), transparent 32%), linear-gradient(135deg, #17222a, #0b1015); }
.portfolio-case__art::after { position: absolute; inset: 0; content: ""; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 34px 34px; pointer-events: none; }
.portfolio-case__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .78; }
.portfolio-case__art--image::after { background: linear-gradient(0deg, rgba(0,0,0,.45), transparent 38%); }
.portfolio-case__art span { position: relative; z-index: 1; color: #f4f6f8; font: 900 clamp(50px, 5.5vw, 100px)/.8 "Arial Black", sans-serif; letter-spacing: -.09em; }
.portfolio-case__body { padding: clamp(22px, 2vw, 34px); }
.portfolio-case__meta { display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.portfolio-case__meta span:last-child { color: #a7b1b8; }
.portfolio-case h3 { margin: 24px 0 14px; font: 900 clamp(26px, 2.45vw, 42px)/1.06 "Arial Black", Arial, sans-serif; letter-spacing: -.06em; }
.portfolio-case__body > p { min-height: 4.5em; margin: 0 0 24px; color: #bac3ca; font-size: 15px; line-height: 1.52; }
.portfolio-case details { border-top: 1px solid var(--portfolio-line); }
.portfolio-case summary { display: flex; justify-content: space-between; gap: 10px; padding: 19px 0; color: var(--paper); font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; list-style: none; }
.portfolio-case summary::-webkit-details-marker { display: none; }
.portfolio-case details[open] summary span { transform: rotate(45deg); }
.portfolio-case summary span { color: var(--accent); font-size: 20px; line-height: .7; transition: transform .2s ease; }
.portfolio-case dl { margin: 0 0 22px; }
.portfolio-case dl div { display: grid; grid-template-columns: 78px 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.08); }
.portfolio-case dt { color: var(--accent); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.portfolio-case dd { margin: 0; color: #c3cbd1; font-size: 14px; line-height: 1.45; }
.portfolio-case__link { display: inline-block; margin-top: 3px; padding-bottom: 4px; border-bottom: 1px solid var(--accent); color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.portfolio-case__link:hover { color: var(--paper); }
.portfolio-empty { color: var(--portfolio-muted); }

.portfolio-learning { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .7fr); align-items: center; gap: clamp(40px, 8vw, 140px); border-top: 1px solid var(--portfolio-line); background: #10171b; }
.portfolio-learning > * { min-width: 0; }
.portfolio-learning h2 span { color: var(--accent); }
.portfolio-learning > div > p:last-child { max-width: 650px; margin: 30px 0 0; color: var(--portfolio-muted); font-size: clamp(17px, 1.3vw, 21px); line-height: 1.55; }
.portfolio-learning__case { padding: clamp(28px, 3.4vw, 58px); border: 1px solid rgba(54,230,163,.35); background: linear-gradient(145deg, rgba(54,230,163,.10), rgba(54,230,163,.01)); }
.portfolio-learning__case > span { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.portfolio-learning__case h3 { margin: 50px 0 22px; font: 900 clamp(30px, 3vw, 48px)/1 "Arial Black", sans-serif; letter-spacing: -.06em; }
.portfolio-learning__case p { color: #c3cbd1; font-size: 17px; line-height: 1.55; }
.portfolio-learning__case dl { margin: 40px 0 0; }
.portfolio-learning__case dl div { display: flex; justify-content: space-between; gap: 25px; padding: 15px 0; border-top: 1px solid var(--portfolio-line); }
.portfolio-learning__case dt { color: var(--accent); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.portfolio-learning__case dd { margin: 0; text-align: right; }
.portfolio-cta { min-height: 65dvh; }

/* Native scroll timelines keep animation outside JavaScript's scroll path. */
@property --sc-p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.portfolio-hero-scroll { --sc-p: 0; position: relative; }
.portfolio-hero__image {
  transform: translateY(calc(var(--sc-p) * 65px)) scale(calc(1.03 + var(--sc-p) * .09));
  transform-origin: 65% 45%;
}
.portfolio-hero__content {
  transform: translateY(calc(var(--sc-p) * -38px));
}
.portfolio-hero__orbit {
  position: absolute;
  z-index: -1;
  top: 18%;
  right: 5%;
  width: min(43vw, 650px);
  aspect-ratio: 1;
  perspective: 950px;
  pointer-events: none;
  opacity: .5;
}
.portfolio-hero__orbit i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(54,230,163,.34);
  border-radius: 50%;
  transform: rotateX(60deg) rotateY(calc(-30deg + var(--sc-p) * 100deg)) rotateZ(calc(var(--sc-p) * 80deg));
}
.portfolio-hero__orbit i:nth-child(2) { inset: 10%; transform: rotateX(30deg) rotateY(calc(55deg - var(--sc-p) * 80deg)); }
.portfolio-hero__orbit i:nth-child(3) { inset: 23%; transform: rotateX(calc(65deg + var(--sc-p) * 90deg)) rotateY(25deg); }

.portfolio-process {
  --sc-p: .45;
  position: relative;
  background: #0b1014;
  border-top: 1px solid var(--portfolio-line);
}
.portfolio-process__stage {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(30px, 5vw, 80px);
  padding: 112px var(--page-pad) 70px;
  overflow: clip;
}
.portfolio-process__copy h2 {
  margin: 0;
  font: 900 clamp(50px, 5.8vw, 104px)/.9 "Arial Black", Impact, sans-serif;
  letter-spacing: -.075em;
  text-transform: uppercase;
}
.portfolio-process__copy h2 span { color: var(--accent); }
.portfolio-process__copy > p:not(.section-label) { max-width: 570px; margin: 26px 0; color: #bdc7cf; font-size: 18px; line-height: 1.55; }
.portfolio-process__steps { display: grid; gap: 0; max-width: 570px; margin: 32px 0 0; padding: 0; list-style: none; }
.portfolio-process__steps li { display: grid; grid-template-columns: 155px 1fr; gap: 22px; padding: 15px 0; border-top: 1px solid var(--portfolio-line); font-size: 13px; line-height: 1.5; }
.portfolio-process__steps strong { color: var(--paper); }
.portfolio-process__steps span { color: var(--portfolio-muted); }
.portfolio-process__visual { position: relative; min-width: 0; width: 100%; perspective: 1100px; }
.portfolio-assembly {
  position: relative;
  width: min(92%, 520px);
  aspect-ratio: 1;
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: rotateX(calc(53deg - var(--sc-p) * 12deg)) rotateZ(calc(-24deg + var(--sc-p) * 20deg)) scale(.88);
}
.portfolio-plane {
  position: absolute;
  inset: 14%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 3vw, 45px);
  border: 1px solid rgba(255,255,255,.36);
  background: rgba(20,29,35,.91);
  transform-style: preserve-3d;
  box-shadow: 15px 30px 60px rgba(3,7,10,.25);
}
.portfolio-plane span { color: #a5b4bd; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.portfolio-plane b { position: relative; z-index: 1; font: 900 clamp(34px, 3.3vw, 58px)/1 "Arial Black", sans-serif; letter-spacing: -.07em; }
.portfolio-plane i { position: absolute; inset: 20%; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.portfolio-plane--research { transform: translate3d(calc(-40px + var(--sc-p) * 40px), calc(-70px + var(--sc-p) * 70px), calc(-140px + var(--sc-p) * 90px)); }
.portfolio-plane--architecture { border-color: rgba(54,230,163,.58); background: rgba(18,47,38,.86); transform: translate3d(0, 0, 0); }
.portfolio-plane--architecture span { color: #80c8ac; }
.portfolio-plane--delivery { border-color: var(--accent); background: rgba(54,230,163,.89); color: #071b13; transform: translate3d(calc(45px - var(--sc-p) * 45px), calc(60px - var(--sc-p) * 60px), calc(170px - var(--sc-p) * 110px)); }
.portfolio-plane--delivery span { color: #154e38; }
.portfolio-plane--delivery i { border-color: rgba(7,27,19,.22); }
.portfolio-assembly__axis { position: absolute; top: 50%; left: 50%; width: 1px; height: 1px; transform-style: preserve-3d; }
.portfolio-assembly__axis::before { position: absolute; width: 1px; height: 330px; background: rgba(54,230,163,.5); content: ''; transform: translateY(-50%) rotateX(90deg); }
.portfolio-process__caption { margin: 24px 0 0; color: #9daab4; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.portfolio-role-list { grid-template-columns: 1.18fr 1fr 1.08fr; }
.portfolio-role { overflow: hidden; }
.portfolio-role::after { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--accent); content: ''; transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.portfolio-role:hover::after { transform: scaleX(1); }
.portfolio-role[aria-pressed="true"]::after { background: #0d3827; transform: scaleX(1); }
.portfolio-grid { perspective: 1300px; }
.portfolio-case {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --light-x: 50%;
  --light-y: 25%;
  position: relative;
  transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform .18s ease-out, border-color .3s ease, box-shadow .3s ease;
}
.portfolio-case--featured { grid-column: span 2; }
.portfolio-case--featured .portfolio-case__art { aspect-ratio: 2.55; }
.portfolio-case--featured h3 { font-size: clamp(36px, 4vw, 66px); }
.portfolio-case--featured .portfolio-case__body > p { max-width: 730px; min-height: 0; font-size: 18px; }
.portfolio-case:hover { border-color: rgba(54,230,163,.55); box-shadow: 0 20px 55px rgba(0,0,0,.24); }
.portfolio-case__art::before { position: absolute; z-index: 2; inset: 0; content: ''; background: radial-gradient(circle at var(--light-x) var(--light-y), rgba(255,255,255,.12), transparent 52%); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.portfolio-case:hover .portfolio-case__art::before { opacity: 1; }
.portfolio-case__art img { transform: scale(1.02); transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.portfolio-case:hover .portfolio-case__art img { transform: scale(1.065); }
.portfolio-case summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.portfolio-case:has(details[open]) { transform: none; }
.portfolio-learning__case { transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .18s ease-out; }
.portfolio-cta .button { transition: transform .25s ease, background .25s ease; }
.portfolio-cta .button:hover { transform: translateY(-3px); }

.portfolio-motion [data-portfolio-reveal].is-reveal { opacity: .85; translate: 0 24px; transition: opacity .6s ease, translate .7s cubic-bezier(.2,.7,.2,1); }
.portfolio-motion [data-portfolio-reveal].is-entered { opacity: 1; translate: 0 0; }
.portfolio-case.is-reveal { transition: opacity .6s ease, translate .7s cubic-bezier(.2,.7,.2,1), transform .18s ease-out, border-color .3s ease; }

@keyframes portfolio-scroll-progress { from { --sc-p: 0; } to { --sc-p: 1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
    .portfolio-hero-scroll, .portfolio-process {
      animation: portfolio-scroll-progress linear both;
      animation-timeline: view(block);
      animation-range: cover 0% cover 100%;
    }
    .portfolio-hero__image { transform: translateY(calc(var(--sc-p) * 25px)) scale(1.045); }
    .portfolio-hero__content { transform: none; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
    .portfolio-hero-scroll { min-height: 160dvh; }
    .portfolio-hero { position: sticky; top: 0; min-height: 100dvh; }
    .portfolio-process { min-height: 210dvh; }
    .portfolio-process__stage { position: sticky; top: 0; }
    .portfolio-hero-scroll, .portfolio-process {
      animation: portfolio-scroll-progress linear both;
      animation-timeline: view(block);
      animation-range: contain 0% contain 100%;
    }
  }
}

@media (max-width: 1180px) {
  .portfolio-case--featured { grid-column: span 1; }
  .portfolio-case--featured .portfolio-case__art { aspect-ratio: 1.48; }
  .portfolio-case--featured h3 { font-size: clamp(26px, 2.45vw, 42px); }
  .portfolio-case--featured .portfolio-case__body > p { font-size: 15px; min-height: 4.5em; }
  .portfolio-process__steps li { grid-template-columns: 130px 1fr; gap: 12px; }
}
@media (max-width: 900px) {
  .portfolio-process__stage { grid-template-columns: 1fr; padding-top: 86px; gap: 30px; }
  .portfolio-process__copy { max-width: 720px; }
  .portfolio-process__visual { max-width: 500px; margin: 0 auto; }
  .portfolio-process__copy h2 { font-size: clamp(46px, 8vw, 70px); }
  .portfolio-hero__orbit { top: 18%; right: -15%; width: 85vw; }
  .portfolio-role-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .portfolio-learning h2 { font-size: clamp(32px, 7.3vw, 44px); overflow-wrap: anywhere; }
  .portfolio-learning__case h3 { font-size: clamp(25px, 6.4vw, 38px); overflow-wrap: anywhere; }
  .portfolio-process__stage { padding-bottom: 64px; }
  .portfolio-process__steps li { grid-template-columns: 1fr; gap: 4px; }
  .portfolio-process__visual { perspective: 850px; }
  .portfolio-assembly { width: 90%; transform: rotateX(calc(53deg - var(--sc-p) * 12deg)) rotateZ(calc(-24deg + var(--sc-p) * 20deg)) scale(.8); }
  .portfolio-plane { padding: 18px; }
  .portfolio-plane span { font-size: 9px; }
  .portfolio-plane b { font-size: 32px; }
  .portfolio-process__caption { margin-top: 18px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-page { scroll-behavior: auto; }
  .portfolio-hero-scroll { min-height: auto; --sc-p: 0; }
  .portfolio-process { min-height: auto; --sc-p: .45; }
  .portfolio-hero, .portfolio-process__stage { position: relative; }
  .portfolio-hero__image, .portfolio-hero__content, .portfolio-case, .portfolio-learning__case { transform: none !important; }
  .portfolio-page *, .portfolio-page *::before, .portfolio-page *::after { animation: none !important; transition: none !important; }
  .portfolio-motion [data-portfolio-reveal] { opacity: 1 !important; translate: none !important; }
}

@media (max-width: 1180px) {
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-role-list { gap: 0; }
  .portfolio-role { min-height: 290px; }
  .portfolio-hero__index { display: none; }
}
@media (max-width: 900px) {
  .portfolio-hero { min-height: 760px; }
  .portfolio-hero::after { background: linear-gradient(0deg, #080a0d 2%, rgba(8,10,13,.79) 50%, rgba(8,10,13,.25)), linear-gradient(90deg, rgba(8,10,13,.6), transparent); }
  .portfolio-hero__image { object-position: 66% center; }
  .portfolio-section-head,
  .portfolio-projects__top,
  .portfolio-learning { grid-template-columns: 1fr; }
  .portfolio-projects__intro { justify-self: start; }
  .portfolio-role-list { grid-template-columns: 1fr; margin-top: 42px; }
  .portfolio-role { min-height: 172px; }
}
@media (max-width: 600px) {
  .portfolio-hero { min-height: 720px; padding-top: 135px; padding-bottom: 65px; }
  .portfolio-hero h1 { font-size: clamp(52px, 12vw, 76px); }
  .portfolio-hero__content > p:not(.inner-eyebrow) { font-size: 18px; }
  .portfolio-hero .inner-actions { margin-top: 30px; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 42px; }
  .portfolio-case__body > p { min-height: auto; }
  .portfolio-role { min-height: 184px; }
  .portfolio-role strong { font-size: 28px; }
  .portfolio-learning { gap: 38px; }
  .portfolio-learning__case h3 { margin-top: 30px; }
}
@media print {
  .portfolio-hero-scroll, .portfolio-process { min-height: auto; }
  .portfolio-process, .portfolio-hero__orbit { display: none; }
  .portfolio-hero { position: relative; }
  .portfolio-motion [data-portfolio-reveal] { opacity: 1; translate: none; }
  .portfolio-case, .portfolio-hero__content { transform: none; }
  .portfolio-page { color: #111; }
  .portfolio-hero { min-height: auto; padding: 40px 0; background: #fff; }
  .portfolio-hero__image, .portfolio-hero::after, .portfolio-hero__index, .portfolio-page .inner-actions, .portfolio-role-list, .portfolio-show-all { display: none !important; }
  .portfolio-hero h1 span, .portfolio-learning h2 span { color: #111; }
  .portfolio-directions, .portfolio-projects, .portfolio-learning { padding: 30px 0; background: #fff; color: #111; }
  .portfolio-grid { display: block; }
  .portfolio-case { break-inside: avoid; margin: 0 0 14px; background: #fff; color: #111; }
  .portfolio-case__art { display: none; }
  .portfolio-case__body > p, .portfolio-case dd, .portfolio-learning__case p { color: #222; }
  .portfolio-case details:not([open]) { display: none; }
}