/* ============================================================
   Nes Digital — Home page styles
   Tokens imported from colors_and_type.css
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-page);
  color: var(--fg-1);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- Page shell ---------- */
.nd-page {
  min-height: 100vh;
  background: var(--bg-page);
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 18px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 12px 10px 22px;
  margin: 18px auto 0;
  max-width: 1200px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-1);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-2);
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--nd-black);
}
.nav__brand img { height: 26px; }
.nav__brand span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.nav__links {
  display: flex;
  gap: 2px;
  margin-left: auto;
}
.nav__link {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  color: var(--fg-2);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  transition: all var(--dur-base) var(--ease-out);
}
.nav__link:hover { color: var(--nd-black); }
.nav__link.is-active { color: var(--nd-black); background: var(--bg-sunken); }
.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  box-shadow: var(--shadow-glow-brand);
  transition: filter var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.nav__cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.nav__cta-arrow {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

/* ============================================================
   HERO — Light, with mega "Design Studio" text + photo stack
   ============================================================ */
.hero {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 100px 32px 80px;
}
.hero__glow {
  position: absolute;
  top: -100px;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 800px;
  background:
    radial-gradient(30% 50% at 20% 40%, rgba(0, 229, 255, 0.45) 0%, transparent 65%),
    radial-gradient(30% 55% at 80% 55%, rgba(255, 0, 128, 0.40) 0%, transparent 65%),
    radial-gradient(35% 50% at 50% 75%, rgba(120, 47, 255, 0.42) 0%, transparent 65%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(8, 8, 16, 0.05) 1px, transparent 1px);
  background-size: 25% 100%;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.hero__top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 80px;
}
.hero__logo {
  height: clamp(40px, 5vw, 64px);
  width: auto;
  display: block;
}
.hero__corner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.hero__corner strong {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-1);
}

/* The mega text + stacked photos */
.hero__stage {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 460px;
  margin: 0 -32px;
}
.hero__megatext {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 8vw, 130px);
  line-height: 1.25;
  padding-bottom: 0.12em;
  letter-spacing: -0.045em;
  color: var(--nd-black);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(280px, 34vw, 520px);
  pointer-events: none;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px 0.12em;
  animation: heroGapClose 3.6s cubic-bezier(0.65, 0, 0.35, 1) 0.6s forwards;
}
@keyframes heroGapClose {
  0%, 60%   { gap: clamp(280px, 34vw, 520px); justify-content: space-between; }
  100%      { gap: 0.32em; justify-content: center; }
}

.hero__cards {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(220px, 22vw, 320px);
  aspect-ratio: 4 / 5;
  z-index: 3;
  pointer-events: none;
  animation: heroCardsExit 3.6s cubic-bezier(0.65, 0, 0.35, 1) 0.6s forwards;
}
@keyframes heroCardsExit {
  0%, 40%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  65%       { transform: translate(-50%, -50%) scale(0.55); opacity: 1; }
  100%      { transform: translate(-50%, -240%) scale(0.45); opacity: 0; }
}
.hero__megatext span:nth-child(2) {
  color: var(--nd-black);
}

.hero__isotype-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
}
.hero__isotype {
  height: 1.6em;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Cursor-follow card stack */
.hero__cursor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.hero__cursor-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 260px;
  border-radius: var(--r-lg);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-4);
  border: 4px solid #fff;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85) rotate(var(--rot, 0deg));
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  will-change: left, top, opacity, transform;
}
.hero__cursor-card:nth-child(1) { --rot: -8deg; z-index: 12; }
.hero__cursor-card:nth-child(2) { --rot:  4deg; z-index: 11; }
.hero__cursor-card:nth-child(3) { --rot: -3deg; z-index: 10; }
.hero__cursor-card:nth-child(4) { --rot:  6deg; z-index:  9; }
.hero__cursor-card:nth-child(5) { --rot: -5deg; z-index:  8; }
.hero__cursor-card:nth-child(6) { --rot:  9deg; z-index:  7; }
.hero__cursor-card.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(var(--rot, 0deg));
}

