/* ==============================================================
   EDITION8 — SERVICES PAGE  ·  v2 (static skeleton, faz 1)
   "From Signal to System"
   --------------------------------------------------------------
   Token system extends styles.css. Page-specific tokens prefixed
   with --srv2-. Animation hooks are present (data attrs, classes)
   but no GSAP/Lenis is wired in this phase.
   ============================================================== */

/* ---- 1. Page-scoped tokens ----------------------------------- */
/* Default (used when [data-theme] is dark, or before theme.js runs):
   inverted mono — pure black paper / off-white ink. No chroma. */
body[data-page="services-v2"] {
  --srv2-paper:       #0A0A0A;
  --srv2-paper-elev:  #161616;
  --srv2-ink:         #FAFAFA;
  --srv2-ink-muted:   rgba(250,250,250,0.58);
  --srv2-ink-faint:   rgba(250,250,250,0.26);
  --srv2-ink-fainter: rgba(250,250,250,0.10);

  /* accent — strict monochrome: black ink on light, off-white on dark.
     Token name kept for stability across selectors. NO chroma anywhere. */
  --srv2-rule-red:    #FAFAFA;
  --srv2-rule-red-soft: rgba(250,250,250,0.20);

  --srv2-hairline:    1px solid rgba(250,250,250,0.14);

  --srv2-ease-cine:   var(--ease-expo);   /* == cubic-bezier(0.16,1,0.3,1) */
  --srv2-ease-decel:  cubic-bezier(0, 0, 0.2, 1); /* Material decelerate — unique, kept */
  --srv2-ease-mag:    var(--ease-spring); /* == cubic-bezier(0.34,1.56,0.64,1) */

  --srv2-titan:       clamp(4.5rem, 12vw, 11rem);
  --srv2-hero:        clamp(3rem, 8vw, 7rem);
  --srv2-h2:          clamp(2rem, 4.4vw, 3.75rem);
  --srv2-h3:          clamp(1.25rem, 1.8vw, 1.5rem);
  --srv2-body:        1.0625rem;
  --srv2-mono:        0.8125rem;

  --srv2-gutter:      max(1.5rem, 4vw);
  --srv2-maxw:        1640px;

  background: var(--srv2-paper);
  color: var(--srv2-ink);
}

html[data-theme="light"] body[data-page="services-v2"] {
  --srv2-paper:       #FFFFFF;
  --srv2-paper-elev:  #F5F5F4;
  --srv2-ink:         #0A0A0A;
  --srv2-ink-muted:   rgba(10,10,10,0.55);
  --srv2-ink-faint:   rgba(10,10,10,0.22);
  --srv2-ink-fainter: rgba(10,10,10,0.08);
  --srv2-rule-red:    #0A0A0A;
  --srv2-rule-red-soft: rgba(10,10,10,0.20);
  --srv2-hairline:    1px solid rgba(10,10,10,0.13);
}


/* ---- 2. Page chrome adjustments ------------------------------ */
body[data-page="services-v2"] {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: var(--srv2-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body[data-page="services-v2"] main { display: block; }

.srv2-skip {
  position: absolute;
  left: -9999px;
  top: 1rem;
  z-index: 200;
  padding: .5rem .9rem;
  background: var(--srv2-ink);
  color: var(--srv2-paper);
  font-family: 'Geist Mono', monospace;
  font-size: var(--srv2-mono);
  text-decoration: none;
  border-radius: 0;
}
.srv2-skip:focus { left: 1rem; }


/* ---- 3. Reusable atoms --------------------------------------- */
.srv2-kicker {
  display: inline-block;
  font-family: 'Geist Mono', monospace;
  font-size: var(--srv2-mono);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--srv2-ink-muted);
  text-transform: lowercase;
}

.srv2-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.4em;
  font-family: 'Geist', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  border-radius: 0;
  transition: transform 200ms var(--srv2-ease-cine),
              background-color 200ms var(--srv2-ease-cine),
              color 200ms var(--srv2-ease-cine),
              border-color 200ms var(--srv2-ease-cine);
  cursor: pointer;
}
.srv2-btn--filled {
  background: var(--srv2-ink);
  color: var(--srv2-paper);
  border: 1px solid var(--srv2-ink);
}
.srv2-btn--filled:hover {
  background: var(--srv2-rule-red);
  border-color: var(--srv2-rule-red);
  color: var(--srv2-ink);
  transform: translateY(-1px);
}
.srv2-btn--ghost {
  background: transparent;
  color: var(--srv2-ink);
  border: 1px solid var(--srv2-ink-faint);
}
.srv2-btn--ghost:hover {
  border-color: var(--srv2-ink);
  transform: translateY(-1px);
}
.srv2-btn--lg {
  padding: 1.2em 1.8em;
  font-size: 1.0625rem;
}


/* ==============================================================
   CLOSING — LET'S WORK TOGETHER (contact)
   ============================================================== */
.srv2-contact {
  position: relative;
  min-height: 80vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(6rem, 16vh, 12rem) var(--srv2-gutter);
  border-top: var(--srv2-hairline);
}
.srv2-contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.1rem, 2.6vh, 1.8rem);
  max-width: 62rem;
}
.srv2-contact__title {
  margin: 0;
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: var(--srv2-hero);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--srv2-ink);
  text-wrap: balance;
}
.srv2-contact__title em {
  font-style: normal;
  color: var(--srv2-ink-muted);
}
.srv2-contact__dek {
  margin: 0;
  max-width: 34rem;
  font-size: var(--srv2-body);
  color: var(--srv2-ink-muted);
}
.srv2-contact__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 0.4rem;
}
.srv2-contact__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-top: clamp(1.5rem, 4vh, 3rem);
  font-family: 'Geist Mono', monospace;
  font-size: var(--srv2-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--srv2-ink-faint);
}


/* ==============================================================
   CHAPTER 00 — HERO
   ============================================================== */
