:root {
  --ds-font-sans: "Instrument Sans", Arial, sans-serif;
  --ds-font-serif: "Cormorant Garamond", Georgia, serif;
  --ds-font-mono: "DM Mono", monospace;
  --ds-text-xs: .6875rem;
  --ds-text-sm: .875rem;
  --ds-text-body: clamp(.875rem, .84rem + .14vw, .975rem);
  --ds-text-lead: clamp(1.125rem, 1.02rem + .42vw, 1.45rem);
  --ds-title-card: clamp(2rem, 1.65rem + 1.2vw, 3.15rem);
  --ds-title-section: clamp(3rem, 2.5rem + 1.8vw, 4.5rem);
  --ds-title-page: clamp(4rem, 2.5rem + 6.4vw, 8.8rem);
  --ds-leading-tight: .96;
  --ds-leading-body: 1.6;
  --ds-space-section: clamp(5.5rem, 8vw, 8rem);
  --ds-space-heading-content: clamp(2.5rem, 4vw, 4rem);
  --ds-space-panel: clamp(1.5rem, 3vw, 3rem);
  --ds-space-card: clamp(1.5rem, 2.5vw, 2.25rem);
  --ds-measure-body: 68ch;
  --ds-measure-narrow: 54ch;
}

/* One hierarchy across the portfolio. Project branding may change color, not rhythm. */
body[data-page="home"] :is(.about-carousel-heading,.section-heading,.testimonials,.profile,.contact) h2 {
  max-width: 18ch;
  margin-top: 1rem;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-title-section);
  font-style: normal;
  font-stretch: 86%;
  font-weight: 560;
  line-height: .94;
  letter-spacing: -.055em;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}

.interactive-heading-word { display: inline-block; white-space: nowrap; }
.interactive-heading-letter {
  --heading-lift: 0px;
  display: inline-block;
  transform: translateY(var(--heading-lift));
  transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
  will-change: transform;
}
.interactive-heading:hover .interactive-heading-letter { opacity: .88; }

body[data-page="home"] :is(.about-carousel-heading,.section-heading,.testimonials) { display: block; }

body[data-page="home"] :is(.about-carousel-heading,.section-heading) > p:last-child {
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
}

body[data-page="home"] .quote p {
  max-width: 36ch;
  font-family: var(--ds-font-sans);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  font-style: normal;
  font-weight: 520;
  line-height: 1.24;
  letter-spacing: -.035em;
  text-wrap: balance;
}

body[data-page="home"] :is(.about-carousel-heading,.section-heading) > p:last-child {
  max-width: 56ch;
  font-size: var(--ds-text-body);
  line-height: var(--ds-leading-body);
}

body.case-study :is(h1,h2,h3,h4),
body[data-page="about"] :is(h1,h2,h3),
body[data-page="field-notes"] :is(h1,h2,h3),
body[data-page="ai-lab"] :is(h1,h2,h3) {
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}

body.case-study h1 { max-width: 12ch; font-size: var(--ds-title-page); line-height: .88; letter-spacing: -.065em; }
body.case-study .chapter > h2 { max-width: 17ch; }
body.case-study :is(.lead,.section-intro,.hero-line) { max-width: var(--ds-measure-narrow); }