.hero__card {
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-4);
  background-size: cover;
  background-position: center;
  border: 4px solid #fff;
  transition: transform var(--dur-slow) var(--ease-out);
}
.hero__card--3 {
  transform: translate(-44px, -32px) rotate(-9deg);
  filter: brightness(0.92);
  animation: heroCard3Close 3.6s cubic-bezier(0.65, 0, 0.35, 1) 0.6s forwards;
}
.hero__card--2 {
  transform: translate(-22px, -16px) rotate(-4deg);
  filter: brightness(0.96);
  animation: heroCard2Close 3.6s cubic-bezier(0.65, 0, 0.35, 1) 0.6s forwards;
}
.hero__card--1 {
  transform: translate(0, 0) rotate(2deg);
  animation: heroCard1Close 3.6s cubic-bezier(0.65, 0, 0.35, 1) 0.6s forwards;
}
@keyframes heroCard3Close {
  0%, 30%  { transform: translate(-44px, -32px) rotate(-9deg); }
  60%, 100%{ transform: translate(0, 0) rotate(0deg); }
}
@keyframes heroCard2Close {
  0%, 30%  { transform: translate(-22px, -16px) rotate(-4deg); }
  60%, 100%{ transform: translate(0, 0) rotate(0deg); }
}
@keyframes heroCard1Close {
  0%, 30%  { transform: translate(0, 0) rotate(2deg); }
  60%, 100%{ transform: translate(0, 0) rotate(0deg); }
}
.hero__cards:hover .hero__card--3,
.hero__cards:hover .hero__card--2,
.hero__cards:hover .hero__card--1 { /* hover disabled during animation */ }

.hero__bottom {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  margin-top: 60px;
}
.hero__sub {
  max-width: 460px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
}
.hero__sub strong { color: var(--fg-1); font-weight: 600; }
.hero__chips {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 280px;
}
.hero__chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  color: var(--fg-1);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  transition: all var(--dur-base) var(--ease-out);
}
.hero__chip:hover {
  border-color: transparent;
  box-shadow: var(--shadow-glow-violet);
  transform: translateX(-3px);
}
.hero__chip-arrow {
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}

/* ============================================================
   PILLARS — four-up tagline row right after hero
   ============================================================ */
.pillars {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 32px 100px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  border-top: 1px solid var(--border-1);
}
.pillar__label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}
.pillar__h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  color: var(--nd-black);
  letter-spacing: -0.01em;
  margin: 0;
}

/* ============================================================
   PHOTO WHEEL — spinning half-arc of polaroids.
   The pivot sits FAR BELOW the visible stage, so polaroids
   only become visible while traversing the top portion of their
   orbit: they rise into view from off-screen left, arc up and
   over, and exit off-screen right. The lower half of the orbit
   is hidden entirely below the stage — nothing dips into the
   bottom of the frame.
   ============================================================ */
.photo-strip {
  /* Geometry: with viewport width W and pivot-drop D, the arc
     enters the stage at the left/right edges when R² ≈ D² + (W/2)².
     We size R a bit larger than that so polaroids extend slightly
     off-screen at the entry/exit, and choose D so the top of the
     arc lands roughly in the upper third of the stage. */
  --wheel-radius: clamp(960px, 95vw, 1500px);
  --pivot-drop: clamp(700px, 68vw, 1100px);
  --card-w: clamp(260px, 24vw, 360px);
  --card-h: calc(var(--card-w) * 1.06);       /* photo (4:3) + label area */

  position: relative;
  overflow: hidden;
  background: var(--bg-page);
  max-height: 0;
  opacity: 0;
  padding: 0;
  transition: max-height 0.7s var(--ease-out), opacity 0.5s var(--ease-out), padding 0.5s var(--ease-out);
}
.photo-strip.is-revealed {
  max-height: 1400px;
  opacity: 1;
  padding: 48px 0 72px;
}
.photo-strip__stage {
  position: relative;
  width: 100%;
  height: clamp(540px, 46vw, 740px);          /* shows just the top arc + card */
  overflow: hidden;
}