.srv2-hero {
  position: relative;
  min-height: 100dvh;
  padding: clamp(7rem, 14vh, 10rem) var(--srv2-gutter) clamp(2rem, 6vh, 4rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  isolation: isolate;
  overflow: hidden;
}

.srv2-hero__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Geist Mono', monospace;
  font-size: var(--srv2-mono);
  color: var(--srv2-ink-muted);
}
.srv2-hero__no { letter-spacing: 0.06em; }
.srv2-hero__loc { letter-spacing: 0.04em; }

.srv2-hero__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  color: var(--srv2-ink);
}

/* (radial scrim removed — fragments now hug the edges, so the
   centered headline no longer needs an overlay to stay readable) */

.srv2-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(85vmin, 900px);
  aspect-ratio: 1 / 1;
  translate: -50% -50%;
  scale: 0.6;
  opacity: 0;
  animation: srv2-orbit-spin 60s linear infinite;
  transition: opacity 1100ms var(--srv2-ease-cine), scale 1100ms var(--srv2-ease-cine);
}
.srv2-hero.is-entered .srv2-orbit {
  opacity: 0.85;
  scale: 1;
}
@keyframes srv2-orbit-spin {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}

.srv2-fragment {
  position: absolute;
  margin: 0;
  background: var(--srv2-paper-elev);
  border: var(--srv2-hairline);
  overflow: hidden;

  /* drag offset (written by services.js on pointer move) */
  --drag-x: 0px;
  --drag-y: 0px;
  /* gather offset — driven by hero-exit scroll timeline (toward viewport center) */
  --gather-x: 0px;
  --gather-y: 0px;
  /* per-fragment rotation (set in --01..--08) */
  --rot: 0deg;
  /* entry state (animated to final on .is-entered) */
  --enter-scale: 0.85;
  /* exit zoom — driven by ScrollTrigger when scrolling out of hero */
  --exit-scale: 1;

  /* unified transform: drag + gather → rotation → enter × exit scale */
  transform: translate(calc(var(--drag-x) + var(--gather-x)),
                       calc(var(--drag-y) + var(--gather-y)))
             rotate(var(--rot))
             scale(calc(var(--enter-scale) * var(--exit-scale)));
  opacity: 0;
  /* No CSS filter on photos / videos (memory rule). Client work renders true. */

  /* GSAP owns all fragment motion (entry, exit, drag) — no CSS
     transitions here, otherwise the scroll-driven scrub fights a
     1.1s transition catch-up. */

  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  animation: srv2-frag-float 9s ease-in-out infinite;
}
.srv2-fragment > img,
.srv2-fragment > video { -webkit-user-drag: none; user-drag: none; pointer-events: none; }

/* entered state — final pose */
.srv2-hero.is-entered .srv2-fragment {
  --enter-scale: 1;
  opacity: 1;
}

/* dragging — instant tracking, paused float, raised */
.srv2-fragment.is-dragging {
  transition: none;
  animation-play-state: paused;
  cursor: grabbing;
  z-index: 10;
}

/* once entry transitions have settled, kill them so the scroll-driven
   parallax exit can scrub freely without 1.1s catch-up lag */
.srv2-hero.is-static .srv2-fragment {
  transition: none;
}
.srv2-hero.is-static .srv2-orbit,
.srv2-hero.is-static .srv2-hero__copy,
.srv2-hero.is-static .srv2-hero__hint {
  transition: none;
}
/* assets render at their native aspect-ratio inside the slot.
   Slot has only a width; height follows the asset. No object-fit. */
.srv2-fragment > img,
.srv2-fragment > video {
  display: block;
  width: 100%;
  height: auto;
}
/* label: small monospace chip pinned bottom-left over a soft scrim */
.srv2-fragment__label {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  font-family: 'Geist Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.55rem;
  background: var(--srv2-ink);
  color: var(--srv2-paper);
  /* no backdrop-filter — would blur the photo behind (memory rule).
     Solid mono chip, like editorial captions in the brand book — flips
     with the theme via the ink/paper tokens (black-on-light / white-on-dark),
     full contrast over any photo, zero chroma. */
  border: var(--srv2-hairline);
  text-transform: lowercase;
  pointer-events: none;
}

/* Six anchor positions kept from the previous (asymmetric) layout;
   only the two pieces that sat behind the centered headline (--07,
   --08) move out to the side edges.
   Top anchors use max(%, 124px) so they always clear the two stacked
   fixed chrome bars (header ~60px + nav-rail ~44px ≈ 104px) — even on
   short viewports where 7–16% would land the fragment behind the rail. */
.srv2-fragment--01 { top: max(14%, 124px); left:  5%; width: 12vw; --rot: -3deg; animation-delay:  0s; }
.srv2-fragment--02 { top: max(12%, 122px); right: 7%; width: 11vw; --rot:  2deg; animation-delay: -2s; }
.srv2-fragment--03 { top: max(18%, 140px); left: 24%; width: 10vw; --rot: -1deg; animation-delay: -4s; }
.srv2-fragment--04 { bottom: 14%; left:  4%; width: 20vw; --rot:  4deg; animation-delay: -1s; }
.srv2-fragment--06 { bottom: 16%; right: 22%; width:  9vw; --rot:  3deg; animation-delay: -5s; }
.srv2-fragment--08 { top: 44%;   right: 4%; width:  9vw; --rot:  1deg; animation-delay: -7s; }

@keyframes srv2-frag-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

