/* ═══════════════════════════════════════════════════════════════════════════
   PAGES — the voices rail, and the five inner pages.
   Loaded after scenes.css everywhere; the inner pages load nothing else.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ OPENING SEQUENCE (two beats) ═════════════════════════════════════ */
.boot-mark { font-size: clamp(2.3rem, 6.9vw, 5.29rem); gap: 0; }
.boot-w    { display: inline-block; }
.boot-in   { will-change: transform; }

/* ═══ VOICES ═══════════════════════════════════════════════════════════ */
.voices[hidden] { display: none; }
.voices-stage {
  position: relative; display: grid;
  margin-top: clamp(2rem, 5vh, 3.4rem);
  min-height: clamp(15rem, 34vh, 24rem);
  cursor: grab; touch-action: pan-y;
}
.voices-stage:active { cursor: grabbing; }
.voice { grid-area: 1 / 1; opacity: 0; will-change: opacity, transform; }
.voice[aria-hidden="false"] { opacity: 1; }
.voice-quote {
  font-family: var(--f-display); font-variation-settings: var(--vs-head);
  font-weight: var(--w-display); font-size: clamp(1.725rem, 4.14vw, 3.565rem);
  line-height: 1.14; letter-spacing: var(--tr-head);
  max-width: 22ch; margin: 0 0 clamp(1.4rem, 3vh, 2.2rem);
  text-wrap: balance;
}
.voice-quote::before { content: "“"; color: var(--red); margin-left: -0.42em; }
.voice-quote::after  { content: "”"; color: var(--red); }
.voice-by { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.1rem; }
.voice-name { font-family: var(--f-display); font-weight: var(--w-head); font-size: 1.208rem; }
.voice-biz  { color: var(--ink-2); font-size: 1.058rem; }
.voice-ind  { font-size: 0.736rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--red); }
.voice-img  { margin-top: 1.6rem; width: min(100%, 30rem); border: 1px solid var(--line); border-radius: var(--r-md); }
.voices-foot {
  display: flex; align-items: center; gap: 1.1rem;
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
  padding-top: clamp(1rem, 2vh, 1.6rem); border-top: 1px solid var(--line);
}
/* `.voices-btn` moved to core.css. The homepage work reel uses the same
   control, and this file is not loaded there: on index the arrows were
   rendering as bare buttons at 32x31, unstyled and under the touch
   minimum. A component used by more than one page belongs in the sheet
   every page loads. */
.voices-count { font-family: var(--f-display); color: var(--ink-3); font-size: 1.092rem; }
.voices-count i { margin-inline: 0.4em; font-style: normal; opacity: 0.5; }
.voices-count span:first-child { color: var(--ink); }
.voices-hint { margin-left: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   INNER PAGES

   Same grammar as the homepage, different pacing: no pinned film, one
   editorial masthead, then long-form scenes. The masthead is the only
   place these pages spend a full screen.
   ═══════════════════════════════════════════════════════════════════════ */
.masthead-glow {
  width: min(60vw, 780px); aspect-ratio: 1;
  left: -8%; top: 2%;
}
.masthead-in { position: relative; z-index: 2; }

.masthead {
  position: relative;
  min-height: clamp(62vh, 74svh, 88vh);
  display: flex; align-items: flex-end;
  padding-block: clamp(140px, 22vh, 230px) clamp(40px, 8vh, 90px);
  overflow: clip;
}
.masthead-plate.sheen::before { animation-duration: 16s; opacity: 0.45; }
.masthead-in { position: relative; z-index: 2; width: 100%; }
.masthead .plate { margin-bottom: clamp(1.4rem, 3.4vh, 2.4rem); }
.masthead h1 { max-width: 15ch; }
.masthead-sub { margin-top: clamp(1.4rem, 3vh, 2.2rem); max-width: 46ch; }

/* A single quiet plate bled off the right edge — enough depth to feel
   art-directed, never enough to compete with the heading. */
.masthead-plate {
  position: absolute; z-index: 0;
  top: clamp(90px, 14vh, 150px); right: 0; bottom: clamp(30px, 6vh, 70px);
  width: min(46%, 620px);
  overflow: hidden;
  will-change: transform;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  border: 1px solid var(--line-2); border-right: 0;
}
.masthead-plate img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
.masthead-plate::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--paper) 0%, rgba(241,236,224,0.55) 40%, rgba(241,236,224,0.1) 100%);
}
@media (max-width: 860px) { .masthead-plate { display: none; } }

