/* ==========================================================================
   SHAURYA STUDIO® — MOTION LAYER
   Built on top of the Stitch design (black / electric cyan / royal blue,
   Syne + Inter + JetBrains Mono). This file adds motion only — it does not
   introduce new colours, fonts or layout decisions.
   ========================================================================== */

:root {
  /* Palmer mono palette — zero hue. Legacy var names kept so downstream
     rules need no rewrite; both now resolve to bone/white. */
  --cyan:        #FAF9F5;   /* bone — former electric-cyan */
  --blue:        #FFFFFF;   /* white — former royal-blue */
  --accent:      #FAF9F5;
  --hair:        rgba(255, 255, 255, 0.08);
  --divider:     rgba(187, 187, 187, 0.2);
  --expo:        cubic-bezier(0.16, 1, 0.3, 1);
  --expo-soft:   cubic-bezier(0.22, 1, 0.36, 1);
  --dur:         1.15s;
}

html { scroll-behavior: auto; }

body {
  background-color: #000;
  color: #fff;
  overflow-x: hidden;
}

/* Lock scroll while the preloader runs */
body.is-loading { overflow: hidden; height: 100vh; }

img { display: block; }

/* ==========================================================================
   1. PRELOADER
   ========================================================================== */

#preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000;
  display: flex;
  align-items: flex-end;
  padding: clamp(1.5rem, 5vw, 4rem);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.2s var(--expo);
  will-change: clip-path;
}

#preloader.is-done {
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}

.pre-inner { width: 100%; }

.pre-brand {
  font-size: clamp(1.5rem, 6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  opacity: 0;
  transform: translateY(24px);
  animation: pre-in 1s var(--expo) 0.1s forwards;
}

.pre-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 1.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #555562;
  opacity: 0;
  transform: translateY(16px);
  animation: pre-in 1s var(--expo) 0.25s forwards;
}

.pre-count { color: var(--cyan); font-variant-numeric: tabular-nums; }

.pre-bar {
  margin-top: 0.9rem;
  height: 1px;
  width: 100%;
  background: var(--hair);
  overflow: hidden;
}

.pre-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  box-shadow: 0 0 12px rgba(242, 241, 238, 0.6);
}

@keyframes pre-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   2. CUSTOM CURSOR
   ========================================================================== */

@media (pointer: fine) {
  body, a, button, .perspective-card, .floating-tag, .cursor-pointer, .svc {
    cursor: none !important;
  }
}

#custom-cursor-dot,
#custom-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
}

#custom-cursor-dot {
  width: 6px; height: 6px;
  background: var(--cyan);
  z-index: 9999;
  box-shadow: 0 0 10px var(--cyan), 0 0 20px var(--cyan);
  transition: opacity 0.3s;
}

#custom-cursor-ring {
  width: 40px; height: 40px;
  border: 1px solid rgba(242, 241, 238, 0.5);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    width 0.4s var(--expo),
    height 0.4s var(--expo),
    background-color 0.35s,
    border-color 0.35s,
    opacity 0.3s;
}

#cursor-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #000;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s, transform 0.4s var(--expo);
  white-space: nowrap;
}

body.cursor-hover #custom-cursor-ring {
  width: 74px; height: 74px;
  background: var(--cyan);
  border-color: transparent;
  box-shadow: 0 0 30px rgba(242, 241, 238, 0.45);
}
body.cursor-hover #custom-cursor-dot { opacity: 0 !important; }
body.cursor-hover #cursor-label { opacity: 1; transform: scale(1); }

/* Idle pulse while over the hero */
body.cursor-hero:not(.cursor-hover) #custom-cursor-ring {
  animation: pulse-ring 2.4s infinite var(--expo);
}

@keyframes pulse-ring {
  0%   { border-color: rgba(242, 241, 238, 0.25); }
  50%  { border-color: rgba(242, 241, 238, 0.85); }
  100% { border-color: rgba(242, 241, 238, 0.25); }
}

/* ==========================================================================
   3. AMBIENT BACKGROUND FIELD
   ========================================================================== */

#bg-canvas-container {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

#bg-grid { width: 100%; height: 100%; display: block; }

main, footer, nav { position: relative; z-index: 1; }

/* ==========================================================================
   4. SCROLL PROGRESS + NAV
   ========================================================================== */

#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}

#scroll-progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, transparent 0%, var(--blue) 30%, var(--cyan) 70%, transparent 100%);
  box-shadow: 0 0 14px rgba(242, 241, 238, 0.55);
  transform-origin: left center;
}

#site-nav {
  transition: transform 1.0s var(--expo), background-color 0.5s, padding 0.5s;
}
#site-nav.nav-hidden { transform: translateY(-102%); }
#site-nav.nav-solid  { background-color: rgba(0, 0, 0, 0.75); }

/* Link with sliding duplicate label */
.nav-link {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 1.35;
  transition: color 0.5s var(--expo);
}
.nav-link span { display: block; transition: transform 0.6s var(--expo); }
.nav-link span:last-child {
  position: absolute;
  inset: 0;
  transform: translateY(105%);
  color: var(--cyan);
}
.nav-link:hover span:first-child { transform: translateY(-105%); }
.nav-link:hover span:last-child  { transform: translateY(0); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition: border-color 0.6s var(--expo), color 0.6s var(--expo);
}
.status-pill:hover { border-color: rgba(242, 241, 238, 0.5); color: var(--cyan); }

.status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #FAF9F5;
  box-shadow: 0 0 0 0 rgba(242, 241, 238, 0.6);
  animation: dot-pulse 2.4s infinite;
}

@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(242, 241, 238, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(242, 241, 238, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 241, 238, 0); }
}

/* ==========================================================================
   5. HERO
   ========================================================================== */

#hero-canvas-container {
  position: absolute;
  top: -6vh;
  right: -8vw;
  width: min(58vw, 780px);
  height: min(58vw, 780px);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease 0.4s;
}
#hero-canvas-container.is-ready { opacity: 1; }
#hero-canvas-container canvas { width: 100% !important; height: 100% !important; }

@media (max-width: 900px) {
  #hero-canvas-container { top: auto; bottom: 0; right: -30vw; width: 90vw; height: 90vw; opacity: 0.5; }
}

/* Fluid so the headline never wraps out of its mask and the whole hero
   (headline + subtext + CTA) still lands inside the first screen. */
main { padding-top: clamp(6.5rem, 11vh, 10rem); }

.hero-title {
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  line-height: 1.04;
}

.hero-interactive-area { min-height: 0; }

.hero-title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}

.hero-title .line-i,
[data-anim="mask-line"] .line-i {
  display: block;
  transform: translateY(115%);
  will-change: transform;
}

.hero-title.is-in .line-i {
  transform: translateY(0);
  transition: transform 1.5s var(--expo);
}
.hero-title.is-in .line:nth-child(1) .line-i { transition-delay: 0.05s; }
.hero-title.is-in .line:nth-child(2) .line-i { transition-delay: 0.15s; }
.hero-title.is-in .line:nth-child(3) .line-i { transition-delay: 0.25s; }
.hero-title.is-in .line:nth-child(4) .line-i { transition-delay: 0.35s; }

/* Floating tags */
.floating-tag {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  z-index: 20;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 1s var(--expo), border-color 0.5s, box-shadow 0.5s, color 0.5s;
  will-change: transform;
}

.floating-tag.is-in { opacity: 0.72; }

.floating-tag:hover {
  opacity: 1;
  border-color: rgba(242, 241, 238, 0.6);
  box-shadow: 0 0 24px rgba(242, 241, 238, 0.35);
}

@media (max-width: 1000px) { .floating-tag { display: none; } }

.hero-scroll-cue {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2.75rem;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #555562;
}
.hero-scroll-cue i {
  display: block;
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  animation: cue-slide 2.4s var(--expo) infinite;
  transform-origin: left center;
}
@keyframes cue-slide {
  0%, 100% { transform: scaleX(0.3); opacity: 0.4; }
  50%      { transform: scaleX(1);   opacity: 1; }
}

/* ==========================================================================
   6. GIANT TYPE — SHAURYA™
   ========================================================================== */

#giant-wrap { position: relative; }

/* Cursor-reactive wash. Sits behind the wordmark (which is positioned, so it
   paints above this) and keeps the panel responsive to mouse movement even
   when the page isn't scrolling. Pointer devices at desktop widths only —
   without a real cursor it would just be a static blob. */
@media (hover: hover) and (min-width: 1024px) {
  #giant-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
      440px circle at var(--gx, 50%) var(--gy, 50%),
      rgba(242, 241, 238, 0.07),
      transparent 70%
    );
  }
}

