/* ==========================================================================
   outdere — design studio
   01. tokens (dark + light)
   02. reset & base
   03. typography primitives
   04. layout primitives
   05. chrome (nav, theme toggle, burger, cursor)
   06. mobile menu
   07. hero + canvas
   08. clients marquee
   09. disciplines
   10. work grid
   11. contact block + footer
   12. contact modal + form
   13. motion / reveal
   14. responsive
   15. about page
   ========================================================================== */

/* ---------- 01. tokens -------------------------------------------------- */

/* The dark build. Its sibling in ../site-light/ is not this file inverted —
   it has its own ground, ink, accent and rhythm, because a straight
   inversion is exactly what makes a light theme look washed out. */

:root {
  --bg:            #0B0C0E;
  --bg-raise:      #131519;   /* sections that lift off the ground */
  --bg-raise-2:    #1A1D22;   /* cards */
  --bg-sunken:     #08090A;

  --ink:           #F2F2F0;
  --ink-soft:      #B4B7BC;
  --ink-mute:      #83878E;
  --ink-faint:     #4A4E55;

  --line:          rgba(255, 255, 255, 0.10);
  --line-strong:   rgba(255, 255, 255, 0.22);

  --accent:        #35E0D4;
  --accent-ink:    #35E0D4;   /* accent where it carries text */
  --accent-glow:   rgba(53, 224, 212, 0.34);
  --accent-wash:   rgba(53, 224, 212, 0.06);
  --on-accent:     #04201D;

  --shadow-card:   0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lift:   0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-modal:  0 40px 120px rgba(0, 0, 0, 0.7);
  --scrim:         rgba(4, 5, 6, 0.72);

  --grain-op:      0.030;
  --grain-blend:   overlay;

  --canvas-dust:   #D6DCE4;   /* the constellation's ordinary points */

  color-scheme: dark;
}


:root {
  /* type */
  --font-display: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* fluid type scale — the display cap is deliberately conservative so the
     headline never runs past the viewport at 150% browser zoom */
  --t-display: clamp(2.3rem, 6.4vw, 6.4rem);
  --t-h2:      clamp(2rem, 4.6vw, 4rem);
  --t-h3:      clamp(1.3rem, 1.9vw, 1.7rem);
  --t-lead:    clamp(1rem, 1.35vw, 1.24rem);
  --t-body:    clamp(0.94rem, 1.02vw, 1.02rem);
  --t-label:   clamp(0.62rem, 0.76vw, 0.72rem);

  /* rhythm */
  --gutter:    clamp(20px, 4.4vw, 72px);
  --section-y: clamp(80px, 11vw, 172px);
  --maxw:      1560px;
  --nav-h:     clamp(62px, 7vw, 84px);
  --radius:    14px;
  --radius-sm: 10px;

  /* motion */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur:       0.62s;
}

/* ---------- 02. reset & base -------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
}

body.is-locked {
  overflow: hidden;
  position: fixed;
  inset-inline: 0;
  width: 100%;
}

img, svg, canvas, video { display: block; max-width: 100%; }

/* an author `display` outranks the UA rule for [hidden], so anything with a
   display of its own keeps rendering — and a "closed" overlay goes on eating
   clicks meant for the page underneath. One rule settles it for every one. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input, select, textarea { font: inherit; color: inherit; }

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 500;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.skip:focus { left: 12px; top: 12px; }

/* a fine film of grain — kills banding in the big gradients. Fixed and
   exactly viewport-sized: an oversized blended layer over a long page is a
   real compositing cost, and the tile repeats anyway. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--grain-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: var(--grain-blend);
}

/* ---------- 03. typography primitives ----------------------------------- */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

p { margin: 0; }

.display {
  font-size: var(--t-display);
  font-weight: 600;
  line-height: 0.88;
  letter-spacing: -0.052em;
  text-transform: lowercase;
}