/* ── SERVICES: seven plates ──────────────────────────────────────────────
   Built by motion/services.js. The grid is the whole hierarchy: a folio
   numeral in the margin, the name at display scale across the sheet, the
   description set as a narrow column under it, and the drawing sitting in
   the outer margin where a plate caption would be.

   Everything that moves is a transform or an opacity, and every animated
   property is written by GSAP; the transitions here only carry the lit
   state, which changes at most once per pointer move. */
.entries {
  display: grid;
  list-style: none; margin: 0; padding: 0;
}

.svc {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.5rem, 1.6vw, 1rem);
  padding-block: clamp(2.4rem, 7vh, 5rem);
  isolation: isolate;
}

/* The rule is drawn by the module (scaleX 0 to 1), so it is a real element
   rather than a border: a border cannot be animated without paint. */
.svc-rule {
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--line); transform-origin: 0 50%;
}
.entries > .svc:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--line);
}

/* Both the numeral and the name rise out of their own line on arrival, so
   each needs a box that clips them until they do.

   THE PADDING IS NOT DECORATION. A clipping box drawn tight to a 1.02
   line-height cuts the descenders off the type — measured, every name lost
   8 to 9px, which is the whole tail of the "g" in "design" and the "p" in
   "development". The box is given that headroom back and then pulled up by
   the same amount, so it clips the animation without clipping the
   letterforms and the rhythm of the column is unchanged. */
.svc-n, .svc-name { overflow: hidden; }
.svc-name { padding-bottom: 0.16em; margin-bottom: -0.16em; }
.svc-n    { padding-bottom: 0.2em;  margin-bottom: -0.2em; }

.svc-n {
  margin: 0;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(0.92rem, 1.1vw, 1.12rem);
  letter-spacing: 0.22em; color: var(--ink-3);
  line-height: 1.4;
  transition: color 0.5s var(--ease);
}
.svc[data-on="1"] .svc-n { color: var(--red); }

/* THE SIZE THE BRIEF ASKED FOR. The old name topped out at 2.875rem, which
   on a 1440 screen is smaller than the page's own lede. This is display
   scale: the service is the largest thing on its plate, and everything
   else on the row is support. */
.svc-name {
  margin: 0;
  font-family: var(--f-display); font-variation-settings: var(--vs-mid);
  font-weight: var(--w-head); letter-spacing: var(--tr-head);
  font-size: clamp(2.3rem, 6.4vw, 5.2rem);
  line-height: 1.02;
  color: var(--ink);
}
.svc-name > span { display: block; will-change: transform; }

/* The lit plate leans into the margin. It is 10px; anything more and the
   column of names stops reading as a column. */
.svc[data-on="1"] .svc-name > span { color: var(--red); }
.svc-name > span,
.svc-say { transition: transform 0.75s var(--ease), color 0.5s var(--ease); }
.svc[data-on="1"] .svc-name > span { transform: translateX(10px); }

.svc-say { max-width: 52ch; }
.svc-body { color: var(--ink-2); margin: 0; }

.svc-marks {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 1.2rem 0 0; padding: 0; list-style: none;
}
.svc-marks li {
  font-size: 0.736rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line); border-radius: var(--r-full);
  padding: 6px 13px;
  transition: border-color 0.5s var(--ease), color 0.5s var(--ease);
}
.svc[data-on="1"] .svc-marks li {
  border-color: color-mix(in srgb, var(--red) 42%, var(--line));
  color: var(--ink-2);
}

/* The drawing. Faint until its plate is lit, and never in the way of the
   words: it sits behind them and is pointer-transparent. */
.svc-plate {
  position: absolute; z-index: -1; pointer-events: none;
  right: 0; top: 50%; translate: 0 -50%;
  width: var(--svc-w, 160px);
  color: var(--ink);
  opacity: 0.09;
  transition: opacity 0.7s var(--ease);
  will-change: transform;
}
.svc[data-on="1"] .svc-plate { opacity: 0.2; color: var(--red); }
.svc-plate svg { display: block; width: 100%; height: auto; }

/* ── The plate on a wide screen ───────────────────────────────────────
   Three columns: the folio in the margin, the name across the middle, the
   description in its own column. The name is allowed to run under the
   drawing because the drawing is a tenth of an ink. */
@media (min-width: 880px) {
  .svc {
    grid-template-columns: 6rem minmax(0, 1fr) minmax(20rem, 26rem);
    grid-template-areas: "n name say";
    align-items: start;
    gap: clamp(1.2rem, 3vw, 3rem);
  }
  .svc-n    { grid-area: n; padding-top: 0.7rem; }
  .svc-name { grid-area: name; }
  .svc-say  { grid-area: say; padding-top: 0.6rem; }
  /* THE DRAWING BELONGS IN THE NAME COLUMN, NOT THE TEXT ONE. Anchored to
     the right of the sheet it landed underneath the description, and a
     wireframe behind a paragraph is just noise in the counters of the
     type. Here it sits in the whitespace that follows a short name and
     behind the type of a long one, which is where a plate mark goes. */
  .svc-plate { right: auto; left: 52%; }
  .svc[data-on="1"] .svc-say { transform: translateX(6px); }
}