/* Desktop/laptop: the band was a thin strip floating in a 100vh frame. Give
   it real height and drop the opaque fill so the ambient dot field behind the
   page reads through it — the panel stops being a black void without adding
   any new visual language. Mobile keeps the original py-16 / bg-black. */
@media (min-width: 1024px) {
  #giant-wrap {
    min-height: 0;
    align-items: center;
    padding-block: clamp(1rem, 2.5vh, 2rem);
    background: linear-gradient(180deg, rgba(242, 241, 238, 0.025), rgba(0, 0, 0, 0) 55%);
  }
}

.giant-type {
  /* Two clipped layers: a travelling white sheen band over the static metal
     ramp. The sheen is what keeps the wordmark alive with the page at rest. */
  background-image:
    linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.5) 45%, transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #cfcfd4 55%, #9a9aa0 100%);
  background-size: 220% 100%, 100% 100%;
  background-position: 150% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  line-height: 1.12;
  padding-bottom: 0.08em;
  will-change: transform;
  animation: giant-sheen 9s linear infinite;
  /* Only paint the sheen while the band is actually on screen — the JS tick
     owns this class. */
  animation-play-state: paused;
}

.giant-type.is-live { animation-play-state: running; }

@keyframes giant-sheen {
  0%   { background-position: 150% 0, 0 0; }
  100% { background-position: -85% 0, 0 0; }
}

/* Specular sweep driven by scroll */
.giant-type::after {
  content: 'SHAURYA™';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    100deg,
    transparent 40%,
    rgba(242, 241, 238, 0.85) 50%,
    transparent 60%
  );
  background-size: 260% 100%;
  background-position: var(--sweep, 130%) 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
}

/* ==========================================================================
   7. REVEAL PRIMITIVES
   ========================================================================== */

[data-anim] { will-change: transform, opacity; }

[data-anim="fade-up"] {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 1s var(--expo), transform 1.15s var(--expo);
}

[data-anim="mask-line"] .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
[data-anim="mask-line"].is-in .line-i { transform: translateY(0); transition: transform 1.3s var(--expo); }
[data-anim="mask-line"].is-in .line:nth-child(2) .line-i { transition-delay: 0.1s; }
[data-anim="mask-line"].is-in .line:nth-child(3) .line-i { transition-delay: 0.2s; }

[data-anim="card-in"] {
  opacity: 0;
  transform: translateY(46px) scale(0.985);
  transition: opacity 1.1s var(--expo), transform 1.1s var(--expo), border-color 0.5s, box-shadow 0.5s;
}

[data-anim="block-in"] {
  opacity: 0;
  transform: translateY(60px) scale(0.965);
  transition: opacity 1.1s var(--expo), transform 1.4s var(--expo);
}

[data-anim].is-in {
  opacity: 1;
  transform: none;
}

/* Word-by-word statement */
[data-anim="words"] .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em) rotate(2deg);
  transition: opacity 0.7s var(--expo), transform 0.9s var(--expo);
}
[data-anim="words"].is-in .word { opacity: 1; transform: none; }

[data-anim="words"] span.text-text-secondary {
  transition: color 0.6s var(--expo);
}
[data-anim="words"]:hover span.text-text-secondary { color: #fff; }

/* ==========================================================================
   8. PROJECT CARDS
   ========================================================================== */

.perspective-card {
  perspective: 1400px;
  transform-style: preserve-3d;
}

.perspective-inner {
  transform-style: preserve-3d;
  will-change: transform;
}

/* The wipe is driven by the parent card: an element clipped to zero height
   never reports as intersecting, so it can't observe its own reveal. */
.card-media {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.4s var(--expo);
}
[data-card].is-in .card-media { clip-path: inset(0 0 0% 0); }

/* Just enough overscale to hide the parallax travel — these are UI
   screenshots, so cropping them harder loses readable detail. */
.card-media img {
  transform: scale(1.12) translateY(var(--py, 0px));
  will-change: transform;
}

/* Cyan scan overlay on hover */
.card-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--expo);
  background:
    repeating-linear-gradient(
      0deg,
      rgba(242, 241, 238, 0.06) 0px,
      rgba(242, 241, 238, 0.06) 1px,
      transparent 1px,
      transparent 4px
    ),
    radial-gradient(120% 90% at 50% 100%, rgba(242, 241, 238, 0.16), transparent 60%);
  mix-blend-mode: screen;
}
.perspective-card:hover .card-scan { opacity: 1; }

/* ==========================================================================
   9. SERVICE CARDS — cursor spotlight
   ========================================================================== */

.svc {
  --svc-c: var(--cyan);
  position: relative;
  overflow: hidden;
  background: #141413;
  border: 1px solid var(--hair);
  transition:
    border-color 0.55s var(--expo),
    box-shadow 0.55s var(--expo),
    transform 0.6s var(--expo),
    opacity 0.9s var(--expo);
}
.svc-cyan  { --svc-c: var(--cyan); }
.svc-blue  { --svc-c: var(--blue); }
.svc-green { --svc-c: var(--accent); }

/* Mouse-tracking spotlight, tinted per card */
.svc::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--expo);
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--svc-c) 22%, transparent),
    transparent 65%
  );
}

/* Soft glow bleeding up from the bottom edge, like a lit floor panel */
.svc-glow {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -55%;
  height: 65%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--svc-c) 50%, transparent), transparent 72%);
  opacity: 0.3;
  filter: blur(6px);
  pointer-events: none;
  transition: opacity 0.5s var(--expo);
}
.svc:hover .svc-glow { opacity: 0; }
.svc-glow { display: none; }

.svc:hover {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: none;
  transform: translateY(-6px);
}
.svc:hover::before { opacity: 1; }

.svc-icon {
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--svc-c) 16%, #000);
  border: 1px solid color-mix(in srgb, var(--svc-c) 40%, transparent);
  color: var(--svc-c);
}
.svc-icon .material-symbols-outlined { font-size: 22px; }

.svc-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--svc-c) 14%, #000);
  border: 1px solid color-mix(in srgb, var(--svc-c) 45%, transparent);
  color: #fff;
  text-decoration: none;
  transition: background 0.4s var(--expo), border-color 0.4s var(--expo), transform 0.3s var(--expo);
}
.svc-cta:hover {
  background: color-mix(in srgb, var(--svc-c) 28%, #000);
  border-color: color-mix(in srgb, var(--svc-c) 70%, transparent);
  transform: translateX(3px);
}
.svc-cta .material-symbols-outlined { font-size: 18px; color: var(--svc-c); }

/* ==========================================================================
   10. WORKSHOP + ABOUT BLOCKS
   ========================================================================== */

.workshop-media img,
.about-photo img { will-change: transform; }

.workshop-media img { transform: scale(1.12) translateY(var(--py, 0px)); }

.about-photo-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #555562;
}
.about-photo.no-image img { display: none; }
.about-photo.no-image .about-photo-fallback { display: flex; }

/* ==========================================================================
   11. MAGNETIC BUTTONS
   ========================================================================== */

.btn-magnetic { will-change: transform; }
.btn-magnetic-inner {
  display: inline-flex;
  align-items: center;
  will-change: transform;
}

/* ==========================================================================
   12. 3D CYLINDRICAL SHOWCASE — sticky overlap + scroll-scrubbed turntable
   ========================================================================== */

/* Statement pins under the showcase: outer gives it scroll room to stay
   fixed at top:0 for a beat before the cylinder rises up to cover it. */
.statement-pin-outer { position: relative; height: 170vh; }
.statement-pin-inner {
  position: sticky;
  top: 0;
  min-height: 100vh;
  will-change: opacity;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cylinder-outer {
  position: relative;
  z-index: 5;
  /* Was -85vh, which pulled this black turntable section up over the SHAURYA™
     name section (z-index 5 paints on top), covering the wordmark before it
     ever reached its centred moment. -18vh keeps a small handoff overlap while
     leaving the name a clean centred window as it pins. */
  margin-top: -18vh;
  height: 420vh;
  background: #000;
}

.cylinder-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "scene" "desc" "progress";
  align-content: center;
  justify-items: center;
  gap: clamp(1rem, 3vh, 2rem);
  background: #000;
}

/* Desktop: a side-by-side split capped the ring at the width of a 1fr column,
   so the turntable read as a thumbnail. The stage now gives the scene the full
   stage width as its own row — header above, description + progress below —
   so the ring is the section, not a detail in the corner of it. */
