/* ============================================================
   Design tokens (Tailwind v4 theme)
   ============================================================ */
:root {
  --font-familjen: "Familjen Grotesk", sans-serif;
  --font-neue: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; /* substitute for Neue Haas Display */
  --font-martian: "Martian Mono", monospace;

  --color-black: #272727;
  --color-cream: #e6e4e2;
  --color-grey-light: #9c9c9c;
  --color-grey-line: #434343;
  --color-cream-line: #d8d8d8;
  --color-dark-font: #434343;
  --color-light-font: #d8d8d8;

  --animate-arrowPulse: arrowPulse 1.8s ease-in-out infinite;

  /* one easing family across CSS and GSAP: fast out, long settle tail,
     never any overshoot. Overshoot is what makes motion read as cheap. */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  background: #0c0c0c;
}

body {
  font-family: var(--font-neue);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-light-font);
}

/* Tailwind-v4-browser can't see custom theme colors from here, so map the
   utilities the markup uses */
.text-light-font { color: var(--color-light-font); }
.text-light-font\/50 { color: #d8d8d880; }
.bg-light-font { background-color: var(--color-light-font); }

/* ============================================================
   Layout
   ============================================================ */
.site-container {
  padding-inline: 1.5rem;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .site-container { padding-inline: 2rem; }
}

/* ============================================================
   Typography
   ============================================================ */
h1, .h1 {
  font-family: var(--font-familjen);
  font-size: clamp(3.75rem, 6.614vw, 6.25rem);
  line-height: clamp(3.5rem, 5.952vw, 5.625rem);
  letter-spacing: clamp(-0.06em, -0.055vw, -0.06em);
  font-weight: 400;
}

.title {
  font-family: var(--font-familjen);
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* ============================================================
   Char/word split helpers (BlurTextReveal equivalent)
   ============================================================ */
.split-char,
.split-word {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.split-space { display: inline-block; white-space: pre; }
.split-word-wrap { display: inline-block; white-space: nowrap; }

/* ============================================================
   Scroll indicator, arrowPulse from original keyframes
   ============================================================ */
@keyframes arrowPulse {
  0%  { opacity: 0.3; transform: scaleY(1); }
  100% { opacity: 1;  transform: scaleY(1.2); }
}
.banner-scroll .scroll-arrow {
  animation: arrowPulse 1.8s ease-in-out infinite alternate;
}

/* ============================================================
   WordShiftButton, underline + letters + arrows
   ============================================================ */
.button_wrapper .btn { min-height: 2.5rem; }
.button_wrapper .word { transform: translate(0); }
.button_wrapper .word .text {
  display: inline-block;
  will-change: transform;
  white-space: pre;
}
.button_wrapper .u-left { transform: scaleX(0); transform-origin: left; }
.button_wrapper .arrow-sprite { opacity: 0; }

/* nav pill char-shift */
.nav-pill { text-decoration: none; }
.nav-pill .nav-link { color: #000; }
.nav-link .char {
  display: inline-block;
  will-change: transform, opacity, filter;
  white-space: pre;
}

/* header logo, the Nord lockup:
   bordered box, geometric grotesk mark, gradient divider, spaced label */
.brand-lockup { text-decoration: none; display: inline-block; }
.brand-box {
  --brand-accent-a: #6fb7ff; /* spark blue, same as scene electricity */
  --brand-accent-b: #9f7dff; /* spark violet */
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.4rem 0.95rem 0.45rem;
  border: 1px solid #2f323b; /* same line color as hero info box */
  border-radius: 0.125rem;
  transition: border-color 0.3s ease;
}
.brand-lockup:hover .brand-box { border-color: #4a4e59; }
.brand-mark {
  font-family: var(--font-familjen);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-light-font);
  padding-left: 0.04em; /* optical: balance the tracking overhang on the right */
}
.brand-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(to bottom, var(--brand-accent-a), var(--brand-accent-b));
  opacity: 0.85;
}
.brand-label {
  font-family: var(--font-familjen);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-light-font) 75%, transparent);
  padding-right: 0.05em; /* optical balance for tracking overhang */
}

/* misc */
::selection { background: #d8d8d8; color: #0c0c0c; }

/* while charging the blast, nothing on the page is selectable/draggable */
body.is-holding, body.is-holding * {
  user-select: none !important;
  -webkit-user-drag: none !important;
  cursor: grabbing;
}

/* ============================================================
   Statement, words fade up as you scroll through
   ============================================================ */
.statement-text .split-word { opacity: 0.12; }

/* editorial accents inside big type */
.serif-accent {
  font-family: "Cormorant", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
}
.grad-text {
  background: linear-gradient(100deg, #6fb7ff, #9f7dff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* huge ghost index digits behind sections: depth, not decoration */
.ghost-num {
  position: absolute;
  top: 0;
  right: 0.5rem;
  font-family: var(--font-familjen);
  font-size: clamp(8rem, 22vw, 18rem);
  line-height: 1;
  letter-spacing: -0.06em;
  color: color-mix(in srgb, var(--color-light-font) 5%, transparent);
  pointer-events: none;
  user-select: none;
}

/* marquee: alternating solid / outline for rhythm */
.marquee-outline {
  -webkit-text-stroke: 1px rgba(216, 216, 216, 0.4);
  color: transparent;
}

/* ============================================================
   Services rows
   ============================================================ */
.services-list { border-top: 1px solid #2f323b; }
.service-row {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  align-items: baseline;
  gap: 1.5rem;
  padding: 2rem 0.25rem;
  border-bottom: 1px solid #2f323b;
  cursor: pointer;
  transition: padding-left 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}
.service-row:hover { padding-left: 1.25rem; }
.service-row::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(to right, #6fb7ff, #9f7dff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-row:hover::after { transform: scaleX(1); }
.service-num {
  font-family: var(--font-martian);
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--color-light-font) 45%, transparent);
}
.service-name {
  font-family: var(--font-familjen);
  font-size: clamp(1.75rem, 3.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-tag {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--color-light-font) 55%, transparent);
  text-align: right;
}

/* ============================================================
   Work, pinned horizontal track
   ============================================================ */
/* 3D card stage: real perspective, tilt driven by pointer in JS */
.work-track { position: relative; perspective: 1400px; perspective-origin: 50% 50%; } /* positioned so card.offsetLeft is track-relative */
.work-card {
  position: relative;
  flex: 0 0 auto;
  width: min(72vw, 640px);
  height: min(62vh, 520px);
  border-radius: 0.375rem;
  border: 1px solid #2f323b;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  color: #e6e4e2;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
}
/* lit edge: catches the light when the panel turns toward you */
.work-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(111, 183, 255, 0.55), rgba(159, 125, 255, 0.25), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.work-card:hover::after { opacity: 1; }
/* content floats above the card surface in Z */
.work-card .work-card-body { transform: translateZ(45px); }
.work-card .work-index { transform: translateZ(30px); }
/* moving sheen that tracks the pointer */
.work-card .card-sheen {
  position: absolute;
  inset: -30%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.work-card:hover .card-sheen { opacity: 1; }
.work-card[data-card-theme="a"] { background: linear-gradient(135deg, #101018 0%, #1c2333 55%, #27406b 100%); }
.work-card[data-card-theme="b"] { background: linear-gradient(135deg, #131019 0%, #241c33 55%, #4b2d6b 100%); }
.work-card[data-card-theme="c"] { background: linear-gradient(135deg, #0f1512 0%, #1b2b24 55%, #2c5a44 100%); }
.work-card[data-card-theme="d"] { background: linear-gradient(135deg, #171210 0%, #2f221b 55%, #6b4a2d 100%); }
.work-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 80% 0%, rgba(255, 255, 255, 0.14), transparent 55%);
  pointer-events: none;
}
.work-index {
  position: absolute;
  top: 1.5rem;
  left: 2rem;
  font-family: var(--font-martian);
  font-size: 0.75rem;
  opacity: 0.6;
}
.work-title {
  font-family: var(--font-familjen);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.work-cat {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  opacity: 0.65;
}


/* ============================================================
   Work cards, project anatomy
   The card is now a link carrying a live landing-page composition.
   Media fills the card; the body sits over it on a scrim so the
   type stays readable against any project's color field.
   ============================================================ */
a.work-card { text-decoration: none; }
.work-card .work-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* scrim: bottom-weighted so the composition stays visible up top */
.work-card .work-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 6, 8, 0.92) 0%, rgba(6, 6, 8, 0.55) 32%, transparent 62%);
  pointer-events: none;
  z-index: 4;
}
/* the composition drifts up a little as the card takes centre stage */
.work-card .mk-panel {
  width: 86%;
  transform: perspective(1600px) rotateX(7deg) rotateY(-13deg) translateY(-6%) scale(1.02);
}
.work-card:hover .mk-panel {
  transform: perspective(1600px) rotateX(3deg) rotateY(-6deg) translateY(-9%) scale(1.06);
}

.work-client {
  font-family: var(--font-martian);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--color-light-font) 55%, transparent);
  margin-bottom: 0.7rem;
}
.work-cta {
  display: inline-block;
  margin-top: 1.1rem;
  font-family: var(--font-familjen);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease-soft), transform 0.45s var(--ease-soft);
}
.work-card:hover .work-cta { opacity: 0.9; transform: translateY(0); }

/* closing card: no media, so it needs its own surface */
.work-card.is-open {
  background: linear-gradient(150deg, #101014 0%, #16161c 60%, #1d1d26 100%);
  justify-content: center;
}
.work-card.is-open .work-card-body { transform: none; }
.work-all {
  display: inline-block;
  margin-top: 2rem;
  font-family: var(--font-martian);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--color-light-font) 60%, transparent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.2rem;
}
.work-all:hover { color: var(--color-light-font); }

/* ============================================================
   Stats counters
   ============================================================ */
.stat { display: flex; flex-direction: column; gap: 0.75rem; }
.stat-num {
  font-family: var(--font-familjen);
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.stat-label {
  font-family: var(--font-martian);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.55;
}

/* ============================================================
   Marquee
   ============================================================ */
.marquee-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: marquee 28s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   Footer
   ============================================================ */
.footer-meta {
  font-family: var(--font-martian);
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--color-light-font) 55%, transparent);
}
.footer-link {
  font-family: var(--font-familjen);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-light-font);
  text-decoration: none;
  position: relative;
}
.footer-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ============================================================
   Preloader
   ============================================================ */
html.is-loading { overflow: hidden; }

/* Nothing in this design scrolls sideways. Two things push past the
   viewport and both are deliberate: the [data-arrive] reveal scales
   full-bleed containers to 1.08 before they land, and the fixed 3D /
   hero layers size against innerWidth, which includes the scrollbar.
   Clipping at the root handles both without touching either effect.
   (Previously this only applied under .is-loading, so the page drifted
   sideways the moment the preloader removed itself.) */
html { overflow-x: hidden; }
body { overflow-x: clip; }
.preloader-bar {
  width: 11rem;
  height: 1px;
  background: #2f323b;
  position: relative;
  overflow: visible;
}
.preloader-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #6fb7ff, #9f7dff);
  transform: scaleX(0);
  transform-origin: left;
  box-shadow: 0 0 10px 0 rgba(111, 183, 255, 0.45);
}
.preloader-pct {
  font-family: var(--font-martian);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: color-mix(in srgb, var(--color-light-font) 55%, transparent);
}

/* ============================================================
   Reduced motion: kill decorative movement
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .banner-scroll .scroll-arrow { animation: none; }
  .statement-text .split-word { opacity: 1; }
}

/* ============================================================
   Contact form
   ============================================================ */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.form-field label {
  font-family: var(--font-martian);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--color-light-font) 50%, transparent);
}
.form-field input,
.form-field select,
.form-field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #2f323b;
  padding: 0.6rem 0.1rem 0.85rem;
  font-family: var(--font-familjen);
  font-size: 1.25rem;
  color: var(--color-light-font);
  outline: none;
  border-radius: 0;
  transition: border-color 0.3s ease;
}
.form-field select { appearance: none; cursor: pointer; }
.form-field select option { background: #16161a; color: #d8d8d8; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: #6fb7ff; }
.form-field textarea { resize: vertical; min-height: 7rem; }
.form-error {
  font-family: var(--font-martian);
  font-size: 0.6875rem;
  color: #ff8f8f;
  min-height: 1rem;
}

/* ============================================================
   Inner page hero spacing
   ============================================================ */
.page-hero { padding-top: clamp(8rem, 16vh, 12rem); }

/* ============================================================
   Budget range slider
   ============================================================ */
.budget-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  border: 0;
  padding: 1rem 0;
  background: transparent;
  cursor: pointer;
}
.budget-range::-webkit-slider-runnable-track {
  height: 2px;
  background: #2f323b;
}
.budget-range::-moz-range-track {
  height: 2px;
  background: #2f323b;
}
.budget-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -7px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, #6fb7ff, #9f7dff);
  box-shadow: 0 0 10px 0 rgba(111, 183, 255, 0.5);
}
.budget-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, #6fb7ff, #9f7dff);
  box-shadow: 0 0 10px 0 rgba(111, 183, 255, 0.5);
}

