/* ==========================================================================
   Fora - kinetic.css
   Home-page-only rebuild of everything BELOW the hero. Loaded after main.css
   and scoped to body.page-home, so it never touches the hero, the shared
   nav/footer defaults, or any other page.

   It deliberately REUSES main.css's locked typography: the same font tokens
   (--font-heading / --font-ui / --font-body) and the same type scale
   (--t-display ... --t-label). Nothing here redefines a font family, a
   weight, or a size token. What it does change is the register: a dark,
   moody, editorial palette and an asymmetrical, high-whitespace layout, with
   the motion itself driven by anime.js in kinetic.js.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Dark editorial palette (scoped). Warm near-black base to sit with the
   brand's warm ink family, a single clay accent carried over from the light
   theme (--color-accent #B8734A), brightened a touch for dark ground.
   -------------------------------------------------------------------------- */
body.page-home {
  --k-bg: #F4F4F4;
  --k-bg-raise: #FFFFFF;
  --k-line: rgba(24, 22, 19, 0.14);
  --k-line-soft: rgba(24, 22, 19, 0.08);
  --k-line-strong: rgba(24, 22, 19, 0.28);
  --k-ink: #191612;
  --k-ink-dim: rgba(25, 22, 18, 0.62);
  --k-ink-faint: rgba(25, 22, 18, 0.40);
  --k-accent: #25272c;
  --k-accent-soft: #25272c;
  --k-glass: rgba(255, 255, 255, 0.55);
  --k-glass-hi: rgba(255, 255, 255, 0.9);

  background: var(--k-bg);
  color: var(--k-ink);
}

/* Keep the light theme's subtle multiply grain (main.css default). Just
   a touch more presence on the flatter F4F4F4 field. */
body.page-home::before {
  opacity: 0.04;
  mix-blend-mode: multiply;
}

/* The rebuilt body scrolls as one continuous dark field. */
.k-main {
  position: relative;
  background: var(--k-bg);
  z-index: 2;
}

/* Ambient light: large, soft, blurred accent blooms placed behind the
   content so the glass surfaces have something to refract and the field
   never reads as flat black. Parallaxed in kinetic.js. */
.k-atmos {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.k-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.7;
  will-change: transform;
}
/* Percentages are of .k-atmos itself (inset: 0 of .k-main), which is also
   the clipping box - so every top value must stay inside 0-100% or the
   bloom is clipped into nothing. An earlier version placed b and c at 128%
   and 250%, i.e. entirely below the clip: both were invisible on every
   viewport. The min() keeps them a real size on narrow phones too. */
.k-glow--a { width: min(46vw, 640px); height: min(46vw, 640px); top: 2%; right: -10%;
  background: radial-gradient(circle, rgba(176, 103, 59, 0.12), transparent 66%); }
.k-glow--b { width: min(40vw, 560px); height: min(40vw, 560px); top: 38%; left: -12%;
  background: radial-gradient(circle, rgba(120, 110, 150, 0.08), transparent 66%); }
.k-glow--c { width: min(52vw, 720px); height: min(52vw, 720px); top: 72%; right: -18%;
  background: radial-gradient(circle, rgba(176, 103, 59, 0.10), transparent 68%); }
@media (max-width: 900px) {
  .k-glow--a, .k-glow--b, .k-glow--c { width: 72vw; height: 72vw; }
}

/* Keep real content above the atmosphere layer. */
.k-section { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Shared section chrome
   -------------------------------------------------------------------------- */
.k-section {
  padding-block: clamp(72px, 9vw, 140px);
}
.k-wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}
/* 12-column bed for asymmetrical placement. */
.k-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  row-gap: clamp(24px, 4vw, 64px);
}

/* Editorial section marker: index numeral + label + hairline that draws in */
.k-marker {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: clamp(28px, 4vw, 56px);
}
.k-marker__index {
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--k-accent);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.k-marker__label {
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--k-ink-faint);
  flex: none;
}
.k-marker__rule {
  flex: 1;
  height: 1px;
  background: var(--k-line);
  transform-origin: left center;
}