@media (min-width: 1024px) {
  .cylinder-stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "header header"
      "scene  scene"
      "desc   progress";
    align-content: stretch;
    justify-items: stretch;
    column-gap: 4vw;
    row-gap: clamp(0.75rem, 2.2vh, 1.5rem);
    /* Top padding clears the fixed nav; the scene row absorbs whatever's left,
       so the chrome is kept deliberately lean — every pixel it gives back
       becomes ring diameter. */
    padding: clamp(5rem, 9.5vh, 7rem) 4vw clamp(1.75rem, 4vh, 3rem);
  }
}

.cylinder-header { width: 100%; flex: 0 0 auto; grid-area: header; }
.cylinder-header h3 { opacity: 0; transform: translateY(24px); }
.cylinder-header[data-anim].is-in h3,
.cylinder-header.is-in h3 { opacity: 1; transform: none; transition: opacity 0.9s var(--expo), transform 1.1s var(--expo); }

.cylinder-scene {
  /* Card size tracks viewport HEIGHT, not width — this box lives inside a
     100vh sticky stage alongside a header, a description panel and a
     progress bar, so vh is the scarce dimension here, not vw. */
  --cyl-card-w: clamp(150px, 19vh, 240px);
  /* Ring radius as a multiple of the minimum radius that would make the cards
     touch, and perspective as a multiple of that radius. Both are read back by
     the JS in measure(), so the 3D geometry stays declarative and responsive
     instead of hardcoded in script. */
  --cyl-radius-k: 1.2;
  --cyl-persp-k: 9;
  /* How far the rear cards fall away in scale/opacity. Also read by the JS.
     On desktop the ring is wide enough that crushing the flanks this hard
     left the composition reading narrower than it measures. */
  --cyl-far-scale: 0.6;
  --cyl-far-opacity: 0.16;
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  grid-area: scene;
  /* Height tracks the card's own footprint (not an arbitrary vh clamp) plus
     modest headroom for the perspective bulge on the near/active card —
     the JS keeps that bulge to ~12%, so a small buffer is enough. */
  height: calc(var(--cyl-card-w) * 1.25 * 1.3);
  perspective: var(--cyl-perspective, 1800px);
  perspective-origin: 50% 50%;
  opacity: 0;
  will-change: transform, opacity;
}

/* Desktop/tablet sizing. The card is bound by both axes:
     24vw  — width guard so the ring can't outgrow the stage;
     40vh  — the binding constraint on most laptops: keeps the magnified front
             card inside the scene row;
     460px — caps the ring at ~1430px so ultrawide doesn't run away.
   The scene fills the 1fr row rather than a computed height, so it adapts to
   whatever the header/description leave behind. */
@media (min-width: 1024px) {
  .cylinder-scene {
    --cyl-card-w: clamp(200px, min(24vw, 40vh), 460px);
    --cyl-radius-k: 1.6;
    --cyl-persp-k: 7.5;
    --cyl-far-scale: 0.78;
    --cyl-far-opacity: 0.3;
    width: 100%;
    height: 100%;
    min-height: 0;
    justify-self: stretch;
    align-self: stretch;
  }
}

.cylinder-track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.cyl-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--cyl-card-w);
  aspect-ratio: 4 / 5;
  margin: calc(var(--cyl-card-w) * -1.25 / 2) 0 0 calc(var(--cyl-card-w) / -2);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: opacity 0.25s linear;
}

.cyl-card-media {
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: #08080A;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  will-change: transform;
  transition: transform 0.25s linear, border-color 0.5s var(--expo), box-shadow 0.5s var(--expo);
}
.cyl-card-media img { width: 100%; height: 100%; object-fit: cover; }

.cyl-card.is-active .cyl-card-media {
  border-color: rgba(242, 241, 238, 0.4);
  box-shadow: 0 30px 80px rgba(242, 241, 238, 0.18);
}

/* Description sits in its own reserved slot below the 3D scene — not
   pinned under the rotating card itself — so it always has clear vertical
   room inside the sticky stage and never gets clipped by its overflow. */
