/* Orbit & Anchor — layout and components. Tokens live in tokens.css. */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--rust-deep); color: var(--bone);
  padding: .75rem 1.25rem; font-family: var(--font-text); font-weight: 500;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* ── Nav ─────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 1rem var(--gutter);
  background: rgba(27, 34, 43, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-dark);
  transition: background .45s ease, border-color .45s ease;
}
.nav[data-ground="light"] {
  background: rgba(243, 238, 229, .86);
  border-bottom-color: var(--rule-light);
}

.nav-logo { display: block; line-height: 0; position: relative; }
.nav-logo-img { height: 40px; width: auto; transition: opacity .45s ease; }
.nav-logo-ink { position: absolute; inset: 0; opacity: 0; }
.nav[data-ground="light"] .nav-logo-bone { opacity: 0; }
.nav[data-ground="light"] .nav-logo-ink  { opacity: 1; }

.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); }
.nav-links a {
  color: var(--bone-soft); text-decoration: none;
  transition: color .25s ease, background-color .25s ease;
}
.nav-links a:hover { color: var(--bone); }
.nav[data-ground="light"] .nav-links a { color: var(--ink-soft); }
.nav[data-ground="light"] .nav-links a:hover { color: var(--ink); }

.nav-cta {
  background: var(--rust-deep); color: var(--bone) !important;
  padding: .6rem 1.1rem; border-radius: 2px;
}
.nav-cta:hover { background: var(--rust); }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; padding: 9px 8px;
}
.nav-toggle span {
  display: block; height: 1px; background: var(--bone); margin: 7px 0;
  transition: background .45s ease, transform .3s ease, opacity .3s ease;
}
.nav[data-ground="light"] .nav-toggle span { background: var(--ink); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-4px) rotate(-45deg); }

/* ── Sections ── */
main > section { padding: var(--section-y) var(--gutter); position: relative; }
section[data-ground="light"] { background: var(--bone); color: var(--ink); }
section[data-ground="dark"]  { background: var(--ink);  color: var(--bone); }

/* ── Reveal ── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ── Mobile nav ── */
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links {
    /* The nav's backdrop-filter makes the HEADER the containing block for
       fixed descendants, so `inset: 0` sized this to the 72px bar rather than
       the screen — the menu opened as a crushed strip. Explicit viewport
       units are immune to the containing-block change. */
    position: fixed; top: 0; left: 0; width: 100vw;
    height: 100vh; height: 100svh;
    z-index: -1;
    flex-direction: column; justify-content: center; gap: 2rem;
    background: var(--ink);
    transform: translateY(-100%); transition: transform .4s ease;
  }
  .nav-links a { color: var(--bone) !important; font-size: 1rem; }
  .nav-links.is-open { transform: none; }
  .nav-logo-img { height: 36px; }
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: calc(var(--section-y) + 3rem);
  padding-bottom: calc(var(--section-y) + 4rem);
  overflow: hidden;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero::after {           /* soft lift behind the type, Navy on Ink */
  content: ''; position: absolute; z-index: 0;
  width: min(70rem, 120%); aspect-ratio: 1; border-radius: 50%;
  top: 42%; left: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(46,54,65,.9) 0%, rgba(27,34,43,0) 68%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; max-width: 64rem; }
.hero-eyebrow { color: var(--brass); margin-bottom: 1.75rem; }
.hero-title {
  color: var(--bone); margin-bottom: 2rem;
  font-size: clamp(2.75rem, 7.2vw, 6.5rem); line-height: .98; letter-spacing: -.022em;
}
.hero-line { display: block; }
.hero-line-2 { color: var(--bone-soft); }
.hero-title em { font-style: italic; color: var(--brass); }
.hero-sub { color: var(--bone-soft); font-size: 1.125rem; margin-bottom: 2.5rem; max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .875rem; }

/* ── Hero entrance ──
   The first thing on the page should arrive, not simply exist. */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroSettle {
  from { opacity: 0; transform: translateY(26px); letter-spacing: .028em; }
  to   { opacity: 1; transform: none; letter-spacing: -.022em; }
}
.hero-eyebrow           { animation: heroRise .85s cubic-bezier(.22,.61,.36,1) .05s both; }
.hero-line-1            { animation: heroSettle 1.15s cubic-bezier(.22,.61,.36,1) .18s both; }
.hero-line-2            { animation: heroSettle 1.15s cubic-bezier(.22,.61,.36,1) .34s both; }
.hero-sub               { animation: heroRise .85s cubic-bezier(.22,.61,.36,1) .58s both; }
.hero-actions           { animation: heroRise .85s cubic-bezier(.22,.61,.36,1) .72s both; }
.hero-rail              { animation: heroRise .85s cubic-bezier(.22,.61,.36,1) .9s both; }
.deckhand-hero          { animation: heroRise 1s ease .8s both, drift 9s ease-in-out 1.8s infinite; }
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow, .hero-line-1, .hero-line-2, .hero-sub,
  .hero-actions, .hero-rail, .deckhand-hero { animation: none; opacity: 1; }
}

/* ── Hero rail ── */
.hero-rail {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  display: flex; align-items: stretch; flex-wrap: wrap;
  border-top: 1px solid var(--rule-dark);
  padding: 0 var(--gutter);
}
.hero-rail-item, .hero-rail-scroll {
  padding: 1rem 1.5rem 1rem 0; color: var(--bone-mute); font-size: .75rem;
  display: flex; align-items: center; gap: .5rem;
}
.hero-rail-item + .hero-rail-item { padding-left: 1.5rem; border-left: 1px solid var(--rule-dark); }
.hero-rail-scroll { margin-left: auto; padding-right: 0; color: var(--brass); }
.hero-rail-scroll i { display: block; width: 34px; height: 1px; background: var(--brass); opacity: .55; position: relative; overflow: hidden; }
.hero-rail-scroll i::after {
  content: ''; position: absolute; inset: 0; background: var(--bone);
  animation: railSweep 2.6s ease-in-out infinite;
}
@keyframes railSweep {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) { .hero-rail-scroll i::after { animation: none; opacity: 0; } }

.btn {
  display: inline-block; padding: .95rem 1.9rem; border-radius: 2px;
  font-family: var(--font-text); font-weight: 500; font-size: .9375rem;
  letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.btn-primary { background: var(--rust-deep); color: var(--bone); border: 1px solid var(--rust-deep); }
.btn-primary:hover { background: var(--rust); border-color: var(--rust); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--bone); border: 1px solid var(--rule-dark); }
.btn-ghost:hover { border-color: var(--brass); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

.deckhand { position: absolute; pointer-events: none; user-select: none; }
.deckhand-hero {
  z-index: 2; right: clamp(1rem, 5vw, 5rem); bottom: 5.5rem;
  width: clamp(88px, 12vw, 170px); height: auto; max-height: 40%;
}
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-14px) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) { .deckhand-hero { animation: none; } }

@media (max-width: 860px) {
  /* No rail entry fits alongside the scroll cue on a phone. */
  .hero-rail-item { display: none; }
}
@media (max-width: 700px) {
  .deckhand-hero { width: 78px; bottom: 4.5rem; right: 1rem; opacity: .9; }
  .hero-sub { font-size: 1rem; }
  .hero-title { line-height: 1.02; }
}