.srv2-hero__copy {
  position: relative;
  z-index: 2;
  align-self: center;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  max-width: min(90ch, 100%);
  margin-inline: auto;
  text-align: center;

  /* entry */
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity 900ms var(--srv2-ease-cine) 1100ms,
    translate 900ms var(--srv2-ease-cine) 1100ms;
}
.srv2-hero.is-entered .srv2-hero__copy {
  opacity: 1;
  translate: 0 0;
}
.srv2-hero__title {
  font-family: 'Geist', sans-serif;
  font-size: var(--srv2-titan);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--srv2-ink);
  text-wrap: balance;
}
.srv2-hero__title em {
  font-style: normal;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.srv2-hero__dek {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--srv2-ink-muted);
  max-width: 56ch;
  margin: 0 auto;
}
.srv2-hero__cta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.srv2-hero__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-family: 'Geist Mono', monospace;
  font-size: var(--srv2-mono);
  color: var(--srv2-ink-muted);
  letter-spacing: 0.04em;

  /* entry — last in the sequence */
  opacity: 0;
  transition: opacity 700ms var(--srv2-ease-cine) 1700ms;
}
.srv2-hero.is-entered .srv2-hero__hint { opacity: 1; }
.srv2-hero__hint-line {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--srv2-ink-faint);
}


/* (CHAPTER 01 funnel + manifesto interlude removed. The typographic
   overture that briefly replaced them was also removed — it sat in the
   hero→stage gap and read as an empty white frame. The five disciplines
   now read straight off the stage scenes, which open on PRODUCTION ENGINE.) */


/* ==============================================================
   CHAPTER 03 — STAGE: FIVE SCENES, FIVE ANIMATION LANGUAGES
   --------------------------------------------------------------
   01 annotated specimen   → markers + connector labels
   02 floating cards       → stagger reveal of brand worlds
   03 spatial stills cloud → 3D depth field of campaign frames
   04 tiled UI cards       → social/e-com mockups in perspective
   05 letter morph + grid  → typography flip + 9-cell iteration
   No filters on photos / videos (memory rule). Logos exempt.
   ============================================================== */
/* Stage is ONE single-viewport pinned section. All 5 scenes stack
   absolutely inside it and cross-fade in sequence (driven by the
   master timeline in services.js → initStage). After the master
   timeline finishes, the pin releases and `process` follows with no
   gap. Mobile reverts to vertical flow (see media queries below). */
.srv2-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  border-top: var(--srv2-hairline);
  /* no border-bottom: this stage is pinned, so its bottom hairline scrolled
     across the flush, sticky "Branding" heading of the disciplines list below
     it (read as a line crossing the word). The disciplines section is
     intentionally flush (padding-top:0, first item border-top:none) so the
     seam needs no rule at all. */
}
@media (max-width: 700px) {
  /* the nav rail is hidden on phones, so its 60px main clearance + the stage
     hairline just read as an empty header band above scene 01 — drop both so
     the (centred) scene fills the viewport from the top. */
  body[data-page="services-v2"]:has(.ed-nav-rail) main { padding-top: 0; }
  .srv2-stage { border-top: 0; }
}

/* ---- common scene container — absolute-stacked layers ---- */
.scn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* will-change is toggled transiently by services.js (initStage) only
     on the active scene's children — keeping ~150 layers permanently
     promoted was the GPU-memory cost this hardening pass removes. */
}
.scn__pin {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(4rem, 9vh, 7rem) var(--srv2-gutter) clamp(3rem, 7vh, 5rem);
}
.scn__head {
  width: 100%;
  max-width: var(--srv2-maxw);
  margin: 0 auto;
  display: grid;
  gap: 0.6rem;
  align-self: start;
  z-index: 3;
}
/* split head — title block left, supporting lede right (home grammar:
   mono grey index label + bold Geist title + calm grey lede aside) */
.scn__head--split {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  align-items: end;
  gap: 0.6rem clamp(1.5rem, 4vw, 3.5rem);
  padding-bottom: clamp(0.9rem, 2vh, 1.4rem);
  border-bottom: var(--srv2-hairline);
}
.scn__head--center {
  text-align: center;
  justify-items: center;
}
.scn__head-main {
  display: grid;
  gap: 0.55rem;
}
.scn__index {
  font-family: 'Geist Mono', monospace;
  font-size: var(--srv2-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--srv2-ink-muted);
}
.scn__head--center .scn__index { display: block; margin-bottom: 0.4rem; }
.scn__lede {
  margin: 0;
  align-self: end;
  font-family: 'Geist', sans-serif;
  font-weight: 300;
  font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
  line-height: 1.5;
  color: var(--srv2-ink-muted);
  max-width: 42ch;
  text-wrap: pretty;
}
.scn__lede--center { margin: 1rem auto 0; max-width: 52ch; }
.scn__num {
  font-family: 'Geist Mono', monospace;
  font-size: var(--srv2-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--srv2-rule-red);
}
.scn__h {
  margin: 0;
  font-family: 'Geist', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 4rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--srv2-ink);
  text-wrap: balance;
  max-width: 22ch;
}
.scn__h em {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.02em;
}
/* deliverables rail — mono grey chips on a hairline, home label grammar */
.scn__deliv {
  list-style: none;
  margin: clamp(1.5rem, 3vh, 2.5rem) auto 0;
  padding: clamp(0.9rem, 2vh, 1.3rem) 0 0;
  width: 100%;
  max-width: var(--srv2-maxw);
  border-top: var(--srv2-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(1.25rem, 3vw, 2.75rem);
  align-self: start;
}
.scn__deliv-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'Geist Mono', monospace;
  font-size: var(--srv2-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--srv2-ink-muted);
  white-space: nowrap;
}
.scn__deliv-item::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--srv2-rule-red);
  flex: none;
}

@media (max-width: 1024px) {
  .scn__head--split {
    grid-template-columns: 1fr;
    align-items: start;
    border-bottom: 0;
    padding-bottom: 0;
  }
  .scn__lede { align-self: start; }
}


/* (The typographic overture — SLOT 0 — was removed. It flashed the five
   discipline titles one at a time, but it sat in the hero→stage gap and
   read as an empty white frame. PRODUCTION ENGINE now opens the stage,
   so the hero flows straight into a full scene. Its .scn--overture /
   .srv2-overture rules were deleted with it.) */