/* Oversized ghost numeral, a quiet depth cue behind headers */
.k-ghost {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(24, 22, 19, 0.09);
  font-size: clamp(9rem, 30vw, 26rem);
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* Reusable eyebrow on dark */
.k-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--k-ink-faint);
}

.k-h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--k-ink);
}
.k-h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--k-ink);
}
.k-accent { color: var(--k-accent-soft); }
.k-italic { font-style: italic; }

/* Char/word split primitives shared by the anime.js text reveals. Each
   split unit sits in an inline-block wrapper so transforms don't reflow. */
.k-split .k-char,
.k-split .k-word {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.k-split .k-word { white-space: pre; }

/* Links on dark */
.k-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--k-ink);
  padding-bottom: 3px;
}
.k-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--k-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}
.k-link:hover::after { transform: scaleX(1); }
.k-link .k-arrow {
  color: var(--k-accent);
  transition: transform var(--dur-mid) var(--ease-out);
}
.k-link:hover .k-arrow { transform: translateX(4px); }

/* ==========================================================================
   1. Manifesto
   ========================================================================== */
.k-manifesto {
  min-height: 72svh;
  display: flex;
  align-items: center;
  padding-block: clamp(96px, 12vw, 180px);
}
.k-manifesto__ghost {
  position: absolute;
  top: clamp(-40px, -4vw, -20px);
  right: -2%;
  z-index: 0;
}
.k-manifesto__eyebrow {
  grid-column: 1 / -1;
  margin-bottom: var(--sp-6);
}
.k-manifesto__statement {
  grid-column: 1 / span 10;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2.6rem, 6.4vw, 6.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--k-ink);
  font-variation-settings: 'opsz' 144;
  max-width: 18ch;
}
.k-manifesto__note {
  grid-column: 7 / -1;
  margin-top: clamp(24px, 4vw, 48px);
  max-width: 46ch;
  justify-self: end;
  font-family: var(--font-body);
  font-size: var(--t-body-lg);
  line-height: 1.7;
  color: var(--k-ink-dim);
}
.k-manifesto__note strong { color: var(--k-ink); font-weight: 500; }

/* ==========================================================================
   2. Marquee band (scroll-reactive, kinetic.js drives translateX)
   ========================================================================== */
.k-marquee {
  position: relative;
  z-index: 1;
  padding-block: clamp(28px, 4vw, 56px);
  border-block: 1px solid var(--k-line);
  overflow: hidden;
  white-space: nowrap;
}
.k-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  will-change: transform;
}
.k-marquee__item {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 5rem);
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(24, 22, 19, 0.30);
  text-transform: uppercase;
}
.k-marquee__item--solid {
  color: var(--k-accent-soft);
  -webkit-text-stroke: 0;
}
.k-marquee__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--k-accent);
  flex: none;
}

/* ==========================================================================
   3. Capabilities (services) - editorial service index. Same hairline-row
   language as the project index below and the shared .proj-* system, so
   the whole page reads as one voice.
   ========================================================================== */
.k-cap__head { grid-column: 1 / span 8; }
.k-cap__head .k-h2 { max-width: 16ch; margin-top: var(--sp-4); }
.k-cap__lead {
  grid-column: 9 / -1;
  align-self: end;
  font-size: var(--t-body-lg);
  line-height: 1.7;
  color: var(--k-ink-dim);
  max-width: 34ch;
}