body {
  font-family: var(--ds-font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Shared spacing rhythm: branding can change, hierarchy cannot. */
body[data-page="home"] :is(.about-preview,.work,.side-projects,.testimonials,.profile,.contact) {
  padding-top: var(--ds-space-section);
  padding-bottom: var(--ds-space-section);
}

body[data-page="home"] .section-heading {
  margin-bottom: var(--ds-space-heading-content);
}

body[data-page="home"] .about-carousel,
body[data-page="home"] .quote-stage {
  margin-top: var(--ds-space-heading-content);
}

body[data-page="home"] :is(.testimonials-panel,.profile-panel) {
  padding: var(--ds-space-panel);
}

body[data-page="home"] .contact-panel {
  padding: clamp(2.5rem, 4vw, 3.75rem) var(--ds-space-panel);
}

body.case-study .chapter:not(.hero) {
  padding-top: var(--ds-space-section);
  padding-bottom: var(--ds-space-section);
}

body.case-study .chapter > h2 {
  margin-bottom: var(--ds-space-heading-content);
}

@media (max-width: 680px) {
  :root {
    --ds-space-section: clamp(4rem, 14vw, 5rem);
    --ds-space-heading-content: clamp(2rem, 9vw, 2.75rem);
    --ds-space-panel: 1.5rem;
    --ds-space-card: 1.5rem;
  }
}

/* Homepage project cards: long summaries should support scanning, not compete with titles. */
body[data-page="home"] .work-card-copy h3 {
  font-size: clamp(2rem, 1.72rem + .9vw, 2.75rem);
  line-height: 1;
  letter-spacing: -.045em;
  text-wrap: balance;
}

body[data-page="home"] .work-card-copy > p {
  max-width: 58ch;
  font-size: var(--ds-text-body);
  line-height: var(--ds-leading-body);
  letter-spacing: -.012em;
}

body[data-page="home"] .work-card-copy {
  padding: clamp(2rem, 2.6vw, 2.75rem);
}

body[data-page="home"] .work-card h3 {
  margin-bottom: 1rem;
}

body[data-page="home"] .case-link {
  margin-top: 1.5rem;
}

body[data-page="home"] .work-card-peach {
  background: #071827;
  color: #f6f7f5;
}

body[data-page="home"] .work-card-peach .tag-row span {
  border-color: rgba(255,255,255,.3);
}

body[data-page="home"] .work-card-peach .work-media {
  padding: 0;
}

body[data-page="home"] .work-card-peach .media-window-three {
  min-height: 520px;
  border: 0;
  border-radius: 0;
  background: #001526;
}

/* NGA card: the portfolio card grammar, informed by the Gallery's quiet editorial identity. */
body[data-page="home"] .work-card-nga {
  overflow: hidden;
  background: #e9e7e1;
  color: #151515;
}

body[data-page="home"] .work-card-nga .work-card-copy {
  position: relative;
  z-index: 2;
  background:
    linear-gradient(90deg,rgba(255,255,255,.38),transparent 52%),
    #e9e7e1;
}

body[data-page="home"] .nga-card-logo {
  width: max-content;
  display: grid;
  gap: 0;
  color: #171717;
  line-height: .82;
}

body[data-page="home"] .nga-card-logo small {
  margin-left: 2px;
  font: 600 .61rem/1 var(--ds-font-sans);
  letter-spacing: .02em;
  text-transform: uppercase;
}

body[data-page="home"] .nga-card-logo strong {
  font: 500 1.45rem/.9 "Cormorant Garamond", Georgia, serif;
  letter-spacing: -.04em;
}

body[data-page="home"] .nga-card-heading {
  margin-top: auto !important;
  font-size: clamp(3.8rem,5.2vw,6.4rem) !important;
  font-weight: 520;
  line-height: .72 !important;
  letter-spacing: -.075em !important;
}

body[data-page="home"] .nga-card-heading em {
  font-family: "Cormorant Garamond",Georgia,serif;
  font-weight: 500;
}

body[data-page="home"] .work-card-nga .tag-row span {
  border-color: rgba(21,21,21,.22);
  background: rgba(255,255,255,.32);
}

body[data-page="home"] .work-card-nga .work-media { padding: 18px 18px 18px 0 }

body[data-page="home"] .nga-card-window {
  min-height: 520px;
  display: block;
  overflow: hidden;
  border: 8px solid rgba(255,255,255,.88);
  border-radius: 10px;
  background: #666;
  box-shadow: 0 20px 55px rgba(17,17,17,.16),inset 0 0 0 1px rgba(17,17,17,.08);
}

.nga-card-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 88%,rgba(180,56,43,.16),transparent 32%),
    linear-gradient(145deg,#656565,#545454);
}

.nga-shot {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(15,15,15,.16);
  background: #fff;
  box-shadow: 0 18px 38px rgba(0,0,0,.28);
  opacity: 0;
  transform: translate3d(34px,30px,0) scale(.965);
  transition: transform .9s cubic-bezier(.16,1,.3,1),opacity .45s ease,box-shadow .35s ease;
  will-change: transform,opacity;
}

.nga-shot img { display:block;width:100%;height:100%;object-fit:cover }
.nga-shot-canvas { width: 57%;left: 5%;top: 11%;aspect-ratio: 700/453;z-index: 1;transition-delay: .03s }
.nga-shot-detail { width: 54%;right: 5%;top: 15%;aspect-ratio: 700/453;z-index: 2;transition-delay: .1s }
.nga-shot-entry { width: 55%;right: 8%;bottom: 8%;aspect-ratio: 700/453;z-index: 3;transition-delay: .17s }
.nga-shot-mobile { width: 15%;left: 12%;bottom: 5%;aspect-ratio: 314/700;border-radius: 9px;z-index: 4;transition-delay: .24s }

.is-nga-active .nga-shot { opacity: 1;transform:none }
.work-card-nga:hover .nga-shot-canvas { transform:translate3d(-3px,-4px,0) rotate(-.25deg) }
.work-card-nga:hover .nga-shot-detail { transform:translate3d(4px,-3px,0) rotate(.3deg) }
.work-card-nga:hover .nga-shot-entry { transform:translate3d(2px,4px,0) rotate(-.2deg) }
.work-card-nga:hover .nga-shot-mobile { transform:translate3d(-2px,-5px,0) rotate(-.6deg) }

/* TTO card: portfolio component grammar with TikTok One's product character. */
body[data-page="home"] .work-card-tto {
  background: #dedcff;
  color: #17171a;
}

body[data-page="home"] .work-card-tto .work-card-copy {
  position: relative;
  z-index: 3;
  background:
    radial-gradient(circle at 12% 2%,rgba(37,244,238,.5),transparent 31%),
    radial-gradient(circle at 91% 91%,rgba(254,44,85,.22),transparent 35%),
    #dedcff;
}

body[data-page="home"] .tto-card-logo {
  display: flex;
  align-items: center;
  height: 28px;
  gap: 3px;
  color: #17171a;
  font: 500 1.03rem/1 var(--ds-font-sans);
  letter-spacing: -.02em;
}

body[data-page="home"] .tto-card-logo img:first-child { width: 21px; height: 24px }
body[data-page="home"] .tto-card-logo img:nth-child(2) {
  width: 78px;
  height: 18px;
  object-fit: fill;
}

body[data-page="home"] .tto-card-heading {
  font-family: "TikTok Sans", "Instrument Sans", Arial, sans-serif;
  font-size: clamp(3.25rem,4.3vw,5.15rem) !important;
  font-weight: 700;
  line-height: .84 !important;
  letter-spacing: -.07em !important;
  text-shadow: -2px -1px 0 rgba(37,244,238,.78), 2px 2px 0 rgba(254,44,85,.68);
}

body[data-page="home"] .work-card-tto .tag-row span {
  border-color: rgba(23,23,26,.2);
  background: rgba(255,255,255,.4);
}

body[data-page="home"] .work-card-tto .work-media { padding: 0 }

body[data-page="home"] .work-card-tto .tto-card-stage {
  min-height: 520px;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #fff;
  isolation: isolate;
}

.tto-card-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(128deg,transparent 0 59%,rgba(37,244,238,.08) 59% 75%,transparent 75%),
    linear-gradient(36deg,transparent 0 69%,rgba(254,44,85,.06) 69% 84%,transparent 84%);
}