/* ==============================================================
   SCENE 01 — ANNOTATED SPECIMEN
   Brand book grid with marker dots that scroll-trigger labels.
   Mimics video frame "Bold colors / Athletic sneakers" annotation.
   ============================================================== */
.scn--annotated .scn__specimen {
  position: relative;
  width: 100%;
  max-width: 1180px;
  aspect-ratio: 16 / 9;
  /* cap height so the split header + deliverables rail share the pinned
     viewport without overflowing on laptops */
  max-height: 54vh;
  margin: clamp(1.25rem, 2.5vh, 2rem) auto 0;
  align-self: center;
}
.scn--annotated .scn__hero {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* hero frame fade-in handled by JS opacity; no filter */
}

/* marker dots on specimen — small black squares like the video */
.scn__marker {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--srv2-ink);
  border: 2px solid var(--srv2-paper);
  box-shadow: 0 0 0 1px var(--srv2-ink-faint);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  z-index: 4;
  pointer-events: none;
}
.scn__marker--01 { top: 22%; left: 28%; }
.scn__marker--02 { top: 36%; left: 64%; }
.scn__marker--03 { top: 64%; left: 78%; }
.scn__marker--04 { top: 76%; left: 22%; }

.scn__label {
  position: absolute;
  font-family: 'Geist Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  background: var(--srv2-ink);
  color: var(--srv2-paper);
  padding: 0.42rem 0.7rem;
  white-space: nowrap;
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.scn__label--01 { top: 14%; left: 14%; }
.scn__label--02 { top: 28%; left: 80%; }
.scn__label--03 { top: 76%; left: 90%; }
.scn__label--04 { top: 88%; left: 8%; }


/* ==============================================================
   SCENE 02 — FLOATING CARDS
   3 brand-world cards rise from below with stagger; each card
   has a label badge in upper-left like the video reference.
   ============================================================== */
.scn--cards .scn__cards {
  width: 100%;
  max-width: var(--srv2-maxw);
  margin: clamp(1.5rem, 3vh, 2.5rem) auto 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.85rem, 1.6vw, 1.6rem);
  align-self: center;
}
/* outer two cards sit slightly lower → staggered editorial baseline */
.scn__card[data-i="0"],
.scn__card[data-i="4"] { margin-top: clamp(1.5rem, 4vh, 3rem); }
.scn__card[data-i="1"],
.scn__card[data-i="3"] { margin-top: clamp(0.5rem, 1.5vh, 1.25rem); }
.scn__card {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--srv2-paper-elev);
  opacity: 0;
  transform: translateY(60px);
  /* will-change toggled transiently by initStage (cards scene only) */
}
.scn__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scn__card figcaption {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  display: grid;
  gap: 0.18rem;
  background: var(--srv2-ink);
  color: var(--srv2-paper);
  padding: 0.4rem 0.65rem;
  font-family: 'Geist Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  pointer-events: none;
}


/* ==============================================================
   SCENE 03 — SPATIAL STILLS CLOUD
   Many small campaign chips arranged in a 3D depth field.
   Camera dollies forward on scrub. JS injects chips into #cloudField.
   ============================================================== */
.scn--cloud .scn__pin {
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
.scn--cloud .scn__cloud {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-style: preserve-3d;
  pointer-events: none;
  /* will-change toggled transiently by initStage (cloud scene only) */
}
.scn__chip {
  position: absolute;
  top: 50%;
  left: 50%;
  --chip-w: clamp(58px, 7vw, 110px);
  width: var(--chip-w);
  aspect-ratio: 3 / 4;
  margin: 0;
  box-sizing: border-box;
  /* instax / kodak vintage-white polaroid frame: thin top + sides, thick base.
     padding scales off the chip's own width (percent padding would resolve
     against the containing block and blow up). */
  background: #f6f3ec;
  padding: calc(var(--chip-w) * 0.07) calc(var(--chip-w) * 0.07) calc(var(--chip-w) * 0.2);
  border-radius: 2px;
  box-shadow: 0 10px 22px rgba(24, 20, 14, 0.22), 0 1px 3px rgba(24, 20, 14, 0.16);
  /* JS sets translate3d via CSS variables */
  --cx: 0px;
  --cy: 0px;
  --cz: 0px;
  --cr: 0deg;
  --copa: 1;
  transform: translate(-50%, -50%)
             translate3d(var(--cx), var(--cy), var(--cz))
             rotate(var(--cr));
  opacity: var(--copa);
  /* will-change toggled transiently by initStage (cloud scene only) */
}
.scn__chip > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #e6e2d8;   /* neutral window while the photo decodes */
}

/* PIXEL-TRAIL GHOSTS — colored "echoes" that lag behind each chip
   in z-space, creating a controlled glitch trail as the camera
   dollies through the cloud. These are NOT photos (memory rule):
   they're flat colored rectangles offset deeper in 3D depth, so
   the photo's pixels are never tinted, blended, or filtered. */
.scn__chip--ghost {
  display: none;   /* striped ink-grid / scanline echoes removed — clean polaroids only */
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(58px, 7vw, 110px);
  aspect-ratio: 3 / 4;
  margin: 0;
  --cx: 0px;
  --cy: 0px;
  --cz: 0px;
  --cr: 0deg;
  --copa: 1;
  transform: translate(-50%, -50%)
             translate3d(var(--cx), var(--cy), var(--cz))
             rotate(var(--cr));
  opacity: var(--copa);
  pointer-events: none;
  /* will-change toggled transiently by initStage (cloud scene only) */
}
/* Ghost layer 1 — closest pixel echo. Strict mono: ink-toned grid echo
   (uses the page ink token so it flips with theme — no chroma). */