/* ── The plate on a phone ─────────────────────────────────────────────
   One column, the numeral inline above the name, the drawing pushed to
   the corner at a size that cannot collide with the words. There is no
   hover here: the lit plate is whichever one is in the middle of the
   screen, set by the module. */
@media (max-width: 879px) {
  .svc-plate {
    right: -0.5rem; top: 1.6rem; translate: 0 0;
    width: clamp(88px, 30vw, 150px);
    opacity: 0.08;
  }
  .svc-say { margin-top: 0.9rem; }
  /* No sideways lean on a small screen: 10px of travel next to a 2.3rem
     name is a wobble, and the row is already the full width of the sheet. */
  .svc[data-on="1"] .svc-name > span,
  .svc[data-on="1"] .svc-say { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-name > span, .svc-say, .svc-plate, .svc-marks li, .svc-n { transition: none; }
}

/* ── The work index ─────────────────────────────────────────────────── */
.wgrid {
  display: grid; gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  margin-top: clamp(2rem, 5vh, 3.6rem);
}
/* Every third entry runs full width, so the page never reads as a grid of
   equal thumbnails. */
@media (min-width: 900px) { .wgrid > .wcard:nth-child(5n + 1) { grid-column: 1 / -1; } }
.wcard-shot { display: block; overflow: hidden; border: 1px solid var(--line); background: var(--paper-2);
  border-radius: var(--r-lg); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  transition: box-shadow var(--dur-ui) var(--ease-ui); }
.wcard:hover .wcard-shot { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 18px 50px -24px rgba(23,20,18,0.4); }
.wcard-shot img { width: 100%; aspect-ratio: 1400 / 875; object-fit: cover;
  transform: scale(1.01); transition: transform 1.1s var(--ease); }
.wcard:hover .wcard-shot img { transform: scale(1.05); }
.wcard-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 1rem; }
.wcard-ind  { font-size: 0.713rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--red); }
.wcard-name { font-family: var(--f-display); font-weight: var(--w-head);
  font-size: clamp(1.322rem, 2.185vw, 1.84rem); letter-spacing: var(--tr-head); }
.wcard-kind { width: 100%; color: var(--ink-3); font-size: 0.989rem; }
.wcard-go   { font-size: 0.736rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-3); margin-left: auto; }

/* ── Two-column editorial block ─────────────────────────────────────── */
.split {
  display: grid; gap: clamp(1.6rem, 5vw, 4.5rem); grid-template-columns: 1fr;
  padding-block: clamp(2rem, 5vh, 3.4rem);
}
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; align-items: start; } }
.split--tight { padding-block: clamp(1.4rem, 3vh, 2.2rem); }
.split h2 { max-width: 14ch; }

/* A single large figure, set the way the homepage sets its stats. */
.figure-big {
  font-family: var(--f-sans); font-weight: 300; font-variant-numeric: tabular-nums;
  font-size: clamp(3.91rem, 10.35vw, 9.2rem); line-height: 0.92; letter-spacing: -0.035em;
}
.figure-big sup { font-size: 0.34em; vertical-align: super; color: var(--red); }
.figure-label { font-size: 0.805rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 0.8rem; }

/* ── Contact page ───────────────────────────────────────────────────── */
.reach { display: grid; gap: clamp(1.2rem, 3vh, 2rem); margin-top: clamp(1.8rem, 4vh, 2.8rem); }
.reach-item { border-top: 1px solid var(--line); padding-top: 1rem; }
.reach-item b { display: block; font-size: 0.759rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 0.4rem; }
.reach-item a, .reach-item span {
  font-family: var(--f-display); font-weight: var(--w-head);
  font-size: clamp(1.208rem, 2.07vw, 1.61rem); letter-spacing: var(--tr-head);
}
.reach-item a { border-bottom: 1px solid var(--line); transition: border-color var(--dur-ui) var(--ease-ui); }
.reach-item a:hover { border-bottom-color: var(--red); }

/* ── Page-to-page CTA ───────────────────────────────────────────────── */
.handoff {
  text-align: center; padding-block: clamp(80px, 14vh, 170px);
  border-top: 1px solid var(--line);
}
.handoff h2 { max-width: 18ch; margin: 1.2rem auto clamp(1.4rem, 3vh, 2rem); }
.handoff .plate { justify-content: center; }
.handoff .btn { margin-top: 0.6rem; }