/* ── Clients ─────────────────────────────────────────────── */
.clients { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-block: 1px solid var(--rule-dark); background: var(--navy); }
.clients-label { color: var(--bone-mute); text-align: center; margin-bottom: 1.5rem; }
.clients-viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.clients-track { display: flex; align-items: center; gap: 2.5rem; width: max-content; animation: marquee 64s linear infinite; }
.clients-track:hover { animation-play-state: paused; }
.client { display: flex; align-items: center; }
.client img { height: var(--lh, 34px); width: auto; }
@media (max-width: 700px) { .client img { height: calc(var(--lh, 34px) * .78); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .clients-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ── Split ───────────────────────────────────────────────────
   One woven list rather than two columns or two colour blocks. Orbit and
   Anchor are interleaved, so eight services against four never has to balance,
   and which half a row belongs to is carried by a border and a tag — not by
   painting slabs of background. */
section.split { background: var(--ink); position: relative; overflow: hidden; }
.split-stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.split-intro, .weave, .split-close { position: relative; z-index: 1; }
.split-intro { max-width: 52rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.split-eyebrow { color: var(--brass); }
.split-intro .heading { color: var(--bone); margin: .75rem 0 1rem; }
.split-lede { color: var(--bone-soft); }

.split-key { display: flex; gap: 1.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.split-key span { display: flex; align-items: center; gap: .5rem; color: var(--bone-mute); }
.split-key i { width: 1.25rem; height: 2px; display: block; }
.split-key .k-orbit  i { background: var(--brass); }
.split-key .k-anchor i { background: var(--bone); }

/* Two per row, so twelve services read as six lines rather than one long
   column. The existing order happens to lay out well two-up: Anchor lands in
   rows 1, 3, 4 and 6 and alternates which side it sits on. */
.weave {
  --row-shift: clamp(.75rem, 1.6vw, 1.5rem);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.25rem, 2.6vw, 2.5rem);
}
.wsvc {
  display: block;
  padding: .2rem 0 .2rem clamp(.875rem, 1.6vw, 1.25rem);
  border-left: 2px solid;
  transition: border-color .25s ease;
  animation: svcDrift 9s ease-in-out infinite;
  will-change: transform;
}

/* Nothing in space sits on a grid. The right-hand column hangs lower than the
   left, each item carries a slightly different indent, and every one drifts on
   its own period so the block never syncs up into rows. */
/* Stagger by row, not by column. Every item in a row sits level with its
   neighbours and every row gap is identical — the offset is horizontal, rows
   1 and 3 sitting left, rows 2 and 4 sitting right. Paired margins keep the
   width intact so the columns stay the same size as they shift. */
.weave > .wsvc:nth-child(6n+1),
.weave > .wsvc:nth-child(6n+2),
.weave > .wsvc:nth-child(6n+3) {
  margin-left: calc(var(--row-shift) * -1); margin-right: var(--row-shift);
}
.weave > .wsvc:nth-child(6n+4),
.weave > .wsvc:nth-child(6n+5),
.weave > .wsvc:nth-child(6n+6) {
  margin-left: var(--row-shift); margin-right: calc(var(--row-shift) * -1);
}

.wsvc:nth-child(2n) { animation-duration: 11s;   animation-delay: -2.4s; }
.wsvc:nth-child(3n) { animation-duration: 12.5s; animation-delay: -5.1s; }
.wsvc:nth-child(5n) { animation-duration: 10s;   animation-delay: -7.3s; }
.wsvc:nth-child(7n) { animation-duration: 13.5s; animation-delay: -3.8s; }

@keyframes svcDrift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -6px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .wsvc { animation: none; }
}
.wsvc[data-half="orbit"]  { border-left-color: var(--brass); }
.wsvc[data-half="anchor"] { border-left-color: var(--bone); }

.wsvc-tag {
  display: block; margin-bottom: .3rem;
  font-family: var(--font-mono); font-size: .625rem;
  letter-spacing: .16em; text-transform: uppercase;
}
.wsvc[data-half="orbit"]  .wsvc-tag { color: var(--brass); }
.wsvc[data-half="anchor"] .wsvc-tag { color: var(--bone); }

.wsvc-name {
  display: block;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.375rem, 1.9vw, 1.625rem); line-height: 1.15;
  color: var(--bone); transition: color .25s ease;
}
.wsvc[data-half="orbit"]:hover  .wsvc-name { color: var(--brass); }
.wsvc[data-half="anchor"]:hover .wsvc-name { color: var(--bone-soft); }

.wsvc-desc {
  display: block; margin-top: .25rem;
  font-family: var(--font-text); font-size: .875rem; line-height: 1.5;
  color: var(--bone-mute);
}

@media (max-width: 1000px) { .weave { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .weave { grid-template-columns: 1fr; }
  /* Stacked, a row shift is just ragged indenting. :nth-child(n) matches the
     specificity of the stagger rules above (0,3,0) so this actually wins —
     a plain `.weave > .wsvc` is 0,2,0 and loses to them. Must clear
     margin-right as well, since the shift is a paired left/right offset. */
  .weave > .wsvc:nth-child(n) { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .wsvc, .wsvc-name { transition: none; } }

/* A line that ties the two halves back together. */
.split-close {
  margin-top: clamp(2rem, 4vw, 3rem); text-align: center;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; color: var(--bone-soft);
}
.split-close em { font-style: italic; color: var(--brass); }

/* ── Work ────────────────────────────────────────────────── */
.work { background: var(--ink); overflow: hidden; }
.work-intro { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.work-eyebrow { color: var(--brass); }
.work-intro .heading { color: var(--bone); margin: .75rem 0 1rem; }
.work-lede { color: var(--bone-soft); }

.starmap { position: relative; width: 100%; height: clamp(520px, 62vw, 760px); }
.starmap-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Points and lines share one inset box, so a label on an outermost point has
   room to centre without clipping. Both layers MUST use the same inset or the
   joining lines drift off the points. */
.starmap-lines { position: absolute; inset: 0 5%; width: 90%; height: 100%; }
.starmap-line { fill: none; stroke: var(--brass); stroke-width: 1; opacity: .34; vector-effect: non-scaling-stroke; }
.starmap-points { position: absolute; inset: 0 5%; }

.point {
  position: absolute; transform: translate(-50%, -50%);
  background: none; border: 0; cursor: pointer; padding: 12px;
  display: block; line-height: 0;
}
.point-core {
  width: 11px; height: 11px; border-radius: 50%; background: var(--bone);
  box-shadow: 0 0 0 1px rgba(243,238,229,.25), 0 0 16px rgba(243,238,229,.35);
  transition: transform .3s ease, box-shadow .3s ease;
}
.point-film .point-core, .point-web .point-core { background: var(--rust); box-shadow: 0 0 0 1px rgba(192,85,40,.3), 0 0 16px rgba(192,85,40,.4); }
.point-animation .point-core { background: var(--brass); box-shadow: 0 0 0 1px rgba(216,163,84,.3), 0 0 16px rgba(216,163,84,.4); }
/* Taken out of flow so the button's box is just the core — that way
   translate(-50%,-50%) centres the STAR on its coordinate, and the joining
   lines meet the stars instead of landing below them. */
.point-label {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: .25rem; line-height: 1.4;
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bone-mute); white-space: nowrap;
  transition: color .3s ease;
}
.point:hover .point-core, .point:focus-visible .point-core { transform: scale(1.45); }
.point:hover .point-label, .point:focus-visible .point-label { color: var(--bone); }

/* Split runs straight into Work with no ground change between them, so the two
   section paddings stack into 259px of nothing. Halve them and mark the seam
   with a hairline that fades out at both ends. Every other boundary on the page
   has a Bone/Ink change to do this job. */
section.split { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
/* ── Work, small screens ─────────────────────────────────────
   A grid of tiles, grouped by discipline. Deliberately NOT a list: this lands
   directly after The Split's two service lists, and a third column of rows
   read as one endless scroll. Grouping also preserves what the joining lines
   say on desktop — which discipline each piece belongs to. */
.work-index { display: none; }
.work-group { margin-top: 2.25rem; }
.work-group:first-child { margin-top: 1.5rem; }
.work-group-title {
  color: var(--brass); padding-bottom: .625rem;
  border-bottom: 1px solid var(--rule-dark); margin-bottom: 1rem;
  display: flex; align-items: baseline; justify-content: space-between;
}
.work-group-count { color: var(--bone-mute); }

.work-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.work-tile {
  width: 100%; display: block; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.work-tile-media {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--ink);
  border: 1px solid var(--rule-dark); margin-bottom: .625rem;
  transition: border-color .25s ease;
}
.work-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Client marks are dark artwork on transparency — they need a light ground and
   room to breathe, not a crop. */
.work-tile.is-light .work-tile-media { background: var(--bone); }
.work-tile.is-light .work-tile-media img { object-fit: contain; padding: .875rem; }
.work-tile:hover .work-tile-media,
.work-tile:focus-visible .work-tile-media { border-color: var(--brass); }

/* A piece that lives on someone else's platform is labelled as such, so the
   tap is never a surprise. Over a still it sits on a scrim; with no still at
   all the whole tile is drawn instead. */
.work-tile-media.has-off { position: relative; }
.work-tile-media.has-off .work-tile-off {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem .625rem .5rem;
  background: linear-gradient(to top, rgba(27, 34, 43, .94), rgba(27, 34, 43, 0));
}
.work-tile-media.is-external {
  background: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.work-tile-off {
  display: flex; align-items: center; gap: .35rem;
  font-family: var(--font-mono); font-size: .625rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bone);
}
.work-tile-off i { font-style: normal; color: var(--brass); }

.work-tile-name {
  display: block; font-family: var(--font-display); font-size: 1.375rem;
  line-height: 1.15; color: var(--bone);
}
.work-tile-tag {
  display: block; margin-top: .2rem;
  font-family: var(--font-text); font-size: .8125rem; color: var(--bone-mute);
}

/* ── Drawer ── */
.drawer-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(12,16,20,.72); backdrop-filter: blur(5px); opacity: 0; transition: opacity .3s ease; }
.drawer-scrim.is-open { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; z-index: 201;
  width: min(32rem, 94vw); height: 100svh; overflow-y: auto;
  background: var(--navy); border-left: 1px solid var(--rule-dark);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  transform: translateX(100%); transition: transform .38s cubic-bezier(.22,.61,.36,1);
}
.drawer.is-open { transform: none; }
.drawer-close { position: absolute; top: 1rem; right: 1.25rem; background: none; border: 0; color: var(--bone-mute); font-size: 1.75rem; line-height: 1; cursor: pointer; }
.drawer-close:hover { color: var(--bone); }
.drawer-tag { color: var(--brass); margin-bottom: .75rem; }
.drawer-title { color: var(--bone); font-size: 1.75rem; margin-bottom: .625rem; }
.drawer-desc { color: var(--bone-soft); margin-bottom: 1.5rem; }
.drawer-media { border: 1px solid var(--rule-dark); background: var(--ink); margin-bottom: 1.5rem; }
.drawer-media video, .drawer-media img { width: 100%; display: block; }
/* Client marks are dark artwork on a light ground, presented as a specimen
   rather than dropped on a background: a hairline frame with Brass corner
   ticks, echoing the plates in the brand manual. */
.drawer-media--light {
  background: var(--bone);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.75rem, 6vw, 3rem);
  min-height: 15rem;
}
.drawer-media--light::before {
  content: ''; position: absolute; inset: .85rem;
  border: 1px solid rgba(27, 34, 43, .09);
  pointer-events: none;
}
/* Four Brass corner ticks. Brass is trim here, never text — the guidelines
   forbid Brass on Bone for copy, not for rules. */
.drawer-media--light::after {
  content: ''; position: absolute; inset: .85rem; pointer-events: none;
  --tick: linear-gradient(var(--brass), var(--brass));
  background:
    var(--tick) 0 0 / 11px 1px no-repeat,
    var(--tick) 0 0 / 1px 11px no-repeat,
    var(--tick) 100% 0 / 11px 1px no-repeat,
    var(--tick) 100% 0 / 1px 11px no-repeat,
    var(--tick) 0 100% / 11px 1px no-repeat,
    var(--tick) 0 100% / 1px 11px no-repeat,
    var(--tick) 100% 100% / 11px 1px no-repeat,
    var(--tick) 100% 100% / 1px 11px no-repeat;
}
/* Height-capped only. A width cap looks like optical balance but always binds
   first, squashing a wide mark (This Way Up is 8.9:1) to an unreadable sliver.
   Wide marks should span the plate; only tall ones need restraining. */
.drawer-media--light img {
  position: relative; z-index: 1;
  width: auto; max-width: 100%; max-height: 12rem; object-fit: contain;
}
.drawer-link { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); text-decoration: none; }
.drawer-link:hover { color: var(--bone); }

/* On small screens the constellation becomes a legible index. */
@media (max-width: 820px) {
  .starmap { display: none; }
  .work-index { display: block; border-top: 1px solid var(--rule-dark); }
}

/* ── Case study feature ─────────────────────────────────────
   One flagship, told properly, with two footnotes after it. The feature gets
   its own internal furniture — a Brass top rule, a display-size title, and
   mono sub-labels with running hairlines — so it reads as one organised piece
   rather than stacked blocks. */
.feature { position: relative; z-index: 1; }
.feature-head {
  border-top: 2px solid var(--brass);
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.feature-eyebrow { display: block; color: var(--brass); margin-bottom: 1rem; }
.feature-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3rem, 7vw, 5.5rem); line-height: .95;
  letter-spacing: -.015em; color: var(--bone);
}
.feature-strap {
  font-family: var(--font-text); font-weight: 500;
  font-size: clamp(1.05rem, 1.7vw, 1.3125rem);
  color: var(--bone-soft); margin-top: .65rem; max-width: 42rem;
}
.feature-stand {
  font-family: var(--font-text); font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.6; color: var(--bone-soft); max-width: 56rem;
}