.h2 {
  font-size: var(--t-h2);
  line-height: 0.98;
  letter-spacing: -0.046em;
  text-transform: lowercase;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.52;
  color: var(--ink-soft);
  letter-spacing: -0.012em;
  max-width: 46ch;
}

.label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-mute);
}

.label--accent { color: var(--accent-ink); }
.accent { color: var(--accent-ink); }

.idx {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  transition: color var(--dur) var(--ease);
}

/* ---------- 04. layout primitives --------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  z-index: 2;
  padding-block: var(--section-y);
}

.rule { border-top: 1px solid var(--line); }

.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: start;
  margin-bottom: clamp(40px, 6vw, 92px);
}

.sec-head__aside {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 0.5em;
}

.sec-head__body {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 28px);
}

/* ---------- 05. chrome --------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background 0.45s var(--ease), backdrop-filter 0.45s var(--ease),
              border-color 0.45s var(--ease);
}

.nav.is-stuck {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom-color: var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);
  height: var(--nav-h);
}

.wordmark {
  display: inline-flex;
  align-items: flex-start;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.12rem, 1.5vw, 1.38rem);
  letter-spacing: -0.055em;
  line-height: 1;
  text-transform: lowercase;
  color: var(--ink);
  flex: none;
}

.wordmark sup {
  font-family: var(--font-mono);
  font-size: 0.42em;
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 0.28em;
  top: 0.1em;
  color: var(--accent-ink);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 40px);
  margin-inline: auto;
}

.nav__link {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  padding-block: 4px;
  transition: color 0.35s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}

.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__actions {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  flex: none;
}

/* --- buttons --- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 21px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease),
              transform 0.5s var(--ease), box-shadow 0.4s var(--ease);
}

.btn--lg { padding: 15px 27px; }
.btn--block { width: 100%; }

/* the fill sweeps up from the bottom edge */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
}

.btn:hover::before { transform: translateY(0); }

.btn--ghost {
  border: 1px solid var(--line-strong);
  color: var(--ink);
}

.btn--ghost:hover { color: var(--on-accent); border-color: var(--accent); }

.btn--solid {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 0 0 var(--accent-glow);
}

.btn--solid::before { background: var(--ink); }
.btn--solid:hover { color: var(--bg); box-shadow: 0 8px 30px var(--accent-glow); }

.btn[disabled] { opacity: 0.5; pointer-events: none; }

.btn__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* --- burger (mobile only) --- */

.burger {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 100px;
  position: relative;
  flex: none;
}

.burger span {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}

.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }

.burger.is-open span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* --- custom cursor --- */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 400;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease), width 0.4s var(--ease),
              height 0.4s var(--ease), margin 0.4s var(--ease),
              background 0.4s var(--ease), border-color 0.4s var(--ease);
  will-change: transform;
}

.cursor.is-on { opacity: 1; }

.cursor.is-hot {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  background: var(--accent-wash);
  border-color: var(--accent);
}

@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* ---------- 06. mobile menu ---------------------------------------------- */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--bg);
  padding: calc(var(--nav-h) + 24px) var(--gutter) calc(24px + env(safe-area-inset-bottom));
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  overflow-y: auto;
}

.mobile-menu.is-open { opacity: 1; }

.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  gap: 4px;
}

.mobile-menu__link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: clamp(14px, 3.4vw, 22px);
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.7rem, 8vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  text-transform: lowercase;
  color: var(--ink);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease),
              color 0.3s var(--ease);
}