.scn__chip--ghost.is-near {
  background:
    repeating-linear-gradient(0deg,
      transparent 0 1px,
      var(--srv2-ink-faint) 1px 2px),
    repeating-linear-gradient(90deg,
      transparent 0 1px,
      var(--srv2-ink-faint) 1px 2px),
    var(--srv2-ink-fainter);
}
/* Ghost layer 2 — deeper echo, fainter ink scanlines (theme-aware). */
.scn__chip--ghost.is-far {
  background:
    repeating-linear-gradient(0deg,
      transparent 0 2px,
      var(--srv2-ink-faint) 2px 3px),
    var(--srv2-ink-fainter);
}
.scn--cloud .scn__feature {
  position: absolute;
  bottom: clamp(2rem, 5vh, 4rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
}
.scn__feature-cap {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em 0.7em;
  font-family: 'Geist Mono', monospace;
  font-size: var(--srv2-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--srv2-ink-muted);
}
.scn__feature-cap b {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--srv2-ink);
  text-transform: none;
}
.scn__feature-sep { color: var(--srv2-ink-faint); }


/* ==============================================================
   SCENE 04 — TILED UI CARDS
   Several social/e-com mockups float at perspective angles, then
   resolve into a clean grid as the camera levels out.
   ============================================================== */
.scn--tiles .scn__pin {
  perspective: 1500px;
  perspective-origin: 50% 50%;
}
.scn--tiles .scn__tiles {
  position: relative;
  width: 100%;
  max-width: var(--srv2-maxw);
  margin: clamp(2rem, 4vh, 3rem) auto 0;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  gap: clamp(1rem, 2vw, 2rem);
  transform-style: preserve-3d;
}
.scn__tile {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--srv2-paper-elev);
  opacity: 0;
  --tx: 0px;
  --ty: 0px;
  --tz: 0px;
  --trot: 0deg;
  transform: translate3d(var(--tx), var(--ty), var(--tz)) rotateY(var(--trot));
  /* will-change toggled transiently by initStage (tiles scene only) */
}
.scn__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scn__tile figcaption {
  position: absolute;
  bottom: 0.7rem;
  left: 0.7rem;
  background: var(--srv2-ink);
  color: var(--srv2-paper);
  padding: 0.32rem 0.55rem;
  font-family: 'Geist Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  pointer-events: none;
}


/* ==============================================================
   SCENE 05 — LETTER MORPH + ITERATION GRID
   3 huge words stack on top of each other; JS cross-fades between
   them while the 9-cell iteration grid pulses below.
   ============================================================== */
.scn--lab .scn__h--morph {
  position: relative;
  display: inline-block;
  font-size: clamp(3rem, 9vw, 8rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  color: var(--srv2-ink);
  min-height: 1em;
}
.scn__morph-w {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.18em);
  /* will-change toggled transiently by initStage (lab scene only) */
}
.scn__morph-w[data-w="0"] {
  position: relative;
  opacity: 1;
  transform: translateY(0);
}
.scn--lab .scn__variants {
  width: 100%;
  max-width: 760px;
  margin: clamp(2rem, 4vh, 3rem) auto 0;
  align-self: center;
}
.scn--lab .scn__variants img {
  width: 100%;
  height: auto;
  display: block;
}
.scn__lab-cap {
  margin: clamp(1rem, 2vh, 1.5rem) 0 0;
  font-family: 'Geist Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--srv2-ink-faint);
  text-transform: lowercase;
  text-align: center;
  align-self: center;
}


/* ==============================================================
   STAGE CHROME — persistent UI that ties all 5 scenes into ONE
   display. Scene counter (top-left), discipline label (top-right),
   thin progress bar (bottom). Sits above the absolute-stacked
   .scn layers and survives every cross-fade.
   ============================================================== */
.srv2-stage__chrome {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  font-family: 'Geist Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--srv2-ink);
  mix-blend-mode: normal;
}
.srv2-stage__counter {
  position: absolute;
  top: clamp(1.25rem, 3vh, 2rem);
  left: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.srv2-stage__counter-num {
  font-size: 1rem;
  font-weight: 600;
  color: var(--srv2-rule-red);
}
.srv2-stage__counter-sep,
.srv2-stage__counter-tot {
  color: var(--srv2-ink-faint);
}
.srv2-stage__labels {
  position: absolute;
  top: clamp(1.25rem, 3vh, 2rem);
  right: clamp(1.25rem, 3vw, 2rem);
  width: max(220px, 22vw);
  height: 1.2em;
  text-align: right;
}
.srv2-stage__label {
  position: absolute;
  top: 0;
  right: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.5em);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
}
.srv2-stage__label[data-i="0"] {
  opacity: 1;
  transform: translateY(0);
}
.srv2-stage__progress {
  position: absolute;
  left: clamp(1.25rem, 3vw, 2rem);
  right: clamp(1.25rem, 3vw, 2rem);
  bottom: clamp(1.25rem, 3vh, 2rem);
  height: 1px;
  background: var(--srv2-ink-faint);
  overflow: hidden;
}
.srv2-stage__progress-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  background: var(--srv2-rule-red);
  transform-origin: 0% 50%;
  transform: scaleX(0);
  will-change: transform;
}

@media (max-width: 1024px) {
  .srv2-stage__chrome { display: none; }
}


/* ==============================================================
   STAGE — RESPONSIVE
   ============================================================== */
/* The pinned scrub now runs on mobile too (services.js matchMedia), so scenes
   STAY absolute-stacked full-height layers — we only resize content to fit the
   100vh pin on small screens. */
