/* ==========================================================================
   Statement
   ========================================================================== */
.statement {
  position: relative;
  background: var(--off-white);
  color: var(--black);
  padding-block: clamp(3.5rem, 7vw, 9rem) clamp(7rem, 13vw, 16rem);
  text-align: center;
}
.eyebrow {
  display: inline-block;
  font-size: clamp(1rem, 0.72rem + 0.62vw, 1.6rem);
  font-weight: 500; letter-spacing: -0.03em;
}
.eyebrow__dot { position: relative; isolation: isolate; display: inline-block; }
.eyebrow__dot::before {
  content: "";
  position: absolute; z-index: -1; left: 50%; top: 50%;
  width: 2.2em; aspect-ratio: 1; border-radius: 50%;
  background: var(--blue);
  translate: -32% -50%;
}
@media (prefers-reduced-motion: no-preference) {
  .js .eyebrow__dot::before { scale: 0; transition: scale 1.1s var(--ease-out) 0.35s; }
  .js .eyebrow.is-in .eyebrow__dot::before { scale: 1; }
}

.statement__text {
  max-width: 24.5em;
  margin: clamp(1.5rem, 2.6vw, 3rem) auto 0;
  font-size: clamp(1.55rem, 0.85rem + 2.35vw, 3.6rem);
  font-weight: 600; line-height: 1.28; letter-spacing: -0.04em;
}
.statement__text em { color: var(--blue); }
.statement__more {
  display: inline-flex; align-items: center; gap: 0.9rem;
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgb(0 0 0 / 0.25);
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  transition: color 0.35s, border-color 0.35s;
}
.statement__more svg { width: 1.5rem; height: 0.75rem; transition: translate 0.5s var(--ease-out); }
.statement__more:is(:hover, :focus-visible) { color: var(--blue); border-color: var(--blue); }
.statement__more:is(:hover, :focus-visible) svg { translate: 0.35rem 0; }

.stats {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 2rem clamp(2.5rem, 8vw, 10rem);
  margin-top: clamp(3rem, 5.5vw, 6.25rem);
}
.stat { display: grid; justify-items: center; gap: 1rem; }
.stat__icon {
  width: clamp(2.6rem, 2rem + 1.4vw, 3.8rem); height: auto;
  fill: none; stroke: var(--blue); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.6s var(--ease-out);
}
.stat:hover .stat__icon { transform: translateY(-4px) rotate(-6deg); }
.stat__label { font-size: clamp(0.95rem, 0.8rem + 0.35vw, 1.3rem); font-weight: 500; letter-spacing: -0.01em; }
.stat__num { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Expertise
   ========================================================================== */
.expertise {
  --img-w: clamp(13rem, 24.5vw, 29.5rem);
  --overlap: clamp(3rem, 5.5vw, 6.5rem);
  --xp-gap: clamp(1.5rem, 3vw, 3.5rem);
  position: relative;
  background: var(--black);
  padding-bottom: clamp(5rem, 9vw, 10rem);
}
.expertise__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--img-w);
  column-gap: var(--xp-gap);
  padding-top: clamp(5.5rem, 8.5vw, 10.5rem);
}
.expertise__media {
  --curtain: #141414;
  position: relative;
  grid-column: 2; grid-row: 1 / span 2;
  margin-top: calc(var(--overlap) * -1 - clamp(5.5rem, 8.5vw, 10.5rem));
  min-height: calc(var(--img-w) * 1.2);
  overflow: hidden;
  background: #111;
}
.expertise__parallax { position: absolute; inset: -9% 0; }
.expertise__media img { width: 100%; height: 100%; object-fit: cover; }
.js .expertise__media[data-reveal] img {
  scale: var(--xp-s, 1);
  translate: var(--xp-x, 0) 0;
  transition: transform 1.8s var(--ease-out), scale 1.2s var(--ease-out), translate 1.2s var(--ease-out);
}
.expertise__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(160deg, rgb(58 126 246 / 0.55), rgb(107 63 212 / 0.25) 60%, transparent);
  mix-blend-mode: soft-light;
  opacity: 0; transition: opacity 0.8s var(--ease-soft);
}
.expertise[data-active="1"] { --xp-s: 1.06; }
.expertise[data-active="2"] { --xp-s: 1.12; --xp-x: -3%; }
.expertise[data-active="3"] { --xp-s: 1.1; --xp-x: 3%; }
.expertise[data-active="4"] { --xp-s: 1.03; }
.expertise:is([data-active="2"], [data-active="3"], [data-active="4"]) .expertise__media::before { opacity: 1; }

