/* ─── Montserrat (variable) ─────────────────────────────── */
@font-face {
  font-family: 'Montserrat';
  src: url('web-assets/fonts/Montserrat-Variable.woff2') format('woff2'),
       url('web-assets/fonts/Montserrat-Variable.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('web-assets/fonts/Montserrat-VariableItalic.woff2') format('woff2'),
       url('web-assets/fonts/Montserrat-VariableItalic.woff') format('woff');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

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

:root {
  --bg:   #000;
  --fg:   #fff;
  --muted: #747474;
  --line:  #2d2d2d;
}

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  line-height: 1.3125;
  cursor: none;
}
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.75; }

/* ─── Page loader ───────────────────────────────────────── */
/* Animated logo preloader → curtain-split reveal into the hero
   (chainzoku.io-style). The MK monogram draws itself while a
   counter climbs 0→100, then two panels slide apart to unveil
   the page behind. */
#loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}
/* Two black panels that split apart on reveal */
.loader-panel {
  position: fixed;
  left: 0;
  right: 0;
  height: 50vh;
  background: var(--bg);
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
}
.loader-panel-top    { top: 0;    transform-origin: top; }
.loader-panel-bottom { bottom: 0; transform-origin: bottom; }
#loader.out .loader-panel-top    { transform: translateY(-100%); }
#loader.out .loader-panel-bottom { transform: translateY(100%); }

/* Centered logo + counter, sitting over the seam */
.loader-content {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
#loader.out .loader-content {
  opacity: 0;
  transform: scale(1.08);
}

/* Abstract kinetic emblem — counter-rotating dashed rings, orbiting dots,
   and a breathing core. Monochrome, on-brand, and built to hold the eye
   while the page loads. The whole emblem scales + spins into view. */
.loader-art {
  width: clamp(150px, 26vw, 280px);
  height: auto;
  overflow: visible;
  animation: art-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.loader-art circle { fill: none; stroke: var(--fg); }

/* the bits that rotate spin around the emblem centre (100,100) */
.ring-spin, .ring-spin-rev, .orbit, .orbit2 {
  transform-box: view-box;
  transform-origin: 100px 100px;
}
.ring-spin     { animation: art-spin 7s   linear infinite; }
.ring-spin-rev { animation: art-spin 4.5s linear infinite reverse; }
.orbit         { animation: art-spin 3.4s linear infinite; }
.orbit2        { animation: art-spin 5.5s linear infinite reverse; }

.loader-art .ring-static { stroke: rgba(255,255,255,0.12); stroke-width: 1; }
.loader-art .ring-dash {
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 110 46 26 46;   /* a few sweeping arcs with gaps */
  opacity: 0.45;
}
.loader-art .ring-dash2 {
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 44 30;
}
.loader-art .orbit-dot { fill: var(--fg); stroke: none; }
.loader-art .core {
  fill: var(--fg);
  stroke: none;
  transform-box: view-box;
  transform-origin: 100px 100px;
  animation: art-pulse 1.7s ease-in-out infinite;
}

@keyframes art-spin { to { transform: rotate(360deg); } }
@keyframes art-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(2.6); opacity: 0.35; }
}
@keyframes art-in {
  from { opacity: 0; transform: scale(0.7) rotate(-35deg); }
  to   { opacity: 1; transform: none; }
}