@media (max-width: 1024px) {
  .scn__pin { padding-inline: var(--srv2-gutter); padding-top: clamp(4.5rem, 11vh, 6rem); }
  .scn__head--split { grid-template-columns: 1fr; align-items: start; gap: 0.5rem; padding-bottom: 0.8rem; }
  .scn--cards .scn__cards { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 1rem; }
}
@media (max-width: 720px) {
  .scn__h    { font-size: clamp(1.6rem, 6.5vw, 2.4rem); max-width: none; }
  .scn__lede { font-size: 0.95rem; }
  .scn--annotated .scn__specimen { aspect-ratio: 16 / 9; max-height: 40vh; max-width: 100%; }
  /* art direction on mobile: a clean, perfectly symmetric 2×2 of 4 equal cards
     (the 5th is hidden); the GSAP rise/rotate still plays on each. Each card is
     a uniform 4:5 portrait, and the desktop editorial stagger margins (data-i
     0/1/3/4) are reset to 0 here so the four sit flush in a tidy 2×2 — no
     vertical offset between the columns. */
  .scn--cards .scn__cards { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; max-width: 30rem; }
  .scn--cards .scn__card  { aspect-ratio: 4 / 5; margin-top: 0; }
  .scn--cards .scn__card:nth-child(5) { display: none; }
}


/* ==============================================================
   CHAPTER 04 — PROCESS
   ============================================================== */
.srv2-process {
  padding: clamp(6rem, 12vh, 10rem) var(--srv2-gutter);
  border-top: var(--srv2-hairline);
}
.srv2-process__head {
  max-width: var(--srv2-maxw);
  margin: 0 auto clamp(3rem, 6vh, 5rem);
  display: grid;
  gap: 1rem;
}
.srv2-process__title {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: var(--srv2-hero);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0;
}
.srv2-process__title em {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-style: normal;
}

.srv2-process__steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--srv2-maxw);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid var(--srv2-rule-red);
}

.srv2-step {
  padding: clamp(1.5rem, 2.5vh, 2.5rem) clamp(1rem, 1.5vw, 1.75rem);
  border-right: var(--srv2-hairline);
  display: grid;
  gap: 0.75rem;
  align-content: start;
}
.srv2-step:last-child { border-right: 0; }
.srv2-step__no {
  font-family: 'Geist Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--srv2-rule-red);
}
.srv2-step__name {
  margin: 0;
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  letter-spacing: -0.02em;
  color: var(--srv2-ink);
}
.srv2-step__desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--srv2-ink-muted);
}


/* ==============================================================
   CHAPTER 05 — PROOF · MARQUEE + LOGOS
   ============================================================== */
.srv2-proof {
  padding: clamp(6rem, 12vh, 10rem) 0;
  border-top: var(--srv2-hairline);
}
.srv2-proof__head {
  max-width: var(--srv2-maxw);
  margin: 0 auto clamp(3rem, 6vh, 4rem);
  padding-inline: var(--srv2-gutter);
  display: grid;
  gap: 1rem;
}
.srv2-proof__title {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: var(--srv2-hero);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0;
}
.srv2-proof__title em {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-style: normal;
}
.srv2-proof__numbers {
  margin: 1rem 0 0;
  display: grid;
  gap: 0.6rem;
  font-family: 'Geist Mono', monospace;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--srv2-ink-muted);
}
.srv2-proof__numbers b {
  color: var(--srv2-ink);
  font-weight: 600;
  letter-spacing: 0;
}
.srv2-proof__numbers em {
  color: var(--srv2-ink-faint);
  font-style: normal;
}

.srv2-marquee {
  margin: clamp(3rem, 5vh, 4rem) 0 clamp(2rem, 4vh, 3rem);
  overflow: hidden;
  border-top: var(--srv2-hairline);
  border-bottom: var(--srv2-hairline);
  padding: 1.25rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.srv2-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  white-space: nowrap;
  font-family: 'Geist', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--srv2-ink);
  animation: srv2-marquee 36s linear infinite;
  will-change: transform;
}
.srv2-marquee:hover .srv2-marquee__track { animation-play-state: paused; }
.srv2-marquee__dot {
  color: var(--srv2-rule-red);
  font-size: 0.5em;
}
@keyframes srv2-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.srv2-clients {
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--srv2-gutter);
  max-width: var(--srv2-maxw);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}
.srv2-clients li {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  letter-spacing: 0.005em;
  color: var(--srv2-ink-muted);
  transition: color 200ms var(--srv2-ease-cine);
}
.srv2-clients li:hover { color: var(--srv2-ink); }


/* ==============================================================
   CHAPTER 06 — CTA · CODA
   ============================================================== */
.srv2-cta {
  padding: clamp(7rem, 16vh, 11rem) var(--srv2-gutter) 3rem;
  border-top: var(--srv2-hairline);
  display: grid;
  gap: clamp(1.5rem, 3vh, 2.5rem);
  text-align: center;
  max-width: var(--srv2-maxw);
  margin: 0 auto;
}
.srv2-cta .srv2-kicker { justify-self: center; }
.srv2-cta__title {
  margin: 0 auto;
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: var(--srv2-titan);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-wrap: balance;
  max-width: 18ch;
}
.srv2-cta__title em {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-style: normal;
}
.srv2-cta__buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.srv2-cta__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
  font-family: 'Geist Mono', monospace;
  font-size: var(--srv2-mono);
  color: var(--srv2-ink-muted);
}
.srv2-cta__contact a {
  color: var(--srv2-ink-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--srv2-ease-cine), border-color 200ms var(--srv2-ease-cine);
}
.srv2-cta__contact a:hover {
  color: var(--srv2-ink);
  border-bottom-color: var(--srv2-rule-red);
}