/* ============================================================
   Wire overlay: tethers between the knot and hanging phrases
   ============================================================ */
.wire-canvas {
  position: fixed;
  inset: 0;
  z-index: 2; /* above the 3D scene, under the content */
  pointer-events: none;
}

/* ============================================================
   Menu
   ============================================================ */
.menu-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  z-index: 60;
}
.menu-line {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--color-light-font);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center;
}
.menu-btn:hover .menu-line:first-child { width: 70%; }
.menu-btn.is-open .menu-line:first-child { transform: translateY(3.5px) rotate(45deg); width: 100%; }
.menu-btn.is-open .menu-line:last-child { transform: translateY(-3.5px) rotate(-45deg); }

#menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 55; /* under the fixed header so the button stays clickable */
  background: rgba(12, 12, 12, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: none;
  align-items: center;
}
#menu-overlay.is-open { display: flex; }
.menu-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-inline: clamp(1.5rem, 8vw, 8rem);
  width: 100%;
}
.menu-link {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  text-decoration: none;
  color: var(--color-light-font);
  padding-block: 0.4rem;
  width: fit-content;
}
.menu-num {
  font-family: var(--font-martian);
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--color-light-font) 40%, transparent);
}
.menu-word {
  font-family: var(--font-familjen);
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  transition: color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-link:hover .menu-word {
  transform: translateX(0.35em);
  color: #fff;
}
.menu-link.is-current .menu-word {
  background: linear-gradient(100deg, #6fb7ff, #9f7dff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html.menu-open { overflow: hidden; }

/* ============================================================
   Custom cursor
   ============================================================ */
@media (pointer: fine) {
  /* custom cursor replaces the native one entirely */
  body.has-cursor,
  body.has-cursor * {
    cursor: none !important;
  }
  body.has-cursor input,
  body.has-cursor textarea {
    caret-color: #6fb7ff; /* typing caret stays visible */
  }
  .cursor-dot,
  .cursor-halo {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    border-radius: 50%;
    z-index: 1000;
    translate: -50% -50%;
  }
  .cursor-dot {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #6fb7ff, #9f7dff);
    transition: width 0.25s ease, height 0.25s ease;
    mix-blend-mode: difference;
  }
  .cursor-halo {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(216, 216, 216, 0.35);
    transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease;
  }
  body.cursor-hot .cursor-dot { width: 4px; height: 4px; }
  body.cursor-hot .cursor-halo {
    width: 52px;
    height: 52px;
    border-color: rgba(111, 183, 255, 0.7);
  }
  body.cursor-press .cursor-halo { width: 26px; height: 26px; }
}


/* ============================================================
   Work index gallery
   Rows rather than a grid: each project gets full width, so the
   composition inside is large enough to actually read. The index
   and year sit either side of the title like a ledger entry.
   ============================================================ */
.gallery {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 6.5rem);
}
.gal-item {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.gal-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 0.375rem;
  overflow: hidden;
  background: #101014;
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9);
}
.gal-media .mk-panel {
  width: 84%;
  transform: perspective(1600px) rotateX(6deg) rotateY(-11deg);
  transition: transform 0.75s var(--ease-soft);
}
.gal-meta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 1.5rem;
  margin-top: 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #2f323b;
}
.gal-index,
.gal-year {
  font-family: var(--font-martian);
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--color-light-font) 42%, transparent);
}
.gal-title {
  font-family: var(--font-familjen);
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  margin-top: 0.4rem;
  transition: opacity 0.4s var(--ease-soft);
}
.gal-item:hover .gal-title { opacity: 0.62; }
.gal-services {
  font-family: var(--font-martian);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--color-light-font) 40%, transparent);
  margin-top: 0.9rem;
}
.gal-tail {
  margin-top: clamp(5rem, 10vw, 9rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid #2f323b;
}
.gal-tail h2 {
  font-size: clamp(2.2rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
@media (max-width: 640px) {
  .gal-meta { grid-template-columns: auto 1fr; }
  .gal-year { display: none; }
  .gal-media .mk-panel { width: 92%; }
}

/* ============================================================
   Case study
   ============================================================ */
.cs-hero { padding-top: clamp(9rem, 20vh, 14rem); }
.cs-title {
  font-size: clamp(2.8rem, 8vw, 7rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
}
.cs-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2rem 2.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid #2f323b;
}
.cs-fact-k {
  font-family: var(--font-martian);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--color-light-font) 40%, transparent);
}
.cs-fact-v { margin-top: 0.6rem; font-size: 1.05rem; line-height: 1.4; }

/* the scroll-through: a laptop that scrolls its own page as you
   scroll past it. The frame stays put; the composition moves. */
.cs-stage { position: relative; margin-top: clamp(4rem, 9vw, 8rem); }
.cs-laptop {
  position: relative;
  width: min(100%, 68rem);
  margin-inline: auto;
  aspect-ratio: 16 / 10;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #0a0a0c;
  border: 1px solid #23262e;
  box-shadow: 0 40px 120px -50px rgba(0, 0, 0, 1);
}
.cs-laptop .mk { background: var(--mk-field); }
.cs-laptop .mk-panel {
  width: 100%;
  height: 100%;
  border-radius: 0;
  transform: none;
  box-shadow: none;
}
.cs-laptop .mk-panel::after { display: none; }
/* the page inside scrolls: JS drives --mk-y from scroll progress */
.cs-laptop .mk-page {
  transform: scale(var(--mk-scale, 0.56)) translateY(var(--mk-y, 0px));
  transition: none;
}
.cs-scrub {
  font-family: var(--font-martian);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--color-light-font) 35%, transparent);
  text-align: center;
  margin-top: 1.25rem;
}
.cs-note { max-width: 44rem; }
.cs-note p { color: color-mix(in srgb, var(--color-light-font) 72%, transparent); text-wrap: pretty; }
.cs-quote {
  font-family: var(--font-familjen);
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  max-width: 26em;
  text-wrap: pretty;
}
.cs-quote-by {
  font-family: var(--font-martian);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--color-light-font) 42%, transparent);
  margin-top: 1.5rem;
}
.cs-next {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid #2f323b;
}
.cs-next a {
  font-family: var(--font-familjen);
  font-size: clamp(1.8rem, 4.5vw, 3.4rem);
  letter-spacing: -0.035em;
  line-height: 1;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.4s var(--ease-soft);
}
.cs-next a:hover { opacity: 0.6; }


