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

:root {
  --content-w: 1140px;
  --pad-x: 40px;
  --pad-y: 140px;
  --text-primary: #fff;
  --text-secondary: rgba(255, 255, 255, 0.55);
  --text-tertiary: rgba(255, 255, 255, 0.3);
}

html, body {
  font-family: 'Inter', 'Helvetica Neue', Arial, 'PingFang SC', sans-serif;
  background: #0a0a0a;
  color: var(--text-primary);
  /* stop iOS/Android font boosting from inflating wide text blocks
     (the ASCII pre fields are much wider than the viewport and get
     auto-enlarged on real phones otherwise) */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The wrapper defines the total scroll distance for the hero animation */
.hero-wrapper {
  position: relative;
  /* 100vh visible + 400vh scrub + 50vh hold on the final frame + 100vh exit
     (zoom-out/fade while the intro rises over it) */
  height: 650vh;
}

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.35) 50%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

.hero-text {
  position: relative;
  width: 100%;
  max-width: 900px;
  padding: 0 32px;
  z-index: 2;
}

.line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1100px;
  padding: 0 32px;
  font-size: clamp(1.8rem, 3.7vw, 3rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  opacity: 0;
  will-change: opacity, transform;
  transition: none;
}

.scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
  z-index: 2;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.6; }
  50% { transform: translate(-50%, 8px); opacity: 0.2; }
}

/* ============================================================
   POST-HERO EDITORIAL SYSTEM
   Everything below the approved hero. Dark, cinematic, architectural.
   Warm-white ink on near-black, blueprint hairlines, mono metadata.
   ============================================================ */

:root {
  /* warm-neutral monochrome */
  --ink: #f1efe9;
  --ink-2: rgba(241, 239, 233, 0.62);
  --ink-3: rgba(241, 239, 233, 0.38);
  --line: rgba(241, 239, 233, 0.12);
  --line-2: rgba(241, 239, 233, 0.22);
  --raise: #101010;
  --accent: #8f93b3;            /* soft indigo — used sparingly */
  --mono: 'Inter', 'Helvetica Neue', Arial, 'PingFang SC', sans-serif;
  --shell-max: 1500px;
  --gutter: clamp(22px, 5vw, 100px);
  /* distance from the viewport's left edge to the shell's content edge —
     matches .shell (centered, max-width, gutter). lets the full-bleed Process
     section align its left panel to the shell-based Work section at any width. */
  --shell-left: max(var(--gutter), calc((100vw - var(--shell-max)) / 2 + var(--gutter)));
  /* shared left-panel sizing for Work (Section 1) and Process (Section 2) */
  --flag-gap: clamp(28px, 3vw, 52px);
  --flag-panel: clamp(200px, 21vw, 280px);
  /* height of the bottom progressive-blur strip; content uses this to clear it */
  --blur-h: clamp(90px, 12vh, 150px);
}

/* ============================================================
   PROGRESSIVE BLUR — fixed strip at the bottom edge of the
   viewport. Stacked layers each blur the backdrop a little more
   and are masked to a band lower down, so the blur ramps up
   smoothly toward the very bottom (Mugen-style).
   ============================================================ */