/* Wheel pivot sits well BELOW the bottom of the stage. The huge
   radius + low pivot means the visible portion is just the top
   ~120° of the arc — polaroids slide in from the left edge,
   sweep over the top, and slide out the right edge. */
.photo-strip__wheel {
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--pivot-drop));
  width: 0;
  height: 0;
  animation: photo-wheel-spin 120s linear infinite;
  will-change: transform;
}
@keyframes photo-wheel-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.photo-strip__spoke {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform: rotate(var(--angle));
}

/* Polaroid hangs OUTWARD along the spoke: its inner edge sits
   on the arc, its body extends away from the pivot. Since the
   pivot is at stage bottom, polaroids on the visible top half
   always sit fully above it — no bottom crop possible. */
.polaroid {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--card-w);
  padding: 14px 14px 0;
  background: #fff;
  border-radius: 8px;
  box-shadow:
    0 1px 0 rgba(8,8,16,0.04),
    0 22px 50px -22px rgba(8,8,16,0.28),
    0 8px 18px -10px rgba(8,8,16,0.14);
  transform: translate(-50%, calc(-100% - var(--wheel-radius)));
}
.polaroid__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  background-color: var(--nd-ink-100);
}
.polaroid__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--nd-black);
  text-align: center;
  padding: 16px 8px 22px;
  line-height: 1.1;
}

/* Asterisk + caption fill the empty pocket inside the arc. */
.photo-strip__center {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  width: min(520px, 80%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  z-index: 2;
}
.photo-strip__asterisk {
  width: 64px;
  height: 64px;
  display: block;
  filter: drop-shadow(0 6px 16px rgba(120, 47, 255, 0.28));
}
.photo-strip__caption {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

@media (max-width: 1100px) {
  .photo-strip {
    --card-w: clamp(200px, 24vw, 280px);
    --pivot-drop: 280px;
    --wheel-radius: min(82vw, 900px);
  }
  .photo-strip__stage { height: 540px; }
  .polaroid__label { font-size: 16px; padding: 14px 6px 20px; }
}
@media (max-width: 820px) {
  .photo-strip {
    --card-w: clamp(160px, 28vw, 220px);
    --pivot-drop: 220px;
    --wheel-radius: min(90vw, 700px);
  }
  .photo-strip__stage { height: 460px; }
  .polaroid { padding: 12px 12px 0; }
  .polaroid__label { font-size: 14px; padding: 12px 4px 16px; }
  .photo-strip__asterisk { width: 52px; height: 52px; }
  .photo-strip__caption { font-size: 14px; }
}
@media (max-width: 520px) {
  .photo-strip {
    --card-w: 140px;
    --pivot-drop: 180px;
    --wheel-radius: 95vw;
  }
  .photo-strip__stage { height: 380px; }
  .polaroid__label { font-size: 12px; padding: 10px 3px 14px; }
  .photo-strip__center { width: 88%; bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-strip__wheel { animation: none; }
}

/* ============================================================
   WHY WORK WITH US — light band
   ============================================================ */
.why {
  position: relative;
  background: var(--bg-page);
  color: var(--fg-1);
  overflow: hidden;
}
.why__glow {
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
}
.why__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 120px 32px;
  min-height: 720px;
}
.why__main {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  /* Stretch so both columns share a row height; with the portrait
     dropping its intrinsic aspect-ratio sizing, the row height is
     driven entirely by the text column on the left. */
  align-items: stretch;
}
.why__copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.why__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--nd-black);
  white-space: nowrap;
}
.why__title em {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}
.why__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-2);
  max-width: 460px;
  margin: 0;
}
.why__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--border-1);
  max-width: 460px;
}
.why__stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.02em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.why__stat-lbl {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 4px;
}
.why__portrait {
  position: relative;
  /* Height: 90% of the text column on the left (the grid row).
     Aspect ratio kept at 4:5 — width derived from height. */
  height: 90%;
  aspect-ratio: 4 / 5;
  width: auto;
  align-self: center;
  justify-self: center;
  border-radius: var(--r-xl);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-4);
}
.why__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(8, 8, 16, 0.4) 100%);
  pointer-events: none;
}