/* ============================================================
   Process, steps threaded on a line that draws itself.
   The spine is the same idea as the cables in the hero: one
   continuous thread the content hangs from.
   ============================================================ */
.process-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 6rem);
  padding-left: clamp(2.5rem, 6vw, 5rem);
}
.process-list::before,
.process-list::after {
  content: "";
  position: absolute;
  left: clamp(0.6rem, 1.6vw, 1.25rem);
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
}
.process-list::before { background: #2f323b; }
.process-list::after {
  background: linear-gradient(to bottom, #6fb7ff, #9f7dff);
  transform: scaleY(var(--spine, 0));
  transform-origin: top;
  box-shadow: 0 0 12px 0 rgba(111, 183, 255, 0.35);
}
.process-step { position: relative; }
.process-step::before {
  content: "";
  position: absolute;
  left: calc(clamp(0.6rem, 1.6vw, 1.25rem) - clamp(2.5rem, 6vw, 5rem) - 3px);
  top: 0.9rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2f323b;
  transition: background 0.5s var(--ease-soft), box-shadow 0.5s var(--ease-soft);
}
.process-step.is-lit::before {
  background: #d8d8d8;
  box-shadow: 0 0 0 4px rgba(111, 183, 255, 0.14), 0 0 14px 0 rgba(111, 183, 255, 0.65);
}
.process-head { display: flex; align-items: baseline; gap: 1.25rem; flex-wrap: wrap; }
.process-num {
  font-family: var(--font-martian);
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--color-light-font) 45%, transparent);
}
.process-name {
  font-family: var(--font-familjen);
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.process-when {
  font-family: var(--font-martian);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--color-light-font) 40%, transparent);
  border: 1px solid #2f323b;
  border-radius: 999px;
  padding: 0.35rem 0.7rem 0.4rem;
}
.process-body {
  margin-top: 1.1rem;
  max-width: 42rem;
  color: color-mix(in srgb, var(--color-light-font) 72%, transparent);
  text-wrap: pretty;
}
.process-out { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.process-out span {
  font-family: var(--font-martian);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--color-light-font) 55%, transparent);
  border: 1px solid #23262e;
  border-radius: 0.125rem;
  padding: 0.35rem 0.6rem 0.4rem;
}