/* Counter + small label */
.loader-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 300;
}
.loader-count {
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.loader-count-label {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.loader-bar-wrap {
  width: clamp(140px, 22vw, 220px);
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
.loader-bar {
  height: 100%;
  background: var(--fg);
  width: 0%;
  transform-origin: left;
}

/* ─── Full-page scroll-scrub backdrop ───────────────────── */
/* Fixed canvas behind #page playing the 61-frame hallway fly-through
   (reel/assets/seq): main.js maps total page scroll to a frame index,
   so the camera walks the hallway from the top of the page and reaches
   the doors at the footer. The scrim keeps type readable everywhere —
   heavier at the viewport edges, slightly open through the middle. */
.bg-canvas,
.bg-scrim {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* tuned for the high-key daylight frames: difference-blended type
   washes out when the backdrop sits near mid-gray, so the veil holds
   the render below ~0.3 luminance — visible but never competing */
.bg-scrim {
  background:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.68) 28%,
      rgba(0, 0, 0, 0.68) 62%,
      rgba(0, 0, 0, 0.84) 100%);
}

/* ─── Inverted type over the backdrop ───────────────────── */
/* Text blocks difference-blend against the hallway canvas: type flips
   dark over bright render regions and stays white over dark ones.
   Only text-carrying containers blend — never the photos. This needs
   an untransformed ancestor chain (a transform creates a stacking
   context that isolates the blend from the fixed canvas), so main.js
   skips the page-roll bend on pages that have the backdrop. */
.hero, .intro, .marquee-strip, .sec-head, .work-preamble,
.work-row-text, .stats, .cap-partners, .contact, footer {
  mix-blend-mode: difference;
  /* under difference, mid grays null out wherever the backdrop hits the
     same luminance — lift muted inside blended blocks so its difference
     floor stays legible over every frame of the bright daylight render */
  --muted: #d0d0d0;
}
/* the cursor inverts over everything, photos included */
#cursor-dot, #cursor-ring { mix-blend-mode: difference; }

/* ─── Animated grain overlay ────────────────────────────── */
/* Standard technique on Unseen Studio, Locomotive, 14islands */
#grain {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9997;
  opacity: 0.038;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-5%, -10%); }
  20%  { transform: translate(-15%, 5%); }
  30%  { transform: translate(7%, -25%); }
  40%  { transform: translate(-5%, 25%); }
  50%  { transform: translate(-15%, 10%); }
  60%  { transform: translate(15%, 0%); }
  70%  { transform: translate(0%, 15%); }
  80%  { transform: translate(3%, 35%); }
  90%  { transform: translate(-10%, 10%); }
}

/* ─── Custom cursor ─────────────────────────────────────── */
/* Dot + lagging ring — standard on 14islands, Zajno, Lusion */
#cursor-dot, #cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  will-change: transform;
}
#cursor-dot {
  width: 5px; height: 5px;
  background: var(--fg);
  margin-left: -2.5px;
  margin-top: -2.5px;
}
#cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,0.45);
  margin-left: -17px;
  margin-top: -17px;
  transition: transform 0.08s linear, opacity 0.2s, width 0.2s, height 0.2s, margin 0.2s;
}
#cursor-ring.hovered {
  width: 56px; height: 56px;
  margin-left: -28px; margin-top: -28px;
  border-color: rgba(255,255,255,0.7);
}
#cursor-ring.hidden { opacity: 0; }
@media (hover: none) {
  #cursor-dot, #cursor-ring { display: none; }
  html, body { cursor: auto; }
}

/* ─── Marquee strip ─────────────────────────────────────── */
/* Scrolling ticker between sections — common on Unseen, Locomotive */
.marquee-strip {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 13px 0;
  white-space: nowrap;
  user-select: none;
}
.marquee-track {
  display: inline-flex;
  gap: 0;
  animation: marquee-scroll 22s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 28px;
}
.marquee-sep {
  font-size: 8px;
  color: var(--line);
  padding: 0;
  align-self: center;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── Edge roll / looking-glass overlay ─────────────────── */
/* Two fixed bands curl the top & bottom edges of the viewport so the
   page reads like it's wrapping over a cylinder / sitting under a
   curved lens. The page content is never touched — only these
   overlays react to scroll. --i (0..1, set by JS from scroll
   velocity) drives opacity + vertical growth; gradients stay static
   so only compositor-friendly props change per frame. */
.edge-roll {
  position: fixed;
  left: 0;
  right: 0;
  height: clamp(80px, 14vh, 160px);
  pointer-events: none;
  z-index: 95;
  opacity: calc(0.18 + 0.82 * var(--i, 0));
  will-change: opacity, transform;
}
.edge-roll-top {
  top: 0;
  transform-origin: top;
  transform: scaleY(calc(1 + 0.6 * var(--i, 0)));
  background:
    radial-gradient(150% 100% at 50% 0%,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0) 44%),
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.9) 0%,
      rgba(0, 0, 0, 0.4) 36%,
      rgba(0, 0, 0, 0) 100%);
}
.edge-roll-bottom {
  bottom: 0;
  transform-origin: bottom;
  transform: scaleY(calc(1 + 0.6 * var(--i, 0)));
  background:
    radial-gradient(150% 100% at 50% 100%,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0) 44%),
    linear-gradient(to top,
      rgba(0, 0, 0, 0.9) 0%,
      rgba(0, 0, 0, 0.4) 36%,
      rgba(0, 0, 0, 0) 100%);
}