.mobile-menu.is-open .mobile-menu__link { opacity: 1; transform: none; }
.mobile-menu.is-open .mobile-menu__link:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(2) { transition-delay: 0.11s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(3) { transition-delay: 0.17s; }

.mobile-menu__link .idx { font-size: 0.66rem; color: var(--ink-faint); }
.mobile-menu__link:active { color: var(--accent-ink); }

.mobile-menu__foot {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  opacity: 0;
  transition: opacity 0.5s var(--ease) 0.24s;
}

.mobile-menu.is-open .mobile-menu__foot { opacity: 1; }

/* ---------- 07. hero ----------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* clearance below the fixed nav so the headline never crowds the wordmark */
  padding-top: calc(var(--nav-h) + clamp(40px, 8vh, 96px));
  padding-bottom: clamp(24px, 4vw, 48px);
  overflow: hidden;
  isolation: isolate;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(56% 60% at 68% 42%, var(--accent-wash), transparent 70%),
    radial-gradient(84% 78% at 50% 104%, var(--bg-sunken), transparent 62%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  pointer-events: none;
}

.hero__inner a,
.hero__inner button { pointer-events: auto; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(28px, 4vw, 72px);
}

/* The one line that has to land before anything else: what this place is.
   Sized well above the 12px utility labels, and sitting directly over the
   headline, which is where the eye goes first. */
.hero__kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: clamp(16px, 1.8vw, 24px);
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 1.05vw, 0.95rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s var(--ease) 0.3s, transform 0.8s var(--ease) 0.3s;
}

.hero.is-in .hero__kicker { opacity: 1; transform: none; }

.hero__kicker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
  flex: none;
}

.hero__title { margin-bottom: clamp(24px, 2.8vw, 40px); }

/* The mask that the headline slides up out of. It has to clear the
   descenders or the "g" in "imagines" gets a flat bottom — so the box is
   padded and the next line is pulled back up by the same amount. */
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}

.hero__title .line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease);
}

.hero.is-in .hero__title .line > span { transform: translateY(0); }
.hero.is-in .hero__title .line:nth-child(2) > span { transition-delay: 0.09s; }
.hero.is-in .hero__title .line:nth-child(3) > span { transition-delay: 0.17s; }

.hero__sub {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 44ch;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s var(--ease) 0.42s, transform 0.9s var(--ease) 0.42s;
}

.hero.is-in .hero__sub { opacity: 1; transform: none; }

.hero__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink-mute);
  transition: color 0.4s var(--ease);
}

.legend-item__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  box-shadow: 0 0 0 0 var(--accent-glow);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.legend-item.is-live { color: var(--ink); }
.legend-item.is-live .legend-item__dot {
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-glow);
}

.hero__cta { display: none; align-self: flex-start; }

@media (max-width: 960px) { .hero__cta { display: inline-flex; } }

.hero__meta {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s var(--ease) 0.55s, transform 0.9s var(--ease) 0.55s;
}

.hero.is-in .hero__meta { opacity: 1; transform: none; }

@media (min-width: 960px) { .hero__meta { display: flex; } }

.hero__foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(32px, 5vw, 66px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  opacity: 0;
  transition: opacity 0.9s var(--ease) 0.7s;
}

.hero.is-in .hero__foot { opacity: 1; }

.scroll-cue { display: inline-flex; align-items: center; gap: 12px; }

.scroll-cue__rail {
  position: relative;
  width: 54px;
  height: 1px;
  background: var(--ink-faint);
  overflow: hidden;
}

.scroll-cue__rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-100%);
  animation: rail 2.6s var(--ease-io) infinite;
}

@keyframes rail {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* The card that follows a hovered star. It used to name the discipline;
   it now previews an actual project, because "here is work" beats "here is
   a category" in the two seconds a visitor gives a homepage. */
.star-tip {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 250px;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-raise) 96%, transparent);
  box-shadow: var(--shadow-lift);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -108%) scale(0.96);
  transform-origin: 50% 100%;
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}

.star-tip.is-on { opacity: 1; transform: translate(-50%, -118%) scale(1); }

/* a star near the top of the hero would push its card up under the fixed
   nav, so the card flips and hangs below the star instead */
.star-tip--below { transform: translate(-50%, 8%) scale(0.96); transform-origin: 50% 0; }
.star-tip--below.is-on { transform: translate(-50%, 18%) scale(1); }