/* ---------- what every engagement includes ---------- */
.promise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  border-top: 1px solid #2f323b;
  border-left: 1px solid #2f323b;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.promise {
  border-right: 1px solid #2f323b;
  border-bottom: 1px solid #2f323b;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: relative;
  overflow: hidden;
}
.promise::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(to right, #6fb7ff, #9f7dff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease-soft);
}
.promise:hover::after { transform: scaleX(1); }
.promise-k {
  font-family: var(--font-familjen);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.promise-v { font-size: 0.9375rem; color: color-mix(in srgb, var(--color-light-font) 62%, transparent); text-wrap: pretty; }

/* ---------- testimonials ---------- */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.voice {
  border: 1px solid #23262e;
  border-radius: 0.25rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  background: linear-gradient(160deg, #0f0f13 0%, #131318 100%);
}
.voice p {
  font-family: var(--font-familjen);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.voice span {
  font-family: var(--font-martian);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--color-light-font) 42%, transparent);
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid #2f323b; margin-top: clamp(2.5rem, 5vw, 4rem); }
.faq details { border-bottom: 1px solid #2f323b; }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(1.25rem, 2.5vw, 1.9rem) 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  font-family: var(--font-familjen);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  letter-spacing: -0.02em;
  transition: opacity 0.35s var(--ease-soft);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { opacity: 0.65; }
.faq summary::after {
  content: "+";
  font-family: var(--font-martian);
  font-size: 1.1rem;
  opacity: 0.5;
  flex: 0 0 auto;
  transition: transform 0.4s var(--ease-soft);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-a {
  padding-bottom: clamp(1.25rem, 2.5vw, 1.9rem);
  max-width: 46rem;
  color: color-mix(in srgb, var(--color-light-font) 70%, transparent);
  text-wrap: pretty;
}


/* direct email on the contact page */
.contact-mail {
  font-family: var(--font-familjen);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  letter-spacing: -0.02em;
  color: var(--color-light-font);
  text-decoration: none;
  border-bottom: 1px solid #2f323b;
  padding-bottom: 0.2rem;
  transition: border-color 0.4s var(--ease-soft), opacity 0.4s var(--ease-soft);
}
.contact-mail:hover { border-color: var(--color-light-font); opacity: 0.8; }


/* ============================================================
   Mobile pass, the new sections.
   The spine moves closer in, the process cards lose their inset,
   and every mockup panel widens so type inside stays legible.
   ============================================================ */
@media (max-width: 768px) {
  .process-list { padding-left: 2rem; gap: 3rem; }
  .process-list::before,
  .process-list::after { left: 0.35rem; }
  .process-step::before { left: calc(0.35rem - 2rem - 3px); top: 0.65rem; }
  .process-head { gap: 0.85rem; }
  .process-when { order: 3; }

  .promise-grid { grid-template-columns: 1fr; }
  .voice-grid { grid-template-columns: 1fr; }
  .voice { gap: 1.5rem; }

  /* work track: cards fill more of the screen so the composition reads */
  .work-card { width: 78vw !important; }
  .work-card .mk-panel { width: 94%; }

  .gal-media .mk-panel { width: 96%; transform: perspective(1600px) rotateX(4deg) rotateY(-6deg); }
  .gal-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }

  .cs-laptop { border-radius: 0.5rem; }
  .cs-facts { gap: 1.5rem; }
  .cs-next { flex-direction: column; gap: 1rem; }
}

/* the panel tilt is a desktop pleasure; flat reads better on a phone */
@media (max-width: 560px) {
  .mk-panel { transform: perspective(1600px) rotateX(3deg) rotateY(-4deg); }
  .work-card .mk-panel,
  .gal-media .mk-panel { transform: perspective(1600px) rotateX(3deg) rotateY(-4deg); }
}

/* pointer-less devices never get the hover states, so give the
   work rows their affordance permanently */
@media (hover: none) {
  .work-card .work-cta { opacity: 0.85; transform: none; }
  .promise::after { transform: scaleX(1); opacity: 0.35; }
}


/* ============================================================
   Section thresholds, the studio's own transition language.
   Not a bar wipe: a charge runs along the section's leading edge,
   the same current that travels the cables in the hero. Each
   section announces itself with a pulse rather than a curtain.
   ============================================================ */
.section-edge {
  position: relative;
}
.section-edge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(111, 183, 255, 0) 12%,
    #6fb7ff 38%,
    #9f7dff 62%,
    rgba(159, 125, 255, 0) 88%,
    transparent 100%
  );
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
}
.section-edge.is-charged::before {
  animation: edge-charge 1.5s var(--ease-soft) forwards;
}
@keyframes edge-charge {
  0%   { transform: scaleX(0);    opacity: 0; }
  35%  { transform: scaleX(1);    opacity: 1; }
  100% { transform: scaleX(1);    opacity: 0.18; }
}
/* the hairline the charge leaves behind */
.section-edge::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #1c1f26;
  opacity: 0;
  transition: opacity 1.2s var(--ease-soft) 0.5s;
  pointer-events: none;
}
.section-edge.is-charged::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .section-edge.is-charged::before { animation: none; opacity: 0.18; transform: scaleX(1); }
}


