:root {
  --bg: #100918;
  --bg-deep: #08040d;
  --paper: #f7f1f4;
  --ink: #160d1d;
  --muted: #b8abbf;
  --pink: #ff66b7;
  --pink-soft: #ffb8dd;
  --violet: #9a7dff;
  --acid: #caff5a;
  --line: rgba(247, 241, 244, 0.17);
  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --radius: clamp(1.35rem, 2vw, 2.25rem);
  color-scheme: dark;
  font-size: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  --scroll-progress: 0;
  --scroll-velocity: 0;
  --pointer-x: 50vw;
  --pointer-y: 50vh;
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--paper);
  background:
    radial-gradient(circle at 78% 5%, rgba(154, 125, 255, .1), transparent 26rem),
    var(--bg);
  font-family: var(--font-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Three-space portfolio architecture */
.site-nav a.is-current{color:var(--paper)}.site-nav a.is-current::after{content:"";display:block;width:100%;height:1px;margin-top:.2rem;background:var(--pink-soft)}
.page-creative,.page-projects,.page-about{background:#08080a}.page-creative main,.page-projects main,.page-about main{overflow:clip}
.space-intro{position:relative;min-height:100svh;display:grid;align-content:center;padding:8rem var(--pad) 5rem}.space-intro h1,.route-hero h1{margin:1rem 0 0;font-size:clamp(5.4rem,16vw,14rem);line-height:.72;letter-spacing:-.09em}.space-intro h1 em,.route-hero h1 em{color:var(--pink-soft);font-weight:600}.space-intro__copy{max-width:34rem;margin:2.8rem 0 0;color:var(--muted);font-size:clamp(1.05rem,1.6vw,1.35rem)}.space-intro .round-link{margin-top:2.8rem}
.space-orbit{position:absolute;right:4vw;top:21%;width:min(38vw,34rem);aspect-ratio:1;border:1px solid rgba(255,255,255,.12);border-radius:50%;animation:space-spin 24s linear infinite}.space-orbit::before,.space-orbit::after{content:"";position:absolute;inset:12%;border:1px solid rgba(255,159,196,.17);border-radius:50%;transform:rotateX(68deg)}.space-orbit::after{inset:27%;transform:rotateY(68deg)}.space-orbit span{position:absolute;inset:45%;border-radius:50%;background:var(--pink-soft);box-shadow:0 0 36px rgba(255,159,196,.68)}.space-orbit i{position:absolute;right:5%;top:44%;color:var(--pink-soft);font-size:1.4rem}.space-orbit b{position:absolute;left:50%;bottom:-2.5rem;translate:-50% 0;font:500 .65rem/1 var(--font-note);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--muted)}@keyframes space-spin{to{rotate:360deg}}
.work-cloud__media--image{background-image:linear-gradient(rgba(8,8,10,.12),rgba(8,8,10,.5)),var(--work-image);background-size:cover;background-position:center}.cloud-case__project-link{display:block;margin-bottom:1rem;color:var(--pink-soft)}
.route-next{min-height:70vh;display:flex;flex-direction:column;justify-content:center}.route-next__link{display:flex;align-items:end;justify-content:space-between;gap:2rem;padding:2rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.route-next__link span{font-size:clamp(1rem,2vw,1.5rem);color:var(--muted)}.route-next__link b{font:600 clamp(3rem,8vw,8rem)/.85 var(--font-heading);letter-spacing:-.06em;transition:color .25s,translate .25s}.route-next__link:hover b{color:var(--pink-soft);translate:-.15em 0}
.route-hero{min-height:88svh;display:flex;flex-direction:column;justify-content:end;padding:9rem var(--pad) 6rem;border-bottom:1px solid var(--line)}.route-hero__intro{max-width:40rem;margin:3rem 0 0 auto;color:var(--muted);font-size:clamp(1.05rem,1.8vw,1.45rem)}
.project-index{padding:0 var(--pad)}.case-row{position:relative;display:grid;grid-template-columns:4rem 1fr minmax(10rem,24rem) auto;gap:2rem;align-items:center;min-height:13rem;border-bottom:1px solid var(--line);overflow:hidden}.case-row>span,.case-row p{font:500 .72rem/1.3 var(--font-note);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.case-row h2{margin:.5rem 0 0;font-size:clamp(2rem,4vw,4.8rem);line-height:.88;letter-spacing:-.06em}.case-row img{width:100%;height:8rem;object-fit:cover;border-radius:1rem;filter:saturate(.75) brightness(.72);transition:filter .4s,transform .4s}.case-row b{font-size:.8rem}.case-row:hover img{filter:saturate(1.1) brightness(1);transform:scale(1.03)}.case-row:hover h2{color:var(--pink-soft)}
.project-story{scroll-margin-top:4rem;padding:clamp(7rem,14vw,13rem) var(--pad);border-bottom:1px solid var(--line)}.project-story header h2{max-width:75rem;margin:1.5rem 0 2rem;font-size:clamp(3.5rem,8vw,8rem);line-height:.84;letter-spacing:-.07em}.project-story header h2 em{color:var(--pink-soft)}.project-story__hero{width:100%;max-height:75vh;margin-top:4rem;object-fit:cover;border-radius:var(--radius)}.project-story__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,5vw,6rem);margin-top:4rem}.project-story__grid h3{font-size:clamp(1.5rem,2.6vw,2.5rem);line-height:1}.project-story__grid p:last-child{color:var(--muted)}
.about-hero{min-height:100svh}.about-opening{position:relative;min-height:110vh;padding:10rem var(--pad)}.about-opening__portrait{position:absolute;left:var(--pad);top:12rem;width:min(30vw,28rem);margin:0;border-radius:45% 45% 1.5rem 1.5rem;overflow:hidden}.about-opening__portrait img{width:100%;aspect-ratio:.78;object-fit:cover;filter:saturate(.75) contrast(1.08)}.about-opening__mascot{position:absolute;right:7vw;top:3rem;width:min(43vw,38rem);height:min(70vw,45rem)}.about-opening__lead{position:relative;z-index:2;max-width:56rem;margin:30vh auto 0;font:600 clamp(2.5rem,5vw,5.8rem)/.98 var(--font-heading);letter-spacing:-.055em;text-indent:clamp(6rem,20vw,18rem)}.about-opening__mascot .mascot-canvas{width:100%;height:100%}
.about-chapter{position:relative;display:grid;grid-template-columns:minmax(15rem,.8fr) minmax(20rem,1fr);gap:clamp(3rem,9vw,12rem);min-height:90vh;padding:clamp(8rem,13vw,14rem) var(--pad);border-top:1px solid var(--line)}.about-chapter>h2{position:sticky;top:8rem;align-self:start;margin:0;font-size:clamp(4rem,10vw,10rem);line-height:.72;letter-spacing:-.085em}.about-chapter>div:last-child{align-self:center;max-width:44rem}.about-chapter>div:last-child p{margin:0 0 2rem;font-size:clamp(1.25rem,2.2vw,2.2rem);line-height:1.25}.about-chapter>div:last-child p+p{color:var(--muted)}.about-chapter--mascot::after{content:"";position:absolute;left:36%;top:42%;width:18rem;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,159,196,.16),transparent 65%)}.about-contact{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:8rem var(--pad)}.about-contact h2{margin:1.5rem 0 3rem;font-size:clamp(4rem,9vw,9rem);line-height:.83;letter-spacing:-.07em}.about-contact h2 em{color:var(--pink-soft)}
@media(max-width:780px){.site-header{grid-template-columns:auto 1fr}.site-nav{position:fixed;left:50%;bottom:1rem;translate:-50% 0;z-index:90;padding:.7rem 1rem;border:1px solid var(--line);border-radius:999px;background:rgba(8,8,10,.8);backdrop-filter:blur(18px);white-space:nowrap}.header-contact{display:none}.space-orbit{width:65vw;opacity:.5;top:16%;right:-18vw}.space-intro h1,.route-hero h1{font-size:clamp(4.5rem,24vw,8rem)}.case-row{grid-template-columns:2rem 1fr auto;min-height:9.5rem;gap:1rem}.case-row img{display:none}.project-story__grid{grid-template-columns:1fr}.about-opening{min-height:120vh}.about-opening__portrait{width:48vw;top:8rem}.about-opening__mascot{width:78vw;height:78vw;right:-13vw;top:15rem}.about-opening__lead{margin-top:58vh;text-indent:4rem}.about-chapter{grid-template-columns:1fr;min-height:auto}.about-chapter>h2{position:static}}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
}

button, input, textarea, select, nav { font-family: var(--font-body); }

.section-indicator,
.project-card__topline,
.eyebrow,
.case-outcome span,
.dialog-meta,
.project-meta {
  font-family: var(--font-note);
  font-weight: 500;
}

main { position: relative; z-index: 1; }

.ambient-canvas {
  position: fixed;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .82;
  mix-blend-mode: screen;
}

.motion-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.motion-blob {
  position: absolute;
  display: block;
  border-radius: 48% 52% 56% 44% / 61% 38% 62% 39%;
  filter: blur(42px);
  will-change: transform;
}
.motion-blob--one {
  width: min(46rem, 62vw);
  aspect-ratio: 1;
  left: -18rem;
  top: -14rem;
  opacity: .2;
  background: radial-gradient(circle at 65% 65%, var(--pink), transparent 62%);
  animation: blob-one 18s ease-in-out infinite alternate;
}
.motion-blob--two {
  width: min(40rem, 56vw);
  aspect-ratio: 1;
  right: -14rem;
  top: 28%;
  opacity: .18;
  background: radial-gradient(circle at 40% 40%, var(--violet), transparent 64%);
  animation: blob-two 22s ease-in-out infinite alternate;
}
.motion-blob--three {
  width: min(32rem, 48vw);
  aspect-ratio: 1;
  left: 34%;
  bottom: -16rem;
  opacity: .14;
  background: radial-gradient(circle at 50% 30%, var(--pink-soft), transparent 66%);
  animation: blob-three 15s ease-in-out infinite alternate;
}
@keyframes blob-one { to { transform: translate(28vw, 24vh) rotate(54deg) scale(1.25); border-radius: 63% 37% 42% 58% / 36% 62% 38% 64%; } }
@keyframes blob-two { to { transform: translate(-32vw, 18vh) rotate(-48deg) scale(.78); border-radius: 34% 66% 61% 39% / 55% 43% 57% 45%; } }
@keyframes blob-three { to { transform: translate(24vw, -34vh) rotate(72deg) scale(1.35); } }

.scroll-meter {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  height: 2px;
  background: rgba(255,255,255,.06);
}
.scroll-meter span { display: block; width: var(--scroll-percent, 0%); height: 100%; background: linear-gradient(90deg, var(--pink), var(--violet), var(--acid)); box-shadow: 0 0 18px var(--pink); }

.section-indicator {
  position: fixed;
  right: 1.25rem;
  bottom: 1.2rem;
  z-index: 70;
  display: flex;
  align-items: baseline;
  gap: .65rem;
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--paper);
  background: rgba(16,9,24,.55);
  backdrop-filter: blur(14px);
  font-size: .7rem;
  pointer-events: none;
}
.section-indicator span { color: var(--pink); font-weight: 800; }
.section-indicator b { font-weight: 700; }

body.dialog-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }

::selection { color: var(--ink); background: var(--pink); }

.grain {
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.cursor-spark {
  position: fixed;
  z-index: 120;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 18px var(--pink);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.trail-star {
  position: fixed;
  z-index: 119;
  pointer-events: none;
  color: var(--pink-soft);
  font-size: .72rem;
  animation: trail-out .8s ease-out forwards;
}

@keyframes trail-out {
  to { opacity: 0; transform: translateY(-18px) scale(.2) rotate(90deg); }
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 4.5rem;
  padding: 0 var(--pad);
  border-bottom: 1px solid transparent;
  transition: background .35s, border-color .35s, backdrop-filter .35s;
}

.site-header.is-scrolled {
  background: rgba(16, 9, 24, .76);
  border-color: var(--line);
  backdrop-filter: blur(18px);
}

.wordmark {
  width: max-content;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -.05em;
}
.wordmark span { color: var(--pink); margin-left: .12rem; }

.site-nav { display: flex; gap: clamp(1rem, 3vw, 2.5rem); }
.site-nav a, .header-contact { font-size: .82rem; font-weight: 700; }
.site-nav a { color: var(--muted); transition: color .2s; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--paper); }
.header-contact { justify-self: end; border-bottom: 1px solid currentColor; padding-bottom: .2rem; }

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8rem var(--pad) 5rem;
  isolation: isolate;
  perspective: 1200px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 24% auto auto 52%;
  width: min(42vw, 38rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -2;
}

.hero__meta, .eyebrow {
  margin: 0;
  color: var(--pink-soft);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero__title {
  max-width: 78rem;
  margin: clamp(1.25rem, 3vw, 2.5rem) 0 0;
  font-size: clamp(4rem, 10.6vw, 10.5rem);
  font-weight: 700;
  letter-spacing: -.075em;
  line-height: .84;
  will-change: translate, rotate;
}

em {
  color: var(--pink);
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -.055em;
}

.hero__intro {
  align-self: flex-end;
  width: min(100%, 31rem);
  margin: 3rem 7vw 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.25rem);
}

.round-link {
  position: absolute;
  left: var(--pad);
  bottom: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 10rem;
  height: 3rem;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  transition: color .25s, background .25s, border-color .25s;
}
.round-link:hover { color: var(--ink); background: var(--acid); border-color: var(--acid); }

.hero__aside {
  position: absolute;
  right: var(--pad);
  bottom: 2.8rem;
  margin: 0;
  text-align: right;
  color: #82748b;
  font-size: .75rem;
}

.signature {
  position: absolute;
  left: 70%;
  top: 38%;
  width: 18rem;
  height: 18rem;
  transform: translate(-50%, -50%) translate3d(var(--pointer-shift-x, 0px), var(--pointer-shift-y, 0px), 0) rotate(var(--hero-rotation, 0deg)) scale(var(--hero-scale, 1));
  display: grid;
  place-items: center;
  z-index: -1;
  transition: opacity .15s linear;
  opacity: var(--hero-opacity, 1);
}

.signature__halo {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,102,183,.35) 0, rgba(154,125,255,.18) 28%, transparent 68%);
  filter: blur(10px);
  animation: breathe 4s ease-in-out infinite;
}
.signature__core {
  color: var(--pink);
  font-size: clamp(5rem, 11vw, 10rem);
  line-height: 1;
  filter: drop-shadow(0 0 28px rgba(255,102,183,.58));
  animation: core-spin 16s linear infinite;
  transform-origin: center;
}
.signature i {
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--pink-soft);
  font-style: normal;
  transform: translate(var(--x), var(--y)) rotate(var(--hero-particle-rotation, 0deg));
  animation: twinkle 2.8s var(--delay) ease-in-out infinite;
}
@keyframes core-spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.18); opacity: .65; } }
@keyframes twinkle { 50% { opacity: .2; filter: blur(2px); } }

.section { padding: clamp(6rem, 10vw, 10rem) var(--pad); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(15rem, .55fr); gap: 2rem; align-items: end; }
.section-heading .eyebrow { grid-column: 1 / -1; }
.section-heading h2, .about-copy h2, .contact h2, .case-hero h2 {
  margin: 0;
  font-size: clamp(3rem, 7.2vw, 7rem);
  line-height: .94;
  letter-spacing: -.065em;
}
.section-heading > p:last-child { max-width: 25rem; margin: 0 0 .35rem; color: var(--muted); font-size: .98rem; }
.section-heading--compact { grid-template-columns: minmax(0, 1fr); max-width: 66rem; }

.work { position: relative; padding-left: 0; padding-right: 0; background: var(--paper); color: var(--ink); overflow: hidden; }
.work::before {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: .3;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,102,183,.38), transparent 16%),
    radial-gradient(circle at 78% 60%, rgba(154,125,255,.3), transparent 18%);
  filter: blur(45px);
  animation: work-aurora 14s ease-in-out infinite alternate;
}
@keyframes work-aurora { to { transform: translate3d(8%, 7%, 0) rotate(8deg) scale(1.08); } }
.work > * { position: relative; z-index: 1; }
.work .section-heading { padding: 0 var(--pad); }
.work .eyebrow { color: #8c3769; }
.work .section-heading > p:last-child { color: #655b69; }

.project-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 4rem var(--pad) 1.5rem;
  color: #786d7b;
  font-size: .75rem;
}
.project-controls b { color: var(--ink); }
.icon-button {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(22,13,29,.2);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform .2s, background .2s;
}
.icon-button:hover { transform: scale(1.08); background: #fff; }

.project-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 72rem);
  gap: clamp(1rem, 2.4vw, 2.5rem);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 var(--pad) 2rem;
}
.project-rail::-webkit-scrollbar { display: none; }