/* ============================================================
   PORTFOLIO — full-bleed carousel
   ============================================================ */
.portfolio {
  max-width: 1280px;
  margin: 0 auto;
  padding: 140px 32px 60px;
}
.portfolio__head {
  text-align: center;
  margin-bottom: 64px;
}
.portfolio__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 20px;
}
.portfolio__eyebrow::before,
.portfolio__eyebrow::after {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--grad-brand);
  border-radius: 2px;
}
.portfolio__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--nd-black);
}
.portfolio__title em {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}

/* Slides stage */
.portfolio__stage {
  position: relative;
}
.portfolio__slides {
  position: relative;
  display: grid;
  /* All slides share the same grid cell — container sizes to the
     tallest, switching slides never causes a layout jump. */
}
.folio {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 64px;
  align-items: center;
}
.folio {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 480ms var(--ease-out),
    transform 480ms var(--ease-out),
    visibility 0s linear 480ms;
  pointer-events: none;
}
.folio.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out),
    visibility 0s linear 0s;
}

.folio__media {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: var(--r-xl);
  background-size: cover;
  background-position: center;
  background-color: var(--nd-ink-100);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.folio__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.0) 60%, rgba(120, 47, 255, 0.12) 100%);
  pointer-events: none;
}

.folio__details {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-right: 16px;
}
.folio__cat {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.folio__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--nd-black);
}
.folio__copy {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0;
  max-width: 440px;
}
.folio__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.folio__tag {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--nd-ink-200);
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
  white-space: nowrap;
  background: var(--nd-white);
}

/* Carousel nav */
.portfolio__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 56px;
}
.portfolio__arrow {
  appearance: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--nd-ink-300);
  background: var(--nd-white);
  color: var(--nd-black);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.portfolio__arrow svg {
  width: 22px;
  height: 22px;
}
.portfolio__arrow:hover {
  background: var(--nd-black);
  color: var(--nd-white);
  border-color: var(--nd-black);
  box-shadow: var(--shadow-3);
}
.portfolio__arrow:active { transform: scale(0.96); }

.portfolio__count {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--fg-3);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 70px;
  justify-content: center;
}
.portfolio__count-now {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.portfolio__count-sep { color: var(--nd-ink-300); }
.portfolio__count-total { color: var(--fg-3); }

   CREATIVE SERVICES — numbered hover list
   ============================================================ */
.services {
  max-width: 1280px;
  margin: 0 auto;
  padding: 140px 32px;
}
.services__head {
  text-align: center;
  margin-bottom: 64px;
}
.services__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 20px;
}
.services__eyebrow::before,
.services__eyebrow::after {
  content: "";
  width: 28px; height: 2px;
  background: var(--grad-brand);
  border-radius: 2px;
}
.services__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--nd-black);
}
.services__title em {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}