.star-tip__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 7px;
  overflow: hidden;
  background:
    radial-gradient(46% 58% at 24% 24%, var(--accent-glow), transparent 62%),
    radial-gradient(52% 52% at 78% 74%, rgba(96, 118, 190, 0.22), transparent 66%),
    linear-gradient(152deg, var(--bg-raise-2), var(--bg-sunken) 78%);
}

/* the hairline plate stands in until a real still is dropped in */
.star-tip__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(72% 72% at 50% 50%, #000, transparent 84%);
          mask-image: radial-gradient(72% 72% at 50% 50%, #000, transparent 84%);
}

.star-tip__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.star-tip__media:has(img:not([hidden]))::after { display: none; }

.star-tip__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 5px 4px;
}

.star-tip__k {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.star-tip__t {
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: -0.028em;
  color: var(--ink);
}

.star-tip__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* a card is too much furniture on a phone, where there is no hover anyway —
   tapping a star just takes you to the project */
@media (hover: none), (pointer: coarse) {
  .star-tip { display: none; }
}

/* ---------- 08. clients marquee ------------------------------------------ */

.clients {
  position: relative;
  z-index: 2;
  padding-block: clamp(22px, 2.8vw, 34px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-raise);
  overflow: hidden;
}

/* The label sits beside the strip rather than centred above it. Centred, it
   left a band of dead space that made the whole section read top-heavy. */
.clients__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(22px, 3.5vw, 54px);
  /* No max-width here on purpose. The label still lines up with the site's
     content column, but the strip runs all the way to the real viewport edge
     so it can fade out into nothing instead of stopping at a container. */
  padding-left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
}

.clients__label {
  margin: 0;
  white-space: nowrap;
  line-height: 1.5;
  border-left: 1px solid var(--line);
  padding-left: clamp(14px, 1.6vw, 20px);
}

.marquee {
  position: relative;
  display: flex;
  width: 100%;
  overflow: hidden;
  /* Soft at both ends. The left fade is short — it only has to soften the
     hand-off from the label — while the right runs long, so a logo dissolves
     rather than getting sliced by the viewport edge. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 72%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 72%, transparent 100%);
}

/* One element moves, not each track. Animating every track separately meant
   a clone added later started its own animation from zero while the original
   had been running since page load — they drifted apart, and the drift is
   what opened that wide hole in the middle of the strip. */
.marquee__row {
  display: flex;
  flex: none;
  align-items: center;
  min-width: max-content;
  animation: marquee var(--marquee-dur, 40s) linear infinite;
  will-change: transform;
}

.marquee:hover .marquee__row { animation-play-state: paused; }

/* --marquee-shift is one track's measured width, so the row lands exactly
   where it started with the next copy in place. */
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--marquee-shift, 100%)), 0, 0); }
}

.marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  min-width: max-content;
}

/* Each logo sits in a slot of identical width rather than being separated by
   a fixed gap. With artwork ranging from a 29px roundel to a 168px wordmark,
   an even gap gives a visibly uneven rhythm — even slots give an even one,
   and every mark ends up optically centred. */
.marquee__item {
  flex: 0 0 auto;
  width: clamp(148px, 13.5vw, 210px);
  height: clamp(34px, 3.2vw, 46px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.marquee__item img {
  max-height: 62%;
  max-width: 78%;
  width: auto;
  height: auto;
  opacity: 0.45;
  filter: grayscale(1);
  transition: opacity 0.45s var(--ease), filter 0.45s var(--ease);
}

.marquee:hover .marquee__item img { opacity: 0.26; }
.marquee__item:hover img { opacity: 1; }

.marquee__item--tall img { max-height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .marquee__row { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ---------- 09. disciplines ---------------------------------------------- */

.disciplines__list { border-top: 1px solid var(--line); }

.discipline {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 2.7fr) minmax(0, 1.9fr);
  align-items: start;
  gap: clamp(18px, 3vw, 56px);
  padding-block: clamp(26px, 3.4vw, 50px);
  padding-inline: clamp(0px, 1.4vw, 20px);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-sm);
  isolation: isolate;
}

.discipline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--accent-wash), transparent 62%);
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}