.scroll-blur {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--blur-h);
  z-index: 30;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
}
/* hidden while the hero fills the screen (toggled from script.js) */
.scroll-blur.hide { opacity: 0; }
.scroll-blur > div {
  position: absolute;
  inset: 0;
}
.scroll-blur > div:nth-child(1) {
  -webkit-backdrop-filter: blur(0.6px); backdrop-filter: blur(0.6px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 14%, transparent 28%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 14%, transparent 28%);
}
.scroll-blur > div:nth-child(2) {
  -webkit-backdrop-filter: blur(1.2px); backdrop-filter: blur(1.2px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 14%, #000 28%, #000 42%, transparent 56%);
  mask-image: linear-gradient(to bottom, transparent 14%, #000 28%, #000 42%, transparent 56%);
}
.scroll-blur > div:nth-child(3) {
  -webkit-backdrop-filter: blur(2.4px); backdrop-filter: blur(2.4px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 28%, #000 42%, #000 56%, transparent 70%);
  mask-image: linear-gradient(to bottom, transparent 28%, #000 42%, #000 56%, transparent 70%);
}
.scroll-blur > div:nth-child(4) {
  -webkit-backdrop-filter: blur(4.8px); backdrop-filter: blur(4.8px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 42%, #000 56%, #000 70%, transparent 84%);
  mask-image: linear-gradient(to bottom, transparent 42%, #000 56%, #000 70%, transparent 84%);
}
.scroll-blur > div:nth-child(5) {
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 56%, #000 70%, #000 84%, transparent 96%);
  mask-image: linear-gradient(to bottom, transparent 56%, #000 70%, #000 84%, transparent 96%);
}
.scroll-blur > div:nth-child(6) {
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 70%, #000 86%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 70%, #000 86%, #000 100%);
}

/* layout shell with faint blueprint side-rails */
.shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

.section {
  padding: clamp(80px, 12vh, 160px) 0;
  border-top: 1px solid var(--line);
}

/* scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- shared type ---- */
.eyebrow {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-2);
  margin-bottom: 36px;
}
.eyebrow .num { color: var(--ink); margin-right: 7px; }
.eyebrow .num::before { content: '['; }
.eyebrow .num::after { content: ']'; }

/* offset section header (Mugen rhythm): label pinned left, content right */
.section-head {
  margin-bottom: clamp(48px, 7vw, 96px);
}

.section-title {
  /* floor sits well above .step-title's 1.3rem so section headings keep a
     clear hierarchy level over card titles on small screens */
  font-size: clamp(2rem, 3.25vw, 2.65rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.section-sub {
  margin-top: 24px; /* renders ~40px gap, matching the intro greeting→body spacing */
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.7;
  color: var(--ink-2);
  max-width: none;
}

/* ---- placeholders (clearly marked "to fill") ---- */
.ph-frame {
  border: 1px dashed var(--line-2);
  border-radius: 2px;
  background:
    repeating-linear-gradient(45deg, transparent 0 11px, rgba(241,239,233,0.018) 11px 12px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph-tag, .ph-chip, .ph-inline {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.ph-tag::before, .ph-chip::before, .ph-inline::before {
  content: 'PLACEHOLDER · ';
  color: var(--accent);
  opacity: 0.7;
}
.ph-chip {
  list-style: none;
  border: 1px dashed var(--line-2);
  border-radius: 999px;
  padding: 7px 14px;
  line-height: 1.3;
}

/* ---- filled media (real image in a framed slot) ---- */
.media {
  overflow: hidden;
  border-radius: 5px;
  background: var(--raise);
}
.media img,
.media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* WebKit won't clip a video to the parent's radius via overflow:hidden — round it directly */
  border-radius: inherit;
}

/* ============================================================
   NAV
   ============================================================ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--gutter);
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-nav.show { opacity: 1; transform: none; pointer-events: auto; }
.nav-mark {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav-mark img { height: 66px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 38px); }
.nav-links a {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.25s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
/* the About Me pill sits apart from the plain text links: solid inverted CTA */
.nav-links a.nav-about {
  color: #101010;
  background: var(--ink);
  font-weight: 600;
  border-radius: 999px;
  padding: 8px 18px;
  margin-left: clamp(2px, 0.8vw, 10px);
  transition: background 0.25s ease, transform 0.25s ease;
}
.nav-links a.nav-about:hover {
  color: #101010;
  background: #ffffff;
  transform: translateY(-1px);
}

/* ============================================================
   02 — POSITIONING INTRO
   ============================================================ */
.intro {
  /* Rises up over the pinned hero as it zooms out + fades, so there's no
     black gap during the hero's scroll-away (matches the Nakula exit). */
  position: relative;
  z-index: 1;
  margin-top: -100vh;
  background: #0a0a0a;
  padding: clamp(96px, 16vh, 200px) 0;
  border-top: 1px solid var(--line);
}
/* editorial offset layout: label pinned left, content shifted right */
.intro-main { max-width: none; }
.intro-greeting {
  font-size: clamp(2.2rem, 3.7vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
  color: var(--ink);
  margin-bottom: 40px;
}
.intro-body {
  display: grid;
  gap: 22px;
  max-width: none;
}
.intro-body p {
  font-size: clamp(0.98rem, 1.3vw, 1.1rem);
  line-height: 1.78;
  color: var(--ink-2);
}

/* ============================================================
   03 — FLAGSHIP PROJECTS (sticky menu + scrolling stream)
   ============================================================ */
.flag-layout {
  display: grid;
  grid-template-columns: var(--flag-panel) minmax(0, 1fr);
  gap: var(--flag-gap);
  align-items: start;
}

/* left: sticky project menu. padding-bottom is inside the clamped border box,
   so the menu text lifts off the section divider instead of sitting flush. */
.flag-nav { position: sticky; top: 110px; padding-bottom: clamp(48px, 9vh, 120px); }
.flag-menu { list-style: none; display: grid; gap: 12px; }
.flag-menu a {
  display: block;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.35s ease;
}
.flag-menu a:hover { color: var(--ink-2); }
.flag-menu a.active { color: var(--ink); }

/* right: scrolling stream, divided from the menu by a vertical hairline.
   the section's bottom padding is moved inside the stream so the divider
   line runs all the way down to the horizontal section rule below. */
.flag-stream {
  display: grid;
  gap: clamp(80px, 13vh, 150px);
  border-left: 1px solid var(--line);
  padding-left: clamp(28px, 4vw, 72px);
  padding-bottom: clamp(120px, 18vh, 220px);
}
.section.flagships { padding-bottom: 0; }
.flag { scroll-margin-top: 110px; }
.flag-media {
  /* fills the right section and bleeds to the right edge of the viewport. */
  aspect-ratio: 2 / 1;
  width: auto;
  margin-right: calc(var(--gutter) * -1);
  margin-bottom: clamp(28px, 3vw, 44px);
}
/* project cover: video + dark mask + centred logo. */
.flag-cover {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  background: #000;
  border: 1px solid var(--line-2);
}
/* video fills the cover frame and scrolls normally with the page. */
.flag-cover-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.flag-cover-tint {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.flag-cover-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(200px, 34%, 420px);
  height: auto;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .flag-cover-bg { top: 0; height: 100%; transform: none !important; }
}
.flag-info {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
}
.flag-name {
  font-size: clamp(1.55rem, 3.4vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.flag-no {
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink-3);
  margin-right: 6px;
}
.flag-byline {
  font-size: 0.42em;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-3);
  vertical-align: middle;
}
.flag-label {
  font-family: 'Inter', 'Helvetica Neue', Arial, 'PingFang SC', sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 16px;
}
.flag-copy {
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-top: 24px;
}
.flag-copy + .flag-copy { color: var(--ink-2); }
.flag-lead .cta { margin-top: 32px; }
.meta-key {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.meta-key.side-gap { margin-top: 34px; }
.meta-val {
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 14px;
}
.scope-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.scope-tags li {
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 8px 13px;
  font-size: 0.82rem;
  line-height: 1;
  color: var(--ink-2);
}
/* client credits — quiet middot-separated line, distinct from the Role chips */
.client-list {
  list-style: none;
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 6px;
}
.client-list li {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.client-list li:not(:last-child)::after {
  content: '\00B7';
  color: var(--ink-3);
  margin-left: 10px;
}
.stats {
  list-style: none;
  margin-top: 6px;
}
.stats.side-gap { margin-top: 34px; }
.stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.stat:last-child { border-bottom: 1px solid var(--line); }
.stat-num {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}
.stat-arrow {
  font-weight: 300;
  color: var(--ink-3);
  margin: 0 1px;
}
.stat-cap {
  font-family: 'Inter', 'Helvetica Neue', Arial, 'PingFang SC', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  line-height: 1.35;
  /* sits opposite the figure, flush right — kept on one line; if the column is
     too narrow for both it drops to its own line rather than wrapping raggedly */
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}
.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  max-width: 320px;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line-2);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: border-color 0.225s ease;
}
.cta:hover { border-color: var(--ink); }

/* ============================================================
   ROLLING LINK BUTTONS — shared mechanics (Mugen-style).
   The label rolls as two stacked copies; the trailing icon
   morphs arrow→plus. Used by .cta and the case-study links.
   ============================================================ */
.rl-clip {
  display: grid;
  overflow: hidden;
}
.rl-line {
  grid-area: 1 / 1; /* stack both copies in one cell */
  white-space: nowrap;
  line-height: 1.4;
  transition: transform 0.225s cubic-bezier(0.76, 0, 0.24, 1);
}
.rl-line:nth-child(2) {
  transform: translateY(100%);
}
a:hover .rl-line:nth-child(1),
a:focus-visible .rl-line:nth-child(1) {
  transform: translateY(-100%);
}
a:hover .rl-line:nth-child(2),
a:focus-visible .rl-line:nth-child(2) {
  transform: translateY(0);
}
/* icon morphs: arrow spins/scales out, plus spins in */
.rl-ico {
  position: relative;
  flex-shrink: 0;
  width: 1.15em;
  height: 1.15em;
  font-size: 0.95em;
}
.rl-ico span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  transition: opacity 0.225s ease,
              transform 0.225s cubic-bezier(0.76, 0, 0.24, 1);
}
.rl-plus {
  opacity: 0;
  transform: rotate(-90deg) scale(0.4);
}
a:hover .rl-arrow,
a:focus-visible .rl-arrow {
  opacity: 0;
  transform: rotate(90deg) scale(0.4);
}
a:hover .rl-plus,
a:focus-visible .rl-plus {
  opacity: 1;
  transform: rotate(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .rl-line,
  .rl-ico span {
    transition: none;
  }
}

/* ============================================================
   04 — APPROACH
   ============================================================ */
/* Pinned horizontal scroll (Nakula "process"): the section sticks to the
   viewport while vertical scroll is translated into sideways card movement.
   JS in script.js sets the pin height and the track's translateX. */
.approach-pin {
  position: relative;
  background: #0a0a0a;
  border-top: 1px solid var(--line);
}
.approach-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.approach-track {
  display: flex;
  height: 100%;
  align-items: stretch;
  will-change: transform;
  /* inset the start so the intro panel begins at the shell's content edge,
     matching the Work section's left panel at any viewport width */
  padding-left: var(--shell-left);
}
.approach-intro {
  flex: 0 0 auto;
  /* same effective width as the Work menu column (panel + gap) so the two
     section dividers land at the identical x across all desktop widths */
  width: calc(var(--flag-panel) + var(--flag-gap));
  height: 100%;
  display: flex;
  flex-direction: column;
  /* sits lower in the column, level with the step cards' text, instead of
     centered with a large empty band underneath */
  justify-content: flex-end;
  padding: 0 var(--flag-gap) clamp(64px, 8vh, 80px) 0;
}
.approach-intro .section-title { margin-top: 20px; }
.approach-copy {
  margin-top: 24px;
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 36ch;
}
.step {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  flex: 0 0 auto;
  width: min(80vw, 470px);
  height: 100%;
  border-left: 1px solid var(--line);
  /* top padding clears the fixed nav (~91px tall with the 66px logo);
     bottom padding just clears the blur strip */
  padding: clamp(104px, 14vh, 124px) clamp(28px, 3vw, 56px) calc(var(--blur-h) + clamp(6px, 1.4vh, 16px));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.step > * {
  position: relative;
  z-index: 1;
}
/* soft glow standing in for the old per-card illustration — palette drawn from
   the hero scene (sky blue → indigo → stone lavender → warm parchment) */
.step::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
}
.approach-track .step:nth-of-type(1)::before {
  background: radial-gradient(ellipse 85% 60% at 25% 105%, rgba(126, 158, 199, 0.5), transparent 72%);
}
.approach-track .step:nth-of-type(2)::before {
  background: radial-gradient(ellipse 85% 60% at 30% 105%, rgba(143, 147, 179, 0.52), transparent 72%);
}
.approach-track .step:nth-of-type(3)::before {
  background: radial-gradient(ellipse 85% 60% at 25% 105%, rgba(170, 158, 186, 0.46), transparent 72%);
}
.approach-track .step:nth-of-type(4)::before {
  background: radial-gradient(ellipse 85% 60% at 30% 105%, rgba(214, 188, 148, 0.4), transparent 72%);
}
/* fixed-height foot, content bottom-aligned: sits lower in the card (closer
   to .step-no's baseline gap) instead of leaving a big empty band beneath the
   copy; still aligns every card's title to the same line since the box height
   and copy length are matched card to card */
.step-foot {
  min-height: clamp(180px, 30vh, 240px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.step-no {
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-3);
}
.step-dot { color: var(--accent); }
/* Full-card directional ASCII field behind panel 01. */
.step-ascii {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.14;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 82%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 82%);
}
.step-ascii::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 20%, rgba(241, 239, 233, 0.28) 48%, transparent 76%);
  transform: translateX(-115%);
  animation: ascii-scan 8s ease-in-out infinite;
}
.step-ascii-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(8px, 2.65cqw, 12.5px);
  line-height: 1.28;
  letter-spacing: 0;
  white-space: pre;
  color: var(--ink);
  transform-origin: left top;
  /* fixed 1.4x scale — no fit-to-width, allowed to overflow/crop */
  transform: scale(1.4);
  animation: ascii-flow 9s ease-in-out infinite alternate;
}
@keyframes ascii-flow {
  0% { opacity: 0.72; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}
@keyframes ascii-scan {
  0%, 12% { transform: translateX(-115%); opacity: 0; }
  32% { opacity: 0.65; }
  70%, 100% { transform: translateX(115%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .step-ascii-grid,
  .step-ascii::after { animation: none; }
}
.step-title {
  /* matched to .section-title so it never reads larger than the section heading */
  font-size: clamp(1.3rem, 3.25vw, 2.65rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.03;
  color: var(--ink);
  margin-bottom: clamp(16px, 2.4vh, 30px);
}
.step-copy {
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 34ch;
}
/* touch / reduced-motion fallback: native horizontal swipe, no pinning */
@media (max-width: 759px), (prefers-reduced-motion: reduce) {
  /* Process collapses to a simple full-width vertical stack on small screens */
  .approach-sticky { position: static; height: auto; overflow: visible; }
  .approach-track {
    display: block;
    height: auto;
    transform: none !important;
    padding-left: 0;
  }
  .approach-intro {
    width: auto;
    height: auto;
    padding: clamp(40px, 9vw, 64px) var(--gutter) clamp(18px, 5vw, 32px);
  }
  .step {
    width: auto;
    height: auto;
    min-height: 0;
    border-left: none;
    border-top: 1px solid var(--line);
    padding: clamp(24px, 5.5vw, 38px) var(--gutter);
    justify-content: flex-start;
  }
  .step-foot { margin-top: clamp(14px, 4vw, 22px); min-height: clamp(120px, 20vh, 160px); }
}

/* ============================================================
   06 — CONSULTING GRID
   Image-tile layout: square thumbnail with the project name below
   ============================================================ */
.consult-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 64px) clamp(28px, 3.2vw, 48px);
}
.consult-thumb {
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--raise);
}
.consult-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.consult-thumb.ph-frame { aspect-ratio: 1 / 1; border-radius: 10px; }
.consult-name {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 16px;
}
/* cards with a gallery open the work lightbox */
.consult-card[data-gallery] { cursor: pointer; }
.consult-card[data-gallery]:hover .consult-thumb img { transform: scale(1.03); }
.consult-card[data-gallery]:hover .consult-name::after {
  content: ' \2197';
  font-size: 0.8em;
  color: var(--ink-3);
}
.consult-card[data-gallery]:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.5);
  outline-offset: 4px;
  border-radius: 10px;
}
@media (max-width: 900px) {
  .consult-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .consult-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   07 — INDEPENDENT
   ============================================================ */
.indie-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3.2vw, 48px); /* same column gap as the consulting grid above */
}
.indie-card {
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: clamp(28px, 3.5vw, 48px);
}
.indie-name {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 28px;
}
.indie-meta { display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; }
.indie-meta dt {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 2px;
}
.indie-meta dd { color: var(--ink-2); font-size: 0.95rem; }
.indie-meta a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
  transition: color 0.25s ease;
}
.indie-meta a:hover { color: var(--accent); }
/* visual cards: image + title at rest; on hover the image zooms/blurs under a
   dark mask and the details slide up from the bottom */
.indie-card--visual {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1280 / 1055;
  max-height: 520px;
  border: none;
  isolation: isolate;
}
.indie-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transform: scale(1.001);
  transition: transform 0.7s ease, filter 0.7s ease;
}
.indie-mask {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(4, 5, 7, 0.55), rgba(4, 5, 7, 0.1) 45%);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.indie-card--visual:hover .indie-bg,
.indie-card--visual:focus-visible .indie-bg,
.indie-card--visual:focus-within .indie-bg {
  transform: scale(1.08);
  filter: blur(14px) brightness(0.72);
}
.indie-card--visual:hover .indie-mask,
.indie-card--visual:focus-visible .indie-mask,
.indie-card--visual:focus-within .indie-mask { opacity: 1; }
.indie-kicker {
  display: flex;
  gap: 18px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.indie-kicker .indie-tag { color: var(--ink); }
.indie-kicker .indie-status { color: var(--ink-3); }
.indie-card--visual .indie-name { margin-bottom: 0; text-wrap: balance; }
.indie-details {
  transform: translateY(28px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.55s ease, opacity 0.45s ease;
}
.indie-card--visual:hover .indie-details,
.indie-card--visual:focus-visible .indie-details,
.indie-card--visual:focus-within .indie-details {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.indie-desc {
  color: var(--ink);
  font-size: clamp(0.98rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  max-width: 46ch;
  margin-bottom: 22px;
}
.indie-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.indie-role {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.indie-link {
  color: var(--ink);
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
  transition: color 0.25s ease;
}
.indie-link:hover { color: var(--accent); }

/* ============================================================
   08 — ARCHITECTURE ARCHIVE
   ============================================================ */
.archive-sub { display: grid; gap: 18px; }
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.arch-card-link { display: block; color: inherit; text-decoration: none; }
.arch-card-link:hover .arch-name::after {
  content: ' \2197';
  font-size: 0.8em;
  color: var(--ink-3);
}
.arch-card-link:hover .arch-media img { transform: scale(1.02); }
.arch-media { aspect-ratio: 4 / 5; width: 100%; margin-bottom: 22px; overflow: hidden; border-radius: 20px; }
.arch-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.arch-name {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 10px;
}
.arch-type {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.5;
  margin-bottom: 14px;
}

/* ============================================================
   09 — ABOUT
   ============================================================ */
.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(40px, 7vw, 100px);
  align-items: start;
}
.about-side { position: sticky; top: 100px; }
.about-portrait { aspect-ratio: 4 / 5; width: 100%; }
.about-text { display: grid; gap: 28px; }
.about-text p {
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.about-text p:not(:first-child) {
  font-weight: 400;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.7;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}
.about-text strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   10 — CONTACT
   ============================================================ */
.contact-title {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.contact-copy {
  margin: 30px 0 56px;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 560px;
}
.contact-links { list-style: none; border-top: 1px solid var(--line); max-width: 720px; }
.contact-links li {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.cl-key {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex: 0 0 130px;
}
.contact-links a {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.25s ease;
}
.contact-links a:hover { color: var(--accent); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--line);
  /* extra bottom space so the footer content sits above the blur strip */
  padding: 40px 0 calc(var(--blur-h) + 32px);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-mark { font-weight: 600; color: var(--ink); }
.footer-note, .footer-year {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 880px) {
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 0.68rem; }
  .intro-inner { grid-template-columns: 1fr; gap: 20px; }
  .intro-eyebrow { padding-top: 0; }
  .section-head { grid-template-columns: 1fr; gap: 16px; }
  .section-head .eyebrow,
  .section-head .section-title,
  .section-head .section-sub { grid-column: 1; grid-row: auto; }
  .section-head .eyebrow { padding-top: 0; }
  .flag-layout { grid-template-columns: 1fr; gap: 28px; }
  .flag-stream { border-left: none; padding-left: 0; }
  .flag-media { margin-right: 0; }
  /* pin the project menu just below the fixed header while the stream scrolls */
  .flag-nav {
    position: sticky;
    top: 90px;
    z-index: 20;
    padding: 14px var(--gutter);
    margin: 0 calc(-1 * var(--gutter));
    background: rgba(10, 10, 10, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .flag-menu { display: flex; flex-wrap: wrap; gap: 16px 24px; }
  .flag-menu a { font-size: 1.5rem; }
  .flag-info { grid-template-columns: 1fr; gap: 24px; }
  /* the role-tags + stats column reads as clutter on small screens */
  .flag-side { display: none; }
  .consult-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indie-grid { grid-template-columns: 1fr; }
  .archive-grid { grid-template-columns: 1fr; gap: 48px; }
  .arch-media { aspect-ratio: 1 / 1; }
  .about-layout { grid-template-columns: 1fr; }
  .about-side { position: static; }
  .about-portrait { max-width: 320px; }
}
@media (max-width: 560px) {
  .site-nav { gap: 16px; }
  .site-nav .nav-mark { font-size: 0.82rem; }
  .nav-links { gap: 11px; }
  .nav-links a { font-size: 0.62rem; }
  .consult-grid { grid-template-columns: 1fr; }
  .contact-links li { flex-direction: column; gap: 6px; }
  .cl-key { flex-basis: auto; }
}

/* ── Cross-document page transitions: full-page zoom-through (Mugen-style) ──
   Navigating between the homepage and a case study zooms the whole page: the
   leaving page scales up and fades, the arriving page settles in from slightly
   zoomed. Chromium animates this today; other browsers just load normally. */
@view-transition { navigation: auto; }

/* black backdrop so the transition passes through full black at its midpoint */
::view-transition-group(root) { background: #000; }

/* leaving page: zoom in + push up, dissolving to black by the midpoint */
@keyframes vt-zoom-out {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  48%  { opacity: 0; transform: translateY(-11%) scale(1.18); }
  100% { opacity: 0; transform: translateY(-11%) scale(1.18); }
}
/* arriving page: holds black, then rises up out of it and settles */
@keyframes vt-zoom-in {
  0%   { opacity: 0; transform: translateY(15%) scale(0.92); }
  52%  { opacity: 0; transform: translateY(15%) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* both run the full duration, concurrently — the keyframe holds create the black beat */
::view-transition-old(root) { animation: vt-zoom-out 0.9s cubic-bezier(0.5, 0, 0.2, 1) both; }
::view-transition-new(root) { animation: vt-zoom-in 0.9s cubic-bezier(0.5, 0, 0.2, 1) both; }

/* flagship covers are clickable, same as the "View case study" button */
.flag-cover { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ============================================================
   CONSULTING WORK LIGHTBOX (shared pattern with case-study pages)
   ============================================================ */

/* ── Illustration lightbox: vertical thumbnail rail + full-proportion stage ── */
.illu-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* display:flex above would defeat the hidden attribute — restore it */
.illu-lightbox[hidden] { display: none; }
.illu-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 8, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.illu-lightbox.is-open .illu-lightbox__backdrop { opacity: 1; }
.illu-lightbox__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 16px);
  width: min(1320px, 94vw);
  height: calc(100vh - clamp(96px, 13vh, 140px));
  opacity: 0;
  transform: translateY(14px) scale(0.99);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}
.illu-lightbox.is-open .illu-lightbox__panel { transform: none; opacity: 1; }
.illu-lightbox__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: clamp(12px, 1.6vw, 20px);
}
.illu-lightbox__rail {
  flex: 0 0 auto;
  width: clamp(72px, 8vw, 110px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.illu-lightbox__thumb {
  appearance: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  background-color: #0a0a0a;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}
.illu-lightbox__thumb:hover { opacity: 0.75; }
.illu-lightbox__thumb.is-active { opacity: 1; border-color: rgba(255, 255, 255, 0.55); }
.illu-lightbox__stage {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0c0c0e;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  overflow: hidden;
}
.illu-lightbox__img {
  display: block;
  /* preserves each artwork's own proportion — never stretched or cropped */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.illu-lightbox__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.illu-lightbox__title { margin: 0; font-size: 0.95rem; font-weight: 500; color: var(--ink); }
.illu-lightbox__title span { margin-left: 10px; font-size: 0.8rem; color: var(--ink-3); }
/* category tabs (About / Landing Page / Branding / App UIUX) — plain text
   labels on the left of the bar, old-site style: active white, rest dim */
.illu-lightbox__tabs { display: flex; gap: clamp(18px, 2.6vw, 34px); margin-right: auto; }
.illu-lightbox__tab {
  appearance: none;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink-3);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease;
}
.illu-lightbox__tab:hover { color: var(--ink-2); }
.illu-lightbox__tab.is-active { color: #fff; }
/* video entries: play badge on the thumb, video fills the stage like an image */
.illu-lightbox__thumb { position: relative; }
.illu-lightbox__thumb.is-video::after {
  content: '\25B6';
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.illu-lightbox__vid {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* About tab: hero panel with project intro + category tiles (old-site layout) */
.illu-lightbox__about {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.illu-lightbox__about[hidden] { display: none; }
.lb-about-hero {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-size: cover;
  background-position: center;
  border-radius: inherit;
}
/* fit the artwork to the panel's height (full image top-to-bottom, sides may
   crop or gap); the dark fill matches the art's own edge tone so any gap on an
   unusually wide panel reads as part of the scene */
.lb-about-hero--fit-h {
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #0b1013;
}
/* full-bleed live embed inside a lightbox tab (e.g. an external interactive page) */
.lb-embed {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
  border-radius: inherit;
  overflow: hidden;
  background: #f7f6f2;
  container-type: inline-size;
}
.lb-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Guarantee the embedded page a desktop-width viewport (>=1440px logical) and
   scale it DOWN to fit the panel; scale never exceeds 1. This must be a
   container query, not a JS class: JS runs only after the tab is revealed,
   which raced the (lazy) iframe's load — if the embedded site hydrated first
   it read the narrow fluid width and locked into its mobile layout. A
   container query is resolved by CSS at layout time, before the iframe can
   load, so the wide viewport is in place synchronously. The transform scale
   (JS-computed) only affects visual size, never the viewport the embedded
   page measures, so a late scale update can't reintroduce the bug. Gating on
   container width also keeps this independent of browser zoom / DPR, which
   change window.innerWidth. Below 760px the frame stays fluid so phones get
   the embedded site's own responsive layout. */
@container (min-width: 760px) {
  .lb-embed iframe {
    width: max(1440px, 100cqw);
    height: calc(100% / var(--embed-scale, 1));
    transform: scale(var(--embed-scale, 1));
    transform-origin: top left;
  }
}
.lb-about-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.lb-about-scrim {
  position: absolute;
  inset: 0;
  /* reference treatment: a heavy overall darkening so the artwork reads as
     atmosphere and the copy stays fully legible */
  background:
    linear-gradient(to right, rgba(2, 4, 3, 0.9) 0%, rgba(2, 4, 3, 0.74) 55%, rgba(2, 4, 3, 0.58) 100%),
    rgba(2, 4, 3, 0.45);
}
.lb-about-copy {
  position: relative;
  padding: clamp(28px, 4vw, 56px);
  max-width: 900px;
}
.lb-about-copy h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}
.lb-about-tags {
  margin: 10px 0 26px;
  font-size: 0.95rem;
  color: #1effab;
}
.lb-about-tags span { color: var(--ink-3); margin: 0 6px; }
.lb-about-copy p:not(.lb-about-tags) {
  margin-top: 14px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.lb-about-tiles {
  position: relative;
  display: flex;
  border-top: 1px solid var(--line-2);
}
.lb-about-tiles button {
  appearance: none;
  flex: 1 1 0;
  padding: clamp(20px, 3vh, 34px) 10px;
  background: rgba(5, 8, 7, 0.72);
  border: none;
  border-right: 1px solid var(--line-2);
  color: var(--ink);
  font-family: inherit;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-weight: 400;
  cursor: pointer;
  transition: background 0.25s ease;
}
.lb-about-tiles button:last-child { border-right: none; }
.lb-about-tiles button:hover { background: rgba(255, 255, 255, 0.05); }
/* light variant (Cedar): no overlay, dark text straight on the light video */
.lb-about-hero--no-scrim .lb-about-scrim { display: none; }
.lb-about-hero--light .lb-about-scrim { display: none; }
.lb-about-hero--light .lb-about-copy h2 { color: #1b1b1b; }
.lb-about-hero--light .lb-about-tags span { color: rgba(0, 0, 0, 0.3); }
.lb-about-hero--light .lb-about-copy p:not(.lb-about-tags) { color: rgba(25, 25, 25, 0.78); }
.lb-about-hero--light .lb-about-tiles { border-top-color: rgba(0, 0, 0, 0.14); }
.lb-about-hero--light .lb-about-tiles button {
  background: rgba(255, 255, 255, 0.55);
  border-right-color: rgba(0, 0, 0, 0.14);
  color: #1b1b1b;
}
.lb-about-hero--light .lb-about-tiles button:hover { background: rgba(255, 255, 255, 0.05); }
/* light artwork that is too busy to sit directly under copy: keep the dark-text
   treatment but wash the image toward white on the copy side, so the
   illustration still reads on the right without fighting the text */
/* fit the artwork to the panel's width (full image edge-to-edge horizontally;
   top/bottom may crop or gutter) */
.lb-about-hero--fit-w {
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #0b1013;
}
/* the fit fills default to near-black; on a light illustration the gutters
   need to match the artwork's own pale sky instead */
.lb-about-hero--light.lb-about-hero--fit-h,
.lb-about-hero--light.lb-about-hero--fit-w { background-color: #fdfefe; }
.lb-about-hero--light.lb-about-hero--light-wash .lb-about-scrim {
  display: block;
  background: linear-gradient(
    to right,
    rgba(252, 253, 251, 0.95) 0%,
    rgba(252, 253, 251, 0.9) 42%,
    rgba(252, 253, 251, 0.62) 72%,
    rgba(252, 253, 251, 0.4) 100%
  );
}
/* light variant for split panels: light stage, dark text (card keeps its own look) */
.lb-split--light { background: #eef0ef; }
.lb-split--light .lb-split-eyebrow { color: rgba(20, 20, 20, 0.45); }
.lb-split--light .lb-split-title { color: #1b1b1b; }
.lb-split--light .lb-split-desc { color: rgba(25, 25, 25, 0.72); }
/* split showcase panel: title/description left, aurora video card right */
.lb-split {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.7fr);
  gap: clamp(24px, 3.5vw, 56px);
  align-items: center;
  padding: clamp(20px, 3.5vw, 48px);
}
.lb-split-eyebrow {
  font-size: 0.85rem;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.lb-split-title {
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ink);
  margin-bottom: 18px;
}
.lb-split-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 36ch;
}
.lb-split-card {
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 2.6vw, 40px);
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 100% at 0% 105%, rgba(30, 255, 171, 0.42), transparent 78%),
    radial-gradient(ellipse 65% 95% at 38% 110%, rgba(24, 157, 107, 0.45), transparent 76%),
    radial-gradient(ellipse 90% 100% at 100% 105%, rgba(30, 255, 171, 0.4), transparent 78%),
    #05070d;
}
/* Ethene Labs landing card — purple/magenta aurora to match the live site's glow */
#et-landing .lb-split-card {
  background:
    radial-gradient(ellipse 90% 100% at 0% 105%, rgba(179, 90, 255, 0.42), transparent 78%),
    radial-gradient(ellipse 65% 95% at 38% 110%, rgba(123, 42, 201, 0.48), transparent 76%),
    radial-gradient(ellipse 90% 100% at 100% 105%, rgba(217, 70, 168, 0.4), transparent 78%),
    #0a0612;
}
.lb-split-frame {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, 0.75), 0 10px 28px rgba(0, 0, 0, 0.45);
}
.lb-split-frame video {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  border-radius: inherit;
}
@media (max-width: 860px) {
  .lb-split { grid-template-columns: minmax(0, 1fr); align-content: start; overflow-y: auto; }
  .lb-split-card { height: auto; }
}
/* auto-advancing slide stack inside a split card (App UIUX screens) */
.lb-slides {
  position: relative;
  width: 100%;
  /* intrinsic 1440x900 ratio keeps the box alive at any viewport width —
     without it the absolute-positioned slides collapse the container to 0 height */
  aspect-ratio: 1440 / 900;
  height: auto;
  max-height: 100%;
}
.lb-slides img,
.lb-slides video {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, 0.75), 0 10px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.7s ease;
}
.lb-slides img.is-active,
.lb-slides video.is-active { opacity: 1; }
/* manual prev/next arrows over the slide card */
.lb-split-card { position: relative; }
.lb-slide-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0 0 4px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(5, 8, 7, 0.55);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lb-slide-nav:hover { background: rgba(5, 8, 7, 0.85); border-color: rgba(255, 255, 255, 0.55); }
.lb-slide-nav--prev { left: clamp(8px, 1.2vw, 16px); }
.lb-slide-nav--next { right: clamp(8px, 1.2vw, 16px); }
/* "scroll to explore" affordance on scrubbable landing cards */
.lb-scrub-hint {
  position: absolute;
  bottom: clamp(10px, 1.8vh, 18px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(5, 8, 7, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  pointer-events: none;
  animation: scrub-hint-pulse 2.4s ease-in-out infinite;
  transition: opacity 0.5s ease;
}
.lb-scrub-hint.is-hidden { opacity: 0; animation: none; }
@keyframes scrub-hint-pulse {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -5px); }
}
@media (prefers-reduced-motion: reduce) { .lb-scrub-hint { animation: none; } }
.illu-lightbox__actions { display: flex; align-items: center; gap: 16px; }
.illu-lightbox__close {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.illu-lightbox__close:hover { background: rgba(255, 255, 255, 0.16); }
@media (max-width: 720px) {
  .illu-lightbox__panel { height: calc(100vh - clamp(72px, 11vh, 100px)); }
  .illu-lightbox__body { flex-direction: column-reverse; }
  .illu-lightbox__rail { width: auto; flex-direction: row; overflow-y: visible; overflow-x: auto; }
  .illu-lightbox__thumb { width: clamp(56px, 16vw, 80px); }
}
@media (prefers-reduced-motion: reduce) {
  .illu-lightbox__backdrop, .illu-lightbox__panel, .cs-illu-card { transition: none; }
}

/* ============================================================
   Boot loader — the AZ mark pulses over a dark cover until the
   page has loaded, then the cover fades and is removed.
   ============================================================ */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}
.site-loader img {
  height: 132px;
  width: auto;
  animation: loaderPulse 1.4s ease-in-out infinite;
}
.site-loader.done { opacity: 0; pointer-events: none; }
@keyframes loaderPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .site-loader img { animation: none; } }

/* ============================================================
   Mobile burger menu — below 880px the link row collapses into
   a hamburger that opens a full-width panel under the bar.
   ============================================================ */
.nav-burger { display: none; }
@media (max-width: 880px) {
  .nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: 0;
    padding: 10px 6px;
    cursor: pointer;
  }
  .nav-burger span {
    width: 22px;
    height: 2px;
    background: var(--ink);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .site-nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  .site-nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-links { display: none; }
  .site-nav.nav-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(10, 10, 10, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    padding: 22px var(--gutter) 28px;
  }
  .site-nav.nav-open .nav-links a { font-size: 0.9rem; }
  .site-nav.nav-open .nav-links a.nav-about { margin-left: 0; }
}

/* ============================================================
   Mobile lightbox stack — multi-image tabs render as a single
   vertical scroll of full-width images (no slideshow, no rail).
   Toggled from JS at <=720px; hidden inline by default.
   ============================================================ */
.illu-lightbox__stack {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.illu-lightbox__stack img,
.illu-lightbox__stack video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}