.tto-card-orbit {
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  filter: blur(.2px);
}
.tto-orbit-cyan { width: 240px; height: 240px; right: -105px; top: -112px; background: #25f4ee }
.tto-orbit-pink { width: 165px; height: 165px; left: -90px; bottom: -78px; background: #fe2c55 }

.tto-asset {
  position: absolute;
  opacity: .08;
  transform: translate3d(42px,34px,0) scale(.96);
  transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .38s ease;
  will-change: transform,opacity;
}
.tto-asset img { display: block; width: 100%; height: auto }
.tto-asset-desktop {
  z-index: 1;
  width: 83%;
  left: 8%;
  top: 8%;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(18,18,21,.22),0 4px 14px rgba(18,18,21,.12);
}
.tto-asset-mobile {
  z-index: 4;
  width: 23%;
  right: 5.5%;
  top: 29%;
  height: 76%;
  overflow: hidden;
  border: 5px solid #17171a;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 26px 55px rgba(18,18,21,.28);
}
.tto-asset-mobile img { width: 100% }
.tto-asset-tile {
  z-index: 5;
  width: 37%;
  left: 9%;
  bottom: 8%;
  overflow: hidden;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 22px 50px rgba(18,18,21,.22);
}
.tto-asset-illustration-one { z-index: 2; width: 26%; left: 2%; top: 43%; filter: drop-shadow(0 15px 25px rgba(18,18,21,.12)) }
.tto-asset-illustration-two { z-index: 3; width: 23%; left: 38%; bottom: 0; filter: drop-shadow(0 15px 25px rgba(18,18,21,.1)) }

.timeline-item.is-tto-active .tto-asset { opacity: 1; transform: translate3d(0,0,0) scale(1) }
.timeline-item.is-tto-active .tto-asset-illustration-one { transition-delay: .06s }
.timeline-item.is-tto-active .tto-asset-tile { transition-delay: .12s }
.timeline-item.is-tto-active .tto-asset-illustration-two { transition-delay: .18s }
.timeline-item.is-tto-active .tto-asset-mobile { transition-delay: .24s }

.tto-card-caption {
  position: absolute;
  z-index: 8;
  left: 22px;
  right: 22px;
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  color: rgba(23,23,26,.56);
  font: 500 8px/1 var(--ds-font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}

@keyframes tto-card-float {
  from { translate: 0 0 }
  to { translate: 0 -7px }
}
.timeline-item.is-tto-active .tto-card-stage:hover .tto-asset-desktop,
.timeline-item.is-tto-active .tto-card-stage:hover .tto-asset-tile,
.timeline-item.is-tto-active .tto-card-stage:hover .tto-asset-mobile {
  animation: tto-card-float 1.35s ease-in-out infinite alternate;
}
.timeline-item.is-tto-active .tto-card-stage:hover .tto-asset-tile { animation-delay: -.45s }
.timeline-item.is-tto-active .tto-card-stage:hover .tto-asset-mobile { animation-delay: -.8s }

body[data-page="home"] .amazon-card-heading {
  display: grid;
  gap: 16px;
}

body[data-page="home"] .amazon-card-heading img {
  width: min(190px,70%);
  height: auto;
  opacity: .78;
}

body[data-page="home"] .amazon-card-heading span {
  color: #25cfd8;
  font-size: clamp(3rem,4.5vw,5.4rem);
  line-height: .82;
  letter-spacing: -.075em;
}

body[data-page="home"] .work-meta,
body[data-page="home"] .tag-row {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
}

/* Shared case-study hierarchy. Individual project palettes remain independent. */
body.case-study h1,
body.case-study h2,
body.case-study h3,
body.case-study h4 {
  text-wrap: balance;
  overflow-wrap: break-word;
}

body.case-study .chapter > h2 {
  max-width: 15ch;
  font-size: var(--ds-title-section);
  line-height: var(--ds-leading-tight);
  letter-spacing: -.055em;
}

body.case-study .topbar {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: 104px;
  padding: 22px 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f7f6f2;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
}

body.case-study[data-project-theme="tto"] .topbar {
  background: transparent;
  color: #17171a;
}

body.case-study .topbar > * { pointer-events: auto }

body.case-study .topbar .brand {
  color: #f7f6f2;
  text-shadow: 0 2px 16px rgba(0,0,0,.28);
}

body.case-study[data-project-theme="tto"] .topbar .brand {
  color: #17171a;
  text-shadow: 0 2px 16px rgba(255,255,255,.45);
}

body.case-study .project-breadcrumb {
  top: 50%;
  padding: 10px 16px;
  border-color: rgba(20,20,22,.1);
  background: #f2f0e9;
  color: #141416;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

body.case-study[data-project-theme="tto"] .project-breadcrumb {
  border-color: rgba(20,20,22,.1);
  background: #f2f0e9;
  color: #141416;
}

body.case-study .topbar .brand > span {
  background: #d8d6e1;
  color: #141416;
}

body.case-study .topbar .back,
body.case-study .topbar .close {
  padding: 14px 18px;
  border: 0;
  border-radius: 12px;
  background: #f2f0e9;
  color: #141416;
  font: 600 .75rem var(--ds-font-sans);
  text-transform: none;
  text-decoration: none;
}

/* Figma-derived Amazon card composition: real screens, independently animated. */
.fandom-card-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #001526 url("assets/amazon-fandom/background.png") center/cover;
}

.fandom-card-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 25%,rgba(38,207,216,.16),transparent 42%),linear-gradient(90deg,rgba(0,7,18,.2),transparent 55%);
  pointer-events: none;
}

.fandom-phone {
  position: absolute;
  z-index: 2;
  width: clamp(124px,12vw,154px);
  aspect-ratio: 786/1704;
  overflow: hidden;
  border: 3px solid #eef0f1;
  border-radius: clamp(18px,1.9vw,27px);
  background: #050505;
  box-shadow: 0 28px 55px rgba(0,0,0,.5),inset 0 0 0 3px #262726;
  opacity: .15;
  transition: transform .9s cubic-bezier(.16,1,.3,1),opacity .38s ease;
  will-change: transform,opacity;
}

.fandom-phone img { width: 100%; height: auto; display: block }
.fandom-phone-two img { transform: translateY(-33%) }
.fandom-phone-five img { transform: translateY(-12%) }
.fandom-phone-one { left: 12.6%; top: -1.5%; z-index: 2; transform: translate(48px,-86px) rotate(29deg) }
.fandom-phone-two { left: 47.9%; top: -5.6%; z-index: 3; transform: translate(48px,-86px) rotate(29deg) }
.fandom-phone-three { left: 63.8%; top: 18.1%; z-index: 2; transform: translate(48px,-86px) rotate(29deg) }
.fandom-phone-four { left: 21.9%; top: 37.8%; z-index: 4; transform: translate(48px,-86px) rotate(29deg) }
.fandom-phone-five { left: 38.2%; top: 54.8%; z-index: 1; transform: translate(48px,-86px) rotate(29deg) }

.timeline-item.is-fandom-active .fandom-phone { opacity: 1; transform: translate(0,0) rotate(29deg) }
.timeline-item.is-fandom-active .fandom-phone-two { transition-delay: .05s }
.timeline-item.is-fandom-active .fandom-phone-three { transition-delay: .1s }
.timeline-item.is-fandom-active .fandom-phone-four { transition-delay: .15s }
.timeline-item.is-fandom-active .fandom-phone-five { transition-delay: .2s }

@keyframes fandom-axis-float {
  from { transform: translate(0,0) rotate(29deg) }
  to { transform: translate(-5px,9px) rotate(29deg) }
}

.timeline-item.is-fandom-active .fandom-card-stage:hover .fandom-phone {
  animation: fandom-axis-float 1.15s ease-in-out infinite alternate;
}

.timeline-item.is-fandom-active .fandom-card-stage:hover .fandom-phone-two { animation-delay: -.32s }
.timeline-item.is-fandom-active .fandom-card-stage:hover .fandom-phone-three { animation-delay: -.58s }
.timeline-item.is-fandom-active .fandom-card-stage:hover .fandom-phone-four { animation-delay: -.84s }
.timeline-item.is-fandom-active .fandom-card-stage:hover .fandom-phone-five { animation-delay: -1.04s }

body.case-study .chapter p,
body.case-study .chapter li,
body.case-study details p,
body.case-study details li {
  line-height: var(--ds-leading-body);
}

body.case-study .lead,
body.case-study .section-intro,
body.case-study .hero-line {
  max-width: var(--ds-measure-narrow);
  font-size: var(--ds-text-lead);
  line-height: 1.45;
}

body.case-study .eyebrow,
body.case-study .kicker,
body.case-study small,
body.case-study .chips,
body.case-study .tags {
  font-family: var(--ds-font-mono);
}

@media (max-width: 760px) {
  body[data-page="home"] .work-card-copy > p {
    font-size: .875rem;
    line-height: 1.55;
  }

  body.case-study .topbar {
    min-height: 72px;
    padding: 10px 12px;
  }

  body.case-study .topbar .back,
  body.case-study .topbar .close { display: none }

  body[data-page="home"] .amazon-card-heading span { font-size: 3rem }
  body[data-page="home"] .tto-card-heading { font-size: 3.25rem !important }
  body[data-page="home"] .work-card-tto .work-card-copy { min-height: 470px }
  body[data-page="home"] .work-card-tto .tto-card-stage { min-height: 390px }
  .tto-asset-desktop { width: 94%; left: 3%; top: 8% }
  .tto-asset-mobile { width: 24%; right: 4%; top: 29%; height: 70%; border-width: 3px; border-radius: 17px }
  .tto-asset-tile { width: 42%; left: 7%; bottom: 10% }
  .tto-asset-illustration-one { width: 30%; left: 0; top: 45% }
  .tto-asset-illustration-two { width: 25%; left: 41%; bottom: 2% }
  .tto-card-caption { left: 12px; right: 12px; bottom: 9px; font-size: 6px }
  .fandom-phone { width: 28%; border-width: 2px }
  .fandom-phone-one { left: 12%; top: -1% }
  .fandom-phone-two { left: 47%; top: -5% }
  .fandom-phone-three { left: 63%; top: 18% }
  .fandom-phone-four { left: 21%; top: 38% }
  .fandom-phone-five { left: 38%; top: 55% }

  body.case-study .chapter > h2 {
    font-size: clamp(3rem, 14vw, 4.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fandom-phone { opacity: 1; transform: translate(0,0) rotate(29deg); transition: none }
  .tto-asset { opacity: 1; transform: none; transition: none; animation: none !important }
}

/* NGA card refinement — exact Figma wordmark, standard portfolio title, focused product collage. */
body[data-page="home"] .work-card-nga {
  background:#5c5c5c;
  color:#fff;
}

body[data-page="home"] .work-card-nga .work-card-copy {
  background:#5c5c5c;
}

body[data-page="home"] .nga-card-logo {
  display:block;
  width:min(305px,78%);
  height:auto;
  object-fit:contain;
}

body[data-page="home"] .nga-card-heading {
  margin-top:auto!important;
  font-family:var(--ds-font-sans)!important;
  font-size:clamp(3.45rem,4.7vw,5.7rem)!important;
  font-style:normal;
  font-weight:650;
  line-height:.82!important;
  letter-spacing:-.07em!important;
}

body[data-page="home"] .work-card-nga .tag-row span {
  color:#fff;
  border-color:rgba(255,255,255,.32);
  background:rgba(255,255,255,.06);
}

body[data-page="home"] .work-card-nga .work-media {padding:0}

body[data-page="home"] .work-card-nga .nga-card-window {
  min-height:520px;
  border:0;
  border-radius:0;
  background:#5b5b5b;
  box-shadow:none;
}

body[data-page="home"] .work-card-nga .nga-card-stage {
  background:
    radial-gradient(circle at 82% 78%,rgba(166,49,39,.46),transparent 38%),
    radial-gradient(circle at 8% 10%,rgba(255,255,255,.09),transparent 34%),
    #5b5b5b;
}

body[data-page="home"] .work-card-nga .nga-shot {
  opacity:.3;
  transform:translate3d(46px,-34px,0) scale(.97);
  border:1px solid rgba(255,255,255,.24);
  border-radius:3px;
  box-shadow:0 18px 42px rgba(0,0,0,.34);
  transition:transform .72s cubic-bezier(.16,1,.3,1),opacity .3s ease,box-shadow .3s ease;
}

body[data-page="home"] .work-card-nga .nga-shot-canvas {width:69%;left:5%;top:9%;z-index:1;transition-delay:0s}
body[data-page="home"] .work-card-nga .nga-shot-detail {width:50%;right:-3%;top:18%;z-index:2;transition-delay:.06s}
body[data-page="home"] .work-card-nga .nga-shot-entry {width:62%;right:6%;bottom:-2%;z-index:3;transition-delay:.12s}
body[data-page="home"] .work-card-nga .nga-shot-mobile {width:14%;left:7%;bottom:5%;z-index:4;border-radius:10px;transition-delay:.18s}

body[data-page="home"] .timeline-item.is-nga-active .nga-shot {opacity:1;transform:none}
body[data-page="home"] .work-card-nga:hover .nga-shot-canvas {transform:translate3d(-3px,-3px,0)}
body[data-page="home"] .work-card-nga:hover .nga-shot-detail {transform:translate3d(5px,-5px,0)}
body[data-page="home"] .work-card-nga:hover .nga-shot-entry {transform:translate3d(3px,5px,0)}
body[data-page="home"] .work-card-nga:hover .nga-shot-mobile {transform:translate3d(-3px,-7px,0)}

@media(max-width:760px){
  body[data-page="home"] .nga-card-logo{width:min(270px,82%)}
  body[data-page="home"] .nga-card-heading{font-size:3.4rem!important}
  body[data-page="home"] .work-card-nga .nga-card-window{min-height:390px}
}

@media(prefers-reduced-motion:reduce){
  body[data-page="home"] .work-card-nga .nga-shot{opacity:1;transform:none;transition:none}
}

/* Cross-project brand-mark scale and final NGA art direction. */
body[data-page="home"] .amazon-card-heading img{width:min(156px,62%)}

body[data-page="home"] .work-card-nga,
body[data-page="home"] .work-card-nga .work-card-copy{
  background:#050505;
  color:#fff;
}

body[data-page="home"] .nga-card-logo{
  width:150px;
  max-width:48%;
  filter:contrast(520%);
}

body[data-page="home"] .work-card-nga .nga-card-stage{
  background:
    radial-gradient(circle at 88% 83%,#f6c62f 0,rgba(246,198,47,.88) 10%,transparent 34%),
    radial-gradient(circle at 67% 72%,#d31359 0,rgba(211,19,89,.92) 18%,transparent 47%),
    radial-gradient(circle at 18% 8%,#ef3b2d 0,rgba(239,59,45,.7) 13%,transparent 38%),
    #050505;
}

body[data-page="home"] .work-card-nga .nga-shot{
  opacity:.38;
  transform:translate3d(42px,-30px,0) scale(.975);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 20px 48px rgba(0,0,0,.48);
}

body[data-page="home"] .work-card-nga .nga-shot-entry{
  width:84%;
  right:8%;
  bottom:7%;
  z-index:4;
  transition-delay:.09s;
}

body[data-page="home"] .work-card-nga .nga-shot-canvas{
  width:42%;
  left:-3%;
  top:3%;
  z-index:1;
}

body[data-page="home"] .work-card-nga .nga-shot-detail{
  width:42%;
  right:-3%;
  top:3%;
  z-index:2;
  transition-delay:.04s;
}

body[data-page="home"] .work-card-nga .nga-shot-mobile{
  width:13%;
  left:4%;
  bottom:4%;
  z-index:5;
  transition-delay:.15s;
}

@media(max-width:760px){
  body[data-page="home"] .nga-card-logo{width:132px;max-width:52%}
  body[data-page="home"] .amazon-card-heading img{width:min(142px,58%)}
}

/* Shared hierarchy for branded project cards. */
body[data-page="home"] .work-card-tto .tto-card-logo,
body[data-page="home"] .work-card-nga .nga-card-logo,
body[data-page="home"] .amazon-card-heading img{
  height:42px;
  max-height:42px;
}

body[data-page="home"] .work-card-tto .tto-card-logo{
  align-items:center;
  margin:0;
}

body[data-page="home"] .work-card-nga .nga-card-logo{
  width:auto;
  max-width:150px;
  object-fit:contain;
  object-position:left center;
  mix-blend-mode:screen;
}

body[data-page="home"] .amazon-card-heading{
  gap:52px;
  margin-top:0!important;
}

body[data-page="home"] .amazon-card-heading img{
  width:auto;
  max-width:156px;
  object-fit:contain;
  object-position:left center;
}

body[data-page="home"] .work-card-tto .tto-card-heading,
body[data-page="home"] .work-card-nga .nga-card-heading{
  margin-top:52px!important;
}

body[data-page="home"] .work-card-tto .tto-card-heading,
body[data-page="home"] .work-card-nga .nga-card-heading,
body[data-page="home"] .amazon-card-heading span{
  font-size:clamp(3.25rem,4.35vw,5.2rem)!important;
  line-height:.84!important;
  letter-spacing:-.07em!important;
}

body[data-page="home"] .work-card-tto .tto-card-heading,
body[data-page="home"] .work-card-nga .nga-card-heading,
body[data-page="home"] .amazon-card-heading{
  margin-bottom:18px!important;
}

/* NGA: softer near-black and a clear three-screen composition. */
body[data-page="home"] .work-card-nga,
body[data-page="home"] .work-card-nga .work-card-copy{
  background:#171717;
}

body[data-page="home"] .work-card-nga .nga-card-stage{
  background:
    radial-gradient(circle at 89% 82%,#f4c12e 0,rgba(244,193,46,.82) 11%,transparent 34%),
    radial-gradient(circle at 66% 70%,#cc1454 0,rgba(204,20,84,.86) 18%,transparent 48%),
    radial-gradient(circle at 18% 8%,#e94332 0,rgba(233,67,50,.62) 13%,transparent 38%),
    #171717;
}

body[data-page="home"] .work-card-nga .nga-shot{
  opacity:.64;
  transform:translate3d(24px,-18px,0) scale(.985);
  transition:transform .62s cubic-bezier(.16,1,.3,1),opacity .22s ease,box-shadow .25s ease;
}

body[data-page="home"] .work-card-nga .nga-shot-entry{
  width:78%;
  right:11%;
  top:22%;
  bottom:auto;
  z-index:3;
  transition-delay:.06s;
}

body[data-page="home"] .work-card-nga .nga-shot-canvas{
  width:48%;
  left:auto;
  right:4%;
  top:4%;
  z-index:1;
  transition-delay:0s;
}

body[data-page="home"] .work-card-nga .nga-shot-mobile{
  width:14%;
  left:4%;
  bottom:4%;
  z-index:4;
  transition-delay:.11s;
}

@keyframes nga-main-breathe{
  from{transform:translate3d(-2px,-3px,0) rotate(-.12deg)}
  to{transform:translate3d(3px,4px,0) rotate(.15deg)}
}

@keyframes nga-canvas-float{
  from{transform:translate3d(-3px,2px,0) rotate(-.18deg)}
  to{transform:translate3d(4px,-4px,0) rotate(.2deg)}
}

@keyframes nga-mobile-float{
  from{transform:translate3d(0,4px,0) rotate(-.45deg)}
  to{transform:translate3d(-3px,-6px,0) rotate(.35deg)}
}

body[data-page="home"] .timeline-item.is-nga-active .nga-card-stage:hover .nga-shot-entry{
  animation:nga-main-breathe 3.1s ease-in-out infinite alternate;
}

body[data-page="home"] .timeline-item.is-nga-active .nga-card-stage:hover .nga-shot-canvas{
  animation:nga-canvas-float 2.65s ease-in-out infinite alternate;
}

body[data-page="home"] .timeline-item.is-nga-active .nga-card-stage:hover .nga-shot-mobile{
  animation:nga-mobile-float 2.25s ease-in-out infinite alternate;
}

@media(max-width:760px){
  body[data-page="home"] .work-card-tto .tto-card-heading,
  body[data-page="home"] .work-card-nga .nga-card-heading{margin-top:42px!important}
  body[data-page="home"] .amazon-card-heading{gap:42px}
  body[data-page="home"] .work-card-tto .tto-card-heading,
  body[data-page="home"] .work-card-nga .nga-card-heading,
  body[data-page="home"] .amazon-card-heading span{font-size:3.15rem!important}
}

@media(prefers-reduced-motion:reduce){
  body[data-page="home"] .nga-card-stage:hover .nga-shot{animation:none!important}
}

/* Symphony Products — asset-ready homepage case card. */
body[data-page="home"] .work-card-symphony{
  background:#dcd8ff;
  color:#15131d;
}

body[data-page="home"] .work-card-symphony .work-card-copy{
  background:
    radial-gradient(circle at 18% 92%,rgba(255,91,129,.2),transparent 30%),
    #dcd8ff;
}

body[data-page="home"] .symphony-card-logo{
  height:42px;
  display:flex;
  align-items:center;
}
body[data-page="home"] .symphony-card-logo img{display:block;width:auto;height:24px;max-width:180px;object-fit:contain;object-position:left center;}

body[data-page="home"] .symphony-card-heading{
  margin:52px 0 18px!important;
  font-family:var(--font-sans, "Instrument Sans", sans-serif);
  font-size:clamp(3.25rem,4.35vw,5.2rem)!important;
  line-height:.84!important;
  letter-spacing:-.07em!important;
}

body[data-page="home"] .work-card-symphony .tag-row span{
  border-color:rgba(21,19,29,.26);
}

body[data-page="home"] .work-card-symphony .work-media{padding:0}

.symphony-card-stage{
  min-height:520px;
  height:100%;
  position:relative;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:
    radial-gradient(circle at 80% 16%,rgba(106,231,226,.28),transparent 27%),
    radial-gradient(circle at 20% 82%,rgba(151,104,255,.34),transparent 38%),
    linear-gradient(145deg,#2f2e81 0%,#5144d8 48%,#6e55f6 100%);
  isolation:isolate;
}
.symphony-card-stage::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(135deg,#000,rgba(0,0,0,.28) 72%,transparent);}
.symphony-card-stage::after{content:"";position:absolute;z-index:1;right:-14%;top:-24%;width:68%;aspect-ratio:1;border:1px solid rgba(255,255,255,.19);border-radius:50%;box-shadow:0 0 0 58px rgba(255,255,255,.035),0 0 0 116px rgba(255,255,255,.022);pointer-events:none;transition:transform .9s cubic-bezier(.2,.8,.2,1);}
.symphony-card-composition{
  position:absolute;
  left:50%;
  top:50%;
  width:min(92%,760px);
  aspect-ratio:2648/1879;
  transform:translate(-50%,-50%);
  z-index:2;
  transition:transform .9s cubic-bezier(.2,.8,.2,1);
}
.symphony-card-shot{
  position:absolute;
  display:block;
  max-width:none;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 20px 30px rgba(11,8,30,.2));
  transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .9s ease;
}
.symphony-card-shot-reference{z-index:1;left:0;top:15.5%;width:73.5%;transform:rotate(-4deg)}
.symphony-card-shot-product{z-index:3;left:61.6%;top:0;width:38.4%;transform:rotate(4.5deg)}
.symphony-card-shot-assets{z-index:4;left:44.8%;top:58.6%;width:46.5%;transform:rotate(2.5deg)}
.work-card-symphony:hover .symphony-card-composition{transform:translate(-50%,-51.2%) scale(1.015)}
.work-card-symphony:hover .symphony-card-stage::after{transform:translate(-16px,18px) rotate(8deg) scale(1.04)}
.work-card-symphony:hover .symphony-card-shot{filter:drop-shadow(0 26px 38px rgba(11,8,30,.28))}
.work-card-symphony:hover .symphony-card-shot-reference{transform:translate(-5px,-3px) rotate(-4.8deg)}
.work-card-symphony:hover .symphony-card-shot-product{transform:translate(5px,-6px) rotate(5.2deg)}
.work-card-symphony:hover .symphony-card-shot-assets{transform:translate(6px,5px) rotate(3.2deg)}

.symphony-placeholder-grid{
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom right,#000,transparent 82%);
}

.symphony-placeholder{
  position:absolute;
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 24px 50px rgba(5,4,12,.32);
  transition:transform .65s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;
}

.symphony-placeholder span,
.symphony-placeholder small,
.symphony-placeholder-note{
  font-family:"DM Mono",monospace;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.symphony-placeholder-product{
  width:55%;
  aspect-ratio:1.12;
  left:8%;
  top:13%;
  padding:26px;
  color:#171523;
  background:linear-gradient(145deg,#f8f7f3,#d9fdf4);
  transform:rotate(-4deg);
  z-index:2;
}

.symphony-placeholder-product strong{
  display:block;
  margin-top:24%;
  font-size:clamp(1.65rem,2.3vw,2.7rem);
  line-height:.87;
  letter-spacing:-.06em;
}

.symphony-placeholder-product small,
.symphony-placeholder-output small{position:absolute;left:26px;bottom:22px;font-size:.6rem}

.symphony-placeholder-output{
  width:38%;
  aspect-ratio:.8;
  right:5%;
  top:8%;
  padding:22px;
  color:#f9f7f1;
  background:linear-gradient(155deg,#7160ff,#ff5b81);
  transform:rotate(7deg);
  z-index:3;
}

.symphony-placeholder-output strong{
  display:block;
  margin-top:42%;
  font-size:clamp(2.5rem,4vw,4.7rem);
  line-height:.8;
  letter-spacing:-.08em;
}

.symphony-placeholder-system{
  width:52%;
  height:112px;
  right:7%;
  bottom:8%;
  padding:18px 20px;
  color:#11131b;
  background:#d8ff3e;
  transform:rotate(-2deg);
  z-index:4;
}

.symphony-placeholder-system i{
  display:inline-block;
  width:23%;
  height:9px;
  margin:32px 7px 0 0;
  border-radius:99px;
  background:#171523;
  opacity:.86;
}

.symphony-placeholder-note{
  position:absolute;
  left:7%;
  bottom:6%;
  color:rgba(255,255,255,.62);
  font-size:.58rem;
  line-height:1.6;
  z-index:1;
}

.work-card-symphony:hover .symphony-placeholder-product{transform:translate3d(-5px,-9px,0) rotate(-5.5deg)}
.work-card-symphony:hover .symphony-placeholder-output{transform:translate3d(7px,-12px,0) rotate(8.5deg)}
.work-card-symphony:hover .symphony-placeholder-system{transform:translate3d(0,8px,0) rotate(-3deg)}
.work-card-symphony:hover .symphony-placeholder{box-shadow:0 32px 64px rgba(5,4,12,.42)}

@media(max-width:980px){
  body[data-page="home"] .work-card-symphony .work-card-copy{min-height:470px}
  .symphony-card-stage{min-height:410px}
}

@media(max-width:760px){
  body[data-page="home"] .symphony-card-heading{margin-top:42px!important;font-size:3.15rem!important}
  .symphony-card-stage{min-height:390px}
  .symphony-card-composition{width:min(96%,620px)}
  .symphony-placeholder-product{width:58%;left:5%;padding:18px}
  .symphony-placeholder-output{width:40%;right:3%;padding:16px}
  .symphony-placeholder-system{width:58%;right:5%;height:90px}
  .symphony-placeholder-product small,.symphony-placeholder-output small{left:18px;bottom:16px}
}

@media(prefers-reduced-motion:reduce){
  .symphony-card-composition,.symphony-card-shot{transition:none}
  .work-card-symphony:hover .symphony-placeholder{transform:none}
}