/* Mono labels with a hairline running off — used as section steps. */
.feat-label {
  display: flex; align-items: center; gap: 1rem;
  color: var(--brass);
  margin: clamp(2rem, 4vw, 3rem) 0 1.25rem;
}
.feat-label span { flex: none; }
.feat-label::after { content: ''; flex: 1; height: 1px; background: var(--brass); opacity: .3; }

/* ── Device pair ─────────────────────────────────────────────
   Laptop and phone drawn in CSS — no chrome images to load, and the frames
   recolour with the palette. Baseline-aligned so the phone stands on the same
   line as the laptop's foot. */
/* Both devices are sized from one shared height, so each screen's WIDTH is
   derived from its video's aspect. That keeps the laptop and the phone the
   same height instead of the laptop filling the column and towering over it.
   Aspects: laptop 1714/892 = 1.9215, phone 480/940 = 0.51064. */
.devices {
  --device-h: clamp(300px, 32vw, 440px);
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.75rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.device { margin: 0; min-width: 0; }
.device-screen { background: var(--ink); overflow: hidden; position: relative; }
/* Scoped to the pair: those two are height-driven. The handheld below sizes
   from its own width instead, so it must keep height:auto. */
.devices .device-screen video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Laptop: thin bezel, then a wider foot that overhangs on both sides. */
.device-laptop .device-screen {
  border: .5rem solid var(--ink);
  border-bottom-width: .75rem;
  border-radius: .625rem .625rem 0 0;
  /* shorter than the phone by the height of its own foot, so the two finish level */
  height: calc(var(--device-h) - .7rem);
  width: calc((var(--device-h) - .7rem - 1.25rem) * 1.9215 + 1rem);
  max-width: 100%;
}
.device-base {
  height: .7rem; width: 108%; margin-left: -4%;
  background: var(--ink);
  border-radius: 0 0 .5rem .5rem;
  position: relative;
}
.device-base::after {            /* lid-edge notch */
  content: ''; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 14%; height: .22rem;
  background: rgba(243, 238, 229, .16);
  border-radius: 0 0 .25rem .25rem;
}

/* Phone: thicker bezel, big corner radius, speaker pill. */
.device-phone .device-screen {
  border: .45rem solid var(--ink);
  border-radius: 1.75rem;
  box-shadow: 0 0 0 1px rgba(27, 34, 43, .3);
  height: var(--device-h);
  width: calc((var(--device-h) - .9rem) * 0.51064 + .9rem);
}
.device-notch {
  position: absolute; z-index: 2; top: .3rem; left: 50%;
  transform: translateX(-50%);
  width: 34%; height: .3rem;
  background: rgba(243, 238, 229, .22);
  border-radius: .3rem;
}

/* Handheld: the game forces landscape, so the device is turned on its side and
   the speaker pill moves to the left edge. Width-driven — the video sets the
   height, so the frame follows whatever the clip's aspect happens to be. */
.device-handheld { width: 100%; }
.device-handheld .device-screen {
  border: .5rem solid var(--ink);
  border-radius: 1.5rem;
  box-shadow: 0 0 0 1px rgba(27, 34, 43, .3);
}
.device-handheld .device-screen video { width: 100%; height: auto; display: block; }
.device-notch-side {
  position: absolute; z-index: 2; left: .3rem; top: 50%;
  transform: translateY(-50%);
  width: .3rem; height: 26%;
  background: rgba(243, 238, 229, .22);
  border-radius: .3rem;
}

.flag-cap { display: block; margin-top: .75rem; color: var(--bone-mute); }


/* The game row. Landscape footage, so the device leads and the copy sits
   beside it rather than the other way round. */
.flag-game {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center;
}
.flag-game-copy .body { color: var(--bone-soft); margin-bottom: 1rem; }
.flag-game-label { color: var(--brass); display: block; margin-bottom: .625rem; }
.flag-game-copy .flag-runner {
  display: block; width: auto; height: 3.5rem;
  margin-bottom: .875rem;
}
.flag-link { color: var(--brass); display: inline-block; margin-top: .25rem; }
.flag-link:hover { color: var(--bone); }

@media (max-width: 860px) {
  .flag-game { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (max-width: 760px) {
  /* Side by side stops working once the phone eats the laptop's width. Stacked,
     the laptop goes full width and sizes from its aspect again. */
  .devices { flex-direction: column; align-items: center; gap: 2rem; }
  .device-laptop { width: 100%; }
  .device-laptop .device-screen { width: 100%; height: auto; }
  .device-laptop .device-screen video { height: auto; }
  /* Height, not width — a portrait device needs a tall figure here, so this
     multiplier is deliberately over 100vw. */
  .device-phone .device-screen {
    height: min(115vw, 420px);
    width: calc((min(115vw, 420px) - .9rem) * 0.51064 + .9rem);
  }
}


/* Before / after — clip, never resize, so the image never distorts. */
.compare { position: relative; overflow: hidden; border: 1px solid var(--rule-dark); aspect-ratio: 16 / 10; background: var(--ink); }
.compare-img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.compare-before { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.compare-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--brass); transform: translateX(-1px); pointer-events: none; }
.compare-handle::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--brass); box-shadow: 0 2px 12px rgba(27,34,43,.35);
}
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.compare:focus-within .compare-handle::after { box-shadow: 0 0 0 3px var(--ink); }
.compare-tag {
  position: absolute; bottom: .75rem; font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .16em; text-transform: uppercase; padding: .3rem .6rem;
  background: var(--ink); color: var(--bone); pointer-events: none;
}
.compare-tag-before { left: .75rem; }
.compare-tag-after { right: .75rem; }