.srv2-foot {
  margin-top: clamp(3rem, 8vh, 5rem);
  padding-top: 1.5rem;
  border-top: var(--srv2-hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  font-family: 'Geist Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--srv2-ink-faint);
}
.srv2-foot__no { margin-left: auto; }


/* ==============================================================
   RESPONSIVE — TABLET (≤ 1024px)
   ============================================================== */
@media (max-width: 1024px) {
  .srv2-world__inner,
  .srv2-world:nth-child(even) .srv2-world__inner {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .srv2-process__steps {
    grid-template-columns: repeat(3, 1fr);
  }
  .srv2-step {
    border-right: var(--srv2-hairline);
    border-bottom: var(--srv2-hairline);
  }
  .srv2-step:nth-child(3n) { border-right: 0; }
  .srv2-step:nth-last-child(-n+3) { border-bottom: 0; }
}


/* ==============================================================
   RESPONSIVE — MOBILE (≤ 720px)
   Funnel: simplified centered list, no axis. Worlds stack.
   ============================================================== */
@media (max-width: 720px) {
  body[data-page="services-v2"] {
    --srv2-gutter: 1.25rem;
  }

  .srv2-fragment--04,
  .srv2-fragment--05,
  .srv2-fragment--06,
  .srv2-fragment--07,
  .srv2-fragment--08 { display: none; }

  .srv2-fragment--01 { width: 32vw; }
  .srv2-fragment--02 { width: 30vw; }
  .srv2-fragment--03 { width: 36vw; top: 64%; left: 8%; }

  .srv2-orbit { width: 110vmin; }

  .srv2-hero__title { line-height: 0.95; }
  .srv2-hero__hint { display: none; }

  .srv2-world__inner { gap: 1.5rem; }
  .srv2-world__media {
    aspect-ratio: 4 / 5;
    max-width: 80%;
    justify-self: center;
  }

  .srv2-process__steps {
    grid-template-columns: 1fr;
    border-top: 0;
  }
  .srv2-step {
    border-right: 0;
    border-left: 2px solid var(--srv2-rule-red);
    border-bottom: var(--srv2-hairline);
    padding-left: 1.25rem;
  }
  .srv2-step:last-child { border-bottom: 0; }

  .srv2-clients {
    justify-content: center;
    gap: 1rem 1.5rem;
  }
  .srv2-clients li { font-size: 1rem; }

  .srv2-foot__no { margin-left: 0; }
}


/* ==============================================================
   ACCESSIBILITY — REDUCED MOTION
   ============================================================== */
@media (prefers-reduced-motion: reduce) {
  /* reduced-motion desktop: the JS pin never builds (matchMedia gate), so linearise
     the stage like mobile — otherwise all 5 absolute scenes overlap. */
  .srv2-stage { height: auto; overflow: visible; }
  .scn { position: relative; inset: auto; height: auto; min-height: auto; opacity: 1 !important; transform: none !important; }

  /* still allow drag; just kill idle/scroll/entry motion */
  .srv2-orbit,
  .srv2-fragment,
  .srv2-marquee__track {
    animation: none !important;
  }
  .srv2-fragment,
  .srv2-orbit,
  .srv2-hero__copy,
  .srv2-hero__hint {
    transition: none !important;
  }
  .srv2-btn,
  .srv2-world__media,
  .srv2-world__cta {
    transition: none !important;
  }
}


/* ==============================================================
   HOOKS — FAZ 3 ANIMATION TARGETS (no behavior in faz 1)
   These attributes/classes give GSAP/Lenis stable selectors
   when motion gets wired:
     [data-frag]              → individual hero fragments
     .srv2-orbit              → orbit ring (becomes funnel mouth)
     .srv2-funnel__stage      → sticky pin target
     .srv2-tag[data-chapter]  → funnel tags grouped by world
     .srv2-world (5 of them)  → sticky stacking panels
     .srv2-marquee__track     → can be GSAP-ized later
   ============================================================== */


/* ==============================================================
   DISCIPLINES — scroll-driven typewriter
   Each craft "types" its paragraph as it enters view, then signs
   its paraf. Driven by services.js → initTypewriter().
   Colours use --srv2-* tokens so it adapts to light/dark theme.
   ============================================================== */
.srv2-type {
  /* Top padding + divider removed so the disciplines list butts straight up
     against the campaign-world stage above — no blank band or hairline between
     the two sections (the stage already frames itself with its own breathing
     room). Bottom padding kept. */
  padding: 0 var(--srv2-gutter) clamp(5rem, 12vh, 9rem);
  background: var(--srv2-paper);
}
.srv2-type__head {
  max-width: var(--srv2-maxw);
  margin: 0 auto clamp(2.5rem, 6vh, 5rem);
}
.srv2-type__title {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: var(--srv2-h2);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0.6rem 0 0;
  color: var(--srv2-ink);
}
.srv2-type__title em { font-style: italic; font-weight: 500; }
.srv2-type__dek {
  margin: 0.9rem 0 0;
  font-family: 'Geist Mono', monospace;
  font-size: var(--srv2-mono);
  color: var(--srv2-ink-muted);
}

.srv2-type__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--srv2-maxw);
}
.srv2-type__item {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr);
  gap: clamp(1.5rem, 4vw, 5rem);
  padding: clamp(2.2rem, 5vh, 3.6rem) 0;
  border-top: var(--srv2-hairline);
}
.srv2-type__item:last-child { border-bottom: var(--srv2-hairline); }
/* First discipline (Branding) sits flush with the section top — no divider line
   and no extra top padding above it, so there's no gap between the stage and the
   list. Later items keep their top hairline + padding as separators. */
.srv2-type__item:first-child { border-top: none; padding-top: 0; }

.srv2-type__lead {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  align-self: start;
  position: sticky;
  top: clamp(1.5rem, 12vh, 7rem);
}
.srv2-type__num {
  font-family: 'Geist Mono', monospace;
  font-size: var(--srv2-mono);
  color: var(--srv2-ink-faint);
}
.srv2-type__name {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  color: var(--srv2-ink);
}

.srv2-type__copy { min-width: 0; }
.srv2-type__body {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(1.2rem, 1.7vw, 1.6rem);
  line-height: 1.5;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--srv2-ink);
  text-wrap: pretty;
}
/* the blinking caret appended by JS while typing */
.srv2-type__caret {
  display: inline-block;
  width: 0.06em;
  height: 1.05em;
  margin-left: 0.06em;
  transform: translateY(0.12em);
  background: var(--srv2-ink);
  animation: srv2-caret 1s steps(1) infinite;
}
@keyframes srv2-caret { 50% { opacity: 0; } }