.expertise__title {
  grid-column: 1; grid-row: 1;
  align-self: end;
  padding-bottom: clamp(1.1rem, 1.8vw, 2rem);
  border-bottom: 1px solid var(--border-dark);
  font-size: clamp(1.55rem, 0.95rem + 1.55vw, 3rem);
  font-weight: 600; letter-spacing: -0.04em;
}

.xp-list {
  grid-column: 1 / -1; grid-row: 2 / span 4;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}
.xp {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--xp-gap);
  padding-block: clamp(1.5rem, 3.3vw, 3.9rem);
  border-bottom: 1px solid var(--border-dark);
}
.xp::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--blue-bright), var(--purple));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.9s var(--ease-out);
}
.xp--lead { grid-column: 1; display: block; padding-block: clamp(1.4rem, 2.4vw, 2.6rem); }
.xp__head { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem clamp(1.5rem, 5vw, 6rem); }
.xp__word {
  font-size: var(--fs-giant);
  font-weight: 700; line-height: 0.95; letter-spacing: -0.055em;
  color: var(--blue);
  white-space: nowrap;
  transition: transform 0.9s var(--ease-out), color 0.4s, opacity 0.5s;
}
.xp--lead .xp__word { font-size: clamp(2rem, 1.1rem + 2.5vw, 4.4rem); font-weight: 600; color: var(--white); letter-spacing: -0.04em; }
.xp__dot { display: inline-block; color: var(--white); transition: transform 0.9s var(--ease-out), color 0.4s; }
.xp__text {
  max-width: 27em;
  font-size: clamp(0.92rem, 0.7rem + 0.48vw, 1.35rem);
  line-height: 1.45;
  color: rgb(255 255 255 / 0.82);
  transition: transform 0.9s var(--ease-out), color 0.4s, opacity 0.5s;
}
.xp--lead .xp__text { margin-top: 1rem; max-width: 33em; }

@media (hover: hover) {
  .xp-list:hover .xp:not(:hover) :is(.xp__word, .xp__text) { opacity: 0.38; }
  .xp:hover::after { transform: none; }
  .xp:hover .xp__word { transform: translate3d(clamp(0.5rem, 1.4vw, 1.75rem), 0, 0); color: var(--blue-bright); }
  .xp--lead:hover .xp__word { color: var(--white); }
  .xp:hover .xp__dot { transform: translate3d(0.08em, 0, 0) scale(1.25); color: var(--blue-bright); }
  .xp:hover .xp__text { transform: translate3d(0.6rem, 0, 0); color: var(--white); }
}

/* ==========================================================================
   Case study
   ========================================================================== */
.case {
  position: relative;
  background: var(--charcoal);
  padding-block: clamp(4rem, 7vw, 8rem) clamp(5rem, 8vw, 9rem);
  overflow: clip;
}
.case__title { font-size: clamp(1.55rem, 0.95rem + 1.55vw, 3rem); font-weight: 600; letter-spacing: -0.04em; }
.case__marquee {
  margin-top: clamp(0.25rem, 0.6vw, 0.75rem);
  padding-left: max(var(--gutter), (100% - var(--container)) / 2);
  white-space: nowrap;
  font-size: clamp(4rem, 1.5rem + 10.2vw, 14rem);
  font-weight: 600; line-height: 1; letter-spacing: -0.035em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgb(255 255 255 / 0.3);
  pointer-events: none; user-select: none;
}
.case__marquee span { display: inline-block; }