/* ============================================================
   Client stories, a carousel, not a wall of cards.
   Client list on the left doubles as the control; the quote holds
   the stage. One story at a time gets the room it needs.
   ============================================================ */
.voices {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) 1fr;
  gap: clamp(2rem, 6vw, 5.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
.voices-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #2f323b;
}
.voices-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid #2f323b;
  text-align: left;
  cursor: pointer;
  padding: 0.9rem 0 0.9rem 1.9rem;
  font-family: var(--font-martian);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-light-font) 38%, transparent);
  transition: color 0.4s var(--ease-soft);
  position: relative;
}
.voices-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: linear-gradient(to right, #6fb7ff, #9f7dff);
  transition: width 0.45s var(--ease-soft);
}
.voices-tab:hover { color: color-mix(in srgb, var(--color-light-font) 70%, transparent); }
.voices-tab.is-on { color: var(--color-light-font); }
.voices-tab::before { left: 12px; }
.voices-tab.is-on::before { width: 0.75rem; }
/* the node, same language as the process spine */
.voices-tab::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #2f323b;
  transition: background 0.45s var(--ease-soft), box-shadow 0.45s var(--ease-soft);
}
.voices-tab.is-on::after {
  background: #d8d8d8;
  box-shadow: 0 0 0 4px rgba(111, 183, 255, 0.13), 0 0 14px 0 rgba(111, 183, 255, 0.6);
}