.project-card {
  scroll-snap-align: start;
  min-height: 42rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(1.25rem, 2vw, 2rem);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--paper);
  background: #171019;
  position: relative;
  transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--scroll-lift, 0px));
  transform-style: preserve-3d;
  transition: transform .18s ease-out, box-shadow .35s ease;
  will-change: transform;
}
.project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--shine-opacity, 0);
  background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(255,255,255,.34), transparent 32%);
  mix-blend-mode: soft-light;
  transition: opacity .25s;
}
.project-card:hover { box-shadow: 0 2.6rem 5rem rgba(29,10,35,.22); }
.project-card--risk { background: linear-gradient(145deg, #26152f, #120c18 58%); }
.project-card--finance { background: linear-gradient(145deg, #0c1642, #070a18 60%); }
.project-card--borrow { color: #172311; background: linear-gradient(145deg, #d9ff8b, #96cc4d); }
.project-card--play { background: linear-gradient(145deg, #5e1a58, #1b0b2a 64%); }

.project-card__topline { display: flex; justify-content: space-between; gap: 1rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; opacity: .72; }
.project-card__visual { min-height: 22rem; display: grid; place-items: center; padding: clamp(2rem, 5vw, 5rem); }
.project-card__visual img { width: min(100%, 54rem); max-height: 27rem; object-fit: contain; filter: drop-shadow(0 2rem 2.2rem rgba(0,0,0,.32)); transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.project-card:hover .project-card__visual > img { transform: translateY(-.6rem) rotate(-1deg) scale(1.02); }

.project-placeholder {
  position: relative;
  overflow: hidden;
  min-height: 27rem;
  margin: 1rem 0;
  border: 1px solid currentColor;
  border-radius: calc(var(--radius) * .7);
  opacity: .72;
  transform: translateZ(42px);
  background:
    linear-gradient(90deg, transparent 49.8%, currentColor 50%, transparent 50.2%),
    linear-gradient(transparent 49.8%, currentColor 50%, transparent 50.2%);
  background-size: 5.5rem 5.5rem;
}
.project-placeholder::before {
  content: "";
  position: absolute;
  inset: -50% -20%;
  background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.28) 50%, transparent 58%);
  transform: translateX(-70%);
  animation: placeholder-scan 5.5s ease-in-out infinite;
}
.project-placeholder__number {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%,-50%);
  font-size: clamp(7rem, 17vw, 15rem);
  font-weight: 800;
  letter-spacing: -.1em;
  opacity: .08;
}
.project-placeholder__spark {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%,-50%);
  font-size: clamp(4rem, 8vw, 7rem);
  filter: drop-shadow(0 0 2.5rem currentColor);
  animation: placeholder-star 8s linear infinite;
}
.project-placeholder__orbit {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(18rem, 52%);
  aspect-ratio: 1;
  border: 1px dashed currentColor;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  animation: placeholder-orbit 14s linear infinite;
}
.project-placeholder__orbit::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -.32rem;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 1.2rem currentColor;
}
@keyframes placeholder-scan { 50%,100% { transform: translateX(70%); } }
@keyframes placeholder-star { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes placeholder-orbit { to { transform: translate(-50%,-50%) rotate(-360deg); } }
.project-card__visual--collage { grid-template-columns: 1fr 1fr; gap: 1.5rem; padding-inline: 8%; }
.project-card__visual--collage img:first-child { transform: rotate(-5deg); }
.project-card__visual--collage img:last-child { transform: rotate(5deg) translateY(2rem); }
.project-card:hover .project-card__visual--collage img:first-child { transform: rotate(-7deg) translateY(-.5rem); }
.project-card:hover .project-card__visual--collage img:last-child { transform: rotate(7deg) translateY(1.5rem); }

.project-card__body { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; }
.project-card__body h3 { margin: 0; font-size: clamp(2rem, 4vw, 4rem); letter-spacing: -.055em; line-height: 1; }
.project-card__body p { max-width: 35rem; margin: 1rem 0 0; color: currentColor; opacity: .68; font-size: .92rem; }
.case-button {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: .9rem 1.1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
  transition: transform .2s, background .2s, color .2s;
}
.case-button:hover { transform: translateY(-.2rem); color: var(--ink); background: var(--paper); }
.project-card--borrow .case-button:hover { color: var(--paper); background: var(--ink); }
.case-button--placeholder { opacity: .6; cursor: default; }

.approach { position: relative; min-height: 60rem; overflow: hidden; }
.approach::before { content: ""; position: absolute; width: 40rem; height: 40rem; right: -15rem; top: 12rem; border-radius: 50%; background: rgba(154,125,255,.08); filter: blur(30px); }
.approach-stage { position: relative; max-width: 80rem; height: min(62vw, 45rem); min-height: 38rem; margin: 3rem auto 0; }
.approach-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.approach-lines path { fill: none; stroke: rgba(247,241,244,.22); stroke-width: 1.4; stroke-dasharray: 4 8; vector-effect: non-scaling-stroke; transition: stroke .3s, stroke-width .3s; }
.approach-lines path.is-active { stroke: var(--pink); stroke-width: 3; }
.orbit {
  position: absolute;
  width: clamp(9rem, 16vw, 14rem);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--paper);
  background: rgba(255,255,255,.025);
  text-align: center;
  backdrop-filter: blur(5px);
  transition: transform .35s, background .35s, border-color .35s, color .35s;
}
button.orbit { cursor: pointer; }
.orbit--users { animation: orbit-drift-a 5.8s ease-in-out infinite alternate; }
.orbit--product { animation: orbit-drift-b 7.2s ease-in-out infinite alternate; }
.orbit--technology { animation: orbit-drift-a 6.6s -2s ease-in-out infinite alternate-reverse; }
.orbit--visual { animation: orbit-drift-b 5.4s -1s ease-in-out infinite alternate-reverse; }
@keyframes orbit-drift-a { to { translate: 1rem -.7rem; } }
@keyframes orbit-drift-b { to { translate: -.8rem 1rem; } }
.orbit:hover, .orbit:focus-visible, .orbit.is-active { transform: scale(1.07); color: var(--ink); background: var(--pink); border-color: var(--pink); }
.orbit span { font-size: clamp(1rem, 1.7vw, 1.4rem); font-weight: 800; letter-spacing: -.03em; }
.orbit small { max-width: 9rem; margin-top: .45rem; font-size: .65rem; line-height: 1.35; opacity: .66; }
.orbit--center { left: 50%; top: 50%; width: clamp(12rem, 20vw, 18rem); transform: translate(-50%, -50%); border: 0; color: var(--ink); background: var(--paper); box-shadow: 0 0 7rem rgba(255,102,183,.18); }
.orbit--center span { font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: .9; }
.orbit--users { left: 4%; top: 5%; }
.orbit--product { right: 3%; top: 1%; }
.orbit--technology { right: 1%; bottom: 3%; }
.orbit--visual { left: 3%; bottom: 2%; }
.approach-note { position: absolute; left: 50%; bottom: 4%; width: min(22rem, 38%); margin: 0; transform: translateX(-50%); color: var(--muted); text-align: center; font-size: .78rem; }

.about { position: relative; padding-left: 0; padding-right: 0; color: var(--ink); background: var(--acid); overflow: hidden; }
.about::before {
  content: "";
  position: absolute;
  width: 34rem;
  aspect-ratio: 1;
  left: -12rem;
  bottom: -8rem;
  border: 1px solid rgba(22,13,29,.22);
  border-radius: 44% 56% 38% 62% / 64% 37% 63% 36%;
  animation: about-shape 12s ease-in-out infinite alternate;
}
@keyframes about-shape { to { transform: translate(28vw,-9rem) rotate(100deg) scale(1.4); border-radius: 67% 33% 58% 42% / 39% 62% 38% 61%; } }
.about > * { position: relative; z-index: 1; }
.about > .eyebrow { margin-left: var(--pad); color: #5a721f; }
.about-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(19rem, .75fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; padding: 3rem var(--pad) 7rem; }
.about-copy h2 { max-width: 68rem; font-size: clamp(2.8rem, 6vw, 6rem); }
.word-trigger { display: inline; padding: 0; border: 0; border-bottom: .08em solid currentColor; color: inherit; background: transparent; font-family: var(--font-heading); font-size: inherit; font-style: italic; line-height: inherit; letter-spacing: -.045em; cursor: pointer; transition: color .2s; }
.word-trigger:hover, .word-trigger:focus-visible, .word-trigger.is-active { color: #ce2c82; }
.about-copy > p { max-width: 47rem; margin: 2.5rem 0 0; font-size: clamp(1rem, 1.35vw, 1.2rem); }
.about-copy .about-small { max-width: 36rem; margin-top: 1.3rem; color: #52631f; font-size: .88rem; }

.about-playground { position: relative; min-height: 38rem; }
.about-orb { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); color: #ce2c82; font-size: 22rem; opacity: .22; animation: core-spin 24s linear infinite; }
.fact-card { position: absolute; inset: 8% 0 auto auto; width: min(90%, 24rem); margin: 0; padding: .7rem; border: 1px solid rgba(22,13,29,.25); border-radius: 1.3rem; background: var(--paper); box-shadow: 0 2rem 4rem rgba(55,51,15,.2); opacity: 0; transform: translate(2rem, 2rem) rotate(5deg) scale(.92); pointer-events: none; transition: opacity .35s, transform .5s cubic-bezier(.2,.8,.2,1); }
.fact-card:nth-of-type(2) { inset: 20% auto auto 0; }
.fact-card:nth-of-type(3) { inset: auto 2% 5% auto; }
.fact-card.is-active { opacity: 1; transform: translate(0,0) rotate(-2deg) scale(1); }
.fact-card.is-active img { animation: fact-image-drift 8s ease-in-out infinite alternate; }
@keyframes fact-image-drift { to { transform: scale(1.08) translate3d(1.4%, -1%, 0); } }
.fact-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: top; border-radius: .85rem; }
.fact-card figcaption { display: grid; gap: .25rem; padding: 1rem .45rem .5rem; }
.fact-card figcaption b { font-size: 1.15rem; }
.fact-card figcaption span { color: #695c6f; font-size: .78rem; }

.skill-marquee { overflow: hidden; border-top: 1px solid rgba(22,13,29,.22); border-bottom: 1px solid rgba(22,13,29,.22); }
.skill-marquee > div { width: max-content; display: flex; align-items: center; gap: 1.5rem; padding: 1.4rem 0; animation: marquee 30s linear infinite; }
.skill-marquee span { font-size: clamp(1.3rem, 2.2vw, 2.15rem); font-weight: 800; letter-spacing: -.04em; }
.skill-marquee i { color: #ce2c82; font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

.contact { position: relative; min-height: 92svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.contact h2 { position: relative; z-index: 1; margin-top: 2rem; font-size: clamp(4rem, 10vw, 10rem); }
.contact-link { position: relative; z-index: 1; align-self: flex-start; display: flex; gap: 2rem; margin-top: 3rem; padding: 1rem 1.35rem; border: 1px solid var(--paper); border-radius: 999px; font-size: .85rem; font-weight: 800; transition: color .25s, background .25s; }
.contact-link:hover { color: var(--ink); background: var(--pink); }
.contact-spark { position: absolute; right: 5vw; top: 47%; color: var(--pink); font-size: clamp(14rem, 32vw, 32rem); line-height: 1; transform: translateY(-50%); opacity: .42; filter: drop-shadow(0 0 4rem rgba(255,102,183,.4)); animation: core-spin 30s linear infinite; }
.contact-footer { position: absolute; left: var(--pad); right: var(--pad); bottom: 2rem; display: flex; justify-content: space-between; gap: 2rem; color: #887990; font-size: .72rem; }

.reveal { opacity: 0; transform: translateY(1.8rem); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.motion-parallax { translate: 0 var(--parallax-y, 0px); rotate: var(--velocity-tilt, 0deg); will-change: translate, rotate; }

.case-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--paper);
  background: var(--bg-deep);
  overflow-y: auto;
}
.case-dialog::backdrop { background: rgba(8,4,13,.88); backdrop-filter: blur(10px); }
.case-dialog__bar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; min-height: 4.5rem; padding: 0 var(--pad); border-bottom: 1px solid var(--line); background: rgba(8,4,13,.78); backdrop-filter: blur(20px); }
.dialog-close { display: flex; gap: .7rem; align-items: center; padding: .65rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; font-size: .78rem; font-weight: 700; }
.dialog-close span { font-size: 1.2rem; line-height: .6; }
.case-panel { display: none; padding-bottom: 8rem; }
.case-panel.is-active { display: block; }
.case-hero { min-height: 72svh; display: flex; flex-direction: column; justify-content: center; padding: 8rem var(--pad) 4rem; }
.case-hero h2 { max-width: 84rem; margin-top: 2rem; }
.case-facts { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 3rem; }
.case-facts span { padding: .65rem 1rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .75rem; }
.case-wide-image { width: calc(100% - (var(--pad) * 2)); max-height: 48rem; margin: 0 var(--pad); object-fit: contain; padding: clamp(2rem, 6vw, 6rem); border-radius: var(--radius); background: linear-gradient(145deg, #24132c, #120b18); }
.case-story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 10vw, 10rem); padding: 8rem var(--pad); }
.case-story section { max-width: 35rem; }
.case-story h3, .case-highlight h3 { margin: 1.5rem 0; font-size: clamp(2rem, 3.6vw, 3.8rem); line-height: 1; letter-spacing: -.055em; }
.case-story p:last-child, .case-highlight p:last-child { color: var(--muted); }
.case-highlight { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; padding: 0 var(--pad) 8rem; }
.case-highlight--reverse { grid-template-columns: minmax(18rem, .75fr) minmax(0, 1.25fr); }
.case-highlight--reverse img { order: 2; }
.case-highlight img { width: 100%; max-height: 40rem; object-fit: contain; padding: clamp(1.5rem, 4vw, 4rem); border-radius: var(--radius); background: var(--paper); }
.case-outcome { margin: 0 var(--pad); padding: clamp(2rem, 5vw, 5rem); border-radius: var(--radius); color: var(--ink); background: var(--acid); }
.case-outcome span { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.case-outcome p { max-width: 70rem; margin: 2rem 0 0; font-size: clamp(1.8rem, 4vw, 4rem); line-height: 1.06; letter-spacing: -.05em; }
.nda-note { margin: 2rem var(--pad) 0; color: #7f7187; font-size: .72rem; }
.play-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding: 0 var(--pad); }
.play-grid figure { margin: 0; padding: .8rem; border: 1px solid var(--line); border-radius: 1.5rem; background: rgba(255,255,255,.03); }
.play-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 1rem; }
.play-grid figcaption { display: grid; gap: .25rem; padding: 1rem .35rem .4rem; }
.play-grid figcaption span { color: var(--muted); font-size: .78rem; }

@media (max-width: 820px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-nav { display: none; }
  .hero { justify-content: flex-start; padding-top: 10rem; }
  .hero__title { font-size: clamp(3.55rem, 15vw, 6.8rem); }
  .hero__intro { align-self: flex-start; margin: 16rem 0 0; }
  .signature { left: 58%; top: 54%; width: 15rem; height: 15rem; }
  .hero__aside { display: none; }
  .section-heading, .project-card__body, .about-grid, .case-story, .case-highlight, .case-highlight--reverse { grid-template-columns: 1fr; }
  .section-heading .eyebrow { grid-column: auto; }
  .section-heading > p:last-child { margin-top: .5rem; }
  .project-rail { grid-auto-columns: calc(100vw - 2.25rem); padding-left: 1.1rem; padding-right: 1.1rem; }
  .project-card { min-height: 38rem; }
  .project-card__visual { min-height: 19rem; padding: 2.4rem 1rem; }
  .project-card__body { align-items: start; gap: 1.5rem; }
  .case-button { width: max-content; }
  .section-indicator { display: none; }
  .approach { min-height: auto; }
  .approach-stage { height: 42rem; min-height: 0; margin-top: 2rem; }
  .orbit { width: 8.5rem; }
  .orbit small { display: none; }
  .orbit--center { width: 11rem; }
  .orbit--users { left: 0; top: 4%; }
  .orbit--product { right: 0; top: 6%; }
  .orbit--technology { right: 0; bottom: 7%; }
  .orbit--visual { left: 0; bottom: 6%; }
  .approach-note { bottom: 1%; width: 78%; }
  .about-grid { padding-bottom: 4rem; }
  .about-playground { min-height: 31rem; }
  .fact-card { width: min(90%, 22rem); }
  .case-highlight--reverse img { order: 0; }
  .play-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .header-contact { font-size: .72rem; }
  .hero__title { font-size: clamp(3.2rem, 17vw, 5.4rem); }
  .hero__intro { margin-top: 13rem; }
  .signature { top: 54%; width: 12rem; height: 12rem; }
  .round-link { bottom: 1.8rem; }
  .project-controls { justify-content: space-between; padding-top: 2.2rem; }
  .project-card { min-height: 35rem; }
  .project-card__topline { font-size: .61rem; }
  .project-card__visual { min-height: 15rem; }
  .about-copy h2 { font-size: 2.7rem; }
  .approach-stage { height: 35rem; }
  .orbit { width: 7rem; padding: .5rem; }
  .orbit--center { width: 9rem; }
  .orbit span { font-size: .92rem; }
  .contact-footer { flex-direction: column; gap: .4rem; }
  .case-hero { min-height: 60svh; }
  .case-wide-image { width: calc(100% - 2rem); margin-inline: 1rem; padding: 1rem; }
}

@media (pointer: coarse) {
  .cursor-spark { display: none; }
  .ambient-canvas { opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Motion-first editorial direction */
body::before {
  content: "";
  position: fixed;
  inset: 1rem;
  z-index: 68;
  pointer-events: none;
  border: 1px solid rgba(247,241,244,.16);
  background:
    linear-gradient(var(--paper),var(--paper)) left top / 1.1rem 1px no-repeat,
    linear-gradient(var(--paper),var(--paper)) left top / 1px 1.1rem no-repeat,
    linear-gradient(var(--paper),var(--paper)) right top / 1.1rem 1px no-repeat,
    linear-gradient(var(--paper),var(--paper)) right top / 1px 1.1rem no-repeat,
    linear-gradient(var(--paper),var(--paper)) left bottom / 1.1rem 1px no-repeat,
    linear-gradient(var(--paper),var(--paper)) left bottom / 1px 1.1rem no-repeat,
    linear-gradient(var(--paper),var(--paper)) right bottom / 1.1rem 1px no-repeat,
    linear-gradient(var(--paper),var(--paper)) right bottom / 1px 1.1rem no-repeat;
  opacity: .7;
}

body,
.work,
.about {
  color: var(--paper);
  background-color: transparent;
}

.work::before,
.about::before { opacity: .12; }
.work::before { background: radial-gradient(circle at 50% 50%, rgba(154,125,255,.3), transparent 32%); }
.about::before { border-color: rgba(255,255,255,.14); }
.work .eyebrow,
.about > .eyebrow { color: var(--pink-soft); }
.work .section-heading > p:last-child,
.about-copy .about-small { color: var(--muted); }

.site-header { padding-inline: clamp(2rem, 4vw, 4.5rem); }
.site-header.is-scrolled { background: transparent; border-color: transparent; backdrop-filter: none; }
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: calc(var(--header-opacity, 0) * .78);
  background: rgba(8,4,13,.72);
  backdrop-filter: blur(18px);
}

.hero { min-height: 105svh; padding-inline: clamp(5rem, 6vw, 7rem); }
.hero::before { opacity: .4; transform: translate(-50%, -50%) scale(var(--hero-ring-scale, 1)); }
.hero__title {
  max-width: 60rem;
  font-family: var(--font-heading);
  font-size: clamp(4rem, 8vw, 8.2rem);
  font-weight: 700;
  letter-spacing: -.065em;
  line-height: .88;
}
.hero__title em { color: inherit; opacity: .48; }
.hero__meta { margin-top: -7rem; }
.hero__intro { width: min(100%, 28rem); margin-right: 2vw; color: #b9afbe; }
.hero__aside { right: clamp(5rem,6vw,7rem); }
.round-link { left: clamp(5rem,6vw,7rem); }

.signature { left: 58%; top: 55%; width: 22rem; height: 22rem; mix-blend-mode: screen; }
.signature__halo { opacity: .26; }
.signature__core { color: rgba(247,241,244,.7); font-size: clamp(6rem,12vw,12rem); filter: drop-shadow(0 0 30px rgba(168,139,255,.48)); }
.signature i { color: rgba(213,198,255,.72); }

.manifesto {
  position: relative;
  z-index: 1;
  height: 220svh;
}
.manifesto__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: var(--pad);
}
.manifesto__sticky p {
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(3.4rem, 7.5vw, 7.8rem);
  line-height: .95;
  letter-spacing: -.06em;
}
.manifesto__sticky p span {
  opacity: .08;
  filter: blur(6px);
  transition: opacity .18s linear, filter .18s linear, color .18s linear;
}
.manifesto__sticky p span.is-lit { opacity: 1; filter: blur(0); }
.manifesto__sticky p span.is-accent { color: var(--pink-soft); }
.manifesto__spark {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  color: var(--pink);
  font-size: clamp(14rem,34vw,34rem);
  opacity: var(--manifesto-spark-opacity, .08);
  rotate: var(--manifesto-rotation, 0deg);
  scale: var(--manifesto-scale, .35);
  filter: blur(var(--manifesto-blur, 12px)) drop-shadow(0 0 5rem rgba(255,102,183,.32));
}

.signature i:nth-of-type(1) { transform: translate(calc(-9rem - var(--hero-spread, 0rem)), calc(-6rem - var(--hero-spread, 0rem))) rotate(var(--hero-particle-rotation, 0deg)); }
.signature i:nth-of-type(2) { transform: translate(calc(10rem + var(--hero-spread, 0rem)), calc(-3rem - var(--hero-spread, 0rem))) rotate(var(--hero-particle-rotation, 0deg)); }
.signature i:nth-of-type(3) { transform: translate(calc(7rem + var(--hero-spread, 0rem)), calc(8rem + var(--hero-spread, 0rem))) rotate(var(--hero-particle-rotation, 0deg)); }
.signature i:nth-of-type(4) { transform: translate(calc(-8rem - var(--hero-spread, 0rem)), calc(7rem + var(--hero-spread, 0rem))) rotate(var(--hero-particle-rotation, 0deg)); }
.manifesto__sticky small {
  position: absolute;
  bottom: 3rem;
  color: #817588;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.section { min-height: 100svh; padding-inline: clamp(5rem,6vw,7rem); }
.section-heading h2,
.about-copy h2,
.contact h2,
.case-hero h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -.055em;
}
.section-heading h2 em,
.about-copy h2 em,
.contact h2 em { color: inherit; opacity: .42; }

.work { padding-top: 10rem; padding-bottom: 12rem; }
.work .section-heading { padding-inline: clamp(5rem,6vw,7rem); }
.project-controls { color: #766d7b; padding-inline: clamp(5rem,6vw,7rem); }
.project-controls b { color: var(--paper); }
.icon-button { color: var(--paper); border-color: var(--line); }
.icon-button:hover { color: var(--ink); background: var(--paper); }
.project-rail { grid-auto-columns: min(74vw, 70rem); padding-inline: clamp(5rem,6vw,7rem); }
.project-card,
.project-card--risk,
.project-card--finance,
.project-card--borrow,
.project-card--play {
  color: var(--paper);
  border: 1px solid rgba(247,241,244,.16);
  background: rgba(15,9,23,.48);
  backdrop-filter: blur(14px);
}
.project-card:nth-child(2) { background: rgba(22,13,35,.55); }
.project-card:nth-child(3) { background: rgba(12,8,19,.58); }
.project-card:nth-child(4) { background: rgba(28,12,32,.52); }
.project-placeholder { opacity: .46; background-size: 7rem 7rem; }
.case-button--placeholder { color: var(--muted); }

.approach { min-height: 185svh; padding-top: 14rem; }
.approach .section-heading { position: relative; z-index: 2; }
.approach-stage {
  position: sticky;
  top: 8svh;
  margin-top: 10rem;
  height: 84svh;
  min-height: 42rem;
}
.orbit { border-color: rgba(247,241,244,.18); background: rgba(13,7,20,.68); }
.orbit--center { color: var(--bg-deep); background: rgba(247,241,244,.92); box-shadow: 0 0 8rem rgba(154,125,255,.14); }
.orbit:hover,
.orbit:focus-visible,
.orbit.is-active { color: var(--bg-deep); background: var(--paper); border-color: var(--paper); }
.approach-lines path.is-active { stroke: rgba(247,241,244,.85); }

.about { padding-top: 12rem; }
.about-grid { padding-inline: clamp(5rem,6vw,7rem); }
.about-copy h2 { color: var(--paper); }
.word-trigger { color: rgba(247,241,244,.5); }
.word-trigger:hover,
.word-trigger:focus-visible,
.word-trigger.is-active { color: var(--pink-soft); }
.about-copy > p { color: var(--muted); }
.about-orb { color: var(--violet); opacity: .14; }
.fact-card { color: var(--ink); background: rgba(247,241,244,.94); }
.skill-marquee { border-color: var(--line); }
.skill-marquee i { color: var(--pink-soft); }

.contact { min-height: 110svh; }
.contact h2 { max-width: 75rem; font-size: clamp(4rem,9vw,9rem); }
.contact-spark { opacity: .18; }

@media (max-width: 820px) {
  body::before { inset: .55rem; }
  .hero,
  .section { padding-inline: 1.6rem; }
  .hero { padding-top: 10rem; }
  .hero__meta { margin-top: 0; }
  .hero__title { font-size: clamp(3.5rem,16vw,6.4rem); }
  .hero__intro { margin-top: 16rem; }
  .signature { left: 55%; width: 15rem; height: 15rem; }
  .round-link { left: 1.6rem; }
  .work .section-heading,
  .project-controls,
  .about-grid { padding-inline: 1.6rem; }
  .project-rail { grid-auto-columns: calc(100vw - 3.2rem); padding-inline: 1.6rem; }
  .approach { min-height: 150svh; }
  .approach-stage { top: 5svh; height: 90svh; margin-top: 6rem; }
}

@media (max-width: 520px) {
  .hero__intro { margin-top: 12rem; }
  .manifesto__sticky p { font-size: clamp(3rem,15vw,5.2rem); }
  .project-placeholder { min-height: 18rem; }
}

/* Visual System v0.28 — portfolio application */
:root {
  --bg: var(--ds-canvas-950);
  --bg-deep: var(--ds-canvas-1000);
  --paper: var(--ds-paper-100);
  --ink: var(--ds-canvas-1000);
  --muted: var(--ds-muted-500);
  --pink: var(--ds-signal-pink);
  --pink-soft: var(--ds-signal-pink);
  --violet: var(--ds-signal-pink);
  --acid: var(--ds-paper-100);
  --line: var(--ds-line-soft);
  --pad: var(--ds-page-x);
  --radius: var(--ds-radius-md);
}

html,
body {
  background: var(--ds-canvas-950);
}

body {
  color: var(--ds-paper-100);
  background-image: none;
}

.motion-scene,
.signature,
.hero::before,
.manifesto__spark,
.work::before,
.approach::before,
.about::before,
.about-orb,
.contact-spark {
  display: none;
}

body::before {
  inset: 1rem;
  border-color: var(--ds-line-active);
  background:
    linear-gradient(var(--ds-paper-100), var(--ds-paper-100)) left top / 1.1rem 1px no-repeat,
    linear-gradient(var(--ds-paper-100), var(--ds-paper-100)) left top / 1px 1.1rem no-repeat,
    linear-gradient(var(--ds-paper-100), var(--ds-paper-100)) right top / 1.1rem 1px no-repeat,
    linear-gradient(var(--ds-paper-100), var(--ds-paper-100)) right top / 1px 1.1rem no-repeat,
    linear-gradient(var(--ds-paper-100), var(--ds-paper-100)) left bottom / 1.1rem 1px no-repeat,
    linear-gradient(var(--ds-paper-100), var(--ds-paper-100)) left bottom / 1px 1.1rem no-repeat,
    linear-gradient(var(--ds-paper-100), var(--ds-paper-100)) right bottom / 1.1rem 1px no-repeat,
    linear-gradient(var(--ds-paper-100), var(--ds-paper-100)) right bottom / 1px 1.1rem no-repeat;
  opacity: .62;
}

::selection {
  color: var(--ds-canvas-1000);
  background: var(--ds-signal-pink);
}

:focus-visible {
  outline: 2px solid var(--ds-signal-pink);
  outline-offset: 4px;
}

.ambient-canvas {
  opacity: .84;
  mix-blend-mode: screen;
}

.grain {
  opacity: .035;
}

.scroll-meter {
  background: rgba(255, 255, 255, .035);
}

.scroll-meter span {
  background: var(--ds-signal-pink);
  box-shadow: var(--ds-glow-hot);
}

.cursor-spark {
  background: var(--ds-signal-pink);
  box-shadow: 0 0 18px rgba(255, 159, 196, .72);
}

.trail-star,
.wordmark span,
.section-indicator span,
.hero__meta,
.eyebrow {
  color: var(--ds-signal-pink);
}

.section-indicator {
  border-color: var(--ds-glass-line);
  color: var(--ds-paper-100);
  background: var(--ds-glass-fill);
  box-shadow: var(--ds-glass-shadow);
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(135%);
}

.site-header {
  padding-inline: clamp(2rem, 4vw, 4.5rem);
}

.site-header::before {
  opacity: calc(var(--header-opacity, 0) * .92);
  background: var(--ds-glass-fill-strong);
  border-bottom: 1px solid var(--ds-line-soft);
  box-shadow: 0 14px 54px rgba(0, 0, 0, .18);
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(135%);
}

.site-header.is-scrolled {
  background: transparent;
  border-color: transparent;
}

.wordmark {
  font-family: var(--font-heading);
  font-weight: 700;
}

.site-nav a,
.header-contact {
  font-weight: 500;
}

.site-nav a {
  color: var(--ds-muted-500);
}

.site-nav a:hover,
.site-nav a:focus-visible,
.header-contact:hover,
.header-contact:focus-visible {
  color: var(--ds-signal-pink);
}

.hero {
  min-height: 108svh;
  padding-inline: clamp(5rem, 6vw, 7rem);
  background: transparent;
}

.hero__title {
  max-width: 68rem;
  font-size: clamp(4rem, 8.7vw, 9rem);
  font-weight: 700;
  letter-spacing: -.068em;
  line-height: .87;
}

.hero__title em,
.section-heading h2 em,
.about-copy h2 em,
.contact h2 em {
  color: var(--ds-signal-pink);
  opacity: 1;
}

.hero__intro,
.hero__aside,
.section-heading > p:last-child,
.about-copy > p,
.about-copy .about-small,
.contact-footer {
  color: var(--ds-muted-500);
}

.round-link,
.contact-link,
.icon-button,
.dialog-close,
.case-facts span {
  border-color: var(--ds-line-active);
  background: rgba(9, 9, 11, .44);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.round-link:hover,
.round-link:focus-visible,
.contact-link:hover,
.contact-link:focus-visible,
.icon-button:hover,
.icon-button:focus-visible,
.dialog-close:hover,
.dialog-close:focus-visible {
  color: var(--ds-canvas-1000);
  border-color: var(--ds-signal-pink);
  background: var(--ds-signal-pink);
  box-shadow: var(--ds-glow-active);
}

.manifesto__sticky p {
  font-weight: 600;
}

.manifesto__sticky p span {
  color: var(--ds-paper-100);
  opacity: .1;
}

.manifesto__sticky p span.is-accent {
  color: var(--ds-signal-pink);
}

.manifesto__sticky small,
.project-controls,
.project-card__topline,
.approach-note,
.contact-footer,
.nda-note {
  color: var(--ds-muted-500);
  font-family: var(--font-note);
}

.section,
.work,
.approach,
.about,
.contact {
  color: var(--ds-paper-100);
  background: transparent;
}

.work .eyebrow,
.about > .eyebrow {
  color: var(--ds-signal-pink);
}

.project-card,
.project-card--risk,
.project-card--finance,
.project-card--borrow,
.project-card--play,
.project-card:nth-child(2),
.project-card:nth-child(3),
.project-card:nth-child(4) {
  color: var(--ds-paper-100);
  border: 1px solid var(--ds-line-active);
  border-radius: var(--ds-radius-lg);
  background: rgba(23, 23, 28, .72);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .25);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.project-card::before {
  background: radial-gradient(
    circle at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(255, 159, 196, .28),
    rgba(255, 255, 255, .06) 18%,
    transparent 42%
  );
  mix-blend-mode: screen;
}

.project-card:hover {
  border-color: rgba(255, 159, 196, .46);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .42), var(--ds-glow-active);
}

.project-placeholder {
  color: var(--ds-paper-300);
  border-color: var(--ds-line-active);
  opacity: .72;
  background-color: rgba(5, 5, 6, .42);
  background-image:
    linear-gradient(90deg, transparent 49.8%, rgba(244, 242, 245, .2) 50%, transparent 50.2%),
    linear-gradient(transparent 49.8%, rgba(244, 242, 245, .2) 50%, transparent 50.2%);
}

.project-placeholder::before {
  background: linear-gradient(110deg, transparent 42%, rgba(255, 159, 196, .22) 50%, transparent 58%);
}

.project-placeholder__spark {
  color: var(--ds-signal-pink);
  filter: drop-shadow(0 0 2.2rem rgba(255, 159, 196, .48));
}

.case-button {
  border-color: var(--ds-line-active);
  font-weight: 500;
}

.case-button:hover,
.project-card--borrow .case-button:hover {
  color: var(--ds-canvas-1000);
  border-color: var(--ds-signal-pink);
  background: var(--ds-signal-pink);
}

.case-button--placeholder {
  color: var(--ds-muted-500);
}

.approach-lines path {
  stroke: var(--ds-line-active);
}

.approach-lines path.is-active {
  stroke: var(--ds-signal-pink);
}

.orbit {
  color: var(--ds-paper-100);
  border-color: var(--ds-line-active);
  background: var(--ds-glass-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(125%);
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(125%);
}

.orbit--center {
  color: var(--ds-paper-100);
  border: 1px solid rgba(255, 159, 196, .56);
  background: rgba(255, 159, 196, .08);
  box-shadow: var(--ds-glow-active), inset 0 0 44px rgba(255, 159, 196, .08);
}

.orbit:hover,
.orbit:focus-visible,
.orbit.is-active {
  color: var(--ds-canvas-1000);
  border-color: var(--ds-signal-pink);
  background: var(--ds-signal-pink);
  box-shadow: var(--ds-glow-active);
}

.word-trigger {
  color: var(--ds-paper-300);
}

.word-trigger:hover,
.word-trigger:focus-visible,
.word-trigger.is-active {
  color: var(--ds-signal-pink);
}

.fact-card {
  color: var(--ds-paper-100);
  border-color: var(--ds-line-active);
  background: var(--ds-glass-fill-strong);
  box-shadow: var(--ds-glass-shadow);
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(125%);
  -webkit-backdrop-filter: blur(var(--ds-glass-blur)) saturate(125%);
}

.fact-card figcaption span {
  color: var(--ds-muted-500);
}

.skill-marquee {
  border-color: var(--ds-line-soft);
}

.skill-marquee i {
  color: var(--ds-signal-pink);
}

.case-dialog {
  color: var(--ds-paper-100);
  background: var(--ds-canvas-1000);
}

.case-dialog::backdrop {
  background: rgba(5, 5, 6, .9);
}

.case-dialog__bar {
  border-color: var(--ds-line-soft);
  background: var(--ds-glass-fill-strong);
  backdrop-filter: blur(var(--ds-glass-blur));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur));
}

.case-wide-image,
.case-highlight img,
.play-grid figure {
  border: 1px solid var(--ds-line-soft);
  background: var(--ds-surface-800);
}

.case-outcome {
  color: var(--ds-paper-100);
  border: 1px solid rgba(255, 159, 196, .38);
  background: rgba(255, 159, 196, .07);
  box-shadow: inset 0 0 70px rgba(255, 159, 196, .035);
}

.case-outcome span {
  color: var(--ds-signal-pink);
}

@media (max-width: 820px) {
  body::before { inset: .55rem; }
  .hero,
  .section { padding-inline: 1.6rem; }
  .hero { padding-top: 10rem; }
  .hero__intro { margin-top: clamp(8rem, 24vh, 12rem); }
  .work .section-heading,
  .project-controls,
  .about-grid { padding-inline: 1.6rem; }
  .project-rail { grid-auto-columns: calc(100vw - 3.2rem); padding-inline: 1.6rem; }
}

@media (pointer: coarse) {
  .ambient-canvas { opacity: .66; }
}

/* Portfolio structure v0.30 — hero → work cloud → about */
.work {
  min-height: 100svh;
  padding-top: clamp(8rem, 12vw, 13rem);
  padding-bottom: clamp(7rem, 11vw, 11rem);
  overflow: clip;
}

.work-cloud {
  position: relative;
  width: calc(100% - clamp(10rem, 12vw, 14rem));
  max-width: 96rem;
  margin: clamp(4rem, 7vw, 7rem) auto 0;
  overflow: hidden;
  border: 1px solid var(--ds-line-soft);
  background: rgba(5, 5, 6, .78);
  touch-action: pan-y;
}

.work-cloud__viewport {
  position: relative;
  height: clamp(36rem, 62vw, 52rem);
  overflow: hidden;
  outline: none;
  cursor: grab;
  perspective: 1050px;
  perspective-origin: 50% 48%;
  user-select: none;
}

.work-cloud__viewport:active { cursor: grabbing; }
.work-cloud__viewport:focus-visible { box-shadow: inset 0 0 0 1px var(--ds-signal-pink); }
.work-cloud__hint {
  position: absolute;
  inset: 1.25rem auto auto 1.35rem;
  z-index: 1200;
  margin: 0;
  color: var(--ds-muted-700);
  font-family: var(--font-note);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}

.work-cloud__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.work-cloud__card {
  --cloud-x: 0px;
  --cloud-y: 0px;
  --cloud-z: 0px;
  --cloud-rx: 0deg;
  --cloud-ry: 0deg;
  --cloud-rz: 0deg;
  --cloud-scale: 1;
  --hover-scale: 1;
  --card-opacity: 1;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(244, 242, 245, .2);
  border-radius: 3px;
  background: var(--ds-surface-800);
  opacity: var(--card-opacity);
  transform: translate(-50%, -50%) translate3d(var(--cloud-x), var(--cloud-y), var(--cloud-z)) rotateX(var(--cloud-rx)) rotateY(var(--cloud-ry)) rotateZ(var(--cloud-rz)) scale(var(--cloud-scale)) scale(var(--hover-scale));
  transform-style: preserve-3d;
  transition: transform 760ms var(--ds-ease-out), opacity 480ms var(--ds-ease-out), border-color 220ms, box-shadow 220ms;
  will-change: transform, opacity;
  cursor: pointer;
}

.work-cloud__card:hover {
  --hover-scale: 1.045;
  border-color: rgba(255, 159, 196, .7);
  box-shadow: var(--ds-glow-active);
}

.work-cloud__card:focus-visible {
  outline: 2px solid var(--ds-signal-pink);
  outline-offset: 5px;
}

.work-cloud__card.is-active {
  border-color: rgba(255, 159, 196, .8);
  box-shadow: 0 22px 80px rgba(0, 0, 0, .48), var(--ds-glow-active);
}

.work-cloud__card.is-active:hover { --hover-scale: 1.01; }
.work-cloud__media {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(244, 242, 245, .52);
  background: #27242b;
}

.work-cloud__media::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 159, 196, .24), transparent 58%);
  transition: opacity var(--ds-time-base);
}

.work-cloud__card:hover .work-cloud__media::after,
.work-cloud__card.is-active .work-cloud__media::after { opacity: 1; }
.work-cloud__media span {
  position: relative;
  z-index: 1;
  font-family: var(--font-note);
  font-size: clamp(1rem, 2.8vw, 2.7rem);
  letter-spacing: -.04em;
}
.work-cloud__card:nth-child(2) .work-cloud__media { color: #17171c; background: #d2ced6; }
.work-cloud__card:nth-child(3) .work-cloud__media { background: #4c4851; }
.work-cloud__card:nth-child(4) .work-cloud__media { background: #121216; }
.work-cloud__card:nth-child(5) .work-cloud__media { color: #17171c; background: #97939d; }
.work-cloud__card:nth-child(6) .work-cloud__media { background: #24212a; }
.work-cloud__card:nth-child(7) .work-cloud__media { color: #17171c; background: #b4adb3; }
.work-cloud__card:nth-child(8) .work-cloud__media { background: #35313a; }

.work-cloud__caption {
  min-height: 10rem;
  padding: clamp(1.35rem, 2.5vw, 2rem);
  display: grid;
  grid-template-columns: 1fr .75fr 1fr;
  align-items: end;
  gap: clamp(1rem, 4vw, 4rem);
  border-top: 1px solid var(--ds-line-soft);
}

.work-cloud__caption h3 {
  margin: .65rem 0 0;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3vw, 3.2rem);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.04em;
}
.work-cloud__caption > p { margin: 0; color: var(--ds-muted-500); font-size: .88rem; }
.work-cloud__caption button {
  justify-self: end;
  padding: .65rem 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: var(--ds-paper-100);
  background: transparent;
  font-size: .78rem;
  cursor: pointer;
}
.work-cloud__caption button:hover:not(:disabled) { color: var(--ds-signal-pink); }
.work-cloud__caption button:disabled { color: var(--ds-muted-700); cursor: default; }

.about {
  padding-top: clamp(8rem, 12vw, 13rem);
}

.about > .eyebrow { margin-inline: clamp(5rem, 6vw, 7rem); }
.about-story {
  max-width: 96rem;
  min-height: 58rem;
  margin: clamp(3rem, 7vw, 7rem) auto clamp(6rem, 10vw, 10rem);
  padding: 0 clamp(5rem, 6vw, 7rem);
}
.about-story::after { content: ""; display: block; clear: both; }
.about-portrait {
  float: left;
  width: clamp(12rem, 21vw, 20rem);
  aspect-ratio: .78;
  margin: 1rem clamp(2rem, 4vw, 4rem) 2rem 0;
  overflow: hidden;
  border: 1px solid var(--ds-line-active);
  border-radius: 48% 48% 1.2rem 1.2rem;
  shape-outside: ellipse(48% 49% at 50% 50%);
  shape-margin: clamp(1rem, 2vw, 2rem);
  background: var(--ds-surface-800);
}
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-mascot {
  position: relative;
  float: right;
  width: clamp(18rem, 31vw, 30rem);
  aspect-ratio: 1;
  margin: clamp(5rem, 9vw, 10rem) -2rem 1rem clamp(1rem, 3vw, 3rem);
  shape-outside: ellipse(47% 45% at 52% 50%);
  shape-margin: clamp(.75rem, 2vw, 1.75rem);
  isolation: isolate;
}
.about-mascot::before {
  content: "";
  position: absolute;
  inset: 21%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 159, 196, .08);
  filter: blur(42px);
}
.mascot-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  outline: 0;
  touch-action: pan-y;
  cursor: grab;
  transition: opacity 520ms var(--ds-ease-out);
}
.mascot-canvas.is-dragging { cursor: grabbing; }
.about-mascot.is-3d-ready .mascot-canvas { opacity: 1; }
.mascot-loading {
  position: absolute;
  inset: 50% auto auto 50%;
  margin: 0;
  translate: -50% -50%;
  color: var(--ds-muted-700);
  font-family: var(--font-note);
  font-size: .7rem;
  white-space: nowrap;
  transition: opacity 240ms;
}
.about-mascot.is-3d-ready .mascot-loading { opacity: 0; }
.about-copy h2 {
  max-width: none;
  font-size: clamp(3.2rem, 6.8vw, 7.2rem);
  line-height: .93;
}
.about-copy > p {
  max-width: 50rem;
  margin-top: 3rem;
  font-size: var(--ds-type-body-lg);
}

body.cloud-case-is-open { overflow: hidden; }
.cloud-case {
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--ds-paper-100);
  background: var(--ds-canvas-950);
  animation: cloud-case-in 520ms var(--ds-ease-out) both;
}
.cloud-case__header {
  position: sticky;
  inset: 0 0 auto;
  z-index: 4;
  min-height: 4.5rem;
  padding: 0 var(--ds-page-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--ds-line-soft);
  background: var(--ds-glass-fill-strong);
  backdrop-filter: blur(var(--ds-glass-blur));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur));
}
.cloud-case__header > span { font-family: var(--font-note); font-size: .75rem; letter-spacing: .11em; }
.cloud-case__header button,
.cloud-case__back {
  padding: .65rem 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: var(--ds-paper-100);
  background: transparent;
  font-size: .76rem;
  cursor: pointer;
}
.cloud-case__header button span { margin-left: .55rem; color: var(--ds-muted-700); }
.cloud-case__body { width: min(100%, var(--ds-max)); margin: 0 auto; padding: var(--ds-page-x); }
.cloud-case__hero {
  width: 100%;
  min-height: clamp(28rem, 68vh, 52rem);
  display: grid;
  place-items: center;
  border: 1px solid var(--ds-line-active);
}
.cloud-case__hero span { color: rgba(244, 242, 245, .64); font-family: var(--font-note); font-size: .7rem; letter-spacing: .11em; text-transform: uppercase; }
.cloud-case__intro {
  padding: clamp(4rem, 9vw, 9rem) 0;
  display: grid;
  grid-template-columns: 1fr minmax(0, 2.5fr) minmax(15rem, 1fr);
  gap: clamp(1.5rem, 4vw, 5rem);
  align-items: start;
  border-bottom: 1px solid var(--ds-line-soft);
}
.cloud-case__intro h2 {
  margin: -.08em 0 0;
  font-family: var(--font-heading);
  font-size: clamp(3.7rem, 8vw, 9rem);
  font-weight: 600;
  line-height: .86;
  letter-spacing: -.065em;
}
.cloud-case__intro > div { display: grid; gap: 1.5rem; color: var(--ds-muted-500); font-size: .9rem; }
.cloud-case__intro > div p { margin: 0; }
.cloud-case__modules { display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid var(--ds-line-soft); }
.cloud-case__modules article { min-height: 24rem; padding: 1.5rem; display: flex; flex-direction: column; border-right: 1px solid var(--ds-line-soft); border-bottom: 1px solid var(--ds-line-soft); }
.cloud-case__modules span { color: var(--ds-muted-700); font-family: var(--font-note); font-size: .7rem; }
.cloud-case__modules h3 { margin: auto 0 .6rem; font-family: var(--font-heading); font-size: clamp(1.8rem, 3vw, 3.2rem); }
.cloud-case__modules p { margin: 0; color: var(--ds-muted-500); font-size: .86rem; }
.cloud-case__back { margin: clamp(4rem, 8vw, 8rem) 0; }
@keyframes cloud-case-in { from { opacity: 0; } }

@media (max-width: 820px) {
  .work-cloud { width: calc(100% - 3.2rem); }
  .work-cloud__viewport { height: 36rem; }
  .work-cloud__caption { grid-template-columns: 1fr; align-items: start; }
  .work-cloud__caption button { justify-self: start; }
  .about > .eyebrow { margin-inline: 1.6rem; }
  .about-story { min-height: 0; padding-inline: 1.6rem; }
  .about-portrait { width: clamp(9rem, 34vw, 14rem); margin-right: 1.5rem; }
  .about-mascot { width: clamp(14rem, 48vw, 21rem); margin-right: -1rem; }
  .about-copy h2 { font-size: clamp(3rem, 12vw, 5.5rem); }
  .cloud-case__intro,
  .cloud-case__modules { grid-template-columns: 1fr; }
  .cloud-case__modules { border-left: 0; }
  .cloud-case__modules article { min-height: 14rem; border-left: 1px solid var(--ds-line-soft); }
}

@media (max-width: 560px) {
  .work-cloud { width: calc(100% - 2rem); }
  .work-cloud__viewport { height: 31rem; }
  .about-story { display: flex; flex-direction: column; }
  .about-portrait,
  .about-mascot { float: none; shape-outside: none; }
  .about-portrait { width: min(68vw, 15rem); margin: 0 0 2rem; }
  .about-mascot { width: min(88vw, 23rem); margin: -2rem auto -1rem; order: 2; }
  .about-copy { display: contents; }
  .about-copy h2 { order: 1; }
  .about-copy > p { order: 3; }
  .about-copy .about-small { order: 4; }
  .cloud-case__hero { min-height: 22rem; }
}

/* Keep the primary routes available in the header at tablet and phone widths. */
@media (max-width: 820px) {
  .site-header {
    grid-template-columns: 1fr auto 1fr;
    padding-inline: clamp(1.1rem, 4vw, 2rem);
  }

  .site-nav {
    position: static;
    inset: auto;
    z-index: auto;
    display: flex;
    gap: clamp(.9rem, 3vw, 1.4rem);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    translate: none;
    white-space: nowrap;
  }

  .site-nav a:first-child { display: inline; }
}

@media (max-width: 560px) {
  .site-header {
    grid-template-columns: auto 1fr;
    gap: 1rem;
  }

  .site-header { padding-inline: .9rem; }

  .site-nav { justify-self: end; gap: .72rem; }

  .site-nav a { font-size: .7rem; }
  .header-contact { display: none; }
}

/* Interaction-first pages v36 */
.work--landing.section{min-height:100svh;padding:4.5rem 0 3rem;display:grid;align-content:center}.work--landing .work-cloud{width:min(94vw,96rem);margin:1rem auto 0}.work-landing__label{width:min(94vw,96rem);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:2rem}.work-landing__label span{color:var(--ds-muted-500);font:500 .72rem/1 var(--font-note);letter-spacing:.06em;text-transform:uppercase}.work--landing .work-cloud__viewport{height:clamp(31rem,64vh,48rem)}
.popup-case__grid{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--ds-line-soft)}.popup-case__grid article{min-height:20rem;padding:1.5rem;display:flex;flex-direction:column;border-right:1px solid var(--ds-line-soft);border-bottom:1px solid var(--ds-line-soft)}.popup-case__grid article > span{color:var(--ds-muted-700);font:500 .7rem var(--font-note)}.popup-case__grid h3{margin:auto 0 .6rem;font-size:clamp(1.8rem,3vw,3.2rem)}.popup-case__grid p{margin:0;color:var(--ds-muted-500);font-size:.88rem}
.page-intro{padding:9rem var(--pad) 2.5rem;display:flex;align-items:end;justify-content:space-between;gap:4rem;border-bottom:1px solid var(--ds-line-soft)}.page-intro>p:last-child{width:min(34rem,100%);margin:0;color:var(--ds-muted-500);font-size:1rem}.projects-shell{padding-bottom:8rem}.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);padding:0 var(--pad)}.project-tile{position:relative;min-height:26rem;padding:1.5rem;display:grid;grid-template-columns:3rem 1fr;grid-template-rows:1fr auto;gap:1.5rem;text-align:left;color:var(--ds-paper-100);background:transparent;border:0;border-right:1px solid var(--ds-line-soft);border-bottom:1px solid var(--ds-line-soft);cursor:pointer;overflow:hidden}.project-tile:nth-child(odd){border-left:1px solid var(--ds-line-soft)}.project-tile::before{content:"";position:absolute;inset:0;opacity:0;background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(255,159,196,.12),transparent 34rem);transition:opacity .3s}.project-tile:hover::before,.project-tile:focus-visible::before{opacity:1}.project-tile>span,.project-tile>div>p:first-child{color:var(--ds-muted-700);font:500 .7rem/1.2 var(--font-note);letter-spacing:.08em;text-transform:uppercase}.project-tile>div{align-self:end}.project-tile h2{margin:.85rem 0 1rem;font-size:clamp(2.4rem,4.8vw,5rem);line-height:.88;letter-spacing:-.055em}.project-tile>div>p:last-child{max-width:34rem;margin:0;color:var(--ds-muted-500);font-size:1rem}.project-tile>b{grid-column:2;justify-self:end;font-size:.78rem}.project-tile:hover h2,.project-tile:focus-visible h2{color:var(--ds-signal-pink)}
body.project-popup-open{overflow:hidden}.project-popup{position:fixed;inset:0;z-index:300;overflow-y:auto;color:var(--ds-paper-100);background:var(--ds-canvas-950);animation:cloud-case-in .45s var(--ds-ease-out) both}.project-popup>header{position:sticky;top:0;z-index:4;min-height:4.5rem;padding:0 var(--ds-page-x);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ds-line-soft);background:var(--ds-glass-fill-strong);backdrop-filter:blur(var(--ds-glass-blur))}.project-popup>header>span{font:500 .75rem var(--font-note);letter-spacing:.11em}.project-popup button{color:inherit;background:transparent;border:0;cursor:pointer}.project-popup>header button{border-bottom:1px solid currentColor;padding:.65rem 0;font-size:.76rem}.project-popup>header i{margin-left:.5rem;color:var(--ds-muted-700);font-style:normal}.project-popup__body{width:min(100%,var(--ds-max));margin:auto;padding:clamp(6rem,11vw,11rem) var(--ds-page-x)}.project-popup__body>h2{max-width:70rem;margin:1.5rem 0 4rem;font-size:clamp(4rem,10vw,10rem);line-height:.78;letter-spacing:-.075em}.project-popup__intro{display:grid;grid-template-columns:1fr 2fr;gap:4rem;padding:2rem 0 5rem;border-top:1px solid var(--ds-line-soft)}.project-popup__intro p{margin:0}.project-popup__intro p:last-child{max-width:40rem;color:var(--ds-muted-500);font-size:1.1rem}.project-popup__back{margin-top:5rem!important;border-bottom:1px solid currentColor!important;padding:.7rem 0!important}
.about-shell{padding-top:4.5rem}.page-intro--about{min-height:28rem;padding-top:9rem}.about-flow{position:relative}.about-mascot-track{position:absolute;inset:0;z-index:4;pointer-events:none}.about-mascot-traveler{position:sticky;top:17vh;width:min(31vw,28rem);height:min(31vw,28rem);margin-left:var(--mascot-left,calc(68vw - 14rem));transform:translate3d(0,0,0);transition:margin-left .9s var(--ds-ease-soft);pointer-events:auto;isolation:isolate}.page-about[data-mascot-side="left"]{--mascot-left:clamp(2rem,8vw,8rem)}.page-about[data-mascot-side="right"]{--mascot-left:calc(78vw - min(31vw,28rem))}.about-mascot-traveler::before{content:"";position:absolute;inset:20%;border-radius:50%;background:rgba(255,159,196,.09);filter:blur(42px)}.about-mascot-traveler.is-3d-ready .mascot-canvas{opacity:1}.about-mascot-traveler.is-3d-ready .mascot-loading{opacity:0}.about-chapter--compact{min-height:82vh;grid-template-columns:4rem 1fr;padding:clamp(7rem,11vw,11rem) var(--pad);transition:background .6s}.about-chapter--compact>span{color:var(--ds-muted-700);font:500 .7rem var(--font-note)}.about-chapter--compact>h2{position:static;grid-column:2;margin:0 0 2.5rem;font-size:clamp(3rem,7vw,7rem);line-height:.8}.about-chapter--compact .about-chapter__copy{grid-column:2;width:min(43%,38rem);align-self:center;transition:margin .9s var(--ds-ease-soft),transform .9s var(--ds-ease-soft),opacity .5s}.about-chapter--compact[data-mascot-active][data-mascot-side="left"] .about-chapter__copy{margin-left:auto}.about-chapter--compact[data-mascot-active][data-mascot-side="right"] .about-chapter__copy{margin-right:auto}.about-chapter--compact:not([data-mascot-active]) .about-chapter__copy{opacity:.48}.about-chapter--compact .about-chapter__copy p{margin:0 0 1.3rem;font-size:clamp(1rem,1.55vw,1.35rem);line-height:1.45}.about-chapter--compact .about-chapter__copy p:first-child{color:var(--ds-paper-100);font-weight:600}.about-chapter--compact .about-chapter__copy p:last-child{color:var(--ds-muted-500)}.about-contact--compact{min-height:75vh}.about-contact--compact h2{font-size:clamp(3.2rem,7vw,7rem)}
@media(max-width:820px){.work--landing.section{padding-inline:0}.work-landing__label{width:calc(100% - 3.2rem);align-items:flex-start}.work-landing__label span{max-width:11rem;text-align:right}.popup-case__grid{grid-template-columns:1fr}.popup-case__grid article{min-height:12rem}.page-intro{padding-inline:1.6rem}.projects-grid{grid-template-columns:1fr;padding-inline:1.6rem}.project-tile,.project-tile:nth-child(odd){min-height:22rem;border-left:1px solid var(--ds-line-soft)}.project-popup__intro{grid-template-columns:1fr;gap:1rem}.about-mascot-traveler{width:52vw;height:52vw}.page-about[data-mascot-side="left"]{--mascot-left:-4vw}.page-about[data-mascot-side="right"]{--mascot-left:52vw}.about-chapter--compact{grid-template-columns:2rem 1fr;padding-inline:1.6rem}.about-chapter--compact .about-chapter__copy{width:58%}.about-chapter--compact>h2{font-size:clamp(3rem,14vw,5.5rem)}}
@media(max-width:560px){.page-intro{min-height:22rem;display:block}.page-intro>p:last-child{margin-top:1.5rem}.work--landing .work-cloud{width:calc(100% - 2rem)}.work--landing .work-cloud__viewport{height:58vh}.project-tile{min-height:19rem}.about-mascot-traveler{width:58vw;height:58vw;top:22vh}.page-about[data-mascot-side="left"]{--mascot-left:-8vw}.page-about[data-mascot-side="right"]{--mascot-left:50vw}.about-chapter--compact{min-height:85vh}.about-chapter--compact .about-chapter__copy{width:70%;padding:.8rem;background:rgba(8,8,10,.68);backdrop-filter:blur(8px)}}

/* Borderless composition v37 */
body::before{display:none}
.work-cloud{border:0;background:transparent}
.work-cloud__caption{border-top:0}
.capability-map{border:0;background:transparent}
.page-intro{border-bottom:0}
.project-tile,.project-tile:nth-child(odd){border:0}
.about-chapter{border-top:0}
.route-next__link{border-top:0;border-bottom:0}

/* Mascot text collision v38 */
.about-mascot-track{inset:0;display:block}
.about-mascot-traveler{left:50%;width:min(31vw,28rem);height:min(31vw,28rem);margin-left:0;transform:translate3d(-50%,var(--mascot-drift,0),0) rotate(var(--mascot-roll,0deg));transition:transform .35s var(--ds-ease-soft)}
.about-chapter--compact{display:grid;grid-template-columns:4rem minmax(0,1fr);align-content:center}
.about-chapter--compact>h2{grid-column:2;font-size:clamp(2.8rem,5.7vw,5.8rem)}
.about-chapter--compact .about-chapter__copy{grid-column:2;width:100%;display:grid;grid-template-columns:minmax(0,1fr) clamp(18rem,31vw,30rem) minmax(0,1fr);gap:clamp(1.25rem,3vw,3.5rem);align-items:center;margin:0;opacity:.48;transition:opacity .55s,transform .7s var(--ds-ease-soft)}
.about-chapter--compact .about-chapter__copy p{max-width:31rem}
.about-chapter--compact .about-chapter__copy p:first-child{grid-column:1;text-align:right;justify-self:end}
.about-chapter--compact .about-chapter__copy p:last-child{grid-column:3;text-align:left;justify-self:start}
.about-chapter--compact[data-mascot-active] .about-chapter__copy{opacity:1;transform:translateY(-.5rem)}
@media(max-width:820px){.about-mascot-traveler{left:50%;width:48vw;height:48vw}.about-chapter--compact .about-chapter__copy{width:100%;grid-template-columns:minmax(0,1fr) 42vw minmax(0,1fr);gap:1rem}.about-chapter--compact .about-chapter__copy p{font-size:1rem}.about-chapter--compact>h2{font-size:clamp(2.8rem,11vw,5rem)}}
@media(max-width:560px){.about-mascot-traveler{left:50%;top:23vh;width:54vw;height:54vw}.about-chapter--compact{min-height:92vh;align-content:start;padding-top:7rem}.about-chapter--compact .about-chapter__copy{display:grid;grid-template-columns:1fr;gap:1.1rem;padding-top:48vw;background:transparent;backdrop-filter:none}.about-chapter--compact .about-chapter__copy p:first-child,.about-chapter--compact .about-chapter__copy p:last-child{grid-column:1;text-align:left;justify-self:start}.about-chapter--compact .about-chapter__copy p{max-width:100%}}

/* Quiet canvas + staged mascot entrance v39 */
.work--landing .work-cloud{margin-top:0}
.work-cloud__caption{grid-template-columns:1fr auto;min-height:7rem;padding-inline:0}
.work-cloud__caption>p{display:none}
.work-cloud__caption button{grid-column:2}
.capability-map{overflow:visible;background:transparent;isolation:auto}
.capability-map::before{display:none}
.capability-map__topline,.capability-map__status,.work-cloud__hint,.work-landing__label,.section-indicator{display:none!important}
.about-mascot-traveler{opacity:var(--mascot-presence,0);transform:translate3d(-50%,calc(var(--mascot-drift,0px) + var(--mascot-entry-y,90px)),0) rotate(var(--mascot-roll,0deg)) scale(calc(.72 + var(--mascot-presence,0)*.28));filter:blur(calc((1 - var(--mascot-presence,0))*8px));transition:transform .16s linear,opacity .16s linear,filter .16s linear}

.about-chapter--compact{display:block;min-height:100vh;padding:clamp(6rem,9vw,9rem) var(--pad)}
.about-chapter__head{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:2rem;margin-bottom:clamp(7rem,13vw,13rem)}
.about-chapter__head>span{color:var(--ds-paper-100);font:500 clamp(.9rem,1.3vw,1.15rem)/1.2 var(--font-body)}
.about-chapter__head>b{font:600 clamp(4rem,8vw,8rem)/.7 var(--font-heading);letter-spacing:-.06em}
.about-chapter__head>h2{position:static;margin:0;justify-self:end;font:600 clamp(1rem,1.4vw,1.3rem)/1.2 var(--font-heading);letter-spacing:-.02em}
.about-chapter--compact .about-chapter__copy{display:grid;grid-template-columns:minmax(0,1fr) clamp(20rem,30vw,31rem) minmax(0,1fr);gap:clamp(1.5rem,3vw,4rem);width:100%;margin:0;align-items:center}
.about-chapter--compact .about-chapter__copy p{max-width:none;margin:0;font:500 clamp(1.45rem,2.45vw,2.75rem)/1.28 var(--font-body);letter-spacing:-.035em}
.about-chapter--compact .about-chapter__copy p:first-child{grid-column:1;text-align:right;justify-self:stretch}
.about-chapter--compact .about-chapter__copy p:last-child{grid-column:3;text-align:left;justify-self:stretch;color:var(--ds-paper-100)}
@media(max-width:820px){.about-chapter__head{margin-bottom:45vw}.about-chapter--compact .about-chapter__copy{grid-template-columns:1fr 1fr;gap:1.25rem}.about-chapter--compact .about-chapter__copy p:first-child{grid-column:1}.about-chapter--compact .about-chapter__copy p:last-child{grid-column:2}.about-chapter--compact .about-chapter__copy p{font-size:clamp(1.1rem,3vw,1.5rem)}}
@media(max-width:560px){.about-chapter--compact{padding-top:5rem}.about-chapter__head{gap:1rem;margin-bottom:52vw}.about-chapter__head>b{font-size:3.4rem}.about-chapter--compact .about-chapter__copy{grid-template-columns:1fr}.about-chapter--compact .about-chapter__copy p:first-child,.about-chapter--compact .about-chapter__copy p:last-child{grid-column:1;text-align:left}.about-chapter--compact .about-chapter__copy p{font-size:1.15rem}}

/* Motion + relational map v0.31 */
.hero {
  min-height: 100svh;
  justify-content: center;
  padding-bottom: 6rem;
}
.hero__title { max-width: min(58rem, 62vw); font-size: clamp(4rem, 7.4vw, 8rem); }
.hero__intro { align-self: flex-start; width: min(31rem, 38vw); margin: 2.5rem 0 0; }
.hero__aside { display: none; }

.hero-work-preview {
  position: absolute;
  right: clamp(4rem, 7vw, 8rem);
  top: 17vh;
  width: min(34vw, 31rem);
  height: 65vh;
  perspective: 1050px;
  transform-style: preserve-3d;
}
.hero-work-preview a {
  position: absolute;
  width: clamp(8rem, 13vw, 12rem);
  aspect-ratio: .78;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid var(--ds-line-active);
  border-radius: 3px;
  color: var(--ds-paper-100);
  background: rgba(23, 23, 28, .78);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform-style: preserve-3d;
  transition: border-color 220ms, box-shadow 220ms, scale 220ms;
  animation: hero-card-float var(--preview-speed, 7s) ease-in-out var(--preview-delay, 0s) infinite alternate;
}
.hero-work-preview a::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  background: radial-gradient(circle at 35% 25%, rgba(255, 159, 196, .18), transparent 42%);
}
.hero-work-preview a:nth-child(1) { left: 2%; top: 12%; --preview-speed: 6.4s; --preview-delay: -2s; rotate: -8deg; }
.hero-work-preview a:nth-child(2) { right: 1%; top: 2%; --preview-speed: 8.1s; --preview-delay: -5s; rotate: 7deg; }
.hero-work-preview a:nth-child(3) { left: 13%; bottom: 3%; --preview-speed: 7.2s; --preview-delay: -1s; rotate: 5deg; }
.hero-work-preview a:nth-child(4) { right: 4%; bottom: 12%; --preview-speed: 5.8s; --preview-delay: -3.4s; rotate: -6deg; }
.hero-work-preview a:hover,
.hero-work-preview a:focus-visible { scale: 1.06; border-color: var(--ds-signal-pink); box-shadow: 0 28px 80px rgba(0, 0, 0, .45), var(--ds-glow-active); }
.hero-work-preview span,
.hero-work-preview b { position: relative; z-index: 1; }
.hero-work-preview span { color: var(--ds-signal-pink); font: 500 .75rem var(--font-note); }
.hero-work-preview b { max-width: 7rem; font: 600 clamp(1rem, 1.5vw, 1.35rem)/1 var(--font-heading); }
@keyframes hero-card-float {
  0% { translate: -8px 6px; transform: rotateX(-3deg) rotateY(-4deg) translateZ(0); }
  48% { translate: 10px -13px; transform: rotateX(4deg) rotateY(5deg) translateZ(32px); }
  100% { translate: -2px 9px; transform: rotateX(-1deg) rotateY(2deg) translateZ(10px); }
}