.srv2-type__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(1.4rem, 3vh, 2.2rem);
}
.srv2-type__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.srv2-type__chips li {
  font-family: 'Geist Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--srv2-ink-muted);
  border: var(--srv2-hairline);
  border-radius: 999px;
  padding: 0.4em 0.85em;
}
.srv2-type__sign {
  font-family: 'Geist Mono', monospace;
  font-size: var(--srv2-mono);
  letter-spacing: 0.04em;
  color: var(--srv2-ink-faint);
  white-space: nowrap;
  /* signs in after the paragraph finishes typing */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s var(--srv2-ease-cine), transform 0.6s var(--srv2-ease-cine);
}
.srv2-type__item.is-signed .srv2-type__sign { opacity: 1; transform: none; }

/* No-JS / reduced-motion: everything visible, no caret, signs shown */
.srv2-type__item:not(.is-armed) .srv2-type__sign { opacity: 1; transform: none; }

@media (max-width: 720px) {
  .srv2-type__item { grid-template-columns: 1fr; gap: 1rem; }
  .srv2-type__lead { position: static; top: auto; }
  .srv2-type__foot { flex-direction: column; align-items: flex-start; gap: 1rem; }
}


/* ==============================================================
   CONTACT — homepage brief form, services-styled
   Overrides the old centered closing layout into a form + side grid.
   ============================================================== */
.srv2-contact { text-align: left; place-items: center; }
.srv2-contact__inner {
  align-items: stretch;
  max-width: var(--srv2-maxw);
  width: 100%;
  gap: clamp(2rem, 5vh, 3.5rem);
}
.srv2-contact__head { max-width: 48rem; display: flex; flex-direction: column; gap: 0.9rem; }
.srv2-contact .srv2-contact__title { font-size: var(--srv2-h2); line-height: 1.0; }
.srv2-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 860px) { .srv2-contact__grid { grid-template-columns: 1fr; } }

.srv2-form { display: flex; flex-direction: column; gap: clamp(0.9rem, 2vh, 1.3rem); }
.srv2-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.9rem, 2vw, 1.3rem); }
@media (max-width: 480px) { .srv2-form__row { grid-template-columns: 1fr; } }
.srv2-form__field { display: flex; flex-direction: column; gap: 0.5rem; }
.srv2-form__lbl {
  font-family: 'Geist Mono', monospace;
  font-size: var(--srv2-mono);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--srv2-ink-muted);
}
.srv2-form__input {
  font-family: 'Geist', sans-serif;
  font-size: 1rem;
  color: var(--srv2-ink);
  background: transparent;
  border: var(--srv2-hairline);
  border-radius: 0;
  padding: 0.85em 1em;
  width: 100%;
  transition: border-color 200ms var(--srv2-ease-cine);
}
.srv2-form__input::placeholder { color: var(--srv2-ink-faint); }
.srv2-form__input:focus { outline: none; border-color: var(--srv2-ink); }
.srv2-form__input--area { resize: vertical; min-height: 7rem; }
.srv2-form__input--select { appearance: none; -webkit-appearance: none; cursor: pointer; }
/* submit button — matches the home contact CTA: mono, uppercase,
   "+ SEND THE BRIEF ↗", dark-filled, hover-invert with plus-rotate + arrow-shift
   (was a chunky sans-serif block that read as a different design system). */
.srv2-form__submit {
  align-self: start; margin-top: 0.4rem;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 26px;
  font-family: var(--ed-mono, 'Geist Mono', ui-monospace, monospace);
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--srv2-ink); color: var(--srv2-paper);
  border: 1px solid var(--srv2-ink); border-radius: 0;
  cursor: pointer; white-space: nowrap;
  transition: background-color .4s var(--srv2-ease-cine), color .4s var(--srv2-ease-cine), transform .2s var(--srv2-ease-cine);
}
.srv2-form__submit:hover { background: var(--srv2-paper); color: var(--srv2-ink); }
.srv2-form__submit:active { transform: scale(.98); }
.srv2-form__submit-plus,
.srv2-form__submit-arr { transition: transform .4s var(--srv2-ease-cine); display: inline-block; }
.srv2-form__submit:hover .srv2-form__submit-plus { transform: rotate(90deg); }
.srv2-form__submit:hover .srv2-form__submit-arr { transform: translate(3px, -3px); }

.srv2-contact__side { display: flex; flex-direction: column; gap: clamp(1.5rem, 4vh, 2.5rem); }
.srv2-contact__cols { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(1rem, 2.5vh, 1.6rem); }
.srv2-contact__cols li { display: flex; flex-direction: column; gap: 0.35rem; }
.srv2-contact__col-lbl {
  font-family: 'Geist Mono', monospace;
  font-size: var(--srv2-mono);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--srv2-ink-faint);
}
.srv2-contact__col-val {
  font-family: 'Geist', sans-serif;
  font-size: 1.0625rem;
  color: var(--srv2-ink);
  text-decoration: none;
  line-height: 1.4;
}
a.srv2-contact__col-val:hover { color: var(--srv2-rule-red); }
.srv2-contact__side .srv2-contact__meta {
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0;
}


/* ==============================================================
   BRAND BIBLE — scene 02 specimen becomes a stack of guideline
   spreads that cross-fade as the scene scrubs (driven by services.js).
   ============================================================== */
.scn__specimen--bible {
  overflow: hidden;
  background: #131228;            /* matches the spreads' dark ground so contain-letterbox is seamless */
  border: var(--srv2-hairline);
}
.scn__bible-page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  will-change: opacity, transform;
}




/* ============================================================
   PAGE SIGNATURE — big bold page name above the footer rule
   ============================================================ */
.srv2-contact__sig {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: clamp(3.2rem, 16vw, 11rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--srv2-ink);
  width: 100%;
  margin-top: clamp(2.5rem, 7vh, 5rem);
  padding-bottom: clamp(1.1rem, 3vh, 2rem);
  border-bottom: var(--srv2-hairline);
}