.voices-stage { position: relative; min-height: 15rem; }
.voice-slide {
  margin: 0;
  position: absolute;
  inset: 0 0 auto;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  pointer-events: none;
  transition: opacity 0.6s var(--ease-soft), transform 0.7s var(--ease-soft), filter 0.6s var(--ease-soft);
}
.voice-slide.is-on {
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
  position: relative;
}
.voice-slide blockquote {
  margin: 0;
  font-family: var(--font-familjen);
  font-size: clamp(1.5rem, 3.4vw, 2.9rem);
  line-height: 1.22;
  letter-spacing: -0.028em;
  max-width: 24em;
  text-wrap: pretty;
}
.voice-slide figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--font-martian);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: color-mix(in srgb, var(--color-light-font) 42%, transparent);
}
.voice-slide figcaption span + span::before {
  content: "\2014";
  margin-right: 0.75rem;
}
.voices-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid #2f323b;
}
.voices-arrow {
  appearance: none;
  background: none;
  border: 0;
  padding: 0 0 0.2rem;
  cursor: pointer;
  font-family: var(--font-martian);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-light-font) 45%, transparent);
  border-bottom: 1px solid #2f323b;
  transition: color 0.4s var(--ease-soft), border-color 0.4s var(--ease-soft);
}
.voices-arrow:hover {
  color: var(--color-light-font);
  border-color: var(--color-light-font);
}
.voices-count {
  font-family: var(--font-martian);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--color-light-font) 35%, transparent);
}
.voices-count b { color: var(--color-light-font); font-weight: 400; }