.services__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}
.services__list {
  display: flex;
  flex-direction: column;
}
.service-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--border-1);
  cursor: pointer;
  transition: padding var(--dur-base) var(--ease-out);
}
.service-row:last-child { border-bottom: 1px solid var(--border-1); }
.service-row__num {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  color: var(--fg-3);
}
.service-row__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: -0.02em;
  color: var(--nd-ink-200);
  line-height: 1;
  transition: color var(--dur-base) var(--ease-out);
}
.service-row__arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateX(-8px);
  transition: all var(--dur-base) var(--ease-out);
}
.service-row__arrow::before {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--nd-black);
  border-top: 1.5px solid var(--nd-black);
  transform: rotate(45deg);
}
.service-row.is-active .service-row__label,
.service-row:hover .service-row__label {
  color: var(--nd-black);
}
.service-row.is-active .service-row__num,
.service-row:hover .service-row__num {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.service-row.is-active .service-row__arrow,
.service-row:hover .service-row__arrow {
  opacity: 1;
  transform: translateX(0);
  background: var(--grad-brand);
  border-color: transparent;
}
.service-row.is-active .service-row__arrow::before,
.service-row:hover .service-row__arrow::before {
  border-color: #fff;
}

.services__detail {
  position: sticky;
  top: 100px;
  padding: 32px;
  background: var(--bg-sunken);
  border-radius: var(--r-xl);
}
.services__panel {
  display: none;
  animation: panelFade var(--dur-slow) var(--ease-out);
}
.services__panel.is-active { display: block; }
@keyframes panelFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.services__panel-eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-eyebrow, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 12px;
}
.services__panel-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--nd-black);
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 20px;
}
.services__detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.services__detail-tag {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--border-1);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  color: var(--fg-1);
}
.services__detail-copy {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0 0 14px;
}
.services__panel .services__detail-copy:last-child { margin-bottom: 0; }
.services__detail-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  color: var(--nd-violet);
  padding: 12px 0;
  border-top: 1px solid var(--border-1);
  width: 100%;
}
.services__detail-link::after {
  content: "";
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

/* ============================================================
   WORK PROCESS — 4 numbered cards w/ gradient glow
   ============================================================ */
.process {
  position: relative;
  background: var(--bg-sunken);
  overflow: hidden;
}
.process__glow {
  position: absolute;
  inset: 20% -10% 0 -10%;
  background:
    radial-gradient(30% 60% at 25% 70%, rgba(255, 0, 128, 0.35) 0%, transparent 60%),
    radial-gradient(30% 60% at 50% 50%, rgba(120, 47, 255, 0.32) 0%, transparent 60%),
    radial-gradient(30% 60% at 75% 70%, rgba(0, 229, 255, 0.30) 0%, transparent 60%);
  filter: blur(20px);
  pointer-events: none;
}
.process__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 140px 32px;
}
.process__head {
  text-align: center;
  margin-bottom: 80px;
}
.process__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 16px;
}
.process__eyebrow::before,
.process__eyebrow::after {
  content: "";
  width: 28px; height: 2px;
  background: var(--grad-brand);
  border-radius: 2px;
}
.process__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 auto;
  max-width: 800px;
  color: var(--nd-black);
}
.process__title em {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}

.process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: end;
}
.step-card {
  position: relative;
  background: #fff;
  border-radius: var(--r-xl);
  padding: 36px 28px 32px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.step-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-4);
}
.step-card:nth-child(even) { transform: translateY(-30px); }
.step-card:nth-child(even):hover { transform: translateY(-36px); }

.step-card__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 140px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--nd-black);
}
.step-card.is-featured .step-card__num {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step-card__body { display: flex; flex-direction: column; gap: 12px; }
.step-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--nd-black);
}
.step-card.is-featured .step-card__title {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step-card__copy {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
}

/* ============================================================
   MARQUEE band
   ============================================================ */
.marquee {
  position: relative;
  background: var(--nd-black);
  color: #fff;
  padding: 36px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.marquee__track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 56px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;
  color: #fff;
}
.marquee__item:nth-child(even) {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.marquee__star {
  display: inline-block;
  width: 36px; height: 36px;
  flex-shrink: 0;
}
.marquee__star svg { width: 100%; height: 100%; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   BLOG — 3-up
   ============================================================ */
.blog {
  max-width: 1280px;
  margin: 0 auto;
  padding: 140px 32px;
}
.blog__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  margin-bottom: 56px;
}
.blog__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 16px;
}
.blog__eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--grad-brand);
  border-radius: 2px;
}
.blog__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--nd-black);
  max-width: 720px;
}
.blog__title em {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  white-space: nowrap;
  background-clip: text;
  color: transparent;
  font-style: normal;
}
.blog__all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  color: var(--nd-black);
  padding: 12px 22px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  transition: all var(--dur-base) var(--ease-out);
}
.blog__all:hover { background: var(--nd-black); color: #fff; border-color: var(--nd-black); }
.blog__all-arrow {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.post {
  display: flex;
  flex-direction: column;
  gap: 18px;
  cursor: pointer;
}
.post__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.post:hover .post__media {
  transform: translateY(-4px) scale(1.005);
  box-shadow: var(--shadow-4);
}
.post__cat {
  position: absolute;
  top: 16px; left: 16px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nd-black);
}
.post__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--fg-3);
}
.post__meta-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--fg-4);
}
.post__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--nd-black);
  margin: 0;
  transition: color var(--dur-base) var(--ease-out);
}
.post:hover .post__title {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.post__excerpt {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  background: var(--nd-black);
  color: #fff;
  overflow: hidden;
}
.footer__glow {
  position: absolute;
  inset: 0;
  background: var(--grad-night-glow);
  pointer-events: none;
}
.footer__cta {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 120px 32px 80px;
  text-align: center;
}
.footer__cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 24px;
}
.footer__cta-eyebrow::before,
.footer__cta-eyebrow::after {
  content: "";
  width: 28px; height: 2px;
  background: var(--grad-brand);
  border-radius: 2px;
}
.footer__cta-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 7vw, 120px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 auto 40px;
  color: #fff;
  max-width: 1100px;
}
.footer__cta-title em {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}
.footer__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 36px;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  box-shadow: var(--shadow-glow-brand);
  transition: filter var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.footer__cta-btn:hover { filter: brightness(1.06); transform: translateY(-2px); }
