:root {
  color-scheme: light only;
  forced-color-adjust: none;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  background-color: rgb(28, 72, 57);
}

#bg-gradient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: rgb(28, 72, 57);
  background-image: radial-gradient(
    ellipse 126.7vw 143.4vh at 50% 130%,
    rgb(212, 246, 235) 15.855%,
    rgb(179, 222, 209) 26.169%,
    rgb(145, 199, 183) 36.483%,
    rgb(112, 175, 156) 46.797%,
    rgb(78, 151, 130) 57.111%,
    rgb(53, 111, 94) 78.555%,
    rgb(28, 72, 57) 100%
  );
}

#pre-canvas-99 {
  position: fixed;
  left: 2.0833vw;
  bottom: 3.7037vh;
  bottom: 3.7037svh;
  z-index: 0;
  color: #fff;
  pointer-events: none;
  user-select: none;
  font: 700 16.667vh/1 "Supply Sans", monospace;
  font-size: 16.667svh;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}

#webgl {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  touch-action: none;
}

#ui-container {
  position: fixed;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (max-width: 767px) {
  #pre-canvas-99 {
    left: 4.1667vw;
    font-size: 10.185vh;
    font-size: 10.185svh;
  }
}

.site-admin-banner {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 999999;
  max-width: min(92vw, 720px);
  padding: 10px 18px;
  color: #112019;
  background: #baff67;
  border-radius: 0 0 14px 14px;
  font: 500 12px/1.35 "Google Sans Flex", sans-serif;
  letter-spacing: 0.02em;
  text-align: center;
  box-shadow: 0 8px 30px rgba(16, 42, 31, 0.18);
  transform: translateX(-50%);
}

.site-maintenance {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px;
  color: #f5fff8;
  text-align: center;
  background:
    radial-gradient(circle at 50% 115%, rgba(153, 255, 168, 0.28), transparent 42%),
    #123d2f;
  font-family: "Supply Sans", sans-serif;
}

.site-maintenance img {
  width: 120px;
  margin-bottom: 54px;
}

.site-maintenance p {
  margin: 0 0 18px;
  color: #baff67;
  font: 400 11px/1 "PP Supply Mono", monospace;
  letter-spacing: 0.17em;
}

.site-maintenance h1 {
  max-width: 850px;
  margin: 0;
  font: 400 clamp(44px, 7vw, 92px)/0.95 "STK Bureau Serif", serif;
  letter-spacing: -0.05em;
}

.site-maintenance span {
  margin-top: 25px;
  color: rgba(245, 255, 248, 0.66);
  font-size: 17px;
}

.site-maintenance a {
  margin-top: 44px;
  padding: 13px 22px;
  color: #112019;
  background: #baff67;
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
}

/* Oğuz Kaan Çiçek — professional story layer */

.portfolio-ui,
.portfolio-ui * {
  box-sizing: border-box;
}

/*
 * Isolate story controls from browser defaults and WordPress/page-builder
 * button rules so their authored colours remain consistent everywhere.
 */
.portfolio-ui button {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  -webkit-text-fill-color: currentColor;
}

.portfolio-ui .portfolio-nav button {
  color: var(--portfolio-muted) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.portfolio-ui .portfolio-nav button:hover,
.portfolio-ui .portfolio-nav button.active {
  color: var(--portfolio-ink) !important;
}

.portfolio-ui .portfolio-sound {
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.portfolio-ui .closing-copy button {
  color: #f5efeb !important;
  -webkit-text-fill-color: #f5efeb;
  background: #3b3541 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.portfolio-ui .closing-copy button:hover,
.portfolio-ui .closing-copy button:focus-visible {
  color: #302b36 !important;
  -webkit-text-fill-color: #302b36;
  background: #d9ff8b !important;
}

.portfolio-ui {
  --portfolio-ink: #f5f2e8;
  --portfolio-muted: rgba(245, 242, 232, 0.65);
  --portfolio-line: rgba(245, 242, 232, 0.24);
  position: fixed;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  color: var(--portfolio-ink);
  pointer-events: none;
  font-family: "Supply Sans", "Inter", sans-serif;
  transition: background-color 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-story-active.portfolio-stage1 {
  background: #dcecdf;
}

.portfolio-story-active.portfolio-stage2 {
  background: #123629;
}

.portfolio-story-active.portfolio-stage3 {
  background: #071b13;
}

.portfolio-story-active.portfolio-stage4 {
  background: #e5efdf;
}

.portfolio-story-active.portfolio-stage5 {
  background: #06170f;
}

.technical-field {
  --tech-accent: #d9ff8b;
  --tech-line: rgba(217, 255, 139, 0.14);
  --tech-faint: rgba(217, 255, 139, 0.055);
  position: absolute;
  inset: 68px 0 64px;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  contain: strict;
  transition: opacity 900ms ease, filter 700ms ease;
}

.portfolio-story-active .technical-field {
  opacity: 1;
}

.portfolio-stage1 .technical-field,
.portfolio-stage4 .technical-field {
  --tech-accent: #0d6b43;
  --tech-line: rgba(13, 107, 67, 0.14);
  --tech-faint: rgba(13, 107, 67, 0.052);
  filter: saturate(0.86);
}

.technical-grid {
  position: absolute;
  inset: -16%;
  background-image:
    linear-gradient(var(--tech-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-line) 1px, transparent 1px),
    linear-gradient(var(--tech-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-faint) 1px, transparent 1px);
  background-position: center;
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  opacity: 0.44;
  transform: perspective(850px) rotateX(58deg) rotateZ(-9deg) translate3d(var(--field-shift), -2%, 0);
  transform-origin: 62% 58%;
  will-change: transform;
}

.technical-grid::before,
.technical-grid::after {
  position: absolute;
  content: "";
}

.technical-grid::before {
  inset: 0;
  background: radial-gradient(circle at 66% 54%, transparent 0 10%, var(--tech-faint) 10.2% 10.5%, transparent 10.8% 18%, var(--tech-line) 18.2% 18.45%, transparent 18.8%);
}

.technical-grid::after {
  top: 0;
  bottom: 0;
  left: 62%;
  width: 1px;
  background: linear-gradient(transparent, var(--tech-accent), transparent);
  opacity: 0.45;
  box-shadow: 0 0 24px var(--tech-accent);
  animation: technical-axis 8s ease-in-out infinite;
}

@keyframes technical-axis {
  0%, 100% { transform: translateX(-10vw); opacity: 0; }
  18%, 72% { opacity: 0.38; }
  50% { transform: translateX(20vw); }
}

.technical-scan {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(104deg, transparent 0 51%, var(--tech-faint) 51.1% 51.3%, transparent 51.5%),
    repeating-linear-gradient(0deg, transparent 0 5px, var(--tech-faint) 6px);
  mask-image: linear-gradient(90deg, transparent 8%, black 43%, black 94%, transparent);
  opacity: 0.42;
  transform: translate3d(calc(var(--field-shift) * -0.35), 0, 0);
}

.technical-contours {
  position: absolute;
  top: 50%;
  right: -6vw;
  width: min(54vw, 760px);
  aspect-ratio: 1;
  transform: translateY(-50%) rotate(var(--field-turn));
  will-change: transform;
}

.technical-contours i {
  position: absolute;
  border: 1px solid var(--tech-line);
  border-radius: 47% 53% 61% 39% / 39% 44% 56% 61%;
}

.technical-contours i:nth-child(1) { inset: 2%; animation: contour-breathe 13s ease-in-out infinite; }
.technical-contours i:nth-child(2) { inset: 15%; border-style: dashed; animation: contour-breathe 10s -4s ease-in-out infinite reverse; }
.technical-contours i:nth-child(3) { inset: 29%; animation: contour-breathe 8s -2s ease-in-out infinite; }
.technical-contours i:nth-child(4) { inset: 43%; background: var(--tech-faint); animation: contour-breathe 6s -3s ease-in-out infinite reverse; }

@keyframes contour-breathe {
  50% { border-radius: 61% 39% 42% 58% / 52% 62% 38% 48%; transform: rotate(9deg) scale(1.035); }
}

.technical-schematic {
  position: absolute;
  top: 15%;
  right: clamp(30px, 5vw, 90px);
  width: min(34vw, 500px);
  height: min(59vh, 520px);
  transform: translate3d(calc(var(--field-shift) * 0.18), calc((.5 - var(--field-progress)) * 30px), 0);
  will-change: transform;
}

.schematic-node {
  position: absolute;
  display: grid;
  grid-template-columns: 16px auto;
  align-items: center;
  gap: 4px 8px;
  color: var(--tech-accent);
  font-family: "PP Supply Mono", "Supply Mono", monospace;
  letter-spacing: 0.09em;
}

.schematic-node > i {
  grid-row: 1 / span 2;
  width: 9px;
  height: 9px;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--tech-faint), 0 0 24px var(--tech-line);
}

.schematic-node > i::after {
  display: block;
  width: 3px;
  height: 3px;
  margin: 2px;
  background: currentColor;
  border-radius: 50%;
  content: "";
  animation: node-pulse 2.8s ease-in-out infinite;
}

.schematic-node b { font-size: 7px; font-weight: 400; opacity: 0.56; }
.schematic-node small { grid-column: 2; font-size: 8px; white-space: nowrap; }
.schematic-node.node-1 { top: 9%; left: 6%; }
.schematic-node.node-2 { top: 32%; right: 2%; }
.schematic-node.node-3 { right: 18%; bottom: 5%; }
.schematic-node.node-4 { bottom: 25%; left: 0; }
.schematic-node.node-2 > i::after { animation-delay: -0.8s; }
.schematic-node.node-3 > i::after { animation-delay: -1.6s; }
.schematic-node.node-4 > i::after { animation-delay: -2.2s; }

@keyframes node-pulse {
  50% { transform: scale(2.7); opacity: 0.15; }
}

.schematic-link {
  position: absolute;
  height: 1px;
  overflow: visible;
  background: linear-gradient(90deg, transparent, var(--tech-line) 10% 90%, transparent);
  transform-origin: left;
}

.schematic-link::after {
  position: absolute;
  top: -1px;
  left: 0;
  width: 3px;
  height: 3px;
  background: var(--tech-accent);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 12px var(--tech-accent);
  animation: signal-travel 4.8s linear infinite;
}

.schematic-link.link-a { top: 18%; left: 10%; width: 75%; transform: rotate(19deg); }
.schematic-link.link-b { top: 38%; left: 13%; width: 79%; transform: rotate(71deg); }
.schematic-link.link-c { top: 70%; left: 13%; width: 66%; transform: rotate(-14deg); }
.schematic-link.link-d { top: 45%; left: 17%; width: 60%; transform: rotate(145deg); }
.schematic-link.link-b::after { animation-delay: -1.2s; }
.schematic-link.link-c::after { animation-delay: -2.4s; }
.schematic-link.link-d::after { animation-delay: -3.6s; }

@keyframes signal-travel {
  to { left: 100%; }
}

.technical-telemetry {
  position: absolute;
  right: clamp(22px, 4vw, 70px);
  bottom: 4%;
  display: grid;
  width: min(27vw, 390px);
  gap: 8px;
  opacity: 0.55;
}

.technical-telemetry span {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 9px;
  color: var(--tech-accent);
  font: 400 6px/1 "PP Supply Mono", monospace;
  letter-spacing: 0.13em;
}

.technical-telemetry span::after {
  grid-column: 2;
  grid-row: 1;
  height: 1px;
  background: var(--tech-line);
  content: "";
}

.technical-telemetry i {
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 1px;
  background: var(--tech-accent);
  transform-origin: left;
  transition: transform 200ms linear;
}

.technical-coordinates {
  position: absolute;
  top: 5%;
  right: 4%;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tech-accent);
  font: 400 6px/1 "PP Supply Mono", monospace;
  letter-spacing: 0.12em;
  opacity: 0.52;
}

.technical-coordinates i { width: 18px; height: 1px; background: var(--tech-line); }

.technical-pulses i {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--tech-accent);
  border-radius: 50%;
  opacity: 0;
  animation: field-particle 7s linear infinite;
}

.technical-pulses i:nth-child(1) { top: 14%; left: 18%; animation-delay: -1s; }
.technical-pulses i:nth-child(2) { top: 72%; left: 31%; animation-delay: -3.4s; }
.technical-pulses i:nth-child(3) { top: 43%; left: 52%; animation-delay: -5.8s; }
.technical-pulses i:nth-child(4) { top: 21%; left: 76%; animation-delay: -2.2s; }
.technical-pulses i:nth-child(5) { top: 81%; left: 84%; animation-delay: -4.7s; }
.technical-pulses i:nth-child(6) { top: 58%; left: 69%; animation-delay: -6.5s; }
.technical-pulses i:nth-child(7) { top: 34%; left: 39%; animation-delay: -0.2s; }

@keyframes field-particle {
  0% { opacity: 0; transform: translate3d(-24px, 28px, 0) scale(0.4); }
  18%, 78% { opacity: 0.66; }
  100% { opacity: 0; transform: translate3d(78px, -62px, 0) scale(1.5); }
}

.portfolio-circle-transition .story-intro,
.portfolio-circle-transition .portfolio-gesture-hint {
  animation: portfolio-circle-away 850ms cubic-bezier(0.55, 0, 0.1, 1) both;
}

@keyframes portfolio-circle-away {
  to { opacity: 0; transform: scale(1.025); filter: blur(8px); }
}

.portfolio-stage1,
.portfolio-stage4 {
  --portfolio-ink: #10271d;
  --portfolio-muted: rgba(16, 39, 29, 0.68);
  --portfolio-line: rgba(16, 39, 29, 0.23);
}

.portfolio-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 22px clamp(22px, 3vw, 54px);
  border-bottom: 1px solid var(--portfolio-line);
  pointer-events: auto;
}