/* ─── Page roll (3D bend on scroll) ─────────────────────── */
/* main.js bends each top-level panel around its own X axis based on its
   distance from the viewport centre, so the page reads like it's rolling
   over a cylinder — flat/facing you at the centre, curling backwards at
   the top and bottom edges. Each panel carries its own perspective() in
   the inline transform, so the effect is consistent at any scroll depth.
   `overflow-x: clip` stops the convex bulge from spawning a horizontal
   scrollbar (clip, unlike hidden, doesn't break the sticky header). */
html { overflow-x: clip; scroll-behavior: smooth; }
.page-panel {
  will-change: transform;
  transform-origin: center center;
}

/* ─── Entrance animations ───────────────────────────────── */
/*
  Replicates the AndAgain skew-in pattern:
  parent has overflow:hidden (.skew-clip) so the child
  (.skew-item) is invisible until the animation starts,
  then slides up into view with a mild skew.
*/
@keyframes skew-in {
  from { transform: translateY(105%) skewY(-4deg); }
  to   { transform: none; }
}
.skew-clip  { overflow: hidden; }
.skew-item  {
  display: block;
  /* backwards (not both): a forwards-filling animation would pin
     transform:none forever and block the inline transforms that the
     magnetic-button / hover effects in main.js write after entry. */
  animation: skew-in 1.4s cubic-bezier(0, 1, 0.2, 1) backwards;
  animation-play-state: paused;
}
.skew-item.running { animation-play-state: running; }

/* ─── Wordmark entry ────────────────────────────────────── */
/* "Studio" sweeps up from below, "North" drops from above */
@keyframes wm-from-below {
  from { transform: translateY(104%); }
  to   { transform: none; }
}
@keyframes wm-from-above {
  from { transform: translateY(-104%); }
  to   { transform: none; }
}
.wm-clip  { overflow: hidden; }
.wm-line  { display: block; }
.wm-up    { animation: wm-from-below 1.5s cubic-bezier(0.5, 0.5, 0, 1) 0.2s both; }
.wm-down  { animation: wm-from-above 1.5s cubic-bezier(0.5, 0.5, 0, 1) 0.45s both; }