.k-svc {
  grid-column: 1 / -1;
  margin-top: clamp(32px, 4.5vw, 64px);
  counter-reset: ksvc;
  border-top: 1px solid var(--k-line);
}
.k-svc__row {
  counter-increment: ksvc;
  display: grid;
  grid-template-columns: minmax(2.5ch, auto) minmax(0, 5fr) minmax(0, 6fr) auto;
  column-gap: clamp(20px, 4vw, 56px);
  row-gap: var(--sp-2);
  align-items: baseline;
  padding-block: clamp(20px, 2.8vw, 36px);
  border-bottom: 1px solid var(--k-line);
  color: var(--k-ink);
  will-change: transform, opacity;
}
.k-svc__num {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-caption);
  letter-spacing: 0.08em;
  color: var(--k-accent);
  transition: transform 380ms var(--ease-out);
}
.k-svc__num::before { content: counter(ksvc, decimal-leading-zero); }
.k-svc__row:hover .k-svc__num { transform: translateY(-2px); }
.k-svc__name {
  position: relative;
  width: fit-content;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.3vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--k-ink);
  font-variation-settings: 'opsz' 60;
}
.k-svc__name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.1em;
  width: 100%;
  height: 1.5px;
  background: var(--k-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 380ms var(--ease-out);
}
.k-svc__row:hover .k-svc__name::after,
.k-svc__row:focus-visible .k-svc__name::after { transform: scaleX(1); }
.k-svc__desc {
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--k-ink-dim);
  max-width: 46ch;
}
.k-svc__arrow {
  justify-self: end;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--k-ink-faint);
  transition: transform 380ms var(--ease-out), color 380ms var(--ease-out);
}
.k-svc__row:hover .k-svc__arrow { transform: translateX(5px); color: var(--k-accent); }
@media (max-width: 900px) {
  .k-svc__row { grid-template-columns: minmax(2.5ch, auto) 1fr; }
  .k-svc__desc { grid-column: 2; }
  .k-svc__arrow { display: none; }
}

/* ==========================================================================
   4. Selected work - editorial project index (dark-section variant of the
   shared .proj-* system in main.css; kinetic.js staggers the rows in).
   ========================================================================== */
.k-work__head { grid-column: 1 / span 9; }
.k-work__head .k-h2 { margin-top: var(--sp-4); }

.k-proj-index {
  grid-column: 1 / -1;
  counter-reset: kproj;
  margin-top: clamp(32px, 4.5vw, 64px);
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--k-line);
}
.k-proj-row {
  counter-increment: kproj;
  display: grid;
  grid-template-columns: minmax(2.5ch, auto) 1fr auto;
  column-gap: clamp(20px, 4vw, 56px);
  row-gap: var(--sp-3);
  align-items: baseline;
  padding-block: clamp(24px, 3vw, 44px);
  border-bottom: 1px solid var(--k-line);
  color: var(--k-ink);
  will-change: transform, opacity;
}
.k-proj-row__num {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-caption);
  letter-spacing: 0.08em;
  color: var(--k-accent);
  transition: transform 380ms var(--ease-out);
}
.k-proj-row__num::before { content: counter(kproj, decimal-leading-zero); }
.k-proj-row:hover .k-proj-row__num { transform: translateY(-2px); }
.k-proj-row__body { min-width: 0; }
.k-proj-row__name {
  display: inline-block;
  position: relative;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--k-ink);
  font-variation-settings: 'opsz' 90;
}
.k-proj-row__name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.06em;
  width: 100%;
  height: 2px;
  background: var(--k-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 380ms var(--ease-out);
}
.k-proj-row:hover .k-proj-row__name::after,
.k-proj-row:focus-visible .k-proj-row__name::after { transform: scaleX(1); }
.k-proj-row__desc {
  margin-top: var(--sp-3);
  font-size: var(--t-body-lg);
  color: var(--k-ink-dim);
  max-width: 44ch;
}
.k-proj-row__desc strong { color: var(--k-ink); font-weight: 500; }
.k-proj-row__meta {
  grid-column: 3;
  grid-row: 1 / span 20;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
  text-align: right;
}
.k-proj-row__cat {
  font-family: var(--font-ui);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--k-ink-faint);
  white-space: nowrap;
}
.k-proj-row__arrow {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--k-ink-faint);
  transition: transform 380ms var(--ease-out), color 380ms var(--ease-out);
}
.k-proj-row:hover .k-proj-row__arrow { transform: translateX(5px); color: var(--k-accent); }
/* Featured lead row - the live client. */
.k-proj-row--featured .k-proj-row__name { font-size: clamp(2.4rem, 6vw, 4.25rem); }
.k-proj-row__live {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  margin-bottom: var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--k-ink-dim);
}
.k-proj-row__live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--k-accent);
  box-shadow: 0 0 0 3px rgba(176, 103, 59, 0.2);
}
.k-proj-row__stat {
  margin-top: var(--sp-4);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.k-proj-row__stat strong {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -0.02em;
  color: var(--k-accent-soft);
}
.k-proj-row__stat span {
  font-size: var(--t-body);
  color: var(--k-ink-dim);
  max-width: 24ch;
}
.k-work__more { grid-column: 1 / -1; margin-top: clamp(32px, 5vw, 64px); }
@media (max-width: 720px) {
  .k-proj-row {
    grid-template-columns: minmax(2.5ch, auto) 1fr;
    row-gap: var(--sp-2);
  }
  .k-proj-row__meta {
    grid-column: 2;
    grid-row: auto;
    align-self: start;
    align-items: flex-start;
    flex-direction: row;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
  }
  .k-proj-row__arrow { display: none; }
}

/* ==========================================================================
   4b. Cinematic interstitial - full-bleed film band (Video A). Adds warmth
   and depth between the work index and the metrics, without collage clutter.
   Video is attached + played on view by main.js initCinema (reduced-motion
   safe: the poster stands in and the clip never autoplays).
   ========================================================================== */
.k-cinema {
  position: relative;
  margin-top: clamp(56px, 8vw, 128px);
  min-height: min(72vh, 620px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #141019;
  isolation: isolate;
}
.k-cinema__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1200ms var(--ease-out);
}
.k-cinema__video.is-ready { opacity: 1; }
.k-cinema__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(15, 11, 8, 0.82) 0%, rgba(15, 11, 8, 0.35) 42%, rgba(15, 11, 8, 0.1) 72%, rgba(15, 11, 8, 0.28) 100%);
  pointer-events: none;
}
.k-cinema__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: clamp(48px, 8vw, 120px) max(var(--section-padding-x), env(safe-area-inset-left)) clamp(48px, 8vw, 110px) max(var(--section-padding-x), env(safe-area-inset-right));
}
.k-cinema__eyebrow {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(247, 243, 234, 0.62);
}
.k-cinema__line {
  margin-top: var(--sp-4);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2.2rem, 6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #F7F3EA;
  font-variation-settings: 'opsz' 144;
  max-width: 18ch;
}