.approach {
  min-height: auto;
  padding-top: clamp(8rem, 12vw, 13rem);
  padding-bottom: clamp(8rem, 12vw, 13rem);
}
.approach .section-heading { margin-bottom: clamp(4rem, 7vw, 7rem); }
.capability-map {
  position: relative;
  width: min(100%, 96rem);
  min-height: clamp(38rem, 64vw, 56rem);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--ds-line-soft);
  background: rgba(9, 9, 11, .72);
  isolation: isolate;
}
.capability-map::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .22;
  background: radial-gradient(circle at 50% 50%, rgba(255,159,196,.08), transparent 35%);
}
.capability-map__topline {
  position: absolute;
  inset: 1.25rem 1.5rem auto;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.capability-map__topline p {
  margin: 0;
  color: var(--ds-muted-700);
  font: 500 .7rem var(--font-note);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.capability-map__scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.capability-branch { cursor: pointer; transition: opacity 360ms var(--ds-ease-soft); outline: none; }
.capability-branch.is-dim { opacity: .14; }
.capability-line-main,
.capability-line-sub { vector-effect: non-scaling-stroke; transition: stroke 280ms, opacity 280ms; }
.capability-line-main { stroke: rgba(244,242,245,.62); stroke-width: 1.05; }
.capability-line-sub { stroke: rgba(244,242,245,.11); stroke-width: .75; }
.capability-node-main,
.capability-node-sub,
.capability-center-node { fill: var(--ds-paper-100); }
.capability-hit { fill: transparent; }
.capability-label-main {
  fill: var(--ds-paper-100);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  pointer-events: none;
}
.capability-label-sub {
  fill: var(--ds-paper-300);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .035em;
  opacity: 0;
  transition: opacity 220ms;
  pointer-events: none;
}
.capability-center-label {
  fill: var(--ds-muted-500);
  font-family: var(--font-note);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
}
.capability-artifact { fill: none; stroke: rgba(244,242,245,.72); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.capability-branch.is-active .capability-line-main { stroke: var(--ds-signal-pink); stroke-width: 1.5; }
.capability-branch.is-active .capability-line-sub { stroke: rgba(255,159,196,.42); }
.capability-branch.is-active .capability-node-main { fill: var(--ds-signal-pink); filter: drop-shadow(0 0 8px rgba(255,159,196,.62)); }
.capability-branch.is-active .capability-label-sub { opacity: .82; }
.capability-branch:focus-visible .capability-node-main { stroke: var(--ds-paper-100); stroke-width: 2; }
.capability-map__status {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.25rem;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(16rem, 2fr);
  gap: 2rem;
  align-items: end;
  pointer-events: none;
}
.capability-map__status span { color: var(--ds-signal-pink); font: 500 .7rem var(--font-note); letter-spacing: .1em; text-transform: uppercase; }
.capability-map__status p { width: min(34rem, 100%); margin: 0; color: var(--ds-muted-500); font-size: .86rem; }

@media (max-width: 900px) {
  .hero { justify-content: flex-start; padding-top: 9rem; }
  .hero__title { max-width: 100%; font-size: clamp(3.7rem, 14vw, 7rem); }
  .hero__intro { width: min(90%, 31rem); }
  .hero-work-preview { right: 1.6rem; top: auto; bottom: 2rem; width: 62vw; height: 36vh; }
  .hero-work-preview a { width: clamp(6.5rem, 19vw, 9rem); }
  .round-link { display: none; }
  .capability-map { min-height: 38rem; }
}

@media (max-width: 560px) {
  .hero__title { font-size: clamp(3.4rem, 16vw, 5.7rem); }
  .hero__intro { margin-top: 1.5rem; }
  .hero-work-preview { left: 1.6rem; right: 1.6rem; width: auto; height: 35vh; }
  .hero-work-preview a { width: clamp(6rem, 27vw, 8rem); padding: .75rem; }
  .capability-map { min-height: 34rem; margin-inline: -1rem; width: calc(100% + 2rem); }
  .capability-map__topline p:last-child { display: none; }
  .capability-map__status { grid-template-columns: 1fr; gap: .65rem; }
  .capability-label-main { font-size: 18px; }
  .capability-label-sub { font-size: 13px; }
}

/* Final composition guards v39 — keep the homepage quiet and borderless. */
.work--landing .work-cloud {
  margin-top: 0;
  border: 0;
  background: transparent;
}
.work-landing__label,
.work-cloud__hint,
.section-indicator,
.capability-map__topline,
.capability-map__status {
  display: none !important;
}
.work-cloud__caption {
  min-height: 7rem;
  padding-inline: 0;
  grid-template-columns: 1fr auto;
  border: 0;
}
.work-cloud__caption > p { display: none; }
.work-cloud__caption button { grid-column: 2; }
.capability-map {
  overflow: visible;
  border: 0;
  background: transparent;
  isolation: auto;
}
.capability-map::before { display: none; }

/* About is staged as chapters around one persistent physical character. */
.about-mascot-traveler {
  opacity: var(--mascot-presence, 0);
  transform: translate3d(-50%, calc(var(--mascot-drift, 0px) + var(--mascot-entry-y, 90px)), 0)
    rotate(var(--mascot-roll, 0deg))
    scale(var(--mascot-scale, .72));
  filter: blur(var(--mascot-blur, 8px));
  transition: transform .16s linear, opacity .16s linear, filter .16s linear;
}
.about-chapter--compact {
  display: block;
  min-height: 100vh;
  padding: clamp(6rem, 9vw, 9rem) var(--pad);
}
.about-chapter__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 2rem;
  margin-bottom: clamp(7rem, 13vw, 13rem);
}
.about-chapter__head > span {
  color: var(--ds-paper-100);
  font: 500 clamp(.9rem, 1.3vw, 1.15rem)/1.2 var(--font-body);
}
.about-chapter__head > b {
  font: 600 clamp(4rem, 8vw, 8rem)/.7 var(--font-heading);
  letter-spacing: -.06em;
}
.about-chapter__head > h2 {
  position: static;
  justify-self: end;
  margin: 0;
  font: 600 clamp(1rem, 1.4vw, 1.3rem)/1.2 var(--font-heading);
  letter-spacing: -.02em;
}
.about-chapter--compact .about-chapter__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(20rem, 30vw, 31rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 4rem);
  width: 100%;
  margin: 0;
  opacity: .48;
}
.about-chapter--compact[data-mascot-active] .about-chapter__copy { opacity: 1; }
.about-chapter--compact .about-chapter__copy p {
  max-width: none;
  margin: 0;
  font: 500 clamp(1.45rem, 2.45vw, 2.75rem)/1.28 var(--font-body);
  letter-spacing: -.035em;
}
.about-chapter--compact .about-chapter__copy p:first-child {
  grid-column: 1;
  justify-self: stretch;
  text-align: right;
}
.about-chapter--compact .about-chapter__copy p:last-child {
  grid-column: 3;
  justify-self: stretch;
  color: var(--ds-paper-100);
  text-align: left;
}
@media (max-width: 820px) {
  .about-chapter__head { margin-bottom: 45vw; }
  .about-chapter--compact .about-chapter__copy {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
  .about-chapter--compact .about-chapter__copy p:first-child { grid-column: 1; }
  .about-chapter--compact .about-chapter__copy p:last-child { grid-column: 2; }
  .about-chapter--compact .about-chapter__copy p { font-size: clamp(1.1rem, 3vw, 1.5rem); }
}
@media (max-width: 560px) {
  .about-chapter--compact { padding-top: 5rem; }
  .about-chapter__head { gap: 1rem; margin-bottom: 52vw; }
  .about-chapter__head > b { font-size: 3.4rem; }
  .about-chapter--compact .about-chapter__copy { grid-template-columns: 1fr; }
  .about-chapter--compact .about-chapter__copy p:first-child,
  .about-chapter--compact .about-chapter__copy p:last-child {
    grid-column: 1;
    text-align: left;
  }
  .about-chapter--compact .about-chapter__copy p { font-size: 1.15rem; }
}

/* Kinetic text collision + glass case dialogs v40 */
.about-mascot-traveler {
  transform: translate3d(calc(-50% + var(--mascot-x, 0px)), calc(var(--mascot-drift, 0px) + var(--mascot-entry-y, 90px)), 0)
    rotate(var(--mascot-roll, 0deg))
    scale(var(--mascot-scale, .72));
  will-change: transform, opacity, filter;
}
.about-chapter--compact .about-chapter__copy {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  overflow: visible;
}
.about-chapter--compact .about-chapter__copy p {
  position: relative;
  z-index: 2;
  max-width: 46vw;
  overflow: visible;
}
.about-chapter--compact .about-chapter__copy p:first-child {
  grid-column: 1;
  padding-right: clamp(.3rem, 1vw, 1rem);
}
.about-chapter--compact .about-chapter__copy p:last-child {
  grid-column: 2;
  padding-left: clamp(.3rem, 1vw, 1rem);
}
.about-word {
  display: inline-block;
  transform: translate3d(var(--word-push-x, 0), var(--word-push-y, 0), 0) rotate(var(--word-push-rotate, 0deg));
  transform-origin: center;
  transition: transform .42s cubic-bezier(.2, .8, .2, 1), color .25s ease, text-shadow .25s ease;
  will-change: transform;
}
.about-chapter--compact[data-mascot-active] .about-word {
  text-shadow: 0 0 24px rgba(255, 159, 196, .08);
}

.cloud-case,
.project-popup {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-items: center;
  overflow: hidden;
  padding: clamp(1rem, 4vw, 4rem);
  color: var(--ds-paper-100);
  background: rgba(3, 4, 8, .42);
  backdrop-filter: blur(12px) saturate(118%);
  -webkit-backdrop-filter: blur(12px) saturate(118%);
  animation: dialog-backdrop-in .34s ease both;
}
.cloud-case[hidden],
.project-popup[hidden] { display: none; }
.cloud-case__header,
.project-popup > header {
  position: relative;
  inset: auto;
  z-index: 4;
  width: min(92vw, 78rem);
  min-height: 4.5rem;
  padding: 0 clamp(1.1rem, 2.5vw, 2.25rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, .14);
  border-bottom-color: rgba(255, 255, 255, .07);
  border-radius: 1.6rem 1.6rem 0 0;
  background: rgba(17, 18, 23, .76);
  box-shadow: 0 -18px 70px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  animation: dialog-panel-in .48s var(--ds-ease-out) both;
}
.cloud-case__body,
.project-popup__body {
  width: min(92vw, 78rem);
  max-height: 100%;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 255, 255, .14);
  border-top: 0;
  border-radius: 0 0 1.6rem 1.6rem;
  background: linear-gradient(145deg, rgba(20, 21, 27, .84), rgba(8, 9, 13, .72));
  box-shadow: 0 30px 100px rgba(0, 0, 0, .56), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(30px) saturate(125%);
  -webkit-backdrop-filter: blur(30px) saturate(125%);
  animation: dialog-panel-in .48s var(--ds-ease-out) both;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 159, 196, .5) transparent;
}
.cloud-case__hero { min-height: clamp(18rem, 44vh, 34rem); border-color: rgba(255, 255, 255, .1); border-radius: 1rem; }
.cloud-case__intro { padding: clamp(3rem, 6vw, 6rem) 0; }
.cloud-case__intro h2,
.project-popup__body > h2 { font-size: clamp(3rem, 7vw, 7rem); }
.project-popup__body > h2 { margin-bottom: 3rem; }
@keyframes dialog-backdrop-in { from { opacity: 0; backdrop-filter: blur(0); } }
@keyframes dialog-panel-in { from { opacity: 0; transform: translateY(28px) scale(.975); } }

