@font-face {
  font-family: "Barlow Condensed";
  src: url("barlow-condensed-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --surface: #100e0e;
  --ink: #f3eee8;
  --muted: #bdb1ad;
  --line: #3e3231;
  --accent: #ff695a;
  --contrast: #a0eedb;
  --glide: cubic-bezier(.22,.68,.2,1);
  --glass-edge: #eef5f862;
  --glass-shadow: inset 0 1px 0 #fff3, inset 0 -1px 0 #0e060647, 0 12px 25px #0003;
  --glass-surface: linear-gradient(148deg, #f3fbff29, #bac9d21c 49%, #69738125);
  --glass-blur: blur(15px) saturate(128%);
  --control-edge: #f5f8fc6b;
  --control-surface: radial-gradient(ellipse at 18% 0%, #fff4, transparent 58%),
    linear-gradient(157deg, #f8faff26, #deeaff0b 49%, #17121950 80%, #c0d8ee22);
  --control-shadow: inset 0 1px 1px #fff6, inset 1px 0 1px #fff2,
    inset 0 -1px 2px #0a05098a, 0 5px 13px #0003;
  --control-gap: clamp(.7rem, 1vw, .85rem);
  --panel-gap: clamp(1.05rem, 1.65vw, 1.55rem);
  --flow-space: clamp(64px, 7.4vw, 112px);
  --gutter: clamp(20px, 5vw, 76px);
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Barlow Condensed", Impact, "Arial Narrow", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { isolation: isolate; margin: 0; background: var(--surface); color: var(--ink); font: 16px/1.5 var(--sans); }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--contrast); outline-offset: 5px; }
a, button, summary {
  transition: background-color .4s var(--glide), border-color .4s var(--glide),
              box-shadow .45s var(--glide), color .3s var(--glide), text-shadow .4s var(--glide),
              scale .38s var(--glide);
  -webkit-tap-highlight-color: #a0eedb24;
}
button { color: inherit; font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a:hover, a:focus-visible, summary:hover, summary:focus-visible { text-shadow: 0 0 13px var(--hover-glow); }
.family-name { white-space: nowrap; }
.page-atmosphere {
  position: fixed;
  inset: -78vh -24vw;
  z-index: -1;
  pointer-events: none;
}
.page-atmosphere::before, .page-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
}
.page-atmosphere::before {
  background: radial-gradient(ellipse 45% 28% at 13% 28%, #552622a0, transparent 92%),
              radial-gradient(ellipse 49% 42% at 91% 62%, #552422ad, transparent 86%),
              radial-gradient(ellipse 64% 36% at 24% 83%, #2d1514, transparent 86%);
  transform: translate3d(var(--page-cross, 0px), var(--page-shift, 0px), 0);
}
.page-atmosphere::after {
  inset-block: -20vh;
  background: url("glass-grain.svg"),
              radial-gradient(ellipse 41% 23% at 85% 43%, #a42c2349, transparent 86%),
              radial-gradient(ellipse 39% 24% at 21% 76%, #a42c2358, transparent 86%),
              radial-gradient(ellipse 34% 25% at 79% 72%, #2c75653b, transparent 92%);
  transform: translate3d(var(--near-cross, 0px), var(--near-shift, 20vh), 0);
}
main > section + section { margin-top: var(--flow-space); }
main > .hero + .work-band { margin-top: clamp(42px, 5vw, 74px); }
[id] { scroll-margin-top: 24px; }

.frame { width: min(calc(100% - var(--gutter) * 2), 1330px); margin-inline: auto; }
.skip { position: absolute; left: 1rem; top: 1rem; padding: .65rem 1rem; background: var(--ink); color: var(--surface); z-index: 10; transform: translateY(-160%); }
.skip:focus { transform: translateY(0); }
.eyebrow { font: 600 .72rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .10em; }
.section-id { display: flex; align-items: baseline; gap: .8rem; color: #c1d1cc; }
.section-id span { color: var(--contrast); }
h2 { font: 800 clamp(3rem, 6.5vw, 6.65rem)/.91 var(--display); text-transform: uppercase; letter-spacing: -.011em; }
h2 span, .case h1 span { color: var(--accent); }

.site-header { min-height: 77px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; border-bottom: 1px solid var(--line); }
.site-header .wordmark { justify-self: start; }
.site-header .glass-nav { justify-self: center; }
.wordmark { display: inline-flex; align-items: center; gap: .73rem; white-space: nowrap; font-size: .9rem; font-weight: 700; }
.mark { width: 48px; height: 41px; flex: none; }
.wordmark:hover .mark, .wordmark:focus-visible .mark { filter: drop-shadow(0 0 6px #ff695a95); }
nav { display: flex; align-items: center; font-size: .9rem; font-weight: 650; }
.glass-nav {
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(.4rem, .8vw, .72rem);
  max-inline-size: 100%;
}
.glass-nav a { color: #fff; padding: .45rem clamp(.55rem, 1.45vw, 1.15rem); border: 1px solid #eef5f834; border-radius: 999px; white-space: nowrap; }
.glass-nav a:focus-visible { outline-offset: 1px; }
nav a:hover, .wordmark:hover, .text-link:hover { text-decoration: underline; text-underline-offset: .3em; }

.hero-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  min-height: clamp(580px, 50vw, 708px);
  overflow: hidden;
  padding: 60px clamp(17px, 2.3vw, 36px) clamp(28px, 4.1vw, 60px);
  background: transparent;
}
.hero-artwork {
  position: absolute;
  inset: 0;
  z-index: -1;
  isolation: isolate;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(#000 calc(100% - clamp(55px, 8vw, 116px)), transparent 100%);
}
.hero-artwork::before {
  content: "";
  position: absolute;
  inset: -135px 0 0;
  z-index: -3;
  background: radial-gradient(ellipse 47% 44% at 56% 50%, #9e3c333f, transparent 94%),
              radial-gradient(ellipse 53% 36% at 57% 57%, #50242175, transparent 95%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 53%, #0007 77%, transparent 100%);
  transform: translate3d(0, var(--hero-shift, 0px), 0);
}

.hero-mark {
  position: absolute;
  z-index: -2;
  top: 34px;
  left: 55%;
  width: min(72%, 925px);
  height: auto;
  opacity: .52;
  filter: blur(clamp(5px, .84vw, 13px));
  mask-image: linear-gradient(#000 0 47%, #0006 65%, transparent 83%);
  transform: translate3d(-50%, var(--hero-shift, 0px), 0);
}
.portrait { position: absolute; z-index: -1; width: clamp(515px, 53.5vw, 790px); bottom: -2.6%; left: 52.5%; transform: translate3d(-50%, calc(var(--hero-shift, 0px) * .22), 0); }
.portrait-art {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  mask-image: linear-gradient(#000 0 57%, #000e 68%, #0008 82%, transparent 99%);
}
.hero-artwork::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 44% 31% at 50% 102%, #100e0eae, transparent 94%),
              radial-gradient(ellipse 36% 40% at 12% 61%, #100e0e78, transparent 95%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 61%, transparent 100%);
}
.hero-copy { max-width: 435px; }
.hero h1, .case h1 { font: 800 clamp(5rem, 9.5vw, 9.8rem)/.77 var(--display); letter-spacing: -.015em; text-transform: uppercase; }
.hero h1 { margin: .13em 0 .22em -.024em; }
.role { font-weight: 700; font-size: clamp(.95rem, 1.58vw, 1.33rem); line-height: 1.25; }
.role span { color: var(--accent); }
.intro { margin-top: .7rem; max-width: 30ch; color: var(--muted); font-size: clamp(.97rem, 1.33vw, 1.12rem); line-height: 1.5; }
.hero-copy .button { margin-top: 1.4rem; }
.hero-index {
  display: grid;
  gap: .65rem;
  list-style: none;
  justify-self: end;
  align-self: end;
  margin: 0;
  padding: 0;
  width: min(100%, 224px);
}
.hero-index a { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .65rem; padding: .75rem .62rem; font-size: .9rem; font-weight: 650; color: #fff; border-radius: 12px; }
.hero-index span { color: #f1f7f7c9; }

.button, .text-link, .footer-bottom a, .career-track summary, .role-detail, .slider-control {
  border: 1px solid var(--glass-edge);
  background-image: var(--glass-surface);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.button, .text-link, .slider-control { display: inline-flex; align-items: center; justify-content: center; gap: .64rem; min-height: 44px; color: #fff; font-size: .9rem; line-height: 1.25; font-weight: 700; border-radius: 999px; }
.button, .text-link { padding: .65rem 1rem; }
:is(.button, .text-link, .slider-control, .glass-nav a, .hero-index a, .footer-bottom a) {
  border-color: var(--control-edge);
  background-image: var(--control-surface);
  box-shadow: var(--control-shadow);
}
.glass-nav a { border-color: #f5f8fc47; }
.text-link span { color: inherit; }

.section-head { display: flex; justify-content: space-between; align-items: end; gap: 1.1rem; margin: 0 0 clamp(1.35rem, 2.4vw, 2.1rem); }
.section-head .text-link { flex-shrink: 0; }
.work-sources { display: flex; flex-wrap: wrap; gap: var(--control-gap); }
.project-image { position: relative; overflow: hidden; aspect-ratio: 1.55; background: #1b2029; border: 1px solid #f4e8e632; }
.project-image.mawhiba { background: #431d73; }
.project-image.graphitopia { background: #b46c19; }
.project-image img { width: 100%; height: 100%; object-fit: cover; }
.project-number { position: absolute; bottom: 0; left: 0; padding: .38rem .65rem; background: #141010; color: var(--accent); }
.project-meta { display: flex; justify-content: space-between; align-items: center; gap: .3rem; padding-top: .7rem; }
.project-meta p { color: var(--muted); }
.project-meta > span { font-size: 1.16rem; color: var(--accent); }
.project h3 { margin-top: .15rem; line-height: 1.14; font-size: clamp(1.15rem, 2vw, 1.85rem); letter-spacing: -.035em; }

.about { display: grid; grid-template-columns: .86fr 1fr; gap: clamp(28px, 7vw, 112px); }
.about-intro { align-self: center; }
.about-intro > p { max-width: 53ch; color: var(--muted); }
.about-intro > p + p { margin-top: 1rem; }

.contact { margin-top: var(--flow-space); }
.contact h2 { max-width: 16ch; margin-block-end: 1.45rem; }
.contact-links, .case-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.45rem; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--control-gap) var(--panel-gap); margin-top: 2.6rem; padding-block: 1.35rem; color: #d0bdb9; }
.footer-bottom a { display: inline-flex; align-items: center; min-block-size: 40px; color: #fff; padding: .48rem .75rem; border-radius: 999px; }
.footer-bottom a:hover { text-decoration: underline; text-underline-offset: .25em; }

.case { padding-block: clamp(34px, 5vw, 76px); }
.back-link { margin-bottom: clamp(30px, 4vw, 58px); }
.case h1 { margin: .13em 0 .25em -.019em; font-size: clamp(3.5rem, 9vw, 8.65rem); }
.case-intro { display: grid; grid-template-columns: 1.2fr 1fr; align-items: start; gap: 1.3rem 2.8rem; margin-bottom: 2.2rem; }
.case-intro > p { max-width: 40ch; color: var(--muted); font-size: clamp(1.1rem, 2vw, 1.55rem); line-height: 1.45; }
.credits { display: grid; gap: .9rem; border-left: 1px solid var(--line); padding-left: 1.3rem; }
.credits dt { color: var(--accent); }
.credits dd { margin-top: .2rem; font-weight: 700; }
.case-cover { position: relative; display: grid; place-items: center; min-height: clamp(240px, 42vw, 580px); overflow: hidden; background: radial-gradient(ellipse at 60% 100%, #101e35 0%, #060c15 45%, #03070d 80%); border: 1px solid var(--line); }
.case-cover img { width: clamp(230px, 47%, 440px); mix-blend-mode: screen; mask-image: radial-gradient(ellipse 59% 67%, #000 48%, transparent 100%); }
.case-cover figcaption { position: absolute; left: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px); }
.case-bottom { margin-top: 1.35rem; }
.case-footer { margin-top: 0; }
.case-footer .footer-bottom { margin-top: 0; }

@media (max-width: 1050px) {
  .hero-stage { min-height: 568px; }
  .portrait { bottom: -2%; left: 55%; width: clamp(493px, 62vw, 640px); }
  .hero-copy { max-width: 310px; }
  .hero-index { width: min(100%, 172px); }
  .hero-index a { gap: .48rem; font-size: .81rem; }
}

@media (max-width: 700px) {
  .site-header { min-height: 65px; }
  .wordmark > span:last-child { display: none; }
  nav { font-size: .83rem; }
  .glass-nav a { padding: .4rem clamp(.31rem, 1.5vw, .65rem); }
  .site-header { gap: .65rem; }
  .hero-stage { grid-template-columns: 1fr; min-height: 0; align-items: start; padding: 0 clamp(14px, 4vw, 26px) 23px; }
  .hero-artwork { position: relative; inset: auto; display: grid; mask-image: linear-gradient(#000 71%, transparent 100%); }
  .hero-mark { top: 39px; left: 50%; width: min(85%, 505px); opacity: .63; mask-image: linear-gradient(#000 0 43%, transparent 81%); }
  .portrait { position: relative; width: min(100%, 430px); left: auto; bottom: auto; justify-self: center; transform: translate3d(0, calc(var(--hero-shift, 0px) * .12), 0); margin-top: 23px; }
  .hero-artwork::after { background: radial-gradient(ellipse 61% 24% at 50% 50%, #100e0e5c, transparent 92%); }
  .hero-copy { max-width: none; margin-top: -16%; }
  .hero h1 { font-size: clamp(4.2rem, 14.2vw, 7.45rem); }
  .role { font-size: clamp(1rem, 3.5vw, 1.3rem); }
  .intro { max-width: 35ch; }
  .hero-copy .button { margin-top: 1rem; }
  .hero-index { display: none; }
  .section-head { align-items: start; flex-direction: column; }
  .project h3 { font-size: 1.45rem; }
  .about, .case-intro { grid-template-columns: 1fr; gap: 1.75rem; }
  .credits { border-left: 0; border-top: 1px solid var(--line); padding: 1rem 0 0; }
}

@media (max-width: 360px) {
  .glass-nav { font-size: .78rem; }
  .glass-nav a { padding-inline: .27rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-layer {
    --layer-depth: .68;
    translate: 0 calc(var(--motion-y, 0px) * var(--layer-depth));
  }
  .hero-stage .scroll-layer { translate: 0 calc(var(--hero-foreground, 0px) * var(--hero-depth, -.30)); }
  .hero-copy :is(.role, .intro) { --hero-depth: -.39; }
  .project-track.scroll-layer { --layer-depth: .48; padding-block: 1.35rem; }
  .project-track.scroll-layer > .project { translate: 0 calc(var(--motion-y, 0px) * .24); }
  .about-intro > p.scroll-layer, .case-intro > p.scroll-layer { --layer-depth: .24; }
  .stat.scroll-layer { --layer-depth: .14; }
  .stat.scroll-layer:nth-child(even) { --layer-depth: .24; }
  :is(.career-track, .client-carousel, .editorial-cta, .gallery-launch).scroll-layer { --layer-depth: 0; }
  .client-track.scroll-layer { --layer-depth: 0; }
  .client-track.scroll-layer .client-card { translate: 0 calc(var(--motion-y, 0px) * .34); }

  .is-revealing:not(:focus-within) {
    opacity: calc(.08 + var(--reveal-progress, 0) * .92);
    filter: blur(calc((1 - var(--reveal-progress, 0)) * var(--reveal-blur, 12px)));
  }
  .is-revealing[data-reveal="fade"]:not(:focus-within) { filter: none; }

  .hero-copy { animation: intro-in .55s ease-out both; }
  @keyframes intro-in {
    from { opacity: 0; transform: translateY(9px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a, button, summary { transition: none; }
}

.career-hint { color: var(--muted); font-size: .88rem; }
.career-track {
  --career-gap: clamp(.9rem, 1.15vw, 1.05rem);
  --career-card-padding: .9rem;
  --career-marker-inset: calc(var(--career-card-padding) + 6px);
  position: relative;
  display: grid;
  gap: var(--career-gap);
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.career-track::before {
  content: "";
  position: absolute;
  inset-block: 1.5rem 2.2rem;
  inset-inline-start: calc(var(--career-marker-inset) + .5px);
  inline-size: 1px;
  background: linear-gradient(#ae554d, #75413b85);
}
.career-track summary {
  position: relative;
  display: grid;
  grid-template-columns: 12px 4rem minmax(0, 1fr);
  column-gap: .65rem;
  row-gap: .22rem;
  align-content: center;
  min-block-size: 4.6rem;
  padding: .75rem var(--career-card-padding);
  transform-origin: center bottom;
  border-radius: 14px;
  color: #fff;
  cursor: pointer;
  list-style: none;
}
.career-track summary::-webkit-details-marker { display: none; }
.career-track details[open] > summary {
  border-color: #a0eedb70;
  box-shadow: var(--glass-shadow), 0 0 18px #a0eedb28;
}
.career-track details[open] > summary::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: calc(var(--career-marker-inset) - .5px);
  block-size: calc(var(--career-gap) + 1px);
  inline-size: 1px;
  background: linear-gradient(var(--contrast), var(--accent));
  pointer-events: none;
}
.role-year { grid-area: 1 / 2; align-self: center; color: #e5c9c4; font-size: .77rem; white-space: nowrap; }
.role-node {
  grid-area: 1 / 1;
  place-self: center;
  inline-size: 11px;
  block-size: 11px;
  border: 1px solid #a0eedb8a;
  border-radius: 50%;
  background: #46786f;
  box-shadow: 0 0 0 5px #a0eedb1b;
  transition: background-color .22s ease, box-shadow .22s ease;
}
.career-track details[open] .role-node {
  background: #e3fff7;
  box-shadow: 0 0 0 6px #a0eedb31, 0 0 0 11px #a0eedb12, 0 0 18px #a0eedb82;
}
.career-track details[open] .role-year { color: #fff; }
.role-title { grid-column: 3; font-size: clamp(.9rem, 1.08vw, 1.1rem); line-height: 1.23; }
.role-org { grid-column: 3; color: var(--muted); font-size: .79rem; line-height: 1.35; }
.role-detail {
  position: relative;
  margin-block-start: var(--career-gap);
  padding: 1.05rem clamp(16px, 2.2vw, 30px);
  --glass-surface: linear-gradient(110deg, #a858474f, #66464338 72%);
  border-inline-start-color: var(--accent);
  border-radius: 15px;
}
.role-detail > p:last-child { max-width: 74ch; margin-top: .42rem; color: #eadcd8; }
.role-dates { color: var(--contrast); }

@media (min-width: 1120px) {
  .career-track {
    --career-card-size: 10rem;
    --career-detail-size: 7.6rem;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    padding-block-end: calc(var(--career-gap) + var(--career-detail-size));
  }
  .career-track::before {
    inset-block: calc(.7rem + 1.7rem / 2 + .5px) auto;
    inset-inline: 6%;
    inline-size: auto;
    block-size: 1px;
    background: linear-gradient(90deg, #75413b, #ae554d, #75413b);
  }
  .career-track summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1.7rem minmax(2.3rem, auto) minmax(0, 1fr);
    justify-items: center;
    align-content: start;
    column-gap: .35rem;
    row-gap: .24rem;
    block-size: var(--career-card-size);
    padding: .7rem .38rem .62rem;
    text-align: center;
  }
  .career-track details[open] > summary::after { inset-inline-start: calc(50% - .5px); }
  .role-node { justify-self: end; }
  .role-year { justify-self: start; }
  .role-title { grid-area: 2 / 1 / 3 / -1; align-self: end; }
  .role-org { grid-area: 3 / 1 / 4 / -1; padding-block-start: .16rem; }
  .role-detail {
    position: absolute;
    inset: calc(var(--career-card-size) + var(--career-gap)) 0 auto;
    min-block-size: var(--career-detail-size);
    margin: 0;
  }
}

@media (max-width: 420px) {
  .career-track { margin-block-start: 1.5rem; }
  .role-detail > p:last-child { font-size: .93rem; }
}
.clients h2 { margin-block-end: .8rem; }
.client-carousel {
  --slide-width: clamp(8.5rem, 14vw, 12.5rem);
  --slide-gap: clamp(.7rem, 1.4vw, 1.2rem);
  position: relative;
  padding-bottom: .35rem;
}
.client-glow {
  position: absolute;
  inset: 2% 0 7%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 35% 44% at 50% 51%, #80dbc35f, transparent 92%),
              radial-gradient(ellipse 42% 49% at 52% 62%, #783d384f, transparent 96%);
  transform: translate3d(0, calc(var(--page-shift, 0px) * .13), 0);
}
.client-track {
  position: relative;
  display: flex;
  gap: var(--slide-gap);
  align-items: center;
  margin: 0;
  padding: clamp(1.8rem, 4vw, 3.7rem) calc((100% - var(--slide-width)) / 2);
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.client-track::-webkit-scrollbar { display: none; }
.client-slide { flex: 0 0 var(--slide-width); scroll-snap-align: center; min-width: 0; }
.client-card {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: .89;
  padding: clamp(.75rem, 1.8vw, 1.45rem);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #fff4ec72;
  border-radius: clamp(14px, 1.8vw, 24px);
  background: radial-gradient(ellipse at 40% 35%, #f1e7e0c7, #d3c0b9a8 64%, #9e716a7d),
              linear-gradient(144deg, #fff1, #703c342a);
  box-shadow: inset 0 1px 0 #fff8, inset 0 -1px 0 #3d161652, 0 15px 28px #0005;
  -webkit-backdrop-filter: blur(19px) saturate(128%);
  backdrop-filter: blur(19px) saturate(128%);
  transform: perspective(720px) translate3d(0, calc(var(--deck-depth, 0) * 8px), 0)
             rotateY(calc(var(--deck-distance, 0) * -12deg)) scale(calc(1 - var(--deck-depth, 0) * .063));
  filter: blur(calc(var(--deck-depth, 0) * 1.12px));
  opacity: calc(1 - var(--deck-depth, 0) * .105);
}
.client-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(145deg, #fff5, transparent 45%, #79efce29);
}
.client-slide:where([data-current]) .client-card {
  border-color: #d5fff1d4;
  box-shadow: inset 0 1px 0 #fffa, inset 0 -1px 0 #294c453d, 0 0 25px #a0eedb48, 0 16px 32px #0005;
}
.client-logo { display: block; width: 100%; height: clamp(69px, 10.5vw, 135px); object-fit: contain; overflow: hidden; }
.client-controls { display: flex; align-items: center; justify-content: center; gap: max(.8rem, var(--control-gap)); margin-block-start: .45rem; }
.client-controls[hidden] { display: none; }
.slider-control { width: 46px; padding: 0; cursor: pointer; font-size: 1.13rem; background-color: transparent; }
.slider-control:disabled { opacity: .35; cursor: default; translate: none; }
.client-counter { min-width: 4.15rem; text-align: center; color: #efe9e5a8; font-variant-numeric: tabular-nums; }
.client-counter [data-client-current] { color: var(--contrast); }

@media (max-width: 700px) {
  .client-carousel { --slide-width: clamp(8.3rem, 37vw, 10rem); }
  .client-logo { height: 85px; }
}

@media (prefers-reduced-motion: no-preference) {
  .career-track details[open] > .role-detail { animation: role-in .34s var(--glide) both; }
  @keyframes role-in {
    from { transform: translateY(-8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .role-node { transition: none; }
  .client-card { transform: none; filter: none; opacity: 1; }
}