/* ==========================================================================
   5. Proof - animated metric counters + testimonial
   ========================================================================== */
.k-proof {
  border-top: 1px solid var(--k-line);
}
.k-metrics {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
  margin-bottom: clamp(48px, 7vw, 96px);
}
.k-metric { display: flex; flex-direction: column; gap: var(--sp-3); }
.k-metric__num {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--k-ink);
  font-variant-numeric: tabular-nums;
}
.k-metric__num .k-unit { color: var(--k-accent); }
.k-metric__label {
  font-family: var(--font-ui);
  font-size: var(--t-caption);
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--k-ink-dim);
  max-width: 22ch;
}
.k-quote {
  grid-column: 2 / -2;
  text-align: left;
}
.k-quote__text {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--k-ink);
}
.k-quote__text .k-accent { color: var(--k-accent-soft); }
.k-quote__cite {
  margin-top: var(--sp-6);
  font-family: var(--font-ui);
  font-size: var(--t-caption);
  letter-spacing: 0.06em;
  color: var(--k-ink-faint);
  font-style: normal;
}
.k-quote__cite a { color: var(--k-ink-dim); text-decoration: underline; text-underline-offset: 3px; }
.k-quote__cite a:hover { color: var(--k-accent-soft); }

@media (min-width: 901px) {
  .k-quote { grid-column: 3 / -2; }
}

/* ==========================================================================
   6. Studio (about) + process
   ========================================================================== */
.k-studio__eyebrow { grid-column: 1 / -1; margin-bottom: var(--sp-6); }
.k-studio__statement {
  grid-column: 1 / span 8;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--k-ink);
  font-variation-settings: 'opsz' 120;
  max-width: 18ch;
}
.k-studio__copy {
  grid-column: 8 / -1;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 42ch;
  justify-self: end;
}
.k-studio__copy p {
  font-size: var(--t-body-lg);
  line-height: 1.7;
  color: var(--k-ink-dim);
}
.k-studio__copy a { color: var(--k-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--k-accent); }