/* ── Contact ─────────────────────────────────────────────── */
.contact { background: var(--navy); }
.contact-eyebrow { color: var(--brass); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contact-title { color: var(--bone); margin: .75rem 0 1rem; }
.contact-lede { color: var(--bone-soft); margin-bottom: 2rem; }
.contact-details { display: flex; flex-direction: column; }
.contact-item { padding: 1rem 0; border-top: 1px solid var(--rule-dark); }
.contact-item dt { color: var(--brass); margin-bottom: .35rem; }
.contact-item dd { color: var(--bone-soft); font-size: 1rem; }
.contact-item a { color: var(--bone); text-decoration: none; }
.contact-item a:hover { color: var(--brass); }
.deckhand-contact { position: static; width: clamp(130px, 15vw, 190px); margin-top: 2.25rem; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1rem; display: flex; flex-direction: column; }
.field label { color: var(--bone-mute); margin-bottom: .5rem; }
.field input, .field select, .field textarea {
  background: var(--ink); border: 1px solid var(--rule-dark); border-radius: 2px;
  padding: .8rem .9rem; color: var(--bone);
  font-family: var(--font-text); font-weight: 400; font-size: 1rem;
  transition: border-color .25s ease, background-color .25s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brass); background: #161C24; }
.field textarea { resize: vertical; min-height: 8rem; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A4A4A3' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center;
}
.field select optgroup { background: var(--ink); color: var(--bone-mute); }
.form-submit { width: 100%; margin-top: .75rem; }
.hp { position: absolute; left: -9999px; }

/* ── Footer ──────────────────────────────────────────────── */
.footer { background: var(--ink); border-top: 1px solid var(--rule-dark); padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 2rem; }
.footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); padding-bottom: 2.5rem; border-bottom: 1px solid var(--rule-dark); }
.footer-logo { height: 58px; width: auto; margin-bottom: 1.25rem; }
.footer-line { font-family: var(--font-display); font-size: 1.375rem; color: var(--bone-soft); max-width: 26rem; line-height: 1.35; }
.footer-col h2 { color: var(--brass); margin-bottom: 1rem; }
.footer-col li { margin-bottom: .625rem; }
.footer-col a { color: var(--bone-soft); text-decoration: none; font-size: .9375rem; }
.footer-col a:hover { color: var(--bone); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: 1.75rem; }
.footer-copy { font-size: .8125rem; color: var(--bone-mute); }
.footer-social { display: flex; gap: .625rem; }
.footer-social a {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--rule-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .6875rem; color: var(--bone-mute); text-decoration: none;
  transition: border-color .25s ease, color .25s ease;
}
.footer-social a:hover { border-color: var(--brass); color: var(--brass); }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* ── Chapter rhythm ──────────────────────────────────────────
   Option B: one long piece of space that darkens and lightens. Every section
   ends on the colour the next begins, so no seam can ever show — the page
   steps Ink→Navy→Ink→Navy→deep Ink as one continuous journey. Chapter
   furniture (numeral, Brass hairline) does the section-defining; stars sit in
   the dark stretches and an asteroid belt weaves down the whole page. */
body { position: relative; }

.clients { background: var(--ink); }
#split   { background: linear-gradient(180deg, var(--ink) 0%, var(--navy) 45%, var(--navy) 100%); }
#work    { padding-top: calc(var(--section-y) + 3rem);
           background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 45%, var(--navy) 100%);
            padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
#studies { background: linear-gradient(180deg, var(--navy) 0%, var(--ink) 50%, var(--ink-deep) 100%);
            padding-top: clamp(.75rem, 1.5vw, 1.25rem); padding-bottom: clamp(2.5rem, 4.5vw, 4rem);
            overflow: hidden; }
#contact { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-deep) 100%);
            padding-top: calc(var(--section-y) + 3rem); overflow: hidden; }
#about   { background: linear-gradient(180deg, var(--navy) 0%, var(--ink) 60%, var(--ink) 100%); overflow: hidden; }
#pricing { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-deep) 100%); overflow: hidden; }
.footer  { background: var(--ink-deep); }

/* Chapter hairlines — same fading rule the work seam already uses. */
#about::before, #pricing::before {
  content: ''; position: absolute; top: 0;
  left: var(--gutter); right: var(--gutter); height: 1px;
  background: var(--brass); opacity: .3;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

/* Ghost numerals. rgba Bone rather than the ghost token, so they read equally
   against Ink and Navy stretches of the gradient. Decorative only. */
.chapter {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  top: clamp(.75rem, 1.6vw, 1.5rem); right: calc(var(--gutter) * .5);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(5rem, 10vw, 9rem); line-height: 1;
  color: rgba(243, 238, 229, .06);
}
/* Static content must not slip beneath the positioned numerals or belt. */
.work-intro, .contact-grid, .more, .work-index,
.about-intro, .about-grid, .pricing-intro, .prices, .pricing-note { position: relative; z-index: 1; }

/* Contact's own starfield — the journey ends back in deep space. */
.contact-stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* ── The asteroid belt ──
   One tiling SVG band, a full sine period per tile, so it weaves left and
   right all the way down the document. Sits above section grounds at very low
   opacity — same precedent as a film-grain overlay — under the nav and drawer. */
.belt {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  opacity: .3;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 1500%22 preserveAspectRatio=%22none%22%3E%3Ccircle cx=%22848%22 cy=%220%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.38%22/%3E%3Ccircle cx=%22659%22 cy=%2225%22 r=%221.1%22 fill=%22%23F3EEE5%22 opacity=%220.4%22/%3E%3Ccircle cx=%22938%22 cy=%2250%22 r=%222.0%22 fill=%22%23F3EEE5%22 opacity=%220.61%22/%3E%3Ccircle cx=%22972%22 cy=%2275%22 r=%221.1%22 fill=%22%23F3EEE5%22 opacity=%220.57%22/%3E%3Ccircle cx=%22842%22 cy=%22100%22 r=%222.2%22 fill=%22%23F3EEE5%22 opacity=%220.54%22/%3E%3Ccircle cx=%22999%22 cy=%22125%22 r=%221.3%22 fill=%22%23F3EEE5%22 opacity=%220.61%22/%3E%3Ccircle cx=%221004%22 cy=%22150%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.71%22/%3E%3Ccircle cx=%221112%22 cy=%22175%22 r=%221.3%22 fill=%22%23F3EEE5%22 opacity=%220.67%22/%3E%3Ccircle cx=%221086%22 cy=%22200%22 r=%221.5%22 fill=%22%23F3EEE5%22 opacity=%220.71%22/%3E%3Ccircle cx=%221045%22 cy=%22225%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.48%22/%3E%3Ccircle cx=%221211%22 cy=%22250%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.56%22/%3E%3Ccircle cx=%221056%22 cy=%22275%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.64%22/%3E%3Ccircle cx=%221241%22 cy=%22300%22 r=%220.9%22 fill=%22%23F3EEE5%22 opacity=%220.46%22/%3E%3Ccircle cx=%221121%22 cy=%22325%22 r=%220.9%22 fill=%22%23F3EEE5%22 opacity=%220.53%22/%3E%3Ccircle cx=%221120%22 cy=%22350%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.31%22/%3E%3Ccircle cx=%221115%22 cy=%22375%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.5%22/%3E%3Ccircle cx=%221025%22 cy=%22400%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.6%22/%3E%3Ccircle cx=%221029%22 cy=%22425%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.71%22/%3E%3Ccircle cx=%221118%22 cy=%22450%22 r=%221.9%22 fill=%22%23F3EEE5%22 opacity=%220.36%22/%3E%3Ccircle cx=%221052%22 cy=%22475%22 r=%221.1%22 fill=%22%23F3EEE5%22 opacity=%220.63%22/%3E%3Ccircle cx=%221133%22 cy=%22500%22 r=%222.1%22 fill=%22%23F3EEE5%22 opacity=%220.42%22/%3E%3Ccircle cx=%22961%22 cy=%22525%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.45%22/%3E%3Ccircle cx=%22948%22 cy=%22550%22 r=%221.1%22 fill=%22%23F3EEE5%22 opacity=%220.38%22/%3E%3Ccircle cx=%22889%22 cy=%22575%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.54%22/%3E%3Ccircle cx=%22969%22 cy=%22600%22 r=%220.6%22 fill=%22%23F3EEE5%22 opacity=%220.56%22/%3E%3Ccircle cx=%22968%22 cy=%22625%22 r=%221.6%22 fill=%22%23F3EEE5%22 opacity=%220.68%22/%3E%3Ccircle cx=%22766%22 cy=%22650%22 r=%220.9%22 fill=%22%23F3EEE5%22 opacity=%220.39%22/%3E%3Ccircle cx=%22924%22 cy=%22675%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.51%22/%3E%3Ccircle cx=%22739%22 cy=%22700%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.72%22/%3E%3Ccircle cx=%22783%22 cy=%22725%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.33%22/%3E%3Ccircle cx=%22720%22 cy=%22750%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.62%22/%3E%3Ccircle cx=%22613%22 cy=%22775%22 r=%221.1%22 fill=%22%23F3EEE5%22 opacity=%220.68%22/%3E%3Ccircle cx=%22556%22 cy=%22800%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.42%22/%3E%3Ccircle cx=%22719%22 cy=%22825%22 r=%222.1%22 fill=%22%23F3EEE5%22 opacity=%220.59%22/%3E%3Ccircle cx=%22454%22 cy=%22850%22 r=%222.2%22 fill=%22%23F3EEE5%22 opacity=%220.59%22/%3E%3Ccircle cx=%22443%22 cy=%22875%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.42%22/%3E%3Ccircle cx=%22372%22 cy=%22900%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.67%22/%3E%3Ccircle cx=%22565%22 cy=%22925%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.47%22/%3E%3Ccircle cx=%22444%22 cy=%22950%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.71%22/%3E%3Ccircle cx=%22327%22 cy=%22975%22 r=%220.6%22 fill=%22%23F3EEE5%22 opacity=%220.39%22/%3E%3Ccircle cx=%22309%22 cy=%221000%22 r=%221.3%22 fill=%22%23F3EEE5%22 opacity=%220.65%22/%3E%3Ccircle cx=%22193%22 cy=%221025%22 r=%221.3%22 fill=%22%23F3EEE5%22 opacity=%220.34%22/%3E%3Ccircle cx=%22190%22 cy=%221050%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.71%22/%3E%3Ccircle cx=%22275%22 cy=%221075%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.44%22/%3E%3Ccircle cx=%22342%22 cy=%221100%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.66%22/%3E%3Ccircle cx=%22333%22 cy=%221125%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.41%22/%3E%3Ccircle cx=%22185%22 cy=%221150%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.35%22/%3E%3Ccircle cx=%22413%22 cy=%221175%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.51%22/%3E%3Ccircle cx=%22287%22 cy=%221200%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.41%22/%3E%3Ccircle cx=%22251%22 cy=%221225%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.51%22/%3E%3Ccircle cx=%22286%22 cy=%221250%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.64%22/%3E%3Ccircle cx=%22388%22 cy=%221275%22 r=%220.9%22 fill=%22%23F3EEE5%22 opacity=%220.67%22/%3E%3Ccircle cx=%22292%22 cy=%221300%22 r=%222.1%22 fill=%22%23F3EEE5%22 opacity=%220.47%22/%3E%3Ccircle cx=%22481%22 cy=%221325%22 r=%221.6%22 fill=%22%23F3EEE5%22 opacity=%220.7%22/%3E%3Ccircle cx=%22449%22 cy=%221350%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.66%22/%3E%3Ccircle cx=%22553%22 cy=%221375%22 r=%220.9%22 fill=%22%23F3EEE5%22 opacity=%220.72%22/%3E%3Ccircle cx=%22437%22 cy=%221400%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.4%22/%3E%3Ccircle cx=%22579%22 cy=%221425%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.64%22/%3E%3Ccircle cx=%22536%22 cy=%221450%22 r=%221.9%22 fill=%22%23F3EEE5%22 opacity=%220.61%22/%3E%3Ccircle cx=%22796%22 cy=%221475%22 r=%221.8%22 fill=%22%23F3EEE5%22 opacity=%220.62%22/%3E%3C/svg%3E');
  background-size: 100% 1500px; background-repeat: repeat-y;
}

