/* ══════════════════════════════════════════════════════
   Nominodev — web design studio
   Light studio palette to sit under the white-plate hero
   footage: paper white, near-black ink, one hot orange.

   The subject is pinned behind the whole document and the
   content flows past him in columns — the work he points
   at down the left, everything else down the right.
   ══════════════════════════════════════════════════════ */

:root {
  --paper:  #FFFFFF;
  --shell:  #F4F4F5;
  --ink:    #0B0B0C;
  --ink-2:  #26272B;
  --muted:  #6E7278;
  --line:   rgba(11, 11, 12, .10);

  --accent: #FF4A17;
  --accent-2: #FF7A3C;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pad: clamp(20px, 4.8vw, 92px);
  --band-h: clamp(112px, 14.5vh, 156px);
  --col: min(560px, 40vw);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-loading { overflow: hidden; height: 100vh; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

::selection { background: var(--accent); color: #fff; }

/* ── loader ─────────────────────────────────────────── */
.loader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--paper);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
  transition: opacity .7s var(--ease), visibility .7s;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader-mark {
  font-size: clamp(28px, 6vw, 50px);
  font-weight: 800; letter-spacing: -.02em;
}
.loader-bar {
  width: min(240px, 54vw); height: 2px;
  background: var(--line); overflow: hidden;
}
.loader-bar i {
  display: block; height: 100%; width: 0%;
  background: var(--accent);
  transition: width .25s linear;
}
.loader-pct {
  font-size: 11px; letter-spacing: .3em;
  color: var(--muted); font-variant-numeric: tabular-nums;
}

/* ── nav ────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, 2.6vh, 30px) var(--pad);
  color: var(--ink);
  /* the subject's smoke plume rises through the middle of the bar, so the
     chrome carries its own barely-there fade to keep the links readable */
  background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.62) 55%, rgba(255,255,255,0) 100%);
  transition: padding .4s var(--ease);
}
.nav.solid {
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding-top: 14px; padding-bottom: 14px;
}

.nav-brand {
  display: flex; align-items: center; gap: 11px;
  font-size: 15px; font-weight: 800; letter-spacing: .14em;
}
.nav-mark { width: 26px; height: 26px; fill: currentColor; }
.nav-brand span { display: none; }

.nav-links {
  display: flex; gap: clamp(18px, 2.8vw, 46px);
  font-size: 15px; font-weight: 500;
}
.nav-links a {
  position: relative;
  color: var(--ink-2);
  padding-bottom: 14px;
  transition: color .3s var(--ease);
}
.nav-links a i {
  position: absolute; left: 50%; bottom: 4px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink);
  transform: translateX(-50%) scale(0);
  transition: transform .4s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.is-active { color: var(--ink); font-weight: 600; }
.nav-links a.is-active i { transform: translateX(-50%) scale(1); }

.nav-cta {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--ink); color: #fff;
  border-radius: 100px;
  padding: 7px 7px 7px 26px;
  font-size: 14.5px; font-weight: 500;
  white-space: nowrap;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.nav-cta i {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; color: var(--ink);
}
.nav-cta i svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-cta:hover { background: var(--accent); transform: translateY(-1px); }

/* ── scroll rail ────────────────────────────────────── */
.rail {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 95; background: transparent; pointer-events: none;
}
.rail i {
  display: block; height: 100%; width: 0%;
  background: var(--accent);
}

/* ══ THE STAGE ══════════════════════════════════════════
   Pinned for the length of the document. The scrub is
   driven by .hero-driver, which contributes the scroll.
   ══════════════════════════════════════════════════════ */
.stage {
  position: fixed; inset: 0; z-index: 1;
  overflow: hidden;
  background: linear-gradient(160deg, var(--shell) 0%, var(--paper) 42%);
  transform-origin: 50% 40%;
}

/* NO OVERLAY — the footage is shown raw: no scrim, no tint,
   no gradient, no filter. Nothing is layered on top of it. */
.hero-media { position: absolute; inset: 0; }

.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 34% 40%;
  transform: scale(1.04);
}
.hero-video.is-off { opacity: 0; }