@media (max-width: 820px) {
  .cloud-case,
  .project-popup { padding: .75rem; }
  .cloud-case__header,
  .project-popup > header,
  .cloud-case__body,
  .project-popup__body { width: 100%; }
  .cloud-case__header,
  .project-popup > header { border-radius: 1.1rem 1.1rem 0 0; }
  .cloud-case__body,
  .project-popup__body { border-radius: 0 0 1.1rem 1.1rem; }
}
@media (max-width: 560px) {
  .about-chapter--compact .about-chapter__copy { grid-template-columns: 1fr; gap: 1.1rem; }
  .about-chapter--compact .about-chapter__copy p { max-width: 100%; padding-inline: 0; }
  .about-chapter--compact .about-chapter__copy p:first-child,
  .about-chapter--compact .about-chapter__copy p:last-child { grid-column: 1; }
  .cloud-case__body,
  .project-popup__body { padding: 1rem; }
  .cloud-case__hero { min-height: 15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .about-word { transform: none !important; transition: none; }
  .about-mascot-traveler { --mascot-x: 0px; }
  .cloud-case,
  .project-popup,
  .cloud-case__header,
  .project-popup > header,
  .cloud-case__body,
  .project-popup__body { animation: none; }
}

/* Mascot text-wrap v41 — shift complete lines around the character silhouette. */
.about-word-measure { display: inline; }
.about-line {
  display: block;
  transform: translate3d(var(--line-push-x, 0px), 0, 0);
  transition: transform .58s cubic-bezier(.22, .75, .18, 1);
  will-change: transform;
}
.about-chapter--compact[data-mascot-active] .about-line {
  text-shadow: 0 0 24px rgba(255, 159, 196, .055);
}
@media (prefers-reduced-motion: reduce) {
  .about-line { transform: none !important; transition: none; }
}

/* Gentle continuous motion v42 — JavaScript owns interpolation. */
.about-mascot-traveler { transition: none; }
.about-line { transition: none; }

/* Popup header handoff v42 */
.popup-header-title {
  max-width: min(60vw, 44rem);
  overflow: hidden;
  color: var(--ds-paper-100);
  font: 600 clamp(.95rem, 1.4vw, 1.2rem)/1.1 var(--font-heading) !important;
  letter-spacing: -.025em !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .45s var(--ds-ease-soft), transform .55s var(--ds-ease-out);
}
.project-popup.is-condensed > header .popup-header-title {
  opacity: 1;
  transform: translateY(0);
}

/* Reference-aligned interaction pass v45 */
body { overflow-x: clip; }
.page-creative main,
.page-creative .work,
.work-cloud,
.work-cloud__viewport { overflow: visible; }

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .18em;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -.045em;
}
.wordmark__name { color: var(--ds-paper-100); }
.wordmark__slash {
  color: var(--ds-muted-700);
  font-family: var(--font-note);
  font-size: .72em;
  font-weight: 400;
}
.wordmark__initial { color: var(--ds-signal-pink); }