/* The Deckhand between the Split's intro and its weave — in flow, centred, so
   he can never overlap text. Reuses the hero's drift. */
.cosmo-bob {
  display: flex; justify-content: center;
  margin: -.25rem 0 clamp(1rem, 2vw, 1.75rem);
  position: relative; z-index: 1; pointer-events: none;
}
.cosmo-bob img { width: clamp(54px, 6vw, 78px); animation: drift 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cosmo-bob img { animation: none; } }

/* ── The footnotes ── two more studies, in brief. */
.more { margin-top: clamp(3rem, 6vw, 4.5rem); position: relative; z-index: 1; }
.more-label {
  display: flex; align-items: center; gap: 1rem;
  color: var(--bone-mute); margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.more-label span { flex: none; }
.more-label::after { content: ''; flex: 1; height: 1px; background: var(--brass); opacity: .3; }
.more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; }
.more-meta { color: var(--brass); margin-bottom: .5rem; }
.more-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1;
  color: var(--bone); margin-bottom: .6rem;
}
.more-body { color: var(--bone-mute); font-size: .9375rem; margin-bottom: 1.1rem; max-width: 52ch; }
.more-hint { color: var(--bone-mute); margin-top: .75rem; }
/* Dark artwork needs its light specimen plate, same as the drawer. */
.more-plate {
  background: var(--bone); border: 1px solid var(--rule-dark);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex; align-items: center; justify-content: center; min-height: 12rem;
}
.more-plate img { max-width: 100%; max-height: 9rem; width: auto; object-fit: contain; }
@media (max-width: 860px) { .more-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ── Multi-page chrome ───────────────────────────────────────
   Page titles, the active nav state, and the footer signpost that walks a
   visitor home → work → contact. */
.page-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.5rem, 5.5vw, 4.25rem); line-height: 1;
  letter-spacing: -.015em; color: var(--bone);
}
.nav-links a[aria-current="page"] { color: var(--bone); }
.nav-links a[aria-current="page"]:not(.nav-cta) {
  border-bottom: 1px solid var(--brass); padding-bottom: .2rem;
}

.signpost {
  display: block; text-decoration: none;
  padding: 0 0 clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule-dark);
}
.signpost-eyebrow { display: block; color: var(--brass); margin-bottom: .5rem; }
.signpost-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.1;
  color: var(--bone); transition: color .25s ease;
}
.signpost:hover .signpost-title { color: var(--brass); }

/* ── The studio, in practice (home) ── */
.about-eyebrow { color: var(--brass); }
.about-intro { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.about-intro .heading { color: var(--bone); margin-top: .75rem; }
.about-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 4rem); align-items: start;
}
.about-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 2.3vw, 1.875rem); line-height: 1.15;
  color: var(--bone); margin-bottom: .875rem;
  padding-bottom: .75rem; border-bottom: 1px solid var(--rule-dark);
}
.about-col .body { color: var(--bone-soft); margin-bottom: 1rem; max-width: 52ch; }
.about-cosmo { margin: .75rem 0 0; display: flex; justify-content: flex-end; }
.about-cosmo img { width: clamp(88px, 9vw, 128px); }
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } }

/* ── Pricing (home) ── */
.pricing-eyebrow { color: var(--brass); }
.pricing-intro { max-width: 46rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.pricing-intro .heading { color: var(--bone); margin: .75rem 0 1rem; }
.pricing-lede { color: var(--bone-soft); }
.prices {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.price { border-left: 2px solid var(--brass); padding-left: 1rem; }
.price-name {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.375rem, 1.9vw, 1.625rem); line-height: 1.15; color: var(--bone);
}
.price-desc { display: block; margin-top: .35rem; font-size: .9375rem; line-height: 1.5; color: var(--bone-mute); }
.pricing-note { color: var(--bone-mute); margin-top: clamp(1.75rem, 3.5vw, 2.5rem); max-width: 60ch; }
.pricing-cta { margin-left: .5rem; }

/* ── Work page ── */
.map-key { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.25rem; color: var(--bone-mute); }
.map-key .k { display: flex; align-items: center; gap: .5rem; }
.k-dot { width: 9px; height: 9px; border-radius: 50%; display: block; }
.k-rust  { background: var(--rust);  box-shadow: 0 0 8px rgba(192,85,40,.5); }
.k-brass { background: var(--brass); box-shadow: 0 0 8px rgba(216,163,84,.5); }
.k-bone  { background: var(--bone);  box-shadow: 0 0 8px rgba(243,238,229,.4); }


/* ── Contact page ── */
.steps { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); counter-reset: none; }
.step {
  display: grid; grid-template-columns: 2.5rem 9rem 1fr; gap: .5rem 1rem;
  align-items: baseline; padding: .875rem 0;
  border-top: 1px solid var(--rule-dark);
}
.step-num { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .16em; color: var(--brass); }
.step-name { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; color: var(--bone); }
.step-desc { font-size: .9375rem; color: var(--bone-mute); }
@media (max-width: 560px) { .step { grid-template-columns: 2.5rem 1fr; } .step-desc { grid-column: 2; } }

/* ── Round-two refinements ─────────────────────────────────── */

/* Home's belt is directional: JS pins it to start at the Two Halves section,
   and the artwork runs top-right to bottom-left in one pass — no tiling. */