.cylinder-desc-panel {
  position: relative;
  flex: 0 0 auto;
  grid-area: desc;
  width: min(420px, 88vw);
  height: clamp(96px, 14vh, 132px);
  text-align: center;
}
@media (min-width: 1024px) {
  .cylinder-desc-panel {
    width: 100%;
    max-width: 520px;
    height: clamp(96px, 13vh, 128px);
    text-align: left;
    align-self: end;
  }
  .cyl-card-desc h3, .cyl-card-desc h4 { font-size: clamp(1.15rem, 2.4vh, 1.6rem); }
  .cyl-card-desc p  { font-size: clamp(0.85rem, 1.7vh, 1rem); }
}
.cyl-card-desc {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  /* No transition-delay on exit — the outgoing card should clear fast.
     The incoming one (below) waits until it's mostly gone, so fast
     scroll-scrubbing swaps read as a quick dip rather than two
     overlapping paragraphs of text ghosting through each other. */
  transition: opacity 0.16s ease, transform 0.2s ease;
}
.cyl-card-desc.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.2s ease 0.13s, transform 0.24s ease 0.13s;
}
.cyl-index {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--cyan);
  margin-bottom: 0.4rem;
}
.cyl-card-desc h3, .cyl-card-desc h4 { font-size: clamp(1rem, 2vh, 1.3rem); font-weight: 700; color: #fff; margin-bottom: 0.35rem; }
.cyl-card-desc p { font-size: clamp(0.78rem, 1.5vh, 0.9rem); line-height: 1.5; color: #8C8C98; }

.cylinder-progress {
  width: min(420px, 70%);
  height: 2px;
  flex: 0 0 auto;
  grid-area: progress;
  background: var(--hair);
  border-radius: 2px;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .cylinder-progress {
    width: 100%;
    max-width: 420px;
    justify-self: end;
    align-self: end;
    margin-bottom: 0.6rem;
  }
}
.cylinder-progress i {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  will-change: transform;
}

@media (max-width: 720px) {
  .statement-pin-outer { height: 130vh; }
  .cylinder-outer { margin-top: -55vh; height: 340vh; }
  .cylinder-desc-panel { width: 88vw; }
}

/* No-JS / disabled-motion fallback: static stack, nothing pinned or hidden */
.cylinder-outer.is-static {
  height: auto;
  margin-top: 6rem;
}
.cylinder-outer.is-static .cylinder-stage {
  position: static;
  display: block;
  height: auto;
  padding: 4rem 0;
}
.cylinder-outer.is-static .cylinder-scene {
  height: auto;
  opacity: 1;
  perspective: none;
}
.cylinder-outer.is-static .cylinder-track {
  position: static;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  padding: 0 6vw;
}
.cylinder-outer.is-static .cyl-card {
  position: static;
  margin: 0;
  width: 100%;
  opacity: 1 !important;
  transform: none !important;
}
.cylinder-outer.is-static .cyl-card-media { transform: none !important; }
.cylinder-outer.is-static .cylinder-desc-panel {
  position: static;
  width: auto;
  max-width: 640px;
  height: auto;
  margin: 3rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.cylinder-outer.is-static .cyl-card-desc {
  position: static;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto;
}
.cylinder-outer.is-static .cylinder-progress { display: none; }
.statement-pin-outer.is-static { height: auto; }
.statement-pin-outer.is-static .statement-pin-inner { position: static; min-height: 0; opacity: 1 !important; }

/* ==========================================================================
   13. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-anim],
  .hero-title .line-i,
  [data-anim="words"] .word {
    opacity: 1 !important;
    transform: none !important;
  }
  .card-media { clip-path: none !important; }

  /* Ambient hero loops off — leave a composed static frame, not a
     mid-animation snapshot. */
  .giant-type {
    animation: none !important;
    background-position: 150% 0, 0 0 !important;
    transform: none !important;
  }
  #giant-wrap::before { display: none; }
  #giant-wrap {
    min-height: 0 !important;
    padding-block: 4rem !important;
    background: #000 !important;
  }
  .card-media img,
  .workshop-media img { transform: scale(1.05) !important; }
  .floating-tag { opacity: 0.72 !important; }
  #preloader { display: none; }
  #custom-cursor-dot, #custom-cursor-ring { display: none; }

  .statement-pin-outer { height: auto !important; }
  .statement-pin-inner { position: static !important; min-height: 0 !important; opacity: 1 !important; }
  .cylinder-outer { height: auto !important; margin-top: 6rem !important; }
  .cylinder-stage { position: static !important; display: block !important; height: auto !important; padding: 4rem 0 !important; }
  .cylinder-scene { height: auto !important; opacity: 1 !important; perspective: none !important; }
  .cylinder-track {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    padding: 0 6vw;
  }
  .cyl-card { position: static !important; margin: 0 !important; width: 100% !important; opacity: 1 !important; transform: none !important; }
  .cylinder-desc-panel {
    position: static !important;
    width: auto !important;
    max-width: 640px !important;
    height: auto !important;
    margin: 3rem auto 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.75rem !important;
  }
  .cyl-card-desc { position: static !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .cylinder-progress { display: none !important; }
  @media (pointer: fine) {
    body, a, button, .perspective-card, .floating-tag, .cursor-pointer, .svc { cursor: auto !important; }
  }
}

/* ==========================================================================
   14. PALMER LAYER — editorial restructure
   Type scale, section triplets, 2-col hairline split rows, project rows,
   marquees, bone inverse sections. English only. Zero hue.
   ========================================================================== */

/* --- Type: Inter Display Medium, tight tracking (Palmer workhorse) --- */
.font-headline-hero,
.font-display-xl {
  font-weight: 500 !important;
  letter-spacing: -0.03em;
  font-optical-sizing: auto;
}

/* --- Section rhythm + heads --- */
.sec { padding-block: clamp(80px, 12vh, 180px); position: relative; }

.sec-head { margin-bottom: clamp(2.5rem, 6vh, 5rem); }

/* Desktop's generous section rhythm reads as dead space on a short mobile
   viewport — tighten the vertical gaps so sections feel connected. */
@media (max-width: 700px) {
  .sec { padding-block: clamp(48px, 8vh, 72px); }
  .sec-head { margin-bottom: clamp(1.75rem, 5vh, 2.5rem); }
}

.sec-meta {
  display: flex;
  gap: clamp(1rem, 4vw, 3.5rem);
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute-2, #999);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--divider);
}
.sec-meta .sec-num { color: #FAF9F5; }
.sec-meta-dark { color: #666; border-bottom-color: rgba(0,0,0,0.14); }
.sec-meta-dark .sec-num { color: #000; }

.sec-title {
  font-size: clamp(3.5rem, 11vw, 11rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: #fff;
  margin-top: clamp(1.5rem, 4vh, 3rem);
}
.sec-title-dark { color: #000; }
.sec-count {
  font-size: 0.3em;
  vertical-align: super;
  margin-left: 0.35em;
  letter-spacing: 0;
  color: var(--text-mute-2, #999);
}
.sec-title-dark .sec-count { color: #666; }

/* --- HERO --- */
.hero-interactive-area { max-width: min(60vw, 900px); }
@media (max-width: 1023px) { .hero-interactive-area { max-width: 100%; } }

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #BBBBBB;
  border: 1px solid var(--hair);
  background: rgba(255,255,255,0.03);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.75rem;
}

.hero-title {
  font-size: clamp(2.6rem, 6.2vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.hero-sub {
  font-size: clamp(0.95rem, 1.15vw, 1.0625rem);
  line-height: 1.6;
  font-weight: 400;
  color: #BBBBBB;
  max-width: 44ch;
  margin-top: 2rem;
}

.hero-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.5rem; }

/* --- Pill buttons (Palmer: letter-spaced label + arrow) --- */
.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.45s var(--expo), color 0.45s var(--expo),
              border-color 0.45s var(--expo), transform 0.45s var(--expo);
}
.pill-btn-solid { background: #FAF9F5; color: #000; border: 1px solid #FAF9F5; }
.pill-btn-solid:hover { background: transparent; color: #FAF9F5; }
.pill-btn-ghost { background: transparent; color: #FAF9F5; border: 1px solid rgba(255,255,255,0.2); }
.pill-btn-ghost:hover { border-color: #FAF9F5; background: rgba(255,255,255,0.04); }
.pill-btn-dark { background: #000; color: #FAF9F5; border: 1px solid #000; align-self: flex-start; }
.pill-btn-dark:hover { background: transparent; color: #000; }
.pill-arrow { display: inline-block; transition: transform 0.45s var(--expo); }
.pill-btn:hover .pill-arrow { transform: translate(3px, -3px); }

/* --- Marquees --- */
.tag-marquee, .works-marquee {
  overflow: hidden;
  border-block: 1px solid var(--divider);
  padding-block: 1.1rem;
  margin-top: clamp(3rem, 8vh, 6rem);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .tag-marquee { margin-top: clamp(1.5rem, 5vh, 2.5rem); }
}
.tag-marquee-track, .works-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 1.75rem;
  animation: pl-marquee 34s linear infinite;
  will-change: transform;
}
.works-marquee { margin-top: 0; padding-block: clamp(1rem, 2.5vh, 1.75rem); }
.works-marquee-track { gap: 3rem; animation-duration: 44s; }
.works-marquee-track span {
  font-family: 'Inter Display', Inter, sans-serif;
  font-weight: 500;
  font-size: clamp(2.5rem, 7vw, 6rem);
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.28);
}
.tag-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #BBBBBB;
}
.tag-sep { color: #666; }
@keyframes pl-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- PROJECT ROWS (Palmer numbered index) --- */
/* project rows + hover preview removed — replaced by stacking cards */

/* --- 2-COLUMN HAIRLINE SPLIT ROWS --- */
.split-list { border-top: 1px solid var(--divider); }
.split-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  padding-block: clamp(1.6rem, 3.6vh, 2.75rem);
  border-bottom: 1px solid var(--divider);
  align-items: start;
}
.split-l { display: flex; align-items: baseline; gap: 1rem; }
.split-n { font-size: 11px; letter-spacing: 0.1em; color: #666; flex: 0 0 auto; }
.split-h {
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
}
.split-r { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.split-p { font-size: 15px; line-height: 1.65; color: #BBBBBB; }
.split-price {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FAF9F5;
  border: 1px solid var(--hair);
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
}
@media (max-width: 860px) {
  .split-row { grid-template-columns: 1fr; gap: 1rem; }
}

/* --- STATEMENT --- */
.statement {
  font-size: clamp(2rem, 4.5vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: #fff;
  max-width: 26ch;
}
/* Tighten the standalone practice-statement section so the block above
   (Selected Work) and the Services block below don't feel disconnected. */
.sec--statement { padding-block: clamp(48px, 8vh, 96px) !important; }
@media (max-width: 700px) {
  .sec--statement { padding-block: clamp(32px, 6vh, 56px) !important; }
}

/* --- WORKSHOP — bone inverse block --- */
.workshop-block {
  background: #FAF9F5;
  color: #000;
  border-radius: 24px;
  padding: clamp(2rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.workshop-copy { display: flex; flex-direction: column; gap: 1.5rem; }
.workshop-title {
  font-size: clamp(1.75rem, 3.2vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #000;
}
.workshop-p { font-size: 15px; line-height: 1.65; color: rgba(0,0,0,0.7); }
.workshop-media { border-radius: 16px; overflow: hidden; aspect-ratio: 16/10; }
.workshop-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .workshop-block { grid-template-columns: 1fr; } }

/* --- TESTIMONIALS — bone section --- */
.sec-bone {
  background: #FAF9F5;
  color: #000;
  padding-block: clamp(80px, 12vh, 180px);
  margin-top: clamp(4rem, 10vh, 8rem);
}
@media (max-width: 700px) {
  .sec-bone { padding-block: clamp(48px, 8vh, 72px); margin-top: clamp(2rem, 6vh, 3rem); }
}
.rev-note { margin-top: 2rem; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #666; }

/* --- ABOUT --- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.about-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--hair);
  background: #141413;
}
.about-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.7s var(--expo), transform 0.7s var(--expo);
}
.about-photo:hover img { filter: grayscale(0); transform: scale(1.04); }
.about-copy { display: flex; flex-direction: column; gap: 1.5rem; }
.about-name { font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -0.03em; color: #fff; }
.about-note { font-size: 13px; line-height: 1.65; color: #666; }
.about-tags { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.5rem; }
.meta-pill {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #999;
  border: 1px solid var(--hair);
  padding: 0.5rem 1rem;
  border-radius: 999px;
}
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } .about-photo { max-width: 260px; } }

@media (prefers-reduced-motion: reduce) {
  .tag-marquee-track, .works-marquee-track { animation: none !important; }
}

/* ==========================================================================
   15. STACKING SCROLL REVEAL — Work + Reviews
   Cards pin with position:sticky, then scale/fade as the next card covers
   them. Primary path is scroll-driven CSS (animation-timeline: view());
   Safari falls back to a scroll listener toggling .is-covered.
   ========================================================================== */

@keyframes card-shrink {
  to { transform: scale(0.7); opacity: 0.4; }
}

/* --- WORK: two-column staggered stack --- */
.stack-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
  align-items: start;
}
.stack-col { display: flex; flex-direction: column; gap: 40vh; }
.stack-col--offset { padding-top: 25vh; }

.stack-card {
  position: sticky;
  top: 40px;
  display: block;
  border-radius: 20px;
  background: #0A0A0A;
  border: 1px solid rgba(250,249,245,0.08);
  padding: 14px;
  margin: 0;
  text-decoration: none;
  will-change: transform, opacity;
  transform-origin: 50% 0%;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.9);
}

/* Framed image mount — the meta strip is anchored to the image, not the card,
   so the name/caption below can never collide with it. */
.stack-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
}
.stack-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Scrim so the meta stays legible over any image. */
.stack-media::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(0,0,0,0.72) 0%, transparent 100%);
}

.stack-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(12px);
  padding: 11px 16px;
}
.stack-tag {
  background: none;
  border: none;
  padding: 0;
}
.stack-idx { color: #BBBBBB; }

.stack-name {
  position: relative;
  z-index: 2;
  display: block;
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
  margin-top: 16px;
}

.stack-sub {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #777;
  margin-top: 7px;
}
.stack-arrow { display: inline-block; transition: transform 0.45s var(--expo); }
.stack-card--link:hover .stack-arrow { transform: translate(3px, -3px); }
.stack-card--link:hover img { transform: scale(1.03); transition: transform 700ms var(--expo); }

@media (max-width: 800px) {
  .stack-grid { grid-template-columns: 1fr; gap: 40vh; }
  .stack-col--offset { padding-top: 0; }
}

/* --- REVIEWS: single-column bone stack on black --- */
.review-wrap { max-width: 900px; margin: 0 auto; }
.review-stack { display: flex; flex-direction: column; gap: 30vh; }

.review-card {
  position: sticky;
  top: 80px;
  background: #FAF9F5;
  color: #111;
  border-radius: 24px;
  padding: 56px;
  will-change: transform, opacity;
  transform-origin: 50% 0%;
}
.review-quote {
  margin: 0 0 32px;
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #999;
}
.review-who { display: flex; flex-direction: column; gap: 4px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.review-who strong { font-weight: 500; color: #111; }
.review-who span { color: #666; }

@media (max-width: 800px) { .review-card { padding: 32px; } }

/* ==========================================================================
   16. BUTTON SYSTEM — one pill, three variants
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.45s var(--expo), color 0.45s var(--expo),
              border-color 0.45s var(--expo);
}
.btn .btn-arrow { display: inline-block; transition: transform 0.45s var(--expo); }
.btn:hover .btn-arrow { transform: translate(3px, -3px); }

.btn--solid  { background: #FAF9F5; color: #000; border: 1px solid #FAF9F5; }
.btn--solid:hover  { background: transparent; color: #FAF9F5; }

.btn--ghost  { background: transparent; color: #FAF9F5; border: 1px solid rgba(255,255,255,0.2); }
.btn--ghost:hover  { border-color: #FAF9F5; background: rgba(255,255,255,0.06); }

.btn--invert { background: #000; color: #FAF9F5; border: 1px solid #000; align-self: flex-start; }
.btn--invert:hover { background: transparent; color: #000; border-color: #000; }

@media (prefers-reduced-motion: reduce) {
  .stack-card, .review-card { animation: none !important; transform: none !important; opacity: 1 !important; }
}

/* Reviews sit near the end of the document. The gap is provided by the
   sticky card stack itself (gap: 30vh between cards), not extra padding. */
#reviews { padding-bottom: 8rem; }
@media (max-width: 800px) { #reviews { padding-bottom: 4rem; } }

/* ==========================================================================
   17. HERO VIDEO STAGE
   ========================================================================== */

#hero-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  background: #050505;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Video plate */
#hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

/* Bottom fade + side letterbox */
#hero-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(5,5,5,0) 78%,
    rgba(5,5,5,.75) 85%,
    #050505 100%
  );
}

@media (min-width: 1200px) {
  #hero-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(to right, rgba(5,5,5,.65) 0%, rgba(5,5,5,0) 12%),
      linear-gradient(to left,  rgba(5,5,5,.65) 0%, rgba(5,5,5,0) 12%);
  }
}

/* Stage chrome sits above video */
.hero-header {
  position: absolute;
  top: 32px;
  left: 0;
  right: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(1.5rem, 5vw, 4.5rem);
  gap: 1rem;
}

/* Brand mark SVG */
.hero-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}
.hero-brand svg { display: block; }

/* Centered nav */
.hero-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  justify-content: center;
}
.hero-nav a {
  font-family: 'Inter Display', Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: #BBB;
  text-decoration: none;
  transition: color .35s var(--expo);
}
.hero-nav a:hover { color: #FAF9F5; }

/* Header CTA */
.hero-header-cta {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
}

/* Copy block */
.hero-copy {
  position: absolute;
  left: clamp(1.5rem, 5vw, 72px);
  bottom: 30%;
  z-index: 10;
  max-width: min(640px, 88vw);
}

.hero-headline {
  display: block;
  font-family: 'Inter Display', Inter, system-ui, sans-serif;
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #FAFAFA;
  margin: 0;
}
.hero-headline span { display: block; }

.hero-subline {
  margin-top: 1.25rem;
  font-family: 'Inter Display', Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: #A7A6A6;
  line-height: 1.5;
}
.hero-subline span { display: inline; }
@media (min-width: 701px) { .hero-subline span { white-space: nowrap; } }

.hero-cta-stage {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.75rem;
}

/* Partner strip */
.hero-partners {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
}
.hero-partners-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(920px, 92vw);
  gap: 1.5rem;
}
.hero-partner-name {
  font-family: 'Inter Display', Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #8B8A8A;
  letter-spacing: .02em;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .hero-partners-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.1rem;
    width: 92vw;
  }
  .hero-partner-name { font-size: 12px; }
}

/* Burger */
.hero-burger {
  display: none;
  flex-direction: column;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 11;
}
.hero-burger span {
  display: block;
  width: 20px;
  height: 1px;
  background: #FAF9F5;
}

/* Mobile overlay */
#hero-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--expo);
}
#hero-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
#hero-overlay a {
  font-family: 'Inter Display', Inter, system-ui, sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: #FAF9F5;
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: color .35s var(--expo);
}
#hero-overlay a:hover { color: #999; }
#hero-overlay-close {
  position: absolute;
  top: 32px;
  right: clamp(1.5rem, 5vw, 4.5rem);
  background: none;
  border: none;
  cursor: pointer;
  color: #FAF9F5;
  font-size: 24px;
  line-height: 1;
  padding: 4px;
}
.overlay-cta { margin-top: 1rem; }

@media (max-width: 700px) {
  .hero-nav, .hero-header-cta { display: none !important; }
  .hero-burger { display: flex; }
  .hero-header {
    top: 20px;
    grid-template-columns: 1fr auto;
    padding: 0 1.25rem;
    align-items: center;
  }
  .hero-brand svg { width: 26px; height: 38px; }
  .hero-copy {
    bottom: auto;
    top: 42%;
    transform: translateY(-30%);
    left: 1.25rem;
    right: 1.25rem;
    max-width: none;
  }
  .hero-headline { font-size: clamp(40px, 11vw, 60px); }
  .hero-subline { font-size: 15px; margin-top: 1rem; }
  .hero-cta-stage { margin-top: 1.4rem; }
  .hero-partners { bottom: 24px; }
  /* Lift the video out of the dim range so it actually reads on a small screen. */
  #hero-video { opacity: 0.78; }
  /* Softer bottom fade so the video isn't cropped as aggressively behind the copy. */
  #hero-stage::after {
    background: linear-gradient(to bottom,
      rgba(5,5,5,0) 55%,
      rgba(5,5,5,.55) 78%,
      #050505 100%);
  }
}

/* Entrance animations */
.hero-anim {
  opacity: 0;
  transform: translateY(14px);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-anim {
    animation: hero-fade-up 900ms cubic-bezier(.22,1,.36,1) forwards;
  }
  .hero-anim[data-delay="80"]  { animation-delay: 80ms;  }
  .hero-anim[data-delay="140"] { animation-delay: 140ms; }
  .hero-anim[data-delay="200"] { animation-delay: 200ms; }
  .hero-anim[data-delay="280"] { animation-delay: 280ms; }
  .hero-anim[data-delay="360"] { animation-delay: 360ms; }
  .hero-anim[data-delay="500"] { animation-delay: 500ms; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-anim { opacity: 1 !important; transform: none !important; animation: none !important; }
}
@keyframes hero-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   18. PRICING CARDS
   ========================================================================== */

#pricing {
  padding-block: clamp(80px, 12vh, 160px);
  background: #000;
  position: relative;
}
@media (max-width: 700px) {
  #pricing { padding-block: clamp(48px, 8vh, 72px); }
}

.pricing-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4.5rem);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 1000px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 520px; }
}

/* Card frame */
.card {
  position: relative;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  padding: 36px;
  opacity: 0;
  transform: translateY(24px);
}
.card:nth-child(2) { transition-delay: 80ms; }

.card.in {
  animation: card-fade-up 600ms cubic-bezier(.22,1,.36,1) forwards;
}
.card.in:nth-child(2) {
  animation-delay: 80ms;
}

@keyframes card-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .card { opacity: 1 !important; transform: none !important; animation: none !important; }
}

.card--starter  { background: #121212; }
.card--growth   { background: #171717; }
.card--studio   { background: #1c1c1c; }

/* Spotlight follow border */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    360px circle at var(--x, -200px) var(--y, -200px),
    rgba(255,255,255,.55),
    transparent 60%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

/* Best value pill */
.best-value-pill {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #FAF9F5;
  color: #000;
  font-family: 'Inter Display', Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 2;
}

/* Card internals */
.card-eyebrow {
  font-family: 'Inter Display', Inter, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: #999;
  display: block;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}

.card-hairline {
  height: 1px;
  background: rgba(255,255,255,.10);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.card-price-row {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-bottom: .75rem;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.card-price {
  font-family: 'Inter Display', Inter, system-ui, sans-serif;
  font-size: 2.75rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #FAF9F5;
  line-height: 1;
}

.card-price-strike {
  font-family: 'Inter Display', Inter, system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: #666;
  text-decoration: line-through;
}

.card-desc {
  font-family: 'Inter Display', Inter, system-ui, sans-serif;
  font-size: 14px;
  color: #999;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.card-cta {
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.card-features {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.10);
  position: relative;
  z-index: 1;
}

.card-feature {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 14px 0;
  font-family: 'Inter Display', Inter, system-ui, sans-serif;
  font-size: 14px;
  color: #FAF9F5;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.card-feature:last-child { border-bottom: none; }

.feat-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-family: 'Inter Display', Inter, system-ui, sans-serif;
}
.feat-icon--check {
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color: #FAF9F5;
}
.feat-icon--cross {
  border: 1px solid transparent;
  color: #666;
}
.card-feature.is-excluded {
  color: #666;
}

/* ==========================================================================
   19. SERVICE GRID — pricing-card architecture
   ========================================================================== */

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1040px) and (min-width: 861px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
}

.sc-num {
  display: inline-block;
  color: #fff;
  font-weight: 500;
  margin-right: 6px;
  padding-right: 6px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.service-card {
  position: relative;
  background: #0A0A0A;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 360px;
  overflow: hidden;
  transition: border-color 0.5s var(--expo), transform 0.5s var(--expo);
}
.service-card:hover {
  border-color: rgba(255,255,255,0.22);
  transform: translateY(-4px);
}

.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    360px circle at var(--x, -200px) var(--y, -200px),
    rgba(250,249,245,0.06),
    transparent 60%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

.sc-tag {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.sc-title {
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.sc-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #999;
  margin-bottom: auto;
  position: relative;
  z-index: 1;
}
.sc-hairline {
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 24px 0 20px;
  position: relative;
  z-index: 1;
}
.sc-price {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #FAF9F5;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.service-card .btn {
  align-self: flex-start;
  position: relative;
  z-index: 1;
}

@media (max-width: 860px) {
  .service-grid {
    display: flex;
    flex-direction: column;
    gap: 28vh;
    padding-bottom: 8rem;
  }
  .service-grid .service-card {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 76px;
    background: #0E0E0E !important;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 -16px 36px rgba(0, 0, 0, 0.9), 0 24px 60px rgba(0, 0, 0, 0.95);
    border-radius: 20px;
    min-height: auto;
    will-change: transform, opacity;
    transform-origin: 50% 0%;
    transition: border-color 0.4s var(--expo) !important;
  }
  .service-grid .service-card:nth-child(1) { z-index: 1; }
  .service-grid .service-card:nth-child(2) { z-index: 2; }
  .service-grid .service-card:nth-child(3) { z-index: 3; }
  .service-grid .service-card:nth-child(4) { z-index: 4; }
  .service-grid .service-card:nth-child(5) { z-index: 5; }
  .service-grid .service-card:nth-child(6) { z-index: 6; }
}

/* ==========================================================================
   20. REVIEWS — Google-testimonials triplet layout
   ========================================================================== */

.review-wrap { max-width: 1200px; margin: 0 auto; }
.review-stack { display: flex; flex-direction: column; gap: 30vh; }

.review-triplet {
  position: sticky;
  top: 80px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 20px;
  align-items: start;
  will-change: transform, opacity;
  transform-origin: 50% 0%;
}

.review-card {
  position: relative;
  background: #0F0F0F;
  color: #FAF9F5;
  border-radius: 20px;
  border: 1px solid rgba(250,249,245,0.06);
  will-change: transform, opacity;
  transform-origin: 50% 0%;
}

.review-card--side {
  padding: 32px;
  opacity: 0.6;
}
.review-card--lead {
  padding: 48px;
}

.review-glyph {
  position: absolute;
  top: 20px;
  left: 28px;
  font-size: 120px;
  line-height: 1;
  color: rgba(250,249,245,0.04);
  pointer-events: none;
  font-family: 'Inter Display', Inter, serif;
  font-weight: 500;
}

.review-quote {
  margin: 0 0 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}
.review-card--side .review-quote {
  font-size: clamp(15px, 1.4vw, 18px);
  color: #BBB;
}
.review-card--lead .review-quote {
  font-size: clamp(18px, 2vw, 26px);
  color: #FAF9F5;
}

.review-who {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.review-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter Display', Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #FAF9F5;
  flex: 0 0 auto;
}
.review-attr { display: flex; flex-direction: column; gap: 2px; }
.review-attr strong { font-weight: 500; color: #FAF9F5; }
.review-attr span { color: #666; }

.review-draft {
  display: block;
  margin-top: 16px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #555;
  position: relative;
  z-index: 1;
}

@media (max-width: 800px) {
  .review-triplet {
    grid-template-columns: 1fr;
    position: sticky;
    top: 80px;
  }
  .review-card--side { opacity: 1; }
  .review-card--lead { padding: 32px; }
}

/* ==========================================================================
   21. SELECTED WORK STRIP
   ========================================================================== */

/* Marquee sits right above; keep the section's own top padding tight so the
   band and the heading aren't separated by a triple-stacked gap. */
#archive { padding-top: clamp(1.5rem, 4vh, 3rem); }
.selected-work {
  position: relative;
  margin-top: 0;
  border-top: 1px solid var(--divider);
  padding-top: clamp(1.5rem, 3.5vh, 2.5rem);
}
.selected-work-head { margin-bottom: clamp(2rem, 6vh, 4rem); }
/* ---- Work section header ---- */
.ps-head { margin-bottom: clamp(1.75rem, 5vh, 3rem); }
.ps-title {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-top: 0.6rem;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}
.ps-title-count { font-size: 0.85rem; color: #6E6E6E; letter-spacing: 0.12em; }
.ps-lead { margin-top: 0.9rem; max-width: 52ch; font-size: clamp(0.95rem, 1.3vw, 1.15rem); line-height: 1.5; color: #A9A8A4; }

/* ============================================================
   PROJECT SLIDER — continuously-drifting strip of project cards
   Many cards visible at once, partials peeking off both edges,
   the whole row drifting left→right. Hover pauses; click zooms.
   ============================================================ */
.project-slider { position: relative; }
.ps-vertical {
  position: absolute;
  top: 0;
  left: clamp(-2.6rem, -2vw, -1.4rem);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 12px;
  color: #6E6E6E;
}

/* Viewport — full-bleed within the section; edges fade so cards peek in/out */
.ps-marquee {
  overflow: hidden;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.ps-track {
  display: flex;
  align-items: center;               /* cards grow from a shared centre line */
  gap: clamp(1rem, 1.6vw, 1.5rem);
  width: max-content;
  /* room for the centre card to scale up without being clipped */
  padding-block: clamp(2rem, 5vh, 3.5rem);
  will-change: transform;
  animation: ps-drift 60s linear infinite;
}
/* -50% → 0 makes the row move left→right; the track is duplicated so the
   wrap from 0 back to -50% is seamless. JS also toggles play-state on hover. */
@keyframes ps-drift {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.ps-track.is-paused { animation-play-state: paused; }

/* Manual switch buttons — sit at the content edges, centred on the strip */
.ps-arrow {
  position: absolute;
  top: calc(clamp(2rem, 5vh, 3.5rem) + clamp(80px, 9vw, 120px));
  transform: translateY(-50%);
  z-index: 20;
  width: clamp(44px, 4vw, 56px);
  height: clamp(44px, 4vw, 56px);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 26px; line-height: 1;
  cursor: pointer;
  color: var(--fg, #FAF9F5);
  background: rgba(10,10,10,0.72);
  border: 1px solid rgba(250,249,245,0.28);
  backdrop-filter: blur(8px);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.ps-arrow:hover { background: rgba(20,20,20,0.9); border-color: rgba(250,249,245,0.65); transform: translateY(-50%) scale(1.06); }
.ps-arrow:focus-visible { outline: 2px solid rgba(250,249,245,0.6); outline-offset: 3px; }
.ps-arrow--prev { left: clamp(0.25rem, 1vw, 1rem); }
.ps-arrow--next { right: clamp(0.25rem, 1vw, 1rem); }

/* Card — JS sets per-frame scale/opacity by distance from centre, so no CSS
   transform transition here (it would fight the frame updates). */
.ps-card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(220px, 24vw, 320px);
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(250,249,245,0.1);
  background: #050505;
  cursor: pointer;
  color: inherit;
  text-align: left;
  transform-origin: center center;
  will-change: transform, opacity;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.ps-card:focus-visible { outline: none; }
.ps-card.is-center {
  border-color: rgba(250,249,245,0.45);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.9);
  cursor: pointer;
}
.ps-card img, .ps-card video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ps-card-badge {
  position: absolute;
  top: 0.7rem; right: 0.7rem;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px;
  color: #0A0A0A;
  background: rgba(250,249,245,0.92);
  backdrop-filter: blur(4px);
}

/* Spotlight — description of the card currently centred, updates live */
.ps-spotlight {
  margin: clamp(0.5rem, 2vh, 1.5rem) auto 0;
  max-width: 46ch;
  min-height: 132px;
  text-align: center;
}
.ps-spotlight .ps-cat { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #8B8A8A; }
.ps-spotlight .ps-name {
  margin-top: 0.5rem;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--fg, #FAF9F5);
  transition: opacity 0.35s ease;
}
.ps-spotlight .ps-name a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(250,249,245,0.35); padding-bottom: 1px; }
.ps-spotlight .ps-name a:hover { border-color: var(--fg, #FAF9F5); }
.ps-spotlight .ps-desc {
  margin: 0.9rem auto 0;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.45;
  color: #C7C6C2;
  transition: opacity 0.35s ease;
}
.ps-spotlight.is-switching .ps-name,
.ps-spotlight.is-switching .ps-desc { opacity: 0; }
.ps-hint {
  display: block;
  margin-top: 1.4rem;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8A8A8A;
}

/* ---- Lightbox / zoom ---- */
.ps-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(5,5,5,0.9);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ps-lightbox.is-open { opacity: 1; }
.ps-lightbox[hidden] { display: none !important; }
.ps-lb-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: center;
  width: min(1040px, 100%);
  max-height: 86vh;
  transform: scale(0.96);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.ps-lightbox.is-open .ps-lb-inner { transform: scale(1); }
.ps-lb-media {
  border-radius: 16px;
  overflow: hidden;
  background: #050505;
  border: 1px solid rgba(250,249,245,0.1);
  aspect-ratio: 16 / 10;
}
.ps-lb-media img, .ps-lb-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-lb-text { position: relative; }
.ps-lb-text .ps-cat { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #8B8A8A; }
.ps-lb-text .ps-name {
  margin-top: 0.6rem;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--fg, #FAF9F5);
}
.ps-lb-text .ps-name a { color: inherit; text-decoration: none; }
.ps-lb-text .ps-name a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ps-lb-text .ps-desc { margin-top: 1.1rem; font-size: clamp(1.05rem, 1.6vw, 1.4rem); line-height: 1.4; color: #C7C6C2; }
.ps-lb-nav {
  margin-top: 2rem;
  width: 50px; height: 50px;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 18px;
  cursor: pointer;
  background: transparent;
  color: var(--fg, #FAF9F5);
  border: 1px solid rgba(250,249,245,0.28);
  transition: border-color 0.25s ease, transform 0.2s ease;
}
.ps-lb-nav + .ps-lb-nav { margin-left: 0.6rem; }
.ps-lb-nav:hover { border-color: rgba(250,249,245,0.6); transform: translateY(-2px); }
.ps-lb-close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 26px; line-height: 1;
  cursor: pointer;
  color: var(--fg, #FAF9F5);
  background: rgba(250,249,245,0.06);
  border: 1px solid rgba(250,249,245,0.2);
  transition: background 0.25s ease, transform 0.2s ease;
}
.ps-lb-close:hover { background: rgba(250,249,245,0.14); transform: rotate(90deg); }

@media (max-width: 720px) {
  .ps-vertical { display: none; }
  .ps-card { width: clamp(200px, 72vw, 280px); }
  .ps-lb-inner { grid-template-columns: 1fr; gap: 1.25rem; max-height: 90vh; overflow-y: auto; }
  .ps-lb-media { aspect-ratio: 16 / 11; }
  .ps-lb-nav { margin-top: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-track { animation: none; }
}

/* ============================================================
   WORK WITH US — join the studio (talent invitation)
   ============================================================ */
.join { margin-top: clamp(4rem, 10vh, 8rem); }
@media (max-width: 700px) {
  .join { margin-top: clamp(2rem, 6vh, 3rem); }
}
.join-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}
.join-title {
  font-size: clamp(2.75rem, 7vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.98;
  color: var(--fg, #FAF9F5);
}
.join-sub {
  margin-top: 1.5rem;
  max-width: 42ch;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: #C7C6C2;
}
.join-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.join-client { margin-top: 1.5rem; font-size: 12px; letter-spacing: 0.06em; color: #6E6E6E; }
.join-client a { color: #BBBBBB; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom: 1px; }
.join-client a:hover { color: #fff; border-color: #fff; }

.join-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--divider);
}
.join-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1.25rem;
  padding: clamp(1.1rem, 2.5vh, 1.6rem) 0;
  border-bottom: 1px solid var(--divider);
}
.join-step-n { grid-row: 1 / span 2; font-size: 12px; letter-spacing: 0.16em; color: #6E6E6E; padding-top: 0.35rem; }
.join-step-t { font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 600; letter-spacing: -0.01em; color: var(--fg, #FAF9F5); }
.join-step-d { font-size: 0.98rem; line-height: 1.5; color: #9C9B97; }

@media (max-width: 800px) {
  .join-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* Sticky scroll stack — each card pins, the next slides up and covers it,
   mirroring the reviews mechanic. */
.sw-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 13vh;
  max-width: 1100px;
  margin: 0 auto;
}
.sw-card {
  position: sticky;
  top: 96px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  background: #0F0F0F;
  border: 1px solid rgba(250,249,245,0.07);
  border-radius: 22px;
  padding: clamp(1.6rem, 3vw, 2.75rem);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,0.95);
  will-change: transform, opacity;
  transform-origin: 50% 0%;
  min-height: clamp(300px, 44vh, 440px);
}
.sw-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}
.sw-num { font-size: 11px; letter-spacing: 0.2em; color: #666; }
.sw-name {
  font-size: clamp(1.45rem, 2.8vw, 2.3rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: #fff;
  text-decoration: none;
  margin: 0;
}
a.sw-name { transition: color 0.4s var(--expo); }
a.sw-name:hover { color: #BBB; }
a.sw-name:hover .stack-arrow { transform: translate(3px, -3px); }
.sw-desc {
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.55;
  color: #999;
  margin: 0;
  max-width: 44ch;
}
.sw-tag {
  margin-top: 0.35rem;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #888;
  border: 1px solid rgba(250,249,245,0.14);
  border-radius: 999px;
  padding: 6px 13px;
}
.sw-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: #060606;
}
.sw-card-media img,
.sw-card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sw-nopreview {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #555;
  padding: 1rem;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 10px, transparent 10px 20px),
    #0A0A0A;
}

.sw-footer {
  max-width: 1100px;
  margin: clamp(3rem, 8vh, 5rem) auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--divider);
}
@media (max-width: 700px) {
  .sw-footer { margin-top: clamp(1.5rem, 5vh, 2.5rem); padding-top: 1.5rem; }
}
.sw-scale {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999;
}
.sw-github {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FAF9F5;
  text-decoration: none;
  transition: color 0.4s var(--expo);
}
.sw-github:hover { color: #BBB; }

@media (max-width: 800px) {
  .sw-stack { gap: 9vh; }
  .sw-card {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    min-height: 0;
    top: 80px;
  }
  .sw-card-media { order: -1; aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   22. PROOF VIDEOS
   ========================================================================== */

.proof-videos {
  margin-top: clamp(3rem, 8vh, 6rem);
}
.proof-videos-head { margin-bottom: 1.5rem; }

.proof-videos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 640px) { .proof-videos-grid { grid-template-columns: 1fr; } }

.proof-tile {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow: hidden;
  background: #0A0A0A;
  border: 1px solid var(--hair);
}
/* Placeholder shown until a real recording drops in — the <video> paints over
   this once it has a source. */
.proof-tile::before {
  content: 'Screen recording · soon';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4d4d4d;
  padding: 1rem;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 12px, transparent 12px 24px),
    #0A0A0A;
}
.proof-tile video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.proof-caption {
  position: absolute;
  bottom: 12px;
  left: 14px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #BBB;
  z-index: 2;
}

/* ==========================================================================
   23. MARQUEE — eyebrow + meta row
   ========================================================================== */

.marquee-eyebrow {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #777;
  padding: 0 clamp(1.5rem,5vw,4rem);
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

/* Oversized outline watermark filling the dead space around the wordmark
   while the section is pinned. Purely decorative (aria-hidden) — its drift
   and breathing scale are driven from the same scroll-progress value that
   already sweeps the SHAURYA™ wordmark (see script.js GIANT TYPE block), so
   the empty vertical margin reads as a deliberate parallax layer instead of
   dead air during the pin's scroll runway. */
.statement-ghost {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter Display', Inter, sans-serif;
  font-weight: 600;
  font-size: clamp(5rem, 20vw, 18rem);
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
}

/* Three-track row: info column left, wordmark centred, matching gutter right so
   the name stays optically centred on the page and the left space is filled. */
.marquee-body {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(187,187,187,0.18);
  border-bottom: 1px solid rgba(187,187,187,0.18);
  background: #000;
}

.marquee-aside {
  grid-column: 1;
  justify-self: start;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vh, 2rem);
  max-width: 260px;
}
.maside-block { display: flex; flex-direction: column; gap: 0.6rem; }
.maside-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FAF9F5;
}
.maside-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.maside-list li {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #999;
  padding-left: 14px;
  position: relative;
}
.maside-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: #555;
}
.maside-text {
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: #888;
  margin: 0;
}

#giant-wrap {
  grid-column: 2;
  min-height: 0;
  align-items: center;
  padding-block: clamp(0.5rem, 1.5vh, 1.25rem);
  overflow: visible !important;
}

.giant-type {
  font-size: clamp(38px, 10vw, 132px) !important;
  white-space: nowrap;
  margin: 0 !important;
}

.marquee-meta-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding: 1.25rem clamp(1.5rem,5vw,4rem);
  margin-top: clamp(1rem, 3vh, 1.75rem);
}
.marquee-meta-col {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #777;
}
.marquee-meta-num { color: #999; margin-right: 0.4em; }

.statement-pin-outer { height: 130vh; }

/* Tablet / mobile: drop to a single centred column, aside sits under the name. */
@media (max-width: 900px) {
  .marquee-body {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vh, 2.5rem);
    padding-block: clamp(1.5rem, 4vh, 2.5rem);
  }
  #giant-wrap { grid-column: 1; grid-row: 1; min-height: 0; }
  .marquee-aside {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    max-width: 380px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 640px) {
  .marquee-meta-row { flex-direction: column; align-items: center; gap: 0.5rem; }
  .marquee-aside { grid-template-columns: 1fr; }
}


/* ==========================================================================
   CASE-STUDY LINK AFFORDANCES (showcase tiles → /work/<slug>/)
   Additive only. No token or existing-class changes.
   ========================================================================== */

/* Cylinder: Rudra tile reads as a link and reveals a caption when it's the
   active (front-facing) card or on hover/focus. */
.cyl-card--study { cursor: pointer; }
.cyl-card--study:focus-visible { outline: none; }
.cyl-card--study:focus-visible .cyl-card-media {
  border-color: rgba(242, 241, 238, 0.55);
  box-shadow: 0 30px 80px rgba(242, 241, 238, 0.22);
}
.cyl-card-study {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.9rem 1rem;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FAF9F5;
  background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--expo), transform 0.4s var(--expo);
  pointer-events: none;
}
.cyl-card--study.is-active .cyl-card-study,
.cyl-card--study:hover .cyl-card-study,
.cyl-card--study:focus-visible .cyl-card-study {
  opacity: 1;
  transform: translateY(0);
}

/* Archive slider: study cards get the same pointer + a subtle affordance. */
.ps-card--study { cursor: pointer; }

/* ==========================================================================
   NEW — service shipped tag, live demo, feature case study, review groups
   ========================================================================== */

.sc-shipped {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  margin-top: 0.5rem;
}

/* Live demo */
.demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 2.5rem;
}
@media (max-width: 780px) { .demo-grid { grid-template-columns: 1fr; } }
.demo-card {
  display: block;
  position: relative;
  padding: 32px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  background: #101010;
  text-decoration: none;
  color: #fff;
  transition: border-color 0.4s var(--expo), transform 0.4s var(--expo), background 0.4s var(--expo);
}
.demo-card:hover {
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-2px);
  background: #141414;
}
.demo-kind {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 1.25rem;
}
.demo-title {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  color: #fff;
}
.demo-desc {
  color: #BBBBBB;
  margin: 0 0 1.5rem;
  max-width: 44ch;
}
.demo-cta {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FAF9F5;
}

/* Featured case study block */
.feature-study {
  display: block;
  margin: 2rem 0 3rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  background: linear-gradient(180deg, #131313, #0b0b0b);
  color: #fff;
  text-decoration: none;
  transition: border-color 0.4s var(--expo), transform 0.4s var(--expo);
}
.feature-study:hover {
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-2px);
}
.feature-study-meta {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 1rem;
}
.feature-study-title {
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.9rem;
  color: #fff;
}
.feature-study-desc {
  color: #BBBBBB;
  margin: 0 0 1.25rem;
  max-width: 78ch;
}
.feature-study-cta {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FAF9F5;
}
/* Featured Case Studies Showcase Grid */
.feature-studies-wrap {
  margin: 2.5rem 0 3.5rem;
}
.feature-studies-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.feature-studies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 960px) and (min-width: 861px) {
  .feature-studies-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .feature-studies-grid {
    display: flex;
    flex-direction: column;
    gap: 26vh;
    padding-bottom: 6rem;
  }
  .feature-studies-grid .feature-study-card {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 76px;
    background: #0E0E0E !important;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 -16px 36px rgba(0, 0, 0, 0.9), 0 24px 60px rgba(0, 0, 0, 0.95);
    border-radius: 20px;
    min-height: 280px;
    will-change: transform, opacity;
    transform-origin: 50% 0%;
    transition: border-color 0.4s var(--expo) !important;
  }
  .feature-studies-grid .feature-study-card:nth-child(1) { z-index: 1; }
  .feature-studies-grid .feature-study-card:nth-child(2) { z-index: 2; }
  .feature-studies-grid .feature-study-card:nth-child(3) { z-index: 3; }
}
.feature-study-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  background: linear-gradient(180deg, #131313, #0a0a0a);
  color: #fff;
  text-decoration: none;
  min-height: 280px;
  transition: border-color 0.4s var(--expo), transform 0.4s var(--expo), background 0.4s var(--expo);
}
.feature-study-card:hover {
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-3px);
  background: linear-gradient(180deg, #171717, #0e0e0e);
}
.feature-study-card .feature-study-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 0.85rem;
}
.feature-study-card .feature-study-title {
  font-size: clamp(1.25rem, 1.6vw, 1.55rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  color: #fff;
}
.feature-study-card .feature-study-desc {
  font-size: 13px;
  line-height: 1.6;
  color: #AAAAAA;
  margin: 0 0 1.5rem;
  flex-grow: 1;
}
.feature-study-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.feature-study-footer .feature-study-cta {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FAF9F5;
  transition: transform 0.3s var(--expo);
}
.feature-study-card:hover .feature-study-cta {
  transform: translateX(4px);
}
.feature-study-badge {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #777;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
}

/* Studio Team presentation (replaces solo headshot & vacant column) */
.studio-team-wrap {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.8fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
  margin-top: 2rem;
}
@media (max-width: 860px) {
  .studio-team-wrap { grid-template-columns: 1fr; }
}
.studio-team-headline h3 {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
}
.studio-team-body p {
  margin-bottom: 1rem;
}

/* Custom card accent in services */
.service-card--custom {
  background: linear-gradient(180deg, #161616, #0d0d0d);
  border-color: rgba(250,249,245,0.18);
}
.service-card--custom:hover {
  border-color: rgba(250,249,245,0.4);
}
.service-card--custom .sc-tag {
  color: #FAF9F5;
  border-color: rgba(255,255,255,0.25);
}

/* Category pill for review cards */
.review-tag {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 0.85rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
}