.portfolio-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  color: inherit;
  text-decoration: none;
}

.portfolio-brand svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.portfolio-brand > span {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.portfolio-brand b {
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
}

.portfolio-brand small {
  color: var(--portfolio-muted);
  font: 400 8px/1 "PP Supply Mono", "Supply Mono", monospace;
  letter-spacing: 0.13em;
}

.portfolio-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 30px);
}

.portfolio-nav button,
.portfolio-nav a {
  position: relative;
  padding: 7px 0;
  color: var(--portfolio-muted);
  background: none;
  border: 0;
  font: 500 10px/1 "Supply Sans", sans-serif;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.portfolio-nav button span {
  margin-right: 5px;
  font: 400 7px/1 "PP Supply Mono", monospace;
  opacity: 0.72;
}

.portfolio-nav button::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms ease;
}

.portfolio-nav button:hover,
.portfolio-nav button.active,
.portfolio-nav a:hover {
  color: var(--portfolio-ink);
}

.portfolio-nav button:disabled {
  opacity: 0.34;
  pointer-events: none;
}

.portfolio-nav button.active::after {
  transform: scaleX(1);
}

.portfolio-nav > a {
  padding: 11px 14px;
  color: #f5f2e8;
  background: #0f2f22;
}

.portfolio-stage2 .portfolio-nav > a,
.portfolio-stage3 .portfolio-nav > a,
.portfolio-stage5 .portfolio-nav > a,
.portfolio-intro .portfolio-nav > a {
  color: #10271d;
  background: #d9ff8b;
}

.portfolio-menu-toggle,
.portfolio-mobile-menu {
  display: none;
}

.story-panel {
  position: absolute;
  inset: 0;
}

.story-intro {
  display: flex;
  width: min(650px, 48vw);
  flex-direction: column;
  justify-content: center;
  padding: 105px 0 98px clamp(24px, 5vw, 96px);
}

.story-kicker,
.story-index,
.portfolio-location,
.portfolio-gesture,
.portfolio-socials,
.story-tags,
.client-strip {
  font-family: "PP Supply Mono", "Supply Mono", monospace;
}

.story-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 19px;
  color: var(--portfolio-ink);
  font: 500 9px/1 "PP Supply Mono", "Supply Mono", monospace;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  pointer-events: auto;
}

.story-linkedin::before {
  width: 26px;
  height: 1px;
  background: var(--portfolio-line);
  content: "";
  transition: width 260ms ease;
}

.story-linkedin:hover::before { width: 44px; }

.story-kicker {
  margin: 0 0 23px;
  color: var(--portfolio-muted);
  font-size: 9px;
  letter-spacing: 0.18em;
}

.story-intro h1,
.story-copy h2 {
  margin: 0;
  font-family: "STK Bureau Serif", "Newsreader", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.055em;
}

.story-intro h1 {
  font-size: clamp(58px, 7.5vw, 122px);
  line-height: 0.82;
}

.story-intro h1 em,
.story-copy h2 em {
  color: #d9ff8b;
  font-style: italic;
}

.portfolio-stage1 .story-copy h2 em,
.portfolio-stage4 .story-copy h2 em {
  color: #0d6b43;
}

.story-intro-foot {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 32px;
  color: var(--portfolio-muted);
  font-size: 10px;
  letter-spacing: 0.18em;
}

.story-intro-foot i {
  width: 19px;
  height: 1px;
  background: var(--portfolio-line);
}

.story-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 112px clamp(24px, 6vw, 110px) 92px;
}

.story-index {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  width: min(680px, 53vw);
  gap: 12px;
  margin-bottom: 22px;
  color: var(--portfolio-muted);
  font-size: 9px;
  letter-spacing: 0.15em;
}

.story-index span {
  color: var(--portfolio-ink);
}

.story-index i {
  width: 34px;
  height: 1px;
  background: var(--portfolio-line);
}

.story-index b {
  font-weight: 400;
}

.story-copy {
  position: relative;
  z-index: 3;
  width: min(720px, 57vw);
  animation: story-reveal 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.story-copy h2 {
  max-width: 900px;
  font-size: clamp(55px, 7.2vw, 116px);
  line-height: 0.84;
  text-wrap: balance;
}

.story-copy > p {
  max-width: 620px;
  margin: 25px 0 0;
  color: var(--portfolio-muted);
  font-size: clamp(13px, 1.1vw, 17px);
  line-height: 1.55;
}

.story-stage.is-wide .story-copy {
  width: min(980px, 75vw);
}

.story-stage.is-wide .story-copy h2 {
  font-size: clamp(52px, 6.2vw, 101px);
}

@keyframes story-reveal {
  from { opacity: 0; transform: translateY(24px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.portfolio-story-active .story-stage {
  animation: story-stage-in 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes story-stage-in {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.story-proof-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(620px, 100%);
  margin-top: 30px;
  border-top: 1px solid var(--portfolio-line);
}

.story-proof-row article {
  display: flex;
  min-height: 82px;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding-right: 17px;
  border-right: 1px solid var(--portfolio-line);
}

.story-proof-row article + article {
  padding-left: 17px;
}

.story-proof-row article:last-child {
  border-right: 0;
}

.story-proof-row b {
  font: 400 clamp(23px, 2.4vw, 38px)/1 "STK Bureau Serif", serif;
}

.story-proof-row span {
  color: var(--portfolio-muted);
  font-size: 9px;
  letter-spacing: 0.05em;
}

.story-tags,
.client-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 26px;
}

.story-tags span,
.client-strip span {
  padding: 8px 11px;
  border: 1px solid var(--portfolio-line);
  color: var(--portfolio-muted);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portrait-card {
  position: absolute;
  right: clamp(34px, 6vw, 112px);
  bottom: 105px;
  width: clamp(190px, 19vw, 310px);
  padding: 9px;
  color: #10271d;
  background: rgba(245, 242, 232, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transform: rotate(2deg);
  box-shadow: 0 18px 65px rgba(8, 20, 15, 0.24);
}

.portrait-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: saturate(0.7) contrast(1.03);
}

.portrait-card div {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 7px 7px;
}

.portrait-card b {
  font-size: 10px;
  letter-spacing: 0.12em;
}

.portrait-card span {
  color: rgba(16, 39, 29, 0.64);
  font: 400 8px/1.5 "PP Supply Mono", monospace;
}

.transformation-grid,
.services-grid {
  display: grid;
  width: min(940px, 100%);
  margin-top: 30px;
  border-top: 1px solid var(--portfolio-line);
  border-bottom: 1px solid var(--portfolio-line);
}

.transformation-grid {
  grid-template-columns: repeat(3, 1fr);
}

.transformation-grid article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 13px;
  min-height: 92px;
  align-content: center;
  padding: 14px 20px;
  border-right: 1px solid var(--portfolio-line);
}

.transformation-grid article:last-child {
  border-right: 0;
}

.transformation-grid b,
.services-grid article > b {
  grid-row: 1 / span 2;
  color: var(--portfolio-muted);
  font: 400 8px/1 "PP Supply Mono", monospace;
}

.transformation-grid span {
  font-size: 12px;
  letter-spacing: 0.12em;
}

.transformation-grid small {
  color: var(--portfolio-muted);
  font-size: 10px;
}

.services-grid {
  grid-template-columns: repeat(var(--service-columns, 4), 1fr);
}

.services-grid article {
  min-height: 106px;
  padding: 15px 16px;
  border-right: 1px solid var(--portfolio-line);
}

.services-grid article:last-child {
  border-right: 0;
}

.services-grid h3 {
  margin: 17px 0 8px;
  font-size: 13px;
  font-weight: 500;
}

.services-grid span {
  color: var(--portfolio-muted);
  font: 400 8px/1.45 "PP Supply Mono", monospace;
}

.client-strip {
  margin-top: 28px;
}

.story-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
  pointer-events: auto;
}

.story-actions a {
  color: var(--portfolio-ink);
  font-size: 11px;
  text-decoration: none;
}

.story-actions .story-primary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 210px;
  padding: 15px 17px;
  color: #0e2a1d;
  background: #d9ff8b;
  font-weight: 600;
}

.story-contact {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
  font: 400 7px/1 "PP Supply Mono", monospace;
  letter-spacing: 0.08em;
  pointer-events: auto;
}

.story-contact a { color: var(--portfolio-muted); text-decoration: none; }
.story-contact a:hover { color: var(--portfolio-ink); }
.story-contact i { width: 14px; height: 1px; background: var(--portfolio-line); }

.system-orbit,
.experience-reel,
.transformation-hand,
.capability-halo,
.impact-backdrop {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}

.system-orbit {
  top: 50%;
  right: clamp(22px, 7vw, 130px);
  width: min(35vw, 520px);
  aspect-ratio: 1;
  margin-top: min(-17.5vw, -260px);
  border: 1px solid rgba(13, 107, 67, 0.18);
  border-radius: 50%;
}

.orbit-ring {
  position: absolute;
  border: 1px solid rgba(13, 107, 67, 0.28);
  border-radius: 50%;
}

.orbit-ring-one { inset: 10%; animation: orbit-spin 18s linear infinite; }
.orbit-ring-two { inset: 24%; border-style: dashed; animation: orbit-spin 12s linear infinite reverse; }
.orbit-ring-three { inset: 38%; border-width: 2px; }

.orbit-ring-one::before,
.orbit-ring-two::before {
  position: absolute;
  top: 50%;
  left: -5px;
  width: 10px;
  height: 10px;
  background: #0d6b43;
  border-radius: 50%;
  content: "";
}

.orbit-core {
  position: absolute;
  inset: 40%;
  display: grid;
  place-content: center;
  color: #0d6b43;
  text-align: center;
  font: 600 11px/1 "PP Supply Mono", monospace;
  letter-spacing: 0.12em;
}

.orbit-core b { margin-top: 7px; font-size: 22px; letter-spacing: 0; }
.orbit-node { position: absolute; color: rgba(13, 107, 67, 0.72); font: 500 8px/1 "PP Supply Mono", monospace; letter-spacing: 0.12em; }
.orbit-node-one { top: 16%; left: 24%; }
.orbit-node-two { right: 12%; bottom: 33%; }
.orbit-node-three { bottom: 12%; left: 31%; }

@keyframes orbit-spin { to { transform: rotate(360deg); } }

.experience-reel {
  inset: 91px 0 64px 46%;
  overflow: hidden;
}

.experience-reel::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, #123629 0%, transparent 18%, transparent 84%, #123629 100%);
  content: "";
}

.experience-reel-track {
  display: flex;
  align-items: center;
  gap: 18px;
  width: max-content;
  height: 100%;
  transition: transform 90ms linear;
  will-change: transform;
}

.reel-card {
  position: relative;
  width: clamp(210px, 24vw, 370px);
  height: min(58vh, 520px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(245, 242, 232, 0.2);
}

.reel-card:nth-child(2) { transform: translateY(7vh); }
.reel-card:nth-child(3) { transform: translateY(-5vh); }
.reel-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.65) contrast(1.05); }
.reel-impact img { object-position: 65% center; }
.reel-card figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 15px; color: #f5f2e8; background: linear-gradient(transparent, rgba(3, 16, 10, 0.88)); font: 500 8px/1 "PP Supply Mono", monospace; letter-spacing: 0.12em; }

.experience-field {
  --experience-progress: 0;
  position: absolute;
  inset: 91px 3vw 64px 49%;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(190px, .72fr) minmax(290px, 1.28fr);
  gap: clamp(10px, 1.4vw, 24px);
  padding: clamp(14px, 2vw, 30px);
  overflow: hidden;
  background:
    linear-gradient(rgba(217, 255, 139, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 255, 139, .055) 1px, transparent 1px),
    linear-gradient(145deg, rgba(217, 255, 139, .07), transparent 42%),
    #0a281e;
  background-size: 42px 42px, 42px 42px, auto, auto;
  border-left: 1px solid rgba(217, 255, 139, .18);
  pointer-events: none;
  contain: layout paint style;
}

.experience-field::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(217, 255, 139, .08) 50%, transparent 58%);
  content: "";
  transform: translateX(calc(-110% + var(--experience-progress) * 220%));
}

.experience-portrait {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(245, 242, 232, .18);
  transform: translateY(calc((.5 - var(--experience-progress)) * 22px));
}