.belt-home {
  inset: auto; left: 0; right: 0; opacity: .45;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 4200%22 preserveAspectRatio=%22none%22%3E%3Ccircle cx=%221086%22 cy=%220%22 r=%221.1%22 fill=%22%23F3EEE5%22 opacity=%220.68%22/%3E%3Ccircle cx=%221328%22 cy=%2228%22 r=%220.9%22 fill=%22%23F3EEE5%22 opacity=%220.53%22/%3E%3Ccircle cx=%221128%22 cy=%2256%22 r=%221.8%22 fill=%22%23F3EEE5%22 opacity=%220.49%22/%3E%3Ccircle cx=%221113%22 cy=%2284%22 r=%221.1%22 fill=%22%23F3EEE5%22 opacity=%220.5%22/%3E%3Ccircle cx=%221361%22 cy=%22112%22 r=%221.1%22 fill=%22%23F3EEE5%22 opacity=%220.32%22/%3E%3Ccircle cx=%221183%22 cy=%22140%22 r=%220.9%22 fill=%22%23F3EEE5%22 opacity=%220.31%22/%3E%3Ccircle cx=%221307%22 cy=%22168%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.5%22/%3E%3Ccircle cx=%221261%22 cy=%22196%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.6%22/%3E%3Ccircle cx=%221244%22 cy=%22224%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.39%22/%3E%3Ccircle cx=%221388%22 cy=%22252%22 r=%222.1%22 fill=%22%23F3EEE5%22 opacity=%220.74%22/%3E%3Ccircle cx=%221139%22 cy=%22280%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.39%22/%3E%3Ccircle cx=%221379%22 cy=%22308%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.73%22/%3E%3Ccircle cx=%221260%22 cy=%22336%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.31%22/%3E%3Ccircle cx=%221144%22 cy=%22364%22 r=%221.1%22 fill=%22%23F3EEE5%22 opacity=%220.3%22/%3E%3Ccircle cx=%221134%22 cy=%22392%22 r=%221.9%22 fill=%22%23F3EEE5%22 opacity=%220.57%22/%3E%3Ccircle cx=%221264%22 cy=%22420%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.58%22/%3E%3Ccircle cx=%221334%22 cy=%22448%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.41%22/%3E%3Ccircle cx=%221138%22 cy=%22476%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.47%22/%3E%3Ccircle cx=%221271%22 cy=%22504%22 r=%221.1%22 fill=%22%23F3EEE5%22 opacity=%220.48%22/%3E%3Ccircle cx=%221343%22 cy=%22532%22 r=%221.3%22 fill=%22%23F3EEE5%22 opacity=%220.52%22/%3E%3Ccircle cx=%221156%22 cy=%22560%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.55%22/%3E%3Ccircle cx=%221158%22 cy=%22588%22 r=%220.9%22 fill=%22%23F3EEE5%22 opacity=%220.68%22/%3E%3Ccircle cx=%221031%22 cy=%22616%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.41%22/%3E%3Ccircle cx=%221108%22 cy=%22644%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.74%22/%3E%3Ccircle cx=%221186%22 cy=%22672%22 r=%221.7%22 fill=%22%23F3EEE5%22 opacity=%220.71%22/%3E%3Ccircle cx=%221089%22 cy=%22700%22 r=%221.3%22 fill=%22%23F3EEE5%22 opacity=%220.66%22/%3E%3Ccircle cx=%221179%22 cy=%22728%22 r=%221.8%22 fill=%22%23F3EEE5%22 opacity=%220.71%22/%3E%3Ccircle cx=%221042%22 cy=%22756%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.65%22/%3E%3Ccircle cx=%22888%22 cy=%22784%22 r=%221.1%22 fill=%22%23F3EEE5%22 opacity=%220.42%22/%3E%3Ccircle cx=%22952%22 cy=%22812%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.42%22/%3E%3Ccircle cx=%22950%22 cy=%22840%22 r=%221.3%22 fill=%22%23F3EEE5%22 opacity=%220.36%22/%3E%3Ccircle cx=%22923%22 cy=%22868%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.33%22/%3E%3Ccircle cx=%22820%22 cy=%22896%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.48%22/%3E%3Ccircle cx=%221012%22 cy=%22924%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.39%22/%3E%3Ccircle cx=%22948%22 cy=%22952%22 r=%222.0%22 fill=%22%23F3EEE5%22 opacity=%220.69%22/%3E%3Ccircle cx=%22934%22 cy=%22980%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.69%22/%3E%3Ccircle cx=%22807%22 cy=%221008%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.41%22/%3E%3Ccircle cx=%22870%22 cy=%221036%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.37%22/%3E%3Ccircle cx=%22859%22 cy=%221064%22 r=%222.2%22 fill=%22%23F3EEE5%22 opacity=%220.52%22/%3E%3Ccircle cx=%22798%22 cy=%221092%22 r=%221.5%22 fill=%22%23F3EEE5%22 opacity=%220.63%22/%3E%3Ccircle cx=%22892%22 cy=%221120%22 r=%222.1%22 fill=%22%23F3EEE5%22 opacity=%220.64%22/%3E%3Ccircle cx=%22659%22 cy=%221148%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.46%22/%3E%3Ccircle cx=%22682%22 cy=%221176%22 r=%221.3%22 fill=%22%23F3EEE5%22 opacity=%220.59%22/%3E%3Ccircle cx=%22757%22 cy=%221204%22 r=%222.3%22 fill=%22%23F3EEE5%22 opacity=%220.58%22/%3E%3Ccircle cx=%22577%22 cy=%221232%22 r=%221.9%22 fill=%22%23F3EEE5%22 opacity=%220.53%22/%3E%3Ccircle cx=%22809%22 cy=%221260%22 r=%220.6%22 fill=%22%23F3EEE5%22 opacity=%220.32%22/%3E%3Ccircle cx=%22635%22 cy=%221288%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.51%22/%3E%3Ccircle cx=%22620%22 cy=%221316%22 r=%220.9%22 fill=%22%23F3EEE5%22 opacity=%220.32%22/%3E%3Ccircle cx=%22600%22 cy=%221344%22 r=%220.9%22 fill=%22%23F3EEE5%22 opacity=%220.65%22/%3E%3Ccircle cx=%22727%22 cy=%221372%22 r=%222.0%22 fill=%22%23F3EEE5%22 opacity=%220.61%22/%3E%3Ccircle cx=%22744%22 cy=%221400%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.44%22/%3E%3Ccircle cx=%22663%22 cy=%221428%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.37%22/%3E%3Ccircle cx=%22617%22 cy=%221456%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.55%22/%3E%3Ccircle cx=%22588%22 cy=%221484%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.74%22/%3E%3Ccircle cx=%22850%22 cy=%221512%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.47%22/%3E%3Ccircle cx=%22744%22 cy=%221540%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.44%22/%3E%3Ccircle cx=%22661%22 cy=%221568%22 r=%221.6%22 fill=%22%23F3EEE5%22 opacity=%220.39%22/%3E%3Ccircle cx=%22767%22 cy=%221596%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.51%22/%3E%3Ccircle cx=%22733%22 cy=%221624%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.6%22/%3E%3Ccircle cx=%22795%22 cy=%221652%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.32%22/%3E%3Ccircle cx=%22859%22 cy=%221680%22 r=%221.3%22 fill=%22%23F3EEE5%22 opacity=%220.33%22/%3E%3Ccircle cx=%22805%22 cy=%221708%22 r=%220.9%22 fill=%22%23F3EEE5%22 opacity=%220.41%22/%3E%3Ccircle cx=%22656%22 cy=%221736%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.39%22/%3E%3Ccircle cx=%22768%22 cy=%221764%22 r=%221.6%22 fill=%22%23F3EEE5%22 opacity=%220.66%22/%3E%3Ccircle cx=%22904%22 cy=%221792%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.49%22/%3E%3Ccircle cx=%22930%22 cy=%221820%22 r=%222.0%22 fill=%22%23F3EEE5%22 opacity=%220.72%22/%3E%3Ccircle cx=%22939%22 cy=%221848%22 r=%220.6%22 fill=%22%23F3EEE5%22 opacity=%220.5%22/%3E%3Ccircle cx=%22931%22 cy=%221876%22 r=%221.3%22 fill=%22%23F3EEE5%22 opacity=%220.33%22/%3E%3Ccircle cx=%22932%22 cy=%221904%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.61%22/%3E%3Ccircle cx=%22898%22 cy=%221932%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.43%22/%3E%3Ccircle cx=%22887%22 cy=%221960%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.38%22/%3E%3Ccircle cx=%22740%22 cy=%221988%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.33%22/%3E%3Ccircle cx=%22722%22 cy=%222016%22 r=%220.9%22 fill=%22%23F3EEE5%22 opacity=%220.37%22/%3E%3Ccircle cx=%22739%22 cy=%222044%22 r=%221.3%22 fill=%22%23F3EEE5%22 opacity=%220.39%22/%3E%3Ccircle cx=%22760%22 cy=%222072%22 r=%221.3%22 fill=%22%23F3EEE5%22 opacity=%220.67%22/%3E%3Ccircle cx=%22760%22 cy=%222100%22 r=%221.8%22 fill=%22%23F3EEE5%22 opacity=%220.58%22/%3E%3Ccircle cx=%22872%22 cy=%222128%22 r=%220.6%22 fill=%22%23F3EEE5%22 opacity=%220.37%22/%3E%3Ccircle cx=%22921%22 cy=%222156%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.4%22/%3E%3Ccircle cx=%22889%22 cy=%222184%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.74%22/%3E%3Ccircle cx=%22767%22 cy=%222212%22 r=%221.3%22 fill=%22%23F3EEE5%22 opacity=%220.31%22/%3E%3Ccircle cx=%22742%22 cy=%222240%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.59%22/%3E%3Ccircle cx=%22672%22 cy=%222268%22 r=%221.3%22 fill=%22%23F3EEE5%22 opacity=%220.39%22/%3E%3Ccircle cx=%22888%22 cy=%222296%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.71%22/%3E%3Ccircle cx=%22657%22 cy=%222324%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.56%22/%3E%3Ccircle cx=%22847%22 cy=%222352%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.74%22/%3E%3Ccircle cx=%22754%22 cy=%222380%22 r=%221.7%22 fill=%22%23F3EEE5%22 opacity=%220.54%22/%3E%3Ccircle cx=%22775%22 cy=%222408%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.6%22/%3E%3Ccircle cx=%22673%22 cy=%222436%22 r=%220.9%22 fill=%22%23F3EEE5%22 opacity=%220.59%22/%3E%3Ccircle cx=%22548%22 cy=%222464%22 r=%220.9%22 fill=%22%23F3EEE5%22 opacity=%220.51%22/%3E%3Ccircle cx=%22464%22 cy=%222492%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.56%22/%3E%3Ccircle cx=%22653%22 cy=%222520%22 r=%221.1%22 fill=%22%23F3EEE5%22 opacity=%220.47%22/%3E%3Ccircle cx=%22514%22 cy=%222548%22 r=%222.0%22 fill=%22%23F3EEE5%22 opacity=%220.43%22/%3E%3Ccircle cx=%22612%22 cy=%222576%22 r=%221.9%22 fill=%22%23F3EEE5%22 opacity=%220.67%22/%3E%3Ccircle cx=%22490%22 cy=%222604%22 r=%220.6%22 fill=%22%23F3EEE5%22 opacity=%220.52%22/%3E%3Ccircle cx=%22461%22 cy=%222632%22 r=%222.0%22 fill=%22%23F3EEE5%22 opacity=%220.62%22/%3E%3Ccircle cx=%22329%22 cy=%222660%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.63%22/%3E%3Ccircle cx=%22416%22 cy=%222688%22 r=%222.2%22 fill=%22%23F3EEE5%22 opacity=%220.68%22/%3E%3Ccircle cx=%22516%22 cy=%222716%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.37%22/%3E%3Ccircle cx=%22480%22 cy=%222744%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.59%22/%3E%3Ccircle cx=%22373%22 cy=%222772%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.4%22/%3E%3Ccircle cx=%22405%22 cy=%222800%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.3%22/%3E%3Ccircle cx=%22434%22 cy=%222828%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.33%22/%3E%3Ccircle cx=%22396%22 cy=%222856%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.57%22/%3E%3Ccircle cx=%22298%22 cy=%222884%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.49%22/%3E%3Ccircle cx=%22170%22 cy=%222912%22 r=%221.3%22 fill=%22%23F3EEE5%22 opacity=%220.64%22/%3E%3Ccircle cx=%22334%22 cy=%222940%22 r=%220.9%22 fill=%22%23F3EEE5%22 opacity=%220.5%22/%3E%3Ccircle cx=%22215%22 cy=%222968%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.65%22/%3E%3Ccircle cx=%22399%22 cy=%222996%22 r=%221.1%22 fill=%22%23F3EEE5%22 opacity=%220.37%22/%3E%3Ccircle cx=%22368%22 cy=%223024%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.73%22/%3E%3Ccircle cx=%22271%22 cy=%223052%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.68%22/%3E%3Ccircle cx=%22207%22 cy=%223080%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.58%22/%3E%3Ccircle cx=%22182%22 cy=%223108%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.54%22/%3E%3Ccircle cx=%22176%22 cy=%223136%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.41%22/%3E%3Ccircle cx=%22279%22 cy=%223164%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.48%22/%3E%3Ccircle cx=%22434%22 cy=%223192%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.32%22/%3E%3Ccircle cx=%22313%22 cy=%223220%22 r=%222.1%22 fill=%22%23F3EEE5%22 opacity=%220.52%22/%3E%3Ccircle cx=%22193%22 cy=%223248%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.65%22/%3E%3Ccircle cx=%22393%22 cy=%223276%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.47%22/%3E%3Ccircle cx=%22340%22 cy=%223304%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.32%22/%3E%3Ccircle cx=%22293%22 cy=%223332%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.64%22/%3E%3Ccircle cx=%22266%22 cy=%223360%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.71%22/%3E%3Ccircle cx=%22249%22 cy=%223388%22 r=%222.2%22 fill=%22%23F3EEE5%22 opacity=%220.61%22/%3E%3Ccircle cx=%22422%22 cy=%223416%22 r=%220.9%22 fill=%22%23F3EEE5%22 opacity=%220.63%22/%3E%3Ccircle cx=%22269%22 cy=%223444%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.38%22/%3E%3Ccircle cx=%22522%22 cy=%223472%22 r=%220.9%22 fill=%22%23F3EEE5%22 opacity=%220.4%22/%3E%3Ccircle cx=%22321%22 cy=%223500%22 r=%221.3%22 fill=%22%23F3EEE5%22 opacity=%220.68%22/%3E%3Ccircle cx=%22553%22 cy=%223528%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.39%22/%3E%3Ccircle cx=%22486%22 cy=%223556%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.52%22/%3E%3Ccircle cx=%22388%22 cy=%223584%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.43%22/%3E%3Ccircle cx=%22510%22 cy=%223612%22 r=%221.1%22 fill=%22%23F3EEE5%22 opacity=%220.7%22/%3E%3Ccircle cx=%22372%22 cy=%223640%22 r=%221.3%22 fill=%22%23F3EEE5%22 opacity=%220.67%22/%3E%3Ccircle cx=%22524%22 cy=%223668%22 r=%221.5%22 fill=%22%23F3EEE5%22 opacity=%220.42%22/%3E%3Ccircle cx=%22379%22 cy=%223696%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.66%22/%3E%3Ccircle cx=%22546%22 cy=%223724%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.52%22/%3E%3Ccircle cx=%22494%22 cy=%223752%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.47%22/%3E%3Ccircle cx=%22552%22 cy=%223780%22 r=%221.1%22 fill=%22%23F3EEE5%22 opacity=%220.36%22/%3E%3Ccircle cx=%22285%22 cy=%223808%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.32%22/%3E%3Ccircle cx=%22453%22 cy=%223836%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.59%22/%3E%3Ccircle cx=%22508%22 cy=%223864%22 r=%222.1%22 fill=%22%23F3EEE5%22 opacity=%220.35%22/%3E%3Ccircle cx=%22348%22 cy=%223892%22 r=%221.1%22 fill=%22%23F3EEE5%22 opacity=%220.51%22/%3E%3Ccircle cx=%22489%22 cy=%223920%22 r=%221.2%22 fill=%22%23F3EEE5%22 opacity=%220.36%22/%3E%3Ccircle cx=%22315%22 cy=%223948%22 r=%221.3%22 fill=%22%23F3EEE5%22 opacity=%220.67%22/%3E%3Ccircle cx=%22279%22 cy=%223976%22 r=%221.1%22 fill=%22%23F3EEE5%22 opacity=%220.32%22/%3E%3Ccircle cx=%22402%22 cy=%224004%22 r=%221.1%22 fill=%22%23F3EEE5%22 opacity=%220.66%22/%3E%3Ccircle cx=%22209%22 cy=%224032%22 r=%221.0%22 fill=%22%23F3EEE5%22 opacity=%220.68%22/%3E%3Ccircle cx=%22313%22 cy=%224060%22 r=%220.7%22 fill=%22%23F3EEE5%22 opacity=%220.38%22/%3E%3Ccircle cx=%22321%22 cy=%224088%22 r=%220.9%22 fill=%22%23F3EEE5%22 opacity=%220.47%22/%3E%3Ccircle cx=%22315%22 cy=%224116%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.41%22/%3E%3Ccircle cx=%22159%22 cy=%224144%22 r=%220.8%22 fill=%22%23F3EEE5%22 opacity=%220.75%22/%3E%3Ccircle cx=%2268%22 cy=%224172%22 r=%221.3%22 fill=%22%23F3EEE5%22 opacity=%220.62%22/%3E%3C/svg%3E');
  background-size: 100% 100%; background-repeat: no-repeat;
}