.case__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 3rem;
  margin-top: clamp(-13rem, -9vw, -3rem);
}
.case__copy { padding-top: clamp(4rem, 9vw, 12rem); }
.case__cat { font-size: clamp(1rem, 0.75rem + 0.6vw, 1.65rem); font-weight: 500; color: var(--blue); letter-spacing: -0.03em; }
.case__name { margin-top: 0.4rem; font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.05em; line-height: 0.95; }
.case__type { margin-top: 0.45rem; font-size: clamp(1.35rem, 0.9rem + 1.25vw, 3rem); font-weight: 500; letter-spacing: -0.04em; color: var(--blue); line-height: 1.1; }
.case__text { max-width: 26em; margin-top: clamp(1.25rem, 2.2vw, 2.5rem); font-size: clamp(0.95rem, 0.75rem + 0.45vw, 1.3rem); color: rgb(255 255 255 / 0.85); }
.case__copy .arrow-btn { margin-top: clamp(2rem, 3.4vw, 3.75rem); }

.case__visual {
  --tx: 0; --ty: 0;
  position: relative;
  display: grid; place-items: center;
  perspective: 1400px;
}
.case__circle, .case__device { grid-area: 1 / 1; }
.case__circle {
  width: clamp(15rem, 32vw, 39rem);
  aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 62% 38%, #6f7bff 0%, #6552e8 38%, #6a3fd6 72%, #5a33c4 100%);
  transition: transform 1.2s var(--ease-out), opacity 1s, scale 1s var(--ease-out);
}
.case__device { position: relative; width: clamp(10.5rem, 21vw, 26rem); }
.case__device img {
  width: 100%;
  transform: rotateX(calc(var(--ty) * -7deg)) rotateY(calc(var(--tx) * 9deg));
  transition: transform 1s var(--ease-out);
}
.case__visual:hover .case__circle { scale: 1.04; }

/* ==========================================================================
   Scroll-linked depth (progressive enhancement — static where unsupported)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (animation-range: entry) {
    .expertise__parallax { animation: drift-y linear both; animation-timeline: view(); }
    .case__marquee span { animation: drift-x linear both; animation-timeline: view(); }
    .case__device { animation: rise-y linear both; animation-timeline: view(); }
    .case__circle { animation: rise-y-soft linear both; animation-timeline: view(); }

    @keyframes drift-y { from { translate: 0 -7%; } to { translate: 0 7%; } }
    @keyframes drift-x { from { translate: 8% 0; } to { translate: -28% 0; } }
    @keyframes rise-y { from { translate: 0 14%; } to { translate: 0 -14%; } }
    @keyframes rise-y-soft { from { translate: 0 6%; } to { translate: 0 -6%; } }
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 64em) { /* 1024 */
  .xp { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); }
  .case__item { column-gap: 1.5rem; }
}

@media (max-width: 48em) { /* 768 */
  .statement { text-align: left; }
  .statement__text { margin-inline: 0; }
  .stats { justify-content: space-between; gap: 1.5rem; }
  .stat { justify-items: start; }

  .expertise { --overlap: 3rem; }
  .expertise__inner { grid-template-columns: 1fr; padding-top: 0; }
  .expertise__media {
    grid-column: 1; grid-row: 1;
    width: min(72%, 20rem); justify-self: end;
    min-height: 0; aspect-ratio: 4 / 5;
    margin-top: calc(var(--overlap) * -1);
  }
  .expertise__title { grid-row: 2; margin-top: 2.5rem; }
  .xp-list { grid-column: 1; grid-row: 3; grid-template-columns: 1fr; grid-template-rows: none; }
  .xp, .xp--lead { grid-column: 1; grid-template-columns: 1fr; row-gap: 0.9rem; padding-block: 1.75rem; }
  .xp__word { font-size: clamp(3.2rem, 16vw, 5.5rem); }

  .case__item { grid-template-columns: 1fr; margin-top: 0; row-gap: 3rem; }
  .case__copy { padding-top: 1rem; }
  .case__visual { order: -1; margin-top: -3.5rem; }
  .case__circle { width: min(80vw, 24rem); }
  .case__device { width: min(46vw, 15rem); }
}

@media (max-width: 30em) { /* 480 */
  .stats { flex-direction: column; align-items: flex-start; }
  .stat { grid-auto-flow: column; align-items: center; }
}