.site-header::before {
  opacity: 0;
  transition: opacity .55s var(--ds-ease-soft);
}
.site-header.is-scrolled::before { opacity: .94; }
.header-contact { position: relative; }
.header-contact::before {
  content: attr(data-contact-title) "\A" attr(data-contact-email);
  position: absolute;
  top: calc(100% + 1rem);
  right: 0;
  width: max-content;
  max-width: min(22rem, 76vw);
  padding: .9rem 1rem;
  white-space: pre-line;
  color: var(--ds-paper-100);
  background: rgba(15, 15, 19, .78);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: .85rem;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .32);
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  font: 500 .72rem/1.55 var(--font-note);
  letter-spacing: .02em;
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transform-origin: 100% 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .35s var(--ds-ease-out);
}
.header-contact:hover::before,
.header-contact:focus-visible::before {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.eyebrow {
  font-size: .75rem !important;
  line-height: 1.25;
  letter-spacing: .1em;
}
.section-heading > p:last-child {
  width: min(28rem, 100%);
  font-size: clamp(.875rem, 1vw, 1rem);
  line-height: 1.55;
}
.section-heading h2.motion-text {
  translate: none;
  transform: translate3d(0, var(--text-y, 0px), 0)
    scale(calc(.965 + var(--text-opacity, 1) * .035));
  transform-origin: 0 100%;
  clip-path: inset(calc((1 - var(--text-opacity, 1)) * 100%) 0 0 0);
  will-change: transform, opacity, filter, clip-path;
}

.page-about {
  height: 100svh;
  overflow: hidden;
  overscroll-behavior: none;
}
.page-about .about-shell {
  height: 100svh;
  padding-top: 0;
  overflow: hidden;
}
.page-about .about-flow {
  position: relative;
  height: 100svh;
  overflow: hidden;
  touch-action: none;
  isolation: isolate;
}
.page-about .about-mascot-track {
  position: absolute;
  inset: 0;
  z-index: 12;
}
.page-about .about-mascot-traveler {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(31vw, 28rem);
  height: min(31vw, 28rem);
  margin: 0;
  opacity: var(--mascot-presence, 0);
  transform: translate3d(calc(-50% + var(--mascot-x, 0px)), calc(-50% + var(--mascot-entry-y, 0px) + var(--mascot-drift, 0px)), 0)
    rotate(var(--mascot-roll, 0deg)) scale(var(--mascot-scale, 1));
  filter: blur(var(--mascot-blur, 0px));
}
.page-about .about-mascot-traveler::before {
  inset: 29%;
  opacity: .2;
  transform: scale(.9);
  background: rgba(255, 159, 196, .28);
  filter: blur(18px);
  transition: opacity .4s ease, transform .55s var(--ds-ease-out), background .4s ease;
}
.page-about .about-mascot-traveler .mascot-canvas {
  transition: filter .5s var(--ds-ease-soft);
}
.page-about .about-mascot-traveler:hover::before {
  opacity: .92;
  transform: scale(1.08);
  background: rgba(255, 159, 196, .52);
}
.page-about .about-mascot-traveler:hover .mascot-canvas {
  filter: drop-shadow(0 0 9px rgba(255, 159, 196, .7))
    drop-shadow(0 0 22px rgba(255, 159, 196, .18));
}

/* Interaction refinement v48 */
.site-header::before {
  border-bottom: 0;
  background: rgba(8, 8, 10, .42);
  box-shadow: 0 18px 52px rgba(0, 0, 0, .12);
  backdrop-filter: blur(34px) saturate(145%);
  -webkit-backdrop-filter: blur(34px) saturate(145%);
}

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: #000;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition: opacity 520ms ease 220ms, clip-path 920ms var(--ds-ease-out);
}
.site-loader iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; pointer-events: none; }
.site-loader.is-leaving { opacity: 0; clip-path: inset(0 0 100% 0); pointer-events: none; }
.site-is-loading { overflow: hidden; }