/* A glimpse of the work (home) — pictures between the two text chapters. */
#peek { padding-block: clamp(2rem, 4vw, 3rem); background: var(--ink); }
.peek-row {
  display: grid; grid-template-columns: repeat(4, 1fr) auto;
  gap: clamp(.75rem, 1.6vw, 1.25rem); align-items: center;
}
.peek-tile {
  display: block; text-decoration: none;
  border: 1px solid var(--rule-dark); background: var(--navy);
  padding: .5rem .5rem 0; position: relative;
  transition: border-color .25s ease;
}
/* Brass corner ticks, same plate language as the drawer specimens. */
.peek-tile::after {
  content: ''; position: absolute; inset: .3rem; pointer-events: none;
  --tick: linear-gradient(var(--brass), var(--brass));
  background:
    var(--tick) 0 0 / 9px 1px no-repeat,    var(--tick) 0 0 / 1px 9px no-repeat,
    var(--tick) 100% 0 / 9px 1px no-repeat, var(--tick) 100% 0 / 1px 9px no-repeat,
    var(--tick) 0 100% / 9px 1px no-repeat, var(--tick) 0 100% / 1px 9px no-repeat,
    var(--tick) 100% 100% / 9px 1px no-repeat, var(--tick) 100% 100% / 1px 9px no-repeat;
  opacity: .7;
}
.peek-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); }
.peek-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.peek-cap {
  display: block; text-align: center; color: var(--bone-mute);
  font-size: .625rem; padding: .55rem 0 .6rem;
  transition: color .25s ease;
}
.peek-tile:hover, .peek-tile:focus-visible { border-color: var(--brass); }
.peek-tile:hover .peek-cap { color: var(--bone); }
.peek-more {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.2;
  color: var(--bone); text-decoration: none; padding-inline: clamp(.5rem, 1.5vw, 1.5rem);
  transition: color .25s ease;
}
.peek-more:hover { color: var(--brass); }
@media (max-width: 860px) {
  .peek-row { grid-template-columns: 1fr 1fr; }
  .peek-more { grid-column: 1 / -1; padding: .5rem 0 0; }
}

/* Work page intro */
.work-stand { color: var(--bone-soft); font-size: 1.0625rem; max-width: 60ch; margin-bottom: .6rem; }