.discipline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease);
}

.discipline:hover::before { opacity: 1; }
.discipline:hover::after  { transform: scaleX(1); }
.discipline:hover .idx    { color: var(--accent-ink); }
.discipline:hover .discipline__title { transform: translateX(10px); }

.discipline__title {
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-transform: lowercase;
  transition: transform 0.6s var(--ease);
}

.discipline__body {
  color: var(--ink-soft);
  font-size: var(--t-body);
  line-height: 1.62;
  max-width: 52ch;
}

.discipline__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
  align-items: flex-start;
  max-width: 340px;
  margin-left: auto;
}

.tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 5px 11px;
  white-space: nowrap;
  transition: border-color 0.45s var(--ease), color 0.45s var(--ease);
}

.discipline:hover .tag { border-color: var(--line-strong); color: var(--ink-soft); }

/* ---------- 10. work grid ------------------------------------------------ */

.work__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.work__filters-label { margin-right: 8px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--bg-raise);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease),
              background 0.35s var(--ease);
}

.chip:hover { color: var(--ink); border-color: var(--line-strong); }

.chip.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.chip__n {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  padding: 2px 6px;
  border-radius: 100px;
  background: var(--bg-sunken);
  color: var(--ink-mute);
}

.chip.is-on .chip__n {
  background: color-mix(in srgb, var(--bg) 22%, transparent);
  color: var(--bg);
}

.work__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 1.4vw, 22px);
}

/* dimming the siblings of whatever is hovered is what makes the grid tactile */
.work__grid:hover .project { opacity: 0.4; }
.work__grid:hover .project:hover { opacity: 1; }

.project {
  position: relative;
  grid-column: span 6;
  display: block;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.project--wide  { grid-column: span 8; }
.project--slim  { grid-column: span 4; }
.project--full  { grid-column: span 12; }

.project__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-raise-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 3;
  isolation: isolate;
  transition: box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}

.project:hover .project__frame {
  box-shadow: var(--shadow-lift);
  border-color: var(--line-strong);
}

.project--wide .project__frame { aspect-ratio: 16 / 11; }
.project--slim .project__frame { aspect-ratio: 3 / 4; }
.project--full .project__frame { aspect-ratio: 24 / 9; }

/* placeholder visual — replaced the moment an <img> or <video> lands inside */
.project__media {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(42% 55% at 22% 26%, var(--accent-glow), transparent 62%),
    radial-gradient(48% 48% at 78% 72%, rgba(120, 140, 255, 0.16), transparent 64%),
    linear-gradient(150deg, var(--bg-raise-2), var(--bg-sunken) 72%);
  transform: scale(1.02);
  transition: transform 1.05s var(--ease);
}

.project__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(75% 75% at 50% 50%, #000, transparent 82%);
          mask-image: radial-gradient(75% 75% at 50% 50%, #000, transparent 82%);
}

.project__media:has(img)::after,
.project__media:has(video)::after { display: none; }

.project:nth-child(2n) .project__media { filter: hue-rotate(-28deg); }
.project:nth-child(3n) .project__media { filter: hue-rotate(38deg); }
.project:nth-child(5n) .project__media { filter: hue-rotate(-64deg) saturate(0.85); }

.project__media img,
.project__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project:hover .project__media { transform: scale(1.06); }

.project__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(6, 7, 8, 0.82) 100%);
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}

.project:hover .project__frame::after { opacity: 1; }