.section-heading.reveal {
  transform: translateY(2.5rem);
  transition: opacity 900ms var(--ds-ease-out), transform 900ms var(--ds-ease-out);
}
.section-heading.reveal.is-visible { transform: translateY(0); }
.work-cloud:not(.has-selection) .work-cloud__caption { opacity: 0; pointer-events: none; }
.work-cloud__caption { transition: opacity 420ms var(--ds-ease-soft); }

.page-projects { position: relative; }
.project-stellar-wake {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: screen;
}
.page-projects .projects-shell { position: relative; z-index: 1; }
.page-projects .site-header { z-index: 80; }
.page-projects .project-tile { isolation: isolate; }
.page-projects .project-tile > * { position: relative; z-index: 1; }

/* Keep the About composition optically centred before line collision begins. */
.page-about .about-chapter--compact .about-chapter__copy {
  width: min(100%, 84rem);
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}
.page-about .about-chapter--compact .about-chapter__copy p:first-child {
  grid-column: 1;
  justify-self: end;
  text-align: right;
}
.page-about .about-chapter--compact .about-chapter__copy p:last-child {
  grid-column: 2;
  justify-self: start;
  text-align: left;
}

@media (max-width: 820px) {
  .page-about .about-chapter--compact .about-chapter__copy {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
  }
}