/* ── The feature, rebuilt ──
   Title and strap on the left, the three facts on the right; the standfirst
   as an italic pull; each artefact group on a soft-edged Navy stage that runs
   full bleed — a shelf for the work, not another block. */
.feature { margin-top: clamp(1rem, 2vw, 1.5rem); }
.feature-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: end;
}
.feature-stats { display: flex; flex-direction: column; gap: .9rem; text-align: right; }
.feature-stats li { border-right: 2px solid var(--brass); padding-right: 1rem; }
.feature-stats .outcome-val {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.375rem, 1.9vw, 1.625rem); line-height: 1.15; color: var(--bone);
}
.feature-stats .outcome-lab {
  display: block; margin-top: .2rem;
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bone-mute);
}
.feature-stand {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.375rem, 2.2vw, 1.875rem); line-height: 1.45;
  color: var(--bone); max-width: 44ch;
  margin: clamp(1.75rem, 3.5vw, 2.75rem) 0;
}
.feature-stage {
  margin-inline: calc(var(--gutter) * -1);
  padding: clamp(2rem, 4vw, 3rem) var(--gutter);
  background: linear-gradient(180deg,
    rgba(46, 54, 65, 0) 0%, rgba(46, 54, 65, .55) 14%,
    rgba(46, 54, 65, .55) 86%, rgba(46, 54, 65, 0) 100%);
}
.feature-duo {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  margin-block: clamp(2rem, 4vw, 3rem);
}
.duo-item { border-left: 2px solid var(--brass); padding-left: clamp(1rem, 2vw, 1.5rem); }
.duo-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.375rem, 2vw, 1.625rem); line-height: 1.15;
  color: var(--bone); margin-bottom: .6rem;
}
.duo-item .body { color: var(--bone-soft); }

@media (max-width: 860px) {
  .feature-head { grid-template-columns: 1fr; align-items: start; }
  .feature-stats { text-align: left; flex-direction: row; flex-wrap: wrap; gap: 1.25rem; }
  .feature-stats li { border-right: 0; border-left: 2px solid var(--brass); padding: 0 0 0 .8rem; }
  .feature-duo { grid-template-columns: 1fr; }
}

/* ── Round four ─────────────────────────────────────────────── */

/* The constellation's closing line — bridges straight into the case study. */
.work-close {
  margin: clamp(2rem, 4vw, 3rem) 0 0; text-align: center;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; color: var(--bone-soft);
  position: relative; z-index: 1;
}
.work-close em { font-style: italic; color: var(--brass); }

/* Constellation points read as stars: a four-point flare behind each core. */
.point-core { color: var(--bone); }
.point-film .point-core, .point-web .point-core { color: var(--rust); }
.point-animation .point-core { color: var(--brass); }
.point-core::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle, currentColor 0%, transparent 62%);
  opacity: .38; pointer-events: none;
}

/* The BlockBrew title is their mark, not our type. */
.feature-title-logo img {
  display: block; width: clamp(240px, 44vw, 540px); height: auto; max-width: 100%;
}

/* ── Collapsible full studies ── */
.alsos { margin-top: clamp(2.5rem, 5vw, 4rem); position: relative; z-index: 1; }
.also { border-top: 1px solid var(--rule-dark); }
.also:last-child { border-bottom: 1px solid var(--rule-dark); }
.also-head {
  position: relative; cursor: pointer; list-style: none;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) 3rem clamp(1.1rem, 2.2vw, 1.6rem) 0;
}
.also-head::-webkit-details-marker { display: none; }
.also-meta { display: block; color: var(--brass); margin-bottom: .35rem; }
.also-title {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; color: var(--bone);
}
.also-strap { display: block; margin-top: .3rem; font-size: .9375rem; color: var(--bone-mute); }
.also-toggle {
  position: absolute; right: .25rem; top: 50%;
  width: 1.5rem; height: 1.5rem; margin-top: -.75rem;
  transition: transform .3s ease;
}
.also-toggle::before, .also-toggle::after {
  content: ''; position: absolute; background: var(--brass);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.also-toggle::before { width: 100%; height: 2px; }
.also-toggle::after  { width: 2px; height: 100%; }
.also[open] .also-toggle { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .also-toggle { transition: none; } }
.also-head:hover .also-title { color: var(--brass); }
.also-body { padding: .5rem 0 clamp(2rem, 4vw, 3rem); }
.also-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 3vw, 3rem); align-items: start;
}
.also-text .body { color: var(--bone-soft); margin-bottom: 1rem; }
.also-hint { color: var(--bone-mute); margin-top: 1.1rem; }
@media (max-width: 860px) { .also-grid { grid-template-columns: 1fr; } }

/* Outcome tiles, restored for the full studies. */
.outcomes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin-top: 1.5rem; background: var(--rule-dark); border: 1px solid var(--rule-dark);
}
.outcomes li { background: var(--navy); padding: .9rem .6rem; text-align: center; }
.outcomes .outcome-val {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: 1.375rem; line-height: 1.15; color: var(--bone);
}
.outcomes .outcome-lab {
  display: block; margin-top: .3rem;
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bone-mute);
}
@media (max-width: 560px) { .outcomes { grid-template-columns: 1fr; } }

/* Tabs, restored for This Way Up — dark-ground colours this time. */
.tabs { display: flex; border-bottom: 1px solid var(--rule-dark); margin-bottom: 1.25rem; }
.tab {
  flex: 1; padding: .7rem .5rem; background: none; border: 0; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bone-mute);
  transition: color .25s ease, border-color .25s ease;
}
.tab:hover { color: var(--bone); }
.tab[aria-selected="true"] { color: var(--brass); border-bottom-color: var(--brass); }
.panel { border: 1px solid var(--rule-dark); background: var(--ink); }
.panel img { width: 100%; display: block; }
/* The promo film is portrait — cap it and centre it, or it towers. */
.panel video {
  display: block; width: auto; max-width: 100%;
  max-height: min(30rem, 70vh); margin: 0 auto;
}
/* :not([hidden]) is load-bearing — a bare #panel-film rule outranks the UA's
   [hidden] { display: none }, so the film played behind the other tabs. */
#panel-film:not([hidden]) { display: flex; justify-content: center; }
.panel-plate {
  background: var(--bone); padding: clamp(1.5rem, 4vw, 2.75rem);
  display: flex; align-items: center; justify-content: center; min-height: 13rem;
}
.panel-plate img { width: auto; max-width: 100%; max-height: 10rem; object-fit: contain; }

/* The This Way Up website panel links out; say so on the artefact itself. */
.panel-link { display: block; text-decoration: none; position: relative; }
.panel-visit {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem .75rem .6rem; text-align: center; color: var(--bone);
  background: linear-gradient(to top, rgba(20, 26, 33, .92), rgba(20, 26, 33, 0));
}
.panel-link:hover .panel-visit { color: var(--brass); }

/* The lockup's own halves title the two practice columns — marks, not type.
   Heights are per-mark (44/48px) so the letters sit at the same optical size
   they have in the full lockup. */
.about-title-mark img { display: block; height: var(--wh, 46px); width: auto; }
.about-qualifier {
  display: block; margin-top: .7rem;
  font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--bone-mute);
}
@media (max-width: 700px) { .about-title-mark img { height: calc(var(--wh, 46px) * .85); } }

/* The glimpse of the work opens with the point of the two halves. */
.peek-intro {
  max-width: 46rem; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  position: relative; z-index: 1;
}
.peek-eyebrow { color: var(--brass); margin-bottom: .7rem; }
.peek-line {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.375rem, 2.6vw, 2rem); line-height: 1.25; color: var(--bone-soft);
}
.peek-line em { font-style: italic; color: var(--bone); }

/* The Studio columns and the glimpse band are one thought — the tiles are the
   result of the two halves — so they sit closer than two unrelated sections.
   Both IDs, so these land after the shared section padding without !important. */
#about { padding-bottom: clamp(1.25rem, 2.4vw, 2rem); }
#peek  { padding-top: clamp(.75rem, 1.6vw, 1.25rem); }

/* ── Message received ───────────────────────────────────────────
   Reuses .contact for ground, padding and starfield; only the
   centred column below is new. */
.thanks { display: flex; align-items: center; min-height: 72vh; }
.thanks-inner {
  position: relative; z-index: 1;
  max-width: 44rem; margin: 0 auto; text-align: center;
}
.thanks-deckhand {
  position: static; display: block; margin: 0 auto clamp(1rem, 2.5vw, 1.75rem);
  width: clamp(104px, 13vw, 168px);
}
.thanks-eyebrow { color: var(--brass); }
.thanks-title { margin-top: .6rem; }
.thanks-lede {
  margin: clamp(1rem, 2vw, 1.5rem) auto 0; max-width: 34rem; color: var(--bone-soft);
}
.thanks-lede em { font-family: var(--font-display); font-style: italic; color: var(--bone); }
.thanks-steps { margin-top: clamp(2rem, 4vw, 3rem); text-align: left; }
.thanks-note {
  margin: clamp(1.75rem, 3vw, 2.5rem) auto 0; max-width: 34rem;
  font-size: .9375rem; color: var(--bone-mute);
}
.thanks-note a { color: var(--brass); }
.thanks-actions {
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
@media (max-width: 560px) { .thanks-actions .btn { width: 100%; } }