.project__tagline {
  position: absolute;
  z-index: 2;
  left: clamp(16px, 1.6vw, 26px);
  right: clamp(16px, 1.6vw, 26px);
  bottom: clamp(16px, 1.6vw, 24px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease), transform 0.55s var(--ease);
}

.project:hover .project__tagline { opacity: 1; transform: none; }

/* this copy sits on the dark scrim over the artwork, not on the page, so it
   stays light in both themes */
.project__brief {
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
  max-width: 34ch;
}

.project__view {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #35E0D4;
  flex: none;
}

.project__cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
}

.project__name {
  font-size: clamp(0.96rem, 1.1vw, 1.1rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  text-transform: lowercase;
  transition: color 0.4s var(--ease);
}

.project:hover .project__name { color: var(--accent-ink); }

.project__disc {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: right;
  flex: none;
}

/* When a star sends you here, the project it pointed at announces itself —
   otherwise you land in a grid with no idea which one you asked for. */
.project.is-cued .project__frame {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-lift);
}

.project.is-cued .project__name { color: var(--accent-ink); }

@media (prefers-reduced-motion: no-preference) {
  .project.is-cued .project__frame { animation: cue 1.9s var(--ease); }
  @keyframes cue {
    0%, 100% { box-shadow: 0 0 0 1px var(--accent), var(--shadow-lift); }
    50%      { box-shadow: 0 0 0 5px var(--accent-wash), var(--shadow-lift); }
  }
}

.work__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: clamp(32px, 4vw, 60px);
  padding-top: clamp(22px, 2.6vw, 34px);
  border-top: 1px solid var(--line);
}

/* ---------- 11. contact block + footer ----------------------------------- */

.contact {
  position: relative;
  z-index: 2;
  padding-block: clamp(88px, 12vw, 190px) clamp(44px, 6vw, 76px);
  border-top: 1px solid var(--line);
  overflow: hidden;
}

.contact::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -46%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--accent-wash), transparent 62%);
  pointer-events: none;
}

.contact__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(20px, 2.8vw, 36px);
}

.contact__title {
  font-size: clamp(2.4rem, 7.4vw, 6.6rem);
  line-height: 0.9;
  letter-spacing: -0.054em;
  text-transform: lowercase;
}

.contact__lead { text-align: center; max-width: 52ch; }

.contact__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.footer {
  position: relative;
  z-index: 2;
  padding-block: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--line);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
}

.footer__set {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
}

.footer__link {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color 0.4s var(--ease);
}

.footer__link:hover { color: var(--accent-ink); }

/* ---------- 12. contact modal + form ------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
}

.modal__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.modal.is-open .modal__scrim { opacity: 1; }

/* The native bar sat on the panel's rounded edge and broke the corner.
   Thin, inset, and painted from the theme so it reads as part of the panel. */
.modal__panel {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-gutter: stable;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  max-height: min(92svh, 900px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(26px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: clamp(14px, 2vw, 22px);
  background: var(--bg-raise);
  box-shadow: var(--shadow-modal);
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  transition: opacity 0.45s var(--ease), transform 0.5s var(--ease);
}

.modal.is-open .modal__panel { opacity: 1; transform: none; }

.modal__panel::-webkit-scrollbar { width: 10px; }
.modal__panel::-webkit-scrollbar-track { background: transparent; }

.modal__panel::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 100px;
  /* a transparent border clipped to the padding box insets the thumb, so it
     floats clear of the panel edge instead of sitting on the corner */
  border: 3px solid transparent;
  background-clip: padding-box;
}

.modal__panel::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); background-clip: padding-box; }

.modal__close {
  position: absolute;
  top: clamp(14px, 2vw, 22px);
  right: clamp(14px, 2vw, 22px);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
              transform 0.4s var(--ease);
}

.modal__close:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  transform: rotate(90deg);
}

.modal__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: clamp(24px, 3vw, 34px);
  padding-right: 44px;
}

.modal__title {
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  line-height: 0.98;
  letter-spacing: -0.048em;
  text-transform: lowercase;
}