.k-process {
  grid-column: 1 / -1;
  margin-top: clamp(48px, 7vw, 112px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 64px);
  border-top: 1px solid var(--k-line);
  padding-top: clamp(40px, 5vw, 72px);
}
.k-step { position: relative; padding-top: var(--sp-5); }
.k-step__rule {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--k-accent);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}
.k-step__num {
  font-family: var(--font-ui);
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--k-accent);
  font-variant-numeric: tabular-nums;
}
.k-step__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--t-h3);
  color: var(--k-ink);
  margin: var(--sp-4) 0 var(--sp-3);
}
.k-step__desc {
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--k-ink-dim);
  max-width: 30ch;
}

/* ==========================================================================
   7. CTA - keeps the ambient video engine (data-ambient), dark & kinetic
   ========================================================================== */
.k-cta { position: relative; z-index: 1; }
.k-cta__inner {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: clamp(56px, 10vw, 140px) clamp(28px, 6vw, 96px);
  text-align: center;
  isolation: isolate;
  background: radial-gradient(120% 140% at 50% 0%, #211b16 0%, #0c0a09 72%);
  /* Local light-on-dark token context: the band is a deliberate dark island
     on the light page, so tokens invert only inside it. */
  --k-ink: #F3EFE9;
  --k-ink-dim: rgba(243, 239, 233, 0.7);
  --k-bg: #141110;
  --k-accent-soft: #DDA981;
  color: var(--k-ink);
}
/* Ambient video layer - identical mounting contract as the hero/old CTA
   (assets/js/ambient.js attaches a <video> into [data-ambient]). */
.k-cta__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.k-cta__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 900ms var(--ease-out);
}
.k-cta__media video.is-ready {
  opacity: 0.28;
  animation: ken-burns 28s var(--ease-in-out) infinite alternate;
}
.k-cta__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(26, 22, 19, 0.55) 0%, rgba(11, 10, 9, 0.86) 100%);
}
.k-cta__eyebrow { margin-bottom: var(--sp-5); color: var(--k-accent-soft); }
.k-cta__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--k-ink);
  font-variation-settings: 'opsz' 144;
  max-width: 18ch;
  margin-inline: auto;
  margin-bottom: clamp(32px, 4vw, 56px);
}
/* Magnetic primary button (kinetic.js nudges it toward the pointer) */
.k-magnetic {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--k-bg);
  background: var(--k-ink);
  padding: 18px 40px;
  border-radius: 999px;
  will-change: transform;
  transition: background-color var(--dur-mid) var(--ease-in-out),
              box-shadow var(--dur-mid) var(--ease-in-out);
}
.k-magnetic:hover {
  background: var(--k-accent-soft);
  box-shadow: 0 20px 60px rgba(203, 127, 78, 0.28);
}
.k-magnetic__label { will-change: transform; }
.k-magnetic .k-arrow { transition: transform var(--dur-mid) var(--ease-out); }
.k-magnetic:hover .k-arrow { transform: translateX(4px); }

/* The shared nav, wayfinding rail, and footer keep their light-theme
   defaults from main.css on the home page - the rebuilt body is light, so
   no overrides are needed here. */

/* ==========================================================================
   9. Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .k-manifesto__statement { grid-column: 1 / -1; }
  .k-manifesto__note { grid-column: 1 / -1; justify-self: start; }
  .k-cap__head, .k-cap__lead { grid-column: 1 / -1; }
  .k-cap__lead { align-self: start; max-width: 46ch; }
  .k-work__head { grid-column: 1 / -1; }
  .k-studio__statement, .k-studio__copy { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 900px) {
  .k-section { padding-block: clamp(64px, 13vw, 104px); }
  .k-manifesto { min-height: 0; padding-block: clamp(80px, 16vw, 120px); }
  .k-cinema { min-height: min(56vh, 480px); }
  .k-metrics { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
  .k-quote { grid-column: 1 / -1; }
  .k-process { grid-template-columns: 1fr; gap: var(--sp-6); }
}

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

/* ==========================================================================
   10. Reduced motion - kinetic.js already no-ops its animations here; this
   guarantees every reveal target is fully visible and untransformed even if
   the initial hidden state was applied before that check.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .k-split .k-char,
  .k-split .k-word { opacity: 1 !important; transform: none !important; filter: none !important; }
  .k-marquee__track { transform: none !important; }
  .k-glow { animation: none !important; }
  .k-step__rule { transform: scaleX(1) !important; }
}