/* Desktop stands the subject on top of the band rather than cropping him
   into it, so the whole figure and the floor around him stay in frame.
   That leaves the plate narrower than the stage — the edges are feathered
   into the page so the seam never shows, which also buys the room to slide
   him sideways as the columns change sides. */
@media (min-width: 901px) {
  /* the box is cut to the footage's own 16:9 so its edges and the feather
     line up exactly — letterboxing inside a wider box would leave the
     plate's hard edge sitting in the opaque middle of the mask */
  .hero-media {
    inset: auto auto var(--band-h) 50%;
    height: calc(100% - var(--band-h));
    aspect-ratio: 16 / 9;
    transform: translateX(calc(-50% + var(--video-x, -3.6%)));
    /* sides always, and the floor too — the band only covers the bottom
       edge while it is on screen */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%),
                        linear-gradient(180deg, #000 96%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%),
                        linear-gradient(180deg, #000 96%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
  .hero-video {
    object-position: 50% 50%;
    transform: none;
  }
}

.hero-type {
  position: absolute; inset: 0;
  padding: 0 var(--pad);
  pointer-events: none;
  color: var(--ink);
  /* the whole copy layer belongs to the hero phase — it hands over to the
     columns rather than lingering behind them */
  transition: opacity .55s var(--ease);
}

.beat {
  position: absolute;
  opacity: 0;
  will-change: opacity, transform;
  text-shadow: 0 1px 16px rgba(255,255,255,.8), 0 0 42px rgba(255,255,255,.6);
}
.beat a { pointer-events: auto; }
/* a faded-out beat keeps its hit area otherwise, and would go on catching
   clicks over the copy that replaced it */
.beat.is-off a { pointer-events: none; }

/* beat 1 — the resting composition */
.beat-1 {
  left: var(--pad);
  top: 47%;
  /* centred on its own height, with room for the scroll-driven nudge */
  transform: translateY(calc(-50% + var(--slide, 0px)));
  max-width: min(620px, 42vw);
}

.eyebrow {
  display: flex; align-items: center; gap: 11px;
  font-size: clamp(10px, .8vw, 12.5px);
  letter-spacing: .24em; text-transform: uppercase;
  font-weight: 600; color: var(--muted);
  margin-bottom: clamp(14px, 2.2vh, 26px);
}
.eyebrow i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}

.display {
  font-size: clamp(38px, 5.6vw, 92px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.035em;
}
.display-accent { color: var(--accent); }

.tagline {
  margin-top: clamp(16px, 2.6vh, 30px);
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.55;
  color: var(--muted);
}

.hero-actions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(14px, 1.6vw, 26px);
  margin-top: clamp(22px, 3.6vh, 44px);
}

.btn {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: clamp(13px, 1vw, 15.5px); font-weight: 600;
  border-radius: 100px;
  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.btn i {
  display: grid; place-items: center;
  border-radius: 50%;
  flex: none;
}
.btn i svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.btn-solid {
  background: var(--ink); color: #fff;
  padding: 8px 8px 8px 30px;
}
.btn-solid i { width: 38px; height: 38px; background: #fff; color: var(--ink); }
.btn-solid:hover { background: var(--accent); transform: translateY(-2px); }

.btn-ghost { color: var(--ink); gap: 15px; }
.btn-ghost i {
  width: 52px; height: 52px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 8px 24px -8px rgba(11,11,12,.28), 0 0 0 1px var(--line);
  transition: transform .4s var(--ease);
}
.btn-ghost:hover i { transform: scale(1.07); color: var(--accent); }

/* beats 2–3 — compact block, subject still walking up centre frame */
.beat-2, .beat-3 {
  left: var(--pad);
  top: clamp(140px, 25vh, 290px);
  max-width: min(320px, 30vw);
}
.beat-num {
  font-size: 11px; letter-spacing: .34em;
  font-weight: 700; color: var(--muted);
  margin-bottom: 12px;
}
.beat h2 {
  font-size: clamp(24px, 3.1vw, 46px);
  font-weight: 700; line-height: 1.02;
  letter-spacing: -.03em;
}
.beat-body {
  margin-top: 14px;
  font-size: clamp(12px, .95vw, 15px);
  line-height: 1.55;
  max-width: 30ch;
  color: var(--ink-2);
}

/* beat 4 — the payoff. It sits in the empty quarter the subject throws
   his arm across, just under the line of the point so the hand reads as
   aiming at it rather than sitting on top of it. */
.beat-4 {
  left: var(--pad);
  top: clamp(200px, 38vh, 440px);
  max-width: min(470px, 34vw);
}
.beat .point-title {
  font-size: clamp(29px, 4.6vw, 70px);
  line-height: .98;
}
.beat .point-title .display-accent { display: block; }

/* ── hero fact rail ─────────────────────────────────── */
.hero-facts {
  position: absolute;
  right: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(210px, 17vw, 290px);
  display: flex; flex-direction: column;
}
.fact {
  display: flex; align-items: flex-start; gap: 14px;
  padding: clamp(14px, 2.2vh, 24px) 0;
}
.fact + .fact { border-top: 1px solid var(--line); }
.fact-icon {
  flex: none;
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--paper); color: var(--accent);
  box-shadow: 0 10px 26px -12px rgba(11,11,12,.38), 0 0 0 1px var(--line);
}
.fact-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.fact b {
  display: block;
  font-size: clamp(13px, 1.02vw, 16px); font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
.fact p {
  font-size: clamp(11.5px, .88vw, 13.5px);
  line-height: 1.45; color: var(--muted);
}

/* ── the band that closes the fold ──────────────────── */
.band {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--band-h);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.band-trust { padding: 0 var(--pad); }
.band-label {
  font-size: clamp(9.5px, .72vw, 11.5px);
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
  margin-bottom: clamp(12px, 1.8vh, 22px);
}
.logos {
  list-style: none;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(18px, 3.4vw, 58px);
  color: var(--ink);
}
.logos li {
  font-size: clamp(14px, 1.35vw, 21px);
  font-weight: 700; letter-spacing: -.02em;
  opacity: .72;
  transition: opacity .35s var(--ease);
}
.logos li:hover { opacity: 1; }

.band-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 100%;
  align-items: center;
  border-left: 1px solid var(--line);
}
.band-stats .stat { text-align: center; padding: 0 8px; }
.band-stats .stat + .stat { border-left: 1px solid var(--line); }
.stat b {
  display: block;
  font-size: clamp(22px, 2.4vw, 38px);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat span {
  display: block; margin-top: 6px;
  font-size: clamp(10.5px, .85vw, 13.5px);
  color: var(--muted);
}

/* tucked into the empty corner under the copy — dead centre is where the
   subject stands */
.scrollcue {
  position: absolute; bottom: calc(var(--band-h) + 20px); left: var(--pad);
  display: flex; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--muted);
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.scrollcue i {
  width: 54px; height: 1px; background: currentColor; opacity: .35;
  position: relative; overflow: hidden;
}
.scrollcue i::after {
  content: ""; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%; background: var(--accent);
  animation: drip 2.1s var(--ease) infinite;
}
@keyframes drip { to { left: 100%; } }
.scrollcue.hide { opacity: 0; }

.timecode {
  position: absolute; right: var(--pad); bottom: calc(var(--band-h) + 24px);
  font-size: 10px; letter-spacing: .22em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  opacity: .7;
}

/* ══ THE FLOW ═══════════════════════════════════════════ */
/* The flow sits over the pinned stage, and its own box spans the hero — so
   both it and the 560vh spacer inside it have to be transparent to clicks,
   or they swallow every press meant for the hero buttons underneath. Only
   the real content sections take pointer events back. */
.flow { position: relative; z-index: 2; pointer-events: none; }
.flow > section,
.flow > footer { pointer-events: auto; }
.hero-driver { height: 560vh; }

.col {
  width: var(--col);
  padding-block: clamp(80px, 13vh, 180px);
}
.col-left  { margin-left: var(--pad); }
.col-right { margin-left: auto; margin-right: var(--pad); }
/* invisible over the page, but it keeps type readable on the rare frame
   the smoke plume drifts behind a column */
.col-right {
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.86) 14%, rgba(255,255,255,.92) 100%);
}

.col-head { margin-bottom: clamp(30px, 5vh, 60px); }
.kicker {
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: 18px;
}
.kicker.light { color: var(--accent-2); }
.col-title {
  font-size: clamp(34px, 4.4vw, 68px);
  font-weight: 700; line-height: .98; letter-spacing: -.04em;
}
.col-title em { font-style: normal; color: var(--accent); }
.col-sub {
  margin-top: 20px; max-width: 40ch;
  color: var(--muted); font-size: clamp(14px, 1.05vw, 16.5px);
}

/* ── the work deck ──────────────────────────────────────
   A sideways-travelling row of cards, clipped to the pocket
   of screen the subject is pointing into. The set is cloned
   in JS, so the track is two identical halves and a −50%
   shift is exactly one period — seamless. Cards carry the
   inter-card gap as their own right margin rather than the
   flex `gap`, or that period would be half a gap out and the
   loop would drift.
   ══════════════════════════════════════════════════════ */
.ptrack-clip {
  width: min(46vw, 880px);
  margin-top: clamp(22px, 4vh, 44px);
  padding: 12px 0 24px;
  overflow: hidden;
  /* the leading edge feathers out rather than butting into a hard cut */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.5%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 2.5%, #000 93%, transparent 100%);
}
.ptrack {
  display: flex;
  width: max-content;
  animation: track 78s linear infinite;   /* ~35px/s, whatever the card count */
}
.ptrack-clip:hover .ptrack { animation-play-state: paused; }
@keyframes track {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.pcard {
  flex: none;
  height: clamp(380px, 48vh, 520px);
  aspect-ratio: 79 / 100;
  margin-right: 18px;
  display: flex; flex-direction: column;
  padding: 13px;
  border-radius: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 20px 44px -28px rgba(11,11,12,.5);
  /* pushed up from below and faded in when the deck first arrives */
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .85s var(--ease), transform .85s var(--ease), box-shadow .45s var(--ease);
}
.pcard.in { opacity: 1; transform: none; }
.pcard:hover { box-shadow: 0 30px 56px -28px rgba(11,11,12,.55); }

.pcard-badge {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px 4px 5px;
  border-radius: 100px;
  background: var(--shell);
  border: 1px solid var(--line);
  font-size: 10.5px; font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.pcard-badge i {
  width: 15px; height: 15px; border-radius: 5px;
  background: linear-gradient(140deg, var(--accent-2), var(--accent));
}

.pcard-title {
  margin-top: 13px;
  font-size: clamp(20px, 1.5vw, 26px);
  font-weight: 700; letter-spacing: -.035em; line-height: 1.06;
}
.pcard-title em {
  display: block;
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic; font-weight: 400;
  font-size: 1.14em;
  letter-spacing: -.015em;
  color: var(--ink-2);
}

.pcard-note {
  margin-top: 9px;
  font-size: clamp(10.5px, .72vw, 12.5px);
  line-height: 1.42;
  color: var(--muted);
}

.pcard-media {
  flex: 1;
  min-height: 0;               /* let the media absorb the slack, not overflow it */
  margin-top: 12px;
  border-radius: 15px;
  overflow: hidden;
  background: var(--shell);
}
.pcard-media video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

.pcard-cta {
  margin-top: 11px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; flex: none;
  border-radius: 100px;
  background: var(--accent); color: #fff;
  font-size: 13.5px; font-weight: 600;
  border: 1px solid transparent;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.pcard-cta i { display: grid; place-items: center; }
.pcard-cta i svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.pcard:hover .pcard-cta { background: var(--ink); }

/* the work with nothing live to open yet reads quieter than the work
   that does */
.pcard-cta.is-quiet {
  background: transparent; color: var(--ink);
  border-color: var(--line);
}
.pcard:hover .pcard-cta.is-quiet { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ── services cards, stacked in the column ──────────── */
.cards {
  border-top: 1px solid var(--line);
}
.card {
  padding: clamp(22px, 3vh, 34px) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.card-n {
  display: block;
  font-size: 11px; letter-spacing: .3em;
  color: var(--accent); font-weight: 600;
  margin-bottom: 12px;
}
.card h3 {
  font-size: clamp(19px, 1.9vw, 27px);
  font-weight: 700; letter-spacing: -.03em;
  margin-bottom: 8px;
  transition: color .35s var(--ease);
}
.card p { color: var(--muted); font-size: clamp(13.5px, 1vw, 15px); max-width: 42ch; }
.card:hover h3 { color: var(--accent); }

/* ── process ────────────────────────────────────────── */
.steps { list-style: none; }
.steps li {
  border-top: 1px solid var(--line);
  padding: clamp(20px, 3vh, 30px) 0;
}
.steps b {
  font-size: 11px; letter-spacing: .3em; color: var(--accent); font-weight: 600;
}
.steps h3 {
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 700; letter-spacing: -.03em;
  margin: 10px 0 10px;
}
.steps p { color: var(--muted); font-size: clamp(13.5px, 1vw, 15px); }

/* ── pricing ────────────────────────────────────────── */
.tier-flag {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 20px;
  padding: 6px 14px 6px 10px;
  border-radius: 100px;
  background: rgba(255, 74, 23, .1);
  color: var(--accent);
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
}
.tier-flag i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}

.tiers { list-style: none; }
.tier {
  border-top: 1px solid var(--line);
  padding: clamp(20px, 3vh, 28px) 0;
}
.tier-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px;
}
.tier h3 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 700; letter-spacing: -.03em;
}
.tier-tag {
  padding: 3px 9px; border-radius: 100px;
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.tier-pages {
  display: block; margin-top: 5px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.tier-price { text-align: right; flex: none; }
.tier-price s {
  display: block;
  font-size: clamp(12px, .9vw, 13.5px);
  color: var(--muted);
  text-decoration-thickness: 1px;
}
.tier-price b {
  display: block; margin-top: 2px;
  font-size: clamp(19px, 1.9vw, 27px);
  font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tier > p {
  margin-top: 12px; max-width: 46ch;
  color: var(--muted); font-size: clamp(13.5px, 1vw, 15px);
}
.tier.is-pick .tier-price b { color: var(--accent); }

.tier-foot {
  border-top: 1px solid var(--line);
  padding-top: clamp(18px, 2.6vh, 26px);
  font-size: clamp(13.5px, 1vw, 15px);
}
.tier-foot s { color: var(--muted); text-decoration-thickness: 1px; }
.tier-foot .tier-inc {
  margin-top: 10px;
  font-size: clamp(11.5px, .82vw, 13px);
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 620px) {
  .tier-top { flex-direction: column; gap: 10px; }
  .tier-price { text-align: left; }
}

/* ── marquee strip ──────────────────────────────────── */
.strip {
  background: var(--ink);
  color: var(--paper);
  padding: 20px 0;
  overflow: hidden;
  white-space: nowrap;
}
.strip-track {
  display: flex; gap: 40px;
  animation: slide 26s linear infinite;
  width: max-content;
}
.strip-track span {
  font-size: clamp(15px, 2.1vw, 28px);
  font-weight: 700; letter-spacing: -.02em;
}
.strip-track b { color: var(--accent); margin: 0 14px; font-weight: 400; }
@keyframes slide { to { transform: translateX(calc(-100% / 3 - 40px / 3 * 1)); } }

/* ── CTA ────────────────────────────────────────────── */
.cta {
  position: relative;
  background: radial-gradient(120% 90% at 50% 112%, #7A2408 0%, #1A0D07 48%, var(--ink) 100%);
  color: var(--paper);
  text-align: center;
  padding: clamp(90px, 14vw, 190px) var(--pad) clamp(90px, 13vw, 170px);
  overflow: hidden;
}
.cta > * { position: relative; z-index: 2; }
.cta-title {
  font-size: clamp(46px, 10vw, 150px);
  font-weight: 700; line-height: .94; letter-spacing: -.045em;
}
.cta-sub {
  margin: 26px auto 0; max-width: 44ch;
  opacity: .66; font-size: clamp(14px, 1.15vw, 17px);
}
.btn-light {
  margin-top: 44px;
  border: 1px solid rgba(255,255,255,.28);
  padding: 8px 8px 8px 30px;
  color: var(--paper);
}
.btn-light i { width: 38px; height: 38px; background: var(--accent); color: #fff; }
.btn-light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-light:hover i { transform: translateX(2px); }

/* ── enquiry form ───────────────────────────────────── */
.cform {
  max-width: 560px;
  margin: clamp(30px, 5vh, 52px) auto 0;
  text-align: left;
}
.cform-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cfield { display: block; margin-bottom: 14px; }
.cfield > span {
  display: block;
  margin-bottom: 8px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.cfield input,
.cfield textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
  color: var(--paper);
  font-family: inherit; font-size: 15px; line-height: 1.5;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.cfield textarea { resize: vertical; min-height: 110px; }
.cfield input::placeholder,
.cfield textarea::placeholder { color: rgba(255,255,255,.32); }
.cfield input:focus,
.cfield textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,255,255,.09);
}
.cfield input:user-invalid,
.cfield textarea:user-invalid { border-color: #E2603A; }

/* the honeypot: off-canvas rather than display:none, which some bots skip */
.cform-trap {
  position: absolute;
  left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.cform-send {
  margin-top: 8px;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}
.cform.is-sending .cform-send { opacity: .55; pointer-events: none; }
.cform.is-sent .cform-send { display: none; }

.cform-note {
  min-height: 1.4em;
  margin-top: 16px;
  font-size: 14px;
  color: rgba(255,255,255,.62);
}
.cform.is-sent .cform-note { color: var(--accent-2); font-weight: 600; }
.cform.is-error .cform-note { color: #FF9B7A; }

@media (max-width: 620px) {
  .cform-row { grid-template-columns: 1fr; gap: 0; }
}

/* the ring, echoed one last time */
.cta-ring {
  position: absolute; left: 50%; top: 50%;
  width: min(760px, 118vw); aspect-ratio: 1;
  transform: translate(-50%, -50%) rotateX(74deg);
  border: 1px solid rgba(255,122,60,.22);
  border-radius: 50%;
  z-index: 1;
  animation: spin 34s linear infinite;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotateX(74deg) rotate(360deg); } }
.cta-ring::before, .cta-ring::after {
  content: ""; position: absolute; inset: 9%;
  border: 1px solid rgba(255,122,60,.13);
  border-radius: 50%;
}
.cta-ring::after { inset: 20%; border-color: rgba(255,122,60,.08); }

/* ── footer ─────────────────────────────────────────── */
.foot { background: var(--ink); color: var(--paper); padding: 30px var(--pad); }
.foot-row {
  display: flex; flex-wrap: wrap; gap: 14px 30px;
  justify-content: space-between;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  opacity: .55;
}

/* ══ READING PAGES ══════════════════════════════════════
   The journal has no pinned stage behind it — these pages
   are for reading, so they sit on plain paper and only
   borrow the nav, the footer and the type scale.
   ══════════════════════════════════════════════════════ */
.reading { background: var(--paper); }
.reading .nav { position: sticky; }

.read {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(40px, 8vh, 90px) var(--pad) clamp(70px, 12vh, 130px);
}
.read-head { margin-bottom: clamp(34px, 6vh, 68px); }
.read-title {
  font-size: clamp(38px, 6.5vw, 84px);
  font-weight: 700; line-height: .98; letter-spacing: -.04em;
  margin-top: 6px;
}
.read-title em { font-style: normal; color: var(--accent); }
.read-sub {
  margin-top: 22px; max-width: 52ch;
  color: var(--muted); font-size: clamp(15px, 1.2vw, 18px);
}
.read-empty {
  padding: 60px 0; color: var(--muted);
  border-top: 1px solid var(--line);
}

/* ── listing ────────────────────────────────────────── */
.plist { list-style: none; }
.pitem { border-top: 1px solid var(--line); }
.pitem:last-child { border-bottom: 1px solid var(--line); }
.pitem > a {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(20px, 3vw, 38px);
  align-items: center;
  padding: clamp(22px, 3.4vh, 34px) 0;
  transition: opacity .35s var(--ease);
}
.pitem > a:hover { opacity: .74; }
.pitem-cover {
  width: 100%; aspect-ratio: 3 / 2;
  object-fit: cover; border-radius: 14px;
  background: var(--shell);
}
.pitem-body time {
  font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.pitem-body h2 {
  margin: 10px 0 10px;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 700; line-height: 1.08; letter-spacing: -.035em;
}
.pitem-body p { color: var(--muted); font-size: clamp(14px, 1.05vw, 16px); max-width: 56ch; }
.pitem-more {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 16px;
  font-size: 13.5px; font-weight: 600; color: var(--accent);
}
.pitem-more i { display: grid; place-items: center; }
.pitem-more svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* a post with no cover should not leave a hole in the grid */
.pitem > a:not(:has(.pitem-cover)) { grid-template-columns: 1fr; }

@media (max-width: 700px) {
  .pitem > a { grid-template-columns: 1fr; }
}

/* ── article ────────────────────────────────────────── */
.article-head { margin-bottom: clamp(26px, 4vh, 44px); }
.article-title {
  margin: 8px 0 14px;
  font-size: clamp(32px, 5vw, 62px);
  font-weight: 700; line-height: 1.02; letter-spacing: -.04em;
  max-width: 20ch;
}
.article-date {
  font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.article-cover {
  width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: 18px;
  margin-bottom: clamp(26px, 4vh, 46px);
  background: var(--shell);
}
.article-body { font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.72; }
.article-body p { margin-bottom: 1.2em; max-width: 68ch; }
.article-body p:last-child { margin-bottom: 0; }
.article-foot {
  margin-top: clamp(40px, 7vh, 76px);
  padding-top: clamp(24px, 4vh, 40px);
  border-top: 1px solid var(--line);
}

/* a card whose project has no live link yet */
.pcard-cta.is-quiet { background: var(--shell); color: var(--ink-2); }
.pcard:hover .pcard-cta.is-quiet { background: var(--ink); color: #fff; }

/* ── reveal ─────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].in { opacity: 1; transform: none; }

/* ── responsive ─────────────────────────────────────── */
@media (max-width: 1180px) {
  .hero-facts { display: none; }
  .beat-1 { max-width: min(560px, 56vw); }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-brand span { display: inline; }
  .hero-driver { height: 460vh; }
  .beat-1 { top: auto; bottom: calc(var(--band-h) + 6vh); transform: none; max-width: 68vw; }
  .beat-2, .beat-3 {
    max-width: min(300px, 62vw);
    top: clamp(96px, 15vh, 150px);
  }
  .beat-4 {
    max-width: min(340px, 74vw);
    top: clamp(240px, 50vh, 520px);
  }
  .beat .point-title { font-size: clamp(30px, 8.2vw, 52px); }
  .band { grid-template-columns: 1fr; }
  .band-stats { display: none; }
  .scrollcue { display: none; }

  /* no room to flow around him — the columns go full width and take an
     opaque page with them, covering the stage from the work section on */
  .col {
    width: auto;
    margin: 0;
    padding-inline: var(--pad);
    background: var(--paper);
  }
  /* columns run continuously here, so every one after the first has no top
     padding to hold its heading clear of the fixed nav — without this an
     anchor jump from the nav lands the heading underneath the bar */
  .col + .col { padding-top: 0; scroll-margin-top: 116px; }
  .cta { scroll-margin-top: 28px; }
  /* the deck bleeds to the screen edge instead of a 46vw pocket */
  .ptrack-clip { width: auto; margin-right: calc(var(--pad) * -1); }
}

@media (max-width: 560px) {
  .nav-cta { display: none; }
  .timecode { display: none; }
  .logos { gap: 16px; }
}

/* ── dev capture mode (#dev=…) ──────────────────────── */
html.dev-mode .loader { display: none !important; }
html.dev-mode [data-reveal] { transition: none !important; }
html.dev-mode .strip-track,
html.dev-mode .ptrack,
html.dev-mode .nav-mark,
html.dev-mode .cta-ring,
html.dev-mode .scrollcue i::after { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .strip-track, .ptrack, .cta-ring, .scrollcue i::after { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .pcard { opacity: 1; transform: none; transition: none; }
}