@media (max-width: 860px) {
  .voices { grid-template-columns: 1fr; gap: 2rem; }
  .voices-list { flex-direction: row; overflow-x: auto; border-top: 0; border-bottom: 1px solid #2f323b; gap: 1.25rem; }
  .voices-tab { border-bottom: 0; white-space: nowrap; padding: 0.6rem 0; }
  .voices-tab::after { display: none; }
  .voices-tab::before { left: 0; }
  .voices-tab.is-on::before { width: 100%; top: auto; bottom: 0; }
  .voice-slide { position: relative; }
  .voice-slide:not(.is-on) { display: none; }
}


/* the carousel sits on the same rule the other sections start from */
.voices { border-top: 1px solid #2f323b; padding-top: clamp(2rem, 4vw, 3rem); }
.voices-list { border-top: 0; }
.voices-nav { justify-content: flex-start; }


/* ============================================================
   Design in motion, the curved ribbon.
   Eight mockups fly in along a bezier arc and settle into a
   scattered grid. Scroll drives the whole thing, so it can be read
   forwards or backwards, and only transforms animate.
   Desktop only: on small screens it becomes a plain stacked grid,
   because an eight-card arc on a phone is a scroll-jacking tax.
   ============================================================ */
.ribbon { position: relative; }
.ribbon-pin {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.ribbon-head {
  position: relative;
  z-index: 3;
  pointer-events: none;
  display: grid;
  gap: 0.2em;
}
.rib-word {
  font-family: var(--font-familjen);
  font-size: clamp(2.6rem, 9vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: color-mix(in srgb, var(--color-light-font) 88%, transparent);
  mix-blend-mode: difference;
}
.rib-word-b { justify-self: end; }
.rib-sub {
  font-family: var(--font-martian);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--color-light-font) 40%, transparent);
  max-width: 22rem;
  margin-top: 1.5rem;
  line-height: 1.9;
}
.ribbon-field {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.rib-card {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(13rem, 20vw, 20rem);
  aspect-ratio: 16 / 10;
  border-radius: 0.3rem;
  overflow: hidden;
  will-change: transform, opacity;
  box-shadow: 0 20px 60px -28px rgba(0, 0, 0, 0.95);
  opacity: 0;
}
.rib-card .mk-panel {
  width: 100%;
  height: 100%;
  border-radius: 0;
  transform: none;
  box-shadow: none;
}
.rib-card .mk-panel::after { display: none; }

@media (max-width: 1023px) {
  .ribbon-pin { min-height: 0; display: block; overflow: visible; }
  .ribbon-field {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 2.5rem;
  }
  .rib-card {
    position: static;
    width: 100%;
    opacity: 1;
    transform: none !important;
  }
  .rib-word-b { justify-self: start; }
}


/* ============================================================
   Rendering budget.
   Each composition is a real page of markup, so a work page can be
   carrying sixteen of them. content-visibility lets the browser skip
   layout and paint for the ones that are off screen; the intrinsic
   sizes match the real boxes, so nothing shifts and nothing looks
   different, the work simply is not done until it is needed.
   ============================================================ */
.gal-media {
  content-visibility: auto;
  contain-intrinsic-size: auto 100% auto 56.25%;
}
.rib-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 20rem auto 12.5rem;
}
.work-card .work-media {
  content-visibility: auto;
  contain-intrinsic-size: auto 100% auto 100%;
}
/* the promise, process and voice blocks are cheap but numerous */
#included,
#voices { contain: layout paint; }

/* compositions never need to be hit-tested; skipping that removes a
   large amount of pointer work on pages with many of them */
.mk { pointer-events: none; }


/* ============================================================
   MOBILE
   The desktop composition assumes a wide viewport, a pointer and a
   machine with headroom. None of that holds on a phone, so the
   layout is restated rather than shrunk: single column, larger type
   relative to the screen, real tap targets, and no effect that
   depends on hover or on pinning.
   ============================================================ */
@media (max-width: 767px) {
  /* --- rhythm: sections were tuned for tall desktop viewports --- */
  section { padding-block: clamp(3.5rem, 12vw, 5rem) !important; }
  .site-container { padding-inline: 1.25rem; }

  /* --- type: clamp minimums were set for desktop, too small here --- */
  .section-h { font-size: clamp(1.9rem, 8.5vw, 2.6rem); line-height: 1.05; }
  .cs-title { font-size: clamp(2.2rem, 11vw, 3.2rem); }
  .statement-text { font-size: clamp(1.6rem, 7.5vw, 2.4rem) !important; line-height: 1.18; }
  .footer-cta-text { font-size: clamp(1.9rem, 9vw, 3rem) !important; }

  /* the ghost numerals are decorative and eat the gutter on a phone */
  .ghost-num { display: none; }

  /* --- tap targets: 44px minimum everywhere --- */
  .footer-link,
  .voices-tab,
  .voices-arrow,
  .mark-hint,
  .work-all,
  .nav-pill { min-height: 44px; display: inline-flex; align-items: center; }
  .faq summary { min-height: 48px; }
  /* a range thumb is the smallest target on the site, and the submit
     button was under the threshold by four pixels */
  input[type="range"] { height: 44px; }
  form button[type="submit"], form .btn { min-height: 48px; }

  /* --- work track: the pinned horizontal run is a desktop idea.
     On a phone it becomes a normal vertical stack. --- */
  #work .work-inner { min-height: 0; padding-block: 2rem; }
  .work-track {
    flex-direction: column;
    padding-left: 0 !important;
    gap: 1.5rem;
    transform: none !important;
  }
  /* no transform lock here: the arc that used to leave stray matrices on
     these cards does not run at this width any more, and the stacked
     entrance needs the transform channel to rise on */
  .work-card {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
  }
  .work-card .work-card-body { transform: none; }
  .work-card .mk-panel { width: 92%; }
  .card-sheen { display: none; }

  /* --- process spine sits tighter --- */
  .process-list { padding-left: 1.6rem; gap: 2.5rem; }
  .process-list::before, .process-list::after { left: 0.25rem; }
  .process-step::before { left: calc(0.25rem - 1.6rem - 3px); top: 0.55rem; }
  .process-name { font-size: clamp(1.5rem, 7vw, 2rem); }

  /* --- case study --- */
  .cs-facts { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .cs-laptop { border-radius: 0.375rem; }
  .cs-quote { font-size: clamp(1.25rem, 6vw, 1.7rem); }

  /* --- gallery --- */
  .gal-media { border-radius: 0.25rem; }
  .gal-title { font-size: clamp(1.5rem, 7.5vw, 2rem); }
  .gal-services { font-size: 0.625rem; }

  /* --- footer: the wordmark is the whole width here --- */
  .footer-mark { font-size: clamp(4.5rem, 30vw, 9rem); }

  /* --- header: at 375px the lockup and the pill together are wider
     than the screen, so the pill used to hang off the right edge.
     Both come down a step; the tap target stays 44px. --- */
  .site-header { padding-block: 1rem; }
  .brand-mark { font-size: 0.9rem; letter-spacing: 0.14em; }
  .brand-label { font-size: 0.5rem; letter-spacing: 0.16em; }
  .nav-pill { font-size: 0.8125rem; padding-inline: 0.875rem; }
  .nav-pill .nav-link { white-space: nowrap; }

  /* Twelve columns with a 2.5rem gutter needs 440px of gutter alone,
     which is wider than the phone: every track collapsed to zero and
     the row overflowed by the whole gap total. There is one column of
     content here, so say that. */
  .banner-text-block { display: flex; flex-direction: column; gap: 1.5rem; }

  /* the hero aside reads as part of the left-aligned column here */
  .hero-aside { justify-content: flex-start; min-width: 0; }
  .hero-aside > * { max-width: none; min-width: 0; }

  /* The worldwide badge is a two-cell row whose intrinsic width is wider
     than a phone: the icon cell alone reserves 6.5rem and the copy cell
     carries a line that does not wrap. Stacked, both cells get the full
     column and nothing has to be squeezed. */
  .hero-badge { flex-direction: column; }
  .hero-badge-icon {
    min-width: 0;
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-right: 0;
    border-bottom: 1px solid #2F323B;
  }
  .hero-badge-copy { align-items: flex-start; padding: 0.875rem 1rem; }

  /* --- inner pages open directly under the fixed header --- */
  /* the blanket section padding above carries !important, so clearing
     the fixed header has to say so too */
  .cs-hero, .page-hero { padding-top: 6.5rem !important; }

  /* --- the scene is background pressure here, not a subject.
     On a wide screen the knot travels through gutter; on a phone
     there is no gutter, so full strength puts it on top of the
     copy. The home page fades it in script after the hero, which
     is where the moment actually lives. --- */
  body[data-scene] #logo-scene { opacity: 0.3; }

  /* --- footer: the wordmark and the bottom row were sharing rows
     and the copyright line landed inside the letters --- */
  /* the wordmark itself is positioned in motion.css, which loads after
     this file, so its mobile placement lives there too */
  .footer-bottom { gap: 1rem; position: relative; z-index: 4; }

  /* --- effects that need a pointer or headroom --- */
  #cursor, .cursor, [data-cursor] { display: none !important; }
  .footer-fog i { filter: blur(22px); }
  /* the wire overlay draws straight across the copy at this width */
  .wire-canvas { display: none !important; }
}

/* very small phones */
@media (max-width: 380px) {
  .site-container { padding-inline: 1rem; }
  .work-card { aspect-ratio: 3 / 4; }
}

/* coarse pointers never get hover, so states that only exist on hover
   have to be visible by default */
@media (hover: none) {
  .gal-item .gal-title { opacity: 1; }
  .voices-arrow { color: color-mix(in srgb, var(--color-light-font) 70%, transparent); }
  .work-cta { opacity: 0.85 !important; transform: none !important; }
}

/* landscape phones: the hero assumes vertical room it does not have */
@media (max-height: 480px) and (orientation: landscape) {
  .page-hero, .cs-hero { padding-top: 6rem; }
  #work .work-inner { min-height: 0; }
}

/* header text link beside the pill */
.nav-text {
  text-decoration: none;
  color: #fff;
  padding: 0.4rem 0.9rem 0.5rem;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
.nav-text:hover { opacity: 1; }

/* inline "copy the address" button: reads as a link, acts as a button */
.copy-mail {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer;
  color: var(--color-light-font); border-bottom: 1px solid #4a4e59;
  transition: border-color 0.3s;
}
.copy-mail:hover { border-color: var(--color-light-font); }
.copy-note { font-family: var(--font-martian); font-size: 0.6875rem; letter-spacing: 0.08em; color: #6fb7ff; }