.experience-portrait::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 46%, rgba(3, 16, 10, .9)); content: ""; }
.experience-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 52% center; filter: grayscale(.14) saturate(.78) contrast(1.04); }
.experience-portrait figcaption { position: absolute; right: 15px; bottom: 15px; left: 15px; z-index: 2; display: grid; gap: 6px; color: #f5f2e8; }
.experience-portrait figcaption span { font: 500 9px/1 "PP Supply Mono", monospace; letter-spacing: .13em; }
.experience-portrait figcaption b { color: rgba(217, 255, 139, .66); font: 500 7px/1.3 "PP Supply Mono", monospace; letter-spacing: .09em; }

.experience-system { position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(92px, .7fr) minmax(150px, 1fr) auto; gap: clamp(11px, 2vh, 20px); min-width: 0; padding: clamp(12px, 1.7vw, 24px); background: rgba(3, 18, 12, .58); border: 1px solid rgba(217, 255, 139, .2); }
.experience-system header { display: flex; justify-content: space-between; gap: 12px; color: rgba(245, 242, 232, .52); font: 500 8px/1 "PP Supply Mono", monospace; letter-spacing: .12em; }
.experience-system header b { color: #d9ff8b; font-weight: 500; }
.experience-timeline { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 3%; }
.experience-timeline::before { position: absolute; right: 4%; left: 4%; height: 1px; background: rgba(217, 255, 139, .25); content: ""; transform: scaleX(calc(.25 + var(--experience-progress) * .75)); transform-origin: left; }
.experience-timeline > i { position: absolute; top: 50%; width: 6px; height: 6px; background: #d9ff8b; transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 18px rgba(217, 255, 139, .32); }
.experience-timeline > i:nth-child(1) { left: 4%; }
.experience-timeline > i:nth-child(2) { left: 35%; }
.experience-timeline > i:nth-child(3) { left: 66%; }
.experience-timeline > i:nth-child(4) { left: 96%; }
.experience-year { position: relative; display: grid; gap: 6px; padding-top: 37px; color: #f5f2e8; font: 500 9px/1 "PP Supply Mono", monospace; }
.experience-year small { color: rgba(217, 255, 139, .58); font-size: 6px; letter-spacing: .08em; }
.experience-matrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(217, 255, 139, .16); border-left: 1px solid rgba(217, 255, 139, .16); }
.experience-matrix article { display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 6px 10px; min-width: 0; padding: 12px; border-right: 1px solid rgba(217, 255, 139, .16); border-bottom: 1px solid rgba(217, 255, 139, .16); transform: translateY(calc((1 - var(--experience-progress)) * 9px)); }
.experience-matrix b { grid-row: 1 / 3; color: rgba(217, 255, 139, .46); font: 500 8px/1 "PP Supply Mono", monospace; }
.experience-matrix span { color: #f5f2e8; font: 600 10px/1 "Supply Sans", sans-serif; letter-spacing: .08em; }
.experience-matrix small { color: rgba(245, 242, 232, .44); font: 500 6px/1 "PP Supply Mono", monospace; letter-spacing: .1em; }
.experience-system footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: rgba(217, 255, 139, .62); font: 500 7px/1 "PP Supply Mono", monospace; letter-spacing: .1em; }
.experience-system footer i { flex: 1; height: 1px; background: rgba(217, 255, 139, .18); }

.transformation-hand {
  inset: 0 0 0 48%;
  overflow: hidden;
}

.formula-field {
  position: absolute;
  inset: -7%;
  background: linear-gradient(90deg, #071b13 0%, transparent 25%), url("../site/textures/stage3_background1.webp") center/cover;
  opacity: 0.68;
  will-change: transform;
}

.transformation-hand img {
  position: absolute;
  right: 8%;
  bottom: -10%;
  width: min(48vw, 620px);
  mix-blend-mode: screen;
  opacity: 0.82;
  will-change: transform;
}

.transformation-hand > span {
  position: absolute;
  padding: 7px 10px;
  color: #d9ff8b;
  border: 1px solid rgba(217, 255, 139, 0.4);
  font: 500 8px/1 "PP Supply Mono", monospace;
  letter-spacing: 0.12em;
  animation: tag-float 4s ease-in-out infinite;
}

.transformation-hand > span:nth-of-type(1) { top: 24%; right: 15%; }
.transformation-hand > span:nth-of-type(2) { top: 47%; left: 17%; animation-delay: -1.2s; }
.transformation-hand > span:nth-of-type(3) { right: 30%; bottom: 16%; animation-delay: -2.4s; }
@keyframes tag-float { 50% { transform: translateY(-12px); } }

.capability-halo {
  top: 50%;
  right: 3%;
  width: min(31vw, 470px);
  aspect-ratio: 1;
  margin-top: min(-15.5vw, -235px);
}

.capability-halo i {
  position: absolute;
  border: 1px solid rgba(13, 107, 67, 0.28);
  border-radius: 50%;
}

.capability-halo i:nth-child(1) { inset: 0; }
.capability-halo i:nth-child(2) { inset: 18%; border-style: dashed; animation: orbit-spin 16s linear infinite; }
.capability-halo i:nth-child(3) { inset: 36%; background: rgba(13, 107, 67, 0.08); }
.capability-halo b { position: absolute; color: #0d6b43; font: 500 8px/1 "PP Supply Mono", monospace; letter-spacing: 0.1em; }
.capability-halo b:nth-of-type(1) { top: 8%; left: 45%; }
.capability-halo b:nth-of-type(2) { right: -4%; bottom: 35%; }
.capability-halo b:nth-of-type(3) { bottom: 8%; left: 22%; }

.impact-backdrop {
  inset: 0;
  overflow: hidden;
  background: radial-gradient(circle at 78% 52%, rgba(70, 142, 73, 0.18), transparent 34%);
}

.impact-backdrop::after {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(90deg, rgba(3, 18, 11, 0.99) 0%, rgba(3, 18, 11, 0.94) 42%, rgba(3, 18, 11, 0.12) 76%, rgba(3, 18, 11, 0.4) 100%);
  content: "";
}

.impact-aurora {
  position: absolute;
  inset: -30%;
  background:
    conic-gradient(from 40deg at 76% 50%, transparent, rgba(217, 255, 139, 0.16), transparent 22%, rgba(34, 116, 69, 0.22), transparent 45%),
    radial-gradient(ellipse at 72% 52%, rgba(217, 255, 139, 0.18), rgba(14, 68, 42, 0.1) 26%, transparent 58%);
  filter: blur(22px);
  animation: impact-aurora-shift 11s ease-in-out infinite alternate;
}

@keyframes impact-aurora-shift {
  to { transform: translate3d(-5%, 3%, 0) rotate(18deg) scale(1.08); }
}

.impact-tunnel {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -4%;
  width: min(60vw, 820px);
  aspect-ratio: 1;
  margin-top: min(-30vw, -410px);
  border-radius: 50%;
  will-change: transform;
}

.impact-tunnel i {
  position: absolute;
  border: 1px solid rgba(217, 255, 139, 0.2);
  border-radius: 43% 57% 48% 52% / 57% 42% 58% 43%;
  animation: impact-ring-live 8s ease-in-out infinite;
}

.impact-tunnel i:nth-child(1) { inset: 0; animation-delay: -7s; }
.impact-tunnel i:nth-child(2) { inset: 8%; animation-delay: -6s; animation-direction: reverse; }
.impact-tunnel i:nth-child(3) { inset: 16%; animation-delay: -5s; }
.impact-tunnel i:nth-child(4) { inset: 24%; animation-delay: -4s; animation-direction: reverse; }
.impact-tunnel i:nth-child(5) { inset: 32%; animation-delay: -3s; }
.impact-tunnel i:nth-child(6) { inset: 40%; animation-delay: -2s; animation-direction: reverse; }
.impact-tunnel i:nth-child(7) { inset: 47%; background: rgba(217, 255, 139, 0.055); box-shadow: 0 0 80px rgba(217, 255, 139, 0.12); animation-delay: -1s; }

@keyframes impact-ring-live {
  50% { border-radius: 58% 42% 61% 39% / 38% 60% 40% 62%; transform: rotate(18deg) scale(1.035); border-color: rgba(217, 255, 139, 0.36); }
}

.impact-pulse {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 20%;
  width: 100px;
  height: 100px;
  transform: translate(50%, -50%);
}

.impact-pulse i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(217, 255, 139, 0.7);
  border-radius: 50%;
  opacity: 0;
  animation: impact-pulse-out 3.3s ease-out infinite;
}

.impact-pulse i:nth-child(2) { animation-delay: 1.1s; }
.impact-pulse i:nth-child(3) { animation-delay: 2.2s; }
@keyframes impact-pulse-out { 15% { opacity: 0.7; } 100% { opacity: 0; transform: scale(6.5); } }

.impact-counter {
  position: absolute;
  z-index: 5;
  top: 50%;
  right: 8%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(34vw, 470px);
  color: #d9ff8b;
  transform: translateY(-50%);
  opacity: calc(0.35 + var(--impact-progress) * 0.55);
}

.impact-counter span {
  display: flex;
  min-height: 94px;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border-right: 1px solid rgba(217, 255, 139, 0.24);
  animation: impact-counter-float 5s ease-in-out infinite;
}

.impact-counter span:nth-child(2) { animation-delay: -1.7s; }
.impact-counter span:nth-child(3) { border-right: 0; animation-delay: -3.4s; }
.impact-counter b { font: 400 clamp(32px, 4.5vw, 70px)/.8 "STK Bureau Serif", serif; }
.impact-counter small { font: 400 7px/1 "PP Supply Mono", monospace; letter-spacing: 0.13em; }
@keyframes impact-counter-float { 50% { transform: translateY(-12px); } }

.impact-company-orbit {
  position: absolute;
  z-index: 5;
  top: 50%;
  right: 3%;
  width: min(45vw, 650px);
  aspect-ratio: 1;
  margin-top: min(-22.5vw, -325px);
  border: 1px dashed rgba(217, 255, 139, 0.2);
  border-radius: 50%;
  animation: orbit-spin 30s linear infinite;
}

.impact-company-orbit span {
  --angle: calc(var(--company-index) * 60deg);
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 6px 9px;
  color: rgba(217, 255, 139, 0.78);
  background: rgba(3, 18, 11, 0.75);
  border: 1px solid rgba(217, 255, 139, 0.24);
  font: 400 6px/1 "PP Supply Mono", monospace;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transform: rotate(var(--angle)) translateX(min(22.5vw, 325px)) rotate(calc(var(--angle) * -1));
}

.portfolio-hold-gate {
  --hold-progress: 0;
  position: absolute;
  top: 50%;
  right: clamp(28px, 10vw, 190px);
  z-index: 20;
  display: grid;
  width: 128px;
  height: 128px;
  place-content: center;
  justify-items: center;
  gap: 7px;
  padding: 0;
  color: #f5f2e8;
  background: rgba(5, 28, 18, 0.88);
  border: 1px solid rgba(217, 255, 139, 0.42);
  border-radius: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  box-shadow: 0 0 0 14px rgba(217, 255, 139, 0.035), 0 20px 70px rgba(0, 0, 0, 0.28);
  animation: hold-gate-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.portfolio-stage1 .portfolio-hold-gate { right: auto; left: clamp(690px, 63vw, 930px); color: #10271d; background: rgba(230, 246, 233, 0.94); border-color: rgba(13, 107, 67, 0.45); }
.portfolio-hold-gate::before { position: absolute; inset: -8px; border: 1px solid currentColor; border-radius: 50%; opacity: 0.18; content: ""; animation: hold-pulse 2s ease-out infinite; }
.portfolio-hold-gate > span { position: absolute; inset: -6px; border: 4px solid transparent; border-top-color: #d9ff8b; border-right-color: #d9ff8b; border-radius: 50%; transform: rotate(calc(-45deg + var(--hold-progress) * 360deg)); transition: transform 60ms linear; }
.portfolio-hold-gate b { font: 600 15px/.9 "Supply Sans", sans-serif; letter-spacing: 0.04em; white-space: nowrap; }
.portfolio-hold-gate small { font: 400 6px/1 "PP Supply Mono", monospace; letter-spacing: 0.08em; opacity: 0.7; }
.portfolio-hold-gate em { font: 400 6px/1 "PP Supply Mono", monospace; font-style: normal; letter-spacing: 0.08em; opacity: 0.52; }
.portfolio-hold-gate,
.portfolio-hold-gate * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.portfolio-hold-gate { touch-action: none; -webkit-tap-highlight-color: transparent; }
@keyframes hold-gate-in { from { opacity: 0; transform: translateY(-50%) scale(0.72); } }
@keyframes hold-pulse { to { opacity: 0; transform: scale(1.35); } }

.portfolio-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 64px;
  padding: 0 clamp(22px, 3vw, 54px);
  border-top: 1px solid var(--portfolio-line);
  color: var(--portfolio-muted);
  font-size: 8px;
  letter-spacing: 0.13em;
}

.portfolio-location,
.portfolio-gesture,
.portfolio-socials {
  display: flex;
  align-items: center;
}

.portfolio-location {
  gap: 8px;
}

.portfolio-location > span {
  width: 6px;
  height: 6px;
  background: #d9ff8b;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(217, 255, 139, 0.13);
}

.portfolio-gesture {
  gap: 12px;
  margin: 0;
  padding: 9px 12px;
  color: var(--portfolio-ink);
  background: transparent;
  border: 1px solid var(--portfolio-line);
  pointer-events: auto;
  cursor: pointer;
}

.portfolio-gesture-hint {
  pointer-events: none;
  cursor: default;
}

.portfolio-gesture i {
  font-style: normal;
  transform: rotate(45deg);
}

.portfolio-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--portfolio-ink);
  font: 400 8px/1 "PP Supply Mono", monospace;
}

.portfolio-progress > i {
  width: 110px;
  height: 1px;
  overflow: hidden;
  background: var(--portfolio-line);
}

.portfolio-progress > i > b {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--portfolio-ink);
  transform-origin: left;
}

.portfolio-socials {
  justify-content: flex-end;
  gap: 15px;
  pointer-events: auto;
}

.portfolio-socials a {
  color: inherit;
  text-decoration: none;
}

.portfolio-sound {
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.portfolio-sound::before {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  background: #d9ff8b;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(217, 255, 139, 0.12);
  content: "";
}

.portfolio-sound[aria-pressed="true"]::before { background: currentColor; box-shadow: none; opacity: 0.4; }

.portfolio-socials a:hover {
  color: var(--portfolio-ink);
}

/* Remove the original education brand's copy while retaining its scene engine. */

#pre-canvas-99,
#ui-container .hud-status,
#ui-container .scroll-ruler,
#ui-container .mobile-timeline,
.mtl-menu,
.hud-menu,
.hud-waitlist-btn,
.eg-track,
.jf-form,
.jf-content,
.sp-poster-tilt,
.s5-bottom-cta,
.s5-controls {
  display: none !important;
}

#ui-container .hud-left-group {
  top: 88px !important;
  left: clamp(22px, 3vw, 54px) !important;
}

#ui-container .next-stage-label {
  display: block !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.36);
}

.portfolio-ui ~ #ui-container .mp-join-btn,
[data-join] {
  font-family: "Supply Sans", sans-serif !important;
}

@media (max-width: 980px) {
  .portfolio-nav {
    display: none;
  }

  .portfolio-menu-toggle {
    display: grid;
    width: 38px;
    height: 38px;
    place-content: center;
    gap: 6px;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 1px solid var(--portfolio-line);
    pointer-events: auto;
  }

  .portfolio-ui .portfolio-menu-toggle {
    color: var(--portfolio-ink) !important;
    background: transparent !important;
    border: 1px solid var(--portfolio-line) !important;
    box-shadow: none !important;
  }

  .portfolio-menu-toggle i {
    width: 15px;
    height: 1px;
    background: currentColor;
  }

  .portfolio-mobile-menu {
    position: absolute;
    top: 78px;
    right: 18px;
    z-index: 5;
    display: grid;
    min-width: 210px;
    padding: 8px;
    color: #f5f2e8;
    background: rgba(8, 27, 19, 0.94);
    border: 1px solid rgba(245, 242, 232, 0.2);
    pointer-events: auto;
  }

  .portfolio-mobile-menu button,
  .portfolio-mobile-menu a {
    display: flex;
    gap: 12px;
    padding: 12px;
    color: inherit;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(245, 242, 232, 0.12);
    font: 500 10px/1 "Supply Sans", sans-serif;
    text-align: left;
    text-decoration: none;
  }

  .portfolio-ui .portfolio-mobile-menu button {
    color: #f5f2e8 !important;
    -webkit-text-fill-color: #f5f2e8;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(245, 242, 232, 0.12) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .portfolio-ui .portfolio-mobile-menu button:hover,
  .portfolio-ui .portfolio-mobile-menu button:focus-visible {
    color: #d9ff8b !important;
    -webkit-text-fill-color: #d9ff8b;
    background: rgba(217, 255, 139, 0.08) !important;
  }

  .portfolio-mobile-menu span {
    color: rgba(245, 242, 232, 0.48);
    font-family: "PP Supply Mono", monospace;
  }

  .story-copy,
  .story-stage.is-wide .story-copy,
  .story-index {
    width: min(690px, 78vw);
  }

  .technical-schematic {
    right: 1vw;
    width: 46vw;
    opacity: 0.58;
  }

  .technical-telemetry {
    width: 34vw;
  }
}

@media (max-width: 767px) {
  .portfolio-header {
    padding: 15px 17px;
  }

  .portfolio-brand svg {
    width: 30px;
    height: 30px;
  }

  .portfolio-brand b {
    font-size: 9px;
  }

  .portfolio-brand small {
    font-size: 6px;
  }

  .story-intro,
  .story-stage {
    width: 100%;
    justify-content: flex-start;
    padding: 24vh 18px 76px;
  }

  .story-intro {
    padding-top: 21vh;
  }

  .story-kicker {
    max-width: 270px;
    margin-bottom: 18px;
    font-size: 7px;
    line-height: 1.5;
  }

  .story-intro h1 {
    font-size: clamp(52px, 18vw, 78px);
    line-height: 0.86;
  }

  .story-intro-foot {
    gap: 8px;
    margin-top: 21px;
    font-size: 7px;
  }

  .story-intro-foot i {
    width: 10px;
  }

  .story-index,
  .story-copy,
  .story-stage.is-wide .story-copy {
    width: 100%;
  }

  .story-index {
    margin-bottom: 15px;
    font-size: 7px;
  }

  .story-copy h2,
  .story-stage.is-wide .story-copy h2 {
    font-size: clamp(43px, 14vw, 68px);
    line-height: 0.88;
  }

  .story-copy > p {
    max-width: 92%;
    margin-top: 17px;
    font-size: 11px;
    line-height: 1.45;
  }

  .story-proof-row {
    margin-top: 18px;
  }

  .story-proof-row article {
    min-height: 63px;
    padding-right: 7px;
  }

  .story-proof-row article + article {
    padding-left: 7px;
  }

  .story-proof-row b {
    font-size: 20px;
  }

  .story-proof-row span {
    font-size: 6px;
    line-height: 1.25;
  }

  .story-tags,
  .client-strip {
    margin-top: 16px;
  }

  .story-tags span,
  .client-strip span {
    padding: 6px 7px;
    font-size: 6px;
  }

  .portfolio-stage2 .story-copy {
    width: 100%;
  }

  .technical-field {
    inset: 61px 0 52px;
  }

  .technical-grid {
    inset: -8% -38%;
    background-size: 72px 72px, 72px 72px, 18px 18px, 18px 18px;
    opacity: 0.34;
    transform: perspective(680px) rotateX(62deg) rotateZ(-11deg) translate3d(var(--field-shift), 12%, 0);
  }

  .technical-scan {
    opacity: 0.25;
  }

  .technical-contours {
    top: 68%;
    right: -44vw;
    width: 118vw;
    opacity: 0.66;
  }

  .technical-schematic {
    top: 47%;
    right: -9%;
    width: 72vw;
    height: 38vh;
    opacity: 0.48;
  }

  .schematic-node small {
    font-size: 6px;
  }

  .technical-telemetry {
    right: 18px;
    bottom: 3%;
    width: 54vw;
    opacity: 0.4;
  }

  .technical-coordinates {
    top: 4%;
    right: 18px;
  }

  .system-orbit {
    top: 66%;
    right: -20%;
    width: 90vw;
    margin-top: -45vw;
    opacity: 0.34;
  }

  .experience-reel {
    inset: 47% -18% 52px 18%;
    opacity: 0.38;
  }

  .experience-reel::before {
    background: linear-gradient(180deg, #123629 0%, transparent 25%, transparent 80%, #123629 100%);
  }

  .reel-card {
    width: 45vw;
    height: 34vh;
  }

  .transformation-hand {
    inset: 43% -18% 52px 10%;
    opacity: 0.48;
  }

  .transformation-hand img {
    right: 0;
    width: 86vw;
  }

  .capability-halo {
    top: 67%;
    right: -24%;
    width: 92vw;
    margin-top: -46vw;
    opacity: 0.28;
  }

  .impact-backdrop::after {
    background: linear-gradient(180deg, rgba(3, 18, 11, 0.95) 0%, rgba(3, 18, 11, 0.86) 54%, rgba(3, 18, 11, 0.48) 100%);
  }

  .impact-tunnel {
    top: 72%;
    right: -52%;
    width: 132vw;
    margin-top: -66vw;
    opacity: 0.78;
  }

  .impact-counter {
    top: 72%;
    right: 8%;
    width: 76vw;
    opacity: 0.38;
  }

  .impact-counter span { min-height: 62px; padding: 0 8px; }
  .impact-counter b { font-size: 34px; }
  .impact-counter small { font-size: 5px; }

  .impact-company-orbit {
    top: 72%;
    right: -28%;
    width: 106vw;
    margin-top: -53vw;
    opacity: 0.46;
  }

  .impact-company-orbit span {
    transform: rotate(var(--angle)) translateX(53vw) rotate(calc(var(--angle) * -1));
  }

  .impact-pulse { top: 72%; right: 28%; }

  .portfolio-stage5 .story-copy > p {
    max-width: 100%;
  }

  .portfolio-hold-gate {
    top: auto;
    right: 22px;
    bottom: 72px;
    width: 104px;
    height: 104px;
    transform: none;
  }

  .portfolio-stage1 .portfolio-hold-gate {
    right: 68px;
    left: auto;
  }

  .story-linkedin {
    gap: 8px;
    margin-top: 13px;
    font-size: 6px;
  }

  .story-contact {
    flex-wrap: wrap;
    max-width: 290px;
    margin-top: 11px;
    font-size: 6px;
  }

  @keyframes hold-gate-in {
    from { opacity: 0; transform: scale(0.72); }
  }

  .transformation-grid,
  .services-grid {
    grid-template-columns: 1fr;
    margin-top: 18px;
  }

  .transformation-grid article {
    min-height: 52px;
    padding: 8px 11px;
    border-right: 0;
    border-bottom: 1px solid var(--portfolio-line);
  }

  .transformation-grid article:last-child {
    border-bottom: 0;
  }

  .transformation-grid span {
    font-size: 9px;
  }

  .transformation-grid small {
    font-size: 7px;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-grid article {
    min-height: 69px;
    padding: 9px;
    border-bottom: 1px solid var(--portfolio-line);
  }

  .services-grid article:nth-child(2) {
    border-right: 0;
  }

  .services-grid article:nth-child(3),
  .services-grid article:nth-child(4) {
    border-bottom: 0;
  }

  .services-grid h3 {
    margin: 9px 0 5px;
    font-size: 9px;
  }

  .services-grid span {
    font-size: 6px;
  }

  .story-actions {
    gap: 14px;
    margin-top: 16px;
  }

  .story-actions .story-primary {
    min-width: 170px;
    padding: 12px 13px;
  }

  .story-actions a {
    font-size: 8px;
  }

  .portfolio-footer {
    min-height: 52px;
    grid-template-columns: 1fr auto;
    padding: 0 17px;
  }

  .portfolio-location {
    display: none;
  }

  .portfolio-gesture,
  .portfolio-progress {
    grid-column: 1;
    justify-self: start;
  }

  .portfolio-progress > i {
    width: 72px;
  }

  .portfolio-socials {
    grid-column: 2;
  }

  #ui-container .hud-left-group {
    top: 78px !important;
    left: 17px !important;
  }
}

/* References — a separate, filterable field record */

html:has(.references-page),
body:has(.references-page) {
  height: auto;
  min-height: 100%;
  overflow: auto;
  overscroll-behavior: auto;
  background: #e5efdf;
}

.references-page,
.references-page * { box-sizing: border-box; }

.references-page {
  --references-ink: #0a2a1d;
  --references-accent: #d9ff8b;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: var(--references-ink);
  background: #e5efdf;
  font-family: "Supply Sans", "Inter", sans-serif;
}

.references-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(13, 107, 67, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 107, 67, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.references-field::before {
  position: absolute;
  top: -30vw;
  right: -20vw;
  width: 80vw;
  aspect-ratio: 1;
  border: 1px solid rgba(13, 107, 67, 0.18);
  border-radius: 50%;
  box-shadow: inset 0 0 0 9vw rgba(13, 107, 67, 0.018), inset 0 0 0 18vw rgba(13, 107, 67, 0.014);
  content: "";
  animation: orbit-spin 42s linear infinite;
}

.references-field i {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #0d6b43;
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(13, 107, 67, 0.08);
  animation: reference-node 6s ease-in-out infinite;
}

.references-field i:nth-child(1) { top: 17%; left: 9%; }
.references-field i:nth-child(2) { top: 34%; right: 12%; animation-delay: -1.5s; }
.references-field i:nth-child(3) { top: 63%; left: 42%; animation-delay: -3s; }
.references-field i:nth-child(4) { top: 78%; right: 24%; animation-delay: -4.5s; }
@keyframes reference-node { 50% { opacity: 0.25; transform: scale(0.55); } }

.references-header {
  position: relative;
  z-index: 5;
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(22px, 5vw, 76px);
  border-bottom: 1px solid rgba(10, 42, 29, 0.18);
}

.references-header a {
  color: inherit;
  font: 600 9px/1 "PP Supply Mono", monospace;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.references-brand { display: flex; align-items: center; gap: 18px; }
.references-brand span { color: rgba(10, 42, 29, 0.5); font-size: 7px; font-weight: 400; }
.references-header > a:last-child { padding: 13px 16px; color: #e9f6e4; background: #0a2a1d; }

.references-hero {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: min(750px, calc(100vh - 78px));
  flex-direction: column;
  justify-content: center;
  padding: 80px clamp(22px, 7vw, 110px);
}

.references-kicker {
  display: flex;
  align-items: center;
  gap: 13px;
  color: rgba(10, 42, 29, 0.62);
  font: 400 8px/1 "PP Supply Mono", monospace;
  letter-spacing: 0.16em;
}

.references-kicker span { color: #0d6b43; }
.references-kicker i { width: 38px; height: 1px; background: rgba(10, 42, 29, 0.24); }

.references-hero h1,
.references-cta h2 {
  margin: 31px 0 0;
  font: 400 clamp(72px, 10vw, 150px)/0.79 "STK Bureau Serif", "Newsreader", serif;
  letter-spacing: -0.06em;
}

.references-hero h1 em,
.references-cta h2 em { color: #0d6b43; font-style: italic; }
.references-hero > p { max-width: 590px; margin: 32px 0 0; color: rgba(10, 42, 29, 0.66); font-size: 15px; line-height: 1.55; }

.references-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(850px, 76vw);
  margin-top: 52px;
  border-top: 1px solid rgba(10, 42, 29, 0.22);
  border-bottom: 1px solid rgba(10, 42, 29, 0.22);
}

.references-stats span { display: flex; min-height: 105px; flex-direction: column; justify-content: center; gap: 10px; padding: 0 18px; border-right: 1px solid rgba(10, 42, 29, 0.18); }
.references-stats span:first-child { padding-left: 0; }
.references-stats span:last-child { border-right: 0; }
.references-stats b { font: 400 38px/1 "STK Bureau Serif", serif; }
.references-stats small { color: rgba(10, 42, 29, 0.55); font: 400 7px/1 "PP Supply Mono", monospace; letter-spacing: 0.13em; }

.references-catalog {
  position: relative;
  z-index: 2;
  padding: 90px clamp(22px, 5vw, 76px) 120px;
  color: #edf4ea;
  background: #09251a;
}

.references-catalog::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(217, 255, 139, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 255, 139, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  content: "";
  pointer-events: none;
}

.references-filter {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 46px;
  border-bottom: 1px solid rgba(237, 244, 234, 0.17);
}

.references-filter button {
  padding: 13px 20px;
  color: rgba(237, 244, 234, 0.55);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font: 500 8px/1 "PP Supply Mono", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.references-filter button:hover,
.references-filter button.active { color: var(--references-accent); border-bottom-color: var(--references-accent); }

.references-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(237, 244, 234, 0.16);
  border-left: 1px solid rgba(237, 244, 234, 0.16);
}

.references-grid article {
  position: relative;
  display: flex;
  min-height: 255px;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px;
  overflow: hidden;
  border-right: 1px solid rgba(237, 244, 234, 0.16);
  border-bottom: 1px solid rgba(237, 244, 234, 0.16);
  animation: reference-card-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--reference-index) * 28ms);
}

.references-grid article::after {
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(217, 255, 139, 0.16);
  border-radius: 50%;
  content: "";
  transition: transform 500ms ease, background 500ms ease;
}

.references-grid article:hover::after { background: rgba(217, 255, 139, 0.055); transform: scale(1.65); }
.references-grid article > div { display: flex; align-items: center; gap: 9px; color: rgba(237, 244, 234, 0.45); font: 400 7px/1 "PP Supply Mono", monospace; letter-spacing: 0.1em; }
.references-grid article > div i { width: 24px; height: 1px; background: rgba(237, 244, 234, 0.2); }
.references-grid h2 { max-width: 310px; margin: auto 0 10px; font: 400 clamp(28px, 3vw, 46px)/0.95 "STK Bureau Serif", serif; letter-spacing: -0.035em; }
.references-grid p { margin: 0 0 28px; color: var(--references-accent); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
.references-grid footer { display: flex; justify-content: space-between; color: rgba(237, 244, 234, 0.48); font: 400 7px/1 "PP Supply Mono", monospace; letter-spacing: 0.09em; }
@keyframes reference-card-in { from { opacity: 0; transform: translateY(18px); } }

.references-cta {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 690px;
  flex-direction: column;
  justify-content: center;
  padding: 100px clamp(22px, 7vw, 110px);
  color: #edf4ea;
  background: radial-gradient(circle at 82% 52%, rgba(217, 255, 139, 0.16), transparent 28%), #06170f;
}

.references-cta > span { color: rgba(237, 244, 234, 0.52); font: 400 8px/1 "PP Supply Mono", monospace; letter-spacing: 0.14em; }
.references-cta h2 { max-width: 980px; font-size: clamp(65px, 8.8vw, 130px); }
.references-cta h2 em { color: var(--references-accent); }
.references-cta > a { display: flex; width: min(360px, 100%); align-items: center; justify-content: space-between; margin-top: 52px; padding: 19px 21px; color: #0a2a1d; background: var(--references-accent); font-size: 12px; font-weight: 600; text-decoration: none; }

@media (max-width: 767px) {
  .references-header { min-height: 64px; padding: 0 17px; }
  .references-brand { display: grid; gap: 5px; font-size: 7px !important; }
  .references-brand span { font-size: 5px; }
  .references-header > a:last-child { padding: 11px 9px; font-size: 6px; }
  .references-hero { min-height: 680px; padding: 86px 18px 60px; }
  .references-kicker { gap: 7px; font-size: 6px; }
  .references-kicker i { width: 15px; }
  .references-hero h1 { margin-top: 24px; font-size: clamp(58px, 18vw, 82px); line-height: 0.84; }
  .references-hero > p { margin-top: 25px; font-size: 12px; }
  .references-stats { grid-template-columns: repeat(2, 1fr); width: 100%; margin-top: 36px; }
  .references-stats span { min-height: 72px; padding: 0 10px; border-bottom: 1px solid rgba(10, 42, 29, 0.18); }
  .references-stats span:nth-child(2) { border-right: 0; }
  .references-stats span:nth-child(3), .references-stats span:nth-child(4) { border-bottom: 0; }
  .references-stats b { font-size: 29px; }
  .references-stats small { font-size: 5px; }
  .references-catalog { padding: 64px 18px 80px; }
  .references-filter { gap: 2px; margin-bottom: 28px; }
  .references-filter button { padding: 10px 9px; font-size: 6px; }
  .references-grid { grid-template-columns: 1fr; }
  .references-grid article { min-height: 198px; padding: 20px; }
  .references-grid h2 { font-size: 36px; }
  .references-cta { min-height: 570px; padding: 80px 18px; }
  .references-cta h2 { margin-top: 25px; font-size: clamp(52px, 16vw, 76px); line-height: 0.86; }
  .references-cta > a { margin-top: 38px; }
}

@media (max-height: 690px) and (min-width: 768px) {
  .story-stage {
    padding-top: 96px;
  }

  .story-copy h2,
  .story-stage.is-wide .story-copy h2 {
    font-size: clamp(48px, 6vw, 83px);
  }

  .story-copy > p {
    margin-top: 16px;
  }

  .story-proof-row,
  .transformation-grid,
  .services-grid,
  .client-strip {
    margin-top: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-copy,
  .portfolio-story-active .story-stage,
  .portfolio-circle-transition .story-intro,
  .portfolio-circle-transition .portfolio-gesture-hint {
    animation-duration: 1ms;
  }

  .orbit-ring-one,
  .orbit-ring-two,
  .transformation-hand > span,
  .capability-halo i:nth-child(2),
  .portfolio-hold-gate::before,
  .technical-grid::after,
  .technical-contours i,
  .schematic-node > i::after,
  .schematic-link::after,
  .technical-pulses i,
  .impact-aurora,
  .impact-tunnel i,
  .impact-pulse i,
  .impact-counter span,
  .impact-company-orbit,
  .references-field::before,
  .references-field i,
  .references-grid article {
    animation: none;
  }
}

/* 2026 narrative expansion: readable type, live systems, hand gate and closing ritual */

.portfolio-story-active.portfolio-stage6 { background: #102d22; }
.portfolio-story-active.portfolio-stage7 {
  --portfolio-ink: #302b36;
  --portfolio-muted: rgba(48, 43, 54, 0.64);
  --portfolio-line: rgba(48, 43, 54, 0.2);
  background: #e9e1dc;
}

.portfolio-stage7 .technical-field {
  --tech-accent: #a2635e;
  --tech-line: rgba(162, 99, 94, 0.14);
  --tech-faint: rgba(162, 99, 94, 0.05);
}
.portfolio-stage7 .portfolio-nav > a { color: #f5efeb; background: #3b3541; }
.portfolio-stage7 .portfolio-sound::before { background: #a2635e; box-shadow: 0 0 0 3px rgba(162, 99, 94, .13); }

.portfolio-brand b { font-size: 12px; }
.portfolio-brand > span { gap: 0; }
.portfolio-nav { gap: clamp(9px, 1.15vw, 19px); }
.portfolio-nav button,
.portfolio-nav a { font-size: 11px; }
.portfolio-nav button span { font-size: 8px; }
.story-kicker,
.story-index { font-size: 11px; }
.story-copy > p { max-width: 700px; font-size: clamp(15px, 1.25vw, 19px); line-height: 1.62; }
.story-tags span,
.client-strip span { font-size: 10px; }
.story-linkedin { font-size: 10px; }
.story-proof-row span { font-size: 10px; }
.transformation-grid small { font-size: 11px; line-height: 1.4; }
.services-grid h3 { font-size: 15px; }
.services-grid span { font-size: 10px; }
.portfolio-footer { font-size: 9px; }
.technical-telemetry span,
.technical-coordinates { font-size: 8px; }
.references-header a { font-size: 11px; }
.references-brand span { font-size: 9px; }
.references-kicker { font-size: 10px; }
.references-hero > p { font-size: 17px; }
.references-stats small { font-size: 9px; }
.references-filter button { font-size: 10px; }
.references-grid article > div,
.references-grid footer { font-size: 9px; }
.references-grid p { font-size: 11px; }
.references-cta > span { font-size: 10px; }

.experience-reel-track { animation: experience-breathe 7s ease-in-out infinite alternate; }
.reel-card { box-shadow: 0 30px 90px rgba(0, 0, 0, 0.26); }
.reel-card::after {
  position: absolute;
  inset: -30% 0;
  background: linear-gradient(105deg, transparent 34%, rgba(217, 255, 139, 0.14) 49%, transparent 64%);
  content: "";
  transform: translateX(-120%);
  animation: reel-scan 5.6s ease-in-out infinite;
}
.reel-card:nth-child(2)::after { animation-delay: -1.8s; }
.reel-card:nth-child(3)::after { animation-delay: -3.6s; }
@keyframes experience-breathe { to { margin-top: -2.5vh; gap: 32px; } }
@keyframes reel-scan { 55%, 100% { transform: translateX(140%); } }

.triple-constellation,
.decision-engine,
.blog-current {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.triple-constellation {
  inset: 68px 0 64px 46%;
  overflow: hidden;
  isolation: isolate;
}

.constellation-aura {
  position: absolute;
  inset: 5% -10% -12% 0;
  background:
    conic-gradient(from calc(var(--triple-progress) * 140deg), transparent, rgba(217, 255, 139, 0.2), transparent 27%, rgba(28, 120, 73, 0.27), transparent 62%),
    radial-gradient(circle at 53% 49%, rgba(217, 255, 139, 0.18), transparent 38%);
  filter: blur(18px);
  transform: scale(calc(.95 + var(--triple-progress) * .16));
  animation: constellation-aura 9s ease-in-out infinite alternate;
}
@keyframes constellation-aura { to { transform: rotate(22deg) scale(1.08); } }

.constellation-orbit {
  position: absolute;
  top: 50%;
  left: 54%;
  width: min(38vw, 560px);
  aspect-ratio: 1.45;
  border: 1px solid rgba(217, 255, 139, 0.3);
  border-radius: 50%;
  transform-origin: center;
}
.constellation-orbit i {
  position: absolute;
  top: 50%;
  left: -5px;
  width: 10px;
  height: 10px;
  background: #d9ff8b;
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(217, 255, 139, 0.9);
}
.constellation-orbit span {
  position: absolute;
  right: 8%;
  bottom: 13%;
  color: #d9ff8b;
  font: 600 10px/1 "PP Supply Mono", monospace;
  letter-spacing: .15em;
}
.orbit-lean { transform: translate(-50%, -50%) rotate(calc(-24deg + var(--triple-progress) * 35deg)); animation: constellation-spin 17s linear infinite; }
.orbit-digital { transform: translate(-50%, -50%) rotate(calc(36deg - var(--triple-progress) * 42deg)) scale(.83); animation: constellation-spin-reverse 13s linear infinite; }
.orbit-green { transform: translate(-50%, -50%) rotate(calc(91deg + var(--triple-progress) * 31deg)) scale(.66); animation: constellation-spin 11s linear infinite; }
@keyframes constellation-spin { to { rotate: 360deg; } }
@keyframes constellation-spin-reverse { to { rotate: -360deg; } }

.constellation-core {
  position: absolute;
  top: 50%;
  left: 54%;
  display: grid;
  width: 144px;
  height: 144px;
  place-content: center;
  justify-items: center;
  color: #071b13;
  background: #d9ff8b;
  border-radius: 44% 56% 61% 39% / 52% 41% 59% 48%;
  transform: translate(-50%, -50%) scale(calc(.86 + var(--triple-progress) * .16));
  animation: constellation-core 6s ease-in-out infinite alternate;
  box-shadow: 0 0 100px rgba(217, 255, 139, 0.22);
}
.constellation-core b { font: 400 38px/.7 "STK Bureau Serif", serif; }
.constellation-core span { margin-top: 10px; font: 600 9px/1.2 "PP Supply Mono", monospace; letter-spacing: .12em; text-align: center; }
@keyframes constellation-core { to { border-radius: 61% 39% 43% 57% / 39% 58% 42% 61%; transform: translate(-50%, -50%) rotate(13deg) scale(1.03); } }

.constellation-signals i {
  position: absolute;
  top: calc(12% + (var(--signal, 1) * 7%));
  left: -2%;
  width: 4px;
  height: 4px;
  background: #d9ff8b;
  border-radius: 50%;
  opacity: 0;
  animation: constellation-signal 5s linear infinite;
}
.constellation-signals i:nth-child(1) { top: 16%; animation-delay: -.4s; }
.constellation-signals i:nth-child(2) { top: 24%; animation-delay: -1.1s; }
.constellation-signals i:nth-child(3) { top: 34%; animation-delay: -2.8s; }
.constellation-signals i:nth-child(4) { top: 43%; animation-delay: -4.2s; }
.constellation-signals i:nth-child(5) { top: 51%; animation-delay: -1.9s; }
.constellation-signals i:nth-child(6) { top: 59%; animation-delay: -3.3s; }
.constellation-signals i:nth-child(7) { top: 68%; animation-delay: -.8s; }
.constellation-signals i:nth-child(8) { top: 77%; animation-delay: -2.3s; }
.constellation-signals i:nth-child(9) { top: 84%; animation-delay: -4.6s; }
@keyframes constellation-signal { 12%, 80% { opacity: .7; } to { left: 105%; transform: translateY(-80px) scale(1.8); opacity: 0; } }

.decision-engine {
  top: 50%;
  right: 3vw;
  width: min(39vw, 610px);
  height: min(58vh, 510px);
  transform: translateY(-50%);
}
.decision-flow {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 8%, rgba(13, 107, 67, .08), transparent 62%);
  border: 1px solid rgba(13, 107, 67, .14);
  transform: perspective(900px) rotateY(calc(-9deg + var(--decision-progress) * 15deg)) rotateX(4deg);
}
.decision-flow i { position: absolute; height: 1px; background: rgba(13, 107, 67, .34); transform-origin: left; }
.decision-flow i::after { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; background: #0d6b43; border-radius: 50%; content: ""; animation: decision-signal 3.2s linear infinite; }
.decision-flow i:nth-child(1) { top: 28%; left: 16%; width: 54%; transform: rotate(18deg); }
.decision-flow i:nth-child(2) { top: 66%; left: 19%; width: 59%; transform: rotate(-22deg); }
.decision-flow i:nth-child(3) { top: 34%; left: 48%; width: 42%; transform: rotate(73deg); }
.decision-flow i:nth-child(4) { top: 77%; left: 30%; width: 52%; transform: rotate(-7deg); }
.decision-flow i:nth-child(2)::after { animation-delay: -.8s; }
.decision-flow i:nth-child(3)::after { animation-delay: -1.6s; }
.decision-flow i:nth-child(4)::after { animation-delay: -2.4s; }
@keyframes decision-signal { to { left: 100%; } }
.decision-node {
  position: absolute;
  display: grid;
  min-width: 126px;
  gap: 5px;
  padding: 14px;
  color: #0a2a1d;
  background: rgba(229, 239, 223, .9);
  border: 1px solid rgba(13, 107, 67, .34);
  box-shadow: 0 18px 50px rgba(13, 66, 43, .12);
  animation: decision-node 5s ease-in-out infinite;
}
.decision-node b,
.decision-node small { color: rgba(10, 42, 29, .52); font: 500 8px/1 "PP Supply Mono", monospace; letter-spacing: .12em; }
.decision-node span { font: 600 11px/1 "PP Supply Mono", monospace; letter-spacing: .1em; }
.node-measure { top: 8%; left: 4%; }
.node-prioritize { top: 40%; right: 0; animation-delay: -1.7s; }
.node-apply { bottom: 4%; left: 17%; animation-delay: -3.4s; }
@keyframes decision-node { 50% { transform: translateY(-13px); box-shadow: 0 28px 70px rgba(13, 66, 43, .18); } }
.decision-output {
  position: absolute;
  top: 48%;
  left: 49%;
  display: grid;
  width: 132px;
  height: 132px;
  place-content: center;
  gap: 7px;
  color: #eaf5e7;
  background: #0d6b43;
  border-radius: 50%;
  text-align: center;
  transform: translate(-50%, -50%) scale(calc(.82 + var(--decision-progress) * .2));
  box-shadow: 0 0 0 18px rgba(13, 107, 67, .06), 0 0 70px rgba(13, 107, 67, .22);
}
.decision-output i { position: absolute; inset: -12px; border: 1px dashed rgba(13, 107, 67, .5); border-radius: 50%; animation: orbit-spin 11s linear infinite; }
.decision-output b { font: 600 9px/1.2 "PP Supply Mono", monospace; letter-spacing: .1em; }
.decision-output span { color: #d9ff8b; font: 400 28px/1 "STK Bureau Serif", serif; }

.hand-gate {
  position: absolute;
  inset: 68px 0 64px;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(290px, .82fr) minmax(460px, 1.18fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 2vh 5vw;
  padding: 5vh 7vw 4vh;
  color: #f5f2e8;
  background:
    radial-gradient(circle at 73% 48%, rgba(217, 255, 139, .08), transparent 30%),
    rgba(3, 16, 10, .96);
  backdrop-filter: none;
  pointer-events: auto;
  animation: none;
  touch-action: none;
  user-select: none;
  contain: layout paint;
}
.hand-gate-range { position: relative; z-index: 20; width: 100%; height: 34px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; border: 0; cursor: ew-resize; touch-action: none; }
.hand-gate-range::-webkit-slider-runnable-track { width: 100%; height: 2px; background: linear-gradient(90deg, #d9ff8b 0 calc(var(--hand-position) * 100%), rgba(245, 242, 232, .2) calc(var(--hand-position) * 100%) 100%); }
.hand-gate-range::-webkit-slider-thumb { width: 32px; height: 32px; margin-top: -15px; appearance: none; -webkit-appearance: none; background: #d9ff8b; border: 0; border-radius: 50%; box-shadow: 0 0 0 7px rgba(217, 255, 139, .08); }
.hand-gate-range::-moz-range-track { width: 100%; height: 2px; background: rgba(245, 242, 232, .2); border: 0; }
.hand-gate-range::-moz-range-progress { height: 2px; background: #d9ff8b; }
.hand-gate-range::-moz-range-thumb { width: 32px; height: 32px; background: #d9ff8b; border: 0; border-radius: 50%; box-shadow: 0 0 0 7px rgba(217, 255, 139, .08); }
.hand-gate-range:focus-visible { outline: 1px solid #d9ff8b; outline-offset: 5px; }
.hand-gate-click { position: relative; z-index: 20; display: grid; width: 100%; height: 40px; place-items: center; padding: 0; color: #d9ff8b; background: transparent; border: 0; cursor: pointer; touch-action: manipulation; }
.hand-gate-click > i { position: absolute; right: 0; left: 0; height: 2px; background: rgba(245, 242, 232, .2); }
.hand-gate-click > i::before { position: absolute; inset: 0; background: #d9ff8b; content: ""; transform: scaleX(var(--hand-position)); transform-origin: left; transition: transform 980ms cubic-bezier(.22, 1, .36, 1); }
.hand-gate-click > i > b { position: absolute; top: 50%; left: calc(var(--hand-position) * 100%); width: 30px; height: 30px; background: #d9ff8b; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 7px rgba(217, 255, 139, .08); transition: left 980ms cubic-bezier(.22, 1, .36, 1); }
.hand-gate-click > strong { position: relative; z-index: 2; padding: 7px 13px; color: #d9ff8b; background: #03100a; font: 600 8px/1 "PP Supply Mono", monospace; letter-spacing: .12em; }
.hand-gate-click:hover > strong { color: #03100a; background: #d9ff8b; }
.hand-gate-click:focus-visible { outline: 1px solid #d9ff8b; outline-offset: 4px; }
.hand-gate-click:disabled { cursor: default; }
.portfolio-hand-gate-active .story-stage,
.portfolio-hand-gate-active .technical-field { visibility: hidden; }
.portfolio-hand-gate-active .technical-field,
.portfolio-hand-gate-active .technical-field *,
.portfolio-hand-gate-active .triple-constellation,
.portfolio-hand-gate-active .triple-constellation * { animation-play-state: paused !important; }
.hand-gate.is-complete { animation: hand-gate-out 360ms ease-out both; }
@keyframes hand-gate-out { to { opacity: 0; } }
.hand-gate-copy { display: flex; flex-direction: column; }
.hand-gate-copy, .hand-stage { pointer-events: none; }
.hand-gate-copy small { color: rgba(245, 242, 232, .58); font: 500 10px/1 "PP Supply Mono", monospace; letter-spacing: .14em; }
.hand-gate-copy b { margin-top: 18px; font: 400 clamp(54px, 6.8vw, 102px)/.78 "STK Bureau Serif", serif; letter-spacing: -.055em; }
.hand-gate-copy b em { color: #d9ff8b; font-style: italic; }
.hand-gate-copy > span { margin-top: 24px; color: #d9ff8b; font: 500 10px/1 "PP Supply Mono", monospace; letter-spacing: .14em; }
.hand-stage { position: relative; width: min(44vw, 620px); height: min(48vh, 440px); overflow: hidden; background: #204638; border: 1px solid rgba(217, 255, 139, .18); contain: layout paint; }
.hand-stage::after { position: absolute; inset: 0; z-index: 4; background: radial-gradient(circle at 50% 50%, transparent 8%, rgba(4, 22, 14, .16) 42%, rgba(3, 16, 10, .65) 100%); content: ""; }
.hand-image { position: absolute; z-index: 2; top: 50%; width: min(30vw, 420px); aspect-ratio: 1; object-fit: cover; opacity: .9; filter: none; backface-visibility: hidden; transition: transform 980ms cubic-bezier(.22, 1, .36, 1); }
.hand-image-left { left: 0; transform: translate3d(calc(-61% + var(--hand-position) * 86%), -50%, 0) rotate(82deg); }
.hand-image-right { right: 0; transform: translate3d(calc(61% - var(--hand-position) * 86%), -50%, 0) rotate(-98deg) scaleX(-1); }
.hand-energy { position: absolute; z-index: 3; top: 50%; left: 50%; width: calc(38px + var(--hand-position) * 84px); aspect-ratio: 1; transform: translate(-50%, -50%); opacity: calc(.18 + var(--hand-position) * .82); transition: width 980ms cubic-bezier(.22, 1, .36, 1), opacity 980ms ease; }
.hand-energy i { position: absolute; inset: 0; border: 1px solid rgba(217, 255, 139, .52); border-radius: 50%; }
.hand-energy i:nth-child(2) { opacity: .45; transform: scale(1.55); }
.hand-energy i:nth-child(3) { opacity: .2; transform: scale(2.1); }
.hand-core { position: absolute; z-index: 5; top: 50%; left: 50%; display: flex; align-items: center; gap: 8px; padding: 9px 12px; color: #d9ff8b; background: rgba(3, 16, 10, .78); border: 1px solid rgba(217, 255, 139, .42); font: 500 7px/1 "PP Supply Mono", monospace; letter-spacing: .09em; transform: translate(-50%, -50%) scale(calc(.75 + var(--hand-position) * .25)); opacity: calc(.28 + var(--hand-position) * .72); }
.hand-core i { width: 12px; height: 1px; background: rgba(217, 255, 139, .42); }
.hand-slider { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 17px; color: rgba(245, 242, 232, .52); font: 500 8px/1 "PP Supply Mono", monospace; letter-spacing: .12em; }
.hand-slider-control { position: relative; width: 100%; height: 34px; cursor: grab; touch-action: none; }
.hand-slider-control:active { cursor: grabbing; }
.hand-slider-control > i { position: absolute; top: 50%; right: 0; left: 0; height: 2px; background: rgba(245, 242, 232, .2); transform: translateY(-50%); }
.hand-slider-control > i::before { position: absolute; inset: 0; background: #d9ff8b; content: ""; transform: scaleX(var(--hand-position)); transform-origin: left; }
.hand-slider-control > i > b { position: absolute; top: 50%; left: calc(var(--hand-position) * 100%); width: 32px; height: 32px; background: #d9ff8b; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 7px rgba(217, 255, 139, .08), 0 0 30px rgba(217, 255, 139, .28); }
.hand-slider-control:focus-visible { outline: 1px solid #d9ff8b; outline-offset: 5px; }

.client-strip { display: block; width: min(960px, 100%); overflow: hidden; border-right: 1px solid var(--portfolio-line); border-left: 1px solid var(--portfolio-line); }
.client-strip-track { display: flex; width: max-content; animation: client-flow 52s linear infinite; }
.client-strip-track span { display: grid; min-width: 190px; gap: 6px; padding: 11px 16px; }
.client-strip-track b { font: 600 10px/1 "Supply Sans", sans-serif; }
.client-strip-track small { color: rgba(217, 255, 139, .66); font: 500 8px/1 "PP Supply Mono", monospace; }
.client-strip:hover .client-strip-track { animation-play-state: paused; }
@keyframes client-flow { to { transform: translateX(-50%); } }
.impact-company-orbit { animation: none; }
.impact-company-orbit span { display: grid; gap: 4px; font-size: 7px; transition: opacity 100ms linear; }
.impact-company-orbit span small { color: rgba(217, 255, 139, .48); font-size: 5px; }

.blog-current { inset: 68px 0 64px 52%; overflow: hidden; }
.blog-current-word { position: absolute; top: 50%; left: 10%; color: rgba(217, 255, 139, .06); font: 400 clamp(100px, 14vw, 220px)/1 "STK Bureau Serif", serif; transform: translateY(-50%) rotate(calc(-9deg + var(--blog-progress) * 16deg)); }
@keyframes blog-word { to { letter-spacing: .08em; filter: blur(1px); } }
.blog-current-lines { position: absolute; inset: 12%; transform: rotate(calc(-13deg + var(--blog-progress) * 20deg)); }
.blog-current-lines i { display: block; width: calc(24% + var(--blog-progress) * 50%); height: 1px; margin: 25px 0; background: linear-gradient(90deg, transparent, rgba(217, 255, 139, .24), transparent); }
.blog-current-lines i:nth-child(3n) { margin-left: 20%; }
.blog-current-lines i:nth-child(3n + 2) { margin-left: 39%; }
@keyframes blog-line { to { width: 88%; transform: translateX(8%); } }
.blog-current > span { position: absolute; right: 7%; bottom: 9%; color: rgba(217, 255, 139, .6); font: 500 9px/1 "PP Supply Mono", monospace; letter-spacing: .15em; }
.blog-carousel { position: relative; z-index: 12; width: min(960px, 100%); overflow: hidden; pointer-events: auto; }
.blog-strip { display: flex; width: max-content; gap: 12px; margin-top: 25px; pointer-events: auto; transform: translate3d(calc(var(--blog-story-progress) * -23%), 0, 0); transition: transform 120ms linear; }
.blog-strip > a { position: relative; z-index: 2; display: flex; width: 265px; min-height: 180px; flex-direction: column; padding: 16px; color: #f5f2e8; background: rgba(5, 24, 16, .76); border: 1px solid rgba(217, 255, 139, .18); text-decoration: none; pointer-events: auto; cursor: pointer; contain: layout paint; }
.blog-strip > a:hover { z-index: 2; background: #0d422a; border-color: rgba(217, 255, 139, .6); }
.blog-strip span { color: rgba(217, 255, 139, .64); font: 500 8px/1.25 "PP Supply Mono", monospace; letter-spacing: .08em; }
.blog-strip h3 { margin: 14px 0 9px; font: 400 25px/.98 "STK Bureau Serif", serif; letter-spacing: -.025em; }
.blog-strip p { margin: 0; color: rgba(245, 242, 232, .62); font-size: 11px; line-height: 1.45; }
.blog-strip b { margin-top: auto; padding-top: 13px; color: #d9ff8b; font: 600 8px/1 "PP Supply Mono", monospace; letter-spacing: .1em; }
.portfolio-stage6 .technical-field,
.portfolio-stage6 .technical-field * { animation-play-state: paused !important; }

.closing-stage { display: grid; place-items: center; overflow: hidden; padding: 96px 20px 74px; pointer-events: auto; }
.closing-rings { position: absolute; inset: 68px 0 64px; pointer-events: none; }
.closing-rings i { position: absolute; top: 50%; left: 50%; width: min(82vw, 980px); aspect-ratio: 1; border: 1px solid rgba(83, 67, 82, .16); border-radius: 50%; transform: translate(-50%, -50%) scale(calc(.38 + var(--closing-progress) * .08)); animation: closing-ring 9s ease-in-out infinite alternate; }
.closing-rings i:nth-child(2) { width: min(64vw, 760px); animation-delay: -2.2s; }
.closing-rings i:nth-child(3) { width: min(46vw, 540px); animation-delay: -4.4s; }
.closing-rings i:nth-child(4) { width: min(28vw, 330px); animation-delay: -6.6s; }
.closing-rings b { position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; background: #a2635e; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 calc(20px + var(--closing-progress) * 75px) rgba(162, 99, 94, .08); }
@keyframes closing-ring { to { border-radius: 46% 54% 61% 39% / 54% 44% 56% 46%; transform: translate(-50%, -50%) scale(1.03) rotate(18deg); } }
.closing-copy { position: relative; z-index: 2; width: min(900px, 92vw); text-align: center; }
.closing-copy > span { color: rgba(48, 43, 54, .58); font: 600 10px/1 "PP Supply Mono", monospace; letter-spacing: .15em; }
.closing-copy h2 { margin: 20px 0 0; font: 400 clamp(72px, 10vw, 148px)/.78 "STK Bureau Serif", serif; letter-spacing: -.06em; }
.closing-copy h2 em { color: #a2635e; font-style: italic; }
.closing-copy > p { max-width: 570px; margin: 28px auto 0; color: rgba(48, 43, 54, .66); font-size: 16px; line-height: 1.55; }
.closing-copy form { width: min(680px, 100%); margin: 38px auto 0; text-align: left; }
.closing-copy label { display: block; margin-bottom: 9px; color: rgba(48, 43, 54, .62); font: 600 9px/1 "PP Supply Mono", monospace; letter-spacing: .14em; }
.closing-copy form > div { display: grid; grid-template-columns: 1fr auto; border: 1px solid rgba(48, 43, 54, .3); background: rgba(255, 255, 255, .22); }
.closing-copy input { min-width: 0; padding: 18px; color: #302b36; background: transparent; border: 0; outline: none; font: 500 18px/1 "Supply Sans", sans-serif; }
.closing-copy input::placeholder { color: rgba(48, 43, 54, .36); }
.closing-copy input:focus { box-shadow: inset 0 0 0 2px #a2635e; }
.closing-copy button { min-width: 190px; padding: 0 18px; color: #f5efeb; background: #3b3541; border: 0; font: 600 10px/1 "PP Supply Mono", monospace; letter-spacing: .08em; cursor: pointer; transition: background 220ms ease, color 220ms ease; }
.closing-copy button:disabled { color: rgba(48, 43, 54, .4); background: rgba(48, 43, 54, .1); cursor: default; }
.closing-stage.is-leaving { animation: closing-leave 850ms cubic-bezier(.55, 0, .1, 1) both; }
@keyframes closing-leave { to { clip-path: circle(0 at 50% 50%); opacity: 0; transform: scale(1.07); } }

@media (max-width: 767px) {
  .portfolio-brand b { font-size: 10px; }
  .story-kicker,
  .story-index { font-size: 9px; }
  .story-copy > p { max-width: 100%; font-size: 13px; line-height: 1.52; }
  .story-tags span,
  .client-strip span { font-size: 8px; }
  .story-linkedin { font-size: 8px; }
  .story-proof-row span { font-size: 8px; }
  .services-grid span,
  .transformation-grid small { font-size: 8px; }
  .portfolio-footer { font-size: 8px; }
  .triple-constellation { inset: 38% -25% 52px 2%; opacity: .54; }
  .constellation-orbit { left: 58%; width: 88vw; }
  .constellation-core { left: 58%; width: 104px; height: 104px; }
  .decision-engine { top: 71%; right: -28%; width: 108vw; height: 38vh; opacity: .5; }
  .decision-node { min-width: 102px; padding: 10px; }
  .decision-output { width: 98px; height: 98px; }
  .hand-gate { inset: 61px 0 52px; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; align-content: center; gap: 12px; padding: 22px 18px 20px; }
  .hand-gate-copy { align-items: center; text-align: center; }
  .hand-gate-copy small { font-size: 7px; }
  .hand-gate-copy b { margin-top: 8px; font-size: 46px; }
  .hand-gate-copy > span { margin-top: 10px; font-size: 7px; }
  .hand-stage { width: 100%; height: min(40vh, 330px); }
  .hand-image { width: min(72vw, 340px); }
  .hand-slider { grid-column: 1; gap: 9px; font-size: 6px; }
  .client-strip { width: 100%; }
  .client-strip-track span { min-width: 155px; }
  .impact-company-orbit { right: -10%; width: 98vw; margin-top: -49vw; opacity: .54; }
  .impact-company-orbit span { display: grid; font-size: 5px; }
  .impact-company-orbit span:nth-child(n + 7) { display: none; }
  .blog-current { inset: 45% -15% 52px 12%; opacity: .42; }
  .blog-strip { max-width: none; margin-top: 18px; }
  .blog-strip > a { width: 220px; min-height: 148px; padding: 12px; }
  .blog-strip h3 { font-size: 21px; }
  .blog-strip p { font-size: 9px; }
  .closing-stage { padding: 88px 18px 68px; }
  .closing-copy h2 { font-size: clamp(60px, 20vw, 92px); }
  .closing-copy > p { margin-top: 20px; font-size: 13px; }
  .closing-copy form { margin-top: 28px; }
  .closing-copy form > div { grid-template-columns: 1fr; }
  .closing-copy input { padding: 15px; font-size: 16px; text-align: center; }
  .closing-copy button { min-height: 48px; }
  .references-brand { font-size: 9px !important; }
  .references-brand span { font-size: 7px; }
  .references-header > a:last-child { font-size: 8px; }
  .references-kicker { font-size: 8px; }
  .references-hero > p { font-size: 13px; }
  .references-stats small { font-size: 7px; }
  .references-filter button { font-size: 8px; }
  .references-grid article > div,
  .references-grid footer { font-size: 8px; }
  .references-grid p { font-size: 10px; }

  /* Stage 02 keeps the original moving reel, but separates it from the copy. */
  .portfolio-stage2 .story-stage { padding: 88px 18px 76px; }
  .portfolio-stage2 .story-index { margin-bottom: 10px; }
  .portfolio-stage2 .story-copy { z-index: 6; width: 100%; }
  .portfolio-stage2 .story-copy h2 { font-size: clamp(38px, 11.2vw, 52px); }
  .portfolio-stage2 .story-copy > p { max-width: 100%; margin-top: 12px; font-size: 12px; line-height: 1.4; }
  .portfolio-stage2 .story-tags { max-width: 100%; margin-top: 10px; }
  .portfolio-stage2 .story-tags span { padding: 6px 7px; font-size: 7px; }
  .portfolio-stage2 .story-linkedin { margin-top: 8px; font-size: 7px; }
  .portfolio-stage2 .experience-reel {
    inset: auto 12px 52px;
    height: 24svh;
    overflow: hidden;
    opacity: 1;
    background: #0c2d21;
    border-top: 1px solid rgba(217, 255, 139, .3);
    border-bottom: 1px solid rgba(245, 242, 232, .12);
  }
  .portfolio-stage2 .experience-reel::before { background: linear-gradient(90deg, #123629 0%, transparent 10%, transparent 90%, #123629 100%); }
  .portfolio-stage2 .experience-reel-track { align-items: center; }
  .portfolio-stage2 .reel-card { width: 51vw; height: 21svh; }
  .portfolio-stage2 .reel-card:nth-child(2) { transform: translateY(1svh); }
  .portfolio-stage2 .reel-card:nth-child(3) { transform: translateY(-1svh); }

  /* Blog cards use the phone's native horizontal swipe without moving stages. */
  .blog-carousel {
    width: calc(100vw - 36px);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .blog-carousel::-webkit-scrollbar { display: none; }
  .blog-strip { padding-right: 18px; transform: none; transition: none; }
  .blog-strip > a { flex: 0 0 220px; touch-action: pan-x; scroll-snap-align: start; }
}

@media (max-width: 767px) and (max-height: 620px) {
  .portfolio-stage2 .story-copy h2 { font-size: 34px; }
  .portfolio-stage2 .story-copy > p { font-size: 10.5px; line-height: 1.34; }
  .portfolio-stage2 .experience-reel { height: 17svh; }
  .portfolio-stage2 .reel-card { height: 15svh; }
}

@media (prefers-reduced-motion: reduce) {
  .experience-reel-track,
  .reel-card::after,
  .constellation-aura,
  .constellation-orbit,
  .constellation-core,
  .constellation-signals i,
  .decision-flow i::after,
  .decision-node,
  .decision-output i,
  .hand-energy i,
  .client-strip-track,
  .blog-current-word,
  .blog-current-lines i,
  .closing-rings i { animation: none; }
}

/* Contact handoff */

html:has(.contact-page),
body:has(.contact-page) {
  min-height: 100%;
  overflow-x: hidden;
  background: #e9e1dc;
}

body.okc-contact-view #bg-gradient,
body.okc-contact-view #pre-canvas-99,
body.okc-contact-view #webgl,
body.okc-contact-view #ui-container { display: none !important; }
body.okc-contact-view #okc-experience-root { position: relative; z-index: 100; min-height: 100vh; }

.contact-page,
.contact-page * { box-sizing: border-box; }

.contact-page {
  --contact-ink: #302b36;
  --contact-muted: rgba(48, 43, 54, .62);
  --contact-line: rgba(48, 43, 54, .2);
  --contact-accent: #a2635e;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: var(--contact-ink);
  background:
    radial-gradient(circle at 78% 24%, rgba(162, 99, 94, .13), transparent 28%),
    radial-gradient(circle at 15% 85%, rgba(102, 86, 117, .09), transparent 30%),
    #e9e1dc;
  font-family: "Supply Sans", "Inter", sans-serif;
}

.contact-field { position: absolute; inset: 0; pointer-events: none; }
.contact-field::before { position: absolute; inset: -14%; background-image: linear-gradient(rgba(48, 43, 54, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(48, 43, 54, .055) 1px, transparent 1px); background-size: 72px 72px; content: ""; transform: rotate(-7deg); }
.contact-field i { position: absolute; width: 8px; height: 8px; background: var(--contact-accent); border-radius: 50%; opacity: .48; animation: contact-particle 6s ease-in-out infinite; }
.contact-field i:nth-child(1) { top: 18%; left: 12%; }
.contact-field i:nth-child(2) { top: 32%; right: 18%; animation-delay: -1.5s; }
.contact-field i:nth-child(3) { bottom: 19%; left: 42%; animation-delay: -3s; }
.contact-field i:nth-child(4) { right: 9%; bottom: 31%; animation-delay: -4.5s; }
.contact-field b { position: absolute; top: 50%; right: 8%; width: min(40vw, 560px); aspect-ratio: 1; border: 1px solid rgba(162, 99, 94, .14); border-radius: 46% 54% 58% 42% / 54% 42% 58% 46%; transform: translateY(-50%); animation: contact-shape 9s ease-in-out infinite alternate; }
@keyframes contact-particle { 50% { opacity: .9; transform: translateY(-18px) scale(1.4); } }
@keyframes contact-shape { to { border-radius: 59% 41% 43% 57% / 39% 60% 40% 61%; transform: translateY(-50%) rotate(18deg) scale(1.06); } }

.contact-header { position: relative; z-index: 3; display: flex; min-height: 72px; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 4vw, 64px); border-bottom: 1px solid var(--contact-line); }
.contact-header a,
.contact-header button { padding: 0; color: var(--contact-ink); background: transparent; border: 0; font: 600 10px/1 "PP Supply Mono", monospace; letter-spacing: .11em; text-decoration: none; cursor: pointer; }
.contact-brand { display: flex; align-items: center; gap: 12px; }
.contact-mark { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 18px; font-weight: 400; }

.contact-hero { position: relative; z-index: 2; width: min(1080px, 100%); padding: clamp(62px, 9vh, 100px) clamp(20px, 7vw, 110px) 90px; }
.contact-kicker { display: flex; align-items: center; gap: 12px; color: var(--contact-muted); font: 600 10px/1 "PP Supply Mono", monospace; letter-spacing: .14em; }
.contact-kicker span { color: var(--contact-accent); }
.contact-kicker i { width: 35px; height: 1px; background: var(--contact-line); }
.contact-hero h1 { margin: 26px 0 0; font: 400 clamp(72px, 10vw, 146px)/.78 "STK Bureau Serif", serif; letter-spacing: -.06em; }
.contact-hero h1 em { color: var(--contact-accent); font-style: italic; }
.contact-hero > p { max-width: 650px; margin: 32px 0 0; color: var(--contact-muted); font-size: 17px; line-height: 1.6; }

.contact-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(920px, 100%); margin-top: 40px; border-top: 1px solid var(--contact-line); border-left: 1px solid var(--contact-line); }
.contact-links a { position: relative; display: grid; min-height: 112px; align-content: center; gap: 10px; padding: 18px 52px 18px 19px; color: var(--contact-ink); border-right: 1px solid var(--contact-line); border-bottom: 1px solid var(--contact-line); text-decoration: none; transition: background 260ms ease, color 260ms ease, transform 260ms ease; }
.contact-links a:hover { z-index: 2; color: #f7f1ed; background: #3b3541; transform: translateY(-4px); }
.contact-links a span { color: var(--contact-muted); font: 600 8px/1 "PP Supply Mono", monospace; letter-spacing: .12em; }
.contact-links a:hover span { color: rgba(247, 241, 237, .56); }
.contact-links a b { font: 500 clamp(18px, 1.7vw, 25px)/1.05 "Supply Sans", sans-serif; }
.contact-links a i { position: absolute; top: 50%; right: 20px; font-style: normal; transform: translateY(-50%); }
.contact-links .contact-link-primary { color: #f7f1ed; background: var(--contact-accent); }
.contact-links .contact-link-primary span { color: rgba(247, 241, 237, .65); }

.contact-details { position: absolute; right: clamp(20px, 5vw, 80px); bottom: 54px; z-index: 2; width: min(26vw, 330px); padding: 22px; color: var(--contact-ink); background: rgba(247, 241, 237, .48); border: 1px solid var(--contact-line); backdrop-filter: blur(16px); }
.contact-details > span { color: var(--contact-accent); font: 600 9px/1 "PP Supply Mono", monospace; letter-spacing: .14em; }
.contact-details > p { margin: 18px 0 24px; color: var(--contact-muted); font-size: 13px; line-height: 1.55; }
.contact-details > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--contact-line); font: 500 8px/1 "PP Supply Mono", monospace; letter-spacing: .08em; }
.contact-details > div span { color: var(--contact-muted); }

@media (max-width: 900px) {
  .contact-page { overflow: visible; }
  .contact-hero { padding-bottom: 40px; }
  .contact-details { position: relative; right: auto; bottom: auto; z-index: 2; width: calc(100% - 40px); margin: 0 20px 32px; }
}

@media (max-width: 600px) {
  .contact-header { min-height: 64px; padding: 0 16px; }
  .contact-header a,
  .contact-header button { font-size: 7px; }
  .contact-mark { width: 30px; height: 30px; }
  .contact-hero { padding: 70px 18px 32px; }
  .contact-kicker { gap: 7px; font-size: 8px; }
  .contact-kicker i { width: 20px; }
  .contact-hero h1 { margin-top: 22px; font-size: clamp(68px, 21vw, 92px); }
  .contact-hero > p { margin-top: 24px; font-size: 14px; }
  .contact-links { grid-template-columns: 1fr; margin-top: 32px; }
  .contact-links a { min-height: 96px; }
  .contact-details { width: calc(100% - 36px); margin: 0 18px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-field i,
  .contact-field b { animation: none; }
}

/* Mobile stage 02: copy and evidence visual occupy separate, stable zones. */
@media (max-width: 767px) {
  .portfolio-stage2 .story-stage {
    justify-content: flex-start;
    padding: 78px 18px calc(28svh + 68px);
  }

  .portfolio-stage2 .story-index { margin-bottom: 8px; }
  .portfolio-stage2 .story-copy { z-index: 6; width: 100%; }
  .portfolio-stage2 .story-copy h2 { font-size: clamp(35px, 10.4vw, 48px); line-height: .9; }
  .portfolio-stage2 .story-copy > p { max-width: 100%; margin-top: 10px; font-size: 11.5px; line-height: 1.38; }
  .portfolio-stage2 .story-tags { max-width: 100%; margin-top: 9px; }
  .portfolio-stage2 .story-tags span { padding: 5px 7px; font-size: 6.5px; }
  .portfolio-stage2 .story-linkedin { margin-top: 7px; font-size: 6.5px; }

  .portfolio-stage2 .experience-field {
    inset: auto 12px 52px;
    grid-template-columns: 34% 66%;
    gap: 7px;
    height: 27svh;
    min-height: 188px;
    padding: 7px;
    background-size: 28px 28px, 28px 28px, auto, auto;
    border: 1px solid rgba(217, 255, 139, .2);
  }

  .experience-portrait { transform: none; }
  .experience-portrait figcaption { right: 8px; bottom: 8px; left: 8px; gap: 4px; }
  .experience-portrait figcaption span { font-size: 6px; }
  .experience-portrait figcaption b { font-size: 4.5px; line-height: 1.35; }
  .experience-system { grid-template-rows: auto 1fr 1.25fr auto; gap: 5px; padding: 8px; }
  .experience-system header { font-size: 5.5px; }
  .experience-timeline { min-height: 46px; }
  .experience-year { gap: 3px; padding-top: 24px; font-size: 6px; }
  .experience-year small { font-size: 4px; }
  .experience-timeline > i { width: 4px; height: 4px; }
  .experience-matrix article { gap: 3px 5px; padding: 5px; }
  .experience-matrix b { font-size: 5px; }
  .experience-matrix span { font-size: 6px; }
  .experience-matrix small { font-size: 4px; }
  .experience-system footer { gap: 4px; font-size: 4.5px; }
}

@media (max-width: 767px) and (max-height: 680px) {
  .portfolio-stage2 .story-stage { padding-top: 70px; padding-bottom: calc(23svh + 64px); }
  .portfolio-stage2 .story-copy h2 { font-size: 31px; }
  .portfolio-stage2 .story-copy > p { font-size: 9.5px; line-height: 1.3; }
  .portfolio-stage2 .story-tags { margin-top: 6px; }
  .portfolio-stage2 .story-linkedin { margin-top: 5px; }
  .portfolio-stage2 .experience-field { height: 22svh; min-height: 132px; }
  .experience-system { grid-template-rows: auto 1fr 1fr; }
  .experience-system footer { display: none; }
}

/* Blog detail: WordPress content, rendered inside the new editorial system. */
html.okc-blog-view,
body.okc-blog-view {
  height: auto !important;
  min-height: 100%;
  overflow: auto !important;
  color: #173228;
  background: #f0f2eb;
}

body.okc-blog-view #webgl,
body.okc-blog-view #bg-gradient,
body.okc-blog-view #ui-container,
body.okc-blog-view .circle-dom-hud,
body.okc-blog-view .loader,
body.okc-blog-view .sound-control,
body.okc-blog-view .portfolio-story { display: none !important; }

.blog-detail-page {
  min-height: 100svh;
  background:
    linear-gradient(rgba(23, 50, 40, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 50, 40, .055) 1px, transparent 1px),
    #f0f2eb;
  background-size: 52px 52px;
}

.blog-detail-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 0 4.5vw;
  border-bottom: 1px solid rgba(23, 50, 40, .16);
  background: rgba(240, 242, 235, .9);
  backdrop-filter: blur(14px);
}

.blog-detail-header a {
  color: inherit;
  font: 600 10px/1 "Supply Sans", Inter, sans-serif;
  letter-spacing: .14em;
  text-decoration: none;
}

.blog-detail-brand { display: inline-flex; align-items: center; gap: 12px; }
.blog-detail-brand span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 400;
}

.blog-detail-hero {
  width: min(1120px, 91vw);
  margin: 0 auto;
  padding: clamp(86px, 12vw, 160px) 0 clamp(58px, 8vw, 100px);
}

.blog-detail-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #496157;
  font: 600 9px/1 "Supply Sans", Inter, sans-serif;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.blog-detail-meta span { color: #0c6c45; }
.blog-detail-meta i { width: 42px; height: 1px; background: currentColor; }
.blog-detail-hero h1 {
  max-width: 1030px;
  margin: 30px 0 0;
  color: #102a20;
  font: 400 clamp(58px, 8.6vw, 132px)/.86 "STK Bureau Serif", Newsreader, Georgia, serif;
  letter-spacing: -.055em;
}

.blog-detail-hero > p {
  max-width: 680px;
  margin: 38px 0 0 auto;
  color: #41584f;
  font: 400 clamp(16px, 1.45vw, 21px)/1.55 "Supply Sans", Inter, sans-serif;
}

.blog-detail-cover {
  position: relative;
  width: min(1280px, 94vw);
  height: min(62vw, 690px);
  margin: 0 auto;
  overflow: hidden;
  background: #173228;
}

.blog-detail-cover img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.04); }
.blog-detail-cover figcaption {
  position: absolute;
  right: 20px;
  bottom: 18px;
  padding: 9px 12px;
  color: #e9f3e7;
  background: rgba(13, 42, 31, .78);
  font: 600 7px/1 "Supply Sans", Inter, sans-serif;
  letter-spacing: .16em;
}

.blog-detail-article {
  width: min(760px, 88vw);
  margin: 0 auto;
  padding: clamp(72px, 10vw, 132px) 0;
  color: #243e34;
  font: 400 clamp(17px, 1.35vw, 20px)/1.78 "Supply Sans", Inter, sans-serif;
}

.blog-detail-article > :first-child { margin-top: 0; }
.blog-detail-article h2,
.blog-detail-article h3,
.blog-detail-article h4 {
  margin: 2.2em 0 .75em;
  color: #102a20;
  font: 400 clamp(32px, 4vw, 54px)/.98 "STK Bureau Serif", Newsreader, Georgia, serif;
  letter-spacing: -.035em;
}

.blog-detail-article h3 { font-size: clamp(27px, 3vw, 40px); }
.blog-detail-article p,
.blog-detail-article ul,
.blog-detail-article ol { margin: 0 0 1.4em; }
.blog-detail-article li { margin-bottom: .55em; }
.blog-detail-article a { color: #087246; text-underline-offset: 4px; }
.blog-detail-article blockquote {
  margin: 2.4em 0;
  padding: 6px 0 6px 28px;
  border-left: 2px solid #0b7348;
  color: #173228;
  font: italic 400 clamp(25px, 3vw, 38px)/1.18 "STK Bureau Serif", Newsreader, Georgia, serif;
}
.blog-detail-article img { max-width: 100%; height: auto; }
.blog-detail-article figure { max-width: 100%; margin: 2.6em 0; }
.blog-detail-article figcaption { margin-top: 8px; color: #64746e; font-size: 11px; }

.blog-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 220px;
  padding: 50px max(4.5vw, 24px);
  color: #e9f2e7;
  background: #153a2b;
}

.blog-detail-footer span { font: 600 9px/1 "Supply Sans", Inter, sans-serif; letter-spacing: .16em; }
.blog-detail-footer a {
  padding: 20px 25px;
  border: 1px solid rgba(233, 242, 231, .5);
  color: inherit;
  font: 600 9px/1 "Supply Sans", Inter, sans-serif;
  letter-spacing: .13em;
  text-decoration: none;
}

.blog-detail-status {
  display: flex;
  min-height: calc(100svh - 76px);
  align-items: center;
  justify-content: center;
  gap: 14px;
  font: 600 10px/1 "Supply Sans", Inter, sans-serif;
  letter-spacing: .16em;
}
.blog-detail-status i { width: 7px; height: 7px; border-radius: 50%; background: #0d7549; animation: blog-status-pulse 1.2s ease-in-out infinite; }
.blog-detail-error { flex-direction: column; text-align: center; }
.blog-detail-error h1 { max-width: 650px; margin: 18px 0 28px; font: 400 clamp(48px, 7vw, 86px)/.9 "STK Bureau Serif", Newsreader, Georgia, serif; }
.blog-detail-error a { color: #0b7147; text-underline-offset: 5px; }
@keyframes blog-status-pulse { 50% { opacity: .25; transform: scale(.7); } }

@media (max-width: 640px) {
  .blog-detail-header { min-height: 64px; padding: 0 16px; }
  .blog-detail-header a { font-size: 6.5px; letter-spacing: .11em; }
  .blog-detail-brand { gap: 7px; }
  .blog-detail-brand span { width: 28px; height: 28px; font-size: 14px; }
  .blog-detail-hero { width: calc(100% - 36px); padding: 68px 0 52px; }
  .blog-detail-meta { gap: 9px; font-size: 7px; }
  .blog-detail-meta i { width: 22px; }
  .blog-detail-hero h1 { margin-top: 22px; font-size: clamp(48px, 15.5vw, 72px); }
  .blog-detail-hero > p { margin-top: 26px; font-size: 15px; line-height: 1.5; }
  .blog-detail-cover { width: calc(100% - 24px); height: 68vw; }
  .blog-detail-article { width: calc(100% - 40px); padding: 64px 0 78px; font-size: 16px; line-height: 1.72; }
  .blog-detail-footer { min-height: 260px; flex-direction: column; align-items: flex-start; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-detail-status i { animation: none; }
}