.footer__cta-arrow {
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

.footer__main {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px 60px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 60px;
}
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer__brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.footer__brand-row img { height: 28px; }
.footer__brand-row span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.footer__brand p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  max-width: 320px;
}
.footer__col h4 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
}
.footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__col a {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--dur-base) var(--ease-out);
}
.footer__col a:hover { color: #fff; }
.footer__col-contact {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  word-break: break-all;
}

.footer__bottom {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 32px 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.footer__bottom a:hover { color: #fff; }
.footer__social {
  display: flex;
  gap: 10px;
}
.footer__social a {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transition: all var(--dur-base) var(--ease-out);
}
.footer__social a:hover { background: var(--grad-brand); border-color: transparent; }
.footer__social svg { width: 14px; height: 14px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .pillars { grid-template-columns: 1fr 1fr; }
  .why__inner { padding: 80px 32px; }
  .why__main { grid-template-columns: 1fr; gap: 40px; }
  /* On mobile the columns stack — restore intrinsic sizing for the portrait. */
  .why__portrait { height: auto; width: 100%; aspect-ratio: 4 / 5; justify-self: stretch; }
  .why__title { white-space: normal; font-size: clamp(36px, 8vw, 56px); }
  .folio { grid-template-columns: 1fr; gap: 28px; }
  .folio__details { padding-right: 0; }
  .services__grid { grid-template-columns: 1fr; gap: 32px; }
  .services__detail { position: static; }
  .process__grid { grid-template-columns: 1fr 1fr; }
  .step-card:nth-child(even) { transform: none; }
  .blog__grid { grid-template-columns: 1fr; }
  .footer__main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav { gap: 8px; padding: 8px 8px 8px 14px; }
  .nav__links { display: none; }
  .hero { padding: 60px 16px 40px; }
  .hero__megatext { gap: 80px; font-size: clamp(72px, 24vw, 140px); }
  .hero__cards { width: 220px; }
  .pillars { grid-template-columns: 1fr; padding: 40px 24px 60px; }
  .why__inner { padding: 80px 24px; }
  .services { padding: 80px 24px; }
  .portfolio { padding: 100px 24px 40px; }
  .portfolio__title { font-size: clamp(36px, 9vw, 56px); }
  .folio__media { aspect-ratio: 4 / 3; }
  .folio__title { font-size: 32px; }
  .process__inner { padding: 80px 24px; }
  .process__grid { grid-template-columns: 1fr; }
  .step-card { min-height: 280px; }
  .step-card__num { font-size: 96px; }
  .blog { padding: 80px 24px; }
  .blog__head { grid-template-columns: 1fr; }
  .footer__main { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; gap: 16px; }
}