@media (max-width: 560px) {
  .page-about .about-chapter--compact .about-chapter__copy { grid-template-columns: 1fr; }
  .page-about .about-chapter--compact .about-chapter__copy p:first-child,
  .page-about .about-chapter--compact .about-chapter__copy p:last-child {
    grid-column: 1;
    justify-self: stretch;
    text-align: center;
  }
}

/* Smooth project reveals and collision-only About spacing v56. */
.page-projects .project-stellar-wake { mix-blend-mode: normal; }
.page-projects .project-tile.reveal {
  opacity: 0;
  transform: translate3d(0, 1.4rem, 0) scale(.988);
  transition: opacity .5s ease, transform .68s var(--ds-ease-out), color .25s ease;
  will-change: auto;
}
.page-projects .project-tile.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.page-projects .project-tile:nth-child(2) { transition-delay: 45ms; }
.page-projects .project-tile:nth-child(3) { transition-delay: 90ms; }
.page-projects .project-tile:nth-child(4) { transition-delay: 135ms; }

@media (prefers-reduced-motion: reduce) {
  .site-loader { display: none; }
  .site-is-loading { overflow: auto; }
  .system-text-reveal > .star-line,
  .star-char { opacity: 1; clip-path: none; filter: none; transform: none; transition: none; animation: none !important; }
  .star-char.is-seed::after,
  .system-text-glint { display: none; }
  .project-stellar-wake { display: none; }
}
.page-about .about-chapter--compact {
  position: absolute;
  inset: 0;
  min-height: 100svh;
  padding: clamp(6rem, 9vw, 8.5rem) var(--pad);
  transform: translate3d(0, var(--chapter-y, 0px), 0);
  will-change: transform;
  pointer-events: none;
}
.page-about .about-chapter--compact[data-mascot-active] { pointer-events: auto; }
.page-about .about-chapter__head {
  margin-bottom: clamp(5.5rem, 11vh, 8rem);
}
.page-about .about-chapter__head > span,
.page-about .about-chapter__head > h2 {
  font-size: clamp(.72rem, 1vw, .9rem);
}
.page-about .about-chapter__head > b {
  font-size: clamp(3.7rem, 7vw, 6.6rem);
}
.page-about .about-chapter--compact .about-chapter__copy p:first-child {
  font: 600 clamp(1.4rem, 2.15vw, 2.35rem)/1.22 var(--font-heading);
  letter-spacing: -.035em;
}
.page-about .about-chapter--compact .about-chapter__copy p:last-child {
  font: 400 clamp(.98rem, 1.5vw, 1.62rem)/1.48 var(--font-body);
  letter-spacing: -.018em;
  color: var(--ds-muted-500);
}
.page-about .about-contact { display: none; }

@media (max-width: 820px) {
  .page-about .about-mascot-traveler {
    width: min(42vw, 20rem);
    height: min(42vw, 20rem);
  }
  .page-about .about-chapter__head { margin-bottom: clamp(7rem, 19vh, 9rem); }
  .page-about .about-chapter--compact .about-chapter__copy {
    grid-template-columns: 1fr 1fr;
    gap: clamp(8rem, 26vw, 14rem);
  }
  .page-about .about-chapter--compact .about-chapter__copy p:first-child,
  .page-about .about-chapter--compact .about-chapter__copy p:last-child {
    max-width: 16rem;
  }
}
@media (max-width: 560px) {
  .page-about .about-mascot-traveler {
    top: 42%;
    width: 52vw;
    height: 52vw;
  }
  .page-about .about-chapter--compact { padding: 5.5rem 1.25rem 2rem; }
  .page-about .about-chapter__head { margin-bottom: 36vh; }
  .page-about .about-chapter--compact .about-chapter__copy {
    grid-template-columns: 1fr;
    gap: .85rem;
  }
  .page-about .about-chapter--compact .about-chapter__copy p:first-child,
  .page-about .about-chapter--compact .about-chapter__copy p:last-child {
    max-width: 100%;
    text-align: left;
  }
}

/* Final centred About geometry v48. */
.page-about .about-chapter--compact .about-chapter__copy {
  width: min(100%, 84rem);
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) clamp(18rem, 27vw, 30rem) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 2.25rem);
}
.page-about .about-chapter--compact .about-chapter__copy p:first-child {
  grid-column: 1;
  justify-self: end;
  text-align: right;
}
.page-about .about-chapter--compact .about-chapter__copy p:last-child {
  grid-column: 3;
  justify-self: start;
  text-align: left;
}
.page-about .about-mascot-traveler::before {
  inset: 37%;
  opacity: .16;
  background: rgba(255, 64, 131, .42);
  filter: blur(12px);
}
.page-about .about-mascot-traveler:hover::before {
  opacity: .78;
  transform: scale(1.03);
  background: rgba(255, 64, 131, .62);
}
.page-about .about-mascot-traveler:hover .mascot-canvas {
  filter: drop-shadow(0 0 6px rgba(255, 64, 131, .72)) drop-shadow(0 0 14px rgba(255, 64, 131, .16));
}
@media (max-width: 820px) {
  .page-about .about-chapter--compact .about-chapter__copy {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) clamp(12rem, 30vw, 16rem) minmax(0, 1fr);
    gap: .75rem;
  }
}
@media (max-width: 560px) {
  .page-about .about-chapter--compact .about-chapter__copy { grid-template-columns: 1fr; }
  .page-about .about-chapter--compact .about-chapter__copy p:first-child,
  .page-about .about-chapter--compact .about-chapter__copy p:last-child {
    grid-column: 1;
    justify-self: stretch;
    max-width: 100%;
    text-align: center;
  }
}