/* ─── Sticky nav ────────────────────────────────────────── */
header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 24px;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-tagline { font-size: 13px; color: var(--muted); margin-bottom: 3px; }
.header-name    { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.header-right   { display: flex; align-items: center; gap: 28px; }
.header-nav     { display: flex; align-items: center; gap: 24px; }
.nav-link {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.nav-link:hover { color: var(--fg); opacity: 1; }
.header-clock   { font-size: 13px; color: var(--muted); }
.contact-btn {
  background: transparent;
  border: none;
  color: var(--fg);
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
}

/* ─── Hero ──────────────────────────────────────────────── */
/* Clean editorial canvas — andagain.uk. No decoration competing
   with the type: top meta row, italic tag, giant wordmark at the
   bottom edge, lots of air. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 94vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 24px 60px;
}

/* ── Top meta row — index label / availability ── */
.hero-meta {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* ── Italic label above wordmark ── */
.hero-tag {
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  letter-spacing: 0.12em;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}

/* ── Hero index — numbered site contents, bottom-right ── */
.hero-index {
  position: absolute;
  right: 24px;
  bottom: 64px;
  z-index: 2;
  width: min(250px, 30vw);
  font-size: 13px;
}
.hero-index a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  transition: color 0.25s, padding-left 0.25s;
}
.hero-index a:hover { color: var(--fg); opacity: 1; padding-left: 8px; }
.hero-index .idx-num {
  font-size: 11px;
  color: var(--fg);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.hero-index .idx-arrow { margin-left: auto; }

/* ── Giant wordmark on a plain canvas ── */
.wordmark {
  font-size: clamp(64px, 12.5vw, 200px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.9;
  user-select: none;
  position: relative;
  z-index: 1;
}
.wordmark sup { font-size: 0.16em; vertical-align: super; }
.wm-clip-b { width: 140%; }

/* ─── Intro ─────────────────────────────────────────────── */
.intro {
  padding: 40px 24px 60px;
  /* the marquee strip below draws the dividing rule */
  display: grid;
  grid-template-columns: 10fr 14fr;
}
.intro .skew-clip {
  grid-column: 2;
  padding-left: 20px;
  border-left: 1px solid var(--line);
  position: relative;
}
.intro p {
  font-size: clamp(24px, 3.5vw, 52px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.125;
  user-select: text;
}

/* ─── Section index heads ───────────────────────────────── */
/* One consistent labelling system for every section: numbered
   uppercase micro-label left, annotation right, hairline rules.
   Gives the page the godly.website table-of-contents rhythm. */
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* flush variant: sits directly under an element that already
   draws a bottom rule (e.g. the marquee strip) */
.sec-head--flush { border-top: none; }
.sec-head[id] { scroll-margin-top: 96px; }
.sec-num {
  color: var(--fg);
  font-weight: 700;
  margin-right: 14px;
}
.sec-note { text-align: right; }

/* ─── Work preamble ─────────────────────────────────────── */
.work-preamble {
  display: grid;
  grid-template-columns: 10fr 14fr;
  border-bottom: 1px solid var(--line);
}
.work-preamble-logo {
  padding: 40px 24px 60px;
  border-right: 1px solid var(--line);
}
.preamble-mark {
  font-size: clamp(28px, 4.5vw, 72px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
}
.work-preamble-text {
  padding: 40px 32px 60px;
  position: relative;
}
.work-heading {
  font-size: clamp(24px, 3.2vw, 52px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.125;
  user-select: text;
}

/* ─── Work rows ─────────────────────────────────────────── */
/* Each project: text 10fr | media 14fr — matching AndAgain's 10/14 column split.
   No border-top: the preamble above closes with the dividing rule. */
.work-row {
  display: grid;
  grid-template-columns: 10fr 14fr;
  border-bottom: 1px solid var(--line);
  transition: background 0.25s;
}
.work-row:hover { background: #080808; }
.work-row-text {
  padding: 32px 24px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
  border-right: 1px solid var(--line);
}
.work-row-text h3 {
  font-size: clamp(26px, 3.5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.work-row-text .meta {
  font-size: 14px;
  color: var(--muted);
  margin-top: 10px;
}
.work-row-num {
  font-size: 14px;
  color: var(--muted);
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
}
.view-label { color: var(--fg); }
.work-row-media { padding: 24px; display: flex; align-items: flex-start; }
.work-media-box {
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  transition: opacity 0.3s;
  background: #0d0d0d;
}
.work-media-box img,
.work-media-box video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  /* Grayscale→colour: images rest desaturated, go full colour on row hover */
  filter: grayscale(28%);
  transition: filter 0.5s ease, transform 0.5s ease;
  transform: scale(1.12);
  transform-origin: center center;
}
/* 3D tilt transition on the box itself */
.work-media-box {
  transition: opacity 0.3s, transform 0.15s ease-out;
  transform-style: preserve-3d;
}
.work-row:hover .work-media-box { opacity: 1; }
.work-row:hover .work-media-box img,
.work-row:hover .work-media-box video { filter: grayscale(0%); }

/* Work-list neighbour dim: other rows fade when one is hovered */
.work-list:has(.work-row:hover) .work-row:not(:hover) {
  opacity: 0.35;
  transition: opacity 0.4s ease;
}
.work-row { transition: opacity 0.4s ease, background 0.25s; }

/* ─── Stats strip ───────────────────────────────────────── */
/* No border-top: the last work row above closes with its own rule. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.stat {
  padding: 48px 24px;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: none; }
.stat-num {
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}

/* ─── Capabilities + Partners ───────────────────────────── */
/* No border-top: the studio sec-head above draws the rule. */
.cap-partners {
  display: grid;
  grid-template-columns: 10fr 14fr;
}
.cap-col {
  padding: 60px 24px 80px;
  border-right: 1px solid var(--line);
}
/* micro-labels — small uppercase column headers, one shared voice */
.cap-title, .partners-label, .rail-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.cap-title { margin-bottom: 32px; }
.cap-list {
  list-style: none;
  counter-reset: cap;
}
.cap-list li {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  padding-bottom: 14px;
  counter-increment: cap;
}
.cap-list li .skew-item {
  display: flex;
  align-items: baseline;
  gap: 18px;
}
/* index number in front of each capability, from the CSS counter */
.cap-list li .skew-item::before {
  content: counter(cap, decimal-leading-zero);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.cap-list li span {
  font-size: clamp(18px, 2.5vw, 36px);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.partners-col {
  padding: 60px 32px 80px;
  position: relative;
}
.partners-label { display: block; margin-bottom: 16px; }
.partners-intro {
  font-size: clamp(18px, 2.2vw, 32px);
  font-weight: 300;
  color: var(--muted);
  margin-bottom: 40px;
  line-height: 1.3;
  user-select: text;
}
.partner-list {
  list-style: none;
  columns: 2;
  column-gap: 40px;
}
.partner-list li {
  font-size: clamp(18px, 2.5vw, 36px);
  font-weight: 300;
  letter-spacing: -0.01em;
  padding-top: 14px;
  padding-bottom: 14px;
  border-top: 1px solid var(--line);
  break-inside: avoid;
}
.partner-list li span { display: block; }

/* ─── Contact ───────────────────────────────────────────── */
/* No border-top: the contact sec-head above draws the rule. */
.contact-inner {
  display: grid;
  grid-template-columns: 10fr 14fr;
}
/* left rail — carries the new-business note instead of sitting empty */
.contact-rail {
  padding: 60px 24px 80px;
  border-right: 1px solid var(--line);
}
.rail-label { display: block; margin-bottom: 18px; }
.rail-note {
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.45;
  max-width: 34ch;
}
.contact-body { padding: 60px 32px 80px; }
.contact-heading {
  font-size: clamp(40px, 6vw, 96px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 60px;
}
/* ─── Contact form ──────────────────────────────────────── */
/* Editorial underline fields — no boxes, just hairline rules that
   brighten on focus, matching the site's line system. */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: 720px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.form-field { display: flex; flex-direction: column; }
.form-field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.form-field input,
.form-field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 0 12px;
  font-family: inherit;
  font-size: 17px;
  color: var(--fg);
  transition: border-color 0.3s;
  resize: vertical;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: #6a6a6a; }
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-bottom-color: var(--fg);
}
.form-foot {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.form-submit {
  background: transparent;
  border: 1px solid var(--fg);
  border-radius: 100px;
  color: var(--fg);
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 14px 32px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, opacity 0.25s;
}
.form-submit:hover { background: var(--fg); color: var(--bg); }
.form-submit:disabled { opacity: 0.4; cursor: wait; }
.form-status { font-size: 14px; color: var(--muted); min-height: 1em; }
.form-status.ok    { color: #9fe0a8; }
.form-status.error { color: #e0a89f; }
.contact-alt {
  margin-top: 48px;
  font-size: 14px;
  color: var(--muted);
}
.contact-alt a { color: #c7c7c7; }
.contact-alt a:hover { color: var(--fg); opacity: 1; }
.contact-alt-sep { margin: 0 10px; }

/* ─── Footer ────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 10fr 14fr;
}
.footer-mark {
  padding: 40px 24px;
  border-right: 1px solid var(--line);
}
.footer-sn {
  font-size: clamp(18px, 2.5vw, 40px);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--muted);
  transition: letter-spacing 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s;
  display: inline-block;
  cursor: default;
}
.footer-sn:hover {
  letter-spacing: 0.08em;
  color: var(--fg);
}
.footer-links {
  padding: 40px 32px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 40px;
  align-items: start;
}
.footer-col h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.footer-col ul    { list-style: none; }
.footer-col li    { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.footer-col li a:hover { color: var(--fg); opacity: 1; }
.footer-legal {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}
.footer-legal p { margin-top: 6px; }

/* ─── Scroll progress bar ───────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 10001;
  pointer-events: none;
  transition: transform 0.05s linear;
}

/* ─── Cursor label ──────────────────────────────────────── */
#cursor-label {
  position: fixed;
  top: 0; left: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 5px 10px;
  border-radius: 100px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
}
#cursor-label.visible { opacity: 1; }

/* ─── Image filmstrip ───────────────────────────────────── */
/* Opens with the archive sec-head; the work sec-head below
   draws the closing rule. */
.filmstrip-section {
  padding: 0 0 40px;
}
.filmstrip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  margin-top: 28px;
  padding: 0 24px;
  user-select: none;
  -webkit-overflow-scrolling: touch;
}
.filmstrip::-webkit-scrollbar { display: none; }
.filmstrip:active { cursor: grabbing; }
.filmstrip-item {
  flex-shrink: 0;
  width: 240px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 8px;
  background: #0d0d0d;
}
.filmstrip-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s;
  filter: grayscale(20%);
}
.filmstrip-item:hover img {
  transform: scale(1.06);
  filter: grayscale(0%);
}

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero { min-height: 80vh; }
  .hero-tag { display: none; }
  .hero-index { display: none; }
  .nav-link { display: none; }
  .hero-meta                    { font-size: 11px; }
  .sec-head                     { padding: 14px 16px; font-size: 11px; }
  .intro                        { grid-template-columns: 1fr; }
  .intro .skew-clip             { grid-column: 1; padding-left: 0; border-left: none; }
  .work-preamble                { grid-template-columns: 1fr; }
  .work-preamble-logo           { border-right: none; border-bottom: 1px solid var(--line); }
  .work-row                     { grid-template-columns: 1fr; }
  .work-row-text                { border-right: none; border-bottom: 1px solid var(--line); min-height: auto; padding: 24px 16px 28px; }
  .work-row-text h3             { font-size: clamp(22px, 6vw, 36px); }
  .work-row-media               { padding: 16px; }
  .work-media-box               { aspect-ratio: 4 / 3; }
  .stats                        { grid-template-columns: 1fr; }
  .stat                         { border-right: none; border-bottom: 1px solid var(--line); padding: 32px 16px; }
  .stat:last-child              { border-bottom: none; }
  .cap-partners                 { grid-template-columns: 1fr; }
  .cap-col                      { border-right: none; border-bottom: 1px solid var(--line); }
  .contact-inner                { grid-template-columns: 1fr; }
  .contact-rail                 { border-right: none; border-bottom: 1px solid var(--line); padding: 28px 16px 32px; }
  .form-row                     { grid-template-columns: 1fr; gap: 36px; }
  footer                        { grid-template-columns: 1fr; }
  .footer-mark                  { border-right: none; border-bottom: 1px solid var(--line); }
  .footer-links                 { grid-template-columns: 1fr 1fr; }
  .header-clock-wrap            { display: none; }
  .wm-clip-b                    { width: 100%; }
  .partner-list                 { columns: 1; }
}

/* ─── Reduced motion ────────────────────────────────────── */
/* Honour the OS "reduce motion" setting: collapse animations and
   transitions to near-instant so entrance/skew items still resolve to
   their final visible state, and stop the looping decorative motion
   (grain, marquee, Ken Burns). JS-driven motion is handled in main.js. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  #grain { animation: none; }
  .marquee-track { animation: none; }
}