@media (max-width: 640px) {
  .masthead { min-height: 58vh; min-height: 58svh; padding-block: clamp(110px, 17vh, 150px) clamp(30px, 6vh, 60px); }
  .voices-hint { display: none; }
  .voice-quote::before { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .voice { transition: none; }
  .masthead-plate img, .wcard-shot img { transform: none; }
}

/* ═══ COVERFLOW ════════════════════════════════════════════════════════
   The live builds on a ring. Palette, ground and type are the site's own;
   only the geometry comes from the reference component. Cards are 16:10
   because they are websites, not square sleeves, and they wear the same
   panel treatment as every other surface here: radius, hairline, inset
   highlight. */
.cf { --cf-card: clamp(236px, 33vw, 520px); margin-top: clamp(2rem, 5vh, 3.4rem); }

.cf-frame {
  /* Vertical padding keeps the drop shadows clear of the overflow clip. */
  position: relative; overflow: hidden; padding-block: clamp(28px, 5vh, 56px);
  perspective: calc(var(--cf-card) * 3);
  cursor: grab; outline: none;
  /* Horizontal drag is ours; the page keeps vertical scrolling. */
  touch-action: pan-y;
}
.cf-frame:active { cursor: grabbing; }
.cf-frame:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: var(--r-md); }

.cf-track {
  position: relative; user-select: none;
  height: calc(var(--cf-card) / 1.6);
  transform-style: preserve-3d;
}
.cf-card {
  position: absolute; left: 50%; top: 0;
  width: var(--cf-card); aspect-ratio: 1400 / 875;
  overflow: hidden; border-radius: var(--r-lg);
  background: var(--paper-2); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 26px 60px -30px rgba(23,20,18,0.55);
  will-change: transform, opacity;
  backface-visibility: hidden;
  text-decoration: none;
}
.cf-card img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; }
/* Only the card in front invites a click. */
.cf-card.is-mid { box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 34px 74px -28px rgba(23,20,18,0.62); }

.cf-say { text-align: center; margin-top: clamp(1.1rem, 2.6vh, 1.8rem); min-height: 5.6rem; }
.cf-ind {
  font-family: var(--f-sans); font-size: 0.713rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--red); margin: 0 0 0.5rem;
}
.cf-name {
  font-family: var(--f-display); font-weight: var(--w-head);
  font-size: clamp(1.61rem, 3.22vw, 2.415rem); letter-spacing: var(--tr-head);
  margin: 0; color: var(--ink);
}
.cf-kind { font-size: 1.058rem; color: var(--ink-2); margin: 0.4rem 0 0; }

.cf-ui { display: flex; align-items: center; justify-content: center; gap: 1.2rem;
         margin-top: clamp(1rem, 2.4vh, 1.6rem); }
.cf-arrow {
  width: 44px; height: 44px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  font-size: 1.15rem; line-height: 1; cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-ui),
              border-color var(--dur-ui) var(--ease-ui);
}
.cf-arrow:hover { background: var(--paper-2); border-color: var(--ink-3); }
.cf-dots { display: flex; align-items: center; gap: 9px; }
/* THE DOT IS 7px AND THE TARGET IS 44px. A 7px control is a real one on a
   mouse and unusable on a finger, and growing the dot to fit a thumb would
   turn a row of marks into a row of buttons. The hit area is therefore a
   transparent pseudo-element centred on the dot: the drawing stays 7px and
   the thing you press is 44. Same device is used on the reel arrows. */
.cf-dot {
  position: relative;
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: var(--ink); opacity: 0.24; cursor: pointer;
  transition: opacity var(--dur-ui) var(--ease-ui),
              transform var(--dur-ui) var(--ease-ui);
}
.cf-dot::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.cf-dot:hover { opacity: 0.5; }
.cf-dot[aria-current="true"] { opacity: 1; background: var(--red); transform: scale(1.25); }

/* Reduced motion, and the no-JS fallback: a plain scrolling row. Every
   card is still reachable and every link still works. */
.cf[data-calm="true"] .cf-frame,
.no-js .cf-frame { perspective: none; overflow-x: auto; }
.cf[data-calm="true"] .cf-track,
.no-js .cf-track {
  display: flex; gap: 1.2rem; height: auto; transform-style: flat;
}
.cf[data-calm="true"] .cf-card,
.no-js .cf-card {
  position: relative; left: auto; transform: none !important;
  opacity: 1 !important; flex: 0 0 var(--cf-card);
}