/* The copy starts on the centre axis; only live silhouette collisions open the gap. */
.page-about .about-chapter--compact .about-chapter__copy {
  width: min(100%, 72rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(.75rem, 1.5vw, 1.5rem);
}
.page-about .about-chapter--compact .about-chapter__copy p:first-child {
  grid-column: 1;
  max-width: 30rem;
}
.page-about .about-chapter--compact .about-chapter__copy p:last-child {
  grid-column: 2;
  max-width: 30rem;
}

@media (max-width: 820px) and (min-width: 561px) {
  .page-about .about-chapter--compact .about-chapter__copy {
    width: min(100%, 46rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .7rem;
  }
}

@media (max-width: 560px) {
  .page-about .about-chapter--compact .about-chapter__copy {
    width: 100%;
    grid-template-columns: 1fr;
    gap: .85rem;
  }
  .page-about .about-chapter--compact .about-chapter__copy p:first-child,
  .page-about .about-chapter--compact .about-chapter__copy p:last-child {
    grid-column: 1;
    max-width: 100%;
    text-align: center;
  }
}

/* Small screens use the same paired collision layout, with room at both edges. */
.page-about .about-mascot-traveler::before,
.page-about .about-mascot-traveler:hover::before { opacity: 0; }
.page-about .about-mascot-traveler:hover .mascot-canvas { filter: none; }
@media (max-width: 820px) {
  .page-about .about-mascot-traveler {
    /* Keep the character readable on phones, with gentler responsive scaling. */
    top: 42%;
    width: clamp(180px, 44vw, 280px);
    height: clamp(180px, 44vw, 280px);
  }
  .page-about .about-chapter--compact .about-chapter__copy {
    width: 68vw; max-width: none; margin-inline: auto;
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 12px; padding-top: 0;
  }
  .page-about .about-chapter--compact .about-chapter__copy p:first-child {
    grid-column: 1; justify-self: stretch; text-align: right;
    width: 100%; max-width: none; font-size: clamp(1rem,3vw,1.4rem);
  }
  .page-about .about-chapter--compact .about-chapter__copy p:last-child {
    grid-column: 2; justify-self: stretch; text-align: left;
    width: 100%; max-width: none; font-size: 1rem;
  }
  .page-about .about-chapter__head { margin-bottom: 15vh; }
  .page-about .about-line { white-space: nowrap; }
}

/* Starlight text reveals — short, asynchronous and limited to entering text. */
.project-star-text .project-text-word {
  display: inline-block;
  opacity: 0;
}
.project-star-text.is-starlit .project-text-word {
  animation: project-word-light 1150ms ease-out both;
  animation-delay: var(--word-delay, 0ms);
}
@keyframes project-word-light {
  0% { opacity: 0; transform: translateY(.12em); text-shadow: 0 0 14px rgba(255,159,196,0); }
  30% { opacity: .36; text-shadow: 0 0 12px rgba(255,159,196,.65); }
  50% { opacity: .76; }
  64% { opacity: .6; text-shadow: 0 0 8px rgba(255,159,196,.32); }
  100% { opacity: 1; transform: translateY(0); text-shadow: 0 0 0 transparent; }
}
@media(prefers-reduced-motion: reduce) {
  .project-star-text .project-text-word { opacity: 1; animation: none; transform: none; }
}

/* Resume is available from every portfolio route. */
.header-actions { display:flex; align-items:center; justify-self:end; gap:clamp(.8rem,2vw,1.5rem); white-space:nowrap; }
.header-cv { font:500 .82rem/1.4 var(--font-body); color:var(--ds-paper-300); padding:.4rem 0; transition:color .3s ease,text-shadow .45s ease; }
.header-cv:hover,.header-cv:focus-visible { color:var(--ds-signal-pink); text-shadow:0 0 12px rgba(255,159,196,.6); }
.header-cv:focus-visible { outline:2px solid var(--ds-signal-pink); outline-offset:5px; border-radius:2px; }
@media(max-width:560px) {
 .site-header { grid-template-columns:1fr auto; height:auto; min-height:86px; padding-block:10px; row-gap:8px; }
 .site-header .wordmark { grid-column:1; grid-row:1; }
 .site-header .header-actions { grid-column:2; grid-row:1; }
 .site-header .site-nav { grid-column:1 / -1; grid-row:2; justify-self:center; }
 .header-actions .header-contact { display:inline-block; }
 .header-actions a { font-size:.75rem; }
}

#map .section-heading > .eyebrow { font-size:.75rem; line-height:1.4; letter-spacing:.08em; }
#map .section-heading > p:last-child { font-size:1rem; line-height:1.6; max-width:34rem; }

/* Mono captions follow the contact tooltip's quiet, sentence-case treatment. */
:is(.section-indicator,.project-card__topline,.eyebrow,.case-outcome span,.dialog-meta,.project-meta,
.manifesto__sticky small,.project-controls,.approach-note,.contact-footer,.nda-note,
.work-cloud__hint,.cloud-case__header > span,.cloud-case__hero span,.cloud-case__modules span,
.mascot-loading,.work-landing__label span,.popup-case__grid article > span,.project-tile > span,
.project-tile > div > p:first-child,.project-popup > header > span,.about-chapter--compact > span,
.capability-map__topline p,.capability-map__status span,.case-row > span,.case-row p) {
 font-family:var(--font-note); font-weight:500; line-height:1.55;
 letter-spacing:normal; text-transform:none; color:var(--ds-paper-300);
}
#map .section-heading > .eyebrow { letter-spacing:normal; line-height:1.55; }
.capability-center-label { font-weight:500; letter-spacing:normal; fill:var(--ds-paper-300); }

/* Creative Space: one immersive canvas; project connections follow the cases. */
.page-creative .scroll-meter{display:none}
.page-creative main{height:100svh;overflow:hidden}
.page-creative .work--landing.section{height:100svh;min-height:0;padding:5rem 0 0;display:block;overflow:hidden}
.page-creative .work-cloud{height:100%;width:100%;max-width:none;margin:0;position:relative}
.page-creative .work-cloud__viewport{height:100%;overflow:hidden;touch-action:none}
.page-creative .work-cloud__caption{position:absolute;bottom:1.5rem;left:5%;right:5%;min-height:3rem;z-index:3;align-items:center}
.page-creative .work-cloud__caption h3{font-size:clamp(1.25rem,3vw,2.5rem)}
.page-creative .cloud-case{animation:none}
.page-projects #map{padding-top:7rem}
.map-projects{display:flex;flex-wrap:wrap;gap:.65rem;margin:2rem 0 1rem}
.map-projects button{border:1px solid var(--ds-line-soft);border-radius:2rem;padding:.8rem 1rem;background:transparent;color:var(--ds-paper-300);font:inherit;font-size:.875rem;cursor:pointer;transition:color .3s,border-color .3s,background .3s}
.map-projects button[aria-pressed=true]{color:var(--ds-signal-pink);border-color:var(--ds-signal-pink);background:rgba(255,159,196,.06)}
.map-projects button:focus-visible{outline:2px solid var(--ds-signal-pink);outline-offset:4px}
.map-project-note{font-size:1rem;color:var(--ds-muted-500);min-height:3rem;max-width:44rem}
@media(max-width:560px){.page-creative .work-cloud__caption{bottom:2rem}.page-projects #map{padding-top:4rem}.map-projects{gap:.5rem}.map-projects button{padding:.65rem .8rem}}

/* Supplied complete vector logo, preserving its original proportions and colours. */
.site-header .wordmark { min-height:44px; display:inline-flex; align-items:center; justify-content:flex-start; }
.wordmark__asset { display:block; width:112px; height:auto; flex:none; }
@media(max-width:560px) { .wordmark__asset { width:96px; } }

/* Balanced header: one row, with an accessible compact disclosure on narrow screens. */
.site-header .wordmark__asset { width:90px; transform:translateY(-2px); }
.site-header .header-contact { display:inline-flex; align-items:center; min-height:44px; padding:0; border:0; }
.site-header .header-cv { display:inline-flex; align-items:center; min-height:44px; padding:0; }
.site-header .site-nav a { position:relative; display:inline-flex; align-items:center; min-height:44px; }
.site-header .site-nav a.is-current::after { position:absolute; left:0; right:0; bottom:4px; margin:0; }
.header-menu-toggle,.mobile-navigation { display:none; }
@media(max-width:900px) {
 .site-header { grid-template-columns:auto 1fr; height:64px; min-height:64px; padding:0 clamp(16px,4vw,28px); gap:16px; border:0; }
 .site-header .wordmark { grid-column:1; grid-row:1; }
 .site-header .wordmark__asset { width:78px; }
 .site-header .site-nav,.site-header .header-actions > .header-cv { display:none; }
 .site-header .header-actions { grid-column:2; grid-row:1; justify-self:end; gap:16px; }
 .site-header .header-contact { font-size:13px; line-height:1.4; }
 .header-menu-toggle { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:44px; height:44px; padding:0; border:0; border-radius:50%; color:var(--ds-paper-300); background:transparent; cursor:pointer; }
 .header-menu-toggle span { display:block; width:19px; height:1px; background:currentColor; transition:transform 320ms var(--ds-ease-soft); }
 .menu-open .header-menu-toggle span:first-child { transform:translateY(3.5px) rotate(45deg); }
 .menu-open .header-menu-toggle span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
 .header-menu-toggle:hover { color:var(--ds-signal-pink); }
 .header-menu-toggle:focus-visible,.mobile-navigation a:focus-visible { outline:2px solid var(--ds-signal-pink); outline-offset:3px; }
 .mobile-navigation { display:flex; position:absolute; top:calc(100% + 8px); right:16px; left:16px; flex-direction:column; gap:4px; padding:20px; border:0; border-radius:20px; background:rgba(12,12,17,.78); backdrop-filter:blur(32px) saturate(130%); -webkit-backdrop-filter:blur(32px) saturate(130%); box-shadow:0 16px 48px rgba(0,0,0,.18); opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none; transition:opacity 320ms var(--ds-ease-soft),transform 320ms var(--ds-ease-soft),visibility 320ms; }
 .menu-open .mobile-navigation { opacity:1; visibility:visible; transform:none; pointer-events:auto; }
 .mobile-navigation a { display:flex; align-items:center; min-height:48px; padding:8px 12px; font:500 16px/1.4 var(--font-body); color:var(--ds-paper-300); opacity:0; }
 .mobile-navigation a.is-current,.mobile-navigation a:hover { color:var(--ds-signal-pink); }
 .mobile-navigation a:nth-child(2) { --menu-delay:160ms; }
 .mobile-navigation a:nth-child(3) { --menu-delay:320ms; }
 .mobile-navigation a:nth-child(4) { --menu-delay:480ms; }
 .menu-open .mobile-navigation a { animation:header-content-enter var(--ds-reveal-entry,640ms) var(--ds-ease-soft) both; animation-delay:var(--menu-delay,0ms); }
 .menu-open::before { opacity:.94; }
}
@keyframes header-content-enter { from { opacity:.18; transform:translateY(.4em); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) {
 .mobile-navigation,.header-menu-toggle span { transition:none; }
 .menu-open .mobile-navigation a { animation:none; opacity:1; }
}

/* The entrance uses the orbit renderer, so CSS never chases its frame-by-frame positions. */
.work-cloud.is-cloud-intro .work-cloud__card { transition:none!important; --hover-scale:1; pointer-events:none; }
.work-cloud.is-cloud-intro .work-cloud__caption { opacity:0; pointer-events:none; }
.work-cloud__caption { transition:opacity 400ms ease; }

/* Case typography: animated word wrappers inherit their semantic text style. */
.project-popup .project-text-word { font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; }
.project-tile h2 { font:600 clamp(2rem,3.8vw,4rem)/1.06 var(--font-heading); letter-spacing:-.045em; margin:.75rem 0 1rem; }
.project-tile > div > p:last-child { font:400 1rem/1.65 var(--font-body); letter-spacing:normal; color:var(--ds-paper-300); max-width:42ch; }
.project-tile > span,.project-tile > div > p:first-child { font:500 .75rem/1.55 var(--font-note); letter-spacing:normal; }
.project-tile > b { font:500 .875rem/1.4 var(--font-body); }
.project-popup__body > h2 { font:600 clamp(2.5rem,6vw,6rem)/1.04 var(--font-heading); letter-spacing:-.045em; margin:1rem 0 2rem; }
.project-popup__intro { gap:clamp(1.5rem,4vw,4rem); padding:1.5rem 0 3rem; }
.project-popup__intro > p:first-child { font:500 .8125rem/1.65 var(--font-note); color:var(--ds-muted-500); }
.project-popup__intro > p:last-child { font:400 clamp(1rem,1.5vw,1.1875rem)/1.65 var(--font-body); color:var(--ds-paper-300); max-width:58ch; }
.popup-case__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.5rem 3rem; border:0; }
.popup-case__grid article { min-height:0; padding:0; border:0; justify-content:flex-start; }
.popup-case__grid article > span { font:500 .75rem/1.5 var(--font-note); color:var(--ds-muted-500); margin-bottom:.75rem; }
.popup-case__grid h3 { font:600 clamp(1.35rem,2.2vw,2rem)/1.2 var(--font-heading); letter-spacing:-.025em; margin:0 0 1rem; }
.popup-case__grid p { font:400 1rem/1.75 var(--font-body); letter-spacing:normal; color:var(--ds-paper-300); max-width:58ch; margin:0; }
.project-popup .popup-header-title { font:600 1rem/1.3 var(--font-heading); letter-spacing:-.015em; }
.work-cloud__card { filter:blur(var(--cloud-blur,0px)); }
.work-cloud__card:hover,.work-cloud__card:focus-visible,.work-cloud__card.is-active { filter:blur(0); }
@media(max-width:640px) {
 .popup-case__grid { grid-template-columns:1fr; gap:2.5rem; }
 .project-popup__intro { grid-template-columns:1fr; gap:1rem; }
}

/* Personal chapters: expressive titles, readable copy, quiet notes. */
.page-about .about-chapter__head h2 {font-family:var(--font-heading);font-weight:600;font-size:clamp(1.8rem,4.5vw,4rem);line-height:1.05;letter-spacing:-.035em;max-width:18ch;margin-inline:auto;}
.page-about .about-chapter--compact .about-chapter__copy p:first-child {font-family:var(--font-heading);font-weight:600;line-height:1.4;}
.page-about .about-chapter--compact .about-chapter__copy p:last-child {font-family:var(--font-body);font-weight:400;line-height:1.65;}
.about-interest {display:inline;padding:0;border:0;border-bottom:1px dotted currentColor;border-radius:0;background:none;color:var(--accent,#ff9fc4);font:inherit;letter-spacing:inherit;cursor:pointer;}
.about-interest:focus-visible {outline:2px solid #ff9fc4;outline-offset:3px;}
.about-interest-note {position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:50;max-width:min(340px,85vw);padding:16px 20px;border-radius:12px;background:rgba(22,19,26,.95);backdrop-filter:blur(20px);font:400 14px/1.5 var(--font-body);color:#f6eef3;box-shadow:0 10px 50px #0006;pointer-events:none;}
.about-interest-note[hidden]{display:none;}
/* The spring owns interpolation; a second CSS transition would lag behind collision geometry. */
.page-about .about-mascot-traveler {transition:opacity .2s ease;}

/* About titles share the opposing copy's scale instead of acting as hero headings. */
.page-about .about-chapter__head h2,
.page-about .about-chapter--compact .about-chapter__copy p:first-child {
  font-size:clamp(.98rem,1.5vw,1.62rem);
  line-height:1.65;
  letter-spacing:-.018em;
}
.page-about .about-chapter__head h2 {max-width:32ch;}
.page-about .about-chapter__head > b {font-size:1rem;line-height:1.5;}
@media(max-width:820px){
  .page-about .about-chapter__head h2,
  .page-about .about-chapter--compact .about-chapter__copy p:first-child {font-size:1rem;}
}

/* Chapter masthead follows the compact three-part reference composition. */
.page-about .about-chapter__head {
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  width:min(100%,46rem);margin:0 auto clamp(4rem,11vh,7rem);gap:clamp(1.5rem,5vw,5rem);
}
.page-about .about-chapter__head > span,
.page-about .about-chapter__head > h2 {
  font:500 clamp(.9rem,1.35vw,1.15rem)/1.25 var(--font-body);
  letter-spacing:-.025em;margin:0;max-width:none;
}
.page-about .about-chapter__head > span{justify-self:start;}
.page-about .about-chapter__head > h2{justify-self:end;}
.page-about .about-chapter__head > b {
  font:600 clamp(3.2rem,7vw,5.5rem)/1 var(--font-heading);letter-spacing:-.06em;
}
.page-about .about-chapter--compact .about-chapter__copy p:first-child {
  font-family:var(--font-heading);font-weight:700;
}
.page-about .about-chapter--compact .about-chapter__copy p:last-child {padding-top:3rem;}
@media(max-width:820px){
  .page-about .about-chapter__head{width:84%;margin-bottom:10vh;gap:1.5rem;}
  .page-about .about-chapter--compact .about-chapter__copy p:last-child{padding-top:1.75rem;}
}

/* Quiet chapter labels; a single large opening statement. */
.page-about .about-chapter__head > span,
.page-about .about-chapter__head > h2 {
  font:400 clamp(.75rem,1vw,.875rem)/1.4 var(--font-note);
  letter-spacing:0;
}
.page-about .about-opening {display:block;text-align:center;padding-top:clamp(6rem,12vh,8rem);}
.page-about .about-opening h1 {
  font:600 clamp(2rem,5.7vw,5.5rem)/1.04 var(--font-heading);
  letter-spacing:-.045em;max-width:22ch;margin:0 auto;text-wrap:balance;
}
.page-about .about-opening__note {
  position:absolute;bottom:9vh;left:50%;transform:translateX(-50%);
  width:min(80%,36rem);margin:0;font:400 clamp(1rem,1.5vw,1.25rem)/1.5 var(--font-body);
  color:var(--ds-muted-500);text-wrap:balance;
}
.site-header .mobile-navigation {touch-action:manipulation;}

/* Small photographic asides for About's linked interests. */
.about-interest-note.about-interest-image{bottom:auto;max-width:none;width:136px;height:168px;padding:0;border:0;border-radius:3px;background:transparent;backdrop-filter:none;box-shadow:0 8px 24px #0003;opacity:0;transform:translateY(7px) rotate(-6deg) scale(.92);transform-origin:50% 80%;transition:opacity .18s ease,transform .26s cubic-bezier(.2,.8,.2,1);z-index:60;}
.about-interest-image img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.about-interest-note.about-interest-image.is-visible{opacity:1;transform:translateY(0) rotate(-3deg) scale(1);}
@media(max-width:600px){.about-interest-note.about-interest-image{width:112px;height:140px;}}
@media(prefers-reduced-motion:reduce){.about-interest-note.about-interest-image{transition:none;transform:none;}.about-interest-note.about-interest-image.is-visible{transform:none;}}

/* Pixel inventory previews retain their own transparent silhouettes. */
.about-interest-note.about-interest-image{width:164px;height:164px;border-radius:0;box-shadow:none;background:transparent!important;backdrop-filter:none;}
.about-interest-image img{width:100%;height:100%;object-fit:contain;border-radius:0;image-rendering:pixelated;}
.about-interest{white-space:nowrap;}
@media(max-width:600px){.about-interest-note.about-interest-image{width:132px;height:132px;}}

html .about-interest-note.about-interest-image{box-shadow:none!important;border:0!important;outline:0;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}

/* Small, word-anchored cutouts with their natural aspect ratio. */
html .about-interest-note.about-interest-image{width:max-content;height:auto;max-width:144px;line-height:0;}
html .about-interest-note.about-interest-image img{display:block;width:auto;height:auto;max-width:144px;max-height:144px;}
@media(max-width:600px){html .about-interest-note.about-interest-image,html .about-interest-note.about-interest-image img{max-width:116px;}html .about-interest-note.about-interest-image img{max-height:116px;}}

/* Interest links are quiet inline annotations, never highlighted rows. */
.page-about .about-line,.page-about .about-chapter--compact[data-mascot-active] .about-line{text-shadow:none;}
.page-about .about-interest{color:inherit!important;border-bottom:1px dotted rgba(190,132,159,.7);text-shadow:none!important;transition:color .18s ease,border-color .18s ease;}
.page-about .about-interest:hover,.page-about .about-interest:focus-visible{color:var(--ds-signal-pink)!important;border-bottom-color:currentColor;}
html .about-interest-note.about-interest-image{transform:none;transition:opacity .2s ease;}
html .about-interest-note.about-interest-image.is-visible{transform:none;}

/* Mobile layout: use the available width instead of grid min-content widths. */
@media(max-width:820px){
 .cloud-case,.project-popup{grid-template-columns:minmax(0,1fr);padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));}
 .project-popup>header,.project-popup__body,.cloud-case__body{min-width:0;max-width:100%;width:100%;}
 .project-popup>header{gap:16px}.project-popup>header>button{flex-shrink:0;min-height:44px}.project-popup>header>.popup-header-title{min-width:0;max-width:none;flex:1;}
 .project-popup__body{overflow-x:hidden;overflow-wrap:anywhere;}
 .project-popup__body>h2{font-size:clamp(2rem,9vw,3.5rem);line-height:1.05;letter-spacing:-.045em;}
 .project-popup__body>* ,.popup-case__grid>* ,.project-popup__intro>* ,.inside-story>* ,.inside-pair>*{min-width:0;max-width:100%;}
 .inside-story,.inside-design,.inside-chapter,.inside-pair,.inside-demo-frame,.inside-demo-products,.inside-demo-product{min-width:0;max-width:100%;}
 .inside-category-strip{min-width:0;max-width:100%;}
 .projects-shell,.about-shell,.projects-grid,.project-tile,.section-heading{min-width:0;max-width:100%;}
 .project-tile h2,.project-tile h3,.section-heading h2{overflow-wrap:anywhere;}
 .site-header{max-width:100%;grid-template-columns:auto minmax(0,1fr);}
 .site-header .header-actions{min-width:0;gap:clamp(5px,1.4vw,12px);}
}
@media(max-width:600px){
 .page-creative main{height:100svh;height:100dvh;}
 .page-creative .work--landing.section{height:100%;padding-top:calc(64px + env(safe-area-inset-top));}
 .page-creative .work-cloud{width:100%;height:100%;}
 .page-creative .work-cloud__viewport{height:100%;}
 .page-creative .work-cloud__caption{bottom:max(12px,env(safe-area-inset-bottom));left:16px;right:16px;gap:12px;min-width:0;grid-template-columns:minmax(0,1fr) auto;}
 .work-cloud__caption>div{min-width:0}.work-cloud__caption h3{overflow-wrap:anywhere;}
 .page-creative .work-cloud__card:hover{--hover-scale:1;}
 .project-popup__intro,.popup-case__grid{grid-template-columns:minmax(0,1fr);}
 .about-interest{white-space:normal;}
}