.modal__intro {
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* --- form --- */

.form { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 22px); }

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.field__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  padding: 0;
}

.field__label span { color: var(--accent-ink); }

.field__input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font-size: 0.96rem;
  letter-spacing: -0.012em;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
  appearance: none;
}

.field__input::placeholder { color: var(--ink-faint); }
.field__input:hover { border-color: var(--line-strong); }

.field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.field__input--area { resize: vertical; min-height: 108px; line-height: 1.55; }

.field__select { position: relative; }

.field__caret {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--ink-mute);
  font-size: 0.8rem;
}

.field__error {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: #FF6B6B;
}

.field__error:empty { display: none; }

.field.has-error .field__input { border-color: #FF6B6B; }

.chip-set { display: flex; flex-wrap: wrap; gap: 8px; }

.chip--check {
  position: relative;
  cursor: pointer;
  user-select: none;
  padding: 10px 16px;
  background: var(--bg);
}

.chip--check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.chip--check:hover { border-color: var(--line-strong); color: var(--ink); }

.chip--check:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.chip--check:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.form__note {
  font-size: 0.78rem;
  color: var(--ink-mute);
  max-width: 34ch;
}

.form__status {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--ink-soft);
}

.form__status:empty { display: none; }
.form__status.is-bad { color: #FF6B6B; }

.modal__done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-block: clamp(16px, 3vw, 32px);
}

.modal__done-mark { color: var(--accent-ink); }

.modal__done-title {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  letter-spacing: -0.045em;
  text-transform: lowercase;
}

/* ---------- 13. motion / reveal ------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.95s var(--ease), transform 0.95s var(--ease);
}

.reveal.is-in { opacity: 1; transform: none; }

.reveal-group > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}

.reveal-group.is-in > * { opacity: 1; transform: none; }
.reveal-group.is-in > *:nth-child(1) { transition-delay: 0.02s; }
.reveal-group.is-in > *:nth-child(2) { transition-delay: 0.09s; }
.reveal-group.is-in > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-group.is-in > *:nth-child(4) { transition-delay: 0.23s; }
.reveal-group.is-in > *:nth-child(5) { transition-delay: 0.30s; }
.reveal-group.is-in > *:nth-child(6) { transition-delay: 0.37s; }
.reveal-group.is-in > *:nth-child(7) { transition-delay: 0.44s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-group > *,
  .hero__sub,
  .hero__meta,
  .hero__foot,
  .mobile-menu__link,
  .mobile-menu__foot {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero__title .line > span { transform: none !important; }
  .hero__kicker { opacity: 1 !important; transform: none !important; }
  .scroll-cue__rail::after { animation: none; }
  .grain { display: none; }
  .modal__panel, .modal__scrim { transition: none; }
}

/* ---------- 15. about page ----------------------------------------------- */

/* No canvas here — the constellation is the homepage's signature. This page
   opens on type alone, sized to its content rather than the viewport. */

.page-head {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--nav-h) + clamp(48px, 9vh, 120px));
  padding-bottom: clamp(48px, 7vw, 96px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 30px);
}

.page-head .wrap { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 30px); }

.page-head__title { max-width: 14ch; }
.page-head__lead { max-width: 48ch; }

/* --- founders --- */

.founders,
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.founders { border-top: 1px solid var(--line); }

.founder {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: clamp(16px, 3vw, 44px);
  padding-block: clamp(26px, 3.4vw, 46px);
  border-bottom: 1px solid var(--line);
}

.founder .idx { padding-top: 0.35em; }

.founder__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(10px, 2.4vw, 44px);
  align-items: start;
}

.founder__name {
  font-size: clamp(1.3rem, 2.1vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.038em;
  line-height: 1.05;
}

.founder__disc {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--accent-ink);
  margin-top: 8px;
}

.founder__note {
  color: var(--ink-soft);
  line-height: 1.62;
  max-width: 46ch;
}

@media (max-width: 820px) {
  .founder__body { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 560px) {
  .founder { grid-template-columns: 1fr; gap: 10px; }
}

/* --- process --- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.step {
  background: var(--bg-raise);
  padding: clamp(20px, 2.2vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background 0.45s var(--ease);
}

.step:hover { background: var(--bg-raise-2); }

.step__name {
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  text-transform: lowercase;
}

.step__body { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.58; flex: 1; }

.step__out {
  color: var(--accent-ink);
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* --- the fit --- */

.limits__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}

.limit {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: clamp(20px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.limit--yes { border-color: color-mix(in srgb, var(--accent) 42%, transparent); background: var(--accent-wash); }

.limit ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 12px; }
.limit li { color: var(--ink-soft); font-size: 0.96rem; line-height: 1.55; }
.limit--yes li::marker { color: var(--accent); }

.limits__note { margin-top: clamp(22px, 2.6vw, 34px); max-width: 52ch; }

@media (max-width: 720px) { .limits__grid { grid-template-columns: 1fr; } }

/* ---------- 14. responsive ----------------------------------------------- */

@media (max-width: 1100px) {
  .discipline {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 14px;
  }
  .discipline__body { grid-column: 2; }
  .discipline__tags {
    grid-column: 2;
    justify-content: flex-start;
    max-width: none;
    margin-left: 0;
  }
}

/* the point where the nav loses its inline links */
@media (max-width: 960px) {
  .nav__links { display: none; }
  .burger { display: block; }
  .nav__cta { display: none; }
  .theme-toggle__text { display: none; }
  .theme-toggle { padding: 6px; }
}

@media (max-width: 900px) {
  .sec-head { grid-template-columns: 1fr; gap: 16px; }
  .sec-head__aside { flex-direction: row; align-items: center; gap: 14px; padding-top: 0; }
  .hero__grid { grid-template-columns: 1fr; }

  .project,
  .project--wide,
  .project--slim,
  .project--full { grid-column: span 12; }

  .project__frame,
  .project--wide .project__frame,
  .project--slim .project__frame,
  .project--full .project__frame { aspect-ratio: 4 / 3; }

  /* no hover on touch, so the label and scrim ride visible */
  .project__tagline { opacity: 1; transform: none; }
  .project__frame::after { opacity: 1; }
  .work__grid:hover .project { opacity: 1; }
}

@media (max-width: 720px) {
  .hero { padding-top: calc(var(--nav-h) + 20px); }
  .hero__foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero__hint { display: none; }
  .hero__legend { gap: 8px 16px; }

  .discipline { grid-template-columns: 1fr; padding-inline: 0; }
  .discipline__body,
  .discipline__tags { grid-column: 1; }

  .clients__inner {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-inline: var(--gutter);
  }
  .clients__label {
    border-left: 0;
    padding-left: 0;
    text-align: center;
  }
  .clients__label br { display: none; }
  .marquee {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  }

  .work__filters { gap: 6px; }
  .work__filters-label { width: 100%; margin: 0 0 4px; }
  .chip { padding: 8px 13px; font-size: 0.8rem; }

  .work__more { flex-direction: column; align-items: flex-start; }
  .footer__inner { flex-direction: column; align-items: flex-start; }

  .form__row { grid-template-columns: 1fr; }
  .form__foot { flex-direction: column; align-items: stretch; }
  .form__foot .btn { width: 100%; }

  /* on a phone the modal is a sheet that rises from the bottom edge */
  .modal { padding: 0; align-items: flex-end; }
  .modal__panel {
    max-width: none;
    max-height: 94svh;
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 400px) {
  :root { --t-display: clamp(2.3rem, 12.5vw, 3.4rem); }
  .contact__cta { width: 100%; flex-direction: column; }
  .contact__cta .btn { width: 100%; }
}